*{
    padding: 0;
    margin: 0;
    font-family: outfit;
}

body{
    height: 160vh;
}

body > nav > div > div.nav__sec-title-container > h2{
    color: #fff;
}

.main{
    container-type: inline-size;
    container-name: main;
}
.nav__sec-title-container h2{ 
    text-decoration: none;
}


.form{
    background-color:  rgb(248, 248, 248);
    max-width: 80%;
    margin: auto;
    margin-top: 50px;
    box-sizing: content-box;
    padding: 20px;
    box-shadow: 0 0 10px 0 #333;
    border-radius: 8px;
    background-image: url("fondo_tlf.png");
    background-size: cover;
    background-position: center;
    
}

input, textarea, select{
    width: 100%;
    height: 40px;
    border: none;
    border-radius: 10px;  
    box-sizing: border-box;
    padding: 10px;
    opacity: 0.7;
}

label{
line-height: 2;
font-weight: 300;
box-sizing: border-box;
padding: 10px;
color: #000000;
}

.material-symbols-outlined{
    color: #FFF;
}

textarea{
    height: 100px;
    resize: none;
    min-width: 100%;
    max-height: 200px;
    min-height: 100px;
    overflow: hidden;
    box-sizing: content;
    font-family: sans-serif;
}

h2{
    color: var(--blue);
   margin-left: 7px;
   text-decoration: underline 2px var(--orange);
}

.form_submit{
    margin-top: 20px;
    border-radius: 10px;
    box-shadow: 0 0 5px #333;
}

.submit{
    color: var(--blue);
    font-weight: 700;
    background-color: var(--orange);
    transition: background-color .5s;
    transition: color .5;
    opacity: 1;
}

.submit:hover{
    color: #FFF;
    background-color: var(--blue);
}

/*UBICACION*/

.information_ubication{
    background-color:  #fff;
    max-width: 80%;
    margin: auto;
    margin-top: 50px;
    box-sizing: content-box;
    padding: 20px;
    box-shadow: 0 0 10px 0 #333;
    border-radius: 8px;
    animation: view-flex both;
    animation-timeline: view();
    animation-range: cover 10% contain 10%;
    opacity: 0;
}

.information_ubication-item{
    width: 100%;
    padding: 10px;
}

.contact > h3{
    color: var(--blue);
    text-decoration: underline 2px var(--orange);
}


.contact_contaier > h3{
    color: var(--blue);
    text-decoration: underline 2px var(--orange);
}

.information_ubication-item > h3{
    color: var(--blue);
    text-decoration: underline 2px var(--orange);
}


p{
    width: 100%;
    font-size: 12px;
    font-weight: 700;
}

.contact{
    
    background-color:  #fff;
    max-width: 80%;
    margin: auto;
    margin-top: 50px;
    box-sizing: content-box;
    padding: 20px;
    box-shadow: 0 0 10px 0 #333;
    border-radius: 8px;
    padding-bottom: 0;
    height: 350px;
    animation: view-flex both;
    animation-timeline: view();
    animation-range: cover 10% contain 10%;
    opacity: 0;
    margin-bottom: 0px;

}




.contact a, h5{
    box-sizing: content-box;
    text-decoration: none;
    color: #000;
    padding: 0 30px;
    line-height: 1.2;
}

.contact_contaier h3{
padding: 10px;
}

#ig{
    transform: translateY(32px);
    width: 20px;
    height: 20px;
}

#correo{
    transform: translateY(25px);
    width: 22px;
    
}

#llamada{
    transform: translateY(30px);
    width: 22px;
    
}

#fb{
    transform: translateY(30px);
    width: 22px;
    
}

/* ANIMACIONES  */

@keyframes view-flex{
    to{
        opacity: 1;
    }
}

@container main (min-width: 52rem){
    .main__general-form{
        display: flex;
        flex-direction: row-reverse;
    }

    .contact{
       height: 46.5vh;
       margin-top: 20px;
    }
    .nav_e-maiL{
        margin-left: 10px;
    }
    .form{
        width: 60%;
        height: 69dvh;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center ;
        margin-right: 50px;
        background-image: none;
    }

    .ubi-info__container{
        margin-left: 40px;
    }
}

@media screen and (min-width : 52rem){
    body{
        height: 100vh;
    }
}