*{margin:0;padding:0;font-family:Arial}
header{
  background:#0a3d62;color:#fff;
  display:flex;justify-content:space-between;
  padding:15px;align-items:center
}
nav a{color:#fff;margin:0 10px;text-decoration:none}
.hamburger{display:none;font-size:24px;cursor:pointer}

.hero{
  background:linear-gradient(to right,#1e90ff,#00cec9);
  color:#fff;padding:100px;text-align:center
}
.btn{background:#fff;color:#000;padding:10px 20px;text-decoration:none}

.cards{display:flex;justify-content:space-around;padding:50px}
.card{
  background:#f1f1f1;padding:30px;
  transition:.3s;border-radius:10px
}
.card:hover{transform:scale(1.1)}

.form, .content{padding:50px;text-align:center}
form input, textarea, button{
  width:80%;margin:10px;padding:10px
}
button{background:#1e90ff;color:#fff;border:none}

.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;padding:30px}
.gallery img{width:100%;border-radius:10px}

.fade-in{animation:fade 1.5s}
@keyframes fade{from{opacity:0}to{opacity:1}}

footer{text-align:center;padding:20px;background:#0a3d62;color:#fff}

/* Mobile */
@media(max-width:768px){
  nav{display:none;flex-direction:column}
  nav.active{display:flex}
  .hamburger{display:block}
  .cards{flex-direction:column}
}