/*******************************************************/
/****************** 12. Features Area ******************/
/*******************************************************/
.feature-item
    text-align: center
    margin-bottom: 30px
    .image
        height: 150px
        padding: 25px
        transition: 0.5s
        +flexcenter(center)
        border-radius: 7px 7px 0 0
        border: 1px solid $border-color
    h5
        color: white
        transition: 0.5s
        margin-bottom: 0
        padding: 9px 15px
        border-radius: 0 0 7px 7px
        background: $secondary-color
    &:hover
        .image
            border-color: white
            @extend %box-shadow
        h5
            background: $primary-color
            
.support-features-content
    p
        +res-ab(xs)
            font-size: 18px
            
/* Feature Two */
.feature-item-two
    border-radius: 7px
    margin-bottom: 30px
    background: #f4f9ff
    padding: 40px 30px 20px 40px
    +res-bl(md)
        margin-top: 0
    .icon
        color: white
        margin-bottom: 25px
        +circle($primary-color, 40px)
    &.color-two
        background: #effafe
        .icon
            background: $secondary-color
    &.color-three
        background: #fef9ed
        .icon
            background: $yellow-color
    &.color-four
        background: #f9f2ff
        .icon
            background: #8400ff
            
/* Feature Three */
.feature-item-three
    background: white
    border-radius: 7px
    padding: 25px 35px 10px
    box-shadow: 10px 0 60px rgba(219, 219, 219, 0.5)
    +res-ab(xs)
        display: flex
    +res-bl(ms)
        +gapLR(padding, 25px)
    > i
        font-size: 55px
        margin-top: 10px
        margin-right: 25px
        color: $secondary-color
        +res-bl(xs)
            margin: 0 0 15px 0
            display: inline-block
    .content
        h4
            font-size: 22px
    &.color-two
        > i
            color: $primary-color
    &.color-three
        > i
            color: $yellow-color
    &.color-four
        > i
            color: #8400ff
        
/* Feature With Image */
.feature-with-image
    flex-wrap: wrap
    +flexcenter(space-between)
    &:not(:last-child)
        margin-bottom: 80px
    &:nth-child(odd)
        .feature-image
            +res-ab(xl)
                margin-left: 100px
    &:nth-child(even)
        .feature-content
            +res-ab(xl)
                margin-left: 100px
    .feature-image,
    .feature-content
        width: 40%
        +res-bl(lg)
            width: 48%
        +res-bl(md)
            width: 100%
    .feature-image
        max-width: 495px
        +res-bl(md)
            margin-bottom: 35px
    .feature-content
        max-width: 410px
        +res-bl(md)
            order: 2
            max-width: none
        h3
            margin-bottom: 20px
            +res-ab(xs)
                font-size: 35px
        .read-more
            font-size: 18px
            margin-top: 15px
            color: $secondary-color
            i
                color: $secondary-color
            &:hover
                color: $yellow-color
                i
                    color: $yellow-color
    .feature-shape
        max-width: 15%
        text-align: center
        +res-bl(lg)
            display: none
            
/* Feature Four */
.feature-item-four
    transition: 0.5s
    margin-bottom: 30px
    padding: 30px 40px 20px
    border: 1px solid $border-color
    +res-bl(xs)
        +gapLR(padding, 25px)
    h4
        display: flex
        font-size: 22px
        align-items: center
        margin-bottom: 15px
        +res-bl(lg)
            font-size: 20px
        i
            line-height: 0
            font-size: 55px
            margin-top: 3px
            margin-right: 20px
            color: $primary-color
            +res-bl(xs)
                font-size: 45px
                margin-right: 15px
    &:hover
        border-color: white
        box-shadow: 10px 0 60px rgba(195, 195, 195, 0.3)
        
.text-white
    .feature-with-image
        p
            opacity: 0.6
            
/* Feature Five */
.feature-item-five
    transition: 0.5s
    text-align: center
    padding: 35px 20px
    border-radius: 7px
    margin-bottom: 30px
    background-color: white
    &:before
        transition: 0.5s
        border-radius: 5px
    i
        line-height: 1
        font-size: 60px
        transition: 0.5s
        margin-bottom: 10px
        color: $orange-color
        display: inline-block
    h5
        transition: 0.5s
        margin-bottom: 0
    &:hover
        background-size: cover
        transform: translateY(-15px)
        background-color: $orange-color
        background-image: url(../images/shapes/feature-bg.png)
        i, h5, h5 a
            color: white
        
/* Core Design Featured */  
.feature-middle
    .image
        max-width: 100%
        padding-top: 45px
        position: relative
        margin-bottom: -100px
        +container(max-content)
        .circle-text
            top: 0
            left: 50%
            max-width: 100%
            position: absolute
            transform: translate(-51%)
        .round
            border-radius: 200px
    .service-item
        +res-bl(lg)
            margin-top: 0
            
.feature-left
    +res-ab(lg)
        > .row
            > div
                &:first-child
                    .service-item
                        margin-left: 30px
                &:last-child
                    .service-item
                        margin-right: 30px
.feature-right
    +res-ab(lg)
        > .row
            > div
                &:first-child
                    .service-item
                        margin-right: 30px
                &:last-child
                    .service-item
                        margin-left: 30px
    .service-item
        +res-bl(lg)
            margin-top: 0
                
.design-feature-shapes
    .shape
        z-index: -1
        position: absolute
        &.dots
            top: 15%
            right: 8%
            max-width: 10%
            animation: rotated_circle 30s infinite
        &.wave-line
            max-width: 35%
            left: 0
            bottom: 0
            animation: down-up-one 10s infinite
            
/* Feature Six */
.freature-area-six
    margin-top: -250px
    transform: translateY(250px)
.feature-six-inner
    padding: 80px 80px 50px
    +res-bl(md)
        +gapLR(padding, 25px)
    .feature-item-three
        margin-bottom: 30px
        +res-bl(ms)
            display: block
            
/* Feature Seven */
.feature-item-seven
    text-align: center
    border-radius: 7px
    margin-bottom: 30px
    padding: 35px 25px 28px
    background: rgba(49, 128, 252, 0.05)
    +res-bl(sm)
        margin-top: 0
    .icon
        +size(70px)
        color: white
        font-size: 40px
        line-height: 70px
        border-radius: 7px
        margin: 0 auto 22px
        background: rgba(49, 128, 252, 1)
        box-shadow: 10px 0 60px rgba(49, 128, 252, 0.55)
        i
            &:before
                line-height: inherit
    p
        margin-bottom: 0
    &.color-two
        background: rgba(22, 180, 242, 0.05)
        .icon
            background: rgba(22, 180, 242, 1)
            box-shadow: 10px 0 60px rgba(22, 180, 242, 0.55)
    &.color-three
        background: rgba(241, 176, 0, 0.05)
        .icon
            background: rgba(241, 176, 0, 1)
            box-shadow: 10px 0 60px rgba(241, 176, 0, 0.55)
    &.color-four
        background: rgba(132, 0, 255, 0.05)
        .icon
            background: rgba(132, 0, 255, 1)
            box-shadow: 10px 0 60px rgba(132, 0, 255, 0.55)
    &.color-five
        background: rgba(255, 117, 6, 0.05)
        .icon
            background: rgba(255, 117, 6, 1)
            box-shadow: 10px 0 60px rgba(255, 117, 6, 0.55)