/* ==========================================================================
   Base Styles & Variables
   ========================================================================== */

:root {
  /* Colors */
  --primary-blue: #222B64; /* Navy Blue from Logo */
  --primary-red: #ED1C24;  /* Bright Red from Logo */
  --text-dark: #333333;
  --text-light: #666666;
  --bg-light: #F8F9FA;
  --white: #FFFFFF;
  --black: #111111;

  /* Typography */
  --font-main: 'Inter', system-ui, -apple-system, sans-serif;
  --font-heading: 'Roboto', system-ui, -apple-system, sans-serif;

  /* Spacing & Layout */
  --container-width: 1200px;
  --section-padding: 80px 0;
  
  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-main);
  color: var(--text-dark);
  line-height: 1.6;
  background-color: var(--bg-light);
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 1rem;
}

a {
  text-decoration: none;
  color: var(--primary-blue);
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--primary-red);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

ul {
  list-style: none;
}

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

.section {
  padding: var(--section-padding);
}

.section-title {
  text-align: center;
  margin-bottom: 3rem;
}

.section-title h2 {
  font-size: 2.5rem;
  color: var(--primary-blue);
  position: relative;
  display: inline-block;
}

.section-title h2::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 4px;
  background-color: var(--primary-red);
  border-radius: 2px;
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  display: inline-block;
  padding: 12px 28px;
  border-radius: 4px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: all var(--transition-normal);
  border: 2px solid transparent;
}

.btn-primary {
  background-color: var(--primary-blue);
  color: var(--white);
}

.btn-primary:hover {
  background-color: transparent;
  border-color: var(--primary-blue);
  color: var(--primary-blue);
}

.btn-secondary {
  background-color: var(--primary-red);
  color: var(--white);
}

.btn-secondary:hover {
  background-color: transparent;
  border-color: var(--primary-red);
  color: var(--primary-red);
}

.btn-outline {
  background-color: transparent;
  border-color: var(--white);
  color: var(--white);
}

.btn-outline:hover {
  background-color: var(--white);
  color: var(--primary-blue);
}

/* ==========================================================================
   Header & Navigation
   ========================================================================== */
.top-bar {
  background-color: var(--primary-blue);
  color: var(--white);
  padding: 8px 0;
  font-size: 0.9rem;
}

.top-bar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.top-bar-contact, .top-bar-social {
  display: flex;
  gap: 20px;
}

.top-bar a {
  color: var(--white);
}

.top-bar a:hover {
  color: #ddd;
}

.header {
  background-color: var(--white);
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  position: sticky;
  top: 0;
  z-index: 1000;
  transition: padding var(--transition-normal);
}

.header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px; /* Removed vertical padding to keep navbar slim */
  height: 80px; /* Fixed sleek height */
  max-width: 1400px; /* Expanded wider container to support larger navbar fonts */
  transition: height var(--transition-normal);
}

.logo {
  display: flex;
  align-items: center;
  height: 100%;
  margin-left: -25px; /* Pulls the logo further left to compensate for built-in whitespace */
}

.logo img {
  height: 95%; /* Fills navbar almost entirely but leaves a tiny gap so it doesn't touch blue */
  width: auto;
  transition: height var(--transition-normal);
}

.header.scrolled {
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.header.scrolled .container {
  height: 60px; /* Shrinks navbar height smoothly on scroll */
}

.header.scrolled .logo img {
  height: 90%; /* Keeps logo contained inside the shrunken navbar */
}

.nav-links {
  display: flex;
  gap: 16px; /* Tight, premium spacing to support larger text sizes */
}

.nav-links a {
  color: var(--text-dark);
  font-weight: 500;
  text-transform: uppercase;
  font-size: 1.02rem; /* Increased size to 1.02rem for extra clarity and premium feel */
  white-space: nowrap;
  position: relative;
  padding-bottom: 4px;
}

.nav-links a::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: var(--primary-red);
  transition: width var(--transition-normal);
}

.nav-links a:hover::after, .nav-links a.active::after {
  width: 100%;
}

.nav-links a:hover, .nav-links a.active {
  color: var(--primary-red);
}

.mobile-menu-btn {
  display: none;
  font-size: 1.5rem;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--primary-blue);
}

/* ==========================================================================
   Hero Section
   ========================================================================== */
.hero {
  position: relative;
  background-size: cover;
  background-position: center 20%; /* Shifted vertically to make the school/college board name clearly visible */
  background-color: var(--primary-blue); /* Fallback */
  color: var(--white);
  text-align: center;
  padding: 120px 0;
}

.hero h1 {
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  font-size: 3.5rem;
  margin-bottom: 1rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  line-height: 1.2;
}

.hero .tagline {
  font-size: 1.5rem;
  font-weight: 300;
  margin-bottom: 2rem;
  font-style: italic;
}

.hero-btns {
  display: flex;
  gap: 15px;
  justify-content: center;
}

@media (min-width: 992px) {
  .hero {
    text-align: left;
    padding: 160px 0;
  }
  .hero h1 {
    font-size: 5.2rem; /* Magnified font size as requested! */
    margin-bottom: 1.2rem;
    line-height: 1.1;
  }
  .hero .tagline {
    font-size: 2rem; /* Magnified tagline size as requested! */
    margin-bottom: 2.5rem;
  }
  .hero-btns {
    justify-content: flex-start;
  }
}

/* ==========================================================================
   Cards / Grid Layouts
   ========================================================================== */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
  align-items: center;
}

