/* ===== RESET ===== */
* { margin:0; padding:0; box-sizing:border-box; font-family: "Segoe UI", sans-serif; }
body { scroll-behavior: smooth; background:#f4f4f4; }
a { text-decoration:none; color:inherit; transition: color 0.3s ease; }

/* ===== HEADER ===== */
header {
  position: fixed;
  top:0; left:0; width:100%; background:#2c3e50; color:white; z-index:1000;
  display:flex; justify-content:space-between; align-items:center; padding:1rem 2rem;
  transition: background 0.3s;
  margin-top: 0;
}
header.sticky { background:#1a252f; }
.logo { font-size:1.5rem; font-weight:bold; cursor:pointer; transition: transform 0.3s ease; }
.logo:hover { transform: scale(1.05); }

nav ul { list-style:none; display:flex; gap:1rem; }
nav ul li { position:relative; }
nav ul li a { color:white; font-weight:500; padding:0.5rem; display:block; }
nav ul li a:hover { color:#f1c40f; }

nav ul li ul {
  position:absolute; top:100%; left:0; background:#34495e; display:none; list-style:none; min-width:200px;
  border-radius:5px; overflow:hidden; transition: all 0.3s ease;
}
nav ul li:hover > ul { display:block; animation: dropdownFade 0.3s ease forwards; }
nav ul li ul li a:hover { background:#f1c40f; color:#2c3e50; }



header {
  position: fixed;
  top: 0;
  width: 100%;
  margin: 0 !important;
  z-index: 1000;
}
.pjp-welcome-slider {
  margin-top: 0;
}




/* Dropdown animation */
@keyframes dropdownFade { from {opacity:0; transform: translateY(-10px);} to {opacity:1; transform: translateY(0);} }

/* ===== ANNOUNCEMENT BAR ===== */
.announcement { margin-top:80px; background:#f1c40f; color:#2c3e50; padding:0.5rem; overflow:hidden; white-space:nowrap; }
.announcement p { display:inline-block; animation: marquee 40s linear infinite; }
@keyframes marquee { 0% { transform: translateX(100%);} 100% { transform: translateX(-100%);} }

.announcement p i {
  margin-right: 8px;
  color: #2c3e50; /* dark color for visibility */
  animation: bounce 2s infinite;
}

/* Bounce animation for announcement icon */
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-5px); }
  60% { transform: translateY(-3px); }
}
.head-teacher-remarks {
  background: #f9f9f9;
  padding: 4rem 2rem;
}

.head-teacher-remarks .container {
  max-width: 1200px;
  margin: 0 auto;
}

.remarks-content {
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap; /* ensures responsiveness */
}

.teacher-photo img {
  width: 300px;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.teacher-message {
  flex: 1; /* takes remaining space */
}

.teacher-message h2 {
  color: #003366;
  font-size: 2rem;
  margin-bottom: 1rem;
}

.teacher-message p {
  font-size: 1.1rem;
  line-height: 1.6;
  color: #333;
}

.teacher-message .signature {
  margin-top: 1rem;
  font-weight: bold;
  color: #003366;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .remarks-content {
    flex-direction: column; /* stack on mobile */
    text-align: center;
  }
  .teacher-photo img {
    width: 200px;
    margin-bottom: 1.5rem;
  }
  .teacher-message p {
    font-size: 1rem;
  }
}

#remarks-text {
  max-height: 120px; /* initially show only a few lines */
  overflow: hidden;
  transition: max-height 0.5s ease;
}

#toggle-btn {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.5rem 1rem;
  background: #003366;
  color: #FFD700;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.3s;
}

#toggle-btn:hover {
  background: #0055a5;
}

.school-values {
  padding: 4rem 2rem;
  background: #f0f4f8;
  text-align: center;
}

.school-values h2 {
  color: #003366;
  font-size: 2.5rem;
  margin-bottom: 2rem;
}

.cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
}

.card {
  background: white;
  padding: 2rem 1.5rem;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
  width: 250px;
  transition: transform 0.5s, box-shadow 0.5s;
  cursor: pointer;
  position: relative;
}

.card i {
  font-size: 2rem;
  color: #FFD700;
  margin-bottom: 1rem;
}

.card h3 {
  font-size: 1.5rem;
  margin-bottom: 0.8rem;
  color: #003366;
}

.card p {
  font-size: 1rem;
  line-height: 1.5;
  color: #333;
}

/* Hover animation */
.card:hover {
  transform: translateY(-10px) scale(1.05);
  box-shadow: 0 12px 25px rgba(0,0,0,0.25);
}

/* Optional subtle fade-in on scroll */
.card {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.card.show {
  opacity: 1;
  transform: translateY(0);
}

/* Responsive */
@media (max-width: 768px) {
  .cards {
    flex-direction: column;
    align-items: center;
  }
  .school-name{font-size: 20px;}
}

.wall-of-fame {
  background: #f0f4f8;
  padding: 4rem 2rem;
  text-align: center;
}

.wall-of-fame h2 {
  color: #003366;
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
}

.wall-of-fame p {
  color: #333;
  font-size: 1.1rem;
  margin-bottom: 2rem;
}

.fame-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
}

.fame-card {
  background: white;
  border-radius: 12px;
  width: 220px;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
  transition: transform 0.5s, box-shadow 0.5s;
  cursor: pointer;
  opacity: 0;
  transform: translateY(20px);
}

.fame-card img {
  width: 100%;
  height: 250px;
  object-fit: cover;
}

.fame-info {
  padding: 1rem;
}

.fame-info h3 {
  color: #003366;
  margin-bottom: 0.5rem;
}

.fame-info p {
  color: #555;
  font-size: 1rem;
}

/* Hover Animation */
.fame-card:hover {
  transform: translateY(-10px) scale(1.05);
  box-shadow: 0 12px 25px rgba(0,0,0,0.25);
}

/* Fade-in on scroll */
.fame-card.show {
  opacity: 1;
  transform: translateY(0);
}

/* Responsive */
@media (max-width: 768px) {
  .fame-cards {
    flex-direction: column;
    align-items: center;
  }
}


/* ---------- HERO SLIDER SECTION ---------- */
.hero-slider {
  position: relative;
  width: 100%;
  height: 90vh;
  overflow: hidden;
}

.hero-slider .slide {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 2s ease-in-out;
}

.hero-slider .slide.active {
  opacity: 1;
  z-index: 1;
}

/* Image setup */
.hero-slider img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Overlay gradient */
.hero-slider .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom right, rgba(0, 0, 0, 0.3), rgba(31, 25, 25, 0.7));
  opacity: 0;
  transition: opacity 2s ease;
}

/* Caption centered */
.hero-slider .caption {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1.1);
  text-align: center;
  color: white;
  z-index: 2;
  opacity: 0;
  transition: opacity 2s ease, transform 2s ease;
}

.hero-slider .caption h1 {
  font-size: 2rem;
  margin-bottom: 10px;
  text-shadow: 0 3px 6px rgba(0, 0, 0, 0.6);
}

.hero-slider .caption p {
  font-size: 1.2rem;
  line-height: 1.5;
}

/* Active slide: overlay and caption fade in automatically */
.hero-slider .slide.active .overlay {
  opacity: 1;
}

