/*==================================================
    GOOGLE FONT
==================================================*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/*==================================================
    RESET
==================================================*/

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

html{
    font-size:16px;
}

body{
    background:#0b1120;
    color:#fff;
    overflow-x:hidden;
    min-height:100vh;
}

.background-icons{
    position:fixed;
    inset:0;
    overflow:hidden;
    pointer-events:none;
    z-index:1;
}

.icon{

    position:absolute;

    top:-200px;

    color:rgba(196,155,58,.05);

    opacity:0;

    will-change:transform,opacity;

    animation:fall linear infinite;

    animation-fill-mode:both;

}

.bitcoin{

    left:8%;

    font-size:42px;

    animation-duration:12s;

    animation-delay:0s;

}

.ethereum{

    left:20%;

    font-size:38px;

    animation-duration:15s;

    animation-delay:2s;

}

.chart1{

    left:35%;

    font-size:34px;

    animation-duration:14s;

    animation-delay:5s;

}

.chart2{

    left:52%;

    font-size:36px;

    animation-duration:13s;

    animation-delay:1s;

}

.coins1{

    left:65%;

    font-size:40px;

    animation-duration:16s;

    animation-delay:3s;

}

.coins2{

    left:78%;

    font-size:34px;

    animation-duration:12s;

    animation-delay:6s;

}

.wallet{

    left:90%;

    font-size:36px;

    animation-duration:15s;

    animation-delay:4s;

}

.trend1{

    left:15%;

    font-size:30px;

    animation-duration:18s;

    animation-delay:7s;

}

.trend2{

    left:45%;

    font-size:32px;

    animation-duration:14s;

    animation-delay:8s;

}

.dollar{

    left:58%;

    font-size:34px;

    animation-duration:16s;

    animation-delay:9s;

}

.shield{

    left:72%;

    font-size:36px;

    animation-duration:17s;

    animation-delay:10s;

}

.money{

    left:28%;

    font-size:40px;

    animation-duration:13s;

    animation-delay:11s;

}

.pie{

    left:84%;

    font-size:30px;

    animation-duration:15s;

    animation-delay:12s;

}

@keyframes fall{

    0%{

        transform:translateY(0) rotate(0deg);

        opacity:0;

    }

    8%{

        opacity:.06;

    }

    50%{

        opacity:.08;

    }

    92%{

        opacity:.06;

    }

    100%{

        transform:translateY(calc(100vh + 250px)) rotate(360deg);

        opacity:0;

    }

}
/*==================================================
    LAYOUT
==================================================*/

.register-container{

    position:relative;

    z-index:5;

    width:100%;

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:40px 20px;

}

.register-box{

    width:100%;

    max-width:520px;

       background:#151c2f;

    backdrop-filter:blur(20px);

     border:1px solid #2d3755;

    border-radius:22px;

    padding:45px;

    box-shadow:0 20px 60px rgba(0,0,0,.45);

}

.register-header{

    text-align:center;

    margin-bottom:35px;

}

.register-header h1{

    font-size:34px;

    font-weight:800;

     color:#ffffff;

    margin-bottom:10px;

}

.register-header p{

    color:#aab4c8;

    line-height:1.7;

}

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

.register-form{

    display:flex;

    flex-direction:column;

    gap:22px;

}

.input-group{

    display:flex;

    flex-direction:column;

    gap:8px;

}

.input-group label{

    font-size:14px;

    font-weight:600;

}

.input-field{

    display:flex;

    align-items:center;

    

    border-radius:14px;

    overflow:hidden;

   

    background:#0f172a;

    border:1px solid #2d3755;

    transition:.3s;

}

.input-field:focus-within{

    border-color:#c49b3a;

    box-shadow:0 0 0 4px rgba(196,155,58,.15);

}

.input-field i{

    width:55px;

    text-align:center;

    color:#9aa4ba;

}

.input-field input,

.input-field select{

    flex:1;

    border:none;

    outline:none;

    padding:16px 15px;

    font-size:15px;

   background:transparent;

    color:#ffffff;

}

.input-field select{

    cursor:pointer;

}
input-field input::placeholder{

    color:#7d879c;

}

.password-field button{

    border:none;

    background:none;

    cursor:pointer;

    padding:0 18px;

    color:#666;

    font-size:18px;

}

/*==================================================
    TERMS
==================================================*/

.terms{

    display:flex;

    align-items:flex-start;

    gap:12px;

    font-size:14px;

   

    color:#aab4c8;

    line-height:1.6;

}

.terms input{

    width:18px;

    height:18px;

    margin-top:3px;

    accent-color:#c49b3a;

}

.terms a{

    color:#c49b3a;

    font-weight:600;

    text-decoration:none;

}

.terms a:hover{

    text-decoration:underline;

}

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

.register-btn{

    border:none;

   background:#c49b3a;

    color:#111;

    padding:18px;

    border-radius:14px;

    cursor:pointer;

    font-size:16px;

    font-weight:700;

    transition:.35s;

}

.register-btn:hover{

  background:#d9b35b;

    transform:translateY(-3px);

}

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

.login-link{

    text-align:center;

    font-size:15px;

     color:#aab4c8;

}

.login-link a{

    color:#c49b3a;

    font-weight:700;

    text-decoration:none;

    transition:.3s;

}

.login-link a:hover{

    color:#e4c36a;

    text-decoration:underline;

}

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

@media(max-width:768px){

    .register-box{

        padding:30px 22px;

    }

    .register-header h1{

        font-size:28px;

    }

    .icon{

        font-size:28px;

    }

    input,
    select{

        font-size:16px;

    }

}


/* Prevent iPhone Safari from zooming on form fields */
input,
textarea,
select,
button {
    font-size: 16px;
}