html{
    scroll-behavior:smooth;
}

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

body{

background:#0d0d0d;
color:white;

}

header{

display:flex;
justify-content:space-between;
align-items:center;

padding:25px 8%;

background:#111;

position:sticky;

top:0;

z-index:1000;

}

.logo{

font-size:28px;

font-weight:800;

color:#fff;

}

nav a{

color:white;

text-decoration:none;

margin:0 18px;

font-weight:600;

transition:.3s;

}

nav a:hover{

color:#e8ff00;

}

.nav-right{

display:flex;

align-items:center;

gap:20px;

}

.nav-right i{

font-size:24px;

cursor:pointer;

}

.nav-right button{

background:#e8ff00;

border:none;

padding:12px 28px;

border-radius:30px;

font-weight:700;

cursor:pointer;

}

.hero{

display:flex;

align-items:center;

justify-content:space-between;

padding:80px 8%;

min-height:90vh;

}

.left{

width:50%;

}

.small{

color:#e8ff00;

font-weight:700;

letter-spacing:3px;

margin-bottom:20px;

}

.left h1{

font-size:80px;

line-height:90px;

margin-bottom:20px;

}

.left span{

color:#e8ff00;

}

.left p{

color:#bbb;

font-size:18px;

line-height:30px;

margin-bottom:40px;

}

.buttons{

display:flex;

gap:20px;

}

.yellow{

background:#e8ff00;

border:none;

padding:18px 40px;

font-size:17px;

font-weight:700;

border-radius:40px;

cursor:pointer;

}

.outline{

background:transparent;

border:2px solid white;

color:white;

padding:18px 40px;

font-size:17px;

border-radius:40px;

cursor:pointer;

}

.stats{

display:flex;

gap:70px;

margin-top:60px;

}

.stats h2{

color:#e8ff00;

font-size:35px;

}

.right{

width:45%;

}

.right img{

width:100%;

border-radius:20px;

}

.about{

display:flex;
justify-content:space-between;
align-items:center;
padding:100px 8%;
gap:70px;

}

.about-text{

width:50%;

}

.about h2{

font-size:45px;
margin-bottom:20px;
color:#e8ff00;

}

.about p{

color:#cfcfcf;
line-height:32px;
margin-bottom:30px;

}

.about button{

background:#e8ff00;
border:none;
padding:15px 35px;
font-weight:bold;
border-radius:30px;
cursor:pointer;

}

.about-image{

width:45%;

}

.about-image img{

width:100%;
border-radius:25px;

}

.products{

padding:100px 8%;

}

.products h2{

text-align:center;
font-size:50px;
margin-bottom:60px;
color:#e8ff00;

}

.product-grid{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
gap:35px;

}

.card{

background:#181818;
padding:25px;
border-radius:20px;
transition:.4s;
text-align:center;

}

.card:hover{

transform:translateY(-10px);

}

.card img{

width:100%;
border-radius:15px;

}

.card h3{

margin:20px 0 10px;

}

.card p{

font-size:22px;
color:#e8ff00;
margin-bottom:20px;

}

.card select{

width:100%;
padding:12px;
margin-bottom:15px;
border-radius:8px;
border:none;
background:#252525;
color:white;

}

.card button{

width:100%;
padding:15px;
background:#e8ff00;
border:none;
font-weight:bold;
border-radius:10px;
cursor:pointer;

}

.cart-panel{

position:fixed;
top:0;
right:-420px;

width:400px;
height:100vh;

background:#111;

padding:25px;

transition:.4s;

z-index:9999;

overflow:auto;

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

}

.cart-panel.active{

right:0;

}

.cart-header{

display:flex;
justify-content:space-between;
align-items:center;

margin-bottom:25px;

}

.cart-header button{

background:none;
border:none;
color:white;
font-size:22px;
cursor:pointer;

}

.cart-item{

display:flex;
justify-content:space-between;
align-items:center;

background:#1c1c1c;

padding:15px;

margin-bottom:15px;

border-radius:12px;

}

.cart-item button{

background:red;

color:white;

border:none;

padding:8px 12px;

cursor:pointer;

border-radius:6px;

}

.cart-footer{

margin-top:25px;

}

.cart-footer button{

width:100%;

padding:15px;

background:#e8ff00;

border:none;

font-size:18px;

font-weight:bold;

cursor:pointer;

border-radius:10px;

}

.contact{
    padding:80px 8%;
    background:#111;
    color:white;
}

.contact h2{
    color:#e8ff00;
    margin-bottom:20px;
}

.contact input,
.contact textarea{
    width:100%;
    padding:15px;
    margin:10px 0;
    background:#222;
    color:white;
    border:none;
    border-radius:10px;
}

.contact button{
    background:#e8ff00;
    color:black;
    border:none;
    padding:15px 30px;
    border-radius:10px;
    cursor:pointer;
    font-weight:bold;
}