@font-face {
    font-family: 'Borna-medium';
    src: url(./fonts/Borna/borna-medium-webfont.woff2) format('woff2'), /* Modern Browsers */
        url(./fonts/Borna/borna-medium-webfont.woff) format('woff'); /* Older Browsers */
    /* Optionally, you can specify font-weight and font-style */
    font-weight: 500;
    font-style: medium;
}  

@font-face {
font-family: 'Borna-regular';
src: url(./fonts/Borna/borna-medium-webfont.woff2) format('woff2'), /* Modern Browsers */
        url(./fonts/Borna/borna-medium-webfont.woff) format('woff'); /* Older Browsers */
/* Optionally, you can specify font-weight and font-style */
font-weight: 500;
font-style: medium;
}

@font-face {
font-family: 'Sentient-italic';
src: url(./fonts/Sentient/Sentient-Italic.woff2) format('woff2'), /* Modern Browsers */
        url(./fonts/Sentient/Sentient-Italic.woff) format('woff'); /* Older Browsers */
/* Optionally, you can specify font-weight and font-style */
font-weight: 400;
font-style: italic;
}

@font-face {
    font-family: 'Sentient';
    src: url(./fonts/Sentient/Sentient-Regular.woff2) format('woff2'), /* Modern Browsers */
            url(./fonts/Sentient/Sentient-Regular.woff) format('woff'); /* Older Browsers */
    /* Optionally, you can specify font-weight and font-style */
    font-weight: 400;
    font-style: regular;
    }



/* NAVBAR */

.navbar{
    padding-left: 20px;
    padding-right: 20px;
    display: flex;
    justify-content: space-between;
    width: 100vw;
    background-color: #F9F9F9;
    padding-top: 0px;
    padding-bottom: 0px;
    position: fixed;
    top: 0;
    z-index: 1000;
    
}

.barraMenu{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100vw;
    align-items: center;
}

.itemsNav{
    font-family: 'Borna-medium', sans-serif;
    display: flex;
    flex-direction: row;
    gap: 40px;
    font-size: 12px;
  }

.nav-link:hover{
    color: #172BE0;
}

/* FOOTER */

.footer{
    padding-left: 20px;
    padding-right: 20px;
    display: flex;
    justify-content: space-between;
    width: 100vw;
    background-color: #F9F9F9;
    padding-top: 5px;
    padding-bottom: 5px;
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 1000;

}

.barraFooter{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100vw;
    align-items: center;
}

.itemsFooter, .DesktopLink, .emailMe {
    font-family: 'Borna-medium', sans-serif;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
    font-size: 11px;
    text-decoration: none;
    color: #1E1E1E;
}

.emailMe:hover{
    color: #FE5B00;
}

.DesktopLink:hover{
    color: #FE5B00;
}

.contenido{
    margin-top: 0px;
}

.filtroSection{
    padding-top: 20px;
    padding-left: 20px;
    display: flex;
    align-items: center;
    gap:25px;
    padding-bottom: 10px;
}

.filterText{
    font-family: 'Borna-medium',sans-serif;
    color: #8085FD;
    font-size: 10px;
    margin: 0px;
}

.filtroReset{
    opacity: 30%;
    color: #172BE0;
    font-size: 10px;
}

.filtros{
    display: flex;
    gap: 25px; 
    font-family: 'Borna-medium',sans-serif;  

}

.botonFiltro{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 5px;
    font-family: 'Borna-medium';
    border: none;
    background: none;
    margin: 0px;
    padding-left: 0px;
    font-size: 11px;
}

/* GRID */

.image-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 20px;
    margin-bottom: 40px;
    padding-top: 0px;
}

.imagenProyecto {
    overflow: hidden;
    height: 60vh;
    cursor: pointer;
}

.imagenProyecto img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Asegura que la imagen cubra todo el contenedor */
    display: block;
    transition: transform 0.4s ease-in-out;
    transform: scale(1);

}

.imagenProyecto {
    transition: border-radius 0.2s ease-in; /* Define la transición en el estado base */
  }
  
  .imagenProyecto img {
    transition: transform 0.2s ease-in; /* Define la transición en el estado base */
  }
  
  .imagenProyecto img:hover {
    transform: scale(1.02); /* Aumenta ligeramente el tamaño */
  }
  
  .imagenProyecto:hover {
    /* Aumenta ligeramente el tamaño */
    border-radius: 10px; /* Aplica el radio de borde */
    /* filter: blur(2px); */ /* Puedes descomentar si deseas aplicar un desenfoque */
  }


.half-width {
    grid-column: span 1;
}

.full-width {
    grid-column: span 2;
}


.filtroSection .filterToggle {
    font-family: 'Borna-medium', sans-serif;
    color: #8085FD;
    font-size: 10px;
    background: none;
    border: none;
    cursor: pointer;
}

