*{
    font-family: 'Open Sans', sans-serif;
    padding: 0px;
    margin: 0px;
}

body{
    background-color: rgb(4, 4, 17);
    scroll-behavior: smooth;
}

p{
    display: inline-block;
}
 
ul,li{
    list-style-type: none;
}

a{
    text-decoration: none;
    color: black;
}

.containMaster{
    width: 100vw;
    height: 100vh;
    display: grid;
    grid-template-columns: 1fr;
    place-items: center;
}

.navegador{
    width: 100vw;
    height: 140px;
    position: absolute;
    top: 0px;
    left: 0px;
    -background: gray;
    display: grid;
    grid-template-columns: 1fr;
    place-items: center;
}

.containMenu{
    width: 100%;
    max-width: 1080px;
    height: 100%;
    display: grid;
    grid-template-columns: 70px 1fr auto;
    -background-color: brown;
}

.menuLogo{
    width: 100%;
    height: 100%;
    background: url(images/logo_top.svg);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    -background-color: black;
}

.menuTop{
    width: fit-content;
    height: 100%;
    display: grid;
    grid-template-columns: 1fr;
    place-items: center;
    -background-color: aquamarine;
}

.menuCont{
    width: 100%;
    height: 25px;
    -background-color: rgb(101, 101, 211);
}

.menuText{
    float: left;
    padding: 5px 10px;
    font-size: 0.8rem;
    font-weight: 600;
    color: rgb(255, 255, 255);
}

.menuText:hover{
    font-weight: 700;
}

.conversemosMenu:hover{
    width: 100px;
    height: 100%;
    border-radius: 40px;
    border: solid 1px rgb(247, 182, 4);
    display: grid;
    grid-template-columns: 1fr;
    place-items: center;
    padding: 2px 4px;
    background-color: rgba(247, 182, 4, 1);
}

.conversemosMenu{
    width: 100px;
    height: 100%;
    border-radius: 40px;
    border: solid 1px rgb(255, 255, 255);
    display: grid;
    grid-template-columns: 1fr;
    place-items: center;
    padding: 2px 4px;
    background-color: rgba(247, 182, 4, 0);
}

.menutextBotom{
    font-size: 0.8rem;
    font-weight: 600;
    color: white;
}

.container{
    width: 100%;
    max-width: 1280px;
    height: 2000px;
    background-color: black;
}

