.contact-us {
    margin-top: 100px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 2;
}
.contact-us .contact-us-texts {
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: start;
    position: relative;
    padding-left: 70px;
    padding-bottom: 50px;
}
.contact-us-title {
    max-width: 499px;
    width: 100%;
}
.contact-us-title h1 {
    color:  #141414;
font-size: 62px;
font-style: normal;
font-weight: 500;
line-height: 84px;
margin-bottom: 24px;
padding-top: 60px;
z-index: 1;
}
.contact-us-title p {
    color:  #141414;
    margin-bottom: 50px;

/* Landing/Content text */
font-family: Poppins;
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: 30px; /* 166.667% */
z-index: 1;
}
.contact-us .contact-us-map {
    width: 50%;
    height: 100%;
    position: relative;
}
.contact-us-block {
    position: absolute;
    bottom: 10px;
    left: 10px;
    width: 391px;
    height: 92px;
    border-radius: 12px;
background:  #FFF;
box-shadow: 0px 2px 13px 0px rgba(0, 0, 0, 0.15);
text-align: start;
padding-left: 20px;
padding-top: 16px;
}
.contact-us-block h3 {
    color:  #141414;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 28px; /* 175% */
}
.contact-us-block p {
    color: #141414;
opacity: 0.5;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 28px; /* 175% */
}
/* .contact-us .contact-us-texts {
    height: 900px;
} */
.form-container {
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);
}

form {
    display: flex;
    flex-direction: column;
    max-width: 440px;
    width: 100%;
    z-index: 1;
}
form label {
    display: flex;
    flex-direction: column;
}
.name-fields {
    display: flex;
    justify-content: space-between;
    margin-bottom: 24px;
}



