/* ========================================================================= RTL adjustments for the Karina front-end (Bootstrap / creative template). Loaded after style.css so these rules win. Activated by . ========================================================================= */ html[dir="rtl"] body { direction: rtl; text-align: right; } /* Lists: drop the default/left indentation used by LTR themes */ html[dir="rtl"] ul, html[dir="rtl"] ol { padding-left: 0; padding-right: 0; } /* Right-align all typographic blocks */ html[dir="rtl"] .section-title, html[dir="rtl"] .section-subtitle, html[dir="rtl"] .section-content, html[dir="rtl"] .section-title-wrapper, html[dir="rtl"] .text-wrapper, html[dir="rtl"] .text, html[dir="rtl"] .info-text, html[dir="rtl"] .content, html[dir="rtl"] .meta, html[dir="rtl"] .title, html[dir="rtl"] .copyright-text, html[dir="rtl"] .footer-nav-list, html[dir="rtl"] .blog-content, html[dir="rtl"] .blog-content .prose, html[dir="rtl"] .prose { text-align: right; } /* Flex rows that were arranged left-to-right should mirror */ html[dir="rtl"] .header-area-5__inner, html[dir="rtl"] .copyright-area-inner, html[dir="rtl"] .footer-widget-wrapper, html[dir="rtl"] .meta { flex-direction: row-reverse; } /* Side panel contact rows: icon sits to the right of the text */ html[dir="rtl"] .contact-item { flex-direction: row-reverse; justify-content: flex-end; text-align: right; } /* Keep Latin/number tokens (years, counts, prices, emails) rendering correctly inside an RTL line */ html[dir="rtl"] .number, html[dir="rtl"] .date, html[dir="rtl"] .count, html[dir="rtl"] code, html[dir="rtl"] .copyright-text .text { unicode-bidi: isolate; } /* The "underline" CTA buttons keep their arrow icon after the label */ html[dir="rtl"] .rr-btn-underline { direction: rtl; } /* Sliders / marquees keep their own internal LTR flow so the JS transforms (Swiper, GSAP marquee) keep working; text inside still reads RTL. */ html[dir="rtl"] .swiper, html[dir="rtl"] .swiper-wrapper, html[dir="rtl"] .moving-text, html[dir="rtl"] .marquee-text-area .wrapper-text { direction: ltr; } html[dir="rtl"] .moving-text .section-title, html[dir="rtl"] .swiper .title, html[dir="rtl"] .swiper .content { direction: rtl; } /* Forms / inputs align right */ html[dir="rtl"] input, html[dir="rtl"] textarea, html[dir="rtl"] select { text-align: right; } /* …but inputs meant for codes / phone numbers / emails stay LTR */ html[dir="rtl"] input[type="tel"], html[dir="rtl"] input[type="email"], html[dir="rtl"] input[dir="ltr"] { text-align: left; direction: ltr; }