.card {
  background: var(--white);
  border-radius: 8px;
  padding: 30px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
  text-align: center;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

.card-icon {
  font-size: 3rem;
  color: var(--primary-red);
  margin-bottom: 20px;
}

.card-title {
  color: var(--primary-blue);
  margin-bottom: 15px;
}

/* ==========================================================================
   Footer
   ========================================================================== */
/* ==========================================================================
   Footer Section Redesign (Visual Mock Alignment & Scoped Theme Colors)
   ========================================================================== */
.footer {
  /* Scoped colors requested by user ONLY in the footer */
  --footer-navy: #0B1F5E;
  --footer-royal: #1E3A8A;
  --footer-red: #FF2B2B;
  --footer-bg-light: #F8FAFC;
  --footer-text-dark: #1E293B;

  background-color: var(--footer-navy);
  color: #cbd4fc; /* Slightly lighter slate-blue for better contrast against rich Navy #0B1F5E */
  padding: 85px 0 0; /* Padding bottom 0 because bottom bar has padding */
  font-family: 'Inter', sans-serif;
  position: relative;
  overflow: hidden;
  border-top: 2px solid rgba(255, 255, 255, 0.05);
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1.2fr 1.5fr;
  gap: 40px;
  margin-bottom: 50px;
}

/* Column 1: About / Brand Block with Blueprint watermark */
.footer-about {
  position: relative;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" opacity="0.05" stroke="white" stroke-width="0.5" fill="none"><path d="M10 90 L90 90 M15 90 L15 50 L35 50 L35 90 M35 90 L35 40 L65 40 L65 90 M65 90 L65 50 L85 50 L85 90 M20 80 H30 V70 H20 Z M70 80 H80 V70 H70 Z M40 80 H48 V70 H40 Z M52 80 H60 V70 H52 Z M40 60 H48 V50 H40 Z M52 60 H60 V50 H52 Z"/></svg>');
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 190px;
  padding-bottom: 10px;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 95%;
}

/* Full Logo Card display container */
.footer-logo-card {
  background-color: var(--white);
  padding: 14px 22px;
  border-radius: 10px;
  display: inline-block;
  box-shadow: 0 6px 20px rgba(0,0,0,0.22);
  max-width: 320px;
  margin-bottom: 5px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.footer-logo-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.3);
}

.footer-logo-full {
  height: 70px;
  width: auto;
  display: block;
  object-fit: contain;
}

.footer-brand-divider-line {
  display: none !important;
}

.footer-brand-description {
  display: none !important;
}

/* Headers with mini Red Bars and custom SVGs */
.footer h3 {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 24px;
  padding-bottom: 10px;
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
}

.footer h3::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 32px;
  height: 2px;
  background-color: var(--footer-red);
}

.footer-h3-icon {
  width: 18px;
  height: 18px;
  color: var(--footer-red);
  flex-shrink: 0;
}

/* Column 2, 3, 4: Quick Links Lists with sliding bullet points */
.footer-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links ul li {
  margin-bottom: 12px;
}

.footer-links ul li a {
  color: #cbd4fc;
  text-decoration: none;
  font-size: 0.95rem;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.footer-links ul li a::before {
  content: '›';
  color: var(--footer-red);
  font-weight: bold;
  font-size: 1.15rem;
  transition: transform 0.3s ease;
}

.footer-links ul li a:hover {
  color: var(--white);
  padding-left: 3px;
}

.footer-links ul li a:hover::before {
  transform: translateX(3px);
}

/* Column 5: Contact Block with Circular Badges in light background and dark icons */
.footer-contact-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 18px;
}

.footer-contact-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: var(--footer-bg-light); /* Background Light: #F8FAFC */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--footer-text-dark); /* Text Dark: #1E293B */
  transition: all 0.3s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.footer-contact-row:hover .footer-contact-icon {
  background-color: var(--footer-red); /* Accent Color: Red #FF2B2B */
  color: var(--white);
  transform: scale(1.08);
}

.footer-contact-text {
  color: #cbd4fc;
  font-size: 0.92rem;
  line-height: 1.45;
  padding-top: 6px;
}

.footer-contact-text a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-contact-text a:hover {
  color: var(--white);
}

/* Footer Bottom Strip (Royal Blue Background #1E3A8A) */
.footer-bottom {
  background-color: var(--footer-royal); /* Secondary Color: Royal Blue #1E3A8A */
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 25px 0;
  color: #cbd5e1;
  font-size: 0.88rem;
  width: 100%;
}

.footer-bottom .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}

.footer-copy {
  line-height: 1.5;
  color: #e2e8f0;
}

.footer-excellence {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #e2e8f0;
  font-weight: 500;
}

.footer-excellence svg {
  color: #4cd964; /* Vibrant green check from visual mock */
  flex-shrink: 0;
}

.footer-social-block {
  display: flex;
  align-items: center;
  gap: 15px;
}

.footer-social-label {
  font-weight: 600;
  color: var(--white);
  font-size: 0.9rem;
}

.footer-social-links {
  display: flex;
  gap: 10px;
}

.footer-social-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: var(--footer-bg-light); /* Background Light: #F8FAFC */
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--footer-text-dark); /* Text Dark: #1E293B */
  transition: all 0.3s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.footer-social-icon:hover {
  background-color: var(--footer-red); /* Accent Color: Red #FF2B2B */
  color: var(--white);
  transform: translateY(-3px);
}

/* ==========================================================================
   Events System Styles
   ========================================================================== */
.events-large-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}

