@media (max-width: 768px) {
  /* .carousel-inner.slider-img-height {
    height: 225px !important;
  } */

  .our-innovation .box-colum {
    display: flex;
    /* padding: 0; */
  }

  .our-innovation .box img {
    width: 70%;
    margin-bottom: 5px;
  }

  .our-innovation .box h3 {
    font-size: 10px;
  }

  .our-innovation .box.left-1 {
    /* right: 5px; */
  }

  .our-innovation .box-colum a {
    /* margin-right: 10px; */
    margin-right: 8px;
  }

  .paddingy-40 {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .padding-top {
    padding-top: 30px;
  }

  .img-bar-mobile {
    height: 100%;
    object-fit: cover;
  }

  .carousel-item-bar {
    height: 100%;
  }

  /* .banner {
    height: 225px !important;
  } */

  .banner-slider-bar::before {
    height: 100% !important;
  }

  .our-history .context .container .timeline .timeline-item {
    width: 110px !important;
  }

  .ourvalues-section .banner-title {
    font-family: var(--font-kalnia);
    font-size: 30px;
    position: relative;
    display: inline-block;
    margin-bottom: 30px;
    /* padding-bottom: 0px; */
    /* margin-top: 30px; */
  }

  .dhaejplant-img1 {
    margin-left: -0px;
    margin-top: 15px;
  }
  .offeringnew-bar {
    margin-top: 80px;
  }
  .banner .banner-title {
    margin-top: 0px;
  }

  .mb-py-0 {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
  }

  .div2 img {
    position: absolute;
    top: -10%;
    right: 0px;
    border-radius: 20px;
  }

  .footer-bottom {
    justify-content: start;
    gap: 0px;
    padding: 0px;
  }

  .section-blog .blog-product-img {
    padding: 120px 0px 0px 0px;
  }

  .footer .container .inner-footer {
    padding: 35px 0px;
  }

  .award-cards-container {
    grid-template-columns: repeat(1, 1fr);
  }

  .mb-px-0 {
    padding-left: 0px !important;
    padding-right: 0px !important;
  }

  .mb-pt-0 {
    padding-top: 0px !important;
  }

  .mb-pb-0 {
    padding-bottom: 0px !important;
  }

  .mb-pr-0 {
    padding-right: 0px !important;
  }

  .mb-pl-0 {
    padding-left: 0px !important;
  }

  .custom-header {
    display: none;
  }

  /* .banner {
    height: 150vh;
  } */

  .banner .right-images {
    position: relative;
  }
  /* 
  .banner .banner-title {
    font-size: 35px;
  } */

  .banner .banner-btn {
    flex-direction: column;
    align-items: center;
  }

  .banner .banner-btn .banner-custom {
    width: fit-content;
  }

  .connecting-line {
    display: none;
  }

  .our-innovation .box {
    position: relative;
  }

  .our-innovation .box.left-2 {
    top: 5px;
    right: 0px;
  }

  .our-innovation .box.left-3 {
    right: 0px;
    /* bottom: 0; */
    top: 5px;
  }

  .our-innovation .box {
    /* width: 100%;
    margin: 10px auto; */
    /* width: 30vw; */
    margin: 20px auto;
    font-size: 10px !important;
  }

  .our-innovation {
    height: auto;
  }

  .our-innovation .row {
    margin: 0 auto;
  }

  /* .our-innovation .box.left-3 {
    bottom: 0px;
  } */

  .center-image {
    top: 0px;
  }

  .our-innovation .box.right-2 {
    top: 5px;
    left: 0px;
  }

  .counter-banner .counter-box {
    width: 100%;
  }

  .counter-box .content {
    text-align: start;
  }

  .swiper-container .swiper-button-prev,
  .swiper-container .swiper-button-next {
    color: #fff;
    font-size: 22px;
  }

  .swiper-button-next:after,
  .swiper-button-prev:after {
    font-size: 33px !important;
  }

  .swiper-container .swiper-button-prev,
  .swiper-container .swiper-button-next {
    background-image: url("") !important;
  }

  .our-products .product-box {
    width: 85%;
  }

  .our-products .product-box a {
    position: relative;
    bottom: -100px;
    left: 0px;
  }

  .our-products .product-row {
    display: none;
  }

  .our-products .swiper-container .swiper-button-prev,
  .our-products .swiper-container .swiper-button-next {
    background-color: #0b4235;
    border-radius: 50%;
    padding: 19px;
    top: 66%;
  }

  .our-products .swiper-button-next:after,
  .our-products .swiper-button-prev:after {
    font-size: 22px !important;
  }

  .home-our-blogs .our-row {
    display: none;
  }

  .blogs-cards .date-time {
    text-align: start;
  }

  .our-products {
    padding-bottom: 40px !important;
  }

  .home-our-blogs .swiper-button-prev {
    left: -3px;
  }

  .home-our-blogs .swiper-button-next {
    right: -3px;
  }

  #slide-container #slider ul li {
    /* height: 200px; */
  }

  #slide-container .col2 ul,
  #slide-container .col4 ul,
  #slide-container .col1 ul,
  #slide-container .col3 ul {
    width: 100%;
    margin: 0px;
  }

  .our-story-section {
    height: auto;
    padding: 25px 0px;
  }

  .our-story-section .story-images {
    padding: 0px;
  }

  .story-content .story-title::after {
    right: 20px;
  }

  .story-images .swiper-container {
    height: 400px;
    padding-top: 35px;
  }

  .story-images .swiper-wrapper {
    display: flex;
    /* Use flexbox for continuous layout */
    animation: none !important;
    /* Animation for marquee effect */
  }

  .story-images .swiper-slide {
    min-width: auto !important;
    /* Ensure each slide takes full width */
    transition: none;
    /* Smooth transitions */
  }

  /* Define the marquee animation */
  /* @keyframes marquee {
      0% {
        transform: translateX(0);
      }
      100% {
        transform: translateX(-100%);
      }
    } */
  .our-history .context .container .our-history-title {
    font-size: 28px;
  }

  .our-history .context .tabbed-content .tab {
    margin-bottom: 0px;
  }

  .story-images .our-story-img img {
    width: auto;
  }

  .story-images .swiper-container {
    rotate: 0deg;
  }

  .story-content .story-mb-title {
    display: block;
    top: 0px;
    text-align: start;
    padding: 0px;
  }

  .story-content .story-title::after {
    bottom: -14px;
  }

  .story-content .story-title.story-ds-title {
    display: none;
  }

  .our-story-section .story-content {
    text-align: justify;
    padding: 0px;
  }

  .tab-box {
    flex-direction: column;
  }

  .tab-box .tab-box-img {
    width: 100%;
  }

  .tab-box .tab-box-content .custom-btn {
    position: relative;
  }

  .chairman-section {
    padding-top: 60px !important;
  }

  .chairman-section .title-box {
    padding-bottom: 30px;
  }

  .chairman-section .chairman-img-overly {
    left: 0px;
    height: 175px;
    /* top: 0px; */
    left: 50%;
    transform: translateX(-50%);
  }

  .chairman-section-box {
    padding-top: 100px;
    padding-bottom: 0px;
    margin-top: 90px;
  }

  .chairman-section .message-text,
  .chairman-section .chairman-border {
    width: 100%;
  }

  .chairman-section .chairman-name-box {
    display: flex;
    width: 100%;
  }

  .line-comma-icon {
    position: relative;
    left: 0px;
    height: 35px;
  }

  .circule-bg {
    display: none;
  }

  .chairman-section .message-title {
    font-size: 18px;
  }
  .counter-box {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
  }
  .chairman-section .message-title span {
    display: none;
  }
  .our-innovation-section h2 {
    font-size: 30px;
  }
  .contact-container {
    height: 100% !important;
  }

  .our-innovation-section h2::before {
    left: 0%;
  }
  /* .about-counter .row {
    display: none;
  } */
  .about-counter {
    border-radius: none;
  }

  .story-images .our-story-img {
    width: 100%;
  }
}

