/*==================================================
        FRESH HARVEST
        PREMIUM WEBSITE CSS
===================================================*/

/*==========================
        GOOGLE FONT
==========================*/

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

/*==========================
        RESET
==========================*/

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

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Poppins',sans-serif;

    background:#F7FAF5;

    color:#222;

    overflow-x:hidden;

    line-height:1.7;

}

/*==========================
        VARIABLES
==========================*/

:root{

    --primary:#2E7D32;

    --primary-dark:#1B5E20;

    --secondary:#4CAF50;

    --accent:#FFC107;

    --white:#ffffff;

    --light:#F7FAF5;

    --gray:#777;

    --dark:#222;

    --shadow:0 15px 40px rgba(0,0,0,.08);

    --radius:18px;

    --transition:.35s;

}

/*==========================
        IMAGES
==========================*/

img{

    width:100%;

    display:block;

}

/*==========================
        LINKS
==========================*/

a{

    text-decoration:none;

    color:inherit;

}

/*==========================
        LIST
==========================*/

ul{

    list-style:none;

}

/*==========================
        CONTAINER
==========================*/

.container{

    width:min(1180px,90%);

    margin:auto;

}

/*==========================
        SECTION
==========================*/

section{

    padding:90px 0;

}

/*==========================
        TITLES
==========================*/

.section-title{

    text-align:center;

    margin-bottom:60px;

}

.section-title span{

    color:var(--primary);

    font-size:14px;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

}

.section-title h2{

    font-size:42px;

    margin-top:15px;

    color:var(--dark);

}

.section-title p{

    margin-top:15px;

    color:var(--gray);

    max-width:700px;

    margin-inline:auto;

}

/*==========================
        BUTTONS
==========================*/

.primary-btn{

    display:inline-block;

    background:var(--primary);

    color:#fff;

    padding:14px 34px;

    border-radius:50px;

    font-weight:600;

    transition:.35s;

    box-shadow:var(--shadow);

}

.primary-btn:hover{

    background:var(--primary-dark);

    transform:translateY(-4px);

}

.secondary-btn{

    display:inline-block;

    border:2px solid var(--primary);

    color:var(--primary);

    padding:14px 34px;

    border-radius:50px;

    font-weight:600;

    transition:.35s;

}

.secondary-btn:hover{

    background:var(--primary);

    color:#fff;

}

/*==========================
        CARDS
==========================*/

.product-card,
.package-card,
.review-card,
.why-card,
.process-card{

    background:#fff;

    border-radius:20px;

    box-shadow:var(--shadow);

    transition:.35s;

}

.product-card:hover,
.package-card:hover,
.review-card:hover,
.why-card:hover,
.process-card:hover{

    transform:translateY(-8px);

}

/*==========================
        GRID
==========================*/

.product-grid,
.package-grid,
.review-grid,
.why-grid{

    display:grid;

    gap:30px;

}

/*==========================
        TEXT
==========================*/

h1,h2,h3,h4{

    font-weight:700;

    color:var(--dark);

}

p{

    color:var(--gray);

}

/*==========================
        SPACING HELPERS
==========================*/

.mt-20{margin-top:20px;}
.mt-40{margin-top:40px;}
.mb-20{margin-bottom:20px;}
.mb-40{margin-bottom:40px;}

/*==========================
        END OF PART 1
==========================*/
/*==================================================
                HEADER
==================================================*/

.header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    background:rgba(255,255,255,.95);

    backdrop-filter:blur(15px);

    z-index:999;

    box-shadow:0 5px 20px rgba(0,0,0,.08);

    transition:.35s;

}

.nav-container{

    display:flex;

    align-items:center;

    justify-content:space-between;

    min-height:85px;

}

/*==================================================
                LOGO
==================================================*/

.logo{

    display:flex;

    align-items:center;

    gap:12px;

    font-size:28px;

    font-weight:800;

    color:var(--primary);

}

.logo img{

    width:50px;

}

.logo span{

    color:var(--primary-dark);

}

/*==================================================
                NAVBAR
==================================================*/

.navbar{

    display:flex;

    align-items:center;

    gap:35px;

}

.navbar a{

    font-size:16px;

    font-weight:600;

    color:#444;

    position:relative;

    transition:.3s;

}

.navbar a:hover{

    color:var(--primary);

}

.navbar a.active{

    color:var(--primary);

}

.navbar a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:3px;

    border-radius:20px;

    background:var(--primary);

    transition:.3s;

}

.navbar a:hover::after,

.navbar a.active::after{

    width:100%;

}

/*==================================================
            NAVIGATION BUTTONS
==================================================*/

.nav-buttons{

    display:flex;

    gap:15px;

}

.call-btn{

    background:#fff;

    color:var(--primary);

    border:2px solid var(--primary);

    padding:12px 22px;

    border-radius:50px;

    display:flex;

    align-items:center;

    gap:8px;

    font-weight:600;

    transition:.35s;

}

.call-btn:hover{

    background:var(--primary);

    color:#fff;

}

