:root{
  --bg:#0b1d2c;
  --card:#0f2538;
  --muted:#a8b3bf;
  --text:#f2f4f7;
  --accent:#f9a33c;
  --accent-2:#ffd08a;
  --radius:14px;
  --client:#fff;
  --shadow:0 10px 30px rgba(0,0,0,.25);
}

/* ------- Resets & Base ------- */
*,
*::before,
*::after { box-sizing: border-box; }

html, body{
  margin:0;
  padding:0;
  scroll-behavior:smooth;
  color:var(--text);
  background-color:var(--bg); /* fallback color */
  /* خلفية بصورة + شفافية مع fallback */
  background-image:
    linear-gradient(rgba(11,29,44,.8), rgba(11,29,44,.8)),
    image-set(
      url("../img/bg2.webp") type("image/webp") 1x,
      url("../img/bg2.jpg") type("image/jpeg") 1x
    );
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;
  background-attachment: fixed;
  /* background-attachment: fixed;*/

}

body{
  font-family:"Cairo","Poppins",system-ui,Arial,sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--accent); color:#1a1a1a; }

.container{ max-width:1200px; margin:0 auto; padding:0 16px; }




    /* ====== فيديو الهيرو ====== */
    .video-hero{position:relative;min-height:54vh;border-radius:18px;overflow:hidden;background:#000;box-shadow:var(--shadow);margin-top:28px}
    .video-hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.6) saturate(1.1)}
    .video-hero .overlay{position:relative;z-index:2;height:100%;display:flex;align-items:center;justify-content:center;text-align:center;padding:24px}
    .video-hero h2{font-size:clamp(1.6rem,3vw,2.2rem);margin:.2rem 0}
    .video-hero p{color:#cfd8e3;opacity:.95;margin:.2rem 0 1rem}
    .play-pill{display:inline-flex;align-items:center;gap:10px;background:var(--accent);color:#1a1a1a;padding:.85rem 1.2rem;border-radius:999px;font-weight:800;cursor:pointer;border:0;box-shadow:var(--shadow);transition:.2s}
    .play-pill:hover{transform:translateY(-2px)}

/* ------- Buttons & Badges ------- */
.btn{
  display:inline-block;
  padding:.9rem 1.2rem;
  border-radius:999px;
  background:var(--accent);
  color:#1a1a1a;
  font-weight:700;
  border:0;
  cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease;
  touch-action:manipulation;
}
.btn:hover{ transform:translateY(-1px); box-shadow:var(--shadow); }
.btn:focus-visible{
  outline:2px solid var(--accent-2);
  outline-offset:3px;
}

.btn-ghost{
  background:transparent;
  border:1px solid var(--accent);
  color:var(--accent);
}
.btn-ghost:hover{ background:rgba(249,163,60,.1); }

.tag{
  display:inline-block;
  background:rgba(249,163,60,.12);
  color:var(--accent);
  padding:.2rem .6rem;
  border-radius:999px;
  font-size:.8rem;
}
.muted{ color:var(--muted); }

/* ------- Header & Nav ------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(11,29,44,.75);
  border-bottom:1px solid rgba(255,255,255,.06);
  backdrop-filter:blur(8px);
}
@supports not ((backdrop-filter: blur(8px))){
  .site-header{ background:rgba(11,29,44,.92); }
}
.site-header .nav{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; min-height:68px;
}
.logo img{ height:77px; }

.nav-links{ display:flex; gap:14px; align-items:center; }
.nav-links a{
  padding:.6rem .8rem; border-radius:10px; color:var(--text); opacity:.9;
}
.nav-links a:hover,
.nav-links a.active{ background:rgba(255,255,255,.06); }
.nav-links a:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px;
}

.header-actions{ display:flex; gap:10px; align-items:center; }
.nav-toggle{
  display:none; background:transparent; border:0; color:var(--text); font-size:1.3rem;
}

/* ------- Hero ------- */
.hero{
  position:relative; min-height:82vh;
  display:grid; place-items:center; padding:48px 0; overflow:hidden;
}
.hero::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(1200px 600px at 80% -10%, rgba(249,163,60,.2), transparent);
  pointer-events:none;
}
.hero .inner{
  display:grid; grid-template-columns:1.15fr .85fr; gap:36px; align-items:center;
}
.hero .media{ border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); background:#000; }
.hero h1{ font-size:clamp(1.9rem,3.3vw,3.4rem); margin:.4rem 0 .6rem; }
.hero p{ color:var(--muted); font-size:clamp(1rem,1.6vw,1.2rem); }
.hero .cta{ margin-top:1rem; display:flex; gap:12px; flex-wrap:wrap; }

/* ------- Sections ------- */
.section{ padding:64px 0; }
.section .title{ font-size:clamp(1.4rem,2.4vw,2rem); margin:0 0 12px; }
.section .lead{ color:var(--muted); margin:0 0 28px; }

/* Progressive rendering for long pages (اختياري) */
@supports (content-visibility:auto){
  .section{ content-visibility:auto; contain-intrinsic-size: 600px; }
}

/* ------- About cards ------- */
.about-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.card{
  background:var(--card);
  border:1px solid rgba(255,255,255,.06);
  border-radius:var(--radius);
  padding:22px; box-shadow:var(--shadow);
}
.card h3{ margin:.2rem 0 .4rem; }
.card p{ color:var(--muted); }

/* ------- Services ------- */
.services{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.service{
  background:var(--card);
  border:1px solid rgba(255,255,255,.06);
  border-radius:var(--radius);
  padding:22px; transition:transform .2s ease, box-shadow .2s ease;
}
.service i{ font-size:28px; color:var(--accent); }
.service:hover{ transform:translateY(-3px); box-shadow:var(--shadow); }

/* ------- Portfolio grid ------- */
.grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.grid .item{
  position:relative; border-radius:18px; overflow:hidden; background:#000;
  border:1px solid rgba(255,255,255,.06);
}
.grid .item img{ aspect-ratio:16/10; object-fit:cover; opacity:.9; transition:transform .25s, opacity .25s; }
.grid .item:hover img{ transform:scale(1.03); opacity:1; }
.grid .item .cap{
  position:absolute; left:12px; bottom:12px;
  background:rgba(0,0,0,.55); color:#fff; padding:.35rem .6rem;
  border-radius:999px; font-size:.78rem;
}

/* ------- Clients slider ------- */

/* ======= Clients Slider (عملاؤنا) ======= */

.clients-section{
  padding:64px 0;
  text-align:center;
  overflow:hidden;
  position:relative;
}

.clients-wrapper{
  position:relative;
  width:100%;
  overflow:hidden;
  /* تدرج خفيف من الطرفين عشان الشكل */
  mask-image:linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
  -webkit-mask-image:linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
}

.clients-track{
  display:flex;
  align-items:center;
  gap:28px;
  width:max-content;
  animation:clientsScrollLTR 30s linear infinite;
  will-change:transform;
}

.client-logo{
  flex:0 0 auto;
  min-width:110px;
  min-height:60px;
  background:var(--client);
  border:1px solid rgba(255,255,255,.06);
  border-radius:var(--radius);
  padding:16px 20px;
  box-shadow:var(--shadow);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:transform .2s ease, box-shadow .2s ease;
}

.client-logo1{
  flex:0 0 auto;
  min-width:110px;
  min-height:60px;
  background:transparent;
  border:1px solid rgba(255,255,255,.06);
  border-radius:var(--radius);
  padding:16px 20px;
  box-shadow:var(--shadow);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:transform .2s ease, box-shadow .2s ease;
}
.client-logo img{
  max-height:74px;
  max-width:170px;
  width:auto;
  height:auto;
  object-fit:contain;
  filter:grayscale(100%) contrast(120%) brightness(.9);
  opacity:.8;
  transition:filter .2s, opacity .2s;
}
.client-logo:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 40px rgba(0,0,0,.5);
}
.client-logo:hover img{
  filter:none;
  opacity:1;
}

.clients-note{
  color:var(--muted);
  font-size:.9rem;
  line-height:1.6;
  max-width:600px;
  margin:28px auto 0;
}

/* الحركة الافتراضية (للانجليزي LTR: تتحرك من اليمين لليسار) */
@keyframes clientsScrollLTR {
  0%   { transform:translateX(0); }
  100% { transform:translateX(-50%); }
}

/* الحركة المعاكسة (للعربي RTL: تتحرك من اليسار لليمين) */
@keyframes clientsScrollRTL {
  0%   { transform:translateX(0); }
  100% { transform:translateX(50%); }
}

/* سرعة أعلى في الشاشات الصغيرة (عشان ما يبين بطيء زيادة) */
@media(max-width:768px){
  .clients-track{
    gap:20px;
    animation-duration:20s;
  }
  .client-logo{
    min-width:90px;
    min-height:54px;
    padding:14px 16px;
    border-radius:12px;
  }
  .client-logo img{
    max-height:36px;
    max-width:110px;
  }
}

/* (اختياري) إيقاف الحركة عند الـ hover على الكمبيوتر */
@media (hover:hover) and (pointer:fine){
  .clients-wrapper:hover .clients-track{
    animation-play-state:paused;
  }
}

/* احترام تقليل الحركة */
@media (prefers-reduced-motion: reduce){
  .clients-track{ animation:none !important; }
  *{ transition:none !important; }
}


/* تقليل الحركة للمستخدمين الذين يفضّلون ذلك */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}

