/* ==========================================================================
   Sa-adiya theme override on top of the Mobirise template
   Primary color only: #258678 (from the logo). No blending with green.
   ========================================================================== */
:root {
	--sa-blue: #258678;
	--sa-blue-dark: #1a6259;
	--sa-green: #43C0B2;
	--sa-green-dark: #35A79A;
	--sa-ink: #16241f;
	--sa-font-display: 'Inter', sans-serif;
	--sa-font-body: 'Inter', sans-serif;
}

body { font-family: var(--sa-font-body); color: var(--sa-ink); font-size: .95rem; }

/* Force one consistent font everywhere. Mobirise's own mbr-additional.css
   sets .display-1/.display-2/etc (class selectors) to Inter directly --
   those were beating our old "h1,h2,h3 {...}" element-selector rule on
   specificity regardless of load order, which is what caused the mismatch
   between body text and headings/banner/buttons in the first place. */
h1, h2, h3, h4, h5, h6,
.display-1, .display-2, .display-4, .display-5, .display-7,
.mbr-fonts-style {
	font-family: var(--sa-font-display) !important;
}

/* Reduce Mobirise's default oversized display classes */
.mbr-section-title.display-1 { font-size: 2rem; }
.mbr-section-title.display-2 { font-size: 1.6rem; }

@media (min-width: 768px) {
	.mbr-section-title.display-1 { font-size: 2.75rem; }
	.mbr-section-title.display-2 { font-size: 2.1rem; }
}

.text-primary { color: var(--sa-blue) !important; }

.btn-primary {
	background: var(--sa-blue) !important;
	border-color: var(--sa-blue) !important;
	color: #fff !important;
}
.btn-primary:hover { background: var(--sa-blue-dark) !important; border-color: var(--sa-blue-dark) !important; }

