:root {
    --primary:#085aa3;
    --secondary:#f5d81f;
    --dark:#12324a;
    --text:#243447;
    --muted:#6b7c8f;
    --light:#f4f8fc;
    --white:#ffffff;
    --border:#dce7f2;
    --shadow:0 12px 30px rgba(8,90,163,0.12);
    --radius:18px;
}

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

body {
    font-family:Arial,Helvetica,sans-serif;
    color:var(--text);
    background:#ffffff;
    line-height:1.6;
}

a {
    color:inherit;
    text-decoration:none;
}

img {
    max-width:100%;
    display:block;
}

.container {
    width:min(1260px,calc(100% - 32px));
    margin:0 auto;
}

.topbar {
    background:var(--primary);
    color:var(--white);
    font-size:14px;
}

.topbar .header-nav {
    display:flex;
    justify-content:space-between;
    gap:16px;
    padding:8px 0;
    flex-wrap:wrap;
}

.header {
    background:var(--white);
    box-shadow:0 3px 20px rgba(0,0,0,0.06);
    position:sticky;
    top:0;
    z-index:10;
}

.header-inner {
    display:flex;
    align-items:center;
    justify-content:space-between;
}

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

.logo img {
    width: auto;
    height: 75px;
}

.logo .subtitle{
	font-size: 18px;
    font-weight: 800;
    color: #ea193c;
}

.logo h1 {
    font-size:20px;
    color:var(--primary);
    line-height:1.2;
    text-transform:uppercase;
}

.nav {
	display: flex;
	gap: 20px;
    font-weight:700;
    color:var(--dark);
}

.nav a {
    padding:8px 0;
    position:relative;
}

.nav > a::after {
    content:"";
    position:absolute;
    left:0;
    bottom:28px;
    width:0;
    height:3px;
    background:var(--secondary);
    transition:0.25s;
}

.nav > a:hover::after {
    width:100%;
}

.search-btn {
    background:var(--secondary);
    color:var(--dark);
    padding:10px 16px;
    border-radius:999px;
    font-weight:800;
}

.hero {
    background:linear-gradient(90deg,rgba(8,90,163,0.95),rgba(8,90,163,0.72)),url('https://images.unsplash.com/photo-1588072432836-e10032774350?auto=format&fit=crop&w=1600&q=80') center/cover;
    color:var(--white);
    padding:74px 0 56px;
}

.hero-grid {
    display:grid;
    grid-template-columns:1.15fr 0.85fr;
    gap:36px;
    align-items:center;
}

.badge {
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:rgba(245,216,31,0.16);
    color:var(--secondary);
    border:1px solid rgba(245,216,31,0.5);
    padding:8px 14px;
    border-radius:999px;
    font-weight:700;
    margin-bottom:18px;
}

.hero h2 {
    font-size:clamp(34px,5vw,56px);
    line-height:1.08;
    margin-bottom:18px;
}

.hero p {
    font-size:18px;
    opacity:0.95;
    max-width:660px;
    margin-bottom:28px;
}

.hero-actions {
    display:flex;
    gap:14px;
    flex-wrap:wrap;
}

.btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:13px 20px;
    border-radius:999px;
    font-weight:800;
    border:2px solid transparent;
    transition:0.25s;
}

.btn-primary {
    background:var(--secondary);
    color:var(--dark);
}

.btn-outline {
    color:var(--white);
    border-color:rgba(255,255,255,0.65);
}

.hero-card {
    background:var(--white);
    color:var(--text);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    overflow:hidden;
}

.hero-card img {
    height:230px;
    width:100%;
    object-fit:cover;
}

.hero-card-body {
    padding:22px;
}

.hero-card .tag {
    display:inline-block;
    background:#fff8c7;
    color:#725f00;
    padding:5px 10px;
    border-radius:999px;
    font-weight:800;
    font-size:12px;
    margin-bottom:10px;
}

.quick-links {
    margin-top:-34px;
    position:relative;
    z-index:2;
}

.quick-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:16px;
}

.quick-item {
    background:var(--white);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    padding:22px;
    border-bottom:5px solid var(--secondary);
}

.quick-icon {
    width:46px;
    height:46px;
    border-radius:14px;
    background:#e9f3fb;
    color:var(--primary);
    display:grid;
    place-items:center;
    font-size:24px;
    margin-bottom:12px;
}

.section {
    padding:64px 0;
}

.section.alt {
    background:var(--light);
}

.section-head {
    display:flex;
    justify-content:space-between;
    align-items:end;
    gap:24px;
    margin-bottom:28px;
}

.section-kicker {
    color:var(--primary);
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:0.6px;
    font-size:13px;
    margin-bottom:5px;
}

.section-title {
    color:var(--dark);
    font-size:32px;
    line-height:1.2;
}

.view-more {
    color:var(--primary);
    font-weight:800;
}

.news-layout {
    display:grid;
    grid-template-columns:1.1fr 0.9fr;
    gap:24px;
}

.featured-news,
.news-list,
.card,
.notice-box,
.document-box {
    background:var(--white);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    overflow:hidden;
}

.featured-news img {
    height:330px;
    width:100%;
    object-fit:cover;
}

.featured-body {
    padding:24px;
}

.meta {
    color:var(--muted);
    font-size:14px;
    margin-bottom:8px;
}

