/* MIDZ home About stability layer — 2026-09-12
 * Three semantic rows. No SplitType/text-reveal on body copy.
 */

body.home-page .home-about-sec,
body.home-page .home-about-sec .custom-container,
body.home-page .home-about-sec .home-about-grid,
body.home-page .home-about-sec .home-about-row,
body.home-page .home-about-sec .home-about-copy,
body.home-page .home-about-sec .section-subtitle {
  box-sizing: border-box;
  min-width: 0;
}

body.home-page .home-about-sec {
  overflow-x: clip;
}

body.home-page .home-about-sec .home-about-grid {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  max-width: 100% !important;
  gap: clamp(34px, 3.25vw, 54px) !important;
}

body.home-page .home-about-sec .home-about-row {
  display: grid !important;
  width: 100% !important;
  max-width: 100% !important;
  align-items: start !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.home-page .home-about-sec .home-about-row > .section-subtitle,
body.home-page .home-about-sec .home-about-row > .home-about-copy {
  margin: 0 !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

body.home-page .home-about-sec .home-about-row > .section-subtitle {
  width: auto !important;
  padding: 4px 0 0 !important;
}

/* Copy is deliberately a normal paragraph. These rules also neutralise any
 * stale SplitType wrappers left by an old cached JS file. */
body.home-page .home-about-sec .home-about-copy {
  display: block !important;
  width: 100% !important;
  padding: 0 !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  letter-spacing: 0 !important;
  transform: none !important;
}

body.home-page .home-about-sec .home-about-copy .word,
body.home-page .home-about-sec .home-about-copy .char {
  display: inline !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 1 !important;
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
  transform: none !important;
  letter-spacing: 0 !important;
  font: inherit !important;
}

/* English desktop / laptop, including 1559 x 975.
 * Match the Arabic information hierarchy: section label first, copy directly
 * underneath it. No side-by-side label/copy columns. */
@media (min-width: 992px) {
  html[lang="en"] body.home-page .home-about-sec .home-about-row {
    grid-template-columns: minmax(0, 1fr) !important;
    row-gap: 12px !important;
    column-gap: 0 !important;
    direction: ltr !important;
  }

  html[lang="en"] body.home-page .home-about-sec .home-about-row > .section-subtitle,
  html[lang="en"] body.home-page .home-about-sec .home-about-row > .home-about-copy {
    grid-column: 1 !important;
    justify-self: stretch !important;
    width: 100% !important;
    text-align: left !important;
  }

  html[lang="en"] body.home-page .home-about-sec .home-about-row > .home-about-copy {
    direction: ltr !important;
    font-family: var(--font_urbanist), "Urbanist", system-ui, sans-serif !important;
    font-size: 18px !important;
    line-height: 1.55 !important;
    font-weight: 400 !important;
  }
}

@media (min-width: 1440px) and (max-width: 1660px) {
  html[lang="en"] body.home-page .home-about-sec > .custom-container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 60px !important;
    padding-right: 60px !important;
  }
}

@media (max-width: 991px) {
  body.home-page .home-about-sec .home-about-grid {
    gap: 28px !important;
  }

  body.home-page .home-about-sec .home-about-row {
    grid-template-columns: minmax(0, 1fr) !important;
    row-gap: 10px !important;
  }

  html[lang="en"] body.home-page .home-about-sec .home-about-row > .section-subtitle,
  html[lang="en"] body.home-page .home-about-sec .home-about-row > .home-about-copy {
    grid-column: 1 !important;
    width: 100% !important;
    text-align: left !important;
  }

  html[lang="en"] body.home-page .home-about-sec .home-about-copy {
    font-family: var(--font_urbanist), "Urbanist", system-ui, sans-serif !important;
    font-size: 16px !important;
    line-height: 1.55 !important;
    font-weight: 400 !important;
  }
}