*{
    font-family:'Inter',sans-serif;
}


body{

    margin:0;

    min-height:100vh;

    background:
        linear-gradient(
            135deg,
            #1565C0,
            #6A1B9A
        );

}


/* CONTAINER */

.login-page{

    display:flex;

    justify-content:center;

    align-items:center;

    min-height:100vh;

    padding:40px;

}


/* CARD */

.login-card{

    width:100%;

    max-width:600px;

    background:#ffffff;

    border-radius:36px;

    padding:65px;

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

}


/* LOGO */

.login-logo{

    width:280px;

    max-width:100%;

    height:auto;

}


/* TITULOS */

.login-card h2{

    color:#0B2F6B;

    font-size:42px;

    font-weight:900;

    letter-spacing:1px;

}


.login-card h4{

    color:#1F2937;

    font-size:28px;

    font-weight:700;

}


/* TEXTO */

.login-card p{

    color:#6b7280;

    font-size:18px;

    line-height:1.5;

}


/* LABEL */

.form-label{

    font-weight:600;

    color:#374151;

}


/* INPUT */

.form-control{

    height:58px;

    border-radius:18px;

    border:1px solid #d9dde5;

    padding-left:20px;

    font-size:18px;

}


.form-control:focus{

    border-color:#1565C0;

    box-shadow:
        0 0 0 .18rem rgba(21,101,192,.15);

}


/* INPUT ICON */

.input-group-text{

    background:#f8fafc;

    border:1px solid #d9dde5;

    border-radius:18px 0 0 18px;

}


/* CHECKBOX */

.form-check-input:checked{

    background-color:#1565C0;

    border-color:#1565C0;

}


/* BOTAO */

.btn-login{

    height:58px;

    border-radius:18px;

    font-size:17px;

    font-weight:700;

    color:white !important;

    border:none !important;

    background:
        linear-gradient(
            90deg,
            #1565C0,
            #6A1B9A
        ) !important;

    box-shadow:

        0 12px 30px rgba(21,101,192,.35);

    transition:.3s;

}


.btn-login:hover{

    transform:translateY(-3px);

    box-shadow:

        0 18px 35px rgba(0,0,0,.25);

}


/* ALERTAS */

.alert{

    border-radius:16px;

}


/* RODAPE */

.login-card small{

    color:#6b7280;

}


/* MOBILE */

@media(max-width:768px){

    .login-card{

        padding:35px;

    }


    .login-logo{

        width:220px;

    }

}