:root {
  --lb-green: #038443;
  --lb-orange: #f59120;
  --lb-grey: #b1b3b4;
  --lb-black: #231f20;
  --lb-white: #f2f6eb;
  --font-size-base: 16px;
  --spacing-base: 8px;
  --gradient-orange-white: linear-gradient(
    180deg,
    rgba(242, 195, 141, 1) 0%,
    rgba(255, 255, 255, 1) 2%,
    rgba(242, 198, 149, 1) 100%
  );
  --gradient-grey-white: linear-gradient(
    180deg,
    rgba(177, 179, 180, 1) 0%,
    rgba(255, 255, 255, 1) 2%,
    rgba(177, 179, 180, 1) 100%
  );
}

html {
  scroll-behavior: smooth;
}

@media (max-width: 768px) {
  .product-swiper-container .fs-4 {
    font-size: 1.5rem;
  }
}

@media (max-width: 576px) {
  .product-swiper-container {
    height: 40vh !important;
  }
  .product-swiper-container .fs-4 {
    font-size: 1.25rem;
  }
}
.custom-pagination .swiper-pagination-bullet {
  width: 15px;
  height: 15px;
  background: #008641 !important; /* Green color */
  opacity: 0.25;
  margin: 0 19px !important; /* Increased spacing */
  border: 1px solid #ffffff !important;
}

.custom-pagination .swiper-pagination-bullet-active {
  opacity: 1;
  background: #008641; /* Green color */
}
/* Swiper Container */
s .topSwiper {
  width: 100%;
}
/* i want the swiper pagination color to be orange */
.swiper-pagination-bullet-active {
  background-color: var(--lb-orange) !important;
}

/* Swiper Slides */
.swiper-slide {
  height: 120% !important;
}
/* Images inside Swiper */
.swiper-slide-img {
  width: 100%; /* Makes the image scale responsively */
  height: auto; /* Maintains the aspect ratio */
  object-fit: cover; /* Ensures the image fills the slide properly */
}

.numbers-section-container {
  height: 25vh;
  width: 100vw;
}
.number {
  color: var(--lb-orange);
}
.numbers-counter {
  transition: 0.2s background ease;
  height: 80%;
  border-radius: 10px;
}
.numbers-counter:hover {
  background: #bbd7c2;
}

.product-swiper-container {
  height: 60vh;
}

.services-card-container {
  width: 100%;
  height: 85%;
}

.services-card {
  border-bottom: 2px solid var(--lb-green);
  transition: 0.2s box-shadow ease;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19);
  padding: 0px !important;
  width: 30%;
  border-radius: 10px;
}

.services-card:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.services-img-container {
  width: 100%;
  height: 70%;
}
.services-card-caption {
  height: 30%;
}

.services-btn {
  border-radius: 50%;
  font-size: 2rem;
  color: white;
  transition: 0.2s color ease;
}

.services-btn:hover {
  border-radius: 50%;
  font-size: 2rem;
  color: green;
}

.services-img-overlay {
  position: absolute;
  bottom: 0;
  background: rgb(0, 0, 0);
  background: rgba(0, 0, 0, 0.5); /* Black see-through */
  color: #f1f1f1;
  width: 100%;
  height: 100%;
  transition: 0.5s ease;
  opacity: 0;
  color: white;
  font-size: 20px;
  padding: 20px;
  text-align: center;
  border-radius: 10px;
}

.services-img-container:hover .services-img-overlay {
  opacity: 1;
}

.services-img {
  border-radius: 10px;
}

.prodSwiper {
  height: 80%;
}

.product-swiper-card {
  height: 90% !important;
  width: 25vw !important;
  border-radius: 50px;
  background-color: #0384432e;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.product-swiper-image {
  width: 70%;
}

.prod-nav-prev {
  height: 4rem;
  width: 8rem;
}

.prod-nav-next {
  height: 4rem;
  width: 8rem;
}

.basket-container {
  height: 70vh;
  width: 100vw;
  overflow: visible;
}

.basket-box-container {
  width: 80%;
}

.basket-big-box {
  height: 100%;
  background-color: var(--lb-green);
  width: 40%;
  border-radius: 50px;
}

.basket-small-container {
  height: 100%;
  width: 45%;
}

.basket-small-box {
  height: 45%;
  width: 85%;
  background-color: #fafffe;
  border-radius: 30px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.news-section-container {
  height: 100vh;
  width: 100vw;
  padding: 20px 0;
  box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.1);
  overflow: visible;
}

