body{
background:#f1f5f9;
font-family:Segoe UI,Roboto,sans-serif;
margin:0;
}

/* ===== Topbar ===== */


.topbar{
min-height:100px;
background:white;
border-bottom:1px solid #e5e7eb;
display:flex;
align-items:center;
justify-content:space-between;
padding:10px 30px;
position:fixed;
top:0;
left:240px;
right:0;
z-index:1000;
}

.search-box{
border:1px solid #d1d5db;
border-radius:6px;
padding:7px 12px;
width:220px;
}

/* ===== Sidebar ===== */

.sidebar{
width:240px;
background:#1e293b;
color:white;
position:fixed;
top:0;
bottom:0;
left:0;
padding:20px;
}

.sidebar h4{
margin-bottom:30px;
}

.sidebar a{
display:flex;
align-items:center;
gap:10px;

color:#cbd5e1;
padding:6px 10px;
border-radius:6px;
text-decoration:none;

margin-bottom:1px;
font-size:14px;
}

.sidebar a:hover{
background:#334155;
color:white;
padding-left:14px;
transition:0.2s;
}

/* ===== Content ===== */

.content{
margin-left:240px;
margin-top:70px;
padding:30px;
}

/* ===== Banner ===== */

.hero{
position:relative;
height:380px;
border-radius:12px;
overflow:hidden;
margin-bottom:40px;
}

.hero-bg{
width:100%;
height:100%;
object-fit:cover;
}

.hero-overlay{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background:rgba(0,0,0,0.4);
display:flex;
align-items:center;
justify-content:center;
}

.hero-content{
text-align:center;
color:white;
}

.hero-content h1{
font-size:46px;
font-weight:700;
}

/* ===== Cards ===== */

.stat-card{
background:white;
border-radius:12px;
padding:25px;
text-align:center;
box-shadow:0 8px 20px rgba(0,0,0,0.08);
}

.dashboard-card{
border-radius:12px;
box-shadow:0 6px 16px rgba(0,0,0,0.08);
transition:0.2s;
}

.dashboard-card:hover{
transform:translateY(-5px);
box-shadow:0 12px 24px rgba(0,0,0,0.12);
}

/* ===== Footer ===== */

.footer{
background:#0f172a;
color:#cbd5e1;
text-align:center;
padding:20px;
margin-left:240px;
margin-top:40px;
}

/* ===== Header ===== */

.topbar{
height:70px;
background:white;
border-bottom:1px solid #e5e7eb;
display:flex;
align-items:center;
justify-content:space-between;
padding:0 25px;

position:fixed;
top:0;
left:240px;
right:0;

z-index:1000;
}

.topbar-left{
display:flex;
align-items:center;
gap:12px;
}

.logo{
height:40px;
}

.site-title span{
font-size:13px;
color:#6b7280;
}

.topbar-right{
display:flex;
align-items:center;
gap:20px;
}

.search-box{
border:1px solid #d1d5db;
border-radius:6px;
padding:6px 12px;
width:220px;
}

/* ===== VIDEO HERO ===== */

.video-hero{
position:relative;

width:calc(100vw - 240px);
height:100vh;

margin-left:-30px;

overflow:hidden;
display:flex;
align-items:center;
justify-content:center;
}

.video-bg{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
object-fit:cover;
z-index:1;
}

.video-overlay{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background:rgba(0,0,0,0.35);
z-index:2;
}

.video-content{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
text-align:center;
color:white;
z-index:3;
}

.video-content h1{
font-size:64px;
font-weight:800;
text-shadow:0 4px 20px rgba(0,0,0,0.6);
}

.video-content p{
font-size:22px;
margin-top:10px;
}

/* ===== Feature Cards ===== */

.feature-card{
border:none;
border-radius:14px;
box-shadow:0 10px 25px rgba(0,0,0,0.08);
transition:0.3s;
}

.feature-card:hover{
transform:translateY(-6px);
box-shadow:0 16px 35px rgba(0,0,0,0.12);
}

.video-content{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
text-align:center;
color:white;
z-index:5;
}

.video-content h1{
font-size:56px;
font-weight:800;
letter-spacing:2px;
text-shadow:0 4px 20px rgba(0,0,0,0.6);
}

.video-content p{
font-size:20px;
margin-top:10px;
text-shadow:0 3px 12px rgba(0,0,0,0.6);
}

.hero-buttons .btn{
padding:12px 26px;
font-weight:600;
border-radius:10px;
box-shadow:0 6px 20px rgba(0,0,0,0.25);
transition:0.2s;
}

.hero-buttons .btn:hover{
transform:translateY(-3px);
box-shadow:0 10px 30px rgba(0,0,0,0.35);
}

.logo{
height:100px;
width:auto;
margin-right:12px;
}


.btn{
padding:6px 12px;
border:none;
border-radius:5px;
cursor:pointer;
font-size:14px;
}

.btn-success{
background:#27ae60;
color:white;
}

.btn-primary{
background:#3498db;
color:white;
}


.menu-title{

display:flex;
justify-content:space-between;
align-items:center;

padding:10px;
cursor:pointer;
font-weight:600;

}

.menu-title:hover{

background:#2d3e50;

}

.submenu{

display:none;
padding-left:15px;

}

.submenu a{

display:block;
padding:8px;
text-decoration:none;
color:#ddd;

}

.submenu a:hover{

background:#34495e;

}

.arrow{

font-size:12px;
transition:0.3s;

}

.arrow.rotate{

transform:rotate(90deg);

}


<style>

.table thead th{

text-align:center;
vertical-align:middle;
font-weight:600;

}

.table td{

text-align:center;
vertical-align:middle;

}

</style>