/* =========================================================
   MIDZ Arabic current UI fixes — 2026-09-17
   - Service detail typography requested for all /ar/service/... pages
   - Regional contact modal compact typography + close-button clearance
   Loaded last in includes/header.php for Arabic pages.
   ========================================================= */

/* ---------------------------------------------------------
   SERVICE DETAIL — all Arabic service pages
   Laptop/Desktop: title 28px, intro 15px
   Phone: title 23px, intro 13px
   Section subtitles (e.g. "علامات تثق بنا"): 15px
   --------------------------------------------------------- */
html[lang="ar"][dir="rtl"] body.service-single-page .midz-service-single-copy h1,
html[lang="ar"][dir="rtl"] body.service-single-page .midz-service-single-copy h1 * {
  font-size: 28px !important;
  line-height: 1.42 !important;
  font-weight: 500 !important;
}

html[lang="ar"][dir="rtl"] body.service-single-page .midz-service-single-copy > p {
  font-size: 15px !important;
  line-height: 1.8 !important;
  font-weight: 400 !important;
}

html[lang="ar"][dir="rtl"] body.service-single-page .section-subtitle,
html[lang="ar"][dir="rtl"] body.service-single-page .midz-service-section-head .section-subtitle,
html[lang="ar"][dir="rtl"] body.service-single-page .midz-service-work-sec .section-header.section-header2 .section-subtitle {
  font-size: 15px !important;
  line-height: 1.55 !important;
  font-weight: 500 !important;
}

@media (max-width: 767px) {
  html[lang="ar"][dir="rtl"] body.service-single-page .midz-service-single-copy h1,
  html[lang="ar"][dir="rtl"] body.service-single-page .midz-service-single-copy h1 * {
    font-size: 23px !important;
    line-height: 1.45 !important;
  }

  html[lang="ar"][dir="rtl"] body.service-single-page .midz-service-single-copy > p {
    font-size: 13px !important;
    line-height: 1.8 !important;
  }

  html[lang="ar"][dir="rtl"] body.service-single-page .section-subtitle,
  html[lang="ar"][dir="rtl"] body.service-single-page .midz-service-section-head .section-subtitle,
  html[lang="ar"][dir="rtl"] body.service-single-page .midz-service-work-sec .section-header.section-header2 .section-subtitle {
    font-size: 15px !important;
    line-height: 1.55 !important;
  }
}

/* ---------------------------------------------------------
   REGIONAL CONTACT MODAL — Arabic
   Compact hierarchy aligned with the site typography.
   The close button stays at the far right with a protected
   text clearance so it never sits over "تواصل معنا".
   --------------------------------------------------------- */
html[lang="ar"][dir="rtl"] .midz-regional-modal__dialog {
  width: min(390px, calc(100vw - 32px)) !important;
  border-radius: 20px !important;
  padding: 24px 20px 20px !important;
  text-align: right !important;
}

html[lang="ar"][dir="rtl"] .midz-regional-modal__close {
  top: 10px !important;
  right: 10px !important;
  left: auto !important;
  width: 30px !important;
  height: 30px !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  font-size: 13px !important;
  line-height: 1 !important;
  z-index: 3 !important;
}

html[lang="ar"][dir="rtl"] .midz-regional-modal__close i {
  font-size: 13px !important;
  line-height: 1 !important;
}

html[lang="ar"][dir="rtl"] .midz-regional-modal__eyebrow {
  margin: 0 0 5px !important;
  padding-right: 38px !important;
  min-height: 20px !important;
  color: rgba(255, 255, 255, 0.55) !important;
  font-size: 11px !important;
  line-height: 1.55 !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-align: right !important;
}

html[lang="ar"][dir="rtl"] .midz-regional-modal__title,
html[lang="ar"][dir="rtl"] .midz-regional-modal__title * {
  margin: 0 0 7px !important;
  font-size: 24px !important;
  line-height: 1.42 !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-align: right !important;
}

html[lang="ar"][dir="rtl"] .midz-regional-modal__lead {
  margin: 0 0 16px !important;
  font-size: 15px !important;
  line-height: 1.75 !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-align: right !important;
}

html[lang="ar"][dir="rtl"] .midz-regional-modal__options {
  gap: 10px !important;
}

