/* ============================================================================
 *  MNMJEC  —  DESIGN REFRESH
 * ============================================================================
 *  Design / layout only. No wording, no links, no menu items are changed here.
 *  This file is loaded AFTER style.css on every page, so every rule below
 *  simply re-skins mark-up that already exists.
 *
 *  CONTENTS
 *   1.  Design tokens
 *   2.  Header — top contact bar
 *   3.  Header — logo strip + main navigation (desktop) + drop-downs
 *   4.  Footer
 *   5.  Floating admission card (code version of the old banner image)
 *   6.  Home — Our Courses
 *   7.  Home — Our Facilities
 *   8.  Home — Campus Placements
 *   9.  Home — Other Institutes
 * ==========================================================================*/


/* ==========================================================================
 * 1. DESIGN TOKENS
 * ========================================================================*/
:root {
	--mnm-blue: #1a75bb;
	--mnm-blue-deep: #0f4d7f;
	--mnm-blue-dark: #0a3557;
	--mnm-blue-light: #def1ff;
	--mnm-green: #8bc43f;
	--mnm-green-dark: #6da22a;
	--mnm-red: #e01931;
	--mnm-red-deep: #a80d1e;
	--mnm-radius: 16px;
	--mnm-shadow-sm: 0 4px 14px rgba(15, 77, 127, .09);
	--mnm-shadow-md: 0 10px 28px rgba(15, 77, 127, .15);
	--mnm-shadow-lg: 0 18px 44px rgba(10, 53, 87, .24);
	--mnm-ease: cubic-bezier(.22, .61, .36, 1);
}


/* ==========================================================================
 * 2. HEADER — TOP CONTACT BAR
 * ========================================================================*/
.header2-area .header-top-area {
	position: relative;
	background: linear-gradient(90deg, #0a4471 0%, #1a75bb 48%, #1f8ad9 100%);
	border-bottom: 2px solid var(--mnm-green);
}

/* the bootstrap clearfix pseudos would become stray flex items */
.header2-area .header-top-area .row:before,
.header2-area .header-top-area .row:after {
	display: none;
}

.header2-area .header-top-area .row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

/* ---- left: phone / email / address ------------------------------------- */
.header2-area .header-top-area .header-top-left {
	margin: 0;
}

.header2-area .header-top-area .header-top-left ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.header2-area .header-top-area .header-top-left ul li {
	display: inline-flex;
	align-items: center;
	margin: 0 16px 0 0;
	padding: 8px 16px 8px 0;
	border-right: 1px solid rgba(255, 255, 255, .22);
	text-transform: none;
	line-height: 1.2;
}

.header2-area .header-top-area .header-top-left ul li i {
	width: 27px;
	height: 27px;
	margin-right: 10px;
	padding: 0;
	flex: 0 0 27px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(255, 255, 255, .15);
	color: var(--mnm-green);
	font-size: 13px;
	transition: all .3s var(--mnm-ease);
}

.header2-area .header-top-area .header-top-left ul li:hover i {
	background: var(--mnm-green);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 4px 10px rgba(0, 0, 0, .2);
}

.header2-area .header-top-area .header-top-left ul li a {
	color: rgba(255, 255, 255, .93);
	font-size: 14px;
	font-weight: 400;
	letter-spacing: .3px;
}

.header2-area .header-top-area .header-top-left ul li:hover a {
	color: #fff;
}

/* ---- right: fee portal + mail box, as pill buttons --------------------- */
.header2-area .header-top-area .header-top-right {
	text-align: right;
}

.header2-area .header-top-area .header-top-right ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	margin: 0;
	padding: 0;
	list-style: none;
}

.header2-area .header-top-area .header-top-right ul li {
	padding: 6px 0 6px 10px;
	font-size: inherit;
}

/* the wrapper div also carries .apply-now-btn2 — keep it neutral */
.header2-area .header-top-area div.apply-now-btn2 {
	width: auto;
	padding: 0;
	background: none;
	display: block;
}

.header2-area .header-top-area a.apply-now-btn2 {
	width: auto;
	display: inline-flex;
	align-items: center;
	padding: 8px 20px;
	border: 1px solid rgba(255, 255, 255, .28);
	border-radius: 999px;
	background: linear-gradient(135deg, var(--mnm-green) 0%, var(--mnm-green-dark) 100%);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .7px;
	line-height: 1.3;
	box-shadow: 0 4px 12px rgba(139, 196, 63, .38);
	transition: all .3s var(--mnm-ease);
}

.header2-area .header-top-area a.apply-now-btn2:hover {
	background: #fff;
	color: var(--mnm-blue) !important;
	border-color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 8px 18px rgba(0, 0, 0, .22);
}

.header2-area .header-top-area .header-top-right ul li .mail-btn-area {
	display: inline-flex;
	align-items: center;
	padding: 7px 20px;
	border: 1px solid rgba(255, 255, 255, .45);
	border-radius: 999px;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .7px;
	line-height: 1.3;
	transition: all .3s var(--mnm-ease);
}

.header2-area .header-top-area .header-top-right ul li .mail-btn-area i {
	padding-right: 8px;
	color: var(--mnm-blue-light);
	transition: all .3s var(--mnm-ease);
}

.header2-area .header-top-area .header-top-right ul li .mail-btn-area:hover {
	background: #fff;
	border-color: #fff;
	color: var(--mnm-blue);
	transform: translateY(-2px);
	box-shadow: 0 8px 18px rgba(0, 0, 0, .22);
}

.header2-area .header-top-area .header-top-right ul li .mail-btn-area:hover i {
	color: var(--mnm-blue);
}

@media only screen and (max-width: 991px) {

	.header2-area .header-top-area .header-top-left ul,
	.header2-area .header-top-area .header-top-right ul {
		justify-content: center;
	}

	.header2-area .header-top-area .header-top-right {
		text-align: center;
	}

	.header2-area .header-top-area .header-top-left ul li:last-child {
		border-right: 0;
	}
}

@media only screen and (max-width: 767px) {
	.header2-area .header-top-area .header-top-left ul li {
		margin-right: 8px;
		padding: 6px 8px 6px 0;
	}

	.header2-area .header-top-area .header-top-left ul li i {
		width: 22px;
		height: 22px;
		flex-basis: 22px;
		margin-right: 6px;
		font-size: 11px;
	}

	.header2-area .header-top-area .header-top-left ul li a {
		font-size: 12px;
	}

	.header2-area .header-top-area a.apply-now-btn2,
	.header2-area .header-top-area .header-top-right ul li .mail-btn-area {
		padding: 6px 14px;
		font-size: 10px;
		letter-spacing: .4px;
	}
}


