/* ============================================
   DESERT FOX — Arabic / RTL Overrides
   Load AFTER style.css
   ============================================ */

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

/* ---------- Base RTL ---------- */
body {
  direction: rtl;
  font-family: 'Tajawal', sans-serif;
}

/* Brand name in Arabic */
.brand-text .b1 {
  font-family: 'Tajawal', sans-serif;
  letter-spacing: 0;
  font-size: 1.4rem;
}
.brand-text .b2 {
  font-family: 'Tajawal', sans-serif;
  letter-spacing: 0;
}

/* Hero heading uses serif — swap to Tajawal for Arabic */
.hero h1,
.page-hero h1,
.section-head h2,
.about-content h3,
.contact-info h3,
.contact-form h3,
.cta-banner h2,
.service-card h3,
.test-card p,
.why-item h4,
.footer h5 {
  font-family: 'Tajawal', sans-serif;
}

/* ---------- Flip absolutely-positioned elements ---------- */
/* About background stripe: was right-side, now left */
.about::before { right: auto; left: 0; }

/* About badge: was bottom-left, now bottom-right */
.about-image .badge { left: auto; right: 1.5rem; }

/* Service card number badge: was top-right, now top-left */
.service-card .num { right: auto; left: 1rem; }

/* Testimonial quote mark: was top-right, now top-left */
.test-card .quote-mark { right: auto; left: 1.5rem; }

/* Contact info decorative circle: was bottom-right, now bottom-left */
.contact-info::before { right: auto; left: -50px; }

/* ---------- Hero stats border ---------- */
.hero-stats .stat {
  border-left: none;
  border-right: 2px solid var(--gold);
  padding-left: 0;
  padding-right: 1rem;
}

/* ---------- Service card "Learn More" arrow — flip ---------- */
.service-card a.more svg { transform: scaleX(-1); }
.page-hero-actions .btn svg { transform: scaleX(-1); }

/* ---------- Footer hover indent — flip direction ---------- */
.footer ul a:hover { padding-left: 0; padding-right: 6px; }

/* ---------- Mobile menu: slides from left in RTL ---------- */
@media (max-width: 980px) {
  .menu {
    right: auto;
    left: -100%;
    align-items: flex-end;
    box-shadow: 10px 0 30px rgba(0, 0, 0, .2);
  }
  .menu.open { left: 0; right: auto; }
  .menu a { text-align: right; }
}

/* ---------- Language button — reverse styling in Arabic pages ---------- */
.lang-btn {
  font-family: 'Tajawal', sans-serif;
  letter-spacing: 0;
}