/* Layout Style */

/* .header-1 {
  background-image: none !important;
} */

/* .banner-header .left-shape {
         position: absolute;
         left: 0;
         top: -6%;
         transform: translateY(-50%);
      }

      .banner-header .left-shape img {
         width: 85px;
        
      }

      
      .banner-header .bag-shape {
         position: absolute;
         right: 0;
         top: -1%;
         width: 10%;
         transform: translateY(-50%);
      }

      .banner-header .bag-shape img {
         width: 85px;
        
      }

      
      .banner-header .header-top-wrapper {
         position: relative;
      }


    
      @media (max-width: 767px) {

         .banner-header .left-shape,
         .banner-header .bag-shape {
            display: none !important;
         }
      } */

/* === Loader Circle replaced with GIF === */
/* .spinner {
         position: relative;
         width: 200px;
         height: 200px;
  
         background: #a5b4a5;
         border-radius: 50%;
         background-image: url(/img/elephant-loader.gif);
         background-repeat: no-repeat;
         background-position: center;
         background-size: 138%;
      }



      .spinner div {
         display: none;
      } */

.spinner {
  position: relative;
  width: 90px;
  height: 90px;
  margin-bottom: 20px;
}

.spinner div {
  transform-origin: 45px 45px;
  animation: fade 1.2s linear infinite;
}

.spinner div:after {
  content: "";
  position: absolute;
  top: 8px;
  left: 42px;
  width: 10px;
  height: 28px;
  border-radius: 5px;
  background: #6b8f5f;
}

.spinner div:nth-child(1) {
  transform: rotate(0deg);
  animation-delay: -1.1s;
}

.spinner div:nth-child(2) {
  transform: rotate(30deg);
  animation-delay: -1s;
}

.spinner div:nth-child(3) {
  transform: rotate(60deg);
  animation-delay: -0.9s;
}

.spinner div:nth-child(4) {
  transform: rotate(90deg);
  animation-delay: -0.8s;
}

.spinner div:nth-child(5) {
  transform: rotate(120deg);
  animation-delay: -0.7s;
}

.spinner div:nth-child(6) {
  transform: rotate(150deg);
  animation-delay: -0.6s;
}

.spinner div:nth-child(7) {
  transform: rotate(180deg);
  animation-delay: -0.5s;
}

.spinner div:nth-child(8) {
  transform: rotate(210deg);
  animation-delay: -0.4s;
}

.spinner div:nth-child(9) {
  transform: rotate(240deg);
  animation-delay: -0.3s;
}

.spinner div:nth-child(10) {
  transform: rotate(270deg);
  animation-delay: -0.2s;
}

.spinner div:nth-child(11) {
  transform: rotate(300deg);
  animation-delay: -0.1s;
}

.spinner div:nth-child(12) {
  transform: rotate(330deg);
  animation-delay: 0s;
}

@keyframes fade {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0.2;
  }
}

/* === Loading Text === */
.txt-loading {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2px;
  font-size: 28px;
  font-weight: 700;
  color: #2f5130;
  letter-spacing: 2px;
}

.letters-loading {
  animation: pulseText 1.2s ease-in-out infinite;
  display: inline-block;
}

@keyframes pulseText {
  0%,
  100% {
    opacity: 0.3;
    transform: scale(1);
  }

  50% {
    opacity: 1;
    transform: scale(1.1);
  }
}

/* .header-logo-bg {
         position: relative;
         background-image: url('<?php echo $this->Url->build('/', ['fullBase' => true]) ?>img/header-bg-forest.png');
         background-repeat: no-repeat;
         background-size: cover;
         background-position: center;
         overflow: hidden;
      }

      .header-logo-bg::before {
         content: "";
         position: absolute;
         inset: 0;
         background: rgb(255 255 255 / 35%);

         z-index: 0;
      } */

/* Optional hover effect for lift animation */
.socialmedia ul li a:hover {
  transform: translateY(-3px) scale(1.05);
  color: #fff !important;
}

.socialmedia ul li a:active {
  transform: translateY(1px) scale(0.95);
}

/* circle-division */

.circle-tab .nav-link {
  background: #0d6e0d;
  color: white;
  border-radius: 50px;
  padding: 14px 32px;
  font-weight: bold;
  margin: 6px;
  font-size: 18px;
}

.circle-tab .nav-link.active {
  background: #1b5e20 !important;
  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.4);
}

.card-level {
  background: white;
  border-radius: 22px;
  padding: 28px;
  margin: 28px 0;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.18);
  border: none;
}

