@font-face {
    font-family: "Lato Light";
    src: url('../assets/fonts/Lato/Lato-Light.ttf');
}
@font-face {
    font-family: "Lato Regular";
    src: url('../assets/fonts/Lato/Lato-Regular.ttf');
}
@font-face {
    font-family: "Noto Light";
    src: url('../assets/fonts/Noto_Serif_Display/static/NotoSerifDisplay-Light.ttf');
}

.form-section {
    background-color: var(--light-color);
}
#form-container {
    align-items: center;
}
.form-container {
    color: var(--dark-color);
}

.contact-icon-wrapper {
    width: 70%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-around;
    align-items: center;
    margin: 0px auto;
    margin-bottom: 50px;
}
.contact-icon-wrapper img {
    width: 50px;
    height: 50px;
    padding: 30px;
    border: 3px solid #bbb;
    border-radius: 0.5rem;
    opacity: 0;
    transform: translateY(0%);
}
@keyframes iconAnimation {
    0%{
        opacity: 0;
        transform: translateY(0%);
    }
    50%{
        opacity: 1;
        transform: translateY(-50%);
    }
    100%{
        opacity: 1;
        transform: translateY(0%);
    }
}
.phone-icon {
    animation: iconAnimation 1000ms forwards;
}
.message-icon {
    animation: iconAnimation 1000ms 300ms forwards;
}
.pencil-icon {
    animation: iconAnimation 1000ms 600ms forwards;
}
.contact-section {
    width: 70%;
    color: var(--light-color);
    padding: 48px;
    margin: 0px auto;
    background-color: #545454;
    border-radius: 0.5rem;
}
.contact-section form{
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    margin: 25px 0px;
}

/* CONTACT SECTION START ---------------------------*/
.form-title {
    font-family: "Noto Light";
    font-size: 56px;
    text-align: left;
    margin-top: 25px;
}
.form-desc {
    font-family: "Lato Light";
    font-size: 22px;
    text-align: left;
    margin: 25px 0px;
}
.inputs-wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    gap: 0px;
    width: 100%;
    padding: 0px;
}
.input-container{
    width: 48%;
    height: 66px;
    margin-bottom: 25px;
}
.contact-section form input,
.contact-section form textarea {
    box-sizing: border-box;
    font-family: "Lato Light";
    font-size: 22px;
    padding: 16px 12px;
    border: none;
    border-radius: 0.5rem;
}
.contact-section form textarea {
    min-height: 170px;
    resize: none;
}
.contact-section form input:focus {
    outline-width: 0px;
}
#contact-nombre,
#contact-apellido,
#contact-telefono,
#contact-email {
    width: 100%;
}

#submit {
    align-self: center;
    width: 120px;
    font-family: "Lato Regular";
    font-size: 22px;
    color: var(--dark-color);
    padding: 10px 20px;
    background-color: var(--light-color);
    border: 2px solid var(--light-color);
    border-radius: 0.5rem;
    transition: all 300ms;
}
#submit:hover {
    cursor: pointer;
    background-color: #545454;
    color: var(--light-color);
}

.form-error {
    width: 100%;
    height: 12px;
    font-family: "Lato Light";
    color: var(--light-color);
    font-size: 12px;
    text-align: left;
    letter-spacing: 2px;
    margin-bottom: 25px;
}

@media screen and (max-width: 2560px) and (min-width: 1537px) {
    .contact-icon-wrapper { margin-bottom: 3.2vw; }
    .contact-icon-wrapper img { width: 3.2vw; height: 3.2vw; padding: 1.9vw; }
    .contact-section { padding: 3.1vw; }
    .contact-section form{ margin: 1.6vw 0px; }
    .form-title { font-size: 3.6vw; margin-top: 1.6vw; }
    .form-desc { font-size: 1.4vw; margin: 1.6vw 0px; }
    .contact-section form input, .contact-section form textarea { font-size: 1.4vw; margin-bottom: 1.6vw; padding: 1vw 0.8vw; }
    .contact-section form textarea { min-height: 11vw; }
    #submit { width: 7.8vw; padding: 0.65vw 1.3vw; }
}

@media screen and (max-width: 1024px) {
    .contact-section { width: 85%; }
}

@media screen and (max-width: 768px) {
    #form-container { width: 90%; }
    .contact-icon-wrapper img { width: 7vw; height: 7vw; padding: 1.9vw; }
    .contact-section form input, .contact-section form textarea { font-size: 16px; }
}

@media screen and (max-width: 520px) {
    .contact-section { padding: 20px; }
    .form-title { font-size: 32px; margin-top: 15px; }
    .form-desc { font-size: 16px; margin: 15px 0px; }
    .inputs-wrapper { flex-direction: column; }
    .contact-section form input, .contact-section form textarea { font-size: 18px; margin-bottom: 20px; padding: 10px 10px; }
    #contact-nombre, #contact-apellido, #contact-telefono, #contact-email { width: 100%; }
}

@media screen and (max-width: 426px) {
    .contact-section form input, .contact-section form textarea { font-size: 16px; margin-bottom: 15px; padding: 15px 10px; }
}