/* GLOBAL RESET */

*{
margin:50;
padding:20;
box-sizing:border-box;
}

body{
font-family:Arial, Helvetica, sans-serif;
background:#0f0f11;
color:white;
line-height:1.5;
}

/* CONTAINER */

.container{
max-width:1200px;
margin:auto;
padding:0 20px;
}


/* HEADER */



.container{
max-width:1200px;
margin:auto;
padding:0 20px;
}


/* HEADER */

header{
background:#121216;
position:sticky;
top:0;
z-index:1000;
border-bottom:1px solid rgba(255,255,255,0.05);
}

.header-inner{
display:flex;
align-items:center;
justify-content:space-between;
padding:18px 20px;
}

.logo img{
height:45px;
border-radius:8px;
}


/* NAV */

.nav-menu{
display:grid;
grid-template-columns:repeat(5,auto);
gap:10px;
}

.nav-menu a{
text-decoration:none;
color:#ddd;
font-size:15px;
}

.nav-menu a:hover{
color:#d4af37;
}


/* MOBILE NAV */

@media (max-width:768px){

.nav-menu{
grid-template-columns:repeat(3,auto);
justify-content:center;
}

}



/* HERO SECTION */

.category-hero{
text-align:center;
padding:60px 20px 40px 20px;
}

.category-hero h1{
font-size:36px;
margin-bottom:10px;
}

.category-hero p{
color:#aaa;
font-size:16px;
}


/* SECTION */

.section{
padding:50px 0;
}

.section h2{
text-align:center;
margin-bottom:30px;
font-size:28px;
}


/* PRODUCTS GRID */

.products{

display:grid;

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

gap:25px;

margin-top:20px;

}


/* PRODUCT CARD */

.product-card{

background:#1a1a1f;

border-radius:16px;

overflow:hidden;

transition:0.3s;

box-shadow:0 4px 15px rgba(0,0,0,0.4);

}

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


/* IMAGE SLIDER */

.slider{
position:relative;
overflow:hidden;
}

.slide{
display:none;
width:100%;
height:200px;
object-fit:cover;
}

.slide.active{
display:block;
}

.slider img{
width:100%;
height:200px;
object-fit:cover;
}


/* SLIDER BUTTONS */

.prev,
.next{

position:absolute;

top:50%;

transform:translateY(-50%);

background:rgba(0,0,0,0.5);

color:white;

border:none;

padding:8px 12px;

cursor:pointer;

font-size:18px;

border-radius:4px;

}

.prev{
left:10px;
}

.next{
right:10px;
}


/* PRODUCT BODY */

.product-body{
padding:15px;
}

.product-body h3{
font-size:16px;
margin-bottom:6px;
}

.product-body p{
color:#bbb;
font-size:14px;
margin-bottom:12px;
}


/* BUTTON GROUP */

.buttons{
display:flex;
gap:10px;
}


/* AMAZON BUTTON */

.amazon{

background:#ff9900;

color:#000;

padding:8px 12px;

border-radius:6px;

text-decoration:none;

font-size:13px;

font-weight:600;

text-align:center;

}


/* MEESHO BUTTON */

.meesho{

background:#9c27b0;

color:white;

padding:8px 12px;

border-radius:6px;

text-decoration:none;

font-size:13px;

font-weight:600;

}


/* CATEGORY BUTTONS */

.categories{

display:flex;

flex-wrap:wrap;

gap:15px;

justify-content:center;

padding:40px 20px;

}

.category{

background:#1a1a1f;

padding:12px 18px;

border-radius:8px;

cursor:pointer;

text-decoration:none;

color:white;

transition:0.3s;

}

.category:hover{

background:#d4af37;

color:black;

}


/* RESPONSIVE */

@media(max-width:768px){

.nav-menu{
gap:18px;
}

.category-hero h1{
font-size:28px;
}

.products{
grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
}

.slide{
height:160px;
}

}

/* FOOTER */
.footer-links{
margin-bottom:5px;
}

.footer-links a{
margin:0 10px;
color:#bbb;
text-decoration:none;
font-size:14px;
}

.footer-links a:hover{
color:#d4af37;
}


html, body {
height: 100%;
margin: 0;
}

body {
display: flex;
flex-direction: column;
}

main {
flex: 1;
}

footer {
background: black;
color: white;
text-align: center;
padding: 15px;
}