@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Tajawal:wght@400;500;700;800;900&display=swap');

:root{
  --bg:#070708;
  --surface:#111114;
  --surface2:#18181d;
  --text:#f6f6f6;
  --muted:#a8a8ad;
  --gold:#ffc107;
  --gold2:#d89d00;
  --border:rgba(255,255,255,.10);
  --soft:rgba(255,255,255,.055);
  --shadow:0 30px 100px rgba(0,0,0,.55);
  --radius:26px;
  --font-ar:"Tajawal",system-ui,sans-serif;
  --font-en:"Inter",system-ui,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-ar);background:var(--bg);color:var(--text);overflow-x:hidden}
html[lang="en"] body{font-family:var(--font-en)}
a{text-decoration:none;color:inherit}
button{font:inherit}

.loader{position:fixed;inset:0;z-index:9999;background:var(--bg);display:grid;place-items:center;transition:.6s}
.loader.hide{opacity:0;visibility:hidden}
.loader-logo{font:900 72px var(--font-en);color:var(--gold)}
.loader span{width:180px;height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent);animation:load 1.2s infinite}
@keyframes load{0%,100%{transform:scaleX(.25);opacity:.4}50%{transform:scaleX(1);opacity:1}}

.navbar{position:fixed;top:0;left:0;right:0;z-index:1000;height:84px;padding:0 clamp(20px,5vw,76px);display:flex;align-items:center;justify-content:space-between;background:rgba(7,7,8,.68);border-bottom:1px solid var(--border);backdrop-filter:blur(18px)}
.brand{display:flex;align-items:center;gap:12px;min-width:170px}
.brand img{width:44px;height:44px;object-fit:contain}
.brand strong{display:none;color:var(--gold)}
.nav-links{display:flex;align-items:center;gap:clamp(18px,3vw,42px)}
.nav-links a{color:var(--muted);font-weight:800;font-size:.96rem;transition:.2s}
.nav-links a:hover,.nav-links a.active{color:var(--gold)}
.nav-tools{display:flex;align-items:center;gap:14px;min-width:150px;justify-content:flex-end}
#langBtn,#menuBtn{border:0;background:transparent;color:var(--gold);font-weight:900;cursor:pointer}
#menuBtn{display:none;width:34px}
#menuBtn span{display:block;height:2px;background:var(--text);margin:8px 0}

