*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins',sans-serif;
    }
    
    body{
    
    background:#edf2f7;
    
    height:100vh;
    
    display:flex;
    
    justify-content:center;
    
    align-items:center;
    
    }
    
    .container{
    
    width:100%;
    
    display:flex;
    
    justify-content:center;
    
    align-items:center;
    
    padding:20px;
    
    }
    
    .login-card{
    
    width:420px;
    
    background:white;
    
    padding:45px;
    
    border-radius:25px;
    
    box-shadow:0 20px 50px rgba(0,0,0,.15);
    
    animation:fade .7s;
    
    }
    
    .logo{
    
    width:120px;
    
    display:block;
    
    margin:auto;
    
    margin-bottom:20px;
    
    }
    
    h2{
    
    text-align:center;
    
    color:#1e3a8a;
    
    margin-bottom:5px;
    
    }
    
    p{
    
    text-align:center;
    
    color:#777;
    
    margin-bottom:35px;
    
    font-size:14px;
    
    }
    
    .login-error{

    display:none;

    align-items:center;

    gap:10px;

    background:#fdecef;

    color:#e11d48;

    border:1px solid #f6c1cc;

    padding:12px 14px;

    border-radius:12px;

    font-size:13.5px;

    line-height:1.4;

    margin-bottom:20px;

    animation:shake .35s;

    }

    .login-error.show{

    display:flex;

    }

    @keyframes shake{

    0%,100%{transform:translateX(0);}

    20%{transform:translateX(-6px);}

    40%{transform:translateX(6px);}

    60%{transform:translateX(-4px);}

    80%{transform:translateX(4px);}

    }

    .input-box{
    
    position:relative;
    
    margin-bottom:20px;
    
    }
    
    .input-box input{
    
    width:100%;
    
    height:55px;
    
    padding-left:48px;
    
    padding-right:45px;
    
    border:none;
    
    border-radius:12px;
    
    background:#f4f6fa;
    
    font-size:16px;
    
    transition:.3s;
    
    }
    
    .input-box input:focus{
    
    outline:none;
    
    background:white;
    
    border:2px solid royalblue;
    
    }
    
    .input-box .fa-user,
    .input-box .fa-lock{
    
    position:absolute;
    
    left:18px;
    
    top:18px;
    
    color:#777;
    
    }
    
    .eye{
    
    position:absolute;
    
    right:18px;
    
    top:18px;
    
    cursor:pointer;
    
    color:#777;
    
    }
    
    .remember{
    
    margin-bottom:25px;
    
    font-size:15px;
    
    }
    
    .login-btn{
    
    width:100%;
    
    height:55px;
    
    border:none;
    
    border-radius:14px;
    
    background:#2453b3;
    
    color:white;
    
    font-size:20px;
    
    font-weight:600;
    
    cursor:pointer;
    
    transition:.3s;
    
    }
    
    .login-btn:hover{
    
    background:#193b82;
    
    transform:translateY(-2px);
    
    }
    
    @keyframes fade{
    
    from{
    
    opacity:0;
    
    transform:translateY(40px);
    
    }
    
    to{
    
    opacity:1;
    
    transform:translateY(0);
    
    }
    
    }
    
    @media(max-width:480px){
    
    .login-card{
    
    padding:30px;
    
    }
    
    .logo{
    
    width:90px;
    
    }
    
    }