.evolution-blog-archive,
.evolution-agent-directory,
.evolution-enquire,
.evolution-apply-now,
.evolution-forms-and-policies,
.evolution-visit-campus {
	padding: 3rem 0;
}

/*
 * Grid/container utilities. The legacy theme relies on Bootstrap's grid
 * globally (legacy assets/css/bootstrap.min.css); this rebuild does not
 * include Bootstrap, so - following the existing convention already
 * established in home-blocks.css/course-catalogue.css/legacy-page-blocks.css
 * (each block family scopes its own .container/.row/.col-* rather than
 * relying on a global framework) - every block in this file that uses a
 * .container/.row/.col-* wrapper gets one here. This was missing entirely
 * for this file's six block types (confirmed live: real markup, browser-
 * default/left-edge layout, exactly the "correct markup + missing
 * framework CSS" failure class) even though the same convention was
 * already applied elsewhere - computed as standard 12-column percentages
 * (4/12=33.3333%, 5/12=41.6667%, 6/12=50%, 7/12=58.3333%), not invented
 * values; .container uses the same 1140px/15px values already established
 * in home-blocks.css; breakpoints (768px/992px) match Bootstrap's own
 * defaults, which the legacy theme's shipped bootstrap.min.css also used.
 */
/* CORRECTED (confirmed live against legacy's real Bootstrap 5.0.2
   bootstrap.min.css): gutter is --bs-gutter-x: .75rem (12px), not 15px, and
   .container's real max-width is responsive - 540/720/960/1140/1320px at
   576/768/992/1200/1400px - not a flat 1140px. Same root cause and fix as
   home-blocks.css's .container rule; see that file's comment for the full
   trace (confirmed via a direct user screenshot comparison at ~1900px
   width). */
.evolution-blog-archive .container,
.evolution-agent-directory .container,
.evolution-enquire .container,
.evolution-apply-now .container,
.evolution-apply-now-pathway .container,
.evolution-forms-and-policies .container,
.evolution-visit-campus .container {
	box-sizing: border-box;
	margin-left: auto;
	margin-right: auto;
	max-width: 1140px;
	padding-left: 12px;
	padding-right: 12px;
	width: 100%;
}
@media (min-width: 1400px) {
	.evolution-blog-archive .container,
	.evolution-agent-directory .container,
	.evolution-enquire .container,
	.evolution-apply-now .container,
	.evolution-apply-now-pathway .container,
	.evolution-forms-and-policies .container,
	.evolution-visit-campus .container {
		max-width: 1320px;
	}
}
.evolution-blog-archive .row,
.evolution-agent-directory .row,
.evolution-enquire .row,
.evolution-apply-now .row,
.evolution-apply-now-pathway .row,
.evolution-forms-and-policies .row,
.evolution-visit-campus .row {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -15px;
}
.evolution-blog-archive [class*="col-"],
.evolution-agent-directory [class*="col-"],
.evolution-enquire [class*="col-"],
.evolution-apply-now [class*="col-"],
.evolution-apply-now-pathway [class*="col-"],
.evolution-forms-and-policies [class*="col-"],
.evolution-visit-campus [class*="col-"] {
	padding: 0 15px;
	box-sizing: border-box;
	width: 100%;
}
/* col-xl-3/col-xl-9 (25%/75%, Bootstrap xl breakpoint 1200px) - the
   pathway-selector's own nav/content split, not needed by any other block
   in this file. */
.evolution-apply-now-pathway .col-xl-3 {
	flex: 0 0 25%;
	max-width: 25%;
}
.evolution-apply-now-pathway .col-xl-9 {
	flex: 0 0 75%;
	max-width: 75%;
}
@media (max-width: 1199px) {
	.evolution-apply-now-pathway .col-xl-3,
	.evolution-apply-now-pathway .col-xl-9 {
		flex: 0 0 100%;
		max-width: 100%;
	}
}
.evolution-forms-and-policies .col-md-4 {
	flex: 0 0 33.3333%;
	max-width: 33.3333%;
}
.evolution-agent-directory .col-lg-4 {
	flex: 0 0 33.3333%;
	max-width: 33.3333%;
}
/* Blog archive's own col-lg-8 (main feed) / col-lg-4 (Popular Posts
   sidebar) split - ported from legacy's .react-blog-page .row structure
   (confirmed live on evolution.edu.au/blog/), distinct from the
   3-cards-per-row col-md-4 grid this block used before. */
