Slider not showing in Arabic translation

Here is a link to the website:
The header are is hugely distorted and the header isn’t showing up. You also have to scroll a lot to see the content.


Add this please in Customize > Additional CSS:

.main-slider { direction: ltr; }
.site-footer { overflow:hidden; }

How can I make this only in the arabic version? I have polylang install and the site in in English and Arabic

This right here:

.rtl .main-slider { direction: ltr; }
.rtl .site-footer { overflow:hidden; }

I did that, and it worked good, but there is a problem every time I load the page. The problem is explained here:
The page loads with more than half of of disappearing to the right, and it becomes normal when I scroll down.

The browser is google Chrome, macOS. I also tried vivaldi.
The site works well with brave, firefox, and safari. I tried it in chrome in windows and it was fine as well.

I also have the same problem with Sydney Pro. What should I do?

Could you try clearing your cache please? I’ve tried replicating on Browserstack but I can’t see the issue.