.news-heading-top {
  color: var(--lb-orange);
  height: 8%;
  font-size: 1.5rem;
  font-weight: bold;
  text-align: center;
}

.news-button-container {
  width: 100%;
}

.tab-nav {
  height: 8%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.news-button-container {
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 10px;
}
.news-button {
  height: 100%;
  width: auto;
  padding: 10px 20px;
  background: white;
  color: black !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transition: background-color 0.5s ease-in-out;
  border-radius: 5px !important;
  border: none;
  font-weight: bold;
  cursor: pointer;
}

.news-button.active {
  background: var(--gradient-orange-white) !important;
}
.news-button:hover {
  background: var(--gradient-orange-white) !important;
}

.news-content-container {
  width: 80%;
  border-radius: 5px;
  padding: 20px;
  background: white;
  margin-top: 0px !important;
  height: 100%;
}

.news-card-container {
  background: white;
  border-radius: 5px;

  width: 100%;
  margin: auto;
  padding: 10px 0;
}

.news-container-heading {
  height: 8%;
}

.news-card {
  height: 45vh !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  border-radius: 10px;

  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
  background: #fff;

  align-items: center;
}

.news-card-img {
  width: 100%;
  height: 180px; /* Fixed height for uniformity */
  object-fit: cover;
  border-radius: 10px 10px 0 0;
}
.news-card-caption {
  font-size: 1rem;
  font-weight: bold;
  text-align: center;
  padding: 10px;
  height: auto;
}

/* Important-link container */

.important-links-container {
  text-align: center;
  padding: 20px;
}

.important-title {
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 10px;
  color: #038443;
}

.title-underline {
  border-bottom: 2px solid #ccc;
  width: 80%;
  margin: 10px auto;
}

/* Set a fixed height for both containers */
.news-content-container {
  position: relative;
}

.tab-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.tab-content.active {
  opacity: 1;
  z-index: 1;
}

/* Ensure table doesn't overflow */
.notice-container {
  max-height: calc(100% - 100px);
  overflow-y: auto;
}

/* Ensure swiper container doesn't overflow */
.news-card-container {
  height: 100%;
}
.imgcard {
  border: 2px solid orange;
  padding: 10px;
  border-radius: 5px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto !important;
}

.imgcard img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

@media (max-width: 768px) {
  .imgcard {
    height: 40px; /* Adjust for smaller screens */
    width: 100px !important;
  }
}
/* Logo Card Styling */

/* Read More Link */
.news-card a {
  color: #008641;
  font-size: 0.9rem;
  text-decoration: none;
  font-weight: bold;
  margin-top: auto;
  padding: 10px;
  justify-content: center;
  display: flex;
}
.notice-container-heading {
  height: 8%;
}

.notice-container {
  width: 100%;
}

.contact-form-canvas {
  height: 100vh;
  width: 100vw;
}

.contact-form-container {
  height: 90%;
  width: 70%;
  border-radius: 100px;

  background: white;
}

.contact-form {
  width: 85%;
}

.contact-form-heading {
  height: 20%;
}

.btn-outline-orange {
  color: #070707;
  border-color: #1a7805;
  background: white;
  border-radius: 20px;
  width: 95px !important;
  height: 27px !important;
  display: flex;
  justify-content: center;
  align-items: center;
}
.footer-logo-section {
  position: relative;
  padding-bottom: 20px;
}

.logo-border {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 25px;
  height: 2px;
  background-color: #008641; /* Green color */
  margin: 10px 0;
}
.contact-form-border {
  border: #f59120;
}

.popup {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: white;
  color: black;
  text-align: center;
  z-index: 1000; /* Ensures it is above all other elements */
  display: none; /* Hidden by default */
  animation: slide-up 0.5s ease-out; /* Optional animation */
  height: 110px;
}

.form-label-name {
  margin-left: 0.3rem;
}

.contact-card {
  width: 250px; /* Fixed width */
  height: 250px; /* Fixed height to make it square */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid #ddd;
  border-radius: 10px;
  text-align: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  background-color: #fafffe;
}
.icon {
  font-size: 24px;
  color: #28a745;
}
@keyframes slide-up {
  from {
    transform: translateY(100%);
  }

  to {
    transform: translateY(0);
  }
}

.small {
  background-color: #fafffe !important;
  margin: 0px !important;
}
.popup.hidden {
  display: none !important; /* Hidden when the 'hidden' class is applied */
}
@media only screen and (max-width: 992px) {
  .my-font {
    font-size: 20px;
    font-weight: 600;
  }
  .knowledge-basket-heading {
    margin-top: 0px !important;
  }
  .services-card-caption {
    width: 100%;

    height: 30%;
  }

  .services-img-container {
    height: 70%;
  }

  .services-card {
    width: 40%;
  }

  .product-swiper-card {
    height: 180px !important;
    width: 270px !important;
    margin: 20px;
    border-radius: 0px !important;
  }

  .basket-container {
    height: 100vh;
    width: 100vw;
  }

  .basket-box-container {
    width: 90%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .basket-big-box {
    width: 80%;
    border-radius: 5px !important;
  }

  .basket-small-container {
    border-radius: 5px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .basket-small-box {
    width: 80%;
    border-radius: 5px !important;
    height: 100%;
    /* add drop shadow here */
    box-shadow: rgba(0, 0, 0, 0.25);
    padding: 20px;
    margin: 10px;
  }
  .color-green {
    color: var(--lb-green);

    .news-content-container {
      border-radius: 0px;
    }

    .numbers-section-container {
      height: 70vh;
    }

    .numbers-counter {
      height: 20%;
    }

    .contact-form-container {
      border-radius: 50px;
      width: 80%;
    }
  }

  @media only screen and (max-width: 600px) {
    .services-card {
      width: 90%;
    }

    .contact-form-heading {
      height: 15%;

      justify-content: center;
      align-items: center;
    }
  }

  .text-green {
    color: #008641 !important;
  }

  /* Transparent Dropdown Styles */
  /*.custom-dropdown {
    background-color: rgba(255, 255, 255, 0.8);*/ /* Semi-transparent white */
  /*border: 1px solid rgba(0, 0, 0, 0.1);*/ /* Optional: subtle border */
  /*box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);*/ /* Optional: soft shadow */
  /*backdrop-filter: blur(10px);*/ /* Optional: blur effect for modern browsers */
  /*transition: all 0.3s ease-in-out;*/ /* Smooth transition */
  /*}*/
  /* Dropdown Item Styling */
  /*.custom-dropdown .dropdown-item {
        color: #333;*/ /* Text color */
  /*transition: color 0.3s ease, background-color 0.3s ease;
    }*/
  /* Hover Effects for Items */
  /*.custom-dropdown .dropdown-item:hover {
            color: #fff;*/ /* Text color on hover */
  /*background-color: rgba(0, 0, 0, 0.6);*/ /* Dark transparent background on hover */
  /*}*/
  .text-orange {
    color: orange;
  }
  /* You can specify a specific shade of orange if needed */
}
.news-tab-btn {
  width: 200px !important; /* Adjust width for square size */
  height: 50px !important; /* Make height equal to width for square */
  border: 2px solid #fd7e14 !important; /* Orange border color */
  color: #fd7e14 !important; /* Orange text color */
  font-size: 1.2rem; /* Larger font size */
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0; /* Remove default padding */
  border-radius: 8px !important; /* Optional: slightly rounded corners */
  transition: all 0.3s ease;
}

.news-tab-btn:hover {
  background-color: #28a745 !important; /* Green background on hover */
  border-color: #28a745 !important; /* Green border on hover */
  color: white !important; /* White text on hover */
}

.news-tab-btn.active {
  background-color: #fd7e14 !important; /* Orange background for active */
  color: white !important; /* White text for active */
}
/* Tab Content Transitions */
.tab-content {
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  height: 0;
  overflow: hidden;
}

.tab-content.active {
  display: block;
  opacity: 1;
  height: auto;
  overflow: visible;
  transition: opacity 0.3s ease-in-out, height 0.3s ease-in-out;
}

/* Button Active State */
.news-tab-btn.active {
  background-color: #fd7e14;
  color: white;
  transition: all 0.3s ease;
}

.news-tab-btn {
  transition: all 0.3s ease;
}
/* General small screens (iPhone SE and similar) */
@media (max-width: 375px) {
  .product-swiper-container {
    height: 50vh !important;
  }
  .basket-container {
    height: auto !important;
    width: 100vw;
  }
  .news-section-container {
    height: 110vh !important;
  }
}
/* General for devices up to iPhone XR width */
@media (max-width: 414px) {
  .news-section-container {
    height: 80vh !important;
  }
  .contact-form-canvas {
    height: 70vh !important;
  }
}
.imgcard a:hover {
  transform: scale(1.05);
  transition: transform 0.3s ease;
}