@import url("variables.css");

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

body{

font-family:Inter,sans-serif;

background:var(--background);

color:var(--text);

}

img{

max-width:100%;

display:block;

}

a{

text-decoration:none;

color:inherit;

}

.container{

width:min(1200px,92%);

margin:auto;

}

header{

position:sticky;

top:0;

z-index:999;

background:#fff;

box-shadow:var(--shadow);

}

.navbar{

display:flex;

justify-content:space-between;

align-items:center;

padding:18px 0;

}

.logo{

font-size:28px;

font-weight:800;

color:var(--primary);

}

.menu{

display:flex;

gap:28px;

list-style:none;

}

.menu a{

font-weight:600;

transition:.3s;

}

.menu a:hover{

color:var(--primary);

}

.search{

display:flex;

align-items:center;

background:#fff;

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

border-radius:40px;

overflow:hidden;

}

.search input{

padding:12px 16px;

border:none;

outline:none;

width:260px;

}

.search button{

padding:12px 18px;

background:var(--primary);

border:none;

color:white;

cursor:pointer;

}

.hero{

padding:90px 0;

}

.hero-grid{

display:grid;

grid-template-columns:1fr 1fr;

align-items:center;

gap:50px;

}

.hero h1{

font-size:58px;

line-height:1.1;

margin-bottom:20px;

}

.hero p{

color:var(--gray);

font-size:18px;

margin-bottom:35px;

}

.hero-buttons{

display:flex;

gap:20px;

}

.btn{

padding:14px 30px;

border-radius:40px;

background:var(--primary);

color:white;

font-weight:700;

transition:.3s;

}

.btn:hover{

transform:translateY(-3px);

}

.btn-outline{

background:white;

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

color:var(--primary);

}

.hero-image{

display:flex;

justify-content:center;

}

.phone-card{

background:white;

padding:30px;

border-radius:20px;

box-shadow:var(--shadow);

}

footer{

margin-top:100px;

background:#0f172a;

color:white;

padding:70px 0;

}

.footer-grid{

display:grid;

grid-template-columns:2fr 1fr 1fr 1fr;

gap:30px;

}

.footer-title{

margin-bottom:18px;

font-weight:700;

}

.footer-link{

display:block;

margin:10px 0;

opacity:.8;

}

.footer-link:hover{

opacity:1;

}

.copyright{

margin-top:40px;

text-align:center;

opacity:.6;

}

.hero-tag{

display:inline-block;

padding:8px 18px;

background:#dbeafe;

color:#2563eb;

border-radius:40px;

font-weight:700;

margin-bottom:25px;

}

.brands{

padding:70px 0;

}

.brand-grid{

display:grid;

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

gap:20px;

margin-top:35px;

}

.brand-card{

background:white;

padding:30px;

border-radius:14px;

text-align:center;

font-weight:700;

box-shadow:var(--shadow);

cursor:pointer;

transition:.3s;

}

.brand-card:hover{

transform:translateY(-8px);

}

.flash-sale{

padding:80px 0;

}

.section-header{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:40px;

}

#countdown{

background:#ef4444;

padding:12px 22px;

color:white;

border-radius:30px;

font-weight:700;

}

.product-grid{

display:grid;

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

gap:30px;

}

.product-card{

background:white;

padding:25px;

border-radius:18px;

box-shadow:var(--shadow);

position:relative;

transition:.3s;

}

.product-card:hover{

transform:translateY(-10px);

}

.product-card img{

height:220px;

object-fit:contain;

margin:auto;

}

.badge{

position:absolute;

top:20px;

left:20px;

background:#ef4444;

padding:6px 12px;

color:white;

border-radius:20px;

font-size:13px;

font-weight:700;

}

.price{

font-size:24px;

font-weight:800;

margin:20px 0;

color:#2563eb;

}

.promo-banner{

padding:80px 0;

}

