/*** Fonts ***/
@font-face {
	font-family: 'Cubano';
	src: url('fonts/cubano/Cubano-Regular.woff2') format('woff2'),
		url('fonts/cubano/Cubano-Regular.woff') format('woff'),
		url('fonts/cubano/Cubano-Regular.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Houschka';
	src: url('fonts/houschka/HouschkaMedium.woff2') format('woff2'),
		url('fonts/houschka/HouschkaMedium.woff') format('woff'),
		url('fonts/houschka/HouschkaMedium.ttf') format('truetype');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
/*** END Fonts ***/

/*** Default ***/
:root {
	--h1-fs: clamp(40px, 6vw, 100px);
	--h2-fs: clamp(35px, 4vw, 70px);
	--content-fs: clamp(14px, 4vw, 18px);
	--red: #E31F12;
	--darkgrey: #262626;
	--lightgrey: #ABABAB;
}
.section {
	max-width: 1920px;
	margin: clamp(25px, 5vw, 50px) auto;
	overflow: hidden;
	position: relative;
}
.section h1,
.section h2 {
	font-family: 'Cubano';
	color: var(--darkgrey);
	text-align: center;
	font-weight: 900;
	line-height: 1em;
}
.section h1 {
	font-size: var(--h1-fs);
	margin: 0 auto;
	max-width: 750px;
	position: relative;
}
.section h2 {
	font-size: var(--h2-fs);
}
.section h3,
.section p, 
.section span {
	font-family: 'Houschka';
	line-height: 1.25em;
}
.section .row {
	display: flex;
	position: relative;
	max-width: 1440px;
	margin: auto;
	flex-wrap: wrap;
	justify-content: center;
	width: 95%;
	padding: 0 2.5%;
}
.section .row.col-1 {
	justify-content: unset;
}
.section .row.col-2 > div {
	width: 50%;
	position: relative;
	min-width: clamp(275px, 50%, 465px);
	flex-grow: 1;
}
/*** END Default ***/

/*** Header Section ***/
.sec-header {
	background-position: 65%;
	background-repeat: no-repeat;
	background-size: cover;
	display: flex;
	flex-direction: column;
	height: clamp(350px, 50vw, 900px);
	justify-content: end;
	margin-top: 0;
	overflow: hidden;

	.row {
		justify-content: center;
		margin-left: 0;
		max-width: 50%;
		padding: 0;
		width: 100%;

		.column {
			text-align: center;

			.header-logo {
				max-width: clamp(300px, 85%, 500px);
				padding-left: 1em;
			}
		}
	}
}
@media all and (min-width: 981px) {
	.sec-header {
		min-height: 750px;
	}
}
@media all and (max-width: 768px) {
	.sec-header {
		background-position: center;
		height: clamp(350px, 60vh, 700px);

		.row {
			margin-bottom: 0;
			margin-left: auto;
			max-width: 450px;
		}
	}
}
/*** END Header Section ***/

/*** Section 1 ***/
.sec-1 .row {
	align-items: center;
	margin-bottom: clamp(25px, 5vw, 50px);
	overflow: visible;

	&> div {

		&.column-left {
			text-align: center;
			width: 40%;
		}
		.image {
			width: 100%;
		}
		h2 {
			color:  var(--red);
			font-weight: 700;
			line-height: 1;
			margin: auto;
			padding: clamp(35px, 5vw, 75px) 0 clamp(35px, 5vw, 75px) 25px;
			text-align: left;
			text-transform: uppercase;
		}
	}
}
@media all and (max-width: 980px) {
	.sec-1 .row {
		flex-direction: column-reverse;
		padding: 0;
		width: 100%;
	}
	.sec-1 .row .column-left {
		width: clamp(300px, 100%, 980px) !important;
	}
	.sec-1 .row > div.column-right {
		margin: auto;
		width: 100%;
	}
	.sec-1 .row > div.column-right h2 {
		padding: 40px 50px;
	}
	.sec-1 .row > div h2 {
		font-size: calc(var(--h2-fs) + 5px);
	}
	.sec-1 .row > div .image {
		width: clamp(300px, 85%, 650px);
		margin: auto;
	}
}
/*** END Section 1 ***/

/*** Video Section ***/
.sec-vid {
	overflow: visible;
	text-align: center;

	&::before {
		background-color: var(--lightgrey);
		content: "";
		height: calc(100% - clamp(50px, 10vw, 100px));
		left: 0;
		position: absolute;
		top: clamp(25px, 5vw, 50px);
		width: 100%;
	}
	.video_box {
		aspect-ratio: 16 / 9;
		background-color: var(--darkgrey);
		filter: drop-shadow(0 0 5px #353535);
		margin: -50px auto;
		position: relative;
		width: clamp(275px, 90%, 1080px);
		z-index: +1;

		.video_single {
			line-height: 0;
		}
		video {
			aspect-ratio: 16 / 9;
			object-fit:cover;
			width: 100%;
		}
	}
	.video_overlay {
		background-position: 50%;
		background-repeat: no-repeat;
		background-size: cover;
		cursor: pointer;
		height: 100%;
		left: 0;
		position: absolute;
		top: 0;
		width: 100%;
		z-index: +1;

		&::before {
			content: "";
			background-color: rgba(0,0,0,.4);
			height: 100%;
			left: 0;
			opacity: 0;
			position: absolute;
			top: 0;
			transition: all ease-in-out .3s;
			width: 100%;
		}
		&:hover::before {
			opacity: 1;
		}
		i {
			align-items: center;
			aspect-ratio: 1;
			background-color: rgba(255,255,255,.6);
			border-radius: 100%;
			display: flex;
			filter: drop-shadow(0 0 5px #000);
			justify-content: center;
			left: 50%;
			position: absolute;
			top: 50%;
			transform: translate(-50%, -50%);
			width: clamp(85px, 20vw, 200px);

			&::before {
				border-color: transparent transparent transparent #FFF;
				border-style: solid;
				border-width: clamp(25px, 3vw, 45px) 0 clamp(25px, 3vw, 45px) clamp(47px, 5vw, 84px);
				box-sizing: border-box;
				content: "";
			}
		}
	}
}
/*** END Video Section ***/

/*** Section 2 ***/
.sec-2 {
	padding: clamp(75px, 5vw, 100px) 0 0;

	.row.col-2 {
		align-items: center;
		flex-wrap: wrap-reverse;
		gap: 35px;
		max-width: 1280px;

		&> div.column-left {
			max-width: 400px;
			padding-bottom: 30px;
		}
	}
	.column-left > a {
		display: block;
		margin: auto;
		max-width: 400px;
		position: relative;
		transition: all ease-in-out .3s;

		&:hover {
			scale: .95;
		}
		img {
			height: auto;
			vertical-align: top;
			width: 100%;
		}
	}
	.text-content {
		color: var(--darkgrey);
		font-size: calc(var(--content-fs) + 5px);
		font-weight: 400;

		a {
			background: var(--red);
			border-radius: 10px;
			color: #fff;
			display: inline-block;
			font-family: 'Cubano';
			font-weight: 700;
			margin-top: 25px;
			padding: 10px clamp(25px, 5vw, 50px);
			transition: all ease-in-out .3s;

			&:hover {
				scale: .95;
			}
		}
	}
}
/*** END Section 2 ***/

/*** How To Section ***/
.sec-how-to {
	h2 {
		margin: auto;
	}
	.row.how-to {
		gap: 35px;
		justify-content: center;
		padding: 15px 0;
		overflow: visible;

		&::before, &::after {
			content: unset;
		}
	}
	.single-how-to {
		position: relative;
		transition: all ease-in-out .3s;

		&:hover {
			scale: .95;
		}
		&> a {
			aspect-ratio: 4/5;
			background-color: #fff;
			display: block;
			filter: drop-shadow(0 0 5px #353535);
			padding: 15px;
			position: relative;
			width: clamp(300px, 40vw, 300px);

			.thumbnail {
				background-position: 50%;
				background-repeat: no-repeat;
				background-size: cover;
				cursor: pointer;
				height: calc(100% - 30px);
				left: 15px;
				position: absolute;
				top: 15px;
				width: calc(100% - 30px);
				z-index: +1;
			}
		}
	}
}
/*** END How To Section ***/

/*** Section 3 ***/
.sec-3 {
	padding: clamp(25px, 10vw, 100px) 0;

	.row {
		align-items: center;

		&> div {
			text-align: center;

			&.column-left {
				min-width: 40%;
				width: 40%;
			}
			&.column-right {
				max-width: 625px;
				width: 60%;
			}
			img {
				width: clamp(275px, 100%, 550px);
			}
			h2 {
				text-align: left;
			}
		}
		.details {
			display: flex;
			flex-wrap: wrap;
			gap: 25px clamp(35px, 1vw, 100px);
			justify-content: center;
			margin-top: 35px;

			img {
				width: clamp(100px, 10vw, 125px);
			}
		}
	}
}
@media all and (max-width: 980px) {
	.sec-3 .row {
		.column-left {
			width: 100% !important;
		}
		h2 {
			hyphens: auto;
			margin-top: 50px;
			text-align: center !important;
			word-wrap: break-word;
		}
		img {
			max-width: 400px;
		}
	}
}
/*** END Section 3 ***/

/*** Section 4 ***/
.sec-4 .column {
	margin: auto;
	text-align: center;

	a {
		background: var(--red);
		border-radius: 10px;
		color: #fff;
		display: inline-block;
		font-family: 'Cubano';
		font-size: calc(var(--content-fs) + 4px);
		font-weight: 700;
		margin-top: 25px;
		padding: 10px clamp(25px, 5vw, 50px);
		transition: all ease-in-out .3s;

		&:hover {
			color: #fff;
			scale: .95;
		}
	}
}
/*** END Section 4 ***/