/* --- CSS VARIABLES & RESET --- */
:root {
    --dark-green: #1a6b0a;
    /* Top Border & Text */
    --gradient-start: #9fd65e;
    /* Lime Green Start */
    --gradient-end: #dceb82;
    /* Yellowish Green End */
    --white: #ffffff;
    --font-main: 'Playfair Display', serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-main);
    background-color: #f4f4f4;
}


/* ==========================================================================
   1. INTER VARIABLE (Recommended for modern browsers)
   ========================================================================== */
@font-face {
    font-family: 'Inter Variable';
    src: url('fonts/Inter-VariableFont_opsz,wght.ttf') format('truetype-variations');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter Variable';
    src: url('fonts/Inter-Italic-VariableFont_opsz,wght.ttf') format('truetype-variations');
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}

/* ==========================================================================
   2. INTER STATIC - 18pt (Best for body text)
   ========================================================================== */
@font-face {
    font-family: 'Inter 18pt';
    src: url('fonts/Inter_18pt-Thin.ttf');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter 18pt';
    src: url('fonts/Inter_18pt-ThinItalic.ttf');
    font-weight: 100;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Inter 18pt';
    src: url('fonts/Inter_18pt-ExtraLight.ttf');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter 18pt';
    src: url('fonts/Inter_18pt-ExtraLightItalic.ttf');
    font-weight: 200;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Inter 18pt';
    src: url('fonts/Inter_18pt-Light.ttf');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter 18pt';
    src: url('fonts/Inter_18pt-LightItalic.ttf');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Inter 18pt';
    src: url('fonts/Inter_18pt-Regular.ttf');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter 18pt';
    src: url('fonts/Inter_18pt-Italic.ttf');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Inter 18pt';
    src: url('fonts/Inter_18pt-Medium.ttf');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter 18pt';
    src: url('fonts/Inter_18pt-MediumItalic.ttf');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Inter 18pt';
    src: url('fonts/Inter_18pt-SemiBold.ttf');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter 18pt';
    src: url('fonts/Inter_18pt-SemiBoldItalic.ttf');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Inter 18pt';
    src: url('fonts/Inter_18pt-Bold.ttf');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter 18pt';
    src: url('fonts/Inter_18pt-BoldItalic.ttf');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Inter 18pt';
    src: url('fonts/Inter_18pt-ExtraBold.ttf');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter 18pt';
    src: url('fonts/Inter_18pt-ExtraBoldItalic.ttf');
    font-weight: 800;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Inter 18pt';
    src: url('fonts/Inter_18pt-Black.ttf');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter 18pt';
    src: url('fonts/Inter_18pt-BlackItalic.ttf');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

/* ==========================================================================
   3. INTER STATIC - 24pt (Best for sub-headings)
   ========================================================================== */
@font-face {
    font-family: 'Inter 24pt';
    src: url('fonts/Inter_24pt-Thin.ttf');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter 24pt';
    src: url('fonts/Inter_24pt-ThinItalic.ttf');
    font-weight: 100;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Inter 24pt';
    src: url('fonts/Inter_24pt-ExtraLight.ttf');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter 24pt';
    src: url('fonts/Inter_24pt-ExtraLightItalic.ttf');
    font-weight: 200;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Inter 24pt';
    src: url('fonts/Inter_24pt-Light.ttf');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter 24pt';
    src: url('fonts/Inter_24pt-LightItalic.ttf');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Inter 24pt';
    src: url('fonts/Inter_24pt-Regular.ttf');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter 24pt';
    src: url('fonts/Inter_24pt-Italic.ttf');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Inter 24pt';
    src: url('fonts/Inter_24pt-Medium.ttf');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter 24pt';
    src: url('fonts/Inter_24pt-MediumItalic.ttf');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Inter 24pt';
    src: url('fonts/Inter_24pt-SemiBold.ttf');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter 24pt';
    src: url('fonts/Inter_24pt-SemiBoldItalic.ttf');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Inter 24pt';
    src: url('fonts/Inter_24pt-Bold.ttf');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter 24pt';
    src: url('fonts/Inter_24pt-BoldItalic.ttf');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Inter 24pt';
    src: url('fonts/Inter_24pt-ExtraBold.ttf');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter 24pt';
    src: url('fonts/Inter_24pt-ExtraBoldItalic.ttf');
    font-weight: 800;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Inter 24pt';
    src: url('fonts/Inter_24pt-Black.ttf');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter 24pt';
    src: url('fonts/Inter_24pt-BlackItalic.ttf');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

/* ==========================================================================
   4. INTER STATIC - 28pt (Best for large headlines)
   ========================================================================== */
@font-face {
    font-family: 'Inter 28pt';
    src: url('fonts/Inter_28pt-Thin.ttf');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter 28pt';
    src: url('fonts/Inter_28pt-ThinItalic.ttf');
    font-weight: 100;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Inter 28pt';
    src: url('fonts/Inter_28pt-ExtraLight.ttf');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter 28pt';
    src: url('fonts/Inter_28pt-ExtraLightItalic.ttf');
    font-weight: 200;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Inter 28pt';
    src: url('fonts/Inter_28pt-Light.ttf');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter 28pt';
    src: url('fonts/Inter_28pt-LightItalic.ttf');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Inter 28pt';
    src: url('fonts/Inter_28pt-Regular.ttf');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter 28pt';
    src: url('fonts/Inter_28pt-Italic.ttf');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Inter 28pt';
    src: url('fonts/Inter_28pt-Medium.ttf');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter 28pt';
    src: url('fonts/Inter_28pt-MediumItalic.ttf');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Inter 28pt';
    src: url('fonts/Inter_28pt-SemiBold.ttf');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter 28pt';
    src: url('fonts/Inter_28pt-SemiBoldItalic.ttf');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Inter 28pt';
    src: url('fonts/Inter_28pt-Bold.ttf');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter 28pt';
    src: url('fonts/Inter_28pt-BoldItalic.ttf');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Inter 28pt';
    src: url('fonts/Inter_28pt-ExtraBold.ttf');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter 28pt';
    src: url('fonts/Inter_28pt-ExtraBoldItalic.ttf');
    font-weight: 800;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Inter 28pt';
    src: url('fonts/Inter_28pt-Black.ttf');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter 28pt';
    src: url('fonts/Inter_28pt-BlackItalic.ttf');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

/* ==========================================================================
   5. SYNE FONT FAMILY
   ========================================================================== */
@font-face {
    font-family: 'Syne';
    src: url('fonts/Syne-Regular.ttf');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Syne';
    src: url('fonts/Syne-Medium.ttf');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Syne';
    src: url('fonts/Syne-SemiBold.ttf');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Syne';
    src: url('fonts/Syne-Bold.ttf');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Syne';
    src: url('fonts/Syne-ExtraBold.ttf');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

/* ==========================================================================
   6. TITILLIUM WEB FONT FAMILY
   ========================================================================== */
@font-face {
    font-family: 'Titillium Web';
    src: url('fonts/TitilliumWeb-ExtraLight.ttf');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Titillium Web';
    src: url('fonts/TitilliumWeb-ExtraLightItalic.ttf');
    font-weight: 200;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Titillium Web';
    src: url('fonts/TitilliumWeb-Light.ttf');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Titillium Web';
    src: url('fonts/TitilliumWeb-LightItalic.ttf');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Titillium Web';
    src: url('fonts/TitilliumWeb-Regular.ttf');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Titillium Web';
    src: url('fonts/TitilliumWeb-Italic.ttf');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Titillium Web';
    src: url('fonts/TitilliumWeb-SemiBold.ttf');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Titillium Web';
    src: url('fonts/TitilliumWeb-SemiBoldItalic.ttf');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Titillium Web';
    src: url('fonts/TitilliumWeb-Bold.ttf');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Titillium Web';
    src: url('fonts/TitilliumWeb-BoldItalic.ttf');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Titillium Web';
    src: url('fonts/TitilliumWeb-Black.ttf');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}



h1 , h2 , h3 , h4 , h5 , h6 , .nav-item a{
    font-family: 'Titillium Web' !important;
    font-weight: 400 !important;
}

p , a , span {
    font-family: 'Syne'!important;
    font-weight: 400!important;
}

/* --- HEADER CONTAINER --- */
header {
    width: 100%;
    position: relative;
    z-index: 1000;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* The Dark Green Top Strip */
.top-stripe {
    height: 30px;
    background-color: var(--dark-green);
    width: 100%;
}

/* The Main Nav Bar (Gradient) */
.navbar {
    background: linear-gradient(90deg, var(--gradient-start), var(--gradient-end));
    height: 80px;
    display: flex;
    align-items: center;
    padding-right: 5%;
    /* Spacing for right side */
    position: relative;
}

/* --- LOGO SECTION --- */
/* The logo box needs to overlap the top stripe, so we use absolute positioning or negative margin */
.logo-container {
    background-color: var(--white);
    height: 110px;
    /* Taller than navbar to overlap top */
    width: 200px;
    margin-top: -30px;
    /* Pulls it up to cover the top stripe */
    margin-left: 5%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 10;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.05);
    /* Logo Animation */
    opacity: 0;
    animation: fadeIn 0.8s ease-out forwards;
}

/* Simulating the Logo using CSS/Text for this demo */
.logo-icon {
    font-size: 30px;
    color: var(--dark-green);
    margin-bottom: 5px;
}

.logo-text {
    font-size: 24px;
    font-weight: 600;
    letter-spacing: 2px;
    color: var(--dark-green);
    text-transform: uppercase;
    line-height: 1;
}

.logo-sub {
    font-size: 10px;
    letter-spacing: 3px;
    color: var(--dark-green);
    text-transform: uppercase;
    margin-top: 5px;
}

/* --- NAVIGATION LINKS --- */
.nav-menu {
    margin-left: auto;
    /* Pushes menu to the right */
    margin-right: 40px;
    display: flex;
    list-style: none;
    gap: 40px;
}

.nav-item {
    /* Initial state for animation */
    opacity: 0;
    transform: translateY(20px);
}

.nav-link {
    text-decoration: none;
    color: #0f3d05;
    /* Very dark green text */
    font-size: 20px;
    font-weight: 500;
    position: relative;
    transition: color 0.3s ease;
}

/* Hover Effect: Underline slide */
.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -5px;
    left: 0;
    background-color: var(--dark-green);
    transition: width 0.3s ease;
}

.nav-link:hover {
    color: var(--dark-green);
}

.nav-link:hover::after {
    width: 100%;
}

/* --- HAMBURGER MENU --- */
.hamburger {
    display: none;
    /* Hidden on desktop */
    cursor: pointer;
    flex-direction: column;
    gap: 6px;
    z-index: 20;
}

.bar {
    width: 30px;
    height: 2px;
    background-color: #000;
    transition: all 0.3s ease;
}

/* --- ANIMATIONS --- */
@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

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

/* Staggered Delay Generator */
.nav-item:nth-child(1) {
    animation: fadeInUp 0.6s ease forwards 0.2s;
}

.nav-item:nth-child(2) {
    animation: fadeInUp 0.6s ease forwards 0.3s;
}

.nav-item:nth-child(3) {
    animation: fadeInUp 0.6s ease forwards 0.4s;
}

.nav-item:nth-child(4) {
    animation: fadeInUp 0.6s ease forwards 0.5s;
}

.nav-item:nth-child(5) {
    animation: fadeInUp 0.6s ease forwards 0.6s;
}

/* Add these lines to your CSS */

.nav-item:nth-child(6) {
    animation: fadeInUp 0.6s ease forwards 0.7s;
}

.nav-item:nth-child(7) {
    animation: fadeInUp 0.6s ease forwards 0.8s;
}

.nav-item:nth-child(8) {
    animation: fadeInUp 0.6s ease forwards 0.9s;
}


/* --- RESPONSIVE DESIGN (Mobile) --- */
@media screen and (max-width: 900px) {
    .hamburger {
        display: flex;
        margin-left: auto;
    }

    .nav-menu {
        position: absolute;
        top: 80px;
        /* Height of navbar */
        left: 0;
        width: 100%;
        background-color: #dceb82;
        /* Match gradient end */
        flex-direction: column;
        align-items: center;
        gap: 25px;
        padding: 30px 0;
        /* Hide initially */
        clip-path: circle(0% at 100% 0);
        transition: clip-path 0.5s ease-in-out;
        box-shadow: 0 10px 10px rgba(0, 0, 0, 0.05);
    }

    .nav-menu.active {
        clip-path: circle(150% at 100% 0);
    }

    .logo-container {
        width: 140px;
        height: 90px;
        margin-top: -30px;
    }

    .logo-text {
        font-size: 18px;
    }

    .logo-sub {
        font-size: 8px;
    }

    .logo-icon {
        font-size: 22px;
    }

    .logo-icon img {
        width: 100%;
    }

    /* Mobile Hamburger Animation */
    .hamburger.active .bar:nth-child(1) {
        transform: rotate(45deg) translate(5px, 6px);
    }

    .hamburger.active .bar:nth-child(2) {
        opacity: 0;
    }

    .hamburger.active .bar:nth-child(3) {
        transform: rotate(-45deg) translate(5px, -6px);
    }
}


/* --- DROPDOWN DESKTOP STYLES --- */
.nav-item.dropdown {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.chevron {
    font-size: 10px;
    margin-left: 5px;
    transition: transform 0.3s ease;
    display: inline-block;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background-color:#c1e172;
    min-width: 200px;
    padding: 10px 0;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    /* border-top: 3px solid var(--dark-green, #0f3d05); */
    list-style: none;
    /* border-radius: 0 0 8px 8px; */
    opacity: 0;
    visibility: hidden;
    z-index: 999;
    transition: all 0.3s ease;
}

.dropdown-link {
    display: block;
    padding: 12px 25px;
    text-decoration: none;
    color: #0f3d05;
    font-size: 16px;
    transition: background-color 0.2s, padding-left 0.2s;
}

.dropdown-link:hover {
    background-color: rgba(15, 61, 5, 0.05);
    padding-left: 30px;
}

/* DESKTOP HOVER EFFECT (Only works if screen is wide) */
@media screen and (min-width: 901px) {
    .nav-item.dropdown:hover .dropdown-menu {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) translateY(0);
    }
    
    .nav-item.dropdown:hover .chevron {
        transform: rotate(180deg);
    }
}

@media screen and (max-width: 900px) {
    /* ... your existing hamburger/logo styles ... */

    .nav-menu {
        /* Ensure the menu allows scrolling if dropdown makes it tall */
        overflow-y: auto; 
        max-height: 80vh; /* Prevent it from going off-screen */
    }

    .nav-item.dropdown {
        display: block; /* Stack vertically */
        width: 100%;
        text-align: center;
    }

    .dropdown-menu {
        /* RESET DESKTOP STYLES */
        position: relative; /* CRITICAL: Takes up physical space now */
        top: 10px;
        left: 0;
        transform: none;
        box-shadow: none;
        background-color: rgba(255, 255, 255, 0.4); /* Slight background to distinguish */
        width: 100%;
        border-top: none;
        margin-top: 0;
        
        /* HIDE BY DEFAULT */
        display: none; 
        opacity: 1;
        visibility: visible;
        padding: 0;
    }

    /* THE OPEN STATE (Triggered by JS click) */
    .nav-item.active-dropdown .dropdown-menu {
        display: block;
        animation: fadeIn 0.4s ease;
    }

    .nav-item.active-dropdown .chevron {
        transform: rotate(180deg);
    }

    .dropdown-link {
        padding: 15px;
        font-size: 18px;
        text-align: center;
        border-bottom: 1px solid rgba(0,0,0,0.05);
    }
}



/* --- SLIDER CONTAINER --- */
    .premium-hero-slider {
        position: relative;
        width: 100%;
        height: 100svh; /* Full Mobile Height */
        background-color: #000;
        overflow: hidden;
        font-family: 'Poppins', sans-serif;
    }

    /* --- SLIDE ITEM --- */
    .hero-slide {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        visibility: hidden;
        transition: opacity 1.2s ease-in-out, visibility 1.2s;
        z-index: 1;
    }

    .hero-slide.active {
        opacity: 1;
        visibility: visible;
        z-index: 2;
    }

    /* BACKGROUND IMAGE */
    .slide-bg-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        transform: scale(1.1);
        transition: transform 6s ease;
    }

    .hero-slide.active .slide-bg-img {
        transform: scale(1); /* Zoom Out Effect */
    }

    /* OVERLAYS */
    .slide-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 2;
    }

    .light-overlay {
        background: radial-gradient(circle, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.4) 100%);
    }

    .dark-overlay {
        background: rgba(0, 0, 0, 0.3);
    }

    /* --- CONTENT WRAPPER --- */
    .slide-content-wrapper {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 3;
        text-align: center;
        width: 90%;
        max-width: 1000px;
        color: #fff;
    }

    /* --- TYPOGRAPHY & ELEMENTS --- */
    
    /* Logo Area (Slide 1) */
    .slide-logo-area {
        margin-bottom: 20px;
    }
    
    .brand-logo-sim {
        display: flex;
        flex-direction: column;
        align-items: center;
        font-weight: 700;
        letter-spacing: 2px;
        line-height: 1;
        font-size: 1.2rem;
    }

    .brand-logo-sim svg {
        margin-bottom: 10px;
    }

    /* Headings */
    .slide-heading {
        font-size: 2.5rem;
        font-weight: 600;
        line-height: 1.3;
        text-shadow: 0 2px 10px rgba(0,0,0,0.3);
        margin: 0;
    }
    
    .slide-heading sup {
        font-size: 0.6em;
    }

    .slide-brand-title {
        font-size: 3rem;
        font-weight: 700;
        color: #fff;
        margin-bottom: 10px;
        letter-spacing: 1px;
    }

    .large-text {
        font-size: 3rem;
        font-weight: 600;
        margin-bottom: 40px;
    }

    /* Buttons */
    .slide-buttons {
        display: flex;
        gap: 20px;
        justify-content: center;
        margin-top: 30px;
    }

    .btn-lime {
        background-color: #a4c935; /* Lime Green */
        color: #0f3d05;
        padding: 12px 35px;
        border-radius: 50px;
        text-decoration: none;
        font-weight: 600;
        transition: transform 0.3s, background 0.3s;
    }

    .btn-lime:hover {
        background-color: #fff;
        transform: translateY(-3px);
    }

    .btn-transparent {
        background-color: rgba(0,0,0,0.5);
        border: 1px solid #a4c935;
        color: #fff;
        padding: 12px 35px;
        border-radius: 50px;
        text-decoration: none;
        font-weight: 500;
        transition: all 0.3s;
    }

    .btn-transparent:hover {
        background-color: #a4c935;
        color: #0f3d05;
    }

    /* --- ANIMATIONS --- */
    .fade-up {
        opacity: 0;
        transform: translateY(30px);
        transition: opacity 0.8s ease, transform 0.8s ease;
    }

    .delay-1 { transition-delay: 0.2s; }
    .delay-2 { transition-delay: 0.4s; }

    /* Active Animation State */
    .hero-slide.active .fade-up {
        opacity: 1;
        transform: translateY(0);
    }

    /* --- DOTS --- */
    .slider-nav-dots {
        position: absolute;
        bottom: 40px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 10;
        display: flex;
        gap: 12px;
    }

    .nav-dot {
        width: 12px;
        height: 12px;
        background-color: rgba(255,255,255,0.4);
        border-radius: 50%;
        cursor: pointer;
        transition: all 0.3s;
    }

    .nav-dot.active {
        background-color: #a4c935;
        transform: scale(1.2);
        width: 30px; /* Elongate active dot */
        border-radius: 10px;
    }

    /* --- RESPONSIVE DESIGN --- */
    @media (max-width: 768px) {
        .slide-heading {
            font-size: 1.8rem; /* Smaller text on mobile */
        }

        .large-text {
            font-size: 2rem;
        }

        .slide-brand-title {
            font-size: 2.2rem;
        }

        .slide-buttons {
            flex-direction: column; /* Stack buttons on mobile */
            gap: 15px;
            width: 80%;
            margin: 30px auto 0;
        }

        .btn-lime, .btn-transparent {
            width: 100%; /* Full width buttons */
            text-align: center;
        }
    }



    /* --- WHAT WE PROVIDE STYLES --- */
    .what-we-provide-section {
        background-color: #eef6e7; /* Light Pale Green */
        padding: 100px 20px;
        font-family: 'Poppins', sans-serif;
        text-align: center;
    }

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

    /* HEADER */
    .wwp-header {
        margin-bottom: 60px;
    }

    .wwp-brand-title {
        font-size: 3.5rem;
        font-weight: 700;
        color: #1a6b2e; /* Brand Green */
        margin-bottom: 10px;
        letter-spacing: -1px;
        display: inline-flex;
        align-items: center;
    }

    .leaf-accent {
        color: #8cc63f; /* Lighter leaf green */
        font-size: 0.8em; /* Slightly smaller to fit text */
        margin: 0 2px;
        transform: rotate(15deg) translateY(-5px);
    }

    .wwp-subtitle {
        font-size: 2.2rem;
        font-weight: 500;
        color: #000;
        margin-bottom: 25px;
    }

    .wwp-desc {
        font-size: 1rem;
        color: #333;
        line-height: 1.6;
        max-width: 800px;
        margin: 0 auto;
    }

    /* GRID LAYOUT */
    .wwp-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* 3 Equal Columns */
        gap: 40px;
        margin-top: 40px;
    }

    /* PRODUCT CARD */
    .wwp-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        /* Optional: Add hover lift effect */
        transition: transform 0.3s ease;
    }

    .wwp-card:hover {
        transform: translateY(-10px);
    }

    /* Image Box */
    .wwp-img-box {
        width: 100%;
        height: 350px; /* Square/Vertical aspect */
        border-radius: 12px;
        overflow: hidden;
        margin-bottom: 25px;
        box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    }

    .wwp-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.6s ease;
    }

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

    /* Card Text */
    .wwp-prod-title {
        font-size: 1.25rem;
        font-weight: 700;
        color: #4a8c2a; /* Green Heading */
        margin-bottom: 15px;
    }

    .wwp-prod-desc {
        font-size: 0.95rem;
        color: #333;
        line-height: 1.6;
        margin-bottom: 25px;
        flex-grow: 1; /* Pushes button to bottom if text varies */
        padding: 0 10px;
    }

    /* Button */
    .wwp-btn {
        background-color: #1f6b36; /* Dark Green Button */
        color: #fff;
        text-decoration: none;
        padding: 12px 35px;
        border-radius: 4px;
        font-weight: 600;
        font-size: 1rem;
        transition: background 0.3s, transform 0.2s;
    }

    .wwp-btn:hover {
        background-color: #154a25;
        transform: translateY(-2px);
    }

        .catechyn-logo-home-page {
        width: 30%;
    }


    /* --- RESPONSIVE DESIGN --- */
    @media (max-width: 992px) {
        .wwp-grid {
            grid-template-columns: repeat(2, 1fr); /* 2 Columns on Tablet */
            gap: 30px;
        }
        
        /* Center last item if odd number */
        .wwp-card:last-child {
            grid-column: span 2;
            max-width: 50%;
            margin: 0 auto;
        }
    }

    @media (max-width: 768px) {
        .wwp-grid {
            grid-template-columns: 1fr; /* Stack on Mobile */
        }

        .wwp-card:last-child {
            grid-column: auto;
            max-width: 100%;
        }

        .wwp-brand-title {
            font-size: 2.8rem;
        }
        
        .wwp-subtitle {
            font-size: 1.8rem;
        }

        .wwp-img-box {
            height: 300px; /* Slightly smaller image on mobile */
        }

            .catechyn-logo-home-page {
        width: 60%;
    }
    }