.whatsapp-btn{

    background:#25D366;

    color:#fff;

    padding:12px 22px;

    border-radius:50px;

    display:flex;

    align-items:center;

    gap:8px;

    font-weight:600;

    transition:.35s;

}

.whatsapp-btn:hover{

    transform:translateY(-3px);

    box-shadow:0 12px 30px rgba(37,211,102,.35);

}

/*==================================================
            MOBILE MENU
==================================================*/

.menu-toggle{

    display:none;

    font-size:34px;

    color:var(--primary);

    cursor:pointer;

}

/*==================================================
            HEADER ON SCROLL
==================================================*/

.header.scrolled{

    min-height:70px;

    background:#fff;

    box-shadow:0 12px 30px rgba(0,0,0,.12);

}
/*==================================================
                    HERO SECTION
==================================================*/

.hero{

    padding:170px 0 120px;

    background:linear-gradient(135deg,#F7FAF5 0%,#EDF8EC 100%);

    position:relative;

    overflow:hidden;

}

.hero::before{

    content:"";

    position:absolute;

    width:600px;

    height:600px;

    background:rgba(76,175,80,.08);

    border-radius:50%;

    top:-220px;

    right:-220px;

}

.hero::after{

    content:"";

    position:absolute;

    width:350px;

    height:350px;

    background:rgba(255,193,7,.08);

    border-radius:50%;

    bottom:-150px;

    left:-120px;

}

.hero-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:70px;

    position:relative;

    z-index:2;

}

/*================ HERO CONTENT ================*/

.hero-left h1{

    font-size:65px;

    line-height:1.1;

    margin:20px 0;

    color:var(--dark);

}

.hero-left h1 span{

    color:var(--primary);

}

.hero-left p{

    font-size:18px;

    color:#666;

    max-width:550px;

    margin-bottom:35px;

}

.hero-tag{

    display:inline-block;

    padding:10px 22px;

    background:#E8F5E9;

    color:var(--primary);

    border-radius:40px;

    font-size:14px;

    font-weight:700;

    letter-spacing:.5px;

}

/*================ HERO BUTTONS ================*/

.hero-buttons{

    display:flex;

    gap:20px;

    margin-bottom:45px;

}

.hero-buttons .primary-btn{

    padding:16px 38px;

}

.hero-buttons .secondary-btn{

    padding:16px 38px;

}

/*================ HERO FEATURES ================*/

.hero-features{

    display:flex;

    flex-wrap:wrap;

    gap:18px;

}

.feature-box{

    display:flex;

    align-items:center;

    gap:12px;

    padding:15px 22px;

    background:#fff;

    border-radius:15px;

    box-shadow:0 12px 25px rgba(0,0,0,.08);

    transition:.35s;

}

.feature-box:hover{

    transform:translateY(-6px);

}

.feature-box i{

    width:45px;

    height:45px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:var(--primary);

    color:#fff;

    font-size:20px;

}

.feature-box span{

    font-weight:600;

}

/*================ HERO IMAGE ================*/

.hero-right{

    display:flex;

    justify-content:center;

    align-items:center;

    position:relative;

}

.hero-right img{

    width:100%;

    max-width:500px;

    animation:floatImage 5s ease-in-out infinite;

    filter:drop-shadow(0 35px 50px rgba(0,0,0,.18));

}

/*================ FLOATING BADGES ================*/

.hero-right::before{

    content:"100% Natural";

    position:absolute;

    top:40px;

    left:-30px;

    background:#fff;

    color:var(--primary);

    padding:12px 22px;

    border-radius:50px;

    font-weight:700;

    box-shadow:var(--shadow);

}

.hero-right::after{

    content:"Premium Quality";

    position:absolute;

    bottom:50px;

    right:-20px;

    background:#fff;

    color:var(--primary);

    padding:12px 22px;

    border-radius:50px;

    font-weight:700;

    box-shadow:var(--shadow);

}

/*================ FLOAT ANIMATION ================*/

@keyframes floatImage{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-20px);

    }

    100%{

        transform:translateY(0);

    }

}
/*==================================================
                ABOUT PREVIEW
==================================================*/

.about-preview{

    padding:120px 0;

    background:#ffffff;

}

.about-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:center;

}

/*==========================
        IMAGE
==========================*/

.about-image{

    position:relative;

}

.about-image img{

    width:100%;

    border-radius:30px;

    box-shadow:0 25px 60px rgba(0,0,0,.12);

    transition:.4s;

}

.about-image img:hover{

    transform:scale(1.03);

}

/* Decorative Background */

.about-image::before{

    content:"";

    position:absolute;

    width:180px;

    height:180px;

    background:rgba(46,125,50,.12);

    border-radius:30px;

    left:-25px;

    top:-25px;

    z-index:-1;

}

.about-image::after{

    content:"";

    position:absolute;

    width:180px;

    height:180px;

    background:rgba(255,193,7,.15);

    border-radius:30px;

    right:-25px;

    bottom:-25px;

    z-index:-1;

}

