.ul-specialities {
    --container-space-x: 0px;
    max-width: calc(clamp(940px, 75.67vw, 1440px) - var(--container-space-x));
    margin: auto;
    background: rgba(0, 97, 224, 0.05);
    background-color: rgba(0, 97, 224, 0.05);
    box-shadow: 0px 4px 200px rgba(232, 249, 247, 0.2);
    border-radius: clamp(15px, 1.58vw, 30px);
    padding: clamp(50px, 5.25vw, 100px) clamp(15px, 7.09vw, 135px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: clamp(20px, 5.99vw, 114px);

    @include xl {
        gap: clamp(20px, 2.99vw, 114px);
    }

    @include md {
        margin: 0 15px;
        padding: clamp(20px, 1.58vw, 30px);
    }

    @include sm {
        flex-direction: column;
        gap: 40px;
    }

    &-heading-card {
        flex-shrink: 0;
        max-width: clamp(286px, 21.86vw, 416px);
        border: #E0DEF7 solid 1px;
        background-color: #F7F7FD;
        border-radius: 8px;
        overflow: hidden;

        @include sm {
            max-width: 100%;
        }

        .txt {

            padding: clamp(20px, 2.10vw, 40px);
        }

        .img {
            text-align: right;

            img {
                max-width: 100%;
            }
        }

        .ul-btn {
            background-color: var(--ul-secondary);
            border-color: var(--ul-secondary);

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

    &-title {
        font-weight: 700;
        font-size: clamp(24px, 1.68vw, 32px);
        margin-bottom: clamp(9px, 0.84vw, 16px);
    }

    &-descr {
        font-size: clamp(13px, 0.84vw, 16px);
        color: var(--ul-secondary);
        margin-bottom: clamp(14px, 1.26vw, 24px);
    }


    &-wrapper {
        // font-size: clamp(111px, 5.99vw, 114px);
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: clamp(20px, 3.42vw, 65px);

        @include xxs {
            grid-template-columns: repeat(1, 1fr);
        }
    }
}

.ul-speciality {
    &-icon {
        width: clamp(56px, 3.36vw, 64px);
        background-color: #E0DEF7;
        aspect-ratio: 1/1;
        border-radius: 999px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: clamp(25px, 1.58vw, 30px);
        position: relative;
        outline: 4px solid var(--white);
        outline-offset: -5px;
        margin-bottom: clamp(14px, 1.26vw, 24px);

        .sm-icon {
            position: absolute;
            width: 24px;
            aspect-ratio: 1/1;
            border-radius: 999px;
            background-color: var(--ul-primary);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            color: var(--white);
            bottom: 0;
            right: 0;
        }
    }

    &-title {
        font-weight: 700;
        font-size: clamp(18px, 1.26vw, 24px);
        margin-bottom: clamp(12px, 1.05vw, 20px);
    }

    &-descr {
        margin-bottom: 0;
        color: var(--ul-gray2);
        font-size: clamp(13px, 0.84vw, 16px);
    }
}

// services
.ul-services {
    background-color: #F2F7FD;

    .ul-section-title {
        text-align: center;
        margin-bottom: clamp(22px, 2.73vw, 52px);
    }

    .ul-service {
        background: var(--white);
        border-bottom: 4px solid transparent;
        box-shadow: 8px 10px 20px 1px rgba(152, 152, 152, 0.16);
        border-radius: 20px;
        padding: clamp(15px, 1.58vw, 30px);
        text-align: center;
        transition: border 0.3s ease;

        &:hover {
            border-bottom: 4px solid #2516DF;

            .ul-service-title {
                color: var(--ul-primary);
            }

            .ul-service-btn {
                color: #2516DF;
            }
        }

        &-icon {
            width: clamp(70px, 5.25vw, 100px);
            aspect-ratio: 1/1;
            border-radius: 999px;
            background: var(--white);
            box-shadow: 5px 7px 16px 1px rgba(134, 134, 134, 0.16);
            color: var(--ul-primary);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 10px;
            font-size: clamp(30px, 2.89vw, 55px);
            margin: auto;
            margin-bottom: clamp(9px, 1.00vw, 19px);
        }

        &-title {
            color: var(--black);
            font-weight: 700;
            font-size: clamp(20px, 1.37vw, 26px);
            margin-bottom: clamp(9px, 1.00vw, 19px);

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

        &-descr {
            font-size: clamp(13px, 0.84vw, 16px);
            color: var(--ul-gray2);
            margin-bottom: clamp(15px, 1.58vw, 30px);
        }

        &-btn {
            color: #7C8893;
            font-weight: 500;
            font-size: clamp(13px, 0.84vw, 16px);
            display: inline-flex;
            align-items: center;
            gap: 4px;

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