/*******************************************************/
/**************** ## Work Process Area ****************/
/*******************************************************/
.work-process-line
    margin-bottom: -95px
    +res-bl(sm)
        margin-bottom: -60px
.work-process-item
    margin-bottom: 30px
    +res-bl(sm)
        margin-top: 0
    .number
        +size(80px)
        color: white
        font-size: 24px
        transition: 0.5s
        font-weight: 700
        line-height: 60px
        margin-left: 40px
        text-align: center
        border-radius: 50%
        margin-bottom: 30px
        box-shadow: $box-shadow
        border: 10px solid white
        font-family: $heading-font
        background: $secondary-color
    .content
        transition: 0.5s
        position: relative
        background: $lighter-color
        padding: 35px 28px 16px 30px
        p, h4
            transition: 0.5s
        &:before
            position: absolute
            content: ''
            left: 33px
            bottom: 100%
            transition: 0.5s
            border-right: 22px solid transparent
            border-bottom: 15px solid $lighter-color
    &:hover
        .number
            color: $heading-color
            background: $primary-color
        .content
            background: $secondary-color
            p, h4
                color: white
            &:before
                border-bottom-color: $secondary-color
            
/* Work Process Two */
.work-process-item-two
    margin-bottom: 30px
    +res-bl(sm)
        margin-top: 0
    .image
        margin-right: 50px
        position: relative
        img
            width: 100%
        .number
            +size(55px)
            color: white
            font-size: 18px
            transition: 0.5s
            font-weight: 600
            line-height: 47px
            text-align: center
            border-radius: 50%
            box-shadow: $box-shadow
            border: 4px solid white
            font-family: $heading-font
            background: $secondary-color
            +poRB(-27px)
    .content
        transition: 0.5s
        margin-left: 50px
        padding: 33px 28px 15px
        background: $lighter-color
        +res-bl(md)
            margin-left: 15px
            +gapLR(padding, 20px)
        h5
            margin-bottom: 10px
            +res-ab(xs)
                font-size: 20px
        p
            line-height: 30px
    &:hover
        .image
            .number
                color: $heading-color
                background: $primary-color
        .content
            background: white
            box-shadow: $box-shadow
            
.work-process-area-two
    .work-process-line-two
        position: absolute
        text-align: center
        width: 100%
        left: 0
        top: 45%
        z-index: -1