/* ——— القيم اللونية والهوية ——— */
:root{
  --c-primary:#11a09a;
  --c-secondary:#ffbf2e;
  --c-dark:#1a1a2e;
  --c-deep:#16213e;
  --c-royal:#0f3460;
  --c-accent:#e94560;
  --c-light:#f5f5f5;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Tajawal',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,sans-serif;
  background: linear-gradient(135deg, var(--c-dark), var(--c-royal));
  color:#fff;
}

/* ——— حاوية عامة ——— */
.nb-container{width:min(1200px,90vw);margin-inline:auto}

/* 🔹 الشريط العلوي */
.top-header {
    background: #16213e;
    border-bottom: 2px solid #ffffff;
    padding: 16px 69px;
    font-size: 14px;
}

.top-header a {
  text-decoration: none !important;
}


.top-header .social-nav {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: nowrap;
  margin: 0;
  padding: 0;
  list-style: none;
  gap: 15px; /* مسافة بين العناصر */
}

/* 🔹 أيقونات السوشيال */
.top-header .social-nav .social-link {
    width: 35px;
    height: 35px;
    border-radius: 50%;
display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 19px;
 transition: all 0.3s ease-in-out;}



/* ألوان حسب المنصة */
.top-header .social-link.twitter   { background: #1da1f2; } /* Twitter */
.top-header .social-link.facebook  { background: #1877f2; } /* Facebook */
.top-header .social-link.instagram { 
  background: radial-gradient(circle at 30% 107%, 
              #fdf497 0%, #fdf497 5%, 
              #fd5949 45%, #d6249f 60%, #285AEB 90%);
} /* Instagram */
.top-header .social-link.whatsapp  { background: #25d366; } /* WhatsApp */

/* تويتر */
.top-header .social-nav .twitter:hover {
    transform: scale(1.2) rotate(8deg);
    box-shadow: 0 0 11px 3px rgba(29, 161, 242, 0.5);
    background-color: #1da1f2;
}

/* فيسبوك */
.top-header .social-nav .facebook:hover {
    transform: scale(1.2) rotate(8deg);
    box-shadow: 0 0 11px 3px rgba(24, 119, 242, 0.5);
    background-color: #1877f2;
}

/* إنستغرام */
.top-header .social-nav .instagram:hover {
    transform: scale(1.2) rotate(8deg);
    box-shadow: 0 0 11px 3px rgba(225, 48, 108, 0.5);
    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
}

/* واتساب */
.top-header .social-nav .whatsapp:hover {
    transform: scale(1.2) rotate(8deg);
    box-shadow: 0 0 11px 3px rgba(37, 211, 102, 0.5);
    background-color: #25d366;
}


/* 🔹 معلومات الاتصال */
.top-header .social-nav .info {
    color: #ffffff;
    font-size: 17px;
    display: flex
;
    align-items: center;
    white-space: nowrap;
    gap: 10px;
    font-weight: 200;
}

.top-header .social-nav .info :hover
 {
    color: #6a85cc;
}



.top-header .social-nav .info i {
  margin-right: 5px;
  color: #00a89d;
}

.top-header .social-nav .info i:hover {
  color: #00a89d; /* اللون عند المرور بالماوس */
}

/* 🔹 الفاصل */
.top-header .social-nav .spaerator div {
  width: 1px;
  height: 18px;
  background: #ccc;
  margin: 0 8px;
}

/* 🔹 زر اللغة */
.top-header .social-nav {
    display: flex
;
    align-items: center;
    gap: 15px;
    margin-right: 75px;
}

.top-header .social-nav .lang-btn {
    margin-left: 25px;
    margin-right: auto;
    background: #11a09a;
    border-radius: 20px;
    padding: 5px 14px;
    font-size: 16px;
    text-decoration: none;
    color: #fff !important;
    transition: 0.3s;
    font-weight: bold;
}

.top-header .social-nav .lang-btn:hover {
    background: #16213e;
}


/* ——— Navbar ——— */
/* --- الشعار داخل النافبار --- */
.nb-container .logo img {
  height: 48px;   /* الحجم الأساسي */
  width: auto;
  object-fit: contain;
  max-width: 100%;
      background: #16213e;

}
.nb-container .log img
 {
    height: 85px;
    width: auto;
    object-fit: contain;
    max-width: 100%;
    background: #16213e;
}

/* في الموبايل */
@media (max-width: 900px) {
  .nb-container .logo img {
    height: 40px; /* أصغر للموبايل */
  }
}

/* --- الشعار داخل النافبار --- */


.nb-container .logo img {
    height: 85px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    transform-style: preserve-3d;
    transition: transform 0.5s;
    cursor: pointer;
}



.nb-nav{position:sticky;top:0;z-index:50;background:var(--c-deep);border-bottom:1px solid rgba(255,255,255,.06)}
.nb-nav .nb-container{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0}
.nb-brand{font-weight:800;color:var(--c-primary);font-size:22px}
.nb-links {
    display: flex
;
    gap: 22px;
    padding-top: 18px;
    padding-right: 42px;
    padding-bottom: 18px;
    padding-left: 42px;
    background: #16213e;
    border-radius: 46px;
    margin-left: -25px;
}
.nb-links a {    color: #fff;  text-decoration: none;    opacity: .9;    font-size: 17px;    font-weight: bold;}
.nb-links a:hover{color:var(--c-secondary)}
.nb-menu-btn{display:none;background:transparent;border:0;color:#fff;font-size:22px;cursor:pointer}
.nb-mobile{display:none;flex-direction:column;gap:10px;padding:10px 0;border-top:1px solid rgba(255,255,255,.06)}
.nb-mobile a{color:#fff;text-decoration:none;opacity:.9;padding:8px 0}
@media (max-width: 900px){
  .nb-links{display:none}
  .nb-menu-btn{display:block}
}

/* حاوية الزر وأيقونة البحث */
.nb-actions {
    display: flex
;
    align-items: center;
    gap: 10px;
    margin-left: -43px;
    background: #16213e;
    padding-top: 12px;
    padding-right: 20px;
    padding-bottom: 12px;
    padding-left: 20px;
    border-radius: 79px;
}

/* زر طلب تأسيس شركة */
.company-btn {
    background: #11a09a2e;
    color: #ffffff;
    padding: 9px 18px;
    border-radius: 21px;
    font-weight: bold;
    font-size: 14px;
    text-decoration: none;
    transition: 0.3s;
    border: 2px solid #119592;
}


.company-btn:hover {
    background: #119592;
    color: #ffffff;
    border: 2px solid #119592;
}

/* زر البحث */

.request-btn {
  background: #00a6a6;
  color: #fff;
  padding: 10px 18px;
  border: none;
  border-radius: 30px;
  cursor: pointer;
  font-weight: bold;
  transition: 0.3s;
}

.request-btn:hover {
  background: #008080;
  transform: scale(1.05);
}

.search-btn {
  background: transparent;
  border: none;
  font-size: 20px;
  cursor: pointer;
  margin-right: 10px; /* مسافة إضافية لو حاب تبعدها */
}


.search-btn:hover {
  color: #11a09a;
}

/* اجبر الروابط تبقى في سطر واحد داخل الحبة */
.nb-links{
  display:flex;
  flex-wrap: nowrap;          /* لا تلف */
  white-space: nowrap;        /* امنع لفّ النص */
  justify-content: center;    /* وسّط العناصر */
  gap: 18px;                  /* قلّل المسافات شوي */
  padding: 12px 24px;         /* قلّل البادينغ العرضي */
  flex: 1 1 auto;             /* اسمح للوسط يتمدّد */
  min-width: 0;               /* يمنع مشاكل الانكماش */
}

/* كل رابط ياخذ عرضه الطبيعي وما يتمطط */
.nb-links a{
  flex: 0 0 auto;
}

/* خلك ثابت: الشعار والزر ما ينكمشون */
.nb-actions,
.nb-container .log{
  flex: 0 0 auto;
}

/* خفّف المسافات العامة */
.nb-nav .nb-container{
  gap: 12px;
}

/* تحسين بسيط للشاشات المتوسطة */
@media (max-width: 1200px){
  .nb-links{ gap:14px; padding:10px 18px; }
  .nb-actions{ padding:10px 14px; }
}


/* ——— Hero ——— */
.hero{
  position:relative;min-height:72vh;display:grid;place-items:center;
  background: radial-gradient(1200px 600px at 50% 0, rgba(17,160,154,.2), transparent 60%);
  overflow:hidden;
}
.particles{position:absolute;inset:0;pointer-events:none}
.hero-inner{text-align:center;padding:80px 20px}
.hero-title {
    font-size: clamp(30px, 6vw, 56px);
    font-weight: 800;
    color: #fab519;
    letter-spacing: .5px;

  }.hero-sub {
    opacity: .9;
    margin: 10px 0 26px;
    font-size: 17px;
}
.hero-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ——— أزرار ——— */
.nb-btn{display:inline-block;text-decoration:none;border-radius:12px;padding:12px 20px;transition:.25s;font-weight:700}
.nb-btn-primary {
    border: 1px solid#fab519;
    color: #ffffff;
    background: #fab51929;
    font-weight: bold;
    font-size: 16px;
}
.nb-btn-primary:hover{
background: #fab519;
    color: #14294b;}


.nb-btn-ghost {
    border: 2px solid #11a09a;
    color: #ffffff;
    background: #15384f;
}
    .nb-btn-ghost:hover{transform: translateY(-2px);
    box-shadow: 0 0px 12px rgb(17 160 154 / 56%);}

/* ——— Ticker ——— */
.ticker{background:var(--c-deep);overflow:hidden;border-block:1px solid rgba(255,255,255,.06)}
.ticker-track{display:flex;gap:40px;white-space:nowrap;padding:10px 0;font-weight:700;color:var(--c-secondary);
  animation:nb-marquee 18s linear infinite}
@keyframes nb-marquee{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

/* ——— Sections ——— */
.section {
    padding: 32px 0;
    text-align: center;
}
.section-dark {
    background: rgba(0, 0, 0, .15);
    text-align: center;
}
.section-title{text-align:center;font-size:clamp(24px,4vw,34px);margin-bottom:26px;font-weight:800}

/* ——— Grid ——— */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width: 900px){.grid-3{grid-template-columns:1fr}}
.center{text-align:center;margin-top:22px}

/* ——— Cards 3D ——— */
.card-3d{
  background:var(--c-deep);border:1px solid rgb(255 255 255);border-radius:16px;padding:22px;text-align:center;
  transform-style:preserve-3d;transition:transform .2s ease, box-shadow .2s ease;
}
.card-3d:hover {transform: translateY(-4px);box-shadow: 2px 6px 20px 0px rgb(17 160 154 / 62%);}.card-ico{font-size:36px;margin-bottom:10px}

/* ——— Stats ——— */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;text-align:center}
@media (max-width: 900px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat {
    background: rgb(21 56 79);
    border: 1px solid rgb(17 160 154);
    border-radius: 14px;
    padding: 20px;
}.stat-number{font-size:40px;font-weight:800;color:var(--c-secondary)}
.stat-label{opacity:.85}


/* ——— Footer ——— */
.footer{background:var(--c-deep);border-top:1px solid rgba(255,255,255,.06);margin-top:40px}
.footer-grid {
    display: grid
;
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: 56px;
    padding: 26px 0;
}
@media (max-width: 900px){.footer-grid{grid-template-columns:1fr}}
.footer-brand{font-weight:800;color:var(--c-primary);font-size:22px}
.footer-title{font-weight:800;margin-bottom:10px}
.footer-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.footer-text {
    opacity: .85;
    font-size: 17px;
    color: #ffffff;
    text-align: center;
    padding-left: 172px;
}.footer-copy {
    text-align: center;
    padding: 12px 0;
    border-top: 1px solid rgb(250 181 25 / 68%);
    opacity: .8;
    direction: ltr;
}
/* ——— جزيئات خلفية بسيطة (بدون مكتبات) ——— */
.nb-dot{
  position:absolute;width:6px;height:6px;border-radius:999px;background:radial-gradient(circle at 35% 35%, #fff, var(--c-primary));
  opacity:.5;filter:blur(.2px);animation:nb-float linear infinite;
}
@keyframes nb-float{
  from{transform:translateY(0)}
  to{transform:translateY(-120vh)}
}





.footer-social a {
    display: inline-block;
    margin: 0 5px;
    font-size: 20px;
    color: #fff;
    width: 36px;
    height: 36px;
    line-height: 39px;
    border-radius: 50%;
    text-align: center;
    transition: 0.3s;
    margin: 8px;
}
.footer .social-nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  transition: all 0.3s ease;
}

/* تويتر */
.footer .footer-social  .twitter:hover {
  transform: scale(1.2) rotate(8deg);
  box-shadow: rgba(29, 161, 242, 0.5) 0px 0px 11px 3px;
  background-color: #1da1f2;
}

/* فيسبوك */
.footer .footer-social .facebook:hover {
    transform: scale(1.2) rotate(8deg);
    box-shadow: rgb(59 89 152 / 83%) 0px 0px 11px 3px;
    background-color: #005fd9;
}

/* إنستغرام */
.footer .footer-social .instagram:hover {
  transform: scale(1.2) rotate(8deg);
  box-shadow: rgba(225, 48, 108, 0.5) 0px 0px 11px 3px;
  background-color: #e1306c;
}

/* واتساب */
.footer .footer-social .whatsapp:hover {
  transform: scale(1.2) rotate(8deg);
  box-shadow: rgba(37, 211, 102, 0.5) 0px 0px 11px 3px;
  background-color: #25d366;
}


.footer-social {
    padding-right: 38px;
    padding-top: 14px;
}

/* واتساب */
.footer-social a.whatsapp {
  background: #25D366;
}

/* إنستغرام (تدرج لوني) */
.footer-social a.instagram {
  background: radial-gradient(circle at 30% 107%, 
      #fdf497 0%, 
      #fdf497 5%, 
      #fd5949 45%, 
      #d6249f 60%, 
      #285AEB 90%);
}

/* فيسبوك */
.footer-social a.facebook {
  background: #1877F2;
}

/* تويتر (X الجديد لو تحب أسود) */
.footer-social a.twitter {
  background: #1DA1F2;
}

/* هوفر على الأيقونات */
.footer-social a:hover {
  transform: scale(1.2) rotate(8deg);
  box-shadow: 0 0 12px rgba(0,0,0,0.4);
}

/* العناوين */
.footer h3 {
  margin-bottom: 15px;
  font-size: 20px;
  font-weight: bold;
  position: relative;
}
.footer h3::after {
  content: "";
  width: 40px;
  height: 3px;
  background: orange;
  display: block;
  margin-top: 5px;
}

/* روابط تهمك */
.links-grid {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 30px;
}
.links-grid ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.links-grid ul li {
  margin-bottom: 12px;
}
.links-grid ul li a {
  text-decoration: none;
  color: #fff;
  transition: color 0.3s ease;
}
.links-grid ul li a:hover
 {
    color: #fab519;
}



/* بيانات التواصل */
.footer-contact {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-contact li {
  margin-bottom: 12px;
  display: flex;
  align-items: center;
}

.footer-contact li i {
  margin-left: 10px;
  font-size: 18px;
  color: #fff;
  transition: all 0.3s ease;
}

/* التأثير على الأيقونات عند الهوفر */
.footer-contact li:hover i {
  transform: scale(1.3) rotate(8deg);
  color: #fab519;
}

/* تنسيق الروابط */
.footer-contact li a {
  color: #fff;
  text-decoration: none;
  transition: color 0.3s ease;
}

/* هوفر الروابط */
.footer-contact li a:hover {
  color: hsl(207, 95%, 63%); /* أزرق فاتح */
}

/* الروابط في النافبار */
.nb-links a {
    font-weight: 700;
    font-size: 20px;
}
.nb-links a {
    position: relative;
    text-decoration: none;
    color: #ffffff;
    padding: 5px 0;
    transition: color 0.3s ease;
    font-weight: bolder;
}

/* الخط المتحرك */
.nb-links a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -3px; /* المسافة تحت النص */
  width: 0;
  height: 3px;
  background: #fab519; /* لون الخط */
  transition: width 0.3s ease;
}

/* عند الهوفر */
.nb-links a:hover {
  color: #ffffff; /* تغيير لون النص */
}

.nb-links a:hover::after {
  width: 100%; /* يظهر الخط */
  left: 0;
}


.stat:hover {
    border: 1px solid #fab519;
    background: #122d53;
    color: #ffffff;
    font-weight: bold;
}


.creative-section {
    display: flex
;
    justify-content: center;
    align-items: center;
    padding: 32px 10%;
    background: #162543;
    position: relative;
    overflow: hidden;
}

.content-box {
    display: flex
;
    align-items: center;
    gap: 60px;
    max-width: 1200px;
    flex-wrap: wrap;
    background: #14294b;
    padding: 32px 19px;
    border-radius: 20px;
    border: 2px solid #fff;
}

.text-side {
  flex: 1;
  animation: slideInLeft 1s ease forwards;
}


.text-side h2 {
    font-size: 2.5rem;
    color: #fab519;
    margin-top: -18px;
}

.text-side p {
  font-size: 1.2rem;
  margin-bottom: 30px;
  color: #ffffff;
  line-height: 1.8;
}

.buttons {
  display: flex;
  gap: 15px;
}

.btn {
    padding: 5px 23px;
    border-radius: 30px;
    text-decoration: none;
    transition: 0.3s;
}


.btn.primary {
  background: #0055ff;
  color: #fff;
}

.btn.primary:hover {
  background: #003db8;
}

.btn.secondary {
    border: 2px solid #fab519;
    color: #ffffff;
    background: #fab51929;
    font-weight: bold;
    font-size: 17px;
}

.btn.secondary:hover {
    background: #fab519;
    color: #14294b;
}

.image-side {
  flex: 1;
  animation: slideInRight 1s ease forwards;
}

.img-wrapper {
    overflow: hidden;
    border-radius: 20px;
    box-shadow: -5px 4px 0px 1px rgb(250 181 25);
    transition: transform 0.7s;
}

.img-wrapper:hover {
  transform: rotate(3deg) scale(1.05);
}

.img-wrapper img {
  width: 100%;
  height: auto;
  display: block;
}

/* أنيميشن */
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-50px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(50px); }
  to { opacity: 1; transform: translateX(0); }
}





/* ===== شريط قصة نجاحات (Compact Ribbon) ===== */
.story-ribbon {
    padding: 36px 0 101px;
    background: transparent;
    border-bottom: 1px solid #11a09a5c;
}
.story-ribbon .section-title{
  margin-bottom:14px;
  padding-right:455px;
  font-size:39px;
}

/* الشرائح */
.sr-toggles {
    display: flex
;
    gap: 37px;
    padding: 66px 143px 15px;
    background: #0f1b3300;
    border: 1px solid transparent;
    border-radius: 14px;
    overflow: auto;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
}
.sr-toggles::-webkit-scrollbar{ height:8px }
.sr-toggles::-webkit-scrollbar-thumb{ background:#233a60; border-radius:8px }

.sr-chip {
    appearance: none;
    border: 1px solid #11a09a;
    background: rgba(255, 255, 255, .05);
    color: #fff;
    border-radius: 999px;
    padding: 21px 44px;
    display: inline-flex
;
    align-items: center;
    gap: 18px;
    white-space: nowrap;
    cursor: pointer;
    font-weight: 800;
    transition: .2s;
    scroll-snap-align: start;
    font-size: 43px;
    text-align: center;
    font-family: 'Tajawal', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, 'Helvetica Neue', Arial, sans-serif;
    flex-direction: row;
}
.sr-chip:hover{ border-color:#fab519a6; background:#11284a }
.sr-chip.is-active{
  background:rgba(250,181,25,.16);
  border-color:#fab519;
  box-shadow:0 0 0 2px rgba(250,181,25,.18) inset;
}
.sr-ico{
  width:83px; height:80px; object-fit:contain;
  border-radius:6px; background:#fab519; padding:5px;
}

/* ===== لوحـة الوصف ===== */
/* ملاحظة: أزلنا أي تعريف سابق لـ .sr-panel-wrap فيه height ثابت */
/* اجعلناها تتمدّد بالمحتوى باستخدام max-height لتفادي قصّ الحد السفلي */
.sr-panel-wrap{
  position: relative;
  margin-top: 10px;
  max-height: 0;               /* مغلق */
  opacity: 0;
  pointer-events: none;
  overflow: hidden;            /* نحتاجه فقط أثناء الإغلاق */
  transition: max-height .45s cubic-bezier(.2,.8,.2,1), opacity .25s ease;
}
.sr-panel-wrap,
.sr-panel-wrap.open{
  height: auto !important;
}
.sr-panel-wrap.open{
  max-height: 1000px;          /* قيمة كبيرة تكفي المحتوى */
  opacity: 1;
  pointer-events: auto;
  overflow: visible;           /* مهم: اتركه مرئيًا كي لا يُقصّ الحد السفلي أو الظل */
}

/* خصائص اللوحة وحدّها */
.sr-panel{
  display: block;
  background: #15384f;
  border: 1px solid #11a09a;   /* الحدّ الذي كان يختفي من الأسفل */
  border-radius: 14px;
  padding: 14px 16px;
  color: #fff;
  line-height: 1.9;
  box-shadow: 0 10px 28px rgba(0,0,0,.18);
  background-clip: padding-box; /* احتياطي لظهور الحد بوضوح */
}
.sr-panel[hidden]{ display:none !important }
.sr-panel p {
    margin: 0;
    padding-bottom: 10px;
}
/* إزالة الخط من زر المزيد */
.sr-more,
.sr-more:link,
.sr-more:visited,
.sr-more:hover,
.sr-more:focus,
.sr-more:active{
  text-decoration: none !important;
}

/* لو الزر داخل لوحة قصة نجاحات كرابط عادي */
.sr-panel a{
  text-decoration: none !important;
}

.sr-more{
  margin-top:10px;
  background:#fab51929;
  color:#fff;
  border:2px solid #fab519ba;
  border-radius:10px;
  padding:7px 25px;
  font-weight:800;
  cursor:pointer;
  transition:.2s;
  font-size:15px;
  font-family:'Tajawal';
}
.sr-more:hover{
  background:#19273f;
  box-shadow:0 0 7px #fab51966;
  border-color:#fab519;
}

/* موبايل */
@media (max-width:560px){
  .sr-chip{ padding:12px 16px; font-weight:700; font-size:20px }
  .sr-ico{ width:36px; height:34px }
  .sr-panel{ font-size:14px }
}

/* احترام تقليل الحركة */
@media (prefers-reduced-motion: reduce){
  .sr-panel-wrap{ transition:none !important }
  .sr-toggles, .sr-chip, .sr-more{ transition:none !important }
}





/* خلفية متحركة */
.contact-section {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(-45deg, #ff6bd5, #00ffe7, #007bff, #ffdd00);
  background-size: 400% 400%;
  animation: gradientBG 10s ease infinite;
  padding: 50px;
}

@keyframes gradientBG {
  0% {background-position: 0% 50%;}
  50% {background-position: 100% 50%;}
  100% {background-position: 0% 50%;}
}

/* الكونتينر زجاجي */
.contact-container {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(15px);
  padding: 40px;
  border-radius: 20px;
  width: 100%;
  max-width: 600px;
  box-shadow: 0 0 25px rgba(255,255,255,0.2);
  text-align: center;
  color: #fff;
}

/* العنوان */
.contact-title {
  font-size: 2.5rem;
  margin-bottom: 10px;
  background: linear-gradient(90deg, #fff, #00ffe7, #ff6bd5);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: glow 3s infinite alternate;
}

@keyframes glow {
  from { text-shadow: 0 0 10px #00ffe7; }
  to { text-shadow: 0 0 20px #ff6bd5; }
}

.contact-subtitle {
  margin-bottom: 30px;
  opacity: 0.8;
}

/* ====== سكشن الاتصال (مُقيّد بالأسماء) ====== */
.contact-galaxy{
  --cg-bg1:#0b1220;
  --cg-bg2:#1f2937;
  --cg-neon:#00e7d4;
  --cg-neon2:#7c3aed;

  /* ألوان القائمة المخصّصة */
  --dd-bg: rgb(255 255 255 / 2%);     /* خلفية الحقل المغلق */
  --dd-text:#ffffff;                  /* نص الحقل */
  --dd-border: rgb(250 181 25 / 38%); /* حدود الحقل */
  --dd-menu-bg:#ffffff;               /* خلفية القائمة المفتوحة */
  --dd-menu-tx:#16213e;               /* نص العناصر */
  --dd-hover-bg:#fab519;              /* ← لون العنصر عند المرور بالماوس */
  --dd-hover-tx:#16213e;              /* ← لون نص العنصر عند المرور */

  position:relative;
  overflow:hidden;
  padding:60px 20px;
  background: radial-gradient(900px at 90% -20%, var(--cg-bg2), var(--cg-bg1));
  font-family:"Tajawal", system-ui, sans-serif;
  direction:rtl;
}

/* خلفية متحركة داخل السكشن */
.contact-galaxy .cg-bg{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.contact-galaxy .cg-blob{
  position:absolute; width:48vmax; height:48vmax; border-radius:50%;
  filter:saturate(120%); mix-blend-mode:screen; opacity:.9;
  animation: cg-float 16s ease-in-out infinite;
}
.contact-galaxy .cg-blob-a {
  left:-18vmax; top:-10vmax;
  background: radial-gradient(circle at 30% 30%, rgb(22 33 62 / 66%), rgb(15 49 91 / 46%) 60%, transparent 70%);
}
.contact-galaxy .cg-blob-b{
  right:-20vmax; top:40%;
  background: radial-gradient(circle at 70% 60%, rgba(0,231,212,.7), rgba(0,231,212,.14) 60%, transparent 70%);
  animation-duration:20s; animation-delay:-3s;
}
.contact-galaxy .cg-grid-sheen {
  position:absolute; inset:-10% -10% -10% -43%;
  background:
    radial-gradient(50% 50% at 30% 10%, rgba(255, 255, 255, .06), transparent 60%),
    linear-gradient(transparent 49%, rgba(255, 255, 255, .06) 50%, transparent 51%),
    linear-gradient(90deg, transparent 49%, rgba(255, 255, 255, .06) 50%, transparent 51%);
  background-size:100% 100%, 36px 36px, 36px 36px;
  mask-image: radial-gradient(circle at 80% -10%, black 0 55%, transparent 65%);
}
@keyframes cg-float{ 0%,100%{ transform: translate3d(0,0,0) rotate(0) } 50%{ transform: translate3d(-6vmax,4vmax,0) rotate(12deg) } }

/* المحتوى فوق الخلفية */
.contact-galaxy .contact-wrap{
  position:relative; z-index:1;
  max-width:1100px; margin:auto;
  display:flex; justify-content:space-between; align-items:center;
  gap:40px; flex-wrap:wrap;
}

.contact-galaxy .contact-side{ flex:1; color:#fff; }
.contact-galaxy .contact-kicker {
    display: inline-flex
;
    align-items: center;
    gap: 13px;
    color: #fab519;
    font-weight: 600;
    font-size: 30px;
}
.contact-galaxy .contact-kicker .dot{
  width:9px; height:9px; border-radius:50%; background:#fab519; box-shadow:0 0 12px 1px #fab519;
}
.contact-galaxy .contact-side h2 {
    font-size: 34px;
    margin: 22px 0;
}
.contact-galaxy .contact-side .lead{ color:#cbd5e1; font-size:16px; line-height:1.8 }

/* البطاقة */
.contact-galaxy .contact-card{
  flex:1;
  background:rgba(255,255,255,.08);
  border:1px solid rgb(250 181 25 / 64%);
  border-radius:16px;
  padding:45px 30px;
  backdrop-filter:blur(10px);
  box-shadow:0 0 11px 1px rgb(250 181 25 / 40%);
}

.contact-galaxy .contact-form{ display:flex; flex-direction:column; gap:27px }
.contact-galaxy .row{ display:flex; gap:16px }
.contact-galaxy .row .field{ flex:1 }

/* الحقول */
.contact-galaxy .field{ position:relative }
.contact-galaxy .input{
  width:100%;
  padding:16px 12px 12px;
  border-radius:10px;
  background:var(--dd-bg);
  border:1px solid var(--dd-border);
  color:#fff;
  outline:none;
  font-size:15px;
  transition:all .3s ease;
}
.contact-galaxy .input:focus{
  border-color:#fab519;
  box-shadow:0 0 7px #fab51961;
}
.contact-galaxy textarea.input{ min-height:120px; resize:none }

.contact-galaxy .label{
  position:absolute; left:12px; top:14px; color:#b6c2d4; font-size:14px;
  pointer-events:none; transition:all .2s ease;
}
.contact-galaxy .input:focus + .label,
.contact-galaxy .input:not(:placeholder-shown) + .label{
  transform: translateY(-24px) scale(.9);
  color:#ffffff; background:#19212e; padding:1px 10px; border-radius:26px; font-weight:bold; border:1px solid #fab519;
}
.contact-galaxy .caret{
  position:absolute; top:18px; right:12px; width:8px; height:8px;
  border:2px solid #94a3b8; border-left:none; border-top:none; transform:rotate(45deg); pointer-events:none;
}

/* ======================= القائــمة المخصّصة ======================= */
.contact-galaxy .dd{ position:relative }
.contact-galaxy .dd-toggle.input{
  display:flex; align-items:center; justify-content:space-between;
  background:var(--dd-bg); color:var(--dd-text); border-color:var(--dd-border); cursor:pointer;
}
.contact-galaxy .dd-menu {
    position: absolute;
    inset-inline: 0;
    top: calc(84% + 6px);
    background: #2e3849;
    border: 1px solid #fab519;
    border-radius: 10px;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .25);
    padding: 6px;
    margin: 0;
    list-style: none;
    max-height: 220px;
    overflow: auto;
    display: none;
    z-index: 20;
}
.contact-galaxy .dd.open .dd-menu{ display:block }
.contact-galaxy .dd-option {
    padding: 10px 12px;
    border-radius: 8px;
    color: #ffffff;
    cursor: pointer;
    white-space: nowrap;
    border-bottom: 1px solid #fab519;
}
.contact-galaxy .dd-option:hover {
    background: var(--dd-hover-bg);
    color: var(--dd-hover-tx);
    font-weight: bolder;
    font-size: 15px;
}

option {
    background: #1a2538;
    color: #ffffff;
    font-family: 'Tajawal';
}

/* جعل الليبل يعلو عند الفتح/الاختيار */
.contact-galaxy .dd:focus-within > .label,
.contact-galaxy .dd.has-value > .label{
  transform: translateY(-24px) scale(.9);
  color:#ffffff; background:#19212e; padding:1px 10px; border-radius:26px; font-weight:bold; border:1px solid #fab519;
}

/* زر */
.contact-galaxy .btn{
  background:#29303d;
  border:1px solid #fab519ba;
  border-radius:12px;
  padding:14px;
  font-weight:700; font-size:16px; cursor:pointer; color:#ffffff;
  transition:transform .2s ease, filter .2s ease;
}
.contact-galaxy .btn:hover{
  transform:translateY(-3px);
  filter:brightness(1.07);
  background:#19212e;
  box-shadow:0 0 7px 1px #fab5198c;
  border:1px solid #fab519;
}

/* تجاوب */
@media (max-width:768px){
  .contact-galaxy .contact-wrap{ flex-direction:column; text-align:center }
  .contact-galaxy .row{ flex-direction:column }
}

/* احترام تقليل الحركة */
@media (prefers-reduced-motion: reduce){
  .contact-galaxy .cg-blob{ animation:none }
}






/* ===== إعدادات عامة ===== */
.services-rtl {
    --accent: #fab519;
    --text: #eaf0f7;
    --overlay: rgba(7, 12, 20, .78);
    --radius: 16px;
    --shadow: 0 0 8px 0 rgba(17, 160, 154, .55);
    --shadow-hover: 0 0 18px 2px #fab519cc;
    --badge-bg: rgba(17, 160, 154, .44);
    font-family: "Tajawal", system-ui, sans-serif;
    background: #142748;
    padding: 24px;
}

/* ===== عنوان أبيض مع خط ذهبي قصير بالمنتصف ===== */
.services-rtl .svc-heading {
    text-align: center;
    margin: 6px auto 47px;
}
.services-rtl .svc-title {
    color: #ffffff;
    margin: 0;
    font-weight: 800;
    position: relative;
    display: inline-block;
    font-size: 3rem;
}

.services-rtl .svc-title::after {
    content: "";
    display: block;
    width: 185px;
    height: 4px;
    background: #fab519;
    border-radius: 0px;
    margin: 0px auto 0;
}
.services-rtl .svc-title span{
  background:none !important; -webkit-background-clip:initial !important; color:inherit !important;
}

/* ===== شبكة الترتيب (مع تصغير البطاقات وترك مسافات) =====
   الصف الأول: [ tasis | business ] (تأسيس يسار، الأعمال يمين)
   الصف الثاني: [ consulting | realestate ] */
.svc-grid {
    max-width: 1164px;
    margin: 0 auto;
    display: grid
;
    grid-template-columns: repeat(2, minmax(240px, 1fr));
    grid-template-areas:
        "tasis business"
        "consulting realestate";
    gap: 34px;
}
.area-tasis{ grid-area: tasis; }
.area-business{ grid-area: business; }
.area-consulting{ grid-area: consulting; }
.area-realestate{ grid-area: realestate; }

/* موبايل: عمود واحد، نفس ترتيبك السابق */
@media (max-width: 720px){
  .svc-grid{
    grid-template-columns: 1fr;
    grid-template-areas:
      "tasis"
      "business"
      "consulting"
      "realestate";
    gap: 18px;                 /* تباعد مناسب على الجوال */
  }
}

/* ===== البطاقة (أصغر + تباعد داخلي أفضل عند التحويم) ===== */
.svc-card {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    box-shadow: var(--shadow);
    border: 1px solid #11a09aba;
    background: #0b1220;
    transition: box-shadow .3s ease, border-color .3s ease, transform .2s ease;
}
.svc-card:hover{ box-shadow: var(--shadow-hover); border-color:#fab519; transform: translateY(-2px); }

/* الصورة — تتقلص مع عرض البطاقة */
.svc-card img{
  display:block; width:100%; height:auto; transition: opacity .35s ease;
}
.svc-card:hover img{ opacity:.35; }

/* لمعة عابرة */
.svc-card::after{
  content:""; position:absolute; inset:-40% -120% auto -120%; height:140%;
  transform: rotate(22deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
  opacity:0; pointer-events:none;
}
.svc-card:hover::after{ animation: svc-shine 900ms ease forwards .15s }

/* الشارة */
.svc-badge {
    position: absolute;
    top: 5px;
    left: 10px;
    background: var(--badge-bg);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .25);
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    z-index: 2;
    backdrop-filter: blur(4px);
    transition: opacity .25s ease, transform .25s ease;
}
.svc-card:hover .svc-badge{ opacity:0; transform: translateY(-6px); pointer-events:none }

/* الطبقة بالنص — تباعد داخلي أكبر عند الهوفر */
.svc-overlay{
  position:absolute; inset:0; z-index:1; display:grid; place-content:center; text-align:center;
  color:var(--text); padding:18px; gap:10px; /* تباعد مبدئي بين العناصر */
  background:
    radial-gradient(120% 120% at 80% 0%, rgba(255,255,255,.08), transparent 40%),
    linear-gradient(to top, var(--overlay), transparent 60%);
  clip-path: inset(72% 0 0 0 round var(--radius)); opacity:0;
  transition: clip-path .45s cubic-bezier(.2,.8,.2,1), opacity .35s ease, padding .25s ease, gap .25s ease;
  border:1px solid var(--accent); border-radius: var(--radius); box-shadow: 0 0 8px 0 var(--accent);
}
.svc-card:hover .svc-overlay {
    clip-path: inset(0 0 0 0 round var(--radius));
    opacity: 1;
    padding: 24px;
    gap: 23px;
}
.svc-overlay h3{ margin:0; font-size:18px; }
.svc-overlay p {
    margin: 0;
    font-size: 14px;
    line-height: 1.9;
    color: #ffffff;
    font-weight: bolder;
}
/* زر أصغر قليلًا */
.svc-btn {
    display: inline-block;
    padding: 9px 13px;
    border-radius: 12px;
    background: #29303d;
    border: 1px solid #15847d;
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    font-size: 13px;
    transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.svc-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 9px 1px #fab51940;
    background: #1a2230;
}

/* لمعة */
@keyframes svc-shine{
  0%{ opacity:0; transform: translateX(-120%) rotate(22deg) }
  25%{ opacity:.9 }
  100%{ opacity:0; transform: translateX(120%) rotate(22deg) }
}

/* ===== تخصيص سريع لكل بطاقة عبر الـ id (اختياري) ===== */
#card-tasis      { --accent:#fab519; --badge-bg:rgba(250,181,25,.45); }
#card-business   { --accent:#10b981; --badge-bg:rgba(16,185,129,.35); }
#card-consulting { --accent:#60a5fa; --badge-bg:rgba(96,165,250,.35); }
#card-realestate { --accent:#f472b6; --badge-bg:rgba(244,114,182,.35); }


/* === GOLD THEME (تأسيس الشركات + العقارات) ==================== */
#card-tasis,
#card-realestate{
  /* ألوان مستخرجة من الذهبي بالصورة */
  --accent:  #F0B24A;                    /* لون الإبراز والحدود الداخلية */
  --badge-bg: rgba(240,178,74,.38);      /* خلفية الشارة */
  border-color: #E9B144;                 /* حد البطاقة */
  box-shadow: 0 0 12px 0 rgba(240,178,74,.45);  /* شادو هادئ */
}
#card-tasis:hover,
#card-realestate:hover{
  box-shadow: 0 0 22px 3px rgba(240,178,74,.65); /* شادو أوضح عند الهوفر */
  border-color: #F0B24A;
}
/* نفس اللون على طبقة النص */
#card-tasis .svc-overlay,
#card-realestate .svc-overlay{
  border-color:#F0B24A;
  box-shadow:0 0 10px 0 rgba(240,178,74,.55);
}
#card-tasis:hover .svc-overlay,
#card-realestate:hover .svc-overlay{
  box-shadow:0 0 14px 0 rgba(240,178,74,.75);
}

/* === BLUE/TEAL THEME (خدمات الأعمال + الإستشارات التجارية) ===== */
#card-business,
#card-consulting{
  /* ألوان مستخرجة من الأزرق/التيف بالصورة */
  --accent:  #11A09A;
  --badge-bg: rgba(17,160,154,.38);
  border-color: #11A09A99;
  box-shadow: 0 0 12px 0 rgba(17,160,154,.45);
}
#card-business:hover,
#card-consulting:hover{
  box-shadow: 0 0 22px 3px rgba(17,160,154,.65);
  border-color:#11A09A;
}
/* نفس اللون على طبقة النص */
#card-business .svc-overlay,
#card-consulting .svc-overlay{
  border-color:#11A09A;
  box-shadow:0 0 10px 0 rgba(17,160,154,.55);
}
#card-business:hover .svc-overlay,
#card-consulting:hover .svc-overlay{
  box-shadow:0 0 14px 0 rgba(17,160,154,.75);
}


/* زر ذهبي لبطاقات اللون الذهبي */
#card-tasis .svc-btn:hover,
#card-realestate .svc-btn:hover{
  box-shadow: 0 0 9px 1px rgba(240,178,74,.55); /* ذهبي */
  border-color:#F0B24A;
  background:#1a2230;
}

/* زر أزرق/تيـف لبطاقات اللون الأزرق */
#card-business .svc-btn:hover,
#card-consulting .svc-btn:hover{
  box-shadow: 0 0 9px 1px rgba(17,160,154,.55); /* أزرق/تيف */
  border-color:#11A09A;
  background:#1a2230;
}


/* حدود الزر حسب لون البطاقة */

/* الذهبي: تأسيس الشركات + العقارات */
#card-tasis .svc-btn,
#card-realestate .svc-btn{
  border-color:#F0B24A; /* ذهبــي */
}

/* الأزرق/التيف: خدمات الأعمال + الإستشارات التجارية */
#card-business .svc-btn,
#card-consulting .svc-btn{
  border-color:#11A09A; /* أزرَق/Teal */
}

/* (اختياري) تحسين الوصولية عند التركيز بلوحة المفاتيح */
#card-tasis .svc-btn:focus-visible,
#card-realestate .svc-btn:focus-visible{
  box-shadow:0 0 0 3px rgba(240,178,74,.35);
  outline:none;
}
#card-business .svc-btn:focus-visible,
#card-consulting .svc-btn:focus-visible{
  box-shadow:0 0 0 3px rgba(17,160,154,.35);
  outline:none;
}





/* ============== 1) خط ذهبي موحّد تحت جميع العناوين ============== */
/* طبّقه تلقائيًا على عناوين الخدمات ".svc-title" وعناوين الأقسام ".section-title".
   ولو عندك عنوان خاص، أعطه كلاس heading-underline */
.services-rtl .svc-title,
.section-title,
.heading-underline{
  position: relative;
  display: inline-block;
}

.services-rtl .svc-title::after, .section-title::after, .heading-underline::after {
    content: "";
    display: block;
    width: 185px;
    height: 4px;
    background: #fab519;
    border-radius: 0;
    margin: 10px auto 15px;
}

/* تمركز العناوين */
.services-rtl .svc-heading,
.section .section-title,
.story-section .section-title{
  text-align: center;
}

/* ============== 2) تحسينات التجاوب للشاشة الكبيرة ↓ ============== */
@media (max-width: 1400px){
  .services-rtl{ padding: 28px 16px; }
  .svc-grid{ max-width: 100%; }
}

/* ============== 3) تابلت (≤ 992px) ============== */
@media (max-width: 992px){
  /* الشريط العلوي */
  .top-header{ padding: 12px 20px; font-size: 13px; }
  .top-header .social-nav{ flex-wrap: wrap; gap: 10px; }

  /* العنوان */
  .services-rtl .svc-title{ font-size: 2.2rem; }

  /* شبكة الخدمات تبقى عمودين على التابلت */
  .svc-grid{
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 22px;
    max-width: 92vw;
  }
  .svc-overlay p{ font-size: 13.5px; line-height: 1.8; }

  /* سيكشن المحتوى الإبداعي */
  .creative-section{ padding: 28px 6%; }
  .content-box{ gap: 26px; padding: 22px; }
  .text-side h2{ font-size: 2rem; }

  /* الأرقام */
  .stats{ grid-template-columns: repeat(2,1fr); gap: 14px; }
  .stat-number{ font-size: 34px; }
}

/* ============== 4) موبايل (≤ 768px) ============== */
@media (max-width: 768px){
  /* الخدمات: عمود واحد */
  .svc-grid{
    grid-template-columns: 1fr;
    grid-template-areas:
      "tasis"
      "business"
      "consulting"
      "realestate";
    gap: 18px;
    max-width: 94vw;
  }
  .services-rtl{ padding: 20px 10px; }
  .services-rtl .svc-title{ font-size: 1.9rem; }
  .services-rtl .svc-title::after,
  .section-title::after{ width: 140px; }

  .svc-card{ border-radius: 14px; }
  .svc-overlay{ padding: 16px; gap: 10px; }
  .svc-card:hover .svc-overlay{ padding: 20px; gap: 12px; }

  /* سيكشن المحتوى الإبداعي */
  .content-box{ flex-direction: column; gap: 18px; }
  .img-wrapper{ box-shadow: -3px 3px 0 1px #fab519; }

  /* الأرقام */
  .stats{ grid-template-columns: repeat(2,1fr); }
  .stat{ padding: 16px; }
  .stat-number{ font-size: 28px; }
}

/* ============== 5) شاشات صغيرة جدًا (≤ 520px) ============== */
@media (max-width: 520px){
  .services-rtl{ padding: 16px 8px; }
  .svc-heading{ margin-bottom: 14px; }
  .services-rtl .svc-title{ font-size: 1.7rem; }
  .services-rtl .svc-title::after,
  .section-title::after{ width: 120px; }

  .svc-badge{ font-size: 12px; padding: 6px 12px; }
  .svc-btn{ font-size: 12.5px; padding: 8px 12px; }

  /* Story cards (قصة نجاحات) */
  .cards-container{ gap: 18px; }
  .story-card{ border-radius: 22px; }

  /* الأرقام تتحول لعمود واحد لقراءة أوضح */
  .stats{ grid-template-columns: 1fr; gap: 12px; }
  .stat{ padding: 14px; }
}

/* ============== 6) احترام تقليل الحركة ============== */
@media (prefers-reduced-motion: reduce){
  .svc-card,
  .svc-overlay,
  .svc-card::after,
  .nb-links a::after{ transition: none !important; animation: none !important; }
}














/* ===== سكشن خدماتنا بالتفصيل بأسلوب بطاقات الواجهة ===== */
.services-rtl.svc-detailed{
  --accent:#fab519; --text:#eaf0f7; --overlay:rgba(7,12,20,.78); --radius:16px;
  --shadow: 0 0 8px 0 rgba(17,160,154,.55);
  --shadow-hover: 0 0 18px 2px #fab519cc;
  --badge-bg: rgba(17,160,154,.44);
  padding: 32px 0 44px;
  background: transparent;          /* يَرث خلفية صفحتك */
}

/* عنوان + خط ذهبي */
.svc-detailed .svc-heading{ text-align:center; margin: 0 0 28px }
.svc-detailed .svc-title{
  color:#fff; margin:0; font-weight:800; font-size: clamp(26px,4.5vw,38px); display:inline-block;
}
.svc-detailed .svc-title::after {
    content: "";
    display: block;
    width: 185px;
    height: 4px;
    background: #fab519;
    border-radius: 0;
    margin: 10px auto 33px;
}

/* شبكة 2×N مثل الواجهة (وتصير عمود واحد على الجوال) */
.svc-detailed .svc-grid{
  max-width: 1160px; margin:0 auto;
  display:grid; grid-template-columns: repeat(2, minmax(320px,1fr)); gap: 28px;
}
@media (max-width: 860px){
  .svc-detailed .svc-grid{ grid-template-columns: 1fr; gap: 18px; }
}

/* البطاقة */
.svc-detailed .svc-card{
  position:relative; overflow:hidden; border-radius: var(--radius);
  border:1px solid #11a09aba; box-shadow: var(--shadow); background:#0b1220;
  transition: box-shadow .3s ease, border-color .3s ease, transform .2s ease;
  aspect-ratio: 16/9;               /* نفس ارتفاع كل البطاقات */
}
.svc-detailed .svc-card:hover{ box-shadow: var(--shadow-hover); border-color:#fab519; transform: translateY(-2px) }

.svc-detailed .svc-card img{
  width:100%; height:100%; object-fit:cover; display:block; transition: opacity .35s ease;
}
.svc-detailed .svc-card:hover img{ opacity:.35 }

/* لمعة اختيارية */
.svc-detailed .svc-card::after{
  content:""; position:absolute; inset:-40% -120% auto -120%; height:140%;
  transform: rotate(22deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
  opacity:0; pointer-events:none;
}
.svc-detailed .svc-card:hover::after{ animation: svc-shine 900ms ease forwards .15s }

/* الشارة */
.svc-detailed .svc-badge{
  position:absolute; top:10px; left:10px;
  background: var(--badge-bg); color:#fff;
  border:1px solid rgba(255,255,255,.25);
  padding:7px 16px; border-radius: 999px; font-size:13px; font-weight:700;
  backdrop-filter: blur(4px); z-index:2;
  transition: opacity .25s ease, transform .25s ease;
}
.svc-detailed .svc-card:hover .svc-badge{ opacity:0; transform: translateY(-6px); pointer-events:none }

/* الطبقة بالنص */
.svc-detailed .svc-overlay{
  position:absolute; inset:0; z-index:1; display:grid; place-content:center; text-align:center;
  color:var(--text); padding:20px; gap:12px;
  background:
    radial-gradient(120% 120% at 80% 0%, rgba(255,255,255,.08), transparent 40%),
    linear-gradient(to top, var(--overlay), transparent 60%);
  clip-path: inset(72% 0 0 0 round var(--radius)); opacity:0;
  transition: clip-path .45s cubic-bezier(.2,.8,.2,1), opacity .35s ease, padding .25s ease, gap .25s ease;
  border:1px solid var(--accent); border-radius: var(--radius); box-shadow: 0 0 8px 0 var(--accent);
}
.svc-detailed .svc-card:hover .svc-overlay{ clip-path: inset(0 0 0 0 round var(--radius)); opacity:1; padding:26px; gap:14px }
.svc-detailed .svc-overlay h3{ margin:0; font-size:20px; }
.svc-detailed .svc-overlay p{ margin:0; font-size:15px; line-height:1.85; color:#dbe4f3 }

/* زر */
.svc-detailed .svc-btn{
  display:inline-block; padding:10px 14px; border-radius:12px; background:#29303d;
  border:1px solid #15847d; color:#fff; text-decoration:none; font-weight:700; font-size:14px;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.svc-detailed #card-tasis .svc-btn,
.svc-detailed #card-realestate .svc-btn,
.svc-detailed #card-gov .svc-btn{ border-color:#F0B24A }              /* ذهبـي */
.svc-detailed #card-business .svc-btn,
.svc-detailed #card-consulting .svc-btn,
.svc-detailed #card-marketing .svc-btn{ border-color:#11A09A }        /* تيـف */

.svc-detailed #card-tasis .svc-btn:hover,
.svc-detailed #card-realestate .svc-btn:hover,
.svc-detailed #card-gov .svc-btn:hover{
  box-shadow: 0 0 9px 1px rgba(240,178,74,.55); border-color:#F0B24A; background:#1a2230;
}
.svc-detailed #card-business .svc-btn:hover,
.svc-detailed #card-consulting .svc-btn:hover,
.svc-detailed #card-marketing .svc-btn:hover{
  box-shadow: 0 0 9px 1px rgba(17,160,154,.55); border-color:#11A09A; background:#1a2230;
}

/* ألوان المجموعات (ذهبي/أزرق) مأخوذة من صور الواجهة */
.svc-detailed #card-tasis,
.svc-detailed #card-realestate,
.svc-detailed #card-gov{
  --accent:#F0B24A; --badge-bg:rgba(240,178,74,.38);
  border-color:#E9B144; box-shadow:0 0 12px 0 rgba(240,178,74,.45);
}
.svc-detailed #card-tasis:hover,
.svc-detailed #card-realestate:hover,
.svc-detailed #card-gov:hover{
  box-shadow:0 0 22px 3px rgba(240,178,74,.65); border-color:#F0B24A;
}
.svc-detailed #card-business,
.svc-detailed #card-consulting,
.svc-detailed #card-marketing{
  --accent:#11A09A; --badge-bg:rgba(17,160,154,.38);
  border-color:#11A09A99; box-shadow:0 0 12px 0 rgba(17,160,154,.45);
}
.svc-detailed #card-business:hover,
.svc-detailed #card-consulting:hover,
.svc-detailed #card-marketing:hover{
  box-shadow:0 0 22px 3px rgba(17,160,154,.65); border-color:#11A09A;
}

/* لمعة */
@keyframes svc-shine{
  0%{ opacity:0; transform: translateX(-120%) rotate(22deg) }
  25%{ opacity:.9 }
  100%{ opacity:0; transform: translateX(120%) rotate(22deg) }
}











/* ========= Clients Grid (CSS فقط) ========= */
.clients-grid-rtl {
    --gold: #fab519;
    --teal: #0f9488;
    --card: #ececee;
    --card-b: #dedfe3;
    --shadow: 0 10px 30px rgba(16, 24, 40, .08);
    padding: 60px 0 50px;
    background: #142748;
}

/* العنوان وخطه الذهبي */
.clients-grid-rtl .cg-head{display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:16px; position:relative}
.clients-grid-rtl .cg-title{margin:0;font-weight:800;color:#ffffff; font-size:clamp(22px,4vw,32px)}
.clients-grid-rtl .cg-title::after {
    content: "";
    display: block;
    width: 87px;
    height: 4px;
    background: var(--gold);
    border-radius: 0px;
    margin: 10px auto 22px;
}
/* أزرار التحريك – أعلى يمين، زجاجية وخفيفة */
.clients-grid-rtl .cg-controls{position:absolute; top:0; inset-inline-end:24px; display:flex; gap:12px}
.clients-grid-rtl .cg-nav {
    width: 44px;
    height: 44px;
    border: 1px solid #11a09a;
    border-radius: 12px;
    background: #15384f;
    color: #ffffff;
    backdrop-filter: blur(6px);
    display: grid
;
    place-items: center;
    cursor: pointer;
    transition: .2s;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .12);
    margin: 30px -15px 0px 12px;
}
.clients-grid-rtl .cg-nav:hover {
    background: #393f43;
    transform: translateY(-2px);
    border: 1px solid #fab519;
}.clients-grid-rtl .cg-nav:active{ transform:translateY(0) scale(.98) }

/* المنظر والمسار */
.clients-grid-rtl .cg-viewport{ overflow:hidden; position:relative; padding:12px 8px 0 }
.clients-grid-rtl .cg-track{
  list-style:none; margin:0; padding:0;
  display:grid; grid-auto-flow:column; gap:28px;
  grid-auto-columns:minmax(320px,1fr);   /* عرض البطاقة */
  grid-template-rows:repeat(2,160px);    /* صفّان أعلى/أسفل */
}

/* البطاقات */
.clients-grid-rtl .cg-card{
  background:var(--card);
  border:1px solid var(--card-b);
  border-radius:16px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow);
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease;
}
.clients-grid-rtl .cg-card:hover{
  background:#f2f2f3;
  border-color:#d7d9de;
  box-shadow:0 14px 40px rgba(16,24,40,.12);
  transform:translateY(-4px);
}

