/* RTL (Right-to-Left) Styles for Arabic Version */

/* Base RTL Direction */
html[dir="rtl"],
html[lang="ar"] {
    direction: rtl;
}

/* Hero Slider Buttons - Flip positioning for RTL */
html[dir="rtl"] .hero-slider-prev,
html[lang="ar"] .hero-slider-prev {
    left: auto !important;
    right: 1.5vw !important;
}

html[dir="rtl"] .hero-slider-next,
html[lang="ar"] .hero-slider-next {
    right: auto !important;
    left: 1.5vw !important;
}

/* Services Slider Buttons - Flip positioning for RTL */
html[dir="rtl"] .services-slider-prev,
html[lang="ar"] .services-slider-prev {
    left: auto !important;
    right: 1.5vw !important;
}

html[dir="rtl"] .services-slider-next,
html[lang="ar"] .services-slider-next {
    right: auto !important;
    left: 1.5vw !important;
}

/* Mobile adjustments for RTL slider buttons */
@media screen and (max-width: 768px) {
    html[dir="rtl"] .hero-slider-prev,
    html[lang="ar"] .hero-slider-prev {
        right: 1rem !important;
    }
    
    html[dir="rtl"] .hero-slider-next,
    html[lang="ar"] .hero-slider-next {
        left: 1rem !important;
    }
    
    html[dir="rtl"] .services-slider-prev,
    html[lang="ar"] .services-slider-prev {
        right: 1rem !important;
    }
    
    html[dir="rtl"] .services-slider-next,
    html[lang="ar"] .services-slider-next {
        left: 1rem !important;
    }
}

html[dir="rtl"] a[href^="tel:"] {
    direction: rtl;
}

p#header-phone-display { 
    direction: ltr !important; 
}

/* Phone numbers: keep LTR in RTL/Arabic so digits are not reversed */
html[lang="ar"] a[href^="tel:"] {
    direction: ltr;
    unicode-bidi: embed;
}

/* Text Alignment - Web and Mobile */
html[dir="rtl"] body,
html[lang="ar"] body {
    text-align: right !important;
}

html[dir="rtl"] p,
html[dir="rtl"] div,
html[dir="rtl"] span,
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] h5,
html[dir="rtl"] h6,
html[lang="ar"] p,
html[lang="ar"] div,
html[lang="ar"] span,
html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] h4,
html[lang="ar"] h5,
html[lang="ar"] h6 {
    text-align: right !important;
}

/* Layout Flips - Margins and Padding */
html[dir="rtl"] .menu,
html[lang="ar"] .menu {
    left: auto;
    right: 0;
}

/* Menu Layout - Keep same as English, just adjust text alignment */
html[dir="rtl"] .menu-link-holder,
html[lang="ar"] .menu-link-holder {
    /* Don't reverse - keep same layout as English */
    flex-direction: row;
}

/* Navigation Menu - Keep same layout and disable problematic transitions */
html[dir="rtl"] .menu-links-holder,
html[lang="ar"] .menu-links-holder {
    /* Don't reverse - keep same layout as English */
    flex-direction: row;
}

html[dir="rtl"] .menu-links-holder.main.frontpage,
html[lang="ar"] .menu-links-holder.main.frontpage {
    transition: none !important;
    transform: translate(0%) !important;
    margin-left: 0vw !important;
    animation: none !important;
}

/* Also disable transitions on menu-link items in Arabic to prevent animation conflicts */
html[dir="rtl"] .menu-link,
html[lang="ar"] .menu-link {
    /* Keep color transition but disable transform/position transitions that might cause issues */
    transition: color 0.3s ease !important;
}

html[dir="rtl"] .menu-link,
html[lang="ar"] .menu-link {
    /* Keep same margins as English */
    margin-left: 0;
}

/* Position phone/time menu-links-holder on the left side for Arabic - Desktop only */
/* On mobile (1024px and less), this is hidden to prevent overlap with hamburger menu */
html[dir="rtl"] .menu-links-holder:not(.main),
html[lang="ar"] .menu-links-holder:not(.main) {
    transform: translate(0) !important;
    display: flex !important;
    flex-direction: row !important;
    margin-left: 1vw !important;
    margin-right: 0 !important;
}

