/* Start custom CSS *//* GRO Exams page. The gro-… class names are V4 global classes (Class Manager). */

/* Hero: the same soft glow as the home page. */
.gro-hero {
	background-image: radial-gradient(60% 80% at 100% 0%, rgba(255, 255, 255, 0.12) 0%, transparent 60%), radial-gradient(45% 60% at 0% 100%, color-mix(in srgb, var(--e-global-color-secondary, #EE0000) 22%, transparent) 0%, transparent 70%);
}

/* Even line lengths in titles, so a word is never left alone on the last line. */
.elementor-47536 :is(h1, h2) {
	text-wrap: balance;
}

/* Ticks in the plan lists. */
.gro-check-item::before {
	content: "";
	flex: none;
	width: 20px;
	height: 20px;
	margin-top: 2px;
	background-color: var(--e-global-color-primary, #0004A1);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Motion. The scroll-in animations are Elementor Interactions on the elements; this adds the rest. */
.elementor-47536 .gro-section {
	overflow-x: clip;
}

/* Cards lift a little on hover. This uses `translate`, not `transform`,
   because the scroll animations leave an inline transform on these elements. */
.elementor.elementor-47536 .gro-card {
	transition: translate 0.25s ease-out, box-shadow 0.25s ease-out, border-color 0.25s ease-out;
}
@media (hover: hover) {
	.elementor.elementor-47536 .gro-card:hover {
		translate: 0 -4px;
		border-color: color-mix(in srgb, var(--e-global-color-primary, #0004A1) 28%, #E4E4E4);
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04), 0 16px 32px rgba(0, 4, 161, 0.08);
	}
}

/* Reduced motion: show everything straight away. The animation script doesn't check this setting itself. */
@media (prefers-reduced-motion: reduce) {
	.elementor-47536 [data-interaction-id][style*="opacity"],
	.elementor-47536 [data-interaction-id][style*="transform"] {
		opacity: 1 !important;
		transform: none !important;
	}
	.elementor.elementor-47536 .gro-card {
		transition: none;
		translate: none !important;
	}
}/* End custom CSS */