/*--------------------------------------------------------------
  29. Text Moving
----------------------------------------------------------------*/
.cs-text-moving-wrap {
  overflow: hidden;
  .cs_text-moving_in {
    display: flex;
    flex-wrap: nowrap;
    white-space: nowrap;
    min-width: 100%;
    gap: 70px;
  }

  .cs_text-moving {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 70px;
    animation: slide-left 20s linear infinite;
    h2 {
      transition: all 0.3s ease;
      &:hover {
        color: $accent;
        transition: all 0.3s ease;
      }
    }
  }
  &.cs-moving-text-with-bg{
    background: $accent;
    padding: 20px 0px;
    h2{
      color: $white;
      &:hover{
        color: $white;
        opacity: 0.8;
        transition: all 0.4s ease;
      }
    }
  }
}

@media screen and (max-width: 576px) {
   .cs-text-moving-wrap{
    .cs_text-moving {
        gap: 30px;
        h2 {
          font-size: 60px;
        }
        svg{
            max-height: 50px;
        }
      }
   }
  }

.cs_animation_speed_10 {
  animation: slide-left 10s linear infinite;
}

.cs_animation_speed_30 {
  animation: slide-left 30s linear infinite;
}

.cs_animation_speed_40 {
  animation: slide-left 40s linear infinite;
}

.cs_animation_speed_50 {
  animation: slide-left 50s linear infinite;
}

.cs_text-moving_hover_push:hover .cs_text-moving {
  animation-play-state: paused;
}

@keyframes slide-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}