/* ============================================
   RTL.CSS — Arabic / Right-to-Left Styles
   Apply when body has class "rtl"
   ============================================ */

/* ── Global Direction ───────────────────────── */
body.rtl {
    direction: rtl;
    text-align: right;
    font-family: "Cairo", sans-serif;
}

body.rtl p {
    text-align: right;
}

/* ── Typography ─────────────────────────────── */
body.rtl h1,
body.rtl h2,
body.rtl h3,
body.rtl h4,
body.rtl h5,
body.rtl h6 {
    text-align: right;
}

body.rtl .section_title {
    text-align: center;
}

body.rtl .section_title .hh2 {
    text-align: center;
}

/* ── Header / Navbar ────────────────────────── */
body.rtl .navbar-nav {
    margin-right: auto;
    margin-left: 0 !important;
}

body.rtl .navbar-expand-lg .navbar-nav .nav-item .btn_block {
    margin-right: 30px;
    margin-left: 0;
}

body.rtl .navbar-brand {
    margin-right: 0;
    margin-left: auto;
}

/* ── Banner Section ─────────────────────────── */
body.rtl .banner_section .banner_text h1 {
    text-align: right;
}

body.rtl .banner_section .app_btn li:last-child {
    margin-right: 25px;
    margin-left: 0;
}

body.rtl .banner_section .used_app {
    text-align: right;
}

/* ── Task App Section (Features) ───────────── */
body.rtl .task_app_section .task_text .section_title {
    text-align: right;
}

body.rtl .task_app_section .task_img .screen_img {
    margin-right: -115px;
    margin-left: 0;
    margin-top: 50px;
}

body.rtl .task_app_section .btn_block {
    float: left;
    right: auto;
    left: 0;
}

/* ── About Section ──────────────────────────── */
body.rtl .about_section .app_statstic li .text p {
    text-align: center;
}

body.rtl .about_section .col-lg-4 p {
    text-align: right;
}

body.rtl .about_section .btn_block {
    text-align: right;
}

/* ── Text List Badge ────────────────────────── */
body.rtl .text_list_section .down_fix {
    transform: rotate(-2deg);
    bottom: -19px;
}

body.rtl .text_list_section .down_fix::after {
    right: auto;
    left: 0;
}

/* ── Service Section ────────────────────────── */
body.rtl .service_section .service_text {
    padding-right: 0;
    padding-left: 150px;
}

body.rtl .service_section .service_text.right_side {
    padding-left: 0;
    padding-right: 150px;
}

body.rtl .service_section .service_badge span {
    margin-right: 3px;
    margin-left: 0;
}

body.rtl .service_section .service_text .listing_block li {
    text-align: right;
}

body.rtl .service_section .service_text .listing_block li .icon span {
    margin-top: 3px;
}

body.rtl .service_section .service_text h2 {
    text-align: right;
}

body.rtl .service_section .service_text .btn_block {
    text-align: right;
}

/* ── How It Works ───────────────────────────── */
body.rtl .how_it_inner .steps_block {
    text-align: center;
}

body.rtl .how_it_inner .steps_block .text h3,
body.rtl .how_it_inner .steps_block .text p {
    text-align: center;
}

/* Dashed line — mirror for RTL */
body.rtl .how_it_inner .steps_block.step_border::after {
    left: auto;
    right: calc(50% + 45px);
}

/* ── Interface Section ──────────────────────── */
body.rtl .interface_section .section_title h2 {
    text-align: center;
}

/* ── Contact Form ───────────────────────────── */
body.rtl .contact_form .section_title h2,
body.rtl .contact_form .section_title p {
    text-align: center;
}

body.rtl .contact_form form .form-group .form-control {
    text-align: right;
}

body.rtl .contact_form form .form-group .form-control::placeholder {
    text-align: right;
}

body.rtl .contact_form .col-md-12.text-right {
    text-align: left !important;
}

/* ── Buttons ────────────────────────────────── */
body.rtl .puprple_btn {
    margin-right: 20px;
    margin-left: 0;
}

body.rtl .btn_bottom {
    left: auto;
    right: 8px;
}

/* ── Footer ─────────────────────────────────── */
body.rtl .footer_bottom .ft_inner {
    flex-direction: row-reverse;
}

body.rtl .footer_bottom .ft_inner .links {
    flex-direction: row-reverse;
}

body.rtl .footer_bottom .ft_inner p {
    text-align: right;
}

body.rtl .footer_bottom .ft_inner .design_by p {
    text-align: left;
}

/* ── Go Top Button ──────────────────────────── */
body.rtl .go_top {
    right: auto;
    left: 30px;
}

/* ── Spinblock ──────────────────────────────── */
body.rtl .spinBlock::before {
    left: auto;
    right: 20px;
}

/* ── Listing Block (Services) ───────────────── */
body.rtl ul.listing_block li {
    flex-direction: row;
}

body.rtl ul.listing_block li .icon {
    order: 1;
}

body.rtl ul.listing_block li .text {
    order: 2;
    text-align: right;
}

/* ── Owl Carousel Dots ──────────────────────── */
body.rtl .owl-carousel .owl-dots {
    direction: ltr;
}

/* ── Download Section ───────────────────────── */
body.rtl .downaload_section .app_btn li:last-child {
    margin-right: 25px;
    margin-left: 0;
}

/* ── Task Block Btn ─────────────────────────── */
body.rtl .task_app_section .task_text .section_title {
    position: relative;
}

body.rtl .task_app_section .task_text .section_title .btn_block.d-lg-block {
    left: 0;
    right: auto;
}
body.rtl .banner_section .banner_text h1 {
    line-height: 1.5;
}
/* ── NavBar Collapse Mobile ─────────────────── */
@media (max-width: 991px) {
    body.rtl .navbar-collapse {
        text-align: right;
    }

    body.rtl .navbar-expand-lg .navbar-nav .nav-item .btn_block {
        margin-right: 0;
    }

    body.rtl .navbar-nav {
        align-items: flex-end;
    }
}

/* ── Responsive ─────────────────────────────── */
@media (max-width: 768px) {
    body.rtl .service_section .service_text {
        padding-left: 0;
        padding-right: 0;
    }

    body.rtl .task_app_section .task_img .screen_img {
        margin-right: 0;
        margin-left: 0;
    }

    body.rtl .footer_bottom .ft_inner {
        flex-direction: column;
        text-align: center;
    }

    body.rtl .footer_bottom .ft_inner p,
    body.rtl .footer_bottom .ft_inner .design_by p {
        text-align: center;
    }
}