/* ===== Reset & base ===== */
    :root{
      --green:#06502b;
      --gold:#c69c34;
      --muted:#666;
      --bg:#f8faf8;
      --card:#ffffff;
      --maxw:1100px;
      --radius:10px;
      transition: all 0.3s ease-in-out;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      background:linear-gradient(180deg, #f7fbf7 0%, #f0f6f0 100%);
      color:#222;
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
      line-height:1.45;
    }
    a{color:var(--green); text-decoration:none}
/* Buttons and links */
button, a {
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

a:hover, button:hover {
  transform: translateY(-2px);
  opacity: 0.9;}

    .container{max-width:var(--maxw); margin:0 auto; padding:24px;}

    /* ===== Header/Nav ===== */
    header{background:transparent; position:sticky; top:0; z-index:40; backdrop-filter: blur(4px);}
    .topbar{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 8px;}
    .brand{display:flex; align-items:center; gap:12px;}
    .logo {
      width:56px; height:56px; border-radius:10px;
      display:flex; align-items:center; justify-content:center;
      background:linear-gradient(135deg, var(--green), #2b8c5c);
      color:white; font-weight:700; font-size:20px;
      box-shadow: 0 4px 14px rgba(10,107,58,0.12);
    }
    .brand h1{font-size:18px; margin:0; line-height:1;}
    nav ul{list-style:none; margin:0; padding:0; display:flex; gap:14px; align-items:center;}
    nav li{font-size:15px;}
    nav ul li a:hover{
        background-color: #0a6b3a;
        color: white;
        border-radius: 10px;
        padding: 10px;
    }
    .cta{
      background:var(--gold); color:#fff; padding:8px 12px; border-radius:8px; font-weight:600;
      box-shadow:0 4px 10px rgba(198,156,52,0.18);
    }
    /* mobile */
    .hamb{display:none; width:44px; height:44px; align-items:center; justify-content:center; border-radius:8px; background:#fff; box-shadow:0 2px 6px rgba(0,0,0,0.06)}
    @media (max-width:880px){
      nav ul{display:none}
      .hamb{display:flex}
    }

    /* ===== Hero ===== */
    .hero{
      margin-top:18px;
      background: linear-gradient(90deg, rgba(10,107,58,0.06) 0%, rgba(198,156,52,0.02) 100%);
      border-radius:var(--radius);
      padding:36px;
      display:grid;
      grid-template-columns: 1fr 420px;
      gap:24px;
      align-items:center;
    }
    .hero h2{margin:0 0 8px 0; font-size:28px; color:var(--green)}
    .hero p{margin:0 0 16px; color:var(--muted)}
    .hero .quicklinks{display:flex; gap:8px; flex-wrap:wrap}
    .card{background:var(--card); border-radius:12px; padding:16px; box-shadow:0 6px 18px rgba(24,24,24,0.06)}
    .programs{display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:12px}
    .prog{padding:10px; border-radius:8px; border:1px solid rgba(10,107,58,0.06)}

    /* hero right visual */
    .hero-img{
      height:260px; border-radius:10px; overflow:hidden;
      display:flex; align-items:center; justify-content:center;
      background:
        radial-gradient(circle at 10% 20%, rgba(198,156,52,0.08), transparent 10%),
        linear-gradient(180deg, #ffffff, #f3f7f3);
      border:1px solid rgba(10,107,58,0.04);
    }
    .hero-img .placeholder{
      text-align:center; color:var(--muted);
      padding:18px;
    }
    .hero .enroll{display:inline-block; margin-top:12px; padding:10px 14px; background:var(--green); color:white; border-radius:10px}

    @media (max-width:980px){
      .hero{grid-template-columns: 1fr; padding:18px;}
      .hero-img{height:180px}
    }

    /* ===== Sections ===== */
    section{margin:28px 0}
    .grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
    .grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:18px}
    @media (max-width:880px){
      .grid-3,.grid-2{grid-template-columns:1fr}
    }

    h3{margin:0 0 10px 0; color:var(--green)}
    p.lead{color:var(--muted); margin:0 0 12px 0}

    /* news list */
    .news-item{display:flex; gap:12px; align-items:flex-start}
    .news-thumb{width:86px; height:64px; border-radius:8px; background:linear-gradient(135deg,#e7f6ef,#f7f9f7); display:flex;align-items:center;justify-content:center;color:var(--muted); font-size:12px}

    /* gallery */
   .gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.gallery img {
  width: 100%;
  height: 110px;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  transition: transform 0.3s ease;
}

.gallery img:hover {
  transform: scale(1.05);
}

@media (max-width:980px) {
  .gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}

    /* contact */
    .contact-grid{display:grid; grid-template-columns:2fr 1fr; gap:18px}
    @media (max-width:980px){ .contact-grid{grid-template-columns:1fr} }
    .contact-form input, .contact-form textarea{
      width:100%; padding:10px; margin-bottom:8px; border-radius:8px; border:1px solid #e8efe8; background:#fff;
    }
    .btn{display:inline-block; padding:10px 12px; border-radius:8px; background:var(--green); color:white; font-weight:600}

    footer{padding:20px 8px; color:var(--muted); border-top:1px solid rgba(10,107,58,0.04); margin-top:24px}
    .small{font-size:13px}

    /* Existing .cta style: */
    .cta{
      background:var(--gold); color:#fff; padding:8px 12px; border-radius:8px; font-weight:600;
      box-shadow:0 4px 10px rgba(198,156,52,0.18);
    }
    
    /* NEW STYLE: ADMIN LOGIN BUTTON */
    .admin-login {
      /* Use the main green color for a high-priority look */
      background:var(--green); 
      color:#fff; 
      padding:8px 12px; 
      border-radius:8px; 
      font-weight:600;
      box-shadow:0 4px 10px rgba(10,107,58,0.12); /* Green shadow */
    }
    
    /* Optional: Small spacing for the admin link on mobile */
    @media (max-width:880px){
      #mainNav li:last-child {
        margin-top: 8px; /* Adds space above the 'Apply' button on the mobile menu */
    }
}

#backToTop {
  position: fixed;
  bottom: 26px;
  right: 26px;
  background: var(--green);
  color: white;
  border: none;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  font-size: 20px;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
 box-shadow: 0 4px 14px rgba(10,107,58,0.2);
  transition: background 0.3s ease, transform 0.2s ease;
  z-index: 999;
}

#backToTop:hover {
  background: var(--gold);
  transform: translateY(-3px);
}
/* Mobile layout adjustments */

 

  .gallery-grid {
    grid-template-columns: 1fr 1fr; /* 2 images per row instead of 4 */
  }

  footer {
    flex-direction: column;
    text-align: center;
  }


/* Fade-in animation */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-in.show {
  opacity: 1;
  transform: translateY(0);
}
.carousel img {
  width: 100%;
  display: none;
  border-radius: 8px;
}
.carousel img.active {
  display: block;
}