/* ---------- GLOBAL ---------- */

body{
margin:0;
font-family:'Roboto Slab', serif;
background:#0c0c0c;
color:white;
text-align:center;
}

/* HEADER VIDEO */

#header-video{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
object-fit:cover;
z-index:-2;
}

/* HEADER */

.top-header{
position:relative;
height:400px;
overflow:hidden;
margin-top: 90px;
}

/* DARK OVERLAY */

.top-header::after{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.55);
z-index:-1;
}

/* HEADER TEXT */

.NPN{
position:absolute;
top:35%;
left:50%;
transform:translate(-50%, -50%);
font-size:80px;
color:#f4b400;
letter-spacing:3px;
}

.NPN-about{
position:absolute;
top:55%;
left:50%;
transform:translate(-50%, -50%);
font-size:20px;
color:#ffffff;
max-width:700px;
}

/* ---------- PRODUCTS SECTION ---------- */

.products{
display:flex;
justify-content:center;
gap:35px;
flex-wrap:wrap;
padding:70px;
background:#0b0b0b;
}

.product-card{
background:white;
width:300px;
padding:25px;
border-radius:6px;
text-align:center;
box-shadow:0 5px 20px rgba(0,0,0,0.1);
transition:0.3s;
}

.product-card:hover{
transform:translateY(-8px);
}

.product-img{
width:220px;
margin:auto;
display:block;
}

.product-info{
margin-top:15px;
}

.brand{
color:#888;
font-size:13px;
margin-bottom:5px;
}

.product-title{
font-size:16px;
font-weight:600;
color:#222;
}

.price-box{
margin-top:10px;
margin-bottom:15px;
}

.price{
font-size:22px;
font-weight:bold;
color:#000;
margin-right:10px;
}

.old-price{
color:#999;
text-decoration:line-through;
}

.product-buttons{
display:flex;
justify-content:center;
gap:10px;
}

.buy-btn{
background:#f4b400;
border:none;
padding:10px 18px;
font-weight:bold;
cursor:pointer;
}

.cart-btn{
background:#f4b400;
border:none;
padding:10px 18px;
font-weight:bold;
cursor:pointer;
}


/* ---------- BACK BUTTON ---------- */

.back-btn{
display:inline-block;
margin:40px 0;
padding:10px 25px;
background:#f4b400;
color:black;
text-decoration:none;
border-radius:5px;
font-weight:bold;
transition:0.3s;
}

.back-btn:hover{
background:#ffcc00;
}