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

body{
font-family:Arial,sans-serif;
background:#0F172A;
color:white;
}

html{
scroll-behavior:smooth;
}

/* NAVBAR */

.navbar{

position:fixed;
width:100%;

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

padding:15px 8%;

background:#0F172A;

z-index:1000;
}

.logo-img{
height:60px;
}

.nav-links{
display:flex;
list-style:none;
gap:30px;
}

.nav-links a{
text-decoration:none;
color:white;
font-weight:bold;
}

.nav-links a:hover{
color:#FF3366;
}

/* HERO */

.hero{

min-height:100vh;

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

text-align:center;

background:
linear-gradient(
rgba(15,23,42,.85),
rgba(15,23,42,.85)
),
url('assets/hero.jpg');

background-size:cover;
background-position:center;
}

.hero-content{
max-width:900px;
padding:20px;
}

.hero h1{

font-size:4rem;

color:#FF3366;

margin-bottom:20px;
}

.hero p{

font-size:1.2rem;

line-height:1.8;

margin-bottom:30px;
}

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

.btn-primary{

background:#FF3366;
color:white;

padding:15px 30px;

border-radius:50px;

text-decoration:none;

font-weight:bold;
}

.btn-secondary{

border:2px solid #FF3366;

padding:15px 30px;

border-radius:50px;

color:white;

text-decoration:none;
}

.hero-stats{

margin-top:50px;

display:flex;
justify-content:center;
gap:50px;
flex-wrap:wrap;
}

.hero-stats h3{
color:#FF3366;
font-size:2rem;
}

/* SECTIONS */

section{
padding:100px 8%;
}

.section-title{
text-align:center;
margin-bottom:50px;
}

.section-title h2{
font-size:2.5rem;
color:#FF3366;
}

/* CATEGORIES */

.category-grid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(220px,1fr));

gap:20px;
}

.category-card{

background:#1E293B;

padding:30px;

border-radius:15px;

text-align:center;

font-size:1.1rem;

transition:.3s;
}

.category-card:hover{

transform:translateY(-10px);

background:#FF3366;
}

/* HOW IT WORKS */

.steps{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(200px,1fr));

gap:20px;
}

.step{

background:#1E293B;

padding:30px;

text-align:center;

border-radius:15px;
}

.step h3{

font-size:3rem;

color:#FF3366;
}

/* CTA */

.vendor-cta{

text-align:center;

background:#1E293B;
}

.vendor-cta h2{

font-size:3rem;

margin-bottom:20px;

color:#FF3366;
}

/* CONTACT */

.contact{

text-align:center;
}

.contact h2{

font-size:3rem;

margin-bottom:20px;

color:#FF3366;
}

/* FOOTER */

footer{

background:#020617;

text-align:center;

padding:50px 20px;
}

/* WHATSAPP */

.whatsapp-btn{

position:fixed;

bottom:25px;
right:25px;

width:60px;
height:60px;

background:#25D366;

display:flex;

align-items:center;
justify-content:center;

border-radius:50%;

font-size:28px;

text-decoration:none;

z-index:999;
}

/* MOBILE */

@media(max-width:768px){

.hero h1{
font-size:2.5rem;
}

.navbar{
flex-direction:column;
}

.nav-links{
margin-top:15px;
}

}