/* Marquee Animation Styles */
.marquee {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

.marquee-content {
  display: flex;
  animation: marquee var(--duration, 30s) linear infinite;
  white-space: nowrap;
}

.marquee-content span {
  padding-right: 100px; /* Space between repeated text */
  flex-shrink: 0;
}

@keyframes marquee {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}

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

/* Responsive adjustments */
@media (max-width: 768px) {
  .marquee-content {
    animation-duration: 20s;
  }
  
  .marquee-content span {
    padding-right: 50px;
  }
}

/* Additional styles for better visibility */
.marquee-container {
  background: linear-gradient(90deg, 
    rgba(251, 191, 36, 0.1) 0%, 
    rgba(251, 191, 36, 1) 10%, 
    rgba(251, 191, 36, 1) 90%, 
    rgba(251, 191, 36, 0.1) 100%
  );
}