/* Hide phone/time menu on mobile for all languages to prevent overlap with hamburger */
@media screen and (max-width: 1024px) {
    html[dir="rtl"] .menu-links-holder:not(.main),
    html[lang="ar"] .menu-links-holder:not(.main),
    .menu-links-holder:not(.main) {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }
}

/* Adjust margins for menu-link.right items in Arabic */
html[dir="rtl"] .menu-links-holder:not(.main) .menu-link.right,
html[lang="ar"] .menu-links-holder:not(.main) .menu-link.right {
    margin-left: 0 !important;
}

/* Time element - Remove margin-right and add left padding in Arabic for better spacing */
html[dir="rtl"] .menu-link.right .clock.time,
html[lang="ar"] .menu-link.right .clock.time,
html[dir="rtl"] .menu-link.right:has(.clock.time),
html[lang="ar"] .menu-link.right:has(.clock.time) {
    padding-left: 1.5vw !important;
}

/* Time element container - Remove margin-right in Arabic */
html[dir="rtl"] .menu-link.right:has(.clock.time),
html[lang="ar"] .menu-link.right:has(.clock.time),
html[dir="rtl"] .menu-links-holder:not(.main) .menu-link.right:has(.clock.time),
html[lang="ar"] .menu-links-holder:not(.main) .menu-link.right:has(.clock.time) {
    margin-right: 0 !important;
}

/* Language switcher in RTL - adjust margins */
html[dir="rtl"] .menu-links-holder.main .language-switcher,
html[lang="ar"] .menu-links-holder.main .language-switcher {
    margin-left: 1.25vw !important;
    margin-right: 1.25vw !important;
}

/* Desktop language select in RTL */
html[dir="rtl"] .desktop-lang-select,
html[lang="ar"] .desktop-lang-select {
    background-position: left center !important;
    padding-left: 2rem !important;
    padding-right: 0.5rem !important;
}

/* Mobile Menu */
html[dir="rtl"] .mobile-menu-overlay,
html[lang="ar"] .mobile-menu-overlay {
    left: auto;
    right: 0;
}

/* Mobile Menu RTL - Comprehensive fixes */
html[dir="rtl"] .mobile-menu-close,
html[lang="ar"] .mobile-menu-close {
    left: 1.5vw !important;
    right: auto !important;
    top: 1.5vw !important;
}

/* Hamburger button positioning for RTL - Desktop (above 1024px) */
html[dir="rtl"] .hamburger-menu-btn,
html[lang="ar"] .hamburger-menu-btn {
    /* On desktop, hamburger is hidden, but if shown, position on left */
    left: 1.5vw !important;
    right: auto !important;
}

/* Mobile Menu Text Alignment - All text elements */
html[dir="rtl"] .mobile-menu-content,
html[lang="ar"] .mobile-menu-content {
    text-align: right !important;
    direction: rtl !important;
}

html[dir="rtl"] .mobile-menu-content *,
html[lang="ar"] .mobile-menu-content * {
    text-align: right !important;
    direction: rtl !important;
}

html[dir="rtl"] .mobile-menu-content p,
html[lang="ar"] .mobile-menu-content p,
html[dir="rtl"] .mobile-menu-content h1,
html[lang="ar"] .mobile-menu-content h1,
html[dir="rtl"] .mobile-menu-content h2,
html[lang="ar"] .mobile-menu-content h2,
html[dir="rtl"] .mobile-menu-content h3,
html[lang="ar"] .mobile-menu-content h3,
html[dir="rtl"] .mobile-menu-content h4,
html[lang="ar"] .mobile-menu-content h4,
html[dir="rtl"] .mobile-menu-content h5,
html[lang="ar"] .mobile-menu-content h5,
html[dir="rtl"] .mobile-menu-content h6,
html[lang="ar"] .mobile-menu-content h6,
html[dir="rtl"] .mobile-menu-content div,
html[lang="ar"] .mobile-menu-content div,
html[dir="rtl"] .mobile-menu-content span,
html[lang="ar"] .mobile-menu-content span {
    text-align: right !important;
    direction: rtl !important;
}

