/*
===================================================================
RTL (Right-to-Left) SUPPORT FOR ARABIC
===================================================================
*/

/* Set direction for Arabic */
html[lang="ar"] {
    direction: rtl;
}

html[lang="ar"] body {
    text-align: right;
}

/* Navigation */
html[lang="ar"] nav .menu-cnt {
    direction: rtl;
}

html[lang="ar"] nav .menu-cnt ul {
    float: right;
}

html[lang="ar"] nav .menu-brand {
    float: right;
}

html[lang="ar"] nav .menu-right {
    float: left;
}

html[lang="ar"] .menu-btn {
    right: auto;
    left: 20px;
}

/* Dropdowns */
html[lang="ar"] .dropdown ul {
    right: auto;
    left: 0;
}

/* Text alignment */
html[lang="ar"] .align-left {
    text-align: right;
}

html[lang="ar"] .align-right {
    text-align: left;
}

/* Margins and padding adjustments */
html[lang="ar"] .margin-negative-left-20 {
    margin-left: 0;
    margin-right: -20px;
}

html[lang="ar"] .margin-negative-20 {
    margin-left: -20px;
    margin-right: 0;
}

/* Buttons */
html[lang="ar"] .btn-text:after {
    margin-left: 0;
    margin-right: 10px;
    transform: rotate(180deg);
}

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

html[lang="ar"] .icon-list li:before {
    right: -25px;
    left: auto;
}

/* Grid items */
html[lang="ar"] .grid-item {
    text-align: right;
}

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

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

html[lang="ar"] .footer-bar .container {
    flex-direction: row-reverse;
}

/* Language selector */
html[lang="ar"] .language-selector {
    margin-left: 0;
    margin-right: 20px;
}

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

/* Specific fixes for images */
html[lang="ar"] .col-lg-5 {
    text-align: left;
}

html[lang="ar"] .col-lg-6 img {
    margin-left: 20px;
    margin-right: -20px;
}

/* Row reverse for alternating content */
html[lang="ar"] .row.invert-md {
    flex-direction: row-reverse;
}

@media (max-width: 768px) {
    html[lang="ar"] .row.invert-md {
        flex-direction: column;
    }
}