/* 2-Column Gallery Grid for Detailed Event Pages */
.gallery-grid-2col {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.gallery-grid-2col .gallery-item {
  width: 100%;
  height: 380px;
  object-fit: cover;
  border-radius: 8px;
  cursor: pointer;
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.gallery-grid-2col .gallery-item:hover {
  transform: scale(1.02);
  box-shadow: 0 8px 25px rgba(0,0,0,0.2);
}

@media (max-width: 768px) {
  .gallery-grid-2col {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  .gallery-grid-2col .gallery-item {
    height: 260px;
  }
}

.event-card {
  background: var(--white);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.event-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

.event-thumbnail {
  width: 100%;
  height: 300px;
  object-fit: cover;
  border-bottom: 3px solid var(--primary-blue);
  transition: transform var(--transition-normal);
}

.event-card:hover .event-thumbnail {
  transform: scale(1.03);
}

@media (min-width: 992px) {
  .event-card {
    display: flex;
    flex-direction: row;
    align-items: stretch;
  }
  .event-thumbnail {
    width: 45%;
    height: auto;
    min-height: 360px;
    object-fit: cover;
    border-bottom: none;
    border-right: 3px solid var(--primary-blue);
    flex-shrink: 0;
  }
  .event-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px !important;
  }
  .event-card:nth-child(even) {
    flex-direction: row-reverse;
  }
  .event-card:nth-child(even) .event-thumbnail {
    border-right: none;
    border-left: 3px solid var(--primary-blue);
  }
}

.event-content {
  padding: 20px;
}

.event-date {
  color: var(--primary-red);
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 10px;
  display: block;
}

.event-title {
  color: var(--primary-blue);
  margin-bottom: 10px;
}

/* ==========================================================================
   Gallery & Lightbox Styles
   ========================================================================== */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 15px;
}

.gallery-item {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 8px;
  cursor: pointer;
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.gallery-item:hover {
  transform: scale(1.03);
  box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}

.lightbox {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.9);
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--transition-normal);
}

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

.lightbox-content {
  max-width: 90%;
  max-height: 90%;
  border-radius: 4px;
  box-shadow: 0 0 20px rgba(0,0,0,0.5);
  transform: scale(0.95);
  transition: transform var(--transition-normal);
}

.lightbox.active .lightbox-content {
  transform: scale(1);
}

.lightbox-close {
  position: absolute;
  top: 20px;
  right: 30px;
  color: #fff;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
  transition: color 0.3s;
}

.lightbox-close:hover {
  color: var(--primary-red);
}

/* ==========================================================================
   Homepage Feature Sections (Hostel & Transport)
   ========================================================================== */
.feature-large {
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 60px 0;
}

.feature-large.reverse {
  flex-direction: row-reverse;
}

.feature-content {
  flex: 1;
}

.feature-image {
  flex: 1;
  position: relative;
}

.feature-image img {
  width: 100%;
  border-radius: 12px;
  box-shadow: 0 15px 40px rgba(0,0,0,0.15);
}

.feature-list {
  list-style: none;
  padding: 0;
  margin: 20px 0 30px;
}

.feature-list li {
  margin-bottom: 15px;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
}

.feature-list li::before {
  content: "✅";
  margin-right: 10px;
  color: var(--primary-red);
}

/* ==========================================================================
   Results & Toppers Styles
   ========================================================================== */
.achievement-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 30px;
  margin-top: 20px;
}

.achievement-card {
  background: var(--white);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 5px 20px rgba(0,0,0,0.08);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
  border: 1px solid #eee;
}

.achievement-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 35px rgba(0,0,0,0.15);
}

.pamphlet-wrapper {
  position: relative;
  width: 100%;
  height: 350px;
  overflow: hidden;
  background: #f8f9fa;
  cursor: zoom-in;
}

.pamphlet-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  transition: transform 0.5s ease;
}

.achievement-card:hover .pamphlet-image {
  transform: scale(1.05);
}

.achievement-info {
  padding: 20px;
  text-align: center;
  border-top: 3px solid var(--primary-blue);
}

.achievement-year {
  display: inline-block;
  background: var(--primary-red);
  color: white;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 10px;
}

.achievement-title {
  color: var(--primary-blue);
  font-size: 1.2rem;
  margin-bottom: 15px;
}

/* Lightbox Enhancements for Pamphlets */
.lightbox {
  overflow-y: auto; /* Allow scrolling for tall pamphlets */
  padding: 20px 0;
}

.lightbox-content {
  cursor: zoom-in;
  transition: transform 0.3s ease;
}

.lightbox-content.zoomed {
  transform: scale(1.5) !important; /* Allow zooming */
  cursor: zoom-out;
}

/* ==========================================================================
   Responsive Design
   ========================================================================== */
@media (max-width: 992px) {
  .grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
  }
  .footer-about {
    grid-column: 1 / -1;
    margin-bottom: 20px;
  }
}

@media (max-width: 1250px) {
  .nav-links {
    display: none; /* Hide for mobile by default */
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: var(--white);
    padding: 20px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    z-index: 1001; /* Layer overlay above all other elements */
  }
  
  .nav-links.active {
    display: flex;
  }

  .mobile-menu-btn {
    display: block;
  }
}

@media (max-width: 768px) {
  .top-bar {
    display: none;
  }

  .hero h1 {
    font-size: 2.5rem;
  }
  
  .hero .tagline {
    font-size: 1.2rem;
  }

  .grid-2, .grid-3 {
    grid-template-columns: 1fr;
  }
  
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .footer-about {
    grid-column: auto;
    background-size: 150px;
    background-position: right bottom;
  }
  .footer-bottom .container {
    flex-direction: column;
    text-align: center;
    gap: 15px;
  }
  .footer-social-block {
    flex-direction: column;
    gap: 10px;
  }
  
  .hero-btns {
    flex-direction: column;
  }

  .feature-large,
  .feature-large.reverse {
    flex-direction: column;
    padding: 30px 0;
    gap: 20px;
  }
}

/* ==========================================================================
   Right-to-Left Scrolling Marquee Styles
   ========================================================================== */
.marquee-container {
  width: 100%;
  overflow: hidden;
  position: relative;
  background: var(--bg-light);
  padding: 50px 0; /* Expanded padding for larger items */
  border-radius: 12px;
  margin-top: 30px;
  box-shadow: inset 0 0 20px rgba(0,0,0,0.05);
}

.marquee-track {
  display: flex;
  width: max-content;
  gap: 40px; /* Increased gap for better spacing of larger items */
  animation: marqueeRightToLeft 30s linear infinite;
}

.marquee-item {
  width: 650px; /* Increased width from 500px */
  height: 450px; /* Increased height from 350px */
  border-radius: 12px; /* Smoother corner radius */
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(0,0,0,0.12);
  cursor: pointer;
  background: white;
  border: 3px solid var(--primary-blue); /* Thicker premium border */
  flex-shrink: 0;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.marquee-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.marquee-item:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 15px 35px rgba(0,0,0,0.2);
}

