body {
  font-family: "Roboto";
  color: #5d5c5c;
}

.fondo-navbar {
  background-color: #dce6ff;
}
.fondo-primary {
  background-color: #0f2562 !important;
}
.color-primary {
  color: #0f2562 !important;
}
.fondo-secondary {
  background-color: #becbf0 !important;
}
.color-secondary {
  color: #565c70 !important;
  font-size: small;
}
.navbar-space {
  margin-top: 70px;
  margin-left: 1%;
  margin-right: 1%;
}
.boton {
  color: #ffffff;
  background-color: #c42b66;
  text-transform: uppercase;
  font-size: small;
}
.boton:hover {
  color: #ffffff;
  background-color: #ea4c89;
  text-transform: uppercase;
}
.boton-secondary {
  color: #ffffff;
  background-color: #611262;
  text-transform: uppercase;
  font-size: small;
}
.boton-secondary:hover {
  color: #ffffff;
  background-color: #6b436b;
  text-transform: uppercase;
}


.thumbnail-container {
  position: relative;
  display: inline-block;
}

.thumbnail {
  width: 30px; /* Tamaño de la miniatura */
  cursor: pointer;
}

.enlarged-image-container {
  display: none; /* Oculta la imagen grande por defecto */
  position: absolute;
  top: 0;
  left: 110%; /* Coloca la imagen grande a la derecha de la miniatura */
  z-index: 10; /* Asegura que la imagen grande esté por encima de otros elementos */
}

.enlarged-image-container img {
  width: 300px; /* Tamaño de la imagen grande */
  border: 1px solid #ccc; /* Opcional: agrega un borde a la imagen grande */
}

.thumbnail-container:hover .enlarged-image-container {
  display: block; /* Muestra la imagen grande cuando se pasa el cursor sobre la miniatura */
}