/* Responsive adjustments */
@media (max-width: 768px) {
  .hero-headline {
    font-size: 2.5rem;
  }

  .client-number {
    font-size: 2rem;
  }

  .hero-description {
    font-size: 1rem;
  }

  .elite-nav-utilities {
    margin-left: 0;
    margin-top: 0.5rem;
  }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .hero-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .hero-buttons .btn {
    margin-bottom: 0.5rem;
    width: 100%;
    max-width: 300px;
  }

  .stats-row {
    flex-direction: column;
  }

  .stat-item {
    margin-bottom: 1rem;
  }
}

/* RTL (Right-to-Left) Support for Arabic */
[dir="rtl"] {
  direction: rtl;
  text-align: right;
}

[dir="rtl"] .navbar-nav {
  flex-direction: row-reverse;
}

[dir="rtl"] .me-2 {
  margin-left: 0.5rem !important;
  margin-right: 0 !important;
}

[dir="rtl"] .ms-2 {
  margin-right: 0.5rem !important;
  margin-left: 0 !important;
}

[dir="rtl"] .me-1 {
  margin-left: 0.25rem !important;
  margin-right: 0 !important;
}

[dir="rtl"] .ms-1 {
  margin-right: 0.25rem !important;
  margin-left: 0 !important;
}

[dir="rtl"] .me-3 {
  margin-left: 1rem !important;
  margin-right: 0 !important;
}

[dir="rtl"] .ms-3 {
  margin-right: 1rem !important;
  margin-left: 0 !important;
}

/* RTL Support for Button Icons */
[dir="rtl"] .btn i.me-1 {
  margin-right: 0 !important;
  margin-left: 0.25rem !important;
}

[dir="rtl"] .btn i.me-2 {
  margin-right: 0 !important;
  margin-left: 0.5rem !important;
}

[dir="rtl"] .btn i.me-3 {
  margin-right: 0 !important;
  margin-left: 1rem !important;
}

[dir="rtl"] .btn i.ms-1 {
  margin-left: 0 !important;
  margin-right: 0.25rem !important;
}

[dir="rtl"] .btn i.ms-2 {
  margin-left: 0 !important;
  margin-right: 0.5rem !important;
}

[dir="rtl"] .btn i.ms-3 {
  margin-left: 0 !important;
  margin-right: 1rem !important;
}

/* RTL Support for Button Content - Switch icon and text order */
[dir="rtl"] .btn {
  flex-direction: row;
}

/* In RTL, we want text first (on right), then icon (on left) */
/* So we reverse the order: text gets order 1 (appears first/right), icon gets order 2 (appears second/left) */
[dir="rtl"] .btn > *:not(i) {
  order: 1;
}

[dir="rtl"] .btn > i {
  order: 2;
}

[dir="rtl"] .me-auto {
  margin-left: auto !important;
  margin-right: 0 !important;
}

[dir="rtl"] .ms-auto {
  margin-right: auto !important;
  margin-left: 0 !important;
}

[dir="rtl"] .dropdown-menu-end {
  right: auto !important;
  left: 0 !important;
}

[dir="rtl"] .text-end {
  text-align: left !important;
}

[dir="rtl"] .text-start {
  text-align: right !important;
}

[dir="rtl"] .row {
  flex-direction: row-reverse;
}

/* Exclude form rows from reversal - forms should maintain logical order */
[dir="rtl"] .contact-form-content .row,
[dir="rtl"] .contact-form-section .row,
[dir="rtl"] form .row {
  flex-direction: row;
}

/* Contact card main row should reverse (info left, form right) */
[dir="rtl"] .contact-card > .row {
  flex-direction: row-reverse;
}

/* RTL fixes for service card list items */
[dir="rtl"] .service-card-list li {
  padding-left: 0 !important;
  padding-right: 1.5rem !important;
}

[dir="rtl"] .service-card-list li::before {
  left: auto !important;
  right: 0 !important;
}

/* RTL fixes for goals list items (Why Choose Us section) */
[dir="rtl"] .goals-list li {
  padding-left: 0 !important;
  padding-right: 1.5rem !important;
}

[dir="rtl"] .goals-list li::before {
  left: auto !important;
  right: 0 !important;
}

/* Smooth theme transition */
* {
  transition: background-color 0.3s ease, color 0.3s ease,
    border-color 0.3s ease;
}

/* Exclude images from transitions */
img,
svg,
video {
  transition: none;
}

/* Footer */
.footer-elite {
  background-color: var(--color-bg-primary); /* #090909 - Black */
  border-top: 1px solid var(--color-primary-dark);
}