.marquee-track:hover {
  animation-play-state: paused;
}

@keyframes marqueeRightToLeft {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* Mobile Responsive Marquee Adjustments */
@media (max-width: 768px) {
  .marquee-container {
    padding: 30px 0;
  }
  .marquee-track {
    gap: 20px;
  }
  .marquee-item {
    width: 340px; /* Responsive size for mobile screens */
    height: 240px;
    border-width: 2px;
  }
}

/* ==========================================================================
   Premium Photo & Image Hover Animations
   ========================================================================== */
.gallery-item,
.pamphlet-image,
.event-thumbnail,
.feature-image img,
.card img,
.grid-2 img {
  transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.5s cubic-bezier(0.165, 0.84, 0.44, 1), filter 0.5s ease;
}

/* Direct interactive image hover styling */
.gallery-item:hover,
.pamphlet-image:hover,
.feature-image img:hover,
.grid-2 img:hover {
  transform: translateY(-4px) scale(1.025);
  box-shadow: 0 15px 35px rgba(0,0,0,0.18);
  filter: brightness(1.02);
}

/* Container zoom inside clipping elements */
.event-card:hover .event-thumbnail,
.card:hover .pamphlet-image,
.card:hover img {
  transform: scale(1.04);
}

/* ==========================================================================
   Admissions Announcement Strip
   ========================================================================== */
.announcement-strip {
  display: block;
  background: var(--primary-red);
  color: var(--white) !important;
  padding: 12px 0;
  overflow: hidden;
  position: relative;
  white-space: nowrap;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.95rem;
  border-bottom: 2px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  z-index: 99;
}

.announcement-strip:hover {
  background: #d6181f; /* A slightly darker variant of logo red for interactive feedback */
}

.announcement-track {
  display: flex;
  width: max-content;
  animation: announcementScroll 25s linear infinite;
}

.announcement-text {
  padding-right: 80px; /* Elegant space between repeating texts */
  display: inline-block;
  color: var(--white);
}

.announcement-strip:hover .announcement-track {
  animation-play-state: paused;
}

@keyframes announcementScroll {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-50%, 0, 0);
  }
}

/* Mobile Responsive Adjustments for Announcement Strip */
@media (max-width: 768px) {
  .announcement-strip {
    padding: 8px 0;
    font-size: 0.8rem;
    letter-spacing: 0.5px;
  }
  .announcement-text {
    padding-right: 40px;
  }
}

/* ==========================================================================
   Home Page Redesign Custom Styles (Visual Mock Alignment)
   ========================================================================== */
.btn-white-solid {
  background-color: var(--white);
  color: var(--primary-blue) !important;
  border-color: var(--white);
}

.btn-white-solid:hover {
  background-color: transparent;
  color: var(--white) !important;
  border-color: var(--white);
}

/* Features Bar */
.features-bar {
  background-color: var(--white);
  padding: 40px 0;
  border-bottom: 1px solid #eee;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}

.feature-item {
  text-align: center;
  padding: 10px;
}

.feature-icon {
  color: var(--primary-blue);
  margin-bottom: 15px;
  display: flex;
  justify-content: center;
}

.feature-item h3 {
  font-size: 1.15rem;
  color: var(--primary-blue);
  margin-bottom: 8px;
  font-weight: 700;
}

.feature-item p {
  color: var(--text-light);
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0;
}

/* Statistics Bar */
.stats-bar {
  background-color: #f4f7fa;
  padding: 45px 0;
  border-top: 1px solid #eef2f6;
  border-bottom: 1px solid #eef2f6;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}

.stats-item {
  display: flex;
  align-items: center;
  gap: 15px;
  justify-content: center;
}

.stats-icon {
  color: var(--primary-blue);
  opacity: 0.8;
  display: flex;
  align-items: center;
}

.stats-content h3 {
  font-size: 1.8rem;
  color: var(--primary-blue);
  margin-bottom: 2px;
  font-weight: 700;
  line-height: 1;
}

.stats-content p {
  color: var(--text-light);
  font-size: 0.95rem;
  margin: 0;
}

/* Mobile responsive features & stats */
@media (max-width: 992px) {
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 25px;
  }
  .stats-item {
    justify-content: flex-start;
    padding-left: 20%;
  }
}

@media (max-width: 576px) {
  .features-grid {
    grid-template-columns: 1fr;
  }
  .stats-grid {
    grid-template-columns: 1fr;
  }
  .stats-item {
    padding-left: 10%;
  }
}

/* ==========================================================================
   Junior College Redesign Custom Styles (Visual Mock Alignment)
   ========================================================================== */
@media (max-width: 992px) {
  .junior-features-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    row-gap: 20px;
  }
  .junior-features-grid > div {
    border-right: none !important;
  }
  .jc-main-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  .jc-main-grid > div:first-child {
    grid-column: span 2;
  }
  .jc-middle-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  .jc-bottom-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    row-gap: 25px;
  }
}

@media (max-width: 768px) {
  .junior-features-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .jc-main-grid {
    grid-template-columns: 1fr !important;
    gap: 30px !important;
  }
  .jc-main-grid > div:first-child {
    grid-column: span 1;
  }
  .jc-middle-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 576px) {
  .jc-bottom-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ==========================================================================
   About Us Redesign Custom Styles (Visual Mock Alignment)
   ========================================================================== */
@media (max-width: 992px) {
  .about-why-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    row-gap: 20px;
  }
  .about-campus-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    row-gap: 20px;
  }
}

