/* Responsive Styles */

/* Small devices (640px and down) */
@media (max-width: 640px) {
    .hero {
      padding: var(--spacing-8) 0;
    }
    
    .hero-title {
      font-size: var(--font-size-3xl);
    }
    
    .hero-subtitle {
      font-size: var(--font-size-md);
    }
    
    .section-title {
      font-size: var(--font-size-xl);
    }
    
    .footer .container {
      flex-direction: column;
      gap: var(--spacing-4);
      text-align: center;
    }
    
    .back-to-top {
      width: 40px;
      height: 40px;
      bottom: var(--spacing-4);
      right: var(--spacing-4);
    }
  }
  
  /* Medium devices (641px to 768px) */
  @media (min-width: 641px) and (max-width: 768px) {
    .hero-title {
      font-size: var(--font-size-3xl);
    }
  }
  
  /* Large devices (769px to 1024px) */
  @media (min-width: 769px) and (max-width: 1024px) {
    .container {
      padding: 0 var(--spacing-6);
    }
  }
  
  /* Extra large devices (1025px to 1280px) */
  @media (min-width: 1025px) and (max-width: 1280px) {
    .container {
      max-width: var(--container-lg);
    }
  }
  
  /* Super large devices (1281px and up) */
  @media (min-width: 1281px) {
    .container {
      max-width: var(--container-xl);
    }
  }
  
  /* Mobile Navigation */
  @media (max-width: 768px) {
    .nav-links {
      display: none;
      position: fixed;
      top: 70px;
      left: 0;
      width: 100%;
      background-color: white;
      flex-direction: column;
      align-items: center;
      padding: var(--spacing-4) 0;
      box-shadow: 0 4px 8px var(--color-shadow);
    }

    .nav-links.show {
      display: flex;
    }

    .nav-links a {
      margin: var(--spacing-4) 0;
    }

    .mobile-menu {
      display: block;
    }

    .mobile-menu.active span:nth-child(1) {
      transform: rotate(45deg) translate(5px, 5px);
    }

    .mobile-menu.active span:nth-child(2) {
      opacity: 0;
    }

    .mobile-menu.active span:nth-child(3) {
      transform: rotate(-45deg) translate(7px, -6px);
    }
  }
  
  @media (min-width: 769px) {
    .mobile-menu {
      display: none;
    }
  }