/* =====================================================
   ANHAD BAZAR
   PREMIUM STYLE.CSS
   PART 1 — ROOT + RESET + NAVBAR + LOGO
===================================================== */

:root{
--primary:#0071dc;
--primary-dark:#005bb5;
--secondary:#f3a847;
--secondary-dark:#d68d19;
--text-dark:#1f2937;
--text-light:#6b7280;
--text-white:#ffffff;
--bg-body:#f3f5f7;
--bg-white:#ffffff;
--bg-hover:#f5f8ff;
--border:#e5e7eb;
--shadow-sm:0 8px 25px rgba(0,0,0,.05);
--shadow-md:0 12px 35px rgba(0,0,0,.12);
--radius-sm:8px;
--radius-md:12px;
--radius-lg:18px;
--radius-pill:999px;
--transition:.3s ease;
--container:1280px;
}

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

html{
scroll-behavior:smooth;
}

body{
font-family:'Poppins',Arial,sans-serif;
background:var(--bg-body);
color:var(--text-dark);
line-height:1.6;
overflow-x:hidden;
padding-top:140px;
}
img{
max-width:100%;
display:block;
}

a{
text-decoration:none;
color:inherit;
}

ul{
list-style:none;
}

button,
input{
font-family:inherit;
border:none;
outline:none;
}

button{
cursor:pointer;
}


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

.navbar{
    width:100%;
    height:82px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 35px;
    background:#38383d;
    position: fixed;
    top:0;
    left:0;
    z-index:9999;
}

.navbar.hide{
transform:translateY(-100%);
}

.navbar::after{
content:"";
position:absolute;
bottom:0;
left:0;
width:100%;
height:1px;
background:rgba(255,255,255,.08);
}


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

.logo{
flex-shrink:0;
}

.logo a{
display:flex;
align-items:center;
gap:12px;
transition:var(--transition);
}

.logo a:hover{
transform:scale(1.03);
}

.logo a i{
font-size:34px;
color:#D4AF37;
transition:var(--transition);
}

.logo a:hover i{
transform:rotate(-8deg);
}

.logo-text{
display:flex;
flex-direction:column;
line-height:1;
}

.logo-anhad{
font-size:28px;
font-weight:800;
color:var(--text-white);
}

.logo-bazar{
margin-top:4px;
font-size:15px;
font-weight:700;
letter-spacing:2px;
color:#D4AF37;
}
/* =====================================================
   PART 2 — DELIVERY + SEARCH + HEADER ACTIONS + CART
===================================================== */

.delivery{
display:flex;
align-items:center;
gap:12px;
padding:10px 16px;
border-radius:var(--radius-md);
cursor:pointer;
transition:var(--transition);
}

.delivery:hover{
background:rgba(255,255,255,.08);
transform:translateY(-2px);
}

.delivery i{
font-size:22px;
color:var(--secondary);
}

.delivery-text{
display:flex;
flex-direction:column;
line-height:1.2;
}

.delivery-text small{
font-size:11px;
color:#d1d5db;
}

.delivery-text strong{
font-size:14px;
font-weight:600;
color:var(--text-white);
}


/* =========================
SEARCH BOX
========================= */

.search-box{
flex:1;
max-width:720px;
height:52px;
display:flex;
align-items:center;
position:relative;
margin:0 30px;
background:var(--bg-white);
border-radius:var(--radius-pill);
overflow:hidden;
box-shadow:0 2px 8px rgba(0,0,0,.08);
transition:var(--transition);
}

.search-box:hover{
box-shadow:0 8px 24px rgba(0,0,0,.18);
}

.search-box:focus-within{
box-shadow:0 0 0 3px rgba(243,168,71,.35);
}

.search-box input{
flex:1;
height:100%;
padding:0 22px;
background:transparent;
color:var(--text-dark);
font-size:15px;
font-weight:500;
}

.search-box input::placeholder{
color:#8b9098;
}

.search-box button{
width:48px;
height:48px;
margin-right:4px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
background:var(--secondary);
transition:var(--transition);
}

.search-box button:hover{
background:var(--secondary-dark);
transform:scale(1.05);
}

.search-box button i{
color:var(--text-dark);
font-size:18px;
}


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

.header-actions{
display:flex;
align-items:center;
gap:8px;
flex-shrink:0;
}

.header-item{
position:relative;
display:flex;
align-items:center;
gap:10px;
padding:10px 14px;
border-radius:var(--radius-md);
color:var(--text-white);
overflow:hidden;
transition:var(--transition);
}

.header-item:hover{
background:rgba(255,255,255,.08);
transform:translateY(-2px);
}

.header-item::after{
content:"";
position:absolute;
top:0;
left:-120%;
width:100%;
height:100%;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent);
transition:.7s;
}