.btn-secondary {
	background: transparent !important;
	border-color: var(--sa-blue) !important;
	color: var(--sa-blue) !important;
}
.btn-secondary:hover { background: var(--sa-blue) !important; color: #fff !important; }

.mbr-overlay { background-color: var(--sa-ink) !important; }

.navbar-dropdown {
	background: var(--sa-blue) !important;
	padding: .5rem 0 !important;
}
.navbar-dropdown .navbar-brand { padding: .4rem 0 !important; }
.navbar-dropdown .navbar-logo img { height: 3.75rem !important; }
.navbar-dropdown .navbar-caption { font-size: 1.5rem !important; }
.nav-dropdown .link { font-size: 1rem !important; font-weight: 600; }
.navbar-caption, .nav-link { color: #fff !important; }
.nav-link:hover { color: rgba(255,255,255,0.75) !important; }

a { color: var(--sa-blue); }
a:hover { color: var(--sa-blue-dark); }

/* Socicon replaced with Bootstrap Icons - see markup */

/* ==========================================================================
   Glass effect -- applied to every image on the site, as requested
   ========================================================================== */
.sa-glass-img {
	position: relative;
	display: block;
	border-radius: 14px;
	overflow: hidden;
	padding: 6px;
	background: rgba(255,255,255,0.35);
	backdrop-filter: blur(10px) saturate(150%);
	-webkit-backdrop-filter: blur(10px) saturate(150%);
	border: 1px solid rgba(255,255,255,0.55);
	box-shadow: 0 8px 24px rgba(22,36,31,0.2);
	transition: transform .3s ease, box-shadow .3s ease;
}
.sa-glass-img img { display: block; width: 100%; border-radius: 10px; }
.sa-glass-img:hover, .sa-glass-img:active {
	transform: translateY(-6px);
	box-shadow: 0 16px 32px rgba(22,36,31,0.25);
}

/* Glass card for content blocks (features, notifications, etc.) */
.sa-glass-card {
	background: rgba(255,255,255,0.55);
	backdrop-filter: blur(14px) saturate(160%);
	-webkit-backdrop-filter: blur(14px) saturate(160%);
	border: 1px solid rgba(255,255,255,0.6);
	box-shadow: 0 10px 30px rgba(22,36,31,0.15);
	border-radius: 16px;
}

/* ==========================================================================
   President's Message -- full-width block
   ========================================================================== */
/* ==========================================================================
   Visionary & Founder -- text left, photo right with name/years caption
   ========================================================================== */
/* Scroll-reveal base animation -- this was missing entirely before
   (lived in an old file that never got linked after the rebuild), so
   nothing was actually animating despite the JS toggling classes. */
.sa-reveal {
	opacity: 0;
	transition: opacity 1.1s cubic-bezier(.16,1,.3,1), transform 1.1s cubic-bezier(.16,1,.3,1);
}
.sa-reveal.sa-in-view { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
	.sa-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* Text: slow fade + gentle rise */
.sa-visionary-title.sa-reveal,
.sa-visionary-text-col.sa-reveal {
	transform: translateY(30px);
	transition-duration: 1.2s;
}
.sa-visionary-title.sa-reveal.sa-in-view,
.sa-visionary-text-col.sa-reveal.sa-in-view {
	transform: translateY(0);
}

/* Image: slow zoom-in while fading, like it's gently developing into view */
.sa-visionary-photo-col.sa-reveal {
	transform: scale(0.88);
	transition-duration: 1.5s;
}
.sa-visionary-photo-col.sa-reveal.sa-in-view {
	transform: scale(1);
}

/* ==========================================================================
   Counters -- always in one row, on every screen size
   ========================================================================== */
.sa-counter-section {
	background: var(--sa-blue);
	padding: 2rem 0;
}

.sa-counter-row {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	gap: .5rem;
}

.sa-counter-item {
	flex: 1 1 0;
	text-align: center;
	color: #fff;
	min-width: 0;
}

.sa-counter-item i {
	font-size: 1.3rem;
	opacity: .85;
	margin-bottom: .3rem;
	display: block;
}

.sa-counter-number, .sa-counter-plus {
	font-family: var(--sa-font-display);
	font-weight: 800;
	font-size: 1.5rem;
	line-height: 1;
}

.sa-counter-label {
	display: block;
	font-size: .68rem;
	font-weight: 600;
	letter-spacing: .02em;
	opacity: .9;
	margin-top: .3rem;
	text-transform: uppercase;
}

@media (min-width: 576px) {
	.sa-counter-number, .sa-counter-plus { font-size: 2rem; }
	.sa-counter-item i { font-size: 1.6rem; }
	.sa-counter-label { font-size: .78rem; }
}

@media (min-width: 992px) {
	.sa-counter-section { padding: 3rem 0; }
	.sa-counter-row { gap: 2rem; }
	.sa-counter-number, .sa-counter-plus { font-size: 2.75rem; }
	.sa-counter-item i { font-size: 2rem; }
	.sa-counter-label { font-size: .9rem; }
}

/* Counter section header -- eyebrow with side rules, accent title,
   green rule, subtitle. Sits on the blue texture, so everything is white. */
.sa-counter-head {
	text-align: center;
	padding: 0 12px 1.5rem;
}
.sa-counter-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 10px;
	letter-spacing: .26em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.82);
	font-weight: 600;
	margin-bottom: 10px;
}
.sa-counter-eyebrow::before,
.sa-counter-eyebrow::after {
	content: "";
	width: 22px;
	height: 1px;
	background: rgba(255,255,255,0.45);
	flex: 0 0 auto;
}
.sa-counter-title {
	font-family: var(--sa-font-display);
	font-weight: 700;
	color: #fff;
	font-size: clamp(21px, 5.4vw, 36px);
	letter-spacing: -.02em;
	line-height: 1.15;
	margin: 0;
}
.sa-counter-title-accent {
	color: #B8E5DD;
}
.sa-counter-title-rule {
	display: block;
	width: 52px;
	height: 3px;
	background: #B8E5DD;
	border-radius: 2px;
	margin: 12px auto 0;
}
.sa-counter-sub {
	color: rgba(255,255,255,0.78);
	font-size: 13px;
	line-height: 1.5;
	max-width: 440px;
	margin: 10px auto 0;
}

@media (min-width: 576px) {
	.sa-counter-eyebrow { font-size: 11px; }
	.sa-counter-eyebrow::before,
	.sa-counter-eyebrow::after { width: 28px; }
	.sa-counter-sub { font-size: 14px; }
}

@media (min-width: 992px) {
	.sa-counter-head { padding-bottom: 2.25rem; }
	.sa-counter-eyebrow { font-size: 12px; letter-spacing: .28em; }
	.sa-counter-title-rule { width: 56px; margin-top: 14px; }
	.sa-counter-sub { margin-top: 12px; }
}

/* ==========================================================================
   Notifications + Events -- split screen, auto-scrolling marquees
   ========================================================================== */
.sa-noti-section, .sa-events-section {
	padding: 3rem 0;
}
.sa-events-section { background: #ffffff; }

.sa-split-heading {
	font-family: var(--sa-font-display);
	font-weight: 700;
	font-size: 1.3rem;
	color: var(--sa-ink);
	padding-bottom: .7rem;
	margin-bottom: 1rem;
	border-bottom: 3px solid var(--sa-blue);
	display: inline-block;
}
.sa-split-heading-alt { border-bottom-color: var(--sa-green); }

/* ---- Notifications: vertical auto-scroll, ~6 visible at a time ---- */
.sa-noti-col {
	background: #fff;
	border-radius: 20px;
	padding: 14px;
	box-shadow: 0 10px 30px rgba(26, 98, 89, 0.10);
	background-image:
		linear-gradient(#fff, #fff),
		repeating-conic-gradient(
			from 0deg at 12px 12px,
			#258678 0deg 15deg,
			#43C0B2 15deg 30deg,
			transparent 30deg 60deg
		);
	background-clip: content-box, border-box;
	background-origin: border-box;
	border: 8px solid transparent;
}
.sa-noti-inner {
	background: #fff;
	border-radius: 18px;
	padding: 20px 18px;
}

.sa-noti-ticker-mask {
	position: relative;
	height: calc(4 * 5rem);
	overflow: hidden;
	-webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
	mask-image: linear-gradient(180deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
}

.sa-noti-ticker {
	display: flex;
	flex-direction: column;
	animation: sa-noti-scroll 22s linear infinite;
}
.sa-noti-ticker-mask:hover .sa-noti-ticker { animation-play-state: paused; }

@keyframes sa-noti-scroll {
	from { transform: translateY(0); }
	to   { transform: translateY(-50%); }
}

.sa-noti-item {
	display: flex;
	align-items: center;
	gap: 1rem;
	height: 5rem;
	padding: 0 1rem;
	text-decoration: none;
	color: var(--sa-ink);
	transition: background-color .2s ease, padding-left .2s ease;
	border-bottom: 1px solid rgba(18,48,36,0.06);
	border-left: 4px solid transparent;
	border-radius: 8px;
}

/* Alternating textured blue/green rows -- checkered square pattern,
   darker/more visible than the previous soft radial glow. */
.sa-noti-item:nth-child(odd) {
	background-color: rgba(67, 192, 178,0.14);
	background-image:
		repeating-linear-gradient(0deg, rgba(67, 192, 178,0.16) 0px, rgba(67, 192, 178,0.16) 1px, transparent 1px, transparent 12px),
		repeating-linear-gradient(90deg, rgba(67, 192, 178,0.16) 0px, rgba(67, 192, 178,0.16) 1px, transparent 1px, transparent 12px);
	border-left-color: var(--sa-green);
}
.sa-noti-item:nth-child(even) {
	background-color: rgba(37, 134, 120,0.14);
	background-image:
		repeating-linear-gradient(0deg, rgba(37, 134, 120,0.16) 0px, rgba(37, 134, 120,0.16) 1px, transparent 1px, transparent 12px),
		repeating-linear-gradient(90deg, rgba(37, 134, 120,0.16) 0px, rgba(37, 134, 120,0.16) 1px, transparent 1px, transparent 12px);
	border-left-color: var(--sa-blue);
}
.sa-noti-item:hover {
	padding-left: 1.9rem;
	filter: brightness(0.97);
}

.sa-noti-date {
	flex-shrink: 0;
	width: 44px;
	text-align: center;
	line-height: 1.1;
}
.sa-noti-date strong { display: block; font-size: 1.1rem; color: var(--sa-blue); font-weight: 800; }
.sa-noti-date small { display: block; font-size: .68rem; text-transform: uppercase; color: var(--sa-green); font-weight: 700; }
.sa-noti-date em { display: block; font-size: .62rem; font-style: normal; color: rgba(18,48,36,0.5); margin-top: .1rem; }

.sa-noti-title {
	font-size: .92rem;
	font-weight: 600;
	line-height: 1.35;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

/* ---- Events: single-slide carousel, like the banner ---- */
.sa-events-col {
	border-radius: 16px;
	padding: 1.5rem;
	box-shadow: 0 8px 24px rgba(22,36,31,0.1);
}

/* ==========================================================================
   News & Updates
   ========================================================================== */
.sa-blog-rows { display: flex; flex-direction: column; gap: 1rem; }
.sa-blog-row {
	display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
	background: #fff; border-radius: 14px; padding: 1.25rem 1.5rem;
	text-decoration: none; color: inherit;
	box-shadow: 0 6px 18px rgba(22,36,31,0.1);
	border-left: 4px solid var(--sa-blue);
	transition: transform .25s ease, box-shadow .25s ease;
}
.sa-blog-row:hover { transform: translateX(6px); box-shadow: 0 10px 26px rgba(22,36,31,0.16); color: inherit; }
.sa-blog-row-main { flex: 1; min-width: 0; }
.sa-blog-row-title { font-family: var(--sa-font-display); font-weight: 700; font-size: 1.1rem; color: var(--sa-ink); margin: 0 0 .4rem; }
.sa-blog-row-excerpt {
	font-size: .88rem; color: rgba(18,48,36,0.7); margin: 0 0 .5rem; line-height: 1.5;
	display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.sa-blog-row-meta { display: flex; gap: 1.2rem; font-size: .78rem; color: rgba(18,48,36,0.55); align-items: center; }
.sa-blog-row-meta i { color: var(--sa-green); margin-right: .3rem; }
.sa-blog-row-author { display: inline-flex; align-items: center; gap: .4rem; }
.sa-blog-row-author img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.sa-blog-row-author i { font-size: 1.1rem; }
.sa-blog-row .sa-news-readmore { flex-shrink: 0; white-space: nowrap; }

@media (max-width: 576px) {
	.sa-blog-row { flex-direction: column; align-items: flex-start; }
}

.sa-blog-card-author { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.sa-blog-card-author img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
.sa-blog-card-author span { font-size: .75rem; color: rgba(18,48,36,0.6); font-weight: 600; }

.sa-blogpage { padding: 3rem 0; }
.sa-blogpage-inner { max-width: 760px; margin: 0 auto; }
.sa-blogpage-cover { width: 100%; border-radius: 16px; margin-bottom: 1.5rem; box-shadow: 0 12px 30px rgba(22,36,31,0.18); }
.sa-blogpage-title { font-family: var(--sa-font-display); font-weight: 800; font-size: 1.9rem; color: var(--sa-ink); }
.sa-blogpage-author { display: flex; align-items: center; gap: .7rem; margin: 1rem 0 2rem; padding-bottom: 1.5rem; border-bottom: 1px solid rgba(18,48,36,0.1); }
.sa-blogpage-author img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.sa-blogpage-author strong { display: block; font-size: .92rem; }
.sa-blogpage-author span { font-size: .78rem; color: rgba(18,48,36,0.55); }
.sa-blogpage-content { font-size: 1rem; line-height: 1.85; color: rgba(18,48,36,0.85); }

/* ==========================================================================
   Gallery -- 3 per row (6 total on homepage)
   ========================================================================== */
/* ==========================================================================
   Video section
   ========================================================================== */
/* ==========================================================================
   Reach Us + Enquiry form
   ========================================================================== */
.sa-reach-section { background: #fff; padding: 3.5rem 0; }

.sa-reach-info-item { display: flex; gap: 1rem; margin-bottom: 1.5rem; }
.sa-reach-icon {
	flex-shrink: 0; width: 46px; height: 46px; border-radius: 50%;
	background: rgba(37, 134, 120,0.1); color: var(--sa-blue);
	display: flex; align-items: center; justify-content: center; font-size: 1.1rem;
}
.sa-reach-info-item strong { display: block; font-size: .9rem; margin-bottom: .2rem; }
.sa-reach-info-item p { font-size: .87rem; color: rgba(18,48,36,0.7); margin: 0; line-height: 1.5; }
.sa-reach-info-item a { color: var(--sa-blue); }

.sa-reach-map { border-radius: 14px; overflow: hidden; box-shadow: 0 8px 24px rgba(22,36,31,0.15); margin-top: 1.5rem; }
.sa-reach-map iframe { width: 100%; height: 260px; display: block; border: 0; }

.sa-reach-info { height: 100%; display: flex; flex-direction: column; }
.sa-reach-map { margin-top: auto; }

.sa-enquiry-form {
	height: 100%;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	border-radius: 18px;
	padding: 2rem;
	box-shadow: 0 10px 28px rgba(22,36,31,0.1);
	overflow: hidden;
}
.sa-enquiry-form h3 { font-family: var(--sa-font-display); color: var(--sa-blue); font-weight: 700; font-size: 1.25rem; margin-bottom: 1.25rem; }
.sa-enquiry-form label { display: block; font-size: .82rem; font-weight: 600; color: var(--sa-ink); margin-bottom: .35rem; }
.sa-enquiry-form input, .sa-enquiry-form textarea {
	width: 100%; border: 1.5px solid rgba(18,48,36,0.15); background: #fff;
	border-radius: 8px; padding: .65rem .9rem; font-size: .92rem; font-family: var(--sa-font-body);
}
.sa-enquiry-form input:focus, .sa-enquiry-form textarea:focus {
	outline: none; border-color: var(--sa-blue); box-shadow: 0 0 0 3px rgba(37, 134, 120,0.15);
}
.sa-btn-gradient-enq {
	border: none; border-radius: 30px; padding: .75rem 2rem; font-weight: 700; color: #fff;
	background: var(--sa-blue); cursor: pointer; transition: background-color .2s ease, transform .2s ease;
}
.sa-btn-gradient-enq:hover { background: var(--sa-blue-dark); transform: translateY(-2px); }
.sa-enquiry-msg { font-size: .85rem; margin-top: .8rem; padding: .5rem .8rem; border-radius: 8px; display: none; }
.sa-enquiry-msg.sa-enquiry-ok { display: block; background: rgba(255,140,0,0.15); color: #b35900; }
.sa-enquiry-msg.sa-enquiry-err { display: block; background: rgba(198,40,40,0.1); color: #b02a2a; }

.sa-video-section {
	padding: 1rem 0 3.5rem;
}
.sa-video-title { font-family: var(--sa-font-display); font-weight: 700; color: var(--sa-blue); font-size: 1.75rem; margin-bottom: .5rem; }
.sa-video-sub { color: rgba(18,48,36,0.65); margin-bottom: 2rem; }
.sa-video-frame {
	max-width: 900px; margin: 0 auto;
	aspect-ratio: 16/9;
	border-radius: 14px; overflow: hidden;
	box-shadow: 0 16px 40px rgba(0,0,0,0.4);
	border: 6px solid rgba(255,255,255,0.08);
}
.sa-video-frame iframe { width: 100%; height: 100%; border: 0; }

/* ============ YouTube click-to-play facade with light-green play button ============ */
.sa-video-facade {
	position: relative;
	cursor: pointer;
	background: #000;
}
.sa-video-facade .sa-video-poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .5s ease, filter .3s ease;
}
.sa-video-facade:hover .sa-video-poster,
.sa-video-facade:focus-visible .sa-video-poster {
	transform: scale(1.03);
	filter: brightness(.85);
}
.sa-video-play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 96px;
	height: 68px;
	pointer-events: none;
	z-index: 2;
	transition: transform .18s ease;
}
.sa-video-play svg {
	width: 100%;
	height: 100%;
	display: block;
	filter: drop-shadow(0 8px 22px rgba(0, 0, 0, .55));
}
.sa-video-play .sa-play-bg {
	fill: #43C0B2;
	transition: fill .18s ease;
}
.sa-video-facade:hover .sa-video-play,
.sa-video-facade:focus-visible .sa-video-play {
	transform: translate(-50%, -50%) scale(1.08);
}
.sa-video-facade:hover .sa-play-bg,
.sa-video-facade:focus-visible .sa-play-bg {
	fill: #35A79A;
}
.sa-video-facade:focus-visible {
	outline: 3px solid #43C0B2;
	outline-offset: 4px;
}
.sa-video-facade.is-active {
	cursor: default;
	background: #000;
}
.sa-video-facade.is-active iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}
@media (max-width: 640px) {
	.sa-video-play { width: 72px; height: 52px; }
}

.sa-gallery-section { padding: 3.5rem 0; }

.sa-gallery-grid-6 {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.25rem;
}
@media (min-width: 768px) {
	.sa-gallery-grid-6 { grid-template-columns: repeat(3, 1fr); }
}

.sa-gallery-item { display: block; text-decoration: none; color: inherit; }

.sa-gallery-item-img {
	position: relative;
	aspect-ratio: 4 / 3;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 8px 22px rgba(22,36,31,0.16);
}
.sa-gallery-item-img img {
	width: 100%; height: 100%; object-fit: cover; display: block;
	transition: transform .5s cubic-bezier(.2,.8,.2,1);
}
.sa-gallery-item-img::after {
	content: '';
	position: absolute; inset: 0;
	background: rgba(11,36,31,0);
	transition: background-color .3s ease;
}
.sa-gallery-item:hover .sa-gallery-item-img img { transform: scale(1.1); }
.sa-gallery-item:hover .sa-gallery-item-img::after { background: rgba(11,36,31,0.25); }

.sa-gallery-zoom {
	position: absolute; top: 50%; left: 50%;
	transform: translate(-50%, -50%) scale(0.7);
	width: 38px; height: 38px;
	background: rgba(255,255,255,0.9);
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	color: var(--sa-blue); font-size: .9rem;
	opacity: 0;
	transition: opacity .3s ease, transform .3s ease;
	z-index: 2;
}
.sa-gallery-item:hover .sa-gallery-zoom { opacity: 1; transform: translate(-50%, -50%) scale(1); }

.sa-gallery-item-desc {
	margin: .6rem 0 0;
	font-size: .82rem;
	color: rgba(18,48,36,0.7);
	line-height: 1.4;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.sa-news-section { background: transparent; padding: 3.5rem 0; }

/* ============ News & Updates staggered heading (matches Studio sizing) ============ */
.sa-news-heading {
	text-align: center;
	position: relative;
	padding: 0 12px 2.25rem;
}
.sa-news-stack {
	position: relative;
	display: inline-block;
	line-height: .85;
}
.sa-news-word {
	display: block;
	font-family: var(--sa-font-display);
	font-weight: 800;
	font-size: 56px;
	letter-spacing: -2.5px;
	line-height: .85;
}
.sa-news-word-blue { color: var(--sa-blue); }
.sa-news-word-green {
	color: var(--sa-green);
	margin-left: 36px;
	margin-top: -6px;
}
.sa-news-meta {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	margin-top: 24px;
	padding-top: 22px;
	border-top: 1px solid rgba(22, 36, 31, .12);
	max-width: 520px;
	margin-left: auto;
	margin-right: auto;
}
.sa-news-slogan {
	font-family: var(--sa-font-body);
	font-size: 15px;
	line-height: 1.55;
	color: rgba(22, 36, 31, .68);
	font-style: italic;
	font-weight: 400;
	margin: 0;
	text-align: center;
	letter-spacing: .002em;
}
.sa-news-badge {
	background: rgba(37, 134, 120, .1);
	color: var(--sa-blue);
	padding: 5px 12px;
	border-radius: 100px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .15em;
	text-transform: uppercase;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.sa-news-badge i { font-size: 12px; }

.sa-news-title {
	font-family: var(--sa-font-display);
	font-weight: 700;
	color: var(--sa-blue);
	font-size: 1.75rem;
	text-align: center;
	margin-bottom: 2rem;
}

.sa-news-card {
	display: block;
	height: 100%;
	background: #fff;
	border-radius: 16px;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	box-shadow: 0 8px 24px rgba(22,36,31,0.12);
	transition: transform .3s ease, box-shadow .3s ease;
}
.sa-news-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 16px 36px rgba(22,36,31,0.2);
	color: inherit;
}

.sa-news-card-img { aspect-ratio: 16 / 10; overflow: hidden; }
.sa-news-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.sa-news-card:hover .sa-news-card-img img { transform: scale(1.06); }

.sa-news-card-body { padding: 1.25rem; }
.sa-news-date { font-size: .75rem; font-weight: 700; color: var(--sa-green); text-transform: uppercase; letter-spacing: .03em; }
.sa-news-card-title { font-family: var(--sa-font-display); font-size: 1.1rem; font-weight: 700; color: var(--sa-ink); margin: .4rem 0 .6rem; line-height: 1.35; }
.sa-news-excerpt {
	font-size: .88rem;
	color: rgba(18,48,36,0.7);
	line-height: 1.6;
	margin-bottom: .75rem;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.sa-news-readmore { font-size: .85rem; font-weight: 700; color: var(--sa-blue); display: inline-flex; align-items: center; gap: .3rem; }

.sa-btn-outline-blue {
	display: inline-block;
	border: 1.5px solid var(--sa-blue);
	color: var(--sa-blue);
	font-weight: 700;
	padding: .6rem 1.5rem;
	border-radius: 30px;
	text-decoration: none;
	transition: background-color .2s ease, color .2s ease;
}
.sa-btn-outline-blue:hover { background: var(--sa-blue); color: #fff; }

/* Fullscreen event poster modal */
.sa-event-modal {
	position: fixed;
	inset: 0;
	z-index: 99999;
	background: rgba(11,30,41,0.92);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2rem;
	opacity: 0;
	visibility: hidden;
	transition: opacity .3s ease, visibility .3s ease;
}
.sa-event-modal.sa-event-modal-open { opacity: 1; visibility: visible; }
.sa-event-modal-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 100%;
	max-height: 100%;
}
.sa-event-modal img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 75vh;
	object-fit: contain;
	border-radius: 10px;
	box-shadow: 0 20px 60px rgba(0,0,0,0.5);
	transform: scale(0.92);
	transition: transform .3s ease;
}
.sa-event-modal.sa-event-modal-open img { transform: scale(1); }
.sa-event-modal-caption {
	margin-top: 1.25rem;
	text-align: center;
	color: #fff;
	max-width: 90vw;
}
.sa-event-modal-caption strong {
	display: block;
	font-family: var(--sa-font-display);
	font-size: 1.15rem;
	font-weight: 700;
	margin-bottom: .3rem;
}
.sa-event-modal-caption span {
	display: block;
	font-size: .85rem;
	opacity: .8;
}
.sa-event-modal-close {
	position: absolute;
	top: 1.5rem; right: 1.5rem;
	width: 44px; height: 44px;
	border-radius: 50%;
	background: rgba(255,255,255,0.15);
	border: none;
	color: #fff;
	font-size: 1.1rem;
	cursor: pointer;
	transition: background-color .2s ease;
}
.sa-event-modal-close:hover { background: rgba(255,255,255,0.3); }

.sa-events-carousel {
	max-width: 460px;
	margin: 0 auto;
}
.sa-events-carousel, .sa-events-carousel .carousel-inner, .sa-events-carousel .carousel-item {
	aspect-ratio: 0.87 / 1;
	max-height: 34rem;
	height: auto;
}
.sa-events-carousel .carousel-item {
	display: flex;
	align-items: center;
	justify-content: center;
}

.sa-event-slide-inner {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 1.75rem;
	box-sizing: border-box;
	margin: 0 auto;
}

.sa-event-poster {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	max-width: 460px;
	margin: 0 auto;
	overflow: hidden;
	border-radius: 16px;
	box-shadow: 0 14px 34px rgba(22,36,31,0.22);
	border: 6px solid #fff;
	outline: 1px solid rgba(18,48,36,0.08);
	box-sizing: border-box;
}
.sa-event-poster {
	background: #f4f9f8;
}
.sa-event-poster img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}
.sa-event-poster-caption {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	background: linear-gradient(0deg, rgba(0,0,0,0.85) 0%, transparent 100%);
	color: #fff;
	padding: 2.5rem 1.5rem 1.25rem;
}
.sa-event-poster-caption strong {
	display: block;
	font-size: 1.1rem;
	line-height: 1.3;
}
.sa-event-poster-caption small { display: block; font-size: .78rem; opacity: .85; margin-top: .3rem; }

/* Small prev/next arrows, matching the banner's arrow style */
.sa-events-arrow {
	width: 40px;
	opacity: 1;
}
.sa-events-arrow i {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px; height: 38px;
	background: rgba(11,36,31,0.45);
	border-radius: 50%;
	color: #fff;
	font-size: 1rem;
	transition: background-color .2s ease;
}
.sa-events-arrow:hover i { background: var(--sa-green); }

@media (min-width: 992px) {
	.sa-noti-ticker-mask { height: calc(4 * 5.6rem); }
	.sa-noti-item { height: 5.6rem; }
}

/* Arriving animation: notifications slide from left, events from right */
@media (min-width: 992px) {
	.sa-noti-col.sa-reveal { transform: translateX(-60px); }
	.sa-noti-col.sa-reveal.sa-in-view { transform: translateX(0); }
	.sa-events-col.sa-reveal { transform: translateX(60px); }
	.sa-events-col.sa-reveal.sa-in-view { transform: translateX(0); }
}

/* ==========================================================================
   Institutions -- right-moving marquee
   ========================================================================== */
/* ==========================================================================
   Institute detail page
   ========================================================================== */
.sa-instpage-course-list { display: flex; flex-direction: column; gap: 1rem; }
.sa-instpage-course-card {
	background: #F4F9F8; border-radius: 12px; padding: 1.1rem 1.3rem;
	border-left: 4px solid var(--sa-blue);
}
.sa-instpage-course-card h4 { font-family: var(--sa-font-display); font-size: 1.05rem; font-weight: 700; margin-bottom: .4rem; }
.sa-instpage-course-card p { font-size: .9rem; margin-bottom: .6rem; }
.sa-instpage-course-meta { display: flex; flex-wrap: wrap; gap: 1rem; font-size: .8rem; color: rgba(18,48,36,0.65); }
.sa-instpage-course-meta i { color: var(--sa-green); margin-right: .3rem; }

.sa-instpage-officials { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 1.25rem; }
.sa-instpage-official { text-align: center; }
.sa-instpage-official img {
	width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 50%;
	box-shadow: 0 6px 16px rgba(22,36,31,0.18); margin-bottom: .5rem;
	border: 3px solid #fff; outline: 1px solid rgba(18,48,36,0.08);
}
.sa-instpage-official strong { display: block; font-size: .88rem; }
.sa-instpage-official span { display: block; font-size: .75rem; color: rgba(18,48,36,0.6); }

.sa-instpage-hero { position: relative; height: 40vh; min-height: 320px; overflow: hidden; }
.sa-instpage-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sa-instpage-hero-overlay {
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(18,48,36,0.3) 0%, rgba(18,48,36,0.75) 100%);
}
.sa-instpage-hero-content {
	position: absolute; left: 0; right: 0; bottom: 2rem;
	color: #fff;
}
.sa-instpage-tag {
	display: inline-block;
	background: var(--sa-green);
	font-size: .75rem; font-weight: 700;
	padding: .25rem .7rem; border-radius: 12px;
	margin-bottom: .5rem;
}
.sa-instpage-hero-content h1 { font-family: var(--sa-font-display); font-weight: 800; font-size: 2rem; }

.sa-instpage-body { padding: 3rem 0; }
.sa-instpage-lead { font-size: 1.1rem; color: rgba(18,48,36,0.8); line-height: 1.7; margin-bottom: 1.5rem; }
.sa-instpage-h2 { font-family: var(--sa-font-display); color: var(--sa-blue); font-weight: 700; font-size: 1.4rem; margin: 2rem 0 1rem; }
.sa-instpage-body p { line-height: 1.75; color: rgba(18,48,36,0.85); margin-bottom: 1rem; }
.sa-instpage-courses { list-style: none; padding: 0; }
.sa-instpage-courses li {
	padding: .6rem 1rem; margin-bottom: .5rem;
	background: #F4F9F8; border-left: 3px solid var(--sa-blue);
	border-radius: 6px; font-size: .92rem;
}

.sa-instpage-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1rem; }
.sa-instpage-gallery-tile { position: relative; border-radius: 10px; overflow: hidden; box-shadow: 0 6px 16px rgba(22,36,31,0.15); }
.sa-instpage-gallery-tile img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.sa-instpage-gallery-tile span {
	position: absolute; left: 0; right: 0; bottom: 0;
	background: linear-gradient(0deg, rgba(0,0,0,0.8) 0%, transparent 100%);
	color: #fff; font-size: .72rem; padding: 1.2rem .5rem .4rem;
}

.sa-instpage-side { position: sticky; top: 100px; }

/* ==========================================================================
   Institutions listing page
   ========================================================================== */
.sa-instlist-hero { background: var(--sa-blue); color: #fff; padding: 6rem 0 2.5rem; text-align: center; }
.sa-instlist-hero h1 { font-family: var(--sa-font-display); font-weight: 800; font-size: 2rem; }
.sa-instlist-hero p { opacity: .9; max-width: 560px; margin: .5rem auto 0; }

.sa-instlist-body { padding: 3rem 0; }
.sa-inst-explore-btn {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	margin-top: .8rem;
	font-size: .82rem;
	font-weight: 700;
	color: var(--sa-blue);
	transition: gap .2s ease;
}
.sa-instlist-card:hover .sa-inst-explore-btn { gap: .7rem; }

.sa-instlist-card {
	display: block; text-decoration: none; color: inherit;
	background: #fff; border-radius: 16px; overflow: hidden;
	box-shadow: 0 8px 24px rgba(22,36,31,0.12);
	transition: transform .3s ease, box-shadow .3s ease;
	height: 100%;
}
.sa-instlist-card:hover { transform: translateY(-6px); box-shadow: 0 16px 36px rgba(22,36,31,0.2); color: inherit; }
.sa-instlist-card-img { position: relative; aspect-ratio: 4/3; overflow: hidden; }
.sa-instlist-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sa-instlist-card-body { padding: 1.1rem; }
.sa-instlist-card-body h3 { font-family: var(--sa-font-display); font-size: 1.05rem; font-weight: 700; margin: .4rem 0 .4rem; }
.sa-instlist-card-body p { font-size: .85rem; color: rgba(18,48,36,0.7); line-height: 1.5; margin: 0; }

.sa-inst-section { padding: 4.5rem 0; margin: 2rem 0; overflow: hidden; position: relative; }

/* Header (eyebrow + gradient title + subtitle) */
.sa-inst-head { text-align: center; padding: 0 20px 34px; position: relative; }
.sa-inst-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 12px;
	letter-spacing: .28em;
	text-transform: uppercase;
	color: var(--sa-blue);
	font-weight: 600;
	margin-bottom: 14px;
}
.sa-inst-eyebrow::before,
.sa-inst-eyebrow::after {
	content: "";
	width: 28px;
	height: 1px;
	background: var(--sa-blue);
	opacity: .4;
}
.sa-inst-title {
	font-family: var(--sa-font-display);
	font-weight: 700;
	color: var(--sa-blue-dark);
	font-size: clamp(30px, 6vw, 44px);
	letter-spacing: -.02em;
	line-height: 1.1;
	text-align: center;
}
.sa-inst-title-accent {
	background: linear-gradient(90deg, var(--sa-blue), var(--sa-green));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}
.sa-inst-sub {
	color: rgba(18,48,36,0.60);
	margin-top: 12px;
	font-size: 15px;
	max-width: 520px;
	margin-left: auto;
	margin-right: auto;
	line-height: 1.5;
	text-align: center;
}

/* Marquee */
.sa-inst-marquee-mask {
	position: relative;
	overflow: hidden;
	padding: 30px 0;
	contain: layout paint;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.sa-inst-marquee {
	display: flex;
	gap: 20px;
	width: max-content;
	/* Keep pixels-per-second constant regardless of item count:
	   reference is 8 items over 40s, so ~5s per item. */
	animation: sa-inst-scroll calc(var(--sa-inst-count, 8) * 5s) linear infinite;
	/* translate3d in the keyframes is the GPU hint; do NOT set will-change
	   here — the track can be 15,000px+ wide and forcing it into its own
	   compositor layer causes memory thrashing on desktop integrated GPUs. */
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}
.sa-inst-marquee-mask:hover .sa-inst-marquee { animation-play-state: paused; }
@keyframes sa-inst-scroll {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(calc(-50% - 10px), 0, 0); }
}

/* Cards */
.sa-inst-card {
	width: 280px;
	flex-shrink: 0;
	background: #fff;
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(26, 98, 89,.06), 0 8px 30px rgba(26, 98, 89,.08);
	border: 1px solid rgba(37, 134, 120,.15);
	transition: transform .4s ease, box-shadow .4s ease;
	position: relative;
	text-decoration: none;
	color: inherit;
	display: block;
}
.sa-inst-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 4px 8px rgba(26, 98, 89,.08), 0 20px 50px rgba(26, 98, 89,.15);
	color: inherit;
}
.sa-inst-card::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 60%, rgba(26, 98, 89,.03));
	pointer-events: none;
	z-index: 1;
}
.sa-inst-card-img {
	height: 170px;
	position: relative;
	overflow: hidden;
	background: linear-gradient(135deg, #E6F4F1, #D0E8E3);
}
.sa-inst-card-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .6s ease;
}
.sa-inst-card:hover .sa-inst-card-img img { transform: scale(1.06); }
.sa-inst-card-img::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 40%, rgba(26, 98, 89,.25));
	pointer-events: none;
}
.sa-inst-card-num {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	background: rgba(255,255,255,.95);
	color: var(--sa-blue-dark);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	padding: 6px 10px;
	border-radius: 100px;
}