/* الشعار داخل البطاقة (أوضح وأكبر) */
.clients-grid-rtl .cg-card img{
  max-height:90px; width:auto; height:auto; object-fit:contain;
  filter:none; opacity:.95;
  transition:transform .25s ease, opacity .25s ease;
}
.clients-grid-rtl .cg-card:hover img{ transform:scale(1.05); opacity:1 }

/* زر المزيد */
.clients-grid-rtl .cg-cta{ text-align:center; margin-top:18px }
.clients-grid-rtl .cg-more {
    display: inline-block;
    padding: 12px 22px;
    border-radius: 12px;
    background: #15384f;
    border: 2px solid var(--teal);
    color: #ffffff;
    text-decoration: none;
    font-weight: 700;
    transition: .2s;
    margin: 31px auto 0px;
}
.clients-grid-rtl .cg-more:hover {
    background: #393f43;
    color: #fff;
    border-color: #fab519;
}
/* تجاوب */
@media (max-width:1200px){
  .clients-grid-rtl .cg-track{ grid-auto-columns:minmax(280px,1fr); grid-template-rows:repeat(2,140px) }
  .clients-grid-rtl .cg-card img{ max-height:78px }
}
@media (max-width:900px){
  .clients-grid-rtl .cg-controls{ inset-inline-end:12px }
  .clients-grid-rtl .cg-track{ grid-auto-columns:minmax(260px,1fr); grid-template-rows:repeat(2,130px) }
}
@media (max-width:600px){
  .clients-grid-rtl .cg-track{ grid-auto-columns:minmax(220px,80vw); grid-template-rows:repeat(2,120px); gap:20px }
  .clients-grid-rtl .cg-card img{ max-height:66px }
}




