/*******************************************************/
/**************** 12. Pricing Plan Area ****************/
/*******************************************************/
.pricing-plan-area
    +overlay($black-color, 0.85)
    &:before
        mix-blend-mode: multiply
.price-tab
    +gapLR(margin, -1.5px)
    +res-bl(lg)
        justify-content: center
    .nav-item
        margin: 1.5px
        +res-bl(lg)
            min-width: 130px
            flex-grow: initial
    .nav-link
        min-height: 121px
        position: relative
        text-align: center
        border: 1px solid $border-color
        +res-bl(sm)
            min-height: 55px
        i
            top: 15px
            font-size: 55px
            transition: 0.25s
            position: absolute
            color: $heading-color
            transform: translate(-50%)
            +res-bl(sm)
                display: none
        span
            left: 50%
            width: 100%
            bottom: 10px
            display: block
            font-size: 14px
            @extend %heading
            transition: 0.25s
            position: absolute
            transform: translate(-50%)
            text-transform: uppercase
        &.active
            background: $primary-color
            border-color: $primary-color
            i
                top: 50%
                opacity: 0.2
                color: white
                font-size: 75px
                transform: translate(-50%, -50%)
            span
                bottom: 50%
                color: white
                transform: translate(-50%, 50%)
.price-tab-wrap
    +res-bl(md)
        +gapLR(padding, 5px)
                
.price-tab-content
    +gapLR(padding, 20px)
                
.price-item
    z-index: 1
    display: flex
    overflow: hidden
    margin-top: 30px
    position: relative
    border-radius: 5px
    padding: 18px 35px
    align-items: center
    background: transparentize($primary-color, 0.9)
    +res-bl(sm)
        flex-wrap: wrap
        +gapLR(padding, 25px)
    .image
        flex: none
        max-width: 90px
        margin-right: 30px
        +res-bl(sm)
            margin-bottom: 15px
        img
            border-radius: 50%
        &:after,
        &:before
            +size(15%, 150%)
            content: ''
            right: 0
            z-index: -1
            transition: 0.5s
            position: absolute
            background: rgba(214, 163, 84, 0.05)
        &:before
            top: 50%
            transform: translate(10%, -30%) rotate(30deg)
        &:after
            top: 0
            transform: translate(50%, -35%) rotate(-35deg)
    .content
        margin-right: auto
        h5
            margin-bottom: 6px
        +res-bl(sm)
            order: 2
            width: 100%
    .price
        font-size: 30px
        font-weight: 500
        margin-top: 15px
        color: $primary-color
        align-self: self-start
        font-family: $heading-font
        +res-bl(sm)
            margin-left: auto
    &:after,
    &:before
        +size(15%, 150%)
        content: ''
        left: 0
        z-index: -1
        transition: 0.5s
        position: absolute
        background: rgba(214, 163, 84, 0.05)
    &:before
        top: 50%
        transform: translate(-10%, -50%) rotate(-30deg)
    &:after
        top: 0
        transform: translate(-50%, -35%) rotate(35deg)
    
/* Pricing Area Two */
.price-item-two
    position: relative
    border-radius: 7px
    padding: 60px 40px
    margin-bottom: 30px
    border: 2px solid $border-color
    .price-type
        position: absolute
        top: -2px
        right: -2px
        color: white
        line-height: 1
        font-size: 18px
        font-weight: 500
        padding: 12px 10px
        border-radius: 0 7px
        text-transform: uppercase
        transform: rotate(180deg)
        background: $primary-color
        font-family: $heading-font
        -webkit-writing-mode: vertical-rl
    .image
        text-align: center
        margin-bottom: 35px
    h3
        font-size: 30px
        text-align: center
        margin-bottom: 40px
        text-transform: uppercase
    ul
        li
            margin-bottom: 20px
            +flexcenter(space-between)
            .content
                margin-right: 15px
                h5
                    margin-bottom: 2px
            .price
                font-size: 30px
                font-weight: 500
                margin-top: 15px
                color: $primary-color
                align-self: self-start
                font-family: $heading-font
    .theme-btn
        width: 100%
        margin-top: 20px
        &:before
            border-left-width: 365px
            border-bottom-width: 65px
        &:after
            border-top-width: 65px
            border-right-width: 365px
    +res-bl(xs)
        +gapLR(padding, 20px)
    &.active-price
        background: $lighter-color
        border-color: $lighter-color
        .theme-btn
            color: white
            &:after,
            &:before
                border-color: $primary-color
            
/* Price Plan Three */
.pricing-area-three
    +overlay($black-color, 1)
    &:before
        mix-blend-mode: multiply
    
.bg-black
    .price-tab
        .nav-link
            border-radius: 5px
            &:not(.active)
                background: $black-color-two
                border-color: $black-color-two
                i
                    color: $primary-color
                span
                    color: white
    .price-item
        background: $black-color-two
        &:after,
        &:before,
        .image:after,
        .image:before
            background: rgba(255, 255, 255, 0.05)
.text-white
    .price-item
        .content
            span
                opacity: 0.5
                
/* Price Plane Four */
.pricing-plan-four
    +overlay($black-color, 0.93)