@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: normal;
	font-display: swap;
	src: url('/fonts/Montserrat/Montserrat.woff2') format('woff2');
}
@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('/fonts/Montserrat/Montserrat-Bold.woff2') format('woff2');
}
@font-face {
	font-family: 'GrapeNuts';
	font-style: normal;
	font-weight: normal;
	font-display: swap;
	src: url('/fonts/GrapeNuts/GrapeNuts.woff2') format('woff2');
}
@font-face {
	font-family: 'Limelight';
	font-style: normal;
	font-weight: normal;
	font-display: swap;
	src: url('/fonts/Limelight/Limelight.woff2') format('woff2');
}

:root {
	--background: #f9efdf;
	--orange-light: #f9d8a6;
	--orange-dark: #f19065;
	--blue-light: #cbe1dd;
	--blue-medium: #539897;
	--blue-dark: #297170;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: Montserrat, Arial, Helvetica, sans-serif;
}

html,
body {
	max-width: 100%;
	overflow-x: hidden;
	background-color: var(--background);
	color: var(--blue-dark);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: Limelight, Arial, Helvetica, sans-serif;
}

a {
	text-decoration: none;
}

button {
	cursor: pointer;
}

.montserrat {
	font-family: Montserrat, Arial, Helvetica, sans-serif;
}
.grapenuts {
	font-family: GrapeNuts, Arial, Helvetica, sans-serif;
}
.limelight {
	font-family: Limelight, Arial, Helvetica, sans-serif;
}

& .strong {
	font-weight: bold;
}

.panel {
	position: relative;
	width: 100vw;

	padding: 10vh 5vw;
	display: flex;
	justify-content: center;
	align-items: center;
	& .background-image {
		position: absolute;
		width: 100%;
		height: 100%;
		z-index: 0;
		& .icon {
			position: absolute;
			fill: var(--blue-dark);
			opacity: 0.1;
		}
	}
	& .panel-inner {
		position: relative;
		width: 100%;
		max-width: 1440px;
		display: flex;
		flex-direction: column;
		gap: 5vh;
		& .buttons-container {
			z-index: 1;
		}
	}
	@media (min-width: 1024px) {
		height: 100vh;
	}
}

& .title-container {
	flex: 1;
	display: flex;
	gap: 30%;
	& .text {
		flex: 1;
	}
	& .title {
		flex: 2;
		font-size: 5rem;
		&.right {
			text-align: right;
		}
	}
	& .text {
		flex: 1;
		font-size: 2rem;
	}
	@media (max-width: 768px) {
		flex-direction: column;
		&.mobile-reverse {
			flex-direction: column-reverse;
		}
		& .title {
			font-size: 4rem;
		}
	}
}

.center-flex {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 1rem;
}

.custom-button {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0.5rem;
	width: 250px;
	height: 50px;
	font-weight: 600;
	border: none;
	border-radius: 40px;
	& .icon {
		width: 2rem;
		fill: currentColor;
	}
	&.transparent {
		background-color: transparent;
		color: var(--background);
	}
	&.orange {
		background-color: var(--orange-dark);
		color: var(--background);
	}
	&.orange-light {
		background-color: var(--orange-light);
		color: var(--background);
	}
	&.light {
		background-color: var(--blue-light);
		color: var(--blue-dark);
	}
	&.dark {
		background-color: var(--blue-dark);
		color: var(--background);
	}
	&.background {
		background-color: var(--background);
		color: var(--blue-dark);
	}
}