/* ================================
   MARQUEE
================================ */

.marquee {
  animation: scrollX 22s linear infinite;
}

@keyframes scrollX {
  0% {
    transform: translateX(0);
  }

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

.marquee:hover {
  animation-play-state: paused;
}

/* ================================
   CTA BUTTON
================================ */

.cta-btn {
  animation: floaty 3s ease-in-out infinite;
}

@keyframes floaty {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-5px);
  }
}

.cta-btn:hover {
  transform: translateY(-4px) scale(1.01);
}

/* Shine effect */
.cta-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -80%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255, 255, 255, 0.4),
    transparent
  );
  transform: skewX(-20deg);
}

.cta-btn:hover::before {
  animation: shineMove 0.8s forwards;
}

@keyframes shineMove {
  100% {
    left: 130%;
  }
}

/* CTA icon */
.cta-btn img {
  transition: transform 0.3s ease;
}

.cta-btn:hover img {
  transform: scale(1.1) rotate(4deg);
}

/* ================================
   SCROLLBAR
================================ */

* {
  scrollbar-width: thin;
  scrollbar-color: #e8560a transparent;
}

/* ================================
   HEADER OFFSET
================================ */

body {
  padding-top: 77px !important;
}