html {
    scroll-behavior: smooth;
}

.justify-between {
    justify-content: space-between;
}

.pricing__plans__section {
    margin-top: 20px;
    margin-bottom: 50px;
}

.pricing__plans__section .pricing__plans__container {
    gap: var(--gap-default);
    display: flex;
    flex-direction: column;
}

ol.gradient {
    list-style: none;
    counter-reset: list-counter;
    padding-left: 0px;
}

.currency {
    display: flex;
}

.discount-tag-yearly {
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    background: linear-gradient(180deg, #ff8257 50%, #f7d64d 158.33%);
    width: 50px;
    height: 16px;
    border-radius: 99px;
    padding: 2px 5px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.mode {
    align-items: center;
    gap: 6px;
}

.premium__plans__container .sale {
    z-index: 2;
}

.price__container .price {
    display: flex;
    align-items: baseline;
}

ol.gradient li {
    position: relative;
    margin-bottom: 5px;
    padding-left: 20px;
}

ol.gradient li::before {
    content: counter(list-counter);
    counter-increment: list-counter;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 15px;
    height: 15px;
    background: var(--color-gradient);
    color: #fff;
    border-radius: 50%;
    text-align: center;
    line-height: 15px;
    font-size: 12px;
}

.pricing__plans__container {
    padding: 0 50px;
}

.plan__features ul li {
    padding-top: 4px;
    padding-left: 25px;
    line-height: 20px;
}

.plan__features .features_title_container {
    display: flex;
    align-items: center;
    gap: 8px;
}

.plan__features .features_title_container .features_title {
    font-weight: var(--font-size-small);
    font-weight: var(--font-weight-medium);
}

.pricing__plans__container .pricing__plans .premium__plans__container:hover .btn_payment_login {
    background: var(--color-dark-gray) !important;
    color: white !important;
}

.pricing__plans__container .pricing__plans .premium__plans__container:hover .btn_payment_login_popup {
    background: var(--color-dark-gray) !important;
    color: white !important;
}

.pricing__plans__container .pricing__plans .premium__plans__container .badge-gradient {
    padding: 2px 10px;
    width: fit-content;
    border-radius: var(--border-radius-larger);
    z-index: 1;
    color: white;
}

.price__container .discount {
    display: flex;
    gap: 5px;
}

.original-price-div {
    display: flex;
    flex-direction: column;

    & .original-price {
        font-size: 14px;
        line-height: 16px;
        font-weight: 500;
        color: #8d8f94;
        margin-left: 5px;
        text-decoration: line-through;
    }
}

.discount-tag-container {
    color: #101010;
    font-size: 12px;
    font-weight: 400;
    line-height: 20px;
    margin-top: 10px;
}

.discount-tag {
    background: linear-gradient(180deg, #ff8257 50%, #f7d64d 158.33%);
    padding: 4px 8px;
    color: #ffffff;
    font-weight: 500;
    font-size: 12px;
    line-height: 16px;
    border-radius: 99px;
}

.pricing__plans__container .pricing__plans .premium__plans__container .plan__wrapper .plan__content {
    display: flex;
    flex-direction: column;
    gap: var(--gap-default);
}

.pricing__plans__container .pricing__plans .premium__plans__container .plan__wrapper .plan__header {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-xsmall);
    position: relative;
}

.pricing__plans__container .pricing__plans .premium__plans__container .plan__wrapper .plan__header>div {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--gap-small);
}

.pricing__plans__container .pricing__plans .premium__plans__container .plan__wrapper .plan__header .popular_box_container {
    box-shadow: var(--box-shadow-small);
    padding: 10px 10px;
    border-radius: 20px;
    font-size: var(--font-size-xsmall);
    height: fit-content;
    gap: var(--gap-xsmall);
}

.pricing__plans__container .pricing__plans .premium__plans__container .plan__wrapper .plan__header .popular_box_container .title {
    font-size: var(--font-size-small);
}

.duration_switch_container {
    width: fit-content;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.apiDocDiv {
    .apiDocMain {
        background: white !important;
        justify-content: center;
        align-items: end;

        .apiDocInfo {
            span {
                display: block;
                margin-bottom: 6px;
                font-weight: 600 !important;
                font-size: 18px !important;
                line-height: 28px;
                color: #101010;
            }

            p {
                font-size: 16px !important;
                line-height: 22px;
                color: #8d8f94;
            }
        }

        .whiteBtn {
            display: flex;
            padding: 10px 20px;
            font-size: 18px;
            line-height: 20px;
            text-align: center;
            color: #101010;
            border: 1px solid #e5e5e5;
            border-radius: 35px;
            background-color: white;
            transition: all 0.3s ease-in;

            img {
                margin-left: 6px;
                rotate: 45deg;
                transition: 0.3s ease-in;
            }

            &:hover {
                border: 1px solid #101010;

                img {
                    rotate: 0deg;
                    filter: invert(305%) sepia(94%) saturate(0%) hue-rotate(486deg) brightness(0%) contrast(75%);
                }
            }
        }
    }
}

.apiDocDiv.gradient-hover-effect::after {
    bottom: 2px !important;
}

.pricing__plans__container .api_pricing_plans .premium__plans__container>div {
    margin: 0px !important;
}

.api_pricing_plans {
    width: 100%;

    .title {
        min-height: 56px;
        border-bottom: 2px dashed #e5e5e5;
    }
    .title-container  {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 5px;
    }

    @media screen and (max-width:1275px) and (min-width:1005px) {
        .title-container {
            gap: 0;
        }
    }

    @media screen and (max-width:850px) and (min-width:670px) {
        .title-container {
            gap: 0;
        }
    }

    @media screen and (max-width:425) {
        .title-container {
            gap: 0;
        }
    }

    .apiCardIcon {
        background-color: white;
        border-radius: 16px;
        display: flex;
        align-items: center;
        justify-content: start;
        max-width: 56px;

        img {
            background: transparent !important;
        }
    }

    .plan__wrapper .plan__header>div {
        gap: 24px !important;
    }

    .popular_box_container {
        width: fit-content;
        background-color: transparent;
        padding: 0 !important;
        margin: 0;
    }

    .price__container .price .currency {
        color: #8D8F94;

    }

    .plan__wrapper .plan__content {
        gap: 24px !important;
    }

    .features_title_container .features_title {
        font-weight: 400;
        font-size: 12px;
        line-height: 16px;
        color: #8D8F94;
    }

    ul li {
        background: url(../../img/grey_tick.svg) no-repeat left center !important;
        margin-bottom: 12px;
    }

    .price_value {
        margin-right: 5px;
    }

    .description-light {
        font-weight: 400;
        font-size: 14px !important;
        color: #8d8f94;
        margin-top: 12px;
    }
    
    .plan__wrapper .plan__features {
        gap: 16px !important;
    }

    .api-get-premium:hover {
        background-color: #333333 !important;
        color: white !important;
    }

}
.plan-switch {
    color: #8D8F94;
    cursor: pointer;
}
.plan-switch:hover {
    color: black;
}
.plan-switch.active {
    color: black;
}

.paymentTypes {
    padding: 32px 0px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .paymentTitle {
        max-width: 214px;
        width: 100%;

        p {
            font-size: 16px !important;
            line-height: 24px;
            color: #8d8f94;
        }
    }

    .payemntImages {
        display: flex;
        justify-content: space-between;
        align-items: center;
        max-width: 1024px;
        /*width: 77%;*/
        gap: 36px;

        img {
            opacity: 0.7;
            filter: grayscale(1);
        }
    }

}

.table-tab-feature,
.mobile-view-feature {
    transition: transform 0.2s ease-in-out;
}

.transform-zero {
    transform: scale(0);
}

.rotate-180 {
    transform: rotate(180deg);
}

.lets_chat_para p {
    text-align: center;
}

.accordion__title h3 {
    font-weight: 700;
    font-size: 18px;
}

.customPricingPlans {
    .pricing__plans__container .pricing__plans .premium__plans__container>div {
        background: white;
        border: 1px solid #e5e5e5;
    }

    .pricing__plans__container .pricing__plans .premium__plans__container .plan__wrapper .plan__header>div {
        gap: 24px;
    }

    .pricing__plans__container .pricing__plans .premium__plans__container .plan__wrapper .plan__header {
        gap: 24px;
    }

    .pricing__plans__container .pricing__plans .premium__plans__container .plan__wrapper .plan__header .price__container {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    ul li {
        background: url("../../img/grey_tick.svg") no-repeat left center !important;
    }

    .plan__features ul li {
        padding-top: 0px;
        /* padding-left: 18px; */
        font-weight: 400;
        font-size: 14px;
        line-height: 18px;
        color: #333333;
        margin-bottom: 14px;
    }

    .pricing__plans__container .pricing__plans .premium__plans__container .two-columns {
        flex-direction: column;
    }

    .btn-outline-dark:hover {
        background-color: #333333 !important;
        color: white !important;
    }

    .plan__features .features_title_container .features_title {
        font-weight: 400;
        font-size: 12px;
        line-height: 16px;
        color: #8d8f94;
    }

    .pricing__plans__container .pricing__plans .plan__container .plan__header .title {
        padding-bottom: 24px;
        border-bottom: 2px dashed #e5e5e5;
        display: flex;
        align-items: center;
        gap: 20px;

        .popular_box_container {
            padding: 0px;
            box-shadow: none !important;
            background-color: transparent;

            .badge {
                background: linear-gradient(89.12deg,
                        #00ffc2 -47.9%,
                        #75a1ff 34.05%,
                        #6f2ff8 118.86%);
                font-weight: 500 !important;
                font-size: 12px;
                text-align: center;
                text-transform: uppercase;
                padding: 4px 8px;
            }
        }
    }

    .pricing__plans__container .pricing__plans .plan__container .price__container .price {
        gap: 5px;
    }

    .pricing__plans__container .pricing__plans .plan__container .price__container .price .currency {
        color: #8d8f94;
    }

    .pricing__plans__container .pricing__plans .plan__container .description-light {
        font-weight: 400;
        font-size: 14px !important;
        color: #8d8f94;
    }

    .pricing__plans__container .pricing__plans {
        margin: 0px;
    }

    .pricing__plans__container .pricing__plans .premium__plans__container .plan__wrapper .plan__features .plan__feature_inner {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .pricing__plans__container .pricing__plans .premium__plans__container .plan__wrapper .plan__features {
        gap: 24px;
    }

    .text-gradient-pricing {
        color: transparent;
        background: linear-gradient(92.84deg,
                #00ffc2 -14.28%,
                #75a1ff 47.63%,
                #6f2ff8 109.53%);
        font-weight: 500;
        background-clip: text;
    }

    .view-all-tools {
        background: none !important;
        display: flex;
        align-items: end;
        gap: 8px;
        cursor: pointer;
        padding-left: 0px !important;
        transition: transform 0.1s ease-in-out;

        div {
            position: relative;
            width: max-content;
            display: block;
        }

        img {
            width: 20px;
            height: 20px;
            background: none !important;
        }
    }
}

.api__document {
    position: relative;
    border: 1px solid #e5e5e5;
    background-color: #fafafa;
    border-radius: 20px;
    overflow: hidden;

    .api_left_img {
        position: absolute;
        left: 0;
        top: 0;
    }

    .api_right_img {
        position: absolute;
        right: 0;
        bottom: 0;
    }

    .api_doc_main {
        position: relative;
        z-index: 1 !important;
        width: 100%;
        display: flex;

        .api_doc_inner {
            padding: 21px 20px 21px 0;

            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 20px;

            .api_doc_desc {
                span {
                    font-weight: 600;
                    font-size: 18px;
                    color: #101010;
                }

                p {
                    margin-top: 4px;
                    font-size: 16px !important;
                    line-height: 22px;
                    color: #8d8f94;
                }
            }

            .api_doc_btn {
                max-width: 155px;
                width: 100%;
                border-radius: 35px;
                background-color: white;
                border: 1px solid #e5e5e5;
                transition: all 0.4s ease;

                a {
                    padding: 8px 14px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 16px;
                    gap: 4px;
                    cursor: pointer;

                    img {
                        filter: none;
                        rotate: 45deg;
                        transition: all 0.4s ease;
                    }
                }

                &:hover {
                    background-color: rgb(250, 250, 250);

                    a {
                        img {
                            filter: brightness(0%) contrast(70%);
                            rotate: 0deg;
                        }
                    }
                }
            }
        }
    }
}

.lets_chat_main {
    position: relative;
    border-radius: 20px;
    border: 1px solid #e5e5e5;
    overflow: hidden;
    background: linear-gradient(to right,
            white 0%,
            rgba(255, 255, 255, 0.9) 3%,
            transparent 50%,
            rgba(255, 255, 255, 0.9) 97%,
            white 100%);

    .chat_grid_img {
        position: absolute;
        top: 0;
        z-index: -1;
    }

    .chat_inner {
        padding: 48px 24px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        position: relative;
        z-index: 1;
        gap: 20px;

        .chat_titles {
            .lets_chat_header {
                h2 {
                    text-align: center;
                    white-space: pre-line;
                }
            }

            .lets_chat_para {
                p {
                    text-align: center;
                    white-space: pre-line;
                }
            }
        }

        .lets_chat_btn {
            background-color: #333333;
            border-radius: 35px;

            a {
                padding: 10px 30px;
                color: white;
                display: flex;
                justify-content: center;
                align-items: center;
                gap: 10px;

                img {
                    transform: translateX(-20%);
                    transition: all 0.3s ease;
                }
            }

            &:hover {
                background-color: #101010;

                a {
                    img {
                        transform: translateX(0%);
                    }
                }
            }
        }
    }
}

.btn-anchor {
    text-decoration: underline !important;
    white-space: nowrap;
}

.icon-ai-words {
    width: 20px;
    height: 20px;
    filter: grayscale(1) brightness(0) invert(1);
}

.note-links,
.note-links:link,
.note-links:active,
.note-links:visited {
    color: #101010;
    text-decoration: underline;
}

.critical-note {
    margin: 20px auto;
    padding: 24px;
    border: 0.5px solid #E5E5E5;
    border-radius: 12px;
    background: linear-gradient(270deg, #FAFAFA 0%, rgba(247, 247, 247, 0) 50%, #FAFAFA 100%);
}

.note-heading {
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    margin-right: 5px;
}

.note-heading svg {
    transform: translateY(4px);
}

.note-text {
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    text-align: justify;
}

.note-links {
    font-weight: 500;
    font-size: 14px;
    line-height: 16px;
    text-decoration: underline;
    color: #101010;
    margin: 0 5px;
}

.lets_chat_header h2 {
    font-weight: 700;
    font-size: 34px;
    line-height: 46px;
}



.plan-short-description,
.mobile-plan-short-description {
    font-size: 14px !important;
    font-weight: 400;
    color: #8d8f94;
}

.short-description-price-tag,
.mobile-short-description-price-tag {
    font-size: 14px;
    font-weight: 600;
    color: #8d8f94;
}

.pricing-plan-header {
    position: relative;
    display: flex;
    justify-content: end;
    margin: 44px 0 28px 0;
}

.toggle-switch {
    display: flex;
    align-items: center;
    gap: 8px;
}

.plan-switch {
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
}

/*  toggle switch css start  */
.toggle {
    --button-width: 40px;
    --button-height: 20px;
    --toggle-diameter: 16px;
    --button-toggle-offset: calc((var(--button-height) - var(--toggle-diameter)) / 2);
    --toggle-shadow-offset: 10px;
    --toggle-wider: 16px;
    --color-grey: #F7F5FF;
    --color-green: #CCCDCF;
    cursor: pointer;
}

.toggle-btn {
    display: inline-block;
    width: var(--button-width);
    height: var(--button-height);
    background-color: #CCCDCF;
    border-radius: calc(var(--button-height) / 2);
    position: relative;
    transition: 0.3s all ease-in-out;
    box-shadow: 0px 0px 6px 1px #4747471A inset;
    margin-top: 4px;
}

.toggle-btn::after {
    content: "";
    display: inline-block;
    width: var(--toggle-diameter);
    height: var(--toggle-diameter);
    background-color: #fff;
    border-radius: calc(var(--toggle-diameter) / 2);
    position: absolute;
    top: var(--button-toggle-offset);
    transform: translateX(var(--button-toggle-offset));
    box-shadow: var(--toggle-shadow-offset) 0 calc(var(--toggle-shadow-offset) * 4) rgba(0, 0, 0, 0.1);
    transition: 0.3s all ease-in-out;
}

.toggle input[type="checkbox"]:checked+.toggle-btn {
    background-color: var(--color-green);
}

.toggle input[type="checkbox"]:checked+.toggle-btn::after {
    transform: translateX(calc(var(--button-width) - var(--toggle-diameter) - var(--button-toggle-offset)));
    box-shadow: calc(var(--toggle-shadow-offset) * -1) 0 calc(var(--toggle-shadow-offset) * 4) rgba(0, 0, 0, 0.1);
}

.toggle input[type="checkbox"] {
    display: none;
}

.toggle input[type="checkbox"]:active+.toggle-btn::after {
    width: var(--toggle-wider);
}

.toggle input[type="checkbox"]:checked:active+.toggle-btn::after {
    transform: translateX(calc(var(--button-width) - var(--toggle-wider) - var(--button-toggle-offset)));
}

/*  toggle switch css end  */

@media (max-width: 1024px) {
    .paymentTypes {
        flex-direction: column;
        justify-items: center;
        align-items: center;
        gap: 30px;

        .paymentTitle {
            text-align: center;
        }

        .payemntImages {
            flex-wrap: wrap;
            gap: 20px;
            justify-content: center;
            align-items: center;
        }
    }

    .api_doc_img {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .api_doc_inner {
        align-items: start !important;
        flex-direction: column;
    }
}

@media (max-width: 632px) {
    .duration_switch_container {
        width: fit-content;
        position: static;
        transform: translate(0 , 0);
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .pricing-plan-header {
        flex-direction: column;
        gap: 15px;
    }
    .toggle-switch {
        justify-content: end;
    }
}

@media (max-width: 539px) {
    .customPricingPlans {
        .pricing__plans__container .pricing__plans .plan__container .plan__header .title {
            padding-bottom: 8px;
        }

        .pricing__plans__container .pricing__plans .premium__plans__container .plan__wrapper .plan__header>div,
        .pricing__plans__container .pricing__plans .premium__plans__container .plan__wrapper .plan__header,
        .pricing__plans__container .pricing__plans .premium__plans__container .plan__wrapper .plan__features {
            gap: 10px;
        }

        .plan__features .view-all-tools {
            margin-bottom: 0;
        }
    }
}

@media (max-width: 530px) {
    .pricing__plans__container .pricing__plans .premium__plans__container {
        width: 100%;
    }
}

@media (max-width: 430px) {
    .pricing__plans__container .pricing__plans>div {
        flex-direction: column-reverse !important;
    }

    .order-1 {
        order: 1;
    }

    .order-2 {
        order: 2;
    }

    .apiDocDiv {
        .apiDocMain {
            flex-wrap: wrap !important;
            justify-content: start !important;

            .apiDocView {
                margin-top: 15px;
            }
        }
    }
}

.tool_options .modes__list_pricing {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: max-content;
    gap: 3px;
    background: var(--color-light-gray);
    box-shadow: var(--box-shadow-small-inner);
    border-radius: 99px;
    padding: 4px;
}

.tool_options .modes__list_pricing span {
    flex: 1;
    display: flex;
    cursor: pointer;

    justify-content: center;
    line-height: 20px;
    min-width: fit-content;
    border-radius: 100px;
    padding: 6px 12px;
    color: var(--color-gray);
    font-size: var(--font-size-small);
}

.tool_options .modes__list_pricing span img {
    margin-right: 6px;
    width: 20px;
    height: 20px;
}

.tool_options .modes__list_pricing .mode.ai_mode>span>img {
    filter: var(--filter-gray);
}

.tool_options .modes__list_pricing span {
    transition: background 0.3s ease, transform 0.3s ease;
}

.tool_options .modes__list_pricing span.active {
    background: white;
    box-shadow: var(--box-shadow-xsmall);
    color: black;
    filter: none !important;
    transform: translateX(0);
    /* Example effect */
}

.tool_options .modes__list_pricing span:not(.active):hover {
    background: var(--color-hover-modes);
}

.tool_options .modes__list_pricing .active span {
    color: var(--color-dark-gray) !important;
}

.tool_options .modes__list_pricing .active img:not(.no-filter) {
    filter: grayscale(100%) saturate(0%) brightness(70%) contrast(1000%);
}

.active_mode_container {
    position: relative;
    display: flex;
    padding: 5px 10px 5px 0;
    gap: 5px;
    flex: 1;
    max-width: 100%;
    justify-content: space-between;
    background-color: white;
    border-radius: var(--border-radius-default);
}

.active_mode_container .active_mode {
    display: none;
    cursor: pointer;
    border-radius: 10px;
    border: 1px solid #eee;
    padding: 5px 10px;
}

.tool_options .modes__list_pricing {
    position: relative;
    max-width: 100% !important;
}

.mobile_modes_list {
    align-items: center;
}

@media (max-width: 1024px) {
    .active_mode_container {
        justify-content: center !important;
    }
}

@media screen and (max-width:340px) {
    .innerTableTabs .tab {
        padding: 6px 12px;
    }
}