.img-custom {
width: 100%; /* Ajusta el ancho según tus necesidades */
    height: auto; /* Mantiene la proporción de la imagen */
    max-width: 400px; /* Establece un ancho máximo */
    object-fit: contain; /* Asegura que la imagen se ajuste sin recortarse */
}


.card-img-top {
    height: auto !important;
    max-height: 320px !important; /* Ajusta este valor según sea necesario */
    object-fit: cover !important;
}


.carousel-item img {
    border: 5px solid #0b0ff0; /* Cambia el color y grosor según tu preferencia */
    border-radius: 10px; /* Opcional: agrega bordes redondeados */
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-color: #000; /* Cambia el color de fondo de las flechas */
    border-radius: 50%; /* Opcional: bordes redondeados */
}

.carousel-control-prev,
.carousel-control-next {
    filter: invert(1); /* Esto invierte los colores de las flechas, úsalos si el fondo es oscuro */
}