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


body{
font-family:Arial,sans-serif;
background:#f1f5f9;
color:#111827;
overflow-x:hidden;
}


a{
text-decoration:none;
}


.container{

width:95%;
max-width:1400px;
margin:auto;

}


/* =================
HERO BANNER
================= */


.hero{

height:420px;

width:100%;

margin:0;

margin-bottom:40px;

border-radius:0;

overflow:hidden;

background:url("../images/pc-banner.webp");

background-size:100% 100%;

background-position:center;

background-repeat:no-repeat;


/* banner separation */

box-shadow:
0 18px 35px rgba(15,23,42,.45);

}



.hero-content{

padding:20px;

}



.hero h1{

font-size:55px;

color:#00d4ff;

text-shadow:0 0 20px #00d4ff;

}



.hero p{

color:#fff;

font-size:22px;

margin:20px 0;

}

/* BUTTON */


.btn,
.builder-btn{

display:inline-block;

background:#00d4ff;

color:#000;

padding:12px 25px;

border-radius:10px;

font-weight:bold;

border:none;

cursor:pointer;

margin:5px;

}



.btn:hover,
.builder-btn:hover{

background:#00b8dd;

}






/* =================
PRODUCT CARDS
================= */


.cards{

display:grid;

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

gap:20px;

margin-top:30px;

}



.card{

background:#ffffff;

border-radius:18px;

overflow:hidden;

text-align:center;

padding-bottom:18px;

display:flex;

flex-direction:column;

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

transition:.3s;

}


.card:hover{

transform:translateY(-5px);

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

}



.card img{

width:100%;

height:220px;

object-fit:contain;

background:#fff;

padding:10px;

}



.card h3{

padding:10px;

min-height:55px;

}



.card p{

color:#111827;

font-size:20px;

font-weight:700;

margin:10px;

}



.card .btn{

margin-top:auto;

align-self:center;

}

/* HOME PRODUCT STOCK */

.stock{

background:#16a34a;

color:white;

padding:5px 10px;

border-radius:20px;

font-size:12px;

font-weight:bold;

}


.stock.out{

background:#dc2626;

color:white;

}


/* =================
PRODUCT PAGE
================= */


.product-page{

display:grid;

grid-template-columns:40% 60%;

gap:40px;

margin-top:40px;

align-items:start;

}



/* IMAGE */

.product-image{

background:transparent;

padding:10px;

display:flex;

align-items:flex-start;

justify-content:center;

}



.product-image img{

width:100%;

max-height:500px;

object-fit:contain;

}





/* INFO */


.product-info{

background:transparent;

padding:20px 10px;

border:none;

border-radius:0;

color:#111827;

}



.product-info h1{

font-size:32px;

line-height:1.3;

margin-bottom:15px;

color:#111827;

}



.product-info h2{

font-size:28px;

color:#00a8cc;

margin:15px 0;

}



.product-info p{

margin:12px 0;

font-size:16px;

line-height:1.6;

color:#374151;

}



.product-info b{

color:#111827;

}




/* STOCK */


.in-stock{

color:#16a34a !important;

font-weight:bold;

}



.out-stock{

color:#dc2626 !important;

font-weight:bold;

}





/* DESCRIPTION */


.details-text{

margin-top:25px;

padding-top:0;

border:none;

}



.details-text h2{

color:#00a8cc;

margin-top:25px;

margin-bottom:10px;

}



.details-text p{

line-height:1.8;

color:#4b5563;

}



/* =================
BUILDER
================= */


.builder-title{

margin-top:35px;

}



.builder-layout{

display:grid;

grid-template-columns:2fr 1fr;

gap:30px;

margin-top:30px;

}



.builder-form,
.builder-summary{

background:#ffffff;

padding:30px;

border-radius:20px;

border:1px solid #334155;

}



.builder-item{

margin-bottom:20px;

}


.builder-item label{

display:block;

color:#00d4ff;

margin-bottom:8px;

}



.builder-select{

width:100%;

padding:14px;

background:#0f172a;

color:white;

border-radius:10px;

border:1px solid #334155;

}




.builder-summary{

position:sticky;

top:90px;

height:max-content;

}




.build-item{

display:flex;

align-items:center;

gap:15px;

background:#0f172a;

padding:12px;

border-radius:12px;

margin-bottom:15px;

}



.build-item img{

width:75px;

height:75px;

object-fit:contain;

background:white;

border-radius:10px;

padding:5px;

}



.build-item strong{

color:#00d4ff;

}






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


.footer{

background:#374151;

margin-top:80px;

padding:50px 20px 20px;

border-top:1px solid #334155;

width:100%;

}



.footer-box{

width:95%;

max-width:1400px;

margin:auto;

display:grid;

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

gap:40px;

padding-bottom:30px;

}



.footer-box h3{

color:#00d4ff;

font-size:24px;

margin-bottom:15px;

}



.footer-box p{
color:#e5e7eb;

line-height:1.8;

}



.footer-bottom{

width:95%;

max-width:1400px;

margin:auto;

padding-top:20px;

border-top:1px solid #334155;

text-align:center;

color:#94a3b8;

}







/* TABLET */


@media(max-width:992px){


.cards{

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

}


}





/* MOBILE */


@media(max-width:768px){



/* MOBILE LAYOUT */


.product-page,
.builder-layout{

grid-template-columns:1fr;

}



.builder-layout{

grid-template-columns:1fr;

}





/* FOOTER */


.footer-box{

grid-template-columns:1fr;

text-align:center;

}





/* MOBILE BANNER */


.hero{

height:280px;

width:100%;

margin:0;

border-radius:0;

background-size:100% 100%;

background-position:center;

background-repeat:no-repeat;

}





.hero h1{

font-size:30px;

}





}






