/* ===================================================================
   HOME PAGE RTL STYLES
   ================================================================== */

/* ===================================================================
   1. HERO SECTION RTL STYLES
   ================================================================== */

/* Hero section content alignment */
html[dir="rtl"] .hero-section {
    justify-content: flex-end !important;
    text-align: right !important;
}

html[dir="rtl"] .hero-content {
    text-align: right !important;
}

html[dir="rtl"] #hero-text-block {
    text-align: right !important;
}

html[dir="rtl"] #hero-title {
    text-align: right !important;
}

html[dir="rtl"] #hero-description {
    text-align: right !important;
}

/* Desktop hero content positioning for RTL */
@media (min-width: 1024px) {
    html[dir="rtl"] .hero-content {
        left: auto !important;
        right: clamp(2rem, 6vw, 7rem) !important;
        padding-left: 0 !important;
        padding-right: clamp(1rem, 2vw, 2rem) !important;
        text-align: right !important;
    }

    /* Force container alignment with high specificity for RTL */
    html[dir="rtl"] .hero-section .hero-content #hero-text-block {
        width: clamp(980px, 70vw, 1280px) !important;
        padding-right: 0 !important;
        margin-right: 0 !important;
        text-align: right !important;
        direction: rtl !important;
    }

    /* Title styling with high specificity for RTL */
    html[dir="rtl"] .hero-section .hero-content #hero-title {
        text-align: right !important;
        text-align-last: right !important;
        direction: rtl !important;
        margin-right: 0 !important;
        padding-right: 0 !important;
        text-indent: 0 !important;
    }

    /* Row container to match RTL layout */
    html[dir="rtl"] .hero-section .hero-content .desc-cta-row {
        justify-content: space-between !important;
        
        position: relative !important;
        text-align: right !important; /* Ensure parent alignment */
    }

    /* Description positioned for RTL (right side) - aligned like title */
    html[dir="rtl"] .hero-section .hero-content .desc-cta-row #hero-description {
        left: auto !important;
        top: 0 !important;
        text-align: right !important;
        text-align-last: right !important;
        direction: rtl !important;
        width: clamp(680px, 52vw, 900px) !important;
        max-width: 900px !important;
        margin: 0 !important;
        margin-right: 0 !important;
        padding: 0 !important;
        padding-right: 0 !important;
        margin-left: auto !important; /* Push to right in reversed flex */
    }

    /* Ensure direct paragraph text aligns right in RTL within hero content */
    @media (min-width: 1024px) {
        html[dir="rtl"] .hero-content p {
            text-align: right !important;
            text-align-last: right !important;
            direction: rtl !important;
        }
    }

    /* High specificity rule for hero description RTL alignment */
    html[dir="rtl"] .hero-content .desc-cta-row p#hero-description {
        text-align: right !important;
        text-align-last: right !important;
        direction: rtl !important;
    }

    /* Button positioned to the left for RTL */
    html[dir="rtl"] .hero-section .hero-content .desc-cta-row #explore-link {
        position: absolute !important;
        left: 0 !important;
        right: auto !important;
        top: 0 !important;
        margin: 0 !important;
        display: inline-flex !important;
        align-self: auto !important;
        height: 53px !important;
        line-height: 53px !important;
        padding: 0 24px 0 16px !important;
        border-bottom-width: 2px !important;
        border-right-width: 2px !important;
        flex: 0 0 auto !important;
    }
}

/* Hero CTA button positioning for RTL */
html[dir="rtl"] #explore-link {
    right: clamp(0.375rem, 2.5vw, 1rem) !important;
    left: auto !important;
    transform: skewX(20deg) !important;
}

/* Desktop hero button positioning */
@media (min-width: 1024px) {
    html[dir="rtl"] #explore-link {
        right: 0 !important;
        left: auto !important;
        transform: skewX(20deg) !important;
    }
}

/* ===================================================================
   2. CAR MODELS SECTION RTL STYLES
   ================================================================== */

/* Car models navigation buttons */
html[dir="rtl"] .car-models-compact button:hover {
    transform: translateX(-4px) !important;
}

/* Car models content alignment */
html[dir="rtl"] .car-models-compact {
    direction: rtl !important;
}

/* Car models text alignment */
html[dir="rtl"] .car-models-compact h2,
html[dir="rtl"] .car-models-compact h3,
html[dir="rtl"] .car-models-compact p {
    text-align: right !important;
}

/* Car models navigation */
html[dir="rtl"] .car-models-nav {
    flex-direction: row-reverse !important;
}

/* Car models price and details */
html[dir="rtl"] .car-price,
html[dir="rtl"] .car-details {
    text-align: right !important;
}

/* Car models buttons */
html[dir="rtl"] .car-models-compact .btn {
    text-align: center !important;
}

/* ===================================================================
   3. VIDEO SECTION RTL STYLES
   ================================================================== */

/* Video play button positioning */
html[dir="rtl"] .full-bleed-video .absolute.right-52 {
    right: auto !important;
    left: 13rem !important;
}

html[dir="rtl"] .full-bleed-video .absolute.left-10 {
    left: auto !important;
    right: 2.5rem !important;
}

/* Video button styling */
html[dir="rtl"] .full-bleed-video a {
    transform: skewX(12deg) !important;
}

/* Video button icon */
html[dir="rtl"] .full-bleed-video svg {
    margin-left: 0.5rem !important;
    margin-right: 0 !important;
}

/* ===================================================================
   4. TECHNOLOGY SECTION RTL STYLES
   ================================================================== */

/* Technology section content alignment */
html[dir="rtl"] .tech-section {
    direction: rtl !important;
}

html[dir="rtl"] .tech-header-wrap {
    text-align: center !important;
}

html[dir="rtl"] .tech-label,
html[dir="rtl"] .tech-main-title,
html[dir="rtl"] .tech-subtitle,
html[dir="rtl"] .tech-body {
    text-align: right !important;
}

/* Technology desktop layout */
html[dir="rtl"] .tech-desktop {
    padding-right: 8px !important;
    padding-left: 0 !important;
}

/* Technology mobile layout */
html[dir="rtl"] .tech-mobile {
    text-align: right !important;
}

html[dir="rtl"] .tech-mobile .eyebrow,
html[dir="rtl"] .tech-mobile .headline,
html[dir="rtl"] .tech-mobile p {
    text-align: right !important;
}

