/* =========================================================
   Maal Home homepage stability fixes - 2026-07-14
   Header loading, one-slide containment, compact projects heading,
   and matching Why Us / Services typography.
   ========================================================= */


/* =========================================================
   Single root scrollbar + Maal Home navy scrollbar
   Keeps one stable scrollbar from the first paint and prevents
   the temporary html/body double-scrollbar during page startup.
   ========================================================= */
:root {
  --mh-scrollbar-navy: #022056;
  --mh-scrollbar-track: #edf2f7;
}

html {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
  overflow-y: scroll !important;
  scrollbar-gutter: stable !important;
  scrollbar-width: thin;
  scrollbar-color: var(--mh-scrollbar-navy) var(--mh-scrollbar-track);
}

body:not(.mobile-menu-open):not(.swal2-shown) {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: clip !important;
  overflow-y: visible !important;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track {
  background: var(--mh-scrollbar-track);
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
  min-height: 44px;
  background: var(--mh-scrollbar-navy);
  border: 2px solid var(--mh-scrollbar-track);
  border-radius: 999px;
}

html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover {
  background: #0b3470;
}

html::-webkit-scrollbar-corner,
body::-webkit-scrollbar-corner {
  background: var(--mh-scrollbar-track);
}

/* Preserve the existing page-lock behavior for the mobile drawer and dialogs. */
html.mobile-menu-open,
body.mobile-menu-open,
body.swal2-shown:not(.swal2-toast-shown) {
  overflow: hidden !important;
}

/* The header must never be animated by AOS or the generic site reveal system. */
html body .top,
html body .navbar-area,
html body .desktop-navbar,
html body .mobile-header,
html body.site-motion-ready .top,
html body.site-motion-ready .navbar-area,
html body.site-motion-ready .desktop-navbar,
html body.site-motion-ready .mobile-header,
html body .top[data-aos],
html body .navbar-area[data-aos],
html body .mobile-header[data-aos] {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  animation: none !important;
  transition-property: background-color, box-shadow, border-color !important;
}

/* Above-the-fold navigation stays painted while its logo/font finishes loading. */
html body #stickymenu.desktop-navbar,
html body #stickymenu.desktop-navbar .main-nav,
html body #stickymenu.desktop-navbar .navbar {
  background: #ffffff !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
}

/* Before Owl is ready, show exactly the first slide and reserve the correct space. */
.slider .slide-carousel:not(.owl-loaded) {
  display: block !important;
  width: 100% !important;
  overflow: hidden !important;
}

.slider .slide-carousel:not(.owl-loaded) > .slider-item {
  display: none !important;
}

.slider .slide-carousel:not(.owl-loaded) > .slider-item:first-child {
  display: block !important;
}

/* Strict one-slide viewport: prevents any edge of the next slide from leaking in. */
.slider,
.slider .slide-carousel,
.slider .slide-carousel .owl-stage-outer {
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
  contain: layout paint !important;
}

.slider .slide-carousel .owl-stage {
  display: flex !important;
  align-items: stretch !important;
  margin: 0 !important;
  padding: 0 !important;
  will-change: transform !important;
}

.slider .slide-carousel .owl-item {
  flex: 0 0 auto !important;
  min-width: 0 !important;
  max-width: none !important;
  overflow: hidden !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
}

.slider .slide-carousel .owl-item > .slider-item,
.slider .slide-carousel .owl-item .slider-mobile-media,
.slider .slide-carousel .owl-item .slider-mobile-media img {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}

/* Inactive cloned items may exist for looping, but must never show at the viewport edge. */
.slider .slide-carousel.owl-loaded .owl-item:not(.active) {
  opacity: 0 !important;
  pointer-events: none !important;
}

.slider .slide-carousel.owl-loaded .owl-item.active {
  opacity: 1 !important;
}

/* Match Why Us card typography exactly to the Services cards. */
.why-us-final-section .about-card h3 {
  font-size: 1.1rem !important;
  line-height: 1.55 !important;
  margin-bottom: 6px !important;
}

