:root{
  --green:#0b4f3a;
  --muted:#cfd6d1;
  --white: #ffffff;
  --nav-height:52px;
  --container-w:1100px;
}
*{box-sizing:border-box}
html,body{height:100%; margin:0; font-family: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, Arial;}
body{background:#f3f3f3; color:#222; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;}
.topbar{position:fixed; left:0; right:0; top:0; height:var(--nav-height); background: linear-gradient(180deg,var(--green), #0e6b4e); display:flex; align-items:center; justify-content:center; padding:0 18px; z-index:1200; font-size:14px; letter-spacing:0.6px; color:#fff;}
.topbar .links{ display:flex; gap:14px; align-items:center; }
.topbar .links a{ color:#fff; text-decoration:none; }
.spacer{ height: calc(var(--nav-height) + 6px); }
.wrapper{ max-width: var(--container-w); margin: 18px auto; padding:0 12px; }
.hero{ display:block; border-radius:8px; overflow:hidden; margin-bottom:18px; }
.hero .band{ position:relative; width:100%; height:220px; background-size:cover; background-position:center; display:flex; align-items:center; justify-content:center; }
.hero .band.title-band{ height:240px; }
.hero .title { font-weight:800; font-size:72px; color:#fff; text-align:center; letter-spacing:2px; text-shadow:0 6px 18px rgba(0,0,0,0.6); padding:8px 12px; }
.card{ background:var(--white); border-radius:8px; padding:28px; box-shadow:0 6px 20px rgba(0,0,0,0.08); margin-bottom:18px; }
.mini-nav{ color:#666; display:flex; justify-content:center; gap:8px; font-size:14px; margin-bottom:8px; }
.mini-nav .sep{ opacity:0.6; margin:0 6px; }
.emblems{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin:12px 0 18px; }
.emblems img{ width:84px; height:84px; object-fit:contain; background: rgba(255,255,255,0.95); padding:6px; border-radius:8px; box-shadow:0 4px 12px rgba(0,0,0,0.12); }
footer{ max-width:var(--container-w); margin:18px auto 60px; padding:12px; color:#fff; text-align:center; background:var(--green); border-radius:6px; box-shadow:0 6px 20px rgba(3,25,15,0.12); }
@media (max-width:900px){ .hero .band, .hero .band.title-band { height:180px; } .hero .title{ font-size:56px; } .emblems img{ width:72px; height:72px; } }
@media (max-width:520px){ .topbar{ font-size:13px; } .hero .band, .hero .band.title-band { height:140px; } .hero .title{ font-size:40px; } .emblems img{ width:56px; height:56px; } .card{ padding:18px; } }

@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-15px); }
  100% { transform: translateY(0px); }
}

/* Hero section continuous movement */
.hero {
  animation: float 6s ease-in-out infinite;
}

/* Title continuous movement */
.hero h1, .hero-title {
  animation: float 6s ease-in-out infinite;
}
.culture-section {
  padding: 60px 10%;
  background-color: #f8f9fa;
  line-height: 1.7;
  font-family: 'Poppins', sans-serif;
}

.section-title {
  text-align: center;
  font-size: 2.8rem;
  font-weight: 700;
  color: #006400;
  margin-bottom: 40px;
  animation: float 6s ease-in-out infinite;
}

.culture-section h2 {
  color: #004d00;
  margin-top: 30px;
}

.culture-section h3 {
  color: #006400;
}

.culture-section p, 
.culture-section li {
  font-size: 1.05rem;
  color: #333;
}

.culture-section ol {
  margin-left: 20px;
}

@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0px); }
}
/* --- Lively Animation Enhancements --- */

/* Smooth transitions */
* {
  transition: all 0.4s ease-in-out;
}

/* Hero section animations */
.hero {
  opacity: 1;
  transform: translateY(0);
  animation: float 6s ease-in-out infinite;
}

@keyframes heroFadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Section fade-in on scroll */
.fade-in {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1s ease, transform 1s ease;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Navbar scroll animation */
.navbar {
  transition: background-color 0.5s ease, padding 0.3s ease;
}

.navbar.scrolled {
  background-color: rgba(0, 0, 0, 0.8);
  padding: 10px 0;
}

/* Hover effects */
button, a, img {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

button:hover, a:hover, img:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

/* Optional: subtle glowing button effect */
button:hover {
  background-color: #ffd95a;
  color: #222;
}
/* --- Floating Animation for Page Headers --- */
@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0px); }
}

/* Apply float animation to top sections on all subpages */
.page-float {
  animation: float 6s ease-in-out infinite;
}
/* Smooth float animation like homepage */
@keyframes floatUpDown {
  0% { transform: translateY(0); }
  50% { transform: translateY(-15px); }
  100% { transform: translateY(0); }
}

/* Apply to content cards */
.card, .wrapper img, iframe {
  animation: floatUpDown 6s ease-in-out infinite;
}