@media (max-width: 780px) and (orientation: portrait) {
    body {
        width: 100vw;
        height: 100vh;
    }

    .login_main {
        width: 95%;
        height: 60%;
    }
    .signin_main {
        width: 90%;
        height: 82%;
    }

    .login_bottom {
        top: 92%;
    }

    .signin_btn_back {
        top: 10%;
        left: 10%;
    }
}

@media (max-width: 640px) and (orientation: portrait) {
    .login_logo {
        position: absolute;
        top: 37px;
        left: 38px;
        animation: slide-mobile 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    }

    .login_logo img {
        width: 80%;
    }

    .login_container {
        position: absolute;
        top: 84%;
        margin: 0;
        justify-content: center;
    }

    .login_head {
        margin: 0px;

    }

    .input_icon_wrapper {
        width: 95%;
    }

    .login_btn_wrapper {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 20px;
    }

    .login_btn {
        width: 180px;
        margin: 0px;
    }

    .guest_login_btn {
        margin: 0px;
    }

    @keyframes slide-mobile {
        0% {
            top: 50%;
            left: 50%;
            width: 100%;
            height: 100%;
            height: auto;
            transform: translate(-50%, -50%) scale(1);
        }

        100% {
            top: 37px;
            left: 38px;
            width: 18.7%;
            transform: translate(0, 0) scale(1);
        }
    }
}