:root{

    --gold:#D6A84F;
    --gold-light:#F0CB75;

    --black:#05070D;
    --dark:#090C13;

    --white:#ffffff;

}


/* =========================
   GLOBAL
========================= */

*{
    box-sizing:border-box;
}

html,
body{
    width:100%;
    min-height:100%;
}

body{

    margin:0;
    padding:0;

    min-height:100vh;

    background:

    radial-gradient(
        circle at top right,
        rgba(214,168,79,.12),
        transparent 35%
    ),

    radial-gradient(
        circle at bottom left,
        rgba(52,83,150,.10),
        transparent 35%
    ),

    #05070D;

    font-family:Poppins, sans-serif;

    display:flex;
    align-items:center;

}


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

.login-wrapper{

    width:100%;

    padding:40px 0;

}


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

.login-card{

    background:
        rgba(9,12,19,.72);

    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);

    border:1px solid rgba(214,168,79,.18);

    border-radius:30px;

    padding:45px 38px;

    text-align:center;

    position:relative;

    overflow:hidden;

    box-shadow:
        0 25px 70px rgba(0,0,0,.50);

}


/* =========================
   CARD GLOW
========================= */

.login-card::before{

    content:'';

    position:absolute;

    width:320px;
    height:320px;

    background:
        rgba(214,168,79,.07);

    border-radius:50%;

    filter:blur(100px);

    top:-150px;
    right:-130px;

    pointer-events:none;

}

.login-card::after{

    content:'';

    position:absolute;

    width:250px;
    height:250px;

    background:
        rgba(214,168,79,.035);

    border-radius:50%;

    filter:blur(90px);

    bottom:-130px;
    left:-130px;

    pointer-events:none;

}


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

.logo-box{

    position:relative;

    z-index:2;

}

.logo-box img{

    width:120px;

    max-width:100%;

    height:auto;

    display:block;

    margin:0 auto 18px;

}


/* =========================
   HEADING
========================= */

.login-card h1{

    color:#ffffff;

    font-size:38px;

    font-weight:700;

    margin:0 0 5px;

    line-height:1.2;

    position:relative;

    z-index:2;

}

.sub-title{

    color:var(--gold);

    letter-spacing:2px;

    font-size:15px;

    margin-bottom:25px;

    position:relative;

    z-index:2;

}


/* =========================
   SECURE BOX
========================= */

.secure-box{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    color:var(--gold-light);

    border:1px solid rgba(214,168,79,.28);

    background:
        rgba(214,168,79,.025);

    padding:10px 22px;

    border-radius:50px;

    margin-bottom:25px;

    font-size:14px;

    position:relative;

    z-index:2;

}

.secure-box i{

    color:var(--gold-light);

    font-size:16px;

}


/* =========================
   DESCRIPTION
========================= */

.description{

    color:#9DA4B3;

    line-height:1.7;

    font-size:14px;

    margin:0 auto 30px;

    max-width:410px;

    position:relative;

    z-index:2;

}


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

.login-form{

    position:relative;

    z-index:2;

}


/* =========================
   INPUT CONTAINER
========================= */

.input-group-custom{

    width:100%;

    height:62px;

    display:flex;

    align-items:center;

    margin-bottom:18px;

    background:

        rgba(255,255,255,.025);

    border:1px solid rgba(214,168,79,.16);

    border-radius:18px;

    transition:

        border-color .3s ease,
        background .3s ease,
        box-shadow .3s ease;

    overflow:hidden;

}


/* =========================
   INPUT FOCUS
========================= */

.input-group-custom:focus-within{

    border-color:
        rgba(214,168,79,.60);

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

    box-shadow:
        0 0 0 3px rgba(214,168,79,.05);

}


/* =========================
   LEFT ICON
========================= */

.input-group-custom > i{

    flex:0 0 58px;

    width:58px;

    text-align:center;

    color:var(--gold);

    font-size:18px;

}


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

.input-group-custom input{

    flex:1;

    width:100%;

    min-width:0;

    height:100%;

    border:none;

    outline:none;

    background:transparent !important;

    color:#f1f1f1 !important;

    font-size:16px;

    font-weight:400;

    padding:

        0 18px 0 8px;

    box-shadow:none !important;

    caret-color:var(--gold);

}


