.pricing-sec {
    .pricing-card {
        overflow: hidden;
        border-radius: $br-16;
        background: linear-gradient(0deg, #fdf1d8 0%, #fdf1d8 100%), #fafafa;
        .topbar {
            padding: clamp(40px, 2.5vw, 54px);
            padding-bottom: clamp(24px, 1.667vw, 64px);
            background-color: $accent-2;
            text-align: center;
            display: flex;
            flex-direction: column;
            gap: clamp(18px, 1.392vw, 48px);
        }
        .centerbar {
            padding: clamp(18px, 1.25vw, 48px) clamp(40px, 2.5vw, 54px);
            .tick-svg {
                width: clamp(18px, 1.25vw, 48px);
                height: clamp(18px, 1.25vw, 48px);
            }
        }
        .bottom-bar {
            padding: clamp(28px, 2.5vw, 68px);
            padding-top: 0;
        }
        &.card-2 {
            background: #fbe5e6;
            .topbar {
                background-color: $accent-3;
            }
            .centerbar {
                svg {
                    path {
                        stroke: $accent-3;
                    }
                }
            }
            .bottom-bar {
                .cus-btn {
                    background-color: $accent-3;
                    &:hover {
                        .text {
                            color: $accent-3;
                        }
                    }
                }
            }
        }
        &.card-3 {
            background: linear-gradient(0deg, #eafbf8 0%, #eafbf8 100%), var(--Colors-Samentic-Colors-White, #fafafa);
            .topbar {
                background-color: $accent-1;
            }
            .centerbar {
                svg {
                    path {
                        stroke: $accent-1;
                    }
                }
            }
            .bottom-bar {
                .cus-btn {
                    background-color: $accent-1;
                    svg {
                        path {
                            fill: $accent-1;
                        }
                    }
                    &:hover {
                        .text {
                            color: $accent-1;
                        }
                    }
                }
            }
        }
    }
}

.counter-sec {
    padding: clamp(60px, 6.25vw, 320px) clamp(14px, 2.083vw, 54px) clamp(120px, 10.833vw, 420px)
        clamp(14px, 2.083vw, 54px);
    background: #fdf1d8;
    .counter-content {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: $gap-24;
        text-align: center;
        .vec-1 {
            width: clamp(40px, 2.5vw, 54px);
            height: clamp(48px, 3.333vw, 128px);
        }
    }
}
.counter-section {
    margin-top: -10.938vw;
    padding: clamp(40px, 2.5vw, 54px) clamp(19px, 3.125vw, 128px);
    border-radius: $br-16;
    border: 1px solid #eaeaec;
    background: #fafafa;
    /* Shadow */
    box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    @include media-query(520px) {
        flex-wrap: wrap;
        justify-content: center;
        gap: 22px;
        margin-top: -38.938vw;
    }
    .counter-count {
        display: flex;
        align-items: center;
        gap: $gap-16;
        @include media-query(821px) {
            flex-direction: column;
            text-align: center;
        }
        .h4 {
            font-size: clamp(40px, 3.864vw, 94px);
            color: $accent-2 !important;
        }
    }
    .r-border {
        border-right: 3px dashed $accent-2;
        height: 3.958vw;
        @include media-query(821px) {
            display: none;
        }
    }
}

.work-sec {
    .work-card {
        padding-top: 4.531vw;
        border-radius: 50%;
        border: 12px solid #fafafa;
        background: #fdf1d8;
        transition: $transition;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        flex-direction: column;
        width: 21.563vw;
        height: 21.563vw;
        @include media-query(1399px) {
            width: 100%;
            height: 100%;
        }
        @include media-query(821px) {
            width: 100%;
            height: 42.266vw;
        }
        @include media-query(520px) {
            padding-top: 0;
            width: 100%;
            height: 89.266vw;
        }
        .content {
            width: 14.323vw;
            @include media-query(1399px) {
                width: 19vw;
            }
            @include media-query(821px) {
                width: 30vw;
            }
            @include media-query(520px) {
                width: 71vw;
            }
        }
        svg {
            width: clamp(48px, 2.917vw, 128px);
            height: clamp(48px, 2.917vw, 128px);
            path {
                fill: $accent-1;
                transition: $transition;
            }
        }
        .pb-22 {
            padding-bottom: 1.172vw;
        }
        .num-icon {
            padding-top: 1.094vw;
            width: 7.083vw;
            height: 6.198vw;
            flex-shrink: 0;
            background-color: #fff;
            border-radius: 50%;
            display: flex;
            align-items: start;
            justify-content: center;
            margin-bottom: -46px;
            @include media-query(520px) {
                width: 11.083vw;
                height: 11.198vw;
                padding-top: 0;
                align-items: center;
            }
        }
        p,
        h5 {
            transition: $transition;
        }
        &:hover {
            background: $accent-1;
            p,
            h5 {
                color: $white !important;
            }
            svg {
                path {
                    fill: $accent-2;
                }
            }
            .num-icon {
                h5 {
                    color: $accent-2 !important;
                }
            }
        }
    }
}