.hero{min-height:100vh;position:relative;padding:130px clamp(20px,6vw,95px) 36px;overflow:hidden;display:flex;flex-direction:column;justify-content:center}
.hero-bg{position:absolute;inset:0;background:radial-gradient(circle at 78% 30%,rgba(255,193,7,.12),transparent 25%),radial-gradient(circle at 20% 70%,rgba(255,255,255,.06),transparent 30%),var(--bg)}
.hero-bg:after{content:"";position:absolute;inset:0;opacity:.11;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")}
.hero-grid{position:relative;display:grid;grid-template-columns:minmax(320px,.9fr) minmax(420px,1.1fr);gap:clamp(36px,6vw,90px);align-items:center}
.overline,.section-title p{color:var(--gold);text-transform:uppercase;letter-spacing:.14em;font:900 .82rem var(--font-en);margin-bottom:14px}
.hero h1{font:900 clamp(4rem,10vw,10rem)/.82 var(--font-en);letter-spacing:-.085em;margin-bottom:28px}
.hero-role{font-size:clamp(1.25rem,2vw,1.75rem);font-weight:800;color:var(--muted);min-height:42px;transition:.25s}
.hero-desc{max-width:620px;color:var(--muted);font-size:1.14rem;line-height:1.9;margin-bottom:30px}
.hero-actions,.contact-actions{display:flex;gap:14px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:14px 24px;border-radius:999px;font-weight:900;border:1px solid var(--border);transition:.25s}
.btn-gold{background:var(--gold);color:#080808;border-color:var(--gold)}
.btn-gold:hover{background:var(--gold2);transform:translateY(-2px)}
.btn-line{background:rgba(255,255,255,.03);color:var(--text)}
.btn-line:hover{border-color:var(--gold);color:var(--gold)}
.hero-showcase{display:grid;grid-template-columns:1fr .75fr;gap:18px;min-height:560px}
.showcase-stack{display:grid;gap:18px}
.showcase-card{position:relative;overflow:hidden;border-radius:32px;background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow)}
.showcase-card.tall{height:560px}
.showcase-card:not(.tall){height:271px}
.showcase-card .media-slot,.showcase-card .media-wrap{width:100%;height:100%}
.showcase-card img,.showcase-card video{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(1.03) contrast(1.03)}
.showcase-card:after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.55),transparent 50%)}
.showcase-card span{position:absolute;z-index:2;bottom:22px;inset-inline-start:22px;font:900 .9rem var(--font-en);color:#fff}
.hero-footer{position:relative;margin-top:48px;padding-top:22px;border-top:1px solid var(--border);display:flex;gap:22px;justify-content:space-between;color:var(--muted);font:700 .9rem var(--font-en);flex-wrap:wrap}

.section{padding:clamp(86px,9vw,150px) clamp(20px,6vw,95px)}
.section-title{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:42px}
.section-title h2{font-size:clamp(2rem,5vw,5rem);line-height:1.05;font-weight:900;letter-spacing:-.045em;max-width:900px}
.about-panel{display:grid;grid-template-columns:1.2fr .8fr;gap:22px;align-items:stretch}
.about-panel>p{background:linear-gradient(145deg,var(--soft),rgba(255,255,255,.02));border:1px solid var(--border);border-radius:var(--radius);padding:clamp(28px,5vw,62px);font-size:clamp(1.35rem,2.3vw,2.35rem);line-height:1.55;font-weight:800}
.stats{display:grid;gap:18px}
.stats div{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:28px}
.stats strong{font:900 3rem var(--font-en);color:var(--gold);display:block}
.stats span{color:var(--muted);font-weight:800}

.service-grid{display:grid;grid-template-columns:repeat(4,minmax(180px,1fr));gap:16px}
.service-card{min-height:210px;background:var(--surface);border:1px solid var(--border);border-radius:24px;padding:24px;display:flex;flex-direction:column;justify-content:space-between;transition:.25s}
.service-card:hover{transform:translateY(-6px);border-color:rgba(255,193,7,.6)}
.service-card small{font:900 .82rem var(--font-en);color:var(--gold)}
.service-card h3{font-size:1.25rem}
.service-card p{color:var(--muted);line-height:1.65}

.filters{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:34px}
.filter-btn{border:1px solid var(--border);background:var(--surface);color:var(--muted);padding:11px 18px;border-radius:999px;cursor:pointer;font-weight:900;transition:.2s}
.filter-btn.active,.filter-btn:hover{background:var(--gold);border-color:var(--gold);color:#080808}

.work-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:18px}
.work-card{grid-column:span 4;min-height:520px;position:relative;border:1px solid var(--border);border-radius:30px;overflow:hidden;background:var(--surface);cursor:pointer;transition:.3s;box-shadow:0 18px 60px rgba(0,0,0,.22)}
.work-card:nth-child(1),.work-card:nth-child(6){grid-column:span 8}
.work-card:hover{transform:translateY(-7px);border-color:rgba(255,193,7,.55)}
.work-media{position:absolute;inset:0}
.work-media img,.work-media video{width:100%;height:100%;object-fit:cover;display:block}
.work-card:after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.88),rgba(0,0,0,.14),transparent)}
.work-content{position:absolute;z-index:2;left:24px;right:24px;bottom:24px}
html[dir="rtl"] .work-content{text-align:right}
.work-content span{color:var(--gold);font-weight:900}
.work-content h3{font-size:clamp(1.45rem,2.5vw,2.4rem);margin:8px 0}
.work-content p{color:rgba(255,255,255,.75);line-height:1.65;max-width:680px}
.work-count{position:absolute;z-index:3;top:18px;inset-inline-end:18px;background:rgba(0,0,0,.52);border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:8px 12px;color:#fff;font:800 .82rem var(--font-en)}

.media-fallback{width:100%;height:100%;min-height:220px;display:grid;place-items:center;text-align:center;background:radial-gradient(circle at 50% 35%,rgba(255,193,7,.12),transparent 32%),var(--surface2);color:var(--gold);font-weight:900;text-transform:uppercase;letter-spacing:.08em}
.media-fallback small{display:block;color:var(--muted);letter-spacing:0;text-transform:none;margin-top:8px}

.client-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}
.client-card{min-height:130px;border:1px solid var(--border);background:linear-gradient(145deg,var(--soft),rgba(255,255,255,.02));border-radius:24px;padding:22px;display:flex;align-items:end;justify-content:space-between}
.client-card strong{font-size:1.15rem}
.client-card span{color:var(--gold);font:900 1rem var(--font-en)}
.contact-card{max-width:1100px;margin:auto;text-align:center;border:1px solid var(--border);border-radius:36px;background:linear-gradient(145deg,var(--soft),rgba(255,255,255,.018));padding:clamp(36px,7vw,90px);box-shadow:var(--shadow)}
.contact-card h2{font-size:clamp(2rem,6vw,5.6rem);line-height:1.05;margin-bottom:30px;font-weight:900;letter-spacing:-.05em}
.contact-actions{justify-content:center}
.contact-info{margin-top:28px;display:flex;gap:20px;justify-content:center;flex-wrap:wrap;color:var(--muted);font-weight:800}
.footer{border-top:1px solid var(--border);padding:26px clamp(20px,6vw,95px);display:flex;justify-content:space-between;color:var(--muted);font:700 .9rem var(--font-en)}

