/* ==========================================================================
   LGU Mabinay — Public Government Design System
   Modern, responsive theme for the citizen-facing website.

   Loaded LAST in web/layouts/mainlayout.blade.php so it overrides the legacy
   EduChamp template (style.css / shortcodes.css). Those stylesheets are very
   specific and lean on !important, so a number of overrides here must do the
   same to win the cascade. That is deliberate.
   ========================================================================== */

:root {
	/* Brand — deep government green, gold accent (replaces the flat lime #3cb000) */
	--gov-green: #0f5132;
	--gov-green-600: #14663f;
	--gov-green-700: #0c4128;
	--gov-green-900: #082c1b;
	--gov-green-050: #eef5f1;
	--gov-gold: #f0a11b;
	--gov-gold-600: #d1870c;

	--gov-ink: #1c2a24;
	--gov-body: #46504b;
	--gov-muted: #6b7770;
	--gov-line: #e3e8e5;
	--gov-surface: #ffffff;
	--gov-canvas: #f6f8f7;

	--gov-radius: 12px;
	--gov-radius-sm: 8px;
	--gov-shadow-sm: 0 1px 2px rgba(12, 40, 27, .06);
	--gov-shadow: 0 2px 6px rgba(12, 40, 27, .07), 0 10px 24px rgba(12, 40, 27, .06);
	--gov-shadow-lg: 0 18px 46px rgba(12, 40, 27, .16);

	--gov-font: "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* --------------------------------------------------------------------------
   Base typography
   -------------------------------------------------------------------------- */
body {
	font-family: var(--gov-font);
	color: var(--gov-body);
	font-size: 15.5px;
	line-height: 1.65;
	background: var(--gov-surface);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--gov-font);
	color: var(--gov-ink);
	font-weight: 700;
	letter-spacing: -.01em;
	line-height: 1.3;
}

a { color: var(--gov-green-600); }
a:hover, a:focus { color: var(--gov-green); text-decoration: none; }

/* Justified text creates rivers of whitespace and hurts readability badly on
   narrow screens. The old theme justified nearly every paragraph. */
.text-justify,
.text-justify-left,
[style*="text-align: justify"],
.ttr-post-text.text-justify {
	text-align: left !important;
}

/* Keep a visible focus ring for keyboard users. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 3px solid var(--gov-gold);
	outline-offset: 2px;
}

/* Nothing should ever force a horizontal scrollbar. The Revolution Slider lays its
   captions out on a fixed 480px grid and the third-party weather/Facebook embeds
   are fixed-width too, so on a 390px phone they used to widen the whole page. */
img, iframe, video, table { max-width: 100%; }

html, body {
	overflow-x: hidden;
	max-width: 100%;
}

.rev_slider_wrapper,
.forcefullwidth_wrapper_tp_banner,
.rev_slider,
.tp-simpleresponsive {
	max-width: 100vw;
	overflow-x: hidden;
}

/* Third-party embeds (weather, Facebook page) sit in their own clipped box. */
.gov-embed {
	max-width: 100%;
	overflow-x: hidden;
}

.gov-embed > div { max-width: 100%; }

/* --------------------------------------------------------------------------
   Skip link (accessibility)
   -------------------------------------------------------------------------- */
.gov-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 2000;
	padding: 12px 18px;
	background: var(--gov-green);
	color: #fff !important;
	font-weight: 600;
	border-radius: 0 0 var(--gov-radius-sm) 0;
}

.gov-skip:focus {
	left: 0;
}

/* --------------------------------------------------------------------------
   Top utility bar
   -------------------------------------------------------------------------- */
.top-bar,
.top-bar.bg-header,
.bg-header {
	background: var(--gov-green-900) !important;
	border-bottom: 1px solid rgba(255, 255, 255, .08);
	padding: 4px 0;
	font-size: 12.5px;
	line-height: 1.5;
}

/* Keep the utility bar compact — it is secondary to the nav below it. */
.top-bar .container-custom { min-height: 0; }
.top-bar .row { min-height: 0; }

.top-bar ul li,
.top-bar a { line-height: 1.6; }

.top-bar ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 18px;
}

.top-bar ul li { margin: 0; padding: 0; }

