@media (max-width: 768px){
    body{
        padding: 20px;
    }

    .card,
    .box,
    .login-card{
        width: 100%;
        max-width: 100%;
        padding: 28px 24px;
        border-radius: 14px;
    }

    h1{ font-size: 22px; }
    h2{ font-size: 20px; }
    h3{ font-size: 18px; }

    label{ font-size: 13px; }

    input,
    select,
    textarea{
        font-size: 14px;
        padding: 11px;
    }

    button,
    .btn{
        font-size: 15px;
        padding: 12px;
    }

    .logo img{
        width: 110px;
    }
}

@media (max-width: 480px){
    body{
        padding: 15px;
    }

    .card,
    .box,
    .login-card{
        padding: 24px 20px;
    }

    h1, h2{
        font-size: 19px;
    }

    button,
    .btn{
        font-size: 14px;
        padding: 11px;
    }

    .logo img{
        width: 95px;
    }

    .note,
    .small-text{
        font-size: 12px;
    }
}