/* ------------------------------
   Light Theme (keeps all content)
------------------------------ */
:root{
  /* Lightened palette */
  --blue-900:#f6f9ff;         /* page bg */
  --blue-800:#edf2fb;         /* subtle panels/sections */
  --blue-700:#e6eefb;
  --accent:#c79a3b;           /* brand accent (kept orange, slightly softer) */
  --primary:#1e3549;          /* blue for links/focus */
  --shadow: 0 10px 30px rgba(2,6,23,.08);
}

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  text-decoration:none;
  list-style:none;
}
 html[lang="mr"],
html[lang="mr"] body {
  font-family: "Noto Sans Devanagari", sans-serif;
}
body{
  font-family:'Poppins',sans-serif;
  background:#f4f5f7;
  overflow-x:hidden;
}
*{box-sizing:border-box}
html,body{height:100%}
html{
scroll-behavior:smooth;
}
/* =========================
   TRANSLATE BUTTON
========================= */
/* =========================
   TRANSLATE BUTTON
========================= */

.translate-btn{

  position:absolute;
  right:140px;

  height:44px;
  padding:0 20px;

  border:none;
  border-radius:50px;

  background:transparent;

  border:2px solid #c79a3b;

  color:#1e3549;

  font-size:15px;
  font-weight:600;
  font-family:'Poppins',sans-serif;

  cursor:pointer;

  transition:all .3s ease;
}

/* HOVER */

.translate-btn:hover{

  background:#c79a3b;
  color:#fff;

  transform:translateY(-2px);
}

/* MOBILE */

@media(max-width:900px){

  .translate-btn{

    position:static;

    margin-top:12px;

    width:160px;
  }

}

/* Hide Google Translate */
#google_translate_element{
  display:none;
}

.goog-te-banner-frame.skiptranslate,
iframe.skiptranslate{
  display:none !important;
}

body{
  top:0 !important;
}
/* =========================================================
   GLOBAL WEBSITE CONTAINER
========================================================= */

.container{
  width:100%;
  max-width:1440px;
  margin:0 auto;
  padding:0 40px;
}
/* large desktop */
@media(max-width:1600px){
  .container{
    max-width:1320px;
  }
}

/* laptop */
@media(max-width:1200px){
  .container{
    padding:0 32px;
  }
}
/* tablet */
@media(max-width:768px){
  .container{
    padding:0 20px;
  }
}
/* Containers */
.container {
  width: min(1200px, 92vw);
  margin-inline: auto;
}
.container.narrow {
  width: min(1100px, 95vw);
}

.section {
  padding: 72px 0;
}
.section-contrast {
  background: linear-gradient(180deg, #ffffff, #f7faff);
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}
/* Bigger overview box */
.overview-text.box-style {
  background: rgba(255, 255, 255, 0.95);
  padding: 3.5rem 4rem;   /* extra padding */
  border-radius: 20px;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.15);
  max-width: 1200px;     /* increased width */
  margin: 0 auto 2.5rem; /* center + spacing below */
}

/* Adjust text for larger box */
.overview-text h2 {
  font-size: 3rem;       /* bigger heading */
  margin-bottom: 1.5rem;
}
.overview-text p {
  font-size: 1.25rem;    
  line-height: 1.75;     
}

.overview-text strong {
  color: #e1a800;
}

.btn-visit {
  display: inline-block;
  background: #e1a800;
  color: #002366;
  padding: 0.9rem 1.8rem;
  border-radius: 50px;
  font-weight: bold;
  font-size: 1rem;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.btn-visit:hover {
  background: #e6c200;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(255, 215, 0, 0.4);
}

.campus-video video {
  width: 100%;
  border-radius: 12px;
  box-shadow: 0 6px 18px #191970;
}
.hidden {
  display: none;
}
.fade-out {
  animation: fadeOutUp 0.7s forwards;
}
.fade-in {
  display: block !important;
  animation: fadeIn 0.8s forwards;
}

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

/* Modern box style for text */
.box-style {
  background: rgba(255, 255, 255, 0.85); /* subtle glassy effect */
  backdrop-filter: blur(10px);
  border-radius: 16px;
  padding: 3rem;
  margin: 1.5rem 0;
  box-shadow: 0 8px 24px rgba(0, 35, 102, 0.15);
  border: 1px solid rgba(0, 35, 102, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.box-style:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 35, 102, 0.25);
}

/* Make sure text aligns nicely inside the box */
.box-style h2 {
  margin-top: 0;
}

.box-style p {
  color: #002366;
}

/* Visually hidden (for a11y) */
.sr-only{position:absolute;left:-9999px}
.skip-link{
  position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  position:fixed; left:16px; top:16px; width:auto; height:auto; padding:10px 14px;
  background:#111; color:#fff; border-radius:8px; z-index:10000;
}

/* ------------------------------
   Preloader
------------------------------ */
#preloader{
  position:fixed; inset:0; background:#fff;
  display:grid; place-items:center; z-index:9999;
}
#preloader .preloader-inner{display:flex; flex-direction:column; align-items:center; gap:14px}
#preloader img{width:72px; height:auto; border-radius:12px; box-shadow:var(--shadow)}
#preloader .bar{
  position:relative; display:block; width:160px; height:6px; background:#eef2f7;
  border-radius:999px; overflow:hidden;
}
#preloader .bar::after{
  content:""; position:absolute; inset:0; width:45%;
  background:linear-gradient(90deg, transparent, var(--primary), transparent);
  animation:loadbar 1.1s linear infinite;
}
@keyframes loadbar{0%{transform:translateX(-120%)} 100%{transform:translateX(220%)}}

/* ------------------------------
   Header / Navbar
------------------------------ */
/* HEADER TOP */
/* TOP CONTACT BAR */
.header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 30px;
    background-color: #1e3549;
}
/* LOGO */
.logo {
    display: flex;
    align-items: center;
}

.logo img {
    height: 100px;
    margin-left: 20px;
}

.logo h1{
  font-family: Montserrat;
}
.header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 28px;
  transition:0.4s ease;
}

/* RIGHT BLOCK */
.header-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

/* CONTACT LINE */
.header-contact-line {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
}

.header-contact-line a {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #fff;
  text-decoration: none;
  opacity: 0.9;
  transition: all 0.3s ease;
}

.header-contact-line a i {
  color: #c79a3b;
  font-size: 14px;
}

.header-contact-line a:hover {
  opacity: 1;
  transform: translateY(-1px);
}

.divider {
  color: rgba(255,255,255,0.4);
}

/* SOCIAL ICONS BELOW */
.header-social {
  display: flex;
  gap: 10px;
}

.header-social a {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  display: flex;
  align-items: center;
  text-decoration: none;
  justify-content: center;
  color: #ffffff;
  transition: all 0.3s ease;
}

.header-social a:hover {
  background: #c79a3b;
  color: #ffff;
  transform: scale(1.0);
}

/* Sticky Navbar Logo */
.sticky-logo{
  display:none;
  align-items:center;
  margin-right:30px;
}

.sticky-logo img{
  height:45px;
  margin-top: 6px;
  width:auto;
  transition:0.3s ease;
}
.nav-container.sticky{
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 0 20px;
}

/* Show logo on sticky */
.nav-container.sticky .sticky-logo{
  display:flex;
  position:absolute;
  left:25px;
}

/* Move nav links center */
.nav-container.sticky .nav-links{
  margin:auto;
}
.header-top.hide{
  transform:translateY(-100%);
  opacity:0;
  transition:0.4s ease;
}

/* NAV CONTAINER */
.nav-container {
    display: flex;
    justify-content: center; /* Center nav links */
    align-items: center;
    background-color: #e8e9ea;
    padding: 0 20px;
    position: relative;
}
.nav-links{
    list-style:none;
    display:flex;
    gap:34px;
    margin:0;
    padding:0;
    align-items:center;
}
.nav-links li a{
    display:block;
    padding:14px 0;
    color:#1e3549;
    text-decoration:none;
    font-size:20px;
    font-weight:200;
    position:relative;
    transition:color 0.3s ease;
}

/* UNDERLINE EFFECT */
.nav-links li a::after{
    content:"";
    position:absolute;
    left:0;
    bottom:14px;
    width:0;
    height:2px;
    background:#c79a3b;
    border-radius:10px;
    transition:width .35s ease;
}

/* HOVER */
.nav-links li a:hover{
    color:#c79a3b;
}

.nav-links li a:hover::after,
.nav-links li a.active::after{
    width:100%;
}
/* ================================
   Sticky Navbar on Scroll
================================ */
.nav-container {
  position: relative;
  transition: all 0.3s ease;
  z-index: 1000;
}

/* Sticky Active State */
.nav-container.sticky {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #e8e9ea;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  animation: slideDown 0.3s ease;
}
.nav-container.sticky .nav-links li a{
  color:#1e3549;
  font-weight:200;
}

/* Optional: Active underline color when sticky */
.nav-container.sticky .nav-links li a::after {
  background-color: #c79a3b;
}

/* Smooth Slide Down Animation */
@keyframes slideDown {
  from { transform: translateY(-100%); }
  to { transform: translateY(0); }
}
/* =========================================
   STICKY NAVBAR DROPDOWN HOVER WHITE
========================================= */

.nav-container.sticky .dropdown-menu li a:hover{
  background:#1e3549;
  color:#ffffff;
}

.nav-container.sticky .dropdown-menu li a.active{
  background:#1e3549;
  color:#ffffff !important;
  border-left:4px solid #c79a3b;
}

/* Optional smoother modern hover */