.evolution-blog-archive .col-lg-8 {
	flex: 0 0 66.6667%;
	max-width: 66.6667%;
}
.evolution-blog-archive .col-lg-4 {
	flex: 0 0 33.3333%;
	max-width: 33.3333%;
}
@media (max-width: 991px) {
	.evolution-blog-archive .col-lg-8,
	.evolution-blog-archive .col-lg-4 {
		flex: 0 0 100%;
		max-width: 100%;
	}
}
/* Ratio corrected to match legacy's real col-lg-4/col-lg-8 split
   (confirmed live on evolution.edu.au/contact-us/: ul.address-sec sits in
   a col-lg-4, the form in a col-lg-8) - kept this file's existing
   col-lg-5/col-lg-7 classnames in the PHP markup rather than renaming them,
   since they're plain CSS hooks here, not real Bootstrap column semantics. */
.evolution-enquire .col-lg-5 {
	flex: 0 0 33.3333%;
	max-width: 33.3333%;
}
.evolution-enquire .col-lg-7 {
	flex: 0 0 66.6667%;
	max-width: 66.6667%;
}
.evolution-agent-directory .col-md-6,
.evolution-apply-now .col-md-6,
.evolution-visit-campus .col-md-6 {
	flex: 0 0 50%;
	max-width: 50%;
}
/* apply-now's image-content cards use `col-md-4 col-6` together (a real
   legacy Bootstrap combo: 6/12 as the base/mobile size, overridden to
   4/12 from the md breakpoint up) - authored desktop-first like the rest
   of this file, so col-md-4's own rule carries the desktop 33.3333% and is
   overridden back down to the col-6 mobile size inside the md breakpoint
   below, rather than declaring `.col-6` as a second, competing always-on
   rule for the same element. */
.evolution-apply-now .col-md-4 {
	flex: 0 0 33.3333%;
	max-width: 33.3333%;
}
@media (max-width: 991px) {
	.evolution-agent-directory .col-lg-4,
	.evolution-enquire .col-lg-5,
	.evolution-enquire .col-lg-7 {
		flex: 0 0 100%;
		max-width: 100%;
	}
}
@media (max-width: 767px) {
	.evolution-forms-and-policies .col-md-4,
	.evolution-agent-directory .col-md-6,
	.evolution-apply-now .col-md-6,
	.evolution-visit-campus .col-md-6 {
		flex: 0 0 100%;
		max-width: 100%;
	}
	.evolution-apply-now .col-md-4 {
		flex: 0 0 50%;
		max-width: 50%;
	}
}
@media (max-width: 575px) {
	.evolution-apply-now .col-md-4 {
		flex: 0 0 100%;
		max-width: 100%;
	}
}

/* Blog listing cards - ported from legacy style.css:10663-10777
   (.react-blog-page .single-blog), a stacked single-column list of large
   cards - confirmed live on evolution.edu.au/blog/ - not the 3-per-row
   grid of small cards this block used before. */
.evolution-blog-archive .single-blog {
	transition: all 0.5s ease 0s;
	background: #fff;
	box-shadow: 0 1px 2px rgba(15, 18, 22, 0.14);
	border-radius: 6px;
	margin-bottom: 60px;
}
.evolution-blog-archive .blog-img {
	position: relative;
}
.evolution-blog-archive .blog-img .cate {
	background: #2D2D73;
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	display: inline-block;
	border-radius: 4px;
	padding: 5px 10px;
	line-height: 17px;
	position: absolute;
	right: 24px;
	top: 20px;
	text-decoration: none;
}
.evolution-blog-archive .blog-img img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 6px 6px 0 0;
}
.evolution-blog-archive .blog-content {
	padding: 40px;
}
/* Same recurring bug as the course-single/blog-single related-links lists
   fixed earlier in this project: list-style:none alone doesn't clear the
   browser's default <ul> padding-left:40px, which was pushing the date row
   40px further right than .blog-title/.blog-desc below it (plain h3/p, no
   such indent). */
.evolution-blog-archive .blog-content .top-part {
	display: flex;
	align-items: center;
	padding: 0 0 12px;
	margin: 0;
	list-style: none;
}
.evolution-blog-archive .blog-content .top-part li {
	font-size: 15px;
	color: #737383;
	padding-right: 25px;
	font-weight: 500;
}
/* vertical-align:middle (the standard icon-next-to-text technique) centers
   the icon against the text's own line height reliably; an SVG defaults to
   vertical-align:baseline like any other inline/replaced element, which
   sits it low relative to the text next to it. top:-2px on top of that is
   a small extra nudge so the date text sits a little lower than dead
   center against the icon, per request. */