/*==========================
        CONTENT
==========================*/

.about-content{

    display:flex;

    flex-direction:column;

    justify-content:center;

}

.section-tag{

    display:inline-block;

    width:max-content;

    background:#E8F5E9;

    color:var(--primary);

    padding:10px 24px;

    border-radius:50px;

    font-size:14px;

    font-weight:700;

    letter-spacing:1px;

    margin-bottom:20px;

}

.about-content h2{

    font-size:46px;

    line-height:1.25;

    margin-bottom:25px;

}

.about-content p{

    color:#666;

    font-size:17px;

    margin-bottom:35px;

}

/*==========================
        LIST
==========================*/

.about-list{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:18px;

    margin-bottom:40px;

}

.about-list li{

    display:flex;

    align-items:center;

    gap:12px;

    font-size:16px;

    font-weight:500;

    color:#444;

}

.about-list i{

    width:38px;

    height:38px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:var(--primary);

    color:#fff;

    border-radius:50%;

    font-size:18px;

    flex-shrink:0;

}

/*==========================
        STATS
==========================*/

.about-stats{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:20px;

    margin:45px 0;

}

.stat-card{

    background:#fff;

    border-radius:20px;

    padding:28px 18px;

    text-align:center;

    box-shadow:0 15px 35px rgba(0,0,0,.08);

    transition:.35s;

}

.stat-card:hover{

    transform:translateY(-8px);

}

.stat-card h3{

    font-size:34px;

    color:var(--primary);

    margin-bottom:8px;

}

.stat-card p{

    font-size:14px;

    color:#666;

    margin:0;

}

/*==========================
        BUTTON
==========================*/

.about-content .primary-btn{

    width:max-content;

    padding:16px 38px;

}

/*==========================
        END ABOUT
==========================*/
/*==================================================
                FEATURED PRODUCTS
==================================================*/

.featured-products{

    padding:120px 0;

    background:#F8FCF7;

}

.product-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));

    gap:35px;

    margin-top:60px;

}

/*==========================
        PRODUCT CARD
==========================*/

.product-card{

    background:#fff;

    border-radius:25px;

    overflow:hidden;

    text-align:center;

    padding:30px;

    position:relative;

    transition:.4s;

    box-shadow:0 15px 35px rgba(0,0,0,.08);

}

.product-card:hover{

    transform:translateY(-12px);

    box-shadow:0 25px 60px rgba(0,0,0,.15);

}

/*==========================
        PRODUCT IMAGE
==========================*/

.product-card img{

    width:220px;

    height:220px;

    object-fit:contain;

    margin:auto;

    transition:.4s;

}

.product-card:hover img{

    transform:scale(1.08);

}

/*==========================
        BADGE
==========================*/

.product-badge{

    position:absolute;

    top:20px;

    left:20px;

    background:var(--accent);

    color:#222;

    font-size:13px;

    font-weight:700;

    padding:8px 16px;

    border-radius:50px;

    text-transform:uppercase;

}

/*==========================
        PRODUCT TITLE
==========================*/

.product-card h3{

    font-size:28px;

    margin-top:25px;

    color:var(--dark);

}

.product-card p{

    margin:15px 0;

    color:#666;

    min-height:55px;

}

/*==========================
        PRICE
==========================*/

.product-card h4{

    font-size:34px;

    color:var(--primary);

    margin-bottom:25px;

}

/*==========================
        BUTTON
==========================*/

.product-card .primary-btn{

    width:100%;

    padding:16px;

    border-radius:50px;

}

/*==========================
        FEATURES
==========================*/

.product-features{

    margin-top:20px;

    display:flex;

    flex-direction:column;

    gap:10px;

    text-align:left;

}

.product-features li{

    display:flex;

    align-items:center;

    gap:10px;

    color:#555;

    font-size:15px;

}

.product-features i{

    color:var(--primary);

    font-size:18px;

}

/*==========================
        RATING
==========================*/

.rating{

    color:#FFC107;

    margin:15px 0;

    font-size:18px;

    letter-spacing:3px;

}

/*==========================
        PRODUCT CARD HOVER
==========================*/

.product-card::before{

    content:"";

    position:absolute;

    width:120%;

    height:120%;

    background:linear-gradient(
        135deg,
        transparent,
        rgba(76,175,80,.08),
        transparent
    );

    top:-100%;

    left:-100%;

    transition:.7s;

}

.product-card:hover::before{

    top:0;

    left:0;

}
/*==================================================
            WHY CHOOSE US
==================================================*/

.why-choose{
    padding:120px 0;
    background:#ffffff;
}

.why-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:30px;
    margin-top:60px;
}

.why-card{
    background:#fff;
    padding:40px 30px;
    border-radius:25px;
    text-align:center;
    box-shadow:0 15px 40px rgba(0,0,0,.08);
    transition:.35s;
    border:1px solid #eee;
}

