/* =============================================================
   BARON CAR RENTAL — MASTER STYLE SHEET
   Author: ChatGPT (Organized + Optimized Version)

   ملاحظة هامة جداً:
   كل سطر فيه تعليق يشرح وظيفته — بناءً على طلب محمد
   ============================================================= */

/* =============================================================
   1) ROOT VARIABLES
   ألوان وعناصر ثابتة تستعمل في كامل الموقع لتوحيد الشكل
   ============================================================= */
:root {
  --dark-bg: #0b0f17;           /* خلفية الموقع الأساسية */
  --dark-card: #111827;         /* خلفيات البطاقات */
  --dark-border: #1f2937;       /* حدود خفيفة */
  --text-light: #e5e7eb;        /* نص فاتح */
  --text-muted: #9ca3af;        /* نص رمادي */
  --brand-blue: #38bdf8;        /* الأزرق العام */
  --brand-primary: #60a5fa;     /* الأزرق الأساسي */
  --shadow-heavy: rgba(0,0,0,.55); /* ظل ثقيل */
}

/* =============================================================
   2) GLOBAL RESET
   إعادة ضبط المسافات والخطوط لتناسق عام
   ============================================================= */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* يجعل البادينغ يتحسب داخل الحجم */
}

body {
  font-family: "Tajawal", system-ui, Arial, sans-serif; /* الخط الأساسي */
  background: var(--dark-bg); /* خلفية عامة داكنة */
  color: var(--text-light); /* نص أبيض */
  line-height: 1.6; /* سطر مريح للقراءة */
  font-size: 1rem; /* حجم افتراضي */
}

/* حجم الخط يتغير حسب شاشة المستخدم */
@media (max-width: 768px) {
  body { font-size: .95rem; }
}
@media (min-width: 1200px) {
  body { font-size: 1.06rem; }
}

/* =============================================================
   3) NAVBAR
   شريط علوي موحد لجميع الصفحات
   ============================================================= */
.navbar {
  background: linear-gradient(90deg,#0b0f17,#111827) !important; /* تدرج لون جميل */
  border-bottom: 1px solid var(--dark-border) !important; /* حد سفلي خفيف */
  padding: .8rem 1.2rem !important; /* مسافات داخلية */
  backdrop-filter: blur(5px); /* تأثير ضباب لجماليات أعلى */
}

/* صندوق الشعار */
.nav-brand-box {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important; /* مسافة بين الشعار والاسم */
  text-decoration: none !important;
}

/* لوجو */
.nav-logo {
  height: 50px !important; /* طول ثابت */
  border-radius: 12px; /* زوايا مستديرة */
  box-shadow: 0 0 8px rgba(0,0,0,.25); /* ظل خفيف */
}

/* اسم الشركة */
.nav-title {
  font-size: 1.2rem !important; /* حجم واضح */
  font-weight: 800 !important; /* سميك */
  color: #fff !important;
  margin: 0 !important;
}

/* سطر وصف أسفل الشعار */
.nav-subtitle {
  font-size: .75rem !important;
  color: var(--text-muted) !important;
  margin-top: -3px !important;
}

/* الروابط داخل القائمة */
.navbar .nav-link {
  color: var(--text-muted) !important; /* رمادي واضح */
  padding: 10px 14px !important;
  font-weight: 500 !important;
  transition: .25s ease; /* حركة ناعمة */
}

/* عند المرور أو الصفحة الحالية */
.navbar .nav-link:hover,
.navbar .nav-link.active {
  color: var(--brand-primary) !important; /* أزرق جميل */
  text-shadow: 0 0 6px rgba(96,165,250,0.35); /* توهج خفيف */
}

/* في الموبايل نصغر اللوجو والنص */
@media(max-width: 768px){
  .nav-logo { height: 38px !important; }
  .nav-title { font-size: 1rem !important; }
 /* .nav-subtitle { display: none !important; }*/
}

/* =============================================================
   4) HERO SECTION (CAROUSEL SLIDER)
   تحسين الظهور + فلتر متوسط الوضوح المناسب للسيارات
   ============================================================= */
.hero { position: relative; min-height: 72vh; }

.hero-slide {
  min-height: 72vh;  /* ارتفاع يغطي الهيرو */
  background-size: cover; /* تمديد الصورة */
  background-position: center; /* مركز */
  position: relative; /* للسماح بالـ overlay */
}

/* فلتر محسّن للكاروسيل — وضوح متوسط */
.hero-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
      to bottom,
      rgba(0,0,0,0.15) 0%,   /* أعلى شبه شفاف */
      rgba(0,0,0,0.30) 35%,  /* منتصف */
  );
  z-index: 1;
}

/* المحتوى فوق الصورة */
.hero-content {
  position: relative;
  z-index: 3; /* فوق الفلتر */
}

/* عنوان الهيرو */
.hero-title {
  color: #fff !important;
  text-shadow: 0 2px 8px rgba(0,0,0,.35); /* تحسين وضوح */
}

/* =============================================================
   5) CARDS + SERVICES + ABOUT
   توحيد الألوان والتنسيق لجميع عناصر الواجهة
   ============================================================= */
.card-lift {
  transition: .3s ease; /* تأثير ناعم */
}
.card-lift:hover {
  transform: translateY(-6px); /* يرتفع لأعلى قليلاً */
  box-shadow: 0 18px 45px rgba(0,0,0,.45);
}

.service-card, .stat-card, .faq-box, .map-box {
  background: var(--dark-card);
  border: 1px solid var(--dark-border);
  border-radius: 14px;
  padding: 20px;
}

/* =============================================================
   6) WHATSAPP FLOATING BUTTON
   زر واتساب عائم احترافي
   ============================================================= */
.whatsapp-fab {
  position: fixed;
  bottom: 22px;
  right: 22px;
  background: #25D366;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 32px;
  color: #fff;
  z-index: 9999;
  box-shadow: 0 10px 25px rgba(0,0,0,.35);
  transition: .3s ease;
}
.whatsapp-fab:hover {
  transform: scale(1.08) translateY(-3px);
}

/* =============================================================
   7) FOOTER
   ============================================================= */
footer {
  background: #0f172a;
  color: var(--text-muted);
}

/* =============================================================
   END OF FILE — ALL SECTIONS CLEAN & ORGANIZED
   ============================================================= */