/* IMPORT FONTS: Playfair (Serif) & Poppins (Sans-Serif for body) */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&family=Poppins:wght@300;400;500&display=swap');

:root {
    --info-bg-color: #bff44b;
    /* The specific lime/olive green from the image */
    --text-dark: #1f2e10;
    /* Dark green/black for text */
    --white: #ffffff;
    --font-serif: 'Playfair Display', serif;
    --font-sans: 'Poppins', sans-serif;
}

/* --- HERO SECTION STYLES --- */
.tea-hero {
    position: relative;
    width: 100%;
    height: 60vh;
    /* Takes up 60% of the viewport height */
    min-height: 400px;
    /* Placeholder Tea Plantation Image */
    background-image: url('images/hero-bg.webp');
    background-size: cover;
    background-position: center;
    /*background-attachment: fixed;  Parallax effect */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.hero-overlay {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2);
    /* Slight dark overlay for text readability */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
}

.hero-content {
    color: var(--white);
    max-width: 900px;
}

.hero-brand {
    font-family: var(--font-sans);
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 10px;
    display: inline-block;
    position: relative;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.leaf-icon {
    font-size: 1.5rem;
    position: absolute;
    top: -10px;
    right: -10px;
    color: #bfff00;
}

.hero-title {
    font-family: var(--font-serif);
    /* Matching the Serif style */
    font-size: 2.2rem;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 1px;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
    margin-top: 10px;
    text-transform: uppercase;
}

/* --- INFO SECTION STYLES --- */
.info-section {
    background-color: var(--info-bg-color);
    padding: 80px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.info-container {
    max-width: 900px;
}

.info-section .info-heading {
    font-family: var(--font-sans);
    /* Clean sans-serif title */
    color: #111;
    font-size: 2.2rem;
    font-weight: 400;
    margin-bottom: 30px;
    letter-spacing: 0.5px;
}

.info-text {
    font-family: var(--font-sans);
    color: var(--text-dark);
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 25px;
    font-weight: 400;
}

/* --- ANIMATION CLASSES --- */
.fade-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered Delays */
.delay-1 {
    transition-delay: 0.2s;
}

.delay-2 {
    transition-delay: 0.4s;
}

/* --- RESPONSIVE MEDIA QUERIES --- */
@media (max-width: 768px) {
    .tea-hero {
        height: 50vh;
    }

    .hero-brand {
        font-size: 2.2rem;
    }

    .hero-title {
        font-size: 1.4rem;
    }

    .info-section {
        padding: 50px 20px;
    }

    .info-heading {
        font-size: 1.6rem;
        margin-bottom: 20px;
    }

    .info-text {
        font-size: 0.95rem;
        line-height: 1.6;
    }
}


/* --- GOODNESS SECTION STYLES --- */
.goodness-section {
    background-color: #ffffff;
    /* White background as per image */
    padding: 80px 20px;
    color: #222;
}

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

.goodness-heading {
    text-align: center;
    font-family: 'Poppins', sans-serif;
    font-size: 2.5rem;
    font-weight: 500;
    margin-bottom: 60px;
    color: #111;
}

.goodness-content {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    /* Image takes less space, text takes more */
    gap: 50px;
    align-items: center;
    /* Center vertically */
}

/* Image Wrapper */
.goodness-image-wrapper {
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    height: 100%;
    min-height: 400px;
}

.leaf-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

/* Hover effect on image */
.goodness-image-wrapper:hover .leaf-image {
    transform: scale(1.05);
}

/* Features Grid */
.goodness-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* Two columns for features */
    gap: 40px;
}

/* Feature Items */
.feature-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

/* Make the 3rd item span full width to match layout balance if needed, 
           or keep grid. In the image provided, it looks like a 2-column grid 
           where the 3rd item sits on the next row. */
.feature-item:nth-child(3) {
    grid-column: 1 / -1;
    /* Spans across both columns */
    margin-top: 20px;
}

/* Icons */
.feature-icon {
    background-color: #5c8037;
    /* Dark Olive Green from image icons */
    min-width: 50px;
    height: 50px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    /* Prevent icon from shrinking */
}

.feature-text h3 {
    font-family: 'Poppins', sans-serif;
    color: #3f6020;
    /* Dark Green Heading */
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 10px;
}

.feature-text p {
    font-family: 'Poppins', sans-serif;
    color: #555;
    font-size: 0.95rem;
    line-height: 1.6;
}

/* --- RESPONSIVE ADJUSTMENTS --- */
@media (max-width: 900px) {
    .goodness-content {
        grid-template-columns: 1fr;
        /* Stack Image on top of Text */
    }

    .goodness-image-wrapper {
        min-height: 300px;
        margin-bottom: 30px;
    }
}

@media (max-width: 600px) {
    .goodness-features {
        grid-template-columns: 1fr;
        /* Stack features vertically */
    }

    .feature-item:nth-child(3) {
        grid-column: auto;
    }

    .goodness-heading {
        font-size: 1.8rem;
    }
}


/* --- CATECHINS SECTION STYLES --- */
.catechins-section {
    background-color: #ffffff;
    padding: 80px 20px 100px;
    /* Extra padding at bottom for spacing */
    color: #111;
}

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

/* Heading Style */
.catechins-heading {
    text-align: center;
    font-family: 'Poppins', sans-serif;
    /* Matches the clean sans-serif in image */
    font-size: 2.5rem;
    font-weight: 500;
    margin-bottom: 60px;
    color: #000;
    line-height: 1.3;
}

/* Grid Layout */
.catechins-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* 3 Equal columns */
    gap: 30px;
    align-items: start;
}

/* Individual Card */
.catechin-card {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Image Styling */
.card-image-wrapper {
    width: 100%;
    height: 220px;
    /* Fixed height for uniformity */
    overflow: hidden;
    border-radius: 12px;
    /* Smooth rounded corners like the image */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

/* Hover Effects */
.card-image-wrapper:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.card-image-wrapper:hover .card-img {
    transform: scale(1.08);
    /* Subtle zoom on hover */
}

/* Text Styling */
.card-content {
    text-align: left;
    /* Left align text inside cards */
}

.card-content h3 {
    font-family: 'Poppins', sans-serif;
    font-size: 1.3rem;
    font-weight: 500;
    color: #111;
    margin-bottom: 12px;
}

.card-content p {
    font-family: 'Poppins', sans-serif;
    font-size: 0.95rem;
    line-height: 1.6;
    color: #333;
    font-weight: 400;
}

/* --- RESPONSIVE MEDIA QUERIES --- */
@media (max-width: 900px) {
    .catechins-grid {
        grid-template-columns: repeat(2, 1fr);
        /* 2 columns on tablets */
    }
}

@media (max-width: 600px) {
    .catechins-grid {
        grid-template-columns: 1fr;
        /* Stack vertically on mobile */
        gap: 50px;
    }

    .catechins-heading {
        font-size: 1.8rem;
        margin-bottom: 40px;
    }

    .card-image-wrapper {
        height: 200px;
    }
}


/* --- LEAF TO LAB STYLES --- */
.leaf-lab-section {
    display: flex;
    width: 100%;
    min-height: 100vh;
    /* Takes full viewport height for impact */
    background-color: #ffffff;
    overflow: hidden;
}

/* LEFT SIDE (Image) */
.leaf-lab-left {
    flex: 0 0 35%;
    /* Fixed width: 35% of screen */
    position: relative;
    background-color: #e6f0c2;
    /* Fallback color */
}

.vertical-leaf-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* RIGHT SIDE (Content) */
.leaf-lab-right {
    flex: 1;
    /* Takes remaining space */
    padding: 80px 60px;
    display: flex;
    align-items: center;
    /* Vertically center content */
}

.lab-content-wrapper {
    max-width: 1000px;
}

/* Heading */
.lab-heading {
    font-family: 'Poppins', sans-serif;
    font-size: 2.8rem;
    font-weight: 500;
    color: #111;
    margin-bottom: 60px;
    line-height: 1.2;
    max-width: 800px;
}

/* Process Grid (3 Columns) */
.process-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

/* Individual Step Styling */
.process-step {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Thumbnail Images */
.step-img-box {
    width: 100%;
    aspect-ratio: 1 / 1;
    /* Makes them perfect squares */
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.step-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.step-img-box:hover .step-img {
    transform: scale(1.1);
}

/* Text Styling */
.process-step h3 {
    font-family: 'Poppins', sans-serif;
    font-size: 1.2rem;
    font-weight: 500;
    color: #222;
    margin-bottom: 5px;
}

.process-step p {
    font-family: 'Poppins', sans-serif;
    font-size: 0.9rem;
    line-height: 1.6;
    color: #444;
}

/* --- RESPONSIVE DESIGN --- */
@media (max-width: 1100px) {
    .leaf-lab-section {
        flex-direction: column;
        /* Stack vertically */
        height: auto;
        min-height: auto;
    }

    .leaf-lab-left {
        width: 100%;
        height: 300px;
        /* Banner style on tablet */
    }

    .leaf-lab-right {
        padding: 60px 30px;
    }
}

@media (max-width: 768px) {
    .process-grid {
        grid-template-columns: 1fr;
        /* Single column stack */
        gap: 50px;
    }

    .lab-heading {
        font-size: 2rem;
        margin-bottom: 40px;
    }

    .step-img-box {
        width: 100%;
        height: 250px;
        /* Rectangular on mobile */
        aspect-ratio: auto;
    }
}

/* --- SCIENCE BANNER STYLES --- */
.science-banner {
    position: relative;
    width: 100%;
    height: 60vh;
    /* Takes up 60% of viewport height */
    min-height: 400px;

    /* High-Res Green Tea Leaves Background */
    background-image: url('images/science-banner.webp');
    background-size: cover;
    background-position: center;
    /* background-attachment: fixed;  CREATES THE PARALLAX EFFECT */
    background-repeat: no-repeat;

    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Dark overlay to ensure text is readable */
.banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.4));
    z-index: 1;
}

.banner-content {
    position: relative;
    z-index: 2;
    /* Sits on top of overlay */
    padding: 0 20px;
    max-width: 1200px;
    text-align: center;
}

.science-title {
    font-family: 'Poppins', sans-serif;
    font-size: 3rem;
    font-weight: 700;
    color: #ffffff;
    text-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    letter-spacing: 1px;
    line-height: 1.2;

    /* Initial state for animation */
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* Animation Trigger State */
.science-title.is-visible {
    opacity: 1;
    transform: scale(1);
}

/* --- RESPONSIVE DESIGN --- */
@media (max-width: 1024px) {
    .science-banner {
        background-attachment: scroll;
        /* Disable parallax on tablets/mobile for performance */
        height: 50vh;
    }

    .science-title {
        font-size: 2.5rem;
    }
}

@media (max-width: 600px) {
    .science-banner {
        height: 40vh;
        min-height: 250px;
    }

    .science-title {
        font-size: 1.8rem;
        /* Smaller font for mobile */
        line-height: 1.3;
    }
}


/* --- SCIENCE DETAILS STYLES --- */
.science-details-section {
    background-color: #ffffff;
    padding: 100px 20px;
    overflow: visible;
    /* Allows icons to pop out if needed */
}

.details-container {
    max-width: 1100px;
    margin: 0 auto;
}

/* --- STATS GRID --- */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 100px;
    /* Space between cards and circles */
}

/* --- UPDATED CARD STYLES --- */
.stat-card {
    background: #fff;
    /* THICKER TOP BORDER HERE: */
    border: 2px solid #a4c935;
    /* Standard green border for sides/bottom */
    border-top: 6px solid #a4c935;
    /* Thicker top accent border */
    border-radius: 12px;
    /* Slightly softer corners */
    padding: 50px 25px 40px;
    /* Increased padding for more space */
    position: relative;
    margin-top: 35px;
    /* INCREASED HEIGHT HERE: */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.stat-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(164, 201, 53, 0.25);
}

/* Floating Icon Wrapper */
.stat-icon-wrapper {
    position: absolute;
    top: -30px;
    /* Adjusted to sit perfectly on the thicker border */
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    /* Slightly bigger icon circle */
    height: 60px;
    /* Slightly bigger icon circle */
    background-color: #a4c935;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: bold;
    font-size: 1.4rem;
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
    border: 4px solid #ffffff;
    /* Adds a white ring to separate it from the bar */
}

.stat-symbol {
    font-family: 'Poppins', sans-serif;
    font-size: 1.4rem;
}

.stat-card h3 {
    font-family: 'Poppins', sans-serif;
    font-size: 1.2rem;
    font-weight: 500;
    color: #111;
    margin-bottom: 15px;
    margin-top: 10px;
}

.stat-card p {
    font-family: 'Poppins', sans-serif;
    font-size: 0.9rem;
    color: #444;
    line-height: 1.6;
}

/* --- CIRCLES GRID --- */
.circles-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 60px;
    align-items: start;
}

.circle-feature {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.circle-image-box {
    width: 300px;
    height: 300px;
    border-radius: 50%;
    /* Makes it a perfect circle */
    overflow: hidden;
    margin-bottom: 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    transition: transform 0.5s ease;
}

.circle-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.circle-feature:hover .circle-img {
    transform: scale(1.1);
}

.circle-feature h4 {
    font-family: 'Poppins', sans-serif;
    font-size: 1.3rem;
    color: #4f7a28;
    /* Darker green for headings */
    margin-bottom: 15px;
    font-weight: 500;
}

.circle-feature p {
    font-family: 'Poppins', sans-serif;
    font-size: 0.95rem;
    color: #333;
    line-height: 1.6;
    max-width: 400px;
    /* Limits text width for readability */
}

/* --- RESPONSIVE --- */
@media (max-width: 900px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .stat-card:last-child {
        grid-column: span 2;
        /* Center last card on tablet */
        max-width: 50%;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 768px) {
    .stats-grid {
        grid-template-columns: 1fr;
        /* Stack vertically */
        gap: 40px;
    }

    .stat-card:last-child {
        grid-column: auto;
        max-width: 100%;
    }

    .circles-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .circle-image-box {
        width: 250px;
        height: 250px;
    }
}


/* --- PRODUCT SHOWCASE STYLES --- */
.product-showcase-section {
    position: relative;
    background-color: #f8fcf8;
    /* Very subtle off-white/green tint */
    padding: 100px 20px;
    overflow: hidden;
}

/* Decorative Elements Positioning */
.deco-leaf-left {
    position: absolute;
    top: 0%;
    left: -150px;
    width: 32%;
    height: 100%;
    opacity: 1;
    z-index: 0;
    pointer-events: none;
}

.deco-powder-top {
    position: absolute;
    top: -50px;
    right: -50px;
    width: 250px;
    height: 250px;
    opacity: 1;
    z-index: 0;
    border-radius: 50%;
    overflow: hidden;
    pointer-events: none;
}

.deco-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Container */
.product-container {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    /* Content sits above decorations */
}

/* Header Styles */
.product-header {
    text-align: center;
    margin-bottom: 70px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.brand-logo-text {
    font-family: 'Poppins', sans-serif;
    font-size: 3.5rem;
    font-weight: 700;
    color: #1a6b0a;
    /* Brand Green */
    margin-bottom: 10px;
}

.highlight-n {
    color: #4a8a2a;
    /* Slightly lighter green for the N */
}

.section-title {
    font-family: 'Playfair Display', serif;
    font-size: 2.5rem;
    color: #222;
    margin-bottom: 25px;
    font-weight: 500;
}

.section-desc {
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    color: #555;
    line-height: 1.6;
}

/* Grid Styles */
.products-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

/* Product Card */
.product-card {
    padding: 30px;
    border-radius: 15px;
    /* Soft rounding */
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.product-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}

.product-title-top {
    font-family: 'Playfair Display', serif;
    font-size: 1.8rem;
    color: #1a6b0a;
    margin-bottom: 20px;
    font-weight: 500;
}

/* Image Box */
.product-img-box {
    width: 100%;
    height: 250px;
    margin-bottom: 25px;
    overflow: hidden;
    background-color: #f0f0f0;
}

.prod-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Ensures image fills box nicely */
    transition: transform 0.5s ease;
}

.product-card:hover .prod-img {
    transform: scale(1.08);
}

/* Info Section */
.product-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-grow: 1;
}

.prod-desc {
    font-family: 'Poppins', sans-serif;
    font-size: 0.9rem;
    color: #444;
    line-height: 1.6;
    margin-bottom: 20px;
}

.prod-benefits {
    list-style: none;
    padding: 0;
    margin-bottom: 30px;
    text-align: left;
    width: 100%;
    padding-left: 10px;
}

.prod-benefits li {
    font-family: 'Poppins', sans-serif;
    font-size: 0.85rem;
    color: #333;
    margin-bottom: 8px;
    display: flex;
    align-items: flex-start;
}

/* Button Style */
.shop-btn {
    background-color: #1a6b0a;
    color: #fff;
    text-decoration: none;
    padding: 12px 35px;
    border-radius: 50px;
    /* Pill shape */
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: 1px;
    transition: background-color 0.3s ease, transform 0.2s ease;
    margin-top: auto;
    /* Pushes button to bottom */
}

.shop-btn:hover {
    background-color: #268c12;
    transform: scale(1.05);
}

/* --- RESPONSIVE DESIGN --- */
@media (max-width: 900px) {
    .products-grid {
        grid-template-columns: repeat(2, 1fr);
        /* 2 Columns on Tablet */
        gap: 30px;
    }

    .product-card:last-child {
        grid-column: span 2;
        /* Center the last item */
        max-width: 50%;
        margin: 0 auto;
    }

    .brand-logo-text {
        font-size: 3rem;
    }
}

@media (max-width: 700px) {
    .products-grid {
        grid-template-columns: 1fr;
        /* 1 Column on Mobile */
    }

    .product-card:last-child {
        grid-column: auto;
        max-width: 100%;
    }

    .brand-logo-text {
        font-size: 2.5rem;
    }

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

    /* Hide decoration on mobile to save space */
    .deco-leaf-left,
    .deco-powder-top {
        display: none;
    }
}



/* --- TESTIMONIALS SECTION STYLES --- */
.testimonials-section {
    padding: 100px 20px;
    /* Green Bokeh Background - Similar to the image */
    background-image: url('images/greenpbg.webp');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    /* Parallax effect */
    position: relative;
}

/* Optional: Add a light overlay to ensure text readability */
.testimonials-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #a9f00fd9;
    /* Subtle white overlay */
    pointer-events: none;
}

.testimonials-container {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    /* Place content above overlay */
    text-align: center;
}

/* Reuse existing typography styles */
.section-title {
    font-family: 'Playfair Display', serif;
    font-size: 2.5rem;
    color: #111;
    /* Dark text */
    margin-bottom: 25px;
    font-weight: 600;
}

.section-desc {
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    color: #333;
    /* Darker text for better contrast */
    line-height: 1.6;
    max-width: 800px;
    margin: 0 auto 70px;
}

/* Grid Layout */
.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* Two equal columns */
    gap: 60px;
    align-items: center;
}

