/*CONTACT FORM*/

.wpcf7-form-control,
#loginform .login-username input,
#loginform .login-password input {
    background-color: #d8eceb;
    border: none;
    padding: 15px;
    border-radius: 30px;
    font-family: 'Prompt', sans-serif;
    font-size: 17px;
    color: #236e69;
}
.wpcf7-form-control::placeholder {
    color: #236e69;
}
.wpcf7-select{
    -ms-box-sizing:content-box;
    -moz-box-sizing:content-box;
    -webkit-box-sizing:content-box; 
    box-sizing:content-box;
}
.wpcf7-acceptance {
    background-color: rgba(255, 255, 255, 0);
    padding: 5px;
}
.phone-button {
    border-radius: 50px;
    margin: auto;
    padding: 20px 3%;
}
.list li {
    padding: 15px 0;
}
textarea {
    resize: none;
}
.wpcf7-submit{
    background-color: #236e69;
    color: #ffffff;
    padding: 12px 40px;
}
.form-container form br {
    display: none;
}
#form-acceptance-container p {
    margin-top: 20px;
}
.newsletter form .wpcf7-form-control-wrap input {
    background-color: #ffffff;
    color: #236e69;
}
.homepage .newsletter form {
    color: #ffffff;
}
.newsletter {
    padding: 50px 0;
    margin: 0 auto;
}
.newsletter .wpcf7-submit {
    text-align: center;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 2px;
    font-size: 15px;
}
.newsletter .wpcf7-spinner {
    display: none;
}
.newsletter .wpcf7-email {
    margin-bottom: 20px;
}

#form-civility {
    grid-area: civ;
    justify-self: stretch;
}
#form-first-name {
    grid-area: first;
}
#form-last-name {
    grid-area: last;
}
#form-post-box {
    grid-area: post;
}
#form-number {
    grid-area: num;
}
#form-street {
    grid-area: street;
}
#form-post-code {
    grid-area: code;
}
#form-locality {
    grid-area: local;
}
#form-enterprise {
    grid-area: enter;
}
#form-email {
    grid-area: email;
} 
#form-phone {
    grid-area: phone;
}
#form-ask {
    grid-area: ask;
}
#form-subject {
    grid-area: subj;
}
.form-container p 
.wpcf7-form-control {
    width: 100%;
    box-sizing: border-box;
    justify-self: stretch;
}



/*PHONE*/
@media only screen and (max-width: 760px) {
    .contact .hero-text {
        top: 280px;
        text-align: center;
        width: 50%;
        margin: 0 25%;
    }
    .contact .coordonees-section {
        padding: 80px 5%;
    }
    .contact .phone-button {
        display:flex;
        flex-direction: row;
        align-items: center;
        padding: 20px 5%;
    }
    .contact .phone-button img {
        height: 40px;
        width: auto;
    }
    .contact .phone-nmbr {
        font-size: 20px;
        font-weight: 1000;
        line-height: 17px;
        letter-spacing: 3px;
    }
    .contact .contact-adress {
        margin-bottom: -15px;
    }
    .form-container p {
        display: grid;
        width: 70%;
        margin: 20px auto 0;
        grid-template-columns: repeat(2, 50%);
        grid-template-rows: auto;
        gap: 5px;
        grid-template-areas: 
            "civ civ" 
            "first first"
            "last last"
            "enter enter"
            "email email"
            "phone phone"
            "street street"
            "num post"
            "local local"
            "code code"
            "subj subj"
            "ask ask";
    }
    #form-acceptance-container,
    #form-submit-button {
        text-align: center;
        width: 80%;
        margin: 0 auto;
    }
    .wpcf7-acceptance {
        margin-left: -10%;
    }
    #form-acceptance-container p,
    #form-submit-button p {
        display: block;
    }
    #form-submit-button {
        margin-top: 30px;
    }
    #form-submit-button input {
        text-transform: uppercase;
        font-size: 16px;
        font-weight: 700;
        letter-spacing: 2px;
        font-size: 15px;
        margin: 0 auto;
    }
    .newsletter {
        margin: 0 7%;
    }
    .newsletter form .wpcf7-form-control-wrap input {
        width: 80%;
        margin: 0 auto 20px;
    }
}



