*{

margin:0;
padding:0;
box-sizing:border-box;

font-family:Poppins,sans-serif;
}


body{

background:#071b38;

min-height:100vh;

display:flex;

justify-content:center;

align-items:center;

padding:20px;
}




/* CONTAINER */

.login-container{

width:100%;

max-width:1000px;
}




/* BOX */

.login-box{

display:grid;

grid-template-columns:1fr 1fr;

background:white;

border-radius:30px;

overflow:hidden;

box-shadow:0 15px 40px rgba(0,0,0,0.15);
}




/* LEFT */

.login-left{

background:linear-gradient(
135deg,
#d60000,
#071b38
);

padding:50px;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

text-align:center;

color:white;
}

.login-left img{

width:120px;

margin-bottom:20px;
}

.login-left h2{

font-size:40px;

font-weight:800;

margin-bottom:10px;
}




/* RIGHT */

.login-right{

padding:50px;
}

.login-right h2{

font-size:36px;

font-weight:800;

margin-bottom:10px;

color:#071b38;
}

.login-right p{

color:#667085;

margin-bottom:30px;
}




/* INPUT */

.input-box{

display:flex;

align-items:center;

background:#f4f7fb;

padding:15px 18px;

border-radius:16px;

margin-bottom:20px;
}

.input-box i{

color:#667085;

margin-right:12px;
}

.input-box input{

border:none;

outline:none;

background:transparent;

width:100%;
}




/* RADIO */

.radio-box{

display:flex;

gap:25px;

margin-bottom:25px;
}

.radio-box label{

font-weight:600;

color:#071b38;
}




/* BUTTON */

.login-btn{

width:100%;

padding:15px;

border:none;

border-radius:16px;

background:#d60000;

color:white;

font-size:16px;

font-weight:700;

transition:0.3s;
}

.login-btn:hover{

background:#071b38;
}




/* RESPONSIVE */

@media(max-width:768px){

.login-box{

grid-template-columns:1fr;
}

.login-left{

padding:35px;
}

.login-right{

padding:35px;
}

}





/* =========================
   GLOBAL
========================= */

*{

margin:0;
padding:0;
box-sizing:border-box;

font-family:Poppins,sans-serif;
}



body{

background:
linear-gradient(rgba(8,15,35,0.82),
rgba(8,15,35,0.82)),

url('https://images.unsplash.com/photo-1523240795612-9a054b0db644?q=80&w=1974&auto=format&fit=crop');

background-size:cover;

background-position:center;

min-height:100vh;

display:flex;

justify-content:center;

align-items:center;

padding:40px 20px;
}




/* =========================
   REGISTER WRAPPER
========================= */

.register-wrapper{

width:100%;

max-width:1200px;

background:white;

border-radius:30px;

overflow:hidden;

display:grid;

grid-template-columns:1fr 1fr;

box-shadow:
0 15px 50px rgba(0,0,0,0.2);
}




/* =========================
   LEFT SIDE
========================= */

.register-left{

background:
linear-gradient(rgba(214,0,0,0.85),
rgba(11,28,57,0.92)),

url('https://images.unsplash.com/photo-1522202176988-66273c2fd55f?q=80&w=1971&auto=format&fit=crop');

background-size:cover;

background-position:center;

padding:70px 50px;

color:white;

display:flex;

flex-direction:column;

justify-content:center;
}




/* BADGE */

.admission-badge{

display:inline-block;

background:white;

color:#d60000;

padding:10px 22px;

border-radius:50px;

font-size:14px;

font-weight:700;

margin-bottom:25px;

width:max-content;
}




/* TITLE */

.register-left h1{

font-size:52px;

font-weight:800;

line-height:1.2;

margin-bottom:20px;
}




/* TEXT */

.register-left p{

font-size:17px;

line-height:1.9;

opacity:0.95;
}




/* =========================
   RIGHT SIDE
========================= */

.register-right{

padding:60px 50px;

background:white;
}




/* FORM TITLE */

.form-title{

margin-bottom:35px;
}

.form-title h2{

font-size:38px;

font-weight:800;

color:#0b1c39;

margin-bottom:8px;
}

.form-title p{

color:#666;

font-size:15px;
}




/* =========================
   INPUT
========================= */

.form-control,
.form-select{

height:56px;

border-radius:14px;

border:1px solid #ddd;

padding-left:16px;

font-size:15px;

box-shadow:none;
}




/* FOCUS */

.form-control:focus,
.form-select:focus{

border-color:#d60000;

box-shadow:
0 0 0 0.15rem rgba(214,0,0,0.1);
}




/* =========================
   BUTTON
========================= */

.register-btn{

width:100%;

height:56px;

border:none;

border-radius:14px;

background:#d60000;

color:white;

font-size:17px;

font-weight:700;

transition:0.3s;
}




/* HOVER */

.register-btn:hover{

background:#0b1c39;

transform:translateY(-2px);
}




/* =========================
   LOGIN LINK
========================= */

.login-link{

text-align:center;

margin-top:25px;

font-size:15px;
}

.login-link a{

color:#d60000;

font-weight:700;

text-decoration:none;
}




/* =========================
   ALERT
========================= */

.alert{

border-radius:14px;

font-size:14px;
}




/* =========================
   RESPONSIVE
========================= */

@media(max-width:991px){

.register-wrapper{

grid-template-columns:1fr;
}

.register-left{

display:none;
}

}




@media(max-width:576px){

.register-right{

padding:40px 25px;
}

.form-title h2{

font-size:30px;
}

}