/* ==== 
 --------- (5.06) pricing styles start ---------
 ==== */

.pricing {
    .pricing__single {
        padding: 40px 20px;
        border-radius: 12px;
        position: relative;
        overflow: hidden;
        z-index: 1;
        display: flex;
        align-items: center;
        gap: 16px;
        flex-wrap: wrap;
        justify-content: space-between;

        &::before {
            content: '';
            position: absolute;
            inset: 1px;
            background-color: var(--quaternary-color);
            z-index: -1;
            border-radius: 12px;
        }

        &::after {
            content: '';
            position: absolute;
            inset: 0px;
            width: 100%;
            height: 100%;
            border-radius: 12px;
            background-image: linear-gradient(-45deg, #F2010190, #F2010130 50%);
            z-index: -2;
            transition: var(--transition);
            opacity: 0;
        }

        .content {
            max-width: 400px;
        }

        .thumb {
            h2 {
                transition: var(--transition);
            }
        }

        &:hover {
            &::after {
                opacity: 1;
            }

            .thumb {
                h2 {
                    color: var(--secondary-color);
                }
            }
        }
    }

    .active {
        &::after {
            opacity: 1;
        }

        .thumb {
            h2 {
                color: var(--secondary-color);
            }
        }
    }

    .pricing__sidebar {
        padding: 40px 20px;
        background-color: var(--quaternary-color);
        border-radius: 12px;


    }

    .pricing__tab-btns {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        row-gap: 12px;
        background-color: var(--senary-color);
        padding: 10px;
        border-radius: 40px;
    }

    .pricing-tab-btn {
        padding: 12px;
        font-size: 16px;
        border-radius: 40px;
        width: 50%;
        justify-content: center;
        text-transform: uppercase;
        letter-spacing: 2px;
        font-size: 14px;
    }

    .pricing-active {
        background-color: var(--tertiary-color);
        color: var(--white);
    }


    .pricing__tab-single {
        li {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 16px;

            &:nth-last-of-type(1) {
                margin-bottom: 0px;
            }
        }
    }

    .pricing__cta {
        a {
            text-transform: uppercase;
            justify-content: center;
            width: 100%;
        }
    }

}

.pr-c {
    .section__header {
        p {
            max-width: 750px;
        }
    }
}

// pricing two section styles
.pricing-two {
    position: relative;

    .section__header {
        max-width: 540px;
    }

    .pricing-two__single {
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: var(--quaternary-color);
        padding: 40px 20px;
        border-radius: 16px;
        flex-direction: column;
        text-align: center;
        gap: 24px;
        position: sticky;
        top: 200px;

        .btn-animated-text {
            font-size: 16px;
            padding: 12px 30px;
            background-color: var(--senary-color);
            overflow: hidden;
            border: 1px solid transparent;

            span {
                color: var(--template-color);
            }

            &::before,
            &::after {
                background-color: var(--senary-color);

            }

            &::after {
                border-radius: 90px 0px 0px 90px;
            }

            &::before {
                border-radius: 0px 60px 60px 0px;
            }
        }

        .btn--secondary {
            &:hover {
                .btn-animated-text {
                    background-color: var(--octonary-color);

                    span {
                        color: var(--black);
                    }
                }
            }
        }
    }

    .pricing__content-right {
        padding: 40px 20px;
        background-color: var(--quinary-color);
        border-radius: 16px;
        width: 100%;

    }

    li {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 12px;
        font-size: 16px;
        text-align: start;

        &:nth-last-of-type(1) {
            margin-bottom: 0px;
        }
    }


}

// pricing three section styles
.pricing-three {

    .section__header {
        p {
            max-width: 750px;
        }
    }

    .pricing__single {
        &::before {
            content: '';
            position: absolute;
            inset: 1px;
            background-color: var(--quaternary-color);
            z-index: -1;
            border-radius: 12px;
        }

        &::after {
            content: '';
            position: absolute;
            inset: 0px;
            width: 100%;
            height: 100%;
            border-radius: 12px;
            background-image: linear-gradient(-45deg, #4E92E390, #4E92E330 50%);
            z-index: -2;
            transition: var(--transition);
            opacity: 0;
        }
    }

    .pricing__sidebar {
        border-radius: 0px;


    }

    .pricing__tab-btns {
        border-radius: 0px;
    }

    .pricing-tab-btn {
        border-radius: 0px;
    }

    .pricing-active {
        background-color: var(--secondary-color);
        color: var(--white);
    }

    .btn--secondary {
        .btn-animated-text {
            border-radius: 0px;
        }
    }
}

// pricing section four styles
.pricing-four {
    .section__header {
        max-width: 500px;
    }

    .pr__tab-btns {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        row-gap: 12px;
        background-color: var(--quaternary-color);
        padding: 10px;
        border-radius: 40px;
    }

    .pr-tab-btn {
        padding: 12px 20px;
        font-size: 16px;
        border-radius: 40px;
    }

    .active {
        background-color: var(--secondary-color);
        color: var(--white);
    }

    .pricing-four__single {
        padding: 40px 20px;
        position: relative;
        z-index: 1;
        overflow: hidden;
        border: 1px solid var(--senary-color);

        &::before {
            content: '';
            position: absolute;
            inset-inline-start: 0px;
            inset-block-start: 0px;
            width: 80px;
            height: 80px;
            border-inline-start: 1px solid var(--template-color);
            border-block-start: 1px solid var(--template-color);
            transition: var(--transition);
            z-index: -1;
        }

        &::after {
            content: '';
            position: absolute;
            inset-inline-end: 0px;
            inset-block-end: 0px;
            width: 32px;
            height: 32px;
            border-inline-end: 1px solid var(--template-color);
            border-block-end: 1px solid var(--template-color);
            z-index: -1;
            transition: var(--transition);
        }

        &:hover {

            &::before,
            &::after {
                border-color: var(--secondary-color);
            }

            a {
                background-color: var(--secondary-color);
                outline-color: var(--secondary-color);
                color: var(--white);
            }
        }
    }

    .pricing-four__single-alt {
        &::before {
            width: 32px;
            height: 32px;
        }

        &::after {
            width: 80px;
            height: 80px;
        }
    }


    li {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 12px;
        font-size: 16px;
        text-align: start;

        &:nth-last-of-type(1) {
            margin-bottom: 0px;
        }
    }

    .pricing-four__cta {
        padding-inline: 8px;
    }

    a {
        width: 100%;
        justify-content: center;
        padding: 12px 24px;
        background-color: var(--senary-color);
        outline: 1px solid var(--senary-color);
        outline-offset: 6px;
        text-transform: uppercase;
        font-size: 16px;

        &:hover {
            background-color: var(--secondary-color);
            outline-color: var(--secondary-color);
            color: var(--white);
        }
    }
}

/* ==== 
 --------- (5.06) pricing styles end ---------
 ==== */