/* ==========================================
 * RTL STYLESHEET FOR ARABIC
 * ========================================== */

/* ==========================================
 * GENERAL RTL STYLES
 * ========================================== */

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

/* ==========================================
 * TEXT ALIGNMENT
 * ========================================== */

[dir="rtl"] .text-start,
[dir="rtl"] .text-left,
html.rtl .text-start,
html.rtl .text-left,
body.rtl .text-start,
body.rtl .text-left {
  text-align: right !important;
}

[dir="rtl"] .text-end,
[dir="rtl"] .text-right,
html.rtl .text-end,
html.rtl .text-right,
body.rtl .text-end,
body.rtl .text-right {
  text-align: left !important;
}

/* ==========================================
 * PADDING & MARGIN - HORIZONTAL
 * ========================================== */

[dir="rtl"] .ps-1,
[dir="rtl"] .pe-0,
html.rtl .ps-1,
html.rtl .pe-0 {
  padding-left: 0 !important;
  padding-right: 0.25rem !important;
}

[dir="rtl"] .ps-2,
html.rtl .ps-2 {
  padding-left: 0 !important;
  padding-right: 0.5rem !important;
}

[dir="rtl"] .ps-3,
html.rtl .ps-3 {
  padding-left: 0 !important;
  padding-right: 1rem !important;
}

[dir="rtl"] .ps-4,
html.rtl .ps-4 {
  padding-left: 0 !important;
  padding-right: 1.5rem !important;
}

[dir="rtl"] .ps-5,
html.rtl .ps-5 {
  padding-left: 0 !important;
  padding-right: 3rem !important;
}

[dir="rtl"] .pe-0,
html.rtl .pe-0 {
  padding-right: 0 !important;
  padding-left: 0.25rem !important;
}

[dir="rtl"] .pe-1,
html.rtl .pe-1 {
  padding-right: 0 !important;
  padding-left: 0.25rem !important;
}

[dir="rtl"] .pe-2,
html.rtl .pe-2 {
  padding-right: 0 !important;
  padding-left: 0.5rem !important;
}

[dir="rtl"] .pe-3,
html.rtl .pe-3 {
  padding-right: 0 !important;
  padding-left: 1rem !important;
}

[dir="rtl"] .pe-4,
html.rtl .pe-4 {
  padding-right: 0 !important;
  padding-left: 1.5rem !important;
}

[dir="rtl"] .pe-5,
html.rtl .pe-5 {
  padding-right: 0 !important;
  padding-left: 3rem !important;
}

[dir="rtl"] .ms-1,
html.rtl .ms-1 {
  margin-left: 0 !important;
  margin-right: 0.25rem !important;
}

[dir="rtl"] .ms-2,
html.rtl .ms-2 {
  margin-left: 0 !important;
  margin-right: 0.5rem !important;
}

[dir="rtl"] .ms-3,
html.rtl .ms-3 {
  margin-left: 0 !important;
  margin-right: 1rem !important;
}

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

[dir="rtl"] .me-0,
html.rtl .me-0 {
  margin-right: 0 !important;
  margin-left: 0.25rem !important;
}

[dir="rtl"] .me-1,
html.rtl .me-1 {
  margin-right: 0 !important;
  margin-left: 0.25rem !important;
}

[dir="rtl"] .me-2,
html.rtl .me-2 {
  margin-right: 0 !important;
  margin-left: 0.5rem !important;
}

[dir="rtl"] .me-3,
html.rtl .me-3 {
  margin-right: 0 !important;
  margin-left: 1rem !important;
}

/* ==========================================
 * POSITIONING
 * ========================================== */

[dir="rtl"] .position-relative.pe-0,
html.rtl .position-relative.pe-0 {
  padding-right: 0 !important;
}

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

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

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

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

/* ==========================================
 * FLOATS
 * ========================================== */

[dir="rtl"] .float-start,
[dir="rtl"] .float-left,
html.rtl .float-start,
html.rtl .float-left {
  float: right !important;
}

[dir="rtl"] .float-end,
[dir="rtl"] .float-right,
html.rtl .float-end,
html.rtl .float-right {
  float: left !important;
}

/* ==========================================
 * FLEXBOX UTILITIES
 * ========================================== */

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

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

/* ==========================================
 * NAVBAR & HEADER
 * ========================================== */

[dir="rtl"] .navbar-toggler,
html.rtl .navbar-toggler {
  margin-left: 0;
  margin-right: 1rem;
}

