body {
    direction: rtl;
    text-align: right;
    letter-spacing: normal !important;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    letter-spacing: 0 !important;
}

.section-subtitle {
    letter-spacing: 0 !important;
}

/* Quranic verse or traditional text styling helper */
.quran-text,
.arabic-serif {
    line-height: 2.2;
}

/* ==========================================================================
   2. Spacing & Directional Fixes
   ========================================================================== */
.text-start {
    text-align: right !important;
}

.text-end {
    text-align: left !important;
}

.me-auto {
    margin-left: auto !important;
    margin-right: 0 !important;
}

.ms-auto {
    margin-right: auto !important;
    margin-left: 0 !important;
}

/* ==========================================================================
   3. Theme-Specific Components (style.css Overrides)
   ========================================================================== */

/* Badges & Absolute Placements */
.course-badge,
.popular-badge {
    right: auto !important;
    left: 20px !important;
}

.blog-category {
    left: auto !important;
    right: 16px !important;
}

.outcome-number {
    left: auto !important;
    right: 20px !important;
}

.quote-icon {
    right: auto !important;
    left: 30px !important;
    transform: scaleX(-1);
}

.lightbox-close {
    right: auto !important;
    left: 0 !important;
}

/* Cards & Hover Borders */
.why-card,
.learn-card {
    border-left: none !important;
    border-right: 4px solid transparent !important;
}

.why-card:hover {
    border-right-color: var(--secondary-color) !important;
    transform: translateX(-5px) !important;
}

.learn-card::before {
    left: auto !important;
    right: 0 !important;
}

.learn-card:hover {
    transform: translateX(-10px) !important;
}

.about-image::after,
.story-image::after {
    left: auto !important;
    right: 20px !important;
    top: 20px !important;
    bottom: -20px !important;
    border-radius: 20px !important;
}

/* Comments */
.comment-body::before {
    left: auto !important;
    right: -7px !important;
    border-color: transparent transparent transparent #f9f9f9 !important;
}

.comment-list li:before {
    left: auto !important;
    right: 0 !important;
}

.children {
    margin-left: 0 !important;
    margin-right: 60px !important;
}

@media (max-width: 767px) {
    .children {
        margin-right: 30px !important;
    }
}

/* Floating Action Buttons */
.floating-buttons {
    right: auto !important;
    left: 25px !important;
}

.floating-btn-tooltip {
    right: auto !important;
    left: 75px !important;
}

.floating-btn-tooltip::after {
    right: auto !important;
    left: -6px !important;
    border-left: none !important;
    border-right: 6px solid rgba(0, 0, 0, 0.85) !important;
    border-top: 6px solid transparent !important;
    border-bottom: 6px solid transparent !important;
}

.floating-btn:hover .floating-btn-tooltip {
    left: 80px !important;
    right: auto !important;
}

.notification-badge {
    right: auto !important;
    left: -5px !important;
}

.back-to-top {
    left: auto !important;
    right: 30px !important;
}

/* ==========================================================================
   4. Icons & Motion Flips
   ========================================================================== */
.read-more:hover i,
.blog-card:hover .read-more i {
    transform: translateX(-5px) !important;
}

/* Flip chevron and arrow icons for RTL navigation */
.bi-arrow-right,
.bi-chevron-right,
.bi-arrow-left,
.bi-chevron-left {
    transform: scaleX(-1);
    display: inline-block;
}

/* Accordion Arrow */
.accordion-button::after {
    margin-left: 0 !important;
    margin-right: auto !important;
}

/* Form Controls */
.form-select {
    background-position: left 0.75rem center !important;
    padding-left: 2.25rem !important;
    padding-right: 0.75rem !important;
}

/* ==========================================================================
   5. Timeline Section RTL
   ========================================================================== */
.timeline-item:nth-child(odd) {
    padding-right: 0 !important;
    padding-left: 40px !important;
    text-align: left !important;
}

.timeline-item:nth-child(even) {
    margin-left: 0 !important;
    margin-right: 50% !important;
    padding-left: 0 !important;
    padding-right: 40px !important;
    text-align: right !important;
}

.timeline-item:nth-child(odd) .timeline-dot {
    right: auto !important;
    left: -12px !important;
}

.timeline-item:nth-child(even) .timeline-dot {
    left: auto !important;
    right: -12px !important;
}

@media (max-width: 768px) {
    .timeline::before {
        left: auto !important;
        right: 30px !important;
    }

    .timeline-item {
        padding-left: 0 !important;
        padding-right: 80px !important;
        text-align: right !important;
    }

    .timeline-dot {
        left: auto !important;
        right: 18px !important;
    }
}