.contacts-form__heading {
    margin-bottom: calc(24px + (30 - 24)*((100vw - 390px) / (1920 - 390)));
}

.contacts-form__text {
    margin-bottom: calc(24px + (48 - 24)*((100vw - 390px) / (1920 - 390)));
}

.contacts-form__phone-wrapper span,
.contacts-form__email-wrapper span{
    color: #000;
}

.contacts-form__phone-wrapper,
.contacts-form__email-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 25px;
    width: fit-content;
    position: relative;
    transition: all 0.3s ease;
}

.contacts-form__phone-wrapper *,
.contacts-form__email-wrapper * {
    transition: all 0.3s ease;
}

.contacts-form__icon.icon-hover {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

.contacts-form__email-wrapper:has(.icon-hover):hover .contacts-form__icon,
.contacts-form__phone-wrapper:has(.icon-hover):hover .contacts-form__icon {
  opacity: 0;
}

.contacts-form__email-wrapper:has(.icon-hover):hover .contacts-form__icon.icon-hover,
.contacts-form__phone-wrapper:has(.icon-hover):hover .contacts-form__icon.icon-hover {
    opacity: 1;
}

.contacts-form__email-wrapper:hover span,
.contacts-form__phone-wrapper:hover span {
    color: #D92D27;
}


.contacts-form__phone-wrapper img,
.contacts-form__email-wrapper img{
    width: 30px;
    height: 30px;
    object-fit: contain;
}

.contacts-form__phone-wrapper {
    margin-bottom: calc(24px + (30 - 24)*((100vw - 390px) / (1920 - 390)));
}

.contacts-form__outer-wrapper {
    position: relative;
    z-index: 2;
    display: flex;
    gap: calc(100px + (157 - 100)*((100vw - 1024px) / (1920 - 1024)));
}

.contacts-form__wrapper {
    background: #000;
    border-radius: 0 80px;
    padding: calc(50px + (103.5 - 50)*((100vw - 390px) / (1920 - 390))) calc(30px + (115 - 30)*((100vw - 390px) / (1920 - 390)));
}

.form__fields-wrapper p {
    display: flex;
    gap: calc(20px + (60 - 20)*((100vw - 600px) / (1920 - 600)));;
}

.contacts-form__wrapper [type="submit"] {
    min-width: calc(132px + (147 - 132)*((100vw - 390px) / (1920 - 390)));
    cursor: pointer;
}

.contacts-form__wrapper textarea {
    max-height: 117px;
}

.contacts-form__decor {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
}

.contacts-form {
    position: relative;
}

.contacts-form__text {
    max-width: 306px;
}

.contacts-form__sidebar {
    flex-basis: 408px;
}

.contacts-form__wrapper {
    flex-basis: 1035px;
}

.form__submit-wrapper {
    text-align: end;
}

.form__submit-wrapper p{
    margin-left: auto;
}

@media screen and (min-width: 1920px) {
    .contacts-form__heading {
        margin-bottom: 30px;
    }

    .contacts-form__text {
        margin-bottom: 48px;
    }

    .contacts-form__phone-wrapper {
        margin-bottom: 30px;
    }

    .contacts-form__outer-wrapper {
        gap: 157px;
    }

    .contacts-form__wrapper {
        padding: 103.5px 115px;
    }

    .form__fields-wrapper p {
        gap: 60px;
    }

    .contacts-form__wrapper [type="submit"] {
        min-width: 147px;
    }
}

@media screen and (max-width: 1023.98px) {
    .contacts-form__outer-wrapper {
        flex-direction: column;
        gap: 42px;
    }

    .contacts-form__sidebar,
    .contacts-form__wrapper {
        flex-basis: fit-content;
    }

    .contacts-form__decor {
        position: absolute;
        top: 0;
        left: 0;
        height: auto;
    }
}

@media screen and (max-width: 599.98px) {
    .form__fields-wrapper p{
        flex-direction: column;
        gap: 0;
    }

    .form__submit-wrapper {
        flex-direction: column;
    }
}

@media screen and (max-width: 389.98px) {
    .contacts-form__text,
    .contacts-form__heading {
        margin-bottom: 24px;
    }

    .contacts-form__phone-wrapper {
        margin-bottom: 24px;
    }

    .contacts-form__wrapper {
        padding: 50px 30px;
    }

    .contacts-form__wrapper [type="submit"] {
        min-width: 132px;
    }
}