:root{
  --black:#0b090a;
  --dark:#161a1d;
  --maroon:#660708;
  --red:#ba181b;
  --gray:#b1a7a6;
  --offwhite:#f5f3f4;

  --glass: rgba(245,243,244,0.12);
  --border: rgba(245,243,244,0.18);
  --shadow: 0 10px 30px rgba(0,0,0,.25);
  --softShadow: 0 10px 22px rgba(0,0,0,.22);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: radial-gradient(1200px 600px at 20% 0%, rgba(186,24,27,.25), transparent 60%),
              radial-gradient(1000px 600px at 90% 20%, rgba(102,7,8,.35), transparent 55%),
              linear-gradient(180deg, var(--black), var(--dark));
  color: var(--offwhite);
  overflow-x:hidden;
}

/* ==== Basic “deterrents” (NOT real security) ==== */
body.no-select{
  -webkit-user-select:none; user-select:none;
}
img, video{ -webkit-user-drag:none; }

/* ===== Utilities ===== */
.container{ width:min(1200px,92%); margin: 0 auto; }
.section{ padding: 30px 0; }
.muted{ color: rgba(245,243,244,.82); }
a{ color: inherit; }
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(245,243,244,.16);
  background: rgba(245,243,244,.06);
  color: var(--offwhite);
  text-decoration:none;
  font-weight: 800;
  transition: transform .2s ease, background .2s ease;
}
.btn:hover{ transform: translateY(-1px); background: rgba(186,24,27,.18); }
.pill{
  display:inline-flex; align-items:center; gap:8px;
  padding: 8px 12px; border-radius: 999px;
  border: 1px solid rgba(245,243,244,.14);
  background: rgba(245,243,244,.06);
  font-weight: 800; font-size: 12px;
}

