body {
    margin: 0 !important;
    padding: 0;
    overflow-x: hidden;
    display: flex; /* Evita la barra de desplazamiento horizontal */
    background-color: rgb(15, 15, 15) !important;    
}
main{
    width: 81%;
    position: relative;
    left: 10%;
}
.works-title{
    position: relative;
}
/* Estilo para titulo de la clase work title */
.works-title h1{
    color: white; 
    margin-left: auto;
    margin-right: 90px;
    margin-top: 0px;
    font-family:'jost', sans-serif;
    font-size: 75px;
}
.works-title h2{
    color: white;
    font-size: 20px;
}


/* Body de la pagina work  */
.work-body{
    margin: 0;
    box-sizing: border-box;
    background-color: rgb(12, 12, 12);
}
.contact-body{
    margin: 0;
    box-sizing: border-box;
    background-color: rgb(12, 12, 12);
}
/* Clase del body de archivo video */
.video{
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    display: flex; 
    background-color: rgb(0, 0, 0);
}
/* Estilo a etiqueta a de la clase redes */
.redes a{
    text-decoration: none;
    padding-bottom: 0;
    margin-bottom: 20px;
}
  /* Estilo a etiqueta img de la clase redes */
.redes img{
    width: 58px;
    height: 33px;
    margin-bottom: 20px;
    background-color: transparent !important;
  }
  /* Estilo a clase ig de la clase redes */
.redes .ig{
    text-decoration: none;
    margin-right: 3px;
    margin-left: 7px;
    width: 39px;
  }
/* Menu de navegaciòn */
.navegacion{ 
    position: fixed;
    margin-bottom: 0px;
    margin-right: 24px;
    color: white;
    font-family: 'jost', sans-serif;
    transform: translate(1230px, 350px);
}
/* Botones de menu de navegacion */
.navegacion ul{
    list-style-type: none; /* Elimina los marcadores de lista */
    padding: 0; /* Elimina el relleno predeterminado de la lista */
    margin: 0; /* Elimina el margen predeterminado de la lista */
    display: flex; /* Establece el contenedor como un contenedor flexible */
    flex-direction: column; 
}
/* Separacion entre botones del menù */
.navegacion li{
    margin-bottom: 25px;
}
/* Estilos de botones de menu de navegacion */
.navegacion .inicio{
    text-decoration: none;
    color: white;
    padding: 11px 21px 11px 21px;
}
.navegacion .inicio:hover{
    color: black;
}
/* Navegacion de work */
/* Menu de navegaciòn */
.navegacionw{ 
    display: none;
    position: fixed;
    bottom: 0;
    right: 0;
    margin-bottom: 50px;
    margin-right: 34px;
    color: white;
    font-family: 'jost', sans-serif;
}
/* Estilos para todos los botones */
button {
    background-color: transparent !important; /* Puedes ajustar el color según tus preferencias */
    color: white;
}
.hover-element {
    padding: 10px;
    cursor: pointer;
}
/* Mostrar la imagen al pasar el mouse sobre el elemento */
.container:hover .hover-image {
    display: block;
}

/* Estilos para contenedor de about me */
.aboutMe{
    background-color: transparent !important;
    top: 125%;
    color: white;
    width: 100%;
    height: 500px;
}
/* Estilos para etiquetas h1 de la pagina de about me*/
.aboutMe h1{
    font-family: 'jost', sans-serif;
    font-size: 71px;
    margin-left: 40%;
}
/* Estilos para etiquetas p de la pagina de about me*/
.aboutMe p{
    font-family: 'jost', sans-serif;
    font-size: 20px;
    position: relative;
    width: 69%;
    bottom: 100%;
    left: 32%;
}
.text-about{
    width: 100%;
    height: 0px;
}
.aboutMe img{
    width: 300px;
    height: 100%;
    position: relative;
    bottom: -1%;
    border-radius: 20px;
    left: 1%;
    
}
/* Contenedor del titulo en la pagina principal */
.titulo{
    position: absolute;
    background-color: transparent !important; 
    transform: translate(30%, 95%);
    color: white;   
}
/* Estilos para el titulo */
.titulo h1 {
    font-family: 'jost', sans-serif;
    font-size: 47px;
    margin-bottom: 0px;
}
/* Estilo para parrafo debajo del titulo */
.titulo p{
    font-family: 'jost', sans-serif;
    font-size: 28px;
}
.contact-main{
    width: 80%;
    margin: auto;
}

