/* ==========================================
   Glow & Grow Herbal Care
   Premium Style Sheet
========================================== */

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

html{
    scroll-behavior:smooth;
}

body{

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

    background:#ffffff;

    color:#222;

    overflow-x:hidden;

}

/* ==========================
Container
========================== */

.container{

    width:90%;

    max-width:1300px;

    margin:auto;

}

/* ==========================
Top Bar
========================== */

.top-bar{

    background:#0c7b45;

    color:#fff;

    font-size:14px;

    padding:10px 0;

}

.top-bar .container{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.top-icons a{

    color:white;

    margin-left:18px;

    transition:.3s;

}

.top-icons a:hover{

    color:#FFD95A;

}

/* ==========================
Header
========================== */

header{

    width:100%;

    position:sticky;

    top:0;

    z-index:999;

    background:white;

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

}

.nav{

    display:flex;

    justify-content:space-between;

    align-items:center;

    height:90px;

}

/* ==========================
Logo
========================== */

.logo{

    display:flex;

    align-items:center;

    text-decoration:none;

}

.logo img{

    width:70px;

    margin-right:15px;

}

.logo h2{

    color:#0c7b45;

    font-size:30px;

    font-weight:700;

}

.logo span{

    color:#777;

    font-size:14px;

}

/* ==========================
Navigation
========================== */

nav ul{

    list-style:none;

    display:flex;

}

nav ul li{

    margin:0 18px;

}

nav ul li a{

    text-decoration:none;

    color:#222;

    font-weight:500;

    transition:.4s;

}

nav ul li a:hover{

    color:#0c7b45;

}

/* ==========================
Buttons
========================== */

.order-btn{

    background:#0c7b45;

    color:white;

    padding:14px 28px;

    border-radius:50px;

    text-decoration:none;

    transition:.3s;

    font-weight:600;

}

.order-btn:hover{

    background:#095b33;

}

.btn-green{

    display:inline-block;

    padding:16px 36px;

    background:#0c7b45;

    color:white;

    border-radius:50px;

    text-decoration:none;

    margin-right:15px;

    transition:.4s;

}

.btn-green:hover{

    transform:translateY(-4px);

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

}

.btn-outline{

    display:inline-block;

    padding:16px 36px;

    border:2px solid #0c7b45;

    color:#0c7b45;

    border-radius:50px;

    text-decoration:none;

    transition:.4s;

}

.btn-outline:hover{

    background:#0c7b45;

    color:white;

}

/* ==========================
Hero
========================== */

.hero{

    position:relative;

    padding:90px 0;

    background:linear-gradient(
    135deg,
    #eefcf2,
    #ffffff);

}

.hero-content{

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:60px;

}

.badge{

    display:inline-block;

    background:#dff7e7;

    color:#0c7b45;

    padding:10px 20px;

    border-radius:50px;

    margin-bottom:25px;

    font-weight:600;

}

.hero h1{

    font-size:60px;

    line-height:1.2;

    margin-bottom:25px;

}

.hero h1 span{

    color:#0c7b45;

}

.hero p{

    color:#666;

    font-size:18px;

    line-height:1.9;

    margin-bottom:35px;

}

.hero-buttons{

    display:flex;

    flex-wrap:wrap;

}

.hero-right{

    text-align:center;

}

.hero-right img{

    width:100%;

    max-width:550px;

    object-fit:contain;

    animation:float 4s ease-in-out infinite;

    filter:drop-shadow(0 30px 40px rgba(0,0,0,.18));

}

/* ==========================
Floating Animation
========================== */

@keyframes float{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-20px);

}

100%{

transform:translateY(0px);

}

}

/* ==========================
Feature Strip
========================== */

.feature-strip{

    padding:40px 0;

    background:#0c7b45;

    color:white;

}

.strip-grid{

    display:grid;

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

    gap:25px;

    text-align:center;

}

.strip-grid i{

    font-size:40px;

    margin-bottom:15px;

    color:#FFD95A;

}

.strip-grid h4{

    font-size:20px;

}

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

.section-title{

text-align:center;

margin-bottom:60px;

}

.section-title span{

color:#0c7b45;

font-weight:600;

letter-spacing:2px;

text-transform:uppercase;

}

.section-title h2{

font-size:45px;

margin:15px 0;

}

.section-title p{

max-width:700px;

margin:auto;

color:#666;

line-height:1.8;

}

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

.featured-products{

padding:90px 0;

background:#fff;

}

.product-grid{

display:grid;

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

gap:35px;

}

.product-card{

background:#fff;

border-radius:20px;

overflow:hidden;

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

transition:.4s;

}

.product-card:hover{

transform:translateY(-12px);

}

.product-image{

position:relative;

background:#f4fff7;

padding:30px;

text-align:center;

}

.product-image img{

width:100%;

height:320px;

object-fit:contain;

}

.sale{

position:absolute;

top:20px;

left:20px;

background:#0c7b45;

color:#fff;

padding:8px 18px;

border-radius:40px;

font-size:12px;

font-weight:600;

}

.product-info{

padding:25px;

}