/* ألوان وضبط عام */
  :root{
    --accent: #fab519;
    --overlay: rgba(10,16,28,.45);
  }

  /* الجسم يبدأ بوضع التحميل، ثم نزيله بالـJS */
  body.preloading #site{
    filter: blur(8px) saturate(.95);
    transition: filter .6s ease;
    pointer-events: none; /* منع التفاعل أثناء التحميل */
  }

  /* طبقة الـSplash */
  #preloader{
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
    background: var(--overlay);                 /* لون خفيف فوق الخلفية */
    backdrop-filter: blur(14px) saturate(120%); /* Blur فعلي للخلفية */
    -webkit-backdrop-filter: blur(14px) saturate(120%);
    opacity: 1;
    visibility: visible;
    transition: opacity .7s ease, visibility .7s ease;
  }
  /* عند اكتمال التحميل */
  body.is-loaded #preloader{
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  /* بطاقة الشعار */
  .pl-card{
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 18px;
    padding: 30px 38px;
    box-shadow: 0 10px 28px rgba(0,0,0,.25);
    text-align: center;
    transform: translateY(6px) scale(.98);
    animation: pl-pop .8s cubic-bezier(.2,.8,.2,1) forwards;
    backdrop-filter: blur(6px);
  }
  @keyframes pl-pop{
    to{ transform: translateY(0) scale(1); }
  }

  .pl-logo{
    width: min(270px, 60vw);
    height: auto;
    display: block;
    margin-inline: auto;
    filter: drop-shadow(0 6px 14px rgba(0,0,0,.2));
    animation: pl-breathe 1.6s ease-in-out infinite;
  }
  @keyframes pl-breathe{
    0%,100%{ transform: translateZ(0) scale(1); opacity: .98; }
    50%    { transform: translateZ(0) scale(1.03); opacity: 1; }
  }

  /* نقاط تحميل صغيرة أسفل الشعار */
  .pl-dots{
    margin-top: 20px;
    display: inline-flex;
    gap: 10px;
  }
  .pl-dots span{
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--accent);
    opacity: .65;
    animation: pl-dot 1.1s ease-in-out infinite;
  }
  .pl-dots span:nth-child(2){ animation-delay: .15s }
  .pl-dots span:nth-child(3){ animation-delay: .3s }
  @keyframes pl-dot{
    0%,100%{ transform: translateY(0); opacity:.65 }
    50%    { transform: translateY(-6px); opacity:1 }
  }

  /* احترام تفضيل تقليل الحركة */
  @media (prefers-reduced-motion: reduce){
    .pl-logo, .pl-card, .pl-dots span{
      animation: none !important;
    }
    #site{ transition: none !important; }
    #preloader{ transition: opacity .2s linear, visibility .2s linear; }
  }







  /* ================== Overrides & Responsive fixes (append at end) ================== */

