*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:"Segoe UI",sans-serif;
}

body{

height:100vh;

display:flex;

justify-content:center;

align-items:center;

overflow:hidden;

background:
linear-gradient(rgba(15,23,42,.55),rgba(15,23,42,.75)),
url("../img/login-bg.jpg");

background-size:cover;

background-position:center;

background-attachment:fixed;

}

.overlay{

position:absolute;

inset:0;

backdrop-filter:blur(5px);

}

.login-container{

position:relative;

z-index:5;

width:100%;

display:flex;

justify-content:center;

padding:30px;

}

.login-card{

width:430px;

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

backdrop-filter:blur(20px);

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

border-radius:30px;

padding:45px;

box-shadow:

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

animation:fade .8s;

}

@keyframes fade{

from{

opacity:0;

transform:translateY(40px);

}

to{

opacity:1;

transform:none;

}

}

.logo{

text-align:center;

margin-bottom:35px;

}

.logo i{

font-size:65px;

color:#76d672;

}

.logo h1{

color:white;

font-size:34px;

font-weight:700;

margin-top:15px;

}

.logo p{

color:#ddd;

}

.input-group{

border-radius:14px;

overflow:hidden;

}

.input-group-text{

background:white;

border:none;

}

.form-control{

border:none;

height:58px;

font-size:16px;

}

.form-control:focus{

box-shadow:none;

}

.password-toggle{

background:white;

border:none;

}

.login-btn{

width:100%;

height:58px;

border:none;

border-radius:15px;

background:linear-gradient(135deg,#2ecc71,#1f9d55);

color:white;

font-size:18px;

font-weight:700;

transition:.3s;

}

.login-btn:hover{

transform:translateY(-3px);

box-shadow:0 15px 30px rgba(46,204,113,.45);

}

.alert{

border-radius:12px;

}

.footer{

margin-top:25px;

text-align:center;

color:#ddd;

font-size:14px;

}

@media(max-width:500px){

.login-card{

padding:30px 20px;

}

.logo h1{

font-size:28px;

}

}