/* BgHeader styles */
.bg-header {
	width: 100%;
	height: 100vh;
	/* max-height: 740px; */
	min-height: calc(var(--spacing) * 69);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	/* justify-content: center; */
	align-items: center;
	position: static;
}

.bg-header #bg {
	width: 100%;
	height: 100vh;
	/* max-height: 740px; */
	min-height: calc(var(--spacing) * 69);
	position: absolute;
	top: 0;
	z-index: -1;
}

.bg-header h1 {
	width: max-content;
	height: max-content;
	margin: calc(var(--spacing) * 10) 0 calc(var(--spacing) * 18) 0;
}

.quote-wrapper {
	width: max-content;
	height: auto;
	position: relative;
	display: flex;
	justify-content: center;
}

.quote-wrapper #logo-4 {
	width: calc(var(--spacing) * 47);
	height: calc(var(--spacing) * 40);
	position: absolute;
	right: calc(var(--spacing) * -11);
	bottom: 0;
	opacity: 0.4;
}

.quote-wrapper .quote {
	position: relative;
	width: 100%;
	top: 0;
	padding: 0 calc(var(--spacing) * 2) calc(var(--spacing) * 19) calc(var(--spacing) * 2);
	margin: 0;
	box-sizing: border-box;
	text-align: center;
}

@media only screen and (max-width: 1286px) {
	.quote-wrapper .quote {
		font-size: 2rem;
	}

	.quote-wrapper #logo-4 {
		width: calc(var(--spacing) * 37);
		height: calc(var(--spacing) * 30);
		right: calc(var(--spacing) * -9);
	}
}

@media only screen and (max-width: 1046px) {
	.quote-wrapper {
		width: fit-content;
	}

	.quote-wrapper #logo-4 {
		width: calc(var(--spacing) * 28);
		height: calc(var(--spacing) * 22);
		right: 0;
		bottom: 25%;
	}

	.bg-header h1 {
		margin: calc(var(--spacing) * 10) 0 calc(var(--spacing) * 8) 0;
	}
	@media only screen and (min-height: 866px) {
		.bg-header {
			height: 866px;
		}

		.bg-header #bg {
			height: 866px;
		}
	}
}

@media only screen and (max-width: 910px) {
	.quote-wrapper #logo-4 {
		width: calc(var(--spacing) * 28);
		height: calc(var(--spacing) * 22);
		right: 15%;
		bottom: -10%;
	}
}

@media only screen and (max-width: 518px) {
	.bg-header h1 {
		font-size: 5.5rem;
		margin: calc(var(--spacing) * 10) 0 calc(var(--spacing) * 4) 0;
	}

	.quote-wrapper .quote {
		padding: 0 var(--spacing) calc(var(--spacing) * 19) var(--spacing);
		font-size: 1.5rem;
	}
}

@media only screen and (max-width: 430px) {
	.bg-header h1 {
		font-size: 4.5rem;
	}
	.bg-header {
		height: 95vh;
	}

	.quote-wrapper #logo-4 {
		width: calc(var(--spacing) * 26);
		height: calc(var(--spacing) * 21);
		right: calc(50% - calc(var(--spacing) * 13));
		bottom: -10%;
	}

	@media only screen and (max-height: 680px) {
		.bg-header {
			height: calc(var(--spacing) * 85);
		}

		.bg-header #bg {
			height: calc(var(--spacing) * 85);
		}
	}
}

@media only screen and (max-width: 370px) {
	.bg-header h1 {
		font-size: 4rem;
	}
}

@media only screen and (max-width: 316px) {
	.bg-header h1 {
		font-size: 3rem;
	}
}

@media only screen and (max-height: 680px) {
	.quote-wrapper #logo-4 {
		width: calc(var(--spacing) * 22);
		height: calc(var(--spacing) * 18);
		right: calc(50% - calc(var(--spacing) * 11));
		bottom: 5%;
	}
}