.navbar {
  flex-wrap: wrap;
}

#nav-menu.open { display:flex }


@media (max-width: 900px) {
  .hero-content {
    grid-template-columns: 1fr;
  }

  .cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .navbar {
    flex-direction: column;
    gap: 0.75rem;
  }

  .navbar ul {
    flex-wrap: wrap;
    justify-content: center;
  }

  .nav-toggle { display: inline-block }

  #nav-menu { display: none; flex-direction: column; gap: 0; width: 100%; }
  #nav-menu.open { display: flex }

  #nav-menu li { text-align: center; padding: 0.5rem 0 }

  .hero {
    padding-top: 3rem;
  }

  .hero h1 {
    font-size: 2rem;
  }

  .hero-buttons {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 600px) {
  .cards {
    grid-template-columns: 1fr;
  }

  .container,
  #contact .container {
    padding: 1.25rem;
  }
}