.rkit-image-marquee-wrapper {
  --rkit-img-marquee-fade-color: white;
  --rkit-img-marquee-fade-size: 0px;
  --rkit-img-marquee-fading-width: 0%;
  display: flex;
  overflow: hidden;
}

.rkit-image-marquee-wrapper::before,
.rkit-image-marquee-wrapper::after {
  content: "";
  position: absolute;
  z-index: 9;
  top: 0;
  width: var(--rkit-img-marquee-fade-size);
  height: 100%;
  pointer-events: none;
}

.rkit-image-marquee-wrapper::before {
  left: 0;
  background: linear-gradient(
    to right,
    var(--rkit-img-marquee-fade-color) var(--rkit-img-marquee-fading-width),
    transparent 100%
  );
}

.rkit-image-marquee-wrapper::after {
  right: 0;
  background: linear-gradient(
    to left,
    var(--rkit-img-marquee-fade-color) var(--rkit-img-marquee-fading-width),
    transparent 100%
  );
}

.rkit-image-marquee-container {
  white-space: nowrap;
  width: 100%;
  display: flex;
  /* flex-direction: row; */
  --gap: 5rem;
  --speed: 20;
  /* gap: var(--gap);  */

}

.direction-column {
  flex-direction: column;
}

.direction-row {
  flex-direction: row;
}

.content-direction-column {
  flex-direction: column;
}

.content-direction-row {
  flex-direction: row;
}


.rkit-image-marquee {
  animation: image-marquee calc(100s / var(--speed)) infinite linear;
}

.rkit-image-marquee-verti {
  animation: image-marquee-vertical calc(100s / var(--speed)) infinite linear;
}

.rkit-image-marquee-container:hover .pause-hover {
  animation-play-state: paused;
}



.rkit-image-marquee-content {
  display: flex;
  align-items: center;
  /* flex-direction: row; */
  /* gap : 10px; */
}

.rkit-image-marquee-item-row {
  padding-right: var(--gap);
}

.rkit-image-marquee-item-column {
  padding-bottom: var(--gap);
}

.rkit-image-marquee-item-content {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
}


.image_box_image_marquee {
  height: auto;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  object-fit: cover;
  overflow: hidden;
}


.image_marquee_box img {
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  object-fit: cover;
}

.image_marquee_box {
  object-fit: cover;
  width: 100%;
}

@keyframes image-marquee {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-100%);
  }
}

@keyframes image-marquee-vertical {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-100%);
  }
}