/* ===========================
   ECOCARE PREMIUM CSS
=========================== */

*{
margin:0;
padding:0;
box-sizing:border-box;
scroll-behavior:smooth;
font-family:'Poppins',sans-serif;
}

body{
background:#f8fff8;
color:#222;
line-height:1.6;
}

/* HEADER */

header{
position:sticky;
top:0;
z-index:1000;
display:flex;
justify-content:space-between;
align-items:center;
padding:18px 8%;
background:#ffffff;
box-shadow:0 5px 20px rgba(0,0,0,.08);
}

.logo img{
width:85px;
}

nav{
display:flex;
gap:35px;
}

nav a{
text-decoration:none;
color:#1b5e20;
font-weight:600;
transition:.3s;
}

nav a:hover{
color:#43a047;
}

.cart{
background:#1b5e20;
color:#fff;
padding:12px 22px;
border-radius:40px;
font-weight:bold;
cursor:pointer;
transition:.3s;
}

.cart:hover{
background:#43a047;
}

/* HERO */

.hero{
display:flex;
align-items:center;
justify-content:space-between;
padding:80px 8%;
gap:50px;
}

.hero-text{
flex:1;
}

.hero-text h1{
font-size:60px;
line-height:1.2;
color:#1b5e20;
margin-bottom:20px;
}

.hero-text p{
font-size:20px;
color:#666;
margin-bottom:35px;
max-width:520px;
}

.btn{
display:inline-block;
padding:16px 40px;
background:#1b5e20;
color:white;
text-decoration:none;
border-radius:50px;
font-weight:600;
transition:.3s;
}

.btn:hover{
background:#43a047;
transform:translateY(-3px);
}

.hero-image{
flex:1;
text-align:center;
}

.hero-image img{
width:90%;
max-width:420px;
animation:float 3s ease-in-out infinite;
}

@keyframes float{
0%{transform:translateY(0);}
50%{transform:translateY(-10px);}
100%{transform:translateY(0);}
}

/* FEATURES */

.features{
display:flex;
justify-content:center;
gap:30px;
padding:70px 8%;
flex-wrap:wrap;
}

.feature{
background:white;
width:260px;
padding:35px;
border-radius:20px;
text-align:center;
box-shadow:0 10px 25px rgba(0,0,0,.08);
transition:.3s;
}

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

.feature h3{
margin:15px 0;
color:#1b5e20;
}

/* PRODUCTS */

#products{
padding:80px 8%;
}

#products h2{
text-align:center;
font-size:42px;
margin-bottom:45px;
color:#1b5e20;
}

.product-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:35px;
}

.product-card{
background:white;
padding:20px;
border-radius:20px;
box-shadow:0 10px 25px rgba(0,0,0,.08);
text-align:center;
transition:.3s;
}

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

.product-card img{
width:100%;
height:260px;
object-fit:contain;
}

.product-card h3{
margin:20px 0 10px;
color:#1b5e20;
}

.price{
font-size:28px;
font-weight:bold;
color:#2e7d32;
margin-bottom:20px;
}

.product-card button{
width:100%;
padding:14px;
border:none;
background:#1b5e20;
color:white;
border-radius:40px;
font-size:16px;
cursor:pointer;
transition:.3s;
}

.product-card button:hover{
background:#43a047;
}/* ===========================
ABOUT
=========================== */

#about{
padding:80px 8%;
background:white;
}

.about-container{
display:flex;
align-items:center;
justify-content:space-between;
gap:60px;
flex-wrap:wrap;
}

.about-text{
flex:1;
}

.about-text h2,
#about h2{
font-size:42px;
color:#1b5e20;
margin-bottom:20px;
}

.about-text p{
font-size:18px;
color:#555;
}

.about-image{
flex:1;
text-align:center;
}

.about-image img{
width:260px;
}

/* ===========================
FOUNDERS
=========================== */

.founders{
padding:80px 8%;
background:#f3fbf4;
}

.founders h2{
text-align:center;
font-size:42px;
margin-bottom:50px;
color:#1b5e20;
}