.why-card:hover{
    transform:translateY(-10px);
    box-shadow:0 25px 60px rgba(0,0,0,.12);
}

.why-card i{
    width:80px;
    height:80px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:auto;
    margin-bottom:25px;
    border-radius:50%;
    background:linear-gradient(135deg,#4CAF50,#2E7D32);
    color:#fff;
    font-size:34px;
}

.why-card h3{
    font-size:24px;
    margin-bottom:15px;
    color:var(--dark);
}

.why-card p{
    color:#666;
    line-height:1.8;
}

/*==================================================
            MANUFACTURING PROCESS
==================================================*/

.process-section{
    padding:120px 0;
    background:#F8FCF7;
}

.process-grid{
    display:grid;
    grid-template-columns:repeat(9,1fr);
    align-items:center;
    gap:20px;
    margin-top:70px;
}

.process-card{
    background:#fff;
    border-radius:25px;
    padding:30px 20px;
    text-align:center;
    box-shadow:0 15px 40px rgba(0,0,0,.08);
    transition:.35s;
}

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

.process-icon{
    width:80px;
    height:80px;
    margin:auto;
    margin-bottom:20px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:38px;
    background:#E8F5E9;
}

.process-card h3{
    margin-bottom:12px;
    font-size:22px;
    color:var(--dark);
}

.process-card p{
    color:#666;
    font-size:15px;
    line-height:1.7;
}

.process-arrow{
    font-size:34px;
    text-align:center;
    color:var(--primary);
    font-weight:700;
}
/*==================================================
            PACKAGE SECTION
==================================================*/

.package-section{
    padding:120px 0;
    background:#ffffff;
}

.package-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:30px;
    margin-top:60px;
}

.package-card{
    background:#fff;
    border-radius:25px;
    padding:35px 25px;
    text-align:center;
    box-shadow:0 15px 40px rgba(0,0,0,.08);
    border:1px solid #e9e9e9;
    transition:.35s ease;
    position:relative;
    overflow:hidden;
}

.package-card:hover{
    transform:translateY(-12px);
    box-shadow:0 25px 60px rgba(0,0,0,.12);
}

.package-card.featured{
    border:2px solid var(--primary);
    transform:scale(1.04);
}

.package-card img{
    width:150px;
    height:auto;
    margin-bottom:20px;
}

.package-card h3{
    font-size:24px;
    color:var(--dark);
    margin-bottom:12px;
}

.package-card p{
    color:#666;
    line-height:1.7;
    margin-bottom:20px;
}

.package-card h2{
    color:var(--primary);
    font-size:34px;
    margin-bottom:20px;
}

.badge{
    position:absolute;
    top:18px;
    right:-45px;
    background:var(--primary);
    color:#fff;
    padding:8px 55px;
    font-size:12px;
    font-weight:700;
    transform:rotate(45deg);
    letter-spacing:1px;
}

.package-info{
    list-style:none;
    padding:0;
    margin:0 0 25px;
}

.package-info li{
    margin:10px 0;
    color:#555;
    font-size:15px;
}

/*==================================================
            CUSTOMER REVIEWS
==================================================*/

.review-section{
    padding:120px 0;
    background:#F8FCF7;
}

.review-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:30px;
    margin-top:60px;
}

.review-card{
    background:#fff;
    padding:35px;
    border-radius:25px;
    text-align:center;
    box-shadow:0 15px 40px rgba(0,0,0,.08);
    transition:.35s;
}

.review-card:hover{
    transform:translateY(-10px);
    box-shadow:0 25px 60px rgba(0,0,0,.12);
}

.review-card img{
    width:90px;
    height:90px;
    border-radius:50%;
    object-fit:cover;
    margin-bottom:20px;
    border:4px solid var(--primary);
}

.review-card h3{
    font-size:22px;
    color:var(--dark);
    margin-bottom:5px;
}

.review-card small{
    display:block;
    color:#777;
    margin-bottom:15px;
}

.stars{
    color:#FFC107;
    font-size:22px;
    margin-bottom:15px;
}

.review-card p{
    color:#555;
    line-height:1.8;
    margin-bottom:20px;
}

.verified-review{
    display:inline-block;
    padding:8px 18px;
    background:#E8F5E9;
    color:#2E7D32;
    border-radius:30px;
    font-size:14px;
    font-weight:600;
}

/*==================================================
                    FAQ
==================================================*/

.faq-section{
    padding:120px 0;
    background:#ffffff;
}

.faq{
    max-width:900px;
    margin:60px auto 0;
}

.faq details{
    background:#fff;
    border-radius:18px;
    margin-bottom:20px;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    overflow:hidden;
    transition:.3s;
}

.faq details[open]{
    box-shadow:0 15px 35px rgba(0,0,0,.12);
}

.faq summary{
    cursor:pointer;
    list-style:none;
    padding:22px 30px;
    font-size:18px;
    font-weight:600;
    color:var(--dark);
    position:relative;
}

.faq summary::-webkit-details-marker{
    display:none;
}

