.scrollbox {
  display: flex;
  align-items: center;
  padding: 15px 0;
  overflow: hidden;
      transform: rotate(-3deg);
        background: #181818;
}
.scrollbox--primary {
  color: #000;
}
.scrollbox--secondary {
  color: #000;
        margin: 50px 0;
}
.scrollbox--reverse .scrollbox__item {
  animation-direction: reverse;
}
.scrollbox:hover .scrollbox__item {
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
}
.scrollbox__item {
  flex: 1 0 auto;
  width: 20%;
  max-width: 20%;
  font-size: 1.5rem;
  transform: translateX(-100%);
  animation-name: somename;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  font-size: 32px;
  font-weight: 600;
  text-align: center;
}
@keyframes somename {
  0% {
    transform: translate(0);
  }
  100% {
    transform: translate(-33.33%);
  }
}

.scrollbox--reverse .scrollbox__item i{
  color: #FFFFFF1A;
  margin-right: 5px;
  font-size: 25px;
  font-weight: 900;
}
.scrollbox--reverse .scrollbox__item .red,.scrollbox--reverse .scrollbox__item .red i{
    color: #df2919;
}
.scrollbox--reverse .scrollbox__item .garry{
    color: #FFFFFF1A;
    -webkit-text-stroke: 1px #FFFFFF1A;
  -webkit-text-fill-color: transparent;
  -webkit-text-fill-color: transparent;
}
.scrollbox--reverse .scrollbox__item .garry2{
    color: #FFFFFF1A;
}
.scrollbox--reverse .scrollbox__item .white{
    color: #FFFFFF;
}

.scrollbox--reverse .scrollbox__item .garry3{
    color: #FFFFFF1A;
    -webkit-text-stroke: 1px #9C9C9C80;
  -webkit-text-fill-color: transparent;
  -webkit-text-fill-color: transparent;
}
.scrollbox2::before {
    background: #FFFFFF1A;
    content: "";
    width: 100%;
    height: 90%;
    position: absolute;
    top: 28%;
}
.scrollbox2 {
    position: relative;
}