*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Arial,Helvetica,sans-serif;color:#1e2a32;line-height:1.65;background:#fff}.topbar{background:#233b31;color:#fff;padding:8px 6%;font-size:13px;display:flex;justify-content:space-between;gap:15px}header{display:flex;align-items:center;justify-content:space-between;padding:12px 6%;background:#fff}.brand{display:flex;align-items:center;gap:18px}.brand img{width:78px;height:78px;border-radius:50%;object-fit:cover}.brand h1{margin:0;color:#173f2d;font-size:27px}.brand p{margin:2px 0;color:#667;font-size:14px}.menu-btn{display:none;border:0;background:#1d5b3c;color:#fff;padding:10px;font-size:20px}nav{background:#19633f;padding:0 6%;display:flex;justify-content:center}nav a{color:#fff;text-decoration:none;padding:15px 18px;font-size:14px;font-weight:bold}nav a:hover{background:#124b30}.hero{min-height:590px;background:linear-gradient(90deg,rgba(8,38,26,.83),rgba(8,38,26,.28)),url('assets/activity2.jpeg') center/cover;display:flex;align-items:center;padding:7%}.hero-content{max-width:760px;color:#fff}.tag,.section-label{font-size:13px;font-weight:bold;letter-spacing:2px;color:#d69c3d}.hero h2{font-size:54px;line-height:1.15;margin:12px 0}.hero p{font-size:19px;max-width:650px}.btn{display:inline-block;background:#d89a32;color:#fff;padding:13px 24px;text-decoration:none;font-weight:bold;margin-top:15px}.ticker{display:flex;background:#f5f0e6;padding:14px 6%;gap:20px;overflow:hidden}.ticker strong{color:#19633f;white-space:nowrap}.ticker div{white-space:nowrap;animation:scroll 20s linear infinite}.ticker span{margin-right:100px}@keyframes scroll{to{transform:translateX(-40%)}}section{padding:80px 8%}.welcome,.two-col,.staff-section{display:grid;grid-template-columns:1fr 1fr;gap:65px;align-items:center}h2{font-size:36px;line-height:1.25;color:#173f2d;margin:10px 0 20px}.feature-card,.image-box{position:relative;overflow:hidden}.feature-card img,.image-box img{width:100%;height:420px;object-fit:cover;display:block}.feature-overlay{position:absolute;bottom:0;left:0;right:0;background:rgba(20,76,48,.9);color:#fff;padding:18px;font-weight:bold}.text-link{color:#b87519;text-decoration:none;font-weight:bold}.stats{background:#1c5639;color:#fff;display:grid;grid-template-columns:repeat(4,1fr);padding:32px 8%;gap:20px}.stats div{text-align:center;border-right:1px solid rgba(255,255,255,.25)}.stats div:last-child{border:0}.stats b{display:block;font-size:25px}.stats span{font-size:13px;opacity:.8}.light-section{background:#f7f7f4}.section-head{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:35px}.notice-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:25px}.notice-grid article{background:#fff;padding:28px;border-bottom:4px solid #d59b38;box-shadow:0 5px 20px rgba(0,0,0,.06)}.notice-grid h3{color:#173f2d}.notice-grid a{color:#b87519;text-decoration:none;font-weight:bold}.date{font-size:11px;color:#fff;background:#1c633f;padding:5px 10px}.check-list{padding:0;list-style:none}.check-list li{padding:10px 0;border-bottom:1px solid #ddd}.check-list li:before{content:"✓";color:#c28220;font-weight:bold;margin-right:12px}.facilities{background:#eaf0e9}.center{text-align:center}.facility-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:35px}.facility-grid>div{background:#fff;padding:30px;font-size:32px}.facility-grid h3{font-size:20px;margin:8px 0;color:#173f2d}.facility-grid p{font-size:14px}.gallery-section{background:#fff}.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.gallery img{width:100%;height:280px;object-fit:cover}.gallery img:first-child{grid-row:span 2;height:572px}.staff-section{background:#f7f4ee}.staff-card{background:#1d563a;color:#fff;padding:35px;display:flex;flex-direction:column;gap:12px}.staff-card b{font-size:24px}.staff-card a{color:#f0c36c;text-decoration:none}.disclosure{background:#f1f5f0}.download-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-top:30px}.download-grid a{background:#fff;color:#173f2d;padding:20px;text-decoration:none;font-weight:bold;display:flex;justify-content:space-between;border-left:4px solid #c88725}footer{background:#153527;color:#e9eee9;padding:55px 8%;display:grid;grid-template-columns:1.3fr 1fr 1.2fr;gap:50px}footer h2,footer h3{color:#fff}footer a{display:block;color:#d9e5dc;text-decoration:none;margin:8px 0}.footer-brand img{width:90px;height:90px;border-radius:50%;object-fit:cover;background:#fff}.copyright{background:#10291e;color:#b7c6bc;text-align:center;padding:14px;font-size:13px}@media(max-width:850px){.topbar{flex-direction:column}.brand h1{font-size:19px}.brand p{font-size:11px}.menu-btn{display:block}nav{display:none;flex-direction:column;padding:0}nav.open{display:flex}nav a{padding:12px 8%;border-bottom:1px solid rgba(255,255,255,.15)}.hero{min-height:500px;padding:9%}.hero h2{font-size:36px}.welcome,.two-col,.staff-section{grid-template-columns:1fr;gap:35px}.stats{grid-template-columns:repeat(2,1fr)}.notice-grid,.facility-grid,.download-grid{grid-template-columns:1fr}.gallery{grid-template-columns:1fr}.gallery img,.gallery img:first-child{height:320px;grid-row:auto}.section-head{align-items:start;flex-direction:column}footer{grid-template-columns:1fr}section{padding:55px 6%}}
.principal-message{background:#fff8ee;padding:80px 15%}
.principal-content{max-width:1000px;margin:auto;background:#fff;padding:45px 55px;box-shadow:0 8px 28px rgba(0,0,0,.08);border-top:5px solid #c88725}
.principal-content blockquote{margin:28px 0;padding:18px 25px;border-left:5px solid #19633f;background:#f4f8f3;font-size:18px;font-weight:bold;color:#173f2d}
.signature{margin-top:28px;color:#173f2d}
.under-construction{margin-top:12px;padding:10px 14px;background:#d89a32;color:#fff;text-align:center}
.under-construction-inline{font-size:11px;color:#b87519}
@media(max-width:850px){.principal-message{padding:55px 6%}.principal-content{padding:28px 22px}}

/* Improved Home Page image fitting */
.hero{
  background-image:linear-gradient(90deg,rgba(8,38,26,.88) 0%,rgba(8,38,26,.58) 42%,rgba(8,38,26,.12) 100%),url('assets/activity2.jpeg');
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
}
@media (max-width:850px){
  .hero{
    min-height:620px;
    background-size:cover;
    background-position:58% center;
  }
}
@media (max-width:520px){
  .hero{
    min-height:560px;
    background-position:60% center;
  }
}
.principal-message {
    padding: 60px 8%;
    background: #f8faf7;
    color: #333;
    line-height: 1.8;
}

.principal-content {
    max-width: 1200px;
    margin: auto;
}

.section-label {
    color: #98752b;
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 2px;
}

.principal-message h2 {
    color: #174b35;
    font-size: 32px;
    margin: 10px 0 30px;
}

.principal-layout {
    display: flex;
    align-items: flex-start;
    gap: 35px;
}

.principal-image {
    flex: 0 0 260px;
    text-align: center;
    background: #fff;
    padding: 15px;
    border-radius: 12px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
}

.principal-image img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    object-position: center top;
    border-radius: 8px;
    display: block;
}

.principal-image h3 {
    color: #174b35;
    margin: 15px 0 0;
}

.principal-image p {
    font-size: 14px;
    margin: 2px 0 0;
}

.principal-text {
    flex: 1;
    min-width: 0;
}

.principal-text p {
    margin: 0 0 16px;
    text-align: justify;
}

.principal-text blockquote {
    margin: 25px 0;
    padding: 15px 20px;
    border-left: 4px solid #b89543;
    background: #eef3ec;
    color: #174b35;
    font-weight: 600;
    font-style: italic;
}

.signature {
    margin-top: 25px !important;
}

/* Responsive layout for mobile devices */
@media (max-width: 768px) {
    .principal-message {
        padding: 35px 5%;
    }

    .principal-layout {
        flex-direction: column;
        align-items: center;
    }

    .principal-image {
        flex: none;
        width: 100%;
        max-width: 280px;
        box-sizing: border-box;
    }

    .principal-image img {
        height: 300px;
    }

    .principal-text {
        width: 100%;
    }

    .principal-message h2 {
        font-size: 26px;
    }
}