.nav-container.sticky .dropdown-menu li a{
  transition:all .3s ease;
}

.nav-container.sticky .dropdown-menu li a:hover{
  padding-left:24px;
}
/* ALUMNI BUTTON */
.alumni-btn {
    position: absolute;
    right: 20px;
    background-color: #1e3549;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 60px;
    cursor: pointer;
    font-size: 20px;
    transition: all 0.3s ease;
}
.alumni-btn:hover {
    background-color: rgba(30,53,73,0.85);;
    transform: scale(1.0);
}

.dropdown {
      position: relative;
    }

    .dropdown-menu {
        list-style: none;
      position: absolute;
      top: 45px;
      background: rgba(255,255,255,0.95);
      backdrop-filter: blur(8px);
      border-radius: 10px;
      min-width: 220px;
      padding: 10px 0;
      box-shadow: 0 8px 20px rgba(0,0,0,0.15);
      display: none;
      z-index: 999;
      margin-top: 15px;
    }

    .dropdown-menu li a {
      display: block;
      padding: 10px 20px;
      color: #1e3549;
      font-size: 15px;
      font-weight: 500;
      
      text-decoration: none;
    }

    .dropdown-menu li a:hover {
      background: #1e3549;
      color: #fff;
    }

    .dropdown-menu li a::after {
    display: none;
}
    .dropdown:hover .dropdown-menu {
      display: block;
    }
.dropdown-menu li a.active {
    background: #1e3549;
    color: #fff !important;
    border-left: 4px solid #c79a3b; /* Golden indicator */
}
/* =========================================
   PREMIUM STUDENT LOGIN MODAL
========================================= */

.modal{
    display:none;
    position:fixed;
    inset:0;
    z-index:9999;
    background:rgba(8,18,30,0.65);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    justify-content:center;
    align-items:center;
    padding:20px;
    animation:fadeIn .35s ease;
}

.modal.active{
    display:flex;
}

/* =========================
   MODAL BOX
========================= */
.modal-content{
    position:relative;
    width:100%;
    max-width:460px;
    background:
      linear-gradient(
        145deg,
        rgba(30,53,73,0.96),
        rgba(20,35,49,0.96)
      );
    border-radius:30px;
    padding:45px 38px;
    border:1px solid rgba(255,255,255,0.08);
    box-shadow:
      0 20px 60px rgba(0,0,0,0.35),
      0 0 0 1px rgba(255,255,255,0.04);

    overflow:hidden;
    animation:modalPop .45s ease;
}
/* GOLD GLOW */
.modal-content::before{
    content:"";
    position:absolute;
    width:220px;
    height:220px;
    background:rgba(199,154,59,0.18);
    border-radius:50%;
    top:-90px;
    right:-70px;
    filter:blur(30px);
}
/* =========================
   CLOSE BUTTON
========================= */
.close-btn{
    position:absolute;
    top:18px;
    right:20px;
   width:38px;
    height:38px;
    border-radius:50%;
    background:rgba(255,255,255,0.08);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
    color:#ffffff;
    cursor:pointer;
    transition:.3s ease;
}
.close-btn:hover{
    background:#c79a3b;
    transform:rotate(90deg);
}
/* =========================
   HEADER
========================= */
.modal-header{
    text-align:center;
    margin-bottom:32px;
    position:relative;
    z-index:2;
}
.modal-logo{
    width:82px;
    margin-bottom:18px;
    filter:drop-shadow(0 6px 18px rgba(0,0,0,0.25));
}
.modal-header h2{
    color:#fff;
    font-size:2rem;
    font-weight:700;
    margin-bottom:8px;
}
.modal-header p{
    color:rgba(255,255,255,0.7);
    font-size:0.95rem;
}
/* =========================
   FORM
========================= */
.modal form{
    position:relative;
    z-index:2;
}
.modal form label{
    display:block;
    color:#fff;
    font-size:0.92rem;
    font-weight:500;
    margin-bottom:10px;
    margin-top:18px;
}
/* INPUT */
.modal form input{
    width:100%;
    height:56px;
    background:rgba(255,255,255,0.08);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:16px;
    padding:0 18px;
    color:#fff;
    font-size:1rem;
    transition:.3s ease;
}

.modal form input::placeholder{
    color:rgba(255,255,255,0.45);
}

.modal form input:focus{
    outline:none;
    border-color:#c79a3b;
    background:rgba(255,255,255,0.12);

    box-shadow:
      0 0 0 4px rgba(199,154,59,0.12);
}

/* =========================
   LOGIN BUTTON
========================= */

.login-btn{
    width:100%;
    height:56px;
    border:none;
    border-radius:16px;
    margin-top:28px;
    background:linear-gradient(135deg,#c79a3b, #d8aa45);
    color:#fff;
    font-size:1rem;
    font-weight:700;
    cursor:pointer;
    transition:.35s ease;
    box-shadow:
      0 12px 28px rgba(199,154,59,0.25);
}
.login-btn:hover{
    transform:translateY(-3px);
    box-shadow:
      0 18px 36px rgba(199,154,59,0.35);
}
/* =========================
   LINKS
========================= */
.modal-links{
    margin-top:22px;
    text-align:center;
    color:rgba(255,255,255,0.4);
}
.modal-links a{
    color:#c79a3b;
    text-decoration:none;
    font-size:0.92rem;
    font-weight:500;
    transition:.3s ease;
}
.modal-links a:hover{
    color:#fff;
}
/* =========================
   ANIMATION
========================= */

@keyframes modalPop{
    from{
        opacity:0;
        transform:translateY(30px) scale(.96);
    }
    to{
        opacity:1;
        transform:translateY(0) scale(1);
    }
}
/* =========================
   MOBILE
========================= */
@media(max-width:768px){

    .modal-content{
        padding:38px 24px;
        border-radius:24px;
    }

    .modal-header h2{
        font-size:1.7rem;
    }

    .modal form input,
    .login-btn{
        height:52px;
    }
}

/* Fullscreen Hero */
.hero-full {
  position: relative;
  width: 100%;
  height: 80vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
.slider-container-full {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.slides-full {
  width: 100%;
  height: 100%;
  position: relative;
}

.slide-full {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;

  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.slide-full.active {
  opacity: 1;
}
/* Hero Overlay for Better Text Visibility */
.hero-full::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(30, 53, 73, 0.80); /* adjust 0.25–0.45 if needed */
  z-index: 2;
}

.arrow-full {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  font-size: 2rem;
  color: white;
  width: 55px;
  height: 55px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  transition: 0.3s ease;
}

.arrow-full:hover {
  color: #c79a3b;
  transform: translateY(-50%) scale(1.1);
}

.arrow-full.left {
  left: 18px;
}

.arrow-full.right {
  right: 18px;
}
.arrow-full.right { right: 20px; }
.hero-content {
  position: relative;
  z-index: 10;
  text-align: center;
  width: 80%;
  max-width: 700px;
  padding: 2rem;
  border-radius: 20px;
  line-height: 1.1; /* reduces overall line spacing */
}

/* Heading */
.hero-content h1 {
  font-size: 4rem;
  color: #c79a3b;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
  /* REDUCED SPACE */
  margin: 0.2rem 0;
}

/* Paragraph */
.hero-content p {
  font-size: 1.4rem;
  font-style: italic;
  color: #ffffff;
  font-weight: 900;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);

  /* REDUCED GAP BELOW HEADINGS */
  margin-top: 0.8rem;
  margin-bottom: 1.5rem;

  transition: opacity 0.5s ease;
}
/* Buttons */
/* =========================
   HERO BUTTONS (IMAGE STYLE)
========================= */

.buttons{
  display:flex;
  gap:18px;
  justify-content:flex-start;
  flex-wrap:wrap;
  margin-top:30px;
}

.hero-btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:16px 28px;
  border-radius:60px;
  font-size:1rem;
  font-weight:600;
  text-decoration:none;
  transition:all .35s ease;
  border:2px solid transparent;
  position:relative;
  overflow:hidden;
}

/* GOLD BUTTON */
.primary-btn{
  background:#c79a3b;
  color:#ffff;
  
}

.primary-btn:hover{
  transform:translateY(-2px);
  background:#c99532;
}
/* OUTLINE BUTTON */
.secondary-btn{
  background:rgba(255,255,255,0.08);
  color:#fff;
  border:2px solid #c79a3b;
  backdrop-filter:blur(8px);

  position:relative;
  overflow:hidden;

  animation:
    pulseGlow 1.8s infinite,
    blinkBorder 1.4s infinite;
}

/* SHIMMER EFFECT */

.secondary-btn::before{
  content:"";
  position:absolute;
  top:0;
  left:-120%;

  width:80%;
  height:100%;

  background:
    linear-gradient(
      120deg,
      transparent,
      rgba(255,255,255,.45),
      transparent
    );

  transform:skewX(-20deg);

  animation:shineMove 3s infinite;
}

/* HOVER */

.secondary-btn:hover{
  background:rgba(255,255,255,0.12);
  border-color:#ffd46a;

  transform:translateY(-4px) scale(1.03);
}

/* =========================================
   ANIMATIONS
========================================= */

@keyframes pulseGlow{

  0%{
    box-shadow:
      0 0 0 rgba(199,154,59,0);
  }

  50%{
    box-shadow:
      0 0 22px rgba(199,154,59,.85),
      0 0 42px rgba(199,154,59,.45);
  }

  100%{
    box-shadow:
      0 0 0 rgba(199,154,59,0);
  }

}

/* BORDER BLINK */

@keyframes blinkBorder{

  0%,100%{
    border-color:#c79a3b;
  }

  50%{
    border-color:#fff3c4;
  }

}

/* SHINE EFFECT */

@keyframes shineMove{

  0%{
    left:-120%;
  }

  100%{
    left:140%;
  }

}

/* ICON */
.hero-btn i{
  font-size:15px;
}

/* Responsive */
@media (max-width: 768px) {
  .hero-content h1 {
    font-size: 2.3rem;
  }
  .hero-content p {
    font-size: 1.1rem;
  }
  .hero-content {
    width: 90%;
  }
  
  .buttons{
    justify-content:center;
  }

  .hero-btn{
    width:100%;
    justify-content:center;
  }
}

/* =========================================================
   MODERN ABOUT SECTION
========================================================= */
.modern-about{
  display:grid;
  grid-template-columns:0.8fr 1.6fr;
  gap:35px;
  padding:50px 5%;
  background:#f8f8f8;
  align-items:center;
}
.about-left p{
  color:#5f6978;
  line-height:1.8;
  max-width:500px;
  margin-bottom:25px;
}

/* ================= BUTTON ================= */

.about-btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color: #1e3549;
  padding:0 2px;
  border-radius:8px;
  text-decoration:none;
  font-weight:700;
  transition:.3s ease;
}

