@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;600;700;800;900&display=swap');

/* ANC final global fixes — Arabic/English, desktop/mobile */

/* 1) Feature lists: icon/arrow always starts the line. */
html[lang="ar"] .fe-b {
  direction: rtl !important;
  flex-direction: row !important;
  justify-content: flex-start !important;
  text-align: right !important;
}
html[lang="ar"] .fe-b i {
  order: 0 !important;
  flex: 0 0 auto !important;
  margin: 0 0 0 8px !important;
  transform: none !important;
}
html[lang="en"] .fe-b {
  direction: ltr !important;
  flex-direction: row !important;
  justify-content: flex-start !important;
  text-align: left !important;
}
html[lang="en"] .fe-b i {
  order: 0 !important;
  flex: 0 0 auto !important;
  margin: 0 8px 0 0 !important;
  transform: none !important;
}

/* Same rule for common icon/arrow feature rows used on other product pages. */
html[lang="ar"] :is(.srv-list li,.feature-item,.feature-row,.benefit-item) {
  direction: rtl !important;
  text-align: right !important;
}
html[lang="en"] :is(.srv-list li,.feature-item,.feature-row,.benefit-item) {
  direction: ltr !important;
  text-align: left !important;
}

/* 2) Desktop card groups: center the complete group, regardless of item count. */
@media (min-width: 769px) {
  .cert-row {
    grid-template-columns: repeat(auto-fit, minmax(190px, 220px)) !important;
    justify-content: center !important;
    justify-items: stretch !important;
    width: 100% !important;
  }
  :is(.why-grid,.ind-grid) {
    justify-content: center !important;
  }
}

/* 3) Mobile product heroes must never inherit an old viewport-height rule. */
@media (max-width: 768px) {
  section.hero,
  header.hero,
  .fp-hero,
  .sv-hero {
    min-height: 0 !important;
    height: auto !important;
  }

  /* Reading direction: Arabic right, English left. */
  html[lang="ar"] main :is(.fe-b,.fe-a,.srv-list li,.feature-item,.feature-row,.benefit-item) {
    text-align: right !important;
  }
  html[lang="en"] main :is(.fe-b,.fe-a,.srv-list li,.feature-item,.feature-row,.benefit-item) {
    text-align: left !important;
  }
}

/* 2026-09 mobile Arabic alignment: hero checks + approval headings */
@media (max-width: 768px) {
  html[lang="ar"] .hero-feats {
    direction: rtl !important;
  }
  html[lang="ar"] .hero-feat {
    direction: rtl !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    text-align: right !important;
  }
  html[lang="ar"] .hero-feat i {
    order: 0 !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
  }

  html[lang="ar"] .trust-approvals .appr-card {
    direction: rtl !important;
    text-align: right !important;
  }
  html[lang="ar"] .trust-approvals .appr-head {
    direction: rtl !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    text-align: right !important;
  }
  html[lang="ar"] .trust-approvals .appr-head i {
    order: 0 !important;
    flex: 0 0 26px !important;
    margin: 0 !important;
  }
  html[lang="ar"] .trust-approvals .appr-head strong {
    order: 1 !important;
    text-align: right !important;
  }
  html[lang="ar"] .trust-approvals .appr-card p {
    text-align: right !important;
  }
}


/* ==========================================================
   2026-09-07 FINAL POLISH — approved mobile alignment + font
   ========================================================== */

/* Tajawal is mandatory across the whole website.
   Font Awesome classes are excluded so icons keep rendering correctly. */
html,
body,
body *:not(.fa):not(.fas):not(.far):not(.fab):not(.fal):not(.fad):not(.fa-solid):not(.fa-regular):not(.fa-brands) {
  font-family: 'Tajawal', sans-serif !important;
  letter-spacing: 0 !important;
}

