/*******************************************************/
/**************** 18. Work Process Area ****************/
/*******************************************************/
.work-process-item
    text-align: center
    margin-bottom: 30px
    +gapLR(padding, 15px)
    +res-bl(sm)
        margin-top: 0
    .icon
        z-index: 1
        padding: 15px
        position: relative
        margin-bottom: 20px
        display: inline-block
        .number
            z-index: -1
            opacity: 0.15
            line-height: 1
            font-size: 85px
            transition: 0.5s
            font-weight: 700
            position: absolute
            color: transparent
            -webkit-text-stroke: 1px
            -webkit-text-stroke-color: $heading-color
            transform: translate(-70%, -60%) rotate(-50deg)
            +res-bl(sm)
                font-size: 65px
        i
            color: white
            font-size: 65px
            transition: 0.5s
            display: inline-block
            +circle($primary-color, 120px)
            +res-bl(sm)
                +size(80px)
                font-size: 35px
                line-height: 80px
            &:before
                line-height: inherit
        &:before
            position: absolute
            z-index: -1
            +size(100%)
            content: ''
            left: 0
            top: 0
            transition: 0.5s
            border-radius: 50%
            transform: scale(0)
            border: 2px dashed $secondary-color
    p
        font-size: 18px
    &:hover
        .icon
            i
                background: $secondary-color
            &:before
                transform: scale(1)
                animation: rotated_circle 5s linear infinite
                animation-delay: 0.5s
        
.work-process-shape
    position: absolute
    width: 110%
    top: -10%
    left: -5%
    z-index: -1
    +res-bl(lg)
        top: 0
    +res-bl(sm)
        display: none