/*==========================
        LOGIN PAGE
==========================*/

.main-form-page{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:35px 18px;
    background:
    radial-gradient(circle at top left,#471800 0%,transparent 35%),
    radial-gradient(circle at bottom right,#003d16 0%,transparent 35%),
    #050505;
}

@media (max-width:450px) {
    .main-form-page{
        padding:20px 10px;
    }
    .sub-title{
        padding:20px 10px;
    }
}

.main-stars-img{
    width:100%;
}

.form-set{
    width:100%;
}

.new-setting-col{
    width:100%;
}

/*======================
MAIN CARD
======================*/

.sub-title{

    position:relative;

    background:linear-gradient(145deg,
    rgba(255,255,255,.03),
    rgba(255,255,255,.015));

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

    border-radius:34px;

    padding:35px 28px;

    overflow:hidden;

    backdrop-filter:blur(16px);

    box-shadow:

    inset 0 1px rgba(255,255,255,.05),

    0 25px 60px rgba(0,0,0,.55);

    transition:.45s;
    width:100%;
    /* max-width: 450px; */

}

.sub-title:hover{

    transform:translateY(-8px);

    box-shadow:

    0 35px 80px rgba(0,0,0,.65),

    0 0 45px rgba(255,170,0,.12);

}

.sub-title:before{

    content:'';

    position:absolute;

    width:250px;

    height:250px;

    background:radial-gradient(#ff7b00,transparent);

    top:-150px;

    left:-120px;

    opacity:.14;

}

.sub-title:after{

    content:'';

    position:absolute;

    width:240px;

    height:240px;

    background:radial-gradient(#00ff73,transparent);

    right:-120px;

    bottom:-150px;

    opacity:.12;

}

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

.login-heading{

    display:flex;

    justify-content:center;

    margin-bottom:20px;

}

.login-heading img{

    width:95px;

    transition:.45s;

    filter:drop-shadow(0 12px 22px rgba(255,183,0,.4));

}

.login-heading img:hover{

    transform:rotate(-8deg) scale(1.08);

}

/*======================
TITLE
======================*/

.guru-logins{

    color:#fff;

    font-size:32px;

    font-weight:700;

    margin-top:12px;

    letter-spacing:.5px;

}

/*======================
CONNECT BUTTON
======================*/

#openWalletModal{

    width:100%;

    height:58px;

    border:none;

    border-radius:18px;

    font-size:17px;

    font-weight:700;

    color:#111;

    background:

    linear-gradient(90deg,#ff8a00,#d6ff00);

    transition:.45s;

    box-shadow:

    0 12px 35px rgba(255,170,0,.3);

}

#openWalletModal:hover{

    transform:translateY(-4px);

    box-shadow:

    0 20px 45px rgba(180,255,0,.3);

}

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

/* .user-field{

    margin-top:28px;

} */

.user-field .form-control {
    /* height: 64px; */
    border-radius: 10px !important;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    color: #fff;
    font-size: 15px;
    /* padding-left: 22px; */
    transition: .4s;
    box-shadow: ;
    border-radius: 17px;
    padding: 23px 11px;
}

.user-field .form-control:focus{

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

    border-color:#ffb100;

    box-shadow:

    0 0 25px rgba(255,183,0,.18);

    color:#fff;

}

.user-field .form-control::placeholder{

    color:#8b8b8b;

}

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

.login-btn{

    margin-top:35px;

}

.login-btn button{

    width:100%;

    height:60px;

    border:none;

    border-radius:20px;

    color:#111;

    font-size:18px;

    font-weight:700;

    background:

    linear-gradient(90deg,#ff8b00,#d3ff00);

    transition:.45s;

    position:relative;

    overflow:hidden;

    box-shadow:

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

}

.login-btn button:before{

    content:'';

    position:absolute;

    left:-120%;

    top:0;

    width:100%;

    height:100%;

    background:

    linear-gradient(90deg,

    transparent,

    rgba(255,255,255,.35),

    transparent);

    transition:.7s;

}

.login-btn button:hover:before{

    left:120%;

}

.login-btn button:hover{

    transform:translateY(-5px);

    box-shadow:

    0 25px 45px rgba(180,255,0,.28);

}

/*======================
BOTTOM TEXT
======================*/

.create-acc{

    margin-top:28px;

}

.create-acc p{

    color:#a9a9a9;

}

.create-acc a{

    color:#ffc400;

    text-decoration:none;

    font-weight:700;

}

.create-acc a:hover{

    color:#d3ff00;

}

/*======================
MODAL
======================*/

.modal-content{

    background:#121212;

    border-radius:25px;

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

    color:#fff;

    box-shadow:

    0 25px 60px rgba(0,0,0,.6);

}

.modal-content h5{

    font-weight:700;

    margin-bottom:25px;

}

.modal-content button{

    width:70px;

    height:70px;

    border-radius:20px;

    border:none;

    background:

    rgba(255,255,255,.06);

    transition:.4s;

}

.modal-content button:hover{

    transform:translateY(-6px);

    background:linear-gradient(135deg,#ff9000,#bfff00);

}

.modal-content img{

    width:28px;

}

/*======================
MESSAGE
======================*/

.text-danger{

    color:#ff6b6b!important;

    font-size:13px;

}

/*======================
AOS
======================*/

.sub-title{

    animation:fadeUp .8s ease;

}

@keyframes fadeUp{

0%{

opacity:0;

transform:translateY(40px);

}

100%{

opacity:1;

transform:translateY(0);

}

}