/* Responsive Alignment & Mobile Optimization */

/* ============================================
   RESPONSIVE TYPOGRAPHY
   ============================================ */
/* Typography scaling is handled by typography.css.
   Only layout-affecting overrides are kept here. */

/* ============================================
   GLOBAL SECTION SPACING
   ============================================ */

/* Desktop: 80px (set in main.css) */

/* Tablet */
@media (max-width: 991px) {
  section,
  section.section,
  section.light-background,
  .section {
    padding: 60px 0 !important;
  }

  .section-title {
    padding-bottom: 24px !important;
  }

  .section-title h2 {
    padding-bottom: 16px !important;
  }
}

/* Mobile */
@media (max-width: 767px) {
  section,
  section.section,
  section.light-background,
  .section {
    padding: 40px 0 !important;
  }

  .section-title {
    padding-bottom: 18px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .section-title h2 {
    padding-bottom: 14px !important;
  }

  .section-title p {
    margin-top: 10px !important;
  }

  .section-header {
    margin-bottom: 15px !important;
  }

  .features,
  .contact,
  .about,
  .testimonials,
  .pricing-cards-section,
  .pricing-comparison-section,
  .pricing-faq-section,
  #faq-section,
  #our-locations-section,
  #about-features-premium,
  #about-hero-premium,
  #aboutus-hero-wrapper,
  .timezone-section {
    padding: 40px 0 !important;
  }
}

/* Small mobile */
@media (max-width: 575px) {
  section,
  section.section,
  section.light-background,
  .section {
    padding: 32px 0 !important;
  }

  .section-title {
    padding-bottom: 14px !important;
  }

  .features,
  .contact,
  .about,
  .testimonials,
  .pricing-cards-section,
  .pricing-comparison-section,
  .pricing-faq-section,
  #faq-section,
  #our-locations-section,
  #about-features-premium,
  #about-hero-premium,
  #aboutus-hero-wrapper,
  .timezone-section {
    padding: 32px 0 !important;
  }
}

/* ============================================
   CONTAINER OPTIMIZATION
   ============================================ */

/* Tablet: expand container to use more screen width */
@media (min-width: 768px) and (max-width: 991px) {
  .container,
  .container-sm,
  .container-md {
    max-width: 95% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

@media (max-width: 767px) {
  .container {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .row {
    margin-left: -8px !important;
    margin-right: -8px !important;
  }

  .row > * {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
}

@media (max-width: 575px) {
  .container {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .row {
    margin-left: -6px !important;
    margin-right: -6px !important;
  }

  .row > * {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
}

/* Remove extra spacing */
body {
  overflow-x: hidden;
}

html {
  overflow-x: hidden;
}