.introSlider{
    width: 100%;
    height: 700px;
    display: grid;
    grid-template-columns: 1fr;
    place-items: end center;
    background: url(images/intro.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: rgb(43, 43, 44);
}

.introLayout{
    width: 100%;
    max-width: 1080px;
    height: calc(100% - 180px);
    display: grid;
    grid-template-rows: 6fr 0.5fr 3fr 0.5fr;
    -background-color: rgba(255, 255, 255, 0.5);
}

.textosIntro{
    width: 100%;
    height: 100%;
    -background-color: rgba(255, 255, 255, 0.5);
}



.bajadaIntro{
    width: 100%;
    font-size: 1rem;
    font-weight: 400;
    padding-bottom: 10px;
    color: rgb(255, 255, 255);
}

.tituloIntro{
    font-size: 3.8rem;
    font-weight: 700;
    line-height: 3.8rem;
    padding-bottom: 10px;
    width: 100%;
    color: rgb(255, 255, 255);
}

.textoIntro{
    font-size: 0.9rem;
    font-weight: 300;
    width: 33%;
    padding-bottom: 20px;
    color: rgb(255, 255, 255);
}

.introBotones{
    width: 100%;
    height: 40px;
    -background-color: rgba(255, 255, 255, 0.3);
}

.botonIntro{
    width: 150px;
    height: 100%;
    border: solid 1px white;
    border-radius: 20px;
    display: grid;
    grid-template-columns: 1fr;
    place-items: center;
    background-color: rgba(0, 0, 0, 0);
    transition: all ease-in-out 0.3s;
}

.botonIntro:hover{
    width: 150px;
    height: 100%;
    border: solid 1px rgb(247, 182, 4);
    border-radius: 20px;
    display: grid;
    grid-template-columns: 1fr;
    place-items: center;
    background-color: rgba(247, 182, 4, 1);
}

.botomTextIntro{
    font-size: 0.85rem;
    font-weight: 300;
    color: white;
}

.boxIntro{
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 1rem;
    -background-color: rgba(255, 255, 255, 0.3);
}

.modulo{
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 1fr;
    place-items: center;
    background-color: rgba(5, 4, 31, 0.3);
}

.moduloCont{
    width: 90%;
    height: 90%;
    display: grid;
    grid-template-rows: 3fr 2fr 3fr;
    -background-color: rgba(255, 255, 255, 0.5);
}

.iconModulo{
    height: 100%;
    width: 100%;
    -background-color: rgba(255, 255, 255, 0.3);
}

.iconUno{
    background: url(images/numeros.svg);
    background-size: contain;
    background-position: left center;
    background-repeat: no-repeat;
}

.iconDos{
    background: url(images/gestionProyectos.svg);
    background-size: contain;
    background-position: left center;
    background-repeat: no-repeat;
}

.iconTres{
    background: url(images/reporte.svg);
    background-size: contain;
    background-position: left center;
    background-repeat: no-repeat;
}

.iconCuatro{
    background: url(images/chip.svg);
    background-size: contain;
    background-position: left center;
    background-repeat: no-repeat;
}

.tituloModulo{
    height: 100%;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    place-items: center start;
    -background-color: rgba(255, 255, 255, 0.5);
}

.titulotextModulo{
    font-size: 0.8rem;
    font-weight: 400;
    text-transform: uppercase;
    color: white;
}

.textoModulo{
    height: 100%;
    width: 100%;
    -background-color: rgba(255, 255, 255, 0.7);
}

.textModulo{
    font-size: 0.6rem;
    font-weight: 400;
    color: white;
}

.queHacemos{
    width: 100%;
    height: 400px;
    display: grid;
    grid-template-columns: 1fr;
    place-items: center;
    background: white;
}

.quehacemosCont{
    width: 100%;
    max-width: 1080px;
    height: 90%;
    display: grid;
    grid-template-columns: 6fr 4fr;
    grid-gap: 2rem;
    -background-color: rgba(0, 0, 0, 0.2);
}

.quehacemosText{
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.1);
}

.quehacemosBajada{
    font-size: 0.7rem;
    font-weight: 600;
    width: 100%;
    color: rgb(247, 101, 4);
    margin-bottom: 15px;
}

.quehacemosTitulo{
    font-size: 2.5rem;
    font-weight: 400;
    line-height: 2.5rem;
    color: rgb(77, 77, 77);
    margin-bottom: 15px;
}

.quehacemosTexto{
    font-size: 0.9rem;
    font-weight: 300;
    width: 90%;
    color: rgb(77, 77, 77);
    margin-bottom: 30px;
}

.quehacemosImage{
    width: 100%;
    height: 100%;
    background: url(images/quehacemos.jpg);
    background-position: right top;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: rgba(255, 255, 255, 0.2);
}

.card{
    width: 400px;
    height: 70px;
    display: grid;
    grid-template-columns: 70px 1fr;
    grid-gap: 1rem;
    place-items: center;
    -background-color: blue;
}

