/* ==========================================================================
   LAPTOP FIT
   Loaded last (footage/includes/head.php). The original sizes were made for
   large desktop monitors; on a 13–15" laptop (≈1280–1536 px wide, ≈650–860 px
   tall) the header alone took over a fifth of the screen. This file:
     1. makes the header shorter, and a single row once it sticks on scroll
     2. shortens the page banner on inner pages
     3. trims the very large section spacing on laptop-sized screens
     4. brings the footer logo down to a normal size
   Phones/tablets (< 992px) keep their own rules from style.css.
   ========================================================================== */

/* ---------- 1. Header (desktop layout only) ---------- */
@media (min-width: 992px) {
  .navbar .container .upper-side { padding: 14px 0; }
  .navbar .container .menu > ul > li { margin-left: 32px; }
  .navbar .container .menu > ul > li > a { padding: 18px 0; font-size: 15px; }

  /* sticky state: no entrance delay, compact two rows */
  .navbar.fixed .container .upper-side,
  .navbar.fixed .container .menu { transition-delay: 0s; }
  .navbar.fixed .container .upper-side { padding: 8px 0; }
  .navbar.fixed .container .upper-side .logo img { height: 40px; }
  .navbar.fixed .container .menu > ul > li > a { padding: 13px 0; }
}

/* wide enough for logo + menu side by side: the sticky header becomes one row */
@media (min-width: 1200px) {
  .navbar.fixed .container {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 32px;
  }
  .lang-ar .navbar.fixed .container { flex-direction: row-reverse; }

  .navbar.fixed .container .upper-side {
    flex: none;
    width: auto;
    padding: 0;
  }
  .navbar.fixed .container .upper-side .phone-email,
  .navbar.fixed .container .upper-side .language { display: none; }

  .navbar.fixed .container .menu {
    flex: 1;
    width: auto;
    min-width: 0;
    border-top: 0;
  }
  .navbar.fixed .container .menu > ul { margin-top: 0; }
  .navbar.fixed .container .menu > ul > li > a { padding: 21px 0; }
}

/* 992–1365px: a little less space between menu items so they never wrap */
@media (min-width: 992px) and (max-width: 1365px) {
  .navbar .container .menu > ul > li { margin-left: 26px; }
  .navbar .container .menu > ul > li > a { font-size: 14.5px; }
}

/* ---------- 2. Inner-page banner ---------- */
@media (min-width: 992px) {
  .page-header {
    height: min(600px, 60vh);
    min-height: 420px;
    padding-top: 130px;
  }
  .page-header .container h1 {
    font-size: clamp(2.25rem, 3.6vw, 3.5rem);
    margin-bottom: 10px;
  }
  .page-header .container p {
    font-size: 1.1rem;
    margin-bottom: 26px;
  }
  .page-header .container .breadcrumb { padding: 12px 26px; }
}

/* ---------- 3. Section spacing on laptop-sized screens ---------- */
@media (min-width: 992px) and (max-width: 1440px), (min-width: 992px) and (max-height: 860px) {
  .benefits,
  .property-customization,
  .certificates { padding-top: 96px; padding-bottom: 96px; }
  .pf-section { padding-top: 80px; padding-bottom: 80px; }
  .modern-offices-section { padding: 72px 0; }
}

/* ---------- 4. Footer logo ---------- */
.footer img.logo {
  width: auto;
  height: 64px;
  margin-bottom: 18px;
}
@media (max-width: 767px) {
  .footer img.logo { height: 52px; }
}