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

:root{
  --navy:#002147;
  --blue:#0b3db1;
  --gold:#e3a812;
  --footer-h:2.7rem;
}

html,body{
  width:100%;
  min-height:100%;
  background:#eef3fb;
  overflow:hidden;
}

.login-page{
  height:calc(100dvh - var(--footer-h));
  display:grid;
  grid-template-columns:57fr 43fr;
  overflow:hidden;
}

/* LEFT */
.school-side{
  position:relative;
  height:100%;
  background:url('../images/students-login.png') center center/cover no-repeat;
}

.school-overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      to bottom,
      rgba(0,0,0,0.10),
      rgba(0,31,77,0.55)
    ),
    linear-gradient(
      to right,
      rgba(0,0,0,0.10),
      rgba(0,0,0,0.03)
    );
}

.school-content{
  position:relative;
  z-index:2;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:clamp(1.35rem,3vh,2.35rem) clamp(1rem,2vw,2rem);
}

.school-logo{
  width:clamp(4.8rem,6.2vw,6.6rem);
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:50%;
  background:#fff;
  padding:.35rem;
  margin-bottom:clamp(.65rem,1.25vh,.9rem);
  filter:drop-shadow(0 .7rem 1.4rem rgba(0,0,0,.2));
}

.school-content h1{
  max-width:92%;
  font-size:clamp(1.72rem,2.35vw,2.5rem);
  line-height:1.08;
  font-weight:800;
  color:#ffffff;
  text-shadow:0 .22rem .95rem rgba(0,0,0,.65);
}

.school-place{
  margin-top:.32rem;
  font-size:clamp(1.32rem,1.85vw,1.9rem);
  line-height:1.05;
  color:var(--gold);
  font-weight:800;
  text-shadow:0 .18rem .7rem rgba(0,0,0,.55);
}

.tagline{
  margin-top:clamp(.45rem,.9vh,.7rem);
  font-size:clamp(.88rem,1.02vw,1.1rem);
  color:#ffffff;
  font-weight:700;
  font-style:italic;
  text-shadow:0 .15rem .65rem rgba(0,0,0,.6);
}

.feature-bar{
  position:absolute;
  left:50%;
  bottom:clamp(1rem,2.2vh,1.75rem);
  transform:translateX(-50%);
  width:min(87%,47rem);
  display:grid;
  grid-template-columns:repeat(3,1fr);
  padding:clamp(.6rem,1vw,.85rem);
  border-radius:clamp(1rem,1.4vw,1.35rem);
  background:rgba(0,33,71,.96);
  color:#fff;
  box-shadow:0 1rem 2.3rem rgba(0,0,0,.25);
}

.feature-item{
  display:flex;
  align-items:center;
  gap:clamp(.5rem,.8vw,.75rem);
  text-align:left;
  padding-inline:clamp(.32rem,.75vw,.7rem);
  border-right:1px solid rgba(255,255,255,.24);
}

.feature-item:last-child{
  border-right:none;
}

.feature-item span{
  width:clamp(2.25rem,2.8vw,2.8rem);
  aspect-ratio:1/1;
  border:.13rem solid var(--gold);
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:clamp(.95rem,1.2vw,1.18rem);
  flex:0 0 auto;
}

.feature-item b{
  display:block;
  font-size:clamp(.75rem,.86vw,.9rem);
  line-height:1.15;
}

.feature-item small{
  display:block;
  margin-top:.18rem;
  font-size:clamp(.64rem,.7vw,.74rem);
  line-height:1.28;
  color:rgba(255,255,255,.9);
}

