/* ============================================
   NIROGLAB WEIGHT MANAGEMENT
   Premium theme: fonts, hero, patterns, animations
   ============================================ */

   @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

   body {
     font-family: 'Poppins', system-ui, sans-serif;
     overflow-x: hidden;
     max-width: 100vw;
     box-sizing: border-box;
   }
   
   h1, h2, h3, h4, h5, h6 {
     font-family: 'Poppins', system-ui, sans-serif;
   }
   
  html {
    scroll-behavior: smooth;
    overflow-x: hidden;
    max-width: 100%;
  }

   .pt-20 { padding-top: 4rem !important; }
   
   /* ========== HERO SECTION – Full-Screen Banner ========== */
   .hero-section {
     position: relative;
     min-height: 100vh;
     display: flex;
     align-items: center;
     overflow: hidden;
     color: #fff; /* base – overwrites body's dark text so banner text is visible */
   }
   
   /* Full-screen banner image – fills viewport */
   .hero-banner {
     position: absolute;
     inset: 0;
     z-index: 0;
   }
   
   .hero-banner img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     object-position: center;
   }
   
   /* Dark overlay for text readability – stronger so text always pops */
   .hero-overlay {
     position: absolute;
     inset: 0;
     z-index: 1;
     background: linear-gradient(135deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.35) 100%);
   }
   
   /* Trust badges strip */
   .hero-trust {
     display: flex;
     flex-wrap: wrap;
     gap: 1rem;
     margin-top: 2rem;
     padding-top: 1.5rem;
     border-top: 1px solid rgba(26, 26, 26, 0.08);
   }
   
   .hero-trust-item {
     display: flex;
     align-items: center;
     gap: 0.5rem;
     font-size: 0.875rem;
     font-weight: 500;
     color: #4b5563;
   }
   
   .hero-trust-item span:first-child,
   .hero-trust-item i {
     color: #2d8a3e;
     font-weight: 700;
   }
   
   /* Light theme for trust strip on dark banner */
   .hero-trust-light {
     border-top-color: rgba(255, 255, 255, 0.2);
   }
   
   .hero-trust-light .hero-trust-item {
     color: rgba(255, 255, 255, 0.9);
   }
   
   .hero-trust-light .hero-trust-item span:first-child,
   .hero-trust-light .hero-trust-item i {
     color: #6ee76e;
   }
   
   /* ========== Banner slider – 3 images, 3 sec, overlay + arrows – mobile responsive ========== */
.banner-slider-section {
  display: block !important;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  position: relative;
  overflow: visible;
  margin-left: 0;
  margin-right: 0;
}

/* Live: banner tab dikhe jab pehli image load ho – na blank na background */
.banner-slider-section .banner-slider-inner {
  opacity: 0;
  transition: opacity 0.35s ease;
}
.banner-slider-section.banner-loaded .banner-slider-inner {
  opacity: 1;
}

