/*JOST FONT*/
@font-face {
    font-family: jostRegular;
    src: url(../fonts/Jost/Jost-Regular.ttf);
}
@font-face {
    font-family: jostBold;
    src: url(../fonts/Jost/Jost-Bold.ttf);
}

/*STYLES*/
.contact-container{
    width: 90%;
    height: 560px;
    display: flex;
    margin: 20px auto;
    border-radius: 10px;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
    position: relative;
    z-index: -1;
}

.contact-form-container{
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    border-radius: 10px 0 0 10px;
}

.contact-form-container::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(../images/contact.webp);
    background-size: cover;
    z-index: 1;
    animation: pulse 8s ease-in-out infinite;
}

.contact-form-container::after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(
        -47deg,
        rgba(31, 29, 84, 0.8),
        rgba(30, 58, 138, 0.8)
    );
    z-index: 2;
}

.contact-form{
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: none;
    padding: 40px;
    z-index: 3;
}

.contact-form-label{
    font-family: jostRegular;
    font-size: clamp(14px, 2vw, 16px);
    color: #fff;
    margin-bottom: 20px;
}

.contact-form-input{
    width: 100%;
    height: 40px;
    background-color: #fff;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    margin-top: 8px;
    padding: 10px;
    color: #000;
}

.contact-form-textarea{
    resize: none;
    height: 100px;
}

.contact-form-button{
    font-family: jostRegular;
    font-size: clamp(14px, 2vw, 16px);
    color: #1f1d54;
    background-color: #fff;
    padding: 10px 20px;
    margin: 0 auto;
    border-radius: 6px;
    width: clamp(150px, 20%, 300px);
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
    transition: all 0.5s ease;
}

.contact-form-button:hover{
    background-color: #1f1d54;
    color: #fff;
}


.contact-type-container{
    background-color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px;
    margin: 0 auto;
    border-radius: 0 10px 10px 0;
}

.contact-type{
    margin-bottom: 20px;
    display: flex;
}

.contact-type:last-of-type{
    margin-bottom: 0;
}

.contact-type-icon{
    margin-right: 10px;
}

.contact-type-text-name{
    font-family: jostRegular;
    font-size: clamp(14px, 2vw, 16px);
}

.contact-type-text{
    width: 90%;
}

.contact-type-text-data{
    font-family: jostBold;
    font-size: clamp(16px, 2vw, 20px);
    color: #1f1d54;
    width: 100%;
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

@media (max-width: 834px){
    .contact-container{
        height: 950px;
        display: flex!important;
        flex-direction: column;
    }

    .contact-form-container{
        border-radius: 10px 10px 0 0;
    }

    .contact-type-container{
        border-radius: 0 0 10px 10px;
        width: 100%;
    }

}












/*ICONO WHATSAPP*/
.ic--baseline-whatsapp {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%231F1D54' d='M19.05 4.91A9.82 9.82 0 0 0 12.04 2c-5.46 0-9.91 4.45-9.91 9.91c0 1.75.46 3.45 1.32 4.95L2.05 22l5.25-1.38c1.45.79 3.08 1.21 4.74 1.21c5.46 0 9.91-4.45 9.91-9.91c0-2.65-1.03-5.14-2.9-7.01m-7.01 15.24c-1.48 0-2.93-.4-4.2-1.15l-.3-.18l-3.12.82l.83-3.04l-.2-.31a8.26 8.26 0 0 1-1.26-4.38c0-4.54 3.7-8.24 8.24-8.24c2.2 0 4.27.86 5.82 2.42a8.18 8.18 0 0 1 2.41 5.83c.02 4.54-3.68 8.23-8.22 8.23m4.52-6.16c-.25-.12-1.47-.72-1.69-.81c-.23-.08-.39-.12-.56.12c-.17.25-.64.81-.78.97c-.14.17-.29.19-.54.06c-.25-.12-1.05-.39-1.99-1.23c-.74-.66-1.23-1.47-1.38-1.72c-.14-.25-.02-.38.11-.51c.11-.11.25-.29.37-.43s.17-.25.25-.41c.08-.17.04-.31-.02-.43s-.56-1.34-.76-1.84c-.2-.48-.41-.42-.56-.43h-.48c-.17 0-.43.06-.66.31c-.22.25-.86.85-.86 2.07s.89 2.4 1.01 2.56c.12.17 1.75 2.67 4.23 3.74c.59.26 1.05.41 1.41.52c.59.19 1.13.16 1.56.1c.48-.07 1.47-.6 1.67-1.18c.21-.58.21-1.07.14-1.18s-.22-.16-.47-.28'/%3E%3C/svg%3E");
}
/*ICONO MAIL*/
.material-symbols--mail {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%231F1D54' d='M4 20q-.825 0-1.412-.587T2 18V6q0-.825.588-1.412T4 4h16q.825 0 1.413.588T22 6v12q0 .825-.587 1.413T20 20zm8-7l8-5V6l-8 5l-8-5v2z'/%3E%3C/svg%3E");
}
/*ICONO CELULAR*/
.material-symbols--call {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%231F1D54' d='M19.95 21q-3.125 0-6.175-1.362t-5.55-3.863t-3.862-5.55T3 4.05q0-.45.3-.75t.75-.3H8.1q.35 0 .625.238t.325.562l.65 3.5q.05.4-.025.675T9.4 8.45L6.975 10.9q.5.925 1.187 1.787t1.513 1.663q.775.775 1.625 1.438T13.1 17l2.35-2.35q.225-.225.588-.337t.712-.063l3.45.7q.35.1.575.363T21 15.9v4.05q0 .45-.3.75t-.75.3'/%3E%3C/svg%3E");
}
/*ICONO UBICACIÓN*/
.nrk--geopoint-active {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%231F1D54' fill-rule='evenodd' d='M12.556 23h-1.1l-1.008-1.217c-1.358-1.64-2.932-3.739-4.177-5.916C5.063 13.755 4 11.293 4 9c0-4.605 3.395-8 8-8s8 3.395 8 8c0 2.305-1.096 4.768-2.313 6.867c-1.256 2.166-2.83 4.258-4.137 5.89zM16 9a4 4 0 1 1-8 0a4 4 0 0 1 8 0' clip-rule='evenodd'/%3E%3Cpath fill='%231F1D54' d='M12 11a2 2 0 1 1 0-4a2 2 0 0 1 0 4'/%3E%3C/svg%3E");
}