@import url('https://fonts.googleapis.com/css2?family=Marhey:wght@400;500;600;700;800&family=Tajawal:wght@400;500;700;800;900&display=swap');

/* =========================================================
       1) متغيرات عامة لتسهيل التعديل لاحقًا
       ========================================================= */
    :root {
      --primary: #0d6efd;
      --primary-dark: #0a58ca;
      --secondary: #f97316;
      --dark: #0f172a;
      --dark-2: #111827;
      --light: #f8fafc;
      --muted: #64748b;
      --white: #ffffff;
      --success: #16a34a;
      --border: rgba(15, 23, 42, 0.08);
      --shadow: 0 10px 35px rgba(15, 23, 42, 0.10);
      --shadow-lg: 0 18px 50px rgba(15, 23, 42, 0.18);
      --radius: 22px;
      --radius-sm: 16px;
      --transition: 0.3s ease;
    }

    /* =========================================================
       2) إعدادات أساسية
       ========================================================= */
    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      font-family: 'Tajawal', Tahoma, sans-serif;
      background: var(--white);
      color: var(--dark);
      padding-top: 92px;
      overflow-x: hidden;
    }

    img {
      max-width: 100%;
      display: block;
    }

    a {
      text-decoration: none;
    }

    .section-padding {
      padding: 90px 0;
    }

    .section-tag {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: rgba(13, 110, 253, 0.08);
      color: var(--primary-dark);
      border: 1px solid rgba(13, 110, 253, 0.10);
      border-radius: 999px;
      padding: 8px 16px;
      font-size: 14px;
      font-weight: 700;
      margin-bottom: 14px;
    }

    .section-title {
      font-size: clamp(1.8rem, 3vw, 2.8rem);
      font-weight: 900;
      margin-bottom: 14px;
      color: var(--dark);
    }

    .section-text {
      color: var(--muted);
      line-height: 1.9;
      max-width: 760px;
    }

    .btn-main {
      background: linear-gradient(135deg, var(--primary), var(--primary-dark));
      color: var(--white);
      border: none;
      border-radius: 14px;
      padding: 13px 26px;
      font-weight: 800;
      transition: var(--transition);
      box-shadow: 0 8px 25px rgba(13, 110, 253, 0.25);
    }

    .btn-main:hover {
      background: linear-gradient(135deg, var(--primary-dark), var(--primary));
      color: var(--white);
      transform: translateY(-2px);
    }

    .btn-outline-custom {
      border: 1.5px solid rgba(255, 255, 255, 0.35);
      color: var(--white);
      border-radius: 14px;
      padding: 13px 26px;
      font-weight: 800;
      transition: var(--transition);
      backdrop-filter: blur(6px);
    }

    .btn-outline-custom:hover {
      background: var(--white);
      color: var(--dark);
    }

    /* =========================================================
       3) شريط التنقل
       ========================================================= */
    .custom-navbar {
      background: rgba(255, 255, 255, 0.8);
      backdrop-filter: blur(10px);
      box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
    }

    .navbar-inner {
      width: 100%;
      background: rgba(255, 255, 255, 0.92);
      border: 1px solid rgba(15, 23, 42, 0.05);
      border-radius: 22px;
      padding: 12px 20px;
    }

    .logo {
      height: 58px;
      object-fit: contain;
    }

    .navbar-nav .nav-link {
      color: var(--dark);
      font-weight: 700;
      margin: 0 8px;
      position: relative;
    }

    .navbar-nav .nav-link::after {
      content: "";
      position: absolute;
      bottom: -4px;
      right: 0;
      width: 0;
      height: 2px;
      background: var(--primary);
      transition: var(--transition);
    }

    .navbar-nav .nav-link:hover::after,
    .navbar-nav .nav-link.active::after {
      width: 100%;
    }

    .navbar .hotline-btn {
      border-radius: 14px;
      font-weight: 800;
      padding-inline: 18px;
    }

    /* =========================================================
       4) الهيرو
       ========================================================= */
    .hero {
      min-height: calc(100vh - 92px);
      background:
        linear-gradient(135deg, rgba(15,23,42,0.88), rgba(15,23,42,0.68)),
        url('images/carssss.png') center center / cover no-repeat;
      position: relative;
      display: flex;
      align-items: center;
    }

    .hero::before {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at top left, rgba(249,115,22,0.18), transparent 25%),
                  radial-gradient(circle at bottom right, rgba(13,110,253,0.18), transparent 25%);
    }

    .hero-content {
      position: relative;
      z-index: 2;
      color: var(--white);
    }

    .hero-badge {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: rgba(255,255,255,0.1);
      border: 1px solid rgba(255,255,255,0.16);
      border-radius: 999px;
      padding: 9px 18px;
      font-weight: 700;
      margin-bottom: 20px;
    }

    .hero-title {
      font-size: clamp(2.2rem, 5vw, 4.5rem);
      font-weight: 900;
      line-height: 1.2;
      margin-bottom: 18px;
    }

    .hero-subtitle {
      max-width: 760px;
      color: rgba(255,255,255,0.9);
      line-height: 2;
      font-size: 1.08rem;
      margin-bottom: 30px;
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      margin-bottom: 34px;
    }

    .hero-highlights {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 18px;
      margin-top: 25px;
    }

    .hero-stat {
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 20px;
      padding: 18px;
      backdrop-filter: blur(6px);
      text-align: center;
    }

    .hero-stat strong {
      display: block;
      font-size: 1.7rem;
      font-weight: 900;
    }

    .hero-stat span {
      color: rgba(255,255,255,0.82);
      font-size: 0.95rem;
    }

    /* =========================================================
       5) مزايا سريعة
       ========================================================= */
    .feature-card {
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 28px 22px;
      box-shadow: var(--shadow);
      transition: var(--transition);
      height: 100%;
    }

    .feature-card:hover {
      transform: translateY(-6px);
      box-shadow: var(--shadow-lg);
    }

    .feature-icon {
      width: 64px;
      height: 64px;
      border-radius: 18px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg, rgba(13,110,253,0.12), rgba(249,115,22,0.14));
      color: var(--primary);
      font-size: 1.4rem;
      margin-bottom: 18px;
    }

    .feature-card h3 {
      font-size: 1.2rem;
      font-weight: 800;
      margin-bottom: 10px;
    }

    .feature-card p {
      color: var(--muted);
      line-height: 1.9;
      margin-bottom: 0;
    }

    /* =========================================================
       6) قسم السيارات
       ========================================================= */
    .fleet-section {
      background: linear-gradient(180deg, #ffffff, #f8fbff);
    }

    .fleet-top {
      display: flex;
      justify-content: space-between;
      align-items: end;
      gap: 16px;
      flex-wrap: wrap;
      margin-bottom: 24px;
    }

    .fleet-filter {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
    }

    .filter-btn {
      border: 1px solid rgba(15, 23, 42, 0.08);
      background: var(--white);
      color: var(--dark);
      border-radius: 999px;
      padding: 10px 18px;
      font-weight: 700;
      transition: var(--transition);
    }

    .filter-btn.active,
    .filter-btn:hover {
      background: var(--dark);
      color: var(--white);
      border-color: var(--dark);
    }

    .cars-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 24px;
    }

    .car-card {
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: 24px;
      overflow: hidden;
      box-shadow: var(--shadow);
      transition: var(--transition);
      height: 100%;
      display: flex;
      flex-direction: column;
    }

    .car-card:hover {
      transform: translateY(-6px);
      box-shadow: var(--shadow-lg);
    }

    .car-image-wrap {
      position: relative;
      background: #f7f7f7;
    }

    .car-badge {
      position: absolute;
      top: 14px;
      left: 14px;
      background: rgba(15, 23, 42, 0.88);
      color: var(--white);
      font-size: 13px;
      font-weight: 800;
      padding: 7px 12px;
      border-radius: 999px;
      z-index: 2;
    }

    .car-card img {
      width: 100%;
      height: 220px;
      object-fit: cover;
    }

    .car-body {
      padding: 22px;
      display: flex;
      flex-direction: column;
      flex-grow: 1;
    }

    .car-title-row {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      align-items: start;
      margin-bottom: 8px;
    }

    .car-title {
      font-size: 1.1rem;
      font-weight: 900;
      margin: 0;
    }

    .car-category {
      color: var(--muted);
      font-size: 0.92rem;
      margin-bottom: 14px;
    }

    .car-features {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      margin-bottom: 18px;
    }

    .car-feature {
      background: #f8fafc;
      border-radius: 14px;
      padding: 10px 12px;
      color: var(--dark-2);
      font-size: 0.9rem;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .car-price-row {
      margin-top: auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      padding-top: 16px;
      border-top: 1px dashed rgba(15, 23, 42, 0.10);
    }

    .car-price small {
      display: block;
      color: var(--muted);
      margin-bottom: 3px;
    }

    .car-price strong {
      font-size: 1.2rem;
      color: var(--success);
      font-weight: 900;
    }

    /* =========================================================
       7) من نحن + أرقام
       ========================================================= */
    .about-section {
      background: linear-gradient(180deg, #ffffff, #f8fafc);
    }

    .about-box {
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: 28px;
      padding: 34px;
      box-shadow: var(--shadow);
      height: 100%;
    }

    .about-list {
      padding: 0;
      margin: 22px 0 0;
      list-style: none;
    }

    .about-list li {
      display: flex;
      align-items: start;
      gap: 12px;
      margin-bottom: 12px;
      color: var(--dark-2);
    }

    .about-list i {
      color: var(--success);
      margin-top: 6px;
    }

    .stats-box {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 18px;
      height: 100%;
    }

    .mini-stat {
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: 24px;
      padding: 24px;
      box-shadow: var(--shadow);
      text-align: center;
    }

    .mini-stat strong {
      display: block;
      font-size: 2rem;
      font-weight: 900;
      color: var(--primary);
    }

    .mini-stat span {
      color: var(--muted);
      font-weight: 700;
    }

    /* =========================================================
       8) الفروع
       ========================================================= */
    .branches-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 24px;
    }

    .branch-card {
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: 24px;
      box-shadow: var(--shadow);
      overflow: hidden;
      transition: var(--transition);
      height: 100%;
    }

    .branch-card:hover {
      transform: translateY(-6px);
      box-shadow: var(--shadow-lg);
    }

    .branch-head {
      background: linear-gradient(135deg, var(--dark), var(--dark-2));
      color: var(--white);
      padding: 22px;
    }

    .branch-head h3 {
      margin: 0;
      font-size: 1.2rem;
      font-weight: 900;
    }

    .branch-head p {
      margin: 8px 0 0;
      color: rgba(255,255,255,0.8);
    }

    .branch-body {
      padding: 22px;
    }

    .branch-info {
      display: flex;
      gap: 12px;
      margin-bottom: 14px;
      color: var(--dark-2);
      line-height: 1.8;
    }

    .branch-info i {
      color: var(--primary);
      margin-top: 6px;
      min-width: 18px;
    }

    .branch-actions {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      margin-top: 16px;
    }

    .btn-branch {
      border-radius: 12px;
      font-weight: 800;
      padding: 10px 14px;
    }

    /* =========================================================
       9) خطوات الحجز
       ========================================================= */
    .process-section {
      background: var(--dark);
      color: var(--white);
    }

    .process-section .section-title,
    .process-section .section-text {
      color: var(--white);
    }

    .process-card {
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 24px;
      padding: 24px;
      height: 100%;
      transition: var(--transition);
    }

    .process-card:hover {
      transform: translateY(-6px);
      background: rgba(255,255,255,0.08);
    }

    .process-number {
      width: 54px;
      height: 54px;
      border-radius: 16px;
      background: linear-gradient(135deg, var(--secondary), #fb923c);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-weight: 900;
      font-size: 1.2rem;
      margin-bottom: 16px;
    }

    .process-card h3 {
      font-weight: 800;
      margin-bottom: 10px;
      font-size: 1.15rem;
    }

    .process-card p {
      color: rgba(255,255,255,0.82);
      line-height: 1.9;
      margin-bottom: 0;
    }

    /* =========================================================
       10) التقييمات
       ========================================================= */
    .testimonial-card {
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: 24px;
      padding: 26px;
      box-shadow: var(--shadow);
      height: 100%;
    }

    .stars {
      color: #f59e0b;
      margin-bottom: 12px;
    }

    .testimonial-card p {
      color: var(--muted);
      line-height: 1.9;
    }

    .client-name {
      font-weight: 900;
      margin-bottom: 4px;
    }

    .client-role {
      color: var(--muted);
      font-size: 0.92rem;
    }

    /* =========================================================
       11) التواصل والحجز
       ========================================================= */
    .contact-section {
      background: linear-gradient(180deg, #f8fafc, #eef4ff);
    }

    .contact-box,
    .booking-box {
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: 28px;
      box-shadow: var(--shadow);
      padding: 30px;
      height: 100%;
    }

    .contact-item {
      display: flex;
      gap: 14px;
      align-items: flex-start;
      padding: 14px 0;
      border-bottom: 1px dashed rgba(15, 23, 42, 0.10);
    }

    .contact-item:last-child {
      border-bottom: none;
    }

    .contact-icon {
      min-width: 48px;
      width: 48px;
      height: 48px;
      border-radius: 14px;
      background: rgba(13,110,253,0.1);
      color: var(--primary);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 1.1rem;
    }

    .contact-item h4 {
      font-size: 1rem;
      font-weight: 800;
      margin-bottom: 4px;
    }

    .contact-item p,
    .contact-item a {
      color: var(--muted);
      margin: 0;
      line-height: 1.8;
      word-break: break-word;
    }

    .social-links {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      margin-top: 18px;
    }

    .social-links a {
      width: 46px;
      height: 46px;
      border-radius: 14px;
      background: var(--dark);
      color: var(--white);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: var(--transition);
      font-size: 1rem;
    }

    .social-links a:hover {
      transform: translateY(-3px);
      background: var(--primary);
    }

    .form-label {
      font-weight: 700;
      margin-bottom: 8px;
    }

    .form-control,
    .form-select {
      min-height: 52px;
      border-radius: 14px;
      border: 1px solid rgba(15, 23, 42, 0.10);
      padding: 12px 16px;
    }

    textarea.form-control {
      min-height: 120px;
      resize: vertical;
    }

    .booking-note {
      background: rgba(22, 163, 74, 0.08);
      border: 1px solid rgba(22, 163, 74, 0.14);
      color: #166534;
      border-radius: 16px;
      padding: 14px 16px;
      font-weight: 700;
      margin-bottom: 20px;
    }

    /* =========================================================
       12) الأسئلة الشائعة
       ========================================================= */
    .accordion-item {
      border: 1px solid var(--border);
      border-radius: 18px !important;
      overflow: hidden;
      margin-bottom: 14px;
      box-shadow: var(--shadow);
    }

    .accordion-button {
      font-weight: 800;
      padding: 18px 20px;
    }
    /* تحريك سهم الـ Accordion إلى أقصى الشمال */
    .accordion-button {
    position: relative;
    padding-left: 55px;
    padding-right: 20px;
    text-align: right;
}

    .accordion-button::after {
    position: absolute;
    left: 20px;
    right: auto;
}

    .accordion-button:not(.collapsed)::after {
    transform: rotate(-180deg);
}
    .accordion-button:not(.collapsed) {
      color: var(--primary-dark);
      background: rgba(13,110,253,0.06);
      box-shadow: none;
    }

    .accordion-body {
      color: var(--muted);
      line-height: 1.9;
    }

    /* =========================================================
       13) الفوتر
       ========================================================= */
    .footer {
      background: var(--dark);
      color: rgba(255,255,255,0.8);
      padding: 12px 0;
      text-align: center;
    }

    .footer-content {
    text-align: center !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

   .footer-logo {
    height: 80px;
    margin-bottom: 8px;
}

   
    .footer small,
    .footer a {
      color: rgba(255,255,255,0.78);
      font-size: 14px;   /* حجم الخط */
      font-weight: 600;
    }

    /* =========================================================
       14) زر واتساب العائم
       ========================================================= */
    .whatsapp-float {
      position: fixed;
      right: 22px;
      bottom: 22px;
      width: 64px;
      height: 64px;
      border-radius: 50%;
      background: #25d366;
      color: var(--white);
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 14px 32px rgba(0,0,0,0.24);
      z-index: 999;
      animation: pulse 2.2s infinite;
      font-size: 1.5rem;
    }

    .whatsapp-float:hover {
      color: var(--white);
      transform: scale(1.06);
    }

    @keyframes pulse {
      0% { box-shadow: 0 0 0 0 rgba(37,211,102,0.65); }
      70% { box-shadow: 0 0 0 16px rgba(37,211,102,0); }
      100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); }
    }

    /* =========================================================
       15) Responsive
       ========================================================= */
/* =========================================================
   تحسينات Responsive احترافية
   ========================================================= */

/* منع أي Scroll أفقي */
html,
body {
  overflow-x: hidden;
}

/* الصور مرنة */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* الكونتينر */
.container {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
}

/* الشبكات تكون مرنة */
.cars-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

.branches-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

.hero-highlights {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.stats-box {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

/* تحسين النصوص */
.hero-title {
  font-size: clamp(2rem, 5vw, 4.5rem);
  line-height: 1.3;
}

.section-title {
  font-size: clamp(1.6rem, 4vw, 2.8rem);
}

.hero-subtitle,
.section-text {
  line-height: 1.9;
}

/* الأزرار */
.btn,
.btn-main,
.btn-outline-custom {
  white-space: nowrap;
  transition: 0.3s ease;
}

/* =========================================================
   شاشة اللابتوب الصغيرة والتابلت
   ========================================================= */
@media (max-width: 991px) {

  body {
    padding-top: 80px;
  }

  .navbar-inner {
    border-radius: 18px;
    padding: 10px 14px;
  }

  .logo {
    height: 48px;
  }

  .navbar-toggler {
    border: none;
    box-shadow: none !important;
  }

  .navbar-collapse {
    margin-top: 15px;
    background: #fff;
    padding: 15px;
    border-radius: 16px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
  }

  .navbar-nav {
    gap: 10px;
  }

  .navbar-nav .nav-link {
    margin: 5px 0;
  }

  .navbar .btn-main {
    width: 100%;
  }

  .hero {
    min-height: auto;
    padding: 120px 0 60px;
    text-align: center;
  }

  .hero-actions {
    justify-content: center;
  }

  .fleet-top {
    flex-direction: column;
    align-items: flex-start;
  }

  .fleet-filter {
    width: 100%;
  }
}

/* =========================================================
   الجوال
   ========================================================= */
@media (max-width: 768px) {

  .section-padding {
    padding: 70px 0;
  }

  .hero {
    padding-top: 110px;
    padding-bottom: 50px;
  }

  .hero-title {
    font-size: 2rem !important;
  }

  .hero-subtitle {
    font-size: 0.95rem;
  }

  .hero-actions {
    flex-direction: column;
    width: 100%;
  }

  .hero-actions a {
    width: 100%;
    text-align: center;
  }

  .hero-highlights {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .hero-stat {
    padding: 14px;
  }

  .hero-stat strong {
    font-size: 1.2rem;
  }

  .feature-card,
  .contact-box,
  .booking-box,
  .about-box,
  .process-card,
  .testimonial-card {
    padding: 20px;
    border-radius: 20px;
  }

  .car-card {
    border-radius: 20px;
  }

  .car-card img {
    height: 190px;
  }

  .car-body {
    padding: 16px;
  }

  .car-title {
    font-size: 1rem;
  }

  .car-features {
    grid-template-columns: 1fr;
  }

  .car-price-row {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }

  .car-price-row .btn {
    width: 100%;
  }

  .branch-actions {
    flex-direction: column;
  }

  .branch-actions .btn {
    width: 100%;
  }

  .contact-item {
    gap: 12px;
  }

  .contact-icon {
    width: 42px;
    height: 42px;
    min-width: 42px;
  }

  .form-control,
  .form-select {
    min-height: 50px;
    font-size: 16px;
  }

  textarea.form-control {
    min-height: 100px;
  }

  .whatsapp-float {
    width: 58px;
    height: 58px;
    right: 15px;
    bottom: 15px;
    font-size: 1.4rem;
  }

  .footer {
    text-align: center;
  }
}

/* =========================================================
   الشاشات الصغيرة جدًا
   ========================================================= */
@media (max-width: 480px) {

  body {
    font-size: 14px;
  }

  .hero-title {
    font-size: 1.7rem !important;
    line-height: 1.5;
  }

  .hero-subtitle {
    font-size: 0.9rem;
  }

  .section-title {
    font-size: 1.5rem !important;
  }

  .section-text {
    font-size: 0.9rem;
  }

  .hero-highlights {
    grid-template-columns: 1fr;
  }

  .filter-btn {
    width: 100%;
    text-align: center;
  }

  .fleet-filter {
    flex-direction: column;
  }

  .process-number {
    width: 46px;
    height: 46px;
    font-size: 1rem;
  }

  .mini-stat strong {
    font-size: 1.5rem;
  }

  .accordion-button {
    font-size: 0.95rem;
    padding: 15px;
  }
}
  
.hero-dots{
position:absolute;
bottom:30px;
left:50%;
transform:translateX(-50%);
display:flex;
gap:12px;
z-index:20;
}
.hero-dot{
width:14px;height:14px;border-radius:50%;
background:rgba(255,255,255,.5);
cursor:pointer;transition:.3s;
}
.hero-dot.active{background:#fff;transform:scale(1.3);}
.form-select {
    direction: rtl;
    text-align: right;
    padding-left: 45px !important;
    background-position: left 15px center !important;
}
/* ===== Cars Page V2 ===== */
.cars-hero{padding:150px 0 55px;background:linear-gradient(135deg,#f7f9fc 0%,#eef4fa 100%)}
.cars-hero .section-text{max-width:720px;margin:auto}.cars-toolbar{display:flex;justify-content:space-between;align-items:center;gap:20px;margin:20px 0 30px}.cars-count{font-weight:700;color:var(--primary,#0b3d66)}
.car-card-v2{height:100%;display:flex;flex-direction:column}.car-card-v2 .car-body{display:flex;flex-direction:column;flex:1}.car-card-v2 .car-price-row{margin-top:auto}.car-year{border:1px solid #e5e7eb;border-radius:8px;padding:4px 9px;font-size:.8rem;background:#fff}.cars-cta{margin-top:55px;padding:35px;border-radius:22px;background:linear-gradient(135deg,#0b3d66,#123d59);color:#fff}.cars-cta h2{color:#fff}@media(max-width:768px){.cars-hero{padding-top:120px}.cars-toolbar{flex-direction:column;align-items:flex-start}.fleet-filter{justify-content:flex-start;overflow-x:auto;width:100%;flex-wrap:nowrap;padding-bottom:6px}.filter-btn{white-space:nowrap}}

h1,h2,h3,.section-title,.navbar-brand,.hero-title,.luxury-title{font-family:'Marhey','Tajawal',sans-serif;letter-spacing:-.02em}.nav-link,.btn,.section-tag{font-family:'Tajawal',sans-serif;font-weight:700}.branches-hero{background:linear-gradient(135deg,#071a33,#0d2b50 55%,#143b68);color:#fff;padding:85px 0 70px;position:relative;overflow:hidden}.branches-hero .section-title,.branches-hero .section-text{color:#fff}.city-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:20px 0 45px}.city-tab{border:1px solid rgba(13,43,80,.12);background:#fff;color:var(--dark);border-radius:999px;padding:12px 24px;cursor:pointer;font-weight:800;transition:.25s}.city-tab:hover,.city-tab.active{background:var(--primary);color:#fff;border-color:var(--primary)}.branch-card-v2{height:100%;background:#fff;border:1px solid var(--border);border-radius:24px;padding:28px;transition:.3s;box-shadow:0 10px 30px rgba(15,23,42,.06)}.branch-card-v2:hover{transform:translateY(-7px);box-shadow:var(--shadow-lg)}.branch-icon-v2{width:54px;height:54px;display:grid;place-items:center;border-radius:17px;background:rgba(13,110,253,.09);color:var(--primary);font-size:22px;margin-bottom:18px}.branch-city-v2{font-family:'Marhey';font-size:1.2rem;font-weight:800;margin-bottom:5px}.branch-subtitle-v2{color:var(--secondary);font-weight:800;font-size:.9rem;margin-bottom:18px}.branch-info-v2{display:flex;gap:10px;align-items:flex-start;color:var(--muted);margin:12px 0;line-height:1.7}.branch-actions-v2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:22px}.branch-actions-v2 .btn-map{grid-column:1/-1}

/* =========================================================
   DARB V2 — Luxury Compact Design System
   ========================================================= */
@font-face{
  font-family:"Sakkal Majalla Web";
  src: local("Sakkal Majalla");
  font-display: swap;
}
:root{
  --luxury-navy:#0B1F33;
  --luxury-navy-2:#132B43;
  --luxury-gold:#C99B4A;
  --luxury-gold-soft:#E8D4AA;
  --luxury-cream:#F7F5F0;
  --luxury-border:rgba(11,31,51,.10);
}
body{font-family:'Tajawal',sans-serif;}
h1,h2,h3,h4,h5,.section-title,.page-title,.luxury-title{
  font-family:"Sakkal Majalla Web","Sakkal Majalla",'Tajawal',serif;
  font-weight:700;
}
.luxury-page-hero{
  padding:135px 0 72px;
  background:linear-gradient(115deg,var(--luxury-navy),var(--luxury-navy-2));
  color:#fff;
}
.luxury-eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  color:var(--luxury-gold-soft);
  font-family:'Tajawal',sans-serif;font-size:12px;font-weight:800;
  letter-spacing:.08em;margin-bottom:10px;
}
.luxury-eyebrow:before{content:"";width:28px;height:1px;background:var(--luxury-gold);}
.luxury-page-hero h1{font-size:50px;line-height:1.15;margin:0 0 12px;}
.luxury-page-hero p{max-width:580px;margin:auto;color:rgba(255,255,255,.72);font-size:17px;line-height:1.9}
.luxury-section{padding:72px 0;}
.luxury-section-head{margin-bottom:34px;}
.luxury-section-head h2{font-size:38px;color:var(--luxury-navy);margin-bottom:8px;}
.luxury-section-head p{color:#718096;margin:0;font-size:15px;}

.featured-offer{
  position:relative;overflow:hidden;
  background:var(--luxury-navy);
  border:1px solid rgba(201,155,74,.38);
  border-radius:18px;
  padding:34px 38px;
  color:#fff;
}
.featured-offer:after{
  content:"";position:absolute;width:330px;height:330px;border-radius:50%;
  border:1px solid rgba(201,155,74,.18);left:-105px;bottom:-220px;
}
.featured-offer .offer-label{
  display:inline-block;color:var(--luxury-gold-soft);font-size:12px;font-weight:800;
  margin-bottom:10px;
}
.featured-offer h2{font-size:38px;margin:0 0 7px;}
.featured-offer p{color:rgba(255,255,255,.72);margin:0;line-height:1.8}
.offer-discount{
  position:absolute;left:38px;top:32px;text-align:center;z-index:1;
  min-width:105px;padding:13px 16px;border-radius:12px;
  background:rgba(255,255,255,.06);border:1px solid rgba(201,155,74,.35);
}
.offer-discount strong{display:block;color:var(--luxury-gold-soft);font-size:28px;line-height:1.1}
.offer-discount span{font-size:11px;color:rgba(255,255,255,.65)}
.featured-offer .btn{position:relative;z-index:2;margin-top:20px;}

.luxury-offer-card{
  height:100%;background:#fff;border:1px solid var(--luxury-border);
  border-radius:16px;padding:24px;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.luxury-offer-card:hover{
  transform:translateY(-4px);border-color:rgba(201,155,74,.55);
  box-shadow:0 16px 38px rgba(11,31,51,.08);
}
.offer-icon{
  width:42px;height:42px;border-radius:11px;display:grid;place-items:center;
  background:var(--luxury-cream);color:var(--luxury-gold);font-size:18px;margin-bottom:17px;
}
.luxury-offer-card h3{font-size:25px;color:var(--luxury-navy);margin-bottom:8px;}
.luxury-offer-card p{font-size:14px;color:#718096;line-height:1.85;margin-bottom:18px;}
.offer-meta{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--luxury-border);padding-top:15px;}
.offer-meta span{font-size:12px;color:#8a97a6;}
.offer-meta a{font-size:13px;color:var(--luxury-navy);font-weight:800;text-decoration:none;}
.offer-meta a:hover{color:var(--luxury-gold);}

.luxury-cta{
  border:1px solid var(--luxury-border);background:var(--luxury-cream);
  border-radius:18px;padding:38px 30px;text-align:center;
}
.luxury-cta h2{font-size:34px;color:var(--luxury-navy);margin-bottom:8px;}
.luxury-cta p{color:#718096;margin-bottom:20px;}
.btn-luxury{
  background:var(--luxury-navy)!important;color:#fff!important;border:1px solid var(--luxury-navy)!important;
  border-radius:8px!important;padding:11px 22px!important;font-size:14px!important;
}
.btn-luxury:hover{background:var(--luxury-gold)!important;border-color:var(--luxury-gold)!important;}
.btn-gold{
  background:var(--luxury-gold)!important;color:#fff!important;border:1px solid var(--luxury-gold)!important;
  border-radius:8px!important;padding:11px 22px!important;font-size:14px!important;
}
.btn-gold:hover{filter:brightness(.94);}
@media(max-width:768px){
  .luxury-page-hero{padding:115px 0 55px;}
  .luxury-page-hero h1{font-size:40px;}
  .luxury-section{padding:56px 0;}
  .luxury-section-head h2{font-size:32px;}
  .featured-offer{padding:28px 24px;}
  .featured-offer h2{font-size:31px;}
  .offer-discount{position:static;display:inline-block;margin-top:18px;}
  .luxury-offer-card{padding:21px;}
}

/* =========================================================
   Corporate Page — Premium Compact
   ========================================================= */
.corporate-intro{padding:72px 0;background:#fff}
.corporate-lead{max-width:760px;margin:auto;color:#687789;line-height:2;font-size:17px}
.corporate-value{
  height:100%;padding:22px;border:1px solid var(--luxury-border);border-radius:16px;
  background:#fff;transition:.25s ease
}
.corporate-value:hover{transform:translateY(-4px);box-shadow:0 14px 35px rgba(11,31,51,.07);border-color:rgba(201,155,74,.5)}
.corporate-value .cv-icon{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;background:var(--luxury-cream);color:var(--luxury-gold);margin-bottom:15px}
.corporate-value h3{font-size:24px;color:var(--luxury-navy);margin-bottom:7px}
.corporate-value p{margin:0;color:#718096;font-size:14px;line-height:1.85}
.corporate-process{background:var(--luxury-cream);padding:72px 0}
.process-step{position:relative;padding:24px 18px;text-align:center}
.process-number{width:38px;height:38px;border:1px solid rgba(201,155,74,.7);border-radius:50%;display:grid;place-items:center;margin:0 auto 14px;color:var(--luxury-gold);font-size:13px;font-weight:800}
.process-step h3{font-size:22px;color:var(--luxury-navy)}
.process-step p{font-size:13px;color:#718096;line-height:1.8;margin:0}
.corporate-contact{background:var(--luxury-navy);border-radius:18px;padding:36px;color:#fff}
.corporate-contact h2{font-size:36px;margin-bottom:8px}
.corporate-contact p{color:rgba(255,255,255,.7);margin:0}
.corporate-contact .btn{margin-top:18px}
@media(max-width:768px){.corporate-intro,.corporate-process{padding:56px 0}.corporate-contact{padding:28px 22px}.corporate-contact h2{font-size:30px}}

/* About Page — Luxury Editorial */
.about-story{padding:76px 0}
.about-story-copy{font-size:17px;line-height:2.05;color:#657487}
.about-statement{border-right:3px solid var(--luxury-gold);padding:10px 22px;margin:25px 0;color:var(--luxury-navy);font-family:"Sakkal Majalla Web","Sakkal Majalla",serif;font-size:28px;line-height:1.45}
.about-stat{padding:20px;border-left:1px solid var(--luxury-border)}
.about-stat:last-child{border-left:0}
.about-stat strong{display:block;font-family:"Sakkal Majalla Web","Sakkal Majalla",serif;color:var(--luxury-navy);font-size:34px}
.about-stat span{font-size:12px;color:#7a8795}
.about-pill{display:flex;gap:13px;align-items:flex-start;padding:20px 0;border-bottom:1px solid var(--luxury-border)}
.about-pill:last-child{border-bottom:0}
.about-pill i{color:var(--luxury-gold);font-size:17px;margin-top:5px}
.about-pill h3{font-size:24px;color:var(--luxury-navy);margin:0 0 4px}
.about-pill p{font-size:14px;color:#718096;line-height:1.8;margin:0}
.about-values{background:var(--luxury-cream);padding:72px 0}
.value-card-editorial{height:100%;padding:25px 22px;background:#fff;border:1px solid var(--luxury-border);border-radius:16px}
.value-card-editorial .value-index{font-family:"Sakkal Majalla Web","Sakkal Majalla",serif;color:var(--luxury-gold);font-size:25px}
.value-card-editorial h3{font-size:25px;color:var(--luxury-navy);margin:5px 0 8px}
.value-card-editorial p{font-size:14px;color:#718096;line-height:1.8;margin:0}
@media(max-width:768px){.about-story{padding:56px 0}.about-stat{border-left:0;border-bottom:1px solid var(--luxury-border)}.about-statement{font-size:24px}}

/* Contact Page — Luxury Compact */
.contact-section{padding:72px 0}
.contact-info-card{height:100%;background:var(--luxury-navy);border-radius:18px;padding:32px;color:#fff}
.contact-info-card h2{font-size:36px;margin-bottom:8px}
.contact-info-card>p{color:rgba(255,255,255,.68);line-height:1.9;margin-bottom:25px}
.contact-line{display:flex;gap:13px;padding:16px 0;border-bottom:1px solid rgba(255,255,255,.10);align-items:flex-start}
.contact-line:last-child{border-bottom:0}
.contact-line i{width:38px;height:38px;display:grid;place-items:center;border:1px solid rgba(201,155,74,.35);border-radius:10px;color:var(--luxury-gold)}
.contact-line small{display:block;color:rgba(255,255,255,.5);font-size:11px;margin-bottom:2px}
.contact-line a,.contact-line span{color:#fff;text-decoration:none;font-size:14px;font-weight:700}
.contact-form-wrap{border:1px solid var(--luxury-border);border-radius:18px;padding:32px;background:#fff}
.contact-form-wrap h2{font-size:34px;color:var(--luxury-navy);margin-bottom:6px}
.contact-form-wrap>p{font-size:14px;color:#718096;margin-bottom:24px}
.form-label{font-size:13px;font-weight:800;color:var(--luxury-navy)}
.luxury-input,.luxury-select,.luxury-textarea{border:1px solid var(--luxury-border)!important;border-radius:9px!important;padding:12px 14px!important;font-family:'Tajawal'!important;box-shadow:none!important}
.luxury-input:focus,.luxury-select:focus,.luxury-textarea:focus{border-color:var(--luxury-gold)!important}
.contact-quick{padding:20px 0 0;display:flex;gap:10px;flex-wrap:wrap}
.contact-map-note{margin-top:22px;padding:16px 18px;background:var(--luxury-cream);border-radius:12px;font-size:13px;color:#687789}
@media(max-width:768px){.contact-section{padding:56px 0}.contact-info-card,.contact-form-wrap{padding:25px 20px}.contact-info-card h2,.contact-form-wrap h2{font-size:30px}}

/* =========================================================
   HOME — DARB PREMIUM AUTOMOTIVE
   ========================================================= */
.home-hero{min-height:720px;padding:145px 0 72px;background:linear-gradient(120deg,#071625 0%,#0B1F33 52%,#173B5C 100%);color:#fff;position:relative;overflow:hidden}
.home-hero:after{content:"";position:absolute;width:620px;height:620px;border:1px solid rgba(201,155,74,.14);border-radius:50%;left:-220px;top:-250px}
.hero-copy{position:relative;z-index:2;padding-top:35px}
.hero-copy h1{font-size:62px;line-height:1.12;margin:12px 0 16px}
.hero-copy p{max-width:600px;color:rgba(255,255,255,.72);font-size:17px;line-height:2}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:25px}
.hero-car-panel{position:relative;z-index:2;height:430px;display:flex;align-items:center;justify-content:center}
.hero-car-panel:before{content:"";position:absolute;width:92%;height:68%;background:radial-gradient(ellipse,rgba(201,155,74,.20),transparent 65%);filter:blur(8px)}
.hero-car-image{position:relative;z-index:1;width:100%;max-height:390px;object-fit:contain;filter:drop-shadow(0 25px 25px rgba(0,0,0,.28))}
.hero-image-fallback{position:absolute;inset:60px 10px;display:grid;place-items:center;border:1px dashed rgba(255,255,255,.2);border-radius:18px;color:rgba(255,255,255,.35);font-size:13px}
.hero-stats{position:relative;z-index:2;display:flex;gap:0;margin-top:48px;border-top:1px solid rgba(255,255,255,.12);padding-top:20px}
.hero-stat{padding:0 26px;border-left:1px solid rgba(255,255,255,.12)}
.hero-stat:first-child{padding-right:0}.hero-stat:last-child{border-left:0}
.hero-stat strong{display:block;font-family:"Sakkal Majalla Web","Sakkal Majalla",serif;font-size:30px;color:var(--luxury-gold-soft)}
.hero-stat span{font-size:11px;color:rgba(255,255,255,.55)}

.home-booking{margin-top:-42px;position:relative;z-index:5}
.booking-bar{background:#fff;border:1px solid rgba(11,31,51,.08);box-shadow:0 18px 50px rgba(11,31,51,.12);border-radius:16px;padding:18px 20px}
.booking-bar .form-label{margin-bottom:5px}
.booking-bar .btn{height:47px;margin-top:25px}

.home-section{padding:82px 0}
.section-kicker{color:var(--luxury-gold);font-size:11px;font-weight:800;letter-spacing:.12em;margin-bottom:7px}
.home-section h2{font-size:42px;color:var(--luxury-navy)}
.feature-item{padding:18px 12px}
.feature-item i{font-size:22px;color:var(--luxury-gold);margin-bottom:14px}
.feature-item h3{font-size:24px;color:var(--luxury-navy)}
.feature-item p{font-size:14px;color:#718096;line-height:1.85;margin:0}

.car-card-premium{height:100%;background:#fff;border:1px solid var(--luxury-border);border-radius:16px;overflow:hidden;transition:.25s ease}
.car-card-premium:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(11,31,51,.09);border-color:rgba(201,155,74,.45)}
.car-image-wrap{height:190px;background:#f7f8fa;display:flex;align-items:center;justify-content:center;padding:18px;position:relative}
.car-image-wrap img{width:100%;height:100%;object-fit:contain}
.car-tag{position:absolute;right:13px;top:13px;background:#fff;border:1px solid rgba(11,31,51,.08);border-radius:6px;padding:5px 8px;font-size:10px;font-weight:800;color:var(--luxury-navy)}
.car-card-body{padding:18px}
.car-card-body h3{font-size:25px;color:var(--luxury-navy);margin-bottom:5px}
.car-type{font-size:12px;color:#8793a1;margin-bottom:14px}
.car-specs{display:flex;gap:13px;flex-wrap:wrap;padding:12px 0;border-top:1px solid var(--luxury-border);border-bottom:1px solid var(--luxury-border);font-size:11px;color:#657487}
.car-specs i{color:var(--luxury-gold)}
.car-footer{display:flex;align-items:center;justify-content:space-between;padding-top:14px}
.car-status{font-size:11px;color:#24875a;font-weight:700}
.car-status:before{content:"";display:inline-block;width:6px;height:6px;background:#2aaa6b;border-radius:50%;margin-left:5px}
.car-footer .btn{font-size:12px!important;padding:9px 14px!important}

.offer-strip{background:var(--luxury-cream);border:1px solid var(--luxury-border);border-radius:18px;padding:30px}
.offer-strip h3{font-size:32px;color:var(--luxury-navy);margin:0 0 6px}
.offer-strip p{color:#718096;margin:0}
.offer-number{font-family:"Sakkal Majalla Web","Sakkal Majalla",serif;font-size:58px;color:var(--luxury-gold);line-height:1}

.steps-home{background:var(--luxury-navy);color:#fff}
.steps-home h2{color:#fff}
.step-home{padding:18px 15px;position:relative}
.step-home .num{font-family:"Sakkal Majalla Web","Sakkal Majalla",serif;font-size:42px;color:var(--luxury-gold)}
.step-home h3{font-size:24px;margin:5px 0 8px}
.step-home p{font-size:13px;color:rgba(255,255,255,.62);line-height:1.8}

.testimonial-card{height:100%;border:1px solid var(--luxury-border);border-radius:16px;padding:24px;background:#fff}
.testimonial-card .quote{font-family:Georgia,serif;color:var(--luxury-gold);font-size:32px;line-height:1}
.testimonial-card p{font-size:14px;color:#657487;line-height:1.95;margin:8px 0 16px}
.testimonial-card strong{font-size:13px;color:var(--luxury-navy)}
.testimonial-card small{display:block;color:#9aa5b1;font-size:11px}

.home-final-cta{padding:82px 0;background:linear-gradient(120deg,#0B1F33,#163A5A);color:#fff}
.home-final-cta h2{font-size:48px;color:#fff}
.home-final-cta p{color:rgba(255,255,255,.7);font-size:16px}

@media(max-width:991px){.home-hero{min-height:auto;padding-bottom:80px}.hero-copy h1{font-size:50px}.hero-car-panel{height:310px}.hero-stats{margin-top:25px}.home-booking{margin-top:0;padding-top:0}.booking-bar{margin-top:-35px}.home-section{padding:62px 0}}
@media(max-width:576px){.home-hero{padding:120px 0 65px}.hero-copy h1{font-size:42px}.hero-copy p{font-size:15px}.hero-stats{flex-wrap:wrap;gap:15px}.hero-stat{padding:0 15px}.hero-stat strong{font-size:25px}.home-section h2{font-size:34px}.hero-car-panel{height:250px}.car-image-wrap{height:170px}.home-final-cta h2{font-size:38px}}


/* =========================================================
   FINAL NAVBAR
   Logo Right | Navigation True Center | Phone Left
   ========================================================= */
.custom-navbar{padding:14px 0;background:rgba(255,255,255,.96);backdrop-filter:blur(12px);border-bottom:1px solid rgba(11,31,51,.06)}
.custom-navbar .navbar-inner{position:relative;min-height:64px;display:flex!important;align-items:center;justify-content:space-between!important}
.custom-navbar .navbar-brand{position:relative;z-index:10;display:flex;align-items:center;min-width:135px;justify-content:flex-start;text-decoration:none}
.custom-navbar .navbar-brand .luxury-title{font-size:34px;line-height:1;color:var(--luxury-navy)}
.custom-navbar .navbar-collapse{position:absolute;left:50%;transform:translateX(-50%);width:auto;flex-grow:0;z-index:5}
.custom-navbar .navbar-nav{display:flex;flex-direction:row;align-items:center;gap:6px;margin:0!important;white-space:nowrap}
.custom-navbar .navbar-nav .nav-link{padding:10px 15px;font-weight:700;font-size:15px;color:#263444;position:relative}
.custom-navbar .navbar-nav .nav-link:hover,.custom-navbar .navbar-nav .nav-link.active{color:var(--luxury-navy)}
.custom-navbar .navbar-nav .nav-link.active:after{content:"";position:absolute;height:2px;width:36px;background:var(--luxury-gold);bottom:1px;right:50%;transform:translateX(50%);border-radius:4px}
.custom-navbar .hotline-btn{position:relative;z-index:10;min-width:122px;height:52px;display:inline-flex;align-items:center;justify-content:center;margin:0!important;border-radius:16px;font-size:16px;font-weight:800;direction:ltr}
@media(max-width:991.98px){
.custom-navbar .navbar-inner{min-height:58px}
.custom-navbar .navbar-brand{min-width:auto}
.custom-navbar .navbar-collapse{position:absolute;top:calc(100% + 12px);right:0;left:0;transform:none;width:100%;background:#fff;border:1px solid var(--luxury-border);border-radius:16px;padding:10px 14px;box-shadow:0 18px 40px rgba(11,31,51,.12)}
.custom-navbar .navbar-collapse:not(.show){display:none!important}
.custom-navbar .navbar-nav{flex-direction:column;align-items:stretch;gap:0}
.custom-navbar .navbar-nav .nav-link{padding:12px 8px;text-align:right}
.custom-navbar .navbar-toggler{order:2;margin-right:auto;margin-left:12px;border:0;box-shadow:none}
.custom-navbar .hotline-btn{min-width:108px;height:46px;font-size:14px;order:3}
.custom-navbar .navbar-brand{order:1}
}
@media(max-width:575.98px){
.custom-navbar{padding:9px 0}
.custom-navbar .navbar-brand .luxury-title{font-size:28px}
.custom-navbar .hotline-btn{min-width:96px;padding:0 10px;font-size:13px}
}

/* =========================================================
   REAL DARB LOGO — Navbar
   ========================================================= */
/* REAL DARB LOGO — Navbar */

.custom-navbar .navbar-brand {
    min-width: 195px;
    height: 70px;
    display: flex;
    align-items: center;
}

.custom-navbar .navbar-brand .brand-logo {
    display: block;
    width: auto;
    height: 120px;
    max-width: 205px;
    object-fit: contain;
    object-position: right center;
}

/* Tablet */
@media (max-width: 991.98px) {

    .custom-navbar .navbar-brand {
        min-width: 140px;
        height: 54px;
    }

    .custom-navbar .navbar-brand .brand-logo {
        height: 50px;
        max-width: 150px;
    }
}

/* Mobile */
@media (max-width: 575.98px) {

    .custom-navbar .navbar-brand {
        min-width: 120px;
        height: 48px;
    }

    .custom-navbar .navbar-brand .brand-logo {
        height: 44px;
        max-width: 135px;
    }
}


/* =========================================================
   DARB BRAND COLOR SYSTEM
   Derived from the official logo:
   Deep Navy + Brand Teal
   ========================================================= */
:root{
    --luxury-navy:#111B4A;
    --luxury-navy-2:#18245A;
    --luxury-gold:#2F9F92;       /* Brand Teal replaces decorative Gold */
    --luxury-gold-soft:#65BFB4;
    --brand-teal:#2F9F92;
    --brand-teal-dark:#237C73;
    --brand-teal-light:#DDF2EF;
    --luxury-cream:#F4F9F9;
    --luxury-border:#DCE8E7;
}

/* Brand accents */
.luxury-eyebrow,
.section-kicker,
.section-tag{
    color:var(--brand-teal);
}

/* Primary buttons */
.btn-luxury,
.btn-gold{
    background:var(--brand-teal)!important;
    border-color:var(--brand-teal)!important;
    color:#fff!important;
}
.btn-luxury:hover,
.btn-gold:hover{
    background:var(--brand-teal-dark)!important;
    border-color:var(--brand-teal-dark)!important;
    color:#fff!important;
}

/* Phone CTA keeps strong navy corporate identity */
.btn-main{
    background:linear-gradient(135deg,var(--luxury-navy),#263B86)!important;
    border-color:transparent!important;
}

/* Navbar active state */
.custom-navbar .navbar-nav .nav-link.active:after{
    background:var(--brand-teal)!important;
}

/* Teal highlights */
.feature-item i,
.car-specs i,
.contact-line i,
.testimonial-card .quote{
    color:var(--brand-teal)!important;
}

/* Teal borders and focus */
.luxury-input:focus,
.luxury-select:focus,
.luxury-textarea:focus{
    border-color:var(--brand-teal)!important;
    box-shadow:0 0 0 .15rem rgba(47,159,146,.10)!important;
}

/* Status colors and tags */
.car-tag{
    border-color:rgba(47,159,146,.20)!important;
}
.car-status:before{
    background:var(--brand-teal)!important;
}

/* Hero and dark sections: closer to logo navy */
.home-hero{
    background:linear-gradient(120deg,#0D1438 0%,#111B4A 52%,#1B2D68 100%)!important;
}
.steps-home,
.contact-info-card{
    background:#111B4A!important;
}
.home-final-cta{
    background:linear-gradient(120deg,#111B4A,#21326D)!important;
}

/* Brand teal used for visual numbers and emphasis */
.offer-number,
.hero-stat strong,
.step-home .num{
    color:var(--brand-teal-light)!important;
}
.offer-strip{
    background:linear-gradient(135deg,#F5FAFA,#EDF7F5)!important;
    border-color:#D5EAE6!important;
}

/* Subtle brand background accents */
.contact-map-note{
    background:#EEF8F6!important;
}

/* HERO AUTO IMAGE SLIDER */
.hero-slider-shell{position:relative;z-index:3;width:100%;padding:8px}
.hero-carousel{position:relative;overflow:visible}
.hero-carousel .carousel-inner{border-radius:24px;overflow:hidden;box-shadow:0 28px 60px rgba(0,0,0,.28);background:#172044}
.hero-carousel .carousel-item{height:440px;background:#172044}
.hero-carousel .carousel-item:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(9,15,40,0) 55%,rgba(9,15,40,.32) 100%);pointer-events:none}
.hero-carousel .carousel-item img{height:100%;width:100%;object-fit:cover;object-position:center;transition:transform 5s ease}
.hero-carousel .carousel-item.active img{transform:scale(1.035)}
.hero-control{width:56px!important;height:56px!important;top:50%!important;bottom:auto!important;transform:translateY(-50%);opacity:1!important;border:1px solid rgba(255,255,255,.28);background:rgba(17,27,74,.72);backdrop-filter:blur(10px);border-radius:50%;display:flex!important;align-items:center;justify-content:center;transition:.25s ease}
.hero-control:hover{background:var(--brand-teal);border-color:var(--brand-teal);transform:translateY(-50%) scale(1.06)}
.hero-control i{color:#fff;font-size:16px}
.hero-control-prev{right:auto!important;left:-28px!important}.hero-control-next{left:auto!important;right:-28px!important}
.hero-indicators{margin:0!important;bottom:18px!important;z-index:4}
.hero-indicators [data-bs-target]{width:8px!important;height:8px!important;border-radius:50%!important;border:0!important;margin:0 5px!important;opacity:.75!important;background:#fff!important}
.hero-indicators .active{background:var(--brand-teal)!important;opacity:1!important;transform:scale(1.25)}
.hero-slider-shell:before{content:"";position:absolute;width:160px;height:160px;border-top:1px solid rgba(47,159,146,.35);border-right:1px solid rgba(47,159,146,.35);top:-12px;right:-12px;border-radius:0 26px 0 0;pointer-events:none}
@media(max-width:991.98px){.hero-slider-shell{margin-top:30px}.hero-carousel .carousel-item{height:380px}}
@media(max-width:575.98px){.hero-carousel .carousel-item{height:270px}.hero-control{width:42px!important;height:42px!important}.hero-control-prev{left:-10px!important}.hero-control-next{right:-10px!important}}

/* =========================================
   HERO STATISTICS - PREMIUM CARDS
========================================= */

.hero-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
    margin-top: 45px;
    direction: rtl;
}

/* الكارت */
.hero-stat {
    min-height: 145px;
    padding: 24px 26px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    background: linear-gradient(
        145deg,
        rgba(40, 57, 110, 0.75),
        rgba(22, 33, 75, 0.9)
    );

    border: 1px solid rgba(255, 255, 255, 0.15);

    border-radius: 22px;

    transition: all 0.35s ease;

    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.15);
}

/* Hover */
.hero-stat:hover {
    transform: translateY(-7px);

    border-color: rgba(47, 159, 146, 0.65);

    box-shadow:
        0 20px 45px rgba(0, 0, 0, 0.25);
}

/* النصوص */
.stat-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.stat-content strong {
    font-size: 42px;
    font-weight: 800;
    line-height: 1;

    color: #ffffff;
}

.stat-content span {
    font-size: 17px;
    font-weight: 600;

    color: rgba(255, 255, 255, 0.72);
}

/* دائرة الأيقونة */
.stat-icon {
    width: 90px;
    height: 90px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.06);

    border: 1px solid rgba(255, 255, 255, 0.14);

    color: var(--brand-teal);

    font-size: 38px;

    transition: all 0.35s ease;
}

/* تأثير Hover للأيقونة */
.hero-stat:hover .stat-icon {
    background: rgba(47, 159, 146, 0.14);

    transform: scale(1.08);
}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 1200px) {

    .hero-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

}


@media (max-width: 768px) {

    .hero-stats {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .hero-stat {
        min-height: 110px;
        padding: 18px 22px;
    }

    .stat-content strong {
        font-size: 34px;
    }

    .stat-icon {
        width: 65px;
        height: 65px;

        font-size: 28px;
    }

}

/* =========================================
   NAVBAR - BRAND BLUE INNER BAR
========================================= */

/* المساحة الخارجية تبقى بيضاء */
.custom-navbar {
    background: #ffffff !important;
    border-bottom: none !important;
}

/* البار الداخلي فقط أزرق */
.custom-navbar .navbar-inner {
    background: #203068 !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 28px;
}

/* روابط القائمة باللون الأبيض */
.custom-navbar .navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.9) !important;
}

.custom-navbar .navbar-nav .nav-link:hover,
.custom-navbar .navbar-nav .nav-link.active {
    color: #ffffff !important;
}

/* الخط تحت العنصر النشط */
.custom-navbar .navbar-nav .nav-link.active:after {
    background: #2F9F92 !important;
}

/* زر الهاتف */
.custom-navbar .hotline-btn {
    background: #ffffff !important;
    color: #203068 !important;
    border: none !important;
}

/* Footer Logo */
.footer-logo {
    display: inline-flex;
    justify-content: center;
    margin-bottom: 12px;
}

.footer-logo img {
    width: 120px;
    height: auto;
    object-fit: contain;
    transition: 0.3s ease;
}

.footer-logo:hover img {
    transform: scale(1.04);
}

@media (max-width: 576px) {
    .footer-logo img {
        width: 95px;
    }
}

/* =========================================
   FOOTER - PERFECT CENTER ALIGNMENT
========================================= */

.site-footer {
    width: 100%;
    text-align: center !important;
}

.site-footer .footer-content {
    width: 100%;
    margin: 0 auto;
    
    display: flex;
    flex-direction: column;
    align-items: center !important;
    justify-content: center;
    
    text-align: center !important;
}

/* اللوجو */
.footer-logo {
    display: flex !important;
    justify-content: center !important;
    align-items: center;
    width: 100%;
    margin: 25px auto 12px;
}

.footer-logo img {
    display: block;
    width: 110px;
    height: auto;
    margin: 0 auto;
}

/* اسم الشركة */
.footer-content h4 {
    width: 100%;
    text-align: center !important;
    margin: 0 0 10px;
}

/* الحقوق */
.footer-content p {
    width: 100%;
    text-align: center !important;
    margin: 0 0 10px;
}

/* الروابط */
.footer-links {
    width: 100%;
    display: flex;
    justify-content: center !important;
    align-items: center;
    gap: 25px;
}

.footer-links a {
    display: inline-block;
}

/* =========================================
   COMPACT PREMIUM FOOTER
========================================= */

.site-footer {
    padding: 20px 0 16px !important;
    min-height: auto !important;
}

/* المحتوى */
.site-footer .footer-content {
    gap: 0 !important;
}

/* اللوجو */
.footer-logo {
    margin: 8px auto 6px !important;
}

.footer-logo img {
    width: 90px !important;
}

/* اسم الشركة */
.footer-content h4 {
    font-size: 20px !important;
    margin: 0 0 5px !important;
    line-height: 1.3;
}

/* الحقوق */
.footer-content p {
    font-size: 14px !important;
    margin: 0 0 6px !important;
    line-height: 1.4;
}

/* روابط الفوتر */
.footer-links {
    gap: 18px !important;
    line-height: 1.3;
}

.footer-links a {
    font-size: 14px !important;
}

/* =========================================
   COMPACT HORIZONTAL FOOTER
========================================= */

.site-footer {
    padding: 14px 0 !important;
    min-height: auto !important;
}

/* المحتوى الرئيسي */
.site-footer .footer-content {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;

    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center !important;
}

/* صف اللوجو + اسم الشركة */
.footer-brand-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;

    margin-bottom: 5px;
}

/* اللوجو */
.footer-logo {
    width: auto !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center;
}

.footer-logo img {
    width: 70px !important;
    height: auto;
    display: block;
}

/* اسم الشركة */
.footer-brand-row h4 {
    margin: 0 !important;
    font-size: 18px !important;
    line-height: 1.2;
}

/* الحقوق */
.footer-content p {
    font-size: 12px !important;
    margin: 2px 0 !important;
    line-height: 1.3;
}

/* الروابط */
.footer-links {
    display: flex;
    justify-content: center;
    gap: 16px !important;
    margin-top: 2px;
}

.footer-links a {
    font-size: 12px !important;
}

/* =========================================================
   FINAL COMPACT HORIZONTAL FOOTER
   Applied consistently across all website pages
   ========================================================= */
.footer.site-footer{
    background:#172033 !important;
    padding:10px 0 !important;
    min-height:0 !important;
    text-align:center !important;
}

.footer.site-footer .footer-content{
    width:100%;
    max-width:760px;
    margin:0 auto;
    display:flex !important;
    flex-direction:column;
    align-items:center !important;
    justify-content:center;
    gap:5px !important;
    text-align:center !important;
}

/* Logo on the right side of the company text */
.footer.site-footer .footer-brand-row{
    display:flex !important;
    flex-direction:row;
    align-items:center;
    justify-content:center;
    gap:9px;
    margin:0 !important;
}

.footer.site-footer .footer-logo{
    display:flex !important;
    align-items:center;
    justify-content:center;
    width:auto !important;
    height:auto !important;
    margin:0 !important;
    flex-shrink:0;
}

.footer.site-footer .footer-logo img{
    display:block;
    width:58px !important;
    height:auto !important;
    margin:0 !important;
    object-fit:contain;
}

.footer.site-footer .footer-brand-text{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    gap:1px;
    text-align:right;
    line-height:1.2;
}

.footer.site-footer .footer-brand-text .luxury-title{
    color:#fff;
    font-size:15px;
    font-weight:700;
    line-height:1.25;
}

.footer.site-footer .footer-brand-text small{
    color:rgba(255,255,255,.65) !important;
    font-size:10px !important;
    font-weight:500;
    margin:0 !important;
}

.footer.site-footer .footer-links{
    width:auto !important;
    display:flex !important;
    flex-direction:row;
    align-items:center;
    justify-content:center !important;
    gap:9px !important;
    margin:0 !important;
    line-height:1.2;
}

.footer.site-footer .footer-links a,
.footer.site-footer .footer-separator{
    color:rgba(255,255,255,.72) !important;
    font-size:11px !important;
    font-weight:500;
    transition:color .25s ease;
}

.footer.site-footer .footer-links a:hover{
    color:var(--brand-teal,#2F9F92) !important;
}

@media(max-width:576px){
    .footer.site-footer{padding:9px 0 !important;}
    .footer.site-footer .footer-logo img{width:52px !important;}
    .footer.site-footer .footer-brand-text .luxury-title{font-size:14px;}
    .footer.site-footer .footer-brand-text small{font-size:9px !important;}
    .footer.site-footer .footer-links a,
    .footer.site-footer .footer-separator{font-size:10px !important;}
}

/* =========================================
   HOME HERO - LOGO WATERMARK
========================================= */

.home-hero {
    position: relative !important;
    overflow: hidden;
}

/* اللوجو كخلفية شفافة */
.home-hero::after {
    content: "";
    position: absolute;

    width: 800px;
    height: 500px;

    background-image: url("../images/darblogoblue (1).png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;

    opacity: 0.08;

    top: 27%;
    right: 12.5%;
    left: auto;

    transform: translateY(-50%);
    pointer-events: none;
    z-index: 0;
}

/* المحتوى يبقى فوق اللوجو */
.home-hero > * {
    position: relative;
    z-index: 1;
}

/* =========================================
   OFFER STRIP - BACKGROUND IMAGE
========================================= */

/* =========================================
   OFFER STRIP BACKGROUND IMAGE
========================================= */

/* =========================================
   OFFER 15% BACKGROUND
========================================= */
/* =========================================
   PREMIUM 15% OFFER BANNER
========================================= */

/* =================================
   Offer Banner
   ================================= */

.offer-strip {
    position: relative !important;
    overflow: hidden !important;

    width: 100%;
    padding: 0 !important;
    margin: 0;

    border-radius: 22px !important;
    border: 1px solid rgba(47, 159, 146, 0.15);

    background: #111B4A;
    box-shadow: 0 15px 35px rgba(11, 31, 51, 0.08);

    line-height: 0;
}

/* الصورة */
.offer-strip-image {
    display: block;

    width: 100%;
    height: auto;

    max-width: 100%;

    object-fit: contain;
}

/* طبقة خفيفة فوق الصورة */
.offer-strip::before {
    content: "";
    position: absolute;
    inset: 0;

    background: linear-gradient(
        90deg,
        rgba(7,20,50,.08),
        rgba(255,255,255,0)
    );

    pointer-events: none;
    z-index: 1;
}

/* الزر */
.offer-content {
    position: absolute;

    left: 50%;
    top: 85%;

    transform: translate(-50%, -50%);

    z-index: 2;
}

.offer-content .btn {
    padding: 12px 25px !important;
    border-radius: 10px !important;

    box-shadow:
        0 8px 22px rgba(0,0,0,.15);
}

/* Mobile */
@media (max-width: 768px) {

    .offer-strip {
        border-radius: 16px !important;
    }

    .offer-content {
        left: 50%;
        top: 85%;
        bottom: auto;

        transform: translate(-50%, -50%);
    }

    .offer-content .btn {
        font-size: 13px !important;
        padding: 9px 16px !important;
    }
}
/* =========================================
   CARS PAGE - HERO COVER
========================================= */
/* =========================================
   CARS HERO - IMAGE COVER
========================================= */

/* بانر السيارات */
.cars-cover-image {
    width: 100%;
    padding: 0 !important;
    margin: 0;
    overflow: hidden;
    background: #111B4A;
    line-height: 0;
}

.cars-cover-image img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
}

/* =========================================
   BRANCHES HERO VIDEO
========================================= */

/* =========================================
   BRANCHES HERO VIDEO
========================================= */

.branches-hero {
    position: relative !important;

    min-height: 380px;

    padding: 0 !important;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    color: #fff;

    background: #0b2345 !important;
}


/* =========================================
   VIDEO
========================================= */

.branches-hero-video {
    position: absolute;
    top: 50%;
    left: 50%;

    width: 92%;
    height: 92%;

    object-fit: cover;
    object-position: center;

    transform: translate(-50%, -50%);

    z-index: 0;
}


/* =========================================
   OVERLAY
========================================= */

.branches-hero-overlay {
    position: absolute;

    inset: 0;

    background: linear-gradient(
        90deg,
        rgba(8, 20, 55, 0.72),
        rgba(8, 20, 55, 0.48),
        rgba(8, 20, 55, 0.28)
    );

    z-index: 1;

    pointer-events: none;
}


/* =========================================
   CONTENT
========================================= */

.branches-hero-content {
    position: relative;

    z-index: 2;

    padding: 85px 15px 75px;
}


/* النص الصغير */

.branches-hero-content .section-tag {
    color: #2F9F92 !important;

    margin-bottom: 10px;
}


/* العنوان */

.branches-hero-content .section-title {
    color: #ffffff !important;

    margin-bottom: 14px;
}


/* الوصف */

.branches-hero-content .section-text {
    color: rgba(255, 255, 255, 0.86) !important;

    max-width: 700px;

    line-height: 1.9;
}


/* =========================================
   SOUND BUTTON
========================================= */

.hero-sound-btn {
    position: absolute;

    right: 25px;
    bottom: 25px;

    width: 48px;
    height: 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    border: 1px solid rgba(255, 255, 255, 0.25);

    background: rgba(8, 20, 55, 0.65);

    color: #fff;

    backdrop-filter: blur(10px);

    cursor: pointer;

    z-index: 5;

    transition: all 0.25s ease;
}


/* Hover */

.hero-sound-btn:hover {
    background: #2F9F92;

    border-color: #2F9F92;

    transform: scale(1.06);
}


/* Icon */

.hero-sound-btn i {
    font-size: 17px;
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 768px) {

    .branches-hero {
        min-height: 300px;
    }

    .branches-hero-content {
        padding: 65px 15px 55px;
    }

    .branches-hero-content .section-title {
        font-size: 34px !important;
    }

    .branches-hero-content .section-text {
        font-size: 14px;
    }

    .hero-sound-btn {
        width: 42px;
        height: 42px;

        right: 18px;
        bottom: 18px;
    }

}

.btn-map {
    background: #2F9F92 !important;
    border-color: #2F9F92 !important;
    color: #fff !important;
}

.btn-map:hover {
    background: #237C73 !important;
    border-color: #237C73 !important;
    color: #fff !important;
}

.offers-banner {
    width: 100%;
    padding: 0 !important;
    margin: 0;
    overflow: hidden;
    background: #111B4A;
    line-height: 0;
}

.offers-banner-image {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
}

.featured-offer {
    position: relative;
    overflow: hidden;
    padding: 0 !important;
    margin: 0;
    line-height: 0;
    background: #111B4A;
    border-radius: 22px;
}

.featured-offer img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
}

/* ================================
   Mobile Dropdown Menu
   ================================ */

@media (max-width: 991px) {

    .custom-navbar #mainMenu {
        background: #203068 !important;
        border-radius: 18px !important;
        padding: 12px 15px !important;
        margin-top: 10px !important;
        box-shadow: 0 12px 30px rgba(17, 27, 74, 0.20);
    }

    .custom-navbar #mainMenu .nav-link {
        color: #ffffff !important;
        background: transparent !important;
        padding: 12px 10px !important;
        border-radius: 10px;
    }

    .custom-navbar #mainMenu .nav-link:hover,
    .custom-navbar #mainMenu .nav-link.active {
        color: #ffffff !important;
        background: #2F9F92 !important;
    }

    .custom-navbar #mainMenu .nav-item {
        width: 100%;
    }

}

/* تكبير باقي العبارة في الصفحة الرئيسية */
.home-hero .hero-copy .luxury-eyebrow {
    font-size: 24px !important;
    font-weight: 800 !important;
    line-height: 1.7;
}

/* كلمة وجهتك تظل أكبر */
.home-hero .hero-copy .highlight-word {
    font-size: 44px !important;
    font-weight: 900 !important;
    display: inline-block;
    line-height: 1.2;
}

/* أحجام الموبايل */
@media (max-width: 768px) {
    .home-hero .hero-copy .luxury-eyebrow {
        font-size: 20px !important;
    }

    .home-hero .hero-copy .highlight-word {
        font-size: 24px !important;
    }
}

/* باقي العبارة باللون الأبيض */
.home-hero .hero-copy .luxury-eyebrow {
    color: #FFFFFF !important;
}

/* كلمة وجهتك فقط بلون الهوية */
.home-hero .hero-copy .luxury-eyebrow .highlight-word {
    color: #2F9F92 !important;
}