.sa-inst-ext-badge {
	position: absolute;
	top: 12px; right: 12px;
	z-index: 2;
	width: 26px; height: 26px;
	background: rgba(11,36,31,0.7);
	color: #fff;
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	font-size: .7rem;
}

.sa-inst-card-body {
	padding: 18px 18px 20px;
	position: relative;
	z-index: 2;
}
.sa-inst-card-name {
	font-family: var(--sa-font-display);
	font-size: 16px;
	font-weight: 700;
	color: var(--sa-blue-dark);
	line-height: 1.3;
	margin-bottom: 10px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 42px;
}
.sa-inst-card-tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .05em;
	color: var(--sa-green);
	background: rgba(67, 192, 178,.10);
	padding: 5px 10px;
	border-radius: 100px;
}
.sa-inst-card-tag::before {
	content: "";
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--sa-green);
}

/* CTA — rounded pill with sliding arrow */
.sa-inst-cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 30px;
	border-radius: 100px;
	background: #fff;
	border: 1.5px solid var(--sa-blue);
	color: var(--sa-blue);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .02em;
	cursor: pointer;
	transition: all .3s ease;
	text-decoration: none;
	margin-top: 30px;
}
.sa-inst-cta:hover {
	background: var(--sa-blue);
	color: #fff;
	box-shadow: 0 10px 25px rgba(37, 134, 120,.3);
	transform: translateY(-2px);
}
.sa-inst-cta svg { transition: transform .3s ease; }
.sa-inst-cta:hover svg { transform: translateX(4px); }