/* Testimonial Item */
.testimonial-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* Left align content */
    text-align: center;
}

/* Circular Image */
.img-circle-wrapper {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 30px;
    border: 5px solid rgba(255, 255, 255, 0.3);
    /* Subtle border */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    transition: transform 0.4s ease, border-color 0.4s ease;
    margin: auto;
    margin-bottom: 30px;
}

.person-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

/* Hover Effects */
.testimonial-item:hover .img-circle-wrapper {
    transform: scale(1.02);
    border-color: rgba(255, 255, 255, 0.6);
}

.testimonial-item:hover .person-img {
    transform: scale(1.08);
}

/* Text Content */
.testimonial-text h3 {
    font-family: 'Poppins', sans-serif;
    font-size: 1.4rem;
    font-weight: 600;
    color: #111;
    margin-bottom: 15px;
}

blockquote {
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    line-height: 1.7;
    color: #444;
    font-style: italic;
    margin: 0;
    border: none;
    /* Remove default blockquote border */
    padding: 0;
}

/* --- RESPONSIVE DESIGN --- */
@media (max-width: 900px) {
    .testimonials-grid {
        gap: 40px;
    }

    .img-circle-wrapper {
        width: 250px;
        height: 250px;
    }

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

@media (max-width: 768px) {
    .testimonials-grid {
        grid-template-columns: 1fr;
        /* Stack vertically on mobile */
        gap: 60px;
    }

    /* Center align on mobile */
    .testimonial-item {
        align-items: center;
        text-align: center;
    }

    .img-circle-wrapper {
        width: 220px;
        height: 220px;
    }

    .section-desc {
        margin-bottom: 50px;
    }
}



/* --- QUALITY SECTION STYLES --- */
.quality-section {
    position: relative;
    padding: 100px 20px;
    /* Green Blurry Background Image */
    background-image: url('images/science-banner.webp');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    /* Parallax Effect */
    background-repeat: no-repeat;
}

/* Dark overlay to make the main white text pop against bright leaves */
.quality-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    /* 40% darkness */
    z-index: 1;
}

.quality-container {
    position: relative;
    z-index: 2;
    /* Sits above overlay */
    max-width: 1200px;
    margin: 0 auto;
}

.quality-heading {
    /* text-align: center; */
    font-family: 'Poppins', sans-serif;
    /* Matches image header */
    font-size: 2.5rem;
    color: #ffffff;
    margin-bottom: 70px;
    font-weight: 500;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

/* --- GRID LAYOUT --- */
.quality-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

/* --- DARK CARD STYLING --- */
.quality-card {
    background-color: #121e11;
    /* Very dark green/black background */
    /* THICK TOP BORDER */
    border-top: 8px solid #a4c935;
    /* Bright Lime Green */
    border-right: 1px solid #333;
    border-bottom: 1px solid #333;
    border-left: 1px solid #333;
    border-radius: 8px;
    padding: 40px 25px 30px;
    /* Top padding creates space for badge */
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.quality-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5);
}

/* NUMBER BADGE (1, 2, 3) */
.number-badge {
    position: absolute;
    top: -25px;
    /* Pulls it up to sit on the border */
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 50px;
    background-color: #a4c935;
    /* Lime Green */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 1.2rem;
    color: #121e11;
    /* Dark text for contrast */
    border: 4px solid #121e11;
    /* Dark border to match card bg */
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
}

/* IMAGE INSIDE CARD */
.card-img-box {
    width: 100%;
    height: 180px;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 25px;
}

.q-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

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

/* TEXT CONTENT */
.card-text-content h3 {
    font-family: 'Poppins', sans-serif;
    font-size: 1.25rem;
    color: #ffffff;
    /* White title */
    margin-bottom: 15px;
    font-weight: 500;
}

.card-text-content p {
    font-family: 'Poppins', sans-serif;
    font-size: 0.95rem;
    color: #cccccc;
    /* Light grey text */
    line-height: 1.6;
}

/* --- RESPONSIVE DESIGN --- */
@media (max-width: 992px) {
    .quality-grid {
        grid-template-columns: repeat(2, 1fr);
        /* 2 columns on tablet */
        gap: 40px;
    }

    .quality-card:last-child {
        grid-column: span 2;
        /* Center the last card */
        max-width: 50%;
        margin: 0 auto;
    }
}

@media (max-width: 768px) {
    .quality-grid {
        grid-template-columns: 1fr;
        /* Stack vertically on mobile */
    }

    .quality-card:last-child {
        grid-column: auto;
        max-width: 100%;
    }

    .quality-heading {
        font-size: 2rem;
        margin-bottom: 50px;
    }
}


/* --- CTA & CONTACT SECTION STYLES --- */
.cta-contact-section {
    background-color: #a3cc39;
    /* Bright Lime Green Background */
    padding-top: 80px;
    padding-bottom: 20px;
    font-family: 'Poppins', sans-serif;
}

/* --- CTA PART --- */
.cta-container {
    max-width: 1000px;
    margin: 0 auto 60px;
    text-align: center;
    padding: 0 20px;
}

.cta-heading {
    font-size: 2.5rem;
    font-weight: 500;
    color: #1a2e10;
    /* Dark Green Text */
    margin-bottom: 25px;
}

.cta-text {
    font-size: 1rem;
    color: #1a2e10;
    line-height: 1.6;
    margin-bottom: 30px;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

/* CTA Buttons */
.cta-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 30px;
}

.btn-dark {
    background-color: #2b3d1b;
    /* Dark Green Button */
    color: #fff;
    padding: 12px 30px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 500;
    transition: transform 0.2s, background 0.2s;
}

.btn-outline {
    background-color: transparent;
    color: #1a2e10;
    border: 1px solid #1a2e10;
    padding: 12px 30px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 500;
    transition: background 0.2s, color 0.2s;
}

.btn-dark:hover {
    background-color: #15220c;
    transform: translateY(-2px);
}

.btn-outline:hover {
    background-color: #1a2e10;
    color: #fff;
}

.cta-subtext {
    font-size: 0.9rem;
    color: #1a2e10;
    font-weight: 500;
}

/* --- CONTACT CARD --- */
.contact-card-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.contact-card {
    background-color: #155e39;
    /* Deep Green Card Background */
    border-radius: 20px;
    padding: 50px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* Split layout */
    gap: 60px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
    color: #fff;
}

/* LEFT FORM COLUMN */
.form-title {
    font-size: 1.8rem;
    margin-bottom: 30px;
    font-weight: 600;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.input-group {
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
}

.input-group label {
    font-size: 0.9rem;
    margin-bottom: 8px;
    color: #dceb82;
    /* Light Lime Label */
}

.form-input,
.form-textarea {
    padding: 12px;
    border-radius: 6px;
    border: none;
    outline: none;
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    transition: box-shadow 0.3s ease;
}

.form-textarea {
    height: 120px;
    resize: vertical;
}

.form-input:focus,
.form-textarea:focus {
    box-shadow: 0 0 0 3px rgba(164, 201, 53, 0.5);
    /* Green Glow */
}

.submit-btn {
    background-color: #bce02d;
    /* Bright Lime Green */
    color: #155e39;
    /* Dark Text */
    border: none;
    padding: 12px 40px;
    font-size: 1rem;
    font-weight: 700;
    border-radius: 6px;
    cursor: pointer;
    transition: transform 0.2s, background 0.2s;
}

.submit-btn:hover {
    background-color: #fff;
    transform: scale(1.05);
}

/* RIGHT INFO COLUMN */
.info-heading {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1.1;
    color: #bce02d;
    /* Lime Heading */
}

.info-desc {
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 40px;
    opacity: 0.9;
}

/* Contact Details Grid */
.contact-details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.contact-detail-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.icon-box {
    background-color: #bce02d;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #155e39;
    /* Dark icon color */
    flex-shrink: 0;
}

.detail-text h4 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 5px;
}

.detail-text p {
    font-size: 0.9rem;
    line-height: 1.4;
    opacity: 0.9;
}

/* Footer Strip */
.footer-strip {
    text-align: center;
    margin-top: 40px;
    color: #1a2e10;
    font-size: 0.8rem;
    opacity: 0.7;
}

/* --- RESPONSIVE DESIGN --- */
@media (max-width: 900px) {
    .contact-card {
        grid-template-columns: 1fr;
        /* Stack form and info vertically */
        padding: 30px;
        gap: 50px;
    }

    .info-column {
        order: -1;
        /* Move Info to top on mobile (optional, remove if you want form first) */
    }

    /* Keeping visual order: Form first then Info as per desktop for simplicity? 
           Actually, typically "Get in Touch" text is nice to read first. 
           Let's leave default order. */
    .info-column {
        order: 0;
    }

    .info-heading {
        font-size: 2.5rem;
    }
}

