/* Estilos generales */
body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    margin: 0;
    padding: 0;
}

.container {
    margin-top: 100px;
    /* Margen superior para no superponer con el navbar */
}

.carousel-inner img {
    width: 100%;
    height: 600px;
    /* Altura del carrusel en pantallas grandes */
    object-fit: contain;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-color: #2c130d !important;
    padding: 40px;
    border-radius: 50%;
    background-size: 60px 60px !important;
    transition: transform 0.3s ease-in-out;
}

.carousel-control-prev-icon:hover,
.carousel-control-next-icon:hover {
    transform: scale(1.2);
}

.carousel-control-prev-icon:active,
.carousel-control-next-icon:active {
    transform: scale(0.9);
}

/* Responsivo para tablets */
@media (max-width: 768px) {
    .carousel-inner img {
        height: 400px;
        /* Reduce la altura del carrusel para pantallas medianas */
    }

    #carouselExampleIndicators .carousel-control-prev-icon,
    #carouselExampleIndicators .carousel-control-next-icon {
        padding: 25px;
        /* Reduce ligeramente el tamaño del fondo */
        background-size: 40px 40px !important;
        /* Tamaño de la flecha */
    }
}

/* Responsivo para dispositivos pequeños */
@media (max-width: 428px) {
    .carousel-inner img {
        height: 300px;
        /* Ajusta la altura del carrusel para pantallas pequeñas */
    }

    #carouselExampleIndicators .carousel-control-prev-icon,
    #carouselExampleIndicators .carousel-control-next-icon {
        padding: 20px;
        /* Tamaño de fondo constante para visibilidad */
        background-size: 30px 30px !important;
        /* Mantiene un tamaño visible */
        transform: scale(0.9);
        /* Tamaño adecuado para pequeños dispositivos */
    }
}

@media (max-width: 406px) {
    .carousel-inner img {
        height: 250px;
        /* Ajusta la altura del carrusel para pantallas pequeñas */
    }

    #carouselExampleIndicators .carousel-control-prev-icon,
    #carouselExampleIndicators .carousel-control-next-icon {
        padding: 20px;
        background-size: 30px 30px !important;
        /* Mantiene la visibilidad */
    }
}

@media (max-width: 375px) {

    #carouselExampleIndicators .carousel-control-prev-icon,
    #carouselExampleIndicators .carousel-control-next-icon {
        padding: 20px;
        background-size: 30px 30px !important;
    }
}

/* Responsivo para dispositivos extra pequeños */
@media (max-width: 360px) {
    .carousel-inner img {
        height: 200px;
        /* Reduce aún más la altura del carrusel */
    }

    #carouselExampleIndicators .carousel-control-prev-icon,
    #carouselExampleIndicators .carousel-control-next-icon {
        padding: 20px;
        background-size: 30px 30px !important;
        /* Mantiene la visibilidad */
    }
}