/*Fuentes Importadas (Local)*/

@font-face {
    /*Font Lato Normal*/
    font-family: 'Lato';
    src: url("/src/fonts/Lato/Lato-Regular.woff"),
        url("/src/fonts/Lato/Lato-Regular.woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

    /*Font Lato Bold*/
@font-face {
    font-family: 'Lato' ;
    src: url("/src/fonts/Lato/Lato-Bold.woff"),
         url("/src/fonts/Lato/Lato-Bold.woff2");
    font-weight: 700;
    font-style: bold;
    font-display: swap;
}


    /*Font Lato Thin*/
@font-face {
    font-family:'Lato' ;
    src: url("/src/fonts/Lato/Lato-Light.woff"),
         url("/src/fonts/Lato/Lato-Light.woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

    /*Font DM Mono*/
@font-face {
    font-family:'Lato' ;
    src: url("/src/fonts/DM_Mono/DMMono-Regular.woff"),
         url("/src/fonts/DM_Mono/DMMono-Regular.woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}




/*Configuraciones iniciales*/
*{
    font-family: Lato;
    font-style: normal;
}

body{
    border: 3px solid black;
    padding: 10px;
}

.overlay{
    background-color: black;
}

/*Configuraciones de estilos del menu*/


/*Fondo de Menu Principal*/
.fondo-menu{
    background-color: #00bf63;
    border: 3px solid black;
}

/*Configuración de contenedor de menu*/
.container-menu{
    display: flex;
    flex-flow: wrap;
    justify-content: space-between;
    align-items: center;
}


/*Configuracion del logo de marca*/
.logo-marca a{
    text-decoration: none;
    color: inherit;
}

/*Configurar logo de luvi en menu*/
.logo-marca img{
    width:auto;
    height: 100px;
}

/*Configuracion de  contenedor Menu Principal*/
.contenedor-links{
    width: auto;
    font-family: Lato;
    font-weight: bold;

}


/*Configuracion de enlaces del menu*/
.nav-links{
    display: flex;
    justify-content: space-between;
    list-style: none;
    text-decoration: none;
    width: 100%;
    color: white;
}

/*Eliminar el estilo de (a) enlace*/
.nav-links a{
    text-decoration: none;
    color: inherit;
}


/*Configuracion de iconos sociales*/
.iconos-sociales{
    display: flex;
    justify-content: space-between;
    margin: 10px;
    color: white;
}

/*Configuraciones de iconos sociales a*/
.iconos-sociales a{
    margin: 10px;
    color: inherit;
}

/*Configuracion de section*/

.contenedor-principal{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 10px;
}

.contenedor-iconos-services{
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
    border: 3px solid black;
    gap: 20px;
}


.columna-iconos{
    width: 100%;
    height: 100%;
    align-items: center;
    justify-items: center;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-template-rows: repeat(3,1fr);
    gap: 5px;
}

.icon-u{
    border: 3px solid #00bf63;
    box-shadow: 10px 10px black ;
    border-radius: 10px;
    grid-column-start: 1;
    grid-row-start: 1;
}
.icon-d{
    border: 3px solid #00bf63;
    box-shadow: 10px 10px black ;
    border-radius: 10px;
    grid-column-start: 3;
    grid-row-start: 3;
}
.icon-t{
    border: 3px solid #00bf63;
    box-shadow: 10px 10px black ;
    border-radius: 10px;
    grid-column-start: 2;
    grid-row-start: 2;
}
.icon-c{
    border: 3px solid #00bf63;
    box-shadow: 10px 10px black ;
    border-radius: 10px;
    grid-column-start: 3;
    grid-row-start: 1;
}
.icon-ci{
    border: 3px solid #00bf63;
    box-shadow: 10px 10px black ;
    border-radius: 10px;
    grid-column-start: 1;
    grid-row-start: 3;
}

/*Configuracion de hero section*/
.contenedor-hero{
    margin-top: 10px;
    border: 3px solid black;
}


.datos{
    margin: 10px;
}

.datos h1{
    font-size: 40px;
    font-weight: bold;
  background: -webkit-linear-gradient(#00bf63,#00bf63,black);
    background-clip: border-box;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
}




/*Configuracion contenedor  de botones*/
.contenedor-botones{
    display: flex;
    width: auto;
    flex-flow: wrap;
}

.contenedor-boton1{
margin: 5px;
}
.contenedor-boton2{
margin: 5px;
}

.btn-style{
    background-color: transparent;
    border: 2px solid #00bf63;
    border-radius: 5px;
}

.btn-link:hover{
    color: white;
}

.btn-style:hover{
    background-color: #00bf63;
    border: 2px solid black
}

.btn-link{
    text-decoration: none;
    color: black;
}

.bg-footer{
    margin-top: 10px;
    border: 3px solid black;
    padding: 10px;
    background-color: black;
}

.bg-ultimos-proyectos{
    display: grid;
    grid-template-columns: 0.5fr 1fr;
    margin-top: 10px;
    border: 3px solid black;
    padding: 10px;
}

.background-servicios{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    margin-top: 10px;
    border: 3px solid black;
    padding: 10px;
    gap: 10px;
}

.servicios-text{
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    border: 3px solid black;
    gap: 10px;
    background-color: #00bf63;
    
}

.servicios-explicacion{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    padding: 10px 10px 10px 10px;
    gap: 10px;
    
}

.servicios-contenido{
    padding: 10px 10px 0px 10px;
    color: white;
}

.explicacion{
    border: 3px solid white;
    padding: 10px;
    background-color: white;
    border-radius: 10px;
   
}

.explicacion h4{
    font-size: 12px;
}

.explicacion p{
    font-size: 12px;
}

.servicios-player{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    justify-items: center;
    align-content: center;
    padding: 10px;
    border: 3px solid black;
    gap: 10px;
    background-color: #00bf63;
}

.servicios p{
    font-size: 12px;
}

.servicios h4{
    font-size: 12px;
}

.servicios{
    border: 3px solid white;
    border-radius: 10px;
    padding: 10px;
    width: 80%;
    background-color: white;

}

.titulo-con-icono{
    
    display: grid;
    grid-template-columns: 1fr 0.5fr;
    width: 100%;
}

.bg-clientes{
    margin-top: 10px;
    border: 3px solid black;
    padding: 10px;
    background-color: #00bf63;
    color: white;
}



.ultimos-proyectos{
   display: grid;
   grid-template-columns: repeat(4,1fr);
   gap: 20px; 
}

.title-ultimo-proyecto{
    width: 100%;
}

.grid-icons{
  display: flex;
  flex-flow: nowrap;
  justify-content: center;
  align-content: space-between;
  gap: 10px;
}

.grid-icons i{
    font-size: 1.5rem;
}



.proyect{
    background-color:#00bf63;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 1px 1px 29px 0px rgba(0,0,0,0.75);
    -webkit-box-shadow: 1px 1px 29px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 1px 1px 29px 0px rgba(0,0,0,0.75);
    cursor: pointer;
}




.proyect:hover{
    transform: scale(1);

}

.proyect article{
    width: 100%;
    font-family: DM Mono;
    font-weight: normal;
    color: white;
}

.proyect a{
    text-decoration: none;
    color: white;
}

.proyect article h4{
    text-align: center;

}



.proyect img{
    width: 100%;
    border-radius: 5px;
}

.proyect-div{
    display: flex;
    flex-flow: wrap ;
    justify-content: space-between;
    gap: 15px;

}

.proyect-div button{
    width: 50px;
    height: 45px;
    border-radius: 50px;
    border: 1px solid black;
}

.clientes{
    display: grid;
    grid-template-columns: repeat(5,1fr);
    justify-items: center; 
    align-content: center; 
}

.cliente{
    border: 3px solid white;
    padding: 10px;

}

.clientes img{
    width: 200px;
}

.footer-text{
    display: flex;
    flex-flow: nowrap;
    justify-content: space-evenly;
    align-items: center;
    color: white;
}

.footer-text img{
    width: auto;
    height: 100px;
}

/*Responsive*/

@media (max-width : 900px ) {

    
/*Configuración de contenedor de menu*/
.container-menu{
    display: flex;
    flex-flow: wrap;
    justify-content: space-between;
    align-items: center;
}


/*Configuracion de section*/

.contenedor-principal{
    display: grid;
    grid-template-columns: repeat(1,1fr);
    gap: 10px;
}

.contenedor-iconos-services{
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
    border: 3px solid black;
    gap: 20px;
}


.columna-iconos{
    margin: 15px;
}


/*Configuracion de hero section*/


/*Configuracion contenedor  de botones*/
.contenedor-botones{
    display: flex;
    width: auto;
    flex-flow: wrap;
}



.bg-ultimos-proyectos{
    display: grid;
    grid-template-columns: repeat(1,1fr);
    margin-top: 10px;
    border: 3px solid black;
    padding: 10px;
}

.ultimos-proyectos{
   display: grid;
   grid-template-columns: repeat(2,1fr);
   gap: 20px; 
}

.background-servicios{
    display: grid;
    grid-template-columns: repeat(1,1fr);
    margin-top: 10px;
    border: 3px solid black;
    padding: 10px;
    gap: 10px;
}

.servicios-text{
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    border: 3px solid black;
    gap: 10px;
    background-color: #00bf63;
    
}

.servicios-explicacion{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    padding: 10px 10px 10px 10px;
    gap: 10px;
    
}

.servicios-contenido{
    padding: 10px 10px 0px 10px;
    color: white;
}

.explicacion{
    border: 3px solid white;
    padding: 10px;
    background-color: white;
    border-radius: 10px;
   
}

.explicacion h4{
    font-size: 12px;
}

.explicacion p{
    font-size: 12px;
}

.servicios-player{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    justify-items: center;
    align-content: center;
    padding: 10px;
    border: 3px solid black;
    gap: 10px;
    background-color: #00bf63;
}

.servicios p{
    font-size: 12px;
}

.servicios h4{
    font-size: 12px;
}

.servicios{
    border: 3px solid white;
    border-radius: 10px;
    padding: 10px;
    width: 80%;
    background-color: white;

}

.titulo-con-icono{
    
    display: grid;
    grid-template-columns: 1fr 0.5fr;
    width: 100%;
}

.bg-clientes{
    margin-top: 10px;
    border: 3px solid black;
    padding: 10px;
    background-color: #00bf63;
    color: white;
}





.grid-icons{
  display: flex;
  flex-flow: nowrap;
  justify-content: center;
  align-content: space-between;
  gap: 10px;
}

.grid-icons i{
    font-size: 1.5rem;
}



.proyect{
    background-color:#00bf63;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 1px 1px 29px 0px rgba(0,0,0,0.75);
    -webkit-box-shadow: 1px 1px 29px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 1px 1px 29px 0px rgba(0,0,0,0.75);
    cursor: pointer;
}




.proyect:hover{
    transform: scale(1);

}

.proyect article{
    width: 100%;
    font-family: DM Mono;
    font-weight: normal;
    color: white;
}

.proyect a{
    text-decoration: none;
    color: white;
}

.proyect article h4{
    text-align: center;

}



.proyect img{
    width: 100%;
    border-radius: 5px;
}

.proyect-div{
    display: flex;
    flex-flow: wrap ;
    justify-content: space-between;
    gap: 15px;

}

.proyect-div button{
    width: 50px;
    height: 45px;
    border-radius: 50px;
    border: 1px solid black;
}

.clientes{
    display: grid;
    grid-template-columns: repeat(5,1fr);
    justify-items: center; 
    align-content: center; 
}

.cliente{
    border: 3px solid white;
    padding: 10px;

}

.clientes img{
    width: 200px;
}




.footer-text{
    display: flex;
    flex-flow: column;
    justify-content: space-evenly;
    align-items: center;
    color: white;
}

.footer-text img{
    width: auto;
    height: 100px;
}

    
 }