.level-title {
  font-size: 28px;
  color: #0d4d0d;
  text-align: center;
  font-weight: bold;
  background: linear-gradient(to right, #a8e6cf, #b2dfdb);
  padding: 18px;
  border-radius: 16px;
  margin-bottom: 25px;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}

.grid-btn {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 20px;
}

.btn-level {
  background: #e8f5e8;
  color: #0d4d0d;
  border: 3px solid #2e7d32;
  padding: 22px;
  border-radius: 18px;
  text-align: center;
  font-weight: bold;
  font-size: 19px;
  transition: all 0.4s;
}

.btn-level:hover {
  background: #c8e6c9;
  transform: translateY(-8px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.25);
}

.btn-level.active {
  background: #1b5e20 !important;
  color: white !important;
  border-color: #1b5e20 !important;
}

.btn-section {
  background: #fff3e0 !important;
  color: #e65100 !important;
  border-color: #ef6c00 !important;
}

.btn-beat {
  background: #e3f2fd !important;
  color: #1565c0 !important;
  border-color: #1976d2 !important;
  font-size: 17px;
  cursor: default;
}

.hero-content {
  position: absolute !important;
  bottom: 0 !important;
  left: 20px;
}

@media (min-width: 768px) and (max-width: 1024px) {
  .header-top-section {
    display: none !important;
  }

  #header-sticky {
    top: 0 !important;
  }

  .hero-content {
    position: relative !important;
    left: 0 !important;
  }

  .hero-content h1 {
    font-size: 10px !important;
    line-height: 24px;
  }

  .hero-content p {
    font-size: 8px !important;
    margin-bottom: 3px;
    line-height: 14px;
  }

  .black-box {
    padding: 10px !important;
  }

  .hero-1 {
    height: 63vh;
  }

  /* .hero-3 .hero-content {
    padding-bottom: 110px;
  } */

  /* .hero-3 .swiper.hero-slider-3 {
    height: 383px !important;
  } */

  .header-main .logo {
    width: 100% !important;
  }

  .header-main .logo .header-logo-2 img {
    width: 65% !important;
  }

  .header-main .logo .header-logo img {
    width: 65% !important;
  }
}

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  .header-top-section {
    display: none !important;
  }

  .hero-content {
    position: relative !important;
    left: 0 !important;
  }
  #header-sticky {
    top: 0 !important;
  }

  .hero-content h1 {
    font-size: 10px !important;
    line-height: 24px;
  }

  .hero-content p {
    font-size: 8px !important;
    margin-bottom: 3px;
    line-height: 14px;
  }

  .black-box {
    padding: 10px !important;
  }

  .hero-1 {
    height: 63vh;
  }

  /* .hero-3 .hero-content {
    padding-bottom: 110px;
  } */

  /* .hero-3 .swiper.hero-slider-3 {
    height: 383px !important;
  } */

  .header-main .logo {
    width: 100% !important;
  }

  .header-main .logo .header-logo-2 img {
    width: 65% !important;
  }

  .header-main .logo .header-logo img {
    width: 65% !important;
  }
}

@media (min-width: 481px) and (max-width: 767px) {
  .header-top-section {
    display: none !important;
  }

  #header-sticky {
    top: 0 !important;
  }

  .hero-content {
    position: relative !important;
    left: 0 !important;
  }
  .hero-content h1 {
    font-size: 10px !important;
    line-height: 24px;
  }

  .hero-content p {
    font-size: 8px !important;
    margin-bottom: 3px;
    line-height: 14px;
  }

  .black-box {
    padding: 10px !important;
  }

  .hero-1 {
    height: 63vh;
  }

  /* .hero-3 .hero-content {
    padding-bottom: 110px;
  } */

  /* .hero-3 .swiper.hero-slider-3 {
    height: 383px !important;
  } */

  .header-main .logo {
    width: 100% !important;
  }

  .header-main .logo .header-logo-2 img {
    width: 100% !important;
  }

  .header-main .logo .header-logo img {
    width: 100% !important;
  }
}

@media (min-width: 320px) and (max-width: 480px) {
  .header-top-section {
    display: none !important;
  }

  #header-sticky {
    top: 0 !important;
  }

  .hero-content {
    position: relative !important;
    left: 0 !important;
  }
  .hero-content h1 {
    font-size: 10px !important;
    line-height: 24px;
  }

  .hero-content p {
    font-size: 8px !important;
    margin-bottom: 3px;
    line-height: 14px;
  }

  .black-box {
    padding: 10px !important;
  }

  .hero-1 {
    height: 63vh;
  }

  /* .hero-3 .hero-content {
    padding-bottom: 110px;
  } */

  /* .hero-3 .swiper.hero-slider-3 {
    height: 383px !important;
  } */

  .header-main .logo {
    width: 100% !important;
  }

  .header-main .logo .header-logo-2 img {
    width: 100% !important;
  }

  .header-main .logo .header-logo img {
    width: 100% !important;
  }
}

/* home page Style  */

.marquee-container {
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, #f8f9fa, #e9ecef);
  border-radius: 10px;
  padding: 10px 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* the wrapper uses CSS vars, default fallback duration (fast) used immediately */
.marquee-wrapper {
  display: inline-block;
  white-space: nowrap;
  animation: scroll-left var(--marquee-duration, 20s) linear infinite;
  transform: translateX(var(--marquee-start, 100%));
  will-change: transform;
}

/* keyframes use CSS vars */
@keyframes scroll-left {
  0% {
    transform: translateX(var(--marquee-start, 100%));
  }

  100% {
    transform: translateX(var(--marquee-end, -100%));
  }
}

.marquee-item {
  display: inline-block;
  /* margin: 0 40px; */
  font-weight: 600;
  font-size: 1.1rem;
  color: #0c0c0cff;
  cursor: pointer;
  transition: color 0.3s;
}

.marquee-item:hover {
  color: #0b8620ff;
}

.marquee-container:hover .marquee-wrapper {
  animation-play-state: paused;
}

.second-banner-section .testimonial-card-items img {
  width: 881px;
  height: 438px;
  object-fit: cover;
  /* prevents shrinking, fills area */
  object-position: center;
  /* keeps center crop */
  display: block;
  border-radius: 10px;
}

/* Ensure columns stretch so children can be full height */
.team-col {
  display: flex;
  align-items: stretch;
  /* makes the child .team-card-item fill column height */
}

.team-card-item {
  display: flex;
  flex-direction: column;
  width: 100%;
  /* make the card fill the column height */
  height: 100%;
  background: rgba(255, 255, 255, 0.03);
  /* subtle background, optional */
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
}

/* Fixed image area so all images match height */
.team-image {
  flex: 0 0 200px;
  /* fixed height area (adjust 200px to taste) */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.06);
}

.team-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* IMPORTANT: keeps aspect, fills area */
  display: block;
}

/* content takes remaining space; push meta to bottom if needed */
.team-content {
  flex: 1 1 auto;
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* center content vertically; change to flex-start if you want top */
}

.team-content h4 {
  margin: 0 0 8px;
  font-size: 1.05rem;
}