/* دعم EN: اتجاه وخط */
html[lang="en"] { direction: ltr; }
html[lang="en"] body {
  font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, 'Helvetica Neue', Arial, sans-serif;
}

/* زر اللغة كزر فعلي (وليس رابط) */
.lang-btn {
  appearance: none;
  border: 0;
  cursor: pointer;
}

/* الهيدر العلوي على الجوال: قلّل الزحمة */
@media (max-width: 992px){
  .top-header { padding: 10px 12px; }
  .top-header .social-nav { flex-wrap: wrap; gap: 10px; }
  .top-header .social-nav .spaerator { display:none; }
  .top-header .social-nav .info span { display:none; } /* اخفِ النص الطويل، ابقِ الأيقونة فقط */
  .top-header .social-nav .info i { margin-right: 0; }
  .top-header .social-nav .lang-btn { margin-left: 0; }
}

/* حجم الشعار في النافبار على الشاشات الصغيرة */
@media (max-width: 900px){
  .nb-container .log img,
  .nb-container .logo img { height: 58px; }
}

/* قائمة الجوال: خلفية أوضح ومسافات مناسبة */
.nb-mobile {
  background: var(--c-deep);
  padding: 10px 16px;
  border-top: 1px solid rgba(255,255,255,.08);
}

/* تحسين بسيط لأزرار الروابط */
.nb-links a { font-weight: 700; }

