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

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

:root{

--primary:#b0005b;
--primary-dark:#850045;
--primary-light:#fff5fa;

--text:#2b2b2b;
--muted:#777777;

--white:#ffffff;
--border:#ead9e1;

--success:#25D366;
--danger:#ef4444;

--radius:24px;

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

--shadow-hover:
0 20px 60px rgba(176,0,91,.18);

--transition:.35s ease;

}

html{
scroll-behavior:smooth;
}

body{

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

background:#fff;

color:var(--text);

overflow-x:hidden;

line-height:1.7;

}

img{

max-width:100%;

display:block;

}

a{

text-decoration:none;

}

button{

font-family:inherit;

cursor:pointer;

}

ul{

list-style:none;

}

.container{

width:min(1300px,92%);

margin:auto;

}

/* ==========================================
   ANNOUNCEMENT BAR
========================================== */

.announcement-bar{

background:var(--primary);

color:#fff;

padding:12px 5%;

display:flex;

justify-content:center;

align-items:center;

gap:50px;

font-size:.9rem;

font-weight:500;

}

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

.header{

position:sticky;

top:0;

z-index:999;

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

backdrop-filter:blur(12px);

-webkit-backdrop-filter:blur(12px);

padding:18px 5%;

display:flex;

align-items:center;

justify-content:space-between;

border-bottom:1px solid var(--border);

transition:.3s;

}

.logo-area{

display:flex;

align-items:center;

gap:15px;

}

.logo-area img{
width:70px;
height:70px;
object-fit:contain;
}

.logo-area h2{

font-size:1.5rem;

color:var(--primary);

font-weight:700;

}

.logo-area small{

color:var(--muted);

font-size:.8rem;

}
.desktop-nav{
display:none !important;
}

#menuBtn{
display:flex !important;
align-items:center;
justify-content:center;
}

.desktop-nav{

display:flex;

align-items:center;

gap:35px;

}

.desktop-nav a{

color:var(--text);

font-weight:500;

position:relative;

transition:.3s;

}

.desktop-nav a::after{

content:'';

position:absolute;

left:0;

bottom:-8px;

width:0;

height:2px;

background:var(--primary);

transition:.3s;

}

.desktop-nav a:hover{

color:var(--primary);

}

.desktop-nav a:hover::after{

width:100%;

}

.header-actions{

display:flex;

align-items:center;

gap:10px;

}

.header-actions button{

width:46px;

height:46px;

border:none;

border-radius:50%;

background:var(--primary-light);

color:var(--primary);

font-size:1rem;

transition:.3s;

position:relative;

}

.header-actions button:hover{

background:var(--primary);

color:#fff;

}

.header-actions span{

position:absolute;

top:-4px;

right:-4px;

width:22px;

height:22px;

border-radius:50%;

background:var(--primary);

color:#fff;

font-size:.7rem;

display:flex;

align-items:center;

justify-content:center;

}

.mobile-toggle{

display:none;

}

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

.mobile-menu{

max-height:0;

overflow:hidden;

background:#fff;

transition:.4s ease;

border-bottom:1px solid var(--border);

}

.mobile-menu.active{

max-height:450px;

}

.mobile-menu a{

display:block;

padding:16px 5%;

border-bottom:1px solid #f3f3f3;

color:var(--text);

font-weight:500;

}

.mobile-menu a:hover{

background:var(--primary-light);

color:var(--primary);

}

/* ==========================================
   HERO SLIDER
========================================== */

.hero-slider{

padding:90px 5%;

background:
linear-gradient(
180deg,
var(--primary-light),
#ffffff
);

position:relative;

overflow:hidden;

}

.slide{

display:none;

grid-template-columns:1fr 1fr;

gap:70px;

align-items:center;

}

.slide.active{

display:grid;

animation:fadeSlide .8s ease;

}

@keyframes fadeSlide{

from{

opacity:0;

transform:translateY(20px);

}

to{

opacity:1;

transform:translateY(0);

}

}

.tag{

display:inline-block;

padding:10px 18px;

border-radius:50px;

background:#fff;

border:1px solid var(--border);

color:var(--primary);

font-weight:600;

margin-bottom:20px;

}

.hero-content h1{

font-size:4.3rem;

line-height:1.1;

font-weight:700;

margin-bottom:20px;

}

