.gradient-text {
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

@keyframes scrollUp {
  0% {
    transform: translateY(0%);
  }

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

.scrolling-text {
  animation: scrollUp linear infinite;
  animation-duration: 40s;

  /* Adjust speed here */
}

.marquee,
.marquee-reverse {
  display: grid;
  gap: 30px;
  animation: scroll 20s linear infinite;
}

.marquee-reverse {
  animation-direction: reverse;
}

.marquee-content {
  display: flex;
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

.marquee-image {
  height: 19rem;
  object-fit: contain;
  margin: 0 1rem;
  border-radius: 0.5rem;
}

.show-username-list {
  box-shadow: rgba(239, 239, 239, 0.25) 0px 30px 60px -12px inset,
    rgba(216, 216, 216, 0.3) 0px 18px 36px -18px inset;
  height: 65vh;
}

.show-username-container {
  position: relative;
}
.title-card {
  position: absolute;
  right: -85px;
  top: 20px;
  rotate: -10deg;
}

.discription-card {
  position: absolute;
  left: -85px;
  bottom: -65px;
  width: 50%;
  rotate: -2deg;
}

.image-card {
  position: absolute;
  left: -85px;
  top: 20px;
  rotate: -10deg;
  height: 200px;
  width: 200px;
}

.image-with-text-card {
  position: absolute;
  right: -65px;
  bottom: -90px;
  rotate: 3deg;
}

.card-image {
  height: 200px;
  width: 200px;
}

@media (max-width: 992px) {
  .title-card,
  .discription-card,
  .image-card,
  .image-with-text-card {
    display: none;
    visibility: hidden;
  }
}