.evolution-blog-archive .blog-content .top-part li svg {
	width: 18px;
	height: 18px;
	vertical-align: middle;
	position: relative;
	top: -2px;
	margin-right: 4px;
}
.evolution-blog-archive .blog-content .blog-title {
	font-size: 34px;
	line-height: 40px;
	font-weight: 600;
	margin: 0 0 25px;
}
.evolution-blog-archive .blog-content .blog-title a {
	color: #1E1E1E;
	text-decoration: none;
}
.evolution-blog-archive .blog-content .blog-title a:hover {
	color: #2D2D73;
}
.evolution-blog-archive .blog-content .blog-desc {
	color: #55575c;
	margin: 0 0 30px;
}
.evolution-blog-archive .blog-content .button__sec {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.evolution-blog-archive .blog-content .button__sec .blog-btn {
	font-size: 16px;
	font-weight: 600;
	border-radius: 6px;
	border: 2px solid rgba(0, 48, 110, 0.1);
	padding: 12px 35px;
	color: #1E1E1E;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	line-height: 20px;
	text-decoration: none;
	transition: all 0.3s ease 0s;
}
.evolution-blog-archive .blog-content .button__sec .blog-btn svg {
	width: 20px;
}
.evolution-blog-archive .blog-content .button__sec .blog-btn:hover {
	background: #2D2D73;
	color: #fff;
	border-color: #2D2D73;
}
@media (max-width: 575px) {
	.evolution-blog-archive .blog-content {
		padding: 25px;
	}
	.evolution-blog-archive .blog-content .blog-title {
		font-size: 26px;
		line-height: 32px;
	}
}

/* Pagination - ported from legacy style.css:5981-6003 (.page-numbers pill
   styling) and style.css:12330-12336 (.back-pagination's centering flex). */
.evolution-blog-archive .back-pagination {
	margin: 2rem 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
}
.evolution-blog-archive .back-pagination .page-numbers {
	min-width: 40px;
	height: 40px;
	border: 2px solid #E8ECF0;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 2px;
	padding: 7px 10px;
	font-size: 14px;
	background: #f1f0fe;
	border-radius: 6px;
	text-decoration: none;
	color: #1E1E1E;
	box-sizing: border-box;
}
.evolution-blog-archive .back-pagination .page-numbers:hover,
.evolution-blog-archive .back-pagination .page-numbers.current {
	border: 2px solid #6B5CF6;
	background: #6B5CF6;
	color: #fff;
}
.evolution-blog-archive .back-pagination .page-numbers.dots {
	margin-top: -8px;
	background: transparent;
	border-color: transparent;
}

/* Popular Posts sidebar - ported from legacy style.css:12366-12825
   (.react-sidebar/.widget/ul.related-courses). Shared between the blog
   archive page and single blog posts (Blog_Single reuses
   Forms_Blocks::render_blog_sidebar() verbatim), hence the combined
   selectors throughout this block rather than duplicating it in
   blog-single.css. */
.evolution-blog-archive .react-sidebar .widget,
.evolution-blog-single .react-sidebar .widget {
	background: #f1f0fe;
	padding: 35px;
	border-radius: 20px;
	box-shadow: 0 20px 40px rgba(15, 18, 22, 0.08);
}
.evolution-blog-archive .react-sidebar .widget.back-post .widget-title,
.evolution-blog-single .react-sidebar .widget.back-post .widget-title {
	margin-top: -10px;
}
.evolution-blog-archive .react-sidebar h3.widget-title,
.evolution-blog-single .react-sidebar h3.widget-title {
	margin: 0;
	font-size: 20px;
	padding-bottom: 1.1em;
	color: #1E1E1E;
	font-weight: 600;
	line-height: 1.2;
}
.evolution-blog-archive .react-sidebar ul.related-courses,
.evolution-blog-single .react-sidebar ul.related-courses {
	margin: 0;
	padding: 0;
	list-style: none;
}
.evolution-blog-archive .react-sidebar ul.related-courses li,
.evolution-blog-single .react-sidebar ul.related-courses li {
	display: flex;
	align-items: center;
	padding-bottom: 1.2em;
}
.evolution-blog-archive .react-sidebar ul.related-courses li:last-child,
.evolution-blog-single .react-sidebar ul.related-courses li:last-child {
	padding-bottom: 0;
}
.evolution-blog-archive .react-sidebar ul.related-courses li .post-images,
.evolution-blog-single .react-sidebar ul.related-courses li .post-images {
	width: 87px;
	display: block;
	flex-shrink: 0;
	overflow: visible;
}
.evolution-blog-archive .react-sidebar ul.related-courses li .post-images img,
.evolution-blog-single .react-sidebar ul.related-courses li .post-images img {
	display: block;
	width: 127px;
	max-width: none;
	height: auto;
	border-radius: 6px;
}
.evolution-blog-archive .react-sidebar ul.related-courses li .titles,
.evolution-blog-single .react-sidebar ul.related-courses li .titles {
	display: block;
	padding-left: 45px;
}
.evolution-blog-archive .react-sidebar ul.related-courses li .titles h4,
.evolution-blog-single .react-sidebar ul.related-courses li .titles h4 {
	margin: 0 0 6px;
	font-weight: 400;
	font-size: 16px;
	line-height: 20px;
}
.evolution-blog-archive .react-sidebar ul.related-courses li .titles h4 a,
.evolution-blog-single .react-sidebar ul.related-courses li .titles h4 a {
	color: #1E1E1E;
	text-decoration: none;
}
.evolution-blog-archive .react-sidebar ul.related-courses li .titles h4:hover a,
.evolution-blog-single .react-sidebar ul.related-courses li .titles h4:hover a {
	color: #2D2D73;
}
.evolution-blog-archive .react-sidebar ul.related-courses li .titles span,
.evolution-blog-single .react-sidebar ul.related-courses li .titles span {
	display: flex;
	align-items: center;
	font-weight: 600;
	color: #1E1E1E;
	font-size: 14px;
}
.evolution-blog-archive .react-sidebar ul.related-courses li .titles span svg,
.evolution-blog-single .react-sidebar ul.related-courses li .titles span svg {
	width: 16px;
	height: 16px;
	margin-right: 4px;
}
@media (max-width: 991px) {
	.evolution-blog-archive .react-sidebar,
	.evolution-blog-single .react-sidebar {
		margin-top: 30px;
	}
}

.evolution-agent-directory .single-agent {
	border: 1px solid #eee;
	padding: 1.5rem;
	margin-bottom: 1.5rem;
}
.evolution-agent-directory .single-agent a {
	display: block;
	margin-top: 0.5rem;
}
.evolution-agent-directory .agent-callback {
	display: inline-block;
	margin-top: 1rem;
	padding: 0.5rem 1rem;
	background: #1e1e1e;
	color: #fff;
	text-decoration: none;
}

/* Purple info card - ported from legacy style.css:11703-11750
   (.react-contact-page .address-sec), confirmed live on
   evolution.edu.au/contact-us/: a white circular icon badge (65px, phone/
   location/email SVGs from evolution.edu.au/wp-content/uploads/2023/07/)
   beside a bold label + the actual address/phone/email content, all in
   white text on a solid purple (#6B5CF6) rounded card. */
.evolution-enquire .address-sec {
	margin: 0;
	padding: 35px;
	list-style: none;
	border-radius: 20px;
	background: #6B5CF6;
	color: #fff;
}
.evolution-enquire .address-sec li {
	display: flex;
	padding-bottom: 35px;
}
.evolution-enquire .address-sec li:last-child {
	padding-bottom: 0;
}
.evolution-enquire .address-sec li .icon {
	margin-right: 20px;
	min-width: 65px;
	max-width: 65px;
	height: 65px;
	background: #fff;
	border-radius: 50%;
	font-style: normal;
}
.evolution-enquire .address-sec li .icon img {
	width: 100%;
	box-sizing: border-box;
	padding: 20px;
	object-fit: contain;
}
.evolution-enquire .address-sec li .text {
	font-size: 16px;
	line-height: 24px;
	color: #fff;
}
.evolution-enquire .address-sec li .text em {
	color: #fff;
	font-weight: 600;
	font-size: 20px;
	display: block;
	font-style: normal;
	margin: 0 0 8px;
}
.evolution-enquire .address-sec li .text a {
	display: block;
	color: #fff;
	text-decoration: none;
}
.evolution-enquire .address-sec li .text a:hover {
	color: #fff;
	opacity: 0.7;
}
.evolution-enquire .contact-title {
	font-size: 34px;
	color: #1E1E1E;
	font-weight: 700;
	line-height: 42px;
	text-align: left;
	margin: 0 0 20px;
}

.evolution-contact-form {
	margin-top: 1.5rem;
}
.evolution-contact-form__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.evolution-contact-form__message {
	padding: 0.75rem 1rem;
	margin-bottom: 1rem;
}
.evolution-contact-form__message--success {
	background: #eaf6ea;
	color: #1e5a1e;
}
.evolution-contact-form__message--error {
	background: #fbeaea;
	color: #7a1f1f;
}
.evolution-contact-form__row {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}
.evolution-contact-form__field {
	flex: 1 1 calc(50% - 0.5rem);
	min-width: 220px;
	display: flex;
	flex-direction: column;
}
.evolution-contact-form__field--full {
	flex-basis: 100%;
}
/* Field label kept in markup for accessibility (screen readers still
   announce it via the for/id association) but hidden visually - legacy's
   real contact form (Contact Form 7) has no visible label at all, just
   placeholder text inside the styled box, confirmed live on
   evolution.edu.au/contact-us/. */
.evolution-contact-form__field label {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
/* Input/select/textarea styling - ported from legacy style.css:11610-11650
   (`select, form input` / `form textarea`), confirmed live on
   evolution.edu.au/contact-us/: light-blue fill, soft gray border, rounded
   corners, purple border on focus. */
.evolution-contact-form__field input,
.evolution-contact-form__field select,
.evolution-contact-form__field textarea {
	box-sizing: border-box;
	width: 100%;
	height: 57px;
	padding: 10px 30px;
	background: #F5F8FD;
	outline: 0;
	border-radius: 6px;
	border: 2px solid rgb(240, 240, 240);
	font: inherit;
	transition: border-color 0.3s ease 0s;
}
.evolution-contact-form__field input:focus,
.evolution-contact-form__field select:focus,
.evolution-contact-form__field textarea:focus {
	border: 2px solid #6B5CF6;
}
.evolution-contact-form__field textarea {
	height: 160px;
	padding: 22px 30px;
	resize: vertical;
}
.evolution-contact-form__submit {
	display: inline-block;
	margin-top: 1.5rem;
	padding: 15px 45px;
	background: #6B5CF6;
	color: #fff;
	border: none;
	border-radius: 20px;
	font-weight: 500;
	cursor: pointer;
	transition: opacity 0.3s ease 0s;
}
.evolution-contact-form__submit:hover {
	background: #6B5CF6;
	color: #fff;
	opacity: 0.9;
}
@media (max-width: 600px) {
	.evolution-contact-form__field {
		flex-basis: 100%;
	}
}

.evolution-apply-now .apply-now-forms {
	list-style: none;
	padding: 0;
}
.evolution-apply-now .apply-now-forms li {
	margin-bottom: 0.75rem;
}

/* Ported from legacy style.css:8069-8122 (.react_populars_topics
   .item__inner / ::before / :hover) - a purple top bar that's invisible
   until hover, plus a shadow lift. Scoped to .evolution-apply-now since
   .item__inner is a shared class name reused with different styling
   elsewhere (e.g. home-blocks.css's course-card .item__inner). */
.evolution-apply-now .item__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 40px 35px 35px;
	background: #f1f0fe;
	border: 2px solid rgba(15, 22, 41, 0.078);
	border-radius: 6px;
	transition: all 0.5s ease 0s;
}
.evolution-apply-now .item__inner::before {
	position: absolute;
	top: -3px;
	left: 0;
	right: 0;
	z-index: 1;
	width: 100%;
	height: 8px;
	border-top: 4px solid #6B5CF6;
	border-radius: 6px 6px 0 0;
	opacity: 0;
	transition: all 0.5s ease 0s;
	content: "";
}
.evolution-apply-now .item__inner:hover {
	border-color: #fff;
	box-shadow: 0 30px 50px 0 rgba(0, 15, 56, 0.1), inset 0 3px 0 0 rgba(42, 109, 245, 0.004);
}
.evolution-apply-now .item__inner:hover::before {
	opacity: 1;
}
.evolution-apply-now .item__inner h3 {
	margin: 0 0 15px;
}
/* .form-item/.form-item img had no size rule scoped to this page's block
   (only .evolution-forms-and-policies's narrower 20px override existed),
   so the icon rendered at its native SVG size. Ported from legacy
   style.css:4409-4413's base .form-item img rule - this page's wrapper is
   plain "enrolment-form-section react_populars_topics" (confirmed live on
   evolution.edu.au/enrolment-application-portal/), not the
   "forms-policies-section" variant, so the base 25px/26px value applies
   here, not the 20px one used on /forms-policies/. */
.evolution-apply-now .form-item {
	display: flex;
	gap: 10px;
	margin-bottom: 10px;
}
.evolution-apply-now .form-item img {
	height: 25px;
	min-width: 26px;
	object-fit: contain;
}
.evolution-apply-now .form-item a {
	text-decoration: none;
}
/* Legacy: .enrolment-form-section.react_populars_topics .item__inner
   a:hover { color: #D62B7B; text-decoration: underline !important; }
   (style.css:4405-4408, confirmed live) - the underline is removed by
   default above, but comes back (along with the pink hover color) on
   hover specifically. */
.evolution-apply-now .item__inner a:hover {
	color: #D62B7B;
	text-decoration: underline;
}

/* Pathway selector (evolution/apply-now-pathway) - ported from legacy
   style.css:4272-4516 (.overview-section-six), the click-to-switch
   category/staircase-graphic component. */
/* Deliberate gap above this section, not just the theme's generic 24px
   inter-block spacing - this is a single class selector against a
   :where(.is-layout-flow) > * rule (zero specificity by definition), so it
   wins outright regardless of source order. */
/* Confirmed live via legacy's actual HTML: this section's real class list
   is "enrollment-section overview-section-six pt---80 pb---80" - the
   pt---80/pb---80 utility classes (80px top/bottom padding) were dropped
   when this component was first built here, leaving the section with no
   internal top/bottom breathing room at all - what read as "overlapping
   the cards above" was this missing padding, not a positioning bug.
   Restored with the real value instead of the earlier ad-hoc
   margin-block-start:60px guess. */
.evolution-apply-now-pathway {
	padding-top: 80px;
	padding-bottom: 80px;
}
/* height:500px (fixed, not 100%/flex-stretch) - the previous height:100%
   relied on the row's flex-stretch to equalise this column with the image
   column, which only matches the CONTAINER heights, not necessarily the
   image's own visible pixels once object-fit:contain scales it to preserve
   its aspect ratio (letterboxing invisibly if the ratios don't line up
   exactly) - .overview-navigation has a real background colour, so any
   such gap on ITS side is always visible, while a gap on the image side
   isn't (transparent), producing the "nav taller than the image" look even
   when the two columns' boxes were technically the same height. An
   explicit, shared, fixed height on both sides (see .content-picture)
   sidesteps that entirely - guaranteed equal regardless of either side's
   own content/aspect ratio. */
.overview-section-six .overview-navigation {
	position: relative;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	height: 500px;
	padding: 30px;
	background: #f1f0fe;
	border-radius: 20px;
}
.overview-section-six .overview-navigation .navigation-btn {
	padding-bottom: 20px;
	margin-bottom: 20px;
	border-bottom: 1px solid #d8d8d6;
	color: #2D2D73;
	font-size: 22px;
	font-weight: 600;
	cursor: pointer;
}
.overview-section-six .overview-navigation .navigation-btn:last-child {
	padding-bottom: 0;
	margin-bottom: 0;
	border: none;
}
.overview-section-six .overview-navigation .navigation-btn::before {
	position: absolute;
	top: 0;
	right: -50px;
	display: none;
	width: 35px;
	height: 35px;
	background: #f1f0fe;
	transform: rotate(45deg);
	content: "";
}
.overview-section-six .overview-navigation .navigation-btn.active {
	position: relative;
	color: #D62B7B;
}
.overview-section-six .overview-navigation .navigation-btn.active::before {
	display: block;
}
/* transform:translateX intentionally dropped from legacy's version of this
   rule - transform is visual-only and doesn't affect layout, so the
   incoming item's box already occupies its correct column position while
   still being animated 100px to the left of it, visibly overlapping the
   adjacent .overview-navigation column for the duration of the 500ms
   transition (confirmed live via user screenshot: exactly this - the
   newly-selected pathway image overlapping the nav text beside it). Fading
   opacity/visibility alone gives the same "switching" feedback without a
   transform that can visually intrude into a neighbouring column. */
/* height:100% cascaded down (.overview-contents > .item > .content-picture)
   so the image side actually fills its column's full stretched height to
   match .overview-navigation's - previously nothing in this chain had a
   height rule, so col-xl-9 itself was correctly stretched by the flex row
   but its content just sat at its own natural (shorter) height inside that
   taller box, visually reading as "nav is taller than the image" even
   though the two COLUMNS were already the same height. */
.overview-section-six .overview-contents {
	height: 100%;
}
.overview-section-six .overview-contents .item {
	position: relative;
	visibility: visible;
	opacity: 1;
	height: 100%;
	transition: 500ms;
}
.overview-section-six .overview-contents .item.hide {
	height: 0;
	overflow: hidden;
	visibility: hidden;
	opacity: 0;
	transition: none;
}
/* height:500px matches .overview-navigation's own fixed height exactly (see
   that rule's comment) - the explicit anchor point for this column's
   hypothetical size, since .col-xl-9 itself has no height of its own and
   just wraps this content. */
.overview-section-six .content-picture {
	height: 500px;
	margin-bottom: 15px;
}
/* object-fit:contain (not cover, not auto) - scales the full image down/up
   to fit the available height (matching .overview-navigation's height via
   the cascade above) WITHOUT cropping any of it, unlike the old
   max-height:400px + object-fit:cover combination which center-cropped
   ~75px off the top and bottom (cutting off the course-category title
   text - the original mis-diagnosed "overlap" bug from earlier rounds).
   contain only ever letterboxes (blank space on one axis) if the aspect
   ratios don't match exactly; it never slices content off. */
.overview-section-six .content-picture img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	border-radius: 20px;
}
@media (max-width: 1400px) {
	.overview-section-six .overview-navigation .navigation-btn {
		font-size: 18px;
	}
	.overview-section-six .overview-navigation .navigation-btn::before {
		width: 25px;
		height: 25px;
		right: -50px;
	}
}
@media (max-width: 1200px) {
	/* height:auto (overriding the fixed 500px) - that fixed height only
	   exists to match this column against the image column when they sit
	   side by side; below this breakpoint the columns stack (100% width
	   each, see the col-xl-3/col-xl-9 media query), so there is no sibling
	   height left to match, and flex-direction also switches to row here,
	   where a fixed 500px would just be an oversized, mostly-empty bar. */
	.overview-section-six .overview-navigation,
	.overview-section-six .content-picture {
		height: auto;
	}
	.overview-section-six .overview-navigation {
		flex-direction: row;
		align-items: center;
		padding: 10px 30px !important;
		margin-bottom: 40px !important;
	}
	.overview-section-six .overview-navigation .navigation-btn {
		padding: 0 50px 0 0;
		margin: 0;
		border-bottom: none;
		border-right: 1px solid #d8d8d6;
		font-size: 18px;
	}
	.overview-section-six .overview-navigation .navigation-btn::before {
		top: 45px;
		right: unset;
		left: 30%;
		width: 25px;
		height: 25px;
	}
	.overview-section-six .overview-contents {
		margin-top: 40px;
	}
	.overview-section-six .overview-contents .item {
		justify-content: unset !important;
	}
}
@media (max-width: 992px) {
	.overview-section-six .overview-navigation {
		padding: 15px !important;
	}
	.overview-section-six .overview-navigation .navigation-btn {
		border: none;
		font-size: 14px;
	}
}
@media (max-width: 769px) {
	.overview-section-six .overview-navigation {
		flex-wrap: wrap;
		justify-content: center;
	}
	.overview-section-six .overview-navigation .navigation-btn {
		padding: 0 20px;
		font-size: 16px;
	}
	.overview-section-six .overview-navigation .navigation-btn::before {
		display: none !important;
	}
	.overview-section-six .overview-contents .item {
		display: flex;
		flex-direction: column;
	}
	.overview-section-six .overview-contents .item .content-picture {
		width: 100%;
		max-width: 100%;
		margin-right: 0;
		margin-bottom: 30px;
	}
}

