@media (max-width: 992px) {

  .hero-grid {

    grid-template-columns: 1fr;

    text-align: center;

  }



  .hero-buttons {

    justify-content: center;

  }



  .cards-grid {

    grid-template-columns: 1fr;

  }



  .footer-content {

    flex-direction: column;

    text-align: center;

  }

}



@media (max-width: 768px) {

  .menu-toggle {

    display: block;

  }



  .nav {

    position: absolute;

    top: 80px;

    left: 0;

    width: 100%;

    background: white;

    flex-direction: column;

    padding: 1rem 5%;

    display: none;

    border-bottom: 1px solid var(--border);

  }



  .nav.active {

    display: flex;

  }



  .section {

    padding: 4rem 0;

  }



  .hero h1 {

    font-size: 2.5rem;

  }



  .card {

    padding: 1.5rem;

  }

}