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 */
}