/* ==========================================================================
   Footer
   ========================================================================== */
/* Shared blue textured background -- same design as the footer,
   reused on the Event card and Counter section for consistency. */
.sa-blue-texture-bg {
	position: relative;
	background-color: var(--sa-blue);
	overflow: hidden;
}
.sa-blue-texture-bg::before {
	content: '';
	position: absolute;
	inset: 0;
	opacity: 0.5;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-opacity='0.12' stroke-width='1.5'%3E%3Cpath d='M0 0L40 40M40 0L0 40'/%3E%3Crect x='16' y='16' width='8' height='8'/%3E%3C/g%3E%3C/svg%3E");
	background-size: 40px 40px;
	pointer-events: none;
}
.sa-blue-texture-bg > * { position: relative; z-index: 1; }
.sa-page-banner.sa-blue-texture-bg { background-color: rgba(37, 134, 120,0.75); }

.sa-footer {
	position: relative;
	background: var(--sa-blue);
	color: #fff;
	padding-top: 3rem;
	overflow: hidden;
}

/* Genuine repeating pattern (not a gradient glow) -- small diagonal
   weave/crosshatch tile, tinted with the logo green over itself. */
.sa-footer-texture {
	position: absolute;
	inset: 0;
	z-index: 0;
	opacity: 0.5;
	background-image: url('img/diagonal-line.png');
	background-repeat: repeat;
	pointer-events: none;
}
.sa-footer-inner { position: relative; z-index: 1; }

.sa-footer-brand { display: flex; align-items: center; gap: .6rem; margin-bottom: 1rem; }
.sa-footer-brand .sa-footer-logo-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(255,255,255,0.5);
	border-radius: 12px;
	padding: .5rem .65rem;
}
.sa-footer-brand img { height: 48px; width: auto; display: block; }
.sa-footer-brand span { font-family: var(--sa-font-display); font-weight: 800; font-size: 1.2rem; letter-spacing: .03em; }

.sa-footer-about { font-size: .88rem; line-height: 1.7; opacity: .9; max-width: 340px; }

.sa-footer-social { display: flex; gap: .7rem; margin-top: 1.25rem; }
.sa-footer-social a {
	width: 38px; height: 38px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	background: rgba(255,255,255,0.15); color: #fff; font-size: 1rem;
	transition: background-color .2s ease, transform .2s ease;
}
.sa-footer-social a:hover { background: rgba(255,255,255,0.3); transform: translateY(-3px); }

.sa-footer-heading { font-family: var(--sa-font-display); font-weight: 700; font-size: 1rem; margin-bottom: 1rem; }