.header-item:hover::after{
left:120%;
}

.header-item i{
min-width:22px;
text-align:center;
font-size:22px;
color:var(--secondary);
transition:var(--transition);
}

.header-item:hover i{
transform:scale(1.15);
}

.header-item div{
display:flex;
flex-direction:column;
line-height:1.2;
}

.header-item small{
font-size:11px;
color:#d1d5db;
}

.header-item span{
font-size:14px;
font-weight:600;
color:var(--text-white);
}

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

.cart{
    padding-right:18px;
    position:relative;
    z-index:1000;
    overflow:visible;
}

.cart-icon-box{
    position:relative;
    display:flex;
    align-items:center;
    z-index:5;
}

.cart-icon{
    font-size:24px;
    color:#ffffff;
    cursor:pointer;
    position:relative;
    z-index: 3;
}

.cart-icon:hover{
    color:#ffd700;
}

.cart-count{
    position:absolute;
    top:-10px;
    right:-12px;
    width:18px;
    height:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#ff3b30;
    color:#fff;
    font-size:10px;
    font-weight:700;
    border-radius:50%;
    border:2px solid #38383d;
}

@keyframes pulse{
    0%{transform:scale(1);}
    50%{transform:scale(1.15);}
    100%{transform:scale(1);}
}
/* =====================================================
   PART 3 — CATEGORY NAVIGATION + DROPDOWN + PRODUCTS
===================================================== */

.category-nav{
width:100%;
height:58px;
display:flex;
align-items:center;
gap:12px;
padding:0 35px;
background:var(--bg-white);
border-bottom:1px solid var(--border);
position:fixed;
top:82px;
left:0;
z-index:9998;
overflow:visible;
box-shadow:0 2px 10px rgba(0,0,0,.04);
transition:top .35s ease;
}

.category-nav::-webkit-scrollbar{
display:none;
}

.dropdown{
position:relative;
flex-shrink:0;
z-index:10000;
}

.nav-pill{
display:flex;
align-items:center;
justify-content:center;
gap:10px;
height:42px;
padding:0 22px;
background:var(--primary);
color:var(--text-white);
border-radius:var(--radius-pill);
font-size:15px;
font-weight:600;
cursor:pointer;
position:relative;
overflow:hidden;
transition:var(--transition);
}

.nav-pill:hover{
background:var(--primary-dark);
box-shadow:0 8px 18px rgba(0,113,220,.25);
}

.nav-pill::before{
content:"";
position:absolute;
left:-100%;
top:0;
width:100%;
height:100%;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent);
transition:.7s;
}

.nav-pill:hover::before{
left:100%;
}

.arrow{
display:flex;
align-items:center;
transition:var(--transition);
}

.nav-pill:hover .arrow{
transform:rotate(180deg);
}

.category-nav>a{
position:relative;
display:flex;
align-items:center;
height:42px;
padding:0 16px;
border-radius:var(--radius-pill);
color:var(--text-dark);
font-size:14px;
font-weight:600;
transition:var(--transition);
}

.category-nav>a:hover{
background:var(--bg-hover);
color:var(--primary);
transform:translateY(-2px);
}


/* =========================
DROPDOWN MENU
========================= */

.dropdown-menu{
position:absolute;
top:54px;
left:0;
width:290px;
background:var(--bg-white);
border:1px solid var(--border);
border-radius:var(--radius-lg);
box-shadow:var(--shadow-md);
padding:10px 0;
opacity:0;
visibility:hidden;
transform:translateY(12px);
pointer-events:none;
z-index:99999;
transition:.25s ease;
}

.dropdown-menu.show{
opacity:1;
visibility:visible;
transform:translateY(0);
pointer-events:auto;
}

.dropdown-menu li{
position:relative;
}

.dropdown-menu li:not(:last-child){
border-bottom:1px solid #f1f1f1;
}

.dropdown-menu li a{
display:flex;
align-items:center;
justify-content:space-between;
padding:15px 22px;
color:var(--text-dark);
font-size:15px;
font-weight:500;
transition:var(--transition);
}

.dropdown-menu li a:hover{
background:var(--bg-hover);
color:var(--primary);
padding-left:28px;
}


/* =========================
SUBMENU
========================= */

.has-submenu{
position:relative;
}

.submenu{
position:absolute;
top:-10px;
left:100%;
width:260px;
padding:10px 0;
background:var(--bg-white);
border:1px solid var(--border);
border-radius:var(--radius-lg);
box-shadow:var(--shadow-md);
opacity:0;
visibility:hidden;
transform:translateX(12px);
pointer-events:none;
z-index:10000;
transition:.25s ease;
}

.has-submenu:hover>.submenu{
opacity:1;
visibility:visible;
transform:translateX(0);
pointer-events:auto;
}