/* Contenedor de datos de contacto */
.contacto{
    position: absolute;
    background-color: transparent !important; 
    top: 137%;
    color: white;
}
/* Estilos para etiquetas h1 de la pagina de contacto*/
.contacto h2{
    font-family: 'jost', sans-serif;
    font-size: 55px;
}
/* Estilos para etiquetas p de la pagina de contacto*/
.contacto p{
    font-family: 'jost', sans-serif;
    font-size: 25px;
}
/* Contenedor de informacion de celular */
.celular{
    position: absolute;
    background-color: transparent !important; 
    left: 5%;
    top: 40%;
    color: white;
}
/* Estilos para etiquetas p de la pagina de contacto*/
.celular p{
    font-family: 'jost', sans-serif;
    font-size: 25px;
}
/* Estilos para todas las etiquetas "VIDEO" */
.fondo {
    position: fixed;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -1000;
    transform: translateX(-50%) translateY(-50%);
    top: 50%;
}
/* Estilos del carousel */
.carousel{
    width: 100%;
    bottom:1%
}
/* Union de los slide */
.carousel-inner {
    position: relative;
    width: 100%;
    overflow: hidden;
    height: 100%;
}
/* Bordes de imagenes del slide */
.imagen-work{
    border-radius: 20px;
    height: 100%;
  }
  /* Estilo del container de imagenes que  van abajo del slide */
.container{
    text-align: center;
    align-content: center;
    font-family: 'jost',sans-serif;
    height: 100%;
}
/* Estilos para el titulo de coleccion de iamgenes */
.container h1{
    color: white;
    font-family: 'jost', sans-serif ;
    font-size: 47px;
    display: contents;
}
/* margen para imagenes de abajo del slide */
.colunm img{
    border-radius: 8px;
    margin-bottom: 20px;
    margin-top: 20px;
    margin-left: 0px;
    width: 90%;
    height: 100%;
}
.image-container a {
    display: inline-block;
    margin-right: 10px;
    text-decoration: none;
    width: 100%;
    height: 100%;
}  
.title-works{
    text-align: center;
    color: white;
    font-family: 'jost', sans-serif;
    position: relative;
    left: 533px;
    top: -51px;
}
.title-works h1{
    font-size: 80px;
}
.mosaico {
    width: 100%;
    height: 22%;
    top: 3%;
    position: relative;
}
.image-container {
    width: 100%;
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 3%;
}    
.proyect, .proyect2, .proyect3 {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden; /* Asegura que la imagen no se salga del contenedor */

}     
.proyect img, .proyect2 img, .proyect3 img {
    width: 100%;
    height: 100%;
    transition: opacity 0.3s ease, transform 0.3s ease;
}
        
.proyect:hover img, .proyect2:hover img, .proyect3:hover img {
    opacity: 0.7;
    transform: scale(1.1);
}
        