.top-bar a,
.top-bar .text-light {
	color: rgba(255, 255, 255, .84) !important;
	font-weight: 500;
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

.top-bar a:hover,
.top-bar a:hover .text-light { color: #fff !important; }

.top-bar i { color: var(--gov-gold) !important; }

.topbar-right ul { gap: 6px; }

.topbar-right a {
	width: 30px;
	height: 30px;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	transition: background-color .15s ease;
}

.topbar-right a:hover { background: rgba(255, 255, 255, .14); }
.topbar-right i { color: rgba(255, 255, 255, .9) !important; }

/* --------------------------------------------------------------------------
   Main navigation
   -------------------------------------------------------------------------- */
.header.rs-nav .menu-bar {
	background: var(--gov-surface);
	border-bottom: 1px solid var(--gov-line);
	box-shadow: var(--gov-shadow-sm);
}

/* Direct child only. The utility bar is ALSO inside .menu-bar, so a descendant
   selector here handed it the nav's 84px min-height and made it 99px tall. */
.header.rs-nav .menu-bar > .container-custom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 84px;
}

/* The legacy stylesheet pins the logo with position:fixed and a 40px margin,
   which floats it over the page as you scroll. Put it back in the flow. */
.logo,
.phone1 .logo {
	position: static !important;
	margin: 0 !important;
	left: auto !important;
	top: auto !important;
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.phone1 { display: flex !important; align-items: center; }

.logo img,
.phone1 .logo img {
	height: 62px;
	width: auto;
	max-width: 100%;
}

/* The template ships a second copy of the logo inside the collapsible menu. With
   the real logo now always in the header bar, that duplicate is redundant at every
   width — showing it put two logos side by side and pushed the nav onto two rows. */
.menu-links .desktop { display: none !important; }

.menu-links {
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.menu-links .nav {
	display: flex;
	align-items: center;
	gap: 2px;
	margin: 0;
	padding: 0;
}

.menu-links .nav > li { position: relative; }

.menu-links .nav > li > a {
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
	padding: 12px 14px !important;
	font-size: 13.5px !important;
	font-weight: 600 !important;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: var(--gov-ink) !important;
	border-radius: var(--gov-radius-sm);
	background: transparent !important;
	transition: color .15s ease, background-color .15s ease;
}

.menu-links .nav > li > a:hover,
.menu-links .nav > li:hover > a {
	color: var(--gov-green) !important;
	background: var(--gov-green-050) !important;
}

.menu-links .nav > li > a i {
	font-size: 9px;
	opacity: .55;
}

/* The active/inactive pills the template painted inline */
.menu-links .nav > li > a .actives,
.menu-links .nav > li > a .naactives {
	padding: 0 !important;
	margin: 0 !important;
	background: transparent !important;
	color: inherit !important;
	border-radius: 0 !important;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

/* Current page gets a gold underline rather than a filled block */
.menu-links .nav > li.active > a,
.menu-links .nav > li.current-menu-item > a {
	color: var(--gov-green) !important;
	background: transparent !important;
	font-weight: 700 !important;
	position: relative;
}

.menu-links .nav > li.active > a::after,
.menu-links .nav > li.current-menu-item > a::after {
	content: "";
	position: absolute;
	left: 14px;
	right: 14px;
	bottom: 4px;
	height: 3px;
	border-radius: 2px;
	background: var(--gov-gold);
}

/* Dropdowns */
.menu-links .nav > li .sub-menu {
	border: 1px solid var(--gov-line);
	border-radius: var(--gov-radius);
	box-shadow: var(--gov-shadow-lg);
	padding: 8px;
	min-width: 260px;
	background: #fff;
}

.menu-links .nav > li .sub-menu li { border: 0; }

.menu-links .nav > li .sub-menu li a {
	padding: 10px 12px !important;
	border-radius: var(--gov-radius-sm);
	font-size: 14px !important;
	font-weight: 500 !important;
	color: var(--gov-body) !important;
	font-family: var(--gov-font) !important;
	text-transform: none;
	line-height: 1.4;
	white-space: normal;
}

.menu-links .nav > li .sub-menu li a:hover {
	background: var(--gov-green-050) !important;
	color: var(--gov-green) !important;
	padding-left: 16px !important;
}

.nav-social-link { display: none; }

/* Mobile menu toggle */
.navbar-toggler.menuicon {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--gov-line);
	border-radius: var(--gov-radius-sm);
	background: #fff;
	cursor: pointer;
}

.navbar-toggler.menuicon span {
	display: block !important;
	width: 20px;
	height: 2px;
	margin: 0 auto;
	background: var(--gov-ink) !important;
	border-radius: 2px;
	opacity: 1 !important;
	transition: transform .2s ease, opacity .2s ease;
}

/* The theme rotates/blanks these bars in the open state, which left the button
   looking like a broken chevron. Keep three steady bars at every state. */
.navbar-toggler.menuicon span,
.navbar-toggler.menuicon.open span,
.navbar-toggler.menuicon:not(.collapsed) span {
	transform: none !important;
}

/* The theme's own social row inside the menu duplicates the top bar's links. */
.nav-social-link,
.rs-nav .menu-links .nav-social-link {
	display: none !important;
}

/* --------------------------------------------------------------------------
   Page banner (article / content hero)
   -------------------------------------------------------------------------- */
.page-banner {
	position: relative;
	min-height: 340px;
	display: flex;
	align-items: flex-end;
	background-size: cover !important;
	background-position: center !important;
	top: 0 !important;
	padding: 0;
}

.page-banner::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(8, 44, 27, .35) 0%, rgba(8, 44, 27, .82) 100%);
}

.page-banner .container,
.page-banner .container-custom {
	position: relative;
	z-index: 1;
	padding-top: 60px;
	padding-bottom: 44px;
	width: 100%;
}

.page-banner-entry h1 {
	color: #fff !important;
	font-size: 34px;
	margin-bottom: 12px;
	text-shadow: 0 2px 18px rgba(0, 0, 0, .35);
	max-width: 900px;
}

.page-banner-entry .list-inline {
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	font-size: 13.5px;
}

.page-banner-entry .list-inline li { color: rgba(255, 255, 255, .82); }
.page-banner-entry .list-inline li a { color: #fff !important; font-weight: 600; }
.page-banner-entry .list-inline li + li::before {
	content: "/";
	margin-right: 8px;
	color: rgba(255, 255, 255, .5);
}

/* --------------------------------------------------------------------------
   Sections + section headings
   -------------------------------------------------------------------------- */
.section-area.section-sp1 { padding: 56px 0; }
.section-area.section-sp2 { padding: 56px 0; }

.popular-courses-bx { margin-top: 0 !important; }

.container-custom {
	width: 100%;
	max-width: 1320px;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: 20px;
	padding-right: 20px;
}

.heading-bx.left .title-head {
	margin: 0 0 22px;
	padding: 0 0 0 14px;
	font-size: 24px;
	line-height: 1.25;
	border-left: 4px solid var(--gov-gold) !important;
	color: var(--gov-ink);
}

/* --------------------------------------------------------------------------
   News cards
   -------------------------------------------------------------------------- */
.gov-news { display: grid; gap: 20px; }

.gov-news-card {
	display: grid;
	grid-template-columns: 240px 1fr;
	gap: 20px;
	padding: 16px;
	background: var(--gov-surface);
	border: 1px solid var(--gov-line);
	border-radius: var(--gov-radius);
	box-shadow: var(--gov-shadow-sm);
	transition: border-color .15s ease, box-shadow .18s ease, transform .18s ease;
}

.gov-news-card:hover {
	border-color: rgba(15, 81, 50, .35);
	box-shadow: var(--gov-shadow);
	transform: translateY(-2px);
}

.gov-news-card__media {
	display: block;
	overflow: hidden;
	border-radius: var(--gov-radius-sm);
	background: var(--gov-canvas);
	aspect-ratio: 4 / 3;
}

.gov-news-card__media img {
	width: 100% !important;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .35s ease;
}

.gov-news-card:hover .gov-news-card__media img { transform: scale(1.04); }

.gov-news-card__body {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.gov-news-card__date {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--gov-gold-600);
	margin-bottom: 7px;
	text-transform: uppercase;
	letter-spacing: .03em;
}

.gov-news-card__title {
	font-size: 17.5px;
	line-height: 1.35;
	margin: 0 0 9px;
}

.gov-news-card__title a { color: var(--gov-ink) !important; }
.gov-news-card__title a:hover { color: var(--gov-green) !important; }

.gov-news-card__excerpt {
	margin: 0 0 12px;
	color: var(--gov-body);
	font-size: 14.5px;
	text-align: left !important;
}

.gov-news-card__more {
	align-self: flex-start;
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-weight: 600;
	font-size: 13.5px;
	color: var(--gov-green) !important;
}

.gov-news-card__more {
	transition: gap .18s ease, color .15s ease;
}

.gov-news-card__more:hover { gap: 11px; }
.gov-news-card__more i { font-size: 11px; transition: transform .18s ease; }
.gov-news-card__more:hover i { transform: translateX(2px); }

/* Gold rail wipes in along the card edge on hover */
.gov-news-card {
	position: relative;
	overflow: hidden;
}

.gov-news-card::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 3px;
	background: var(--gov-gold);
	transform: scaleY(0);
	transform-origin: top;
	transition: transform .3s cubic-bezier(.2, .7, .3, 1);
}

.gov-news-card:hover::before { transform: scaleY(1); }

/* --------------------------------------------------------------------------
   Sidebar widgets
   -------------------------------------------------------------------------- */
.side-bar .widget { margin-bottom: 26px; }

.side-bar .service-bx {
	background: var(--gov-surface);
	border: 1px solid var(--gov-line);
	border-radius: var(--gov-radius);
	box-shadow: var(--gov-shadow-sm);
	overflow: hidden;
	margin-bottom: 24px;
}

.side-bar .service-bx .action-box { margin: 0; }

.side-bar .service-bx .action-box img {
	width: 100%;
	height: auto;
	display: block;
}

.side-bar .service-bx .info-bx {
	padding: 0 20px 22px;
	position: relative;
}

/* Circular icon straddling the image edge */
.side-bar .feature-box-sm {
	position: relative;
	margin: -30px auto 14px;
	width: 58px;
	height: 58px;
	display: flex !important;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--gov-gold) !important;
	border: 3px solid #fff !important;
	box-shadow: var(--gov-shadow);
	font-size: 20px;
	z-index: 2;
}

