*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}



body{

font-family:'Poppins',sans-serif;

}



.app-bg{

min-height:100vh;

display:flex;
align-items:center;
justify-content:center;

padding:20px;


background:

linear-gradient(
135deg,
#ffffff,
#eef3f8
);



padding:20px;

}




.login-wrapper{

width:100%;

display:flex;

justify-content:center;

}




.login-card{

width:100%;
max-width:430px;

background:#ffffff;

padding:40px;

border-radius:24px;


box-shadow:

0 20px 60px rgba(11,31,58,.15);


border-top:5px solid #123B8C;

}


@keyframes fade{

from{
opacity:0;
transform:translateY(20px);
}

to{
opacity:1;
transform:none;
}

}




.brand-section{

text-align:center;

margin-bottom:30px;

}



.login-logo{

width:95px;

margin-bottom:15px;


}



.brand-section h1{
/* font-family:'Mulish',sans-serif; */
font-size:28px;
font-weight:800;
color:#111827;

}


.brand-section p{

color:#123B8C;

font-weight:600;

}




.form-area{


display:flex;

flex-direction:column;

gap:15px;


}




.input-box input{

width:100%;

padding:15px 18px;

border-radius:12px;

border:1px solid #d8dee8;

background:#fff;

color:#0b1f3a;

font-size:14px;

}


.input-box input:focus{

border-color:#123B8C;

box-shadow:

0 0 0 3px rgba(255,138,0,.15);

}



button{

    width:100%;

    margin-top:18px;

    padding:14px;

    border-radius:12px;

    border:none;

    cursor:pointer;


    background:
    linear-gradient(
    135deg,
    #123B8C,
    #062971
    );


    color:white;

    font-size:16px;

    font-weight:700;

}


button:disabled{

    opacity:.7;

}


/* ERROR */

.error{

    color:#dc2626;

    font-size:14px;

    margin-top:10px;

    text-align:center;

}



/* LOADER BUTTON */


.loader{

width:18px;
height:18px;

border:3px solid rgba(255,255,255,.4);

border-top:3px solid white;

border-radius:50%;

display:inline-block;

vertical-align:middle;

margin-right:8px;

animation:spin .8s linear infinite;

}


@keyframes spin{

to{
transform:rotate(360deg);
}

}




.error{


text-align:center;


color:#dc2626;


font-size:14px;


margin-top:8px;


}




/* ================= SUCCESS PAGE ================= */

.welcome-user{
text-transform: uppercase;
font-size:22px;

font-weight:600;

color:#0b1f3a;

margin-bottom:20px;

}
.success-container{

min-height:100vh;

width:100%;

display:flex;

justify-content:center;

align-items:center;

padding:25px;


background:

linear-gradient(
135deg,
#ffffff,
#eef3f8
);


}



.success-card{


width:100%;

max-width:680px;


background:#ffffff;


padding:45px;


border-radius:25px;


text-align:center;



box-shadow:

0 25px 70px rgba(11,31,58,.18);



border-top:

5px solid #123B8C;


}




.success-title{


font-family:'Mulish',sans-serif;


font-size:30px;


font-weight:700;


line-height:1.4;


color:#0b1f3a;


margin-bottom:25px;


}




.counter{


font-size:55px;


font-weight:700;


color:#16a34a;


margin:20px 0;



}



.success-text{


font-size:16px;


line-height:1.9;


color:#374151;


text-align:left;


}



.success-text p{


margin-bottom:15px;


}




.success-text b{


color:#0b1f3a;


}




.highlight{


color:#123B8C;


font-weight:700;


}




.footer-box{


margin-top:35px;


padding-top:25px;


border-top:1px solid #e5e7eb;



display:flex;


justify-content:center;


align-items:center;


gap:15px;


color:#0b1f3a;


font-weight:600;


}



.footer-logo{


width:75px;


height:75px;


object-fit:contain;


border-radius:15px;


}



/* mobile */

@media(max-width:480px){


.success-card{

padding:25px;

}



.success-title{

font-size:22px;

}



.counter{

font-size:42px;

}



.success-text{

font-size:14px;

}


}



.highlight{

color:#16a34a;

font-weight:700;

}



.footer-box{


margin-top:30px;


display:flex;

justify-content:center;

gap:15px;

align-items:center;


}



.footer-logo{

width:70px;

border-radius:12px;

}




@media(max-width:480px){


.login-card{

padding:25px;

}



.brand-section h1{

font-size:23px;

}


}