/* ========================================================= RTL (Right-to-Left) overrides for Arabic language support Applied only when is set ========================================================= */ /* Arabic font stack */ [dir="rtl"] body, [dir="rtl"] * { font-family: 'Tajawal', 'Inter Tight', sans-serif; letter-spacing: 0 !important; } [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6 { font-family: 'Cairo', 'Inter Tight', sans-serif; } /* ─── Text & alignment ─────────────────────────────────── */ [dir="rtl"] { text-align: right; } [dir="rtl"] .text-left { text-align: right; } [dir="rtl"] .text-right { text-align: left; } /* ─── Flex direction mirrors ───────────────────────────── */ [dir="rtl"] .flex-row { flex-direction: row-reverse; } /*[dir="rtl"] nav ul.flex { flex-direction: row-reverse; }*/ /* Keep icon-text pairs from reversing inside buttons */ [dir="rtl"] a.btn-md-v2, [dir="rtl"] .btn-md-v2 { /* flex-direction: row-reverse;*/ } /* ─── Navbar ───────────────────────────────────────────── */ /* Reverse the header flex row so logo is on the right, buttons on the left */ [dir="rtl"] .header-one { flex-direction: row-reverse !important; } /* Ensure logo sits on the far right */ [dir="rtl"] .header-one > .flex-shrink-0 { order: 3; padding-left: 0; padding-right: 1.25rem; } /* Nav stays in the center */ [dir="rtl"] .header-one > nav { order: 2; justify-content: right; } /* Buttons group (3rd child) goes to the far left */ [dir="rtl"] .header-one > *:nth-child(3) { order: 1; } /* Hamburger (4th child) stays at left edge on mobile */ [dir="rtl"] .header-one > *:nth-child(4) { order: 0; } [dir="rtl"] header .flex-shrink-0.pl-5 { padding-left: 0; padding-right: 1.25rem; } /* ─── Mobile sidebar: slide from left instead of right ─── */ [dir="rtl"] .sidebar { right: auto; left: 0; transform: translateX(-100%); } [dir="rtl"] .sidebar.open { transform: translateX(0); } /* ─── Padding / margin mirrors ─────────────────────────── */ [dir="rtl"] .pl-5 { padding-left: 0; padding-right: 1.25rem; } [dir="rtl"] .pr-5 { padding-right: 0; padding-left: 1.25rem; } [dir="rtl"] .pl-4 { padding-left: 0; padding-right: 1rem; } [dir="rtl"] .pr-4 { padding-right: 0; padding-left: 1rem; } [dir="rtl"] .ml-auto { margin-left: 0; margin-right: auto; } [dir="rtl"] .mr-auto { margin-right: 0; margin-left: auto; } /* ─── Grid column order ────────────────────────────────── */ [dir="rtl"] .grid { direction: rtl; } /* ─── Swiper carousel ──────────────────────────────────── */ [dir="rtl"] .swiper { direction: rtl; } /* ─── Breadcrumb / list separators ────────────────────── */ [dir="rtl"] .breadcrumb-item + .breadcrumb-item::before { content: "\\"; } /* ─── Input fields ─────────────────────────────────────── */ [dir="rtl"] input, [dir="rtl"] textarea, [dir="rtl"] select { text-align: right; direction: rtl; } /* ─── Icons inside buttons ─────────────────────────────── */ /* Tailwind v4 uses the individual CSS 'translate' property, not 'transform'. */ /* Without explicit left:0, RTL flow may place absolute icons outside the */ /* overflow:hidden container. We also reverse the slide direction for RTL. */ [dir="rtl"] .btn-v2-icon { /* transform: none; icon is symmetric — no horizontal flip needed */ left: 0; /* anchor at physical left edge regardless of RTL flow */ transform: rotateY(180deg); } [dir="rtl"] .rorate-ar { transform: rotateY(180deg); } /* Default hidden icon (has -translate-x-6): hide off the RIGHT in RTL */ [dir="rtl"] .btn-v2-icon.\-translate-x-6 { --tw-translate-x: calc(var(--spacing) * 6); translate: var(--tw-translate-x) var(--tw-translate-y); } /* Default visible icon (has -translate-x-2): peek from the RIGHT in RTL */ [dir="rtl"] .btn-v2-icon.\-translate-x-2 { --tw-translate-x: calc(var(--spacing) * 0); translate: var(--tw-translate-x) var(--tw-translate-y); } /* Hover: hidden icon slides IN from the right */ [dir="rtl"] .group-hover\/btn-v2\:translate-x-1.btn-v2-icon:is(:where(.group\/btn-v2):hover *) { --tw-translate-x: calc(var(--spacing) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); } /* Hover: visible icon slides OUT to the left */ [dir="rtl"] .group-hover\/btn-v2\:translate-x-6.btn-v2-icon:is(:where(.group\/btn-v2):hover *) { --tw-translate-x: calc(var(--spacing) * -6); translate: var(--tw-translate-x) var(--tw-translate-y); } /* ─── Border radius flip for pill-shaped nav ──────────── */ [dir="rtl"] .rounded-full { border-radius: 9999px; /* unchanged */ } /* ─── Footer grid ───────────────────────────────────────── */ [dir="rtl"] .footer .grid { direction: rtl; } [dir="rtl"] .footer .space-y-5 a { text-align: right; } /* ─── Language switcher positioning ───────────────────── */ [dir="rtl"] .lang-switcher { direction: ltr; } /* keep EN/AR labels readable */ /* ─── Logo marquee ─────────────────────────────────────── */ /* The horizontal-marquee keyframe always translates by -100% (leftward). In RTL, flex lays out .horizontal-marquee-inner items right-to-left, so the duplicate ends up on the LEFT instead of the RIGHT, breaking the seamless loop. Forcing direction:ltr keeps items in the expected order. */ [dir="rtl"] .horizontal-marquee { direction: ltr; } [dir="rtl"] .pt-toggle-wrap { direction:ltr; } [dir="rtl"] .dir-left { direction:ltr; }