.login-section{
    display:flex;
    flex-direction: column;
    width:100%;
    min-height:100dvh;
    background-image: url('../images/bg.png');
    background-size: cover;
    background-position: center;
    background-size:cover
}

.login-overlay{
    background:rgba(1,1,1,0.87);
    width:100%;
    min-height:100dvh;
}

.login-form-wrapper{
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height:100dvh;
}

.login-form{
    width:500px;
    padding:20px 0px;
    display:flex;
    flex-direction: column;
     row-gap:20px;
     margin:0px auto
}
.login-form form{
    display:flex;
    flex-direction: column;
    row-gap:50px;
    margin-top:30px;
}

.login-form-title h1{
    font-size:48px;
    font-weight:600;
    color:var(--white-color);
    text-align: center;
}

.login-form-sub-title p {
    font-size:32px;
    font-weight:300;
    color:var(--secondary-text-color);
    text-align: center;
    margin-bottom:15px;
}

.line-wrapper{
    display:flex;
    width:100%;
    justify-content: center;
    align-items: center;
}

.login-form-group{
    display:flex;
    flex-direction:column;
    row-gap:15px;
}

.login-form-label{
    font-size:24px;
    font-weight:600;
    color:var(--white-color);
}

.login-form-label.tc-primary{
    color:var(--primary-text-color);
}

.login-form-input-wrapper{
    background:white;
    border-radius:16px;
    display:flex;
    align-items: center;
    padding-right:15px;
}

.login-form-input-wrapper.bg-white50{
    background:var(--white50-color);
}

.login-form-input{
    text-indent:15px;
    height:60px;
    flex:1;
    background: transparent;
    font-size:20px;
}

.login-form-input::placeholder{
    font-size:20px;
    color:var(--primary-text-color);
}

.forgot-password-link{
    text-align:center;
    margin-bottom:30px;
}

.forgot-password-link a{
    font-size:16px;
    color:var(--primary-50-color);
}



@media (max-width: 640px) {
    .login-form{
        width:100%;
    }
}