/* ============================================================= RTL (Right-to-Left) Support Stylesheet Applied when html[dir="rtl"] is set for Arabic, Hebrew languages ============================================================= */ /* --------------------------------------------------------------- 1. GLOBAL TEXT & DIRECTION --------------------------------------------------------------- */ [dir="rtl"] { text-align: right; direction: rtl; } [dir="rtl"] body { text-align: right; } /* --------------------------------------------------------------- 2. TAILWIND UTILITY OVERRIDES (Landing pages) These flip margin/padding/positioning utilities used in Tailwind --------------------------------------------------------------- */ /* --- Margin Left → Margin Right --- */ [dir="rtl"] .ml-1 { margin-left: 0 !important; margin-right: 0.25rem !important; } [dir="rtl"] .ml-2 { margin-left: 0 !important; margin-right: 0.5rem !important; } [dir="rtl"] .ml-3 { margin-left: 0 !important; margin-right: 0.75rem !important; } [dir="rtl"] .ml-4 { margin-left: 0 !important; margin-right: 1rem !important; } [dir="rtl"] .ml-5 { margin-left: 0 !important; margin-right: 1.25rem !important; } [dir="rtl"] .ml-6 { margin-left: 0 !important; margin-right: 1.5rem !important; } [dir="rtl"] .ml-8 { margin-left: 0 !important; margin-right: 2rem !important; } [dir="rtl"] .ml-10 { margin-left: 0 !important; margin-right: 2.5rem !important; } [dir="rtl"] .ml-12 { margin-left: 0 !important; margin-right: 3rem !important; } [dir="rtl"] .ml-50 { margin-left: 0 !important; margin-right: 50px !important; } /* --- Margin Right → Margin Left --- */ [dir="rtl"] .mr-1 { margin-right: 0 !important; margin-left: 0.25rem !important; } [dir="rtl"] .mr-2 { margin-right: 0 !important; margin-left: 0.5rem !important; } [dir="rtl"] .mr-3 { margin-right: 0 !important; margin-left: 0.75rem !important; } [dir="rtl"] .mr-4 { margin-right: 0 !important; margin-left: 1rem !important; } [dir="rtl"] .mr-5 { margin-right: 0 !important; margin-left: 1.25rem !important; } [dir="rtl"] .mr-6 { margin-right: 0 !important; margin-left: 1.5rem !important; } /* --- Padding Left → Padding Right --- */ [dir="rtl"] .pl-4 { padding-left: 0 !important; padding-right: 1rem !important; } [dir="rtl"] .pl-6 { padding-left: 0 !important; padding-right: 1.5rem !important; } /* --- Padding Right → Padding Left --- */ [dir="rtl"] .pr-4 { padding-right: 0 !important; padding-left: 1rem !important; } [dir="rtl"] .pr-6 { padding-right: 0 !important; padding-left: 1.5rem !important; } /* --- Left / Right positioning --- */ [dir="rtl"] .left-0 { left: auto !important; right: 0 !important; } [dir="rtl"] .right-0 { right: auto !important; left: 0 !important; } [dir="rtl"] .left-4 { left: auto !important; right: 1rem !important; } [dir="rtl"] .right-3 { right: auto !important; left: 0.75rem !important; } [dir="rtl"] .right-4 { right: auto !important; left: 1rem !important; } [dir="rtl"] .right-6 { right: auto !important; left: 1.5rem !important; } /* --- Text alignment --- */ [dir="rtl"] .text-left { text-align: right !important; } [dir="rtl"] .text-right { text-align: left !important; } /* --- Responsive text alignment flips --- */ @media (min-width: 768px) { [dir="rtl"] .md\:text-left { text-align: right !important; } [dir="rtl"] .md\:text-right { text-align: left !important; } } @media (min-width: 1024px) { [dir="rtl"] .lg\:text-left { text-align: right !important; } [dir="rtl"] .lg\:text-right { text-align: left !important; } } /* --- Flexbox direction --- */ /* dir="rtl" on already makes flex-direction:row flow right-to-left. DO NOT add flex-direction: row-reverse — that would double-reverse back to LTR! */ /* Keep column direction untouched on mobile */ [dir="rtl"] .flex-col { flex-direction: column !important; } [dir="rtl"] .flex-col-reverse { flex-direction: column-reverse !important; } /* At md breakpoint, allow md:flex-row to override flex-col / flex-col-reverse in RTL. Uses a more specific selector to guarantee it wins over the above !important rules. */ @media (min-width: 768px) { [dir="rtl"] .flex-col-reverse.md\:flex-row, [dir="rtl"] .flex-col.md\:flex-row, [dir="rtl"] .md\:flex-row.flex-col, [dir="rtl"] .md\:flex-row.flex-col-reverse { flex-direction: row !important; } } /* At md breakpoint, allow md:flex-row-reverse to override flex-col / flex-col-reverse in RTL. */ @media (min-width: 768px) { [dir="rtl"] .flex-col.md\:flex-row-reverse, [dir="rtl"] .flex-col-reverse.md\:flex-row-reverse { flex-direction: row-reverse !important; } } /* At lg breakpoint, allow lg:flex-row to override flex-col / flex-col-reverse in RTL. */ @media (min-width: 1024px) { [dir="rtl"] .flex-col-reverse.lg\:flex-row, [dir="rtl"] .flex-col.lg\:flex-row, [dir="rtl"] .lg\:flex-row.flex-col, [dir="rtl"] .lg\:flex-row.flex-col-reverse { flex-direction: row !important; } } /* Flex justify: flex-start and flex-end are already direction-aware in RTL mode, so no need to flip them. */ /* --- Space utilities --- */ [dir="rtl"] .space-x-2 > :not([hidden]) ~ :not([hidden]) { margin-left: 0 !important; margin-right: 0.5rem !important; } [dir="rtl"] .space-x-3 > :not([hidden]) ~ :not([hidden]) { margin-left: 0 !important; margin-right: 0.75rem !important; } [dir="rtl"] .space-x-4 > :not([hidden]) ~ :not([hidden]) { margin-left: 0 !important; margin-right: 1rem !important; } [dir="rtl"] .space-x-6 > :not([hidden]) ~ :not([hidden]) { margin-left: 0 !important; margin-right: 1.5rem !important; } [dir="rtl"] .space-x-8 > :not([hidden]) ~ :not([hidden]) { margin-left: 0 !important; margin-right: 2rem !important; } [dir="rtl"] .space-x-12 > :not([hidden]) ~ :not([hidden]) { margin-left: 0 !important; margin-right: 3rem !important; } /* --------------------------------------------------------------- 3. BOOTSTRAP UTILITY OVERRIDES (Home/main pages) --------------------------------------------------------------- */ /* --- Bootstrap margin start/end flips --- */ [dir="rtl"] .ms-auto { margin-right: auto !important; margin-left: 0 !important; } [dir="rtl"] .me-auto { margin-left: auto !important; margin-right: 0 !important; } [dir="rtl"] .ms-md-auto { margin-right: auto !important; margin-left: 0 !important; } [dir="rtl"] .ms-1 { margin-left: 0 !important; margin-right: 0.25rem !important; } [dir="rtl"] .ms-2 { margin-left: 0 !important; margin-right: 0.5rem !important; } [dir="rtl"] .ms-3 { margin-left: 0 !important; margin-right: 1rem !important; } [dir="rtl"] .me-1 { margin-right: 0 !important; margin-left: 0.25rem !important; } [dir="rtl"] .me-2 { margin-right: 0 !important; margin-left: 0.5rem !important; } [dir="rtl"] .me-3 { margin-right: 0 !important; margin-left: 1rem !important; } [dir="rtl"] .me-4 { margin-right: 0 !important; margin-left: 1.5rem !important; } [dir="rtl"] .me-5 { margin-right: 0 !important; margin-left: 3rem !important; } /* Bootstrap text alignment */ [dir="rtl"] .text-start { text-align: right !important; } [dir="rtl"] .text-end { text-align: left !important; } [dir="rtl"] .text-md-start { text-align: right !important; } [dir="rtl"] .text-md-end { text-align: left !important; } /* --- Bootstrap justify-content responsive --- */ @media (min-width: 768px) { [dir="rtl"] .justify-content-md-start { justify-content: flex-end !important; } [dir="rtl"] .justify-content-md-end { justify-content: flex-start !important; } } /* --- Border radius flips for bootstrap --- */ [dir="rtl"] .rounded-start { border-radius: 0 0.375rem 0.375rem 0 !important; } [dir="rtl"] .rounded-end { border-radius: 0.375rem 0 0 0.375rem !important; } /* --------------------------------------------------------------- 4. HEADER & NAVIGATION (Both Bootstrap & Tailwind headers) --------------------------------------------------------------- */ /* --- Bootstrap-based header (header-multilang) --- */ /* Use direction:ltr + flex-direction:row-reverse for reliable layout reversal */ /* Main wrapper: logo on right, nav section on left */ [dir="rtl"] .xc-header-one__main-wrapper { direction: ltr; flex-direction: row-reverse; } /* Right menu: buttons/profile on left, nav items on right */ [dir="rtl"] .xc-header-one__right-menu { direction: ltr; flex-direction: row-reverse; } /* Restore RTL direction on text-content containers */ [dir="rtl"] .main-menu { direction: rtl; } /* Keep buttons in their original LTR order (Sign In → Create MM → Profile) */ [dir="rtl"] .xc-header-one__right-btn { direction: ltr; } /* Flip .main-menu margin (originally margin-right: 50px) */ [dir="rtl"] .xc-header-one__right-menu .main-menu { margin-right: 0 !important; margin-left: 50px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { [dir="rtl"] .xc-header-one__right-menu .main-menu { margin-right: 0 !important; margin-left: 20px; } } /* Flip Sign-In button margin (originally margin-right: 10px) */ [dir="rtl"] .xc-header-one__right-btn .xc-border-btn { margin-right: 0 !important; margin-left: 10px; } /* Menu item spacing: flip margin-left to margin-right */ [dir="rtl"] .ul-0 > li:not(:first-child) { margin-left: 0 !important; margin-right: 30px; } /* Submenu dropdowns: mirror LTR left:-230px → right:-230px so the 900px panel stays in viewport */ [dir="rtl"] .submenu { left: auto !important; right: -230px !important; } [dir="rtl"] .submenu-icon { margin-right: 0; margin-left: 10px; } [dir="rtl"] .has-dropdown > ul, [dir="rtl"] .has-dropdown > div { left: auto !important; right: 0 !important; } /* Hamburger margin flip (originally ml-50) */ [dir="rtl"] .xc-header-one__hamburger { margin-left: 0 !important; margin-right: 50px; } /* Profile dropdown positioning */ [dir="rtl"] .profile-card { left: auto !important; right: 0 !important; } [dir="rtl"] .profile-info { text-align: right; } [dir="rtl"] .profile-info-mobile { text-align: right; } /* Language grid needs RTL */ [dir="rtl"] .language-grid { direction: rtl; } /* --- Tailwind-based header (landing-page-header-multilang) --- */ /* Note: dir="rtl" on already reverses flex-row layout. We only flip physical margins and positions here. */ /* Dropdown positioning for RTL */ [dir="rtl"] nav .group .absolute { left: auto !important; right: -150px !important; } /* Submenu icon margin flips */ [dir="rtl"] nav .w-5.h-5.mr-3 { margin-right: 0 !important; margin-left: 0.75rem !important; } [dir="rtl"] nav .w-5.h-5.mr-1 { margin-right: 0 !important; margin-left: 0.25rem !important; } /* Chevron icon margin flip */ [dir="rtl"] nav .w-4.h-4.ml-1 { margin-left: 0 !important; margin-right: 0.25rem !important; } /* --------------------------------------------------------------- 5. FOOTER STYLES --------------------------------------------------------------- */ /* --- Bootstrap footer (footer-multilang) --- */ [dir="rtl"] .xc-footer-one__top .row { direction: rtl; } [dir="rtl"] .xc-footer__widget-nav ul { padding-right: 0; text-align: right; } [dir="rtl"] .xc-footer__widget-title { text-align: right; } [dir="rtl"] .xc-footer__widget-social { justify-content: flex-end; } [dir="rtl"] .xc-footer__widget-info { text-align: right; } [dir="rtl"] .xc-footer__widget-logo a { margin-right: 0 !important; margin-left: 5px !important; } /* --- Tailwind footer (landing-page-footer-multilang) --- */ [dir="rtl"] .mm-footer-toggle { order: -1; } /* --------------------------------------------------------------- 6. CONTENT SECTIONS - Common component flips --------------------------------------------------------------- */ /* Hero sections: dir="rtl" makes md:flex-row flow right-to-left natively. No explicit reversal needed. */ /* Feature cards, tool cards - list items alignment */ [dir="rtl"] .feature-card, [dir="rtl"] .tool-card { text-align: right; } /* Accordion sections */ [dir="rtl"] .xc-accrodion { text-align: right; padding-left: 0; padding-right: 60px; } @media (max-width: 959px) { [dir="rtl"] .xc-accrodion { padding-right: 0; } } /* --------------------------------------------------------------- 7. COMPARISON PAGE SPECIFICS --------------------------------------------------------------- */ /* Comparison tables */ [dir="rtl"] .comparison-table th, [dir="rtl"] .comparison-table td { text-align: right; } [dir="rtl"] .comparison-table th:first-child, [dir="rtl"] .comparison-table td:first-child { text-align: right; } /* Feature comparison lists */ [dir="rtl"] .feature-list li { padding-left: 0; padding-right: 1.5rem; } [dir="rtl"] .feature-list li::before { left: auto; right: 0; } /* --------------------------------------------------------------- 8. TOOLS PAGE SPECIFICS --------------------------------------------------------------- */ /* Tool input areas */ [dir="rtl"] .tool-input-area { text-align: right; } [dir="rtl"] .tool-input-area input, [dir="rtl"] .tool-input-area textarea { text-align: right; direction: rtl; } /* Tool cards grid */ [dir="rtl"] .tool-card-icon { margin-right: 0; margin-left: 0.75rem; } /* --------------------------------------------------------------- 9. USECASES PAGE SPECIFICS --------------------------------------------------------------- */ /* Step indicators */ [dir="rtl"] .step-indicator { flex-direction: row-reverse; } /* Numbered lists */ [dir="rtl"] ol { padding-right: 1.5rem; padding-left: 0; } [dir="rtl"] ul { padding-right: 1.5rem; padding-left: 0; } /* --------------------------------------------------------------- 10. CTA SECTIONS & BUTTONS --------------------------------------------------------------- */ /* CTA buttons: dir="rtl" handles flex reversal natively */ /* Button icons flip */ [dir="rtl"] .btn svg, [dir="rtl"] .xc-btn svg, [dir="rtl"] button svg.ml-2 { margin-left: 0 !important; margin-right: 0.5rem !important; } /* App store buttons */ [dir="rtl"] .app-store-buttons { flex-direction: row-reverse; } /* --------------------------------------------------------------- 11. BREADCRUMBS --------------------------------------------------------------- */ [dir="rtl"] .breadcrumb { direction: rtl; } [dir="rtl"] .breadcrumb-item + .breadcrumb-item::before { content: "\\"; float: right; padding-right: 0; padding-left: 0.5rem; } /* --------------------------------------------------------------- 12. FORM ELEMENTS --------------------------------------------------------------- */ [dir="rtl"] input, [dir="rtl"] textarea, [dir="rtl"] select { text-align: right; } [dir="rtl"] .form-control { text-align: right; } [dir="rtl"] .input-group { flex-direction: row-reverse; } /* --------------------------------------------------------------- 13. MISC UTILITIES --------------------------------------------------------------- */ /* Spacing override */ [dir="rtl"] .mr-150 { margin-right: 0 !important; margin-left: 150px !important; } /* Bootstrap float flips */ [dir="rtl"] .float-start { float: right !important; } [dir="rtl"] .float-end { float: left !important; } /* Border flips */ [dir="rtl"] .border-start { border-left: none !important; border-right: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; } [dir="rtl"] .border-end { border-right: none !important; border-left: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; } /* Tailwind border-t for dropdowns - keep as is */ [dir="rtl"] .border-t-2 { border-top-width: 2px; } /* Swiper / Carousel RTL */ [dir="rtl"] .swiper { direction: rtl; } [dir="rtl"] .owl-carousel { direction: ltr; } /* --------------------------------------------------------------- 14. GRID LAYOUT RTL SUPPORT --------------------------------------------------------------- */ /* Tailwind grid */ [dir="rtl"] .grid { direction: rtl; } /* --------------------------------------------------------------- 15. ANIMATIONS / TRANSITIONS Keep transform origins consistent --------------------------------------------------------------- */ [dir="rtl"] .translate-x-full { transform: translateX(-100%) !important; } [dir="rtl"] .-translate-x-full { transform: translateX(100%) !important; } [dir="rtl"] .translate-x-1 { transform: translateX(-0.25rem) !important; } [dir="rtl"] .group:hover .group-hover\:translate-x-1 { transform: translateX(-0.25rem) !important; } /* --------------------------------------------------------------- 16. RESPONSIVE OVERRIDES Ensure mobile views also work in RTL --------------------------------------------------------------- */ /* --- lg: breakpoint justify flips for Tools pages --- */ @media (min-width: 1024px) { [dir="rtl"] .lg\:justify-start { justify-content: flex-start !important; } [dir="rtl"] .lg\:justify-end { justify-content: flex-end !important; } } @media (max-width: 767px) { [dir="rtl"] .flex-row { flex-direction: row !important; /* On mobile, keep row as-is to avoid breaking stacking */ } [dir="rtl"] .text-center { text-align: center !important; } /* Mobile navigation */ [dir="rtl"] nav .flex.flex-col.space-y-3 { text-align: right; } } @media (max-width: 575px) { [dir="rtl"] .text-center { text-align: center !important; } } /* --------------------------------------------------------------- 17. BRAND SLIDER SECTION Force LTR so the translateX animation scrolls in the correct direction. Brand logos are images — no RTL text direction needed. --------------------------------------------------------------- */ [dir="rtl"] .xc-brand-one__wrapper { direction: ltr; } [dir="rtl"] .xc-brand-one__title-wrapper { direction: rtl; /* keep the heading text RTL */ } /* --------------------------------------------------------------- 18. HOME PAGE HERO / BANNER SECTION --------------------------------------------------------------- */ /* Flip the image negative margin from right to left */ [dir="rtl"] .xc-header-banner-three__img { margin-right: 0; margin-left: -173px; } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 1400px) and (max-width: 1599px) { [dir="rtl"] .xc-header-banner-three__img { margin-left: 0; } } /* Feature list: reset global ul padding and flip icon position */ [dir="rtl"] .xc-about-one__feature-list { padding-right: 0 !important; /* override global [dir="rtl"] ul padding */ } [dir="rtl"] .xc-about-one__feature-list .xc-icon { left: auto; right: 0; margin-right: 0; margin-left: 10px; } [dir="rtl"] .xc-about-one__feature-list p { padding-left: 0; padding-right: 35px; } /* Video play button text: flip margin */ [dir="rtl"] .xc-header-banner-three__video { padding-right: 5px; padding-left: 30px; } [dir="rtl"] .xc-header-banner-three__video p { margin-left: 0; margin-right: 15px; } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) { [dir="rtl"] .xc-header-banner-three__video { padding-left: 5px; } } /* Flip decorative shape positions */ [dir="rtl"] .xc-header-banner-three__shapes .shape-1 { left: auto; right: 168px; } [dir="rtl"] .xc-header-banner-three__shapes .shape-3 { right: auto; left: 460px; } [dir="rtl"] .xc-header-banner-three__shapes .shape-4 { right: auto; left: 0; } /* Video modal: flip alignment for RTL */ [dir="rtl"] .custom-video-modal { justify-content: flex-start; padding-right: 0; padding-left: 15%; } /* --------------------------------------------------------------- 19. PRINT STYLES --------------------------------------------------------------- */ @media print { [dir="rtl"] { direction: rtl; text-align: right; } } /* --------------------------------------------------------------- 20. PRICING PAGE RTL SUPPORT --------------------------------------------------------------- */ /* --- Pricing Cards --- */ /* Ensure pricing section gets RTL direction (overrides inherited ltr from xc-brand-one__wrapper) */ [dir="rtl"] .xc-price-one__section { direction: rtl; } /* Flip check icon margin (originally margin-right: 10px) */ [dir="rtl"] .xc-price-one__list i { margin-right: 0 !important; margin-left: 10px !important; } /* Flip info icon margin */ [dir="rtl"] .xc-price-one__list i.fa-circle-info { margin-left: 0 !important; margin-right: 5px !important; } /* Text alignment for pricing card content */ [dir="rtl"] .xc-price-one__list { text-align: right; } [dir="rtl"] .xc-price-one__head { text-align: right; } /* Discount badge margin flip (originally margin-left: 8px) */ [dir="rtl"] .discount-badge { margin-left: 0 !important; margin-right: 8px !important; } /* Keep price numbers in LTR so "$4.99" reads correctly */ [dir="rtl"] .xc-price-one__price { direction: ltr; display: inline-block; } /* Price + strikethrough container: keep LTR for number display */ [dir="rtl"] .xc-price__container { direction: ltr; justify-content: flex-end; } /* Category switcher and billing tabs centered — no flip needed */ /* "Most Popular" badge: flip inner SVG margin */ [dir="rtl"] .popular-badge span[style*="margin-right"] { margin-right: 0 !important; margin-left: 6px !important; } /* Plan header small text margin flip */ [dir="rtl"] .plan-header small { margin-left: 0 !important; margin-right: 5px !important; } /* --- Comparison Table --- */ /* Ensure the comparison grid gets RTL direction (overrides inherited ltr from xc-brand-one__wrapper) */ [dir="rtl"] .pricing-comparison-wrapper { direction: rtl; } [dir="rtl"] .comparison-grid { direction: rtl; } /* Flip border-right to border-left on grid headers and plan headers */ [dir="rtl"] .grid-header { border-right: none !important; border-left: 1px solid #e9ecef; } [dir="rtl"] .plan-header { border-right: none !important; border-left: 1px solid rgba(255, 255, 255, 0.2); } /* Feature column: flip text alignment */ [dir="rtl"] .grid-header.feature-col { text-align: right !important; justify-content: flex-start !important; } [dir="rtl"] .grid-cell.feature-cell { text-align: right !important; justify-content: flex-start !important; } /* Section divider: flip text alignment */ [dir="rtl"] .section-divider { text-align: right !important; } /* Tooltip: flip text alignment */ [dir="rtl"] .tooltip-content { text-align: right !important; } /* Credit section text */ [dir="rtl"] .grid-cell.credit-section { direction: ltr; /* keep number formatting LTR */ } /* --- FAQ Section --- */ /* Flip FAQ list margin (originally margin-left: 72px) */ [dir="rtl"] .xc-accrodion-content ul { margin-left: 0 !important; margin-right: 72px !important; } /* Accordion icon position flip */ [dir="rtl"] .xc-accrodion-title .xc-icon { left: auto; right: 0; } /* --- Pricing Tabs (nav-pills) --- */ /* "50% off" label margin flip */ [dir="rtl"] #yearly-tab .text-warning { margin-left: 0 !important; margin-right: 6px !important; } /* Trial button "or Purchase Now" flex row */ [dir="rtl"] .xc-price-one__btn div[style*="display: flex"] { direction: ltr; }