/* Mobile Menu Header - Unified RTL for All Pages */
html[dir="rtl"] .mobile-menu-header,
html[lang="ar"] .mobile-menu-header {
    display: flex !important;
    flex-direction: row-reverse !important;
    justify-content: space-between !important;
    align-items: center !important;
    text-align: right !important;
    direction: rtl !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Mobile Menu Logo - Position on Right */
html[dir="rtl"] .mobile-menu-header .mobile-menu-logo,
html[lang="ar"] .mobile-menu-header .mobile-menu-logo {
    order: 2 !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    position: relative !important;
    z-index: 1 !important;
}

/* Mobile Menu Close Button - Position on Left */
html[dir="rtl"] .mobile-menu-header .mobile-menu-close,
html[lang="ar"] .mobile-menu-header .mobile-menu-close {
    order: 1 !important;
    left: 1.5rem !important;
    right: auto !important;
    top: 1.5rem !important;
    position: absolute !important;
    margin-right: 0 !important;
    margin-left: auto !important;
}

/* Mobile Menu Navigation - Unified RTL Text Alignment */
html[dir="rtl"] .mobile-menu-nav,
html[lang="ar"] .mobile-menu-nav {
    text-align: right !important;
    direction: rtl !important;
}

/* Mobile Menu Links - Unified RTL Alignment */
html[dir="rtl"] .mobile-menu-nav .mobile-menu-link,
html[lang="ar"] .mobile-menu-nav .mobile-menu-link {
    text-align: right !important;
    direction: rtl !important;
    padding-right: 0 !important;
    padding-left: 1rem !important;
    justify-content: flex-start !important;
    display: flex !important;
    align-items: center !important;
}

/* Mobile Menu Link Hover - Unified RTL */
html[dir="rtl"] .mobile-menu-nav .mobile-menu-link:hover,
html[lang="ar"] .mobile-menu-nav .mobile-menu-link:hover {
    padding-right: 0.5rem !important;
    padding-left: 1.5rem !important;
}

/* Mobile Edit Page Button - RTL Support */
html[dir="rtl"] .mobile-menu-link.mobile-edit-page-btn,
html[lang="ar"] .mobile-menu-link.mobile-edit-page-btn {
    text-align: center !important;
    direction: ltr !important;
}

html[dir="rtl"] .mobile-menu-link.mobile-edit-page-btn:hover,
html[lang="ar"] .mobile-menu-link.mobile-edit-page-btn:hover {
    padding-right: 1rem !important;
    padding-left: 1rem !important;
}

/* Mobile Menu Footer - Unified RTL */
html[dir="rtl"] .mobile-menu-footer,
html[lang="ar"] .mobile-menu-footer {
    text-align: right !important;
    direction: rtl !important;
    padding: 1.5rem !important;
}

html[dir="rtl"] .mobile-menu-footer *,
html[lang="ar"] .mobile-menu-footer * {
    text-align: right !important;
    direction: rtl !important;
}

html[dir="rtl"] .mobile-menu-contact,
html[lang="ar"] .mobile-menu-contact {
    text-align: right !important;
    direction: rtl !important;
}

html[dir="rtl"] .mobile-menu-phone,
html[lang="ar"] .mobile-menu-phone {
    text-align: right !important;
    direction: ltr !important;
}

html[dir="rtl"] .mobile-menu-time,
html[lang="ar"] .mobile-menu-time {
    text-align: right !important;
    direction: rtl !important;
}

html[dir="rtl"] .mobile-menu-time p,
html[lang="ar"] .mobile-menu-time p,
html[dir="rtl"] .mobile-menu-time .clock,
html[lang="ar"] .mobile-menu-time .clock {
    text-align: right !important;
    direction: rtl !important;
}

html[dir="rtl"] .mobile-menu-lang,
html[lang="ar"] .mobile-menu-lang {
    text-align: right !important;
    direction: rtl !important;
}

html[dir="rtl"] .mobile-lang-btn,
html[lang="ar"] .mobile-lang-btn {
    text-align: right !important;
    direction: rtl !important;
    flex-direction: row-reverse !important;
}

html[dir="rtl"] .mobile-lang-dropdown,
html[lang="ar"] .mobile-lang-dropdown {
    left: 0 !important;
    right: auto !important;
}

html[dir="rtl"] .mobile-lang-option,
html[lang="ar"] .mobile-lang-option {
    text-align: right !important;
    direction: rtl !important;
}

/* Language Switcher */
html[dir="rtl"] .lang-dropdown,
html[lang="ar"] .lang-dropdown {
    left: auto;
    right: 0;
}

html[dir="rtl"] .mobile-lang-dropdown,
html[lang="ar"] .mobile-lang-dropdown {
    left: auto;
    right: 0;
}

/* Buttons and Icons */
/* Hero slider button positioning is handled at the top of the file with !important */

html[dir="rtl"] .fullscreen-gallery-prev,
html[lang="ar"] .fullscreen-gallery-prev {
    left: auto;
    right: 2vw;
}

html[dir="rtl"] .fullscreen-gallery-next,
html[lang="ar"] .fullscreen-gallery-next {
    right: auto;
    left: 2vw;
}

/* Services slider button positioning is handled at the top of the file with !important */

/* Forms */
html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] select,
html[lang="ar"] input,
html[lang="ar"] textarea,
html[lang="ar"] select {
    text-align: right;
    direction: rtl;
}

