body{
margin:0;
font-family:Arial;
background:#f3f3f3;
}

/* HEADER */

.header{
background:#131921;
color:white;
display:flex;
justify-content:space-between;
align-items:center;
padding:10px 20px;
}

.logo a{
color:white;
font-size:22px;
text-decoration:none;
font-weight:bold;
}

.search input{
width:400px;
padding:8px;
}

.search button{
padding:8px 15px;
background:#febd69;
border:none;
}

.cart a{
color:white;
text-decoration:none;
}

/* HERO */

.hero img{
width:100%;
height:350px;
object-fit:cover;
}

/* HERO SLIDER */

.hero-slider{
position:relative;
height:450px;
overflow:hidden;
}

.slider{
display:flex;
height:100%;
}

.slide{
min-width:100%;
position:relative;
}

.slide img{
width:100%;
height:450px;
object-fit:cover;
}

/* GRADIENT OVERLAY */

.overlay{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:linear-gradient(
to right,
rgba(0,0,0,0.7),
rgba(0,0,0,0.2)
);
}

/* TEXT CONTENT */

.banner-content{
position:absolute;
top:50%;
left:8%;
transform:translateY(-50%);
color:white;
max-width:450px;
animation:fadeIn 1s ease;
}

.banner-content h2{
font-size:42px;
margin-bottom:10px;
}

.banner-content p{
font-size:18px;
margin-bottom:20px;
}

.banner-btn{
background:#FFD814;
color:black;
padding:12px 20px;
text-decoration:none;
border-radius:4px;
font-weight:bold;
}

/* ARROWS */

.prev,.next{
position:absolute;
top:50%;
transform:translateY(-50%);
background:rgba(0,0,0,0.4);
border:none;
color:white;
font-size:30px;
padding:8px 14px;
cursor:pointer;
}

.prev{left:15px;}
.next{right:15px;}

/* DOTS */

.dots{
position:absolute;
bottom:20px;
left:50%;
transform:translateX(-50%);
}

.dots span{
height:12px;
width:12px;
background:white;
display:inline-block;
margin:4px;
border-radius:50%;
opacity:.4;
cursor:pointer;
}

.dots span.active{
opacity:1;
}

/* TEXT ANIMATION */

@keyframes fadeIn{
from{
opacity:0;
transform:translateY(20px);
}
to{
opacity:1;
transform:translateY(0);
}
}

/* arrows */

.prev,
.next{
position:absolute;
top:50%;
transform:translateY(-50%);
background:rgba(0,0,0,0.4);
color:white;
border:none;
font-size:28px;
padding:10px 16px;
cursor:pointer;
}

.prev{ left:20px; }
.next{ right:20px; }

/* dots */

.dots{
position:absolute;
bottom:20px;
left:50%;
transform:translateX(-50%);
}

.dots span{
height:12px;
width:12px;
background:white;
display:inline-block;
border-radius:50%;
margin:5px;
cursor:pointer;
opacity:0.5;
}

.dots span.active{
opacity:1;
}

/* CATEGORY */

.categories{
padding:40px;
}

.category-grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
gap:20px;
}

.cat-card{
background:white;
padding:15px;
border-radius:8px;
text-align:center;
text-decoration:none;
color:black;
}

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

/* PRODUCTS */

.featured{
padding:40px;
}

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

.product-card{
background:white;
padding:15px;
border-radius:8px;
text-align:center;
transition:0.3s;
}

.product-card:hover{
transform:translateY(-5px);
box-shadow:0 5px 15px rgba(0,0,0,0.15);
}

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

.price{
color:#B12704;
font-weight:bold;
}

.btn{
display:inline-block;
padding:8px 14px;
background:#FFD814;
text-decoration:none;
color:black;
margin-top:8px;
}

/* DEALS */

.deals{
padding:40px;
}

.deal-slider{
display:flex;
gap:20px;
overflow-x:auto;
}

.deal-card{
min-width:200px;
background:white;
padding:15px;
border-radius:8px;
text-align:center;
}

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

/* FOOTER */

.footer{
background:#131921;
color:white;
text-align:center;
padding:20px;
margin-top:40px;
}    

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