body{
  margin:0;
  font-family: Arial, sans-serif;
  background:#0b0f19;
  color:#fff;
}

/* HEADER */
header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:15px 30px;
  background:#111827;
}
.logo{
  font-size:22px;
  font-weight:bold;
  color:#00ffcc;
}
nav a{
  margin:0 12px;
  text-decoration:none;
  color:#fff;
  transition:0.3s;
}
nav a:hover{
  color:#00ffcc;
}

/* BUTTON */
.btn{
  background:#00ffcc;
  color:#000;
  padding:10px 18px;
  border-radius:6px;
  text-decoration:none;
  font-weight:bold;
}

/* SECTIONS */
.section{
  padding:70px 20px;
  text-align:center;
}
h1{
  font-size:42px;
}
h2{
  margin-bottom:20px;
}

/* CARDS */
.cards{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
}
.card{
  background:#1f2937;
  margin:10px;
  padding:20px;
  border-radius:10px;
  width:250px;
  transition:0.3s;
}
.card:hover{
  transform:translateY(-5px);
}

/* FOOTER */
.footer{
  background:#111827;
  padding:40px 20px;
  text-align:center;
}

/* FORM */
input, textarea{
  width:100%;
  padding:12px;
  margin:10px 0;
  border:none;
  border-radius:5px;
}
button{
  background:#00ffcc;
  padding:12px;
  border:none;
  width:100%;
  border-radius:5px;
  font-weight:bold;
}

/* MOBILE */
@media(max-width:768px){
  .cards{
    flex-direction:column;
    align-items:center;
  }
}