/* MIDZ Arabic final polish — 2026-09-12
 * Final Arabic-only layout/typography layer. RTL direction stays unchanged.
 */

/* =========================================================
   1) HOME — About / Values / Services
   Same hierarchy as English: label first, description directly underneath.
   ========================================================= */
html[lang="ar"][dir="rtl"] 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(30px, 3vw, 46px) !important;
  direction: rtl !important;
  text-align: right !important;
}

html[lang="ar"][dir="rtl"] body.home-page .home-about-sec .home-about-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  row-gap: 10px !important;
  column-gap: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  direction: rtl !important;
  align-items: start !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;
  justify-self: stretch !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  direction: rtl !important;
  text-align: right !important;
}

html[lang="ar"][dir="rtl"] body.home-page .home-about-sec .home-about-row > .section-subtitle {
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center !important;
  width: max-content !important;
  max-width: 100% !important;
  justify-self: start !important;
  font-size: 16px !important;
  line-height: 1.55 !important;
  font-weight: 500 !important;
}

/* Requested: make only these three home descriptions a little smaller. */
html[lang="ar"][dir="rtl"] body.home-page .home-about-sec .home-about-row > .home-about-copy {
  display: block !important;
  font-family: var(--midz-arabic-font, "Cairo", Tahoma, Arial, sans-serif) !important;
  font-size: 16px !important;
  line-height: 1.78 !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  font-style: normal !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  transform: none !important;
}

html[lang="ar"][dir="rtl"] body.home-page .home-about-sec .home-about-copy .word,
html[lang="ar"][dir="rtl"] 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;
}

@media (min-width: 1440px) and (max-width: 1660px) {
  html[lang="ar"][dir="rtl"] 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) {
  html[lang="ar"][dir="rtl"] body.home-page .home-about-sec .home-about-grid {
    gap: 28px !important;
  }

  html[lang="ar"][dir="rtl"] body.home-page .home-about-sec .home-about-row {
    row-gap: 8px !important;
  }

  html[lang="ar"][dir="rtl"] body.home-page .home-about-sec .home-about-row > .home-about-copy {
    font-size: 14px !important;
    line-height: 1.82 !important;
  }

  html[lang="ar"][dir="rtl"] body.home-page .home-about-sec .home-about-row > .section-subtitle {
    font-size: 14px !important;
  }
}

/* =========================================================
   2) CONTACT — heading centered, Arabic copy/fields right aligned.
   ========================================================= */
html[lang="ar"][dir="rtl"] body .contact-sec .contact-content > h3 {
  width: 100% !important;
  text-align: right !important;
  direction: rtl !important;
}

html[lang="ar"][dir="rtl"] body .contact-sec .contact-content > p,
html[lang="ar"][dir="rtl"] body .contact-sec .contact-content > p .contact-lead {
  direction: rtl !important;
  text-align: right !important;
}

html[lang="ar"][dir="rtl"] body .contact-sec input[type="email"] {
  direction: ltr !important;
  text-align: right !important;
}

html[lang="ar"][dir="rtl"] body .contact-sec input[type="email"]::placeholder {
  direction: rtl !important;
  text-align: right !important;
}

html[lang="ar"][dir="rtl"] body .contact-sec input:not([type="email"]):not([type="tel"]):not([type="url"]),
html[lang="ar"][dir="rtl"] body .contact-sec textarea {
  direction: rtl !important;
  text-align: right !important;
}

/* =========================================================
   3) FUN FACTS — Arabic labels on the physical right on every page.
   Fixes the theme's width:min-content word stacking.
   ========================================================= */
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 {
  justify-content: flex-start !important;
  align-items: flex-start !important;
}