.product-info h3{

font-size:24px;

margin-bottom:15px;

}

.product-info p{

color:#666;

line-height:1.8;

margin-bottom:20px;

}

.product-footer{

display:flex;

justify-content:space-between;

align-items:center;

}

.product-footer h4{

color:#0c7b45;

font-size:28px;

}

.product-footer a{

background:#0c7b45;

color:white;

padding:12px 22px;

border-radius:40px;

text-decoration:none;

}

/*======================================
WHY US
======================================*/

.why-us{

padding:90px 0;

background:#eefcf2;

}

.why-grid{

display:grid;

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

gap:30px;

}

.why-card{

background:white;

padding:40px;

text-align:center;

border-radius:20px;

transition:.4s;

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

}

.why-card:hover{

transform:translateY(-10px);

}

.why-card i{

font-size:50px;

color:#0c7b45;

margin-bottom:20px;

}

.why-card h3{

margin-bottom:15px;

font-size:24px;

}

.why-card p{

color:#666;

line-height:1.8;

}

/*=====================================
CATEGORY
=====================================*/

.categories{

padding:100px 0;

background:white;

}

.category-grid{

display:grid;

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

gap:30px;

}

.category-card{

background:white;

border-radius:20px;

overflow:hidden;

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

transition:.4s;

text-align:center;

}

.category-card:hover{

transform:translateY(-10px);

}

.category-card img{

width:100%;

height:250px;

object-fit:cover;

}

.category-card h3{

margin:20px 0;

font-size:26px;

}

.category-card a{

display:inline-block;

margin-bottom:25px;

background:#0c7b45;

padding:12px 28px;

color:white;

border-radius:50px;

text-decoration:none;

}

/*=====================================
COUNTER
=====================================*/

.counter{

padding:80px 0;

background:#0c7b45;

color:white;

}

.counter-grid{

display:grid;

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

text-align:center;

gap:30px;

}

.counter-grid h2{

font-size:50px;

margin-bottom:10px;

}

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

.reviews{

padding:100px 0;

background:#f7fff8;

}

.review-grid{

display:grid;

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

gap:30px;

}

.review-card{

background:white;

padding:40px;

border-radius:20px;

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

font-size:18px;

line-height:1.8;

transition:.4s;

}

.review-card:hover{

transform:translateY(-10px);

}

.review-card h4{

margin-top:20px;

color:#0c7b45;

}

/*=====================================
INSTAGRAM
=====================================*/

.instagram-section{

padding:100px 0;

}

.instagram-grid{

display:grid;

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

gap:25px;

}

.insta-card{

overflow:hidden;

border-radius:18px;

}

.insta-btn {
  display: block;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  margin-top: 20px;
}

.follow-button {
  display: inline-flex; /* Text aur icon ko ek line mein laane ke liye */
  align-items: center;  /* Vertical alignment center karne ke liye */
  gap: 8px;             /* Text aur icon ke beech thodi jagah dene ke liye */
  background-color: #1b5e20;
  color: white;
  padding: 8px 16px;
  border-radius: 20px;
  text-decoration: none;
  font-weight: bold;
}

.follow-button:hover {
  background-color: #1b5e20;
}

.insta-card img{

width:100%;

height:280px;

object-fit:cover;

transition:.5s;

}

.insta-card:hover img{

transform:scale(1.08);

}

.insta-btn{

text-align:center;

margin-top:45px;

}

.insta-btn a{

background:#0c7b45;

padding:15px 35px;

color:#fff;

border-radius:50px;

text-decoration:none;

}

/* =====================================
   PREMIUM INSTAGRAM GALLERY
===================================== */

.instagram{
    background:#f7fbf8;
    padding:90px 0;
}

.instagram .instagram-grid{
    grid-template-columns:repeat(6,1fr);
    gap:18px;
}

.insta-card{
    position:relative;
    border-radius:16px;
    box-shadow:0 8px 25px rgba(0,0,0,.07);
    aspect-ratio:1/1;
}

.insta-card a{
    display:block;
    position:relative;
    width:100%;
    height:100%;
}

.insta-card img{
    height:100%;
}

.insta-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, rgba(12,123,69,.05), rgba(12,123,69,.85));
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:8px;
    color:#fff;
    opacity:0;
    transition:.35s;
}

.insta-overlay i{
    font-size:26px;
}

.insta-overlay span{
    font-size:14px;
    font-weight:600;
    letter-spacing:.3px;
}

.insta-card:hover .insta-overlay{
    opacity:1;
}

.insta-follow-buttons{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:16px;
    margin-top:40px;
}

.insta-follow-buttons .follow-button{
    background:#0c7b45;
    padding:14px 28px;
    border-radius:50px;
    font-size:15px;
}

.insta-follow-buttons .follow-button-alt{
    background:#095c34;
}

.insta-follow-buttons .follow-button:hover{
    background:#095c34;
    transform:translateY(-2px);
}

.insta-follow-buttons .follow-button-alt:hover{
    background:#095c34;
}



/*=====================================
NEWSLETTER
=====================================*/