/* ------- Contact form ------- */
.form{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form .full{ grid-column:1 / -1; }
.input, textarea{
  width:100%; padding:14px;
  border-radius:12px; border:1px solid rgba(255,255,255,.08);
  background:#0a1a28; color:var(--text);
}
textarea{ min-height:140px; resize:vertical; }

/* ------- Filters (المعرض/الصور) ------- */
.filters{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:16px; }
.filter-btn{
  padding:.5rem .9rem; border:1px solid rgba(255,255,255,.16);
  border-radius:999px; background:transparent; color:var(--text); cursor:pointer;
  transition:background-color .2s, border-color .2s, transform .2s;
}
.filter-btn:hover{ transform:translateY(-1px); }
.filter-btn.active{ background:var(--accent); color:#1a1a1a; border-color:var(--accent); }

/* ------- Footer ------- */
.site-footer{
  padding:28px 0;
  border-top:1px solid rgba(255,255,255,.06);
  color:var(--muted);
}

/* ------- Mobile / Responsive ------- */
@media (max-width: 992px){
  .hero .inner{ grid-template-columns:1fr; }
  .services{ grid-template-columns:repeat(2,1fr); }
  .about-cards{ grid-template-columns:repeat(2,1fr); }
  .grid{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width: 640px){
  .nav-toggle{ display:block; }
  .nav-links{
    position:fixed; inset:68px 0 auto 0;
    background:rgba(11,29,44,.98);
    flex-direction:column; padding:12px; display:none; z-index:120;
    border-bottom:1px solid rgba(255,255,255,.06);
  }
  .nav-links.open{ display:flex; }
  .services{ grid-template-columns:1fr; }
  .about-cards{ grid-template-columns:1fr; }
  .grid{ grid-template-columns:1fr; }
  .form{ grid-template-columns:1fr; }
}

/* ------- RTL tweaks ------- */
html[dir="rtl"] .nav-links a{ line-height:1; }
html[dir="rtl"] .hero .inner{ direction:rtl; }



html[dir="rtl"] .clients-track {
  transform-origin: center;
  animation-direction: normal;
  transform: scaleX(-1);
}
html[dir="rtl"] .clients-track .client-logo {
  transform: scaleX(1);
}

/* ------- A11y: Skip link ------- */
.skip-link{
  position:absolute; inset-inline-start:8px; inset-block-start:-50px;
  background:var(--accent); color:#1a1a1a; padding:.6rem .9rem; border-radius:8px;
  transition:transform .2s; transform:translateY(-10px);
}
.skip-link:focus{ inset-block-start:8px; transform:none; outline:2px solid #000; outline-offset:2px; }