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


body{

display:flex;
background:#f1f5f9;

}



.sidebar{

width:250px;
height:100vh;
background:#111827;
color:white;
padding:30px;

}


.sidebar h2{

text-align:center;
margin-bottom:40px;

}



.sidebar ul{

list-style:none;

}


.sidebar li{

padding:15px;
margin:10px 0;

}


.sidebar li:hover{

background:#2563eb;
border-radius:10px;

}



.main{

flex:1;
padding:30px;

}



.cards{

display:flex;
gap:20px;
margin-top:30px;

}



.card{

width:220px;
padding:25px;
color:white;
border-radius:15px;

}


.card p{

font-size:35px;
font-weight:bold;
margin-top:15px;

}



.blue{

background:#2563eb;

}


.orange{

background:#f59e0b;

}


.green{

background:#16a34a;

}


.red{

background:#dc2626;

}



.chart-box{

background:white;
margin-top:40px;
padding:30px;
border-radius:15px;
width:600px;

}



footer{

margin-top:40px;
color:#777;

}