.newsletter{

padding:90px 0;

background:#eefcf2;

}

.newsletter-box{

background:white;

padding:60px;

border-radius:25px;

text-align:center;

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

}

.newsletter-box h2{

font-size:42px;

margin-bottom:20px;

}

.newsletter-box form{

display:flex;

justify-content:center;

margin-top:30px;

}

.newsletter-box input{

width:400px;

padding:18px;

border:1px solid #ddd;

border-radius:50px 0 0 50px;

outline:none;

}

.newsletter-box button{

padding:18px 35px;

background:#0c7b45;

border:none;

color:white;

border-radius:0 50px 50px 0;

cursor:pointer;

}





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

footer{

background:#111;

color:white;

padding:70px 0 20px;

}

.footer-grid{

display:grid;

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

gap:35px;

}

.footer-grid h4{

margin-bottom:20px;

}

.footer-grid ul{

list-style:none;

}

.footer-grid ul li{

margin-bottom:12px;

}

.footer-grid ul li a{

color:#ddd;

text-decoration:none;

}

.social-links{

margin-top:20px;

}

.social-links a{

display:inline-flex;

justify-content:center;

align-items:center;

width:45px;

height:45px;

background:#0c7b45;

color:white;

border-radius:50%;

margin-right:10px;

text-decoration:none;

}

.copyright{

text-align:center;

margin-top:40px;

padding-top:20px;

border-top:1px solid rgba(255,255,255,.1);

}





/*=====================================
WHATSAPP
=====================================*/

.whatsapp{

position:fixed;

right:25px;

bottom:25px;

width:65px;

height:65px;

background:#25D366;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

color:white;

font-size:34px;

text-decoration:none;

z-index:9999;

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

}





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

#scrollTop{

position:fixed;

left:25px;

bottom:25px;

width:55px;

height:55px;

border:none;

background:#0c7b45;

color:white;

border-radius:50%;

cursor:pointer;

font-size:22px;

display:none;

z-index:999;

}

/*==================================
PRELOADER
==================================*/

.loader{

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

background:white;

display:flex;

justify-content:center;

align-items:center;

z-index:99999;

transition:.5s;

}

.loader-hidden{

opacity:0;

visibility:hidden;

}

.spinner{

width:70px;

height:70px;

border:8px solid #ddd;

border-top:8px solid #0c7b45;

border-radius:50%;

animation:spin 1s linear infinite;

}

@keyframes spin{

100%{

transform:rotate(360deg);

}

}

/*==================================
STICKY HEADER
==================================*/

header.sticky{

background:white;

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

transition:.3s;

}

/* ==========================
Hero Slider
========================== */

.hero-slide{
    display:none;
    animation:fade .8s;
}

.hero-slide.active{
    display:block;
}

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

/*=========================
FEATURED PRODUCTS
==========================*/

.featured-products{

padding:100px 0;

background:#fff;

}

.product-grid{

display:grid;

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

gap:35px;

}

.product-card{

background:white;

border-radius:20px;

overflow:hidden;

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

transition:.4s;

}

.product-card:hover{

transform:translateY(-12px);

}

.product-image{

background:#f8fff8;

padding:30px;

position:relative;

}

.product-image img{

width:100%;

height:320px;

object-fit:contain;

}

.product-badge{

position:absolute;

top:20px;

left:20px;

background:#0C7B45;

color:white;

padding:8px 18px;

border-radius:50px;

font-size:13px;

}

.product-content{

padding:25px;

}

.product-content h3{

margin-bottom:10px;

font-size:24px;

}

.product-content p{

color:#666;

margin-bottom:20px;

}

.price-row{

display:flex;

justify-content:space-between;

align-items:center;

}

.price{

font-size:28px;

font-weight:700;

color:#0C7B45;

}

.product-actions{

display:flex;

align-items:center;

flex-wrap:wrap;

gap:12px;

margin-top:16px;

}

.product-actions .add-cart{

padding:10px 22px;

border-radius:50px;

border:none;

background:#0c7b45;

color:#fff;

font-weight:600;

cursor:pointer;

transition:.3s;

}

.product-actions .add-cart:hover{

background:#095c34;

}

.product-actions .order-btn{

margin-left:auto;

}

/*=========================
WHY CHOOSE
==========================*/

.why-choose{

padding:100px 0;

background:#F8FFF8;

}

.why-grid{

display:grid;

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

gap:25px;

}

.why-box{

background:white;

padding:40px;

text-align:center;

border-radius:20px;

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

transition:.4s;

}

.why-box:hover{

transform:translateY(-10px);

}

.why-box i{

font-size:50px;

color:#0C7B45;

margin-bottom:20px;

}

/*=========================
COUNTER
==========================*/

.counter-section{

background:#0C7B45;

padding:80px 0;

color:white;

}

.counter-grid{

display:grid;

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

text-align:center;

}

.counter-grid h2{

font-size:48px;

margin-bottom:10px;

}

/*=========================
TESTIMONIALS
==========================*/

.testimonials{

padding:100px 0;

background:#fff;

}

.testimonial-grid{

display:grid;

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

gap:30px;

}

