/* MIDZ Arabic typography system — final Arabic-only scale
 * Goal: calmer, lighter, more proportional Arabic typography across desktop/mobile.
 * Loaded last for Arabic pages only so earlier page-specific !important rules do not re-enlarge text.
 */

html[lang="ar"][dir="rtl"] {
  --midz-ar-body: clamp(14px, .92vw, 16px);
  --midz-ar-small: clamp(12px, .78vw, 14px);
  --midz-ar-label: clamp(13px, .82vw, 14px);
  --midz-ar-h1: clamp(38px, 4.35vw, 58px);
  --midz-ar-h2: clamp(30px, 3.25vw, 44px);
  --midz-ar-h3: clamp(22px, 2.15vw, 30px);
  --midz-ar-h4: clamp(18px, 1.55vw, 24px);
  --midz-ar-display: clamp(48px, 5.6vw, 72px);
  --midz-ar-display-lg: clamp(54px, 6.2vw, 78px);
}

html[lang="ar"][dir="rtl"] body {
  font-family: var(--midz-arabic-font, "Cairo", Tahoma, Arial, sans-serif) !important;
  font-size: var(--midz-ar-body);
  font-weight: 400 !important;
  line-height: 1.78;
}

/* Keep Arabic visually lighter than the English display treatment. */
html[lang="ar"][dir="rtl"] body :where(h1, h2, h3, h4, h5, h6, .section-title, .section-title2, .title) {
  font-family: var(--midz-arabic-font, "Cairo", Tahoma, Arial, sans-serif) !important;
  font-style: normal !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

html[lang="ar"][dir="rtl"] body :where(strong, b) {
  font-weight: 600 !important;
}

/* Global proportional heading scale. */
html[lang="ar"][dir="rtl"] body h1 {
  font-size: var(--midz-ar-h1) !important;
  line-height: 1.2 !important;
}

html[lang="ar"][dir="rtl"] body h2 {
  font-size: var(--midz-ar-h2) !important;
  line-height: 1.28 !important;
}

html[lang="ar"][dir="rtl"] body h3 {
  font-size: var(--midz-ar-h3) !important;
  line-height: 1.38 !important;
}

html[lang="ar"][dir="rtl"] body h4 {
  font-size: var(--midz-ar-h4) !important;
  line-height: 1.42 !important;
}

html[lang="ar"][dir="rtl"] body h5 {
  font-size: clamp(16px, 1.15vw, 19px) !important;
  line-height: 1.48 !important;
}

html[lang="ar"][dir="rtl"] body h6 {
  font-size: clamp(14px, .98vw, 17px) !important;
  line-height: 1.5 !important;
}

/* Body copy: readable, smaller, and consistent across all pages. */
html[lang="ar"][dir="rtl"] body :where(
  p,
  .section-desc,
  .midz-page-hero-lead,
  .midz-services-copy > p,
  .midz-service-single-copy > p,
  .about-page-paragraph,
  .about-values-text,
  .midz-project-about-text,
  .midz-project-text-block,
  .midz-project-cta-copy,
  .midz-service-card-copy,
  .midz-service-journey-copy,
  .midz-service-tool-copy,
  .service-feature-description,
  .contact-lead,
  .midz-regional-modal__lead
) {
  font-family: var(--midz-arabic-font, "Cairo", Tahoma, Arial, sans-serif) !important;
  font-size: var(--midz-ar-body) !important;
  font-weight: 400 !important;
  line-height: 1.8 !important;
  letter-spacing: 0 !important;
}

/* Small UI typography. */
html[lang="ar"][dir="rtl"] body :where(
  .section-subtitle,
  .midz-hero-section-subtitle,
  .midz-project-hero-subtitle,
  .midz-project-deliverables-label,
  .midz-project-nav-label,
  .hover_mouse-label,
  small
) {
  font-size: var(--midz-ar-small) !important;
  font-weight: 500 !important;
  line-height: 1.55 !important;
}

html[lang="ar"][dir="rtl"] body :where(
  a,
  button,
  .theme-btn,
  .midz-language-switch,
  input,
  textarea,
  select,
  label
) {
  font-family: var(--midz-arabic-font, "Cairo", Tahoma, Arial, sans-serif) !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
}

html[lang="ar"][dir="rtl"] body :where(input, textarea, select, label) {
  font-size: var(--midz-ar-label) !important;
}

html[lang="ar"][dir="rtl"] .header-menu-wrap .navbar .menu li a,
html[lang="ar"][dir="rtl"] .header-sidebar-wrap .sidebar-menu a,
html[lang="ar"][dir="rtl"] .footer-area a,
html[lang="ar"][dir="rtl"] .footer-area button {
  font-size: clamp(13px, .9vw, 15px) !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
}

/* Primary hero/display titles — reduced from the previous Arabic oversized rules. */
html[lang="ar"][dir="rtl"] body.home-page .hero-sec .hero-bottom h2 {
  font-size: var(--midz-ar-display-lg) !important;
  line-height: 1.18 !important;
  font-weight: 500 !important;
}

html[lang="ar"][dir="rtl"] body :where(.midz-page-hero-copy h1, .midz-services-copy h1, .midz-service-single-copy h1) {
  font-size: var(--midz-ar-h1) !important;
  line-height: 1.22 !important;
  font-weight: 500 !important;
}

html[lang="ar"][dir="rtl"] body.projects-page .midz-page-hero-copy h1 {
  font-size: clamp(36px, 4vw, 52px) !important;
  line-height: 1.22 !important;
}

html[lang="ar"][dir="rtl"] body.contact-page .midz-page-hero-copy h1,
html[lang="ar"][dir="rtl"] body.about-page .midz-page-hero-copy h1 {
  font-size: clamp(38px, 4.25vw, 56px) !important;
  line-height: 1.22 !important;
  white-space: normal !important;
}

html[lang="ar"][dir="rtl"] body.midz-project-page .midz-project-hero-title,
html[lang="ar"][dir="rtl"] body.midz-project-page .midz-project-hero-title.has-arabic,
html[lang="ar"][dir="rtl"] body.midz-project-page .midz-project-hero-title.is-mixed-script-title {
  font-size: clamp(26px, 2.65vw, 36px) !important;
  line-height: 1.4 !important;
  font-weight: 500 !important;
}

/* Large section titles keep hierarchy without looking heavy. */
html[lang="ar"][dir="rtl"] body .section-header .section-title {
  font-size: clamp(30px, 3vw, 42px) !important;
  line-height: 1.3 !important;
  font-weight: 500 !important;
}

html[lang="ar"][dir="rtl"] body .section-title.section-title2,
html[lang="ar"][dir="rtl"] body .section-title2,
html[lang="ar"][dir="rtl"] body .section-title2 :where(span, em) {
  font-size: clamp(42px, 5vw, 66px) !important;
  line-height: 1.2 !important;
  font-weight: 500 !important;
  font-style: normal !important;
}

html[lang="ar"][dir="rtl"] body :where(
  .about-page-heading,
  .midz-services-heading h2,
  .midz-project-related-title,
  .midz-project-cta-title,
  .midz-project-gallery-stack-title
) {
  font-size: clamp(28px, 2.8vw, 40px) !important;
  line-height: 1.35 !important;
  font-weight: 500 !important;
}

html[lang="ar"][dir="rtl"] body .awards-sec .awards-inner h4 {
  font-size: clamp(22px, 2.15vw, 32px) !important;
  line-height: 1.45 !important;
  font-weight: 500 !important;
}

/* Card and navigation titles. */
html[lang="ar"][dir="rtl"] body :where(
  .midz-service-card .title,
  .midz-service-card h3,
  .midz-project-nav-title,
  .faq-question-text,
  .midz-regional-modal__title
) {
  font-size: clamp(16px, 1vw, 24px) !important;
  line-height: 1.5 !important;
  font-weight: 500 !important;
}

/* Mobile: keep the same hierarchy, just one step smaller and calmer. */
@media (max-width: 767px) {
  html[lang="ar"][dir="rtl"] {
    --midz-ar-body: 14px;
    --midz-ar-small: 11.5px;
    --midz-ar-label: 13px;
    --midz-ar-h1: clamp(30px, 8.6vw, 40px);
    --midz-ar-h2: clamp(25px, 7vw, 32px);
    --midz-ar-h3: clamp(20px, 5.7vw, 26px);
    --midz-ar-h4: clamp(17px, 4.8vw, 22px);
    --midz-ar-display: clamp(34px, 10vw, 46px);
    --midz-ar-display-lg: clamp(36px, 10.8vw, 50px);
  }

  html[lang="ar"][dir="rtl"] body {
    line-height: 1.75;
  }

  html[lang="ar"][dir="rtl"] body.home-page .hero-sec .hero-bottom h2 {
    font-size: var(--midz-ar-display-lg) !important;
    line-height: 1.22 !important;
  }

  html[lang="ar"][dir="rtl"] body.projects-page .midz-page-hero-copy h1,
  html[lang="ar"][dir="rtl"] body.contact-page .midz-page-hero-copy h1,
  html[lang="ar"][dir="rtl"] body.about-page .midz-page-hero-copy h1 {
    font-size: clamp(30px, 8.9vw, 40px) !important;
    line-height: 1.26 !important;
    white-space: normal !important;
  }

  html[lang="ar"][dir="rtl"] body.midz-project-page .midz-project-hero-title,
  html[lang="ar"][dir="rtl"] body.midz-project-page .midz-project-hero-title.has-arabic,
  html[lang="ar"][dir="rtl"] body.midz-project-page .midz-project-hero-title.is-mixed-script-title {
    font-size: clamp(22px, 6.4vw, 28px) !important;
    line-height: 1.48 !important;
  }

  html[lang="ar"][dir="rtl"] body .section-header .section-title {
    font-size: clamp(25px, 7.2vw, 32px) !important;
    line-height: 1.38 !important;
  }

  html[lang="ar"][dir="rtl"] body .section-title.section-title2,
  html[lang="ar"][dir="rtl"] body .section-title2,
  html[lang="ar"][dir="rtl"] body .section-title2 :where(span, em) {
    font-size: clamp(32px, 9.2vw, 44px) !important;
    line-height: 1.28 !important;
  }

  html[lang="ar"][dir="rtl"] body :where(
    .about-page-heading,
    .midz-services-heading h2,
    .midz-project-related-title,
    .midz-project-cta-title,
    .midz-project-gallery-stack-title
  ) {
    font-size: clamp(23px, 6.7vw, 30px) !important;
    line-height: 1.42 !important;
  }

  html[lang="ar"][dir="rtl"] .header-sidebar-wrap .sidebar-menu a {
    font-size: 14px !important;
  }
}

/* Tablet/laptop midpoint: prevent Arabic from jumping too large between breakpoints. */
@media (min-width: 768px) and (max-width: 1199px) {
  html[lang="ar"][dir="rtl"] {
    --midz-ar-body: 15px;
    --midz-ar-h1: clamp(34px, 4.7vw, 48px);
    --midz-ar-h2: clamp(28px, 3.8vw, 38px);
    --midz-ar-h3: clamp(21px, 2.7vw, 27px);
    --midz-ar-display-lg: clamp(46px, 6.4vw, 62px);
  }
}


/* =========================================================
   HOME ARABIC — About / Values / Services final alignment
   This uses the explicit .home-about-sec hook because :first-of-type
   does not match this section (Hero/Projects sections come before it).
   Keep all three content groups on one RTL axis on every viewport.
   ========================================================= */
html[lang="ar"][dir="rtl"] body.home-page .home-about-sec .section-header {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  width: 100% !important;
  margin-inline: 0 !important;
  text-align: right !important;
}

html[lang="ar"][dir="rtl"] body.home-page .home-about-sec .section-header > .section-subtitle {
  align-self: flex-start !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding-inline: 0 !important;
  direction: rtl !important;
  text-align: right !important;
  justify-content: flex-start !important;
}

html[lang="ar"][dir="rtl"] body.home-page .home-about-sec .section-header .right {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  align-self: flex-start !important;
  direction: rtl !important;
  text-align: right !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding: 0 !important;
}

html[lang="ar"][dir="rtl"] body.home-page .home-about-sec .about-values-intro,
html[lang="ar"][dir="rtl"] body.home-page .home-about-sec .about-services-intro {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !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.home-page .home-about-sec .about-values-intro .section-subtitle,
html[lang="ar"][dir="rtl"] body.home-page .home-about-sec .about-services-intro .section-subtitle {
  align-self: flex-start !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  direction: rtl !important;
  text-align: right !important;
  justify-content: flex-start !important;
}

html[lang="ar"][dir="rtl"] body.home-page .home-about-sec .section-header .right > .about-home-title,
html[lang="ar"][dir="rtl"] body.home-page .home-about-sec .about-values-text,
html[lang="ar"][dir="rtl"] body.home-page .home-about-sec .about-services-intro > .about-home-title {
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  direction: rtl !important;
  text-align: right !important;
  font-family: var(--midz-arabic-font, "Cairo", Tahoma, Arial, sans-serif) !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}

html[lang="ar"][dir="rtl"] body.home-page .home-about-sec .about-home-title :where(.word, .char),
html[lang="ar"][dir="rtl"] body.home-page .home-about-sec .about-values-text :where(.word, .char) {
  direction: rtl !important;
  text-align: inherit !important;
  font-family: inherit !important;
  font-weight: inherit !important;
  letter-spacing: inherit !important;
}

/* Laptop / desktop: reproduce the approved reference — copy column occupies
   roughly three quarters of the content area and is pinned to the right edge. */
@media (min-width: 992px) {
  html[lang="ar"][dir="rtl"] body.home-page .home-about-sec .section-header {
    gap: clamp(28px, 2vw, 38px) !important;
  }

  html[lang="ar"][dir="rtl"] body.home-page .home-about-sec .section-header .right {
    width: min(1320px, 76.5%) !important;
    max-width: 1320px !important;
    gap: clamp(46px, 3.4vw, 62px) !important;
  }

  html[lang="ar"][dir="rtl"] body.home-page .home-about-sec .about-values-intro,
  html[lang="ar"][dir="rtl"] body.home-page .home-about-sec .about-services-intro {
    gap: clamp(14px, 1.15vw, 20px) !important;
  }

  html[lang="ar"][dir="rtl"] body.home-page .home-about-sec .section-header .right > .about-home-title,
  html[lang="ar"][dir="rtl"] body.home-page .home-about-sec .about-values-text,
  html[lang="ar"][dir="rtl"] body.home-page .home-about-sec .about-services-intro > .about-home-title {
    font-size: 18px !important;
    line-height: 1.72 !important;
  }
}

/* Tablet + mobile: same axis, full available width, no centering/narrow column. */
@media (max-width: 991px) {
  html[lang="ar"][dir="rtl"] body.home-page .home-about-sec .section-header {
    gap: 18px !important;
  }

  html[lang="ar"][dir="rtl"] body.home-page .home-about-sec .section-header .right {
    width: 100% !important;
    max-width: none !important;
    gap: clamp(30px, 7vw, 42px) !important;
  }

  html[lang="ar"][dir="rtl"] body.home-page .home-about-sec .about-values-intro,
  html[lang="ar"][dir="rtl"] body.home-page .home-about-sec .about-services-intro {
    gap: 10px !important;
  }

  html[lang="ar"][dir="rtl"] body.home-page .home-about-sec .section-header .right > .about-home-title,
  html[lang="ar"][dir="rtl"] body.home-page .home-about-sec .about-values-text,
  html[lang="ar"][dir="rtl"] body.home-page .home-about-sec .about-services-intro > .about-home-title {
    font-size: clamp(14px, 3.75vw, 16px) !important;
    line-height: 1.8 !important;
  }
}

@media (max-width: 640px) {
  html[lang="ar"][dir="rtl"] body.home-page .home-about-sec {
    padding-top: 28px !important;
    padding-bottom: 28px !important;
  }

  html[lang="ar"][dir="rtl"] body.home-page .home-about-sec .custom-container {
    padding-inline: 18px !important;
  }
}


/* Home Arabic mini headings — requested +2/+3px hierarchy bump.
 * Applies to من نحن / قيمنا / خدماتنا only; body copy stays unchanged. */
html[lang="ar"][dir="rtl"] body.home-page .home-about-sec .section-subtitle {
  font-size: 16px !important;
  line-height: 1.55 !important;
  font-weight: 500 !important;
}

@media (min-width: 768px) and (max-width: 991px) {
  html[lang="ar"][dir="rtl"] body.home-page .home-about-sec .section-subtitle {
    font-size: 15px !important;
  }
}

@media (max-width: 767px) {
  html[lang="ar"][dir="rtl"] body.home-page .home-about-sec .section-subtitle {
    font-size: 14px !important;
    line-height: 1.6 !important;
  }
}