/* =====================================================================
   Sajil site header + footer (web/includes/chrome.html), on every page.
   Everything is inside .sjw so it cannot change the rest of a page,
   and it resets the few things the older site styles set globally.
   ===================================================================== */
.sjw{
  --ink:#082C2B; --ink-2:#0E4341; --mint:#00EFD2; --mint-2:#6FF4E3; --teal:#00B9A3;
  --wash:#E8FCF8; --muted:#5A7B78; --line:#DCEAE7;
  --f-ui:"Noto Kufi Arabic","Montserrat",system-ui,sans-serif;
  --f-lat:"Montserrat","Noto Kufi Arabic",sans-serif;
  font-family:var(--f-ui);line-height:1.6;text-align:start;box-sizing:border-box;-webkit-font-smoothing:antialiased;
}
.sjw[lang="en"]{font-family:var(--f-lat)}
/* resets: low priority (:where) so the rules below always win, but placed after the
   site stylesheets so they beat old global rules like  nav{display:flex}  or  a{color}  */
.sjw *,.sjw *::before,.sjw *::after{box-sizing:border-box;letter-spacing:normal}
:where(.sjw) a{color:inherit;text-decoration:none;background-color:transparent}
:where(.sjw) a:hover,:where(.sjw) a:focus{color:inherit;text-decoration:none}
:where(.sjw) img{display:block;max-width:100%;border:0}
:where(.sjw) ul{list-style:none;margin:0;padding:0}
:where(.sjw) li{margin:0;padding:0}
:where(.sjw) h4,:where(.sjw) p{margin:0;padding:0}
:where(.sjw) nav{display:block;width:auto;justify-content:normal;align-items:normal}
:where(.sjw) button{font:inherit;color:inherit;background:none;border:0;margin:0;cursor:pointer;line-height:1}
:where(.sjw) svg{display:block;flex:none}
:where(.sjw) i,:where(.sjw) em{font-style:normal}
:where(.sjw) :is(span,p,small,b,strong,em,i,label,h1,h2,h3,h4,h5,h6,li,dt,dd,address){color:inherit}
:where(.sjw) :is(h1,h2,h3,h4,h5,h6){font-family:inherit;margin:0}
:where(.sjw) address{font-style:normal}
.sjw :focus-visible{outline:2px solid var(--mint);outline-offset:3px;border-radius:6px}
.sjw-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@keyframes sjwSpin{to{--sjwa:360deg}}
@property --sjwa{syntax:"<angle>";inherits:false;initial-value:0deg}

/* ================================================================ header */
.sjw-hdr{position:fixed;top:14px;left:0;right:0;z-index:1001;display:flex;justify-content:center;padding:0 16px;pointer-events:none;transition:transform .7s cubic-bezier(.2,.7,.1,1);margin:0}
.sjw-hdr.hide{transform:translateY(-150%)}
html.sjw-menu-open .sjw-hdr{transform:none}
.sjw-pill{pointer-events:auto;position:relative;display:flex;align-items:center;gap:14px;width:min(1280px,100%);padding:8px;padding-inline-start:22px;border-radius:999px;color:var(--ink);
  background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);
  border:1px solid rgba(255,255,255,.8);box-shadow:0 12px 34px -16px rgba(8,44,43,.35),inset 0 1px 0 rgba(255,255,255,.7);
  transition:width .7s cubic-bezier(.2,.7,.1,1),background .5s}
