/*
 * Desktop XL — Large Screen Consistency
 * ======================================
 * Adds responsive breakpoints for screens above the standard laptop range.
 * Breakpoints covered:
 *   1400px+ — Bootstrap xxl / wide-laptop / small desktop
 *   1600px+ — HD desktop / 1680×1050
 *   1920px+ — Full HD / 1080p monitors
 *
 * Loaded after responsive.css so rules here take precedence.
 */

/* ============================================================
   1400px+ — Bootstrap xxl / Wide desktop
   Bridges the gap between the 1200–1399 range (handled in
   responsive.css) and HD desktop sizes.
   ============================================================ */
@media only screen and (min-width: 1400px) {

  /* --- Container-fluid alignment ---
   * Smooth progression from 1140px (at 1200–1399px, set in responsive.css)
   * up to 1380px here, avoiding an abrupt jump to 1520px. */
  .top-header-area .container-fluid,
  .navbar-area .container-fluid,
  .page-banner-area .container-fluid {
    max-width: 1380px;
  }

  /* --- Section titles ---
   * Default 450px max-width looks noticeably narrow on wide screens. */
  .section-title {
    max-width: 540px;
  }

  .section-title h2 {
    font-size: 42px;
  }

  /* --- Hero banner content --- */
  .slider-content {
    max-width: 800px;
  }

  /* --- Page-banner inner headings --- */
  .page-banner-content h1 {
    font-size: 54px;
  }

  /* --- Default buttons — restore comfortable size (undone the 1200–1399 reduction) --- */
  .default-btn {
    font-size: 16px;
    padding: 14px 30px;
  }

  /* --- Nav items — slightly more breathing room between items --- */
  .desktop-nav .navbar .navbar-nav .nav-item a {
    margin-left: 18px;
    margin-right: 18px;
  }
}

/* ============================================================
   1600px+ — Large HD desktops (1600×900, 1680×1050)
   ============================================================ */
@media only screen and (min-width: 1600px) {

  /* --- Container-fluid widths --- */
  .top-header-area .container-fluid,
  .navbar-area .container-fluid,
  .page-banner-area .container-fluid {
    max-width: 1560px;
  }

  /* --- Section titles --- */
  .section-title {
    max-width: 580px;
  }

  .section-title h2 {
    font-size: 44px;
  }

  /* --- Hero banner --- */
  .slider-content {
    max-width: 860px;
  }

  .slider-content h1 {
    font-size: 70px;
  }

  /* --- Page-banner headings --- */
  .page-banner-content h1 {
    font-size: 58px;
  }

  /* --- Slightly larger body text for comfortable reading at distance --- */
  body {
    font-size: 16px;
  }

  p {
    font-size: 16px;
  }

  /* --- Nav link spacing --- */
  .desktop-nav .navbar .navbar-nav .nav-item a {
    margin-left: 20px;
    margin-right: 20px;
  }

  /* --- Top header link spacing --- */
  .header-right-content .list ul li {
    margin-right: 30px;
  }
}

/* ============================================================
   1920px+ — Full HD / 1080p monitors
   ============================================================ */
@media only screen and (min-width: 1920px) {

  /* --- Container-fluid widths — cap at sane values to prevent
   * excessive white space on the sides of fluid sections --- */
  .top-header-area .container-fluid,
  .navbar-area .container-fluid,
  .page-banner-area .container-fluid {
    max-width: 1800px;
  }

  /* Allow the hero banner container to be truly full-width
   * since it uses a background image and intentional full-bleed design */
  .banner-area .container-fluid {
    max-width: 1920px;
  }

  /* --- Section titles --- */
  .section-title {
    max-width: 620px;
  }

  .section-title h2 {
    font-size: 46px;
  }

  /* --- Hero banner --- */
  .slider-content {
    max-width: 920px;
  }

  .slider-content h1 {
    font-size: 76px;
  }

  /* --- Page-banner headings --- */
  .page-banner-content h1 {
    font-size: 62px;
  }

  /* --- Section vertical padding — more breathing room on tall monitors --- */
  .ptb-100 {
    padding-top: 120px;
    padding-bottom: 120px;
  }

  .pt-100 {
    padding-top: 120px;
  }

  .pb-100 {
    padding-bottom: 120px;
  }

  /* --- Nav link spacing --- */
  .desktop-nav .navbar .navbar-nav .nav-item a {
    margin-left: 22px;
    margin-right: 22px;
  }

  /* --- Footer section padding --- */
  .footer-area {
    padding-top: 120px;
  }
}

/* ============================================================
   2560px+ — QHD / 2K / Ultrawide monitors
   Prevents content from becoming tiny slivers at ultra-wide sizes.
   ============================================================ */
@media only screen and (min-width: 2560px) {

  /* Hard cap all fluid containers to prevent runaway stretching */
  .top-header-area .container-fluid,
  .navbar-area .container-fluid,
  .page-banner-area .container-fluid,
  .banner-area .container-fluid {
    max-width: 2200px;
  }

  .slider-content h1 {
    font-size: 82px;
  }

  .slider-content {
    max-width: 1000px;
  }

  .section-title {
    max-width: 680px;
  }

  .section-title h2 {
    font-size: 50px;
  }
}