/* MIDZ home page — Arabic RTL layout pass
 * Rule: move/reorder UI for RTL; never mirror/replace images, videos or icons.
 * Loaded only on the Arabic home page, after the shared RTL layer.
 */

html[dir="rtl"] body.home-page {
  text-align: start;
}

/* Header / navigation: same assets, opposite flow. */
html[dir="rtl"] body.home-page .header-menu-wrap .custom-row,
html[dir="rtl"] body.home-page .header-menu-wrap .navbar .menu,
html[dir="rtl"] body.home-page .header-menu-wrap .header-right-info {
  direction: rtl;
}

html[dir="rtl"] body.home-page .header-menu-wrap .logo,
html[dir="rtl"] body.home-page .header-menu-wrap .navbar,
html[dir="rtl"] body.home-page .header-menu-wrap .header-right-info,
html[dir="rtl"] body.home-page .header-menu-wrap .midz-language-switch {
  text-align: start;
}

/* Hero: copy starts from the Arabic edge. Button contents move by RTL flow;
 * its arrow asset remains exactly as supplied. */
html[dir="rtl"] body.home-page .hero-sec .hero-bottom,
html[dir="rtl"] body.home-page .hero-sec .hero-bottom .left {
  direction: rtl;
  text-align: start !important;
}

html[dir="rtl"] body.home-page .hero-sec .hero-bottom .left {
  align-items: flex-start !important;
}

html[dir="rtl"] body.home-page .hero-sec .hero-bottom h2 {
  width: 100%;
  text-align: start !important;
  font-family: var(--midz-arabic-font) !important;
  font-weight: 600 !important;
  font-style: normal !important;
  letter-spacing: 0 !important;
  line-height: 1.2 !important;
}

html[dir="rtl"] body.home-page .hero-sec .hero-bottom .theme-btn {
  direction: rtl;
  text-align: start;
}

/* Featured projects: reverse information flow through direction only. The
 * project artwork stays untouched. */
html[dir="rtl"] body.home-page .feature-sec .section-header.section-header2,
html[dir="rtl"] body.home-page .feature-sec .section-header.section-header2 .section-title,
html[dir="rtl"] body.home-page .feature-sec .section-header.section-header2 .section-desc,
html[dir="rtl"] body.home-page .feature-project .feature-project-infos,
html[dir="rtl"] body.home-page .feature-project-info-box {
  direction: rtl;
  text-align: start !important;
}

html[dir="rtl"] body.home-page .feature-project-info-box {
  align-items: flex-start !important;
}

/* About / values / service intro: midz-home.css hard-codes left alignment for
 * English; neutralise it on the Arabic home page. */
html[dir="rtl"] body.home-page .about-sec:first-of-type .section-header,
html[dir="rtl"] body.home-page .about-sec:first-of-type .section-header .right,
html[dir="rtl"] body.home-page .about-sec:first-of-type .about-values-intro,
html[dir="rtl"] body.home-page .about-sec:first-of-type .about-services-intro,
html[dir="rtl"] body.home-page .about-sec .section-header .right .section-title.about-home-title,
html[dir="rtl"] body.home-page .about-sec .about-values-text,
html[dir="rtl"] body.home-page .about-sec .section-title .char,
html[dir="rtl"] body.home-page .about-sec .section-title .word,
html[dir="rtl"] body.home-page .about-sec .about-values-text .char,
html[dir="rtl"] body.home-page .about-sec .about-values-text .word {
  direction: rtl;
  text-align: start !important;
}

html[dir="rtl"] body.home-page .about-sec:first-of-type .section-header .right,
html[dir="rtl"] body.home-page .about-sec:first-of-type .about-values-intro,
html[dir="rtl"] body.home-page .about-sec:first-of-type .about-services-intro {
  align-items: flex-start !important;
}

/* Services: grid auto-placement follows RTL, so service/title becomes the
 * right column and the preview image becomes the left column. Icons themselves
 * are neither replaced nor flipped. */
html[dir="rtl"] body.home-page .service-sec .service-lists-header .custom-container,
html[dir="rtl"] body.home-page .service-sec .service-box .service-inner,
html[dir="rtl"] body.home-page .service-sec .service-header-th,
html[dir="rtl"] body.home-page .service-sec .service-box .title,
html[dir="rtl"] body.home-page .service-sec .service-feature-lists {
  direction: rtl;
  text-align: start !important;
}

html[dir="rtl"] body.home-page .service-sec .service-header-th,
html[dir="rtl"] body.home-page .service-sec .service-box .title {
  justify-content: flex-start;
}

