.vh-work-process {
  &__box {
    width: 125px;
    height: 125px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    border-radius: 50%;
    border-width: 2px;
    border-style: dashed;
    
    &::after {
      content: "";
      width: 20px;
      height: 20px;
      border-radius: 50%;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      overflow: hidden;
      margin: auto;
      animation: circle 6s linear infinite;
    }
    &--orange {
        border-color: $primary;
        &::after {
            background-image: linear-gradient(0deg, $bg-8 0%, $bg-7 100%);
        }
    }
    &--purple {
        border-color: $bg-3;
        &::after {
            background-image: linear-gradient(0deg, $bg-4 0%, $bg-3 100%);
        }
    }
    &--teal {
        border-color: $bg-1;
        &::after {
            background-image: linear-gradient(0deg, $bg-2 0%, $bg-1 100%);
        }
    }
  }
  &__icon {
    width: 75px;
    height: 75px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    font-size: 30px;
    font-family: $heading-font;
    font-weight: 700;
  }
}

@keyframes circle{
    0%{
      transform:rotate(0deg)
                translate(-60px)
                rotate(0deg);
    
    }
    100%{
      transform:rotate(360deg)
                translate(-60px)
                rotate(-360deg);
    }
  }
  