.sa-footer-links, .sa-footer-contact { list-style: none; padding: 0; margin: 0; }
.sa-footer-links li { margin-bottom: .65rem; }
.sa-footer-links a { color: rgba(255,255,255,0.85); font-size: .88rem; transition: color .2s ease, padding-left .2s ease; }
.sa-footer-links a:hover { color: #fff; padding-left: .3rem; }

.sa-footer-contact li { display: flex; align-items: flex-start; gap: .5rem; margin-bottom: .8rem; font-size: .86rem; opacity: .9; line-height: 1.5; }
.sa-footer-contact i { margin-top: .2rem; opacity: .8; }
.sa-footer-contact a { color: #fff; }

.sa-footer-bottom {
	border-top: 1px solid rgba(255,255,255,0.15);
	margin-top: 2.5rem;
	padding: 1.25rem 0;
	text-align: center;
}
.sa-footer-bottom p { margin: 0; font-size: .82rem; opacity: .8; }

/* Shared textured background -- same design as Visionary & Founder,
   reused across Studio, Notifications, Events, Institutions and Gallery
   for visual consistency. */
/* ==========================================================================
   Page banner -- quarter-height title section used on every inner page
   ========================================================================== */
/* ==========================================================================
   History page -- founder cards + text
   ========================================================================== */
.sa-founders-section { background: #fff; padding: 3.5rem 0 1rem; }
.sa-founder-card { text-align: center; }
.sa-founder-photo {
	aspect-ratio: 1/1;
	border-radius: 50%;
	overflow: hidden;
	max-width: 180px;
	margin: 0 auto 1rem;
	box-shadow: 0 10px 26px rgba(22,36,31,0.2);
	border: 5px solid #fff;
	outline: 1px solid rgba(18,48,36,0.08);
}
.sa-founder-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sa-founder-card h3 { font-family: var(--sa-font-display); font-size: .95rem; font-weight: 700; color: var(--sa-ink); margin-bottom: .2rem; line-height: 1.3; }
.sa-founder-card span { font-size: .8rem; color: var(--sa-green); font-weight: 600; }

.sa-history-text-section { background: #fff; padding: 1rem 0 3.5rem; }
.sa-history-text { max-width: 820px; margin: 0 auto; }
.sa-history-text p { font-size: .95rem; line-height: 1.85; color: rgba(18,48,36,0.85); margin-bottom: 1.25rem; text-align: justify; }

/* Green crosshatch texture, same mechanism as the footer, for page banners */
.sa-green-crosshatch-bg {
	position: relative;
	background-color: var(--sa-green);
	overflow: hidden;
}
.sa-light-green-texture-bg {
	position: relative;
	background-color: #E4F6F3;
	overflow: hidden;
}
.sa-light-green-texture-bg::before {
	content: '';
	position: absolute;
	inset: 0;
	opacity: 0.9;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='%232A904E' stroke-opacity='0.18' stroke-width='1.5'%3E%3Cpath d='M0 0L40 40M40 0L0 40'/%3E%3Crect x='16' y='16' width='8' height='8'/%3E%3C/g%3E%3C/svg%3E");
	background-size: 40px 40px;
	pointer-events: none;
}
.sa-light-green-texture-bg > * { position: relative; z-index: 1; }

.sa-page-banner.sa-green-crosshatch-bg { background-color: #E4F6F3; }
.sa-person-card.sa-green-crosshatch-bg { background-color: rgba(67, 192, 178,0.5); }
.sa-page-banner.sa-green-crosshatch-bg::before {
	opacity: 0.9;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='%232A904E' stroke-opacity='0.18' stroke-width='1.5'%3E%3Cpath d='M0 0L40 40M40 0L0 40'/%3E%3Crect x='16' y='16' width='8' height='8'/%3E%3C/g%3E%3C/svg%3E");
}
.sa-page-banner.sa-green-crosshatch-bg .sa-page-banner-title { color: var(--sa-ink); }
.sa-page-banner.sa-green-crosshatch-bg .sa-page-banner-desc { color: rgba(18,48,36,0.7); }
.sa-green-crosshatch-bg::before {
	content: '';
	position: absolute;
	inset: 0;
	opacity: 0.5;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-opacity='0.14' stroke-width='1.5'%3E%3Cpath d='M0 0L40 40M40 0L0 40'/%3E%3Crect x='16' y='16' width='8' height='8'/%3E%3C/g%3E%3C/svg%3E");
	background-size: 40px 40px;
	pointer-events: none;
}
.sa-green-crosshatch-bg > .container { position: relative; z-index: 1; }

/* ==========================================================================
   History page -- full-width image, texture wrap, titled blocks
   ========================================================================== */
.sa-pure-white-bg { background: transparent; }

.sa-history-title-block { padding-top: 3rem; }
.sa-history-main-title {
	font-family: var(--sa-font-display);
	font-weight: 800;
	color: var(--sa-blue);
	font-size: 1.6rem;
	letter-spacing: .01em;
}
@media (min-width: 768px) {
	.sa-history-main-title { font-size: 2.9rem; }
}
.sa-history-divider {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	margin: 1.1rem auto;
	max-width: 320px;
}
.sa-history-divider-line { flex: 1; height: 2px; background: linear-gradient(90deg, transparent, var(--sa-green), transparent); }
.sa-history-divider i { color: var(--sa-green); font-size: 1.1rem; }
.sa-history-subtitle {
	font-size: 1.15rem;
	font-style: italic;
	color: rgba(18,48,36,0.65);
	max-width: 640px;
	margin: 0 auto !important;
	text-align: center !important;
}

.sa-president-portrait-card {
	display: inline-block;
	padding: 1rem;
	margin-bottom: 1.25rem;
}
.sa-president-portrait-card .sa-person-photo {
	max-width: 150px;
	margin: 0;
}

/* ==========================================================================
   Charity page cards
   ========================================================================== */
.sa-support-icon {
	display: block;
	font-size: 2.5rem;
	color: #fff;
	opacity: .9;
	margin-bottom: 1rem;
}

/* ==========================================================================
   Charity items -- medium icon badges, zigzag layout
   ========================================================================== */
/* ==========================================================================
   Charity hero banner with glass overlay
   ========================================================================== */
.sa-charity-hero-img {
	position: relative;
	width: 100%;
	height: 42vh;
	min-height: 260px;
	overflow: hidden;
}
.sa-charity-hero-img img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }

.sa-charity-hero-glass {
	position: absolute;
	left: 50%; top: 50%;
	transform: translate(-50%, -50%);
	width: 90%;
	max-width: 640px;
	text-align: center;
	padding: 1.75rem 2rem;
	border-radius: 18px;
	background: rgba(255,255,255,0.35);
	backdrop-filter: blur(14px) saturate(160%);
	-webkit-backdrop-filter: blur(14px) saturate(160%);
	border: 1px solid rgba(255,255,255,0.55);
	box-shadow: 0 10px 34px rgba(0,0,0,0.15);
}
.sa-charity-hero-glass i {
	font-size: 1.8rem;
	color: var(--sa-blue);
	margin-bottom: .6rem;
	display: block;
}
.sa-charity-hero-glass p {
	font-family: var(--sa-font-display);
	font-weight: 700;
	font-size: 1.05rem;
	color: var(--sa-ink);
	margin: 0;
}
@media (min-width: 768px) {
	.sa-charity-hero-glass p { font-size: 1.25rem; }
}

.sa-charity-item { margin-bottom: 3rem; }
.sa-charity-icon-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 110px;
	height: 110px;
	border-radius: 20px;
	font-size: 2.8rem;
	color: #fff;
	box-shadow: 0 10px 24px rgba(22,36,31,0.18);
	transition: transform .3s ease;
}
.sa-charity-item:hover .sa-charity-icon-badge { transform: scale(1.08) rotate(-4deg); }
.sa-charity-icon-blue { background: var(--sa-blue); }
.sa-charity-icon-green { background: var(--sa-green); }

.sa-charity-item-title {
	font-family: var(--sa-font-display);
	font-weight: 700;
	color: var(--sa-blue);
	font-size: 1.2rem;
	margin-bottom: .6rem;
}
.sa-charity-item p { font-size: .92rem; line-height: 1.8; color: rgba(18,48,36,0.8); text-align: justify; }

.sa-charity-card {
	background: rgba(255,255,255,0.75);
	backdrop-filter: blur(8px);
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 8px 24px rgba(22,36,31,0.12);
	transition: transform .3s ease, box-shadow .3s ease;
	height: 100%;
}
.sa-charity-card:hover { transform: translateY(-6px); box-shadow: 0 16px 36px rgba(22,36,31,0.18); }
.sa-charity-card-img { aspect-ratio: 4/3; overflow: hidden; }
.sa-charity-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sa-charity-card-body { padding: 1.25rem; }
.sa-charity-card-body h3 {
	font-family: var(--sa-font-display);
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--sa-blue);
	margin-bottom: .6rem;
	padding-bottom: .4rem;
	border-bottom: 2px solid var(--sa-green);
	display: inline-block;
}
.sa-charity-card-body p { font-size: .88rem; line-height: 1.6; color: rgba(18,48,36,0.7); margin: 0; }

.sa-history-title-block { padding-top: 3rem; padding-bottom: 1rem; }
.sa-history-title-block .sa-history-main-title { margin-bottom: .3rem; }
.sa-history-title-block .sa-history-divider { margin: .8rem auto; }
.sa-history-title-block .sa-history-subtitle { margin-bottom: 0; }

.sa-history-hero-img { width: 100%; height: 42vh; min-height: 300px; overflow: hidden; }
.sa-history-hero-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

.sa-history-wrap { padding: 1rem 0 .5rem; }
.sa-history-block { padding: 2.25rem 0; }

.sa-history-heading {
	font-family: var(--sa-font-display);
	font-weight: 700;
	color: var(--sa-blue);
	font-size: 1.5rem;
	margin-bottom: 1.5rem;
	padding-bottom: .6rem;
	border-bottom: 3px solid var(--sa-green);
	display: inline-block;
}

.sa-history-intro p {
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--sa-ink);
	line-height: 1.7;
	text-align: center;
	max-width: 760px;
	margin: 0 auto;
}

.sa-history-block p {
	font-size: .95rem;
	line-height: 1.85;
	color: rgba(18,48,36,0.85);
	margin-bottom: 1.1rem;
	text-align: justify;
}
.sa-history-closing { text-align: center !important; font-size: 1.05rem !important; color: var(--sa-blue) !important; }

/* ==========================================================================
   Working Committee cards -- no card background, square passport photo
   ========================================================================== */
/* ==========================================================================
   Notifications listing page
   ========================================================================== */
.sa-notif-list-wrap { max-width: 920px; margin: 0 auto; }
.sa-notif-list-row {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	padding: .9rem 1.25rem;
	background: rgba(255,255,255,0.7);
	backdrop-filter: blur(6px);
	border-radius: 10px;
	margin-bottom: 1rem;
	border-left: 3px solid var(--sa-blue);
}
.sa-notif-list-date { flex-shrink: 0; font-size: .8rem; font-weight: 700; color: var(--sa-green); min-width: 90px; }
.sa-notif-list-title { font-size: .92rem; color: var(--sa-ink); }

@media (max-width: 700px) {
	.sa-notif-list-row { flex-direction: column; align-items: flex-start; gap: .35rem; }
	.sa-notif-list-date { min-width: 0; }
}

/* .sa-notif-pagination styling now lives in notifications-list.php
   as .sa-notif-pagination-btn (Prev/Next pill buttons) */

/* ==========================================================================
   President's Message -- photo + blue nameplate card
   ========================================================================== */
.sa-president-photo-wrap {
	width: 100%;
	aspect-ratio: 4 / 3;
	border-radius: 14px 14px 0 0;
	overflow: hidden;
	box-shadow: 0 10px 26px rgba(22,36,31,0.15);
}
.sa-president-photo-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }

.sa-president-nameplate {
	padding: 1.5rem 1.25rem;
	text-align: center;
	border-radius: 0;
	box-shadow: 0 10px 26px rgba(22,36,31,0.15);
}
.sa-president-nameplate strong {
	display: block;
	font-family: var(--sa-font-display);
	color: #fff;
	font-size: 1.2rem;
	font-weight: 800;
}
.sa-president-nameplate span {
	display: block;
	color: rgba(255,255,255,0.85);
	font-size: .85rem;
	font-style: italic;
	margin-top: .3rem;
}

.sa-committee-card {
	text-align: center;
	padding: 1rem;
}
.sa-committee-photo {
	width: 100%;
	max-width: 200px;
	aspect-ratio: 1/1;
	margin: 0 auto 1rem;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 8px 20px rgba(22,36,31,0.18);
	border: 4px solid #fff;
	outline: 1px solid rgba(18,48,36,0.1);
}
.sa-committee-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sa-committee-name {
	font-family: var(--sa-font-display);
	font-weight: 800;
	color: var(--sa-blue);
	text-transform: uppercase;
	font-size: .95rem;
	letter-spacing: .02em;
	margin-bottom: .3rem;
}
.sa-committee-designation {
	font-size: .82rem;
	color: rgba(18,48,36,0.65);
	font-style: italic;
}

