/* CSS 9 oct 2023 Ends */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

/*for subscripiton model*/
@media (max-width: 1200px) {
    .my-subscription {
        height: 100%;
    }

    .my-plans .total-plan {
        padding: 0;
    }

    .my-plans .total-plan {
        border-radius: unset;
        border: unset;
        background: unset;
        backdrop-filter: unset;
        padding: 0;
    }

        .my-plans .total-plan .popular-plan {
            box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
            border: 0px solid #979797;
            background: linear-gradient(180deg, #FAFFF0 0%, #DEF0BF 100%);
            backdrop-filter: blur(17.5px);
            padding: 0;
            margin: 0;
            border-radius: 26px;
        }

        .my-plans .total-plan .most-popular-plan {
            margin: 0;
            background: #231d4f;
        }

        .my-plans .total-plan .popular-plan:hover, .my-plans .total-plan .most-popular-plan {
            background: #231d4f;
            border-radius: 26px;
        }
}

@media (max-width: 900px) {
    .subscription-plan::before {
        content: unset;
    }

    .subscription-plan::after {
        content: unset;
    }
}

@media(max-width: 768px) {
    .my-subscription {
        height: 100%;
    }

    .subscription-plan {
        padding: 40px;
    }

    .my-plans .total-plan .card {
        max-height: unset;
        height: auto;
    }

    .subscription-heading h2 {
        font-size: 28px;
    }
}

@media(max-width: 480px) {
    .my-subscription {
        padding: 20px 0;
    }

    .subscription-heading h2 {
        color: #fff;
        padding:10px;
    }

    .my-subscription-container {
        padding: 0;
    }

    .subscription-plan {
        background: unset;
        box-shadow: unset;
        padding: 0;
        margin:0 auto;
    }

    .my-plans .total-plan .card {
        padding: 20px;
    }

}

/* subscription page css*/
.my-subscription {
    background: #99AB63;
     height: auto;
    position: relative;
    padding: 80px 0;
}

.my-subscription-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 70%;
    background: rgba(166, 172, 214, 0.50);
    filter: blur(150px);
    /* z-index: -1; */
}

