@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@100;400&display=swap');

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

a {
	text-decoration: none;
}

html {
	scroll-behavior: smooth;
}

@font-face {
	font-family: Aquire;
	src: url(../../fonts/Aquire.otf);
}


@font-face {
	font-family: AquireLight;
	src: url(../../fonts/AquireLight.otf);
}


@font-face {
	font-family: AquireBold;
	src: url(../../fonts/AquireBold.otf);
}

.page {
	width: 100%;
	padding: 5rem clamp(.8rem, 1.5vw, 2rem);
}

.content {
	gap: 4rem;
}

.section {
	max-width: 560px;
	margin: 0 auto;
}

.text-wrapper {
	height: 100%;
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.section-left-align-text {
	text-align: left !important;
}

.text-wrapper .title-text {
	font-size: clamp(.8rem, 3.5vw, 1.2rem);
	width: 100%;
	line-height: clamp(.9rem, 3.8vw, 1.3rem);
}

.text-wrapper .text {
	font-weight: 500;
	font-family: Aquire, sans-serif;
	font-size: clamp(.5rem, 2.1vw, 1rem);
	letter-spacing: .3px;
	width: 100%;
	line-height: clamp(.7rem, 2.3vw, 1.1rem);
}

.section-3-overlay {
	transform: translateY(-15%);
}

.bordered-img-wrapper {
	border: 1px solid #282828;
	height: 64%;
	position: relative;
	width: 100%;
}

.section4-img2-wrapper {
	position: absolute;
	width: 180%;
	right: .8rem;
	top: 50%;
	transform: translateY(-50%);
}

.section-5-text-wrapper {
	justify-content: end;
	text-align: start;
}

.section5-overlay {
	transform: translateY(-45%);
}

.section1-iframe {
	aspect-ratio: 310/218;
}

.section2-iframe {
	aspect-ratio: 406/294;
}

.section3-iframe {
	aspect-ratio: 525/333;
}

.section4-iframe {
	aspect-ratio: 495/296;
}

.section5-iframe {
	aspect-ratio: 575/256;
}

.section6-iframe {
	aspect-ratio: 516/209;
}

.back-btn {
	position: absolute;
	left: clamp(1rem, 3vw, 1.5rem);
	top: clamp(1rem, 3vw, 1.5rem);
}

.back-btn svg {
	height: clamp(1.2rem, 2vw, 2rem);
	width: clamp(1.2rem, 2vw, 2rem);
}

@media only screen and (min-width: 768px) {
	.content {
		gap: 0;
	}

	.page {
		padding: 4rem clamp(.8rem, 1.5vw, 2rem) 0;
	}

	.section {
		margin-block: 4.5rem;
	}

	.section1, .section3, .section5 {
		padding-right: 1rem;
	}

	.section2, .section4, .section6 {
		padding-left: 1rem;
	}

	.text-wrapper .title-text {
		font-size: clamp(.7rem, 3vw, 1.1rem);
		line-height: clamp(.8rem, 3.3vw, 1.2rem);
	}

	.text-wrapper .text {
		font-size: clamp(.5rem, 1.4vw, 1rem);
		line-height: clamp(.6rem, 1.5vw, 1.1rem);
	}

}

@media only screen and (min-width: 992px) {

	body {
		overflow-y: hidden;
	}

	.content {
		aspect-ratio: 1400/654;
		height: 100svh;
		margin: 0 4rem;
	}

	.page {
		width: max-content;
		padding: 0;
	}

	.section {
		margin: 0 1rem;
		max-width: 100%;
	}

	.section1, .section3, .section5 {
		padding-right: 0;
		height: 50svh;
	}

	.section2, .section4, .section6 {
		padding-left: 0;
		height: 50svh;
	}

	.section1, .section2, .section3 {
		 padding-top: 2rem;
	 }

	.section4, .section5, .section6 {
		padding-bottom: 2rem;
	}

	.text-wrapper .title-text {
		font-size: 1.1vw;
		line-height: 1.2em;
	}

	.text-wrapper .text {
		font-size: .65rem;
		line-height: 1.2em;
		letter-spacing: .7px;
	}

}