.testimonial-card{

background:white;

padding:35px;

border-radius:20px;

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

transition:.4s;

}

.testimonial-card:hover{

transform:translateY(-10px);

}

.stars{

font-size:22px;

color:#FFC107;

margin-bottom:20px;

}

.customer{

display:flex;

align-items:center;

margin-top:25px;

}

.customer img{

width:60px;

height:60px;

border-radius:50%;

margin-right:15px;

object-fit:cover;

}

/*=========================
INSTAGRAM
==========================*/

.instagram{

padding:100px 0;

background:#F8FFF8;

}

.instagram-grid{

display:grid;

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

gap:20px;

}

.instagram-grid img{

width:100%;

height:260px;

border-radius:15px;

object-fit:cover;

transition:.4s;

}

.instagram-grid img:hover{

transform:scale(1.05);

}

/*=========================
NEWSLETTER
==========================*/

.newsletter{

padding:100px 0;

background:#0C7B45;

}

.newsletter-box{

text-align:center;

color:white;

max-width:800px;

margin:auto;

}

.newsletter-box h2{

font-size:42px;

margin-bottom:20px;

}

.newsletter-box p{

margin-bottom:35px;

}

.newsletter form{

display:flex;

justify-content:center;

flex-wrap:wrap;

gap:10px;

}

.newsletter input{

width:400px;

padding:18px;

border:none;

border-radius:50px;

font-size:16px;

}

.newsletter button{

padding:18px 35px;

background:#FFD54F;

border:none;

border-radius:50px;

font-weight:600;

cursor:pointer;

transition:.3s;

}

.newsletter button:hover{

background:#FFC107;

}


/*=========================
CONTACT CTA
==========================*/

.contact-cta{

padding:90px 0;

background:#F8FFF8;

}

.cta-box{

background:linear-gradient(135deg,#0C7B45,#28A745);

padding:60px;

border-radius:25px;

display:flex;

justify-content:space-between;

align-items:center;

flex-wrap:wrap;

color:white;

gap:30px;

}

.cta-box h2{

font-size:42px;

margin-bottom:15px;

}

.cta-buttons{

display:flex;

gap:20px;

flex-wrap:wrap;

}



/*=========================
MAP
==========================*/

.location{

padding:100px 0;

}

.map iframe{

width:100%;

height:450px;

border:none;

border-radius:20px;

}



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

footer{

background:#111;

color:white;

padding:80px 0 20px;

}

.footer-grid{

display:grid;

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

gap:40px;

}

.footer-col h3{

margin-bottom:25px;

font-size:24px;

}

.footer-col p{

line-height:1.8;

color:#ccc;

margin-bottom:15px;

}

.footer-col ul{

list-style:none;

}

.footer-col li{

margin-bottom:12px;

}

.footer-col a{

color:#ccc;

text-decoration:none;

transition:.3s;

}

.footer-col a:hover{

color:#FFD54F;

}

.social{

margin-top:20px;

}

.social a{

display:inline-flex;

width:45px;

height:45px;

justify-content:center;

align-items:center;

background:#0C7B45;

color:white;

border-radius:50%;

margin-right:12px;

font-size:18px;

transition:.3s;

}

.social a:hover{

background:#FFD54F;

color:#111;

}

.copyright{

margin-top:50px;

padding-top:20px;

text-align:center;

border-top:1px solid rgba(255,255,255,.1);

color:#aaa;

}



/*=========================
FLOATING WHATSAPP
==========================*/

.whatsapp{

position:fixed;

bottom:30px;

right:30px;

width:65px;

height:65px;

background:#25D366;

display:flex;

justify-content:center;

align-items:center;

border-radius:50%;

color:white;

font-size:34px;

text-decoration:none;

z-index:9999;

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

}



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

#scrollTop{

position:fixed;

bottom:30px;

left:30px;

width:55px;

height:55px;

background:#0C7B45;

color:white;

border:none;

border-radius:50%;

cursor:pointer;

display:none;

font-size:20px;

z-index:9999;

}


/* ==========================
ABOUT PAGE
========================== */

.about-hero{

padding:100px 0;

background:#F8FFF8;

}

.about-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:60px;

align-items:center;

}

.about-grid img{

width:100%;

border-radius:20px;

}

.story-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:50px;

align-items:center;

padding:80px 0;

}

.story-grid img{

width:100%;

border-radius:20px;

}

.mission{

padding:90px 0;

background:#F8FFF8;

}

.mission-grid{

display:grid;

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

gap:30px;

}

.mission-box{

background:#fff;

padding:40px;

border-radius:20px;

text-align:center;

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

}

.mission-box i{

font-size:55px;

color:#0C7B45;

margin-bottom:20px;

}


/*==============================
WHY ABOUT
==============================*/

.why-about{

padding:100px 0;

background:#fff;

}

.about-features{

display:grid;

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

gap:30px;

}

.feature-box{

background:#F8FFF8;

padding:40px;

text-align:center;

border-radius:20px;

transition:.4s;

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

}

.feature-box:hover{

transform:translateY(-10px);

}