.promo-box{

background:linear-gradient(135deg,#2563eb,#1e40af);

padding:70px;

border-radius:20px;

text-align:center;

color:white;

}

.promo-box h2{

font-size:42px;

margin-bottom:20px;

}

.features{

padding:80px 0;

}

.feature-grid{

display:grid;

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

gap:25px;

margin-top:40px;

}

.feature-grid div{

background:white;

padding:35px;

text-align:center;

border-radius:15px;

box-shadow:var(--shadow);

font-size:28px;

}

.newsletter{

padding:80px 0;

text-align:center;

}

.newsletter form{

margin-top:30px;

display:flex;

justify-content:center;

gap:15px;

}

.newsletter input{

width:350px;

padding:16px;

border:1px solid #ddd;

border-radius:40px;

}

.newsletter button{

padding:16px 35px;

background:#2563eb;

color:white;

border:none;

border-radius:40px;

cursor:pointer;

}

.page-hero{

padding:70px 0;

background:linear-gradient(135deg,#2563eb,#1e40af);

color:white;

text-align:center;

}

.page-hero h1{

font-size:46px;

margin-bottom:15px;

}

.products-page{

padding:70px 0;

}

.products-layout{

display:grid;

grid-template-columns:280px 1fr;

gap:35px;

}

.sidebar{

background:white;

padding:25px;

border-radius:18px;

box-shadow:var(--shadow);

height:max-content;

}

.filter-group{

margin-top:30px;

}

.filter-group h4{

margin-bottom:15px;

}

.filter-group label{

display:block;

margin:12px 0;

cursor:pointer;

}

.toolbar{

display:flex;

justify-content:space-between;

margin-bottom:35px;

gap:20px;

}

.toolbar input{

flex:1;

padding:14px;

border:1px solid #ddd;

border-radius:12px;

}

.toolbar select{

padding:14px;

border:1px solid #ddd;

border-radius:12px;

}

.product-actions{

display:flex;

gap:10px;

margin:18px 0;

}

.product-actions button{

flex:1;

padding:10px;

border:none;

background:#f1f5f9;

border-radius:10px;

cursor:pointer;

transition:.3s;

}

.product-actions button:hover{

background:#2563eb;

color:white;

}

.pagination{

display:flex;

justify-content:center;

gap:12px;

margin-top:60px;

}

.pagination a{

padding:12px 18px;

background:white;

border-radius:10px;

box-shadow:var(--shadow);

cursor:pointer;

}

.pagination .active{

background:#2563eb;

color:white;

}

.breadcrumb{

padding:25px 0;

font-size:14px;

color:var(--gray);

}

.breadcrumb a{

color:var(--primary);

}

.product-detail{

padding:60px 0;

}

.detail-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:60px;

align-items:start;

}

.main-image{

width:100%;

border-radius:18px;

box-shadow:var(--shadow);

}

.thumbs{

display:flex;

gap:15px;

margin-top:20px;

}

.thumb{

width:90px;

border-radius:12px;

cursor:pointer;

border:2px solid transparent;

}

.thumb.active{

border-color:var(--primary);

}

.price-large{

font-size:40px;

font-weight:800;

color:var(--primary);

margin:20px 0;

}

.rating{

margin:15px 0;

color:#f59e0b;

font-weight:700;

}

.options{

display:flex;

gap:15px;

margin:20px 0;

flex-wrap:wrap;

}

.option{

padding:12px 20px;

border:1px solid #ddd;

background:white;

border-radius:10px;

cursor:pointer;

}

.option.active{

background:var(--primary);

color:white;

}

.color-options{

display:flex;

gap:15px;

margin:20px 0;

}

.color{

width:35px;

height:35px;

border-radius:50%;

cursor:pointer;

border:3px solid white;

box-shadow:var(--shadow);

}

.black{background:black;}

.silver{background:silver;}

.blue{background:#2563eb;}

.gold{background:#d4af37;}

.qty-box{

display:flex;

width:150px;

margin:20px 0;

}

.qty-box button{

width:45px;

border:none;

background:#f1f5f9;

cursor:pointer;

}

.qty-box input{

flex:1;

text-align:center;

border:1px solid #ddd;

}

.detail-buttons{

display:flex;

gap:20px;

margin-top:30px;

margin-bottom:20px;

}

.specifications{

padding:80px 0;

}

.spec-table{

width:100%;

border-collapse:collapse;

margin-top:30px;

}

.spec-table td{

padding:18px;

border-bottom:1px solid #ddd;

}

.header-actions{

display:flex;

gap:20px;

align-items:center;

font-size:22px;

}


.header-actions a{

position:relative;

}


#cartCount{

position:absolute;

top:-10px;

right:-12px;

background:#ef4444;

color:white;

font-size:12px;

width:20px;

height:20px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

}

.cart-page{

padding:80px 0;

}


.cart-item{

display:flex;

gap:25px;

background:white;

padding:25px;

border-radius:15px;

margin:20px 0;

box-shadow:var(--shadow);

}


.cart-item img{

width:120px;

height:120px;

object-fit:contain;

}


.cart-total{

font-size:28px;

font-weight:800;

margin:40px 0;

}

.checkout-page{

padding:80px 0;

}


.checkout-grid{

display:grid;

grid-template-columns:1fr 400px;

gap:40px;

}


.checkout-form,
.order-summary{

background:white;

padding:30px;

border-radius:18px;

box-shadow:var(--shadow);

}



.checkout-form input,
.checkout-form textarea,
.checkout-form select{


width:100%;

padding:15px;

margin-bottom:20px;

border:1px solid #ddd;

border-radius:12px;

}


.checkout-form textarea{

height:120px;

}


.order-summary{

height:max-content;

}



.checkout-item{

display:flex;

gap:15px;

margin-bottom:20px;

}


.checkout-item img{

width:70px;

height:70px;

object-fit:contain;

}

.tracking-page{

padding:100px 0;

}


.tracking-box{

background:white;

padding:40px;

border-radius:20px;

box-shadow:var(--shadow);

text-align:center;

}



.tracking-box input{

padding:15px;

width:300px;

border:1px solid #ddd;

border-radius:10px;

}



.tracking-result{

margin-top:30px;

font-size:20px;

}

.promo-page{

padding:80px 0;

}


.promo-grid{

display:grid;

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

gap:30px;

}



.promo-card{


background:white;

padding:40px;

border-radius:20px;

box-shadow:var(--shadow);

}



.promo-card span{

font-weight:800;

color:var(--primary);

}



.promo-card h2{

font-size:32px;

margin:20px 0;

}





.voucher-section{

padding:80px 0;

}



.voucher-grid{

display:grid;

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

gap:25px;

margin-top:40px;

}



.voucher{

background:white;

padding:30px;

border-radius:15px;

box-shadow:var(--shadow);

text-align:center;

}



.voucher button{

margin-top:20px;

padding:10px 25px;

border:none;

background:var(--primary);

color:white;

border-radius:20px;

cursor:pointer;

}

.trade-page{

padding:100px 0;

text-align:center;

}



.trade-box{

margin:40px auto;

background:white;

padding:40px;

max-width:500px;

border-radius:20px;

box-shadow:var(--shadow);

}



.trade-box select{

width:100%;

padding:15px;

margin:10px 0;

border-radius:10px;

border:1px solid #ddd;

}

.about-section{

padding:90px 0;

}


.about-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:50px;

align-items:center;

}



.about-card{

background:white;

padding:40px;

border-radius:20px;

box-shadow:var(--shadow);

}


.about-card li{

list-style:none;

margin:20px 0;

font-size:18px;

}

.contact-section{

padding:80px 0;

}


.contact-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:40px;

}