@media (max-width: 600px) {
    .cta-heading {
        font-size: 1.8rem;
    }

    .cta-buttons {
        flex-direction: column;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    /* Stack names vertically */
    .contact-details-grid {
        grid-template-columns: 1fr;
    }

    /* Stack details vertically */

    .contact-card {
        border-radius: 10px;
        padding: 20px;
    }
}


/* --- FOOTER STYLES --- */
.site-footer {
    background-color: #022c0d;
    /* Deep Forest Green (matches image) */
    color: #ffffff;
    padding: 80px 20px 20px;
    font-family: 'Poppins', sans-serif;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    /* Brand column is slightly wider */
    gap: 40px;
    padding-bottom: 60px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* --- BRAND COLUMN --- */
.footer-brand-col {
    display: flex;
    flex-direction: column;
    gap: 40px;
    /* Space between the two logos */
    align-items: flex-start;
}

/* Welniva Logo Styling */
.footer-logo-welniva {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.welniva-text {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.w-main {
    font-size: 1.5rem;
    letter-spacing: 3px;
    font-weight: 400;
    font-family: 'Playfair Display', serif;
    /* Matching header font */
}

.w-sub {
    font-size: 0.7rem;
    letter-spacing: 4px;
    color: #a4c935;
    /* Light green accent */
    margin-top: 5px;
}

/* CatechyN Logo Styling */
.footer-logo-catechyn {
    font-family: 'Poppins', sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    color: #ffffff;
    position: relative;
    display: flex;
    align-items: center;
}

.cat-leaf {
    font-size: 1.5rem;
    color: #a4c935;
    margin: 0 2px;
    transform: translateY(-10px) rotate(15deg);
    /* Position the leaf */
}

/* --- LINKS COLUMNS --- */
.footer-links-col {
    display: flex;
    flex-direction: column;
}

.footer-heading {
    color: #dceb82;
    /* The specific lime/yellow tint from image */
    font-size: 1.3rem;
    margin-bottom: 25px;
    font-weight: 600;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 15px;
}

.footer-links a {
    color: #ffffff;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 300;
    transition: all 0.3s ease;
    display: inline-block;
    opacity: 0.9;
}

/* Hover Effect: Slide right and turn green */
.footer-links a:hover {
    color: #a4c935;
    transform: translateX(5px);
    opacity: 1;
}

/* --- FOOTER BOTTOM --- */
.footer-bottom {
    text-align: center;
    padding-top: 20px;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.4);
}

/* --- RESPONSIVE DESIGN --- */
@media (max-width: 900px) {
    .footer-container {
        grid-template-columns: 1fr 1fr;
        /* 2x2 Grid on Tablet */
        gap: 50px;
    }

    .footer-brand-col {
        align-items: center;
        /* Center logos on tablet */
        grid-column: span 2;
        /* Brand takes full width */
        flex-direction: row;
        justify-content: space-around;
    }
}

@media (max-width: 600px) {
    .footer-container {
        grid-template-columns: 1fr;
        /* Stack vertically on mobile */
        gap: 40px;
        text-align: center;
    }

    .footer-brand-col {
        flex-direction: column;
        gap: 40px;
        grid-column: auto;
    }

    /* Center link items on mobile */
    .footer-links-col {
        align-items: center;
    }
}


/* --- HEALTH BENEFITS SECTION STYLES --- */
.health-benefits-section {
    background-color: #c6f059;
    /* Bright Lime Green Background */
    padding: 100px 20px;
    color: #1a2e10;
    /* Dark Green/Black Text */
    overflow: hidden;
}

.benefits-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* Split layout */
    gap: 60px;
    align-items: center;
}

/* --- CONTENT SIDE --- */
.benefits-content {
    padding-right: 20px;
}

.benefits-heading {
    font-family: 'Poppins', sans-serif;
    font-size: 2.8rem;
    font-weight: 500;
    margin-bottom: 50px;
    line-height: 1.2;
}

.benefits-list {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

/* Individual Item */
.benefit-item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

/* Icons */
.benefit-icon {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Using outline style without circle background to match image exactly */
    color: #1a2e10;
    border: 2px solid #1a2e10;
    /* Optional: remove if you want just the icon */
    border-radius: 50%;
    /* Makes the icon container circular if border is kept */
    /* If you want strictly just the icon as per image, remove border/radius 
           and increase svg size slightly. Keeping border for clarity. */
    border: none;
    /* Resetting to match image style (just icon floating) */
    width: auto;
    height: auto;
}

.benefit-icon svg {
    width: 40px;
    height: 40px;
}

/* Text */
.benefit-text h3 {
    font-family: 'Poppins', sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 10px;
    color: #1a2e10;
}

.benefit-text p {
    font-family: 'Poppins', sans-serif;
    font-size: 0.95rem;
    line-height: 1.6;
    color: #2b3d1b;
    max-width: 500px;
}

/* --- IMAGE SIDE --- */
.benefits-image-wrapper {
    width: 100%;
    height: 600px;
    /* Tall vertical image */
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    position: relative;
}

.benefits-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.benefits-image-wrapper:hover .benefits-img {
    transform: scale(1.05);
}

/* --- RESPONSIVE DESIGN --- */
@media (max-width: 992px) {
    .benefits-heading {
        font-size: 2.2rem;
    }

    .benefits-image-wrapper {
        height: 500px;
    }
}

@media (max-width: 768px) {
    .benefits-container {
        grid-template-columns: 1fr;
        /* Stack vertically on mobile */
        gap: 50px;
    }

    .benefits-image-wrapper {
        height: 350px;
        /* Shorter image on mobile */
        order: -1;
        /* Optional: Move image to top if desired, remove to keep at bottom */
    }

    /* If you want image at bottom (default), remove 'order: -1' */

    .benefits-heading {
        font-size: 2rem;
        margin-bottom: 30px;
        text-align: left;
    }

    .benefits-content {
        padding-right: 0;
    }
}


.how-to-use-section {
    background-color: #ffffff;
    padding: 100px 20px;
    font-family: 'Poppins', sans-serif;
}

.usage-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    /* Image takes less space than cards */
    gap: 60px;
    align-items: center;
}

/* --- IMAGE LEFT --- */
.usage-image-wrapper {
    width: 100%;
    height: 600px;
    /* Tall vertical format */
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    position: relative;
}

.usage-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.usage-image-wrapper:hover .usage-img {
    transform: scale(1.05);
}

/* --- CONTENT RIGHT --- */
.usage-heading {
    font-size: 2.5rem;
    font-weight: 500;
    color: #111;
    margin-bottom: 50px;
}

/* Cards Grid Layout */
.cards-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* Two columns */
    gap: 40px 30px;
    /* Vertical gap bigger for floating icons */
    padding-top: 20px;
    /* Space for top icons */
}

/* --- CARD STYLING --- */
.usage-card {
    background: #fff;
    border: 2px solid #bce02d;
    /* Lime Green Border */
    border-top: 6px solid #a4c935;

    border-radius: 8px;
    padding: 40px 25px 30px;
    position: relative;
    text-align: left;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* The 3rd card spans across both columns */
.usage-card.full-width {
    grid-column: span 2;
}

.usage-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(188, 224, 45, 0.2);
}

/* Floating Icon on Top Border */
.usage-icon-box {
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 50px;
    background-color: #bce02d;
    /* Lime Green Circle */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1a2e10;
    /* Dark Icon Color */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    border: 4px solid #ffffff;
    /* White ring to separate from border line */
}

.usage-card h3 {
    font-size: 1.2rem;
    font-weight: 500;
    margin-bottom: 15px;
    color: #1a2e10;
    margin-top: 10px;
}

.usage-card p {
    font-size: 0.9rem;
    line-height: 1.6;
    color: #444;
}

/* --- RESPONSIVE DESIGN --- */
@media (max-width: 992px) {
    .usage-container {
        grid-template-columns: 1fr;
        /* Stack vertically */
        gap: 50px;
    }

    .usage-image-wrapper {
        height: 400px;
        /* Shorter image on tablet */
        max-width: 600px;
        margin: 0 auto;
    }

    .usage-heading {
        text-align: center;
    }
}

@media (max-width: 600px) {
    .cards-layout {
        grid-template-columns: 1fr;
        /* Stack cards vertically */
        gap: 50px;
    }

    .usage-card.full-width {
        grid-column: span 1;
        /* Reset span */
    }

    .usage-heading {
        font-size: 2rem;
    }
}


/* --- SERUM HIGHLIGHT STYLES --- */
.serum-highlight-section {
    background-color: #ffffff;
    padding: 80px 20px;
    font-family: 'Poppins', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
}

.highlight-container {
    max-width: 1100px;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* 50/50 Split */
    gap: 60px;
    align-items: center;
}

/* --- CONTENT LEFT --- */
.highlight-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* Badge Style */
.category-badge {
    background-color: #d1f2eb;
    /* Light Mint Green matches image */
    color: #1a5236;
    /* Dark Green Text */
    font-size: 0.8rem;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 4px;
    margin-bottom: 20px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    letter-spacing: 0.5px;
}

.badge-icon {
    display: flex;
    align-items: center;
}

/* Heading Style */
.highlight-title {
    font-family: 'Poppins', sans-serif;
    font-size: 2.8rem;
    font-weight: 600;
    color: #000000;
    line-height: 1.2;
    margin-bottom: 15px;
}

/* Subtitle Style */
.highlight-subtitle {
    font-size: 1.5rem;
    color: #444;
    font-weight: 400;
    margin-bottom: 35px;
}

/* Button Style */
.buy-now-btn {
    background-color: #1f6b36;
    /* Welniva Brand Green */
    color: #ffffff;
    text-decoration: none;
    padding: 14px 32px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 4px;
    /* Slight rounding like image */
    transition: background-color 0.3s ease, transform 0.2s ease;
    letter-spacing: 0.5px;
}

.buy-now-btn:hover {
    background-color: #144d25;
    transform: translateY(-2px);
}

/* --- IMAGE RIGHT --- */
.highlight-image-box {
    width: 100%;
    height: 500px;
    background-color: #f4f6f8;
    /* Light Gray Studio Background */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.highlight-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.highlight-image-box:hover .highlight-img {
    transform: scale(1.05);
    /* Subtle zoom on hover */
}

/* --- RESPONSIVE DESIGN --- */
@media (max-width: 900px) {
    .highlight-container {
        grid-template-columns: 1fr;
        /* Stack vertically */
        gap: 40px;
        text-align: center;
    }

    .highlight-content {
        align-items: center;
        /* Center text on mobile */
        order: 0;
        /* Text first */
    }

    .highlight-image-box {
        order: 1;
        /* Image second */
        height: 400px;
        /* Smaller height on mobile */
    }

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

    .highlight-subtitle {
        font-size: 1.2rem;
    }
}


/* --- RADIANT SKIN SECTION STYLES --- */
.radiant-skin-section {
    background-color: #ffffff;
    /* White page background */
    padding: 100px 20px;
    font-family: 'Poppins', sans-serif;
}

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

/* Heading */
.radiant-heading {
    text-align: center;
    font-size: 2.5rem;
    font-weight: 600;
    color: #000;
    margin-bottom: 60px;
}

/* Grid Layout */
.radiant-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* 3 Equal Columns */
    gap: 30px;
}

/* Card Styling */
.radiant-card {
    background-color: #f5f0f0;
    /* The specific light grayish-pink tint from image */
    padding: 40px 30px;
    border-radius: 4px;
    /* Slight rounding, boxy look */
    text-align: left;
    /* Text aligns left inside card */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.radiant-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}

/* Icon Styling */
.radiant-icon {
    width: 50px;
    height: 50px;
    background-color: #1a5236;
    /* Dark Green Circle */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    /* White SVG stroke */
    margin-bottom: 25px;
}

/* Text Styling */
.radiant-card h3 {
    font-size: 1.3rem;
    font-weight: 600;
    color: #333;
    /* Dark Grey Heading */
    margin-bottom: 15px;
}

.radiant-card p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #555;
    /* Medium Grey Body Text */
    font-weight: 400;
}

/* --- RESPONSIVE DESIGN --- */
@media (max-width: 900px) {
    .radiant-grid {
        grid-template-columns: repeat(2, 1fr);
        /* 2 Columns on Tablet */
    }

    /* Center the last card on tablet if odd number */
    .radiant-card:last-child {
        grid-column: span 2;
        max-width: 50%;
        margin: 0 auto;
        width: 100%;
        /* Ensure it fills the max-width constraint */
    }
}

@media (max-width: 600px) {
    .radiant-grid {
        grid-template-columns: 1fr;
        /* 1 Column on Mobile */
    }

    .radiant-card:last-child {
        grid-column: auto;
        max-width: 100%;
    }

    .radiant-heading {
        font-size: 2rem;
        margin-bottom: 40px;
    }
}



/* --- SCIENCE GLOW SECTION STYLES --- */
.science-glow-section {
    background-color: #1F7135;
    /* Deep Solid Green from Image */
    padding: 100px 20px;
    color: #ffffff;
    font-family: 'Poppins', sans-serif;
}

.glow-container {
    max-width: 1100px;
    margin: 0 auto;
}

/* --- TOP ROW LAYOUT --- */
.glow-top-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* Split layout */
    gap: 60px;
    align-items: center;
    margin-bottom: 80px;
    /* Space between text/image and stats */
}

/* Text Content */
.glow-heading {
    font-size: 2.2rem;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 30px;
}

.glow-paragraphs p {
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 20px;
    opacity: 0.95;
    font-weight: 300;
}

/* Image Wrapper */
.glow-image-wrapper {
    position: relative;
    width: 100%;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}

.glow-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.glow-image-wrapper:hover .glow-img {
    transform: scale(1.05);
}

/* Decoration */
.structure-overlay {
    position: absolute;
    bottom: 20px;
    left: 20px;
    opacity: 0.8;
}

/* --- BOTTOM ROW (STATS) --- */
.glow-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    /* Subtle separator line */
    padding-top: 60px;
}

.glow-stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.stat-number {
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 10px;
    letter-spacing: -1px;
}

.stat-label {
    font-size: 1.2rem;
    font-weight: 500;
    margin-bottom: 10px;
}

.stat-desc {
    font-size: 0.9rem;
    line-height: 1.5;
    opacity: 0.85;
    max-width: 250px;
}

/* --- RESPONSIVE DESIGN --- */
@media (max-width: 900px) {
    .glow-top-row {
        grid-template-columns: 1fr;
        /* Stack Text and Image */
        gap: 40px;
    }

    .glow-heading {
        font-size: 2rem;
    }

    .glow-image-wrapper {
        height: 350px;
    }
}

@media (max-width: 700px) {
    .glow-stats-grid {
        grid-template-columns: 1fr;
        /* Stack Stats Vertically */
        gap: 50px;
    }

    .glow-heading {
        font-size: 1.8rem;
    }

    .stat-number {
        font-size: 3rem;
    }
}


/* --- USAGE & INGREDIENTS STYLES --- */
.usage-ingredients-section {
    background-color: #ffffff;
    padding: 100px 20px;
    font-family: 'Poppins', sans-serif;
}

.ui-container {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 120px;
    /* Space between the two main sections */
}

/* --- SHARED ROW STYLES --- */
.ui-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* 50/50 Split */
    gap: 60px;
    align-items: center;
}

.ui-heading {
    font-size: 2.2rem;
    font-weight: 600;
    color: #000;
    margin-bottom: 25px;
    line-height: 1.2;
}

.ui-subheading {
    font-size: 0.95rem;
    color: #555;
    margin-bottom: 30px;
    line-height: 1.6;
}

/* --- IMAGES --- */
.ui-img-wrapper {
    width: 100%;
    overflow: hidden;
    border-radius: 4px;
    /* Slight rounding only */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.portrait-mode {
    /* height: 600px;  Tall portrait for model */
}

.vertical-banner {
    height: 700px;
    /* Very tall for ingredients side */
}

.ui-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.ui-img-wrapper:hover .ui-img {
    transform: scale(1.03);
}

/* --- PART 1: USAGE STEPS --- */
.steps-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    /* Gaps handled by padding/borders */
}

.step-item {
    padding: 20px 0;
}

.step-item:last-of-type {
    border-bottom: 1px solid #ddd;
}

.step-num {
    font-size: 0.8rem;
    color: #999;
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
    border-bottom: 2px solid #1c9770ff;
    padding-bottom: 6px;
}

.step-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: #222;
    margin-bottom: 5px;
}

.step-desc {
    font-size: 1.1rem;
    color: #555;
    line-height: 1.5;
}

.pro-tip-box {
    background-color: #c0f0d6;
    /* Mint Green Background */
    padding: 20px;
    margin-top: 30px;
    font-size: 0.9rem;
    color: #1a402a;
    line-height: 1.5;
    border-radius: 2px;
}

/* --- PART 2: INGREDIENTS CARDS --- */
.ingredient-cards {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 30px;
}

.ing-card {
    background: #ffffff;
    border: 1px solid #eee;
    border-left: 5px solid #1f6b36;
    /* Green Left Accent Border */
    padding: 20px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.03);
    transition: transform 0.3s ease;
}

.ing-card:hover {
    transform: translateX(5px);
}

.ing-card h4 {
    font-size: 1.2rem;
    font-weight: 600;
    color: #222;
    margin-bottom: 8px;
}

.ing-card p {
    font-size: 1rem;
    color: #555;
    line-height: 1.5;
}

/* BADGES */
.badges-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.badge {
    background-color: #d1f2eb;
    /* Light Mint */
    color: #1f6b36;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 4px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.badge svg {
    margin-right: 6px;
    margin-top: 1px;
}

/* --- RESPONSIVE DESIGN --- */
@media (max-width: 900px) {
    .ui-row {
        grid-template-columns: 1fr;
        /* Stack vertically */
        gap: 40px;
    }

    .ui-container {
        gap: 80px;
    }

    .portrait-mode,
    .vertical-banner {
        height: 400px;
        /* Shorter images on mobile */
    }

    /* Order adjustment: Image usually comes first on mobile */
    .ingredients-row .ui-image-col {
        order: -1;
        /* Puts the tea leaf image above ingredients text */
    }
}



/* --- REAL RESULTS STYLES --- */
.real-results-section {
    background-color: #ffffff;
    padding: 100px 20px;
    font-family: 'Poppins', sans-serif;
    text-align: center;
}

.results-container {
    max-width: 1000px;
    margin: 0 auto;
}

.results-heading {
    font-size: 2.5rem;
    font-weight: 600;
    color: #000;
    margin-bottom: 70px;
}

/* --- STATS ROW --- */
.stats-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin-bottom: 80px;
}

.result-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.stat-big-num {
    font-size: 3.5rem;
    font-weight: 600;
    /* Slightly softer bold */
    color: #333;
    line-height: 1;
    margin-bottom: 15px;
}

.stat-title {
    font-size: 1.1rem;
    font-weight: 500;
    /* Regular weight heading */
    color: #222;
    margin-bottom: 8px;
}

.stat-sub {
    font-size: 0.9rem;
    color: #555;
    line-height: 1.5;
    max-width: 200px;
}

/* --- REVIEWS GRID --- */
.reviews-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-bottom: 50px;
    text-align: left;
    /* Text aligns left inside boxes */
}

.review-card {
    border: 1px solid #1f6b36;
    /* Brand Green Border */
    padding: 30px 40px;
    position: relative;
    background-color: #fff;
}

/* Big Green Quote Marks */
.quote-mark-top,
.quote-mark-bottom {
    font-family: 'Times New Roman', serif;
    font-size: 4rem;
    color: #1f6b36;
    line-height: 1;
    position: absolute;
    height: 40px;
    /* Limits height to prevent layout push */
}

.quote-mark-top {
    top: -25px;
    left: 20px;
    background: #fff;
    /* Mask background line behind it */
    padding: 0 10px;
}

.quote-mark-bottom {
    bottom: -40px;
    right: 20px;
    background: #fff;
    padding: 0 10px;
    transform: rotate(180deg);
    /* Flip for closing quote style if needed, or just use closing char */
    /* Since I used text char, no rotate needed usually, but purely decorative positioning: */
    bottom: -20px;
    transform: none;
}

.review-text {
    font-size: 1rem;
    line-height: 1.6;
    color: #444;
    margin-bottom: 20px;
    margin-top: 10px;
}

.review-author {
    font-size: 0.9rem;
    font-weight: 700;
    color: #333;
    text-transform: uppercase;
}

/* --- BUTTONS --- */
.results-cta-box {
    display: flex;
    justify-content: flex-start;
    /* Aligns buttons to start of reviews or center? 
                                        Image suggests left-aligned with grid. Let's center for balance or flex-start. 
                                        Let's keep left to match the flow of reading reviews. */
    justify-content: center;
    /* Actually, centered looks best for this section */
    gap: 20px;
}

.btn-green-fill {
    background-color: #1f6b36;
    color: #fff;
    padding: 12px 25px;
    text-decoration: none;
    border-radius: 4px;
    font-weight: 500;
    transition: background 0.3s;
}

