/* Estilo para el fondo del header */
.header-bg {
    background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
        url('../imgs/herobackground.jpg') no-repeat center center;
    background-size: cover;
    color: white;
}

/* Sombra para el texto en el header */
.text-shadow {
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
}

.dropdown-item.active, .dropdown-item:active {
    background-color: #8d02ff; /* Color morado */
    color: #fff; /* Color de texto blanco para contraste */
}

/* Estilos personalizados para sobreponer los colores de Bootstrap */

/* Color de fondo personalizado */
.custom-bg-primary {
    background-color: #8d02ff !important;
}

/* Color de borde personalizado */
.custom-border-primary {
    border-color: #8d02ff !important;
}

/* Estilos para botones personalizados */
.custom-btn-primary {
    background-color: #8d02ff;
    border-color: #8d02ff;
}

.custom-btn-primary:hover {
    background-color: #6f01cc;
    border-color: #6f01cc;
}

/* Estilo para enlaces personalizados */
.custom-link {
    color: #8d02ff;
}

.custom-link:hover {
    color: #6f01cc;
}

/* Estilos para la paginación */
.pagination .page-link.custom-bg-primary {
    background-color: #8d02ff;
    border-color: #8d02ff;
    color: white;
}

.pagination .page-link.custom-link {
    color: #8d02ff;
}

.pagination .page-link.custom-link:hover {
    color: #6f01cc;
}

/* Estilo para el modal header */
.modal-header.custom-bg-primary {
    background-color: #8d02ff;
}