#gallery {
    overflow-x: hidden;
}

.modal_custom {
    background-color: rgba(100, 100, 100, 0.7);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);

}

.modal-dialog {
    max-width: none !important;
    /* Elimina la restricción */
    max-height: none;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}


.modal-content {

    background-color: rgba(50, 50, 50, 0.7);
    width: 100%;
}


.modal_buttons {
    display: flex;
    width: 100%;
    justify-content: space-around;
    margin-top: 20px;
    /* Espaciado superior */
}

.modal_buttons button {
    padding: 16px 30px;
    /* Tamaño más grande para los botones */
    border-radius: 50px;
    /* Bordes redondeados para hacerlo circular */
    background-color: #ff4444;
    /* Color de fondo atractivo */
    color: white;
    /* Color del texto */
    border: none;
    /* Elimina el borde */
    font-size: 18px;
    /* Tamaño de la fuente más grande */
    cursor: pointer;
    /* Cambia el cursor al pasar sobre el botón */
    transition: all 0.3s ease;
    /* Agrega transición suave */
}

/* Efectos cuando el usuario pasa el ratón sobre el botón */
.modal_buttons button:hover {
    background-color: #45a049;
    /* Color más oscuro en hover */
    transform: scale(1.1);
    /* Agranda ligeramente el botón */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
    /* Sombra sutil */
}

/* Efectos cuando el botón es presionado */
.modal_buttons button:active {
    transform: scale(0.98);
    /* Efecto de "presionado" */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    /* Sombra más ligera */
}


.image-modal {
    width: 100%;
    height: 90%;
    max-height: 450px;
    object-fit: contain;
}

#gallery h1.animate {
    animation: moveFromRight 0.8s ease-out;
}



#row-images div {
    border: 5px solid #CC0000;
    color: white;
    /* color del borde */
    border-radius: 12px;
    /* esquinas redondeadas */
    padding: 4px;
    /* espacio entre borde e imagen */
    background: white;
    /* fondo detrás de la imagen */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    /* sombra suave */
}

#row-images img {
    object-fit: cover
}


.card-img-top {
    width: 100%
}






@media (max-width: 576px) {
    .gallery-div img {
        height: 175px
    }

    #gallery-list-logo {
        max-height: 200px
    }

}

@media (min-width: 768px) {

    #gallery-list-logo {
        max-height: 500px
    }

    .modal-dialog-gallery {
        width: 60%
    }
}