.default-bg-color { background-color: var(--gov-gold) !important; }
.default-color { color: var(--gov-gold-600) !important; }
.default-bg { background-color: var(--gov-green) !important; }

.side-bar .info-bx h4 {
	font-size: 18px;
	margin-bottom: 10px;
}

.side-bar .info-bx h4 a { color: var(--gov-ink) !important; }

.side-bar .info-bx p {
	font-size: 14.5px;
	color: var(--gov-body);
	text-align: left !important;
}

.list-checked.primary {
	padding-left: 0;
	list-style: none;
	text-align: left !important;
}

.list-checked.primary li {
	position: relative;
	padding-left: 26px;
	margin-bottom: 10px;
	font-size: 14px;
	color: var(--gov-body);
	text-align: left !important;
}

.list-checked.primary li::before {
	content: "\f00c";
	font-family: "FontAwesome";
	position: absolute;
	left: 0;
	top: 1px;
	color: var(--gov-green);
	font-size: 12px;
}

/* Partner logo tiles (EBPLS / Tourism) */
.side-bar .service-bx .action-box a img {
	transition: transform .2s ease;
}

.side-bar .service-bx .action-box a:hover img { transform: scale(1.02); }

/* Recent-posts widget on article pages */
.side-bar .widget-title {
	font-size: 15px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--gov-ink);
	padding: 0 0 10px 12px;
	margin-bottom: 16px;
	border-left: 4px solid var(--gov-gold);
	position: relative;
}

.recent-posts-entry {
	background: var(--gov-surface);
	border: 1px solid var(--gov-line);
	border-radius: var(--gov-radius);
	box-shadow: var(--gov-shadow-sm);
	padding: 20px;
}

.widget-post {
	display: grid;
	grid-template-columns: 84px 1fr;
	gap: 12px;
	padding-bottom: 14px;
	margin-bottom: 14px;
	border-bottom: 1px solid var(--gov-line);
}

/* .widget-post also carries .clearfix, whose ::before/::after become real grid
   items here — they claimed the first cell and shunted the thumbnail and text
   into the wrong columns. Grid does its own clearing; drop them. */
.widget-post::before,
.widget-post::after {
	content: none !important;
	display: none !important;
}

