/* ==========================================================================
   Sa-adiya theme override on top of the Mobirise template
   Primary color only: #1B7CB1 (from the logo). No blending with green.
   ========================================================================== */
:root {
	--sa-blue: #1B7CB1;
	--sa-blue-dark: #145d87;
	--sa-green: #2A904E;
	--sa-green-dark: #1F6E3B;
	--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; }
}

/* ==========================================================================
   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: rgba(255,255,255,0.75);
	backdrop-filter: blur(8px);
	border-radius: 16px;
	padding: 1.5rem;
	box-shadow: 0 8px 24px rgba(22,36,31,0.1);
}

.sa-noti-ticker-mask {
	position: relative;
	height: calc(3 * 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(42,144,78,0.14);
	background-image:
		repeating-linear-gradient(0deg, rgba(42,144,78,0.16) 0px, rgba(42,144,78,0.16) 1px, transparent 1px, transparent 12px),
		repeating-linear-gradient(90deg, rgba(42,144,78,0.16) 0px, rgba(42,144,78,0.16) 1px, transparent 1px, transparent 12px);
	border-left-color: var(--sa-green);
}
.sa-noti-item:nth-child(even) {
	background-color: rgba(27,124,177,0.14);
	background-image:
		repeating-linear-gradient(0deg, rgba(27,124,177,0.16) 0px, rgba(27,124,177,0.16) 1px, transparent 1px, transparent 12px),
		repeating-linear-gradient(90deg, rgba(27,124,177,0.16) 0px, rgba(27,124,177,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(27,124,177,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(27,124,177,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: 3.5rem 0;
}
.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; }

.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: #fff; padding: 3.5rem 0; }

.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(3 * 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; }

.sa-inst-title {
	font-family: var(--sa-font-display);
	font-weight: 700;
	color: var(--sa-blue);
	font-size: 1.75rem;
	text-align: center;
	margin-bottom: .4rem;
}
.sa-inst-sub { text-align: center; color: rgba(18,48,36,0.65); margin-bottom: 2rem; }

.sa-inst-marquee-mask {
	margin: 1.5rem 1.25rem 2rem;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 4%, #000 96%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0%, #000 4%, #000 96%, transparent 100%);
}
@media (min-width: 992px) {
	.sa-inst-marquee-mask { margin-left: 3rem; margin-right: 3rem; }
}

.sa-inst-marquee {
	display: flex;
	gap: 1.25rem;
	width: max-content;
	animation: sa-inst-scroll 35s linear infinite;
}
.sa-inst-marquee-mask:hover .sa-inst-marquee { animation-play-state: paused; }

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

.sa-inst-card {
	flex: 0 0 auto;
	width: 220px;
	text-decoration: none;
	color: inherit;
	display: block;
}
.sa-inst-card-img {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 3;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 8px 22px rgba(22,36,31,0.18);
	transition: transform .3s ease;
}
.sa-inst-card:hover .sa-inst-card-img { transform: translateY(-6px); }
.sa-inst-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

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

.sa-inst-card-name {
	font-family: var(--sa-font-display);
	font-weight: 700;
	font-size: .92rem;
	color: var(--sa-ink);
	margin-top: .6rem;
	line-height: 1.3;
}
.sa-inst-card-tag {
	display: inline-block;
	font-size: .68rem;
	font-weight: 700;
	color: var(--sa-green);
	background: rgba(42,144,78,0.1);
	padding: .15rem .55rem;
	border-radius: 10px;
	margin-top: .3rem;
}

/* ==========================================================================
   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(27,124,177,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;
	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-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: 10px;
	padding: .35rem .5rem;
}
.sa-footer-brand img { height: 32px; 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: #DFF3E5;
	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: #DFF3E5; }
.sa-person-card.sa-green-crosshatch-bg { background-color: rgba(42,144,78,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(27,124,177,0.16) 0%, transparent 45%),
		radial-gradient(circle at 92% 20%, rgba(42,144,78,0.14) 0%, transparent 45%),
		radial-gradient(circle at 15% 90%, rgba(42,144,78,0.12) 0%, transparent 40%),
		radial-gradient(circle at 88% 85%, rgba(27,124,177,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(27,124,177,0.16) 0%, transparent 45%),
		radial-gradient(circle at 92% 20%, rgba(42,144,78,0.14) 0%, transparent 45%),
		radial-gradient(circle at 15% 90%, rgba(42,144,78,0.12) 0%, transparent 40%),
		radial-gradient(circle at 88% 85%, rgba(27,124,177,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: 0; right: 0; bottom: 0;
	background: linear-gradient(0deg, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0) 100%);
	color: #fff;
	padding: 2.5rem 1.5rem 1.25rem;
}
.sa-visionary-caption strong {
	display: block;
	font-family: var(--sa-font-display);
	font-size: 1.15rem;
	border-bottom: 2px solid var(--sa-blue);
	padding-bottom: .4rem;
	margin-bottom: .3rem;
}
.sa-visionary-caption span {
	display: block;
	font-size: .85rem;
	opacity: .85;
}

/* 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 {
	width: 100%;
	height: 100%;
	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: 12vh;
}
.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: 1rem; 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(27,124,177,0.16) 0%, transparent 42%),
		radial-gradient(circle at 92% 12%, rgba(42,144,78,0.14) 0%, transparent 42%),
		radial-gradient(circle at 12% 55%, rgba(42,144,78,0.12) 0%, transparent 40%),
		radial-gradient(circle at 90% 60%, rgba(27,124,177,0.13) 0%, transparent 40%),
		radial-gradient(circle at 20% 92%, rgba(27,124,177,0.11) 0%, transparent 38%),
		radial-gradient(circle at 85% 95%, rgba(42,144,78,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(27, 124, 177, 0.20);
	border-color: rgba(27, 124, 177, 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(27, 124, 177, 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(27, 124, 177, 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(27, 124, 177, 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;
	}
}