/*-----------------------------------------------------------------------------------

    Juthoor Al-Khair - RTL Overrides for Arabic Layout
    Companion stylesheet to style.css
    Load after style.css when locale is Arabic (ar)

-----------------------------------------------------------------------------------

    CSS INDEX
    ===================

    1. Global RTL base
    2. Utility class reversals
    3. Header top
    4. Header bottom / Navigation
    5. Search bar
    6. Slider area
    7. Section titles
    8. Services area
    9. Causes area
    10. Video / About area
    11. Events area
    12. Fun facts / Countdown
    13. Blog area
    14. Footer area
    15. Breadcrumb
    16. Team / Volunteers
    17. Testimonials
    18. Forms (join, leave, contact)
    19. Sidebar / Blog sidebar
    20. Single blog / Comments
    21. Pagination
    22. Gallery
    23. Scroll up
    24. Language switcher
    25. Bootstrap utility overrides

-----------------------------------------------------------------------------------*/


/* ==============================
   1. Global RTL base
   ============================== */

body {
    direction: rtl;
    text-align: right;
    font-family: 'Cairo', sans-serif;
}

h1, h2, h3, h4, h5, h6,
.weiget-title,
.section-title h2,
.slider-text h1,
.slider-text h2,
.causes-info h3,
.event-info h3,
.volunteer-text h2,
.single-service h3,
.volunter-info h3,
.blog-info h3,
.breadcrumb-content h2,
.main-menu nav ul li a,
.button,
a.button {
    font-family: 'Cairo', sans-serif;
}

p, span, a, li, label, input, textarea, select, td, th {
    font-family: 'Cairo', sans-serif;
}


/* ==============================
   2. Utility class reversals
   ============================== */

.f-right {
    float: left !important;
}

.f-left {
    float: right !important;
}

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

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

/* When both ml-auto and mr-auto are used together (centering), keep both auto */
.ml-auto.mr-auto {
    margin-left: auto !important;
    margin-right: auto !important;
}

.ml-auto:not(.mr-auto) {
    margin-left: 0 !important;
    margin-right: auto !important;
}

.mr-auto:not(.ml-auto) {
    margin-right: 0 !important;
    margin-left: auto !important;
}

.float-left {
    float: right !important;
}

.float-right {
    float: left !important;
}

.pl-0 {
    padding-left: unset !important;
    padding-right: 0 !important;
}

.pr-0 {
    padding-right: unset !important;
    padding-left: 0 !important;
}


/* ==============================
   3. Header top
   ============================== */

.header-info ul li {
    margin-right: 0;
    margin-left: 26px;
}

.header-info ul li i {
    margin-right: 0;
    margin-left: 10px;
}

.header-social > a {
    margin-left: 0;
    margin-right: 26px;
}

.header-social > a:first-child {
    margin-right: 0;
}

.header-social {
    float: left;
    text-align: left;
}


/* ==============================
   4. Header bottom / Navigation
   ============================== */

.logo {
    float: right;
}

.header-menu {
    float: left;
}

.main-menu {
    float: left;
}

.main-menu > nav > ul > li {
    display: inline-block;
}

/* Dropdown menus */
.main-menu > nav > ul > li > ul {
    left: auto;
    right: 0;
    text-align: right;
}

/* Sticky header inherits RTL */
.transparent-bar.stick {
    direction: rtl;
}

.header-button.search-2 {
    margin-left: 0;
    margin-right: 41px;
}


/* ==============================
   5. Search bar
   ============================== */

.search-bar-button {
    padding-left: 0;
    padding-right: 30px;
}

.widget_searchform_content {
    right: auto;
    left: 0;
}

.widget_searchform_content > form input {
    padding: 0 10px 3px 48px;
}

.widget_searchform_content > form button.submit {
    right: auto;
    left: 0;
}


/* ==============================
   6. Slider area
   ============================== */

.slider-area .owl-carousel .owl-nav button {
    left: auto;
    right: 10px;
}

.slider-area .owl-carousel .owl-nav button.owl-next {
    right: auto;
    left: 10px;
}

.slider-text.slider-text-2 p,
.slider-text.slider-text-3 p {
    margin-right: inherit;
    margin-left: auto;
}


/* ==============================
   7. Section titles
   ============================== */

.icon-img::after {
    right: auto;
    left: 66px;
}