/* widget.css lays these out as table-cells with a 110px left margin on the text.
   Inside the grid that margin collapses the text column to zero width, so the
   post titles vanished entirely. Reset both cells to plain grid children. The
   media cell must keep clipping, or its 200px-wide <img> spills over the text. */
.recent-posts-entry .widget-post .ttr-post-media,
.recent-posts-entry .widget-post .ttr-post-info {
	display: block !important;
	width: auto !important;
	margin-left: 0 !important;
	padding-right: 0 !important;
	vertical-align: top;
}

.recent-posts-entry .widget-post .ttr-post-info { overflow: visible !important; }
.recent-posts-entry .widget-post .ttr-post-media { overflow: hidden !important; }

.widget-post:last-of-type { border-bottom: 0; }

.widget-post .ttr-post-media {
	border-radius: var(--gov-radius-sm);
	overflow: hidden;
	background: var(--gov-canvas);
}

/* The markup hard-codes width="200" height="143" on these thumbnails. */
.widget-post .ttr-post-media img,
.recent-posts-entry .widget-post .ttr-post-media img {
	width: 100% !important;
	max-width: 100% !important;
	height: 62px !important;
	object-fit: cover;
	display: block;
}

.widget-post .media-post {
	padding: 0;
	margin: 0 0 4px;
	list-style: none;
	font-size: 11.5px;
}

.widget-post .media-post li a {
	color: var(--gov-muted) !important;
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.widget-post .post-title {
	font-size: 13.5px;
	line-height: 1.4;
	margin: 0;
}

.widget-post .post-title a { color: var(--gov-ink) !important; }
.widget-post .post-title a:hover { color: var(--gov-green) !important; }

.widget-post-bx .action-box img { border-radius: var(--gov-radius-sm); }

/* --------------------------------------------------------------------------
   Article / content body
   -------------------------------------------------------------------------- */
.courses-post {
	background: var(--gov-surface);
	border: 1px solid var(--gov-line);
	border-radius: var(--gov-radius);
	box-shadow: var(--gov-shadow-sm);
	padding: 30px;
}

.courses-post .ttr-post-title .post-title {
	font-size: 26px;
	margin-bottom: 18px;
	line-height: 1.3;
}

.ttr-post-text,
.article-content {
	font-size: 16px;
	line-height: 1.75;
	color: var(--gov-body);
	text-align: left !important;
}

/* Summernote writes text-align:justify straight onto the element's style
   attribute, which outranks any selector here. Editors keep doing it, so target
   the blocks themselves — justified text rivers badly at these column widths. */
.article-content p,
.article-content div,
.article-content li,
.article-content span {
	text-align: left !important;
}

.article-content p { margin-bottom: 16px; }

/* Content pasted from Word carries hard-coded font-family/size per span (Tahoma,
   Calibri…), which fights the design system's type. Normalise the typeface but
   leave colour and weight alone — those may be intentional emphasis. */
.article-content span,
.article-content font {
	font-family: inherit !important;
	font-size: inherit !important;
	line-height: inherit !important;
}

/* Word also leaves <o:p> junk elements behind. */
.article-content o\:p { display: none; }

.article-content img {
	max-width: 100%;
	height: auto;
	display: block;
	margin: 18px auto;
	border-radius: var(--gov-radius-sm);
}

.article-content h1,
.article-content h2,
.article-content h3,
.article-content h4 {
	margin: 26px 0 12px;
	color: var(--gov-ink);
}

.article-content table {
	width: 100%;
	border-collapse: collapse;
	margin: 18px 0;
}

.article-content table td,
.article-content table th {
	border: 1px solid var(--gov-line);
	padding: 9px 12px;
}

/* Wide article tables must scroll inside their own box, never the page */
.gov-content-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* --------------------------------------------------------------------------
   Article photo gallery

   gov-ui.js lifts the base64 photos Summernote scattered through the prose and
   rebuilds them here as one grid below the text. Layout adapts to how many
   photos the article actually has — a lone photo should not be cropped into a
   thumbnail, and two should not sit in a lonely 4-up grid.
   -------------------------------------------------------------------------- */
.gov-gallery {
	margin: 34px 0 6px;
	padding-top: 26px;
	border-top: 1px solid var(--gov-line);
}

.gov-gallery__title {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--gov-ink);
	margin-bottom: 16px;
}

.gov-gallery__title i { color: var(--gov-gold-600); }

.gov-gallery__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 22px;
	padding: 0 7px;
	border-radius: 999px;
	background: var(--gov-green-050);
	color: var(--gov-green);
	font-size: 11.5px;
	letter-spacing: 0;
}

.gov-gallery__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
}

.gov-gallery__item {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--gov-radius-sm);
	background: var(--gov-canvas);
	aspect-ratio: 4 / 3;
	cursor: zoom-in;
	box-shadow: var(--gov-shadow-sm);
	animation: gov-pop .45s cubic-bezier(.2, .7, .3, 1) both;
	animation-delay: var(--gov-delay, 0ms);
}

.gov-gallery__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	margin: 0 !important;
	border-radius: 0 !important;
	transition: transform .45s cubic-bezier(.2, .7, .3, 1);
}

.gov-gallery__item:hover img,
.gov-gallery__item:focus-visible img { transform: scale(1.07); }

/* Zoom affordance */
.gov-gallery__zoom {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 17px;
	background: linear-gradient(180deg, rgba(8, 44, 27, 0) 35%, rgba(8, 44, 27, .55) 100%);
	opacity: 0;
	transition: opacity .25s ease;
}

.gov-gallery__zoom i {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .18);
	backdrop-filter: blur(3px);
	border: 1px solid rgba(255, 255, 255, .5);
	transform: scale(.85);
	transition: transform .25s cubic-bezier(.2, .7, .3, 1);
}