/* =========================
   PLACEHOLDER
========================= */

.input-group-custom input::placeholder{

    color:#727986 !important;

    opacity:1;

}


/* =========================
   REMOVE BROWSER AUTOFILL
   WHITE BACKGROUND
========================= */

.input-group-custom input:-webkit-autofill,
.input-group-custom input:-webkit-autofill:hover,
.input-group-custom input:-webkit-autofill:focus,
.input-group-custom input:-webkit-autofill:active{

    -webkit-text-fill-color:#f1f1f1 !important;

    -webkit-box-shadow:
        0 0 0 1000px #090C13 inset !important;

    box-shadow:
        0 0 0 1000px #090C13 inset !important;

    background-color:#090C13 !important;

    transition:
        background-color 9999s ease-in-out 0s;

}


/* =========================
   PASSWORD GROUP
========================= */

.password-group{

    position:relative;

}


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

.password-toggle{

    flex:0 0 54px;

    width:54px;

    height:100%;

    border:none;

    outline:none;

    background:transparent;

    color:#777E8A;

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;

    transition:.3s;

}

.password-toggle:hover{

    color:var(--gold-light);

}

.password-toggle:focus{

    outline:none;

    box-shadow:none;

}


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

.forgot-box{

    text-align:right;

    margin-top:0;

    margin-bottom:25px;

}

.forgot-box a{

    color:#858C99;

    text-decoration:none;

    font-size:14px;

    transition:.3s;

}

.forgot-box a:hover{

    color:var(--gold-light);

}


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

.wallet-btn{

    width:100%;

    min-height:58px;

    border:none;

    outline:none;

    background:

        linear-gradient(
            135deg,
            #D6A84F,
            #F0CB75
        );

    color:#05070D;

    font-weight:700;

    padding:16px 20px;

    border-radius:60px;

    font-size:18px;

    cursor:pointer;

    transition:

        transform .3s ease,
        box-shadow .3s ease;

    box-shadow:

        0 8px 25px
        rgba(214,168,79,.12);

}

.wallet-btn:hover{

    transform:translateY(-3px);

    box-shadow:

        0 12px 35px
        rgba(214,168,79,.30);

}

.wallet-btn:active{

    transform:translateY(0);

}

.wallet-btn i{

    margin-right:9px;

}


/* =========================
   ALERT
========================= */

.alert-box{

    margin-top:15px;

    position:relative;

    z-index:2;

}

.alert-box:empty{

    display:none;

}


/* =========================
   FOOTER
========================= */

.login-footer{

    margin-top:30px;

    color:#606875;

    font-size:13px;

    letter-spacing:.5px;

    position:relative;

    z-index:2;

}


/* =========================
   LOGIN LINK
========================= */

.login-link{

    margin-top:22px;

    color:#707784;

    font-size:13px;

    position:relative;

    z-index:2;

}

.login-link a{

    color:var(--gold);

    text-decoration:none;

    font-weight:600;

    margin-left:5px;

    transition:.3s;

}

.login-link a:hover{

    color:var(--gold-light);

}


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

@media(max-width:576px){

    body{

        align-items:center;

    }

    .login-wrapper{

        padding:20px 12px;

    }

    .login-card{

        padding:35px 22px;

        border-radius:25px;

    }

    .logo-box img{

        width:100px;

    }

    .login-card h1{

        font-size:30px;

    }

    .sub-title{

        font-size:13px;

        letter-spacing:1.5px;

    }

    .secure-box{

        font-size:12px;

        padding:9px 16px;

    }

    .description{

        font-size:13px;

        margin-bottom:25px;

    }

    .input-group-custom{

        height:58px;

        border-radius:16px;

    }

    .input-group-custom > i{

        flex:0 0 52px;

        width:52px;

        font-size:16px;

    }

    .input-group-custom input{

        font-size:15px;

        padding-left:7px;

        padding-right:12px;

    }

    .password-toggle{

        flex:0 0 48px;

        width:48px;

    }

    .forgot-box a{

        font-size:13px;

    }

    .wallet-btn{

        min-height:56px;

        font-size:17px;

    }

}