/* ==========================================================================
   1. إعدادات التنسيق العام والخطوط والخلفية الممتدة (css/base.css)
   ========================================================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Tajawal', sans-serif; /* تفعيل الخط العربي الاحترافي للمؤسسات المالية */
  scroll-behavior: smooth;
}

:root {
  -primary-color: #0B2545;      /* أزرق داكن يعكس الثقة والاستقرار السويسري */
  -secondary-color: #134074;    /* أزرق متوسط متناسق للعناوين والروابط */
  -accent-color: #ff9933;       /* برتقالي ذهبي للأزرار الهامة لشد الانتباه */
  -text-dark: #1F2937;          /* رمادي غامق مريح للعين للنصوص الطويلة */
  -bg-light: #F8FAFC;           /* خلفية رمادية خفيفة تفصل الأقسام */
}

body {
  color: var(--text-dark);
  line-height: 1.6;
  padding-top: 100px;            /* مسافة أمان لظهور التاغ لاين بوضوح ومنع الاختفاء خلف الهيدر */
  text-align: right;             /* توجيه المحتوى لليمين تلقائياً للغة العربية */
  
  /* استدعاء صورة ناطحة السحاب محلياً من سيرفر موقعك مباشرة وبشكل آمن ومضمون */
  background: 
    linear-gradient(to top, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.5) 40%, rgba(255, 255, 255, 0.85) 100%), 
    url('../images/buildings.jpg') no-repeat center bottom / cover !important;
  background-attachment: fixed !important;
}

/* 2. جعل الأقسام الرئيسية خفيفة/شفافة لتسمح بظهور صورة ناطحة السحاب خلفها */
main, 
.hero-section, 
.hero, 
section, 
.section {
  background-color: transparent !important;
}

/* تفعيل التأثير الزجاجي الفخم والضبابي خلف البطاقات الحاضنة للمحتوى */
.service-card, .criteria-container, .faq-accordion-item, .form-container, .team-card {
  background-color: rgba(255, 255, 255, 0.78) !important; /* خفض العتامة لتبرز تفاصيل البرج من الخلف بروعة */
  backdrop-filter: blur(12px) !important; /* ضبابية ذكية تمنع تداخل الحروف العربية مع زوايا الناطحة */
  border: 1px solid rgba(255, 255, 255, 0.4) !important; /* إطار زجاجي ناعم يزيد الفخامة */
}

/* ==========================================================================
   2. تنسيق الهيدر وشريط شريط التنقل العلوي والمقاس الجديد (64 بكسل)
   ========================================================================== */
.main-header {
  background-color: #ffffff;
  box-shadow: 0 2px 15px rgba(0,0,0,0.05);
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 1000;
}
.nav-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 12px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row-reverse;    /* عكس اتجاه عناصر الهيدر لتناسب القراءة العربية */
}

.original-logo-wrapper { 
  display: flex; 
  align-items: center; 
}
.original-logo-link { 
  display: flex; 
  align-items: center; 
  gap: 15px; 
  text-decoration: none;
  flex-direction: row-reverse;    /* عكس اتجاه عناصر الشعار بصرياً ليسبق اللوجو الكلمات */
}

/* ضبط أبعاد صندوق الشعار للمقاس النحيف والأنيق (64 بكسل) ومنع التكتل */
.logo-image-container { 
  width: 48px !important;         /* العرض المتناسب هندسياً */
  height: 64px !important;        /* الارتفاع المطلوب من طرفكم */
  display: flex; 
  align-items: center; 
  justify-content: center; 
}
.pure-original-s { 
  width: 100% !important; 
  height: 100% !important; 
  object-fit: contain !important; 
  transition: transform 0.4s ease; 
}

/* حركة التمرير التفاعلية الأنيقة والناعمة على الشعار الجديد بمؤشر الماوس */
.original-logo-link:hover .pure-original-s { 
  transform: scale(1.06) rotate(4deg); 
}

.original-brand-text { 
  display: flex; 
  flex-direction: column; 
  justify-content: center;
  text-align: right;              /* محاذاة نص الشعار العربي جهة اليمين */
}
.original-brand-text .main-text span { 
  font-size: 26px; 
  font-weight: 700; 
  letter-spacing: -0.5px; 
}
.lbl-blue   { color: #0066cc !important; }
.lbl-green  { color: #339932 !important; }
.lbl-orange { color: #ff9933 !important; }

.logo-sub-tagline { 
  font-size: 11px;                /* مقاس مثالي لانسيابية ووضوح الحروف العربية للتاغ لاين */
  font-weight: 500; 
  color: #555555; 
  margin-top: 2px; 
  white-space: nowrap; 
}

/* تنظيم قائمة الروابط العلوية الموجهة لليمين */
.nav-menu {
  display: flex;
  align-items: center;
}
.nav-menu a { 
  text-decoration: none; 
  color: var(--text-dark); 
  margin-right: 25px;             /* هوامش من اليمين بدلاً من اليسار للروابط العربية */
  margin-left: 0;
  font-weight: 500; 
  transition: color 0.3s; 
}
.nav-menu a:hover { 
  color: var(--secondary-color); 
}
.nav-menu .btn-nav { 
  background-color: var(--primary-color); 
  color: #fff; 
  padding: 10px 22px; 
  border-radius: 4px; 
}
.nav-menu .btn-nav:hover { 
  background-color: var(--accent-color); 
  color: var(--primary-color); 
}
.btn-lang-switch {
  font-weight: bold !important;
  color: var(--secondary-color) !important;
}

/* 3. تنسيق الهيدر للجوال (الشعار واسم الشركة في السطر الأول والقائمة تحتهما) */
@media (max-width: 768px) {

  .main-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    background-color: #ffffff !important;
    z-index: 1000 !important;
  }

  .nav-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 15px !important;
    width: 100% !important;
  }

  .original-logo-wrapper,
  .original-logo-link {
    display: flex !important;
    flex-direction: row-reverse !important; /* تجاور الشعار والاسم RTL */
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    margin-bottom: 8px !important;
    width: auto !important;
  }

  .logo-image-container {
    width: 36px !important;
    height: 48px !important;
  }

  .original-brand-text .main-text span {
    font-size: 20px !important;
  }

  .logo-sub-tagline {
    font-size: 10px !important;
  }

  .nav-menu {
    display: flex !important;
    flex-direction: row-reverse !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    margin: 0 !important;
    padding-top: 8px !important;
    border-top: 1px solid #E5E7EB !important;
    gap: 6px 12px !important;
  }

  .nav-menu a {
    margin: 0 !important;
    font-size: 12px !important;
    padding: 3px 5px !important;
    white-space: nowrap !important;
  }

  body {
    padding-top: 125px !important; /* لعدم تغطية أول عنصر بالهيدر */
  }
}