.founder-container{
display:flex;
align-items:center;
justify-content:center;
gap:60px;
flex-wrap:wrap;
}

.founder-image img{
width:380px;
max-width:100%;
border-radius:20px;
box-shadow:0 15px 35px rgba(0,0,0,.15);
}

.founder-content{
max-width:520px;
}

.founder-content h3{
font-size:30px;
color:#1b5e20;
margin-top:15px;
}

.role{
font-weight:bold;
color:#43a047;
margin-bottom:15px;
}

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

#reviews{
padding:80px 8%;
background:white;
}

#reviews h2{
text-align:center;
font-size:42px;
margin-bottom:40px;
color:#1b5e20;
}

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

.review-card{
background:#f8fff8;
padding:30px;
border-radius:20px;
box-shadow:0 8px 20px rgba(0,0,0,.08);
text-align:center;
}

.review-card p{
margin:15px 0;
}

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

#contact{
padding:80px 8%;
text-align:center;
background:#e8f5e9;
}

#contact h2{
font-size:42px;
margin-bottom:25px;
color:#1b5e20;
}

#contact p{
font-size:18px;
margin:12px 0;
}

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

footer{
background:#1b5e20;
color:white;
text-align:center;
padding:25px;
}

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

@media(max-width:900px){

header{
flex-direction:column;
gap:20px;
}

nav{
flex-wrap:wrap;
justify-content:center;
gap:18px;
}

.hero{
flex-direction:column;
text-align:center;
}

.hero-text h1{
font-size:40px;
}

.hero-image img{
max-width:300px;
}

.about-container,
.founder-container{
flex-direction:column;
text-align:center;
}

}}

.buy-btn{
width:100%;
margin-top:10px;
padding:14px;
background:#f4a300;
color:white;
border:none;
border-radius:40px;
font-size:16px;
font-weight:600;
cursor:pointer;
transition:.3s;
}

.buy-btn:hover{
background:#d88b00;
}.cart-sidebar{
position:fixed;
top:0;
right:-420px;
width:380px;
height:100%;
background:#fff;
box-shadow:-5px 0 20px rgba(0,0,0,.2);
padding:25px;
transition:.4s;
z-index:9999;
overflow-y:auto;
}

.cart-sidebar.active{
right:0;
}

.cart-header{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:20px;
}

.cart-header span{
font-size:24px;
cursor:pointer;
}

.cart-item{
display:flex;
justify-content:space-between;
margin:15px 0;
padding-bottom:12px;
border-bottom:1px solid #ddd;
}

.checkout-btn{
width:100%;
padding:15px;
background:#1b5e20;
color:#fff;
border:none;
border-radius:40px;
font-size:18px;
cursor:pointer;
margin-top:20px;
}
.whatsapp-float{
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 60px;
    height: 60px;
    background: #25D366;
    color: white;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    text-decoration: none;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    z-index: 999;
}

.whatsapp-float:hover{
    transform: scale(1.1);
}.search-box{
    text-align:center;
    margin:30px 0;
}

.search-box input{
    width:350px;
    max-width:90%;
    padding:14px 20px;
    border:2px solid #1b5e20;
    border-radius:30px;
    font-size:17px;
    outline:none;
    transition:0.3s;
}

.search-box input:focus{
    border-color:#2e7d32;
    box-shadow:0 0 10px rgba(46,125,50,0.3);
}
.product-card{
    position: relative;
}

.badge{
    position: absolute;
    top: 10px;
    left: 10px;
    background: #ff9800;
    color: white;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: bold;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    z-index: 10;
}
.upi-btn{
    width:100%;
    padding:15px;
    margin-top:10px;
    background:#0d6efd;
    color:white;
    border:none;
    border-radius:40px;
    font-size:18px;
    cursor:pointer;
    transition:0.3s;
}

.upi-btn:hover{
    background:#0b5ed7;
}
.clear-btn{
width:100%;
padding:14px;
margin-top:10px;
background:#dc3545;
color:#fff;
border:none;
border-radius:40px;
font-size:16px;
cursor:pointer;
}

