.login-title {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.login-hero {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
}


    .login-hero::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        background: linear-gradient(to right, rgba(243,243,243,0) 70%, rgba(243,243,243,1) 100%), url('/Images/Checkout/5-1.jpg');
        background-size: cover; 
        background-repeat: no-repeat;
        background-position: center;
        z-index: 0;
    }


    .login-hero::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url('/Images/Checkout/4.png');
        background-size: cover; 
        background-repeat: no-repeat;
        background-position: center;
        pointer-events: none;
        z-index: 1;
    }


.login-hero {
    position: relative;
}

    .login-hero::before {
        z-index: 0;
    }

    .login-hero::after {
        z-index: 1;
    }

    
    .login-hero > * {
        position: relative;
        z-index: 2;
    }
    .login-hero > * {
        position: relative;
        z-index: 2;
    }


.login-logo {
    width: auto;
    height: auto;
    filter: brightness(0); 
    margin-bottom: 10px;
}

.auth-switch {
    display: flex;
    align-items: center;
    gap: 10px;
}

.auth-switch__item {
    color: #000;
    font-size: 18px;
    font-weight: 500;
}

.auth-switch__divider {
    width: 1.5px;
    height: 30px;
    background: black;
}

.recoverypass-page {
    float: left !important;
}

.login-row {
    display: flex;
    justify-content: flex-end; 
}

.login-form-group {
    display: flex;
    flex-direction: column;
    align-items: flex-end; 
}

.login-greeting {
    margin: 0 0 5px 0;
    font-size: 16px;
    font-weight: 500;
}

.login-text {
    margin: 0 0 10px 0;
    font-size: 14.83px;
    font-weight: 400;
}

.login-input {
    width: 100%;
    text-align: right; 
}


.login-btn-wrapper {
    display: flex;
    justify-content: flex-end;
}

.login-btn {
    width: 100%;
    padding: 11px 0;
    font-weight: 700;
    font-size: 20px;
}


.recoverypass-page {
    background-color: #fff;
    border-radius: 5px;
    padding: 30px 20px 30px 42px !important;
    border: 1px solid #ddd;
}

#CellNumber::placeholder {
    text-align: end;
    font-size: 15px;
    letter-spacing: 4px;
    font-weight: 500;
}

.login-terms {
    margin-top: 10px;
    font-size: 14px;
    text-align: center;
    line-height: 56.72px;
    color: #000000;
}

    .login-terms a {
        color: #003CFF;
        font-weight: 300;
        font-size: 14px;
        line-height: 56.72px;
        text-align: right;
        vertical-align: middle;
        text-decoration: underline;
        text-decoration-style: solid;
        text-decoration-thickness: 0%;
        text-decoration-skip-ink: auto;
    }

        .login-terms a:hover {
            color: #444;
        }

#CellNumber.form-control {
    border-radius: 2.1px;
    border-style: solid;
    border-width: 0 0 1.05px 0.52px;
    border-color: #C8C8C8;
    box-shadow: none !important;
    background-color: transparent;
    color: #777;
    text-align: end;
    letter-spacing: 4px;
    padding: 8px 0px;
}


#CellNumber:focus {
    outline: none;
    border-color: #C8C8C8 !important;
    box-shadow: none !important;
}


#CellNumber:hover {
    border-color: #C8C8C8;
    background-color: transparent;
}


#CellNumber:not(:placeholder-shown) {
    border-color: #C8C8C8;
    color: #777;
}


#CellNumber:valid {
    border-color: #C8C8C8;
}

.btn:hover{
    transform: none;
}

@media (max-width: 780px) {

    .login-hero {
        padding-top: 350px; 
    }

    .login-title {
        align-items: center;
        text-align: center;
    }

    .login-row {
        justify-content: center;
        flex-direction: column;
        align-items: center;
    }

    .auth-switch {
        justify-content: center;
        margin-top: 35px;
        margin-bottom: -30px;
    }
    .recoverypass-page {
        background-color: #fff;
        border-radius: 5px;
        padding: 30px 20px !important;
        border: 1px solid #ddd;
    }

    .login-input {
        width: 100%;
        max-width: 320px;
        text-align: center;
    }

    .login-btn-wrapper {
        justify-content: center;
        width: 100%;
    }

    .login-btn {
        width: 100%;
        max-width: 320px;
    }

    .login-terms {
        text-align: center;
        padding: 0 10px;
    }

    .login-greeting,
    .login-text {
        text-align: center;
    }

    .login-title {
        flex-direction: column;
        align-items: center;
        text-align: center !important;
        gap: 8px;
    }

        .login-title h1 {
            display: block !important;
            margin: 0;
            font-size: 18px;
            text-align: center !important;
        }

    .login-logo {
        margin-bottom: 0;
    }

    .login-hero::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        background: url('/Images/Checkout/3-1.png');
        background-size: auto 100%, auto 100%;
        background-repeat: no-repeat;
        background-position: left top;
        z-index: 0;
    }


    .login-hero::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url('/Images/Checkout/2.png');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        pointer-events: none;
        z-index: 1;
    }


}