/* ===================================================================
   5. HERO-SEC SECTION RTL STYLES
   ================================================================== */

/* Hero-sec mobile content */
html[dir="rtl"] .tech-mobile .container {
    text-align: right !important;
}

html[dir="rtl"] .tech-mobile .eyebrow,
html[dir="rtl"] .tech-mobile .headline,
html[dir="rtl"] .tech-mobile .copy {
    text-align: right !important;
    text-align-last: right !important;
    direction: rtl !important;
}

/* Typography corrections for Arabic headline to match English specifications exactly */
html[dir="rtl"] .tech-mobile .headline {
    font-family: 'Montserrat', 'Poppins', Arial, sans-serif !important;
    font-size: clamp(18px, 5.5vw, 24px) !important;
    font-weight: 600 !important; /* SemiBold - exact match to English */
    line-height: 1.25 !important;
    letter-spacing: 0 !important;
    margin-bottom: 16px !important;
    text-wrap: balance !important;
    word-break: keep-all !important;
    /* Ensure no font scaling issues */
    font-size-adjust: none !important;
    font-stretch: normal !important;
    font-variant: normal !important;
}

html[dir="rtl"] .tech-desktop .headline {
    font-family: 'Montserrat', 'Poppins', Arial, sans-serif !important;
    color: #FFFFFF !important; /* Ensure white color */
    font-size: clamp(32px, 4.5vw, 56px) !important;
    font-weight: 700 !important; /* Bold - exact match to English */
    line-height: 1.2 !important;
    letter-spacing: 0.2px !important;
    margin-bottom: clamp(60px, 10vw, 200px) !important;
    /* Ensure no font scaling issues */
    font-size-adjust: none !important;
    font-stretch: normal !important;
    font-variant: normal !important;
}

/* Hero-sec desktop content */
html[dir="rtl"] .tech-hero-bg {
    direction: rtl !important;
}

/* Background image RTL mirroring - flip horizontally for proper RTL flow */
html[dir="rtl"] .tech-hero-bg .hero-bg-image {
    transform: scaleX(-1) !important;
}

html[dir="rtl"] .tech-hero-bg .eyebrow,
html[dir="rtl"] .tech-hero-bg .headline {
    text-align: right !important;
}

/* Desktop hero-sec layout positioning for RTL */
@media (min-width: 768px) {
    html[dir="rtl"] .tech-hero-bg .container {
        flex-direction: row-reverse !important;
    }
    
    html[dir="rtl"] .tech-desktop {
        padding-right: 0 !important;
        padding-left: 8px !important;
        text-align: right !important;
    }
    
    html[dir="rtl"] .tech-desktop .eyebrow,
    html[dir="rtl"] .tech-desktop .headline,
    html[dir="rtl"] .tech-desktop .copy {
        text-align: right !important;
        text-align-last: right !important;
        direction: rtl !important;
    }
    
    /* Stats section positioning for RTL */
    html[dir="rtl"] .tech-stats {
        padding-right: 0 !important;
        padding-left: 80px !important;
        margin-right: 0 !important;
        margin-left: 24px !important;
        transform: translateX(-50%) !important;
    }
    
    html[dir="rtl"] .tech-stats .label,
    html[dir="rtl"] .tech-stats .value,
    html[dir="rtl"] .tech-stats .suffix {
        text-align: right !important;
        direction: rtl !important;
    }
}

/* Mobile hero-sec RTL adjustments */
@media (max-width: 767px) {
    html[dir="rtl"] .tech-mobile .copy {
        text-align: right !important;
        text-align-last: right !important;
        direction: rtl !important;
    }
    
    html[dir="rtl"] .tech-mobile .headline .line1,
    html[dir="rtl"] .tech-mobile .headline .line2 {
        text-align: right !important;
        direction: rtl !important;
    }
}

/* ===================================================================
   17. HERO-SEC COMPREHENSIVE RTL FIXES
   ================================================================== */

/* Override inline styles in hero-sec template for RTL */
html[dir="rtl"] .tech-mobile,
html[dir="rtl"] .tech-desktop {
    direction: rtl !important;
}

/* Force RTL alignment for all text elements in hero-sec */
html[dir="rtl"] .tech-mobile .eyebrow,
html[dir="rtl"] .tech-mobile .headline,
html[dir="rtl"] .tech-mobile .copy,
html[dir="rtl"] .tech-desktop .eyebrow,
html[dir="rtl"] .tech-desktop .headline,
html[dir="rtl"] .tech-desktop .copy {
    text-align: right !important;
    text-align-last: right !important;
    direction: rtl !important;
}

/* Ensure Arabic typography specifications override any conflicting styles */
html[dir="rtl"] .tech-mobile .headline,
html[dir="rtl"] .tech-desktop .headline {
    font-family: 'Montserrat', 'Poppins', Arial, sans-serif !important;
}

/* Additional background image RTL mirroring for mobile */
html[dir="rtl"] .tech-mobile .hero-bg-image {
    transform: scaleX(-1) !important;
}

/* Override the inline styles from the template */
html[dir="rtl"] .tech-mobile .copy {
    text-align: right !important;
    text-align-last: right !important;
    -moz-text-align-last: right !important;
    direction: rtl !important;
}

/* Desktop layout fixes for RTL */
@media (min-width: 768px) {
    html[dir="rtl"] .tech-hero-bg .container {
        flex-direction: row-reverse !important;
    }
    
    html[dir="rtl"] .tech-desktop {
        order: 2 !important;
    }
    
    html[dir="rtl"] .tech-stats {
        order: 1 !important;
    }
    
    /* Ensure proper flex alignment for RTL */
    html[dir="rtl"] .tech-hero-bg .container > div {
        flex: 1 1 50% !important;
    }
    
    /* Fix stats positioning for RTL */
    html[dir="rtl"] .tech-stats {
        padding-right: 0 !important;
        padding-left: 80px !important;
        margin-right: 0 !important;
        margin-left: 24px !important;
        transform: translateX(-50%) !important;
        text-align: right !important;
    }
    
    html[dir="rtl"] .tech-stats > div {
        text-align: right !important;
    }
    
    html[dir="rtl"] .tech-stats .label,
    html[dir="rtl"] .tech-stats .value,
    html[dir="rtl"] .tech-stats .suffix {
        text-align: right !important;
        direction: rtl !important;
    }
    
    /* Fix unit and symbol positioning for RTL */
    html[dir="rtl"] .tech-stats .value .unit {
        margin-right: 6px !important;
        margin-left: 0 !important;
    }
    
    html[dir="rtl"] .tech-stats .value .percent-symbol {
        margin-right: 2px !important;
        margin-left: 0 !important;
    }
    
    html[dir="rtl"] .tech-stats .suffix {
        margin-right: 8px !important;
        margin-left: 0 !important;
    }
}

