.carousel {
    height: 60vh; /* 60% de la altura de la ventana */
    width: 100%;
    position: relative;
    overflow: hidden;
}
.carousel-item {
     height: 100%; 
     width: 100%;
}
.carousel-caption {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@media (max-width: 768px) {
    .carousel, .carousel-item { height: 250px; }
    .carousel-caption h1 { font-size: 1.5rem; }
    .carousel-caption p { font-size: 0.9rem; }
}

.carousel-item img {
    width: 100%;
    height: 100%; /* Ajusta la altura según tu diseño */
    object-fit: cover; /* 'cover' llena el espacio recortando si es necesario */
}