@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700&family=Source+Sans+3:wght@400;500;600;700&display=swap');

body{
margin:0;
font-family:'Source Sans 3',sans-serif;
background:#ffffff;
}

/* layout */

.auth-wrapper{
display:grid;
grid-template-columns:1fr 480px;
align-items:center;
max-width:1280px;
margin:0 auto;
min-height:100vh;
gap:50px;
padding:60px 80px;
}

/* LEFT */

.auth-left{
max-width:560px;
}

.logo-lapar{
width:420px;
}

.title-lkh{
font-family:'Montserrat',sans-serif;
font-weight:900;
font-size:34px;
line-height:1.3;
color:#1d3565;
margin-bottom:18px;
max-width:750px;
}

.desc-lkh{
font-size:18px;
color:#6f6f6f;
max-width:520px;
}

/* LOGIN CARD */

.login-card{
background:#ffffff;
padding:50px 42px;
border-radius:18px;
box-shadow:0 12px 35px rgba(0,0,0,0.08);
border:1px solid #e6e6e6;
width:100%;
max-width:460px;
margin:auto;
}


/* TITLE */

.login-title{
text-align:center;
font-family:'Montserrat',sans-serif;
font-size:28px;
margin-bottom:30px;
}

/* FORM */

.form-group{
margin-bottom:22px;
text-align:left;
}

.form-group label{
font-size:15px;
font-weight:600;
display:block;
margin-bottom:8px;
}

.form-group input{
width:100%;
height:48px;
border:1px solid #d6d6d6;
border-radius:10px;
padding:0 14px;
font-size:15px;
}

.form-group input:focus{
outline:none;
border-color:#2c4ea3;
}

/* PASSWORD ICON */

.password-wrapper{
position:relative;
}

.password-wrapper input{
padding-right:45px;
}

.toggle-password{
position:absolute;
right:14px;
top:50%;
transform:translateY(-50%);
cursor:pointer;
color:#777;
font-size:16px;
}

/* BUTTON */

.btn-login{
width:100%;
height:50px;
border:none;
border-radius:10px;
background:#213e8f;
color:white;
font-weight:600;
font-size:16px;
cursor:pointer;
margin-top:10px;
}

.btn-login:hover{
background:#1a3173;
}

/* =========================
   LARGE DESKTOP
========================= */

@media (min-width:1400px){

.auth-wrapper{
max-width:1400px;
gap:120px;
}

.logo-lapar{
width:420px;
}

.title-lkh{
font-size:34px;
}

.login-card{
max-width:500px;
}

}


/* =========================
   DESKTOP
========================= */

@media (max-width:1200px){

.auth-wrapper{
grid-template-columns:1fr 420px;
gap:70px;
padding:50px 60px;
}

.login-card{
max-width:420px;
padding:44px 36px;
}

.logo-lapar{
width:220px;
}

}



/* =========================
   TABLET
========================= */

@media (max-width:992px){

.auth-wrapper{
grid-template-columns:1fr 380px;
gap:50px;
padding:40px 40px;
}

.login-card{
max-width:380px;
padding:40px 30px;
}

.title-lkh{
font-size:22px;
}

}


/* =========================
   SMALL TABLET
========================= */

@media (max-width:768px){

.auth-wrapper{
grid-template-columns:1fr;
gap:40px;
padding:40px 24px;
}

.auth-left{
text-align:center;
margin:auto;
}

.logo-lapar{
width:180px;
margin:auto;
}

.login-card{
max-width:420px;
width:100%;
padding:36px 26px;
}

}


/* =========================
   MOBILE
========================= */

@media (max-width:480px){

.auth-wrapper{
padding:30px 16px;
gap:30px;
}

.logo-lapar{
width:150px;
}

.login-card{
padding:30px 20px;
border-radius:14px;
}

.login-title{
font-size:22px;
}

.form-group input{
height:44px;
}

.btn-login{
height:46px;
}

}

/* alert text */

.login-alert{
display:flex;
align-items:center;
gap:8px;
color:#d93025;
font-size:14px;
margin-bottom:18px;
font-weight:500;
}

/* icon */

.login-alert i{
font-size:16px;
}

/* shake animation */

.shake{
animation:shake .4s;
}

@keyframes shake{
0% { transform:translateX(0); }
25% { transform:translateX(-6px); }
50% { transform:translateX(6px); }
75% { transform:translateX(-6px); }
100% { transform:translateX(0); }
}