.about-btn:hover{
  color: #c79a3b;
  transform:translateY(-3px);
}

/* ================= RIGHT CARDS ================= */

.about-cards{
  display:grid;
  /* 3 CARDS IN ONE LINE */
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}

/* ================= CARD ================= */

.modern-card{
  background:#fff;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 8px 22px rgba(0,0,0,0.08);
  transition:.35s ease;
  position:relative;
}

.modern-card:hover{
  transform:translateY(-8px);
  box-shadow:0 18px 38px rgba(0,0,0,0.14);
}

/* SMALLER IMAGE */

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

/* ================= ICON ================= */

.card-icon{
  position:absolute;
  top:150px;
  left:20px;
  width:58px;
  height:58px;
  background:#1e3549;

  /* WHITE BORDER */
  border:5px solid #fff;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#c79a3b;
  font-size:21px;
  box-shadow:0 8px 18px rgba(0,0,0,0.15);
  transition:0.35s ease;
}

/* HOVER EFFECT */

.modern-card:hover .card-icon{

  /* WHITE PART BECOMES YELLOW */
  border-color:#d9a441;

  background:#082b57;

  color:#fff;
}

/* ================= CONTENT ================= */

.card-content{
  padding:42px 20px 22px;
}

.card-content h1{
  font-size:1.3rem;
  color:#1e3549;
  margin-bottom:10px;
}

.card-content p{
  color:#666;
  line-height:1.6;
  margin-bottom:16px;
  font-size:0.95rem;
}

.card-content a{
  color:#c79a3b;
  font-weight:600;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:8px;
  transition:0.3s ease;
}

.card-content a:hover{
  gap:12px;
}

/* =========================================================
   TABLET
========================================================= */

@media(max-width:1100px){

  .modern-about{
    grid-template-columns:1fr;
  }

  .about-cards{
    grid-template-columns:repeat(2,1fr);
  }
}

/* =========================================================
   MOBILE
========================================================= */

@media(max-width:700px){

  .about-cards{
    grid-template-columns:1fr;
  }

  .about-left h2{
    font-size:2rem;
  }

  .modern-card img{
    height:220px;
  }
}

.about-section {
  padding: 60px 5%;
  background: #fff;
}

.about-container {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  align-items: center;
}

/* Image */
.about-image {
  flex: 1 1 45%;
}
.about-image img {
  width: 100%;
  box-shadow: 0 12px 30px rgba(0,0,0,0.15);
  object-fit: cover;
}

/* Content */
.about-content {
  flex: 1 1 50%;
}
/* =========================================================
   GLOBAL SECTION TITLE SYSTEM
========================================================= */

.section-tag{
  color:var(--accent);
  font-size:.88rem;
  font-weight:600;
  letter-spacing:3px;
  text-transform:uppercase;
  margin-bottom:14px;
  line-height:1;
}

.section-title,
.section-heading{
  position:relative;
  display:inline-block;
  font-size:3rem;
  line-height:1.2;
  font-weight:600;
  color:var(--primary);
  padding-bottom:18px;
  margin-bottom:22px;
}

/* UNDERLINE */

.section-title::after,
.section-heading::after{
  content:"";
  position:absolute;
  bottom:0;
  width:72px;
  height:3px;
  background:var(--accent);
  border-radius:30px;
}

/* LEFT ALIGN */

.section-title.text-left::after,
.section-heading.text-left::after{
  left:0;
}

/* CENTER ALIGN */

.section-title.text-center::after,
.section-heading.text-center::after{
  left:50%;
  transform:translateX(-50%);
}

/* RIGHT ALIGN */

.section-title.text-right::after,
.section-heading.text-right::after{
  right:0;
}

/* REMOVE UNDERLINE */

.no-line::after{
  display:none !important;
}

/* DESCRIPTION */

.section-desc{
  color:var(--text);
  font-size:1rem;
  line-height:1.9;
  margin-top:6px;
}

/* MOBILE */

@media(max-width:768px){

  .section-tag{
    font-size:.78rem;
    letter-spacing:2px;
    margin-bottom:12px;
  }

  .section-title,
  .section-heading{
    font-size:2rem;
    line-height:1.3;
    padding-bottom:16px;
    margin-bottom:18px;
  }

  .section-title::after,
  .section-heading::after{
    width:58px;
  }

  .section-desc{
    font-size:.95rem;
    line-height:1.8;
  }
}
/* Paragraphs */
.about-content p {
  margin-bottom: 18px;
  color: #333;
  line-height: 1.6;
}

/* Buttons */
.about-buttons {
  margin-top: 20px;
  display: flex;
  gap: 16px;
}


.btn {
  padding: 12px 24px;
  font-weight: 600;
  border-radius: 6px;
  text-decoration: none;
  transition: 0.3s ease;
}