.gov-gallery__item:hover .gov-gallery__zoom,
.gov-gallery__item:focus-visible .gov-gallery__zoom { opacity: 1; }
.gov-gallery__item:hover .gov-gallery__zoom i { transform: scale(1); }

/* A single photo reads as a lead image — show it whole, never cropped square. */
.gov-gallery[data-count="1"] .gov-gallery__grid { grid-template-columns: 1fr; }

.gov-gallery[data-count="1"] .gov-gallery__item {
	aspect-ratio: auto;
	cursor: zoom-in;
}

.gov-gallery[data-count="1"] .gov-gallery__item img {
	height: auto;
	object-fit: contain;
}

.gov-gallery[data-count="2"] .gov-gallery__grid { grid-template-columns: repeat(2, 1fr); }
.gov-gallery[data-count="2"] .gov-gallery__item { aspect-ratio: 3 / 2; }

/* With 4, a 2x2 block beats 3-up plus an orphan on its own row. */
.gov-gallery[data-count="4"] .gov-gallery__grid { grid-template-columns: repeat(2, 1fr); }

/* Give the opening shot of a bigger set some presence. */
.gov-gallery[data-count="5"] .gov-gallery__item:first-child,
.gov-gallery[data-count="6"] .gov-gallery__item:first-child,
.gov-gallery[data-count="7"] .gov-gallery__item:first-child,
.gov-gallery[data-count="8"] .gov-gallery__item:first-child,
.gov-gallery[data-count="9"] .gov-gallery__item:first-child {
	grid-column: span 2;
	grid-row: span 2;
	aspect-ratio: 1 / 1;
}

/* ==========================================================================
   Public Galleries page
   ========================================================================== */

.gov-gallery-banner {
	background:
		linear-gradient(140deg, rgba(8, 44, 27, .92) 0%, rgba(15, 81, 50, .86) 100%),
		url("../images/Mabinay Hall.jpg") center / cover no-repeat;
	min-height: 320px;
}

.gov-gallery-banner::before { display: none; }

.gov-eyebrow {
	display: inline-block;
	margin-bottom: 10px;
	padding: 5px 12px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .14);
	border: 1px solid rgba(255, 255, 255, .22);
	color: #fff;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	backdrop-filter: blur(4px);
}

/* --------------------------------------------------------------------------
   Album filter pills
   -------------------------------------------------------------------------- */
.gov-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	margin-bottom: 34px;
	padding-bottom: 22px;
	border-bottom: 1px solid var(--gov-line);
}

.gov-filter__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 16px;
	border: 1px solid var(--gov-line);
	border-radius: 999px;
	background: #fff;
	color: var(--gov-body);
	font-family: var(--gov-font);
	font-size: 13.5px;
	font-weight: 600;
	cursor: pointer;
	transition: background-color .18s ease, border-color .18s ease,
	            color .18s ease, transform .12s ease, box-shadow .18s ease;
}

.gov-filter__btn:hover {
	border-color: var(--gov-green);
	color: var(--gov-green);
	transform: translateY(-1px);
}

.gov-filter__btn.is-active {
	background: var(--gov-green);
	border-color: var(--gov-green);
	color: #fff;
	box-shadow: 0 6px 16px rgba(15, 81, 50, .25);
}

.gov-filter__n {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: 999px;
	background: var(--gov-green-050);
	color: var(--gov-green);
	font-size: 11px;
	font-weight: 700;
}

.gov-filter__btn.is-active .gov-filter__n {
	background: rgba(255, 255, 255, .2);
	color: #fff;
}

/* --------------------------------------------------------------------------
   Album sections
   -------------------------------------------------------------------------- */
.gov-album-block {
	margin-bottom: 48px;
	animation: gov-fade .35s ease both;
}

.gov-album-block[hidden] { display: none; }

.gov-album-block__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 18px;
	padding-left: 14px;
	border-left: 4px solid var(--gov-gold);
}

.gov-album-block__title {
	font-size: 21px;
	margin: 0;
	color: var(--gov-ink);
}

.gov-album-block__meta {
	font-size: 13px;
	color: var(--gov-muted);
	font-weight: 500;
}

/* --------------------------------------------------------------------------
   Photo grid — a real masonry-ish mosaic, not a flat row of squares.
   Every 6th photo goes wide+tall so the grid breaks its rhythm and reads
   as designed rather than as a contact sheet.
   -------------------------------------------------------------------------- */
.gov-photo-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: 180px;
	gap: 12px;
}

.gov-photo {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--gov-radius);
	background: var(--gov-canvas);
	cursor: zoom-in;
	box-shadow: var(--gov-shadow-sm);
	transition: box-shadow .3s ease, transform .3s cubic-bezier(.2, .7, .3, 1);
}

.gov-photo:hover {
	box-shadow: var(--gov-shadow-lg);
	transform: translateY(-3px);
	z-index: 2;
}

.gov-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .55s cubic-bezier(.2, .7, .3, 1);
}

.gov-photo:hover img { transform: scale(1.08); }

/* Feature tile: bigger, every 6th photo in an album */
.gov-photo-grid .gov-photo:nth-child(6n + 1) {
	grid-column: span 2;
	grid-row: span 2;
}

.gov-photo__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-end;
	gap: 8px;
	padding: 14px;
	background: linear-gradient(180deg, rgba(8, 44, 27, 0) 40%, rgba(8, 44, 27, .8) 100%);
	opacity: 0;
	transition: opacity .3s ease;
}

.gov-photo:hover .gov-photo__overlay,
.gov-photo:focus-visible .gov-photo__overlay { opacity: 1; }