.team-content p {
  margin: 0;
  color: rgba(255, 255, 255, 0.85);
}

/* Responsive: smaller image area on small screens */
@media (max-width: 768px) {
  .team-image {
    flex: 0 0 150px;
  }
}

.hero-bottom .best-price-wrapper .nav {
  gap: 6px;
}

.news-image {
  width: 100%;
  aspect-ratio: 420 / 300;
  /* keeps same shape on all screens */
  overflow: hidden;
}

.news-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* prevents stretching */
  display: block;
  border-radius: 6px;
  /* optional */
}

.import-bg {
  position: relative;
  background: url("/img/importnt-bg.jpg") no-repeat center center/cover;
  z-index: 1;
}

/* Green overlay */
.import-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(174 255 174 / 22%);
  /* green with low opacity */
  z-index: -1;
  border-radius: 20px;
}

.state-symbol-bg {
  position: relative;
  /* background: #e9efe6; */
  /* your current color */
  overflow: hidden;
}

/* Background image with opacity */
.state-symbol-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../img/state-symbol-bg.png") no-repeat center/cover;
  background-position: center;
  pointer-events: none;
  z-index: 0;
}

/* Ensure content stays above the image */
.state-symbol-bg > * {
  position: relative;
  z-index: 1;
}

.blink-star {
  display: inline-block;
  color: #0b8620;
  font-weight: 800;
  font-size: 22px;
  animation: star-glow 1.2s infinite;
}

@keyframes star-glow {
  0% {
    text-shadow: 0 0 0 rgba(11, 134, 32, 0);
    opacity: 0.9;
    transform: scale(1);
  }

  50% {
    text-shadow: 0 0 18px rgba(11, 134, 32, 0.7),
      0 0 36px rgba(11, 134, 32, 0.35);
    opacity: 0.35;
    transform: scale(1.18);
  }

  100% {
    text-shadow: 0 0 0 rgba(11, 134, 32, 0);
    opacity: 0.9;
    transform: scale(1);
  }
}

.client-image img {
  border-radius: 50%;
  width: 100px;
  height: 100px;
  object-fit: cover;
  /* prevents stretching */
  display: block;
}

