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

    background:
    linear-gradient(
        rgba(11,61,145,.78),
        rgba(11,61,145,.88)
    ),
    url("../images/KHS-Building.jpg");

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    background-attachment:fixed;

    min-height:100vh;

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

    overflow:hidden;

    position:relative;
}
body:before{
content:"";
position:fixed;inset:-20%;
background:radial-gradient(circle at top right,rgba(255,255,255,.2),transparent 35%),
radial-gradient(circle at bottom left,rgba(255,255,255,.18),transparent 30%);
animation:float 10s infinite alternate}
@keyframes float{from{transform:translateY(-20px)}to{transform:translateY(20px)}}
.card{

    position:relative;

    width:440px;

    padding:45px;

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

    backdrop-filter:blur(20px);

    border:1px solid rgba(255,255,255,.25);

    border-radius:28px;

    box-shadow:
    0 25px 60px rgba(0,0,0,.35);

    z-index:10;

}
.logo{
width:80px;height:80px;border-radius:50%;
background:#fff;color:#2563eb;
display:flex;align-items:center;justify-content:center;
font-size:34px;font-weight:700;margin:0 auto 15px}
h2{text-align:center;color:#fff}
p.sub{text-align:center;color:#eef;margin:8px 0 25px}
.input{
margin:15px 0}
input{
width:100%;
padding:14px 16px;
border:none;
border-radius:12px;
font-size:15px}
input:focus{outline:2px solid #bfdbfe}
button{

    width:100%;

    padding:15px;

    border:none;

    border-radius:14px;

    background:
    linear-gradient(
    90deg,
    #FFC107,
    #FF9800);

    color:#fff;

    font-size:16px;

    font-weight:600;

    cursor:pointer;

    transition:.35s;

}

button:hover{

    transform:translateY(-3px);

    box-shadow:0 10px 25px rgba(255,193,7,.35);

}
button:hover{background:#d97706}
#msg{margin-top:15px;text-align:center;color:#fff;font-size:14px;min-height:20px}
.footer{text-align:center;color:#eef;font-size:12px;margin-top:20px}
h2{

    color:#fff;

    text-align:center;

    font-size:30px;

    margin-bottom:5px;

}

.school-name{

    color:#FFD54F;

    text-align:center;

    font-weight:600;

    margin-bottom:10px;

}

.sub{

    color:#EAF4FF;

    text-align:center;

    margin-bottom:28px;

}
.welcome-box{

    text-align:center;

    color:#fff;

    margin-bottom:25px;

    font-size:15px;

}

.welcome-box i{

    color:#FFD54F;

    margin-right:8px;

}
/*==============================
  PREMIUM LOGIN LOGO
==============================*/

.login-logo{
    display:flex;
    justify-content:center;
    margin-top:-70px;
    margin-bottom:20px;
}

.login-logo-circle{

    width:140px;
    height:140px;

    background:#fff;

    border-radius:50%;

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

    padding:10px;

    border:6px solid #f4c542;

    box-shadow:
        0 15px 35px rgba(0,0,0,.18),
        0 0 0 8px rgba(244,197,66,.18);

    transition:.35s ease;
}

.login-logo-circle:hover{

    transform:translateY(-6px) scale(1.04);

    box-shadow:
        0 22px 45px rgba(0,0,0,.22),
        0 0 30px rgba(244,197,66,.45);
}

.login-logo-circle img{

    width:105px;
    height:105px;

    object-fit:contain;

    border-radius:50%;
}