.dm-sans {
     font-family: 'DM Sans', sans-serif;
   }

   body {
     font-family: 'DM Sans', sans-serif;

   }


   .container {
     max-width: 800px;
     margin: 0 auto;
     padding: 60px 40px;
     background-color: white;
     min-height: 100vh;
   }

   h1 {
     font-size: 3.5rem;
     color: #144C4A;
     text-align: center;
     margin-bottom: 40px;
     font-weight: 700;
   }

   .intro-text {
     font-size: 0.95rem;
     color: #666;
     line-height: 1.8;
     margin-bottom: 60px;
     text-align: justify;
   }

   h2 {
     font-size: 3rem;
     color: #144C4A;
     text-align: center;
     margin-bottom: 50px;
     font-weight: 600;
   }

   .values-section {
     display: flex;
     flex-direction: column;
     gap: 40px;
     position: relative;
   }

   .values-section::before {
     content: '';
     position: absolute;
     left: 25px;
     top: 25px;
     bottom: 25px;
     width: 2px;
     background-color: #144C4A;
     z-index: 0;
   }

   .value-item {
     display: flex;
     gap: 20px;
     align-items: flex-start;
     position: relative;
     z-index: 1;
   }

   .icon-container {
     flex-shrink: 0;
     width: 50px;
     height: 50px;
     background-color: #C2F11F;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-top: 5px;
     position: relative;
     z-index: 2;
   }

   .icon {
     width: 24px;
     height: 24px;
     color: #5a9c9c;
   }

   .value-content {
     flex: 1;
   }

   .value-title {
     font-size: 1rem;
     color: #888;
     margin-bottom: 12px;
     font-weight: 400;
   }

   .value-description {
     font-size: 0.95rem;
     color: #666;
     line-height: 1.8;
     text-align: justify;
   }

   .services-section {
     margin-top: 80px;
   }

   .services-title {
     font-size: 2rem;
     color: #1a5f5f;
     text-align: center;
     margin-bottom: 50px;
     font-weight: 700;
   }

   @media (max-width: 768px) {
     .container {
       padding: 40px 20px;
     }

     h1 {
       font-size: 2.5rem;
       /* Slightly larger than 2rem for tablets */
     }

     h2 {
       font-size: 2rem;
     }

     .value-item {
       gap: 15px;
     }

     .icon-container {
       width: 40px;
       height: 40px;
     }
   }

   @media (max-width: 480px) {
     .container {
       padding: 30px 16px;
       /* Smaller padding for mobile */
     }

     h1 {
       font-size: 1.8rem;
       /* Smaller for mobile */
       margin-bottom: 30px;
     }

     h2 {
       font-size: 1.5rem;
       margin-bottom: 30px;
     }

     .intro-text {
       font-size: 0.9rem;
       margin-bottom: 40px;
     }

     .values-section::before {
       left: 20px;
       /* Adjust line position for smaller icon */
     }
   }




.experts-wrapper {
  position: relative;
  height: 120vh;            /* 🔥 minimal extra scroll */
  margin-top: 150px;
}

