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

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

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

html[dir="rtl"] .mobile-left-wrapper {
    gap: 10px;
}

html[dir="rtl"] #mobileMenuClose {
    left: 3%;
    margin-right: auto;
    width: 40px;
    height: 40px;
}

html[dir="rtl"] .step-item::before {
    left: auto;
    right: 11%;
    background: linear-gradient(
        270deg,
        rgba(168, 85, 247, 0.8),
        rgba(168, 85, 247, 0.3),
        rgba(168, 85, 247, 0.8)
    );
}

html[dir="rtl"] .step-number,
html[dir="rtl"] .step-title,
html[dir="rtl"] .step-text {
    text-align: right;
}

html[dir="rtl"] .job-content ul li::before {
  left: auto;
  right: -10px;
}

html[dir="rtl"] .h-container > div {
  border-left: none;
  border-right: 1px solid #fff;
  text-align: right;
}

@media (max-width: 768px) {
  html[dir="rtl"] .h-container > div {
    padding: 0 10px 0 0;
  }

  html[dir="rtl"] .h-col-2 {
    grid-column: 1;
  }

  html[dir="rtl"] .h-col-3 {
    grid-column: 2;
  }
}