.sa-person-card {
	border-radius: 16px;
	padding: 1.5rem 1rem;
	text-align: center;
	box-shadow: 0 10px 26px rgba(22,36,31,0.12);
	transition: transform .3s ease, box-shadow .3s ease;
	overflow: hidden;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.sa-person-card:hover { transform: translateY(-6px); box-shadow: 0 16px 36px rgba(22,36,31,0.18); }
.sa-person-photo {
	aspect-ratio: 1/1;
	border-radius: 50%;
	overflow: hidden;
	max-width: 150px;
	margin: 0 auto 1rem;
	box-shadow: 0 10px 24px rgba(22,36,31,0.2);
	border: 5px solid #fff;
	outline: 1px solid rgba(18,48,36,0.08);
}
.sa-person-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sa-person-card h3 { font-family: var(--sa-font-display); font-size: .92rem; font-weight: 700; color: #fff; margin-bottom: .2rem; line-height: 1.3; }
.sa-person-card span { font-size: .78rem; color: rgba(255,255,255,0.85); font-weight: 700; }

.sa-history-stats-row {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
	margin-bottom: 1.75rem;
}
@media (min-width: 768px) {
	.sa-history-stats-row { grid-template-columns: repeat(4, 1fr); }
}
.sa-history-stat {
	border-radius: 14px;
	padding: 1.25rem .5rem;
	text-align: center;
	box-shadow: 0 8px 20px rgba(22,36,31,0.1);
	overflow: hidden;
}
.sa-history-stat strong { display: block; font-family: var(--sa-font-display); font-size: 1.6rem; font-weight: 800; color: #fff; }
.sa-history-stat span { font-size: .78rem; color: rgba(255,255,255,0.85); font-weight: 600; }

.sa-page-banner {
	position: relative;
	z-index: 0;
	min-height: 34vh;
	display: flex;
	align-items: center;
	padding: 11rem 0 2.5rem;
	text-align: center;
}
@media (min-width: 992px) {
	.sa-page-banner { text-align: left; }
}
.sa-page-banner-title {
	font-family: var(--sa-font-display);
	font-weight: 800;
	color: #fff;
	font-size: 2rem;
	text-transform: uppercase;
	letter-spacing: .03em;
}
.sa-page-banner-desc {
	color: rgba(255,255,255,0.85);
	max-width: 640px;
	margin: .75rem auto 0;
	font-size: 1rem;
	line-height: 1.6;
}
@media (min-width: 768px) {
	.sa-page-banner-title { font-size: 2.6rem; }
}

/* ==========================================================================
   Related pages block -- shown before the footer on every inner page
   ========================================================================== */
.sa-related-section { padding: 3.5rem 0; }
.sa-related-title {
	font-family: var(--sa-font-display);
	font-weight: 700;
	color: #fff;
	font-size: 1.3rem;
	margin-bottom: 1.5rem;
}
.sa-related-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }
.sa-related-btn {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	background: #fff;
	color: var(--sa-blue);
	font-weight: 700;
	font-size: .9rem;
	padding: .75rem 1.5rem;
	border-radius: 30px;
	box-shadow: 0 6px 18px rgba(22,36,31,0.12);
	transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease, color .25s ease;
}
.sa-related-btn:hover {
	background: var(--sa-blue);
	color: #fff;
	transform: translateY(-4px);
	box-shadow: 0 10px 24px rgba(22,36,31,0.2);
}

.sa-texture-bg {
	position: relative;
	background-color: #F4F9F8;
	background-image:
		radial-gradient(circle at 8% 15%, rgba(37, 134, 120,0.16) 0%, transparent 45%),
		radial-gradient(circle at 92% 20%, rgba(67, 192, 178,0.14) 0%, transparent 45%),
		radial-gradient(circle at 15% 90%, rgba(67, 192, 178,0.12) 0%, transparent 40%),
		radial-gradient(circle at 88% 85%, rgba(37, 134, 120,0.14) 0%, transparent 40%),
		repeating-linear-gradient(135deg, rgba(18,48,36,0.025) 0px, rgba(18,48,36,0.025) 1px, transparent 1px, transparent 14px);
}
.sa-texture-bg > .container { position: relative; z-index: 1; }

.sa-visionary-section {
	position: relative;
	padding: 3.5rem 0;
	background-color: #F4F9F8;
	background-image:
		radial-gradient(circle at 8% 15%, rgba(37, 134, 120,0.16) 0%, transparent 45%),
		radial-gradient(circle at 92% 20%, rgba(67, 192, 178,0.14) 0%, transparent 45%),
		radial-gradient(circle at 15% 90%, rgba(67, 192, 178,0.12) 0%, transparent 40%),
		radial-gradient(circle at 88% 85%, rgba(37, 134, 120,0.14) 0%, transparent 40%),
		repeating-linear-gradient(135deg, rgba(18,48,36,0.025) 0px, rgba(18,48,36,0.025) 1px, transparent 1px, transparent 14px);
}

.sa-visionary-section .container {
	padding-left: 1.5rem;
	padding-right: 1.5rem;
	margin-left: auto;
	margin-right: auto;
}
@media (min-width: 992px) {
	.sa-visionary-section .container {
		padding-left: 15px;
		padding-right: 15px;
		max-width: 1140px;
	}
}
@media (min-width: 1200px) {
	.sa-visionary-section .container { max-width: 1140px; }
}
@media (min-width: 1400px) {
	.sa-visionary-section .container { max-width: 1140px; }
}

.sa-visionary-title {
	position: relative;
	z-index: 1;
	font-family: var(--sa-font-display);
	font-weight: 700;
	color: var(--sa-blue);
	font-size: 1.75rem;
	margin-bottom: 1.75rem;
	text-align: center;
}
@media (min-width: 992px) {
	.sa-visionary-title { text-align: left; }
}

.sa-visionary-text-col { padding-left: 1.25rem; padding-right: 1.25rem; }
@media (min-width: 992px) {
	.sa-visionary-text-col { padding-left: 0; padding-right: 0; }
}

.sa-visionary-text-col p {
	color: rgba(18,48,36,0.85);
	line-height: 1.75;
	margin-bottom: 1.1rem;
	text-align: justify;
}
.sa-visionary-text-inner {
	position: relative;
	z-index: 1;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.sa-visionary-photo-wrap {
	position: relative;
	z-index: 1;
	box-sizing: border-box;
	width: 100%;
	max-width: 300px;
	margin: 0 auto;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: 18px;
	background: rgba(18,48,36,0.06);
	box-shadow: 0 14px 34px rgba(22,36,31,0.2);
	border: 5px solid #fff;
	outline: 1px solid rgba(18,48,36,0.08);
}

@media (min-width: 992px) {
	.sa-visionary-photo-col {
		display: flex;
		align-items: center;
		justify-content: center;
		padding-left: 2.5rem;
	}
	.sa-visionary-photo-wrap {
		max-width: 400px;
		margin: 0 auto !important;
		aspect-ratio: 4 / 5;
		height: auto;
	}
}
.sa-visionary-photo-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.sa-visionary-caption {
	position: absolute;
	left: 30px; right: 30px; bottom: 30px;
	border-top: 1px solid rgba(255,255,255,0.35);
	color: #fff;
	padding: 1.1rem 1.4rem 1.25rem;
	text-shadow: 0 1px 6px rgba(0,0,0,0.55);
	background: rgba(255,255,255,0.25);
	border-radius: 10px;
}
.sa-visionary-caption strong {
	display: block;
	font-family: var(--sa-font-display);
	font-size: 1.15rem;
	font-weight: 800;
	color: var(--sa-blue);
	border-bottom: 2px solid var(--sa-green);
	padding-bottom: .4rem;
	margin-bottom: .3rem;
	text-shadow: none;
}
.sa-visionary-caption span {
	display: block;
	font-size: .85rem;
	font-weight: 700;
	color: var(--sa-blue);
	text-shadow: none;
}
	opacity: .9;
}

/* Desktop-only directional entry -- text slides from left while rising,
   photo slides from right while zooming in. Combines with the base
   translateY/scale rules above rather than replacing them. */
@media (min-width: 992px) {
	.sa-visionary-text-col.sa-reveal { transform: translateX(-50px) translateY(30px); }
	.sa-visionary-text-col.sa-reveal.sa-in-view { transform: translateX(0) translateY(0); }
	.sa-visionary-photo-col.sa-reveal { transform: translateX(50px) scale(0.88); }
	.sa-visionary-photo-col.sa-reveal.sa-in-view { transform: translateX(0) scale(1); }
}

/* ==========================================================================
   Hero banner carousel (database-driven, image or video slots)
   ========================================================================== */
.sa-hero-media {
	position: absolute;
	inset: 0;
	overflow: hidden;
}
.sa-hero-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1);
	animation: sa-kenburns 7s ease-out forwards;
}
@keyframes sa-kenburns {
	from { transform: scale(1); }
	to   { transform: scale(1.12); }
}
.sa-hero-media iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100vw;
	height: 56.25vw; /* maintains 16:9 while width drives the size */
	min-height: 100%;
	min-width: 177.78vh; /* maintains 16:9 while height drives the size */
	transform: translate(-50%, -50%);
	border: 0;
	pointer-events: none;
}

.sa-hero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(18,48,36,0.35) 0%, rgba(18,48,36,0.7) 100%);
}

.sa-hero-content {
	position: relative;
	z-index: 2;
	height: 100%;
	display: flex;
	align-items: flex-end;
	color: #fff;
	padding-bottom: 4vh;
}
.sa-hero-text-block { text-align: left; }
.sa-hero-content .mbr-section-title { color: #fff; }
.sa-hero-content .mbr-text { color: rgba(255,255,255,0.9); }

/* Sizing/position matched to the sirajulhuda.com reference:
   mobile = left-aligned lower-third, desktop = centered, contained width */
.sa-hero-title { font-size: .25rem; line-height: 1.3; }
.sa-hero-subtitle { font-size: .95rem; line-height: 1.5; max-width: 420px; }

@media (min-width: 992px) {
	.sa-hero-content .col-lg-8 {
		flex: 0 0 100%;
		max-width: 100%;
	}
	.sa-hero-content {
		align-items: flex-end;
		padding-bottom: 10vh;
	}
	.sa-hero-text-block {
		text-align: left;
		max-width: none;
		width: 100%;
		margin: 0;
		padding-left: 5vw;
		padding-right: 5vw;
	}
	.sa-hero-title { font-size: 2.75rem; }
	.sa-hero-subtitle { font-size: 1.05rem; max-width: 640px; margin-left: 0; margin-right: 0; }
}

/* Title/subtitle entrance animation -- restarted via JS on every slide change */
.sa-hero-title, .sa-hero-subtitle {
	opacity: 0;
	transform: translateY(36px);
}
.sa-hero-title.sa-hero-animate {
	animation: sa-hero-in .9s cubic-bezier(.16,1,.3,1) forwards;
}
.sa-hero-subtitle.sa-hero-animate {
	animation: sa-hero-in .9s cubic-bezier(.16,1,.3,1) .18s forwards;
}
@keyframes sa-hero-in {
	from { opacity: 0; transform: translateY(36px); }
	to   { opacity: 1; transform: translateY(0); }
}

.sa-scroll-cue {
	position: absolute;
	bottom: 24px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 3;
	color: #fff;
	font-size: 1.6rem;
	opacity: .85;
	animation: sa-scroll-bounce 1.8s ease-in-out infinite;
}
@keyframes sa-scroll-bounce {
	0%, 100% { transform: translateX(-50%) translateY(0); }
	50% { transform: translateX(-50%) translateY(10px); }
}

/* Full-screen fit on every device -- 100dvh accounts for mobile browser
   chrome (address bar) so it's a true full-screen fit, not just 100vh
   which can overshoot on phones. */
.sa-hero-banner, .sa-hero-banner .carousel, .sa-hero-banner .carousel-inner, .sa-hero-banner .carousel-item {
	height: 100vh;
	height: 100dvh;
	min-height: 100vh;
	min-height: 100dvh;
}

.sa-hero-banner .carousel-indicators { z-index: 3; margin-bottom: 1.5rem; }
.sa-hero-banner .carousel-indicators button {
	width: 9px; height: 9px; border-radius: 50%; border: none;
	background: rgba(255,255,255,0.5); opacity: 1;
}
.sa-hero-banner .carousel-indicators button.active {
	background: var(--sa-blue);
	transform: scale(1.3);
}
.sa-hero-banner .carousel-control-prev,
.sa-hero-banner .carousel-control-next { z-index: 3; width: 8%; }

/* =============================================================
   BLOG LIST PAGE  (blog-list.php)
   ============================================================= */

/* --- Search band: sits on the standard page texture, no blue band --- */
/* --- Blog page background: stronger version of the site texture,
   applied ONCE on the outer wrap only. Every section inside is
   transparent, so this one continuous paint shows through everywhere
   except the white blog cards. --- */
.sa-blog-texture-strong {
	position: relative;
	background-color: #F0F7F4 !important;
	background-image:
		radial-gradient(circle at 8% 8%, rgba(37, 134, 120,0.16) 0%, transparent 42%),
		radial-gradient(circle at 92% 12%, rgba(67, 192, 178,0.14) 0%, transparent 42%),
		radial-gradient(circle at 12% 55%, rgba(67, 192, 178,0.12) 0%, transparent 40%),
		radial-gradient(circle at 90% 60%, rgba(37, 134, 120,0.13) 0%, transparent 40%),
		radial-gradient(circle at 20% 92%, rgba(37, 134, 120,0.11) 0%, transparent 38%),
		radial-gradient(circle at 85% 95%, rgba(67, 192, 178,0.11) 0%, transparent 38%),
		repeating-linear-gradient(135deg, rgba(18,48,36,0.025) 0px, rgba(18,48,36,0.025) 1px, transparent 1px, transparent 14px) !important;
}
.sa-blog-texture-strong > .container { position: relative; z-index: 1; }

.sa-blog-search-block,
.sa-blog-texture-strong .sa-history-block {
	background: transparent !important;
}

.sa-blog-search-block {
	padding: 3rem 0 2.5rem;
}

.sa-blog-search-form {
	max-width: 720px;
	margin: 0 auto;
	text-align: center;
}

.sa-blog-search-wrap {
	display: flex;
	align-items: stretch;
	background: #fff;
	border-radius: 999px;
	box-shadow:
		0 12px 30px rgba(22, 36, 31, 0.14),
		0 3px 8px rgba(22, 36, 31, 0.08);
	overflow: hidden;
	transition: box-shadow .25s ease;
	border: 1px solid rgba(18, 48, 36, 0.06);
}

.sa-blog-search-wrap:focus-within {
	box-shadow:
		0 16px 38px rgba(22, 36, 31, 0.18),
		0 0 0 4px rgba(37, 134, 120, 0.20);
	border-color: rgba(37, 134, 120, 0.35);
}

.sa-blog-search-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 .5rem 0 1.5rem;
	color: var(--sa-blue);
	font-size: 1.15rem;
}

