.ticker-banner {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%; /* Changed from 100vw to 100% to prevent overflow */
  background-color: #1a8a5a; /* Green background color */
  overflow: hidden;
  white-space: nowrap;
  height: 40px;
  display: flex;
  align-items: center;
  z-index: 40; /* Ensure it's above other content but below navbar */
  cursor: pointer; /* Show pointer cursor to indicate it's clickable */
  transition: background-color 0.3s ease; /* Smooth transition for hover effect */
}

.ticker-banner:hover {
  background-color: #0e6e44; /* Darker green on hover */
}

.ticker-content {
  display: inline-flex; /* Changed to inline-flex for better control */
  animation: ticker 20s linear infinite;
  color: white;
  font-weight: 500;
  font-family: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
  width: max-content; /* Ensure content takes up its natural width */
}

/* Pause animation on hover */
.ticker-banner:hover .ticker-content {
  animation-play-state: paused;
}

.ticker-content span {
  margin-right: 30px; /* Reduced margin for less gap */
  white-space: nowrap;
}

.ticker-content .highlight {
  color: #3DF9A4; /* Highlight "0 Fees" in a brighter green */
  font-weight: 700;
}

@keyframes ticker {
  0% {
    transform: translate3d(0, 0, 0); /* Start from the right edge */
  }
  100% {
    transform: translate3d(-50%, 0, 0); /* Move left by 50% of the content width */
  }
}