/* ══════════════════════════════════════════════════════════════════════════
site.css — القواعد المشتركة لكل صفحات الموقع (الهيدر، الناف بار، الفوتر،
المتغيّرات، الأيقونات، ودجت الوصول، مسار التنقّل).
تُحمَّل في كل صفحة **قبل** ملف الصفحة الخاص، فيستطيع الأخير تجاوزها.
لا تكرّر أياً من هذه القواعد في ملفات الصفحات — عدّلها هنا مرة واحدة.
══════════════════════════════════════════════════════════════════════════ */
.main-logo img,.navbar-brand img{height:48px!important;width:auto!important;max-height:48px!important;max-width:140px!important}
.main-logo,.navbar-brand{height:48px!important;min-height:48px!important;max-height:48px!important}
.hero-img video{width:100%;height:100%;min-height:548px;object-fit:cover;display:block}
.hero .swiper-slide:first-child .hero-description{
max-width:720px!important;
font-size:17px!important;
line-height:1.8!important;
font-weight:400!important;
margin-top:10px!important;
margin-bottom:20px!important;
}
@media (max-width:768px){
.hero .swiper-slide:first-child .hero-description{
max-width:100%!important;
font-size:14px!important;
line-height:1.7!important;
margin-top:7px!important;
margin-bottom:14px!important;
}
}
.hugeicon{display:inline-block;vertical-align:middle;flex:none;color:currentColor}
.details-icon .hugeicon,.statistics-card .hugeicon,.announcement-icon{color:#1b8354}
.menu-tablet{flex-wrap:nowrap;align-items:center}
.menu-tablet .nav-item span{white-space:nowrap}
.navbar .nav-actions .nav-item span{white-space:nowrap}
/* تباعد القائمة الرئيسية على الديسكتوب — مطابق لصفحة الرئيسية.
كانت flex:1 1 auto + space-between: القائمة تتمدّد لكل العرض ثم تدفع
عناصرها للطرفين، فتتضخّم الفجوات كلما كبرت الشاشة بلا حد.
الـgap ضروري لأن .navbar-nav .nav-link له padding أفقي = 0. */
/* السلوك الأصلي لكل الديسكتوب: القائمة تتمدّد والمسافات تتوزّع بينها.
flex:1 1 auto مهم — لا يسمح بانكماش العناصر، فلا يلتفّ أي عنصر. */
@media (min-width:1200px){.navbar .navbar-collapse>ul.navbar-nav:not(.nav-actions){flex:1 1 auto!important;justify-content:space-between!important}}
/* على الشاشات العريضة (≥1700px) يصبح space-between
مبالغاً فيه — الفجوات تتجاوز 150px. هنا فقط نحدّها.
gap يحتاج !important لأن UDesign فيه .navbar .navbar-nav{gap:0!important}. */
@media (min-width:1700px){.navbar .navbar-collapse>ul.navbar-nav:not(.nav-actions){flex:0 1 auto!important;justify-content:flex-start!important;gap:clamp(24px,1.7vw,42px)!important}}
@media (min-width:1600px){.header__bottom>.container-fluid{max-width:1760px;margin-inline:auto}}
.quick-access-hugeicon{color:#1b8354!important;stroke:currentColor!important}
.contact-us.contact-us2 .dga-card:hover .quick-access-hugeicon{color:#fff!important}
.footer-ai-logo{height:42px;min-width:112px;padding:5px 10px;display:inline-flex;align-items:center;gap:7px;color:#fff;border:1px solid rgba(255,255,255,.35);border-radius:8px}
.footer-ai-icon{color:#fff}
.footer-ai-logo span{display:flex;flex-direction:column;line-height:1}
.footer-ai-logo strong{font-size:16px;letter-spacing:.5px}
.footer-ai-logo small{font-size:9px;margin-top:3px;white-space:nowrap}
@media(max-width:768px){.footer-ai-logo{min-width:auto;padding:5px 7px}.footer-ai-logo small{display:none}}
.img-card {
box-shadow: none !important;
}
/* saud-icons webfont fails to load on this local server (404/mime), so the real
breadcrumb separator glyph renders as tofu. Use a matching plain chevron instead. */
/* ── فاصل مسار التنقل ──────────────────────────────────────────────────────
قاعدة UDesign الأصلية تستخدم أيقونة من خط saud-icons، لكن قيمة content
في ملفها معطوبة: تُقرأ U+00EE U+00A4 U+0097 وهي بايتات EE A4 97 أي
U+E917 مرمزة مرتين (mojibake). فيرسم المتصفح محارف تالفة ⇒ مربع فارغ.
لذلك نستبدلها بحرف نصي. القيم هنا نحيفة ومطابقة لمقاس UDesign:
18px ووزن 400 ولون #9da4ae بدل 26px ووزن 600.
transform:none مقصود — U+203A له انعكاس ثنائي الاتجاه تلقائي، فيشير
يسارا في RTL بلا تدوير يدوي. */
.custom-breadcrumb > span::before {
content: "\203A" !important;
font-family: inherit !important;
transform: none !important;
font-size: 18px !important;
font-weight: 400 !important;
line-height: 1 !important;
vertical-align: middle !important;
color: #9da4ae !important;
}
/* ── أيقونة UserWay للوصول → أسفل اليمين في الاتجاه اللاتينيّ ──
أوراق UDesign تثبّت الأيقونة نفسها لا حاوِيَها:
body .uwy .uai, body .uwy .ulsti → position:fixed!important; right:20px!important
والمشروع العربيّ ينقلها إلى اليسار لأنّه من اليمين إلى اليسار.
أمّا هنا فالاتجاه لاتينيّ، فموضعها الطبيعيّ أسفل اليمين؛
نُثبّته صراحةً بدل الاتّكال على غياب التجاوز. */
body .uwy .uai,
body .uwy .ulsti {
right: 20px !important;
left: auto !important;
}
Because the icon is fixed independently of the .uwy container, moving the
container has no effect on it — the override must target the icon directly.
Same specificity (0,2,1) as the original, and this file loads after both
UDesign sheets, so it wins the cascade. */
body .uwy .uai,
body .uwy .ulsti {
left: 20px !important;
right: auto !important;
}
/* ── توسيط صف الناف بار داخل شريط الهيدر ────────────────────────────────────
.header__bottom ارتفاعه 72px لكنه عنصر كتلي بلا توسيط رأسي، فالصف
(≈48px) يجلس بالأعلى ويبقى ≈24px فراغاً تحته. */
.header__bottom {
display: flex;
align-items: center;
}
.header__bottom > .container-fluid {
width: 100%;
}
/* ── الهيدر الثابت يعلو محتوى الصفحة ────────────────────────────────────────
UDesign يعرّف z-index مرتين لنفس العنصر بتخصيص متساوٍ (0,1,0):
.fixed-top { z-index: 1030 } ثم لاحقاً .header { z-index: 99 }
فالأخيرة تفوز ويهبط الهيدر إلى 99. نعيده لطبقة Bootstrap القياسية.
التخصيص هنا (0,2,0) فيفوز بغضّ النظر عن ترتيب المصدر، و1030 تُبقي
offcanvas 1045 · modal 1055 · popover 1070 · tooltip 1080 فوقه كما صُمِّمت. */
.header.fixed-top {
z-index: 1030;
}
/* ── محاذاة عناصر القائمة التي بلا قائمة منسدلة ─────────────────────────────
UDesign يمنح الروابط تخطيط flex عبر
.navbar .dropdown:not(.dropend) > .dropdown-toggle
{ display:flex; align-items:center; gap:6px }
وهي تشترط .dropdown على الـ و .dropdown-toggle على الرابط.
"مركز الأعمال" وحده بلا قائمة منسدلة ( +