.btn.primary {
  background: var(--primary, #002366);
  color: #fff;
  border: 2px solid var(--primary, #002366);
}

.btn.primary:hover {
  background: #001744;
}

.btn.outline {
  background: transparent;
  border: 2px solid var(--primary, #002366);
  color: var(--primary, #002366);
}

.btn.outline:hover {
  background: var(--primary, #002366);
  color: #fff;
}
/* =========================================================
   PREMIUM EVENTS SECTION
========================================================= */

.events-section{
  position:relative;
  padding:50px 0;
  background-color: #e8e9ea;
  overflow:hidden;
}

/* GOLD BLUR */

.events-section::before{
  content:"";
  position:absolute;
  width:420px;
  height:420px;
  background:rgba(199,154,59,.08);
  border-radius:50%;
  top:-180px;
  right:-120px;
  filter:blur(40px);
}

/* =========================================================
   HEADER
========================================================= */

.events-header{
  text-align:center;
  margin-bottom:70px;
  position:relative;
  z-index:2;
}

.events-header .section-tag{
  color:#c79a3b;
  font-size:.95rem;
  font-weight:700;
  letter-spacing:4px;
  text-transform:uppercase;
  margin-bottom:18px;
}

.events-header h2{
  font-size:3.5rem;
  color:#1e3549;
  line-height:1.15;
  font-weight:700;
  margin-bottom:18px;
}

.events-header p{
  font-size:1.05rem;
  color:#617086;
}

/* =========================================================
   SLIDER AREA
========================================================= */

.events-carousel{
  position:relative;
  width:100%;
  padding:0 8px;
}

/* =========================================================
   SLIDER
========================================================= */

.events-slider{
  overflow:hidden;
  width:100%;
}

.events-track{
  display:flex;
  gap:20px;
  transition:transform .7s cubic-bezier(.22,.61,.36,1);
  will-change:transform;
}

/* =========================================================
   CARD
========================================================= */

.event-card{
  min-width:calc((100% - 60px) / 3);
  background:#fff;

  border-radius:30px;
  overflow:hidden;

  box-shadow:
    0 12px 35px rgba(15,23,42,.06);

  border:1px solid rgba(30,53,73,.05);

  transition:.45s ease;

  position:relative;
}

/* HOVER */

.event-card:hover{
  transform:
  translateY(-12px);

  box-shadow:
    0 22px 50px rgba(15,23,42,.12);
}

/* =========================================================
   IMAGE
========================================================= */

.event-image{
  position:relative;
  height:310px;
  overflow:hidden;
}

.event-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform 1s ease;
}

.event-card:hover .event-image img{
  transform:scale(1.08);
}

/* IMAGE OVERLAY */

.event-image::after{
  content:"";
  position:absolute;
  inset:0;

  background:
  linear-gradient(
    to top,
    rgba(0,0,0,.25),
    transparent
  );
}

/* =========================================================
   CONTENT
========================================================= */

.event-content{
  padding:20px;
  position:relative;
}

/* ICON */

.event-icon{
  width:68px;
  height:68px;

  border-radius:22px;

  background:
  linear-gradient(
    135deg,
    #1e3549,
    #294964
  );

  display:flex;
  align-items:center;
  justify-content:center;

  color:#fff;
  font-size:1.2rem;

  margin-top:-65px;
  position:relative;
  z-index:5;

  box-shadow:
    0 12px 24px rgba(30,53,73,.25);

  margin-bottom:24px;
}

/* TITLE */

.event-content h3{
  font-size:1.5rem;
  color:#1e3549;
  margin-bottom:14px;
  font-weight:700;
}

/* TEXT */

.event-content p{
  color:#617086;
  line-height:1.9;
  font-size:.98rem;
}

/* =========================================================
   ARROWS
========================================================= */

.events-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:70px;
  height:70px;
  border:none;
  border-radius:50%;
  color:#1e3549;
  font-size:1.1rem;
  cursor:pointer;
  z-index:20;
  transition:.35s ease;
}

/* LEFT */

.events-arrow.prev{
  left:-50px;
}

/* RIGHT */

.events-arrow.next{
  right:-50px;
}

/* HOVER */

.events-arrow:hover{
  color:#c79a3b;
  transform:
  translateY(-50%)
  scale(1.08);
}

/* =========================================================
   TABLET
========================================================= */

@media(max-width:1100px){

  .event-card{
    min-width:calc((100% - 30px) / 2);
  }

  .events-header h2{
    font-size:2.8rem;
  }

}

/* =========================================================
   MOBILE
========================================================= */

@media(max-width:768px){

  .events-section{
    padding:50px 0;
  }

  .events-carousel{
    padding:0 20px;
  }

  .events-header{
    margin-bottom:50px;
  }

  .events-header h2{
    font-size:2.2rem;
  }

  .event-card{
    min-width:100%;
  }

  .event-image{
    height:220px;
  }

  .event-content{
    padding:24px;
  }

  .events-arrow{
    width:52px;
    height:52px;
    font-size:.9rem;
  }

  .events-arrow.prev{
    left:-5px;
  }

  .events-arrow.next{
    right:-5px;
  }

}
/* Main Layout */
.highlights-wrapper {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 40px;
  align-items: start;
}
/* Section Heading */
.highlights-wrapper + h2,
.section h2 {
  text-align: center;
  font-weight: 700;
  margin: 8px 0 20px;
  position: relative;
  letter-spacing: 1px;
}

/* HIGHLIGHTS SECTION */
.highlights-wrapper{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:28px;
  padding:10px 0 30px;
}

/* CARD */
 
.info-card{
  background:#fff;
  border-radius:24px;
  padding:25px 30px;
  box-shadow:0 8px 24px rgba(0,0,0,0.05);
  border-top:4px solid #c9a961;
  transition:all .3s ease;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}

.info-card:hover{
  transform:translateY(-6px);
  box-shadow:0 16px 34px rgba(0,0,0,0.08);
}

/* ICON */

.info-card .icon{
  width:64px;
  height:64px;
  border-radius:18px;
  background:#eef3f8;
  color:#0f3a63;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:20px;
  transition:.3s ease;
}

.info-card:hover .icon{
  background:#1e3549;
  color:#fff;
}

.info-card .icon svg{
  width:30px;
  height:30px;
}

/* TITLE */

.info-card h3{
  font-size:1.15rem;
  margin-bottom:14px;
  font-weight:700;
  
}

/* TEXT */

.info-card p{
  font-size:0.96rem;
  color:#5c6770;
  margin-bottom:22px;
}

/* BUTTON */

.link-arrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:#1e3549;
  text-decoration:none;
  padding:2px 3px;
  border-radius:40px;
  font-size:0.92rem;
  font-weight:600;
  transition:all .3s ease;
}

.link-arrow::after{
  content:"→";
  transition:.3s ease;
}

.link-arrow:hover{
  color: #c9a961;
  transform:translateY(-2px);
}

.link-arrow:hover::after{
  transform:translateX(3px);
}

/* MOBILE */

@media(max-width:768px){

  .info-card{
    padding:26px 22px;
  }

  .link-arrow{
    width:100%;
    justify-content:center;
  }
}

/* Responsive */
@media (max-width: 900px) {
  .highlights-wrapper {
    grid-template-columns: 1fr;
  }
}
/* Section Base */
.vm-section {
  background: #fff;
  padding: 20px 20px;
}

#vision-mission .section-title::before {
  display: none;
}


/* Title */
.section-v h2 {
  font-size: 2rem;
  font-weight: 700;
  color: #1e3549;
  text-align: center;
}
/* Grid */
.vm-container {
  max-width: 1150px;
  margin: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}

/* Box Design */
.vm-box {
  background: #ffffff;
  border-radius: 20px;
  padding: 30px;
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.08);
  border-left: 6px solid #c79a3b;
  transition: 0.3s ease-in-out;
  color: #051626;
}
.vm-box:hover {
  transform: translateY(-8px);
}

/* Headings */
.vm-box h3 {
  font-size: 1.45rem;
  font-weight: 700;
  margin-bottom: 15px;
  color: #0f3a63;
}

/* Vision text */
.vm-box p {
  font-size: 1.05rem;
  line-height: 1.6rem;
  font-weight: 500;
}

/* Mission list */
.vm-box ul {
  padding-left: 22px;
}
.vm-box ul li {
  margin-bottom: 10px;
  font-size: 1.05rem;
  line-height: 1.6rem;
  font-weight: 500;
}

/* Mobile Responsive */
@media (max-width: 900px) {
  .vm-container {
    grid-template-columns: 1fr;
  }
  .vm-box {
    border-left: 5px solid #c79a3b;
  }
}


/* ======================================================
   WHY CHOOSE US
====================================================== */

.why-choose-section{
  background:#f5f5f7;
  padding:90px 6%;
  position:relative;
}

/* ================= HEADER ================= */

.why-header{
  text-align:center;
  max-width:850px;
  margin:auto auto 30px;
}

.why-header p{
  color:#5e6472;
  font-size:17px;
  line-height:1.8;
}

/* ================= GRID ================= */

.why-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
  align-items:stretch;
}

/* ================= CARD ================= */

.why-card{
  background:linear-gradient(to bottom,#ffffff,#faf9f4);
  border-radius:22px;
  padding:20px 18px;
  text-align:center;
  border:1px solid rgba(199,154,59,0.12);
  box-shadow:
    0 6px 18px rgba(0,0,0,0.05),
    0 2px 6px rgba(199,154,59,0.06);
  transition:0.35s ease;
  display:flex;
  flex-direction:column;
  align-items:center;
  min-height:200px;
  position:relative;
  overflow:hidden;
}

/* subtle top glow */
.why-card::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:5px;
  
}

.why-card:hover{
  transform:translateY(-6px);
  box-shadow:
    0 14px 28px rgba(0,0,0,0.08);
}

/* ================= ICON ================= */


.why-icon{
  width:58px;
  height:58px;
  border-radius:18px;

  background:linear-gradient(135deg,#1e3549,#274764);
  display:flex;
  align-items:center;
  justify-content:center;

  margin-bottom:16px;

  transition:0.35s ease;
}

.why-icon i{
  color:#c79a3b;
  font-size:24px;
}


/* HOVER */

.why-card:hover .why-icon i{
  color:#fff;
}

/* ================= TEXT ================= */
.why-card h3{
  font-size:18px;
  color:#12304d;
  margin-bottom:10px;
  font-weight:700;
  line-height:1.35;
}
.why-card p{
  color:#5f6572;
  line-height:1.6;
  font-size:14px;
  margin:0;
}

/* ======================================================
   TABLET
====================================================== */

@media(max-width:1100px){

  .why-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .why-header h2{
    font-size:3rem;
  }
}

/* ======================================================
   MOBILE
====================================================== */

@media(max-width:700px){

  .why-choose-section{
    padding:75px 5%;
  }

  .why-grid{
    grid-template-columns:1fr;
    gap:22px;
  }

  .why-header{
    margin-bottom:45px;
  }

  .why-header h2{
    font-size:2.2rem;
  }

  .why-header p{
    font-size:1rem;
    line-height:1.7;
  }

  .why-card{
    padding:32px 24px;
    min-height:auto;
  }

  .why-icon{
    width:68px;
    height:68px;
  }

  .why-icon i{
    font-size:27px;
  }

  .why-card h3{
    min-height:auto;
    font-size:20px;
  }
}

/* ------------------------------
   Overview Section
------------------------------ */
.section-contrast .container.narrow{text-align:center;}
.section-contrast h2{font-size: clamp(24px, 3.5vw, 36px); margin:0 0 12px}
.section-contrast p{color:#334155; margin: 0 0 14px}

/* Achievements Section */
.achievements {
 background: linear-gradient(
  to right,
  #102233,
  #1e3549,
  #274760
);
  color: #fff;
  text-align: center;
  padding: 40px 10px;
}

.counter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 30px;
}

.counter-box {
  background: rgba(255, 255, 255, 0.05);
  padding: 15px 20px;
  border-radius: 16px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.counter-box:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 28px rgba(0,0,0,0.3);
}

.counter-box .counter {
  font-size: 2.2rem;
  font-weight: bold;
  color: #c79a3b;
  display: inline-block;
}

.counter-box p {
  margin-top: 8px;
  font-size: 1rem;
  color: #f5f5ed;
}
.testimonials {
  text-align: center;
  padding: 2rem 1rem 3rem;
  font-family: "Poppins", sans-serif;
  background: linear-gradient(180deg, #f7f9fc 0%, #ffffff 100%);
}

.testimonials h2 {
  font-size: 2rem;
  margin-bottom: 2rem;
  color: #1e3549; 
}

.testimonial-container {
  position: relative;
  max-width: 820px;
  margin: 2.5rem auto 0;
}

/* Card that actually holds the active testimonial. Height now follows the
   content naturally (no more fixed min-height / absolute stacking), so long
   parent messages no longer overlap the section below. */
.testimonial {
  display: none;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s ease, transform .6s ease;
  background: #fff;
  border: 1px solid #edf0f5;
  border-radius: 22px;
  box-shadow: 0 18px 45px rgba(30, 53, 73, 0.08);
  padding: 46px 48px 34px;
  text-align: left;
}

.testimonial.active {
  display: flex;
  gap: 22px;
  align-items: flex-start;
  opacity: 1;
  transform: translateY(0);
}

/* Decorative quote mark sits to the side of the message instead of
   floating awkwardly above/behind it. */
.testimonial-quote-icon {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(199, 154, 59, 0.12);
  color: #c79a3b;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
}

.testimonial-body {
  flex: 1 1 auto;
  min-width: 0;
}

.testimonial p {
  font-size: 1.05rem;
  line-height: 1.85;
  font-style: italic;
  color: #444;
  margin: 0;
}

.testimonial h4 {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid #eef0f4;
  font-weight: 600;
  font-style: normal;
  color: #c79a3b;
}

/* Dot indicators under the card */
.testimonial-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 22px;
}

.testimonial-dots button {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: #d9dee6;
  cursor: pointer;
  transition: background .3s ease, transform .3s ease;
}

.testimonial-dots button.active {
  background: #c79a3b;
  transform: scale(1.25);
}

/* =========================================================
   MODERN PROFESSIONAL FOOTER
========================================================= */

.site-footer{
  background: linear-gradient(to right,#eef2f7,#f8fafc);
  color:#1e3549;
  padding:0px 0 10px;
  position:relative;
  overflow:hidden;
  border-top:1px solid rgba(0,0,0,0.06);
}

/* subtle top glow */
.site-footer::before{
  content:"";
  position:absolute;
  top:-120px;
  left:-120px;
  width:320px;
  height:320px;
  background:rgba(199,154,59,0.08);
  border-radius:50%;
  filter:blur(40px);
}

/* =========================
   GRID
========================= */
/* =========================
   GRID LAYOUT UPDATED
========================= */

.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1.2fr 1fr;
  gap:35px;
  align-items:flex-start;
}

/* Middle Links */
.footer-middle{
  display:flex;
  justify-content:center;
  gap:60px;
}
/* Contact Box */
.footer-contact-box{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}

.footer-contact-box h4{
  color:#c79a3b;
  font-size:1.15rem;
  margin-top:16px;
  position:relative;
}

.footer-contact-box h4::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-8px;
  width:45px;
  height:2px;
  background:#c79a3b;
  border-radius:10px;
}