.hero-content p{

font-size:1.1rem;

max-width:550px;

color:var(--muted);

}

.hero-buttons{

display:flex;

gap:18px;

margin-top:35px;

}

.btn-primary{

background:var(--primary);

color:#fff;

padding:15px 32px;

border-radius:50px;

font-weight:600;

transition:.3s;

}

.btn-primary:hover{

transform:translateY(-3px);

box-shadow:var(--shadow-hover);

}

.btn-secondary{

padding:15px 32px;

border-radius:50px;

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

color:var(--primary);

font-weight:600;

transition:.3s;

}

.btn-secondary:hover{

background:var(--primary);

color:#fff;

}

.hero-image{

overflow:hidden;

border-radius:30px;

}

.hero-image img{

border-radius:30px;

transition:1s;

box-shadow:var(--shadow);

}

.hero-image:hover img{

transform:scale(1.06);

}

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

.search-section{

width:min(1000px,92%);

margin:-30px auto 60px;

background:#fff;

padding:35px;

border-radius:30px;

box-shadow:var(--shadow);

position:relative;

z-index:20;

}

.search-section h2{

text-align:center;

margin-bottom:15px;

font-size:2rem;

}

.search-section input{

width:100%;

padding:18px;

border-radius:18px;

border:1px solid var(--border);

font-size:1rem;

outline:none;

transition:.3s;

}

.search-section input:focus{

border-color:var(--primary);

}

.search-suggestions{

margin-top:10px;

background:#fff;

border-radius:18px;

overflow:hidden;

box-shadow:var(--shadow);

}

.suggestion-item{

padding:14px 18px;

cursor:pointer;

border-bottom:1px solid #f1f1f1;

transition:.3s;

}

.suggestion-item:hover{

background:var(--primary-light);

color:var(--primary);

}
/* ==========================================
   COMMON SECTION STYLES
========================================== */

section{
padding:90px 5%;
}

.section-header{
text-align:center;
margin-bottom:60px;
}

.section-header h2{
font-size:2.6rem;
font-weight:700;
margin-bottom:10px;
}

.section-header p{
max-width:700px;
margin:auto;
color:var(--muted);
}

/* ==========================================
   FEATURED CATEGORIES
========================================== */

.featured-categories{
background:#fff;
}

.category-grid{

display:grid;

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

gap:30px;

}

.category-card{

position:relative;

overflow:hidden;

border-radius:28px;

background:#fff;

box-shadow:var(--shadow);

transition:var(--transition);

cursor:pointer;

height:320px;

}

.category-card:hover{

transform:translateY(-10px);

box-shadow:var(--shadow-hover);

}

.category-card img{

width:100%;

height:100%;

object-fit:cover;

transition:1s;

}

.category-card:hover img{

transform:scale(1.12);

}

.category-card::after{

content:'';

position:absolute;

inset:0;

background:
linear-gradient(
to top,
rgba(0,0,0,.75),
rgba(0,0,0,.05)
);

}

.category-card h3{

position:absolute;

left:25px;

bottom:25px;

z-index:2;

color:#fff;

font-size:1.4rem;

font-weight:600;

}

.category-card::before{

content:'Explore →';

position:absolute;

top:20px;

right:20px;

z-index:2;

background:#fff;

color:var(--primary);

padding:10px 15px;

border-radius:40px;

font-size:.85rem;

font-weight:600;

opacity:0;

transform:translateY(-10px);

transition:.35s;

}

.category-card:hover::before{

opacity:1;

transform:translateY(0);

}

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

.why-us{

background:var(--primary-light);

}

.why-us h2{

text-align:center;

font-size:2.5rem;

margin-bottom:50px;

}

.features{

display:grid;

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

gap:25px;

}

.feature{

background:#fff;

padding:35px;

border-radius:24px;

text-align:center;

box-shadow:var(--shadow);

transition:.35s;

}

.feature:hover{

transform:translateY(-10px);

}

.feature i{

font-size:2rem;

margin-bottom:15px;

color:var(--primary);

}

.feature h3{

margin-bottom:10px;

}

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

.featured-products{

background:#fff;

}

.featured-products h2{

text-align:center;

font-size:2.5rem;

margin-bottom:50px;

}

.product-grid{

display:grid;

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

gap:30px;

}

