:root {
	--clr-primary: #17A187; /* #32AF8E; */
	--clr-primary-hsl: hsl(169, 75%, 36%); /* #17A187 */ /* hsl(164, 56%, 44%); */ /* #32AF8E */
	--clr-primary-rgb: 23 161 135; /* #17A187 :: 50, 175, 142 - #32AF8E */
	--clr-content: hsl(218, 6%, 27%); /* #42454A */
	--clr-content-rgb: 65, 68, 73;
	--clr-dark: 59, 59, 58; /* #3C3C3B */
	--clr-secondary: #16223A;

	--fs-20: 2rem;
	--fs-22: 2.2rem;
	--fs-28: 2.8rem;
	--fs-30: 3rem;
	--fs-32: 3.2rem;
	--fs-34: 3.4rem;
	--fs-36: 3.6rem;
	--fs-38: 3.8rem;
	--fs-48: 4.8rem;
	--fs-56: 5.6rem;
	--fs-70: 7rem;
}

html {
	font-size: 62.5%;
}

body {
	margin: 0;
	font-family: 'Cera Pro', sans-serif;
	font-size: 1.6rem;
	color: var(--clr-content);
}

@media screen and (min-width: 900px) {
	body {
		font-size: 2.6rem;
	}
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

.wrapper {
	--gutter: 142px;

	max-width: calc(1920px - calc(var(--gutter) * 2));
	margin-inline: auto;
}

.relative {
	position: relative;
	overflow: hidden;
}

header {
	display: grid;
	grid-template-columns: 1fr 1fr;
	margin-bottom: 2.5rem;
}

@media screen and (min-width: 900px) {
	header {
		height: 155px;
		grid-template-rows: repeat(3, 1fr);
		grid-template-columns: 40% 60%;
		place-items: end;
		margin-top: 2rem;
	}
}

.logo-wrapper {
	grid-column: 1 / 2;
}

.logo-header {
	margin: 20px;
}

.tel-wrapper {
	grid-column: 2 / 3;
	color: var(--clr-primary);
	font-size: 2.4rem;
}

.tel-wrapper img {
	width: 21px;
}

.tel-wrapper a {
	font-weight: bold;
	color: var(--clr-primary);
	text-decoration: none;
	transition: color .3s ease-in;
}

.tel-wrapper a:hover {
	color: var(--clr-content);
}

header form {
	grid-column: 2 / 3;
}

header nav {
	grid-column: 2 / 3;
}

@media screen and (min-width: 900px) {
	.logo-wrapper {
		grid-row: 1 / -1;
		grid-column: 1 / 2;
		place-self: start;
	}

	.logo-header {
		width: 500px;
		height: 130px;
		margin: 20px 0 0;
	}

	.tel-wrapper {
		grid-row: 1 / 2;
		grid-column: 2 / 3;

		display: flex;
		gap: 1rem;
		align-items: center;
	}

	header form {
		grid-row: 2 / 3;
		grid-column: 2 / 3;
	}

	header nav {
		grid-row: 3 / 4;
		grid-column: 2 / 3;
		width: 100%;
	}

	header ul {
		list-style: none;
		display: flex;
		justify-content: space-between;
		margin: 0;
	}

	header li a {
		text-decoration: none;
		font-size: 2rem;
		color: var(--clr-content);
		transition: color .3s ease-in;
	}

	header li a:hover {
		color: var(--clr-primary);
	}
}

.swiper-hero {
	width: 100%; /*1920px*/
	height: 890px;
}

.swiper-pagination-bullet {
	background-color: #FFF;
	width: 20px;
	height: 20px;
	margin-left: 10px;
	margin-bottom: 2rem !important;
	opacity: .75;
}

.swiper-pagination-bullet-active {
	background-color: transparent;
	width: 20px;
	height: 20px;
	border: 2px solid #FFF;
	margin-left: 2px !important;
}

.hero {
	--heroBGC: transparent;
	--heroBG: none;

	margin-bottom: 10rem;
	color: #FFF;
	max-width: 1920px;
	margin-inline: auto;
	min-height: 415px;
	background-color: var(--heroBGC);
	background-image: var(--heroBG);
}

.hero__banner {
	min-height: 41.5rem;
}

.hero__banner--image {
	min-height: 89rem;
}

.swiper-hero .swiper-slide img {
	width: 100%;
	height: auto;
}

.swiper-slide .faux-h2 {
	position: absolute;
	z-index: 1;
	top: 50%;
	left: 50%;
	color: #FFF;
	transform: translate(-50%, -50%);
	font-size: 7rem;
	text-align: center;
	/* max-width: 40%; */
	display: block;
}

.swiper + .pagination-wrapper {
	position: absolute;
	top: 65%;
	left: 0;
	right: 0;
	z-index: 1;
}

.hero__made-uk {
	
	color: #16223A;
	text-transform: uppercase;
	letter-spacing: .7rem;
	font-size: 1.4rem;
}

.hero__made-uk::before,
.hero__made-uk::after {
	content: '';
	position: absolute;
	top: 6px;
	width: 155px;
	height: 4px;
	background-color: #16223A;
}

.hero__made-uk::before {
	left: -180px;
}

.hero__made-uk::after {
	right: -180px;
}