/* ===== RESET & BASE ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* Self-hosted Devanagari, used only as the last resort in --font-hi. A device
   that already has Nirmala UI / Mangal / Noto never downloads this file
   (browsers fetch a webfont only when a glyph actually needs it), and a device
   with no Hindi font at all gets readable text instead of empty boxes.
   Noto Sans Devanagari v30, SIL Open Font License 1.1 — see fonts/LICENSE.txt. */
@font-face{
  font-family:'BM Devanagari';
  src:url('fonts/noto-sans-devanagari-v30.woff2') format('woff2');
  font-weight:400 700;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+20F0,U+25CC,U+A830-A839,U+A8E0-A8FF;
}

:root{
  /* Measured from the real topbar by script.js so the sticky navbar always sits
     flush underneath it. The value here is only a pre-JS fallback. */
  --topbar-h:33px;
  /* Devanagari needs an explicit fallback chain — 'Segoe UI'/Arial carry no
     Devanagari glyphs, so the Hindi college name renders as empty boxes
     ("tofu") on any device without a Hindi font (most Linux, some kiosks).
     'BM Devanagari' above is the guaranteed backstop. */
  --font-hi:'Nirmala UI','Noto Sans Devanagari','Noto Serif Devanagari','Mangal','Lohit Devanagari','Kohinoor Devanagari','BM Devanagari','Segoe UI',Arial,sans-serif;
}
/* 122% of the user's own base size == 19.5px at the 16px default, so the design
   is unchanged, but people who raise their browser font size still get it. */
html{scroll-behavior:smooth;font-size:122%}

/* Devanagari was previously reached only through the handful of classes that
   name --font-hi (.tagline, .uni-name-hi …), so any NEW Hindi text rendered
   as tofu boxes on a machine with no Devanagari font — which is exactly what
   happened to the "Medium: हिन्दी" row in the programme facts panel. Keying
   off the lang attribute instead means every Hindi string on the site is
   covered, including ones added later. */
[lang="hi"]{font-family:var(--font-hi)}

/* The section headings on the home page carry ids (#h-faq, #h-admission …),
   so they can be linked to directly. The navbar is sticky, so without a
   scroll margin the browser parks the target underneath it. Matches the
   topbar + navbar height. */