.cardFoto{
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: url(images/manuel.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    -background-color: rgba(255, 255, 255, 0.2);
}

.cardJefes{
    width: 100%;
    height: 70%;
    -background-color: rgba(255, 255, 255, 0.3);
}

.cardNombres{
    font-size: 1rem;
    font-weight: 400;
    color: black;
}

.cardcargo{
    font-size: 0.8rem;
    font-weight: 300;
    color: black;
}

.servicios{
    width: 100%;
    height: 700px;
    background: url(images/servicios_bg.jpg);
    background-position: bottom center;
    background-size: cover;
    background-repeat: no-repeat;
    display: grid;
    grid-template-columns: 1fr;
    place-items: center;
    -background-color: rgb(10, 10, 41);
}

.contServicios{
    width: 100%;
    max-width: 1080px;
    height: 90%;
    display: grid;
    grid-template-rows: auto auto 1fr;
    place-items: center;
    -background-color: rgba(255, 255, 255, 0.5);
}

.serviciosTitulo{
    font-size: 2.5rem;
    font-weight: 400;
    text-align: center;
    line-height: 2.7rem;
    margin-top: 10px;
    color: rgb(255, 255, 255);
}

.serviciosbajada{
    font-size: 0.9rem;
    font-weight: 300;
    width: 50%;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 15px;
    color: rgb(255, 255, 255);
}

.contservBox{
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-gap: 1rem;
    -background-color: rgba(255, 255, 255, 0.5);
}

.servBox{
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-rows: 4px 4fr 1.5fr  4.5fr;
    grid-gap: 0.5rem;
    place-items: center;
    background-color: rgba(0, 0, 0, 0);
}

.servBox:hover{
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-rows: 4px 4fr 1.5fr  4.5fr;
    grid-gap: 0.5rem;
    place-items: center;
    background-color: rgba(0, 0, 0, 0.5);
    box-shadow: -2px 6px 27px 0px rgba(0,0,0,0.59);
    -webkit-box-shadow: -2px 6px 27px 0px rgba(0,0,0,0.59);
    -moz-box-shadow: -2px 6px 27px 0px rgba(0,0,0,0.59);
}


.serboxBarra{
    width: 100%;
    height: 100%;
    background-color: rgba(250, 164, 3, 0);
}

.servBox:hover .serboxBarra{
    background-color:  rgb(191, 156, 117);
}

.serboxIcono{
    width: 85%;
    height: 100%;
    -background-color: rgba(255, 255, 255, 0.4);
}

.servIcoUno{
    background: url(images/servicioUno.svg);
    background-position: left center;
    background-size: contain;
    background-repeat: no-repeat;
}

.servIcoDos{
    background: url(images/servicioDos.svg);
    background-position: left center;
    background-size: contain;
    background-repeat: no-repeat;
}

.servIcoTres{
    background: url(images/servicioTres.svg);
    background-position: left center;
    background-size: contain;
    background-repeat: no-repeat;
}

.servIcoCuatro{
    background: url(images/servicioCuatro.svg);
    background-position: left center;
    background-size: contain;
    background-repeat: no-repeat;
}

.servIcoCinco{
    background: url(images/servicioCinco.svg);
    background-position: left center;
    background-size: contain;
    background-repeat: no-repeat;
}

.servIcoSeis{
    background: url(images/servicioSeis.svg);
    background-position: left center;
    background-size: contain;
    background-repeat: no-repeat;
}

.serboxTitulo{
    width: 85%;
    height: 100%;
    display: grid;
    grid-template-columns: 1fr;
    place-items: center start;
    -background-color: rgba(255, 255, 255, 0.2);
}

.tituloservBox{
    font-size: 1rem;
    font-weight: 400;
    color: white;
}

.serboxTexto{
    width: 85%;
    height: 100%;
    -background-color: rgba(255, 255, 255, 0.4);
}

.bajadaservBox{
    font-size: 0.7rem;
    font-weight: 300;
    color: white;
}

.empresas{
    width: 100%;
    height: 350px;
    display: grid;
    grid-template-columns: 1fr;
    place-items: center;
    background-color: white;
}

.empresasCont{
    width: 100%;
    max-width: 1080px;
    height: 90%;
    display: grid;
    grid-template-rows: 2.7rem auto 1fr;
    grid-gap: 1rem;
    -background-color: rgba(0, 0, 0, 0.2);
}

.tituloEmpresas{
    font-size: 2.5rem;
    font-weight: 300;
    color: black;
    margin-top: 10px;
    text-align: center;
}

.bajadaEmpresa{
    font-size: 1rem;
    font-weight: 400;
    color: black;
    text-align: center;
}

.empresasLogos{
    width: 100%;
    height: 200px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    grid-gap: 0.5rem;
    -background-color: red;
}

.logoEmpresaUno{
    width: 100%;
    height: 100%;
    background:url(images/empresa_uno.svg);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.logoEmpresaDos{
    width: 100%;
    height: 100%;
    background:url(images/empresa_dos.svg);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.logoEmpresaTres{
    width: 100%;
    height: 100%;
    background:url(images/empresa_tres.svg);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.logoEmpresaCuatro{
    width: 100%;
    height: 100%;
    background:url(images/empresa_cuatro.svg);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.formulario{
    width: 100%;
    height: 550px;
    display: grid;
    grid-template-columns: 1fr;
    place-items: center;
    background: url(images/formulario_bg.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: rgb(8, 8, 92);
}

.contFormulario{
    width: 100%;
    max-width: 1080px;
    height: 90%;
    display: grid;
    grid-template-columns: 4fr 6fr;
    grid-gap: 1rem;
    -background-color: rgba(255, 255, 255, 0.7);
}

.imageForm{
    width: 100%;
    height: 100%;
    background: url(images/fomrulario.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: aquamarine;
}

.imageFormText{
    font-size: 2.5rem;
    font-weight: 300;
    padding: 1.5rem;
    line-height: 2.4rem;
    color: black;
}

.form{
    width: 100%;
    height: 100%;
    -background-color: rgb(127, 129, 255);
}

input{
    width: 80%;
    height: 30px;
    border: solid 1px rgb(236, 183, 7);
    padding: 6px;
    margin: 6px;
    color: white;
    background: rgba(255, 255, 255, 0.1);
}

input:hover{
    width: 80%;
    height: 30px;
    border: solid 1px white;
    padding: 6px;
    margin: 6px;
    color: white;
    background: rgba(255, 255, 255, 0.1);
}

input .placeholder{
    color: red;
}

textarea{
    width: 80%;
    height: 100px;
    border: solid 1px rgb(236, 183, 7);
    padding: 6px;
    margin: 6px;
    color: white;
    background-color: rgba(255, 255, 255, 0.1);
}

textarea:hover{
    width: 80%;
    height: 100px;
    border: solid 1px white;
    padding: 6px;
    margin: 6px;
    color: white;
    background-color: rgba(255, 255, 255, 0.1);
}

.textForm{
    font-size: 1rem;
    font-weight: 300;
    color: white;
}

.enviarBotom{
    width: 80%;
    height: 40px;
    border: solid 1px rgba(236, 182, 7, 1);
    padding: 6px;
    margin: 6px;
    color: rgb(236, 183, 7);
    background: rgba(236, 182, 7, 0);
}

.enviarBotom:hover{
    width: 80%;
    height: 40px;
    border: solid 1px rgba(255, 255, 255, 0);
    padding: 6px;
    margin: 6px;
    color: white;
    background: rgb(236, 183, 7, 1);
}

.pie{
    width: 100%;
    height: 200px;
    display: grid;
    grid-template-columns: 1fr;
    place-items: center;
    background-color: rgb(23, 23, 31);
}

.pieCont{
    width: 100%;
    max-width: 1080px;
    height: 90%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 1rem;
    place-items: center;
    -background: rgba(255, 255, 255, 0.575);
}

.pieLogo{
    width: 100%;
    height: 100%;
    -background: rgba(0, 0, 0, 0.3);
}

.logoFooter{
    height: 120px;
    width: auto;
}

.pieDerechos{
    font-size: 0.7rem;
    font-weight: 400;
    color: white;
}

.pieDireccion{
    width: 100%;
    height: 60%;
    -background: rgba(0, 0, 0, 0.2);
}

.pieCalle{
    font-size: 0.8rem;
    font-weight: 300;
    color: white;
    margin-bottom: 10px;
}

.pieCelular{
    font-size: 0.8rem;
    font-weight: 300;
    color: white;
    margin-bottom: 10px;
}

.pieTelefonos{
    font-size: 0.8rem;
    font-weight: 300;
    color: white;
    margin-bottom: 10px;
}

.pieMail{
    width: 100%;
    height: 60%;
    -background: rgba(0, 0, 0, 0.4);
}

.pieMailing{
    font-size: 0.8rem;
    font-weight: 300;
    color: white;
    margin-bottom: 10px;
}