.sa-blog-search-input {
	flex: 1;
	min-width: 0;
	border: 0;
	outline: 0;
	background: transparent;
	padding: 1rem .75rem;
	font-size: 1rem;
	color: var(--sa-ink);
	font-family: inherit;
}

.sa-blog-search-input::placeholder {
	color: #8a9aa3;
}

/* Search submit button -- textured blue matching the site's blue-texture-bg */
.sa-blog-search-btn {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	border: 0;
	background-color: var(--sa-blue);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-opacity='0.14' stroke-width='1.5'%3E%3Cpath d='M0 0L40 40M40 0L0 40'/%3E%3Crect x='16' y='16' width='8' height='8'/%3E%3C/g%3E%3C/svg%3E");
	background-size: 40px 40px;
	color: #fff;
	padding: 0 1.75rem;
	font-weight: 600;
	font-size: 1rem;
	cursor: pointer;
	transition: background-color .2s ease;
	font-family: inherit;
}

.sa-blog-search-btn:hover,
.sa-blog-search-btn:focus-visible {
	background-color: var(--sa-blue-dark);
}

.sa-blog-search-btn:focus-visible {
	outline: 2px solid #fff;
	outline-offset: -4px;
}

.sa-blog-search-btn i {
	font-size: 1.05rem;
}

.sa-blog-search-clear {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	margin-top: 1rem;
	color: var(--sa-blue);
	text-decoration: none;
	font-size: .9rem;
	font-weight: 600;
	transition: color .2s ease;
}

.sa-blog-search-clear:hover {
	color: var(--sa-blue-dark);
	text-decoration: underline;
}

/* --- Results summary line --- */
.sa-blog-results-summary {
	text-align: center;
	color: var(--sa-ink);
	font-size: 1rem;
	margin: 0 0 2rem;
	opacity: .82;
}

/* --- Blog card (one per row) --- */
.sa-blog-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: #fff;
	border-radius: 16px;
	padding: 1.75rem 1.5rem 1.5rem;
	text-decoration: none;
	color: inherit;
	border: 1px solid rgba(18, 48, 36, 0.06);
	box-shadow: 0 6px 18px rgba(18, 48, 36, 0.08);
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
	position: relative;
	overflow: hidden;
}

.sa-blog-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--sa-blue), var(--sa-green));
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .35s ease;
}

.sa-blog-card:hover,
.sa-blog-card:focus-visible {
	transform: translateY(-4px);
	box-shadow: 0 16px 34px rgba(18, 48, 36, 0.15);
	border-color: rgba(37, 134, 120, 0.22);
	color: inherit;
}

.sa-blog-card:hover::before,
.sa-blog-card:focus-visible::before {
	transform: scaleX(1);
}

.sa-blog-card-meta {
	display: flex;
	align-items: center;
	gap: .75rem;
	margin-bottom: 1rem;
}

.sa-blog-card-avatar {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.sa-blog-card-avatar-initial {
	background: linear-gradient(135deg, var(--sa-blue), var(--sa-green));
	color: #fff;
	font-weight: 700;
	font-size: 1.1rem;
	text-transform: uppercase;
}

.sa-blog-card-meta-text {
	display: flex;
	flex-direction: column;
	line-height: 1.3;
	min-width: 0;
}

.sa-blog-card-meta-text strong {
	font-weight: 600;
	color: var(--sa-blue);
	font-size: .95rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.sa-blog-card-meta-text em {
	font-style: normal;
	font-size: .8rem;
	color: #7a8a90;
}

.sa-blog-card-title {
	font-size: 1.35rem;
	font-weight: 700;
	color: var(--sa-ink);
	margin: 0 0 .75rem;
	line-height: 1.35;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.sa-blog-card-excerpt {
	color: #4a5a60;
	font-size: .95rem;
	line-height: 1.6;
	margin: 0 0 1.25rem;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	flex: 1;
}

.sa-blog-card-readmore {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	color: var(--sa-blue);
	font-weight: 600;
	font-size: .9rem;
	margin-top: auto;
	transition: gap .2s ease;
}

.sa-blog-card:hover .sa-blog-card-readmore,
.sa-blog-card:focus-visible .sa-blog-card-readmore {
	gap: .7rem;
}

/* --- Pagination (Prev / status / Next) --- */
.sa-blog-pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 1.25rem;
	margin: 3rem 0 1rem;
	flex-wrap: wrap;
}

.sa-blog-pagination-btn {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	padding: .7rem 1.4rem;
	background-color: var(--sa-blue);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-opacity='0.14' stroke-width='1.5'%3E%3Cpath d='M0 0L40 40M40 0L0 40'/%3E%3Crect x='16' y='16' width='8' height='8'/%3E%3C/g%3E%3C/svg%3E");
	background-size: 40px 40px;
	color: #fff;
	text-decoration: none;
	border-radius: 30px;
	font-weight: 600;
	font-size: .9rem;
	box-shadow: 0 6px 18px rgba(37, 134, 120, 0.22);
	transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.sa-blog-pagination-btn:hover,
.sa-blog-pagination-btn:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(37, 134, 120, 0.32);
	background-color: var(--sa-blue-dark);
	color: #fff;
}

.sa-blog-pagination-btn.is-disabled {
	opacity: .45;
	pointer-events: none;
	cursor: not-allowed;
	box-shadow: none;
}

.sa-blog-pagination-status {
	color: var(--sa-ink);
	font-size: .95rem;
	font-weight: 600;
	opacity: .8;
	white-space: nowrap;
}

/* --- Empty / no-results state --- */
.sa-blog-empty {
	text-align: center;
	padding: 3rem 1rem;
	color: var(--sa-ink);
}

.sa-blog-empty i {
	font-size: 3rem;
	color: var(--sa-blue);
	opacity: .5;
	margin-bottom: 1rem;
	display: block;
}

.sa-blog-empty h3 {
	font-size: 1.25rem;
	font-weight: 700;
	margin: 0 0 .5rem;
	color: var(--sa-ink);
}

.sa-blog-empty p {
	font-size: 1rem;
	margin: 0;
	opacity: .85;
}

.sa-blog-empty a {
	color: var(--sa-blue);
	font-weight: 600;
}

/* --- Mobile refinements --- */
@media (max-width: 576px) {
	.sa-blog-search-block { padding: 2.25rem 0 2rem; }
	.sa-blog-search-icon  { padding: 0 .35rem 0 1.15rem; }
	.sa-blog-search-input { padding: .9rem .5rem; font-size: .95rem; }
	.sa-blog-search-btn   { padding: 0 1.15rem; }
	.sa-blog-search-btn span { display: none; }
	.sa-blog-search-btn i    { font-size: 1.2rem; }
	.sa-blog-card-title      { font-size: 1.15rem; }
	.sa-blog-pagination      { gap: .75rem; }
	.sa-blog-pagination-btn  { padding: .6rem 1.1rem; font-size: .85rem; }
}

/* --- Reduced motion respected --- */
@media (prefers-reduced-motion: reduce) {
	.sa-blog-card,
	.sa-blog-card::before,
	.sa-blog-search-wrap,
	.sa-blog-card-readmore,
	.sa-blog-pagination-btn {
		transition: none;
	}
	.sa-blog-card:hover,
	.sa-blog-card:focus-visible,
	.sa-blog-pagination-btn:hover {
		transform: none;
	}
}

/* ==========================================================================
   Notifications + Notices panels (homepage) -- elegant card in the logo theme
   Replaces the old .sa-noti-col / .sa-noti-ticker marquee treatment.
   ========================================================================== */
.sa-panel {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	background: #fff;
	border: 1px solid rgba(37, 134, 120,0.16);
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 10px 34px rgba(18,48,36,0.07);
}
/* Thin blue-to-green cap across the top -- the logo's two colours */
.sa-panel::before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 4px;
	background: linear-gradient(90deg, var(--sa-blue) 0%, var(--sa-green) 100%);
	z-index: 2;
}

.sa-panel-head {
	position: relative;
	display: flex;
	align-items: center;
	gap: .7rem;
	padding: 1.15rem 1.25rem .9rem;
	border-bottom: 1px solid rgba(37, 134, 120,0.12);
}
.sa-panel-head::after {
	content: "";
	position: absolute;
	left: 1.25rem;
	bottom: -1px;
	width: 52px;
	height: 2px;
	background: var(--sa-green);
}
.sa-panel-icon {
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: rgba(37, 134, 120,0.10);
	color: var(--sa-blue);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1rem;
}
.sa-panel-title {
	font-family: var(--sa-font-display);
	font-weight: 700;
	font-size: 1.15rem;
	color: var(--sa-blue-dark);
	letter-spacing: -.01em;
	margin: 0;
}

/* ---------- Notifications list ---------- */
.sa-noti-list {
	flex: 1 1 auto;
	padding: .4rem .6rem;
	max-height: 430px;
	overflow-y: auto;
	scroll-behavior: auto;
	scrollbar-width: thin;
	scrollbar-color: var(--sa-blue) rgba(37, 134, 120,0.12);
}
.sa-noti-list::-webkit-scrollbar {
	width: 6px;
	-webkit-appearance: none;
}
.sa-noti-list::-webkit-scrollbar-track {
	background: rgba(37, 134, 120,0.12);
	border-radius: 3px;
}
.sa-noti-list::-webkit-scrollbar-thumb {
	background: var(--sa-blue);
	border-radius: 3px;
}

.sa-noti-row {
	display: flex;
	align-items: flex-start;
	gap: .9rem;
	padding: .8rem .75rem;
	border-bottom: 1px solid rgba(18,48,36,0.18);
	border-radius: 0;
	text-decoration: none;
	color: inherit;
	cursor: default;
}
.sa-noti-row:last-child { border-bottom: 0; }

/* Alternating graph-paper rows -- same 12px grid as before, drawn light.
   Raise the two 0.07 line values for a crisper grid, or the 0.05 fills
   for stronger row tints. */
.sa-noti-row:nth-child(odd) {
	background-color: rgba(67, 192, 178,0.05);
	background-image:
		repeating-linear-gradient(0deg, rgba(67, 192, 178,0.07) 0px, rgba(67, 192, 178,0.07) 1px, transparent 1px, transparent 12px),
		repeating-linear-gradient(90deg, rgba(67, 192, 178,0.07) 0px, rgba(67, 192, 178,0.07) 1px, transparent 1px, transparent 12px);
}
.sa-noti-row:nth-child(even) {
	background-color: rgba(37, 134, 120,0.05);
	background-image:
		repeating-linear-gradient(0deg, rgba(37, 134, 120,0.07) 0px, rgba(37, 134, 120,0.07) 1px, transparent 1px, transparent 12px),
		repeating-linear-gradient(90deg, rgba(37, 134, 120,0.07) 0px, rgba(37, 134, 120,0.07) 1px, transparent 1px, transparent 12px);
}

.sa-noti-row .sa-noti-date {
	width: 50px;
	padding-right: .85rem;
	border-right: 1px solid rgba(37, 134, 120,0.18);
}
/* Full text, never truncated */
.sa-noti-text {
	flex: 1 1 auto;
	min-width: 0;
	font-size: .92rem;
	font-weight: 600;
	line-height: 1.45;
	color: var(--sa-ink);
	white-space: normal;
	overflow: visible;
	text-overflow: clip;
	display: block;
}
.sa-noti-chev {
	flex: 0 0 auto;
	margin-top: .2rem;
	font-size: .8rem;
	color: rgba(37, 134, 120,0.45);
}

/* Mobile: date on its own top row, text full width underneath */
@media (max-width: 575.98px) {
	.sa-noti-row {
		flex-direction: column;
		align-items: stretch;
		gap: .4rem;
	}
	.sa-noti-row .sa-noti-date {
		display: flex;
		align-items: baseline;
		gap: .35rem;
		width: auto;
		padding-right: 0;
		border-right: 0;
		text-align: left;
	}
	.sa-noti-row .sa-noti-date strong,
	.sa-noti-row .sa-noti-date small,
	.sa-noti-row .sa-noti-date em { display: inline; }
	.sa-noti-row .sa-noti-date strong { font-size: .95rem; }
	.sa-noti-row .sa-noti-date small  { font-size: .72rem; }
	.sa-noti-row .sa-noti-date em     { font-size: .72rem; margin: 0; }
	.sa-noti-text { width: 100%; font-size: .9rem; }
	.sa-noti-chev { display: none; }
}

/* ---------- Notices slider ---------- */
.sa-notice-stage {
	position: relative;
	height: 430px;
	margin: 1rem 1.25rem 0;
	border-radius: 10px;
	overflow: hidden;
	background: rgba(37, 134, 120,0.06);
	border: 1px solid rgba(37, 134, 120,0.16);
}
.sa-notice-slide {
	position: absolute;
	inset: 0;
	display: block;
	opacity: 0;
	pointer-events: none;
	transition: opacity .9s ease;
}
.sa-notice-slide.is-active {
	opacity: 1;
	pointer-events: auto;
}
.sa-notice-slide img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}
.sa-notice-dots {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: .4rem;
	padding: .85rem 1.25rem 0;
}
.sa-notice-dots button {
	width: 7px;
	height: 7px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: rgba(37, 134, 120,0.28);
	cursor: pointer;
	transition: width .25s ease, background-color .25s ease;
}
.sa-notice-dots button.is-active {
	width: 18px;
	background: var(--sa-green);
}