/* البطاقة في قسم الأرقام عند اللمس */
@media (hover: none){
  .svc-card:hover img { opacity: 1; }
  .svc-card:hover { transform: none; }
}

/* إصلاح بسيط لسطر حقوق النشر على الشاشات الأصغر */
@media (max-width: 480px){
  .footer-copy { font-size: 14px; }
}








/* ===== Site Search (overlay) ===== */
#nb-search-backdrop{
  position:fixed; inset:0; z-index:9998;
  background:rgba(0,0,0,.45);
  backdrop-filter: blur(6px);
  opacity:0; visibility:hidden; transition:.2s;
}
#nb-search-backdrop.show{ opacity:1; visibility:visible; }

#nb-search{
  position:fixed; inset:0; z-index:9999; display:grid; place-items:start center;
  padding-top:8vh;
  opacity:0; visibility:hidden; transition:.2s;
}
#nb-search.show{ opacity:1; visibility:visible; }

.nb-search-dialog{
  width:min(760px,92vw); background:#0f1b33; color:#fff;
  border-radius:16px; border:1px solid #ffffff30;
  box-shadow:0 20px 50px rgba(0,0,0,.35);
  overflow:hidden;
}
.nb-search-head{
  display:flex; align-items:center; gap:10px; padding:12px 14px; border-bottom:1px solid #ffffff22;
  background:#10203b;
}
.nb-search-input{
  flex:1; background:#132744; border:1px solid #ffffff2b; color:#fff;
  border-radius:10px; padding:12px 14px; font-size:15px; outline:none;
}
.nb-search-input::placeholder{ color:#8fb3ff; opacity:.8 }
.nb-search-close{
  background:transparent; border:0; color:#fff; font-size:20px; cursor:pointer; padding:6px 10px;
}

.nb-search-body{ max-height:60vh; overflow:auto; background:linear-gradient(180deg, #0f1b33, #0d1930); }
.nb-search-status{ padding:14px; color:#bcd1ff; font-size:14px; border-bottom:1px dashed #ffffff1f }

.nb-search-list{ list-style:none; margin:0; padding:6px; display:grid; gap:8px }
.nb-search-item{
  text-decoration:none; display:block; padding:12px 14px; border:1px solid #ffffff22; border-radius:12px;
  background:#0f1b33; color:#fff; transition:.15s; outline:none;
}
.nb-search-item:hover,
.nb-search-item:focus,
.nb-search-item.active{
  border-color:#fab519; box-shadow:0 0 0 2px #fab51955; background:#122d53;
}
.nb-search-item h4{ margin:0 0 6px; font-size:16px; color:#11a09a; }
.nb-search-item p{ margin:0; font-size:13.5px; color:#e8eefb; opacity:.9; line-height:1.7 }
.nb-search-item mark{
  background:#fab519; color:#0f2543; padding:0 2px; border-radius:2px;
}

/* تلميح الاختصارات أسفل الحقل */
.nb-search-hint{ margin-inline-start:8px; font-size:12px; color:#cfe1ffbd }
.nb-kbd{
  display:inline-block; border:1px solid #ffffff3a; background:#132744; color:#e8f0ff;
  padding:2px 6px; border-radius:6px; font-size:12px; margin-inline:2px;
}






/* ===== Site Search (overlay) ===== */
#nb-search-backdrop{
  position:fixed; inset:0; z-index:9998;
  background:rgba(0,0,0,.45);
  backdrop-filter: blur(6px);
  opacity:0; visibility:hidden; transition:.2s;
}
#nb-search-backdrop.show{ opacity:1; visibility:visible; }

#nb-search{
  position:fixed; inset:0; z-index:9999; display:grid; place-items:start center;
  padding-top:8vh;
  opacity:0; visibility:hidden; transition:.2s;
}
#nb-search.show{ opacity:1; visibility:visible; }

.nb-search-dialog{
  width:min(760px,92vw); background:#0f1b33; color:#fff;
  border-radius:16px; border:1px solid #ffffff30;
  box-shadow:0 20px 50px rgba(0,0,0,.35);
  overflow:hidden;
}
.nb-search-head{
  display:flex; align-items:center; gap:10px; padding:12px 14px; border-bottom:1px solid #ffffff22;
  background:#10203b;
}
.nb-search-input{
  flex:1; background:#132744; border:1px solid #ffffff2b; color:#fff;
  border-radius:10px; padding:12px 14px; font-size:15px; outline:none;
}
.nb-search-input::placeholder{ color:#8fb3ff; opacity:.8 }
.nb-search-close{
  background:transparent; border:0; color:#fff; font-size:20px; cursor:pointer; padding:6px 10px;
}

.nb-search-body{ max-height:60vh; overflow:auto; background:linear-gradient(180deg, #0f1b33, #0d1930); }
.nb-search-status{ padding:14px; color:#bcd1ff; font-size:14px; border-bottom:1px dashed #ffffff1f }

.nb-search-list{ list-style:none; margin:0; padding:6px; display:grid; gap:8px }
.nb-search-item{
  text-decoration:none; display:block; padding:12px 14px; border:1px solid #ffffff22; border-radius:12px;
  background:#0f1b33; color:#fff; transition:.15s; outline:none;
}
.nb-search-item:hover,
.nb-search-item:focus,
.nb-search-item.active{
  border-color:#fab519; box-shadow:0 0 0 2px #fab51955; background:#122d53;
}
.nb-search-item h4{ margin:0 0 6px; font-size:16px; color:#11a09a; }
.nb-search-item p{ margin:0; font-size:13.5px; color:#e8eefb; opacity:.9; line-height:1.7 }
.nb-search-item mark{
  background:#fab519; color:#0f2543; padding:0 2px; border-radius:2px;
}

/* تلميح الاختصارات أسفل الحقل */
.nb-search-hint{ margin-inline-start:8px; font-size:12px; color:#cfe1ffbd }
.nb-kbd{
  display:inline-block; border:1px solid #ffffff3a; background:#132744; color:#e8f0ff;
  padding:2px 6px; border-radius:6px; font-size:12px; margin-inline:2px;
}


.search-btn i {
    font-size: 27px;
    line-height: 1;
    pointer-events: none;
    color: #ffffff;
    background: #11a09a00;
    padding: 8px;
    border-radius: 13px;
}

.search-btn i{
  transition: color .2s ease, background-color .2s ease;
}

.search-btn:hover i,
.search-btn:focus-visible i{
  color: #11a09a;
}



/* الصندوق الأبيض يقص أي شيء يخرج عنه */
.creative-section .content-box{
  overflow: hidden;            /* أهم سطر */
  border-radius: 20px;         /* للتأكد من مطابقة الحواف */
  padding: 32px 24px;          /* تنفّس بسيط داخل الإطار */
}

/* الصورة على اليسار وبحجم ثابت على الديسكتوب */
.creative-section .image-side{
  flex: 0 0 420px;             /* عرض الصورة داخل الصندوق */
  display: flex;
  align-items: center;
}

/* غلاف الصورة يمنع خروجها ويقص التدوير عند الـhover */
.creative-section .img-wrapper{
  max-width: 420px;
  width: 100%;
  border-radius: 16px;
  overflow: hidden;            /* قص محتوى الصورة نفسه */
  box-shadow: -5px 4px 0px 1px rgb(250 181 25);
}

/* الصورة نفسها */
.creative-section .img-wrapper img{
  display:block;
  width:100%;
  height:auto;
}

/* ترتيب العناصر: الصورة يسار والنص يمين على الشاشات الكبيرة */


/* الموبايل يبقى الترتيب عمودي */
@media (max-width: 991.98px){
  .creative-section .image-side{ flex: 1 1 100%; order: 2; }
  .creative-section .img-wrapper{ max-width: 560px; margin-inline: auto; }
}


.creative-section .content-box{ overflow:hidden; border-radius:20px; }
.creative-section .img-wrapper{ overflow:hidden; }
.creative-section .image-side{ flex:0 0 435px; }


a.btn-pdf {
    border: 2px solid #11a09a;
    color: #ffffff;
    background: #15384f;
    font-weight: bold;
    font-size: 17px;
    padding: 5px 23px;
    border-radius: 30px;
    text-decoration: none;
    transition: 0.3s;
}

a.btn-pdf:hover {
    transform: translateY(-2px);
    box-shadow: 0 0px 12px rgb(17 160 154 / 56%);
}





/* ===== قوالب مكدسة بنفس ستايل جائزة جدارة ===== */
.creative-stack { 
  padding: 26px 0;         /* مسافة بسيطة بين البلوكات */
  background: transparent; /* يَرث خلفية الصفحة */
}

/* نفس صندوق جدارة: داخل حدود بيضاء + قص داخلي */
.creative-stack .content-box{
  display: flex;
  align-items: center;
  gap: 48px;
  background: #14294b;          /* نفس خلفية جدارة */
  border: 2px solid #fff;       /* الحد الأبيض */
  border-radius: 20px;
  padding: 32px 24px;
  overflow: hidden;             /* مهم: قصّ المحتوى داخل الحدود */
  max-width: 1200px;
  margin-inline: auto;
}

/* الصورة ثابتة العرض على الشاشات الكبيرة، وداخل الحدود */
.creative-stack .image-side{
  flex: 0 0 420px;
  display: flex;
  align-items: center;
}
.creative-stack .img-wrapper{
  width: 100%;
  max-width: 420px;
  border-radius: 16px;
  overflow: hidden;             /* قصّ دوران/تكبير الصورة */
  box-shadow: -5px 4px 0 1px rgb(250 181 25); /* لمسة ذهبية مثل جدارة */
}
.creative-stack .img-wrapper img{
  display:block; width:100%; height:auto;
}

/* النص */
.creative-stack .text-side{ flex:1; }
.creative-stack .text-side h2{
  font-size: 2.2rem;
  color: #fab519;
  margin: 0 0 12px;
}
.creative-stack .text-side p{
  font-size: 1.1rem;
  line-height: 1.9;
  color: #ffffff;
  margin: 0 0 12px;
}
.creative-stack .buttons{ display:flex; gap:12px; flex-wrap: wrap; }

/* قلب الترتيب (صورة يمين/نص يسار) للبلوكات المتناوبة */
.creative-stack.alt .content-box{ flex-direction: row-reverse; }

/* استجابة للجوال */
@media (max-width: 991.98px){
  .creative-stack .content-box{ flex-direction: column; gap: 22px; }
  .creative-stack .image-side{ flex: 1 1 auto; }
  .creative-stack .img-wrapper{ max-width: 560px; margin-inline: auto; }
}



/* ألوان الهوية لو حاب تستخدمها */
:root{
  --whatsapp:#25D366;
  --scroll-fill:#fab519;   /* لون تعبئة التقدم */
  --scroll-track:#0f1b33;  /* خلفية الحلقة */
}

/* ===== WhatsApp FAB (يمين) ===== */
.fab-whatsapp{
  position:fixed;
  right:24px; bottom:24px;
  width:56px; height:56px;
  border-radius:50%;
  background:var(--whatsapp);
  color:#fff; display:grid; place-items:center;
  font-size:28px; line-height:1;
  box-shadow:0 12px 30px rgba(0,0,0,.25);
  z-index:1000; text-decoration:none;
  transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.fab-whatsapp:hover{ transform:translateY(-2px) scale(1.04); box-shadow:0 16px 38px rgba(0,0,0,.32); filter:saturate(1.08); }

/* ===== Scroll-to-top مع تقدّم دائري (يسار) ===== */
.scroll-top{
  --size:56px;
  position:fixed;
  left:24px; bottom:24px;
  width:var(--size); height:var(--size);
  border-radius:50%;
  /* conic-gradient للتقدم */
  background: conic-gradient(var(--scroll-fill) var(--p,0%), var(--scroll-track) 0);
  color:#fff; display:grid; place-items:center;
  cursor:pointer; z-index:1000;
  box-shadow:0 12px 30px rgba(0,0,0,.25);
  transition:opacity .2s ease, transform .2s ease;
  opacity:0; visibility:hidden; /* تظهر بعد التمرير */
}
.scroll-top::after{
  /* قرص داخلي لعمل الحلقة */
  content:""; position:absolute; inset:4px;
  background:#16213e; border-radius:50%;
}
.scroll-top .arrow{
  position:relative; z-index:1;
  font-size:22px; transform:translateY(-1px);
}
.scroll-top:hover{ transform:translateY(-2px); }
.scroll-top.show{ opacity:1; visibility:visible; }

/* موبايل */
@media (max-width:640px){
  .fab-whatsapp, .scroll-top{ width:52px; height:52px; }
  .scroll-top{ left:16px; bottom:16px; }
  .fab-whatsapp{ right:16px; bottom:16px; }
}


/* اقلب الجوانب: واتساب يسار — السهم يمين */
.fab-whatsapp{
  left: 24px;
  right: auto;
}

.scroll-top{
  right: 24px;
  left: auto;
}

/* موبايل */
@media (max-width:640px){
  .fab-whatsapp{
    left: 16px;
    right: auto;
  }
  .scroll-top{
    right: 16px;
    left: auto;
  }
}




/* زر المزيد في نهاية سكشن الخدمات */
.services-rtl .svc-cta {
    text-align: center;
    margin-top: 47px;
}
.services-rtl .svc-more{
  display:inline-block;
  padding:12px 22px;
  border-radius:12px;
  background:#15384f;
  border:2px solid var(--c-primary); /* #11a09a */
  color:#ffffff;
  text-decoration:none;
  font-weight:700;
  transition:.2s;
}
.services-rtl .svc-more:hover{
  background:#393f43;
  color:#fff;
  border-color:#fab519; /* ذهبي مثل زر العملاء */
}


/* ========= قصة نجاحات – كروت ثابتة داخل حدود ========= */
.stories-page{
  padding: 32px 0 48px;
  background: transparent; /* يرث خلفية موقعك */
  font-family: "Tajawal", system-ui, sans-serif;
}
.stories-page .sp-head{ text-align:center; margin-bottom: 16px; }
.stories-page .sp-title{
  margin:0; font-weight:800; color:#fff; font-size: clamp(26px,4vw,36px);
  position:relative; display:inline-block;
}
.stories-page .sp-title::after {
    content: "";
    display: block;
    width: 110px;
    height: 4px;
    background: #fab519;
    margin: 10px auto 54px;
    border-radius: 0;
}
.stories-page .sp-sub{ margin:0; color:#cbd5e1; opacity:.9 }

/* الشبكة: عمودان على الديسكتوب – عمود واحد على الجوال */
.ss-grid{
  max-width: 1160px; margin: 18px auto 0;
  display:grid; gap:22px;
  grid-template-columns: repeat(2, minmax(280px,1fr));
}
@media (max-width: 820px){
  .ss-grid{ grid-template-columns: 1fr; }
}

/* البطاقة داخل حدود بيضاء على ستايل جدارة */
.ss-card{
  display:grid; grid-template-columns: 118px 1fr; align-items:center; gap:18px;
  background:#14294b;
  border: 2px solid #fff;        /* الحد الأبيض مثل جدارة */
  border-radius: 20px;
  padding: 22px;
  overflow:hidden;
  position:relative;
  box-shadow: 0 10px 28px rgba(0,0,0,.18);
  transition: transform .2s ease, box-shadow .25s ease, border-color .25s ease;
}
.ss-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 16px 44px rgba(0,0,0,.25);
  border-color:#ffffff;          /* يبقى أبيض – اللمعة بالأيقونة والحافة الداخلية */
}

/* خط داخلي ملوّن خفيف */
.ss-card::after{
  content:""; position:absolute; inset:10px;
  border-radius: 14px; pointer-events:none;
  border:1px solid currentColor; opacity:.35;
}
.ss-card.gold{ color:#F0B24A; }   /* يضبط لون الخط الداخلي */
.ss-card.teal{ color:#11A09A; }

/* أيقونة داخل مربع ذهبي */
.ss-icon{
  width:118px; height:118px; border-radius:16px;
  background:#fab519; display:grid; place-items:center;
  box-shadow: -4px 4px 0 1px #0e243f inset;
}
.ss-icon img{ width:76px; height:76px; object-fit:contain; }

/* النص */
.ss-body h3{
  margin:0 0 6px; color:#fab519; font-size:clamp(20px,3.2vw,24px);
}
.ss-body p{
  margin:0; color:#ffffff; line-height:1.95; font-weight:600;
}

/* تحسينات صغيرة للشاشات الأصغر */
@media (max-width: 520px){
  .ss-card{ grid-template-columns: 86px 1fr; padding:16px; }
  .ss-icon{ width:86px; height:86px; }
  .ss-icon img{ width:56px; height:56px; }
}


/* ===== عرض عمودي ممدود لأربع بطاقات ===== */
.stories-page.sp-vertical .ss-grid{
  /* عمود واحد — أربع بطاقات تحت بعض */
  grid-template-columns: 1fr !important;
  gap: 22px;
}

/* اجعل الحاوية أوسع قليلًا إن رغبت */
.stories-page.sp-vertical .nb-container{
  width: min(1200px, 94vw);
}

/* المستطيل الممدود: ارتفاع مريح وتوزيع أفقي داخل البطاقة */
.stories-page.sp-vertical .ss-card{
  grid-template-columns: 140px 1fr;   /* مساحة أيقونة ثم نص */
  padding: 26px 28px;                 /* تنفّس داخلي أكبر */
  min-height: 148px;                  /* يعطي شعور “ممدود” */
}

/* أيقونة أكبر قليلًا لتوازن المساحة */
.stories-page.sp-vertical .ss-icon{
  width: 140px; height: 140px; border-radius: 16px;
}
.stories-page.sp-vertical .ss-icon img{
  width: 82px; height: 82px;
}

/* العنوان والنص بعرض كامل داخل المستطيل */
.stories-page.sp-vertical .ss-body h3{
  font-size: clamp(22px, 2.6vw, 26px);
  margin-bottom: 6px;
}
.stories-page.sp-vertical .ss-body p{
  font-size: 1.05rem;
  line-height: 1.95;
  margin: 0;
}

/* موبايل — يبقى عمودي لكن نقلل الأبعاد */
@media (max-width: 580px){
  .stories-page.sp-vertical .ss-card{
    grid-template-columns: 96px 1fr;
    padding: 16px;
    min-height: 0;
  }
  .stories-page.sp-vertical .ss-icon{ width:96px; height:96px; }
  .stories-page.sp-vertical .ss-icon img{ width:56px; height:56px; }
  .stories-page.sp-vertical .ss-body p{ font-size: .98rem; line-height: 1.9; }
}




.news-card .news-img{
  height: 220px;
  background-size: cover;
  background-position: center;
  border-radius: 14px;
}
.news-card .nb-btn{ margin-top: 10px; }


.news-card {
    background: rgb(21 56 79);
    border: 1px solid rgb(17 160 154);
    border-radius: 14px;
    overflow: hidden;
}

a.btn-bh
 {
    display: inline-block;
    padding: 12px 22px;
    border-radius: 12px;
    background: #15384f;
    border: 2px solid var(--c-primary);
    color: #ffffff;
    text-decoration: none;
    font-weight: 700;
    transition: .2s;
}
a.btn-bh:hover{
   background:#393f43;
  color:#fff;
  border-color:#fab519;
}



/* =================== ORBIT CONTACT (سكشن جديد بالكامل) =================== */
:root{
  /* لو عندك متغيّرات جاهزة ستُستخدم، وإلا هذه القيم الافتراضية */
  --oc-bg-1: #0e1a33;
  --oc-bg-2: #0b1427;
  --oc-gold: #F0B24A;
  --oc-teal: #11A09A;
  --oc-text: #e9f1ff;
  --oc-muted: #b8c7e6;
}

.orbit-contact{
  position: relative;
  isolation: isolate;
  padding: clamp(40px, 8vw, 90px) 18px;
  color: var(--oc-text);
  background:
    radial-gradient(1200px 600px at 90% -10%, color-mix(in oklab, var(--oc-teal) 28%, transparent), transparent 60%),
    radial-gradient(900px 520px at 10% 110%, color-mix(in oklab, var(--oc-gold) 26%, transparent), transparent 60%),
    linear-gradient(180deg, var(--oc-bg-1), var(--oc-bg-2));
  overflow: clip;
  direction: rtl;
  font-family: "Tajawal", system-ui, sans-serif;
}

/* حاوية العرض */
.orbit-contact .oc-wrap{
  width: min(1200px, 92vw);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(22px, 4vw, 46px);
  align-items: center;
}
@media (max-width: 980px){
  .orbit-contact .oc-wrap{ grid-template-columns: 1fr; }
}

/* الخلفية الزخرفية */
.orbit-contact .oc-decor{ position:absolute; inset:0; z-index:-1; pointer-events:none; }
.orbit-contact .oc-grid{
  position:absolute; inset:-20% -10%;
  background:
    radial-gradient(40% 50% at 80% 0%, rgba(255,255,255,.07), transparent 55%),
    repeating-linear-gradient(0deg, transparent 0 32px, rgba(255,255,255,.06) 32px 33px),
    repeating-linear-gradient(90deg, transparent 0 32px, rgba(255,255,255,.06) 32px 33px);
  mask: radial-gradient(1800px 900px at 100% -10%, #000 52%, transparent 65%);
  opacity:.65;
}
.orbit-contact .oc-blob{
  position:absolute; width:52vmax; height:52vmax; border-radius:50%;
  filter: blur(8px) saturate(120%); mix-blend-mode:screen; opacity:.8;
  animation: oc-float 16s ease-in-out infinite;
}
.orbit-contact .oc-blob-a{
  left:-18vmax; top:-10vmax;
  background: radial-gradient(35% 35% at 35% 35%, rgba(17,160,154,.65), transparent 60%);
}
.orbit-contact .oc-blob-b{
  right:-22vmax; top:55%;
  background: radial-gradient(40% 40% at 70% 60%, rgba(240,178,74,.7), transparent 65%);
  animation-duration:20s; animation-delay:-3s;
}
@keyframes oc-float{
  0%,100%{ transform: translate3d(0,0,0) }
  50%   { transform: translate3d(-6vmax, 4vmax, 0) }
}

/* النص */
.orbit-contact .oc-text .oc-kicker {
    display: inline-flex
;
    align-items: center;
    gap: 10px;
    color: #fab519;
    font-weight: 800;
    font-size: clamp(16px, 2vw, 20px);
}
.orbit-contact .oc-text .oc-kicker .dot{
  width:10px; height:10px; border-radius:50%;
  background: var(--oc-gold); box-shadow: 0 0 12px 2px color-mix(in oklab, var(--oc-gold) 80%, transparent);
}
.orbit-contact .oc-text h2{
  margin: 10px 0 6px;
  font-size: clamp(28px, 5vw, 46px);
  line-height: 1.2;
}
.orbit-contact .oc-text h2 span {
    color: #fab519;
    text-shadow: 0px 0px 12px #fabb2c8a, 0 0 63px 
 color-mix(in oklab, var(--oc-gold) 30%, #00000000);
}
.orbit-contact .oc-lead{ color: var(--oc-muted); opacity:.95; margin: 8px 0 12px; line-height: 1.9; }
.orbit-contact .oc-points{
  list-style:none; padding:0; margin:14px 0 0; display:grid; gap:10px;
}
.orbit-contact .oc-points li{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 14px; border-radius:12px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.18);
  box-shadow: inset 0 0 0 1px rgba(17,160,154,.16);
}
.orbit-contact .oc-points li::before{
  content:""; width:10px; height:10px; border-radius:50%;
  background: linear-gradient(90deg, var(--oc-gold), var(--oc-teal));
}

/* البطاقة */
.orbit-contact .oc-card{
  position: relative;
  border-radius: 22px;
  padding: clamp(20px, 3.3vw, 30px);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 20px 50px rgba(0,0,0,.35);
  overflow:hidden;
}
.orbit-contact .oc-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 0.5px;
    background: #11a09aad;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    border: 1.5px solid transparent;
    pointer-events: none;
    animation: oc-spin 18s linear infinite;
    opacity: .9;
}

@keyframes oc-spin{ to{ --_ang: 360deg; } }

/* النموذج */
.orbit-contact .oc-form{ display:grid; gap: 39px; }
.orbit-contact .oc-row{ display:grid; grid-template-columns: 1fr 1fr; gap:16px }
@media (max-width:640px){ .orbit-contact .oc-row{ grid-template-columns:1fr } }

.orbit-contact .oc-field{ position:relative }
.orbit-contact .oc-input{
  width:100%;
  padding: 16px 14px 12px;
  background: linear-gradient(180deg, rgba(16,34,60,.78), rgba(11,26,48,.72));
  border: 1.5px solid color-mix(in oklab, var(--oc-teal) 40%, rgba(255,255,255,.22));
  border-radius: 14px;
  color:#fff; font-size: 15.5px; outline:none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 10px 24px rgba(0,0,0,.18);
  transition: border-color .25s, box-shadow .25s, transform .12s;
}
.orbit-contact .oc-input:focus{
  border-color: var(--oc-gold);
  transform: translateY(-1px);
}
.orbit-contact .oc-textarea{ min-height: 120px; resize: none; }

/* الليبل العائم */
.orbit-contact .oc-label{
  position:absolute; left:12px; top:14px; pointer-events:none;
  color:#9fb4d9; font-size:13.5px; transition: .2s;
  background: transparent; padding:0 4px;
}
.orbit-contact .oc-input:focus + .oc-label,
.orbit-contact .oc-input:not(:placeholder-shown) + .oc-label{
  transform: translateY(-26px) scale(.92);
  color:#fff; background:#12284a; border:1px solid var(--oc-gold);
  border-radius:16px; padding:2px 10px; font-weight:700;
}

/* select مخصص لكن أصلي الوصولية */
.orbit-contact .oc-select{ position:relative }
.orbit-contact .oc-select .oc-input {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-inline-end: 36px;
    font-family: 'Tajawal';
}
.orbit-contact .oc-caret{
  position:absolute; inset-inline-end:12px; top:50%; transform:translateY(-50%) rotate(45deg);
  width:10px; height:10px; border:2px solid #96b3e9; border-left:none; border-top:none; pointer-events:none;
}

/* زر الإرسال */
.orbit-contact .oc-btn {
    display: block;
    width: 100%;
    border: 0;
    border-radius: 16px;
    padding: 14px 18px;
    background: #15384f;
    color: #ffffff;
    font-weight: 900;
    font-size: 16.5px;
    cursor: pointer;
    box-shadow: 0px 0px 0px 1px rgb(17 160 154), 0 0 0px 0px 
 color-mix(in oklab, var(--oc-gold) 20%, transparent);
    transition: transform .18s ease, box-shadow .22s ease, filter .2s ease;
    font-family: 'Tajawal';
}
.orbit-contact .oc-btn:hover {
    transform: translateY(-2px);
    background: #101f36;
    box-shadow: 0px 0px 0px 1px rgb(232 172 73), 0 0 0px 0px 
 color-mix(in oklab, #f0b24a00 20%, transparent);
}
/* احترام تقليل الحركة */
@media (prefers-reduced-motion: reduce){
  .orbit-contact .oc-blob,
  .orbit-contact .oc-card::before{ animation: none !important; }
}


/* حاوية القائمة المخصّصة فوق الـ select */
.oc-select{ position:relative }

/* نخفي الـ select لكن نُبقيه للوصولية والنماذج */
.oc-select select.oc-input{
  position:absolute; inset:0;
  width:100%; height:100%;
  opacity:0; pointer-events:none;
}

/* الزر الظاهر (يستعير ستايل الحقل) */
.oc-select .oc-toggle{
  width:100%;
  padding:16px 14px;
  border-radius:14px;
  border:1.5px solid color-mix(in oklab, var(--oc-teal) 40%, rgba(255,255,255,.22));
  background: linear-gradient(180deg, rgba(16,34,60,.78), rgba(11,26,48,.72));
  color:#fff; font-size:15.5px; text-align:right; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between;
}

/* سهم */
.oc-select .oc-caret{
  width:10px; height:10px; margin-inline-start:10px;
  border:2px solid #96b3e9; border-left:none; border-top:none;
  transform: rotate(45deg);
  transition: transform .2s ease;
}
.oc-select.open .oc-caret{ transform: rotate(225deg) }

/* القائمة */
.oc-menu{
  position:absolute; inset-inline:0; top:calc(100% + 6px);
  background:#0f1b33;
  border:1px solid #fab519;
  border-radius:10px;
  box-shadow:0 10px 28px rgba(0,0,0,.28);
  padding:6px 0; margin:0; list-style:none;
  max-height:240px; overflow:auto;
  display:none; z-index:30;
}
.oc-select.open .oc-menu{ display:block }

/* العنصر */
.oc-option{
  padding:12px 16px; color:#eaf0f7; cursor:pointer;
  transition:background .15s ease, color .15s ease, font-weight .15s ease;
}

/* فاصل ذهبي تحت كل عنصر ما عدا الأخير */
.oc-option:not(:last-child){
  border-bottom:1px solid rgba(250,181,25,.35);
}

/* هوفر/اختيار ذهبي */
.oc-option:hover, .oc-option.is-active, .oc-option[aria-selected="true"] {
    background: #0f1b33;
    color: #ffffff;
    font-weight: 800;
}

/* لبل عائم عند الفتح/الاختيار */
.oc-select.open + .oc-label,
.oc-select.has-value + .oc-label{
  transform: translateY(-26px) scale(.92);
  color:#fff; background:#12284a; border:1px solid var(--oc-gold);
  border-radius:16px; padding:2px 10px; font-weight:700;
}



/* ====== Article (تفاصيل الخبر) ====== */
:root{
  /* يستخدم ألوانك إن كانت معرّفة سلفًا */
  --bh-gold: var(--c-secondary, #fab519);
  --bh-teal: var(--c-primary,  #11a09a);
  --bh-deep: var(--c-deep,     #16213e);
  --bh-royal:var(--c-royal,    #0f3460);
  --bh-text: #e9f1ff;
  --bh-muted:#b8c7e6;
}

.bh-article {
    position: relative;
    color: #fff;
    background: radial-gradient(1200px 600px at 95% -10%, rgba(17, 160, 154, .18), transparent 60%), linear-gradient(180deg, var(--bh-deep), var(--bh-royal));
    padding-bottom: 78px;
}

/* هيرو */
.bh-hero{
  position:relative; isolation:isolate; min-height: 48vh; display:grid; place-items:end center;
}
.bh-hero img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2;
  filter:contrast(1.02) saturate(1.05);
}
.bh-hero::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background: linear-gradient(180deg, rgba(0,0,0,.2), rgba(0,0,0,.55) 55%, rgba(0,0,0,.75));
}
/* عنوان فوق الصورة */
.bh-hero .bh-hero-inner {
    width: min(1100px, 92vw);
    padding: clamp(18px, 3vw, 28px);
    margin-bottom: 63px;
    text-align: center;
}


.bh-kicker{
  display:inline-flex; align-items:center; gap:10px;
  color: var(--bh-gold); font-weight:800; font-size: clamp(14px, 1.8vw, 18px);
}
.bh-kicker .dot{width:10px; height:10px; border-radius:50%; background:var(--bh-gold); box-shadow:0 0 10px 2px rgba(250,181,25,.6);}
.bh-title {
    margin: 8px 0 6px;
    font-size: clamp(26px, 4.8vw, 44px);
    line-height: 1.25;
    font-weight: 800;
    text-wrap: balance;
    font-size: 52px;
}
.bh-lead {
    color: #e4e4e4;
    margin: 19px 0 57px;
    font-size: clamp(20px, 2.2vw, 21px);
}
/* ميتاداتا + مشاركة */
.bh-meta{
  display:flex; gap:14px; align-items:center; flex-wrap:wrap; color:#cfe1ffcc; font-size:14px;
}
.bh-meta .sep{opacity:.5}
.bh-share{margin-inline-start:auto; display:flex; gap:10px}
.bh-share a{
  width:38px;height:38px;display:grid;place-items:center;border-radius:10px;
  background:#15384f;border:1px solid #11a09a88;color:#fff;text-decoration:none;transition:.2s;
}
.bh-share a:hover{transform:translateY(-2px); border-color:var(--bh-gold); box-shadow:0 0 10px #fab51955}

/* محتوى */
.bh-body {
    width: min(1100px, 92vw);
    margin-inline: auto;
    margin-top: -79px;
    position: relative;
    z-index: 2;
}
.bh-card{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 18px;
  padding: clamp(18px, 3.2vw, 28px);
  box-shadow: 0 20px 50px rgba(0,0,0,.35);
}
.bh-card p{margin:0 0 14px; line-height:1.95; color:#fff}
.bh-card p.muted{color:var(--bh-muted)}
.bh-card .tick{
  list-style:none; padding:0; margin:10px 0 14px; display:grid; gap:10px;
}
.bh-card .tick li{
  display:flex; gap:10px; align-items:flex-start;
  padding:10px 12px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.18);
  border-radius:12px; box-shadow: inset 0 0 0 1px rgba(17,160,154,.16);
}
.bh-card .tick li::before{
  content:""; width:10px;height:10px;border-radius:50%;
  margin-top:6px;
  background: linear-gradient(90deg, var(--bh-gold), var(--bh-teal));
}

/* صندوق تنبيه */
.bh-note{
  border:1px solid var(--bh-gold);
  background: rgba(250,181,25,.08);
  color:#fff; padding:14px 16px; border-radius:14px; margin:12px 0 2px;
}

/* تنقل أسفل */
.bh-actions{
  display:flex; gap:12px; justify-content:space-between; align-items:center; margin-top:18px;
}
.bh-back, .bh-more{
  display:inline-flex; align-items:center; gap:8px; text-decoration:none; color:#fff;
  background:#15384f; border:2px solid var(--bh-teal); padding:10px 14px; border-radius:12px;
  transition:.2s;
}
.bh-back:hover, .bh-more:hover{border-color:var(--bh-gold); transform:translateY(-2px)}

/* تفاصيل النص */
.bh-card h3{margin:16px 0 8px; color:var(--bh-gold); font-size:22px}
.bh-card ul{margin:0 0 14px 0; padding:0 18px}
.bh-card li{margin:6px 0}

/* تجاوب */
@media (max-width: 680px){
  .bh-share{margin-inline-start:0}
  .bh-meta{gap:10px}
}



/* صف الأزرار */
.cta-row{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
}

/* زر عام بنفس الستايل */
.cta-btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 18px;
  border-radius:14px;                 /* نفس الانحناء الظاهر بالصورة */
  text-decoration:none;
  font-weight:800;
  line-height:1;
  color:#fff;
  background:#15384f;                 /* خلفية داكنة مثل زرّك */
  border:2px solid var(--c-secondary, #fab519); /* إطار ذهبي */
  box-shadow:0 0 0 2px rgba(0,0,0,.12) inset;   /* ملمس خفيف */
  transition:transform .18s ease, box-shadow .22s ease, background .22s ease, color .22s ease, border-color .22s ease;
}
.cta-btn i{ font-size:18px }

/* هوفر عام */
.cta-btn:hover{
  transform: translateY(-2px);
  box-shadow:0 10px 24px rgba(0,0,0,.25);
}

/* نسخة زرّك الأساسي (إن احتجت تمييزه) */
.cta-outline:hover{
  background:rgba(250,181,25,.12);
}

/* واتساب */
.cta-whatsapp
 {
    border-color: #25D366;
    background: rgb(21 56 79);
    color: #fff;
    font-weight: 600;
}
.cta-whatsapp:hover {
    background: rgb(37 211 102);
    color: #15384f;
    box-shadow: 0 0 0 3px rgba(37, 211, 102, .25) inset;
}

/* موبايل: تبقى الأزرار مرتبة تحت بعض لو ضاق المكان */
@media (max-width:600px){
  .cta-row{ gap:10px }
  .cta-btn{ width:100%; justify-content:center }
}




p.news-desc {
    line-height: 31px;
}



/* ========= Service Article (scoped) ========= */
:root{
  --svc-bg1: var(--c-deep, #0f203d);
  --svc-bg2: var(--c-royal, #0f3460);
  --svc-gold: var(--c-secondary, #fab519);
  --svc-teal: var(--c-primary, #11a09a);
  --svc-text: #e9f1ff;
  --svc-muted:#b8c7e6;
}

/* الحاوية الرئيسية للصفحة — كل شيء تحتها فقط */
#svc-page{
  position:relative; isolation:isolate;
  background:
    radial-gradient(1200px 600px at 95% -10%, color-mix(in oklab, var(--svc-teal) 26%, transparent), transparent 60%),
    radial-gradient(900px 520px at 5% 110%, color-mix(in oklab, var(--svc-gold) 22%, transparent), transparent 60%),
    linear-gradient(180deg, var(--svc-bg1), var(--svc-bg2));
  color:var(--svc-text);
  padding: clamp(28px, 6vw, 60px) 18px;
  font-family:'Tajawal', system-ui, sans-serif;
}

/* HERO */
#svc-page .svc-hero{
  width:min(1200px, 92vw);
  margin-inline:auto;
  display:grid; align-items:stretch;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(18px, 3.5vw, 36px);
}
@media (max-width: 980px){
  #svc-page .svc-hero{ grid-template-columns:1fr; }
}

#svc-page .svc-hero-card{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 20px;
  padding: clamp(18px, 3vw, 28px);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 16px 40px rgba(0,0,0,.32);
  position: relative;
  overflow: hidden;
}
#svc-page .svc-hero-card {
    background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .03));
    border: 1px solid rgb(17 160 154);
    border-radius: 20px;
    padding: clamp(18px, 3vw, 28px);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0px 0px 0px 0px rgb(17 160 154);
    position: relative;
    overflow: hidden;
}
#svc-page .svc-kicker{ display:inline-flex; align-items:center; gap:10px; color:var(--svc-gold); font-weight:800 }
#svc-page .svc-kicker .dot{ width:10px; height:10px; border-radius:50%; background:var(--svc-gold); box-shadow:0 0 10px 2px color-mix(in oklab, var(--svc-gold) 80%, transparent) }
#svc-page .svc-title {
    margin: 1.3rem 0 1.6rem;
    font-size: clamp(26px, 4.6vw, 40px);
    line-height: 1.2;
}#svc-page .svc-lead{ color:var(--svc-muted); line-height:1.9; font-weight:600 }

#svc-page .svc-hero-media{
  margin:0; border-radius:20px; overflow:hidden; position:relative;
  border:1px solid rgba(255,255,255,.18);
  box-shadow: 0 16px 40px rgba(0,0,0,.32);
}
#svc-page .svc-hero-media img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter: saturate(1.02) contrast(1.02);
}

/* BODY */
#svc-page .svc-body{ width:min(1000px, 92vw); margin: clamp(18px, 4vw, 30px) auto 0; }
#svc-page .svc-card{
  background:#15384f;
  border:1px solid var(--svc-teal);
  border-radius:18px;
  padding: clamp(18px, 3vw, 26px);
  box-shadow: 0 12px 30px rgba(0,0,0,.28);
}
#svc-page .svc-card h2{
  margin:0 0 12px; font-size: clamp(20px, 3.6vw, 26px);
  color:#fff; position:relative; display:inline-block;
}
#svc-page .svc-card h2::after{
  content:""; display:block; width:140px; height:3px; background:var(--svc-gold); margin:10px 0 0;
}

/* Steps timeline */
#svc-page .svc-steps{
  list-style:none; margin:18px 0 0; padding:0; position:relative;
}
#svc-page .svc-steps li{
  position:relative; padding:14px 14px 14px 0; margin:0 0 10px;
  border:1px solid rgba(255,255,255,.12); border-radius:14px;
  background: rgba(255,255,255,.04);
}
#svc-page .svc-steps li::before{
  content:""; position:absolute; inset-inline-start:-10px; top:22px;
  width:10px; height:10px; border-radius:50%;
  background: linear-gradient(90deg, var(--svc-gold), var(--svc-teal));
  box-shadow:0 0 0 3px rgba(255,255,255,.12);
}
#svc-page .svc-steps h4{ margin:0 0 6px; color:var(--svc-gold); font-size:18px }
#svc-page .svc-steps p{ margin:0; color:#eaf0f7 }
#svc-page .svc-bullets{ margin:6px 0 0 0; padding:0 18px 0 0; list-style:disc; color:#eaf0f7 }
#svc-page .svc-bullets li{ margin:4px 0 }

/* Actions */
#svc-page .svc-actions {
    display: flex
;
    flex-wrap: wrap;
    gap: 171px;
    align-items: center;
    justify-content: flex-start;
    margin-top: 16px;
}
#svc-page .svc-actions .bh-back{
  color:#fff; text-decoration:none; border:1px solid rgba(255,255,255,.22);
  padding:10px 14px; border-radius:12px; display:inline-flex; align-items:center; gap:8px;
  background:#122d53;
}
#svc-page .svc-actions .bh-back:hover{
  border-color:var(--svc-gold);
  box-shadow:0 0 0 2px rgba(250,181,25,.25);
}

/* أزرار هذه الصفحة فقط */
#svc-page .cta-btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:12px 18px; border-radius:12px; font-weight:800; text-decoration:none;
  transition:.2s; border:2px solid transparent;
}
#svc-page .cta-whatsapp{
  background:#15384f; color:#fff; border-color: var(--svc-teal);
}
#svc-page .cta-whatsapp:hover {
    background: #173a4e;
    border-color: var(--svc-gold);
    box-shadow: 0 0 9px 1px rgb(250 181 25 / 0%);
}









/* ازالة أي طبقات أو ضباب تسبب بهتان النص */
#svc-page .svc-hero-card {
    background: #15384f;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* إلغاء الطبقة الدوّارة اللامعة */
#svc-page .svc-hero-card::before{
  content: none !important;
  opacity: 0 !important;
}

/* اجعل ألوان النص صريحة */
#svc-page .svc-title {
    color: #fab519;
}#svc-page .svc-lead,
#svc-page .svc-hero-card p{ color:#fff; opacity:1; }