.testimonial-wrapper .testimonial-card-items {
  padding: 0 15px !important;
  border-radius: 12px;
  border: 1px solid #ebebeb !important;
  margin-top: 0 !important;
  background: linear-gradient(180deg, #1e5a34 0%, #3f945e 100%) !important;
  min-height: 187px;
  display: flex;
}

@media (min-width: 768px) and (max-width: 1024px) {
  .testimonial-wrapper .testimonial-card-items {
    min-height: 275px !important;
  }
}

.our-team .text h4 {
  font-size: 17px !important;
}

.our-team .text p {
  font-size: 15px !important;
  line-height: 23px;

  /* min-height: 109px !important; */
}

.hero-3 .hero-slider-3 .swiper-wrapper {
  height: 80vh !important;
}

/* ===== Forest banner styles ===== */
:root {
  --forest-dark: #143a1f;
  --forest-mid: #27683a;
  --forest-light: #e9f6ea;
  --accent: #f6a85c;
}

/* .testimonial-section {
      background: linear-gradient(180deg, rgba(235, 245, 235, 1) 0%, rgba(220, 235, 220, 1) 100%);
      padding: 60px 0;
      position: relative;
      overflow: visible;
      font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
   } */

.second-banner-section {
  background: url("/img/second-banner.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  padding: 60px 0;
  position: relative;
  overflow: visible;
}

/* Responsive adjustments */
@media (max-width: 991px) {
  .second-banner-section {
    background-position: center top;
    /* shifts focus upward on tablets */
  }
}

@media (max-width: 576px) {
  .second-banner-section {
    background-size: cover;
    background-position: 70% top;
    /* keeps main content visible on mobile */
  }
}

.eyebrow {
  color: #f6a85c;
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 1px;
  margin-bottom: 10px;
  display: inline-block;
}

/* Main heading */
.title {
  font-size: clamp(30px, 5vw, 54px);
  font-weight: 800;
  color: #1f4f2f;
  margin-bottom: 16px;
  line-height: 1.1;
}

/* Highlight word in heading */
.title .accent {
  color: #7c4c13;
  font-weight: 900;
}

/* Paragraph text */
.lead {
  /* font-family: "Alegreya", serif; */
  color: #000000ff !important;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.7;
  margin-bottom: 20px;
  text-align: justify;
  /* max-width: 620px; */
}

/* Button */
.btn-cta {
  /* background: linear-gradient(90deg, #27683a, #2f7c44); */
  background: linear-gradient(90deg, #27683a, #c0bb73ff);
  color: #fff;
  padding: 10px 20px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

/* Mobile adjustments */
@media (max-width: 767px) {
  .title {
    font-size: clamp(26px, 8vw, 38px);
  }

  .lead {
    font-size: 14px;
    max-width: 100%;
  }
}

/* same height for all slides */
.second-banner-section .testimonial-card-items {
  width: 100%;
  height: 420px;
  /* FIXED uniform height */
  overflow: hidden;
  /* required for mask */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* masked full-cover image */
.second-banner-section .testimonial-card-items img {
  width: 100%;
  height: 100%;
  object-fit: contain !important;
  /* FULL IMAGE COVER (NO WHITE GAPS) */
  object-position: center;

  -webkit-mask-image: url("/img/mask-shape.png");
  mask-image: url("/img/mask-shape.png");

  -webkit-mask-size: cover;
  mask-size: cover;

  -webkit-mask-position: center center;
  mask-position: center center;

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;

  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

@media (max-width: 768px) {
  .second-banner-section .testimonial-card-items {
    height: 260px;
  }
}

.last-sec-bg {
  position: relative;
  background-image: url("/img/animals-background.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 60px 0;
}

/* low-opacity color overlay */
.last-sec-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 70, 30, 0.3);
  /* low opacity green tint */
  pointer-events: none;
}

.brand-image p {
  color: #000 !important;
}

.destination-card-items-state-symbol {
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 1.5rem;
  border: 1px solid #e1e1e1;
  border-radius: 20px;
}

.destination-card-items-state-symbol img {
  border-radius: 20px 0 0 20px;
  width: 150px;
}

@media (min-width: 481px) and (max-width: 767px) {
  .destination-card-items-state-symbol img {
    border-radius: 20px 0 0 20px;
    width: 110px;
  }
}

/* 
  ##Device = Most of the Smartphones Mobiles (Portrait)
  ##Screen = B/w 320px to 479px
*/

@media (min-width: 320px) and (max-width: 480px) {
  .destination-card-items-state-symbol img {
    border-radius: 20px 0 0 20px;
    width: 110px;
  }

  .hero-3 .hero-slider-3 .swiper-wrapper {
    /* height: 82vh !important; */
    height: 63vh !important;
  }
}

.black-box {
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  padding: 30px;
}

.new-bg-set-officials {
  position: relative;
  background-color: #e8f5e9;
  /* Main background color */
  overflow: hidden;
}

/* Background Image with Low Opacity Layer */
.new-bg-set-officials::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("/img/bg-tnfd.jpg");
  /* change image path */
  background-size: cover;
  background-position: center;
  /* opacity: 0.25; */
  /* adjust opacity here */
  z-index: 0;
}

.new-bg-set-officials * {
  position: relative;
  z-index: 1;
  /* So content shows above background */
}

.news-section-bg {
  position: relative;
  background-image: url("/img/content-bg.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}

.footer-leaves {
  position: relative;
  background-image: url("/img/grass.png"); /* update path if needed */
  background-repeat: no-repeat;
  background-position: bottom center; /* 👈 image sticks to bottom */
  background-size: contain; /* keeps full image visible without cropping */
  overflow: hidden;
}
/* 
.about-wrapper-2,
.news-section,
.about-section {
  background: url("/img/content-bg.png") no-repeat;
  background-size: cover;
  background-position: center;
  position: relative;
} */

.about-wrapper-2::before,
.news-section::before,
.about-section::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, 0.2);
  z-index: -1;
}

/* Background similar to screenshot */
.recorded-forest-area {
  background: url("your-leaf-image.jpg") center/cover no-repeat;
  position: relative;
}

.recorded-forest-area::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.8);
}

.recorded-forest-area > .container {
  position: relative;
  z-index: 1;
}

/* Pills */
.forest-pill {
  display: inline-block;
  padding: 12px 30px;
  background: linear-gradient(180deg, #e6f6d9 0%, #bedd9b 100%);
  border-radius: 999px;
  border: 2px solid #d4e7d5; /* same darker green edge */
  box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.18); /* soft shadow like pic */
  font-weight: 700;
  font-size: 1rem;
  color: #000;
}

@media (max-width: 576px) {
  .forest-pill {
    white-space: normal;
    width: 100%;
  }
}

.birdsanctury .accordion-button {
  font-size: 17px !important;
}

.birdsanctury
  .faq-wrapper
  .faq-items
  .accordion-item
  .accordion-header
  .accordion-button.collapsed {
  background-color: transparent;
  padding: 18px 30px;
  color: var(--header);
}

@media (min-width: 768px) and (max-width: 1024px) {
  .news-viewport {
    max-height: 55vh !important;
  }
  .hero-3 .hero-slider-3 .swiper-wrapper {
    height: 63vh !important;
  }

  .inside-banner .news-viewport {
    max-height: 47vh !important;
  }
}

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  .news-viewport {
    max-height: 55vh !important;
  }
  .hero-3 .hero-slider-3 .swiper-wrapper {
    height: 63vh !important;
  }
  .inside-banner .news-viewport {
    max-height: 47vh !important;
  }
}

/* our team design */

/* --- Card Wrapper --- */
.card-wrapper {
  position: relative;
  width: 380px;
  min-height: 195px;
  background: #ffffff;
  padding: 22px 25px 26px 25px;
  border-radius: 22px;
  /* box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12); */
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  margin: auto;
}

/* Blue Title Tag */
.title-box {
  position: absolute;
  top: -9px;
  left: -9px;
  /* background: #1d4e89; */
  /* background: rgb(0, 51, 102);
  background: linear-gradient(
    159deg,
    rgba(0, 51, 102, 1) 0%,
    rgba(15, 82, 186, 1) 100%
  ); */

  background: linear-gradient(159deg, rgb(0 102 4) 0%, rgb(130 186 15) 100%);
  color: #fff;
  padding: 14px 22px;
  border-radius: 11px 25px 25px 4px;
  width: 70%;
  font-weight: bold;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.title-box small {
  display: block;
  font-weight: normal;
  font-size: 14px;
  opacity: 0.85;
}

/* Grey Left Curve Strip */
.left-curve {
  position: absolute;
  top: -9px;
  left: -29px;
  width: 29px;
  height: 92px;
  background: rgb(0, 51, 102);
  background: linear-gradient(
    -113deg,
    rgba(0, 51, 102, 1) 0%,
    rgba(15, 82, 186, 1) 100%
  );
  border-radius: 54px 0 0 61px;
}

/* Avatar Image */
.card-wrapper .avatar {
  position: absolute;
  top: -40px;
  right: 0;
  width: 115px;
  height: 115px;
  border-radius: 50%;
  border: 6px solid #ecf4e7;
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.card-wrapper .avatar img {
  width: 100%;
  height: 100%;
  /* object-fit: cover; */
}

/* Text Content */
.text-box {
  margin-top: 58px;
  padding-left: 0;
  font-size: 15px;
  line-height: 1.5;
  color: #000;
  font-weight: 400 !important;
}
/* ---------- RESPONSIVE: md and below (stacked order) ---------- */

@media (min-width: 768px) and (max-width: 992px) {
  .title-box {
    padding: 14px 0;
  }
}

/* 
  ##Device = Tablets, Ipads (landscape)
  ##Screen = B/w 768px to 992px
*/

@media (min-width: 768px) and (max-width: 992px) and (orientation: landscape) {
  .title-box {
    padding: 14px 0;
  }
}

@media (max-width: 991.98px) {
  /* md and smaller */
  .card-wrapper {
    position: relative;
    max-width: 85%; /* allow full column width on small screens */
    min-height: auto;
    padding: 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  /* hide the left decorative curve on small screens */
  .left-curve {
    display: none;
  }

  /* Title becomes a full-width bar under the avatar */
  .title-box {
    position: static;
    width: 100%;
    border-radius: 12px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
    margin: 12px 0 8px 0;
    text-align: center;
  }

  /* stack avatar as first visual element */
  .left-curve .avatar {
    position: static;
    width: 120px;
    height: 120px;
    margin-top: 0;
    margin-bottom: 8px;
    order: -2; /* avatar first */
  }

  /* force title right after avatar */
  .title-box {
    order: -1;
  }

  /* content below */
  .text-box {
    margin-top: 10px;
    padding: 12px 0;
    font-size: 15px;
  }
}

/* Optional: tweak for very small phones */
@media (max-width: 575.98px) {
  .left-curve .avatar {
    width: 110px;
    height: 110px;
  }
  .title-box {
    padding: 12px 0;
    font-size: 16px;
  }
  .text-box {
    font-size: 14px;
    padding: 0 10px;
    margin-top: 0 !important;
  }
}

.vline {
  width: 4px;
  min-height: 86px;
  background: linear-gradient(180deg, var(--accent-line), #147a2f);
  border-radius: 4px;
  margin-left: 6px;
}

@media (min-width: 992px) {
  .text-box {
    margin-top: 65px !important;
  }
}

/* sidebar css  */

.exact-sidebar {
  /* font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial; */
  color: var(--text);
}

/* outer card to match image */
.exact-sidebar {
  background: #fff;
  border-radius: var(--card-radius);
  padding: 14px;
  box-shadow: 0 8px 30px rgba(34, 50, 84, 0.06);
  border: 1px solid rgba(20, 34, 59, 0.04);
  max-width: 360px;
  width: 100%;
  box-sizing: border-box;
}

/* list */
.menu-list {
  list-style: none;
  padding: 6px;
  margin: 0;
}
.menu-list li {
  margin-bottom: 6px;
}

.menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 6px;
  border-radius: 12px;
  position: relative;
  transition: background 0.12s, transform 0.06s;
  text-decoration: none;
  color: var(--text);
  overflow: visible;
  padding-left: 18px;
}

.menu-item .left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

/* icon container */
.icon-box {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: #22304a;
  font-size: 1.05rem;
  flex-shrink: 0;
}

.menu-item .label {
  font-size: 0.98rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #0b1220;
}

/* right badge (white round with border) */
.count-badge {
  min-width: 34px;
  height: 28px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.02);
  font-weight: 700;
  color: #111827;
  font-size: 0.85rem;
}

/* active item: left pill and light-blue background for content area */
.menu-item.active {
  /* background: linear-gradient(
    90deg,
    rgb(218 237 255 / 95%),
    rgba(255, 255, 255, 0.9)
  ); */

  background: linear-gradient(
    90deg,
    rgb(239 255 218 / 95%),
    rgba(255, 255, 255, 0.9)
  );
  border-radius: 12px;
  padding-left: 18px; /* space for the left pill pseudo-element */
}

/* left pill using pseudo element */
.menu-item.active::before {
  content: "";
  position: absolute;
  left: -2px;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 52%;
  background: #799d17;
  border-radius: 999px;
  box-shadow: 0 6px 20px rgba(43, 126, 247, 0.12);
}

/* active icon background & color */
.menu-item.active .icon-box {
  /* background: rgba(43, 126, 247, 0.12); */
  background: rgb(77 133 16 / 12%);
  color: #799d17;
}

.menu-item .icon-box {
  /* background: rgba(43, 126, 247, 0.12); */
  background: rgb(77 133 16 / 12%);
  color: #799d17;
}
/* active label color slightly darker blue-ish */
.menu-item.active .label {
  color: #0d2303;
}

.menu-item:hover {
  background: #fbfff4;
  transform: translateY(-1px);
  text-decoration: none;
}

/* subtle separators like in image (thin gap handled by margin-bottom) */

/* responsive: shrink text on smaller screens */
@media (max-width: 480px) {
  .exact-sidebar {
    max-width: 100%;
    padding: 10px;
    border-radius: 14px;
  }
  .icon-box {
    width: 34px;
    height: 34px;
  }
  .menu-item {
    padding: 10px 6px;
  }
  .label {
    font-size: 0.95rem;
  }
}

/* card style  */

/* .promo-card {
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial;
} */

:root {
  --card-radius: 14px;
  --card-gap: 18px;
  --phone-bg: #f4f6f8;
  --shadow-strong: 0 14px 40px rgba(15, 23, 42, 0.12);
  --shadow-soft: 0 8px 24px rgba(15, 23, 42, 0.08);
  --muted: #cbd5e1;
  --forest-900: #123217;
  --forest-800: #1b4a29;
  --forest-700: #2b6b3c;
  --forest-600: #4b9a61;
  --muted: #6b6f63;
  --glass: rgba(255, 255, 255, 0.85);
  --card-radius: 14px;
}

/* stacked cards list */
.promos-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 8px;
  padding-bottom: 16px;
}

/* each promo card */
.promo-card {
  background: linear-gradient(90deg, var(--forest-700), var(--forest-800));
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  min-height: 98px;
  padding: 18px;
  color: #fff;
  box-shadow: var(--shadow-soft);
  display: flex;
  align-items: center;
  gap: 16px;
}

/* left text area */
.promo-left {
  flex: 1;
  min-width: 0;
}
.promo-tag {
  font-size: 12px;
  opacity: 0.9;
  margin-bottom: 6px;
  font-weight: 600;
}
.promo-percent {
  color: #fff;
  text-decoration: none;
  font-size: 15px;
  line-height: 22px !important;
  font-weight: 600;
  margin: 0 0 6px;
  letter-spacing: -0.6px;
}

.promo-card .promo-left {
  line-height: 22px !important;
}
.promo-desc {
  font-size: 12px;
  opacity: 0.95;
  margin: 0;
}

/* right decorative graphic (box or percent symbol) */
.promo-deco {
  flex: 0 0 86px;
  height: 86px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.8;
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.12));
}