/* Small Description */
.footer-description{
  max-width:340px;
  margin-top:6px;
  color:#475569;
  line-height:1.5;
  font-size:0.90rem;
}

/* =========================
   MOBILE
========================= */

@media(max-width:900px){

  .footer-grid{
    grid-template-columns:1fr;
    text-align:center;
    gap:28px;
  }

  .footer-middle{
    justify-content:center;
    gap:40px;
    flex-wrap:wrap;
  }

  .footer-contact-box{
    align-items:center;
  }

  .footer-contact-box h4::after{
    left:50%;
    transform:translateX(-50%);
  }

  .footer-description{
    margin:auto;
  }
}

/* =========================
   BRAND SECTION
========================= */

.footer-brand{
  display:flex;
  align-items:center;
  gap:18px;
  margin-bottom:12px;
}

@media(max-width:768px){
  .footer-brand{
    justify-content:center;
  }
}
.footer-logo img{
  width:90px;
  height:auto;
  margin-top: 25px;
  object-fit:contain;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,0.08));
}
/* =========================
   SCHOOL TEXT
========================= */
.footer-school-text{
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.footer-school-text h1{
  margin:0;
  font-family:'Montserrat',sans-serif;
  font-weight:700;
  color:#17324d;
  line-height:1.1;
}
.footer-school-text h1:first-child{
  font-size:1.9rem;
  letter-spacing:0.5px;
}
.footer-school-text h1:last-child{
  font-size:1.15rem;
  letter-spacing:2px;
  margin-top:2px;
}
/* =========================
   KHOPOLI LINE
========================= */
.location-line{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:8px;
}

.location-line span{
  width:38px;
  height:1.5px;
  background:#c79a3b;
  display:block;
}

.location-line div{
  color:#c79a3b;
  font-size:0.78rem;
  font-weight:700;
  letter-spacing:3px;
}
/* =========================
   CONTACT INFO
========================= */
.footer-contact{
  margin-top:16px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.contact-item{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top: 16px;
  color:#334155;
  line-height:1.2;
  font-size:0.90rem;
  transition:0.3s ease;
}
@media(max-width:768px){
  .contact-item{
    justify-content:center;
  }
}
.contact-item i{
  width:35px;
  height:35px;
  border-radius:14px;
  color:#c79a3b;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1rem;
  box-shadow:0 4px 12px rgba(0,0,0,0.06);
  transition:0.35s ease;
}

.contact-item:hover i{
  transform:translateY(-4px) scale(1.05);
}

.contact-item:hover{
  transform:translateX(4px);
}

/* =========================
   SOCIAL ICONS
========================= */

.footer-social{
  display:flex;
  gap:14px;
  margin-top:18px;
}

@media(max-width:768px){
  .footer-social{
    justify-content:center;
  }
}

.footer-social a{
  width:42px;
  height:42px;
  border-radius:50%;
  background:#ffffff;
  color:#17324d;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1rem;
  text-decoration:none;
  box-shadow:0 4px 12px rgba(0,0,0,0.06);
  transition:0.35s ease;
}

.footer-social a:hover{
  background:#c79a3b;
  color:#fff;
  transform:translateY(-5px) scale(1.08);
}

/* =========================
   FOOTER LINKS
========================= */

.footer-links h4{
  color:#c79a3b;
  font-size:1.15rem;
  margin-top:16px;
  position:relative;
  display:inline-block;
  font-weight:700;
}

.footer-links h4::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-8px;
  width:45px;
  height:2px;
  background:#c79a3b;
  border-radius:10px;
}

@media(max-width:768px){
  .footer-links h4::after{
    left:50%;
    transform:translateX(-50%);
  }
}

.footer-links ul{
  list-style:none;
  padding:0;
  margin:0;
  margin-top: 20px;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.footer-links a{
  color:#334155;
  text-decoration:none;
  font-size:0.97rem;
  transition:0.3s ease;
  position:relative;
}

.footer-links a:hover{
  color:#c79a3b;
  padding-left:6px;
}

/* =========================
   BOTTOM AREA
========================= */
/* =========================================================
   FOOTER WAVE BOTTOM
========================================================= */

.footer-wave-wrapper{
  margin-top:25px;
  position:relative;
}

/* SVG Wave */
.footer-wave{
  display:block;
  width:100%;
  height:60px;
  margin-bottom:-2px;
}

.footer-wave path{
  fill:#17324d;
}

/* Bottom Section */

.footer-bottom{
  background:#17324d;
  color:#dbe5ef;
  text-align:center;
  padding:8px 20px 16px;
  position:relative;
}

.footer-bottom p{
  margin:5px 0;
  font-size:0.85rem;
  letter-spacing:0.3px;
}

.footer-bottom a{
  color:#dbe5ef;
  text-decoration:none;
  transition:0.3s ease;
  position:relative;
}

.footer-bottom a:hover{
  color:#c79a3b;
}

.footer-bottom span{
  margin:0 10px;
  color:#c79a3b;
}

/* subtle glow */
.footer-bottom::before{
  content:"";
  position:absolute;
  top: 70px;;
  left:50%;
  transform:translateX(-50%);
  width:220px;
  height:4px;
  background:linear-gradient(to right,
    transparent,
    rgba(199,154,59,0.9),
    transparent);
}

/* Mobile */
@media(max-width:768px){

  .footer-wave{
    height:45px;
  }

  .footer-bottom{
    padding:8px 14px 14px;
  }

  .footer-bottom p{
    font-size:0.84rem;
    line-height:1.7;
  }

}
/* =========================
   MOBILE
========================= */

@media(max-width:768px){

  .footer-school-text h1:first-child{
    font-size:1.55rem;
  }

  .footer-school-text h1:last-child{
    font-size:1rem;
  }

  .footer-logo img{
    width:85px;
  }

  .footer-links{
    text-align:center;
  }

}
/* =========================================================
   MODERN FLOATING NOTICE WIDGET
========================================================= */

.floating-notice-btn{
  position:fixed;
  right:24px;
  bottom:28px;
  z-index:9998;
  border:none;
  outline:none;
  cursor:pointer;
  height:60px;
  padding:0 22px 0 10px;
  border-radius:22px;
  background:
    linear-gradient(
      145deg,
      rgba(17,34,48,0.92),
      rgba(30,53,73,0.96)
    );
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  display:flex;
  align-items:center;
  gap:14px;
  color:#ffffff;
  overflow:hidden;
  box-shadow:
    0 15px 40px rgba(0,0,0,0.22);
  transition:
    transform .35s ease,
    right .35s ease,
    box-shadow .35s ease;
}

/* MOVE WHEN SCROLL TOP SHOWS */

.floating-notice-btn.move-left{
  right:105px;
}

/* GOLD SHINE */

.floating-notice-btn::before{
  content:"";
  position:absolute;
  width:160px;
  height:160px;
  top:-70px;
  right:-70px;
}

/* ICON */

.floating-notice-btn i{
  width:42px;
  height:42px;
  min-width:42px;
  border-radius:50%;
  background: #c79a3b;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1rem;
  color:#fff;
  position:relative;
  z-index:2;
  animation:
    bellShake 3s infinite,
    pulseGlow 2s infinite;
}

/* LIVE DOT */

.floating-notice-btn i::after{
  content:"";
  position:absolute;
  top:-1px;
  right:-1px;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#4ade80;
  border:2px solid #fff;
}

/* TEXT */

.floating-notice-btn span{
  position:relative;
  z-index:2;
  font-size:1rem;
  font-weight:600;
  letter-spacing:.4px;
}

/* HOVER */

.floating-notice-btn:hover{
  transform:
    translateY(-7px)
    scale(1.03);

  box-shadow:
    0 24px 48px rgba(0,0,0,0.3);
}

/* ICON PULSE */

@keyframes pulseGlow{

  0%{
    box-shadow:
      0 0 0 0 rgba(199,154,59,0.4);
  }

  70%{
    box-shadow:
      0 0 0 16px rgba(199,154,59,0);
  }

  100%{
    box-shadow:
      0 0 0 0 rgba(199,154,59,0);
  }

}

/* BELL */

@keyframes bellShake{

  0%{transform:rotate(0);}
  2%{transform:rotate(18deg);}
  4%{transform:rotate(-18deg);}
  6%{transform:rotate(10deg);}
  8%{transform:rotate(-10deg);}
  10%{transform:rotate(0);}
  100%{transform:rotate(0);}

}

/* =========================================================
   MODERN NOTICE POPUP
========================================================= */

.modern-notice-popup{

  position:fixed;
  inset:0;

  background:
    rgba(0,0,0,0.58);

  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);

  display:flex;
  align-items:center;
  justify-content:center;

  padding:20px;

  z-index:10000;

  opacity:0;
  visibility:hidden;

  transition:.35s ease;
}

/* ACTIVE */

.modern-notice-popup.active{

  opacity:1;
  visibility:visible;
}

/* POPUP BOX */

.modern-notice-box{

  width:100%;
  max-width:620px;

  background:#fff;

  border-radius:30px;

  overflow:hidden;

  position:relative;

  box-shadow:
    0 30px 80px rgba(0,0,0,0.3);

  transform:
    translateY(30px)
    scale(.94);

  transition:.4s ease;
}

/* SHOW */

.modern-notice-popup.active .modern-notice-box{

  transform:
    translateY(0)
    scale(1);
}

/* TOP LINE */

.modern-notice-box::before{

  content:"";

  position:absolute;

  top:0;
  left:0;

  width:100%;
  height:5px;

  background:
    linear-gradient(
      90deg,
      #c79a3b,
      #e1b24a
    );
}
/* CLOSE */
.notice-close{
  position:absolute;
  top:18px;
  right:18px;
  width:42px;
  height:42px;
  border:none;
  border-radius:50%;
  background:#f3f6fb;
  color:#1e3549;
  cursor:pointer;
  transition:.3s ease;
}
.notice-close:hover{
  background:#1e3549;
  color:#fff;
  transform:rotate(90deg);
}
/* HEADER */
.notice-header{
  padding:34px 34px 22px;
  display:flex;
  align-items:center;
  gap:18px;
  border-bottom:1px solid #edf2f7;
}

/* ICON */
.notice-icon{
  width:68px;
  height:68px;
  border-radius:20px;
  background:
    linear-gradient(
      135deg,
      #1e3549,
      #274760
    );
  display:flex;
  align-items:center;
  justify-content:center;
  color:#c79a3b;
  font-size:1.6rem;
}

/* TEXT */
.notice-header h2{
  color:#1e3549;
  margin:0;
  font-size:1.7rem;
}

.notice-header p{
  margin-top:5px;
  color:#64748b;
}
/* BODY */
.notice-body{
  padding:28px;
  display:flex;
  flex-direction:column;
  gap:18px;
  max-height:70vh;
  overflow-y:auto;
}

/* CARD */
.notice-card{
  background:#f8fafc;
  border-radius:20px;
  padding:24px;
  border:1px solid #eef2f7;
  transition:.3s ease;
}

.notice-card:hover{
  transform:translateY(-4px);
  box-shadow:
    0 12px 28px rgba(0,0,0,0.08);
}
/* BADGE */
.notice-badge{
  display:inline-block;
  margin-bottom:14px;
  background:#c79a3b;
  color:#fff;
  padding:6px 12px;
  border-radius:30px;
  font-size:.7rem;
  font-weight:700;
  letter-spacing:1px;
}
/* TEXT */
.notice-card h3{
  color:#1e3549;
  margin-bottom:10px;
}

.notice-card p{
  color:#5f6978;
  line-height:1.7;
}
/* BUTTON */
.notice-btn{
  margin-top:18px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:#c79a3b;
  text-decoration:none;
  font-weight:700;
  transition:.3s ease;
}

.notice-btn:hover{
  gap:15px;
}

/* MOBILE */
@media(max-width:768px){

  .floating-notice-btn{
    right:16px;
    bottom:20px;
    width:62px;
    height:62px;
    padding:0;
    border-radius:20px;
    justify-content:center;
  }

  /* HIDE TEXT */
  .floating-notice-btn span{
    display:none;
  }

  /* CENTER ICON */
  .floating-notice-btn i{
    margin:0;
  }

  .floating-notice-btn.move-left{
    right:88px;
  }

}
/* MOBILE NOTICE ICON ONLY */

@media(max-width:768px){

  .floating-notice-btn{
    background:transparent !important;
    box-shadow:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }

  .floating-notice-btn::before{
    display:none !important;
  }

}

.school-highlights {
  position: relative;
  width: 100%;
  min-height: 350px;
  background: url("images/ab1.jpg") center/cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Navy overlay on section */
.school-highlights .overlay {
  position: absolute;
  inset: 0;
   background: rgba(30, 53, 73, 0.80);
  z-index: 1;
}

/* Card container */
.highlight-container {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px;
}

/* Highlight Card */
/* Highlight Card Base */
.highlight-card {
  position: relative;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  display: flex;
  align-items: flex-end;
}

/* Large card */
.highlight-card.large {
  width: 420px;
  height: 300px;
}

/* Small card */
.highlight-card.small {
  width: 300px;
  height: 220px;
}
.section-text {
  position: relative;
  z-index: 2;
  margin-right: 50px;
}

.section-text h2 {
  font-size: 2rem;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 2px;
  text-shadow: 0 3px 10px rgba(0,0,0,0.6);
}
/* =========================================================
   PREMIUM SCROLL TOP BUTTON
========================================================= */

.scroll-top{
  position:fixed;
  right:24px;
  bottom:28px;
  width:57px;
  height:57px;
  border-radius:22px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  z-index:9997;
  opacity:0;
  visibility:hidden;

  transform:
    translateY(20px)
    scale(.9);

  transition:
    opacity .35s ease,
    visibility .35s ease,
    transform .35s ease,
    box-shadow .35s ease;

  overflow:hidden;

}

/* SHOW */

.scroll-top.show{

  opacity:1;
  visibility:visible;

  transform:
    translateY(0)
    scale(1);
}

/* ICON */

.scroll-top i{

  width:60px;
  height:60px;
  border-radius:22px;
  background:
    linear-gradient(
      135deg,
      #c79a3b,
      #e0b04a
    );
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;

  font-size:1.3rem;

  transition:.35s ease;
}

/* HOVER */
.scroll-top:hover i{

  transform:
    translateY(-2px);
}
.scroll-top:hover{

  transform:
    translateY(-3px);
}

/* mobile scroll-top — replaced by definitive block at end of file */

/* Focus rings */
a:focus, button:focus, input:focus{outline:2px solid var(--ring); outline-offset:2px}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important;}
}

