/**
 * RTL Overrides for Ravo Template
 * Arabic (RTL) layout support
 */

/* ========== Base Direction ========== */
html[dir="rtl"] body {
    direction: rtl;
    text-align: right;
}

/* ========== Font Family - Arabic ========== */
html[dir="rtl"] body,
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3,
html[dir="rtl"] h4, html[dir="rtl"] h5, html[dir="rtl"] h6,
html[dir="rtl"] p, html[dir="rtl"] a, html[dir="rtl"] span,
html[dir="rtl"] input, html[dir="rtl"] textarea, html[dir="rtl"] button,
html[dir="rtl"] .navbar-nav .nav-link span {
    font-family: 'IBM Plex Sans Arabic', sans-serif !important;
}

/* ========== Margin/Padding Flips ========== */
html[dir="rtl"] .ml-auto { margin-right: auto !important; margin-left: unset !important; }
html[dir="rtl"] .mr-auto { margin-left: auto !important; margin-right: unset !important; }

html[dir="rtl"] .ml-10 { margin-right: 10px !important; margin-left: unset !important; }
html[dir="rtl"] .ml-15 { margin-right: 15px !important; margin-left: unset !important; }
html[dir="rtl"] .ml-20 { margin-right: 20px !important; margin-left: unset !important; }
html[dir="rtl"] .ml-25 { margin-right: 25px !important; margin-left: unset !important; }
html[dir="rtl"] .ml-30 { margin-right: 30px !important; margin-left: unset !important; }
html[dir="rtl"] .ml-50 { margin-right: 50px !important; margin-left: unset !important; }

html[dir="rtl"] .mr-10 { margin-left: 10px !important; margin-right: unset !important; }
html[dir="rtl"] .mr-15 { margin-left: 15px !important; margin-right: unset !important; }
html[dir="rtl"] .mr-20 { margin-left: 20px !important; margin-right: unset !important; }
html[dir="rtl"] .mr-25 { margin-left: 25px !important; margin-right: unset !important; }
html[dir="rtl"] .mr-30 { margin-left: 30px !important; margin-right: unset !important; }

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

/* ========== Navbar ========== */

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

html[dir="rtl"] .navbar .navbar-nav .nav-link {
    text-align: right;
}

/* ========== Arrow Icons - Flip for RTL ========== */
html[dir="rtl"] .arrow svg,
html[dir="rtl"] .vew-all a span svg,
html[dir="rtl"] .icon-arrow,
html[dir="rtl"] .crv-butn-vid .icon svg {
    transform: scaleX(-1);
}

html[dir="rtl"] .circle-button .arrow svg {
    transform: scaleX(-1);
}

/* ========== Marquee / Slider Direction ========== */
/* Keep default animation direction - works with RTL naturally */
html[dir="rtl"] .slide-har {
    direction: ltr; /* marquee animation needs LTR to flow correctly */
}
html[dir="rtl"] .slide-har .box .item h4 {
    direction: rtl; /* but text inside stays RTL */
}

/* ========== Footer ========== */
html[dir="rtl"] .copyright .ml-auto {
    margin-right: auto !important;
    margin-left: unset !important;
}

html[dir="rtl"] .subscribe .form-group button {
    right: auto;
    left: 0;
}

html[dir="rtl"] .subscribe .form-group input {
    padding-right: 15px;
    padding-left: 50px;
}

/* ========== Newsletter Arrow ========== */
html[dir="rtl"] .subscribe button i {
    transform: scaleX(-1);
}

/* ========== Offset Columns ========== */
html[dir="rtl"] .offset-lg-1 {
    margin-right: 8.333333%;
    margin-left: 0;
}

/* ========== Portfolio Fixed ========== */
/* Section is forced to dir="ltr" for JS scroll compatibility,
   but text content uses dir="rtl" inline on individual elements */
.portfolio-fixed[dir="ltr"] .right {
    text-align: right;
    direction: rtl;
}

.portfolio-fixed[dir="ltr"] .right .cont {
    text-align: right;
}

.portfolio-fixed[dir="ltr"] .right .vew-all {
    margin-right: 25px;
    margin-left: 0;
}

.portfolio-fixed[dir="ltr"] .right .vew-all a span svg {
    transform: scaleX(-1);
}

/* ========== Social Links ========== */
html[dir="rtl"] .social-text.d-flex {
    flex-direction: row-reverse;
}

html[dir="rtl"] .social-text li {
    margin-left: 30px;
    margin-right: 0;
}

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

/* ========== List Arrow ========== */
html[dir="rtl"] .list-arrow .icon {
    margin-left: 15px;
    margin-right: 0;
}

html[dir="rtl"] .list-arrow .icon svg {
    transform: scaleX(-1);
}


/* ========== Brand Box ========== */
html[dir="rtl"] .brand .link {
    text-align: center;
}

/* ========== Blog Cards ========== */
html[dir="rtl"] .blog-list-half .tags a {
    margin-left: 10px;
    margin-right: 0;
}

/* ========== Page Header ========== */
html[dir="rtl"] .page-header .caption {
    text-align: right;
}

/* ========== Buttons ========== */
html[dir="rtl"] .butn span {
    direction: rtl;
}

/* ========== Call Box ========== */
html[dir="rtl"] .call-box .arrow {
    margin-right: 10px;
    margin-left: 0;
}

/* ========== Justify End Fix ========== */
html[dir="rtl"] .justify-content-end,
html[dir="rtl"] .justify-end {
    justify-content: flex-start !important;
}

/* ========== Progress Wrap ========== */
html[dir="rtl"] .progress-wrap {
    left: 30px;
    right: auto;
}

/* ========== Dot Title ========== */
html[dir="rtl"] .dot-titl-non::before {
    right: auto;
    left: -15px;
}

/* ========== Sub Title ========== */
html[dir="rtl"] .sub-title::before {
    right: auto;
    left: 0;
}