.contact-form {
border-radius: 25px;
background: #3a5079;
box-shadow: 0px 5px 16px 0px rgba(8, 15, 52, 0.06);
flex-direction: column;
padding: 50px 15px;
margin-top: 120px;
}
.contact-form__title {
color: #FFF;
font-family: Nunito;
font-size: 32px;
font-weight: 700;
text-align: center;
margin-bottom: 30px;
padding: 0 20px;
}
.contact-form__form {
padding: 0;
}
.custom {
display: grid;
grid-template: repeat(6, 1fr) / repeat(2, 1fr);
grid-template-areas:
"label1 label2"
"input1 input2"
"label3 label4"
"input3 input4"
"label5 label6"
"input5 input6";
align-items: end;
gap: 10px 30px;
justify-content: center;
width: fit-content;
max-width: 100%;
margin: 0 auto;
}
.custom label:nth-of-type(1) {
grid-area: label1;
}
.custom label:nth-of-type(2) {
grid-area: label2;
}
.custom label:nth-of-type(3) {
grid-area: label3;
}
.custom label:nth-of-type(4) {
grid-area: label4;
}
.custom label:nth-of-type(5) {
grid-area: label5;
}
.custom label:nth-of-type(6) {
grid-area: label6;
}
.custom .contact-form__input,
.custom .contact-form__label {
margin-bottom: 0;
padding-bottom: 0;
width: 100%;
min-width: 350px;
}
.contact-form__label {
color: #FFF;
font-family: Raleway;
font-size: 16px;
font-weight: 700;
padding: 0 0 10px 0;
}
.custom+.contact-form__label {
margin: 25px 0 10px 0;
padding: 0;
}
.contact-form__input {
width: calc(50%-5px);
}
.wpcf7 {
width: min-content;
padding: 0;
}
.contact-form__input,
.wpcf7-textarea {
border: none;
border-radius: 12px;
background: rgba(255, 255, 255, 0.14);
color: white;
padding: 0 10px;
}
.wpcf7-textarea {
margin: 25px 0 35px;
padding: 15px;
width: 100%;
}
.wpcf7-list-item-label {
color: #FFF;
font-family: Raleway;
font-size: 16px;
font-weight: 700;
padding: 0 0 10px 0;
} .contact-form__label.contact-form__labelmessage {
padding: 0;
margin-bottom: 5px;
}
.wpcf7-list-item.first {
margin-left: 0;
}
.wpcf7-response-output {
text-align: center;
font-size: 18px;
color: white;
font-weight: 700;
margin-bottom: 25px;
}
.wpcf7-file {
position: absolute;
opacity: 0;
width: 100%;
height: 50px;
transform: translateY(-12px);
}
span[data-name|="file"] {
margin-left: 20px;
display: inline-block;
}
span[data-name|="file"]::after {
content: 'Выбрать файл';
border-radius: 10px;
background-color: #FEB501;
color: #FFF;
text-align: center;
font-family: Raleway;
font-size: 16px;
font-weight: 700;
transition: background-color 0.3s ease;
padding: 15px 25px;
}
span[data-name|="file"].selected::after {
content: "Файл выбран";
}
.contact-form__input,
.contact-form__submit {
margin-bottom: 20px;
border: none;
height: 58px;
}
.contact-form__submit {
border-radius: 10px;
background-color: #FEB501;
color: #FFF;
text-align: center;
font-family: Raleway;
font-size: 16px;
font-weight: 700;
transition: background-color 0.3s ease;
margin-top: 30px;
}
.contact-form__submit:hover {
background-color: #e4a400;
}
.contact-form__warn {
color: #FFF;
text-align: center;
font-family: Raleway;
font-size: 16px;
font-weight: 400;
max-width: 470px;
padding: 0 15px;
}
.contact-form__warn a {
font-weight: 700;
color: #FFF;
text-decoration: none;
}
@media (max-width: 768px) {
.custom {
display: flex;
flex-direction: column;
}
.custom .contact-form__label:not(:first-child) {
margin-top: 8px;
}
span[data-name|="file"] {
margin: 15px 0 20px 0;
}
}
@media (max-width: 576px) {
.contact-form__label {
text-align: center;
}
}
.form-messengers {
width: 50%;
margin-left: auto;
margin-top: 40px;
padding-left: 15px;
}
textarea::placeholder {
color: #ffffff;
}