/* Unified Container Responsive System - All Devices */

.container {
  width: 100%;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(1rem, 4vw, 2.5rem);
  padding-right: clamp(1rem, 4vw, 2.5rem);
  box-sizing: border-box;
}

/* Extra small phones (320px - 374px) */
@media (max-width: 374px) {
  .container {
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* Small phones (375px - 479px) */
@media (min-width: 375px) and (max-width: 479px) {
  .container {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* Large phones (480px - 639px) */
@media (min-width: 480px) and (max-width: 639px) {
  .container {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* Small tablets (640px - 767px) */
@media (min-width: 640px) and (max-width: 767px) {
  .container {
    padding-left: 24px;
    padding-right: 24px;
    max-width: 100%;
  }
}

/* Tablets (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
  .container {
    padding-left: 32px;
    padding-right: 32px;
    max-width: 100%;
  }
}

/* Small laptops (1024px - 1279px) */
@media (min-width: 1024px) and (max-width: 1279px) {
  .container {
    padding-left: 40px;
    padding-right: 40px;
    max-width: 1200px;
  }
}

/* Laptops/desktops (1280px - 1535px) */
@media (min-width: 1280px) and (max-width: 1535px) {
  .container {
    padding-left: 48px;
    padding-right: 48px;
    max-width: 1400px;
  }
}

/* Large screens (1536px+) */
@media (min-width: 1536px) {
  .container {
    padding-left: 64px;
    padding-right: 64px;
    max-width: 1400px;
  }
}

/* Ultra-wide (1920px+) */
@media (min-width: 1920px) {
  .container {
    max-width: 1600px;
  }
}

/* ============================================
   Unified: navbar, content, footer same width
   ============================================ */

.premium-top-bar .container {
  max-width: 1600px;
  padding-left: clamp(1rem, 4vw, 2.5rem);
  padding-right: clamp(1rem, 4vw, 2.5rem);
}

.top-navbar .container,
.aila-navbar .container {
  max-width: 1400px;
  padding-left: clamp(1rem, 4vw, 2.5rem);
  padding-right: clamp(1rem, 4vw, 2.5rem);
}

.aila-navbar-content {
  max-width: 1400px !important;
  margin: 0 auto;
  padding-left: clamp(1rem, 4vw, 2rem) !important;
  padding-right: clamp(1rem, 4vw, 2rem) !important;
}

.footer-container {
  max-width: 1400px !important;
  margin: 0 auto;
  padding-left: clamp(1rem, 4vw, 2.5rem) !important;
  padding-right: clamp(1rem, 4vw, 2.5rem) !important;
}

.modern-footer .container {
  max-width: 1400px;
  padding-left: clamp(1rem, 4vw, 2.5rem);
  padding-right: clamp(1rem, 4vw, 2.5rem);
}

.pricing-plans .container {
  max-width: 1400px;
  padding-left: clamp(1rem, 4vw, 2.5rem);
  padding-right: clamp(1rem, 4vw, 2.5rem);
}

.services-hero-header .container {
  max-width: 1400px;
  padding-left: clamp(1rem, 4vw, 2.5rem);
  padding-right: clamp(1rem, 4vw, 2.5rem);
}

@media (max-width: 374px) {
  .aila-navbar-content,
  .footer-container { padding-left: 12px !important; padding-right: 12px !important; }
}
@media (min-width: 375px) and (max-width: 479px) {
  .aila-navbar-content,
  .footer-container { padding-left: 16px !important; padding-right: 16px !important; }
}
@media (min-width: 480px) and (max-width: 639px) {
  .aila-navbar-content,
  .footer-container { padding-left: 20px !important; padding-right: 20px !important; }
}
@media (min-width: 640px) and (max-width: 767px) {
  .aila-navbar-content,
  .footer-container { padding-left: 24px !important; padding-right: 24px !important; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .aila-navbar-content,
  .footer-container { padding-left: 32px !important; padding-right: 32px !important; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .aila-navbar-content,
  .footer-container { padding-left: 40px !important; padding-right: 40px !important; max-width: 1400px !important; }
}
@media (min-width: 1280px) and (max-width: 1535px) {
  .aila-navbar-content,
  .footer-container { padding-left: 48px !important; padding-right: 48px !important; max-width: 1400px !important; }
}
@media (min-width: 1536px) {
  .aila-navbar-content,
  .footer-container { max-width: 1600px !important; }
}
@media (min-width: 1920px) {
  .aila-navbar-content,
  .footer-container { max-width: 1600px !important; }
}

/* Touch-friendly tap targets on mobile */
@media (max-width: 768px) {
  a, button, [role="button"], input[type="submit"] {
    min-width: 44px;
  }
}

/* Safe area insets for notched devices */
@supports (padding: max(0px)) {
  .container {
    padding-left: max(clamp(1rem, 4vw, 2.5rem), env(safe-area-inset-left));
    padding-right: max(clamp(1rem, 4vw, 2.5rem), env(safe-area-inset-right));
  }
}

/* Prevent horizontal overflow */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

/* Images responsive by default */
img {
  max-width: 100%;
  height: auto;
}