/* MIDZ Arabic user-final layer — 2026-09-12
 * Loaded last. Keeps RTL direction; only fixes requested spacing/scale/alignment.
 */

/* About hero: remove the dark shadow/black halo below the floating artwork. */
html[lang="ar"][dir="rtl"] body.about-page.services-page .midz-services-hero-shape {
  filter: none !important;
  box-shadow: none !important;
}

/* Home About / Values / Services: keep title then description, slightly smaller body copy. */
html[lang="ar"][dir="rtl"] body.home-page .home-about-sec .home-about-row {
  grid-template-columns: minmax(0, 1fr) !important;
  direction: rtl !important;
  text-align: right !important;
}
html[lang="ar"][dir="rtl"] body.home-page .home-about-sec .home-about-row > .section-subtitle,
html[lang="ar"][dir="rtl"] body.home-page .home-about-sec .home-about-row > .home-about-copy {
  grid-column: 1 !important;
  width: 100% !important;
  max-width: 100% !important;
  direction: rtl !important;
  text-align: right !important;
}
html[lang="ar"][dir="rtl"] body.home-page .home-about-sec .home-about-row > .home-about-copy {
  font-size: 15px !important;
  line-height: 1.82 !important;
  font-weight: 400 !important;
}
@media (max-width: 991px) {
  html[lang="ar"][dir="rtl"] body.home-page .home-about-sec .home-about-row > .home-about-copy {
    font-size: 13.5px !important;
    line-height: 1.88 !important;
  }
}