.submenu li{
border-bottom:1px solid #f5f5f5;
}

.submenu li:last-child{
border-bottom:none;
}

.submenu li a{
display:block;
padding:14px 20px;
font-size:14px;
color:var(--text-dark);
transition:var(--transition);
}

.submenu li a:hover{
background:var(--bg-hover);
color:var(--primary);
padding-left:28px;
}


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

.page-header{
max-width:var(--container);
margin:30px auto;
padding:35px 30px;
background:var(--bg-white);
border-radius:var(--radius-lg);
box-shadow:var(--shadow-sm);
display:flex;
align-items:center;
justify-content:space-between;
gap:30px;
}

.header-left{
display:flex;
flex-direction:column;
gap:12px;
}

.breadcrumb{
display:flex;
gap:8px;
font-size:14px;
color:var(--text-light);
}

.breadcrumb a{
color:var(--primary);
}

.page-header h1{
font-size:36px;
font-weight:800;
}

.description{
font-size:16px;
color:var(--text-light);
}

.header-right{
background:var(--primary);
color:#fff;
padding:12px 22px;
border-radius:var(--radius-pill);
font-weight:600;
}
/* =====================================================
   PART 4 — PRODUCT CARDS + HERO + RESPONSIVE
===================================================== */


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

.products{
max-width:var(--container);
margin:auto;
padding:30px;
}

.title-box{
display:inline-block;
padding:12px 25px;
margin-bottom:30px;
background:var(--bg-white);
border-radius:var(--radius-md);
box-shadow:var(--shadow-sm);
}

.title-box h2{
font-size:22px;
font-weight:700;
}


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

.product-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:25px;
}

.product-card{
background:var(--bg-white);
border:1px solid var(--border);
border-radius:var(--radius-lg);
padding:18px;
transition:var(--transition);
}

.product-card:hover{
transform:translateY(-6px);
box-shadow:var(--shadow-md);
}

.product-card img{
width:100%;
height:220px;
object-fit:cover;
margin-bottom:18px;
}

.product-card h3{
font-size:18px;
font-weight:700;
margin-bottom:8px;
}

.product-card p{
font-size:16px;
font-weight:600;
color:var(--primary);
margin-bottom:15px;
}

.product-card button{
width:100%;
padding:12px;
background:var(--primary);
color:#fff;
border-radius:var(--radius-sm);
font-weight:600;
transition:var(--transition);
}

.product-card button:hover{
background:var(--primary-dark);
}

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

.hero{
width:100%;
max-width:1280px;
height:520px;
margin:20px auto;
padding:0 20px;
position:relative;
}

.hero-slider{
width:100%;
height:100%;
position:relative;
overflow:hidden;
border-radius:24px;
box-shadow:0 15px 40px rgba(0,0,0,.15);
}

.slide{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
opacity:0;
visibility:hidden;
transition:opacity .8s ease;
}

.slide.active{
opacity:1;
visibility:visible;
z-index:2;
}

