@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/poppins-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/poppins-400-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/poppins-500-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/poppins-500-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/poppins-600-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/poppins-600-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/poppins-700-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/poppins-700-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Noto Kufi Arabic Switch'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../fonts/noto-kufi-arabic-switch.woff2') format('woff2'); }
@font-face { font-family: 'Noto Kufi Arabic'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../fonts/noto-kufi-arabic-arabic.woff2') format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EEFF; }
@font-face { font-family: 'Noto Kufi Arabic'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../fonts/noto-kufi-arabic-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root {
--c-orange: #ee5b00;          
--c-orange-50: #fef7f2;       
--c-orange-900: #4e2207;      
--c-blue: #7eb6d9;            
--c-blue-glow: #80b5d7;
--c-navy: #081016;            
--c-navy-a: #022a47;          
--c-navy-b: #00121f;          
--c-white: #ffffff;
--c-black: #000000;
--c-ink: #111111;             
--c-ink-btn: #010101;         
--c-neutral-950: #1a1a1b;     
--c-neutral-600: #545556;     
--c-neutral-200: #d7d7d7;     
--c-muted: #4d4d4d;           
--c-line: #d0ccc8;            
--c-line-soft: rgba(132, 132, 132, 0.1);
--c-line-footer: #e8e8e8;
--c-frame: #efeae6;           
--c-hero-line: rgba(255, 255, 255, 0.16);
--f-en: 'Poppins', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
--f-ar: 'Noto Kufi Arabic', 'Poppins', ui-sans-serif, system-ui, 'Segoe UI', Tahoma, Arial, sans-serif;
--f-body: var(--f-en);
--fs-h1: clamp(24px, calc(24px + 32 * (100vw - 390px) / 1050), 56px);
--fs-h2: clamp(26px, calc(26px + 10 * (100vw - 390px) / 1050), 36px);
--fs-lead: clamp(14px, calc(14px + 6 * (100vw - 390px) / 1050), 20px);
--fs-stat: clamp(32px, calc(32px + 8 * (100vw - 390px) / 1050), 40px);
--container: 1200px;
--container-wide: 1280px;     
--gutter: clamp(20px, 4vw, 40px);
--section-y: clamp(40px, calc(40px + 40 * (100vw - 390px) / 1050), 80px);
--header-h: 112px;
--ease: cubic-bezier(0.42, 0, 0.58, 1);
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
--dur: 300ms;
--notch: polygon(0 0, 100% 0, 100% 100%, 52.1% 100%, 52.1% 48.4%, 0 48.4%);        
--notch-tl: polygon(0 0, 100% 0, 100% 48.4%, 47.9% 48.4%, 47.9% 100%, 0 100%);     
--notch-br: polygon(52.1% 0, 100% 0, 100% 100%, 0 100%, 0 51.6%, 52.1% 51.6%);     
--notch-bl: polygon(0 0, 47.9% 0, 47.9% 51.6%, 100% 51.6%, 100% 100%, 0 100%);     
--z-header: 50;
--z-menu: 60;
--z-modal: 80;
}
@media (max-width: 1199.98px) {
:root { --header-h: 72px; }
}
:root:lang(ar) { --f-body: var(--f-ar); }
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
font-family: var(--f-body);
font-size: 16px;
line-height: 1.5;
color: var(--c-neutral-950);
background: var(--c-white);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
overflow-x: clip;
}
img, picture, video, svg, canvas { display: block; max-width: 100%; }
img, video { height: auto; }
svg.icon { flex-shrink: 0; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
h1, h2, h3, h4, h5, h6 { font-weight: 700; overflow-wrap: break-word; }
p { overflow-wrap: break-word; }
table { border-collapse: collapse; }
[hidden] { display: none !important; }
dialog { margin: auto; } 
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--c-orange); outline-offset: 3px; }
:is(.hero, .page-hero, .stats, .cta-band, .academy-band, .site-header:not(.site-header--light)) :focus-visible { outline-color: var(--c-white); }
.site-header .mega-menu :focus-visible { outline-color: var(--c-orange); }
.site-header .mega-menu .promo-card :focus-visible { outline-color: var(--c-white); }
::selection { background: var(--c-orange); color: var(--c-white); }
.visually-hidden {
position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link {
position: fixed; inset-inline-start: 16px; top: 12px; z-index: 100;
padding: 10px 16px; background: var(--c-white); color: var(--c-ink); font-weight: 600;
transform: translateY(-160%); transition: transform var(--dur) var(--ease);
}
.skip-link:focus { transform: none; }
.container { width: min(var(--container), 100% - 2 * var(--gutter)); margin-inline: auto; }
.container--wide { width: min(var(--container-wide), 100% - 2 * var(--gutter)); }
.section { position: relative; padding-block: var(--section-y); }
.section--tint { background: var(--c-orange-50); }
.section--dark { background: var(--c-black); color: var(--c-white); }
html.is-locked, html.is-locked body { overflow: hidden; }
.eyebrow {
display: flex; inline-size: fit-content; align-items: center; gap: 6px;
font-size: 14px; font-weight: 500; line-height: 1.5; color: var(--c-orange);
}
.eyebrow::before { content: ''; inline-size: 10px; block-size: 10px; background: currentColor; flex: none; }
.eyebrow--blue { color: var(--c-blue); }
.eyebrow--tight { line-height: 13px; min-block-size: 15px; }
.eyebrow--bold { font-weight: 700; }
.h-section {
font-size: var(--fs-h2); font-weight: 700; line-height: 1.4; color: var(--c-ink);
}
.h-section--tight { line-height: 1.3333; }      
.h-section--auto { line-height: normal; }        
.h-section--white { color: var(--c-white); }
.sec-head { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.sec-head--center { align-items: center; text-align: center; margin-inline: auto; }
.sec-head__text { font-size: 18px; line-height: 1.5; color: var(--c-neutral-950); max-inline-size: 764px; }
.sec-head__text--sm { font-size: 16px; }
.sec-head__text--muted { font-size: 15px; font-weight: 500; line-height: normal; color: var(--c-muted); max-inline-size: 760px; }
.sec-head-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.sec-head-row .sec-head { gap: 2px; }
.prose > p + p { margin-block-start: 1.5em; }
:lang(ar) .h-section { letter-spacing: 0; }
@media (max-width: 767.98px) {
.h-section { line-height: 1.25; }
.sec-head-row { align-items: flex-start; }
}
.btn {
--btn-bg: var(--c-white);
--btn-fg: var(--c-ink-btn);
--btn-bd: transparent;
--btn-mark: var(--c-orange);
--btn-hover-bg: var(--c-orange);
--btn-hover-fg: var(--c-white);
position: relative;
display: flex; inline-size: fit-content; align-items: center; justify-content: center; gap: 8px;
min-block-size: 56px; padding: 15px 24px; 
background: var(--btn-bg); color: var(--btn-fg);
border: 1px solid var(--btn-bd);
font-size: 16px; font-weight: 500; line-height: 1.5; white-space: nowrap; text-align: center;
transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
-webkit-tap-highlight-color: transparent;
}
.btn--outline { --btn-bd: var(--c-neutral-200); gap: 10px; }
.btn--light { --btn-bd: transparent; }
.btn--sm { min-block-size: 53px; padding: 16px 24px; font-size: 14px; }
.btn--block { display: flex; inline-size: 100%; }
.btn--blue { --btn-mark: var(--c-blue); --btn-hover-bg: var(--c-blue); }
.btn__label { display: inline-grid; }
.btn__label::after {
content: attr(data-label); font-weight: 600; visibility: hidden; block-size: 0; overflow: hidden;
grid-area: 1 / 1; pointer-events: none;
}
.btn__label > span { grid-area: 1 / 1; }
.btn__mark {
inline-size: 12px; block-size: 12px; flex: none;
background: var(--btn-mark); clip-path: var(--notch);
transition: rotate var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
[dir='rtl'] .btn__mark { scale: -1 1; }
@media (hover: hover) {
.btn:hover { background: var(--btn-hover-bg); border-color: var(--btn-hover-bg); color: var(--btn-hover-fg); }
.btn:hover .btn__label { font-weight: 600; }
.btn:hover .btn__mark { rotate: 45deg; background: var(--btn-hover-fg); }
[dir='rtl'] .btn:hover .btn__mark { rotate: -45deg; }
}
.btn:focus-visible { outline-offset: 4px; }
.btn:active { transform: translateY(1px); }
.more-link {
display: inline-flex; align-items: center; gap: 4px;
font-size: 14px; font-weight: 700; line-height: normal; color: var(--c-white);
}
.more-link__mark {
inline-size: 10px; block-size: 10px; margin-inline: 2px; flex: none;
background: currentColor; clip-path: var(--notch); rotate: 45deg;
transition: translate var(--dur) var(--ease);
}
[dir='rtl'] .more-link__mark { scale: -1 1; rotate: -45deg; }
:lang(ar) .more-link { font-weight: 700; }
.deco { position: absolute; inset: 0; pointer-events: none; }
[dir='rtl'] .deco--mirror { transform: scaleX(-1); }
.notch { display: block; background: currentColor; clip-path: var(--notch); }
.notch--tl { clip-path: var(--notch-tl); }
.notch--br { clip-path: var(--notch-br); }
.notch--bl { clip-path: var(--notch-bl); }
.glow {
--s: var(--glow-blur, 137px);
position: absolute; pointer-events: none; z-index: 0;
}
.glow::before {
content: ''; position: absolute; inset: calc(var(--s) * -3);
background: var(--glow, var(--c-orange));
-webkit-mask: var(--glow-x, linear-gradient(to right, rgb(0 0 0 / 0.001) calc(var(--s) * 0), rgb(0 0 0 / 0.004) calc(var(--s) * 0.375), rgb(0 0 0 / 0.012) calc(var(--s) * 0.75), rgb(0 0 0 / 0.03) calc(var(--s) * 1.125), rgb(0 0 0 / 0.067) calc(var(--s) * 1.5), rgb(0 0 0 / 0.13) calc(var(--s) * 1.875), rgb(0 0 0 / 0.227) calc(var(--s) * 2.25), rgb(0 0 0 / 0.354) calc(var(--s) * 2.625), rgb(0 0 0 / 0.5) calc(var(--s) * 3), rgb(0 0 0 / 0.646) calc(var(--s) * 3.375), rgb(0 0 0 / 0.773) calc(var(--s) * 3.75), rgb(0 0 0 / 0.87) calc(var(--s) * 4.125), rgb(0 0 0 / 0.933) calc(var(--s) * 4.5), rgb(0 0 0 / 0.97) calc(var(--s) * 4.875), rgb(0 0 0 / 0.988) calc(var(--s) * 5.25), rgb(0 0 0 / 0.996) calc(var(--s) * 5.625), rgb(0 0 0 / 0.999) calc(var(--s) * 6), rgb(0 0 0 / 0.999) calc(100% - var(--s) * 6), rgb(0 0 0 / 0.996) calc(100% - var(--s) * 5.625), rgb(0 0 0 / 0.988) calc(100% - var(--s) * 5.25), rgb(0 0 0 / 0.97) calc(100% - var(--s) * 4.875), rgb(0 0 0 / 0.933) calc(100% - var(--s) * 4.5), rgb(0 0 0 / 0.87) calc(100% - var(--s) * 4.125), rgb(0 0 0 / 0.773) calc(100% - var(--s) * 3.75), rgb(0 0 0 / 0.646) calc(100% - var(--s) * 3.375), rgb(0 0 0 / 0.5) calc(100% - var(--s) * 3), rgb(0 0 0 / 0.354) calc(100% - var(--s) * 2.625), rgb(0 0 0 / 0.227) calc(100% - var(--s) * 2.25), rgb(0 0 0 / 0.13) calc(100% - var(--s) * 1.875), rgb(0 0 0 / 0.067) calc(100% - var(--s) * 1.5), rgb(0 0 0 / 0.03) calc(100% - var(--s) * 1.125), rgb(0 0 0 / 0.012) calc(100% - var(--s) * 0.75), rgb(0 0 0 / 0.004) calc(100% - var(--s) * 0.375), rgb(0 0 0 / 0.001) calc(100% - var(--s) * 0))), var(--glow-y, linear-gradient(to bottom, rgb(0 0 0 / 0.001) 0%, rgb(0 0 0 / 0.004) 4.246%, rgb(0 0 0 / 0.012) 8.492%, rgb(0 0 0 / 0.03) 12.738%, rgb(0 0 0 / 0.067) 16.983%, rgb(0 0 0 / 0.13) 21.229%, rgb(0 0 0 / 0.226) 25.475%, rgb(0 0 0 / 0.353) 29.721%, rgb(0 0 0 / 0.432) 32.066%, rgb(0 0 0 / 0.498) 33.967%, rgb(0 0 0 / 0.578) 36.312%, rgb(0 0 0 / 0.639) 38.213%, rgb(0 0 0 / 0.708) 40.558%, rgb(0 0 0 / 0.755) 42.459%, rgb(0 0 0 / 0.8) 44.804%, rgb(0 0 0 / 0.826) 46.705%, rgb(0 0 0 / 0.842) 49.05%, rgb(0 0 0 / 0.843) 50%, rgb(0 0 0 / 0.842) 50.95%, rgb(0 0 0 / 0.826) 53.295%, rgb(0 0 0 / 0.8) 55.196%, rgb(0 0 0 / 0.755) 57.541%, rgb(0 0 0 / 0.708) 59.442%, rgb(0 0 0 / 0.639) 61.787%, rgb(0 0 0 / 0.578) 63.688%, rgb(0 0 0 / 0.498) 66.033%, rgb(0 0 0 / 0.432) 67.934%, rgb(0 0 0 / 0.353) 70.279%, rgb(0 0 0 / 0.226) 74.525%, rgb(0 0 0 / 0.13) 78.771%, rgb(0 0 0 / 0.067) 83.017%, rgb(0 0 0 / 0.03) 87.262%, rgb(0 0 0 / 0.012) 91.508%, rgb(0 0 0 / 0.004) 95.754%, rgb(0 0 0 / 0.001) 100%));
-webkit-mask-composite: source-in;
mask: var(--glow-x, linear-gradient(to right, rgb(0 0 0 / 0.001) calc(var(--s) * 0), rgb(0 0 0 / 0.004) calc(var(--s) * 0.375), rgb(0 0 0 / 0.012) calc(var(--s) * 0.75), rgb(0 0 0 / 0.03) calc(var(--s) * 1.125), rgb(0 0 0 / 0.067) calc(var(--s) * 1.5), rgb(0 0 0 / 0.13) calc(var(--s) * 1.875), rgb(0 0 0 / 0.227) calc(var(--s) * 2.25), rgb(0 0 0 / 0.354) calc(var(--s) * 2.625), rgb(0 0 0 / 0.5) calc(var(--s) * 3), rgb(0 0 0 / 0.646) calc(var(--s) * 3.375), rgb(0 0 0 / 0.773) calc(var(--s) * 3.75), rgb(0 0 0 / 0.87) calc(var(--s) * 4.125), rgb(0 0 0 / 0.933) calc(var(--s) * 4.5), rgb(0 0 0 / 0.97) calc(var(--s) * 4.875), rgb(0 0 0 / 0.988) calc(var(--s) * 5.25), rgb(0 0 0 / 0.996) calc(var(--s) * 5.625), rgb(0 0 0 / 0.999) calc(var(--s) * 6), rgb(0 0 0 / 0.999) calc(100% - var(--s) * 6), rgb(0 0 0 / 0.996) calc(100% - var(--s) * 5.625), rgb(0 0 0 / 0.988) calc(100% - var(--s) * 5.25), rgb(0 0 0 / 0.97) calc(100% - var(--s) * 4.875), rgb(0 0 0 / 0.933) calc(100% - var(--s) * 4.5), rgb(0 0 0 / 0.87) calc(100% - var(--s) * 4.125), rgb(0 0 0 / 0.773) calc(100% - var(--s) * 3.75), rgb(0 0 0 / 0.646) calc(100% - var(--s) * 3.375), rgb(0 0 0 / 0.5) calc(100% - var(--s) * 3), rgb(0 0 0 / 0.354) calc(100% - var(--s) * 2.625), rgb(0 0 0 / 0.227) calc(100% - var(--s) * 2.25), rgb(0 0 0 / 0.13) calc(100% - var(--s) * 1.875), rgb(0 0 0 / 0.067) calc(100% - var(--s) * 1.5), rgb(0 0 0 / 0.03) calc(100% - var(--s) * 1.125), rgb(0 0 0 / 0.012) calc(100% - var(--s) * 0.75), rgb(0 0 0 / 0.004) calc(100% - var(--s) * 0.375), rgb(0 0 0 / 0.001) calc(100% - var(--s) * 0))), var(--glow-y, linear-gradient(to bottom, rgb(0 0 0 / 0.001) 0%, rgb(0 0 0 / 0.004) 4.246%, rgb(0 0 0 / 0.012) 8.492%, rgb(0 0 0 / 0.03) 12.738%, rgb(0 0 0 / 0.067) 16.983%, rgb(0 0 0 / 0.13) 21.229%, rgb(0 0 0 / 0.226) 25.475%, rgb(0 0 0 / 0.353) 29.721%, rgb(0 0 0 / 0.432) 32.066%, rgb(0 0 0 / 0.498) 33.967%, rgb(0 0 0 / 0.578) 36.312%, rgb(0 0 0 / 0.639) 38.213%, rgb(0 0 0 / 0.708) 40.558%, rgb(0 0 0 / 0.755) 42.459%, rgb(0 0 0 / 0.8) 44.804%, rgb(0 0 0 / 0.826) 46.705%, rgb(0 0 0 / 0.842) 49.05%, rgb(0 0 0 / 0.843) 50%, rgb(0 0 0 / 0.842) 50.95%, rgb(0 0 0 / 0.826) 53.295%, rgb(0 0 0 / 0.8) 55.196%, rgb(0 0 0 / 0.755) 57.541%, rgb(0 0 0 / 0.708) 59.442%, rgb(0 0 0 / 0.639) 61.787%, rgb(0 0 0 / 0.578) 63.688%, rgb(0 0 0 / 0.498) 66.033%, rgb(0 0 0 / 0.432) 67.934%, rgb(0 0 0 / 0.353) 70.279%, rgb(0 0 0 / 0.226) 74.525%, rgb(0 0 0 / 0.13) 78.771%, rgb(0 0 0 / 0.067) 83.017%, rgb(0 0 0 / 0.03) 87.262%, rgb(0 0 0 / 0.012) 91.508%, rgb(0 0 0 / 0.004) 95.754%, rgb(0 0 0 / 0.001) 100%));
mask-composite: intersect;
}
.media-frame {
--mf-bg: var(--c-white);
--mf-line: var(--c-frame);
--mf-corner: var(--c-frame);
--mf-corner-hover: var(--c-orange);
--mf-bg-hover: var(--c-navy);
position: relative;
container-type: inline-size;
inline-size: 100%;
max-inline-size: 541px;
aspect-ratio: 541 / 420;
flex: none;
}
.media-frame__panel {
position: absolute; inset: 0;
background: var(--mf-bg);
border: 1px solid var(--mf-line);
transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.media-frame__media {
position: absolute; inset: 3.697cqi; 
overflow: hidden;
}
.media-frame__media img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.media-frame__media::after { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, var(--mf-shade, 0.2)); }
.media-frame__outline {
position: absolute; left: 7.73cqi; top: 7.21cqi; inline-size: 17.96cqi; block-size: auto; 
transform: scaleX(-1);
}
.media-frame__outline svg { inline-size: 100%; block-size: auto; }
.media-frame__corner {
position: absolute; inline-size: 6.654cqi; block-size: 6.654cqi; 
color: var(--mf-corner);
transition: translate var(--dur) var(--ease), color var(--dur) var(--ease);
}
.media-frame__corner--a { right: -1.294cqi; top: -1.109cqi; }                          
.media-frame__corner--b { left: -0.924cqi; bottom: -1.664cqi; clip-path: var(--notch-bl); } 
@media (hover: hover) {
.media-frame:hover { --mf-bg: var(--mf-bg-hover); --mf-line: var(--mf-bg-hover); }
.media-frame:hover .media-frame__corner { color: var(--mf-corner-hover); }
.media-frame:hover .media-frame__corner--a { translate: -3.697cqi 3.697cqi; }
.media-frame:hover .media-frame__corner--b { translate: 3.697cqi -4.25cqi; }
}
.media-frame--academy { --mf-bg: transparent; --mf-line: var(--c-white); --mf-corner: var(--c-white); --mf-corner-hover: var(--c-blue); --mf-bg-hover: #f9fbfd; --mf-shade: 0; }
.media-frame__badge {
position: absolute; left: 10.17cqi; top: 18.3cqi; inline-size: 11.46cqi; 
opacity: 0; transition: opacity var(--dur) var(--ease);
}
[dir='rtl'] .media-frame__badge { transform: scaleX(-1); } 
@media (hover: hover) {
.media-frame--academy:hover .media-frame__badge { opacity: 1; }
}
.site-header {
position: fixed; inset-block-start: 0; inset-inline: 0; z-index: var(--z-header);
color: var(--c-white);
border-block-end: 1px solid var(--c-hero-line);
transition: background-color 400ms var(--ease), border-color 400ms var(--ease), backdrop-filter 400ms var(--ease);
}
.site-header.is-scrolled, .site-header.is-open {
background: rgba(8, 16, 22, 0.95);
border-color: rgba(255, 255, 255, 0.08);
}
@media (hover: hover) and (pointer: fine) {
.site-header.is-scrolled, .site-header.is-open {
background: rgba(8, 16, 22, 0.86);
-webkit-backdrop-filter: saturate(140%) blur(14px);
backdrop-filter: saturate(140%) blur(14px);
}
}
.site-header__bar {
display: flex; align-items: center; justify-content: space-between; gap: 24px;
block-size: var(--header-h); padding-block: 24px;
transition: block-size 400ms var(--ease);
}
.site-header.is-scrolled .site-header__bar { block-size: 88px; }
.site-header__logo { display: block; flex: none; }
.site-header__logo img { inline-size: 125px; block-size: 40px; }
.primary-nav__list { display: flex; align-items: center; }
.nav-link {
display: inline-flex; align-items: center; gap: 8px;
padding: 8px 16px; border-radius: 12px;
font-size: 16px; font-weight: 500; line-height: 1.5; color: var(--c-white); white-space: nowrap;
transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.nav-link .icon { inline-size: 20px; block-size: 20px; transition: rotate var(--dur) var(--ease); }
.nav-link[aria-expanded='true'] .icon { rotate: 180deg; }
@media (hover: hover) { .nav-link:hover { color: var(--c-orange); } }
.nav-link[aria-current='page'] { color: var(--c-white); }
.nav-link[aria-expanded='true'] { color: var(--c-orange); }
.site-header__actions { display: flex; align-items: center; gap: 10px; flex: none; }
.lang-switch {
display: inline-flex; align-items: center; gap: 8px; padding: 16px;
font-size: 16px; font-weight: 500; line-height: 1.5; color: var(--c-white);
transition: color var(--dur) var(--ease);
}
.lang-switch .icon { inline-size: 24px; block-size: 24px; }
.lang-switch:lang(ar), .mobile-menu__lang:lang(ar) { font-family: 'Noto Kufi Arabic Switch', var(--f-ar); }
.lang-switch:lang(en) { font-family: var(--f-en); }
@media (hover: hover) { .lang-switch:hover { color: var(--c-orange); } }
.menu-toggle {
display: none; place-items: center; inline-size: 40px; block-size: 40px; padding: 8px;
background: rgba(255, 255, 255, 0.1); color: var(--c-white);
transition: background-color var(--dur) var(--ease);
}
.menu-toggle .icon { inline-size: 24px; block-size: 24px; }
@media (hover: hover) { .menu-toggle:hover { background: rgba(255, 255, 255, 0.2); } }
@media (max-width: 1199.98px) {
.primary-nav, .site-header__academy { display: none; }
.menu-toggle { display: grid; }
.site-header__bar { padding-block: 16px; }
.site-header.is-scrolled .site-header__bar { block-size: 64px; }
.site-header__logo img { inline-size: 100px; block-size: 32px; }
.lang-switch { padding: 8px; font-size: 14px; }
.lang-switch .icon { inline-size: 20px; block-size: 20px; }
}
.mega-menu {
position: absolute; inset-inline: 0; inset-block-start: calc(100% + 1px);
inline-size: min(1390px, 100% - 50px); margin-inline: auto;
padding: 24px; background: var(--c-white); color: var(--c-black);
box-shadow: 0 24px 48px -12px rgba(8, 16, 22, 0.28);
opacity: 0; visibility: hidden; translate: 0 -8px;
transition: opacity 260ms var(--ease), translate 260ms var(--ease), visibility 0s linear 260ms;
}
.mega-menu.is-open { opacity: 1; visibility: visible; translate: 0 0; transition-delay: 0s; }
@media (max-width: 1199.98px) { .mega-menu { display: none; } }
.mega-menu__grid { display: flex; align-items: flex-start; gap: 32px; }
.mega-menu__col { flex: 1 1 0; min-inline-size: 0; display: flex; flex-direction: column; }
.mega-menu__aside { flex: 1 1 0; min-inline-size: 0; display: flex; flex-direction: column; gap: 24px; align-self: stretch; }
.mega-link {
display: flex; align-items: center; gap: 16px; padding: 20px;
font-size: 16px; font-weight: 600; line-height: 1.5; color: var(--c-black);
transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.mega-link__label { flex: 1; }
@media (hover: hover) {
.mega-link:hover { background: var(--c-orange-50); color: var(--c-orange); }
.mega-link:hover .icon-tile { background: var(--c-orange); color: var(--c-white); }
}
.mega-link[aria-current='page'] { color: var(--c-orange); }
.promo-card {
position: relative; overflow: hidden; isolation: isolate;
display: flex; flex-direction: column; gap: 24px; padding: 24px;
background: linear-gradient(96.48deg, var(--c-navy-a) 8.5%, var(--c-navy-b) 92.68%);
color: var(--c-white);
}
.promo-card::after {
content: ''; position: absolute; z-index: -1;
--s: 72px; inset-inline-end: calc(-10px - 3 * var(--s)); bottom: calc(-136px - 3 * var(--s));
inline-size: calc(587px + 6 * var(--s)); block-size: calc(182px + 6 * var(--s)); background: var(--c-blue);
-webkit-mask: linear-gradient(to right, rgb(0 0 0 / 0.001) calc(var(--s) * 0), rgb(0 0 0 / 0.004) calc(var(--s) * 0.375), rgb(0 0 0 / 0.012) calc(var(--s) * 0.75), rgb(0 0 0 / 0.03) calc(var(--s) * 1.125), rgb(0 0 0 / 0.067) calc(var(--s) * 1.5), rgb(0 0 0 / 0.13) calc(var(--s) * 1.875), rgb(0 0 0 / 0.227) calc(var(--s) * 2.25), rgb(0 0 0 / 0.354) calc(var(--s) * 2.625), rgb(0 0 0 / 0.5) calc(var(--s) * 3), rgb(0 0 0 / 0.646) calc(var(--s) * 3.375), rgb(0 0 0 / 0.773) calc(var(--s) * 3.75), rgb(0 0 0 / 0.87) calc(var(--s) * 4.125), rgb(0 0 0 / 0.933) calc(var(--s) * 4.5), rgb(0 0 0 / 0.97) calc(var(--s) * 4.875), rgb(0 0 0 / 0.988) calc(var(--s) * 5.25), rgb(0 0 0 / 0.996) calc(var(--s) * 5.625), rgb(0 0 0 / 0.999) calc(var(--s) * 6), rgb(0 0 0 / 0.999) calc(100% - var(--s) * 6), rgb(0 0 0 / 0.996) calc(100% - var(--s) * 5.625), rgb(0 0 0 / 0.988) calc(100% - var(--s) * 5.25), rgb(0 0 0 / 0.97) calc(100% - var(--s) * 4.875), rgb(0 0 0 / 0.933) calc(100% - var(--s) * 4.5), rgb(0 0 0 / 0.87) calc(100% - var(--s) * 4.125), rgb(0 0 0 / 0.773) calc(100% - var(--s) * 3.75), rgb(0 0 0 / 0.646) calc(100% - var(--s) * 3.375), rgb(0 0 0 / 0.5) calc(100% - var(--s) * 3), rgb(0 0 0 / 0.354) calc(100% - var(--s) * 2.625), rgb(0 0 0 / 0.227) calc(100% - var(--s) * 2.25), rgb(0 0 0 / 0.13) calc(100% - var(--s) * 1.875), rgb(0 0 0 / 0.067) calc(100% - var(--s) * 1.5), rgb(0 0 0 / 0.03) calc(100% - var(--s) * 1.125), rgb(0 0 0 / 0.012) calc(100% - var(--s) * 0.75), rgb(0 0 0 / 0.004) calc(100% - var(--s) * 0.375), rgb(0 0 0 / 0.001) calc(100% - var(--s) * 0)), linear-gradient(to bottom, rgb(0 0 0 / 0.001) 0%, rgb(0 0 0 / 0.004) 4.397%, rgb(0 0 0 / 0.012) 8.795%, rgb(0 0 0 / 0.03) 13.192%, rgb(0 0 0 / 0.067) 17.59%, rgb(0 0 0 / 0.13) 21.987%, rgb(0 0 0 / 0.226) 26.384%, rgb(0 0 0 / 0.317) 29.642%, rgb(0 0 0 / 0.352) 30.782%, rgb(0 0 0 / 0.457) 34.039%, rgb(0 0 0 / 0.494) 35.179%, rgb(0 0 0 / 0.597) 38.436%, rgb(0 0 0 / 0.631) 39.577%, rgb(0 0 0 / 0.713) 42.834%, rgb(0 0 0 / 0.736) 43.974%, rgb(0 0 0 / 0.781) 47.231%, rgb(0 0 0 / 0.789) 48.371%, rgb(0 0 0 / 0.794) 50%, rgb(0 0 0 / 0.789) 51.629%, rgb(0 0 0 / 0.781) 52.769%, rgb(0 0 0 / 0.736) 56.026%, rgb(0 0 0 / 0.713) 57.166%, rgb(0 0 0 / 0.631) 60.423%, rgb(0 0 0 / 0.597) 61.564%, rgb(0 0 0 / 0.494) 64.821%, rgb(0 0 0 / 0.457) 65.961%, rgb(0 0 0 / 0.352) 69.218%, rgb(0 0 0 / 0.317) 70.358%, rgb(0 0 0 / 0.226) 73.616%, rgb(0 0 0 / 0.13) 78.013%, rgb(0 0 0 / 0.067) 82.41%, rgb(0 0 0 / 0.03) 86.808%, rgb(0 0 0 / 0.012) 91.205%, rgb(0 0 0 / 0.004) 95.603%, rgb(0 0 0 / 0.001) 100%);
-webkit-mask-composite: source-in;
mask: linear-gradient(to right, rgb(0 0 0 / 0.001) calc(var(--s) * 0), rgb(0 0 0 / 0.004) calc(var(--s) * 0.375), rgb(0 0 0 / 0.012) calc(var(--s) * 0.75), rgb(0 0 0 / 0.03) calc(var(--s) * 1.125), rgb(0 0 0 / 0.067) calc(var(--s) * 1.5), rgb(0 0 0 / 0.13) calc(var(--s) * 1.875), rgb(0 0 0 / 0.227) calc(var(--s) * 2.25), rgb(0 0 0 / 0.354) calc(var(--s) * 2.625), rgb(0 0 0 / 0.5) calc(var(--s) * 3), rgb(0 0 0 / 0.646) calc(var(--s) * 3.375), rgb(0 0 0 / 0.773) calc(var(--s) * 3.75), rgb(0 0 0 / 0.87) calc(var(--s) * 4.125), rgb(0 0 0 / 0.933) calc(var(--s) * 4.5), rgb(0 0 0 / 0.97) calc(var(--s) * 4.875), rgb(0 0 0 / 0.988) calc(var(--s) * 5.25), rgb(0 0 0 / 0.996) calc(var(--s) * 5.625), rgb(0 0 0 / 0.999) calc(var(--s) * 6), rgb(0 0 0 / 0.999) calc(100% - var(--s) * 6), rgb(0 0 0 / 0.996) calc(100% - var(--s) * 5.625), rgb(0 0 0 / 0.988) calc(100% - var(--s) * 5.25), rgb(0 0 0 / 0.97) calc(100% - var(--s) * 4.875), rgb(0 0 0 / 0.933) calc(100% - var(--s) * 4.5), rgb(0 0 0 / 0.87) calc(100% - var(--s) * 4.125), rgb(0 0 0 / 0.773) calc(100% - var(--s) * 3.75), rgb(0 0 0 / 0.646) calc(100% - var(--s) * 3.375), rgb(0 0 0 / 0.5) calc(100% - var(--s) * 3), rgb(0 0 0 / 0.354) calc(100% - var(--s) * 2.625), rgb(0 0 0 / 0.227) calc(100% - var(--s) * 2.25), rgb(0 0 0 / 0.13) calc(100% - var(--s) * 1.875), rgb(0 0 0 / 0.067) calc(100% - var(--s) * 1.5), rgb(0 0 0 / 0.03) calc(100% - var(--s) * 1.125), rgb(0 0 0 / 0.012) calc(100% - var(--s) * 0.75), rgb(0 0 0 / 0.004) calc(100% - var(--s) * 0.375), rgb(0 0 0 / 0.001) calc(100% - var(--s) * 0)), linear-gradient(to bottom, rgb(0 0 0 / 0.001) 0%, rgb(0 0 0 / 0.004) 4.397%, rgb(0 0 0 / 0.012) 8.795%, rgb(0 0 0 / 0.03) 13.192%, rgb(0 0 0 / 0.067) 17.59%, rgb(0 0 0 / 0.13) 21.987%, rgb(0 0 0 / 0.226) 26.384%, rgb(0 0 0 / 0.317) 29.642%, rgb(0 0 0 / 0.352) 30.782%, rgb(0 0 0 / 0.457) 34.039%, rgb(0 0 0 / 0.494) 35.179%, rgb(0 0 0 / 0.597) 38.436%, rgb(0 0 0 / 0.631) 39.577%, rgb(0 0 0 / 0.713) 42.834%, rgb(0 0 0 / 0.736) 43.974%, rgb(0 0 0 / 0.781) 47.231%, rgb(0 0 0 / 0.789) 48.371%, rgb(0 0 0 / 0.794) 50%, rgb(0 0 0 / 0.789) 51.629%, rgb(0 0 0 / 0.781) 52.769%, rgb(0 0 0 / 0.736) 56.026%, rgb(0 0 0 / 0.713) 57.166%, rgb(0 0 0 / 0.631) 60.423%, rgb(0 0 0 / 0.597) 61.564%, rgb(0 0 0 / 0.494) 64.821%, rgb(0 0 0 / 0.457) 65.961%, rgb(0 0 0 / 0.352) 69.218%, rgb(0 0 0 / 0.317) 70.358%, rgb(0 0 0 / 0.226) 73.616%, rgb(0 0 0 / 0.13) 78.013%, rgb(0 0 0 / 0.067) 82.41%, rgb(0 0 0 / 0.03) 86.808%, rgb(0 0 0 / 0.012) 91.205%, rgb(0 0 0 / 0.004) 95.603%, rgb(0 0 0 / 0.001) 100%);
mask-composite: intersect;
transition: translate 600ms var(--ease-out), opacity var(--dur) var(--ease);
}
.promo-card__head { display: flex; flex-direction: column; gap: 16px; }
.promo-card__title { font-size: 18px; font-weight: 700; line-height: 1.5; }
.promo-card__text { padding-block-start: 4px; font-size: 16px; line-height: 1.5; }
.promo-card .more-link { block-size: 30px; }
@media (hover: hover) {
.promo-card:hover::after { translate: 0 -24px; }
.promo-card:hover .more-link__mark { translate: 3px 0; }
[dir='rtl'] .promo-card:hover .more-link__mark { translate: -3px 0; }
}
.mobile-menu {
position: fixed; inset: 0; z-index: var(--z-menu);
display: flex; flex-direction: column; gap: 24px;
padding: 24px 16px max(24px, env(safe-area-inset-bottom));
background: var(--c-white); color: var(--c-black);
overflow-y: auto; overscroll-behavior: contain;
opacity: 0; visibility: hidden; translate: 0 -12px;
transition: opacity 280ms var(--ease), translate 280ms var(--ease), visibility 0s linear 280ms;
}
.mobile-menu.is-open { opacity: 1; visibility: visible; translate: 0 0; transition-delay: 0s; }
.mobile-menu > * { flex-shrink: 0; } 
.mobile-menu__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mobile-menu__top img { inline-size: 100px; block-size: 32px; }
.mobile-menu__close {
display: grid; place-items: center; padding: 4px; border-radius: 12px;
border: 1px solid #e8e9ea; background: var(--c-white);
-webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.mobile-menu__close .icon { inline-size: 24px; block-size: 24px; color: #292d32; }
.mobile-menu__nav { display: flex; flex-direction: column; }
.mobile-link {
display: flex; align-items: center; gap: 8px; inline-size: 100%;
padding: 8px 16px; border-radius: 12px;
font-size: 16px; font-weight: 500; line-height: 1.5; color: var(--c-black); text-align: start;
transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.mobile-link .icon { inline-size: 20px; block-size: 20px; transition: rotate var(--dur) var(--ease); }
.mobile-link[aria-expanded='true'] .icon { rotate: 180deg; }
.mobile-link[aria-current='page'], .mobile-link:active, .mobile-sub__link[aria-current='page'] { color: var(--c-orange); }
.mobile-sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 320ms var(--ease); }
.mobile-sub.is-open { grid-template-rows: 1fr; }
.mobile-sub__inner { overflow: hidden; visibility: hidden; transition: visibility 0s linear 320ms; } 
.mobile-sub.is-open > .mobile-sub__inner { visibility: visible; transition-delay: 0s; }
.mobile-sub__list { display: flex; flex-direction: column; padding: 4px 0 8px; padding-inline-start: 16px; }
.mobile-sub__link { display: flex; align-items: center; gap: 12px; padding: 8px 12px; font-size: 14px; font-weight: 500; line-height: 1.5; }
.mobile-sub__link .icon-tile { inline-size: 32px; block-size: 32px; }
.mobile-sub__link .icon-tile .icon { inline-size: 18px; block-size: 18px; }
.mobile-menu .promo-card { gap: 24px; }
.mobile-menu .promo-card__title { font-size: 16px; }
.mobile-menu .promo-card__text { font-size: 14px; }
.mobile-menu__lang { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; font-weight: 500; color: var(--c-black); }
.mobile-menu__lang .icon { inline-size: 20px; block-size: 20px; color: var(--c-black); }
@media (min-width: 1200px) { .mobile-menu { display: none; } }
.site-header--light { color: var(--c-black); background: var(--c-white); border-block-end-color: var(--c-line-footer); }
.site-header--light.is-scrolled, .site-header--light.is-open { background: rgba(255, 255, 255, 0.92); border-color: var(--c-line-footer); box-shadow: 0 10px 30px -18px rgba(8, 16, 22, 0.35); }
.site-header--light .nav-link, .site-header--light .lang-switch, .site-header--light .nav-link[aria-current='page'] { color: var(--c-black); }
@media (hover: hover) { .site-header--light .nav-link:hover, .site-header--light .lang-switch:hover { color: var(--c-orange); } }
.site-header__academy { padding-inline: 16px; }
.site-header--light .site-header__academy { --btn-bg: var(--c-orange); --btn-fg: var(--c-white); --btn-mark: var(--c-white); --btn-hover-bg: #d45100; font-weight: 600; }
.site-header--light .site-header__academy .btn__mark { rotate: 45deg; }
[dir='rtl'] .site-header--light .site-header__academy .btn__mark { rotate: -45deg; }
.site-header--light .menu-toggle { background: rgba(0, 0, 0, 0.05); color: var(--c-black); }
body.has-light-header main { padding-block-start: var(--header-h); }
.site-footer {
background: var(--c-white); color: var(--c-black);
border-block-start: 1px solid var(--c-line-footer);
padding-block: 60px;
}
.site-footer__inner { display: flex; flex-direction: column; gap: 42px; }
.site-footer__top { display: flex; align-items: flex-start; gap: 64px; }
.site-footer__brand { display: flex; flex-direction: column; gap: 94px; flex: none; }
.site-footer__brand img { inline-size: 125px; block-size: 40px; }
.socials { display: flex; gap: 10px; }
.social {
display: grid; place-items: center; inline-size: 40px; block-size: 40px;
border: 1px solid var(--c-line); background: var(--c-white); color: var(--c-black);
transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.social .icon { inline-size: 20px; block-size: 20px; }
@media (hover: hover) { .social:hover { background: var(--c-orange); border-color: var(--c-orange); color: var(--c-white); } }
.site-footer__cols { display: flex; align-items: flex-start; gap: 48px; flex: 1; min-inline-size: 0; }
.f-col { display: flex; flex-direction: column; gap: 12px; }
.f-col--company { flex: 0 0 171px; }
.f-col--services { flex: 1 1 auto; min-inline-size: 0; }
.f-col--links { flex: 0 0 131px; }
.f-col__title {
display: flex; align-items: center; gap: 6px;
font-size: 14px; font-weight: 700; line-height: 13px; min-block-size: 15px; color: var(--c-orange);
}
.f-col__title::before { content: ''; inline-size: 10px; block-size: 10px; background: currentColor; flex: none; }
.f-col__toggle { display: none; }
.f-col__panel { display: flex; flex-direction: column; gap: 12px; }
.f-col--services .f-col__panel { flex-direction: row; gap: 48px; }
.f-col__list { display: flex; flex-direction: column; gap: 12px; flex: 1 1 0; min-inline-size: 0; font-size: 14px; line-height: 1.5; }
.site-footer__legal, .site-footer__bottom p { font-size: 14px; line-height: normal; }
.f-link { font-size: 14px; line-height: 1.5; color: var(--c-black); transition: color var(--dur) var(--ease); }
@media (hover: hover) { .f-link:hover { color: var(--c-orange); } }
.site-footer__bottom {
display: flex; align-items: center; justify-content: space-between; gap: 16px;
padding-block-start: 25px; border-block-start: 1px solid var(--c-line-footer);
font-size: 14px; line-height: normal;
}
.site-footer__legal { display: flex; align-items: center; gap: 32px; }
@media (min-width: 1100px) { :lang(en) .f-col--links { flex-basis: 108px; } }
@media (min-width: 1100px) {
:lang(ar) .site-footer__top { justify-content: space-between; gap: 0; }
:lang(ar) .site-footer__brand { flex: 0 0 280px; }
:lang(ar) .site-footer__cols { flex: 0 1 919px; }
:lang(ar) .f-col--company { flex-basis: 105px; }
:lang(ar) .f-col--services { flex: 0 1 587px; }
:lang(ar) .f-col--links { flex-basis: 131px; }
:lang(ar) .f-col--services .f-col__list { flex: 0 1 auto; }
:lang(ar) .f-col--services .f-link { white-space: nowrap; }
}
@media (max-width: 1099.98px) {
.site-footer__top { flex-direction: column; gap: 40px; }
.site-footer__brand { flex-direction: row; align-items: center; justify-content: space-between; inline-size: 100%; gap: 24px; }
.site-footer__cols { inline-size: 100%; gap: 32px; }
.f-col--company { flex-basis: 150px; }
.f-col--links { flex-basis: 100px; }
.f-col--services .f-col__panel { gap: 24px; }
}
@media (max-width: 767.98px) {
.site-footer { padding-block: 40px; }
.site-footer__inner { gap: 30px; }
.site-footer__top { gap: 24px; }
.site-footer__brand { display: contents; }
.site-footer__brand .site-footer__logo { order: 0; }
.site-footer__cols { order: 1; flex-direction: column; gap: 16px; }
.site-footer .socials { order: 2; gap: 12px; }
.social { inline-size: 52px; block-size: 52px; }
.f-col { inline-size: 100%; gap: 0; border-block-end: 1px solid var(--c-line-footer); flex: none; }
.f-col > .f-col__title { display: none; }
.f-col__toggle {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
inline-size: 100%; padding-block: 10px; text-align: start;
}
.f-col__toggle .icon { display: block; inline-size: 24px; block-size: 24px; color: #292d32; transition: rotate var(--dur) var(--ease); }
.f-col__toggle[aria-expanded='true'] .icon { rotate: 180deg; }
.f-col__panel {
display: grid; grid-template-rows: 0fr; transition: grid-template-rows 320ms var(--ease);
}
.f-col__panel.is-open { grid-template-rows: 1fr; }
.f-col__panel > .f-col__inner { overflow: hidden; display: flex; flex-direction: column; gap: 12px; visibility: hidden; transition: visibility 0s linear 320ms; }
.f-col__panel.is-open > .f-col__inner { visibility: visible; transition-delay: 0s; }
.f-col__panel > .f-col__inner > :last-child { margin-block-end: 14px; }
.f-col--services .f-col__inner { gap: 12px; }
.site-footer__bottom { flex-direction: column-reverse; align-items: flex-start; gap: 12px; padding-block-start: 24px; }
.site-footer__legal { gap: 16px; }
}
@media (min-width: 768px) {
.f-col__inner { display: contents; }
}
.grid-collapse { display: grid; padding-block-end: 1px; padding-inline-end: 1px; }
.grid-collapse > * { margin-block-end: -1px; margin-inline-end: -1px; }
.grid-collapse > *:hover, .grid-collapse > *:focus-within { z-index: 2; }
.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1023.98px) {
.cols-3, .cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cols-3 > :last-child:nth-child(odd), .cols-4 > :last-child:nth-child(odd), .offer-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 639.98px) {
.cols-3, .cols-4 { grid-template-columns: minmax(0, 1fr); }
.cols-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.icon-tile {
inline-size: 40px; block-size: 40px; flex: none;
display: grid; place-items: center;
background: var(--c-orange-50); color: var(--c-orange);
transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.icon-tile .icon { inline-size: 24px; block-size: 24px; }
.icon-tile--glass { background: rgba(255, 255, 255, 0.2); color: var(--c-white); }
.svc-card {
--svc-more: 54px;
position: relative; isolation: isolate;
display: flex; flex-direction: column; gap: 16px;
padding: 25px 25px 18px;
background: var(--c-white);
border: 1px solid var(--c-line-soft);
color: var(--c-black);
min-block-size: 260px;
transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.svc-card__bg {
position: absolute; inset: -1px -1px calc(-1 * var(--svc-more)) -1px; z-index: -1;
overflow: hidden; opacity: 0; background: var(--c-black);
transition: opacity var(--dur) var(--ease);
}
.svc-card__bg img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; scale: 1.06; transition: scale 700ms var(--ease-out); }
.svc-card__bg::before { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.6); z-index: 1; }
.svc-card__bg::after {
content: ''; position: absolute; z-index: 1;
--s: 72px; inset-inline-start: calc(-111px - 3 * var(--s)); bottom: calc(-40px - 3 * var(--s));
inline-size: calc(587px + 6 * var(--s)); block-size: calc(149px + 6 * var(--s));
background: var(--c-orange);
-webkit-mask: linear-gradient(to right, rgb(0 0 0 / 0.001) calc(var(--s) * 0), rgb(0 0 0 / 0.004) calc(var(--s) * 0.375), rgb(0 0 0 / 0.012) calc(var(--s) * 0.75), rgb(0 0 0 / 0.03) calc(var(--s) * 1.125), rgb(0 0 0 / 0.067) calc(var(--s) * 1.5), rgb(0 0 0 / 0.13) calc(var(--s) * 1.875), rgb(0 0 0 / 0.227) calc(var(--s) * 2.25), rgb(0 0 0 / 0.354) calc(var(--s) * 2.625), rgb(0 0 0 / 0.5) calc(var(--s) * 3), rgb(0 0 0 / 0.646) calc(var(--s) * 3.375), rgb(0 0 0 / 0.773) calc(var(--s) * 3.75), rgb(0 0 0 / 0.87) calc(var(--s) * 4.125), rgb(0 0 0 / 0.933) calc(var(--s) * 4.5), rgb(0 0 0 / 0.97) calc(var(--s) * 4.875), rgb(0 0 0 / 0.988) calc(var(--s) * 5.25), rgb(0 0 0 / 0.996) calc(var(--s) * 5.625), rgb(0 0 0 / 0.999) calc(var(--s) * 6), rgb(0 0 0 / 0.999) calc(100% - var(--s) * 6), rgb(0 0 0 / 0.996) calc(100% - var(--s) * 5.625), rgb(0 0 0 / 0.988) calc(100% - var(--s) * 5.25), rgb(0 0 0 / 0.97) calc(100% - var(--s) * 4.875), rgb(0 0 0 / 0.933) calc(100% - var(--s) * 4.5), rgb(0 0 0 / 0.87) calc(100% - var(--s) * 4.125), rgb(0 0 0 / 0.773) calc(100% - var(--s) * 3.75), rgb(0 0 0 / 0.646) calc(100% - var(--s) * 3.375), rgb(0 0 0 / 0.5) calc(100% - var(--s) * 3), rgb(0 0 0 / 0.354) calc(100% - var(--s) * 2.625), rgb(0 0 0 / 0.227) calc(100% - var(--s) * 2.25), rgb(0 0 0 / 0.13) calc(100% - var(--s) * 1.875), rgb(0 0 0 / 0.067) calc(100% - var(--s) * 1.5), rgb(0 0 0 / 0.03) calc(100% - var(--s) * 1.125), rgb(0 0 0 / 0.012) calc(100% - var(--s) * 0.75), rgb(0 0 0 / 0.004) calc(100% - var(--s) * 0.375), rgb(0 0 0 / 0.001) calc(100% - var(--s) * 0)), linear-gradient(to bottom, rgb(0 0 0 / 0.001) 0%, rgb(0 0 0 / 0.004) 4.647%, rgb(0 0 0 / 0.012) 9.294%, rgb(0 0 0 / 0.03) 13.941%, rgb(0 0 0 / 0.067) 18.589%, rgb(0 0 0 / 0.13) 23.236%, rgb(0 0 0 / 0.175) 25.645%, rgb(0 0 0 / 0.224) 27.883%, rgb(0 0 0 / 0.285) 30.293%, rgb(0 0 0 / 0.347) 32.53%, rgb(0 0 0 / 0.416) 34.94%, rgb(0 0 0 / 0.481) 37.177%, rgb(0 0 0 / 0.547) 39.587%, rgb(0 0 0 / 0.601) 41.824%, rgb(0 0 0 / 0.649) 44.234%, rgb(0 0 0 / 0.68) 46.472%, rgb(0 0 0 / 0.697) 48.881%, rgb(0 0 0 / 0.699) 50%, rgb(0 0 0 / 0.697) 51.119%, rgb(0 0 0 / 0.68) 53.528%, rgb(0 0 0 / 0.649) 55.766%, rgb(0 0 0 / 0.601) 58.176%, rgb(0 0 0 / 0.547) 60.413%, rgb(0 0 0 / 0.481) 62.823%, rgb(0 0 0 / 0.416) 65.06%, rgb(0 0 0 / 0.347) 67.47%, rgb(0 0 0 / 0.285) 69.707%, rgb(0 0 0 / 0.224) 72.117%, rgb(0 0 0 / 0.175) 74.355%, rgb(0 0 0 / 0.13) 76.764%, rgb(0 0 0 / 0.067) 81.411%, rgb(0 0 0 / 0.03) 86.059%, rgb(0 0 0 / 0.012) 90.706%, rgb(0 0 0 / 0.004) 95.353%, rgb(0 0 0 / 0.001) 100%);
-webkit-mask-composite: source-in;
mask: linear-gradient(to right, rgb(0 0 0 / 0.001) calc(var(--s) * 0), rgb(0 0 0 / 0.004) calc(var(--s) * 0.375), rgb(0 0 0 / 0.012) calc(var(--s) * 0.75), rgb(0 0 0 / 0.03) calc(var(--s) * 1.125), rgb(0 0 0 / 0.067) calc(var(--s) * 1.5), rgb(0 0 0 / 0.13) calc(var(--s) * 1.875), rgb(0 0 0 / 0.227) calc(var(--s) * 2.25), rgb(0 0 0 / 0.354) calc(var(--s) * 2.625), rgb(0 0 0 / 0.5) calc(var(--s) * 3), rgb(0 0 0 / 0.646) calc(var(--s) * 3.375), rgb(0 0 0 / 0.773) calc(var(--s) * 3.75), rgb(0 0 0 / 0.87) calc(var(--s) * 4.125), rgb(0 0 0 / 0.933) calc(var(--s) * 4.5), rgb(0 0 0 / 0.97) calc(var(--s) * 4.875), rgb(0 0 0 / 0.988) calc(var(--s) * 5.25), rgb(0 0 0 / 0.996) calc(var(--s) * 5.625), rgb(0 0 0 / 0.999) calc(var(--s) * 6), rgb(0 0 0 / 0.999) calc(100% - var(--s) * 6), rgb(0 0 0 / 0.996) calc(100% - var(--s) * 5.625), rgb(0 0 0 / 0.988) calc(100% - var(--s) * 5.25), rgb(0 0 0 / 0.97) calc(100% - var(--s) * 4.875), rgb(0 0 0 / 0.933) calc(100% - var(--s) * 4.5), rgb(0 0 0 / 0.87) calc(100% - var(--s) * 4.125), rgb(0 0 0 / 0.773) calc(100% - var(--s) * 3.75), rgb(0 0 0 / 0.646) calc(100% - var(--s) * 3.375), rgb(0 0 0 / 0.5) calc(100% - var(--s) * 3), rgb(0 0 0 / 0.354) calc(100% - var(--s) * 2.625), rgb(0 0 0 / 0.227) calc(100% - var(--s) * 2.25), rgb(0 0 0 / 0.13) calc(100% - var(--s) * 1.875), rgb(0 0 0 / 0.067) calc(100% - var(--s) * 1.5), rgb(0 0 0 / 0.03) calc(100% - var(--s) * 1.125), rgb(0 0 0 / 0.012) calc(100% - var(--s) * 0.75), rgb(0 0 0 / 0.004) calc(100% - var(--s) * 0.375), rgb(0 0 0 / 0.001) calc(100% - var(--s) * 0)), linear-gradient(to bottom, rgb(0 0 0 / 0.001) 0%, rgb(0 0 0 / 0.004) 4.647%, rgb(0 0 0 / 0.012) 9.294%, rgb(0 0 0 / 0.03) 13.941%, rgb(0 0 0 / 0.067) 18.589%, rgb(0 0 0 / 0.13) 23.236%, rgb(0 0 0 / 0.175) 25.645%, rgb(0 0 0 / 0.224) 27.883%, rgb(0 0 0 / 0.285) 30.293%, rgb(0 0 0 / 0.347) 32.53%, rgb(0 0 0 / 0.416) 34.94%, rgb(0 0 0 / 0.481) 37.177%, rgb(0 0 0 / 0.547) 39.587%, rgb(0 0 0 / 0.601) 41.824%, rgb(0 0 0 / 0.649) 44.234%, rgb(0 0 0 / 0.68) 46.472%, rgb(0 0 0 / 0.697) 48.881%, rgb(0 0 0 / 0.699) 50%, rgb(0 0 0 / 0.697) 51.119%, rgb(0 0 0 / 0.68) 53.528%, rgb(0 0 0 / 0.649) 55.766%, rgb(0 0 0 / 0.601) 58.176%, rgb(0 0 0 / 0.547) 60.413%, rgb(0 0 0 / 0.481) 62.823%, rgb(0 0 0 / 0.416) 65.06%, rgb(0 0 0 / 0.347) 67.47%, rgb(0 0 0 / 0.285) 69.707%, rgb(0 0 0 / 0.224) 72.117%, rgb(0 0 0 / 0.175) 74.355%, rgb(0 0 0 / 0.13) 76.764%, rgb(0 0 0 / 0.067) 81.411%, rgb(0 0 0 / 0.03) 86.059%, rgb(0 0 0 / 0.012) 90.706%, rgb(0 0 0 / 0.004) 95.353%, rgb(0 0 0 / 0.001) 100%);
mask-composite: intersect;
}
.svc-card__title { font-size: 18px; font-weight: 700; line-height: 1.5; transition: color var(--dur) var(--ease); }
.svc-card__text { padding-block-start: 4px; font-size: 16px; line-height: 1.5; transition: color var(--dur) var(--ease); }
.svc-card__body { display: flex; flex-direction: column; gap: 10px; }
.svc-card__more {
position: absolute; inset-inline-start: 24px; bottom: calc(-1 * var(--svc-more) + 24px);
opacity: 0; translate: 0 8px;
transition: opacity var(--dur) var(--ease), translate var(--dur) var(--ease);
}
.svc-card__link::after { content: ''; position: absolute; inset: 0 0 calc(-1 * var(--svc-more)) 0; z-index: 1; }
.svc-card__link { color: inherit; }
@media (hover: hover) {
.svc-card:hover { border-color: transparent; color: var(--c-white); z-index: 3; }
.svc-card:hover .svc-card__bg { opacity: 1; }
.svc-card:hover .svc-card__bg img { scale: 1; }
.svc-card:hover .icon-tile { background: rgba(255, 255, 255, 0.2); color: var(--c-white); }
.svc-card:hover .svc-card__more { opacity: 1; translate: 0 0; }
}
@media (hover: none) {
.svc-card__link::after { inset: 0; }
.svc-card__bg { inset-block-end: -1px; }
}
.feat-card {
--feat-accent: var(--c-orange);
--feat-tint: var(--c-orange-50);
position: relative;
display: flex; flex-direction: column; align-items: flex-start;
padding: 24px; 
background: var(--c-white);
border: 1px solid var(--c-line);
color: var(--c-black);
transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.feat-card__title { padding-block-start: 16px; font-size: 16px; font-weight: 700; line-height: 1.5; }
.feat-card__text { padding-block-start: 8px; font-size: 16px; line-height: 1.5; }
.feat-card .icon-tile { background: var(--feat-tint); color: var(--feat-accent); }
.corner-pair::before, .corner-pair::after {
content: ''; position: absolute; inline-size: var(--corner, 26px); block-size: var(--corner, 26px);
background: var(--feat-accent, var(--c-orange));
opacity: 0; scale: 0.5; transition: opacity var(--dur) var(--ease), scale var(--dur) var(--ease);
}
.corner-pair::before { left: -1px; top: -1px; clip-path: var(--notch-tl); transform-origin: 0 0; }
.corner-pair::after { right: -1px; bottom: -1px; clip-path: var(--notch-br); transform-origin: 100% 100%; }
@media (hover: hover) {
.feat-card:hover { background: var(--feat-tint); border-color: var(--feat-accent); }
.feat-card:hover .icon-tile { background: var(--feat-accent); color: var(--c-white); }
.corner-pair:hover::before, .corner-pair:hover::after { opacity: 1; scale: 1; }
}
.feat-card--blue { --feat-accent: var(--c-blue); --feat-tint: #f7fafd; }
.cert-card { justify-content: flex-start; }
.cert-card__logo { block-size: 60px; inline-size: auto; object-fit: contain; }
.cert-card .feat-card__title { font-size: 18px; }
.project-card {
position: relative;
display: flex; flex-direction: column; align-items: center;
padding-block: 20px 5px;
background: var(--c-white);
border: 1px solid transparent;
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.project-card__media { inline-size: calc(100% - 41px); aspect-ratio: 239 / 263; overflow: hidden; }
.project-card__media img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: scale 700ms var(--ease-out); }
.project-card__body { inline-size: 100%; display: flex; flex-direction: column; gap: 3px; padding: 20px; }
.project-card__meta { font-size: 14px; font-weight: 500; line-height: 1.5; color: var(--c-neutral-950); }
.project-card__title { padding-block-start: 4px; font-size: 18px; font-weight: 700; line-height: 1.5; color: var(--c-black); }
.project-card__link::after { content: ''; position: absolute; inset: 0; }
.project-card__mark {
position: absolute; inset-inline-end: 20px; bottom: 21px; inline-size: 26px; block-size: 26px;
background: var(--c-orange); clip-path: var(--notch-br); opacity: 0;
transition: opacity var(--dur) var(--ease), translate var(--dur) var(--ease);
translate: -4px -4px;
}
[dir='rtl'] .project-card__mark { clip-path: var(--notch-bl); translate: 4px -4px; }
@media (hover: hover) {
.project-card:hover { border-color: var(--c-orange); box-shadow: -2px 3px 6px 5px rgba(0, 0, 0, 0.03); }
.project-card:hover .project-card__mark { opacity: 1; translate: 0 0; }
.project-card:hover .project-card__media img { scale: 1.04; }
}
.logo-tile {
--corner: 17px;
position: relative;
display: grid; place-items: center;
block-size: 140px; padding: 23px 44px;
background: var(--c-white);
border: 1px solid var(--c-line);
transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.logo-tile img {
inline-size: 112px; block-size: 92px; object-fit: contain;
filter: grayscale(1); mix-blend-mode: multiply;
transition: filter var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
@media (hover: hover) {
.logo-tile:hover { background: var(--c-orange-50); border-color: var(--c-orange); }
.logo-tile:hover img { filter: grayscale(0); }
}
.logo-tile.corner-pair::before, .logo-tile.corner-pair::after { background: var(--c-orange); }
@media (max-width: 767.98px) {
.svc-card, .feat-card { padding: 24px 20px; }
.svc-card { min-block-size: 0; }
.svc-card .icon-tile, .feat-card .icon-tile { block-size: 24px; }
.logo-tile { block-size: 140px; padding: 24px; }
}
.hero {
position: relative; isolation: isolate; overflow: hidden;
display: grid; place-items: center;
min-block-size: clamp(685px, calc(685px + 60 * (100vw - 390px) / 1050), 745px);
padding-block: 0;
background: var(--c-black); color: var(--c-white);
}
.hero__media { position: absolute; inset: 0; z-index: -3; }
.hero__media video, .hero__media img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.hero__media video { position: relative; z-index: 1; opacity: 0; transition: opacity 900ms var(--ease); } 
.hero__media video.is-ready { opacity: 1; }
.hero__media img { position: absolute; inset: 0; }
.hero__shade { position: absolute; inset: 0; z-index: -2; background: rgba(0, 0, 0, 0.5); }
.hero .glow { z-index: -1; }
.hero__glow-top { --glow: var(--c-black); inline-size: max(1789px, calc(100% + 290px)); block-size: 388px; inset-inline-start: 50%; translate: -50% 0; top: -240px; }
[dir='rtl'] .hero__glow-top { translate: 50% 0; }
.hero__glow-bottom { inline-size: max(1789px, calc(100% + 290px)); block-size: 388px; inset-inline-start: -145px; top: calc(100% - 59px); }
.hero__content {
position: relative; display: flex; flex-direction: column; align-items: center; gap: 30px;
inline-size: min(780px, 100% - 2 * var(--gutter)); text-align: center;
padding-block-start: 52px;
}
.hero__copy { display: flex; flex-direction: column; gap: 24px; }
.hero__title { font-size: var(--fs-h1); font-weight: 700; line-height: 1.3; }
.hero__lead { font-size: var(--fs-lead); line-height: 1.5; letter-spacing: -0.02em; }
:lang(ar) .hero__lead { letter-spacing: 0; }
.hero__scroll {
position: absolute; inset-inline-start: 50%; bottom: 59px; translate: -50% 0;
inline-size: 47px; block-size: 47px; color: var(--c-white);
display: grid; place-items: center;
}
[dir='rtl'] .hero__scroll { translate: 50% 0; }
.hero__scroll .icon { inline-size: 47px; block-size: 47px; animation: hero-nudge 2.2s var(--ease) infinite; }
@media (hover: hover) { .hero__scroll:hover { color: var(--c-orange); } }
@keyframes hero-nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(7px); } }
.hero__video-toggle {
position: absolute; z-index: 2; bottom: 63px;
inset-inline-end: max(var(--gutter), calc((100% - var(--container)) / 2));
display: grid; place-items: center; inline-size: 40px; block-size: 40px;
color: var(--c-white); background: rgba(8, 16, 22, 0.35); border: 1px solid rgba(255, 255, 255, 0.28);
transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.hero__video-toggle[hidden] { display: none; }
@media (hover: hover) { .hero__video-toggle:hover { background: rgba(8, 16, 22, 0.6); border-color: var(--c-orange); } }
.hero__video-icon { inline-size: 18px; block-size: 18px; }
.hero__video-icon--play, .hero__video-toggle.is-paused .hero__video-icon--pause { display: none; }
.hero__video-toggle.is-paused .hero__video-icon--play { display: block; }
html[data-shot] .hero__video-toggle { display: none; }
@media (max-width: 767.98px) {
.hero__content { gap: 30px; padding-block-start: 84px; }
.hero__copy { gap: 16px; }
.hero__scroll { bottom: 42px; }
.hero__video-toggle { bottom: 46px; }
.hero__glow-top, .hero__glow-bottom { inline-size: 1807px; block-size: 392px; }
.hero .btn { min-block-size: 53px; font-size: 14px; }
}
.split { display: flex; align-items: center; gap: 70px; }
.split--gap-64 { gap: 64px; }
.split__media { flex: 0 1 541px; min-inline-size: 0; }
.split__text { flex: 0 1 600px; min-inline-size: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
@media (min-width: 1300px) { .split__media, .split__text { flex-shrink: 0; } }
.split__title { font-size: var(--fs-h2); font-weight: 700; line-height: 1.3333; color: var(--c-ink); }
.split__body { font-size: 16px; font-weight: 500; line-height: 1.5; color: var(--c-neutral-600); }
@media (max-width: 1023.98px) {
.split { flex-direction: column; align-items: stretch; gap: 32px; }
.split__text { order: -1; flex: none; gap: 16px; }
.split__media { flex: none; align-self: center; inline-size: 100%; max-inline-size: 541px; }
.split__title { line-height: 1.25; }
}
.section--pattern { overflow: hidden; }
.section--about { padding-block: clamp(40px, calc(40px + 60 * (100vw - 390px) / 1050), 100px); }
:lang(ar) .section--about { padding-block: var(--section-y); }
@media (min-width: 1024px) {
:lang(ar) .section--about .split__title { max-inline-size: 533px; }
:lang(ar) .section--about .split__body { max-inline-size: 584px; }
}
.pattern-panel {
position: absolute; inset-block: -129px 0; inset-inline-end: -124px; inline-size: 724px;
background: url('../img/patterns/l-pattern-warm.svg') repeat-y 0 0 / 724.44px 907.89px;
pointer-events: none;
}
[dir='rtl'] .pattern-panel { transform: scaleX(-1); }
@media (max-width: 767.98px) { .pattern-panel { display: none; } }
.stack-40 { display: flex; flex-direction: column; gap: 40px; }
.stack-40 > .btn { align-self: flex-start; }
.stack-40 > [data-reveal], .stack-40 > .btn { position: relative; z-index: 4; }
.offer-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1023.98px) { .offer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639.98px) { .offer-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 767.98px) { .stack-40 { gap: 32px; } }
.why { display: flex; flex-direction: column; align-items: center; gap: 60px; }
.why .sec-head { max-inline-size: 540px; }
.why__grid { inline-size: 100%; }
@media (max-width: 767.98px) { .why { gap: 32px; } .why .sec-head { align-items: center; } }
.stats {
position: relative; overflow: hidden; isolation: isolate;
min-block-size: 370px; padding-block: 60px 0; background: var(--c-black); color: var(--c-white);
display: flex; flex-direction: column; align-items: center; gap: 40px;
}
.stats .glow {
inline-size: 688px; block-size: 250px; animation: glow-drift 14s var(--ease) infinite alternate;
--glow-x: linear-gradient(to right, rgb(0 0 0 / 0.001) 0%, rgb(0 0 0 / 0.004) 3.402%, rgb(0 0 0 / 0.012) 6.805%, rgb(0 0 0 / 0.03) 10.207%, rgb(0 0 0 / 0.067) 13.609%, rgb(0 0 0 / 0.13) 17.012%, rgb(0 0 0 / 0.227) 20.414%, rgb(0 0 0 / 0.354) 23.816%, rgb(0 0 0 / 0.5) 27.219%, rgb(0 0 0 / 0.646) 30.621%, rgb(0 0 0 / 0.773) 34.023%, rgb(0 0 0 / 0.87) 37.425%, rgb(0 0 0 / 0.933) 40.828%, rgb(0 0 0 / 0.969) 44.23%, rgb(0 0 0 / 0.977) 45.563%, rgb(0 0 0 / 0.985) 47.632%, rgb(0 0 0 / 0.987) 48.965%, rgb(0 0 0 / 0.988) 50%, rgb(0 0 0 / 0.987) 51.035%, rgb(0 0 0 / 0.985) 52.368%, rgb(0 0 0 / 0.977) 54.437%, rgb(0 0 0 / 0.969) 55.77%, rgb(0 0 0 / 0.933) 59.172%, rgb(0 0 0 / 0.87) 62.575%, rgb(0 0 0 / 0.773) 65.977%, rgb(0 0 0 / 0.646) 69.379%, rgb(0 0 0 / 0.5) 72.781%, rgb(0 0 0 / 0.354) 76.184%, rgb(0 0 0 / 0.227) 79.586%, rgb(0 0 0 / 0.13) 82.988%, rgb(0 0 0 / 0.067) 86.391%, rgb(0 0 0 / 0.03) 89.793%, rgb(0 0 0 / 0.012) 93.195%, rgb(0 0 0 / 0.004) 96.598%, rgb(0 0 0 / 0.001) 100%);
--glow-y: linear-gradient(to bottom, rgb(0 0 0 / 0.001) 0%, rgb(0 0 0 / 0.004) 4.792%, rgb(0 0 0 / 0.012) 9.585%, rgb(0 0 0 / 0.03) 14.377%, rgb(0 0 0 / 0.066) 19.17%, rgb(0 0 0 / 0.119) 23.321%, rgb(0 0 0 / 0.129) 23.962%, rgb(0 0 0 / 0.207) 28.113%, rgb(0 0 0 / 0.222) 28.755%, rgb(0 0 0 / 0.323) 32.906%, rgb(0 0 0 / 0.34) 33.547%, rgb(0 0 0 / 0.45) 37.698%, rgb(0 0 0 / 0.466) 38.34%, rgb(0 0 0 / 0.561) 42.491%, rgb(0 0 0 / 0.573) 43.132%, rgb(0 0 0 / 0.628) 47.283%, rgb(0 0 0 / 0.632) 47.924%, rgb(0 0 0 / 0.638) 50%, rgb(0 0 0 / 0.632) 52.076%, rgb(0 0 0 / 0.628) 52.717%, rgb(0 0 0 / 0.573) 56.868%, rgb(0 0 0 / 0.561) 57.509%, rgb(0 0 0 / 0.466) 61.66%, rgb(0 0 0 / 0.45) 62.302%, rgb(0 0 0 / 0.34) 66.453%, rgb(0 0 0 / 0.323) 67.094%, rgb(0 0 0 / 0.222) 71.245%, rgb(0 0 0 / 0.207) 71.887%, rgb(0 0 0 / 0.129) 76.038%, rgb(0 0 0 / 0.119) 76.679%, rgb(0 0 0 / 0.066) 80.83%, rgb(0 0 0 / 0.03) 85.623%, rgb(0 0 0 / 0.012) 90.415%, rgb(0 0 0 / 0.004) 95.208%, rgb(0 0 0 / 0.001) 100%);
}
.stats__glow-a { inset-inline-start: -164px; top: 351px; }
.stats__glow-b { inset-inline-start: calc(50% + 316px); top: -200px; animation-direction: alternate-reverse !important; }
@keyframes glow-drift { from { translate: -30px 12px; } to { translate: 40px -18px; } }
.stats__title { font-size: var(--fs-h2); font-weight: 700; line-height: normal; text-align: center; max-inline-size: 768px; }
.stats__list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.stats > :not(.glow) { position: relative; z-index: 1; } 
.stat { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 24px; text-align: center; }
.stat__num { font-size: var(--fs-stat); font-weight: 700; line-height: 48px; font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }
.stat__label { padding-block-start: 8px; font-size: 14px; font-weight: 500; line-height: 19.5px; }
@media (max-width: 1023.98px) {
.stats { min-block-size: 0; padding-block-end: 60px; }
.stats__list { display: flex; flex-wrap: wrap; justify-content: center; row-gap: 8px; }
.stats__list > .stat { flex: 0 0 33.333%; }
}
@media (max-width: 767.98px) {
.stats { min-block-size: 0; padding-block: 40px; gap: 32px; }
.stats .glow { display: none; }
.stats__title { line-height: 1.25; }
.stats__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
.stat { gap: 4px; padding: 0; border: 1px solid rgba(132, 132, 132, 0.1); padding-block: 0; }
.stat__label { padding-block-start: 0; line-height: 20px; }
}
.projects-strip { display: flex; flex-direction: column; gap: 30px; }
.projects-strip .sec-head-row { row-gap: 12px; }
.sec-head-row__text { flex: 0 0 100%; }
.projects-strip__more { display: none; }
@media (max-width: 639.98px) {
.sec-head-row__cta { display: none; }
.projects-strip__more { display: block; }
}
.sec-head--offer { max-inline-size: 778px; }
.cards-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 1023.98px) { .cards-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639.98px) {
.projects-strip { gap: 32px; }
.cards-4.is-carousel {
display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: inline mandatory;
margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter);
scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-inline: contain;
}
.cards-4.is-carousel::-webkit-scrollbar { display: none; }
.cards-4.is-carousel > * { flex: 0 0 282px; scroll-snap-align: start; }
}
.certs { display: flex; flex-direction: column; align-items: center; gap: 40px; }
.certs__grid { inline-size: 100%; }
@media (max-width: 767.98px) { .certs { gap: 32px; } }
.academy-band { position: relative; isolation: isolate; overflow: hidden; background: var(--c-blue); color: var(--c-white); }
.academy-band::before {
content: ''; position: absolute; inset: 0; z-index: -2;
background: linear-gradient(100.6deg, var(--c-navy-a) 6.3%, var(--c-navy-b) 93.5%);
}
.academy-band .glow { --glow: var(--c-blue-glow); inline-size: 1079px; block-size: 388px; inset-inline-start: -682px; top: 261px; z-index: -1; }
.academy-band .split__title { color: var(--c-white); max-inline-size: 560px; }
.academy-band .split__body { color: var(--c-white); font-weight: 400; }
@media (max-width: 767.98px) {
.academy-band .glow {
inline-size: 520px; block-size: 300px; inset-inline-start: -380px; top: auto; bottom: -260px; opacity: 0.8;
--glow-x: linear-gradient(to right, rgb(0 0 0 / 0.001) 0%, rgb(0 0 0 / 0.004) 3.828%, rgb(0 0 0 / 0.012) 7.656%, rgb(0 0 0 / 0.03) 11.485%, rgb(0 0 0 / 0.067) 15.313%, rgb(0 0 0 / 0.13) 19.141%, rgb(0 0 0 / 0.227) 22.969%, rgb(0 0 0 / 0.354) 26.798%, rgb(0 0 0 / 0.5) 30.626%, rgb(0 0 0 / 0.646) 34.454%, rgb(0 0 0 / 0.772) 38.282%, rgb(0 0 0 / 0.786) 38.748%, rgb(0 0 0 / 0.866) 42.111%, rgb(0 0 0 / 0.875) 42.576%, rgb(0 0 0 / 0.922) 45.939%, rgb(0 0 0 / 0.927) 46.405%, rgb(0 0 0 / 0.942) 49.767%, rgb(0 0 0 / 0.942) 50%, rgb(0 0 0 / 0.942) 50.233%, rgb(0 0 0 / 0.927) 53.595%, rgb(0 0 0 / 0.922) 54.061%, rgb(0 0 0 / 0.875) 57.424%, rgb(0 0 0 / 0.866) 57.889%, rgb(0 0 0 / 0.786) 61.252%, rgb(0 0 0 / 0.772) 61.718%, rgb(0 0 0 / 0.646) 65.546%, rgb(0 0 0 / 0.5) 69.374%, rgb(0 0 0 / 0.354) 73.202%, rgb(0 0 0 / 0.227) 77.031%, rgb(0 0 0 / 0.13) 80.859%, rgb(0 0 0 / 0.067) 84.687%, rgb(0 0 0 / 0.03) 88.515%, rgb(0 0 0 / 0.012) 92.344%, rgb(0 0 0 / 0.004) 96.172%, rgb(0 0 0 / 0.001) 100%);
--glow-y: linear-gradient(to bottom, rgb(0 0 0 / 0.001) 0%, rgb(0 0 0 / 0.004) 4.579%, rgb(0 0 0 / 0.012) 9.158%, rgb(0 0 0 / 0.03) 13.737%, rgb(0 0 0 / 0.067) 18.316%, rgb(0 0 0 / 0.13) 22.894%, rgb(0 0 0 / 0.208) 26.738%, rgb(0 0 0 / 0.225) 27.473%, rgb(0 0 0 / 0.327) 31.317%, rgb(0 0 0 / 0.349) 32.052%, rgb(0 0 0 / 0.464) 35.896%, rgb(0 0 0 / 0.486) 36.631%, rgb(0 0 0 / 0.593) 40.475%, rgb(0 0 0 / 0.611) 41.21%, rgb(0 0 0 / 0.688) 45.053%, rgb(0 0 0 / 0.698) 45.789%, rgb(0 0 0 / 0.726) 49.632%, rgb(0 0 0 / 0.726) 50%, rgb(0 0 0 / 0.726) 50.368%, rgb(0 0 0 / 0.698) 54.211%, rgb(0 0 0 / 0.688) 54.947%, rgb(0 0 0 / 0.611) 58.79%, rgb(0 0 0 / 0.593) 59.525%, rgb(0 0 0 / 0.486) 63.369%, rgb(0 0 0 / 0.464) 64.104%, rgb(0 0 0 / 0.349) 67.948%, rgb(0 0 0 / 0.327) 68.683%, rgb(0 0 0 / 0.225) 72.527%, rgb(0 0 0 / 0.208) 73.262%, rgb(0 0 0 / 0.13) 77.106%, rgb(0 0 0 / 0.067) 81.684%, rgb(0 0 0 / 0.03) 86.263%, rgb(0 0 0 / 0.012) 90.842%, rgb(0 0 0 / 0.004) 95.421%, rgb(0 0 0 / 0.001) 100%);
}
}
.clients { display: flex; flex-direction: column; align-items: center; gap: 40px; }
.clients .sec-head { gap: 12px; }
.clients .sec-head .h-section { padding-block-start: 2px; line-height: 44px; }
.clients__grid { inline-size: 100%; }
@media (max-width: 767.98px) {
.clients { gap: 32px; }
.clients .sec-head .h-section { padding-block-start: 2px; line-height: 1.25; }
}
.cta-band { position: relative; isolation: isolate; overflow: hidden; background: #111111; color: var(--c-white); text-align: center; }
.cta-band .btn { min-inline-size: 190px; }
:lang(ar) .cta-band .btn { min-inline-size: 184px; }
.cta-band__glow-a { inline-size: 2998px; block-size: 388px; inset-inline-start: -682px; top: 281px; }
.cta-band__glow-b { inline-size: 1079px; block-size: 388px; inset-inline-end: -981px; top: -117px; }
.cta-band__inner { position: relative; display: flex; flex-direction: column; align-items: center; gap: 40px; }
.cta-band__copy { display: flex; flex-direction: column; align-items: center; gap: 16px; max-inline-size: 694px; }
.cta-band__title { font-size: var(--fs-h2); font-weight: 700; line-height: normal; }
:lang(en) .cta-band__title { line-height: 1.5; }
.cta-band__text { font-size: 16px; font-weight: 500; line-height: 1.5; color: #e8e8e8; max-inline-size: 600px; }
@media (max-width: 767.98px) {
.cta-band { min-block-size: 370px; display: grid; align-content: center; }
.cta-band__inner { gap: 16px; }
.cta-band__title { line-height: 1.25; }
.cta-band__glow-a { top: 281px; inset-inline-start: -876px; }
.cta-band__glow-b { inset-inline-end: auto; inset-inline-start: -981px; top: -117px; }
}
.page-hero {
position: relative; isolation: isolate; overflow: hidden;
min-block-size: clamp(480px, calc(480px + 200 * (100vw - 390px) / 1050), 680px);
padding-block: calc(var(--header-h) + clamp(48px, calc(48px + 45 * (100vw - 390px) / 1050), 93px)) clamp(140px, calc(140px + 80 * (100vw - 390px) / 1050), 220px);
background: var(--c-black); color: var(--c-white);
}
.page-hero__content { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; }
.page-hero__title { max-inline-size: 813px; font-size: var(--fs-h1); font-weight: 700; line-height: 1.3; }
.page-hero__text { max-inline-size: 813px; font-size: var(--fs-lead); line-height: 1.5; letter-spacing: -0.02em; }
:lang(ar) .page-hero__text { letter-spacing: 0; }
.page-hero__cta { margin-block-start: 6px; }
.page-hero__strip {
inset: auto 0 0 0; block-size: 198px; overflow: hidden;
background: url('../img/patterns/hero-l-strip.svg') repeat-x calc(50% - 112px) 0 / 1768.27px 198px;
}
@media (max-width: 767.98px) {
.page-hero__strip { block-size: 120px; background-size: 1071.9px 120px; background-position: calc(50% - 68px) 0; }
}
.page-hero--start .page-hero__content { align-items: flex-start; text-align: start; }
.page-hero--image { background: var(--c-black); }
.page-hero__media { position: absolute; inset: 0; z-index: -3; }
.page-hero__media picture { display: block; block-size: 100%; }
.page-hero__media img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.page-hero__shade { position: absolute; inset: 0; z-index: -2; background: rgba(0, 0, 0, 0.55); }
.page-hero__glow { z-index: -1; inline-size: max(1789px, calc(100% + 290px)); block-size: 388px; inset-inline-start: 50%; translate: -50% 0; top: calc(100% - 59px); }
[dir='rtl'] .page-hero__glow { translate: 50% 0; }
.breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, 0.7); }
.breadcrumb li { display: inline-flex; align-items: center; gap: 8px; }
.breadcrumb li + li::before { content: ''; inline-size: 4px; block-size: 4px; background: currentColor; opacity: 0.6; }
.breadcrumb a { transition: color var(--dur) var(--ease); }
@media (hover: hover) { .breadcrumb a:hover { color: var(--c-orange); } }
.breadcrumb [aria-current] { color: var(--c-white); }
.mail-notice {
display: grid; gap: 8px;
margin-block-start: 20px; padding: 20px 24px;
background: var(--c-orange-50); color: var(--c-neutral-950);
border: 1px solid rgba(238, 91, 0, 0.3); border-inline-start: 4px solid var(--c-orange);
animation: notice-in 360ms var(--ease-out) both;
}
.mail-notice__title { font-size: 16px; font-weight: 700; line-height: 1.5; color: var(--c-ink); }
.mail-notice__text { font-size: 14px; line-height: 1.7; }
.mail-notice__text a {
color: var(--c-orange); font-weight: 600; text-decoration: underline; text-underline-offset: 3px;
unicode-bidi: isolate; overflow-wrap: anywhere;
}
.mail-notice__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-block-start: 6px; }
.mail-notice .btn { min-block-size: 48px; padding: 12px 20px; font-size: 15px; }
@keyframes notice-in { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }
html.js [data-reveal] {
opacity: 0; translate: 0 20px;
transition: opacity 550ms var(--ease-out), translate 550ms var(--ease-out);
transition-delay: calc(var(--i, 0) * 70ms);
}
html.js [data-reveal='fade'] { translate: none; }
html.js [data-reveal='scale'] { translate: none; scale: 0.97; transition-property: opacity, scale; }
html.js [data-reveal].is-in, html.js [data-reveal]:focus-within { opacity: 1; translate: 0 0; scale: 1; }
@media (prefers-reduced-motion: reduce) {
html.js [data-reveal] { opacity: 1; translate: none; scale: none; transition: none; }
*, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}
html[data-shot] [data-reveal] { opacity: 1 !important; translate: none !important; scale: none !important; transition: none !important; }
html[data-shot] *, html[data-shot] *::before, html[data-shot] *::after { animation: none !important; transition: none !important; }
html[data-shot] .site-header { position: absolute; }