/* rounded white clipped overlay on the right to mimic screenshot arc */
.promo-card::after {
  content: "";
  position: absolute;
  right: -22px;
  top: -8px;
  width: 120px;
  height: 120px;
  background: rgba(255, 255, 255, 0.13);
  border-radius: 40px;
  transform: rotate(18deg);
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* smaller rounded corner highlight top-left */
.promo-card::before {
  content: "";
  position: absolute;
  left: -20px;
  top: -28px;
  width: 64px;
  height: 64px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  transform: rotate(12deg);
  pointer-events: none;
}

/* responsive tweaks */
@media (max-width: 480px) {
  .promo-deco {
    flex: 0 0 76px;
    height: 76px;
    opacity: 0.22;
  }
  .promo-card {
    padding: 14px;
    min-height: 86px;
    border-radius: 12px;
  }
  .promo-percent {
    font-size: 16px;
  }
}

.vision-1 {
  color: #fff;
  background: linear-gradient(135deg, #0f9b0f, #1e9600, #56ab2f);
}

.objectives-1 {
  color: #fff;

  background: linear-gradient(135deg, #ff8c00, #ffa600, #ffd000);
}

/* vision and object  */

/* grid of two tiles equal height */
/* .vo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--card-gap);
  align-items: stretch;
}
@media (max-width: 900px) {
  .vo-grid {
    grid-template-columns: 1fr;
  }
} */

.vo-tile {
  position: relative;
  display: flex;
  min-height: var(--tile-min-height);
  border-radius: var(--card-radius);
  overflow: hidden;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.98),
    rgba(255, 255, 255, 0.9)
  );
  box-shadow: var(--shadow);
  transition: transform 0.24s ease, box-shadow 0.24s ease;
}
.vo-tile:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 48px rgba(12, 30, 50, 0.12);
}