@media (max-width: 768px) {
  .about-why-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .about-campus-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 576px) {
  .about-why-grid {
    grid-template-columns: 1fr !important;
  }
  .about-campus-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ==========================================================================
   Leadership Section Premium Redesign (Chairperson & Director Cards - Stacked)
   ========================================================================== */
.leadership-grid {
  display: flex;
  flex-direction: column;
  gap: 40px; /* generous vertical spacing between stacked cards */
  width: 100%;
}

.leader-card {
  border-radius: 24px; /* slightly more rounded for premium curved look */
  overflow: hidden;
  box-shadow: 0 15px 40px rgba(0,0,0,0.12);
  display: flex;
  flex-direction: row;
  align-items: stretch;
  position: relative;
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  border: 1px solid rgba(255, 255, 255, 0.08);
  min-height: 450px; /* generous height to accommodate large images and text */
  width: 100%;
}

.leader-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 22px 50px rgba(0,0,0,0.25);
}

.leader-card-chairperson {
  background: linear-gradient(135deg, #07163c 0%, #152b65 100%);
}

.leader-card-director {
  background: linear-gradient(135deg, #3d050e 0%, #5e101c 100%);
}

.leader-img-wrapper {
  width: 38%; /* MUCH larger photo column (up from 32%) */
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

.leader-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 15%;
  display: block;
  transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.leader-card:hover .leader-card-img {
  transform: scale(1.03);
}

/* Linear edge blend for a seamless portrait layout */
.leader-img-wrapper::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 30px; /* wider shadow fade */
  height: 100%;
  background: linear-gradient(to right, transparent, rgba(7, 22, 60, 0.4));
  pointer-events: none;
}

.leader-card-director .leader-img-wrapper::after {
  background: linear-gradient(to right, transparent, rgba(61, 5, 14, 0.4));
}

.leader-content {
  flex: 1;
  padding: 50px 60px 45px 50px; /* extremely spacious premium padding */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  z-index: 2;
  color: var(--white);
  text-align: left;
}

.leader-msg-title {
  font-size: 1.85rem; /* slightly larger for prominent headers */
  font-weight: 700;
  color: var(--white);
  margin: 0 0 10px 0;
  letter-spacing: 0.5px;
  text-transform: none;
}

.leader-divider {
  width: 45px;
  height: 3px;
  border-radius: 2px;
  margin-bottom: 25px;
}

.leader-divider-chairperson {
  background-color: var(--primary-red);
}

.leader-divider-director {
  background-color: #ffd700; /* gold divider */
}

.leader-quote {
  font-size: 1.05rem; /* slightly larger for premium readability */
  line-height: 1.75;
  opacity: 0.92;
  font-style: italic;
  margin: 0 0 35px 0;
  font-weight: 300;
  letter-spacing: 0.2px;
}

.leader-signature-block {
  margin-top: auto;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 20px;
}

.leader-name-sig {
  font-family: 'Dancing Script', cursive;
  font-size: 2.3rem; /* slightly larger signature name */
  font-weight: 700;
  color: var(--white);
  margin: 0 0 4px 0;
  line-height: 1.2;
}

.leader-role {
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.75);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin: 0;
}

/* Responsiveness overrides for Leadership grid */
@media (max-width: 992px) {
  .leader-content {
    padding: 40px 40px 35px 35px;
  }
}

@media (max-width: 768px) {
  .leader-card {
    flex-direction: column !important;
    min-height: auto;
  }
  .leader-img-wrapper {
    width: 100% !important;
    height: 360px; /* tall portrait view on mobile */
  }
  .leader-card-img {
    object-position: center 10%;
  }
  .leader-img-wrapper::after {
    width: 100%;
    height: 20px;
    top: auto;
    bottom: 0;
    right: auto;
    background: linear-gradient(to bottom, transparent, rgba(7, 22, 60, 0.5));
  }
  .leader-card-director .leader-img-wrapper::after {
    background: linear-gradient(to bottom, transparent, rgba(61, 5, 14, 0.5));
  }
  .leader-content {
    padding: 35px 30px;
  }
}

/* Reverse layout for director message on desktop view */
@media (min-width: 769px) {
  .leader-card-reverse {
    flex-direction: row-reverse !important;
  }
  .leader-card-reverse .leader-img-wrapper::after {
    left: 0;
    right: auto;
    background: linear-gradient(to left, transparent, rgba(61, 5, 14, 0.4)) !important;
  }
}

/* ==========================================================================
   Talent School Page Redesign Styles (Visual Mock Alignment - Version 2)
   ========================================================================== */
.talent-hero {
  background: linear-gradient(135deg, #091a3c 0%, #152b65 100%);
  padding: 100px 0 130px;
  color: var(--white);
  position: relative;
}

.talent-hero-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 40px;
  align-items: center;
}

.talent-hero-image-wrapper {
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 15px 35px rgba(0,0,0,0.25);
  border: 5px solid #ffd700;
  height: 440px;
}

.talent-hero-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Overlapping Stats Bar */
.talent-stats-bar {
  margin-top: -45px;
  position: relative;
  z-index: 10;
  padding: 0 20px;
  margin-bottom: 60px;
}

.talent-stats-container {
  background: var(--white);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  padding: 25px 20px;
}

.talent-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  text-align: center;
}

.talent-stats-card {
  display: flex;
  align-items: center;
  gap: 15px;
  justify-content: center;
}

.talent-stats-icon-circle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Color schemes for stats icons in mockup */
.talent-stats-card:nth-child(1) .talent-stats-icon-circle {
  background-color: #eef2f8;
  color: var(--primary-blue);
}
.talent-stats-card:nth-child(2) .talent-stats-icon-circle {
  background-color: #fff3e0;
  color: #ff9800;
}
.talent-stats-card:nth-child(3) .talent-stats-icon-circle {
  background-color: #ffebee;
  color: var(--primary-red);
}
.talent-stats-card:nth-child(4) .talent-stats-icon-circle {
  background-color: #e8f5e9;
  color: #4caf50;
}

.talent-stats-info {
  text-align: left;
}

.talent-stats-info h3 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary-blue);
  margin: 0;
  line-height: 1;
}

.talent-stats-info p {
  font-size: 0.8rem;
  color: var(--text-light);
  margin: 0;
}

/* Parents Choose Us circular grid */
.parents-choose-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 15px;
}