.faq summary::after{
    content:"+";
    position:absolute;
    right:30px;
    top:50%;
    transform:translateY(-50%);
    font-size:24px;
    color:var(--primary);
    transition:.3s;
}

.faq details[open] summary::after{
    content:"−";
}

.faq p{
    padding:0 30px 25px;
    color:#666;
    line-height:1.8;
}
/*==================================================
                CTA SECTION
==================================================*/

.cta-section{
    padding:120px 0;
    background:linear-gradient(135deg,#2E7D32,#4CAF50);
}

.cta-box{
    background:#ffffff;
    border-radius:30px;
    padding:70px 50px;
    text-align:center;
    box-shadow:0 25px 60px rgba(0,0,0,.15);
}

.cta-box h2{
    font-size:42px;
    color:var(--dark);
    margin-bottom:20px;
}

.cta-box p{
    color:#666;
    font-size:18px;
    margin-bottom:35px;
}

.cta-buttons{
    display:flex;
    justify-content:center;
    gap:20px;
    flex-wrap:wrap;
    margin-bottom:30px;
}

.cta-features{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:15px;
}

.cta-features span{
    background:#F1F8E9;
    color:#2E7D32;
    padding:10px 18px;
    border-radius:30px;
    font-size:15px;
    font-weight:600;
}

/*==================================================
                    FOOTER
==================================================*/

.footer{
    background:#111;
    color:#fff;
    padding:90px 0 30px;
}

.footer-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:40px;
    margin-bottom:50px;
}

.footer-column h3{
    font-size:22px;
    margin-bottom:20px;
    color:#fff;
}

.footer-logo{
    font-size:34px;
    margin-bottom:20px;
    color:#fff;
}

.footer-logo span{
    color:var(--primary);
}

.footer-column p{
    color:#cfcfcf;
    line-height:1.8;
    margin-bottom:12px;
}

.footer-column ul{
    list-style:none;
    padding:0;
}

.footer-column ul li{
    margin-bottom:12px;
}

.footer-column ul li a{
    color:#cfcfcf;
    text-decoration:none;
    transition:.3s;
}

.footer-column ul li a:hover{
    color:var(--primary);
    padding-left:6px;
}

.footer hr{
    border:none;
    height:1px;
    background:#333;
    margin:35px 0;
}

.copyright{
    text-align:center;
    color:#aaa;
    font-size:15px;
}

/*==================================================
            FLOATING BUTTONS
==================================================*/

.floating-whatsapp,
.floating-call{
    position:fixed;
    width:60px;
    height:60px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:28px;
    text-decoration:none;
    box-shadow:0 10px 30px rgba(0,0,0,.25);
    transition:.3s;
    z-index:999;
}

.floating-whatsapp{
    right:25px;
    bottom:25px;
    background:#25D366;
}

.floating-call{
    right:25px;
    bottom:100px;
    background:#2E7D32;
}

.floating-whatsapp:hover,
.floating-call:hover{
    transform:scale(1.1);
}

/* Floating Pulse Animation */

@keyframes pulse{

    0%{
        transform:scale(1);
        box-shadow:0 0 0 0 rgba(37,211,102,.6);
    }

    70%{
        transform:scale(1.08);
        box-shadow:0 0 0 18px rgba(37,211,102,0);
    }

    100%{
        transform:scale(1);
        box-shadow:0 0 0 0 rgba(37,211,102,0);
    }

}

.floating-whatsapp{
    animation:pulse 2s infinite;
}
/*==================================================
                POPUPS
==================================================*/

.popup{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,.65);
    display:none;
    align-items:center;
    justify-content:center;
    padding:20px;
    z-index:9999;
}

.popup.active{
    display:flex;
    animation:fadeIn .35s ease;
}

.popup-content{
    background:#fff;
    width:100%;
    max-width:520px;
    border-radius:25px;
    padding:40px;
    position:relative;
    box-shadow:0 30px 80px rgba(0,0,0,.25);
    animation:popupScale .35s ease;
}

.close-popup{
    position:absolute;
    right:20px;
    top:18px;
    font-size:30px;
    cursor:pointer;
    color:#999;
    transition:.3s;
}

.close-popup:hover{
    color:#f44336;
    transform:rotate(90deg);
}

/*==================================================
            SELECTED PRODUCT
==================================================*/

.selected-product{
    text-align:center;
    margin-bottom:30px;
}

.selected-product img{
    width:140px;
    height:auto;
    margin-bottom:15px;
}

.selected-product h3{
    font-size:24px;
    color:var(--dark);
    margin-bottom:8px;
}

.selected-product p{
    color:#666;
}

/*==================================================
                ORDER FORM
==================================================*/

#orderForm{
    display:flex;
    flex-direction:column;
    gap:18px;
}

#orderForm input,
#orderForm textarea,
#orderForm select{
    width:100%;
    padding:15px 18px;
    border:1px solid #ddd;
    border-radius:12px;
    outline:none;
    font-size:16px;
    transition:.3s;
    font-family:inherit;
}