/* لو تريد إبقاء إطار خفيف بدل إلغاءه كليًا، استبدل سطر border:0 أعلاه بهذا السطر: */
/* border: 1px solid rgba(255,255,255,.18); */



















:root{
  --v2-bg1: var(--c-deep, #0f203d);
  --v2-bg2: var(--c-royal, #0f3460);
  --v2-gold: var(--c-secondary, #fab519);
  --v2-teal: var(--c-primary, #11a09a);
  --v2-text:#e9f1ff; --v2-muted:#b8c7e6;
  --v2-ph:#d1d1d1; /* لون الـ placeholder */
}

/* صفحة كاملة */
#regv2-page{
  isolation:isolate; padding:clamp(28px,6vw,60px) 18px; color:var(--v2-text);
  background:
    radial-gradient(1200px 600px at 95% -10%, color-mix(in oklab, var(--v2-teal) 22%, transparent), transparent 60%),
    radial-gradient(900px 520px at 5% 110%, color-mix(in oklab, var(--v2-gold) 18%, transparent), transparent 60%),
    linear-gradient(180deg,var(--v2-bg1),var(--v2-bg2));
  font-family:"Tajawal",system-ui,sans-serif;
}

/* HERO */
#regv2-page .regv2-hero{width:min(1100px,92vw);margin-inline:auto}
#regv2-page .regv2-hero-card{
  background:#15384f;border:1px solid rgb(17 160 154);border-radius:20px;
  padding:clamp(20px,3.6vw,30px);box-shadow:0 0 3px 0 rgb(17 160 154);text-align:center;
}
#regv2-page .regv2-title{margin:.3rem 0 1.4rem;font-size:clamp(26px,4.6vw,40px);color:#fab519}
#regv2-page .regv2-lead {
    color: #ffffff;
}
/* FORM wrapper */
#regv2-page .regv2-form{width:min(1100px,92vw);margin:18px auto 0;display:grid;gap:14px}

/* Panel */
#regv2-page .regv2-panel{border:1px solid #11a09a;border-radius:16px;overflow:hidden;background:#1e4056}
#regv2-page .regv2-head{display:flex;align-items:center;gap:12px;justify-content:space-between;padding:16px 18px;background:#15384f;color:#fff;font-weight:900;cursor:pointer;list-style:none}
#regv2-page .regv2-head::-webkit-details-marker{display:none}
#regv2-page .regv2-head .chev{transition:.25s}
#regv2-page .regv2-panel[open] .regv2-head .chev{transform:rotate(180deg)}
#regv2-page .regv2-body{padding:clamp(16px,2.6vw,22px)}

/* Grid */
#regv2-page .regv2-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
#regv2-page .regv2-field{display:flex;flex-direction:column;gap:10px}
#regv2-page .regv2-field.col-2{grid-column:1 / -1}
@media (max-width:780px){#regv2-page .regv2-grid{grid-template-columns:1fr}}

/* Inputs */
#regv2-page .regv2-input{
  width:100%;padding:16px 14px;background:#15384f;border:1px solid color-mix(in oklab,#11a09a 34%, rgb(17 160 154));
  border-radius:14px;color:#fff;outline:none;font-size:15.5px;transition:border-color .22s, box-shadow .22s
}
#regv2-page .regv2-input:focus{border-color:var(--v2-gold);box-shadow:0 0 0 3px rgba(250,181,25,.12),0 10px 24px rgba(0,0,0,.18)}
#regv2-page .regv2-textarea{min-height:140px;resize:vertical}
#regv2-page label{color:#eaf0f7;font-weight:800;font-size:14px}

/* Placeholder color (قوي) */
#regv2-page input.regv2-input::placeholder,
#regv2-page textarea.regv2-input::placeholder{color:var(--v2-ph)!important;opacity:1!important}
#regv2-page input.regv2-input::-webkit-input-placeholder,
#regv2-page textarea.regv2-input::-webkit-input-placeholder{color:var(--v2-ph)!important;opacity:1!important}
#regv2-page input.regv2-input::-moz-placeholder,
#regv2-page textarea.regv2-input::-moz-placeholder{color:var(--v2-ph)!important;opacity:1!important}
#regv2-page input.regv2-input:-ms-input-placeholder,
#regv2-page textarea.regv2-input:-ms-input-placeholder{color:var(--v2-ph)!important}

/* Pills */
#regv2-page .regv2-pills{display:flex;flex-wrap:wrap;gap:10px}
#regv2-page .pill{display:inline-flex;align-items:center}
#regv2-page .pill input{display:none}
#regv2-page .pill span{display:inline-block;padding:10px 14px;border-radius:999px;border:1.6px solid rgba(255,255,255,.22);background:#143357;color:#fff;cursor:pointer;font-weight:800}
#regv2-page .pill input:checked + span{border-color:var(--v2-gold);box-shadow:0 0 0 3px rgba(250,181,25,.18)}

/* Repeaters & actions */
#regv2-page .regv2-repeaters .rep{border:1px dashed rgba(255,255,255,.28);border-radius:12px;padding:14px;margin:14px 0}
#regv2-page .rep-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
#regv2-page .rep-remove{background:transparent;border:0;color:#ffb4b4;cursor:pointer;font-weight:800}
#regv2-page .regv2-subtitle{margin:12px 0 8px;color:#fff;font-weight:900}

/* CTA-like add buttons (مطابقة لأزرار الموقع) */
#regv2-page .cta-like,
#regv2-page .btn-line{
  display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border-radius:12px;border:2px solid var(--v2-teal);
  background:#15384f;color:#fff;text-decoration:none;font-weight:800;cursor:pointer;transition:.2s
}
#regv2-page .cta-like:hover,#regv2-page .btn-line:hover{border-color:var(--v2-gold)}

