/* Slider */
.slick-slider
{
    position: relative;

    display: block;
    box-sizing: border-box;

    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;

    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
        touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list
{
    position: relative;

    display: block;
    overflow: hidden;

    margin: 0;
    padding: 0;
}
.slick-list:focus
{
    outline: none;
}
.slick-list.dragging
{
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list
{
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}

.slick-track
{
    position: relative;
    top: 0;
    left: 0;

    display: block;
    margin-left: auto;
    margin-right: auto;
}
.slick-track:before,
.slick-track:after
{
    display: table;

    content: '';
}
.slick-track:after
{
    clear: both;
}
.slick-loading .slick-track
{
    visibility: hidden;
}

.slick-slide
{
    display: none;
    float: left;

    height: 100%;
    min-height: 1px;
}
[dir='rtl'] .slick-slide
{
    float: right;
}
.slick-slide img
{
    display: block;
}
.slick-slide.slick-loading img
{
    display: none;
}
.slick-slide.dragging img
{
    pointer-events: none;
}
.slick-initialized .slick-slide
{
    display: block;
}
.slick-loading .slick-slide
{
    visibility: hidden;
}
.slick-vertical .slick-slide
{
    display: block;

    height: auto;

    border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
    display: none;
}





  @media (max-width: 1200px) {
    .big-stat-card {
      min-height: 500px !important;
    }
    .big-stat-card h3 {
      font-size: 4vw !important;
    }
    .big-stat-card .counter {
      font-size: 6.5vw !important;
    }
    .big-stat-card span:not(.counter) {
      font-size: 2.5vw !important;
    }
    .big-stat-card p {
      font-size: 1.5vw !important;
    }
  }

  @media (max-width: 992px) {
    .main-grid {
      grid-template-columns: 1fr !important;
      grid-template-rows: auto auto !important;
      gap: 3vw !important;
    }
    
    .big-stat-card {
      min-height: 450px !important;
    }
    
    .small-cards-grid {
      grid-template-columns: 1fr 1fr !important;
      grid-template-rows: 200px 200px !important;
      gap: 2vw !important;
    }
    
    .small-stat-card h4 { font-size: 2.2vw !important; }
    .small-stat-card .counter { font-size: 3.5vw !important; }
    .small-stat-card span:not(.counter) { font-size: 1.3vw !important; }
    .small-stat-card p { font-size: 1.2vw !important; }
  }
  
  @media (max-width: 768px) {
    .desktop-layout { display: none !important; }
    .mobile-layout { display: flex !important; }
  }
  
  @media (max-width: 600px) {
    .mobile-big-card h3 { font-size: 8vw !important; }
    .mobile-big-card .counter { font-size: 11vw !important; }
    .mobile-small-card h4 { font-size: 7vw !important; }
    .mobile-small-card .counter { font-size: 10vw !important; }
  }
  
  @media (max-width: 400px) {
    .mobile-big-card h3 { font-size: 9vw !important; }
    .mobile-big-card .counter { font-size: 12vw !important; }
    .mobile-small-card h4 { font-size: 8vw !important; }
    .mobile-small-card .counter { font-size: 11vw !important; }
  }




    .clean-form-section {
      background: #f4f7f9;
      display: flex;
      justify-content: center;
      padding: 60px 20px;
      font-family: 'Poppins', sans-serif;
    }

    .clean-form {
      background: #ffffff;
      padding: 45px 35px;
      border-radius: 20px;
      max-width: 500px;
      width: 100%;
      box-shadow: 0 15px 30px rgba(0,0,0,0.1);
      transition: transform 0.3s ease;
    }

    .clean-form:hover {
      transform: translateY(-5px);
    }

    .clean-form h2 {
      text-align: center;
      margin-bottom: 30px;
      color: #2c3e50;
      font-size: 28px;
      font-weight: 600;
    }

    .form-group {
      position: relative;
      margin-bottom: 22px;
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
      width: 100%;
      padding: 14px 18px;
      border-radius: 10px;
      border: 1px solid #d1d9e6;
      font-size: 16px;
      outline: none;
      background: #fefefe;
      transition: all 0.3s ease;
    }

    .form-group input:focus,
    .form-group select:focus,
    .form-group textarea:focus {
      border-color: #27ae60;
      box-shadow: 0 0 8px rgba(39, 174, 96, 0.2);
    }

    .form-group label {
      position: absolute;
      top: 50%;
      left: 18px;
      transform: translateY(-50%);
      background: #ffffff;
      padding: 0 5px;
      color: #7f8c8d;
      font-size: 16px;
      pointer-events: none;
      transition: all 0.3s ease;
    }

    .form-group input:focus + label,
    .form-group input:not(:placeholder-shown) + label,
    .form-group textarea:focus + label,
    .form-group textarea:not(:placeholder-shown) + label,
    .form-group select:focus + label,
    .form-group select:not([value=""]) + label {
      top: -10px;
      left: 12px;
      font-size: 13px;
      color: #27ae60;
    }

    .form-group select {
      background-color: #e8f5e9; /* light green */
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      cursor: pointer;
    }

    .form-group textarea {
      resize: vertical;
      min-height: 100px;
    }

    .clean-form button {
      width: 100%;
      padding: 15px;
      border: none;
      border-radius: 12px;
      background: #27ae60;
      color: #fff;
      font-size: 18px;
      font-weight: 500;
      cursor: pointer;
      transition: background 0.3s ease;
    }

    .clean-form button:hover {
      background: #219150;
    }


    /* <footer id="forestFooter" style="position: relative; overflow: hidden; font-family: 'Segoe UI', sans-serif;"> */

    /* Floating Leaves Animation */
    .floating-leaf {
        position: absolute;
        font-size: 12px;
        opacity: 0.7;
        pointer-events: none;
        animation: leafFloat 8s linear infinite;
    }

    @keyframes leafFloat {
        0% {
            transform: translateY(100vh) rotateZ(0deg);
            opacity: 0;
        }

        10% {
            opacity: 0.7;
        }

        90% {
            opacity: 0.3;
        }

        100% {
            transform: translateY(-100px) rotateZ(360deg);
            opacity: 0;
        }
    }

    /* Wind Lines Animation */
    .wind-line {
        position: absolute;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
        animation: windFlow 3s linear infinite;
    }

    .wind-line-1 { top: 20%; width: 80px; left: -100px; animation-delay: 0s; }
    .wind-line-2 { top: 35%; width: 60px; left: -80px; animation-delay: 0.5s; }
    .wind-line-3 { top: 50%; width: 100px; left: -120px; animation-delay: 1s; }
    .wind-line-4 { top: 65%; width: 70px; left: -90px; animation-delay: 1.5s; }
    .wind-line-5 { top: 80%; width: 90px; left: -110px; animation-delay: 2s; }

    @keyframes windFlow {
        0% { transform: translateX(0); opacity: 0; }
        50% { opacity: 1; }
        100% { transform: translateX(100vw); opacity: 0; }
    }

    /* Tree Animations */
    .tree { animation: treeSwayWind 3s ease-in-out infinite; transform-origin: bottom center; }
    .individual-leaf { transform-origin: center; animation: leafSway 2s ease-in-out infinite; }
    .leaf-group { transform-origin: center; animation: leafGroupSway 3s ease-in-out infinite; }

    @keyframes treeSwayWind {
        0%, 100% { transform: rotate(-1deg) scale(1); }
        25% { transform: rotate(0.5deg) scale(1.01); }
        50% { transform: rotate(1deg) scale(1); }
        75% { transform: rotate(-0.5deg) scale(1.01); }
    }

    @keyframes leafSway {
        0%, 100% { transform: rotate(-2deg) scale(1); }
        50% { transform: rotate(2deg) scale(1.05); }
    }

    @keyframes leafGroupSway {
        0%, 100% { transform: rotate(-1deg); }
        50% { transform: rotate(1deg); }
    }

    /* Animation Delays */
    .pine-tree-1 { animation-delay: 0s; }
    .pine-tree-1 .individual-leaf { animation-delay: 0.2s; }
    .deciduous-tree-1 { animation-delay: 0.5s; }
    .deciduous-tree-1 .individual-leaf { animation-delay: 0.3s; }
    .pine-tree-2 { animation-delay: 1s; }
    .pine-tree-2 .individual-leaf { animation-delay: 0.7s; }
    .deciduous-tree-2 { animation-delay: 1.5s; }
    .deciduous-tree-2 .individual-leaf { animation-delay: 1.2s; }
    .pine-tree-3 { animation-delay: 2s; }
    .pine-tree-3 .individual-leaf { animation-delay: 1.8s; }

    /* Cloud Animations */
    .cloud-1 { animation: cloudFloatWind1 15s ease-in-out infinite; }
    .cloud-2 { animation: cloudFloatWind2 18s ease-in-out infinite; }
    .cloud-3 { animation: cloudFloatWind3 20s ease-in-out infinite; }
    
    @keyframes cloudFloatWind1 {
        0%, 100% { transform: translateX(0) translateY(0); }
        50% { transform: translateX(40px) translateY(-5px); }
    }
    
    @keyframes cloudFloatWind2 {
        0%, 100% { transform: translateX(0) translateY(0); }
        50% { transform: translateX(-30px) translateY(3px); }
    }
    
    @keyframes cloudFloatWind3 {
        0%, 100% { transform: translateX(0) translateY(0); }
        50% { transform: translateX(35px) translateY(-7px); }
    }
    
    /* Footer Styles */
    .forest-link { color: #2D4F1E; text-decoration: none; font-size: 14px; transition: all 0.3s ease; text-shadow: 1px 1px 2px rgba(0,0,0,0.3); display: block; padding: 2px 0; }
    .forest-link:hover { color: #2d4f1e; transform: translateX(3px); text-shadow: 1px 1px 2px rgba(255,255,255,0.5); }
    .forest-social-icon:hover { background: rgba(45,79,30,0.8) !important; transform: translateY(-2px) scale(1.1); }
    
    /* ======== MOBILE RESPONSIVE STYLES ======== */
    @media (max-width: 768px) {
        .forest-background {
            /* Make footer shorter and stack content */
            height: auto !important;
            padding: 40px 20px !important;
        }
        .footer-content-overlay {
            /* Stack columns vertically */
            flex-direction: column !important;
            align-items: end !important;
            gap: 30px !important;
        }
        .footer-left,
        .footer-middle,
        .footer-right {
            /* Ensure each section takes full width */
            flex: 1 1 100%;
            min-width: 100%;
        }
        .footer-middle {
            /* Adjust spacing for stacked nav columns */
            flex-direction: row !important;
            gap: 50px !important;
        }
        .trees-container {
            /* Reduce tree container height to save space */
            height: 150px !important;
        }
        .tree {
            /* Scale down trees for smaller screens */
            transform: scale(0.7);
        }
    }
    
    @media (max-width: 480px) {
        /* .footer-content-overlay {
            gap: 25px !important;
        } */
        .footer-middle {
            /* Stack nav columns on very small screens */
            /* flex-direction: column !important;
            gap: 25px !important; */
        }
        .footer-left, .footer-right {
            text-align: center; /* Center align text for better readability */
        }
        .footer-left img {
            margin: 0 auto 15px; /* Center the logo */
        }
        .social-icons {
            justify-content: center; /* Center social icons */
        }
        .tree {
            transform: scale(0.5);
        }
    }

    /* end */



    /* <div class="hero_001"> */
.hero_001 {
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: white;
  font-family: Arial, sans-serif;
  padding: 0 20px;
  box-sizing: border-box;
  overflow: hidden;
}

/* Background Images Container */
.hero_001-backgrounds {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.hero_001-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 2s ease-in-out;
}

/* Background Images - Add your image URLs here */
.bg1 {
  background-image: url('https://media.istockphoto.com/id/1161008212/photo/picking-up-a-plastic-bottle-during-park-clean-up.jpg?s=612x612&w=0&k=20&c=SwfemIVhMvDnOntSMO5mnIY2ns5W_AgGSbrwso1POg4=');
}



.bg3 {
  background-image: url('../images/hero-bg-3.jpeg');
}

.hero_001-bg.active {
  opacity: 1;
}

.hero_001-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1;
}

.hero_001-text {
  position: relative;
  z-index: 1;
  max-width: 900px;
}

/* --- ANIMATION ADDED HERE --- */
@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.hero_001-text h1 {
  font-size: 5vw;
  font-weight: 700;
  margin: 0;
  text-shadow: 0 4px 8px rgba(0,0,0,0.3);
  animation: slideInLeft 1s ease-in-out forwards;
}

.hero_001-text p {
  font-size: 2.5vw;
  font-weight: 600;
  margin-top: 15px;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
  animation: slideInRight 1s ease-in-out forwards;
  animation-delay: 0.5s;
}

/* Bubble text styling */
.hero_001-subtitle {
  position: relative;
  display: inline-block;
  cursor: pointer;
  color: white;
  transition: all 0.3s ease;
}

.bubble-char {
  position: relative;
  display: inline-block;
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.bubble-char:hover {
  transform: scale(1.2);
  color: #4CAF50;
  text-shadow: 0 0 20px rgba(76, 175, 80, 0.8);
}

/* Bubble animations */
.bubble {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(76, 175, 80, 0.8), rgba(76, 175, 80, 0.3));
  pointer-events: none;
  animation: bubbleFloat 2s ease-out forwards;
}

@keyframes bubbleFloat {
  0% {
    transform: translateY(0) scale(0);
    opacity: 1;
  }
  50% {
    transform: translateY(-30px) scale(1);
    opacity: 0.8;
  }
  100% {
    transform: translateY(-60px) scale(0);
    opacity: 0;
  }
}

/* Small bubbles around characters */
.mini-bubble {
  position: absolute;
  width: 6px;
  height: 6px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  pointer-events: none;
  animation: miniBubbleFloat 1.5s ease-out forwards;
}

@keyframes miniBubbleFloat {
  0% {
    transform: translateY(0) scale(0);
    opacity: 1;
  }
  100% {
    transform: translateY(-40px) scale(1);
    opacity: 0;
  }
}

/* Character bounce effect */
.bounce-char {
  animation: charBounce 0.6s ease-out;
}

@keyframes charBounce {
  0%, 100% { transform: translateY(0) scale(1); }
  25% { transform: translateY(-10px) scale(1.1); }
  50% { transform: translateY(-5px) scale(1.05); }
  75% { transform: translateY(-2px) scale(1.02); }
}

/* Blinking cursor */
#typewriter::after {
  content: '';
  animation: blink 0.7s infinite;
}

@keyframes blink {
  0%, 50% { opacity: 1; }
  50.1%, 100% { opacity: 0; }
}

/* Responsive */
@media (max-width: 768px) {
  .hero_001 {
    height: 80vh;
  }
  .hero_001-text h1 {
    font-size: 8vw;
  }
  .hero_001-text p {
    font-size: 4vw;
  }
}

@media (max-width: 480px) {
  .hero_001 {
    height: 70vh;
  }
  .hero_001-text h1 {
    font-size: 10vw;
  }
  .hero_001-text p {
    font-size: 5vw;
  }
}


/* end */





/* <section class="product-slider-section" aria-label="Product slider - 5 items (show 4 on desktop)"> */
    /* ---------- Layout & look ---------- */
    .product-slider-section{ 
      max-width:1320px; 
      margin:40px auto; 
      padding:0 20px 40px; 
    }

    .slider-viewport{
      position:relative;
      overflow:hidden;
      border:1px solid #e6e6e6;
      background:#fff;
      padding:18px;
    }

    .slider-track{
      display:flex;
      gap:20px;
      will-change:transform;
      align-items:stretch;
      flex-wrap:nowrap;
    }

    /* Each product card (1 of 4 visible on desktop) */
    .product-card{
      flex:0 0 calc((100% - 60px) / 4); /* 4 items, 20px gap -> 3 gaps = 60 */
      box-shadow:0 0 0 1px rgba(0,0,0,0.03);
      border:1px solid #efefef;
      background:#fff;
      display:flex;
      flex-direction:column;
      overflow:hidden;
      min-height:290px; /* Reduced height */
      text-decoration: none;
      color: inherit;
      transition: all 0.3s ease;
      cursor: pointer;
    }

    .product-card:hover{
      transform:translateY(-4px);
      box-shadow: 0 8px 25px rgba(0,0,0,0.12);
      text-decoration: none;
      color: inherit;
    }

    .product-thumb{
      flex:0 0 65%; /* Increased to take more space */
      display:block;
      width:100%;
      height:0;
      padding-bottom:65%; /* Adjusted aspect ratio */
      position:relative;
      overflow:hidden;
      background:#f8f8f8;
    }

    .product-thumb img{
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
      transition: transform 0.3s ease;
    }

    .product-card:hover .product-thumb img{
      transform: scale(1.05);
    }

    .product-info{
      padding:12px 15px; /* Reduced padding */
      flex:1 1 auto;
      display:flex;
      flex-direction:column;
      justify-content:center; /* Center the content */
    }

    .product-title{
      font-size:16px; /* Slightly smaller */
      color:#222;
      margin:0;
      line-height:1.3;
      transition: color 0.3s ease;
      text-align: center; /* Center the title */
    }

    .product-card:hover .product-title{
      color: #2d4f1e;
    }

    .product-price{
      color:#7a7a7a;
      font-size:14px;
      margin:6px 0 0 0;
      text-align: center;
    }

    /* Arrows */
    .slider-arrow{
      position:absolute;
      top:50%;
      transform:translateY(-50%);
      width:38px;
      height:38px;
      border-radius:50%;
      background:#fff;
      border:1px solid #ddd;
      display:flex;
      align-items:center;
      justify-content:center;
      cursor:pointer;
      box-shadow:0 2px 6px rgba(0,0,0,0.06);
      z-index:5;
      transition: all 0.3s ease;
    }

    .slider-arrow:hover{
      background: #2d4f1e;
      border-color: #2d4f1e;
    }

    .slider-arrow:hover svg{
      stroke: white;
    }

    .slider-arrow svg{ 
      width:16px; 
      height:16px; 
      fill:none; 
      stroke:#333; 
      stroke-width:2; 
      transition: stroke 0.3s ease;
    }
    .slider-arrow--prev{ left:6px; }
    .slider-arrow--next{ right:6px; }

    /* small visual separator at bottom */
    .slider-bottom-line{
      height:1px;
      background:linear-gradient(90deg, rgba(0,0,0,0.06), transparent);
      margin-top:12px; /* Reduced margin */
    }

    /* Responsive: show fewer items on smaller screens */
    @media (max-width:1100px){
      .product-card{ 
        flex:0 0 calc((100% - 40px) / 3); /* 3 items */
        min-height:280px; /* Adjusted for medium screens */
      }
      .product-title{
        font-size:15px;
      }
    }

    @media (max-width:700px){
      .product-card{ 
        flex:0 0 calc((100% - 20px) / 2); /* 2 items */
        min-height:270px; /* Adjusted for small screens */
      }
      .product-thumb{ 
        padding-bottom:68%; 
        flex:0 0 68%;
      }
      .product-info{
        padding:10px 12px; /* Even smaller padding on mobile */
      }
      .product-title{
        font-size:14px;
      }
      .slider-track{
        gap:15px; /* Smaller gap on mobile */
      }
    }

    @media (max-width:420px){
      .product-card{ 
        flex:0 0 100%; /* 1 item */
        min-height:250px; /* Compact for very small screens */
      }
      .slider-arrow{ display:none; }
      .product-thumb{ 
        padding-bottom:60%; 
        flex:0 0 70%;
      }
      .product-info{
        padding:8px 10px; /* Minimal padding */
      }
      .product-title{
        font-size:14px;
        line-height:1.2;
      }
      .slider-viewport{
        padding:12px; /* Reduced viewport padding */
      }
      .slider-track{
        gap:12px; /* Even smaller gap */
      }
    }

    /* Extra small mobile optimization */
    @media (max-width:360px){
      .product-card{
        min-height:230px;
      }
      .product-thumb{
        flex:0 0 72%;
        padding-bottom:58%;
      }
      .product-info{
        padding:6px 8px;
      }
      .product-title{
        font-size:13px;
      }
      .slider-viewport{
        padding:10px;
      }
    }
  /* end */



/* <section class="clientele-section">*/
.clientele-section {
  padding: 80px 20px;
  background: #f9f9f9;
}

.clientele-container {
  max-width: 1200px;
  margin: 0 auto;
}

/* Section Header */
.section-header {
  text-align: center;
  margin-bottom: 40px;
}

.section-title {
  font-size: 2.8rem;
  font-weight: 700;
  color: #2d3748;
  margin: 0 0 15px;
}

.section-desc {
  font-size: 1.1rem;
  color: #718096;
  margin: 0;
}

/* Marquee Effect */
.clients-marquee {
  overflow: hidden;
  position: relative;
  width: 100%;
}

.marquee-track {
  display: flex;
  gap: 40px;
  animation: marquee 25s linear infinite;
}

.client-item {
  /* background: white; */
  padding: 20px 30px;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 200px;
  min-height: 120px;
  /* box-shadow: 0 4px 15px rgba(0,0,0,0.08); */
  /* border: 1px solid #e2e8f0; */
  transition: all 0.3s ease;
}

.client-item:hover {
  transform: translateY(-5px);
  /* box-shadow: 0 10px 25px rgba(0,0,0,0.12); */
}

.client-item img {
  max-width: 100%;
  max-height: 60px;
  object-fit: contain;
  transition: all 0.3s ease;
}

.client-item:hover img {
  transform: scale(1.1);
}

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* Notes */
.client-notes {
  text-align: center;
  padding: 20px;
  color: #718096;
  font-size: 0.95rem;
  /* background: white; */
  border-radius: 10px;
  /* border-left: 4px solid #C9DA62; */
  margin-top: 40px;
}

/* Responsive */
@media (max-width: 768px) {
  .clientele-section {
    padding: 60px 15px;
  }

  .section-title {
    font-size: 2.2rem;
  }

  .client-item {
    min-width: 150px;
    min-height: 100px;
    padding: 15px;
  }

  .client-item img {
    max-height: 50px;
  }
}

@media (max-width: 480px) {
  .section-title {
    font-size: 1.8rem;
  }

  .client-item {
    min-width: 120px;
    min-height: 80px;
  }
}

/* end */ 

/* <div data-aos="zoom-in" style="position:relative; width:100vw; min-height:100vh; background:white; padding:6vh 3vw 7vh; box-sizing:border-box; overflow:hidden;"> */

    /* Desktop Flip Cards */
    .flip-card:hover .flip-card-inner {
      transform: rotateY(180deg);
    }

    .flip-card-inner {
      cursor: pointer;
    }

    .flip-card:hover {
      transform: scale(1.02);
    }

    /* Mobile Flip Cards */
    .mobile-flip-card:hover .mobile-flip-inner {
      transform: rotateY(180deg);
    }

    .mobile-flip-inner {
      cursor: pointer;
    }

    .mobile-flip-card:hover {
      transform: scale(1.05);
    }

    /* Responsive Design */
    @media (max-width: 768px) {
      .desktop-layout { 
        display: none !important; 
      }
      .mobile-layout { 
        display: flex !important; 
      }
      h2 { 
        font-size: 8vw !important; 
      }
    }

    @media (max-width: 600px) {
      .mobile-flip-card {
        width: 95vw !important;
        height: 320px !important;
      }
      
      .mobile-flip-front h3 {
        font-size: 14px !important;
        padding: 12px !important;
      }
      
      .mobile-flip-back p {
        font-size: 13px !important;
      }
    }

    @media (max-width: 400px) {
      .mobile-flip-card {
        height: 300px !important;
      }
      
      .mobile-flip-front h3 {
        font-size: 13px !important;
        padding: 10px !important;
      }
      
      .mobile-flip-back p {
        font-size: 12px !important;
      }
    }
  

    /* <section class="approach_section_001"> */
    
.approach_section_001 {
  position: relative;
  min-height: 100vh;
  padding: 80px 20px;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Arial, sans-serif;
  overflow: hidden;
}

/* Video Background */
.approach_video_001 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.approach_overlay_001 {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6); /* Darker overlay for better text readability */
  z-index: 1;
}

.approach_content_001 {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  text-align: center;
  width: 100%;
}

.approach_label_001 {
  display: inline-block;
  font-size: 40px;
  font-weight: 600;
  opacity: 0.9;
  color: #FFFFFF;
  margin-bottom: 15px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.approach_title_001 {
  font-size: 3.5rem;
  font-weight: 700;
  color: #FFFFFF;
  margin: 0 0 20px 0;
  line-height: 1.2;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.approach_subtitle_001 {
  font-size: 1.3rem;
  margin: 0 auto 60px auto;
  max-width: 700px;
  color: #FFFFFF;
  opacity: 0.9;
  line-height: 1.5;
}

.approach_cards_001 {
  display: flex;
  gap: 30px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

.approach_card_001 {
  background: rgba(40, 80, 40, 0.429);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  padding: 30px 25px;
  width: 350px;
  min-height: 200px;
  box-shadow: 0 15px 35px rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.1);
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.approach_card_001::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, transparent, rgba(255,255,255,0.1), transparent);
  transform: rotate(45deg);
  transition: all 0.6s ease;
  opacity: 0;
}

.approach_card_001:hover::before {
  opacity: 1;
  transform: rotate(45deg) translateX(100%);
}

.approach_card_001:hover {
  transform: translateY(-15px) scale(1.05);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4);
  background: rgba(50, 90, 50, 0.6);
}

.approach_card_001 h3 {
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: 15px;
  color: white;
  line-height: 1.3;
}

.approach_card_001 p {
  font-size: 1.05rem;
  line-height: 1.6;
  color: rgba(255,255,255,0.9);
  margin: 0;
}

/* Tooltip Styles */
.tooltip_001 {
  position: absolute;
  bottom: 120%; /* Position above the card */
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.95);
  color: white;
  padding: 15px 20px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.4;
  white-space: normal;
  width: 280px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.2);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 1000;
  backdrop-filter: blur(10px);
}