/* Sticky viewport */
.experts-viewport {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

   /* =========================
   EXPERT CARD
========================= */
   .expert-card {
     position: absolute;
     display: flex;
     align-items: center;
     gap: 40px;
     opacity: 0;
     transform: translateY(-150px);
     transition: opacity 0.4s ease, transform 0.4s ease;

   }

   /* Active (visible) card */
   .expert-card.active {
     opacity: 1;
     transform: translateY(0);
     z-index: 2;
   }

   /* =========================
   IMAGE SECTION
========================= */
   .expert-image {
     position: relative;
     min-width: 220px;
     display: flex;
     justify-content: center;
     align-items: center;
   }

   .expert-image img {
     width: 352x;
     height: 351px;
     object-fit: cover;
     /* border-radius: 50%; */
     position: relative;
     z-index: 2;
   }

   /* Green background circle */
   .bg-circle {
     position: absolute;
     width: 278px;
     height: 278px;
     background: #c7f000;
     border-radius: 50%;
     z-index: 1;
   }

   /* =========================
   CONTENT
========================= */
   .expert-content {
     max-width: 600px;
   }

   .expert-content h3 {
     font-size: 18px;
     font-weight: 500;
     color: #144C4A;
   }

   .role {
     display: block;
     margin: 6px 0 14px;
     font-size: 18px;
     color: #144C4A;
     font-weight: 400;
     font-style: italic;
   }

   .expert-content p {
     font-size: 18px;
     line-height: 35px;
     text-align: justify;
     color: #808080;
   }

   /* =========================
   RESPONSIVE
========================= */

   /* Tablet */
   /* Tablet */
   @media (max-width: 900px) {
     .expert-card {
       flex-direction: column;
       text-align: center;
       gap: 20px;
       width: 90%;
       left: 50%;
       transform: translateX(-50%) translateY(150px);
     }

     .expert-card.active {
       transform: translateX(-50%) translateY(0);
     }

     .expert-content {
       max-width: 100%;
     }

     .expert-content p {
       text-align: center;
     }
   }

   /* Mobile */
   @media (max-width: 480px) {
     .expert-image img {
       width: 180px;
       height: 180px;
     }

     .bg-circle {
       width: 200px;
       height: 200px;
     }

     .expert-content h3 {
       font-size: 1.2rem;
     }

     .role {
       font-size: 1rem;
     }

     .expert-content p {
       font-size: 0.9rem;
       line-height: 1.6;
     }
   }



   .container {
     max-width: 1200px;
     margin: auto;
     padding: 60px 20px;
   }

   /* TEAM GRID */
   .team-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 80px 40px;
     justify-items: center;
   }

   .team-card {
     text-align: center;

   }

   /* GREEN BACKGROUND */
   .image-box {
     width: 100%;
     width: 355px;
     height: 258px;
     background: #b8f400;
     position: relative;
     overflow: visible;
     margin: 0 auto;
   }

   /* PERSON IMAGE */
   .image-box img {
     position: absolute;
     bottom: 1px;
     left: 50%;
     transform: translateX(-50%);
     height: 330px;
     width: auto;
     object-fit: contain;
   }

   /* TEXT */
   .team-card h4 {
     margin-top: 16px;
     font-size: 16px;
     font-weight: 600;
   }

   .team-card p {
     font-size: 14px;
     color: #7a7a7a;
   }


   .group-wrapper {
     position: relative;
     margin: 12px auto 40px;
     width: 100%;
     height: auto;
     aspect-ratio: 16 / 9;
     /* Assuming a ratio, or fallback to fixed height on desktop if needed */
     min-height: 300px;
     max-height: 644px;
     /* Default desktop height */

     display: flex;
     justify-content: center;
     align-items: center;

     background-image: url("../img/Group 131.svg");
     background-repeat: no-repeat;
     background-position: center;
     background-size: contain;
     /* or cover */
   }


   /* .group-bg { */
     /* position: absolute;
  width: 100%;
  height: 100%;
  background: #b8f400;
  border-radius: 300px 300px 40px 40px;
  z-index: -1;
  top: 40px; */

   /* } */

   .group-image {
     width: 100%;
     max-width: 650px;
     margin-top: 105px;
   }

   /* DESCRIPTION */
   .description {
     max-width: 600px;
     margin: 40px auto 0;
     text-align: center;
     font-size: 14px;
     color: #7a7a7a;
     line-height: 1.6;
   }

   /* RESPONSIVE */
   @media (max-width: 992px) {
     .team-grid {
       grid-template-columns: repeat(2, 1fr);
     }
     .description{
      margin-top: 105px;
     }
   }

   @media (max-width: 600px) {
     .team-grid {
       grid-template-columns: repeat(1, 1fr);
       gap: 20px;
     }

     .image-box {
       height: 136px;
       width: 180px;
       
     }

     .image-box img {
       height: 195px;
     }

     .group-wrapper {
       margin-top: 60px;
       min-height: 200px;
     }
.team-card p{
  margin-bottom: 50px;
}
     .group-image {
       margin-top: 0;
       width: 90%;
     }
   }