[dir="rtl"] .dropdown-menu,
html.rtl .dropdown-menu {
  margin-left: 0;
  margin-right: 0.1rem;
  text-align: right;
}

[dir="rtl"] .offcanvas-start,
html.rtl .offcanvas-start {
  left: auto;
  right: 0;
}

[dir="rtl"] .offcanvas-end,
html.rtl .offcanvas-end {
  right: auto;
  left: 0;
}

[dir="rtl"] header .btn-wrap,
html.rtl header .btn-wrap {
  right: auto;
  left: 1rem;
}

/* ==========================================
 * BUTTONS & LINKS
 * ========================================== */

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

[dir="rtl"] .btn span,
html.rtl .btn span {
  margin-left: 1rem;
  margin-right: 0;
}

[dir="rtl"] .link-icon,
html.rtl .link-icon {
  margin-left: 0;
  margin-right: 0.75rem;
}

/* ==========================================
 * SCROLL TO TOP BUTTON
 * ========================================== */

[dir="rtl"] #scrollTop,
html.rtl #scrollTop {
  right: auto;
  left: 1rem;
}

/* ==========================================
 * FORM ELEMENTS
 * ========================================== */

[dir="rtl"] .form-control,
[dir="rtl"] .form-select,
html.rtl .form-control,
html.rtl .form-select {
  text-align: right;
}

[dir="rtl"] .input-group > .form-control,
html.rtl .input-group > .form-control {
  border-radius: 0.45rem;
}

[dir="rtl"] .input-group-text,
html.rtl .input-group-text {
  border-radius: 0.45rem;
}

/* ==========================================
 * BORDERS
 * ========================================== */

[dir="rtl"] .border-start,
html.rtl .border-start {
  border-left: 0;
  border-right: 1px solid currentColor;
}

[dir="rtl"] .border-end,
html.rtl .border-end {
  border-right: 0;
  border-left: 1px solid currentColor;
}

/* ==========================================
 * LISTS
 * ========================================== */

[dir="rtl"] .list-styled,
html.rtl .list-styled {
  list-style: disc;
  padding-left: 0;
  padding-right: 1.5rem;
}

[dir="rtl"] .contentBlock li,
html.rtl .contentBlock li {
  padding-left: 0;
  padding-right: 30px;
}

[dir="rtl"] .contentBlock li::before,
html.rtl .contentBlock li::before {
  left: auto;
  right: 0px;
}

/* ==========================================
 * HERO SLIDER & BANNERS
 * ========================================== */

[dir="rtl"] .hero-carousel,
html.rtl .hero-carousel {
  width: 100% !important;
  display: block !important;
}

[dir="rtl"] .hero-carousel .owl-stage-outer,
html.rtl .hero-carousel .owl-stage-outer {
  width: 100% !important;
  height: auto;
}

[dir="rtl"] .hero-carousel .owl-stage,
html.rtl .hero-carousel .owl-stage {
  width: 100% !important;
  height: auto;
}

[dir="rtl"] .hero-carousel .item,
html.rtl .hero-carousel .item {
  width: 100%;
  height: auto;
}

[dir="rtl"] .hero-slider .caption,
html.rtl .hero-slider .caption {
  right: auto;
  left: 0;
}

[dir="rtl"] .hero-slider .caption .caption-widget,
html.rtl .hero-slider .caption .caption-widget {
  text-align: center;
}

[dir="rtl"] .hero-slider .owl-nav,
html.rtl .hero-slider .owl-nav {
  right: auto;
  left: 0;
  width: 100%;
  margin: 0;
  padding: 0 3rem;
  box-sizing: border-box;
  justify-content: space-between;
}

[dir="rtl"] .hero-slider .owl-nav button.owl-prev,
html.rtl .hero-slider .owl-nav button.owl-prev {
  transform: rotate(180deg);
}

[dir="rtl"] .hero-slider .owl-nav button.owl-next,
html.rtl .hero-slider .owl-nav button.owl-next {
  transform: rotate(0deg);
}

/* ==========================================
 * HEADING WIDGET
 * ========================================== */

[dir="rtl"] .heading-widget h2,
html.rtl .heading-widget h2 {
  padding-right: 2rem;
  padding-left: 0;
}

/* ==========================================
 * WORK BLOCKS
 * ========================================== */

[dir="rtl"] .work-block,
html.rtl .work-block {
  text-align: right;
}