.parents-choose-card {
  background: var(--white);
  border-radius: 12px;
  padding: 25px 15px;
  border: 1px solid #edf2f7;
  text-align: center;
  box-shadow: 0 4px 15px rgba(0,0,0,0.02);
  transition: transform 0.3s;
}

.parents-choose-card:hover {
  transform: translateY(-5px);
}

.parents-choose-icon-circle {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin: 0 auto 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.parents-choose-card:nth-child(1) .parents-choose-icon-circle { background-color: #fff3e0; color: #ff9800; }
.parents-choose-card:nth-child(2) .parents-choose-icon-circle { background-color: #eef2f8; color: var(--primary-blue); }
.parents-choose-card:nth-child(3) .parents-choose-icon-circle { background-color: #ffebee; color: var(--primary-red); }
.parents-choose-card:nth-child(4) .parents-choose-icon-circle { background-color: #e8f5e9; color: #4caf50; }
.parents-choose-card:nth-child(5) .parents-choose-icon-circle { background-color: #eef2f8; color: var(--primary-blue); }
.parents-choose-card:nth-child(6) .parents-choose-icon-circle { background-color: #ffebee; color: var(--primary-red); }

.parents-choose-card h4 {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--primary-blue);
  margin: 0;
  line-height: 1.4;
}

/* Programs & Activities (5 columns) */
.programs-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 15px;
}

.programs-card {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
  background-color: var(--primary-blue);
  color: var(--white);
  height: 230px;
  position: relative;
}

.programs-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.85;
  display: block;
}

.programs-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(34, 43, 100, 0.9);
  padding: 10px;
  text-align: center;
  z-index: 2;
}

.programs-caption h4 {
  font-size: 0.82rem;
  margin: 0;
  font-weight: 600;
  color: var(--white);
}

/* Bottom Split Layout */
.talent-bottom-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 30px;
  margin-top: 40px;
}

.talent-admissions-card {
  background: #061330;
  border-radius: 12px;
  padding: 40px;
  color: var(--white);
  text-align: left;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 300px;
}

.talent-admissions-content {
  position: relative;
  z-index: 2;
  max-width: 60%;
}

.talent-admissions-card img.admissions-kids-graphic {
  position: absolute;
  bottom: 0;
  right: 0;
  height: 100%;
  max-height: 280px;
  width: auto;
  z-index: 1;
  pointer-events: none;
  display: block;
  object-fit: contain;
}

.talent-contact-card {
  background-color: #f8f9fc;
  border-radius: 12px;
  padding: 40px;
  border: 1px solid #e2e8f0;
  text-align: left;
  box-shadow: 0 4px 15px rgba(0,0,0,0.02);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.talent-contact-card h3 {
  color: var(--primary-blue);
  font-size: 1.4rem;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 25px;
}

.talent-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  margin-bottom: 20px;
}

.talent-contact-icon {
  font-size: 1.25rem;
  color: var(--primary-red);
  line-height: 1;
}

.talent-contact-text p {
  margin: 0;
  font-size: 0.95rem;
  color: var(--text-dark);
  line-height: 1.5;
}

/* Responsiveness overrides */
@media (max-width: 992px) {
  .talent-hero-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .talent-stats-grid {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 20px;
  }
  .parents-choose-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .programs-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .talent-bottom-grid {
    grid-template-columns: 1fr;
  }
  .talent-admissions-content {
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  .programs-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .parents-choose-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .talent-hero-image-wrapper {
    height: 280px;
  }
}

@media (max-width: 576px) {
  .talent-stats-grid {
    grid-template-columns: 1fr;
  }
  .parents-choose-grid {
    grid-template-columns: 1fr;
  }
  .programs-grid {
    grid-template-columns: 1fr;
  }
  .talent-admissions-card img.admissions-kids-graphic {
    display: none;
  }
}

/* Custom grid to align the school building image on desktop */
.discover-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: 50px !important;
}

@media (max-width: 992px) {
  .discover-grid {
    grid-template-columns: 1fr;
    gap: 30px !important;
  }
}

/* Homepage "Our Branches" Redesign Styles */
.branch-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-top: 40px;
}

.branch-card {
  background: var(--white);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.06);
  border: 1px solid #f0f0f0;
  text-align: center;
  transition: transform 0.3s, box-shadow 0.3s;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.branch-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.12);
}

.branch-card-image-wrapper {
  position: relative;
  height: 220px;
  width: 100%;
  overflow: hidden;
}

.branch-card-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--transition-normal);
}

.branch-card:hover .branch-card-image-wrapper img {
  transform: scale(1.05);
}

/* Full school photo styling with blurred background for Vanasthalipuram card */
.branch-card-image-wrapper.full-photo-wrapper {
  background-color: #f8fafc;
  background-size: cover;
  background-position: center;
}

.branch-card-image-wrapper.full-photo-wrapper .blurred-bg-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: inherit;
  filter: blur(15px) brightness(0.85);
  transform: scale(1.1);
  z-index: 1;
}

.branch-card-image-wrapper.full-photo-wrapper img.full-photo-img {
  position: relative;
  z-index: 2;
  object-fit: contain;
  width: 100%;
  height: 100%;
  display: block;
}

/* Curved wave effect matching the mockup */
.branch-card-wave {
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 50px;
  overflow: hidden;
  z-index: 3; /* Increased to 3 to stay on top of contained branch images */
}

.branch-card-wave svg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
  fill: #ffffff;
}

/* Overlapping badge */
.branch-card-badge {
  position: absolute;
  bottom: -25px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0,0,0,0.12);
  z-index: 4;
  border: 4px solid var(--white);
}

.branch-card-content {
  padding: 40px 25px 30px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: space-between;
}

.branch-card-content h3 {
  font-size: 1.65rem;
  color: var(--primary-blue);
  font-weight: 700;
  margin-top: 5px;
  margin-bottom: 5px;
  line-height: 1.3;
}