/* ==========================================================================
 * 3. HEADER — LOGO STRIP + MAIN NAVIGATION
 * ========================================================================*/
.main-menu-area {
	border-top: 0;
}

.main-menu-area.bg-primary {
	background: linear-gradient(90deg, #0a4471 0%, #1a75bb 50%, #0a4471 100%);
	box-shadow: 0 6px 18px rgba(10, 53, 87, .18);
}

/* ---- logo strip -------------------------------------------------------- */
.main-menu-area .bg-blue {
	background: #def1ff;
	border-top: 0;
	border-bottom: 1px solid rgba(26, 117, 187, .14);
}

.main-menu-area .logo-area {
	margin: 14px auto;
}

.main-menu-area .logo-area img {
	display: inline-block;
	max-width: 100%;
	height: auto;
	transition: transform .45s var(--mnm-ease);
}

.main-menu-area .logo-area a:hover img {
	transform: scale(1.015);
}

/* ---- non-sticky header -------------------------------------------------
   The header scrolls away with the page. The sticky handler in js/main.js is
   switched off, but style.css still carries `.stick { position: fixed }`, so
   neutralise it here in case the class is ever re-applied by a cached script. */
.header2-area .stick,
.header2-area #sticker.stick {
	position: static;
	background: linear-gradient(90deg, #0a4471 0%, #1a75bb 50%, #0a4471 100%);
	box-shadow: 0 6px 18px rgba(10, 53, 87, .18);
	border-bottom: 0;
}

/* ---- nav bar ----------------------------------------------------------- */
.header2-area .nav-container {
	padding-left: 2%;
	padding-right: 2%;
	border-top: 1px solid rgba(255, 255, 255, .12);
}

.header2-area #desktop-nav {
	padding: 4px 0 6px;
}

.header2-area nav#desktop-nav>ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* the menu builder emits a <br> for the old two-row layout — the flex row
   now wraps on its own, so the hard break is no longer needed */
.header2-area nav#desktop-nav>ul>br {
	display: none;
}

.header2-area nav#desktop-nav>ul>li {
	margin: 2px 1px;
	position: relative;
}

.header2-area nav#desktop-nav>ul>li>a {
	position: relative;
	display: block;
	padding: 11px 11px;
	border-radius: 10px;
	color: rgba(255, 255, 255, .9);
	font-family: var(--jost-font);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: .2px;
	text-transform: uppercase;
	white-space: nowrap;
	transition: color .25s var(--mnm-ease), background .25s var(--mnm-ease);
}

.header2-area nav#desktop-nav>ul>li>a:after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 5px;
	width: 0;
	height: 2px;
	border-radius: 2px;
	background: var(--mnm-green);
	transform: translateX(-50%);
	transition: width .3s var(--mnm-ease);
}

.header2-area nav#desktop-nav>ul>li:hover>a,
.header2-area nav#desktop-nav>ul>li>a:hover,
.header2-area nav#desktop-nav>ul>.active>a {
	color: #fff;
	background: rgba(255, 255, 255, .13);
}

.header2-area nav#desktop-nav>ul>li:hover>a:after,
.header2-area nav#desktop-nav>ul>.active>a:after {
	width: calc(100% - 22px);
}

.header2-area nav#desktop-nav>ul>li>a .fa-angle-down {
	margin-left: 6px;
	font-size: 12px;
	opacity: .8;
	display: inline-block;
	transition: transform .3s var(--mnm-ease);
}

.header2-area nav#desktop-nav>ul>li:hover>a .fa-angle-down {
	transform: rotate(180deg);
}

/* ---- drop-downs (level 2) ---------------------------------------------- */
.header2-area nav#desktop-nav ul li>ul {
	left: 0;
	top: 100%;
	margin-top: 8px;
	width: 268px;
	padding: 8px 0;
	background: #ffffff;
	border: 1px solid rgba(26, 117, 187, .12);
	border-radius: 14px;
	box-shadow: var(--mnm-shadow-lg);
	transform-origin: top center;
	transform: translateY(10px);
	transition: opacity .25s var(--mnm-ease), transform .25s var(--mnm-ease);
	overflow: visible;
}

/* small pointer + a hover bridge so the pointer can cross the gap */
.header2-area nav#desktop-nav>ul>li>ul:before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -8px;
	height: 8px;
	width: 100%;
	background: transparent;
	transition: none;
}

.header2-area nav#desktop-nav>ul>li>ul:after {
	content: "";
	position: absolute;
	left: 26px;
	top: -6px;
	width: 12px;
	height: 12px;
	background: #fff;
	border-left: 1px solid rgba(26, 117, 187, .12);
	border-top: 1px solid rgba(26, 117, 187, .12);
	transform: rotate(45deg);
	border-radius: 2px 0 0 0;
}

.header2-area nav#desktop-nav ul li:hover>ul {
	transform: translateY(0);
}

.header2-area nav#desktop-nav ul li>ul>li {
	border-bottom: 0;
	padding: 0 6px;
}

.header2-area nav#desktop-nav ul li>ul>li>a {
	position: relative;
	padding: 9px 12px 9px 20px;
	border-radius: 9px;
	color: #17456b;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.35;
	text-transform: capitalize;
	transition: all .25s var(--mnm-ease);
}

.header2-area nav#desktop-nav ul li>ul>li>a:before {
	content: "";
	position: absolute;
	left: 8px;
	top: 50%;
	width: 5px;
	height: 5px;
	margin-top: -2.5px;
	border-radius: 50%;
	background: var(--mnm-green);
	opacity: .55;
	transition: all .25s var(--mnm-ease);
}

.header2-area nav#desktop-nav ul li>ul>li:hover,
.header2-area nav#desktop-nav ul li>ul>li .active {
	background: transparent;
}

.header2-area nav#desktop-nav ul li>ul>li:hover>a {
	background: linear-gradient(90deg, rgba(26, 117, 187, .1), rgba(26, 117, 187, 0));
	color: var(--mnm-blue);
	padding-left: 24px;
}

.header2-area nav#desktop-nav ul li>ul>li:hover>a:before {
	opacity: 1;
	width: 7px;
	height: 7px;
	margin-top: -3.5px;
}

/* ---- fly-out (level 3) ------------------------------------------------- */
.header2-area nav#desktop-nav li.has-child-menu>a {
	color: #17456b;
}

.header2-area nav#desktop-nav li.has-child-menu>a:after {
	color: var(--mnm-blue);
	opacity: .7;
}

.header2-area nav#desktop-nav li.has-child-menu>ul.thired-level {
	left: 100%;
	top: -8px;
	margin-top: 0;
	margin-left: 6px;
}

.header2-area nav#desktop-nav li.has-child-menu>ul.thired-level:after {
	display: none;
}

