```css
:root{
    --green:#006b3f;
    --deep:#004225;
    --gold:#f6c343;
    --light:#f8f9fa;
    --text:#212529;
}

/* GENERAL */

body{
    font-family:Arial, Helvetica, sans-serif;
    background:#fff;
    color:var(--text);
    overflow-x:hidden;
}

a{
    text-decoration:none;
}

/* NAVBAR */

.gov-green{
    background:var(--green);
}

.site-logo{
    width:55px;
    height:55px;
    object-fit:contain;
    background:#fff;
    border-radius:8px;
    padding:3px;
}

.kwara-logo{
    width:55px;
    height:55px;
    object-fit:contain;
    border-radius:50%;
    background:#fff;
    padding:2px;
}

.navbar-brand{
    color:#fff !important;
}

.navbar-nav .nav-link{
    color:#fff !important;
    font-weight:500;
    margin-left:8px;
}

.navbar-nav .nav-link:hover{
    color:var(--gold) !important;
}

/* HERO SECTION */

.hero{
    background:
        linear-gradient(
            120deg,
            rgba(0,66,37,.95),
            rgba(0,107,63,.82)
        ),
        url('https://images.unsplash.com/photo-1586773860418-d37222d8fce3?auto=format&fit=crop&w=1600&q=80');

    background-size:cover;
    background-position:center;

    min-height:520px;

    color:#fff;

    display:flex;
    align-items:center;
}

.hero h1{
    font-size:clamp(2.3rem,5vw,4.6rem);
    font-weight:800;
}

.hero p{
    font-size:1.1rem;
}

/* PAGE HEADER */

.page-header{
    background:
        linear-gradient(
            120deg,
            var(--deep),
            var(--green)
        );

    color:#fff;
    padding:70px 0;
}

/* STATISTICS */

.stat-card{
    background:#f8fff9;
    border-left:5px solid var(--green);

    padding:25px;
    border-radius:14px;

    min-height:160px;

    box-shadow:0 8px 24px rgba(0,0,0,.06);
}

.stat-card h3{
    color:var(--green);
    font-weight:700;
}

/* CARDS */

.card{
    border:none;
    border-radius:15px;
    overflow:hidden;
    transition:.3s;
}

.card:hover{
    transform:translateY(-4px);
    box-shadow:0 12px 30px rgba(0,0,0,.12);
}

.card-img-top{
    height:220px;
    object-fit:cover;
}

/* ORGANOGRAM */

.hierarchy{
    text-align:center;
}

.level{
    background:#e9f7ef;
    border:2px solid var(--green);

    border-radius:12px;
    padding:18px;

    font-weight:700;

    margin:12px auto;
    max-width:540px;
}

.level.top{
    background:var(--green);
    color:#fff;
}

.level.small{
    min-height:80px;

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

/* OFFICIAL CARDS */

.official-card{
    background:#fff;
    border-radius:12px;
    overflow:hidden;

    box-shadow:0 4px 12px rgba(0,0,0,.08);
}

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

/* NEWS */

.article{
    max-width:900px;
}

.article-body{
    font-size:1.08rem;
    line-height:1.9;
}

.news-content img{
    max-width:100%;
    height:auto;
    border-radius:8px;
}

/* LOGIN */

.login-screen{
    min-height:100vh;

    background:
        linear-gradient(
            120deg,
            var(--deep),
            var(--green)
        );

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

.login-card{
    background:#fff;

    padding:32px;
    border-radius:16px;

    width:min(420px,92%);

    box-shadow:0 20px 40px rgba(0,0,0,.25);
}

/* ADMIN */

.admin-bg{
    background:#eef3f0;
}

/* FOOTER */

footer{
    background:#212529;
}

.footer-link{
    display:block;
    color:#ddd;
    margin-bottom:6px;
}

.footer-link:hover{
    color:#fff;
}

/* MOBILE */

@media(max-width:768px){

    .hero{
        min-height:440px;
    }

    .btn-lg{
        width:100%;
        margin-top:10px;
    }

    .site-logo{
        width:42px;
        height:42px;
    }

    .kwara-logo{
        width:42px;
        height:42px;
    }

    .navbar-brand .d-block{
        font-size:14px;
    }

    .navbar-brand small{
        font-size:10px;
    }
}
```