/* ==========================================
 * BUTTONS WITH ICONS
 * ========================================== */

[dir="rtl"] .btn-close,
html.rtl .btn-close {
  right: auto;
  left: 1rem;
}

/* ==========================================
 * MODAL
 * ========================================== */

[dir="rtl"] .modal-content,
html.rtl .modal-content {
  text-align: right;
}

/* ==========================================
 * RATING
 * ========================================== */

[dir="rtl"] .rating i,
html.rtl .rating i {
  margin-right: 0;
  margin-left: 0.25rem;
}

/* ==========================================
 * FOOTER
 * ========================================== */

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

[dir="rtl"] .user-widget .avatar,
html.rtl .user-widget .avatar {
  margin-right: 0;
  margin-left: 0.75rem;
}

/* ==========================================
 * OFFCANVAS ADJUSTMENTS
 * ========================================== */

[dir="rtl"] .offcanvas-header,
html.rtl .offcanvas-header {
  justify-content: flex-end;
}

[dir="rtl"] .offcanvas-body,
html.rtl .offcanvas-body {
  text-align: right;
}

/* ==========================================
 * SECONDARY BUTTON STYLES
 * ========================================== */

[dir="rtl"] .secondary,
html.rtl .secondary {
  margin-left: 10px;
  margin-right: 0;
}

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

/* ==========================================
 * DROPDOWN ADJUSTMENTS
 * ========================================== */

[dir="rtl"] .dropdown-toggle::after,
html.rtl .dropdown-toggle::after {
  margin-left: 0;
  margin-right: 0.5rem;
}

/* ==========================================
 * RESPONSIVE ADJUSTMENTS FOR RTL
 * ========================================== */

@media all and (max-width: 991px) {
  [dir="rtl"] .offcanvas,
  html.rtl .offcanvas {
    box-shadow: -40px 0 80px rgba(0, 0, 0, 0.1);
    width: 300px !important;
  }

  [dir="rtl"] .fixed-top.sticky .navbar,
  html.rtl .fixed-top.sticky .navbar {
    padding: 0.5rem 0.5rem 0.5rem 1rem;
  }

  [dir="rtl"] .hero-slider.inner-banner .caption,
  html.rtl .hero-slider.inner-banner .caption {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media all and (max-width: 767px) {
  [dir="rtl"] .lets-build-section .btn,
  html.rtl .lets-build-section .btn {
    margin: 0 1rem 1rem 0;
  }

  [dir="rtl"] .hero-slider.inner-banner .caption,
  html.rtl .hero-slider.inner-banner .caption {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* ==========================================
 * ADDITIONAL RTL UTILITIES
 * ========================================== */

[dir="rtl"] [class*="ps-"],
html.rtl [class*="ps-"] {
  padding-left: 0 !important;
}

[dir="rtl"] [class*="pe-"],
html.rtl [class*="pe-"] {
  padding-right: 0 !important;
}

[dir="rtl"] [class*="ms-"],
html.rtl [class*="ms-"] {
  margin-left: 0 !important;
}

[dir="rtl"] [class*="me-"],
html.rtl [class*="me-"] {
  margin-right: 0 !important;
}

/* ==========================================
 * ARABIC FONT OPTIMIZATION
 * ========================================== */

[dir="rtl"] body,
[dir="rtl"] html,
html.rtl body,
html.rtl html {
  font-family: "Inter", "Cairo", "Droid Arabic Kufi", sans-serif;
  font-size: 1rem;
  line-height: 1.6;
}

[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4,
[dir="rtl"] h5,
[dir="rtl"] h6,
html.rtl h1,
html.rtl h2,
html.rtl h3,
html.rtl h4,
html.rtl h5,
html.rtl h6 {
  font-family: "Inter", "Cairo", "Droid Arabic Kufi", sans-serif;
}
/* ==========================================
 * OWL CAROUSEL - ITEM MARGINS FOR RTL
 * ========================================== */

/* Preserve margins for carousel items in RTL */
[dir="rtl"] .service-slider .owl-item:last-child,
html.rtl .service-slider .owl-item:last-child {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

[dir="rtl"] .service-slider.responsive-767 .owl-item:last-child,
html.rtl .service-slider.responsive-767 .owl-item:last-child {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

[dir="rtl"] .testimonial-slider .owl-item,
html.rtl .testimonial-slider .owl-item {
  margin-left: 0 !important;
  margin-right: 0 !important;
}