@media (max-width: 1300px) {}

@media (max-width: 1120px) {}

@media (max-width: 992px) {
  .hero_area {
    min-height: auto;
  }

  #navbarSupportedContent {
    padding: 15px 0 25px 0;
  }

  .quote_btn-container {
    flex-direction: column;
    align-items: center;
  }

  .quote_btn-container a {
    margin-right: 0;
    margin-top: 10px;
  }

  .slider_section {
    padding: 45px 0 90px 0;
  }


  .client_section .box {
    margin: 15px;
  }

  .client_section .carousel_btn-box {
    display: flex;
    justify-content: center;
    margin-top: 45px;
  }

  .client_section .carousel-control-prev,
  .client_section .carousel-control-next {
    position: unset;
    margin: 0 2.5px;
    width: 45px;
    height: 45px;
  }

  .info_section .info_main_row>div {
    margin-bottom: 25px;
  }
}

@media (max-width: 768px) {
  .slider_section .detail-box {
    margin-bottom: 45px;
    text-align: center;
  }

  .slider_section .detail-box .btn-box {
    justify-content: center;
  }

  .about_section .detail-box {
    margin-bottom: 45px;
  }


  .service_section .row .service_col_middle {
    order: 2;
  }

  .service_section .service_col_middle .box {
    margin-bottom: 45px;
  }

  .server_section {
    background: none;
    background-color: #020230;
  }

  .server_section .img-box {
    margin-bottom: 25px;
  }

  .contact_section .form_container {
    margin-right: 0;
    margin-bottom: 45px;
  }

  .info_section .row>div {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 35px;
  }

  .info_section .info_links {
    align-items: center;
  }
}

@media (max-width: 576px) {


  .client_section .box {
    flex-direction: column;
    align-items: center;
  }

  .client_section .box .detail-box {
    padding: 85px 45px 45px 45px;

  }

  .client_section .box .img-box {
    margin-right: 0;
    margin-bottom: -65px;
  }
}

@media (max-width: 480px) {
  /* Reduce hero/section padding so content has room at narrow widths */
  .layout_padding,
  .layout_padding2,
  .layout_padding-top,
  .layout_padding-bottom {
    padding-top: 45px;
    padding-bottom: 45px;
  }

  /* Stack the legal page sidebar above its content */
  .legal-content-grid {
    grid-template-columns: 1fr !important;
  }
  .legal-sidebar {
    position: static !important;
    top: auto !important;
  }

  /* Let the compact navbar wrap instead of forcing a horizontal scroll */
  .navbar-compact .nav-primary,
  .navbar-compact .nav-secondary,
  .navbar-compact .nav-actions {
    flex-wrap: wrap !important;
  }
  .navbar-brand span,
  .nav-actions .btn {
    white-space: normal !important;
  }
  .nav-link {
    margin: 0 0.2rem !important;
    padding: 0.45rem 0.7rem !important;
  }

  /* Long CTA labels should wrap, not force overflow */
  .cta-button,
  .btn,
  .nav-cta {
    white-space: normal;
  }

  /* Trim oversized fixed chart heights */
  .hero-signal-chart {
    height: auto !important;
    min-height: 240px;
  }

  /* Collapse inline grid-template-columns counts on narrow viewports.
     Pages set these via the `style` attribute (e.g. `repeat(4, minmax(0, 1fr))`)
     so we override via attribute selectors with !important.
     iPhones sit in the 375-430px range — at that width, 2-col layouts still
     fit nicely (~180px each), so we keep `repeat(2)` here and only collapse
     it further at ≤360px below. */
  [style*="grid-template-columns: repeat(6"] {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  [style*="grid-template-columns: repeat(4"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  [style*="grid-template-columns: repeat(3"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  /* repeat(2,...) stays at 2 columns on iPhones — still readable */

  /* Tables that exceed viewport width: make them horizontally scrollable
     in place rather than overflowing the page. Scoped to tables that opt
     into a `min-width` (which means they will overflow at 320px) and to
     common bootstrap/table classes. `display:block` changes semantics so
     we apply it only where overflow is genuinely the lesser evil. */
  table.table,
  table[style*="min-width"],
  .aff-board-table,
  .biz-compare-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }

  /* Generic guard: media and pre blocks should never blow out width.
     Only apply `height: auto` to img/video/svg so canvas/iframe charts
     keep the dimensions they were rendered with. */
  img,
  video,
  svg {
    max-width: 100%;
    height: auto;
  }
  iframe,
  canvas {
    max-width: 100%;
  }
  pre,
  code {
    max-width: 100%;
    overflow-x: auto;
    word-wrap: break-word;
  }

  /* iOS Safari auto-zooms on focus when an input's font-size is below 16px.
     The viewport then doesn't zoom back out, leaving users stuck at a
     scrolled-and-zoomed layout. Force a 16px floor on all text inputs.
     The `font-size` is set with !important to override Bootstrap's
     `.form-control` (0.875rem) and any per-component overrides. */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="tel"],
  input[type="url"],
  input[type="search"],
  input[type="date"],
  input[type="datetime-local"],
  input[type="time"],
  textarea,
  select,
  .form-control,
  .form-input {
    font-size: 16px !important;
  }
}

@media (max-width: 420px) {
  /* Slightly tighter typography below 420px */
  .hero-title,
  .section-title {
    word-break: break-word;
  }
}

@media (max-width: 376px) {
  .slider_section .detail_box h1 {
    font-size: 2.5rem;
  }
}

/* Ultra-narrow phones: iPhone SE 1st gen (320px), small Androids (≤360px).
   At this width even 2-col grids get cramped (each cell ≤150px after gaps),
   so we collapse aggressively. */
@media (max-width: 360px) {
  [style*="grid-template-columns: repeat(6"],
  [style*="grid-template-columns: repeat(4"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  [style*="grid-template-columns: repeat(3"],
  [style*="grid-template-columns: repeat(2"] {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
  }

  /* Reduce container padding to claw back horizontal room */
  .container,
  .container-fluid {
    padding-left: 0.6rem;
    padding-right: 0.6rem;
  }

  /* Shrink hero heading sizes that were already overridden at 420px */
  .hero-title {
    font-size: 1.4rem !important;
  }
  .section-title {
    font-size: 1.35rem !important;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 1170px;
  }
}