.fae-language-switch > a {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  margin-inline: 8px;
  padding: 5px 13px !important;
  border: 1px solid #c7a45b;
  border-radius: 999px;
  color: #c7a45b !important;
  font-weight: 700;
  line-height: 1.2 !important;
  white-space: nowrap;
}

.fae-language-switch > a:hover,
.fae-language-switch > a:focus {
  background: #c7a45b;
  color: #0b2340 !important;
}

html[lang^="ar"] body,
html[lang^="ar"] button,
html[lang^="ar"] input,
html[lang^="ar"] textarea,
html[lang^="ar"] select,
html[lang^="ar"] .wpcf7-form,
html[lang^="ar"] h1,
html[lang^="ar"] h2,
html[lang^="ar"] h3,
html[lang^="ar"] h4,
html[lang^="ar"] h5,
html[lang^="ar"] h6 {
  font-family: "IBM Plex Sans Arabic", Tahoma, Arial, sans-serif;
}

html[lang^="ar"] input,
html[lang^="ar"] textarea,
html[lang^="ar"] select,
html[lang^="ar"] .wpcf7-form {
  text-align: right;
}

html[lang^="ar"] input[type="email"],
html[lang^="ar"] input[type="tel"] {
  direction: ltr;
}

/* The client-logo marquee uses a fixed leftward animation and duplicated logo
   groups. Keep its mechanics LTR on Arabic pages so RTL inheritance cannot
   reverse the flex flow and break the seamless English-equivalent loop. */
html[lang^="ar"] .fae-marquee-wrap,
html[lang^="ar"] .fae-marquee,
html[lang^="ar"] .fae-marquee-track,
html[lang^="ar"] .fae-marquee-group {
  direction: ltr;
}

@media (max-width: 767px) {
  .fae-language-switch > a {
    width: max-content;
    margin-block: 8px;
    margin-inline: 0;
  }
}

/* About Us (post 18312): Elementor's overlapping-photo effect on the second
   ("equipment") image widget uses a physical negative left margin to pull it
   over the neighbouring big photo. That direction is correct in English,
   where the big photo sits to its left, but the same physical value is not
   flipped under RTL, where the big photo sits to its right instead — so in
   Arabic the photo shifts away from the big photo and onto the text column
   beside it. Mirror the margin for Arabic only; English is untouched. */
html[lang="ar"] .elementor-18312 .elementor-element.elementor-element-ed9e2bd > .elementor-widget-container {
  margin: 0% -110% 0% 0%;
}

/* Sidebar Contact form submit button (all pages, incl. every service page):
   the theme's rtl.css correctly mirrors both the button's padding (large
   side reserved for the icon moves from left to right) and the icon's own
   `right: 36px; left: auto` position — but a later-loaded, same-specificity
   responsive stylesheet (skins/default/css/__responsive.css, @media
   max-width:1279px/767px) resets both back to the LTR arrangement (icon
   position without `!important`, padding with `!important`), so at those
   widths the icon and the right-aligned Arabic label land in the same
   ~36px strip on the right edge of the button. Re-assert the RTL-correct
   values for both with matching `!important` + one extra selector of
   specificity so they win regardless of viewport width or load order. */
html[lang^="ar"] .wpcf7 .wpcf7-submit-style .submit-style-in::before {
  left: auto;
  right: 36px;
}

html[lang^="ar"] .wpcf7 .wpcf7-submit-style .wpcf7-submit {
  padding: 17px 64px 17px 35px !important;
}

@media (max-width: 1279px) {
  html[lang^="ar"] .wpcf7 .wpcf7-submit-style .wpcf7-submit {
    padding: 15px 60px 15px 35px !important;
  }
}

@media (max-width: 767px) {
  html[lang^="ar"] .wpcf7 .wpcf7-submit-style .wpcf7-submit {
    padding: 13px 57px 13px 30px !important;
  }
}