/* Card + form-item rows - ported from legacy style.css:8069-8123 (base
   .react_populars_topics .item__inner: border, radius, padding, purple
   top-bar hover reveal) combined with style.css:4386-4432's
   .enrolment-form-section.react_populars_topics .item__inner overrides
   (lavender rgb(241,240,254) background, left-aligned text, stretch to
   equal column height) - confirmed live on evolution.edu.au/forms-policies/,
   which reuses the exact same "enrolment-form-section react_populars_topics
   forms-policies-section" class combo as the Enrolment Application Portal
   page's pathway-selector cards. */
.evolution-forms-and-policies .item__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	box-sizing: border-box;
	text-align: left;
	background: rgb(241, 240, 254);
	border: 2px solid rgba(15, 22, 41, 0.078);
	border-radius: 6px;
	padding: 40px 35px 35px;
	transition: all 0.5s ease 0s;
}
.evolution-forms-and-policies .item__inner:before {
	position: absolute;
	content: "";
	left: 0;
	right: 0;
	top: -3px;
	border-radius: 6px 6px 0 0;
	height: 8px;
	width: 100%;
	z-index: 1;
	border-top: 4px solid #6B5CF6;
	transition: all 0.5s ease 0s;
	opacity: 0;
}
.evolution-forms-and-policies .item__inner:hover {
	box-shadow: 0 30px 50px 0 rgba(0, 15, 56, 0.1), inset 0 3px 0 0 rgba(42, 109, 245, 0.004);
	border: 2px solid rgba(15, 22, 41, 0.08);
}
.evolution-forms-and-policies .item__inner:hover:before {
	opacity: 1;
}
.evolution-forms-and-policies .item__inner .react-title {
	font-size: 20px;
	font-weight: 700;
	line-height: 26px;
	margin: 0 0 15px;
}
.evolution-forms-and-policies .item__inner a:hover {
	color: #D62B7B;
	text-decoration: underline !important;
}
.evolution-forms-and-policies .form-item {
	display: flex;
	gap: 10px;
	margin-bottom: 10px;
	font-size: 14px;
	font-weight: 500;
}
.evolution-forms-and-policies .form-item a {
	text-decoration: none;
}
.evolution-forms-and-policies .form-item img {
	height: 20px;
	min-width: 20px;
	object-fit: contain;
}

