/* Core Reset */
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Montserrat',sans-serif;line-height:1.6;background:#f5faf6;color:#334b3f}
/* Header */

header{background:#477258;color:#fff;display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:1000;}
.logo {
  font-weight: 700;
  font-size: 1.3rem;
  display: flex;
  align-items: center;
  gap: 8px; /* space between logo and text */
}

.logo img {
  height: 200px; /* adjust the size as you like */
  width: auto;
}

nav ul{display:flex;gap:1rem;list-style:none;align-items:center}
nav a{color:#e6f2ec;text-decoration:none;font-weight:600;font-size:.95rem}
nav a:hover{color:#c5e0d2}
.nav-btn, .link-btn{background:transparent;border:1px solid #c5e0d2;color:#e6f2ec;padding:.35rem .6rem;border-radius:999px;cursor:pointer;font-weight:600;text-decoration:none;display:inline-block}
.nav-btn:hover, .link-btn:hover{background:#c5e0d2;color:#2b3b33}

/* Banner & Hero */
.banner{background:#c5e0d2;padding:4rem 1rem 2rem;text-align:center;font-weight:bold;color:#334b3f}
.hero{text-align:center;padding:6rem 2rem 4rem;background:#e1f0e8;color:#334b3f}
.hero h1{font-size:2.5rem;margin-bottom:1rem}
/* Sections */
.section{padding:3rem 2rem;text-align:center}
/* Cards */
.cards{display:flex;flex-wrap:wrap;gap:1.5rem;justify-content:center;margin-top:2rem}
.card{background:#fff;border-radius:8px;padding:1.5rem;width:320px;max-width:100%;box-shadow:0 2px 10px rgba(0,0,0,.1);color:#334b3f;text-align:left}
.card i{font-size:2rem;margin-bottom:1rem;color:#477258}
.card.grow{width:520px}
/* Lists / Grids */
.list{list-style:none;display:grid;gap:.5rem;margin-top:.75rem}
.video-grid{display:grid;grid-template-columns:1fr;gap:.75rem}
.video-grid iframe{width:100%;height:170px;border:0;border-radius:8px}
.gallery-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem}
.gallery-grid img{width:100%;height:100%;object-fit:cover;border-radius:8px}
/* Forms */
form{display:flex;flex-direction:column;gap:1rem;max-width:700px;margin:0 auto;padding:2rem;background:#fff;border-radius:8px;box-shadow:0 2px 10px rgba(0,0,0,.1)}
form input,form textarea,form select{padding:.75rem;border:1px solid #c5e0d2;border-radius:4px;font-size:1rem}
.subjects{display:flex;flex-wrap:wrap;gap:1rem;justify-content:flex-start}
/* Buttons */
.btn{background:#477258;color:#fff;width:60px;height:60px;border:none;border-radius:12px;cursor:pointer;font-weight:bold;font-size:1rem;font-family:'Poppins',sans-serif;display:flex;align-items:center;justify-content:center;text-align:center;margin:0 auto 0;transition:transform .3s,background .3s}
.btn.small{width:auto;height:auto;padding:.6rem 1rem;margin:1rem 0 0}
.btn span{display:inline-block}
.btn:hover{background:#375947;transform:rotate(5deg)}
/* Tables */
.report-table,.timetable-table{width:100%;border-collapse:collapse;margin-top:.5rem;background:#fff}
.report-table th,.report-table td,.timetable-table th,.timetable-table td{padding:.5rem;border-bottom:1px solid #c5e0d2;text-align:left}
.report-table thead th,.timetable-table thead th{background:#e6f2ec}
/* Footer */
footer{background:#477258;color:#fff;padding:1.5rem;text-align:center;margin-top:2rem}
/* Chatbot */
.chatbot-toggle{position:fixed;bottom:20px;right:20px;background:#007bff;color:#fff;border:none;border-radius:50%;padding:15px;font-size:20px;cursor:pointer;z-index:1000}
.chatbot-container{position:fixed;bottom:80px;right:20px;width:300px;background:#fff;border:1px solid #ccc;border-radius:10px;display:none;flex-direction:column;box-shadow:0 0 15px rgba(0,0,0,.2);z-index:1000}
.chatbot-container.open{display:flex}
.chatbot-header{background:#007bff;color:#fff;padding:10px;display:flex;justify-content:space-between;align-items:center;border-top-left-radius:10px;border-top-right-radius:10px}
.chatbot-messages{padding:10px;height:200px;overflow-y:auto;font-size:14px}
.chatbot-container input{border:none;border-top:1px solid #ccc;padding:10px;font-size:14px;width:100%;outline:none}
.message{margin-bottom:10px}
.close-x{background:transparent;border:none;color:#fff;font-size:18px;cursor:pointer}
/* Utilities */
.hidden{display:none}
.muted{opacity:.7;font-size:.95rem}
/* FullCalendar sizing */
.calendar{background:#fff;border-radius:8px;box-shadow:0 2px 10px rgba(0,0,0,.1);padding:1rem}
/* Responsive tweaks */
@media(min-width:768px){
  .video-grid{grid-template-columns:1fr 1fr}
  .gallery-grid{grid-template-columns:repeat(4,1fr)}
}
#class-dpp .cards {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

#class-dpp .card {
  background: #fff;
  padding: 1rem;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  flex: 1 1 250px;
}

#class-dpp .list {
  list-style: none;
  padding: 0;
}

#class-dpp .selection {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin-top: 1rem;
}

#class-dpp .selection label {
  font-weight: 600;
  margin-right: 0.5rem;
}

#class-dpp select {
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  border: 1px solid #c5e0d2;
  font-size: 1rem;
  min-width: 150px;
}
html {
  scroll-behavior: smooth;
}
/* Make buttons normal size only on Parent Portal page */
body[data-page="parent"] .btn {
  width: auto;
  height: auto;
  margin: 0;
  padding: 0.45rem 1.1rem;
  border-radius: 6px;
}