.ul-pricing {
    background-color: #F2F7FD;

    &-title {
        font-weight: 700;
        font-size: clamp(25px, 2.52vw, 48px);
        margin-bottom: clamp(20px, 1.58vw, 30px);
    }

    &-checks {
        border: 1px solid #E5E5E5;
        border-width: 1px 0;
        display: flex;
        flex-wrap: wrap;
        gap: clamp(15px, 1.58vw, 30px);
        padding: clamp(15px, 1.05vw, 20px) 0;
        margin-bottom: clamp(15px, 1.58vw, 30px);
    }

    &-check {
        display: flex;
        align-items: center;
        gap: 10px;
        color: #535353;
        font-size: clamp(13px, 0.84vw, 16px);

        i {
            color: var(--ul-primary);
        }
    }

    &-descr {
        color: #535353;
        padding: clamp(2px, 0.26vw, 5px) 0;
        padding-left: clamp(8px, 0.79vw, 15px);
        border-left: 4px solid var(--ul-primary);
        margin-bottom: 0;
    }

    &-txt .ul-btn {
        margin-top: clamp(30px, 2.63vw, 50px);

        i {
            font-size: clamp(17px, 1.05vw, 20px);
        }
    }

    &-packages {
        display: flex;
        gap: clamp(15px, 1.58vw, 30px);

        @include xxs {
            flex-direction: column;
        }

        >* {
            flex: auto;
        }
    }

    &-package {
        border: 2px solid var(--ul-secondary);
        border-radius: clamp(22px, 1.68vw, 32px);
        background-color: var(--white);
        // overflow: hidden;

        &.popular {
            border-color: var(--ul-primary);

            .ul-pricing-package-heading,
            .ul-pricing-package-body {
                background-color: var(--ul-primary);
            }

            .ul-pricing-package-btn {
                background-color: var(--ul-primary);
                border-color: var(--ul-primary);

                &:hover {
                    background-color: var(--ul-secondary);
                    border-color: var(--ul-secondary);
                }
            }

            .ul-pricing-package-discount {
                color: var(--white);
            }
        }

        &-heading {
            background-color: var(--ul-secondary);
            padding: clamp(25px, 2.63vw, 50px) clamp(15px, 1.58vw, 30px);
            border-radius: clamp(18px, 1.47vw, 28px);
            border-bottom-right-radius: 0;
            color: var(--white);
            position: relative;

            .tag {
                position: absolute;
                top: clamp(-14px, -0.74vw, -11px);
                right: clamp(20px, 1.37vw, 26px);
                background-color: var(--ul-secondary);
                font-size: clamp(13px, 0.84vw, 16px);
                border-radius: 5px;
                padding: clamp(1.5px, 0.24vw, 4.5px) clamp(8px, 0.58vw, 11px);
            }
        }

        &-name {
            font-weight: 600;
            font-size: clamp(18px, 1.26vw, 24px);
            margin-bottom: clamp(10px, 0.95vw, 18px);
            display: inline-block;
        }

        &-heading-bottom {
            display: flex;
            align-items: flex-end;
            gap: clamp(8px, 0.79vw, 15px);
        }

        &-price {
            font-weight: 700;
            font-size: clamp(44px, 3.89vw, 74px);
            line-height: 0.7;
        }

        &-discount {
            font-weight: 600;
            font-size: clamp(15px, 0.95vw, 18px);
            color: var(--ul-primary);
        }

        &-duration {
            color: rgba(255, 255, 255, 0.7);
            font-size: clamp(13px, 0.84vw, 16px);
            display: block;

            .divider {
                font-weight: 600;
                font-size: clamp(18px, 1.26vw, 24px);
                line-height: 1.2;
            }
        }

        &-body {
            padding: clamp(15px, 1.58vw, 30px);
            background-color: var(--ul-secondary);
            position: relative;
            z-index: 1;
            border-radius: clamp(22px, 1.68vw, 32px);
            border-top-left-radius: 0;
            border-top-right-radius: 0;
            overflow: hidden;

            &::before {
                content: "";
                position: absolute;
                z-index: -1;
                inset: 0;
                border-top-right-radius: clamp(22px, 1.68vw, 32px);
                background-color: var(--white);
            }

            &-title {
                font-weight: 600;
                font-size: clamp(16px, 1.05vw, 20px);
                color: var(--ul-secondary);
                margin-bottom: clamp(10px, 0.74vw, 14px);
            }

            &-list {
                li {
                    display: flex;
                    align-items: flex-start;
                    gap: clamp(5px, 0.42vw, 8px);
                    color: #868686;
                    margin-bottom: 12px;

                    &:last-child {
                        margin-bottom: 0;
                    }

                    i {
                        color: var(--ul-secondary);
                        padding-top: 3px;
                    }
                }
            }
        }

        &-btn {
            margin-top: clamp(15px, 1.84vw, 35px);
            width: 100%;
            background-color: var(--ul-secondary);
            border-color: var(--ul-secondary);

            i {
                font-size: clamp(20px, 1.31vw, 25px);
            }

            &:hover {
                background-color: var(--ul-primary);
                border-color: var(--ul-primary);
            }
        }
    }
}