/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
:root,:host {
}

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

h1,.h1 {
	font-size: var(--text-4xl);
	line-height: var(--tw-leading,var(--text-4xl--line-height));
}

@media (min-width:64rem) {
	h1,.h1 {
		font-size: 64px;
	}
}

h2,.h2 {
	font-size: 30px;
}

@media (min-width:64rem) {
	h2,.h2 {
		font-size: 40px;
	}
}

h3,.h3 {
	font-size: 26px;
}

@media (min-width:64rem) {
	h3,.h3 {
		font-size: 32px;
	}
}

h4,.h4 {
	font-size: 22px;
}

@media (min-width:64rem) {
	h4,.h4 {
		font-size: 28px;
	}
}

h5,.h5 {
	font-size: var(--text-xl);
	line-height: var(--tw-leading,var(--text-xl--line-height));
}

@media (min-width:64rem) {
	h5,.h5 {
		font-size: var(--text-2xl);
		line-height: var(--tw-leading,var(--text-2xl--line-height));
	}
}

h6,.h6 {
	font-size: var(--text-base);
	line-height: var(--tw-leading,var(--text-base--line-height));
}

@media (min-width:64rem) {
	h6,.h6 {
		font-size: var(--text-xl);
		line-height: var(--tw-leading,var(--text-xl--line-height));
	}
}

.btn {
	align-items: center;
	gap: calc(var(--spacing) * 2);
	width: 100%;
	padding-inline: calc(var(--spacing) * 8);
	padding-block: calc(var(--spacing) * 6);
	font-family: var(--font-heading);
	font-size: var(--text-base);
	line-height: var(--tw-leading,var(--text-base--line-height));
	border-radius: 3.40282E+38px;
	display: flex;
}

@media (min-width:64rem) {
	.btn {
		width: auto;
	}
}

.btn.primary {
	background-color: var(--color-main-navy);
	color: var(--color-main-beige);
}

@media (hover:hover) {
	.btn.primary:hover {
		background-color: #000073cc;
	}
	
	@supports (color:color-mix(in lab,red,red)) {
	.btn.primary:hover {
		background-color: color-mix(in oklab, var(--color-main-navy) 80%, transparent);
	}
}

	
}

.btn.secondary {
	background-color: var(--color-main-yellow);
	color: var(--color-main-navy);
}

.btn.beige {
	background-color: var(--color-main-beige);
	color: var(--color-main-navy);
}

@media (hover:hover) {
	.btn.beige:hover {
		background-color: #f8e7d5cc;
	}
	
	@supports (color:color-mix(in lab,red,red)) {
	.btn.beige:hover {
		background-color: color-mix(in oklab, var(--color-main-beige) 80%, transparent);
	}
}

	
}

.btn.transparent {
	background-color: #0000;
}

.btn.arrow:after {
	content: "→";
}