/* ANC mobile content alignment — center all content sections below the hero */
@media (max-width: 768px) {
  /* Keep hero alignment exactly as approved; center the content sections that follow it. */
  main > section:not(.ab-hero):not(.pj-hero):not(.bl-hero):not(.ct-hero):not(.hero),
  main > header:not(.hero) {
    text-align: center !important;
  }

  main > section:not(.ab-hero):not(.pj-hero):not(.bl-hero):not(.ct-hero):not(.hero) :is(
    .wide,.section-wrap,.container,.content,.section-inner,
    .ov-side,.ov-body,.metric,.div-body,.brand-body,.std-card,.ev-body,
    .card,.service-card,.product-card,.project-card,.feature-card,.info-card
  ) {
    text-align: center !important;
  }

  /* Section labels, headings and intro copy */
  main > section:not(.ab-hero):not(.pj-hero):not(.bl-hero):not(.ct-hero):not(.hero) :is(
    .eyebrow,.hero-eyebrow-u,.mono,.crumb,.section-label,
    .sec-title,.sec-lead,h2,h3,h4
  ) {
    text-align: center !important;
  }

  /* Mobile body copy: keep section/card copy centered unless a page-specific rule says otherwise. */
  html[lang="ar"] main > section:not(.ab-hero):not(.pj-hero):not(.bl-hero):not(.ct-hero):not(.hero) p {
    text-align: center !important;
    text-align-last: auto !important;
  }

  main > section:not(.ab-hero):not(.pj-hero):not(.bl-hero):not(.ct-hero):not(.hero) :is(
    .eyebrow,.note,.brand-name,.row,.ov-meta,.feature,.meta,.tag-row
  ) {
    justify-content: center !important;
  }

  /* About performance metrics */
  .metrics .wide > .mono,
  .metrics .wide > .bar {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }
  .metrics .metric,
  .metrics .metric .note,
  .metrics .metric .num,
  .metrics .metric .lbl {
    text-align: center !important;
    justify-content: center !important;
  }

  /* About standards / quality */
  .standards .eyebrow,
  .standards .sec-title,
  .standards .sec-lead,
  .standards .std-card,
  .standards .std-card h4,
  .standards .std-card p {
    text-align: center !important;
    justify-content: center !important;
  }
  .standards .std-card .ic {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Center decorative red bars under mobile section labels */
  main > section:not(.ab-hero):not(.pj-hero):not(.bl-hero):not(.ct-hero):not(.hero) > .wide > .bar,
  main > section:not(.ab-hero):not(.pj-hero):not(.bl-hero):not(.ct-hero):not(.hero) .section-wrap > .bar {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Keep form fields usable: labels may be centered, typed text follows page direction. */
  input, textarea, select { text-align: start !important; }
}

/* Mobile card descriptions: centered with consistent readable width */
@media (max-width: 768px) {
  .div-card .div-body > div:first-child > p,
  .service-card p,
  .product-card p,
  .project-card p,
  .feature-card p,
  .info-card p {
    width: 100% !important;
    max-width: 300px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    text-wrap: pretty;
  }
}

/* FINAL mobile alignment fixes — Arabic About page */
@media (max-width: 768px) {
  /* Long company overview copy: RTL, clean right alignment */
  html[lang="ar"] body[data-mobile-hero="about"] .overview .ov-body > p {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: right !important;
    direction: rtl !important;
    unicode-bidi: plaintext !important;
  }

  /* Division card descriptions: centered and same readable width */
  html[lang="ar"] body[data-mobile-hero="about"] .divisions .div-card .div-body > div:first-child > p {
    width: 100% !important;
    max-width: 300px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    direction: rtl !important;
    text-wrap: pretty !important;
  }
}

/* FINAL: mobile card body copy — balanced equal lines like approved reference */
@media (max-width: 768px) {
  .div-card .div-body > div:first-child > p,
  .service-card p,
  .product-card p,
  .project-card p,
  .feature-card p,
  .info-card p,
  html[lang="ar"] body[data-mobile-hero="about"] .divisions .div-card .div-body > div:first-child > p {
    width: 100% !important;
    max-width: 300px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: justify !important;
    text-align-last: center !important;
    direction: rtl !important;
    line-height: 1.9 !important;
  }
}

/* 2026-09-07 FINAL — natural Arabic card copy, no stretched word spacing */
@media (max-width: 768px) {
  html[lang="ar"] .div-card p,
  html[lang="ar"] .service-card p,
  html[lang="ar"] .product-card p,
  html[lang="ar"] .project-card p,
  html[lang="ar"] .feature-card p,
  html[lang="ar"] .info-card p,
  html[lang="ar"] .brand-card p,
  html[lang="ar"] .ev-card p,
  html[lang="ar"] .ind-card p,
  html[lang="ar"] .std-card p {
    text-align: right !important;
    text-align-last: auto !important;
    direction: rtl !important;
    word-spacing: normal !important;
    letter-spacing: normal !important;
    text-justify: auto !important;
    white-space: normal !important;
  }
}

/* FINAL OVERRIDE — About Arabic business-card copy must match brand-card natural spacing */
@media (max-width:768px){
  html[lang="ar"] body[data-mobile-hero="about"] .divisions .div-card .div-body > div:first-child > p{
    text-align:right !important;
    text-align-last:auto !important;
    text-justify:auto !important;
    word-spacing:0 !important;
    letter-spacing:0 !important;
    direction:rtl !important;
    max-width:100% !important;
    margin:0 !important;
    line-height:1.65 !important;
  }
}

/* 2026-09-07 FINAL FIX — About page overview typography */
@media (max-width: 768px) {
  html[lang="ar"] body[data-mobile-hero="about"] .overview .ov-body h2 {
    text-align: center !important;
    direction: rtl !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  html[lang="ar"] body[data-mobile-hero="about"] .overview .ov-body > p {
    text-align: justify !important;
    text-align-last: right !important;
    text-justify: inter-word !important;
    direction: rtl !important;
    unicode-bidi: plaintext !important;
    word-spacing: normal !important;
    letter-spacing: 0 !important;
    white-space: normal !important;
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    line-height: 1.9 !important;
  }

  /* Card copy stays natural, without forced justification gaps */
  html[lang="ar"] body[data-mobile-hero="about"] .divisions .div-card .div-body > div:first-child > p {
    text-align: right !important;
    text-align-last: auto !important;
    text-justify: auto !important;
    word-spacing: normal !important;
    letter-spacing: 0 !important;
    direction: rtl !important;
    line-height: 1.75 !important;
  }
}

@media (max-width: 768px) {
  html[lang="ar"] .overview .ov-body p {
    text-align: justify !important;
    text-align-last: right !important;
  }
  html[lang="ar"] .overview .ov-body h2 {
    text-align: center !important;
  }
}


/* 2026-09-07 FINAL — mobile card axis cleanup */
@media (max-width: 768px) {
  /* CTA feature cards: no inherited justify / last-line right alignment */
  .cta .cta-feats .cta-feat,
  .cta .cta-feats .cta-feat h4,
  .cta .cta-feats .cta-feat p {
    text-align: center !important;
    text-align-last: auto !important;
  }
  .cta .cta-feats .cta-feat .ic {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Why-choose cards: icon centered for Arabic and English */
  .why-card .ic {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* 2026-09-08 — Product project/case-study mobile alignment */
@media (max-width: 768px) {
  /* Arabic: all case-study copy starts from the right */
  html[lang="ar"] .feat .feat-body,
  html[lang="ar"] .feat .feat-body h3,
  html[lang="ar"] .feat .feat-body > p,
  html[lang="ar"] .feat .feat-cso,
  html[lang="ar"] .feat .feat-cso h4,
  html[lang="ar"] .feat .feat-cso p {
    text-align: right !important;
    text-align-last: auto !important;
    direction: rtl !important;
  }
  html[lang="ar"] .feat .feat-body {
    align-items: stretch !important;
    padding: 34px 28px !important;
  }
  html[lang="ar"] .feat .feat-body h3 {
    width: 100% !important;
    max-width: none !important;
    font-size: clamp(1.65rem, 7.1vw, 1.95rem) !important;
    line-height: 1.32 !important;
    margin: 0 0 20px !important;
    text-wrap: balance !important;
  }
  html[lang="ar"] .feat .feat-body > p {
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 25px !important;
    line-height: 1.9 !important;
  }
  html[lang="ar"] .feat .feat-cso {
    width: 100% !important;
    gap: 20px !important;
    margin-bottom: 24px !important;
  }
  html[lang="ar"] .feat .feat-cso h4 { margin-bottom: 7px !important; }
  html[lang="ar"] .feat .feat-cso p { line-height: 1.85 !important; }

  /* English: mirror the Arabic layout, aligned naturally to the left */
  html[lang="en"] .feat .feat-body,
  html[lang="en"] .feat .feat-body h3,
  html[lang="en"] .feat .feat-body > p,
  html[lang="en"] .feat .feat-cso,
  html[lang="en"] .feat .feat-cso h4,
  html[lang="en"] .feat .feat-cso p {
    text-align: left !important;
    text-align-last: auto !important;
    direction: ltr !important;
  }
  html[lang="en"] .feat .feat-body {
    align-items: stretch !important;
    padding: 34px 28px !important;
  }
  html[lang="en"] .feat .feat-body h3 {
    width: 100% !important;
    max-width: none !important;
    line-height: 1.2 !important;
    margin: 0 0 20px !important;
    text-wrap: balance !important;
  }
  html[lang="en"] .feat .feat-body > p {
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 25px !important;
    line-height: 1.75 !important;
  }
  html[lang="en"] .feat .feat-cso {
    width: 100% !important;
    gap: 20px !important;
    margin-bottom: 24px !important;
  }
}