/* Mobile layout fixes for RTL */
@media (max-width: 767px) {
    html[dir="rtl"] .tech-mobile .container {
        text-align: right !important;
    }
    
    html[dir="rtl"] .tech-mobile .eyebrow,
    html[dir="rtl"] .tech-mobile .headline,
    html[dir="rtl"] .tech-mobile .copy {
        text-align: right !important;
        text-align-last: right !important;
        direction: rtl !important;
    }
    
    /* Ensure mobile container has proper RTL alignment */
    html[dir="rtl"] .tech-mobile .container {
        direction: rtl !important;
    }
    
    /* Override the justify text alignment for RTL */
    html[dir="rtl"] .tech-mobile .copy {
        text-align: right !important;
        text-align-last: right !important;
        -moz-text-align-last: right !important;
        direction: rtl !important;
    }
    
    /* Fix headline line breaks for RTL */
    html[dir="rtl"] .tech-mobile .headline .line1,
    html[dir="rtl"] .tech-mobile .headline .line2 {
        text-align: right !important;
        direction: rtl !important;
    }
    
    /* Fix brand emphasis positioning for RTL */
    html[dir="rtl"] .tech-mobile .brand-emphasis {
        text-align: right !important;
        direction: rtl !important;
    }
}

/* Override any inline styles that force left alignment */
html[dir="rtl"] .tech-mobile *,
html[dir="rtl"] .tech-desktop *,
html[dir="rtl"] .tech-stats * {
    text-align: right !important;
    direction: rtl !important;
}

/* Force RTL alignment with maximum specificity */
html[dir="rtl"] body .tech-mobile .eyebrow,
html[dir="rtl"] body .tech-mobile .headline,
html[dir="rtl"] body .tech-mobile .copy,
html[dir="rtl"] body .tech-desktop .eyebrow,
html[dir="rtl"] body .tech-desktop .headline,
html[dir="rtl"] body .tech-desktop .copy {
    text-align: right !important;
    text-align-last: right !important;
    direction: rtl !important;
}

/* ===================================================================
   18. TECHNOLOGIES AND INNOVATIONS PAGE RTL TYPOGRAPHY FIXES
   ================================================================== */

/* Ensure Arabic headline typography exactly matches English specifications */
html[dir="rtl"] body .tech-mobile .headline,
html[dir="rtl"] body .tech-desktop .headline {
    font-family: 'Montserrat', 'Poppins', Arial, sans-serif !important;
}

/* Mobile headline specifications - exact match to English */
html[dir="rtl"] body .tech-mobile .headline {
    font-family: 'Montserrat', 'Poppins', Arial, sans-serif !important;
    color: #172154 !important;
    font-size: clamp(18px, 5.5vw, 24px) !important;
    font-weight: 600 !important; /* SemiBold */
    line-height: 1.25 !important;
    letter-spacing: 0 !important;
    margin-bottom: 16px !important;
    text-wrap: balance !important;
    word-break: keep-all !important;
    /* Override any inherited font properties */
    font-size-adjust: none !important;
    font-stretch: normal !important;
    font-variant: normal !important;
    font-style: normal !important;
}

/* Desktop headline specifications - exact match to English */
html[dir="rtl"] body .tech-desktop .headline {
    font-family: 'Montserrat', 'Poppins', Arial, sans-serif !important;
    color: #FFFFFF !important;
    font-size: clamp(32px, 4.5vw, 56px) !important;
    font-weight: 700 !important; /* Bold */
    line-height: 1.2 !important;
    letter-spacing: 0.2px !important;
    margin-bottom: clamp(60px, 10vw, 200px) !important;
    /* Override any inherited font properties */
    font-size-adjust: none !important;
    font-stretch: normal !important;
    font-variant: normal !important;
    font-style: normal !important;
}

/* Ensure white color for desktop headline with maximum specificity */
html[dir="rtl"] .tech-desktop .headline,
html[dir="rtl"] .tech-desktop h1.headline,
html[dir="rtl"] .tech-hero-bg .tech-desktop .headline {
    color: #FFFFFF !important;
}

/* Also ensure eyebrow and copy text are white on desktop */
html[dir="rtl"] .tech-desktop .eyebrow {
    color: #FFFFFF !important;
    opacity: 0.85 !important;
}

html[dir="rtl"] .tech-desktop .copy {
    color: rgba(255,255,255,0.85) !important;
}

/* ===================================================================
   19. BACKGROUND IMAGE RTL MIRRORING
   ================================================================== */

/* Mirror background image horizontally for RTL layout without changing dimensions */
html[dir="rtl"] .tech-hero-bg .hero-bg-image,
html[dir="rtl"] .hero-bg-image {
    transform: scaleX(-1) !important;
    /* Preserve original dimensions and aspect ratio */
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
}

/* Ensure mirroring works on mobile as well */
@media (max-width: 767px) {
    html[dir="rtl"] .tech-mobile .hero-bg-image,
    html[dir="rtl"] .hero-bg-image {
        transform: scaleX(-1) !important;
    }
}

/* Additional specific targeting for the background image element */
html[dir="rtl"] .tech-hero-bg img.hero-bg-image,
html[dir="rtl"] img.hero-bg-image {
    transform: scaleX(-1) !important;
    /* Maintain proper positioning and sizing */
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    z-index: 0 !important;
}

/* ===================================================================
   20. COMPREHENSIVE COLOR FIXES FOR ARABIC TEXT
   ================================================================== */

