html{ scroll-behavior:smooth; }
body{ animation:mgcPageIn .5s ease both; }
@keyframes mgcPageIn{ from{ opacity:0; } to{ opacity:1; } }

/* Custom text selection + scrollbar, small but felt everywhere */
::selection{ background:var(--mgc-gold); color:var(--mgc-indigo-deep); }
html{ scrollbar-color:var(--mgc-gold-deep) var(--mgc-ivory); scrollbar-width:thin; }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:var(--mgc-ivory); }
::-webkit-scrollbar-thumb{ background:linear-gradient(var(--mgc-gold-deep),var(--mgc-indigo)); border-radius:6px; }
::-webkit-scrollbar-thumb:hover{ background:var(--mgc-maroon); }

/* ---------- 2. Reading progress bar under the utility bar ---------- */
#mgcReadProgress{
  position:fixed; top:0; left:0; height:3px; width:0%;
  background:linear-gradient(90deg,var(--mgc-gold-deep),var(--mgc-gold),var(--mgc-terracotta-light));
  z-index:9999; transition:width .12s linear; box-shadow:0 0 8px rgba(214,161,60,.6);
}

/* ---------- 3. Scroll-reveal utility (applied generically via JS) ---------- */
.mgc-reveal{
  opacity:0; transform:translateY(28px); filter:blur(2px);
  transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1), filter .7s ease;
  will-change:opacity, transform;
}
.mgc-reveal.mgc-reveal-left{ transform:translateX(-34px) translateY(0); }
.mgc-reveal.mgc-reveal-right{ transform:translateX(34px) translateY(0); }
.mgc-reveal.mgc-reveal-zoom{ transform:scale(.92); }
.mgc-reveal.is-in{
  opacity:1; transform:none; filter:blur(0);
}
/* staggered children inside a reveal group */
.mgc-reveal-stagger > *{ opacity:0; transform:translateY(20px); transition:opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1); }
.mgc-reveal-stagger.is-in > *{ opacity:1; transform:none; }
.mgc-reveal-stagger.is-in > *:nth-child(1){ transition-delay:.03s; }
.mgc-reveal-stagger.is-in > *:nth-child(2){ transition-delay:.09s; }
.mgc-reveal-stagger.is-in > *:nth-child(3){ transition-delay:.15s; }
.mgc-reveal-stagger.is-in > *:nth-child(4){ transition-delay:.21s; }
.mgc-reveal-stagger.is-in > *:nth-child(5){ transition-delay:.27s; }
.mgc-reveal-stagger.is-in > *:nth-child(6){ transition-delay:.33s; }
.mgc-reveal-stagger.is-in > *:nth-child(n+7){ transition-delay:.38s; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  body{ animation:none; }
  .mgc-reveal, .mgc-reveal-stagger > *{ opacity:1 !important; transform:none !important; filter:none !important; transition:none !important; }
}

/* ---------- 4. Sticky, shrinking navigation ---------- */
.mgc-nav{ position:sticky; top:0; transition:box-shadow .3s ease, padding .3s ease; }
.mgc-nav-close{ display:none; }

/* Fix: the toggle button had no horizontal padding/min-width, so its
   tappable area was only as wide as the icon glyph happened to render
   (sometimes ~0px) — making it unclickable on mobile. */
.mgc-nav-toggle{ padding:14px 12px; min-width:44px; min-height:44px; text-align:center; }
.mgc-nav.mgc-nav-stuck{
  box-shadow:0 10px 24px -12px rgba(13,22,46,.55);
}
.mgc-nav.mgc-nav-stuck .mgc-menu > li > a{ padding-top:12px; padding-bottom:12px; transition:padding .3s ease; }

/* animated active/hover underline for top-level nav links */
.mgc-menu > li > a{ position:relative; }
.mgc-menu > li > a::after{
  content:''; position:absolute; left:14px; right:14px; bottom:6px; height:2px;
  background:var(--mgc-gold); transform:scaleX(0); transform-origin:left; transition:transform .3s cubic-bezier(.22,1,.36,1);
}
.mgc-menu > li.active > a::after,
.mgc-menu > li > a:hover::after{ transform:scaleX(1); }
.mgc-menu .sub{ animation:mgcSubIn .22s ease both; }
@keyframes mgcSubIn{ from{ opacity:0; transform:translateY(-8px); } to{ opacity:1; transform:translateY(0); } }

/* =====================================================================
   MOBILE NAV — REWRITE
   The base stylesheet's mobile menu was `position:absolute` with
   `max-height:70vh`, which clipped the open menu on short viewports
   (items after Activities fell below the clipped edge), and a modest
   z-index with no isolation, which let it stack behind other content.
   Fix: fixed, full-height overlay panel with its own stacking context
   and a high z-index, plus a dimmed backdrop. Submenu link colour is
   also fixed here (was invisible dark-on-dark).
   ===================================================================== */
