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

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

html[dir="rtl"] .nav-actions {
  flex-direction: row-reverse;
}

html[dir="rtl"] .toggle-pill {
  flex-direction: row-reverse;
}

html[dir="rtl"] .hero-badges {
  justify-content: flex-end;
}

html[dir="rtl"] .hero-orb.blue {
  left: 20px;
  right: auto;
}

html[dir="rtl"] .hero-orb.purple {
  right: 10px;
  left: auto;
}

html[dir="rtl"] .hero-orb.aqua {
  left: 80px;
  right: auto;
}

html[dir="rtl"] .swiper {
  direction: rtl;
}

html[dir="rtl"] .sample-frame::after {
  left: auto;
  right: 16px;
  letter-spacing: 0.2em;
}

html[dir="rtl"] .service-modal-close {
  left: 16px;
  right: auto;
}

html[dir="rtl"] .service-modal-card ul {
  padding-left: 0;
  padding-right: 18px;
}