/* ==========================================================================
   MaargX — design system
   Colors are CSS custom properties, overridden live from the Customizer
   (see inc/theme-options.php → maargx_output_dynamic_colors). Typography is
   Tahoma-led (per brand direction), system fallbacks keep it fast — zero
   external font requests for best LCP.
   ========================================================================== */

:root {
	/* Exactly three colors, used with strict discipline — no more, no
	   fewer: darkest royal navy for all text, maroon for CTAs/emphasis on
	   light backgrounds, and white for text on any dark/navy surface. */

	/* Navy — one hue, three depths (still "navy", never a different color) */
	--maargx-secondary: #0A1F3D;      /* darkest royal navy — default text, headings, nav */
	--maargx-navy-deep: #071527;      /* deepest navy — dark section backgrounds */
	--maargx-navy-mid: #1D3A63;       /* lighter navy — hover states only */

	/* Maroon — the one accent color, for CTAs/links/emphasis on light backgrounds */
	--maargx-primary: #7A1220;
	--maargx-primary-light: #9C2430;
	--maargx-accent: #7A1220;         /* same maroon — no separate decorative hue */
	--maargx-success: #0A1F3D;        /* checkmarks read as navy, not a stray green */

	--maargx-bg: #FFFFFF;             /* white page base */
	--maargx-bg-alt: #F2F5F9;         /* near-white, same neutral family */
	--maargx-text: #0A1F3D;           /* darkest navy — every line of body/heading text */
	--maargx-text-muted: #0A1F3D;     /* same solid navy-black as body text — no gray tier at all; hierarchy comes from size/weight, not a dimmed color */
	--maargx-border: #E1E7EE;

	/* Every dark/navy surface reads text from these two — plain white,
	   full stop — so nothing goes invisible and nothing looks random. */
	--maargx-on-dark: #FFFFFF;
	--maargx-on-dark-muted: #FFFFFF;  /* no dimmed/gray variant — every dark surface gets full white */

	/* Subtle depth without introducing a new hue — pale navy tint easing to white. */
	--maargx-page-gradient: linear-gradient(180deg, #EEF3F9 0%, #FFFFFF 55%);
	--maargx-hero-gradient: linear-gradient(160deg, #E7EEF6 0%, #FFFFFF 70%);

	--maargx-font-heading: Tahoma, Verdana, "Segoe UI", -apple-system, Roboto, Arial, sans-serif;
	--maargx-font-body: Tahoma, Verdana, "Segoe UI", -apple-system, Roboto, Arial, sans-serif;

	--maargx-radius: 14px;
	--maargx-shadow: 0 4px 20px rgba(11, 37, 69, 0.08);
	--maargx-shadow-lg: 0 20px 50px rgba(11, 37, 69, 0.18);
	--maargx-container: 1360px;
}

* { box-sizing: border-box; }

/* The browser's own [hidden] rule loses to any component that sets its
   own display (e.g. .maargx-card{display:flex}), since author CSS always
   beats the UA stylesheet regardless of specificity — this is what silently
   broke the category filter tabs. Force it to always win, sitewide. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
	margin: 0;
	font-family: var(--maargx-font-body);
	color: var(--maargx-text);
	background: var(--maargx-bg);
	background-image: var(--maargx-page-gradient);
	background-attachment: fixed;
	line-height: 1.65;
	font-size: 17px;
	overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--maargx-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 {
	font-family: var(--maargx-font-heading);
	font-weight: 700;
	line-height: 1.2;
	color: var(--maargx-secondary);
	margin: 0 0 .5em;
}

.maargx-container { max-width: var(--maargx-container); margin: 0 auto; padding: 0 20px; }

.maargx-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--maargx-primary); margin-bottom: 10px; }
.maargx-eyebrow::before { content: ''; width: 18px; height: 2px; background: var(--maargx-accent); display: inline-block; }
.maargx-eyebrow--light { color: var(--maargx-on-dark); }
.maargx-eyebrow--light::before { background: var(--maargx-on-dark); }

/* -------------------- Buttons -------------------- */
.maargx-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: var(--maargx-primary);
	background-image: linear-gradient(135deg, var(--maargx-primary), var(--maargx-primary-light));
	color: #fff;
	border: 2px solid transparent;
	padding: 12px 26px;
	border-radius: 999px;
	font-weight: 700;
	font-size: 15px;
	cursor: pointer;
	overflow: hidden;
	transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
	text-decoration: none;
	box-shadow: 0 6px 18px rgba(122, 18, 32, .25);
}
.maargx-btn:hover { filter: brightness(1.08); text-decoration: none; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(122, 18, 32, .32); color: #fff; }
.maargx-btn::before {
	content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
	background: linear-gradient(120deg, transparent, rgba(255,255,255,.35), transparent);
	transform: skewX(-20deg); transition: left .5s ease;
}
.maargx-btn:hover::before { left: 130%; }
.maargx-btn--outline::before { display: none; }
.maargx-btn--outline { background: transparent; background-image: none; color: var(--maargx-primary); border-color: var(--maargx-primary); box-shadow: none; }
.maargx-btn--outline:hover { background: var(--maargx-primary); color: #fff; box-shadow: 0 8px 20px rgba(122,18,32,.2); }
.maargx-btn--large { padding: 16px 34px; font-size: 17px; }
.maargx-btn--small { padding: 8px 18px; font-size: 13px; box-shadow: none; }
.maargx-btn--full { width: 100%; margin-top: 10px; }

/* -------------------- Top contact bar -------------------- */
.maargx-topbar {
	background: linear-gradient(90deg, var(--maargx-navy-deep), var(--maargx-secondary) 55%, var(--maargx-navy-deep));
	color: var(--maargx-on-dark-muted); font-size: 12.5px;
	border-bottom: 2px solid var(--maargx-primary);
}
.maargx-topbar__inner {
	max-width: var(--maargx-container); margin: 0 auto; padding: 8px 20px; position: relative;
	display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
}
.maargx-topbar__contact { display: flex; align-items: center; justify-content: center; gap: 22px; grid-column: 2; }
.maargx-topbar__contact a { display: inline-flex; align-items: center; gap: 8px; color: var(--maargx-on-dark-muted); font-weight: 600; letter-spacing: .01em; }
.maargx-topbar__contact a:hover { color: var(--maargx-on-dark); text-decoration: underline; }
.maargx-topbar__icon {
	display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%;
	background: rgba(122,18,32,.35); border: 1px solid rgba(255,255,255,.18); font-size: 11px; flex-shrink: 0;
	color: #fff;
}
.maargx-topbar__quicklinks { display: flex; align-items: center; gap: 16px; grid-column: 1; justify-self: start; min-width: 0; }
.maargx-topbar__qlink {
	display: inline-flex; align-items: center; gap: 6px; color: var(--maargx-on-dark-muted);
	font-weight: 700; font-size: 12px; letter-spacing: .03em; text-transform: uppercase;
	padding-bottom: 2px; border-bottom: 1px solid transparent; transition: color .2s ease, border-color .2s ease;
}
.maargx-topbar__qlink svg { color: #fff; flex-shrink: 0; }
.maargx-topbar__qlink:hover { color: var(--maargx-on-dark); border-bottom-color: #fff; text-decoration: none; }
.maargx-topbar__divider { width: 1px; height: 14px; background: rgba(255,255,255,.22); flex-shrink: 0; }
.maargx-topbar__socials { display: flex; gap: 8px; grid-column: 3; justify-self: end; }
.maargx-topbar__socials__link {
	width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.14);
	display: flex; align-items: center; justify-content: center; color: #fff; transition: background .2s ease, transform .2s ease, border-color .2s ease;
}
.maargx-topbar__socials__link:hover { color: var(--maargx-on-dark); text-decoration: none; transform: translateY(-2px); filter: brightness(1.1); }

/* Brand-true colors for social icons — recognizable at a glance instead of
   flattened to one theme color. */
.maargx-topbar__socials__link--facebook { background: #1877F2; border-color: #1877F2; }
.maargx-topbar__socials__link--instagram {
	background: radial-gradient(circle at 30% 110%, #FDF497 0%, #FD5949 45%, #D6249F 60%, #285AEB 90%);
	border-color: transparent;
}
.maargx-topbar__socials__link--youtube { background: #FF0000; border-color: #FF0000; }
.maargx-topbar__socials__link--telegram { background: #26A5E4; border-color: #26A5E4; }
.maargx-topbar__socials__link--twitter { background: #000000; border-color: #000000; }
.maargx-topbar__socials__link--linkedin { background: #0A66C2; border-color: #0A66C2; }

@media (max-width: 900px) {
	.maargx-topbar__inner { grid-template-columns: auto 1fr; }
	.maargx-topbar__quicklinks { display: none; }
	.maargx-topbar__contact { grid-column: 1; justify-content: flex-start; }
	.maargx-topbar__socials { grid-column: 2; }
}

/* -------------------- Announcement Banner (strip/popup) -------------------- */
.maargx-banner { background: linear-gradient(90deg, var(--maargx-primary), var(--maargx-primary-light)); color: #fff; }
.maargx-banner__inner {
	max-width: var(--maargx-container);
	margin: 0 auto;
	padding: 7px 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	flex-wrap: wrap;
	text-align: center;
}
.maargx-banner__text { font-weight: 700; font-size: 13px; }
.maargx-banner__close { background: none; border: none; color: #fff; cursor: pointer; font-size: 16px; opacity: .75; }
.maargx-banner__close:hover { opacity: 1; }
.maargx-banner--popup {
	position: fixed; inset: 0; background: rgba(7,26,51,.65); z-index: 999;
	display: flex; align-items: center; justify-content: center;
}
.maargx-banner--popup .maargx-banner__inner {
	background: var(--maargx-bg); color: var(--maargx-text); flex-direction: column;
	border-radius: var(--maargx-radius); padding: 36px; max-width: 420px; box-shadow: var(--maargx-shadow-lg); position: relative;
}
.maargx-banner--popup .maargx-banner__text { font-size: 20px; color: var(--maargx-secondary); }
.maargx-banner--popup .maargx-banner__close { color: var(--maargx-text-muted); position: absolute; top: 12px; right: 16px; font-size: 20px; }
.maargx-banner--popup[hidden] { display: none; }

/* -------------------- News ticker -------------------- */
.maargx-ticker { display: flex; align-items: center; background: var(--maargx-bg-alt); border-top: 1px solid var(--maargx-border); }
.maargx-ticker__label {
	flex-shrink: 0; background: var(--maargx-secondary); color: var(--maargx-on-dark); font-weight: 700; font-size: 12px;
	letter-spacing: .04em; text-transform: uppercase; padding: 8px 16px; white-space: nowrap;
}
.maargx-ticker__viewport { overflow: hidden; flex: 1; }
.maargx-ticker__track { display: flex; gap: 40px; white-space: nowrap; width: max-content; animation: maargx-ticker-scroll 32s linear infinite; padding: 8px 20px; }
.maargx-ticker__track a { font-size: 13px; font-weight: 600; color: var(--maargx-text); }
.maargx-ticker__track a:hover { color: var(--maargx-primary); }
.maargx-ticker:hover .maargx-ticker__track { animation-play-state: paused; }
@keyframes maargx-ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* -------------------- Header -------------------- */
.maargx-header { border-bottom: 1px solid var(--maargx-border); background: var(--maargx-bg); position: sticky; top: 0; z-index: 100; box-shadow: 0 1px 0 rgba(0,0,0,.02); }
.maargx-header__inner {
	max-width: var(--maargx-container); margin: 0 auto; padding: 12px 20px;
	display: flex; align-items: center; gap: 18px;
}
.maargx-logo { flex-shrink: 0; display: flex; align-items: center; gap: 8px; }
.maargx-logo:hover { text-decoration: none; }
.maargx-logo img { max-height: 58px; width: auto; }
.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.maargx-logo__badge {
	width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
	background: linear-gradient(135deg, var(--maargx-primary), var(--maargx-primary-light));
	color: #fff; display: flex; align-items: center; justify-content: center;
	font-family: var(--maargx-font-heading); font-weight: 800; font-size: 19px;
	box-shadow: 0 4px 12px rgba(122,18,32,.3);
}
.maargx-logo__brand { display: flex; flex-direction: column; gap: 4px; }
.maargx-logo__text { font-family: var(--maargx-font-heading); font-weight: 800; font-size: 22px; line-height: 1; color: var(--maargx-secondary); letter-spacing: -.01em; white-space: nowrap; }
.maargx-logo__tagline { font-size: 12px; line-height: 1; font-weight: 600; color: var(--maargx-primary); letter-spacing: .01em; white-space: nowrap; }

.maargx-nav { flex: 1; min-width: 0; }
.maargx-nav__label, .maargx-nav__footer, .maargx-nav__quicklinks { display: none; }
.maargx-nav-list { list-style: none; display: flex; gap: 2px; margin: 0; padding: 0; flex-wrap: nowrap; justify-content: center; }
.maargx-nav-list > li { position: relative; flex-shrink: 0; }
.maargx-nav-list > li > a { display: flex; align-items: center; gap: 3px; padding: 11px 14px; color: var(--maargx-secondary); font-weight: 700; font-size: 15px; border-radius: 8px; white-space: nowrap; }
.maargx-nav-list > li > a:hover { color: var(--maargx-primary); background: var(--maargx-bg-alt); text-decoration: none; }
.maargx-nav-list li.menu-item-has-children > a::after { content: '▾'; font-size: 10px; margin-left: 2px; transition: transform .15s ease; }
.maargx-nav-list li.menu-item-has-children:hover > a::after { transform: rotate(180deg); }

/* Dropdown submenus */
.maargx-nav-list .sub-menu {
	list-style: none; margin: 0; padding: 10px; position: absolute; top: calc(100% + 6px); left: 0;
	background: var(--maargx-bg); border: 1px solid var(--maargx-border); border-radius: 12px; box-shadow: var(--maargx-shadow-lg);
	min-width: 240px; opacity: 0; visibility: hidden; transform: translateY(8px); transition: all .18s ease; z-index: 200;
}
.maargx-nav-list li.menu-item-has-children:hover > .sub-menu,
.maargx-nav-list li.menu-item-has-children:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.maargx-nav-list .sub-menu a { display: block; padding: 10px 14px; border-radius: 8px; font-size: 14px; font-weight: 600; color: var(--maargx-text); }
.maargx-nav-list .sub-menu a:hover { background: var(--maargx-bg-alt); color: var(--maargx-primary); text-decoration: none; }
.maargx-nav-list .sub-menu .sub-menu { top: 0; left: calc(100% + 6px); }

.maargx-header__actions { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.maargx-nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 6px; }
.maargx-nav-toggle span { width: 24px; height: 2.5px; background: var(--maargx-secondary); display: block; border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }

.maargx-nav-overlay { display: none; position: fixed; inset: 0; background: rgba(7,26,51,.5); z-index: 95; opacity: 0; transition: opacity .2s ease; }
.maargx-nav-overlay.is-visible { display: block; opacity: 1; }

/* -------------------- Breadcrumbs -------------------- */
.maargx-breadcrumbs { max-width: var(--maargx-container); margin: 0 auto; padding: 16px 20px 0; font-size: 14px; font-weight: 600; color: var(--maargx-text); }
.maargx-breadcrumbs a { color: var(--maargx-primary); }
.maargx-breadcrumbs a:hover { text-decoration: underline; }
.maargx-breadcrumbs [aria-current="page"] { color: var(--maargx-secondary); font-weight: 700; }
.maargx-breadcrumbs [aria-hidden="true"] { color: var(--maargx-accent); font-weight: 400; margin: 0 2px; }

/* -------------------- Hero (static, fallback) -------------------- */
.maargx-hero { position: relative; background: var(--maargx-hero-gradient); padding: 44px 0; overflow: hidden; }
.maargx-hero::before {
	content: ''; position: absolute; top: -120px; right: -120px; width: 420px; height: 420px; border-radius: 50%;
	background: radial-gradient(circle, rgba(122,18,32,.10), transparent 70%);
}
.maargx-hero::after {
	content: ''; position: absolute; bottom: -160px; left: -80px; width: 320px; height: 320px; border-radius: 50%;
	background: radial-gradient(circle, rgba(122,18,32,.14), transparent 70%);
}
.maargx-hero__inner { position: relative; max-width: var(--maargx-container); margin: 0 auto; padding: 0 20px; display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; }
.maargx-hero__content h1 { font-size: clamp(38px, 5.5vw, 64px); margin-bottom: 20px; }
.maargx-hero__content p { font-size: 19px; color: var(--maargx-text-muted); max-width: 48ch; margin-bottom: 30px; }
.maargx-hero__actions { display: flex; gap: 14px; flex-wrap: wrap; }
.maargx-hero__media img { border-radius: var(--maargx-radius); box-shadow: var(--maargx-shadow-lg); }

/* -------------------- Hero slider (Banners → Homepage Banner Slide) -------------------- */
.maargx-slider { position: relative; overflow: hidden; border-bottom: 4px solid var(--maargx-primary); }
.maargx-slider__track { position: relative; height: clamp(360px, 52vw, 560px); }
.maargx-slide {
	position: absolute; inset: 0; display: flex; align-items: center; opacity: 0; pointer-events: none;
	transition: opacity .6s ease; background-size: cover; background-position: center;
}
.maargx-slide.is-active { opacity: 1; pointer-events: auto; }
.maargx-slide__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.maargx-slide__scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7,26,51,.78), rgba(7,26,51,.3) 60%, transparent); }
.maargx-slide__content { position: relative; z-index: 2; max-width: var(--maargx-container); margin: 0 auto; padding: 0 20px; width: 100%; }
.maargx-slide__content h2 { color: #fff; font-size: clamp(32px, 5vw, 56px); max-width: 16ch; margin-bottom: 16px; }
.maargx-slide__content p { color: var(--maargx-on-dark); font-size: 19px; max-width: 44ch; margin-bottom: 28px; }
.maargx-slider__dots { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 3; }
.maargx-slider__dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.5); border: none; cursor: pointer; padding: 0; }
.maargx-slider__dot.is-active { background: var(--maargx-accent); width: 26px; border-radius: 6px; }
.maargx-slider__arrow {
	position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 44px; height: 44px; border-radius: 50%;
	background: rgba(255,255,255,.22); border: 1.5px solid rgba(255,255,255,.65); color: #fff; font-size: 22px; cursor: pointer;
	backdrop-filter: blur(4px); box-shadow: 0 4px 16px rgba(7,26,51,.35);
}
.maargx-slider__arrow:hover { background: var(--maargx-accent); border-color: var(--maargx-accent); }
.maargx-slider__arrow--prev { left: 20px; }
.maargx-slider__arrow--next { right: 20px; }

/* -------------------- Sections / Grid -------------------- */
.maargx-section { position: relative; padding: 52px 0; background: var(--maargx-bg); border-top: 1px solid var(--maargx-border); overflow: hidden; }
.maargx-section__inner { position: relative; z-index: 1; max-width: var(--maargx-container); margin: 0 auto; padding: 0 20px; }
.maargx-section__title { font-size: 34px; text-align: center; margin-bottom: 10px; }
.maargx-section__subtitle { text-align: center; color: var(--maargx-text-muted); max-width: 68ch; margin: 0 auto 26px; }
.maargx-section__cta { text-align: center; margin-top: 24px; }
.maargx-section__inner > .maargx-eyebrow { display: flex; justify-content: center; }

/* Subtle decorative accents — echo the hero's blob treatment sparingly so the
   white sections don't feel flat, without competing with the content. */
.maargx-section--courses::before, .maargx-section--testimonials::before, .maargx-section--saarthipedia::before {
	content: ''; position: absolute; top: -180px; right: -140px; width: 380px; height: 380px; border-radius: 50%;
	background: radial-gradient(circle, rgba(122,18,32,.05), transparent 70%); pointer-events: none;
}
.maargx-section--testimonials::after {
	content: ''; position: absolute; bottom: -160px; left: -100px; width: 320px; height: 320px; border-radius: 50%;
	background: radial-gradient(circle, rgba(5,46,22,.06), transparent 70%); pointer-events: none;
}

/* Flexbox, not CSS grid — when a filter (e.g. a course-category tab)
   leaves only 1-3 cards visible, a fixed-column grid would still reserve
   every column and strand the remaining cards on the left. Flex-wrap +
   justify-content:center keeps each card's width consistent with the
   full grid but re-centers whatever's actually visible. */
.maargx-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; }
.maargx-grid--3 > * { flex: 0 1 calc((100% - 40px) / 3); }
.maargx-grid--4 > * { flex: 0 1 calc((100% - 60px) / 4); }
.maargx-grid--5 > * { flex: 0 1 calc((100% - 80px) / 5); }

/* -------------------- Tabs (course category filter) --------------------
   Bordered pill/chip boxes rather than underline tabs -- with 7-8
   categories, an underline-tab row wraps to a second line that reads as
   broken (stray floating underlined text), while a row of self-contained
   chips still looks organized wrapped across as many lines as it needs,
   at any screen width. */
.maargx-tabs { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 0 0 32px; }
.maargx-tabs__tab {
	background: #fff; border: 1.5px solid var(--maargx-border); border-radius: 999px; padding: 10px 20px;
	font-family: var(--maargx-font-heading); font-weight: 700; font-size: 14.5px; line-height: 1.25;
	color: var(--maargx-text-muted); cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.maargx-tabs__tab:hover { border-color: var(--maargx-primary); color: var(--maargx-primary); }
.maargx-tabs__tab.is-active { background: var(--maargx-primary); border-color: var(--maargx-primary); color: #fff; }

/* On phones, a fixed 2-column grid guarantees every category is visible
   without scrolling, regardless of how many there are -- a wrapped flex
   row can't make that guarantee at very narrow widths. */
@media (max-width: 700px) {
	.maargx-tabs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
	.maargx-tabs__tab { text-align: center; padding: 10px 10px; font-size: 12.5px; }
}

/* -------------------- Cards -------------------- */
.maargx-card {
	background: var(--maargx-bg); border: 1px solid var(--maargx-border); border-radius: var(--maargx-radius);
	overflow: hidden; transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
	display: flex; flex-direction: column;
}
.maargx-card:hover { box-shadow: var(--maargx-shadow-lg); transform: translateY(-4px); border-color: transparent; }
.maargx-card__media { display: block; position: relative; aspect-ratio: 16 / 10; background: linear-gradient(135deg, var(--maargx-secondary), var(--maargx-navy-deep)); overflow: hidden; }
.maargx-card__media img { width: 100%; height: 100%; object-fit: contain; background: var(--maargx-secondary); }
.maargx-card__media-fallback { display: flex; align-items: center; justify-content: center; height: 100%; font-size: 44px; font-family: var(--maargx-font-heading); font-weight: 800; color: #fff; }
.maargx-card__body { padding: 20px; display: flex; flex-direction: column; flex: 1; }
.maargx-card__title { font-size: 20px; margin-bottom: 10px; line-height: 1.3; }
.maargx-card__title a { color: var(--maargx-secondary); }
.maargx-card__title a:hover { color: var(--maargx-primary); text-decoration: none; }
.maargx-card__highlights { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.maargx-card__highlights li { display: flex; align-items: flex-start; gap: 6px; font-size: 13px; color: var(--maargx-text-muted); }
.maargx-card__highlights svg { flex-shrink: 0; margin-top: 3px; color: var(--maargx-success); }
.maargx-card__meta { list-style: none; display: flex; gap: 8px; flex-wrap: wrap; padding: 0; margin: 0 0 16px; font-size: 12px; color: var(--maargx-text-muted); }
.maargx-card__meta li { background: var(--maargx-bg-alt); padding: 4px 10px; border-radius: 999px; font-weight: 600; }
.maargx-card__excerpt { color: var(--maargx-text-muted); font-size: 14px; margin-bottom: 12px; }
.maargx-card__date { font-size: 13px; color: var(--maargx-text-muted); }
.maargx-link-arrow { font-weight: 700; font-size: 14px; }
.maargx-card__footer { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--maargx-border); display: flex; align-items: center; justify-content: flex-end; gap: 10px; }

/* -------------------- Price (card + sidebar, shared) -------------------- */
.maargx-price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: 4px 0 0; }
.maargx-price__was { font-size: 14px; color: var(--maargx-text-muted); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.maargx-price__now { font-family: var(--maargx-font-heading); font-weight: 800; font-size: 21px; color: var(--maargx-secondary); }
.maargx-price__badge { background: var(--maargx-primary); color: #fff; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; letter-spacing: .02em; }
.maargx-card__price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: 4px 0 0; }
.maargx-card__price__was { font-size: 13px; color: var(--maargx-text-muted); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.maargx-card__price__now { font-family: var(--maargx-font-heading); font-weight: 800; font-size: 21px; color: var(--maargx-secondary); }
.maargx-card__price__badge { background: var(--maargx-primary); color: #fff; font-size: 10.5px; font-weight: 700; padding: 3px 8px; border-radius: 999px; letter-spacing: .02em; }
.maargx-material-price-tbd { color: var(--maargx-text-muted); font-size: 14px; margin: 4px 0 0; }
.maargx-material-single__header { text-align: center; margin-bottom: 24px; }
.maargx-material-single__header .maargx-price { justify-content: center; margin-top: 10px; }
.maargx-material-single__thumb { border-radius: var(--maargx-radius); overflow: hidden; margin-bottom: 24px; }
.maargx-material-single__thumb img { width: 100%; height: auto; display: block; }
.maargx-material-single__cta { text-align: center; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--maargx-border); }
.maargx-material-single__cta-note { font-size: 13px; color: var(--maargx-text-muted); margin: 10px 0 0; }

/* -------------------- Current affairs card / single extras -------------------- */
.maargx-affair-card__tags { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.maargx-affair-card__tags .maargx-eyebrow { margin-bottom: 0; }
.maargx-card__footer--affair { border-top: none; padding-top: 6px; }
.maargx-card__footer--center { justify-content: center; }
.maargx-card__gs-tag { font-size: 12px; font-weight: 700; color: var(--maargx-primary); }
.maargx-affair-single__tags { display: flex; align-items: center; gap: 8px; }
.maargx-affair-single__extra-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 16px; }
.maargx-affair-single__extra-tags .maargx-badge { margin-bottom: 0; }
.maargx-badge--reference { background: var(--maargx-primary); color: #fff; border-color: var(--maargx-primary); }
.maargx-affair-single__meta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; }

/* -------------------- Why in News / Key Points -------------------- */
.maargx-affair-why { background: var(--maargx-bg-alt); border-left: 3px solid var(--maargx-primary); border-radius: var(--maargx-radius); padding: 18px 22px; margin-bottom: 28px; }
.maargx-affair-why__lede { margin: 0 0 12px; font-size: 16px; }
.maargx-affair-why__lede:last-child { margin-bottom: 0; }
.maargx-affair-why__lede strong { color: var(--maargx-primary); }
.maargx-affair-why__points { margin: 0; padding: 0 0 0 20px; }
.maargx-affair-why__points li { margin-bottom: 8px; }
.maargx-affair-why__points li:last-child { margin-bottom: 0; }

.maargx-affair-section-list { margin: 0 0 20px; padding: 0 0 0 22px; }
.maargx-affair-section-list li { margin-bottom: 10px; line-height: 1.65; }
.maargx-affair-section-list li:last-child { margin-bottom: 0; }

.maargx-affair-gs-relevance {
	background: var(--maargx-bg-alt); border-left: 4px solid var(--maargx-primary); border-radius: 8px;
	padding: 14px 18px; margin: 0 0 24px; font-weight: 600; color: var(--maargx-secondary);
}

.maargx-share { display: flex; align-items: center; gap: 8px; }
.maargx-share__label { font-size: 13px; font-weight: 700; color: var(--maargx-text-muted); margin-right: 2px; }
.maargx-share__btn {
	width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
	background: var(--maargx-bg-alt); border: 1px solid var(--maargx-border); color: var(--maargx-secondary); cursor: pointer;
	transition: background .2s ease, color .2s ease, transform .2s ease;
}
.maargx-share__btn:hover { transform: translateY(-2px); }
.maargx-share__btn--whatsapp:hover { background: #25D366; color: #fff; border-color: #25D366; }
.maargx-share__btn--telegram:hover { background: #229ED9; color: #fff; border-color: #229ED9; }
.maargx-share__btn--facebook:hover { background: #1877F2; color: #fff; border-color: #1877F2; }
.maargx-share__btn--twitter:hover { background: #000; color: #fff; border-color: #000; }
.maargx-share__btn--copy:hover { background: var(--maargx-primary); color: #fff; border-color: var(--maargx-primary); }
.maargx-share__btn--copy.is-copied { background: var(--maargx-secondary); color: #fff; border-color: var(--maargx-secondary); }

/* -------------------- Pagination (page-to-page navigation) --------------------
   WordPress's default the_posts_pagination() markup was completely unstyled
   site-wide (Courses, Current Affairs, Maarg Manthan, Notes, every archive)
   — plain blue browser-default links. This is the one, brand-matched design
   used everywhere that markup appears. */
.pagination.navigation { margin: 48px 0 12px; }
.pagination .nav-links { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; }
.pagination .page-numbers {
	display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; padding: 0 14px;
	border-radius: 999px; background: var(--maargx-bg); border: 1.5px solid var(--maargx-border);
	color: var(--maargx-secondary); font-weight: 700; font-size: 14.5px; text-decoration: none;
	transition: all .2s ease;
}
.pagination .page-numbers:hover { border-color: var(--maargx-primary); color: var(--maargx-primary); text-decoration: none; transform: translateY(-2px); box-shadow: var(--maargx-shadow); }
.pagination .page-numbers.current {
	background: linear-gradient(135deg, var(--maargx-primary), var(--maargx-primary-light)); border-color: transparent;
	color: #fff; box-shadow: 0 6px 16px rgba(122,18,32,.28);
}
.pagination .page-numbers.dots { background: none; border: none; box-shadow: none; color: var(--maargx-text-muted); cursor: default; }
.pagination .page-numbers.dots:hover { transform: none; box-shadow: none; color: var(--maargx-text-muted); }
.pagination .page-numbers.prev, .pagination .page-numbers.next {
	gap: 6px; padding: 0 18px; background: var(--maargx-secondary); border-color: var(--maargx-secondary); color: #fff;
}
.pagination .page-numbers.prev:hover, .pagination .page-numbers.next:hover { background: var(--maargx-navy-mid); border-color: var(--maargx-navy-mid); color: #fff; }
@media (max-width: 480px) {
	.pagination .page-numbers { min-width: 38px; height: 38px; padding: 0 10px; font-size: 13px; }
	.pagination .page-numbers.prev, .pagination .page-numbers.next { padding: 0 14px; }
}

.maargx-testimonial-card, .maargx-mentor-card { padding: 26px; text-align: center; }
.maargx-mentor-card__avatar { display: block; width: 100%; aspect-ratio: 1 / 1; border-radius: 12px; object-fit: cover; margin: 0 0 16px; }
.maargx-mentor-card__avatar--fallback, .maargx-testimonial-card__avatar--fallback {
	display: flex; align-items: center; justify-content: center; font-size: 30px; font-weight: 800; font-family: var(--maargx-font-heading);
	color: #fff; background: linear-gradient(135deg, var(--maargx-primary), var(--maargx-secondary));
}
.maargx-testimonial-card__avatar {
	display: block; width: 100%; aspect-ratio: 1 / 1; border-radius: 12px; object-fit: cover; margin: 0 0 16px;
}
.maargx-testimonial-card__result { color: var(--maargx-primary); font-weight: 700; margin: 0; }
.maargx-mentor-card__subject { color: var(--maargx-primary); font-weight: 700; font-size: 14px; margin-bottom: 8px; }
.maargx-mentor-card__experience { color: var(--maargx-text-muted); font-size: 13px; margin-top: 8px; }
.maargx-badge {
	display: inline-block; background: var(--maargx-bg-alt); border: 1px solid var(--maargx-border); color: var(--maargx-secondary);
	font-size: 11.5px; font-weight: 700; padding: 4px 12px; border-radius: 999px; margin-bottom: 10px;
}

/* -------------------- Testimonial carousel -------------------- */
.maargx-carousel { position: relative; }
.maargx-carousel__track {
	display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 4px 16px;
	scrollbar-width: none; -ms-overflow-style: none;
}
.maargx-carousel__track::-webkit-scrollbar { display: none; }
.maargx-carousel__item { flex: 0 0 calc(33.333% - 14px); scroll-snap-align: start; min-width: 260px; }
.maargx-carousel__item .maargx-testimonial-card { height: 100%; }
.maargx-carousel__arrow {
	position: absolute; top: 40%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%;
	background: var(--maargx-bg); border: 1px solid var(--maargx-border); box-shadow: var(--maargx-shadow); color: var(--maargx-secondary);
	font-size: 20px; cursor: pointer; z-index: 2;
}
.maargx-carousel__arrow:hover { background: var(--maargx-primary); color: #fff; border-color: var(--maargx-primary); }
.maargx-carousel__arrow--prev { left: -8px; }
.maargx-carousel__arrow--next { right: -8px; }

/* -------------------- Stats -------------------- */
.maargx-stats {
	position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center;
	background: linear-gradient(155deg, var(--maargx-secondary), var(--maargx-navy-deep) 85%);
	border-radius: var(--maargx-radius); padding: 48px 24px; overflow: hidden;
	box-shadow: 0 20px 50px rgba(7,26,51,.3);
}
.maargx-stats::before {
	content: ''; position: absolute; top: 50%; left: 50%; width: 500px; height: 300px; transform: translate(-50%, -50%);
	background: radial-gradient(ellipse, rgba(122,18,32,.10), transparent 70%); pointer-events: none;
}
.maargx-stat { position: relative; }
.maargx-stat__number { display: block; font-size: 48px; font-weight: 800; color: var(--maargx-on-dark); font-family: var(--maargx-font-heading); text-shadow: 0 0 30px rgba(255,255,255,.25); }
.maargx-stat__label { display: block; color: var(--maargx-on-dark-muted); font-size: 14px; margin-top: 6px; }
.maargx-stat:not(:last-child)::after {
	content: ''; position: absolute; right: -12px; top: 10%; height: 80%; width: 1px; background: rgba(255,255,255,.12);
}
.maargx-section--stats { background: transparent; overflow: visible; }
.maargx-section--stats::before { display: none; }

/* -------------------- Quiz -------------------- */
.maargx-quiz-subject-card { display: block; }
.maargx-quiz-subject-card:hover { text-decoration: none; }
.maargx-quiz-subject-card .maargx-link-arrow { display: inline-block; margin-top: 8px; }

.maargx-quiz-chapter-list { display: flex; flex-direction: column; gap: 12px; max-width: 760px; margin: 0 auto; }
.maargx-quiz-chapter-row {
	display: flex; align-items: center; gap: 20px; padding: 18px 22px; background: var(--maargx-bg);
	border: 1px solid var(--maargx-border); border-radius: var(--maargx-radius); transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.maargx-quiz-chapter-row:hover { box-shadow: var(--maargx-shadow-lg); transform: translateX(4px); border-color: transparent; text-decoration: none; }
.maargx-quiz-chapter-row__num {
	flex-shrink: 0; width: 52px; height: 52px; border-radius: 12px; background: var(--maargx-bg-alt); color: var(--maargx-primary);
	display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: var(--maargx-font-heading);
	font-weight: 800; font-size: 11px; line-height: 1.1;
}
.maargx-quiz-chapter-row__body { flex: 1; }
.maargx-quiz-chapter-row__title { display: block; font-weight: 700; color: var(--maargx-secondary); font-size: 16px; }
.maargx-quiz-chapter-row__meta { display: block; font-size: 13px; color: var(--maargx-text-muted); margin-top: 2px; }
.maargx-quiz-chapter-row__arrow { color: var(--maargx-primary); font-size: 20px; flex-shrink: 0; }

.maargx-quiz { padding: 40px 0 80px; max-width: 800px; }
.maargx-quiz-notes { margin-bottom: 36px; }
.maargx-quiz-section-title { font-size: 24px; padding-top: 10px; border-top: 1px solid var(--maargx-border); margin-top: 10px; }
.maargx-quiz-scorebar {
	position: sticky; top: 12px; z-index: 20; display: flex; align-items: center; justify-content: space-between;
	background: #FFFFFF; color: var(--maargx-text); padding: 14px 22px; border-radius: 999px; margin-bottom: 32px;
	border: 1.5px solid var(--maargx-border); box-shadow: var(--maargx-shadow-lg); font-weight: 700;
}
.maargx-quiz-scorebar strong { color: var(--maargx-accent); }
.maargx-quiz-question { padding: 26px 0; border-bottom: 1px solid var(--maargx-border); }
.maargx-quiz-question:last-child { border-bottom: none; }
.maargx-quiz-question__title { font-size: 18px; margin-bottom: 16px; }
.maargx-quiz-question__num { color: var(--maargx-primary); }
.maargx-quiz-options { display: flex; flex-direction: column; gap: 10px; }
.maargx-quiz-option {
	display: flex; align-items: center; gap: 12px; text-align: left; padding: 12px 16px; border-radius: 10px;
	border: 1px solid var(--maargx-border); background: var(--maargx-bg); cursor: pointer; font-family: var(--maargx-font-body);
	font-size: 15px; color: var(--maargx-text); transition: border-color .15s ease, background .15s ease;
}
.maargx-quiz-option:hover:not(:disabled) { border-color: var(--maargx-primary); background: var(--maargx-bg-alt); }
.maargx-quiz-option__letter {
	flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--maargx-bg-alt); color: var(--maargx-secondary);
	display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px;
}
.maargx-quiz-option:disabled { cursor: default; }
.maargx-quiz-option.is-correct { border-color: #1a8a4a; background: #eafaf1; }
.maargx-quiz-option.is-correct .maargx-quiz-option__letter { background: #1a8a4a; color: #fff; }
.maargx-quiz-option.is-incorrect { border-color: var(--maargx-primary); background: #fdecec; }
.maargx-quiz-option.is-incorrect .maargx-quiz-option__letter { background: var(--maargx-primary); color: #fff; }
.maargx-quiz-explanation { margin-top: 14px; padding: 14px 16px; background: var(--maargx-bg-alt); border-radius: 10px; font-size: 14px; color: var(--maargx-text-muted); }

@media (max-width: 640px) {
	.maargx-quiz-scorebar { flex-direction: column; gap: 10px; border-radius: var(--maargx-radius); text-align: center; }
	.maargx-quiz-chapter-row { padding: 14px 16px; gap: 14px; }
}

/* -------------------- Video embed -------------------- */
.maargx-video-embed { position: relative; width: 100%; max-width: 900px; margin: 0 auto; aspect-ratio: 16 / 9; border-radius: var(--maargx-radius); overflow: hidden; box-shadow: var(--maargx-shadow-lg); }
.maargx-video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* -------------------- Page / single content -------------------- */
.maargx-toc {
	background: var(--maargx-bg-alt); border: 1px solid var(--maargx-border); border-radius: var(--maargx-radius);
	padding: 18px 22px; margin: 20px 0 30px;
}
.maargx-toc__title {
	display: inline-block; font-family: var(--maargx-font-heading); font-weight: 800; font-size: 14px; text-transform: uppercase;
	letter-spacing: .04em; color: var(--maargx-primary); margin-bottom: 16px;
	text-decoration: underline; text-decoration-color: var(--maargx-primary); text-decoration-thickness: 2px; text-underline-offset: 5px;
}
.maargx-toc ol { list-style: none; margin: 0; padding: 0; column-count: 2; column-gap: 16px; counter-reset: none; }
.maargx-toc__item { break-inside: avoid; margin-bottom: 10px; font-size: 14px; }
.maargx-toc__item a {
	display: flex; align-items: center; gap: 10px; color: var(--maargx-text); font-weight: 600;
	border: 1px solid var(--maargx-border); border-radius: 10px;
	padding: 10px 13px; transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.maargx-toc__item a:hover { border-color: var(--maargx-primary); transform: translateX(3px); box-shadow: var(--maargx-shadow); }
.maargx-toc__num {
	flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 20px; height: 20px;
	border-radius: 50%; background: var(--maargx-secondary); color: #fff; font-size: 11px; font-weight: 800;
}
.maargx-toc__text { flex: 1; }
.maargx-toc__item--h3 a { padding-left: 12px; font-size: 13px; }
.maargx-toc__item--h3 .maargx-toc__text { color: var(--maargx-text-muted); font-weight: 500; }

/* Color-coded index items (Current Affairs' fixed-9-heading index) */
.maargx-toc__item--blue a { background: #eef4fb; }
.maargx-toc__item--gold a { background: #fdf6e2; }
.maargx-toc__item--green a { background: #eef7ee; }
.maargx-toc__item--lav a { background: #f4f0fb; }
.maargx-toc__item--pink a { background: #fdeef0; }
.maargx-toc__item--amber a { background: #fff1e0; }
@media (max-width: 640px) {
	.maargx-toc { padding: 16px 18px; }
	.maargx-toc ol { column-count: 1; }
	.maargx-toc__item a { padding: 12px 14px; font-size: 14px; }
}
.maargx-content h2[id], .maargx-content h3[id] { scroll-margin-top: 24px; }

/* -------------------- Notes (study guides) -------------------- */
.maargx-note-subtitle { color: var(--maargx-text-muted); font-size: 16px; margin: -8px 0 18px; }
.maargx-note-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.maargx-note-actions--bottom { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--maargx-border); justify-content: space-between; }
.maargx-pdf-btn {
	display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px;
	border: 1px solid var(--maargx-primary); background: var(--maargx-primary); color: #fff;
	font-weight: 700; font-size: 13px; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease;
}
.maargx-pdf-btn:hover { transform: translateY(-1px); box-shadow: var(--maargx-shadow); }
.maargx-note-example { color: var(--maargx-text-muted); }
.maargx-note-keywords { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 32px 0 0; }
.maargx-note-keywords__label { font-size: 13px; font-weight: 700; color: var(--maargx-text-muted); margin-right: 2px; }

.maargx-kw-highlight {
	background: linear-gradient(180deg, transparent 60%, #f6dede 60%);
	color: var(--maargx-primary); font-weight: 700; padding: 0 1px;
}
.maargx-auto-link {
	color: var(--maargx-secondary); font-weight: 600; text-decoration: underline;
	text-decoration-color: var(--maargx-border); text-underline-offset: 2px;
}
.maargx-auto-link:hover { color: var(--maargx-primary); text-decoration-color: var(--maargx-primary); }
@media (max-width: 640px) {
	.maargx-affair-single__meta { flex-direction: column; align-items: flex-start; gap: 12px; }
	.maargx-note-actions--bottom { flex-direction: column; align-items: flex-start; gap: 16px; }
}

/* -------------------- Print / Download PDF -------------------- */
@media print {
	.maargx-topbar, .maargx-header, .maargx-ticker, .maargx-breadcrumbs, .maargx-sticky-cta,
	.maargx-footer, .maargx-note-actions, .maargx-toc, .maargx-share { display: none !important; }
	body { background: #fff; }
	.maargx-page-content { max-width: 100%; padding: 0; }
	.maargx-content { color: #000; }
	.maargx-faq-item, .maargx-pyq-item { display: block !important; }
	.maargx-faq-item summary, .maargx-pyq-item summary { list-style: none; }
	.maargx-faq-item > div, .maargx-pyq-item > div { display: block !important; }
	a { color: inherit; text-decoration: none; }
	table, .maargx-faq-item, .maargx-pyq-item { break-inside: avoid; }
}

.maargx-page-content { padding: 36px 0 64px; max-width: 860px; }
.maargx-page-content-grid { margin: 32px 0; }
.maargx-page-content .maargx-quiz--on-page { padding: 0; max-width: none; }
.maargx-archive-header { padding: 36px 0 0; text-align: center; }
.maargx-archive-header h1 { font-size: 36px; }
.maargx-archive-header p { color: var(--maargx-text-muted); }
.maargx-page-title { font-size: 40px; }
.maargx-page-thumb { border-radius: var(--maargx-radius); overflow: hidden; margin: 20px 0; }
.maargx-post-date { color: var(--maargx-text-muted); font-size: 14px; }

/* Centered article hero — used on Maarg Manthan so the title/eyebrow/lede
   read like a proper magazine-style blog opener instead of a left-aligned
   page header. Only this intro block centers; the article body below it
   stays left-aligned since centered paragraphs hurt long-form readability. */
.maargx-post-hero { max-width: 720px; margin: 0 auto; text-align: center; }
.maargx-post-hero .maargx-page-title { margin-bottom: 14px; }
.maargx-post-hero .maargx-course__lede { margin: 0 auto 14px; }
.maargx-post-hero .maargx-post-date { margin-bottom: 18px; }
.maargx-post-hero .maargx-share { justify-content: center; }
.maargx-eyebrow--centered { justify-content: center; }
.maargx-content { font-size: 16px; max-width: 100%; overflow-x: hidden; }
.maargx-content h2 { margin-top: 1.6em; }
.maargx-content img { border-radius: var(--maargx-radius); max-width: 100%; height: auto; }
.maargx-content table { max-width: 100%; display: block; overflow-x: auto; }
.maargx-content iframe, .maargx-content video { max-width: 100%; }

/* -------------------- Course single banner -------------------- */
.maargx-course-banner {
	position: relative; padding: 56px 0; text-align: center; overflow: hidden;
	background: linear-gradient(135deg, var(--maargx-primary), var(--maargx-secondary));
}
.maargx-course-banner::before {
	content: ''; position: absolute; inset: 0;
	background-image: radial-gradient(rgba(255,255,255,.10) 1.5px, transparent 1.5px);
	background-size: 22px 22px;
	opacity: .5; pointer-events: none;
}
.maargx-course-banner__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.maargx-course-banner__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,10,5,.55), rgba(5,10,5,.75)); }
.maargx-course-banner__content { position: relative; z-index: 2; max-width: 760px; margin: 0 auto; }
.maargx-course-banner.has-image .maargx-course-banner__content h1,
.maargx-course-banner:not(.has-image) .maargx-course-banner__content h1 { color: #fff; font-size: 44px; margin-bottom: 12px; }
.maargx-course-banner .maargx-course__lede { color: var(--maargx-on-dark); font-size: 17px; margin: 0 auto; max-width: 620px; }
.maargx-course-banner .maargx-eyebrow { justify-content: center; }
.maargx-course-banner--compact { padding: 38px 0 34px; }
.maargx-course-banner--compact .maargx-course-banner__content h1 {
	font-size: 32px; margin-bottom: 10px; position: relative; padding-bottom: 14px; display: inline-block;
}
.maargx-course-banner--compact .maargx-course-banner__content h1::after {
	content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
	width: 56px; height: 3px; border-radius: 2px;
	background: linear-gradient(90deg, var(--maargx-accent), #fff8, var(--maargx-accent));
}

/* -------------------- Course hero (centered title, banner+video below) -------------------- */
.maargx-course-hero {
	padding: 40px 32px 32px; margin-top: 24px; border-radius: calc(var(--maargx-radius) + 8px);
	background: var(--maargx-hero-gradient);
}
.maargx-course-hero__title { text-align: center; max-width: 760px; margin: 0 auto 32px; }
.maargx-course-hero__title h1 { font-size: 38px; line-height: 1.15; margin: 0 0 12px; color: var(--maargx-secondary); }
.maargx-course-hero__title .maargx-eyebrow { justify-content: center; }
.maargx-course-hero__lede { color: var(--maargx-text-muted); font-size: 17px; margin: 0 auto; max-width: 560px; }

/* Banner / price card / video, all matched to the same row height — the
   card sits between the two media pieces when both exist, and the grid
   gracefully collapses to however many of the three actually exist. */
.maargx-course-hero__media { display: grid; gap: 32px; align-items: stretch; }
.maargx-course-hero__media--cols-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.maargx-course-hero__media--cols-1 { grid-template-columns: minmax(0, 1fr); max-width: 640px; margin: 0 auto; }
.maargx-course-hero__banner { min-width: 0; display: flex; }
.maargx-course-hero__banner .maargx-carousel--banner { width: 100%; }
.maargx-course-hero__video { min-width: 0; display: flex; }
.maargx-course-hero__video .maargx-video-embed { box-shadow: var(--maargx-shadow-lg); width: 100%; height: 100%; max-width: none; aspect-ratio: auto; }

.maargx-carousel--banner { position: relative; }
.maargx-carousel--banner .maargx-carousel__track {
	scroll-snap-type: x mandatory; border-radius: var(--maargx-radius); overflow-x: auto; overflow-y: hidden;
	box-shadow: var(--maargx-shadow-lg); gap: 0; padding: 0; scrollbar-width: none; -ms-overflow-style: none;
}
.maargx-carousel--banner .maargx-carousel__track::-webkit-scrollbar { display: none; }
.maargx-carousel--banner .maargx-carousel__item { flex: 0 0 100%; min-width: 100%; max-width: 100%; aspect-ratio: 16 / 9; }
.maargx-carousel--banner .maargx-carousel__item img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.maargx-video-embed { box-shadow: var(--maargx-shadow-lg); }
.maargx-carousel__caption {
	position: absolute; top: 14px; left: 14px; z-index: 3;
	background: rgba(5,10,5,.55); backdrop-filter: blur(2px);
	color: #fff; font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
	padding: 6px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.25);
}
.maargx-carousel__dots { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); z-index: 3; display: flex; gap: 7px; }
.maargx-carousel__dot { width: 8px; height: 8px; border-radius: 50%; border: none; padding: 0; background: rgba(255,255,255,.5); cursor: pointer; transition: all .2s ease; }
.maargx-carousel__dot.is-active { background: var(--maargx-accent); width: 22px; border-radius: 4px; }
.maargx-carousel--banner .maargx-carousel__arrow { opacity: 0; transition: opacity .2s ease; }
.maargx-carousel--banner:hover .maargx-carousel__arrow { opacity: 1; }
@media (max-width: 860px) {
	.maargx-course-hero { padding: 22px 16px; margin-top: 14px; }
	.maargx-course-hero__title { margin-bottom: 22px; }
	.maargx-course-hero__title h1 { font-size: 26px; }
	.maargx-course-hero__media,
	.maargx-course-hero__media--cols-1,
	.maargx-course-hero__media--cols-2 { grid-template-columns: minmax(0, 1fr); gap: 20px; max-width: none; margin: 0; }
	.maargx-course-hero__video .maargx-video-embed { aspect-ratio: 16 / 9; height: auto; }
	.maargx-course-info-bar { margin: 20px 0 28px; }
	.maargx-carousel--banner .maargx-carousel__arrow { opacity: 1; }
}

/* -------------------- Course Tabs -------------------- */
.maargx-course-tabs { margin-bottom: 20px; }
.maargx-course-tabs__nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 24px; }
.maargx-course-tabs__pill {
	display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 999px;
	border: 1px solid var(--maargx-border); background: var(--maargx-bg-alt); color: var(--maargx-secondary);
	font-weight: 700; font-size: 14px; cursor: pointer; transition: all .2s ease; white-space: nowrap;
}
.maargx-course-tabs__pill:hover { border-color: var(--maargx-primary); color: var(--maargx-primary); }
.maargx-course-tabs__pill.is-active {
	background: linear-gradient(135deg, var(--maargx-primary), var(--maargx-secondary)); color: #fff; border-color: transparent;
	box-shadow: var(--maargx-shadow);
}
.maargx-course-tabs__panel { display: none; background: var(--maargx-bg-alt); border: 1px solid var(--maargx-border); border-radius: var(--maargx-radius); padding: 32px; }
.maargx-course-tabs__panel.is-active { display: block; animation: maargx-tab-fade .25s ease; }
.maargx-course-tabs__panel-icon { display: block; font-size: 30px; margin-bottom: 8px; }
.maargx-course-tabs__panel h2 { margin-top: 0; color: var(--maargx-secondary); }
@keyframes maargx-tab-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 640px) {
	.maargx-course-tabs__panel { padding: 20px; }
	.maargx-course-tabs__pill { padding: 10px 16px; font-size: 13px; }
}

/* -------------------- Course single -------------------- */
.maargx-course { padding-top: 8px; padding-bottom: 72px; }
.maargx-course__lede { color: var(--maargx-text-muted); font-size: 17px; }
.maargx-course__main { max-width: var(--maargx-container); }
.maargx-course__highlights { margin: 20px 0 28px; }

/* -------------------- Course info bar (horizontal: price / duration / mode / buttons) -------------------- */
.maargx-course-info-bar {
	background: linear-gradient(155deg, var(--maargx-secondary), var(--maargx-navy-deep) 85%);
	border-radius: var(--maargx-radius);
	box-shadow: var(--maargx-shadow-lg);
	margin: 28px 0 40px;
	padding: 22px 32px;
	display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px 36px;
}
/* A visual divider between the facts and the button, so the two halves
   read as one continuous card rather than two separate islands with a
   gap between them -- matters most for a sparsely-filled course (just
   Price + Duration) where space-between left an awkward dead zone, and
   plain centering alone still looked like two disconnected blocks. */
.maargx-course-info-bar__actions { padding-left: 36px; border-left: 1px solid rgba(255,255,255,.16); }
@media (max-width: 640px) { .maargx-course-info-bar__actions { padding-left: 0; border-left: none; } }
.maargx-course-info-bar__facts { display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 28px 36px; }
.maargx-course-info-bar__fact { display: flex; flex-direction: column; gap: 4px; padding-right: 36px; border-right: 1px solid rgba(255,255,255,.16); }
.maargx-course-info-bar__fact:last-child { border-right: none; padding-right: 0; }
.maargx-course-info-bar__fact strong { color: var(--maargx-on-dark-muted); font-weight: 600; text-transform: uppercase; font-size: 12px; letter-spacing: .05em; }
.maargx-course-info-bar__fact > span { color: #fff; font-weight: 700; font-size: 24px; }
.maargx-course-info-bar__fact--price .maargx-price { margin: 0; padding: 0; border: none; }
.maargx-course-info-bar__fact--price .maargx-price__was,
.maargx-course-info-bar__fact--price .maargx-price__now { color: var(--maargx-on-dark); }
.maargx-course-info-bar__fact--price .maargx-price__now { font-size: 24px; }
.maargx-course-info-bar__fact--price .maargx-price__was { font-size: 15px; }
.maargx-course-info-bar__fact--price .maargx-price__badge { background: #fff; color: var(--maargx-primary); font-size: 11px; }
.maargx-course-info-bar__actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.maargx-course-info-bar .maargx-btn--outline { color: #fff; border-color: rgba(255,255,255,.5); }
.maargx-course-info-bar .maargx-btn--outline:hover { background: #fff; color: var(--maargx-secondary); border-color: #fff; }
@media (max-width: 700px) {
	.maargx-course-info-bar { flex-direction: column; align-items: stretch; padding: 22px 20px; gap: 20px; }
	.maargx-course-info-bar__facts { justify-content: space-between; gap: 16px 24px; }
	.maargx-course-info-bar__fact { border-right: none; padding-right: 0; }
	.maargx-course-info-bar__actions { flex-direction: column; align-items: stretch; }
	.maargx-course-info-bar__actions .maargx-btn { width: 100%; }
}

/* -------------------- Course feature columns -------------------- */
.maargx-feature-columns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin: 28px 0 36px; }
.maargx-feature-columns__col { background: var(--maargx-bg-alt); border: 1px solid var(--maargx-border); border-radius: var(--maargx-radius); padding: 24px 22px; position: relative; overflow: hidden; }
.maargx-feature-columns__col::before { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: linear-gradient(180deg, var(--maargx-primary), var(--maargx-accent)); }
.maargx-feature-columns__num { font-family: Georgia, serif; font-size: 28px; font-weight: 700; color: var(--maargx-border); line-height: 1; display: block; margin-bottom: 6px; }
.maargx-feature-columns__col h3 { font-size: 16px; color: var(--maargx-secondary); margin: 0 0 12px; }
.maargx-feature-columns__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.maargx-feature-columns__col li { font-size: 13.5px; color: var(--maargx-text-muted); padding-left: 16px; position: relative; line-height: 1.45; }
.maargx-feature-columns__col li::before { content: ''; position: absolute; left: 0; top: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--maargx-accent); }
@media (max-width: 860px) { .maargx-feature-columns { grid-template-columns: 1fr; } }

/* -------------------- Course curriculum phases -------------------- */
.maargx-curriculum-table { border: 1px solid var(--maargx-border); border-radius: var(--maargx-radius); overflow: hidden; margin: 28px 0 36px; }
.maargx-curriculum-table__head { display: grid; grid-template-columns: 2fr 1fr 1fr; background: var(--maargx-navy-deep); color: var(--maargx-on-dark); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.maargx-curriculum-table__head span { padding: 12px 16px; }
.maargx-curriculum-table__row { display: grid; grid-template-columns: 2fr 1fr 1fr; border-top: 1px solid var(--maargx-border); }
.maargx-curriculum-table__row:nth-child(odd) { background: var(--maargx-bg-alt); }
.maargx-curriculum-table__row span { padding: 14px 16px; font-size: 13.5px; display: flex; flex-direction: column; justify-content: center; gap: 3px; }
.maargx-curriculum-table__row strong { color: var(--maargx-secondary); font-size: 14px; }
.maargx-curriculum-table__row em { font-style: normal; color: var(--maargx-text-muted); font-size: 12.5px; }
@media (max-width: 700px) {
	.maargx-curriculum-table__head { display: none; }
	.maargx-curriculum-table__row { grid-template-columns: 1fr; }
	.maargx-curriculum-table__row span:not(:first-child) { padding-top: 0; flex-direction: row; justify-content: space-between; align-items: center; }
	.maargx-curriculum-table__row span[data-label]::before {
		content: attr(data-label); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--maargx-text-muted);
	}
}

/* -------------------- FAQ -------------------- */
.maargx-section-heading { margin-top: 2.4em; margin-bottom: 0.6em; }
.maargx-faq-list { margin-top: 20px; margin-bottom: 40px; display: flex; flex-direction: column; gap: 10px; }
.maargx-faq-item { border: 1px solid var(--maargx-border); border-radius: 10px; padding: 16px 20px; }
.maargx-faq-item summary { font-weight: 700; cursor: pointer; }
.maargx-faq-item div { margin-top: 10px; color: var(--maargx-text-muted); }
.maargx-faq-list--archive { max-width: 800px; margin: 40px auto 0; }

/* -------------------- PYQ / statement practice -------------------- */
.maargx-pyq-list { margin-top: 20px; margin-bottom: 40px; display: flex; flex-direction: column; gap: 10px; }
.maargx-pyq-item { border: 1px solid var(--maargx-border); border-radius: 10px; padding: 16px 20px; }
.maargx-pyq-item summary { display: flex; align-items: baseline; gap: 12px; font-weight: 600; cursor: pointer; list-style: none; }
.maargx-pyq-item summary::-webkit-details-marker { display: none; }
.maargx-pyq-item__num { flex-shrink: 0; color: var(--maargx-primary); font-weight: 800; font-family: var(--maargx-font-heading); }
.maargx-pyq-item__answer { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--maargx-border); }
.maargx-pyq-item__verdict { display: inline-block; font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: 3px 12px; border-radius: 999px; margin-bottom: 8px; }
.maargx-pyq-item__verdict--true { background: #eafaf1; color: #1a8a4a; }
.maargx-pyq-item__verdict--false { background: #fdecec; color: var(--maargx-primary); }
.maargx-pyq-item__answer p { color: var(--maargx-text-muted); margin: 0; }

/* -------------------- Editorial callout -------------------- */
.maargx-affair-editorial {
	margin: 28px 0; padding: 22px 24px; border-radius: var(--maargx-radius);
	background: linear-gradient(155deg, var(--maargx-secondary), var(--maargx-navy-deep) 85%); color: var(--maargx-on-dark);
}
.maargx-affair-editorial__label { display: block; font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--maargx-on-dark-muted); margin-bottom: 8px; }
.maargx-affair-editorial p { margin: 0 0 .6em; }
.maargx-affair-editorial p:last-child { margin-bottom: 0; }

/* -------------------- Current affairs archive toolbar -------------------- */
.maargx-affair-toolbar { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 16px; margin: 20px 0 32px; }
.maargx-affair-subject-filter select,
.maargx-affair-date-filter select {
	padding: 9px 16px; border-radius: 999px; border: 1px solid var(--maargx-border); background: var(--maargx-bg-alt);
	color: var(--maargx-secondary); font-weight: 600; font-size: 14px; cursor: pointer; min-width: 160px;
}
.maargx-subscribe {
	margin: 48px 0 24px; padding: 32px; border-radius: 16px; text-align: center;
	background: var(--maargx-secondary); border: 1px solid var(--maargx-secondary);
}
.maargx-subscribe__title { color: #fff; font-size: 22px; margin: 0 0 8px; }
.maargx-subscribe__desc { color: #fff; opacity: .85; font-size: 14.5px; margin: 0 0 20px; max-width: 480px; margin-left: auto; margin-right: auto; }
.maargx-subscribe__form { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; max-width: 460px; margin: 0 auto; }
.maargx-subscribe__input {
	flex: 1 1 240px; padding: 12px 18px; border-radius: 999px; border: 1px solid var(--maargx-primary-light);
	background: #fff; color: var(--maargx-secondary); font-size: 14.5px; min-width: 0;
}
.maargx-subscribe__btn {
	flex: 0 0 auto; padding: 12px 26px; border-radius: 999px; border: none; cursor: pointer;
	background: var(--maargx-primary); color: #fff; font-weight: 700; font-size: 14.5px; transition: background .2s ease, transform .2s ease;
}
.maargx-subscribe__btn:hover { background: var(--maargx-primary-light); transform: translateY(-2px); }
.maargx-subscribe__btn:disabled { opacity: .7; cursor: default; transform: none; }
.maargx-subscribe__msg { margin: 14px 0 0; font-size: 13.5px; color: #fff; min-height: 1em; }
.maargx-subscribe__msg.is-error { color: #FFB4BC; }
@media (max-width: 640px) {
	.maargx-subscribe { padding: 24px 18px; }
	.maargx-subscribe__form { flex-direction: column; align-items: stretch; }
}
@media (max-width: 640px) {
	.maargx-affair-toolbar { flex-direction: column; align-items: stretch; }
	.maargx-affair-subject-filter select,
	.maargx-affair-date-filter select { width: 100%; }
}

/* -------------------- Date strip (appears once a month is chosen) -------------------- */
.maargx-date-strip { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 auto 28px; max-width: 720px; position: relative; }
.maargx-date-strip__track { display: flex; gap: 8px; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; padding: 2px; justify-content: center; margin: 0 auto; }
.maargx-date-strip__track::-webkit-scrollbar { display: none; }
.maargx-date-strip__item {
	flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 2px;
	padding: 8px 14px; border-radius: 10px; border: 1px solid var(--maargx-border); background: var(--maargx-bg-alt);
	color: var(--maargx-text-muted); min-width: 56px; text-align: center;
}
.maargx-date-strip__item:hover { border-color: var(--maargx-primary); color: var(--maargx-primary); text-decoration: none; }
.maargx-date-strip__item.is-active { background: var(--maargx-secondary); border-color: var(--maargx-secondary); color: #fff; }
.maargx-date-strip__dow { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; opacity: .75; }
.maargx-date-strip__day { font-size: 13px; font-weight: 700; }
.maargx-date-strip__arrow {
	flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--maargx-border); background: var(--maargx-bg);
	color: var(--maargx-secondary); cursor: pointer; font-size: 16px;
}
.maargx-date-strip__arrow:hover { background: var(--maargx-primary); color: #fff; border-color: var(--maargx-primary); }

/* -------------------- Location page -------------------- */
.maargx-location-map { margin: 30px 0; border-radius: var(--maargx-radius); overflow: hidden; }

/* -------------------- Sticky CTA -------------------- */
.maargx-sticky-cta { position: fixed; right: 22px; bottom: 22px; display: flex; flex-direction: column; gap: 12px; z-index: 90; }
.maargx-sticky-cta__btn {
	position: relative; width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
	color: #fff; box-shadow: var(--maargx-shadow-lg); text-decoration: none;
}
.maargx-sticky-cta__btn--whatsapp { background: #25D366; }
.maargx-sticky-cta__ring {
	position: absolute; inset: -6px; border-radius: 50%; border: 2px solid #25D366; opacity: .7;
	animation: maargx-glow-pulse 1.8s ease-out infinite;
}
@keyframes maargx-glow-pulse {
	0% { transform: scale(.9); opacity: .7; }
	70% { transform: scale(1.5); opacity: 0; }
	100% { transform: scale(1.5); opacity: 0; }
}

/* -------------------- Contact info block -------------------- */
.maargx-contact-block {
	background: linear-gradient(155deg, var(--maargx-secondary), var(--maargx-navy-deep) 85%);
	border-radius: var(--maargx-radius); box-shadow: var(--maargx-shadow-lg);
	padding: 32px 36px; margin: 32px 0; color: #fff;
}
.maargx-contact-block__title {
	color: #fff; text-align: center; text-transform: uppercase; letter-spacing: .04em; font-size: 20px;
	margin: 0 0 22px; padding-bottom: 14px; border-bottom: 2px solid rgba(255,255,255,.18);
}
.maargx-contact-block__list { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.maargx-contact-block__list li { display: flex; align-items: flex-start; gap: 14px; font-weight: 700; font-size: 15.5px; line-height: 1.5; }
.maargx-contact-block__list a { color: #fff; }
.maargx-contact-block__list a:hover { text-decoration: underline; }
.maargx-contact-block__icon {
	flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; background: rgba(122,18,32,.35); border: 1px solid rgba(255,255,255,.2);
	display: flex; align-items: center; justify-content: center; margin-top: 2px;
}
.maargx-contact-block__mapembed { margin-top: 22px; border-radius: 10px; overflow: hidden; box-shadow: var(--maargx-shadow); }
.maargx-contact-block__mapembed iframe { display: block; }
.maargx-contact-block__map { margin-top: 20px; color: #fff; border-color: rgba(255,255,255,.5); }
.maargx-contact-block__map:hover { background: #fff; color: var(--maargx-secondary); border-color: #fff; }
@media (max-width: 640px) {
	.maargx-contact-block { padding: 26px 22px; }
}

/* -------------------- Footer -------------------- */
.maargx-footer { background: var(--maargx-secondary); color: var(--maargx-on-dark); margin-top: 40px; background-image: linear-gradient(180deg, rgba(122,18,32,.10), transparent 220px); }
.maargx-footer__inner { max-width: var(--maargx-container); margin: 0 auto; padding: 52px 20px 36px; display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 40px; }
.maargx-footer__col--brand p { max-width: 32ch; margin-top: 14px; }
.maargx-footer__logo { margin-bottom: 14px; }
.maargx-footer__logo img {
	max-height: 52px; width: auto; background: #fff; border-radius: 50%;
	padding: 4px; box-shadow: 0 2px 10px rgba(0,0,0,.25);
}
.maargx-footer__logo-text { color: #fff; }
.maargx-footer__logo-tagline { color: #fff; }
.maargx-footer h3 { color: #fff; font-size: 15px; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 18px; }
.maargx-footer p { color: var(--maargx-on-dark-muted); font-size: 14px; line-height: 1.6; }
.maargx-footer-list, .maargx-footer-contact { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.maargx-footer-list a, .maargx-footer-contact a { color: var(--maargx-on-dark-muted); font-size: 14px; }
.maargx-footer-list a:hover, .maargx-footer-contact a:hover { color: var(--maargx-on-dark); text-decoration: underline; }
.maargx-footer-contact li { display: flex; align-items: flex-start; gap: 10px; color: var(--maargx-on-dark-muted); font-size: 14px; }
.maargx-footer-contact li svg { flex-shrink: 0; margin-top: 3px; color: var(--maargx-on-dark); }
.maargx-footer-contact a { display: flex; align-items: flex-start; gap: 10px; }
.maargx-footer-contact__address span { line-height: 1.5; }
.maargx-footer__socials { display: flex; gap: 10px; margin-top: 18px; }
.maargx-footer__socials__link {
	width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
	background: rgba(255,255,255,.08); color: #fff; transition: background .2s ease, transform .2s ease, color .2s ease;
}
.maargx-footer__socials__link:hover { color: var(--maargx-on-dark); transform: translateY(-2px); filter: brightness(1.1); }
.maargx-footer__socials__link--facebook { background: #1877F2; }
.maargx-footer__socials__link--instagram { background: radial-gradient(circle at 30% 110%, #FDF497 0%, #FD5949 45%, #D6249F 60%, #285AEB 90%); }
.maargx-footer__socials__link--youtube { background: #FF0000; }
.maargx-footer__socials__link--telegram { background: #26A5E4; }
.maargx-footer__socials__link--twitter { background: #000000; }
.maargx-footer__socials__link--linkedin { background: #0A66C2; }
.maargx-footer__bottom { border-top: 1px solid rgba(255,255,255,.1); padding: 18px 20px; text-align: center; font-size: 13px; color: var(--maargx-on-dark-muted); }

/* -------------------- 404 -------------------- */
.maargx-404 { padding: 80px 0; text-align: center; }

/* ==========================================================================
   Responsive
   ========================================================================== */

/* Safety net: on narrower desktop/laptop widths, drop the header CTA button
   before the nav is forced to wrap — keeps the primary menu on one line. */
@media (max-width: 1240px) {
	.maargx-header__actions .maargx-btn { display: none; }
}

/* Nav switches to the off-canvas drawer well before the menu items run out
   of room (tablet widths, ~640-1080px, were overflowing the header with no
   hamburger available to fall back on). */
@media (max-width: 1080px) {
	.maargx-nav {
		position: fixed; inset: 0 0 0 auto; width: min(320px, 86vw); background: var(--maargx-bg); padding: 80px 18px 22px;
		transform: translateX(100%); transition: transform .3s cubic-bezier(.22,.61,.36,1); overflow-y: auto; z-index: 96;
		box-shadow: -8px 0 40px rgba(7,26,51,.25); border-radius: 20px 0 0 20px; display: flex; flex-direction: column;
	}
	.maargx-nav.is-open { transform: translateX(0); }

	/* Colored label band across the top of the drawer, sized and placed to
	   line up with the close button (which stays fixed, outside the drawer,
	   so it can also serve as the hamburger before the drawer opens). */
	.maargx-nav__label {
		position: absolute; top: 0; left: 0; right: 0; height: 64px; z-index: 0;
		background: linear-gradient(90deg, var(--maargx-navy-deep), var(--maargx-secondary));
		color: rgba(255,255,255,.85); font-weight: 800; font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase;
		display: flex; align-items: center; padding-left: 24px; border-radius: 20px 0 0 0;
	}

	.maargx-nav__quicklinks {
		display: flex; gap: 10px; margin: 20px 0 16px; position: relative; z-index: 1;
	}
	.maargx-nav__quicklinks a {
		flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px;
		padding: 11px 10px; border-radius: 10px; background: var(--maargx-bg-alt);
		color: var(--maargx-secondary); font-weight: 700; font-size: 13px; text-align: center;
	}
	.maargx-nav__quicklinks a svg { color: var(--maargx-primary); flex-shrink: 0; }
	.maargx-nav__quicklinks a:hover { background: var(--maargx-primary); color: #fff; }
	.maargx-nav__quicklinks a:hover svg { color: #fff; }

	.maargx-nav-list { flex-direction: column; gap: 2px; align-items: stretch; position: relative; z-index: 1; }
	.maargx-nav-list > li { border-bottom: 1px solid var(--maargx-border); }
	.maargx-nav-list > li:last-child { border-bottom: none; }
	.maargx-nav-list > li > a { justify-content: space-between; padding: 15px 8px; font-size: 15.5px; border-radius: 10px; }
	.maargx-nav-list > li > a:hover,
	.maargx-nav-list > li.is-expanded > a { background: var(--maargx-bg-alt); color: var(--maargx-primary); }
	.maargx-nav-list li.menu-item-has-children.is-expanded > a::after { transform: rotate(180deg); }
	.maargx-nav-list .sub-menu {
		position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none;
		background: none; display: none; margin: 2px 0 8px 10px; padding-left: 12px; border: none; border-left: 2px solid var(--maargx-border);
	}
	.maargx-nav-list .sub-menu a { padding: 10px 12px; font-size: 14px; font-weight: 600; color: var(--maargx-text-muted); border-radius: 8px; }
	.maargx-nav-list .sub-menu a:hover { color: var(--maargx-primary); background: var(--maargx-bg-alt); }
	.maargx-nav-list li.menu-item-has-children.is-expanded > .sub-menu { display: block; }

	.maargx-nav__footer { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 10px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--maargx-border); }

	.maargx-nav-toggle { display: flex; z-index: 97; position: relative; }
	.maargx-nav-toggle.is-active {
		position: fixed; top: 10px; right: 20px; background: var(--maargx-bg); border-radius: 50%;
		width: 44px; height: 44px; box-shadow: var(--maargx-shadow); padding: 0;
		display: flex; align-items: center; justify-content: center;
	}
	/* Absolutely centered on the button's own midpoint rather than relying
	   on the hamburger's stacked flex/gap layout — that stack was never
	   built to land perfectly in the middle of a 44px circle, which is why
	   the X looked off-center. */
	.maargx-nav-toggle.is-active span { position: absolute; top: 50%; left: 50%; margin: 0; }
	.maargx-nav-toggle.is-active span:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg); }
	.maargx-nav-toggle.is-active span:nth-child(2) { opacity: 0; }
	.maargx-nav-toggle.is-active span:nth-child(3) { transform: translate(-50%, -50%) rotate(-45deg); }
	.maargx-header__inner { flex-wrap: nowrap; gap: 12px; justify-content: space-between; }
	.maargx-header__actions { gap: 10px; }
}

@media (max-width: 900px) {
	.maargx-hero__inner { grid-template-columns: 1fr; }
	.maargx-grid--3 > *, .maargx-grid--4 > *, .maargx-grid--5 > * { flex-basis: calc((100% - 20px) / 2); }
	.maargx-stats { grid-template-columns: repeat(2, 1fr); row-gap: 32px; }
	.maargx-stat:not(:last-child)::after { display: none; }
	.maargx-footer__inner { grid-template-columns: 1fr 1fr; }
	.maargx-topbar__contact { gap: 12px; }
	.maargx-carousel__item { flex-basis: calc(50% - 10px); }
}

@media (max-width: 640px) {
	.maargx-topbar__inner { padding: 6px 16px; }
	.maargx-topbar__contact a:nth-child(2) { display: none; }
	.maargx-toc ol { column-count: 1; }

	.maargx-header__actions .maargx-btn { display: none; }
	.maargx-grid--3 > *, .maargx-grid--4 > *, .maargx-grid--5 > * { flex-basis: 100%; }
	.maargx-stats { grid-template-columns: repeat(2, 1fr); padding: 30px 18px; }
	.maargx-carousel__item { flex-basis: 88%; }
	/* Brand and Contact hold paragraph-length text (tagline, address) that
	   turns into a narrow, badly-wrapped column at 2-up on a phone -- only
	   Explore and Popular Courses (short single-line links) actually work
	   side by side. Brand/Contact go full-width, the two link lists share
	   a row between them. */
	.maargx-footer__inner {
		grid-template-columns: 1fr 1fr;
		grid-template-areas: "brand brand" "explore courses" "contact contact";
		gap: 28px 24px;
		padding-top: 40px;
	}
	.maargx-footer__col--brand { grid-area: brand; }
	.maargx-footer__col--explore { grid-area: explore; }
	.maargx-footer__col--courses { grid-area: courses; }
	.maargx-footer__col--contact { grid-area: contact; }
	.maargx-footer__col--brand p { max-width: none; }
	.maargx-footer-list, .maargx-footer-contact { gap: 10px; }
	.maargx-carousel__arrow { display: none; }

	/* Success Stories was swiping sideways like the desktop carousel, which
	   read as confusing on a phone — switch it to a plain stacked list, the
	   same "scroll straight down" pattern already used for Current Affairs
	   cards, so it's obvious there's nothing to swipe. */
	.maargx-carousel--testimonials .maargx-carousel__track {
		display: flex; flex-direction: column; overflow-x: visible; scroll-snap-type: none; gap: 16px; padding: 4px 0;
	}
	.maargx-carousel--testimonials .maargx-carousel__item { flex: none; width: 100%; min-width: 0; }
	.maargx-slide__content h2 { max-width: 100%; }
	/* Tagline dropped on mobile -- the logo lockup doesn't have room for a
	   second line at this width, and "MaargX UPSC" itself is what needs to
	   read clearly, not the tagline under it. Text gets the freed-up space
	   instead of shrinking to fit both. */
	.maargx-logo__tagline { display: none; }
	.maargx-logo__text { font-size: 20px; }
	.maargx-logo img { max-height: 40px; }
	.maargx-logo__badge { width: 36px; height: 36px; font-size: 16px; border-radius: 10px; }
	/* The phone number was the same muted weight as everything else in the
	   topbar -- bumped size/weight so it actually reads as the primary,
	   tappable contact action it is, not a footnote. */
	.maargx-topbar__contact a { font-size: 14px; font-weight: 800; }
	.maargx-topbar__contact a .maargx-topbar__icon svg { width: 13px; height: 13px; }

	/* Logo + name centered, hamburger pinned to the right edge — the logo
	   is taken out of flow (absolutely centered) so it no longer fights the
	   toggle button for space once the inline nav goes off-canvas. */
	.maargx-header__inner { position: relative; justify-content: flex-end; padding: 10px 16px; }
	.maargx-header .maargx-logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }

	/* The hero slider was oversized for a phone screen: heading/paragraph
	   too large, and the prev/next arrows sat right on top of the text —
	   arrows are dropped on mobile (dots + swipe handle manual nav) so
	   nothing overlaps the copy. */
	body { font-size: 15.5px; }
	.maargx-slide__content h2 { font-size: 19px; line-height: 1.3; margin-bottom: 8px; }
	.maargx-slide__content p { font-size: 13px; line-height: 1.5; margin-bottom: 14px; }
	.maargx-slide__content .maargx-btn { padding: 10px 20px; font-size: 13px; }
	.maargx-slider__arrow { display: none; }
	.maargx-slider__track { height: clamp(280px, 62vw, 340px); }

	/* Mobile type scale — desktop sizes were being reused as-is on phones
	   (34px section titles, 40px page titles, 48px stat numbers…), which
	   reads oversized and forces awkward wrapping on a narrow screen. Every
	   size below only applies under 640px; desktop keeps its own scale. */
	.maargx-ticker__label { font-size: 10.5px; padding: 7px 12px; }
	.maargx-ticker__track { gap: 26px; }
	.maargx-ticker__track a { font-size: 12px; }

	.maargx-section { padding: 36px 0; }
	.maargx-section__title { font-size: 23px; }
	.maargx-section__subtitle { font-size: 14px; }
	.maargx-eyebrow { font-size: 11px; }

	.maargx-page-title { font-size: 26px; }
	.maargx-archive-header h1 { font-size: 24px; }
	.maargx-note-subtitle { font-size: 14.5px; }

	.maargx-card__title { font-size: 17px; }
	.maargx-card__media-fallback { font-size: 34px; }
	.maargx-stat__number { font-size: 32px; }
	.maargx-stat__label { font-size: 12.5px; }
	.maargx-quiz-section-title { font-size: 19px; }
	.maargx-course-tabs__panel-icon { font-size: 24px; }

	.maargx-course-banner:not(.has-image) .maargx-course-banner__content h1,
	.maargx-course-banner.has-image .maargx-course-banner__content h1 { font-size: 26px; }
	.maargx-course-banner .maargx-course__lede { font-size: 15px; }
	.maargx-course-banner--compact .maargx-course-banner__content h1 { font-size: 22px; }

	h1 { font-size: 26px; }
	h2 { font-size: 21px; }
	h3 { font-size: 17.5px; }
	h4 { font-size: 15.5px; }

	/* The floating call/WhatsApp buttons sit permanently bottom-right and
	   were landing directly on top of the footer's copyright line on every
	   page — give that line room to clear them. */
	.maargx-footer__bottom { padding-right: 76px; }
}

@media (prefers-reduced-motion: reduce) {
	.maargx-ticker__track { animation: none; }
	.maargx-sticky-cta__ring { animation: none; }
	* { scroll-behavior: auto !important; }
	.maargx-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ==========================================================================
   Scroll-reveal + premium micro-interactions
   ========================================================================== */

/* Elements start hidden/offset, main.js adds .is-visible via IntersectionObserver */
.maargx-reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1); }
.maargx-reveal.is-visible { opacity: 1; transform: none; }

/* Staggered entrance for grid children — each card lags slightly behind the last */
.maargx-grid > .maargx-reveal:nth-child(1) { transition-delay: 0ms; }
.maargx-grid > .maargx-reveal:nth-child(2) { transition-delay: 80ms; }
.maargx-grid > .maargx-reveal:nth-child(3) { transition-delay: 160ms; }
.maargx-grid > .maargx-reveal:nth-child(4) { transition-delay: 240ms; }
.maargx-grid > .maargx-reveal:nth-child(5) { transition-delay: 80ms; }
.maargx-grid > .maargx-reveal:nth-child(6) { transition-delay: 160ms; }
.maargx-grid > .maargx-reveal:nth-child(7) { transition-delay: 240ms; }
.maargx-grid > .maargx-reveal:nth-child(8) { transition-delay: 320ms; }

/* Hero: fades/rises in on first paint, no scroll trigger needed */
.maargx-hero__content > * { opacity: 0; animation: maargx-hero-in .8s cubic-bezier(.22,.61,.36,1) forwards; }
.maargx-hero__content > *:nth-child(1) { animation-delay: .05s; }
.maargx-hero__content > *:nth-child(2) { animation-delay: .15s; }
.maargx-hero__content > *:nth-child(3) { animation-delay: .25s; }
.maargx-hero__content > *:nth-child(4) { animation-delay: .35s; }
@keyframes maargx-hero-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
	.maargx-hero__content > * { animation: none; opacity: 1; }
}

/* Course-card image zoom on hover — a small premium touch */
.maargx-card__media img { transition: transform .5s cubic-bezier(.22,.61,.36,1); }
.maargx-card:hover .maargx-card__media img { transform: scale(1.06); }

/* Nav link underline sweep */
.maargx-nav-list > li > a { position: relative; }
.maargx-nav-list > li > a::before {
	content: ''; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px; background: var(--maargx-primary);
	transform: scaleX(0); transform-origin: left; transition: transform .25s ease;
}
.maargx-nav-list > li > a:hover::before { transform: scaleX(1); }

/* Stat numbers animate via main.js (textContent count-up); this just keeps the digits from jumping in size */
.maargx-stat__number { font-variant-numeric: tabular-nums; }

/* Button press feedback */
.maargx-btn:active { transform: translateY(0) scale(.97); }

/* Logo micro-interaction */
.maargx-logo__badge { transition: transform .3s ease; }
.maargx-logo:hover .maargx-logo__badge { transform: rotate(-6deg) scale(1.05); }