.product-card{

background:#fff;

border-radius:28px;

overflow:hidden;

box-shadow:var(--shadow);

position:relative;

transition:.35s;

cursor:pointer;

}

.product-card:hover{

transform:translateY(-12px);

box-shadow:var(--shadow-hover);

}

.product-card img{

width:100%;

height:280px;

object-fit:cover;

transition:.8s;

}

.product-card:hover img{

transform:scale(1.08);

}

.product-card h3{

padding:20px 20px 5px;

font-size:1.2rem;

}

.product-card p{

padding:0 20px 20px;

font-size:1.1rem;

font-weight:700;

color:var(--primary);

}

.product-card::before{

content:'Quick View';

position:absolute;

left:50%;

top:45%;

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

background:var(--primary);

color:#fff;

padding:12px 22px;

border-radius:50px;

opacity:0;

transition:.35s;

z-index:5;

}

.product-card:hover::before{

opacity:1;

top:50%;

}

.product-card .actions{

display:flex;

gap:10px;

padding:0 20px 20px;

}

.product-card .actions button{

flex:1;

border:none;

padding:12px;

border-radius:12px;

background:var(--primary-light);

color:var(--primary);

font-weight:600;

}

.product-card .actions button:hover{

background:var(--primary);

color:#fff;

}

/* ==========================================
   FESTIVAL COLLECTIONS
========================================== */

.festival-section{

background:
linear-gradient(
180deg,
#fff,
var(--primary-light)
);

}

.festival-section h2{

text-align:center;

font-size:2.5rem;

margin-bottom:50px;

}

.festival-slider{

display:grid;

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

gap:25px;

}

.festival-card{

padding:80px 20px;

border-radius:30px;

background:
linear-gradient(
135deg,
var(--primary),
var(--primary-dark)
);

color:#fff;

font-size:1.3rem;

font-weight:600;

text-align:center;

cursor:pointer;

transition:.35s;

position:relative;

overflow:hidden;

}

.festival-card:hover{

transform:translateY(-10px);

}

.festival-card::after{

content:'';

position:absolute;

width:200px;

height:200px;

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

border-radius:50%;

right:-50px;

top:-50px;

}

.nav-dropdown{
position:relative;
}

.nav-dropdown > a{
display:flex;
align-items:center;
gap:8px;
}

.dropdown-menu{

position:absolute;

top:120%;

left:0;

min-width:250px;

background:#fff;

border-radius:20px;

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

padding:15px 0;

opacity:0;

visibility:hidden;

transform:translateY(15px);

transition:.35s;

z-index:999;
}

.dropdown-menu a{

display:block;

padding:12px 20px;

color:#333;

font-size:.95rem;

}

.dropdown-menu a:hover{

background:#fff5fa;

color:#b0005b;

padding-left:28px;
}

.nav-dropdown:hover .dropdown-menu{

opacity:1;

visibility:visible;

transform:translateY(0);
}

.menu-overlay{

position:fixed;

inset:0;

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

opacity:0;

visibility:hidden;

transition:.35s;

z-index:3000;

}

.menu-overlay.active{

opacity:1;

visibility:visible;

}

.menu-drawer{

position:fixed;

right:-380px;

top:0;

width:380px;

height:100vh;

background:#fff;

z-index:3001;

padding:30px;

transition:.4s;

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

display:flex;

flex-direction:column;

}

.menu-drawer.active{

right:0;

}

.drawer-header{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:30px;

}

.drawer-header h3{

font-size:1.5rem;

color:#b0005b;

}

.drawer-header button{

border:none;

background:none;

font-size:1.4rem;

}

.menu-drawer a{

padding:15px 0;

border-bottom:1px solid #eee;

color:#333;

font-weight:500;

transition:.3s;

}

.menu-drawer a:hover{

padding-left:12px;

color:#b0005b;

}

.drawer-footer{

margin-top:auto;

}

.drawer-whatsapp{

display:block;

text-align:center;

background:#25D366;

color:#fff !important;

padding:15px;

border-radius:15px;

border:none !important;

}

/* ==========================================
   BULK ORDERS
========================================== */

.bulk-banner{

background:
linear-gradient(
135deg,
var(--primary),
var(--primary-dark)
);

padding:90px 50px;

border-radius:40px;

text-align:center;

color:#fff;

margin:80px 5%;

}

.bulk-banner h2{

font-size:2.8rem;

margin-bottom:15px;

}