html[dir="rtl"] .form-input,
html[dir="rtl"] .form-textarea,
html[lang="ar"] .form-input,
html[lang="ar"] .form-textarea {
    text-align: right;
}

/* Flexbox Reversals */
/* Removed work-info-flex flex-direction: row-reverse - causes layout issues */

html[dir="rtl"] .about-services-66-holder,
html[lang="ar"] .about-services-66-holder {
    flex-direction: row-reverse;
}

/* Grid Adjustments */
html[dir="rtl"] .profile-grid,
html[lang="ar"] .profile-grid {
    direction: rtl;
}

/* Text Content Holders */
html[dir="rtl"] .work-info-header-holder,
html[dir="rtl"] .info-header-text,
html[lang="ar"] .work-info-header-holder,
html[lang="ar"] .info-header-text {
    text-align: right;
}

html[dir="rtl"] .client-description-holder,
html[lang="ar"] .client-description-holder {
    text-align: right;
}

html[dir="rtl"] .small-about-p-holder,
html[lang="ar"] .small-about-p-holder {
    text-align: right;
}

html[dir="rtl"] .about-p,
html[lang="ar"] .about-p {
    text-align: right;
}

html[dir="rtl"] .toresimon-p,
html[lang="ar"] .toresimon-p {
    text-align: right;
}

/* Service Lists */
html[dir="rtl"] .work-services-col-list,
html[lang="ar"] .work-services-col-list {
    text-align: right;
}

html[dir="rtl"] .about-services-list-holder,
html[lang="ar"] .about-services-list-holder {
    text-align: right;
}

/* Case/Work Items */
html[dir="rtl"] .f-case-holder,
html[lang="ar"] .f-case-holder {
    direction: rtl;
}

html[dir="rtl"] .f-grid-info-holder,
html[lang="ar"] .f-grid-info-holder {
    text-align: right;
}

/* All f-case-title-text elements - right-aligned in Arabic (all pages, web and mobile) */
html[dir="rtl"] .f-case-title-text,
html[lang="ar"] .f-case-title-text,
body.home-rtl .f-case-title-text,
html[dir="rtl"] .f-case-title-text.services-slider-title,
html[lang="ar"] .f-case-title-text.services-slider-title,
html[dir="rtl"] .f-case-title-text.work-page,
html[lang="ar"] .f-case-title-text.work-page {
    text-align: right !important;
}