/* Base theme physically anchors the service preview image with left:-20px.
 * Move the box to the mirrored side, but leave the image pixels unchanged. */
@media (min-width: 992px) {
  html[dir="rtl"] body.home-page .service-sec .service-box .service-inner .service-img-box img {
    left: auto !important;
    right: -20px !important;
  }
}

/* Fun facts: header/title and footer order follow Arabic flow. Overlay artwork
 * and angle icon remain exactly the same files/orientation. */
html[dir="rtl"] body.home-page .funfacts-wrap,
html[dir="rtl"] body.home-page .funfact-box,
html[dir="rtl"] body.home-page .funfact-box .funfact-header,
html[dir="rtl"] body.home-page .funfact-box .funfact-footer {
  direction: rtl;
}

html[dir="rtl"] body.home-page .funfact-box .funfact-header {
  justify-content: flex-end;
}

html[dir="rtl"] body.home-page .funfact-box .funfact-header .title {
  text-align: start !important;
}

/* Contact section: first source column is copy/form. RTL grid places it on the
 * right and the existing image on the left; no media transform is used. */
html[dir="rtl"] body.home-page .contact-sec .custom-row,
html[dir="rtl"] body.home-page .contact-sec .left,
html[dir="rtl"] body.home-page .contact-sec .contact-content,
html[dir="rtl"] body.home-page .contact-sec form {
  direction: rtl;
  text-align: start !important;
}

html[dir="rtl"] body.home-page .contact-sec input:not([type="email"]):not([type="tel"]):not([type="url"]),
html[dir="rtl"] body.home-page .contact-sec textarea,
html[dir="rtl"] body.home-page .contact-sec select {
  text-align: start !important;
}

/* Keep every home-page asset visually intact. We intentionally do not set
 * transform:none globally because some media uses non-directional animation.
 * The important part is that this RTL layer never adds scaleX/rotateY mirroring.
 */

@media (max-width: 991px) {
  html[dir="rtl"] body.home-page .hero-sec .hero-bottom,
  html[dir="rtl"] body.home-page .about-sec:first-of-type .section-header,
  html[dir="rtl"] body.home-page .about-sec:first-of-type .section-header .right,
  html[dir="rtl"] body.home-page .about-sec:first-of-type .about-values-intro,
  html[dir="rtl"] body.home-page .about-sec:first-of-type .about-services-intro {
    align-items: flex-start !important;
    text-align: start !important;
  }

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

/* =========================================================
   Arabic home polish pass — 2026-08-31
   ========================================================= */

/* Featured-project heading: do not let the English Arapey/italic treatment
   leak into Arabic. Use the clean Arabic text face only. */
html[lang="ar"][dir="rtl"] body.home-page .feature-sec .section-header.section-header2 .section-title2,
html[lang="ar"][dir="rtl"] body.home-page .feature-sec .section-header.section-header2 .section-title2 em,
html[lang="ar"][dir="rtl"] body.home-page .feature-sec .section-header.section-header2 .section-title2 span {
  font-family: var(--midz-arabic-font) !important;
  font-style: normal !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* Hero CTA: keep the Arabic title aligned to the right, but detach the CTA
   from that text edge and bring it toward the visual center. */
html[lang="ar"][dir="rtl"] body.home-page .hero-sec .hero-bottom .theme-btn {
  align-self: center !important;
  margin-inline: auto !important;
}

@media (min-width: 992px) {
  html[lang="ar"][dir="rtl"] body.home-page .hero-sec .hero-bottom .theme-btn {
    margin-top: clamp(30px, 4.5vh, 52px) !important;
  }
}

@media (min-width: 641px) and (max-width: 991px) {
  html[lang="ar"][dir="rtl"] body.home-page .hero-sec .hero-bottom .theme-btn {
    margin-top: 30px !important;
  }
}

@media (max-width: 640px) {
  html[lang="ar"][dir="rtl"] body.home-page .hero-sec .hero-bottom .theme-btn {
    margin-top: 26px !important;
  }
}

/* Featured projects — mobile stability
 * IMPORTANT: locale must never change scroll mechanics. All sticky positioning,
 * heights, gaps, image sizing and stacking come exclusively from the shared
 * English/base styles. Arabic changes only text flow/alignment.
 */
@media (max-width: 767px) {
  html[lang="ar"][dir="rtl"] body.home-page .feature-sec .feature-project .feature-project-infos,
  html[lang="ar"][dir="rtl"] body.home-page .feature-sec .feature-project-info-box {
    direction: rtl;
    text-align: start !important;
  }
}