body{
margin:0;
font-family:'Inter',sans-serif;
background:#f4f6f9;
display:flex;
}

/* SIDEBAR */
.sidebar{
width:240px;
background:#0072B1;
/*background:#1f2d3a;*/
color:white;
height:100vh;
position:fixed;
padding-top:20px;
}

.sidebar {
text-align:center;
margin-bottom:30px;
}

.sidebar a{
display:block;
color:#cfd8dc;
padding:12px 20px;
text-decoration:none;
}

.sidebar a:hover{
background:#0072B1;
color:white;
}

/* MAIN */
.main{
margin-left:240px;
width:100%;
}

/* TOPBAR */
.topbar{
background:#0072B1;
/*background:white;*/
color:white;
padding:15px 25px;
box-shadow:0 2px 6px rgba(0,0,0,0.1);
display:flex;
justify-content:space-between;
}

/* CONTENT */
.container{
padding:30px;
}

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

/* CARD */
.card{
background:white;
padding:25px;
border-style: solid;
border-color:#0072B1;
border-radius:10px;
box-shadow:0 6px 16px rgba(0,0,0,0.08);
transition:0.2s;
margin-top:0;
}

.card:hover{
/*transform:translateY(-6px);*/
box-shadow:0 10px 24px rgba(0,0,0,0.12);
}

/* BUTTON */
.btn{
display:inline-block;
margin-top:12px;
padding:10px 20px;
background:#0072B1;
color:white;
border-radius:6px;
text-decoration:none;
font-weight:600;
transition:0.2s;
}

.btn:hover{
background:#005a8c;
}