.icon-img::before {
    left: auto;
    right: 66px;
}


/* ==============================
   8. Services area
   ============================== */

.help-services .single-service {
    text-align: right;
}


/* ==============================
   9. Causes area
   ============================== */

.causes-info {
    text-align: right;
}

.doller-target {
    text-align: right;
}

.share-icon > h4 {
    float: right;
}

.share-icon > ul {
    margin-left: 0;
    margin-right: 30px;
}

.share-icon ul li {
    margin-right: 0;
    margin-left: 9px;
}

.share-icon ul li:last-child {
    margin-left: 0;
}


/* ==============================
   10. Video / About area
   ============================== */

.another-text {
    text-align: left;
}

.video-border > h3:before {
    left: auto;
    right: 0;
}

.video-info.another-text > h3:after {
    right: auto;
    left: 0;
}

.video-info {
    padding: 67px 30px 0 65px;
}

.video-info.another-text {
    padding: 67px 65px 0 30px;
}

/* About tabs */
.about-tab > li {
    padding-right: 0;
    padding-left: 55px;
}

.about-tab > li::after {
    margin-left: 0;
    margin-right: 11px;
    right: auto;
    left: 25px;
}

/* Grow section */
.single-grow {
    padding-right: 0;
    padding-left: 40px;
}

.grow-img {
    padding-left: 0;
    padding-right: 40px;
}


/* ==============================
   11. Events area
   ============================== */

.event-info {
    left: auto;
    right: 40px;
}

.event-time-date > span {
    margin-right: 0;
    margin-left: 25px;
}

.event-time-date > span i {
    margin-right: 0;
    margin-left: 9px;
}


/* ==============================
   12. Fun facts / Countdown
   ============================== */

.upcoming .cdown {
    float: right;
    margin-right: 0;
    margin-left: 30px;
}

.upcoming .cdown:last-child {
    margin-left: 0;
}

.upcoming.text-center > div {
    padding-left: 0;
    padding-right: 184px;
}

.up-text {
    float: right;
}

.up-text > h2 img {
    margin-left: 0;
    margin-right: 20px;
}

.upcoming-text {
    padding-left: 0;
    padding-right: 135px;
}

.up-button {
    margin-left: 0;
    margin-right: 50px;
}


/* ==============================
   13. Blog area
   ============================== */

.blog-info {
    text-align: right;
}

.blog-info > a img {
    margin-left: 0;
    margin-right: 12px;
}

.b-none {
    right: auto;
    left: 0;
}


/* ==============================
   14. Footer area
   ============================== */

.footer-social > ul > li {
    margin-right: 0;
    margin-left: 12px;
}

.instra-img {
    margin-right: 0;
    margin-left: 13px;
}

.weiget-info {
    text-align: right;
}

.weiget-title {
    text-align: right;
}

.footer-bottom > p {
    text-align: right;
}


/* ==============================
   15. Breadcrumb
   ============================== */

.breadcrumb-content ul li {
    display: inline-block;
}

.breadcrumb-content ul li + li::before {
    content: '/';
    margin: 0 8px;
}


/* ==============================
   16. Team / Volunteers
   ============================== */

.volunter-social-icon ul li {
    display: inline-block;
}

.team-social-icon ul li {
    display: inline-block;
}

.volunter-info {
    text-align: right;
}

.team-text > h3 {
    text-align: right;
}


/* ==============================
   17. Testimonials
   ============================== */

.testi-img {
    float: right;
    margin-left: 0;
}

.testi-text {
    margin-left: 0;
    margin-right: 30px;
    padding: 52px 281px 61px 44px;
    text-align: right;
}

.owl-carousel .owl-dots {
    margin-right: 0;
    margin-left: 100px;
    text-align: left;
}


/* ==============================
   18. Forms (join, leave, contact)
   ============================== */

input,
textarea,
select {
    text-align: right;
    direction: rtl;
}

input::placeholder,
textarea::placeholder {
    text-align: right;
}

.leave-form form input,
.leave-form form textarea {
    padding: 0 30px;
    text-align: right;
}

.join-form form input {
    padding: 3px 30px 3px 10px;
}

.join-form select {
    background-position: left 30px center;
    padding: 3px 30px;
}

.join-form textarea {
    padding: 16px 30px;
    text-align: right;
}