/* Home Page Arabic - All Titles and About Section */
body.home-rtl .f-case-title-text,
body.home-rtl .h1,
body.home-rtl h1,
body.home-rtl h2,
body.home-rtl h3,
body.home-rtl h4,
body.home-rtl h5,
body.home-rtl h6,
body.home-rtl .about-services-h3-holder,
body.home-rtl .about-services-list-text,
body.home-rtl .about-service-tag-holder,
body.home-rtl .about-services-list-holder,
body.home-rtl .f-grid-info-holder,
body.home-rtl .f-case-title-text.services-slider-title,
/* Vision/Values/Mission Box - All elements right-aligned in Arabic */
html[dir="rtl"] .vision-values-mission-box,
html[lang="ar"] .vision-values-mission-box,
body.home-rtl .vision-values-mission-box {
    text-align: right !important;
}

html[dir="rtl"] .vision-values-mission-box h3,
html[lang="ar"] .vision-values-mission-box h3,
html[dir="rtl"] .vision-values-mission-box p,
html[lang="ar"] .vision-values-mission-box p,
html[dir="rtl"] .vision-values-mission-box div,
html[lang="ar"] .vision-values-mission-box div,
body.home-rtl .vision-values-mission-box h3,
body.home-rtl .vision-values-mission-box p,
body.home-rtl .vision-values-mission-box div,
body.home-rtl .small-header,
body.home-rtl .small-header._2,
body.home-rtl p {
    text-align: right !important;
}

/* Vision/Values/Mission Box - Override inline styles (all Arabic selectors) */
html[dir="rtl"] .vision-values-mission-box h3[style],
html[lang="ar"] .vision-values-mission-box h3[style],
html[dir="rtl"] .vision-values-mission-box p[style],
html[lang="ar"] .vision-values-mission-box p[style],
html[dir="rtl"] .vision-values-mission-box div[style],
html[lang="ar"] .vision-values-mission-box div[style],
body.home-rtl .vision-values-mission-box h3[style],
body.home-rtl .vision-values-mission-box p[style],
body.home-rtl .vision-values-mission-box div[style] {
    text-align: right !important;
}

/* Vision/Values/Mission Box - Override all nested divs with inline styles */
html[dir="rtl"] .vision-values-mission-box div[style*="text-align"],
html[lang="ar"] .vision-values-mission-box div[style*="text-align"],
body.home-rtl .vision-values-mission-box div[style*="text-align"] {
    text-align: right !important;
}

html[dir="rtl"] .f-category-holder,
html[lang="ar"] .f-category-holder {
    text-align: right;
}

/* Slider Indicators */
html[dir="rtl"] .fullscreen-gallery-indicators,
html[lang="ar"] .fullscreen-gallery-indicators {
    left: auto;
    right: 50%;
    transform: translateX(50%);
}

/* Contact Form */
html[dir="rtl"] .form-group,
html[lang="ar"] .form-group {
    text-align: right;
}

html[dir="rtl"] .submit-btn,
html[lang="ar"] .submit-btn {
    margin-left: 0;
    margin-right: auto;
}

/* Footer */
html[dir="rtl"] .footer,
html[lang="ar"] .footer {
    text-align: right;
}

/* Positioning Adjustments */
/* Note: Inline styles with left positioning will need JavaScript to handle */

/* Transform Origins for Animations */
html[dir="rtl"] .cursor .o-embed,
html[lang="ar"] .cursor .o-embed {
    transform-origin: center center;
}

/* Service Slider Name Position - Force override inline styles */
html[dir="rtl"] .services-slider-name,
html[lang="ar"] .services-slider-name,
html[dir="rtl"] #services-slider-name-container,
html[lang="ar"] #services-slider-name-container,
html[dir="rtl"] .services-slider-name[style],
html[lang="ar"] .services-slider-name[style],
html[dir="rtl"] #services-slider-name-container[style],
html[lang="ar"] #services-slider-name-container[style] {
    left: auto !important;
    right: 3vw !important;
    text-align: right !important;
    direction: rtl !important;
}

html[dir="rtl"] .service-name-text,
html[lang="ar"] .service-name-text {
    text-align: right !important;
    direction: rtl !important;
}

/* Work Item Content */
html[dir="rtl"] .work-item-content-holder,
html[lang="ar"] .work-item-content-holder {
    direction: rtl;
}

