* { box-sizing: border-box; }
 :root {
  --primary: #6f002e;
  --pink: #ff1f8f;
  --hot-pink: #ff0080;
  --red: #ff1744;
  --deep-red: #b00030;
  --gold: #ffd166;
  --text: #251225;
  --muted: #76566a;
  --soft: #fff0f7;
  --white: #ffffff;
  --pink-red-gradient: linear-gradient(135deg, #ff4bb4 0%, #ff006e 45%, #ff1744 100%);
  --pink-red-strong: linear-gradient(135deg, #ff0a8a 0%, #e40046 55%, #b00030 100%);
}
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Segoe UI", Arial, sans-serif;
  color: var(--text);
  background: #fff5fa;
}
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  min-height: 66px;
  padding: 8px 5%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255, 0, 110, 0.20);
  box-shadow: 0 10px 28px rgba(255, 0, 110, 0.12);
}
.brand {
  display: flex;
  align-items: center;
  gap: 13px;
  text-decoration: none;
  color: var(--primary);
  font-size: 16px;
  font-weight: 900;
  letter-spacing: -0.3px;
}
.brand img {
  width: 42px;
  height: 42px;
  object-fit: contain;
  border-radius: 50%;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.nav-links a {
  padding: 8px 12px;
  border-radius: 999px;
  color: #6f3150;
  text-decoration: none;
  font-weight: 750;
}
.nav-links a:hover { background: #ffe3f1; color: var(--hot-pink); }
.nav-links .login-link {
  color: #fff;
  background: var(--pink-red-gradient);
  box-shadow: 0 12px 24px rgba(255, 0, 110, 0.30);
}
.hero-section {
  min-height: 520px;
  position: relative;
  display: flex;
  align-items: center;
  padding: 56px 5%;
  overflow: hidden;
  background:
    url("school.png") center top/cover no-repeat,
    url("images/brightstar-login-school.png") center top/cover no-repeat;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(255,255,255,0.76) 0%, rgba(255,255,255,0.34) 43%, rgba(255,255,255,0.05) 100%);
  pointer-events: none;
}

.hero-section::after {
  content: "";
  position: absolute;
  right: -110px;
  top: 50px;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: rgba(255, 0, 110, 0.06);
}
.hero-content {
  position: relative;
  z-index: 2;
  width: min(620px, 100%);
}
.badge {
  display: inline-flex;
  padding: 8px 16px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ffe0f0, #ffd1e8);
  color: #a0003d;
  font-size: 15px;
  font-weight: 900;
  margin-bottom: 18px;
}
.hero-content h1 {
  margin: 0;
  font-size: clamp(34px, 5vw, 60px);
  line-height: 1.05;
  letter-spacing: -1.5px;
  color: #5e0026;
}
.hero-content p {
  width: min(720px, 100%);
  margin: 18px 0 24px;
  font-size: 18px;
  line-height: 1.55;
  color: #714a61;
}
.hero-actions { display: flex; gap: 18px; flex-wrap: wrap; }
.primary-btn, .secondary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 24px;
  border-radius: 14px;
  text-decoration: none;
  font-size: 15px;
  font-weight: 900;
}
.primary-btn {
  color: #fff;
  background: var(--pink-red-gradient);
  box-shadow: 0 22px 48px rgba(255, 0, 110, 0.30);
}
.secondary-btn {
  color: var(--primary);
  background: rgba(255,255,255,0.88);
  border: 1px solid rgba(255,0,110,0.22);
}
.section { padding: 64px 5%; }
.section-title { text-align: center; max-width: 760px; margin: 0 auto 42px; }
.section-title p, .eyebrow { margin: 0 0 10px; color: var(--hot-pink); font-weight: 900; letter-spacing: 0.7px; text-transform: uppercase; }
.section-title h2, .program-text h2 { margin: 0; color: var(--primary); font-size: clamp(28px, 3vw, 42px); line-height: 1.08; letter-spacing: -1.5px; }
.about-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.about-card {
  min-height: 230px;
  padding: 34px;
  border-radius: 30px;
  background: #fff;
  box-shadow: 0 18px 40px rgba(255, 0, 110, 0.10);
  border: 1px solid rgba(255,0,110,0.14);
}
.about-card h3 { margin: 0 0 14px; color: var(--primary); font-size: 25px; }
.about-card p { margin: 0; color: var(--muted); font-size: 18px; line-height: 1.65; }
.class-grid {
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 36px;
}
.class-card {
  min-height: 270px;
  padding: 52px 34px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  background: linear-gradient(180deg, #ffffff 0%, #fff0f7 100%);
  border-radius: 38px;
}
.class-card h3 {
  margin: 0 0 18px;
  font-size: clamp(52px, 5.2vw, 66px);
  line-height: 1;
  color: #8a0038;
}
.class-card p {
  max-width: 310px;
  font-size: clamp(25px, 2.4vw, 34px);
  line-height: 1.25;
  font-weight: 900;
  color: #c01667;
}

.program-section {
  margin: 0 5.5%;
  padding: 58px;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 42px;
  align-items: center;
  border-radius: 38px;
  color: #fff;
  background: var(--pink-red-strong);
  box-shadow: 0 24px 54px rgba(255, 0, 110, 0.28);
}
.program-text h2 { color: #fff; }
.program-text p:last-child { color: rgba(255,255,255,0.82); font-size: 20px; line-height: 1.7; }
.program-list { display: grid; gap: 14px; }
.program-list div { padding: 18px 22px; border-radius: 18px; background: rgba(255,255,255,0.14); font-size: 19px; font-weight: 800; }
.gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.gallery-card {
  min-height: 210px;
  display: flex;
  align-items: flex-end;
  padding: 22px;
  border-radius: 28px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255,0,110,0.03), rgba(120,0,45,0.72)),
    url("images/bsphoto.png") center top/cover no-repeat;
  box-shadow: 0 18px 40px rgba(255, 0, 110, 0.14);
}
.gallery-card span { color: #fff; font-size: 20px; font-weight: 900; text-shadow: 0 2px 10px rgba(0,0,0,0.4); }
.footer {
  padding: 36px 5.5%;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
  color: #fff;
  background: linear-gradient(135deg, #7a002f, #ff006e, #ff1744);
}
.footer h3 { margin: 0 0 8px; font-size: 24px; }
.footer p { margin: 0; color: rgba(255,255,255,0.76); }
.footer a { color: #fff; text-decoration: none; font-weight: 900; background: rgba(255,255,255,0.14); padding: 13px 18px; border-radius: 999px; }

.login-link, .primary-btn, .footer a {
  background: var(--pink-red-gradient) !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: 0 16px 34px rgba(255, 0, 110, 0.32), 0 0 0 1px rgba(255,255,255,0.25) inset;
}
.login-link:hover, .primary-btn:hover, .footer a:hover {
  transform: translateY(-2px);
  filter: brightness(1.08) saturate(1.15);
  box-shadow: 0 20px 44px rgba(255, 0, 80, 0.42);
}
.about-card:hover, .gallery-card:hover {
  transform: translateY(-4px);
  transition: 0.22s ease;
}

@media (max-width: 900px) {
  .site-header { position: static; align-items: flex-start; flex-direction: column; }
  .nav-links { justify-content: flex-start; }
  .about-grid, .program-section, .gallery-grid { grid-template-columns: 1fr; }
  .program-section { margin: 0 4%; padding: 34px; }
  .hero-content h1 { letter-spacing: -1.5px; }
  .hero-content p { font-size: 21px; }
  .class-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 26px; }
  .class-card { min-height: 230px; padding: 42px 24px; }
  .class-card h3 { font-size: 48px; }
  .class-card p { font-size: 24px; }
}
@media (max-width: 560px) {
  .badge { font-size: 14px; }
  .hero-section { padding: 54px 5%; }
  .primary-btn, .secondary-btn { width: 100%; }
  .brand span { font-size: 17px; }
  .footer { flex-direction: column; align-items: flex-start; }
  .class-grid { grid-template-columns: 1fr; gap: 20px; }
  .class-card { min-height: 210px; padding: 36px 20px; }
  .class-card h3 { font-size: 44px; }
  .class-card p { font-size: 22px; }
}

/* Clickable class cards for class-wise photo/text posts */
.class-card {
  text-decoration: none;
  cursor: pointer;
}
.class-card .view-class {
  margin-top: 20px;
  padding: 12px 18px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff006e, #d90429);
  color: #fff;
  font-size: clamp(18px, 2vw, 25px);
  font-weight: 900;
  box-shadow: 0 12px 28px rgba(255, 0, 110, 0.22);
}
.class-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 26px 54px rgba(255, 0, 110, 0.18);
}


/* Latest post preview shown on each class card */
.class-card .view-class {
  margin-top: 16px;
}
.latest-post-preview {
  width: 100%;
  max-width: 390px;
  margin-top: 22px;
  border-radius: 26px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid rgba(255, 0, 110, 0.18);
  box-shadow: 0 14px 32px rgba(255, 0, 110, 0.14);
  text-align: left;
}
.latest-post-preview img {
  width: 100%;
  height: 190px;
  display: block;
  object-fit: cover;
  background: #ffe3f1;
}
.latest-post-preview .preview-body {
  padding: 16px 18px 18px;
}
.latest-post-preview .preview-label {
  display: inline-flex;
  margin-bottom: 8px;
  padding: 5px 10px;
  border-radius: 999px;
  color: #fff;
  background: var(--pink-red-gradient);
  font-size: 13px;
  font-weight: 900;
}
.latest-post-preview .preview-title {
  margin: 0 0 8px;
  font-size: 24px;
  line-height: 1.15;
  color: #7d0031;
  font-weight: 950;
}
.latest-post-preview .preview-text {
  margin: 0;
  color: #7b5369;
  font-size: 16px;
  line-height: 1.45;
  font-weight: 750;
}
.latest-post-preview.empty-preview {
  padding: 18px;
  text-align: center;
  color: #a70048;
  font-size: 17px;
  font-weight: 900;
  background: #fff7fb;
}
@media (max-width: 900px) {
  .latest-post-preview img { height: 165px; }
  .latest-post-preview .preview-title { font-size: 21px; }
  .latest-post-preview .preview-text { font-size: 15px; }
}


/* Visitor Message to School Portal */
.visitor-message-modal{
  position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;padding:18px;background:rgba(31,7,25,.58);backdrop-filter:blur(8px);
}
.visitor-message-modal.show{display:flex;}
.visitor-message-box{
  width:min(560px,100%);max-height:92vh;overflow:auto;background:#fff;border-radius:30px;padding:28px;box-shadow:0 30px 90px rgba(0,0,0,.28);position:relative;border:1px solid rgba(255,0,110,.18);
}
.visitor-close{position:absolute;right:18px;top:14px;width:38px;height:38px;border:0;border-radius:50%;background:#fff0f7;color:#9d003f;font-size:26px;font-weight:900;cursor:pointer;}
.message-icon{width:72px;height:72px;border-radius:24px;background:var(--pink-red-gradient);display:grid;place-items:center;color:#fff;font-size:34px;box-shadow:0 18px 40px rgba(255,0,110,.24);}
.visitor-message-box h2{margin:16px 0 8px;color:#6f002e;font-size:30px;}
.message-help{margin:0 0 18px;color:#76566a;line-height:1.6;font-weight:650;}
.visitor-message-form{display:grid;gap:10px;}
.visitor-message-form label{font-weight:900;color:#6f002e;font-size:14px;}
.visitor-message-form input,.visitor-message-form select,.visitor-message-form textarea{width:100%;border:1px solid #ffd0e5;border-radius:16px;padding:13px 14px;font-size:15px;background:#fff8fc;outline:none;}
.visitor-message-form textarea{min-height:125px;resize:vertical;}
.visitor-message-form input:focus,.visitor-message-form select:focus,.visitor-message-form textarea:focus{border-color:#ff1f8f;box-shadow:0 0 0 4px rgba(255,31,143,.12);}
.visitor-message-form button{margin-top:6px;border:0;border-radius:16px;padding:14px 18px;background:var(--pink-red-gradient);color:#fff;font-size:16px;font-weight:900;cursor:pointer;box-shadow:0 18px 38px rgba(255,0,110,.24);}
.visitor-message-form button:disabled{opacity:.65;cursor:not-allowed;}
.message-status{min-height:22px;margin:5px 0 0;color:#9d003f;font-weight:800;}
@media(max-width:640px){.visitor-message-box{padding:23px 18px;border-radius:24px}.visitor-message-box h2{font-size:25px}}