.bulk-banner p{

max-width:700px;

margin:auto;

margin-bottom:25px;

}

.bulk-banner a{

display:inline-block;

padding:16px 30px;

background:#fff;

color:var(--primary);

border-radius:50px;

font-weight:700;

transition:.35s;

}

.bulk-banner a:hover{

transform:translateY(-4px);

}

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

.testimonials{

background:#fff;

}

.testimonials h2{

text-align:center;

font-size:2.5rem;

margin-bottom:50px;

}

.testimonial-slider{

display:grid;

grid-template-columns:
1fr 1fr;

gap:25px;

}

.testimonial{

background:#fff;

padding:35px;

border-radius:24px;

box-shadow:var(--shadow);

transition:.35s;

}

.testimonial:hover{

transform:translateY(-8px);

}

.testimonial .stars{

color:#f59e0b;

font-size:1.2rem;

margin-bottom:15px;

}

.testimonial h4{

margin-top:15px;

color:var(--primary);

}

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

.about-section{

display:grid;

grid-template-columns:
1fr 1fr;

gap:60px;

align-items:center;

}

.about-content h2{

font-size:2.8rem;

margin-bottom:20px;

}

.about-content p{

color:var(--muted);

margin-bottom:20px;

}

.about-content ul{

margin-top:20px;

}

.about-content ul li{

margin-bottom:10px;

padding-left:20px;

position:relative;

}

.about-content ul li::before{

content:'✓';

position:absolute;

left:0;

color:var(--primary);

font-weight:700;

}

.about-image{

overflow:hidden;

border-radius:30px;

}

.about-image img{

border-radius:30px;

transition:1s;

box-shadow:var(--shadow);

}

.about-image:hover img{

transform:scale(1.08);

}
/* ==========================================
   WHATSAPP CTA SECTION
========================================== */

.whatsapp-banner{

background:
linear-gradient(
135deg,
var(--primary),
var(--primary-dark)
);

padding:80px 40px;

border-radius:40px;

text-align:center;

color:#fff;

margin:80px 5%;

position:relative;

overflow:hidden;

}

.whatsapp-banner::before{

content:'';

position:absolute;

width:300px;

height:300px;

border-radius:50%;

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

top:-100px;

right:-100px;

}

.whatsapp-banner h2{

font-size:2.5rem;

margin-bottom:15px;

position:relative;

z-index:2;

}

.whatsapp-banner p{

position:relative;

z-index:2;

margin-bottom:25px;

}

.whatsapp-banner a{

display:inline-block;

padding:15px 30px;

border-radius:50px;

background:#fff;

color:var(--primary);

font-weight:700;

position:relative;

z-index:2;

transition:.35s;

}

.whatsapp-banner a:hover{

transform:translateY(-5px);

}

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

.floating-whatsapp{

position:fixed;

right:25px;

bottom:25px;

width:65px;

height:65px;

border-radius:50%;

background:#25D366;

display:flex;

align-items:center;

justify-content:center;

color:#fff;

font-size:1.8rem;

z-index:999;

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

transition:.35s;

}

.floating-whatsapp:hover{

transform:scale(1.08);

}

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

footer{

background:#111;

color:#fff;

padding:80px 5%;

display:grid;

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

gap:40px;

}

footer h3{

margin-bottom:20px;

font-size:1.2rem;

}

footer p,
footer li,
footer a{

color:#cfcfcf;

margin-bottom:10px;

font-size:.95rem;

}

footer a:hover{

color:#fff;

}

.footer-bottom{

padding:20px 5%;

text-align:center;

background:#0a0a0a;

color:#aaa;

font-size:.9rem;

}

/* ==========================================
   CART DRAWER
========================================== */

.cart-drawer{

position:fixed;

right:-420px;

top:0;

width:400px;

height:100vh;

background:#fff;

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

z-index:2000;

padding:25px;

transition:.4s ease;

overflow-y:auto;

}

.cart-drawer.active{

right:0;

}

.cart-drawer h3{

margin-bottom:20px;

font-size:1.4rem;

}

.cart-items{

display:flex;

flex-direction:column;

gap:15px;

margin-bottom:20px;

}

.cart-item{

display:flex;

gap:15px;

align-items:center;

padding-bottom:15px;

border-bottom:1px solid #eee;

}