.why-us-final-section .about-card p {
  font-size: .9rem !important;
  line-height: 1.65 !important;
}

/* Compact the blue Projects heading card without losing hierarchy. */
.project.project-parallax-jeddah.project-fixed-bg-section .project-heading {
  width: min(640px, calc(100% - 32px)) !important;
  max-width: 640px !important;
  margin: 0 auto clamp(18px, 2vw, 26px) !important;
  padding: clamp(10px, 1.2vw, 15px) clamp(16px, 2vw, 24px) !important;
  border-radius: 18px !important;
}

.project.project-parallax-jeddah.project-fixed-bg-section .project-heading h2 {
  font-size: clamp(30px, 3.2vw, 46px) !important;
  line-height: 1.2 !important;
  padding-bottom: 14px !important;
}

.project.project-parallax-jeddah.project-fixed-bg-section .project-heading h2::after {
  width: 92px !important;
  height: 4px !important;
}

.project.project-parallax-jeddah.project-fixed-bg-section .project-heading h3 {
  width: min(590px, 100%) !important;
  margin-top: 10px !important;
  font-size: clamp(14px, 1.35vw, 18px) !important;
  line-height: 1.7 !important;
}

@media (max-width: 767.98px) {
  .why-us-final-section .about-card h3 {
    font-size: 1rem !important;
  }

  .why-us-final-section .about-card p {
    font-size: .85rem !important;
  }

  .project.project-parallax-jeddah.project-fixed-bg-section .project-heading {
    width: calc(100% - 20px) !important;
    padding: 10px 12px !important;
    border-radius: 16px !important;
    margin-bottom: 18px !important;
  }

  .project.project-parallax-jeddah.project-fixed-bg-section .project-heading h2 {
    font-size: clamp(26px, 8vw, 36px) !important;
    padding-bottom: 12px !important;
  }

  .project.project-parallax-jeddah.project-fixed-bg-section .project-heading h2::after {
    width: 76px !important;
    height: 3px !important;
  }

  .project.project-parallax-jeddah.project-fixed-bg-section .project-heading h3 {
    width: 94% !important;
    margin-top: 8px !important;
    font-size: clamp(13px, 3.8vw, 16px) !important;
    line-height: 1.65 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .slider .slide-carousel .owl-stage,
  .slider .slide-carousel .owl-item {
    transition: none !important;
  }
}

/* =========================================================
   Homepage slider smooth cross-fade - 2026-07-14
   Uses stacked slides instead of horizontal Owl stage movement.
   This removes the visible jump at the loop boundary and prevents
   any portion of the next image from entering the viewport.
   ========================================================= */
.slider .slide-carousel.mh-fade-slider {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  isolation: isolate !important;
  contain: layout paint !important;
  background: #ffffff !important;
}

.slider .slide-carousel.mh-fade-slider > .slider-item {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  z-index: 1 !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  transform: translate3d(0, 0, 0) !important;
  will-change: opacity !important;
  transition:
    opacity 1050ms cubic-bezier(.22, 1, .36, 1),
    visibility 0s linear 1050ms !important;
}

.slider .slide-carousel.mh-fade-slider > .slider-item.is-active {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  z-index: 2 !important;
  transition:
    opacity 1050ms cubic-bezier(.22, 1, .36, 1),
    visibility 0s linear 0s !important;
}

.slider .slide-carousel.mh-fade-slider > .slider-item .slider-mobile-media,
.slider .slide-carousel.mh-fade-slider > .slider-item .slider-mobile-media img {
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  transform: translate3d(0, 0, 0) !important;
}

.slider .slide-carousel.mh-fade-slider .mh-fade-dots {
  z-index: 20 !important;
}

@media (prefers-reduced-motion: reduce) {
  .slider .slide-carousel.mh-fade-slider > .slider-item,
  .slider .slide-carousel.mh-fade-slider > .slider-item.is-active {
    transition: none !important;
  }
}