/* RIGHT */
.login-side{
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(.75rem,1.8vw,2.1rem);
  background:linear-gradient(180deg,#f8fbff,#eef4ff);
}

.login-card{
  width:min(86%,34rem);
  max-height:calc(100dvh - var(--footer-h) - 1.2rem);
  padding:clamp(1.15rem,2.05vw,2.15rem);
  border-radius:clamp(1.45rem,1.9vw,2rem);
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(1.1rem);
  box-shadow:0 1.8rem 4rem rgba(0,31,77,.17);
  text-align:center;
  overflow:hidden;
}

.card-logo{
  width:clamp(3.7rem,4.7vw,5.35rem);
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:50%;
  padding:.32rem;
  background:#fff;
  box-shadow:0 .75rem 1.7rem rgba(0,0,0,.12);
  margin-bottom:clamp(.55rem,1vh,.95rem);
}

.login-card h2{
  font-size:clamp(1.65rem,2vw,2.18rem);
  line-height:1.08;
  font-weight:800;
  color:#082b62;
}

.login-subtitle{
  margin:.4rem 0 clamp(.85rem,1.35vh,1.2rem);
  color:#6b7280;
  font-size:clamp(.82rem,.9vw,.96rem);
}

.input-group{
  text-align:left;
  margin-bottom:clamp(.58rem,1vh,.82rem);
}

.input-group label{
  display:block;
  margin-bottom:.35rem;
  color:#082b62;
  font-size:clamp(.76rem,.82vw,.86rem);
  font-weight:700;
}

.input-box{
  min-height:clamp(2.35rem,4.2vh,2.85rem);
  display:flex;
  align-items:center;
  gap:.6rem;
  padding:0 .75rem;
  border:1px solid #cfd7e6;
  border-radius:.78rem;
  background:#fff;
}

.input-box:focus-within{
  border-color:#2363d1;
  box-shadow:0 0 0 .22rem rgba(35,99,209,.12);
}

.input-box input{
  flex:1;
  width:100%;
  min-width:0;
  border:0;
  outline:0;
  background:transparent;
  font-size:clamp(.82rem,.88vw,.94rem);
}

.eye-btn{
  border:0;
  background:transparent;
  cursor:pointer;
  flex:0 0 auto;
}

.forgot-row{
  text-align:right;
  margin:-.1rem 0 clamp(.72rem,1.3vh,1rem);
}

.forgot-row a{
  color:#0b3db1;
  text-decoration:none;
  font-size:clamp(.76rem,.82vw,.86rem);
  font-weight:700;
}

.login-btn,
.home-btn{
  width:100%;
  min-height:clamp(2.35rem,4.35vh,2.85rem);
  border-radius:.82rem;
  font-size:clamp(.86rem,.9vw,.96rem);
  font-weight:700;
  cursor:pointer;
}

.login-btn{
  border:0;
  background:linear-gradient(135deg,#002147,#0044a8);
  color:#fff;
  box-shadow:0 .75rem 1.45rem rgba(0,33,71,.22);
}

.login-btn:hover{
  transform:translateY(-.06rem);
}

.login-btn:disabled{
  opacity:.72;
  cursor:not-allowed;
  transform:none;
}

#loader{
  display:none;
}

.divider{
  display:flex;
  align-items:center;
  gap:1rem;
  margin:clamp(.55rem,1.15vh,.9rem) 0;
  color:#7a8799;
  font-size:.85rem;
}

.divider::before,
.divider::after{
  content:"";
  flex:1;
  height:1px;
  background:#d7dfed;
}

.home-btn{
  border:1px solid #2363d1;
  background:#fff;
  color:#0b3db1;
}

.home-btn:hover{
  background:#f4f8ff;
}

.secure-box{
  margin-top:clamp(.62rem,1.2vh,.95rem);
  display:flex;
  align-items:center;
  gap:.78rem;
  text-align:left;
  padding:clamp(.62rem,.95vw,.85rem);
  border-radius:.9rem;
  background:linear-gradient(135deg,#edf5ff,#ffffff);
}

.secure-box span{
  font-size:clamp(1.2rem,1.45vw,1.5rem);
}

.secure-box b{
  color:#082b62;
  font-size:clamp(.82rem,.9vw,.94rem);
}

.secure-box p{
  margin-top:.18rem;
  color:#6b7280;
  font-size:clamp(.68rem,.74vw,.8rem);
  line-height:1.3;
}

#errorMessage{
  display:none;
  margin-top:.65rem;
  background:#fff1f2;
  color:#dc2626;
  border-left:.25rem solid #dc2626;
  padding:.65rem .8rem;
  border-radius:.75rem;
  font-size:.78rem;
  font-weight:600;
  text-align:left;
}

/* FOOTER */
footer{
  height:var(--footer-h);
  display:grid;
  place-items:center;
  background:linear-gradient(90deg,#001f4d,#0044a8);
  color:#fff;
  padding-inline:1rem;
  font-size:clamp(.7rem,.78vw,.84rem);
  text-align:center;
}

/* SMALL LAPTOP HEIGHT FIX */
@media(max-height:44rem) and (min-width:62.01rem){
  :root{
    --footer-h:2.45rem;
  }

  .school-content{
    padding-top:clamp(1rem,2vh,1.6rem);
  }

  .school-logo{
    width:clamp(4rem,5.3vw,5.6rem);
    margin-bottom:.45rem;
  }

  .school-content h1{
    font-size:clamp(1.45rem,2.05vw,2.15rem);
  }

  .school-place{
    font-size:clamp(1.15rem,1.6vw,1.65rem);
  }

  .tagline{
    font-size:clamp(.78rem,.9vw,.95rem);
  }

  .feature-bar{
    bottom:.7rem;
    padding:.55rem;
  }

  .feature-item span{
    width:2.05rem;
  }

  .login-card{
    padding:clamp(.9rem,1.65vw,1.55rem);
    width:min(84%,32rem);
  }

  .card-logo{
    width:clamp(3rem,4vw,4.4rem);
  }

  .login-card h2{
    font-size:clamp(1.35rem,1.75vw,1.85rem);
  }

  .login-subtitle{
    margin:.3rem 0 .65rem;
  }

  .input-group{
    margin-bottom:.5rem;
  }

  .input-box{
    min-height:2.15rem;
  }

  .login-btn,
  .home-btn{
    min-height:2.2rem;
  }

  .divider{
    margin:.45rem 0;
  }

  .secure-box{
    margin-top:.5rem;
    padding:.55rem;
  }
}

/* TABLET */
@media(max-width:62rem){
  html,body{
    overflow:auto;
  }

  .login-page{
    height:auto;
    min-height:calc(100dvh - var(--footer-h));
    display:flex;
    flex-direction:column;
    overflow:visible;
  }

  .school-side{
    min-height:38rem;
    background-position:center top;
  }

  .school-content{
    min-height:38rem;
  }

  .school-overlay{
    background:
      linear-gradient(
        to bottom,
        rgba(0,0,0,.12),
        rgba(0,31,77,.62)
      );
  }

  .feature-bar{
    position:relative;
    left:auto;
    bottom:auto;
    transform:none;
    width:min(92%,42rem);
    margin:clamp(1.4rem,4vw,2rem) auto 0;
    grid-template-columns:1fr;
  }

  .feature-item{
    border-right:0;
    border-bottom:1px solid rgba(255,255,255,.18);
    padding:.7rem 0;
  }

  .feature-item:last-child{
    border-bottom:0;
  }

  .login-side{
    min-height:auto;
    padding:clamp(1rem,4vw,2rem);
  }

  .login-card{
    max-height:none;
    width:min(94%,34rem);
  }
}

/* MOBILE */
@media(max-width:36rem){
  .school-side{
    min-height:auto;
    background-position:center top;
  }

  .school-content{
    min-height:auto;
    padding:1.5rem .85rem;
  }

  .school-logo{
    width:clamp(4.2rem,22vw,5.1rem);
    margin-bottom:.65rem;
  }

  .school-content h1{
    font-size:clamp(1.35rem,7.5vw,1.95rem);
    max-width:96%;
  }

  .school-place{
    font-size:clamp(1.2rem,6vw,1.55rem);
  }

  .tagline{
    font-size:clamp(.8rem,3.9vw,.95rem);
  }

  .feature-bar{
    width:92%;
    margin-top:1.1rem;
    padding:.8rem 1rem;
    border-radius:1.1rem;
  }

  .feature-item{
    gap:.65rem;
  }

  .feature-item span{
    width:2.35rem;
  }

  .feature-item b{
    font-size:.9rem;
  }

  .feature-item small{
    font-size:.76rem;
  }

  .login-side{
    padding:1rem .75rem;
  }

  .login-card{
    width:100%;
    padding:1.25rem;
    border-radius:1.25rem;
  }

  .card-logo{
    width:4.2rem;
  }

  footer{
    padding:.65rem .75rem;
    line-height:1.4;
  }
}