@keyframes slider {
  0% {
    transform: translateX(calc(100% - 100vw));
  }
  50% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(100% - 100vw));
  }
}

.companies {
  display: flex;
  flex-direction: row-reverse;
  white-space: nowrap;
  overflow: hidden;
  margin: 2rem auto;
  direction: ltr;
}

.companies-title {
  text-transform: uppercase;
}

.companies-slider {
  white-space: nowrap;
  animation: 150s linear infinite slider;
}

.companies .company {
  height: 3rem;
  margin: 0 1rem;
   /* filter: grayscale() brightness(25%) invert(0); */
}

[DATA-MD-COLOR-SCHEME="SLATE"] .COMPANIES .COMPANY {
  FILTER: GRAYSCALE() BRIGHTNESS(25%) INVERT(1);
}

.companies .company img {
  height: 100%;
  max-height: 11em;
}

/* General RTL styling */
.rtl, [dir="rtl"] {
  direction: rtl;
  text-align: center; /* Center text for RTL */
  unicode-bidi: embed;
}

/* Ensure the entire hero content aligns center */
.rtl .mdx-hero, .mdx-hero[dir="rtl"] {
  text-align: center; /* Center text for hero content in RTL */
}

/* Specific alignment adjustments */
.rtl .mdx-hero__content, .mdx-hero__content[dir="rtl"] {
  text-align: center; /* Center text */
  display: block;
  margin-left: auto; /* Center the content */
  margin-right: auto; /* Center the content */
}

/* Correct alignment for all text elements */
.rtl h1, h1[dir="rtl"],
.rtl p, p[dir="rtl"],
.rtl a, a[dir="rtl"] { /* Corrects alignment for links */
  text-align: center; /* Center text */
}

/* Adjust button appearance and alignment */
.rtl .md-button, .md-button[dir="rtl"] {
  display: inline-block; /* Change from block to inline-block */
  text-align: center; /* Keeps text centered within the button */
  margin-right: 0; /* Adjust margin to control button spacing */
  margin-left: 0; /* Add this to reset margin */
  width: auto; /* Ensures buttons are only as wide as their content */
}