.gov-photo__icon {
	position: absolute;
	top: 12px;
	right: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .18);
	border: 1px solid rgba(255, 255, 255, .5);
	backdrop-filter: blur(3px);
	color: #fff;
	font-size: 14px;
	transform: scale(.8);
	transition: transform .3s cubic-bezier(.2, .7, .3, 1);
}

.gov-photo:hover .gov-photo__icon { transform: scale(1); }

.gov-photo__label {
	color: #fff;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.35;
	text-shadow: 0 1px 8px rgba(0, 0, 0, .4);
}

/* --------------------------------------------------------------------------
   Empty state
   -------------------------------------------------------------------------- */
.gov-empty {
	text-align: center;
	padding: 56px 24px;
	border: 1px dashed var(--gov-border-strong, #cbd5e1);
	border-radius: var(--gov-radius);
	background: var(--gov-canvas);
}

.gov-empty i {
	font-size: 40px;
	color: var(--gov-green);
	opacity: .35;
	margin-bottom: 14px;
	display: block;
}

.gov-empty h4,
.gov-empty h5 { margin-bottom: 8px; color: var(--gov-ink); }

.gov-empty p {
	color: var(--gov-muted);
	margin-bottom: 18px;
	font-size: 14.5px;
}

@keyframes gov-fade {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: none; }
}

@media (max-width: 991px) {
	.gov-photo-grid {
		grid-template-columns: repeat(3, 1fr);
		grid-auto-rows: 150px;
	}
}

@media (max-width: 767px) {
	.gov-photo-grid {
		grid-template-columns: repeat(2, 1fr);
		grid-auto-rows: 130px;
		gap: 8px;
	}

	/* Touch: no hover, so keep the zoom affordance permanently visible. */
	.gov-photo__overlay { opacity: 1; background: none; }
	.gov-photo__icon {
		width: 28px;
		height: 28px;
		font-size: 11px;
		transform: none;
		background: rgba(8, 44, 27, .5);
	}
	.gov-photo__label { display: none; }

	.gov-album-block__title { font-size: 18px; }
	.gov-filter { gap: 7px; margin-bottom: 26px; }
	.gov-filter__btn { padding: 7px 13px; font-size: 12.5px; }
}

/* --------------------------------------------------------------------------
   Lightbox (Magnific Popup)
   -------------------------------------------------------------------------- */
.gov-lightbox.mfp-bg {
	background: #071b11;
	opacity: .95;
}

.gov-lightbox .mfp-img {
	border-radius: var(--gov-radius);
	box-shadow: 0 26px 70px rgba(0, 0, 0, .5);
}

.gov-lightbox .mfp-title {
	color: rgba(255, 255, 255, .82);
	font-size: 13.5px;
	padding-top: 10px;
}

.gov-lightbox__title {
	display: block;
	color: #fff;
	font-size: 15px;
	font-weight: 600;
}

.gov-lightbox__caption {
	display: block;
	margin-top: 3px;
	color: rgba(255, 255, 255, .68);
	font-size: 13px;
	line-height: 1.5;
	max-width: 720px;
}

.gov-lightbox .mfp-counter {
	color: rgba(255, 255, 255, .55);
	font-size: 12.5px;
}

.gov-lightbox .mfp-arrow { opacity: .7; }
.gov-lightbox .mfp-arrow:hover { opacity: 1; }

/* --------------------------------------------------------------------------
   Reading progress bar (article pages)
   -------------------------------------------------------------------------- */
.gov-progress {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	z-index: 1200;
	background: transparent;
	pointer-events: none;
}

.gov-progress__fill {
	display: block;
	height: 100%;
	width: 0;
	background: linear-gradient(90deg, var(--gov-green) 0%, var(--gov-gold) 100%);
	transition: width .1s linear;
}

/* --------------------------------------------------------------------------
   Motion
   -------------------------------------------------------------------------- */

/* Scroll reveal. Guarded by .gov-js so content is never hidden when the script
   does not run — no-JS visitors just get the page, fully visible. */
.gov-js .gov-reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity .55s cubic-bezier(.2, .7, .3, 1),
	            transform .55s cubic-bezier(.2, .7, .3, 1);
	transition-delay: var(--gov-delay, 0ms);
	will-change: opacity, transform;
}

.gov-js .gov-reveal.gov-in {
	opacity: 1;
	transform: none;
}

@keyframes gov-pop {
	from { opacity: 0; transform: scale(.94); }
	to   { opacity: 1; transform: none; }
}

/* Header condenses on scroll */
.header.rs-nav .sticky-header {
	transition: box-shadow .25s ease;
}

.header.rs-nav .sticky-header.gov-stuck {
	position: sticky;
	top: 0;
	z-index: 900;
	box-shadow: 0 4px 20px rgba(12, 40, 27, .12);
}

.header.rs-nav .sticky-header.gov-stuck .menu-bar > .container-custom {
	min-height: 68px;
	transition: min-height .25s ease;
}

.header.rs-nav .sticky-header.gov-stuck .logo img,
.header.rs-nav .sticky-header.gov-stuck .phone1 .logo img {
	height: 48px;
	transition: height .25s ease;
}

/* Respect the OS "reduce motion" setting: kill every transition and animation
   this stylesheet introduces, and make sure nothing is left hidden. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}

	.gov-js .gov-reveal {
		opacity: 1 !important;
		transform: none !important;
	}

	.gov-gallery__item { animation: none !important; }
}

/* --------------------------------------------------------------------------
   Pagination
   -------------------------------------------------------------------------- */
.pagination-bx { margin-top: 28px; }

.pagination-bx .pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	justify-content: center;
	margin: 0;
}