.evolution-visit-campus .single-intro {
	margin-bottom: 2rem;
}
.evolution-visit-campus .visit-campus-link {
	display: inline-block;
	margin-top: 0.75rem;
	text-decoration: underline;
}

/* Our Agent List (page-id-228) and Visit Our Campus (page-id-168): same
   white-card-with-purple-hover-bar box style used on
   /our-education-partners-2/ (item__inner, ported from legacy style.css:
   8065-8123) applied to both pages' visit-campus-area/single-intro
   columns - user asked for /visit-our-campus-2/ to match /our-agent-list/'s
   look exactly. Still scoped by page id rather than bare
   .evolution-visit-campus so any future page reusing this same block
   without asking for the card treatment isn't silently affected. */
.page-id-228 .evolution-visit-campus .single-intro,
.page-id-168 .evolution-visit-campus .single-intro {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 20px;
	box-sizing: border-box;
	border: 2px solid rgba(15, 22, 41, 0.078);
	border-radius: 6px;
	padding: 40px 35px 35px;
	margin-bottom: 30px;
	transition: all 0.5s ease 0s;
}
/* Push the link to the same bottom level in both boxes regardless of how
   much the two boxes' body text differs in length (confirmed live: the
   left box's longer copy left its link sitting almost flush with the
   bottom border while the right box's shorter copy left a big gap). */
