/* ===================================
   Footer call to action: the large closing line with its spinning asterisk. Script: script.mjs.
=================================== */

.section_footer_call_to_action .section_description {
	max-width: unset;
	margin-bottom: 40px;
	font-weight: 300;
	letter-spacing: -0.5px;
}

.section_footer_call_to_action.action-style2 .section_description {
	max-width: 830px;
}
.section_footer_call_to_action.action-style2.about-cta .section_description {
	max-width: 700px;
}
.section_footer_call_to_action.action-style2 .section_title {
	margin-bottom: 20px;
	left: -2px;
	position: relative;
}

.section_footer_call_to_action.action-style2 .container {
	display: flex;
	justify-content: center;
	gap: 45px;
	position: relative;
}

/* the asterisk: drawn by ::before until blocks/footer-call-to-action/script.mjs swaps in a real
   element (.cta-asterisk), so its scroll spin restyles only itself, not the whole section */
.section_footer_call_to_action.action-style2 .container.has-asterisk-el::before {
	content: none;
}
.section_footer_call_to_action.action-style2 .container::before,
.section_footer_call_to_action.action-style2 .cta-asterisk {
	content: "\e804";
	font-family: "excentric";
	font-size: var(--wp--preset--font-size--x-large-130);
	display: block;
	transition: 0.3s var(--ease-out);
	transition-property: opacity, transform, filter;
	color: var(--wp--preset--color--darkgreen);
	margin-top: -30px;
}

@media only screen and (max-width: 768px) {
	.section_footer_call_to_action.action-style2 .section_title {
		margin-bottom: 18px;
	}
	.section_footer_call_to_action.action-style2 .container {
		gap: 30px;
	}
}

@media only screen and (max-width: 560px) {
	.section_footer_call_to_action.action-style2 .container {
		gap: 15px;
		flex-direction: column;
	}
}