/* Chips */
#regv2-page .chips{display:flex;flex-wrap:wrap;gap:10px;padding:10px;border:1px solid rgba(255,255,255,.18);border-radius:12px;background:#0f2a4a}
#regv2-page .chip{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;background:#173a4e;border-radius:999px}
#regv2-page .chip i{cursor:pointer}
#regv2-page .chip-input{background:transparent;border:0;outline:none;color:#fff;min-width:180px}

/* Packs */
#regv2-page .packs{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:900px){#regv2-page .packs{grid-template-columns:1fr}}
#regv2-page .pack{display:block;cursor:pointer}
#regv2-page .pack input{display:none}
#regv2-page .pack-body{height:100%;background:#15384f;border:1.6px solid var(--v2-teal);border-radius:14px;padding:16px}
#regv2-page .pack-body h4{margin:0 0 6px}
#regv2-page .pack-body .price{font-size:28px;font-weight:900}
#regv2-page .pack-body ul{margin:8px 0 0;padding:0 18px 0 0;list-style:disc}
#regv2-page .pack input:checked + .pack-body{box-shadow:0 0 0 3px rgba(250,181,25,.24);border-color:var(--v2-gold)}

/* Dropzone */
#regv2-page .regv2-dropzone{border:2px dashed rgba(255,255,255,.35);border-radius:14px;padding:22px;text-align:center;background:rgba(255,255,255,.04)}
#regv2-page .regv2-dropzone:focus{outline:2px solid var(--v2-gold)}
#regv2-page .regv2-dropzone .fa{font-size:28px;margin-bottom:6px}

