/* ================================================================ RTL (Right-to-Left) Override Styles ElegantHouses / MicroVilla — Arabic Layout Support Applied globally via dir="rtl" on element ================================================================ */ /* -------------------------------------------------------- 1. GLOBAL — RESET LETTER-SPACING & TEXT ALIGNMENT -------------------------------------------------------- */ body { text-align: right; letter-spacing: 0 !important; } h1, h2, h3, h4, h5, h6, p, a, span, li, td, th, button, input, textarea, select, label { letter-spacing: 0 !important; } .help-block.with-errors ul { text-align: right; } /* -------------------------------------------------------- 2. SECTION TITLES — SUBTITLE DOT & ICON -------------------------------------------------------- */ .section-title .sisf-subtitle::before { margin-right: 0; margin-left: 10px; } .sisf-e-subtitle::before { margin-right: 0 !important; margin-left: 8px; } /* Section title decorative italic icon (rotated) */ .section-title .sisf-m-title i { left: auto; right: -10px; transform: rotate(-57deg); } /* -------------------------------------------------------- 3. UNDERLINE HOVER EFFECT (left → right origin) -------------------------------------------------------- */ .sisf-underline--left::after { left: auto; right: 0; } /* -------------------------------------------------------- 4. BUTTONS — ICON DIRECTION & FILL ANIMATION -------------------------------------------------------- */ /* Arrow icon inside button: flip direction */ .btn-default i { margin-left: 0; margin-right: 10px; transform: scaleX(-1) rotate(-45deg); } .btn-default:hover i { transform: scaleX(-1) rotate(0deg); } /* Fill animation: slide from right instead of left */ .btn-default::after { left: auto; right: -2px; transform: skew(-30deg); } .btn-default:hover::after { right: 0; left: auto; transform: skew(0deg); } /* -------------------------------------------------------- 5. SISF CIRCULAR BUTTON ICON (rotate direction) -------------------------------------------------------- */ .sisf--button .sisf-sis-button .sisf-m-icon-inner { transform: rotate(45deg) !important; } /* Slide animation direction for circular button icons */ .sisf--button .sisf-sis-button:hover .icon1 { transform: translateX(-200%) translateY(0); } .sisf--button .sisf-sis-button .icon2 { transform: translateX(150%) translateY(0); left: auto; right: 1px; } /* -------------------------------------------------------- 6. BACK TO TOP — FLIP TO LEFT SIDE -------------------------------------------------------- */ .back-to-top { right: auto; left: 30px; } /* -------------------------------------------------------- 7. NAVIGATION — SUB-MENU POSITIONING -------------------------------------------------------- */ /* First-level dropdown: align from right */ .main-menu ul ul { left: auto; right: -10px; text-align: right; } /* Dropdown arrow indicator: flip to right side */ .main-menu ul ul::before { left: auto; right: 50px; } /* Third-level dropdown: open to the left */ .main-menu ul ul ul { left: auto; right: 100%; text-align: right; } /* Sub-item hover indent: flip from left to right */ .main-menu ul ul li a:hover, .main-menu ul ul li a:focus, .main-menu ul ul li a.active, .main-menu ul ul li a.active span { padding-left: 0 !important; padding-right: 15px !important; } .main-menu ul ul li a:before { left: auto; right: 0; } /* Sub-menu expand arrow (chevron-right → flip) */ .main-menu ul li.submenu ul li.submenu > a:after { float: left; transform: scaleX(-1); display: inline-block; } /* Nav active underline: transform-origin flip */ .main-menu ul li.submenu > a:before { left: auto; right: 0px; transform-origin: right; } /* Nav link letter-spacing reset */ .main-menu ul li a, .main-menu ul ul li a { letter-spacing: 0 !important; } /* -------------------------------------------------------- 8. MENU-ITEM ARROW (sub-menu chevron icon) -------------------------------------------------------- */ .menu-item-arrow { right: auto; left: 0; } .menu-item-arrow i { display: inline-block; transform: scaleX(-1); } /* -------------------------------------------------------- 9. SLICKNAV MOBILE MENU -------------------------------------------------------- */ .slicknav_menu ul ul li a { padding: 10px 30px 10px 20px; } /* -------------------------------------------------------- 10. BREADCRUMBS — FLIP SEPARATOR CHEVRON -------------------------------------------------------- */ .sisf-breadcrumbs-separator { display: inline-block; transform: scaleX(-1); } /* -------------------------------------------------------- 11. HERO SECTION — TEXT ALIGNMENT -------------------------------------------------------- */ .hero-content .section-title .sisf-subtitle, .hero-content .section-title h1, .hero-content .section-title h2 { text-align: right !important; } /* -------------------------------------------------------- 12. HOME LIST — ARROW ICONS -------------------------------------------------------- */ .list-item-icon a i { display: inline-block; transform: scaleX(-1); } /* -------------------------------------------------------- 13. AWARD LIST — ARROW ICONS -------------------------------------------------------- */ .sisf-icon-right a i, .sis-award-list-item .size-icon i { display: inline-block; transform: scaleX(-1); } /* -------------------------------------------------------- 14. BLOG INFO — SEPARATOR DOT -------------------------------------------------------- */ /* No directional change needed — icon is symmetric */ /* -------------------------------------------------------- 15. IMAGE REVEAL — TRANSFORM ORIGIN -------------------------------------------------------- */ .reveal img { transform-origin: right; } /* Image wipe animation: flip origin */ .image-anime::after { transform: translate(-50%, -50%) rotate(45deg); } /* -------------------------------------------------------- 16. READMORE BUTTON — ARROW IMAGE -------------------------------------------------------- */ .readmore-btn img { transform: scaleX(-1); } /* -------------------------------------------------------- 17. SEARCH BAR — BUTTON POSITIONING -------------------------------------------------------- */ .header-icon .sisf-icon-list-item .search-btn { right: auto; left: 0px; } /* Search overlay submit button */ .search-with-icon button[type="submit"] { /* stays on right; no change needed */ } /* -------------------------------------------------------- 18. OFFCANVAS SIDEBAR -------------------------------------------------------- */ /* Bootstrap handles offcanvas-end flip with dir="rtl" */ /* -------------------------------------------------------- 19. FOOTER — SOCIAL ICONS & LINKS -------------------------------------------------------- */ /* Bootstrap grid and text utilities handle RTL automatically */ /* Footer copyright text alignment */ .footer-copyright-text p.text-end { text-align: left !important; } /* -------------------------------------------------------- 20. FORM ELEMENTS -------------------------------------------------------- */ input[type="text"], input[type="email"], input[type="tel"], input[type="search"], textarea, select { text-align: right; direction: rtl; } input::placeholder, textarea::placeholder { text-align: right; } /* -------------------------------------------------------- 21. DROPDOWN CART -------------------------------------------------------- */ .sis_core_woo_dropdown_cart .sisf-dropdown-cart-content { text-align: right; left: -24px; right: auto; } /* -------------------------------------------------------- 22. PROPERTY ITEMS — ICON WITH TEXT -------------------------------------------------------- */ .property-icon-with-text { direction: rtl; } /* -------------------------------------------------------- 23. SISF WIDGET ICON SPACING -------------------------------------------------------- */ .widget .sisf-icon-list-item .icon-call-out::before { margin-right: 0; margin-left: 5px; } /* -------------------------------------------------------- 24. DIVIDER SEPARATOR -------------------------------------------------------- */ .sisf-divided-header-left-wrapper .navbar { margin: 0 0 0 45px; } .sisf-divided-header-right-wrapper .navbar { margin: 0 45px 0 0; } /* -------------------------------------------------------- 25. SELECT2 DROPDOWN -------------------------------------------------------- */ .select2-dropdown { left: auto !important; right: 0 !important; text-align: right; } /* -------------------------------------------------------- 26. SWIPER — RTL SUPPORT -------------------------------------------------------- */ /* Swiper automatically detects dir="rtl" from the HTML element */ /* -------------------------------------------------------- 27. SISF EXTENDED GRID -------------------------------------------------------- */ .sisf-extended-grid--right { padding-right: 0; padding-left: 0; } /* -------------------------------------------------------- 28. COUNTER DIGIT LABEL -------------------------------------------------------- */ /* No directional change needed */ /* -------------------------------------------------------- 29. HERO SLIDER — PAGINATION -------------------------------------------------------- */ /* Swiper handles this with dir="rtl" */ /* -------------------------------------------------------- 30. OFFCANVAS CLOSE BUTTON -------------------------------------------------------- */ .offcanvas-header .ms-auto { margin-left: 0 !important; margin-right: auto !important; } /* -------------------------------------------------------- 31. SISF CONTACT INFORMATION IN SIDEBAR -------------------------------------------------------- */ .sisf-sis-e-content { text-align: center; /* keep centered as designed */ } /* -------------------------------------------------------- 32. SISF ICON BADGE COUNT (notification dot) -------------------------------------------------------- */ .sisf-m-opener-count, .header-favorite-icon .sisf-m-opener-count { right: auto !important; left: -15px !important; top: -10px !important; } /* -------------------------------------------------------- 33. BACK BUTTON / ARROW NAVIGATION -------------------------------------------------------- */ /* fa-chevron-right used as back-to-page separator: flip */ .sisf-breadcrumbs-separator .fa-chevron-right { display: inline-block; transform: scaleX(-1); } /* -------------------------------------------------------- 34. SISF PROPERTY PRICE BADGE -------------------------------------------------------- */ /* Position stays as designed — adjust if needed */ /* -------------------------------------------------------- 35. FEATURED IMAGE WIPE HOVER EFFECT -------------------------------------------------------- */ .image-anime:hover::after { transform: translate(-50%, -50%) rotate(45deg); } /* -------------------------------------------------------- 36. BORDER RADIUS DIRECTION -------------------------------------------------------- */ /* No changes needed — symmetric radius */ /* -------------------------------------------------------- 37. FA ICON — PHONE-VOLUME ORIENTATION -------------------------------------------------------- */ .fa-phone-volume { display: inline-block; transform: scaleX(-1); } /* -------------------------------------------------------- 38. PAGINATION / BLOG NAV ARROWS -------------------------------------------------------- */ .fa-arrow-right-long { display: inline-block; transform: scaleX(-1); } /* Override where fa-arrow-right-long is already flipped via parent */ .btn-default .fa-arrow-right-long { transform: scaleX(1); /* handled by .btn-default i rule above */ } /* -------------------------------------------------------- END OF RTL OVERRIDES -------------------------------------------------------- */