/* ALWASEED brand layer on top of Bootstrap 5 RTL (kept intentionally small) */
@font-face{font-family:"Montserrat";src:url("../fonts/montserrat-var.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Tajawal";src:url("../fonts/tajawal-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Tajawal";src:url("../fonts/tajawal-500.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Tajawal";src:url("../fonts/tajawal-700.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Tajawal";src:url("../fonts/tajawal-800.woff2") format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"Tajawal";src:url("../fonts/tajawal-900.woff2") format("woff2");font-weight:900;font-display:swap}
:root{--ink:#0a0a0a;--gold:#bfae5f;--gold-deep:#8f8142;--gold-light:#d9cc8e;
 --bs-body-font-family:"Montserrat","Tajawal",system-ui,sans-serif;--bs-body-color:#0a0a0a;--bs-body-line-height:1.8;--head-font:"Montserrat","Tajawal",sans-serif;
 --bs-border-color:rgba(10,10,10,.12);--bs-secondary-color:rgba(10,10,10,.7);--bs-link-color-rgb:10,10,10;--bs-link-hover-color-rgb:143,129,66;
 --bs-border-radius:4px;--bs-border-radius-sm:4px;--bs-border-radius-lg:4px;--bs-border-radius-xl:4px}
html{scroll-behavior:smooth;scroll-padding-top:5rem}
h1,h2,h3,h4,h5,.h1,.h2,.h3,.h4,.h5,.h6,.display-4,.display-6,.btn,.nav-link,.navbar-brand{font-family:var(--head-font)}
h1,h2,h3,h4,h5{font-weight:800;text-wrap:balance;line-height:1.35}h1,h2{font-weight:900}
a{text-decoration:none}:focus-visible{outline:2px solid var(--gold-deep)!important;outline-offset:3px}
.num{direction:ltr;unicode-bidi:isolate;display:inline-block;font-family:"Montserrat",sans-serif}
.bg-ink{background:var(--ink)}.text-gold{color:var(--gold)!important}.text-gold-deep{color:var(--gold-deep)!important}
.rule{display:block;height:3px;width:56px;background:var(--gold);margin-top:16px}.rule.lg{height:4px;width:64px;margin-top:24px}
.btn{font-weight:700}
.btn-gold{--bs-btn-bg:#bfae5f;--bs-btn-border-color:#bfae5f;--bs-btn-color:#0a0a0a;--bs-btn-hover-bg:#d9cc8e;--bs-btn-hover-border-color:#d9cc8e;--bs-btn-hover-color:#0a0a0a;--bs-btn-active-bg:#d9cc8e;--bs-btn-active-border-color:#d9cc8e;--bs-btn-active-color:#0a0a0a}
.btn-ink{--bs-btn-bg:#0a0a0a;--bs-btn-border-color:#0a0a0a;--bs-btn-color:#fff;--bs-btn-hover-bg:#1c1c1c;--bs-btn-hover-border-color:#1c1c1c;--bs-btn-hover-color:#d9cc8e;--bs-btn-active-bg:#1c1c1c;--bs-btn-active-color:#fff}
.btn-outline-dark{--bs-btn-color:#0a0a0a;--bs-btn-border-color:#0a0a0a;--bs-btn-hover-bg:#0a0a0a;--bs-btn-hover-border-color:#0a0a0a;--bs-btn-active-bg:#0a0a0a}
.link-gold{border-bottom:2px solid var(--gold);padding-bottom:2px;font-weight:700}.link-gold:hover{border-color:var(--ink);color:var(--ink)}
.form-control:focus,.form-select:focus{border-color:var(--ink);box-shadow:none}
.form-check-input:checked{background-color:var(--ink);border-color:var(--ink)}
.logo{direction:ltr;display:inline-flex;align-items:center;gap:10px;font:800 17px/1 "Montserrat",sans-serif;letter-spacing:.02em}.logo svg{height:24px;width:auto}
.navbar .nav-link{font-weight:600;border-bottom:2px solid transparent;padding-inline:0!important;margin-inline:.9rem}.navbar .nav-link.active{border-color:var(--gold);color:var(--ink)}
/* pattern + hero */
.stripes{position:absolute;inset:0;overflow:hidden;pointer-events:none;--s:rgba(10,10,10,.04)}.stripes.dark{--s:rgba(255,255,255,.05)}
.stripes i{position:absolute;top:0;bottom:0;display:flex;gap:14px}.stripes b{width:84px;background:var(--s)}.stripes b+b{width:35px}
.stripes .l{left:-40px;transform:skewX(25deg)}.stripes .r{right:-40px;transform:skewX(-25deg)}
/* cards */
.svc{transition:all .2s}.svc .ico{width:48px;height:48px;background:var(--ink);color:var(--gold);transition:all .2s}
.svc:hover{background:var(--ink);color:#fff}.svc:hover .text-secondary{color:rgba(255,255,255,.75)!important}.svc:hover .ico{background:var(--gold);color:var(--ink)}
.pcard img{transition:border-color .2s}.pcard:hover img{border-color:rgba(10,10,10,.45)!important}
.client-logo{filter:grayscale(1);opacity:.65;transition:filter .25s,opacity .25s}.client-logo:hover{filter:none;opacity:1}
.footer a{color:rgba(255,255,255,.75)}.footer a:hover{color:#fff}.footer h3{color:var(--gold);font-size:.9rem}.footer i.fa-fw{color:var(--gold)}
.social a{display:grid;place-items:center;width:40px;height:40px;border:1px solid rgba(255,255,255,.2);border-radius:4px;transition:all .15s}.social a:hover{border-color:var(--gold);color:var(--gold)}
.social.dark a{border-color:rgba(10,10,10,.2);color:var(--ink)}.social.dark a:hover{background:var(--ink);color:#fff}
.block{border-top:3px solid var(--ink);padding-top:1.5rem}
.container{--bs-gutter-x:2.5rem}
@media(max-width:991.98px){.g-5,.gx-5{--bs-gutter-x:2.5rem}}

/* Centered layout: every public heading block sits on the true centre axis */
.hero{min-height:min(88vh,860px);display:flex;flex-direction:column;justify-content:center}
.hero-mark{width:clamp(150px,20vw,230px);margin-inline:auto}
.hero h1{font-size:clamp(3rem,8.5vw,5.75rem);line-height:1.2}
.hero .lead{font-size:clamp(1.1rem,2vw,1.4rem);max-width:36rem;margin-inline:auto}
.rule{margin-inline:auto}
.pillar{padding:1.5rem 1rem}
@media(min-width:768px){.pillar+.pillar{border-inline-start:1px solid var(--bs-border-color)}}
@media(prefers-reduced-motion:no-preference){.hero-in>*{animation:hin .8s cubic-bezier(.2,.7,.2,1) both}.hero-in>*:nth-child(2){animation-delay:.08s}.hero-in>*:nth-child(3){animation-delay:.16s}.hero-in>*:nth-child(n+4){animation-delay:.24s}@keyframes hin{from{opacity:0;transform:translateY(14px)}}}
/* navbar: links centred on the page axis regardless of logo / button widths */
@media(min-width:992px){.navbar .container{position:relative}.navbar-collapse .navbar-nav{position:absolute;inset-inline-start:50%;transform:translateX(50%);flex-direction:row}[dir=rtl] .navbar-collapse .navbar-nav{transform:translateX(50%)}.navbar-collapse{justify-content:flex-end}}
.footer .col-text{text-align:center}.footer .social{justify-content:center}
.display-4,.display-5,.display-6{font-weight:900;line-height:1.3}
.text-secondary{color:rgba(10,10,10,.7)!important}
/* English (LTR): mirror the centred desktop nav so it sits on the page axis */
@media(min-width:992px){[dir=ltr] .navbar-collapse .navbar-nav{transform:translateX(-50%)}}
/* Content pages (privacy / terms): comfortable reading rhythm */
.content-page li::marker{color:var(--gold-deep)}

/* Clients marquee: infinite logo strip (two identical groups, track slides by -50%) */
.clients-marquee{--gap:1.25rem;--fade:8%;position:relative;overflow:hidden;direction:ltr;padding-block:.5rem;-webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--fade),#000 calc(100% - var(--fade)),transparent);mask-image:linear-gradient(90deg,transparent,#000 var(--fade),#000 calc(100% - var(--fade)),transparent)}
.clients-marquee__track{display:flex;width:max-content;will-change:transform;animation:clients-scroll var(--marquee-duration,30s) linear infinite}
[dir=rtl] .clients-marquee__track{animation-direction:reverse}
.clients-marquee:hover .clients-marquee__track,.clients-marquee:focus-within .clients-marquee__track{animation-play-state:paused}
.clients-marquee__group{display:flex;flex-shrink:0}
.clients-marquee__item{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:170px;height:96px;margin-inline-end:var(--gap);padding:1rem;background:#fff;border:1px solid var(--bs-border-color);border-radius:var(--bs-border-radius);transition:transform .25s,box-shadow .25s,border-color .25s}
.clients-marquee__item:hover,.clients-marquee__item:focus-visible{transform:translateY(-3px);border-color:var(--gold);box-shadow:0 .5rem 1.25rem rgba(10,10,10,.08)}
.clients-marquee__item .client-logo{max-width:100%;max-height:100%;object-fit:contain}
.clients-marquee__item:hover .client-logo,.clients-marquee__item:focus-visible .client-logo{filter:none;opacity:1}
@keyframes clients-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(max-width:575.98px){.clients-marquee{--gap:.75rem;--fade:12%}.clients-marquee__item{width:130px;height:80px;padding:.75rem}}
@media(prefers-reduced-motion:reduce){.clients-marquee{overflow-x:auto;-webkit-mask-image:none;mask-image:none}.clients-marquee__track{animation:none}.clients-marquee__group[aria-hidden=true]{display:none}}