.sjw-hdr.scrolled .sjw-pill{width:min(1120px,100%);background:rgba(255,255,255,.9)}
.sjw-pill::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:conic-gradient(from var(--sjwa),transparent 0 78%,rgba(0,239,210,.9) 86%,transparent 94%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:sjwSpin 7s linear infinite;pointer-events:none;opacity:.8}
.sjw-logo{display:flex;align-items:center;flex:none}
.sjw-logo img{height:30px;width:auto;transition:transform .5s cubic-bezier(.2,1.5,.4,1)}
.sjw-logo:hover img{transform:scale(1.07) rotate(-2deg)}
.sjw-nav{position:relative;display:flex!important;align-items:center;gap:2px;margin-inline:auto;padding:4px;border-radius:999px;background:rgba(8,44,43,.05)}
.sjw-nav a{position:relative;z-index:1;padding:8px 13px;border-radius:999px;font-size:14px;font-weight:500;white-space:nowrap;opacity:.75;transition:opacity .3s}
.sjw-nav a:hover,.sjw-nav a.cur{opacity:1}
.sjw-ind{position:absolute;top:4px;bottom:4px;left:0;width:0;border-radius:999px;background:var(--mint);box-shadow:0 6px 18px -6px rgba(0,239,210,.9);transition:left .5s cubic-bezier(.2,.7,.1,1),width .5s cubic-bezier(.2,.7,.1,1),opacity .3s;opacity:0}
.sjw-ind.on{opacity:1}
.sjw-end{display:flex;align-items:center;gap:8px;flex:none}
.sjw-lang{height:40px;min-width:46px;padding:0 12px;border-radius:999px;border:1px solid rgba(8,44,43,.16);font-size:12.5px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;transition:border-color .3s,background .3s;font-family:var(--f-ui)}
.sjw-lang:hover{background:rgba(0,239,210,.18);border-color:var(--mint)}
.sjw-acc{display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 14px;border-radius:999px;border:1px solid rgba(8,44,43,.16);font-size:13.5px;font-weight:600;white-space:nowrap;transition:border-color .3s,background .3s}
.sjw-acc svg{width:18px;height:18px}
.sjw-acc:hover{background:rgba(0,239,210,.18);border-color:var(--mint)}
.sjw-cta{display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 6px;padding-inline-start:18px;border-radius:999px;background:var(--ink);color:#fff!important;font-size:14px;font-weight:600;white-space:nowrap;transition:box-shadow .35s}
.sjw-cta i{width:32px;height:32px;border-radius:50%;background:var(--mint);color:var(--ink);display:grid;place-items:center;transition:transform .5s cubic-bezier(.2,1.4,.4,1)}
.sjw-cta i svg{width:15px;height:15px}
.sjw[dir="rtl"] .sjw-cta i svg{transform:scaleX(-1)}
.sjw-cta:hover{box-shadow:0 10px 24px -10px rgba(8,44,43,.7)}
.sjw-cta:hover i{transform:rotate(-45deg)}
.sjw[dir="rtl"] .sjw-cta:hover i{transform:rotate(45deg)}
.sjw-menu-btn{width:44px;height:44px;border-radius:50%!important;display:grid!important;place-items:center;border:1px solid rgba(8,44,43,.16)!important;transition:background .3s,border-color .3s}
.sjw-menu-btn:hover{background:rgba(0,239,210,.18);border-color:var(--mint)!important}
.sjw-burger{width:18px;height:10px;position:relative;display:inline-block}
.sjw-burger::before,.sjw-burger::after,.sjw-burger i{content:"";position:absolute;inset-inline:0;height:1.6px;border-radius:2px;background:currentColor;transition:transform .4s,opacity .3s,width .3s}
.sjw-burger::before{top:0}.sjw-burger i{top:4.2px;width:70%}.sjw-burger::after{bottom:0}
.sjw-menu-btn:hover .sjw-burger i{width:100%}
html.sjw-menu-open .sjw-burger::before{transform:translateY(4.2px) rotate(45deg)}
html.sjw-menu-open .sjw-burger::after{transform:translateY(-4.2px) rotate(-45deg)}
html.sjw-menu-open .sjw-burger i{opacity:0}
.sjw-prog{position:absolute;inset-inline:30px;bottom:-1px;height:2px;border-radius:2px;overflow:hidden;pointer-events:none}
.sjw-prog b{display:block;height:100%;width:0;border-radius:2px;background:linear-gradient(90deg,var(--mint),var(--teal))}
@media (max-width:1280px){.sjw-nav a{padding:8px 9px;font-size:13.5px}}
@media (max-width:1180px){.sjw-nav{display:none!important}.sjw-pill{justify-content:space-between}}
@media (max-width:640px){
  .sjw-hdr{top:10px;padding:0 10px}
  .sjw-pill{padding:6px;padding-inline-start:16px;gap:8px}
  .sjw-logo img{height:26px}
  .sjw-cta{padding:0 5px;height:40px}.sjw-cta span{display:none}
  .sjw-cta i{width:30px;height:30px}
  .sjw-lang,.sjw-menu-btn{height:40px}.sjw-menu-btn{width:40px}
  .sjw-lang{min-width:40px;padding:0 9px}
  .sjw-acc span{display:none}.sjw-acc{width:40px;padding:0;justify-content:center}
}
@media (max-width:380px){.sjw-cta{display:none}}

/* ================================================================ full screen menu */
.sjw-menu{position:fixed;inset:0;z-index:1000;margin:0;background:radial-gradient(90% 90% at 50% 40%,#fff 0%,var(--wash) 65%,#d3f5ee 100%);display:flex;flex-direction:column;align-items:center;justify-content:center;clip-path:inset(0 0 100% 0);transition:clip-path .8s cubic-bezier(.76,0,.24,1);visibility:hidden;color:var(--ink)}
html.sjw-menu-open .sjw-menu{clip-path:inset(0 0 0 0);visibility:visible}
html.sjw-menu-open,html.sjw-menu-open body{overflow:hidden}
.sjw-menu-mark{position:absolute;width:min(120vw,1400px);opacity:.06;pointer-events:none}
.sjw-menu nav{display:flex!important;flex-direction:column;align-items:center;gap:clamp(2px,1vh,10px);position:relative}
.sjw-menu nav a{font-weight:300;font-size:clamp(28px,5.4vw,60px);line-height:1.45;transform:translateY(60px);opacity:0;filter:blur(10px);transition:transform .9s cubic-bezier(.2,.7,.1,1),opacity .9s,filter .9s;background:linear-gradient(var(--mint),var(--mint)) 0 86%/0 .14em no-repeat}
.sjw-menu nav a:hover{background-size:100% .14em}
html.sjw-menu-open .sjw-menu nav a{transform:none;opacity:1;filter:none}
.sjw-menu-foot{position:absolute;inset:auto clamp(16px,6vw,96px) 30px;display:flex;justify-content:space-between;align-items:center;font-size:14px;color:var(--muted)}

/* ================================================================ footer */
.sjw-ft{position:relative;overflow:hidden;color:#CFEFE9;background:radial-gradient(70% 60% at 85% 0%,rgba(0,239,210,.10),transparent 60%),linear-gradient(180deg,#0A3533 0%,#062423 55%,#041A19 100%);padding:0 0 22px;margin:0;z-index:1;clear:both}
.sjw-shell{width:min(1240px,92vw);margin:0 auto;position:relative}
.sjw-ft-road{position:relative;height:46px;border-bottom:1px solid rgba(255,255,255,.08);overflow:hidden}
.sjw-ft-road::before{content:"";position:absolute;left:0;right:0;top:50%;height:2px;background:repeating-linear-gradient(90deg,rgba(0,239,210,.55) 0 28px,transparent 28px 56px)}
.sjw-ft-car{position:absolute;top:2px;width:110px;left:-140px;animation:sjwDrive 14s linear infinite;filter:drop-shadow(0 8px 6px rgba(0,0,0,.4))}
@keyframes sjwDrive{to{left:110%}}

/* contact cards */
.sjw-ft-contact{display:grid;grid-template-columns:repeat(3,1fr) 1.25fr;gap:14px;padding:34px 0 30px;border-bottom:1px solid rgba(255,255,255,.08)}
.sjw-cc{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:22px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);transition:background .3s,border-color .3s,transform .3s}
.sjw-cc:hover{background:rgba(0,239,210,.08);border-color:rgba(0,239,210,.4);transform:translateY(-3px)}
.sjw-cc i{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:rgba(0,239,210,.12);color:var(--mint);flex:none}
.sjw-cc i svg{width:21px;height:21px}
.sjw-cc span{display:flex;flex-direction:column;min-width:0}
.sjw-cc small{font-size:12px;color:#8FB9B4;line-height:1.4}
.sjw-cc b{font-size:15px;font-weight:600;color:#fff;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sjw-cc-go{background:var(--mint);border-color:var(--mint);justify-content:space-between;color:var(--ink)}
.sjw-cc-go:hover{background:var(--mint-2);border-color:var(--mint-2)}
.sjw-cc-go small{color:rgba(8,44,43,.7)}
.sjw-cc-go b{color:var(--ink);font-size:16px;font-weight:700}
.sjw-cc-go i.go{background:var(--ink);color:var(--mint);border-radius:50%}
.sjw[dir="rtl"] .sjw-cc-go i.go svg{transform:scaleX(-1)}

/* columns */
.sjw-ft-grid{display:grid;grid-template-columns:1.45fr .9fr 1fr 1.5fr 1.2fr;gap:34px;padding:38px 0 30px}
.sjw-ft-logo img{height:36px;width:auto;margin-bottom:16px}
.sjw-ft-brand p{font-size:14px;line-height:1.85;max-width:32ch;color:#9CC6C1;margin-bottom:20px}
.sjw-soc{display:flex;gap:8px;flex-wrap:wrap}
.sjw-soc a{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(255,255,255,.18);color:#fff;transition:background .3s,color .3s,border-color .3s,transform .3s}
.sjw-soc a:hover{background:var(--mint);color:var(--ink);border-color:var(--mint);transform:translateY(-4px) rotate(-8deg)}
.sjw-soc svg{width:18px;height:18px}
.sjw-ft h4{color:#fff;font-size:15px;font-weight:700;margin-bottom:16px;line-height:1.4}
.sjw-ft-col ul{display:grid;gap:9px}
.sjw-ft-col a{font-size:14px;color:#9CC6C1;position:relative;display:inline-block;transition:color .3s,padding .3s}
.sjw-ft-col a::before{content:"";position:absolute;inset-inline-start:0;top:50%;width:0;height:1.5px;background:var(--mint);transition:width .3s}
.sjw-ft-col a:hover{color:#fff;padding-inline-start:16px}
.sjw-ft-col a:hover::before{width:10px}

/* cities: chips instead of a long scrolling list */
.sjw-chips{display:flex;flex-wrap:wrap;gap:8px}
.sjw-chip{display:inline-flex;align-items:center;gap:8px;padding:7px 8px;padding-inline-start:14px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);font-size:13.5px;color:#DDF5F1;transition:background .3s,border-color .3s,color .3s}
.sjw-chip:hover{background:var(--mint);border-color:var(--mint);color:var(--ink)}
.sjw-chip em{font-style:normal;min-width:22px;height:22px;padding:0 6px;border-radius:999px;display:grid;place-items:center;background:rgba(0,239,210,.16);color:var(--mint);font-size:11.5px;font-weight:700;font-family:var(--f-lat)}
.sjw-chip:hover em{background:var(--ink);color:var(--mint)}
.sjw-chip:not(:has(em)){padding-inline-end:14px}
.sjw-more{display:inline-flex;align-items:center;gap:8px;margin-top:16px;font-size:13.5px;font-weight:600;color:var(--mint)}
.sjw-more svg{width:16px;height:16px;transition:transform .3s}
.sjw[dir="rtl"] .sjw-more svg{transform:scaleX(-1)}
.sjw-more:hover{color:#fff}
.sjw-more:hover svg{transform:translateX(4px)}
.sjw[dir="rtl"] .sjw-more:hover svg{transform:scaleX(-1) translateX(4px)}

/* app */
.sjw-ft-app p{font-size:13.5px;line-height:1.8;color:#9CC6C1;margin-bottom:14px}
.sjw-store{display:flex;align-items:center;gap:12px;padding:10px 16px;border-radius:16px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.04);margin-bottom:10px;color:#fff;transition:background .3s,border-color .3s,transform .3s}
.sjw-store:hover{background:rgba(0,239,210,.1);border-color:var(--mint);transform:translateY(-2px)}
.sjw-store svg{width:24px;height:24px}
.sjw-store span{display:flex;flex-direction:column;text-align:left;font-family:var(--f-lat)}
.sjw-store small{font-size:10.5px;color:#9CC6C1;line-height:1.2}
.sjw-store b{font-size:15px;font-weight:700;line-height:1.25}

/* big logo: glass letters, a mint glow follows the pointer, a light sweep */
.sjw-ft-mark{position:relative;height:clamp(110px,17vh,180px);aspect-ratio:732/265;max-width:94%;margin:6px auto 26px;clip-path:inset(0 100% 0 0);transition:clip-path 1.8s cubic-bezier(.7,0,.2,1)}
.sjw-ft-mark.in{clip-path:inset(0 0 0 0)}
.sjw-ft-mark i{position:absolute;inset:0;-webkit-mask:url(/web/home2/img/logo-big.png) center/contain no-repeat;mask:url(/web/home2/img/logo-big.png) center/contain no-repeat}
.sjw-ft-mark .m-fill{background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,.06) 70%,rgba(255,255,255,.03))}
.sjw-ft-mark .m-glow{background:radial-gradient(230px circle at var(--mx,50%) var(--my,50%),rgba(0,239,210,1),rgba(0,239,210,.35) 42%,transparent 70%)}
.sjw-ft-mark .m-shine{background:linear-gradient(110deg,transparent 40%,rgba(255,255,255,.55) 50%,transparent 60%) -150% 0/60% 100% no-repeat;animation:sjwShine 6s 2s ease-in-out infinite}
@keyframes sjwShine{0%{background-position:-150% 0}60%,100%{background-position:250% 0}}
.sjw-ft-mark::after{content:"";position:absolute;left:12%;right:12%;bottom:-16px;height:1px;background:linear-gradient(90deg,transparent,rgba(0,239,210,.6),transparent)}

/* bottom bar */
.sjw-ft-bot{display:flex;align-items:center;justify-content:space-between;gap:16px 28px;flex-wrap:wrap;padding-top:20px;border-top:1px solid rgba(255,255,255,.08);font-size:13px;color:#8FB9B4}
.sjw-ft-bot nav{display:flex;gap:18px;flex-wrap:wrap}
.sjw-ft-col{display:block}
.sjw-ft-bot nav a:hover{color:#fff}
.sjw-pay{display:flex;gap:6px;flex-wrap:wrap}
.sjw-pay span{padding:4px 10px;border-radius:8px;border:1px solid rgba(255,255,255,.16);font-family:var(--f-lat);font-size:11.5px;font-weight:700;color:#DDF5F1}
.sjw-top{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--mint);color:var(--ink)!important;transition:transform .3s,box-shadow .3s}
.sjw-top svg{width:20px;height:20px}
.sjw-top:hover{transform:translateY(-4px);box-shadow:0 12px 24px -10px rgba(0,239,210,.8)}

@media (max-width:1100px){
  .sjw-ft-contact{grid-template-columns:1fr 1fr}
  .sjw-ft-grid{grid-template-columns:1fr 1fr 1fr}
  .sjw-ft-brand{grid-column:1/-1}
  .sjw-ft-cities{grid-column:span 2}
}
@media (max-width:640px){
  .sjw-ft-contact{grid-template-columns:1fr;padding:24px 0}
  .sjw-ft-grid{grid-template-columns:1fr 1fr;gap:28px 18px}
  .sjw-ft-cities,.sjw-ft-app{grid-column:1/-1}
  .sjw-ft-bot{justify-content:center;text-align:center}
}
@media (prefers-reduced-motion:reduce){
  .sjw-pill::before,.sjw-ft-car,.sjw-ft-mark .m-shine{animation:none}.sjw-ft-mark{clip-path:none;transition:none}
}