@media (max-width:991px){
  .mgc-nav{
    isolation:isolate;
    z-index:2000;
  }
  .mgc-nav-toggle{ position:relative; z-index:2; }

  /* Fix: menu was anchored to var(--mgc-nav-h), i.e. wherever the nav bar
     sits on the page, rather than the top of the viewport. On a tall mobile
     header that pushed the panel down and its bottom half was clipped off
     the bottom of the screen. It now always starts at the true top of the
     viewport and fills the full screen height. */
  .mgc-menu{
    position:fixed !important;
    top:0 !important;
    left:0;
    right:0;
    width:100%;
    flex-wrap:nowrap;
    max-height:none !important;
    height:100vh !important;
    height:100dvh !important;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    z-index:2001;
    box-shadow:0 18px 34px -16px rgba(0,0,0,.6);
    padding-top:64px;
    padding-bottom:24px;
  }
  .mgc-menu.is-open{ display:flex !important; }

  .mgc-nav-backdrop{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(6,14,30,.45);
    z-index:1999;
  }
  .mgc-nav.open .mgc-nav-backdrop,
  .mgc-nav-backdrop.is-open{ display:block; }

  body.mgc-nav-locked{ overflow:hidden; }

  /* Close (X) button pinned to the top-right of the full-screen mobile menu */
  .mgc-nav-close{
    display:none;
    position:fixed;
    top:10px;
    right:16px;
    z-index:2002;
    width:44px;
    height:44px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.35);
    background:rgba(6,14,30,.55);
    color:#fff;
    font-size:18px;
    align-items:center;
    justify-content:center;
    cursor:pointer;
  }
  .mgc-nav.open .mgc-nav-close,
  .mgc-nav-close.is-open{ display:flex; }
  .mgc-nav-close:hover{ background:var(--mgc-gold); color:var(--mgc-navy-deep); border-color:var(--mgc-gold); }

  .mgc-menu .sub li a{
    color:#eef0f8;
    border-bottom-color:rgba(255,255,255,.14);
  }
  .mgc-menu .sub li a:hover{
    background:rgba(255,255,255,.08);
    color:var(--mgc-gold-soft);
    padding-left:20px;
  }

  /* Reduce vertical spacing between mobile menu items — base stylesheet
     used 14px top/bottom padding per link plus full-size line-height,
     which made the list feel sparse and tall on small screens. */
  .mgc-menu > li > a{
    padding-top:9px !important;
    padding-bottom:9px !important;
    line-height:1.3;
  }
  .mgc-menu .sub{
    padding-top:2px;
    padding-bottom:2px;
  }
  .mgc-menu .sub li a{
    padding-top:8px !important;
    padding-bottom:8px !important;
    line-height:1.3;
  }
}

/* ---------- 4c. Sticky mobile nav-bar brand (logo + college name) ----------
   On mobile, the tall header (logo + name) scrolls away and only the
   toggle bar stays sticky, leaving it unbranded while browsing. This adds
   a compact logo + name to the sticky bar itself, mobile-only. ---------- */
.mgc-nav-brand{
  display:none;
  align-items:center;
  gap:9px;
  min-width:0;
  text-decoration:none;
  color:#fff;
}
.mgc-nav-brand-logo{
  flex:none;
  width:30px;
  height:30px;
  border-radius:50%;
  background:#fff;
  padding:3px;
  object-fit:contain;
  box-shadow:0 2px 8px -2px rgba(0,0,0,.5);
}
.mgc-nav-brand-text{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-family:var(--font-display);
  font-weight:700;
  font-size:13.5px;
  letter-spacing:.2px;
  color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.35);
}
@media (max-width:991px){
  .mgc-nav-brand{
    display:flex;
    max-width:calc(100% - 60px);
  }
}
@media (max-width:420px){
  .mgc-nav-brand-text{ font-size:12px; }
}

/* =====================================================================
   4d. STYLISH DROPDOWN / SUBMENU MAKEOVER
   Purely visual — same markup, same open/close logic, just a richer
   look: rounded panel, gold top accent, rotating chevrons, a soft
   left-accent hover sweep, and roomier, icon-led rows.
   ===================================================================== */

/* Rotating chevrons for both desktop hover and mobile accordion */
.mgc-menu > li > a .fa-angle-down{ transition:transform .28s cubic-bezier(.34,1.56,.64,1); }
.mgc-menu > li:hover > a .fa-angle-down,
.mgc-menu > li.open > a .fa-angle-down{ transform:rotate(180deg); }

/* --- Desktop dropdown panel --- */
@media (min-width:992px){
  .mgc-menu .sub{
    border-radius:0 0 12px 12px;
    border-top:none;
    padding:10px 0;
    box-shadow:0 20px 40px -18px rgba(13,22,46,.45), 0 2px 0 rgba(214,161,60,.6);
    overflow:hidden;
  }
  .mgc-menu .sub::before{
    content:'';
    display:block;
    height:3px;
    margin-bottom:6px;
    background:linear-gradient(90deg,var(--mgc-gold-deep) 0,var(--mgc-gold) 45%,var(--mgc-gold-soft) 100%);
  }
  .mgc-menu .sub li{ position:relative; }
  .mgc-menu .sub li a{
    position:relative;
    display:flex;
    align-items:center;
    gap:9px;
    border-bottom:1px dashed rgba(214,161,60,.35);
    padding:10px 20px 10px 24px;
    transition:background .2s ease, color .2s ease, padding-left .2s ease;
  }
  .mgc-menu .sub li a::before{
    content:'\f105';
    font-family:FontAwesome;
    font-size:11px;
    color:var(--mgc-gold-deep);
    opacity:.55;
    transition:transform .2s ease, opacity .2s ease;
  }
  .mgc-menu .sub li:last-child a{ border-bottom:0; }
  .mgc-menu .sub li a:hover{
    background:linear-gradient(90deg,rgba(214,161,60,.14),rgba(214,161,60,.03) 70%);
    color:var(--mgc-maroon);
    padding-left:28px;
  }
  .mgc-menu .sub li a:hover::before{
    transform:translateX(3px);
    opacity:1;
  }
}

/* --- Mobile accordion submenu --- */
@media (max-width:991px){
  .mgc-menu .sub{
    background:rgba(0,0,0,.16);
    border-radius:10px;
    margin:2px 10px 10px;
    padding:4px 0;
    box-shadow:inset 0 0 0 1px rgba(214,161,60,.18);
  }
  .mgc-menu .sub li a{
    position:relative;
    display:flex;
    align-items:center;
    gap:9px;
    padding:12px 18px 12px 30px;
    border-bottom-style:dashed;
  }
  .mgc-menu .sub li a::before{
    content:'\f105';
    font-family:FontAwesome;
    font-size:10px;
    color:var(--mgc-gold-soft);
    opacity:.8;
  }
  .mgc-menu > li.open > a{
    background:rgba(0,0,0,.14);
    color:var(--mgc-gold-soft);
  }
}

