/* marquee.css */

/* Container to hold the marquee */
.marquee-container {
    position: relative;	
    overflow: hidden;
	white-space: nowrap;	
	width: 100%; /* Full width */	
	color: #fff000;
    background-color: #C40C0C; /* Background color  */	
	display: flex;
    align-items: center; /* Vertical center alignment */
	margin: 2px 0;	
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);	
}

/* Marquee track (duplicated content for seamless scrolling) */
.marquee-content {
	font-family:'Manjari-Regular';
	font-size: 18px;	
	margin: 5px 0;
	
	display: inline-block;
	white-space: nowrap;	
	animation: scroll 40s linear infinite; /* Continuous scroll */
}

/* Duplicate content to remove gaps and enable smooth looping */
.marquee-content::after {
	content: attr(data-content);
	margin-left: 50px; /* Space between loops */
}

/* Adjust the animation duration and ensure smooth scroll */
@keyframes scroll {
  from {
    transform: translateX(30%);
  }
  to {
    transform: translateX(-100%);
  }
}

/* Add styles for content */
.marquee-content span {
	margin-right: 50px; /* Space between items */
	font-size: 18px; /* Adjust font size */
	color: #fff000; /* Text color */
}

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