.slide img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}
/* =========================
HERO CONTENT
========================= */
.hero-overlay{
    position:absolute;
    top:50%;
    left:7%;
    transform:translateY(-50%);
    width:420px;
    padding:35px;
    background:rgba(255,255,255,0.25);
    border-radius:25px;
    backdrop-filter:blur(10px);
    z-index:5;
}
.hero-overlay span{color:#238b35;font-size:18px;font-weight:700;}
.hero-overlay h1{font-size:48px;line-height:1.15;margin:15px 0;color:#111;font-weight:800;}
.hero-overlay p{font-size:17px;line-height:1.5;color:#444;margin-bottom:25px;}
.hero-overlay a{display:inline-block;background:#238b35;color:white;padding:14px 32px;border-radius:30px;text-decoration:none;font-weight:700;}



/* =========================
CONTENT BOXES
========================= */
#services,
#about,
#contact{
max-width:var(--container);
margin:40px auto;
padding:40px 30px;
background:var(--bg-white);
border-radius:var(--radius-lg);
box-shadow:var(--shadow-sm);
}

#services h2,
#about h2,
#contact h2{
font-size:28px;
font-weight:700;
margin-bottom:15px;
}

#services p,
#about p,
#contact p{
font-size:16px;
color:var(--text-light);
}

/* Desktop par mobile header hide */
.mobile-navbar,
.mobile-search,
.mobile-sidebar {
    display:none;

}

@media (max-width:1200px){

    .navbar,
    .category-nav{
        padding:0 20px;
    }

    .search-box{
        max-width:500px;
        margin:0 15px;
    }

    .delivery{
        gap:8px;
        padding:8px 10px;
    }

    .header-actions{
        gap:4px;
    }

    .header-item{
        padding:8px;
    }

    .header-item small{
        display:none;
    }

    .header-item span{
        font-size:13px;
    }

}



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




/* Mobile */
@media(max-width:768px){

.desktop-navbar,
.category-nav,
.second-nav{
display:none;
}

body{
padding-top:120px;
}

.mobile-navbar{
display:flex;
justify-content:space-between;
align-items:center;
width:100%;
height:70px;
padding:0 18px;

background:rgba(56,56,61,0.85);

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

border-bottom:1px solid rgba(255,255,255,0.15);

position:fixed;
top:0;
left:0;
z-index:9999;

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

.mobile-logo{
display:flex;
align-items:center;
gap:12px;
}
.mobile-logo i{
font-size:34px;
color:#D4AF37;
}

.logo-anhad{
font-size:28px;
font-weight:800;
color:#fff;
}

.logo-bazar{
font-size:15px;
font-weight:700;
letter-spacing:2px;
color:#D4AF37;
}

.mobile-actions{
display:flex;
align-items:center;
gap:22px;
}

.mobile-cart{
position:relative;
cursor:pointer;
}

.mobile-logo i{
font-size:34px;
color:#D4AF37;
}

.mobile-logo a{
    text-decoration:none;
    color:inherit;
}

.mobile-cart .cart-count{
position:absolute;
top:-8px;
right:-10px;
width:18px;
height:18px;
display:flex;
align-items:center;
justify-content:center;
background:#ff3b30;
color:#fff;
font-size:10px;
font-weight:700;
border-radius:50%;
border:2px solid #38383d;
}

.hamburger{
cursor:pointer;
}

.hamburger i{
font-size:28px;
color:#D4AF37;
}



.mobile-search{
position:fixed;
top:70px;
left:0;
width:100%;
padding:10px 20px;
background:#38383d;

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

z-index:9998;
}

.mobile-sidebar{
display:block;
position:fixed;
top:0;
left:-320px;
width:300px;
height:100vh;
background:#fff;
z-index:99999;
transition:.35s ease;
box-shadow:8px 0 30px rgba(0,0,0,.18);
overflow-y:auto;
}

.mobile-sidebar.active{
left:0;
}

.sidebar-logo{
display:flex;
align-items:center;
gap:12px;
padding:22px;
background:#38383d;
}

.sidebar-logo i{
font-size:32px;
color:#D4AF37;
}

.sidebar-logo .logo-text{
display:flex;
flex-direction:column;
line-height:1;
}

.sidebar-logo .logo-anhad{
font-size:26px;
font-weight:800;
color:#fff;
}

.sidebar-logo .logo-bazar{
font-size:14px;
font-weight:700;
letter-spacing:2px;
color:#D4AF37;
}

.mobile-close{
position:absolute;
top:22px;
right:20px;
font-size:26px;
color:#fff;
cursor:pointer;
}

.mobile-close:hover{
color:#ff5252;
}

.mobile-sidebar ul{
margin:0;
padding:10px 0;
}

.mobile-sidebar li{
margin:0;
border-bottom:1px solid #ececec;
}

.mobile-sidebar a{
display:flex;
align-items:center;
justify-content:space-between;
padding:18px 22px;
font-size:16px;
font-weight:600;
color:#222;
transition:.3s;
}

.mobile-sidebar a:hover{
background:#f5f8ff;
color:#0071dc;
padding-left:30px;
}

.mobile-sidebar a i{
font-size:14px;
color:#999;
transition:.3s;
}

.mobile-sidebar a:hover i{
color:#0071dc;
transform:translateX(5px);
}

.hero{
    width:100%;
    height:340px;
    margin:0;
    padding:0;
}

.hero-slider{
    width:100%;
    height:100%;
    border-radius:30px;
}
.slide img{
width:100%;
height:100%;
object-fit:cover;
object-position:center;
border-radius:30px;
}

.hero-overlay{
    position:absolute;
    top:50%;
    left:5%;
    transform:translateY(-50%);
    width:90%;
    padding:18px;
    box-shadow:0 10px 30px rgba(0,0,0,.12);
    background:rgba(255,255,255,0.10);
    border-radius:20px;

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

    z-index:5;
}

.hero-overlay span{
font-size:14px;
}

.hero-overlay h1{
font-size:24px;
line-height:1.2;
margin:8px 0;
}

.hero-overlay p{
font-size:14px;
line-height:1.4;
margin-bottom:14px;
}

.hero-overlay a{
padding:10px 20px;
font-size:14px;
}
/* FIX DESKTOP NAVBAR */

@media(min-width:769px){

.desktop-navbar{
    display:flex !important;
}

.category-nav{
    display:flex !important;
}

.second-nav{
    display:flex !important;
}

.mobile-navbar,
.mobile-search,
.mobile-sidebar{
    display:none !important;
}

}