.feature-box i{

font-size:50px;

color:#0C7B45;

margin-bottom:20px;

}



/*==============================
ACHIEVEMENTS
==============================*/

.achievement{

padding:80px 0;

background:#0C7B45;

color:white;

}

.achievement-grid{

display:grid;

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

gap:30px;

text-align:center;

}

.achievement-card h2{

font-size:52px;

margin-bottom:15px;

}



/*==============================
PROMISE
==============================*/

.our-promise{

padding:100px 0;

}

.promise-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:60px;

align-items:center;

}

.promise-grid img{

width:100%;

border-radius:20px;

}

.promise-grid ul{

margin-top:25px;

line-height:2.2;

list-style:none;

}



/*==============================
TEAM
==============================*/

.our-team{

padding:100px 0;

background:#F8FFF8;

}

.team-grid{

display:grid;

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

gap:30px;

}

.team-card{

background:white;

border-radius:20px;

overflow:hidden;

text-align:center;

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

transition:.4s;

}

.team-card:hover{

transform:translateY(-10px);

}

.team-card img{

width:100%;

height:320px;

object-fit:cover;

}

.team-card h3{

margin-top:20px;

}

.team-card p{

margin-bottom:25px;

color:#777;

}



/*==============================
ABOUT TESTIMONIALS
==============================*/

.about-testimonials{

padding:100px 0;

background:#fff;

}

.about-cta{

padding:100px 0;

background:linear-gradient(135deg,#0C7B45,#1AA35C);

color:#fff;

text-align:center;

}

.cta-content{

max-width:800px;

margin:auto;

}

.cta-content h2{

font-size:48px;

margin-bottom:20px;

}

.cta-content p{

font-size:18px;

line-height:1.8;

margin-bottom:35px;

}

.cta-buttons{

display:flex;

justify-content:center;

gap:20px;

flex-wrap:wrap;

}

.btn-green{

background:#fff;

color:#0C7B45;

padding:16px 35px;

border-radius:50px;

text-decoration:none;

font-weight:600;

}

.btn-outline{

border:2px solid #fff;

color:#fff;

padding:16px 35px;

border-radius:50px;

text-decoration:none;

font-weight:600;

}

.btn-outline:hover{

background:#fff;

color:#0C7B45;

}



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

.page-hero{

padding:0;

line-height:0;

}

.page-hero-img{

width:100%;

height: 500px;

object-fit: cover;

object-position: center;

display:block;

}

.product-search{

padding:60px 0;

background:#F8FFF8;

}

.product-search input{

width:100%;

padding:18px 25px;

border:2px solid #ddd;

border-radius:60px;

font-size:18px;

outline:none;

}

.products-page{

padding:100px 0;

}

.products-grid{

display:grid;

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

gap:35px;

}

.product-buttons{

display:flex;

flex-wrap:wrap;

gap:15px;

margin-top:20px;

}

/*=========================
QUANTITY SELECTOR
==========================*/

.qty-selector{

display:flex;

align-items:center;

border:1px solid #ddd;

border-radius:50px;

overflow:hidden;

background:#fff;

}

.qty-selector .qty-btn{

width:38px;

height:38px;

border:none;

background:#f5f5f5;

color:#0C7B45;

font-size:18px;

font-weight:700;

cursor:pointer;

line-height:1;

transition:0.2s;

}

.qty-selector .qty-btn:hover{

background:#0C7B45;

color:#fff;

}

.qty-selector .qty-input{

width:46px;

height:38px;

border:none;

border-left:1px solid #ddd;

border-right:1px solid #ddd;

text-align:center;

font-size:15px;

font-weight:600;

-moz-appearance:textfield;

}

.qty-selector .qty-input::-webkit-outer-spin-button,
.qty-selector .qty-input::-webkit-inner-spin-button{

-webkit-appearance:none;

margin:0;

}

.view-btn{

flex:1;

background:#0C7B45;

color:white;

text-align:center;

padding:14px;

border-radius:50px;

text-decoration:none;

}

.buy-btn{

flex:1;

background:#25D366;

color:white;

text-align:center;

padding:14px;

border-radius:50px;

text-decoration:none;

}



/*=========================
CATEGORY FILTER
==========================*/

.product-categories{

padding:40px 0;

background:#fff;

}

.category-list{

display:flex;

justify-content:center;

flex-wrap:wrap;

gap:15px;

}

.category-list button,
.category-list a{

padding:14px 28px;

border:none;

border-radius:50px;

background:#F5F5F5;

cursor:pointer;

font-weight:600;

text-decoration:none;

color:#12201a;

display:inline-flex;

align-items:center;

transition:.3s;

}

.category-list button:hover,
.category-list a:hover,

.category-list button.active,
.category-list a.active{

background:#0C7B45;

color:white;

}



/*=========================
FEATURED PRODUCT
==========================*/

.featured-banner{

padding:100px 0;

background:#F8FFF8;

}

.featured-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:70px;

align-items:center;

}

.featured-image img{

width:100%;

animation:float 4s ease-in-out infinite;

}