@media(max-width:576px){


.cards{

grid-template-columns:1fr;

}



.card img{

height:180px;

}



.logo{

font-size:28px;

}



.product-image img{

height:300px;

}



.hero{

height:230px;

}



}

/* CLICKABLE BANNER */

.banner-click{

position:absolute;

top:0;

left:0;

width:100%;

height:100%;

display:block;

z-index:5;

}

/* PRODUCT DETAIL LIGHT FIX */


.product-info{

color:#111827;

}



.product-info h1{

color:#111827;

}



.product-info p{

color:#374151;

}



.product-info b{

color:#111827;

}



.in-stock{

color:#16a34a !important;

font-weight:bold;

}



.out-stock{

color:#dc2626 !important;

font-weight:bold;

}



.details-text{

color:#374151;

}



.details-text p{

color:#4b5563;

}



.details-text h2{

color:#00a8cc;

}

/* Latest Products spacing */

.container h2{

margin-top:40px;

margin-bottom:25px;

}

/* PRODUCT IMAGE POPUP */


.image-popup{

display:none;

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

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

z-index:9999;

align-items:center;

justify-content:center;

padding:20px;

}



.image-popup img{

width:90vw;

height:90vh;

object-fit:contain;

background:white;

border-radius:15px;

padding:15px;

transform:scale(1.05);

}


.image-popup span{

position:absolute;

top:25px;

right:35px;

font-size:45px;

color:white;

cursor:pointer;

font-weight:bold;

}

/* IMAGE POPUP */


.image-popup{

display:none;

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

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

z-index:9999;

align-items:center;

justify-content:center;

padding:60px 20px 20px;

}



.image-popup img{

width:90vw;

height:85vh;

max-width:1400px;

object-fit:contain;

background:white;

border-radius:15px;

padding:10px;

}



.image-popup span{

position:fixed;

top:15px;

right:20px;

font-size:40px;

color:white;

background:#111827;

width:45px;

height:45px;

line-height:40px;

text-align:center;

border-radius:50%;

cursor:pointer;

z-index:10000;

}

/* USER PANEL */


.user-dashboard{

margin-top:50px;

}



.user-cards{

display:grid;

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

gap:25px;

margin-top:30px;

}



.user-card{

background:#fff;

color:#111827;

padding:30px;

border-radius:20px;

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

}



.user-card h2{

color:#00a8cc;

margin-bottom:10px;

}



.user-card p{

color:#4b5563;

margin-bottom:20px;

}




@media(max-width:768px){

.user-cards{

grid-template-columns:1fr;

}

}

.cart-box{

display:flex;

gap:25px;

background:#1e293b;

padding:20px;

margin-top:20px;

border-radius:18px;

align-items:center;

}



.cart-box img{

width:150px;

height:150px;

object-fit:contain;

background:white;

border-radius:12px;

}



.cart-info h2{

color:#00d4ff;

}



.cart-info input{

width:80px;

padding:10px;

border-radius:8px;

}



.cart-total{

margin-top:30px;

padding:25px;

background:#0f172a;

border-radius:15px;

}



@media(max-width:700px){


.cart-box{

flex-direction:column;

text-align:center;

}


}

.checkout-form{

max-width:700px;

margin:30px auto;

}


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

width:100%;

padding:12px;

margin:8px 0 15px;

border-radius:10px;

}



.payment-box,
.summary{

background:#1e293b;

padding:20px;

border-radius:15px;

margin:20px 0;

}



#qr{

text-align:center;

margin:20px;

}

.main-header{

background:#475569;

color:#111;

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

position:sticky;

top:0;

z-index:999;

}



.top-nav{

height:75px;

display:flex;

align-items:center;

gap:30px;

padding:0 40px;

}



.logo a{

font-size:32px;

font-weight:900;

color:#00d4ff;

}


.logo span{

color:#111827;

}



.logo span{

color:#00d4ff;

}



.search{

flex:1;

}



.search input{

width:100%;

padding:14px 20px;

border-radius:30px;

border:1px solid #94a3b8;

font-size:16px;

background:white;

color:#111827;

}



.nav-right{

display:flex;

align-items:center;

gap:25px;

}



.login-btn{

background:#00d4ff;

color:#00111a;

padding:12px 25px;

border-radius:8px;

font-weight:800;

border:none;

cursor:pointer;

box-shadow:0 5px 15px rgba(0,212,255,.35);

}



.account{

position:relative;

}



.account-menu{

display:none;

position:absolute;

right:0;

top:45px;

width:180px;

background:#fff;

box-shadow:0 10px 25px rgba(0,0,0,.2);

border-radius:10px;

overflow:hidden;

}



.account:hover .account-menu{

display:block;

}



.account-menu a{

display:block;

padding:14px;

color:#111;

}



.account-menu a:hover{

background:#f1f5f9;

}



.cart{

color:white;

font-weight:700;

font-size:16px;

}



.cart span{

background:#00d4ff;

padding:4px 8px;

border-radius:50%;

}



.category-menu{

display:flex;

justify-content:center;

gap:35px;

padding:15px;

border-top:1px solid #ddd;

}



.category-menu a{

color:white;

font-weight:700;

}


.category-menu{

background:#0f172a;

}



.category-menu a:hover{

color:#00d4ff;

}

.footer a{

color:#e5e7eb;

text-decoration:none;

}


.footer a:hover{

color:#00d4ff;

}