/* Large Screens (≥ 1400px) */
@media (min-width: 1400px) {

    .container {
        max-width: 1320px;
    }

    body {
        font-size: 17px;
    }

    .content {
        gap: 30px;
    }
}


/* Tablet (577px – 991px) */
@media (max-width: 991px) {

    /* Navbar */
    nav {
        width: 100%;
    }

    nav > div {
        height: 55px;
    }

    /* Content */
    .content {
        flex-direction: column;
        gap: 30px;
    }

    .directions,
    .login_number {
        width: 100%;
        margin-right: 0;
        height: auto;
    }

    .box {
        width: 80%;
    }

    /* Footer */
    footer {
        margin-top: 60px;
    }
}

/* Mobile (≤ 576px) */
@media (max-width: 576px) {

    body {
        font-size: 15px;
    }

    .container {
        width: 100%;
        padding-bottom: 20px;
    }

    /* Navbar */
    nav {
        flex-direction: column;
        gap: 10px;
        margin-top: 20px;
    }

    nav > div {
        width: 100%;
        margin-left: 0;
        height: 55px;
        border-radius: 10px;
    }

    .logo,
    .model {
        border-radius: 10px;
    }

    /* Content */
    .content {
        flex-direction: column;
        gap: 25px;
        margin-top: 30px;
    }

    .directions,
    .login_number {
        width: 100%;
        margin-right: 0;
        height: auto;
    }

    .box {
        width: 100%;
    }

    .input-note {
        font-size: 14px;
    }

    .span-dis {
        display: none;
    }


    /* Footer */
    footer {
        margin-top: 40px;
    }

    .box_all {
        flex-direction: column;
        text-align: center;
    }

    .pages,
    .copyright {
        margin: 5px 0;
    }

    .hr {
        display: none;
    }
}