.cart-item img{

width:70px;

height:70px;

border-radius:12px;

object-fit:cover;

}

.cart-item h4{

font-size:.95rem;

}

.cart-total{

margin:20px 0;

font-weight:700;

font-size:1.1rem;

}

.cart-drawer button{

width:100%;

border:none;

background:var(--primary);

color:#fff;

padding:15px;

border-radius:15px;

font-weight:600;

}

/* ==========================================
   MODAL
========================================== */

.quick-view-modal{

position:fixed;

inset:0;

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

display:none;

align-items:center;

justify-content:center;

z-index:3000;

padding:20px;

}

.modal-content{

width:min(950px,100%);

background:#fff;

border-radius:30px;

padding:30px;

position:relative;

animation:modalPop .35s ease;

}

@keyframes modalPop{

from{

opacity:0;

transform:scale(.9);

}

to{

opacity:1;

transform:scale(1);

}

}

.close-modal{

position:absolute;

top:15px;

right:20px;

background:none;

border:none;

font-size:2rem;

cursor:pointer;

}

.modal-body{

display:grid;

grid-template-columns:
1fr 1fr;

gap:40px;

}

/* ==========================================
   TOASTS
========================================== */

.toast-container{

position:fixed;

top:100px;

right:20px;

z-index:5000;

}

.toast{

background:var(--primary);

color:#fff;

padding:14px 18px;

border-radius:12px;

margin-bottom:10px;

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

animation:toastIn .35s ease;

}

@keyframes toastIn{

from{

opacity:0;

transform:translateX(100%);

}

to{

opacity:1;

transform:translateX(0);

}

}

/* ==========================================
   REVEAL ANIMATION
========================================== */

.reveal{

opacity:0;

transform:translateY(50px);

transition:.8s ease;

}

.reveal.active{

opacity:1;

transform:translateY(0);

}

/* ==========================================
   LOADER
========================================== */

.page-loader{

position:fixed;

inset:0;

background:#fff;

display:flex;

align-items:center;

justify-content:center;

z-index:9999;

}

.loader{

width:60px;

height:60px;

border:5px solid #eee;

border-top:5px solid var(--primary);

border-radius:50%;

animation:spin 1s linear infinite;

}

@keyframes spin{

100%{

transform:rotate(360deg);

}

}

/* ==========================================
   TABLET
========================================== */

@media(max-width:992px){

.desktop-nav{

display:none;

}

.mobile-toggle{

display:block;

}

.slide{

grid-template-columns:1fr;

}

.hero-content{

order:2;

}

.hero-image{

order:1;

}

.hero-content h1{

font-size:3rem;

}

.features{

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

}

.festival-slider{

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

}

.testimonial-slider{

grid-template-columns:1fr;

}

.about-section{

grid-template-columns:1fr;

}

.modal-body{

grid-template-columns:1fr;

}

}

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

@media(max-width:600px){

.announcement-bar{

flex-direction:column;

gap:5px;

text-align:center;

}

.hero-slider{

padding:60px 5%;

}

.hero-content h1{

font-size:2.2rem;

}

.hero-buttons{

flex-direction:column;

}

.btn-primary,
.btn-secondary{

text-align:center;

}

.search-section{

padding:20px;

}

.search-section h2{

font-size:1.5rem;

}

.features{

grid-template-columns:1fr;

}

.festival-slider{

grid-template-columns:1fr;

}

.cart-drawer{

width:100%;

right:-100%;

}

.whatsapp-banner h2{

font-size:1.8rem;

}

.section-header h2,
.featured-products h2,
.why-us h2,
.festival-section h2,
.testimonials h2{

font-size:2rem;

}
.category-card{
text-decoration:none;
color:inherit;
display:block;
}

footer{

grid-template-columns:1fr;

text-align:center;

}

.floating-whatsapp{

width:58px;

height:58px;

font-size:1.5rem;

}

}
#cartBtn span:empty{
    display:none !important;
}
#cartBtn{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    width:46px;
    height:46px;
    border-radius:50%;
    background:#fff5fa;
    color:#b0005b;
    font-size:1rem;
}

#cartBtn span{
    position:absolute;
    top:-6px;
    right:-6px;
    min-width:20px;
    height:20px;
    padding:0 5px;
    border-radius:50px;
    background:#b0005b;
    color:#fff;
    font-size:11px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:600;
}