.branch-card-subtitle {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-dark);
  margin-top: 0;
  margin-bottom: 15px;
}

.branch-card-text {
  font-size: 0.9rem;
  color: var(--text-light);
  line-height: 1.6;
  margin-bottom: 25px;
  flex-grow: 1;
}

.btn-branch {
  width: 70%;
  margin: 0 auto;
  padding: 10px 20px;
  border-radius: 8px;
  font-weight: 700;
  text-align: center;
  display: inline-block;
  text-transform: none;
  font-size: 0.95rem;
}

.btn-branch-blue {
  background-color: var(--primary-blue);
  color: var(--white);
  border: none;
}

.btn-branch-blue:hover {
  background-color: #111a60;
  color: var(--white);
}

.btn-branch-red {
  background-color: var(--primary-red);
  color: var(--white);
  border: none;
}

.btn-branch-red:hover {
  background-color: #b71c1c;
  color: var(--white);
}

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

@media (max-width: 768px) {
  .branch-cards-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Premium Global Scroll Reveal Entrance Animations
   ========================================================================== */
.js-enabled .scroll-reveal {
  opacity: 0;
  will-change: transform, opacity;
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 1. Zoom In (Slight zoom and fade - highly premium) */
.js-enabled .scroll-reveal.reveal-zoom-in {
  transform: scale(0.93) translateY(15px);
}

/* 2. Slide Left (Slides from Left to Right) */
.js-enabled .scroll-reveal.reveal-slide-left {
  transform: translateX(-45px);
}

/* 3. Slide Right (Slides from Right to Left) */
.js-enabled .scroll-reveal.reveal-slide-right {
  transform: translateX(45px);
}

/* 4. Slide Up (Standard, refined vertical reveal) */
.js-enabled .scroll-reveal.reveal-slide-up {
  transform: translateY(40px);
}

/* Revealed active states */
.js-enabled .scroll-reveal.revealed {
  opacity: 1;
  transform: translateY(0) translateX(0) scale(1);
}

/* ==========================================================================
   Hostel Horizontal Marquee Styles
   ========================================================================== */
.hostel-marquee-wrapper {
  display: block;
  width: 100%;
  overflow: hidden;
  position: relative;
  border-radius: 20px;
  border: 6px solid var(--white);
  box-shadow: 0 20px 45px rgba(0,0,0,0.18);
  background-color: rgba(255, 255, 255, 0.03);
  cursor: pointer;
  z-index: 10;
  margin-top: 20px;
}

.hostel-marquee-track {
  display: flex;
  width: max-content;
  gap: 20px;
  animation: hostelMarqueeScroll 28s linear infinite;
  padding: 15px;
}

.hostel-marquee-track img {
  height: 350px !important; /* Made big as requested */
  width: 480px !important;  /* Spacious and detailed landscape aspect ratio */
  object-fit: cover !important;
  border-radius: 12px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.1);
  transition: transform var(--transition-normal), filter var(--transition-normal);
}

.hostel-marquee-wrapper:hover .hostel-marquee-track {
  animation-play-state: paused;
}

.hostel-marquee-track img:hover {
  transform: scale(1.03) !important;
  filter: brightness(1.04) !important;
}

/* Keyframe for right to left scrolling with big images */
@keyframes hostelMarqueeScroll {
  0% {
    transform: translateX(0);
  }
  100% {
    /* 4 images * (480px + 20px gap) = 2000px translation for seamless loops */
    transform: translateX(-2000px);
  }
}

@media (max-width: 768px) {
  .hostel-marquee-track img {
    height: 250px !important;
    width: 340px !important;
  }
  @keyframes hostelMarqueeScroll {
    0% {
      transform: translateX(0);
    }
    100% {
      /* 4 images * (340px + 20px gap) = 1440px */
      transform: translateX(-1440px);
    }
  }
}

/* ==========================================================================
   High School Branch Custom Styles
   ========================================================================== */
.high-school-hero-image-wrapper {
  border: 6px solid rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0,0,0,0.3);
  width: 100%;
  height: auto; /* Dynamically sizes container to fit full uncropped school image */
  transition: all var(--transition-normal);
  background-color: rgba(255, 255, 255, 0.03);
}

.high-school-hero-image-wrapper .gallery-item {
  width: 100% !important;
  height: auto !important; /* Forces image to display in its natural aspect ratio with 100% full view */
  object-fit: contain !important;
  display: block;
  cursor: pointer;
  transition: transform var(--transition-normal) !important;
}

.high-school-hero-image-wrapper:hover .gallery-item {
  transform: scale(1.025);
}

/* ==========================================================================
   Homepage Spotlight on Campus Life Section Styles
   ========================================================================== */
.spotlight-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-top: 40px;
}

.spotlight-card {
  background: var(--white);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.06);
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  text-decoration: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.spotlight-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.12);
}

.spotlight-img-wrapper {
  position: relative;
  height: 220px;
  overflow: hidden;
}

.spotlight-img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.spotlight-card:hover .spotlight-img-wrapper img {
  transform: scale(1.06);
}

.spotlight-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(11,31,94,0.05), rgba(11,31,94,0.5));
}

.spotlight-content {
  padding: 30px 25px 25px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  position: relative;
  text-align: left;
}

.spotlight-icon-badge {
  position: absolute;
  top: -24px;
  right: 25px;
  width: 48px;
  height: 48px;
  background-color: var(--primary-red);
  color: var(--white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  z-index: 3;
  border: 3px solid var(--white);
}

.spotlight-content h3 {
  font-size: 1.45rem;
  color: var(--primary-blue);
  font-weight: 700;
  margin: 0 0 10px 0;
  line-height: 1.2;
}

.spotlight-content p {
  font-size: 0.92rem;
  color: var(--text-light);
  line-height: 1.65;
  margin-top: 0;
  margin-bottom: 25px;
  flex-grow: 1;
}

.spotlight-btn {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--primary-red);
  display: inline-flex;
  align-items: center;
  margin-top: auto;
  transition: color 0.3s ease;
}

