/* =====================================================
   APEX CREDIT GROUP
   GLOBAL STYLESHEET
===================================================== */

:root{

    --primary:#0B1F3A;
    --secondary:#1E40AF;
    --accent:#10B981;
    --danger:#EF4444;
    --white:#FFFFFF;
    --light:#F3F4F6;
    --border:#D1D5DB;
    --text:#1F2937;

    --radius:16px;

    --shadow:
        0 20px 40px rgba(0,0,0,.12);

    --transition:.3s ease;

}

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

html{
    scroll-behavior:smooth;
}

body{

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

    background:linear-gradient(
        135deg,
        #081120,
        #0B1F3A,
        #1E3A8A
    );

    color:var(--text);

    min-height:100vh;

    overflow-x:hidden;

}

img{
    max-width:100%;
}

a{

    text-decoration:none;

    transition:var(--transition);

}

button{

    cursor:pointer;

    border:none;

    transition:var(--transition);

}

input{

    outline:none;

    border:none;

    font-family:inherit;

}

.hidden{
    display:none !important;
}

/*==========================
    Animated Background
===========================*/

.background{

    position:fixed;

    inset:0;

    overflow:hidden;

    z-index:-1;

}

.circle{

    position:absolute;

    border-radius:50%;

    filter:blur(70px);

    animation:float 12s infinite alternate;

}

.one{

    width:350px;

    height:350px;

    background:#2563EB;

    top:-100px;

    left:-100px;

}

.two{

    width:300px;

    height:300px;

    background:#10B981;

    right:-80px;

    bottom:-80px;

}

@keyframes float{

    from{

        transform:translateY(0px);

    }

    to{

        transform:translateY(60px);

    }

}

/*==========================
    Layout
===========================*/

.login-wrapper{

    width:100%;

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:40px;

}

/*==========================
    Login Card
===========================*/

.login-card{

    width:430px;

    background:rgba(255,255,255,.10);

    backdrop-filter:blur(25px);

    border:1px solid rgba(255,255,255,.20);

    border-radius:var(--radius);

    padding:45px;

    box-shadow:var(--shadow);

}

/*==========================
    Logo
===========================*/

.logo{

    text-align:center;

    margin-bottom:35px;

}

.logo i{

    font-size:65px;

    color:white;

    margin-bottom:15px;

}

.logo h1{

    color:white;

    font-size:30px;

    margin-bottom:8px;

}

.logo p{

    color:#D1D5DB;

}

/*==========================
    Forms
===========================*/

.input-group{

    margin-bottom:22px;

}

.input-group label{

    display:block;

    color:white;

    margin-bottom:8px;

    font-weight:500;

}

.input-group input{

    width:100%;

    height:55px;

    border-radius:12px;

    padding:0 18px;

    font-size:15px;

    background:white;

}

.password-box{

    position:relative;

}

.password-box i{

    position:absolute;

    right:20px;

    top:18px;

    cursor:pointer;

    color:#6B7280;

}

/*==========================
    Remember Me
===========================*/

.options{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:25px;

    color:white;

    font-size:14px;

}

.options a{

    color:#BFDBFE;

}

.options a:hover{

    color:white;

}

/*==========================
    Button
===========================*/

button{

    width:100%;

    height:56px;

    border-radius:12px;

    background:#2563EB;

    color:white;

    font-size:17px;

    font-weight:600;

}

button:hover{

    background:#1D4ED8;

    transform:translateY(-2px);

}

/*==========================
    Loader
===========================*/

.loader{

    width:22px;

    height:22px;

    border:3px solid rgba(255,255,255,.30);

    border-top:3px solid white;

    border-radius:50%;

    animation:spin .8s linear infinite;

    display:inline-block;

}

@keyframes spin{

    to{

        transform:rotate(360deg);

    }

}

/*==========================
    Message
===========================*/

#message{

    margin-top:18px;

    text-align:center;

    color:white;

    min-height:22px;

}

/*==========================
    Bottom Links
===========================*/

.bottom{

    margin-top:28px;

    text-align:center;

    color:white;

}

.bottom a{

    color:#93C5FD;

    font-weight:600;

}

.bottom a:hover{

    color:white;

}

/*==========================
    Mobile
===========================*/

@media(max-width:768px){

.login-card{

    width:100%;

    padding:30px;

}

.login-wrapper{

    padding:20px;

}

.logo h1{

    font-size:24px;

}

}