/* RTL and LTR support styles */

/* General styles */
.rtl-container {
    font-family: 'Cairo', sans-serif;
    text-align: right;
}

.ltr-container {
    font-family: 'Poppins', sans-serif;
    text-align: left;
}

/* Flexbox direction adjustment */
html[dir="rtl"] .flex-row {
    flex-direction: row-reverse;
}

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

/* Adjustments for margins/paddings */
html[dir="rtl"] .me-2 {
    margin-right: 0 !important;
    margin-left: 0.5rem !important;
}

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

html[dir="rtl"] .me-3 {
    margin-right: 0 !important;
    margin-left: 1rem !important;
}

html[dir="rtl"] .ms-3 {
    margin-left: 0 !important;
    margin-right: 1rem !important;
}

html[dir="rtl"] .ps-3 {
    padding-left: 0 !important;
    padding-right: 1rem !important;
}

html[dir="rtl"] .pe-3 {
    padding-right: 0 !important;
    padding-left: 1rem !important;
}

/* Float adjustments */
html[dir="rtl"] .float-start {
    float: right !important;
}

html[dir="rtl"] .float-end {
    float: left !important;
}

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

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

/* Blog post specific adjustments */
html[dir="rtl"] .article-content ul,
html[dir="rtl"] .article-content ol {
    padding-left: 0;
    padding-right: 2rem;
}

html[dir="rtl"] .bi-arrow-right-circle:before {
    content: "\f12f";
    /* Bootstrap icon code for left arrow */
}

html[dir="rtl"] .bi-arrow-left-circle:before {
    content: "\f130";
    /* Bootstrap icon code for right arrow */
}

html[dir="rtl"] .bi-arrow-right-short:before {
    content: "\f12b";
    /* Bootstrap icon code for left arrow short */
}

html[dir="rtl"] .bi-arrow-left-short:before {
    content: "\f12c";
    /* Bootstrap icon code for right arrow short */
}

/* Form controls */
html[dir="rtl"] .form-check {
    padding-left: 0;
    padding-right: 1.5em;
}

html[dir="rtl"] .form-check .form-check-input {
    float: right;
    margin-left: 0;
    margin-right: -1.5em;
}

/* Mobile responsiveness */
@media (max-width: 768px) {

    .rtl-container,
    .ltr-container {
        padding: 0 15px;
    }
}