.lazy-image {
    opacity: 0;
    transform: scale(1.1); /* Agrandar la imagen un 10% inicialmente */
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.overlay2 {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: opacity 0.3s ease;
    background-color: rgba(255, 255, 255, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(255, 255, 255);
    font-size: 20px;
    text-align: center;
    padding: 10px;
    box-sizing: border-box;
    flex-direction: column;
    color:#3d403e;
}
.overlay2 p {
    font-family: 'Jost', sans-serif;;
    font-size: 16px;
}
.proyect:hover .overlay2, .proyect2:hover .overlay2, .proyect3:hover .overlay2 {
    opacity: 1;
}  
.proyect {
    width: 64%;
    height: 105%;
}  
.proyect2 {
    width: 100%;
    height: 51%;
    margin-bottom: 14px;
}
.proyect3 {
    width: 100%;
    height: 51%;
}
.column {
   
    width: 35%;

}
    .titulo2{
    background-color: transparent !important;
    color: white;
    left: 1%;
    position: relative;
    width: 24%;
    }
    .titulo2 h1{
        font-family: 'jost', sans-serif;
        font-size: 33px;
        margin-bottom: 0px;
        color: white;
    }
    .titulo2 h2{
        font-family: 'jost', sans-serif;
        font-size: 24px;
        margin-bottom: 0px;
        color: white;
    }
    .menu {
        transform: translate(0%, 126%);
    display: flex;
    flex-direction: row-reverse;
    }
    .menu ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
    }
    .menu ul li {
        margin-left: 20px;
    }
    .menu ul li a {
        color: #fff;
        text-decoration: none;
        font-family: 'jost', sans-serif;
    }
    a{
        text-decoration: none!important;
        
    }
    .menu a{
        display: contents;
    }
    .menu ul li a:hover {
        text-decoration: underline;
    }
    .carousel-item video {
        width: 100%;
        height: 100%; 
        object-fit: cover;
    }
    .container2 {
        width: 100%;
    }
    .row {
        display: flex;
        justify-content: space-between;
        margin: 15px 0;
        width: 100%;
        position: relative;
    }
    .row img {
        width: 106%;
        transition: opacity 0.3s ease;
    }
    .overlay {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-49%, -50%);
        color: rgb(255, 255, 255);
        font-size: 24px;
        text-align: center;
        opacity: 0;
        transition: opacity 0.9s ease;
        pointer-events: none;
        font-family: 'jost';
        background-color: rgba(255, 255, 255, 0.5);
        height: 100%;
        width: 100%;
        align-content: center;
        color:#292b2a;    
    }
    .project-container {
        position: relative;
        width: 33%;
    }
    .row:hover img {
        opacity: 0.4;
    }
    .row:hover .overlay {
        opacity: 1;
    }
    .categoria {
        font-family: 'jost';
        color: white;
        display: flex;
        flex-direction: row-reverse;
    }
    .overlay p{
        font-size: 15px;
        color:#292b2a;
    }

