/* RTL overrides for SnapFolio template */ /* Apply when the page element has dir="rtl" */ html[dir="rtl"] { direction: rtl; } /* Sidebar/header: move to the right */ html[dir="rtl"] .header { left: auto !important; right: 0 !important; } @media (min-width: 1200px) { html[dir="rtl"] .header~main, html[dir="rtl"] .header~#footer { margin-left: 0 !important; margin-right: 330px !important; } } @media (max-width: 1199px) { html[dir="rtl"] .header { left: auto !important; right: -100% !important; } html[dir="rtl"] .header.header-show { right: 0 !important; left: auto !important; } } /* Header toggle button: move to left side on small screens so it remains accessible */ html[dir="rtl"] .header .header-toggle { right: auto !important; left: 15px !important; } /* Navigation icons and dropdown toggles */ html[dir="rtl"] .navmenu a .navicon { margin-left: 10px !important; margin-right: 0 !important; } html[dir="rtl"] .navmenu a .toggle-dropdown { margin-right: auto !important; margin-left: initial !important; } /* Hero background elements: mirror positions */ html[dir="rtl"] .hero .background-elements .bg-circle.circle-1 { right: auto !important; left: 10% !important; } html[dir="rtl"] .hero .background-elements .bg-circle.circle-2 { left: auto !important; right: 5% !important; } /* Profile badge: mirror position */ html[dir="rtl"] .about .profile-header .profile-badge { right: auto !important; left: calc(50% - 65px) !important; } /* Resume timeline: mirror the left border and the dot */ html[dir="rtl"] .resume .resume-section .resume-item { padding-left: 0 !important; padding-right: 1.5rem !important; border-left: none !important; border-right: 2px solid color-mix(in srgb, var(--accent-color), transparent 80%) !important; } html[dir="rtl"] .resume .resume-section .resume-item:before { left: auto !important; right: -9px !important; } /* Portfolio filters sidebar: keep flow natural in RTL (Bootstrap logical utilities handle most) */ /* Small additional tweaks can be added later for other components as needed */