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

body{
background:#f7f9fb;
display:flex;
flex-direction:column;
min-height:100vh;
}

.navbar{
background:white;
padding:15px 30px;
border-bottom:1px solid #ddd;
}

.nav-left{
display:flex;
align-items:center;
}

.logo-box{
background:#0061ff;
padding:8px;
border-radius:6px;
margin-right:8px;
}

.logo-box img{
width:20px;
filter:brightness(0) invert(1);
}

.logo-text{
font-weight:600;
font-size:18px;
}

.container{
flex:1;
display:flex;
justify-content:center;
align-items:center;
padding:40px 20px;
}

.login-box{
background:white;
padding:40px;
border-radius:8px;
width:100%;
max-width:420px;
}

.login-box h2{
text-align:center;
margin-bottom:25px;
}

.social-btn{
width:100%;
padding:12px;
border-radius:6px;
border:1px solid #ddd;
background:white;
margin-bottom:12px;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
gap:10px;
}

.social-btn img{
width: 24px;
height: 24px;
}

.divider{
text-align:center;
margin:20px 0;
position:relative;
}

.divider:before,
.divider:after{
content:"";
position:absolute;
top:50%;
width:40%;
height:1px;
background:#ddd;
}

.divider:before{left:0;}
.divider:after{right:0;}

.divider span{
background:white;
padding:0 10px;
font-size:13px;
}

label{
font-size:13px;
}

input{
width:100%;
padding:12px;
margin-top:6px;
margin-bottom:20px;
border:1px solid #ccc;
border-radius:6px;
}

.password-container{
position:relative;
}

.password-container input{
padding-right:40px;
}

.toggle-password{
position:absolute;
right:10px;
top:50%;
transform:translateY(-50%);
cursor:pointer;
}

.continue-btn{
width:100%;
padding:14px;
background:#0061ff;
color:white;
border:none;
border-radius:8px;
cursor:pointer;
}

.error{
color:red;
font-size:12px;
margin-top:-15px;
margin-bottom:15px;
}

/* Modal */

.modal{
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.6);
justify-content:center;
align-items:center;
}

.modal-content{
background:white;
padding:30px;
border-radius:8px;
width:90%;
max-width:400px;
position:relative;
}

.close{
position:absolute;
top:10px;
right:15px;
font-size:22px;
cursor:pointer;
}

/* Footer */

.footer{
background:black;
color:#ccc;
padding:50px 30px;
}

.footer-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
gap:30px;
}

.footer h4{
color:white;
margin-bottom:15px;
}

.footer ul{
list-style:none;
}

.footer li{
margin-bottom:8px;
font-size:13px;
}

.modal-header{
text-align:center;
margin-bottom:20px;
}

.modal-logo{
width:35px;
margin-bottom:10px;
}