/* Responsive fixes for extra large screens */

/* Fix potential alignment issues in very large screens */
@media (min-width: 2200px) {
  /* Center content better on ultra-wide displays */
  .container {
    max-width: 1800px;
    margin: 0 auto;
  }
  
  /* Add max-width to prevent excessive stretching */
  .hero__container,
  .how-section .container,
  .pricing-container,
  .footer .container {
    max-width: 1800px;
    margin: 0 auto;
  }
  
  /* Fix potential text wrapping issues */
  .hero__title {
    white-space: normal;
    hyphens: manual;
  }
  
  /* Ensure buttons maintain proportion */
  .btn,
  .btn-primary,
  .btn--primary,
  .btn-secondary,
  .nav__cta {
    font-size: calc(1rem + 0.5vw);
    padding: calc(0.75rem + 0.25vw) calc(1.5rem + 0.5vw);
    max-width: fit-content;
  }
  
  /* Prevent images from becoming too large */
  img,
  svg,
  video {
    max-width: 100%;
    height: auto;
  }
}

/* Extreme screen sizes */
@media (min-width: 2800px) {
  /* Limit overall content width */
  .container,
  .hero__container,
  .how-section .container,
  .pricing-container,
  .footer .container {
    max-width: 2200px;
  }
  
  /* Enhance background scaling */
  .hero {
    background-size: 100% auto;
    background-position: center bottom;
  }
  
  /* Add more emphasis to call to action buttons */
  .btn-primary,
  .btn--primary,
  .nav__cta {
    padding: calc(1rem + 0.3vw) calc(2rem + 0.8vw);
    font-size: calc(1.2rem + 0.4vw);
    border-radius: calc(var(--radius) + 6px);
    transform: scale(1);
    transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
  }
  
  .btn-primary:hover,
  .btn--primary:hover,
  .nav__cta:hover {
    transform: scale(1.05) translateY(-5px);
    box-shadow: 
      0 20px 30px -10px rgba(0,0,0,0.4),
      0 0 30px rgba(212,175,55,0.2);
  }
  
  /* Ensure body text remains readable */
  body {
    font-size: calc(1rem + 0.4vw);
    line-height: 1.8;
  }
  
  /* Fix heading sizes for extreme screens */
  h1, .h1 {
    font-size: calc(2.5rem + 1vw);
  }
  
  h2, .h2 {
    font-size: calc(2rem + 0.8vw);
  }
  
  h3, .h3 {
    font-size: calc(1.5rem + 0.6vw);
  }
}

/* Add perspective effect to the entire page for immersive experience on ultra-wide screens */
@media (min-width: 2400px) {
  html {
    perspective: 1000px;
  }
  
  body {
    transform: translateZ(0);
  }
  
  /* Enhanced parallax effect */
  .hero__title span,
  .section-header,
  .pricing-card,
  .step-card {
    will-change: transform;
  }
  
  /* Enhanced scroll experience */
  html {
    scroll-behavior: smooth;
  }
  
  /* Add subtle animation to backgrounds */
  @keyframes gradientShift {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }
  
  .hero,
  .how-section,
  .pricing-section {
    background-size: 200% 200%;
    animation: gradientShift 15s ease infinite;
  }
}