.carousel-inner {
  max-height: 180vh;
}






.slide-1 {
  background-image: linear-gradient(to top, #0c1722, #0b1827);
}

.heroes {
  position: absolute;
  top: 50%; /* Centers vertically */
  left: 100%; /* Centers horizontally */
  z-index: 10; /* Ensure the banner is on top of all clouds */
  width: 80%; /* Adjust the width if necessary */
  animation: glowinout-less 1.6s linear infinite;
}

@media (min-width: 1024px) {
  .heroes {
    margin-top: -200px;
  }
}

.text-overlay-img {
  position: absolute;
  top: 0;
  left: 0;
  animation: glowinout-less 1.6s linear infinite;
}

.cloud1 {
  position: absolute;
  top: -10vw;
  left: 0;
  max-width: 600px;
  z-index: 2;
  animation: animateCloud 50s linear infinite;
}

.cloud2 {
  position: absolute;
  top: 0;
  left: 0;
  max-width: 500px;
  z-index: 2;
  animation: animateCloud 35s linear infinite;
}

.cloud3 {
  position: absolute;
  top: 0;
  left: 0;
  max-width: 600px;
  animation: animateCloud 80s linear infinite;
}

.cloud4 {
  position: absolute;
  top: 50px;
  left: 0;
  max-width: 55%;
  z-index: 2;
  animation: animateCloud 70s linear infinite;
  animation-delay: -40s;
}

.cloud5 {
  position: absolute;
  top: 150px;
  left: 0;
  max-width: 50%;
  animation: animateCloud 40s linear infinite;
  animation-delay: -35s;
}

.cloud6 {
  position: absolute;
  top: 275px;
  left: 0;
  max-width: 30%;
  animation: animateCloud 30s linear infinite;
  animation-delay: -10s;
}

@keyframes animateCloud {
  0% {
    transform: translateX(-100%) scale(1);
  }

  100% {
    transform: translateX(110vw) scale(1);
  }
}

.slide-1 singleStar {
  position: absolute;
  background: #fff;
  border-radius: 50%;
  animation: animateStar linear infinite;
}

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

  10%,
  90% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateY(-100px);
  }
}

.slide-2 .img-sunrays {
  position: absolute;
  top: 0;
  left: 4vw;
  max-width: 30vw;
  height: auto;
  animation: sunrays-rotate 6s linear infinite;
}

.slide-2 .img-card-club,
.slide-2 .img-card-heart,
.slide-2 .img-card-spade {
  position: absolute;
  top: 12vw;
  left: 15vw;
  transform-origin: bottom;
  max-width: 20vw;
  height: auto;
  transition: 0.4s ease;
  animation: tilt-in-fwd-tr 1.2s ease-out;
}

.img-cards .img-card-club {
  transform: rotate(-15deg);
}

.img-cards .img-card-heart {
  transform: rotate(5deg);
}

.img-cards .img-card-spade {
  transform: rotate(25deg);
}

.slide-2 .img-logo {
  position: absolute;
  top: 20vw;
  left: 50vw;
  max-width: 25vw;
  height: auto;
  animation: bounce-2 2s ease-in, glowinout 2s linear infinite;
}

@keyframes glowinout-less {
  50% {
    filter: drop-shadow(0 0 13px yellow);
  }
}

@keyframes glowinout {
  50% {
    filter: drop-shadow(5px 5px 50px yellow);
  }
}

@keyframes sunrays-rotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes bounce-2 {
  0% {
    left: 90vw;
  }

  100% {
    left: 50vw;
  }
}

@keyframes tilt-in-fwd-tr {
  0% {
    transform: rotateY(20deg) rotateX(35deg) translate(300px, -300px)
      skew(-35deg, 10deg);
    opacity: 0;
  }

  100% {
    transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
    opacity: 1;
  }
}

@keyframes kenburns-top {
  0% {
    transform: scale(1) translateY(0);
    transform-origin: 50% 16%;
  }

  100% {
    transform: scale(1.25) translateY(-15px);
    transform-origin: top;
  }
}

@media (max-width: 575.98px) {
  .slide-1 singleStar {
    display: none;
  }
}

@media all and (max-width: 768px) {
  .slide-1 singleStar {
    display: none;
  }
}

@media(max-width: 768px){
  .cloud1 {
    position: absolute;
    top: -10vw;
    left: 0;
    max-width: 100vw;
    z-index: 2;
    animation: animateCloud 50s linear infinite;
  }
  
  .cloud2 {
    position: absolute;
    top: 0;
    left: 0;
    max-width: 100vw;
    z-index: 2;
    animation: animateCloud 35s linear infinite;
  }
  
  .cloud3 {
    position: absolute;
    top: 0;
    left: 0;
    max-width: 600px;
    animation: animateCloud 80s linear infinite;
  }
  
  .cloud4 {
    position: absolute;
    top: 50px;
    left: 0;
    max-width: 100vw;
    z-index: 2;
    animation: animateCloud 70s linear infinite;
    animation-delay: -40s;
  }
  
  .cloud5 {
    position: absolute;
    top: 150px;
    left: 0;
    max-width: 100vw;
    animation: animateCloud 40s linear infinite;
    animation-delay: -35s;
  }
  
  .cloud6 {
    position: absolute;
    top: 275px;
    left: 0;
    max-width: 100vw;
    animation: animateCloud 30s linear infinite;
    animation-delay: -10s;
  }

}