html[lang="ar"][dir="rtl"] .midz-regional-modal__option {
  gap: 10px !important;
  min-height: 0 !important;
  padding: 13px 15px !important;
  border-radius: 14px !important;
}

html[lang="ar"][dir="rtl"] .midz-regional-modal__option-code {
  min-width: 34px !important;
  font-size: 10px !important;
  line-height: 1.4 !important;
  letter-spacing: 0.12em !important;
}

html[lang="ar"][dir="rtl"] .midz-regional-modal__option-copy {
  gap: 2px !important;
}

html[lang="ar"][dir="rtl"] .midz-regional-modal__option-copy strong {
  font-size: 15px !important;
  line-height: 1.5 !important;
  font-weight: 500 !important;
}

html[lang="ar"][dir="rtl"] .midz-regional-modal__option-copy span,
html[lang="ar"][dir="rtl"] .midz-regional-modal__phone {
  font-size: 13px !important;
  line-height: 1.55 !important;
}

html[lang="ar"][dir="rtl"] .midz-regional-modal__option-arrow {
  font-size: 14px !important;
  line-height: 1 !important;
}

@media (max-width: 767px) {
  html[lang="ar"][dir="rtl"] .midz-regional-modal {
    padding: 16px !important;
  }

  html[lang="ar"][dir="rtl"] .midz-regional-modal__dialog {
    width: min(360px, calc(100vw - 32px)) !important;
    border-radius: 18px !important;
    padding: 22px 18px 18px !important;
  }

  html[lang="ar"][dir="rtl"] .midz-regional-modal__close {
    top: 9px !important;
    right: 9px !important;
    width: 28px !important;
    height: 28px !important;
  }

  html[lang="ar"][dir="rtl"] .midz-regional-modal__eyebrow {
    padding-right: 36px !important;
    font-size: 10px !important;
  }

  html[lang="ar"][dir="rtl"] .midz-regional-modal__title,
  html[lang="ar"][dir="rtl"] .midz-regional-modal__title * {
    font-size: 20px !important;
    line-height: 1.45 !important;
  }

  html[lang="ar"][dir="rtl"] .midz-regional-modal__lead {
    margin-bottom: 14px !important;
    font-size: 13px !important;
    line-height: 1.75 !important;
  }

  html[lang="ar"][dir="rtl"] .midz-regional-modal__option {
    padding: 12px 13px !important;
    border-radius: 13px !important;
  }

  html[lang="ar"][dir="rtl"] .midz-regional-modal__option-code {
    min-width: 31px !important;
    font-size: 9.5px !important;
  }

  html[lang="ar"][dir="rtl"] .midz-regional-modal__option-copy strong {
    font-size: 14px !important;
  }

  html[lang="ar"][dir="rtl"] .midz-regional-modal__option-copy span,
  html[lang="ar"][dir="rtl"] .midz-regional-modal__phone {
    font-size: 12px !important;
  }

  html[lang="ar"][dir="rtl"] .midz-regional-modal__option-arrow {
    font-size: 13px !important;
  }
}

/* ---------------------------------------------------------
   CONTACT HERO — Arabic desktop/laptop
   Reduce the empty space beneath the red hero artwork so the
   artwork sits close to the section divider with only a small gap.
   --------------------------------------------------------- */
@media (min-width: 992px) {
  html[lang="ar"][dir="rtl"] body.contact-page .midz-page-hero {
    padding-bottom: 12px !important;
  }

  html[lang="ar"][dir="rtl"] body.contact-page .midz-page-hero-shape {
    top: 50% !important;
  }
}

/* ---------------------------------------------------------
   PROJECTS ARCHIVE — Arabic /ar/projects.php
   Match the featured-projects heading on the Arabic home page:
   centered composition + same Arabic display typography.
   --------------------------------------------------------- */