/* Actions */
#regv2-page .regv2-actions{display:flex;gap:12px;align-items:center;margin-top:8px}
#regv2-page .regv2-submit{border:0;border-radius:12px;background:var(--v2-teal);color:#fff;font-weight:900;padding:14px 20px;cursor:pointer}
#regv2-page .regv2-submit:hover{filter:brightness(1.05)}
#regv2-page .regv2-whatsapp{display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border-radius:12px;border:2px solid var(--v2-teal);background:#15384f;color:#fff;text-decoration:none;font-weight:800}
#regv2-page .regv2-whatsapp:hover{border-color:var(--v2-gold)}























 :root{
    /* عدّل هذه القيم لتطابق هويتك بالضبط */
    --nb-navy: #0e2239;   /* الكحلي الأساسي للواجهة */
    --nb-teal: #14d19a;   /* التركواز/الأخضر المائل للأزرق (زرار الموقع) */
    --nb-gold: #f4a300;   /* الذهبي من الشعار */
    --nb-white: #ffffff;
    --panel-bg: rgba(255,255,255,0.92); /* خلفية زجاجية خفيفة */
    --panel-border: rgba(14,34,57,0.1);
    --shadow: 0 18px 50px rgba(14,34,57,0.25);
  }

  /* فقاعة الودجت */
  .nj-bubble{
    position:fixed; right:18px; bottom:20px;
    width:60px; height:60px; border-radius:50%;
    background: var(--nb-teal);
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; box-shadow: var(--shadow);
    z-index:9999; transition: transform .2s ease, box-shadow .2s ease;
  }
  .nj-bubble:hover{ transform: translateY(-2px); box-shadow: 0 22px 60px rgba(14,34,57,.35);}
  .nj-bubble .nj-icon{
    width: 32px; height: 32px; object-fit: contain; display:block;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,.15));
  }

  /* نافذة الدردشة */
  .nj-panel{
    position:fixed; right:18px; bottom:92px; width:360px; max-height:72vh;
    background: var(--panel-bg); border:1px solid var(--panel-border);
    border-radius:16px; box-shadow: var(--shadow);
    display:none; flex-direction:column; overflow:hidden; z-index:9999;
    backdrop-filter: blur(6px);
  }
  .nj-head{
    padding:14px 16px; color:var(--nb-white); font-weight:800;
    background: linear-gradient(135deg, var(--nb-teal), var(--nb-gold));
    letter-spacing:.3px;
  }
  .nj-log{ padding:10px 12px; overflow:auto; flex:1; }

  .nj-msg{
    margin:8px 0; padding:10px 12px; border-radius:12px; max-width:85%; line-height:1.65;
    box-shadow: 0 2px 8px rgba(14,34,57,.06);
  }
  .nj-user{ background:#e7f7ff; margin-left:auto; border:1px solid rgba(20,209,154,.15); }
  .nj-ai{ background:#f8fafc; border:1px solid rgba(14,34,57,.06); }

  .nj-form{ display:flex; gap:8px; padding:10px; border-top:1px solid var(--panel-border); background:rgba(255,255,255,.65);}
  .nj-form input{
    flex:1; padding:12px 12px; border:1px solid var(--panel-border); border-radius:12px;
    outline:none; background:#fff;
  }
  .nj-form input:focus{ border-color: var(--nb-teal); box-shadow: 0 0 0 3px rgba(20,209,154,.15); }

  .nj-form button{
    padding:12px 14px; border:0; border-radius:12px; cursor:pointer;
    background: var(--nb-teal); color:#fff; font-weight:700;
  }

  .nj-cta{
    display:inline-block; margin-top:8px; padding:8px 10px; border-radius:10px; cursor:pointer;
    background: var(--nb-navy); color:#fff; font-weight:600;
  }

  .nj-chip{
    display:inline-block; background: rgba(244,163,0,.12); color: #a96e00;
    border:1px solid rgba(244,163,0,.35);
    border-radius:999px; padding:4px 10px; margin:6px 6px 0 0; cursor:pointer; font-weight:600;
  }