/**
 * KMTC white-label brand overlay
 * Colors from https://kmtc.ac.ke/ + official crest:
 *   Yellow  #F2B904  |  Maroon #6D1926  |  Cream #FFF9E5
 * Fonts: Open Sans
 */

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700;800&display=swap');

:root {
	--thm-font: 'Open Sans', 'Poppins', sans-serif;
	--heading-font: 'Open Sans', 'Poppins', sans-serif;
	--thm-base: #6D1926;
	--thm-base-rgb: 109, 25, 38;
	--thm-black: #4A0F18;
	--thm-black-rgb: 74, 15, 24;
	--kmtc-yellow: #F2B904;
	--kmtc-yellow-dark: #D9A400;
	--kmtc-maroon: #6D1926;
	--kmtc-maroon-dark: #4A0F18;
	--kmtc-cream: #FFF9E5;
}

body {
	font-family: var(--thm-font);
	color: #2c2c2c;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--heading-font);
	color: var(--kmtc-maroon);
}

/* ——— Top utility bar (gold, like KMTC) ——— */
.topbar-one,
.main-header-wrapper .topbar-one {
	background: var(--kmtc-yellow) !important;
}

.topbar-one p,
.topbar-one p i {
	color: var(--kmtc-maroon) !important;
}

.topbar-one .thm-btn,
.topbar-one__right .thm-btn {
	background-color: var(--kmtc-maroon) !important;
	color: #fff !important;
	border-color: var(--kmtc-maroon) !important;
}

.topbar-one .thm-btn:hover,
.topbar-one__right .thm-btn:hover {
	background-color: var(--kmtc-maroon-dark) !important;
}

.topbar-one .search-btn a,
.topbar-one__right .search-btn a {
	background-color: var(--kmtc-maroon) !important;
	color: #fff !important;
}

/* ——— Main nav: white so the crest reads clearly ——— */
.main-header-wrapper {
	background: transparent !important;
}

.site-header-one,
.site-header-two,
.site-header-one.stricky-fixed,
.site-header-two.stricky-fixed,
.site-header-one.stricked-menu,
.site-header-two.stricked-menu,
.site-header-one .inner-container,
.site-header-two .inner-container {
	background: #ffffff !important;
	border-bottom: 3px solid var(--kmtc-yellow);
	box-shadow: 0 2px 10px rgba(109, 25, 38, 0.08);
}

.site-header-one .inner-container,
.site-header-two .inner-container {
	display: flex;
	align-items: center;
	min-height: 96px;
	padding-top: 8px;
	padding-bottom: 8px;
}

/* Crest or wordmark — never force a square, never stretch */
.site-header-one__logo {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	flex-shrink: 0;
	width: auto;
}

.site-header-one__logo .moto {
	display: inline-flex !important;
	align-items: center !important;
	flex: 0 0 auto !important;
	width: auto !important;
	max-width: calc(100% - 52px);
	text-decoration: none;
}

.site-header-one__logo img,
.site-header-two .site-header-one__logo img,
.stricky-fixed .site-header-one__logo img,
.stricked-menu .site-header-one__logo img {
	position: static !important;
	top: auto !important;
	margin: 0 !important;
	width: auto !important;
	height: 56px !important;
	max-width: 220px !important;
	max-height: 56px !important;
	object-fit: contain !important;
	object-position: left center !important;
	display: block;
	background: transparent !important;
	box-shadow: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	padding: 0 !important;
}

.site-header-one .side-menu__toggler {
	float: none !important;
	margin-left: auto;
	flex-shrink: 0;
}

/* Sticky clone should not look like a floating card */
.site-header-one.stricked-menu,
.site-header-two.stricked-menu,
.site-header-one.stricky-fixed,
.site-header-two.stricky-fixed {
	background: #ffffff !important;
	box-shadow: 0 2px 12px rgba(109, 25, 38, 0.12) !important;
	border-bottom: 3px solid var(--kmtc-yellow) !important;
}