/* ---------- 5. Buttons: shine sweep + lift + press feedback ---------- */
.mgc-motto-panel{ transition:box-shadow .4s ease; }
.mgc-motto-pill{ transition:transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease, background .3s ease; }

/* ---------- 4b. Our Motto: ambient rotating glow ring + pill/rule polish ---------- */
.mgc-motto-panel::after{
  content:''; position:absolute; z-index:1; pointer-events:none; inset:-60%;
  background:conic-gradient(from 0deg, transparent 0deg, rgba(214,161,60,.16) 55deg, transparent 130deg, transparent 360deg);
  animation:mgcMottoRing 12s linear infinite;
}
@keyframes mgcMottoRing{ to{ transform:rotate(360deg); } }
.mgc-motto-watermark{ transition:transform .6s ease, color .6s ease; }
.mgc-motto-panel:hover .mgc-motto-watermark{ transform:translate(-50%,-46%) scale(1.04); color:rgba(214,161,60,.11); }
.mgc-motto-pill:hover{ transform:translateY(-6px) scale(1.05); box-shadow:0 18px 30px -12px rgba(0,0,0,.55); }
.mgc-motto-highlight-rule{ transition:opacity .4s ease; }
.mgc-motto-panel:hover .mgc-motto-highlight-rule{ opacity:1.2; filter:brightness(1.15); }

@media (prefers-reduced-motion: reduce){
  .mgc-motto-panel::after{ animation:none; }
}

.mgc-btn{
  position:relative; overflow:hidden; isolation:isolate;
  transition:transform .28s cubic-bezier(.22,1,.36,1), box-shadow .28s ease, background .25s ease, color .25s ease;
}
.mgc-btn::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(115deg, transparent 20%, rgba(255,255,255,.55) 45%, transparent 70%);
  transform:translateX(-120%); transition:transform .6s ease;
}
.mgc-btn:hover::before{ transform:translateX(120%); }
.mgc-btn:hover{ transform:translateY(-3px); box-shadow:0 14px 26px -14px rgba(13,22,46,.45); }
.mgc-btn:active{ transform:translateY(-1px) scale(.98); }
.mgc-qbtn, .mgc-portalbtn{ transition:transform .28s cubic-bezier(.22,1,.36,1), box-shadow .28s ease; }
.mgc-qbtn:hover, .mgc-portalbtn:hover{ transform:translateY(-3px); }
.mgc-portalbtn i.fa-arrow-right{ transition:transform .3s ease; }
.mgc-portalbtn:hover i.fa-arrow-right{ transform:translateX(5px); }

/* ---------- 6. Cards: consistent hover lift + glow across the site ---------- */
.mgc-intro-card, .mgc-vma-card, .mgc-acad-card, .mgc-dept-card, .mgc-review-card{
  transition:transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s ease;
}
.mgc-intro-card:hover, .mgc-acad-card:hover, .mgc-dept-card:hover, .mgc-review-card:hover{
  transform:translateY(-7px);
  box-shadow:0 24px 40px -22px rgba(13,22,46,.4);
}
.mgc-vma-card{ transition:transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease; }
.mgc-vma-card:hover{ transform:translateY(-9px) rotate(-.3deg); box-shadow:0 26px 44px -20px rgba(13,22,46,.45); }
.mgc-vma-icon{ transition:transform .45s cubic-bezier(.34,1.56,.64,1); }
.mgc-vma-card:hover .mgc-vma-icon{ transform:scale(1.12) rotate(-6deg); }

.mgc-intro-card-media img{ transition:transform .6s cubic-bezier(.22,1,.36,1); }
.mgc-intro-card:hover .mgc-intro-card-media img{ transform:scale(1.06); }
.mgc-intro-card-media{ overflow:hidden; }

.mgc-dept-icon{ transition:transform .4s cubic-bezier(.34,1.56,.64,1), color .3s ease; }
.mgc-dept-card:hover .mgc-dept-icon{ transform:scale(1.15) rotate(6deg); }

/* Welcome tabs: subtle bounce-in feel on hover */
.mgc-wtab{ transition:transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease; }
.mgc-wtab:hover{ transform:translateY(-5px) scale(1.02); box-shadow:0 18px 30px -18px rgba(13,22,46,.4); }

/* ---------- 7. Gallery: zoom + shine on hover ---------- */
.mgc-gallery-tile{
  position:relative; overflow:hidden; cursor:pointer;
  transition:transform .5s cubic-bezier(.22,1,.36,1), box-shadow .5s ease;
}
.mgc-gallery-tile:hover{ transform:translateY(-6px) scale(1.03); box-shadow:0 22px 38px -18px rgba(13,22,46,.5); z-index:2; }
.mgc-gallery-tile::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(120deg, transparent 30%, rgba(255,255,255,.35) 48%, transparent 66%);
  transform:translateX(-140%); transition:transform .7s ease;
}
.mgc-gallery-tile:hover::after{ transform:translateX(140%); }
.mgc-gallery-tile span{ transition:transform .4s ease; }
.mgc-gallery-tile:hover span{ transform:translateY(-3px); }

/* ---------- 8. Review cards: quote mark + avatar polish ---------- */
.mgc-review-avatar{ transition:transform .35s cubic-bezier(.34,1.56,.64,1); }
.mgc-review-card:hover .mgc-review-avatar{ transform:scale(1.12) rotate(-4deg); }

/* ---------- 9. Notice / event ticker items: gentle hover nudge ---------- */
.mgc-notice-item a{ transition:color .25s ease, transform .25s ease; display:inline-block; }
.mgc-notice-item a:hover{ transform:translateX(4px); }