.join-text > p {
    padding-right: 0;
    padding-left: 50px;
}

.join-text ul li img {
    margin-right: 0;
    margin-left: 18px;
}

.blog-search input[type="text"] {
    padding: 5px 15px 5px 48px;
}

.blog-search button.submit {
    right: auto;
    left: 0;
}


/* ==============================
   19. Sidebar / Blog sidebar
   ============================== */

h3.blog-sidebar-text::before {
    left: auto;
    right: 0;
}

.blog-video-img {
    float: right;
}

.blog-video-text {
    padding-left: 0;
    padding-right: 110px;
}

.blog-right-sidebar-top ul li a span {
    float: left;
}

.blog-right-sidebar-bottom li {
    margin: 0 0 8px 14px;
}


/* ==============================
   20. Single blog / Comments
   ============================== */

.single-comment > img {
    float: right;
}

.blog-img-details {
    padding-left: 0;
    padding-right: 120px;
}

.comment-reply > a {
    float: left;
}

.single-comment.middle-comment {
    margin: 63px 117px 63px 0;
}

.single-blog-text blockquote {
    border-left: none;
    border-right: 4px solid #f8b864;
}


/* ==============================
   21. Pagination
   ============================== */

.page-pagintion li {
    float: right;
}


/* ==============================
   22. Gallery
   ============================== */

.gallery-img {
    text-align: right;
}

.slick-slide img {
    margin: 0 auto;
}


/* ==============================
   23. Scroll up
   ============================== */

#scrollUp {
    right: auto;
    left: 12px;
}


/* ==============================
   24. Language switcher
   ============================== */

.lang-switcher {
    display: inline-block;
    margin: 0 10px;
}

.lang-switcher a {
    padding: 2px 8px;
    color: #fff;
    text-decoration: none;
    font-size: 13px;
}

.lang-switcher a.active {
    font-weight: bold;
    border-bottom: 2px solid #f8b864;
}

.lang-switcher a:hover {
    color: #f8b864;
}


/* ==============================
   25. Bootstrap utility overrides
   ============================== */

/* Reverse margin/padding utilities for RTL */
.me-1, .me-2, .me-3, .me-4, .me-5 {
    margin-right: 0 !important;
}

.me-1 { margin-left: 0.25rem !important; }
.me-2 { margin-left: 0.5rem !important; }
.me-3 { margin-left: 1rem !important; }
.me-4 { margin-left: 1.5rem !important; }
.me-5 { margin-left: 3rem !important; }

.ms-1, .ms-2, .ms-3, .ms-4, .ms-5 {
    margin-left: 0 !important;
}

.ms-1 { margin-right: 0.25rem !important; }
.ms-2 { margin-right: 0.5rem !important; }
.ms-3 { margin-right: 1rem !important; }
.ms-4 { margin-right: 1.5rem !important; }
.ms-5 { margin-right: 3rem !important; }

.pe-1, .pe-2, .pe-3, .pe-4, .pe-5 {
    padding-right: 0 !important;
}

.pe-1 { padding-left: 0.25rem !important; }
.pe-2 { padding-left: 0.5rem !important; }
.pe-3 { padding-left: 1rem !important; }
.pe-4 { padding-left: 1.5rem !important; }
.pe-5 { padding-left: 3rem !important; }

.ps-1, .ps-2, .ps-3, .ps-4, .ps-5 {
    padding-left: 0 !important;
}

.ps-1 { padding-right: 0.25rem !important; }
.ps-2 { padding-right: 0.5rem !important; }
.ps-3 { padding-right: 1rem !important; }
.ps-4 { padding-right: 1.5rem !important; }
.ps-5 { padding-right: 3rem !important; }

/* Flex alignment reversal */
.justify-content-start {
    justify-content: flex-end !important;
}

.justify-content-end {
    justify-content: flex-start !important;
}

/* Border reversal */
.border-start {
    border-left: none !important;
    border-right: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
}

.border-end {
    border-right: none !important;
    border-left: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
}

/* Rounded corners reversal */
.rounded-start {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-top-right-radius: var(--bs-border-radius) !important;
    border-bottom-right-radius: var(--bs-border-radius) !important;
}

.rounded-end {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-top-left-radius: var(--bs-border-radius) !important;
    border-bottom-left-radius: var(--bs-border-radius) !important;
}