*{box-sizing:border-box}
body{margin:0;font-family:'Open Sans',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;line-height:1.6;color:#222}
img{max-width:100%;display:block}
:focus-visible{outline:3px solid #3FA34D;outline-offset:3px}

header{background:#1B3C59;color:#fff}
.nav{max-width:1100px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem}
.nav h1{margin:0;font-size:1.2rem;letter-spacing:.2px}
.nav ul{list-style:none;margin:0;padding:0;display:flex;gap:.75rem;flex-wrap:wrap}
.nav a{color:#fff;text-decoration:none;font-weight:800;padding:.4rem .6rem;border-radius:.6rem}
.nav a:hover{background:rgba(255,255,255,.12)}

.hero{
  min-height:70vh;
  background-image:url("images/hero.jpg");
  background-size:cover;
  background-position:center;
  position:relative;
  display:flex;
  align-items:center;
  color:#fff;
  text-align:center;
}
.hero::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.55)}
.hero .hero-text{position:relative;max-width:900px;margin:0 auto;padding:1.25rem}
.hero h2{margin:0 0 .5rem;font-size:2rem;line-height:1.15}
.hero p{margin:0 0 1rem}
.btn{display:inline-block;background:#3FA34D;color:#fff;text-decoration:none;font-weight:800;padding:.75rem 1rem;border-radius:.8rem}
.btn:hover{filter:brightness(.95)}

.container{max-width:1100px;margin:0 auto;padding:2rem 1rem}
.cards{display:grid;gap:1rem;margin-top:1rem}
.card{background:#f6f7f8;border-radius:1rem;overflow:hidden;box-shadow:0 10px 20px rgba(0,0,0,.08);transition:transform .2s}
.card:hover{transform:translateY(-5px)}
.card img{height:220px;width:100%;object-fit:cover}
.card .body{padding:1rem}
footer{background:#111;color:#fff;text-align:center;padding:1.25rem;margin-top:2rem}

@media(min-width:800px){
  .hero h2{font-size:2.8rem}
  .cards{grid-template-columns:repeat(3,1fr)}
}