/* Line Holders */
html[dir="rtl"] .line-holder,
html[lang="ar"] .line-holder {
    direction: rtl;
}

/* Divider Lines */
html[dir="rtl"] .divider-line,
html[lang="ar"] .divider-line {
    margin-left: auto;
    margin-right: 0;
}

/* Principle Holders */
html[dir="rtl"] .principle-holder,
html[lang="ar"] .principle-holder {
    text-align: right;
}

html[dir="rtl"] .about-h3-holder,
html[lang="ar"] .about-h3-holder {
    text-align: right;
    padding-right: 0;
    padding-left: 2vw;
}

/* Services Collaborators Text */
html[dir="rtl"] .services-collaborators-text-holder,
html[lang="ar"] .services-collaborators-text-holder {
    text-align: right;
}

/* About Service Tags */
html[dir="rtl"] .about-service-tag-holder,
html[lang="ar"] .about-service-tag-holder {
    text-align: right;
}

html[dir="rtl"] .about-services-list-text,
html[lang="ar"] .about-services-list-text {
    text-align: right;
}

/* H1 Subpage */
html[dir="rtl"] .h1-subpage,
html[lang="ar"] .h1-subpage {
    text-align: right;
    line-height: 1.1;
}

html[dir="rtl"] .h1-subpage-holder,
html[lang="ar"] .h1-subpage-holder {
    text-align: right;
}

/* Case H1 */
html[dir="rtl"] .case-h1,
html[lang="ar"] .case-h1 {
    text-align: right;
}

html[dir="rtl"] .case-h1-holder,
html[lang="ar"] .case-h1-holder {
    text-align: right;
}

/* Small H2 and H3 */
html[dir="rtl"] .small-h2,
html[dir="rtl"] .small-h3,
html[lang="ar"] .small-h2,
html[lang="ar"] .small-h3 {
    text-align: right;
}

html[dir="rtl"] .about-service-h2-holder,
html[dir="rtl"] .about-services-h3-holder,
html[lang="ar"] .about-service-h2-holder,
html[lang="ar"] .about-services-h3-holder {
    text-align: right;
}

/* Flip .about-services-h3-holder left/right for Arabic (padding-right → padding-left) */
html[dir="rtl"] .about-services-h3-holder,
html[lang="ar"] .about-services-h3-holder {
    padding-right: 0;
    padding-left: 2vw;
}

/* Work Info */
html[dir="rtl"] .work-info-holder,
html[lang="ar"] .work-info-holder {
    direction: rtl;
}

html[dir="rtl"] .work-info-text,
html[lang="ar"] .work-info-text {
    text-align: right;
}

/* TS Holder */
html[dir="rtl"] .ts-holder,
html[lang="ar"] .ts-holder {
    text-align: right;
}

html[dir="rtl"] .about-small-text,
html[lang="ar"] .about-small-text {
    text-align: right;
}

/* Profile Page About P */
html[dir="rtl"] .profile-page-about-p,
html[lang="ar"] .profile-page-about-p {
    text-align: right;
}

/* We Believe Holder */
html[dir="rtl"] .we-belive-holder,
html[lang="ar"] .we-belive-holder {
    direction: rtl;
}

/* Media Queries for RTL - Unified solution for all screen sizes */
/* Mobile and Tablet (1024px and less) - Hamburger visible, phone/time hidden */
@media screen and (max-width: 1024px) {
    /* Ensure hamburger button is positioned on left in RTL, doesn't overlap with anything */
    html[dir="rtl"] .hamburger-menu-btn,
    html[lang="ar"] .hamburger-menu-btn {
        left: 1.5vw !important;
        right: auto !important;
        top: 2.5vw !important;
        position: fixed !important;
        z-index: 10001 !important;
    }
    
    /* Phone/time menu is already hidden by the rule above (line ~113) */
    /* This ensures no overlap with hamburger button */
}

