/* =========================
PRIVATE CLIENT LOGIN
========================= */
*,*:before,*:after{
margin:0px;
padding:0px;
outline:0px;
}

@font-face{
src:url(../fonts/poppins-SemiBold.ttf);
font-family:poppins_semibold;
}

@font-face{
src:url(../fonts/notosans.ttf);
font-family:notosans;
}

@font-face{
src:url(../fonts/Rubik-VariableFont_wght.ttf);
font-family:rubik;
}

@font-face{
font-family:PlayfairDisplay;
src:url('../fonts/PlayfairDisplay-Bold.ttf');
}

.login-page{
display:flex;
min-height:100vh;
background:#F4F8F5;
}

/* LEFT PANEL */
.login-left{
flex:1;
position:relative;
display:flex;
align-items:center;
padding:90px;
overflow:hidden;
background:url("../images/login_bank.jpg") center center / cover no-repeat;
}

.login-overlay{
position:absolute;
inset:0;
background:
linear-gradient(135deg,rgba(1,29,20,.93),rgba(2,39,27,.78));
}

/* subtle luxury glow */
.login-left::after{
content:"";
position:absolute;
width:500px;
height:500px;
right:-180px;
top:50%;
transform:translateY(-50%);
border-radius:50%;
background:rgba(215,170,66,.08);
filter:blur(80px);
}

.login-left-content{
position:relative;
z-index:2;
max-width:520px;
}

.portal-logo{
width:230px;
margin-bottom:45px;
}

.portal-label{
display:inline-block;
color:#D7AA42;
font-family:notosans;
font-size:13px;
font-weight:600;
letter-spacing:3px;
margin-bottom:24px;
}

.login-left h1{

font-family:PlayfairDisplay;
font-size:72px;
font-weight:500;
line-height:1.05;

color:#F8F1DF;

margin-bottom:25px;
}

.login-left p{
font-family:notosans;
font-size:18px;
line-height:1.9;

color:
rgba(248,241,223,.74);
margin-bottom:42px;
}

/* TRUST */
.trust-features{
display:flex;
flex-wrap:wrap;
gap:18px;
}

.trust-features div{
display:flex;
align-items:center;
gap:12px;
padding:14px 18px;
border:1px solid rgba(215,170,66,.20);
border-radius:10px;
background:rgba(255,255,255,.03);
color:#F8F1DF;
font-family:notosans;
font-size:14px;
}

.trust-features svg{
width:16px;
height:16px;
color:#D7AA42;
}

/* RIGHT */
.login-right{
flex:1;
display:flex;
justify-content:center;
align-items:center;
padding:80px;
}

/* CARD */

.login-card{
width:100%;
max-width:480px;
background:#fff;
padding:55px;
border-radius:22px;
box-shadow:0 30px 60px rgba(0,0,0,.05);
}

/* BACK */

.back-link{
display:inline-flex;
align-items:center;
gap:10px;
margin-bottom:35px;
font-family:notosans;
font-size:14px;
text-decoration:none;
color:#6A6A6A;
transition:.3s;
}

.back-link:hover{
color:#D7AA42;
}

.back-link svg{
width:15px;
height:15px;
}

/* TEXT */

.login-tag{
display:inline-block;
color:#D7AA42;
font-family:notosans;
font-size:13px;
font-weight:600;
letter-spacing:3px;
margin-bottom:14px;
}

.login-card h2{
font-family:PlayfairDisplay;
font-size:56px;
font-weight:500;
color:#02271B;
margin-bottom:14px;
}

.login-text{
font-family:notosans;
line-height:1.8;
color:#5A5A5A;
margin-bottom:35px;
}

/* FORM */
.form-group{
margin-bottom:24px;
}
.form-group label{
display:block;
margin-bottom:10px;
font-family:notosans;
font-weight:600;
color:#02271B;
}

.input-box{

display:flex;
align-items:center;
gap:14px;

padding:0 18px;

border:
1px solid rgba(2,39,27,.10);

border-radius:10px;

transition:.3s;
}

.input-box:focus-within{

border-color:#D7AA42;

box-shadow:
0 0 0 4px
rgba(215,170,66,.10);
}

.input-box svg{

width:18px;
height:18px;

color:#D7AA42;
}

.input-box input{

width:100%;

padding:18px 0;

border:none;
outline:none;

font-family:notosans;
font-size:16px;
}

/* OPTIONS */

.login-options{

display:flex;
justify-content:space-between;
align-items:center;

margin:
12px 0 35px;
}

.remember-me{

display:flex;
gap:10px;
align-items:center;

font-family:notosans;
color:#5A5A5A;
}

.login-options a{

text-decoration:none;

color:#D7AA42;

font-family:notosans;
}

/* BUTTON */

.login-card button{

width:100%;

padding:18px;

border:none;
border-radius:10px;

background:#D7AA42;
color:#02271B;

font-family:notosans;
font-size:16px;
font-weight:600;

cursor:pointer;
transition:.35s;
}

.login-card button:hover{

transform:
translateY(-2px);

background:#E0B450;

box-shadow:
0 15px 35px
rgba(215,170,66,.22);
}

/* FOOTER */

.portal-footer{

display:flex;
justify-content:space-between;
align-items:center;

padding:24px 7%;

background:#02271B;

border-top:
1px solid rgba(255,255,255,.05);
}

.portal-footer p{

font-family:notosans;
font-size:14px;

color:
rgba(248,241,223,.55);
}

.portal-footer div{

display:flex;
gap:25px;
}

.portal-footer a{

text-decoration:none;

font-family:notosans;
font-size:14px;

color:
rgba(248,241,223,.55);

transition:.3s;
}

.portal-footer a:hover{
color:#D7AA42;
}

/* RESPONSIVE */

@media(max-width:980px){

.login-page{
flex-direction:column;
}

.login-left{
padding:60px 35px;
}

.login-left h1{
font-size:52px;
}

.login-right{
padding:45px 25px;
}

.login-card{
padding:40px;
}

.portal-footer{

flex-direction:column;
gap:12px;
}
}