/* Interactive glow tracking for cards (optional, JS-free) */
.info-card{ --mx:50%; }

.menu-toggle {
  display: none;
}
.mobile-menu {
  display: none;
}

/* ===================== */
/* 📱 MOBILE VIEW STYLES */
/* ===================== */
@media (max-width: 768px) {
  /* General */
  body {
    font-size: 15px;
    line-height: 1.5;
    margin: 0;
    padding: 0;
  }
  /* Headings: allow each section to control its own font-size — do not override globally */
  .container {
    padding: 0 15px;
  }

  /* Header */
  .header-top {
    flex-direction: column;
    text-align: center;
    margin: 0;
    padding: 10px 28px;
    
  }
  
  .logo {
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin: 0;
    padding: 0;
  }
  .logo img {
    margin-bottom: 10px;
    height: 60px;
  }
  .logo h1 {
    font-size: 0.9rem; /* slightly smaller */
    line-height: 1.3;
  }
  .search-bar {
    margin-top: 12px;  /* added more space from logo */
    margin-bottom: 10px; /* gives breathing space before hero */
    width: 80%;
  }
  .search-bar input {
    width: 75%;
  }

  /* Navigation */
  .nav-container {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin: 0;
    padding: 0;
  }

  .nav-links,
  .alumni-btn {
    display: none; 
  }

  .menu-toggle {
    display: block; /* show hamburger */
    font-size: 2rem;
    color: #fff;
    cursor: pointer;
    margin: 0;
    padding: 0.5rem;
  }

  /* Mobile Menu */
  .mobile-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 70%;
    height: 100%;
    background: linear-gradient(160deg, #0f2030 0%, #1e3549 100%);
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.4);

    display: flex;
    flex-direction: column;
    padding: 2rem;
    gap: 1.5rem;
    transition: right 0.4s cubic-bezier(0.77, 0, 0.175, 1);
    z-index: 2000;
  }

  /* When active */
  .mobile-menu.active {
    right: 0;
  }

  /* Logo inside menu */
  .mobile-menu img {
    max-width: 85px; /* smaller logo inside mobile menu */
    margin: 0 auto 1.2rem;
    filter: drop-shadow(0px 2px 4px rgba(0,0,0,0.3));
    align-items: center;
  }

  /* Nav links */
  .mobile-menu a {
    text-decoration: none;
    color: #fff;
    font-size: 1.2rem;
    letter-spacing: 0.5px;
    font-weight: 500;
    padding: 0.5rem 0;
    transition: all 0.3s ease;
    border-radius: 6px;
  }

  /* Hover effect - modern glow */
  .mobile-menu a:hover {
    color: var(--accent);
    background: rgba(255,255,255,0.08);
    padding-left: 10px;
  }

  /* Alumni button */
  .mobile-menu .btn-alumni {
    background: linear-gradient(135deg, var(--accent), #e1a800);
    color: #fff;
    padding: 0.8rem 1rem;
    border-radius: 10px;
    text-align: center;
    margin-top: 1.5rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    display: block;
    transition: all 0.35s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  }

  /* Alumni hover */
  .mobile-menu .btn-alumni:hover {
    background: linear-gradient(135deg, #fff, var(--accent));
    color: var(--blue-900);
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 6px 20px rgba(0,0,0,0.3);
  }

  /* Close button */
  .close-mobile-menu {
    background: none;
    border: none;
    color: #fff;
    font-size: 2rem;
    align-self: flex-end;
    cursor: pointer;
    transition: transform 0.2s ease;
  }

  .close-mobile-menu:hover {
    transform: rotate(90deg);
    color: var(--accent);
  }

  /* Hero */
  .hero {
    position: relative;
    flex-direction: column;
    padding: 0;
    margin: 0; /* remove gap before hero */
  }

  .hero-image {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
  }

  .hero-image img {
    width: 100%;
    height: 100%;
    display: block; /* removes inline gap */
  }

  .hero-text {
    position: absolute;
    top: 50%; /* vertically center */
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    text-align: center;
    background: none !important;
    backdrop-filter: none !important;
  }

  .hero-text h1 {
    font-size: 1.5rem;
    margin-bottom: 10px;
  }

  .hero-text p {
    font-size: 1rem;
    margin-bottom: 15px;
  }

  .hero-text .btn {
    display: inline-block;
    margin: 5px;
    padding: 8px 16px;
    font-size: 0.9rem;
  }

  /* Overview */
  #overview .container {
    flex-direction: column;
  }
  .overview-text {
    padding: 15px;
    text-align: center;
  }
  .campus-video {
    margin-top: 15px;
  }
  video {
    width: 100%;
    border-radius: 10px;
  }

  /* Info Cards */
  .info-cards {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  /* Curriculum */
  .grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .card {
    text-align: center;
  }

  /* Achievements */
  .counter-grid {
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    text-align: center;
  }
  .counter-box {
    padding: 10px;
  }

  /* Testimonials */
  .testimonials {
    padding: 20px;
    text-align: center;
  }
  .testimonial.active {
    flex-direction: column;
    gap: 12px;
  }

/* Footer - Mobile View */
.footer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr; /* two equal parts */
  gap: 20px;
  text-align: left;
}

/* Footer brand/info full width */
.footer-info {
  grid-column: span 2;
  text-align: center;
}
.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.footer-social {
  margin-top: 10px;
}

/* Left side - Our Links */
.footer-left {
  text-align: left;
}

/* Right side - Add Ons */
.footer-right {
  text-align: right;
}

/* Bottom copyright */
.footer-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  text-align: center;
  margin-top: 20px;
}

}

