/* Dispositivos pequeños (teléfonos, generalmente hasta 600px de ancho) */
@media (max-width: 800px) {
    .first {
        margin-top: -15%;
    }
    .navbar-collapse {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #9c55f8;
        z-index: 1000;
        /* Sombra opcional para mejor visibilidad */
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }

    .box-sl {
        margin: 10%;
    }

    .carousel-item h2 {
        font-size: 2rem;
    }
    .big {
        font-size: 6vw;
    }
    .second {
        margin-top: -1rem;
    }
    footer {
        font-size: .8rem;
    }
    #myVideo {
        display: none;
    }
    .first {
        background-image: url('../images/slide-video.png');  
        background-repeat: no-repeat;
        background-size: cover;
        z-index: 0;
        margin-top: -15%;
        padding-bottom: 10%;
    }

    .img-modal-dialog {
        max-width: 100%;
    }
}

/* Dispositivos medianos (tabletas, entre 601px y 1024px) */
@media (min-width: 601px) and (max-width: 1023px) {
    .navbar-collapse {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #9c55f8;
        z-index: 1000;
        /* Sombra opcional para mejor visibilidad */
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }
}

/* Dispositivos grandes (laptops o pantallas grandes, desde 1025px en adelante) */
@media (min-width: 900px) and (max-width: 1109px) {
    .second {
        margin-top: -23%;
        padding: 23% 0rem;
    }
}

/* Dispositivos grandes (laptops o pantallas grandes, desde 1025px en adelante) */
@media (min-width: 1110px) and (max-width: 1199px) {
    .second {
        margin-top: -12%;
    }
}

/* Dispositivos grandes (laptops o pantallas grandes, desde 1025px en adelante) */
@media (min-width: 1200px) and (max-width: 1399px) {
    .second {
        margin-top: -7%;
    }
}