.rtl .join-flex {
  align-items: flex-start !important;
}
.rtl .join-title {
  text-align: right !important;
}
.rtl .join-desc {
  text-align: right !important;
}
.rtl .join-tiny {
  text-align: right !important;
}
.rtl .safety-col-inner {
  align-items: flex-end !important;
}
.rtl .safety-col-title {
  text-align: right !important;
}
.rtl .safety-col-desc {
  text-align: right !important;
}
.rtl.safety-tiny {
  text-align: right !important;
}
.rtl.safety-title {
  text-align: right !important;
}
.rtl .white-section .vision-title {
  text-align: right !important;
}
.rtl .white-section .vision-desc {
  text-align: right !important;
}
.rtl .vision-list li,
html[dir="rtl"] .vision-list li {
  padding-left: 0 !important;
  padding-right: 40px !important;
}
.rtl .vision-list li::before,
html[dir="rtl"] .vision-list li::before {
  left: auto !important;
  right: 0 !important;
  top: 2px !important;
  width: 20px !important;
  height: 20px !important;
  background: url("../icons/check.svg") no-repeat center/contain !important;
}
.rtl .vision-title {
  text-align: right !important;
}
.rtl .vision-desc {
  text-align: right !important;
}
.rtl .vision-list {
  text-align: right !important;
}
.rtl .hero-title {
  text-align: right !important;
}
.rtl .hero-desc {
  text-align: right !important;
}
.rtl .hero-buttons {
  justify-content: flex-end !important;
}
.rtl {
  direction: rtl;
  font-family: "Noto Kufi Arabic", Arial, sans-serif !important;
}

.ltr {
  direction: ltr;
}

/* Fix hero buttons and service button arrow placement in RTL */
.rtl .hero-btn.filled,
html[dir="rtl"] .hero-btn.filled {
  /* swap paddings so icon/text spacing is correct in RTL */
  padding-right: 24px !important;
  padding-left: 0 !important;
  justify-content: space-between !important;
}

.rtl .hero-btn.filled .hero-arrow,
html[dir="rtl"] .hero-btn.filled .hero-arrow {
  margin-left: 0 !important;
  margin-right: auto !important;
  border-radius: 5px 0 0 5px !important;
}

/* Service buttons use a simple span for the arrow — mirror its placement and flip the icon */
.rtl .service-btn-arrow,
html[dir="rtl"] .service-btn-arrow {
  margin-left: 0 !important;
  margin-right: auto !important;
}
.rtl .service-btn-arrow img,
html[dir="rtl"] .service-btn-arrow img {
  transform: scaleX(-1);
}

/* Flip arrow-block border radii for RTL so rounded corners match direction */
.rtl .service-btn-arrow,
html[dir="rtl"] .service-btn-arrow {
  border-radius: 5px 0 0 5px !important;
}

.rtl .hero-arrow,
html[dir="rtl"] .hero-arrow {
  border-radius: 5px 0 0 5px !important;
}