[ Avaa Bypassed ]

.gsc-work-process{
   position: relative;
   overflow: hidden;
   padding: 0 15px;
   margin-bottom: 30px;
   .box-content{
      position: relative;
      margin: 0 auto 50px;
      padding: 0 10px;
      max-width: 100%;
      .box-line{
         background: $black;
         height: 6px;
         position: absolute;
         top: 50%;
         margin-top: -3px;
         width: 300px;
         @media(max-width: 768px){
            display: none;
         }
         &.line-left{
            right: 100%;
         }
         &.line-right{
            left: 100%;
         }
      }
      .box-background{
         @include size(100%, 100%);
         position: absolute;
         top: 0;
         left: 0;
         z-index: 1;
         background-size: cover;
      }
      .icon-inner{
         position: relative;
         left: 0;
         z-index: 11;
         width: 100%;
         text-align: center;
         .box-icon{
            display: inline-block;
            i{
               color: $white;
               font-size: 64px;
            }
            svg{
               fill: $white;
               width: 64px;
            }
         }
      }
      .number-text{
         @include size(60px, 60px);
         border-radius: 50%;
         background: $theme-color;
         color: $white;
         font-family: $headings-font-family;
         font-size: 20px;
         text-align: center;
         line-height: 60px;
         position: absolute;
         bottom: -30px;
         left: 50%;
         margin-left: -30px;
         z-index: 11;
         transition: all 0.35s;
         &:after{
            content: '';
            @include size(20px, 20px);
            background: $white;
            @include scale(0);
            position: absolute;
            top: -3px;
            right: -3px;
            z-index: 11;
            border-radius: 50%;
            transition: all 0.35s;
         }
      }
   }
   .box-title{
      text-align: center;
      font-size: 24px;
      margin-bottom: 0;
      @include media-breakpoint-down(lg){
         font-size: 20px;
      }
      @include media-breakpoint-down(md){
         font-size: 18px;
      }
   }
   &:hover, &.active{
      .box-content{
         .number-text{
            background: $theme-color;
            color: $black;
            &:after{
               @include scale(1);
            }
         }
      }
   }
}