.hero-banner h1 {
  text-shadow: 2px 2px 6px rgba(0,0,0,0.7);
}

.scroll-container {
  position: relative;
  width: 100%;
  height: 50px;
  overflow: hidden;
  background: #f8f9fa; /* ticker background */
  border-top: 2px solid #0d6efd;
  border-bottom: 2px solid #0d6efd;
}

.scroll-text {
  display: inline-block;
  white-space: nowrap;
  padding-left: 100%;
  animation: scroll-left 66s linear infinite, gradient-shift 8s linear infinite;
  
  /* ? Gradient text styling */
  background: linear-gradient(270deg, #ff6b6b, #feca57, #48dbfb, #1dd1a1);
  background-size: 600% 600%; /* makes gradient shift smoother */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  font-family: 'Poppins', sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 50px;
}

.scroll-text:hover {
  animation-play-state: paused; /* pause both scroll + gradient on hover */
}

/* Horizontal scroll animation */
@keyframes scroll-left {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

/* Gradient animation */
@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}