.header2-area nav#desktop-nav li.has-child-menu>ul.thired-level li a {
	color: #17456b;
}

.header2-area nav#desktop-nav li.has-child-menu>ul.thired-level li:hover>a {
	color: var(--mnm-blue);
}

@media (min-width:992px) and (max-width:1199px) {
	.header2-area nav#desktop-nav>ul>li>a {
		padding: 10px 10px;
		font-size: 13.5px;
	}
}

@media (min-width:768px) and (max-width:991px) {
	.header2-area nav#desktop-nav>ul>li>a {
		padding: 9px 8px;
		font-size: 12.5px;
	}

	.header2-area nav#desktop-nav ul li>ul {
		width: 230px;
	}
}


/* ==========================================================================
 * 4. FOOTER
 * ========================================================================*/
.footer-area-top {
	position: relative;
	padding: 60px 0 40px;
	background: linear-gradient(150deg, #0a3557 0%, #12557f 45%, #1a75bb 100%);
	overflow: hidden;
}

.footer-area-top:before {
	content: "";
	position: absolute;
	top: -120px;
	right: -90px;
	width: 340px;
	height: 340px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(139, 196, 63, .22) 0%, rgba(139, 196, 63, 0) 70%);
	pointer-events: none;
}

.footer-area-top:after {
	content: "";
	position: absolute;
	left: -80px;
	bottom: -140px;
	width: 320px;
	height: 320px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(222, 241, 255, .16) 0%, rgba(222, 241, 255, 0) 70%);
	pointer-events: none;
}

.footer-area-top>.container,
.footer-area-top>.container-fluid {
	position: relative;
	z-index: 1;
}

/* the footer spans the full window width instead of the centred grid — a
   percentage gutter keeps the boxes off the very edge on wide screens */
.footer-fluid {
	width: 100%;
	max-width: none;
	padding-left: 3%;
	padding-right: 3%;
}

.footer-grid:before,
.footer-grid:after {
	display: none;
}

.footer-grid {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
}

/* The bootstrap columns are plain blocks, so `height:100%` on the card inside
   is only as reliable as the browser's flex-stretch behaviour. Making each
   column a flex container too pins all three cards to the same height for
   real, whatever the map or the blurb do to the content length. */
.footer-grid>[class*="col-"] {
	display: flex;
	flex-direction: column;
}

.footer-area-top .footer-box {
	position: relative;
	overflow: hidden;
	flex: 1 1 auto;
	height: auto;
	display: flex;
	flex-direction: column;
	padding: 30px 26px;
	background: linear-gradient(165deg, rgba(255, 255, 255, .09) 0%, rgba(255, 255, 255, .035) 100%);
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: 18px;
	transition: border-color .35s var(--mnm-ease), background .35s var(--mnm-ease);
}

/* a hairline of brand colour down the leading edge of every card */
.footer-area-top .footer-box:before {
	content: "";
	position: absolute;
	left: 0;
	top: 30px;
	bottom: 30px;
	width: 2px;
	border-radius: 2px;
	background: linear-gradient(180deg, var(--mnm-green), rgba(139, 196, 63, 0));
	opacity: .65;
}

.footer-area-top .footer-box:hover {
	background: linear-gradient(165deg, rgba(255, 255, 255, .13) 0%, rgba(255, 255, 255, .05) 100%);
	border-color: rgba(139, 196, 63, .38);
}

.footer-area-top h3 {
	position: relative;
	margin-bottom: 22px;
	padding-bottom: 14px;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .95);
}

.footer-area-top h3:after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 34px;
	height: 2px;
	border-radius: 2px;
	background: var(--mnm-green);
}

/* ---- column 1: the college name doubles as the heading ------------------ */
.footer-area-top .footer-title--brand {
	margin-bottom: 20px;
	padding-bottom: 16px;
	font-size: 20px;
	font-weight: 700;
	letter-spacing: .2px;
	line-height: 1.35;
	text-transform: none;
	color: #fff;
}

.footer-area-top .footer-title--brand:after {
	width: 54px;
	height: 3px;
	background: linear-gradient(90deg, var(--mnm-green), rgba(139, 196, 63, 0));
}

/* ---- about the college ------------------------------------------------- */
/* A paragraph can't stretch the way a map or a list can, so instead of letting
   the leftover height pool as a gap under the last line, the blurb takes the
   full remaining space and centres itself in it. */
.footer-area-top .footer-intro {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.footer-area-top .footer-intro p {
	margin-bottom: 0;
	color: rgba(255, 255, 255, .78);
	font-size: 14.5px;
	font-weight: 400;
	line-height: 38px;
	text-align: justify;
}

/* ---- address list ------------------------------------------------------
   Grows to fill column 2 and spreads its rows evenly, so the gap that used to
   sit between the last address line and the social links is taken up by the
   list itself rather than left blank. */
.footer-area-top .corporate-address {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	margin-bottom: 0;
	list-style: none;
	padding: 0;
}

.footer-area-top .corporate-address li {
	position: relative;
	margin-bottom: 14px;
	padding: 0 0 0 44px;
	font-size: 15px;
	transition: all .3s var(--mnm-ease);
}

.footer-area-top .corporate-address li:last-child {
	margin-bottom: 0;
}

.footer-area-top .corporate-address li i {
	position: absolute;
	left: 0;
	top: 1px;
	width: 30px;
	height: 30px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(139, 196, 63, .16);
	color: var(--mnm-green);
	font-size: 13px;
	transition: all .3s var(--mnm-ease);
}

.footer-area-top .corporate-address li:hover i {
	background: var(--mnm-green);
	color: #fff;
}

.footer-area-top .corporate-address li a {
	font-size: 15.5px;
	font-weight: 400;
	line-height: 1.6;
	color: rgba(255, 255, 255, .88);
	transition: color .3s var(--mnm-ease);
}

.footer-area-top .corporate-address li:hover a {
	color: #fff;
}

/* ---- map --------------------------------------------------------------- */
.footer-area-top .flickr-photos {
	flex: 1 1 auto;
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
	border-radius: 12px;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, .18);
	box-shadow: 0 10px 24px rgba(0, 0, 0, .18);
	line-height: 0;
}

.footer-area-top .flickr-photos iframe {
	flex: 1 1 auto;
	display: block;
	width: 100%;
	height: 100%;
	min-height: 200px;
	border: 0;
	filter: saturate(1.05);
}

/* ---- social icons -------------------------------------------------------
   The social links close out column 2, sitting under the address list. */
.footer-area-top .social-box {
	flex: 0 0 auto;
	display: block;
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid rgba(255, 255, 255, .12);
}

