/*
CRITICAL RESPONSIVE RULES
Never allow horizontal scrolling.
Every section must fit entirely within the viewport.
No component may overflow the screen.
Hero cards must never push the viewport wider.
Buttons must never be clipped.
Text must wrap naturally.
Images must scale while maintaining aspect ratio.
Floating cards should stack below the hero content on mobile.
Navigation drawer must occupy a fixed width (80vw max 320px) and remain fully visible.
Desktop layout must remain unchanged.
Responsive overrides must only exist inside media queries.
Avoid changing desktop CSS.
*/

@media (min-width: 768px) and (max-width: 1279px) {
  .ax-hero {
    padding: 6rem 0 3rem;
  }

  .ax-hero-container {
    gap: clamp(2rem, 4vw, 3rem);
  }

  .ax-hero-left {
    max-width: 520px;
  }

  .ax-hero-card {
    width: 300px;
  }

  .ax-dedicated-container,
  .about-stats-container,
  .ax-contact-two-container,
  .faq-container,
  .sh-services-container {
    grid-template-columns: 1fr;
  }

  .ax-form-row,
  .sh-category-grid,
  .sh-left-grid,
  .sh-services-right {
    grid-template-columns: 1fr;
  }

  .sh-services-image {
    grid-column: auto;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .ax-hero-left {
    max-width: 460px;
  }

  .ax-hero-card {
    width: 280px;
  }
}

@media (min-width: 768px) and (max-width: 899px) {
  .ax-hero-left {
    max-width: 380px;
  }

  .ax-hero-card {
    width: 260px;
  }

  .ax-hero-container {
    gap: 1.8rem;
  }
}

@media (max-width: 767px) {
  html,
  body {
    overflow-x: hidden;
  }

  body.menu-open {
    overflow: hidden;
  }

  .ax-navbar-inner {
    height: 74px;
    padding: 0 1rem;
  }

  .ax-menu-toggle {
    display: flex !important;
  }

  .ax-nav-links,
  .ax-nav-center,
  .ax-brand-right {
    display: none !important;
  }

  .ax-mobile-menu {
    display: flex !important;
    position: fixed !important;
    top: 0;
    left: 0;
    right: auto;
    width: min(80vw, 320px);
    min-width: 280px;
    height: 100vh;
    padding: 1rem 1rem 1.25rem;
    box-sizing: border-box;
    background: linear-gradient(180deg, rgba(4, 18, 24, 0.98) 0%, rgba(4, 18, 24, 0.95) 100%);
    backdrop-filter: blur(16px);
    border-left: 1px solid rgba(255,255,255,0.12);
    border-right: 1px solid rgba(255,255,255,0.08);
    box-shadow: 12px 0 40px rgba(0, 0, 0, 0.25);
    transform: none;
    transition: left 0.28s ease;
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
    z-index: 100001;
    overflow-y: auto;
    overscroll-behavior: contain;
    will-change: left;
  }

  .ax-navbar.menu-open + .ax-mobile-menu,
  .ax-navbar.menu-open ~ .ax-mobile-menu,
  body.menu-open .ax-mobile-menu {
    left: 0 !important;
  }

  .ax-mobile-backdrop {
    position: fixed;
    inset: 0;
    display: block;
    background: rgba(0, 0, 0, 0.6);
    z-index: 100000;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }

  .ax-navbar.menu-open + .ax-mobile-backdrop,
  .ax-navbar.menu-open ~ .ax-mobile-backdrop {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .ax-mobile-menu .ax-menu-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 44px;
    height: 44px;
    border: 0;
    background: rgba(255,255,255,0.12);
    color: #fff;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
  }

  .ax-mobile-menu-brand {
    padding-top: 0.15rem;
    padding-right: 3.5rem;
  }

  .ax-mobile-menu-logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
  }

  .ax-mobile-menu-logo-img {
    display: block;
    width: 72px;
    height: 72px;
    object-fit: contain;
  }

  .ax-mobile-menu-links {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 0.5rem;
  }

  .ax-mobile-menu-footer {
    margin-top: auto;
    padding-top: 1rem;
  }

  .ax-mobile-menu a {
    font-family: 'Century Gothic', Arial, sans-serif;
    color: #ffffff;
    text-decoration: none;
    -webkit-text-decoration: none;
    font-size: 18px;
    font-weight: 600;
    width: 100%;
    padding: 16px 0;
    word-break: break-word;
    -webkit-tap-highlight-color: transparent;
  }

  .ax-mobile-menu a:link,
  .ax-mobile-menu a:visited,
  .ax-mobile-menu a:hover,
  .ax-mobile-menu a:active {
    color: #ffffff;
    text-decoration: none;
  }

  .ax-mobile-menu-links a {
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }

  .ax-mobile-menu-links a:last-child {
    border-bottom: 0;
  }

  .ax-mobile-menu .liquid-btn {
    width: 100%;
    justify-content: center;
    margin-top: 0;
    text-align: center;
    border-radius: 999px;
  }

  .ax-hero,
  .about-hero,
  .hero-business {
    padding-top: 5.25rem;
  }

  .ax-hero-container {
    flex-direction: column;
    align-items: stretch;
    gap: 1.25rem;
    padding: 0 1rem;
  }

  .ax-hero-left {
    max-width: 100%;
  }

  .ax-hero-left p,
  .about-hero-content p,
  .hero-business-content p,
  .ax-dedicated-right p,
  .faq-left p {
    font-size: 0.95rem;
  }

  .ax-gradient-text,
  .ax-white-text {
    font-size: 2rem;
  }

  .ax-hero-btn-main {
    width: 100%;
    justify-content: center;
  }

  .ax-hero-card {
    width: 100%;
    max-width: 320px;
    height: 220px;
    margin: 0 auto;
  }

  .ax-stats {
    flex-direction: column;
    align-items: flex-start;
  }

  .company-filter {
    justify-content: flex-start;
  }

  .filter-btn {
    width: 100%;
    text-align: center;
  }
}