/* Motto is already inside the crest — never show duplicate text (incl. sticky clone) */
.site-header-one__logo .moto h1,
.site-header-one .moto h1,
.stricky-fixed .moto h1,
.stricked-menu .moto h1,
.site-header-one.stricky-fixed .moto h1,
.site-header-one.stricked-menu .moto h1,
.stricky-fixed.site-header-two .moto h1 {
	display: none !important;
	visibility: hidden !important;
	height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden !important;
	font-size: 0 !important;
}

.main-nav__navigation-box > li > a {
	color: var(--kmtc-maroon) !important;
	font-weight: 700;
}

.main-nav__navigation-box > li > a:hover,
.main-nav__navigation-box > li.current > a {
	color: var(--kmtc-maroon-dark) !important;
}

.main-nav__navigation-box .thm-btn {
	background: var(--kmtc-maroon) !important;
	color: #fff !important;
}

.main-nav__navigation-box .thm-btn:hover {
	background: var(--kmtc-maroon-dark) !important;
}

.site-header-one .side-menu__toggler {
	color: var(--kmtc-maroon) !important;
}

/* Buttons */
.thm-btn,
.green {
	background: var(--kmtc-maroon) !important;
	color: #fff !important;
}

.thm-btn:hover {
	background: var(--kmtc-maroon-dark) !important;
	color: #fff !important;
}

a {
	color: var(--kmtc-maroon);
}

/* CTA band */
.cta-one,
.cta-one .inner-container {
	background: var(--kmtc-yellow) !important;
}

.cta-one h3 {
	color: var(--kmtc-maroon) !important;
}

.cta-one .thm-btn {
	background: var(--kmtc-maroon) !important;
}

/* ——— Footer: cream panel + readable dark text ——— */
.site-footer,
.site-footer__two,
.site-footer__upper {
	background: var(--kmtc-cream) !important;
}

.site-footer__upper,
.site-footer__upper p,
.footer-widget p,
.site-footer .footer-widget__links-list a,
.site-footer .list-unstyled a {
	color: #2c2c2c !important;
}

.footer-widget__title,
.footer-widget__title span,
.site-footer h3 {
	color: var(--kmtc-maroon) !important;
	border-bottom-color: var(--kmtc-maroon);
}

.site-footer a:hover {
	color: var(--kmtc-maroon) !important;
}

.footer-widget__about .footer-widget__logo {
	display: inline-flex;
	margin-bottom: 16px;
}

.footer-widget__about .footer-widget__logo img,
.site-footer .footer-widget__logo img {
	max-width: 110px !important;
	max-height: 110px !important;
	width: auto !important;
	height: auto !important;
	object-fit: contain;
	display: block;
}

.site-footer__bottom {
	background: var(--kmtc-maroon) !important;
	color: #fff !important;
}

.site-footer__bottom a,
.site-footer__bottom p {
	color: #fff !important;
}

.side-menu__social a,
.footer-widget__social a {
	background: var(--kmtc-maroon) !important;
	color: #fff !important;
}

.scroll-to-top {
	background: var(--kmtc-maroon) !important;
}

.red.thm-btn {
	background: var(--kmtc-maroon) !important;
}

/* ——— assetsv2 / skin-2 blues & oranges → KMTC ——— */
:root {
	--color-primary: #6D1926 !important;
	--color-secondry: #F2B904 !important;
	--color-hover: #4A0F18 !important;
	--thm-base: #6D1926;
	--thm-base-rgb: 109, 25, 38;
	--thm-black: #4A0F18;
}

.bg-primary,
.section-full.bg-primary,
.about-year.bg-primary,
.dlab-separator.bg-primary,
.site-button,
.btn-primary,
.badge-primary,
.pagination > .active > a,
.overlay-primary-light:after,
.overlay-primary-middle:after,
.overlay-primary-dark:after {
	background-color: var(--kmtc-maroon) !important;
	background: var(--kmtc-maroon) !important;
	border-color: var(--kmtc-maroon) !important;
	color: #fff !important;
}

.dlab-separator.bg-primary {
	color: transparent !important;
}

.text-primary,
.breadcrumb-row ul li a,
.list-check.primary li:before {
	color: var(--kmtc-maroon) !important;
}