.footer-area-top .social-box h3 {
	margin-top: 0;
	margin-bottom: 18px;
}

.footer-area-top .social-box ul {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	list-style: none;
}

.footer-area-top .social-box ul li {
	padding: 0 12px 0 0;
}

.footer-area-top .social-box ul li a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .16);
	transition: all .35s var(--mnm-ease);
}

.footer-area-top .social-box ul li a img {
	height: 22px;
	width: auto;
	transition: transform .35s var(--mnm-ease);
}

.footer-area-top .social-box ul li a:hover {
	background: #fff;
	border-color: #fff;
	transform: translateY(-4px);
	box-shadow: 0 10px 20px rgba(0, 0, 0, .26);
}

.footer-area-top .social-box ul li a:hover img {
	transform: scale(1.1);
}

/* ---- copyright strip --------------------------------------------------- */
.footer-area-bottom {
	position: relative;
	padding: 16px 0;
	background: #072a46;
	border-top: 0;
}

.footer-area-bottom:before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 2px;
	background: linear-gradient(90deg, var(--mnm-blue) 0%, var(--mnm-green) 50%, var(--mnm-blue) 100%);
}

.footer-area-bottom .row:before,
.footer-area-bottom .row:after {
	display: none;
}

.footer-area-bottom .row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.footer-area-bottom p {
	margin: 0;
	color: rgba(255, 255, 255, .6);
	font-size: 13.5px;
	letter-spacing: .3px;
}

.footer-area-bottom .col-lg-4 p,
.footer-area-bottom .col-md-4 p {
	text-align: right;
}

.footer-area-bottom p a {
	color: #fff;
	font-weight: 500;
}

.footer-area-bottom p a:hover {
	color: var(--mnm-green);
}

@media only screen and (max-width: 991px) {
	.footer-fluid {
		padding-left: 15px;
		padding-right: 15px;
	}

	.footer-area-top .footer-box {
		margin-bottom: 24px;
	}
}

@media only screen and (max-width: 767px) {
	.footer-area-top {
		padding: 42px 0 20px;
	}

	.footer-area-top .footer-box {
		padding: 20px 16px;
	}

	.footer-area-top .footer-intro p {
		font-size: 14px;
	}

	.footer-area-bottom .row {
		justify-content: center;
	}

	.footer-area-bottom p,
	.footer-area-bottom .col-lg-4 p,
	.footer-area-bottom .col-md-4 p {
		text-align: center;
		margin-bottom: 6px;
	}
}


/* ==========================================================================
 * 5. FLOATING ADMISSION CARD
 *    Replaces img/admission-2026-2027-contact.png with real mark-up.
 *    position:fixed, so it never takes part in page flow — nothing else
 *    on the page moves because of it.
 * ========================================================================*/
.admission-float {
	position: fixed;
	left: 12px;
	bottom: 16px;
	width: 148px;
	z-index: 99990;
}

.admission-float.is-closed {
	display: none;
}

.admission-float__inner {
	position: relative;
	padding: 12px 10px 11px;
	border-radius: 15px;
	background: linear-gradient(160deg, #f01c35 0%, #d31329 45%, #a80d1e 100%);
	border: 2px solid rgba(255, 255, 255, .55);
	box-shadow: 0 16px 38px rgba(168, 13, 30, .45), 0 0 0 6px rgba(224, 25, 49, .12);
	text-align: center;
	animation: mnmAdmissionBeat 1.6s infinite;
	transform-origin: center center;
}

.admission-float:hover .admission-float__inner {
	animation-play-state: paused;
}

@keyframes mnmAdmissionBeat {
	0% {
		transform: scale(1);
	}

	22% {
		transform: scale(1.045);
	}

	38% {
		transform: scale(1);
	}

	56% {
		transform: scale(1.045);
	}

	100% {
		transform: scale(1);
	}
}

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

/* close button */
.admission-float__close {
	position: absolute;
	top: -8px;
	right: -8px;
	width: 21px;
	height: 21px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(255, 255, 255, .7);
	border-radius: 50%;
	background: #a80d1e;
	color: #fff;
	font-size: 13px;
	line-height: 1;
	cursor: pointer;
	transition: all .25s var(--mnm-ease);
}

.admission-float__close:hover {
	background: #fff;
	color: #a80d1e;
	transform: rotate(90deg);
}

/* counselling code */
.admission-float__code {
	padding: 6px 5px 7px;
	margin-bottom: 9px;
	border-radius: 10px;
	background: rgba(255, 255, 255, .14);
	border: 1px solid rgba(255, 255, 255, .3);
}

.admission-float__code-label {
	display: block;
	color: #ffe9ec;
	font-family: var(--jost-font);
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	line-height: 1.3;
}

.admission-float__code-value {
	display: block;
	margin-top: 1px;
	color: #fff;
	font-family: var(--jost-font);
	font-size: 24px;
	font-weight: 800;
	letter-spacing: 1.5px;
	line-height: 1.1;
	text-shadow: 0 2px 8px rgba(0, 0, 0, .28);
}

/* admission year
   style.css carries a global `p { text-align: justify }`. That sits on the
   element itself, so it beats the `text-align:center` these paragraphs would
   otherwise inherit from .admission-float__inner — and a one-line justified
   paragraph renders left-aligned. Hence "ADMISSION" and "2026 - 2027" drifting
   left while the button and phone numbers stayed centred. */
.admission-float__inner p {
	text-align: center;
}

.admission-float__title {
	margin: 0;
	color: #fff;
	font-family: var(--jost-font);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 1.1px;
	text-transform: uppercase;
	line-height: 1.2;
}

.admission-float__year {
	margin: 2px 0 9px;
	color: #fff;
	font-family: var(--jost-font);
	font-size: 15px;
	font-weight: 800;
	letter-spacing: .6px;
	line-height: 1.2;
}

.admission-float__year:after {
	content: "";
	display: block;
	width: 36px;
	height: 2px;
	margin: 7px auto 0;
	border-radius: 2px;
	background: rgba(255, 255, 255, .55);
}

/* apply now */
.admission-float__btn {
	display: block;
	padding: 8px 6px;
	border-radius: 999px;
	background: #fff;
	color: #c2101f;
	font-family: var(--jost-font);
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: .6px;
	text-transform: uppercase;
	box-shadow: 0 6px 16px rgba(0, 0, 0, .22);
	transition: all .3s var(--mnm-ease);
}

.admission-float__btn:hover,
.admission-float__btn:focus {
	background: #ffe600;
	color: #8e0a18;
	transform: translateY(-2px);
	box-shadow: 0 10px 22px rgba(0, 0, 0, .3);
}

/* contact */
.admission-float__contact {
	margin-top: 9px;
	padding-top: 8px;
	border-top: 1px dashed rgba(255, 255, 255, .35);
}

.admission-float__contact-label {
	display: block;
	margin-bottom: 4px;
	color: #ffd7dc;
	font-family: var(--jost-font);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 1.2px;
	text-transform: uppercase;
}

.admission-float__contact a {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 2px;
	color: #fff;
	font-family: var(--jost-font);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .2px;
	white-space: nowrap;
	transition: color .25s var(--mnm-ease);
}

.admission-float__contact a i {
	margin-right: 5px;
	font-size: 10px;
	opacity: .85;
}

.admission-float__contact a:hover {
	color: #ffe600;
}

@media only screen and (max-width: 1399px) {
	.admission-float {
		width: 142px;
		left: 8px;
	}

	.admission-float__code-value {
		font-size: 22px;
	}
}

@media only screen and (max-width: 1199px) {
	.admission-float {
		width: 134px;
	}

	.admission-float__inner {
		padding: 11px 9px 10px;
	}

	.admission-float__code-value {
		font-size: 21px;
	}

	.admission-float__title {
		font-size: 11.5px;
	}

	.admission-float__year {
		font-size: 14px;
	}

	.admission-float__btn {
		font-size: 11px;
		padding: 7px 5px;
	}

	.admission-float__contact a {
		font-size: 11px;
	}
}

@media only screen and (max-width: 991px) {
	.admission-float {
		bottom: 12px;
		left: 10px;
		width: 124px;
	}

	.admission-float__inner {
		padding: 9px 7px 9px;
		border-radius: 13px;
	}

	.admission-float__code {
		margin-bottom: 8px;
		padding: 5px 4px 6px;
	}

	.admission-float__code-label {
		font-size: 8px;
		letter-spacing: .8px;
	}

	.admission-float__code-value {
		font-size: 19px;
	}

	.admission-float__title {
		font-size: 10.5px;
		letter-spacing: .8px;
	}

	.admission-float__year {
		font-size: 12.5px;
		margin-bottom: 8px;
	}

	.admission-float__year:after {
		margin-top: 6px;
	}

	.admission-float__btn {
		font-size: 10px;
		padding: 6px 4px;
		letter-spacing: .4px;
	}

	.admission-float__contact {
		margin-top: 8px;
		padding-top: 7px;
	}

	.admission-float__contact-label {
		font-size: 8px;
		letter-spacing: 1px;
	}

	.admission-float__contact a {
		font-size: 10px;
	}

	.admission-float__contact a i {
		margin-right: 4px;
		font-size: 9px;
	}
}


/* ==========================================================================
 * 6. HOME — OUR COURSES
 * ========================================================================*/
.studies_sec {
	position: relative;
	background-position: center;
	background-size: cover;
	box-shadow: none;
}

.studies_sec:before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: linear-gradient(135deg, rgba(8, 43, 71, .88) 0%, rgba(15, 77, 127, .78) 50%, rgba(8, 43, 71, .9) 100%);
}