.my-subscription-container {
    border-radius: 2210px;
    height: auto;
    padding: 20px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.subscription-plan {
    border-radius: 20px;
    background: white;
    box-shadow: 0px 100px 105px 0px rgba(85, 100, 87, 0.07), 0px 50.049px 52.551px 0px rgba(85, 100, 87, 0.05), 0px 30.147px 31.654px 0px rgba(85, 100, 87, 0.05), 0px 19.32px 20.286px 0px rgba(85, 100, 87, 0.04), 0px 12.522px 13.148px 0px rgba(85, 100, 87, 0.04), 0px 7.882px 8.276px 0px rgba(85, 100, 87, 0.03), 0px 4.529px 4.755px 0px rgba(85, 100, 87, 0.02), 0px 1.993px 2.093px 0px rgba(85, 100, 87, 0.02);
    height: 100%;
    padding: 60px 100px;
    position: relative;
}

    .subscription-plan::before {
        content: url("../assests/images/Group\ 3896.png");
        position: absolute;
        right: -65px;
        top: -65px;
    }

    .subscription-plan::after {
        content: url("../assests/images/Group\ 3896.png");
        position: absolute;
        left: -65px;
        bottom: -65px;
    }

/* .my-plans {
                                            max-width: 1000px;
                                            margin: auto;
                                        } */

.subscription-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.max-plan-tab {
    display: none;
}

.subscription-heading h2 {
    color: #231d4f;
    font-size: 40px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.add-btn-container {
    margin-top: 20px;
}

.plan-tab {
    background: rgb(228 243 181 / 58%);
    border-radius: 22px;
}

    .plan-tab .nav-pills {
        max-width: 300px;
    }

        .plan-tab .nav-pills .nav-item {
            border-radius: 22px;
        }

            .plan-tab .nav-pills .nav-item .nav-link {
                border-radius: 0px 22px 22px 0px;
                color: #231d4f;
                background: rgba(153, 171, 99, 0.00);
            }

                .plan-tab .nav-pills .nav-item .nav-link.active {
                    background: #87b73c;
                    color: #fff;
                    border-radius: 22px;
                    box-shadow: 0px 5px 7px 0px rgba(82, 67, 194, 0.23);
                }

.my-plans .total-plan {
    border-radius: 26px;
    border: 0px solid #979797;
    background: linear-gradient(180deg, #FAFFF0 0%, #DEF0BF 100%);
    backdrop-filter: blur(17.5px);
    padding: 35px 45px;
}

    .my-plans .total-plan .card,
    .my-plans .total-plan .card-header,
    .my-plans .total-plan .card-body,
    .my-plans .total-plan .card-footer {
        background: transparent;
        border: none;
    }

    .my-plans .total-plan .card {
        padding: 20px;
        /* max-height: 480px;
                                            height: 100%; */
    }

    .my-plans .total-plan .card-header h2 {
        color: #231d4f;
        font-size: 36px;
        font-style: normal;
        font-weight: 700;
        line-height: 46px;
        /* 127.778% */
    }

        .my-plans .total-plan .card-header h2 span {
            color: var(--label-color);
            font-size: 16px;
            font-style: normal;
            font-weight: 500;
            line-height: normal;
        }

    .my-plans .total-plan .fa-pen-to-square {
        color: #231d4f;
        font-size: 22px;
    }

    .my-plans .total-plan .card-body h3 {
        color: #231d4f;
        font-size: 28px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
    }

    .my-plans .total-plan .card-body p {
        color: var(--label-color);
        font-size: 16px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        margin: 0;
    }

    .my-plans .total-plan .card-body ul {
        padding: 0;
        margin: 0;
        margin-top: 20px;
    }

        .my-plans .total-plan .card-body ul li {
            list-style-type: none;
            color: var(--label-color);
            font-style: normal;
            font-weight: 500;
            line-height: normal;
            margin-top: 10px;
        }

    .my-plans .total-plan .card-footer .choose-btn {
        border-radius: 24px;
        opacity: 0.5;
        background: #231d4f;
        color: #fff;
        width: 100%;
        padding: 10px;
    }

.most-popular-plan .card-footer .choose-btn {
    background: #87b73c !important;
    color: #fff !important;
    opacity: unset !important;
}

.most-popular-btn {
    border-radius: 15px;
    background: #fff;
    color: #87b73c;
    text-align: center;
    font-size: 10px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
    letter-spacing: 0.833px;
}

.total-plan .card .card-body {
    min-height: 320px;
    height: 100%;
}

.total-plan .popular-plan:hover .card .card-footer .choose-btn {
    background: #87b73c;
    color: #fff;
    opacity: unset;
}

.popular-plan {
    padding-top: 50px;
    /*margin-top: -70px;*/
    position: relative;
    padding: 20px;
    margin-bottom: 2%;
    border-radius: 20px;
    box-shadow: 1px 1px 6px 2px #99ab63;
    word-break: break-word;
}
/*.popular-plan-container {
    margin-bottom: 2%;
    border-radius: 20px;
    box-shadow: 1px 1px 6px 2px #99ab63;
    word-break: break-word;
}*/
    .popular-plan:hover, .most-popular-plan {
        background: #231d4f;
        border-radius: 26px;
    }

.total-plan .popular-plan:hover .card .card-header h2,
.total-plan .popular-plan:hover .card .card-header h2 span,
.total-plan .popular-plan:hover .card .card-header .fa-pen-to-square,
.total-plan .popular-plan:hover .card .card-body h3,
.total-plan .popular-plan:hover .card .card-body p,
.total-plan .popular-plan:hover .card .card-body ul li {
    color: #fff;
}

.popular-btn {
    position: absolute;
    top: 20px;
    right: 20px;
}

.total-plan .most-popular-plan .card-header h2,
.total-plan .most-popular-plan .card-header h2 span,
.total-plan .most-popular-plan .card .card-header .fa-pen-to-square,
.total-plan .most-popular-plan .card-body h3,
.total-plan .most-popular-plan .card .card-body p,
.total-plan .most-popular-plan .card .card-body ul li {
    color: #fff;
}

.show {
    display: inline-block !important;
    opacity: 1
}

.containers {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    width: 100%;
    padding-right: calc(var(--bs-gutter-x)* .5);
    padding-left: calc(var(--bs-gutter-x)* .5);
    margin-right: auto;
    margin-left: auto;
}
.min-plan-tab {
    width: 160px;
    padding: 2px;
}
.my-plans .total-plan .card-header h2 span {
    /*color: #231d4f;*/
    font-size: 36px;
    /*font-style: normal;
    font-weight: 700;
    line-height: 46px;*/
}
.editIcons {
    display: flex;
    flex-direction: row-reverse;
    color: #94a663;
    right: 36px;
    z-index: 9999;
    position: relative;
    cursor:pointer
}