.pagination-bx .page-link,
.pagination .page-link {
	border: 1px solid var(--gov-line) !important;
	border-radius: var(--gov-radius-sm) !important;
	color: var(--gov-ink) !important;
	padding: 9px 14px !important;
	font-weight: 600;
	font-size: 14px;
	background: #fff !important;
	box-shadow: none !important;
}

.pagination-bx .page-link:hover,
.pagination .page-link:hover {
	background: var(--gov-green-050) !important;
	border-color: var(--gov-green) !important;
	color: var(--gov-green) !important;
}

.pagination .page-item.active .page-link {
	background: var(--gov-green) !important;
	border-color: var(--gov-green) !important;
	color: #fff !important;
}

.pagination .page-item.disabled .page-link {
	color: #aab5af !important;
	background: #fff !important;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
	border-radius: var(--gov-radius-sm) !important;
	font-family: var(--gov-font);
	font-weight: 600;
	letter-spacing: .01em;
	padding: 12px 22px;
	transition: background-color .15s ease, transform .05s ease;
}

.btn:active { transform: translateY(1px); }

.back-to-top {
	background: var(--gov-green) !important;
	border-radius: 50% !important;
	width: 46px;
	height: 46px;
	box-shadow: var(--gov-shadow);
	border: 0;
	color: #fff;
}