#orderForm textarea{
    min-height:110px;
    resize:vertical;
}

#orderForm input:focus,
#orderForm textarea:focus,
#orderForm select:focus{
    border-color:var(--primary);
    box-shadow:0 0 0 3px rgba(76,175,80,.15);
}

#orderForm button{
    margin-top:10px;
}

/*==================================================
                PAYMENT
==================================================*/

.upi-qr{
    width:220px;
    display:block;
    margin:25px auto;
    border-radius:18px;
    border:6px solid #f5f5f5;
}

.payment-steps{
    background:#F8FCF7;
    border-radius:18px;
    padding:20px;
    margin:25px 0;
}

.payment-steps p{
    margin:10px 0;
    color:#555;
    font-size:15px;
}

/*==================================================
            SUCCESS POPUP
==================================================*/

.success-box{
    text-align:center;
}

.success-icon{
    font-size:90px;
    color:#4CAF50;
    margin-bottom:20px;
}

.success-box h2{
    font-size:36px;
    margin-bottom:15px;
    color:var(--dark);
}

.success-box p{
    color:#666;
    line-height:1.8;
    margin-bottom:30px;
}

/*==================================================
                SCROLLBAR
==================================================*/

::-webkit-scrollbar{
    width:10px;
}

::-webkit-scrollbar-track{
    background:#f1f1f1;
}

::-webkit-scrollbar-thumb{
    background:var(--primary);
    border-radius:10px;
}

::-webkit-scrollbar-thumb:hover{
    background:#2E7D32;
}

/*==================================================
                ANIMATIONS
==================================================*/

@keyframes popupScale{

    from{
        opacity:0;
        transform:scale(.8);
    }

    to{
        opacity:1;
        transform:scale(1);
    }

}

@keyframes fadeIn{

    from{
        opacity:0;
    }

    to{
        opacity:1;
    }

}
/*==========================================
        RIPPLE EFFECT
==========================================*/

.primary-btn,
.secondary-btn{

    position:relative;
    overflow:hidden;

}

.ripple{

    position:absolute;

    width:20px;

    height:20px;

    background:rgba(255,255,255,.6);

    border-radius:50%;

    transform:translate(-50%,-50%) scale(0);

    animation:ripple .6s linear;

}

@keyframes ripple{

    to{

        transform:translate(-50%,-50%) scale(18);

        opacity:0;

    }

}

/*==========================================
        SCROLL TO TOP
==========================================*/

.scroll-top{

    position:fixed;

    right:25px;

    bottom:170px;

    width:50px;

    height:50px;

    border:none;

    border-radius:50%;

    background:var(--primary);

    color:#fff;

    font-size:22px;

    cursor:pointer;

    display:none;

    z-index:999;

    box-shadow:0 10px 25px rgba(0,0,0,.2);

}

.scroll-top.show{

    display:block;

}
.header{
    z-index:999999 !important;
}

.navbar{
    position:relative;
    z-index:999999 !important;
}

.hero::before,
.hero::after{
    pointer-events:none;
}

.hero{
    position:relative;
    z-index:1;
}
/*==================================================
                PAGE BANNER
==================================================*/

.page-banner{

    padding:170px 0 90px;

    background:linear-gradient(135deg,#F7FAF5,#E8F5E9);

    text-align:center;

    position:relative;

    overflow:hidden;

}

.page-banner::before{

    content:"";

    position:absolute;

    width:350px;

    height:350px;

    background:rgba(76,175,80,.08);

    border-radius:50%;

    top:-120px;

    right:-120px;

}

.page-banner::after{

    content:"";

    position:absolute;

    width:250px;

    height:250px;

    background:rgba(255,193,7,.10);

    border-radius:50%;

    bottom:-100px;

    left:-100px;

}

.page-banner-content{

    position:relative;

    z-index:2;

}

.page-banner h1{

    font-size:54px;

    color:var(--dark);

    margin-bottom:18px;

}

.page-banner p{

    font-size:18px;

    color:#666;

    max-width:700px;

    margin:0 auto 30px;

}

.breadcrumb{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:12px;

    flex-wrap:wrap;

}

.breadcrumb a{

    color:var(--primary);

    font-weight:600;

}

.breadcrumb span{

    color:#666;

}

.breadcrumb .active{

    color:var(--dark);

    font-weight:600;

}
/*==================================================
        MISSION & VISION
==================================================*/

.mission-section{

    padding:120px 0;

    background:#F8FCF7;

}

.mission-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));

    gap:30px;

    margin-top:60px;

}

.mission-card{

    background:#fff;

    padding:40px 30px;

    border-radius:25px;

    text-align:center;

    box-shadow:var(--shadow);

    transition:.35s;

}

.mission-card:hover{

    transform:translateY(-10px);

}