.filtroSection {
    margin-top: 40px;
    padding-top: 20px;
    padding-left: 20px;
    display: flex;
    align-items: center;
    gap: 25px;
    padding-bottom: 10px;
    justify-content: start; /* Center the section */
}

.filterText {
    font-family: 'Borna-medium', sans-serif;
    color: #8085FD;
    font-size: 10px;
    margin: 0px;
}

.filtroReset {
    opacity: 30%;
    color: #172BE0;
    font-size: 10px;
}

.filtros {
    display: flex;
    gap: 25px;
}

.botonFiltro {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 5px;
    font-family: 'Borna-medium';
    border: none;
    background: none;
    margin: 0px;
    padding-left: 0px;
}

.d-none {
    display: none;
}





@media (min-width: 10px) and (max-width: 375px){
    /* NAV */
    .itemsNav {
     display: none;
     flex-direction: column;
     position: absolute;
     top: 40px;
     right: 0;
     background-color: #F9F9F9; /* Optional: background color */
     width: 100%;
     text-align: center;
     gap: 20px;
     padding: 10px 0;
 }
 
 .menu-toggle {
     display: block;
     background: none;
     border: none;
     font-size: 24px;
     cursor: pointer;
 }
 
 .barraMenu {
     width: 100%;
     justify-content: space-between;
 }
 
 
 .contenidoTodo{
   display: flex;
   flex-direction: column;
   padding: 130px 10px 70px 10px;
 }
 
 .columnaImagenes{
   padding-left: 0%;
   overflow-y: auto; 
   columns: 12;
   
 }
 
 .half-width, .full-width, .third-width {
   grid-column: span 6;
 }
 
 .imagenProyecto {
 overflow: hidden;
 height: 300px;
 border-radius: 5px;
 
 }
 
 .image-grid {
 display: grid;
 grid-template-columns: repeat(6, 1fr);
 gap: 10px;
 padding: 50px 10px 10px;
 
 flex-grow: 1; /* Allow this column to grow to fill the remaining space */
 overflow-y: auto; /* Enable vertical scrolling */
 /* Optionally, you can add styling such as background color */
 }
 
 .emailMe{
 display: none;
 }
 
 .navbar{
 padding-left: 0px;
 padding-right: 10px;
 }
 
 .itemsNav{
 font-size: 12px;
 }
 
 .EstrellaGraciaLogo{
 scale: 1;
 padding-left: 20px;
 }
 
 .footer{
 padding-left: 20px;
 padding-right: 20px;
 }
 
 .DesktopLink{
 font-size: 12px;
 }
 

 .filtroSection {
    padding-left: 20px;
    margin-top: 50px;
    display: flex;
    flex-direction: column;
    align-items: center; /* Center align items */
    gap: 10px;
    padding-bottom: 5px;
}

.filtroSection .filterToggle {
    font-family: 'Borna-medium', sans-serif;
    color: #8085FD;
    font-size: 10px;
    background: none;
    border: none;
    cursor: pointer;
}

.filtros {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 10px;
    align-items: center; /* Center align filters */
}

.image-grid {
    padding-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
}
 
 
 
 }
 
 
 
 @media (min-width: 376px) and (max-width: 576px){
  /* Estilos para dispositivos móviles pequeños */
   
     /* NAV */
     .itemsNav {
       display: none;
       flex-direction: column;
       position: absolute;
       top: 40px;
       right: 0;
       background-color: #F9F9F9; /* Optional: background color */
       width: 100%;
       text-align: center;
       gap: 20px;
       padding: 10px 0;
   }
 
   .menu-toggle {
       display: block;
       background: none;
       border: none;
       font-size: 24px;
       cursor: pointer;
   }
 
   .barraMenu {
       width: 100%;
       justify-content: space-between;
   }
 
 
   .contenidoTodo{
     display: flex;
     flex-direction: column;
     padding: 130px 20px 70px 20px;
   }
 
   .columnaImagenes{
     padding-left: 0%;
     overflow-y: auto; 
     columns: 12;
     
   }
 
   .half-width, .full-width, .third-width {
     grid-column: span 6;
 }
 
 .imagenProyecto {
   overflow: hidden;
   height: 300px;
   border-radius: 5px;
  
 }
 
 .image-grid {
   display: grid;
   grid-template-columns: repeat(6, 1fr);
   gap: 10px;
   margin-bottom: 25px;
   padding-top: 50px;
   flex-grow: 1; /* Allow this column to grow to fill the remaining space */
   overflow-y: auto; /* Enable vertical scrolling */
   /* Optionally, you can add styling such as background color */
 }
 
 .emailMe{
   display: none;
 }
 
 .navbar{
   padding-left: 0px;
   padding-right: 5px;
 }
 
 .itemsNav{
   font-size: 12px;
 }
 
 .EstrellaGraciaLogo{
   scale: 1;
   padding-left: 20px;
 }
 
 .footer{
   padding-left: 20px;
   padding-right: 20px;
 }
 
 .DesktopLink{
   font-size: 12px;
 }
 
 
 /* work */

 .filtroSection {
    padding-left: 20px;
    margin-top: 50px;
    display: flex;
    flex-direction: column;
    align-items: center; /* Center align items */
    gap: 10px;
    padding-bottom: 20px;
}

.filtroSection .filterToggle {
    font-family: 'Borna-medium', sans-serif;
    color: #8085FD;
    font-size: 10px;
    background: none;
    border: none;
    cursor: pointer;
}

.filtros {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 10px;
    align-items: center; /* Center align filters */
}

.image-grid {
    padding-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
}
 
 
 
 
 
 }