.back-to-top:hover { background: var(--gov-green-600) !important; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
footer .footer-top {
	background: var(--gov-green-900) !important;
	color: rgba(255, 255, 255, .74);
	padding-top: 0;
}

footer .pt-exebar {
	background: rgba(0, 0, 0, .22);
	padding: 18px 0;
	margin-bottom: 40px;
	border-bottom: 1px solid rgba(255, 255, 255, .08);
}

footer .pt-logo img {
	height: 54px;
	width: auto !important;
	max-width: 100%;
}

/* The legacy rule gives this a full-height 1px border-left, which renders as a
   stray vertical line floating beside the icons. Drop it and centre the row. */
footer .pt-social-link {
	display: flex !important;
	align-items: center;
	justify-content: center;
	border-left: 0 !important;
	padding: 0 !important;
}

footer .pt-social-link ul {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

footer .pt-social-link ul li { margin: 0; }

footer .pt-exebar .d-flex {
	align-items: center !important;
	min-height: 0;
}

footer .pt-logo { padding: 0 !important; }

footer .pt-social-link a {
	width: 36px;
	height: 36px;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(255, 255, 255, .1);
	transition: background-color .15s ease;
}

footer .pt-social-link a:hover { background: var(--gov-gold); }

/* Direct child only. The logo/social bar (.pt-exebar) has its own .container-custom
   nested inside it, so a descendant selector gave that bar 40px of padding under
   the social icons — they read as sitting too high, off-centre in their own bar. */
footer .footer-top > .container-custom { padding-bottom: 40px; }

footer .footer-title {
	color: #fff !important;
	font-size: 15px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	margin-bottom: 18px;
	padding-bottom: 10px;
	position: relative;
}

footer .footer-title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 34px;
	height: 3px;
	border-radius: 2px;
	background: var(--gov-gold);
}

footer p,
footer .widget p {
	color: rgba(255, 255, 255, .72);
	font-size: 14px;
	line-height: 1.7;
}

footer strong { color: #fff; }

footer .footer_widget ul {
	padding: 0;
	list-style: none;
	margin: 0;
}

footer .footer_widget ul li { margin-bottom: 9px; }

footer .footer_widget ul li a {
	color: rgba(255, 255, 255, .74) !important;
	font-size: 14px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	transition: color .15s ease, gap .15s ease;
}

footer .footer_widget ul li a:hover {
	color: #fff !important;
	gap: 12px;
}

footer .footer_widget ul li a i {
	color: var(--gov-gold);
	font-size: 10px;
}

footer .subscribe-form .form-control {
	border: 1px solid rgba(255, 255, 255, .18) !important;
	background: rgba(255, 255, 255, .07) !important;
	color: #fff !important;
	border-radius: var(--gov-radius-sm) 0 0 var(--gov-radius-sm) !important;
	padding: 11px 14px !important;
	height: auto !important;
	box-shadow: none !important;
}

footer .subscribe-form .form-control::placeholder { color: rgba(255, 255, 255, .5); }

footer .subscribe-form .btn {
	background: var(--gov-gold) !important;
	color: #fff !important;
	border-radius: 0 var(--gov-radius-sm) var(--gov-radius-sm) 0 !important;
	padding: 11px 18px;
	border: 0;
}

footer .subscribe-form .btn:hover { background: var(--gov-gold-600) !important; }

footer .footer-bottom {
	background: #061e12 !important;
	padding: 16px 0;
	font-size: 13px;
	color: rgba(255, 255, 255, .6);
	border-top: 1px solid rgba(255, 255, 255, .06);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

/* Stack the news card image above the text on narrow columns */
@media (max-width: 1199px) {
	.gov-news-card { grid-template-columns: 200px 1fr; }
}

@media (max-width: 991px) {
	/* Header becomes a collapsing mobile nav. Direct child only — otherwise the
	   utility bar above it picks up this padding as well. */
	.header.rs-nav .menu-bar > .container-custom {
		flex-wrap: wrap;
		min-height: 0;
		padding-top: 12px;
		padding-bottom: 12px;
	}

	.navbar-toggler.menuicon { display: flex !important; }

	/* The legacy theme turns the mobile menu into a 60px-wide fixed off-canvas
	   drawer (.rs-nav .menu-links { position:fixed; width:60px; left:-280px }).
	   It renders as a sliver of unusable chevrons. Force it back into the normal
	   flow as a full-width accordion under the header — these need to out-specify
	   `.rs-nav .menu-links`, hence the !important. */
	.header.rs-nav .menu-links,
	.rs-nav .menu-links,
	.rs-nav .menu-links.show {
		position: static !important;
		width: 100% !important;
		left: auto !important;
		top: auto !important;
		height: auto !important;
		max-height: none !important;
		flex-basis: 100%;
		margin: 0 !important;
		padding: 0 !important;
		background: transparent !important;
		overflow-y: visible !important;
		z-index: auto !important;
		box-shadow: none !important;
	}

	.menu-links.collapse:not(.show) { display: none !important; }
	.menu-links.collapse.show { display: block !important; }

	/* Kill the giant scaled pseudo-element the theme uses as a page dimmer. */
	.rs-nav .navbar-toggler.open:after { display: none !important; }

	.menu-links .nav {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		width: 100%;
		padding: 10px 0 4px;
		border-top: 1px solid var(--gov-line);
		margin-top: 12px;
	}

	.menu-links .nav > li { width: 100%; }

	.menu-links .nav > li > a {
		width: 100%;
		justify-content: space-between;
		padding: 13px 4px !important;
		border-bottom: 1px solid var(--gov-line);
		border-radius: 0;
	}

	.menu-links .nav > li.active > a::after { display: none; }

	/* Dropdowns render inline instead of floating */
	.menu-links .nav > li .sub-menu {
		position: static !important;
		display: none;
		box-shadow: none;
		border: 0;
		border-bottom: 1px solid var(--gov-line);
		border-radius: 0;
		padding: 4px 0 8px 14px;
		min-width: 0;
		width: 100%;
		background: var(--gov-canvas);
		opacity: 1 !important;
		visibility: visible !important;
		margin: 0;
	}

	.menu-links .nav > li.gov-open > .sub-menu { display: block; }

	.menu-links .nav > li .sub-menu li a { padding: 10px 8px !important; }

	/* The desktop-only logo block inside the collapse */
	.menu-links .desktop { display: none !important; }

	.logo img, .phone1 .logo img { height: 52px; }

	/* The sidebar is markup-first on article pages, so on a phone the reader had
	   to scroll past Recent Newsbites and two partner logos before reaching the
	   story. Bootstrap rows are flex, so ordering it last is enough — the content
	   column keeps its default order:0. */
	.gov-aside {
		order: 2;
		position: static !important; /* sticky-top makes no sense once stacked */
		top: auto !important;
	}

	.gov-aside .side-bar.sticky-top {
		position: static !important;
		top: auto !important;
	}

	.page-banner { min-height: 260px; }
	.page-banner-entry h1 { font-size: 26px; }

	.section-area.section-sp1,
	.section-area.section-sp2 { padding: 36px 0; }

	.courses-post { padding: 20px; }
}

@media (max-width: 767px) {
	body { font-size: 15px; }

	/* Two columns is the floor — three thumbnails across a 390px phone are
	   unreadable. The featured tile stops spanning, or it eats the whole grid. */
	.gov-gallery__grid,
	.gov-gallery[data-count="4"] .gov-gallery__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 8px;
	}

	.gov-gallery[data-count="5"] .gov-gallery__item:first-child,
	.gov-gallery[data-count="6"] .gov-gallery__item:first-child,
	.gov-gallery[data-count="7"] .gov-gallery__item:first-child,
	.gov-gallery[data-count="8"] .gov-gallery__item:first-child,
	.gov-gallery[data-count="9"] .gov-gallery__item:first-child {
		grid-column: span 2;
		grid-row: auto;
		aspect-ratio: 16 / 10;
	}

	/* Touch devices have no hover, so the zoom overlay would never appear. */
	.gov-gallery__zoom { opacity: 1; background: none; }
	.gov-gallery__zoom i {
		position: absolute;
		right: 6px;
		bottom: 6px;
		width: 28px;
		height: 28px;
		font-size: 12px;
		background: rgba(8, 44, 27, .55);
		transform: none;
	}

	.gov-news-card {
		grid-template-columns: 1fr;
		gap: 14px;
	}

	.gov-news-card__media { aspect-ratio: 16 / 9; }

	/* Keep the utility bar to a single line on a phone. Stacked, it was 110px of
	   chrome before the visitor saw anything. The tagline is the least useful
	   item here, so it goes; the email and social links stay. */
	.top-bar { font-size: 12px; padding: 3px 0; }

	.top-bar .row {
		flex-wrap: nowrap;
		align-items: center;
	}

	.top-bar ul { gap: 10px; flex-wrap: nowrap; }
	.topbar-left ul { justify-content: flex-start; }
	.topbar-left li:first-child { display: none; }
	.topbar-right a { width: 26px; height: 26px; }

	/* The legacy theme hides the footer social links outright below this width.
	   Bring them back, stacked and centred under the logo. */
	footer .pt-exebar .d-flex {
		flex-direction: column;
		align-items: center !important;
		gap: 14px;
		text-align: center;
	}

	footer .pt-social-link {
		display: flex !important;
		width: 100%;
		justify-content: center;
	}

	footer .pt-logo {
		margin-right: 0 !important;
		justify-content: center;
	}

	.container-custom { padding-left: 16px; padding-right: 16px; }

	.courses-post .ttr-post-title .post-title { font-size: 21px; }
	.page-banner-entry h1 { font-size: 22px; }
}

@media (max-width: 575px) {
	.logo img, .phone1 .logo img { height: 44px; }
	.heading-bx.left .title-head { font-size: 20px; }
	.courses-post { padding: 16px; }
	.page-banner { min-height: 220px; }
}