.page-id-228 .evolution-visit-campus .single-intro .visit-campus-link,
.page-id-168 .evolution-visit-campus .single-intro .visit-campus-link {
	display: inline-block;
	align-self: flex-start;
	margin-top: auto;
	box-sizing: border-box;
	width: auto;
	padding: 16px 24px;
	background: #6B5CF6;
	border-radius: 50px;
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	transition: background 0.3s ease 0s;
}
.page-id-228 .evolution-visit-campus .single-intro .visit-campus-link:hover,
.page-id-168 .evolution-visit-campus .single-intro .visit-campus-link:hover {
	background: #2D2D73;
	color: #fff;
}
.page-id-228 .evolution-visit-campus .single-intro:before,
.page-id-168 .evolution-visit-campus .single-intro:before {
	position: absolute;
	content: "";
	left: 0;
	right: 0;
	top: -3px;
	border-radius: 6px 6px 0 0;
	height: 8px;
	width: 100%;
	z-index: 1;
	border-top: 4px solid #6B5CF6;
	transition: all 0.5s ease 0s;
	opacity: 0;
}
.page-id-228 .evolution-visit-campus .single-intro:hover,
.page-id-168 .evolution-visit-campus .single-intro:hover {
	box-shadow: 0 30px 50px 0 rgba(0, 15, 56, 0.1), inset 0 3px 0 0 rgba(42, 109, 245, 0.004);
	border-color: #fff;
}
.page-id-228 .evolution-visit-campus .single-intro:hover:before,
.page-id-168 .evolution-visit-campus .single-intro:hover:before {
	opacity: 1;
}
.page-id-228 .evolution-visit-campus .single-intro h4,
.page-id-168 .evolution-visit-campus .single-intro h4 {
	color: #333333;
	font-size: 30px;
	font-weight: 600;
	line-height: 39px;
	margin: 0 0 14px;
}
/* Visit Our Campus only: the second column's content has no h4 (unlike the
   first column's "About the campus visit"), so its paragraph started
   flush with the box's own top padding instead of level with the first
   column's paragraph, which sits below that missing title's 26px line-height
   + 14px margin (40px). Nth-of-type(2) targets that column specifically -
   the row only ever has these two .single-intro divs. */
.page-id-168 .evolution-visit-campus .single-intro:nth-of-type(2) {
	padding-top: 100px;
}