@media (max-width: 768px) {

  :root {
    --font-size-hero: 2.25rem;
    --font-size-xxl: 1.75rem;
    --font-size-xl: 1.25rem;
    
    --spacing-xxl: 3rem;
    --spacing-xl: 2rem;
    --gutter: 1.25rem;
  }

  @media (max-width: 374px) {
    :root { --font-size-hero: 1.75rem; }
  }

  .nav-links {
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    width: auto;
    background-color: var(--color-bg-footer);
    flex-direction: column;
    padding: var(--spacing-md);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    gap: var(--spacing-sm);
  }

  .nav-links.active {
    display: flex !important;
  }

  @media (prefers-reduced-motion: no-preference) {
    .nav-links.active {
      animation: slideDown var(--transition-fast) ease-out forwards;
    }
  }

  .nav-link {
    display: block;
    width: 100%;
    text-align: center;
    padding: var(--spacing-md) 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  }

  .hero-content {
    max-width: 75%;
    margin: 5% auto ;
  }
}

@media (prefers-reduced-motion: no-preference) {
@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
}