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;

}

}
.developer-footer{

margin-top:25px;

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

gap:14px;

}

.developer-line{

width:85%;

height:1px;

background:

rgba(255,255,255,.25);

}

.developer-text{

font-size:14px;

color:#d9d9d9;

letter-spacing:.4px;

}

.developer-text span{

font-weight:700;

color:#fff;

}

.developer-socials{

display:flex;

gap:18px;

}

.social-btn{

width:46px;

height:46px;

display:flex;

justify-content:center;

align-items:center;

border-radius:50%;

text-decoration:none;

font-size:22px;

background:

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

backdrop-filter:blur(10px);

color:#fff;

transition:.25s;

}

.social-btn:hover{

transform:

translateY(-4px)

scale(1.08);

}

.whatsapp:hover{

background:#25D366;

}

.instagram:hover{

background:

linear-gradient(

45deg,

#833AB4,

#FD1D1D,

#FCAF45

);

}

@media(max-width:768px){

.developer-text{

font-size:13px;

}

.social-btn{

width:42px;

height:42px;

font-size:20px;

}

}
@media(max-width:768px){

.developer-footer{

margin-top:18px;

padding-top:18px;

gap:12px;

}

.developer-line{

width:60%;

}

.developer-text{

font-size:12px;

text-align:center;

line-height:1.5;

}

.developer-socials{

gap:25px;

}

.social-btn{

width:50px;

height:50px;

font-size:24px;

}

}
@media(max-width:768px){

.developer-footer{

background:

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

padding:14px;

border-radius:18px;

}

.developer-line{

display:none;

}

.developer-text span{

font-size:16px;

}

}