.modal,.lightbox{position:fixed;inset:0;z-index:3000;display:none}
.modal.active,.lightbox.active{display:block}
.modal-bg,.lightbox-bg{position:absolute;inset:0;background:rgba(0,0,0,.78);backdrop-filter:blur(16px)}
.modal-box{position:absolute;inset:5vh 5vw;background:var(--surface);border:1px solid var(--border);border-radius:34px;overflow:hidden;box-shadow:var(--shadow);display:grid;grid-template-columns:360px 1fr}
.close{position:absolute;z-index:10;top:22px;inset-inline-start:22px;width:48px;height:48px;border-radius:50%;border:1px solid var(--border);background:rgba(255,255,255,.06);color:#fff;font-size:1.8rem;cursor:pointer}
.modal-info{padding:92px 30px 30px;border-inline-end:1px solid var(--border);display:flex;flex-direction:column;justify-content:center}
.modal-info p:first-child{color:var(--gold);font-weight:900}
.modal-info h3{font-size:2.25rem;margin:14px 0}
.modal-info span{color:var(--muted);font-weight:800;margin-bottom:20px}
.modal-info p:last-child{color:var(--muted);line-height:1.8}
.modal-gallery{padding:24px;overflow:auto;display:grid;grid-template-columns:repeat(3,minmax(150px,1fr));gap:14px;align-content:start}
.thumb{aspect-ratio:4/5;border:1px solid var(--border);border-radius:20px;overflow:hidden;background:#050505;cursor:pointer;position:relative;padding:0;transition:.2s}
.thumb:hover{transform:translateY(-4px);border-color:var(--gold)}
.thumb img,.thumb video{width:100%;height:100%;object-fit:cover;display:block}
.play{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(transparent,rgba(0,0,0,.45))}
.play span{width:56px;height:56px;border-radius:50%;background:var(--gold);color:#000;display:grid;place-items:center;font-weight:900}

.lightbox{z-index:4000}
.light-close{top:28px;inset-inline-start:28px}
.light-stage{position:absolute;inset:5vh 8vw;display:grid;grid-template-rows:auto 1fr;gap:16px}
.light-head{display:flex;justify-content:space-between;align-items:center;color:#fff}
.light-head h3{font-size:1.15rem}
.light-head span{color:var(--gold);font:900 1rem var(--font-en)}
.light-media{display:grid;place-items:center;border:1px solid var(--border);border-radius:28px;background:rgba(255,255,255,.04);overflow:hidden;min-height:0}
.light-media img,.light-media video{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.light-media video{width:min(100%,1200px)}
.arrow{position:absolute;z-index:10;top:50%;transform:translateY(-50%);width:54px;height:54px;border-radius:18px;border:1px solid var(--border);background:rgba(255,255,255,.06);color:#fff;font-size:1.4rem;cursor:pointer}
.prev{inset-inline-start:28px}.next{inset-inline-end:28px}

.reveal{opacity:0;transform:translateY(34px);transition:.7s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1;transform:none}

@media(max-width:1100px){
  .hero-grid{grid-template-columns:1fr}
  .hero-showcase{min-height:auto}
  .work-card,.work-card:nth-child(1),.work-card:nth-child(6){grid-column:span 6}
  .service-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:860px){
  .navbar{height:74px}
  #menuBtn{display:block}
  .nav-links{position:absolute;top:74px;left:16px;right:16px;display:none;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:10px}
  .nav-links.open{display:flex}
  .nav-links a{padding:14px}
  .about-panel{grid-template-columns:1fr}
  .work-card,.work-card:nth-child(1),.work-card:nth-child(6){grid-column:span 12;min-height:430px}
  .modal-box{inset:2vh 3vw;grid-template-columns:1fr;overflow:auto}
  .modal-info{border-inline-end:0;border-bottom:1px solid var(--border)}
  .modal-gallery{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
  .hero{padding-inline:18px}
  .hero h1{font-size:4rem}
  .hero-showcase{grid-template-columns:1fr}
  .showcase-card.tall,.showcase-card:not(.tall){height:320px}
  .hero-footer{display:none}
  .section{padding-inline:18px}
  .section-title{display:block}
  .service-grid,.modal-gallery{grid-template-columns:1fr}
  .footer{display:grid;gap:10px;text-align:center}
  .light-stage{inset:8vh 4vw}
  .arrow{top:auto;bottom:22px;transform:none}
}


/* =========================================================
   Media Scale & Loading Optimization
   This keeps large files visually controlled without thumbnails.
   ========================================================= */

.showcase-card,
.work-card,
.thumb,
.gallery-thumb,
.clip-thumb {
  background: #08080a;
  overflow: hidden;
}

.showcase-card img,
.showcase-card video,
.work-media img,
.work-media video,
.thumb img,
.thumb video,
.gallery-thumb img,
.gallery-thumb video,
.clip-thumb img,
.clip-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.work-card {
  min-height: 420px;
  max-height: 620px;
}

.work-media {
  width: 100%;
  height: 100%;
}

.modal-gallery,
.project-gallery {
  align-content: start;
}

.thumb,
.gallery-thumb {
  aspect-ratio: 4 / 5;
  max-height: 360px;
}

.light-media,
.lightbox-media {
  max-height: 82vh;
}

.light-media img,
.lightbox-media img {
  max-width: 100%;
  max-height: 82vh;
  width: auto;
  height: auto;
  object-fit: contain;
  object-position: center;
}

.light-media video,
.lightbox-media video {
  width: min(100%, 1100px);
  max-height: 82vh;
  object-fit: contain;
  object-position: center;
}

@media (min-width: 900px) {
  .modal-gallery,
  .project-gallery {
    grid-template-columns: repeat(3, minmax(150px, 1fr));
  }

  .thumb,
  .gallery-thumb {
    max-height: 340px;
  }
}

@media (max-width: 700px) {
  .work-card {
    min-height: 360px;
  }

  .thumb,
  .gallery-thumb {
    max-height: 300px;
  }

  .light-media img,
  .lightbox-media img,
  .light-media video,
  .lightbox-media video {
    max-height: 76vh;
  }
}


/* =========================================================
   Logo Size Enhancement
   ========================================================= */

.brand img {
  width: 68px !important;
  height: 68px !important;
}

.navbar {
  height: 96px !important;
}

.hero {
  padding-top: 150px !important;
}

.hero-logo-main {
  width: clamp(150px, 15vw, 240px);
  height: clamp(150px, 15vw, 240px);
  margin-bottom: 26px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

html[dir="rtl"] .hero-logo-main {
  justify-content: flex-start;
}

.hero-logo-main img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 22px 55px rgba(255, 193, 7, .16));
}

.loader-logo {
  font-size: 7rem !important;
}

@media (max-width: 860px) {
  .navbar {
    height: 86px !important;
  }

  .nav-links {
    top: 86px !important;
  }

  .brand img {
    width: 58px !important;
    height: 58px !important;
  }

  .hero-logo-main {
    width: 140px;
    height: 140px;
    margin-inline: auto;
    justify-content: center;
  }

  .hero-copy {
    text-align: center;
  }

  .hero-actions {
    justify-content: center;
  }
}

@media (max-width: 560px) {
  .hero-logo-main {
    width: 120px;
    height: 120px;
  }

  .brand img {
    width: 52px !important;
    height: 52px !important;
  }
}


/* =========================================================
   Loader Real Logo
   ========================================================= */

.loader {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 34px;
}

.loader-logo {
  width: clamp(170px, 22vw, 320px) !important;
  height: clamp(170px, 22vw, 320px) !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  font-size: 0 !important;
  letter-spacing: 0 !important;
  color: transparent !important;
}

.loader-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 24px 70px rgba(255, 193, 7, .25));
  animation: loaderLogoIn 1.4s ease both;
}

@keyframes loaderLogoIn {
  0% {
    opacity: 0;
    transform: scale(.88);
    filter: blur(8px) drop-shadow(0 24px 70px rgba(255, 193, 7, .10));
  }

  100% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0) drop-shadow(0 24px 70px rgba(255, 193, 7, .25));
  }
}

.loader span {
  margin-top: 8px;
}

@media (max-width: 560px) {
  .loader-logo {
    width: 190px !important;
    height: 190px !important;
  }
}


/* =========================================================
   Navbar Logo Visibility Enhancement
   ========================================================= */

.navbar {
  height: 112px !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

.brand {
  min-width: 190px !important;
  display: flex !important;
  align-items: center !important;
}

.brand img {
  width: 86px !important;
  height: 86px !important;
  object-fit: contain !important;
  opacity: 1 !important;
  transform: scale(1.08);
  filter:
    brightness(1.35)
    contrast(1.15)
    drop-shadow(0 0 18px rgba(255, 193, 7, .28))
    drop-shadow(0 10px 24px rgba(0, 0, 0, .45));
}

.hero {
  padding-top: 175px !important;
}

@media (max-width: 860px) {
  .navbar {
    height: 96px !important;
  }

  .nav-links {
    top: 96px !important;
  }

  .brand img {
    width: 72px !important;
    height: 72px !important;
  }

  .hero {
    padding-top: 140px !important;
  }
}

@media (max-width: 560px) {
  .brand {
    min-width: 110px !important;
  }

  .brand img {
    width: 62px !important;
    height: 62px !important;
  }

  .navbar {
    height: 86px !important;
  }

  .nav-links {
    top: 86px !important;
  }
}


/* =========================================================
   FINAL 3 EDITS: Loader Logo + Navbar Logo + Remove Hero Logo
   ========================================================= */

/* Loader real logo instead of B */
.loader {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 34px !important;
}

.loader-logo {
  width: clamp(170px, 22vw, 320px) !important;
  height: clamp(170px, 22vw, 320px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0 !important;
  letter-spacing: 0 !important;
  color: transparent !important;
}

.loader-logo img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block !important;
  filter: drop-shadow(0 24px 70px rgba(255, 193, 7, .25));
  animation: loaderLogoIn 1.4s ease both;
}

@keyframes loaderLogoIn {
  0% {
    opacity: 0;
    transform: scale(.88);
    filter: blur(8px) drop-shadow(0 24px 70px rgba(255, 193, 7, .10));
  }
  100% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0) drop-shadow(0 24px 70px rgba(255, 193, 7, .25));
  }
}

/* Navbar logo bigger and clearer */
.navbar {
  height: 112px !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

.brand {
  min-width: 190px !important;
  display: flex !important;
  align-items: center !important;
}

.brand img {
  width: 86px !important;
  height: 86px !important;
  object-fit: contain !important;
  opacity: 1 !important;
  transform: scale(1.08);
  filter:
    brightness(1.35)
    contrast(1.15)
    drop-shadow(0 0 18px rgba(255, 193, 7, .28))
    drop-shadow(0 10px 24px rgba(0, 0, 0, .45));
}

/* Remove hero logo near the main name */
.hero-logo-main,
.hero-logo {
  display: none !important;
}

.hero {
  padding-top: 175px !important;
}

@media (max-width: 860px) {
  .navbar {
    height: 96px !important;
  }

  .nav-links {
    top: 96px !important;
  }

  .brand img {
    width: 72px !important;
    height: 72px !important;
  }

  .hero {
    padding-top: 140px !important;
  }
}

@media (max-width: 560px) {
  .loader-logo {
    width: 190px !important;
    height: 190px !important;
  }

  .brand {
    min-width: 110px !important;
  }

  .brand img {
    width: 62px !important;
    height: 62px !important;
  }

  .navbar {
    height: 86px !important;
  }

  .nav-links {
    top: 86px !important;
  }
}


/* =========================================================
   Autoplay Muted Video Preview Fix
   ========================================================= */

.work-media video,
.thumb video,
.showcase-card video,
.media-wrap video {
  background: #08080a;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.work-card:has(video) .work-media::after,
.thumb:has(video)::after,
.showcase-card:has(video)::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to top, rgba(0,0,0,.22), transparent 55%);
}

.light-media video,
.lightbox-media video {
  background: #000;
}


/* =========================================================
   Virtual Tour Capability Hint - no project file attached
   ========================================================= */

.service-card:nth-child(4) {
  position: relative;
  border-color: rgba(255, 193, 7, .32);
  background:
    radial-gradient(circle at 85% 18%, rgba(255, 193, 7, .10), transparent 34%),
    var(--surface);
}

.service-card:nth-child(4)::after {
  content: "Capability";
  position: absolute;
  top: 18px;
  inset-inline-end: 18px;
  padding: 5px 9px;
  border-radius: 999px;
  border: 1px solid rgba(255, 193, 7, .35);
  color: var(--gold);
  background: rgba(0,0,0,.28);
  font: 800 .68rem var(--font-en);
  letter-spacing: .04em;
}

html[lang="ar"] .service-card:nth-child(4)::after {
  content: "خدمة متاحة";
  font-family: var(--font-ar);
}


/* =========================================================
   FINAL SECTION TITLE FIX
   - Keep the previous (non Liquid Glass) style
   - Center the large section titles on screen
   - Hide the small yellow English section labels
   ========================================================= */

.section-title{
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  text-align:center !important;
  width:100% !important;
  margin-bottom:42px !important;
}

.section-title h2{
  width:100% !important;
  max-width:1100px !important;
  margin:0 auto !important;
  text-align:center !important;
}

/* Hide ABOUT / 01, SERVICES / 02, SELECTED WORK / 03, CLIENTS / 04 */
.section-title > p{
  display:none !important;
}

/* Keep the centered title correct in RTL and LTR */
html[dir="rtl"] .section-title,
html[dir="ltr"] .section-title{
  text-align:center !important;
}

/* Mobile */
@media(max-width:560px){
  .section-title{
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    text-align:center !important;
  }

  .section-title h2{
    text-align:center !important;
    margin-inline:auto !important;
  }
}