/* ===========================
   RESET
=========================== */

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

body{
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:20px;
    background:linear-gradient(180deg,#081E5B,#f4f7ff,#081E5B);
    overflow-x:hidden;
}

/* ===========================
   LOGIN CONTAINER
=========================== */

.container{

    width:min(95%,1200px);
    min-height:650px;

    display:flex;
    flex-wrap:wrap;

    background:#fff;

    border-radius:35px;

    overflow:hidden;

    box-shadow:0 20px 50px rgba(0,0,0,.35);

}

/* ===========================
   LEFT PANEL
=========================== */

.left-panel{

    flex:1 1 500px;

    background:url("school.jpg") center center/cover no-repeat;

    position:relative;

}

.overlay{

    width:100%;
    height:100%;

    background:#081E5B;

    padding:clamp(25px,4vw,45px);

    color:#fff;

}

.school{

    display:flex;
    align-items:center;
    gap:15px;

    margin-bottom:40px;

}

.school img{

    width:clamp(55px,6vw,75px);
    height:clamp(55px,6vw,75px);

    border-radius:50%;
    object-fit:cover;

}

.school h2{

    font-size:clamp(22px,2vw,30px);

}

.school p{

    font-size:clamp(13px,1vw,15px);

}

.overlay h1{

    font-size:clamp(2rem,4vw,2.5rem);

    line-height:1.2;

    margin:20px 0;

}

.overlay span{

    color:#52b5ff;

}

.desc{

    line-height:1.8;

    margin-bottom:35px;

    font-size:clamp(15px,1.2vw,18px);

}

.feature{

    display:flex;

    gap:18px;

    margin-bottom:28px;

}

.feature i{

    width:55px;
    height:55px;

    border-radius:50%;

    background:#fff;

    color:#2342ff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:22px;

    flex-shrink:0;

}

.feature h3{

    margin-bottom:8px;

}

.bottom-text{

    margin-top:70px;
    margin-left: 65px;
    font-weight:600;

}

/* ===========================
   RIGHT PANEL
=========================== */

.right-panel{

    flex:1 1 450px;

    padding:clamp(25px,4vw,45px);

    background:#fff;

    position:relative;

}

.close{

    position:absolute;

    top:20px;
    right:20px;

    color:#2342ff;

    font-size:28px;

    cursor:pointer;

}

.avatar{

    width:clamp(70px,8vw,90px);

    height:clamp(70px,8vw,90px);

    background:#dbe9ff;

    border-radius:50%;

    margin:auto;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#2342ff;

    font-size:clamp(35px,4vw,45px);

}

.right-panel h1{

    text-align:center;

    margin:20px 0 30px;

    color:#081E5B;

    font-size:clamp(2rem,3vw,3rem);

}

label{

    display:block;

    margin:18px 0 8px;

    color:#081E5B;

    font-weight:600;

}

.input-box{

    display:flex;

    align-items:center;

    border:2px solid #2952ff;

    border-radius:10px;

    overflow:hidden;

}

.input-box i{

    width:50px;

    text-align:center;

    color:#2952ff;

}

.input-box input{

    flex:1;

    border:none;

    outline:none;

    padding:14px;

    font-size:clamp(14px,1.3vw,16px);

}

.eye{

    cursor:pointer;

}

.options{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin:20px 0;

    font-size:14px;

    gap:10px;

}

.options a{

    color:#2952ff;

    text-decoration:none;

}

.login-btn{

    width:100%;

    padding:15px;

    background:#2952ff;

    color:#fff;

    border:none;

    border-radius:10px;

    font-weight:600;

    cursor:pointer;

}

.or{

    text-align:center;

    margin:20px 0;

    font-weight:600;

}

.offline-btn{

    width:100%;

    padding:15px;

    background:#fff;

    border:2px solid #2952ff;

    color:#2952ff;

    border-radius:10px;

    cursor:pointer;

    font-weight:600;

}

.contact{

    text-align:center;

    margin-top:20px;

    font-size:14px;

}

.contact a{

    color:#2952ff;

    text-decoration:none;

}

/* ===========================
   TABLET
=========================== */

@media(max-width:992px){

.container{

    width:96%;

}

.overlay h1{

    font-size:2.4rem;

}

}

/* ===========================
   MOBILE
=========================== */

@media(max-width:768px){

.container{

    flex-direction:column;

}

.left-panel{

    min-height:450px;

}

.right-panel{

    width:100%;

}

.options{

    flex-direction:column;

    align-items:flex-start;

}

}

/* ===========================
   SMALL PHONES
=========================== */

@media(max-width:480px){

body{

    padding:10px;

}

.container{

    border-radius:20px;

}

.overlay{

    padding:20px;

}

.overlay h1{

    font-size:2rem;

}

.feature{

    gap:12px;

}

.feature i{

    width:45px;

    height:45px;

    font-size:18px;

}

.school{

    flex-direction:column;

    text-align:center;

}

.right-panel{

    padding:20px;

}

}