.pricing {
    &--one {
        background-repeat: no-repeat;
        background-position: top center;
        background-color: $section-bg-color;
        .section {
            &__header {
                .phone {
                    @extend %rel, %d-inline-block, %mb-30;
                    &::after {
                        @extend %abs;
                        width: calc(100% + 20px);
                        height: calc(100% + 20px);
                        border: 2px dashed $white-color;
                        margin-top: -50px;
                        margin-left: -50px;
                        top: 50%;
                        left: 50%;
                        @include border-radius(100%);
                        animation: lab_round 25s linear infinite;
                    }
                }
                h5 {
                    @extend %white-color;
                }
                h2 {
                    @extend %white-color, %text-capitalize;
                    @include font-size(48px);

                }
            }
            &__wrapper {
                .col-12 {
                    .pricing {
                        &__item {
                            @extend %bg-theme;
                        }
                    }
                    &:nth-child(1) {
                        .pricing {
                            &__item {
                                @include breakpoint(lg) {
                                    border-radius: 10px 50px 0px 10px;
                                }
                            }
                        }
                    }
                    &:nth-child(2) {
                        .pricing {
                            &__item {
                                background: $theme-color-2;
                                @include breakpoint(lg) {
                                    border-radius: 50px 10px 10px 0px;
                                }
                            }
                            &__bottom {
                                .lab-btn {
                                    color: $theme-color-2;
                                }
                            }
                        }
                    }
                }
            }
        }

        .pricing {
            &__item {
                padding: 30px;
                @extend %rel;
                @include border-radius(10px);
                @include breakpoint(xxl) {
                    padding: 60px;
                }
                .abs_offer {
                    @extend %abs;
                    top: -5px;
                    right: 30px;
                    @include breakpoint(xxl) {
                        right: 60px;
                    }
                    @include breakpoint(lg) {
                        @include breakpoint(max-xl) {
                            display: none
                        }
                    }
                }
            }
            &__top {
                @extend %flex, %mb-30;
                &--left {
                    @extend %mr-20;
                    img {
                        @include breakpoint(max-sm) {
                            margin-bottom: 15px;
                        }
                    }
                }
                &--right {
                    h3 {
                        @extend %white-color;
                        span {
                            @extend %d-block, %text-400;
                        }
                    }
                }
            }
            &__body {
                p {
                    @extend %white-color, %mb-30;
                    @include font-size(18px);
                }
                ul {
                    @extend %flex, %mb-30;
                    li {
                        @extend %white-color;
                        padding-block: 5px;
                        width: 100%;
                        @include breakpoint(sm) {
                            width: calc(100% / 2 - 15px)
                        }
                    }
                }
            }
            &__bottom {
                @extend %flex, %align-items-center;
                flex-direction: row-reverse;
                justify-content: flex-end;
                gap: 15px 30px;
                .lab-btn {
                    @extend %bg-white, %theme-color;
                    @include breakpoint(sm) {
                        // margin-right: 30px;
                        // margin-bottom: 0;
                    }
                }
                h5 {
                    @extend %white-color, %mb-0;
                    span {
                        @include font-size(18px);
                        @extend %text-400, %text-capitalize;
                    }
                }
            }
        }
    }
    &--two {
        .col-12 {
            &:nth-child(1) {
                .pricing {
                    &__content {
                        .lab-btn {
                            background: $theme-color-2;
                        }
                    }
                    &__price {
                        &--left {
                            background: $theme-color-2;
                        }
                    }
                }
            }
            &:nth-child(3) {
                .pricing {
                    &__content {
                        .lab-btn {
                            background: $theme-color-3;
                        }
                    }
                    &__price {
                        &--left {
                            background: $theme-color-3;
                        }
                    }
                }
            }
        }
        
        .payment {
            border-top: 6px solid $theme-color;
            @extend %bg-white, %mt-30, %p-30;
            @include border-radius(6px);
            &__content {
                p {
                    @extend %mb-0;
                }
            }
            &__thumb {
                @include breakpoint(lg) {
                    text-align: right;
                }
            }
        }
        .pricing {
            &__item {
                @extend %p-20, %bg-white;
                @include border-radius(10px);
                border: 1px solid #EDF2F6;
                @include transition($transition);
                &:hover {
                    box-shadow: 0px 10px 10px rgba(85, 85, 85, 0.1);
                }
            }
            &__thumb {
                height: 180px;
                img {
                    @extend %w-100, %h-100;
                    @include border-radius(10px);
                    object-fit: cover;
                }
            }
            &__content {
                @extend %text-center, %mb-15;
                h4 {
                    @extend %mb-15;
                }
                ul {
                    @extend %mb-30;
                    li {
                        padding-block: 5px;
                        b {
                            color: $title-color;
                        }
                    }
                }
                .lab-btn {
                    &:hover {
                        @extend %bg-theme;
                    }
                }
            }
            &__price {
                @extend %flex, %align-items-center, %justify-center, %mb-30;
                margin-top: -30px;
                &--left {
                    @extend %d-inline-block;
                    padding: 10px 30px;
                    background: $theme-color;
                    @include border-radius(4px 0 0 4px);
                    @include breakpoint(xl) {
                        @include breakpoint(max-xxl) {
                            padding: 5px 15px;
                        }
                    }
                    h4 {
                        @extend %mb-0, %white-color;
                    }
                }
                &--right {
                    @extend %d-inline-block, %text-capitalize;
                    padding: 11px 30px;
                    background: $title-color;
                    @include border-radius(0 4px 4px 0);
                    @include breakpoint(sm) {
                        padding: 12px 30px;
                    }
                    @include breakpoint(md) {
                        padding: 14px 30px;
                    }
                    @include breakpoint(xl) {
                        @include breakpoint(max-xxl) {
                            padding: 10px 20px;
                        }
                    }
                    @include breakpoint(xxl) {
                        padding: 15px 30px;
                    }
                    p {
                        @extend %mb-0, %white-color;
                        @include font-size(18px);
                    }
                }
            }
        }
    }
    &--three {
        .col-12 {
            &:nth-child(1) {
                .pricing {
                    &__content {
                        .lab-btn {
                            background: $theme-color-2;
                        }
                    }
                    &__price {
                        background: $theme-color-2;
                    }
                }
            }
            &:nth-child(3) {
                .pricing {
                    &__content {
                        .lab-btn {
                            background: $theme-color-3;
                        }
                    }
                    &__price {
                        background: $theme-color-3;
                    }
                }
            }
        }
        
        
        .pricing {
            &__item {
                @extend %p-20, %bg-white;
                @include border-radius(10px);
                border: 1px solid #EDF2F6;
                @include transition($transition);
                &:hover {
                    box-shadow: 0px 10px 10px rgba(85, 85, 85, 0.1);
                }
            }
            &__thumb {
                @extend %rel;
                @include breakpoint(sm) {
                    @include breakpoint(max-lg) {
                        height: 230px;
                        img {
                            height: 100%;
                            object-fit: cover;
                            object-position: center;
                        }
                    }
                }
                &::after {
                    @extend %abs, %w-100, %h-100;
                    top: 0;
                    left: 0;
                    background: rgba($title-color, $alpha: .8);
                    @include border-radius(10px);
                }
                img {
                    @extend %w-100;
                    @include border-radius(10px);
                }
                h4 {
                    @extend %abs, %white-color, %mb-0;
                    left: 50%;
                    top: 30px;
                    z-index: 1;
                    transform: translateX(-50%);
                    @include breakpoint(sm) {
                        top: 60px;
                    }
                }
                .shapeimg {
                    @extend %abs;
                    top: -5px;
                    right: 10px;
                    z-index: 1;
                    @include breakpoint(xl) {
                        @include breakpoint(max-xxl) {
                            display: none;
                        }
                    }
                    img {
                        width: auto;
                    }
                }
            }
            &__content {
                @extend %text-center, %mb-15;
                h4 {
                    @extend %mb-15;
                }
                ul {
                    @extend %mb-30;
                    li {
                        padding-block: 5px;
                        b {
                            color: $title-color;
                        }
                    }
                }
                .lab-btn {
                    &:hover {
                        @extend %bg-theme;
                    }
                }
            }
            &__price {
                width: 150px;
                height: 150px;
                border: 6px solid $white-color;
                align-content: center;
                margin: -85px auto 30px;
                z-index: 1;
                @extend %text-center, %bg-theme, %flex, %justify-center, %rel;
                @include border-radius(100%);
                @include breakpoint(xl) {
                    @include breakpoint(max-xxl) {
                        margin-top: -50px;
                    }
                }
                h4 {
                    @extend %mb-0, %w-100, %white-color;
                }
                p {
                    @extend %mb-0, %white-color;
                }
            }
        }
    }
}