:root{
    --primary:#ff6a00;
    --secondary:#ff8f3d;
    --dark:#0e0e0f;
    --card:#171717;
    --card2:#1d1d1d;
    --border:#2c2c2c;
    --text:#ffffff;
    --muted:#9b9b9b;
    --success:#34d399;
}

body{
    margin:0;
    font-family:'Montserrat',sans-serif;
    background:#0d0d0d;
    color:#fff;
}

.main_row{
    justify-content: center;
}

.login-page{
    min-height:100vh;
    background:#111;
    position:relative;
    overflow:auto;
}

.bg-circle{
    position:absolute;
    border-radius:50%;
    filter:blur(120px);
}

.bg-circle.one{
    width:450px;
    height:450px;
    background:#ff6a0035;
    top:-180px;
    left:-150px;
}

.bg-circle.two{
    width:500px;
    height:500px;
    background:#ff8f3d25;
    bottom:-220px;
    right:-180px;
}

.login-right{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:60px;
}

.login-card{
    width:100%;
    max-width:520px;
    background:#1a1a1a;
    border-radius:35px;
    padding:20px 40px;
    border:1px solid #2b2b2b;
    box-shadow:0 25px 70px rgba(0,0,0,.55);
}

.logo-box{
    text-align:center;
}

.logo-box img{
    width:130px;
}

.login-card h2 {
    text-align: center;
    margin: 10px 0 10px;
    font-size: 25px;
    font-weight: 800;
}

.login-card p{
    text-align:center;
    color:#8f8f8f;
    margin-bottom:15px;
}

.form-group label{
    color:#fff;
    margin-bottom:10px;
    font-size:13px;
    font-weight:700;
}

.input-box{
    height:62px;
    display:flex;
    align-items:center;
    border-radius:18px;
    background:#111;
    border:1px solid #303030;
    padding:0 20px;
}

.input-box i{
    color:#ff7d24;
    font-size:18px;
}

.input-box input{
    flex:1;
    background:none;
    border:none;
    color:#fff;
    padding:0 15px;
}

.input-box input:focus{
    outline:none;
}

.toggle-password{
    background:none;
    border:none;
    color:#999;
}

.login-option{
    display:flex;
    justify-content:space-between;
    margin:25px 0;
}

.login-option a{
    color:#ff8f3d;
    text-decoration:none;
}