/* Smooth scroll animation effect */
[data-aos]{
  transition-property:
  transform,
  opacity !important;
}

/* Slight floating hover effect */

.why-card,
.modern-card,
.event-card,
.info-card,
.counter-box{
  will-change: transform;
}

/* =============================================================
   DEFINITIVE MOBILE SCROLL-TOP & NOTICE BUTTON
   Placed last so they override everything above.
============================================================= */

/* ── Desktop: base hidden state ── */
.scroll-top {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(20px) scale(0.9);
  transition: opacity .35s ease, visibility .35s ease, transform .35s ease, box-shadow .35s ease;
}
.scroll-top.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}
.scroll-top i {
  width: 60px;
  height: 60px;
  border-radius: 22px;
  background: linear-gradient(135deg, #c79a3b, #e0b04a);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.3rem;
  transition: .35s ease;
}

/* ── Desktop: notice shifts left when scroll-top shows ── */
.floating-notice-btn.move-left { right: 105px; }

/* ── MOBILE: notice — icon only, same dark pill style ── */
@media (max-width: 768px) {
  .floating-notice-btn {
    position: fixed !important;
    right: 16px !important;
    bottom: 24px !important;
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    padding: 0 !important;
    gap: 0 !important;
    border-radius: 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 9998 !important;
    background: linear-gradient(145deg, rgba(17,34,48,0.95), rgba(30,53,73,0.98)) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.25) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    transition: right .35s ease, transform .35s ease !important;
  }
  .floating-notice-btn span { display: none !important; }
  .floating-notice-btn i {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    font-size: 1rem !important;
    margin: 0 !important;
    border-radius: 50% !important;
  }
  /* notice shifts left when scroll-top appears */
  .floating-notice-btn.move-left { right: 84px !important; }
}

/* ── MOBILE: scroll-top — gold, hidden until scrolled ── */
@media (max-width: 768px) {
  .scroll-top {
    position: fixed !important;
    right: 16px !important;
    bottom: 24px !important;
    width: 56px !important;
    height: 56px !important;
    border-radius: 18px !important;
    z-index: 9997 !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    /* HIDDEN — JS adds .show on scroll > 300px */
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(16px) scale(0.9) !important;
    transition: opacity .35s ease, visibility .35s ease, transform .35s ease !important;
  }
  .scroll-top.show {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) scale(1) !important;
  }
  .scroll-top i {
    width: 56px !important;
    height: 56px !important;
    border-radius: 18px !important;
    background: linear-gradient(135deg, #c79a3b, #e0b04a) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #fff !important;
    font-size: 1.25rem !important;
    transition: .35s ease !important;
  }
  .scroll-top:hover { transform: translateY(-3px) !important; }
  .scroll-top:hover i { transform: translateY(-2px) !important; }
}
/* ==========================================
   OUR INSTITUTIONS SECTION (MODERN DIAMOND MOSAIC)
========================================== */

/* =========================================================
   SECTION SHELL
========================================================= */
.institutions-section{
  position:relative;
  overflow:hidden;
  padding:100px 0 20px;
  background:#1e3549;
  isolation:isolate;
}
 
/* ── Layered background: deep navy → subtle teal shift ── */
.institutions-section::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    to right,
    rgba(30,53,73,0.92),
    rgba(30,53,73,0.98),
    rgba(30,53,73,0.55)
  );
  z-index:0;
}
 