.clear-btn:hover{
background:#bb2d3b;
}
.top-bar{
    background:#1b5e20;
    color:white;
    text-align:center;
    padding:8px 10px;
    font-size:14px;
    font-weight:600;
    white-space:nowrap;
    overflow-x:auto;
}
/* ===== IMAGE SLIDER ===== */

.slider{
    width:100%;
    max-width:1200px;
    margin:40px auto;
    overflow:hidden;
    border-radius:20px;
}

.slides{
    position:relative;
    height:500px;
}

.slide{
    position:absolute;
    width:100%;
    height:100%;
    object-fit:contain;
    opacity:0;
    transition:opacity 0.8s ease-in-out;
}

.slide.active{
    opacity:1;
}
/* ===== TRUST BADGES ===== */

.trust-badges{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:20px;
    padding:60px 8%;
    background:#f8fff8;
}

.trust-card{
    background:white;
    text-align:center;
    padding:30px 20px;
    border-radius:20px;
    box-shadow:0 8px 20px rgba(0,0,0,.08);
    transition:.3s;
}

.trust-card:hover{
    transform:translateY(-8px);
}

.trust-card h3{
    margin:15px 0 10px;
    color:#1b5e20;
}

.trust-card p{
    color:#555;
}

.trust-card{
    font-size:40px;
}
/* ===========================
   PRODUCT DETAILS POPUP
=========================== */

.product-modal{
    display:none;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.6);
    justify-content:center;
    align-items:center;
    z-index:10000;
}

.modal-content{
    background:#fff;
    width:90%;
    max-width:500px;
    border-radius:20px;
    padding:30px;
    text-align:center;
    position:relative;
    animation:popup .3s ease;
}

@keyframes popup{
    from{
        transform:scale(.8);
        opacity:0;
    }
    to{
        transform:scale(1);
        opacity:1;
    }
}

.modal-content img{
    width:220px;
    margin-bottom:20px;
}

.close-modal{
    position:absolute;
    top:15px;
    right:20px;
    font-size:30px;
    cursor:pointer;
    color:#333;
}

#modalPrice{
    color:#1b5e20;
    margin:10px 0;
}

#modalDescription{
    color:#555;
    line-height:1.6;
}

#modalBuy{
    margin-top:20px;
    background:#1b5e20;
    color:white;
    border:none;
    padding:15px 35px;
    border-radius:30px;
    font-size:18px;
    cursor:pointer;
}

#modalBuy:hover{
    background:#2e7d32;
}
/* QUANTITY SELECTOR */

.quantity-box{
display:flex;
justify-content:center;
align-items:center;
gap:12px;
margin:15px 0;
}

.quantity-box button{
width:35px;
height:35px;
border:none;
background:#1b5e20;
color:white;
border-radius:50%;
font-size:18px;
cursor:pointer;
}

.quantity-box span{
font-size:18px;
font-weight:bold;
min-width:20px;
text-align:center;
}
.product-card{
    position:relative;
}

.wishlist{
    position:absolute;
    top:15px;
    right:15px;
    font-size:26px;
    cursor:pointer;
    transition:.3s;
    z-index:999;
    background:white;
    border-radius:50%;
    padding:5px;
}

.wishlist:hover{
    transform:scale(1.2);
}

.wishlist.active{
    color:red;
}
.coupon-box{
    margin:15px 0;
}

.coupon-box input{
    width:100%;
    padding:10px;
    border:2px solid #1b5e20;
    border-radius:8px;
    font-size:15px;
    margin-bottom:10px;
    box-sizing:border-box;
}

.coupon-btn{
    width:100%;
    padding:10px;
    background:#1b5e20;
    color:white;
    border:none;
    border-radius:8px;
    font-size:15px;
    cursor:pointer;
    font-weight:bold;
}

.coupon-btn:hover{
    background:#2e7d32;
}

#coupon-message{
    margin-top:10px;
    font-weight:bold;
    text-align:center;
}