/* RTL overrides for Arabic version */
html {
    scroll-behavior: smooth;
}

/* Light Mode Support for RTL */
html[data-theme="light"] {
    /* Light mode styles are handled by main style.css variables */
    /* Additional RTL-specific light mode overrides can be added here if needed */
}

html[dir="rtl"] body {
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] .navbar-nav {
    gap: 1.5rem;
}

html[dir="rtl"] .navbar-nav .nav-link {
    text-align: right;
    width: 100%;
}

html[dir="rtl"] .navbar-brand {
    margin-right: 0;
    margin-left: 0;
}

html[dir="rtl"] .ml-2 {
    margin-left: 0 !important;
    margin-right: 0px !important;
}

html[dir="rtl"] .mr-2 {
    margin-right: 0 !important;
    margin-left: 12px !important;
}

html[dir="rtl"] .mr-4 {
    margin-right: 0 !important;
    margin-left: 35px !important;
}

html[dir="rtl"] ul li img {
    margin-right: 0;
    margin-left: 12px;
}

html[dir="rtl"] .bannar .description,
html[dir="rtl"] .bannar .title-line,
html[dir="rtl"] h1.header-title {
    text-align: right;
}

html[dir="rtl"] .title::after {
    left: 47%;
    right: auto;
}

html[dir="rtl"] .why-choose-item,
html[dir="rtl"] .why-choose-item-title,
html[dir="rtl"] .why-choose-item-description {
    text-align: right;
}

html[dir="rtl"] .why-choose-item-title {
    font-weight: 500;
}

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

html[dir="rtl"] .slider-btn-prev {
    right: auto;
    left: 20px;
}

html[dir="rtl"] .slider-btn-next {
    left: auto;
    right: 20px;
}

@media (max-width: 767px) {
    html[dir="rtl"] .slider-btn-prev {
        right: -25px;
        left: auto;
    }

    html[dir="rtl"] .slider-btn-next {
        left: -25px;
        right: auto;
    }

    .dark-mode {
        right: auto;
        left: 90px;
    }
    
}

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

html[dir="rtl"] .contact-textarea {
    direction: rtl;
}

html[dir="rtl"] .contact-input::placeholder,
html[dir="rtl"] .contact-textarea::placeholder {
    text-align: right;
}

html[dir="rtl"] .footer-brand,
html[dir="rtl"] .footer-description,
html[dir="rtl"] .footer-heading,
html[dir="rtl"] .footer-links,
html[dir="rtl"] .footer-bottom {
    text-align: right;
}

html[dir="rtl"] .footer-bottom {
    align-items: flex-start;
}

html[dir="rtl"] .footer-links a {
    padding-right: 0;
}

html[dir="rtl"] .footer-social {
    justify-content: flex-start;
    max-width: 200px;
    flex-wrap: wrap;
}

html[dir="rtl"] .img-container.img-container-2 {
    right: 145px;
}

/* Phone Animation - Floating Effect for RTL */
@keyframes floatUpDown {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px);
    }
}

@keyframes floatDownUp {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(20px);
    }
}

html[dir="rtl"] .img-container {
    animation: floatUpDown 3s ease-in-out infinite;
}

html[dir="rtl"] .img-container.img-container-2 {
    animation: floatDownUp 3s ease-in-out infinite;
    animation-delay: 0.5s;
}

/* Scroll Animation Styles for RTL */
html[dir="rtl"] .fade-in-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

html[dir="rtl"] .fade-in-up.visible {
    opacity: 1;
    transform: translateY(0);
}

html[dir="rtl"] .fade-in-left {
    opacity: 0;
    transform: translateX(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

html[dir="rtl"] .fade-in-left.visible {
    opacity: 1;
    transform: translateX(0);
}

html[dir="rtl"] .fade-in-right {
    opacity: 0;
    transform: translateX(-30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

html[dir="rtl"] .fade-in-right.visible {
    opacity: 1;
    transform: translateX(0);
}

html[dir="rtl"] .quick-links {
    padding-left: auto;
    padding-right: 100px;
}

.img-container.img-container-2 img {
    height: 100%;
}




@media (min-width: 767px) and (max-width: 1024px) {
    .dark-mode {
        right: auto;
        left: 15%;
    }

    .img-container.img-container-2 {
        right: auto;
        left: -11%;
    }

    .title::after {
        left: 45% !important;
    }

    .slider-dots {
        margin-top: 82px;
    }


}