/* ==========================================================================
   RTL overrides for the Arabic version of the site (html[dir="rtl"])
   Loaded only on /ar pages, on top of style.css.
   This is a targeted pass on the components used by the Arabic templates
   (header, topbar, footer, buttons, forms, blockquote, nav dropdown) rather
   than a full mirror of every rule in style.css.
   ========================================================================== */

html[dir="rtl"] body {
  font-family: "Tajawal", "Poppins", Arial, sans-serif;
  text-align: right;
}

html[dir="rtl"] * {
  letter-spacing: 0 !important;
}

/* ---------- Topbar ---------- */
html[dir="rtl"] .header-style-1 .topbar .contact-info li {
  float: right;
}

html[dir="rtl"] .header-style-1 .topbar .contact-info ul > li + li {
  margin-left: 0;
  margin-right: 50px;
}

@media (max-width: 991px) {
  html[dir="rtl"] .header-style-1 .topbar .contact-info ul > li + li {
    margin-right: 0;
  }
}

html[dir="rtl"] .header-style-1 .topbar .contact-info li span {
  margin-left: 4px;
}

/* ---------- Main navigation ---------- */
html[dir="rtl"] .site-header .navbar-header {
  float: right;
}

html[dir="rtl"] .site-header .navbar-right {
  float: left !important;
}

@media screen and (min-width: 992px) {
  html[dir="rtl"] .site-header #navbar .navbar-nav > li {
    float: right;
  }

  html[dir="rtl"] .site-header #navbar > ul .sub-menu {
    text-align: right;
    left: auto;
    right: 0;
  }

  html[dir="rtl"] .site-header #navbar > ul > li > .sub-menu .sub-menu {
    left: auto;
    right: 110%;
  }

  html[dir="rtl"] .site-header #navbar .sub-menu > li:hover > .sub-menu {
    left: auto;
    right: 114%;
  }

  html[dir="rtl"] .site-header #navbar > ul > li > .sub-menu > .menu-item-has-children > a:before {
    right: auto;
    left: 0;
  }

  html[dir="rtl"] .site-header #navbar > ul > li .sub-menu a:hover {
    padding-left: 0;
    padding-right: 5px;
  }
}

@media (max-width: 991px) {
  html[dir="rtl"] .site-header #navbar > ul > li > a {
    padding: 10px 35px 10px 15px;
  }

  html[dir="rtl"] .site-header #navbar > ul > li > .sub-menu a {
    padding: 8px 45px 8px 15px;
  }

  html[dir="rtl"] .site-header #navbar > ul > li > .sub-menu .sub-menu a {
    padding: 8px 65px 8px 15px;
  }

  html[dir="rtl"] .site-header #navbar .close-navbar {
    left: auto;
    right: -41px;
  }
}

/* ---------- Section titles / icons ---------- */
html[dir="rtl"] .more-about .fi:before {
  margin-left: 0;
  margin-right: 5px;
}

/* The theme applies a decorative Latin drop-cap (Roboto Slab) to the first
   letter of the about-section paragraph. Arabic text doesn't use drop caps,
   and that font has no Arabic glyphs, so the first letter would fall back
   to a different font and appear detached from the rest of the word. */
html[dir="rtl"] .about-section .right-col > p:first-child:first-letter {
  font-family: inherit;
  font-size: inherit;
}

html[dir="rtl"] blockquote {
  border-left: 0;
  border-right: 3px solid #c9b38c;
  padding-left: 0;
  padding-right: 25px;
}

/* ---------- Buttons with a trailing arrow icon ---------- */
html[dir="rtl"] .read-more .fi:before,
html[dir="rtl"] .more-about .fi:before {
  transform: scaleX(-1);
  display: inline-block;
}

/* ---------- Contact info / footer widgets ---------- */
html[dir="rtl"] .contact-section .contact-info li,
html[dir="rtl"] .site-footer .widget {
  text-align: right;
}

html[dir="rtl"] .contact-section .contact-info .fi:before {
  margin: 0;
}

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

html[dir="rtl"] .error-handling-messages {
  text-align: right;
}

/* ---------- Case studies / blog overlays ---------- */
html[dir="rtl"] .case-studies-grids .overlay .content,
html[dir="rtl"] .blog-grids .entry-details {
  text-align: right;
}

/* ---------- Footer copyright / lower footer ---------- */
html[dir="rtl"] .lower-footer .copyright {
  text-align: center;
}

/* ---------- Preloader / misc icons that should not mirror ---------- */
html[dir="rtl"] .swiper-button-prev,
html[dir="rtl"] .swiper-button-next {
  transform: scaleX(-1);
}