:root {
  --primary: #004477;
  --secondary: #008060;
  --light: #ffffff;
  --dark: #0a0a0a;
}

body { margin: 0; font-family: Arial, sans-serif; color: var(--dark); line-height: 1.6; }
a { text-decoration: none; color: var(--light); }

.navbar {
  background-color: var(--primary);
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 999;
}
.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 1rem;
  max-width: 960px;
  margin: 0 auto;
  color: var(--light);
}
.menu-icon { display: none; font-size: 1.8rem; cursor: pointer; }
.menu { list-style: none; display: flex; gap: 1rem; }
.menu li a { color: var(--light); padding: 0.5rem; }

#menu-toggle { display: none; }
@media (max-width: 768px) {
  .menu { flex-direction: column; display: none; background: var(--primary); width: 100%; }
  #menu-toggle:checked + .menu-icon + .menu { display: flex; }
  .menu-icon { display: block; }
}

.hero {
  background: linear-gradient(135deg,var(--primary),var(--secondary));
  color: var(--light);
  padding: 5rem 1rem 3rem;
  text-align: center;
  margin-top: 3rem;
}
.hero .btn {
  background: var(--light);
  color: var(--primary);
  padding: .75rem 1.5rem;
  border-radius: 3px;
  margin-top: 1rem;
  display: inline-block;
}

.section { padding: 3rem 1rem; max-width: 960px; margin: 0 auto; }
.grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fill,minmax(220px,1fr)); gap: 1rem; margin-top: 1.5rem; }
.grid li { background: #fafafa; padding: 1rem; border: 1px solid #e0e0e0; border-radius: 6px; }

footer { text-align: center; padding: 2rem 1rem; background:#f0f0f0; margin-top:2rem; }