.hero-slider .slide.active .caption {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* Slider controls */
.slider-controls {
  position: absolute;
  width: 100%;
  top: 50%;
  display: flex;
  justify-content: space-between;
  transform: translateY(-50%);
  z-index: 3;
}

.slider-controls span {
  cursor: pointer;
  font-size: 2rem;
  color: white;
  padding: 8px 16px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  transition: 0.3s;
}

.slider-controls span:hover {
  background: rgba(255, 255, 255, 0.6);
  color: black;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 768px) {
  .hero-slider {
    height: 70vh;
  }

  .hero-slider .caption h1 {
    font-size: 1.8rem;
  }

  .hero-slider .caption p {
    font-size: 1rem;
  }
}



  /* Gradient overlay + background image */

.hero::after { content:''; position:absolute; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,0.5); }
.hero-content { position: relative; z-index:1; max-width:900px; animation: fadeInUp 1.2s ease forwards; }
.hero h1 { font-size:3rem; margin-bottom:1rem; animation: slideInFromLeft 1s ease forwards; }
.hero p { font-size:1.2rem; margin-bottom:2rem; animation: slideInFromRight 1s ease forwards; }
.hero button { padding:0.8rem 2rem; background:#f1c40f; border:none; color:#2c3e50; font-weight:bold; border-radius:5px; cursor:pointer; transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease; }
.hero button:hover { transform: scale(1.05); box-shadow:0 5px 15px rgba(0,0,0,0.3); background:#d4ac0d; }

/* ===== ABOUT SECTION ===== */
.about { padding:5rem 2rem; display:flex; flex-wrap:wrap; justify-content:center; background:#fff; gap:2rem; text-align:center; }
.about-card { flex:1 1 250px; background:#f1c40f; color:#2c3e50; padding:2rem; border-radius:10px; transition:transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease; cursor:pointer; animation:fadeInUp 0.8s ease forwards; }
.about-card:hover { transform:translateY(-10px); box-shadow:0 10px 20px rgba(0,0,0,0.2); background:#d4ac0d; }
.about-card h3 { margin-bottom:1rem; }
.about-card p { font-size:0.95rem; }

/* ===== DEPARTMENTS ===== */
.departments { padding:5rem 2rem; text-align:center; background:#ecf0f1; }
.departments h2 { margin-bottom:3rem; font-size:2.5rem; }
.dept-cards { display:flex; flex-wrap:wrap; justify-content:center; gap:2rem; }
.dept-card { flex:1 1 250px; background:#fff; padding:2rem; border-radius:10px; transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease; cursor:pointer; }
.dept-card:hover { transform:translateY(-10px); box-shadow:0 10px 20px rgba(0,0,0,0.2); background:#f1c40f; }
.dept-card h3 { margin-bottom:1rem; }

/* ===== EVENTS SLIDER ===== */
.events-slider { padding:5rem 2rem; background:#fff; text-align:center; }
.events-slider h2 { margin-bottom:3rem; font-size:2.5rem; }
.slider { position:relative; max-width:1000px; margin:auto; overflow:hidden; border-radius:10px; }
.slides { display:flex; transition: transform 0.5s ease-in-out; }
.slides img { width:100%; flex-shrink:0; object-fit:cover; border-radius:10px; transition: transform 0.3s ease; }
.slides img:hover { transform: scale(1.05); }
.prev, .next { position:absolute; top:50%; transform:translateY(-50%); background: rgba(0,0,0,0.4); color:white; font-size:2rem; padding:0.5rem 1rem; border:none; cursor:pointer; border-radius:5px; z-index:10; }
.prev { left:10px; }
.next { right:10px; }
.prev:hover, .next:hover { background: rgba(0,0,0,0.7); }
.dots { text-align:center; margin-top:1rem; }
.dot { display:inline-block; height:12px; width:12px; margin:0 5px; background:#bbb; border-radius:50%; cursor:pointer; transition:background 0.3s; }
.dot.active { background:#f1c40f; }

/* ===== TESTIMONIALS ===== */
.testimonials { padding:5rem 2rem; background:#ecf0f1; text-align:center; }
.testimonials h2 { margin-bottom:3rem; font-size:2.5rem; }
.testimonial-card { max-width:600px; margin:1rem auto; background:#fff; padding:2rem; border-radius:10px; box-shadow:0 5px 15px rgba(0,0,0,0.1); font-style:italic; position:relative; animation:fadeInUp 0.8s ease forwards; transition: transform 0.3s ease, box-shadow 0.3s ease; }
.testimonial-card:hover { transform:translateY(-10px); box-shadow:0 10px 20px rgba(0,0,0,0.2); }

/* ===== CTA ===== */
.cta { padding:5rem 2rem; background:#f1c40f; text-align:center; color:#2c3e50; }
.cta h2 { margin-bottom:1.5rem; font-size:2rem; }
.cta button { padding:1rem 2rem; border:none; border-radius:5px; background:#2c3e50; color:#f1c40f; font-size:1rem; cursor:pointer; transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease; }
.cta button:hover { transform:scale(1.05); box-shadow:0 5px 15px rgba(0,0,0,0.3); background:#1a252f; }

/* ===== ANIMATIONS ===== */
@keyframes fadeInUp { from {opacity:0; transform:translateY(20px);} to {opacity:1; transform:translateY(0);} }
@keyframes slideInFromLeft { from {opacity:0; transform:translateX(-50px);} to {opacity:1; transform:translateX(0);} }
@keyframes slideInFromRight { from {opacity:0; transform:translateX(50px);} to {opacity:1; transform:translateX(0);} }

/* ===== RESPONSIVE ===== */
@media (max-width:768px) {
  nav ul { flex-direction:column; gap:0; }
  nav ul li ul { position: static; }
  .hero h1 { font-size:2rem; }
  .hero p { font-size:1rem; }
  .about, .dept-cards { flex-direction: column; align-items:center; }
}

.logo img {
  height: 15px; /* Adjust size as needed */
  width: auto;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.logo img:hover {
  transform: scale(1.1); /* Slight zoom effect on hover */
}

/* Logo with image + text */
.logo {
  display: flex;
  align-items: center;
  gap: 10px; /* space between image and text */
  cursor: pointer;
  transition: all 0.3s ease;
}

.logo img {
  height: 50px; /* original logo size */
  width: auto;
  transition: all 0.3s ease;
}

.logo .school-name i {
  margin-right: 6px;
  color: #f1c40f; /* golden color for cross */
  vertical-align: middle;
  transition: transform 0.3s ease;
}

.logo .school-name:hover i {
  transform: rotate(15deg); /* subtle rotation on hover */
}

/* Shrink logo on scroll */
header.sticky .logo img {
  height: 35px; /* smaller when scrolling */
}

header.sticky .logo .school-name {
  font-size: 1.2rem; /* smaller text on scroll */
}

nav ul li a i {
  margin-right: 1px; /* space between icon and text */
  font-size: 1rem;
  vertical-align: middle;
  transition: transform 0.3s ease;
}

nav ul li a:hover i {
  transform: scale(1.2); /* subtle hover zoom effect on icons */
}







/* Dropdown submenu icons */
nav ul li ul li a i {
  margin-right: 8px;
  color: #f1c40f; /* golden accent */
  transition: transform 0.3s ease, color 0.3s ease;
}

/* Hover effect for submenu icons */
nav ul li ul li a:hover i {
  transform: scale(1.2) rotate(10deg); /* subtle zoom + rotation */
  color: #fff; /* change color on hover for contrast */
}

/* Smooth fade-in for dropdowns */
nav ul li ul {
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

nav ul li:hover > ul {
  opacity: 1;
  transform: translateY(0);
  display: block;
}

nav ul li ul li a:hover {
  background: rgba(241, 196, 15, 0.9); /* highlight background */
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  border-radius: 5px;
}










/* ========== GALLERY STYLING ========== */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 20px;
  padding: 60px 8%;
  background: #fafafa;
  justify-items: center;
}

/* GALLERY ITEM WRAPPER */
.gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 5px 25px rgba(97, 65, 65, 0.08);
  transition: all 0.4s ease;
  cursor: pointer;
  background: #fff;
}

/* IMAGE INSIDE */
.gallery-item img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  border-radius: 16px;
  transition: transform 0.5s ease, filter 0.4s ease;
}

/* SMOOTH HOVER EFFECT */
.gallery-item:hover img {
  transform: scale(1.07);
  filter: brightness(0.85) contrast(1.1);
}

/* CAPTION OVERLAY */
.gallery-item .caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  padding: 10px 15px;
  font-size: 0.95rem;
  text-align: center;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.4s ease;
  letter-spacing: 0.5px;
}

/* CAPTION APPEARS ON HOVER */
.gallery-item:hover .caption {
  opacity: 1;
  transform: translateY(0);
}

/* LIFT-UP EFFECT */
.gallery-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

/* ====== LIGHTBOX ====== */
.lightbox {
  display: none;
  position: fixed;
  z-index: 1000;
  padding-top: 50px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background: rgba(0, 0, 0, 0.9);
  animation: fadeIn 0.5s ease;
}

/* IMAGE IN LIGHTBOX */
.lightbox-img {
  display: block;
  margin: auto;
  max-width: 90%;
  max-height: 80vh;
  border-radius: 12px;
  box-shadow: 0 0 30px rgba(255, 215, 0, 0.4);
}

/* CAPTION UNDER IMAGE */
.lightbox-caption {
  text-align: center;
  color: #fff;
  font-size: 1.1rem;
  margin-top: 15px;
  letter-spacing: 0.3px;
}

/* CLOSE BUTTON */
.lightbox .close {
  position: absolute;
  top: 25px;
  right: 45px;
  color: #fff;
  font-size: 35px;
  font-weight: bold;
  cursor: pointer;
  transition: color 0.3s ease;
}

.lightbox .close:hover {
  color: #ffd740;
}

/* ANIMATION */
@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}

/* RESPONSIVE FIXES */
@media (max-width: 600px) {
  .gallery-grid {
    padding: 40px 4%;
    gap: 15px;
  }
  .gallery-item img {
    height: 200px;
  }
  .lightbox-img {
    max-width: 95%;
    max-height: 75vh;
  }
}

.album-filter {
  text-align: center;
  margin: 40px 0 10px;
}

.filter-btn {
  background: #fff;
  border: 1.5px solid #ccc;
  color: #444;
  padding: 10px 22px;
  margin: 5px;
  border-radius: 25px;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.3s ease;
}

.filter-btn:hover {
  background: #ffd740;
  border-color: #ffd740;
  color: #222;
}

.filter-btn.active {
  background: #fdd835;
  color: #222;
  border-color: #fdd835;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
}



/* --- PROGRESS BAR STYLING --- */
.progress-bar {
  position: absolute;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 5px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  overflow: hidden;
}

.progress-fill {
  width: 0%;
  height: 100%;
  background: #ffcc00;
  border-radius: 3px;
  animation: fillProgress linear forwards;
}

/* Keyframes for bar animation */
@keyframes fillProgress {
  from { width: 0%; }
  to { width: 100%; }
}





/* LIGHTBOX CORE STYLES */
.lightbox {
  display: none;
  justify-content: center;
  align-items: center;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.9);
  z-index: 9999;
  transition: opacity 0.5s ease;
  opacity: 0;
}

.lightbox.show {
  display: flex;
  opacity: 1;
}

.lightbox-img {
  max-width: 80%;
  max-height: 80%;
  border-radius: 10px;
  transition: opacity 0.6s ease;
  opacity: 0;
}

.lightbox.show .lightbox-img {
  opacity: 1;
}

/* CAPTION */
.lightbox-caption {
  color: #fff;
  text-align: center;
  margin-top: 10px;
  font-size: 1.1em;
}

/* PROGRESS BAR */
.progress-bar {
  position: absolute;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 5px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  overflow: hidden;
}

.progress-fill {
  width: 0%;
  height: 100%;
  background: #ffcc00;
  border-radius: 3px;
  animation: fillProgress linear forwards;
}

@keyframes fillProgress {
  from { width: 0%; }
  to { width: 100%; }
}

.lightbox-number {
  position: absolute;
  top: 20px;
  right: 30px;
  color: #fff;
  font-size: 1.2em;
  font-weight: bold;
  background: rgba(0,0,0,0.4);
  padding: 5px 10px;
  border-radius: 5px;
}



/* ===== ALBUM FILTER BUTTONS ===== */
.album-filter {
  text-align: center;
  margin: 2rem 0;
}

.album-filter .filter-btn {
  padding: 0.5rem 1rem;
  margin: 0.3rem;
  border: none;
  background: #2c3e50;
  color: #f1c40f;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.album-filter .filter-btn:hover,
.album-filter .filter-btn.active {
  background: #f1c40f;
  color: #2c3e50;
  transform: scale(1.05);
}

/* ===== GALLERY GRID ===== */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  padding: 2rem;
}

.gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.gallery-item:hover img {
  transform: scale(1.1);
}

.caption {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 0.8rem;
  background: rgba(44,62,80,0.7);
  color: #f1c40f;
  font-weight: 500;
  text-align: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.gallery-item:hover .caption {
  opacity: 1;
}

/* ===== LIGHTBOX ===== */
.lightbox {
  position: fixed;
  display: none;
  top:0; left:0;
  width:100%; height:100%;
  background: rgba(0,0,0,0.9);
  justify-content: center;
  align-items: center;
  flex-direction: column;
  z-index: 2000;
}

.lightbox-img {
  max-width: 90%;
  max-height: 80%;
  border-radius: 10px;
  margin-bottom: 1rem;
  box-shadow: 0 5px 20px rgba(0,0,0,0.5);
}

.lightbox-caption {
  color: #f1c40f;
  font-size: 1.2rem;
  text-align: center;
}

.lightbox .close {
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 2rem;
  color: #f1c40f;
  cursor: pointer;
  transition: color 0.3s ease;
}

.lightbox .close:hover {
  color: #fff;
}





.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  padding: 2rem;
}

.gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.gallery-item:hover img { transform: scale(1.1); }

.caption {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 0.8rem;
  background: rgba(44,62,80,0.7);
  color: #f1c40f;
  font-weight: 500;
  text-align: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.gallery-item:hover .caption { opacity: 1; }

/* Lightbox styles (from previous step) */
.lightbox {
  position: fixed; display: none; top:0; left:0;
  width:100%; height:100%; background: rgba(0,0,0,0.9);
  justify-content: center; align-items: center; flex-direction: column; z-index: 2000;
}

.lightbox-img { max-width:90%; max-height:80%; border-radius:10px; margin-bottom:1rem; box-shadow:0 5px 20px rgba(0,0,0,0.5); }

.lightbox-caption { color:#f1c40f; font-size:1.2rem; text-align:center; }

.lightbox .close { position:absolute; top:20px; right:30px; font-size:2rem; color:#f1c40f; cursor:pointer; transition:color 0.3s ease; }
.lightbox .close:hover { color:#fff; }

.prev-arrow, .next-arrow {
  position: absolute; top:50%; font-size: 2.5rem; color:#f1c40f;
  cursor:pointer; user-select:none; transform:translateY(-50%); padding:0 10px; transition: color 0.3s ease;
}
.prev-arrow { left: 20px; }
.next-arrow { right: 20px; }
.prev-arrow:hover, .next-arrow:hover { color:#fff; }



/* ===== Departments Section ===== */
.departments {
  padding: 3rem 2rem;
  background: linear-gradient(135deg, #f1f2f6, #dfe6e9);
  text-align: center;
}

.departments h1 {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
  color: #2c3e50;
}

.departments .intro {
  font-size: 1.1rem;
  margin-bottom: 2rem;
  color: #555;
}

.departments-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
}

.dept-card {
  background: #fff;
  padding: 2rem 1.5rem;
  border-radius: 15px;
  box-shadow: 0 6px 15px rgba(0,0,0,0.1);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.dept-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 25px rgba(0,0,0,0.2);
}

.dept-card h2 {
  margin: 1rem 0;
  color: #2c3e50;
}

.dept-card p {
  font-size: 0.95rem;
  color: #666;
}

.dept-icon {
  font-size: 2.5rem;
  color: #f1c40f;
  margin-bottom: 0.5rem;
  transition: transform 0.3s ease, color 0.3s ease;
}

.dept-card:hover .dept-icon {
  transform: rotate(10deg) scale(1.2);
  color: #e67e22;
}

/* Filter/Search Bar */
.filter-bar {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

.filter-bar input,
.filter-bar select {
  padding: 0.6rem 1rem;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 8px;
  outline: none;
  transition: border 0.3s ease, box-shadow 0.3s ease;
}

.filter-bar input:focus,
.filter-bar select:focus {
  border-color: #f1c40f;
  box-shadow: 0 0 8px rgba(241, 196, 15, 0.4);
}

/* Smooth hide/show animation */
.dept-card {
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.dept-card.hide {
  transform: scale(0.8);
  opacity: 0;
  pointer-events: none;
}

/* ---------- MODAL (robust) ---------- */
#deptModal.modal {
  /* full-screen overlay */
  position: fixed;
  inset: 0;                     /* top:0; right:0; bottom:0; left:0 */
  display: none;               /* hidden by default */
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.75);
  z-index: 9999;               /* high so it sits above header */
  padding: 1.5rem;             /* breathing room on small screens */
  box-sizing: border-box;
}

/* visible state */
#deptModal.modal.open {
  display: flex;
}

/* modal box */
#deptModal .modal-content {
  background: #fff;
  width: 100%;
  max-width: 900px;
  border-radius: 12px;
  overflow: auto;                           /* scroll inside if content tall */
  max-height: calc(100vh - 3rem);           /* never exceed viewport */
  position: relative;
  padding: 1.5rem;
  box-shadow: 0 12px 40px rgba(0,0,0,0.45);
  animation: slideDown 0.32s ease;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* image inside modal */
#deptModal .modal-content img {
  width: 100%;
  height: auto;
  max-height: 45vh;          /* leaves space for title + text on mobile */
  object-fit: cover;
  border-radius: 8px;
}

/* modal text */
#deptModal .modal-content h2 { margin: 0.25rem 0; color: #2c3e50; }
#deptModal .modal-content p  { margin: 0; color: #444; line-height: 1.5; }

/* close button */
#deptModal .close-btn {
  position: absolute;
  top: 10px;
  right: 12px;
  font-size: 1.6rem;
  color: #333;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 10;               /* ensure it's above modal content */
  padding: 0.2rem;
  transition: color 0.2s ease, transform 0.15s ease;
}
#deptModal .close-btn:hover { color: #f39c12; transform: scale(1.05); }

/* animations */
@keyframes slideDown {
  from { transform: translateY(-12px); opacity: 0; }
  to   { transform: translateY(0);       opacity: 1; }
}

/* prevent page scroll while modal open */
body.modal-open { overflow: hidden; }

/* small-screen tweaks */
@media (max-width: 600px) {
  #deptModal .modal-content { padding: 1rem; max-width: 95%; }
  #deptModal .modal-content img { max-height: 35vh; }
}




/* ACADEMICS HERO */
.academics-hero {
  background: url('images/liba.png') center/cover no-repeat;
  height: 50vh;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.academics-hero .overlay {
  background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6));
  width: 100%;
  height: 100%;
  color: #fff;
  text-align: center;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.academics-hero h1 { font-size: 2.5rem; margin-bottom: 0.5rem; }

/* STREAMS */
.streams {
  padding: 3rem 2rem;
  text-align: center;
}
.streams-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}
.stream-card {
  background: #fff;
  padding: 1.5rem;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
}
.stream-card:hover {
  transform: translateY(-8px);
}
.stream-card i {
  font-size: 2rem;
  color: #f39c12;
  margin-bottom: 1rem;
}



 

/* HERO SECTION */
.school-life-hero {
  background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("images/net.png") no-repeat center center/cover;
  color: #fff;
  text-align: center;
  padding: 6rem 2rem;
}

.school-life-hero h2 {
  font-size: 2.5rem;
}

/* FEATURED LIFE SECTIONS */
.life-sections {
  display: flex;
  justify-content: space-around;
  gap: 2rem;
  padding: 3rem 2rem;
  background: #f9f9f9;
}

.life-card {
  flex: 1;
  text-align: center;
  padding: 1rem;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 6px 15px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
}
.life-card:hover {
  transform: translateY(-8px);
}
.life-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 12px;
  margin-bottom: 1rem;
}

/* PHOTO GRID */
.photo-grid {
  padding: 3rem 2rem;
  text-align: center;
}
.photo-grid h2 {
  margin-bottom: 2rem;
}
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}
.grid-item {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
}
.grid-item img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.grid-item:hover img {
  transform: scale(1.1);
}
.caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,0.6);
  color: #fff;
  padding: 0.5rem;
  font-size: 0.9rem;
  text-align: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.grid-item:hover .caption {
  opacity: 1;
}

/* TESTIMONIALS */
.testimonials {
  background: #fff;
  padding: 3rem 2rem;
  text-align: center;
}
.testimonial {
  display: none;
  font-style: italic;
  max-width: 700px;
  margin: auto;
}
.testimonial.active {
  display: block;
}
.testimonial h4 {
  margin-top: 1rem;
  color: #2c3e50;
}


/* VIDEO SECTION */
.school-video {
  padding: 3rem 2rem;
  text-align: center;
  background: #f9f9f9;
}

.school-video h2 {
  margin-bottom: 2rem;
  font-size: 2rem;
  color: #2c3e50;
}

.video-container {
  position: relative;
  max-width: 900px;
  margin: auto;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

.video-container iframe,
.video-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* CALL-TO-ACTION BANNER */
.cta-banner {
  background: linear-gradient(135deg, #2c3e50, #34495e);
  color: #fff;
  text-align: center;
  padding: 4rem 2rem;
  border-radius: 12px;
  margin: 3rem 2rem 0 2rem;
  box-shadow: 0 8px 25px rgba(0,0,0,0.2);
  transition: transform 0.3s ease;
}

.cta-banner:hover {
  transform: translateY(-5px);
}

.cta-banner h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
  color: white;
}

.cta-banner p {
  font-size: 1.1rem;
  margin-bottom: 2rem;
  opacity: 0.9;
}

.cta-button {
  background: #f39c12;
  color: #fff;
  padding: 0.85rem 2rem;
  border-radius: 50px;
  font-size: 1.1rem;
  text-decoration: none;
  transition: background 0.3s ease, transform 0.2s ease;
}

.cta-button:hover {
  background: #e67e22;
  transform: scale(1.05);
}



/* SOCIAL MEDIA SIDEBAR */
.social-sidebar {
  position: fixed;
  top: 40%;
  left: 0;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  z-index: 1000;
}

.social-sidebar a {
  display: block;
  margin: 5px 0;
  padding: 12px 16px;
  color: #fff;
  text-decoration: none;
  font-size: 1.2rem;
  font-weight: bold;
  border-radius: 0 6px 6px 0;
  transition: all 0.3s ease;
}

.social-sidebar a.facebook { background: #3b5998; }
.social-sidebar a.whatsapp { background: #25d366; }
.social-sidebar a.twitter  { background: #1da1f2; }
.social-sidebar a.tiktok   { background: #000; }

.social-sidebar a:hover {
  padding-left: 25px;
  opacity: 0.9;
}






/* MEET OUR ADMINISTRATORS */
.administrators {
  text-align: center;
  padding: 100px 20px;
  background: linear-gradient(180deg, #f5f6fa, #fff);
  overflow: hidden;
}

.administrators h2 {
  font-size: 2.5rem;
  color: #1a237e;
  margin-bottom: 20px;
  animation: slideInDown 1s ease forwards;
}

.admin-intro {
  color: #555;
  max-width: 700px;
  margin: 0 auto 50px;
  line-height: 1.6;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 1.5s ease forwards 0.5s;
}

.admin-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
}

/* Administrator Card */
.admin-card {
  background: #fff;
  border-radius: 20px;
  width: 260px;
  padding: 25px 15px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
  cursor: pointer;
  transform: translateY(100px) scale(0.95) rotateX(10deg);
  opacity: 0;
  transition: all 0.8s ease;
  perspective: 1000px;
}

.admin-card img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid #dbd9d3;
  margin-bottom: 15px;
  transition: transform 0.6s ease;
}

.admin-card h3 {
  color: #1a237e;
  font-size: 1.2rem;
  margin-bottom: 5px;
}

.admin-card p {
  color: #777;
  font-style: italic;
  margin: 0;
}

/* Scroll Fetch Animation */
/* Directional Scroll Animations with Bounce + Rotation */
.admin-card[data-admin="1"].show {
  animation: slideBounceLeft 1.2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

.admin-card[data-admin="2"].show {
  animation: slideBounceUp 1.2s cubic-bezier(0.25, 1, 0.5, 1) forwards 0.2s;
}

.admin-card[data-admin="3"].show {
  animation: slideBounceRight 1.2s cubic-bezier(0.25, 1, 0.5, 1) forwards 0.4s;
}

.admin-card[data-admin="4"].show {
  animation: slideBounceUp 1.2s cubic-bezier(0.25, 1, 0.5, 1) forwards 0.6s;
}

/* Bounce and Rotation Keyframes */
@keyframes slideBounceLeft {
  0% { opacity: 0; transform: translateX(-150px) rotate(-10deg) scale(0.9); }
  60% { opacity: 1; transform: translateX(20px) rotate(3deg) scale(1.03); }
  100% { opacity: 1; transform: translateX(0) rotate(0) scale(1); }
}

@keyframes slideBounceRight {
  0% { opacity: 0; transform: translateX(150px) rotate(10deg) scale(0.9); }
  60% { opacity: 1; transform: translateX(-20px) rotate(-3deg) scale(1.03); }
  100% { opacity: 1; transform: translateX(0) rotate(0) scale(1); }
}

@keyframes slideBounceUp {
  0% { opacity: 0; transform: translateY(120px) rotate(3deg) scale(0.9); }
  60% { opacity: 1; transform: translateY(-15px) rotate(-2deg) scale(1.03); }
  100% { opacity: 1; transform: translateY(0) rotate(0) scale(1); }
}



/* Hover Effect */
.admin-card:hover img {
  transform: rotateY(15deg) scale(1.1);
}
.admin-card:hover {
  transform: translateY(-10px) scale(1.05);
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

.admin-card:hover {
  animation: pulseCardBlue 1.8s ease-in-out infinite;
  box-shadow: 0 0 25px rgba(26, 35, 126, 0.6),
              0 0 50px rgba(63, 81, 181, 0.4);
  border: 2px solid rgba(63, 81, 181, 0.8);
}

@keyframes pulseCardBlue {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 20px rgba(26, 35, 126, 0.3);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 0 45px rgba(63, 81, 181, 0.7);
  }
}



/* Smooth Pulse Animation on Hover */
.admin-card:hover {
  animation: pulseCard 1.8s ease-in-out infinite;
}

/* Define the pulse animation */
@keyframes pulseCard {
  0%, 100% {
    transform: scale(1) rotate(0deg);
  }
  50% {
    transform: scale(1.04) rotate(0.5deg);
  }
}


/* Modal Styling */
.admin-modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0; top: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.8);
  justify-content: center;
  align-items: center;
  animation: fadeIn 0.6s ease forwards;
}

.admin-modal-content {
  background: #fff;
  border-radius: 15px;
  padding: 30px;
  width: 350px;
  text-align: center;
  animation: scaleIn 0.5s ease forwards;
}

.admin-modal-content img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid #1a237e;
  margin-bottom: 15px;
}

.admin-close {
  position: absolute;
  top: 20px;
  right: 25px;
  color: #fff;
  font-size: 35px;
  cursor: pointer;
  transition: color 0.3s;
}

.admin-close:hover {
  color: #ffca28;
}

/* Animations */
@keyframes slideInDown {
  0% {opacity: 0; transform: translateY(-50px);}
  100% {opacity: 1; transform: translateY(0);}
}

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

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}

@keyframes scaleIn {
  0% {transform: scale(0.8); opacity: 0;}
  100% {transform: scale(1); opacity: 1;}
}





/* FOOTER */
.site-footer {
  background: linear-gradient(135deg, #2c3e50, #34495e);
  color: #fff;
  padding: 3rem 2rem 1rem;
  margin-top: 3rem;
}

.footer-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2rem;
  max-width: 1200px;
  margin: auto;
}

.footer-about {
  text-align: center;
}
.footer-logo {
  width: 80px;
  margin-bottom: 0.5rem;
}
.footer-about h3 {
  margin: 0.5rem 0;
}
.footer-about p {
  font-style: italic;
  opacity: 0.9;
}

.footer-links h4,
.footer-contact h4,
.footer-social h4 {
  margin-bottom: 1rem;
  font-size: 1.2rem;
  border-bottom: 2px solid #f39c12;
  display: inline-block;
  padding-bottom: 0.3rem;
}

.footer-links ul {
  list-style: none;
  padding: 0;
}
.footer-links li {
  margin: 0.5rem 0;
}
.footer-links a {
  color: #fff;
  text-decoration: none;
  transition: color 0.3s ease;
}
.footer-links a:hover {
  color: #f39c12;
}

.footer-contact p {
  margin: 0.3rem 0;
}

.social-icons {
  display: flex;
  gap: 12px;
}
.social-icons a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #f39c12;
  color: #fff;
  font-size: 1.1rem;
  transition: transform 0.3s ease, background 0.3s ease;
}
.social-icons a:hover {
  transform: scale(1.1);
  background: #e67e22;
}

.footer-bottom {
  text-align: center;
  margin-top: 2rem;
  font-size: 0.9rem;
  opacity: 0.8;
  border-top: 1px solid rgba(255,255,255,0.2);
  padding-top: 1rem;
}



/* FOOTER BASE */
.site-footer {
  background: #0d1b2a;
  color: #fff;
  padding: 60px 0 20px;
  opacity: 0;
  transform: translateY(50px);
  transition: all 1s ease;
}

.site-footer.show {
  opacity: 1;
  transform: translateY(0);
}

/* Footer container */
.footer-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 30px;
  text-align: center;
  margin: 0 auto;
  max-width: 1200px;
}

/* Logo and text */
.footer-logo {
  width: 80px;
  margin-bottom: 15px;
  animation: float 3s ease-in-out infinite;
}

.footer-about h3 {
  color: #ffca28;
  margin-bottom: 5px;
}

.footer-about p {
  font-style: italic;
  color: #ddd;
}

/* Quick Links */
.footer-links ul {
  list-style: none;
  padding: 0;
}

.footer-links ul li {
  margin: 8px 0;
}

.footer-links ul li a {
  color: #ccc;
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-links ul li a:hover {
  color: #ffca28;
}

/* Contact Info */
.footer-contact p {
  margin: 8px 0;
  color: #ddd;
}

/* Social Icons */
.footer-social .social-icons {
  display: flex;
  justify-content: center;
  gap: 20px;
  opacity: 0;
  transform: translateY(20px);
}

.footer-social .social-icons a {
  font-size: 1.4rem;
  color: #ffca28;
  transition: transform 0.4s ease, color 0.4s ease;
}

.footer-social .social-icons a:hover {
  color: #fff;
  transform: scale(1.3);
}

/* Copyright */
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  margin-top: 30px;
  padding-top: 15px;
  text-align: center;
  font-size: 0.9rem;
  color: #bbb;
}

/* Floating logo animation */
@keyframes float {
  0% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
  100% { transform: translateY(0); }
}

/* Social icons bounce in */
@keyframes bounceIn {
  0% { transform: translateY(30px); opacity: 0; }
  60% { transform: translateY(-10px); opacity: 1; }
  100% { transform: translateY(0); opacity: 1; }
}




/* Slider */
/*.slider-section {
  position: relative;
  width: 100%;
  height: 90vh;
  overflow: hidden;
}

.slider {
  position: relative;
  width: 100%;
  height: 90%;
  padding-top: 10px;
}

.slide {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.slide.active {
  opacity: 1;
  z-index: 2;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}*/

/* Caption appears on hover */
/*.caption {
  position: absolute;
  bottom: 15%;
  left: 10%;
  background: rgba(243, 208, 7, 0.55);
  padding: 15px 25px;
  border-radius: 8px;
  color: white;
  max-width: 600px;
  text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.9);
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s ease;
  pointer-events: none;
}

.slide:hover .caption {
  opacity: 1;
  transform: translateY(0);
}*/

/* Optional: slightly zoom image when hovered */
/*.slide:hover img {
  transform: scale(1.05);
  transition: transform 2s ease;
}*/


/* Arrows */
/*.prev, .next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.5);
  border: none;
  color: white;
  font-size: 2rem;
  padding: 0.5rem 1rem;
  cursor: pointer;
  border-radius: 50%;
  transition: background 0.3s;
  z-index: 3;
}

.prev:hover, .next:hover {
  background: #FFD700;
  color: #003366;
}

.prev { left: 20px; }
.next { right: 20px; }

/* Dots */
.dots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
}

.dot {
  width: 12px;
  height: 12px;
  background: rgba(255,255,255,0.7);
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.3s;
}

.dot.active {
  background: #FFD700;
}



/* Head Teacher Animation */
.teacher-photo, 
.teacher-message {
  opacity: 0;
  transform: translateY(40px);
  transition: all 1s ease;
}

.teacher-photo.show {
  opacity: 1;
  transform: translateX(0);
  animation: slideInLeft 1s forwards;
}

.teacher-message.show {
  opacity: 1;
  transform: translateX(0);
  animation: slideInRight 1s forwards;
}

@keyframes slideInLeft {
  0% { transform: translateX(-100px); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}

@keyframes slideInRight {
  0% { transform: translateX(100px); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}








/* WALL OF FAME SECTION */
.wall-of-fame {
  background: #fafafa;
  padding: 60px 0;
  text-align: center;
  overflow: hidden;
  position: relative;
}

.wall-of-fame h2 {
  font-size: 2rem;
  color: #1a237e;
  margin-bottom: 10px;
  animation: fadeInDown 1s ease;
}

.wall-of-fame p {
  color: #444;
  margin-bottom: 40px;
  font-size: 1.1rem;
  animation: fadeIn 1.2s ease;
}

/* Fame Slider */
.fame-slider {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.fame-track {
  display: flex;
  width: calc(250px * 15); /* adjust for number of cards */
  animation: waveScroll 30s ease-in-out infinite alternate;
}

.fame-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  margin: 0 20px;
  width: 250px;
  flex-shrink: 0;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  opacity: 0;
  transform: translateY(30px);
  animation: fadeUp 1s forwards;
}

.fame-card:nth-child(odd) { animation-delay: 0.4s; }
.fame-card:nth-child(even) { animation-delay: 0.5s; }

.fame-card:hover {
  transform: translateY(-10px) scale(1.05);
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
}

.fame-card img {
  width: 100%;
  height: 250px;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  object-fit: cover;
}

.fame-card h3 {
  margin: 10px 0 5px;
  color: #1a237e;
}

.fame-card p {
  margin-bottom: 15px;
  color: #333;
  font-weight: 500;
}

/* Keyframes */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Horizontal wave motion */
@keyframes waveScroll {
  0% { transform: translateX(0); }
  50% { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}











/* --- LIGHTBOX STYLING --- */
.lightbox {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.9);
  justify-content: center;
  align-items: center;
  flex-direction: column;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.lightbox.show {
  display: flex;
  opacity: 1;
}

.lightbox-img {
  max-width: 80%;
  max-height: 80%;
  border-radius: 10px;
  animation: fadeIn 0.6s ease;
}

.lightbox-caption {
  color: #fff;
  text-align: center;
  margin-top: 15px;
  font-size: 1.2rem;
  font-style: italic;
}

.lightbox .close {
  position: absolute;
  top: 30px;
  right: 50px;
  color: #fff;
  font-size: 2rem;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.lightbox .close:hover {
  transform: scale(1.2);
}

/* Lightbox navigation arrows */
.lightbox-nav {
  position: absolute;
  top: 50%;
  width: 100%;
  display: flex;
  justify-content: space-between;
  color: white;
  font-size: 2rem;
  padding: 0 40px;
  user-select: none;
}

.lightbox-nav span {
  cursor: pointer;
  transition: transform 0.3s ease, color 0.3s ease;
}

.lightbox-nav span:hover {
  transform: scale(1.3);
  color: #ffcc00;
}

/* Fade animation */
@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}






.animated-text span {
  display: inline-block;
  opacity: 0;
  transform: translateY(30px);
  animation: flyIn 0.8s forwards;
}

.animated-subtext span {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 1s forwards;
}

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

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

/* Delay effect for each character */
.animated-text span:nth-child(n) {
  animation-delay: calc(0.05s * var(--i));
}

.animated-subtext span:nth-child(n) {
  animation-delay: calc(0.04s * var(--i));
}










.admissions-hero {
  background: url('images/group.jpg') center/cover no-repeat;
  color: #fff;
  text-align: center;
  padding: 100px 20px;
  position: relative;
}

.admissions-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 30, 60, 0.6);
  
}

.hero-content {
  position: relative;
  z-index: 2;
  animation: fadeInUp 1.2s ease forwards;
  
}

.section-title {
  text-align: center;
  font-size: 2.2rem;
  color: #002b5c;
  margin-top: 50px;
}

.section-subtitle {
  text-align: center;
  color: #666;
  margin-bottom: 30px;
}

.admissions-tabs {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 40px;
}

.tab-btn {
  padding: 10px 25px;
  border: none;
  background: #e0e0e0;
  color: #002b5c;
  border-radius: 25px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.3s;
}

.tab-btn.active {
  background: #002b5c;
  color: #fff;
}

.admission-content {
  display: none;
  animation: fadeIn 1s ease;
  background: #f8f9fc;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 5px 20px rgba(0,0,0,0.05);
}

.admission-content.active {
  display: block;
}

.process-steps {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin: 20px 0;
}

.step {
  text-align: center;
  flex: 1 1 200px;
  margin: 15px;
  padding: 20px;
  background: white;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
}

.step:hover {
  transform: translateY(-5px);
}

.application-form {
  max-width: 600px;
  margin: 20px auto;
  display: grid;
  gap: 15px;
}

.form-group label {
  font-weight: 600;
  color: #333;
}

.form-group input, .form-group select {
  width: 100%;
  padding: 10px;
  border-radius: 6px;
  border: 1px solid #ccc;
}

.submit-button {
  background: #002b5c;
  color: #fff;
  border: none;
  padding: 12px 25px;
  border-radius: 25px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.submit-button:hover {
  background: #004080;
}

.download-section {
  text-align: center;
  margin-top: 20px;
}

.download-button {
  background: #0066cc;
  color: #fff;
  padding: 10px 25px;
  border-radius: 25px;
  text-decoration: none;
  transition: background 0.3s ease;
}

.download-button:hover {
  background: #004c99;
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}


.admission-content {
  display: none;
}

.admission-content.active {
  display: block;
  animation: fadeIn 0.6s ease-in-out;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}












/* Burger menu */
.burger {
  display: none;
  flex-direction: column;
  cursor: pointer;
  gap: 5px;
}
.burger span {
  width: 25px;
  height: 3px;
  background-color: rgb(248, 242, 242);
  border-radius: 3px;
  transition: 0.3s;
}

/* Responsive for small screens */
@media screen and (max-width: 900px) {
  header nav ul {
    flex-direction: column;
    position: absolute;
    top: 70px;
    left: -100%;
    width: 100%;
    background-color: #002b5c;
    transition: 0.3s;
  }

  header nav ul.active {
    left: 0;
  }

  .burger {
    display: flex;
  }

  header nav ul li {
    width: 100%;
  }

  header nav ul li ul {
    position: static;
    background: #003366;
    padding: 0;
  }}






  /* ADMISSIONS PROCESS */
.admissions-process {
  padding: 3rem 2rem;
  background: #f9f9f9;
  text-align: center;
}
.process-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}
.step {
  background: #fff;
  padding: 2rem 1rem;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
}
.step:hover {
  transform: translateY(-8px);
}
.step i {
  font-size: 2.5rem;
  color: #f39c12;
  margin-bottom: 1rem;
}

/* APPLICATION FORM */
.application-form {
  padding: 3rem 2rem;
  max-width: 700px;
  margin: auto;
}
.application-form h2 {
  text-align: center;
  margin-bottom: 2rem;
  color: #2c3e50;
}
.form-group {
  margin-bottom: 1.5rem;
}
.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: bold;
}
.form-group input,
.form-group select {
  width: 100%;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  border: 1px solid #ccc;
  font-size: 1rem;
}
.submit-button {
  background: #f39c12;
  color: #fff;
  padding: 0.85rem 2rem;
  border: none;
  border-radius: 50px;
  font-size: 1.1rem;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.2s ease;
  display: block;
  margin: 1rem auto 0;
}
.submit-button:hover {
  background: #e67e22;
  transform: scale(1.05);
}

/* FORM MESSAGE */
#formMessage {
  margin-top: 1rem;
  text-align: center;
  font-weight: bold;
  color: green;
}


/* DOWNLOAD FORM */
.download-form {
  text-align: center;
  padding: 3rem 2rem;
  background: #f9f9f9;
  margin-top: 2rem;
}
.download-form h2 {
  margin-bottom: 1rem;
  color: #2c3e50;
}
.download-button {
  background: #2c3e50;
  color: #fff;
  padding: 0.85rem 2rem;
  border-radius: 50px;
  font-size: 1.1rem;
  text-decoration: none;
  transition: background 0.3s ease, transform 0.2s ease;
}
.download-button:hover {
  background: #34495e;
  transform: scale(1.05);
}

/* FAQ ACCORDION */
.faq-section {
  padding: 3rem 2rem;
  max-width: 800px;
  margin: auto;
}
.faq-section h2 {
  text-align: center;
  margin-bottom: 2rem;
  color: #2c3e50;
}
.accordion-item {
  border-bottom: 1px solid #ddd;
}
.accordion-header {
  width: 100%;
  padding: 1rem;
  font-size: 1.1rem;
  text-align: left;
  border: none;
  outline: none;
  cursor: pointer;
  background: #fff;
  transition: background 0.3s;
}
.accordion-header:hover {
  background: #f1f1f1;
}
.accordion-body {
  display: none;
  padding: 1rem;
  background: #fff;
  animation: fadeIn 0.3s ease;
}
.accordion-body.open {
  display: block;
}






/* === GALLERY COVER === */
.gallery-cover {
  position: relative;
  width: 100%;
  height: 85vh;
  background-image: url('images/comp.png'); /* Replace with your image */
  background-size: cover;
  background-position: center;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: zoomIn 3s ease-in-out infinite alternate;
}

/* Background soft zoom (cinematic effect) */
@keyframes zoomIn {
  0% { transform: scale(1); }
  100% { transform: scale(1.1); }
}

/* Overlay for clarity and contrast */
.gallery-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(0,0,0,0.6), rgba(0,0,0,0.3));
  opacity: 0;
  animation: fadeInOverlay 2s ease forwards;
}

@keyframes fadeInOverlay {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Text animations */
.gallery-content {
  position: relative;
  text-align: center;
  color: #fff;
  z-index: 2;
  animation: fadeUp 2.5s ease forwards;
  opacity: 0;
  transform: translateY(30px);
}

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

/* Caption styles */
.gallery-content h1 {
  font-size: 3rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #ffcc00;
  margin-bottom: 10px;
  text-shadow: 2px 2px 10px rgba(0,0,0,0.6);
}

.gallery-content p {
  font-size: 1.2rem;
  color: #f2f2f2;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}

/* Hover effects */
.gallery-cover:hover .gallery-overlay {
  background: linear-gradient(to top, rgba(0,0,0,0.7), rgba(0,0,0,0.4));
  transition: background 0.6s ease;
}

.gallery-cover:hover .gallery-content h1,
.gallery-cover:hover .gallery-content p {
  transform: scale(1.03);
  transition: transform 0.4s ease;
}

/* Responsive layout */
@media (max-width: 768px) {
  .gallery-content h1 { font-size: 2rem; }
  .gallery-content p { font-size: 1rem; }
  .gallery-cover { height: 60vh; }
}


/* --- GALLERY IMAGE FADE & ZOOM ANIMATION --- */
.gallery-item {
  position: relative;
  overflow: hidden;
  transform: scale(1);
  opacity: 0;
  transition: transform 0.8s ease, opacity 1s ease;
}

/* When image becomes visible */
.gallery-item.visible {
  transform: scale(1.03);
  opacity: 1;
}

/* Smooth hover zoom effect */
.gallery-item img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.8s ease;
}

.gallery-item:hover img {
  transform: scale(1.1);
}

/* Optional: caption animation */
.gallery-item .caption {
  position: absolute;
  bottom: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  padding: 8px 0;
  text-align: center;
  font-size: 1rem;
  opacity: 0;
  transform: translateY(100%);
  transition: all 0.5s ease;
}

.gallery-item:hover .caption {
  opacity: 1;
  transform: translateY(0);
}







/* Hero Section */
.admissions-hero {
  background: linear-gradient(to right, rgba(0,0,0,0.6), rgba(0,0,0,0.4)), url('images/group.jpg') center/cover no-repeat;
  color: #fff;
  text-align: center;
  padding: 80px 20px;
  animation: fadeIn 1.5s ease-in-out;
}

.hero-content h1 {
  font-size: 2.8em;
  margin-bottom: 10px;
}

.hero-content p {
  font-size: 1.1em;
  opacity: 0.9;
}

/* Admissions Body */
.admissions-body {
  background: #fff;
  border-radius: 25px 25px 0 0;
  padding: 40px 8%;
  box-shadow: 0 -3px 10px rgba(0,0,0,0.1);
  margin-top: -30px;
}

.tab-container {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin: 20px 0;
}

.tab-btn {
  background: #e3e6ea;
  border: none;
  padding: 10px 25px;
  border-radius: 25px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 600;
}

.tab-btn.active {
  background: #2c7be5;
  color: white;
  transform: scale(1.05);
}

.tab-content {
  display: none;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s ease;
}

.tab-content.active {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

/* Steps */
.steps {
  margin: 15px 0 25px;
}

.step {
  background: #f1f4f8;
  padding: 12px;
  border-radius: 10px;
  margin-bottom: 8px;
}

/* Download Section */
.download-section {
  background: #f9fafc;
  padding: 15px;
  border-radius: 10px;
  text-align: center;
  margin-bottom: 20px;
}

.download-btn {
  display: inline-block;
  margin-top: 10px;
  padding: 10px 20px;
  background: #2c7be5;
  color: white;
  border-radius: 25px;
  text-decoration: none;
  transition: 0.3s;
}

.download-btn:hover {
  background: #1b5fc9;
  transform: scale(1.05);
}

/* Form */
.application-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 15px;
  background: #f6f8fb;
  padding: 20px;
  border-radius: 10px;
}

.form-group {
  display: flex;
  flex-direction: column;
}

.form-group label {
  font-weight: 600;
  margin-bottom: 5px;
}

input, select {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 0.95em;
}

.submit-btn {
  grid-column: 1 / -1;
  padding: 12px;
  background: #2c7be5;
  color: white;
  border: none;
  border-radius: 25px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.3s;
}

.submit-btn:hover {
  background: #1b5fc9;
  transform: scale(1.05);
}

.form-message {
  margin-top: 15px;
  font-weight: 500;
  text-align: center;
  font-size: 1.1em;
}

/* Animation */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(15px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 768px) {
  .hero-content h1 { font-size: 2em; }
  .application-form { grid-template-columns: 1fr; }
}





/* LIGHTBOX STYLING */
.lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 999;
}

.lightbox-content {
  background: #fff;
  width: 90%;
  max-width: 700px;
  padding: 20px;
  border-radius: 15px;
  text-align: center;
  position: relative;
  animation: fadeIn 0.5s ease-in-out;
}

.lightbox-content iframe {
  width: 100%;
  height: 400px;
  border-radius: 10px;
  margin-top: 10px;
}

.lightbox-content h3 {
  margin-top: 0;
  color: #2c7be5;
}

.close {
  position: absolute;
  top: 12px;
  right: 18px;
  font-size: 28px;
  cursor: pointer;
  color: #444;
  transition: 0.3s;
}

.close:hover {
  color: #2c7be5;
}

#downloadLink {
  display: inline-block;
  margin-top: 15px;
  padding: 10px 20px;
  background: #2c7be5;
  color: white;
  border-radius: 25px;
  text-decoration: none;
  font-weight: 600;
  transition: 0.3s;
}

#downloadLink:hover {
  background: #1b5fc9;
  transform: scale(1.05);
}






/* ===== GENERAL STYLES ===== */
body {
  font-family: "Poppins", Arial, sans-serif;
  color: #333;
  margin: 0;
  background-color: #f9f9f9;
}

h2 {
  font-size: 2.2rem;
  color: #0a2c82;
  text-align: center;
  margin-bottom: 30px;
}

/* ===== SECTION STYLING ===== */



.container {
  max-width: 1100px;
  margin: auto;
}

/* ===== LAYOUT ===== */
.message-wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 40px;
}

.image-box {
  flex: 1 1 40%;
  text-align: center;
}

.image-box img {
  width: 100%;
  max-width: 320px;
  border-radius: 20px;
  box-shadow: 0 6px 20px rgba(10, 44, 130, 0.2);
  transition: transform 0.5s ease, box-shadow 0.5s ease;
}

.image-box img:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 30px rgba(10, 44, 130, 0.35);
}

.text-box {
  flex: 1 1 55%;
  font-size: 1rem;
  line-height: 1.8;
  color: #444;
}

/* ===== READ MORE AREA ===== */
.full-text {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.8s ease, opacity 0.8s ease;
}

.full-text.open {
  max-height: 600px; /* enough space for full text */
  opacity: 1;
}

#readMoreBtn {
  background-color: #0a2c82;
  color: #fff;
  border: none;
  padding: 10px 22px;
  margin-top: 15px;
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.3s ease, transform 0.2s ease;
}