.studies_sec>.container-fuild {
	position: relative;
	z-index: 1;
}

.studies_sec h2.login-title {
	position: relative;
	margin-bottom: 8px;
	padding-bottom: 18px;
	font-family: var(--jost-font);
	font-size: 34px;
	letter-spacing: .5px;
	text-shadow: 0 2px 12px rgba(0, 0, 0, .35);
}

.studies_sec h2.login-title:after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 84px;
	height: 4px;
	margin-left: -42px;
	border-radius: 4px;
	background: linear-gradient(90deg, var(--mnm-green), var(--mnm-blue-light));
}

/* the .clearfix pseudos would show up as empty flex items */
.studies_sec .study_ug:before,
.studies_sec .study_ug:after,
.studies_sec .study_pg:before,
.studies_sec .study_pg:after {
	display: none;
}

.studies_sec .study_ug,
.studies_sec .study_pg {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	margin: 30px -10px 0;
}

.studies_sec .study_pg {
	margin-top: 26px;
}

.studies_sec .study_pg .margin-top5 {
	display: flex;
	flex-wrap: wrap;
	flex: 1 1 640px;
	margin: 0;
}

/* every box: kill the old float grid */
.studies_sec .study_ug .course-box,
.studies_sec .study_pg .course-box {
	float: none;
	display: block;
	width: auto;
	min-height: 0;
	margin: 0;
}

/* the UG / PG label tiles */
.studies_sec .study_ug>.course-box,
.studies_sec .study_pg>.course-box {
	flex: 0 0 128px;
	max-width: 128px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 10px;
	border-radius: var(--mnm-radius);
	background: linear-gradient(160deg, rgba(139, 196, 63, .22) 0%, rgba(255, 255, 255, .06) 100%);
	border: 1px solid rgba(255, 255, 255, .26);
	cursor: default;
}

.studies_sec .study_ug>.course-box h3,
.studies_sec .study_pg>.course-box h3 {
	margin: 0;
	padding: 0 0 14px;
	font-size: 46px;
	line-height: 1;
	letter-spacing: 3px;
	text-shadow: 0 3px 14px rgba(0, 0, 0, .3);
}

.studies_sec .study_ug>.course-box h3:before,
.studies_sec .study_pg>.course-box h3:before {
	width: 42px;
	height: 3px;
	border-radius: 3px;
	background: var(--mnm-green);
}

/* the course tiles */
.studies_sec .study_ug>a,
.studies_sec .study_pg .margin-top5>a {
	flex: 1 1 220px;
	display: block;
	padding: 10px;
	text-decoration: none;
}

.studies_sec .study_ug>a .course-box,
.studies_sec .study_pg .margin-top5>a .course-box {
	height: 100%;
	display: flex;
	align-items: center;
	padding: 16px 16px;
	border-radius: var(--mnm-radius);
	background: rgba(255, 255, 255, .1);
	border: 1px solid rgba(255, 255, 255, .2);
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
	transition: all .35s var(--mnm-ease);
}

.studies_sec .study_ug>a:hover .course-box,
.studies_sec .study_pg .margin-top5>a:hover .course-box {
	background: rgba(255, 255, 255, .17);
	border-color: var(--mnm-green);
	transform: translateY(-6px);
	box-shadow: 0 16px 32px rgba(0, 0, 0, .28);
}

/* the course icons are white PNGs, so the disc behind them has to be dark */
.studies_sec .course-box span {
	flex: 0 0 62px;
	width: 62px;
	height: 62px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: linear-gradient(140deg, rgba(139, 196, 63, .32) 0%, rgba(26, 117, 187, .38) 100%);
	border: 1px solid rgba(139, 196, 63, .55);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
	left: auto;
	top: auto;
	transition: all .35s var(--mnm-ease);
}