/* General styles for the gallery */
#slider {
  display: flex;
  /* This will help in making columns responsive */
}

/* Mobile styles */
@media (max-width: 768px) {
  /* When the screen width is 768px or smaller */
  /* .col1,
  .col2,
  .col3 {
    flex: 0 0 50%;
    max-width: 50%;
  } */

  .col1,
  .col2,
  .col3 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  /* Optional: hide extra boxes */
  .col3 {
    display: none;
    /* Hide the third column on mobile */
  }
}

/* Adjustments for larger screens if needed */

.slider-container {
  position: relative;
  padding: 0 50px;
  /* Make room for navigation buttons */
}

.centered-mode-slider {
  padding: 50px 0;
}

.product-swiper-slide {
  transition: all 0.3s ease;
  opacity: 0.8;
  transform: scale(0.9);
}

.product-swiper-slide .Categories_box {
  transition: all 0.3s ease;
}

.product-swiper-slide.swiper-slide-active {
  opacity: 1;
  transform: scale(1);
  z-index: 2;
}

.product-swiper-slide.swiper-slide-active .Categories_box {
  transform: translateY(-20px);
}

/* Custom navigation styles */
.custom-navigation {
  position: absolute;
  width: 100%;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  z-index: 10;
  pointer-events: none;
  /* This ensures clicks pass through to the slider */
}