html[lang="ar"][dir="rtl"] body.projects-page .feature-sec .section-header.section-header2 {
  width: 100% !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

html[lang="ar"][dir="rtl"] body.projects-page .feature-sec .section-header.section-header2 .section-subtitle {
  width: auto !important;
  max-width: none !important;
  justify-content: center !important;
  align-items: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

html[lang="ar"][dir="rtl"] body.projects-page .feature-sec .section-header.section-header2 .section-title2,
html[lang="ar"][dir="rtl"] body.projects-page .feature-sec .section-header.section-header2 .section-title2 span,
html[lang="ar"][dir="rtl"] body.projects-page .feature-sec .section-header.section-header2 .section-title2 em,
html[lang="ar"][dir="rtl"] body.projects-page .feature-sec .section-header.section-header2 .section-title2 .word,
html[lang="ar"][dir="rtl"] body.projects-page .feature-sec .section-header.section-header2 .section-title2 .char {
  font-family: var(--midz-arabic-font) !important;
  font-style: normal !important;
  font-weight: 600 !important;
  font-size: 96px !important;
  line-height: 1.14 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-align: center !important;
}

html[lang="ar"][dir="rtl"] body.projects-page .feature-sec .section-header.section-header2 .section-title2 {
  width: 100% !important;
  max-width: none !important;
  margin: -7px auto !important;
}

html[lang="ar"][dir="rtl"] body.projects-page .feature-sec .section-header.section-header2 .section-desc {
  width: min(100%, 1120px) !important;
  max-width: 1120px !important;
  margin: 14px auto 0 !important;
  text-align: center !important;
  font-size: 14px !important;
  line-height: 1.8 !important;
}

@media (max-width: 991px) {
  html[lang="ar"][dir="rtl"] body.projects-page .feature-sec .section-header.section-header2 .section-title2,
  html[lang="ar"][dir="rtl"] body.projects-page .feature-sec .section-header.section-header2 .section-title2 span,
  html[lang="ar"][dir="rtl"] body.projects-page .feature-sec .section-header.section-header2 .section-title2 em,
  html[lang="ar"][dir="rtl"] body.projects-page .feature-sec .section-header.section-header2 .section-title2 .word,
  html[lang="ar"][dir="rtl"] body.projects-page .feature-sec .section-header.section-header2 .section-title2 .char {
    font-size: clamp(28px, 7vw, 40px) !important;
    line-height: 1.12 !important;
  }

  html[lang="ar"][dir="rtl"] body.projects-page .feature-sec .section-header.section-header2 .section-desc {
    width: min(100%, 760px) !important;
    font-size: 13.5px !important;
  }
}

/* ---------------------------------------------------------
   PROJECTS ARCHIVE — TRUE CENTERING ON ALL VIEWPORTS
   Keep the Arabic projects intro centered on desktop/laptop
   and mobile, matching the centered composition used on home.
   --------------------------------------------------------- */
html[lang="ar"][dir="rtl"] body.projects-page .feature-sec > .custom-container {
  width: 100% !important;
}

html[lang="ar"][dir="rtl"] body.projects-page .feature-sec .section-header.section-header2 {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

html[lang="ar"][dir="rtl"] body.projects-page .feature-sec .section-header.section-header2 .section-subtitle {
  display: inline-flex !important;
  width: auto !important;
  max-width: 100% !important;
  align-self: center !important;
  align-items: center !important;
  justify-content: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

html[lang="ar"][dir="rtl"] body.projects-page .feature-sec .section-header.section-header2 .section-title2 {
  display: block !important;
  width: 100% !important;
  max-width: 1200px !important;
  align-self: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

html[lang="ar"][dir="rtl"] body.projects-page .feature-sec .section-header.section-header2 .section-title2,
html[lang="ar"][dir="rtl"] body.projects-page .feature-sec .section-header.section-header2 .section-title2 span,
html[lang="ar"][dir="rtl"] body.projects-page .feature-sec .section-header.section-header2 .section-title2 em,
html[lang="ar"][dir="rtl"] body.projects-page .feature-sec .section-header.section-header2 .section-title2 .word,
html[lang="ar"][dir="rtl"] body.projects-page .feature-sec .section-header.section-header2 .section-title2 .char {
  font-family: var(--midz-arabic-font) !important;
  font-style: normal !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-align: center !important;
}

html[lang="ar"][dir="rtl"] body.projects-page .feature-sec .section-header.section-header2 .section-desc {
  display: block !important;
  width: min(100%, 1120px) !important;
  max-width: 1120px !important;
  align-self: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

@media (max-width: 991px) {
  html[lang="ar"][dir="rtl"] body.projects-page .feature-sec > .custom-container {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  html[lang="ar"][dir="rtl"] body.projects-page .feature-sec .section-header.section-header2,
  html[lang="ar"][dir="rtl"] body.projects-page .feature-sec .section-header.section-header2 .section-title2,
  html[lang="ar"][dir="rtl"] body.projects-page .feature-sec .section-header.section-header2 .section-desc {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }

  html[lang="ar"][dir="rtl"] body.projects-page .feature-sec .section-header.section-header2 .section-subtitle {
    align-self: center !important;
    justify-content: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }
}

/* =========================================================
   2026-09-17 — Arabic contact/projects/project-detail polish
   1) Contact first/last/email placeholders: smaller + equal.
   2) Projects archive phone: "مشاريعنا" starts from the same
      RTL edge as "مشاريع مميزة" instead of floating centered.
   3) Project detail phone: compact Project Gallery / Visual Story.
   ========================================================= */

/* CONTACT — placeholder text only. Keep actual mobile inputs at 16px
   (iOS zoom protection) while the visible placeholder stays compact. */
html[lang="ar"][dir="rtl"] body.contact-page .contact-form--advanced input[name="first_name"]::placeholder,
html[lang="ar"][dir="rtl"] body.contact-page .contact-form--advanced input[name="last_name"]::placeholder,
html[lang="ar"][dir="rtl"] body.contact-page .contact-form--advanced input[name="email"]::placeholder {
  font-family: inherit !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
  font-weight: 400 !important;
  opacity: .58 !important;
}

@media (max-width: 767px) {
  html[lang="ar"][dir="rtl"] body.contact-page .contact-form--advanced input[name="first_name"]::placeholder,
  html[lang="ar"][dir="rtl"] body.contact-page .contact-form--advanced input[name="last_name"]::placeholder,
  html[lang="ar"][dir="rtl"] body.contact-page .contact-form--advanced input[name="email"]::placeholder {
    font-size: 12.5px !important;
    line-height: 1.55 !important;
  }

  /* PROJECT DETAIL — phone only: keep the gallery hierarchy compact. */
  html[lang="ar"][dir="rtl"] body.midz-project-page .midz-project-gallery-stack .midz-project-section-head .section-subtitle {
    font-size: 13px !important;
    line-height: 1.55 !important;
  }

  html[lang="ar"][dir="rtl"] body.midz-project-page .midz-project-gallery-stack-title,
  html[lang="ar"][dir="rtl"] body.midz-project-page .midz-project-gallery-stack-title span,
  html[lang="ar"][dir="rtl"] body.midz-project-page .midz-project-gallery-stack-title em,
  html[lang="ar"][dir="rtl"] body.midz-project-page .midz-project-gallery-stack-title .word,
  html[lang="ar"][dir="rtl"] body.midz-project-page .midz-project-gallery-stack-title .char {
    font-size: 20px !important;
    line-height: 1.5 !important;
    font-weight: 500 !important;
  }
}

/* =========================================================
   2026-09-17 — Project detail mobile refinement round 2
   - Services row is compact on phone only.
   - Project hero description uses the same Arabic size as laptop.
   - Projects archive kicker is restored to centered position.
   - 2px gap between "معرض المشروع" and "القصة البصرية".
   ========================================================= */

@media (max-width: 767px) {
  /* /ar/projects.php — restore the original centered kicker. */
  html[lang="ar"][dir="rtl"] body.projects-page .feature-sec .section-header.section-header2 .section-subtitle {
    position: static !important;
    transform: none !important;
    align-self: center !important;
    justify-content: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }

  /* Project detail — keep the intro description exactly on the laptop scale. */
  html[lang="ar"][dir="rtl"] body.midz-project-page .midz-project-hero-subtitle {
    font-size: 13.5px !important;
    line-height: 1.8 !important;
    font-weight: 400 !important;
  }

  /* Project detail — services metadata only. Long service lists should not
     dominate the mobile hero. */
  html[lang="ar"][dir="rtl"] body.midz-project-page .midz-project-meta-services > span {
    font-size: 9.5px !important;
    line-height: 1.5 !important;
  }

  html[lang="ar"][dir="rtl"] body.midz-project-page .midz-project-meta-services > strong {
    font-size: 11.5px !important;
    line-height: 1.65 !important;
    font-weight: 500 !important;
  }

  /* Gallery heading spacing on project detail pages. */
  html[lang="ar"][dir="rtl"] body.midz-project-page .midz-project-gallery-stack .midz-project-section-head .section-subtitle {
    margin-bottom: 2px !important;
  }
}

/* =========================================================
   2026-09-17 — Project detail Arabic typography lock (round 3)
   - Lock the project hero description to the exact same Arabic
     font/size on desktop and phone.
   - Restore the Arabic font on Project Gallery / Visual Story,
     including SplitType descendants.
   - Keep a small, visible gap between the gallery kicker and title.
   ========================================================= */

/* PROJECT HERO DESCRIPTION — identical typography on every viewport. */
html[lang="ar"][dir="rtl"] body.midz-project-page .midz-project-hero-subtitle,
html[lang="ar"][dir="rtl"] body.midz-project-page .midz-project-hero-subtitle * {
  font-family: var(--midz-arabic-font, "Cairo", Tahoma, Arial, sans-serif) !important;
  font-size: 13.5px !important;
  line-height: 1.82 !important;
  font-weight: 400 !important;
  font-style: normal !important;
  letter-spacing: 0 !important;
  word-spacing: normal !important;
  text-transform: none !important;
}

/* PROJECT GALLERY HEADING — force the Arabic family on the whole heading,
   including the <em> last word and any reveal/split wrappers. */
html[lang="ar"][dir="rtl"] body.midz-project-page .midz-project-gallery-stack .midz-project-section-head .section-subtitle,
html[lang="ar"][dir="rtl"] body.midz-project-page .midz-project-gallery-stack .midz-project-section-head .section-subtitle * {
  font-family: var(--midz-arabic-font, "Cairo", Tahoma, Arial, sans-serif) !important;
  font-style: normal !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

html[lang="ar"][dir="rtl"] body.midz-project-page .midz-project-gallery-stack-title,
html[lang="ar"][dir="rtl"] body.midz-project-page .midz-project-gallery-stack-title span,
html[lang="ar"][dir="rtl"] body.midz-project-page .midz-project-gallery-stack-title em,
html[lang="ar"][dir="rtl"] body.midz-project-page .midz-project-gallery-stack-title .word,
html[lang="ar"][dir="rtl"] body.midz-project-page .midz-project-gallery-stack-title .char {
  font-family: var(--midz-arabic-font, "Cairo", Tahoma, Arial, sans-serif) !important;
  font-style: normal !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  word-spacing: normal !important;
  text-transform: none !important;
}

/* Keep a deliberate small gap between "معرض المشروع" and "القصة البصرية". */
html[lang="ar"][dir="rtl"] body.midz-project-page .midz-project-gallery-stack .midz-project-section-head .section-subtitle {
  margin: 0 0 4px !important;
}

html[lang="ar"][dir="rtl"] body.midz-project-page .midz-project-gallery-stack-title {
  margin: 0 !important;
}

@media (max-width: 767px) {
  html[lang="ar"][dir="rtl"] body.midz-project-page .midz-project-gallery-stack .midz-project-section-head .section-subtitle,
  html[lang="ar"][dir="rtl"] body.midz-project-page .midz-project-gallery-stack .midz-project-section-head .section-subtitle * {
    font-size: 18px !important;
    line-height: 1.45 !important;
    font-weight: 500 !important;
  }

  html[lang="ar"][dir="rtl"] body.midz-project-page .midz-project-gallery-stack-title,
  html[lang="ar"][dir="rtl"] body.midz-project-page .midz-project-gallery-stack-title span,
  html[lang="ar"][dir="rtl"] body.midz-project-page .midz-project-gallery-stack-title em,
  html[lang="ar"][dir="rtl"] body.midz-project-page .midz-project-gallery-stack-title .word,
  html[lang="ar"][dir="rtl"] body.midz-project-page .midz-project-gallery-stack-title .char {
    font-size: 13px !important;
    line-height: 1.45 !important;
    font-weight: 500 !important;
  }
}


/* 2026-09-17 — Project gallery mobile title final lock. */
@media (max-width: 767px) {
  html[lang="ar"][dir="rtl"] body.midz-project-page .midz-project-gallery-stack .midz-project-section-head + .midz-project-gallery-stack-title,
  html[lang="ar"][dir="rtl"] body.midz-project-page .midz-project-gallery-stack .midz-project-gallery-stack-title,
  html[lang="ar"][dir="rtl"] body.midz-project-page .midz-project-gallery-stack .midz-project-gallery-stack-title * {
    font-size: 13px !important;
  }
}

/* =========================================================
   2026-09-17 — Project gallery title final desktop + mobile lock (v6)
   - "القصة البصرية" = 13px on laptop and mobile.
   - Give "معرض المشروع" a clearer gap underneath before the title.
   ========================================================= */
html[lang="ar"][dir="rtl"] body.midz-project-page .midz-project-gallery-stack .midz-project-gallery-stack-title,
html[lang="ar"][dir="rtl"] body.midz-project-page .midz-project-gallery-stack .midz-project-gallery-stack-title span,
html[lang="ar"][dir="rtl"] body.midz-project-page .midz-project-gallery-stack .midz-project-gallery-stack-title em,
html[lang="ar"][dir="rtl"] body.midz-project-page .midz-project-gallery-stack .midz-project-gallery-stack-title .word,
html[lang="ar"][dir="rtl"] body.midz-project-page .midz-project-gallery-stack .midz-project-gallery-stack-title .char,
html[lang="ar"][dir="rtl"] body.midz-project-page .midz-project-gallery-stack .midz-project-gallery-stack-title * {
  font-family: var(--midz-arabic-font, "Cairo", Tahoma, Arial, sans-serif) !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  font-weight: 500 !important;
  font-style: normal !important;
  letter-spacing: 0 !important;
  word-spacing: normal !important;
}

html[lang="ar"][dir="rtl"] body.midz-project-page .midz-project-gallery-stack .midz-project-section-head .section-subtitle {
  margin-bottom: 8px !important;
}

@media (max-width: 767px) {
  html[lang="ar"][dir="rtl"] body.midz-project-page .midz-project-gallery-stack .midz-project-section-head .section-subtitle {
    margin-bottom: 8px !important;
  }

  html[lang="ar"][dir="rtl"] body.midz-project-page .midz-project-gallery-stack .midz-project-gallery-stack-title,
  html[lang="ar"][dir="rtl"] body.midz-project-page .midz-project-gallery-stack .midz-project-gallery-stack-title * {
    font-size: 13px !important;
  }
}

/* =========================================================
   2026-09-17 — Project gallery hierarchy v7
   - "معرض المشروع" = 20px
   - "القصة البصرية" = 15px
   - 8px spacing between them
   Applies to laptop + mobile.
   ========================================================= */
html[lang="ar"][dir="rtl"] body.midz-project-page .midz-project-gallery-stack .midz-project-section-head .section-subtitle,
html[lang="ar"][dir="rtl"] body.midz-project-page .midz-project-gallery-stack .midz-project-section-head .section-subtitle * {
  font-size: 20px !important;
  line-height: 1.45 !important;
  font-weight: 500 !important;
}

html[lang="ar"][dir="rtl"] body.midz-project-page .midz-project-gallery-stack .midz-project-section-head .section-subtitle {
  margin: 0 0 8px !important;
}

html[lang="ar"][dir="rtl"] body.midz-project-page .midz-project-gallery-stack .midz-project-gallery-stack-title,
html[lang="ar"][dir="rtl"] body.midz-project-page .midz-project-gallery-stack .midz-project-gallery-stack-title span,
html[lang="ar"][dir="rtl"] body.midz-project-page .midz-project-gallery-stack .midz-project-gallery-stack-title em,
html[lang="ar"][dir="rtl"] body.midz-project-page .midz-project-gallery-stack .midz-project-gallery-stack-title .word,
html[lang="ar"][dir="rtl"] body.midz-project-page .midz-project-gallery-stack .midz-project-gallery-stack-title .char,
html[lang="ar"][dir="rtl"] body.midz-project-page .midz-project-gallery-stack .midz-project-gallery-stack-title * {
  font-size: 12px !important;
  line-height: 1.5 !important;
  font-weight: 500 !important;
}

/* =========================================================
   2026-09-17 — Project gallery label typography match
   Make "معرض المشروع" use exactly the same Arabic typography
   as the "عن المشروع" section label. Spacing is left intact.
   ========================================================= */
html[lang="ar"][dir="rtl"] body.midz-project-page .midz-project-text-block .midz-project-section-head .section-subtitle,
html[lang="ar"][dir="rtl"] body.midz-project-page .midz-project-text-block .midz-project-section-head .section-subtitle *,
html[lang="ar"][dir="rtl"] body.midz-project-page .midz-project-gallery-stack .midz-project-section-head .section-subtitle,
html[lang="ar"][dir="rtl"] body.midz-project-page .midz-project-gallery-stack .midz-project-section-head .section-subtitle * {
  font-family: var(--midz-arabic-font, "Cairo", Tahoma, Arial, sans-serif) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.55 !important;
  font-style: normal !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* =========================================================
   2026-09-18 — Requested Arabic projects/service-work alignment
   1) /ar/projects.php: make "مشاريع مميزة" match the Arabic
      home featured-projects heading exactly on laptop + mobile.
   2) /ar/service/...: center ONLY the selected-work intro block
      (kicker + title + description) on every service detail page.
   ========================================================= */

/* PROJECTS ARCHIVE — exact home featured heading typography. */
html[lang="ar"][dir="rtl"] body.projects-page .feature-sec .section-header.section-header2 .section-title2,
html[lang="ar"][dir="rtl"] body.projects-page .feature-sec .section-header.section-header2 .section-title2 span,
html[lang="ar"][dir="rtl"] body.projects-page .feature-sec .section-header.section-header2 .section-title2 em,
html[lang="ar"][dir="rtl"] body.projects-page .feature-sec .section-header.section-header2 .section-title2 .word,
html[lang="ar"][dir="rtl"] body.projects-page .feature-sec .section-header.section-header2 .section-title2 .char {
  font-family: var(--midz-arabic-font, "Cairo", Tahoma, Arial, sans-serif) !important;
  font-size: 66px !important;
  line-height: 110px !important;
  font-weight: 600 !important;
  font-style: normal !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-align: center !important;
}

html[lang="ar"][dir="rtl"] body.projects-page .feature-sec .section-header.section-header2 .section-title2 {
  width: 100% !important;
  max-width: 1200px !important;
  padding: 7px !important;
  margin: -7px auto !important;
}

@media (max-width: 991px) {
  html[lang="ar"][dir="rtl"] body.projects-page .feature-sec .section-header.section-header2 .section-title2,
  html[lang="ar"][dir="rtl"] body.projects-page .feature-sec .section-header.section-header2 .section-title2 span,
  html[lang="ar"][dir="rtl"] body.projects-page .feature-sec .section-header.section-header2 .section-title2 em,
  html[lang="ar"][dir="rtl"] body.projects-page .feature-sec .section-header.section-header2 .section-title2 .word,
  html[lang="ar"][dir="rtl"] body.projects-page .feature-sec .section-header.section-header2 .section-title2 .char {
    font-size: clamp(28px, 7vw, 40px) !important;
    line-height: 1.12 !important;
  }
}

/* SERVICE DETAILS — center only the selected-work heading block. */
html[lang="ar"][dir="rtl"] body.service-single-page .midz-service-work-sec .section-header.section-header2 {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

html[lang="ar"][dir="rtl"] body.service-single-page .midz-service-work-sec .section-header.section-header2 .section-subtitle {
  width: auto !important;
  max-width: 100% !important;
  align-self: center !important;
  align-items: center !important;
  justify-content: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

html[lang="ar"][dir="rtl"] body.service-single-page .midz-service-work-sec .section-header.section-header2 .section-title2 {
  width: 100% !important;
  max-width: 1200px !important;
  align-self: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

html[lang="ar"][dir="rtl"] body.service-single-page .midz-service-work-sec .section-header.section-header2 .section-desc {
  display: block !important;
  width: min(100%, 1120px) !important;
  max-width: 1120px !important;
  align-self: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  direction: rtl !important;
  text-align: center !important;
  unicode-bidi: plaintext !important;
  white-space: normal !important;
  overflow: visible !important;
}

@media (max-width: 991px) {
  html[lang="ar"][dir="rtl"] body.service-single-page .midz-service-work-sec .section-header.section-header2,
  html[lang="ar"][dir="rtl"] body.service-single-page .midz-service-work-sec .section-header.section-header2 .section-title2,
  html[lang="ar"][dir="rtl"] body.service-single-page .midz-service-work-sec .section-header.section-header2 .section-desc {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }
}