body{

margin:0;

width:100%;

min-height:100vh;

overflow-x:hidden;

overflow-y:hidden;

font-family:sans-serif;

background:

linear-gradient(

135deg,

#0b2a69,

#123d93,

#1f4cb3

);

}

.login-wrapper{

width:100%;

min-height:100vh;

display:flex;

justify-content:center;

align-items:center;

padding:0;

}

.login-card{

width:100%;

max-width:500px;

padding:35px;

border-radius:28px;

background:

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

backdrop-filter:blur(18px);

box-shadow:

0 15px 40px rgba(0,0,0,.25);

text-align:center;

}

.banner{

width:100%;

margin-bottom:20px;

border-radius:15px;

}

.login-card h2{

font-weight:700;

}

.login-card p{

color:#ddd;

margin-bottom:25px;

}

.form-control{

height:55px;

border:none;

border-radius:15px;

}

.password-box{

position:relative;

}

#togglePassword{

position:absolute;

right:18px;

top:16px;

cursor:pointer;

}

.login-btn{

height:55px;

width:100%;

border:none;

border-radius:15px;

font-size:18px;

font-weight:700;

background:#fff;

}

.login-btn:hover{

transform:translateY(-2px);

}

.bg-circle{

position:absolute;

border-radius:50%;

filter:blur(80px);

}

.circle1{

width:300px;

height:300px;

top:-100px;

left:-100px;

background:#4da6ff;

}

.circle2{

width:250px;

height:250px;

bottom:-100px;

right:-100px;

background:#003399;

}

.circle3{

width:200px;

height:200px;

top:50%;

left:70%;

background:#6fa8ff;

}

.footer-text{

margin-top:20px;

font-size:14px;

color:#ddd;

}

@media(max-width:768px){

html,

body{

width:100%;

height:100%;

overflow:hidden;

}

.login-wrapper{

padding:0;

height:100vh;

}

.login-card{

width:92%;

max-width:none;

padding:22px;

margin:0 auto;

}

.banner{

width:100%;

max-height:110px;

object-fit:contain;

}

.circle1,

.circle2,

.circle3{

display:none;

}

}