:root {
    --school-primary: #0f4c81;
    --school-secondary: #f4b400;
    --school-dark: #073763;
}
body { font-family: Arial, Helvetica, sans-serif; background: #f7f9fc; }
.top-strip { background: var(--school-dark); color: #fff; font-size: 14px; }
.school-header { background: #fff; border-bottom: 1px solid #e5e7eb; }
.school-logo { width: 76px; height: 76px; object-fit: contain; }
.navbar-school { background: var(--school-primary); }
.navbar-school .nav-link, .navbar-school .navbar-brand { color: #fff !important; font-weight: 600; }
.navbar-school .dropdown-menu { border-radius: 0; border: 0; box-shadow: 0 12px 30px rgba(0,0,0,.15); }
.hero-slide { min-height: 440px; background-size: cover; background-position: center; position: relative; }
.hero-slide::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.65), rgba(0,0,0,.15)); }
.hero-content { position: relative; z-index: 2; color: #fff; padding: 110px 0; }
.section-title { color: var(--school-primary); font-weight: 800; position: relative; padding-bottom: 12px; }
.section-title::after { content: ''; width: 70px; height: 4px; background: var(--school-secondary); position: absolute; left: 0; bottom: 0; border-radius: 5px; }
.card-school { border: 0; border-radius: 16px; box-shadow: 0 10px 28px rgba(15, 76, 129, .08); overflow: hidden; }
.message-img { width: 120px; height: 120px; object-fit: cover; border-radius: 50%; border: 5px solid #f5f7fb; }
.notice-list a { text-decoration: none; color: #1f2937; }
.notice-list a:hover { color: var(--school-primary); }
.gallery-img { height: 220px; object-fit: cover; width: 100%; }
.footer { background: #071d33; color: #cbd5e1; }
.footer a { color: #cbd5e1; text-decoration: none; }
.footer a:hover { color: #fff; }
.sticky-top { z-index: 1020; }
.admin-sidebar { min-height: 100vh; background: #0f172a; }
.admin-sidebar a { color: #dbeafe; text-decoration: none; display: block; padding: 11px 16px; border-radius: 10px; margin-bottom: 4px; }
.admin-sidebar a:hover, .admin-sidebar a.active { background: #1d4ed8; color: #fff; }
.preview-img { max-height: 140px; border-radius: 10px; object-fit: cover; }
@media (max-width: 768px) {
    .hero-slide { min-height: 320px; }
    .hero-content { padding: 70px 0; }
    .school-logo { width: 58px; height: 58px; }
}

/* Updated dropdown menu style for traditional school navigation */
.navbar-school .nav-item.show > .nav-link,
.navbar-school .nav-link:focus,
.navbar-school .nav-link:hover {
    background: #07820b;
    color: #fff !important;
}
.navbar-school .dropdown-menu {
    background: #06486a;
    padding: 8px 0;
    min-width: 230px;
}
.navbar-school .dropdown-item {
    color: #fff;
    font-weight: 700;
    padding: 8px 16px;
    white-space: nowrap;
}
.navbar-school .dropdown-item:hover,
.navbar-school .dropdown-item:focus {
    background: #07820b;
    color: #fff;
}
@media (min-width: 992px) {
    .navbar-school .dropdown:hover > .dropdown-menu {
        display: block;
        margin-top: 0;
    }
}
.staff-card-img {
    width: 140px;
    height: 140px;
    object-fit: cover;
    border-radius: 50%;
    border: 5px solid #f5f7fb;
}
.message-page-placeholder {
    width: 280px;
    height: 280px;
}