/* Force white color and exact sizing for all desktop text elements with maximum specificity */
@media (min-width: 768px) {
    html[dir="rtl"] .tech-hero-bg .tech-desktop .headline,
    html[dir="rtl"] .tech-hero-bg .tech-desktop h1,
    html[dir="rtl"] .tech-hero-bg .headline,
    html[dir="rtl"] .tech-desktop .headline,
    html[dir="rtl"] .tech-desktop h1 {
        font-family: 'Montserrat', 'Poppins', Arial, sans-serif !important;
        color: #FFFFFF !important;
        font-size: clamp(32px, 4.5vw, 56px) !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
        letter-spacing: 0.2px !important;
        margin-bottom: clamp(60px, 10vw, 200px) !important;
        /* Ensure perfect size matching */
        font-size-adjust: none !important;
        font-stretch: normal !important;
        font-variant: normal !important;
        font-style: normal !important;
        text-transform: none !important;
        font-synthesis: none !important;
    }

    html[dir="rtl"] .tech-hero-bg .tech-desktop .eyebrow,
    html[dir="rtl"] .tech-desktop .eyebrow {
        font-family: 'Montserrat', 'Poppins', Arial, sans-serif !important;
        color: #FFFFFF !important;
        opacity: 0.85 !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        line-height: 24px !important;
    }

    html[dir="rtl"] .tech-hero-bg .tech-desktop .copy,
    html[dir="rtl"] .tech-desktop .copy {
        font-family: 'Montserrat', 'Poppins', Arial, sans-serif !important;
        color: rgba(255,255,255,0.85) !important;
        font-size: clamp(14px, 1.4vw, 18px) !important;
        line-height: 1.6 !important;
        max-width: clamp(280px, 28vw, 420px) !important;
    }
}

/* Mobile sizing with maximum specificity */
@media (max-width: 767px) {
    html[dir="rtl"] .tech-mobile .headline,
    html[dir="rtl"] .tech-mobile h1 {
        font-family: 'Montserrat', 'Poppins', Arial, sans-serif !important;
        color: #172154 !important;
        font-size: clamp(18px, 5.5vw, 24px) !important;
        font-weight: 600 !important;
        line-height: 1.25 !important;
        letter-spacing: 0 !important;
        margin-bottom: 16px !important;
        text-wrap: balance !important;
        word-break: keep-all !important;
        /* Ensure perfect size matching */
        font-size-adjust: none !important;
        font-stretch: normal !important;
        font-variant: normal !important;
        font-style: normal !important;
        text-transform: none !important;
        font-synthesis: none !important;
    }
}

/* ===================================================================
   6. EXPERIENCE SECTION RTL STYLES
   ================================================================== */

/* Experience section background and content */
html[dir="rtl"] .experience-section {
    direction: rtl !important;
    text-align: right !important;
}

/* Experience content positioning */
html[dir="rtl"] .experience-content {
    text-align: right !important;
}

/* Experience text elements */
html[dir="rtl"] .experience-section h1,
html[dir="rtl"] .experience-section h2,
html[dir="rtl"] .experience-section p {
    text-align: right !important;
}

/* ===================================================================
   7. LATEST NEWS SECTION RTL STYLES - COMPREHENSIVE
   ================================================================== */

/* News section main container */
html[dir="rtl"] .rtl-news-section {
    direction: rtl !important;
}

/* News header layout - Complete RTL mirroring */
html[dir="rtl"] .rtl-news-header {
    flex-direction: row-reverse !important;
    justify-content: space-between !important;
}

/* News titles alignment - Right side positioning */
html[dir="rtl"] .rtl-news-titles {
    text-align: right !important;
    order: 2 !important;
}

html[dir="rtl"] .rtl-media-label {
    text-align: right !important;
    direction: rtl !important;
}

html[dir="rtl"] .rtl-news-title {
    text-align: right !important;
    direction: rtl !important;
}

/* See All News button - Left side positioning */
html[dir="rtl"] .rtl-see-all-btn {
    margin-left: 0 !important;
    margin-right: 2.5rem !important;
    order: 1 !important;
}

html[dir="rtl"] .rtl-arrow {
    transform: scaleX(-1) !important;
    margin-right: 0.5rem !important;
    margin-left: 0 !important;
}

/* News cards container - Complete RTL mirroring */
html[dir="rtl"] .rtl-news-cards-container {
    flex-direction: row-reverse !important;
    direction: rtl !important;
}

/* Ensure proper RTL scrolling behavior */
html[dir="rtl"] .rtl-news-cards-container {
    scroll-snap-type: x mandatory !important;
}

/* Individual news card RTL styling - Vertical Layout (same as LTR) */
html[dir="rtl"] .rtl-news-card {
    direction: rtl !important;
    display: flex !important;
    flex-direction: column !important;
}

/* RTL Image Section - Always on top */
html[dir="rtl"] .rtl-image-section {
    width: 100% !important;
    order: 1 !important;
}

html[dir="rtl"] .rtl-image-section img {
    width: 100% !important;
    height: 12rem !important;
    object-fit: cover !important;
    border-radius: 0.375rem 0.375rem 0 0 !important;
}

/* RTL Content Section - Always below image */
html[dir="rtl"] .rtl-content-section {
    width: 100% !important;
    order: 2 !important;
}

html[dir="rtl"] .rtl-card-content {
    text-align: right !important;
    direction: rtl !important;
}

html[dir="rtl"] .rtl-card-header {
    text-align: right !important;
}

html[dir="rtl"] .rtl-card-date {
    text-align: right !important;
    direction: rtl !important;
}

html[dir="rtl"] .rtl-card-title {
    text-align: right !important;
    direction: rtl !important;
}

html[dir="rtl"] .rtl-card-description {
    text-align: right !important;
    direction: rtl !important;
}

/* Learn More button - Position FAR LEFT and mirror layout */
html[dir="rtl"] .rtl-learn-more-btn {
    flex-direction: row-reverse !important;
    align-self: flex-start !important;
    margin-right: auto !important;
    margin-left: 0 !important;
    justify-self: flex-start !important;
    width: fit-content !important;
}