@keyframes float{

50%{

transform:translateY(-15px);

}

}

.featured-text span{

color:#0C7B45;

font-weight:600;

letter-spacing:2px;

}

.featured-text h2{

font-size:48px;

margin:20px 0;

}

.featured-text p{

line-height:1.9;

margin-bottom:25px;

}

.featured-text ul{

list-style:none;

line-height:2.3;

margin-bottom:30px;

}



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

.sale{

position:absolute;

top:15px;

left:15px;

background:#E53935;

color:white;

padding:8px 15px;

border-radius:30px;

font-size:13px;

font-weight:600;

}



/*=========================
WISHLIST
==========================*/

.wishlist{

position:absolute;

top:15px;

right:15px;

width:42px;

height:42px;

background:white;

display:flex;

justify-content:center;

align-items:center;

border-radius:50%;

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

cursor:pointer;

}

.wishlist i{

color:#0C7B45;

}



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

.rating{

color:#FFC107;

margin:15px 0;

font-size:18px;

}

.rating span{

color:#777;

font-size:15px;

margin-left:8px;

}


/*=========================
QUICK VIEW MODAL
==========================*/

.modal{

display:none;

position:fixed;

left:0;

top:0;

width:100%;

height:100%;

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

z-index:99999;

}

.modal-content{

background:#fff;

width:90%;

max-width:1000px;

margin:60px auto;

border-radius:20px;

padding:40px;

position:relative;

}

.close-modal{

position:absolute;

right:30px;

top:20px;

font-size:35px;

cursor:pointer;

}

.modal-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:50px;

align-items:center;

}

.modal-image img{

width:100%;

}

.quick-view{

background:#0C7B45;

color:white;

border:none;

padding:14px 20px;

border-radius:40px;

cursor:pointer;

flex:1;

}

.quick-view:hover{

background:#096537;

}


/*=========================
PRODUCT DETAILS
==========================*/

.product-details{

padding:100px 0;

}

.details-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:30px;

align-items:center;


}

.main-image{

background:#F8FFF8;

padding:20px;

border-radius:20px;

}

.main-image img{

width:100%;

transition:.4s;

}

.main-image img:hover{

transform:scale(1.08);

}

.thumbs{

display:flex;

gap:20px;

margin-top:20px;

}

.thumbs img{

width:110px;

background:#F8FFF8;

padding:15px;

border-radius:15px;

cursor:pointer;

transition:.3s;

}

.thumbs img:hover{

transform:scale(1.1);

}

.details h1{

font-size:48px;

margin:20px 0;

}

.details h2{

font-size:42px;

color:#0C7B45;

margin:20px 0;

}

.details ul{

list-style:none;

line-height:2.3;

margin:30px 0;

}

.product-actions{

display:flex;

flex-wrap:wrap;

align-items:center;

gap:20px;

margin-top:35px;

}



/*=========================
PRODUCT TABS
==========================*/

.product-tabs{

padding:100px 0;

background:#F8FFF8;

}

.tabs{

display:flex;

justify-content:center;

flex-wrap:wrap;

gap:15px;

margin-bottom:40px;

}

.tab-btn{

padding:15px 30px;

border:none;

background:#fff;

border-radius:50px;

cursor:pointer;

font-weight:600;

transition:.3s;

}

.tab-btn.active,

.tab-btn:hover{

background:#0C7B45;

color:white;

}

.tab-content{

display:none;

background:white;

padding:40px;

border-radius:20px;

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

}

.tab-content.active{

display:block;

}

.faq{

padding:100px 0;

}

.faq-item{

background:#fff;

padding:25px;

border-radius:15px;

margin-bottom:20px;

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

}

.faq-item h3{

margin-bottom:10px;

color:#0C7B45;

}



/*=========================
CHECKOUT
==========================*/

.checkout{

padding:100px 0;

}

.checkout-grid{

display:grid;

grid-template-columns:2fr 1fr;

gap:50px;

}

.billing form{

display:flex;

flex-direction:column;

gap:20px;

}

.billing input,

.billing textarea{

padding:18px;

border:1px solid #ddd;

border-radius:10px;

font-size:16px;

}

.summary-box{

background:#F8FFF8;

padding:30px;

border-radius:20px;

margin-bottom:30px;

}

.payment-box{

background:#fff;

padding:30px;

border-radius:20px;

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

}

.payment-method{

background:#F8FFF8;

padding:20px;

border-radius:15px;

margin:20px 0;

}

.payment-box input[type=file]{

width:100%;

margin:20px 0;

}




/*=========================
CONTACT PAGE
==========================*/

.contact-section{

padding:100px 0;

}

.contact-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:60px;

}

.contact-info{

background:#F8FFF8;

padding:40px;

border-radius:20px;

}

.info-box{

display:flex;

align-items:center;

gap:20px;

margin:30px 0;

}

.info-box i{

font-size:28px;

color:#0C7B45;

width:60px;

height:60px;

display:flex;

justify-content:center;

align-items:center;

background:white;

border-radius:50%;

}

.contact-form{

background:white;

padding:40px;

border-radius:20px;

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

}