#readMoreBtn:hover {
  background-color: #f2c94c;
  color: #0a2c82;
  transform: translateY(-2px);
}

.signature {
  font-weight: bold;
  color: #0a2c82;
  margin-top: 20px;
}

.signature span {
  display: block;
  font-size: 0.9rem;
  color: #666;
}

/* ===== RESPONSIVENESS ===== */
@media (max-width: 768px) {
  .message-wrapper {
    flex-direction: column;
    text-align: center;
  }

  .text-box {
    text-align: left;
  }
}

/* ===== FADE-IN ON SCROLL ===== */
.message-wrapper,
.image-box img,
.text-box {
  opacity: 0;
  transform: translateY(30px);
  transition: all 1s ease-out;
}

.show {
  opacity: 1;
  transform: translateY(0);
}






/* ===== GENERAL STYLES ===== */

h2 {
  font-size: 2.2rem;
  color: #0a2c82;
  text-align: center;
  margin-bottom: 30px;
}



.director-section {
  padding: 80px 10%;
  background: #f9f9f9;
  display: flex;
  justify-content: center;
  align-items: center;
}

.director-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 40px;
  max-width: 1000px;
}

.director-photo img {
  width: 300px;
  height: 350px;
  border-radius: 15px;
  object-fit: cover;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
  transition: transform 0.4s ease;
}

