@media screen and (max-width: 767px) {

    header {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .logo {
        order: 1; /* Cambia el orden del logo */
    }

    .navbar {
        order: 2; /* Cambia el orden del navbar */
        margin-left: -30px; /* Ajusta el margen izquierdo según sea necesario */
    }

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

    .card {
        flex: 1 1 calc(50% - 20px); /* Las tarjetas ocuparán el 50% del ancho de su contenedor */
        max-width: calc(50% - 20px);
    }

}

/* Estilos para tablets */
@media screen and (min-width: 768px) and (max-width: 1023px) {
    /* Agrega aquí tus estilos específicos para tablets */
    .navbar {
        display: flex;
        justify-content: center;
        margin-top: 20px;
    }

    .navbar li {
        margin-right: 20px;
    }

    .subnav {
        display: none;
    }

    .card {
        width: calc(50% - 20px); /* Dos tarjetas por fila */
    }
}