/* Force button container to align left */
html[dir="rtl"] .rtl-card-content {
    align-items: flex-start !important;
    text-align: right !important;
    direction: rtl !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Ensure button stays at the far left */
html[dir="rtl"] .rtl-card-content > a {
    align-self: flex-start !important;
    margin-right: auto !important;
    margin-left: 0 !important;
}

html[dir="rtl"] .rtl-learn-arrow {
    transform: scaleX(-1) !important;
    margin-right: 0.5rem !important;
    margin-left: 0 !important;
}

/* Additional targeting for news cards specifically - FORCE FAR LEFT */
html[dir="rtl"] .news-card .rtl-learn-more-btn,
html[dir="rtl"] .card .rtl-learn-more-btn,
html[dir="rtl"] .news-card-learn-more {
    position: relative !important;
    left: 0 !important;
    right: auto !important;
    margin-right: auto !important;
    margin-left: 0 !important;
    align-self: flex-start !important;
    justify-self: flex-start !important;
    float: left !important;
}

/* Force all learn more buttons to far left */
html[dir="rtl"] a[class*="learn-more"],
html[dir="rtl"] .rtl-learn-more-btn,
html[dir="rtl"] .news-card-learn-more {
    margin-right: auto !important;
    margin-left: 0 !important;
    align-self: flex-start !important;
    justify-self: flex-start !important;
    float: left !important;
}

/* Specific targeting for the exact class used in template */
html[dir="rtl"] .inline-flex.items-center.news-card-learn-more {
    margin-right: auto !important;
    margin-left: 0 !important;
    align-self: flex-start !important;
    justify-self: flex-start !important;
    position: relative !important;
    left: 0 !important;
    right: auto !important;
    display: flex !important;
    width: fit-content !important;
}

/* Force the button container to align left */
html[dir="rtl"] .rtl-content-section {
    align-items: flex-start !important;
    justify-content: flex-start !important;
}

/* Additional targeting with higher specificity */
html[dir="rtl"] .rtl-content-section .news-card-learn-more {
    align-self: flex-start !important;
    margin-right: auto !important;
    margin-left: 0 !important;
}

/* Maximum specificity targeting for news cards */
html[dir="rtl"] .rtl-news-card .rtl-content-section a.news-card-learn-more,
html[dir="rtl"] .flex-col .rtl-content-section a.news-card-learn-more {
    align-self: flex-start !important;
    margin-right: auto !important;
    margin-left: 0 !important;
    justify-self: flex-start !important;
    position: relative !important;
    left: 0 !important;
    right: auto !important;
    display: inline-flex !important;
    width: fit-content !important;
}

/* CRITICAL: Target the actual container class from HTML */
html[dir="rtl"] .rtl-card-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
}

/* Force the learn more button to left alignment */
html[dir="rtl"] .rtl-learn-more-btn {
    align-self: flex-start !important;
    margin-right: auto !important;
    margin-left: 0 !important;
    justify-self: flex-start !important;
}

/* Additional targeting for the button */
html[dir="rtl"] .rtl-card-content .news-card-learn-more {
    align-self: flex-start !important;
    margin-right: auto !important;
    margin-left: 0 !important;
}

/* Force container to align items to start */
html[dir="rtl"] .rtl-card-content > a:last-child {
    align-self: flex-start !important;
    margin-right: auto !important;
    margin-left: 0 !important;
}

/* Ultimate override - use text alignment */
html[dir="rtl"] .rtl-card-content {
    text-align: left !important;
}

/* Remove any right alignment from flex-row-reverse */
html[dir="rtl"] .flex-row-reverse.rtl-learn-more-btn {
    flex-direction: row !important;
    justify-content: flex-start !important;
}

/* Force button positioning with float if needed */
html[dir="rtl"] .news-card-learn-more.rtl-learn-more-btn {
    float: left !important;
    clear: both !important;
}

/* Mobile responsive adjustments for RTL */
@media (max-width: 768px) {
    html[dir="rtl"] .rtl-news-header {
        flex-direction: column !important;
        align-items: flex-end !important;
        text-align: right !important;
    }

    html[dir="rtl"] .rtl-news-titles {
        order: 1 !important;
        width: 100% !important;
        text-align: right !important;
    }

    html[dir="rtl"] .rtl-see-all-btn {
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-top: 1rem !important;
        order: 2 !important;
        align-self: flex-end !important;
    }

    html[dir="rtl"] .rtl-news-cards-container {
        flex-direction: row !important;
        direction: rtl !important;
    }

    /* Mobile RTL cards - Stack vertically on small screens */
    html[dir="rtl"] .rtl-news-card {
        flex-direction: column !important;
    }

    html[dir="rtl"] .rtl-image-section {
        width: 100% !important;
        order: 1 !important;
    }

    html[dir="rtl"] .rtl-image-section img {
        height: 12rem !important;
        border-radius: 0.375rem 0.375rem 0 0 !important;
    }

    html[dir="rtl"] .rtl-content-section {
        width: 100% !important;
        order: 2 !important;
    }

    /* Mobile - Force button to far left */
    html[dir="rtl"] .rtl-learn-more-btn,
    html[dir="rtl"] .news-card-learn-more {
        align-self: flex-start !important;
        margin-right: auto !important;
        margin-left: 0 !important;
        float: left !important;
        clear: left !important;
    }

    /* Force button container alignment */
    html[dir="rtl"] .rtl-content-section {
        align-items: flex-start !important;
        justify-content: flex-start !important;
    }

    /* Mobile specific button positioning */
    html[dir="rtl"] .rtl-content-section .news-card-learn-more {
        align-self: flex-start !important;
        margin-right: auto !important;
        margin-left: 0 !important;
        position: relative !important;
        left: 0 !important;
        right: auto !important;
    }
}

/* Desktop RTL cards - Vertical layout (same as mobile) */
@media (min-width: 769px) {
    html[dir="rtl"] .rtl-news-card {
        flex-direction: column !important;
        min-height: auto !important;
    }

    html[dir="rtl"] .rtl-image-section {
        width: 100% !important;
        order: 1 !important;
    }

    html[dir="rtl"] .rtl-content-section {
        width: 100% !important;
        order: 2 !important;
    }
}

/* ===================================================================
   8. HERO DESCRIPTION RTL COMPREHENSIVE FIXES
   ================================================================== */

/* Comprehensive RTL alignment for hero description across all screen sizes */
html[dir="rtl"] #hero-description,
html[dir="rtl"] .hero-content #hero-description,
html[dir="rtl"] .hero-section #hero-description,
html[dir="rtl"] .hero-section .hero-content #hero-description,
html[dir="rtl"] .hero-section .hero-content .desc-cta-row #hero-description {
    text-align: right !important;
    text-align-last: right !important;
    direction: rtl !important;
}