@media (max-width: 768px) {
  /* About division cards: all three cards use exactly the same text treatment. */
  body[data-mobile-hero="about"] .divisions .div-card .div-body > div:first-child > h3 {
    width: 100% !important;
    margin: 0 0 12px !important;
    line-height: 1.45 !important;
    text-align: center !important;
  }
  html[lang="ar"] body[data-mobile-hero="about"] .divisions .div-card .div-body > div:first-child > p {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    direction: rtl !important;
    text-align: right !important;
    text-align-last: auto !important;
    text-justify: auto !important;
    word-spacing: normal !important;
    letter-spacing: 0 !important;
    line-height: 1.8 !important;
    text-wrap: pretty !important;
  }
  html[lang="en"] body[data-mobile-hero="about"] .divisions .div-card .div-body > div:first-child > p {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    direction: ltr !important;
    text-align: left !important;
    text-align-last: auto !important;
    text-justify: auto !important;
    word-spacing: normal !important;
    letter-spacing: 0 !important;
    line-height: 1.8 !important;
    text-wrap: pretty !important;
  }

  /* Service-card check lists: one fixed icon column on every card. */
  .panel-card .pc-list {
    width: 100% !important;
  }
  .panel-card .pc-list .row {
    width: 100% !important;
    box-sizing: border-box !important;
    align-items: start !important;
  }
  html[lang="ar"] .panel-card .pc-list .row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 24px !important;
    column-gap: 12px !important;
    direction: rtl !important;
    text-align: right !important;
  }
  html[lang="ar"] .panel-card .pc-list .row i {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: center !important;
    align-self: start !important;
    margin: 3px 0 0 !important;
  }
  html[lang="ar"] .panel-card .pc-list .row span {
    grid-column: 1 !important;
    grid-row: 1 !important;
    text-align: right !important;
    direction: rtl !important;
  }
  html[lang="en"] .panel-card .pc-list .row {
    display: grid !important;
    grid-template-columns: 24px minmax(0, 1fr) !important;
    column-gap: 12px !important;
    direction: ltr !important;
    text-align: left !important;
  }
  html[lang="en"] .panel-card .pc-list .row i {
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-self: center !important;
    align-self: start !important;
    margin: 3px 0 0 !important;
  }
  html[lang="en"] .panel-card .pc-list .row span {
    grid-column: 2 !important;
    grid-row: 1 !important;
    text-align: left !important;
    direction: ltr !important;
  }
}

/* English homepage mobile hero = the approved Arabic homepage composition. */
@media (max-width: 600px) {
  html[lang="en"] body.home-page .hero {
    padding: 70px 0 36px !important;
  }
  html[lang="en"] body.home-page .hero .hero-text-overlay {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    pointer-events: none !important;
    background: linear-gradient(to right, rgba(10,11,13,.80) 0%, rgba(10,11,13,.65) 30%, rgba(10,11,13,.20) 60%, rgba(10,11,13,0) 80%) !important;
  }
  html[lang="en"] body.home-page .hero h1 {
    font-size: 1.35rem !important;
    margin: 12px 0 0 !important;
    line-height: 1.3 !important;
    text-align: center !important;
    max-width: 100% !important;
  }
  html[lang="en"] body.home-page .hero h1 .red,
  html[lang="en"] body.home-page .hero h1 .muted {
    display: inline !important;
  }
  html[lang="en"] body.home-page .hero-sub {
    font-size: .78rem !important;
    margin: 12px 0 0 !important;
    line-height: 1.6 !important;
    text-align: center !important;
  }
  html[lang="en"] body.home-page .hero-badge {
    font-size: .62rem !important;
    margin-bottom: 8px !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    text-align: center !important;
  }
  html[lang="en"] body.home-page .hero-badge::before {
    order: 2 !important;
    width: 28px !important;
    height: 2px !important;
    margin: 0 auto !important;
  }
  html[lang="en"] body.home-page .hero-actions {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-top: 16px !important;
    align-items: stretch !important;
    justify-content: center !important;
  }
  html[lang="en"] body.home-page .hero-actions .btn-primary {
    order: 3 !important;
    width: 100% !important;
    flex: 0 0 100% !important;
    justify-content: center !important;
    padding: 13px !important;
    font-size: .88rem !important;
    border-radius: 10px !important;
  }
  html[lang="en"] body.home-page .hero-actions .watch-intro {
    order: 1 !important;
    flex: 1 1 0 !important;
    justify-content: center !important;
    padding: 9px 6px !important;
    font-size: .68rem !important;
    border: 1px solid rgba(255,255,255,.30) !important;
    border-radius: 9px !important;
    white-space: nowrap !important;
  }
  html[lang="en"] body.home-page .hero-actions .btn-ghost-light {
    order: 2 !important;
    flex: 1 1 0 !important;
    justify-content: center !important;
    padding: 9px 6px !important;
    font-size: .68rem !important;
    white-space: nowrap !important;
  }
  html[lang="en"] body.home-page .watch-intro .play {
    width: 24px !important;
    height: 24px !important;
    font-size: .6rem !important;
    flex-shrink: 0 !important;
  }
  html[lang="en"] body.home-page .hero-feats {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    margin-top: 14px !important;
    background: rgba(255,255,255,.06) !important;
    border-radius: 12px !important;
    padding: 12px !important;
  }
  html[lang="en"] body.home-page .hero-feat {
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 7px !important;
    font-size: .72rem !important;
    text-align: left !important;
  }
  html[lang="en"] body.home-page .hero-feat i {
    flex-shrink: 0 !important;
    margin: 0 !important;
  }
}