.hero {
	background-image: url("../images/bg1.jpg");
	background-size: cover;
	background-position-y: center;
}

.hero-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	padding-bottom: 2em;
}

.hero-icon {
	position:relative;
	width:100%;
	padding-bottom: 1em;
	& svg {
		display: block;
		
		width: 50%;
		height: fit-content;
		margin: 0 auto;
		stroke: color-mix(in srgb, var(--highlight), transparent 70%);
		stroke-width: 10;
	}
	& span {
		white-space: nowrap;
		color:var(--highlight);
		font-size: clamp(16px, 5vw, 400%);
		font-family: Roboto Slab, serif;
		font-weight: bold;
		display:block;
		position:absolute;
		top:50%;
		left:50%;
		transform: translate(-50%, +10%);
	}
}

.hero-slogan {
	padding: 1.5em 1em;
}

.hero-action {
	display: flex;
	flex-wrap: wrap;
	gap: calc(0.5 * var(--gap-standard));
	align-items: center;
    justify-content: center;
	padding: 3em 0em;
}

.hero h1 {
	font-family: Roboto Slab, serif;
	font-size: clamp(16px, 5vw, 250%);
	font-weight: bold;
	text-align:center;
	text-transform:uppercase;
	color:var(--container-color);
	line-height:1.3;
}

.hero-button {
	font-size: 120%;
	display: inline-block;
	padding: 0.8em 1.6em;
	color: var(--highlighted);
	border:1px solid var(--highlighted);
	font-weight: bold;
	border-radius: 10em;
	background-color: color-mix(in srgb, var(--highlight), transparent 70%);
	transition: all 0.2s ease-in-out;
	&:hover {
		background-color: color-mix(in srgb, var(--highlight), transparent 50%);
	}
}

@media (width <= 800px) {
	.hero-button {
        font-size: 100%;
    }
}

.hero-bg-blur {
	background-color: rgb(0 0 0 / 70%);
  	/*backdrop-filter: blur(5px);*/
}