body{

font-family:Arial;
margin:0;

}

header{

display:flex;
justify-content:space-between;
background:black;
color:white;
padding:20px;

}

nav a{

color:white;
margin-left:20px;
text-decoration:none;

}

.hero{

text-align:center;
padding:100px;
background:#f4f4f4;

}

.btn{

background:black;
color:white;
padding:12px 20px;
text-decoration:none;

}

.btn2{

background:gray;
color:white;
padding:12px 20px;
text-decoration:none;

}

.features{

padding:60px;
text-align:center;

}

.cards{

display:flex;
justify-content:center;
gap:20px;

}

.card{

background:#f2f2f2;
padding:30px;
width:220px;

}

.form{

width:300px;
margin:auto;
display:flex;
flex-direction:column;
gap:10px;

}

input{

padding:10px;

}

button{

padding:10px;
background:black;
color:white;
border:none;

}

.marketplace{

display:flex;
flex-wrap:wrap;
gap:20px;
padding:30px;

}

.productCard{

border:1px solid #ddd;
padding:20px;
width:200px;
text-align:center;

}

.productCard img{

width:100%;
height:140px;
object-fit:cover;

}

footer{

text-align:center;
background:black;
color:white;
padding:20px;

}