body { font-family: 'Roboto', Arial, sans-serif; background: #f2f6f7; color: #222; }
.navbar { display: flex; justify-content: space-between; align-items: center; padding: 15px 30px; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.03);}
.logo { font-size: 1.5rem; color: #008040; font-weight: 700; text-decoration: none; }
.nav-links { display: flex; list-style: none; gap: 22px; margin: 0; padding: 0;}
.nav-links li a { color: #222; transition: color .3s; font-weight: 500; text-decoration: none;}
.nav-links li a:hover { color: #008040;}
.hamburger { display: none; flex-direction: column; gap: 6px; cursor: pointer;}
.hamburger span { display: block; width: 28px; height: 4px; background: #008040; border-radius:2px;}
.hero { width:100%; max-height:340px; object-fit: cover; }
@media (max-width: 900px) {
  .nav-links { display:none; position:absolute; top:64px; right:0; background:#fff; flex-direction:column; width:220px; box-shadow: 0 2px 20px rgba(0,0,0,0.08);}
  .nav-links.active { display:flex; }
  .hamburger { display:flex; }
}