.login_wrapper {
    padding: 400px 0;
    position: relative;
    /* height: 100vh; */
}

.login_wrapper__content {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 700px;
    padding: 2rem;
    border-radius: 10px;
    background-color: whitesmoke;
}

.login_wrapper__box h3 {
    font-size: 32px;
    text-transform: capitalize;
    margin-bottom: 1rem !important;
}

.login_input {
    margin-bottom: 14px;
}

.login_input input {
    padding: 10px;
    width: 100%;
    border: 1px solid #ddd;
}

.login_button {
    margin-top: 1.2rem;
}

.login_button button {
    width: 100%;
    border: 1px solid var(--main-color);
}

.forgot_password a {
    text-transform: capitalize;
    color: var(--main-color);
}

.dont_account {
    margin-top: 10px;
}

.dont_account a {
    color: var(--main-color);
}

@media(max-width:992px) {
    .login_wrapper__content {
        width: 550px;
    }

}

@media(max-width:768px) {
    .login_wrapper__content {
        width: 450px;
        padding: 1.3rem;
    }

    .login_wrapper__box h3 {
        font-size: 22px;
    }

    .forgot_password a,
    .dont_account p {
        font-size: 14px;
    }

    .login_input {
        margin-bottom: 10px;
    }

    .login_wrapper {
        padding: 350px 0 300px 0;
    }
}

@media(max-width:576px) {
    .login_wrapper__content {
        width: 350px;
    }

    .login_wrapper {
        padding: 300px 0 250px 0;
    }
}