/* ASAS 360° | V3 motion/art direction
   Original shield + wordmark are untouched visual assets.
   Exo 2 is a licensed supporting geometric face, not a recreation of the logo's custom SavedByZero lettering. */
:root {
  --blue:#2B5A89; --blue2:#1E3F66; --silver:#CFCFCF;
  --deep:#050608; --navy:#0b0e13; --ink:#f8faff;
  --body:#c3c9d2; --muted:#a2aaba; --light:#0c1016;
  --border:#28303b; --white:#fff; --signal:#a4c9ef;
  --font-display:'Exo 2','Manrope',Arial,sans-serif;
}
html{background:#050608;scroll-padding-top:90px}
body{background:#050608;color:#f8faff;overflow-x:clip}
body,button,input,textarea,select{accent-color:#2B5A89}
html[lang=en] h1,html[lang=en] h2,html[lang=en] h3,
html[lang=en] .stat b,html[lang=en] .large-vertical-no,
html[lang=en] .service-number,html[lang=en] .detail-visual-number{
  font-family:var(--font-display);
}
html[lang=en] h1,html[lang=en] h2{letter-spacing:-.045em}
html[lang=ar] h1,html[lang=ar] h2,html[lang=ar] h3{letter-spacing:0}
::selection{background:#487eae;color:#fff}
:focus-visible{outline:2px solid #c3e1ff;outline-offset:4px}
/* Intense but legible dark corporate system */
.site-header{background:rgba(5,6,8,.91);border-bottom:1px solid #ffffff22;box-shadow:none;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.header-row{height:92px;gap:20px}
.brand-link{width:132px}
.brand-link img{width:132px;height:86px;filter:drop-shadow(0 0 15px #3673b322)}
.desktop-nav{gap:clamp(15px,1.8vw,28px)}
.desktop-nav a{color:#cbd2da;font-size:11px;letter-spacing:.035em}
.desktop-nav a:hover,.desktop-nav a[aria-current=page]{color:#fff}
.desktop-nav a:after{background:linear-gradient(90deg,#2B5A89,#fff)}
.lang-switch{color:#f5f7fb}
.header-cta{background:#fff;color:#090c12;border-radius:2px}
.header-cta:hover{background:#cbdbea;color:#000;box-shadow:0 6px 30px #fff2}
.menu-toggle{border:1px solid #ffffff36;background:#14181d}
.menu-toggle span{background:#fff}
.mobile-nav{background:#090b0f;border-top:1px solid #ffffff22;box-shadow:0 20px 40px #000b}
.mobile-nav a{color:#f3f6fb;border-bottom:1px solid #ffffff19}
.site-scroll-progress{position:fixed;top:0;inset-inline:0;height:2px;z-index:1000;pointer-events:none;background:transparent}
.site-scroll-progress span{display:block;width:0;height:100%;background:linear-gradient(90deg,#285889,#f2f8ff);box-shadow:0 0 12px #b8e2ff;transition:width .07s linear}
/* Hero & circuit motifs */
.hero,.inner-hero,.detail-hero{isolation:isolate;background:#050608;position:relative;overflow:hidden}
.hero{background:radial-gradient(ellipse at 84% 37%,#14304d99 0,transparent 40%),radial-gradient(ellipse at 2% 100%,#0c1c2a 0,transparent 55%),#050608}
.inner-hero,.detail-hero{background:radial-gradient(ellipse at 88% 30%,#162c444d,transparent 45%),#050608}
.hero:after,.inner-hero:after,.detail-hero:after{content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;background-image:linear-gradient(#fff 1px,transparent 1px),linear-gradient(90deg,#fff 1px,transparent 1px);background-size:80px 80px;opacity:.02;mask-image:linear-gradient(90deg,transparent 12%,#000 75%)}
.hero-noise{opacity:.055;background-size:56px 56px}
.asas-circuit{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:.73;pointer-events:none;filter:drop-shadow(0 0 8px #2b5a8960)}
.hero .asas-circuit{opacity:.8}
.inner-hero .asas-circuit,.detail-hero .asas-circuit{opacity:.43}
.hero-inner{z-index:1;min-height:calc(100svh - 158px);max-height:920px;gap:4%;padding-block:80px 70px}
.hero-content{z-index:3}
.hero .eyebrow,.eyebrow,.inner-hero .eyebrow,.detail-title .eyebrow{color:#c0d9ee;letter-spacing:.17em}
.eyebrow-mark{height:2px;background:linear-gradient(90deg,#2b5a89,#e1f1ff);box-shadow:0 0 11px #98d1f54d}
.hero h1{font-size:clamp(44px,4.8vw,78px);line-height:1.04;letter-spacing:-.05em}
.hero h1 strong{color:#accdec;text-shadow:0 0 50px #90bee72e}
.hero h1 .hero-line-last{color:#fff}
.hero-description,.inner-hero p,.detail-title p{color:#c8d0da;max-width:565px;font-size:15px;line-height:1.85}
.hero-location{color:#b6c6d4}
.hero-lower{color:#c5d1da;border-top:1px solid #ffffff23}
.hero-graphic{aspect-ratio:1/1;border:1px solid #d5eaff23;background:radial-gradient(circle at 50% 50%,#2b5a8926 0,transparent 49%),#05090e70;box-shadow:inset 0 0 80px #0007,0 30px 95px #0005;clip-path:polygon(0 0,94% 0,100% 6%,100% 100%,6% 100%,0 94%)}
.hero-graphic:before,.hero-graphic:after{background:#aad0ef1d}
.blueprint-grid,.detail-visual-grid{opacity:.72}
.radar-ring{border-color:#a6c8e544}
.ring-two{border-color:#7caeda42}
.center-ring{background:radial-gradient(circle,#335d8017,#08131c77);border:1px solid #ffffff36;box-shadow:0 0 0 12px #ffffff04,0 0 75px #74baff2b}
.center-ring img{filter:drop-shadow(0 9px 20px #0009)}
.diagram-tech{background:#090f18dd;color:#fff;border:1px solid #d6ecff3b;backdrop-filter:blur(9px);box-shadow:0 6px 34px #0009}
.diagram-tech i{background:#e2f4ff;box-shadow:0 0 13px #a3c9ff,0 0 0 3px #8baed531}
.graphic-caption{color:#d4dbe5}
/* White typographic system and monochrome plates */
.stats-band,.solutions-home,.solutions-directory,.process-section,
.about-preview,.about-page-content,.contact-page,.reserved,
.detail-content,.detail-note-section,.section-space:not(.process-section):not(.contact-page):not(.about-page-content){background:#07090c;color:#f9fbff}
.stats-band{background:#0d1015;border-color:#ffffff1e}
.stat{border-color:#ffffff24}
.stat b{color:#fff;text-shadow:0 0 28px #2b5a8950}
.stat span{color:#b9c7d5}
.section-space{padding-block:116px}
.section-intro h2,.value-intro h2,.process-section h2,.about-preview h2,.about-page-content h2{color:#fff}
.section-intro h2 em,.process-section h2 em,.about-preview h2 em,.about-page-content h2 em{color:#a9c7e0}
.section-intro>p,.section-intro p,.about-preview-content p{color:#c5ccd7}
.service-grid{border-color:#ffffff25;gap:0}
.service-card{background:#0d1117;color:#f7f9ff;border-color:#303845;min-height:345px;padding:29px;transition:background .38s,box-shadow .38s,border-color .38s,transform .38s;transform:translateY(0)}
.service-card:before{content:"";position:absolute;inset:0;opacity:0;transition:opacity .3s;pointer-events:none;background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),#4478b133,transparent 70%)}
.service-card:after{width:2px;background:linear-gradient(#a3cff5,#2b5a89);box-shadow:0 0 15px #8cc8ff}
.service-card:hover{background:#111923;box-shadow:0 23px 44px #0009;transform:translateY(-5px);border-color:#678aab7a}
.service-card:hover:before{opacity:1}
.service-card-top,.service-card-bottom{z-index:1;position:relative}
.service-number{color:#bbc8d6}
.service-symbol{background:#ffffff09;color:#e1efff;border:1px solid #acc9e745;border-radius:50%}
.service-card:hover .service-symbol{background:#2b5a893c;box-shadow:0 0 28px #4d91d52b}
.service-card-bottom h3{color:#fff;font-weight:750}
.service-card-bottom p{color:#b8c3ce;font-size:13px}
.service-card-meta{color:#d2e6f7;border-color:#ffffff25}
.value-section{background:#0b1018;color:#fff;border-block:1px solid #ffffff17}
.value-section:before{border-color:#ffffff16}
.value-intro h2 em{color:#b9d4ee}
.value-intro>p,.feature p{color:#bdc8d2}
.feature{border-color:#ffffff24}.feature-number{color:#b5d5ee}
.step{border-color:#303844;background:#0e1117;transition:background .3s,transform .3s}
.step:hover{background:#151d29;transform:translateY(-4px)}
.steps-grid{border-color:#303844}
.step-index{color:#aecce6}
.step-rule{background:linear-gradient(90deg,#2b5a89,#ffffff29)}
.step h3{color:#fff}
.step p{color:#bdc7d0}
.about-preview{background:#0e1319;border-top:1px solid #ffffff1b}
.about-monogram{background:radial-gradient(circle,#142f4b70,transparent 62%),#080b0f;border-color:#ffffff28}
.about-monogram:before,.about-monogram:after{border-color:#ffffff1a}
.about-monogram-outer,.about-monogram-center{border-color:#88afd03b}
.about-coordinate{color:#b9cbd8}
.cta-section{background:radial-gradient(circle at 70% 50%,#18355282,transparent 40%),#080b0f;border-block:1px solid #ffffff22}
.cta-copy p{color:#c9d6e0}
.cta-copy h2 em{color:#b6d3ea}
.cta-orb{border-color:#9dc6e933}
.btn-primary{background:#fff;border-color:#fff;color:#060a0e}
.btn-primary:hover{background:#c4dbed;color:#000;border-color:#c4dbed;box-shadow:0 8px 26px #a7d7ff2b}
.btn-white{background:#fff;color:#050608}
.btn-white:hover{background:#d3e4f2}
.btn-ghost{border-color:#ffffff64;color:#fff}
.btn-ghost:hover{background:#ffffff16}
.btn-outline{border-color:#a4c5e4;color:#f9fbff}
.btn-outline:hover{background:#fff;color:#06080c}
.text-link{color:#d5e6f4;border-color:#7897b0}
.text-link:hover{color:#fff}
/* Interior pages */
.inner-hero{min-height:350px;border-bottom:1px solid #ffffff24}
.inner-hero-content{z-index:1;padding-block:74px 70px}
.inner-hero h1{color:#fff}
.inner-hero-index{color:#d0dce6}
.detail-hero{border-bottom:1px solid #ffffff24}
.detail-hero-grid{z-index:1;position:relative}
.detail-title h1{color:#fff}
.back-link{color:#c6d8e9}
.detail-visual{background:radial-gradient(circle at 50% 45%,#163a5770,transparent 54%),#090f17;border-color:#8fb7d34b}
.detail-visual:before{border-color:#b3d4e046;box-shadow:0 0 0 35px #91b2da0e,0 0 0 72px #b8d7ec08}
.detail-visual-number,.detail-visual-caption{color:#d6e7f6}
.detail-visual-icon{background:#132b4166;border-color:#b5d4ed65;box-shadow:0 0 43px #2b5a8956}
.detail-visual-icon .icon{color:#fff}
.detail-sidebar h2,.detail-sidebar h3,.capability-desc h3{color:#fff}
.detail-sidebar p,.capability-desc p{color:#bfc9d4}
.detail-side-line{background:#ffffff23}
.capability-list,.capability-row{border-color:#ffffff24}
.capability-row{transition:background .3s,padding .3s,transform .3s}
.capability-row:hover{background:#182535;padding-inline:13px;transform:translateX(2px)}
html[dir=rtl] .capability-row:hover{transform:translateX(-2px)}
.capability-no,.capability-arrow{color:#a7c9e7}
.detail-note{background:#111923;border-color:#86b9e9}
.detail-note .note-star{color:#aecde8}
.detail-note p{color:#bec9d4}
.large-vertical-no{color:#223145}
.about-top-grid p{color:#c3cbd4}
.vision-section{background:#0b1420;border-block:1px solid #ffffff20}
.vision-grid article{border-color:#ffffff25}
.vision-grid p,.vision-grid h2{color:#e6edf5}
.values-grid{border-color:#ffffff25}
.value-tile{border-color:#ffffff25;background:#0d1117;transition:background .3s}
.value-tile:hover{background:#131c27}
.value-tile-index{color:#adcfe9}
.value-tile h3{color:#fff}
.value-tile p{color:#bcc8d3}
.reserved{background:#080b10}
.reserved-symbol{background:#192331;border-color:#6c849b;color:#c2e1fb}
.reserved p{color:#bfc8d1}
.contact-page{background:#080b10}
.contact-line{border-color:#ffffff26}
.contact-icon{color:#bbd5ef}
.contact-line span{color:#bbc8d6}
.contact-line a,.contact-line b{color:#fff}
.contact-line a:hover{color:#b7d7f1}
.contact-line small{color:#a9b8c6}
.contact-form{background:#111720;border:1px solid #52607566;box-shadow:0 30px 90px #0008}
.form-top{background:linear-gradient(90deg,#172a3c,#0a1017);border-bottom:1px solid #ffffff26}
.form-top h2{color:#fff}
.form-top p{color:#c2d0dc}
.form-fields label span{color:#dfe6ef}
.form-fields input,.form-fields select,.form-fields textarea{background:#090d13;border:1px solid #495564;color:#fff;border-radius:3px}
.form-fields input::placeholder,.form-fields textarea::placeholder{color:#a0aab9}
.form-fields input:focus,.form-fields select:focus,.form-fields textarea:focus{border-color:#91bde5;box-shadow:0 0 0 3px #5b9fdb30}
.form-actions p{color:#bec8d2}
.form-result{background:#15263a;color:#dbeafd;border-color:#5b87ae}
.readable p{color:#c4d0dc}
.footer{background:#030407;border-top:1px solid #ffffff28}
.footer-brand p,.footer-brand>span{color:#c1cbd4}
.footer-title{color:#d2e5f5}
.footer-nav-wrap a{color:#cbd5de}
.footer-inquiries small{color:#abbccc}
.footer-bottom{color:#bac5ce;border-color:#ffffff24}
/* Official energized intro */
.asas-intro{position:fixed;inset:0;z-index:2500;display:grid;place-items:center;background:radial-gradient(circle at 50% 49%,#142a3d 0,#080d15 32%,#020306 78%);color:#fff;overflow:hidden;isolation:isolate;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .62s cubic-bezier(.2,.75,.1,1),visibility .62s}
.asas-intro.is-playing{opacity:1;visibility:visible;pointer-events:auto}
.asas-intro.is-hidden{opacity:0;visibility:hidden;pointer-events:none}
.intro-circuit{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.8;filter:drop-shadow(0 0 13px #26537e78)}
.intro-center{display:flex;flex-direction:column;align-items:center;position:relative;z-index:1;transform:translateY(15px);animation:introRise 1s cubic-bezier(.1,.7,.2,1) both}
.intro-seal{width:clamp(200px,31vw,390px);padding:10px 26px;filter:drop-shadow(0 0 22px #4d8abc4a)}
.intro-seal img{display:block;width:100%;height:auto}
.intro-rule{width:clamp(135px,23vw,265px);height:1px;margin-top:22px;background:linear-gradient(90deg,transparent,#e4f4ff,transparent);box-shadow:0 0 12px #b5e5ff}
.intro-center p{padding-inline:16px;margin-top:21px;text-align:center;font:600 clamp(10px,1vw,13px)/1.6 var(--font-display);letter-spacing:.22em;color:#dce8f2}
html[lang=ar] .intro-center p{font-family:var(--font-ar);letter-spacing:0;font-size:15px}
.intro-counter{height:2px;width:clamp(140px,20vw,240px);background:#ffffff1e;margin-top:30px;overflow:hidden}
.intro-counter-progress{display:block;width:100%;height:100%;background:linear-gradient(90deg,#2B5A89,#fff);transform:translateX(-100%);animation:introLoad 1.72s linear both;box-shadow:0 0 15px #96c9ec}
.intro-skip{position:absolute;inset-inline-end:clamp(24px,5vw,70px);bottom:clamp(23px,4vw,50px);z-index:2;background:none;border:0;color:#c9d9e7;font-size:11px;font-weight:750;letter-spacing:.1em;padding:12px;transition:color .2s}
.intro-skip:hover{color:#fff}
@keyframes introRise{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes introLoad{to{transform:translateX(0)}}
/* Sweeping page-to-page optical transition, never trapping navigation */
.page-transition{position:fixed;inset:0;z-index:2100;background:#050608;display:flex;align-items:center;justify-content:center;pointer-events:none;transform:translateY(105%);transition:transform .46s cubic-bezier(.7,0,.3,1);overflow:hidden}
.page-transition.is-active{transform:translateY(0)}
.page-transition img{width:75px;height:80px;object-fit:contain;opacity:.88;filter:drop-shadow(0 0 22px #659ac6);animation:transitionPulse 1s ease-in-out infinite alternate}
.transition-bar{position:absolute;top:0;left:-40%;width:180%;height:2px;background:linear-gradient(90deg,transparent,#2b5a89,#fff,transparent);box-shadow:0 0 33px #8fcfff;transform:rotate(-13deg)}
@keyframes transitionPulse{to{opacity:.6;transform:scale(.95)}}
/* Scroll reveal and tactile details */
.asas-has-js .reveal-pending{opacity:0;transform:translateY(32px);filter:blur(4px)}
.asas-has-js .reveal-pending.is-revealed{opacity:1;transform:translateY(0);filter:blur(0)}
.asas-has-js .reveal-pending{transition:opacity .8s cubic-bezier(.2,.75,.2,1),transform .8s cubic-bezier(.2,.75,.2,1),filter .8s ease}
.asas-has-js .reveal-pending:nth-child(3n+2){transition-delay:.07s}
.asas-has-js .reveal-pending:nth-child(3n+3){transition-delay:.14s}
.button{position:relative;overflow:hidden}
.button:after,.header-cta:after{content:"";position:absolute;top:0;left:-115%;height:100%;width:85%;background:linear-gradient(115deg,transparent,#ffffff40,transparent);transform:skewX(-16deg);transition:left .65s ease;pointer-events:none}
.button:hover:after,.header-cta:hover:after{left:145%}
@media (max-width:1190px){.header-row{height:84px}.brand-link img{width:116px;height:80px}.brand-link{width:116px}.hero-inner{min-height:650px}}
@media (max-width:980px){.header-row{height:76px}.brand-link,.brand-link img{width:108px}.brand-link img{height:72px}.mobile-nav[hidden]{display:none}.hero-inner{min-height:600px}}
@media (max-width:720px){
  .header-row{height:73px}.brand-link,.brand-link img{width:94px}.brand-link img{height:67px}
  .hero-inner{min-height:auto;max-height:none;padding-block:70px 42px}
  .hero h1{font-size:clamp(35px,9vw,55px);line-height:1.12}
  html[lang=ar] .hero h1{font-size:clamp(31px,8.6vw,45px)}
  .hero-graphic{width:min(100%,490px);max-width:490px}
  .section-space{padding-block:76px}
  .hero .asas-circuit{opacity:.37}
  .intro-seal{width:clamp(220px,63vw,300px)}
  .intro-center p{letter-spacing:.09em;max-width:340px}
  .service-card{min-height:290px}
  .step:hover{transform:none}
  .capability-row:hover,html[dir=rtl] .capability-row:hover{transform:none}
  .detail-visual{background-color:#0c1118}
}
@media (max-width:440px){
 .hero h1{font-size:clamp(34px,8.7vw,43px)}
 .diagram-tech{font-size:7px}
 .intro-center p{font-size:10px}
 html[lang=ar] .intro-center p{font-size:14px}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto!important}
  .intro-circuit [animateMotion],.asas-circuit [animateMotion]{display:none}
  .asas-intro{display:none!important}
  .page-transition{display:none!important}
  .asas-has-js .reveal-pending{opacity:1!important;filter:none!important;transform:none!important}
  .service-card:hover,.step:hover{transform:none!important}
  .button:after,.header-cta:after{display:none}
}
/* RTL containment: animated SVG tracks must never expand the document width. */
html{overflow-x:clip}
.asas-circuit,.intro-circuit{overflow:hidden}
.page-transition{contain:paint}


/* ASAS 360° Brand Typography • 2026
 * English display: Saved By Zero (the precise wordmark type family identified in the brand master).
 * Served from an external CC0 font stylesheet; no font binaries shipped inside the package.
 * Fallback: Exo 2. Arabic display: Changa; readable body: IBM Plex Sans Arabic.
 * Never reinterpret, typeset or alter the approved logo image.
 */
:root{
  --font-display:'Saved By Zero','SavedByZero','Exo 2','Manrope',Arial,sans-serif;
  --font-ui:'Manrope',Arial,sans-serif;
  --font-ar-display:'Changa','IBM Plex Sans Arabic',Tahoma,sans-serif;
}
/* Use brand lettering for prominent English display and functional wayfinding. */
html[lang=en] :is(h1,h2,h3,.eyebrow,.service-number,.stat b,.large-vertical-no,.detail-visual-number,.intro-center p,.footer-title),
html[lang=en] :is(.desktop-nav a,.mobile-nav a,.header-cta,.button,.lang-switch,.service-card-meta,.back-link,.intro-skip,.graphic-caption,.detail-visual-caption){
  font-family:var(--font-display);
  font-weight:400;
  font-synthesis:none;
  letter-spacing:.016em;
}
/* Preserve hierarchy with precise size/spacing rather than faux bolding the single-weight display font. */
html[lang=en] :is(h1,h2,h3){line-height:1.2;letter-spacing:-.007em;text-wrap:balance}
html[lang=en] .hero h1{font-size:clamp(36px,4.25vw,70px);line-height:1.2;letter-spacing:-.012em}
html[lang=en] .detail-title h1{font-size:clamp(34px,3.9vw,64px);line-height:1.25}
html[lang=en] .inner-hero h1{line-height:1.22}
html[lang=en] .section-intro h2,
html[lang=en] .about-preview h2,
html[lang=en] .value-intro h2{line-height:1.23}
html[lang=en] .service-card-bottom h3{font-size:clamp(17px,1.3vw,21px);line-height:1.4}
html[lang=en] .desktop-nav a{font-size:11px;letter-spacing:.022em}
html[lang=en] :is(.button,.header-cta,.mobile-nav a){letter-spacing:.018em}
html[lang=en] .intro-center p{font-size:clamp(11px,1.0vw,15px);letter-spacing:.09em}
/* Arabic retains proper RTL shaping. Match the modular engineered look with Changa. */
html[lang=ar] :is(h1,h2,h3,.eyebrow,.stat b,.large-vertical-no,.intro-center p,.footer-title),
html[lang=ar] :is(.desktop-nav a,.mobile-nav a,.header-cta,.button,.lang-switch,.back-link,.intro-skip){
  font-family:var(--font-ar-display);
  letter-spacing:0;
  font-synthesis:none;
}
html[lang=ar] :is(h1,h2,h3){line-height:1.44;text-wrap:balance}
html[lang=ar] .hero h1{font-size:clamp(34px,4.0vw,61px);line-height:1.5}
html[lang=ar] .service-card-bottom h3{font-family:var(--font-ar-display);font-size:clamp(20px,1.55vw,24px);line-height:1.55}
/* Long-form text remains human-friendly on both languages. */
html[lang=en] :is(body,p,.form-fields label,.form-fields input,.form-fields textarea,.form-fields select){font-family:var(--font-ui)}
html[lang=ar] :is(body,p,.form-fields label,.form-fields input,.form-fields textarea,.form-fields select){font-family:var(--font-ar)}
html[lang=en] .intro-center p{font-family:var(--font-display)}
html[lang=ar] .intro-center p{font-family:var(--font-ar-display)}
@media(max-width:980px){
  html[lang=en] .hero h1{font-size:clamp(35px,5vw,55px)}
}
@media(max-width:720px){
  html[lang=en] .hero h1{font-size:clamp(30px,7.5vw,47px)}
  html[lang=en] .detail-title h1{font-size:clamp(31px,7.2vw,46px)}
  html[lang=ar] .hero h1{font-size:clamp(31px,8.1vw,45px)}
  html[lang=en] .service-card-bottom h3{font-size:19px}
  html[lang=en] .intro-center p{font-size:11px}
}
@media(max-width:440px){
  html[lang=en] .hero h1{font-size:clamp(29px,7.15vw,39px)}
  html[lang=ar] .hero h1{font-size:clamp(30px,7.9vw,42px)}
}