.dropdown-menu .nav-link:hover {
    background-color: #343a40 !important;
  }
  .perfiles_sociales{
    width: inherit; /* Ajusta la altura para pantallas más pequeñas */
    
  }

  @media(max-width: 550px) {
    .perfiles_sociales{
      width: 80%; /* Ajusta la altura para pantallas más pequeñas */
    }
  }
  .modal {
    display: none; 
    position: fixed; 
    z-index: 1000; 
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; 
    background-color: rgba(0, 0, 0, 0.5); 
  }

.modal-content {
  background-color: #fff;
  margin: 10% auto; 
  padding: 20px;
  border: 1px solid #888;
  width: 80%; 
}

.close-button {
  color: #aaa;
  float:right;
  font-size: 28px;
  font-weight: bold;
  display:flex;
  justify-content: flex-end;
}

.close-button:hover,
.close-button:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
  
}

.night {
  color: #aaa;
  float:right;
  font-size: 28px;
  font-weight: bold;
  display:flex;
  justify-content: flex-end;
}
.night:hover,
.night:focus {
  color: white;
  text-decoration: none;
  cursor: pointer;
  
}

#proyectoDetalle #imagen{
    max-width: 100%;
    height: 100%;
  }

div .iconos {
  display: flex;
  justify-content: center;
  align-items: center;
}

body {
  background-color: white;
  color: black;
}

body.dark-mode {
  background-color: black;
  color: white;
}

.iconos img {
  filter: invert(0%); /* Color inicial del SVG */
}

body.dark-mode .iconos img {
  filter: invert(100%); /* Color del SVG en modo oscuro */
}



@media(max-width:1600px){
  #proyectoDetalle div{
    display: flex;
    flex-direction: column;
    
    
  }
  #proyectoDetalle div .iconos{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    
  }
  #proyectoDetalle #imagen{
    max-width: 80%;
    height: auto;
  }
  #proyectoDetalle div .botones{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    
    
  }
  
}
@media(max-width:992px){
  #proyectoDetalle #imagen{
    max-width: 100%;
    height: auto;
  }
}
.card{
  cursor: pointer;
}

/* Ajustar el tamaño de todas las imágenes con la clase "card-img-top" */
.card-img-top {
  width: 100%;
  height: 20rem; /* Ajusta la altura según sea necesario */
  object-fit: cover; /* Asegura que la imagen se ajuste al contenedor sin deformarse */
}

.foto{
  border-radius: 50%;
  height:15rem;
  width: 15rem;
  border: solid 3px #000
}

@media(max-width:768px){
  .foto{
    display: none;
  
  }
  
}