html[lang="ar"][dir="rtl"] body .funfact-box .funfact-header .title {
  display: block !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 72% !important;
  margin-left: auto !important;
  margin-right: 0 !important;
  direction: rtl !important;
  text-align: right !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

html[lang="ar"][dir="rtl"] body .funfact-box .funfact-header .title .word,
html[lang="ar"][dir="rtl"] body .funfact-box .funfact-header .title .char {
  display: inline !important;
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  text-align: inherit !important;
}

html[lang="ar"][dir="rtl"] body .funfact-box .funfact-footer .number {
  direction: ltr !important;
  unicode-bidi: isolate !important;
}

/* =========================================================
   4) ABOUT PAGE — calmer Arabic hero and readable body copy.
   ========================================================= */
html[lang="ar"][dir="rtl"] body.about-page.services-page .midz-services-hero {
  padding-top: clamp(108px, 8.5vw, 126px) !important;
  padding-bottom: clamp(34px, 4vw, 52px) !important;
}

html[lang="ar"][dir="rtl"] body.about-page.services-page .midz-services-copy {
  direction: rtl !important;
  text-align: right !important;
}

html[lang="ar"][dir="rtl"] body.about-page.services-page .midz-services-copy h1 {
  font-size: clamp(36px, 4vw, 52px) !important;
  line-height: 1.24 !important;
  font-weight: 500 !important;
  margin-bottom: 14px !important;
}

html[lang="ar"][dir="rtl"] body.about-page.services-page .midz-services-copy > p:not(.midz-services-lead-spacer) {
  max-width: 660px !important;
  margin: 0 0 0 auto !important;
  font-size: 15px !important;
  line-height: 1.85 !important;
  font-weight: 400 !important;
  direction: rtl !important;
  text-align: right !important;
}

html[lang="ar"][dir="rtl"] body.about-page.services-page .midz-about-archive .about-page-heading,
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-page-paragraph,
html[lang="ar"][dir="rtl"] body.about-page.services-page .midz-about-archive .about-values-intro,
html[lang="ar"][dir="rtl"] body.about-page.services-page .midz-about-archive .about-values-text {
  direction: rtl !important;
  text-align: right !important;
}

html[lang="ar"][dir="rtl"] body.about-page.services-page .midz-about-archive .about-page-paragraph {
  display: block !important;
  width: 100% !important;
  max-width: 1120px !important;
  margin: 0 0 14px auto !important;
  font-family: var(--midz-arabic-font, "Cairo", Tahoma, Arial, sans-serif) !important;
  font-size: 16px !important;
  line-height: 1.9 !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}

html[lang="ar"][dir="rtl"] body.about-page.services-page .midz-about-archive .about-values-intro {
  align-items: flex-start !important;
}

html[lang="ar"][dir="rtl"] body.about-page.services-page .midz-about-archive .about-values-intro .section-subtitle {
  justify-content: flex-start !important;
  margin-left: auto !important;
  margin-right: 0 !important;
}

html[lang="ar"][dir="rtl"] body.about-page.services-page .midz-about-archive .about-values-text {
  max-width: 1120px !important;
  margin-left: auto !important;
  margin-right: 0 !important;
  font-size: 15px !important;
  line-height: 1.9 !important;
}

@media (max-width: 991px) {
  html[lang="ar"][dir="rtl"] body.about-page.services-page .midz-services-hero {
    padding-top: 94px !important;
    padding-bottom: 34px !important;
  }

  html[lang="ar"][dir="rtl"] body.about-page.services-page .midz-services-copy h1 {
    font-size: clamp(30px, 8vw, 38px) !important;
    line-height: 1.3 !important;
  }

  html[lang="ar"][dir="rtl"] body.about-page.services-page .midz-services-copy > p:not(.midz-services-lead-spacer) {
    max-width: 100% !important;
    font-size: 14px !important;
    line-height: 1.85 !important;
  }

  html[lang="ar"][dir="rtl"] body.about-page.services-page .midz-about-archive .about-page-paragraph {
    max-width: 100% !important;
    margin-bottom: 12px !important;
    font-size: 14px !important;
    line-height: 1.9 !important;
  }

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

/* =========================================================
   5) HOME SERVICES — keep RTL direction; mirror English spacing/icon scale.
   ========================================================= */
html[lang="ar"][dir="rtl"] body.home-page .service-sec .service-box .service-inner,
html[lang="ar"][dir="rtl"] body.home-page .service-sec .service-box .title,
html[lang="ar"][dir="rtl"] body.home-page .service-sec .service-feature-lists {
  direction: rtl !important;
  text-align: right !important;
}

html[lang="ar"][dir="rtl"] body.home-page .service-sec .service-box .service-inner .title img {
  width: 26px !important;
  height: 26px !important;
  max-width: 26px !important;
  max-height: 26px !important;
  object-fit: contain !important;
  flex: 0 0 26px !important;
  transform: none !important;
}

@media (max-width: 1439px) {
  html[lang="ar"][dir="rtl"] body.home-page .service-sec .service-box .service-inner {
    padding-left: 0 !important;
    padding-right: 15px !important;
  }

  html[lang="ar"][dir="rtl"] body.home-page .service-sec .service-box .service-inner .title,
  html[lang="ar"][dir="rtl"] body.home-page .service-sec .service-box .service-inner .service-feature-lists {
    padding-left: 0 !important;
    padding-right: 20px !important;
  }
}

@media (max-width: 767px) {
  html[lang="ar"][dir="rtl"] body.home-page .service-sec .service-box .service-inner .title,
  html[lang="ar"][dir="rtl"] body.home-page .service-sec .service-box .service-inner .service-feature-lists {
    padding-left: 0 !important;
    padding-right: 22px !important;
  }
}


/* =========================================================
   CONTACT — Arabic field typography parity across all pages.
   Keep name/email/phone/message visually identical.
   ========================================================= */
html[lang="ar"][dir="rtl"] body .contact-sec:not(.contact-sec-2) .contact-form input,
html[lang="ar"][dir="rtl"] body .contact-sec:not(.contact-sec-2) .contact-form textarea {
  font-size: 15px !important;
  line-height: 1.6 !important;
  font-weight: 400 !important;
}

html[lang="ar"][dir="rtl"] body .contact-sec:not(.contact-sec-2) .contact-form input::placeholder,
html[lang="ar"][dir="rtl"] body .contact-sec:not(.contact-sec-2) .contact-form textarea::placeholder {
  font-family: inherit !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  font-weight: 400 !important;
  opacity: 1 !important;
}

/* Advanced contact page: top-level field labels use one consistent scale too. */
html[lang="ar"][dir="rtl"] body.contact-page .contact-form--advanced .input-group > label {
  font-size: 15px !important;
  line-height: 1.6 !important;
  font-weight: 400 !important;
}

@media (max-width: 991px) {
  /* Keep iOS inputs at 16px to avoid focus zoom, while preserving equal sizing. */
  html[lang="ar"][dir="rtl"] body .contact-sec:not(.contact-sec-2) .contact-form input,
  html[lang="ar"][dir="rtl"] body .contact-sec:not(.contact-sec-2) .contact-form textarea,
  html[lang="ar"][dir="rtl"] body .contact-sec:not(.contact-sec-2) .contact-form input::placeholder,
  html[lang="ar"][dir="rtl"] body .contact-sec:not(.contact-sec-2) .contact-form textarea::placeholder {
    font-size: 16px !important;
    line-height: 1.5 !important;
    font-weight: 400 !important;
  }

  html[lang="ar"][dir="rtl"] body.contact-page .contact-form--advanced .input-group > label {
    font-size: 15px !important;
  }
}