/* Keep the existing image zoom and slide fades; shade only the text side. */
.hero-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(0, 14, 36, 0.94) 0%,
    rgba(0, 14, 36, 0.86) 28%,
    rgba(0, 14, 36, 0.60) 48%,
    rgba(0, 14, 36, 0.22) 70%,
    rgba(0, 14, 36, 0.04) 100%
  );
}

/* The Persian hero has its text on the right. */
html[dir="rtl"] .hero-slide::before,
html[lang="fa"] .hero-slide::before {
  transform: scaleX(-1);
}

@media (max-width: 560px) {
  .hero-slide::before {
    background: linear-gradient(
      90deg,
      rgba(0, 14, 36, 0.91) 0%,
      rgba(0, 14, 36, 0.74) 45%,
      rgba(0, 14, 36, 0.38) 100%
    );
  }
}