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

/* Apply RTL direction to HTML when Arabic is selected */
html[dir="rtl"] {
    direction: rtl;
}

/* Prevent horizontal overflow on mobile */
html[dir="rtl"] body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
}

html[dir="rtl"] .page-wrapper {
    overflow-x: hidden !important;
    max-width: 100vw !important;
}

html[dir="rtl"] .container,
html[dir="rtl"] .container-fluid {
    overflow-x: hidden !important;
    max-width: 100% !important;
}

html[dir="rtl"] .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
}

/* Exclude specific sections from RTL */
html[dir="rtl"] #services,
html[dir="rtl"] #partners,
html[dir="rtl"] #contact,
html[dir="rtl"] .testimonials-slider-wrapper,
html[dir="rtl"] .newsletter-form,
html[dir="rtl"] .newsletter-section,
html[dir="rtl"] .tv-process-section,
html[dir="rtl"] .tv-marquee-section,
html[dir="rtl"] .tv-feature-section,
html[dir="rtl"] .tv-counter-section {
    direction: ltr;
}

/* Keep these sections' children in LTR as well */
html[dir="rtl"] #services *,
html[dir="rtl"] #partners *,
html[dir="rtl"] #contact *,
html[dir="rtl"] .testimonials-slider-wrapper *,
html[dir="rtl"] .newsletter-form *,
html[dir="rtl"] .newsletter-section *,
html[dir="rtl"] .tv-process-section *,
html[dir="rtl"] .tv-marquee-section *,
html[dir="rtl"] .tv-feature-section *,
html[dir="rtl"] .tv-counter-section * {
    direction: ltr;
}

/* Header RTL Styles */
html[dir="rtl"] .tv-header .header-top {
    direction: rtl;
}

html[dir="rtl"] .tv-header .header-top .header-links {
    flex-direction: row-reverse;
}

html[dir="rtl"] .tv-header .header-top .header-links li {
    margin-left: 30px;
    margin-right: 0;
}

html[dir="rtl"] .tv-header .header-top .header-links li i {
    margin-right: 0;
    margin-left: 8px;
}

html[dir="rtl"] .tv-header .header-top .social-links {
    flex-direction: row-reverse;
}

html[dir="rtl"] .tv-header .header-top .social-links a {
    margin-left: 15px;
    margin-right: 0;
}

/* Navigation RTL */
html[dir="rtl"] .main-menu > ul {
    flex-direction: row-reverse;
}

html[dir="rtl"] .main-menu > ul > li {
    margin-left: 40px;
    margin-right: 0;
}

html[dir="rtl"] .main-menu > ul > li:first-child {
    margin-left: 40px !important;
    margin-right: 0 !important;
}

html[dir="rtl"] .main-menu ul li a {
    text-align: right;
}

/* Logo RTL */
html[dir="rtl"] .header-logo {
    margin-right: 0;
    margin-left: auto;
}

/* Language Switcher RTL */
html[dir="rtl"] .language-switcher {
    margin-left: 0;
    margin-right: 20px;
}

/* Sidebar RTL */
html[dir="rtl"] .mobile-menu {
    right: auto;
    left: -300px;
}

html[dir="rtl"] .mobile-menu.active {
    left: 0;
}

html[dir="rtl"] .mobile-menu ul li a {
    text-align: right;
    padding-right: 20px;
    padding-left: 40px;
}

html[dir="rtl"] .mobile-menu .close-btn {
    right: auto;
    left: 20px;
}

/* Hero Section RTL */
html[dir="rtl"] .hero-content {
    text-align: right;
}

html[dir="rtl"] .hero-content .sub-title img {
    margin-right: 0;
    margin-left: 10px;
}

html[dir="rtl"] .slide-number {
    left: auto;
    right: 50px;
}

/* Hero Section - Prevent Overflow */
html[dir="rtl"] .tv-hero-section {
    overflow-x: hidden !important;
    max-width: 100% !important;
}

html[dir="rtl"] .hero-inner {
    overflow-x: hidden !important;
    max-width: 100% !important;
}

html[dir="rtl"] .hero-slider {
    overflow-x: hidden !important;
    max-width: 100% !important;
}