/* ===== Scroll Reveal ===== */
.reveal{
  opacity:0;
  transform: translateY(14px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal.show{
  opacity:1;
  transform: translateY(0);
}

/* ===== Top headlines ticker ===== */
.top-ticker{
  position: sticky;
  top: 0;
  z-index: 9999;
  background: rgba(11,9,10,.85);
  border-bottom: 1px solid rgba(245,243,244,.1);
  backdrop-filter: blur(10px);
}
.ticker-track{
  display:flex; gap:40px; white-space:nowrap; padding:10px 0; overflow:hidden;
}
.ticker-track > div{
  display:inline-flex; gap:40px;
  animation: ticker 18s linear infinite;
  padding-left: 100%;
}
.ticker-item{ opacity:.9; font-weight:700; letter-spacing:.3px; }
.ticker-item b{ color:#fff; }
@keyframes ticker{
  from{transform: translateX(0)}
  to{transform: translateX(-100%)}
}

/* ===== Sticky navbar (auto-hide) ===== */
.navWrap{
  position: sticky;
  top: 42px;
  z-index: 9998;
  transition: transform .28s ease, background .28s ease;
}
.navWrap.hide{ transform: translateY(-110%); }

.navbar{
  margin: 10px auto;
  width: min(1200px, 92%);
  background: var(--glass);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  border-radius: 18px;
  backdrop-filter: blur(14px);
  padding: 10px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  position: relative;
}

.brand{
  display:flex;
  align-items:center;
  gap: 12px;
  min-width: 260px;
}
.logo{
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid rgba(245,243,244,.28);
  box-shadow: var(--softShadow);
  overflow:hidden;
  position: relative;
  flex: 0 0 auto;
}
.logo::after{
  content:"";
  position:absolute; inset:-20%;
  background: conic-gradient(from 180deg, rgba(186,24,27,.0), rgba(186,24,27,.65), rgba(245,243,244,.0));
  animation: spin 2.4s linear infinite;
  filter: blur(10px);
  opacity: .7;
}
@keyframes spin{to{transform: rotate(360deg)}}
.logo img{width:100%;height:100%;object-fit:cover;position:relative;z-index:2}

.brandText{ display:flex; flex-direction:column; line-height:1.1; }

/* Tricolor animated school name */
.schoolName{
  font-weight: 900;
  font-size: 16px;
  letter-spacing: .5px;
  background: linear-gradient(90deg,
    #ff9933 0%, #ff9933 30%,
    #ffffff 33%, #ffffff 62%,
    #138808 66%, #138808 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: triMove 2.8s ease-in-out infinite alternate;
  text-shadow: 0 8px 24px rgba(0,0,0,.25);
}
@keyframes triMove{
  from{background-position: 0% 50%}
  to{background-position: 100% 50%}
}
.schoolSub{
  font-size: 12px;
  color: rgba(245,243,244,.85);
}

.cbseLogo{
  width: 46px; height: 46px;
  border-radius: 12px;
  border: 1px solid rgba(245,243,244,.28);
  overflow:hidden;
  box-shadow: var(--softShadow);
  animation: floaty 2.8s ease-in-out infinite;
  flex: 0 0 auto;
}
.cbseLogo img{ width:100%; height:100%; object-fit:cover; }
@keyframes floaty{
  0%,100%{transform: translateY(0)}
  50%{transform: translateY(-4px)}
}

/* Nav links */
.navLinks{
  display:flex; align-items:center; gap: 10px;
  flex-wrap:wrap;
  justify-content:center;
}
.navLinks a{
  text-decoration:none;
  color: rgba(245,243,244,.92);
  font-weight: 800;
  font-size: 13px;
  padding: 10px 12px;
  border-radius: 12px;
  transition: transform .2s ease, background .2s ease;
  white-space:nowrap;
}
.navLinks a:hover{
  background: rgba(186,24,27,.22);
  transform: translateY(-1px);
}
.navLinks a.active{
  background: rgba(245,243,244,.10);
  border: 1px solid rgba(245,243,244,.12);
}

.ctaArea{ display:flex; align-items:center; gap:10px; }

.hamburger{
  display:none;
  width: 44px; height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(245,243,244,.22);
  background: rgba(245,243,244,.06);
  color: var(--offwhite);
  cursor:pointer;
  font-size: 18px;
}

/* Mobile nav dropdown */
@media (max-width: 900px){
  .brand{min-width:auto}
  .hamburger{display:inline-flex;align-items:center;justify-content:center}
  .cbseLogo{display:none}

  .navLinks{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: calc(100% + 10px);
    width: min(1200px, 92%);
    background: rgba(11,9,10,.75);
    border: 1px solid rgba(245,243,244,.16);
    border-radius: 18px;
    padding: 10px;
    box-shadow: var(--shadow);
    display:none;
  }
  .navLinks.open{display:flex}
}

/* ===== Hero Slider ===== */
.hero{
  padding: 18px 0 0;
}
.slider{
  width:min(1200px,92%);
  margin: 16px auto 0;
  border-radius: 22px;
  overflow:hidden;
  border: 1px solid rgba(245,243,244,.14);
  background: rgba(245,243,244,.04);
  box-shadow: var(--shadow);
  position: relative;
}
.slides{
  height: min(62vh, 520px);
  position: relative;
}
.slide{
  position:absolute; inset:0;
  opacity:0;
  transition: opacity .7s ease;
  display:flex; align-items:center; justify-content:center;
  background: rgba(0,0,0,.25);
}
.slide.active{ opacity:1; }
.slide img, .slide video{
  width:100%; height:100%;
  object-fit: cover;
  transform: scale(1.05);
}

/* different transitions per slide */
.slide.fx-zoom.active img{ animation: fxZoom 6s ease-in-out both; }
@keyframes fxZoom{ from{transform:scale(1.05)} to{transform:scale(1.18)} }

.slide.fx-up.active img{ animation: fxUp 6s ease-in-out both; }
@keyframes fxUp{ from{transform:translateY(12px) scale(1.08)} to{transform:translateY(-12px) scale(1.18)} }

.slide.fx-down.active img{ animation: fxDown 6s ease-in-out both; }
@keyframes fxDown{ from{transform:translateY(-12px) scale(1.08)} to{transform:translateY(12px) scale(1.18)} }

.slide.fx-spin-in.active img{ animation: fxSpinIn 1.2s ease both, fxZoom 6s ease-in-out both; }
@keyframes fxSpinIn{ from{transform:rotate(-6deg) scale(.96); opacity:.5} to{transform:rotate(0deg) scale(1.05); opacity:1} }

.slide.fx-spin-out.active img{ animation: fxSpinOut 1.2s ease both, fxZoom 6s ease-in-out both; }
@keyframes fxSpinOut{ from{transform:rotate(6deg) scale(.96); opacity:.5} to{transform:rotate(0deg) scale(1.05); opacity:1} }

.slide.fx-fade.active img{ animation: fxFade 1.2s ease both, fxZoom 6s ease-in-out both; }
@keyframes fxFade{ from{opacity:.2} to{opacity:1} }

/* overlay text */
.heroOverlay{
  position:absolute; inset:auto 0 0 0;
  padding: 18px 16px 14px;
  background: linear-gradient(180deg, transparent, rgba(11,9,10,.75));
  display:flex; justify-content:space-between; gap:12px; align-items:end;
}
.heroOverlay h1{
  font-size: clamp(18px, 2.2vw, 26px);
  font-weight: 950;
}
.heroOverlay p{
  max-width: 680px;
  color: rgba(245,243,244,.86);
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.5;
}

/* controls */
.sliderControls{
  position:absolute; inset: 12px 12px auto auto;
  display:flex; gap:10px; z-index:5;
}
.iconBtn{
  width: 42px; height: 42px;
  border-radius: 14px;
  border: 1px solid rgba(245,243,244,.14);
  background: rgba(11,9,10,.35);
  backdrop-filter: blur(10px);
  color: var(--offwhite);
  cursor:pointer;
  font-size: 18px;
}
.iconBtn:hover{ background: rgba(186,24,27,.18); }

.dots{
  position:absolute; inset:auto 0 12px 0;
  display:flex; gap:8px; justify-content:center; z-index:6;
}
.dot{
  width: 10px; height: 10px;
  border-radius: 999px;
  border: 1px solid rgba(245,243,244,.35);
  background: rgba(245,243,244,.12);
  cursor:pointer;
  transition: transform .2s ease, background .2s ease;
}
.dot.active{ background: rgba(245,243,244,.85); transform: scale(1.15); }

@media(max-width: 700px){
  .slides{ height: 52vh; }
  .heroOverlay{ flex-direction:column; align-items:flex-start; }
}

/* ===== Leaders Section ===== */
.card{
  background: rgba(245,243,244,.06);
  border: 1px solid rgba(245,243,244,.14);
  border-radius: 18px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
  padding: 16px;
  overflow:hidden;
}
.leadersGrid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.leader{
  display:flex; flex-direction:column; align-items:center;
  text-align:center;
  padding: 16px 12px;
  border-radius: 18px;
  background: rgba(11,9,10,.18);
  border: 1px solid rgba(245,243,244,.10);
  transition: transform .2s ease, background .2s ease;
}
.leader:hover{ transform: translateY(-2px); background: rgba(186,24,27,.12); }
.leader img{
  width: 92px; height: 92px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid rgba(245,243,244,.24);
  margin-bottom: 10px;
}
.leader h4{ font-size: 14px; font-weight: 950; }
.leader p{ font-size: 12px; color: rgba(245,243,244,.82); margin-top: 6px; line-height: 1.35; }

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

/* ===== Principal + Notice (fixed) ===== */
.gridPN{
  display:grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 18px;
  align-items: stretch;
}
.principalCard{
  display:flex;
  gap: 14px;
  align-items:flex-start;
}
.principalCard img{
  width: 86px; height: 86px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid rgba(245,243,244,.26);
  flex: 0 0 auto;
}
.principalCard h3{ margin: 4px 0 6px; font-size: 18px; }
.principalCard p{ color: rgba(245,243,244,.88); font-size: 13px; line-height: 1.55; }

.noticeCard{ min-height: 250px; display:flex; flex-direction:column; gap:10px; }
.noticeTitle{
  font-weight: 950;
  letter-spacing:.5px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.badge{
  background: rgba(186,24,27,.25);
  border: 1px solid rgba(186,24,27,.35);
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
}
.noticeScroll{
  border: 1px solid rgba(245,243,244,.12);
  border-radius: 14px;
  background: rgba(11,9,10,.35);
  padding: 10px;
  flex: 1;
  overflow:hidden; /* prevents overlap */
  position:relative;
}
.noticeList{
  display:flex; flex-direction:column; gap:10px;
  animation: scrollUp 12s linear infinite;
}
.noticeItem{
  padding: 10px 10px;
  border-radius: 12px;
  background: rgba(245,243,244,.05);
  border: 1px solid rgba(245,243,244,.10);
  font-size: 13px;
  line-height: 1.35;
}
.noticeItem b{color:#fff}
.noticeScroll:hover .noticeList{ animation-play-state: paused; }
@keyframes scrollUp{
  0%{ transform: translateY(0); }
  100%{ transform: translateY(-45%); }
}
@media (max-width: 900px){
  .gridPN{grid-template-columns: 1fr;}
}

/* ===== Page Tiles Marquee ===== */
.tileMarquee{
  border-radius: 22px;
  border: 1px solid rgba(245,243,244,.14);
  background: rgba(245,243,244,.04);
  overflow:hidden;
  box-shadow: var(--shadow);
  padding: 14px 0;
}
.tileTrack{
  display:flex;
  gap: 14px;
  width:max-content;
  animation: tileMove 16s linear infinite;
  padding-left: 100%;
}
@keyframes tileMove{
  from{ transform: translateX(0); }
  to{ transform: translateX(-100%); }
}
.tile{
  width: 250px;
  height: 120px;
  border-radius: 18px;
  border: 1px solid rgba(245,243,244,.14);
  overflow:hidden;
  position:relative;
  background: rgba(11,9,10,.25);
  flex: 0 0 auto;
}
.tile img{
  width:100%; height:100%;
  object-fit: cover;
  filter: brightness(.85);
  transform: scale(1.05);
  transition: transform .3s ease;
}
.tile:hover img{ transform: scale(1.12); }
.tile span{
  position:absolute; inset:auto 10px 10px 10px;
  padding: 8px 10px;
  border-radius: 14px;
  background: rgba(11,9,10,.5);
  border: 1px solid rgba(245,243,244,.14);
  font-weight: 950;
  letter-spacing:.4px;
}
.tile a{ position:absolute; inset:0; }
.tileMarquee:hover .tileTrack{ animation-play-state: paused; }

@media(max-width: 600px){
  .tile{ width: 210px; height: 110px; }
}

/* ===== Footer ===== */
.footer{
  margin-top: 10px;
  border-top: 1px solid rgba(245,243,244,.12);
  background: rgba(11,9,10,.55);
  backdrop-filter: blur(12px);
}
.footerGrid{
  display:grid;
  grid-template-columns: 1fr 1fr 1.2fr;
  gap: 16px;
  padding: 24px 0;
}
.footer h4{ font-size: 14px; font-weight: 950; margin-bottom: 10px; }
.footer a{ text-decoration:none; opacity:.9; }
.footer a:hover{ opacity:1; text-decoration: underline; }
.footer ul{ list-style:none; display:flex; flex-direction:column; gap:8px; }
.mapWrap iframe{
  width:100%;
  height: 220px;
  border:0;
  border-radius: 18px;
  filter: grayscale(.1) contrast(1.05);
}

.footerBottom{
  border-top: 1px solid rgba(245,243,244,.10);
  padding: 12px 0;
  color: rgba(245,243,244,.72);
  font-size: 12px;
}

/* ===== Back to Home Button (inner pages) ===== */
.backHome{
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 9999;
  width: 54px;
  height: 54px;
  border-radius: 18px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.28);
  display:flex; align-items:center; justify-content:center;
  text-decoration:none;
  color: #fff;
  font-size: 20px;
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow);
  transition: transform .2s ease, background .2s ease;
}
.backHome:hover{ transform: translateY(-2px); background: rgba(255,255,255,.20); }

/* ===== Page Header Banner ===== */
.pageHeader{
  margin-top: 14px;
  border-radius: 22px;
  overflow:hidden;
  border: 1px solid rgba(245,243,244,.14);
  background: rgba(245,243,244,.04);
  box-shadow: var(--shadow);
  position: relative;
}
.pageHeader img{
  width:100%; height: 220px;
  object-fit: cover;
  filter: brightness(.8);
}
.pageHeader .overlay{
  position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(11,9,10,.72), rgba(11,9,10,.25));
  display:flex; align-items:center;
  padding: 18px;
}
.pageHeader h1{
  font-size: clamp(22px, 3vw, 34px);
  font-weight: 950;
}
.pageHeader p{
  margin-top: 6px;
  max-width: 820px;
  color: rgba(245,243,244,.86);
  line-height: 1.55;
}

/* ===== Home: Flower rain ===== */
.flowerLayer{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999999;
  overflow:hidden;
}
.flower{
  position:absolute;
  top: -40px;
  font-size: 18px;
  opacity: .95;
  filter: drop-shadow(0 10px 14px rgba(0,0,0,.25));
  animation: fall linear forwards;
}
@keyframes fall{
  to{ transform: translateY(calc(100vh + 60px)) rotate(360deg); opacity: 0.2; }
}

/* Responsive footer */
@media(max-width: 950px){
  .footerGrid{ grid-template-columns: 1fr; }
  .mapWrap iframe{ height: 240px; }
}