/* ── Subtle dot-grid texture ── */
.institutions-section::after{
  content:"";
  position:absolute;
  inset:0;
  background-image:radial-gradient(circle, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:36px 36px;
  z-index:0;
  mask-image:radial-gradient(ellipse 80% 80% at 50% 50%, #000 30%, transparent 100%);
}
 
/* ── Gold accent lines (decorative) ── */
.inst-accent-line{
  position:absolute;
  z-index:1;
  pointer-events:none;
}
.inst-accent-line.left{
  top:0; left:0;
  width:3px; height:100%;
  background:linear-gradient(to bottom, transparent, rgba(199,154,59,.45) 40%, rgba(199,154,59,.45) 60%, transparent);
}
.inst-accent-line.right{
  top:0; right:0;
  width:3px; height:100%;
  background:linear-gradient(to bottom, transparent, rgba(199,154,59,.45) 40%, rgba(199,154,59,.45) 60%, transparent);
}
 
/* =========================================================
   INNER LAYOUT — 3 columns: diamonds | content | diamonds
========================================================= */
.institutions-inner{
  position:relative;
  z-index:5;
  display:grid;
  grid-template-columns:1fr 480px 1fr;
  gap:0 50px;
  align-items:center;
  max-width:1440px;
  margin:auto;
  padding:0 20px;
}
 
/* =========================================================
   CENTER CONTENT
========================================================= */
.institutions-content{
  text-align:center;
  padding:0 5px;
   margin-top: -60px;
}

 
/* HEADING */
.institutions-content h2{
  font-size:clamp(2rem,3vw,3rem);
  line-height:1.18;
  font-weight:600;
  color:#fff;
  margin-bottom:5px;
}
.institutions-content h2 .gold{
  color:#c79a3b;
}
 
/* GOLD RULE under heading */
.inst-rule{
  width:76px;
  height:2px;
  background:#c79a3b;
  border-radius:4px;
  margin:18px auto 22px;
}
 
/* BODY TEXT */
.institutions-content p{
  color:rgba(255,255,255,.7);
  font-size:1rem;
  line-height:1.85;
  margin-bottom:36px;
  max-width:400px;
  margin-left:auto;
  margin-right:auto;
}
 
 
/* BUTTON */
.institutions-btn{
  display:inline-flex;
  align-items:center;
  gap:14px;
  padding:15px 20px;
  border-radius:70px;
  text-decoration:none;
  color:#fff;
  font-weight:400;
  background:
  rgba(255,255,255,.08);
  backdrop-filter:blur(10px);
  border:
  1px solid rgba(255,255,255,.18);
  transition:.4s ease;
  box-shadow:
  0 10px 24px rgba(0,0,0,.18);
}
.institutions-btn i{
  transition:transform .3s ease;
  font-size:.88rem;
}
.institutions-btn:hover{
  border-color:#c79a3b;
  transform:translateY(-5px);
}
.institutions-btn:hover i{
  transform:translateX(5px);
}
 
/* =========================================================
   DIAMOND COLLAGE
========================================================= */
.diamond-collage{
  position:relative;
  width:100%;
  height:480px;
}
 
/* ── Single diamond ── */
.diamond{
  position:absolute;
  overflow:hidden;
  border-radius:20px;
  transform:rotate(45deg);
  transition:
    transform .5s cubic-bezier(.22,.61,.36,1),
    box-shadow .5s ease,
    border-color .5s ease;
  will-change:transform;
}
 
/* Gold border on hover */
.diamond::after{
  content:"";
  position:absolute;
  inset:0;
  border:2.5px solid transparent;
  border-radius:20px;
  transition:border-color .4s ease;
  z-index:3;
}
.diamond:hover::after{
  border-color:rgba(199,154,59,.7);
}
 
/* Gold shimmer overlay */
.diamond::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(160deg,rgba(199,154,59,.22),transparent 55%);
  opacity:0;
  transition:opacity .4s ease;
  z-index:2;
}
.diamond:hover{
  transform:rotate(45deg) scale(1.09);
  z-index:6;
}
.diamond:hover::before{opacity:1;}
 
/* Image inside diamond */
.diamond img{
  width:100%;
  height:100%;
  object-fit:cover;
  transform:rotate(-45deg) scale(1.48);
  transition:transform .7s ease;
  display:block;
}
.diamond:hover img{
  transform:rotate(-45deg) scale(1.62);
}
 
/* Shadow per size */
.diamond.size-lg{
  box-shadow:0 24px 60px rgba(0,0,0,.45),0 0 0 2px rgba(255,255,255,.06);
}
.diamond.size-md{
  box-shadow:0 16px 40px rgba(0,0,0,.38),0 0 0 2px rgba(255,255,255,.05);
}
.diamond.size-sm{
  box-shadow:0 10px 28px rgba(0,0,0,.32),0 0 0 1.5px rgba(255,255,255,.04);
}
 
/* =========================================================
   LEFT COLLAGE POSITIONS
========================================================= */
.diamond-collage.left .d1{
  width:200px; height:200px;
  top:20px;   left:60px;
}
.diamond-collage.left .d2{
  width:148px; height:148px;
  top:248px;  left:0px;
}
.diamond-collage.left .d3{
  width:240px; height:240px;
  top:186px;  left:155px;
}
.diamond-collage.left .d4{
  width:148px; height:148px;
  top:50px;   left:290px;
}
 
/* =========================================================
   RIGHT COLLAGE POSITIONS
========================================================= */
.diamond-collage.right .d5{
  width:200px; height:200px;
  top:20px;   left:60px;
}
.diamond-collage.right .d6{
  width:148px; height:148px;
  top:248px;  left:0;
}
.diamond-collage.right .d7{
  width:240px; height:240px;
  top:186px;  left:155px;
}
.diamond-collage.right .d8{
  width:148px; height:148px;
  top:50px;   left:290px;
}
 
/* =========================================================
   CONNECTING GOLD LINES between diamonds (decorative SVG)
========================================================= */
.diamond-lines{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:1;
  opacity:.3;
}
 
/* =========================================================
   RESPONSIVE — TABLET
========================================================= */
@media(max-width:1280px){
  .institutions-inner{
    grid-template-columns:1fr 420px 1fr;
    gap:0 30px;
  }
  .diamond-collage.left .d3,
  .diamond-collage.right .d7{width:210px;height:210px;}
}
 
@media(max-width:1100px){
  .institutions-inner{
    grid-template-columns:1fr 380px 1fr;
    gap:0 20px;
    padding:0 30px;
    margin-top: 30px;
  }
  .diamond-collage{height:420px;}
  .diamond-collage.left .d1,
  .diamond-collage.right .d5{width:200px;height:200px;left:40px;}
  .diamond-collage.left .d2,
  .diamond-collage.right .d6{width:155px;height:155px;}
  .diamond-collage.left .d3,
  .diamond-collage.right .d7{width:250px;height:250px;left:130px;}
  .diamond-collage.left .d4,
  .diamond-collage.right .d8{width:150px;height:150px;left:250px;}
}
 
/* =========================================================
   RESPONSIVE — MOBILE (stacked)
========================================================= */
@media(max-width:900px){
  .institutions-section{padding:80px 0 70px;}
 
  .institutions-inner{
    grid-template-columns:1fr;
    grid-template-rows:auto auto auto;
    gap:40px 0;
    padding:0 20px;
    text-align:center;
  }
 
  /* Order: content first, then one collage, hide second */
  .institutions-content{order:1;}
  .diamond-collage.left{order:2;}
  .diamond-collage.right{display:none;}
 
  /* Collage full-width on mobile */
  .diamond-collage{
    width:100%;
    max-width:360px;
    height:280px;
    margin:0 auto;
  }
 
  .diamond-collage.left .d1{
    width:180px;height:180px;
    top:-8px;left:60px;
  }
  .diamond-collage.left .d2{
    width:100px;height:100px;
    top:180px;left:10px;
  }
  .diamond-collage.left .d3{
    width:200px;height:200px;
    top:140px;left:180px;
  }
  .diamond-collage.left .d4{
    width:120px;height:120px;
    top:-5px;left:280px;
  }
 
  .inst-stats{flex-wrap:wrap;}
  .inst-stat{flex:1 1 45%;}
 
  .institutions-content h2{font-size:1.9rem;}
  .inst-eyebrow{justify-content:center;}
 
  .inst-accent-line{display:none;}
}
 
@media(max-width:480px){
  .institutions-section{padding:60px 0 55px;}
  .diamond-collage{height:240px;max-width:300px;}
  .diamond-collage.left .d1{width:100px;height:100px;left:36px;}
  .diamond-collage.left .d2{width:74px;height:74px;top:112px;left:0;}
  .diamond-collage.left .d3{width:132px;height:132px;top:88px;left:98px;}
  .diamond-collage.left .d4{width:76px;height:76px;top:24px;left:200px;}
  .institutions-content h2{font-size:1.65rem;}
  .inst-stat strong{font-size:1.3rem;}
}

/* TABLET ONLY - Show only first 2 About cards */
@media (min-width: 769px) and (max-width: 1100px){

  .about-cards{
    grid-template-columns: repeat(2,1fr);
    gap:22px;
  }

  .about-cards .modern-card:nth-child(3){
    display:none;
  }

}

/* =============================================================
   SHARED: LEADERSHIP MESSAGE BLOCK
   (Used by Principal's / President's / Vice President's message
   sections on leader.html and aboutus.html so this styling only
   has to live in one place instead of being duplicated per page.)
============================================================= */

.lead-container{
  width:min(1180px,92%);
  margin:auto;
}

.white-section{
  background:#ffffff;
}

.gray-section{
  background:#e8e9ea;
}

.message-section{
  padding:70px 0;
}

.message-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:55px;
  align-items:center;
}

.message-grid.reverse .message-image{
  order:2;
}

.message-grid.reverse .message-content{
  order:1;
}

/* IMAGE */

.message-image{
  position:relative;
  border-radius:32px;
  overflow:hidden;
  height:560px;
  box-shadow:
  0 22px 55px rgba(0,0,0,.10);
}

.message-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:.6s ease;
}

.message-image:hover img{
  transform:scale(1.05);
}

.message-overlay{
  position:absolute;
  inset:0;

  background:
  linear-gradient(
    to top,
    rgba(30,53,73,.92),
    rgba(30,53,73,.08)
  );
}

.message-person{
  position:absolute;
  left:28px;
  bottom:24px;
  z-index:3;
}

.message-person h4{
  color:#fff;
  font-size:2rem;
  line-height:1.2;
  margin-bottom:6px;
  font-weight:600;
}

.message-person span{
  color:var(--accent);
  font-size:1rem;
  font-weight:500;
}

/* CONTENT */
.message-content{
  max-width:560px;
}

.message-content .section-title{
  margin-bottom:24px;
}

.message-content p{
  color:var(--text);
  line-height:1.9;
  font-size:1rem;
  margin-bottom:20px;
}

.message-sign{
  margin-top:20px;
}

.message-sign h5{
  color:var(--primary);
  font-size:1.6rem;
  font-weight:600;
  margin-bottom:5px;
}

.message-sign span{
  color:var(--accent);
}

@media(max-width:991px){

  .message-grid{
    grid-template-columns:1fr;
    gap:40px;
  }

  .message-grid.reverse .message-image{
    order:1;
  }

  .message-grid.reverse .message-content{
    order:2;
  }

}

@media(max-width:768px){

  .message-section{
    padding:60px 0;
  }

  .message-image{
    height:420px;
    border-radius:24px;
  }

  .message-person h4{
    font-size:2rem;
    font-weight:600;
  }

  .message-content p{
    font-size:.96rem;
    line-height:1.8;
  }

}


.page-hero-title{
  color:#fff;
  font-size:4rem;
  line-height:1.1;
  font-weight:600;
  margin-bottom:14px;
}

.page-hero-subtitle{
  color:rgba(255,255,255,.88);
  font-size:1.1rem;
  line-height:1.8;
  font-weight:400;
  max-width:700px;
  margin:0 auto;
}

@media(max-width:768px){
  .page-hero-title{
    font-size:2.5rem;
  }
  .page-hero-subtitle{
    font-size:1rem;
  }
}