/* -------------------------------------------------------------------------------------------- */
    @media only screen and (max-width: 376px) {

    
    /* Contenedor de redes (IG Y IMDB) */
    .navegacionw .redes{
        margin-left:14px;
    }
    /* Estilos para imagenes de redes */
    .redes img{
        width: 46px;
        height: 28px;
    }
    /* Estilos para icono de instagram  */
    .redes .ig{
        width: 32px;
    }
    /* menu de navegacion */
    .navegacion{
        padding: 6px 11px 6px 11px;
        margin-bottom: 0%;
        margin-right: 0px;
        transform: translate(255px, 320px);
    }
    .titulo h1 {
        font-family: 'jost', sans-serif;
        font-size: 37px;
        margin-bottom: 12px;
    }
    .menu{
        transform: translate(-43%, 476%);
        width: 178%;
        font-size: 11px;
    }
    .titulo2 {
        transform: translate(27%, -28%);
        width: 246px;
        
    }
    .proyect2 {
        height: 55%;
    }
    .proyect3 {
        height: 52%;
    }
    .titulo2 h1 {
        font-size: 26px;
    }
    .titulo2 h2 {
        font-size: 18px;
    }
    .image-container {
        width: 98%;
        position: relative;
        top: 44px;
        height: 233px;
        margin-left: 61px;
        margin-right: 30px;
        right: 58px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        flex-wrap: nowrap;
        align-content: stretch;
        margin-bottom: 121%;
    }
    .proyect{
        width: 100%;
        margin-bottom: 5%;
    }
    .titulo p {
        font-size: 26px;
    }
    .column{
        margin-bottom: 11%;
        width: 100%;
        height: 141%;
        position: absolute;
        top: 100%;
    }
    .proyect2{
        width: 100%;
        height: 51%;
        margin-bottom: 14px;
    }
    .row{
        width: 123%;
    }
    .container2{
                transform: translate(-16%, 10%);
                width: 99%;
    }
    .categoria{
    transform: translate(-38%, 73px);
    width: 60%;
    }
    .row img{
        width: 124%;
    }
    /* Titulo de works */
    .works-title {    
        left: 2%;
    }
    .works-title2 {
        position: relative;
        left: 16%;
        bottom: 311px;
    }
    /* Bordes de imagenes del slide */
    .imagen-work{
        border-radius: 17px;
        height: 260px;
        top: 8px;
        left: 1px;
        padding-top: 39px;
        position: relative;
        font-size: 27px;
      }
      /* Union de los slide */
    .carousel-inner {
        height: 100%;
    }
    /* Estilo del container de imagenes que  van abajo del slide */
    .container {
        position: relative;
        top: 2%;
        height: 100%;
        right: 0%;
    }
    .carousel-item video {
        height: 311px;
    }
    /* Estilos del carousel */
    .carousel{
        left: 17px;
        width: 91%;
    }
    .title-works{
    text-align: center;
    color: white;
    font-family: 'jost', sans-serif;
    position: relative;
    left: 89px;
    top: -51px;
    }  
    .title-works h1 {
        font-size: 64px;
    }
    /* Estilo a botones de menu */
    .navegacion .inicio {
        padding: 6px 11px 6px 11px;
        font-size: 14px;
    }
    /* Menu de navegaciòn */
    .navegacionw{ 
        position: absolute;
        margin-right: 11px;
        top: 161%;
    }
    /* Estilo a botones de menu */
    .navegacionw .inicio {
        padding: 6px 11px 6px 11px;
        font-size: 13px;
    }
    /* Contenedor de datos de contacto */
    .aboutMe{
        top: 10%;
        width: 351px;
        position: relative;
        right: 25%;
    }
    .aboutMe img {
        width: 231px;
        height: 391px;
        bottom: 7%;
        border-radius: 20px;
        left: 30%;
    }
    /* Estilos para etiquetas h1 de la pagina de contacto*/
    .aboutMe h1{
        font-size: 54px;
        position: relative;
        left: 30%;
        width: 260px;
        margin-left: 0px;
    }
    /* Estilos para etiquetas p de la pagina de contacto*/
    .aboutMe p{
        font-size: 16px;
        position: relative;
        left: 47px;
        width: 353px;
        bottom: 3%;
    }
    /* Estilos para todas las etiquetas "VIDEO" */
    video {
        top: 50%;
    }
    h6{
        font-size: 13px;
    }
    .colunm {
        height: 100%;
    }
    /* margen para imagenes de abajo del slide */
    .colunm img{
        border-radius: 5px;
        width: 102%;
        margin-bottom: -16px;
        height: 100%;
    }
    .overlay{
        display: none;
    }
    /* Estilo para titulo de la clase work title */
    .works-title h1{
        margin-right: 3px;
        font-size: 33px;
    }
    
    /* Contenedor de datos de contacto */
    .contacto{
        top: 29%;
        right: 6%;
    }
    /* Estilos para etiquetas h1 de la pagina de contacto*/
    .contacto h2{
        font-size: 65px;
        position: relative;
        left: -1%;
        bottom: 0px;
        margin-bottom: 10px;   
    }
    /* Estilos para etiquetas p de la pagina de contacto*/
    .contacto p{
        font-size: 23px;
        position: relative;   
    }
    .fondo{
        height: 100%;
    }
}