/* Don't force maroon on every hover (breaks white links on maroon bands) */
a:hover:not(.thm-btn):not(.site-button):not(.btn-primary):not(.text-white),
a:focus:not(.thm-btn):not(.site-button):not(.btn-primary):not(.text-white) {
	color: var(--kmtc-maroon);
}

.site-button:hover,
.btn-primary:hover,
.btn-outline-primary:hover {
	background-color: var(--kmtc-maroon-dark) !important;
	border-color: var(--kmtc-maroon-dark) !important;
	color: #fff !important;
}

.btn-outline-primary {
	color: var(--kmtc-maroon) !important;
	border-color: var(--kmtc-maroon) !important;
}

/* Kill leftover Roodito blues in v3 theme hard-codes */
[style*="#3ba0e4"],
[style*="#3a9fe3"] {
	/* inline leftovers handled where possible via class overrides */
}

.main-nav__navigation-box > li ul,
.main-nav__navigation-box > li > ul {
	border-top-color: var(--kmtc-maroon) !important;
}

.main-nav__navigation-box > li ul > li:hover > a,
.main-nav__navigation-box > li ul > li > a:hover {
	background: var(--kmtc-maroon) !important;
	color: #fff !important;
}

.block-title__two h4,
.service-one__single h3 a:hover,
.pricing-one__price,
.banner-one h3 span,
.banner-one__tagline {
	color: var(--kmtc-maroon) !important;
}

.banner-three__moc-1 {
	width: min(560px, 48vw);
	max-width: 100%;
	height: auto !important;
	object-fit: contain;
	right: 0 !important;
	top: 40px !important;
	pointer-events: none;
}

.banner-three__content h2 {
	color: var(--kmtc-maroon) !important;
}

.banner-three__content h3 {
	overflow-wrap: break-word;
	word-break: normal;
}

.banner-three__content h3 span,
#example,
#example .typed {
	color: var(--kmtc-maroon) !important;
	white-space: normal;
}

.banner-three__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	align-items: stretch;
}

.banner-three__content .thm-btn,
.banner-three__actions .thm-btn {
	margin: 0 !important;
	float: none !important;
	position: static !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	line-height: 1.25 !important;
	white-space: nowrap;
	min-height: 52px;
	padding: 14px 28px !important;
	font-size: 16px;
	background: var(--kmtc-maroon) !important;
	color: #fff !important;
	box-shadow: 0 8px 18px rgba(109, 25, 38, 0.22);
}

.banner-three__content .thm-btn.green,
.banner-three__content .thm-btn.blue {
	margin-left: 0 !important;
	background: var(--kmtc-maroon) !important;
	color: #fff !important;
}

.contact-info-one__content h4,
.contact-info-one__content h4 a {
	overflow-wrap: anywhere;
	word-break: break-word;
}

.site-footer__bottom p {
	line-height: 1.6;
	padding: 6px 8px;
}

@media (max-width: 767px) {
	.banner-three__actions {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
		max-width: 100%;
	}

	.banner-three__actions .thm-btn {
		width: 100%;
		min-height: 56px;
		padding: 16px 24px !important;
		font-size: 16px;
	}

	.contact-info-one__single {
		align-items: flex-start;
		gap: 14px;
	}

	.contact-info-one__content {
		min-width: 0;
		flex: 1;
	}

	.contact-info-one__content h3,
	.contact-info-one__content h4 {
		font-size: 16px !important;
		line-height: 1.4 !important;
	}

	.site-footer__bottom {
		padding: 16px 12px !important;
	}

	.site-footer__bottom p {
		font-size: 13px;
		line-height: 1.7;
	}
}

@media (max-width: 1199px) {
	.site-header-one__logo,
	.site-header-two .site-header-one__logo {
		display: flex !important;
		align-items: center !important;
		justify-content: space-between !important;
		width: 100% !important;
	}

	.site-header-one .side-menu__toggler {
		display: inline-flex !important;
		float: none !important;
		align-items: center;
		margin-left: auto;
	}

	.banner-three .container {
		padding-top: 32px !important;
		padding-bottom: 72px !important;
	}
}

