body { margin: 0; font-family: 'Inter', Arial, sans-serif; background: #fff; color: #333; }
header, footer { background: #fafafa; text-align: center; padding: 16px; font-weight: bold; }
nav { display: flex; justify-content: center; gap: 24px; padding: 12px; background: #f5f5f5; font-size: 16px; }
nav a { text-decoration: none; color: #555; font-weight: 600; }
.container { max-width: 1200px; margin: 0 auto; padding: 20px; }
nav {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
    align-items: center;
    margin: 20px 0;
  }
  
  nav a {
    text-decoration: none;
    color: #0077cc;
    font-weight: 600;
    font-size: 16px;
  }
  
  @media (max-width: 600px) {
    nav {
      flex-direction: column;
      gap: 10px;
    }
  }
  nav a:hover {
    text-decoration: underline;
    color: #005999; /* slightly darker blue on hover */
  }