.contact-form form{

display:flex;

flex-direction:column;

gap:20px;

}

.contact-form input,

.contact-form textarea{

padding:16px;

border:1px solid #ddd;

border-radius:10px;

font-size:16px;

outline:none;

}

.contact-form input:focus,

.contact-form textarea:focus{

border-color:#0C7B45;

}

.social-icons{

display:flex;

gap:20px;

margin-top:30px;

}

.social-icons a{

width:50px;

height:50px;

display:flex;

align-items:center;

justify-content:center;

background:#0C7B45;

color:white;

border-radius:50%;

font-size:20px;

text-decoration:none;

transition:.3s;

}

.social-icons a:hover{

transform:translateY(-5px);

background:#096537;

}



/*=========================
MAP
==========================*/

.map-section{

padding:100px 0;

}

.map iframe{

border-radius:20px;

}

/*=========================
BUSINESS HOURS
==========================*/

.business-hours{

padding:100px 0;

background:#F8FFF8;

}

.hours-box{

max-width:700px;

margin:auto;

background:white;

padding:40px;

border-radius:20px;

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

}

.hour-row{

display:flex;

justify-content:space-between;

padding:20px 0;

border-bottom:1px solid #eee;

}

.hour-row:last-child{

border:none;

}



/*=========================
VISIT US
==========================*/

.visit-section{

padding:100px 0;

}

.visit-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:70px;

align-items:center;

}

.visit-image img{

width:100%;

border-radius:20px;

box-shadow:0 20px 40px rgba(0,0,0,.1);

}

.visit-content h2{

font-size:42px;

margin-bottom:20px;

}

.visit-content p{

line-height:1.9;

margin-bottom:30px;

}

.visit-box{

display:flex;

gap:20px;

margin-bottom:25px;

align-items:center;

}

.visit-box i{

width:60px;

height:60px;

background:#0C7B45;

color:white;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

font-size:24px;

}



/*=========================
STORE GALLERY
==========================*/

.gallery-section{

padding:100px 0;

}

.gallery-grid{

display:grid;

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

gap:20px;

}

.gallery-grid img{

width:100%;

height:250px;

object-fit:cover;

border-radius:20px;

transition:.4s;

cursor:pointer;

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

}

.gallery-grid img:hover{

transform:scale(1.05);

}



/*=========================
POLICY PAGE
==========================*/

.policy-page{

padding:100px 0;

line-height:2;

}

.policy-page h2{

margin:35px 0 15px;

color:#0C7B45;

font-size:30px;

}

.policy-page p{

margin-bottom:20px;

color:#555;

}

.policy-page ul{

margin-left:25px;

line-height:2.2;

}

.policy-page{
    padding:100px 0;
    line-height:2;
}

.policy-page h2{
    color:#0C7B45;
    margin:35px 0 15px;
    font-size:30px;
}

.policy-page p{
    color:#555;
    margin-bottom:20px;
}

.policy-page ul{
    margin-left:20px;
}



#loader{

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

background:#fff;

display:flex;

justify-content:center;

align-items:center;

z-index:99999;

}

.spinner{

width:70px;

height:70px;

border:6px solid #eee;

border-top:6px solid #0C7B45;

border-radius:50%;

animation:spin 1s linear infinite;

}

@keyframes spin{

100%{

transform:rotate(360deg);

}

}




header{

position:sticky;

top:0;

background:white;

z-index:999;

transition:.3s;

}

header.sticky{

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

}



.fade-up{

opacity:0;

transform:translateY(60px);

transition:1s;

}

.fade-up.show{

opacity:1;

transform:translateY(0);

}



/*=========================
BACK TO TOP BUTTON
=========================*/

#scrollTop{

position:fixed;

right:25px;

bottom:25px;

width:55px;

height:55px;

background:#0C7B45;

color:#fff;

border:none;

border-radius:50%;

font-size:20px;

cursor:pointer;

display:none;

z-index:999;

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

transition:.3s;

}

#scrollTop:hover{

background:#096537;

transform:translateY(-5px);

}


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

.footer{

background:#0C7B45;

color:#fff;

padding:80px 0 20px;

margin-top:80px;

}

.footer-grid{

display:grid;

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

gap:40px;

}

.footer-logo{

width:70px;

margin-bottom:15px;

}

.footer h2,

.footer h3{

margin-bottom:20px;

}

.footer p{

line-height:1.8;

margin-bottom:12px;

color:#ddd;

}

.footer ul{

list-style:none;

padding:0;

}

.footer ul li{

margin-bottom:12px;

}

.footer ul li a{

color:#ddd;

text-decoration:none;

transition:.3s;

}

.footer ul li a:hover{

color:#FFD54F;

padding-left:8px;

}

.footer-social{

display:flex;

gap:15px;

margin-top:20px;

}

.footer-social a{

width:45px;

height:45px;

background:#fff;

color:#0C7B45;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

transition:.3s;

font-size:18px;

}

.footer-social a:hover{

background:#FFD54F;

transform:translateY(-5px);

}

