@media (min-width:320px) and (max-width:359px){header.nav.waqar-header-v217 .nav-inner{gap:5px!important;padding:7px 8px!important}header.nav.waqar-header-v217 .waqar-brand-identity{gap:4px!important;height:46px!important}header.nav.waqar-header-v217 .waqar-brand-identity__icon{flex-basis:32px!important;width:32px!important;height:40px!important}header.nav.waqar-header-v217 .waqar-brand-identity__text{gap:3px!important}body.home-reference-header header.nav.waqar-header-v217 .waqar-brand-identity__arabic{font-size:12px!important;line-height:1.15!important;letter-spacing:-.45px!important;white-space:nowrap!important}body:not(.home-reference-header) header.nav.waqar-header-v217 .waqar-brand-identity__arabic{font-size:12px!important;line-height:1.15!important;letter-spacing:-.45px!important;white-space:nowrap!important}body.home-reference-header header.nav.waqar-header-v217 .waqar-brand-identity__english{font-size:8.625px!important;line-height:1.15!important;letter-spacing:.03em!important;white-space:nowrap!important}body:not(.home-reference-header) header.nav.waqar-header-v217 .waqar-brand-identity__english{font-size:8.625px!important;line-height:1.15!important;letter-spacing:.03em!important;white-space:nowrap!important}header.nav.waqar-header-v217 .nav-actions a.btn-liquid[href="/book-home-care/"],header.nav.waqar-header-v217 .nav-actions a.waqar-big-book-btn-liquid{padding-inline:26px!important}}@media (min-width:360px) and (max-width:430px){header.nav.waqar-header-v217 .nav-inner{gap:8px!important;padding:7px 12px!important}header.nav.waqar-header-v217 .waqar-brand-identity{gap:6px!important;height:46px!important}header.nav.waqar-header-v217 .waqar-brand-identity__icon{flex-basis:40px!important;width:40px!important;height:44px!important}header.nav.waqar-header-v217 .waqar-brand-identity__text{gap:3px!important}body.home-reference-header header.nav.waqar-header-v217 .waqar-brand-identity__arabic{font-size:clamp(14px,calc(3.5vw + 1.5px),16.5px)!important;line-height:1.15!important;letter-spacing:-.1px!important;white-space:nowrap!important}body:not(.home-reference-header) header.nav.waqar-header-v217 .waqar-brand-identity__arabic{font-size:clamp(14px,calc(3.5vw + 1.5px),16.5px)!important;line-height:1.15!important;letter-spacing:-.1px!important;white-space:nowrap!important}body.home-reference-header header.nav.waqar-header-v217 .waqar-brand-identity__english{font-size:clamp(10.125px,calc(2.625vw + .75px),12px)!important;line-height:1.15!important;letter-spacing:.06em!important;white-space:nowrap!important}body:not(.home-reference-header) header.nav.waqar-header-v217 .waqar-brand-identity__english{font-size:clamp(10.125px,calc(2.625vw + .75px),12px)!important;line-height:1.15!important;letter-spacing:.06em!important;white-space:nowrap!important}header.nav.waqar-header-v217 .nav-actions a.btn-liquid[href="/book-home-care/"],header.nav.waqar-header-v217 .nav-actions a.waqar-big-book-btn-liquid{padding-inline:26px!important}}@media (min-width:320px) and (max-width:359px){header.nav.waqar-header-v217 .waqar-brand-identity__arabic{font-size:clamp(12.5px,3.9vw,14px)!important;font-weight:900!important;line-height:1.12!important;letter-spacing:-.2px!important;white-space:nowrap!important}header.nav.waqar-header-v217 .waqar-brand-identity__english{font-size:clamp(8.2px,2.55vw,9.2px)!important;font-weight:700!important;line-height:1.12!important;letter-spacing:.03em!important;white-space:nowrap!important}.footer-immersive .waqar-footer-brand-identity .waqar-brand-identity__arabic{font-size:15.5px!important;font-weight:900!important;line-height:1.15!important}.footer-immersive .waqar-footer-brand-identity .waqar-brand-identity__english{font-size:10.2px!important;font-weight:700!important;line-height:1.15!important;letter-spacing:.075em!important}}@media (min-width:360px) and (max-width:430px){header.nav.waqar-header-v217 .waqar-brand-identity__arabic{font-size:clamp(15px,calc(3.15vw + 3.66px),17.2px)!important;font-weight:900!important;line-height:1.12!important;letter-spacing:-.12px!important;white-space:nowrap!important}header.nav.waqar-header-v217 .waqar-brand-identity__english{font-size:clamp(9.8px,calc(2.14vw + 2.1px),11.3px)!important;font-weight:700!important;line-height:1.12!important;letter-spacing:.055em!important;white-space:nowrap!important}.footer-immersive .waqar-footer-brand-identity .waqar-brand-identity__arabic{font-size:16.5px!important;font-weight:900!important;line-height:1.15!important}.footer-immersive .waqar-footer-brand-identity .waqar-brand-identity__english{font-size:10.8px!important;font-weight:700!important;line-height:1.15!important;letter-spacing:.075em!important}}@media (min-width:320px) and (max-width:430px){header.nav.waqar-header-v217 .menu-btn{display:grid!important;width:42px!important;height:42px!important;min-width:42px!important;flex:0 0 42px!important;place-items:center!important;padding:0!important;background:#eef5fa!important;border:1px solid rgba(14,90,138,.14)!important;border-radius:13px!important;color:#08233b!important;box-shadow:none!important;cursor:pointer!important}header.nav.waqar-header-v217 .menu-btn i{display:grid!important;gap:4px!important}header.nav.waqar-header-v217 .menu-btn i span{display:block!important;width:20px!important;height:2px!important;border-radius:999px!important;background:currentColor!important}}@media (min-width:320px) and (max-width:359px){html body header.nav.waqar-header-v217 a.waqar-brand-identity .waqar-brand-identity__text .waqar-brand-identity__arabic{font-size:14px!important;font-weight:900!important;line-height:1.08!important;letter-spacing:-.35px!important;white-space:nowrap!important}html body header.nav.waqar-header-v217 a.waqar-brand-identity .waqar-brand-identity__text .waqar-brand-identity__english{font-size:8.4px!important;font-weight:700!important;line-height:1.08!important;letter-spacing:.04em!important;white-space:nowrap!important}html body footer.footer-immersive .waqar-footer-brand-identity .waqar-brand-identity__text .waqar-brand-identity__arabic{font-size:17px!important;font-weight:900!important;line-height:1.1!important;letter-spacing:-.2px!important}html body footer.footer-immersive .waqar-footer-brand-identity .waqar-brand-identity__text .waqar-brand-identity__english{font-size:10px!important;font-weight:700!important;line-height:1.1!important;letter-spacing:.075em!important}}@media (min-width:360px) and (max-width:430px){html body header.nav.waqar-header-v217 a.waqar-brand-identity .waqar-brand-identity__text .waqar-brand-identity__arabic{font-size:clamp(16px,calc(3.57vw + 3.15px),18.5px)!important;font-weight:900!important;line-height:1.08!important;letter-spacing:-.22px!important;white-space:nowrap!important}html body header.nav.waqar-header-v217 a.waqar-brand-identity .waqar-brand-identity__text .waqar-brand-identity__english{font-size:clamp(9.3px,calc(1.86vw + 2.6px),10.6px)!important;font-weight:700!important;line-height:1.08!important;letter-spacing:.045em!important;white-space:nowrap!important}html body footer.footer-immersive .waqar-footer-brand-identity .waqar-brand-identity__text .waqar-brand-identity__arabic{font-size:18.5px!important;font-weight:900!important;line-height:1.1!important;letter-spacing:-.15px!important}html body footer.footer-immersive .waqar-footer-brand-identity .waqar-brand-identity__text .waqar-brand-identity__english{font-size:10.8px!important;font-weight:700!important;line-height:1.1!important;letter-spacing:.075em!important}}@media (min-width:320px) and (max-width:359px){html body footer.footer-immersive .footer-logo.waqar-footer-brand-identity-shell .waqar-footer-brand-identity .waqar-brand-identity__text .waqar-brand-identity__arabic{font-size:19px!important;font-weight:900!important;line-height:1.06!important;letter-spacing:-.2px!important;white-space:nowrap!important}html body footer.footer-immersive .footer-logo.waqar-footer-brand-identity-shell .waqar-footer-brand-identity .waqar-brand-identity__text .waqar-brand-identity__english{font-size:10px!important;font-weight:700!important;line-height:1.08!important;letter-spacing:.075em!important;white-space:nowrap!important}}@media (min-width:360px) and (max-width:430px){html body footer.footer-immersive .footer-logo.waqar-footer-brand-identity-shell .waqar-footer-brand-identity .waqar-brand-identity__text .waqar-brand-identity__arabic{font-size:clamp(21px,calc(2.14vw + 13.3px),22.5px)!important;font-weight:900!important;line-height:1.06!important;letter-spacing:-.18px!important;white-space:nowrap!important}html body footer.footer-immersive .footer-logo.waqar-footer-brand-identity-shell .waqar-footer-brand-identity .waqar-brand-identity__text .waqar-brand-identity__english{font-size:10.8px!important;font-weight:700!important;line-height:1.08!important;letter-spacing:.075em!important;white-space:nowrap!important}}@media (hover:none) and (pointer:coarse){[role=button],a,button,input[type=button],input[type=reset],input[type=submit],summary{-webkit-tap-highlight-color:transparent!important}html{scroll-behavior:auto!important}.reveal{opacity:1!important;transform:none!important}.reveal,body .nav{transition:none!important}#home-hero .home-hero-atmosphere span{animation:none!important}}@media (max-width:767px){html body .waqar-social-squircle-dock .waqar-social-squircle-glass{display:block!important;opacity:1!important;background:rgba(0,0,0,.2)!important;border:1px solid rgba(255,255,255,.1)!important;box-shadow:0 25px 50px -12px rgba(0,0,0,.34)!important}}html body .waqar-related-news article.news-card.reveal{opacity:1!important;transform:none!important;transition:none!important}
/* ==========================================================================
   Waqar shared components (hand-written, readable).
   The minified block above is the consolidated legacy brand layer.
   ========================================================================== */

/* Header: the scrolled state switches instantly. Animating box-shadow,
   border and background on a fixed header repaints it on every frame of
   the first scroll. */
html body header.nav.waqar-header-v217.waqar-header-v217,
html body header.nav.waqar-header-v217.waqar-header-v217 .nav-inner,
html body header.nav.waqar-header-v217.waqar-header-v217 a.brand img,
html body header.nav.waqar-header-v217.waqar-header-v217 .waqar-brand-identity__icon,
html body header.nav.waqar-header-v217.waqar-header-v217 .links a.active {
  transition: none !important;
}

/* --------------------------------------------------------------------------
   Mobile menu ("قائمة وقار"), built once by /assets/js/waqar-site.js.
   The panel stays in the render tree (visibility, not display) so opening it
   only animates opacity and transform on the compositor. No page-wide class
   is toggled, so opening never restyles or re-lays-out the page behind it.
   -------------------------------------------------------------------------- */
.mobile-menu-panel { display: none; }

@media (max-width: 767px) {
  .mobile-menu-panel {
    position: fixed;
    inset: 0;
    z-index: 999998;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 76px 10px 10px;
    background: rgba(5, 24, 42, .42);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    overscroll-behavior: contain;
    touch-action: none;
    transition: opacity .2s ease, visibility 0s linear .2s;
  }
  /* Invisible one-off render after load (see waqar-site.js warm-up). */
  .mobile-menu-panel.is-warming {
    visibility: visible;
    opacity: .001;
    transition: none;
  }
  .mobile-menu-panel.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity .2s ease, visibility 0s;
  }

  .mobile-menu-card {
    position: relative;
    width: 100%;
    max-width: 440px;
    max-height: 100%;
    overflow: hidden auto;
    outline: none;
    overscroll-behavior: contain;
    touch-action: pan-y;
    padding: 20px 16px 18px;
    border: 1px solid rgba(255, 255, 255, .88);
    border-radius: 24px;
    background: linear-gradient(155deg, #fff, #eef7fc);
    box-shadow: 0 22px 54px rgba(5, 28, 48, .2);
    color: #12324f;
    font-family: "Segoe UI", Tahoma, Arial, sans-serif;
    text-align: right;
    opacity: 0;
    transform: translate3d(0, -12px, 0);
    transition: opacity .2s ease, transform .28s cubic-bezier(.2, .8, .2, 1);
  }
  .mobile-menu-panel.open .mobile-menu-card {
    opacity: 1;
    transform: none;
  }
  .mobile-menu-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: linear-gradient(90deg, #c99a2e, #f6dc8f 50%, #c99a2e);
  }

  .mobile-menu-head {
    display: grid;
    gap: 2px;
    margin: 0 0 14px;
    padding: 4px 4px 12px;
    border-bottom: 1px solid rgba(14, 90, 138, .1);
  }
  .mobile-menu-head strong {
    color: #08233b;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.2;
  }
  .mobile-menu-head span {
    color: #65788a;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.6;
  }

  .mobile-menu-links {
    display: grid;
    gap: 8px;
  }
  /* Every destination is a plain white row; the current one gets a gold mark. */
  .mobile-menu-panel .mobile-menu-links a {
    display: flex;
    align-items: center;
    min-height: 48px;
    margin: 0;
    padding: 11px 14px;
    border: 1px solid rgba(14, 90, 138, .1);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 7px 18px rgba(8, 35, 59, .06);
    color: #082f4f;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.35;
    text-decoration: none;
  }
  .mobile-menu-panel .mobile-menu-links a::before,
  .mobile-menu-panel .mobile-menu-links a::after {
    content: none;
  }
  /* Current page or section: warm gold tint and a gold bar on the reading side. */
  .mobile-menu-panel .mobile-menu-links a[aria-current] {
    position: relative;
    padding-inline-start: 24px;
    border-color: rgba(201, 154, 46, .5);
    background: linear-gradient(270deg, #fff4d8, #fffaf0 55%, #fff);
    box-shadow: 0 10px 22px rgba(124, 82, 18, .13), inset 0 1px 0 #fff;
    color: #08233b;
    font-weight: 900;
  }
  .mobile-menu-panel .mobile-menu-links a[aria-current]::before {
    content: "";
    position: absolute;
    inset-block: 11px;
    inset-inline-start: 10px;
    width: 4px;
    border-radius: 4px;
    background: linear-gradient(180deg, #f6dc8f, #c99a2e);
    box-shadow: 0 0 10px rgba(221, 169, 75, .55);
  }

  /* Book + call side by side. */
  .mobile-menu-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 12px;
  }
  .mobile-menu-panel .mobile-menu-actions a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 10px;
    border-radius: 16px;
    font-size: 15px;
    white-space: nowrap;
    font-weight: 900;
    line-height: 1.2;
    text-decoration: none;
  }
  /* Same gold, border and depth as the hero "احجز خدمتك الآن" button. */
  .mobile-menu-panel .mobile-menu-actions a.mobile-menu-book {
    border: 1px solid rgba(250, 224, 154, .72);
    background: linear-gradient(108deg, #956014 0%, #a96e1b 9%, #bd8228 18%, #cf9637 28%, #dda94b 36%, #e9be66 42%, #f2d187 47%, #f7dfa2 52%, #f4d895 57%, #e9c574 62%, #dca94c 69%, #c98f31 77%, #b57820 88%, #996316 100%);
    box-shadow: 0 12px 25px rgba(124, 82, 18, .24), inset 0 1px 0 rgba(255, 255, 255, .48);
    color: #082f4f;
  }
  .mobile-menu-panel .mobile-menu-actions a.mobile-menu-book[aria-current] {
    outline: 2px solid rgba(201, 154, 46, .55);
    outline-offset: 3px;
  }
  .mobile-menu-panel .mobile-menu-actions a.mobile-menu-call {
    border: 1px solid transparent;
    background: linear-gradient(135deg, #0b2e4a, #15527b);
    box-shadow: 0 12px 26px rgba(8, 35, 59, .18);
    color: #fff;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-menu-panel,
  .mobile-menu-card { transition: none; }
}

/* Blocks below the first screen are rendered when the visitor nears them, not
   all at once when the page opens. "auto" keeps each block's real size once it
   has been rendered, so the page height settles and anchors stay accurate.
   News cards are always rendered: with an estimated height, Back to a news list
   (page reloaded) briefly landed on another card until the real heights came in. */
footer.footer-immersive {
  content-visibility: auto;
  contain-intrinsic-size: auto 820px;
}
.waqar-related-v172 {
  content-visibility: auto;
  contain-intrinsic-size: auto 1560px;
}
@media (min-width: 768px) {
  footer.footer-immersive { contain-intrinsic-size: auto 900px; }
  .waqar-related-v172 { contain-intrinsic-size: auto 1200px; }
}
@media (min-width: 1100px) {
  footer.footer-immersive { contain-intrinsic-size: auto 590px; }
  .waqar-related-v172 { contain-intrinsic-size: auto 690px; }
}

/* ---------- Portrait tablet (768–1023px) only ---------- */
@media (min-width: 768px) and (max-width: 1023px) {
  /* Social dock: the same glass as on desktop. */
  html body aside.waqar-social-squircle-dock .waqar-social-squircle-glass {
    background: rgba(0, 0, 0, .2) !important;
    border: 1px solid rgba(255, 255, 255, .1) !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .34) !important;
  }
  html body .waqar-social-squircle-item { box-shadow: 0 10px 18px rgba(0, 0, 0, .22) !important; }

  /* Footer: brand + address beside "تواصل معنا", quick links full width below. */
  html body footer .v101-footer-shell {
    grid-template-columns: minmax(0, 1fr) 287px !important;
    grid-template-areas: "brand contact" "links links" !important;
    align-items: stretch;
    column-gap: 18px !important;
  }
  html body footer .v101-footer-side { display: contents !important; }
  html body footer .v101-footer-brand { grid-area: brand; }
  html body footer .v101-contact-card { grid-area: contact; }
  html body footer .v101-footer-nav-grid {
    grid-area: links;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
  /* The address card is as wide as the address, with the two buttons under it. */
  html body footer .waqar-footer-address {
    width: fit-content !important;
    max-width: 100% !important;
  }
  html body footer .v101-footer-brand .hero-cta { justify-content: flex-start !important; }
}

/* Portrait tablet: the header has room for its section links between the logo
   and "احجز خدمة" (there is no menu button at this width). */
@media (min-width: 768px) and (max-width: 1023px) {
  html body header.nav.waqar-header-v217 .nav-inner .links {
    display: flex !important;
    flex: 1 1 auto;
    justify-content: center;
    gap: 2px !important;
    min-width: 0;
    margin: 0 10px !important;
  }
  html body header.nav.waqar-header-v217 .nav-inner .links a {
    padding: 8px 10px !important;
    font-size: 14px !important;
    white-space: nowrap;
  }
}

/* Logo English line as in the brand artwork: lighter and widely spaced. */
html body .waqar-brand-identity__english {
  font-weight: 600 !important;
  letter-spacing: .2em !important;
  margin-inline-end: -.2em; /* the trailing letter space would push the line off-centre */
}

/* Footer logo: the header logo scaled up. "WAQAR HOME CARE" keeps the header's
   size ratio to the Arabic name, weight and letter spacing at every width. */
html body footer.footer-immersive div.footer-logo.waqar-footer-brand-identity-shell .waqar-brand-identity.waqar-footer-brand-identity span.waqar-brand-identity__text span.waqar-brand-identity__english {
  font-size: 15.8px !important;   /* 23px Arabic × 0.688, as in the header */
  font-weight: 600 !important;
  letter-spacing: .2em !important;
  margin-inline-end: -.2em;
}
@media (max-width: 1023px) {
  html body footer.footer-immersive div.footer-logo.waqar-footer-brand-identity-shell .waqar-brand-identity.waqar-footer-brand-identity span.waqar-brand-identity__text span.waqar-brand-identity__english {
    font-size: 13.9px !important; /* 18.5px Arabic × 0.75 */
  }
}
@media (max-width: 430px) {
  html body footer.footer-immersive div.footer-logo.waqar-footer-brand-identity-shell .waqar-brand-identity.waqar-footer-brand-identity span.waqar-brand-identity__text span.waqar-brand-identity__english {
    font-size: clamp(11px, calc(2.7vw + 2.4px), 13px) !important; /* ≈ 0.58 × Arabic */
    font-weight: 700 !important;
    letter-spacing: .045em !important;
    margin-inline-end: 0;
  }
}
/* Computers: "WAQAR HOME CARE" a little narrower than the Arabic name (~87%),
   as on phones. */
@media (min-width: 1024px) {
  html body header.nav.waqar-header-v217 a.waqar-brand-identity span.waqar-brand-identity__text span.waqar-brand-identity__english {
    font-size: 10.4px !important;
    letter-spacing: .08em !important;
    margin-inline-end: -.08em;
  }
  html body footer.footer-immersive div.footer-logo.waqar-footer-brand-identity-shell .waqar-brand-identity.waqar-footer-brand-identity span.waqar-brand-identity__text span.waqar-brand-identity__english {
    font-size: 15px !important;
    letter-spacing: .08em !important;
    margin-inline-end: -.08em;
  }
}

/* Service pages, tablet and up: the header picture keeps its own wide shape
   instead of a fixed 500px/560px height, so its sides are never cut off. */
@media (min-width: 768px) {
  html body.service-page-main .ec-hero-v107.waqar-global-hero .ec-hero-photo,
  html body.service-page-main .ec-hero-v107:hover .ec-hero-photo,
  html body.service-page-main .ec-hero-v107:focus-within .ec-hero-photo,
  html body.service-page-main .ec-hero-v107:active .ec-hero-photo {
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 1180 / 560 !important;
  }
}

/* 431–1023px: "WAQAR HOME CARE" in the same proportion as on computers
   (0.6 × the Arabic size, .08em spacing ≈ 80% of the Arabic name's width).
   Arabic sizes here: header 16px above 980px, 12px below; footer 23px above
   980px, 18.5px below, 16.5px at 520px and below. */
@media (min-width: 431px) and (max-width: 1023px) {
  html body header.nav.waqar-header-v217 a.waqar-brand-identity span.waqar-brand-identity__text span.waqar-brand-identity__english,
  html body footer.footer-immersive div.footer-logo.waqar-footer-brand-identity-shell .waqar-brand-identity.waqar-footer-brand-identity span.waqar-brand-identity__text span.waqar-brand-identity__english {
    letter-spacing: .08em !important;
    margin-inline-end: -.08em;
  }
  html body header.nav.waqar-header-v217 a.waqar-brand-identity span.waqar-brand-identity__text span.waqar-brand-identity__english { font-size: 7.2px !important; }
  html body footer.footer-immersive div.footer-logo.waqar-footer-brand-identity-shell .waqar-brand-identity.waqar-footer-brand-identity span.waqar-brand-identity__text span.waqar-brand-identity__english { font-size: 11.1px !important; }
}
@media (min-width: 981px) and (max-width: 1023px) {
  html body header.nav.waqar-header-v217 a.waqar-brand-identity span.waqar-brand-identity__text span.waqar-brand-identity__english { font-size: 9.6px !important; }
  html body footer.footer-immersive div.footer-logo.waqar-footer-brand-identity-shell .waqar-brand-identity.waqar-footer-brand-identity span.waqar-brand-identity__text span.waqar-brand-identity__english { font-size: 13.8px !important; }
}
@media (min-width: 431px) and (max-width: 520px) {
  html body footer.footer-immersive div.footer-logo.waqar-footer-brand-identity-shell .waqar-brand-identity.waqar-footer-brand-identity span.waqar-brand-identity__text span.waqar-brand-identity__english { font-size: 9.9px !important; }
}

/* News pages, every width: the header picture keeps its own wide shape
   (≈2.11:1) instead of a fixed 560/500/280px height, so nothing is cut off. */
html body.waqar-news-calm-v172 .ec-hero-v107.waqar-global-hero .ec-hero-photo,
html body.waqar-news-calm-v172 .ec-hero-v107:hover .ec-hero-photo,
html body.waqar-news-calm-v172 .ec-hero-v107:focus-within .ec-hero-photo,
html body.waqar-news-calm-v172 .ec-hero-v107:active .ec-hero-photo {
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 1280 / 607 !important;
}

/* ---------- Computers (1024px and up): header and footer logo laid out like
   the brand artwork — house on the right, the Arabic name, a thin gold line
   with a centred diamond, and "WAQAR HOME CARE" in small widely spaced
   capitals about 90% as wide as the Arabic name. Phones and tablets keep
   their own logo. ---------- */
@media (min-width: 1024px) {
  /* Header: the house as tall as the bar allows without making it taller. */
  html body header.nav.waqar-header-v217 .nav-inner {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
  }
  html body header.nav.waqar-header-v217 a.waqar-brand-identity {
    width: auto !important;
    height: 56px !important;
    gap: 9px !important;
    align-items: center !important;
  }
  html body header.nav.waqar-header-v217 a.waqar-brand-identity img.waqar-brand-identity__icon {
    flex: 0 0 60px !important;
    width: 60px !important;
    height: 56px !important;
  }
  html body header.nav.waqar-header-v217 a.waqar-brand-identity span.waqar-brand-identity__text {
    gap: 0 !important;
    margin-top: 4px !important;
  }
  html body header.nav.waqar-header-v217 a.waqar-brand-identity span.waqar-brand-identity__text span.waqar-brand-identity__arabic {
    line-height: 1 !important;
    margin-bottom: 4.5px !important;
  }
  html body header.nav.waqar-header-v217 a.waqar-brand-identity span.waqar-brand-identity__text span.waqar-brand-identity__english {
    font-size: 9.6px !important;
    font-weight: 600 !important;
    letter-spacing: .28em !important;
    margin-inline-end: -.28em;
    line-height: 1 !important;
    margin-top: 3.5px !important;
  }

  /* Footer: the artwork's full proportions — the house about twice the
     height of the text block. */
  html body footer.footer-immersive div.footer-logo.waqar-footer-brand-identity-shell .waqar-brand-identity.waqar-footer-brand-identity {
    width: auto !important;
    max-width: 100% !important;
    gap: 12px !important;
    align-items: center !important;
  }
  html body footer.footer-immersive div.footer-logo.waqar-footer-brand-identity-shell .waqar-brand-identity.waqar-footer-brand-identity img.waqar-brand-identity__icon {
    flex: 0 0 118px !important;
    width: 118px !important;
    height: 109px !important;
  }
  html body footer.footer-immersive div.footer-logo.waqar-footer-brand-identity-shell .waqar-brand-identity.waqar-footer-brand-identity span.waqar-brand-identity__text {
    gap: 0 !important;
    margin-top: 9px !important;
  }
  html body footer.footer-immersive div.footer-logo.waqar-footer-brand-identity-shell .waqar-brand-identity.waqar-footer-brand-identity span.waqar-brand-identity__text span.waqar-brand-identity__arabic {
    font-size: 23px !important;
    line-height: 1 !important;
    margin-bottom: 8px !important;
  }
  html body footer.footer-immersive div.footer-logo.waqar-footer-brand-identity-shell .waqar-brand-identity.waqar-footer-brand-identity span.waqar-brand-identity__text span.waqar-brand-identity__english {
    font-size: 12.65px !important;
    font-weight: 600 !important;
    letter-spacing: .286em !important;
    margin-inline-end: -.286em;
    line-height: 1 !important;
    margin-top: 6px !important;
  }
}

/* The footer logo takes the visitor back to the top of the page. */
html body footer.footer-immersive .waqar-footer-brand-identity[role="button"] { cursor: pointer !important; }
.footer-immersive .waqar-footer-brand-identity:focus-visible { outline: 2px solid #dfaa3d; outline-offset: 6px; border-radius: 6px; }

/* Computers: the Arabic name in the header logo is as long as the gold
   divider (173px) — larger type, and the divider spans exactly the name.
   Phones keep theirs. */
@media (min-width: 1024px) {
  html body header.nav.waqar-header-v217 a.waqar-brand-identity span.waqar-brand-identity__text span.waqar-brand-identity__arabic {
    font-size: 18.55px !important;
  }
}

/* Tablets (431-1023px): the header logo takes the computer layout — Arabic
   name as long as the gold line, "WAQAR HOME CARE" spaced out beneath it —
   scaled down to the tablet bar. waqar-site.js fits the English spacing to
   the Arabic name as the device renders it. Phones keep their own logo. */
@media (min-width: 431px) and (max-width: 1023px) {
  html body header.nav.waqar-header-v217 a.waqar-brand-identity {
    width: auto !important;
    flex-shrink: 0 !important;
    gap: 8px !important;
    align-items: center !important;
  }
  html body header.nav.waqar-header-v217 a.waqar-brand-identity img.waqar-brand-identity__icon {
    flex: 0 0 47px !important;
    width: 47px !important;
    height: 44px !important;
  }
  html body header.nav.waqar-header-v217 a.waqar-brand-identity span.waqar-brand-identity__text {
    gap: 0 !important;
    margin-top: 3px !important;
  }
  html body header.nav.waqar-header-v217 a.waqar-brand-identity span.waqar-brand-identity__text span.waqar-brand-identity__arabic {
    font-size: 15px !important;
    line-height: 1 !important;
    margin-bottom: 3.5px !important;
  }
  html body header.nav.waqar-header-v217 a.waqar-brand-identity span.waqar-brand-identity__text span.waqar-brand-identity__english {
    font-size: 7.8px !important;
    font-weight: 600 !important;
    letter-spacing: .28em !important;
    margin-inline-end: -.28em;
    line-height: 1 !important;
    margin-top: 3px !important;
  }
}