.contact-form{

background:white;

padding:35px;

border-radius:20px;

box-shadow:var(--shadow);

}



.contact-form input,
.contact-form textarea{

width:100%;

padding:15px;

margin-bottom:20px;

border:1px solid #ddd;

border-radius:10px;

}

.faq-section{

padding:90px 0;

}



.faq-item{

background:white;

margin:20px 0;

padding:25px;

border-radius:15px;

box-shadow:var(--shadow);

}



.faq-item button{

width:100%;

text-align:left;

border:none;

background:none;

font-size:18px;

font-weight:700;

cursor:pointer;

}



.faq-item p{

display:none;

margin-top:20px;

color:var(--gray);

}

.reviews-section{

padding:90px 0;

}



.review-grid{

display:grid;

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

gap:30px;

margin-top:40px;

}



.review-card{

background:white;

padding:30px;

border-radius:18px;

box-shadow:var(--shadow);

}



.stars{

color:#f59e0b;

font-size:22px;

margin-bottom:15px;

}

.hamburger{

display:none;

font-size:28px;

cursor:pointer;

}



@media(max-width:992px){


.hamburger{

display:block;

}



.menu{

position:absolute;

top:80px;

left:0;

width:100%;

background:white;

display:none;

flex-direction:column;

padding:30px;

box-shadow:var(--shadow);

}



.menu.active{

display:flex;

}



}

.dark{

--background:#020617;

--card:#0f172a;

--text:#f8fafc;

--gray:#94a3b8;

}


.dark .product-card,
.dark .sidebar,
.dark .review-card,
.dark .promo-card{

background:#0f172a;

color:white;

}

html{

scroll-behavior:smooth;

}

.loader{

position:fixed;

width:100%;

height:100%;

background:white;

z-index:9999;

display:flex;

align-items:center;

justify-content:center;

}


.loader div{

width:50px;

height:50px;

border:5px solid #ddd;

border-top-color:#2563eb;

border-radius:50%;

animation:spin 1s linear infinite;

}



@keyframes spin{


to{

transform:rotate(360deg);

}


}

.product-card img{

transition:.5s;

}


.product-card:hover img{

transform:scale(1.08);

}

/* Disable Website Loader */
.loader,
#loader,
.preloader,
#preloader,
.loading-screen {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}