/*
|--------------------------------------------------------------------------
| WolfConnect Authentication Theme
| Mr. Wolf Nigeria Limited
|--------------------------------------------------------------------------
*/

/*
|--------------------------------------------------------------------------
| Auth Layout
|--------------------------------------------------------------------------
*/

.auth-wrapper{

    min-height:100vh;

    display:flex;

    overflow:hidden;

    background:#0B0B0B;

}

.auth-left{

    flex:1;

    background:
    linear-gradient(
        135deg,
        #0B0B0B 0%,
        #151515 50%,
        #1E1E1E 100%
    );

    color:#FFFFFF;

    display:flex;

    flex-direction:column;

    justify-content:center;

    padding:60px;

    position:relative;

}

.auth-left::before{

    content:'';

    position:absolute;

    top:-200px;

    right:-200px;

    width:500px;

    height:500px;

    border-radius:50%;

    background:
    radial-gradient(
        rgba(212,175,55,.15),
        transparent 70%
    );

}

.auth-right{

    width:500px;

    min-width:500px;

    background:#FFFFFF;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:40px;

}

/*
|--------------------------------------------------------------------------
| Branding
|--------------------------------------------------------------------------
*/

.brand-logo{

    width:220px;

    max-width:100%;

    margin-bottom:30px;

}

.brand-title{

    font-size:3rem;

    font-weight:800;

    color:#FFFFFF;

    margin-bottom:10px;

}

.brand-subtitle{

    font-size:1.15rem;

    color:#C0C0C0;

    margin-bottom:25px;

    line-height:1.8;

}

.brand-message{

    font-size:1rem;

    color:#E5E5E5;

    max-width:650px;

    line-height:1.8;

}

/*
|--------------------------------------------------------------------------
| Quote Card
|--------------------------------------------------------------------------
*/

.quote-card{

    margin-top:40px;

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

    border:1px solid
    rgba(
        212,
        175,
        55,
        .25
    );

    border-radius:20px;

    padding:25px;

    backdrop-filter:blur(12px);

}

.quote-icon{

    color:#D4AF37;

    font-size:28px;

    margin-bottom:15px;

}

.quote-text{

    color:#FFFFFF;

    font-size:1.05rem;

    line-height:1.8;

    margin-bottom:0;

}

/*
|--------------------------------------------------------------------------
| Values
|--------------------------------------------------------------------------
*/

.company-values{

    margin-top:35px;

}

.company-values h6{

    color:#D4AF37;

    margin-bottom:15px;

    font-weight:700;

}

.company-values ul{

    list-style:none;

    padding:0;

    margin:0;

}

.company-values li{

    margin-bottom:12px;

    color:#F5F5F5;

}

.company-values li i{

    color:#D4AF37;

    margin-right:10px;

}

/*
|--------------------------------------------------------------------------
| Login Card
|--------------------------------------------------------------------------
*/

.login-card{

    width:100%;

    max-width:420px;

    border:none;

    border-radius:25px;

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

    overflow:hidden;

}

.login-card .card-body{

    padding:40px;

}

.login-title{

    font-size:2rem;

    font-weight:700;

    color:#151515;

    margin-bottom:8px;

}

.login-subtitle{

    color:#6c757d;

    margin-bottom:30px;

}

/*
|--------------------------------------------------------------------------
| Forms
|--------------------------------------------------------------------------
*/

.form-label{

    font-weight:600;

    color:#333;

    margin-bottom:8px;

}

.form-control{

    height:55px;

    border-radius:14px;

    border:1px solid #ddd;

    padding-left:15px;

}

.form-control:focus{

    border-color:#D4AF37;

    box-shadow:
    0 0 0 .2rem
    rgba(
        212,
        175,
        55,
        .20
    );

}

/*
|--------------------------------------------------------------------------
| Login Button
|--------------------------------------------------------------------------
*/

.btn-access{

    height:55px;

    border:none;

    border-radius:14px;

    background:#D4AF37;

    color:#000;

    font-weight:700;

    transition:.3s;

}

.btn-access:hover{

    background:#F5D76E;

    transform:translateY(-2px);

}

/*
|--------------------------------------------------------------------------
| Links
|--------------------------------------------------------------------------
*/

.auth-link{

    color:#B8860B;

    font-weight:600;

}

.auth-link:hover{

    color:#D4AF37;

}

/*
|--------------------------------------------------------------------------
| Footer
|--------------------------------------------------------------------------
*/

.auth-footer{

    position:absolute;

    bottom:30px;

    left:60px;

    color:#C0C0C0;

    font-size:14px;

}

.auth-footer strong{

    color:#D4AF37;

}

/*
|--------------------------------------------------------------------------
| Version
|--------------------------------------------------------------------------
*/

.version-badge{

    position:absolute;

    top:25px;

    right:25px;

    background:
    rgba(
        212,
        175,
        55,
        .15
    );

    color:#D4AF37;

    padding:8px 14px;

    border-radius:30px;

    font-size:13px;

    font-weight:600;

}

/*
|--------------------------------------------------------------------------
| Alert
|--------------------------------------------------------------------------
*/

.alert{

    border:none;

    border-radius:14px;

}

/*
|--------------------------------------------------------------------------
| Responsive
|--------------------------------------------------------------------------
*/

@media(max-width:991px){

    .auth-wrapper{

        flex-direction:column;

        overflow:auto;

    }

    .auth-left{

        min-height:auto;

        padding:40px 25px;

    }

    .auth-right{

        width:100%;

        min-width:100%;

        padding:25px;

    }

    .brand-title{

        font-size:2rem;

    }

    .brand-subtitle{

        font-size:1rem;

    }

    .auth-footer{

        position:relative;

        left:auto;

        bottom:auto;

        margin-top:30px;

    }

}

@media(max-width:576px){

    .login-card .card-body{

        padding:25px;

    }

    .brand-logo{

        width:160px;

    }

}