.btn-green-fill:hover {
    background-color: #154a25;
}

.btn-green-outline {
    background-color: transparent;
    color: #1f6b36;
    border: 1px solid #1f6b36;
    padding: 12px 25px;
    text-decoration: none;
    border-radius: 4px;
    font-weight: 500;
    transition: all 0.3s;
}

.btn-green-outline:hover {
    background-color: #1f6b36;
    color: #fff;
}

/* --- RESPONSIVE --- */
@media (max-width: 900px) {
    .stats-row {
        grid-template-columns: 1fr;
        /* Stack stats */
        gap: 50px;
    }

    .reviews-grid {
        grid-template-columns: 1fr;
        /* Stack reviews */
        gap: 60px;
        /* More space for the floating quotes */
    }

    .results-cta-box {
        flex-direction: column;
        /* Stack buttons */
        align-items: center;
    }

    .quote-mark-top {
        top: -20px;
    }

    .quote-mark-bottom {
        bottom: -20px;
    }
}


/* --- SERUM BANNER STYLES --- */
    .serum-banner-section {
        width: 100%;
        padding: 0;
        font-family: 'Poppins', sans-serif;
        overflow: hidden; 
    }

    .serum-banner-container {
        display: grid;
        /* 70% LEFT (Text), 30% RIGHT (Image) */
        grid-template-columns: 60% 40%; 
        width: 100%;
        /* Fixed height for desktop to fit on screen */
        height: 600px; 
    }

    /* --- LEFT SIDE (GREEN BACKGROUND) --- */
    .sb-content {
        background-color: #99d45e; /* Bright Lime Green */
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 0 80px; /* More padding since the box is wider now */
        color: #000;
    }

    /* Badge Style */
    .sb-badge {
        background-color: #dcf5c4;
        color: #1a3c20;
        font-size: 0.8rem;
        font-weight: 600;
        padding: 8px 16px;
        border-radius: 4px;
        margin-bottom: 25px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        align-self: flex-start;
    }

    .sb-icon {
        display: flex;
        align-items: center;
    }

    /* Typography */
    .sb-title {
        font-family: 'Poppins', sans-serif;
        font-size: 3rem; /* Large font looks good in the wide 70% area */
        font-weight: 600;
        line-height: 1.2;
        margin-bottom: 15px;
        color: #000;
    }

    .sb-subtitle {
        font-size: 1.3rem;
        font-weight: 400;
        color: #111;
        opacity: 0.9;
    }

    /* --- RIGHT SIDE (VERTICAL IMAGE) --- */
    .sb-image-box {
        position: relative;
        width: 100%;
        height: 100%; 
        background-color: #f0f4f8;
        overflow: hidden;
    }

    .sb-img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* Ensures image fills the vertical strip perfectly */
        object-position: center;
        transition: transform 0.6s ease;
        display: block;
    }

    .sb-image-box:hover .sb-img {
        transform: scale(1.05);
    }

    /* --- RESPONSIVE DESIGN --- */
    @media (max-width: 900px) {
        .serum-banner-container {
            /* Switch to vertical stack on mobile */
            grid-template-columns: 1fr; 
            grid-template-rows: auto 320px; /* Text fits content, Image fixed height */
            height: auto; 
        }

        .sb-content {
            padding: 40px 20px;
            text-align: center;
            align-items: center;
        }

        .sb-badge {
            align-self: center;
        }

        .sb-title {
            font-size: 2rem;
        }

        .sb-subtitle {
            font-size: 1.1rem;
        }

        .sb-image-box {
            height: 380px; /* Shorter image strip on mobile */
            width: 100%;
        }
    }


    /* --- PRODUCT DETAIL SECTION STYLES --- */
    .prod-detail-section {
        background-color: #ffffff;
        padding: 80px 0;
        font-family: 'Poppins', sans-serif;
    }

    .pd-container {
        display: grid;
        grid-template-columns: 1fr 1fr; /* 50/50 Split */
        max-width: 1200px;
        margin: 0 auto;
        /* Matches the cream background on the left in the screenshot */
        background-color: #ffffff; 
    }

    /* --- LEFT IMAGE COLUMN --- */
    .pd-image-col {

    }

    .pd-img-wrapper {
        width: 100%;
        position: relative;
    }

    .pd-img {
        width: 100%;
        height: auto;
        object-fit: contain;
        /* Optional Drop Shadow to make bottle pop */
        /* filter: drop-shadow(0 20px 30px rgba(0,0,0,0.15)); */
        transition: transform 0.5s ease;
    }

    /* .pd-img-wrapper:hover .pd-img {
        transform: scale(1.05) rotate(2deg);
    } */

    /* --- RIGHT CONTENT COLUMN --- */
    .pd-content-col {
        padding: 60px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .pd-title {
        font-size: 2.2rem;
        font-weight: 600;
        color: #000;
        margin-bottom: 20px;
        line-height: 1.2;
    }

    .pd-desc {
        font-size: 1rem;
        line-height: 1.6;
        color: #444;
        margin-bottom: 40px;
        font-weight: 400;
    }

    /* BENEFITS STACK */
    .pd-benefits-stack {
        display: flex;
        flex-direction: column;
        gap: 20px;
        margin-bottom: 40px;
    }

    .benefit-row {
        display: flex;
        align-items: stretch; /* Stretch to equal height */
        border: 1px solid #75b84f; /* Green Border */
        border-radius: 4px;
        overflow: hidden;
        background: #fff;
        transition: transform 0.3s ease;
    }

    .benefit-row:hover {
        transform: translateX(5px);
    }

    .benefit-icon-box {
        background-color: #9fd65e; /* Light Lime Green Background */
        width: 80px;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #1a402a; /* Dark Green Icon Color */
    }

    .benefit-text {
        padding: 15px 20px;
        flex-grow: 1;
    }

    .benefit-text h4 {
        font-size: 1.1rem;
        font-weight: 600;
        color: #333;
        margin-bottom: 5px;
    }

    .benefit-text p {
        font-size: 0.9rem;
        color: #555;
        line-height: 1.4;
        margin: 0;
    }

    /* ACTION AREA */
    .pd-action-area {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 15px;
        margin-top: 10px;
    }

    .pd-price {
        font-size: 1.5rem;
        font-weight: 700;
        color: #333;
    }

    .pd-buy-btn {
        background-color: #1f6b36; /* Dark Green Button */
        color: #fff;
        text-decoration: none;
        padding: 12px 40px;
        font-weight: 600;
        font-size: 1rem;
        border-radius: 4px;
        transition: background 0.3s ease, transform 0.2s;
    }

    .pd-buy-btn:hover {
        background-color: #154a25;
        transform: scale(1.05);
    }

    /* --- RESPONSIVE DESIGN --- */
    @media (max-width: 992px) {
        .pd-container {
            grid-template-columns: 1fr; /* Stack vertically */
        }

        .pd-image-col {
            min-height: 400px;
            padding: 40px;
        }

        .pd-content-col {
            padding: 40px 20px;
        }

        .pd-img-wrapper {
            max-width: 250px; /* Smaller image on mobile */
        }
    }

    @media (max-width: 600px) {
        .pd-title {
            font-size: 1.8rem;
            text-align: center;
        }

        .pd-desc {
            text-align: center;
        }

        .benefit-row {
            flex-direction: row; /* Keep icon left even on mobile for this design */
        }
    }


    /* --- SCIENCE LIGHT SECTION STYLES --- */
    .science-light-section {
        background-color: #9cd75f; /* Bright Apple/Lime Green */
        padding: 80px 20px 100px;
        font-family: 'Poppins', sans-serif;
        color: #1a1a1a; /* Dark text */
    }

    .sl-container {
        max-width: 1100px;
        margin: 0 auto;
    }

    /* --- HEADER --- */
    .sl-header {
        text-align: center;
        margin-bottom: 60px;
    }

    .sl-main-title, .sl-sub-title {
        font-size: 2.5rem;
        font-weight: 600;
        line-height: 1.2;
        color: #000;
    }

    /* --- MIDDLE CONTENT --- */
    .sl-content-row {
        display: grid;
        grid-template-columns: 1fr 1fr; /* 50/50 Split */
        gap: 60px;
        align-items: center;
        margin-bottom: 80px;
    }

    .sl-text-col p {
        font-size: 1.1rem;
        line-height: 1.8;
        margin-bottom: 25px;
        font-weight: 400;
        color: #111;
    }

    .sl-image-col {
        display: flex;
        justify-content: center;
    }

    .sl-img-wrapper {
        width: 100%;
        /* max-width: 450px; */
        height: 500px;
        overflow: hidden;
        border-radius: 4px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        background: #fff;
    }

    .sl-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.6s ease;
    }

    .sl-img-wrapper:hover .sl-img {
        transform: scale(1.05);
    }

    /* --- STATS ROW --- */
    .sl-stats-row {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 50px;
    }

    .sl-stat-item {
        display: flex;
        flex-direction: column;
    }

    /* Progress Bar Style */
    .progress-container {
        display: flex;
        align-items: center;
        gap: 15px;
        margin-bottom: 15px;
    }

    .progress-bar {
        height: 12px;
        background-color: #107c52; /* Dark Green Bar color */
        border-radius: 6px;
        position: relative;
        /* The container for the bar background */
        box-shadow: 0 0 0 4px rgba(255,255,255,0.5); /* Simulating the white track */
        flex-grow: 1; /* Bar takes available space */
    }

    /* Optional: If you want the 'empty' part visible explicitly:
       Wrap .progress-bar in a parent div representing the track. 
       Here I used box-shadow for a quick visual match to the image's white background strip. */

    .progress-val {
        font-size: 1.2rem;
        font-weight: 700;
        color: #000;
    }

    .sl-stat-title {
        font-size: 1.2rem;
        font-weight: 600;
        margin-bottom: 10px;
        color: #000;
    }

    .sl-stat-desc {
        font-size: 0.95rem;
        line-height: 1.5;
        color: #1a1a1a;
    }

    /* --- RESPONSIVE DESIGN --- */
    @media (max-width: 900px) {
        .sl-content-row {
            grid-template-columns: 1fr; /* Stack Text and Image */
            gap: 40px;
        }

        .sl-header .sl-main-title, 
        .sl-header .sl-sub-title {
            font-size: 2rem;
        }

        .sl-stats-row {
            grid-template-columns: 1fr; /* Stack stats vertically */
            gap: 40px;
        }
    }

    /* --- HAIR SECRET SECTION STYLES --- */
    .hair-secret-section {
        background-color: #eef6e7; /* Light Pale Green Background */
        padding: 0; /* Full height split */
        font-family: 'Poppins', sans-serif;
        overflow: hidden;
    }

    .hs-container {
        display: grid;
        grid-template-columns: 1.2fr 0.8fr; /* Text side is wider */
        width: 100%;
        min-height: 700px;
    }

    /* --- LEFT COLUMN --- */
    .hs-content-col {
        padding: 80px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    /* Badge */
    .hs-badge {
        background-color: #d2ebe6; /* Pale Cyan/Mint */
        color: #2b5c54; /* Dark Teal Text */
        font-size: 0.8rem;
        font-weight: 700;
        padding: 6px 14px;
        border-radius: 4px;
        margin-bottom: 25px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        text-transform: uppercase;
        align-self: flex-start;
        letter-spacing: 0.5px;
    }

    .hs-title {
        font-family: 'Poppins', sans-serif;
        font-size: 2.8rem;
        font-weight: 600;
        color: #000;
        line-height: 1.2;
        margin-bottom: 20px;
    }

    .hs-description {
        font-size: 1rem;
        color: #333;
        line-height: 1.7;
        margin-bottom: 50px;
        max-width: 650px;
    }

    /* List Items */
    .hs-benefits-list {
        display: flex;
        flex-direction: column;
        gap: 30px;
    }

    .hs-item {
        display: flex;
        align-items: flex-start;
        gap: 25px;
    }

    /* Chevron/Banner Icon Shape */
    .hs-icon-banner {
        width: 60px;
        height: 90px;
        background-color: #aacc5a; /* Olive Green */
        /* Clip path creates the downward pointing banner shape */
        clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 50% 100%, 0% 80%);
        display: flex;
        align-items: flex-start; /* Icon sits near top */
        justify-content: center;
        padding-top: 25px; 
        color: #1a3c20; /* Dark icon color */
        flex-shrink: 0;
        transition: transform 0.3s ease;
    }

    .hs-item:hover .hs-icon-banner {
        transform: translateY(-5px);
        background-color: #9abf45; /* Slightly brighter on hover */
    }

    .hs-text h4 {
        font-size: 1.2rem;
        font-weight: 600;
        color: #1a3c20;
        margin-bottom: 8px;
        margin-top: 5px;
    }

    .hs-text p {
        font-size: 0.95rem;
        color: #444;
        line-height: 1.6;
    }

    /* --- RIGHT COLUMN --- */
    .hs-image-col {
        position: relative;
        height: 100%;
        min-height: 500px;
    }

    .hs-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    /* --- RESPONSIVE DESIGN --- */
    @media (max-width: 1024px) {
        .hs-container {
            grid-template-columns: 1fr; /* Stack vertically */
        }
        
        .hs-content-col {
            padding: 60px 40px;
        }

        .hs-image-col {
            height: 400px; /* Fixed height on tablet/mobile */
            min-height: auto;
        }

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

    @media (max-width: 600px) {
        .hs-content-col {
            padding: 40px 20px;
        }

        .hs-title {
            font-size: 1.8rem;
        }

        .hs-item {
            gap: 15px;
        }

        /* Make banner smaller on mobile */
        .hs-icon-banner {
            width: 50px;
            height: 75px;
            padding-top: 20px;
        }

        .hs-icon-banner svg {
            width: 20px;
            height: 20px;
        }
    }

    /* --- HAIR USAGE SECTION STYLES --- */
    .hair-usage-section {
        background-color: #ffffff;
        padding: 0;
        font-family: 'Poppins', sans-serif;
    }

    .hu-container {
        display: grid;
        grid-template-columns: 0.8fr 1.2fr; /* Image narrower than text */
        width: 100%;
        min-height: 700px;
    }

    /* --- LEFT IMAGE COLUMN --- */
    .hu-image-col {
        position: relative;
        height: 100%;
        min-height: 500px;
    }

    .hu-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    /* --- RIGHT CONTENT COLUMN --- */
    .hu-content-col {
        background-color: #eef6e7; /* Light Pale Green Background */
        padding: 80px 60px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    /* Badge */
    .hu-badge {
        background-color: #d2ebe6; /* Pale Cyan */
        color: #2b5c54; /* Dark Teal */
        font-size: 0.8rem;
        font-weight: 700;
        padding: 6px 14px;
        border-radius: 4px;
        margin-bottom: 25px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        text-transform: uppercase;
        align-self: flex-start;
        letter-spacing: 0.5px;
    }

    .hu-title {
        font-size: 2.8rem;
        font-weight: 600;
        color: #000;
        line-height: 1.2;
        margin-bottom: 20px;
    }

    .hu-desc {
        font-size: 1rem;
        color: #333;
        line-height: 1.6;
        margin-bottom: 40px;
        max-width: 700px;
    }

    /* Steps List */
    .hu-steps-list {
        display: flex;
        flex-direction: column;
        gap: 30px;
    }

    .hu-step-item {
        display: flex;
        align-items: flex-start;
        gap: 25px;
    }

    /* Circular Icon Background */
    .hu-icon-circle {
        width: 60px;
        height: 60px;
        background-color: #f1f1f1; /* Light Grey/Lavender tint */
        /* To match image exactly, it looks like a very pale lilac/grey circle */
        background-color: #edeef0; 
        border-radius: 50%;
        /* But wait, looking closer at image_c8bb72, the icons have a soft purple/pink tint circle? 
           Actually looks like a very pale grey-purple. Let's use a soft mix. */
        background-color: #f0ecf0; 
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        color: #333;
    }
    
    .hu-icon-circle svg {
        width: 24px;
        height: 24px;
        stroke-width: 1.5;
    }

    .hu-step-text h4 {
        font-size: 1.1rem;
        font-weight: 600;
        color: #1a3c20;
        margin-bottom: 5px;
        margin-top: 5px;
    }

    .hu-step-text p {
        font-size: 0.95rem;
        color: #444;
        line-height: 1.5;
    }

    /* --- RESPONSIVE DESIGN --- */
    @media (max-width: 1024px) {
        .hu-container {
            grid-template-columns: 1fr; /* Stack vertically */
        }

        .hu-image-col {
            height: 400px; /* Shorter image on mobile */
            min-height: auto;
        }

        .hu-content-col {
            padding: 60px 30px;
        }
    }

    @media (max-width: 600px) {
        .hu-title {
            font-size: 2rem;
        }

        .hu-step-item {
            gap: 15px;
        }

        .hu-icon-circle {
            width: 50px;
            height: 50px;
        }
    }


    /* --- HAIR INGREDIENTS SECTION STYLES --- */
    .hair-ingredients-section {
        background-color: #eef6e7; /* Light Pale Green */
        padding: 0;
        font-family: 'Poppins', sans-serif;
        overflow: hidden;
    }

    .hi-container {
        display: grid;
        grid-template-columns: 1.1fr 0.9fr; /* Content slightly wider */
        width: 100%;
        min-height: 750px;
    }

    /* --- LEFT CONTENT COLUMN --- */
    .hi-content-col {
        padding: 80px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    /* Badge */
    .hi-badge {
        background-color: #d2ebe6; /* Pale Cyan */
        color: #2b5c54; /* Dark Teal */
        font-size: 0.8rem;
        font-weight: 700;
        padding: 6px 14px;
        border-radius: 4px;
        margin-bottom: 25px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        text-transform: uppercase;
        align-self: flex-start;
        letter-spacing: 0.5px;
    }

    .hi-title {
        font-size: 2.8rem;
        font-weight: 600;
        color: #000;
        line-height: 1.2;
        margin-bottom: 25px;
    }

    .hi-desc {
        font-size: 1rem;
        color: #333;
        line-height: 1.7;
        margin-bottom: 50px;
        max-width: 650px;
    }

    /* INGREDIENTS CARD CONTAINER */
    .hi-ingredients-card {
        background-color: #f3f0ec; /* Light Beige/Grey block */
        border-radius: 4px;
        padding: 10px 0; /* Padding inside the block */
        box-shadow: 0 5px 15px rgba(0,0,0,0.02);
    }

    .hi-item {
        padding: 25px 35px;
        transition: background 0.3s;
    }
    
    .hi-item:hover {
        background-color: rgba(255,255,255,0.4);
    }

    .hi-item-title {
        font-size: 1.2rem;
        font-weight: 600;
        color: #3f4756; /* Dark Slate Grey text */
        margin-bottom: 8px;
    }

    .hi-item-desc {
        font-size: 0.95rem;
        color: #555;
        line-height: 1.5;
    }

    /* SEPARATOR WITH ICON */
    .hi-separator {
        display: flex;
        align-items: center;
        padding: 0 35px;
        opacity: 0.6;
    }

    .hi-sep-line {
        height: 1px;
        background-color: #d1cfcd; /* Subtle line color */
        flex-grow: 1;
    }

    .hi-sep-icon {
        width: 36px;
        height: 36px;
        border: 1px solid #d1cfcd;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #555;
        background-color: #f3f0ec; /* Matches container bg to mask line */
        margin: 0 10px;
        border-radius: 4px; /* Slight rounded corners on the small box */
    }

    /* --- RIGHT IMAGE COLUMN --- */
    .hi-image-col {
        position: relative;
        height: 100%;
        min-height: 600px;
    }

    .hi-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    /* --- RESPONSIVE DESIGN --- */
    @media (max-width: 1024px) {
        .hi-container {
            grid-template-columns: 1fr; /* Stack vertically */
        }

        .hi-image-col {
            height: 400px;
            min-height: auto;
            order: -1; /* Image first on mobile? or keep bottom. Let's keep bottom for text flow */
            order: 0;
        }
        
        .hi-content-col {
            padding: 60px 40px;
        }

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

    @media (max-width: 600px) {
        .hi-content-col {
            padding: 40px 20px;
        }

        .hi-title {
            font-size: 1.8rem;
        }

        .hi-item {
            padding: 20px 20px;
        }

        .hi-separator {
            padding: 0 20px;
        }
    }

    /* --- HAIR REVIEWS SECTION STYLES --- */
    .hair-reviews-section {
        background-color: #eef6e7; /* Light Pale Green */
        padding: 100px 20px;
        font-family: 'Poppins', sans-serif;
    }

    .hr-container {
        max-width: 1100px;
        margin: 0 auto;
    }

    /* HEADER */
    .hr-header {
        margin-bottom: 60px;
        /* Aligned left as per image, or centered? 
           Image text is left aligned. */
        text-align: left; 
    }

    /* Badge */
    .hr-badge {
        background-color: #d2ebe6; /* Pale Cyan */
        color: #2b5c54; /* Dark Teal */
        font-size: 0.8rem;
        font-weight: 700;
        padding: 6px 14px;
        border-radius: 4px;
        margin-bottom: 25px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .hr-title {
        font-size: 2.8rem;
        font-weight: 600;
        color: #000;
        line-height: 1.2;
        margin-bottom: 25px;
    }

    .hr-desc {
        font-size: 1rem;
        color: #333;
        line-height: 1.6;
        max-width: 800px;
    }

    /* GRID */
    .hr-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* 3 Columns */
        gap: 30px;
        margin-bottom: 60px;
    }

    /* REVIEW CARDS */
    .hr-card {
        background-color: rgba(255, 255, 255, 0.4); /* Subtle transparent white */
        border: 1px solid rgba(0,0,0,0.05); /* Very subtle border */
        /* The distinctive Left Green Bar */
        border-left: 5px solid #107c52; /* Deep Green Bar */
        padding: 30px;
        transition: transform 0.3s ease, background 0.3s;
    }

    .hr-card:hover {
        background-color: #ffffff; /* Solid white on hover */
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0,0,0,0.05);
    }

    .hr-quote-head {
        font-size: 1.15rem;
        font-weight: 600;
        color: #3f4756; /* Dark slate text */
        margin-bottom: 15px;
        line-height: 1.4;
    }

    .hr-quote-body {
        font-size: 0.95rem;
        color: #555;
        line-height: 1.6;
    }

    /* CTA BUTTON */
    .hr-cta-box {
        text-align: center; /* Button is centered in the image */
    }

    .hr-btn {
        background-color: #2b6e4f; /* Forest Green Button */
        color: #fff;
        text-decoration: none;
        padding: 14px 40px;
        font-weight: 600;
        border-radius: 4px;
        transition: background 0.3s ease, transform 0.2s;
        display: inline-block;
    }

    .hr-btn:hover {
        background-color: #1a4d35;
        transform: scale(1.05);
    }

    /* --- RESPONSIVE DESIGN --- */
    @media (max-width: 900px) {
        .hr-grid {
            grid-template-columns: 1fr; /* Stack vertically on mobile/tablet */
            gap: 20px;
        }

        .hr-title {
            font-size: 2.2rem;
        }
        
        .hr-header {
            text-align: left; /* Keep left alignment */
        }
    }


    /* --- NATURE SCIENCE SECTION STYLES --- */
    .nature-science-section {
        position: relative;
        /* High-quality Green Leaf Background */
        background-image: url('images/science-banner.webp');
        background-size: cover;
        background-position: center;
        background-attachment: fixed; /* Parallax Effect */
        background-repeat: no-repeat;
        height: 500px; /* Specific height for banner feel */
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: 'Poppins', sans-serif;
        overflow: hidden;
    }

    /* Dark Overlay to make white text pop against bright leaves */
    .ns-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.25); /* Slight dark tint */
        z-index: 1;
    }

    .ns-container {
        position: relative;
        z-index: 2; /* Sits above overlay */
        width: 100%;
        max-width: 1000px;
        padding: 0 20px;
        text-align: center;
    }

    .ns-content {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    /* Typography */
    .ns-title {
        font-size: 3rem;
        font-weight: 700;
        color: #ffffff;
        margin-bottom: 20px;
        line-height: 1.2;
        text-shadow: 0 2px 10px rgba(0,0,0,0.3);
    }

    .ns-desc {
        font-size: 1.1rem;
        color: #f0f0f0; /* Soft white */
        font-weight: 400;
        line-height: 1.6;
        margin-bottom: 40px;
        max-width: 800px;
        text-shadow: 0 1px 4px rgba(0,0,0,0.5);
    }

    /* Button Style */
    .ns-btn {
        background-color: #3b4d1a; /* Deep Moss/Olive Green */
        color: #ffffff;
        text-decoration: none;
        padding: 14px 35px;
        border-radius: 6px;
        font-weight: 600;
        font-size: 1rem;
        transition: all 0.3s ease;
        box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    }

    .ns-btn:hover {
        background-color: #4a6122; /* Slightly lighter on hover */
        transform: translateY(-3px);
        box-shadow: 0 8px 20px rgba(0,0,0,0.3);
    }

    /* --- ANIMATION CLASSES --- */
    /* Ensure elements start hidden for animation */
    .fade-on-scroll {
        opacity: 0;
        transform: translateY(30px);
        transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    }

    .fade-on-scroll.is-visible {
        opacity: 1;
        transform: translateY(0);
    }

    .delay-1 { transition-delay: 0.2s; }
    .delay-2 { transition-delay: 0.4s; }

    /* --- RESPONSIVE DESIGN --- */
    @media (max-width: 900px) {
        .nature-science-section {
            height: 450px; /* Slightly shorter on tablet */
        }
        
        .ns-title {
            font-size: 2.2rem;
        }
        
        .ns-desc {
            font-size: 1rem;
            width: 90%;
        }
    }

    @media (max-width: 600px) {
        .nature-science-section {
            height: 400px;
            background-attachment: scroll; /* Disable parallax on mobile for performance */
        }

        .ns-title {
            font-size: 1.8rem;
        }

        .ns-btn {
            width: 80%; /* Wider button on mobile */
            text-align: center;
        }
    }



    /* --- MISSION SECTION STYLES --- */
    .mission-section {
        background-color: #f9fbf6; /* Very light off-white green tint */
        padding: 100px 20px;
        font-family: 'Poppins', sans-serif;
    }

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

    /* HEADER */
    .mission-header {
        margin-bottom: 60px;
        text-align: left; /* Aligns left as per image layout */
    }

    /* Badge Style */
    .mission-badge {
        background-color: #eafbc8; /* Light Lime Badge */
        color: #3b4d1a; /* Dark Olive Text */
        font-size: 0.75rem;
        font-weight: 700;
        padding: 6px 14px;
        border-radius: 4px;
        margin-bottom: 20px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        letter-spacing: 0.5px;
        text-transform: uppercase;
    }

    .mission-title {
        font-size: 2.4rem;
        font-weight: 500; /* Not too bold, clean look */
        color: #000;
        line-height: 1.2;
        max-width: 900px;
    }

    /* GRID LAYOUT */
    .mission-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* 3 Columns */
        gap: 40px;
    }

    /* CARD ITEM */
    .mission-card {
        display: flex;
        flex-direction: column;
        transition: transform 0.3s ease;
    }

    .mission-card:hover {
        transform: translateY(-5px); /* Subtle lift on hover */
    }

    /* Image Styling */
    .mission-img-box {
        width: 100%;
        height: 250px;
        border-radius: 12px; /* Rounded corners */
        overflow: hidden;
        margin-bottom: 25px;
        box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    }

    .mission-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.6s ease;
    }

    .mission-card:hover .mission-img {
        transform: scale(1.05); /* Zoom effect */
    }

    /* Text Styling */
    .mission-card-title {
        font-size: 1.4rem;
        font-weight: 500;
        color: #1a1a1a;
        margin-bottom: 15px;
    }

    .mission-card-text {
        font-size: 1rem;
        color: #444;
        line-height: 1.6;
        font-weight: 400;
    }

    /* --- ANIMATION UTILS --- */
    .fade-on-scroll {
        opacity: 0;
        transform: translateY(30px);
        transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    }

    .fade-on-scroll.is-visible {
        opacity: 1;
        transform: translateY(0);
    }

    .delay-1 { transition-delay: 0.2s; }
    .delay-2 { transition-delay: 0.4s; }
    .delay-3 { transition-delay: 0.6s; }

    /* --- RESPONSIVE DESIGN --- */
    @media (max-width: 992px) {
        .mission-grid {
            grid-template-columns: repeat(2, 1fr); /* 2 cols on tablet */
        }
        
        .mission-title {
            font-size: 2.5rem;
        }
    }

    @media (max-width: 768px) {
        .mission-grid {
            grid-template-columns: 1fr; /* Stack vertically on mobile */
            gap: 50px;
        }

        .mission-title {
            font-size: 2rem;
        }

        .mission-header {
            text-align: left;
            margin-bottom: 40px;
        }
    }


    /* --- CATECHIN ADVANTAGE STYLES --- */
    .catechin-advantage-section {
        background-color: #8cc63f; /* Vibrant Lime Green */
        background: linear-gradient(135deg, #99cc33 0%, #8cc63f 100%); /* Subtle gradient for depth */
        padding: 100px 20px;
        font-family: 'Poppins', sans-serif;
        color: #1a1a1a;
    }

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

    /* HEADER */
    .ca-header {
        text-align: center;
        margin-bottom: 60px;
    }

    .ca-badge {
        display: inline-block;
        border: 1px solid #1a1a1a;
        padding: 6px 16px;
        font-size: 0.8rem;
        font-weight: 600; /* Regular/Semi-bold */
        text-transform: uppercase;
        border-radius: 4px;
        margin-bottom: 20px;
        color: #1a1a1a;
        letter-spacing: 1px;
    }

    .ca-main-title {
        font-size: 3rem;
        font-weight: 500; /* Clean, not too heavy */
        line-height: 1.2;
        color: #000;
        margin: 0;
    }

    /* GRID LAYOUT */
    .ca-grid {
        display: grid;
        grid-template-columns: 1fr 1fr; /* 50/50 Split */
        gap: 60px;
        align-items: center;
    }

    /* LEFT TEXT COLUMN */
    .ca-text-col {
        display: flex;
        flex-direction: column;
        gap: 40px;
    }

    .ca-sub-heading {
        font-size: 1.5rem;
        font-weight: 500;
        margin-bottom: 15px;
        color: #111;
    }

    .ca-desc {
        font-size: 1rem;
        line-height: 1.7;
        color: #222;
        margin-bottom: 15px;
        font-weight: 400;
    }

    /* RIGHT IMAGE COLUMN */
    .ca-image-col {
        position: relative;
    }

    .ca-img-wrapper {
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 15px 40px rgba(0,0,0,0.15);
        height: 500px; /* Fixed height for the lab image look */
        width: 100%;
        background-color: #000;
    }

    .ca-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0.9; /* Slight dim to blend better */
        transition: transform 0.6s ease;
    }

    .ca-img-wrapper:hover .ca-img {
        transform: scale(1.05);
    }

    /* --- RESPONSIVE DESIGN --- */
    @media (max-width: 992px) {
        .ca-main-title {
            font-size: 2.5rem;
        }

        .ca-grid {
            grid-template-columns: 1fr; /* Stack vertically */
            gap: 50px;
        }

        .ca-img-wrapper {
            height: 400px; /* Shorter image on tablets */
        }
    }

    @media (max-width: 600px) {
        .catechin-advantage-section {
            padding: 60px 20px;
        }

        .ca-main-title {
            font-size: 2rem;
        }

        .ca-sub-heading {
            font-size: 1.3rem;
        }

        .ca-img-wrapper {
            height: 300px; /* Shorter image on mobile */
        }
    }

    /* --- INNOVATION SECTION STYLES --- */
    .innovation-section {
        position: relative;
        padding: 100px 20px;
        font-family: 'Poppins', sans-serif;
        text-align: center;
        overflow: hidden;
    }

    /* Background Setup */
    .innovation-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        /* Lab Background Image */
        background-image: url('images/about-lab-bg.webp');
        background-size: cover;
        background-position: center;
        z-index: 1;
    }

    /* White Overlay to fade the background */
    .innovation-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(255, 255, 255, 0.92); /* Strong white overlay */
        z-index: 2;
    }

    .inn-container {
        position: relative;
        z-index: 3;
        max-width: 1200px;
        margin: 0 auto;
    }

    /* Main Heading */
    .inn-main-title {
        font-size: 2.8rem;
        font-weight: 500;
        color: #000;
        margin-bottom: 70px;
        line-height: 1.2;
    }

    /* Grid Layout */
    .inn-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
    }

    .inn-step {
        display: flex;
        flex-direction: column;
    }

    /* The Chevron Arrow Box */
    .inn-arrow-box {
        background-color: #557c15; /* Olive Green */
        height: 80px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        margin-bottom: 25px;
        position: relative;
        /* Creates the arrow shape: Indented left, Pointed right */
        clip-path: polygon(0% 0%, 90% 0%, 100% 50%, 90% 100%, 0% 100%, 10% 50%);
        transition: transform 0.3s ease, background-color 0.3s;
    }

    .inn-step:hover .inn-arrow-box {
        transform: translateX(5px); /* Subtle move forward */
        background-color: #65911b; /* Brighter green on hover */
    }

    /* Text Content */
    .inn-content {
        text-align: left;
        padding: 0 10px;
    }

    .inn-title {
        font-size: 1.25rem;
        font-weight: 500;
        color: #000;
        margin-bottom: 15px;
    }

    .inn-desc {
        font-size: 0.95rem;
        color: #444;
        line-height: 1.6;
    }

    /* --- RESPONSIVE DESIGN --- */
    @media (max-width: 900px) {
        .inn-grid {
            grid-template-columns: 1fr; /* Stack vertically on mobile */
            gap: 50px;
        }

        .inn-main-title {
            font-size: 2rem;
            margin-bottom: 50px;
        }

        /* On mobile, adjust arrow shape or keep it? 
           Vertical stack usually looks better with a downward arrow, 
           but the horizontal arrow still implies "Progress". 
           Let's keep it consistent with the brand design. */
        .inn-arrow-box {
            width: 100%; 
            /* Optional: Make it rectangular or downward pointing on mobile if desired.
               For now, keeping the distinctive chevron branding. */
        }
    }


    /* --- TEAM SECTION STYLES --- */
    .team-section {
        background-color: #4a6715; /* Deep Olive Green */
        padding: 100px 20px;
        font-family: 'Poppins', sans-serif;
        color: #fff;
    }

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

    /* HEADER */
    .team-header {
        text-align: center;
        margin-bottom: 60px;
    }

    .team-badge {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background-color: rgba(0, 0, 0, 0.3); /* Dark transparent bg */
        border: 1px solid #6b8c2a;
        padding: 6px 16px;
        font-size: 0.8rem;
        font-weight: 600;
        text-transform: uppercase;
        border-radius: 4px;
        margin-bottom: 20px;
        letter-spacing: 1px;
    }

    .team-title {
        font-size: 2.8rem;
        font-weight: 500;
        line-height: 1.2;
        margin: 0;
    }

    /* CONTENT LAYOUT */
    .team-content-wrapper {
        display: grid;
        grid-template-columns: 0.8fr 1.2fr; /* Image narrower than text */
        gap: 60px;
        align-items: center;
    }

    /* IMAGE BOX */
    .team-image-box {
        width: 100%;
        height: 500px; /* Tall square-ish aspect */
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 20px 40px rgba(0,0,0,0.3);
    }

    .team-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.6s ease;
    }

    .team-image-box:hover .team-img {
        transform: scale(1.05);
    }

    /* TEXT INFO AREA */
    .team-info-box {
        display: flex;
        flex-direction: column;
        gap: 30px;
    }

    /* Top Grid (2 Columns) */
    .info-grid-top {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }

    .info-title {
        font-size: 1.5rem;
        font-weight: 500;
        margin-bottom: 15px;
        color: #fff;
    }

    .info-desc {
        font-size: 1rem;
        line-height: 1.7;
        color: #e0e0e0; /* Off-white text */
        font-weight: 300;
    }

    /* DIVIDER LINE */
    .team-divider {
        width: 100%;
        height: 3px;
        background-color: #a4c935; /* Bright Lime Green Accent */
        border-radius: 2px;
    }

    /* RESPONSIVE */
    @media (max-width: 992px) {
        .team-content-wrapper {
            grid-template-columns: 1fr; /* Stack Image and Text */
            gap: 50px;
        }

        .team-image-box {
            height: 400px; /* Shorter image */
        }

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

    @media (max-width: 600px) {
        .team-section {
            padding: 60px 20px;
        }

        .info-grid-top {
            grid-template-columns: 1fr; /* Stack Text items */
            gap: 30px;
        }

        .team-title {
            font-size: 1.8rem;
        }

        .team-image-box {
            height: 300px;
        }
    }


    /* --- PROMISE SECTION STYLES --- */
    .promise-section {
        position: relative;
        padding: 100px 20px;
        font-family: 'Poppins', sans-serif;
        background-color: #f7f9fc; /* Light grey base */
        overflow: hidden;
    }

    /* Background Image Faded */
    .promise-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        /* Abstract bottles/lab background */
        background-image: url('images/about-last-bg.webp');
        background-size: cover;
        background-position: center;
        opacity: 0.08; /* Very subtle fade */
        z-index: 1;
        pointer-events: none;
    }

    .promise-container {
        position: relative;
        z-index: 2;
        max-width: 1200px;
        margin: 0 auto;
        text-align: center;
    }

    /* Heading */
    .promise-title {
        font-size: 2.8rem;
        font-weight: 500;
        color: #000;
        margin-bottom: 60px;
        line-height: 1.2;
    }

    /* Grid Layout */
    .promise-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
    }

    /* Card Styling */
    .promise-card {
        background-color: #ffffff;
        text-align: left;
        padding: 40px 30px;
        border: 1px solid #e0e0e0;
        /* The signature thick lime green left border */
        border-left: 6px solid #a4c935; 
        box-shadow: 0 10px 30px rgba(0,0,0,0.05);
        border-radius: 4px; /* Slight rounding on other corners */
        transition: transform 0.3s ease, box-shadow 0.3s;
    }

    .promise-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 15px 40px rgba(0,0,0,0.1);
    }

    /* Card Typography */
    .pc-title {
        font-size: 1.4rem;
        font-weight: 500;
        color: #1a1a1a;
        margin-bottom: 15px;
    }

    .pc-desc {
        font-size: 0.95rem;
        line-height: 1.6;
        color: #444;
        margin-bottom: 25px;
    }

    /* List Styling */
    .pc-list {
        list-style-type: disc;
        padding-left: 20px;
        margin: 0;
    }

    .pc-list li {
        font-size: 0.9rem;
        color: #333;
        margin-bottom: 10px;
        line-height: 1.5;
        font-weight: 500;
    }
    
    .pc-list li::marker {
        color: #000; /* Black bullets */
    }

    /* --- RESPONSIVE DESIGN --- */
    @media (max-width: 992px) {
        .promise-grid {
            grid-template-columns: 1fr 1fr; /* 2 Columns on tablet */
        }
        
        .promise-title {
            font-size: 2.4rem;
        }
    }

    @media (max-width: 768px) {
        .promise-grid {
            grid-template-columns: 1fr; /* Stack vertically on mobile */
            gap: 20px;
        }

        .promise-title {
            font-size: 2rem;
            margin-bottom: 40px;
        }

        .promise-card {
            padding: 30px 20px;
        }
    }


    /* --- DIFFERENCE SECTION STYLES --- */
    .difference-section {
        background-color: #161c22; /* Deep Charcoal/Dark Blue-Black */
        font-family: 'Poppins', sans-serif;
        color: #fff;
        overflow: hidden;
    }

    .diff-container {
        display: grid;
        grid-template-columns: 1fr 1fr; /* 50/50 Split */
        min-height: 600px;
    }

    /* --- LEFT CONTENT COLUMN --- */
    .diff-content-col {
        padding: 80px 60px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .diff-title {
        font-size: 3rem;
        font-weight: 500;
        line-height: 1.2;
        margin-bottom: 30px;
        color: #fff;
    }

    .diff-desc {
        font-size: 1rem;
        line-height: 1.7;
        color: #b0b8c1; /* Soft Grey Text */
        margin-bottom: 25px;
        max-width: 550px;
    }

    /* STATS ROW */
    .diff-stats-row {
        display: flex;
        gap: 40px;
        margin-top: 20px;
        margin-bottom: 50px;
        border-top: 1px solid rgba(255,255,255,0.1); /* Subtle separator line optional */
        padding-top: 30px;
    }

    .diff-stat {
        display: flex;
        flex-direction: column;
        align-items: center; /* Centered stats or left aligned? Image looks centered per block */
        text-align: center;
        flex: 1;
    }

    .stat-num {
        font-size: 2.5rem;
        font-weight: 400; /* Thin/Light look */
        color: #fff;
        margin-bottom: 10px;
    }

    .stat-label {
        font-size: 1rem;
        font-weight: 500;
        color: #e0e0e0;
        margin-bottom: 5px;
    }

    .stat-sub {
        font-size: 0.85rem;
        color: #8fa0b0; /* Dimmer grey */
        line-height: 1.4;
    }

    /* BUTTON */
    .diff-btn {
        background-color: #a4c935; /* Bright Lime Green */
        color: #000;
        text-decoration: none;
        padding: 14px 35px;
        border-radius: 4px;
        font-weight: 600;
        font-size: 1rem;
        transition: all 0.3s ease;
        display: inline-block;
    }

    .diff-btn-wrapper  {
        text-align: center;
    }

    .diff-btn:hover {
        background-color: #fff;
        transform: translateY(-3px);
    }

    /* --- RIGHT IMAGE COLUMN --- */
    .diff-image-col {
        position: relative;
        height: 100%;
        min-height: 500px;
    }

    .diff-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        /* Optional: Add a subtle overlay or filter if needed to match image tone */
    }

    /* --- RESPONSIVE DESIGN --- */
    @media (max-width: 1024px) {
        .diff-title {
            font-size: 2.5rem;
        }
        
        .diff-stats-row {
            gap: 20px;
        }
        
        .stat-num {
            font-size: 2rem;
        }
    }

    @media (max-width: 900px) {
        .diff-container {
            grid-template-columns: 1fr; /* Stack vertically */
        }

        .diff-image-col {
            height: 400px; /* Shorter image on mobile */
            order: -1; /* Image on top? Or keep bottom. Let's put image bottom for flow */
            order: 0;
        }

        .diff-content-col {
            padding: 60px 30px;
            text-align: center; /* Center text on mobile */
        }

        .diff-desc {
            margin-left: auto;
            margin-right: auto;
        }

        .diff-stats-row {
            flex-direction: column; /* Stack stats vertically on mobile for space */
            gap: 30px;
        }
    }


    /* --- CREAM BANNER STYLES --- */
    .cream-banner-section {
        width: 100%;
        padding: 0;
        font-family: 'Poppins', sans-serif;
        overflow: hidden; 
    }

    .cb-container {
        display: grid;
        /* UPDATED: 60% Left, 40% Right */
        grid-template-columns: 60% 40%; 
        width: 100%;
        min-height: 500px;
    }

    /* --- LEFT SIDE (GREEN) --- */
    .cb-content {
        background-color: #9cd75f; /* Vibrant Lime Green */
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 60px 100px 60px 80px; /* Slightly more right padding for balance */
        color: #000;
    }

    /* Badge Style */
    .cb-badge {
        background-color: #dcf5c4;
        color: #1a3c20;
        font-size: 0.85rem;
        font-weight: 600;
        padding: 8px 16px;
        border-radius: 4px;
        margin-bottom: 25px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        align-self: flex-start;
    }

    .cb-title {
        font-family: 'Poppins', sans-serif;
        font-size: 3rem;
        font-weight: 600;
        line-height: 1.2;
        margin-bottom: 20px;
        color: #000;
    }

    .cb-subtitle {
        font-size: 1.4rem;
        font-weight: 400;
        color: #111;
        opacity: 0.95;
    }

    /* --- RIGHT SIDE (IMAGE) --- */
    .cb-image-box {
        position: relative;
        width: 100%;
        height: 100%;
        background-color: #f0f4f8;
    }

    .cb-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.6s ease;
        display: block;
    }

    .cb-image-box:hover .cb-img {
        transform: scale(1.05);
    }

    /* --- RESPONSIVE DESIGN --- */
    @media (max-width: 1024px) {
        .cb-title {
            font-size: 2.5rem;
        }
        .cb-content {
            padding: 50px 40px;
        }
    }

    @media (max-width: 900px) {
        .cb-container {
            grid-template-columns: 1fr; /* Switch to vertical stack on mobile */
        }

        .cb-image-box {
            height: 350px; /* Fixed height for image on mobile */
            order: 0;
        }

        .cb-content {
            padding: 60px 30px;
            align-items: center;
            text-align: center;
        }

        .cb-badge {
            align-self: center;
        }

        .cb-title {
            font-size: 2rem;
        }
    }


    /* --- CREAM DETAIL SECTION STYLES --- */
    .cream-detail-section {
        background-color: #ffffff;
        padding: 80px 0;
        font-family: 'Poppins', sans-serif;
    }

    .cd-container {
        display: grid;
        grid-template-columns: 1fr 1fr; /* 50/50 Split */
        max-width: 1200px;
        margin: 0 auto;
        background-color: #ffffff;
    }

    /* --- LEFT IMAGE COLUMN --- */
    .cd-image-col {
        /* Vibrant Green Background */

    }
    
    /* Overlay to ensure green tint matches branding */
    /* .cd-image-col::before {
        content: '';
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(16, 124, 82, 0.7); 
        z-index: 1;
    } */

    /* .cd-img-wrapper {
        width: 100%;
        max-width: 400px;
        position: relative;
        z-index: 2; 
    } */

    .cd-img {
        width: 100%;
        height: auto;
        object-fit: contain;
        filter: drop-shadow(0 20px 30px rgba(0,0,0,0.3)); /* Strong shadow for depth */
        transition: transform 0.5s ease;
    }

    /* .cd-img-wrapper:hover .cd-img {
        transform: scale(1.05) rotate(-2deg);
    } */

    /* --- RIGHT CONTENT COLUMN --- */
    .cd-content-col {
        padding: 60px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    /* Badge */
    .cd-badge {
        background-color: #d2ebe6; /* Pale Cyan */
        color: #2b5c54; /* Dark Teal */
        font-size: 0.8rem;
        font-weight: 700;
        padding: 6px 14px;
        border-radius: 4px;
        margin-bottom: 25px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        text-transform: uppercase;
        align-self: flex-start;
        letter-spacing: 0.5px;
    }

    .cd-title {
        font-size: 2.2rem;
        font-weight: 600;
        color: #000;
        margin-bottom: 20px;
        line-height: 1.2;
    }

    .cd-desc {
        font-size: 1rem;
        line-height: 1.6;
        color: #444;
        margin-bottom: 40px;
        font-weight: 400;
    }

    /* BENEFITS STACK */
    .cd-benefits-stack {
        display: flex;
        flex-direction: column;
        gap: 20px;
        margin-bottom: 40px;
    }

    .cd-benefit-row {
        display: flex;
        align-items: stretch;
        border: 1px solid #75b84f; /* Green Border */
        border-radius: 4px;
        overflow: hidden;
        background: #fff;
        transition: transform 0.3s ease;
    }

    .cd-benefit-row:hover {
        transform: translateX(5px);
    }

    .cd-icon-box {
        background-color: #9fd65e; /* Light Lime Green Background */
        width: 80px;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #1a402a; /* Dark Green Icon */
    }

    .cd-benefit-text {
        padding: 15px 20px;
        flex-grow: 1;
    }

    .cd-benefit-text h4 {
        font-size: 1.1rem;
        font-weight: 600;
        color: #333;
        margin-bottom: 5px;
        margin-top: 5px;
    }

    .cd-benefit-text p {
        font-size: 0.9rem;
        color: #555;
        line-height: 1.4;
        margin: 0;
    }

    /* ACTION AREA */
    .cd-action-area {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 15px;
        margin-top: 10px;
    }

    .cd-price {
        font-size: 1.5rem;
        font-weight: 700;
        color: #333;
    }

    .cd-buy-btn {
        background-color: #1f6b36; /* Dark Green Button */
        color: #fff;
        text-decoration: none;
        padding: 12px 40px;
        font-weight: 600;
        font-size: 1rem;
        border-radius: 4px;
        transition: background 0.3s ease, transform 0.2s;
    }

    .cd-buy-btn:hover {
        background-color: #154a25;
        transform: scale(1.05);
    }

    /* --- RESPONSIVE DESIGN --- */
    @media (max-width: 1024px) {
        .cd-container {
            grid-template-columns: 1fr; /* Stack vertically */
        }

        .cd-image-col {
            min-height: 400px;
            padding: 40px;
            order: 0; /* Image first? Yes usually */
        }

        .cd-content-col {
            padding: 40px 30px;
        }

        .cd-img-wrapper {
            max-width: 300px;
        }
    }

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

        .cd-benefit-row {
            /* Keep row layout for icon+text even on mobile, looks cleaner */
        }
        
        .cd-icon-box {
            width: 60px; /* Slightly smaller icon box */
        }
    }


    /* --- SKIN DEFENDER SECTION STYLES --- */
    .skin-defender-section {
        background-color: #eef6e7; /* Light Pale Green */
        padding: 0; /* Full height split */
        font-family: 'Poppins', sans-serif;
        overflow: hidden;
    }

    .sd-container {
        display: grid;
        grid-template-columns: 1.2fr 0.8fr; /* Text side is wider */
        width: 100%;
        min-height: 700px;
    }

    /* --- LEFT COLUMN --- */
    .sd-content-col {
        padding: 80px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    /* Badge */
    .sd-badge {
        background-color: #d2ebe6; /* Pale Cyan/Mint */
        color: #2b5c54; /* Dark Teal Text */
        font-size: 0.8rem;
        font-weight: 700;
        padding: 6px 14px;
        border-radius: 4px;
        margin-bottom: 25px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        text-transform: uppercase;
        align-self: flex-start;
        letter-spacing: 0.5px;
    }

    .sd-title {
        font-family: 'Poppins', sans-serif;
        font-size: 2.8rem;
        font-weight: 600;
        color: #000;
        line-height: 1.2;
        margin-bottom: 20px;
    }

    .sd-description {
        font-size: 1rem;
        color: #333;
        line-height: 1.7;
        margin-bottom: 50px;
        max-width: 650px;
    }

    /* List Items */
    .sd-benefits-list {
        display: flex;
        flex-direction: column;
        gap: 30px;
    }

    .sd-item {
        display: flex;
        align-items: flex-start;
        gap: 25px;
    }

    /* Chevron/Banner Icon Shape */
    .sd-icon-banner {
        width: 60px;
        height: 90px;
        background-color: #aacc5a; /* Olive Green */
        /* Clip path creates the downward pointing banner shape */
        clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 50% 100%, 0% 80%);
        display: flex;
        align-items: flex-start; /* Icon sits near top */
        justify-content: center;
        padding-top: 25px; 
        color: #1a3c20; /* Dark icon color */
        flex-shrink: 0;
        transition: transform 0.3s ease;
    }

    .sd-item:hover .sd-icon-banner {
        transform: translateY(-5px);
        background-color: #9abf45; /* Slightly brighter on hover */
    }

    .sd-text h4 {
        font-size: 1.2rem;
        font-weight: 600;
        color: #1a3c20;
        margin-bottom: 8px;
        margin-top: 5px;
    }

    .sd-text p {
        font-size: 0.95rem;
        color: #444;
        line-height: 1.6;
    }

    /* --- RIGHT COLUMN --- */
    .sd-image-col {
        position: relative;
        height: 100%;
        min-height: 500px;
    }

    .sd-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    /* --- RESPONSIVE DESIGN --- */
    @media (max-width: 1024px) {
        .sd-container {
            grid-template-columns: 1fr; /* Stack vertically */
        }
        
        .sd-content-col {
            padding: 60px 40px;
        }

        .sd-image-col {
            height: 400px; /* Fixed height on tablet/mobile */
            min-height: auto;
        }

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

    @media (max-width: 600px) {
        .sd-content-col {
            padding: 40px 20px;
        }

        .sd-title {
            font-size: 1.8rem;
        }

        .sd-item {
            gap: 15px;
        }

        /* Make banner smaller on mobile */
        .sd-icon-banner {
            width: 50px;
            height: 75px;
            padding-top: 20px;
        }

        .sd-icon-banner svg {
            width: 20px;
            height: 20px;
        }
    }


    /* --- CREAM USAGE SECTION STYLES --- */
    .cream-usage-section {
        background-color: #ffffff;
        padding: 0;
        font-family: 'Poppins', sans-serif;
    }

    .cu-container {
        display: grid;
        grid-template-columns: 1fr 1fr; /* 50/50 Split */
        width: 100%;
        min-height: 700px;
    }

    /* --- LEFT IMAGE COLUMN --- */
    .cu-image-col {
        position: relative;
        height: 100%;
        min-height: 500px;
    }

    .cu-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    /* --- RIGHT CONTENT COLUMN --- */
    .cu-content-col {
        background-color: #ffffff;
        padding: 80px 60px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    /* Badge */
    .cu-badge {
        background-color: #d2ebe6; /* Pale Cyan */
        color: #2b5c54; /* Dark Teal */
        font-size: 0.8rem;
        font-weight: 700;
        padding: 6px 14px;
        border-radius: 4px;
        margin-bottom: 25px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        text-transform: uppercase;
        align-self: flex-start;
        letter-spacing: 0.5px;
    }

    .cu-title {
        font-size: 2.8rem;
        font-weight: 600;
        color: #000;
        line-height: 1.2;
        margin-bottom: 20px;
    }

    .cu-desc {
        font-size: 1rem;
        color: #333;
        line-height: 1.6;
        margin-bottom: 50px;
        max-width: 650px;
    }

    /* Steps List */
    .cu-steps-list {
        display: flex;
        flex-direction: column;
        gap: 40px;
    }

    .cu-step-item {
        display: flex;
        align-items: flex-start;
        gap: 25px;
    }

    /* Vertical Pill Icon Background */
    .cu-icon-pill {
        width: 60px;
        height: 90px; /* Vertical Pill Shape */
        background-color: #aacc5a; /* Lime Green */
        border-radius: 50px; /* Fully rounded ends */
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        color: #1a3c20;
        transition: transform 0.3s ease;
    }
    
    .cu-step-item:hover .cu-icon-pill {
        transform: translateY(-5px);
        background-color: #bce065;
    }

    .cu-icon-pill svg {
        width: 28px;
        height: 28px;
        stroke-width: 1.5;
    }

    .cu-step-text h4 {
        font-size: 1.15rem;
        font-weight: 600;
        color: #1a3c20;
        margin-bottom: 8px;
        margin-top: 10px; /* Align with icon top */
    }

    .cu-step-text p {
        font-size: 0.95rem;
        color: #444;
        line-height: 1.6;
    }

    /* --- RESPONSIVE DESIGN --- */
    @media (max-width: 1024px) {
        .cu-container {
            grid-template-columns: 1fr; /* Stack vertically */
        }

        .cu-image-col {
            height: 400px;
            min-height: auto;
            /* In original image, text is right, image left. 
               On mobile, usually image goes on top. */
            order: -1; 
            order: 0;
        }

        .cu-content-col {
            padding: 60px 40px;
        }
    }

    @media (max-width: 600px) {
        .cu-title {
            font-size: 2rem;
        }

        .cu-step-item {
            gap: 15px;
        }

        .cu-icon-pill {
            width: 50px;
            height: 75px; /* Smaller pill on mobile */
        }
        
        .cu-icon-pill svg {
            width: 24px;
            height: 24px;
        }
    }


    /* --- SKIN INGREDIENTS SECTION STYLES --- */
    .skin-ingredients-section {
        background-color: #fdfdfd; /* Off-white background */
        padding: 0;
        font-family: 'Poppins', sans-serif;
        overflow: hidden;
    }

    .si-container {
        display: grid;
        grid-template-columns: 1.1fr 0.9fr; /* Content slightly wider */
        width: 100%;
        min-height: 750px;
    }

    /* --- LEFT CONTENT COLUMN --- */
    .si-content-col {
        padding: 80px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    /* Badge */
    .si-badge {
        background-color: #d2ebe6; /* Pale Cyan */
        color: #2b5c54; /* Dark Teal */
        font-size: 0.8rem;
        font-weight: 700;
        padding: 6px 14px;
        border-radius: 4px;
        margin-bottom: 25px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        text-transform: uppercase;
        align-self: flex-start;
        letter-spacing: 0.5px;
    }

    .si-title {
        font-size: 2.8rem;
        font-weight: 600;
        color: #000;
        line-height: 1.2;
        margin-bottom: 25px;
    }

    .si-desc {
        font-size: 1rem;
        color: #333;
        line-height: 1.7;
        margin-bottom: 50px;
        max-width: 650px;
    }

    /* INGREDIENTS CARD CONTAINER */
    .si-ingredients-card {
        background-color: #f5f5f5; /* Light Grey block */
        border-radius: 4px;
        padding: 10px 0;
        box-shadow: 0 5px 15px rgba(0,0,0,0.02);
    }

    .si-item {
        padding: 25px 35px;
        transition: background 0.3s;
    }
    
    .si-item:hover {
        background-color: rgba(0,0,0,0.02);
    }

    .si-item-title {
        font-size: 1.2rem;
        font-weight: 600;
        color: #3f4756; /* Dark Slate Grey text */
        margin-bottom: 8px;
    }

    .si-item-desc {
        font-size: 0.95rem;
        color: #555;
        line-height: 1.5;
    }

    /* SEPARATOR WITH ICON */
    .si-separator {
        display: flex;
        align-items: center;
        padding: 0 35px;
        opacity: 0.6;
    }

    .si-sep-line {
        height: 1px;
        background-color: #d1cfcd;
        flex-grow: 1;
    }

    .si-sep-icon {
        width: 36px;
        height: 36px;
        border: 1px solid #d1cfcd;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #555;
        background-color: #f5f5f5; /* Matches container bg */
        margin: 0 10px;
        border-radius: 4px;
    }

    /* --- RIGHT IMAGE COLUMN --- */
    .si-image-col {
        position: relative;
        height: 100%;
        min-height: 600px;
    }

    .si-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    /* --- RESPONSIVE DESIGN --- */
    @media (max-width: 1024px) {
        .si-container {
            grid-template-columns: 1fr; /* Stack vertically */
        }

        .si-image-col {
            height: 400px;
            min-height: auto;
            order: 0; 
        }
        
        .si-content-col {
            padding: 60px 40px;
        }

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

    @media (max-width: 600px) {
        .si-content-col {
            padding: 40px 20px;
        }

        .si-title {
            font-size: 1.8rem;
        }

        .si-item {
            padding: 20px 20px;
        }

        .si-separator {
            padding: 0 20px;
        }
    }

    /* --- CREAM REVIEWS SECTION STYLES --- */
    .cream-reviews-section {
        position: relative;
        padding: 100px 20px;
        font-family: 'Poppins', sans-serif;
        background-color: #f9fbf8; /* Very light base */
        overflow: hidden;
    }

    /* Background Image Faded Layer */
    .cr-bg-layer {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        /* Subtle woman's face background */
        background-image: url('images/moisturizing-cream-above-footer-bg.webp'); 
        background-size: cover;
        background-position: center;
        opacity: 0.08; /* Very subtle fade so text is readable */
        z-index: 1;
        pointer-events: none;
    }

    .cr-container {
        position: relative;
        z-index: 2;
        max-width: 1100px;
        margin: 0 auto;
    }

    /* HEADER */
    .cr-header {
        margin-bottom: 60px;
        text-align: left; 
    }

    /* Badge */
    .cr-badge {
        background-color: #d2ebe6; /* Pale Cyan */
        color: #2b5c54; /* Dark Teal */
        font-size: 0.8rem;
        font-weight: 700;
        padding: 6px 14px;
        border-radius: 4px;
        margin-bottom: 25px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .cr-title {
        font-size: 2.8rem;
        font-weight: 600;
        color: #000;
        line-height: 1.2;
        margin-bottom: 25px;
    }

    .cr-desc {
        font-size: 1rem;
        color: #333;
        line-height: 1.6;
        max-width: 800px;
    }

    /* GRID */
    .cr-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* 3 Columns */
        gap: 30px;
        margin-bottom: 60px;
    }

    /* REVIEW CARDS */
    .cr-card {
        background-color: #ffffff;
        border: 1px solid rgba(0,0,0,0.08); 
        /* The distinctive Left Green Bar */
        border-left: 5px solid #107c52; 
        padding: 30px;
        transition: transform 0.3s ease, box-shadow 0.3s;
        box-shadow: 0 5px 15px rgba(0,0,0,0.03);
    }

    .cr-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    }

    .cr-quote-head {
        font-size: 1.15rem;
        font-weight: 600;
        color: #3f4756; /* Dark slate text */
        margin-bottom: 15px;
        line-height: 1.4;
    }

    .cr-quote-body {
        font-size: 0.95rem;
        color: #555;
        line-height: 1.6;
    }

    /* CTA BUTTON */
    .cr-cta-box {
        text-align: center; 
    }

    .cr-btn {
        background-color: #1f6b36; /* Dark Green Button */
        color: #fff;
        text-decoration: none;
        padding: 14px 40px;
        font-weight: 600;
        border-radius: 4px;
        transition: background 0.3s ease, transform 0.2s;
        display: inline-block;
    }

    .cr-btn:hover {
        background-color: #154a25;
        transform: scale(1.05);
    }

    /* --- RESPONSIVE DESIGN --- */
    @media (max-width: 900px) {
        .cr-grid {
            grid-template-columns: 1fr; /* Stack vertically on mobile/tablet */
            gap: 20px;
        }

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


    /* --- CONTACT BANNER STYLES --- */
    .contact-banner-section {
        width: 100%;
        padding: 0;
        font-family: 'Poppins', sans-serif;
        overflow: hidden;
    }

    .cb-split-container {
        display: grid;
        /* UPDATED: 60% Left, 40% Right */
        grid-template-columns: 60% 40%; 
        min-height: 550px;
        width: 100%;
    }

    /* --- LEFT TEXT COLUMN --- */
    .cb-text-col {
        background-color: #557c15; /* Deep Moss Green */
        padding: 80px 100px 80px 80px; /* Extra padding right for balance */
        display: flex;
        flex-direction: column;
        justify-content: center;
        color: #ffffff;
    }

    /* Badge */
    .cb-badge {
        background-color: #3b550e; /* Darker Shade of Green background */
        color: #eafbc8; /* Light Lime Text */
        font-size: 0.8rem;
        font-weight: 600;
        padding: 6px 14px;
        border-radius: 4px;
        margin-bottom: 25px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        text-transform: uppercase;
        align-self: flex-start;
        letter-spacing: 0.5px;
    }

    .cb-heading {
        font-size: 3rem;
        font-weight: 500;
        line-height: 1.2;
        margin-bottom: 25px;
        color: #fff;
    }

    .cb-description {
        font-size: 1.1rem;
        color: #e0e0e0;
        line-height: 1.6;
        margin-bottom: 45px;
        max-width: 650px;
        font-weight: 300;
    }

    /* Buttons */
    .cb-btn-group {
        display: flex;
        gap: 20px;
        flex-wrap: wrap;
    }

    .cb-btn-primary {
        background-color: #dceb82; /* Pale Lime/Yellow */
        color: #1a3c20; /* Dark Green Text */
        text-decoration: none;
        padding: 14px 35px;
        border-radius: 6px;
        font-weight: 600;
        transition: transform 0.3s, background 0.3s;
    }

    .cb-btn-primary:hover {
        background-color: #fff;
        transform: translateY(-3px);
    }

    .cb-btn-secondary {
        background-color: transparent;
        color: #fff;
        border: 1px solid rgba(255,255,255,0.6);
        text-decoration: none;
        padding: 14px 35px;
        border-radius: 6px;
        font-weight: 500;
        transition: all 0.3s;
    }

    .cb-btn-secondary:hover {
        border-color: #dceb82;
        color: #dceb82;
        transform: translateY(-3px);
    }

    /* --- RIGHT IMAGE COLUMN --- */
    .cb-img-col {
        position: relative;
        height: 100%;
        min-height: 400px;
    }

    .cb-bg-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform 0.6s ease;
    }

    .cb-img-col:hover .cb-bg-img {
        transform: scale(1.05); /* Slight zoom effect */
    }

    /* --- RESPONSIVE DESIGN --- */
    @media (max-width: 1024px) {
        .cb-heading {
            font-size: 2.5rem;
        }
        .cb-text-col {
            padding: 60px 40px;
        }
    }

    @media (max-width: 900px) {
        .cb-split-container {
            grid-template-columns: 1fr; /* Switch to vertical stack on mobile */
        }

        .cb-img-col {
            height: 350px;
            order: 0; /* Image bottom, Text top (Standard flow) */
        }
        
        .cb-text-col {
            padding: 60px 30px;
        }

        .cb-heading {
            font-size: 2rem;
        }

        .cb-btn-group {
            width: 100%;
        }

        .cb-btn-primary, .cb-btn-secondary {
            flex: 1; /* Full width buttons on mobile */
            text-align: center;
        }
    }


    /* --- GET IN TOUCH SECTION STYLES --- */
    .get-in-touch-section {
        background: linear-gradient(180deg, #f4f6f2 0%, #eef1ea 100%); /* Subtle grey-green gradient */
        padding: 100px 20px;
        font-family: 'Poppins', sans-serif;
    }

    .git-container {
        max-width: 1055px; /* Exact width requested */
        width: 100%;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        gap: 40px;
    }

    /* HEADER */
    .git-header {
        margin-bottom: 20px;
    }

    .git-title {
        font-size: 3rem;
        font-weight: 500;
        color: #000;
        margin-bottom: 10px;
        line-height: 1.2;
    }

    .git-subtitle {
        font-size: 1.2rem;
        font-weight: 500;
        color: #333;
        margin-bottom: 30px;
    }

    .git-desc {
        font-size: 1rem;
        color: #444;
        line-height: 1.6;
        margin-bottom: 20px;
        max-width: 800px;
    }

    .git-hours {
        font-size: 1rem;
        color: #111;
        line-height: 1.6;
    }

    /* CARDS COMMON STYLE */
    .git-card {
        background-color: #ffffff; /* White background */
        border: 1px solid #e0e0e0;
        /* Signature Lime Green Left Border */
        border-left: 8px solid #a4c935; 
        padding: 40px 50px;
        border-radius: 4px;
        box-shadow: 0 5px 20px rgba(0,0,0,0.05);
        width: 100%;
        box-sizing: border-box; /* Ensures padding doesn't break width */
        transition: transform 0.3s ease, box-shadow 0.3s;
    }

    .git-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    }

    .git-card-title {
        font-size: 1.5rem;
        font-weight: 500;
        color: #222;
        margin-bottom: 10px;
    }

    .git-card-text {
        font-size: 1rem;
        color: #555;
        margin-bottom: 20px;
    }

    /* EMAIL SPECIFIC */
    .git-email-link {
        font-size: 1.1rem;
        font-weight: 600;
        color: #1a3c20; /* Dark Green */
        text-decoration: none;
        font-style: italic;
    }

    .git-email-link:hover {
        text-decoration: underline;
        color: #a4c935;
    }

    /* FORM STYLES */
    .git-form {
        display: flex;
        flex-direction: column;
        gap: 20px;
        margin-top: 25px;
    }

    .form-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 30px;
    }

    .form-group {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .form-group label {
        font-size: 0.9rem;
        font-weight: 600;
        color: #333;
    }

    .form-group input, 
    .form-group textarea {
        padding: 12px 15px;
        border: 1px solid #ccc;
        border-radius: 4px;
        font-family: 'Poppins', sans-serif;
        font-size: 1rem;
        background-color: #fafafa;
        transition: border-color 0.3s, box-shadow 0.3s;
    }

    .form-group input:focus, 
    .form-group textarea:focus {
        border-color: #a4c935; /* Lime focus color */
        outline: none;
        box-shadow: 0 0 0 3px rgba(164, 201, 53, 0.2);
        background-color: #fff;
    }

    /* Button */
    .git-submit-btn {
        align-self: flex-start;
        background-color: #1f6b36; /* Dark Green Button */
        color: #fff;
        border: none;
        padding: 14px 40px;
        font-size: 1rem;
        font-weight: 600;
        border-radius: 4px;
        cursor: pointer;
        transition: background 0.3s, transform 0.2s;
        margin-top: 10px;
    }

    .git-submit-btn:hover {
        background-color: #154a25;
        transform: scale(1.02);
    }

    /* --- RESPONSIVE DESIGN --- */
    @media (max-width: 768px) {
        .git-title {
            font-size: 2.2rem;
        }

        .git-card {
            padding: 30px 20px;
            border-left-width: 6px; /* Slightly thinner border on mobile */
        }

        .form-row {
            grid-template-columns: 1fr; /* Stack inputs vertically */
            gap: 20px;
        }

        .git-submit-btn {
            width: 100%; /* Full width button on mobile */
        }
    }

    /* --- CONNECT SECTION STYLES --- */
    .connect-section {
        /* Deep Dark Green/Black Gradient */
        background: radial-gradient(circle at top center, #1a2e1f 0%, #0d1216 80%);
        padding: 80px 20px;
        font-family: 'Poppins', sans-serif;
        color: #ffffff;
    }

    .connect-container {
        max-width: 1055px; /* Matches previous form width */
        margin: 0 auto;
    }

    /* Heading */
    .connect-title {
        font-size: 2.5rem;
        font-weight: 400; /* Thin/Light style */
        margin-bottom: 40px;
        color: #fff;
    }

    /* Cards Grid */
    .connect-grid {
        display: grid;
        grid-template-columns: 1fr 1fr; /* 50/50 Split */
        gap: 30px;
        margin-bottom: 50px;
    }

    /* Card Style */
    .connect-card {
        border: 1px solid #5a8c2a; /* Thin Green Border */
        border-radius: 4px;
        padding: 30px;
        background-color: rgba(255, 255, 255, 0.02); /* Very subtle fill */
        transition: transform 0.3s ease, background 0.3s;
    }

    .connect-card:hover {
        transform: translateY(-5px);
        background-color: rgba(255, 255, 255, 0.05);
    }

    .cc-title {
        font-size: 1.2rem;
        font-weight: 400;
        color: #e0e0e0; /* Off-white title */
        margin-bottom: 15px;
    }

    .cc-text {
        font-size: 1rem;
        color: #fff;
        line-height: 1.5;
        font-weight: 300;
        margin-bottom: 20px;
    }

    /* Social Links */
    .cc-links {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .cc-link {
        background-color: #dceb82; /* Light Lime Tag */
        color: #0f2b15;
        text-decoration: none;
        padding: 4px 10px;
        font-size: 0.9rem;
        font-weight: 600;
        border-radius: 2px;
        transition: background 0.3s;
    }

    .cc-link:hover {
        background-color: #fff;
    }

    .cc-sep {
        color: #5a8c2a;
    }

    /* Divider */
    .connect-divider {
        width: 100%;
        height: 1px;
        background-color: rgba(255, 255, 255, 0.2);
        margin-bottom: 40px;
    }

    /* Quote Box */
    .connect-quote-box {
        border-left: 4px solid #7cb342; /* Bright Green Bar */
        padding-left: 20px;
    }

    .connect-quote {
        font-size: 1rem;
        color: #cccccc;
        font-style: italic;
        line-height: 1.6;
        font-weight: 300;
    }

    /* --- RESPONSIVE DESIGN --- */
    @media (max-width: 768px) {
        .connect-grid {
            grid-template-columns: 1fr; /* Stack cards vertically */
            gap: 20px;
        }

        .connect-title {
            font-size: 2rem;
        }

        .connect-quote {
            font-size: 0.95rem;
        }
    }