.steps-vertical{
  .step-wrap{
    display: flex;
    align-items: center;
    padding-bottom: 76px;
    @media(max-width: 991px){
      flex-direction: column;
      padding-bottom: 0;
      div + div{
        margin-bottom: 30px;
      }
    }
    @media(max-width: 575px){
      div + div{
        margin-bottom: 20px;
      }
    }
    & + .step-wrap{
      margin-top: 65px;
      @media(max-width: 991px){
        margin-top: 60px;
      }
      @media(max-width: 575px){
        margin-top: 40px;
      }
    }
    &:nth-child(even){
      @media(min-width: 992px){
        flex-direction: row-reverse;
        .step-wrap__text{
          text-align: right;
        }
        .step-wrap__image{
          animation: bubble 3s linear infinite;

        }
      }

    }
    .step-wrap__text{
      width: 40%;
      @media(max-width: 991px){
        order: 3;
        width: 100%;
        text-align: center;
      }
    }
    .step-wrap__image{
      animation: bubble 5s linear infinite;
      background-image: linear-gradient(to top, $colorMain 0%, $colorMain3 100%);
      overflow: hidden;
      width: 40%;
      margin-top: 10px;

      @media(max-width: 991px){
        order: 2;
        width: 100%;
        margin-top: 0;
      }
      img{
        object-fit: cover;
        opacity: 0.7;
        width: 100%;
        height: 100%;
      }
    }
    .step-wrap__title{
      position: relative;
      width: 20%;
      text-align: center;
      align-self: flex-start;
      @media(max-width: 991px){
        order: 1;
        width: 100%;
      }
      h6{
        margin-bottom: 0;
      }

      h3{
        font-size: 50px;
      }
      &:after{
        content: '';
        -webkit-mask: url(../img/dots-vertical.png);
        -webkit-mask-repeat: no-repeat;
        background: $darkgreyColor;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: -288px;
        width: 10px;
        height: 194px;
        @media(max-width: 1200px){
          bottom: -200px;
        }
        @media(max-width: 991px){
          display: none;
        }
      }
    }
  }
}


.step-gorizontal{
  display: flex;
  height: 100%;
  @media(max-width: 768px){
    flex-direction: column;
  }
  .step{
    width: 33.3%;
    text-align: center;
    padding: 160px 85px 152px;
    @media(max-width: 1600px){
      padding: 160px 40px 152px;
    }
    @media(max-width: 1200px){
      padding: 130px 15px 128px;
    }
    @media(max-width: 991px){
      padding: 90px 15px 82px;
    }
    @media(max-width: 768px){
      padding: 60px 15px 60px;
      width: 100%;
    }
    $opacity: 1;
    @for $i from 1 through 6 {

      &:nth-child(#{$i}) { background: rgba($darkColor, $opacity)}
      $opacity:$opacity - 0.2;
    }

    .step-number{
      background: linear-gradient(to top, #dd4454 0%, #dd9044 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      h3{
        font-size: 100px;
        font-weight: 300;
        margin-bottom: 0;
        line-height: 0.7;
        @media(max-width: 768px){
          font-size: 50px;
        }
      }
    }
    h6{
      margin-top: 53px;
      margin-bottom: 23px;
      padding-bottom: 26px;
      position: relative;
      @media(max-width: 991px){
        margin-top: 23px;
      }
      &:after{
        content: '';
        display: inline-block;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 50px;
        height: 2px;
        background: $colorMain;
      }
    }
  }

}