body{
font-family:Arial,sans-serif;
background:#f5f5f5;
overflow-x:hidden;
}

.topbar{
background:#2e7d32;
color:white;
padding:8px 0;
font-size:14px;
}

.header{
background:white;
padding:20px 0;
box-shadow:0 2px 10px rgba(0,0,0,.1);
}

.logo{
font-size:42px;
font-weight:900;
color:#2e7d32;
}

.logo span{
color:#ffb300;
}

.search-box{
display:flex;
}

.search-box input{
width:100%;
height:55px;
border:none;
background:#f2f2f2;
padding:0 20px;
border-radius:12px 0 0 12px;
}

.search-box button{
width:70px;
border:none;
background:#2e7d32;
color:white;
border-radius:0 12px 12px 0;
}

.menu-icons a{
margin-left:20px;
text-decoration:none;
color:#333;
font-weight:bold;
}

.login-btn{
background:linear-gradient(45deg,#ffc107,#ff9800);
padding:14px 30px;
border-radius:50px;
color:#1b1b1b !important;
font-weight:700;
font-size:16px;
box-shadow:0 10px 25px rgba(255,193,7,.35);
transition:.3s;
display:inline-flex;
align-items:center;
gap:10px;
}

.login-btn:hover{
transform:translateY(-5px);
background:linear-gradient(45deg,#ffca2c,#ff9800);
color:black !important;
}

.custom-nav{
    background: linear-gradient(90deg, #1b5e20 0%, #2e7d32 50%, #1b5e20 100%);
    padding: 0;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.custom-nav .nav-link{
    color: rgba(255,255,255,0.9) !important;
    font-weight: 600;
    font-size: 0.92rem;
    padding: 14px 20px !important;
    letter-spacing: 0.3px;
    border-radius: 0;
    position: relative;
    transition: all 0.25s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

.custom-nav .nav-link::after{
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 3px;
    background: #ffc107;
    border-radius: 3px 3px 0 0;
    transition: width 0.25s ease;
}

.custom-nav .nav-link:hover{
    color: #ffffff !important;
    background: rgba(255,255,255,0.1);
}

.custom-nav .nav-link:hover::after,
.custom-nav .nav-link.active::after{
    width: 70%;
}

.custom-nav .nav-link.active{
    color: #ffc107 !important;
    background: rgba(255,255,255,0.08);
    font-weight: 700;
}

.custom-nav .nav-link i{
    font-size: 0.85rem;
    opacity: 0.85;
}

.hero{
background:url('../img/hero-new.jpg');
background-size:cover;
background-position:center;
background-repeat:no-repeat;
min-height:100vh;
display:flex;
align-items:center;
position:relative;
}

..overlay{
position:absolute;
inset:0;
background:rgba(0,0,0,.25);
}

.hero-content{
position:relative;
z-index:5;
color:white;
}

.hero h1{
font-size:80px;
font-weight:900;
}

.hero h1 span{
color:#ffd600;
}

.hero h2{
font-size:60px;
font-weight:800;
}

.hero p{
font-size:24px;
margin:20px 0;
}

.shop-btn{
background:#ffb300;
border:none;
padding:18px 35px;
border-radius:15px;
font-size:22px;
font-weight:bold;
}

.hero-product{
width:100%;
max-width:500px;
border-radius:30px;
box-shadow:0 10px 40px rgba(0,0,0,.4);
}

.features{
margin-top:-60px;
position:relative;
z-index:10;
}

.feature-box{
background:white;
padding:30px;
border-radius:20px;
box-shadow:0 4px 20px rgba(0,0,0,.08);
}

.feature-box i{
font-size:40px;
color:#2e7d32;
margin-bottom:10px;
}

.section-title{
font-weight:900;
color:#2e7d32;
}

.product-card{
background:white;
border-radius:20px;
overflow:hidden;
position:relative;
box-shadow:0 2px 15px rgba(0,0,0,.08);
transition:.3s;
}

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

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

.discount{
position:absolute;
top:10px;
left:10px;
background:#ff5722;
padding:5px 10px;
border-radius:10px;
color:white;
font-weight:bold;
}

.product-body{
padding:20px;
}

.product-body h4{
color:#e53935;
font-weight:900;
}

.stars{
color:#ffc107;
}

.cart-btn{
background:#1b5e20;
color:white;
border:none;
width:50px;
height:50px;
border-radius:50%;
}

.promo-box{
height:100%;
background:linear-gradient(45deg,#ff9800,#ff5722);
border-radius:25px;
padding:40px;
color:white;
display:flex;
flex-direction:column;
justify-content:center;
}

.promo-box h1{
font-size:80px;
font-weight:900;
}

.promo-box button{
border:none;
background:white;
padding:15px;
border-radius:10px;
font-weight:bold;
}

.stats{
background:#2e7d32;
padding:60px 0;
color:white;
}

.stats h2{
font-size:50px;
font-weight:900;
}

footer{
background:#111;
padding:60px 0;
color:white;
}

footer i{
margin-right:15px;
}

.floating-wa{
position:fixed;
right:20px;
bottom:20px;
width:70px;
height:70px;
background:#25d366;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:35px;
color:white;
text-decoration:none;
z-index:999;
}

@media(max-width:768px){

.hero h1{
font-size:50px;
}

.hero h2{
font-size:40px;
}

.menu-icons{
margin-top:20px;
text-align:center!important;
}

}

/* PREMIUM CART QUANTITY SELECTOR STYLE */
.cart-control-wrapper {
    display: inline-block;
}

/* For Index Page */
.index-qty-selector {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #e8f5e9;
    border-radius: 25px;
    padding: 3px;
    border: 2px solid #1b5e20;
    width: 120px;
    height: 46px;
    box-shadow: 0 4px 10px rgba(27,94,32,0.15);
    transition: all 0.3s ease;
}

.index-qty-btn {
    width: 36px;
    height: 36px;
    border: none;
    background: #1b5e20;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    transition: all 0.2s ease;
}

.index-qty-btn:hover {
    background: #14532d;
    transform: scale(1.1);
}

.index-qty-value {
    font-size: 16px;
    font-weight: 800;
    color: #1b5e20;
    text-align: center;
    flex-grow: 1;
}

/* For Product Page */
.qty-selector {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #e8f5e9;
    border-radius: 15px;
    padding: 5px;
    margin-top: 20px;
    border: 2px solid #198754;
    width: 100%;
    box-shadow: 0 4px 12px rgba(25,135,84,0.15);
    transition: all 0.3s ease;
}

.qty-btn {
    width: 45px;
    height: 45px;
    border: none;
    background: #198754;
    color: white;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    transition: all 0.2s ease;
}

.qty-btn:hover {
    background: #14532d;
    transform: scale(1.05);
}

.qty-value {
    font-size: 18px;
    font-weight: 800;
    color: #14532d;
    min-width: 30px;
    text-align: center;
}

/* Cart Badge Header */
.cart-badge {
    font-size: 10px !important;
    padding: 4px 6px !important;
    border-radius: 50% !important;
    transform: translate(0, -5px) !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}