/* =========================================================
   AWLEDNA — COMPLETE RESPONSIVE LAYOUT
   Phone / tablet / desktop-safe overrides.
   Desktop styling is intentionally untouched.
   ========================================================= */
html, body { max-width:100%; overflow-x:hidden; }
*, *::before, *::after { box-sizing:border-box; }
img, video, iframe, svg { max-width:100%; }

/* ---------- Shared header ---------- */
@media (max-width:1100px){
  .site-header-final, .site-header, .header {
    height:auto !important;
    min-height:72px !important;
    flex-wrap:wrap !important;
    padding-left:3.5% !important;
    padding-right:3.5% !important;
    row-gap:4px !important;
  }
  .brand-final, .brand { flex:0 0 auto; }
  .nav-final, .nav {
    order:3 !important;
    width:100% !important;
    max-width:100% !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    justify-content:flex-start !important;
    margin:0 !important;
    padding-bottom:2px !important;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .nav-final::-webkit-scrollbar, .nav::-webkit-scrollbar { display:none; }
  .nav-final a, .nav a { flex:0 0 auto; }
  .header-right-final, .header-right { margin-left:auto; max-width:65%; }
}

@media (max-width:600px){
  .site-header-final, .site-header, .header { padding-left:4% !important; padding-right:4% !important; }
  .brand-final, .brand { width:60px !important; flex:0 0 60px !important; }
  .brand-final img, .brand img { width:58px !important; height:58px !important; }
  .header-right-final, .header-right { max-width:calc(100% - 70px); gap:8px !important; }
  .support-final, .support-btn, .support { min-width:0 !important; padding:9px 12px !important; font-size:12px !important; }
  .nav-final, .nav { gap:18px !important; }
  .nav-final a, .nav a { font-size:14px !important; }
}

/* ---------- Shared footer ---------- */
@media (max-width:700px){
  .site-footer-final, .footer {
    min-height:0 !important;
    padding:16px 5% !important;
    gap:12px !important;
    flex-wrap:wrap !important;
    justify-content:center !important;
    text-align:center;
  }
  .footer-copy { font-size:11px !important; line-height:1.4; }
  .footer-socials { gap:14px !important; }
}

/* =========================================================
   HOME — EN / FR
   The previous fixed section heights caused content to overlap
   on tablet screens. Let every section grow with its content.
   ========================================================= */
@media (max-width:1024px){
  .home-hero-html { height:auto !important; min-height:0 !important; }

  .glance {
    height:auto !important;
    min-height:0 !important;
    padding:20px 4% 28px !important;
  }
  .glance-grid {
    width:min(100%, 820px) !important;
    height:auto !important;
    min-height:0 !important;
    margin:12px auto 0 !important;
    align-items:center !important;
  }
  .stat { min-width:0; }

  .what {
    height:auto !important;
    min-height:0 !important;
    padding:22px 4% 36px !important;
  }
  .what-grid {
    height:auto !important;
    padding:22px 0 0 !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:26px !important;
  }
  .what-card { min-width:0; align-items:flex-start; }

  .partners {
    height:auto !important;
    min-height:0 !important;
    padding:22px 4% 30px !important;
  }
  .partner-row {
    width:min(100%, 900px) !important;
    height:auto !important;
    min-height:100px !important;
    margin:14px auto 0 !important;
  }
}

@media (max-width:760px){
  .home-hero-html { display:block !important; }
  .home-hero-copy {
    width:100% !important;
    height:auto !important;
    padding:28px 6% 30px !important;
    background:#eef8ff !important;
  }
  .home-hero-photo {
    position:relative !important;
    inset:auto !important;
    width:100% !important;
    height:300px !important;
  }
  .glance-grid { grid-template-columns:1fr !important; gap:16px !important; }
  .divider { display:none !important; }
  .what-grid { grid-template-columns:1fr !important; gap:18px !important; }
  .partner-row { grid-template-columns:1fr !important; gap:12px !important; }
  .partner-sep { width:100% !important; height:1px !important; }
}

@media (max-width:480px){
  .home-hero-copy h1 { font-size:clamp(34px,10vw,42px) !important; line-height:1.06 !important; }
  .home-hero-copy p { font-size:15px !important; line-height:1.55 !important; }
  .home-hero-copy .lead { font-size:16px !important; }
  .home-hero-photo { height:260px !important; }
  .stat { justify-content:flex-start !important; text-align:left !important; }
  .what-card { gap:16px !important; }
  .what-card h3 { font-size:21px !important; }
  .what-card p { font-size:15px !important; }
}

/* ---------- About ---------- */
@media (max-width:1000px){
  .about-page { padding-left:5% !important; padding-right:5% !important; }
  .about-hero { grid-template-columns:1fr !important; gap:28px !important; padding-bottom:30px !important; }
  .about-copy { max-width:none !important; width:100% !important; }
  .about-copy h1 { font-size:clamp(44px,7vw,62px) !important; }
  .video-shell { width:100% !important; max-width:560px; margin:0 auto; }
  .partners-section { padding-left:0 !important; padding-right:0 !important; }
  .partner-cards { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
}
@media (max-width:620px){
  .about-copy h1 { font-size:clamp(38px,10vw,50px) !important; line-height:1.08 !important; }
  .partner-cards { grid-template-columns:1fr !important; }
  .mission-highlight { padding:20px !important; }
  .founder-quote { padding:18px 10px !important; }
}

/* ---------- Our Work ---------- */
@media (max-width:1050px){
  .our-work, .journey, main { max-width:100%; }
  .steps { grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:24px !important; }
  .step { min-width:0; }
}
@media (max-width:650px){
  .steps { grid-template-columns:1fr !important; }
  .hero .copy { width:100% !important; padding-left:7% !important; padding-right:7% !important; }
  .hero h1 { font-size:clamp(38px,10vw,48px) !important; }
  .media { width:100% !important; padding-left:5% !important; padding-right:5% !important; }
  .media img, .media video { width:100% !important; height:auto !important; }
}

/* ---------- Raising Awareness ---------- */
@media (max-width:900px){
  .raising-awareness, .awareness { width:100% !important; }
  .hero { grid-template-columns:1fr !important; }
  .hero-copy { width:100% !important; padding-left:6% !important; padding-right:6% !important; }
  .hero-collage { width:100% !important; padding:8px 5% 20px !important; }
  .hero-collage img { width:min(100%,680px) !important; margin:0 auto !important; }
  .aw-grid { grid-template-columns:1fr !important; }
  .aw-card { min-height:0 !important; padding:28px 24px !important; }
  .aw-card + .aw-card { border-left:0 !important; border-top:2px solid var(--line) !important; }
  .social-box { flex-direction:column !important; align-items:stretch !important; }
  .social-links { width:100% !important; }
}
@media (max-width:620px){
  .hero h1 { font-size:clamp(38px,10vw,48px) !important; line-height:1.06 !important; }
  .hero-copy p { font-size:16px !important; }
  .social-links { flex-direction:column !important; }
  .social-link { width:100% !important; min-width:0 !important; }
  .section-title { font-size:15px !important; letter-spacing:2px !important; gap:10px !important; }
  .section-title::before, .section-title::after { width:30px !important; }
}

/* ---------- Contact ---------- */
@media (max-width:900px){
  .contact-hero { grid-template-columns:1fr !important; min-height:0 !important; }
  .contact-hero .copy { width:100% !important; padding:34px 7% !important; }
  .contact-hero .image { min-height:300px !important; width:100% !important; }
  .contact-grid, .content { grid-template-columns:1fr !important; }
  .cards { grid-template-columns:1fr !important; }
}
@media (max-width:620px){
  .contact-hero h1 { font-size:clamp(40px,10vw,52px) !important; }
  .contact-hero p { font-size:16px !important; line-height:1.6 !important; }
  .contact-grid, .content { padding-left:5% !important; padding-right:5% !important; }
  .panel, .card { padding:22px 18px !important; }
}

/* ---------- Support ---------- */
@media (max-width:950px){
  .support-page .hero, .ar-support-hero { grid-template-columns:1fr !important; min-height:0 !important; }
  .support-page .hero-copy, .ar-support-hero .copy { width:100% !important; padding:34px 7% !important; }
  .support-page .hero-image, .ar-support-hero .image { width:100% !important; min-height:300px !important; }
  .options, .ar-support-options { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
}
@media (max-width:650px){
  .options, .ar-support-options { grid-template-columns:1fr !important; }
  .support-page .hero h1, .ar-support-hero h1 { font-size:clamp(40px,10vw,56px) !important; }
  .support-page .hero-text, .ar-support-hero .hero-text { font-size:16px !important; line-height:1.65 !important; }
}

/* =========================================================
   ARABIC HOME + INNER PAGES
   ========================================================= */
@media (max-width:1000px){
  .hero-home { grid-template-columns:1fr !important; min-height:0 !important; }
  .hero-home .photo { order:1 !important; min-height:330px !important; width:100% !important; }
  .hero-home .copy { order:2 !important; width:100% !important; padding:34px 7% 36px !important; }
  .home-section { height:auto !important; min-height:0 !important; padding:34px 5% !important; }
  .stats { grid-template-columns:1fr 1fr !important; gap:14px !important; margin-top:20px !important; }
  .vline { display:none !important; }
  .what-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  .partners { height:auto !important; padding:34px 5% 45px !important; }
  .partner-row { flex-wrap:wrap !important; height:auto !important; }
  .partner-sep { display:none !important; }
}
@media (max-width:700px){
  .hero-home .photo { min-height:260px !important; }
  .hero-home h1 { font-size:clamp(40px,11vw,54px) !important; line-height:1.1 !important; }
  .hero-home .lead { font-size:19px !important; line-height:1.6 !important; }
  .hero-home .body { font-size:17px !important; line-height:1.75 !important; }
  .hero-home .actions { flex-direction:column !important; width:100%; }
  .hero-home .actions .btn { width:100% !important; min-width:0 !important; }
  .stats { grid-template-columns:1fr !important; }
  .stat { padding:18px 12px !important; }
  .what-grid { grid-template-columns:1fr !important; }
  .what-card { min-height:0 !important; }
  .section-label { font-size:18px !important; letter-spacing:2px !important; line-height:1.35 !important; }
  .section-label::before, .section-label::after { width:28px !important; margin:0 8px !important; }
  .partners .section-label { font-size:19px !important; }
  .partner-row { flex-direction:column !important; gap:18px !important; }
  .partner { width:100%; }
  .footer { flex-direction:column !important; }

  .inner-hero, .awareness-hero, .contact-hero, .ar-support-hero { grid-template-columns:1fr !important; }
  .inner-hero .copy, .awareness-hero .copy, .contact-hero .copy, .ar-support-hero .copy { order:1 !important; padding:32px 7% !important; }
  .inner-hero .image, .awareness-hero .collage, .contact-hero .image, .ar-support-hero .image { order:2 !important; min-height:250px !important; }
  .quote-wrap { grid-template-columns:1fr !important; }
  .quote-wrap .video-card, .quote-wrap .quote { grid-column:auto !important; }
  .cards, .partners-grid { grid-template-columns:1fr !important; }
}

@media (max-width:420px){
  .hero-home .copy { padding-left:6% !important; padding-right:6% !important; }
  .home-section, .content { padding-left:5% !important; padding-right:5% !important; }
  .what-card, .aw-card, .partner-card, .panel, .ar-support-card { padding:20px !important; }
}

/* Mobile language switcher: keep EN | FR | العربية visible in the header on all pages. */
@media (max-width:700px){
  .header-right-final, .header-right {
    order:2 !important;
    width:auto !important;
    max-width:none !important;
    margin-left:auto !important;
    display:flex !important;
    align-items:center !important;
    gap:12px !important;
  }
  .langs-final, .langs {
    display:flex !important;
    align-items:center !important;
    visibility:visible !important;
    opacity:1 !important;
    white-space:nowrap !important;
    flex:0 0 auto !important;
  }
}
@media (max-width:380px){
  .header-right-final, .header-right { gap:8px !important; }
  .support-final, .support-btn, .support { padding-left:11px !important; padding-right:11px !important; }
  .langs-final, .langs { font-size:12px !important; }
}
/* =========================================================
   AWLEDNA — CLIENT FEEDBACK + READABILITY + RESPONSIVE PASS
   Added after the existing page styles so these are the final
   intentional overrides. Existing visual system is preserved.
   ========================================================= */

/* --- Readability: increase small supporting copy consistently --- */
main p,
section p,
article p,
.hero-copy p,
.copy p,
.about-copy > p,
.mission-highlight p,
.founder-quote p,
.partner-card p,
.step p,
.aw-card p,
.social-copy p,
.hero-text,
.points li,
.ar-support-card li {
  font-size:16px !important;
  line-height:1.55 !important;
}

/* Keep compact labels as labels, not body copy. */
.card-label,
.eyebrow,
.section-kicker,
.mission-label,
.pill {
  line-height:1.35 !important;
}

/* --- Header: language selector must remain visible on phones --- */
@media (max-width:1100px){
  .langs-final,
  .langs {
    display:flex !important;
    align-items:center !important;
    flex:0 0 auto !important;
    white-space:nowrap !important;
    font-size:13px !important;
  }
}
@media (max-width:600px){
  .header-right-final,
  .header-right {
    max-width:none !important;
    width:auto !important;
    gap:7px !important;
    flex-wrap:nowrap !important;
  }
  .langs-final,
  .langs { font-size:12px !important; gap:3px !important; }
  .support-final,
  .support-btn { font-size:12px !important; padding:8px 11px !important; }
}
@media (max-width:360px){
  .brand-final,.brand { width:54px !important; flex-basis:54px !important; }
  .brand-final img,.brand img { width:52px !important; height:52px !important; }
  .header-right-final,.header-right { gap:5px !important; }
  .langs-final,.langs { font-size:11px !important; }
  .support-final,.support-btn { font-size:11px !important; padding:7px 9px !important; }
}

/* --- About / Partners: larger heading and partner descriptions --- */
.partners-heading h2 { font-size:clamp(34px,4vw,52px) !important; line-height:1.08 !important; }
.partners-heading p,
.partner-card p { font-size:17px !important; line-height:1.55 !important; }
.partner-card h3 { font-size:22px !important; }

/* Matching section-label treatment in all languages: line on both sides. */
.partners-heading .section-kicker {
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:18px !important;
}
.partners-heading .section-kicker::before,
.partners-heading .section-kicker::after {
  content:"" !important;
  display:block !important;
  width:62px !important;
  height:1px !important;
  background:var(--red,#f5222b) !important;
}

/* Arabic home: reduce empty vertical space and give partners more presence. */
html[lang="ar"] .partners {
  padding-top:8px !important;
  padding-bottom:18px !important;
}
html[lang="ar"] .partners .section-label {
  font-size:28px !important;
  line-height:1.25 !important;
  margin-bottom:8px !important;
}
html[lang="ar"] .partner-row img { max-height:88px !important; width:auto !important; }

/* Arabic about / awareness / contact / support: headings and descriptions requested in PPT. */
html[lang="ar"] .partners-heading h2,
html[lang="ar"] .section-title,
html[lang="ar"] .head h2,
html[lang="ar"] .social-copy h2 { line-height:1.25 !important; }
html[lang="ar"] .partners-heading h2 { font-size:clamp(34px,4vw,52px) !important; }
html[lang="ar"] .partners-heading p,
html[lang="ar"] .partner-card p,
html[lang="ar"] .aw-card p { font-size:18px !important; line-height:1.8 !important; }
html[lang="ar"] .section-title { font-size:24px !important; }
html[lang="ar"] .aw-card h3 { font-size:27px !important; }
html[lang="ar"] .social-copy p { font-size:18px !important; }
html[lang="ar"] .ar-support-card li { font-size:18px !important; line-height:1.65 !important; }

/* Arabic hero title: allow the approved two-line treatment without forcing
   awkward single-word wraps. */
@media (min-width:901px){
  html[lang="ar"] .about-copy h1,
  html[lang="ar"] .ar-support-hero h1 { font-size:clamp(50px,4.2vw,62px) !important; }
}

/* --- French Our Work: exact requested red words + treatment --- */
html[lang="fr"] .hero h1 .accent-red,
html[lang="fr"] .hero h1 .accent-red2 { color:var(--red,#f5222b) !important; }

/* The client asked for the two circled words to be red. */
html[lang="fr"] .hero h1 .accent-red { color:var(--red,#f5222b) !important; }
html[lang="fr"] .hero h1 .accent-red2 { color:var(--red,#f5222b) !important; }

/* Treatment-plan step follows the red icon in FR, as requested. */
html[lang="fr"] .step:nth-child(5) h3 { color:var(--red,#f5222b) !important; }

/* --- French responsive stabilisation --- */
html[lang="fr"] .hero,
html[lang="fr"] .about-hero,
html[lang="fr"] .contact-hero,
html[lang="fr"] .awareness-hero,
html[lang="fr"] .ar-support-hero { min-width:0 !important; }

@media (max-width:1150px){
  html[lang="fr"] .hero { grid-template-columns:40% 60% !important; }
  html[lang="fr"] .hero h1 { font-size:clamp(46px,5vw,56px) !important; }
  html[lang="fr"] .copy { min-width:0 !important; padding-left:6% !important; padding-right:4% !important; }
  html[lang="fr"] .media { min-width:0 !important; padding-right:3% !important; }
  html[lang="fr"] .media img { height:100% !important; min-height:320px !important; object-fit:cover !important; }
  html[lang="fr"] .partner-cards { gap:18px !important; }
}
@media (max-width:900px){
  html[lang="fr"] .hero,
  html[lang="fr"] .about-hero,
  html[lang="fr"] .contact-hero,
  html[lang="fr"] .awareness-hero { grid-template-columns:1fr !important; }
  html[lang="fr"] .hero .copy,
  html[lang="fr"] .about-copy,
  html[lang="fr"] .contact-copy,
  html[lang="fr"] .awareness-hero .copy { width:100% !important; max-width:none !important; padding:32px 6% !important; }
  html[lang="fr"] .hero .media { padding:0 5% 28px !important; }
  html[lang="fr"] .hero .media img { width:100% !important; height:auto !important; min-height:0 !important; max-height:none !important; object-fit:cover !important; border-radius:20px !important; }
  html[lang="fr"] .partner-cards { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  html[lang="fr"] .steps { grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:30px !important; }
  html[lang="fr"] .arrow { display:none !important; }
}
@media (max-width:650px){
  html[lang="fr"] .partner-cards,
  html[lang="fr"] .steps { grid-template-columns:1fr !important; }
  html[lang="fr"] .hero h1 { font-size:clamp(40px,10vw,50px) !important; line-height:1.06 !important; }
  html[lang="fr"] .hero .copy p,
  html[lang="fr"] .about-copy p,
  html[lang="fr"] .partner-card p,
  html[lang="fr"] .step p { font-size:16px !important; line-height:1.6 !important; }
}

/* --- All languages: prevent long words / headings from causing horizontal overflow --- */
h1,h2,h3,p,li { overflow-wrap:break-word; }

/* Keep footer copy compact despite the global readability increase. */
.footer-copy { font-size:14px !important; }
@media(max-width:700px){ .footer-copy { font-size:12px !important; } }

/* Arabic home spacing: tighten the transition into the work/partners blocks. */
html[lang="ar"] .home-section + .home-section { padding-top:24px !important; }
html[lang="ar"] .home-section + .partners { padding-top:20px !important; }

/* Arabic About: on wide screens let the main title breathe across one line,
   while narrower screens retain normal wrapping. */
@media (min-width:1200px){
  html[lang="ar"] .about-copy h1 br { display:none !important; }
  html[lang="ar"] .about-copy h1 span { display:inline !important; }
}

/* Arabic Our Work — PPT: two-line headline, with only the two circled
   words highlighted in red. */
html[lang="ar"] .ow-copy h1 { line-height:1.08 !important; }
html[lang="ar"] .ow-copy h1 .ow-red { color:var(--red,#f5222b) !important; }
@media (min-width:901px){
  html[lang="ar"] .ow-copy h1 { font-size:clamp(48px,4.4vw,62px) !important; }
}
/* Additional PPT refinements */
html[lang="ar"] .founder-quote{margin-top:15px !important}
html[lang="ar"] .partners-heading p{font-size:18px !important;text-wrap:balance}
html[lang="ar"] .ra-copy h1{font-size:clamp(48px,4.5vw,64px) !important;line-height:1.08 !important}
html[lang="ar"] .contact-copy h1{font-size:clamp(48px,4.5vw,60px) !important}
html[lang="ar"] .social-copy h2{font-size:clamp(30px,3vw,42px) !important}
html[lang="ar"] .ar-support-card h2{font-size:clamp(34px,3vw,44px) !important}
html[lang="ar"] .awareness .section-title{color:var(--red,#f5222b) !important}
.stat small{font-size:16px !important}
@media(max-width:480px){.stat small{font-size:14px !important}}


/* =========================================================
   AWLEDNA — ARABIC HEADING READABILITY FINAL PASS
   Match the readable size used by "جهودنا في التوعية"
   across Arabic section labels and support cards.
   ========================================================= */
html[lang="ar"] .section-kicker {
  font-family:'Noto Naskh Arabic',Tahoma,Arial,sans-serif !important;
  font-size:24px !important;
  line-height:1.25 !important;
  letter-spacing:0 !important;
  font-weight:700 !important;
}
html[lang="ar"] .section-title {
  font-size:24px !important;
  line-height:1.25 !important;
  letter-spacing:0 !important;
}
html[lang="ar"] .ar-support-card h2 {
  font-family:'Noto Naskh Arabic',Tahoma,Arial,sans-serif !important;
  font-size:24px !important;
  line-height:1.3 !important;
  letter-spacing:0 !important;
}

/* Keep Arabic headings readable on narrow screens too. */
@media (max-width:700px){
  html[lang="ar"] .section-kicker,
  html[lang="ar"] .section-title,
  html[lang="ar"] .ar-support-card h2 {
    font-size:24px !important;
  }
}

/* =========================================================
   FINAL CLIENT FIX — 24 SEP 2026
   1. French home: allow the Actions section to fully contain
      the longest French copy before Partners begins.
   2. Arabic: keep the desktop header identical on every page.
   ========================================================= */
html[lang="fr"] .what {
  height: auto !important;
  min-height: 270px !important;
  box-sizing: border-box !important;
  padding-bottom: 55px !important;
  overflow: visible !important;
}
html[lang="fr"] .what-grid {
  align-items: start !important;
  padding-bottom: 8px !important;
}
html[lang="fr"] .what-card {
  height: auto !important;
  min-height: 105px !important;
  align-items: flex-start !important;
}
html[lang="fr"] .what-card p {
  overflow-wrap: break-word !important;
  word-break: normal !important;
}
html[lang="fr"] .partners {
  position: relative !important;
  clear: both !important;
  height: auto !important;
  min-height: 145px !important;
  box-sizing: border-box !important;
  padding-top: 22px !important;
}

@media (min-width:701px) and (max-width:1100px) {
  html[lang="fr"] .what { min-height: 300px !important; }
}

/* Arabic desktop/tablet header parity: same one-row arrangement as
   the Arabic Home and Support pages. */
@media (min-width:701px) {
  html[lang="ar"] .site-header {
    display: grid !important;
    grid-template-columns: 90px minmax(0,1fr) auto !important;
    align-items: center !important;
    gap: 22px !important;
    direction: ltr !important;
    height: 78px !important;
    min-height: 78px !important;
    flex-wrap: nowrap !important;
    padding-left: 4.2% !important;
    padding-right: 4.2% !important;
  }
  html[lang="ar"] .site-header .brand {
    width: 86px !important;
    height: auto !important;
    flex: 0 0 auto !important;
  }
  html[lang="ar"] .site-header .brand img {
    width: 76px !important;
    height: 76px !important;
  }
  html[lang="ar"] .site-header .nav {
    order: initial !important;
    width: auto !important;
    max-width: none !important;
    height: 78px !important;
    overflow: visible !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    gap: 24px !important;
    white-space: nowrap !important;
  }
  html[lang="ar"] .site-header .nav a {
    height: 78px !important;
    flex: 0 0 auto !important;
    font-size: 17px !important;
  }
  html[lang="ar"] .site-header .header-right {
    margin-left: 0 !important;
    max-width: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    white-space: nowrap !important;
  }
  html[lang="ar"] .site-header .langs { font-size: 14px !important; }
  html[lang="ar"] .site-header .support-btn {
    font-size: 16px !important;
    padding: 11px 24px !important;
  }
}

@media (max-width:700px) {
  html[lang="ar"] .site-header {
    display: flex !important;
    height: auto !important;
    min-height: 76px !important;
    flex-wrap: wrap !important;
  }
}


/* =========================================================
   FINAL CLIENT REQUEST — AWARENESS SECTION HEADING RED
   Same treatment in EN / FR / AR.
   ========================================================= */
html[lang="en"] .awareness .section-title,
html[lang="fr"] .awareness .section-title,
html[lang="ar"] .awareness .section-title{
  color:var(--red,#f5222b) !important;
}
html[lang="en"] .awareness .section-title::before,
html[lang="en"] .awareness .section-title::after,
html[lang="fr"] .awareness .section-title::before,
html[lang="fr"] .awareness .section-title::after,
html[lang="ar"] .awareness .section-title::before,
html[lang="ar"] .awareness .section-title::after{
  background:var(--red,#f5222b) !important;
}

/* FINAL CLIENT REQUEST — Arabic About heading on ONE line.
   Keep the approved blue/red treatment, but place both phrases inline. */
@media (min-width:1200px){
  html[lang="ar"] .about-copy h1 {
    white-space:nowrap !important;
    font-size:clamp(50px,4.2vw,62px) !important;
  }
  html[lang="ar"] .about-copy h1 br { display:none !important; }
  html[lang="ar"] .about-copy h1 .about-h1-line {
    display:inline !important;
    white-space:nowrap !important;
  }
  html[lang="ar"] .about-copy h1 .about-h1-line.blue-line { color:var(--blue,#1244ad) !important; }
  html[lang="ar"] .about-copy h1 .about-h1-line.red-line {
    color:var(--red,#f5222b) !important;
    margin-inline-start:.18em !important;
  }
}

/* ---------- Mobile hamburger navigation ----------
   Desktop/tablet navigation remains unchanged.
   On phones, the full link row is replaced by a compact hamburger menu.
---------------------------------------------------- */
.mobile-menu-toggle{
  display:none;
  appearance:none;
  border:1.5px solid #ed1c24;
  background:#fff;
  border-radius:9px;
  width:42px;
  height:42px;
  padding:8px;
  cursor:pointer;
  flex:0 0 42px;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:5px;
  z-index:101;
}
.mobile-menu-toggle span{
  display:block;
  width:21px;
  height:2px;
  background:#123fa8;
  border-radius:2px;
  transition:transform .2s ease, opacity .2s ease;
}
.mobile-menu-open .mobile-menu-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.mobile-menu-open .mobile-menu-toggle span:nth-child(2){opacity:0;}
.mobile-menu-open .mobile-menu-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

@media (max-width:700px){
  .site-header-final, .site-header, .header{
    position:relative !important;
    overflow:visible !important;
  }

  .mobile-menu-toggle{
    display:flex;
    order:3;
    margin-left:auto;
    margin-right:0;
    margin-top:2px;
    margin-bottom:7px;
  }

  .nav-final, .nav{
    display:none !important;
    position:absolute !important;
    left:4% !important;
    right:4% !important;
    top:100% !important;
    width:auto !important;
    max-width:none !important;
    height:auto !important;
    margin:0 !important;
    padding:8px 0 !important;
    background:#fff !important;
    border:1px solid #e7edf5 !important;
    border-radius:0 0 12px 12px !important;
    box-shadow:0 8px 22px rgba(8,63,168,.12) !important;
    flex-direction:column !important;
    align-items:stretch !important;
    justify-content:flex-start !important;
    gap:0 !important;
    overflow:visible !important;
    z-index:100 !important;
  }

  .mobile-menu-open .nav-final,
  .mobile-menu-open .nav{
    display:flex !important;
  }

  .nav-final a, .nav a{
    width:100% !important;
    height:auto !important;
    min-height:48px !important;
    padding:12px 18px !important;
    justify-content:flex-start !important;
    border-bottom:1px solid #edf2f7 !important;
    font-size:15px !important;
  }
  .nav-final a:last-child, .nav a:last-child{border-bottom:0 !important;}

  .nav-final a.active:after, .nav a.active:after{
    left:18px !important;
    right:auto !important;
    bottom:6px !important;
    width:34px !important;
  }

  /* Keep the language switcher and Support button visible in the top row. */
  .header-right-final, .header-right{
    max-width:calc(100% - 70px) !important;
    margin-left:auto !important;
  }
}

@media (max-width:380px){
  .langs-final, .langs{font-size:12px !important;}
  .support-final, .support-btn, .support{
    padding:8px 10px !important;
    font-size:11px !important;
  }
}


/* FINAL — Support page mobile hero image visibility */
@media (max-width:700px){
  .support-page .hero{
    display:grid !important;
    grid-template-columns:1fr !important;
    width:100% !important;
    min-width:0 !important;
    overflow:visible !important;
  }
  .support-page .hero-image{
    display:block !important;
    visibility:visible !important;
    width:100% !important;
    height:280px !important;
    min-height:280px !important;
    max-height:none !important;
    order:2 !important;
    background-size:cover !important;
    background-position:center center !important;
  }

  html[lang="fr"] .support-page .hero-image{
    display:block !important;
    visibility:visible !important;
    width:100% !important;
    height:280px !important;
    min-height:280px !important;
  }

  html[lang="ar"] .ar-support-page .ar-support-hero{
    display:grid !important;
    grid-template-columns:1fr !important;
    width:100% !important;
    min-width:0 !important;
    min-height:0 !important;
    overflow:visible !important;
  }
  html[lang="ar"] .ar-support-page .ar-support-hero .image{
    display:block !important;
    visibility:visible !important;
    width:100% !important;
    height:280px !important;
    min-height:280px !important;
    max-height:none !important;
    order:2 !important;
    background-image:url('support/hero-support.png') !important;
    background-size:cover !important;
    background-position:center center !important;
  }
}