/*==========================================
        REGISTER PAGE
==========================================*/

:root{
    --primary:#29E9F2;
    --secondary:#7D5BFF;
    --dark:#07131f;
    --dark-light:#0d1b2a;
    --white:#ffffff;
    --text:#b7c5d5;
}

/*==========================================
BODY
==========================================*/

.register-section{

    background:linear-gradient(180deg,#07131f,#0b1629);

    padding:100px 0;

    position:relative;

    overflow:hidden;

    min-height:100vh;

}

/*==========================================
Background Glow
==========================================*/

.bg-circle{

    position:absolute;

    width:400px;

    height:400px;

    border-radius:50%;

    filter:blur(120px);

    opacity:.20;

    animation:floatGlow 8s infinite ease-in-out;

}

.bg-circle-1{

    background:#29E9F2;

    left:-150px;

    top:100px;

}

.bg-circle-2{

    background:#7D5BFF;

    right:-150px;

    bottom:100px;

}

@keyframes floatGlow{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-40px);

}

}

/*==========================================
Glass Card
==========================================*/

.register-card{

    position:relative;

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

    backdrop-filter:blur(25px);

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

    border-radius:30px;

    padding:50px;

    overflow:hidden;

    box-shadow:

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

}

/* Shine */

.register-card::before{

content:"";

position:absolute;

left:-120%;

top:0;

width:70%;

height:100%;

background:

linear-gradient(

90deg,

transparent,

rgba(255,255,255,.20),

transparent

);

transform:skewX(-25deg);

transition:1s;

}

.register-card:hover::before{

left:180%;

}

/*==========================================
Heading
==========================================*/

.register-badge{

display:inline-block;

padding:10px 25px;

border-radius:50px;

background:rgba(41,233,242,.12);

border:1px solid rgba(41,233,242,.30);

color:var(--primary);

font-weight:600;

letter-spacing:1px;

margin-bottom:20px;

}

.register-title{

font-size:42px;

font-weight:700;

color:#fff;

margin-bottom:10px;

}

.register-subtitle{

color:var(--text);

font-size:16px;

}

/*==========================================
Labels
==========================================*/

.form-label{

color:#fff;

font-weight:600;

margin-bottom:10px;

}

/*==========================================
Input Group
==========================================*/

.custom-input{

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

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

border-radius:15px;

overflow:hidden;

transition:.4s;

}

.custom-input:hover{

border-color:var(--primary);

}

.custom-input:focus-within{

border-color:var(--primary);

box-shadow:

0 0 20px rgba(41,233,242,.25);

}

/*==========================================
Icons
==========================================*/

.input-group-text{

background:transparent;

border:none;

color:var(--primary);

padding:0 18px;

font-size:18px;

}

/*==========================================
Input
==========================================*/

.form-control{

background:transparent;

border:none;

height:58px;

color:#fff;

font-size:15px;

box-shadow:none !important;

}

.form-control::placeholder{

color:#8fa5b8;

}

.form-control:focus{

background:transparent;

color:#fff;

}

/*==========================================
Wallet Button
==========================================*/

.connect-wallet{

background:linear-gradient(135deg,var(--primary),var(--secondary));

border:none;

color:#fff;

padding:0 20px;

font-weight:600;

}

.connect-wallet:hover{

opacity:.9;

}

/*==========================================
Password Eye
==========================================*/

.password-toggle{

cursor:pointer;

}

/*==========================================
Checkbox
==========================================*/

.form-check{

margin-top:10px;

}

.form-check-input{

background:transparent;

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

}

.form-check-input:checked{

background:var(--primary);

border-color:var(--primary);

}

.form-check-label{

color:var(--text);

}

.form-check-label a{

color:var(--primary);

text-decoration:none;

}

/*==========================================
Button
==========================================*/

.register-btn{

height:58px;

border:none;

border-radius:50px;

background:

linear-gradient(

135deg,

var(--primary),

var(--secondary)

);

font-size:18px;

font-weight:700;

color:#fff;

transition:.35s;

}

.register-btn:hover{

transform:translateY(-3px);

box-shadow:

0 0 20px #29E9F2,

0 0 45px #7D5BFF;

}

/*==========================================
Login Link
==========================================*/

.register-card a{

color:var(--primary);

text-decoration:none;

font-weight:600;

}

.register-card a:hover{

color:#fff;

}

/*==========================================
Errors
==========================================*/

.text-danger{

font-size:13px;

margin-top:6px;

display:block;

}

/*==========================================
Responsive
==========================================*/

@media(max-width:991px){

.register-card{

padding:35px;

}

.register-title{

font-size:34px;

}

}

@media(max-width:767px){

.register-section{

padding:60px 0;

}

.register-card{

padding:25px;

border-radius:20px;

}

.register-title{

font-size:28px;

}

.register-subtitle{

font-size:14px;

}

.form-control{

height:52px;

}

.register-btn{

height:54px;

font-size:16px;

}

}