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

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

body{

height:100vh;

overflow:hidden;

background:
linear-gradient(rgba(5,25,60,.82),rgba(5,25,60,.82)),
url("../images/bannernew.png");

background-size:cover;

background-position:center;

display:flex;

justify-content:center;

align-items:center;

}

.login-page{

width:100%;

display:flex;

justify-content:center;

align-items:center;

padding:20px;

}

.login-card{

width:430px;

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

backdrop-filter:blur(20px);

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

border-radius:28px;

padding:45px;

box-shadow:0 25px 60px rgba(0,0,0,.30);

text-align:center;

}

.logo{

width:90px;

margin-bottom:20px;

}

.login-card h2{

color:white;

font-weight:700;

margin-bottom:5px;

}

.login-card p{

color:#d7d7d7;

margin-bottom:35px;

}

.input-group-custom{

position:relative;

margin-bottom:22px;

}

.input-group-custom i{

position:absolute;

left:18px;

top:50%;

transform:translateY(-50%);

color:#8fb8ff;

font-size:18px;

}

.input-group-custom input{

width:100%;

height:56px;

padding-left:50px;

border:none;

border-radius:14px;

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

color:white;

outline:none;

transition:.3s;

}

.input-group-custom input::placeholder{

color:#d4d4d4;

}

.input-group-custom input:focus{

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

border:1px solid #4da3ff;

}

button{

width:100%;

height:56px;

border:none;

border-radius:14px;

background:linear-gradient(135deg,#38b6ff,#0d6efd);

color:white;

font-weight:600;

font-size:17px;

transition:.3s;

}

button:hover{

transform:translateY(-2px);

box-shadow:0 12px 25px rgba(13,110,253,.35);

}

.alert{

border-radius:12px;

margin-bottom:20px;

}

@media(max-width:576px){

.login-card{

padding:35px 25px;

width:100%;

}

.logo{

width:75px;

}

.login-card h2{

font-size:26px;

}

}