@media (max-width: 991px) {
	.site-header-one__logo img,
	.site-header-two .site-header-one__logo img {
		height: 44px !important;
		max-height: 44px !important;
		max-width: min(200px, 70vw) !important;
		width: auto !important;
	}

	.site-header-one .inner-container,
	.site-header-two .inner-container {
		min-height: 64px;
	}

	.banner-three .container {
		padding-top: 20px !important;
		padding-bottom: 48px !important;
	}

	.banner-three__content h3 {
		font-size: 28px !important;
		line-height: 1.3 !important;
	}
}

@media (max-width: 575px) {
	.banner-three .container {
		padding-top: 12px !important;
		padding-bottom: 40px !important;
	}

	.banner-three__content h3 {
		font-size: 26px !important;
		line-height: 1.25 !important;
	}
}

/**
 * Pass 2 (2026-09-24): the sections below still carried the generic
 * template's rainbow accent colors (pink/indigo/blue/green/olive) even
 * though the header/footer/hero were already on-brand. Bring them onto
 * the same maroon + gold system.
 */

/* ——— Feature icon bubbles (Ace your Exams / Enjoy Flexibility / Expert Opinion) ——— */
.about-four__icon i,
.about-four__box.color-2 .about-four__icon i,
.about-four__box.color-3 .about-four__icon i {
	background-image: linear-gradient(135deg, var(--kmtc-maroon) 0%, var(--kmtc-maroon-dark) 100%) !important;
	color: #fff !important;
}

.about-four__icon-bubble::before,
.about-four__box.color-2 .about-four__icon-bubble::before,
.about-four__box.color-3 .about-four__icon-bubble::before,
.about-four__icon-bubble::after,
.about-four__box.color-2 .about-four__icon-bubble::after,
.about-four__box.color-3 .about-four__icon-bubble::after {
	background-color: var(--kmtc-yellow) !important;
}

.about-four__box h3 {
	color: var(--kmtc-maroon) !important;
}

.about-four__title {
	background-color: var(--kmtc-maroon) !important;
}

.about-four__title b {
	color: var(--kmtc-yellow) !important;
}

/* ——— Section headings / stat counters / dividers (were indigo #291a55) ——— */
.block-title h3,
.about-funfact__box h3,
.pricing-one__single p span {
	color: var(--kmtc-maroon) !important;
}

.block-title h3 span,
.block-title h3 a {
	color: var(--kmtc-yellow-dark) !important;
}

.block-title__line,
.pricing-one__line {
	background-image: linear-gradient(90deg, var(--kmtc-maroon) 0%, var(--kmtc-yellow) 51%, var(--kmtc-maroon) 100%) !important;
}

.about-funfact__box h3 b {
	color: var(--kmtc-yellow-dark) !important;
}

/* ——— Registration cards (Student/Parent/Tutor/Teacher) ——— */
.service-one__icon,
.service-one__icon.color-1,
.service-one__icon.color-2,
.service-one__icon.color-3,
.service-one__icon.color-4,
.service-one__icon.color-5,
.service-one__icon.color-6 {
	background-color: var(--kmtc-cream) !important;
	box-shadow: 0 6px 16px rgba(109, 25, 38, 0.12) !important;
}

.service-one__icon i {
	color: var(--kmtc-maroon) !important;
}

.service-one__single h3 {
	color: var(--kmtc-maroon) !important;
}

/* ——— Pricing cards: "Recommended" ribbon + top edge were theme blue ——— */
.pricing-one__single::before {
	background-color: var(--kmtc-maroon) !important;
}

.pricing-one__label {
	background-color: var(--kmtc-yellow) !important;
	color: var(--kmtc-maroon) !important;
}

.pricing-one__single h3 {
	color: var(--kmtc-maroon) !important;
}

/* ——— Footer newsletter box: white-on-white after the footer went cream ——— */
.footer-widget__mc-form {
	background-color: #fff !important;
	border: 1px solid rgba(109, 25, 38, 0.25) !important;
	border-radius: 6px;
	overflow: hidden;
}

.footer-widget__mc-form input {
	color: #2c2c2c !important;
}

.footer-widget__mc-form ::placeholder {
	color: #6b6b6b !important;
	opacity: 1 !important;
}