.studies_sec a:hover .course-box span {
	background: linear-gradient(140deg, var(--mnm-green) 0%, #5da22f 100%);
	border-color: rgba(255, 255, 255, .6);
	transform: scale(1.06);
	box-shadow: 0 8px 18px rgba(0, 0, 0, .25);
}

.studies_sec .course-box span img {
	width: 34px;
	height: 34px;
	object-fit: contain;
}

.studies_sec .study_ug p,
.studies_sec .study_pg p {
	display: block;
	margin: 0;
	padding: 0 0 0 14px;
	font-size: 15.5px;
	line-height: 1.45;
	letter-spacing: .5px;
	text-align: left;
	vertical-align: baseline;
}

.studies_sec a:hover p {
	color: var(--mnm-green);
}

@media only screen and (max-width: 991px) {

	.studies_sec .study_ug>.course-box,
	.studies_sec .study_pg>.course-box {
		flex: 1 1 100%;
		max-width: none;
		padding: 8px 0;
	}

	.studies_sec .study_ug>.course-box h3,
	.studies_sec .study_pg>.course-box h3 {
		font-size: 34px;
	}
}

@media only screen and (max-width: 767px) {
	.studies_sec h2.login-title {
		font-size: 26px;
	}

	.studies_sec .study_ug>a,
	.studies_sec .study_pg .margin-top5>a {
		flex: 1 1 100%;
	}

	.studies_sec .study_ug p,
	.studies_sec .study_pg p {
		font-size: 14px;
	}

	.studies_sec .course-box span {
		flex-basis: 52px;
		width: 52px;
		height: 52px;
	}

	.studies_sec .course-box span img {
		width: 28px;
		height: 28px;
	}
}


/* ==========================================================================
 * 7 + 9. HOME — OUR FACILITIES  &  OTHER INSTITUTES  (shared card style)
 * ========================================================================*/
.index-facilities-page,
.other-institutes-section {
	background: linear-gradient(180deg, #f7fbff 0%, #eaf4fd 100%);
	box-shadow: none;
	border-top: 1px solid #e2eefa;
}

.other-institutes-section {
	background: linear-gradient(180deg, #ffffff 0%, #f2f8fe 100%);
}

/* section headings get the same accent rule as the rest of the page */
.index-facilities-page h2.login-title,
.other-institutes-section h2.login-title,
.brand-area h3.login-title {
	position: relative;
	padding-bottom: 16px;
	margin-bottom: 10px;
	font-family: var(--jost-font);
	font-size: 30px;
	font-weight: 600;
	letter-spacing: .4px;
	color: var(--mnm-blue-deep);
}

.index-facilities-page h2.login-title:after,
.other-institutes-section h2.login-title:after,
.brand-area h3.login-title:after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 76px;
	height: 4px;
	margin-left: -38px;
	border-radius: 4px;
	background: linear-gradient(90deg, var(--mnm-blue), var(--mnm-green));
}

.index-facilities-page .lecturers1-item-wrapper,
.other-institutes-section .lecturers1-item-wrapper {
	height: 100%;
	overflow: hidden;
	background: #fff;
	border: 1px solid #e3eef8;
	border-radius: 18px;
	box-shadow: var(--mnm-shadow-sm);
	transition: all .4s var(--mnm-ease);
}

.index-facilities-page .lecturers1-item-wrapper:hover,
.other-institutes-section .lecturers1-item-wrapper:hover {
	border-color: rgba(26, 117, 187, .45);
	box-shadow: var(--mnm-shadow-md);
	transform: translateY(-8px);
}

.index-facilities-page .lecturers-img-wrapper,
.other-institutes-section .lecturers-img-wrapper {
	position: relative;
	margin-bottom: 0;
	overflow: hidden;
	background: #dbe9f5;
}

.index-facilities-page .lecturers-img-wrapper a,
.other-institutes-section .lecturers-img-wrapper a {
	display: block;
}

.index-facilities-page .lecturers1-item-wrapper .lecturers-img-wrapper img,
.other-institutes-section .lecturers1-item-wrapper .lecturers-img-wrapper img {
	display: block;
	width: 100%;
	height: 218px;
	object-fit: cover;
}

.index-facilities-page .lecturers-img-wrapper:after,
.other-institutes-section .lecturers-img-wrapper:after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 62%;
	background: linear-gradient(180deg, rgba(10, 53, 87, 0) 0%, rgba(10, 53, 87, .48) 100%);
	opacity: 0;
	transition: opacity .4s var(--mnm-ease);
	pointer-events: none;
}

.index-facilities-page .lecturers1-item-wrapper:hover .lecturers-img-wrapper:after,
.other-institutes-section .lecturers1-item-wrapper:hover .lecturers-img-wrapper:after {
	opacity: 1;
}

.index-facilities-page .lecturers-content-wrapper,
.other-institutes-section .lecturers-content-wrapper {
	padding: 18px 16px 20px;
}

.index-facilities-page .lecturers-content-wrapper .gallery-tittle,
.other-institutes-section .lecturers-content-wrapper .gallery-tittle {
	position: relative;
	margin: 0;
	padding-top: 0;
	padding-bottom: 12px;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.4;
}

.index-facilities-page .lecturers-content-wrapper .gallery-tittle:after,
.other-institutes-section .lecturers-content-wrapper .gallery-tittle:after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 26px;
	height: 3px;
	margin-left: -13px;
	border-radius: 3px;
	background: var(--mnm-green);
	transition: width .4s var(--mnm-ease);
}

.index-facilities-page .lecturers1-item-wrapper:hover .gallery-tittle:after,
.other-institutes-section .lecturers1-item-wrapper:hover .gallery-tittle:after {
	width: 56px;
	margin-left: -28px;
}

.index-facilities-page .lecturers-content-wrapper .gallery-tittle a,
.other-institutes-section .lecturers-content-wrapper .gallery-tittle a {
	color: var(--mnm-blue-deep);
	transition: color .3s var(--mnm-ease);
}

.index-facilities-page .lecturers1-item-wrapper:hover .gallery-tittle a,
.other-institutes-section .lecturers1-item-wrapper:hover .gallery-tittle a {
	color: var(--mnm-blue);
}

/* ---- carousel arrows (facilities) -------------------------------------- */
.index-facilities-page .owl-nav {
	margin-top: 26px;
	text-align: center;
}

.index-facilities-page .owl-nav .owl-prev,
.index-facilities-page .owl-nav .owl-next,
.index-facilities-page .owl-controls .owl-prev,
.index-facilities-page .owl-controls .owl-next {
	width: 42px !important;
	height: 42px !important;
	line-height: 42px !important;
	margin: 0 6px !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(26, 117, 187, .3) !important;
	border-radius: 50% !important;
	background: #fff !important;
	box-shadow: var(--mnm-shadow-sm);
	transition: all .3s var(--mnm-ease);
}