.custom-swiper-button-next,
.custom-swiper-button-prev {
  position: absolute;
  width: 40px;
  height: 40px;
  background-color: #004236;
  border-radius: 50%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  pointer-events: auto;
  /* Re-enable clicks on the buttons */
}

.custom-swiper-button-prev {
  left: 50px;
}

.custom-swiper-button-next {
  right: 50px;
}

.custom-swiper-button-next img,
.custom-swiper-button-prev img {
  width: 20px;
  /* height: 20px; */
}

.custom-swiper-button-next img {
  transform: rotate(180deg);
}

/* .newcontainer {
  max-width: 1140px;
  margin: 0 auto;
} */

/* Container width adjustments */
/* .container {
  max-width: 1400px;
  width: 1400px;
  margin: 0 auto !important;
  padding: 0 15px;
} */

/* Hide navigation buttons on mobile */
@media (max-width: 768px) {
  .custom-navigation {
    display: none;
  }

  .slider-container {
    padding: 0;
  }

  .product-categoryies-btn .swiper-button-prev {
    right: 88% !important;
  }

  .product-categoryies-btn .swiper-button-next {
    left: 88% !important;
  }

  .heading-inv-doc::after {
    width: 100% !important;
  }

  .heading-inv-doc::before {
    width: 50%;
  }

  .newsroomicon {
    width: 30px;
    height: 30px;
  }

  .media-elec-sec {
    padding: 30px 0px;
  }

  .media-event-boxes .year-badge {
    top: 50%;
    left: 40%;
  }

  .virtual-sec-mainhead::before {
    left: 0;
  }

  .career-thumb-category-slide .swiper-button-next,
  .career-thumb-category-slide .swiper-button-prev {
    transform: rotate(0deg);
  }

  .career-perscprective-card {
    padding: 60px 20px 60px;
  }

  .manufact-first-sec .content-card {
    position: relative;
    left: 0;
    padding: 20px;
  }

  .quality-image-container-manufacture {
    margin-top: 0px;
  }

  .our-innovation .box.right-3 {
    /* bottom: 0px; */
    bottom: -5px;
  }

  .quality-image-container-manufacture img:first-child {
    bottom: 0;
  }

  .sanad-div1 img {
    width: 100%;
    left: 0;
    z-index: -1;
  }

  .card-irrigation {
    position: relative !important;
    width: 100% !important;
    left: 0 !important;
  }

  .research-img {
    height: 100% !important;
  }

  /* .swiper-slide {
    width: 100% !important;
  } */

  .swiper-dhaej-prev {
    z-index: 9;
    /* bottom: 85px; */
    left: 140px;
  }

  .swiper-dhaej-next {
    z-index: 9;
    /* bottom: 85px; */
    left: 90px;
  }

  .wheet-img-shape {
    z-index: -9;
  }

  .sustain-third-secrow {
    position: relative;
  }

  .text-black {
    color: #111 !important;
  }

  .env-sec-margin {
    margin: 60px 0px;
  }

  .env-sec-padding {
    padding: 60px 0px;
  }
}

/* In your main.css */
.loading-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(255, 255, 255, 1);
  z-index: 9999;
}

.loading-spinner {
  width: 50px;
  height: 50px;
  border: 5px solid #f3f3f3;
  border-top: 5px solid #0b4235;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.selfie-img.card-item:hover ~ #slide-container .col1 ul,
.selfie-img.card-item:hover ~ #slide-container .col3 ul {
  animation: none !important;
  /* Disable the animation */
  transition: none !important;
  /* Disable the transition */
}