.scroll_title {
  background: #294a70;
  color: #fff;
  font-size: 18px;
  white-space: nowrap;
}

.marquee {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  animation: marquee 25s linear infinite;
}

@keyframes marquee {
  0% {
    text-indent: 90%;
  }
  100% {
    text-indent: -100%;
  }
}

.marquee a {
  color: #f4a024;
  font-size: 18px;
  font-weight: bolder;
}

.marquee-item {
  margin-right: 2rem;
  ::before {
    content: ">";
    margin-right: 0.5rem;
    color: #c2801e;
  }
}

.marquee:hover {
  animation-play-state: paused;
}

.blink {
  animation: blink-animation 1s steps(5, start) infinite;
  -webkit-animation: blink-animation 1s steps(5, start) infinite;
}

@keyframes blink-animation {
  to {
    visibility: hidden;
  }
}
@-webkit-keyframes blink-animation {
  to {
    visibility: hidden;
  }
}

.verticalMarqueeDiv {
  padding: 0;
  height: 150px;
  overflow: hidden;
  position: relative;
}

.verticalMarquee {
  padding-left: 0.5rem;
  list-style: none;
  position: absolute;
  width: 100%;
  animation: verticalMarquee linear infinite;
  font-weight: bolder;
}

.verticalMarquee:hover {
  animation-play-state: paused;
}

@keyframes verticalMarquee {
  0% {
    transform: translateY(100px);
  }
  100% {
    transform: translateY(-100%);
  }
}