/*******************************************************/
/******************* ## Features Area *******************/
/*******************************************************/
.feature-item
    transition: 0.5s
    border-radius: 10px
    margin-bottom: 30px
    padding: 40px 40px 20px
    background: $lighter-color
    border: 1px solid $border-color
    +res-bl(md)
        margin-top: 0
    +res-bl(xs)
        +gapLR(padding, 30px)
    .icon
        z-index: 1
        line-height: 1
        transition: 0.5s
        font-size: 55px
        position: relative
        margin-bottom: 50px
        color: $primary-color
        &:before
            content: ''
            +size(50px)
            z-index: -1
            transition: 0.5s
            background: white
            +poLB(15px, -10px)
            border-radius: 50%
    &:hover
        background: white
        border-radius: 20px
        box-shadow: 0px 10px 60px rgba(208, 208, 208, 0.25)
        .icon
            color: $secondary-color
            &:before
                background: rgba($secondary-rgb, 0.1)
        
    &.style-two
        background: white
        border-radius: 10px
        .icon
            margin-bottom: 18px
            color: $secondary-color
            &:before
                display: none
        .content
            h5
                margin-bottom: 0
                letter-spacing: -1px
            p
                transition: 0.5s
        &:hover
            background: $primary-color
            border-color: $primary-color
            box-shadow: 10px 4px 40px rgba(99, 171, 69, 0.5)
            .icon,
            .content p,
            .content h5 a
                color: white
                
    &.style-three
        border: none
        border-radius: 10px
        margin-bottom: 10px
        padding: 50px 50px 30px
        height: calc(100% - 10px)
        background: $heading-color
        +res-bl(ms)
            +gapLR(padding, 35px)
        +res-bl(xs)
            +gapLR(padding, 25px)
        .icon,
        .content p,
        .content h3 a,
        .content h6 a,
        .icon-title h5 a
            color: white
        .icon
            margin-bottom: 25px
            &:before
                display: none
        .content h3
            +res-bl(lb)
                font-size: 25px
        &.bgc-primary
            background: $primary-color
        &.bgc-secondary
            background: $secondary-color
        &.bgc-pink
            background: #FD4C5C
        .icon-title
            display: flex
            margin-bottom: 6px
            align-items: center
            .icon
                margin-right: 30px
                margin-bottom: 15px
                +res-bl(xs)
                    font-size: 45px
                    margin-right: 20px
            h5
                line-height: 1.3
                margin-top: -7px
                margin-bottom: 15px
                +res-bl(xs)
                    font-size: 20px

.features-content-part
    max-width: 580px
    .section-title
        max-width: 500px
        
.features-customer-box
    +res-ab(md)
        display: flex
        align-items: center
    .image
        flex: none
        max-width: 50%
        position: relative
        +res-bl(md)
            max-width: none
            +gapLR(margin, 15px)
    .content
        margin-left: -20%
        background: white
        border-radius: 20px
        padding: 50px 55px 40px 30%
        padding-left: calc(20% + 55px)
        border: 1px solid $border-color
        box-shadow: 0px 10px 60px rgba(208, 208, 208, 0.25)
        +res-bl(md)
            margin-left: 0
            margin-top: -35px
            padding: 70px 45px 30px
        +res-bl(xs)
            +gapLR(padding, 25px)
        h6
            font-size: 18px
            
.feature-authors
    display: flex
    align-items: center
    > *
        +size(50px)
        border-radius: 50%
        border: 2px solid white
    img
        margin-right: -15px
    > span
        color: white
        line-height: 46px
        text-align: center
        background: $secondary-color
        
/* Features Two */
.features-wrap-two
    +res-ab(lg)
        margin-right: -350px
        
.features-image-two
    img
        border-radius: 10px
        
/* Features Three */
.features-area-three
    +gapLR(margin, 30px)
    +res-bl(lg)
        +gapLR(margin, 15px)
    .row
        --bs-gutter-x: 10px
        
        
.about-feature-two
    .feature-item.style-two:hover
        background: $secondary-color
        border-color: $secondary-color
        box-shadow: 10px 4px 40px rgba(247, 146, 30, 0.5)
    .shape
        +poLT(0, 28px)
        max-width: 15%
        
/* Feature FAQ Page */
.faq-page-featuers
    .feature-item.style-three
        height: calc(100% - 30px)
        padding-bottom: 20px
        margin-bottom: 30px
        padding-top: 40px
        +res-ab(xs)
            +gapLR(padding, 40px)
        .icon
            font-size: 45px