@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

*{
margin:0;
padding:0;
box-sizing:border-box;
scroll-behavior:smooth;
font-family:'Poppins',sans-serif;
}

body{
background:#0b1220;
color:#ffffff;
overflow-x:hidden;
}

/* Container */

.container{
width:90%;
max-width:1400px;
margin:auto;
}

/* Header */

.premium-header{
position:sticky;
top:0;
z-index:1000;
background:rgba(10,15,25,0.95);
backdrop-filter:blur(12px);
border-bottom:1px solid rgba(255,255,255,0.08);
}

.premium-header .container{
display:flex;
justify-content:space-between;
align-items:center;
padding:18px 0;
}

.logo-section{
display:flex;
align-items:center;
gap:15px;
}

.logo-box{
width:65px;
height:65px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:22px;
font-weight:800;
background:linear-gradient(135deg,#d4af37,#f7d774);
color:#000;
box-shadow:0 0 20px rgba(212,175,55,0.4);
}

.logo-text h1{
font-size:1.4rem;
font-weight:700;
}

.logo-text p{
font-size:0.8rem;
color:#c9c9c9;
}

nav ul{
display:flex;
list-style:none;
gap:25px;
}

nav ul li a{
text-decoration:none;
color:white;
font-weight:500;
transition:.3s;
}

nav ul li a:hover{
color:#d4af37;
}

/* Hero */

.hero{
position:relative;
height:90vh;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
padding:20px;
background:
linear-gradient(
rgba(0,0,0,.65),
rgba(0,0,0,.75)
),
url('https://images.unsplash.com/photo-1523381210434-271e8be1f52b?auto=format&fit=crop&w=1600&q=80');
background-size:cover;
background-position:center;
}

.hero-overlay{
position:absolute;
inset:0;
background:rgba(0,0,0,0.15);
}

.hero-content{
position:relative;
max-width:900px;
z-index:2;
}

.hero-badge{
display:inline-block;
padding:10px 20px;
border-radius:50px;
background:rgba(212,175,55,.15);
border:1px solid rgba(212,175,55,.3);
color:#f7d774;
margin-bottom:20px;
}

.hero h2{
font-size:4rem;
font-weight:800;
line-height:1.2;
margin-bottom:20px;
}

.hero p{
font-size:1.1rem;
color:#d8d8d8;
margin-bottom:30px;
}

.hero-buttons{
display:flex;
justify-content:center;
gap:15px;
flex-wrap:wrap;
}

.btn-primary,
.btn-secondary{
padding:14px 30px;
text-decoration:none;
border-radius:50px;
font-weight:600;
transition:.3s;
}

.btn-primary{
background:#d4af37;
color:black;
}

.btn-primary:hover{
transform:translateY(-4px);
}

.btn-secondary{
border:1px solid #d4af37;
color:#d4af37;
}

.btn-secondary:hover{
background:#d4af37;
color:black;
}

/* About */

.about-section{
padding:100px 0;
text-align:center;
}

.about-section h2{
font-size:2.7rem;
margin-bottom:20px;
color:#f7d774;
}

.about-section p{
max-width:900px;
margin:auto;
line-height:1.9;
color:#d0d0d0;
}
/* Section */

.section{
padding:100px 5%;
}

.section-title{
text-align:center;
font-size:3rem;
font-weight:800;
color:#f7d774;
margin-bottom:15px;
}

.section-description{
text-align:center;
max-width:800px;
margin:0 auto 60px;
color:#cfcfcf;
line-height:1.8;
}

/* Products Grid */

.products{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
gap:30px;
}

/* Product Card */

.product-card{
background:#141c2d;
border-radius:20px;
overflow:hidden;
transition:.4s;
border:1px solid rgba(255,255,255,.06);
box-shadow:0 15px 35px rgba(0,0,0,.25);
}

.product-card:hover{
transform:translateY(-10px);
box-shadow:0 25px 50px rgba(0,0,0,.4);
}

.product-card img{
width:100%;
height:320px;
object-fit:cover;
cursor:pointer;
transition:.4s;
}

.product-card img:hover{
transform:scale(1.04);
}

.product-content{
padding:25px;
}

.product-content h3{
font-size:1.4rem;
margin-bottom:10px;
color:#ffffff;
}

.price{
font-size:1.2rem;
font-weight:700;
color:#f7d774;
margin-bottom:15px;
}

.description{
color:#cfcfcf;
line-height:1.8;
margin-bottom:20px;
}

/* WhatsApp Button */

.order-btn{
display:inline-block;
width:100%;
text-align:center;
padding:14px;
border-radius:12px;
text-decoration:none;
font-weight:700;
background:#25D366;
color:white;
transition:.3s;
}

.order-btn:hover{
transform:translateY(-3px);
}

/* Image Popup */

.image-popup{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,.95);
display:none;
justify-content:center;
align-items:center;
z-index:9999;
padding:20px;
}

.image-popup img{
max-width:95%;
max-height:90%;
border-radius:12px;
box-shadow:0 0 40px rgba(255,255,255,.15);
}

.close-popup{
position:absolute;
top:20px;
right:30px;
font-size:45px;
font-weight:bold;
cursor:pointer;
color:white;
}

/* Contact Section */

.contact-section{
padding:120px 5%;
background:#101827;
text-align:center;
}

.contact-section h2{
font-size:3rem;
color:#f7d774;
margin-bottom:20px;
}

.contact-section p{
color:#d0d0d0;
line-height:1.8;
margin-bottom:15px;
}

.contact-details{
margin:35px 0;
}

.contact-whatsapp-btn{
display:inline-block;
padding:16px 35px;
background:#25D366;
color:white;
font-weight:700;
text-decoration:none;
border-radius:50px;
transition:.3s;
}

.contact-whatsapp-btn:hover{
transform:translateY(-4px);
}

/* Footer */

footer{
background:#070c15;
padding:40px 20px;
text-align:center;
border-top:1px solid rgba(255,255,255,.06);
}

.footer-content h3{
font-size:1.8rem;
color:#f7d774;
margin-bottom:10px;
}

.footer-content p{
color:#cfcfcf;
margin:8px 0;
}

/* Responsive */

@media(max-width:900px){

.hero h2{
font-size:2.8rem;
}

.logo-text h1{
font-size:1.1rem;
}

.premium-header .container{
flex-direction:column;
gap:15px;
}

nav ul{
flex-wrap:wrap;
justify-content:center;
}

}

@media(max-width:600px){

.hero{
height:auto;
padding:120px 20px;
}

.hero h2{
font-size:2rem;
}

.section-title{
font-size:2.2rem;
}

.products{
grid-template-columns:1fr;
}

.logo-box{
width:55px;
height:55px;
font-size:18px;
}

.logo-text h1{
font-size:1rem;
}

.logo-text p{
font-size:.75rem;
}

}