/* RTL Overrides for TemplateMo Edu Meeting */

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

/* Sub Header */
html[dir="rtl"] .sub-header .right-icons {
    text-align: left;
}

html[dir="rtl"] .sub-header .right-icons ul li {
    margin-left: 0;
    margin-right: 15px;
}

html[dir="rtl"] .sub-header .right-icons ul li:first-child {
    margin-right: 0;
}

/* Header / Nav */
html[dir="rtl"] .header-area .main-nav .logo {
    float: right;
}

html[dir="rtl"] .header-area .main-nav .nav {
    float: left;
    margin-right: auto;
    margin-left: 0;
}

html[dir="rtl"] .header-area .main-nav .nav li.has-sub:after {
    right: auto;
    left: 5px;
}

html[dir="rtl"] .header-area .main-nav .nav li.has-sub ul.sub-menu {
    text-align: right;
}

html[dir="rtl"] .header-area .main-nav .nav li.has-sub ul.sub-menu li a {
    padding-left: 0;
    padding-right: 20px;
}

html[dir="rtl"] .header-area .main-nav .nav li.has-sub ul li a:hover {
    padding-left: 0;
    padding-right: 25px;
}

html[dir="rtl"] .header-area .main-nav .nav li.has-sub ul li a:hover:before {
    right: 0;
    left: auto;
}

/* Mobile Menu Trigger */
html[dir="rtl"] .header-area .main-nav .menu-trigger {
    right: auto;
    left: 40px;
}

/* Main Banner */
html[dir="rtl"] .main-banner .caption {
    text-align: right;
}

/* Services */
html[dir="rtl"] .services .item {
    direction: rtl;
}

/* Upcoming Meetings */
html[dir="rtl"] .meeting-item .down-content {
    text-align: right;
}

html[dir="rtl"] .meeting-item .thumb .price {
    left: auto;
    right: 20px;
}

/* Apply Now */
html[dir="rtl"] .apply-now .item {
    text-align: right;
}

html[dir="rtl"] .accordions .accordion-head span {
    float: right;
}

html[dir="rtl"] .accordions .accordion-head .icon {
    float: left;
}

/* Courses */
html[dir="rtl"] .owl-courses-item .down-content {
    text-align: right;
}

html[dir="rtl"] .owl-courses-item .down-content .info span {
    float: left;
}

/* Facts */
html[dir="rtl"] .our-facts h2 {
    text-align: right;
}

html[dir="rtl"] .count-area-content {
    text-align: center;
    /* Keep center for numbers */
}

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

html[dir="rtl"] .contact-us .right-info {
    text-align: right;
}

/* Meetings Page */
html[dir="rtl"] .meetings-page .filters ul li {
    margin-left: 15px;
    margin-right: 15px;
}

html[dir="rtl"] .meetings-page .pagination ul li {
    margin: 0 5px;
}

html[dir="rtl"] .meetings-page .pagination ul li a i {
    transform: rotate(180deg);
}

/* Meeting Details Page */
html[dir="rtl"] .meeting-single-item .down-content {
    text-align: right;
}

html[dir="rtl"] .meeting-single-item .down-content .share {
    text-align: right;
}


html[dir="rtl"] .about-content .timeline-item {
    padding-left: 0;
    padding-right: 30px;
    border-left: none;
    border-right: 2px solid #e9ecef;
}

html[dir="rtl"] .about-content .timeline-dot {
    left: auto;
    right: -8px;
}

html[dir="rtl"] .about-content .timeline:before {
    left: auto;
    right: 0;
}


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

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

/* Services Section */
html[dir="rtl"] .service-item .main-content {
    text-align: right;
    margin-right: 0px;
    margin-left: 80px;
}

html[dir="rtl"] .services-1 .service-item .icon {
    /* float: left;
    margin-left: 0; */
    left: 0;
    right: inherit;
}

/* Stats Section */
html[dir="rtl"] .metric-card {
    text-align: right;
}

html[dir="rtl"] .metric-header {
    flex-direction: row-reverse;
    justify-content: flex-end;
}

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

/* Bootstrap Grid Adjustments (Basic) */
/* Since we are using standard Bootstrap, flex-direction should handle row reversal if dir=rtl is set on html.
   However, we might need to fix some margins if they are hardcoded as ml/mr instead of ms/me.
*/

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

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

/* Fix for float-start/end if used */
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;
}