@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

#video {
    height: 50px;
}

/* Asegura que los elementos no se desborden y se ajusten de manera flexible */
* {
    box-sizing: border-box;
}

/* Contenedor principal */
.container {
    padding: 1rem;
    /* Ajusta según lo necesites */
    width: 100%;
    /* El contenedor ocupará todo el ancho disponible */
    max-width: 1200px;
    /* Establece un ancho máximo para evitar que se extienda demasiado en pantallas grandes */
    margin: 0 auto;
    /* Centra el contenedor */
}

/* Flex container */
.flex-container {
    display: flex;
    flex-direction: column;
    /* En pantallas pequeñas los elementos estarán en columna */
    flex-wrap: wrap;
    /* Permite que los elementos se envuelvan si es necesario */
    justify-content: center;
    align-items: center;
    gap: 2rem;
    /* Espaciado entre los elementos */
}

/* Cuando el ancho de la pantalla es mayor a 768px (pantallas medianas en adelante) */
@media (min-width: 768px) {
    .flex-container {
        flex-direction: row;
        /* En pantallas más grandes, los elementos estarán en fila */
        justify-content: space-between;
        /* Espaciado entre columnas */
    }
}

/* Estilo para las columnas */
.column {
    width: 100%;
    /* En pantallas pequeñas, las columnas ocuparán todo el ancho */
    padding-left: 1rem;
    /* Espaciado izquierdo */
    padding-right: 1rem;
    /* Espaciado derecho */
}

@media (min-width: 768px) {
    .column {
        width: 48%;
        /* En pantallas medianas, las columnas ocuparán el 48% del ancho */
    }
}

.img-column {
    display: flex;
    justify-content: center;
    align-items: center;
}

img {
    max-width: 100%;
    /* Asegura que las imágenes no se desborden */
    height: auto;
    border-radius: 8px;
    /* Si deseas bordes redondeados */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    /* Sombra para las imágenes */
}