[id^="h-"]{scroll-margin-top:calc(var(--topbar-h) + 62px)}
body{font-family:'Segoe UI',Arial,sans-serif;color:#333;background:#f5f5f5;overflow-x:hidden}
a{text-decoration:none;color:inherit}
ul{list-style:none}
img{max-width:100%;height:auto;display:block}
button{cursor:pointer;font-family:inherit}

/* ===== TOPBAR ===== */
.topbar{background:#ff6600;color:#fff;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px 10px;padding:5px 10px;font-size:0.8rem;position:sticky;top:0;z-index:1100;box-shadow:0 2px 6px rgba(0,0,0,.2)}
.topbar-left{display:flex;gap:18px;align-items:center}
.topbar-left span{display:flex;align-items:center;gap:5px}
.topbar-right{display:flex;align-items:center;gap:10px}
.topbar-right a{color:#fff;font-size:0.82rem;transition:opacity .2s}
.topbar-right a:hover{opacity:.75}
.reg-btn{background:#fff;color:#ff6600!important;padding:3px 11px;border-radius:20px;font-weight:700;font-size:0.78rem!important;display:flex;align-items:center;gap:5px;transition:background .2s}
.reg-btn:hover{background:#ffe0cc}

/* ===== HEADER — matches reference image exactly ===== */
.site-header{background:#fff;border-bottom:3px solid #ff6600;padding:0}
.header-wrap{max-width:1800px;margin:0 auto;padding:8px 10px 10px}
/* Tagline: centered above everything */
.header-tagline-row{text-align:center;margin-bottom:6px}
.tagline{font-size:0.82rem;color:#444;font-style:italic;line-height:1.4;display:inline-block;font-family:var(--font-hi)}
/* Main row: logo+title left, contact right */
.header-inner{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.logo-block{display:flex;align-items:center;gap:14px;flex:1;min-width:0}
.logo-img{width:95px;height:95px;object-fit:contain;border-radius:50%;border:2px solid #ddd;background:#fff;flex-shrink:0}
.header-title{display:flex;flex-direction:column;gap:2px}
.uni-name-hi{font-size:1.7rem;font-weight:900;color:#cc0000;line-height:1.15;font-family:var(--font-hi)}
.uni-name-hi2{font-size:1.5rem;font-weight:900;color:#ff6600;line-height:1.15;font-family:var(--font-hi)}
.affiliation{font-size:0.78rem;color:#555;font-style:italic;margin-top:1px}
.address-line{font-size:0.76rem;color:#555;margin-top:1px;font-family:var(--font-hi)}
.header-contact{font-size:0.75rem;color:#333;text-align:right;line-height:1.75;min-width:240px;flex-shrink:0}
.header-contact .hc-title{font-weight:700;color:#333}

/* ===== PAGE LOADER ===== */
.page-loader{position:fixed;inset:0;background:linear-gradient(135deg,#1a0800 0%,#7a2d00 55%,#cc4400 100%);z-index:99999;display:flex;align-items:center;justify-content:center;transition:opacity .7s ease,visibility .7s ease;
  /* Failsafe: the loader is normally removed by script.js, but if any JS error
     happens before that the overlay would hide the whole site forever. */
  animation:loaderFailsafe 1ms linear 4s forwards}
@keyframes loaderFailsafe{to{opacity:0;visibility:hidden}}
.page-loader.loaded{opacity:0;visibility:hidden}
.loader-box{text-align:center;color:#fff}
.loader-ring{width:88px;height:88px;border-radius:50%;border:3px solid rgba(255,255,255,.12);border-top-color:#fff;border-right-color:rgba(255,255,255,.45);margin:0 auto 16px;animation:loaderSpin .9s linear infinite;position:relative}
.loader-ring::after{content:'';position:absolute;inset:9px;border-radius:50%;border:2px solid rgba(255,255,255,.07);border-bottom-color:rgba(255,255,255,.38);animation:loaderSpin 1.5s linear infinite reverse}
@keyframes loaderSpin{to{transform:rotate(360deg)}}
.loader-brand{font-size:1.9rem;font-weight:900;letter-spacing:5px;text-shadow:0 0 30px rgba(255,102,0,.9);animation:loaderPulse 1.4s ease-in-out infinite alternate}
@keyframes loaderPulse{from{opacity:.65;transform:scale(.96)}to{opacity:1;transform:scale(1.04)}}
.loader-caption{font-size:.7rem;opacity:.5;letter-spacing:1.5px;margin-top:9px;text-transform:uppercase}

/* ===== NAVBAR ===== */
.navbar{background:linear-gradient(90deg,#c94400 0%,#ff6600 45%,#ff7a1a 75%,#c94400 100%);background-size:200% 100%;animation:navShimmer 7s ease-in-out infinite alternate;position:sticky;top:var(--topbar-h);z-index:1000;box-shadow:0 4px 22px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.14);border-bottom:1px solid rgba(255,255,255,.1)}
@keyframes navShimmer{0%{background-position:0% 50%}100%{background-position:100% 50%}}
.nav-container{max-width:1800px;margin:0 auto;display:flex;align-items:center;padding:0 6px;position:relative}
.nav-menu{display:flex;flex-wrap:wrap;width:100%;justify-content:flex-end}
.nav-menu>li{position:relative}
.nav-link{display:flex;align-items:center;gap:5px;padding:13px 16px;color:rgba(255,255,255,.93);font-size:0.88rem;font-weight:600;white-space:nowrap;background:none;border:none;position:relative;z-index:1;transition:color .25s ease}
.nav-link::before{content:'';position:absolute;inset:5px 3px;border-radius:9px;background:rgba(255,255,255,0);border:1px solid rgba(255,255,255,0);transition:background .32s ease,border-color .32s ease,transform .32s ease,box-shadow .32s ease;z-index:-1;transform:scale(.82)}
.nav-menu>li:hover>.nav-link::before,.nav-link.active::before{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.32);transform:scale(1);box-shadow:0 3px 14px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.28)}
.nav-link:hover,.nav-link.active{color:#fff;background:transparent}
/* Sliding bottom indicator */
.nav-indicator{position:absolute;bottom:0;left:0;height:3px;width:0;background:linear-gradient(90deg,rgba(255,255,255,.3),#fff,rgba(255,255,255,.3));border-radius:3px 3px 0 0;opacity:0;transition:left .35s cubic-bezier(.4,0,.2,1),width .35s cubic-bezier(.4,0,.2,1),opacity .2s ease;pointer-events:none;box-shadow:0 0 10px rgba(255,255,255,.7),0 0 20px rgba(255,255,255,.3)}
.nav-link i{font-size:0.6rem;transition:transform .2s}
.nav-menu>li:hover .nav-link i{transform:rotate(180deg)}
/* Dropdown */
.dropdown-menu{display:none;position:absolute;top:100%;left:0;background:#fff;min-width:180px;box-shadow:0 8px 24px rgba(0,0,0,.14);border-top:3px solid #ff6600;border-radius:0 0 6px 6px;z-index:200;animation:dropFade .2s ease}
@keyframes dropFade{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.dropdown:hover .dropdown-menu{display:block}
.dropdown-menu li a{display:block;padding:10px 16px;color:#333;font-size:0.83rem;border-bottom:1px solid #f0f0f0;transition:background .15s,color .15s}
.dropdown-menu li a:hover{background:#fff3ea;color:#ff6600}
/* Hamburger */
.hamburger{display:none;flex-direction:column;gap:5px;background:none;border:none;padding:11px;min-width:44px;min-height:44px;justify-content:center;align-items:center}
.hamburger span{display:block;width:22px;height:2px;background:#fff;border-radius:2px;transition:all .3s}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ===== PAGE WRAPPER & TRANSITIONS ===== */
.page-wrapper{min-height:60vh}
.page{display:none;opacity:0;transform:translateY(18px);transition:opacity .45s ease,transform .45s ease}
.page.active{display:block;opacity:1;transform:translateY(0)}

/* ===== PAGE HERO BANNER ===== */
.page-hero{height:160px;display:flex;align-items:center;justify-content:center;text-align:center}
.page-hero-content h2{font-size:2.2rem;font-weight:800;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.3)}
.page-hero-content p{color:rgba(255,255,255,.8);font-size:.9rem;margin-top:6px}

/* ===== HERO SLIDER (Home) ===== */
.hero{position:relative;overflow:hidden;height:420px}
.slider{width:100%;height:100%}
.slide{position:absolute;inset:0;opacity:0;transition:opacity .8s ease;display:flex;align-items:center;justify-content:center}
.slide.active{opacity:1;z-index:1}
.slide-content{text-align:center;color:#fff;padding:20px 24px;max-width:800px}
.slide-title{font-size:2rem;font-weight:800;line-height:1.25;text-shadow:0 2px 12px rgba(0,0,0,.4);margin-bottom:12px}
.slide-subtitle{font-size:1rem;margin-bottom:22px;opacity:.9;text-shadow:0 1px 4px rgba(0,0,0,.3)}
.btn-hero{background:#ff6600;color:#fff;border:none;padding:11px 28px;border-radius:28px;font-weight:700;font-size:.92rem;transition:background .2s,transform .2s;box-shadow:0 4px 14px rgba(255,102,0,.4)}
.btn-hero:hover{background:#e05500;transform:translateY(-2px)}
.slider-btn{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,102,0,.85);color:#fff;border:none;width:44px;height:44px;border-radius:50%;z-index:10;font-size:.95rem;transition:background .2s}
.slider-btn:hover{background:#cc5200}
.prev{left:14px}.next{right:14px}
.slider-dots{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:10}
.dot{cursor:pointer;border:none;transition:transform .2s;padding:0;position:relative;min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center;background:transparent}
.dot::after{content:'';width:11px;height:11px;border-radius:50%;background:rgba(255,255,255,.5);display:block;transition:background .2s,transform .2s}
.dot.active::after{background:#ff6600;transform:scale(1.3)}

/* ===== MARQUEE / NOTICE BAR ===== */
.notice-bar{background:#fff3e0;border-top:2px solid #ff6600;border-bottom:2px solid #ff6600;display:flex;align-items:center;overflow:hidden;padding:9px 0}
.notice-label{background:#ff6600;color:#fff;padding:5px 18px;font-weight:700;font-size:1.07rem;white-space:nowrap;display:flex;align-items:center;gap:7px;flex-shrink:0}
.marquee-wrap{flex:1;overflow:hidden}
.marquee-content{display:inline-block;white-space:nowrap;animation:marqueeScroll 30s linear infinite;color:#333;font-size:1.1rem;font-weight:500}
@keyframes marqueeScroll{0%{transform:translateX(100%)}100%{transform:translateX(-100%)}}
.marquee-content:hover{animation-play-state:paused}

/* ===== STATS ===== */
.stats-section{background:linear-gradient(135deg,#ff6600,#cc0000);padding:36px 20px}
.stats-grid{max-width:1760px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.stat-card{background:rgba(255,255,255,.12);border-radius:12px;padding:26px 14px;text-align:center;color:#fff;transition:transform .3s,background .3s;border:1px solid rgba(255,255,255,.2)}
.stat-card:hover{transform:translateY(-5px);background:rgba(255,255,255,.2)}
.stat-card i{font-size:2rem;margin-bottom:8px;display:block}
.counter{font-size:2.4rem;font-weight:800;line-height:1}
.stat-card p{font-size:.84rem;margin-top:5px;opacity:.9}

/* ===== SECTION HEADER ===== */
.section-header{text-align:center;padding:44px 20px 26px;max-width:860px;margin:0 auto}
.section-header h2{font-size:1.9rem;font-weight:800;color:#ff6600;position:relative;display:inline-block;padding-bottom:10px}
.section-header h2::after{content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:56px;height:3px;background:#cc0000;border-radius:2px}
.section-header p{color:#666;margin-top:10px;font-size:.95rem}

/* ===== ABOUT HOME ===== */
.content-section{background:#fff;padding-bottom:44px}
.content-grid{max-width:1800px;margin:0 auto;display:grid;grid-template-columns:1fr 300px;gap:24px;padding:0 10px 36px}
.about-block{background:#fff;padding:26px;border:1px solid #eee;border-radius:10px}
.about-block h3{font-size:1rem;color:#555;font-weight:600;margin-bottom:4px}
.about-block h4{font-size:1.25rem;font-weight:800;color:#cc0000;margin-bottom:14px;line-height:1.3}
.about-block p{margin-bottom:12px;line-height:1.78;color:#444;font-size:.92rem;text-align:left}
.btn-primary{display:inline-block;background:#ff6600;color:#fff;padding:9px 22px;border-radius:24px;font-weight:700;font-size:.88rem;margin-top:8px;transition:background .2s,transform .2s;border:none}
.btn-primary:hover{background:#cc5200;transform:translateY(-2px)}
/* Sidebar */
.sidebar-block{display:flex;flex-direction:column;gap:18px}
.sidebar-card{border-radius:10px;overflow:hidden;box-shadow:0 4px 14px rgba(0,0,0,.08)}
.registration-card{background:linear-gradient(135deg,#ff6600,#cc0000);color:#fff;padding:18px}
.registration-card h4{font-size:.95rem;margin-bottom:7px;display:flex;align-items:center;gap:7px}
.registration-card p{font-size:.84rem;margin-bottom:12px;opacity:.9}
.btn-apply{display:inline-block;background:#fff;color:#ff6600;padding:7px 18px;border-radius:18px;font-weight:700;font-size:.82rem;transition:background .2s;border:none}
.btn-apply:hover{background:#ffe0cc}
.notice-card{background:#fff}
.notice-card>h4{background:#ff6600;color:#fff;padding:14px 18px;font-size:1.17rem;display:flex;align-items:center;gap:7px}
.notice-scroll{height:247px;overflow:hidden}
.notice-items{animation:noticeScroll 16s linear infinite;padding:8px 18px}
.notice-items:hover{animation-play-state:paused}
.notice-items p{padding:11px 0;border-bottom:1px dashed #eee;font-size:1.04rem;color:#444;line-height:1.5}
@keyframes noticeScroll{0%{transform:translateY(0)}100%{transform:translateY(-50%)}}

/* ===== INNER PAGE LAYOUT ===== */
.inner-section{max-width:1800px;margin:0 auto;padding:30px 10px 50px}
.inner-grid{display:grid;grid-template-columns:1fr 260px;gap:26px}
.inner-main{min-width:0}
.inner-sidebar{display:flex;flex-direction:column;gap:20px}

/* Sub tabs */
.sub-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.sub-tab{padding:10px 22px;background:#f0f0f0;border:none;border-radius:6px;font-size:.95rem;font-weight:600;color:#444;transition:background .2s,color .2s}
.sub-tab:hover{background:#ffe0cc;color:#ff6600}
.sub-tab.active{background:#ff6600;color:#fff}

/* Sub sections */
.sub-section{display:none}
.sub-section.active{display:block;animation:fadeSlideIn .35s ease}
@keyframes fadeSlideIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
/* Body copy sitting directly in a sub-section had no spacing at all, so
   consecutive paragraphs ran together into one block (About Us). */
.sub-section>p{margin-bottom:12px;line-height:1.78;color:#444;font-size:.92rem}
.sub-section>p:last-child{margin-bottom:0}
.section-title{font-size:1.65rem;font-weight:800;color:#cc0000;margin-bottom:26px;padding-bottom:12px;border-bottom:3px solid #ff6600}

/* Sidebar cards */
.sidebar-nav-card,.sidebar-notice-card,.sidebar-apply-card{background:#fff;border-radius:10px;overflow:hidden;box-shadow:0 3px 12px rgba(0,0,0,.08)}
.sidebar-nav-card h4,.sidebar-notice-card h4{background:#ff6600;color:#fff;padding:11px 16px;font-size:.9rem;display:flex;align-items:center;gap:7px}
.sidebar-nav-card ul{padding:10px 0}
.sidebar-nav-card ul li a{display:flex;align-items:center;gap:8px;padding:9px 16px;font-size:.85rem;color:#444;transition:background .15s,color .15s}
.sidebar-nav-card ul li a:hover{background:#fff3ea;color:#ff6600}
.sidebar-nav-card ul li a i{color:#ff6600;font-size:.7rem}
.sidebar-notice-card .notice-scroll{height:208px;overflow:hidden}
.sidebar-notice-card .notice-items{animation:noticeScroll 14s linear infinite;padding:8px 16px}
.sidebar-notice-card .notice-items p{padding:10px 0;border-bottom:1px dashed #eee;font-size:1.01rem;color:#444;line-height:1.5}
.sidebar-apply-card{padding:18px;text-align:center}
.sidebar-apply-card h4{font-size:1rem;font-weight:700;color:#ff6600;margin-bottom:8px;padding:0;background:none}
.sidebar-apply-card p{font-size:.83rem;color:#555;margin-bottom:12px;line-height:1.6}
.sidebar-apply-card .deadline{font-size:1.2rem;font-weight:800;color:#cc0000}
.sidebar-apply-card .btn-apply{display:inline-block}

/* ===== ABOUT PAGE ===== */
.about-info-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:22px}
.info-card{background:#fff3ea;border-radius:10px;padding:16px 12px;text-align:center;border-top:3px solid #ff6600}
.info-card i{font-size:1.5rem;color:#ff6600;margin-bottom:8px;display:block}
.info-card h4{font-size:.82rem;color:#888;margin-bottom:4px;font-weight:600}
.info-card p{font-size:.9rem;font-weight:700;color:#333}
/* Vision */
.vm-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:24px}
.vm-card{padding:22px;border-radius:10px;background:#f9f9f9;border-left:4px solid #ff6600}
.vm-card.mission{border-left-color:#cc0000}
.vm-card i{font-size:1.8rem;color:#ff6600;margin-bottom:10px;display:block}
.vm-card.mission i{color:#cc0000}
.vm-card h4{font-size:1rem;font-weight:700;margin-bottom:10px;color:#222}
.vm-card p{font-size:.88rem;color:#555;line-height:1.7}
.vm-card ul{list-style:none;padding:0}
.vm-card ul li{display:flex;align-items:flex-start;gap:8px;padding:5px 0;font-size:.87rem;color:#555}
.vm-card ul li i{color:#ff6600;margin-top:2px;flex-shrink:0}
.core-values h4{font-size:1rem;font-weight:700;color:#333;margin-bottom:14px}
.values-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.value-item{background:#fff;border:1px solid #eee;border-radius:8px;padding:14px 8px;text-align:center;transition:background .2s,border-color .2s}
.value-item:hover{background:#fff3ea;border-color:#ff6600}
.value-item i{font-size:1.3rem;color:#ff6600;margin-bottom:6px;display:block}
.value-item span{font-size:.76rem;font-weight:600;color:#444}
/* Admin */
.admin-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.admin-card{background:#f9f9f9;border-radius:10px;padding:22px;text-align:center;border-bottom:3px solid #ff6600;transition:transform .3s}
.admin-card:hover{transform:translateY(-4px)}
.admin-avatar{width:60px;height:60px;background:linear-gradient(135deg,#ff6600,#cc0000);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 12px}
.admin-avatar i{color:#fff;font-size:1.5rem}
.admin-card h4{font-size:.95rem;font-weight:700;color:#222;margin-bottom:4px}
.admin-role{font-size:.83rem;color:#ff6600;font-weight:600;margin-bottom:6px}
.admin-card>p{font-size:.8rem;color:#666;line-height:1.5}

/* Sub-tab trigger button inside page content */
.sub-tab-trigger{background:#ff6600;color:#fff;border:none;padding:9px 22px;border-radius:24px;font-weight:700;font-size:.88rem;margin-top:8px;transition:background .2s,transform .2s;cursor:pointer}
.sub-tab-trigger:hover{background:#cc5200;transform:translateY(-2px)}
.courses-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.course-card{background:#fff;border-radius:12px;padding:24px 18px;text-align:center;box-shadow:0 3px 14px rgba(0,0,0,.07);transition:transform .3s,box-shadow .3s;border-top:4px solid #ff6600}
.course-card:hover{transform:translateY(-5px);box-shadow:0 10px 28px rgba(0,0,0,.12)}
.course-icon{width:54px;height:54px;background:linear-gradient(135deg,#ff6600,#cc0000);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 14px}
.course-icon i{color:#fff;font-size:1.4rem}
.course-card h4{font-size:.95rem;font-weight:700;color:#222;margin-bottom:8px}
.course-card p{font-size:.83rem;color:#666;line-height:1.6;margin-bottom:10px}
.course-meta{display:flex;justify-content:center;gap:14px;flex-wrap:wrap}
.course-meta span{font-size:.76rem;color:#ff6600;font-weight:600;display:flex;align-items:center;gap:4px}

/* ===== FACILITIES PAGE ===== */
.facilities-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.facility-card{background:#fff;border-radius:12px;padding:26px 18px;text-align:center;transition:transform .3s,background .3s;border:1px solid #eee}
.facility-card:hover{transform:translateY(-5px);background:#fff3ea}
.facility-card i{font-size:2rem;color:#ff6600;margin-bottom:12px;display:block}
.facility-card h3,.facility-card h4{font-size:.95rem;font-weight:700;margin-bottom:7px;color:#222}
.facility-card p{font-size:.83rem;color:#666;line-height:1.6}
.facility-detail{padding:20px;background:#f9f9f9;border-radius:10px;text-align:center}
.facility-detail p{font-size:.92rem;color:#444;line-height:1.75;margin-bottom:16px}
.facility-list{list-style:none;text-align:left;display:inline-block}
.facility-list li{display:flex;align-items:center;gap:8px;padding:6px 0;font-size:.88rem;color:#444}
.facility-list li i{color:#28a745;font-size:.75rem}

/* ===== ADMISSION PAGE ===== */
.admission-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:28px}
.step-card{background:#fff;border-radius:12px;padding:24px 16px;text-align:center;box-shadow:0 3px 14px rgba(0,0,0,.07)}
.step-num{width:44px;height:44px;background:linear-gradient(135deg,#ff6600,#cc0000);color:#fff;border-radius:50%;font-size:1.2rem;font-weight:800;display:flex;align-items:center;justify-content:center;margin:0 auto 12px}
.step-card h3,.step-card h4{font-size:.95rem;font-weight:700;margin-bottom:7px;color:#222}
.step-card p{font-size:.83rem;color:#666;line-height:1.6}
.eligibility-box{background:#fff3ea;border-left:4px solid #ff6600;padding:18px 20px;border-radius:0 10px 10px 0;margin:20px 0}
.eligibility-box h3,.eligibility-box h4{font-size:1rem;font-weight:700;color:#ff6600;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.eligibility-box ul{list-style:none}
.eligibility-box ul li{display:flex;align-items:flex-start;gap:8px;padding:5px 0;font-size:.87rem;color:#444}
.eligibility-box ul li i{color:#ff6600;margin-top:2px;flex-shrink:0}
/* Registration form */
.registration-section{background:#fff;border:1px solid #ddd;border-radius:10px;overflow:hidden;box-shadow:0 3px 16px rgba(0,0,0,.06)}
.reg-header{background:#ff6600;color:#fff;padding:12px 20px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px}
.reg-header h3{font-size:.95rem;font-weight:700}
.reg-header>span{font-family:var(--font-hi);font-size:.85rem;font-weight:600}
.reg-form{padding:20px}

/* Section headings inside the form. The Hindi is the heading; the English
   in <small> is the gloss, kept on the same line so the two read as one
   label rather than as two separate instructions. */
.form-section-title{font-family:var(--font-hi);font-size:.95rem;font-weight:700;color:#cc0000;margin:22px 0 12px;padding-bottom:6px;border-bottom:2px solid #ffd9bf}
.form-section-title:first-child{margin-top:0}
.form-section-title small{font-family:'Segoe UI',Arial,sans-serif;font-weight:600;color:#777;font-size:.8rem;margin-left:6px}

.form-row{margin-bottom:14px}
.form-row label{display:block;font-size:.84rem;font-weight:600;color:#444;margin-bottom:5px;font-family:var(--font-hi)}
.form-row label span{color:#cc0000}
/* Overrides `.form-row small` below, which is display:block for the hint
   text under an input. Inside a label the English gloss belongs on the
   same line as the Hindi. */
.form-row label small{display:inline;font-family:'Segoe UI',Arial,sans-serif;font-weight:500;color:#888;font-size:.76rem;margin:0}
.form-row input,.form-row select,.form-row textarea{width:100%;padding:11px 13px;border:1px solid #ccc;border-radius:6px;font-size:.85rem;transition:border-color .2s,box-shadow .2s;background:#fff;font-family:inherit;min-height:44px}
.form-row input:focus,.form-row select:focus,.form-row textarea:focus{border-color:#ff6600;box-shadow:0 0 0 3px rgba(255,102,0,.1);outline:none}
.form-row textarea{min-height:64px;resize:vertical;line-height:1.5}
.form-row input[readonly]{background:#f4f4f4;color:#555;cursor:default}
.form-row small{font-size:.72rem;color:#888;margin-top:3px;display:block}

/* "Same as permanent address". Same overrides as .consent-label and for the
   same reason: `.form-row input` would otherwise stretch the checkbox into
   a full-width 44px slab. */
.inline-check{display:flex!important;align-items:center;gap:8px;font-weight:400!important;font-size:.78rem!important;color:#666!important;font-family:'Segoe UI',Arial,sans-serif!important;margin-bottom:6px!important;cursor:pointer}
.inline-check input[type=checkbox]{width:auto!important;min-height:0!important;min-width:16px;height:16px;margin:0;padding:0;flex:0 0 auto;accent-color:#ff6600}

.two-col{display:grid;grid-template-columns:1fr 1fr;gap:14px}

/* ===== ACADEMIC RECORDS TABLE =====
   Nine columns do not fit a phone, so the wrapper scrolls horizontally
   rather than the page doing it. Below 700px the table restacks into three
   labelled cards — see the media query immediately below. */
.academic-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-bottom:16px;border:1px solid #e3e3e3;border-radius:8px}
.academic-table{width:100%;min-width:900px;border-collapse:collapse;font-size:.78rem;background:#fff}
.academic-table th,.academic-table td{border:1px solid #e3e3e3;padding:6px;vertical-align:middle;text-align:left}
.academic-table thead th{background:#fff8f3;font-family:var(--font-hi);font-weight:700;color:#444;font-size:.76rem;line-height:1.3;text-align:center}
.academic-table thead th small{display:block;font-family:'Segoe UI',Arial,sans-serif;font-weight:500;color:#999;font-size:.66rem;margin-top:1px}
.academic-table tbody th{background:#fafafa;font-family:var(--font-hi);font-weight:700;color:#cc0000;white-space:nowrap;font-size:.8rem}
.academic-table tbody th small{display:block;font-family:'Segoe UI',Arial,sans-serif;font-weight:500;color:#999;font-size:.66rem}
.academic-table input{width:100%;padding:8px 9px;border:1px solid #ccc;border-radius:5px;font-size:.78rem;font-family:inherit;min-height:38px;background:#fff}
.academic-table input:focus{border-color:#ff6600;box-shadow:0 0 0 3px rgba(255,102,0,.1);outline:none}
/* The percentage is computed by js/form-handler.js and recomputed by
   Postgres — typing into it would achieve nothing, so it does not accept
   typing. */
.academic-table input[readonly]{background:#f4f4f4;color:#333;font-weight:700;cursor:default}

/* Phones: a 900px-wide table behind a scrollbar means eight of the nine
   fields are off-screen while you fill in the ninth, and no applicant is
   going to notice the ones they cannot see. Restacked into one card per
   qualification instead, each field labelled from the `data-label` written
   on the cell in index.html — which is why those attributes exist and why
   they must be kept in step with the <th> text above them. */
@media(max-width:700px){
  .academic-scroll{overflow-x:visible;border:0;border-radius:0}
  .academic-table{min-width:0;display:block;font-size:.82rem}
  .academic-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .academic-table tbody,.academic-table tr{display:block}
  .academic-table tr{border:1px solid #e3e3e3;border-radius:8px;margin-bottom:14px;overflow:hidden}
  .academic-table tbody th{display:block;border:0;border-bottom:1px solid #e3e3e3;padding:9px 12px;font-size:.9rem}
  .academic-table tbody th small{display:inline;margin-left:6px}
  .academic-table td{display:block;border:0;padding:8px 12px}
  .academic-table td::before{content:attr(data-label);display:block;font-size:.72rem;font-weight:600;color:#777;margin-bottom:4px}
  .academic-table input{min-height:44px;font-size:.85rem}
}

.form-note{font-size:.8rem;color:#555;padding:8px 0;font-style:italic}
.form-actions{display:flex;justify-content:space-between;margin-top:14px}
.btn-clear{background:#ff6600;color:#fff;border:none;padding:12px 26px;border-radius:6px;font-size:.88rem;font-weight:600;min-height:44px}
.btn-clear:hover{background:#cc5200}
.btn-submit{background:#cc0000;color:#fff;border:none;padding:12px 28px;border-radius:6px;font-size:.88rem;font-weight:600;display:inline-flex;align-items:center;gap:7px;min-height:44px}
.btn-submit:hover{background:#990000}
.btn-submit:disabled{opacity:.65;cursor:not-allowed}
.btn-submit:disabled:hover{background:#cc0000}

/* ===== REGISTRATION: CONSENT + STATUS ===== */
/* The checkbox needs every one of these overrides. `.form-row input` above
   sets width:100% and min-height:44px, which turns a checkbox into a
   full-width 44px-tall grey slab. */
.consent-row{background:#fff8f3;border:1px solid #ffd9bf;border-radius:6px;padding:12px 14px;margin-bottom:16px}
.consent-label{display:flex!important;align-items:flex-start;gap:10px;cursor:pointer;font-family:inherit!important;font-weight:400!important;font-size:.83rem!important;color:#333!important;margin-bottom:0!important;line-height:1.5}
.consent-label input[type=checkbox]{width:auto;min-height:0;min-width:18px;height:18px;margin:2px 0 0;padding:0;flex:0 0 auto;accent-color:#ff6600}
.consent-label>span{flex:1}
.consent-label>span span{color:#cc0000;font-weight:700}

/* Status panel written by js/form-handler.js. Hidden until it has something
   to say — the element is created up front so the layout does not jump. */
.reg-status{display:none;margin:0 20px 4px;padding:13px 15px;border-radius:6px;font-size:.85rem;line-height:1.55}
.reg-status p{margin:7px 0 0}
.reg-status code{font-family:'Courier New',monospace;font-weight:700;font-size:.95em;background:rgba(0,0,0,.06);padding:2px 6px;border-radius:3px}
.reg-status ul{margin:7px 0 0;padding-left:20px}
.reg-status li{margin:3px 0}
.reg-status-info{background:#eef3fb;border:1px solid #c9d9f2;color:#1d3f75}
.reg-status-success{background:#eaf7ec;border:1px solid #bfe3c6;color:#17612a}
.reg-status-error{background:#fdecea;border:1px solid #f5c2bd;color:#8a1c10}
.btn-link{background:none;border:0;padding:0;color:#1d4ed8;font:inherit;text-decoration:underline;cursor:pointer}

/* Turnstile renders a fixed-size iframe. Left-align it rather than letting
   it inherit the full-width input styling around it. */
.cf-turnstile{margin:4px 0}

/* ===== NOTICE BOARD PAGE ===== */
/* auto-fit lets the track count follow the available width instead of forcing
   two fixed 450px columns into a column that is often only ~790px wide. */
.notice-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:24px;align-items:stretch}
.notice-item{background:#fff;border-radius:14px;padding:0;box-shadow:0 5px 24px rgba(0,0,0,.10);border:1px solid rgba(0,0,0,.06);overflow:hidden;display:flex;flex-direction:column;position:relative;transition:transform .28s ease,box-shadow .28s ease;min-width:0}
.notice-item:hover{transform:translateY(-6px);box-shadow:0 12px 36px rgba(0,0,0,.16)}
.notice-item.new .notice-body h4{background:linear-gradient(135deg,#cc0000 0%,#a80000 100%)}
.notice-badge{position:absolute;top:13px;right:13px;background:#cc0000;color:#fff;font-size:.78rem;font-weight:700;padding:3px 11px;border-radius:14px;white-space:nowrap;z-index:2;box-shadow:0 2px 8px rgba(204,0,0,.38);letter-spacing:.4px}
.notice-body{flex:1;display:flex;flex-direction:column}
.notice-body h4{background:linear-gradient(135deg,#ff6600 0%,#c94400 100%);color:#fff;padding:20px 22px;padding-right:72px;font-size:1.18rem;font-weight:700;line-height:1.35;margin:0}
.notice-body p{padding:18px 22px;flex:1;font-size:1.05rem;color:#444;line-height:1.72;margin:0}
.notice-date{padding:12px 22px;border-top:1px solid #f0eee9;background:#fdf8f4;font-size:.95rem;color:#ff6600;display:flex;align-items:center;gap:7px;font-weight:600}

/* ===== FACULTY PAGE ===== */
.faculty-full-grid{max-width:1760px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding:0 10px 50px}
.faculty-card{background:#fff;border-radius:12px;padding:26px 16px;text-align:center;box-shadow:0 3px 14px rgba(0,0,0,.07);transition:transform .3s;border-bottom:3px solid #ff6600}
.faculty-card:hover{transform:translateY(-5px)}
.faculty-avatar{width:66px;height:66px;background:linear-gradient(135deg,#ff6600,#cc0000);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 14px}
.faculty-avatar i{color:#fff;font-size:1.7rem}
.faculty-card h3,.faculty-card h4{font-size:.92rem;font-weight:700;color:#222;margin-bottom:5px}
.faculty-card p{font-size:.8rem;color:#ff6600;font-weight:600;margin-bottom:5px}
.faculty-card span{font-size:.76rem;color:#888;display:block;margin-bottom:8px}
.faculty-dept{display:inline-block;background:#fff3ea;color:#ff6600;font-size:.72rem;font-weight:700;padding:2px 10px;border-radius:10px;border:1px solid #ff6600}

/* ===== CONTACT PAGE ===== */
.contact-page-section{max-width:1800px;margin:0 auto;padding:10px 10px 50px}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;padding:0 0 30px}
.contact-info-block{display:flex;flex-direction:column}
.contact-item{display:flex;gap:14px;align-items:flex-start;margin-bottom:18px}
.contact-item i{font-size:1.2rem;color:#ff6600;margin-top:2px;flex-shrink:0;width:20px;text-align:center}
.contact-item h3,.contact-item h4{font-size:.88rem;font-weight:700;margin-bottom:3px;color:#ff6600}
.contact-item p{font-size:.84rem;line-height:1.6;color:#444}
.social-links{display:flex;gap:10px;margin-top:8px}
.social-links a{width:36px;height:36px;background:#ff6600;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.9rem;transition:background .2s,transform .2s}
.social-links a:hover{background:#cc5200;transform:translateY(-2px)}
.contact-form{display:flex;flex-direction:column;gap:12px;background:#fff;padding:24px;border-radius:12px;box-shadow:0 3px 16px rgba(0,0,0,.08)}
.contact-form input,.contact-form textarea{padding:10px 13px;border:1px solid #ddd;background:#f9f9f9;color:#333;border-radius:8px;font-size:.86rem;transition:border-color .2s;font-family:inherit}
.contact-form input:focus,.contact-form textarea:focus{border-color:#ff6600;outline:none;background:#fff}
.map-box{border-radius:12px;overflow:hidden;box-shadow:0 3px 14px rgba(0,0,0,.1);margin-top:10px}

/* ===== FOOTER =====
   Two bands: a four-column information block (footer-top) and the thin
   copyright strip that was here before (footer-bottom). The dark band is
   the last thing on every page, so it doubles as the site map — hence the
   real <a href> on every entry rather than JS-only handlers. */
.footer{background:#111;color:#ccc;font-size:.8rem}

.footer-top{max-width:1800px;margin:0 auto;padding:38px 20px 30px;
  display:grid;grid-template-columns:1.5fr 1fr 1.15fr 1.25fr;gap:34px}
.footer-col{min-width:0}

/* Column headings are h2 because the footer is not inside any page section —
   its own heading level would otherwise jump straight from the page h1. */
.footer-head{font-size:.92rem;font-weight:800;color:#fff;letter-spacing:.4px;
  margin-bottom:15px;padding-bottom:9px;position:relative;text-transform:uppercase}
.footer-head::after{content:'';position:absolute;left:0;bottom:0;width:38px;height:2px;
  background:linear-gradient(90deg,#ff6600,rgba(255,102,0,0))}

.footer-brand-hi{font-size:.98rem;font-weight:700;color:#fff;line-height:1.5;margin-bottom:5px}
.footer-brand-en{font-size:.82rem;font-weight:600;color:#ff8c33;line-height:1.45;margin-bottom:11px}
.footer-blurb{line-height:1.65;color:#a9a9a9;margin-bottom:14px}

.footer-badges{list-style:none;display:flex;flex-direction:column;gap:7px;margin-bottom:16px}
.footer-badges li{display:flex;align-items:flex-start;gap:9px;line-height:1.4;color:#bdbdbd;font-size:.76rem}
.footer-badges i{color:#ff6600;margin-top:2px;flex:0 0 auto;width:14px;text-align:center}

.footer-social{display:flex;gap:9px}
.footer-social a{width:33px;height:33px;border-radius:50%;background:#1e1e1e;
  border:1px solid #2e2e2e;color:#ccc;display:flex;align-items:center;justify-content:center;
  font-size:.82rem;transition:background .25s,color .25s,transform .25s,border-color .25s}
.footer-social a:hover,.footer-social a:focus-visible{background:#ff6600;border-color:#ff6600;
  color:#fff;transform:translateY(-2px)}

.footer-links ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.footer-links a{color:#bdbdbd;text-decoration:none;display:inline-block;
  transition:color .22s,transform .22s}
.footer-links a::before{content:'\f105';font-family:'Font Awesome 6 Free';font-weight:900;
  color:#ff6600;margin-right:8px;font-size:.72rem;opacity:.75}
.footer-links a:hover,.footer-links a:focus-visible{color:#ff8c33;transform:translateX(3px)}

.footer-deadline{margin-top:16px;padding:9px 11px;border-radius:7px;font-size:.76rem;
  line-height:1.45;background:rgba(255,102,0,.12);border:1px solid rgba(255,102,0,.3);color:#e9c9b3}
.footer-deadline i{color:#ff8c33;margin-right:6px}
.footer-deadline strong{color:#fff}

.footer-contact-list{list-style:none;display:flex;flex-direction:column;gap:13px}
.footer-contact-list li{display:flex;align-items:flex-start;gap:11px;line-height:1.55}
.footer-contact-list i{color:#ff6600;flex:0 0 auto;width:15px;text-align:center;margin-top:3px}
.footer-contact-list address{font-style:normal;color:#bdbdbd}
.footer-contact-list a{color:#bdbdbd;text-decoration:none;transition:color .22s}
.footer-contact-list a:hover,.footer-contact-list a:focus-visible{color:#ff8c33}

.footer-cta-row{display:flex;flex-wrap:wrap;gap:9px;margin-top:18px}
.footer-cta{display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border-radius:7px;
  background:#ff6600;color:#fff;font-weight:700;font-size:.78rem;text-decoration:none;
  border:1px solid #ff6600;transition:background .25s,transform .25s,box-shadow .25s}
.footer-cta:hover,.footer-cta:focus-visible{background:#e25a00;transform:translateY(-2px);
  box-shadow:0 5px 15px rgba(255,102,0,.32)}
.footer-cta-alt{background:transparent;color:#ff8c33}
.footer-cta-alt:hover,.footer-cta-alt:focus-visible{background:rgba(255,102,0,.15);color:#fff}

.footer-bottom{border-top:1px solid #262626;padding:13px 20px}
.footer-inner{max-width:1800px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px}
.footer-inner strong{color:#ff6600}
.footer-meta{display:flex;align-items:center;flex-wrap:wrap;gap:7px;color:#9a9a9a}
.footer-meta a{color:#bdbdbd;text-decoration:none;transition:color .22s}
.footer-meta a:hover,.footer-meta a:focus-visible{color:#ff8c33;text-decoration:underline}

@media(max-width:1024px){
  .footer-top{grid-template-columns:1fr 1fr;gap:28px;padding:30px 16px 24px}
}
@media(max-width:600px){
  .footer-top{grid-template-columns:1fr;gap:26px}
  .footer-head{margin-bottom:12px}
  .footer-inner{justify-content:center;text-align:center}
  .footer-meta{justify-content:center}
}

/* ===== BACK TO TOP ===== */
.back-to-top{position:fixed;bottom:22px;right:22px;background:#ff6600;color:#fff;border:none;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.95rem;opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;z-index:999;box-shadow:0 4px 12px rgba(255,102,0,.4)}
.back-to-top.visible{opacity:1;pointer-events:auto}
.back-to-top:hover{transform:translateY(-3px)}

/* ===== FADE-IN ===== */
.fade-in{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
.fade-in.visible{opacity:1;transform:translateY(0)}

/* ===== RESPONSIVE ===== */
@media(max-width:1024px){
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .courses-grid{grid-template-columns:repeat(2,1fr)}
  .facilities-grid{grid-template-columns:repeat(2,1fr)}
  .faculty-full-grid{grid-template-columns:repeat(2,1fr)}
  .about-info-cards{grid-template-columns:repeat(2,1fr)}
  .vm-grid{grid-template-columns:1fr}
  .values-grid{grid-template-columns:repeat(3,1fr)}
  .admin-grid{grid-template-columns:repeat(2,1fr)}
  .content-grid{grid-template-columns:1fr}
  .inner-grid{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .admission-steps{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
  html{font-size:100%}
  /* Topbar */
  .topbar{padding:5px 10px;font-size:.76rem}
  .topbar-left span:last-child{display:none}
  /* Header */
  .header-wrap{padding:6px 12px 8px}
  .header-inner{flex-direction:column;align-items:center;text-align:center;gap:10px}
  .header-contact{text-align:center;min-width:0;width:100%}
  .logo-block{flex-direction:column;align-items:center}
  .uni-name-hi{font-size:1.25rem}
  .uni-name-hi2{font-size:1.1rem}
  /* Nav */
  .hamburger{display:flex}
  .nav-menu{display:none;flex-direction:column;background:#cc5200;width:100%;justify-content:flex-start}
  .nav-menu.open{display:flex}
  .nav-link{padding:13px 16px;font-size:.9rem;min-height:44px}
  .dropdown-menu{position:static;border-top:none;border-left:3px solid rgba(255,255,255,.3);border-radius:0;box-shadow:none;background:#b34700;min-width:0}
  .dropdown-menu li a{color:#fff;padding:12px 16px;min-height:44px;display:flex;align-items:center}
  /* Hero */
  .hero{height:280px}
  .slide-title{font-size:1.4rem}
  .btn-hero{padding:12px 24px;min-height:44px}
  /* Grids */
  .courses-grid,.facilities-grid{grid-template-columns:1fr}
  .faculty-full-grid{grid-template-columns:repeat(2,1fr)}
  .admission-steps{grid-template-columns:1fr 1fr}
  .about-info-cards{grid-template-columns:repeat(2,1fr)}
  .values-grid{grid-template-columns:repeat(2,1fr)}
  .admin-grid{grid-template-columns:1fr}
  /* Padding */
  .inner-section{padding:20px 12px 36px}
  .content-grid{padding:0 12px 24px}
  .contact-page-section{padding:10px 12px 36px}
  .stats-grid{padding:0 12px}
  /* Loader */
  .loader-caption{font-size:.6rem;padding:0 16px}
  .loader-brand{font-size:1.5rem;letter-spacing:3px}
  /* Misc */
  .section-header{padding:28px 12px 18px}
  .section-title{font-size:1.3rem}
  .notice-label{padding:4px 10px;font-size:.88rem}
  .marquee-content{font-size:.88rem}
  .footer{font-size:.78rem}
  .footer-bottom{padding:12px 14px}
  .back-to-top{bottom:16px;right:16px}
}
@media(max-width:480px){
  html{font-size:100%}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .admission-steps{grid-template-columns:1fr}
  .faculty-full-grid{grid-template-columns:1fr}
  .form-actions{flex-direction:column;gap:10px}
  .btn-clear,.btn-submit{width:100%;justify-content:center}
  .two-col{grid-template-columns:1fr}
  .values-grid{grid-template-columns:1fr}
  .about-info-cards{grid-template-columns:1fr}
  /* Notice board */
  .notice-list{gap:14px}
  .notice-body h4{font-size:1rem;padding:14px 16px;padding-right:60px}
  .notice-body p{padding:12px 16px;font-size:.9rem}
  .notice-date{padding:10px 16px;font-size:.82rem}
  .notice-badge{top:10px;right:10px;font-size:.7rem}
  /* Padding */
  .inner-section{padding:16px 10px 28px}
  .content-grid{padding:0 10px 20px}
  /* Hero */
  .hero{height:220px}
  .slide-title{font-size:1.15rem}
  .slide-subtitle{font-size:.82rem}
  /* Loader */
  .loader-brand{font-size:1.2rem;letter-spacing:2px}
  /* Misc */
  .marquee-content{font-size:.82rem}
  .notice-label{font-size:.8rem;padding:4px 8px}
  .header-contact{font-size:.72rem}
  .reg-form{padding:14px}
}

/* =========================================================================
   HOME PAGE CONTENT SECTIONS
   Programme, why-choose-us, admission steps, facilities, FAQ and visit
   blocks added to the home page. These reuse the existing .facilities-grid,
   .admission-steps, .eligibility-box, .contact-item and .map-box components
   wherever possible, so they inherit the responsive behaviour already tested
   at every breakpoint; only the genuinely new layout is defined here.
   ========================================================================= */
.home-section{background:#fff}
.section-alt{background:#faf6f2}
/* Same 1800px / 10px gutter as .inner-section so every band lines up with
   the header, nav and footer above it. */
.home-wrap{max-width:1800px;margin:0 auto;padding:0 10px 46px}
.home-wrap-narrow{max-width:980px}
.home-cta-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:20px}
.btn-outline{display:inline-block;background:transparent;color:#cc0000;padding:8px 21px;border:2px solid #ff6600;border-radius:24px;font-weight:700;font-size:.88rem;transition:background .2s,color .2s,transform .2s}
.btn-outline:hover{background:#ff6600;color:#fff;transform:translateY(-2px)}

/* ----- Flagship programme ----- */
.flagship{display:grid;grid-template-columns:1fr 320px;gap:24px;align-items:start}
.flagship-main{min-width:0;background:#fff;border:1px solid #eee;border-radius:12px;padding:28px}
.flagship-main h3{font-size:1.5rem;font-weight:800;color:#cc0000;line-height:1.3;margin-bottom:14px}
.flagship-alt{display:block;font-size:.88rem;font-weight:600;color:#777;margin-top:4px}
.flagship-main p{margin-bottom:12px;line-height:1.78;color:#444;font-size:.92rem}
.flagship-main .facility-list{margin:6px 0 4px}
.flagship-facts{background:linear-gradient(160deg,#ff6600,#cc0000);color:#fff;border-radius:12px;padding:22px;box-shadow:0 4px 16px rgba(204,0,0,.22);min-width:0}
.flagship-facts h4{font-size:1rem;font-weight:800;margin-bottom:14px;padding-bottom:9px;border-bottom:1px solid rgba(255,255,255,.35)}
.flagship-facts dl{margin:0}
.flagship-facts dl>div{display:flex;justify-content:space-between;gap:14px;padding:8px 0;border-bottom:1px dashed rgba(255,255,255,.28)}
.flagship-facts dt{font-size:.8rem;opacity:.88;flex-shrink:0}
.flagship-facts dd{font-size:.86rem;font-weight:700;text-align:right;min-width:0}
.flagship-facts .fact-urgent{background:#fff;color:#cc0000;padding:1px 9px;border-radius:11px}
.flagship-facts .btn-apply{margin-top:16px}

/* ----- FAQ accordion -----
   <details> needs no JavaScript, so this keeps working for the no-JS
   visitors the .nojs block caters for. The default disclosure triangle is
   replaced with a chevron that rotates, which needs list-style:none plus the
   old WebKit pseudo-element to be hidden in both engines. */
.faq-list{display:flex;flex-direction:column;gap:12px}
.faq-item{background:#fff;border:1px solid #eee;border-left:4px solid #ff6600;border-radius:0 10px 10px 0;overflow:hidden}
.faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 20px;cursor:pointer;list-style:none;transition:background .2s}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{background:#fff3ea}
.faq-item summary:focus-visible{outline:3px solid #ff6600;outline-offset:-3px}
.faq-item summary h3{font-size:1rem;font-weight:700;color:#222;line-height:1.5}
.faq-item summary::after{content:'\f078';font-family:'Font Awesome 6 Free';font-weight:900;font-size:.72rem;color:#ff6600;flex-shrink:0;transition:transform .25s}
.faq-item[open] summary{background:#fff3ea}
.faq-item[open] summary::after{transform:rotate(180deg)}
.faq-item>p{padding:2px 20px 18px;font-size:.9rem;line-height:1.8;color:#444}
.faq-item>p a{color:#cc0000;font-weight:700;text-decoration:underline}

/* ----- Visit us ----- */
.visit-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start}
.visit-details{min-width:0}
.visit-details .contact-item{margin-bottom:20px}
.visit-details .contact-item p{font-size:.88rem}
.visit-details .contact-item a{color:#cc0000;font-weight:600}
.visit-details .contact-item a:hover{text-decoration:underline}
.visit-grid .map-box{margin-top:0}

@media(max-width:1024px){
  .flagship{grid-template-columns:1fr}
  .visit-grid{grid-template-columns:1fr}
}
@media(max-width:768px){
  .home-wrap{padding-bottom:32px}
  .flagship-main{padding:20px}
  .flagship-main h3{font-size:1.25rem}
  .faq-item summary{padding:14px 16px}
  .faq-item summary h3{font-size:.94rem}
  .faq-item>p{padding:2px 16px 16px}
}
@media(max-width:480px){
  .home-cta-row{flex-direction:column;align-items:stretch}
  .home-cta-row>a{text-align:center}
  /* Long values like the eligibility line have nowhere to go beside a label
     on a narrow screen, so stack the term above its value. */
  .flagship-facts dl>div{flex-direction:column;gap:2px}
  .flagship-facts dd{text-align:left}
  .flagship-facts .fact-urgent{align-self:flex-start}
}

/* ===== NO-JAVASCRIPT FALLBACK =====
   Navigation, tabs and the loader are all script-driven. Without this block a
   visitor (or a crawler) with JS unavailable sees nothing but the splash
   overlay. Applied via <noscript> in the <head>. */
.nojs .page-loader{display:none}
.nojs .page,
.nojs .sub-section{display:block;opacity:1;transform:none}
.nojs .fade-in{opacity:1;transform:none}
.nojs .sub-tabs,
.nojs .slider-btn,
.nojs .slider-dots,
.nojs .hamburger,
.nojs .back-to-top{display:none}
.nojs .slide{position:relative;opacity:1}
.nojs .hero{height:auto}
.nojs .notice-scroll{height:auto;overflow:visible}
.nojs .notice-items{animation:none}

/* ===== REDUCED MOTION =====
   The marquee, notice scrollers, slider and shimmer all loop forever, which is
   a problem for vestibular disorders. Honour the OS-level preference. */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .marquee-content,.notice-items,.navbar,.loader-brand{animation:none!important}
  .notice-scroll{height:auto;overflow:visible}
  .marquee-content{white-space:normal}
}