@media screen and (max-width: 768px) {
    /* Mobile Menu Close Button - Unified positioning for tablets */
    html[dir="rtl"] .mobile-menu-header .mobile-menu-close,
    html[lang="ar"] .mobile-menu-header .mobile-menu-close {
        left: 1.5rem !important;
        right: auto !important;
        top: 1.5rem !important;
        position: absolute !important;
    }
    
    /* Mobile Menu Logo - Unified margin for tablets */
    html[dir="rtl"] .mobile-menu-header .mobile-menu-logo,
    html[lang="ar"] .mobile-menu-header .mobile-menu-logo {
        margin-right: auto !important;
        margin-left: 0 !important;
    }
    
    /* Hamburger button positioning for tablets */
    html[dir="rtl"] .hamburger-menu-btn,
    html[lang="ar"] .hamburger-menu-btn {
        left: 1.5vw !important;
        right: auto !important;
        top: 2.5vw !important;
    }
    
    /* Mobile - All text right-aligned in Arabic */
    html[dir="rtl"] body,
    html[lang="ar"] body {
        text-align: right !important;
    }
    
    html[dir="rtl"] p,
    html[dir="rtl"] div,
    html[dir="rtl"] span,
    html[dir="rtl"] h1,
    html[dir="rtl"] h2,
    html[dir="rtl"] h3,
    html[dir="rtl"] h4,
    html[dir="rtl"] h5,
    html[dir="rtl"] h6,
    html[lang="ar"] p,
    html[lang="ar"] div,
    html[lang="ar"] span,
    html[lang="ar"] h1,
    html[lang="ar"] h2,
    html[lang="ar"] h3,
    html[lang="ar"] h4,
    html[lang="ar"] h5,
    html[lang="ar"] h6 {
        text-align: right !important;
    }
    
    /* Mobile - All f-case-title-text elements right-aligned */
    html[dir="rtl"] .f-case-title-text,
    html[lang="ar"] .f-case-title-text {
        text-align: right !important;
    }
}

@media screen and (max-width: 480px) {
    /* Mobile Menu Close Button - Unified positioning for small mobile */
    html[dir="rtl"] .mobile-menu-header .mobile-menu-close,
    html[lang="ar"] .mobile-menu-header .mobile-menu-close {
        left: 1.5rem !important;
        right: auto !important;
        top: 1.5rem !important;
        position: absolute !important;
    }
    
    /* Mobile Menu Logo - Unified margin for small mobile */
    html[dir="rtl"] .mobile-menu-header .mobile-menu-logo,
    html[lang="ar"] .mobile-menu-header .mobile-menu-logo {
        margin-right: 0 !important;
        margin-left: auto !important;
    }
    
    html[dir="rtl"] .hamburger-menu-btn,
    html[lang="ar"] .hamburger-menu-btn {
        left: 1.5rem !important;
        right: auto !important;
        top: 1.5rem !important;
    }
}

/* Ensure images and videos maintain aspect ratio in RTL */
html[dir="rtl"] img,
html[dir="rtl"] video,
html[lang="ar"] img,
html[lang="ar"] video {
    direction: ltr; /* Media elements should not be flipped */
}

/* SVG and Icons - Keep original direction */
html[dir="rtl"] svg,
html[lang="ar"] svg {
    direction: ltr;
}

/* Flip arrow icons in navigation */
html[dir="rtl"] .hero-slider-prev svg,
html[dir="rtl"] .hero-slider-next svg,
html[dir="rtl"] .fullscreen-gallery-prev svg,
html[dir="rtl"] .fullscreen-gallery-next svg,
html[lang="ar"] .hero-slider-prev svg,
html[lang="ar"] .hero-slider-next svg,
html[lang="ar"] .fullscreen-gallery-prev svg,
html[lang="ar"] .fullscreen-gallery-next svg {
    transform: scaleX(-1);
}

/* Work Next/Prev Holder - Flip padding for RTL */
html[dir="rtl"] .work-prev-holder,
html[lang="ar"] .work-prev-holder {
    padding-right: 0 !important;
    padding-left: .5vw !important;
}

html[dir="rtl"] .work-next-holder,
html[lang="ar"] .work-next-holder {
    padding-left: 0 !important;
    padding-right: .5vw !important;
}