/* left accent column */
.vo-left {
  flex: 0 0 160px;
  padding: 28px 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 18px;
  background: linear-gradient(
    180deg,
    rgba(15, 138, 88, 0.06),
    rgba(15, 138, 88, 0.02)
  );
  border-right: 1px solid rgba(12, 30, 50, 0.04);
}
.vo-left .icon {
  width: 84px;
  height: 84px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  box-shadow: 0 8px 28px rgba(12, 30, 50, 0.06);
}
.vo-left img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  display: block;
}

.vo-left .label {
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.9px;
}
.vo-left .abbr {
  font-size: 18px;
  font-weight: 700;
  color: var(--accent);
}

/* right content area */
.vo-right {
  flex: 1 1 auto;
  padding: 26px 28px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.vo-title {
  margin: 0 0 10px 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--heading);
}

.vo-intro {
  margin: 0 0 14px 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
}

/* content area: flexible, with internal scroll if overflow */
.vo-content {
  flex: 1 1 auto;
  overflow: auto;
  padding-right: 6px;
  max-height: calc(var(--tile-min-height) - 120px);
}
.vo-content ul {
  /* padding-left: 16px; */
  margin: 0;
  color: #213044;
  font-size: 15px;
  line-height: 1.8;
}
.vo-content li {
  margin-bottom: 12px;
  position: relative;
  padding-left: 10px;
}
/* .vo-content li:before{
      content: "•";
      position:absolute;
      left:0;
      color:var(--accent);
      font-weight:700;
    } */

/* decorative corner svg */
.vo-deco {
  position: absolute;
  right: 10px;
  top: 10px;
  opacity: 0.08;
  width: 220px;
  height: 220px;
  pointer-events: none;
}

/* scrollbar small style for vo-content */
.vo-content::-webkit-scrollbar {
  width: 8px;
}
.vo-content::-webkit-scrollbar-thumb {
  background: rgba(15, 20, 30, 0.06);
  border-radius: 8px;
}

/* small screens tweaks */
@media (max-width: 480px) {
  .vo-left {
    flex: 0 0 120px;
    padding: 18px;
    align-items: center;
    text-align: center;
    border-right: 0;
    border-bottom: 1px solid rgba(12, 30, 50, 0.04);
  }
  .vo-right {
    padding: 18px;
  }
  /* .vo-grid {
    gap: 18px;
  } */
}

/* subtle fade-in */
.vo-tile {
  opacity: 0;
  transform: translateY(10px);
  animation: fadeUp 0.6s ease forwards;
}
@keyframes fadeUp {
  to {
    opacity: 1;
    transform: none;
  }
}
/* stagger */
.vo-tile:nth-child(1) {
  animation-delay: 0.04s;
}
.vo-tile:nth-child(2) {
  animation-delay: 0.12s;
}

/* Vision mission css */