.index-facilities-page .owl-nav .owl-prev i,
.index-facilities-page .owl-nav .owl-next i,
.index-facilities-page .owl-controls i {
	color: var(--mnm-blue);
	font-size: 20px;
	line-height: 1;
}

.index-facilities-page .owl-nav .owl-prev:hover,
.index-facilities-page .owl-nav .owl-next:hover,
.index-facilities-page .owl-controls .owl-prev:hover,
.index-facilities-page .owl-controls .owl-next:hover {
	background: var(--mnm-blue) !important;
	border-color: var(--mnm-blue) !important;
	transform: translateY(-2px);
}

.index-facilities-page .owl-nav .owl-prev:hover i,
.index-facilities-page .owl-nav .owl-next:hover i {
	color: #fff;
}

/* ---- Other Institutes: proper 3-up grid -------------------------------- */
/* the three columns used to escape their (float-only) parent, which is why
   the section carried a huge margin-bottom to stop the footer overlapping.
   A flex row contains them properly, so the hack can go. */
.lecturers-area.other-institutes-section {
	margin-bottom: 0;
	padding-bottom: 80px;
}

.other-institutes-section>.container-fuild {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	margin-top: 34px;
}

.other-institutes-section>.container-fuild>[class*="col-"] {
	display: flex;
	margin-bottom: 24px;
}

.other-institutes-section>.container-fuild .single-item {
	width: 100%;
	display: flex;
}

.other-institutes-section>.container-fuild .lecturers1-item-wrapper {
	width: 100%;
	display: flex;
	flex-direction: column;
}

.other-institutes-section>.container-fuild .lecturers-content-wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 1 1 auto;
}

@media only screen and (max-width: 767px) {
	.lecturers-area.other-institutes-section {
		margin-bottom: 0;
		padding-bottom: 50px;
	}

	.other-institutes-section .single-item {
		margin-bottom: 0;
	}

	.index-facilities-page .lecturers1-item-wrapper,
	.other-institutes-section .lecturers1-item-wrapper {
		padding: 0;
	}

	.index-facilities-page h2.login-title,
	.other-institutes-section h2.login-title,
	.brand-area h3.login-title {
		font-size: 24px;
	}
}


/* ==========================================================================
 * 8. HOME — CAMPUS PLACEMENTS
 * ========================================================================*/
