/* ─── TOKENS ─────────────────────────────────────────── */ :root { --blue: #094a8c; --navy: #052060; --blue-dk: #063266; --blm: #0d5fb3; --bll: #e8f0fa; --yellow: #f7ec11; --ydk: #d4c90e; --white: #ffffff; --paper: #f8f7f4; --ink: #1a1a1a; --muted: #5c5c5c; --rule: #d9d4c7; --radius: 3px; --font: 'Cairo', 'Segoe UI', sans-serif; --serif: 'Tajawal', Georgia, serif; --shadow: 0 2px 16px rgba(9,74,140,.1); } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* overflow-x on guards against mobile horizontal-scroll on EVERY page: pages redefine (for their bg) and some drop body{overflow-x}, but none override html's overflow — so this single rule clips the whole site. */ html { scroll-behavior: smooth; overflow-x: hidden; } body { font-family: var(--font); font-size: 16px; color: var(--ink); background: #fff; line-height: 1.7; overflow-x: hidden; /* ← added to prevent horizontal scroll on mobile */ } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; } /* ─── LANG SWITCHER BAR ──────────────────────────────── */ .lang-bar { background: linear-gradient(135deg, #0a1f3f 0%, #06204e 100%); padding: 6px 0; font-size: 13px; } .lang-bar-inner { max-width: 1200px; margin: 0 auto; padding: 0 15px; display: flex; align-items: center; justify-content: space-between; gap: 10px; } .lang-bar-text { color: rgba(255,255,255,.6); } .lang-switcher { display: flex; gap: 4px; } .lang-btn { background: none; border: 1px solid rgba(255,255,255,.2); color: rgba(255,255,255,.7); padding: 3px 12px; border-radius: 3px; font-size: 12px; font-family: var(--font); cursor: pointer; transition: all .2s; } .lang-btn:hover, .lang-btn.active { background: var(--yellow); color: var(--navy); border-color: var(--yellow); font-weight: 700; } /* ─── ALERT BANNER ───────────────────────────────────── */ .alert-banner { background: var(--yellow); color: var(--navy); padding: 10px 24px; display: flex; align-items: center; justify-content: center; gap: 16px; font-size: 14px; font-weight: 600; position: relative; } .alert-banner a { color: var(--blue); border-bottom: 1.5px solid var(--blue); font-weight: 700; transition: opacity .2s; } .alert-banner a:hover { opacity: .7; } .alert-close { position: absolute; inset-inline-start: 20px; background: none; border: none; color: var(--navy); font-size: 18px; cursor: pointer; opacity: .6; transition: opacity .2s; } .alert-close:hover { opacity: 1; } /* ── HEADER (dark navy, yellow accent) ── */ header { background: linear-gradient(135deg, #0a1f3f 0%, #06204e 100%); border-bottom: 3px solid var(--yellow); position: sticky; top: 0; z-index: 100; box-shadow: 0 4px 30px rgba(0,0,0,0.3); } .header-inner { max-width: 1200px; margin: 0 auto; padding: 0 32px; display: flex; align-items: center; justify-content: space-between; height: 80px; } .logo { display: flex; align-items: center; flex-shrink: 0; } .logo-img { width: 63px; height: 63px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255,255,255,0.2); transition: transform 0.3s, border-color 0.3s; flex-shrink: 0; } .logo:hover .logo-img { transform: rotate(-5deg) scale(1.08); border-color: var(--yellow); } nav { display: flex; align-items: center; gap: 10px; } .nav-link { padding: 10px 18px; font-size: 14px; font-weight: 600; color: rgba(255,255,255,0.85); border-radius: 30px; transition: all 0.25s; position: relative; } .nav-link::after { content: ''; position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); width: 0; height: 2px; background: var(--yellow); border-radius: 2px; transition: width 0.3s; } .nav-link:hover { color: #fff; background: rgba(255,255,255,0.1); } .nav-link:hover::after, .nav-link.active::after { width: 70%; } .nav-link.active { color: var(--yellow); font-weight: 700; } .header-btns { display: flex; gap: 10px; flex-shrink: 0; } .btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 26px; border-radius: 40px; font-size: 14px; font-weight: 700; font-family: var(--font); cursor: pointer; border: 2px solid transparent; transition: all 0.25s; white-space: nowrap; } .btn-outline { border-color: rgba(255,255,255,0.5); color: #fff; background: transparent; } .btn-outline:hover { border-color: var(--yellow); color: var(--yellow); background: rgba(247,236,17,0.1); } .btn-yellow { background: var(--yellow); color: var(--navy); border-color: var(--yellow); } .btn-yellow:hover { background: #fff; border-color: #fff; color: var(--navy); } /* ── Dropdown menus ── */ .nav-item { position: relative; } .nav-link { padding: 10px 18px; font-size: 14px; font-weight: 600; color: rgba(255,255,255,0.85); border-radius: 30px; transition: all 0.25s; cursor: pointer; white-space: nowrap; } .nav-link:hover { color: #fff; background: rgba(255,255,255,0.1); } .nav-link.active { background: rgba(9,74,140,0.6); color: #fff; font-weight: 700; } .dropdown { position: absolute; top: 100%; inset-inline-start: 0; min-width: 220px; background: #fff; border-radius: 3px; box-shadow: 0 12px 36px rgba(0,0,0,0.18); padding: 12px 0; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 0.25s, transform 0.25s, visibility 0.25s; z-index: 200; list-style: none; text-align: start; } .nav-item:hover .dropdown { opacity: 1; visibility: visible; transform: translateY(0); } .dropdown li a { display: block; padding: 10px 20px; font-size: 13px; font-weight: 600; color: var(--ink); transition: background 0.2s, color 0.2s; white-space: nowrap; } .dropdown li a:hover { background: var(--bll); color: var(--blue); } @media(max-width: 860px) { .nav-item .dropdown { position: static; background: transparent; box-shadow: none; padding: 0; opacity: 1; visibility: visible; transform: none; display: none; } .nav-item.open .dropdown { display: block; } .dropdown li a { color: #fff; padding: 10px 28px; } .dropdown li a:hover { background: rgba(255,255,255,0.1); color: var(--yellow); } } .breadcrumb-bar { background: var(--navy); border-bottom: 1px solid var(--rule); padding: 10px 0; } .breadcrumb { max-width: 1100px; margin: 0 auto; padding: 0 28px; display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); } .breadcrumb a { color: rgba(255,255,255,.5); transition: color .2s; } .breadcrumb a:hover { color: var(--blue); } .breadcrumb-sep { opacity: .4; } .breadcrumb-current { color: var(--ink); font-weight: 700; } /* ─── CONTAINER / SECTION ────────────────────────────── */ .container { max-width: 1200px; margin: 0 auto; padding: 0 32px; } .section { padding: 72px 0; } .section-header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 40px; } .section-title { font-size: 26px; font-weight: 900; color: var(--ink); position: relative; padding-bottom: 12px; } .section-title::after { content: ''; position: absolute; bottom: 0; inset-inline-start: 0; /* underline bar follows reading side (right in AR, left in FR) */ width: 50px; height: 3px; background: var(--yellow); border-radius: 2px; } .link-arrow { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: var(--blue); border-bottom: 2px solid transparent; transition: border-color .2s; padding-bottom: 2px; } .link-arrow:hover { border-color: var(--blue); } /* ─── FOOTER ─────────────────────────────────────────── */ footer { background: linear-gradient(135deg,#0a1f3f,#06204e); color: rgba(255,255,255,.85); } .footer-top { padding: 56px 0 48px; border-bottom: 1px solid rgba(255,255,255,.1); } .footer-grid { display: grid; grid-template-columns: 2fr 1.5fr 1.5fr; gap: 48px; } .footer-col-title { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.5px; color: var(--yellow); margin-bottom: 18px; } .footer-logo-area { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; } .footer-logo-img { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; } .footer-org-name { font-size: 16px; font-weight: 900; color: #fff; } .footer-org-sub { font-size: 12px; color: rgba(255,255,255,.5); } .footer-desc { font-size: 14px; color: rgba(255,255,255,.65); line-height: 1.7; margin-bottom: 20px; } /* Footer contact block (CMS-managed contact_info) */ .footer-contact { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-direction: column; gap: 9px; } .footer-contact li { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; color: rgba(255,255,255,.7); line-height: 1.5; } .footer-contact a { color: rgba(255,255,255,.7); transition: color .2s; } .footer-contact a:hover { color: var(--yellow); } .footer-contact-ic { flex-shrink: 0; opacity: .7; font-size: 13px; margin-top: 1px; } .footer-contact-sep { opacity: .4; margin: 0 6px; } .newsletter-form { display: flex; gap: 8px; } .newsletter-input { flex: 1; padding: 10px 16px; border-radius: var(--radius); border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.07); color: #fff; font-size: 14px; font-family: var(--font); outline: none; direction: inherit; /* follow the page language (RTL in AR, LTR in FR) instead of forcing RTL */ } .newsletter-input::placeholder { color: rgba(255,255,255,.35); } .newsletter-input:focus { border-color: var(--yellow); } .footer-nav-list { list-style: none; display: flex; flex-direction: column; gap: 10px; } .footer-nav-list a { font-size: 14px; color: rgba(255,255,255,.65); transition: color .2s; } .footer-nav-list a:hover { color: var(--yellow); } .social-links { display: flex; gap: 10px; margin-top: 8px; } .social-link { width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,255,255,.18); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: rgba(255,255,255,.7); transition: all .2s; } .social-link:hover { background: var(--yellow); color: var(--navy); border-color: var(--yellow); } .footer-bottom { padding: 22px 0; display: flex; align-items: center; justify-content: space-between; gap: 20px; } .footer-legal { font-size: 12px; color: rgba(255,255,255,.4); } .footer-legal-links { display: flex; gap: 20px; } .footer-legal-links a { font-size: 12px; color: rgba(255,255,255,.4); transition: color .2s; } .footer-legal-links a:hover { color: var(--yellow); } /* ─── RESPONSIVE NOTE ────────────────────────────────── */ @media (max-width: 900px) { /* Chrome-only responsive rules live in site.css; home-content collapses (.hero-inner, .cards-grid, .stats-grid, …) moved to home.css so they load after the base grid definitions and actually win on mobile. */ .footer-grid { grid-template-columns: 1fr; } } /* ── MOBILE MENU ── */ .mob-btn{display:none;background:none;border:none;cursor:pointer;padding:8px;flex-direction:column;gap:5px} .mob-btn span{display:block;width:22px;height:2px;background:rgba(255,255,255,.8);border-radius:1px;transition:all .25s} .mob-nav{position:fixed;inset:0;top:0px;background:linear-gradient(135deg,#0a1f3f,#06204e);z-index:500;display:flex;flex-direction:column;padding:16px 0;transform:translateX(100%);transition:transform .3s cubic-bezier(.4,0,.2,1);overflow-y:auto} /* .mob-nav{position:fixed;inset:0;top:78px;background:linear-gradient(135deg,#0a1f3f,#06204e);z-index:500;display:flex;flex-direction:column;padding:16px 0;transform:translateX(100%);transition:transform .3s cubic-bezier(.4,0,.2,1);overflow-y:auto} */ .mob-nav.open{transform:translateX(0)} .mob-nav a{display:block;padding:16px 24px;font-size:15px;font-weight:700;color:rgba(255,255,255,.82);border-bottom:1px solid rgba(255,255,255,.07);transition:background .2s,color .2s} .mob-nav a:hover,.mob-nav a.active{background:rgba(9,74,140,.4);color:var(--yellow)} @media(max-width:860px){nav{display:none}.mob-btn{display:flex}.header-btns .btn-outline{display:none}} @media(max-width:580px){ .footer-grid{grid-template-columns:1fr; gap:28px} .footer-bottom{flex-direction:column;align-items:flex-start;gap:10px} .section{padding:48px 0} } /* ── EXTRA MOBILE TWEAKS for very small screens ── */ @media(max-width:480px){ .footer-grid{grid-template-columns:1fr; gap:24px} .footer-top{padding:32px 0} .footer-legal-links{flex-wrap:wrap; gap:8px} .container{padding:0 12px} .header-inner{padding:0 12px} .section-title{font-size:22px} .section{padding:32px 0} .btn{padding:10px 18px; font-size:13px} } /* ── BTN ALIASES (site system) ── */ .btn-ghost{border-color:rgba(255,255,255,.4);color:#fff;background:transparent} .btn-ghost:hover{border-color:var(--yellow);color:var(--yellow)} .btn-y{background:var(--yellow);color:var(--navy);border-color:var(--yellow)} .btn-y:hover{background:#fff;border-color:#fff;color:var(--navy)} /* ─── Mobile nav: backdrop, close button, scroll-lock (added) ─────────── Ensures the burger drawer is always dismissable and sits above the page. */ #mobBackdrop{position:fixed;inset:0;background:rgba(5,32,96,.45);z-index:490;opacity:0;visibility:hidden;transition:opacity .3s ease;} #mobBackdrop.open{opacity:1;visibility:visible;} .mob-nav{z-index:500;} /* ✕ sits in the drawer's flow as the first item so it stays at the top and never overlaps the first nav link; aligned to the inline-end corner. */ #mobCloseBtn{align-self:flex-end;flex:0 0 auto;background:none;border:none;color:#fff;font-size:34px;line-height:1;cursor:pointer;padding:8px 22px 14px;margin:0;} body.nav-open{overflow:hidden;} /* ─── Bilingual direction fixes (added) ───────────────────────────────── Keep content logical so the French (LTR) version mirrors correctly from the same rules instead of staying stuck in RTL. */ input, textarea { text-align: start; } /* placeholders follow reading direction (fixes .newsletter-input in FR) */ .stat-item, .stat-item:last-child { border-inline-start: none; } /* ─── Mobile nav sub-links (accordion) so the drawer matches desktop dropdowns ── */ .mob-nav .mob-group{border-bottom:1px solid rgba(255,255,255,.07);} .mob-nav .mob-group summary{list-style:none;cursor:pointer;padding:16px 24px;font-size:15px;font-weight:700;color:rgba(255,255,255,.82);display:flex;align-items:center;justify-content:space-between;} .mob-nav .mob-group summary::-webkit-details-marker{display:none;} .mob-nav .mob-group summary::after{content:'⌄';font-size:18px;line-height:1;transition:transform .2s;} .mob-nav .mob-group[open] summary::after{transform:rotate(180deg);} .mob-nav .mob-group a{padding-block:12px;padding-inline:44px 24px;font-size:14px;font-weight:600;color:rgba(255,255,255,.6);border-bottom:none;} .mob-nav .mob-group a:hover{color:var(--yellow);background:rgba(255,255,255,.06);} /* ─── Direction-aware "more" arrow: points right in FR (LTR), left in AR (RTL). The literal glyph is stripped from content so this pseudo is the single source. */ .link-arrow::after{content:'→';margin-inline-start:6px;display:inline-block;} [dir="rtl"] .link-arrow::after{content:'←';} /* ─── Shared "back to top" button (rendered once in the layout, appears on every marketing page). Logical inset-inline-end so it sits in the reading-end corner in both RTL (AR) and LTR (FR). site.js toggles .visible past 300px of scroll. */ .back-to-top{position:fixed;bottom:26px;inset-inline-end:26px;width:48px;height:48px;border-radius:50%; background:var(--blue);color:#fff;border:none;display:flex;align-items:center;justify-content:center; font-size:22px;line-height:1;cursor:pointer;opacity:0;visibility:hidden;transform:translateY(12px); transition:opacity .3s,visibility .3s,transform .3s,background .2s;z-index:300; box-shadow:0 6px 18px rgba(0,0,0,.22);} .back-to-top.visible{opacity:.92;visibility:visible;transform:translateY(0);} .back-to-top:hover{opacity:1;background:var(--navy);transform:translateY(-3px);} @media(max-width:480px){.back-to-top{width:42px;height:42px;font-size:19px;bottom:18px;inset-inline-end:18px;}}