.featured-body h3,
.card h3 {
    color:var(--dark);
    font-size:23px;
    line-height:1.3;
    margin-bottom:10px;
}

.news-list {
    padding:18px;
    display:grid;
    gap:14px;
}

.news-row {
    display:grid;
    grid-template-columns:128px 1fr;
    gap:14px;
    padding-bottom:14px;
    border-bottom:1px solid var(--border);
}

.news-row:last-child {
    border-bottom:0;
    padding-bottom:0;
}

.news-row img {
    height:92px;
    border-radius:14px;
    object-fit:cover;
}

.news-row h4 {
    color:var(--dark);
    line-height:1.35;
    margin-bottom:6px;
}

.activity-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px;
}

.card img {
    height:185px;
    width:100%;
    object-fit:cover;
}

.card-body {
    padding:20px;
}

.tag-blue {
    display:inline-block;
    color:var(--primary);
    background:#e8f3fc;
    font-weight:800;
    padding:5px 10px;
    border-radius:999px;
    font-size:12px;
    margin-bottom:10px;
}

.two-col {
    display:grid;
    grid-template-columns:0.95fr 1.05fr;
    gap:24px;
}

.notice-box,
.document-box {
    padding:24px;
}

.notice-item,
.doc-item {
    display:flex;
    gap:14px;
    padding:14px 0;
    border-bottom:1px solid var(--border);
}

.notice-item:first-of-type,
.doc-item:first-of-type {
    padding-top:0;
}

.notice-item:last-child,
.doc-item:last-child {
    border-bottom:0;
    padding-bottom:0;
}

.date-box {
    min-width:58px;
    height:58px;
    border-radius:14px;
    background:var(--primary);
    color:var(--white);
    display:grid;
    place-items:center;
    text-align:center;
    font-weight:800;
    line-height:1.1;
}

.date-box span {
    display:block;
    font-size:13px;
    color:var(--secondary);
}

.file-icon {
    min-width:48px;
    height:48px;
    border-radius:14px;
    background:#fff7bb;
    color:var(--dark);
    display:grid;
    place-items:center;
    font-size:22px;
}

.doc-item h4,
.notice-item h4 {
    color:var(--dark);
    margin-bottom:4px;
}

.gallery-grid {
    display:grid;
    grid-template-columns:1.2fr 0.8fr 0.8fr;
    gap:16px;
}

.gallery-item {
    position:relative;
    overflow:hidden;
    border-radius:var(--radius);
    min-height:210px;
    background:var(--primary);
}

.gallery-item.large {
    grid-row:span 2;
    min-height:436px;
}

.gallery-item img {
    width:100%;
    height:100%;
    object-fit:cover;
    position:absolute;
    inset:0;
}

.gallery-caption {
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    padding:18px;
    color:var(--white);
    background:linear-gradient(transparent,rgba(0,0,0,0.72));
    font-weight:800;
}

.stats {
    background:var(--primary);
    color:var(--white);
    padding:46px 0;
}

.stats-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:24px;
    text-align:center;
}

.stat strong {
    display:block;
    font-size:38px;
    color:var(--secondary);
    line-height:1;
    margin-bottom:8px;
}

.footer {
    background:#062f55;
    color:#d8e9f6;
    padding:46px 0 18px;
}

.footer-grid {
    display:grid;
    grid-template-columns:1.2fr 0.8fr 0.8fr;
    gap:30px;
    margin-bottom:30px;
}

.footer h3,
.footer h4 {
    color:var(--white);
    margin-bottom:14px;
}

.footer ul {
    list-style:none;
    display:grid;
    gap:9px;
}

.copyright {
    border-top:1px solid rgba(255,255,255,0.14);
    padding-top:16px;
    color:#a8c8df;
    font-size:14px;
}

@media (max-width:960px) {
    .header-inner,
    .section-head {
        align-items:flex-start;
    }
    .header-inner,
    .nav {
        flex-direction:column;
    }
    .nav {
        width:100%;
        align-items:flex-start;
        gap:8px;
    }
    .hero-grid,
    .news-layout,
    .two-col,
    .footer-grid {
        grid-template-columns:1fr;
    }
    .quick-grid,
    .activity-grid,
    .stats-grid {
        grid-template-columns:repeat(2,1fr);
    }
    .gallery-grid {
        grid-template-columns:1fr 1fr;
    }
}

@media (max-width:640px) {
    .topbar .container,
    .section-head,
    .hero-actions {
        flex-direction:column;
        align-items:flex-start;
    }
    .hero {
        padding:48px 0;
    }
    .quick-grid,
    .activity-grid,
    .stats-grid,
    .gallery-grid {
        grid-template-columns:1fr;
    }
    .news-row {
        grid-template-columns:96px 1fr;
    }
    .news-row img {
        height:78px;
    }
    .gallery-item.large {
        min-height:260px;
    }
}

/* Font Awesome icon tuning */

.topbar i,
.badge i,
.view-more i,
.btn i {
    margin-right:7px;
}

.quick-icon i,
.file-icon i {
    line-height:1;
}

.footer li i {
    width:18px;
    margin-right:8px;
    color:var(--secondary);
}

.nav-trigger {
    display:none;
}

@media (max-width:960px) {
    .nav-trigger {
        display:inline-flex;
        align-items:center;
        gap:8px;
        background:var(--primary);
        color:#fff;
        padding:10px 14px;
        border-radius:999px;
        font-weight:800;
    }
}