*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial,Helvetica,sans-serif;
}

body{
background:#f8f9fa;
}

.top-bar{
background:#111;
color:#fff;
font-size:14px;
}

.top-bar a{
color:#fff;
margin-left:15px;
transition:.3s;
}

.top-bar a:hover{
color:#ff3b30;
}

.main-header{
background:#fff;
box-shadow:0 3px 12px rgba(0,0,0,.08);
}

.logo{
font-weight:900;
font-size:34px;
margin:0;
}

.logo span{
color:#e60023;
}

.search-box{
display:flex;
border:2px solid #e60023;
border-radius:50px;
overflow:hidden;
}

.search-box input{
border:none;
padding:12px;
width:100%;
outline:none;
}

.search-box button{
width:60px;
background:#e60023;
color:#fff;
border:none;
}

.header-icons{
display:flex;
justify-content:end;
align-items:center;
gap:25px;
}

.header-icons a{
position:relative;
font-size:24px;
color:#222;
transition:.3s;
}

.header-icons a:hover{
color:#e60023;
}

.header-icons span{
position:absolute;
top:-8px;
right:-10px;
background:#e60023;
color:#fff;
width:18px;
height:18px;
border-radius:50%;
font-size:11px;
display:flex;
align-items:center;
justify-content:center;
}

.custom-navbar{
background:#fff;
box-shadow:0 2px 8px rgba(0,0,0,.05);
}

.custom-navbar .nav-link{
padding:18px 24px;
font-weight:700;
color:#222;
transition:.3s;
}

.custom-navbar .nav-link:hover,
.custom-navbar .nav-link.active{
color:#e60023;
}
/* HERO */

.hero{
margin-bottom:60px;
}

.hero-image{
height:650px;
object-fit:cover;
}

.hero-overlay{
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
background:rgba(0,0,0,.55);
}

.carousel-caption{
bottom:20%;
text-align:left;
}

.carousel-caption h5{

font-size:24px;

letter-spacing:2px;

text-transform:uppercase;

color:#ff3b30;

margin-bottom:20px;

}

.carousel-caption h1{

font-size:65px;

font-weight:900;

margin-bottom:20px;

}

.carousel-caption p{

font-size:22px;

margin-bottom:35px;

}

.hero-btn{

display:inline-block;

padding:15px 45px;

background:#e60023;

color:#fff;

font-size:18px;

font-weight:700;

text-decoration:none;

border-radius:40px;

transition:.3s;

}

.hero-btn:hover{

background:#fff;

color:#111;

}

.carousel-control-prev,

.carousel-control-next{

width:70px;

}

@media(max-width:768px){

.hero-image{

height:450px;

}

.carousel-caption{

bottom:12%;

}

.carousel-caption h1{

font-size:38px;

}

.carousel-caption p{

font-size:17px;

}

.hero-btn{

padding:12px 28px;

font-size:15px;

}

}

/*==============================
 Categories
==============================*/

.categories{
background:#ffffff;
}

.section-subtitle{
color:#e60023;
font-weight:700;
letter-spacing:2px;
text-transform:uppercase;
margin-bottom:10px;
}

.section-title{
font-size:42px;
font-weight:800;
margin-bottom:15px;
}

.section-text{
color:#777;
max-width:650px;
margin:auto;
}

.category-card{

position:relative;

overflow:hidden;

border-radius:18px;

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

cursor:pointer;

transition:.4s;

background:#fff;

}

.category-card img{

width:100%;

height:280px;

object-fit:cover;

transition:.5s;

display:block;

}

.category-card:hover img{

transform:scale(1.08);

}

.category-content{

position:absolute;

left:0;

right:0;

bottom:0;

padding:30px;

background:linear-gradient(to top,rgba(0,0,0,.9),transparent);

color:#fff;

}

.category-content h4{

font-size:28px;

font-weight:700;

margin-bottom:12px;

}

.category-content a{

color:#fff;

font-weight:600;

text-decoration:none;

}

.category-content a:hover{

color:#ff3b30;

}

.category-card:hover{

transform:translateY(-8px);

box-shadow:0 20px 45px rgba(0,0,0,.18);

}
/*==============================
Featured Products
==============================*/

.featured-products{

background:#f7f8fb;

}

.product-card{

background:#fff;

border-radius:18px;

overflow:hidden;

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

position:relative;

transition:.35s;

}

.product-card:hover{

transform:translateY(-10px);

box-shadow:0 20px 45px rgba(0,0,0,.15);

}

.sale-badge{

position:absolute;

top:15px;

left:15px;

background:#e60023;

color:#fff;

padding:6px 14px;

font-size:13px;

font-weight:bold;

border-radius:30px;

z-index:5;

}

.product-icons{

position:absolute;

right:15px;

top:15px;

display:flex;

flex-direction:column;

gap:10px;

z-index:10;

}

.product-icons a{

width:42px;

height:42px;

background:#fff;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

color:#222;

text-decoration:none;

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

transition:.3s;

}

.product-icons a:hover{

background:#e60023;

color:#fff;

}

.product-image{

height:260px;

overflow:hidden;

}

.product-image img{

width:100%;

height:100%;

object-fit:cover;

transition:.5s;

}

.product-card:hover img{

transform:scale(1.08);

}

.product-info{

padding:25px;

text-align:center;

}

.product-info h5{

font-size:20px;

font-weight:700;

margin-bottom:10px;

min-height:50px;

}

.rating{

color:#ffc107;

margin-bottom:12px;

font-size:15px;

}

