body{

    margin:0;
    padding:0;

    font-family:'Segoe UI',sans-serif;

    height:100vh;

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

    background:linear-gradient(135deg,#2b5876,#4e4376);

}

/* Login Box */

.login-card{

    width:330px;

    background:#fff;

    border-radius:18px;

    padding:30px;

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

    animation:fadeIn .6s;

}

/* Logo */

.logo{

    width:85px;
    height:85px;

    border-radius:50%;

    border:4px solid #007bff;

    object-fit:cover;

}

/* Heading */

h3{

    font-weight:bold;
    color:#007bff;

}

/* Textboxes */

.form-control{

    height:45px;

    border-radius:25px;

    padding-left:18px;

    border:1px solid #ddd;

}

.form-control:focus{

    border-color:#007bff;

    box-shadow:0 0 8px rgba(0,123,255,.25);

}

/* Login Button */

.login-btn{

    border-radius:25px;

    height:45px;

    font-weight:bold;

    font-size:17px;

    transition:.3s;

}

.login-btn:hover{

    transform:translateY(-2px);

}

/* Link */

a{

    font-weight:bold;

    text-decoration:none;

}

a:hover{

    text-decoration:underline;

}

/* Animation */

@keyframes fadeIn{

    from{

        opacity:0;
        transform:translateY(30px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}