/*-------------------------------------------------------------- Aya Elfeky — RTL layer (Arabic) Loaded LAST, only on pages with . Mirrors every direction-sensitive rule in style.css. >> TABLE OF CONTENTS 1. Base direction + Arabic typography 2. Bootstrap grid offsets 3. Header / navigation 4. Mobile menu 5. Footer + newsletter 6. Hero + imagebox 7. Buttons + text buttons 8. Accordion (FAQ) 9. Testimonial 10. Portfolio 11. Service 12. Blog + blog details 13. Award + experience 14. Price 15. Contact + forms + search 16. Slider / pagination 17. CTA + decorative shapes 18. Custom layer (WhatsApp, chips, lang switch) --------------------------------------------------------------*/ /*-------------------------------------------------------------- 1. Base direction + Arabic typography --------------------------------------------------------------*/ /* Thmanyah Sans is loaded by custom.css and covers Arabic natively, so the Arabic build needs no second family — only the direction and the metric corrections Arabic script asks for. */ [dir="rtl"] body, [dir="rtl"] html { direction: rtl; text-align: right; letter-spacing: normal; } /* Arabic is cursive: tracking pulls joined letterforms apart. Kill it everywhere, including on the classes style.css sets it on. */ [dir="rtl"] *, [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6 { letter-spacing: normal; } /* Arabic has no letter case, so text-transform is inert — but ascenders and descenders need more room than the Latin display sizes allowed. */ [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4 { line-height: 1.45em; } [dir="rtl"] .cs_font_90, [dir="rtl"] .cs_font_80, [dir="rtl"] .cs_font_70 { line-height: 1.25em; } /* Latin brand names, emails, phone numbers and dates inside Arabic prose keep their own direction. */ [dir="rtl"] .cs_ltr { direction: ltr; display: inline-block; unicode-bidi: embed; } [dir="rtl"] .cs_text_list li, [dir="rtl"] .cs_widget_title { text-align: right; } /*-------------------------------------------------------------- 2. Bootstrap grid offsets --------------------------------------------------------------*/ [dir="rtl"] .offset-1 { margin-left: 0; margin-right: 8.33333333%; } [dir="rtl"] .offset-2 { margin-left: 0; margin-right: 16.66666667%; } [dir="rtl"] .offset-3 { margin-left: 0; margin-right: 25%; } [dir="rtl"] .offset-5 { margin-left: 0; margin-right: 41.66666667%; } [dir="rtl"] .offset-6 { margin-left: 0; margin-right: 50%; } @media (min-width: 992px) { [dir="rtl"] .offset-lg-1 { margin-left: 0; margin-right: 8.33333333%; } [dir="rtl"] .offset-lg-2 { margin-left: 0; margin-right: 16.66666667%; } [dir="rtl"] .offset-lg-5 { margin-left: 0; margin-right: 41.66666667%; } [dir="rtl"] .offset-lg-6 { margin-left: 0; margin-right: 50%; } } @media (min-width: 1200px) { [dir="rtl"] .offset-xl-1 { margin-left: 0; margin-right: 8.33333333%; } [dir="rtl"] .offset-xl-2 { margin-left: 0; margin-right: 16.66666667%; } [dir="rtl"] .offset-xl-6 { margin-left: 0; margin-right: 50%; } } @media (min-width: 1400px) { [dir="rtl"] .offset-xxl-1 { margin-left: 0; margin-right: 8.33333333%; } [dir="rtl"] .offset-xxl-2 { margin-left: 0; margin-right: 16.66666667%; } } [dir="rtl"] .text-end { text-align: left !important; } [dir="rtl"] .text-start { text-align: right !important; } /*-------------------------------------------------------------- 3. Header / navigation --------------------------------------------------------------*/ [dir="rtl"] .cs_site_branding + .cs_nav { margin-left: 0; margin-right: 70px; } [dir="rtl"] .cs_nav .cs_nav_list > li { margin-right: 0; margin-left: 40px; } [dir="rtl"] .cs_nav .cs_nav_list > li:last-child { margin-left: 0; } [dir="rtl"] .cs_nav .cs_nav_list > li > ul { left: initial; right: 0; text-align: right; } [dir="rtl"] .cs_nav .cs_nav_list ul ul { left: initial; right: 100%; } [dir="rtl"] .cs_nav .cs_nav_list > li.menu-item-has-children > a::after { margin-left: 0; margin-right: 6px; } [dir="rtl"] .cs_main_header_center, [dir="rtl"] .cs_top_header_center { left: initial; right: 50%; -webkit-transform: translate(50%, -50%); transform: translate(50%, -50%); } [dir="rtl"] .cs_main_header_right .cs_btn { margin-right: 0; margin-left: 50px; } [dir="rtl"] .cs_header_toolbox, [dir="rtl"] .cs_toolbox { margin-right: 0; margin-left: 50px; } [dir="rtl"] .cs_site_header.cs_style_1 .cs_main_header_center .cs_site_branding { left: initial; right: 0px; } [dir="rtl"] .cs_nav .cs_nav_list .cs_mega_wrapper { left: initial; right: 50%; -webkit-transform: translateX(50%); transform: translateX(50%); } /*-------------------------------------------------------------- 4. Mobile menu --------------------------------------------------------------*/ @media (max-width: 1199px) { [dir="rtl"] .cs_menu_toggle, [dir="rtl"] .cs_site_header.cs_style_1 .cs_menu_toggle { right: initial; left: 0px; } [dir="rtl"] .cs_menu_dropdown_toggle { right: initial; left: 20px; } [dir="rtl"] .cs_nav .cs_nav_list { text-align: right; } [dir="rtl"] .cs_nav .cs_nav_list ul { padding-left: 0; padding-right: 15px; } [dir="rtl"] .cs_nav .cs_nav_list > li { margin-left: 0; } [dir="rtl"] .cs_main_header_right .cs_btn, [dir="rtl"] .cs_header_toolbox, [dir="rtl"] .cs_toolbox { margin-left: 50px; } } [dir="rtl"] .cs_side_header { right: initial; left: 0px; } [dir="rtl"] .cs_side_header .cs_side_header_in { margin-left: 0; margin-right: auto; right: initial; left: -500px; } [dir="rtl"] .cs_side_header.active .cs_side_header_in { right: initial; left: 0; } [dir="rtl"] .cs_close { right: initial; left: 30px; } /*-------------------------------------------------------------- 5. Footer + newsletter --------------------------------------------------------------*/ [dir="rtl"] .cs_footer.cs_style_1 .cs_fooer_text { padding-right: 0; padding-left: 50px; } [dir="rtl"] .cs_newsletter.cs_style_1 { padding-right: 0; padding-left: 70px; } @media (max-width: 1199px) { [dir="rtl"] .cs_newsletter.cs_style_1, [dir="rtl"] .cs_footer.cs_style_1 .cs_fooer_text { padding-left: 0; } } [dir="rtl"] .cs_social.cs_style_1 { justify-content: flex-start; } /*-------------------------------------------------------------- 6. Hero + imagebox --------------------------------------------------------------*/ /* The hero imagebox used to be absolutely positioned and centred with a left/transform pair, so this file mirrored it. custom.css §7.1 has since put the imagebox back in flow and centres it with `margin-inline: auto`, which needs no mirroring — and this rule, loading later, was undoing that and shoving the illustration off to one side. (It also disagreed with itself: -webkit-transform said 50%, the unprefixed property said 100%.) Centring is handled in custom.css for both directions. */ [dir="rtl"] .cs_hero.cs_style_3 .cs_btn { margin-left: 0; margin-right: -17px; } [dir="rtl"] .cs_imagebox.cs_style_1 .cs_imagebox_in .cs_imagebox_bg { left: initial; right: 0; } [dir="rtl"] .cs_imagebox.cs_style_1 .cs_imagebox_in .cs_btn { right: initial; left: -5px; } @media (max-width: 767px) { [dir="rtl"] .cs_imagebox.cs_style_1 .cs_imagebox_in .cs_btn { right: initial; left: 15px; } } [dir="rtl"] .cs_imagebox.cs_style_1 .cs_imagebox_in .cs_imagebox_shape_1 { left: initial; right: 0; } [dir="rtl"] .cs_imagebox.cs_style_1 .cs_imagebox_in .cs_imagebox_shape_2 { right: initial; left: 160px; } [dir="rtl"] .cs_imagebox.cs_style_2 .cs_imagebox_in { padding-left: 0; padding-right: 100px; } [dir="rtl"] .cs_imagebox.cs_style_2 .cs_circle_shape { left: initial; right: 50px; } [dir="rtl"] .cs_imagebox.cs_style_2 .cs_sprin_animation, [dir="rtl"] .cs_imagebox.cs_style_2 .cs_social { right: initial; left: 0; } [dir="rtl"] .cs_imagebox.cs_style_3 { margin-left: 0; margin-right: auto; } [dir="rtl"] .cs_imagebox.cs_style_3 .cs_sprin_animation { left: initial; right: 45px; } [dir="rtl"] .cs_imagebox.cs_style_4 .cs_sprin_animation { left: initial; right: 30px; } [dir="rtl"] .cs_imagebox.cs_style_5 .cs_imagebox_thumbnail .cs_sprin_animation { left: initial; right: -30px; } [dir="rtl"] .cs_card.cs_style_1 { left: initial; right: 40%; } [dir="rtl"] .cs_card_wrap .cs_imagebox.cs_style_5 { left: initial; right: 0; } [dir="rtl"] .cs_circle_2nd { padding-left: 0; padding-right: 50px; left: initial; right: 0; } /*-------------------------------------------------------------- 7. Buttons + decorative lines --------------------------------------------------------------*/ [dir="rtl"] .cs_line_top_1::before, [dir="rtl"] .cs_line_bottom_1::before, [dir="rtl"] .cs_line_top_2::before, [dir="rtl"] .cs_line_top_3::before { left: initial; right: 0; } [dir="rtl"] .cs_line_left_1 { padding-left: 0; padding-right: 250px; } [dir="rtl"] .cs_line_left_1::before { left: initial; right: 0; } [dir="rtl"] .cs_text_btn_1 .cs_text_btn_text::before, [dir="rtl"] .cs_text_btn_1 .cs_text_btn_text::after, [dir="rtl"] .cs_text_btn_2 .cs_text_btn_text::before, [dir="rtl"] .cs_text_btn_2 .cs_text_btn_text::after { left: initial; right: 0; -webkit-transform-origin: 100% 50%; transform-origin: 100% 50%; } /* Arrow glyphs point the other way in a mirrored layout. */ [dir="rtl"] .cs_text_btn_1 img, [dir="rtl"] .cs_text_btn_2 img, [dir="rtl"] .cs_btn.cs_style_2 img, [dir="rtl"] .cs_arrow_flip img { -webkit-transform: scaleX(-1); transform: scaleX(-1); } [dir="rtl"] .cs_stapes .cs_step_number::after { left: initial; right: 100%; margin-left: 0; margin-right: 35px; } @media (max-width: 1199px) { [dir="rtl"] .cs_stapes .cs_step_number::after { margin-right: 20px; } } /*-------------------------------------------------------------- 8. Accordion (FAQ) --------------------------------------------------------------*/ [dir="rtl"] .cs_accordians.cs_style_1 .cs_accordian_head, [dir="rtl"] .cs_accordians.cs_style_1 .cs_accordian_body { padding-right: 0; padding-left: 100px; } [dir="rtl"] .cs_accordians.cs_style_1 .cs_accordian_toggle { right: initial; left: 0; } [dir="rtl"] .cs_accordians.cs_style_1 .cs_accordian_toggle::before, [dir="rtl"] .cs_accordians.cs_style_1 .cs_accordian_toggle::after { left: initial; right: 0; } @media (max-width: 991px) { [dir="rtl"] .cs_accordians.cs_style_1 .cs_accordian_head, [dir="rtl"] .cs_accordians.cs_style_1 .cs_accordian_body { padding-left: 60px; } [dir="rtl"] .cs_accordians.cs_style_1 .cs_accordian_body { padding-left: 0; } } [dir="rtl"] .cs_accordians.cs_style_2 .cs_accordian::after { left: initial; right: 0; } /*-------------------------------------------------------------- 9. Testimonial --------------------------------------------------------------*/ [dir="rtl"] .cs_testimonial.cs_style_1 .cs_testimonial_author, [dir="rtl"] .cs_testimonial.cs_style_2 .cs_testimonial_author { padding-left: 0; padding-right: 70px; } [dir="rtl"] .cs_testimonial.cs_style_1 .cs_testimonial_author::before, [dir="rtl"] .cs_testimonial.cs_style_2 .cs_testimonial_author::before { left: initial; right: 0; } [dir="rtl"] .cs_testimonial.cs_style_2 .cs_testimonial_in { margin-right: 0; margin-left: 10px; } [dir="rtl"] .cs_testimonial.cs_style_2 .cs_testimonial_thumbnail { left: initial; right: 0; } [dir="rtl"] .cs_testimonial.cs_style_3 .cs_line_left_1 { padding-left: 0; padding-right: 110px; } [dir="rtl"] .cs_testimonial.cs_style_4 .cs_testimonial_subTitle { padding-left: 0; padding-right: 80px; } [dir="rtl"] .cs_testimonial.cs_style_4 .cs_testimonial_subTitle::before { left: initial; right: 0; } /*-------------------------------------------------------------- 10. Portfolio --------------------------------------------------------------*/ [dir="rtl"] .cs_portfolio.cs_style_1 .cs_portfolio_desc { left: initial; right: 100%; } [dir="rtl"] .cs_project_slider_1 .slick_slide_in.slick-active .cs_portfolio_desc { left: initial; right: 0; } [dir="rtl"] .cs_portfolio.cs_style_2 .cs_portfolio_thumbnail { right: initial; left: 50px; } [dir="rtl"] .cs_portfolio.cs_style_2:hover .cs_portfolio_thumbnail { right: initial; left: 110px; } @media (max-width: 1400px) { [dir="rtl"] .cs_portfolio.cs_style_2:hover .cs_portfolio_thumbnail { left: 60px; } } [dir="rtl"] .cs_portfolio.cs_style_2 .cs_btn { margin-left: 0; margin-right: -12px; } [dir="rtl"] .cs_portfolio.cs_style_3 .cs_portfolio_thumbnail::before { left: initial; right: 0; } [dir="rtl"] .cs_portfolio.cs_style_3 .cs_btn, [dir="rtl"] .cs_portfolio.cs_style_4 .cs_btn { right: initial; left: 20px; } [dir="rtl"] .cs_portfolio.cs_style_4 .cs_btn { margin-left: 0; margin-right: -10px; } [dir="rtl"] .cs_portfolio.cs_style_4 .cs_portfolio_date { text-align: start; } [dir="rtl"] .cs_portfolio.cs_style_5 .cs_portfolio_thumbnail { padding-right: 0; padding-left: 30px; } [dir="rtl"] .cs_isotop_filter.cs_style_1 li:not(:last-child) { margin-right: 0; margin-left: 20px; } /*-------------------------------------------------------------- 11. Service --------------------------------------------------------------*/ [dir="rtl"] .cs_service.cs_style_1 .cs_service_thumbnail, [dir="rtl"] .cs_service.cs_style_2 .cs_service_thumbnail { right: initial; left: 10%; } @media (max-width: 1400px) { [dir="rtl"] .cs_service.cs_style_1 .cs_service_thumbnail, [dir="rtl"] .cs_service.cs_style_2 .cs_service_thumbnail { left: 8%; } } [dir="rtl"] .cs_service.cs_style_3 .cs_service_title { padding-right: 0; padding-left: 70px; } [dir="rtl"] .cs_service.cs_style_3 .cs_btn, [dir="rtl"] .cs_service.cs_style_4 .cs_btn { right: initial; left: 20px; } [dir="rtl"] .cs_service.cs_style_4 .cs_service_date, [dir="rtl"] .cs_service.cs_style_5 .cs_service_date { margin-right: 0; margin-left: 40px; } [dir="rtl"] .cs_service.cs_style_5::before { left: initial; right: -50%; } [dir="rtl"] .cs_service.cs_style_5 .cs_btn { left: initial; right: -50px; } [dir="rtl"] .cs_service.cs_style_5:hover .cs_btn { left: initial; right: 0; } [dir="rtl"] .cs_service_wrap.cs_space_left { padding-left: 0; padding-right: 160px; } @media (max-width: 1199px) { [dir="rtl"] .cs_service_wrap.cs_space_left { padding-right: 0; } } [dir="rtl"] .cs_service_wrap_2::before { left: initial; right: 0; } [dir="rtl"] .cs_service_wrap_2 .cs_service_wrap_in > * { padding-left: 0; padding-right: 100px; } [dir="rtl"] .cs_service_wrap_2 .cs_service_wrap_in > *:nth-child(2n + 1) { border-right: 0; border-left: 2px solid #886fe3; padding-right: 0; padding-left: 100px; } @media (max-width: 1199px) { [dir="rtl"] .cs_service_wrap_2 .cs_service_wrap_in > * { padding-right: 80px; } [dir="rtl"] .cs_service_wrap_2 .cs_service_wrap_in > *:nth-child(2n + 1) { padding-right: 0; padding-left: 80px; } } [dir="rtl"] .cs_service_wrap_2 .cs_service_wrap_in > *::before { left: initial; right: 50%; -webkit-transform: translateX(50%); transform: translateX(50%); } [dir="rtl"] .cs_service_wrap_4 { direction: ltr; } [dir="rtl"] .cs_service_wrap_4_in { direction: rtl; padding-left: 0; padding-right: 40px; } [dir="rtl"] .cs_service_wrap_4_outer_border::before { left: initial; right: 2px; } [dir="rtl"] .cs_service_wrap_4_outer_border::after { left: initial; right: 6px; } /*-------------------------------------------------------------- 12. Blog + blog details --------------------------------------------------------------*/ [dir="rtl"] .cs_blog.cs_style_1 .cs_blog_info, [dir="rtl"] .cs_blog.cs_style_4 .cs_blog_top::before { left: initial; right: 0; } [dir="rtl"] .cs_blog.cs_style_1 .cs_btn, [dir="rtl"] .cs_blog.cs_style_4 .cs_btn { right: initial; left: 30px; } @media (max-width: 767px) { [dir="rtl"] .cs_blog.cs_style_1 .cs_btn { left: 15px; } } [dir="rtl"] .cs_blog.cs_style_4 .cs_blog_text { left: initial; right: 100%; } [dir="rtl"] .cs_blog.cs_style_4:hover .cs_blog_text { left: initial; right: 0; } [dir="rtl"] .cs_blog_details.cs_style_1 .cs_blog_details_top, [dir="rtl"] .cs_blog_details.cs_style_1 .cs_comments { padding-right: 0; padding-left: 50px; } @media (max-width: 991px) { [dir="rtl"] .cs_blog_details.cs_style_1 .cs_blog_details_top, [dir="rtl"] .cs_blog_details.cs_style_1 .cs_comments { padding-left: 0; } } /*-------------------------------------------------------------- 13. Award + experience --------------------------------------------------------------*/ [dir="rtl"] .cs_award.cs_style_1 .cs_award_thumbnail { margin-right: 0; margin-left: 130px; } @media (max-width: 1400px) { [dir="rtl"] .cs_award.cs_style_1 .cs_award_thumbnail { margin-left: 50px; } } [dir="rtl"] .cs_award_wrap > * { border-right: 0; border-left: 1px solid rgba(255, 252, 252, 0.5); } [dir="rtl"] .cs_award_wrap > *:last-child { border-left: 0; } [dir="rtl"] .cs_exprience.cs_style_1 .cs_exprience_shape::after { left: initial; right: 50px; } [dir="rtl"] .cs_exprience.cs_style_1 .cs_sprin_animation { margin-left: 0; margin-right: -12px; } /*-------------------------------------------------------------- 14. Price --------------------------------------------------------------*/ [dir="rtl"] .cs_price.cs_style_1 .cs_btn.cs_style_3, [dir="rtl"] .cs_price.cs_style_1.cs_type_1 .cs_btn.cs_style_3 { right: initial; left: 20px; } @media (max-width: 991px) { [dir="rtl"] .cs_price.cs_style_1.cs_type_1 .cs_btn.cs_style_3 { left: 10px; } } /*-------------------------------------------------------------- 15. Contact + forms + search --------------------------------------------------------------*/ [dir="rtl"] .cs_search.cs_style_1 input { padding-left: 0; padding-right: 30px; } [dir="rtl"] .cs_search.cs_style_1 button { right: initial; left: 0; } [dir="rtl"] .cs_contact_form.cs_style_1 label, [dir="rtl"] .cs_contact_form.cs_style_1 .form-control, [dir="rtl"] .cs_comment.cs_style_1 .form-control { text-align: right; } [dir="rtl"] .form-control::-webkit-input-placeholder { text-align: right; } [dir="rtl"] .form-control::-moz-placeholder { text-align: right; } [dir="rtl"] .form-control:-ms-input-placeholder { text-align: right; } [dir="rtl"] .form-control::placeholder { text-align: right; } /* Email + phone inputs stay LTR so the caret behaves. */ [dir="rtl"] input[type="email"], [dir="rtl"] input[type="tel"], [dir="rtl"] input[type="number"], [dir="rtl"] input[type="url"] { direction: ltr; text-align: right; } /*-------------------------------------------------------------- 16. Slider / pagination --------------------------------------------------------------*/ [dir="rtl"] .cs_slick_arrow.cs_style_1 .cs_left_arrow { margin-left: 0; margin-right: -36px; } [dir="rtl"] .cs_slick_arrow.cs_style_1 .cs_right_arrow { margin-right: 0; margin-left: -36px; } [dir="rtl"] .cs_slick_arrow img { -webkit-transform: scaleX(-1); transform: scaleX(-1); } [dir="rtl"] .cs_slider.cs_style_4 .slick-current::before { right: initial; left: 0; } [dir="rtl"] .cs_pagination.cs_style_1 ul li button { left: initial; right: 0; } [dir="rtl"] .slick-slide { float: right; } /*-------------------------------------------------------------- 17. CTA + decorative shapes --------------------------------------------------------------*/ [dir="rtl"] .cs_cta.cs_style_3 .cs_sprin_animation { left: initial; right: 7%; } @media (max-width: 1400px) { [dir="rtl"] .cs_cta.cs_style_3 .cs_sprin_animation { right: 30%; } } [dir="rtl"] .cs_cta.cs_style_3.cs_type_1 .cs_sprin_animation { right: initial; left: 34%; } [dir="rtl"] .cs_cta.cs_style_4 .cs_shape_anim_y { left: initial; right: -140px; } [dir="rtl"] .cs_cta.cs_style_4 .cs_shape_anim_x { right: initial; left: -80px; } [dir="rtl"] .cs_half_circle_shape:last-child, [dir="rtl"] .cs_shape_wrap .cs_half_circle_shape:last-child { left: initial; right: 50px; } [dir="rtl"] .cs_sprin_animation.cs_rotate_reverse { left: initial; right: 140px; } [dir="rtl"] .cs_rotate_1, [dir="rtl"] .cs_rotate_2, [dir="rtl"] .cs_rotate_3 { margin-left: 0; margin-right: -10px; } [dir="rtl"] .cs_perloader_text { left: initial; right: 50%; -webkit-transform: translateX(50%); transform: translateX(50%); } /*-------------------------------------------------------------- 18. Custom layer --------------------------------------------------------------*/ [dir="rtl"] .cs_wa_float { right: initial; left: 24px; } @media (max-width: 575px) { [dir="rtl"] .cs_wa_float { left: 16px; } } [dir="rtl"] .cs_chip_list, [dir="rtl"] .cs_price_list { text-align: right; } /*-------------------------------------------------------------- 19. Marquee direction (RTL) style.css animates the moving rows with translateX(), which is a PHYSICAL transform — it does not follow `direction`. Under dir="rtl" the flex row lays its duplicate copies out to the LEFT of the visible wrap, so the LTR keyframes (which start at -100%) drag both copies off-screen and the row renders blank for most of its cycle. Mirroring the keyframes puts the copies back in the loop: .cs_slide_right → 0 → +100% (content travels right, copy 2 follows in) .cs_slide_left → +100% → 0 (content travels left, copy 1 follows in) --------------------------------------------------------------*/ @-webkit-keyframes slide-right-rtl { from { -webkit-transform: translateX(0); transform: translateX(0); } to { -webkit-transform: translateX(100%); transform: translateX(100%); } } @keyframes slide-right-rtl { from { -webkit-transform: translateX(0); transform: translateX(0); } to { -webkit-transform: translateX(100%); transform: translateX(100%); } } @-webkit-keyframes slide-left-rtl { from { -webkit-transform: translateX(100%); transform: translateX(100%); } to { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes slide-left-rtl { from { -webkit-transform: translateX(100%); transform: translateX(100%); } to { -webkit-transform: translateX(0); transform: translateX(0); } } [dir="rtl"] .cs_moving_container_wrap.cs_style_1 .cs_slide_right { -webkit-animation-name: slide-right-rtl; animation-name: slide-right-rtl; } [dir="rtl"] .cs_moving_container_wrap.cs_style_1 .cs_slide_left { -webkit-animation-name: slide-left-rtl; animation-name: slide-left-rtl; } /* cs_type_1 (the tilted ribbon) only overrides animation-duration in style.css and reuses the same two keyframe names, so it picks up the mirrored animations above automatically. Its tilt comes from .cs_rotate_2 / .cs_rotate_3 and is left alone on purpose — a decorative diagonal reads the same in both directions. */ /*-------------------------------------------------------------- 20. Directional arrow glyphs missed by section 7 Every arrow SVG in this template is drawn pointing DOWN and rotated into place with `rotate:`. A rotation is not mirrored by `direction: rtl`, so a link that reads "forward" in English keeps pointing at the right margin in Arabic — i.e. backwards. Negating the angle points them at the left margin, which is "forward" in RTL. --------------------------------------------------------------*/ [dir="rtl"] .cs_service.cs_style_1 .cs_service_icon, [dir="rtl"] .cs_service.cs_style_2 .cs_service_icon { rotate: 90deg; } /* The hover thumbnail slides in from the inline-start edge. */ [dir="rtl"] .cs_service_in.start-0 { right: 0; left: auto; } /*-------------------------------------------------------------- 21. Numerals stay LTR Arabic runs right-to-left, but numbers do not — digits are written left-to-right in Arabic just as in English. The odometer plugin renders each digit as its own inline-block , so under `direction: rtl` the digit boxes were laid out right-to-left and "1,000" came out as "000,1". The trailing "+" is a bidi-neutral character, so it also jumped to the wrong side of the number. Isolating the stat headings as LTR fixes both at once: the digits keep their order and the "+" stays where it was authored. The headings are centred, so forcing direction here does not move them. --------------------------------------------------------------*/ [dir="rtl"] .cs_funfact_title, [dir="rtl"] .odometer, [dir="rtl"] .odometer-inside { direction: ltr; unicode-bidi: isolate; }