.director-photo img:hover {
  transform: scale(1.05);
}

.director-message {
  flex: 1;
  animation: fadeInUp 1.2s ease both;
}

.director-message h2 {
  color: #004aad;
  font-weight: 700;
  margin-bottom: 15px;
}

.read-more-btn {
  background: #004aad;
  color: #fff;
  padding: 10px 25px;
  border: none;
  border-radius: 30px;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.3s;
  margin-top: 12px;
}

.read-more-btn:hover {
  background: #0073e6;
}

/* -------------------- LIGHTBOX -------------------- */
.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.lightbox.active {
  display: flex;
  animation: fadeIn 0.5s ease forwards;
}

.lightbox-content {
  background: white;
  padding: 30px;
  border-radius: 15px;
  max-width: 600px;
  text-align: center;
  position: relative;
  animation: zoomIn 0.5s ease forwards;
}

.close-lightbox {
  position: absolute;
  top: 10px;
  right: 20px;
  font-size: 30px;
  cursor: pointer;
  color: #333;
}

/* -------------------- ANIMATIONS -------------------- */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes zoomIn {
  from { transform: scale(0.8); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

@keyframes fadeInUp {
  from { transform: translateY(50px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* -------------------- RESPONSIVE DESIGN -------------------- */
@media (max-width: 768px) {
  .director-container {
    flex-direction: column;
    text-align: center;
    gap: 25px;
  }

  .director-photo img {
    width: 90%;
    height: auto;
    border-radius: 20px;
  }

  .director-message {
    width: 100%;
  }

  .read-more-btn {
    margin-top: 15px;
  }
}




/* Deputy Section */
.deputy-section {
  background: linear-gradient(135deg, #f8f9fa, #e9ecef);
  padding: 80px 10%;
  overflow: hidden;
}

.deputy-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 40px;
}

/* Image Styling */
.deputy-photo {
  flex: 1;
  min-width: 280px;
  text-align: center;
  opacity: 0;
  transform: translateX(-80px);
  transition: all 1s ease-in-out;
}

.deputy-photo img {
  width: 320px;
  height: 380px;
  object-fit: cover;
  border-radius: 20px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

/* Message Styling */
.deputy-message {
  flex: 2;
  min-width: 300px;
  opacity: 0;
  transform: translateX(80px);
  transition: all 1s ease-in-out;
}

.deputy-message h2 {
  color: #002855;
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 15px;
  position: relative;
}

.deputy-message h2::after {
  content: "";
  width: 60px;
  height: 4px;
  background: #ffc107;
  position: absolute;
  bottom: -8px;
  left: 0;
  border-radius: 2px;
}

.deputy-message p {
  color: #333;
  font-size: 1.05rem;
  line-height: 1.7;
  margin-bottom: 15px;
}

.deputy-message .quote {
  font-style: italic;
  color: #00509e;
  font-weight: 600;
}

.read-more-btn {
  background: #00509e;
  color: white;
  border: none;
  padding: 12px 25px;
  border-radius: 25px;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.read-more-btn:hover {
  background: #ffc107;
  color: #002855;
  transform: scale(1.05);
}

/* Animation triggers */
.deputy-visible .deputy-photo {
  opacity: 1;
  transform: translateX(0);
}

.deputy-visible .deputy-message {
  opacity: 1;
  transform: translateX(0);
}

/* Responsive */
@media (max-width: 768px) {
  .deputy-container {
    flex-direction: column;
    text-align: center;
  }

  .deputy-message h2::after {
    left: 50%;
    transform: translateX(-50%);
  }

  .deputy-photo img {
    width: 85%;
    height: auto;
  }
}


@keyframes bodyFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}








/* --- Layout --- */
.pjp-welcome-slider {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  font-family: 'Poppins', sans-serif;
}

/* --- Slides --- */
.pjp-slide {
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.1);
  transition: opacity 1.8s ease, transform 4s ease;
}

.pjp-slide.active {
  opacity: 1;
  transform: scale(1);
}

/* --- Overlay --- */
.pjp-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 30, 0.6);
  z-index: 2;
  pointer-events: none;
  transition: background 0.5s ease-in-out;
}

.pjp-welcome-slider:hover .pjp-overlay {
  background: rgba(0, 0, 30, 0.8);
}

/* --- Captions --- */
.pjp-caption {
  position: absolute;
  bottom: 15%;
  left: 50%;
  transform: translateX(-50%) translateY(30px);
  color: #fff;
  text-align: center;
  z-index: 3;
  opacity: 0;
  transition: all 0.8s ease;
}

.pjp-slide.active .pjp-caption {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.pjp-caption h2 {
  font-size: 2rem;
  margin-bottom: 10px;
  color: #ffd700;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.7);
}

.pjp-caption p {
  font-size: 1.1rem;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.5;
  opacity: 0.9;
}

/* --- Welcome Text --- */
.pjp-welcome-text {
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #fff;
  z-index: 4;
  animation: pjpFadeInUp 2s ease-in-out;
}

.pjp-welcome-text h1 {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 20px;
}

.pjp-welcome-text h1 span {
  color: #ffd700;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.6);
}

.pjp-welcome-text p {
  font-size: 1.2rem;
  margin-bottom: 40px;
  opacity: 0.9;
}

/* --- Button --- */
.pjp-btn {
  background: #ffd700;
  color: #000;
  padding: 14px 30px;
  border-radius: 50px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
}

.pjp-btn:hover {
  background: #fff;
  color: #003366;
  transform: scale(1.05);
  box-shadow: 0 0 20px #ffd700;
}

/* --- Keyframes --- */
@keyframes pjpFadeInUp {
  from { opacity: 0; transform: translate(-50%, -30%); }
  to { opacity: 1; transform: translate(-50%, -50%); }
}

/* --- Responsive --- */
@media (max-width: 768px) {
  .pjp-welcome-text h1 { font-size: 2rem; }
  .pjp-caption h2 { font-size: 1.4rem; }
  .pjp-caption p { font-size: 0.95rem; }
}


/* === Smooth Fade-in for Homepage === */
body.home-fade {
  opacity: 0;
  animation: bodyFadeIn 1.6s ease forwards;
}

@keyframes bodyFadeIn {
  from { opacity: 0; transform: scale(1.01); }
  to { opacity: 1; transform: scale(1); }
}




/*Science*/

/* Weekly Adverts Section */
.weekly-adverts {
  background: #f8f9fb;
  padding: 60px 20px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.weekly-adverts .adverts-title {
  font-size: 2rem;
  color: #003366;
  font-weight: 700;
  margin-bottom: 35px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.adverts-slider {
  max-width: 800px;
  margin: auto;
  position: relative;
}

.advert {
  display: none;
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  animation: fadeIn 1s ease-in-out;
}

.advert.active {
  display: block;
}

.advert img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  display: block;
  filter: brightness(75%);
}

.advert-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  color: #fff;
  background: rgba(0, 0, 0, 0.45);
  padding: 20px;
  text-align: left;
}

.advert-caption h3 {
  font-size: 1.5rem;
  margin-bottom: 5px;
}

.advert-caption p {
  margin: 0 0 5px;
  font-size: 1rem;
}

.advert-date {
  font-size: 0.9rem;
  color: #ffd700;
}

@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.98); }
  to { opacity: 1; transform: scale(1); }
}

/* Responsive */
@media (max-width: 768px) {
  .advert img {
    height: 250px;
  }

  .advert-caption {
    padding: 15px;
  }

  .advert-caption h3 {
    font-size: 1.2rem;
  }
}