@keyframes levitate-1 {
  0%,
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
  25% {
    transform: translate(0.2rem, -0.2rem) rotate(1deg);
  }
  50% {
    transform: translate(0, 0) rotate(0deg);
  }
  75% {
    transform: translate(-0.2rem, 0.2rem) rotate(-1deg);
  }
}

@keyframes levitate-2 {
  0%,
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
  25% {
    transform: translate(-0.3rem, -0.3rem) rotate(-1deg);
  }
  50% {
    transform: translate(0, 0) rotate(0deg);
  }
  75% {
    transform: translate(0.3rem, 0.3rem) rotate(1deg);
  }
}

@keyframes levitate-3 {
  0%,
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
  25% {
    transform: translate(0.2rem, -0.2rem) rotate(0.5deg);
  }
  50% {
    transform: translate(0.2rem, 0.2rem) rotate(0.5deg);
  }
  75% {
    transform: translate(-0.2rem, 0.2rem) rotate(-0.5deg);
  }
}

@keyframes levitate-4 {
  0%,
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
  25% {
    transform: translate(0.4rem, -0.4rem) rotate(-0.8deg);
  }
  50% {
    transform: translate(0, 0) rotate(0deg);
  }
  75% {
    transform: translate(-0.4rem, 0.4rem) rotate(0.8deg);
  }
}

@keyframes levitate-5 {
  0%,
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
  25% {
    transform: translate(0.5rem, -0.5rem) rotate(1.5deg);
  }
  50% {
    transform: translate(0.5rem, 0.5rem) rotate(1.5deg);
  }
  75% {
    transform: translate(-0.5rem, 0.5rem) rotate(-1.5deg);
  }
}

@keyframes levitate-6 {
  0%,
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
  25% {
    transform: translate(-0.2rem, -0.2rem) rotate(-0.5deg);
  }
  50% {
    transform: translate(-0.2rem, 0.2rem) rotate(-0.5deg);
  }
  75% {
    transform: translate(0.2rem, 0.2rem) rotate(0.5deg);
  }
}

.spotlight-image-1 {
  width: 4rem;
  height: 4rem;
  flex-shrink: 0;
  left: -1rem;
  top: -1rem;
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(32px);
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: levitate-1 6s ease-in-out infinite;
  animation-delay: 0.5s;
}

.spotlight-image-1 .spotlight-image-logo {
  max-width: var(--max-width-spotlight-image-1);
  width: 2.55rem;
  height: 0.3rem;
  flex-shrink: 0;
}

.spotlight-image-2 {
  width: 4rem;
  height: 4rem;
  flex-shrink: 0;
  right: -1rem;
  top: -1rem;
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(32px);
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: levitate-2 7.5s ease-in-out infinite;
  animation-delay: 1.5s;
}

.spotlight-image-2 .spotlight-image-logo {
  max-width: var(--max-width-spotlight-image-2);
  width: 2.3rem;
  height: 0.5rem;
  flex-shrink: 0;
}

.spotlight-image-3 {
  width: 3rem;
  height: 3rem;
  flex-shrink: 0;
  right: -1rem;
  bottom: 4rem;
  background: var(--Basic-White, #fff);
  border: 1px solid rgba(220, 220, 228, 0.32);
  filter: drop-shadow(0px 16px 32px rgba(0, 0, 0, 0.08));
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: levitate-3 5s ease-in-out infinite;
  animation-delay: 3s;
}

.spotlight-image-3 .spotlight-image-logo {
  max-width: var(--max-width-spotlight-image-3);
  width: 2.15rem;
  height: 0.5rem;
  flex-shrink: 0;
}

.spotlight-image-4 {
  width: 4rem;
  height: 4rem;
  flex-shrink: 0;
  right: 1rem;
  bottom: -1rem;
  background: var(--Basic-White, #fff);
  border: 1px solid rgba(220, 220, 228, 0.32);
  filter: drop-shadow(0px 16px 32px rgba(0, 0, 0, 0.08));
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: levitate-4 5.2s ease-in-out infinite;
  animation-delay: 0.5s;
}

.spotlight-image-4 .spotlight-image-logo {
  max-width: var(--max-width-spotlight-image-4);
  width: 2.85rem;
  height: 0.75rem;
  flex-shrink: 0;
}

.spotlight-image-5 {
  max-width: var(--max-width-spotlight-image-5);
  width: 4rem;
  height: 4rem;
  position: absolute;
  left: 1rem;
  bottom: -2rem;
  background: #2b272d;
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: levitate-5 4.8s ease-in-out infinite;
  animation-delay: 2.2s;
}

.spotlight-image-5 .spotlight-image-logo {
  width: 2.5rem;
  height: 1.2rem;
}

.spotlight-image-6 {
  width: 3rem;
  height: 3rem;
  flex-shrink: 0;
  left: -1rem;
  top: 50%;
  transform: translateY(-50%);
  background: var(--Basic-White, #fff);
  border: 1px solid rgba(220, 220, 228, 0.32);
  filter: drop-shadow(0px 16px 32px rgba(0, 0, 0, 0.08));
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: levitate-6 5.2s ease-in-out infinite;
  animation-delay: 1.3s;
}

.spotlight-image-6 .spotlight-image-logo {
  max-width: var(--max-width-spotlight-image-6);
  width: 1.5rem;
  height: 0.6rem;
  flex-shrink: 0;
}

@media (min-width: 767px) {
  .spotlight-image-1 {
    width: 11.25rem;
    height: 11.25rem;
    left: 3rem;
  }
  .spotlight-image-1 .spotlight-image-logo {
    width: 7.15rem;
    height: 0.75rem;
  }
  .spotlight-image-2 {
    top: -6rem;
    right: 5rem;
    width: 11.25rem;
    height: 11.25rem;
  }
  .spotlight-image-2 .spotlight-image-logo {
    width: 6.45rem;
    height: 1.3rem;
  }
  .spotlight-image-3 {
    top: 17rem;
    right: 2rem;
    width: 7.65rem;
    height: 7.65rem;
  }
  .spotlight-image-3 .spotlight-image-logo {
    width: 5.45rem;
    height: 1.25rem;
  }
  .spotlight-image-4 {
    right: 5rem;
    width: 7.65rem;
    height: 7.65rem;
  }
  .spotlight-image-4 .spotlight-image-logo {
    width: 5.45rem;
    height: 1.4rem;
  }

  .spotlight-image-5 {
    left: 5rem;
    width: 9.4rem;
    height: 9.4rem;
  }
  .spotlight-image-5 .spotlight-image-logo {
    width: 5.45rem;
    height: 1.4rem;
  }
  .spotlight-image-6 {
    left: -1rem;
    width: 7.65rem;
    height: 7.65rem;
  }
  .spotlight-image-6 .spotlight-image-logo {
    width: 3.75rem;
    height: 1.5rem;
  }
}

@media (min-width: 1200px) {
  .spotlight-image-1 {
    top: -5rem;
    left: 6rem;
  }
  .spotlight-image-2 {
    top: -3rem;
    right: 11rem;
  }
  .spotlight-image-3 {
    top: 35%;
    right: 6rem;
  }
  .spotlight-image-4 {
    right: 20%;
    bottom: -2rem;
  }
  .spotlight-image-5 {
    left: 15rem;
  }
  .spotlight-image-6 {
    left: 2rem;
  }
}