@media (min-width: 577px) and (max-width: 768px){
    .image-grid {
        grid-template-columns: 1fr 1fr;
    }

    .full-width {
        grid-column: span 2;
    }

    .half-width {
        grid-column: span 1;
    }

    .menu-toggle {
        display: none;
      }

      /* Estilos para dispositivos móviles pequeños */
  
    /* NAV */
    .itemsNav {
      display: none;
      flex-direction: column;
      position: absolute;
      top: 20px;
      right: 0;
      background-color: #F9F9F9; /* Optional: background color */
      width: 100%;
      text-align: center;
      gap: 20px;
      padding: 10px 0;
  }

  .menu-toggle {
      display: block;
      background: none;
      border: none;
      font-size: 24px;
      cursor: pointer;
  }

  .barraMenu {
      width: 100%;
      justify-content: space-between;
  }


  .contenidoTodo{
    display: flex;
    flex-direction: column;
    /* padding: 130px 20px 70px 20px; */
  }

  .columnaImagenes{
    padding-left: 0%;
    overflow-y: auto; 
    columns: 12;
    
  }

  .half-width{
    grid-column: span 3;
  }

  .full-width, .third-width {
    grid-column: span 6;
}

.imagenProyecto {
  overflow: hidden;
  height: 300px;
  border-radius: 5px;
 
}

.image-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  padding: 0px 10px 10px 10px;
  flex-grow: 1; /* Allow this column to grow to fill the remaining space */
  overflow-y: auto; /* Enable vertical scrolling */
  /* Optionally, you can add styling such as background color */
}

.emailMe{
  display: none;
}

.navbar{
  padding-left: 0px;
  padding-right: 5px;
}

.itemsNav{
  font-size: 12px;
  top: 40px;
}

.EstrellaGraciaLogo{
  scale: 1;
  padding-left: 20px;
}

.footer{
  padding-left: 20px;
  padding-right: 20px;
}

.DesktopLink{
  font-size: 12px;
}

.emailMe{
  display: none;
}

.navbar{
  padding-left: 0px;
  padding-right: 5px;
}

.itemsNav{
  font-size: 12px;
}

.EstrellaGraciaLogo{
  scale: 1;
  padding-left: 20px;
}

.footer{
  padding-left: 20px;
  padding-right: 20px;
}

.DesktopLink{
  font-size: 12px;
}


    

}

@media (min-width: 769px) and (max-width: 1200px) { 
    /* Estilos para tabletas */
    
  
    .contenidoTodo{
      display: flex;
      flex-direction: column;
      padding: 130px 20px 70px 50px;
    }
  
    .columnaImagenes{
      padding-left: 0%;
      overflow-y: auto; 
      columns: 12;
      
    }
  
    /* .half-width, .full-width, .third-width {
      grid-column: span 6;
  } */
  
  .imagenProyecto {
    overflow: hidden;
    height: 70vh;
   
  }
  

  
  .menu-toggle {
    display: none;
  }



 /* Estilos para tabletas */
  
 .contenidoTodo{
  display: flex;
  flex-direction: column;
  padding: 130px 20px 70px 50px;
}

.columnaImagenes{
  padding-left: 0%;
  overflow-y: auto; 
  columns: 12;
  
}




.image-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 15px;
margin-bottom: 10px;
padding-top: 50px;
flex-grow: 1; /* Allow this column to grow to fill the remaining space */
overflow-y: auto; /* Enable vertical scrolling */
/* Optionally, you can add styling such as background color */
}

.menu-toggle {
display: none;
}

/* .image-grid {
grid-template-columns: 6fr 1fr;
} */

.full-width {
grid-column: span 6;
}

.half-width {
grid-column: span 3;
}



.image-grid{
padding-left: 10px;
padding-right: 10px;
gap: 10px;
margin-bottom: 25px;
padding-top: 0px;
}


.imagenProyecto{
height: 33vh;
overflow: hidden;

}







  }

  @media (min-width: 1201px) and (max-width: 1920px){
    .image-grid {
      grid-template-columns: 1fr 1fr;
  }

  .full-width {
      grid-column: span 2;
  }

  .half-width {
      grid-column: span 1;
  }



  .menu-toggle {
    display: none;

    }
}