/* Force RTL alignment for all paragraph elements within hero content */
html[dir="rtl"] .hero-content p,
html[dir="rtl"] .hero-section .hero-content p {
    text-align: right !important;
    text-align-last: right !important;
    direction: rtl !important;
}

/* Override inline styles that force left alignment */
html[dir="rtl"] .hero-content {
    text-align: right !important;
}

html[dir="rtl"] #hero-text-block {
    text-align: right !important;
}

/* Override Tailwind CSS text alignment classes for RTL */
html[dir="rtl"] .text-left {
    text-align: right !important;
}

/* Target the specific paragraph with Tailwind color class */
html[dir="rtl"] p.text-right {
    text-align: right !important;
    text-align-last: right !important;
    direction: rtl !important;
}

/* Universal RTL override for any element with text-right class */
html[dir="rtl"] .text-right {
    text-align: right !important;
    text-align-last: right !important;
    direction: rtl !important;
}

/* Maximum specificity override for hero description in RTL */
html[dir="rtl"] .hero-section .hero-content div.desc-cta-row p#hero-description.text-right {
    text-align: right !important;
    text-align-last: right !important;
    direction: rtl !important;
}

/* Fallback rule with maximum specificity */
html[dir="rtl"] div#hero-text-block p#hero-description {
    text-align: right !important;
    text-align-last: right !important;
    direction: rtl !important;
}

/* Override inline CSS rules that force left alignment with !important */
@media (min-width: 1024px) {
    html[dir="rtl"] .hero-content {
        text-align: right !important;
    }

    html[dir="rtl"] .hero-section .hero-content .desc-cta-row #hero-description {
        text-align: right !important;
        text-align-last: right !important;
        direction: rtl !important;
    }
}

/* Override mobile inline CSS rules */
@media (max-width: 1023px) {
    html[dir="rtl"] .hero-content .desc-cta-row #hero-description {
        text-align: right !important;
        text-align-last: right !important;
        direction: rtl !important;
    }

    html[dir="rtl"] .hero-content {
        text-align: right !important;
    }
}

/* Override specific responsive breakpoints */
@media (max-width: 1200px) {
    html[dir="rtl"] .hero-content {
        text-align: right !important;
    }
}

@media (max-width: 900px) {
    html[dir="rtl"] .hero-content {
        text-align: right !important;
    }
}

@media (max-width: 640px) {
    html[dir="rtl"] .hero-content {
        text-align: right !important;
    }
}

@media (max-width: 480px) {
    html[dir="rtl"] .hero-content {
        text-align: right !important;
    }
}

/* Override all inline CSS selectors that force left alignment */
html[dir="rtl"] .hero-content,
html[dir="rtl"] .hero-section .hero-content,
html[dir="rtl"] .hero-section .hero-content #hero-text-block,
html[dir="rtl"] .hero-section .hero-content .desc-cta-row,
html[dir="rtl"] .hero-section .hero-content .desc-cta-row #hero-description,
html[dir="rtl"] .hero-content .desc-cta-row #hero-description {
    text-align: right !important;
    text-align-last: right !important;
    direction: rtl !important;
}

/* Nuclear option: Force RTL alignment with maximum specificity */
html[dir="rtl"] body .hero-section .hero-content div.desc-cta-row p#hero-description,
html[dir="rtl"] body .hero-section .hero-content #hero-text-block p#hero-description,
html[dir="rtl"] body div.hero-section div.hero-content div#hero-text-block div.desc-cta-row p#hero-description {
    text-align: right !important;
    text-align-last: right !important;
    direction: rtl !important;
}

/* ===================================================================
   9. RESPONSIVE RTL ADJUSTMENTS
   ================================================================== */

/* Mobile RTL adjustments */
@media (max-width: 768px) {
    html[dir="rtl"] .hero-content {
        text-align: right !important;
    }

    html[dir="rtl"] .hero-content p#hero-description {
        text-align: right !important;
        text-align-last: right !important;
        direction: rtl !important;
    }

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

    html[dir="rtl"] .mobile-content {
        text-align: right !important;
    }
}

/* Tablet RTL adjustments */
@media (min-width: 769px) and (max-width: 1023px) {
    html[dir="rtl"] .tablet-content {
        text-align: right !important;
    }
}

/* Desktop RTL adjustments */
@media (min-width: 1024px) {
    html[dir="rtl"] .desktop-content {
        text-align: right !important;
    }
    
    html[dir="rtl"] .desktop-layout {
        flex-direction: row-reverse !important;
    }
}

/* ===================================================================
   10. ANIMATION RTL ADJUSTMENTS
   ================================================================== */

/* Slide animations for RTL */
html[dir="rtl"] .slide-in-left {
    animation: slideInRight 0.6s ease-out !important;
}

html[dir="rtl"] .slide-in-right {
    animation: slideInLeft 0.6s ease-out !important;
}

/* Fade in animations */
html[dir="rtl"] .fade-in-left {
    animation: fadeInRight 0.8s ease-out !important;
}

html[dir="rtl"] .fade-in-right {
    animation: fadeInLeft 0.8s ease-out !important;
}

/* ===================================================================
   11. BUTTON AND CTA RTL STYLES
   ================================================================== */

/* CTA buttons alignment */
html[dir="rtl"] .cta-button {
    text-align: center !important;
}

/* Button hover effects RTL */
html[dir="rtl"] .btn:hover {
    transform: translateX(-2px) !important;
}

/* Button icons RTL */
html[dir="rtl"] .btn svg {
    margin-left: 0.5rem !important;
    margin-right: 0 !important;
}

/* ===================================================================
   12. GRID AND LAYOUT RTL STYLES
   ================================================================== */

/* Grid layouts RTL */
html[dir="rtl"] .grid-layout {
    direction: rtl !important;
}

/* Flex layouts RTL */
html[dir="rtl"] .flex-layout {
    flex-direction: row-reverse !important;
}

/* Two column layouts RTL */
html[dir="rtl"] .two-column {
    flex-direction: row-reverse !important;
}

/* ===================================================================
   13. TYPOGRAPHY RTL ADJUSTMENTS
   ================================================================== */

