.title{
font-size: 28px;
text-align: center;
color: white;
margin-bottom: 10px;
}
.subtitle{
text-align: center;
color: white;
font-size: 16px;
margin-bottom: 30px;
}
.contact-form{
width: 100%;
}
.form-row{
display: flex;
flex-wrap: wrap;
gap: 20px;
margin-bottom: 20px;
}
.form-column{
flex: 1;
min-width: 250px;
}
.form-label{     
display: block;
color: white;
font-size: 14px;
margin-bottom: 5px;
text-align: justify;
}
.form-input,
.form-textarea{
width: 100%;
padding: 12px;
border-radius: 8px;
border: 1px solid #e9e9e9;
transition: border-color 0.3s, transform 0.3s;
}
.form-input:focus,
.form-textarea:focus{
border-color: #0E335D;
outline: none;
transform: scale(1.02);
}
.form-textarea{
resize: none;
}
.submit-button{
display: block;
width: 30%;
padding: 12px;
background-color: #0D325C;
color: #fff;
border: none;
border-radius: 8px;
font-size: 16px;
cursor: pointer;
transition: background 0.3s, transform 0.3s;
}
.submit-button:hover{
background: linear-gradient(135deg, #0D325C, #6dc3f4);
transform: scale(1.05);
}
@keyframes fadeIn{
from{
opacity: 0;
transform: translateY(-20px);
}
to{
opacity: 1;
transform: translateY(0);
}
}
@media (max-width: 768px){
.form-wrapper{
padding: 30px;
}
.title{
font-size: 24px;
}
.subtitle{
font-size: 14px;
}
.form-row{
flex-direction: column;
}
}
@media (max-width: 540px){
.form-wrapper{
padding: 20px;
}
.title{
font-size: 20px;
}
.subtitle{
font-size: 12px;
}
.form-row{
flex-direction: column;
gap: 15px;
}
.form-column{
min-width: 100%;
}
.form-label{
font-size: 12px;
}
.form-input,
.form-textarea{
padding: 10px;
}
.submit-button{
padding: 10px;
font-size: 14px;
}
}
.placeholder{
color: white;
}
@media only screen and (max-width:700px) {
.bg_contact{
}
.form-wrapper{
margin-left: 1px;
margin-top: 50px;
} 
button, input, optgroup, select, textarea {
font-size: 12px; 
}
.submit-button{
width: 100%;
}
}