@media (max-width: 1024px) and (min-width: 767px){
    .login-img-wrapper{
        text-align: center;
    }
    .login-img-wrapper img{
        width: 70%;
    }
}

@media (max-width: 1024px) {

    .login-container{
        margin-top: 120px;
        width: 90%;
    }
    .login-information-container{
        grid-template-columns: auto;
    }

    .login-info-heading-wrapper h1, .login-info-heading-wrapper h2 {
        font-size: 25px;
    }

    .login-info-desc-wrapper p, .login-form-desc, .login-form-link-desc{
        font-size: 14px;
    }

    .login-info-heading-wrapper{
        margin-bottom: 1rem;
    }

    .login-form-card{
        padding: 1.5rem;
    }

    .login-form-title{
        font-size: 1.3em;
    }

    .passowrd-input-group .form-control{
        padding-right: 72px;
    }

    .login-input-wrap .form-control{
        padding-left: 40px;
        font-size: 14px;
    }

    .btn-login {
        padding: 4px 22px !important;
        font-size: 14px !important;
    }

    .login-input-wrap > svg{
        left: 12px;
    }

    html[dir="rtl"] .login-input-wrap > svg{
        right: 12px;
    }

    html[dir="rtl"] .login-input-wrap .form-control{
        padding-right: 40px;
        font-size: 14px;
    }
}