.first-name,
.last-name {
    width: 206px;
    height: 60px;
    flex-shrink: 0;
    border-radius: 12px;
    background:  #FFF;
    z-index: 1; 
    color:  #141414;
    box-shadow: 0px 2px 13px 0px rgba(0, 0, 0, 0.10);
    padding-left: 16px;
    font-size: 16px;

}
.backdrop {
    position: absolute;
    left: 0;

    width: 1335.023px;
height: 659.27px;
transform: rotate(152.259deg);
flex-shrink: 0;
background: linear-gradient(288deg, #03ACF4 10.2%, #3303F4 92.87%);
opacity: 0.35;
filter: blur(125px);
}
label p {
    /* Landing/Menu text */
font-family: Poppins;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 28px; /* 175% */
margin-bottom: 10px;
}
.first-name::placeholder, .last-name::placeholder {
    color: #141414;
    opacity: 0.3;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 28px; /* 175% */
/* padding-left: 16px; */
}

.message {
    height: 100px;
    resize: none;
    margin-bottom: 28px;
}


.submit-btn:hover {
    opacity: 0.85;
}

.email,
.message {
    width: 100%;
    border-radius: 5px;
    font-size: 16px;
    border-radius: 12px;
    padding-left: 16px;
}
.message {
    padding-top: 16px;
}
.email {
    height: 60px;
    margin-bottom: 24px;
}
.message {
    height: 169px;
}
.email::placeholder, .message::placeholder {
    color:  #141414;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 28px; /* 175% */
opacity: 0.3;
/* padding-left: -16px; */
}
/* .message::placeholder {
    padding-top: 16px;
} */


.submit-btn {
   width: 100%;
   height: 60px;
   border: none;
   border-radius: 12px;
   background: #0372F4;
   color: #FFF;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 28px; /* 175% */
}

.invalid {
    border: 2px #FF5A5A;
    color: #FF5A5A;
}

.invalid::placeholder {
    color: #FF5A5A;
    
}
/* input:focus,
textarea:focus {
    border-radius: 12px;
    border: 2x solid #0372F4;
    color: #0372F4;
}
input,
textarea {
    outline: none; /* Убираем стандартную обводку при фокусе */
    /* border-radius: 12px; /* Скругление углов */
    /* font-size: 16px; */ 
/* } */ 

.contact-us-form input,
.contact-us-form textarea {
    outline: none;  
    border: 2px solid #ffffff;
    border: none;
    padding: 10px;
    font-size: 16px;
}

/* Можно добавить дополнительный стиль при фокусе */
.contact-us-form input:focus,
.contact-us-form textarea:focus {
    /* font-size: 16px; */
    border: 2px solid #007bff; 
    color: #0372F4;
}

.contact-us-form .invalid input:focus{
    /* font-size: 16px; */
    border-color: #FF5A5A;
    color: #FF5A5A !important;
}

.contact-us-map  {
    z-index: 2;
}
.contact-us-map img {
    opacity: 0.8;
    width: 100%;
    height: 100%;
}
@media(max-width: 1205px) {
    .backdrop {
        width: 100%;
        top: 0;
        left: 0;
    }
    .contact-body .wrapper {
        padding: 0 20px;
    }
    .contact-us .contact-us-texts {
    padding-left: 0;
    }
}

@media(max-width: 940px) {
    .backdrop {
        width: 400px;
    }
}
@media(max-width: 940px) {
    .contact-us .contact-us-texts {
        padding-left: 0;
        width: 100%;
        align-items: center;
        max-width: 440px;
    }
    .contact-us {
        flex-direction: column;
    }
    .contact-us-texts form {
        width: 100%;
    }
    .contact-us .contact-us-map {
        width: 100%;
        /* border: 1px solid black; */
        margin-top: 32px;
    }
    .contact-us .contact-us-texts {
        padding-bottom: 10px;
    }
}

@media(max-width: 550px) {
    .contact-us {
        width: 100%;
    }
    .backdrop {
        width: 100%;
        height: 1000px;
        left: -180px;
    }
    .contact-us .contact-us-map {
        width: 100%;
        /* border: 1px solid black; */
        margin-top: 32px;
    }
    .name-fields {
        flex-direction: column;
    }
    .name-fields label input {
        width: 100%;
        margin-bottom: 20px;
    }
    .contact-us {
        margin-bottom: 30px;
    }
    .contact-us .contact-us-texts {
        height: auto;
        
    }
    .contact-us-block {
        width: 274px;
        height: 72px;
    }
    .contact-us-block h3 {
        font-size: 12px;
font-style: normal;
font-weight: 500;
line-height: 18px;
    }
    .contact-us-block p {
        font-size: 12px;
font-style: normal;
font-weight: 500;
line-height: 18px;
    }
    .name-fields {
        margin-bottom: 5px;
    }
    .contact-us-title h1 {
        font-size: 32px;
        font-style: normal;
        font-weight: 500;
        line-height: 44px;
        margin-bottom: 10px;
    }
    .contact-us-texts p {
        font-size: 12px;
        font-style: normal;
        font-weight: 500;
        line-height: 18px;
      
    }
    .contact-us-title p {
        margin-bottom: 30px;
    }
    .contact-us-form input {
        font-size: 12px;
font-style: normal;
font-weight: 500;
line-height: 18px;
    }
    .contact-us-form input,
.contact-us-form textarea {
    outline: none;  
    border: 2px solid #ffffff;
    border: none;
    padding: 10px;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 18px;
}
    .first-name::placeholder, .last-name::placeholder {
        font-size: 12px;
        font-style: normal;
        font-weight: 500;
        line-height: 18px;
    }
    .email::placeholder, .message::placeholder {
        font-size: 12px;
        font-style: normal;
        font-weight: 500;
        line-height: 18px;
    }
    
}
.textarea-container {
    position: relative;
    width: 100%;
    height: 194px;
    margin-bottom: 30px;
}
input:disabled,
textarea:disabled {
    background-color: transparent; /* Убираем стандартный серый фон */
    color: inherit; /* Сохраняем цвет текста */
    opacity: 1; /* Убираем полупрозрачность */
    cursor: default; /* Сохраняем стандартный курсор */
    border-color: inherit; /* Сохраняем цвет границы */
}
input:disabled,
textarea:disabled {
    background-color: white
}
.textarea-container textarea {
    position: relative;
    width: 100%;
    height: 100%;
    /* padding: 20px; */
    box-sizing: border-box;
    /* border: 1px solid #ccc; */
    border-radius: 8px;
    font-size: 16px;
    resize: none;
    outline: none;
    z-index: 1;
}
.placeholder {
    position: absolute;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center ;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            display: flex;
            align-items: center;
            color: #007bff; /* Синий цвет */
            font-size: 1rm;
    display: none;
    cursor: auto;
    user-select: text;
    z-index: 3;
}
.placeholder img {
    margin-right: 10px;
}
.contact-us-form button {
    cursor: pointer;
}
/* .message::placeholder {
    width: 100%;
    color:  #0372F4;

font-family: Poppins;
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: 30px;
opacity: 1;

} */
@media(max-width: 425px) {
        .backdrop {
            left: -200px;
        }
        
}

#map {
    height: 800px;
}



.toast {
    visibility: hidden;
    min-width: 250px;
    margin-left: -125px;
    background-color: #fff;
    color: #007BFF;
    text-align: center;
    border-radius: 12px;
    padding: 16px;
    position: fixed;
    z-index: 999;
    left: 50%;
    bottom: 30px;
    font-size: 17px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    border: 1px solid #007BFF;
    display: flex;
    align-items: center;
}

.toast.show {
    visibility: visible;
    -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
    animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

@-webkit-keyframes fadein {
    from {bottom: 0; opacity: 0;} 
    to {bottom: 30px; opacity: 1;}
}

@keyframes fadein {
    from {bottom: 0; opacity: 0;}
    to {bottom: 30px; opacity: 1;}
}

@-webkit-keyframes fadeout {
    from {bottom: 30px; opacity: 1;} 
    to {bottom: 0; opacity: 0;}
}

@keyframes fadeout {
    from {bottom: 30px; opacity: 1;}
    to {bottom: 0; opacity: 0;}
}