html[dir="rtl"] .hero-area {
    overflow-x: hidden !important;
    max-width: 100% !important;
}

/* Hero Decorative Layers - Flip to opposite side in RTL */
html[dir="rtl"] .hero-area .p-bottom-left {
    left: auto !important;
    right: 0 !important;
}

html[dir="rtl"] .hero-area .p-bottom-right {
    right: auto !important;
    left: 0 !important;
}

html[dir="rtl"] .hero-area .p-top-left {
    left: auto !important;
    right: 0 !important;
}

html[dir="rtl"] .hero-area .p-top-right {
    right: auto !important;
    left: 0 !important;
}

/* Video Box RTL - Prevent overflow */
html[dir="rtl"] .video-box {
    right: auto;
    left: 0;
}

@media (max-width: 991px) {
    html[dir="rtl"] .video-box {
        left: 20px !important;
        right: auto !important;
    }
}

/* Prevent any negative positioning from causing overflow */
html[dir="rtl"] * {
    max-width: 100%;
}

html[dir="rtl"] img {
    max-width: 100%;
    height: auto;
}

/* Hero Gradient Overlay - Flip gradient direction in RTL */
html[dir="rtl"] .hero-area::before,
html[dir="rtl"] .hero-area::after,
html[dir="rtl"] .hero-inner::before,
html[dir="rtl"] .hero-inner::after,
html[dir="rtl"] .bg.image::before,
html[dir="rtl"] .bg.image::after {
    transform: scaleX(-1) !important;
}

/* Flip any background gradients in hero section */
html[dir="rtl"] .hero-area,
html[dir="rtl"] .hero-inner {
    direction: ltr; /* Keep content LTR but flip visual elements */
}

html[dir="rtl"] .hero-content {
    direction: rtl; /* Content should be RTL */
}

/* Vision & Mission RTL */
html[dir="rtl"] .tv-about-section .row {
    flex-direction: row-reverse;
}

/* Features RTL */
html[dir="rtl"] .tv-feature-section .row {
    flex-direction: row-reverse;
}

html[dir="rtl"] .feature-item {
    text-align: right;
}

html[dir="rtl"] .feature-item .icon {
    margin-right: 0;
    margin-left: 20px;
}

/* Footer RTL */
html[dir="rtl"] .footer-section .row {
    flex-direction: row-reverse;
}

html[dir="rtl"] .footer-section ul {
    text-align: right;
}

html[dir="rtl"] .footer-section ul li {
    text-align: right;
}

html[dir="rtl"] .footer-section .contact-item i {
    margin-right: 0;
    margin-left: 10px;
}

/* General Text Alignment RTL */
html[dir="rtl"] p,
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;
}

/* Buttons RTL */
html[dir="rtl"] .theme-btn {
    flex-direction: row-reverse;
}

html[dir="rtl"] .theme-btn .arrow-all {
    margin-left: 0;
    margin-right: 10px;
}

/* Icons RTL */
html[dir="rtl"] .icon {
    margin-right: 0;
    margin-left: 15px;
}

/* Lists RTL */
html[dir="rtl"] ul,
html[dir="rtl"] ol {
    padding-right: 20px;
    padding-left: 0;
}

/* About Section RTL */
html[dir="rtl"] .tv-about-section .about-content {
    text-align: right;
}

/* Location Section RTL */
html[dir="rtl"] .tv-location-section .row {
    flex-direction: row-reverse;
}

html[dir="rtl"] .location-item {
    text-align: right;
}

html[dir="rtl"] .location-item .icon {
    margin-right: 0;
    margin-left: 15px;
}

/* Decorative Shapes - Flip to opposite side in RTL (except excluded sections) */
html[dir="rtl"] .p-bottom-left:not(#services .p-bottom-left):not(#contact .p-bottom-left) {
    left: auto !important;
    right: 0 !important;
}

html[dir="rtl"] .p-bottom-right:not(#services .p-bottom-right):not(#contact .p-bottom-right) {
    right: auto !important;
    left: 0 !important;
}

html[dir="rtl"] .p-top-left:not(#services .p-top-left) {
    left: auto !important;
    right: 0 !important;
}