.footer-widget__mc-form button[type=submit] {
	background-color: var(--kmtc-maroon) !important;
	color: #fff !important;
}

.footer-widget__mc-form button[type=submit]:hover {
	background-color: var(--kmtc-maroon-dark) !important;
	color: #fff !important;
}

/**
 * Pass 3 (2026-09-24): full-bleed photographic hero + features photo,
 * replacing the flat illustration hero and the floating-badge/offset-shape
 * treatment that read as a generic template rather than a real institution.
 */
.kmtc-hero { position: relative; overflow: hidden; z-index: 5; }
.kmtc-hero .container { position: relative; z-index: 2; }

.kmtc-hero__bg {
	position: absolute !important;
	inset: 0;
	top: 0 !important;
	right: 0 !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	object-position: center 30%;
	float: none !important;
	animation: none !important;
}

.kmtc-hero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, rgba(36,20,22,.96) 0%, rgba(74,15,24,.93) 34%, rgba(74,15,24,.55) 62%, rgba(74,15,24,.1) 85%);
}

.kmtc-hero .banner-three__content { position: relative; z-index: 2; }

.kmtc-hero__eyebrow {
	display: inline-block;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--kmtc-yellow);
	margin-bottom: 14px;
}

.kmtc-hero .banner-three__content h2,
.kmtc-hero .banner-three__content h3,
.kmtc-hero .banner-three__content h3 span,
.kmtc-hero #example,
.kmtc-hero #example .typed {
	color: #fff !important;
}

.kmtc-hero .banner-three__content p {
	color: rgba(255,255,255,.85);
	max-width: 520px;
}

.kmtc-hero__trust {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 22px;
	font-size: 14px;
	font-weight: 600;
	color: rgba(255,255,255,.75);
	flex-wrap: wrap;
}

.kmtc-hero__dot {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--kmtc-yellow);
	flex-shrink: 0;
}

.kmtc-hero .banner-three__content .thm-btn {
	background: var(--kmtc-yellow) !important;
	color: var(--kmtc-maroon-dark) !important;
	box-shadow: 0 8px 18px rgba(0,0,0,.25) !important;
}

.kmtc-hero .banner-three__content .thm-btn:hover {
	background: var(--kmtc-yellow-dark) !important;
	color: var(--kmtc-maroon-dark) !important;
}

@media (min-width: 992px) {
	.kmtc-hero .banner-three .container { min-height: 560px; display: flex; align-items: center; }
}

/* ——— Features section supporting photo ——— */
.kmtc-feature-photo {
	width: 100%;
	max-width: 460px;
	height: 300px;
	object-fit: cover;
	border-radius: 16px;
	box-shadow: 0 20px 40px rgba(74,15,24,.14);
	flex-shrink: 0;
}

.kmtc-feature-intro {
	display: flex;
	align-items: center;
	gap: 56px;
	margin-bottom: 40px;
}

@media (max-width: 991px) {
	.kmtc-feature-intro { flex-direction: column; }
	.kmtc-feature-photo { max-width: 100%; height: 220px; }
}

/**
 * Pass 4 (2026-09-24): question-results page. This view pulls in an extra
 * legacy stylesheet (assets/css/style.css, linked from inside the body)
 * whose !important rules load after ours, so selectors here are scoped
 * more specifically than theirs to win regardless of load order.
 */
.final-results h3,
.container-fluid.end-results h3 {
	color: var(--kmtc-maroon) !important;
}

.container-fluid.end-results .bar {
	background: var(--kmtc-cream) !important;
}

.container-fluid.end-results .bar .label {
	background: var(--kmtc-maroon) !important;
	color: #fff !important;
}

.container-fluid.end-results .bar .label.light {
	background: var(--kmtc-yellow) !important;
	color: var(--kmtc-maroon-dark) !important;
}

.container-fluid.end-results a.forward.green,
.container-fluid.end-results .green {
	background: var(--kmtc-maroon) !important;
	color: #fff !important;
	border: 2px solid var(--kmtc-maroon) !important;
}

.container-fluid.end-results a.forward.red,
.container-fluid.end-results .red {
	background: transparent !important;
	color: var(--kmtc-maroon) !important;
	border: 2px solid var(--kmtc-maroon) !important;
}