.brand-area {
	padding: 62px 0 68px;
	background: linear-gradient(180deg, #ffffff 0%, #f4f9ff 100%);
	box-shadow: none;
	border-top: 1px solid #e6f0fa;
	border-bottom: 1px solid #e6f0fa;
}

.brand-area .brand-area-box {
	padding: 8px;
}

/* the logo files already carry their own thin frame, so the tile keeps only
   a soft shadow — a border here would read as a double outline */
.brand-area .brand-area-box a {
	height: 118px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px;
	background: #fff;
	border: 0;
	border-radius: 14px;
	box-shadow: var(--mnm-shadow-sm);
	transition: all .4s var(--mnm-ease);
}

.brand-area .brand-area-box a img {
	width: auto;
	max-width: 100%;
	max-height: 100%;
	margin: 0;
	object-fit: contain;
	filter: grayscale(100%);
	opacity: .78;
	transition: all .4s var(--mnm-ease);
}

.brand-area .brand-area-box a:hover {
	box-shadow: var(--mnm-shadow-md);
	transform: translateY(-6px);
}

.brand-area .brand-area-box a:hover img {
	filter: grayscale(0);
	opacity: 1;
}

@media only screen and (max-width: 767px) {
	.brand-area {
		padding: 42px 0 46px;
	}

	.brand-area .brand-area-box a {
		height: 96px;
		padding: 12px;
	}
}


/* ==========================================================================
 * 9. MOBILE HEADER  (<= 767px)
 * --------------------------------------------------------------------------
 * Three separate faults were breaking the header on phones:
 *
 *  1. meanmenu's default container is <body>, and meanmenu.min.css sets
 *     .mean-bar to position:fixed with a TRANSPARENT background and
 *     z-index:999999. The hamburger bar floated at the top of the viewport,
 *     and its full-width white logo link (style.css .logo-mobile-menu) sat
 *     directly on top of the real logo strip — which is why the logo looked
 *     like it had vanished. js/nav.js now points meanMenuContainer at
 *     .mobile-menu-area, and the bar is un-fixed below so it flows in place.
 *
 *  2. style.css sets .mobile-menu-area { display:none } and nothing ever
 *     turned it back on, so the hamburger had nowhere to live.
 *
 *  3. Nothing hid the 12-item desktop nav below 767px, so it rendered under
 *     the floating bar across several cramped, overlapping rows.
 *
 *  NOTE: .mobile-menu-area is a SIBLING of .header2-area (see buildHeader in
 *  js/nav.js), not a child — so these selectors deliberately do not nest it
 *  under .header2-area.
 * ========================================================================*/

@media only screen and (max-width: 767px) {

	/* ---- swap desktop nav out for the mobile one ------------------------ */
	.mobile-menu-area {
		display: block;
		background: transparent;
		padding: 0;
	}

	.header2-area .nav-container {
		display: none;
	}

	/* ---- hamburger bar: in-flow, inside the header ---------------------- */
	/* position:relative (not static) so the absolutely-positioned hamburger
	   button below anchors to THIS bar. When it was static the button had no
	   positioned ancestor, fell back to <body>, and top:50% dropped it far
	   down the page — which is why the hamburger was nowhere near the header. */
	.mobile-menu-area.mean-container .mean-bar,
	.mobile-menu-area .mean-bar {
		position: relative;
		float: none;
		width: 100%;
		min-height: 46px;
		padding: 0;
		background: linear-gradient(90deg, #0a4471 0%, #1a75bb 50%, #0a4471 100%);
		box-shadow: 0 4px 14px rgba(10, 53, 87, .18);
	}

	/* "MENU" label sitting on the left of the bar (replaces the duplicate
	   logo that meanmenu used to drop here). */
	.mobile-menu-area .mean-bar .mean-bar-label {
		display: inline-block;
		padding: 13px 0 13px 16px;
		color: #fff;
		font-family: var(--jost-font);
		font-size: 15px;
		font-weight: 600;
		letter-spacing: 1.5px;
		text-transform: uppercase;
		line-height: 1.3;
	}

	/* ---- kill the leftover spacer -------------------------------------- */
	/* meanmenu injects <div class="mean-push"> before the nav and gives it a
	   margin-top, purely to reserve room for its position:fixed bar. The bar
	   is static now, so that spacer was showing up as a block of empty space
	   at the top of the header. */
	.mean-push {
		display: none;
	}

	/* ---- hamburger button ------------------------------------------------ */
	.mobile-menu-area .mean-container a.meanmenu-reveal,
	.mobile-menu-area a.meanmenu-reveal {
		position: absolute;
		/* Pin to the TOP 46px strip of the bar, not top:50%. When the menu is
		   open the list renders inside the bar and makes it tall, so top:50%
		   used to drop the X into the middle of the open menu instead of
		   leaving it where the hamburger was. A fixed 3px keeps the button in
		   the header strip in both the open (X) and closed (☰) states —
		   (46px strip - 40px button) / 2 = 3px. */
		top: 3px;
		right: 10px;
		width: 26px;
		height: 26px;
		margin-top: 0;
		padding: 6px;
		border: 1px solid rgba(255, 255, 255, .45);
		border-radius: 7px;
		background: rgba(255, 255, 255, .12);
		color: #fff;
		text-indent: -9999em;
		transition: background .25s var(--mnm-ease), border-color .25s var(--mnm-ease);
	}

	.mobile-menu-area a.meanmenu-reveal:hover {
		background: var(--mnm-green);
		border-color: var(--mnm-green);
	}

	.mobile-menu-area .mean-bar .meanmenu-reveal {
		margin-top: 0;
	}

	.mobile-menu-area a.meanmenu-reveal span {
		display: block;
		height: 2px;
		margin-top: 5px;
		border-radius: 2px;
		background: #fff;
	}

	.mobile-menu-area a.meanmenu-reveal span:first-child {
		margin-top: 2px;
	}

	/* the close state renders as a text "X", not bars */
	.mobile-menu-area a.meanmenu-reveal.meanclose {
		padding: 0;
		width: 38px;
		height: 38px;
		font-family: var(--jost-font);
		font-size: 20px;
		font-weight: 400;
		line-height: 36px;
		text-align: center;
		text-indent: 0;
	}

	/* ---- dropdown panel ------------------------------------------------- */
	.mobile-menu-area .mean-nav {
		float: none;
		width: 100%;
		margin-top: 0;
		background: #fff;
	}

	.mobile-menu-area .mean-nav>ul {
		/* style.css forces overflow-y:scroll, which shows a permanent
		   scrollbar track even on short menus.
		   !important is deliberate: older cached copies of js/main.js set an
		   inline height of (viewport - 50px) here, and an inline style can
		   only be beaten by !important. main.js no longer does this. */
		height: auto !important;
		max-height: 70vh;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		border-top: 3px solid var(--mnm-green);
	}

	.mobile-menu-area .mean-nav ul li a {
		width: 100%;
		padding: 12px 5%;
		border-top: 1px solid rgba(26, 117, 187, .12);
		color: #14304d;
		font-family: var(--jost-font);
		font-size: 14px;
		font-weight: 600;
	}

	.mobile-menu-area .mean-nav ul li li a {
		width: 100%;
		padding: 11px 5% 11px 9%;
		font-size: 13.5px;
		font-weight: 500;
		opacity: 1;
	}

	.mobile-menu-area .mean-nav ul li li li a {
		width: 100%;
		padding: 10px 5% 10px 13%;
		font-size: 13px;
	}

	.mobile-menu-area .mean-nav ul li a:hover,
	.mobile-menu-area .mean-nav ul li a.mean-expand:hover {
		background: #def1ff;
		color: var(--mnm-blue);
	}

	/* the +/- expander on items with children */
	.mobile-menu-area .mean-nav ul li a.mean-expand {
		width: 44px;
		height: 44px;
		padding: 0 !important;
		border: 0;
		border-left: 1px solid rgba(26, 117, 187, .12);
		line-height: 44px;
		text-align: center;
		font-size: 20px;
		font-weight: 400;
	}

	/* ---- logo strip ----------------------------------------------------- */
	/* THE reason the logo was invisible on phones: style.css line 3149 has
	          header #desktop-nav,
	          header .logo-area { display: none; }
	   inside its own max-width:767px block. Everything the header renders
	   lives inside <header id="site-header">, so `header .logo-area` matched
	   and blanked the logo outright. Styling the <img> could never bring it
	   back while its parent was display:none. This wins on specificity
	   (0,2,0 beats 0,1,1) so no !important is needed. */
	.main-menu-area .logo-area {
		display: block;
		margin: 12px auto;
		padding: 0 14px;
	}

	.main-menu-area .logo-area img {
		display: block;
		width: 100%;
		max-width: 330px;
		height: auto;
		margin: 0 auto;
	}

	/* ---- top contact bar ------------------------------------------------ */
	/* style.css (max-width:767px) puts `margin-top:40px` on the top bar — it
	   was reserving space for meanmenu's OLD position:fixed hamburger bar. The
	   bar now flows inside the header, so that 40px was just an empty strip
	   above the contact bar. Collapse it back to nothing. */
	.header2-area .header-top-area {
		margin-top: 0;
	}

	.header2-area .header-top-area .row {
		flex-direction: column;
		row-gap: 2px;
	}

	.header2-area .header-top-area .header-top-left,
	.header2-area .header-top-area .header-top-right {
		width: 100%;
		text-align: center;
	}

	.header2-area .header-top-area .header-top-left ul {
		justify-content: center;
		row-gap: 2px;
		padding-top: 6px;
	}

	.header2-area .header-top-area .header-top-left ul li {
		margin: 0 6px 0 0;
		padding: 4px 6px 4px 0;
	}

	/* the address is the longest item — let it take its own line */
	.header2-area .header-top-area .header-top-left ul li:last-child {
		width: 100%;
		margin-right: 0;
		padding-right: 0;
		justify-content: center;
		border-right: 0;
	}

	.header2-area .header-top-area .header-top-right ul {
		justify-content: center;
		row-gap: 6px;
		padding-bottom: 8px;
	}

	.header2-area .header-top-area .header-top-right ul li {
		padding: 0 5px;
	}
}

/* Very small phones: trim the logo and contact text a little further */
@media only screen and (max-width: 400px) {
	.main-menu-area .logo-area img {
		max-width: 260px;
	}

	.mobile-menu-area .mean-bar a.logo-mobile-menu img {
		max-height: 32px;
	}

	.header2-area .header-top-area .header-top-left ul li a {
		font-size: 11.5px;
	}

	.header2-area .header-top-area a.apply-now-btn2,
	.header2-area .header-top-area .header-top-right ul li .mail-btn-area {
		padding: 6px 11px;
		font-size: 9.5px;
	}
}