.login-body{

    position:relative;

    width:100vw;

    height:100vh;

    overflow:hidden;

    display:flex;

    justify-content:center;

    align-items:center;

    background:
    linear-gradient(
        135deg,
        #050505,
        #101010
    );

}

.login-body::before{

    content:'';

    position:absolute;

    width:700px;
    height:700px;

    left:-250px;
    top:-150px;

    border-radius:50%;

    background:

    rgba(0,217,255,.10);

    filter:blur(250px);

}

.login-body::after{

    content:'';

    position:absolute;

    width:600px;
    height:600px;

    right:-200px;
    bottom:-150px;

    border-radius:50%;

    background:

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

    filter:blur(220px);

}

.login-car{

    position:absolute;

    top:50%;

    right:0;

    transform:translateY(-50%);

    z-index:1;

    pointer-events:none;

}

.login-car img{

    width:1200px;

    opacity:.10;

    filter:

        blur(2px)

        drop-shadow(0 0 50px rgba(0,217,255,.15));

    animation:carFloat 12s ease-in-out infinite;

}

.login-car::after{

    content:'';

    position:absolute;

    width:600px;

    height:600px;

    background:

    rgba(0,217,255,.08);

    filter:blur(180px);

}

.login-container{

    position:relative;

    z-index:10;

    display:flex;

    justify-content:center;

    align-items:center;

    width:100%;

    min-height:100vh;

}


.login-card{

	position:relative;
	
	z-index:20;
	
    width:600px;
	
	max-width:90%;

    padding:70px;

    border-radius:40px;

    background:

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

    border:

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

    backdrop-filter:blur(25px);
	
	box-shadow: 0 0 60px rgba(0,217,255,.08);
	
	animation:fadeLogin 1.2s;

}


.login-logo{

    text-align:center;

}


.login-logo img{

    width:220px;
	animation:logoFloat 5s ease-in-out infinite;

}
.login-card::before{

    content:'';

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:2px;

    background:

    linear-gradient(
        90deg,
        transparent,
        rgba(0,217,255,.9),
        transparent
    );

} 


.login-subtitle{

    display:block;

    text-align:center;

    color:var(--primary);

    letter-spacing:4px;

    margin-top:30px;

}


.login-card h1{

    margin-top:15px;

    text-align:center;

}


.login-card p{

    text-align:center;

    color:#999;

    margin-bottom:40px;
}

.login-links{

    margin-top:15px;

    text-align:right;

}


.login-links a{

    color:#888;

    text-decoration:none;

    transition:.3s;

}


.login-links a:hover{

    color:var(--primary);

}


.login-input-group{

    height:65px;

    display:flex;

    align-items:center;

    gap:15px;

    padding:0 25px;

    margin-bottom:20px;

    border-radius:20px;

    background:

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

}


.login-input-group i{

    color:var(--primary);
	transition:.4s;

}

.login-input-group:hover{

    border:

    1px solid rgba(0,217,255,.25);

}

.login-input-group input{

    flex:1;

    background:none;

    border:none;

    outline:none;

    color:white;

}


.remember-row{

    margin:30px 0;

}


.login-btn{

    width:100%;
    height:65px;

    border:none;

    border-radius:20px;

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

    border:
    1px solid rgba(0,217,255,.15);

    color:white;

    font-size:15px;

    font-weight:700;

    letter-spacing:3px;

    text-transform:uppercase;

    cursor:pointer;

    transition:.4s;

}
.login-btn:hover{

    border-color:
    rgba(0,217,255,.5);

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

    color:var(--primary);

    box-shadow:
    0 0 30px rgba(0,217,255,.2);

    transform:translateY(-2px);

}

.password-toggle{

    cursor:pointer;

    color:#777;

    transition:.3s;

}

.password-toggle:hover{

    color:var(--primary);

}

@keyframes logoFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

    100%{

        transform:translateY(0);

    }

}

@keyframes fadeLogin{

    from{

        opacity:0;

        transform:

        translateY(40px);

    }

    to{

        opacity:1;

        transform:

        translateY(0);

    }

}
@keyframes glowLeft{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-40px);

    }

    100%{

        transform:translateY(0);

    }

}



@keyframes glowRight{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(30px);

    }

    100%{

        transform:translateY(0);

    }

}

@keyframes carFloat{

    0%{

        transform:

        translateY(0);

    }

    50%{

        transform:

        translateY(-20px);

    }

    100%{

        transform:

        translateY(0);

    }

}