.footer-btn{

display:inline-block;

margin-top:15px;

padding:12px 24px;

background:#FFD54F;

color:#222;

text-decoration:none;

font-weight:600;

border-radius:50px;

transition:.3s;

}

.footer-btn:hover{

background:#fff;

}

.footer hr{

margin:40px 0 20px;

border:0;

border-top:1px solid rgba(255,255,255,.2);

}

.footer-bottom{

display:flex;

justify-content:space-between;

align-items:center;

flex-wrap:wrap;

gap:10px;

font-size:14px;

color:#ddd;

}




/*=========================
CART ICON
==========================*/

.cart-icon{

position:relative;

font-size:24px;

color:#0C7B45;

text-decoration:none;

margin-left:20px;

}

.cart-icon span{

position:absolute;

top:-10px;

right:-10px;

background:red;

color:white;

width:22px;

height:22px;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

font-size:12px;

font-weight:bold;

}




/* CART PAGE */

.cart-section{
padding:80px 0;
}

.cart-item{
display:flex;
gap:20px;
align-items:center;
padding:15px;
border-bottom:1px solid #ddd;
}

.cart-summary{
margin-top:30px;
padding:20px;
background:#f5f5f5;
border-radius:10px;
}




/* CHECKOUT PAGE */

.checkout-section{
padding:80px 0;
}

.checkout-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:40px;
}

.checkout-form input,
.checkout-form select{
width:100%;
padding:12px;
margin-bottom:15px;
border:1px solid #ddd;
border-radius:6px;
}

.order-summary{
background:#f5f5f5;
padding:20px;
border-radius:10px;
}




/*=========================
TOP BAR
==========================*/

.top-bar{
background:#0C7B45;
color:#fff;
text-align:center;
padding:10px;
font-size:14px;
font-weight:500;
}




.hero-buttons{
display:flex;
gap:20px;
margin-top:30px;
}

.outline-btn{
padding:14px 32px;
border:2px solid #0C7B45;
color:#0C7B45;
border-radius:50px;
text-decoration:none;
font-weight:600;
transition:.3s;
}

.outline-btn:hover{
background:#0C7B45;
color:#fff;
}




.product-card{

transition:.4s;

}

.product-card:hover{

transform:translateY(-12px);

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

}



.product-image{

overflow:hidden;

}

.product-image img{

transition:.5s;

}

.product-card:hover img{

transform:scale(1.1);

}


.buy-btn{

transition:.3s;

}

.buy-btn:hover{

transform:translateY(-4px);

box-shadow:0 15px 30px rgba(12,123,69,.3);

}


html{

scroll-behavior:smooth;

}


::selection{

background:#0C7B45;

color:white;

}


::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#f5f5f5;

}

::-webkit-scrollbar-thumb{

background:#0C7B45;

border-radius:10px;

}

::-webkit-scrollbar-thumb:hover{

background:#085b33;

}




.newsletter{

padding:80px 0;

background:#f9f9f9;

text-align:center;

}

.newsletter input{

padding:15px;

width:320px;

border:1px solid #ddd;

border-radius:50px;

margin-right:10px;

}

.newsletter form{

margin-top:30px;

}





/* ==========================
WRITE A REVIEW
========================== */

.write-review{

padding:100px 0;

background:#f9fbfa;

}

.review-widget{

max-width:650px;

margin:0 auto;

}

.review-summary{

display:none;

align-items:center;

gap:14px;

margin-bottom:30px;

padding:18px 25px;

background:#fff;

border-radius:14px;

border:1px solid #e0efe6;

}

.review-summary.show{

display:flex;

}

.summary-stars{

color:#FFC107;

font-size:22px;

letter-spacing:2px;

}

.summary-text{

font-weight:600;

color:#333;

font-size:14px;

}

.review-form{

background:#fff;

padding:35px;

border-radius:20px;

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

}

.review-form h3{

margin-bottom:20px;

color:#0C7B45;

}

.star-input{

display:flex;

gap:8px;

font-size:32px;

color:#ddd;

margin-bottom:22px;

cursor:pointer;

user-select:none;

}

.star-input span{

transition:.15s;

line-height:1;

}

.star-input span.active,
.star-input span.hover{

color:#FFC107;

}

.review-form input[type="text"],
.review-form textarea{

width:100%;

padding:14px 16px;

margin-bottom:16px;

border:1px solid #ddd;

border-radius:10px;

font-family:inherit;

font-size:15px;

color:#222;

}

.review-form textarea{

min-height:110px;

resize:vertical;

}

.review-submit{

border:none;

cursor:pointer;

font-size:16px;

width:100%;

font-family:inherit;

}

.review-msg{

margin-top:12px;

font-size:14px;

min-height:18px;

}

.review-msg.success{

color:#0C7B45;

font-weight:600;

}

.review-msg.error{

color:#d33;

font-weight:600;

}

.user-reviews{

margin-top:35px;

}

.user-review-card .review-date{

font-size:12px;

color:#999;

font-weight:400;

margin-left:6px;

}

.review-status-msg{

text-align:center;

color:#777;

font-size:14px;

padding:20px 0;

}