.tooltip_001::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 8px solid transparent;
  border-top-color: rgba(0, 0, 0, 0.95);
}

/* Show tooltip on hover */
.approach_card_001:hover .tooltip_001 {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(-10px);
}

.recycle_symbol_001 {
  font-size: 4rem;
  opacity: 0.6;
  margin-top: 30px;
  animation: rotateRecycle 10s linear infinite;
}

@keyframes rotateRecycle {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Responsive Design */
@media (max-width: 1024px) {
  .approach_title_001 {
    font-size: 2.8rem;
  }
  
  .approach_card_001 {
    width: 300px;
    padding: 25px 20px;
  }
  
  .tooltip_001 {
    width: 250px;
  }
}

@media (max-width: 768px) {
  .approach_section_001 {
    padding: 60px 15px;
  }
  
  .approach_title_001 {
    font-size: 2.2rem;
  }
  
  .approach_subtitle_001 {
    font-size: 1.1rem;
    margin-bottom: 40px;
  }
  
  .approach_cards_001 {
    gap: 20px;
    flex-direction: column;
    align-items: center;
  }
  
  .approach_card_001 {
    width: 100%;
    max-width: 400px;
    padding: 25px;
  }
  
  .tooltip_001 {
    width: 220px;
    font-size: 13px;
    padding: 12px 15px;
  }
  
  .recycle_symbol_001 {
    font-size: 3rem;
    margin-top: 20px;
  }
}

@media (max-width: 480px) {
  .approach_section_001 {
    padding: 40px 10px;
    min-height: 90vh;
  }
  
  .approach_title_001 {
    font-size: 1.8rem;
    margin-bottom: 15px;
  }
  
  .approach_subtitle_001 {
    font-size: 1rem;
    padding: 0 10px;
  }
  
  .approach_label_001 {
    font-size: 12px;
  }
  
  .approach_card_001 {
    padding: 20px;
    min-height: 160px;
  }
  
  .approach_card_001 h3 {
    font-size: 1.4rem;
    margin-bottom: 12px;
  }
  
  .approach_card_001 p {
    font-size: 0.95rem;
  }
  
  .tooltip_001 {
    width: 200px;
    font-size: 12px;
    padding: 10px 12px;
  }
  
  .recycle_symbol_001 {
    font-size: 2.5rem;
  }
}

@media (max-width: 360px) {
  .approach_title_001 {
    font-size: 1.6rem;
  }
  
  .approach_card_001 {
    padding: 15px;
  }
  
  .tooltip_001 {
    width: 180px;
  }
}

/* <section class="product-section" > */


    .product-section {
        display: flex;
        gap: 40px;
        align-items: flex-start;
        flex-wrap: wrap;
        background: #fff;
        color: #000;
        padding: 32px 24px;
        border-radius: 18px;
        box-shadow: 0 8px 32px rgba(60, 60, 60, 0.13);
        margin-bottom: 40px;
        max-width: 1100px;
        margin-left: auto;
        margin-right: auto;
    }
    .image-gallery {
        flex: 1 1 420px;
        display: flex;
        flex-direction: column;
        gap: 18px;
        /* background: linear-gradient(135deg, #f7fbe7 60%, #e7f1c9 100%); */
        border-radius: 16px;
        box-shadow: 0 4px 18px rgba(201, 218, 98, 0.13);
        padding: 24px 18px 18px 18px;
        min-width: 340px;
        max-width: 480px;
    }
    .main-image-container {
        width: 100%;
        aspect-ratio: 3/3;
        overflow: hidden;
        border-radius: 12px;
        background: #f2f2f2;
        position: relative;
        box-shadow: 0 2px 12px rgba(201, 218, 98, 0.09);
        cursor: pointer;
    }
    .main-image-container img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
        transition: transform 0.3s cubic-bezier(.4,2,.6,1), box-shadow 0.2s;
        will-change: transform;
        pointer-events: none;
    }
    .main-image-container.zooming img {
        transition: none;
    }
    .thumbs-wrapper {
        display: flex;
        align-items: center;
        position: relative;
        margin-top: 8px;
        gap: 8px;
    }
    .thumbs-button {
        background: #fff;
        border: 1.5px solid #c9da62;
        color: #7a7a7a;
        padding: 7px 13px;
        cursor: pointer;
        border-radius: 6px;
        font-size: 1.2rem;
        font-weight: bold;
        transition: background 0.2s, color 0.2s;
        box-shadow: 0 1px 4px rgba(201, 218, 98, 0.09);
        user-select: none;
    }
    .thumbs-button:active {
        background: #c9da62;
        color: #222;
    }
    .thumbnails {
        display: flex;
        gap:65px;
        overflow-x: auto;
        scroll-behavior: smooth;
        flex: 1;
        padding-bottom: 6px;
        min-width: 0;
    }
    .thumbnails::-webkit-scrollbar { display: none; }
    .thumbnails img {
        width: 70px;
        height: 70px;
        object-fit: cover;
        border-radius: 6px;
        cursor: pointer;
        border: 2.5px solid transparent;
        background: #f2f2f2;
        transition: border 0.2s, box-shadow 0.2s;
        box-shadow: 0 1px 4px rgba(201, 218, 98, 0.09);
    }
    .thumbnails img.active {
        border-color: #c9da62;
        box-shadow: 0 2px 8px rgba(201, 218, 98, 0.13);
    }
    .product-details {
        flex: 1 1 340px;
        /* background: linear-gradient(135deg, #f7fbe7 60%, #e7f1c9 100%); */
        border-radius: 16px;
        box-shadow: 0 4px 18px rgba(201, 218, 98, 0.13);
        padding: 32px 28px 28px 28px;
        min-width: 320px;
        max-width: 520px;
        margin-left: auto;
    }
    .product-details h2 {
        font-size: 2.1rem;
        margin-bottom: 12px;
        color: #222;
        font-weight: 800;
        letter-spacing: 1px;
    }
    .product-details p {
        margin-bottom: 18px;
        color: #444;
        font-size: 1.1rem;
    }
    .product-details h3 {
        font-size: 1.18rem;
        margin-top: 18px;
        margin-bottom: 8px;
        color: #7a8a2b;
        font-weight: 700;
        letter-spacing: 0.5px;
    }
    .product-details ul {
        /* list-style: disc inside; */
        margin-bottom: 14px;
        color: #333;
        font-size: 1rem;
        padding-left: 0;
    }
    .action-button {
        display: inline-block;
        margin-top: 22px;
        padding: 10px 11px;
        /* background: linear-gradient(90deg, rgba(218, 98, 98, 0.8) 0%, rgba(255, 52, 194, 0.742) 100%); */
        color: #ffffff;
        border: none;
        border-radius: 6px;
        text-decoration: none;
        font-weight: bold;
        font-size: 1.1rem;
        box-shadow: 0 2px 8px rgba(201, 218, 98, 0.13);
        transition: background 0.3s, color 0.3s, box-shadow 0.2s;
    }
    .action-button:hover {
        background: #222;
        color: #fff;
        box-shadow: 0 4px 16px rgba(201, 218, 98, 0.18);
    }
    @media (max-width: 900px) {
        .product-section {
            flex-direction: column;
            gap: 24px;
            padding: 18px 6px;
        }
        .image-gallery, .product-details {
            max-width: 100%;
            min-width: 0;
            margin: 0 auto;
        }
        .product-details {
            /* padding: 24px 12px 18px 12px; */
        }
    }
    @media (max-width: 600px) {
        .main-image-container {
            aspect-ratio: 1/1;
        }
        .thumbnails img {
            width: 54px;
            height: 54px;
        }
        .image-gallery {
            padding: 12px 4px 10px 4px;
        }
    
    }