.banner-slider-inner {
     display: block !important;
     position: relative;
     width: 100%;
     max-width: 100%;
     min-height: 220px;
     overflow: hidden;
     isolation: isolate;
   }
   
   .banner-slider-track {
     display: flex !important;
     flex-direction: row !important;
     flex-wrap: nowrap !important;
     width: 300% !important;
     height: 100%;
     transition: transform 0.65s cubic-bezier(0.32, 0.72, 0, 1);
     white-space: nowrap;
     box-sizing: border-box;
     backface-visibility: hidden;
     -webkit-backface-visibility: hidden;
   }
   
  .banner-slide {
    flex: 0 0 33.333% !important;
    width: 33.333% !important;
    min-width: 33.333% !important;
    max-width: 33.333% !important;
    flex-shrink: 0 !important;
    min-height: 220px;
    position: relative;
    display: block;
    box-sizing: border-box;
  }
  
  .banner-slide-img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 220px;
    max-height: 70vh;
    object-fit: cover;
    object-position: center;
    max-width: 100%;
  }
   
   .banner-content-left {
     position: relative;
     z-index: 2;
   }
   
   /* Arrows – removed */
   .banner-arrow {
     display: none !important;
   }
   
   /* – (dash) indicator – section direct child, strip (z-15) se upar taaki desktop pe click aaye */
   .banner-dashes {
     left: 50%;
     transform: translateX(-50%);
     width: fit-content;
     background: rgba(0,0,0,0.6);
     padding: 6px 12px;
     border-radius: 999px;
     gap: 8px;
     box-shadow: 0 2px 10px rgba(0,0,0,0.35);
     pointer-events: auto;
     z-index: 20;
   }
   .banner-dash {
     pointer-events: auto;
     cursor: pointer;
     border: 0;
     padding: 8px;
     background: transparent;
     display: flex;
     align-items: center;
     justify-content: center;
     -webkit-tap-highlight-color: transparent;
     min-width: 36px;
     min-height: 36px;
   }
   .banner-dash-line {
     display: block;
     width: 18px;
     height: 3px;
     border-radius: 2px;
     background: rgba(255,255,255,0.65);
     transition: all 0.3s ease;
     pointer-events: none;
   }
   .banner-dash:hover .banner-dash-line {
     background: #fff;
   }
   .banner-dash.is-active .banner-dash-line {
     width: 26px;
     height: 4px;
     background: #fff;
     box-shadow: 0 0 8px rgba(255,255,255,0.8);
   }
   
   /* Banner ke niche 40px – strip section ke andar, overflow visible se dikh raha hai */
   .banner-bottom-strip {
     background: transparent;
     bottom: -40px;
     z-index: 15;
   }
   
   @media (min-width: 640px) {
     .banner-dashes {
       padding: 8px 14px;
       gap: 10px;
     }
     .banner-dash-line {
       width: 20px;
       height: 3px;
     }
     .banner-dash.is-active .banner-dash-line {
       width: 30px;
       height: 4px;
     }
   }
   
   /* ========== Mobile banner – kam height, responsive, text sahi dikhe ========== */
   @media (max-width: 639px) {
     .banner-hero { padding-bottom: 1px !important; overflow: visible !important; }
     .banner-slider-section,
     .banner-slider-section.pt-20,
     .banner-section-mobile-pt {
       padding-top: 45px !important;
     }
     .banner-slider-section {
       width: 100%;
       max-width: 100%;
       margin: 0;
       padding: 0;
       padding-top: 64px !important;
       overflow: hidden;
       box-sizing: border-box;
       position: relative;
     }
     .banner-slider-inner {
       position: relative;
       width: 100%;
       max-width: 100%;
       /* Height kam – responsive, background hata diya */
       height: 28vh;
       min-height: 160px;
       max-height: 220px;
       overflow: hidden;
       box-sizing: border-box;
     }
     .banner-slider-inner .banner-slider-track {
       position: absolute;
       top: 0;
       left: 0;
       width: 300%;
       height: 100%;
       display: flex;
       flex-direction: row;
       flex-wrap: nowrap;
       transition: transform 0.65s cubic-bezier(0.32, 0.72, 0, 1);
     }
     .banner-slider-inner .banner-slide {
       flex: 0 0 33.333333%;
       width: 33.333333%;
       height: 100%;
       overflow: hidden;
       position: relative;
     }
     .banner-slider-inner .banner-slide-img {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       object-fit: contain;
       object-position: center center;
       display: block;
     }
     .banner-slider-overlay .banner-content-left {
       display: none;
     }
     .banner-arrow {
       width: 42px;
       height: 42px;
       top: 50%;
       transform: translateY(-50%);
       margin-top: 0;
     }
     .banner-arrow-svg {
       width: 22px;
       height: 22px;
     }
     .banner-prev { left: 8px; }
     .banner-next { right: 8px; }
     /* Mobile: dashes hide */
     .banner-dashes {
       display: none !important;
       visibility: hidden !important;
       pointer-events: none !important;
     }
     /* Mobile badges: dono bilkul sath (left) */
     .banner-badges-mobile-bottom {
       bottom: 24px !important;
       display: flex !important;
       flex-wrap: nowrap !important;
       align-items: center !important;
       justify-content: flex-start !important;
       visibility: visible !important;
       opacity: 1 !important;
       z-index: 20 !important;
       pointer-events: none !important;
       padding: 0 90px 0 12px !important;
       gap: 8px !important;
     }
     .banner-badge-mobile-bottom {
       background: black !important;
       color: rgba(255, 255, 255, 0.95) !important;
       border-color: rgba(255, 255, 255, 0.2) !important;
       box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
       display: inline-flex !important;
       visibility: visible !important;
       opacity: 1 !important;
       flex-shrink: 0;
     }
     .banner-badge-mobile-bottom i {
       color: rgba(255, 255, 255, 0.95) !important;
     }
     /* Banner bottom strip mobile me hide (buttons hidden hai) */
     .banner-bottom-strip {
       display: none;
     }
   }
   
   @media (max-width: 380px) {
     .banner-badges-mobile {
       padding-left: 8px;
       padding-right: 8px;
       gap: 6px;
     }
     .banner-badge-mobile {
       font-size: 10px !important;
       padding: 6px 10px !important;
     }
   }
   
   @media (min-width: 640px) {
     .banner-slider-inner {
       min-height: 380px;
     }
     .banner-slide,
     .banner-slide-img {
       min-height: 380px;
     }
     /* Banner bottom strip desktop pe show */
     .banner-bottom-strip {
       display: block;
     }
   }

   /* Mobile sticky CTA bar – bottom me sticky, attractive, smooth entrance */
   .banner-mobile-sticky-cta {
     -webkit-tap-highlight-color: transparent;
     transform: translateY(100%);
     opacity: 0;
     transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease;
   }
   
   .banner-mobile-sticky-cta.is-visible {
     transform: translateY(0);
     opacity: 1;
   }
   
   .banner-mobile-sticky-inner {
     display: flex;
     gap: 12px;
     padding: 14px 16px;
     padding-bottom: max(14px, env(safe-area-inset-bottom));
     margin: 0;
     background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(250,250,250,0.98) 100%);
     backdrop-filter: blur(14px);
     -webkit-backdrop-filter: blur(14px);
     border-radius: 20px 20px 0 0;
     box-shadow: 0 -4px 24px rgba(0,0,0,0.12);
     border: 1px solid rgba(0,0,0,0.06);
     border-bottom: none;
   }
   
   .banner-sticky-btn {
     flex: 1;
     min-height: 52px;
     min-width: 0;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 6px;
     font-weight: 700;
     font-size: 0.8125rem;
     text-decoration: none;
     border-radius: 16px;
     transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
     -webkit-tap-highlight-color: transparent;
     box-shadow: 0 2px 8px rgba(0,0,0,0.1);
     white-space: nowrap;
   }
   .banner-sticky-btn span {
     white-space: nowrap;
   }
   
   .banner-sticky-btn:active {
     transform: scale(0.97);
   }
   
   .banner-sticky-btn i {
     font-size: 1rem;
     opacity: 0.95;
   }
   
   .banner-sticky-consult {
     color: #fff;
     background: linear-gradient(135deg, #c41e3a 0%, #a01830 100%);
     box-shadow: 0 4px 16px rgba(196, 30, 58, 0.45);
   }
   
   .banner-sticky-consult:active {
     box-shadow: 0 2px 10px rgba(196, 30, 58, 0.4);
   }
   
   .banner-sticky-shop {
     color: #fff;
     background: linear-gradient(135deg, #2d8a3e 0%, #1e6b2c 100%);
     box-shadow: 0 4px 16px rgba(45, 138, 62, 0.45);
   }
   
   .banner-sticky-shop:active {
     box-shadow: 0 2px 10px rgba(45, 138, 62, 0.4);
   }
   
   @media (max-width: 380px) {
     .banner-sticky-btn {
       font-size: 0.75rem;
       gap: 4px;
     }
     .banner-sticky-btn i {
       font-size: 0.9rem;
     }
   }
   
   @media (max-width: 639px) {
     body {
       padding-bottom: 5.5rem;
     }
   
     .sticky-action-btns {
       bottom: 11rem;
     }
   }
   
   /* ========== Scroll reveal – attractive animations on scroll ========== */
   .scroll-reveal {
     opacity: 0;
     transform: translateX(0) translateY(0) scale(1);
     transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
     will-change: opacity, transform;
   }
   
   .scroll-reveal[data-reveal="left"] {
     transform: translateX(-56px) translateY(0) scale(0.98);
   }
   
   .scroll-reveal[data-reveal="right"] {
     transform: translateX(56px) translateY(0) scale(0.98);
   }
   
   .scroll-reveal[data-reveal="up"] {
     transform: translateX(0) translateY(48px) scale(0.98);
   }
   
   .scroll-reveal[data-reveal="scale"] {
     transform: translateX(0) translateY(24px) scale(0.94);
     transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
   }
   
   .scroll-reveal.reveal-in-view {
     opacity: 1;
     transform: translateX(0) translateY(0) scale(1);
   }
   
   /* Stagger children – problem cards, benefits cards, how-it-works, success cards */
   .scroll-reveal.reveal-in-view .problem-card,
   .scroll-reveal.reveal-in-view .benefits-card,
   .scroll-reveal.reveal-in-view .how-it-works-card,
   .scroll-reveal.reveal-in-view .success-story-card {
     animation: revealStagger 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
   }
   .scroll-reveal .problem-card,
   .scroll-reveal .benefits-card,
   .scroll-reveal .how-it-works-card,
   .scroll-reveal .success-story-card { opacity: 0; transform: translateY(20px); }
   .scroll-reveal.reveal-in-view .problem-card:nth-child(1), .scroll-reveal.reveal-in-view .benefits-card:nth-child(1),
   .scroll-reveal.reveal-in-view .how-it-works-card:nth-child(1), .scroll-reveal.reveal-in-view .success-story-card:nth-child(1) { animation-delay: 0.05s; }
   .scroll-reveal.reveal-in-view .problem-card:nth-child(2), .scroll-reveal.reveal-in-view .benefits-card:nth-child(2),
   .scroll-reveal.reveal-in-view .how-it-works-card:nth-child(2), .scroll-reveal.reveal-in-view .success-story-card:nth-child(2) { animation-delay: 0.1s; }
   .scroll-reveal.reveal-in-view .problem-card:nth-child(3), .scroll-reveal.reveal-in-view .benefits-card:nth-child(3),
   .scroll-reveal.reveal-in-view .how-it-works-card:nth-child(3), .scroll-reveal.reveal-in-view .success-story-card:nth-child(3) { animation-delay: 0.15s; }
   .scroll-reveal.reveal-in-view .problem-card:nth-child(4), .scroll-reveal.reveal-in-view .benefits-card:nth-child(4),
   .scroll-reveal.reveal-in-view .how-it-works-card:nth-child(4), .scroll-reveal.reveal-in-view .success-story-card:nth-child(4) { animation-delay: 0.2s; }
   .scroll-reveal.reveal-in-view .problem-card:nth-child(5), .scroll-reveal.reveal-in-view .benefits-card:nth-child(5) { animation-delay: 0.25s; }
   .scroll-reveal.reveal-in-view .problem-card:nth-child(6), .scroll-reveal.reveal-in-view .benefits-card:nth-child(6) { animation-delay: 0.3s; }
   @keyframes revealStagger {
     to { opacity: 1; transform: translateY(0); }
   }
   
   @media (prefers-reduced-motion: reduce) {
     .scroll-reveal {
       opacity: 1;
       transform: none;
       transition: none;
       will-change: auto;
     }
     .scroll-reveal[data-reveal="left"],
     .scroll-reveal[data-reveal="right"],
     .scroll-reveal[data-reveal="up"],
     .scroll-reveal[data-reveal="scale"] {
       transform: none;
     }
     .scroll-reveal .problem-card,
     .scroll-reveal .problem-card,
    .scroll-reveal .benefits-card,
    .scroll-reveal .how-it-works-card,
    .scroll-reveal .success-story-card {
       opacity: 1;
       transform: none;
       animation: none;
     }
   }
   
   /* Hero content – force light text (overrides body) + shadow for legibility */
   .hero-content {
     color: #fff;
     animation: heroFadeUp 0.8s ease-out forwards;
   }
   
   .hero-content h1 {
     color: #fff !important;
     text-shadow: 0 1px 3px rgba(0,0,0,0.5), 0 2px 12px rgba(0,0,0,0.4);
   }
   
   .hero-content p {
     color: #e5e7eb !important;
     text-shadow: 0 1px 2px rgba(0,0,0,0.5);
   }
   
   .hero-content [class*="rounded-full"][class*="bg-white/20"] {
     color: #fff !important;
   }
   
   @keyframes heroFadeUp {
     from {
       opacity: 0;
       transform: translateY(24px);
     }
     to {
       opacity: 1;
       transform: translateY(0);
     }
   }
   
   /* ========== SECTION THEME – Attractive backgrounds, text readable ========== */
   .section-soft {
     background: linear-gradient(180deg, #fafbfc 0%, #f5f7f9 100%);
   }
   
   /* Featured Product – soft mint edge, clean */
   .section-bg-product {
     background: linear-gradient(135deg, #ffffff 0%, #f0f9f4 50%, #ffffff 100%);
     color: #1a1a1a;
   }
   .section-bg-product h2,
   .section-bg-product h3 { color: #1a1a1a !important; }
   .section-bg-product p { color: #374151; }
   .section-bg-product li span { color: #1f2937; }
   
   /* Success Stories – fresh green tint */
   .section-bg-success {
     background: linear-gradient(180deg, #ecfdf5 0%, #d1fae5 30%, #f0fdf4 70%, #f8faf9 100%);
     position: relative;
     color: #1a1a1a;
   }
   .section-bg-success::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 1px;
     background: linear-gradient(90deg, transparent, rgba(45, 138, 62, 0.25), transparent);
   }
   .section-bg-success h2,
   .section-bg-success h3 { color: #1a1a1a !important; }
   .section-bg-success p { color: #374151; }
   
   /* Trust & Science / Ingredients – warm off‑white + subtle pattern */
   .section-bg-trust {
     background-color: #fefdfb;
     background-image: 
       radial-gradient(circle at 2px 2px, rgba(45, 138, 62, 0.05) 1px, transparent 0),
       linear-gradient(180deg, #fefdfb 0%, #f8f6f2 50%, #fefdfb 100%);
     background-size: 28px 28px, 100% 100%;
     color: #1a1a1a;
   }
   .section-bg-trust h2,
   .section-bg-trust h3 { color: #1a1a1a !important; }
   .section-bg-trust p { color: #4b5563; }
   
   /* NirogLab vs – light gray‑green, clear for table */
   .section-bg-compare {
     background: linear-gradient(180deg, #f3f7f4 0%, #e8f0ea 50%, #f5f9f6 100%);
     color: #1a1a1a;
   }
   .section-bg-compare h2,
   .section-bg-compare h3 { color: #1a1a1a !important; }
   .section-bg-compare p { color: #4b5563; }
   
  /* Problems – soft warm tone */
  .section-bg-problems {
    background: linear-gradient(180deg, #fef7f7 0%, #fce8e8 40%, #fef5f5 70%, #fafbfc 100%);
    position: relative;
    color: #1a1a1a;
  }
   .section-bg-problems h2,
   .section-bg-problems h3 { color: #1a1a1a !important; }
   .section-bg-problems p { color: #4b5563; }
   
   /* We Proud – neutral with subtle accent */
   .section-bg-proud {
     background: linear-gradient(90deg, #fafafa 0%, #f5f5f5 50%, #fafafa 100%);
     border-top: 1px solid rgba(0,0,0,0.04);
     border-bottom: 1px solid rgba(0,0,0,0.04);
     color: #1a1a1a;
   }
   .section-bg-proud h2 { color: #1a1a1a !important; }
   .section-bg-proud p { color: #4b5563; }
   
   /* FAQ – soft gradient, easy to read */
   .section-bg-faq {
     background: linear-gradient(180deg, #f9fafb 0%, #f3f4f6 50%, #f9fafb 100%);
     color: #1a1a1a;
   }
   .section-bg-faq h2 { color: #1a1a1a !important; }
   .section-bg-faq > div > .text-center p { color: #4b5563; }
   .section-bg-faq .faq-question { color: #1a1a1a; }
   .section-bg-faq .faq-answer { color: #4b5563; }
   
   /* How It Works – distinct gradient + subtle shape */
   .section-bg-how {
     background: linear-gradient(160deg, #f0fdf4 0%, #ecfdf5 25%, #f8faf9 60%, #ffffff 100%);
     position: relative;
     overflow: hidden;
   }
   .section-bg-how::before {
     content: '';
     position: absolute;
     top: -50%;
     right: -20%;
     width: 60%;
     height: 120%;
     background: radial-gradient(ellipse, rgba(45, 138, 62, 0.06) 0%, transparent 70%);
     pointer-events: none;
   }
   .section-bg-how h2,
   .section-bg-how h3 { color: #1a1a1a !important; }
   .section-bg-how p { color: #4b5563; }
   
   .how-it-works-line {
     background: linear-gradient(90deg, rgba(45, 138, 62, 0.15), rgba(45, 138, 62, 0.5) 20%, rgba(45, 138, 62, 0.5) 80%, rgba(45, 138, 62, 0.15));
     box-shadow: 0 0 12px rgba(45, 138, 62, 0.2);
   }
   
   .how-it-works-card {
     position: relative;
     transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
   }
   .how-it-works-card:hover {
     box-shadow: 0 20px 40px -12px rgba(45, 138, 62, 0.2), 0 0 0 1px rgba(45, 138, 62, 0.08);
   }
   .how-it-works-num {
     transition: transform 0.3s ease;
   }
   .how-it-arrow {
     transition: transform 0.3s ease, background-color 0.3s ease;
   }
   .how-it-works-card:hover .how-it-arrow {
     transform: translate(50%, -50%) translateX(4px);
     background-color: rgba(45, 138, 62, 0.25) !important;
   }
   
   /* ========== Benefits section – What You Gain ========== */
   .section-bg-benefits {
     background: linear-gradient(165deg, #ffffff 0%, #f0fdf4 35%, #dcfce7 60%, #f8faf9 100%);
     position: relative;
     overflow: hidden;
   }
   .section-bg-benefits::before {
     content: '';
     position: absolute;
     bottom: -30%;
     left: -15%;
     width: 50%;
     height: 80%;
     background: radial-gradient(ellipse, rgba(45, 138, 62, 0.08) 0%, transparent 65%);
     pointer-events: none;
   }
   .section-bg-benefits::after {
     content: '';
     position: absolute;
     top: 10%;
     right: -10%;
     width: 40%;
     height: 60%;
     background: radial-gradient(ellipse, rgba(45, 138, 62, 0.06) 0%, transparent 60%);
     pointer-events: none;
   }
   .section-bg-benefits h2,
   .section-bg-benefits h3 { color: #1a1a1a !important; }
   .section-bg-benefits p { color: #4b5563; }
   
   .benefits-card {
     transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
   }
   .benefits-card:hover {
     box-shadow: 0 24px 48px -12px rgba(45, 138, 62, 0.22), 0 0 0 1px rgba(45, 138, 62, 0.06);
   }
   .benefits-icon {
     transition: transform 0.3s ease, box-shadow 0.3s ease;
   }
   .benefits-card:hover .benefits-icon {
     box-shadow: 0 8px 20px -4px rgba(45, 138, 62, 0.35);
   }
   
   /* ========== VIDEO REELS – Shoppable reels section (NirogLab theme) ========== */
   .reels-section {
     --reel-radius: 14px;
     --reel-gap: 14px;
     --reel-width: 220px;
     --reel-aspect: 9 / 16;
   }
   
   .reels-section-nirog {
     background: linear-gradient(180deg, #f8faf9 0%, #f0fdf4 40%, #f8faf9 100%);
     position: relative;
   }
   
   .reels-section-nirog::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 1px;
     background: linear-gradient(90deg, transparent, rgba(45, 138, 62, 0.2), transparent);
   }
   
   /* Reels header – attractive badge, title, subtitle */
   .reels-section .reels-header {
     margin-bottom: 1.5rem;
   }
   @media (min-width: 640px) {
     .reels-section .reels-header {
       margin-bottom: 2rem;
     }
   }
   .reels-section .reels-badge {
     display: inline-block;
     padding: 0.35rem 0.9rem;
     border-radius: 9999px;
     background: linear-gradient(135deg, rgba(45, 138, 62, 0.15), rgba(45, 138, 62, 0.08));
     color: #166534;
     font-size: 0.7rem;
     font-weight: 700;
     letter-spacing: 0.12em;
     text-transform: uppercase;
     margin-bottom: 0.5rem;
     border: 1px solid rgba(45, 138, 62, 0.25);
     box-shadow: 0 2px 8px rgba(45, 138, 62, 0.1);
   }
   .reels-section .reels-title {
     font-size: 1.65rem;
     font-weight: 800;
     color: #0f172a;
     margin: 0 0 0.35rem 0;
     letter-spacing: -0.02em;
     line-height: 1.2;
   }
   @media (min-width: 640px) {
     .reels-section .reels-title {
       font-size: 2rem;
     }
   }
   .reels-section .reels-subtitle {
     font-size: 0.9rem;
     color: #64748b;
     margin: 0;
     max-width: 420px;
     margin-left: auto;
     margin-right: auto;
   }
   @media (min-width: 640px) {
     .reels-section .reels-subtitle {
       font-size: 1rem;
     }
   }
   
   .reels-section .reels-container {
     max-width: 100%;
     margin: 0 auto;
   }
   
   .reels-section .reels-slider-wrap {
     position: relative;
     margin: 0 -1rem;
     padding: 0 1rem;
   }
   
   @media (min-width: 640px) {
     .reels-section {
       --reel-width: 240px;
       --reel-gap: 18px;
     }
     .reels-section .reels-slider-wrap {
       margin: 0 -1.5rem;
       padding: 0 3.5rem;
     }
   }
   
   @media (min-width: 1024px) {
     .reels-section {
       --reel-width: 260px;
       --reel-gap: 20px;
     }
   }
   
   .reels-section .reels-arrow {
     display: none;
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     z-index: 3;
     width: 44px;
     height: 44px;
     border: none;
     border-radius: 50%;
     background: #fff;
     color: #2d8a3e;
     cursor: pointer;
     box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
     transition: all 0.25s ease;
     align-items: center;
     justify-content: center;
   }
   
   .reels-section .reels-arrow:hover {
     background: #2d8a3e;
     color: #fff;
     box-shadow: 0 6px 20px rgba(45, 138, 62, 0.35);
     transform: translateY(-50%) scale(1.05);
   }
   
   .reels-section .reels-arrow:active {
     transform: translateY(-50%) scale(0.98);
   }
   
   @media (min-width: 768px) {
     .reels-section .reels-arrow {
       display: flex;
     }
   }
   
   .reels-section .reels-prev {
     left: 0.5rem;
   }
   
   .reels-section .reels-next {
     right: 0.5rem;
   }
   
   .reels-section .reels-slider {
     display: flex;
     gap: var(--reel-gap);
     overflow-x: auto;
     overflow-y: hidden;
     scroll-snap-type: x mandatory;
     scroll-behavior: smooth;
     -webkit-overflow-scrolling: touch;
     scrollbar-width: none;
     padding: 6px 0 14px;
   }
   
   .reels-section .reels-slider::-webkit-scrollbar {
     display: none;
   }
   
   .reels-section .reels-slider.is-dragging {
     scroll-snap-type: none;
     cursor: grabbing;
   }
   
   .reels-section .reel-card {
     flex: 0 0 var(--reel-width);
     width: var(--reel-width);
     scroll-snap-align: start;
     border-radius: var(--reel-radius);
     overflow: hidden;
     background: #f5f5f5;
     box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
     text-decoration: none;
     color: inherit;
     position: relative;
     transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
     cursor: grab;
     border: 2px solid rgba(45, 138, 62, 0.08);
   }
   
   .reels-section .reel-card:active {
     cursor: grabbing;
   }
   
   .reels-section .reel-card:hover {
     transform: scale(1.03);
     box-shadow: 0 12px 28px rgba(45, 138, 62, 0.18);
     border-color: rgba(45, 138, 62, 0.25);
   }
   
   .reels-section .reel-video-wrap {
     position: relative;
     width: 100%;
     aspect-ratio: var(--reel-aspect);
     overflow: hidden;
   }
   
   .reels-section .reel-unmute-btn {
     position: absolute;
     top: 10px;
     right: 10px;
     z-index: 3;
     width: 36px;
     height: 36px;
     border: none;
     border-radius: 50%;
     background: rgba(0, 0, 0, 0.5);
     color: #fff;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1rem;
     transition: background 0.2s ease, transform 0.2s ease;
     -webkit-tap-highlight-color: transparent;
   }
   .reels-section .reel-unmute-btn:hover {
     background: rgba(0, 0, 0, 0.7);
     transform: scale(1.05);
   }
   .reels-section .reel-unmute-btn:active {
     transform: scale(0.95);
   }
   
   .reels-section .reel-video {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
     vertical-align: middle;
   }
   
   /* Overlay with Get Free Consultation + Shop Now */
   .reels-section .reel-cta-overlay {
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     z-index: 2;
     padding: 10px 8px 12px;
     padding-bottom: max(12px, env(safe-area-inset-bottom, 12px));
     background: linear-gradient(to top, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.55) 65%, transparent);
     display: flex;
     flex-wrap: wrap;
     gap: 8px;
     align-items: center;
     justify-content: center;
     pointer-events: none;
     min-height: 52px;
   }
   .reels-section .reel-cta-overlay * {
     pointer-events: auto;
   }
   
   .reels-section .reel-cta {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 6px;
     padding: 8px 12px;
     border-radius: 10px;
     font-size: 0.7rem;
     font-weight: 700;
     letter-spacing: 0.04em;
     text-decoration: none;
     color: #fff;
     white-space: nowrap;
     transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
     border: none;
     cursor: pointer;
     box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
   }
   .reels-section .reel-cta i {
     font-size: 0.85em;
   }
   
   .reels-section .reel-cta-consult {
     background: linear-gradient(135deg, #dc2626, #b91c1c);
     color: #fff;
   }
   .reels-section .reel-cta-consult:hover {
     transform: translateY(-2px);
     box-shadow: 0 5px 16px rgba(220, 38, 38, 0.5);
     color: #fff;
   }
   
   .reels-section .reel-cta-shop {
     background: linear-gradient(135deg, #2d8a3e, #166534);
     color: #fff;
   }
   .reels-section .reel-cta-shop:hover {
     transform: translateY(-2px);
     box-shadow: 0 5px 16px rgba(45, 138, 62, 0.5);
     color: #fff;
   }
   
   .reels-section .reel-card:hover .reel-cta-overlay .reel-cta {
     opacity: 1;
   }
   
   @media (min-width: 640px) {
     .reels-section .reel-cta-overlay {
       padding: 12px 10px 14px;
       padding-bottom: max(14px, env(safe-area-inset-bottom, 14px));
       gap: 10px;
     }
     .reels-section .reel-cta {
       padding: 9px 14px;
       font-size: 0.75rem;
       gap: 7px;
     }
   }
   
   .section-pattern {
     background-color: #f8faf9;
     background-image: 
       radial-gradient(circle at 1px 1px, rgba(45, 138, 62, 0.06) 1px, transparent 0);
     background-size: 32px 32px;
   }
   
   .section-white {
     background: #ffffff;
   }
   
   /* Card styles – premium lift */
   .card-premium {
     background: #fff;
     border-radius: 20px;
     box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.06), 0 2px 4px -2px rgba(0, 0, 0, 0.04);
     border: 1px solid rgba(0, 0, 0, 0.04);
     transition: box-shadow 0.3s, transform 0.3s, border-color 0.3s;
   }
   
   .card-premium:hover {
     box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
     border-color: rgba(45, 138, 62, 0.15);
   }
   
   /* Section title underline accent */
   .section-title-accent {
     position: relative;
     display: inline-block;
   }
   
   .section-title-accent::after {
     content: '';
     position: absolute;
     left: 50%;
     bottom: -8px;
     transform: translateX(-50%);
     width: 48px;
     height: 4px;
     border-radius: 2px;
     background: linear-gradient(90deg, #2d8a3e, #34a853);
   }
   
   /* ========== Modal – responsive ========== */
   @keyframes modalSlideUp {
     from {
       opacity: 0;
       transform: translateY(20px);
     }
     to {
       opacity: 1;
       transform: translateY(0);
     }
   }
   
   .modal-content {
     animation: modalSlideUp 0.3s ease-out;
   }
   
   /* Mobile: bottom sheet style, desktop: centered */
   .modal-overlay {
     padding-bottom: env(safe-area-inset-bottom, 0);
   }
   
   @media (max-width: 639px) {
     .modal-overlay .modal-content {
       margin-bottom: 0;
       max-height: 90vh;
       max-height: calc(90vh - env(safe-area-inset-bottom, 0));
     }
   }
   
   /* Prevent zoom on input focus on iOS */
   @media (max-width: 639px) {
     .modal-content input[type="text"],
     .modal-content input[type="tel"] {
       font-size: 16px !important;
     }
   }
   
   /* ========== Utility animations ========== */
   @keyframes fadeInUp {
     from { opacity: 0; transform: translateY(20px); }
     to { opacity: 1; transform: translateY(0); }
   }
   
   .animate-fade-in-up {
     animation: fadeInUp 0.6s ease-out forwards;
   }
   
   /* ========== img-comparison-slider (before/after) ========== */
   .img-comparison-slider-wrap img-comparison-slider {
     display: block;
     width: 100%;
     height: 100%;
   }
   
   .img-comparison-slider-wrap img-comparison-slider img {
     object-fit: cover;
   }
   
   /* Custom handle (slot) – inheritable styles may apply inside shadow */
   .img-comparison-handle {
     display: flex !important;
     align-items: center;
     justify-content: center;
     width: 44px;
     height: 44px;
     border-radius: 50%;
     background: #fff;
     border: 2px solid #2d8a3e;
     color: #2d8a3e;
     box-shadow: 0 2px 8px rgba(0,0,0,0.25);
   }
   
   .img-comparison-handle-lg {
     width: 56px !important;
     height: 56px !important;
     border-width: 3px;
     box-shadow: 0 4px 14px rgba(0,0,0,0.35);
   }
   
   /* ========== How It Works – attractive step cards ========== */
   .how-it-works-section {
     background: linear-gradient(180deg, #fafbfc 0%, #f5f7f9 50%, #f8faf9 100%);
     position: relative;
   }
   
   .how-it-works-section .section-title-accent::after {
     width: 56px;
     height: 5px;
   }
   
   /* ========== Benefits – attractive cards ========== */
   .benefits-section {
     background: linear-gradient(180deg, #ffffff 0%, #f8faf9 50%, #ffffff 100%);
     position: relative;
   }
   
   .benefits-section .section-title-accent::after {
     width: 56px;
     height: 5px;
   }
   
   /* ========== Products – bigger, more attractive ========== */
   .products-section {
     background: linear-gradient(180deg, #f5f9f6 0%, #ffffff 40%, #f8faf9 100%);
     position: relative;
   }
   
   .products-section .section-title-accent::after {
     width: 56px;
     height: 5px;
   }
   
   /* ========== Problem section / Trust & Ingredients section ========== */
   .section-bg-problems .section-title-accent::after {
     width: 56px;
     height: 5px;
     background: linear-gradient(90deg, #c41e3a, #e11d48);
   }
   .section-trust-ingredients .section-title-accent::after {
     background: linear-gradient(90deg, #2d8a3e, #34a853);
   }
   
   /* Success Stories – extra spacing/typography kept */
   .success-stories-section { position: relative; }
   
   .success-slider-height {
     height: 380px;
   }
   
   @media (max-width: 639px) {
     .success-slider-height {
       height: 200px;
     }
     .success-compare-card > div:nth-child(2) {
       padding: 0.75rem 0.75rem 1rem !important;
     }
     .success-compare-card .mt-4 {
       margin-top: 0.75rem !important;
     }
     #success-stories .mb-8 {
       margin-bottom: 1.5rem !important;
     }
     #success-stories.py-8 {
       padding-top: 1.5rem !important;
       padding-bottom: 1.5rem !important;
     }
   }
   
   @media (min-width: 640px) {
     .success-slider-height {
       height: 460px;
     }
   }
   
   @media (min-width: 1024px) {
     .success-slider-height {
       height: 520px;
     }
   }
   
   /* ========== Footer – premium dark design ========== */
   .footer {
     position: relative;
     background: linear-gradient(180deg, #0f0f0f 0%, #1a1a1a 50%, #141414 100%);
     color: #fff;
   }
   
   .footer-accent {
     height: 4px;
     background: linear-gradient(90deg, #2d8a3e 0%, #34a853 40%, #c41e3a 100%);
     opacity: 0.9;
   }
   
   .footer-dark p,
   .footer-dark li {
     color: #9ca3af;
   }
   
   .footer-dark h4,
   .footer-heading {
     color: #fff;
     font-size: 1rem;
     font-weight: 700;
     margin-bottom: 1rem;
     position: relative;
     padding-bottom: 0.5rem;
   }
   
   .footer-heading::after {
     content: '';
     position: absolute;
     left: 0;
     bottom: 0;
     width: 32px;
     height: 3px;
     border-radius: 2px;
     background: linear-gradient(90deg, #2d8a3e, #34a853);
   }
   
   .footer-logo:hover {
     opacity: 1;
   }
   
   .footer-cta-buttons a {
     color: #fff !important;
     transition: transform 0.2s, box-shadow 0.2s;
   }
   
   .footer-cta-buttons a:hover {
     transform: translateY(-1px);
     box-shadow: 0 4px 12px rgba(0,0,0,0.3);
   }
   
   .footer-cta-btn {
     color: #fff !important;
   }
   
   .footer-contact-icon {
     flex-shrink: 0;
     width: 36px;
     height: 36px;
     border-radius: 10px;
     background: rgba(45, 138, 62, 0.15);
     color: #2d8a3e;
     display: flex;
     align-items: center;
     justify-content: center;
   }
   
   .footer-link {
     color: #9ca3af;
     font-size: 0.875rem;
     transition: color 0.2s, transform 0.2s;
     display: inline-block;
   }
   
   .footer-link:hover {
     color: #2d8a3e;
     transform: translateX(3px);
   }
   
   .footer-cta-btn:hover {
     box-shadow: 0 0 20px rgba(196, 30, 58, 0.3);
   }
   
   .footer-disclaimer {
     background: rgba(255, 255, 255, 0.04);
     border: 1px solid rgba(255, 255, 255, 0.06);
   }
   
   .footer-bottom {
     border-top: 1px solid rgba(255, 255, 255, 0.08);
   }
   
   .footer-dark .footer-contact a,
   .footer-dark .footer-links a,
   .footer-bottom a {
     color: #9ca3af;
   }
   
   .footer-dark .footer-contact a:hover,
   .footer-dark .footer-links a:hover,
   .footer-bottom a:hover {
     color: #2d8a3e;
   }
   
   /* ========== Weight Loss – Logo Marquee (banner ke niche, no gap) ========== */
   .banner-hero + .logo-marquee-section { margin-top: 0 !important; }
   .logo-marquee-section { background: #fafbfc; margin-top: 0 !important; padding-top: 0 !important; }
   .logo-marquee {
     padding: 1rem 0;
     position: relative;
   }
   .logo-marquee--gradient {
     background-image: linear-gradient(90deg, #fafbfc 5%, rgba(250,251,252,0) 10%),
       linear-gradient(270deg, #fafbfc 5%, rgba(250,251,252,0) 10%);
     top: 2.5rem;
     height: 64px;
     left: 0;
     position: absolute;
     width: 100%;
     z-index: 1;
     pointer-events: none;
   }
   .logo-marquee--marquee {
     display: flex;
     overflow: hidden;
     user-select: none;
   }
   .logo-marquee--marquee-track {
     display: flex;
     flex-shrink: 0;
     width: max-content;
     animation: scroll-left 30s linear infinite;
   }
   @media (prefers-reduced-motion: reduce) {
     .logo-marquee--marquee-track { animation-play-state: paused; }
   }
   .logo-marquee--marquee-group {
     display: flex;
     flex-shrink: 0;
     align-items: center;
     gap: 1.5rem;
   }
   .wl-badge {
     display: flex;
     align-items: center;
     gap: 0.5rem;
     padding: 12px 24px;
     background: #fff;
     border-radius: 50px;
     border: 2px solid rgba(45, 138, 62, 0.2);
     box-shadow: 0 2px 8px rgba(0,0,0,0.06);
     font-weight: 700;
     font-size: 0.875rem;
     color: #1a1a1a;
     white-space: nowrap;
     transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
   }
   .wl-badge:hover {
     transform: translateY(-2px);
     box-shadow: 0 6px 16px rgba(45, 138, 62, 0.15);
     border-color: rgba(45, 138, 62, 0.4);
   }
   .wl-badge i { font-size: 1rem; }
   @media (max-width: 991.98px) {
     .wl-badge { padding: 10px 18px; font-size: 0.8125rem; }
     .logo-marquee--gradient { height: 56px; }
   }
   @media (max-width: 767.98px) {
     .wl-badge { padding: 8px 16px; font-size: 0.75rem; }
     .logo-marquee--gradient { height: 48px; }
     .logo-marquee--marquee-group { gap: 1rem; }
   }
   @keyframes scroll-left {
     0% { transform: translateX(0); }
     100% { transform: translateX(-50%); }
   }

   /* ========== We Proud to be – logo marquee ========== */
   .proud-marquee {
     overflow: hidden;
     position: relative;
     border-radius: 20px;
     background: #fff;
     box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
     border: 1px solid rgba(0, 0, 0, 0.06);
   }
   
   .proud-track {
     display: flex;
     align-items: center;
     gap: 2.5rem;
     width: max-content;
     animation: proudMarquee 18s linear infinite;
   }
   
   .proud-item {
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 14px 22px;
     border-radius: 14px;
     background: #f8faf9;
     border: 1px solid rgba(45, 138, 62, 0.12);
     min-width: 190px;
   }
   
   .proud-item img {
     height: 70px;
     width: auto;
     object-fit: contain;
     filter: grayscale(0.15);
     opacity: 0.95;
     transition: transform 0.2s ease, filter 0.2s ease;
   }
   
   .proud-item:hover img {
     transform: scale(1.03);
     filter: grayscale(0);
   }
   
   @keyframes proudMarquee {
     0% { transform: translateX(0); }
     100% { transform: translateX(-50%); }
   }
   
   @media (max-width: 640px) {
     .proud-item {
       min-width: 150px;
       padding: 12px 16px;
     }
     .proud-item img {
       height: 54px;
     }
     .proud-track {
       gap: 1.5rem;
     }
   }
   
   /* ========== Landing – full mobile responsive ========== */
   @media (max-width: 639px) {
     .success-story-card .p-6 {
       padding: 1rem 1.25rem;
     }
   }
   
   /* Prevent horizontal scroll from any section */
   section {
     max-width: 100%;
   }
   
   /* Footer – mobile text and spacing */
   @media (max-width: 639px) {
     .footer-contact span,
     .footer-contact a {
       font-size: 0.875rem;
       word-break: break-word;
     }
     .footer-heading {
       margin-bottom: 0.75rem;
     }
   }
   
   /* ========== Powerful Ingredients – slider ========== */
   .ingredients-marquee {
     overflow-x: auto;
     overflow-y: hidden;
     position: relative;
     border-radius: 24px;
     background: linear-gradient(180deg, #ffffff 0%, #f8faf9 100%);
     border: 1px solid rgba(0, 0, 0, 0.06);
     box-shadow: 0 14px 40px rgba(0, 0, 0, 0.06);
     max-width: 1100px;
     margin: 0 auto;
     scrollbar-width: none;
   }
   
   .ingredients-track {
     display: flex;
     align-items: stretch;
     gap: 1.5rem;
     width: max-content;
     padding: 18px 0;
   }
   
   .ingredients-marquee::-webkit-scrollbar {
     display: none;
   }
   
   .ingredients-nav-btn {
     width: 42px;
     height: 42px;
     border-radius: 999px;
     border: 1px solid rgba(45, 138, 62, 0.2);
     background: #fff;
     color: #2d8a3e;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
     transition: transform 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
   }
   
   .ingredients-nav-btn:hover {
     transform: translateY(-1px);
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12);
     color: #228b34;
   }
   
   .ingredient-card {
     width: 320px;
     background: #fff;
     border-radius: 20px;
     border: 1px solid rgba(45, 138, 62, 0.12);
     box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
     overflow: hidden;
     transition: transform 0.2s ease, box-shadow 0.2s ease;
   }
   
   .ingredient-card:hover {
     transform: translateY(-4px);
     box-shadow: 0 14px 30px rgba(0, 0, 0, 0.08);
   }
   
   .ingredient-img {
     height: 170px;
     background: #f3f6f4;
     display: flex;
     align-items: center;
     justify-content: center;
   }
   
   .ingredient-img img {
     height: 135px;
     width: auto;
     object-fit: contain;
     filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.12));
   }
   
   .ingredient-body {
     padding: 16px 18px 18px;
   }
   
   .ingredient-title {
     font-weight: 700;
     color: #1a1a1a;
     font-size: 1.05rem;
     margin-bottom: 6px;
   }
   
   .ingredient-text {
     color: #4b5563;
     font-size: 0.875rem;
     line-height: 1.5;
   }
   
   /* ========== FAQ plus/minus ========== */
   .faq-toggle {
     width: 36px;
     height: 36px;
     border-radius: 999px;
     border: 1px solid rgba(45, 138, 62, 0.2);
     background: #f3f8f4;
     color: #2d8a3e;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     font-size: 20px;
     font-weight: 700;
     line-height: 1;
     flex-shrink: 0;
     transition: transform 0.2s ease, box-shadow 0.2s ease;
     box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
   }
   
   .faq-item .faq-toggle.is-open {
     transform: rotate(180deg);
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12);
   }
   
   /* ========== FAQ – Vertical tab style (Arimo, Demo 16 style) ========== */
   .faq-vertical-section .vertical-tab {
     font-family: 'Arimo', sans-serif;
     display: table;
     width: 100%;
     border-collapse: separate;
     border-spacing: 0;
   }
   
   .faq-vertical-section .faq-nav-tabs {
     display: table-cell;
     width: 28%;
     min-width: 28%;
     max-width: 260px;
     border: none;
     vertical-align: top;
     position: relative;
     padding: 0;
     margin: 0;
     list-style: none;
   }
   
   .faq-vertical-section .faq-nav-tabs li {
     float: none;
     vertical-align: top;
     margin: 0;
   }
   
   .faq-vertical-section .faq-nav-tabs li a {
     color: #0c3699;
     background-color: transparent;
     font-size: 15px;
     font-weight: 600;
     text-align: left;
     text-transform: uppercase;
     letter-spacing: 0.5px;
     padding: 12px 14px;
     margin: 0 10px 10px 0;
     border-radius: 8px;
     border: none;
     display: block;
     overflow: hidden;
     position: relative;
     z-index: 1;
     transition: all 0.3s ease;
     text-decoration: none;
     cursor: pointer;
   }
   
   .faq-vertical-section .faq-nav-tabs li a:hover,
   .faq-vertical-section .faq-nav-tabs li.active a,
   .faq-vertical-section .faq-nav-tabs li.active a:hover {
     color: #fff;
     background-color: transparent;
     border: none;
   }
   
   .faq-vertical-section .faq-nav-tabs li a:before,
   .faq-vertical-section .faq-nav-tabs li a:after {
     content: '';
     background-color: #E01B49;
     height: 100%;
     width: 100%;
     position: absolute;
     left: 0;
     top: -100%;
     z-index: -1;
     transition: all 0.3s ease;
     border-radius: 8px;
   }
   
   .faq-vertical-section .faq-nav-tabs li a:after {
     background-color: #0c3699;
     height: 3px;
     width: 100%;
     top: auto;
     bottom: 0;
     border-radius: 0;
   }
   
   .faq-vertical-section .faq-nav-tabs li.active a:before,
   .faq-vertical-section .faq-nav-tabs li a:hover:before {
     top: 0;
   }
   
   .faq-vertical-section .faq-nav-tabs li.active a:after,
   .faq-vertical-section .faq-nav-tabs li a:hover:after {
     transform: scaleX(0);
   }
   
   .faq-vertical-section .faq-nav-tabs li a i {
     margin-right: 8px;
     opacity: 0.9;
   }
   
   .faq-vertical-section .faq-tab-content {
     color: #0c3699;
     font-size: 15px;
     line-height: 1.7;
     margin-top: 0;
     padding: 24px 28px 28px;
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
     display: table-cell;
     position: relative;
     background: #fff;
     border-radius: 0 12px 12px 0;
     border: 1px solid rgba(12, 54, 153, 0.08);
     border-left: none;
     min-height: 200px;
   }
   
   .faq-vertical-section .faq-tab-content h3 {
     color: #E01B49;
     font-family: 'Arimo', sans-serif;
     font-size: 1.1rem;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 0.5px;
     margin: 0 0 14px 0;
     padding-bottom: 10px;
     border-bottom: 2px solid rgba(224, 27, 73, 0.2);
   }
   
   .faq-vertical-section .faq-tab-content p {
     margin: 0 0 12px 0;
     color: #1a1a1a;
   }
   
   .faq-vertical-section .faq-tab-content p:last-child {
     margin-bottom: 0;
   }
   
   .faq-vertical-section .faq-tab-content ul {
     margin: 0 0 14px 0;
     padding-left: 1.25rem;
     color: #1a1a1a;
   }
   
   .faq-vertical-section .faq-tab-content ul li {
     margin-bottom: 6px;
   }
   
   .faq-vertical-section .faq-tab-link {
     color: #0c3699;
     font-weight: 600;
     text-decoration: underline;
     text-underline-offset: 2px;
     transition: color 0.2s ease;
   }
   
   .faq-vertical-section .faq-tab-link:hover {
     color: #E01B49;
   }
   
   .faq-vertical-section .tab-pane {
     display: none;
   }
   
   .faq-vertical-section .tab-pane.active {
     display: block;
     animation: faqTabFade 0.25s ease;
   }
   
   @keyframes faqTabFade {
     from { opacity: 0; }
     to { opacity: 1; }
   }
   
   /* FAQ vertical tab – mobile */
   @media only screen and (max-width: 767px) {
     .faq-vertical-section .vertical-tab {
       display: block;
     }
   
     .faq-vertical-section .faq-nav-tabs {
       display: flex;
       width: 100%;
       max-width: none;
       overflow-x: auto;
       overflow-y: hidden;
       flex-wrap: nowrap;
       gap: 0;
       margin-bottom: 0;
       padding-bottom: 12px;
       scroll-snap-type: x mandatory;
       -webkit-overflow-scrolling: touch;
       scrollbar-width: none;
       border-bottom: 2px solid rgba(12, 54, 153, 0.12);
     }
   
     .faq-vertical-section .faq-nav-tabs::-webkit-scrollbar {
       display: none;
     }
   
     .faq-vertical-section .faq-nav-tabs li {
       flex: 0 0 auto;
       scroll-snap-align: start;
     }
   
     .faq-vertical-section .faq-nav-tabs li a {
       font-size: 12px;
       padding: 10px 12px;
       margin: 0 6px 0 0;
       white-space: nowrap;
     }
   
     .faq-vertical-section .faq-nav-tabs li a i {
       display: none;
     }
   
     .faq-vertical-section .faq-tab-content {
       display: block;
       padding: 20px 18px 24px;
       margin-top: 16px;
       border-radius: 12px;
       border: 1px solid rgba(12, 54, 153, 0.1);
       border-left: 1px solid rgba(12, 54, 153, 0.1);
       box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
     }
   
     .faq-vertical-section .faq-tab-content h3 {
       font-size: 1rem;
     }
   }
   
   @media (max-width: 639px) {
     .faq-question {
       padding: 1rem 1rem 1rem 1rem !important;
       font-size: 0.9375rem;
     }
     .faq-answer {
       padding-left: 1rem !important;
       padding-right: 1rem !important;
       padding-bottom: 1rem !important;
     }
   }
   
   .faq-question span {
     word-wrap: break-word;
     overflow-wrap: break-word;
     min-width: 0;
   }
   
   @media (max-width: 640px) {
     .ingredient-card {
       width: 230px;
     }
     .ingredient-img {
       height: 140px;
     }
     .ingredient-img img {
       height: 96px;
     }
   }