/* responsive.css */

/* Estilos para pantallas pequeñas (móviles) */
@media (max-width: 767.98px) {
    .navbar-brand {
        display: flex;
        justify-content: center;
        width: 100%;
    }

    .navbar-nav {
        flex-direction: column;
        align-items: center;
    }

    .header .overlay h1 {
        font-size: 2rem;
    }

    .header .overlay h2 {
        font-size: 1.5rem;
    }

    .image-container img {
        width: 100%;
        height: auto;
    }

    .col-lg-6 {
        padding: 0 15px;
    }

    .col-sm-6, .col-md-4, .col-xs-12 {
        width: 100%;
        margin-bottom: 20px;
    }

    .gallary-item {
        width: 100%;
        margin-bottom: 20px;
    }

    iframe {
        width: 100%;
        height: 300px;
    }
}

/* Estilos para pantallas medianas (tablets) */
@media (min-width: 768px) and (max-width: 991.98px) {
    .navbar-brand {
        display: flex;
        justify-content: center;
        width: 100%;
    }

    .navbar-nav {
        flex-direction: row;
        justify-content: space-around;
    }

    .header .overlay h1 {
        font-size: 2.5rem;
    }

    .header .overlay h2 {
        font-size: 2rem;
    }

    .image-container img {
        width: 80%;
        height: auto;
    }

    .col-lg-6 {
        padding: 0 15px;
    }

    .col-sm-6, .col-md-4, .col-xs-12 {
        width: 50%;
        margin-bottom: 20px;
    }

    .gallary-item {
        width: 50%;
        margin-bottom: 20px;
    }

    iframe {
        width: 100%;
        height: 400px;
    }
}

/* Estilos para pantallas grandes (escritorios) */
@media (min-width: 992px) {
    .navbar-brand {
        display: block;
        width: auto;
    }

    .navbar-nav {
        flex-direction: row;
        justify-content: space-between;
    }

    .header .overlay h1 {
        font-size: 3rem;
    }

    .header .overlay h2 {
        font-size: 2.5rem;
    }

    .image-container img {
        width: 80%;
        height: auto;
    }

    .col-lg-6 {
        padding: 0 15px;
    }

    .col-sm-6, .col-md-4, .col-xs-12 {
        width: 33.33%;
        margin-bottom: 20px;
    }

    .gallary-item {
        width: 33.33%;
        margin-bottom: 20px;
    }

    iframe {
        width: 100%;
        height: 500px;
    }
}