.login-btn{
    width:100%;
    height:62px;
    border:none;
    border-radius:18px;
    background:linear-gradient(90deg,#ff6a00,#ff8f3d);
    color:#fff;
    font-size:17px;
    font-weight:700;
    transition:.35s;
}

.login-btn:hover{
    transform:translateY(-4px);
    box-shadow:0 20px 40px rgba(255,106,0,.35);
}


.register-box{
    margin-top:15px;
    text-align:center;
}

.register-btn{
    display:inline-flex;
    padding:14px 35px;
    border-radius:50px;
    background:#ff6a00;
    color:#fff;
    text-decoration:none;
    font-weight:700;
    margin-top:0px;
}

.copyright{
    margin-top:15px;
    text-align:center;
    color:#7a7a7a;
    font-size:13px;
}

@media(max-width:991px){

.login-left{
display:none;
}

.login-right{
padding:30px 15px;
}

.login-card{
padding:35px 25px;
}

}


/* =========================
   PREMIUM ANIMATION
========================= */

@keyframes floatCard{

0%{
transform:translateY(0px);
}

50%{
transform:translateY(-15px);
}

100%{
transform:translateY(0px);
}

}

@keyframes glow{

0%{
box-shadow:0 0 0 rgba(255,106,0,.15);
}

50%{
box-shadow:0 0 40px rgba(255,106,0,.35);
}

100%{
box-shadow:0 0 0 rgba(255,106,0,.15);
}

}

@keyframes rotateGlow{

0%{
transform:rotate(0deg);
}

100%{
transform:rotate(360deg);
}

}

.dashboard-preview{
animation:floatCard 6s ease-in-out infinite;
}

.coin-card:nth-child(1){
animation:floatCard 5s ease-in-out infinite;
}

.coin-card:nth-child(2){
animation:floatCard 6s ease-in-out infinite;
}

.coin-card:nth-child(3){
animation:floatCard 7s ease-in-out infinite;
}

.wallet-icon{
animation:glow 3s infinite;
}

.login-btn{
position:relative;
overflow:hidden;
}

.login-btn::before{

content:"";

position:absolute;

top:-30px;

left:-80px;

width:40px;

height:180%;

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

transform:rotate(25deg);

transition:.8s;

}

.login-btn:hover::before{

left:120%;

}

.login-card{

position:relative;

overflow:hidden;

}

.login-card::before{

content:"";

position:absolute;

width:250px;

height:250px;

background:rgba(255,106,0,.08);

border-radius:50%;

top:-120px;

right:-120px;

filter:blur(20px);

}

.login-card::after{

content:"";

position:absolute;

width:220px;

height:220px;

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

border-radius:50%;

bottom:-120px;

left:-120px;

filter:blur(15px);

}

.input-box{

transition:.35s;

}

.input-box:hover,
.input-box:focus-within{

border-color:#ff6a00;

box-shadow:0 0 25px rgba(255,106,0,.18);

}

.coin-card:hover{

transform:translateY(-6px);

border-color:#ff6a00;

transition:.35s;

}

.login-btn:hover{

transform:translateY(-4px);

}

.register-btn:hover{

background:#ff7f2b;

color:#fff;

}

.security-item:hover{

border-color:#ff6a00;

transform:translateY(-5px);

transition:.35s;

}

::-webkit-scrollbar{

width:8px;

}

::-webkit-scrollbar-thumb{

background:#ff6a00;

border-radius:20px;

}

::-webkit-scrollbar-track{

background:#111;

}

::selection{

background:#ff6a00;

color:#fff;

}

.input-box.active{
border-color:#ff6a00;
box-shadow:0 0 25px rgba(255,106,0,.25);
}

.login-left::before{
content:"";
position:absolute;
width:700px;
height:700px;
background:radial-gradient(circle,#ff6a0015,transparent 70%);
top:-250px;
left:-250px;
pointer-events:none;
}

.login-left::after{
content:"";
position:absolute;
width:500px;
height:500px;
background:radial-gradient(circle,#ff8f3d10,transparent 70%);
bottom:-220px;
right:-150px;
pointer-events:none;
}

.dashboard-preview,
.login-card,
.coin-card,
.security-item,
.register-btn,
.login-btn{
transition:.35s ease;
}

.dashboard-preview:hover{
transform:translateY(-8px);
box-shadow:0 30px 70px rgba(0,0,0,.55);
}

.logo-box img{
animation:floatCard 5s ease-in-out infinite;
}

.badge-text{
animation:glow 3s infinite;
}

.wallet-icon i{
animation:rotateGlow 12s linear infinite;
}

.form-control{
box-shadow:none!important;
}
.form-control::placeholder{
    color: #fff;
}

.form-control:focus{
box-shadow:none!important;
background:transparent!important;
color:#fff!important;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus{
-webkit-text-fill-color:#fff;
-webkit-box-shadow:0 0 0px 1000px #111 inset;
transition:background-color 9999s ease-in-out 0s;
}

.country-select-box{
    height:62px;
    background:#111;
    border:1px solid #2f2f2f;
    border-radius:18px;
    display:flex;
    align-items:center;
    padding:0 18px;
    transition:.35s;
    position:relative;
}

.country-select-box:hover,
.country-select-box:focus-within{
    border-color:#ff6a00;
    box-shadow:0 0 20px rgba(255,106,0,.18);
}

.country-select-box .left-icon{
    color:#ff7a1a;
    font-size:18px;
    margin-right:15px;
}

.country-select-box select{
    flex:1;
    background:none;
    border:none;
    color:#fff;
    font-size:15px;
    appearance:none;
    outline:none;
    cursor:pointer;
    padding-right:25px;
}

.country-select-box select option{
    background:#1b1b1b;
    color:#fff;
}

.country-select-box .right-icon{
    color:#888;
    pointer-events:none;
    position:absolute;
    right:18px;
}

.phone-input-box{
    height:62px;
    background:#111;
    border:1px solid #2f2f2f;
    border-radius:18px;
    display:flex;
    overflow:hidden;
    transition:.35s;
}

.phone-input-box:hover,
.phone-input-box:focus-within{
    border-color:#ff6a00;
    box-shadow:0 0 20px rgba(255,106,0,.18);
}

.country-prefix{
    min-width:90px;
    background:#191919;
    border-right:1px solid #2f2f2f;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#ff7a1a;
    font-weight:700;
    font-size:15px;
}

.phone-input-box input{
    flex:1;
    background:none;
    border:none;
    color:#fff;
    padding:0 18px;
    outline:none;
    font-size:15px;
}

.phone-input-box input::placeholder{
    color:#7d7d7d;
}