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

body{
font-family:Arial, sans-serif;
background:#f4f4f4;
line-height:1.6;
}

/* Top Bar */
.topbar{
background:#003366;
color:white;
text-align:center;
padding:6px;
font-size:13px;
}

/* Header */
header{
background:white;
padding:15px;
border-bottom:4px solid #003366;
}

.header-container{
display:flex;
align-items:center;
justify-content:center;
gap:20px;
flex-wrap:wrap;
}

.logo{
width:90px;
}

.title h1{
color:#003366;
font-size:26px;
}

.title p{
font-size:16px;
}

/* Navigation Menu */
nav{
background:#003366;
}

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

nav ul.menu li{
position:relative;
}

nav ul.menu li a{
color:white;
padding:14px 20px;
display:block;
text-decoration:none;
transition:0.3s;
}

nav ul.menu li a:hover{
background:#002147;
}

/* Dropdown */
nav ul.menu li ul.dropdown{
display:none;
position:absolute;
background:#004080;
top:100%;
left:0;
min-width:180px;
z-index:100;
}

nav ul.menu li:hover ul.dropdown{
display:block;
}

nav ul.menu li ul.dropdown li a{
padding:10px 15px;
}

/* Slider */
.slider{
width:100%;
height:400px;
overflow:hidden;
position:relative;
}

.slide{
width:100%;
height:400px;
object-fit:cover;
display:none;
transition:all 0.5s ease;
}

.slide.active{
display:block;
}

/* Main Content + Sidebar */
.main-content{
display:flex;
gap:20px;
width:90%;
margin:20px auto;
flex-wrap:wrap;
}

.sidebar{
background:#fff;
padding:20px;
width:25%;
box-shadow:0 0 10px rgba(0,0,0,0.1);
}

.content{
background:#fff;
padding:20px;
width:70%;
box-shadow:0 0 10px rgba(0,0,0,0.1);
}

.notice-board{
background:#f4f4f4;
padding:15px;
border-left:4px solid #003366;
margin-bottom:20px;
}

.quick-links{
display:flex;
gap:20px;
flex-wrap:wrap;
}

.quick-links .box{
background:white;
padding:20px;
width:250px;
text-align:center;
box-shadow:0 0 10px rgba(0,0,0,0.1);
transition:0.3s;
}

.quick-links .box:hover{
transform:translateY(-5px);
box-shadow:0 5px 15px rgba(0,0,0,0.2);
}

/* Footer */
footer{
background:#222;
color:white;
padding:20px 10px;
margin-top:40px;
}

.footer-container{
display:flex;
justify-content:space-between;
flex-wrap:wrap;
gap:20px;
}

.footer-col h4{
margin-bottom:10px;
}

.footer-col ul{
list-style:none;
}

.footer-col ul li a{
color:white;
text-decoration:none;
}

.footer-col ul li a:hover{
text-decoration:underline;
}

footer p{
margin-top:10px;
font-size:14px;
}

/* Responsive */
@media(max-width:1024px){
.sidebar{
width:30%;
}
.content{
width:65%;
}
}

@media(max-width:768px){
nav ul.menu{
flex-direction:column;
}
.sidebar, .content{
width:100%;
}
.slider{
height:250px;
}
.slide{
height:250px;
}
.header-container{
flex-direction:column;
}
.quick-links{
justify-content:center;
}
}