.price{

margin-bottom:20px;

}

.new-price{

font-size:26px;

font-weight:700;

color:#e60023;

}

.old-price{

margin-left:10px;

text-decoration:line-through;

color:#888;

}

.cart-btn{

width:100%;

background:#111;

color:#fff;

border:none;

padding:13px;

border-radius:40px;

font-weight:700;

transition:.3s;

}

.cart-btn:hover{

background:#e60023;

}

/*============================
SPECIAL OFFER
=============================*/

.offer-section{

padding:90px 0;

background:linear-gradient(135deg,#111,#222);

color:#fff;

}

.offer-tag{

background:#e60023;

padding:8px 18px;

border-radius:40px;

font-size:14px;

font-weight:bold;

display:inline-block;

margin-bottom:20px;

}

.offer-content h2{

font-size:58px;

font-weight:900;

margin-bottom:10px;

}

.offer-content h2 span{

color:#ff4040;

}

.offer-content h3{

font-size:30px;

margin-bottom:20px;

}

.offer-content p{

color:#ccc;

font-size:18px;

line-height:1.8;

margin-bottom:30px;

}

.countdown{

display:flex;

gap:18px;

margin-bottom:35px;

}

.time-box{

background:#fff;

color:#111;

width:95px;

height:95px;

border-radius:15px;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

font-weight:bold;

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

}

.time-box h4{

font-size:34px;

margin:0;

color:#e60023;

}

.offer-btn{

display:inline-block;

padding:15px 40px;

background:#e60023;

color:#fff;

border-radius:50px;

text-decoration:none;

font-weight:bold;

transition:.3s;

}

.offer-btn:hover{

background:#fff;

color:#111;

}

.offer-image{

box-shadow:0 20px 45px rgba(0,0,0,.35);

}
/*==============================
BEST SELLERS
==============================*/

.best-sellers{

background:#fff;

padding:80px 0;

}

.bestSellerSlider{

padding-bottom:50px;

}

.swiper-pagination-bullet{

width:12px;

height:12px;

background:#ccc;

opacity:1;

}

.swiper-pagination-bullet-active{

background:#e60023;

}

/*==============================
BRANDS
==============================*/

.brands-section{

padding:90px 0;

background:#f8f9fb;

}

.brandSlider{

padding:20px 0;

}

.brand-card{

height:120px;

background:#fff;

border-radius:15px;

display:flex;

justify-content:center;

align-items:center;

box-shadow:0 10px 30px rgba(0,0,0,.08);

transition:.35s;

}

.brand-card:hover{

transform:translateY(-8px);

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

}

.brand-card img{

max-width:140px;

max-height:55px;

filter:grayscale(100%);

transition:.4s;

}

.brand-card:hover img{

filter:none;

transform:scale(1.08);

}

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

.testimonials{

background:#fff;

}

.testimonial-card{

background:#fff;

padding:35px;

border-radius:20px;

text-align:center;

box-shadow:0 12px 35px rgba(0,0,0,.08);

transition:.35s;

height:100%;

}

.testimonial-card:hover{

transform:translateY(-10px);

}

.testimonial-card img{

width:90px;

height:90px;

border-radius:50%;

margin-bottom:20px;

}

.testimonial-card h4{

font-weight:700;

margin-bottom:10px;

}

.testimonial-card p{

color:#666;

line-height:1.8;

}

/*==============================
NEWSLETTER
==============================*/

.newsletter{

padding:70px 0;

background:#111;

color:#fff;

}

.newsletter-form{

display:flex;

overflow:hidden;

border-radius:50px;

}

.newsletter-form input{

flex:1;

padding:16px 20px;

border:none;

outline:none;

}

.newsletter-form button{

background:#e60023;

color:#fff;

padding:16px 35px;

border:none;

font-weight:700;

transition:.3s;

}

.newsletter-form button:hover{

background:#ff3b30;

}

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

.footer{

background:#111;

color:#ddd;

padding:80px 0 20px;

}

.footer-logo{

font-size:36px;

font-weight:900;

margin-bottom:20px;

}

.footer-logo span{

color:#e60023;

}

.footer p{

color:#bbb;

line-height:1.8;

}

.footer h5{

color:#fff;

margin-bottom:25px;

font-weight:700;

}

.footer ul{

list-style:none;

padding:0;

}

.footer ul li{

margin-bottom:12px;

}

.footer ul li a{

color:#bbb;

text-decoration:none;

transition:.3s;

}

.footer ul li a:hover{

color:#e60023;

padding-left:8px;

}

.footer-social{

display:flex;

gap:15px;

margin-top:25px;

}

.footer-social a{

width:45px;

height:45px;

background:#222;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

color:#fff;

transition:.3s;

}

.footer-social a:hover{

background:#e60023;

transform:translateY(-5px);

}

.payments{

display:flex;

gap:18px;

font-size:36px;

}

.payments i{

color:#fff;

}

.footer hr{

margin:50px 0 25px;

border-color:#333;

}

.footer-bottom{

text-align:center;

}

.footer-bottom p{

margin:0;

color:#888;

}

/*========================
BACK TO TOP
=========================*/

#topBtn{

position:fixed;

bottom:25px;

right:25px;

width:50px;

height:50px;

border:none;

background:#e60023;

color:#fff;

border-radius:50%;

display:none;

cursor:pointer;

font-size:18px;

z-index:999;

transition:.3s;

}

#topBtn:hover{

background:#111;

}