:root{
    --primary:#002147;
    --gold:#00b3ff;
    --light:#f8f8f8;
}

body{
    background:#eef1f5;
    font-family:Segoe UI, sans-serif;
}

/* Header */
.top-banner{
    background:linear-gradient(rgba(6, 39, 102, 0.91),rgba(6, 39, 102, 0.91)),
    url('../images/School-img.jpg');
    background-size:cover;
    background-position:center;
    color:#fff;
    padding:25px 0 110px;
    text-align:center;
}

.top-banner h2{
    /* font-size:42px; */
    font-weight:700;
    margin-bottom:5px;
}

.top-banner h3{
    color:var(--gold);
    letter-spacing:3px;
    /* font-size:30px; */
    font-weight:700;
}

.top-banner p{
    /* font-size: 20px; */
    font-style:italic;
    color:#fff;
}

/* Main Card */
.portal-box{
    margin-top:-80px;
    border-radius:22px;
    overflow:hidden;
    box-shadow:0 12px 40px rgba(0,0,0,.12);
    background:#fff;
    border: 1px solid #fff;
}

/* Left Login */
.login-panel{
    background:var(--primary);
    color:#fff;
    padding:45px 35px;
    height:100%;
}

.circle-icon{
    width:95px;
    height:95px;
    background:#fff;
    color:var(--primary);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:42px;
    margin:auto;
}

.login-panel h3{
    margin-top:25px;
    font-weight:700;
    /* font-size:42px; */
    text-align:center;
}

.gold-line{
    width:80px;
    height: 6px;
    background:var(--gold);
    margin: 8px auto;
    border-radius:10px;
}

.login-panel p{
    text-align:center;
    /* font-size:20px; */
    opacity:.95;
}

.form-control,
.form-select{
    /* min-height:52px; */
    border-radius:8px;
}

.login-btn {
	background: var(--gold);
	color: #fff;
	border: none;
	font-weight: 700;
	/* min-height: 52px; */
	font-size: 18px;
}

.login-btn:hover{
    background:#c79226;
}

.or-line{
    display:flex;
    align-items:center;
    gap:12px;
    color:#fff;
    margin:25px 0 10px;
}

.or-line:before,
.or-line:after{
    content:"";
    flex:1;
    height:1px;
    background:rgba(255,255,255,.35);
}

/* Right Register */
.register-panel{
    padding:45px;
}

.register-panel h3 {
    color:var(--primary);
    font-weight: 700;
}

.register-panel .sub{
    color:#555;
}

.step {
	width: 25px;
	height: 25px;
	background: var(--gold);
	color: #fff;
	border-radius: 50%;
	font-size: 14px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 5px;
}

.label-wrap{
    display:flex;
    align-items:center;
    margin-bottom:8px;
    font-weight:600;
}

.upload-box{
    border:2px dashed #bbb;
    border-radius:10px;
    /* min-height:118px; */
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    color:#777;
    text-align:center;
}

.register-btn{
    background: #b5282e;
    color:#fff;
    font-weight:700;
    min-width:220px;
    height:48px;
}

.register-btn:hover {
    background: var(--primary);
    color:#fff;
}

.reset-btn {
    border: 1px solid var(--primary);
    color: var(--primary);
    background: transparent;
    min-width:180px;
    height:48px;
    font-weight:700;
}

.reset-btn:hover {
    background: var(--primary);
    border: 1px solid var(--primary);
    color: #fff;
}

/* Footer */
.bottom-strip{
    background:#fff;
    padding: 8px 0px 10px 0px;
    box-shadow:0 -3px 10px rgba(0,0,0,.05);
}

.bottom-strip i{
    font-size:28px;
    color:var(--primary);
}

.copyright{
    background:var(--primary);
    color:#fff;
    text-align:center;
    padding:15px;
}