/* ---------- Panel footer button ---------- */
.sa-panel-foot {
	margin-top: auto;
	padding: 1.1rem 1.25rem 1.25rem;
}
.sa-panel-btn {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--sa-blue);
	background: transparent;
	border: 1px solid rgba(37, 134, 120,0.35);
	border-radius: 999px;
	padding: .6rem 1.15rem;
	text-decoration: none;
	transition: background-color .22s ease, color .22s ease, border-color .22s ease;
}
.sa-panel-btn:hover {
	background: var(--sa-blue);
	border-color: var(--sa-blue);
	color: #fff;
}

@media (min-width: 992px) {
	/* Shape the stage 3:4 instead of a fixed 430px, so object-fit: contain
	   leaves no gap on any side at any column width -- the same approach
	   already used below 992px. A fixed height cannot work here because the
	   stage is much narrower at 992-1199px than it is above 1200px. */
	.sa-notice-stage {
		height: auto;
		aspect-ratio: 3 / 4;
	}

	/* The stage now sets the row height, so let the list grow to fill whatever
	   that is and both cards end level. min-height: 0 keeps it scrolling rather
	   than expanding; 70vh is only a fallback for when no notices are present. */
	.sa-noti-list {
		max-height: 70vh;
		min-height: 0;
	}
}

@media (max-width: 991.98px) {
	.sa-notice-stage { height: auto; aspect-ratio: 3 / 4; }
	/* Fallback cap if JS is off -- the script refines this so the notifications
	   card ends at exactly the same point as the notices card. */
	.sa-noti-list { max-height: 58vh; }

	/* Always-visible scrollbar so it is obvious the list scrolls.
	   Mobile browsers hide overlay scrollbars until you touch; giving the
	   scrollbar an explicit width and a track colour keeps it on screen. */
	.sa-noti-list {
		padding-right: .2rem;
		scrollbar-width: thin;
		scrollbar-color: var(--sa-blue) rgba(37, 134, 120,0.12);
	}
	.sa-noti-list::-webkit-scrollbar {
		width: 6px;
		-webkit-appearance: none;
	}
	.sa-noti-list::-webkit-scrollbar-track {
		background: rgba(37, 134, 120,0.12);
		border-radius: 3px;
	}
	.sa-noti-list::-webkit-scrollbar-thumb {
		background: var(--sa-blue);
		border-radius: 3px;
	}
}

/* Lighter version of the grid texture behind this section only.
   Same design, roughly half the tint. Other .sa-texture-bg sections unchanged. */
.sa-noti-section.sa-texture-bg {
	background-color: #F8FBFC;
	background-image:
		radial-gradient(circle at 8% 15%, rgba(37, 134, 120,0.08) 0%, transparent 45%),
		radial-gradient(circle at 92% 20%, rgba(67, 192, 178,0.07) 0%, transparent 45%),
		radial-gradient(circle at 15% 90%, rgba(67, 192, 178,0.06) 0%, transparent 40%),
		radial-gradient(circle at 88% 85%, rgba(37, 134, 120,0.07) 0%, transparent 40%),
		/* Same 14px diagonal grid as the rest of the site, drawn in a light blue
		   instead of dark ink -- still clearly a grid, just softer. Raise the
		   0.055 if you want the lines stronger. */
		repeating-linear-gradient(135deg, rgba(37, 134, 120,0.055) 0px, rgba(37, 134, 120,0.055) 1px, transparent 1px, transparent 14px);
}

/* Scan-to-donate, now living inside the Support Our Mission section */
.sa-donate-scan-wrap {
	display: flex;
	justify-content: center;
	margin-top: 2.5rem;
}
.sa-donate-scan-wrap .sa-donate {
	width: 100%;
	max-width: 340px;
}

/* ==========================================================================
   Notices -- slider arrows and the fullscreen poster viewer
   ========================================================================== */
.sa-notice-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	width: 34px;
	height: 34px;
	border: 0;
	border-radius: 50%;
	background: rgba(255,255,255,0.9);
	color: var(--sa-blue);
	font-size: .95rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 3px 10px rgba(18,48,36,0.18);
	transition: background-color .2s ease, color .2s ease;
}
.sa-notice-nav:hover { background: var(--sa-blue); color: #fff; }
.sa-notice-nav-prev { left: .55rem; }
.sa-notice-nav-next { right: .55rem; }

.sa-notice-modal {
	position: fixed;
	inset: 0;
	z-index: 2000;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 2.5rem 1rem;
	background: rgba(12,28,22,0.92);
}
.sa-notice-modal.is-open { display: flex; }

.sa-notice-modal-inner {
	position: relative;
	max-width: 620px;
	width: 100%;
	max-height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.sa-notice-modal-inner img {
	max-width: 100%;
	max-height: 78vh;
	object-fit: contain;
	border-radius: 8px;
	background: #fff;
}
.sa-notice-modal-close,
.sa-notice-modal-nav {
	position: absolute;
	z-index: 3;
	border: 0;
	border-radius: 50%;
	background: rgba(255,255,255,0.92);
	color: var(--sa-blue);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background-color .2s ease, color .2s ease;
}
.sa-notice-modal-close:hover,
.sa-notice-modal-nav:hover { background: var(--sa-blue); color: #fff; }

.sa-notice-modal-close {
	top: 1rem;
	right: 1rem;
	width: auto;
	height: 42px;
	padding: 0 1.1rem;
	gap: .45rem;
	border-radius: 999px;
	background: var(--sa-blue);
	color: #fff;
	font-size: .95rem;
	font-weight: 600;
	box-shadow: 0 4px 14px rgba(0,0,0,0.3);
}
.sa-notice-modal-close::after {
	content: "";
}
.sa-notice-modal-close:hover {
	background: #fff;
	color: var(--sa-blue);
}
.sa-notice-modal-nav {
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	font-size: 1.1rem;
}
.sa-notice-modal-prev { left: 1rem; }
.sa-notice-modal-next { right: 1rem; }

@media (max-width: 575.98px) {
	.sa-notice-modal { padding: 3.5rem .75rem 1rem; }
	.sa-notice-modal-nav { width: 38px; height: 38px; }
	.sa-notice-modal-prev { left: .4rem; }
	.sa-notice-modal-next { right: .4rem; }
	.sa-notice-modal-inner img { max-height: 68vh; }
}

/* ==========================================================================
   Mobile-only divider between the Notifications and Notices panels
   ========================================================================== */
.sa-mobile-divider { display: none; }

@media (max-width: 991.98px) {
	.sa-mobile-divider {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: .7rem;
		margin: 1.75rem 0;
	}
	/* Quarter of the old full-bleed width, and each bar breathes in and out */
	.sa-mobile-divider-bar {
		flex: 0 0 auto;
		width: 12%;
		height: 6px;
		border-radius: 999px;
		background: linear-gradient(90deg, var(--sa-blue) 0%, var(--sa-green) 50%, var(--sa-blue) 100%);
		background-size: 200% 100%;
		animation: sa-divider-slide 3.5s linear infinite,
		           sa-divider-breathe 2.8s ease-in-out infinite;
		transform-origin: right center;
	}
	.sa-mobile-divider-bar:last-child { transform-origin: left center; }
	.sa-mobile-divider-gem {
		flex: 0 0 auto;
		width: 12px;
		height: 12px;
		background: var(--sa-green);
		transform: rotate(45deg);
		border-radius: 2px;
		animation: sa-divider-pulse 2.2s ease-in-out infinite;
	}
}

@keyframes sa-divider-slide {
	0%   { background-position: 0% 50%; }
	100% { background-position: 200% 50%; }
}
@keyframes sa-divider-breathe {
	0%, 100% { transform: scaleX(0.55); }
	50%      { transform: scaleX(1); }
}
@keyframes sa-divider-pulse {
	0%, 100% { transform: rotate(45deg) scale(1);    background: var(--sa-green); }
	50%      { transform: rotate(45deg) scale(1.25); background: var(--sa-blue); }
}

@media (prefers-reduced-motion: reduce) {
	.sa-mobile-divider-bar,
	.sa-mobile-divider-gem { animation: none; }
}

/* Poster viewer must clear the sticky navbar */
.sa-notice-modal { z-index: 2147483000; }