.contact-wrapper {
    background-color: #f0f5fa;
    width: -webkit-fill-available;
    padding: 4.4rem;
    display: flex;
    align-items: center;
    flex-direction: column;
}
.tel, .mail {
    font-size: 2rem;
    font-family: Arial;
    text-decoration: underline;
    margin: 1.1rem;
}

form {
    margin: 40px 30%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.name {
    display: flex;
    justify-content: center;
    gap: 20px;
}
label {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin: 20px 0;
}
.required::before {
    position: absolute;
    left: 29%;
    content: " *";
    color: red;
}
input {
    width: 230px;
    margin: 10px 0;
}
select {
    width: 230px;
    height: 30px;
    margin: 10px 0;
}
textarea {
    width: 450px;
    height: 150px;
    margin: 10px 0;
}


@media screen and (max-width: 768px) {
    .name {
        flex-direction: column;
    }
    form {
        margin :40px 10%;
    }
    textarea{
        width: 250px;
    }
    .required::before {
        left: 8%;
    }
}
@media screen and (max-width: 580px) {
    .contact-wrapper {
        padding: 2.2rem;
    }
    .tel, .mail {
        font-size: 1.6rem!important;
    }
}