:root { --ink:#071b34; --navy:#06162c; --blue:#1268e8; --aqua:#19c6d7; --blue-pale:#eaf3ff; --line:#dfe8f1; --paper:#f8fafc; --muted:#66768a; --white:#fff; --radius:1.25rem; --shadow:0 18px 50px rgba(12, 37, 71, .10); color-scheme: light; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:92px; }
body { color:var(--ink); background:var(--white); font-family:"Tajawal", sans-serif; line-height:1.7; overflow-x:hidden; }
html[dir="ltr"] body { font-family:"DM Sans", sans-serif; }
a { color:inherit; text-decoration:none; }
.skip-link { position:fixed; z-index:1000; top:-60px; inset-inline-start:1rem; padding:.6rem 1rem; color:var(--white); background:var(--blue); border-radius:.5rem; transition:top .2s; }
.skip-link:focus { top:1rem; }
.site-header { position:absolute; z-index:10; top:0; inset-inline:0; transition:background .3s, box-shadow .3s; }
.site-header.scrolled { position:fixed; background:rgba(5, 19, 39, .94); box-shadow:0 8px 30px rgba(0,0,0,.15); backdrop-filter:blur(15px); }
body.has-flash-message .site-header { position:relative; background:#051327; box-shadow:0 8px 30px rgba(0,0,0,.12); }
body.has-flash-message .portal-flash { padding-top:1.25rem; }
.nav-shell { min-height:86px; max-width:1320px; padding-inline:2rem; }
.brand { display:inline-flex; gap:.65rem; align-items:center; color:var(--white); }
.brand:hover { color:var(--white); }
.brand-mark { display:grid; place-items:center; width:2.6rem; height:2.6rem; font:700 1.42rem/1 "DM Sans", sans-serif; color:var(--white); background:linear-gradient(135deg, var(--aqua), var(--blue)); border-radius:.85rem .85rem .85rem .15rem; box-shadow:0 8px 20px rgba(25,198,215,.28); }
.brand-mark--logo { position:relative; overflow:visible; background:transparent; border-radius:0; box-shadow:none; }
.brand-mark--logo img { width:2.85rem; max-width:none; height:auto; filter:drop-shadow(0 5px 10px rgba(2,19,45,.2)); }
.brand-copy { display:grid; line-height:1.1; }
.brand-copy strong { font-size:1.02rem; font-weight:800; letter-spacing:-.02em; }
.brand-copy small { margin-top:.2rem; font:600 .56rem/1.2 "DM Sans", sans-serif; letter-spacing:.1em; opacity:.68; }
.navbar-nav .nav-link { position:relative; padding:.55rem .75rem !important; color:rgba(255,255,255,.77); font-size:.92rem; transition:color .2s; }
.navbar-nav .nav-link:hover,.navbar-nav .nav-link.active { color:var(--white); }
.navbar-nav .nav-link::after { content:""; position:absolute; bottom:.2rem; inset-inline:50%; width:0; height:2px; background:var(--aqua); border-radius:4px; transition:all .25s; }
.navbar-nav .nav-link:hover::after,.navbar-nav .nav-link.active::after { width:1.1rem; inset-inline-start:calc(50% - .55rem); }
.language-switches { display:flex; gap:.3rem; direction:ltr; }
.language-switch { min-width:2.2rem; height:2.35rem; color:rgba(255,255,255,.75); background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.24); border-radius:.65rem; font:700 .72rem "DM Sans", sans-serif; cursor:pointer; transition:background .2s,color .2s,border-color .2s; }
.language-switch:hover,.language-switch.active { color:var(--white); background:var(--blue); border-color:transparent; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.6rem; border-radius:.75rem; font-weight:700; transition:transform .2s, box-shadow .2s, background .2s; }
.btn:hover { transform:translateY(-2px); }
.btn-brand { color:var(--white); background:linear-gradient(135deg, #168de7, var(--blue)); border:0; box-shadow:0 10px 25px rgba(18,104,232,.28); padding:.75rem 1.1rem; }
.btn-brand:hover { color:var(--white); box-shadow:0 14px 30px rgba(18,104,232,.38); }
.btn-ghost { color:var(--white); background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.28); padding:.75rem 1.1rem; }
.btn-ghost:hover { color:var(--white); background:rgba(255,255,255,.15); }
.hero-section,.hero-slide { min-height:790px; }
.hero-slide { position:relative; display:flex; align-items:center; color:var(--white); background-size:cover; background-position:center; isolation:isolate; }
.hero-slide--payment { background-image:url("hero-kinan.webp"); }
.hero-slide--people { background-image:url("about-kinan.webp"); background-position:center; }
.hero-slide--vision { background-color:#061a36; background-image:radial-gradient(circle at 80% 25%, rgba(23,172,218,.34), transparent 20%), radial-gradient(circle at 15% 75%, rgba(18,104,232,.42), transparent 22%), linear-gradient(115deg, transparent 0 47%, rgba(255,255,255,.06) 47.2% 47.5%, transparent 47.7%), linear-gradient(50deg, transparent 0 52%, rgba(255,255,255,.055) 52.2% 52.5%, transparent 52.7%); }
.hero-slide--vision::before { content:""; position:absolute; width:500px; height:500px; inset-inline-end:12%; top:18%; border:1px solid rgba(90,205,255,.36); border-radius:50%; box-shadow:0 0 0 35px rgba(72,197,255,.035),0 0 0 75px rgba(72,197,255,.025),0 0 60px rgba(36,181,255,.22); }
.hero-overlay { position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg, rgba(4,17,35,.95) 0%, rgba(4,17,35,.78) 37%, rgba(4,17,35,.25) 78%, rgba(4,17,35,.15) 100%); }
html[dir="rtl"] .hero-overlay { background:linear-gradient(270deg, rgba(4,17,35,.95) 0%, rgba(4,17,35,.78) 37%, rgba(4,17,35,.25) 78%, rgba(4,17,35,.15) 100%); }
.hero-content { position:relative; width:100%; padding-top:6.8rem; }
.hero-content > * { max-width:640px; }
.eyebrow { display:flex; gap:.45rem; align-items:center; margin:0 0 1rem; color:#0e70de; font-size:.82rem; font-weight:800; letter-spacing:.02em; }
.eyebrow i { color:var(--aqua); font-size:1rem; }
.eyebrow-light { color:#a8eefa; }
.hero-content h1,.hero-content h2 { margin:0; max-width:720px; font-size:clamp(2.8rem, 5.6vw, 5.4rem); line-height:1.13; font-weight:800; letter-spacing:-.055em; }
.page-hero { position:relative; min-height:420px; padding:11.5rem 0 5.4rem; color:var(--white); overflow:hidden; background:#071c37; background-image:radial-gradient(circle at 82% 20%, rgba(25,198,215,.33), transparent 25%),radial-gradient(circle at 8% 85%, rgba(18,104,232,.43), transparent 30%); }
.page-hero::before,.page-hero::after { content:""; position:absolute; border:1px solid rgba(125,220,255,.2); border-radius:50%; }.page-hero::before { width:500px; height:500px; inset-inline-end:-115px; top:-315px; }.page-hero::after { width:320px; height:320px; inset-inline-start:-130px; bottom:-240px; }
.page-hero .container { position:relative; z-index:1; }.page-hero h1 { max-width:750px; margin:0; font-size:clamp(2.45rem, 5vw, 4.55rem); line-height:1.18; font-weight:800; letter-spacing:-.055em; }.page-hero .hero-lead { margin-bottom:0; }
.page-hero--about { background-image:radial-gradient(circle at 18% 25%, rgba(25,198,215,.32), transparent 23%),radial-gradient(circle at 85% 75%, rgba(18,104,232,.4), transparent 28%); }.page-hero--journey { background-image:radial-gradient(circle at 78% 25%, rgba(25,198,215,.32), transparent 22%),linear-gradient(120deg, #06162c, #0a2b52); }.page-hero--contact { background-image:radial-gradient(circle at 78% 25%, rgba(25,198,215,.34), transparent 25%),radial-gradient(circle at 18% 76%, rgba(18,104,232,.45), transparent 28%); }
.hero-lead { margin:1.5rem 0 2rem; max-width:525px; color:rgba(255,255,255,.8); font-size:1.12rem; line-height:1.9; }
.hero-actions { display:flex; flex-wrap:wrap; gap:.75rem; }
.hero-bottom { position:absolute; z-index:1; right:0; bottom:3rem; left:0; }
.trust-items { display:flex; gap:1.5rem; flex-wrap:wrap; color:rgba(255,255,255,.92); font-size:.85rem; }
.trust-items span { display:inline-flex; align-items:center; gap:.45rem; }
.trust-items i { display:grid; place-items:center; width:1.8rem; height:1.8rem; color:var(--aqua); background:rgba(25,198,215,.12); border:1px solid rgba(25,198,215,.22); border-radius:50%; }
.hero-indicators { z-index:2; justify-content:flex-end; gap:.45rem; bottom:2.8rem; margin:0 max(2rem, calc((100vw - 1296px) / 2)); }
.hero-indicators [data-bs-target] { width:1.8rem; height:3px; margin:0; border:0; background-color:rgba(255,255,255,.45); border-radius:3px; }
.hero-indicators .active { width:3rem; background-color:var(--aqua); }
.section-pad { padding:7.2rem 0; content-visibility: auto; contain-intrinsic-size: auto 500px; }
.section-pad-sm { padding:4.5rem 0; content-visibility: auto; contain-intrinsic-size: auto 300px; }
.intro-strip { background:var(--paper); }
.display-title,.section-heading h2,.about h2,.journey h2,.vision h2,.contact h2 { margin:0; color:var(--ink); font-size:clamp(2rem,3.4vw,3.45rem); line-height:1.25; font-weight:800; letter-spacing:-.045em; }
.muted-copy { color:var(--muted); font-size:1.01rem; line-height:1.9; }
.section-heading { margin-bottom:3rem; }
.service-card { position:relative; height:100%; min-height:285px; padding:1.8rem; background:var(--white); border:1px solid var(--line); border-radius:var(--radius); box-shadow:0 8px 20px rgba(18,51,88,.025); overflow:hidden; transition:transform .25s,box-shadow .25s,border .25s; }
.service-card::after { content:""; position:absolute; width:120px; height:120px; left:-48px; bottom:-58px; background:radial-gradient(circle, rgba(25,198,215,.16), transparent 68%); }
.service-card:hover { transform:translateY(-8px); border-color:transparent; box-shadow:var(--shadow); }
.service-icon { display:grid; place-items:center; width:3.2rem; height:3.2rem; margin-bottom:1.6rem; color:var(--blue); background:var(--blue-pale); border-radius:1rem; font-size:1.4rem; }
.service-card h3 { font-size:1.2rem; font-weight:800; }
.service-card h2 { font-size:1.2rem; font-weight:800; }
.page-link-card { display:block; color:var(--ink); }.page-link-card .text-link { position:relative; z-index:1; margin-top:1.2rem; font-size:.85rem; }
.service-card p { position:relative; z-index:1; margin:0; color:var(--muted); font-size:.92rem; line-height:1.8; }
.service-number { position:absolute; top:1.3rem; inset-inline-end:1.5rem; color:#bdc9d6; font:700 .7rem "DM Sans", sans-serif; }
.about { background:var(--paper); }
.about-image-wrap { position:relative; padding-inline-start:1.4rem; padding-bottom:1.4rem; }
.about-image-wrap::before { content:""; position:absolute; width:65%; height:68%; inset-inline-start:0; bottom:0; background:linear-gradient(145deg, var(--aqua), var(--blue)); border-radius:1.3rem; }
.about-image { position:relative; width:100%; min-height:450px; object-fit:cover; border-radius:1.3rem; box-shadow:var(--shadow); }
.floating-card { position:absolute; z-index:2; inset-inline-end:-1.25rem; bottom:3.2rem; display:flex; align-items:center; gap:.75rem; padding:.85rem 1rem; color:var(--ink); background:rgba(255,255,255,.94); border:1px solid rgba(255,255,255,.7); border-radius:1rem; box-shadow:0 16px 40px rgba(10,36,67,.15); backdrop-filter:blur(12px); }
.floating-card > i { display:grid; place-items:center; width:2.45rem; height:2.45rem; color:#e84378; background:#fff0f5; border-radius:.75rem; }
.floating-card span { display:grid; line-height:1.3; }
.floating-card b { font-size:.83rem; font-weight:800; }.floating-card small { color:var(--muted); font-size:.7rem; }
.lead-copy { margin-top:1.25rem; color:#314962; font-size:1.12rem; line-height:1.9; }
.values-list { display:grid; gap:.65rem; margin:1.7rem 0; }
.values-list div { display:flex; align-items:center; gap:.65rem; font-weight:700; font-size:.92rem; }.values-list i { color:var(--blue); font-size:1.15rem; }
.text-link { display:inline-flex; align-items:center; gap:.5rem; color:var(--blue); font-weight:800; }.text-link i { transition:transform .2s; }.text-link:hover i { transform:translate(-3px,-3px); }
html[dir="ltr"] .text-link:hover i { transform:translate(3px,-3px); }
.journey { position:relative; color:var(--white); background:#061a36; overflow:hidden; }.journey::after { content:""; position:absolute; width:700px; height:700px; inset-inline-start:-360px; bottom:-480px; border:1px solid rgba(67,201,237,.16); border-radius:50%; box-shadow:0 0 0 55px rgba(67,201,237,.025),0 0 0 115px rgba(67,201,237,.02); }.journey h2 { color:var(--white); }.journey-head { margin-bottom:3.5rem; }.journey-head p:not(.eyebrow) { margin:0; color:rgba(255,255,255,.66); }
.journey-steps { position:relative; z-index:1; border:1px solid rgba(255,255,255,.17); border-radius:1.2rem; overflow:hidden; }.journey-steps article { position:relative; min-height:250px; padding:2rem; }.journey-steps > div:not(:last-child) article { border-inline-end:1px solid rgba(255,255,255,.17); }.journey-steps span { display:block; margin-bottom:1.4rem; color:#6ecddb; font:700 .73rem "DM Sans",sans-serif; letter-spacing:.1em; }.journey-steps i { display:block; margin-bottom:1rem; color:var(--aqua); font-size:1.7rem; }.journey-steps h3 { font-size:1.23rem; font-weight:800; }.journey-steps p { max-width:260px; margin:0; color:rgba(255,255,255,.65); font-size:.9rem; line-height:1.8; }
.vision { background:var(--white); }.vision-card { position:relative; padding:4.5rem; background:linear-gradient(135deg,#f1f8ff,#edf7f8); border-radius:1.5rem; overflow:hidden; }.vision-glow { position:absolute; width:400px; height:400px; inset-inline-end:-110px; top:-170px; background:radial-gradient(circle, rgba(25,198,215,.28), transparent 67%); }.vision-points { display:grid; gap:.8rem; }.vision-points div { display:flex; align-items:center; gap:.75rem; padding:.85rem 1rem; background:rgba(255,255,255,.72); border:1px solid rgba(255,255,255,.92); border-radius:.8rem; color:#314962; font-weight:800; font-size:.9rem; }.vision-points i { color:var(--blue); font-size:1.2rem; }
.contact { background:var(--paper); }.contact-details,.social-links { display:grid; gap:.75rem; margin-top:1.5rem; }.social-links { margin-top:1.75rem; }.contact-detail,.social-link { display:flex; align-items:center; gap:.8rem; max-width:380px; padding:1rem; background:var(--white); border:1px solid var(--line); border-radius:1rem; box-shadow:0 8px 20px rgba(15,42,72,.04); transition:transform .2s,box-shadow .2s; }.contact-detail:hover,.social-link:hover { transform:translateY(-3px); box-shadow:var(--shadow); }.contact-detail > i:first-child,.social-link > i:first-child { display:grid; place-items:center; width:2.6rem; height:2.6rem; color:var(--white); border-radius:.75rem; font-size:1.2rem; }.contact-detail > i:first-child { background:linear-gradient(135deg, var(--blue), var(--aqua)); }.facebook-link > i:first-child { background:#1877f2; }.tiktok-link > i:first-child { background:#101018; }.instagram-link > i:first-child { background:radial-gradient(circle at 30% 107%,#fdf497 0 5%,#fdf497 5% 10%,#fd5949 45%,#d6249f 60%,#285aeb 90%); }.x-link > i:first-child { background:#101010; }.linkedin-link > i:first-child { background:#0a66c2; }.contact-detail span,.social-link span { display:grid; line-height:1.35; }.contact-detail b,.social-link b { font-size:.86rem; }.contact-detail small,.social-link small { color:var(--muted); font-size:.73rem; }.contact-detail .arrow,.social-link .arrow { margin-inline-start:auto; color:var(--blue); }.phone-number { direction:ltr; unicode-bidi:plaintext; font-family:"DM Sans",sans-serif; letter-spacing:.02em; }
.contact-form { padding:2rem; background:var(--white); border:1px solid var(--line); border-radius:1.25rem; box-shadow:var(--shadow); }.contact-form label { display:block; margin-bottom:.4rem; color:#314962; font-size:.84rem; font-weight:800; }.contact-form input,.contact-form textarea { width:100%; padding:.77rem .9rem; color:var(--ink); background:#f9fbfd; border:1px solid #dce6ef; border-radius:.65rem; outline:0; transition:border .2s, box-shadow .2s; }.contact-form input:focus,.contact-form textarea:focus { border-color:var(--blue); box-shadow:0 0 0 .2rem rgba(18,104,232,.1); }.contact-form textarea { resize:vertical; }.form-note { color:var(--muted); font-size:.78rem; }
.form-success { display:flex; padding:.85rem 1rem; color:#0b3d2b; background:#d7f5e3; border:1px solid #b2dec7; border-radius:.65rem; font-weight:700; }
.news,.careers { background:var(--paper); }.news-intro { max-width:690px; margin-bottom:2.4rem; }.news-intro h2,.careers h2 { margin:0; color:var(--ink); font-size:clamp(2rem,3.4vw,3.45rem); line-height:1.25; font-weight:800; letter-spacing:-.045em; }.info-card { height:100%; min-height:230px; padding:1.8rem; background:var(--white); border:1px solid var(--line); border-radius:var(--radius); box-shadow:0 8px 20px rgba(18,51,88,.025); }.info-card i { display:grid; place-items:center; width:3.1rem; height:3.1rem; margin-bottom:1.45rem; color:var(--blue); background:var(--blue-pale); border-radius:1rem; font-size:1.35rem; }.info-card h2,.info-card h3 { margin:0 0 .65rem; font-size:1.2rem; font-weight:800; }.info-card p { margin:0; color:var(--muted); font-size:.92rem; line-height:1.8; }.status-card { display:flex; align-items:flex-start; gap:1rem; padding:1.5rem; color:#314962; background:linear-gradient(135deg,#eef8ff,#edf8f8); border:1px solid #d8ebf5; border-radius:1rem; }.status-card > i { display:grid; flex:0 0 auto; place-items:center; width:2.7rem; height:2.7rem; color:var(--blue); background:var(--white); border-radius:.8rem; font-size:1.2rem; }.status-card b { display:block; margin-bottom:.2rem; font-size:1rem; }.status-card p { margin:0; color:var(--muted); font-size:.9rem; }.status-label { display:inline-flex; margin-bottom:.65rem; padding:.2rem .6rem; color:#087f8d; background:#d8f6f7; border-radius:999px; font:700 .7rem "DM Sans",sans-serif; letter-spacing:.04em; }.career-form-wrap { padding:2rem; background:var(--white); border:1px solid var(--line); border-radius:1.25rem; box-shadow:var(--shadow); }.career-form-wrap h2 { font-size:clamp(1.75rem,3vw,2.5rem); }.career-form-wrap .lead-copy { margin-bottom:1.5rem; }
.site-footer { color:rgba(255,255,255,.75); background:#041327; }.footer-main { padding:4rem 0 2.75rem; }.footer-brand { margin-bottom:1rem; }.site-footer p { max-width:400px; margin:0; font-size:.9rem; line-height:1.8; }.footer-links { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:1.1rem 1.4rem; font-size:.88rem; }.footer-links a:hover { color:var(--aqua); }.footer-bottom { display:flex; align-items:center; justify-content:space-between; padding:1.25rem 0; border-top:1px solid rgba(255,255,255,.12); font-size:.75rem; }.footer-socials { display:flex; flex-wrap:wrap; gap:.5rem; }.footer-bottom a { display:grid; place-items:center; width:2.1rem; height:2.1rem; color:var(--white); background:rgba(255,255,255,.1); border-radius:.55rem; }.footer-bottom a:hover { background:#1877f2; }.footer-bottom a[aria-label="TikTok"]:hover,.footer-bottom a[aria-label="X"]:hover { background:#101018; }.footer-bottom a[aria-label="Instagram"]:hover { background:#d6249f; }.footer-bottom a[aria-label="LinkedIn"]:hover { background:#0a66c2; }
.scroll-top { position:fixed; z-index:8; right:1.25rem; bottom:1.25rem; display:grid; place-items:center; width:2.7rem; height:2.7rem; color:var(--white); background:var(--blue); border:0; border-radius:.8rem; box-shadow:0 10px 25px rgba(18,104,232,.3); opacity:0; pointer-events:none; transform:translateY(10px); transition:.25s; }.scroll-top.visible { opacity:1; pointer-events:auto; transform:translateY(0); } html[dir="rtl"] .scroll-top { right:auto; left:1.25rem; }
@media (max-width:991.98px) { .nav-shell { padding-inline:1rem; }.navbar-collapse { padding:1rem; margin-top:.75rem; background:rgba(5,19,39,.96); border:1px solid rgba(255,255,255,.1); border-radius:1rem; }.navbar-nav { align-items:stretch!important; }.navbar-nav .nav-link { padding:.65rem .2rem!important; }.navbar-nav .nav-link::after { display:none; }.hero-section,.hero-slide { min-height:710px; }.hero-bottom { bottom:2rem; }.hero-indicators { bottom:1.6rem; }.trust-items { padding-bottom:2.2rem; }.about-image { min-height:370px; }.vision-card { padding:2.5rem; }.footer-links { justify-content:flex-start; } }
@media (max-width:767.98px) { .hero-section,.hero-slide { min-height:680px; }.hero-slide--payment { background-position:61% center; }.hero-slide--people { background-position:35% center; }.hero-overlay,html[dir="rtl"] .hero-overlay { background:linear-gradient(90deg, rgba(4,17,35,.92), rgba(4,17,35,.53)); }.hero-content { padding-top:7rem; }.hero-content h1,.hero-content h2 { font-size:clamp(2.45rem,11vw,3.4rem); }.hero-lead { font-size:1rem; }.hero-bottom { display:none; }.hero-indicators { justify-content:center; bottom:1.35rem; margin:0; }.section-pad { padding:4.7rem 0; }.section-pad-sm { padding:3.7rem 0; }.service-grid { --bs-gutter-y:1rem; }.service-card { min-height:0; }.about-image-wrap { padding-inline-start:.8rem; padding-bottom:.8rem; }.floating-card { inset-inline-end:-.25rem; bottom:1.5rem; }.journey-steps > div:not(:last-child) article { border-inline-end:0; border-bottom:1px solid rgba(255,255,255,.17); }.journey-steps article { min-height:0; padding:1.55rem; }.vision-card { padding:2rem 1.35rem; }.contact-form,.career-form-wrap { padding:1.35rem; }.footer-main { padding-top:3rem; }.footer-links { gap:.8rem 1.2rem; }.footer-bottom { align-items:flex-start; gap:1rem; }.scroll-top { bottom:1rem; right:1rem; } html[dir="rtl"] .scroll-top { right:auto; left:1rem; } }