.mission-icon{

    width:80px;

    height:80px;

    margin:auto;

    margin-bottom:25px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:linear-gradient(135deg,#4CAF50,#2E7D32);

    color:#fff;

    font-size:34px;

}

.mission-card h3{

    margin-bottom:18px;

}

/*==================================================
        EXPERIENCE
==================================================*/

.experience-section{

    padding:100px 0;

    background:#ffffff;

}

.experience-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

    gap:30px;

}

.experience-card{

    background:#fff;

    text-align:center;

    padding:40px;

    border-radius:20px;

    box-shadow:var(--shadow);

}

.experience-card h2{

    font-size:48px;

    color:var(--primary);

    margin-bottom:10px;

}
/*==================================================
        ABOUT PAGE FINAL
==================================================*/

.statistics-section{

    padding:120px 0;

    background:#ffffff;

}

.certificate-section{

    padding:120px 0;

    background:#F8FCF7;

}

.certificate-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

    gap:30px;

    margin-top:60px;

}

.certificate-card{

    background:#fff;

    border-radius:25px;

    overflow:hidden;

    text-align:center;

    box-shadow:var(--shadow);

    transition:.35s;

}

.certificate-card:hover{

    transform:translateY(-10px);

}

.certificate-card img{

    width:100%;

    height:250px;

    object-fit:cover;

}

.certificate-card h3{

    padding:25px;

}

.promise-section{

    padding:120px 0;

    background:#2E7D32;

}

.promise-box{

    background:#fff;

    padding:70px;

    border-radius:30px;

    text-align:center;

    box-shadow:0 20px 50px rgba(0,0,0,.15);

}

.promise-box h2{

    margin-bottom:20px;

}

.promise-box p{

    max-width:700px;

    margin:0 auto 35px;

}
/*==================================================
            PRODUCT INTRO
==================================================*/

.product-intro{

    padding:100px 0 40px;

    background:#ffffff;

}

.product-intro .section-title{

    margin-bottom:0;

}
/*==================================================
            PRODUCT PAGE
==================================================*/

.featured-products{

    padding:120px 0;

    background:#F8FCF7;

}

.product-card{

    min-height:650px;

}

.product-card h4{

    margin:20px 0;

}

.product-features{

    margin-bottom:25px;

}

.product-card .primary-btn{

    margin-top:auto;

}
/*==================================================
        PRODUCT PAGE EXTRA
==================================================*/

.nutrition-section{

    padding:120px 0;

    background:#ffffff;

}

.nutrition-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

    gap:30px;

    margin-top:60px;

}

.nutrition-card{

    background:#fff;

    text-align:center;

    padding:40px 30px;

    border-radius:25px;

    box-shadow:var(--shadow);

    transition:.35s;

}

.nutrition-card:hover{

    transform:translateY(-10px);

}

.nutrition-card i{

    font-size:48px;

    color:var(--primary);

    margin-bottom:20px;

}

.packaging-section{

    padding:120px 0;

    background:#F8FCF7;

}

.quality-process{

    padding:120px 0;

    background:#ffffff;

}
/*==================================================
                SHOP INTRO
==================================================*/

.shop-intro{

    padding:100px 0 50px;

    background:#ffffff;

}

.shop-intro .section-title{

    margin-bottom:0;

}
/*==================================================
                SHOP PRODUCTS
==================================================*/

.shop-products{

    padding:120px 0;

    background:#F8FCF7;

}

.shop-toolbar{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:30px;

    flex-wrap:wrap;

    margin-bottom:50px;

}

.shop-search{

    flex:1;

    min-width:280px;

    position:relative;

}

.shop-search i{

    position:absolute;

    left:18px;

    top:50%;

    transform:translateY(-50%);

    color:#666;

}

.shop-search input{

    width:100%;

    padding:15px 20px 15px 50px;

    border:2px solid #eee;

    border-radius:50px;

    outline:none;

    font-size:16px;

}

.shop-search input:focus{

    border-color:var(--primary);

}

.shop-filter{

    display:flex;

    gap:12px;

    flex-wrap:wrap;

}

.filter-btn{

    padding:12px 22px;

    border:none;

    border-radius:30px;

    background:#fff;

    cursor:pointer;

    font-weight:600;

    box-shadow:0 8px 20px rgba(0,0,0,.08);

}

.filter-btn.active,
.filter-btn:hover{

    background:var(--primary);

    color:#fff;

}

.shop-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

    gap:35px;

}

.shop-card{

    position:relative;

    background:#fff;

    border-radius:25px;

    padding:30px;

    text-align:center;

    box-shadow:0 15px 35px rgba(0,0,0,.08);

    transition:.35s;

}

.shop-card:hover{

    transform:translateY(-10px);

}

.shop-card img{

    width:220px;

    height:220px;

    object-fit:contain;

    margin-bottom:20px;

}

.shop-badge{

    position:absolute;

    top:20px;

    left:20px;

    background:#FF9800;

    color:#fff;

    padding:6px 14px;

    border-radius:20px;

    font-size:13px;

    font-weight:600;

}

.shop-card h3{

    margin:15px 0;

}

.shop-card p{

    color:#666;

    margin-bottom:15px;

}