html[dir="rtl"] .p-top-right:not(#services .p-top-right) {
    right: auto !important;
    left: 0 !important;
}

html[dir="rtl"] .p-top-center {
    /* Keep centered */
}

/* Shape mockups with data attributes */
html[dir="rtl"] .shape-mockup[data-left] {
    left: auto !important;
    right: var(--shape-right, 15%) !important;
}

html[dir="rtl"] .shape-mockup[data-right] {
    right: auto !important;
    left: var(--shape-left, 15%) !important;
}

/*========================================
  Mobile Responsive RTL Styles
==========================================*/

/* Mobile Menu RTL Fixes */
@media (max-width: 991px) {
    /* Prevent horizontal overflow on mobile */
    html[dir="rtl"] body {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100vw !important;
    }

    html[dir="rtl"] .page-wrapper {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100vw !important;
    }

    html[dir="rtl"] section {
        overflow-x: hidden !important;
        max-width: 100% !important;
    }

    html[dir="rtl"] .container,
    html[dir="rtl"] .container-fluid,
    html[dir="rtl"] .container2 {
        overflow-x: hidden !important;
        max-width: 100% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    html[dir="rtl"] .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: 100% !important;
    }

    html[dir="rtl"] [class*="col-"] {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    /* Fix outer-box and margin classes on mobile */
    html[dir="rtl"] .outer-box,
    html[dir="rtl"] .hero-inner,
    html[dir="rtl"] .mx-30,
    html[dir="rtl"] .mx-60,
    html[dir="rtl"] .mx-120,
    html[dir="rtl"] .ml-mx-0 {
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: 100% !important;
    }

    /* Mobile Menu Wrapper */
    html[dir="rtl"] .mobile-menu-wrapper .mobile-menu-area {
        left: auto;
        right: 0;
        transform: translateX(100%);
    }

    html[dir="rtl"] .mobile-menu-wrapper.body-visible .mobile-menu-area {
        transform: translateX(0);
    }

    /* Mobile Menu Toggle Button */
    html[dir="rtl"] .mobile-menu-wrapper .menu-toggle {
        right: auto;
        left: 20px;
    }

    /* Mobile Menu Logo */
    html[dir="rtl"] .mobile-menu-wrapper .mobile-logo {
        text-align: right;
    }

    /* Mobile Menu Items */
    html[dir="rtl"] .mobile-menu ul li a {
        text-align: right;
        padding-right: 20px;
        padding-left: 50px;
    }

    /* Mobile Menu Expand Icon */
    html[dir="rtl"] .mobile-menu .submenu-item-has-children > a .mean-expand-class {
        right: auto;
        left: 0;
    }

    /* Mobile Menu Submenu Items */
    html[dir="rtl"] .mobile-menu ul li ul li {
        padding-left: 0;
        padding-right: 20px;
    }

    /* Header on Mobile */
    html[dir="rtl"] .tv-header .menu-area .nav-outer {
        flex-direction: row-reverse;
    }

    html[dir="rtl"] .tv-header .header-logo {
        margin-left: 0;
        margin-right: 0;
    }

    /* Language Switcher on Mobile */
    html[dir="rtl"] .language-switcher {
        margin-right: 10px;
        margin-left: 0;
    }

    /* Mobile Header Right Wrapper */
    html[dir="rtl"] .header-right-wrapper {
        flex-direction: row-reverse;
    }

    html[dir="rtl"] .header-right-wrapper .outer-box {
        flex-direction: row-reverse;
    }
}

/* Tablet and Below (max-width: 767px) */
@media (max-width: 767px) {
    /* Hero Section Mobile */
    html[dir="rtl"] .hero-content {
        text-align: right;
        padding-right: 20px;
        padding-left: 20px;
    }

    html[dir="rtl"] .slide-number {
        right: 20px;
        left: auto;
    }

    /* Section Titles */
    html[dir="rtl"] .sec-title,
    html[dir="rtl"] .title-wrap {
        text-align: center;
    }

    /* Buttons on Mobile */
    html[dir="rtl"] .theme-btn {
        flex-direction: row-reverse;
    }

    /* Footer on Mobile */
    html[dir="rtl"] .footer-section .row {
        flex-direction: column;
    }

    html[dir="rtl"] .footer-section .footer-widget {
        text-align: right;
    }

    /* About Section Mobile */
    html[dir="rtl"] .tv-about-section .row {
        flex-direction: column;
    }

    html[dir="rtl"] .tv-about-section .about-content {
        text-align: right;
        padding-right: 15px;
        padding-left: 15px;
    }

    /* Location Section Mobile */
    html[dir="rtl"] .tv-location-section .row {
        flex-direction: column;
    }

    html[dir="rtl"] .location-item {
        text-align: right;
    }

    /* Header Top Mobile */
    html[dir="rtl"] .tv-header .header-top {
        text-align: right;
    }

    html[dir="rtl"] .tv-header .header-top .header-links {
        flex-direction: column;
        align-items: flex-end;
    }

    html[dir="rtl"] .tv-header .header-top .header-links li {
        margin-left: 0;
        margin-right: 0;
        margin-bottom: 10px;
    }

    html[dir="rtl"] .tv-header .header-top .social-links {
        justify-content: flex-end;
    }
}

/* Mobile Small (max-width: 575px) */
@media (max-width: 575px) {
    /* Mobile Menu Width Adjustment */
    html[dir="rtl"] .mobile-menu-wrapper .mobile-menu-area {
        max-width: 270px;
    }

    /* Hero Content Mobile Small */
    html[dir="rtl"] .hero-content {
        padding-right: 15px;
        padding-left: 15px;
    }

    html[dir="rtl"] .hero-content h1,
    html[dir="rtl"] .hero-content h2 {
        font-size: 28px;
        line-height: 1.3;
    }

    /* Language Switcher Mobile Small */
    html[dir="rtl"] .language-switcher {
        margin-right: 5px;
    }

    html[dir="rtl"] .lang-switcher-btn {
        padding: 8px 12px;
        font-size: 12px;
    }

    /* Slide Number Mobile Small */
    html[dir="rtl"] .slide-number {
        right: 15px;
        font-size: 14px;
    }

    /* Section Padding Mobile Small */
    html[dir="rtl"] .tv-about-section,
    html[dir="rtl"] .tv-location-section,
    html[dir="rtl"] .tv-feature-section {
        padding-right: 15px;
        padding-left: 15px;
    }
}

/* Mobile Extra Small (max-width: 430px) */
@media (max-width: 430px) {
    /* Mobile Menu Extra Small */
    html[dir="rtl"] .mobile-menu-wrapper .mobile-menu-area {
        max-width: 250px;
    }

    html[dir="rtl"] .mobile-menu ul li a {
        font-size: 16px;
        padding-right: 15px;
        padding-left: 40px;
    }

    /* Hero Content Extra Small */
    html[dir="rtl"] .hero-content h1,
    html[dir="rtl"] .hero-content h2 {
        font-size: 24px;
    }

    html[dir="rtl"] .hero-content p {
        font-size: 14px;
    }

    /* Language Switcher Extra Small */
    html[dir="rtl"] .current-lang {
        display: none;
    }

    html[dir="rtl"] .lang-switcher-btn {
        padding: 8px 10px;
    }
}

/* Mobile Very Small (max-width: 390px) */
@media (max-width: 390px) {
    html[dir="rtl"] .mobile-menu-wrapper .mobile-menu-area {
        max-width: 230px;
    }

    html[dir="rtl"] .hero-content h1,
    html[dir="rtl"] .hero-content h2 {
        font-size: 22px;
    }

    html[dir="rtl"] .slide-number {
        right: 10px;
        font-size: 12px;
    }
}

/* Mobile Smallest (max-width: 360px) */
@media (max-width: 360px) {
    html[dir="rtl"] .mobile-menu-wrapper .mobile-menu-area {
        max-width: 220px;
    }

    html[dir="rtl"] .hero-content h1,
    html[dir="rtl"] .hero-content h2 {
        font-size: 20px;
    }

    html[dir="rtl"] .mobile-menu ul li a {
        font-size: 15px;
    }
}