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

body{    background:#eef2f7;  color:black;  overflow-x:hidden;}

/* HEADER */

header{    background:#0b1f3a;    color:white;    padding:20px;    text-align:center;}

header h1{    font-size:34px;}

header p{    margin-top:8px;    color:#d0d8e4;}

/* HORIZONTAL MENU */

.top-menu{    background:#142b52;}

.top-menu ul{    list-style:none;    display:flex;    justify-content:center;    flex-wrap:wrap;}

.top-menu ul li{    position:relative;}

.top-menu ul li a{    display:block;    padding:16px 24px;    color:white;    text-decoration:none;    transition:0.3s;    font-weight:bold;
}

.top-menu ul li:hover{    background:#1d4d8f;}

/* DROPDOWN MENU */

.top-menu ul li ul{    display:none;    position:absolute;    background:#1f3d68;    min-width:220px;    top:100%;    left:0;    z-index:1000;}

.top-menu ul li:hover ul{    display:block;}

.top-menu ul li ul li{    width:100%;}

.top-menu ul li ul li a{    padding:14px;    border-bottom:1px solid #35557f;}

/* MAIN LAYOUT */

.topcontainer{    display:flex;    min-height:100vh;}

/* VERTICAL SIDEBAR */

.sidebar{    width:260px;    background:#132238;    color:white;    padding-top:20px;}

.sidebar h2{    text-align:center;    margin-bottom:20px;    font-size:24px;}
.sidebar ul{    list-style:none;}
.sidebar ul li{    position:relative;}
.sidebar ul li a{    display:block;    color:white;    text-decoration:none;    padding:16px 24px;    border-bottom:1px solid #223750;    transition:0.3s;}
.sidebar ul li:hover{    background:#1d4d8f;}

/* SIDEBAR SUBMENU */

.sidebar ul li ul{    display:none;    background:#203754;}
.sidebar ul li:hover ul{    display:block;}
.sidebar ul li ul li a{    padding-left:45px;    font-size:14px;}

/* CONTENT AREA */

.content{    flex:1;    padding:30px;}

/* DASHBOARD CARDS */

.cards{    display:grid;    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));    gap:20px;    margin-bottom:40px;}

.card{
    background:white;
    padding:25px;
    border-radius:10px;
    box-shadow:0 2px 10px rgba(0,0,0,0.1);
    transition:0.3s;
}

.card:hover{
    transform:translateY(-5px);
}

.card h3{    color:#0b1f3a;    margin-bottom:15px;}

.value{    font-size:30px;    font-weight:bold;}
.positive{    color:green;}
.negative{    color:red;}

/* TABLE */

.table-section{
    background:white;
    padding:25px;
    border-radius:10px;
    box-shadow:0 2px 10px rgba(0,0,0,0.1);
}

.table-section h2{
    margin-bottom:20px;
    color:#0b1f3a;
}

table{
    width:100%;
    border-collapse:collapse;
}

table th{
    background:#142b52;
    color:white;
    padding:14px;
}

table td{
    padding:14px;
    border-bottom:1px solid #ddd;
}

/* FOOTER */

footer{
    background:#0b1f3a;
    color:white;
    text-align:center;
    padding:18px;
}

/* RESPONSIVE */

@media(max-width:900px){

    .container{        flex-direction:column;    }
    .sidebar{        width:100%;    }
    .top-menu ul{        flex-direction:column;    } 
}
.service-grid {      display: grid;      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));      gap: 1rem;}
.scard {      background: #fff;      padding: 1rem;      border-radius: 10px;      box-shadow: 0 2px 6px rgba(0,0,0,0.1);    }