/* ---------- 10. Back-to-top: smoother reveal + subtle idle float ---------- */
.mgc-totop{ transition:opacity .3s ease, visibility .3s ease, transform .3s cubic-bezier(.34,1.56,.64,1), background .25s ease; }
.mgc-totop.show{ animation:mgcTotopFloat 2.6s ease-in-out infinite; }
@keyframes mgcTotopFloat{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-4px);} }
.mgc-totop:hover{ transform:translateY(-4px) scale(1.08); }

/* ---------- 10c. Footer: top-edge shimmer, map card + emblem polish ---------- */
.mgc-footer{ position:relative; }
.mgc-footer-beam{
  position:absolute; top:0; left:-30%; width:26%; height:3px; z-index:3;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.9),transparent);
  filter:blur(1px); mix-blend-mode:screen; pointer-events:none;
  animation:6s ease-in-out infinite mgcFooterBeamSweep;
}
@keyframes mgcFooterBeamSweep{
  0%{ left:-30%; opacity:0; }
  10%,20%{ opacity:1; }
  55%,100%{ left:110%; opacity:0; }
}
.mgc-footer-emblem{ transition:transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .35s ease; }
.mgc-footer-about:hover .mgc-footer-emblem{ transform:scale(1.08) rotate(-4deg); box-shadow:0 8px 20px -6px rgba(169,124,34,.7),inset 0 0 0 2px rgba(255,255,255,.3); }
.mgc-footer-map-frame{ transition:box-shadow .35s ease, border-color .35s ease; }
.mgc-footer-map-frame:hover{ border-color:rgba(238,203,133,.55); box-shadow:0 20px 40px -18px rgba(0,0,0,.75); }
.mgc-footer-map-frame:hover iframe{ filter:grayscale(.05) contrast(1.05) brightness(1); }
.mgc-footer-map iframe{ transition:filter .4s ease; }
.mgc-footer-map-badge{ transition:transform .3s ease; }
.mgc-footer-map-frame:hover .mgc-footer-map-badge{ transform:translateY(-2px); }

@media (prefers-reduced-motion: reduce){
  .mgc-footer-beam{ display:none; }
  .mgc-footer-emblem, .mgc-footer-map-frame, .mgc-footer-map iframe, .mgc-footer-map-badge{ transition:none; }
}

/* ---------- 11. Slider arrows / dots — extra tactility ---------- */
.mgc-slider [id$="Prev"], .mgc-slider [id$="Next"]{ transition:transform .3s cubic-bezier(.34,1.56,.64,1), background .25s ease; }
.mgc-slider [id$="Prev"]:hover, .mgc-slider [id$="Next"]:hover{ transform:translateY(-50%) scale(1.12); }
#mgcSliderDots button{ transition:transform .3s ease, background .3s ease; }
#mgcSliderDots button:hover{ transform:scale(1.25); }

/* ---------- 12. Form fields: focus glow ---------- */
.mgc-field .form-control{ transition:box-shadow .25s ease, border-color .25s ease, transform .25s ease; }
.mgc-field .form-control:focus{ box-shadow:0 0 0 4px rgba(214,161,60,.22); transform:translateY(-1px); }

/* ---------- 13. Section eyebrows: little accent draw-in ---------- */
.mgc-eyebrow{ position:relative; }
.mgc-section-head h2{ position:relative; display:inline-block; }
.mgc-section-head h2::after{
  content:''; position:absolute; left:50%; bottom:-10px; width:0; height:3px; transform:translateX(-50%);
  background:linear-gradient(90deg,var(--mgc-gold-deep),var(--mgc-gold)); border-radius:3px;
  transition:width .7s cubic-bezier(.22,1,.36,1);
}
.mgc-section-head.center h2::after{ width:0; }
.mgc-section-head.is-in h2::after{ width:72px; }

/* ---------- 14. Utility bar live dot / marquee: tiny depth ---------- */
.mgc-utilbar-set, .mgc-updatebar-items{ will-change:transform; }

/* =====================================================================
   15. SOS FIXES — teal update bar, brighter header/college-name text,
   and a livelier mobile header.
   ===================================================================== */