/* Headings alignment */
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] h5,
html[dir="rtl"] h6 {
    text-align: right !important;
}

/* Paragraph alignment */
html[dir="rtl"] p {
    text-align: right !important;
}

/* List alignment */
html[dir="rtl"] ul,
html[dir="rtl"] ol {
    text-align: right !important;
    padding-right: 1.5rem !important;
    padding-left: 0 !important;
}

/* ===================================================================
   14. SPECIFIC COMPONENT RTL OVERRIDES
   ================================================================== */

/* Override specific components that need special RTL handling */
html[dir="rtl"] .force-center {
    text-align: center !important;
}

html[dir="rtl"] .force-left {
    text-align: left !important;
}

/* ===================================================================
   15. HERO SECTION VIDEO RTL STYLES
   ================================================================== */

/* Small car video container RTL positioning */
html[dir="rtl"] .small-car-image-container {
    right: auto !important;
    left: 2.5rem !important; /* 40px - same as original right positioning */
}

/* Responsive RTL adjustments for small car video container */
@media (max-width: 900px) {
    html[dir="rtl"] .small-car-image-container {
        left: 1.875rem !important; /* 30px - same as original right positioning */
    }
}

@media (max-width: 640px) {
    html[dir="rtl"] .small-car-image-container {
        left: 1rem !important; /* 16px - same as original right positioning */
    }
}

@media (max-width: 480px) {
    html[dir="rtl"] .small-car-image-container {
        left: 0.75rem !important; /* 12px - same as original right positioning */
    }
}

@media (max-width: 375px) {
    html[dir="rtl"] .small-car-image-container {
        left: 0.625rem !important; /* 10px - same as original right positioning */
    }
}

@media (max-width: 340px) {
    html[dir="rtl"] .small-car-image-container {
        left: 0.5rem !important; /* 8px - same as original right positioning */
    }
}

/* Image captions RTL */
html[dir="rtl"] .image-caption {
    text-align: right !important;
}

/* Quote blocks RTL */
html[dir="rtl"] blockquote {
    text-align: right !important;
    border-right: 4px solid #172154 !important;
    border-left: none !important;
    padding-right: 1rem !important;
    padding-left: 0 !important;
}

/* ===================================================================
   16. HOMEPAGE MOBILE LAYOUT STABILITY FIXES FOR EXTREMELY NARROW SCREENS
   ================================================================== */





/* Additional homepage stability fixes for screens below 320px */
@media (max-width: 320px) {
  /* Further reduce homepage spacing for very narrow screens */
  .hero-content {
    left: 0.5rem !important;
    right: 0.5rem !important;
    bottom: 0.5rem !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }
  
  html[dir="rtl"] .hero-content {
    right: 0.5rem !important;
    left: 0.5rem !important;
    bottom: 0.5rem !important;
    padding-right: 0.5rem !important;
    padding-left: 0.5rem !important;
  }
  
  /* Ensure homepage text remains readable */
  #hero-title {
    font-size: 14px !important;
    line-height: 18px !important;
  }
  
  html[dir="rtl"] #hero-title {
    font-size: 14px !important;
    line-height: 18px !important;
  }
  
  .hero-content h1 {
    font-size: 16px !important;
  }
  
  html[dir="rtl"] .hero-content h1 {
    font-size: 16px !important;
  }
  
  .hero-content p {
    font-size: 12px !important;
  }
  
  html[dir="rtl"] .hero-content p {
    font-size: 12px !important;
  }
  
  /* Force homepage single column layout */
  .car-models-compact {
    flex-direction: column !important;
  }
  
  html[dir="rtl"] .car-models-compact {
    flex-direction: column !important;
  }
  
  /* Ensure homepage buttons remain tappable */
  .cta-button, #explore-link {
    min-height: 44px !important;
    min-width: 120px !important;
  }
  
  html[dir="rtl"] .cta-button, html[dir="rtl"] #explore-link {
    min-height: 44px !important;
    min-width: 120px !important;
  }
  
  /* Prevent homepage horizontal scrolling */
  .hero-section {
    overflow: hidden !important;
  }
  
  html[dir="rtl"] .hero-section {
    overflow: hidden !important;
  }
  
  /* Force homepage mobile menu to take full width */
  .small-car-image-container {
    width: 80px !important;
    height: auto !important;
  }
  
  html[dir="rtl"] .small-car-image-container {
    width: 80px !important;
    height: auto !important;
  }
}

/* ===================================================================
   6. CAR MODELS SECTION RTL STYLES
   ================================================================== */

/* Main container RTL styles */
html[dir="rtl"] .rtl-car-models {
    direction: rtl !important;
}

/* Desktop header RTL styles */
html[dir="rtl"] .rtl-header-desktop {
    flex-direction: row-reverse !important;
}

html[dir="rtl"] .rtl-title {
    text-align: right !important;
    direction: rtl !important;
    order: 2 !important;
}

html[dir="rtl"] .rtl-subtitle {
    text-align: right !important;
    direction: rtl !important;
}

html[dir="rtl"] .rtl-subtitle-container {
    justify-content: flex-start !important;
    order: 1 !important;
}

/* Mobile header RTL styles */
html[dir="rtl"] .rtl-header-mobile {
    align-items: flex-end !important;
    text-align: right !important;
    direction: rtl !important;
}

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

/* Main content layout RTL - CRITICAL: This controls the main layout mirroring */
@media (min-width: 768px) {
    html[dir="rtl"] .rtl-main-content {
        flex-direction: row-reverse !important;
    }

    /* Force the main container to use RTL layout with high specificity */
    html[dir="rtl"] .car-models-compact > div:last-child {
        flex-direction: row-reverse !important;
    }

    /* CRITICAL: Force navigation container to RIGHT side for Arabic */
    html[dir="rtl"] .car-models-compact .rtl-nav-container {
        order: 2 !important;
        margin-left: auto !important;
        margin-right: 0 !important;
    }

    /* CRITICAL: Force model info container to LEFT side for Arabic */
    html[dir="rtl"] .car-models-compact .rtl-model-info {
        order: 1 !important;
        margin-right: auto !important;
        margin-left: 0 !important;
    }

    /* Force RTL main content to use row-reverse with maximum specificity */
    html[dir="rtl"] .rtl-main-content {
        flex-direction: row-reverse !important;
    }

    /* Target all flex containers within car models for RTL */
    html[dir="rtl"] .car-models-compact .rtl-main-content {
        flex-direction: row-reverse !important;
    }
}

