body { 
  font-family: Arial, sans-serif; 
  margin:0; 
  padding:0; 
  background:#f9f9f9; 
}

header { 
  background:#004080; 
  color:#fff; 
  padding:15px; 
  display:flex; 
  justify-content:space-between; 
  align-items:center; 
  position: relative; /* needed for dropdown positioning */
}

header .logo { 
  font-weight:bold; 
  font-size:1.8em; 
}

nav a { 
  color:#fff; 
  margin:0 15px; 
  text-decoration:none; 
  font-size:1.2em; 
  font-weight:bold; 
}

nav a:hover { 
  color:#ffcc00; 
}

.hero { 
  background:#ffcc00; 
  padding:60px; 
  text-align:center; 
}

section { 
  padding:40px; 
}

.grid { 
  display:flex; 
  gap:20px; 
  flex-wrap:wrap; 
}

.card { 
  background:#fff; 
  padding:20px; 
  border-radius:8px; 
  box-shadow:0 2px 5px rgba(0,0,0,0.1); 
  flex:1; 
  min-width:200px; 
}

form input, 
form textarea { 
  width:100%; 
  padding:10px; 
  margin:10px 0; 
  border:1px solid #ccc; 
  border-radius:5px; 
}

form button { 
  background:#004080; 
  color:#fff; 
  border:none; 
  padding:10px 20px; 
  font-weight:bold; 
  cursor:pointer; 
}

form button:hover { 
  background:#003366; 
}

/* Hide hamburger by default (desktop) */
.menu-toggle {
  display: none;
}

/* Mobile Dropdown Menu */
@media (max-width: 768px) {
  header {
    flex-direction: row;      
    justify-content: space-between;
    align-items: center;
  }

  nav {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 100%;   /* directly below header */
    right: 0;    /* align to right side */
    background: #004080;
    border: 1px solid rgba(255,255,255,0.2);
    width: 220px; /* fixed width for dropdown */
    z-index: 999;
  }

  nav a {
    padding: 12px;
    border-bottom: 1px solid rgba(255,255,255,0.2);
    text-align: right;   
    font-size: 1.05em;   /* reduced size for mobile */
    font-weight: 600;    /* keeps it bold but balanced */
  }

  nav.active {
    display: flex;
  }

  .menu-toggle {
    display: block;
    cursor: pointer;
    font-size: 2.5em;   /* slightly smaller hamburger */
    color: #fff;
    background: none;
    border: none;
    margin-left: auto;  
    padding: 10px;      
  }
}