/*******************************************************/
/***************** 09. Feature Section *****************/
/*******************************************************/
.what-we-do-area
    position: relative
    &:after,
    &:before
        content: ''
        right: 0
        z-index: -1
        opacity: 0.07
        position: absolute
        background: $primary-color
    &:before
        +size(18%, 180%)
        top: 50%
        transform: translate(10%, -20%) rotate(25deg)
    &:after
        +size(18%, 150%)
        top: 0
        transform: translate(20%, -40%) rotate(-35deg)
.what-we-do-inner
    z-index: 2
    overflow: hidden
    background: white
    position: relative
    margin-top: -100px
    box-shadow: 10px 0 60px rgba(204, 163, 84, 0.1)
    &:after,
    &:before
        content: ''
        right: 0
        z-index: -1
        opacity: 0.07
        position: absolute
        background: $primary-color
    &:before
        +size(28%, 200%)
        top: 50%
        transform: translate(10%, -50%) rotate(25deg)
    &:after
        +size(28%, 150%)
        top: 0
        transform: translate(20%, -45%) rotate(-30deg)
.feature-image
    height: 100%
    min-height: 400px
    background-size: cover
    background-position: center
    
.what-we-do-content
    padding: 70px 50px 50px 10px
    +res-bl(xl)
        padding-left: 50px
    +res-bl(ms)
        +gapLR(padding, 25px)
    +res-bl(xs)
        +gapLR(padding, 20px)
    
.feature-item
    display: flex
    transition: 0.15s
    background: white
    border-radius: 5px
    margin-bottom: 30px
    padding: 25px 30px 10px
    outline-color: $border-color
    border: 1px solid $border-color
    +res-bl(ms)
        display: block
    +res-bl(xs)
        +gapLR(padding, 15px)
    .icon
        flex: none
        width: 60px
        font-size: 60px
        color: $primary-color
        margin: 5px 20px 15px 0
    &:hover
        outline: 2px solid $border-color
    &.style-two
        border: none
        outline: none
        background: $black-color
        .icon
            width: 50px
            font-size: 45px
        h4
            a:not(:hover)
                color: white
        p
            color: white
            opacity: 0.6
            
/* Feature Two */
.feature-item-two
    border-radius: 7px
    padding: 20px 30px
    margin-bottom: 30px
    align-items: center
    background: $lighter-color-two
    border: 1px solid transparentize($black-color, 0.85)
    +res-ab(xs)
        display: flex
    .icon
        flex: none
        color: white
        font-size: 40px
        margin-right: 20px
        +circle($primary-color, 75px)
        +res-bl(xs)
            margin-bottom: 15px
        i:before
            line-height: inherit
    h3
        margin-bottom: 8px
        +res-bl(lg)
            font-size: 20px
    p
        margin-bottom: 0
        line-height: 1.55
        
/* Services Three */
.services-area-three
    +overlay($black-color, 1)
    &:before
        mix-blend-mode: multiply