/* Navigation container RTL styles */
html[dir="rtl"] .rtl-nav-container {
    direction: rtl !important;
}

html[dir="rtl"] .rtl-nav-tabs {
    text-align: right !important;
    direction: rtl !important;
}

html[dir="rtl"] .rtl-nav-item {
    direction: rtl !important;
}

html[dir="rtl"] .rtl-nav-button {
    text-align: right !important;
    direction: rtl !important;
    flex-direction: row-reverse !important;
}

html[dir="rtl"] .rtl-nav-arrow {
    margin-right: 0 !important;
    margin-left: 12px !important;
    transform: scaleX(-1) !important;
}

/* Mobile navigation RTL styles */
html[dir="rtl"] .rtl-mobile-nav {
    direction: rtl !important;
}

html[dir="rtl"] .rtl-mobile-tabs {
    direction: rtl !important;
}

html[dir="rtl"] .rtl-mobile-tab-item {
    direction: rtl !important;
}

html[dir="rtl"] .rtl-mobile-tab-button {
    direction: rtl !important;
}

/* Model info section RTL styles */
html[dir="rtl"] .rtl-model-info {
    align-items: flex-end !important;
    text-align: right !important;
    direction: rtl !important;
}

@media (min-width: 768px) {
    html[dir="rtl"] .rtl-model-info {
        align-items: flex-end !important;
        text-align: right !important;
    }
}

html[dir="rtl"] .rtl-model-header {
    text-align: right !important;
    direction: rtl !important;
}

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

/* Price section RTL styles */
html[dir="rtl"] .rtl-price-section {
    text-align: right !important;
    direction: rtl !important;
}

html[dir="rtl"] .rtl-price-label,
html[dir="rtl"] .rtl-price-value {
    text-align: right !important;
    direction: rtl !important;
}

/* Paint section RTL styles */
html[dir="rtl"] .rtl-paint-section {
    text-align: right !important;
    direction: rtl !important;
}

html[dir="rtl"] .rtl-paint-label {
    text-align: right !important;
    direction: rtl !important;
}

html[dir="rtl"] .rtl-paint-container-wrapper {
    justify-content: flex-start !important;
}

@media (min-width: 768px) {
    html[dir="rtl"] .rtl-paint-container-wrapper {
        justify-content: flex-start !important;
    }
}

html[dir="rtl"] .rtl-paint-container {
    direction: rtl !important;
}

/* Mobile arrows RTL styles */
html[dir="rtl"] .rtl-mobile-arrows {
    flex-direction: row-reverse !important;
}

html[dir="rtl"] .rtl-arrow-prev,
html[dir="rtl"] .rtl-arrow-next {
    transform: scaleX(-1) !important;
}

/* ===================================================================
   7. TECHNOLOGY SECTION RTL STYLES
   ================================================================== */

/* Technology header RTL styles - CENTERED like English */
html[dir="rtl"] .rtl-header-section {
    text-align: center !important;
    direction: rtl !important;
}

html[dir="rtl"] .rtl-header-section .tech-label,
html[dir="rtl"] .rtl-header-section .tech-main-title {
    text-align: center !important;
    direction: rtl !important;
}

/* Technology carousel - NO RTL modifications, use English version exactly */

/* Technology mobile caption RTL styles */
html[dir="rtl"] .tech-mobile-block.rtl {
    text-align: right !important;
    direction: rtl !important;
}

html[dir="rtl"] .tech-subtitle.rtl,
html[dir="rtl"] .tech-body.rtl {
    text-align: right !important;
    direction: rtl !important;
}

/* Technology section general RTL */
html[dir="rtl"] .tech-section.rtl {
    direction: rtl !important;
}

html[dir="rtl"] .tech-section.rtl * {
    direction: rtl !important;
}

/* ===================================================================
   TECHNOLOGY CAROUSEL - CLEAN SOLUTION (NO RTL OVERRIDES NEEDED)
   ================================================================== */

/* The carousel CSS in technology1.html handles both English and Arabic
   No additional RTL-specific rules needed here */

/* All technology carousel styling is now handled in technology1.html */

/* Technology header title positioning - CENTERED like English */
html[dir="rtl"] .tech-header-title.rtl {
    text-align: center !important;
}

html[dir="rtl"] .tech-label.rtl {
    text-align: center !important;
}

html[dir="rtl"] .tech-main-title.rtl {
    text-align: center !important;
}

/* ===================================================================
   CRITICAL RTL LAYOUT OVERRIDES - Maximum Specificity
   ================================================================== */

/* MAIN RTL LAYOUT CLASS - This is the primary override */
@media (min-width: 768px) {
    html[dir="rtl"] .car-models-rtl-layout {
        flex-direction: row-reverse !important;
    }
}

/* Force main content area to use row-reverse for RTL with !important */
@media (min-width: 768px) {
    html[dir="rtl"] .car-models-compact [class*="flex"][class*="md:flex-row"] {
        flex-direction: row-reverse !important;
    }

    /* Override Tailwind's md:flex-row for RTL */
    html[dir="rtl"] .car-models-compact .rtl-main-content {
        flex-direction: row-reverse !important;
    }

    /* Force navigation to appear on right side (order: 3) */
    html[dir="rtl"] .car-models-compact .rtl-nav-container {
        order: 3 !important;
        margin-left: auto !important;
        margin-right: 0 !important;
    }

    /* Force model info to appear on left side (order: 1) */
    html[dir="rtl"] .car-models-compact .rtl-model-info {
        order: 1 !important;
        margin-right: auto !important;
        margin-left: 0 !important;
    }

    /* Additional override for any flex container in car models */
    html[dir="rtl"] .car-models-compact > div {
        flex-direction: row-reverse !important;
    }

    /* Specific override for the main content container */
    html[dir="rtl"] .car-models-compact .car-models-rtl-layout {
        flex-direction: row-reverse !important;
    }

    /* CRITICAL: Ensure car image container stays in center (order: 2) */
    html[dir="rtl"] .car-models-compact .car-image-container {
        order: 2 !important;
        flex: 1 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: relative !important;
    }
}