.spotlight-card:hover .spotlight-btn {
  color: var(--primary-blue);
}

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

@media (max-width: 768px) {
  .spotlight-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Homepage Alumni Section Styles
   ========================================================================== */
.alumni-marquee-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 30px 0;
}

.alumni-marquee-track {
  display: flex;
  gap: 30px;
  width: max-content;
  animation: alumniScroll 35s linear infinite;
}

.alumni-marquee-track:hover {
  animation-play-state: paused;
}

.alumni-card {
  width: 280px;
  background: var(--white);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
  border: 1px solid #eef2f6;
  display: flex;
  flex-direction: column;
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.alumni-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 16px 36px rgba(0,0,0,0.12);
}

.alumni-img-wrapper {
  height: 360px;
  background-color: #f8fafc;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-bottom: 1px solid #f1f5f9;
}

.alumni-img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.5s ease;
  padding: 10px;
}

.alumni-card:hover .alumni-img-wrapper img {
  transform: scale(1.03);
}

.alumni-content {
  padding: 20px 15px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-grow: 1;
}

.alumni-content h3 {
  font-size: 1.15rem;
  color: var(--primary-blue);
  font-weight: 700;
  margin: 0 0 5px 0;
  line-height: 1.3;
}

.alumni-dest {
  font-size: 0.9rem;
  color: var(--text-light);
  margin-top: 0;
  margin-bottom: 12px;
}

.alumni-badge {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 20px;
  letter-spacing: 0.5px;
}

.badge-iit {
  background-color: #ffebee;
  color: var(--primary-red);
}

.badge-nit {
  background-color: #e8eaf6;
  color: var(--primary-blue);
}

.badge-med {
  background-color: #e8f5e9;
  color: #2e7d32;
}

.badge-univ {
  background-color: #fff3e0;
  color: #ef6c00;
}

@keyframes alumniScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Alumni Page Styles */
.alumni-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
  max-width: 1000px;
  margin: 0 auto;
}

.alumni-grid .alumni-card-page {
  background: var(--white);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.06);
  border: 1px solid #eef2f6;
  display: flex;
  flex-direction: row;
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
  min-height: 280px;
}

.alumni-grid .alumni-card-page:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.12);
}

.alumni-grid .alumni-card-page .alumni-img-wrapper-page {
  width: 45%;
  background-color: #f8fafc;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-right: 1px solid #f1f5f9;
}

.alumni-grid .alumni-card-page .alumni-img-wrapper-page img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 10px;
  cursor: pointer;
}

.alumni-grid .alumni-card-page .alumni-content-page {
  width: 55%;
  padding: 30px 25px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
}

.alumni-grid .alumni-card-page .alumni-content-page h3 {
  font-size: 1.4rem;
  color: var(--primary-blue);
  font-weight: 700;
  margin: 0 0 8px 0;
}

.alumni-grid .alumni-card-page .alumni-content-page .alumni-dest-page {
  font-size: 1.05rem;
  color: var(--text-light);
  margin-top: 0;
  margin-bottom: 15px;
}

.alumni-grid .alumni-card-page-centered {
  grid-column: 1 / -1;
  justify-self: center;
  width: 100%;
  max-width: 480px;
}

@media (max-width: 768px) {
  .alumni-grid {
    grid-template-columns: 1fr;
  }
  .alumni-grid .alumni-card-page {
    flex-direction: column;
    min-height: auto;
  }
  .alumni-grid .alumni-card-page .alumni-img-wrapper-page {
    width: 100%;
    height: 250px !important; /* Reduced for better mobile proportion */
    border-right: none;
    border-bottom: 1px solid #f1f5f9;
  }
  .alumni-grid .alumni-card-page .alumni-content-page {
    width: 100%;
    padding: 20px;
  }
  .alumni-grid .alumni-card-page-centered {
    max-width: 100%;
  }
}

/* ==========================================================================
   Phase 39: Responsive Typography and Mobile View Resizing
   ========================================================================== */

/* Responsive Hero Typography System */
.about-hero-title {
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  font-size: 5.2rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--white);
  margin-bottom: 10px;
  line-height: 1.1;
}

.about-hero-subtitle {
  color: #ff9800;
  font-size: 2.5rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 25px;
}

.branch-hero-title {
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  font-size: 4rem;
  font-weight: 700;
  margin-bottom: 5px;
  color: var(--white);
  line-height: 1.15;
}

.branch-hero-subtitle {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 20px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.branch-hero-tagline {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 20px;
  line-height: 1.15;
  color: var(--white);
  text-transform: none;
  letter-spacing: 0;
}

.page-header-title {
  margin: 0;
  font-weight: 800;
  font-size: 3.5rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  line-height: 1.2;
}

@media (max-width: 768px) {
  /* Scale down h2 titles globally on mobile to fit nicely */
  h2, .section-title h2 {
    font-size: 1.75rem !important;
  }
  
  /* Hero typography scaling overrides on mobile */
  .about-hero-title {
    font-size: 2.4rem;
  }
  .about-hero-subtitle {
    font-size: 1.35rem;
    margin-bottom: 15px;
  }
  .branch-hero-title {
    font-size: 2.1rem;
  }
  .branch-hero-subtitle {
    font-size: 1.4rem;
    margin-bottom: 15px;
  }
  .branch-hero-tagline {
    font-size: 1.25rem;
    margin-bottom: 15px;
  }
  .page-header-title {
    font-size: 1.9rem;
  }
  
  /* Reduced Alumni card sizes on mobile marquee */
  .alumni-card {
    width: 220px !important;
  }
  .alumni-img-wrapper {
    height: 250px !important;
  }
  .alumni-content h3 {
    font-size: 0.95rem !important;
  }
  .alumni-dest {
    font-size: 0.8rem !important;
    margin-bottom: 8px;
  }
  .alumni-badge {
    font-size: 0.7rem !important;
    padding: 3px 8px;
  }
}