/*TABLET*/
@media only screen and (min-width: 761px) and (max-width: 1200px) {
    .contact .hero-text {
        top: 300px;
        margin: 0 25%;
        width: 50%;
        text-align: center;
    }
    .contact .coordonees-section {
        padding: 80px 5%;
    }
    .contact .phone-button {
        display:flex;
        flex-direction: row;
        align-items: center;
        padding: 20px 5%;
    }
    .contact .phone-button img {
        height: 40px;
        width: auto;
    }
    .contact .phone-nmbr {
        font-size: 20px;
        font-weight: 1000;
        line-height: 17px;
        letter-spacing: 3px;
    }
    .contact .contact-adress {
        margin-bottom: -15px;
    }
    .form-container p {
        display: grid;
        width: 70%;
        margin: 0 auto;
        grid-template-columns: repeat(4, 25%);
        grid-template-rows: auto;
        gap: 5px;
        grid-template-areas: 
            "civ civ first first" 
            "last last last last"
            "enter enter enter enter"
            "email email email email"
            "phone phone phone phone"
            "street street num post"
            "local local code code"
            "subj subj subj subj"
            "ask ask ask ask";
    }
    #form-acceptance-container,
    #form-submit-button {
        text-align: center;
        width: 80%;
        margin: 0 auto;
    }
    .wpcf7-acceptance {
        margin-left: -10%;
    }
    #form-acceptance-container {
        margin: 30px auto;
    }
    #form-acceptance-container p,
    #form-submit-button p {
        display: block;
    }
    #form-submit-button {
        margin-top: 30px;
    }
    #form-submit-button input {
        text-transform: uppercase;
        font-size: 16px;
        font-weight: 700;
        letter-spacing: 2px;
        font-size: 15px;
        margin: 0 auto;
    }
    .newsletter {
        margin: 0 10%;
    }
}




/*DESKTOP*/
@media only screen and (min-width: 1201px) {
    .contact .hero-text {
        top: 380px; 
        left: 30%; 
        right: 30%;
    }
    .contact .coordonees-section {
        padding: 100px 0;
    }
    .contact .contact-adress {
        margin-bottom: -30px;
    }
    .phone-nmbr {
        font-size: 37px;
        font-weight: 1000;
        line-height: 35px;
        letter-spacing: 7px;
    }
    .form-container p {
        display: grid;
        width: 70%;
        margin: 0 auto;
        grid-template-columns: repeat(5, 20%);
        grid-template-rows: auto;
        gap: 5px;
        grid-template-areas: 
            "civ first first last last"
            "enter enter enter enter enter"
            "email email email email email"
            "phone phone phone phone phone"
            "street street street num post"
            "local local local code code"
            "subj subj subj subj subj"
            "ask ask ask ask ask";
    }
    #form-acceptance-container{
        text-align: left;
        width: 80%;
        margin: 40px auto 0;
    }
    #form-acceptance-container p {
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    .wpcf7-form-control-wrap:has(.wpcf7-acceptance) {
        width: 50px !important;
    }
    .wpcf7-acceptance {
        margin: 0 20px 0 -20px;
    }
    #form-submit-button p {
        display: block;
    }
    #form-submit-button {
        margin: 30px auto;
        text-align: end;
    }
    #form-submit-button .wpcf7-submit {
        text-transform: uppercase;
        font-size: 16px;
        font-weight: 700;
        letter-spacing: 2px;
        font-size: 15px;
        margin: 0 auto;
        width: 20%;
    }
}

.wpcf7 form .wpcf7-response-output {
    margin: 2em 0.5em 1em;
    padding: 20px;
    border: none;
    font-size: 15px;
    text-align: center;
}

.wpcf7 form.invalid .wpcf7-response-output, 
.wpcf7 form.unaccepted .wpcf7-response-output, 
.wpcf7 form.payment-required .wpcf7-response-output {
    color: #d20000;
    border-color: none;
}