.shop-card h4{

    color:var(--primary);

    font-size:28px;

    margin-bottom:20px;

}
/*==================================================
                SHOP POPUPS
==================================================*/

.popup-overlay{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.65);

    display:none;

    justify-content:center;

    align-items:center;

    z-index:9999;

    padding:20px;

}

.popup-overlay.active{

    display:flex;

}

.popup-content{

    background:#fff;

    width:100%;

    max-width:520px;

    border-radius:25px;

    padding:35px;

    position:relative;

    overflow:auto;

    max-height:90vh;

}

.close-popup{

    position:absolute;

    top:18px;

    right:22px;

    font-size:30px;

    cursor:pointer;

}

.form-group{

    margin-bottom:20px;

}

.form-group label{

    display:block;

    margin-bottom:8px;

    font-weight:600;

}

.form-group input,
.form-group textarea{

    width:100%;

    padding:14px;

    border:2px solid #ddd;

    border-radius:12px;

    outline:none;

    font-size:16px;

}

.form-group input:focus,
.form-group textarea:focus{

    border-color:var(--primary);

}

.payment-box{

    text-align:center;

}

.payment-box img{

    width:220px;

    margin:20px auto;

}

.payment-steps{

    text-align:left;

    margin:25px 0;

    padding-left:22px;

}

.success-box{

    text-align:center;

}

.success-icon{

    font-size:70px;

    margin-bottom:20px;

}
/*==================================================
                CONTACT INTRO
==================================================*/

.contact-intro{

    padding:100px 0 50px;

    background:#ffffff;

}

.contact-intro .section-title{

    margin-bottom:0;

}
/*==================================================
            CONTACT SECTION
==================================================*/

.contact-section{

    padding:120px 0;

    background:#F8FCF7;

}

.contact-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:60px;

    align-items:start;

}

.contact-info h2{

    margin-bottom:20px;

}

.contact-info>p{

    margin-bottom:35px;

    color:#666;

}

.contact-card{

    display:flex;

    gap:20px;

    align-items:flex-start;

    background:#fff;

    padding:20px;

    border-radius:18px;

    margin-bottom:20px;

    box-shadow:0 10px 25px rgba(0,0,0,.08);

}

.contact-card i{

    width:60px;

    height:60px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:var(--primary);

    color:#fff;

    font-size:24px;

}

.contact-card h4{

    margin-bottom:8px;

}

.business-hours{

    background:#fff;

    margin-top:30px;

    padding:30px;

    border-radius:20px;

    box-shadow:0 10px 25px rgba(0,0,0,.08);

}

.business-hours ul{

    list-style:none;

    padding:0;

    margin-top:20px;

}

.business-hours li{

    display:flex;

    justify-content:space-between;

    margin-bottom:15px;

}

.contact-form-wrapper{

    background:#fff;

    padding:40px;

    border-radius:25px;

    box-shadow:0 15px 35px rgba(0,0,0,.08);

}

.contact-form-wrapper h2{

    margin-bottom:30px;

}

.contact-form textarea{

    resize:none;

}

.contact-form button{

    width:100%;

}
/*==================================================
                MAP SECTION
==================================================*/

.map-section{

    padding:120px 0;

    background:#ffffff;

}

.map-wrapper{

    margin-top:50px;

    border-radius:25px;

    overflow:hidden;

    box-shadow:0 15px 35px rgba(0,0,0,.12);

}

.map-wrapper iframe{

    width:100%;

    height:500px;

    border:none;

}

/*==================================================
                TRUST SECTION
==================================================*/

.trust-section{

    padding:120px 0;

    background:#F8FCF7;

}
/*==================================================
            SCROLL TO TOP
==================================================*/

.scroll-top{

    position:fixed;

    right:25px;

    bottom:105px;

    width:55px;

    height:55px;

    border:none;

    border-radius:50%;

    background:var(--primary);

    color:#fff;

    font-size:22px;

    cursor:pointer;

    display:none;

    justify-content:center;

    align-items:center;

    box-shadow:0 12px 25px rgba(0,0,0,.2);

    z-index:999;

    transition:.35s;

}

.scroll-top.show{

    display:flex;

}

.scroll-top:hover{

    transform:translateY(-6px);

}
/*==================================================
            ORDER POPUP IMPROVEMENTS
==================================================*/

.popup-subtitle{

    color:#666;

    margin:8px 0 25px;

    line-height:1.6;

}

.close-popup{

    border:none;

    background:transparent;

    color:#333;

    line-height:1;

    padding:0;

}

.close-popup:hover{

    color:var(--primary);

    transform:rotate(90deg);

}

.popup-content .primary-btn{

    width:100%;

    border:none;

    cursor:pointer;

}

.payment-steps li{

    margin-bottom:12px;

    line-height:1.6;

}

.success-icon{

    width:80px;

    height:80px;

    margin:0 auto 20px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#e8f5e9;

    color:var(--primary);

    font-size:45px;

    font-weight:700;

}