/* ==========================================
   NOVA CAPITAL LOGIN PAGE
========================================== */

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

body{

    background:#07162d;

    display:flex;

    justify-content:center;

    align-items:center;

    min-height:100vh;

    padding:20px;

}


/* ==========================================
   LOGIN WRAPPER
========================================== */

.login-wrapper{

    width:100%;

    max-width:450px;

}


/* ==========================================
   LOGIN CARD
========================================== */

.login-card{

    background:#ffffff;

    border-radius:18px;

    padding:35px 30px;

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

}


/* ==========================================
   LOGO AREA
========================================== */

.logo-area{

    text-align:center;

    margin-bottom:25px;

}

.logo-area img{

    width:90px;

    margin-bottom:15px;

}

.logo-area h1{

    color:#0b5ed7;

    font-size:30px;

    font-weight:800;

    letter-spacing:1px;

    margin-bottom:8px;

}

.logo-area h2{

    font-size:28px;

    color:#07162d;

    font-weight:700;

    margin-bottom:8px;

}

.logo-area p{

    font-size:14px;

    color:#666;

    line-height:1.5;

}


/* ==========================================
   ALERTS
========================================== */

.alert{

    padding:12px;

    border-radius:8px;

    margin-bottom:18px;

    font-size:14px;

    text-align:center;

}

.success{

    background:#d4edda;

    color:#155724;

}

.error{

    background:#f8d7da;

    color:#721c24;

}


/* ==========================================
   FORM GROUP
========================================== */

.form-group{

    margin-bottom:18px;

}

.form-group > label{

    display:block;

    font-size:14px;

    font-weight:600;

    margin-bottom:8px;

    color:#333;

}


/* ==========================================
   NORMAL INPUT BOX
========================================== */

.input-box{

    display:flex;

    align-items:center;

    border:1px solid #ddd;

    border-radius:10px;

    padding:0 12px;

    height:50px;

    background:#fff;

    transition:.25s ease;

}

.input-box:focus-within{

    border-color:#0b5ed7;

    box-shadow:0 0 0 3px rgba(11,94,215,.10);

}

.input-box > i{

    color:#0b5ed7;

    font-size:18px;

    margin-right:10px;

    flex-shrink:0;

}

.input-box input{

    border:none;

    outline:none;

    width:100%;

    height:100%;

    font-size:15px;

    background:transparent;

    color:#222;

}

.input-box input::placeholder{

    color:#999;

}


/* ==========================================
   PASSWORD LIGHT CONTAINER
========================================== */

.password-light-box{

    position:relative;

    width:100%;

}


/* ==========================================
   PASSWORD INPUT
========================================== */

.password-input-box{

    position:relative;

    z-index:5;

}


/* ==========================================
   PASSWORD EYE BUTTON
========================================== */

.password-eye{

    border:none;

    background:transparent;

    color:#777;

    width:42px;

    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    font-size:17px;

    position:relative;

    z-index:10;

    flex-shrink:0;

    transition:.25s ease;

}

.password-eye:hover{

    color:#0b5ed7;

}

.password-eye:focus{

    outline:none;

}


/* ==========================================
   LIGHT BEAM
========================================== */

.light-beam{

    position:absolute;

    left:-25px;

    top:50%;

    width:0;

    height:55px;

    transform:translateY(-50%);

    opacity:0;

    pointer-events:none;

    z-index:2;

    background:linear-gradient(
        90deg,
        rgba(255,255,180,0),
        rgba(255,255,100,.75),
        rgba(255,255,210,1)
    );

    border-radius:50%;

    filter:blur(6px);

    box-shadow:
        0 0 10px rgba(255,255,100,.9),
        0 0 25px rgba(255,255,100,.7),
        0 0 45px rgba(255,255,100,.45);

    transition:

        width .35s ease,

        opacity .25s ease;

}


/* ==========================================
   LIGHT ON
========================================== */

.light-beam.light-on{

    width:190px;

    opacity:1;

}


/* ==========================================
   PASSWORD INPUT ABOVE LIGHT
========================================== */

.password-input-box{

    position:relative;

    z-index:5;

}
/* ==========================================
   LIGHT ON
========================================== */

.light-beam.light-on{

    width:180px;

    opacity:1;

}


/* ==========================================
   EYE ACTIVE
========================================== */

.password-input-box:focus-within{

    border-color:#0b5ed7;

}


/* ==========================================
   FORGOT PASSWORD
========================================== */

.forgot-link{

    text-align:right;

    margin-bottom:20px;

}

.forgot-link a{

    color:#0b5ed7;

    text-decoration:none;

    font-size:14px;

    font-weight:600;

}

.forgot-link a:hover{

    text-decoration:underline;

}


/* ==========================================
   LOGIN BUTTON
========================================== */

.login-btn{

    width:100%;

    height:52px;

    border:none;

    border-radius:10px;

    background:#0b5ed7;

    color:#fff;

    font-size:16px;

    font-weight:700;

    cursor:pointer;

    transition:.3s ease;

}

.login-btn i{

    margin-right:7px;

}

.login-btn:hover{

    background:#084db3;

    transform:translateY(-1px);

    box-shadow:0 8px 18px rgba(11,94,215,.25);

}


/* ==========================================
   REGISTER LINK
========================================== */

.register-link{

    text-align:center;

    margin-top:22px;

}

.register-link p{

    color:#666;

    font-size:14px;

}

.register-link a{

    color:#0b5ed7;

    text-decoration:none;

    font-weight:700;

}

.register-link a:hover{

    text-decoration:underline;

}


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

@media(max-width:500px){

    body{

        padding:15px;

    }

    .login-card{

        padding:30px 20px;

        border-radius:16px;

    }

    .logo-area h1{

        font-size:26px;

    }

    .logo-area h2{

        font-size:24px;

    }

    .light-beam.light-on{

        width:130px;

    }

}