:root{--navy:#0b1720;--navy2:#101f29;--ink:#121b22;--orange:#f36f21;--orange2:#ff812f;--muted:#66717a;--line:#d9dee2;--white:#fff;--shadow:0 12px 35px rgba(4,17,26,.12)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:'Cairo',sans-serif;color:var(--ink);background:#fff;line-height:1.8;overflow-x:hidden}img{display:block;max-width:100%}a{color:inherit;text-decoration:none}.container{width:min(1200px,calc(100% - 56px));margin-inline:auto}.site-header{position:absolute;inset:0 0 auto;z-index:50;height:86px;color:#fff}.nav-wrap{height:86px;display:flex;align-items:center;gap:28px}.brand{width:195px;flex:0 0 auto}.brand img{width:100%;height:58px;object-fit:contain}.main-nav{display:flex;align-items:center;gap:28px;font-size:14px;font-weight:700;flex:1;justify-content:center}.main-nav a{position:relative;padding:30px 0 25px;white-space:nowrap}.main-nav a:after{content:"";position:absolute;right:0;left:0;bottom:14px;height:2px;background:var(--orange);transform:scaleX(0);transition:.25s}.main-nav a:hover:after,.main-nav a.active:after{transform:scaleX(1)}.nav-actions{display:flex;align-items:center;gap:22px;direction:ltr}.lang{font-size:13px;font-weight:700}.lang i{font-size:9px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:50px;padding:0 25px;border:1px solid transparent;font-weight:800;font-size:14px;border-radius:2px;transition:.25s;cursor:pointer}.btn:hover{transform:translateY(-2px)}.btn-orange{color:#fff;background:linear-gradient(135deg,var(--orange2),var(--orange));box-shadow:0 8px 22px rgba(243,111,33,.22)}.btn-small{min-height:42px;padding:0 20px}.btn-outline{border-color:#fff;color:#fff;background:rgba(7,20,29,.2)}.btn-line{border-color:#6b747b;background:#fff;color:#1a252d}.orange-border{border-color:var(--orange);color:var(--orange)}.menu-toggle{display:none;background:none;border:0;padding:8px}.menu-toggle span{display:block;width:26px;height:2px;background:#fff;margin:5px}
.hero{position:relative;min-height:720px;padding-top:112px;color:#fff;background:#0a151e;overflow:hidden}.hero-bg{position:absolute;inset:0;background-image:linear-gradient(90deg,rgba(8,20,28,.02) 0%,rgba(8,20,28,.10) 38%,rgba(8,20,28,.64) 62%,rgba(8,20,28,.96) 100%),url('../assets/images/hero.jpg');background-repeat:no-repeat;background-size:cover;background-position:left center;transform:scale(1.01);transform-origin:center;will-change:transform}.hero:after{content:"";position:absolute;inset:auto 0 0;height:150px;background:linear-gradient(180deg,transparent,rgba(5,14,20,.5));pointer-events:none}.hero-content{position:relative;z-index:2;display:flex;justify-content:flex-start;direction:rtl}.hero-copy{width:48%;max-width:590px;margin-right:0;margin-left:auto;padding-top:58px;text-align:right}.eyebrow{font-size:13px;letter-spacing:4px;font-weight:600;margin:0 0 15px}.hero h1{font-size:56px;line-height:1.24;margin:0 0 18px;font-weight:800;letter-spacing:-1.6px}.hero h1 span{color:var(--orange)}.hero-text{font-size:15px;line-height:2.15;color:#e4e8eb;max-width:560px;margin:0 0 27px}.hero-actions{display:flex;gap:16px;justify-content:flex-start}.stats-wrap{position:absolute;z-index:5;left:50%;bottom:0;transform:translateX(-50%);height:112px;background:rgba(12,27,36,.9);border:1px solid rgba(255,255,255,.18);display:grid;grid-template-columns:repeat(4,1fr);backdrop-filter:blur(12px);box-shadow:0 12px 30px rgba(0,0,0,.18)}.stat{position:relative;display:flex;align-items:center;justify-content:center;gap:17px}.stat:not(:last-child):after{content:"";position:absolute;left:0;width:1px;height:46px;background:rgba(255,255,255,.24)}.stat i{font-size:34px;color:var(--orange)}.stat strong{display:block;font-size:30px;line-height:1.1}.stat span{display:block;font-size:11px;color:#eef2f4;font-weight:600;margin-top:8px}
.section{padding:58px 0}.services{background:#f7f7f6}.services-layout{display:grid;grid-template-columns:250px 1fr;gap:42px;align-items:center}.section-kicker{display:block;color:var(--orange);font-size:13px;font-weight:800;margin-bottom:8px}.section-intro h2,.project-side h2,.quality-copy h2,.global-panel h2,.why-panel h2{font-size:31px;line-height:1.45;margin:0 0 13px}.section-intro p,.project-side p,.quality-copy p{font-size:13px;color:#58636a;margin:0 0 23px}.service-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}.service-card{background:#fff;border-radius:3px;box-shadow:0 5px 16px rgba(0,0,0,.08);overflow:hidden;text-align:center;padding-bottom:20px;transition:.25s}.service-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}.service-card>img{width:100%;height:150px;object-fit:cover}.service-icon{width:46px;height:46px;background:#fff;border-radius:4px;display:grid;place-items:center;margin:-22px auto 8px;position:relative;z-index:2;box-shadow:0 4px 10px rgba(0,0,0,.12);color:var(--orange);font-size:21px}.service-card h3{font-size:14px;margin:0 8px 8px}.service-card p{font-size:10px;color:#626b72;line-height:1.8;margin:0 12px}
.section-dark{background:radial-gradient(circle at 20% 30%,#152a36 0,#0d1b24 42%,#08141c 100%);color:#fff;padding:48px 0}.projects-layout{display:grid;grid-template-columns:220px 1fr;gap:35px;align-items:center}.project-side p{color:#cbd3d7}.project-slider{position:relative;min-width:0}.project-track{display:flex;gap:12px;overflow:hidden;scroll-behavior:smooth}.project-card{min-width:calc((100% - 48px)/5);background:#15232d;padding-bottom:15px}.project-card img{width:100%;height:190px;object-fit:cover}.project-card h3{font-size:12px;margin:12px 12px 2px}.project-card span{font-size:10px;color:#cbd2d5;margin:0 12px}.slider-btn{position:absolute;top:42%;width:30px;height:30px;border-radius:50%;border:1px solid rgba(255,255,255,.28);background:#1a2831;color:#fff;z-index:4}.slider-btn.next{right:-16px}.slider-btn.prev{left:-16px}.slider-dots{display:flex;justify-content:center;gap:9px;margin-top:15px}.slider-dots button{width:26px;height:5px;border:0;background:#7f898f}.slider-dots button.active{background:var(--orange)}
.why{display:grid;grid-template-columns:40% 60%;min-height:390px}.global-panel{background:linear-gradient(135deg,#0e202b,#0a161f);color:#fff;padding:35px 70px}.flags{width:125px;margin-bottom:10px}.global-panel p{font-size:12px;color:#d5dadd}.mini-features{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-top:28px}.mini-features div{text-align:center}.mini-features i{font-size:35px;color:var(--orange);display:block;margin-bottom:9px}.mini-features b{display:block;font-size:12px}.mini-features span{font-size:10px;color:#c9d0d4}.why-panel{padding:32px 70px;background:#fff}.why-panel>h2{text-align:right}.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px 54px}.why-item{display:flex;gap:15px;align-items:flex-start}.why-item i{font-size:29px;color:var(--orange);width:38px;text-align:center}.why-item h3{font-size:13px;margin:0 0 3px}.why-item p{font-size:12px;color:#66717a;margin:0;line-height:1.7}
.quality{padding:40px 0;background:linear-gradient(90deg,#f0f1f1,#fff)}.quality-layout{display:grid;grid-template-columns:300px 1fr;gap:60px;align-items:center}.quality-copy p{margin:0}.certs{display:grid;grid-template-columns:repeat(4,1fr);align-items:center;gap:34px}.certs div{height:100px;display:grid;place-items:center}.certs img{max-height:90px;max-width:150px;object-fit:contain}
.ceo-contact{display:grid;grid-template-columns:1.35fr .7fr 1fr;background:#0c1a23;color:#fff}.ceo-message{position:relative;padding:46px 70px 38px}.quote-mark{position:absolute;right:28px;top:18px;color:var(--orange);font-size:70px;line-height:1}.ceo-message h3{color:var(--orange);font-size:19px;margin:0 0 15px}.ceo-message p{font-size:12px;color:#dde2e5;line-height:2.1;margin:0 0 22px}.ceo-message strong{display:block;color:var(--orange);font-size:13px}.ceo-message span{font-size:11px;color:#d0d7da}.ceo-photo img{width:100%;height:100%;min-height:320px;object-fit:cover}.contact-card{margin:28px 36px;border:1px solid rgba(255,255,255,.14);padding:30px;text-align:center}.contact-card h2{font-size:21px;margin:0 0 8px}.contact-card p{font-size:11px;color:#d8dde0}.contact-card .btn{width:100%;margin:10px 0 14px}.contact-card ul{list-style:none;padding:0;margin:0;text-align:right;font-size:11px;line-height:2.2}.contact-card li i{color:#fff;width:20px}
.footer{background:linear-gradient(180deg,#132630,#0b1821);color:#d7dde0;padding-top:35px}.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.1fr;gap:60px;padding-bottom:30px}.footer h4{color:#fff;font-size:14px;margin:0 0 12px}.footer a,.footer p{display:block;font-size:10.5px;color:#bec7cb;margin:4px 0}.footer-brand img{width:190px;margin-bottom:12px}.socials{display:flex;gap:13px;margin-top:12px}.socials a{font-size:16px;color:#fff}.footer-bottom{border-top:1px solid rgba(255,255,255,.08);padding:11px 0;display:flex;justify-content:space-between;font-size:9.5px;color:#8f9ba2}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}.reveal.visible{opacity:1;transform:none}

/* Hero refinement — content locked to the right half */
@media(min-width:821px){
  .hero-content{min-height:500px;align-items:flex-start}
  .hero-copy{position:relative}
  .hero-copy:before{content:"";position:absolute;inset:-38px -58px -40px -70px;background:radial-gradient(circle at 78% 45%,rgba(8,20,28,.34),rgba(8,20,28,0) 70%);z-index:-1;pointer-events:none}
  .hero-actions .btn{min-width:188px}
}
@media(min-width:1280px){
  .container{width:min(1280px,calc(100% - 72px))}
  .hero-copy{width:46%;max-width:610px;padding-top:64px}
  .hero h1{font-size:60px}
  .hero-text{font-size:15.5px}
  .stats-wrap{width:min(1280px,calc(100% - 72px))}
}
@media(min-width:1600px){
  .container{width:min(1420px,calc(100% - 96px))}
  .hero{min-height:760px}
  .hero-copy{width:45%;max-width:640px;padding-top:78px}
  .hero h1{font-size:64px}
  .stats-wrap{width:min(1420px,calc(100% - 96px));height:118px}
}
@media(max-width:1050px){.main-nav{gap:15px;font-size:12px}.brand{width:160px}.nav-actions{gap:10px}.hero h1{font-size:48px}.service-grid{grid-template-columns:repeat(3,1fr)}.services-layout{grid-template-columns:220px 1fr}.project-card{min-width:calc((100% - 24px)/3)}.why{grid-template-columns:1fr}.global-panel,.why-panel{padding:40px 9vw}.ceo-contact{grid-template-columns:1fr 300px}.contact-card{grid-column:1/-1}}
@media(max-width:820px){.container{width:min(100% - 32px,1200px)}.site-header{position:fixed;background:rgba(6,17,24,.95);height:72px}.nav-wrap{height:72px}.brand{width:145px}.menu-toggle{display:block;margin-right:auto}.main-nav{position:fixed;top:72px;right:0;left:0;background:#0b1720;display:flex;flex-direction:column;gap:0;padding:14px 24px 24px;transform:translateY(-140%);opacity:0;transition:.3s}.main-nav.open{transform:none;opacity:1}.main-nav a{padding:12px 0;width:100%;text-align:right}.nav-actions{display:none}.hero{min-height:720px;padding-top:95px}.hero-bg{background-image:linear-gradient(180deg,rgba(7,18,25,.15),rgba(7,18,25,.92) 65%,#08141d 100%),url('../assets/images/hero.jpg');background-position:center top}.hero-copy{width:100%;max-width:none;margin:0;padding-top:180px;text-align:right}.hero h1{font-size:42px}.hero-text{font-size:14px}.stats-wrap{height:auto;grid-template-columns:1fr 1fr;padding:12px 0}.stat{padding:13px}.stat:after{display:none}.stat strong{font-size:23px}.services-layout,.projects-layout,.quality-layout{grid-template-columns:1fr}.section-intro{max-width:550px}.service-grid{grid-template-columns:repeat(2,1fr)}.project-side{max-width:550px}.project-card{min-width:calc((100% - 12px)/2)}.why-grid{gap:22px}.certs{grid-template-columns:repeat(2,1fr)}.ceo-contact{grid-template-columns:1fr}.ceo-photo{order:1}.ceo-message{order:2}.contact-card{order:3;grid-column:auto}.footer-grid{grid-template-columns:1fr 1fr}.footer-brand{grid-column:1/-1}}
@media(max-width:520px){.container{width:calc(100% - 24px)}.hero{min-height:760px}.hero-copy{padding-top:150px}.hero h1{font-size:35px}.eyebrow{letter-spacing:2px;font-size:11px}.hero-actions{flex-direction:column;align-items:stretch}.stats-wrap{width:calc(100% - 24px)!important}.stat{gap:10px}.stat i{font-size:27px}.stat span{font-size:9px}.services-layout{gap:25px}.service-grid{grid-template-columns:1fr}.service-card>img{height:190px}.project-card{min-width:82%}.why-grid{grid-template-columns:1fr}.global-panel,.why-panel{padding:32px 24px}.quality-layout{gap:25px}.certs{gap:12px}.ceo-message{padding:42px 24px}.contact-card{margin:22px 18px}.footer-grid{grid-template-columns:1fr;gap:25px}.footer-brand{grid-column:auto}.footer-bottom{flex-direction:column;gap:7px;text-align:center}.section-intro h2,.project-side h2,.quality-copy h2,.global-panel h2,.why-panel h2{font-size:27px}}
.site-header.scrolled{position:fixed;background:rgba(7,19,27,.94);backdrop-filter:blur(12px);box-shadow:0 6px 25px rgba(0,0,0,.18)}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* =========================================================
   V3 — Hero statistics bar pixel-alignment refinement
   Matches the approved reference: centered, full container,
   100% on the left and +15 on the right.
   ========================================================= */
.stats-wrap{
  width:min(1200px,calc(100% - 56px));
  max-width:1200px;
  right:auto;
  left:50%;
  margin:0;
  transform:translateX(-50%);
  direction:ltr;
  overflow:hidden;
}
.stats-wrap .stat{
  direction:rtl;
  min-width:0;
  padding-inline:22px;
}
.stats-wrap .stat:not(:last-child):after{
  left:auto;
  right:0;
}
.stats-wrap .stat i{
  flex:0 0 auto;
}
.stats-wrap .stat > div{
  min-width:0;
  text-align:right;
}
.stats-wrap .stat strong,
.stats-wrap .stat span{
  white-space:nowrap;
}

@media(min-width:1280px){
  .stats-wrap{
    width:min(1280px,calc(100% - 72px));
    max-width:1280px;
  }
}
@media(min-width:1600px){
  .stats-wrap{
    width:min(1420px,calc(100% - 96px));
    max-width:1420px;
  }
}
@media(max-width:1050px) and (min-width:821px){
  .stats-wrap{
    width:calc(100% - 40px);
    max-width:none;
  }
  .stats-wrap .stat{
    gap:11px;
    padding-inline:12px;
  }
  .stats-wrap .stat i{font-size:29px}
  .stats-wrap .stat strong{font-size:25px}
  .stats-wrap .stat span{font-size:9.5px}
}
@media(max-width:820px){
  .stats-wrap{
    width:calc(100% - 32px);
    max-width:none;
    direction:ltr;
  }
  .stats-wrap .stat{direction:rtl}
}
@media(max-width:520px){
  .stats-wrap{width:calc(100% - 24px)!important}
}


/* V4 — definitive centered statistics bar */
.hero .stats-wrap{
  position:absolute;
  left:0 !important;
  right:0 !important;
  bottom:0;
  margin-left:auto !important;
  margin-right:auto !important;
  transform:none !important;
  width:min(1420px,calc(100% - 96px));
  max-width:1420px;
  grid-template-columns:repeat(4,minmax(0,1fr));
}
.hero .stats-wrap.reveal,
.hero .stats-wrap.reveal.visible{transform:none !important}
.hero .stats-wrap .stat{
  width:100%;
  min-width:0;
  justify-content:center;
  padding-inline:24px;
}
@media(max-width:1599px){
  .hero .stats-wrap{width:min(1280px,calc(100% - 72px));max-width:1280px}
}
@media(max-width:1279px){
  .hero .stats-wrap{width:min(1200px,calc(100% - 56px));max-width:1200px}
}
@media(max-width:1050px) and (min-width:821px){
  .hero .stats-wrap{width:calc(100% - 40px);max-width:none}
}
@media(max-width:820px){
  .hero .stats-wrap{width:calc(100% - 32px);max-width:none}
}
@media(max-width:520px){
  .hero .stats-wrap{width:calc(100% - 24px) !important}
}

/* V5 — header logo: transparent, reversed, vertically aligned */
.site-header .brand{
  width:195px;height:86px;display:flex;align-items:center;justify-content:center;padding-top:7px;
}
.site-header .brand img{
  width:100%;height:auto;max-height:52px;object-fit:contain;object-position:center;background:transparent!important;
}
@media(max-width:1050px){.site-header .brand{width:170px;padding-top:6px}}
@media(max-width:820px){
  .site-header .brand{width:150px;height:72px;padding-top:5px}
  .site-header .brand img{max-height:45px}
}

/* V6 — high quality supplied header logo + lower navbar alignment */
.site-header .brand{
  width:229px !important;
  height:86px !important;
  padding-top:16px !important;
  display:flex;
  align-items:center;
  justify-content:center;
}
.site-header .brand img{
  width:229px !important;
  height:81px !important;
  max-width:229px !important;
  max-height:81px !important;
  object-fit:contain;
  background:transparent !important;
}
@media(max-width:1050px){
  .site-header .brand{width:190px!important;padding-top:13px!important}
  .site-header .brand img{width:190px!important;height:auto!important}
}
@media(max-width:820px){
  .site-header .brand{width:155px!important;height:72px!important;padding-top:9px!important}
  .site-header .brand img{width:155px!important;height:auto!important;max-height:58px!important}
}


/* V7 — clean transparent logo, corrected size and vertical alignment */
.site-header .brand{
  width:210px !important;
  height:86px !important;
  padding-top:24px !important;
  padding-bottom:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:visible !important;
}
.site-header .brand img{
  display:block !important;
  width:190px !important;
  height:auto !important;
  max-width:190px !important;
  max-height:none !important;
  object-fit:contain !important;
  background:transparent !important;
}
@media(max-width:1050px){
  .site-header .brand{
    width:185px !important;
    padding-top:21px !important;
  }
  .site-header .brand img{
    width:170px !important;
    max-width:170px !important;
  }
}
@media(max-width:820px){
  .site-header .brand{
    width:155px !important;
    height:72px !important;
    padding-top:15px !important;
  }
  .site-header .brand img{
    width:145px !important;
    max-width:145px !important;
  }
}


/* V8 — logo only, no white/black background */
.site-header .brand,
.site-header .brand a,
.site-header .brand img{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
}
.site-header .brand{
  padding-top: 22px !important;
}
.site-header .brand img{
  width: 190px !important;
  max-width: 190px !important;
  height: auto !important;
}
@media (max-width:1050px){
  .site-header .brand img{
    width: 170px !important;
    max-width: 170px !important;
  }
}
@media (max-width:820px){
  .site-header .brand img{
    width: 145px !important;
    max-width: 145px !important;
  }
}

/* V9 HQ logo supplied by user */
.site-header .brand,.site-header .brand a,.site-header .brand img{background:transparent!important;border:0!important;box-shadow:none!important;outline:0!important}
.site-header .brand{width:245px!important;height:92px!important;padding:25px 0 0!important;display:flex!important;align-items:center!important;justify-content:center!important;overflow:visible!important}
.site-header .brand img{display:block!important;width:225px!important;max-width:225px!important;height:auto!important;max-height:none!important;object-fit:contain!important}
@media(max-width:1050px){.site-header .brand{width:205px!important;padding-top:22px!important}.site-header .brand img{width:190px!important;max-width:190px!important}}
@media(max-width:820px){.site-header .brand{width:165px!important;height:72px!important;padding-top:15px!important}.site-header .brand img{width:150px!important;max-width:150px!important}}


/* =========================================================
   V12 — 3-slide animated HERO slider
   ========================================================= */
.hero{
  overflow:hidden;
}
.hero-slider,
.hero-overlay{
  position:absolute;
  inset:0;
}
.hero-slider{
  z-index:0;
  overflow:hidden;
  background:#07131b;
}
.hero-slide{
  position:absolute;
  inset:-2%;
  opacity:0;
  visibility:hidden;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  transform:scale(1.055);
  transition:
    opacity 1.05s cubic-bezier(.4,0,.2,1),
    visibility 1.05s cubic-bezier(.4,0,.2,1),
    transform 6.5s ease;
  will-change:opacity,transform;
}
.hero-slide.active{
  opacity:1;
  visibility:visible;
  transform:scale(1);
  z-index:1;
}
.hero-overlay{
  z-index:2;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(4,12,17,.18) 0%,rgba(5,14,20,.34) 42%,rgba(5,14,20,.76) 100%),
    linear-gradient(180deg,rgba(4,12,17,.12) 0%,rgba(5,14,20,.08) 48%,rgba(5,14,20,.78) 88%,#08141d 100%);
}
.hero-content{
  position:relative;
  z-index:4;
}
.hero .stats-wrap{
  z-index:6;
}
.hero-slider-arrow{
  position:absolute;
  top:50%;
  z-index:7;
  width:46px;
  height:46px;
  margin-top:-24px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.28);
  border-radius:50%;
  background:rgba(7,20,29,.45);
  color:#fff;
  cursor:pointer;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  transition:background .25s ease,border-color .25s ease,transform .25s ease;
}
.hero-slider-arrow:hover{
  background:var(--orange);
  border-color:var(--orange);
  transform:scale(1.06);
}
.hero-next{right:28px}
.hero-prev{left:28px}
.hero-slider-dots{
  position:absolute;
  z-index:7;
  left:50%;
  bottom:140px;
  transform:translateX(-50%);
  display:flex;
  direction:ltr;
  align-items:center;
  gap:9px;
}
.hero-slider-dots button{
  width:9px;
  height:9px;
  padding:0;
  border:0;
  border-radius:999px;
  background:rgba(255,255,255,.52);
  cursor:pointer;
  transition:width .3s ease,background .3s ease,transform .3s ease;
}
.hero-slider-dots button.active{
  width:31px;
  background:var(--orange);
}
.hero-slider-dots button:focus-visible,
.hero-slider-arrow:focus-visible{
  outline:2px solid #fff;
  outline-offset:3px;
}
@media(max-width:1050px){
  .hero-next{right:16px}
  .hero-prev{left:16px}
  .hero-slider-arrow{width:40px;height:40px}
}
@media(max-width:820px){
  .hero-slide{background-position:center top}
  .hero-slider-arrow{
    top:auto;
    bottom:185px;
    width:38px;
    height:38px;
  }
  .hero-next{right:22px}
  .hero-prev{left:22px}
  .hero-slider-dots{bottom:198px}
  .hero-overlay{
    background:
      linear-gradient(180deg,rgba(7,18,25,.14),rgba(7,18,25,.55) 45%,rgba(7,18,25,.92) 72%,#08141d 100%);
  }
}
@media(max-width:520px){
  .hero-slider-arrow{display:none}
  .hero-slider-dots{bottom:235px}
}
@media(prefers-reduced-motion:reduce){
  .hero-slide{transition:opacity .25s linear;transform:none!important}
}


/* V13 — Arabic RTL typewriter effect for hero description */
.hero-typing-text{
  direction:rtl;
  unicode-bidi:plaintext;
}
.hero-typing-text::after{
  content:"";
  display:inline-block;
  width:2px;
  height:1.05em;
  margin-right:4px;
  vertical-align:-0.12em;
  background:currentColor;
  animation:heroTypingCaret .75s steps(1,end) infinite;
}
.hero-typing-text.is-complete::after{
  animation:heroTypingCaret .75s steps(1,end) infinite;
}
@keyframes heroTypingCaret{
  0%,48%{opacity:1}
  49%,100%{opacity:0}
}
@media(prefers-reduced-motion:reduce){
  .hero-typing-text::after{display:none}
}


/* =========================================================
   V15 — fixed hero copy/actions layout
   Keep description in exactly two visual lines on desktop,
   and keep CTA buttons fixed in position/size while typing.
   ========================================================= */
.hero-content .hero-desc,
.hero-content p{
  min-height:64px;
}

.hero-typing-text{
  display:block;
  width:100%;
  max-width:760px;
  min-height:64px;
  line-height:2;
  text-align:right;
  direction:rtl;
}

/* Reserve the final text footprint so typing never moves the buttons */
.hero-content .hero-actions,
.hero-content .actions,
.hero-content .hero-buttons{
  position:relative;
  min-height:64px;
  flex-shrink:0;
}

/* Keep both buttons stable and equal-height */
.hero-content .btn{
  min-height:64px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
}

/* Remove project-button arrow/icon completely */
.hero-content a[href*="project"] i,
.hero-content a[href*="project"] svg,
.hero-content .btn-outline i,
.hero-content .btn-outline svg{
  display:none !important;
}

@media (min-width:821px){
  .hero-content .hero-desc,
  .hero-content p{
    width:760px;
    max-width:100%;
    min-height:76px;
  }
  .hero-typing-text{
    width:760px;
    max-width:100%;
    min-height:76px;
    line-height:2;
  }
}

@media (max-width:820px){
  .hero-content .hero-desc,
  .hero-content p,
  .hero-typing-text{
    width:100%;
    min-height:92px;
  }
}


/* =========================================================
   V16 — raised pill/rounded hero CTA buttons
   ========================================================= */

/* ارفع مجموعة الأزرار بعيداً عن كارت الإحصائيات */
.hero-content .hero-actions,
.hero-content .actions,
.hero-content .hero-buttons{
  transform:translateY(-18px);
  margin-bottom:18px !important;
  gap:18px !important;
}

/* الشكل الدائري المستطيل مثل المرجع */
.hero-content .btn{
  min-width:235px;
  min-height:62px;
  padding:0 34px !important;
  border-radius:16px !important;
  font-weight:800;
  overflow:hidden;
  transition:
    transform .25s ease,
    box-shadow .25s ease,
    background .25s ease,
    border-color .25s ease;
}

/* زر عرض السعر */
.hero-content .btn-primary{
  border:1px solid rgba(255,119,36,.95) !important;
  box-shadow:
    0 10px 30px rgba(255,108,24,.20),
    inset 0 1px 0 rgba(255,255,255,.12);
}

/* زر استكشف مشاريعنا */
.hero-content .btn-outline{
  border:1px solid rgba(255,255,255,.58) !important;
  background:rgba(5,17,24,.30) !important;
  box-shadow:
    0 10px 28px rgba(0,0,0,.16),
    inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
}

.hero-content .btn:hover{
  transform:translateY(-3px);
}

@media(max-width:820px){
  .hero-content .hero-actions,
  .hero-content .actions,
  .hero-content .hero-buttons{
    transform:translateY(-10px);
    margin-bottom:12px !important;
  }
  .hero-content .btn{
    min-width:200px;
    min-height:58px;
    border-radius:15px !important;
  }
}

@media(max-width:520px){
  .hero-content .hero-actions,
  .hero-content .actions,
  .hero-content .hero-buttons{
    transform:translateY(-8px);
  }
  .hero-content .btn{
    width:100%;
    min-width:0;
  }
}


/* V17 — slightly narrower HERO slider buttons */
@media (min-width:821px){
  .hero-content .btn{
    min-width:205px !important;
    width:auto !important;
    padding-left:26px !important;
    padding-right:26px !important;
  }
}


/* V18 — raise complete HERO content group slightly */
@media (min-width:821px){
  .hero-content{
    transform:translateY(-28px) !important;
  }

  /* V16 already raised the buttons separately.
     Reduce that offset so heading, description and buttons move together. */
  .hero-content .hero-actions,
  .hero-content .actions,
  .hero-content .hero-buttons{
    transform:translateY(-8px) !important;
    margin-bottom:8px !important;
  }
}

@media (max-width:820px){
  .hero-content{
    transform:translateY(-14px) !important;
  }
}


/* V19 — raise HERO title + description only; keep CTA buttons in place */
@media (min-width:821px){
  /* Cancel V18 movement of the whole content block */
  .hero-content{
    transform:none !important;
  }

  /* Raise eyebrow, main title and description together */
  .hero-content .eyebrow,
  .hero-content h1,
  .hero-content .hero-desc,
  .hero-content p{
    position:relative;
    top:-34px;
  }

  /* Buttons remain at their current V18/V17 position */
  .hero-content .hero-actions,
  .hero-content .actions,
  .hero-content .hero-buttons{
    transform:translateY(-8px) !important;
    margin-bottom:8px !important;
  }
}

@media (max-width:820px){
  .hero-content{
    transform:none !important;
  }
  .hero-content .eyebrow,
  .hero-content h1,
  .hero-content .hero-desc,
  .hero-content p{
    position:relative;
    top:-18px;
  }
}


/* =========================================================
   V20 — move title, description AND CTA buttons upward
   directly beneath "GREAT STEEL CONTRACTING"
   ========================================================= */
@media (min-width:821px){
  /* Keep the eyebrow in its current place */
  .hero-content{
    transform:none !important;
  }

  /* V19 moved title/description only. Pull them farther upward. */
  .hero-content h1,
  .hero-content .hero-desc,
  .hero-content p{
    top:-68px !important;
  }

  /* Pull the CTA buttons upward with the text as one visual group */
  .hero-content .hero-actions,
  .hero-content .actions,
  .hero-content .hero-buttons{
    transform:translateY(-68px) !important;
    margin-bottom:0 !important;
  }
}

@media (max-width:820px){
  .hero-content h1,
  .hero-content .hero-desc,
  .hero-content p{
    top:-34px !important;
  }

  .hero-content .hero-actions,
  .hero-content .actions,
  .hero-content .hero-buttons{
    transform:translateY(-34px) !important;
  }
}


/* V21 — slide-specific content transition */
.hero-copy{
  transition:opacity .28s ease, transform .28s ease;
}
.hero-copy.is-changing{
  opacity:0;
  transform:translateY(10px);
}


/* V22 — first line of every HERO title is white */
.hero-content .hero-title-line1{
  color:#fff !important;
}

/* Keep second line in Great Steel orange */
.hero-content .hero-title-line2{
  color:var(--orange) !important;
}


/* V23 — search icon beside language control */
.header-search-btn{
  width:38px;
  height:38px;
  padding:0;
  margin:0 8px 0 0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 38px;
  border:0;
  background:transparent;
  color:#fff;
  cursor:pointer;
  border-radius:50%;
  transition:background .22s ease, color .22s ease, transform .22s ease;
}
.header-search-btn svg{
  width:21px;
  height:21px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.header-search-btn:hover{
  color:var(--orange);
  background:rgba(255,255,255,.07);
  transform:translateY(-1px);
}
.header-search-btn:focus-visible{
  outline:2px solid var(--orange);
  outline-offset:2px;
}


/* =========================================================
   V24 — Services dropdown + aligned language/search controls
   ========================================================= */
.nav-services-dropdown{
  position:relative;
}
.nav-services-dropdown > .services-trigger{
  display:flex !important;
  align-items:center;
  gap:6px;
}
.services-arrow{
  display:inline-block;
  font-size:15px;
  line-height:1;
  transform:translateY(-1px);
  transition:transform .22s ease, color .22s ease;
}
.services-dropdown-menu{
  position:absolute;
  top:calc(100% + 14px);
  right:50%;
  transform:translate(50%, 8px);
  width:245px;
  padding:10px;
  background:rgba(5,18,26,.97);
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  box-shadow:0 18px 45px rgba(0,0,0,.32);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  z-index:100;
  transition:opacity .2s ease, transform .2s ease, visibility .2s;
}
.services-dropdown-menu::before{
  content:"";
  position:absolute;
  top:-7px;
  right:50%;
  width:13px;
  height:13px;
  background:rgba(5,18,26,.97);
  border-top:1px solid rgba(255,255,255,.12);
  border-right:1px solid rgba(255,255,255,.12);
  transform:translateX(50%) rotate(-45deg);
}
.services-dropdown-menu a{
  display:block !important;
  padding:11px 13px !important;
  border-radius:9px;
  color:#fff !important;
  text-align:right;
  white-space:nowrap;
  font-size:14px !important;
  transition:background .18s ease, color .18s ease, padding-right .18s ease;
}
.services-dropdown-menu a:hover{
  background:rgba(255,113,31,.12);
  color:var(--orange) !important;
  padding-right:17px !important;
}
.nav-services-dropdown:hover .services-dropdown-menu,
.nav-services-dropdown:focus-within .services-dropdown-menu,
.nav-services-dropdown.is-open .services-dropdown-menu{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translate(50%, 0);
}
.nav-services-dropdown:hover .services-arrow,
.nav-services-dropdown:focus-within .services-arrow,
.nav-services-dropdown.is-open .services-arrow{
  color:var(--orange);
  transform:rotate(180deg);
}

/* Keep EN and search icon directly beside each other and vertically aligned */
.header-search-btn{
  margin-right:3px !important;
  margin-left:0 !important;
  transform:translateY(-3px);
}
.header-search-btn:hover{
  transform:translateY(-4px) !important;
}

/* Raise language control slightly to match search icon */
.header-actions .lang-switch,
.header-actions .language-switch,
.header-actions [class*="lang"],
.header-actions [class*="language"]{
  position:relative;
  top:-3px;
  margin-left:0 !important;
  margin-right:0 !important;
}

@media(max-width:900px){
  .services-dropdown-menu{
    position:static;
    width:100%;
    transform:none !important;
    margin-top:8px;
    display:none;
  }
  .nav-services-dropdown.is-open .services-dropdown-menu{
    display:block;
  }
  .services-dropdown-menu::before{display:none;}
}


/* =========================================================
   V25 — precise language + search alignment
   EN is directly beside search icon on the same horizontal line
   ========================================================= */

/* The language control itself */
.lang{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  height:38px !important;
  line-height:38px !important;
  position:relative !important;
  top:-9px !important;
  margin:0 !important;
  padding:0 2px !important;
  vertical-align:middle !important;
}

/* Search icon directly beside EN */
.header-search-btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:38px !important;
  height:38px !important;
  margin:0 0 0 2px !important;
  padding:0 !important;
  position:relative !important;
  top:-9px !important;
  transform:none !important;
  vertical-align:middle !important;
}

.header-search-btn:hover{
  transform:none !important;
}

/* Keep both controls visually tight */
.header-actions{
  align-items:center !important;
  column-gap:4px !important;
}


/* =========================================================
   V26 — FINAL header controls alignment
   Quote button → EN → Search, all on one exact horizontal line
   ========================================================= */

/* Reset V24/V25 manual vertical offsets */
.lang,
.header-search-btn{
  top:auto !important;
  bottom:auto !important;
  transform:none !important;
  vertical-align:middle !important;
}

/* Existing header actions become one clean flex row */
.header-actions{
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:12px !important;
  height:auto !important;
}

/* Quote CTA */
.header-actions .btn,
.header-actions .quote-btn,
.header-actions .header-quote{
  margin:0 !important;
  align-self:center !important;
}

/* EN control */
.lang{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  height:44px !important;
  min-height:44px !important;
  line-height:1 !important;
  margin:0 !important;
  padding:0 !important;
  position:static !important;
  align-self:center !important;
}

/* Search icon immediately beside EN */
.header-search-btn{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:40px !important;
  height:44px !important;
  min-width:40px !important;
  min-height:44px !important;
  margin:0 !important;
  padding:0 !important;
  position:static !important;
  align-self:center !important;
}

.header-search-btn:hover{
  transform:none !important;
}

/* Tighten EN ↔ search specifically */
.lang + .header-search-btn{
  margin-left:-6px !important;
}


/* =========================================================
   V27 — clean header arrows
   1) Remove arrow beside EN
   2) Professional CSS chevron beside Services
   ========================================================= */

/* Remove any language arrow/icon generated by markup or CSS */
.lang::before,
.lang::after{
  display:none !important;
  content:none !important;
}
.lang i,
.lang svg,
.lang .arrow,
.lang .chevron,
.lang [class*="arrow"],
.lang [class*="chevron"]{
  display:none !important;
}

/* Hide old text glyph used for Services arrow */
.services-arrow{
  font-size:0 !important;
  width:9px !important;
  height:9px !important;
  display:inline-block !important;
  border-right:2px solid currentColor !important;
  border-bottom:2px solid currentColor !important;
  border-top:0 !important;
  border-left:0 !important;
  transform:rotate(45deg) translateY(-2px) !important;
  transform-origin:center !important;
  color:#fff;
  margin-right:2px;
  transition:transform .22s ease, color .22s ease !important;
}

/* Clean alignment between label and chevron */
.nav-services-dropdown > .services-trigger{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
}

/* Rotate neatly when dropdown is open */
.nav-services-dropdown:hover .services-arrow,
.nav-services-dropdown:focus-within .services-arrow,
.nav-services-dropdown.is-open .services-arrow{
  color:var(--orange) !important;
  transform:rotate(225deg) translate(-1px,-1px) !important;
}


/* =========================================================
   V28 — restore search icon after EN
   Keep language arrow removed; search is a separate control.
   ========================================================= */
.nav-actions{
  display:flex !important;
  align-items:center !important;
}
.nav-actions .lang{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  margin:0 !important;
}
.nav-actions .header-search-btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:36px !important;
  height:36px !important;
  flex:0 0 36px !important;
  margin:0 0 0 2px !important;
  padding:0 !important;
  position:relative !important;
  top:0 !important;
  transform:none !important;
  color:#fff !important;
}
.nav-actions .header-search-btn svg{
  display:block !important;
  width:21px !important;
  height:21px !important;
  fill:none !important;
  stroke:currentColor !important;
  stroke-width:2 !important;
}
.nav-actions .header-search-btn:hover{
  color:var(--orange) !important;
  transform:none !important;
}


/* =========================================================
   V29 — professional hover animation for HERO statistics
   ========================================================= */
.stats-wrap .stat{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  cursor:default;
  transition:
    transform .28s cubic-bezier(.2,.7,.2,1),
    background-color .28s ease,
    box-shadow .28s ease,
    border-color .28s ease;
}

/* subtle orange light that travels in on hover */
.stats-wrap .stat::before{
  content:"";
  position:absolute;
  inset:8px;
  z-index:-1;
  border-radius:12px;
  background:
    radial-gradient(circle at 82% 45%,
      rgba(255,112,28,.15) 0,
      rgba(255,112,28,.06) 34%,
      transparent 68%);
  opacity:0;
  transform:scale(.86);
  transition:opacity .28s ease, transform .35s ease;
}

/* small accent line */
.stats-wrap .stat::after{
  content:"";
  position:absolute;
  right:50%;
  bottom:10px;
  width:0;
  height:2px;
  border-radius:99px;
  background:var(--orange);
  transform:translateX(50%);
  transition:width .28s ease;
}

.stats-wrap .stat i{
  transition:
    transform .32s cubic-bezier(.2,.8,.2,1),
    filter .28s ease;
}

.stats-wrap .stat strong,
.stats-wrap .stat span{
  transition:transform .28s ease, color .28s ease;
}

@media (hover:hover) and (pointer:fine){
  .stats-wrap .stat:hover{
    transform:translateY(-7px);
    background:rgba(255,255,255,.025);
    box-shadow:0 15px 30px rgba(0,0,0,.16);
  }

  .stats-wrap .stat:hover::before{
    opacity:1;
    transform:scale(1);
  }

  .stats-wrap .stat:hover::after{
    width:54px;
  }

  .stats-wrap .stat:hover i{
    transform:translateY(-3px) scale(1.12) rotate(-3deg);
    filter:drop-shadow(0 7px 11px rgba(255,112,28,.25));
  }

  .stats-wrap .stat:hover strong{
    color:var(--orange);
    transform:translateY(-2px);
  }

  .stats-wrap .stat:hover span{
    transform:translateY(-1px);
  }
}

/* keyboard accessibility gets the same visual feedback */
.stats-wrap .stat:focus-within{
  transform:translateY(-5px);
}

@media (prefers-reduced-motion:reduce){
  .stats-wrap .stat,
  .stats-wrap .stat::before,
  .stats-wrap .stat::after,
  .stats-wrap .stat i,
  .stats-wrap .stat strong,
  .stats-wrap .stat span{
    transition:none !important;
    transform:none !important;
  }
}


/* =========================================================
   V30 — Services dropdown:
   opens on hover OR click, closes when pointer leaves.
   ========================================================= */
@media (hover:hover) and (pointer:fine){
  .nav-dropdown:hover .services-menu,
  .nav-dropdown:focus-within .services-menu,
  .nav-dropdown.is-open .services-menu{
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    transform:translateY(0) !important;
  }

  .nav-dropdown:hover .services-trigger .nav-chevron,
  .nav-dropdown:focus-within .services-trigger .nav-chevron,
  .nav-dropdown.is-open .services-trigger .nav-chevron{
    transform:rotate(180deg) !important;
  }
}

/* click/touch fallback */
.nav-dropdown.is-open .services-menu{
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  transform:translateY(0) !important;
}
.nav-dropdown.is-open .services-trigger .nav-chevron{
  transform:rotate(180deg) !important;
}


/* =========================================================
   V31 — Services dropdown opens ONLY on click.
   Hover alone does nothing. After opening, leaving the whole
   dropdown area closes it automatically.
   ========================================================= */

/* Cancel all hover/focus opening rules from previous versions */
@media (hover:hover) and (pointer:fine){
  .nav-dropdown:hover .services-menu,
  .nav-dropdown:focus-within .services-menu{
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    transform:translateY(8px) !important;
  }

  .nav-dropdown:hover .services-trigger .nav-chevron,
  .nav-dropdown:focus-within .services-trigger .nav-chevron{
    transform:none !important;
  }

  /* Only explicit click-open state is allowed */
  .nav-dropdown.is-open .services-menu{
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    transform:translateY(0) !important;
  }

  .nav-dropdown.is-open .services-trigger .nav-chevron{
    transform:rotate(180deg) !important;
  }
}

/* Touch/click state */
.nav-dropdown.is-open .services-menu{
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  transform:translateY(0) !important;
}
.nav-dropdown.is-open .services-trigger .nav-chevron{
  transform:rotate(180deg) !important;
}


/* =========================================================
   V32 — stable click-only services dropdown
   Adds a safe hover bridge so the menu does not vanish while
   moving the pointer from "خدماتنا" down into the menu.
   ========================================================= */
.nav-services-dropdown{
  position:relative !important;
}

.nav-services-dropdown > .services-trigger{
  position:relative;
}

/* Invisible bridge covering the gap between trigger and dropdown */
.nav-services-dropdown::after{
  content:"";
  position:absolute;
  top:100%;
  right:0;
  left:0;
  height:24px;
  background:transparent;
  pointer-events:none;
}

.nav-services-dropdown.is-open::after{
  pointer-events:auto;
}

/* Hover/focus NEVER opens the menu on its own */
.nav-services-dropdown:hover .services-dropdown-menu:not(.force-open),
.nav-services-dropdown:focus-within .services-dropdown-menu:not(.force-open){
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

/* The explicit click-open class wins */
.nav-services-dropdown.is-open .services-dropdown-menu{
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  transform:translate(50%, 0) !important;
}

/* Keep the menu close enough to the trigger, reducing dead space */
.nav-services-dropdown .services-dropdown-menu{
  top:calc(100% + 10px) !important;
}

/* Arrow state only follows click-open */
.nav-services-dropdown.is-open .services-arrow,
.nav-services-dropdown.is-open .nav-chevron{
  color:var(--orange) !important;
  transform:rotate(225deg) translate(-1px,-1px) !important;
}


/* =========================================================
   V33 — definitive Services dropdown visibility fix
   Click opens. Hover alone never opens.
   Once opened, hover/focus cannot hide the menu.
   ========================================================= */

.nav-services-dropdown .services-dropdown-menu{
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
  transform:translate(50%, 8px) !important;
}

/* Explicit click-open state — strongest rule */
.nav-services-dropdown.is-open .services-dropdown-menu,
.nav-services-dropdown.is-open:hover .services-dropdown-menu,
.nav-services-dropdown.is-open:focus-within .services-dropdown-menu{
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  transform:translate(50%, 0) !important;
}

/* Hover alone must not open */
.nav-services-dropdown:not(.is-open):hover .services-dropdown-menu,
.nav-services-dropdown:not(.is-open):focus-within .services-dropdown-menu{
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
  transform:translate(50%, 8px) !important;
}

/* Arrow follows only the click-open state */
.nav-services-dropdown:not(.is-open) .services-arrow{
  color:#fff !important;
  transform:rotate(45deg) translateY(-2px) !important;
}

.nav-services-dropdown.is-open .services-arrow{
  color:var(--orange) !important;
  transform:rotate(225deg) translate(-1px,-1px) !important;
}

/* Wider invisible bridge between trigger and menu */
.nav-services-dropdown.is-open::after{
  content:"";
  position:absolute;
  top:100%;
  right:-20px;
  left:-20px;
  height:32px;
  pointer-events:auto;
  background:transparent;
  z-index:99;
}

.nav-services-dropdown .services-dropdown-menu{
  z-index:110 !important;
  top:calc(100% + 8px) !important;
}


/* =========================================================
   V34 — Equal service card sizes + professional hover effect
   ========================================================= */

/* Make all cards equal height and internally consistent */
.service-grid{
  align-items:stretch !important;
}

.service-card{
  height:100% !important;
  min-height:392px !important;
  display:flex !important;
  flex-direction:column !important;
  position:relative !important;
  overflow:hidden !important;
  border-radius:6px !important;
  background:#fff !important;
  transition:
    transform .32s cubic-bezier(.2,.75,.2,1),
    box-shadow .32s ease,
    border-color .32s ease !important;
  border:1px solid rgba(9,31,43,.06) !important;
}

/* Same image height for every service */
.service-card > img{
  width:100% !important;
  height:185px !important;
  min-height:185px !important;
  object-fit:cover !important;
  display:block !important;
  transition:transform .5s cubic-bezier(.2,.75,.2,1), filter .35s ease !important;
}

/* Keep the icon block aligned at the same vertical position */
.service-card .service-icon{
  flex:0 0 auto !important;
  transition:
    transform .32s cubic-bezier(.2,.75,.2,1),
    box-shadow .32s ease,
    background .32s ease !important;
}

/* Let text area fill the rest evenly */
.service-card h3{
  min-height:58px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  margin-bottom:8px !important;
}

.service-card p{
  flex:1 1 auto !important;
  min-height:92px !important;
  margin-bottom:0 !important;
}

/* subtle orange accent line */
.service-card::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:0;
  width:0;
  height:3px;
  border-radius:99px 99px 0 0;
  background:var(--orange);
  transform:translateX(-50%);
  transition:width .32s ease;
}

@media (hover:hover) and (pointer:fine){
  .service-card:hover{
    transform:translateY(-10px);
    border-color:rgba(255,112,28,.22) !important;
    box-shadow:
      0 18px 38px rgba(7,24,34,.14),
      0 5px 14px rgba(255,112,28,.08) !important;
  }

  .service-card:hover > img{
    transform:scale(1.055);
    filter:saturate(1.08) contrast(1.03);
  }

  .service-card:hover .service-icon{
    transform:translateY(-5px) scale(1.08);
    box-shadow:0 8px 20px rgba(255,112,28,.18);
  }

  .service-card:hover h3{
    color:var(--orange);
  }

  .service-card:hover::after{
    width:72%;
  }
}

@media(max-width:1050px){
  .service-card{
    min-height:380px !important;
  }
}

@media(max-width:820px){
  .service-card{
    min-height:0 !important;
  }
  .service-card > img{
    height:200px !important;
    min-height:200px !important;
  }
  .service-card h3,
  .service-card p{
    min-height:0 !important;
  }
}

@media(prefers-reduced-motion:reduce){
  .service-card,
  .service-card > img,
  .service-card .service-icon,
  .service-card::after{
    transition:none !important;
    transform:none !important;
  }
}


/* =========================================================
   V35 — "عرض جميع الخدمات" button
   Clean button, no arrow + professional hover interaction
   ========================================================= */
.services-intro .btn,
.services-copy .btn,
.services-content .btn,
.services-section a[href="#services"],
.services-section .services-btn,
.services-section .btn-outline{
  color:#ffffff !important;
  background:#0b1d27 !important;
  border:1px solid #0b1d27 !important;
  border-radius:8px !important;
  box-shadow:0 5px 14px rgba(7,24,34,.10);
  transition:
    background-color .28s ease,
    border-color .28s ease,
    color .28s ease,
    transform .28s cubic-bezier(.2,.75,.2,1),
    box-shadow .28s ease !important;
}

/* Hide any decorative arrow pseudo-element on this service CTA */
.services-intro .btn::before,
.services-intro .btn::after,
.services-copy .btn::before,
.services-copy .btn::after,
.services-content .btn::before,
.services-content .btn::after,
.services-section .services-btn::before,
.services-section .services-btn::after,
.services-section .btn-outline::before,
.services-section .btn-outline::after{
  content:none !important;
  display:none !important;
}

@media (hover:hover) and (pointer:fine){
  .services-intro .btn:hover,
  .services-copy .btn:hover,
  .services-content .btn:hover,
  .services-section a[href="#services"]:hover,
  .services-section .services-btn:hover,
  .services-section .btn-outline:hover{
    background:#ff711c !important;
    border-color:#ff711c !important;
    color:#ffffff !important;
    transform:translateY(-4px);
    box-shadow:0 12px 25px rgba(255,113,28,.25);
  }
}

.services-intro .btn:active,
.services-copy .btn:active,
.services-content .btn:active,
.services-section a[href="#services"]:active,
.services-section .services-btn:active,
.services-section .btn-outline:active{
  transform:translateY(-1px) scale(.985);
}

.services-intro .btn:focus-visible,
.services-copy .btn:focus-visible,
.services-content .btn:focus-visible,
.services-section a[href="#services"]:focus-visible,
.services-section .services-btn:focus-visible,
.services-section .btn-outline:focus-visible{
  outline:3px solid rgba(255,113,28,.28) !important;
  outline-offset:3px;
}


/* =========================================================
   V36 — Exact Services CTA shown beside service cards
   ========================================================= */
.services .section-intro .services-all-btn{
  min-height:50px !important;
  padding:0 27px !important;
  gap:0 !important;
  color:#ffffff !important;
  background:#102733 !important;
  border:1px solid #102733 !important;
  border-radius:4px !important;
  box-shadow:none !important;
  transition:
    background-color .28s ease,
    border-color .28s ease,
    color .28s ease,
    transform .28s ease,
    box-shadow .28s ease !important;
}

/* Ensure no arrow can be generated from pseudo elements */
.services .section-intro .services-all-btn::before,
.services .section-intro .services-all-btn::after{
  content:none !important;
  display:none !important;
}

@media (hover:hover) and (pointer:fine){
  .services .section-intro .services-all-btn:hover{
    color:#ffffff !important;
    background:#f36f21 !important;
    border-color:#f36f21 !important;
    transform:translateY(-4px) !important;
    box-shadow:0 10px 24px rgba(243,111,33,.25) !important;
  }
}

.services .section-intro .services-all-btn:active{
  transform:translateY(-1px) scale(.985) !important;
}

.services .section-intro .services-all-btn:focus-visible{
  outline:3px solid rgba(243,111,33,.28) !important;
  outline-offset:3px;
}


/* =========================================================
   V37 — Equal Projects cards + premium hover interaction
   ========================================================= */

/* Equal card sizing */
.project-card{
  height:100% !important;
  min-height:338px !important;
  display:flex !important;
  flex-direction:column !important;
  position:relative !important;
  overflow:hidden !important;
  background:rgba(255,255,255,.035) !important;
  border:1px solid rgba(255,255,255,.055) !important;
  border-radius:8px !important;
  transition:
    transform .34s cubic-bezier(.2,.75,.2,1),
    box-shadow .34s ease,
    border-color .34s ease,
    background .34s ease !important;
  isolation:isolate;
}

/* Every project image uses the exact same frame */
.project-card img{
  width:100% !important;
  height:235px !important;
  min-height:235px !important;
  object-fit:cover !important;
  display:block !important;
  transition:
    transform .55s cubic-bezier(.2,.75,.2,1),
    filter .4s ease !important;
}

/* Keep titles/locations aligned */
.project-card h3,
.project-card h4{
  min-height:48px !important;
  margin:0 !important;
  padding:17px 16px 5px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  width:100%;
  transition:color .28s ease, transform .28s ease !important;
}

.project-card p,
.project-card .location,
.project-card .project-location{
  min-height:38px !important;
  margin:0 !important;
  padding:0 16px 15px !important;
  transition:color .28s ease, transform .28s ease !important;
}

/* Cinematic orange sweep */
.project-card::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(135deg,
      transparent 0%,
      transparent 45%,
      rgba(255,113,28,.09) 62%,
      rgba(255,113,28,.18) 100%);
  opacity:0;
  transform:translateX(-18%);
  transition:opacity .38s ease, transform .48s ease;
}

/* Bottom accent */
.project-card::after{
  content:"";
  position:absolute;
  right:50%;
  bottom:0;
  width:0;
  height:3px;
  z-index:3;
  border-radius:99px 99px 0 0;
  background:var(--orange);
  transform:translateX(50%);
  transition:width .34s ease;
}

@media (hover:hover) and (pointer:fine){
  .project-card:hover{
    transform:translateY(-11px) scale(1.012);
    background:rgba(255,255,255,.06) !important;
    border-color:rgba(255,113,28,.30) !important;
    box-shadow:
      0 22px 45px rgba(0,0,0,.28),
      0 8px 20px rgba(255,113,28,.09) !important;
  }

  .project-card:hover img{
    transform:scale(1.075);
    filter:saturate(1.12) contrast(1.05) brightness(1.03);
  }

  .project-card:hover::before{
    opacity:1;
    transform:translateX(0);
  }

  .project-card:hover::after{
    width:72%;
  }

  .project-card:hover h3,
  .project-card:hover h4{
    color:var(--orange) !important;
    transform:translateY(-2px);
  }

  .project-card:hover p,
  .project-card:hover .location,
  .project-card:hover .project-location{
    color:#fff !important;
    transform:translateY(-1px);
  }
}

@media(max-width:1050px){
  .project-card{
    min-height:325px !important;
  }
  .project-card img{
    height:220px !important;
    min-height:220px !important;
  }
}

@media(max-width:820px){
  .project-card{
    min-height:0 !important;
  }
}

@media(prefers-reduced-motion:reduce){
  .project-card,
  .project-card img,
  .project-card::before,
  .project-card::after,
  .project-card h3,
  .project-card h4,
  .project-card p{
    transition:none !important;
    transform:none !important;
  }
}

/* V41 — Services intro description spacing/typography only */
.services .section-intro h2{
  margin-bottom:6px;
}
.services .section-intro p{
  font-family:'Cairo',sans-serif;
  font-size:15.5px;
  line-height:2.05;
  margin-top:-2px;
  margin-bottom:23px;
}

/* V42 — Service card descriptions typography only */
.services .service-card p{
  font-family:'Cairo',sans-serif;
  font-size:12.5px;
  line-height:1.95;
}

/* V45 — Project city labels only: slightly larger text */
.project-card > span{
  font-size:13px !important;
}


/* V58 — CEO message/image synchronized slider. Scoped only to the CEO area. */
.ceo-contact{grid-template-columns:2.05fr 1fr}
.ceo-slider{position:relative;min-width:0;overflow:hidden;background:#0c1a23}
.ceo-slide{display:none;grid-template-columns:1.35fr .7fr;min-height:100%;animation:ceoSlideIn .55s ease both}
.ceo-slide.is-active{display:grid}
.ceo-slide .ceo-message,.ceo-slide .ceo-photo{min-width:0}
.ceo-slider-arrow{
  position:absolute;top:50%;z-index:5;transform:translateY(-50%);
  width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.28);
  background:rgba(8,20,29,.72);color:#fff;display:flex;align-items:center;justify-content:center;
  cursor:pointer;opacity:0;transition:opacity .25s ease,background .25s ease,border-color .25s ease,transform .25s ease;
  backdrop-filter:blur(6px)
}
.ceo-slider:hover .ceo-slider-arrow,.ceo-slider:focus-within .ceo-slider-arrow{opacity:1}
.ceo-slider-arrow:hover{background:var(--orange);border-color:var(--orange);transform:translateY(-50%) scale(1.07)}
.ceo-slider-prev{right:14px}.ceo-slider-next{left:14px}
.ceo-slider-dots{position:absolute;bottom:14px;right:50%;transform:translateX(50%);z-index:6;display:flex;gap:7px}
.ceo-slider-dot{width:8px;height:8px;border:0;border-radius:50%;padding:0;background:rgba(255,255,255,.45);cursor:pointer;transition:.25s}
.ceo-slider-dot.is-active{width:24px;border-radius:10px;background:var(--orange)}
.ceo-slider[data-single-slide="true"] .ceo-slider-arrow,
.ceo-slider[data-single-slide="true"] .ceo-slider-dots{display:none}
@keyframes ceoSlideIn{from{opacity:.25;transform:translateX(18px)}to{opacity:1;transform:none}}
@media(max-width:1050px){
  .ceo-contact{grid-template-columns:1fr}
  .ceo-slide{grid-template-columns:1fr 300px}
  .contact-card{grid-column:auto}
}
@media(max-width:820px){
  .ceo-slide{grid-template-columns:1fr}
  .ceo-slide .ceo-photo{order:1}
  .ceo-slide .ceo-message{order:2}
}
@media(prefers-reduced-motion:reduce){.ceo-slide{animation:none}.ceo-slider-arrow,.ceo-slider-dot{transition:none}}


/* V59 — make CEO slider visibly identifiable when multiple slides exist */
.ceo-slider:not([data-single-slide="true"]) .ceo-slider-arrow{
  opacity:1;
}
.ceo-slider:not([data-single-slide="true"]) .ceo-slider-dots{
  display:flex;
}


/* V61 — keep CEO slider dimensions identical while slides change */
.ceo-slider{
  height: 545px;
  min-height: 545px;
  max-height: 545px;
}
.ceo-slide,
.ceo-slide.is-active{
  height: 545px;
  min-height: 545px;
  max-height: 545px;
}
.ceo-slide .ceo-message,
.ceo-slide .ceo-photo{
  height: 545px;
  min-height: 545px;
  max-height: 545px;
  box-sizing:border-box;
}
.ceo-slide .ceo-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
@media(max-width:1050px){
  .ceo-slider,
  .ceo-slide,
  .ceo-slide.is-active,
  .ceo-slide .ceo-message,
  .ceo-slide .ceo-photo{
    height:520px;
    min-height:520px;
    max-height:520px;
  }
}
@media(max-width:820px){
  .ceo-slider{
    height:auto;
    min-height:0;
    max-height:none;
  }
  .ceo-slide,
  .ceo-slide.is-active{
    height:auto;
    min-height:0;
    max-height:none;
  }
  .ceo-slide .ceo-message,
  .ceo-slide .ceo-photo{
    height:auto;
    min-height:0;
    max-height:none;
  }
  .ceo-slide .ceo-photo img{
    height:420px;
  }
}


/* V62 — Footer typography + professional hover effects only */
.site-footer .footer-grid h4{
  font-size:22px;
  line-height:1.35;
  margin-bottom:22px;
}
.site-footer .footer-grid p,
.site-footer .footer-grid a,
.site-footer .footer-grid li{
  font-size:17px;
  line-height:1.9;
}
.site-footer .footer-grid a{
  position:relative;
  display:inline-block;
  transition:color .28s ease, transform .28s ease, text-shadow .28s ease;
}
.site-footer .footer-grid a:hover{
  color:var(--orange);
  transform:translateX(-6px);
  text-shadow:0 0 14px rgba(255,107,31,.22);
}
.site-footer .footer-grid a::after{
  content:"";
  position:absolute;
  right:0;
  bottom:1px;
  width:0;
  height:1px;
  background:var(--orange);
  transition:width .28s ease;
}
.site-footer .footer-grid a:hover::after{
  width:100%;
}
.site-footer .socials a{
  transition:color .28s ease, transform .28s ease, filter .28s ease;
}
.site-footer .socials a:hover{
  color:var(--orange);
  transform:translateY(-4px) scale(1.08);
  filter:drop-shadow(0 5px 8px rgba(255,107,31,.25));
}
.site-footer .footer-bottom,
.site-footer .footer-bottom a{
  font-size:14px;
}
@media(max-width:820px){
  .site-footer .footer-grid h4{font-size:20px}
  .site-footer .footer-grid p,
  .site-footer .footer-grid a,
  .site-footer .footer-grid li{font-size:16px}
}

/* V63 — Footer refinement only (reference-inspired layout) */
.footer{
  padding-top:56px;
}
.footer .footer-grid{
  grid-template-columns:1.45fr 1fr 1fr 1.05fr;
  gap:72px;
  align-items:start;
  padding-bottom:48px;
}
.footer .footer-grid > div{
  min-width:0;
}
.footer .footer-grid h4{
  position:relative;
  color:#fff;
  font-size:21px;
  line-height:1.4;
  font-weight:800;
  margin:0 0 28px;
  padding-bottom:12px;
}
.footer .footer-grid h4::after{
  content:"";
  position:absolute;
  right:0;
  bottom:0;
  width:42px;
  height:3px;
  border-radius:3px;
  background:var(--orange);
}
.footer .footer-grid p,
.footer .footer-grid a{
  font-size:16px;
  line-height:1.9;
  margin:6px 0;
}
.footer .footer-grid > div:not(.footer-brand) > a{
  width:max-content;
  max-width:100%;
  position:relative;
  transition:color .28s ease, transform .28s ease;
}
.footer .footer-grid > div:not(.footer-brand) > a:hover{
  color:var(--orange);
  transform:translateX(-5px);
}
.footer .footer-brand img{
  width:220px;
  max-width:100%;
  margin-bottom:18px;
}
.footer .footer-brand p{
  max-width:430px;
  font-size:16px;
  line-height:2;
}
.footer .socials{
  gap:15px;
  margin-top:20px;
}
.footer .socials a{
  width:36px;
  height:36px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin:0;
  border:1px solid rgba(255,255,255,.16);
  border-radius:50%;
  font-size:17px;
  transition:transform .28s ease,color .28s ease,border-color .28s ease,background .28s ease;
}
.footer .socials a:hover{
  transform:translateY(-4px);
  color:#fff;
  border-color:var(--orange);
  background:var(--orange);
}
.footer .footer-bottom{
  padding:18px 0 20px;
  font-size:13px;
  line-height:1.7;
}
@media(max-width:1050px){
  .footer .footer-grid{gap:40px;grid-template-columns:1.35fr 1fr 1fr 1fr}
  .footer .footer-grid h4{font-size:19px}
  .footer .footer-grid p,.footer .footer-grid a,.footer .footer-brand p{font-size:15px}
}
@media(max-width:820px){
  .footer{padding-top:42px}
  .footer .footer-grid{grid-template-columns:1fr 1fr;gap:36px 42px;padding-bottom:36px}
  .footer .footer-brand{grid-column:1/-1}
  .footer .footer-grid h4{font-size:20px;margin-bottom:22px}
  .footer .footer-grid p,.footer .footer-grid a,.footer .footer-brand p{font-size:16px}
}
@media(max-width:520px){
  .footer .footer-grid{grid-template-columns:1fr;gap:30px}
  .footer .footer-brand{grid-column:auto}
  .footer .footer-bottom{font-size:12px}
}

/* V110 — remove only the white gap directly above the executive slider */
.quality.section.quality-premium{
  padding-bottom:0 !important;
}

/* V118 — homepage executive slider: both slides use the exact same photo layout. */
.ceo-contact .ceo-slide .ceo-photo{
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  overflow:hidden !important;
  background:#09060d !important;
}
.ceo-contact .ceo-slide .ceo-photo img{
  width:100% !important;
  height:100% !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  display:block !important;
  object-fit:cover !important;
}

/* V119 — definitive fix for the thin white strip above the executive man's photo.
   Render the portrait as the photo-panel background so the panel is painted edge-to-edge. */
.ceo-contact .ceo-slide:first-child .ceo-photo{
  background-color:#09060d !important;
  background-image:url('../assets/ceo-photo-man.jpg') !important;
  background-repeat:no-repeat !important;
  background-position:center center !important;
  background-size:cover !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  outline:0 !important;
}
.ceo-contact .ceo-slide:first-child .ceo-photo > img{
  visibility:hidden !important;
}

/* V123 — English homepage only: mirror the executive portrait so he faces the CEO message. */
html[lang="en"] .ceo-contact .ceo-slide:first-child .ceo-photo{
  background-position:center center !important;
}
html[lang="en"] .ceo-contact .ceo-slide:first-child .ceo-photo::before{
  content:"";
  position:absolute;
  inset:0;
  background:url('../assets/ceo-photo-man.jpg') center center/cover no-repeat;
  transform:scaleX(-1);
  transform-origin:center;
}
html[lang="en"] .ceo-contact .ceo-slide:first-child .ceo-photo{
  position:relative !important;
  background-image:none !important;
}

/* V149 — premium hover/focus effect for site-search submit button (AR + EN) */
.gs-search-form button[type="submit"]{
  position:relative; overflow:hidden; isolation:isolate;
  transition:transform .22s ease, box-shadow .22s ease, background-color .22s ease, filter .22s ease;
  box-shadow:0 8px 20px rgba(255,113,28,.18);
}
.gs-search-form button[type="submit"]::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(120deg,transparent 20%,rgba(255,255,255,.28) 50%,transparent 80%);
  transform:translateX(-140%); transition:transform .48s ease;
}
.gs-search-form button[type="submit"]:hover{
  transform:translateY(-3px) scale(1.035);
  background:#ff7f2a;
  box-shadow:0 14px 30px rgba(255,113,28,.38),0 0 0 1px rgba(255,255,255,.14) inset;
  filter:saturate(1.08);
}
.gs-search-form button[type="submit"]:hover::before{transform:translateX(140%)}
.gs-search-form button[type="submit"]:active{transform:translateY(-1px) scale(.98);box-shadow:0 7px 16px rgba(255,113,28,.28)}
.gs-search-form button[type="submit"]:focus-visible{outline:2px solid #fff;outline-offset:3px;box-shadow:0 12px 28px rgba(255,113,28,.42)}
@media (prefers-reduced-motion:reduce){.gs-search-form button[type="submit"],.gs-search-form button[type="submit"]::before{transition:none}}


/* V150 — Footer QR code under company description */
.footer-qr-wrap{
  margin-top:18px;
  display:flex;
  justify-content:flex-start;
}
.footer-qr{
  width:112px;
  height:112px;
  display:block;
  object-fit:contain;
  padding:7px;
  background:#fff;
  border:1px solid rgba(255,122,31,.45);
  border-radius:10px;
  box-shadow:0 10px 26px rgba(0,0,0,.18);
}
html[dir="ltr"] .footer-qr-wrap{justify-content:flex-start;}
@media (max-width:768px){
  .footer-qr-wrap{justify-content:center;margin-top:16px;}
  .footer-qr{width:104px;height:104px;}
}

/* V151 — Premium footer QR treatment (visual frame only; QR contrast preserved) */
.footer-qr-wrap{
  position:relative;
  width:max-content;
  margin-top:20px;
  padding:8px;
  border:1px solid rgba(255,113,28,.46);
  border-radius:16px;
  background:linear-gradient(145deg,rgba(255,113,28,.10),rgba(255,255,255,.035) 42%,rgba(1,20,29,.34));
  box-shadow:0 14px 34px rgba(0,0,0,.28),0 0 0 1px rgba(255,255,255,.035) inset;
  overflow:hidden;
  transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease;
}
.footer-qr-wrap::before{
  content:"";
  position:absolute;
  top:0;
  right:18px;
  width:42px;
  height:3px;
  border-radius:0 0 4px 4px;
  background:#ff711c;
  box-shadow:0 0 16px rgba(255,113,28,.55);
}
.footer-qr-wrap::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(120deg,transparent 24%,rgba(255,255,255,.08) 47%,transparent 68%);
  transform:translateX(-145%);
  transition:transform .55s ease;
}
.footer-qr{
  width:112px;
  height:112px;
  display:block;
  object-fit:contain;
  padding:8px;
  background:#f7f8f8;
  border:0;
  border-radius:10px;
  box-shadow:0 7px 18px rgba(0,0,0,.22);
  filter:contrast(1.04);
}
@media (hover:hover) and (pointer:fine){
  .footer-qr-wrap:hover{
    transform:translateY(-4px);
    border-color:rgba(255,113,28,.9);
    box-shadow:0 18px 42px rgba(0,0,0,.34),0 0 24px rgba(255,113,28,.12);
  }
  .footer-qr-wrap:hover::after{transform:translateX(145%)}
}
html[dir="ltr"] .footer-qr-wrap::before{right:auto;left:18px;}
@media (max-width:768px){
  .footer-qr-wrap{margin:18px auto 0;padding:7px;border-radius:14px;}
  .footer-qr{width:104px;height:104px;padding:7px;}
}
@media (prefers-reduced-motion:reduce){
  .footer-qr-wrap,.footer-qr-wrap::after{transition:none;}
}

/* V192 — Mobile Arabic footer: align QR and contact details neatly to the right across all pages */
@media (max-width:768px){
  html[dir="rtl"] .footer .footer-brand{
    text-align:right;
  }
  html[dir="rtl"] .footer .footer-qr-wrap{
    margin:18px 0 0 auto;
  }
  html[dir="rtl"] .footer .footer-grid > div:nth-child(4){
    text-align:right;
  }
  html[dir="rtl"] .footer .footer-grid > div:nth-child(4) h4{
    margin-left:auto;
    margin-right:0;
  }
  html[dir="rtl"] .footer .footer-contact-line{
    display:flex;
    justify-content:flex-start;
    width:100%;
    text-align:right;
  }
  html[dir="rtl"] .footer .footer-contact-link{
    margin-left:auto;
    margin-right:0;
  }
  html[dir="rtl"] .footer .footer-address-link{
    text-align:right;
  }
  html[dir="rtl"] .footer .socials{
    justify-content:flex-start;
  }
}

/* V193 — Mobile English footer: keep QR card aligned to the left across all pages */
@media (max-width:768px){
  html[dir="ltr"] .footer .footer-qr-wrap{
    margin:18px auto 0 0;
  }
}

/* V235 — Global floating contact shortcuts: WhatsApp / Phone / Location */
.gs-floating-contact{
  position:fixed;
  left:22px;
  bottom:112px;
  z-index:9998;
  display:flex;
  flex-direction:column;
  gap:12px;
  align-items:center;
}
.gs-floating-contact__link{
  width:58px;
  height:58px;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:#fff;
  text-decoration:none;
  font-size:24px;
  line-height:1;
  border:4px solid rgba(255,255,255,.28);
  box-shadow:0 9px 24px rgba(3,20,31,.24), 0 0 0 1px rgba(255,255,255,.08) inset;
  transition:transform .25s ease, box-shadow .25s ease, filter .25s ease;
  -webkit-tap-highlight-color:transparent;
}
.gs-floating-contact__link:hover,
.gs-floating-contact__link:focus-visible{
  transform:translateY(-4px) scale(1.06);
  box-shadow:0 14px 30px rgba(3,20,31,.30), 0 0 0 5px rgba(255,255,255,.13);
  filter:brightness(1.04);
  outline:none;
}
.gs-floating-contact__link--whatsapp{background:#20c96b;}
.gs-floating-contact__link--phone{background:#2589ea;}
.gs-floating-contact__link--location{background:#ff4e61;}
.gs-floating-contact__link i{pointer-events:none;}
@media (max-width:768px){
  .gs-floating-contact{
    left:12px;
    bottom:88px;
    gap:9px;
  }
  .gs-floating-contact__link{
    width:48px;
    height:48px;
    border-width:3px;
    font-size:20px;
  }
}
@media (prefers-reduced-motion:reduce){
  .gs-floating-contact__link{transition:none;}
}

/* V236 — Floating contact position + soft pulse */
.gs-floating-contact{
  bottom:52px;
}
.gs-floating-contact__link{
  animation:gsContactPulse 1.8s ease-in-out infinite;
}
.gs-floating-contact__link:nth-child(2){animation-delay:.22s;}
.gs-floating-contact__link:nth-child(3){animation-delay:.44s;}
@keyframes gsContactPulse{
  0%,100%{
    transform:scale(1);
    filter:brightness(1);
    box-shadow:0 9px 24px rgba(3,20,31,.24), 0 0 0 1px rgba(255,255,255,.08) inset;
  }
  50%{
    transform:scale(1.07);
    filter:brightness(1.12);
    box-shadow:0 12px 28px rgba(3,20,31,.28), 0 0 0 7px rgba(255,255,255,.12);
  }
}
.gs-floating-contact__link:hover,
.gs-floating-contact__link:focus-visible{
  animation-play-state:paused;
  transform:translateY(-4px) scale(1.09);
}
@media (max-width:768px){
  .gs-floating-contact{bottom:48px;}
}
@media (prefers-reduced-motion:reduce){
  .gs-floating-contact__link{animation:none;}
}


/* V237 — Floating contact hover notifications */
.gs-floating-contact__link{
  position:relative;
  overflow:visible;
}
.gs-floating-contact__link::after{
  content:attr(data-tooltip);
  position:absolute;
  left:calc(100% + 12px);
  top:50%;
  transform:translate(8px,-50%);
  min-width:max-content;
  max-width:240px;
  padding:9px 13px;
  border-radius:8px;
  background:#071a24;
  color:#fff;
  font-size:14px;
  font-weight:700;
  line-height:1.35;
  white-space:nowrap;
  box-shadow:0 8px 22px rgba(3,20,31,.26);
  border:1px solid rgba(255,255,255,.14);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .2s ease, transform .2s ease, visibility .2s ease;
  z-index:3;
}
.gs-floating-contact__link::before{
  content:"";
  position:absolute;
  left:calc(100% + 5px);
  top:50%;
  width:0;
  height:0;
  border-top:6px solid transparent;
  border-bottom:6px solid transparent;
  border-right:7px solid #071a24;
  transform:translate(8px,-50%);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .2s ease, transform .2s ease, visibility .2s ease;
  z-index:4;
}
.gs-floating-contact__link:hover::after,
.gs-floating-contact__link:focus-visible::after,
.gs-floating-contact__link:hover::before,
.gs-floating-contact__link:focus-visible::before{
  opacity:1;
  visibility:visible;
  transform:translate(0,-50%);
}
html[dir="rtl"] .gs-floating-contact__link::after,
html[lang^="ar"] .gs-floating-contact__link::after{
  direction:rtl;
  text-align:right;
}
@media (max-width:768px){
  .gs-floating-contact__link::after{
    left:calc(100% + 9px);
    font-size:12px;
    padding:7px 10px;
    max-width:190px;
  }
  .gs-floating-contact__link::before{
    left:calc(100% + 3px);
  }
}
@media (prefers-reduced-motion:reduce){
  .gs-floating-contact__link::after,
  .gs-floating-contact__link::before{transition:none;}
}

/* V238 — Global back-to-top button with soft pulse */
.gs-back-to-top{
  position:fixed;
  right:22px;
  bottom:52px;
  z-index:9998;
  width:58px;
  height:58px;
  border:0;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#ff4e61;
  color:#fff;
  font-size:23px;
  line-height:1;
  cursor:pointer;
  box-shadow:0 9px 24px rgba(3,20,31,.24),0 0 0 1px rgba(255,255,255,.08) inset;
  opacity:0;
  visibility:hidden;
  transform:translateY(12px) scale(.92);
  transition:opacity .25s ease,visibility .25s ease,transform .25s ease,box-shadow .25s ease,filter .25s ease;
  -webkit-tap-highlight-color:transparent;
}
.gs-back-to-top.is-visible{
  opacity:1;
  visibility:visible;
  transform:translateY(0) scale(1);
  animation:gsBackTopPulse 1.8s ease-in-out infinite;
}
.gs-back-to-top:hover,
.gs-back-to-top:focus-visible{
  animation-play-state:paused;
  transform:translateY(-4px) scale(1.08);
  box-shadow:0 14px 30px rgba(3,20,31,.30),0 0 0 6px rgba(255,78,97,.18);
  filter:brightness(1.08);
  outline:none;
}
.gs-back-to-top i{pointer-events:none;}
@keyframes gsBackTopPulse{
  0%,100%{box-shadow:0 9px 24px rgba(3,20,31,.24),0 0 0 1px rgba(255,255,255,.08) inset;filter:brightness(1);}
  50%{box-shadow:0 12px 28px rgba(3,20,31,.28),0 0 0 8px rgba(255,78,97,.20);filter:brightness(1.12);}
}
@media (max-width:768px){
  .gs-back-to-top{
    right:12px;
    bottom:48px;
    width:48px;
    height:48px;
    font-size:20px;
  }
}
@media (prefers-reduced-motion:reduce){
  .gs-back-to-top,
  .gs-back-to-top.is-visible{animation:none;transition:none;}
}

/* Hide floating phone and location buttons only */
.gs-floating-contact__link--phone,
.gs-floating-contact__link--location{
    display:none !important;
}