.container {
    margin: 20px auto; /* Espaciado superior e inferior */
    padding: 0 40px; /* Espaciado interno a los lados */
    max-width: 1200px; /* Limita el ancho máximo del contenedor */
    box-sizing: border-box; /* Asegura que el padding no afecte el tamaño total */
}

.banner1-1 {
    flex: 1;
    max-width: 50%; /* Incrementa el tamaño máximo de la imagen */
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.derecha {
    flex: 2;
    padding-left: 40px; /* Mueve el texto más hacia la derecha */
}

.content-wrapper {
    display: flex;
    align-items: center;
    gap: 30px; /* Incrementa el espacio entre la imagen y el texto */
}

.video-tutorial {
    text-align: center;
    margin: 40px auto;
}

.video-tutorial h3 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 20px;
    color: #333;
}

.video-tutorial video {
    max-width: 80%;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

@media (max-width: 768px) {
    .subContainer {
        flex-direction: column; /* Cambia la dirección de los elementos a columna */
        text-align: center; /* Centra el texto */
    }

    .content-wrapper {
        flex-direction: column; /* Cambia la dirección de los elementos a columna */
        gap: 10px; /* Reduce el espacio entre los elementos */
    }

    .izquierda {
        order: 2; /* Mueve la imagen abajo */
        max-width: 100%; /* Ajusta el tamaño de la imagen */
    }

    .derecha {
        order: 1; /* Mueve el texto arriba */
        padding-left: 0; /* Elimina el padding izquierdo */
    }

    .titulo {
        font-size: 20px; /* Ajusta el tamaño del título */
    }

    .subtext {
        font-size: 14px; /* Ajusta el tamaño del texto */
    }
}