.ul-contact-infos {
    display: flex;
    justify-content: center;
    gap: clamp(15px, 1.58vw, 30px);
    margin: clamp(60px, 6.31vw, 120px) clamp(15px, 15.76vw, 300px);

    @include xxl {
        margin: clamp(60px, 5.31vw, 120px) clamp(15px, 12.76vw, 300px);
    }

    @include xl {
        margin: clamp(60px, 5.31vw, 120px) clamp(15px, 8.86vw, 300px);
    }

    @include lg {
        margin: clamp(60px, 5.31vw, 120px) clamp(15px, 3.15vw, 300px);
    }

    @include md {
        flex-wrap: wrap;
    }

    >* {
        width: calc((100% - 60px) / 3);

        @include xl {
            width: auto;
            max-width: 45%;
            flex-grow: 1;
        }

        @include lg {
            max-width: 55%;
        }

        @include md {
            max-width: 100%;
            flex-grow: 0;
        }

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

.ul-contact-info {
    background-color: #F8E6E2;
    display: flex;
    gap: clamp(12px, 1.05vw, 20px);
    align-items: center;
    padding: clamp(15px, 1.8vw, 40px);

    @include xxl {}

    .icon {
        width: 71px;
        aspect-ratio: 1/1;
        background-color: var(--white);
        padding: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        font-size: clamp(40px, 2.63vw, 50px);
        color: var(--ul-primary);

        i {
            display: inline-flex;
        }
    }

    .title {
        font-size: clamp(20px, 1.26vw, 24px);
        font-weight: 600;
        margin-bottom: clamp(7px, 0.53vw, 10px);
        line-height: 1;
    }

    .descr {
        font-weight: 400;
        font-size: clamp(13px, 0.84vw, 16px);
        line-height: 1.5;
        color: #676666;

        a {
            color: #676666;
            display: block;

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

.ul-contact-map {
    iframe {
        width: 100%;
        aspect-ratio: 1920/700;
        filter: grayscale(1);
    }

}

.ul-contact-from-section {
    // background: url(../img/map-img.jpg) no-repeat top center;
    // background-size: contain;
    padding: 0 0 clamp(40px, 4.20vw, 80px);
    margin-top: clamp(-224px, -11.77vw, -40px);
    position: relative;
}

.ul-contact-form-container {
    background-color: var(--white);
    margin: 0 clamp(15px, 19.71vw, 375px);
    padding: clamp(60px, 6.31vw, 120px) clamp(20px, 2.10vw, 40px);
    box-shadow: 0px -10px 40px rgba(0, 0, 0, 0.15);

    @include md {
        margin: 0 clamp(15px, 11.71vw, 375px);
    }

    @include sm {
        margin: clamp(15px, 3.15vw, 375px);
    }

    &__title {
        text-align: center;
        font-weight: 600;
        font-size: clamp(22px, 2.52vw, 48px);
        margin-bottom: clamp(15px, 2.89vw, 55px);
    }
}

.ul-contact-form {
    .grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0 clamp(15px, 1.58vw, 30px);

        @include xs {
            grid-template-columns: 1fr;
        }

        >*:last-child {
            grid-column: 1/3;

            @include xs {
                grid-column: 1/2;
            }
        }
    }

    .form-group {
        margin-bottom: clamp(15px, 1.58vw, 30px);

        .field-icon {
            position: absolute;
            top: clamp(13px, 0.95vw, 18px);
            right: clamp(15px, 1.58vw, 30px);
        }
    }

    input,
    textarea {
        display: block;
        height: clamp(45px, 2.94vw, 56px);
        border: #F8E6E2 1px solid;
        background-color: #F8E6E2;
        padding: 0 clamp(15px, 1.58vw, 30px);
        padding-right: clamp(30px, 3.15vw, 60px);
        max-width: 100%;
        width: 100%;
        border-radius: 10px;
    }

    textarea {
        padding: clamp(15px, 1.31vw, 25px) clamp(12px, 1.58vw, 30px);
        height: 235px;

        &:focus,
        &:focus-visible,
        &:focus-within {
            outline: none;
        }
    }

    button {
        flex-shrink: 0;
        background-color: var(--ul-primary);
        height: clamp(45px, 2.94vw, 56px);
        color: var(--white);
        padding: 0 20px;
        font-weight: 400;
        text-transform: uppercase;
        width: 100%;
        border-radius: 10px;

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