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

body{
font-family:'Space Grotesk',sans-serif;
background:#0c0c0c;
color:white;
}


/* NAVBAR */

nav{
display:flex;
justify-content:space-between;
padding:30px 60px;
position:fixed;
width:100%;
z-index:10;
}

.logo{
font-family:'Bebas Neue';
font-size:2rem;
letter-spacing:3px;
}

.nav-links a{
margin-left:30px;
text-decoration:none;
color:white;
font-size:0.9rem;
opacity:0.8;
}



/* HERO */

.hero{
height:100vh;
display:flex;
align-items:center;
justify-content:center;
text-align:center;

background:
radial-gradient(circle at center,#1f1f1f,#000);
}

.hero h1{
font-family:'Bebas Neue';
font-size:10rem;
letter-spacing:8px;
}

.hero p{
letter-spacing:4px;
margin-top:10px;
}

.hero-btn{
margin-top:40px;
padding:16px 50px;
border:1px solid white;
background:transparent;
color:white;
cursor:pointer;
transition:0.3s;
}

.hero-btn:hover{
background:white;
color:black;
}



/* MARQUEE */

.marquee{
overflow:hidden;
border-top:1px solid #333;
border-bottom:1px solid #333;
padding:20px 0;
}

.track{
white-space:nowrap;
animation:scroll 18s linear infinite;
}

.track span{
font-size:1.2rem;
letter-spacing:3px;
}

@keyframes scroll{
0%{transform:translateX(0)}
100%{transform:translateX(-50%)}
}



/* FEATURE */

.feature{
display:grid;
grid-template-columns:1fr 1fr;
gap:80px;
padding:140px 80px;
align-items:center;
}

.feature img{
width:100%;
}

.feature-text h2{
font-family:'Bebas Neue';
font-size:3rem;
margin-bottom:20px;
}

.feature button{
margin-top:30px;
padding:15px 40px;
border:1px solid white;
background:transparent;
color:white;
cursor:pointer;
}



/* PRODUCTS */

.products{
padding:100px 80px;
}

.products h2{
font-family:'Bebas Neue';
font-size:3rem;
margin-bottom:60px;
}

.product-scroll{
display:flex;
gap:40px;
overflow-x:auto;
}

.card{
min-width:260px;
background:#151515;
padding:20px;
border-radius:10px;
transition:0.3s;
}

.card:hover{
transform:translateY(-10px);
}

.card img{
width:100%;
margin-bottom:15px;
}

.card button{
margin-top:10px;
width:100%;
padding:12px;
border:none;
background:white;
cursor:pointer;
}



/* MANIFESTO */

.manifesto{
padding:140px 40px;
text-align:center;
background:#111;
}

.manifesto h2{
font-family:'Bebas Neue';
font-size:3rem;
margin-bottom:20px;
}



/* NEWSLETTER */

.newsletter{
padding:120px 40px;
text-align:center;
}

.newsletter input{
padding:15px;
width:260px;
border:none;
margin-right:10px;
}

.newsletter button{
padding:15px 35px;
border:none;
background:white;
cursor:pointer;
}



/* FOOTER */

footer{
padding:60px;
display:flex;
justify-content:space-between;
border-top:1px solid #333;
}

footer a{
margin-left:20px;
text-decoration:none;
color:white;
}

.categories{
padding:120px 80px;
text-align:center;
}

.category-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:40px;
margin-top:40px;
}

.category img{
width:100%;
}

.best{
padding:120px 80px;
}

.best-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:20px;
}

.best-grid img{
width:100%;
}

.drop-banner{
background:#111;
text-align:center;
padding:120px 40px;
}

.insta{
padding:120px 80px;
text-align:center;
}

.insta-grid{
display:grid;
grid-template-columns:repeat(5,1fr);
gap:10px;
}

.insta-grid img{
width:100%;
}