.navbar {
  display: flex;
  justify-content: space-between;
  align-items: left;
  padding: 0rem;
}

.nav-links {
  display: flex;
  list-style: none;
}

.nav-links li a {
  color: #002c77;
  padding: 0 12px;
  text-decoration: none;
  font-family: "roboto", sans-serif;
  font-weight: 400;
  font-size: .875em;
  transition: color 0.3s ease;
}

.nav-links a:hover {
  color: #8bbff3; 
  font-weight:700;
}


@media screen and (min-width: 1024px) {
  .hamburger {
    display: none !important;
  }
}

@media screen and (max-width: 768px) {
  .nav-links {
    display:block; /* Hide by default */
    flex-direction: column;
    width: 100%;
    line-height: 32px;
  }
  .nav-links.active {
    display: flex; /* Show when toggled via JS */
  }