/* Fun facts on every Arabic page: labels always sit on the physical right, laptop + phone. */
html[lang="ar"][dir="rtl"] body .funfact-box,
html[lang="ar"][dir="rtl"] body .funfact-box .funfact-header,
html[lang="ar"][dir="rtl"] body .funfact-box .funfact-footer {
  direction: rtl !important;
  text-align: right !important;
}
html[lang="ar"][dir="rtl"] body .funfact-box .funfact-header {
  display: flex !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
  width: 100% !important;
}
html[lang="ar"][dir="rtl"] body .funfact-box .funfact-header .title {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  direction: rtl !important;
  text-align: right !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

/* About process: Arabic labels were too large on laptop. */
html[lang="ar"][dir="rtl"] body.about-page .awards-sec .awards-box .awards-inner h4 {
  font-family: var(--midz-arabic-font, "Cairo", Tahoma, Arial, sans-serif) !important;
  font-size: clamp(24px, 2.15vw, 34px) !important;
  line-height: 1.45 !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  direction: rtl !important;
  text-align: right !important;
}
@media (max-width: 991px) {
  html[lang="ar"][dir="rtl"] body.about-page .awards-sec .awards-box .awards-inner h4 {
    font-size: clamp(18px, 4.9vw, 24px) !important;
    line-height: 1.55 !important;
  }
}

/* FAQ on every Arabic page: calmer scale on laptop and mobile. */
html[lang="ar"][dir="rtl"] body .faq-sec .section-header .section-title {
  font-family: var(--midz-arabic-font, "Cairo", Tahoma, Arial, sans-serif) !important;
  font-size: clamp(30px, 3.1vw, 42px) !important;
  line-height: 1.35 !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
}
html[lang="ar"][dir="rtl"] body .faq-item .accordion-header button {
  font-family: var(--midz-arabic-font, "Cairo", Tahoma, Arial, sans-serif) !important;
  font-size: clamp(15px, 1.15vw, 17px) !important;
  line-height: 1.7 !important;
  font-weight: 400 !important;
  font-style: normal !important;
  direction: rtl !important;
  text-align: right !important;
}
html[lang="ar"][dir="rtl"] body .faq-item .accordion-body p {
  font-family: var(--midz-arabic-font, "Cairo", Tahoma, Arial, sans-serif) !important;
  font-size: clamp(13px, 1vw, 15px) !important;
  line-height: 1.9 !important;
  font-weight: 400 !important;
  direction: rtl !important;
  text-align: right !important;
}
html[lang="ar"][dir="rtl"] body .faq-sec .faq-bottom p {
  font-family: var(--midz-arabic-font, "Cairo", Tahoma, Arial, sans-serif) !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
  font-style: normal !important;
}
html[lang="ar"][dir="rtl"] body .faq-sec .faq-bottom .theme-btn {
  font-size: 12px !important;
}
@media (max-width: 767px) {
  html[lang="ar"][dir="rtl"] body .faq-sec .section-header .section-title {
    font-size: clamp(25px, 7vw, 31px) !important;
  }
  html[lang="ar"][dir="rtl"] body .faq-item .accordion-header button {
    font-size: 14px !important;
  }
  html[lang="ar"][dir="rtl"] body .faq-item .accordion-body p,
  html[lang="ar"][dir="rtl"] body .faq-sec .faq-bottom p {
    font-size: 13px !important;
  }
}

/* About hero — user final refinement (2026-09-12):
   Arabic only. Keep the existing layout, make the red artwork a little smaller
   on laptop/desktop, and promote the editable hero description after hiding
   the redundant "من نحن" title from CMS data. */
@media (min-width: 992px) {
  html[lang="ar"][dir="rtl"] body.about-page.services-page .midz-services-hero-shape {
    width: clamp(200px, 26vw, 380px) !important;
    max-width: 38% !important;
  }

  html[lang="ar"][dir="rtl"] body.about-page.services-page .midz-services-copy > p:not(.midz-services-lead-spacer) {
    max-width: 760px !important;
    font-size: clamp(20px, 1.6vw, 24px) !important;
    line-height: 1.8 !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    direction: rtl !important;
    text-align: right !important;
  }
}

@media (max-width: 991px) {
  html[lang="ar"][dir="rtl"] body.about-page.services-page .midz-services-copy > p:not(.midz-services-lead-spacer) {
    font-size: clamp(17px, 4.6vw, 20px) !important;
    line-height: 1.85 !important;
    font-weight: 400 !important;
    direction: rtl !important;
    text-align: right !important;
  }
}
/* ABOUT HERO CLEAN NO-ARTWORK — 2026-09-12 */
/* ABOUT HERO CLEAN NO-ARTWORK — 2026-09-12 */
/* Arabic About only: no red artwork. The editable intro becomes the hero focus. */
html[lang="ar"][dir="rtl"] body.about-page.services-page .midz-services-hero--no-shape .midz-services-hero-shape {
  display: none !important;
}

html[lang="ar"][dir="rtl"] body.about-page.services-page .midz-services-hero--no-shape .midz-services-hero-inner {
  display: block !important;
  min-height: auto !important;
  padding-bottom: clamp(18px, 2.2vw, 30px) !important;
}

html[lang="ar"][dir="rtl"] body.about-page.services-page .midz-services-hero--no-shape .midz-services-hero-content {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  direction: rtl !important;
  text-align: right !important;
}

html[lang="ar"][dir="rtl"] body.about-page.services-page .midz-services-hero--no-shape .midz-services-copy {
  width: 100% !important;
  max-width: none !important;
  direction: rtl !important;
  text-align: right !important;
}

html[lang="ar"][dir="rtl"] body.about-page.services-page .midz-services-hero--no-shape .midz-services-copy > p:not(.midz-services-lead-spacer) {
  width: 100% !important;
  max-width: 1220px !important;
  margin: 0 0 0 auto !important;
  font-family: var(--midz-arabic-font, "Cairo", Tahoma, Arial, sans-serif) !important;
  font-size: clamp(18px, 1.3vw, 27px) !important;
  line-height: 1.72 !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  direction: rtl !important;
  text-align: right !important;
}

html[lang="ar"][dir="rtl"] body.about-page.services-page .midz-services-hero--no-shape .midz-services-actions {
  display: flex !important;
  width: 100% !important;
  justify-content: flex-start !important;
  align-items: center !important;
  margin: clamp(28px, 2.6vw, 40px) 0 0 !important;
  padding: 0 !important;
  direction: rtl !important;
}

html[lang="ar"][dir="rtl"] body.about-page.services-page .midz-services-hero--no-shape .midz-services-actions .theme-btn {
  font-size: 13px !important;
  padding-top: 13px !important;
  padding-bottom: 13px !important;
}

/* About body: a small, proportional type lift only. */
html[lang="ar"][dir="rtl"] body.about-page.services-page .midz-about-archive .about-page-paragraph {
  font-size: 18px !important;
  line-height: 1.88 !important;
}

html[lang="ar"][dir="rtl"] body.about-page.services-page .midz-about-archive .about-values-text {
  font-size: 17px !important;
  line-height: 1.9 !important;
}

html[lang="ar"][dir="rtl"] body.about-page.services-page .midz-about-archive .section-subtitle,
html[lang="ar"][dir="rtl"] body.about-page.services-page .service-sec-2 .about-values-header .section-subtitle {
  font-size: 15px !important;
  line-height: 1.6 !important;
  font-weight: 500 !important;
}

html[lang="ar"][dir="rtl"] body.about-page.services-page .about-sec--page .funfact-box .funfact-header .title {
  font-size: 21px !important;
  line-height: 1.55 !important;
  font-weight: 400 !important;
}

html[lang="ar"][dir="rtl"] body.about-page.services-page .about-sec--page .funfact-box .funfact-footer .number {
  font-size: 68px !important;
  line-height: 1 !important;
}
html[lang="ar"][dir="rtl"] body.about-page.services-page .about-sec--page .funfact-box .funfact-footer .number span {
  font-size: 42px !important;
}

@media (max-width: 991px) {
  html[lang="ar"][dir="rtl"] body.about-page.services-page .midz-services-hero--no-shape .midz-services-hero-inner {
    display: block !important;
    padding-bottom: 18px !important;
  }

  html[lang="ar"][dir="rtl"] body.about-page.services-page .midz-services-hero--no-shape .midz-services-copy > p:not(.midz-services-lead-spacer) {
    max-width: 100% !important;
    font-size: clamp(18px, 4.7vw, 21px) !important;
    line-height: 1.82 !important;
  }

  html[lang="ar"][dir="rtl"] body.about-page.services-page .midz-services-hero--no-shape .midz-services-actions {
    margin-top: 24px !important;
  }

  html[lang="ar"][dir="rtl"] body.about-page.services-page .midz-about-archive .about-page-paragraph,
  html[lang="ar"][dir="rtl"] body.about-page.services-page .midz-about-archive .about-values-text {
    font-size: 15px !important;
    line-height: 1.92 !important;
  }

  html[lang="ar"][dir="rtl"] body.about-page.services-page .midz-about-archive .section-subtitle,
  html[lang="ar"][dir="rtl"] body.about-page.services-page .service-sec-2 .about-values-header .section-subtitle {
    font-size: 14px !important;
  }

  html[lang="ar"][dir="rtl"] body.about-page.services-page .about-sec--page .funfact-box .funfact-header .title {
    font-size: 17px !important;
  }

  html[lang="ar"][dir="rtl"] body.about-page.services-page .about-sec--page .funfact-box .funfact-footer .number {
    font-size: 58px !important;
  }
  html[lang="ar"][dir="rtl"] body.about-page.services-page .about-sec--page .funfact-box .funfact-footer .number span {
    font-size: 36px !important;
  }
}

@media (max-width: 575px) {
  html[lang="ar"][dir="rtl"] body.about-page.services-page .midz-services-hero--no-shape .midz-services-copy > p:not(.midz-services-lead-spacer) {
    font-size: 18px !important;
    line-height: 1.85 !important;
  }
}

/* 2026-09-12 — About Arabic hero: laptop-only 5px top breathing room. */
@media (min-width: 992px) and (max-width: 1799px) {
  html[lang="ar"][dir="rtl"] body.about-page.services-page .midz-services-hero--no-shape .midz-services-copy > p:not(.midz-services-lead-spacer) {
    margin-top: 5px !important;
  }
}

/* Contact hero — Arabic laptop/desktop final breathing-room polish (2026-09-12).
   Keep phone/tablet untouched. Give the hero a little more vertical presence,
   lift the artwork away from the bottom divider, and remove any CSS shadow/filter. */
@media (min-width: 992px) {
  html[lang="ar"][dir="rtl"] body.contact-page .midz-page-hero {
    padding-bottom: calc(clamp(54px, 4.2vw, 68px) - 3px) !important;
  }

  html[lang="ar"][dir="rtl"] body.contact-page .midz-page-hero-inner {
    min-height: clamp(360px, 28vw, 430px) !important;
  }

  html[lang="ar"][dir="rtl"] body.contact-page .midz-page-hero-shape {
    top: 47% !important;
    bottom: auto !important;
    width: clamp(300px, 29vw, 430px) !important;
    max-width: 42% !important;
    background: transparent !important;
    box-shadow: none !important;
    filter: none !important;
    -webkit-filter: none !important;
    mix-blend-mode: normal !important;
    opacity: 1 !important;
  }
}

/* 2026-09-16 — /ar/about.php body typography matches Home About/Values/Services exactly.
   Scope: About archive copy only. Hero, form, funfacts and all other pages stay unchanged. */
html[lang="ar"][dir="rtl"] body.about-page.services-page .midz-about-archive .about-page-paragraph,
html[lang="ar"][dir="rtl"] body.about-page.services-page .midz-about-archive .about-values-text {
  font-family: var(--midz-arabic-font, "Cairo", Tahoma, Arial, sans-serif) !important;
  font-size: 15px !important;
  line-height: 1.82 !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  font-style: normal !important;
  direction: rtl !important;
  text-align: right !important;
}

html[lang="ar"][dir="rtl"] body.about-page.services-page .midz-about-archive .section-subtitle {
  font-family: var(--midz-arabic-font, "Cairo", Tahoma, Arial, sans-serif) !important;
  font-size: 16px !important;
  line-height: 1.55 !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  direction: rtl !important;
  text-align: right !important;
}

/* 2026-09-17 — Arabic About copy uses the full available row width.
   Scope is limited to the requested body copy; headings and artwork are untouched. */
html[lang="ar"][dir="rtl"] body.about-page.services-page .midz-about-archive .about-page-copy,
html[lang="ar"][dir="rtl"] body.about-page.services-page .midz-about-archive .about-values-intro {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
}

html[lang="ar"][dir="rtl"] body.about-page.services-page .midz-about-archive .about-page-paragraph,
html[lang="ar"][dir="rtl"] body.about-page.services-page .midz-about-archive .about-values-text {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  direction: rtl !important;
  text-align: right !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  unicode-bidi: plaintext;
}

/* 2026-09-17 — Arabic Services archive typography matches About/Values.
   The hero is intentionally excluded; only the second "خدماتنا" section is scoped. */
html[lang="ar"][dir="rtl"] body.services-page:not(.about-page) .midz-services-archive .midz-services-heading .section-subtitle {
  font-family: var(--midz-arabic-font, "Cairo", Tahoma, Arial, sans-serif) !important;
  font-size: 16px !important;
  line-height: 1.55 !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  direction: rtl !important;
  text-align: right !important;
}

html[lang="ar"][dir="rtl"] body.services-page:not(.about-page) .midz-services-archive .midz-services-heading h2 {
  width: 100% !important;
  max-width: none !important;
  font-family: var(--midz-arabic-font, "Cairo", Tahoma, Arial, sans-serif) !important;
  font-size: 15px !important;
  line-height: 1.82 !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  font-style: normal !important;
  direction: rtl !important;
  text-align: right !important;
}

/* Services CTA — centered stack on laptop and mobile. */
html[lang="ar"][dir="rtl"] body.services-page:not(.about-page) .midz-services-archive .midz-services-cta {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 18px !important;
  text-align: center !important;
}

html[lang="ar"][dir="rtl"] body.services-page:not(.about-page) .midz-services-archive .midz-services-cta > div {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
}

html[lang="ar"][dir="rtl"] body.services-page:not(.about-page) .midz-services-archive .midz-services-cta .midz-services-kicker,
html[lang="ar"][dir="rtl"] body.services-page:not(.about-page) .midz-services-archive .midz-services-cta h3 {
  margin-left: auto !important;
  margin-right: auto !important;
  direction: rtl !important;
  text-align: center !important;
}

html[lang="ar"][dir="rtl"] body.services-page:not(.about-page) .midz-services-archive .midz-services-cta h3 {
  max-width: 760px !important;
  font-family: var(--midz-arabic-font, "Cairo", Tahoma, Arial, sans-serif) !important;
  font-size: clamp(20px, 2vw, 28px) !important;
  line-height: 1.6 !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  font-style: normal !important;
}

html[lang="ar"][dir="rtl"] body.services-page:not(.about-page) .midz-services-archive .midz-services-cta .theme-btn {
  margin-left: auto !important;
  margin-right: auto !important;
  justify-content: center !important;
}

@media (max-width: 991px) {
  html[lang="ar"][dir="rtl"] body.about-page.services-page .midz-about-archive .about-page-paragraph,
  html[lang="ar"][dir="rtl"] body.about-page.services-page .midz-about-archive .about-values-text {
    font-size: 13.5px !important;
    line-height: 1.88 !important;
  }

  html[lang="ar"][dir="rtl"] body.about-page.services-page .midz-about-archive .section-subtitle {
    font-size: 14px !important;
    line-height: 1.6 !important;
  }

  html[lang="ar"][dir="rtl"] body.services-page:not(.about-page) .midz-services-archive .midz-services-heading .section-subtitle {
    font-size: 14px !important;
    line-height: 1.6 !important;
  }

  html[lang="ar"][dir="rtl"] body.services-page:not(.about-page) .midz-services-archive .midz-services-heading h2 {
    font-size: 13.5px !important;
    line-height: 1.88 !important;
  }

  html[lang="ar"][dir="rtl"] body.services-page:not(.about-page) .midz-services-archive .midz-services-cta {
    gap: 16px !important;
    padding: 26px 20px !important;
  }

  html[lang="ar"][dir="rtl"] body.services-page:not(.about-page) .midz-services-archive .midz-services-cta h3 {
    max-width: 520px !important;
    font-size: 14px !important;
    line-height: 1.7 !important;
    margin-top: 8px !important;
  }
}

/* 2026-09-16 — FINAL: simple Arabic contact email placeholder bidi + slight scale.
   No overlays/absolute labels. While empty, email placeholder is RTL/right-aligned;
   once the visitor types, the actual email value returns to LTR. */
html[lang="ar"][dir="rtl"] body .contact-sec:not(.contact-sec-2) .contact-form input[type="email"]:placeholder-shown {
  direction: rtl !important;
  unicode-bidi: plaintext !important;
  text-align: right !important;
  font-size: 14px !important;
}

html[lang="ar"][dir="rtl"] body .contact-sec:not(.contact-sec-2) .contact-form input[type="email"]::placeholder {
  direction: rtl !important;
  unicode-bidi: isolate !important;
  text-align: right !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
}

html[lang="ar"][dir="rtl"] body .contact-sec:not(.contact-sec-2) .contact-form input[type="email"]:not(:placeholder-shown) {
  direction: ltr !important;
  unicode-bidi: isolate !important;
  text-align: right !important;
}

@media (max-width: 991px) {
  html[lang="ar"][dir="rtl"] body .contact-sec:not(.contact-sec-2) .contact-form input[type="email"]:placeholder-shown,
  html[lang="ar"][dir="rtl"] body .contact-sec:not(.contact-sec-2) .contact-form input[type="email"]::placeholder {
    font-size: 15px !important;
    line-height: 1.5 !important;
  }
}

/* 2026-09-16 — About process: laptop/desktop only, one small step down in scale. */
@media (min-width: 992px) {
  html[lang="ar"][dir="rtl"] body.about-page .awards-sec .awards-box .awards-inner h4 {
    font-size: clamp(22px, 1.85vw, 30px) !important;
    line-height: 1.42 !important;
  }
}

/* 2026-09-16 — About Arabic desktop spacing only.
   User request: remove the empty band before the About copy and tighten the
   transition from the second About paragraph into "قيمنا". Typography is
   intentionally untouched; phone/tablet remain unchanged. */
@media (min-width: 992px) {
  html[lang="ar"][dir="rtl"] body.about-page.services-page .midz-services-hero--no-shape {
    padding-bottom: 0 !important;
  }

  html[lang="ar"][dir="rtl"] body.about-page.services-page .midz-services-hero--no-shape .midz-services-hero-inner {
    padding-bottom: 0 !important;
  }

  html[lang="ar"][dir="rtl"] body.about-page.services-page .midz-about-archive {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  html[lang="ar"][dir="rtl"] body.about-page.services-page .midz-about-archive .about-page-heading {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  html[lang="ar"][dir="rtl"] body.about-page.services-page .midz-about-archive .about-values-intro {
    margin-top: 0 !important;
  }
}

/* 2026-09-16 — Arabic sidebar social row alignment.
   Align the social icons' right edge with the Arabic navigation rail
   (Home / About / Services / Projects / Contact) on all breakpoints.
   English remains untouched. */
html[lang="ar"][dir="rtl"] .header-sidebar-wrap .header-sidebar-content .header-sidebar-bottom {
  padding-right: var(--midz-sidebar-rail) !important;
}

html[lang="ar"][dir="rtl"] .header-sidebar-wrap .header-sidebar-content .header-sidebar-bottom ul {
  direction: rtl !important;
  justify-content: flex-start !important;
}