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

html[lang="ar"][dir="rtl"] .site-header,
html[lang="ar"][dir="rtl"] .site-nav,
html[lang="ar"][dir="rtl"] .site-footer,
html[lang="ar"][dir="rtl"] main,
html[lang="ar"][dir="rtl"] section,
html[lang="ar"][dir="rtl"] form,
html[lang="ar"][dir="rtl"] table,
html[lang="ar"][dir="rtl"] dl {
  direction: rtl;
}

html[lang="ar"][dir="rtl"] .products-menu-group-toggle,
html[lang="ar"][dir="rtl"] .site-nav .products-menu-link,
html[lang="ar"][dir="rtl"] .products-menu-feature,
html[lang="ar"][dir="rtl"] .baseline-language-switcher-menu a,
html[lang="ar"][dir="rtl"] .baseline-language-switcher-menu span,
html[lang="ar"][dir="rtl"] input,
html[lang="ar"][dir="rtl"] textarea,
html[lang="ar"][dir="rtl"] select {
  text-align: right;
}

html[lang="ar"][dir="rtl"] .products-menu-link-arrow {
  margin-right: auto;
  margin-left: 0;
  transform: rotate(225deg) translateX(-2px);
}

html[lang="ar"][dir="rtl"] .site-nav .products-menu-link:hover,
html[lang="ar"][dir="rtl"] .site-nav .products-menu-link:focus-visible,
html[lang="ar"][dir="rtl"] .site-nav .products-menu-link.is-active {
  transform: translateX(-3px);
}

html[lang="ar"][dir="rtl"] .baseline-language-switcher-menu {
  right: auto;
  left: 0;
}

html[lang="ar"][dir="rtl"] bdi[dir="ltr"],
html[lang="ar"][dir="rtl"] a[href^="tel:"],
html[lang="ar"][dir="rtl"] a[href^="mailto:"],
html[lang="ar"][dir="rtl"] input[type="tel"],
html[lang="ar"][dir="rtl"] input[type="email"],
html[lang="ar"][dir="rtl"] input[name*="phone" i],
html[lang="ar"][dir="rtl"] input[name*="email" i] {
  direction: ltr;
  unicode-bidi: isolate;
  text-align: left;
}

html[lang="ar"][dir="rtl"] img,
html[lang="ar"][dir="rtl"] picture,
html[lang="ar"][dir="rtl"] video,
html[lang="ar"][dir="rtl"] .brand-logo,
html[lang="ar"][dir="rtl"] .brand-mark {
  direction: ltr;
}

@media (min-width: 1121px) {
  html[lang="ar"][dir="rtl"] .hero-content,
  html[lang="ar"][dir="rtl"] .about-hero .container,
  html[lang="ar"][dir="rtl"] .products-hero .container,
  html[lang="ar"][dir="rtl"] .standard-hero .container,
  html[lang="ar"][dir="rtl"] .page-hero.blog-hero .blog-hero-content {
    justify-self: end;
    margin-right: 0;
    margin-left: clamp(24px, 7vw, 118px);
  }

  html[lang="ar"][dir="rtl"] .hero h1,
  html[lang="ar"][dir="rtl"] .page-hero h1 {
    overflow-wrap: anywhere;
  }
}

@media (max-width: 1120px) {
  html[lang="ar"][dir="rtl"] .baseline-language-switcher-menu {
    right: auto;
    left: auto;
  }
}