/*
Theme Name: CBIT Kolar
Theme URI: https://cbitkolar.edu.in
Author: Batlahalli Prashanth Reddy
Description: Lightweight custom theme for C Byregowda Institute of Technology (CBIT Kolar). Built for speed — no page-builder dependency, no bundled UI framework, native WP APIs only.
Version: 1.0.0
Requires PHP: 7.4
Text Domain: cbit-kolar
*/

/* ---------------------------------------------------------
   1. Reset / base — deliberately minimal, no CSS framework
--------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 16px;
	line-height: 1.6;
	color: #222;
	background: #fff;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; }

.container {
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 32px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
}

/* ---------------------------------------------------------
   2. Layout skeleton — filled in as header/footer/index land
--------------------------------------------------------- */
.site-header, .site-footer { width: 100%; }

.section { padding: 64px 0; }
.section-alt { background: #f6f7fb; }

.section-title {
	font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 30px;
	color: var(--cbit-navy, #0d1b3d); margin: 0 0 12px; letter-spacing: -.01em;
}
.section-title::after {
	content: ""; display: block; width: 56px; height: 4px; margin-top: 14px;
	background: var(--cbit-red, #e0384f); border-radius: 2px;
}

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

.card {
	border: 1px solid #eceef4;
	border-radius: 10px;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 2px 10px rgba(13,27,61,.05);
	transition: transform .18s ease, box-shadow .18s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(13,27,61,.12); }
.card img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.card-body { padding: 18px; }
.card-body h3 { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; color: var(--cbit-navy, #0d1b3d); margin: 0 0 4px; font-size: 17px; }
.card-body p { margin: 0; font-size: 13px; color: #7a8296; }

/* ---------------------------------------------------------
   3. Header — continuous dark-navy block (topbar + branding + nav)
--------------------------------------------------------- */
:root {
	--cbit-navy: #0d1b3d;
	--cbit-navy-light: #24345e;
	--cbit-blue-accent: #7ea8e0;
	--cbit-gray-label: #9aa5c0;
	--cbit-gold: #e0b04a;
	--cbit-red: #e0384f;
}

.site-header {
	background: var(--cbit-navy); font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Header spans the full viewport width — its own container overrides the
   site's 1200px content container so topbar/branding/nav all share one
   consistent left/right edge instead of three different widths. */
.site-header .container {
	max-width: none;
	width: 100%;
	padding: 0 32px;
}

/* -- Topbar -- */
.topbar { border-bottom: 1px solid rgba(255,255,255,.08); }
.topbar-inner { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; gap: 16px; flex-wrap: wrap; font-size: 13px; }

.topbar-contact { display: flex; align-items: center; gap: 8px; color: #fff; }
.topbar-label { color: var(--cbit-gray-label); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: 12px; }
.topbar-number { color: var(--cbit-blue-accent); font-weight: 700; }
.topbar-sep { color: var(--cbit-gray-label); }

.topbar-right { display: flex; align-items: center; gap: 20px; }
.topbar-menu-list { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin: 0; padding: 0; }
.topbar-menu-list a { color: #fff; font-weight: 500; }
.topbar-menu-list a:hover { color: var(--cbit-blue-accent); }
/* Last topbar item ("Portal Login") renders as a pill button */
.topbar-menu-list li:last-child a {
	background: var(--cbit-navy-light); padding: 8px 18px; border-radius: 999px; display: inline-block;
}
.topbar-menu-list li:last-child a:hover { background: #33447a; color: #fff; }

.topbar-social { display: flex; align-items: center; gap: 8px; }
.topbar-social-icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 26px; height: 26px; border-radius: 50%; color: #fff;
}
.topbar-social-icon:hover { color: var(--cbit-blue-accent); }

/* -- Branding row -- */
.branding-row { padding: 8px 0; }
.branding-inner { display: flex; align-items: center; justify-content: space-between; padding: 22px 0; gap: 28px; flex-wrap: wrap; }

.branding { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.branding .site-logo-img,
.branding img { max-height: 92px; width: auto; object-fit: contain; }
.site-title-text { font-size: 20px; font-weight: 700; line-height: 1.2; color: #fff; }

.accreditation-strip { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; flex: 1 1 auto; justify-content: flex-start; margin-left: 12px; }
.accreditation-strip a {
	display: inline-flex; align-items: center; justify-content: center;
	height: 96px;
}
.accreditation-strip img {
	height: 88px; width: auto; max-width: none;
	object-fit: contain; display: block; margin: 0 auto;
}

.admissions-callout { display: flex; align-items: center; gap: 20px; flex-shrink: 0; }
.admissions-text { text-align: right; line-height: 1.3; }
.admissions-year { display: block; color: var(--cbit-gray-label); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.admissions-status { display: block; color: #fff; font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-weight: 600; font-size: 20px; }

.btn-apply-now {
	display: inline-block; background: var(--cbit-red); color: #fff !important;
	padding: 12px 26px; border-radius: 999px; font-weight: 700; font-size: 15px;
	font-family: 'Playfair Display', Georgia, serif; font-style: italic;
}
.btn-apply-now:hover { background: #c92c41; }

.btn-readmore {
	display: inline-block; background: var(--cbit-red); color: #fff !important;
	padding: 10px 20px; border-radius: 4px; font-weight: 600; font-size: 14px;
}

/* -- Nav row -- */
.nav-row { background: var(--cbit-navy); border-top: 1px solid rgba(255,255,255,.08); position: sticky; top: 0; z-index: 999; }
.nav-inner { display: flex; align-items: center; padding: 0; }

.main-navigation { flex: 1 1 auto; min-width: 0; }
.main-navigation .main-menu-list { display: flex; gap: 16px; flex-wrap: nowrap; align-items: center; margin: 0; padding: 0; }
.main-navigation .main-menu-list > li { position: relative; }
.main-navigation li { position: relative; }
.main-navigation .main-menu-list > li > a {
	display: flex; align-items: center; gap: 6px; padding: 14px 0; font-weight: 700; font-size: 12.5px; color: #fff;
	text-transform: uppercase; letter-spacing: .02em; border-bottom: 3px solid transparent; white-space: nowrap;
	font-family: 'Plus Jakarta Sans', sans-serif;
}
.main-navigation .main-menu-list > li:hover > a,
.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a {
	color: #fff; border-bottom-color: var(--cbit-blue-accent);
}
.main-navigation li.menu-item-has-children > a::after {
	content: ""; width: 0; height: 0; flex-shrink: 0;
	border-left: 4px solid transparent; border-right: 4px solid transparent;
	border-top: 5px solid currentColor;
	margin-top: 2px;
}

.main-navigation ul ul {
	display: none;
	position: absolute; top: 100%; left: 0;
	background: var(--cbit-navy); border: 1px solid rgba(255,255,255,.1); min-width: 240px; z-index: 50;
	box-shadow: 0 10px 24px rgba(0,0,0,.35); padding: 6px 0;
}
.main-navigation li:hover > ul,
.main-navigation li.submenu-open > ul {
	display: block;
}
.main-navigation li:hover > .mega-menu-panel,
.main-navigation li.submenu-open > .mega-menu-panel {
	display: flex;
}

.menu-toggle {
	display: none; background: none; border: 0; cursor: pointer; padding: 8px;
	flex-direction: column; gap: 5px;
}
.menu-toggle-bar { width: 24px; height: 2px; background: #fff; display: block; }

@media (max-width: 1100px) {
	.admissions-text { display: none; }
}

@media (max-width: 1300px) {
	.menu-toggle { display: flex; }
	.main-navigation { display: none; width: 100%; max-height: 70vh; overflow-y: auto; }
	.main-navigation.is-open { display: block; }
	.main-navigation .main-menu-list { flex-direction: column; gap: 0; flex-wrap: wrap; }
	.main-navigation ul ul { position: static; box-shadow: none; border: 0; padding-left: 14px; }
	.mega-menu-panel {
		position: static !important; width: 100% !important; box-shadow: none !important;
		border-radius: 0 !important; padding: 12px 0 12px 14px !important; background: transparent !important;
		flex-direction: column !important; max-height: none !important;
	}
	.mega-menu-tabs {
		width: 100% !important; max-height: none !important; overflow: visible !important;
		border-right: 0 !important; padding: 0 !important;
	}
	.mega-menu-tab { color: #fff !important; border-left: 0 !important; padding: 10px 0 !important; }
	.mega-menu-content { position: static !important; overflow: visible !important; }
	.mega-menu-panel-content {
		position: static !important; padding: 4px 0 12px 14px !important;
	}
	.mega-menu-scroll-btn { display: none !important; }
	.mega-menu-promo { width: 100%; background: rgba(255,255,255,.08); }
	.mega-menu-promo h4 { color: #fff; }
	.branding-inner { justify-content: center; text-align: center; }
	.accreditation-strip { justify-content: center; }
	.topbar-right { flex-direction: column; align-items: flex-end; gap: 8px; }
}

@media (max-width: 600px) {
	.topbar-inner { flex-direction: column; align-items: flex-start; }
	.site-header .container { padding: 0 16px; }
	.branding .site-logo-img, .branding img { max-height: 64px; }
	.accreditation-strip img { height: 56px; }
}
.main-navigation ul ul li a {
	padding: 10px 18px; display: block; white-space: nowrap; color: #fff;
	font-weight: 500; text-transform: none; letter-spacing: normal; font-size: 13px; border-bottom: 0;
	font-family: 'Plus Jakarta Sans', sans-serif;
}
.main-navigation ul ul li a:hover { background: rgba(255,255,255,.06); color: var(--cbit-blue-accent); }
.main-navigation ul ul ul { top: 0; left: 100%; }
.main-navigation ul ul.flip-left { left: auto; right: 0; }
.main-navigation ul ul ul.flip-left { left: auto; right: 100%; }

/* -- Tabbed mega panel: left tab list + one scrollable panel on the right.
   Used automatically whenever a top-level item's children have their own
   children — handles a 3-item list and a 23-item list identically, since
   only one panel is ever visible at a time and it simply scrolls. -- */
.mega-menu-panel {
	display: none;
	position: absolute; top: 100%; left: 0; z-index: 50;
	width: 640px; max-height: min(480px, calc(100vh - 160px));
	background: #fff; border: 1px solid #e8e8ea;
	border-radius: 14px; box-shadow: 0 20px 40px rgba(13,27,61,.18);
	margin-top: 1px; overflow: hidden;
}
.mega-menu-panel.flip-left { left: auto; right: 0; }

/* Tabs and their content panels are DELIBERATELY separate scroll
   containers — a menu with 14+ tabs (e.g. Life @ CBIT) needs to scroll
   the tabs list independently of whatever panel is currently showing,
   which isn't possible if they share one scrolling ancestor. */
.mega-menu-tabs {
	width: 220px; flex-shrink: 0; overflow-y: auto; padding: 12px 0;
	border-right: 1px solid #eceef2; scrollbar-width: thin;
}
.mega-menu-tab {
	display: flex; align-items: center; justify-content: space-between; gap: 8px;
	padding: 12px 20px; color: #2a3350; font-weight: 500; font-size: 14px;
	border-left: 3px solid transparent; border-bottom: 1px solid #f0f1f4;
	font-family: 'Plus Jakarta Sans', sans-serif;
}
.mega-menu-tab.is-active,
.mega-menu-tab:hover {
	background: #f5f6f9; color: var(--cbit-navy, #0d1b3d);
	border-left-color: var(--cbit-blue-accent, #4a7fd1);
}
/* Chevron shown only on tabs that actually reveal something on the right —
   a plain link tab (no children) gets no icon, so it's clear at a glance
   which items have more to explore. */
.mega-menu-tab.has-content::after {
	content: ""; flex-shrink: 0; width: 0; height: 0;
	border-top: 4px solid transparent; border-bottom: 4px solid transparent;
	border-left: 5px solid currentColor; opacity: .5;
}

.mega-menu-content { position: relative; flex: 1; min-width: 0; overflow: hidden; background: #fff; }
.mega-menu-panel-content {
	position: absolute; inset: 0; overflow-y: auto; padding: 20px 24px;
	display: none; scrollbar-width: none;
}
.mega-menu-panel-content::-webkit-scrollbar { display: none; }
.mega-menu-panel-content.is-active { display: block; }
.mega-menu-panel-content > ul {
	display: block !important; position: static !important; background: none !important; border: 0 !important;
	box-shadow: none !important; min-width: 0 !important; padding: 0 !important;
	list-style: none; margin: 0;
}
/* A leaf item inside the panel can itself have children (a "super
   submenu", e.g. Imp Links) — this flies out to the side on hover like
   normal, but needs light-theme colors to match the panel around it,
   instead of the dark navy used by simple dropdowns elsewhere. */
.mega-menu-panel-content ul ul {
	background: #fff !important; border: 1px solid #e8e8ea !important;
	box-shadow: 0 10px 24px rgba(13,27,61,.15) !important; min-width: 200px !important;
}
.mega-menu-panel-content ul ul li a { color: #2a3350 !important; }
.mega-menu-panel-content ul ul li a:hover { background: #f5f6f9 !important; color: var(--cbit-blue-accent, #4a7fd1) !important; }
.mega-menu-panel-content li { margin-bottom: 14px; }
.mega-menu-panel-content li.menu-item-has-children { width: fit-content; position: relative; }
.mega-menu-panel-content li a {
	color: #2a3350 !important; font-weight: 500; font-size: 14px; padding: 0 !important; display: block; white-space: normal;
	background: none !important;
}
.mega-menu-panel-content li a:hover { color: var(--cbit-blue-accent, #4a7fd1) !important; }

.mega-menu-scroll-btn {
	position: absolute; right: 10px; width: 26px; height: 26px; border-radius: 50%;
	background: #f0f1f4; color: #2a3350; border: 0; cursor: pointer; font-size: 12px;
	display: flex; align-items: center; justify-content: center; z-index: 2;
}
.mega-menu-scroll-btn:hover { background: #e4e6ec; }
.mega-menu-scroll-up { top: 8px; }
.mega-menu-scroll-down { bottom: 8px; }

.mega-menu-promo {
	flex-shrink: 0; width: 100%; background: #f5f6f9; padding: 16px 24px;
	border-top: 1px solid #eceef2;
}
.mega-menu-promo h4 {
	font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 16px;
	color: var(--cbit-navy, #0d1b3d); margin: 0 0 8px; line-height: 1.3;
}
.mega-menu-promo p { font-size: 13px; color: #7a8296; margin: 0 0 12px; }
.mega-menu-promo a { font-weight: 700; font-size: 13px; color: var(--cbit-red, #e0384f); }
.mega-menu-promo a:hover { text-decoration: underline; }

/* ---------------------------------------------------------
   4. Homepage sections
--------------------------------------------------------- */

/* -- Hero: image carousel + admissions/announcements sidebar -- */
.hero-grid { padding: 32px 0; }
.hero-grid-inner {
	display: grid; grid-template-columns: minmax(0, 7fr) minmax(280px, 3fr); gap: 24px;
}

.hero-carousel {
	position: relative; border-radius: 14px; overflow: hidden; background: var(--cbit-navy, #0d1b3d);
	aspect-ratio: 2/1;
}
.hero-slide {
	position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .4s ease;
}
.hero-slide.is-active { opacity: 1; visibility: visible; }
.hero-slide img { width: 100%; height: 100%; object-fit: cover; }
.hero-slide-overlay {
	position: absolute; left: 0; right: 0; bottom: 0; padding: 32px;
	background: linear-gradient(0deg, rgba(0,0,0,.75) 0%, rgba(0,0,0,.35) 55%, transparent 100%);
	color: #fff;
}
.hero-badge {
	display: inline-block; background: var(--cbit-red, #e0384f); color: #fff; font-size: 12px;
	font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 6px 14px;
	border-radius: 999px; margin-bottom: 14px;
}
.hero-headline {
	font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 28px; line-height: 1.25;
	margin: 0 0 18px; max-width: 520px; letter-spacing: -.01em;
}
.hero-slide-btn {
	display: inline-block; background: #fff; color: var(--cbit-navy, #0d1b3d) !important;
	font-weight: 700; padding: 12px 24px; border-radius: 999px; font-size: 14px;
}
.hero-slide-btn:hover { background: #f0f0f0; }

.hero-dots { position: absolute; bottom: 20px; right: 24px; display: flex; gap: 8px; z-index: 2; }
.hero-dot {
	width: 24px; height: 4px; border-radius: 2px; border: 0; background: rgba(255,255,255,.4);
	cursor: pointer; padding: 0;
}
.hero-dot.is-active { background: #fff; }

.hero-sidebar { display: flex; flex-direction: column; gap: 16px; }

.hero-admissions-card {
	background: var(--cbit-navy, #0d1b3d); border-radius: 14px; padding: 24px; color: #fff;
}
.hero-admissions-heading {
	margin: 0 0 16px; font-size: 12px; font-weight: 700; text-transform: uppercase;
	letter-spacing: .06em; color: var(--cbit-gray-label, #9aa5c0);
}
.hero-code-row { display: flex; gap: 10px; margin-bottom: 18px; }
.hero-code-chip {
	flex: 1; background: rgba(255,255,255,.08); border-radius: 8px; padding: 10px 14px;
}
.hero-code-chip span { display: block; font-size: 11px; color: var(--cbit-gray-label, #9aa5c0); margin-bottom: 2px; }
.hero-code-chip strong { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 18px; }
.hero-admissions-btn {
	display: block; text-align: center; background: var(--cbit-red, #e0384f); color: #fff !important;
	font-weight: 700; padding: 13px; border-radius: 999px; font-size: 14px;
}
.hero-admissions-btn:hover { background: #c92c41; }

.hero-announcements-card { background: #eef1f8; border-radius: 14px; padding: 24px; }
.hero-announcements-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; }
.hero-announcements-head h3 {
	font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-style: normal; font-size: 20px;
	color: var(--cbit-navy, #0d1b3d); margin: 0;
}
.hero-all-link { font-size: 13px; font-weight: 600; color: var(--cbit-blue-accent, #7ea8e0); white-space: nowrap; }
.hero-announcements-list li {
	padding: 12px 0; border-top: 1px solid rgba(13,27,61,.08);
}
.hero-announcements-list li:first-child { border-top: 0; padding-top: 0; }
.hero-announcement-date {
	display: block; font-size: 11px; font-weight: 700; letter-spacing: .04em;
	color: #8b93a8; margin-bottom: 4px;
}
.hero-announcements-list a { color: var(--cbit-navy, #0d1b3d); font-weight: 600; font-size: 14.5px; }
.hero-announcements-list a:hover { color: var(--cbit-red, #e0384f); }

/* -- Notice board bar -- */
.notice-board-bar { background: #5c2a24; color: #fff; }
.notice-board-inner { display: flex; align-items: center; gap: 20px; padding: 14px 0; }
.notice-board-badge {
	flex-shrink: 0; background: rgba(255,255,255,.2); font-size: 11px; font-weight: 700;
	text-transform: uppercase; letter-spacing: .06em; padding: 5px 14px; border-radius: 999px;
}
.notice-board-marquee { flex: 1 1 auto; min-width: 0; overflow: hidden; }
.notice-board-track {
	display: flex; align-items: center; gap: 12px; white-space: nowrap; width: max-content;
	animation: notice-board-scroll 28s linear infinite;
}
.notice-board-marquee:hover .notice-board-track { animation-play-state: paused; }
.notice-board-item { color: #fff; font-size: 14px; font-weight: 500; flex-shrink: 0; }
.notice-board-item:hover { text-decoration: underline; }
.notice-board-dot { color: rgba(255,255,255,.4); flex-shrink: 0; }
.notice-board-link { flex-shrink: 0; font-weight: 700; font-size: 14px; color: #fff; white-space: nowrap; }
.notice-board-link:hover { text-decoration: underline; }

@keyframes notice-board-scroll {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

@media (max-width: 1000px) {
	.hero-grid-inner { grid-template-columns: 1fr; }
	.hero-carousel { aspect-ratio: 16/9; }
}
@media (max-width: 600px) {
	.hero-headline { font-size: 22px; }
	.hero-slide-overlay { padding: 20px; }
	.notice-board-marquee { display: none; }
}

/* -- Welcome / Vision & Mission -- */
.welcome-section { padding: 0; }
.welcome-grid {
	display: grid; grid-template-columns: 1.4fr 1fr; gap: 0;
	border: 1px solid #eceef4; border-radius: 14px; overflow: hidden;
}
.welcome-main { background: #fff; padding: 56px; }
.welcome-sidebar { background: #eef1f8; padding: 56px 40px; }

.welcome-eyebrow {
	font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
	color: var(--cbit-blue-accent, #7ea8e0); margin: 0 0 12px;
}
.welcome-heading {
	font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-style: normal; font-size: 38px;
	line-height: 1.15; color: var(--cbit-navy, #0d1b3d); margin: 0 0 28px; letter-spacing: -.015em;
}
.welcome-subheading {
	font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
	color: #8b93a8; margin: 0 0 12px;
}
.welcome-vision {
	margin: 0 0 28px; padding-left: 20px; border-left: 3px solid var(--cbit-blue-accent, #7ea8e0);
	font-size: 19px; line-height: 1.5; color: #2a3350; font-style: normal;
}
.welcome-divider { border: 0; border-top: 1px solid #eceef4; margin: 28px 0; }

.welcome-mission-list { list-style: none; margin: 0 0 28px; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.welcome-mission-list li { display: flex; gap: 18px; align-items: baseline; }
.welcome-mission-num {
	font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-style: normal; font-size: 20px;
	color: var(--cbit-blue-accent, #7ea8e0); flex-shrink: 0; width: 32px;
}
.welcome-mission-list li span:last-child { color: #2a3350; font-size: 15.5px; line-height: 1.5; }

.welcome-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.welcome-stat strong {
	display: block; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-style: normal; font-size: 28px;
	color: var(--cbit-blue-accent, #7ea8e0); margin-bottom: 4px;
}
.welcome-stat span { display: block; font-size: 12.5px; color: #7a8296; line-height: 1.4; }

.quick-links-list { list-style: none; margin: 0 0 32px; padding: 0; }
.quick-links-list li { border-bottom: 1px solid rgba(13,27,61,.08); }
.quick-links-list li:last-child { border-bottom: 0; }
.quick-links-list a {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	padding: 18px 0; color: inherit;
}
.quick-links-list strong { display: block; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; color: var(--cbit-navy, #0d1b3d); font-size: 16px; }
.quick-links-list em { display: block; font-style: normal; font-size: 13px; color: #7a8296; margin-top: 2px; }
.quick-links-arrow { color: var(--cbit-navy, #0d1b3d); font-size: 18px; flex-shrink: 0; transition: transform .15s ease; }
.quick-links-list a:hover .quick-links-arrow { transform: translateX(4px); color: var(--cbit-red, #e0384f); }

.sidebar-admissions-card { background: var(--cbit-navy, #0d1b3d); border-radius: 14px; padding: 28px; color: #fff; }
.sidebar-admissions-card h4 { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-style: normal; font-size: 22px; margin: 0 0 8px; }
.sidebar-admissions-card p { margin: 0 0 20px; font-size: 14px; color: rgba(255,255,255,.85); }
.sidebar-admissions-btn {
	display: inline-block; background: rgba(255,255,255,.15); color: #fff !important; font-weight: 700;
	padding: 12px 24px; border-radius: 999px; font-size: 14px;
}
.sidebar-admissions-btn:hover { background: rgba(255,255,255,.25); }

/* -- Courses carousel + Leadership sidebar -- */
.courses-leadership-section { padding: 0; }
.courses-leadership-grid {
	display: grid; grid-template-columns: 1.4fr 1fr; gap: 0;
	border: 1px solid #eceef4; border-radius: 14px; overflow: hidden;
	box-shadow: 0 8px 30px rgba(13,27,61,.05);
}
.courses-main { background: #fff; padding: 56px; min-width: 0; }

/* Leadership panel: a soft, light card — no dark block — separated from
   the courses column by a hairline border, with a thin brand-gradient
   rule along the top edge and a very faint radial highlight behind the
   portrait for a touch of depth without looking heavy. */
.leadership-sidebar {
	position: relative; overflow: hidden;
	background: linear-gradient(180deg, #fbfcfe 0%, #f2f4fa 100%);
	color: var(--cbit-navy, #0d1b3d);
	border-left: 1px solid #eceef4;
}
.leadership-sidebar::before {
	content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; z-index: 2;
	background: linear-gradient(90deg, var(--cbit-blue-accent, #7ea8e0), var(--cbit-red, #e0384f));
}
.leadership-sidebar::after {
	content: ""; position: absolute; z-index: 0; pointer-events: none; border-radius: 50%;
	width: 340px; height: 340px; top: 50%; left: 50%; transform: translate(-50%, -55%);
	background: radial-gradient(circle, rgba(126,168,224,.14) 0%, rgba(126,168,224,0) 70%);
}
.leadership-sidebar-inner { position: relative; z-index: 1; height: 100%; padding: 52px 40px 36px; display: flex; flex-direction: column; }

.courses-eyebrow {
	display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
	color: var(--cbit-blue-accent, #7ea8e0); margin: 0 0 10px;
}
.courses-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 32px; }
.courses-heading {
	font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 32px;
	color: var(--cbit-navy, #0d1b3d); margin: 0 0 10px; letter-spacing: -.01em;
}
.courses-intro { max-width: 520px; color: #7a8296; margin: 0; font-size: 14.5px; line-height: 1.6; }

.courses-arrows { display: flex; gap: 10px; flex-shrink: 0; }
.courses-arrow {
	width: 44px; height: 44px; border-radius: 50%; border: 1px solid #e2e6f0; background: #fff;
	color: var(--cbit-navy, #0d1b3d); font-size: 16px; cursor: pointer; flex-shrink: 0;
	box-shadow: 0 2px 8px rgba(13,27,61,.06); transition: background .18s ease, color .18s ease, border-color .18s ease, transform .15s ease;
}
.courses-arrow:hover { transform: translateY(-2px); border-color: #cfd6e6; }
.courses-arrow.is-primary { background: var(--cbit-navy, #0d1b3d); color: #fff; border-color: var(--cbit-navy, #0d1b3d); }
.courses-arrow.is-primary:hover { background: var(--cbit-red, #e0384f); border-color: var(--cbit-red, #e0384f); }

.courses-track-wrap { position: relative; }
.courses-track {
	display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory;
	margin: 0 0 28px; padding: 4px 4px 10px; scrollbar-width: none;
}
.courses-track::-webkit-scrollbar { display: none; }
.courses-track-wrap::after {
	content: ''; position: absolute; top: 0; right: 0; bottom: 28px; width: 64px;
	background: linear-gradient(to right, rgba(255,255,255,0), #fff);
	pointer-events: none;
}
.course-card {
	position: relative; flex: 0 0 250px; scroll-snap-align: start; border: 1px solid #eceef4; border-radius: 14px;
	overflow: hidden; background: #fff; box-shadow: 0 2px 10px rgba(13,27,61,.05);
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.course-card::before {
	content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 2;
	background: linear-gradient(90deg, var(--cbit-blue-accent, #7ea8e0), var(--cbit-red, #e0384f));
	transform: scaleX(0); transform-origin: left; transition: transform .2s ease;
}
.course-card:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(13,27,61,.12); border-color: #dfe4f0; }
.course-card:hover::before { transform: scaleX(1); }

.course-card-media { position: relative; display: block; aspect-ratio: 4/3; }
.course-card-media img { width: 100%; height: 100%; aspect-ratio: 4/3; object-fit: cover; }
.course-card-media-overlay {
	position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(to top, rgba(13,27,61,.45), rgba(13,27,61,0) 55%);
}
.course-card-media--icon {
	display: flex; align-items: center; justify-content: center;
	background-image:
		radial-gradient(rgba(255,255,255,.14) 1.5px, transparent 1.5px),
		linear-gradient(135deg, #14224a 0%, #0d1b3d 100%);
	background-size: 16px 16px, cover;
}
.course-card-media--1 { background-image: radial-gradient(rgba(255,255,255,.14) 1.5px, transparent 1.5px), linear-gradient(135deg, #1d3568 0%, #142244 100%); background-size: 16px 16px, cover; }
.course-card-media--2 { background-image: radial-gradient(rgba(255,255,255,.14) 1.5px, transparent 1.5px), linear-gradient(135deg, #24345e 0%, #101d3e 100%); background-size: 16px 16px, cover; }
.course-card-icon { color: var(--cbit-blue-accent, #7ea8e0); display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 50%; background: rgba(255,255,255,.08); }

.course-card-body { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; padding: 18px; }
.course-card-eyebrow { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #8b93a8; margin-bottom: 6px; }
.course-card-body h3 { margin: 0; font-size: 15.5px; line-height: 1.3; }
.course-card-body h3 a { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; color: var(--cbit-navy, #0d1b3d); }
.course-card-arrow {
	flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; background: var(--cbit-navy, #0d1b3d);
	color: #fff !important; display: flex; align-items: center; justify-content: center; font-size: 14px;
	transition: background .18s ease, transform .15s ease;
}
.course-card:hover .course-card-arrow { background: var(--cbit-red, #e0384f); transform: translateX(2px); }

.courses-all-link { font-weight: 700; font-size: 14px; color: var(--cbit-navy, #0d1b3d); }
.courses-all-link:hover { color: var(--cbit-red, #e0384f); }

.leadership-title {
	position: relative; z-index: 1; flex-shrink: 0; margin: 0 0 14px; color: var(--cbit-navy, #0d1b3d);
	font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-weight: 600;
	font-size: 32px; line-height: 1.2; letter-spacing: -.01em;
}
.leadership-title-accent { color: var(--cbit-red, #e0384f); }
.leadership-title-rule {
	position: relative; z-index: 1; flex-shrink: 0; display: block; width: 52px; height: 3px;
	margin: 0 0 30px; border-radius: 2px;
	background: linear-gradient(90deg, var(--cbit-blue-accent, #7ea8e0), var(--cbit-red, #e0384f));
}

/* The carousel fills whatever vertical space is left between the eyebrow
   and the "Management & governance" link, and centers its (now large)
   slide inside that space — so the sidebar's height is put to use instead
   of leaving dead margin above/below a small, fixed-size content block. */
.leadership-carousel { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; justify-content: center; min-height: 0; }
.leadership-slides { position: relative; }
.leadership-slide {
	display: none; flex-direction: column; align-items: center; text-align: center;
}
.leadership-slide.is-active { display: flex; animation: leadership-fade-in .4s ease; }
@keyframes leadership-fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

.leadership-portrait {
	position: relative; width: 100%; max-width: 220px; aspect-ratio: 4 / 5; margin: 0 auto 24px;
	border-radius: 20px; overflow: hidden; background: #eef1f8;
	border: 1px solid #e2e7f1; box-shadow: 0 22px 44px rgba(13,27,61,.16);
}
.leadership-portrait-inner { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.leadership-portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.leadership-initial {
	width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
	color: var(--cbit-navy, #0d1b3d); font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 62px;
	background: linear-gradient(160deg, #eef1f8, #e4e9f3);
}

.leadership-slide-info { display: flex; flex-direction: column; align-items: center; }
.leadership-slide-name {
	display: block; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 24px;
	line-height: 1.25; color: var(--cbit-navy, #0d1b3d); margin-bottom: 10px;
}
.leadership-role {
	display: inline-block; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
	color: var(--cbit-navy-light, #24345e); background: rgba(13,27,61,.05); border: 1px solid rgba(13,27,61,.08);
	padding: 5px 16px; border-radius: 999px;
}
.leadership-slide-link {
	display: inline-block; margin-top: 20px; font-weight: 700; font-size: 13px; color: var(--cbit-navy, #0d1b3d) !important;
	border: 1px solid var(--cbit-navy, #0d1b3d); border-radius: 999px; padding: 9px 22px;
	transition: background .18s ease, color .18s ease;
}
.leadership-slide-link:hover { background: var(--cbit-navy, #0d1b3d); color: #fff !important; }

.leadership-dots { position: relative; z-index: 1; flex-shrink: 0; display: flex; justify-content: center; gap: 8px; margin-top: 28px; }
.leadership-dot {
	width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: #d9dfec;
	cursor: pointer; transition: width .25s ease, background .25s ease;
}
.leadership-dot.is-active { width: 26px; background: var(--cbit-red, #e0384f); }

.leadership-all-link { position: relative; z-index: 1; flex-shrink: 0; font-weight: 700; font-size: 14px; color: var(--cbit-navy, #0d1b3d) !important; margin-top: 8px; }
.leadership-all-link:hover { color: var(--cbit-red, #e0384f) !important; }

/* -- News grid (CBIT EDU News) -- */
.news-grid-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 32px; }
.news-all-btn {
	flex-shrink: 0; display: inline-block; background: var(--cbit-navy, #0d1b3d); color: #fff !important;
	font-weight: 700; font-size: 14px; padding: 13px 24px; border-radius: 999px;
}
.news-all-btn:hover { background: var(--cbit-navy-light, #24345e); }

.news-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.news-card {
	display: flex; gap: 18px; background: #fff; border-radius: 14px; padding: 24px;
	box-shadow: 0 2px 10px rgba(13,27,61,.05);
}
.news-date-badge {
	flex-shrink: 0; width: 64px; height: 64px; border-radius: 10px; background: var(--cbit-navy, #0d1b3d);
	color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.news-date-badge strong { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 20px; line-height: 1; }
.news-date-badge span { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; margin-top: 4px; }

.news-card-body { min-width: 0; }
.news-card-eyebrow {
	display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
	color: var(--cbit-red, #e0384f); margin-bottom: 6px;
}
.news-card-body h3 { margin: 0 0 8px; font-size: 17px; line-height: 1.3; }
.news-card-body h3 a { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; color: var(--cbit-navy, #0d1b3d); }
.news-card-body p { margin: 0 0 12px; font-size: 13.5px; color: #7a8296; line-height: 1.5; }
.news-card-thumb { margin-bottom: 12px; }
.news-card-thumb img { width: 72px; height: 54px; object-fit: cover; border-radius: 6px; }
.news-card-link { font-weight: 700; font-size: 13.5px; color: var(--cbit-blue-accent, #7ea8e0); }
.news-card-link:hover { color: var(--cbit-red, #e0384f); }

.testimonial-carousel { position: relative; overflow: hidden; }
.testimonial-page {
	display: none; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.testimonial-page.is-active { display: grid; }

.testimonial-card {
	text-align: left; background: #eef1f8; border: 0; border-radius: 14px; padding: 28px 24px;
	position: relative; box-shadow: none;
}
.testimonial-quote-mark {
	display: block; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 32px;
	color: var(--cbit-blue-accent, #7ea8e0); line-height: 1; margin-bottom: 8px;
}
.testimonial-card p {
	font-family: 'Plus Jakarta Sans', sans-serif; font-style: normal; font-size: 15px; line-height: 1.6;
	color: #2a3350; margin: 0 0 20px;
}
.testimonial-card footer { display: flex; align-items: center; gap: 12px; margin: 0; font-style: normal; }
.testimonial-avatar {
	flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; background: #d7e0f5;
	color: var(--cbit-navy, #0d1b3d); font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 14px;
	display: flex; align-items: center; justify-content: center;
}
.testimonial-card footer strong { display: block; font-size: 14px; color: var(--cbit-navy, #0d1b3d); }
.testimonial-subtitle { display: block; font-size: 12.5px; color: #7a8296; }

.testimonial-dots { display: flex; justify-content: center; gap: 8px; margin-top: 28px; }
.testimonial-dot {
	width: 8px; height: 8px; border-radius: 50%; border: 0; background: #d7dbe6; cursor: pointer; padding: 0;
}
.testimonial-dot.is-active { width: 24px; border-radius: 4px; background: var(--cbit-navy, #0d1b3d); }

.logo-strip { display: flex; flex-wrap: wrap; gap: 32px; align-items: center; justify-content: center; }
.logo-strip img { max-height: 60px; width: auto; transition: transform .18s ease; }
.logo-strip img:hover { transform: scale(1.05); }

/* ---------------------------------------------------------
   5. Department / course page
--------------------------------------------------------- */
.department-breadcrumb { padding: 16px 0; font-size: 13px; color: #7a8296; }
.department-breadcrumb a { color: #7a8296; }
.department-breadcrumb a:hover { color: var(--cbit-navy); }
.department-breadcrumb span { color: var(--cbit-navy); font-weight: 600; }

.department-banner { background: var(--cbit-navy); color: #fff; padding-top: 8px; border-top: 4px solid var(--cbit-red); }
.department-banner-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 32px 0 28px; flex-wrap: wrap; }
.department-eyebrow { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--cbit-blue-accent); margin: 0 0 8px; }
.department-title { font-family: 'Roboto Slab', Georgia, serif; font-size: 34px; margin: 0 0 12px; color: #fff; text-align: left; }
.department-intro { max-width: 640px; color: #c7cedf; font-size: 15px; line-height: 1.6; margin: 0; }
.department-banner-actions { display: flex; gap: 16px; flex-shrink: 0; }
.btn-apply-now { background: var(--cbit-red); color: #fff !important; font-weight: 700; padding: 13px 26px; border-radius: 999px; font-size: 14px; white-space: nowrap; }
.btn-apply-now:hover { background: #c72e40; }
.btn-syllabus { background: var(--cbit-navy-light); color: #fff !important; font-weight: 700; padding: 13px 26px; border-radius: 999px; font-size: 14px; white-space: nowrap; }
.btn-syllabus:hover { background: #33447a; }

/* Stats spread evenly across the full banner width (as many equal-width
   columns as there are stats — auto-fit collapses any unused tracks) instead
   of clustering on the left with dead navy space to the right when there
   are only 4-6 items in a much wider container. */
.department-stats {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 32px; padding: 20px 0 24px;
	border-top: 1px solid rgba(255,255,255,.12);
}
.department-stat strong { display: block; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 26px; line-height: 1; color: #fff; }
.department-stat span { display: block; font-size: 12.5px; color: var(--cbit-gray-label); margin-top: 4px; }

.department-tabs { background: #fff; border-bottom: 1px solid #eceef2; position: sticky; top: 60px; z-index: 40; }
.department-tabs-inner { display: flex; gap: 28px; overflow-x: auto; scrollbar-width: none; }
.department-tabs-inner::-webkit-scrollbar { display: none; }
.department-tab {
	white-space: nowrap; padding: 16px 2px; font-size: 14px; font-weight: 600; color: #7a8296;
	border-bottom: 3px solid transparent; flex-shrink: 0;
}
.department-tab:hover { color: var(--cbit-navy); }
.department-tab.is-active { color: var(--cbit-navy); border-bottom-color: var(--cbit-red); }

.department-section { padding: 48px 0; scroll-margin-top: 120px; }
.department-section-alt { background: #f7f8fb; }
/* Shared inset treatment for any section rendered as a colour-tinted panel
   (HOD message, programme overview, labs, placements, news/events) so the
   heading and content sit inward from the panel's own edges instead of
   touching them, with a consistently rounded panel shape. Apply alongside
   whatever class supplies the panel's background colour. */
.department-panel { padding: 48px 40px; border-radius: 16px; }
.department-section h2 { font-family: 'Roboto Slab', Georgia, serif; font-size: 26px; margin: 0 0 8px; color: var(--cbit-navy); }
.department-section-intro { color: #7a8296; font-size: 14.5px; margin: 0 0 24px; max-width: 640px; }
.department-section-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 28px; flex-wrap: wrap; }
.department-section-header h2 { margin-bottom: 6px; }

.department-overview-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 48px; align-items: start; }
.department-overview-grid h2 { margin-top: 0; }
.department-overview-image img { width: 100%; border-radius: 14px; object-fit: cover; max-height: 420px; }
.department-facts { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 24px; }
.department-fact-card {
	flex: 1 1 180px; background: #f0f3fa; border-radius: 12px; padding: 16px 18px;
}
.department-fact-card strong { display: block; font-family: 'Roboto Slab', Georgia, serif; font-weight: 700; color: var(--cbit-navy); font-size: 15px; margin-bottom: 4px; }
.department-fact-card span { display: block; font-size: 13px; color: #7a8296; }

.department-hod-section { background: #f0f3fa; }
.hod-block { display: flex; gap: 40px; align-items: flex-start; }
.hod-photo-col { flex: 0 0 25%; max-width: 25%; display: flex; flex-direction: column; align-items: center; text-align: center; }
.hod-photo { width: 220px; height: 220px; max-width: 100%; object-fit: cover; border-radius: 50%; flex-shrink: 0; }
.hod-content { flex: 1 1 75%; min-width: 0; }
.hod-block h2 { font-family: 'Roboto Slab', Georgia, serif; margin-top: 0; color: var(--cbit-navy); }
.hod-name { font-weight: 700; color: var(--cbit-navy); margin: 16px 0 2px; }
.hod-meta { color: #7a8296; font-size: 13.5px; margin: 0; line-height: 1.5; }
.hod-actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }

.btn-pill { background: var(--cbit-navy); color: #fff !important; font-weight: 700; font-size: 14px; padding: 12px 22px; border-radius: 999px; white-space: nowrap; }
.btn-pill:hover { background: var(--cbit-navy-light); }
.link-arrow { font-weight: 700; font-size: 14px; color: var(--cbit-blue-accent); }
.link-arrow:hover { color: var(--cbit-red); }

.department-vision-mission { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.department-mission-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.department-mission-list li { display: flex; gap: 14px; align-items: baseline; }
.department-mission-list span { flex-shrink: 0; font-family: 'Roboto Slab', Georgia, serif; font-weight: 800; color: var(--cbit-blue-accent); font-size: 15px; }

.department-programme-section { background: #eef1f8; }
.programme-years-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
.programme-year-card { background: #fff; border-radius: 16px; padding: 20px; box-shadow: 0 1px 3px rgba(13,27,61,.08); }
.programme-year-label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--cbit-blue-accent); margin-bottom: 10px; }
.programme-year-card p { margin: 0; font-size: 14px; color: #2a3350; line-height: 1.5; }

.faculty-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 24px; }
.faculty-card { text-align: left; }
.faculty-card img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; padding: 20px 20px 0; }
.faculty-card h4 { margin: 0 0 4px; }
.faculty-card p { margin: 0; font-size: 14px; color: #555; }
.faculty-qualification { color: #888 !important; font-size: 13px !important; margin-bottom: 10px !important; }
.faculty-card .link-arrow { font-size: 13px; }

.department-section-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

/* More than 4 faculty switches the inline department preview to an auto-
   scrolling marquee instead of a tall multi-row grid — content-department.php
   renders the faculty list twice back-to-back and sets animation-duration
   inline, so translating exactly -50% loops it seamlessly. Same technique
   as the placements logo carousel above. The full, non-scrolling list always
   lives on the dedicated /faculty/ page linked from "View all". */
.faculty-carousel-row.is-carousel {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
}
.faculty-carousel-track {
	display: flex; align-items: flex-start; gap: 24px; width: max-content;
	animation-name: faculty-carousel-scroll; animation-timing-function: linear; animation-iteration-count: infinite;
}
.faculty-carousel-row.is-carousel:hover .faculty-carousel-track { animation-play-state: paused; }
.faculty-carousel-item { flex: 0 0 220px; width: 220px; }
@keyframes faculty-carousel-scroll {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

.labs-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.lab-card { background: #fff; border-radius: 12px; padding: 22px; box-shadow: 0 2px 10px rgba(13,27,61,.05); }
.lab-card strong { display: block; font-family: 'Roboto Slab', Georgia, serif; color: var(--cbit-navy); font-size: 15.5px; margin-bottom: 8px; }
.lab-card p { margin: 0; font-size: 13.5px; color: #7a8296; line-height: 1.5; }

.department-research-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: start; }
.research-links-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.research-links-list li { border-top: 1px solid #eceef2; padding: 16px 0; }
.research-links-list li:last-child { border-bottom: 1px solid #eceef2; }
.research-links-list a { display: flex; align-items: center; justify-content: space-between; gap: 20px; font-weight: 600; color: var(--cbit-navy); font-size: 14.5px; }
.research-links-list a:hover { color: var(--cbit-red); }
.research-link-arrow { color: var(--cbit-blue-accent); font-weight: 700; flex-shrink: 0; }
.conference-promo-card { background: var(--cbit-navy); color: #fff; border-radius: 8px 40px 8px 40px; padding: 28px; }
.conference-eyebrow { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--cbit-blue-accent); display: block; margin-bottom: 10px; }
.conference-promo-card h3 { font-family: 'Roboto Slab', Georgia, serif; font-weight: 800; font-size: 22px; margin: 0 0 10px; }
.conference-promo-card p { font-size: 14px; color: #c7ceff; margin: 0 0 20px; line-height: 1.5; }
.btn-pill-outline { display: inline-block; border: 1.5px solid #fff; color: #fff !important; font-weight: 700; font-size: 13.5px; padding: 10px 18px; border-radius: 999px; }
.btn-pill-outline:hover { background: #fff; color: var(--cbit-navy) !important; }

.department-placements-banner { background: var(--cbit-navy); color: #fff; }
.department-placements-banner h2, .department-placements-banner .department-section-intro { color: #fff; }
.department-placements-banner .department-section-intro { color: #c7ceff; }
.placement-logos-row { display: flex; flex-wrap: wrap; gap: 16px; }
.placement-logo-box { background: #fff; border-radius: 10px; padding: 16px 24px; display: flex; align-items: center; justify-content: center; min-width: 140px; }
.placement-logo-box img { max-height: 32px; width: auto; }

/* More than 6 logos switches to an auto-scrolling marquee instead of a wide
   static row — content-department.php renders the logo list twice back-to-
   back and sets animation-duration inline, so translating exactly -50%
   loops it seamlessly. This CSS was missing, which is why the "carousel"
   logos were stacking into a single column instead of scrolling. */
.placement-logos-row.is-carousel {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.placement-logos-track {
	display: flex; align-items: center; gap: 16px; width: max-content;
	animation-name: placement-logos-scroll; animation-timing-function: linear; animation-iteration-count: infinite;
}
.placement-logos-row.is-carousel:hover .placement-logos-track { animation-play-state: paused; }
@keyframes placement-logos-scroll {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

.achievements-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 32px; }
.achievement-item { border-left: 3px solid var(--cbit-blue-accent); padding-left: 18px; }
.achievement-item strong { display: block; font-family: 'Roboto Slab', Georgia, serif; color: var(--cbit-navy); font-size: 15.5px; margin-bottom: 6px; }
.achievement-item p { margin: 0; font-size: 13.5px; color: #7a8296; line-height: 1.5; }

.dept-news-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.dept-news-card { display: flex; align-items: center; gap: 14px; background: #fff; border-radius: 12px; padding: 14px; box-shadow: 0 2px 10px rgba(13,27,61,.05); }
.dept-news-card img { width: 64px; height: 48px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
.dept-news-date { display: block; font-size: 11.5px; color: #7a8296; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
.dept-news-card strong { font-family: 'Roboto Slab', Georgia, serif; color: var(--cbit-navy); font-size: 14px; line-height: 1.3; }

.department-downloads-contact-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; }
.downloads-list { display: flex; flex-direction: column; gap: 12px; }
.download-item {
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	background: #f7f8fb; border-radius: 10px; padding: 14px 18px;
}
.download-item strong { display: block; font-family: 'Roboto Slab', Georgia, serif; color: var(--cbit-navy); font-size: 14.5px; }
.download-subtitle { display: block; font-size: 12.5px; color: #7a8296; margin-top: 2px; }
.download-icon { flex-shrink: 0; color: var(--cbit-blue-accent); font-weight: 700; }
.download-item:hover .download-icon { color: var(--cbit-red); }

.department-contact-card { background: var(--cbit-navy); color: #fff; border-radius: 16px; padding: 32px; }
.department-contact-card h2 { font-family: 'Roboto Slab', Georgia, serif; color: #fff; margin-top: 0; }
.department-contact-card > p { color: #c7ceff; font-size: 14px; margin: 0 0 20px; }
.department-contact-line { margin: 0 0 6px; font-size: 14px; color: #e4e8f5; line-height: 1.5; }
.department-contact-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.btn-pill-light { background: #fff; color: var(--cbit-navy) !important; font-weight: 700; font-size: 13.5px; padding: 11px 18px; border-radius: 999px; }
.btn-pill-light:hover { background: #e4e8f5; }
.btn-pill-outline-light { border: 1.5px solid rgba(255,255,255,.4); color: #fff !important; font-weight: 700; font-size: 13.5px; padding: 11px 18px; border-radius: 999px; }
.btn-pill-outline-light:hover { border-color: #fff; }

@media (max-width: 900px) {
	.department-overview-grid,
	.department-vision-mission,
	.department-research-grid,
	.department-downloads-contact-grid { grid-template-columns: 1fr; }
	.hod-block { flex-direction: column; }
	.hod-photo-col { flex-basis: auto; max-width: 100%; }
	.labs-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	.department-title { font-size: 26px; }
	.department-banner-inner { flex-direction: column; }
	.department-section { padding: 32px 0; }
	.department-panel { padding: 32px 24px; }
	.labs-grid { grid-template-columns: 1fr; }
}

/* Below 1300px the header collapses to the hamburger nav-row, which is
   much shorter (~33px) than the full desktop nav — so the sticky tab bar
   (tuned to sit right under the 60px desktop nav) needs a smaller offset
   here too, or it leaves a gap under the nav-row while scrolling and the
   tab-click anchor jumps land a bit low. */
@media (max-width: 1300px) {
	.department-tabs { top: 33px; }
	.department-section { scroll-margin-top: 96px; }
}

/* ---------------------------------------------------------
   6. Footer
--------------------------------------------------------- */

/* -- Admissions banner -- */
.footer-admissions-banner { background: var(--cbit-red); color: #fff; }
.footer-admissions-inner {
	display: flex; align-items: center; justify-content: space-between;
	gap: 24px; padding: 24px 0; flex-wrap: wrap;
}
.footer-admissions-headline {
	margin: 0 0 4px; font-family: 'Playfair Display', Georgia, serif; font-style: italic;
	font-weight: 700; font-size: 24px;
}
.footer-admissions-subtitle { margin: 0; font-size: 14px; color: rgba(255,255,255,.9); }

.btn-apply-now-inverse {
	display: inline-block; background: #fff; color: var(--cbit-red) !important;
	padding: 12px 26px; border-radius: 999px; font-weight: 700; font-size: 15px;
	font-family: 'Playfair Display', Georgia, serif; font-style: italic; flex-shrink: 0;
}
.btn-apply-now-inverse:hover { background: #f3f3f3; }

/* -- Main footer -- */
.site-footer { background: var(--cbit-navy); color: #cdd3e0; }
.footer-grid {
	display: grid; grid-template-columns: minmax(240px, 1.3fr) repeat(auto-fit, minmax(180px, 1fr));
	gap: 28px 24px; padding: 56px 0;
}

.footer-logo { max-height: 56px; width: auto; object-fit: contain; margin-bottom: 16px; }

.footer-heading {
	color: var(--cbit-blue-accent); margin: 0 0 18px; font-size: 12px; font-weight: 700;
	text-transform: uppercase; letter-spacing: .08em;
}
.footer-col p { line-height: 1.7; font-size: 14px; }
.footer-address { max-width: 260px; }
.footer-col a { color: #cdd3e0; }
.footer-col a:hover { color: #fff; }
.footer-course-list, .footer-menu-list { list-style: none; margin: 0; padding: 0; }
.footer-course-list li,
.footer-menu-list li { margin-bottom: 12px; line-height: 1.4; }

.footer-social { display: flex; gap: 10px; margin-top: 20px; }
.footer-social-icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 36px; height: 36px; border: 1px solid rgba(255,255,255,.3); border-radius: 50%;
	color: #fff;
}
.footer-social-icon:hover { border-color: #fff; background: rgba(255,255,255,.1); }

.footer-contact-line { display: flex; align-items: center; gap: 10px; margin: 16px 0 0; }
.footer-contact-icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 28px; height: 28px; border-radius: 50%; background: rgba(255,255,255,.08);
	color: #cdd3e0; flex-shrink: 0;
}

.footer-bottom { border-top: 1px solid rgba(255,255,255,.1); padding: 16px 0; font-size: 13px; }

@media (max-width: 900px) {
	.footer-grid { grid-template-columns: 1fr 1fr; }
	.welcome-grid, .courses-leadership-grid { grid-template-columns: 1fr; }
	.welcome-main, .welcome-sidebar, .courses-main, .leadership-sidebar { padding: 40px 28px; }
	.welcome-stats { grid-template-columns: 1fr 1fr; }
	.testimonial-page { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	.hod-block { flex-direction: column; }
	.hod-photo-col { flex-basis: auto; max-width: 100%; }
	.section { padding: 32px 0; }
	.section-title { font-size: 22px; }
	.container { padding: 0 16px; }
	.footer-grid { grid-template-columns: 1fr; }
	.footer-admissions-inner { text-align: center; justify-content: center; }
	.welcome-heading, .courses-heading { font-size: 26px; }
	.leadership-title { font-size: 25px; }
	.welcome-main, .welcome-sidebar, .courses-main, .leadership-sidebar { padding: 28px 20px; }
	.courses-header { flex-direction: column; }
	.news-grid { grid-template-columns: 1fr; }
	.news-card { flex-direction: column; }
	.news-grid-header { flex-direction: column; align-items: flex-start; }
	.testimonial-page { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------
   7. Campus LIFE / Gallery / Contact / Footer legal links
--------------------------------------------------------- */
.section-intro { max-width: 700px; color: #7a8296; margin: -8px 0 24px; }

/* -- Campus life (photo collage + dark links panel) -- */
.campus-life-section { padding: 0; }
.campus-life-grid {
	display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 0;
	border-radius: 14px; overflow: hidden; box-shadow: 0 8px 30px rgba(13,27,61,.08);
}
.campus-life-grid.campus-life-grid--no-photo { grid-template-columns: 1fr; }

.campus-life-photo-col { position: relative; overflow: hidden; min-height: 460px; background: #dfe4ee; }
.campus-life-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.campus-life-bg-text {
	position: absolute; z-index: 2; top: -6px; left: 24px; right: 24px; margin: 0;
	font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: clamp(24px, 3vw, 38px);
	line-height: 1.05; color: var(--cbit-navy, #0d1b3d);
	text-shadow: 0 1px 1px rgba(255,255,255,.5), 0 0 26px rgba(255,255,255,.6), 0 0 4px rgba(255,255,255,.8);
	pointer-events: none;
}

.campus-life-caption {
	position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: 44px 24px 20px;
	background: linear-gradient(180deg, rgba(13,27,61,0) 0%, rgba(13,27,61,.78) 100%);
	color: #fff;
}
.campus-life-caption-loc {
	display: block; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
	color: rgba(255,255,255,.75); margin-bottom: 6px;
}
.campus-life-caption-head { display: block; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 20px; }

.campus-life-panel {
	position: relative; overflow: hidden; padding: 56px;
	background: linear-gradient(135deg, var(--cbit-navy, #0d1b3d), var(--cbit-navy-light, #24345e));
	color: #fff;
}
.campus-life-panel::after {
	content: ""; position: absolute; z-index: 0; pointer-events: none; border-radius: 50%;
	width: 300px; height: 300px; top: -120px; right: -100px;
	background: radial-gradient(circle, rgba(126,168,224,.16) 0%, rgba(126,168,224,0) 70%);
}
.campus-life-panel > * { position: relative; z-index: 1; }
.campus-life-panel .section-title { color: #fff; }
.campus-life-panel .section-intro { color: rgba(255,255,255,.72); }

.campus-life-cta { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin: 4px 0 30px; }
.btn-campus-tour {
	display: inline-flex; align-items: center; font-weight: 700; font-size: 14px; color: var(--cbit-navy, #0d1b3d) !important;
	background: #fff; padding: 13px 28px; border-radius: 999px; box-shadow: 0 10px 22px rgba(0,0,0,.18);
	transition: transform .15s ease, box-shadow .18s ease;
}
.btn-campus-tour:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(0,0,0,.24); }
.campus-life-handbook-link {
	display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; color: #fff !important;
	border-bottom: 2px solid rgba(255,255,255,.35); padding-bottom: 2px; transition: border-color .18s ease, color .18s ease;
}
.campus-life-handbook-link:hover { border-color: var(--cbit-gold, #e0b04a); color: var(--cbit-gold, #e0b04a) !important; }

.campus-life-links { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; list-style: none; margin: 0; padding: 0; }
.campus-life-links li a {
	display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px;
	background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1);
	font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 14px; color: #fff;
	transition: background .18s ease, border-color .18s ease, transform .15s ease;
}
.campus-life-links li a:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.25); transform: translateY(-2px); }
.campus-life-link-icon {
	flex-shrink: 0; width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
	background: linear-gradient(135deg, var(--cbit-blue-accent, #7ea8e0), #4f76ad); color: #fff;
}
.campus-life-link-label { line-height: 1.3; }

/* Responsive overrides — placed after the rules above so they actually win
   the cascade (see the note above .placements-contact-grid's own overrides
   further down: unconditional rules defined later in the file win over
   earlier media-query rules at equal specificity). */
@media (max-width: 900px) {
	.campus-life-grid { grid-template-columns: 1fr; }
	.campus-life-photo-col { min-height: 280px; }
	.campus-life-panel { padding: 40px 28px; }
}
@media (max-width: 600px) {
	.campus-life-panel { padding: 28px 20px; }
	.campus-life-links { grid-template-columns: 1fr; }
	.campus-life-bg-text { font-size: 20px; left: 16px; right: 16px; }
	.campus-life-cta { gap: 14px 22px; }
}

/* -- Placements + Get in touch (two-column row) -- */
.placements-contact-section { padding: 0; }
.placements-contact-grid {
	display: grid; grid-template-columns: 1.4fr 1fr; gap: 0;
	border: 1px solid #eceef4; border-radius: 14px; overflow: hidden;
	box-shadow: 0 8px 30px rgba(13,27,61,.05);
}

/* Both columns get the same thin brand-gradient rule along the top edge
   and a soft, low-opacity color blob behind their content — the same
   "light card with a touch of color" language used on the Leadership
   panel, instead of a flat white/gray split. */
.placements-col, .contact-col { position: relative; overflow: hidden; min-width: 0; }
.placements-col::before, .contact-col::before {
	content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; z-index: 2;
	background: linear-gradient(90deg, var(--cbit-blue-accent, #7ea8e0), var(--cbit-red, #e0384f));
}
.placements-col { background: #fff; padding: 56px; }
.placements-col::after {
	content: ""; position: absolute; z-index: 0; pointer-events: none; border-radius: 50%;
	width: 280px; height: 280px; top: -100px; right: -90px;
	background: radial-gradient(circle, rgba(126,168,224,.12) 0%, rgba(126,168,224,0) 70%);
}
.contact-col {
	background: linear-gradient(160deg, #eef3fb 0%, #fbf6ec 100%); padding: 56px 40px;
}
.contact-col::after {
	content: ""; position: absolute; z-index: 0; pointer-events: none; border-radius: 50%;
	width: 260px; height: 260px; bottom: -100px; left: -90px;
	background: radial-gradient(circle, rgba(224,56,79,.08) 0%, rgba(224,56,79,0) 70%);
}
.placements-col > *, .contact-col > * { position: relative; z-index: 1; }
.placements-col .section-intro, .contact-col .section-intro { max-width: none; margin: -4px 0 28px; }

.placements-eyebrow, .contact-eyebrow {
	display: inline-block; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
	color: var(--cbit-blue-accent, #4f76ad); background: rgba(126,168,224,.12);
	padding: 5px 14px; border-radius: 999px; margin: 0 0 12px;
}
.contact-eyebrow { color: var(--cbit-red, #e0384f); background: rgba(224,56,79,.08); }

.logo-strip-box {
	display: flex; align-items: center; justify-content: center;
	border: 1px solid #eceef4; border-radius: 12px; padding: 14px 18px; background: #fff;
	box-shadow: 0 4px 14px rgba(13,27,61,.05);
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.logo-strip-box:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(13,27,61,.1); border-color: var(--cbit-blue-accent, #7ea8e0); }

/* Stats — small colorful cards (cycling blue/red/gold) instead of plain
   numbers separated by gray divider lines. */
.placements-stats {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 14px;
	margin: 32px 0 24px;
}
.placements-stat {
	position: relative; overflow: hidden; padding: 18px 16px 16px; border-radius: 14px; border: 1px solid transparent;
}
.placements-stat::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; }
.placements-stat--0 { background: rgba(126,168,224,.08); border-color: rgba(126,168,224,.18); }
.placements-stat--0::before { background: var(--cbit-blue-accent, #7ea8e0); }
.placements-stat--1 { background: rgba(224,56,79,.06); border-color: rgba(224,56,79,.16); }
.placements-stat--1::before { background: var(--cbit-red, #e0384f); }
.placements-stat--2 { background: rgba(224,176,74,.12); border-color: rgba(224,176,74,.24); }
.placements-stat--2::before { background: var(--cbit-gold, #e0b04a); }
.placements-stat strong {
	display: block; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 25px;
	color: var(--cbit-navy, #0d1b3d); margin-bottom: 4px;
}
.placements-stat span { display: block; font-size: 12px; font-weight: 600; color: #5c6685; line-height: 1.4; }

.placements-cell-link {
	display: inline-flex; align-items: center; gap: 9px; font-weight: 700; font-size: 14px;
	color: #fff !important; background: var(--cbit-navy, #0d1b3d); padding: 12px 26px; border-radius: 999px;
	box-shadow: 0 10px 22px rgba(13,27,61,.2);
	transition: background .18s ease, transform .15s ease, box-shadow .18s ease;
}
.placements-cell-link:hover {
	background: var(--cbit-red, #e0384f); color: #fff !important;
	transform: translateY(-2px); box-shadow: 0 12px 26px rgba(224,56,79,.3);
}

.contact-form-wrap { max-width: none; }
.contact-form { display: flex; flex-direction: column; gap: 14px; }
.contact-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.contact-form input,
.contact-form textarea {
	width: 100%; border: 1px solid #dbe2f0; background: #fff; color: var(--cbit-navy, #0d1b3d);
	font-family: inherit; font-size: 14px; padding: 13px 20px; border-radius: 999px;
	transition: border-color .18s ease, box-shadow .18s ease;
}
.contact-form textarea { border-radius: 18px; resize: vertical; min-height: 96px; }
.contact-form input::placeholder, .contact-form textarea::placeholder { color: #9aa5c0; }
.contact-form input:focus, .contact-form textarea:focus {
	outline: none; border-color: var(--cbit-blue-accent, #7ea8e0);
	box-shadow: 0 0 0 4px rgba(126,168,224,.16);
}

.contact-details { margin: 6px 0 4px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.contact-details li { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; color: #4a5372; line-height: 1.5; }
.contact-details-icon {
	flex-shrink: 0; margin-top: 1px; width: 26px; height: 26px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	background: rgba(126,168,224,.14); color: #4f76ad;
}

/* Honeypot: present in the markup for bots that blindly fill every field,
   invisible and unreachable for real (sighted or keyboard) visitors. */
.cbit-hp-field { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }

.contact-form-notice {
	margin: 0 0 16px; padding: 12px 18px; border-radius: 12px; font-size: 13.5px; font-weight: 600; line-height: 1.5;
}
.contact-form-notice--success { background: rgba(43,138,62,.08); color: #1f7a37; border: 1px solid rgba(43,138,62,.22); }
.contact-form-notice--error { background: rgba(224,56,79,.08); color: var(--cbit-red, #e0384f); border: 1px solid rgba(224,56,79,.22); }

.btn-submit {
	align-self: flex-start; display: inline-flex; align-items: center; gap: 9px; color: #fff; border: 0;
	font-family: inherit; font-weight: 700; font-size: 14px; padding: 14px 34px;
	border-radius: 999px; cursor: pointer; transition: transform .15s ease, box-shadow .18s ease, background .3s ease;
	background: linear-gradient(135deg, var(--cbit-navy, #0d1b3d), var(--cbit-navy-light, #24345e));
	box-shadow: 0 10px 24px rgba(13,27,61,.22);
}
.btn-submit:hover {
	background: linear-gradient(135deg, var(--cbit-red, #e0384f), #c72e42);
	box-shadow: 0 12px 28px rgba(224,56,79,.3); transform: translateY(-2px);
}

/* Responsive overrides for the Placements + Contact grid. These live here,
   after the rules above, so they actually win the cascade — the base
   .placements-contact-grid / .placements-col / .contact-col / .contact-form-row
   rules are unconditional and would otherwise override anything placed
   earlier in the stylesheet at equal specificity. */
@media (max-width: 900px) {
	.placements-contact-grid { grid-template-columns: 1fr; }
	.placements-col, .contact-col { padding: 40px 28px; }
}
@media (max-width: 600px) {
	.placements-col, .contact-col { padding: 28px 20px; }
	.contact-form-row { grid-template-columns: 1fr; }
}

.footer-bottom-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
.footer-legal-links { display: flex; gap: 20px; }
.footer-legal-links a { font-size: 13px; color: #9aa5c0; }
.footer-legal-links a:hover { color: #fff; }

/* ---------------------------------------------------------
   8. Back to top button
--------------------------------------------------------- */
.back-to-top {
	position: fixed; right: 24px; bottom: 24px; z-index: 998;
	width: 44px; height: 44px; border-radius: 50%; border: 0;
	background: var(--cbit-navy, #0d1b3d); color: #fff; font-size: 18px; cursor: pointer;
	box-shadow: 0 4px 14px rgba(13,27,61,.3);
	opacity: 0; visibility: hidden; transform: translateY(10px);
	transition: opacity .25s ease, transform .25s ease, background .18s ease;
}
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { background: var(--cbit-red, #e0384f); }

@media (max-width: 600px) {
	.back-to-top { right: 16px; bottom: 16px; width: 40px; height: 40px; font-size: 16px; }
}

/* ---------------------------------------------------------
   9. Generic archive (category / tag / date / CPT archives)
--------------------------------------------------------- */
.archive-banner { background: var(--cbit-navy); color: #fff; padding: 40px 0; border-top: 4px solid var(--cbit-red); }
.archive-eyebrow { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--cbit-blue-accent); margin: 0 0 8px; }
.archive-title { font-size: 30px; margin: 0; color: #fff; }
.archive-description { color: #c7cedf; font-size: 14.5px; margin-top: 12px; max-width: 640px; }

/* padding-top/bottom only (not the "padding: 48px 0" shorthand) — a
   shorthand here would reset .container's left/right padding to 0 and
   pull every archive-style page (courses, committees, gallery, …) flush
   to the browser edge on desktop. */
.archive-body { padding-top: 48px; padding-bottom: 48px; }
.archive-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 28px; }
.archive-card {
	display: flex; flex-direction: column; background: #fff; border: 1px solid #eceef2;
	border-radius: 14px; overflow: hidden; box-shadow: 0 2px 10px rgba(13,27,61,.05);
	transition: transform .18s ease, box-shadow .18s ease;
}
.archive-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(13,27,61,.12); }
.archive-card-media { aspect-ratio: 16/9; overflow: hidden; }
.archive-card-media img { width: 100%; height: 100%; object-fit: cover; }
.archive-card-media-fallback {
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	background: linear-gradient(135deg, var(--cbit-navy) 0%, #1c2f5c 100%); color: #fff;
}
.archive-card-media-fallback span { font-family: 'Roboto Slab', Georgia, serif; font-weight: 800; font-size: 32px; line-height: 1; }
.archive-card-media-fallback em {
	font-style: normal; font-size: 12px; font-weight: 700; text-transform: uppercase;
	letter-spacing: .08em; color: var(--cbit-blue-accent); margin-top: 6px;
}
.archive-card-media-pdf {
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
	background: linear-gradient(135deg, #7a1220 0%, var(--cbit-red) 100%); color: #fff;
}
.archive-card-pdf-icon {
	width: 38px; height: 38px; display: inline-block; background-color: #fff;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.archive-card-media-pdf em {
	font-style: normal; font-size: 12px; font-weight: 700; text-transform: uppercase;
	letter-spacing: .08em; color: #fff; opacity: .9;
}
.archive-card-body { padding: 20px; display: flex; flex-direction: column; flex: 1; }
.archive-card-body > div:first-child { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.archive-card-eyebrow {
	font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
	color: var(--cbit-red); background: #fdeaec; padding: 3px 9px; border-radius: 999px;
}
.archive-card-date { font-size: 12px; color: #9aa5c0; }
.archive-card-body h2 {
	font-family: 'Roboto Slab', Georgia, serif; font-size: 17px; line-height: 1.35;
	margin: 0 0 10px; color: var(--cbit-navy);
}
.archive-card-body p { margin: 0 0 14px; font-size: 13.5px; color: #7a8296; line-height: 1.55; flex: 1; }
.archive-card-link { font-size: 13px; font-weight: 700; color: var(--cbit-blue-accent); }
.archive-card:hover .archive-card-body h2 { color: var(--cbit-red); }
.archive-card:hover .archive-card-link { color: var(--cbit-red); }

.archive-empty { color: #7a8296; font-size: 15px; }

.archive-pagination { display: flex; gap: 8px; margin-top: 40px; flex-wrap: wrap; }
.archive-pagination .page-numbers {
	display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px;
	padding: 0 10px; border-radius: 8px; background: #f7f8fb; color: var(--cbit-navy); font-weight: 600; font-size: 14px;
}
.archive-pagination .page-numbers.current { background: var(--cbit-navy); color: #fff; }
.archive-pagination .page-numbers:not(.current):not(.dots):hover { background: #eceef2; }

@media (max-width: 600px) {
	.archive-grid { grid-template-columns: 1fr; }
	.archive-title { font-size: 24px; }
}

/* ---------------------------------------------------------
   10. Single post
--------------------------------------------------------- */
.single-breadcrumb { padding: 16px 0; font-size: 13px; color: #7a8296; }
.single-breadcrumb a { color: #7a8296; }
.single-breadcrumb a:hover { color: var(--cbit-navy); }
.single-breadcrumb span { color: var(--cbit-navy); font-weight: 600; }

.single-banner { background: var(--cbit-navy); padding: 32px 0 40px; border-top: 4px solid var(--cbit-red); }
.single-category-badge {
	display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase;
	letter-spacing: .06em; color: #fff !important; background: var(--cbit-red);
	padding: 5px 14px; border-radius: 999px; margin-bottom: 16px;
}
.single-category-badge:hover { background: #c72e40; }
.single-title {
	font-family: 'Roboto Slab', Georgia, serif; font-size: 32px; color: #fff;
	margin: 0 0 12px; line-height: 1.25; max-width: 760px;
}
.single-date { color: var(--cbit-gray-label); font-size: 13.5px; margin: 0; }

/* Faculty single profile — replaces the generic post banner/title above for
   the 'faculty' post type with a photo + name + designation + qualification
   tags header, since a faculty profile isn't a dated blog post. */
.faculty-hero { padding-top: 32px; }
.faculty-hero-panel { display: flex; gap: 40px; align-items: center; background: #eef1f8; }
.faculty-photo-col { flex-shrink: 0; }
.faculty-photo { width: 200px; height: 200px; object-fit: cover; border-radius: 50%; display: block; }
.faculty-hero-content h1 { font-family: 'Roboto Slab', Georgia, serif; font-size: 30px; margin: 0 0 6px; color: var(--cbit-navy); line-height: 1.2; }
.faculty-designation { font-size: 15.5px; color: #4a5578; font-weight: 600; margin: 0 0 14px; }
.faculty-contact-row { display: flex; flex-wrap: wrap; gap: 18px; margin: 0 0 18px; }
.faculty-contact-link { font-size: 14px; font-weight: 600; color: var(--cbit-blue-accent); }
.faculty-contact-link:hover { color: var(--cbit-red); }
.faculty-quote {
	margin: 0 0 18px; padding-left: 18px; border-left: 3px solid var(--cbit-blue-accent);
	font-family: 'Roboto Slab', Georgia, serif; font-style: italic; font-size: 17px;
	line-height: 1.5; color: #2a3350;
}
.faculty-badges { display: flex; flex-wrap: wrap; gap: 10px; }
.faculty-tag {
	display: inline-block; font-size: 13px; font-weight: 700; padding: 7px 16px;
	border-radius: 999px; background: #fff; color: var(--cbit-navy);
}
a.faculty-tag:hover { color: var(--cbit-red); }
.faculty-tag-muted { font-weight: 600; color: #4a5578; background: rgba(13,27,61,.06); }

.faculty-body h2 { font-family: 'Roboto Slab', Georgia, serif; font-size: 22px; color: var(--cbit-navy); margin: 40px 0 16px; }
.faculty-body > h2:first-child { margin-top: 0; }

/* Research at a glance (counts) + credential lists — both optional, each
   collapsing independently when a course/faculty member has no data for it. */
.faculty-stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 20px; margin: 0 0 32px; }
.faculty-stat-card { background: #f0f3fa; border-radius: 12px; padding: 20px; text-align: center; }
.faculty-stat-card strong { display: block; font-family: 'Roboto Slab', Georgia, serif; font-weight: 800; font-size: 26px; color: var(--cbit-navy); }
.faculty-stat-card span { display: block; font-size: 12.5px; color: #7a8296; margin-top: 4px; }

/* Leadership / Awards / Patents / Memberships / Certifications — one
   full-width card per section, stacked top to bottom (the template always
   outputs them in this order), each with its own tint and icon badge so
   they're easy to tell apart at a glance. */
.faculty-credentials-grid { display: flex; flex-direction: column; gap: 18px; }
.faculty-credential-block {
	display: flex; gap: 20px; align-items: flex-start;
	border-radius: 14px; padding: 24px 28px;
}
.faculty-credential-icon {
	flex-shrink: 0; width: 48px; height: 48px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	font-size: 22px; background: #fff;
}
.faculty-credential-body { min-width: 0; }
.faculty-credential-block h3 { font-family: 'Roboto Slab', Georgia, serif; font-size: 16px; color: var(--cbit-navy); margin: 0 0 12px; }
.faculty-credential-block ul { margin: 0; padding-left: 18px; }
.faculty-credential-block li { font-size: 14px; color: #444; line-height: 1.6; margin-bottom: 6px; }

.faculty-credential-block--leadership     { background: #eef4fc; }
.faculty-credential-block--leadership     .faculty-credential-icon { box-shadow: inset 0 0 0 2px #b9d2f2; }
.faculty-credential-block--awards         { background: #fdf6e6; }
.faculty-credential-block--awards         .faculty-credential-icon { box-shadow: inset 0 0 0 2px #f0d999; }
.faculty-credential-block--patents        { background: #f2eefc; }
.faculty-credential-block--patents        .faculty-credential-icon { box-shadow: inset 0 0 0 2px #cdbdf2; }
.faculty-credential-block--memberships    { background: #eaf7f0; }
.faculty-credential-block--memberships    .faculty-credential-icon { box-shadow: inset 0 0 0 2px #a9ddc0; }
.faculty-credential-block--certifications { background: #fdecee; }
.faculty-credential-block--certifications .faculty-credential-icon { box-shadow: inset 0 0 0 2px #f2b8c0; }

@media (max-width: 560px) {
	.faculty-credential-block { flex-direction: column; align-items: flex-start; padding: 20px; }
}

/* Research papers table — scrolls horizontally on narrow screens rather than
   squeezing columns unreadably. */
.faculty-publications-table-wrap { overflow-x: auto; }
.faculty-publications-table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 14px; }
.faculty-publications-table th,
.faculty-publications-table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid #e2e6f0; vertical-align: top; }
.faculty-publications-table th {
	font-family: 'Roboto Slab', Georgia, serif; font-weight: 700; font-size: 12.5px;
	text-transform: uppercase; letter-spacing: .03em; color: var(--cbit-navy); background: #f0f3fa;
}
.faculty-publications-table td { color: #444; line-height: 1.5; }
.faculty-publications-table tbody tr:hover { background: #f8f9fc; }
.faculty-pub-num, .faculty-pub-year { white-space: nowrap; color: #7a8296; }

@media (max-width: 700px) {
	.faculty-hero-panel { flex-direction: column; align-items: flex-start; text-align: left; }
}

.single-body { padding: 48px 0 64px; max-width: 780px; }
.single-featured-image { margin-bottom: 32px; }
.single-featured-image img { width: 100%; border-radius: 14px; object-fit: cover; max-height: 460px; }
.entry-content { font-size: 15.5px; line-height: 1.75; color: #333; }
.entry-content p { margin: 0 0 20px; }
.entry-content h2 { font-family: 'Roboto Slab', Georgia, serif; font-size: 22px; color: var(--cbit-navy); margin: 32px 0 14px; }
.entry-content h3 { font-family: 'Roboto Slab', Georgia, serif; font-size: 18px; color: var(--cbit-navy); margin: 28px 0 12px; }
.entry-content img { max-width: 100%; height: auto; border-radius: 10px; }
.entry-content ul, .entry-content ol { padding-left: 22px; margin: 0 0 20px; }
.entry-content li { margin-bottom: 8px; }
.entry-content a { color: var(--cbit-blue-accent); text-decoration: underline; }
.entry-content a:hover { color: var(--cbit-red); }
.entry-content blockquote {
	margin: 24px 0; padding: 16px 20px; border-left: 3px solid var(--cbit-blue-accent);
	background: #f7f8fb; font-style: italic; color: #444;
}

/* WordPress editor image-alignment classes (align left/right/center,
   caption) — never had CSS in this theme, so an editor image with one of
   these classes just fell back to the global `img { display:block }`
   reset above and sat on its own line instead of floating beside the
   text. Scoped to .entry-content since that's the only place editor
   content renders. */
.entry-content img.alignleft { float: left; margin: 6px 26px 20px 0; }
.entry-content img.alignright { float: right; margin: 6px 0 20px 26px; }
.entry-content img.aligncenter { display: block; float: none; margin: 20px auto; }
.entry-content .wp-caption { max-width: 100%; }
.entry-content .wp-caption-text { font-size: 13px; color: #777; text-align: center; margin-top: 6px; }
@media (max-width: 600px) {
	/* A floated image next to justified text gets cramped on a narrow
	   phone screen — stack it full-width instead, matching this
	   theme's existing 600px mobile breakpoint. */
	.entry-content img.alignleft,
	.entry-content img.alignright { float: none; margin: 0 0 20px; width: 100%; height: auto; }
}

/* ---------------------------------------------------------
   "C Byregowda Educational and Cultural Trust" page — see
   page-c-byregowda-educational-and-cultural-trust-2.php. Its content was
   authored directly in the classic editor and carries old inline styles
   (a centred grey box, an off-brand blue heading, justified text). These
   !important rules neutralise just that page's inline styles so the
   theme's own entry-content typography/colour palette shows through
   instead — the content itself still comes from the page editor via
   the_content(), so future text edits keep working.
--------------------------------------------------------- */
.trust-page-content { max-width: 780px; margin: 0 auto; }
.trust-page-content,
.trust-page-content > div {
	text-align: left !important;
	background: none !important;
	padding: 0 !important;
	border-radius: 0 !important;
}
.trust-page-content h2 { color: var(--cbit-navy) !important; text-align: left !important; }
.trust-page-content p { text-align: left !important; }
.trust-page-content img.alignleft { border-radius: 12px; box-shadow: 0 12px 28px rgba(13,27,61,.16); }

/* v2 layout — see page-c-byregowda-educational-and-cultural-trust-2.php.
   Wider, bordered "intro" card (photo + opening paragraph side by side)
   plus an icon-led card grid for the rest of the paragraphs, instead of
   one narrow floated-image column. The rules above stay as the fallback
   render's styling if the content ever stops matching that shape.

   .content-page / .lead-paragraph / .point-cards / .point-card / etc. are
   named generically (not "trust-*") because the "C Byregowda Institute of
   Technology" page reuses this same card system — see
   page-c-byregowda-institute-of-technology-2.php. .trust-intro and
   .trust-photo-frame stay Trust-page-specific since that page's intro is
   the one with a founder photo. */
.content-page { max-width: 1160px; margin: 0 auto; }

.trust-intro {
	display: grid;
	grid-template-columns: 300px 1fr;
	gap: 48px;
	align-items: center;
	background: #fff;
	border: 1px solid #eceef4;
	border-radius: 20px;
	padding: 44px;
	box-shadow: 0 2px 16px rgba(13,27,61,.06);
	margin-bottom: 40px;
}
.trust-intro.trust-intro--no-photo { grid-template-columns: 1fr; }
.trust-photo-frame { border: 1px solid #eceef4; border-radius: 16px; padding: 10px; background: #f7f8fb; }
.trust-photo-frame img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 12px; display: block; }
.trust-intro-text .section-title { margin-bottom: 18px; }
.lead-paragraph { font-size: 17.5px; line-height: 1.85; color: #333; margin: 0; }
.content-page > .lead-paragraph { margin-bottom: 36px; }

.point-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 24px;
}
.point-card {
	background: #fff;
	border: 1px solid #eceef4;
	border-top: 4px solid var(--cbit-blue-accent);
	border-radius: 14px;
	padding: 28px 26px;
	box-shadow: 0 2px 10px rgba(13,27,61,.05);
	transition: transform .18s ease, box-shadow .18s ease;
}
.point-card:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(13,27,61,.12); }
.point-card:nth-child(3n+2) { border-top-color: var(--cbit-red); }
.point-card:nth-child(3n) { border-top-color: var(--cbit-gold); }
.point-card-icon {
	display: flex; align-items: center; justify-content: center;
	width: 52px; height: 52px; border-radius: 50%;
	background: rgba(126,168,224,.12); color: var(--cbit-blue-accent);
	margin-bottom: 16px;
}
.point-card:nth-child(3n+2) .point-card-icon { background: rgba(224,56,79,.1); color: var(--cbit-red); }
.point-card:nth-child(3n) .point-card-icon { background: rgba(224,176,74,.15); color: var(--cbit-gold); }
.point-card p { margin: 0; font-size: 15px; line-height: 1.75; color: #444; }

@media (max-width: 800px) {
	.trust-intro { grid-template-columns: 1fr; padding: 28px; }
	.trust-photo-frame { max-width: 260px; margin: 0 auto; }
}

/* ---------------------------------------------------------
   "C Byregowda Institute of Technology" page — see
   page-c-byregowda-institute-of-technology-2.php. A label + horizontal
   badge strip for the accreditations/approvals list that page's content
   already has as a <ul>, styled like a set of official seals rather than
   a plain bullet list.
--------------------------------------------------------- */
.badge-strip-label {
	font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
	color: var(--cbit-gray-label, #9aa5c0); margin: 0 0 14px;
}
.badge-strip { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 40px; }
.accred-badge {
	display: inline-flex; align-items: center; gap: 8px;
	background: #f0f3fa; color: var(--cbit-navy); font-weight: 600; font-size: 13.5px;
	padding: 9px 18px 9px 14px; border-radius: 999px; border: 1px solid rgba(13,27,61,.06);
}
.accred-badge svg { flex-shrink: 0; color: var(--cbit-blue-accent); }

/* ---------------------------------------------------------
   "CBIT Management" page — see page-cbit-management.php. Reuses the
   theme's existing bordered .card component (the same one faculty cards
   use) for the three office-bearers, with a circular portrait, a colour
   -cycling top accent and role badge (same blue/red/gold cycle as the
   Trust/Institute pages' point cards and the Placements stat cards), and
   a .btn-pill "Know More" button instead of the old site's plain text
   link. (Restored here after an edit briefly dropped this block — see
   the page's img rendering as full-width/uncropped as the symptom if it
   ever goes missing again.)
--------------------------------------------------------- */
.leadership-page-intro { max-width: 780px; margin: 0 auto 48px; }

.leadership-page-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 28px;
	max-width: 1000px;
	margin: 0 auto;
}
.leadership-page-card { text-align: center; padding: 40px 28px 32px; border-top: 4px solid var(--cbit-blue-accent); }
.leadership-page-card:nth-child(3n+2) { border-top-color: var(--cbit-red); }
.leadership-page-card:nth-child(3n) { border-top-color: var(--cbit-gold); }
.leadership-page-card img {
	width: 140px; height: 140px; object-fit: cover; border-radius: 50%;
	margin: 0 auto 20px; border: 4px solid #f0f3fa; display: block;
}
.leadership-page-card h3 { font-family: 'Roboto Slab', Georgia, serif; font-size: 19px; color: var(--cbit-navy); margin: 0 0 10px; }
.leadership-page-role {
	display: inline-block; font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
	color: var(--cbit-blue-accent); background: rgba(126,168,224,.1); padding: 5px 16px; border-radius: 999px; margin-bottom: 22px;
}
.leadership-page-card:nth-child(3n+2) .leadership-page-role { color: var(--cbit-red); background: rgba(224,56,79,.08); }
.leadership-page-card:nth-child(3n) .leadership-page-role { color: var(--cbit-gold); background: rgba(224,176,74,.12); }

.single-back-link {
	display: inline-block; margin-top: 32px; font-weight: 700; font-size: 14px; color: var(--cbit-navy);
	border-top: 1px solid #eceef2; padding-top: 24px; width: 100%;
}
.single-back-link:hover { color: var(--cbit-red); }

/* ---------------------------------------------------------
   "Administrative Staff" page — see
   page-department-administrative-staff.php. A plain directory list (name
   + designation only, no photos/links) so each row gets a small
   initials avatar instead of a portrait — same colour-cycling accent
   used across the other about-style pages.
--------------------------------------------------------- */
.staff-directory-intro { max-width: 1160px; margin: 0 auto 40px; }
.staff-directory-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 20px;
	max-width: 1160px;
	margin: 0 auto;
}
.staff-directory-card {
	display: flex; align-items: center; gap: 16px;
	background: #fff; border: 1px solid #eceef4; border-radius: 12px; padding: 18px 20px;
}
.staff-avatar {
	flex-shrink: 0; width: 60px; height: 60px; border-radius: 50%; overflow: hidden;
	display: flex; align-items: center; justify-content: center;
	font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 17px;
	background: rgba(126,168,224,.12); color: var(--cbit-blue-accent);
}
.staff-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.staff-directory-card:nth-child(3n+2) .staff-avatar { background: rgba(224,56,79,.1); color: var(--cbit-red); }
.staff-directory-card:nth-child(3n) .staff-avatar { background: rgba(224,176,74,.15); color: var(--cbit-gold); }
.staff-name { display: block; font-weight: 700; color: var(--cbit-navy); font-size: 15px; }
.staff-role { display: block; font-size: 13px; color: #7a8296; margin-top: 2px; }

/* ---------------------------------------------------------
   Admissions-style pages (e.g. "Undergraduate Courses" / eligibility /
   documents-required page) -- built on the same .content-page /
   .lead-paragraph / .section-title system as the Trust/Institute pages.
   Adds: a data-table look for the course list, small "exam chip" labels
   for entrance-exam codes, and a document-checklist card grid.
--------------------------------------------------------- */
.content-page > .section-title { margin: 48px 0 20px; }
.content-page > .section-title:first-of-type { margin-top: 0; }

.course-table {
	max-width: 1160px; margin: 0 auto; background: #fff; border: 1px solid #eceef4;
	border-radius: 14px; overflow: hidden; box-shadow: 0 1px 3px rgba(13,27,61,.04);
}
.course-table-head, .course-table-row {
	display: grid; grid-template-columns: 56px 1fr 140px 110px; gap: 12px; align-items: center;
	padding: 16px 24px;
}
.course-table-head {
	background: #f5f6fb; font-size: 11px; font-weight: 700; text-transform: uppercase;
	letter-spacing: .06em; color: #7a8296;
}
.course-table-row { border-top: 1px solid #eef0f6; transition: background .15s ease; }
.course-table-row:hover { background: #fafbfd; }
.course-no {
	width: 32px; height: 32px; border-radius: 50%; background: rgba(126,168,224,.12);
	color: var(--cbit-blue-accent); display: flex; align-items: center; justify-content: center;
	font-weight: 700; font-size: 13px;
}
.course-name { font-weight: 700; color: var(--cbit-navy); font-size: 14.5px; line-height: 1.4; }
a.course-name { text-decoration: none; transition: color .15s ease; }
a.course-name:hover { color: var(--cbit-red); text-decoration: underline; }
.course-duration { font-size: 13px; color: #7a8296; }
.course-intake {
	justify-self: start; display: inline-block; background: rgba(224,56,79,.08);
	color: var(--cbit-red); font-weight: 700; font-size: 13px; padding: 4px 14px; border-radius: 999px;
}
@media (max-width: 640px) {
	.course-table-head, .course-table-row { grid-template-columns: 40px 1fr 90px 70px; gap: 8px; padding: 14px 16px; }
	.course-table-head { font-size: 9.5px; }
	.course-name { font-size: 13px; }
	.course-duration { font-size: 11.5px; }
	.course-intake { font-size: 11.5px; padding: 3px 10px; }
}

/* Academic Calendar-style page: a table of years with an Odd/Even-semester
   schedule download button in each row. Same card shell as .course-table;
   .course-no is reused as-is for the row number circle. */
.calendar-table {
	max-width: 1160px; margin: 0 auto; background: #fff; border: 1px solid #eceef4;
	border-radius: 14px; overflow: hidden; box-shadow: 0 1px 3px rgba(13,27,61,.04);
}
.calendar-table-head, .calendar-table-row {
	display: grid; grid-template-columns: 56px 1fr 200px 200px; gap: 12px; align-items: center;
	padding: 16px 24px;
}
.calendar-table-head {
	background: #f5f6fb; font-size: 11px; font-weight: 700; text-transform: uppercase;
	letter-spacing: .06em; color: #7a8296;
}
.calendar-table-row { border-top: 1px solid #eef0f6; transition: background .15s ease; }
.calendar-table-row:hover { background: #fafbfd; }
.calendar-year { font-weight: 700; color: var(--cbit-navy); font-size: 14.5px; }
.calendar-dl-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 7px;
	background: rgba(126,168,224,.1); color: var(--cbit-blue-accent) !important; font-weight: 700;
	font-size: 12.5px; padding: 9px 16px; border-radius: 999px; text-align: center;
	white-space: nowrap; transition: background .15s ease, color .15s ease;
}
.calendar-dl-btn::before {
	content: ''; flex-shrink: 0; width: 13px; height: 13px; background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.calendar-dl-btn:hover { background: var(--cbit-blue-accent); color: #fff !important; }
.calendar-dl-btn.is-even { background: rgba(224,56,79,.08); color: var(--cbit-red) !important; }
.calendar-dl-btn.is-even:hover { background: var(--cbit-red); color: #fff !important; }
@media (max-width: 640px) {
	.calendar-table-head { display: none; }
	.calendar-table-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 16px 18px; }
	.calendar-year { flex: 1 1 100%; }
}

.exam-chips { display: flex; flex-wrap: wrap; gap: 16px; margin: 18px 0; }
.exam-chip { flex: 1 1 220px; background: #f5f6fb; border-radius: 12px; padding: 16px 20px; }
.exam-chip strong { display: block; color: var(--cbit-navy); font-size: 14px; margin-bottom: 4px; }
.exam-chip span { display: block; font-size: 12.5px; color: #7a8296; font-weight: 600; }

.doc-requirements {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px;
	max-width: 1160px; margin: 0 auto;
}
.doc-card {
	background: #fff; border: 1px solid #eceef4; border-top: 4px solid var(--cbit-blue-accent);
	border-radius: 14px; padding: 26px 24px; box-shadow: 0 1px 3px rgba(13,27,61,.04);
}
.doc-card:nth-child(3n+2) { border-top-color: var(--cbit-red); }
.doc-card:nth-child(3n) { border-top-color: var(--cbit-gold); }
.doc-card h4 {
	margin: 0 0 16px; font-family: 'Roboto Slab', Georgia, serif; font-size: 16px;
	color: var(--cbit-navy); padding-bottom: 12px; border-bottom: 2px solid #eef0f6;
}
.doc-card ul { list-style: none; margin: 0 0 14px; padding: 0; }
.doc-card li {
	display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: #3d4658;
	line-height: 1.5; padding: 8px 0; border-bottom: 1px dashed #eef0f6;
}
.doc-card li:last-child { border-bottom: none; }
.doc-card li::before {
	content: ''; flex-shrink: 0; width: 14px; height: 14px; margin-top: 3px;
	background: var(--cbit-blue-accent);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.doc-card:nth-child(3n+2) li::before { background: var(--cbit-red); }
.doc-card:nth-child(3n) li::before { background: var(--cbit-gold); }
.doc-card-note { margin: 0; font-size: 12px; font-style: italic; color: #9aa5c0; }

/* ---------------------------------------------------------
   Committee / Cell pages (~26 "Committees & Cells" pages under
   About Us) — see the [cbit_committee] shortcode in functions.php.
   Same directory-card look as .staff-directory-* above (initials
   avatar, no photos) plus an optional small role pill (Chairperson /
   Convener / Member, etc.) when a member's role is given. A page
   with more than one member table (e.g. Alumni Cell) renders each
   as its own .committee-group with a sub-heading.
--------------------------------------------------------- */
.committee-group { margin: 0 0 44px; }
.committee-group:last-child { margin-bottom: 0; }
.committee-group-title {
	font-family: 'Roboto Slab', Georgia, serif; font-size: 21px; color: var(--cbit-navy);
	margin: 0 0 24px; padding-bottom: 12px; position: relative;
}
.committee-group-title::after {
	content: ''; position: absolute; left: 0; bottom: 0; width: 52px; height: 3px; border-radius: 2px;
	background: linear-gradient(90deg, var(--cbit-blue-accent), var(--cbit-red));
}
.committee-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 24px;
	max-width: 1160px;
	margin: 0 auto;
}
/* Vertical, centred cards (rather than a left-aligned avatar+text row) so
   every card lines up the same way regardless of how many lines of role /
   designation / contact text a given member has -- a row layout let the
   name sit at a different height per card and made the grid look ragged,
   which is what the "not aligned properly" / "plain" feedback on this
   component was about. */
.committee-card {
	text-align: center;
	background: #fff; border: 1px solid #eceef4; border-radius: 14px;
	padding: 30px 20px 26px;
	border-top: 4px solid var(--cbit-blue-accent);
	box-shadow: 0 1px 3px rgba(13,27,61,.04);
	transition: transform .18s ease, box-shadow .18s ease;
}
.committee-card:hover { transform: translateY(-5px); box-shadow: 0 16px 28px rgba(13,27,61,.1); }
.committee-card:nth-child(3n+2) { border-top-color: var(--cbit-red); }
.committee-card:nth-child(3n) { border-top-color: var(--cbit-gold); }
.committee-avatar {
	width: 60px; height: 60px; border-radius: 50%; margin: 0 auto 16px;
	display: flex; align-items: center; justify-content: center;
	font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 16px;
	background: rgba(126,168,224,.12); color: var(--cbit-blue-accent);
	border: 3px solid #fff; box-shadow: 0 0 0 1px rgba(126,168,224,.25);
}
.committee-card:nth-child(3n+2) .committee-avatar { background: rgba(224,56,79,.1); color: var(--cbit-red); box-shadow: 0 0 0 1px rgba(224,56,79,.22); }
.committee-card:nth-child(3n) .committee-avatar { background: rgba(224,176,74,.15); color: var(--cbit-gold); box-shadow: 0 0 0 1px rgba(224,176,74,.3); }
.committee-card-body { min-width: 0; }
.committee-name {
	display: block; font-family: 'Roboto Slab', Georgia, serif; font-weight: 700;
	color: var(--cbit-navy); font-size: 16px; line-height: 1.35; margin-bottom: 8px;
}
.committee-role-badge {
	display: inline-block; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
	color: #fff; background: var(--cbit-blue-accent); padding: 4px 13px; border-radius: 999px; margin-bottom: 10px;
}
.committee-card:nth-child(3n+2) .committee-role-badge { background: var(--cbit-red); }
.committee-card:nth-child(3n) .committee-role-badge { background: var(--cbit-gold); }
/* Designation/contact sit inside a light "info panel" with a leading icon
   each, rather than as bare trailing text -- plain gray sentences under the
   name read as an afterthought, so this gives that content its own visual
   container and a label-like treatment instead. */
.committee-meta { margin-top: 10px; background: #f5f6fb; border-radius: 10px; padding: 12px 14px 11px; text-align: left; }
.committee-designation {
	display: flex; align-items: flex-start; gap: 8px;
	font-size: 13px; font-weight: 600; color: #3d4658; line-height: 1.45;
}
.committee-designation::before {
	content: ''; flex-shrink: 0; width: 13px; height: 13px; margin-top: 2px;
	background: var(--cbit-blue-accent);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M20 7h-4V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2zM10 5h4v2h-4zm10 13H4V9h16z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M20 7h-4V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2zM10 5h4v2h-4zm10 13H4V9h16z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.committee-card:nth-child(3n+2) .committee-designation::before { background: var(--cbit-red); }
.committee-card:nth-child(3n) .committee-designation::before { background: var(--cbit-gold); }
.committee-contact {
	display: flex; align-items: flex-start; gap: 8px;
	font-size: 12px; font-weight: 600; color: #7a8296; line-height: 1.4;
	margin-top: 8px; padding-top: 8px; border-top: 1px dashed #dfe2ec;
}
.committee-contact::before {
	content: ''; flex-shrink: 0; width: 12px; height: 12px; margin-top: 2px;
	background: #9aa5c0;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 4-8 5-8-5V6l8 5 8-5z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 4-8 5-8-5V6l8 5 8-5z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* The leftover "Frequency of the meeting" line that sits just below a
   committee's card grid -- previously plain italic text, which looked like
   a stray, randomly-pasted sentence floating between the grid and the next
   heading. A small labeled callout box with a clock icon reads as
   deliberate page content instead. */
.committee-note {
	max-width: 1160px; margin: 26px auto 0;
	display: flex; align-items: flex-start; gap: 10px;
	background: rgba(126,168,224,.08); border: 1px solid rgba(126,168,224,.22);
	border-radius: 10px; padding: 14px 18px;
	font-size: 13.5px; color: #3d4658; line-height: 1.5;
}
.committee-note::before {
	content: ''; flex-shrink: 0; width: 17px; height: 17px; margin-top: 1px;
	background: var(--cbit-blue-accent);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 11H7v-2h4V6h2v7z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 11H7v-2h4V6h2v7z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.committee-note strong { color: var(--cbit-navy); }

/* Single-person "spotlight" layout -- a person/profile card pinned to one
   side with descriptive text alongside it, for pages built around one role
   (e.g. Ombudsperson) rather than a roster grid. Reuses the same
   avatar/name/badge/meta styling as .committee-card so it stays visually
   consistent with the committee pages, just in a fixed-width card instead
   of a grid cell. Pair with a .committee-note below for a closing remark. */
.spotlight-section {
	max-width: 1160px; margin: 0 auto 24px;
	display: flex; align-items: flex-start; gap: 32px; flex-wrap: wrap;
}
.spotlight-card {
	flex: 0 0 280px; text-align: center;
	background: #fff; border: 1px solid #eceef4; border-radius: 14px;
	padding: 30px 20px 26px; border-top: 4px solid var(--cbit-blue-accent);
	box-shadow: 0 1px 3px rgba(13,27,61,.04);
}
.spotlight-text {
	flex: 1 1 320px; min-width: 0;
	background: #fff; border: 1px solid #eceef4; border-radius: 14px;
	padding: 28px 30px;
	box-shadow: 0 1px 3px rgba(13,27,61,.04);
}
.spotlight-text p { margin: 0 0 14px; font-size: 14.5px; line-height: 1.75; color: #3d4658; }
.spotlight-text p:last-child { margin-bottom: 0; }
@media (max-width: 720px) {
	.spotlight-card { flex-basis: 100%; }
}

/* The "Functions and Responsibilities" / "Objective" / "Standard Operating
   Procedure" / "Minutes of meeting" prose blocks that follow the member
   grid on every committee page -- previously just a bold+underlined line
   of plain text with a bare numbered/bulleted list under it, no spacing or
   structure. Each becomes its own bordered card with a proper title and a
   cleaner list treatment (numbered circles instead of the browser's
   default list markers). */
.committee-section {
	max-width: 1160px; margin: 0 auto 24px;
	background: #fff; border: 1px solid #eceef4; border-radius: 14px;
	padding: 28px 30px;
	box-shadow: 0 1px 3px rgba(13,27,61,.04);
}
.committee-section:last-of-type { margin-bottom: 0; }
.committee-section-title {
	display: flex; align-items: center; gap: 12px;
	font-family: 'Roboto Slab', Georgia, serif; font-size: 19px; font-weight: 700;
	color: var(--cbit-navy); margin: 0 0 18px; padding-bottom: 16px;
	border-bottom: 2px solid #eef0f6;
}
.committee-section-title::before {
	content: ''; flex-shrink: 0; width: 5px; height: 22px; border-radius: 3px;
	background: linear-gradient(180deg, var(--cbit-blue-accent), var(--cbit-red));
}
.committee-section.committee-accent-2 .committee-section-title::before { background: linear-gradient(180deg, var(--cbit-red), var(--cbit-gold)); }
.committee-section.committee-accent-3 .committee-section-title::before { background: linear-gradient(180deg, var(--cbit-gold), var(--cbit-blue-accent)); }
.committee-section-body { color: #3d4658; font-size: 14.5px; line-height: 1.7; }
.committee-section-body p { margin: 0 0 12px; }
.committee-section-body p:last-child { margin-bottom: 0; }
.committee-section-body ol, .committee-section-body ul { margin: 0; padding: 0; list-style: none; counter-reset: cbit-sec-counter; }
.committee-section-body ol li {
	counter-increment: cbit-sec-counter;
	position: relative; padding: 11px 0 11px 42px;
	border-bottom: 1px dashed #eef0f6;
}
.committee-section-body ol li:first-child { padding-top: 0; }
.committee-section-body ol li:last-child { padding-bottom: 0; border-bottom: none; }
.committee-section-body ol li::before {
	content: counter(cbit-sec-counter);
	position: absolute; left: 0; top: 9px; width: 24px; height: 24px; border-radius: 50%;
	background: rgba(126,168,224,.12); color: var(--cbit-blue-accent);
	font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.committee-section.committee-accent-2 .committee-section-body ol li::before { background: rgba(224,56,79,.08); color: var(--cbit-red); }
.committee-section.committee-accent-3 .committee-section-body ol li::before { background: rgba(224,176,74,.14); color: var(--cbit-gold); }
.committee-section-body ul li {
	position: relative; padding: 9px 0 9px 20px; border-bottom: 1px dashed #eef0f6;
}
.committee-section-body ul li:first-child { padding-top: 0; }
.committee-section-body ul li:last-child { padding-bottom: 0; border-bottom: none; }
.committee-section-body ul li::before { content: '\2022'; position: absolute; left: 0; color: var(--cbit-blue-accent); font-weight: 700; }

@media (max-width: 600px) {
	.single-title { font-size: 24px; }
	.single-body { padding: 32px 0 48px; }
}

/* ---------------------------------------------------------
   PDF viewer — used by the accreditation/certification pages
   (NAAC, ISO) to embed a certificate PDF inline via <iframe>,
   with fallback "open"/"download" links for browsers or
   devices that don't render PDFs inline. Shared markup lives
   in cbit_render_pdf_viewer() in functions.php.
--------------------------------------------------------- */
.pdf-viewer { max-width: 900px; margin: 0 auto; }
.pdf-viewer-frame {
	border: 1px solid #e2e5ee;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 10px 30px rgba(20, 30, 60, .08);
	background: #f4f5f9;
}
.pdf-viewer-frame iframe {
	display: block;
	width: 100%;
	height: 80vh;
	min-height: 480px;
	max-height: 900px;
	border: 0;
}
.pdf-viewer-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: center;
	margin-top: 24px;
}
.pdf-viewer-btn-outline {
	background: #fff !important;
	color: var(--cbit-navy) !important;
	border: 1.5px solid var(--cbit-navy);
}
.pdf-viewer-btn-outline:hover { background: rgba(19,34,74,.06) !important; }

@media (max-width: 600px) {
	.pdf-viewer-frame iframe { height: 65vh; min-height: 360px; }
	.pdf-viewer-actions { flex-direction: column; align-items: stretch; text-align: center; }
}

/* ---------------------------------------------------------
   Best Practices — a photo-led gallery of campus events and
   initiatives. Each card is a photo with a title and (when the
   event has one) a color-cycling date pill, laid out as a
   responsive grid.
--------------------------------------------------------- */
.practice-intro { max-width: 1160px; margin: 0 auto 36px; }
.practice-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 26px;
	max-width: 1160px;
	margin: 0 auto;
}
.practice-card {
	background: #fff;
	border: 1px solid #eceef4;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 4px 14px rgba(20, 30, 60, .05);
	transition: transform .2s ease, box-shadow .2s ease;
}
.practice-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 30px rgba(20, 30, 60, .12);
}
.practice-card-photo {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	background: #f4f5f9;
}
.practice-card-body { padding: 18px 20px 22px; }
.practice-card-date {
	display: inline-block;
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-weight: 700;
	font-size: 12px;
	letter-spacing: .02em;
	padding: 4px 12px;
	border-radius: 999px;
	background: rgba(126,168,224,.12);
	color: var(--cbit-blue-accent);
	margin-bottom: 10px;
}
.practice-card:nth-child(3n+2) .practice-card-date { background: rgba(224,56,79,.1); color: var(--cbit-red); }
.practice-card:nth-child(3n) .practice-card-date { background: rgba(224,176,74,.15); color: var(--cbit-gold); }
.practice-card-title { display: block; font-weight: 700; color: var(--cbit-navy); font-size: 16px; line-height: 1.4; }

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

/* ---------------------------------------------------------
   Best Practices at CBIT — an accessible <details>/<summary>
   accordion (needs no JS) replacing the old page's hand-rolled
   onclick-toggle divs. Each section gets a color-cycling
   numbered badge; items inside get a matching checkmark bullet.
--------------------------------------------------------- */
.practices-intro { max-width: 900px; margin: 0 auto 32px; }
.practices-accordion { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.practices-item {
	border: 1px solid #e5e8f0;
	border-radius: 12px;
	overflow: hidden;
	background: #fff;
}
.practices-item[open] { box-shadow: 0 8px 22px rgba(20, 30, 60, .08); }
.practices-item-summary {
	list-style: none;
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px 22px;
	cursor: pointer;
	font-family: 'Plus Jakarta Sans', sans-serif;
}
.practices-item-summary::-webkit-details-marker { display: none; }
.practices-item-number {
	flex-shrink: 0;
	width: 34px; height: 34px;
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	font-weight: 700; font-size: 14px;
	background: rgba(126,168,224,.14); color: var(--cbit-blue-accent);
}
.practices-item:nth-child(3n+2) .practices-item-number { background: rgba(224,56,79,.1); color: var(--cbit-red); }
.practices-item:nth-child(3n) .practices-item-number { background: rgba(224,176,74,.15); color: var(--cbit-gold); }
.practices-item-title { flex: 1; font-weight: 700; color: var(--cbit-navy); font-size: 15.5px; }
.practices-item-chevron { flex-shrink: 0; color: #8a90a4; transition: transform .2s ease; }
.practices-item[open] .practices-item-chevron { transform: rotate(180deg); }
.practices-item-body { padding: 0 22px 22px 72px; }
.practices-item-body ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.practices-item-body li { position: relative; padding-left: 24px; color: #444; font-size: 14.5px; line-height: 1.6; }
.practices-item-body li::before {
	content: '';
	position: absolute; left: 0; top: 6px;
	width: 14px; height: 14px;
	border-radius: 50%;
	background-color: var(--cbit-blue-accent);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.practices-item:nth-child(3n+2) .practices-item-body li::before { background-color: var(--cbit-red); }
.practices-item:nth-child(3n) .practices-item-body li::before { background-color: var(--cbit-gold); }

@media (max-width: 600px) {
	.practices-item-summary { padding: 14px 16px; gap: 12px; }
	.practices-item-body { padding: 0 16px 18px 16px; }
}

/* ---------------------------------------------------------
   Organization Chart — a hand-built flowchart replacing the
   old static organogram image. Structure:
     President/Secretary -> (Governance, Board of Members)
       -> Principal (+ IQAC alongside)
         -> ten department/cell columns, each its own small
            sub-tree (a classic float-based CSS "tree" that
            auto-draws connecting lines for any number of
            children at any depth — see .oc-tree below).
   The ten columns need ~1900-2300px in a single row — the float-based
   tree connector technique requires them to stay in one row, and capping
   that width would make it wrap onto a second row, breaking every
   connecting line (this happened once already; keep .orgchart's width
   as max-content, never a fixed max-width). That's wider than nearly any
   viewport, so rather than a horizontal scrollbar, a small inline script
   at the bottom of the page template measures the diagram's natural size
   and shrinks it with a CSS transform to fit the available width exactly
   — .orgchart-fit is the clipping wrapper the script resizes against,
   .orgchart is the diagram it scales.
--------------------------------------------------------- */
.orgchart-fit { width: 100%; overflow: hidden; }
/* transform-origin is the LEFT edge on purpose: the script computes
   scale as available-width / natural-width, so scaling from the left
   edge lands the shrunk diagram's right edge exactly at the wrap's own
   right edge — filling it precisely with no separate centering needed.
   ("top center" was tried first and was wrong: this box overflows its
   wrapper before scaling, and CSS resolves an overflowing box's "auto"
   margins to 0 rather than centering it, so its own visual center sits
   well to the right of the wrapper's center — scaling around that point
   left most of the diagram clipped off-screen.) */
.orgchart { width: max-content; margin: 0 auto; padding: 10px 20px 30px; transform-origin: top left; }
.orgchart-title {
	text-align: center;
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-weight: 800;
	font-size: 22px;
	letter-spacing: .02em;
	color: var(--cbit-navy);
	text-decoration: underline;
	text-underline-offset: 6px;
	margin: 0 0 36px;
}

.oc-row-center { display: flex; justify-content: center; align-items: stretch; gap: 50px; }

.oc-box {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 130px;
	padding: 10px 18px;
	border-radius: 6px;
	border: 1.5px solid rgba(20,30,60,.18);
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-weight: 700;
	font-size: 13.5px;
	color: #23283a;
	text-align: center;
	line-height: 1.35;
	box-shadow: 0 2px 6px rgba(20,30,60,.06);
}

.oc-split-box {
	display: flex;
	border-radius: 6px;
	border: 1.5px solid rgba(20,30,60,.18);
	overflow: hidden;
	box-shadow: 0 2px 6px rgba(20,30,60,.06);
}
.oc-split-box span {
	padding: 10px 20px;
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-weight: 700;
	font-size: 13.5px;
	color: #23283a;
}
.oc-split-box span:first-child { border-right: 1.5px solid rgba(20,30,60,.18); }

.oc-c-blue     { background: #dbe7f7; }
.oc-c-olive    { background: #d9d6b6; }
.oc-c-purple   { background: #ded4ee; }
.oc-c-peach    { background: #fbe0c4; }
.oc-c-green    { background: #dcefd2; }
.oc-c-pink     { background: #f6d7d9; }
.oc-c-lavender { background: #e3ddf0; }
.oc-c-white    { background: #f4f4f4; }
.oc-c-yellow   { background: #fdf1b8; }

/* Fixed width on the Governance / Board of Members pair so their row is
   exactly the 390px the fork/merge connector SVGs below assume — without
   it, "Board of Members" being longer text than "Governance" shifts the
   row's true center a few pixels off the connector's hardcoded midpoint. */
.oc-fixed-branch { width: 170px; }

.oc-y-connector { width: 390px; height: 30px; margin: 0 auto; }
.oc-y-connector svg { display: block; width: 100%; height: 100%; }
.oc-y-merge svg { transform: scaleY(-1); }

/* Principal is centered on the same axis as the fork/merge connectors and
   the stem below it; IQAC hangs off as an absolutely-positioned side
   branch so it never shifts that centering (a plain flex row with both
   boxes would instead center the *pair*, pulling Principal off-axis). */
.oc-principal-wrap { display: flex; justify-content: center; margin-top: 30px; }
.oc-principal-anchor { position: relative; display: inline-block; }
.oc-iqac-branch {
	position: absolute; left: 100%; top: 50%;
	transform: translateY(-50%);
	display: flex; align-items: center; gap: 10px;
	margin-left: 24px;
	white-space: nowrap;
}
.oc-arrow { display: flex; align-items: center; color: #8a90a4; font-size: 20px; }

.oc-stem-into-tree { width: 2px; height: 24px; background: rgba(20,30,60,.35); margin: 0 auto; }

/* Classic float-based CSS tree: draws its own connecting lines for any
   number of children (li::before/::after) and any depth (ul ul::before),
   no JS or pixel math needed — used for the ten department/cell columns
   below Principal, since their sub-trees vary from 0 to 2 levels deep. */
.oc-tree-wrap { text-align: center; }
.oc-tree, .oc-tree ul { list-style: none; margin: 0; padding: 0; }
.oc-tree { display: inline-block; }
.oc-tree ul { padding-top: 24px; position: relative; }
.oc-tree ul::after { content: ''; display: table; clear: both; }
.oc-tree li {
	float: left;
	text-align: center;
	list-style-type: none;
	position: relative;
	padding: 24px 10px 0;
}
.oc-tree li::before,
.oc-tree li::after {
	content: '';
	position: absolute; top: 0; right: 50%;
	border-top: 1.5px solid rgba(20,30,60,.35);
	width: 50%; height: 24px;
}
.oc-tree li::after { right: auto; left: 50%; border-left: 1.5px solid rgba(20,30,60,.35); }
.oc-tree li:only-child::after, .oc-tree li:only-child::before { display: none; }
.oc-tree li:only-child { padding-top: 0; }
.oc-tree li:first-child::before, .oc-tree li:last-child::after { border: 0 none; }
.oc-tree li:last-child::before { border-right: 1.5px solid rgba(20,30,60,.35); border-radius: 0 6px 0 0; }
.oc-tree li:first-child::after { border-radius: 6px 0 0 0; }
.oc-tree ul ul::before {
	content: '';
	position: absolute; top: 0; left: 50%;
	border-left: 1.5px solid rgba(20,30,60,.35);
	width: 0; height: 24px;
}
.oc-tree > li { padding-top: 0; }
.oc-tree > li::before, .oc-tree > li::after { display: none; }

.oc-dept-list {
	display: block;
	min-width: 150px;
	padding: 10px 16px;
	text-align: left;
}
.oc-dept-list-header {
	display: block;
	text-decoration: underline;
	text-align: center;
	font-weight: 800;
	margin-bottom: 8px;
	color: #23283a;
}
.oc-dept-list span { display: block; font-weight: 700; font-size: 13px; line-height: 1.6; }
.oc-dept-blue { color: #2c5fb0; }
.oc-dept-dark { color: #222; }
.oc-dept-red { color: #c0392b; }
.oc-dept-cyan { color: #1a8fa0; }

/* ---------------------------------------------------------
   Photo Gallery — homepage bento section, archive grid,
   single-album grid and lightbox (Google-Photos-backed "gallery" CPT)
--------------------------------------------------------- */
.gallery-section-dark {
	position: relative; overflow: hidden;
	background: linear-gradient(135deg, var(--cbit-navy, #0d1b3d), var(--cbit-navy-light, #24345e));
}
.gallery-section-dark::after {
	content: ""; position: absolute; z-index: 0; pointer-events: none; border-radius: 50%;
	width: 340px; height: 340px; bottom: -140px; left: -110px;
	background: radial-gradient(circle, rgba(126,168,224,.14) 0%, rgba(126,168,224,0) 70%);
}
.gallery-section-dark > .container { position: relative; z-index: 1; }

.gallery-section-header {
	display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
	margin-bottom: 32px; flex-wrap: wrap;
}
.section-title--light { color: #fff; }
.section-title--light::after { background: var(--cbit-gold, #e0b04a); }
.gallery-section-intro { color: rgba(255,255,255,.7); font-size: 14.5px; max-width: 560px; margin: 0; }

.gallery-bento {
	display: grid; gap: 16px;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: 160px;
}
.gallery-tile {
	position: relative; display: block; overflow: hidden; border-radius: 14px;
	grid-column: span 1; grid-row: span 1;
	box-shadow: 0 6px 20px rgba(0,0,0,.18);
}
.gallery-tile--large { grid-column: span 2; grid-row: span 2; }

/* Homepage bento tiles — a thick "frame" built entirely from layered
   box-shadow (a solid-colour ring plus a soft drop shadow beneath it)
   rather than a real border, so it follows the tile's rounded corners and
   never disturbs the grid's box sizing. Gives each photo real presence
   against the dark section, echoing the frame look used on the gallery
   pages themselves. */
.gallery-bento .gallery-tile {
	box-shadow:
		0 0 0 5px rgba(255,255,255,.92),
		0 16px 34px rgba(0,0,0,.4);
	transition: box-shadow .25s ease, transform .25s ease;
}
.gallery-bento .gallery-tile:hover {
	box-shadow:
		0 0 0 5px #fff,
		0 22px 44px rgba(0,0,0,.5);
	transform: translateY(-4px);
}
@media (max-width: 560px) {
	.gallery-bento .gallery-tile { box-shadow: 0 0 0 3px rgba(255,255,255,.92), 0 10px 22px rgba(0,0,0,.35); }
}
.gallery-tile-media {
	position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
	transition: transform .35s ease;
}
.gallery-tile-media--pending { background: linear-gradient(135deg, #dfe4ee, #c7cedf); }
.gallery-tile:hover .gallery-tile-media { transform: scale(1.06); }
.gallery-tile-overlay {
	position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; padding: 16px;
	background: linear-gradient(180deg, rgba(13,27,61,0) 0%, rgba(13,27,61,.82) 100%);
	display: flex; flex-direction: column; gap: 4px;
}
.gallery-tile-count {
	align-self: flex-start; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
	color: rgba(255,255,255,.75);
}
.gallery-tile-title {
	font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 15px; color: #fff;
	line-height: 1.3;
}
.gallery-tile--large .gallery-tile-title { font-size: 19px; }

@media (max-width: 900px) {
	.gallery-bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; }
	.gallery-tile--large { grid-column: span 2; grid-row: span 1; }
}
@media (max-width: 560px) {
	.gallery-section-header { align-items: flex-start; }
	.gallery-bento { grid-template-columns: 1fr; }
	.gallery-tile--large { grid-column: span 1; }
}

/* Archive grid (/gallery/ and the page-gallery-2.php page) — small, elegant
   cards styled like instant-camera "selfie" photo frames: a white paper
   border around the photo (thicker at the bottom, like a Polaroid), a strip
   of washi tape pinning it down, and a gentle candid tilt that straightens
   out on hover. auto-fill + a capped column width (not auto-fit + 1fr)
   keeps cards a fixed, modest size and centred instead of stretching to
   fill the row on wide screens. */
.gallery-archive-grid {
	display: grid; gap: 36px 28px; justify-content: center; align-items: start;
	grid-template-columns: repeat(auto-fill, minmax(210px, 240px));
	padding-top: 30px;
}
.gallery-archive-grid .gallery-tile {
	position: relative; background: #fff; padding: 10px 10px 0;
	border: 1px solid rgba(13,27,61,.08);
	border-radius: 6px;
	box-shadow: 0 10px 24px rgba(13,27,61,.14);
	transition: transform .25s ease, box-shadow .25s ease;
	overflow: visible; /* .gallery-tile's base rule sets overflow:hidden for the
		bento tiles; that would slice the top off the pin here, since it
		pokes up above the card on purpose. The photo itself doesn't need
		clipping — it has its own border-radius (see .gallery-tile-media
		below) — so it's safe to show anything that pokes outside the card. */
}
.gallery-archive-grid .gallery-tile:nth-child(3n+1) { transform: rotate(-2.5deg); }
.gallery-archive-grid .gallery-tile:nth-child(3n+2) { transform: rotate(1.8deg); }
.gallery-archive-grid .gallery-tile:nth-child(3n)   { transform: rotate(-1.2deg); }
.gallery-archive-grid .gallery-tile:hover {
	transform: rotate(0deg) translateY(-6px) scale(1.03);
	box-shadow: 0 20px 34px rgba(13,27,61,.24);
	z-index: 2;
}
/* Red pushpin pinning the "photo" to the page — a proper pushpin silhouette
   (a wider glossy top flare, a narrower lower cushion, a shaded "waist"
   between the two, and a clearly separate metal needle at an angle) instead
   of a flat circle, matching a real thumbtack's shape. */
.gallery-archive-grid .gallery-tile::before {
	/* A real photo of a pushpin (cropped to its silhouette, background removed) rather than
	   a drawn approximation — this is what makes it read as an actual pin instead of an icon. */
	content: ""; position: absolute; z-index: 3; top: -38px; left: 50%; margin-left: -23px;
	width: 46px; height: 63px;
	background-image: url("assets/images/pushpin-red.png");
	background-repeat: no-repeat; background-size: contain;
	filter: drop-shadow(1px 5px 3px rgba(13,27,61,.4));
}
.gallery-archive-grid .gallery-tile-media {
	position: static; width: 100%; aspect-ratio: 4/3.15;
	border-radius: 2px;
}
.gallery-archive-grid .gallery-tile-overlay {
	position: static; background: none; padding: 10px 4px 16px; gap: 3px; text-align: center;
}
.gallery-archive-grid .gallery-tile-count { align-self: center; color: #9aa5c0; }
.gallery-archive-grid .gallery-tile-title { color: var(--cbit-navy, #0d1b3d); font-size: 14.5px; }

@media (max-width: 480px) {
	.gallery-archive-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 200px)); gap: 30px 18px; }
}

/* Single album photo grid + lightbox */
.gallery-photo-grid {
	display: grid; gap: 14px;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.gallery-photo {
	display: block; border-radius: 10px; overflow: hidden; aspect-ratio: 4/3;
	box-shadow: 0 2px 10px rgba(13,27,61,.08);
}
.gallery-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.gallery-photo:hover img { transform: scale(1.05); }

.gallery-lightbox {
	position: fixed; inset: 0; z-index: 9999; background: rgba(6,10,24,.92);
	display: flex; align-items: center; justify-content: center; padding: 40px;
}
.gallery-lightbox[hidden] { display: none; }
.gallery-lightbox-img { max-width: 100%; max-height: 100%; border-radius: 6px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.gallery-lightbox-close {
	position: absolute; top: 20px; right: 28px; background: none; border: 0; color: #fff;
	font-size: 34px; line-height: 1; cursor: pointer; opacity: .85;
}
.gallery-lightbox-close:hover { opacity: 1; }

.gallery-lightbox-nav {
	position: absolute; top: 50%; transform: translateY(-50%); z-index: 1;
	width: 52px; height: 52px; border-radius: 50%; border: 0; cursor: pointer;
	background: rgba(255,255,255,.12); color: #fff; font-size: 30px; line-height: 1;
	display: flex; align-items: center; justify-content: center;
	transition: background .18s ease, transform .18s ease;
}
.gallery-lightbox-nav:hover { background: rgba(255,255,255,.24); }
.gallery-lightbox-prev { left: 18px; }
.gallery-lightbox-next { right: 18px; }
.gallery-lightbox-counter {
	position: absolute; left: 0; right: 0; bottom: 18px; text-align: center;
	color: rgba(255,255,255,.7); font-size: 13px; font-weight: 600; letter-spacing: .04em;
}
@media (max-width: 600px) {
	.gallery-lightbox-nav { width: 42px; height: 42px; font-size: 24px; }
	.gallery-lightbox-prev { left: 8px; }
	.gallery-lightbox-next { right: 8px; }
}
.oc-dept-purple { color: #6a3fa0; }

/* ---------------------------------------------------------
   404 — Page Not Found
--------------------------------------------------------- */
.notfound-hero {
	position: relative; overflow: hidden; background: var(--cbit-navy);
	padding: 96px 0 88px; border-top: 4px solid var(--cbit-red);
}
.notfound-hero-numeral {
	position: absolute; top: 50%; right: -0.06em; transform: translateY(-50%);
	font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 340px;
	line-height: 1; color: rgba(255,255,255,.05); letter-spacing: -0.04em;
	pointer-events: none; user-select: none; z-index: 0; white-space: nowrap;
}
.notfound-hero-inner { position: relative; z-index: 1; max-width: 620px; }
.notfound-eyebrow {
	font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
	color: var(--cbit-blue-accent); margin: 0 0 12px;
}
.notfound-heading {
	font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-weight: 700;
	font-size: 42px; line-height: 1.15; color: #fff; margin: 0 0 16px;
}
.notfound-message { color: #c7cedf; font-size: 15.5px; line-height: 1.65; max-width: 480px; margin: 0; }
.notfound-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }

.notfound-links-section { padding: 56px 0 72px; }
.notfound-links-grid {
	display: grid; gap: 20px; margin-top: 28px;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.notfound-link-card {
	display: flex; align-items: center; gap: 14px; background: #fff;
	border: 1px solid #eceef4; border-radius: 12px; padding: 18px;
	box-shadow: 0 2px 10px rgba(13,27,61,.05);
	transition: transform .18s ease, box-shadow .18s ease;
}
.notfound-link-card:hover { transform: translateY(-3px); box-shadow: 0 12px 24px rgba(13,27,61,.12); }
.notfound-link-icon {
	flex-shrink: 0; width: 48px; height: 48px; border-radius: 10px;
	background: rgba(13,27,61,.06); color: var(--cbit-navy);
	display: flex; align-items: center; justify-content: center;
	transition: background .18s ease, color .18s ease;
}
.notfound-link-card:hover .notfound-link-icon { background: var(--cbit-red); color: #fff; }
.notfound-link-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.notfound-link-title { font-weight: 700; font-size: 15px; color: var(--cbit-navy); }
.notfound-link-sub { font-size: 12.5px; color: #7a8296; }
.notfound-link-arrow {
	flex-shrink: 0; font-weight: 700; font-size: 18px; color: var(--cbit-blue-accent);
	transition: transform .18s ease, color .18s ease;
}
.notfound-link-card:hover .notfound-link-arrow { color: var(--cbit-red); transform: translateX(4px); }

@media (max-width: 640px) {
	.notfound-hero { padding: 72px 0 56px; }
	.notfound-hero-numeral { font-size: 200px; }
	.notfound-heading { font-size: 30px; }
	.notfound-message { font-size: 14.5px; }
	.notfound-link-card { padding: 14px; }
}