* { box-sizing: border-box; margin: 0; padding: 0; }
    body {font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;background:#051805;color:#fff;line-height:1.6;}
html, body {
  overflow-x: hidden !important;
  width: 100%;
  max-width: 100vw;
}

/* Ensure mobile menu links are clickable */
.mobile-menu,
.mobile-menu a,
.mobile-menu button,
.mobile-search-wrapper {
  pointer-events: auto !important;
}
    .header-top {background:#2F4F2F;color:#fff;padding:8px 0;font-size:14px;text-align:center;}
    .header-main {display:flex;align-items:center;justify-content:space-between;padding:12px 20px;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.1);position:sticky;top:0;z-index:1000;}
    .logo img {height:55px;width:auto;}
    .nav {display:flex;gap:20px;}
    .nav a {text-decoration:none;color:#000;font-weight:500;font-size:15px;transition:color .3s;}
    .nav a:hover {color:#2e7d32;}

    /* Icons – always visible */
    .icons {display:flex;align-items:center;gap:8px;position:relative;}
    .icons a {color:#000;font-size:19px;transition:color .3s;}
    .icons a:hover {color:#2e7d32;}

    /* ---------- Desktop Search (hidden on mobile) ---------- */
    .search-wrapper {
  position: absolute;
  right: 55px;
  top: 50%;
  transform: translateY(-50%);
  background: white;
  padding: 10px 15px;
  border-radius: 50px;
  box-shadow: 0 5px 20px rgba(0,0,0,0.2);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  display: flex !important;
  align-items: center;
  gap: 10px;
  z-index: 999;
}

.search-wrapper.search-active {
  opacity: 1;
  visibility: visible;
}

.search-input {
  border: none;
  outline: none;
  width: 220px;
  font-size: 15px;
}

.search-close {
  cursor: pointer;
  font-weight: bold;
  font-size: 20px;
  color: #999;
}
.search-close:hover { color: #333; }

    .cart-badge {position:absolute;top:-8px;right:-8px;background:#e53935;color:#fff;font-size:10px;width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:bold;}

    .hamburger {display:none;font-size:24px;background:none;border:none;color:#000;cursor:pointer;}

    /* Mobile */
    @media (max-width: 767.98px) {
      .hamburger {display:block;}
      .nav {display:none;}
      .icons {display:flex !important;}
      .search-active .search-input {width:140px;}
    }

    /* Hero */
    .hero-banner {position:relative;background:linear-gradient(rgba(0,0,0,.65),rgba(0,0,0,.65)),url('../img/banner.jpeg') center/cover no-repeat;min-height:90vh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;color:#fff;overflow:hidden;}
    .hero-banner h1 {font-size:48px;font-weight:700;color:#a9dfbf;margin-bottom:16px;text-shadow:0 2px 6px rgba(0,0,0,.6);}
    .hero-banner p {font-size:20px;max-width:720px;margin:0 auto 32px;padding:0 15px;}
    .cta-button {background:#2e7d32;color:#fff;padding:15px 35px;border-radius:50px;font-size:18px;font-weight:600;text-decoration:none;transition:all .3s;box-shadow:0 5px 15px rgba(46,125,50,.5);}
    .cta-button:hover {background:#1a3c34;transform:translateY(-3px);}
    .raindrop {position:absolute;top:-100px;left:50%;width:60px;transform:translateX(-50%);animation:fall 3s ease-in infinite;z-index:3;}
    @keyframes fall {0%{top:-80px;opacity:0}10%{opacity:1}70%{top:350px}100%{top:350px;opacity:0}}

    /* Categories */
    .cat-heading {text-align:center;font-size:42px;color:#2f4f2f;margin:60px 0 30px;font-weight:700;}
    .category-item {text-align:center;margin-bottom:35px;}
    .category-card {background:#fff;border-radius:50%;width:220px;height:220px;overflow:hidden;box-shadow:0 8px 25px rgba(0,0,0,.12);transition:all .4s;cursor:pointer;margin:0 auto;}
    .category-card:hover {transform:translateY(-12px);box-shadow:0 16px 35px rgba(0,0,0,.2);}
    .category-card img {width:100%;height:100%;object-fit:cover;transition:transform .5s;}
    .category-card:hover img {transform:scale(1.12);}
    .category-item h3 {margin-top:18px;font-size:1.4rem;color:#2f4f2f;font-weight:600;}

    /* Products */
    /* === 4 Column Product Grid === */
.products-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
    padding: 20px;
}

/* Tablet (2 columns) */
@media (max-width: 991px) {
    .products-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile (1 column) */
@media (max-width: 576px) {
    .products-grid {
        grid-template-columns: repeat(1, 1fr);
    }
}

/* Optional card styling */
.product-card {
    background: #fff;
    border-radius: 10px;
    padding: 15px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    transition: 0.3s;
}

.product-card:hover {
    transform: translateY(-5px);
}

    .products-section {padding:70px 20px;background:linear-gradient(180deg,#e8f5e9,#f1f8e9);text-align:center;}
    .products-section h2 {font-size:42px;color:#1b5e20;margin-bottom:40px;position:relative;}
    .products-section h2::after {content:"";display:block;width:100px;height:3px;background:#81c784;margin:12px auto;border-radius:3px;}
    .product-card {background:#fff;border-radius:15px;box-shadow:0 8px 20px rgba(0,0,0,.1);overflow:hidden;transition:all .4s;display:flex;flex-direction:column;height:100%;}
    .product-card:hover {transform:translateY(-10px);box-shadow:0 14px 30px rgba(47,79,47,.2);}
.product-image {
  position: relative;
  height: 300px; /* Slightly reduced */
  overflow: hidden;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
  padding: 15px;
}

.product-image img {
  width: auto;
  height: auto;
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
  transition: transform .5s;
}
    .product-card:hover .product-image img {transform:scale(1.06);}
    .tag {position:absolute;top:15px;left:15px;background:linear-gradient(45deg,#2e7d32,#66bb6a);color:#fff;font-size:.8em;padding:6px 12px;border-radius:20px;}
    .tag.new-arrival {background:linear-gradient(45deg,#1b5e20,#81c784);}
    .tag.offer {background:linear-gradient(45deg,#388e3c,#a5d6a7);}
    .product-info {padding:20px;flex-grow:1;display:flex;flex-direction:column;justify-content:space-between;}
    .product-info h4 {color:#2f4f2f;margin:0 0 10px;font-size:1.3em;font-weight:600;}
    .product-info p {color:#555;font-size:.95em;margin:0 0 15px;flex-grow:1;}
    .product-price {font-weight:bold;font-size:1.25em;color:#1b5e20;background:#e8f5e9;padding:8px 15px;border-radius:20px;display:inline-block;margin:10px 0;}
    .buy-btn {background:linear-gradient(45deg,#2e7d32,#66bb6a);color:#fff;border:none;padding:12px 20px;border-radius:25px;cursor:pointer;font-size:1em;font-weight:600;transition:.3s;margin-top:auto;}
    .buy-btn:hover {background:linear-gradient(45deg,#1b5e20,#388e3c);transform:scale(1.05);}

    /* Cart Popup */
    .overlay {position:fixed;top:0;left:0;width:100%;height:100%;background: rgba(0,0,0,0.5);display:none;z-index:999;}
    .cart-popup {position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:#fff;border-radius:16px;box-shadow:0 10px 25px rgba(0,0,0,.2);width:420px;max-width:90%;max-height:80vh;overflow-y:auto;display:none;z-index:1000;padding:25px;animation:popupFade .3s;}
    @keyframes popupFade {from{opacity:0;transform:translate(-50%,-45%)}to{opacity:1;transform:translate(-50%,-50%)}}
    .close-cart {float:right;font-size:26px;cursor:pointer;color:#333;}
    .cart-header {display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;border-bottom:1px solid #eee;padding-bottom:10px;}
    .cart-header h2 {color:#1b5e20;font-size:1.5rem;}
    .cart-item {display:flex;align-items:center;background:#f8fff8;margin-bottom:12px;border-radius:10px;padding:12px;transition:.3s;position:relative;}
    .cart-item:hover {background:#e8f5e9;}
    .cart-item img {width:60px;height:60px;border-radius:8px;object-fit:cover;margin-right:15px;}
    .cart-item-details {flex:1;}
    .cart-item-details h5 {margin:0 0 5px;font-size:1rem;color:#2f4f2f;}
    .cart-item-details .price {font-weight:bold;color:#1b5e20;}
    .quantity-controls {display:flex;align-items:center;gap:8px;margin-top:5px;}
    .quantity-btn {width:28px;height:28px;border:1px solid #81c784;background:#fff;color:#2e7d32;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:14px;transition:.2s;}
    .quantity-btn:hover {background:#2e7d32;color:#fff;}
    .remove-item {position:absolute;top:8px;right:8px;color:#e53935;font-size:18px;cursor:pointer;opacity:.7;}
    .remove-item:hover {opacity:1;}
    .cart-total {text-align:right;font-weight:bold;margin:15px 0;font-size:1.3rem;color:#1b5e20;}
    .checkout-btn {background:#0b6b34;color:#fff;border:none;padding:14px 0;width:100%;border-radius:10px;font-size:16px;cursor:pointer;transition:.3s;}
    .checkout-btn:hover {background:#095a2b;}
    .empty-cart {text-align:center;color:#777;font-style:italic;padding:40px 20px;}

    /* Mobile Menu */
    .mobile-menu {
      position:fixed;top:0;left:0;width:100%;height:100%;
      background:linear-gradient(135deg, #1b5e20, #2e7d32);
  border-bottom:1px solid rgba(255,255,255,0.2);
      z-index:2000;
      padding:90px 20px 30px;text-align:center;overflow-y:auto;
      transform:translateX(-100%);transition:transform .35s ease;
    
    }
    .mobile-menu.active{transform:translateX(0);}
    .mobile-menu a{display:block;color:#fff;font-size:20px;padding:16px;
      text-decoration:none;border-bottom:1px solid #1a4d1a;transition:background .3s;}
    .mobile-menu a:hover{background:#2e7d32;}
    .close-menu{position:absolute;top:20px;right:20px;font-size:32px;
      color:#fff;background:none;border:none;cursor:pointer;}

    /* Mobile Search in Menu */
    .mobile-search-wrapper {
      position: relative;
      margin: 20px auto;
      width: 85%;
      max-width: 300px;
    }
    .mobile-search-input {
      width: 100%;
      padding: 12px 40px 12px 16px;
      border: 1px solid #1a4d1a;
      border-radius: 30px;
      background: #fff;
      color: #000;
      font-size: 16px;
      outline: none;
      transition: border .3s;
    }
    .mobile-search-input:focus {
      border-color: #2e7d32;
      box-shadow: 0 0 8px rgba(46,125,50,.3);
    }
    .mobile-search-close {
      position: absolute;
      right: 12px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 18px;
      color: #2e7d32;
      cursor: pointer;
      display: none;
    }
    .mobile-search-close.active { display: block; }
    .mobile-search-close:hover { color: #1b5e20; }

    /* Login/Signup Popup */
    .login-overlay{
      position:fixed;top:0;left:0;width:100%;height:100%;
      background:rgba(0,0,0,.6);display:none;z-index:999;
      justify-content:center;align-items:center;backdrop-filter:blur(5px);
    }
    .login-popup{
      background:linear-gradient(145deg,#f0fff0,#e9f5e9);
      padding:40px 35px;border-radius:20px;width:360px;max-width:90%;
      box-shadow:0 15px 35px rgba(0,0,0,.3);text-align:center;
      position:relative;animation:fadeIn .4s;
    }
    @keyframes fadeIn{from{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}
    .login-close{
      position:absolute;top:12px;right:15px;font-size:24px;color:#1b5e20;
      cursor:pointer;transition:.3s;
    }
    .login-close:hover{color:#388e3c;transform:scale(1.1);}
    .login-popup h2{color:#1b5e20;margin-bottom:20px;font-size:26px;}
    .login-popup input{
      width:100%;padding:12px;margin:10px 0;border:1px solid #81c784;
      border-radius:30px;outline:none;background:#fff;transition:.3s;
    }
    .login-popup input:focus{
      border-color:#2e7d32;box-shadow:0 0 8px rgba(46,125,50,.4);
    }
    .login-popup button{
      background:#2e7d32;color:#fff;padding:12px 25px;border:none;
      border-radius:30px;cursor:pointer;font-size:16px;font-weight:bold;
      transition:.3s;margin-top:10px;width:100%;
    }
    .login-popup button:hover{
      background:#1b5e20;transform:scale(1.03);
    }
    .login-popup p{
      font-size:14px;margin-top:15px;color:#2f4f2f;
    }
    .login-popup p a{
      color:#1b5e20;font-weight:600;text-decoration:none;
    }
    .login-popup p a:hover{text-decoration:underline;}

    /* Footer */
    footer {background:#051805;color:#fff;padding:70px 40px 30px;border-top:5px solid #81c784;position:relative;overflow:hidden;padding: 50px !important;}
    footer h3 {color:#a5d6a7;font-size:22px;margin-bottom:20px;position:relative;}
    footer h3::after {content:"";display:block;width:60px;height:3px;background:#81c784;margin-top:8px;border-radius:3px;}
    footer p, footer a {color:#f0f0f0;text-decoration:none;line-height:1.8;font-size:15px;transition:.3s;}
    footer a:hover {color:#c8f7c5;padding-left:5px;}

    .quick-links li {margin-bottom:8px;}
    .quick-links a {color:#f0f0f0;text-decoration:none;font-size:15px;transition:color .3s, padding-left .3s;}
    .quick-links a:hover {color:#c8f7c5;padding-left:5px;}

    .social-links {margin-top:20px;display:flex;gap:12px;justify-content:center;}
    @media (min-width:768px) {.social-links {justify-content:flex-start;}}
    .social-links a {display:flex;justify-content:center;align-items:center;background:#a5d6a7;color:#1b5e20;width:38px;height:38px;border-radius:50%;font-size:18px;transition:all .3s ease;}
    .social-links a:hover {background:#fff;transform:translateY(-3px);box-shadow:0 4px 8px rgba(0,0,0,0.2);}
    .footer-bottom {background:#0d3013;padding:15px 0;font-size:14px;color:#a5d6a7;text-align:center;border-top:1px solid #2e7d32;}

    @media (max-width:576px) {
      .hero-banner h1 {font-size:28px;}
      .cta-button {padding:12px 28px;font-size:16px;}
      .category-card {width:150px;height:150px;}
    }

    /* ==================== ABOUT / HEALTH CARE ==================== */
    .about-section{padding:60px 10%;background:#fff}
    .about-block{display:flex;align-items:center;justify-content:space-between;gap:40px;margin-bottom:60px;flex-wrap:wrap;padding: 50px !important;}
    .about-block.reverse{flex-direction:row-reverse;background:#f9f9f9;padding:40px 5%;border-radius:10px}
    .about-content{flex:1 1 45%}
    .about-content h2{color:#527a36;font-size:28px;font-weight:700;border-bottom:4px double #527a36;display:inline-block;margin-bottom:20px}
    .about-content p{font-size:15px;color:#555;line-height:1.4;text-align:justify}
    .about-image{flex:1 1 45%;text-align:center}
    .about-image img{width:100%;max-width:400px;border-radius:10px;opacity:0;transform:translateY(50px);transition:all .8s}
    .about-image.show img{opacity:1;transform:translateY(0)}

    /* ==================== VIDEO TESTIMONIALS ==================== */
    .video-testimonials{padding:70px 40px;background:#f7f8f9;text-align:center}
    .video-testimonials h2{font-size:32px;color:#2f4f2f;margin-bottom:10px}
    .video-testimonials .subtitle{color:#666;font-size:16px;margin-bottom:40px}
    .video-card{background:#fff;border-radius:15px;box-shadow:0 4px 15px rgba(0,0,0,.1);max-width:250px;padding:10px;text-align:center;transform:translateY(60px);opacity:0;animation:slideUp 1s forwards}
    .video-card:nth-child(2){animation-delay:.2s}.video-card:nth-child(3){animation-delay:.4s}.video-card:nth-child(4){animation-delay:.6s}
    .video-card video{width:100%;height:380px;border-radius:10px;object-fit:cover;transition:transform .3s}
    .video-card video:hover{transform:scale(1.05)}
    .video-card h3{margin-top:10px;color:#2f4f2f;font-size:18px}
    .video-card p{color:#777;font-size:14px;margin-bottom:10px}
    @keyframes slideUp{0%{transform:translateY(60px);opacity:0}100%{transform:translateY(0);opacity:1}}

    /* ==================== AD BANNERS ==================== */
   /* ==================== AD BUTTON - CENTERED ON ALL DEVICES ==================== */
.ad-banner {
  position: relative;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 55/28;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0,0,0,.15);
  margin: 0 auto;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 20px; /* space for button */
}

.ad-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.ad-btn {
  position: relative; /* changed from absolute */
  z-index: 2;
  background: rgba(255, 255, 255, .85);
  padding: 10px 20px;
  border-radius: 30px;
  font-weight: 600;
  color: #2f4f2f;
  cursor: pointer;
  text-transform: uppercase;
  font-size: .9em;
  transition: all .3s;
  margin: 0 auto;
  display: inline-block;
  text-align: center;
}

.ad-btn:hover {
  background: #2f4f2f;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,.3);
}

/* Mobile adjustment */
@media (max-width: 576px) {
  .ad-btn {
    padding: 8px 16px;
    font-size: .8em;
  }
  .ad-banner {
    padding-bottom: 15px;
  }
}
/* ==================== TEXT TESTIMONIALS (ORIGINAL) ==================== */
/* ==================== TEXT TESTIMONIALS (CENTERED) ==================== */
/* ==================== TEXT TESTIMONIALS - HORIZONTAL ON DESKTOP ==================== */
.testimonials-section {
  padding: 60px 15px;
  background: linear-gradient(180deg, #f8fff8, #e8f5e9);
  text-align: center;
  overflow: hidden;
}

.testimonials-section .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
}

.testimonials-section h2 {
  font-size: 42px;
  color: #1b5e20;
  margin-bottom: 40px;
  position: relative;
}
.testimonials-section h2::after {
  content: "";
  display: block;
  width: 100px;
  height: 3px;
  background: #81c784;
  margin: 10px auto;
  border-radius: 3px;
}

.testimonials-section .row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
  margin: 0;
}

/* Each card takes 1/3 on desktop, full width on mobile */
.testimonials-section .testimonial-col {
  flex: 0 0 calc(33.333% - 2rem);
  max-width: calc(33.333% - 2rem);
}

@media (max-width: 992px) {
  .testimonials-section .testimonial-col {
    flex: 0 0 calc(50% - 2rem);
    max-width: calc(50% - 2rem);
  }
}

@media (max-width: 576px) {
  .testimonials-section .testimonial-col {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

.testimonial-card {
  background: #fff;
  border-radius: 15px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .1);
  padding: 20px;
  transition: transform .4s, box-shadow .4s;
  text-align: center;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.testimonial-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 30px rgba(47, 79, 47, .2);
}

.testimonial-image {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto 15px;
}
.testimonial-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.testimonial-content p {
  font-size: .95em;
  color: #555;
  line-height: 1.6;
  margin: 0 0 15px;
  flex-grow: 1;
}
.testimonial-content h4 {
  color: #2f4f2f;
  font-size: 1.2em;
  margin: 0 0 10px;
  font-weight: 600;
}
.testimonial-rating {
  color: #f4b400;
  font-size: 1.1em;
}
/* Fix any wide sections */
.about-section,
.video-testimonials,
.testimonials-section,
.products-section,
footer {
  padding-left: 15px !important;
  padding-right: 15px !important;
  overflow: hidden;
}

/* Ensure rows and columns don't overflow */


/* Fix cart popup on small screens */
.cart-popup {
  width: 95% !important;
  max-width: 420px;
  margin: 0 auto;
  left: 50% !important;
  transform: translateX(-50%) translateY(-50%) !important;
}

/* Mobile menu should not cause scroll */
.mobile-menu {
  padding-left: 15px;
  padding-right: 15px;
  box-sizing: border-box;
}

/* Prevent long words from breaking layout */
* {
  word-wrap: break-word;
}

/* Force Bootstrap containers to respect viewport */
.container, .container-fluid {
  width: 100% !important;
  max-width: 100% !important;
}

/* Responsive adjustments */
@media (max-width: 576px) {
  .hero-banner h1 {
    font-size: 26px;
    padding: 0 10px;
  }
  .hero-banner p {
    font-size: 16px;
    padding: 0 15px;
  }
  .cat-heading {
    font-size: 32px;
    padding: 0 10px;
  }
  .products-section h2,
  .testimonials-section h2 {
    font-size: 32px;
  }
}

/* about page */

/* Banner */
.about-us-banner {
  background: linear-gradient(135deg, #2e7d32, #1b5e20);
  color: #fff;
  font-size: 48px;
  font-weight: 700;
  text-align: center;
  padding: 80px 20px;
  margin: 0;
  text-shadow: 0 4px 10px rgba(0,0,0,.3);
}

@media (max-width: 576px) {
  .about-us-banner {
    font-size: 32px;
    padding: 60px 15px;
  }
}

/* Our Story */
.about-story-section h1 {
  font-size: 42px;
  color: #1b5e20;
  position: relative;
  display: inline-block;
}
.about-story-section h1::after {
  content: "";
  display: block;
  width: 80px;
  height: 4px;
  background: #81c784;
  margin: 12px auto;
  border-radius: 2px;
}

/* Mission & Vision Cards */
.mission-vision-section {
  padding: 60px 0;
  background: #f8fff8;
}

.mission-vision-card {
  background: #fff;
  border-radius: 16px;
  padding: 30px;
  box-shadow: 0 8px 25px rgba(0,0,0,.08);
  transition: all .4s ease;
  height: 100%;
  text-align: center;
  border: 1px solid #e8f5e9;
}

.mission-vision-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 16px 35px rgba(46,125,50,.15);
}

.mission-vision-card h2 {
  color: #2f4f2f;
  font-size: 26px;
  margin: 15px 0;
  font-weight: 600;
}

.mission-vision-card p {
  color: #555;
  font-size: 16px;
  line-height: 1.7;
}

.card-icon i {
  color: #2e7d32;
  transition: transform .3s;
}

.mission-vision-card:hover .card-icon i {
  transform: scale(1.2);
}

/* Responsive */
@media (max-width: 768px) {
  .mission-vision-card {
    padding: 25px;
  }
  .mission-vision-card h2 {
    font-size: 24px;
  }
}
/* =====================================
   CONTACT PAGE - UNIQUE CLASSES
   Two Columns: Form + Info
===================================== */

/* Banner */
.contact-page-banner {
  background: linear-gradient(135deg, #1b5e20, #2e7d32);
  color: #fff;
  font-size: 48px;
  font-weight: 700;
  text-align: center;
  padding: 90px 20px;
  margin: 0;
  text-shadow: 0 4px 12px rgba(0,0,0,.3);
}

@media (max-width: 576px) {
  .contact-page-banner {
    font-size: 32px;
    padding: 70px 15px;
  }
}

/* Main Section */
.contact-main-section {
  padding: 40px 0;
  background: #f9fff9;
}

/* Form Box */
.contact-form-box {
  background: #fff;
  padding: 35px;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
  border: 1px solid #e8f5e9;
}

.contact-form-box h2 {
  color: #1b5e20;
  font-size: 28px;
  margin-bottom: 20px;
  text-align: center;
  font-weight: 600;
}

.contact-form-box input,
.contact-form-box textarea {
  width: 100%;
  padding: 14px 16px;
  margin: 12px 0;
  border: 1px solid #81c784;
  border-radius: 30px;
  font-size: 16px;
  background: #fff;
  transition: all .3s;
  outline: none;
}

.contact-form-box input:focus,
.contact-form-box textarea:focus {
  border-color: #2e7d32;
  box-shadow: 0 0 8px rgba(46,125,50,.3);
}

.contact-form-box textarea {
  border-radius: 16px;
  resize: none;
}

.contact-form-box button {
  background: #2e7d32;
  color: #fff;
  border: none;
  padding: 14px 30px;
  border-radius: 30px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  width: 100%;
  margin-top: 10px;
  transition: all .3s;
}

.contact-form-box button:hover {
  background: #1a3c34;
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(46,125,50,.4);
}

/* Info Box */
.contact-info-box {
  background: #fff;
  padding: 35px;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
  border: 1px solid #e8f5e9;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.contact-info-box h2 {
  color: #1b5e20;
  font-size: 28px;
  margin-bottom: 25px;
  text-align: center;
  font-weight: 600;
}

.info-item {
  display: flex;
  align-items: center;
  margin-bottom: 18px;
  font-size: 16px;
  color: #444;
}

.info-item i {
  font-size: 20px;
  color: #2e7d32;
  width: 36px;
  text-align: center;
  margin-right: 12px;
}

.info-item span {
  flex: 1;
}

/* Responsive */
@media (max-width: 992px) {
  .contact-form-box,
  .contact-info-box {
    padding: 25px;
  }
  .contact-form-box h2,
  .contact-info-box h2 {
    font-size: 24px;
  }
}

@media (max-width: 576px) {
  .contact-form-box,
  .contact-info-box {
    padding: 20px;
  }
  .info-item {
    font-size: 15px;
  }
}/* =====================================
   CERTIFICATIONS PAGE - UNIQUE CLASSES
   4-Card Grid (2x2 → 1-column)
===================================== */

/* Banner */
.cert-page-banner {
  background: linear-gradient(135deg, #1b5e20, #2e7d32);
  color: #fff;
  font-size: 48px;
  font-weight: 700;
  text-align: center;
  padding: 90px 20px;
  margin: 0;
  text-shadow: 0 4px 12px rgba(0,0,0,.3);
}

@media (max-width: 576px) {
  .cert-page-banner {
    font-size: 32px;
    padding: 70px 15px;
  }
}

/* Main Section */
.certifications-main {
  padding: 60px 0;
  background: #f9fff9;
  text-align: center;
}

.certifications-main h2 {
  font-size: 38px;
  color: #1b5e20;
  margin-bottom: 16px;
  position: relative;
  display: inline-block;
}
.certifications-main h2::after {
  content: "";
  display: block;
  width: 80px;
  height: 4px;
  background: #81c784;
  margin: 12px auto;
  border-radius: 2px;
}

.certifications-main p.lead {
  color: #555;
  font-size: 17px;
  line-height: 1.7;
}

/* Grid */
.cert-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.5rem;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 15px;
}

/* Card */
.cert-card {
  background: #fff;
  border-radius: 18px;
  padding: 28px;
  box-shadow: 0 8px 25px rgba(0,0,0,.08);
  transition: all .4s ease;
  text-align: center;
  border: 1px solid #e8f5e9;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cert-card:hover {
  transform: translateY(-12px);
  box-shadow: 0 16px 35px rgba(46,125,50,.15);
}

.cert-img {
  width: 90px;
  height: 90px;
  margin-bottom: 18px;
  overflow: hidden;
  border-radius: 50%;
  border: 3px solid #81c784;
  padding: 8px;
  background: #fff;
}

.cert-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform .3s;
}

.cert-card:hover .cert-img img {
  transform: scale(1.1);
}

.cert-card h4 {
  color: #2f4f2f;
  font-size: 20px;
  margin: 12px 0;
  font-weight: 600;
}

.cert-card p {
  color: #666;
  font-size: 15px;
  line-height: 1.6;
  flex-grow: 1;
}

/* Responsive */
@media (max-width: 768px) {
  .cert-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .cert-card {
    padding: 24px;
  }
  .cert-img {
    width: 80px;
    height: 80px;
  }
}

@media (max-width: 576px) {
  .certifications-main h2 {
    font-size: 32px;
  }
  .cert-card {
    padding: 20px;
  }
}

/* ---------- PDF “View Certificate” button ---------- */
.cert-pdf-btn {
  display: inline-block;
  margin-top: 14px;
  padding: 8px 18px;
  background: #2e7d32;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 30px;
  transition: all .3s;
  box-shadow: 0 3px 8px rgba(46,125,50,.3);
}
.cert-pdf-btn:hover {
  background: #1a3c34;
  transform: translateY(-2px);
  box-shadow: 0 5px 12px rgba(46,125,50,.4);
}

/* =====================================
   PRODUCTS SECTION - FILTER + GRID
   Fully Responsive | Mobile-First
===================================== */

/* Section */


/* Filter Buttons */
.filter-buttons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 40px;
  padding: 0 15px;
}
.filter-buttons button {
  background: #fff;
  color: #2f4f2f;
  border: 2px solid #81c784;
  padding: 10px 22px;
  border-radius: 30px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all .3s;
  min-width: 100px;
}
.filter-buttons button:hover,
.filter-buttons button.active {
  background: #2e7d32;
  color: #fff;
  border-color: #2e7d32;
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(46,125,50,.3);
}

/* Responsive */
@media (max-width: 576px) {
  .products-section h2 { font-size: 32px; }
  .filter-buttons button { padding: 8px 16px; font-size: 14px; }
  .product-image { height: 180px; }
}

.useanimation img {
  opacity: 0;
  transform: translateY(50px);
  animation: fadeInUp 0.8s ease-out forwards;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Optional: delay for multiple items */
.useanimation:nth-child(2) { animation-delay: 0.2s; }
.useanimation:nth-child(3) { animation-delay: 0.4s; }