/* Homepage specific styling goes here. Excluded on all subpages */
/* For most builds, this stylesheet should be wiped and started fresh */

/* hero */
.hero {
	margin-top: 77px;
	position: relative;
	margin-bottom: 40px;
	background-color: var(--color-gray);
	background-image: linear-gradient(45deg, rgba(248, 248, 248, 1) 0%, rgba(237, 237, 237, 1) 100%);
}

.hero h1 {
	line-height: 1.1;
	font-weight: 200;
	font-size: 2.28rem;
	margin-bottom: 30px;
	font-family: var(--font-family-heading);
}

.hero h1 em {
	font-weight: bold;
}

.hero h1 span {
	display: block;
	font-size: 1rem;
	margin-top: 11px;
	font-weight: 300;
	font-family: var(--font-family-body);
}

.hero .button {
	font-size: 0.75rem;
}

.hero-info {
	text-align: center;
	padding-top: 50px;
	padding-bottom: 330px;
}

.hero-videos {
	pointer-events: none;
	position: relative;
}


.hero-videos {
	left: 50%;
	bottom: -50px;
	min-width: 553px;
	min-height: 416px;
	position: absolute;
	transform: translateX(-50%);
}

.hero-video-1,
.hero-video-2 {
	overflow: hidden;
	position: absolute;
}

.hero-video-1:before,
.hero-video-2:before {
	top: 0;
	left: 0;
	content: '';
	width: 100%;
	height: 100%;
	display: block;
	position: absolute;
	mix-blend-mode: screen;
}

.hero-video-1:before {
	background-color: var(--color-primary);
}

.hero-video-2:before {
	background-color: var(--color-secondary);
}

.hero-video-1 video,
.hero-video-2 video {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
/* 	object-position: center; */
	object-position: left;
}

.hero-video-2 video{
	object-position: center;
}

.hero-video-1 {
	left: 0;
	top: 36px;
	width: 244px;
	height: 262px;
	clip-path: path('M169.705,260.636l71.373-98.7,3.809-5.39L162.289,48.4,0,13.889c43.234,60.82,126.587,187.159,169.705,246.747');
}

.hero-video-2 {
	right: 0;
	bottom: 0;
	width: 423px;
	height: 415px;
	clip-path: path('M423.045,0L231.553,60.129,127.2,207.553,52.034,311.5,127.2,415.455,200.766,311.5,421.468,3.639A8.878,8.878,0,0,0,423.045,0Z');
}

@media screen and (min-width: 768px) {
	.hero {
		margin-top: 0;
	}

	.hero h1 {
		font-size: 4.5rem;
		margin-bottom: 40px;
	}

	.hero h1 span {
		margin-top: 17px;
		font-size: 1.688rem;
	}

	.hero .button {
		font-size: 1rem;
	}

	.hero-holder {
		display: flex;
		height: 600px;
		padding-top: 80px;
		align-items: center;
	}

	.hero-info {
		padding: 0;
		width: 520px;
		text-align: unset;
	}

	.hero-videos {
		top: 55%;
		left: 50%;
		bottom: auto;
		margin-left: 350px;
		position: absolute;
		transform: translate(-50%, -50%);
	}
}

@media screen and (min-width: 1025px) {
	.hero-holder {
		height: 756px;
		padding-top: 120px;
	}

	.hero-videos {
		top: 0;
		min-width: 1217px;
		min-height: 915px;
		margin-left: 550px;
		transform: translateX(-50%);
	}

	.hero-video-1 {
		left: 0;
		top: 107px;
		width: 539px;
		height: 557px;
		clip-path: path('M373.771,557.342l157.2-217.381,8.39-11.871L357.436,89.894,0,13.889C95.221,147.843,278.8,426.1,373.771,557.342');
	}

	.hero-video-2 {
		right: 0;
		bottom: 0;
		width: 870px;
		height: 915px;
		clip-path: path('M869.173,0L447.418,132.433l-229.836,324.7L52.034,686.074,217.582,915.026,379.612,686.074,865.7,8.014A19.551,19.551,0,0,0,869.173,0Z');
	}
}

@media screen and (min-width: 1440px) {
	.hero-holder {
		height: 782px;
	}
}

/* intro */
.intro {
	margin-top: 68px;
	text-align: center;
	margin-bottom: 68px;
	position: relative;
}

.intro .row {
	max-width: 1293px;
}

.intro h2 {
	font-size: 2rem;
	max-width: 690px;
	line-height: 1.3;
	font-weight: normal;
	margin-left: auto;
	margin-right: auto;
	color: var(--color-body-text);
}

@media screen and (min-width: 768px) {
	.intro {
		margin-top: 85px;
		margin-bottom: 85px;
	}

	.intro h2 {
		font-size: 2.4375rem;
	}

	.intro .button {
		margin-top: 20px;
	}
}


/* information */
.information {
	width: 100%;
	font-weight: 500;
	text-align: center;
	position: relative;
	padding-top: 90px;
	padding-bottom: 90px;
	color: var(--color-white);
	font-size: 1.25rem;
}

.information .row {
	max-width: 820px;
}

.information p:last-child  {
	margin-bottom: 0;
}

.information-image {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
}

.information-image:before {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	pointer-events: none;
	background-color: rgba(2, 31, 60, 0.8);
	content: '';
}

.information-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

@media screen and (min-width: 768px) {
	.information {
		padding-top: 165px;
		padding-bottom: 165px;
	}
}


/* Services */
.services {
	padding-top: 50px;
	padding-bottom: 50px;
	position: relative;
}

/* .services .practice-box {
	width: 375px;
} */

.services-intro {
	margin-bottom: 50px;
}

.services-intro h2 {
	font-weight: 500;
	font-size: 2.5rem;
	margin-bottom: 20px;
	color: var(--color-primary);
}

.services-intro h2 span {
	position: relative;
	display: inline-block;
	color: var(--color-secondary);
}

.services-intro h2 span:after {
	position: absolute;
	top: calc(100% - 7px);
	left: 0;
	width: 100%;
	height: 2px;
	background-color: var(--color-secondary);
	content: '';
}

.services-logo {
	width: 100%;
	max-width: 105px;
	margin: 0 auto 30px auto;
}

.services-logo img {
	width: 100%;
	display: block;
}

.services-slider {
	padding-bottom: 60px;
}

.services-slider .slick-arrow {
	top: auto;
	bottom: 0;
}

.services-slider .slick-arrow.slick-prev {
	left: 50%;
	margin-left: -20px;
	transform: translateX(-50%);
}

.services-slider .slick-arrow.slick-next {
	right: 50%;
	margin-right: -20px;
	transform: translateX(50%);
}

.services-slider.swiper{
	padding-bottom: 75px;
}

/* @media screen and (min-width: 500px) {
	.services-slide {
		padding: 0 4px;
	}
} */

@media screen and (min-width: 768px) {
	.services {
		padding-top: 85px;
		padding-bottom: 85px;
	}
	
	/* .services .practice-box {
		width: 442px;
	} */

	.services-slider {
		padding-bottom: 75px;
	}

	.services-intro h2 {
		font-size: 2.9375rem;
	}
}

/* @media screen and (min-width: 1440px) {
	.services .practice-box {
		width: 474px;
	}
} */