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

body {
    font-family: 'Outfit', sans-serif;
    background-color: #FBF7ED;
}

/* ── Arabic / RTL font ─────────────────────────────────────────────────────── */
[dir="rtl"] body,
[dir="rtl"] * {
    font-family: 'Cairo', sans-serif;
}

.hero-bg-overlay {
    background-size: cover;
    background-position: center;
}

.hero-gradient-bg {
    background: radial-gradient(circle at 85% 15%, rgba(0, 159, 227, 0.12) 0%, rgba(251, 247, 237, 0) 50%);
}

.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

@keyframes marqueeLeft {
    0%   { transform: translateX(0%); }
    100% { transform: translateX(-50%); }
}

@keyframes marqueeRight {
    0%   { transform: translateX(-50%); }
    100% { transform: translateX(0%); }
}

.animate-marquee-left-track {
    display: flex;
    width: max-content;
    animation: marqueeLeft 30s linear infinite;
}

.animate-marquee-right-track {
    display: flex;
    width: max-content;
    animation: marqueeRight 30s linear infinite;
}

.animate-marquee-left-track:hover,
.animate-marquee-right-track:hover {
    animation-play-state: paused;
}

/* ── RTL directional icon flip ─────────────────────────────────────────────── */
[dir="rtl"] .fa-arrow-right,
[dir="rtl"] .fa-location-arrow {
    transform: scaleX(-1);
    display: inline-block;
}

/* ── RTL layout fixes ──────────────────────────────────────────────────────── */

/* Flip top-bar badge margin */
[dir="rtl"] .topbar-badge  { margin-right: 0; margin-left: 0.25rem; }
[dir="rtl"] .topbar-action { margin-left: 0;  margin-right: 0.25rem; }

/* Logo rotated stamp should tilt the other way in RTL */
[dir="rtl"] .brand-stamp { transform: rotate(2deg); }

/* Header: flex items flow RTL via inherited direction — no override needed.
   But reset the logo's margin-right so it doesn't add extra end-space. */
[dir="rtl"] .logo-wrap { margin-right: 0; margin-left: 0.5rem; }

/* Footer alignment */
[dir="rtl"] footer { text-align: right; }
[dir="rtl"] footer ul { padding-right: 0; }

/* Marquee cards: for RTL the text inside is still readable L→R for English
   reviewer names; keep animation direction unchanged (visually fine both ways) */
.offer-bg-gradient {
    background: linear-gradient(135deg, #FFDE00 0%, #FFDE00 100%);
}