/* --- 15a. Latest update marquee: bright golden-yellow track, teal flag --- */
.mgc-updatebar{
  background:linear-gradient(180deg,#fff8dc 0,#ffd54f 30%,#ffb300 62%,#ff9f1c 100%) !important;
  border-bottom:1px solid #c97a00 !important;
  box-shadow:0 0 20px rgba(255,250,225,.85) inset, 0 4px 14px -6px rgba(150,95,0,.4) !important;
}
.mgc-updatebar-flag{
  background:linear-gradient(135deg,#26a696 0,#0c3d37 100%) !important;
  box-shadow:6px 0 18px -4px rgba(6,40,35,.5), inset 0 1px 0 rgba(255,255,255,.4) !important;
  text-shadow:0 1px 3px rgba(0,0,0,.5) !important;
}
.mgc-updatebar-flag::after{
  background:radial-gradient(circle at 30% 50%,rgba(255,255,255,.55),rgba(255,255,255,0) 72%) !important;
}
.mgc-updatebar-dot{ background:#fff !important; box-shadow:0 0 6px rgba(255,255,255,.85) !important; }
.mgc-updatebar-scrollwrap::before{
  background:linear-gradient(90deg,rgba(255,159,28,.9),rgba(255,159,28,0) 100%) !important;
}
.mgc-updatebar-items a{ color:var(--mgc-indigo-deep) !important; }
.mgc-updatebar-items a:hover{ color:var(--mgc-maroon-deep) !important; text-shadow:0 0 10px rgba(255,255,255,.7); }
.mgc-updatebar-items{
  font-size:14.5px !important;
  font-weight:800 !important;
  letter-spacing:.15px;
}
.mgc-updatebar-items a{
  text-shadow:0 1px 0 rgba(255,255,255,.65) !important;
}
.mgc-updatebar-items .mgc-tag-new{
  background:linear-gradient(135deg,#ff5252 0,#d3242c 100%) !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.55) !important;
  box-shadow:0 0 10px rgba(211,36,44,.75) !important;
  text-shadow:0 1px 2px rgba(0,0,0,.35) !important;
  animation:.7s ease-in-out infinite mgcBadgeBlinkFast !important;
}
@keyframes mgcBadgeBlinkFast{ 0%,100%,40%{ opacity:1; } 20%{ opacity:.3; } }
.mgc-qbtn .mgc-tag-new{
  background:linear-gradient(135deg,#ff5252 0,#d3242c 100%) !important;
  box-shadow:0 0 10px rgba(211,36,44,.75) !important;
  animation:.7s ease-in-out infinite mgcBadgeBlinkFast !important;
}
@media (prefers-reduced-motion:reduce){
  .mgc-updatebar-items .mgc-tag-new, .mgc-qbtn .mgc-tag-new{ animation:none !important; }
}

/* --- 15b. College name + header text: elegant, eye-catching treatment (no background block) --- */
.mgc-brand2-text h1{
  position:relative;
  display:inline-block;
  background:none !important;
  color:var(--mgc-navy-deep) !important;
  -webkit-background-clip:initial; background-clip:initial; -webkit-text-fill-color:initial;
  text-shadow:none;
  font-size:25px !important;
  font-weight:800 !important;
  letter-spacing:.9px;
  padding-bottom:9px;
  margin-bottom:7px !important;
}
.mgc-brand2-text h1::after{
  content:'';
  position:absolute;
  left:1px; bottom:0;
  width:58px; height:3px;
  border-radius:2px;
  background:linear-gradient(90deg,var(--mgc-gold-deep),var(--mgc-gold-soft));
  box-shadow:0 1px 4px rgba(169,124,34,.5);
}
.mgc-h2-sub1{
  color:var(--mgc-navy-deep) !important;
  opacity:.82 !important;
  font-weight:600 !important;
  font-style:italic;
  font-size:12px !important;
  letter-spacing:.25px;
}
.mgc-h2-sub2{
  color:var(--mgc-teal) !important;
  background:none !important;
  display:flex !important;
  align-items:center;
  gap:6px;
  font-weight:700 !important;
  font-size:11.5px !important;
  letter-spacing:.5px !important;
  padding:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
}
.mgc-h2-sub2::before{
  content:'\f005';
  font-family:FontAwesome;
  font-size:10px;
  color:var(--mgc-gold-deep);
}
.mgc-tagpill{
  display:inline-flex !important;
  align-items:center;
  color:var(--mgc-gold-deep) !important;
  background:linear-gradient(160deg,rgba(255,253,246,.9),rgba(238,203,133,.28)) !important;
  border:1px solid rgba(214,161,60,.55) !important;
  border-radius:20px !important;
  padding:4px 14px 4px 12px !important;
  margin:5px 0 6px !important;
  font-weight:800 !important;
  font-size:9.5px !important;
  letter-spacing:1.5px !important;
  box-shadow:0 3px 10px -4px rgba(169,124,34,.45), inset 0 1px 0 rgba(255,255,255,.6) !important;
}
.mgc-tagpill::before{ content:'\2726'; color:var(--mgc-gold-deep) !important; margin-right:6px; font-size:9px; }
.mgc-h2-addr{
  display:flex !important;
  align-items:center;
  gap:6px;
  color:var(--mgc-terracotta-deep) !important;
  font-weight:700 !important;
  letter-spacing:.9px !important;
  margin-bottom:8px !important;
}
.mgc-h2-addr::before{
  content:'\f041';
  font-family:FontAwesome;
  font-size:10.5px;
  color:var(--mgc-terracotta-deep);
}

/* --- 15c. Header: make the alpana pattern more prominent everywhere --- */
.mgc-header2::before{
  background-image:linear-gradient(90deg,rgba(250,246,236,.75),rgba(250,246,236,.6) 55%,rgba(250,246,236,.78)),url('../images/alpana.jpg') !important;
  background-size:cover,340px auto !important;
  opacity:1 !important;
}

@media (max-width:760px){
  .mgc-header2::before{
    background-image:linear-gradient(160deg,rgba(250,246,236,.55),rgba(250,246,236,.65) 55%,rgba(255,255,255,.7)),url('../images/alpana.jpg') !important;
    background-size:cover,220px auto !important;
    opacity:1 !important;
  }
  .mgc-header2::after{
    height:4px;
    background:linear-gradient(90deg,transparent,var(--mgc-teal-light) 18%,var(--mgc-gold) 50%,var(--mgc-teal-light) 82%,transparent) !important;
    opacity:1 !important;
  }
  .mgc-brand2-emblem::before{ background:radial-gradient(circle,rgba(255,209,102,.75),rgba(255,209,102,0) 70%) !important; }
  .mgc-brand2-text h1{ font-size:22px !important; }
}

@media (prefers-reduced-motion: reduce){
  .mgc-updatebar{ animation:none; }
}

/* Respect users who want less motion, one more time, broadly */
@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior:auto !important; }
  .mgc-btn::before, .mgc-gallery-tile::after{ display:none; }
  .mgc-totop.show{ animation:none; }
}

/* =====================================================================
   GALLERY — International Day of Yoga stamp-photo tile + lightbox
   ===================================================================== */
.mgc-gallery-tile-yoga{ padding:0; align-items:stretch; cursor:default; }
.mgc-gallery-tile-yoga::before,
.mgc-gallery-tile-yoga::after{ content:none; }
.mgc-gallery-tile-yoga:hover{ transform:translateY(-6px) scale(1.015); }
.mgc-yoga-stamps{
  position:absolute; inset:0; z-index:1;
  display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr;
  gap:2px; background:var(--mgc-indigo-deep);
}
.mgc-yoga-stamp{
  position:relative; display:block; width:100%; height:100%;
  padding:0; margin:0; border:0; background:0 0; cursor:pointer; overflow:hidden;
}
.mgc-yoga-stamp img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .4s cubic-bezier(.22,1,.36,1), filter .3s;
  filter:saturate(1.02);
}
.mgc-yoga-stamp:hover img,
.mgc-yoga-stamp:focus-visible img{ transform:scale(1.1); filter:saturate(1.15) brightness(1.04); }
.mgc-yoga-stamp::after{
  content:'\f00e'; font-family:FontAwesome; position:absolute; inset:0; z-index:2;
  display:flex; align-items:center; justify-content:center; font-size:15px; color:#fff;
  background:rgba(13,22,46,.38); opacity:0; transition:opacity .25s;
}
.mgc-yoga-stamp:hover::after,
.mgc-yoga-stamp:focus-visible::after{ opacity:1; }
.mgc-gallery-tile-yoga > span{
  position:absolute; left:0; right:0; bottom:0; z-index:3; margin:0;
  padding:14px 16px 12px; pointer-events:none;
  background:linear-gradient(0deg,rgba(0,0,0,.72),transparent 90%);
}

.mgc-lightbox-backdrop{
  position:fixed; inset:0; z-index:1100; display:flex; align-items:center; justify-content:center;
  padding:24px; background:rgba(13,22,46,.78);
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  opacity:0; transition:opacity .32s;
}
.mgc-lightbox-backdrop.is-open{ opacity:1; }
.mgc-lightbox-backdrop[hidden]{ display:none; }
.mgc-lightbox-modal{
  position:relative; max-width:min(880px,94vw); max-height:88vh;
  display:flex; flex-direction:column; align-items:center;
  transform:translateY(24px) scale(.96); opacity:0;
  transition:transform .38s cubic-bezier(.22,1,.36,1), opacity .32s;
}
.mgc-lightbox-backdrop.is-open .mgc-lightbox-modal{ transform:translateY(0) scale(1); opacity:1; }
.mgc-lightbox-modal img{
  max-width:100%; max-height:74vh; width:auto; height:auto;
  border-radius:10px; box-shadow:0 30px 70px -20px rgba(0,0,0,.6);
  border:1px solid rgba(255,255,255,.15);
}
.mgc-lightbox-caption{
  margin:14px 0 0; max-width:640px; text-align:center;
  color:#f4f6fc; font-size:13.5px; line-height:1.5;
}
.mgc-lightbox-close{
  position:absolute; top:-18px; right:-18px; width:40px; height:40px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--mgc-gold); border:1px solid rgba(255,255,255,.4); color:var(--mgc-indigo-deep);
  font-size:15px; cursor:pointer; box-shadow:0 10px 22px -8px rgba(0,0,0,.55);
  transition:background .25s,color .25s,transform .3s cubic-bezier(.34,1.56,.64,1);
}
.mgc-lightbox-close:hover{ background:var(--mgc-maroon); color:#fff; transform:rotate(90deg); }
.mgc-lightbox-close:focus-visible{ outline:3px solid var(--mgc-gold-soft); outline-offset:2px; }
@media (max-width:560px){
  .mgc-lightbox-close{ top:-14px; right:0; }
}

/* =====================================================================
   HEADER — trim vertical height a touch (desktop + mobile)
   ===================================================================== */
.mgc-header2-grid{ padding:2px 0; }
.mgc-brand2-emblem{ width:70px; height:70px; }
.mgc-brand2-text h1{ font-size:22px !important; margin-bottom:2px !important; }
.mgc-h2-sub1,.mgc-h2-sub2{ margin-top:0; margin-bottom:2px; line-height:1.15 !important; }
.mgc-tagpill{ margin:3px 0 4px !important; padding:3px 12px 3px 10px !important; }
.mgc-h2-addr{ line-height:1.15; }
@media (max-width:991px){
  .mgc-brand2-emblem{ width:62px; height:62px; }
}

/* =====================================================================
   PRINCIPAL'S DESK — "Message of Wisdom" ribbon styled as a lace tag,
   pinned at the card corner and tilted outward, away from the card.
   ===================================================================== */
.mgc-intro-card-ribbon-host{
  position:relative;
  display:flex;
}
.mgc-intro-card-ribbon-host > .mgc-intro-card{
  flex:1 1 auto;
  width:100%;
}
.mgc-wisdom-ribbon-wrap{
  position:absolute;
  top:0; right:0;
  width:0; height:0;
  overflow:visible;
  z-index:25;
  pointer-events:none;
}
/* the little gold pin/knot where the lace is fastened to the card */
.mgc-wisdom-ribbon-wrap::before{
  content:'';
  position:absolute;
  top:30px; right:2px;
  width:13px; height:13px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%,var(--mgc-gold-soft),var(--mgc-gold-deep) 75%);
  box-shadow:0 3px 8px rgba(0,0,0,.4), inset 0 0 0 1px rgba(255,255,255,.5);
  z-index:27;
}
.mgc-wisdom-ribbon{
  position:absolute;
  top:24px; right:-2px;
  display:block;
  width:190px;
  padding:7px 0;
  text-align:center;
  font-family:var(--font-display);
  font-size:11.5px;
  font-weight:700;
  letter-spacing:1.1px;
  text-transform:uppercase;
  color:#fff;
  background:linear-gradient(100deg,#ff9a44 0,#f2740a 55%,#e0650a 100%);
  transform:rotate(-14deg);
  transform-origin:0% 50%;
  box-shadow:0 10px 22px -6px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.32);
  clip-path:polygon(0% 0%,84% 0%,100% 50%,84% 100%,0% 100%);
  transition:transform .4s cubic-bezier(.22,1,.36,1),box-shadow .4s;
}
.mgc-wisdom-ribbon i{ margin-right:6px; color:#fff5e0; }
.mgc-intro-card-ribbon-host:hover .mgc-wisdom-ribbon{
  transform:rotate(-19deg);
  box-shadow:0 16px 30px -8px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.36);
}
@media (max-width:820px){
  .mgc-wisdom-ribbon{ top:20px; right:-2px; width:160px; font-size:10.5px; transform:rotate(-12deg); }
  .mgc-intro-card-ribbon-host:hover .mgc-wisdom-ribbon{ transform:rotate(-16deg); }
  .mgc-wisdom-ribbon-wrap::before{ top:19px; }
}
@media (max-width:480px){
  .mgc-wisdom-ribbon{ top:16px; right:-2px; width:140px; font-size:9.5px; padding:6px 0; transform:rotate(-10deg); }
  .mgc-intro-card-ribbon-host:hover .mgc-wisdom-ribbon{ transform:rotate(-13deg); }
  .mgc-wisdom-ribbon-wrap::before{ top:14px; width:11px; height:11px; }
}

/* =====================================================================
   HEADER — reinforce centering of the brand block (logo, name, tagline)
   in mobile view; earlier rules are strengthened here to win the cascade.
   ===================================================================== */
@media (max-width:991px){
  .mgc-header2-grid{ flex-direction:column !important; align-items:center !important; justify-content:center !important; text-align:center !important; padding:8px 0 6px; margin:0 auto; }
  .mgc-brand2{ flex-direction:column !important; align-items:center !important; justify-content:center !important; text-align:center !important; width:100% !important; margin:0 auto !important; gap:8px !important; }
  .mgc-brand2-emblem{ width:56px; height:56px; margin:0 auto !important; }
  .mgc-brand2-text{ width:100% !important; text-align:center !important; border-left:none !important; padding-left:0 !important; border-top:2px solid rgba(214,161,60,.5); padding-top:10px; }
  .mgc-brand2-text::before{ left:0 !important; right:0 !important; top:-2px !important; bottom:auto !important; width:auto !important; height:2px !important; }
  .mgc-brand2-text h1{ display:block !important; width:100% !important; text-align:center !important; }
  .mgc-brand2-text h1::after{ left:50% !important; transform:translateX(-50%) !important; }
  .mgc-h2-sub1,.mgc-h2-sub2,.mgc-h2-addr{ justify-content:center !important; text-align:center !important; width:100%; }
  .mgc-tagpill{ margin-left:auto !important; margin-right:auto !important; }
  .mgc-header2-right{ align-items:center !important; justify-content:center !important; text-align:center !important; width:100% !important; margin:0 auto !important; }
  .mgc-qbtn-row{ justify-content:center !important; width:100%; }
  .mgc-qbtn{ justify-content:center !important; }
  .mgc-portalbtn{ margin:0 auto !important; max-width:380px !important; width:100% !important; }
}

/* =====================================================================
   ACADEMIC PROGRAMMES — keep the KPI pills centered on mobile.
   mgc-style.css switches them to justify-content:flex-start below 640px;
   restore centering so each wrapped row sits centered, not left-hugging.
   ===================================================================== */
@media (max-width:640px){
  .mgc-acad-kpis-slim{ justify-content:center !important; }
}

/* =====================================================================
   HEADER — force single-line college name + bulletproof centering
   ===================================================================== */
@media (max-width:991px){
  .mgc-brand2-text h1{
    display:block !important;
    width:100% !important;
    text-align:center !important;
    white-space:nowrap !important;
    font-size:clamp(13px, 5.2vw, 22px) !important; /* shrinks to always fit one line */
    margin-left:auto !important;
    margin-right:auto !important;
  }
  .mgc-brand2-text h1::after{
    left:50% !important;
    transform:translateX(-50%) !important;
  }
}

/* =====================================================================
   CAMPUS GALLERY — real-photo tiles (Women's Day / Teachers' Day)
   Two of the "Moments from Campus Life" placeholder tiles are now real
   <button> elements holding an actual photo, opening the existing
   lightbox popup on click. This resets native button styling so they
   look and behave exactly like the other .mgc-gallery-tile cards, and
   fills the tile with the real <img> instead of the --t1/--t2 colour
   gradient used by the remaining placeholder tiles.
   ===================================================================== */
.mgc-gallery-tile.mgc-gallery-photo{
  border:1px solid rgba(214,161,60,.4);
  background:var(--mgc-indigo-deep);
  font:inherit;
  text-align:left;
  cursor:pointer;
}
.mgc-gallery-tile.mgc-gallery-photo img{
  position:absolute;
  inset:0;
  z-index:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .5s;
}
.mgc-gallery-tile.mgc-gallery-photo:hover img{
  transform:scale(1.08);
}
.mgc-gallery-tile.mgc-gallery-photo:focus-visible{
  outline:3px solid var(--mgc-gold);
  outline-offset:2px;
}
/* small "open photo" affordance, consistent with the yoga stamp tiles */
.mgc-gallery-tile.mgc-gallery-photo::after{
  content:'';
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(0deg,rgba(0,0,0,.68) 0,rgba(0,0,0,.15) 45%,transparent 62%);
}

/* =====================================================================
   WELCOME STRIP — grand centre-top crest/ribbon tab
   A small, eye-catching decorative badge sitting above the "Welcome To"
   eyebrow, centred in the highlight strip. Purely additive: introduces
   its own classes so nothing already on the page is touched.
   ===================================================================== */
.mgc-welcome-crest{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 14px;
  isolation:isolate;
}
.mgc-welcome-crest-inner{
  position:relative;
  z-index:2;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:9px 26px;
  font-family:var(--font-display);
  font-weight:700;
  font-size:12.5px;
  letter-spacing:1.6px;
  text-transform:uppercase;
  color:var(--mgc-maroon-deep);
  background:linear-gradient(160deg,#fffef8 0,var(--mgc-gold-soft) 45%,var(--mgc-gold) 85%);
  border-radius:3px;
  box-shadow:0 10px 24px -8px rgba(13,10,4,.55),0 0 0 1px rgba(255,255,255,.55) inset,0 0 0 1px rgba(122,31,43,.15);
  overflow:hidden;
  white-space:nowrap;
}
.mgc-welcome-crest-inner::before{
  /* rotating shine sweep to make the tab feel "alive" */
  content:'';
  position:absolute;
  top:0;
  left:-60%;
  width:40%;
  height:100%;
  background:linear-gradient(100deg,rgba(255,255,255,0) 0,rgba(255,255,255,.85) 50%,rgba(255,255,255,0) 100%);
  transform:skewX(-18deg);
  animation:4.5s ease-in-out infinite mgcCrestSheen;
  pointer-events:none;
}
@keyframes mgcCrestSheen{
  0%,15%{left:-60%}
  55%,100%{left:130%}
}
.mgc-welcome-crest-inner i{
  color:var(--mgc-maroon);
  font-size:11px;
}
/* pointed ribbon tails flaring out from behind the plaque, echoing a
   ceremonial/award-ribbon look */
.mgc-welcome-crest-tail{
  position:absolute;
  top:3px;
  z-index:1;
  width:22px;
  height:26px;
  background:linear-gradient(160deg,var(--mgc-gold) 0,var(--mgc-gold-deep) 100%);
  box-shadow:0 8px 16px -8px rgba(13,10,4,.6);
}
.mgc-welcome-crest-tail.left{
  left:-14px;
  clip-path:polygon(0 0,100% 0,100% 100%,50% 82%,0 100%);
}
.mgc-welcome-crest-tail.right{
  right:-14px;
  clip-path:polygon(0 0,100% 0,100% 100%,50% 82%,0 100%);
}
/* soft gold glow pulse behind the whole crest so it reads instantly
   against the terracotta welcome-strip background */
.mgc-welcome-crest::after{
  content:'';
  position:absolute;
  inset:-14px -22px;
  z-index:0;
  border-radius:40px;
  background:radial-gradient(circle,rgba(238,203,133,.45),transparent 70%);
  filter:blur(6px);
  animation:3.2s ease-in-out infinite mgcCrestGlow;
  pointer-events:none;
}
@keyframes mgcCrestGlow{
  0%,100%{opacity:.55;transform:scale(1)}
  50%{opacity:.95;transform:scale(1.08)}
}
@media (max-width:560px){
  .mgc-welcome-crest-inner{
    padding:8px 16px;
    font-size:10.5px;
    letter-spacing:1px;
    gap:7px;
  }
  .mgc-welcome-crest-inner span{white-space:normal}
  .mgc-welcome-crest-tail{display:none}
}
@media (prefers-reduced-motion:reduce){
  .mgc-welcome-crest-inner::before{animation:none;display:none}
  .mgc-welcome-crest::after{animation:none;opacity:.6}
}

/* =====================================================================
   HEADER — compact circular emblem seal
   A small round seal floating in the gap between the college name and
   the right-side buttons, carrying the college's tagline. It's taken
   out of normal flow on desktop (absolutely centred within the header
   row) so it can never push the brand block / buttons into wrapping;
   on mobile it drops back into the stacked column flow. Purely additive.
   ===================================================================== */
.mgc-header2{
  /* emblem no longer needs a reserved row above the brand block */
  padding-top:6px !important;
}
.mgc-header2-grid{
  position:relative;
}
.mgc-header-emblem{
  position:relative;
  z-index:3;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:1px;
  width:84px;
  height:84px;
  flex-shrink:0;
  margin:6px auto;
  padding:8px;
  border-radius:50%;
  background:linear-gradient(160deg,#fffef9 0,#fdf4de 55%,#f9e8c4 100%);
  border:1px solid var(--mgc-gold);
  box-shadow:0 6px 14px -8px rgba(13,22,46,.35),inset 0 1px 0 rgba(255,255,255,.9);
  isolation:isolate;
  overflow:hidden;
  text-align:center;
}
.mgc-header-emblem::before{
  /* fine double-rule inside the seal, echoing a ceremonial ring */
  content:'';
  position:absolute;
  inset:3px;
  z-index:0;
  border:1px solid rgba(122,31,43,.28);
  border-radius:50%;
  pointer-events:none;
}
.mgc-header-emblem::after{
  /* slow shine sweep across the seal */
  content:'';
  position:absolute;
  top:0;
  left:-70%;
  width:34%;
  height:100%;
  z-index:1;
  background:linear-gradient(100deg,rgba(255,255,255,0) 0,rgba(255,255,255,.85) 50%,rgba(255,255,255,0) 100%);
  transform:skewX(-16deg);
  animation:6s ease-in-out infinite mgcEmblemSheen;
  pointer-events:none;
}
@keyframes mgcEmblemSheen{
  0%,20%{left:-70%}
  60%,100%{left:130%}
}
.mgc-header-emblem-text{
  position:relative;
  z-index:2;
  font-family:var(--font-display);
  font-style:italic;
  font-weight:700;
  font-size:8.6px;
  line-height:1.15;
  letter-spacing:.1px;
  color:var(--mgc-maroon-deep);
  text-shadow:0 1px 0 rgba(255,255,255,.6);
  white-space:normal;
  max-width:60px;
}
.mgc-header-emblem-leaf{
  position:relative;
  z-index:2;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--mgc-gold-deep);
  font-size:8px;
}
.mgc-header-emblem-leaf.right{transform:scaleX(-1)}

/* Desktop: lift the seal out of normal flow so it can never push the
   brand block / buttons apart or force them to wrap onto new lines. */
@media (min-width:992px){
  .mgc-header-emblem{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    margin:0;
  }
}

@media (max-width:760px){
  .mgc-header2{padding-top:8px !important}
  .mgc-header-emblem{
    width:64px;
    height:64px;
    margin:6px auto;
    padding:5px;
  }
  .mgc-header-emblem-text{
    font-size:7.5px;
    max-width:46px;
  }
  .mgc-header-emblem-leaf{ font-size:6.5px; }
}
@media (prefers-reduced-motion:reduce){
  .mgc-header-emblem::after{animation:none;display:none}
}