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

body{

background:#eef4ff;

display:flex;

justify-content:center;

align-items:center;

min-height:100vh;

}

.container{

width:1100px;

display:flex;

background:#fff;

border-radius:20px;

overflow:hidden;

box-shadow:0 15px 40px rgba(0,0,0,.15);

}

.left{

width:45%;

background:linear-gradient(135deg,#2563eb,#4f46e5);

color:white;

padding:60px;

}

.left h1{

font-size:40px;

margin-bottom:20px;

}

.left h2{

margin-bottom:25px;

}

.left p{

line-height:28px;

margin-bottom:30px;

}

.left ul{

list-style:none;

}

.left li{

margin:18px 0;

font-size:17px;

}

.right{

width:55%;

padding:50px;

}

.right h2{

margin-bottom:30px;

text-align:center;

}

.input-box{

margin-bottom:18px;

}

.input-box input,
.input-box select{

width:100%;

padding:14px;

border:1px solid #ccc;

border-radius:10px;

font-size:15px;

outline:none;

transition:.3s;

}

.input-box input:focus,
.input-box select:focus{

border-color:#2563eb;

}

.checkbox{

margin:20px 0;

}

button{

width:100%;

padding:15px;

background:#2563eb;

color:white;

border:none;

border-radius:10px;

font-size:17px;

cursor:pointer;

transition:.3s;

}

button:hover{

background:#1d4ed8;

}

.login{

margin-top:25px;

text-align:center;

}

.login a{

text-decoration:none;

color:#2563eb;

font-weight:600;

}

@media(max-width:900px){

.container{

flex-direction:column;

width:95%;

}

.left,.right{

width:100%;

}

}
form{
    display:flex;
    flex-direction:column;
}
@media (max-width: 768px) {

    .navbar,
    .nav-links {
        width: 100%;
        box-sizing: border-box;
    }

    .nav-links {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 16px;
    }

    .logout-btn {
        width: auto;
        min-width: 140px;
        height: auto;
        padding: 14px 24px;
        position: static;
        margin: 10px auto;
    }

    .hero {
        width: 100%;
        box-sizing: border-box;
        padding: 50px 20px;
    }

    .hero-content {
        display: flex;
        flex-direction: column;
        text-align: center;
    }

    .hero h1 {
        font-size: 40px;
        width: 100%;
        margin: 0;
    }

    .cards,
    .stats-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 20px;
    }

    * {
        max-width: 100%;
    }
}