/* MOBILE FIXES */

@media(max-width: 768px){

    body{
        overflow-x:hidden;
    }

    .navbar{
        padding:10px 0;
    }

    .navbar-brand{
        max-width:78%;
    }

    .navbar-brand img{
        width:42px !important;
        height:42px !important;
    }

    .navbar-brand div div,
    .navbar-brand .d-block{
        font-size:14px !important;
        line-height:1.2;
    }

    .navbar-brand small{
        font-size:10px !important;
    }

    .navbar-collapse{
        background:#006b3f;
        padding:15px;
        margin-top:10px;
        border-radius:10px;
    }

    .navbar-nav .nav-link{
        padding:10px 0;
        border-bottom:1px solid rgba(255,255,255,.15);
    }

    .hero{
        min-height:430px;
        padding:50px 0;
        text-align:center;
    }

    .hero h1{
        font-size:2.4rem !important;
        line-height:1.15;
    }

    .hero p{
        font-size:1rem;
    }

    .hero .btn{
        width:100%;
        margin-bottom:10px;
    }

    .page-header{
        padding:45px 15px;
        text-align:center;
    }

    .page-header h1{
        font-size:2rem;
    }

    .card-img-top{
        height:210px;
    }

    .org-wrapper{
        overflow-x:auto;
        padding-bottom:20px;
    }

    .org-tree{
        min-width:750px;
    }

    footer{
        text-align:center;
    }
}

@media(max-width: 480px){

    .hero h1{
        font-size:2rem !important;
    }

    .org-card{
        width:210px !important;
    }

    .org-card img{
        height:150px !important;
    }
}

/* STRONG MOBILE RESPONSIVE FIX */

@media(max-width: 768px){

    .navbar .container{
        display:flex;
        align-items:center;
        justify-content:space-between;
        flex-wrap:nowrap;
    }

    .navbar-brand{
        max-width:75%;
        display:flex;
        align-items:center;
        overflow:hidden;
    }

    .kwara-logo{
        width:55px !important;
        height:55px !important;
        flex-shrink:0;
    }

    .navbar-brand span{
        min-width:0;
        overflow:hidden;
    }

    .navbar-brand .d-block{
        font-size:20px !important;
        line-height:1.15;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
        max-width:230px;
    }

    .navbar-brand small{
        font-size:13px !important;
        display:block;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }

    .navbar-toggler{
        width:52px;
        height:46px;
        padding:6px;
        border:2px solid #fff !important;
        margin-left:8px;
        flex-shrink:0;
    }

    .navbar-collapse{
        position:absolute;
        top:100%;
        left:0;
        right:0;
        background:#006b3f;
        padding:15px 25px;
        z-index:999;
    }

    .navbar-nav .nav-link{
        font-size:17px;
        padding:12px 0;
        border-bottom:1px solid rgba(255,255,255,.25);
    }

    .hero{
        min-height:auto !important;
        padding:70px 20px !important;
        text-align:left;
    }

    .hero h1{
        font-size:42px !important;
        line-height:1.15 !important;
        word-break:normal;
    }

    .hero p{
        font-size:20px !important;
        line-height:1.5;
    }

    .hero .badge,
    .hero .btn,
    .hero a.btn{
        max-width:100%;
        white-space:normal;
    }

    .hero .btn{
        width:100%;
        margin-bottom:12px;
        font-size:20px;
        padding:14px;
    }
}

@media(max-width: 420px){

    .navbar-brand .d-block{
        max-width:190px;
        font-size:18px !important;
    }

    .navbar-brand small{
        font-size:12px !important;
    }

    .hero h1{
        font-size:36px !important;
    }

    .hero p{
        font-size:18px !important;
    }
}