/* Container that sets the visible height and hides the overflow */
.news-scroll-container {
  height: 200px; /* Adjust this value to show more or fewer news items at once */
  overflow: hidden;
  position: relative;
  width: 100%;
}

/* The track that moves the items upwards */
.news-scroll-track {
  display: block;
  margin: 0;
  padding: 0;
  /* 20s controls the speed. Increase for slower, decrease for faster */
  animation: news-vertical-scroll 20s linear infinite;
}

/* Pause the scrolling when the user hovers over the news box */
.news-scroll-container:hover .news-scroll-track {
  animation-play-state: paused;
}

/* Styling the individual news items */
.news-scroll-track li {
  list-style: none;
  padding: 12px 10px;
  border-bottom: 1px dashed #ccc; /* Separator between news items */
  line-height: 1.5;
}

.news-scroll-track li:last-child {
  border-bottom: none;
}

/* The Animation Keyframes */
/* It moves up by exactly 50% of its total height, then instantly resets */
@keyframes news-vertical-scroll {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-50%);
  }
}