/* Responsive Styles */

html, body {
  overflow-x: hidden;
  width: 100%;
  position: relative;
}

@media (max-width: 1024px) {
  .hero .container {
    grid-template-columns: 1fr;
    text-align: center;
    gap: var(--spacing-4xl);
  }

  .hero-content {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .hero-description {
    text-align: center;
  }

  .hero-cta {
    justify-content: center;
  }

  .about-preview .container {
    grid-template-columns: 1fr;
    text-align: center;
  }
  
  .ap-visual-wrapper {
    order: -1;
    max-width: 480px;
    margin: 0 auto;
  }
}


@media (max-width: 768px) {
  :root {
    --spacing-5xl: 5rem;
    --spacing-4xl: 4rem;
  }

  .navbar .container {
    padding: 0 var(--spacing-md);
  }

  .nav-links {
    position: fixed;
    top: 80px;
    left: -100%;
    width: 100%;
    height: calc(100vh - 80px);
    background: rgba(10, 10, 12, 0.95);
    backdrop-filter: blur(10px);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: left var(--transition-normal);
  }

  .nav-links.active {
    left: 0;
  }

  .nav-link {
    font-size: 1.5rem;
  }

  .hamburger {
    display: block;
  }

  .footer-content {
    grid-template-columns: 1fr;
    gap: var(--spacing-2xl);
    text-align: center;
  }

  .footer-brand p {
    margin: 0 auto;
  }

  .footer-social .social-icons {
    justify-content: center;
  }

  .profile-img-container {
    width: 280px;
    height: 280px;
  }
  
  .animated-ring {
    width: 400px;
    height: 400px;
  }

  /* Global Mobile Typography Adjustments */
  h1 { font-size: 2.2rem !important; }
  h2 { font-size: 1.8rem !important; }
  h3 { font-size: 1.5rem !important; }
  h4 { font-size: 1.2rem !important; }
  p { font-size: 1rem !important; }
  
  /* Page Specific Font Resets */
  .hero-content h1 { font-size: 2.5rem !important; line-height: 1.2; }
  .hero-description, .hero-roles { font-size: 1rem !important; }
  .section-title h2, .premium-heading { font-size: 2rem !important; }
  .contact-preview h2, .stat-number { font-size: 2.2rem !important; }
  .about-paragraphs p { font-size: 1rem !important; }
  .about-content h3 { font-size: 1.4rem !important; }
  .logo { font-size: 1.2rem !important; }
  .footer-brand h3 { font-size: 1.3rem !important; }
  .footer-links h4, .footer-social h4 { font-size: 1.1rem !important; }
}

@media (max-width: 480px) {
  .hero-cta {
    flex-direction: column;
    width: 100%;
  }

  .hero-cta .btn {
    width: 100%;
  }

  .projects-grid {
    grid-template-columns: 1fr;
  }
  
  .timeline-preview::before {
    left: 10px;
  }
  
  .timeline-dot {
    left: 4px;
  }
  
  .timeline-item {
    padding-left: 40px;
  }

  /* Extra Small Devices Typography */
  h1, .hero-content h1 { font-size: 2rem !important; }
  h2, .section-title h2, .premium-heading, .contact-preview h2, .stat-number { font-size: 1.8rem !important; }
  
  :root {
    --spacing-5xl: 4rem;
    --spacing-4xl: 3rem;
    --spacing-3xl: 2.5rem;
    --spacing-2xl: 2rem;
  }
}