:root {
  --forest-bg: #03261a;
  --forest-main: #0b6b46;
  --forest-main-soft: #16945c;
  --forest-text-light: #e7f7ee;
  --forest-muted: #b9d6c7;
}

/* SECTION BACKGROUND – designed to sit over your banner image area */
.vo-section {
  color: #fff;
  position: relative;
  /* padding: 60px 0; */
}

.vo-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.03) 0,
    transparent 40%
  );
  opacity: 0.45;
  pointer-events: none;
}

.vo-section .container {
  position: relative;
  z-index: 1;
}

/* SECTION TITLE */
.vo-kicker {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--forest-muted);
}

.vo-main-title {
  color: #ffffff;
  font-weight: 700;
  margin-top: 6px;
  margin-bottom: 6px;
}

.vo-title-underline {
  width: 80px;
  height: 3px;
  margin: 0 auto;
  border-radius: 999px;
  background: linear-gradient(90deg, #b8ff95, #4ad6a5);
}

/* CARD WRAPPER – similar structure as your previous version but calmer */
.vo-card {
  position: relative;
  display: flex;
  border-radius: 16px;
  overflow: hidden;
  background: rgba(4, 31, 22, 0.88);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.55);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.vo-card-alt {
  background: rgba(6, 40, 29, 0.92);
}

.vo-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.6);
  border-color: rgba(184, 255, 149, 0.7);
}

/* LEFT STRIP */
.vo-card-side {
  width: 108px;
  min-width: 108px;
  padding: 22px 14px;
  /* background: linear-gradient(180deg, #40d38a, var(--forest-main)); */
  background: linear-gradient(180deg, #164a30, var(--forest-main));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}

.vo-icon-wrapper {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}

.vo-icon-wrapper i {
  font-size: 24px;
  color: #ffffff;
}

.vo-label {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.8px;
  color: #f6fff9;
}

/* CARD BODY */
.vo-card-body {
  /* background: radial-gradient(
      circle at top left,
      rgba(11, 107, 70, 0.3),
      transparent 55%
    ),
    radial-gradient(
      circle at bottom right,
      rgba(4, 77, 47, 0.4),
      transparent 55%
    ),
    var(--forest-bg); */

  background: linear-gradient(90deg, var(--forest-700), var(--forest-800));
  padding: 24px 26px 22px 24px;
  flex: 1;
}

.vo-heading {
  font-size: 21px;
  font-weight: 700;
  color: var(--forest-text-light);
  margin-bottom: 8px;
}

.vo-subheading {
  font-size: 13px !important;
  text-transform: uppercase !important;
  letter-spacing: 1.8px;
  color: var(--forest-muted) !important;
  margin-bottom: 2px;
}

/* LIST */
.vo-list {
  list-style: none;
  padding: 0;
  margin: 10px 0 0;
}

.vo-list li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 12px;
  font-size: 16px;
  color: #d6ece0;
  line-height: 1.7;
}

.vo-list li:last-child {
  margin-bottom: 0;
}

.vo-list li::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 2px solid #b8ff95;
  position: absolute;
  left: 0;
  top: 7px;
}

.vo-list li::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 21px;
  width: 1px;
  height: calc(100% - 24px);
  background: linear-gradient(to bottom, #b8ff95, transparent);
}

.vo-list li:last-child::after {
  display: none;
}

/* RESPONSIVE */
@media (max-width: 991.98px) {
  .vo-card {
    flex-direction: column;
  }

  .vo-card-side {
    width: 100%;
    flex-direction: row;
    justify-content: flex-start;
    padding: 14px 18px;
  }

  .vo-icon-wrapper {
    margin-bottom: 0;
    margin-right: 10px;
  }

  .vo-label {
    font-size: 13px;
  }
}

/* ifs style */
:root {
  --green-900: #1b4a29;
  --green-700: #2b6b3c;
  --green-200: #bbf7d0;
  --bg: #f3f4f6;
  --card: #ffffff;
  --muted: #6b7280;
  --border-soft: #e5e7eb;
}

.app {
  min-height: 100vh;
  display: flex;
}

/* ==== SIDEBAR ==== */

.sidebar {
  width: 100%;
  background: linear-gradient(160deg, var(--green-700), var(--green-900));
  color: white;
  padding: 22px 18px;
  border-radius: 0 24px 24px 0;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.45);
  position: sticky;
  top: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sidebar-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sidebar-title {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.sidebar-subtitle {
  font-size: 12px;
  opacity: 0.9;
}

.sidebar-section-title {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 6px;
  margin-bottom: 4px;
  opacity: 0.9;
}

aside.sidebar .nav {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
  padding: 8px;
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.22);
  backdrop-filter: blur(10px);
}

.sidebar .nav button {
  background: transparent;
  border: 0;
  color: inherit;
  padding: 10px 12px;
  border-radius: 10px;
  text-align: left;
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
  letter-spacing: 0.01em;
}

.nav button span.label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.nav button span.dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.6);
}

.nav button span.level {
  font-size: 11px;
  opacity: 0.8;
  text-transform: uppercase;
}

.nav button.active {
  background: rgba(255, 255, 255, 0.16);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.5);
  transform: translateY(-1px);
}

.nav button:hover:not(.active) {
  background: rgba(255, 255, 255, 0.08);
  transform: translateY(-1px);
}

.panel {
  flex: 1;
  padding: 28px;
}
.panel .card {
  background: white;
  padding: 26px;
  border-radius: 16px;
  /* max-width: 900px; */
  margin: auto;
}

.panel .avatar {
  width: 150px;
  height: 150px;
  border-radius: 12px;
  /* object-fit: cover; */
  border: 5px solid #e9f6ed;
}

.apccf-row {
  display: flex;
  gap: 20px;
  padding: 18px 0;
  border-bottom: 1px solid #ddd;
  align-items: center;
}
.apccf-row:last-child {
  border-bottom: 0;
}

