/* Estilos para las tarjetas */
.card {
    width: 100%; /* Hace que la tarjeta ocupe el ancho completo del contenedor */
    max-width: 400px; /* Ancho máximo de la tarjeta */
    margin: 0 auto; /* Centra la tarjeta horizontalmente */
    z-index: -1;
}

/* Ajusta el margen derecho e izquierdo para las columnas */
.card-container {
    padding-left: 15px; /* Ajusta el espaciado en el contenedor */
    padding-right: 15px; /* Ajusta el espaciado en el contenedor */
}

.card-container .col-md-4 {
    margin-bottom: 40px; /* Espacio entre las tarjetas */
}

/* Si hay un contenedor externo que afecta el espaciado */
.container {
    padding-left: 15px; /* Ajusta el espaciado en el contenedor principal */
    padding-right: 15px; /* Ajusta el espaciado en el contenedor principal */
}
#Titulo {
    position: relative;
    text-align: center;
    margin-top: 0px; /* Ajusta el margen superior según sea necesario */
    margin-bottom: 20px; /* Ajusta el margen inferior según sea necesario */
    color: rgb(136, 135, 113); /* Color del texto */
    font-family: "Dancing Script", sans-serif; /* Familia de fuente */
    font-size: 3rem; /* Tamaño de la fuente */
    text-shadow: 2px 2px 3px rgba(7, 7, 7, 0.4); /* Sombra de texto */
    z-index: 2
}

#Titulo h2 {
    margin: 0; /* Elimina el margen predeterminado del encabezado */
    padding: 0; /* Elimina el relleno predeterminado del encabezado */
    z-index: 2
}

/* Asegúrate de que el contenedor del carrusel tenga una posición relativa */
.carousel-inner {
    position: relative;
}

/* Estilo para el texto de la descripción */
.carousel-caption {
    position: absolute;
    bottom: 0; /* Ajusta para que esté en la parte inferior de la imagen */
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.5); /* Fondo semitransparente para mejorar la legibilidad del texto */
    color: #fff; /* Color del texto */
    text-align: center; /* Centra el texto */
    padding: 10px; /* Espaciado alrededor del texto */
    margin: 0; /* Elimina el margen */
}


/* Media queries */
@media only screen and (max-width: 850px) {
    .carousel {
        height: 750px; /* Ajusta la altura del carrusel en pantallas más pequeñas */
    }
}

@media only screen and (max-width: 600px) {
    .carousel {
        height: 750px; /* Ajusta la altura del carrusel en pantallas aún más pequeñas */
    }
    
}

@media only screen and (max-width: 450px) {
    

    .carousel {
        height: 750px; /* Ajusta la altura del carrusel para pantallas muy pequeñas */
    }
    
}