.container-fluid.end-results .forward:hover {
	background: var(--kmtc-maroon-dark) !important;
	color: #fff !important;
	border-color: var(--kmtc-maroon-dark) !important;
}

/**
 * Pass 5 (2026-09-24): question-results score card, rebuilt as a donut
 * gauge + icon stat list (was three stacked navy/cyan/coral bars plus a
 * separate JustGage semicircle gauge).
 */
.kmtc-results-card {
	max-width: 720px;
	margin: 0 auto;
	background: #fff;
	border-radius: 18px;
	box-shadow: 0 20px 50px rgba(74, 15, 24, .12);
	overflow: hidden;
}

.kmtc-results-card__head {
	text-align: center;
	padding: 40px 32px 8px;
}

.kmtc-results-card__eyebrow {
	display: inline-block;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--kmtc-yellow-dark);
}

.kmtc-results-card__head h3 {
	margin: 8px 0 0;
	color: var(--kmtc-maroon) !important;
	font-size: 30px;
}

.kmtc-results-card__subject {
	margin: 6px 0 0;
	color: #5B4A4D;
	font-size: 14.5px;
}

.kmtc-results-card__body {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 56px;
	flex-wrap: wrap;
	padding: 32px 40px 44px;
}

.kmtc-donut {
	--pct: 0;
	width: 190px;
	height: 190px;
	border-radius: 50%;
	background: conic-gradient(var(--kmtc-maroon) calc(var(--pct) * 1%), var(--kmtc-cream) 0);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.kmtc-donut__hole {
	width: 148px;
	height: 148px;
	border-radius: 50%;
	background: #fff;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
}

.kmtc-donut__num {
	font-size: 34px;
	font-weight: 800;
	color: var(--kmtc-maroon);
}

.kmtc-donut__label {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: #5B4A4D;
}

.kmtc-results-stats {
	display: flex;
	flex-direction: column;
	gap: 18px;
	min-width: 220px;
}

.kmtc-results-stat {
	display: flex;
	align-items: center;
	gap: 14px;
}

.kmtc-results-stat__icon {
	width: 40px;
	height: 40px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-size: 16px;
}

.kmtc-results-stat__icon--neutral { background: var(--kmtc-cream); color: var(--kmtc-maroon); }
.kmtc-results-stat__icon--good { background: #E9F5EA; color: #2E7D32; }
.kmtc-results-stat__icon--bad { background: #FBEAE9; color: #B3261E; }

.kmtc-results-stat__num {
	display: block;
	font-size: 20px;
	font-weight: 800;
	color: #241416;
}

.kmtc-results-stat__num--good { color: #2E7D32; }
.kmtc-results-stat__num--bad { color: #B3261E; }

.kmtc-results-stat__label {
	display: block;
	font-size: 13px;
	color: #5B4A4D;
	font-weight: 600;
}

@media (max-width: 575px) {
	.kmtc-results-card__body { flex-direction: column; gap: 28px; padding: 24px; }
}

/* Results page polish: brand font, tighter spacing, centred actions */
.container-fluid.end-results { padding-top: 28px !important; padding-bottom: 56px; background: #FBF7F1; }
.container-fluid.end-results .content-right { margin-top: 0 !important; padding-top: 0 !important; }
.kmtc-results-card, .kmtc-results-card * { font-family: 'Open Sans', system-ui, sans-serif !important; }
.container-fluid.end-results #middle-wizard { min-height: 0; }
.container-fluid.end-results #bottom-wizard { border-top: 0; text-align: center; margin-top: 24px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.container-fluid.end-results #bottom-wizard a.forward { font-family: 'Open Sans', system-ui, sans-serif; font-size: 15px; font-weight: 700; padding: 14px 26px; border-radius: 12px; }
@media (max-width: 575px) {
	.container-fluid.end-results #bottom-wizard a.forward { width: 100%; text-align: center; }
	.kmtc-donut { width: 160px; height: 160px; }
	.kmtc-donut__hole { width: 124px; height: 124px; }
	.kmtc-donut__num { font-size: 28px; }
}