@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&family=Prompt:ital,wght@0,300;1,100;1,700&display=swap');



html{
    scroll-behavior: smooth;
}

*{
    margin: 0;
    padding: 0;
    border: 0;
}


body{
    background: url(Img/pngwing.com.png) no-repeat center;
    background-size: cover;
    background-attachment: fixed;
}

.head{
display: flex;
justify-content: space-between;
align-items: center;
background: rgb(26, 27, 26);
width: 100%;
height: 70px;
z-index: 100;
position: fixed;
top: 0;
}

.name{
    margin-left: -470px;
}

.name h3{
    color: orange;
    font-size: 30px;
    font-family: sans-serif;
}

.logo{
    width: 50px;
    height: 40px;
}

.imagen_logo{
    margin-left: 20px;
}

.navbar{
    display: flex;
    margin-right: 20px;
    height: 100%;
 }
 
 
 
 .navbar a:hover{
     background-color: rgba(255, 217, 0, 0.558);
     color: #fff;
 }
 
 .navbar a{
     text-align: center;
     display: block;
     text-transform: uppercase;
     text-decoration: none;
     color: rgb(255, 166, 0);
     font-size: 20px;
     padding-right: 20px ;
     font-size: 13px;
     padding-top: 25px;
     padding-left: 20px;
     font-family: sans-serif;
     transition: all .3s ease 0s;
 }



.img_container{
    display: flex;
    position: absolute;
    z-index: -1;
    width: 100%;
    top: 70px;
}


.img_mode img{
    width: 360px;
    height: 330px;
    border:  black;
}

.contenedor_img{
    display: flex;
    width: 100%;
}


.imatec{
    background: rgba(90, 88, 88, 0.733);
    border: solid rgba(255, 146, 3, 0.671);
    border-width: 7px;
    width: 400px;
    margin-top: 100px;
    margin-left: 100px;
    color: white;
    padding: 6px;
    font-size: 20px;
    font-family: sans-serif;
}

.imatec p{
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

.imatec h4{
    padding-left: 120px;
}

.box_container{
    background: rgba(124, 124, 124, 0.733);
    height: 450px;
    display: flex;
    justify-content: center;
    text-align: center;
    flex-wrap: wrap;
    margin-top: 200px;
    margin-left: 70px;
    margin-right: 130px;
    z-index: -2;
    width: 90%;
}




.img{
    display: flex;
    margin-top: 70px;
    height: 300px;
    width: 600px
}

.img img{
    border: 6px solid orange; 
    
}


.box_mision{
    border: 0px solid black ;
    width: 450px;
    color: rgb(252, 252, 250);
    margin-left: 650px;
    margin-top: -310px;
    font-size: 23px;
    font-family: 'Poppins', sans-serif;
    font-family: 'Prompt', sans-serif;
}

.box_vision{
    border: 0px solid black ;
    width: 450px;
    color: rgb(252, 252, 251);
    margin-left: 650px;
    margin-top: 70px;
    font-size: 23px;
    margin-top: 30px;
    font-family: 'Poppins', sans-serif;
    font-family: 'Prompt', sans-serif;
}

footer{
    margin-top: 150px;
    display: flex;
    align-content: center;
}


.footer_contacto{
    background: #303030;
    width: 100%;
    height: 350px;
    color: orange; 
       

}

.info{
    border: 3px solid orange;
    color: white;
    width: fit-content;
    padding: 20px 20px;
    font-size: 20px;
    font-family: sans-serif;
    height: fit-content;
    margin-left: 4%;
}

.imagen_logo_footer{
    width: fit-content;
    margin-left: 15%;
    margin-top: 5%;
}

.google_mapa{
width: fit-content;
margin-left: 13%;
margin-top: 5%;
}

.footer_imatec{
    margin-top: 0;
    height: 100px;
    background-color: #5c5c5c;
    width: 100%;
}

.footer_descr{
    padding-top: 50px;
    padding-left: 24%;
}

.footer_descr h3{
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 25px;
}

.whatsapp_logo{
    margin-top: 15px;
    position: fixed;
    width: 75px;
    height: 75px;
    line-height: 65px;
    bottom: 2%;
    right: 20px;
    text-align: center;
   border-radius: 60px;
    z-index: 100;
}

.whatsapp_logo:hover{
    text-decoration: none;
    color: #0df053;
    background: #fff;
    size: 70px;
}

/* para celulares */
@media (max-width: 700px) {

    *{
        padding: 0;
        margin: 0;
    }

    .head{
        width: 100%;
        display: flex;
        flex-direction: column;
        height: 160px;
        position: unset;
    }

    .imagen_logo{
      margin: 0;

    }

    .name{
        font-size: small;
        position: initial;
        margin: 0;
    }

    .navbar{
        height: fit-content;
        margin: 0;
    }

    .navbar a{
        padding: 5px 5px;
        font-size: smaller;
        display: flex;
        transition: all .3s ease 0s;
    }

    .img_container{
        width: 100%;
        display: flex;
        margin-top: 90px;
    }

    .img_mode{
        width: 100%;
        height: 30%;
    }

    .img_mode img{
        width: 100%;
    }

    .contenedor_img{
        display: grid;
        width: 100%;
        align-content: space-evenly;
    }

    .header_imatec{
        width: 100%;
        height: 30%;
        margin-top: 10px;
    }

    .imatec{
        margin: 0;
        padding: 0;
        width: 96%;
    }

    .box_container{
        width: 100%;
        display: flex;
        margin: 0;
        margin-top: 50px;
        height: 70vh;
    }

    .img {
        margin: 0;
        width: 100%;
        display: inline-flex;
    }

    .box_content{
        display: grid;
        width: 100%;
    }

    .box_box{
        display: grid;
        margin-top: 30px;
        height: 200px;
    }

    .box_mision{
        margin: 0;
        display: unset;
        width: 100%;
        color: white;
        font-size: small;
    }

    .box_vision{
        margin: 0;
        display: unset;
        width: 100%;
        color: white;
        font-size: small;
    }

    .footer_contacto{
        margin-top: 112%;
        width: 100%;
        height: 80vh;
        display: grid;
    }

    .footer_imatec{
        height: fit-content;
    }

    .info{
        padding: 0;
    }

    .oficinas{
        margin-top: 5px;
        display: flex;
        margin: 0;
    }

    .google_mapa{
        width: 100%;
        margin: 0;
    }

    .mapa{
        margin: 0;
        width: 100%;
    }

    .whatsapp_logo{
        position: unset;
    }
}