.apccf-text h3 {
  margin: 0;
  color: var(--green-900);
}
.apccf-text p {
  margin: 4px 0;
  color: var(--muted);
}

#contentArea h2 {
  color: #143a1f;
  font-size: 19px;
  font-weight: 700;
  line-height: 150%;
}

/* gallery filter  */

:root {
  --forest-active: #1b5e20;
  --forest-inactive: #6d6d6d;
}

/* ---------- Base: centered, single-row, compact ---------- */
.forest-tabs {
  display: flex !important;
  flex-wrap: nowrap; /* prefer single row on larger screens */
  justify-content: center;
  align-items: center;
  gap: 65px !important; /* desktop gap (you had this) */
  border-bottom: 1px solid #e2e2e2;
  overflow-x: auto; /* enable horizontal scrolling on small viewports */
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory; /* snap to tabs on swipe */
  padding-bottom: 6px;
  margin: 0; /* ensure no extra offsets */
}

/* Each item won't stretch */
.forest-tabs .nav-item {
  flex: 0 0 auto;
  text-align: center;
  scroll-snap-align: center; /* ensure snapping centers the item */
}

/* Tab appearance */
.forest-tabs .nav-link {
  border: none !important;
  border-radius: 0;
  background: transparent;
  padding: 0.35rem 0.6rem;
  font-size: 0.85rem;
  color: var(--forest-inactive);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  min-width: 0;
  transition: transform 0.12s ease; /* subtle tap feedback */
}

/* Icon sizing */
.forest-tabs .nav-link i,
.forest-tabs .nav-link img {
  font-size: 2rem;
  width: 35px;
  height: 35px;
  display: inline-block;
  object-fit: contain;
}

/* Active state */
.forest-tabs .nav-link.active {
  color: var(--forest-active);
  font-weight: 600;
}
.forest-tabs .nav-link.active i,
.forest-tabs .nav-link.active img {
  color: var(--forest-active);
}

/* Active underline */
.forest-tabs .nav-link.active::after {
  content: "";
  width: 38%;
  max-width: 48px;
  height: 3px;
  background: var(--forest-active);
  border-radius: 5px;
  margin: 4px auto 0;
  display: block;
}

/* ----------------- Mobile / Tablet responsiveness ----------------- */

/* Tablet and small desktop adjustments */
@media (max-width: 1024px) {
  .forest-tabs {
    gap: 34px !important;
  }
  .forest-tabs .nav-link i,
  .forest-tabs .nav-link img {
    font-size: 1.6rem;
    width: 28px;
    height: 28px;
  }
  .forest-tabs .nav-link {
    padding: 0.32rem 0.5rem;
    font-size: 0.82rem;
  }
}

/* Phones — make much tighter and easier to swipe */
@media (max-width: 768px) {
  .forest-tabs {
    gap: 18px !important; /* reduce gap for more items visible */
    padding: 8px 6px 6px;
  }
  .forest-tabs .nav-link {
    padding: 0.28rem 0.45rem;
    font-size: 0.78rem;
  }
  .forest-tabs .nav-link i,
  .forest-tabs .nav-link img {
    font-size: 1.2rem;
    width: 24px;
    height: 24px;
  }

  /* Keep scrollbar functional but visually slim */
  .forest-tabs {
    scrollbar-width: thin;
  }
  .forest-tabs::-webkit-scrollbar {
    height: 6px;
  }
  .forest-tabs::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.08);
    border-radius: 6px;
  }
}

/* Very small phones — allow wrapping into two rows if absolutely necessary */
@media (max-width: 420px) {
  .forest-tabs {
    flex-wrap: wrap; /* allow two tight rows so nothing is hidden */
    justify-content: center;
    gap: 10px !important;
    scroll-snap-type: none; /* disable snap when wrapped */
    overflow-x: visible;
  }
  .forest-tabs .nav-item {
    flex: 0 1 auto;
  } /* allow slight shrinking */
  .forest-tabs .nav-link {
    padding: 0.22rem 0.4rem;
    font-size: 0.75rem;
  }
  .forest-tabs .nav-link i,
  .forest-tabs .nav-link img {
    font-size: 1.05rem;
    width: 20px;
    height: 20px;
  }
}

/* Optional: visually hide scrollbar while still scrollable (uncomment if you want) */
/*
.forest-tabs::-webkit-scrollbar { display: none; }
.forest-tabs { -ms-overflow-style: none; scrollbar-width: none; }
*/

/* Optional: hide horizontal scrollbar but keep scrollability on mobile (uncomment if desired) */
/* .forest-tabs { scrollbar-width: thin; } */
/* .forest-tabs::-webkit-scrollbar { height: 6px; } */
/* .forest-tabs::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.08); border-radius: 6px; } */

:root {
  --forest-green: #2f6b3a;
  --forest-green-light: #3f8f4e;
  --forest-green-dark: #1f4f2a; /* NEW: active dark colour */
  --bg-light-forest: #eef7f0;
}

.forest-breadcrumb {
  background: var(--bg-light-forest);
  padding: 6px 20px;
  border-radius: 50px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0px 3px 12px rgba(0, 0, 0, 0.1);
}

.forest-icon {
  width: 25px;
  height: 25px;
  background: var(--forest-green);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.forest-breadcrumb a {
  text-decoration: none;
  color: var(--forest-green);
  font-weight: 500;
  font-size: 14px;
  transition: 0.2s;
  text-transform: uppercase !important;
} 

/* NEW – Dark active color */
.forest-breadcrumb a.active {
  color: var(--forest-green-dark) !important;
  font-weight: 700;
}

.separator {
  color: #9c9c9c;
  font-size: 18px;
  margin: 0 4px;
  font-weight: 600;
}

/* .about-section-two table td {
  text-transform: capitalize !important;
} */