@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{

    font-family:'Inter',sans-serif;

    background:#F5F5F7;

    color:#1D1D1F;

    display:flex;

    justify-content:center;

    align-items:center;

    height:100vh;
}

/* Center */

.container{

    width:100%;

    display:flex;

    justify-content:center;

    align-items:center;
}

/* Card */

.login-card{

    width:470px;

    background:#FFFFFF;

    border-radius:24px;

    padding:55px;

    border:1px solid #E5E7EB;

    box-shadow:
        0 8px 30px rgba(0,0,0,.06);

    text-align:center;
}

/* Logo */

.logo{

    width:70px;

    height:70px;

    margin:auto;

    margin-bottom:28px;

    border-radius:18px;

    background:#EEF4FF;

    color:#0066CC;

    font-size:24px;

    font-weight:700;

    display:flex;

    align-items:center;

    justify-content:center;
}

/* Heading */

h1{

    font-size:36px;

    font-weight:600;

    color:#1D1D1F;
}

.subtitle{

    margin-top:12px;

    margin-bottom:40px;

    color:#6E6E73;

    font-size:18px;
}

/* Inputs */

input{

    width:100%;

    height:58px;

    margin-bottom:18px;

    padding:0 20px;

    font-size:16px;

    border-radius:14px;

    border:1px solid #CFCFD3;

    outline:none;

    transition:.25s;

    background:#FFFFFF;
}

input:focus{

    border-color:#0071E3;

    box-shadow:0 0 0 4px rgba(0,113,227,.12);
}

/* Button */

button{

    width:100%;

    height:56px;

    margin-top:8px;

    border:none;

    border-radius:14px;

    background:#0071E3;

    color:white;

    font-size:17px;

    font-weight:600;

    cursor:pointer;

    transition:.3s;
}

button:hover{

    background:#0062CC;
}

/* Forgot */

.forgot{

    display:inline-block;

    margin-top:24px;

    color:#0071E3;

    text-decoration:none;

    font-size:15px;
}

.forgot:hover{

    text-decoration:underline;
}

/* Divider */

.divider{

    height:1px;

    background:#ECECEC;

    margin:35px 0;
}

/* Footer */

.footer{

    color:#6E6E73;

    font-size:14px;
}

.footer strong{

    color:#1D1D1F;
}

/* Mobile */

@media(max-width:600px){

.login-card{

    width:92%;

    padding:35px 25px;
}

h1{

    font-size:30px;
}

.subtitle{

    font-size:16px;
}

}
/* ---------- Page Footer ---------- */

.page-footer{

    position:fixed;

    bottom:22px;

    left:40px;

    right:40px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    font-size:14px;

    color:#6E6E73;
}

.footer-center{

    display:flex;

    gap:18px;

    align-items:center;
}

.footer-center a{

    color:#0066CC;

    text-decoration:none;

    font-weight:500;
}

.footer-center a:hover{

    text-decoration:underline;
}

.footer-right{

    font-weight:500;
}

@media(max-width:768px){

body{
    margin:0;
    min-height:100vh;
    background:#f5f5f7;
    font-family:'Inter',sans-serif;
    display:flex;
    flex-direction:column;
}

.container{
    flex:1;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:60px 20px;
}

.page-footer{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:20px 40px;
    font-size:14px;
    color:#6e6e73;
    border-top:1px solid #ececec;
    background:#f5f5f7;
}

@media(max-width:768px){
    .page-footer{
        flex-direction:column;
        gap:12px;
        text-align:center;
    }
}