/*==========================
 Google Font
==========================*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
}

body{

background:#f4f7fb;

height:100vh;

overflow:hidden;

}

/*==========================
Main Container
==========================*/

.main-container{

width:100%;

height:100vh;

display:flex;

align-items:center;

justify-content:center;

padding:30px;

}

/*==========================
Wrapper
==========================*/

.wrapper{

width:1400px;

height:850px;

background:#fff;

border-radius:25px;

overflow:hidden;

position:relative;

display:flex;

box-shadow:0 20px 60px rgba(0,0,0,.12);

}

/*==========================
Left Side
==========================*/

.left-side{

width:50%;

background:linear-gradient(135deg,#2563eb,#1d4ed8,#1e3a8a);

display:flex;

align-items:center;

justify-content:center;

position:relative;

overflow:hidden;

}

.left-side::before{

content:"";

position:absolute;

width:500px;

height:500px;

background:rgba(255,255,255,.08);

border-radius:50%;

top:-120px;

left:-120px;

}

.left-side::after{

content:"";

position:absolute;

width:350px;

height:350px;

background:rgba(255,255,255,.08);

bottom:-100px;

right:-100px;

border-radius:50%;

}

.overlay{

position:relative;

z-index:10;

text-align:center;

color:#fff;

padding:50px;

}

.overlay h1{

font-size:50px;

font-weight:700;

margin-bottom:20px;

}

.overlay p{

font-size:18px;

line-height:30px;

opacity:.9;

margin-bottom:40px;

}

.overlay button{

background:#fff;

color:#2563eb;

border:none;

padding:16px 45px;

border-radius:40px;

font-size:17px;

font-weight:600;

transition:.4s;

}

.overlay button:hover{

transform:translateY(-4px);

}

/*==========================
Right Side
==========================*/

.right-side{

width:50%;

display:flex;

align-items:center;

justify-content:center;

background:#ffffff;

}

.login-card{

width:470px;

padding:45px;

background:#fff;

border-radius:20px;

box-shadow:0 15px 40px rgba(0,0,0,.08);

}

.login-card h2{

font-size:34px;

font-weight:700;

color:#222;

margin-bottom:8px;

}

.login-card p{

color:#888;

margin-bottom:35px;

}

/*==========================
Inputs
==========================*/

.input-box{

position:relative;

margin-bottom:22px;

}

.input-box i{

position:absolute;

left:18px;

top:50%;

transform:translateY(-50%);

color:#777;

}

.input-box input{

width:100%;

height:58px;

padding-left:50px;

padding-right:50px;

border:1px solid #ddd;

border-radius:12px;

outline:none;

transition:.3s;

font-size:15px;

}

.input-box input:focus{

border-color:#2563eb;

box-shadow:0 0 10px rgba(37,99,235,.15);

}

#togglePassword{

position:absolute;

right:18px;

top:50%;

transform:translateY(-50%);

cursor:pointer;

color:#888;

}

/*==========================
Option
==========================*/

.option{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:25px;

font-size:14px;

}

.option a{

text-decoration:none;

color:#2563eb;

font-weight:600;

}

/*==========================
Buttons
==========================*/

.login-btn{

width:100%;

height:56px;

border:none;

background:linear-gradient(135deg,#2563eb,#1d4ed8);

color:#fff;

border-radius:12px;

font-size:17px;

font-weight:600;

transition:.4s;

}

.login-btn:hover{

transform:translateY(-3px);

box-shadow:0 12px 25px rgba(37,99,235,.25);

}

.google-btn{

width:100%;

height:55px;

border:1px solid #ddd;

background:#fff;

border-radius:12px;

font-weight:600;

margin-top:15px;

}

.divider{

text-align:center;

margin:25px 0;

position:relative;

}

.divider::before{

content:"";

position:absolute;

left:0;

top:50%;

width:100%;

height:1px;

background:#ddd;

}

.divider span{

background:#fff;

padding:0 15px;

position:relative;

color:#999;

}

/*==========================
Bottom
==========================*/

.bottom-text{

margin-top:25px;

text-align:center;

font-size:15px;

}

.bottom-text a{

font-weight:600;

text-decoration:none;

color:#2563eb;

}

/*==========================
Registration Panel
==========================*/

.register-panel{

position:absolute;

top:0;

right:-100%;

width:50%;

height:100%;

background:#fff;

transition:.7s;

overflow:auto;

padding:40px;

z-index:100;

}

.register-panel.active{

right:0;

}

.register-card{

width:100%;

}

.top{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:25px;

}

.top h2{

font-weight:700;

}

.top button{

width:45px;

height:45px;

border:none;

border-radius:50%;

background:#2563eb;

color:#fff;

font-size:18px;

}

.form-control,

.form-select{

height:55px;

border-radius:12px;

margin-bottom:18px;

}

textarea.form-control{

height:120px;

}

.register-btn{

width:100%;

height:56px;

border:none;

border-radius:12px;

background:linear-gradient(135deg,#2563eb,#1e40af);

color:#fff;

font-size:17px;

font-weight:600;

margin-top:15px;

transition:.3s;

}

.register-btn:hover{

transform:translateY(-3px);

}

/*==========================
Responsive
==========================*/

@media(max-width:992px){

.left-side{

display:none;

}

.right-side{

width:100%;

}

.login-card{

width:95%;

}

.register-panel{

width:100%;

}

}