*{

margin:0;
padding:0;
box-sizing:border-box;

}


body{

font-family:
Arial, Helvetica, sans-serif;

background:#0b0f19;

color:white;

}




header{

height:80px;

display:flex;

justify-content:space-between;

align-items:center;

padding:0 8%;

background:#111827;

}



.logo{

font-size:26px;

font-weight:bold;

color:#38bdf8;

}



nav a{

color:white;

text-decoration:none;

margin-left:25px;

}




.hero{

display:flex;

align-items:center;

justify-content:space-between;

padding:80px 8%;

}



.hero-text{

width:50%;

}



.hero h1{

font-size:48px;

line-height:1.2;

}



.hero p{

margin:25px 0;

color:#cbd5e1;

font-size:18px;

}



.hero-image img{

width:450px;

}





.btn{

display:inline-block;

padding:15px 30px;

background:#38bdf8;

color:#000;

border-radius:8px;

text-decoration:none;

font-weight:bold;

margin-right:15px;

}


.outline{

background:none;

border:2px solid #38bdf8;

color:white;

}





section{

padding:70px 8%;

}


h2{

text-align:center;

font-size:35px;

margin-bottom:40px;

}





.category-grid,
.product-grid,
.review-grid{

display:grid;

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

gap:25px;

}




.category-card,
.product-card,
.review-card{

background:#111827;

padding:25px;

border-radius:15px;

text-align:center;

}



.category-card span{

font-size:40px;

}





.product-card img{

width:100%;

height:200px;

object-fit:cover;

border-radius:10px;

}




.product-card button{

margin-top:20px;

padding:12px;

width:100%;

background:#38bdf8;

border:0;

border-radius:8px;

font-weight:bold;

}





.promo-box{

background:linear-gradient(
135deg,
#0284c7,
#1e293b
);

padding:40px;

border-radius:20px;

text-align:center;

}




.promo-box a{

display:inline-block;

margin-top:20px;

color:white;

}




footer{

background:#020617;

padding:50px 8%;

display:flex;

justify-content:space-between;

}



.copyright{

background:#000;

text-align:center;

padding:20px;

}





@media(max-width:900px){


.hero{

flex-direction:column;

text-align:center;

}


.hero-text{

width:100%;

}


.hero h1{

font-size:34px;

}



.category-grid,
.product-grid,
.review-grid{

grid-template-columns:1fr;

}



footer{

flex-direction:column;

gap:30px;

}


}

.detail-product{

display:flex;

gap:50px;

padding:80px 8%;

}



.detail-image img{

width:500px;

border-radius:20px;

}



.detail-info{

max-width:500px;

}



.detail-info li{

margin:15px 0;

}



.cart-box{

display:flex;

gap:30px;

background:#111827;

padding:30px;

border-radius:15px;

}



.cart-box img{

width:180px;

}



.checkout form{

max-width:600px;

margin:auto;

display:flex;

flex-direction:column;

gap:15px;

}



.checkout input,
.checkout textarea,
.checkout select{

padding:15px;

background:#111827;

border:1px solid #334155;

color:white;

border-radius:8px;

}



.checkout button{

padding:15px;

background:#38bdf8;

border:0;

border-radius:10px;

font-weight:bold;

}

.about,
.contact,
.tracking{

padding:80px 8%;

text-align:center;

}



.about-grid,
.promo-grid{

display:grid;

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

gap:25px;

}



.contact-box,
.status{

background:#111827;

padding:35px;

border-radius:15px;

max-width:600px;

margin:auto;

}



.tracking input{

padding:15px;

width:300px;

background:#111827;

border:1px solid #334155;

color:white;

border-radius:8px;

}



.tracking button{

padding:15px 30px;

background:#38bdf8;

border:0;

border-radius:8px;

font-weight:bold;

}




@media(max-width:900px){

.about-grid,
.promo-grid{

grid-template-columns:1fr;

}

}

/* LOGIN POPUP */

.login-overlay{

display:none;

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

background:
rgba(0,0,0,.75);

z-index:999;

align-items:center;

justify-content:center;

}


.login-box{

background:#111827;

padding:40px;

width:400px;

border-radius:20px;

text-align:center;

}

.filter{

display:flex;

justify-content:center;

gap:20px;

margin-bottom:40px;

}



.filter select{

padding:15px;

background:#111827;

color:white;

border-radius:8px;

}

img{

max-width:100%;

height:auto;

}

.mega-menu{

position:relative;

}



.mega-content{

display:none;

position:absolute;

top:35px;

left:0;

width:650px;

background:#111827;

padding:30px;

border-radius:15px;

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

gap:30px;

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

}



.mega-menu:hover .mega-content{

display:grid;

}



.mega-content a{

display:block;

margin:12px 0;

color:#cbd5e1;

}

.hero-slider{

width:550px;

overflow:hidden;

border-radius:25px;

}



.slide{

display:none;

}



.slide.active{

display:block;

}



.slide img{

width:100%;

}

.breadcrumb{


padding:20px 8%;


color:#94a3b8;


font-size:14px;


}

.cta{


padding:70px;


margin:50px 8%;


background:

linear-gradient(
135deg,
#0284c7,
#111827
);


border-radius:25px;


text-align:center;


}



.cta a{


display:inline-block;


margin-top:20px;


padding:15px 35px;


background:white;


color:black;


border-radius:10px;


}

/* FLOATING WHATSAPP */


.whatsapp{

position:fixed;

right:25px;

bottom:25px;


width:60px;

height:60px;


background:#22c55e;


border-radius:50%;


display:flex;

align-items:center;

justify-content:center;


font-size:30px;


text-decoration:none;


z-index:999;


}





/* LOGIN BUTTON */


.login-btn{


padding:12px 25px;


background:#38bdf8;


border:none;


border-radius:8px;


font-weight:bold;


cursor:pointer;


}





/* PRODUCT ACTION */


.product-action{


display:flex;


gap:10px;


margin-top:20px;


}




.wishlist{


padding:12px;


background:none;


border:1px solid #38bdf8;


color:white;


border-radius:8px;


cursor:pointer;


}





/* BADGE */


.badge{


position:absolute;


top:15px;


left:15px;


background:#38bdf8;


color:#000;


padding:8px 15px;


border-radius:20px;


font-size:12px;


font-weight:bold;


}



.badge.sale{


background:#ef4444;


color:white;


}







/* LOGIN POPUP */


.login-overlay{


display:none;


position:fixed;


top:0;


left:0;


width:100%;


height:100%;


background:
rgba(0,0,0,.75);


z-index:9999;


align-items:center;


justify-content:center;


}




.login-box{


background:#111827;


width:400px;


padding:40px;


border-radius:20px;


position:relative;


text-align:center;


}





.login-box input{


width:100%;


padding:15px;


margin:10px 0;


background:#020617;


border:1px solid #334155;


color:white;


border-radius:8px;


}




.login-box button{


width:100%;


padding:15px;


margin-top:15px;


background:#38bdf8;


border:none;


border-radius:10px;


font-weight:bold;


}




.close-login{


position:absolute;


right:20px;


top:10px;


font-size:30px;


cursor:pointer;


}







/* MOBILE */


@media(max-width:900px){



.hero{


flex-direction:column;


}



.hero-slider{


width:100%;


}



.product-grid,
.category-grid,
.review-grid{


grid-template-columns:1fr;


}



footer{


display:block;


}



nav{


gap:10px;


}


}

html{

scroll-behavior:smooth;

}



body{

overflow-x:hidden;

}



img{

max-width:100%;

height:auto;

display:block;

}