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


/* HERO */
.hero {
	padding-top: 95px;
	background-image: url('../images/hero-bg.png');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center top;
	padding-bottom: 48px;
}

.hero-subtitle {
	font-size: 1.5rem;
	text-transform: uppercase;
	color: var(--color-secondary);
	letter-spacing: 0.03em;
	font-weight: 500;
}

.hero-subtitle span {
	display: block;
	animation-delay: 1s;
}

.hero-title {
	font-size: 3.125rem;
	text-transform: uppercase;
	animation-delay: 1.6s;
	font-family: var(--font-family-heading), sans-serif;
	font-weight: 800;
	line-height: 1.2;
	margin-bottom: 20px;
	color: var(--color-primary);
}

.hero-content {
	text-align: center;
}

.hero-content .button {
	animation-delay: 2s;
}

.hero-image {
	width: 184px;
	margin: 0 auto 15px;
	animation-delay: .6s;
}

.hero-image svg {
	width: 100%;
	height: auto;
	display: block;
}

@media screen and (min-width: 768px) {
	.hero-inner {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			align-items: flex-start;
	}

	.hero-content {
			text-align: left;
			width: 50%;
			padding-top: 40px;
	}

	.hero-image {
			width: 50%;
			margin: 0;
			order: 1;
	}
}

@media screen and (min-width: 1025px) {
	.hero {
			padding-top: 100px;
			padding-bottom: 100px;
	}

	.hero-subtitle {
			font-size: 2.188rem;
	}

	.hero-title {
			font-size: 5rem;
	}

	.hero-content {
			width: 55%;
			padding-top: 60px;
	}

	.hero-image {
			width: 45%;
			margin-right: -35px;
	}
}

@media screen and (min-width: 1280px) {
	.hero {
			padding-top: 170px;
	}

	.hero-subtitle {
			font-size: 2.5rem;
	}

	.hero-title {
			font-size: 6.25rem;
	}

	.hero-content {
			padding-left: 60px;
			padding-top: 140px;
	}
}

/* INTRO */
.intro {
	position: relative;
	z-index: 1;
	background: rgba(208, 211, 212, .3);
}

.intro-inner {
	padding-top: 35px;
	padding-bottom: 35px;
	position: relative;
	width: 100%;
}

.intro-subtitle {
	font-size: 1rem;
	text-transform: uppercase;
	color: var(--color-secondary);
	letter-spacing: 0.03em;
	font-weight: 500;
	margin-bottom: 10px;
}

.intro h2 {
	font-size: 2.25rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.intro .button {
	width: 100%;
}

@media screen and (min-width: 768px) {
	.intro-inner {
			padding-top: 60px;
			padding-bottom: 30px;
			display: grid;
			grid-column-gap: 30px;
			grid-template-columns: repeat(2, 1fr);
	}

	.intro-inner:after {
			content: '';
			position: absolute;
			top: 35px;
			left: -30px;
			width: 3px;
			height: 0%;
			transition: height 2s;
			background-color: var(--color-primary);
	}

	.intro-inner.animated:after {
			height: calc(100% + 70px);
	}

	.intro-shape {
			position: absolute;
			top: 0;
			left: 50%;
			margin-left: -664px;
			z-index: -1;
			display: block;
			pointer-events: none;
			width: 528px;
			opacity: .5;
	}

	.intro .button {
			width: auto;
	}

	.intro-right {
			margin-left: auto;
	}
}

@media screen and (min-width: 1025px) {
	.intro-inner {
			padding-top: 110px;
			padding-bottom: 50px;
			grid-column-gap: 60px;
	}

	.intro-inner:after {
			top: 110px;
	}

	.intro-subtitle {
			font-size: 1.25rem;
	}

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

@media screen and (min-width: 1280px) {
	.intro-right {
			width: calc(100% + 90px);
	}
}

/* SERVICES */
.services {
	z-index: 1;
	position: relative;
	padding-top: 35px;
	padding-bottom: 35px;
}

.services h4 {
	letter-spacing: 0;
	text-align: center;
	font-size: 1.25rem;
}

.services h2 {
	font-size: 2.25rem;
	text-align: center;
	text-transform: uppercase;
}

.services-right .services-list {
	margin-bottom: 0;
}

.services-list li {
	width: 100%;
	margin-bottom: 12px;
}

.services-list li a {
	display: flex;
	padding: 10px 50px 10px 15px;
	font-size: 1.125rem;
	text-decoration: none;
	font-weight: 500;
	color: var(--color-white);
	line-height: 1.2;
	position: relative;
	min-height: 82px;
	align-items: center;
	text-transform: uppercase;
	background: var(--color-primary);
}

.services-list li a:hover {
	background: var(--color-secondary);
}

.services-list li a i {
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
	background: var(--color-white);
	border-radius: 100%;
	color: var(--color-primary);
	font-size: 12px;
}

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

	.services-inner {
			display: grid;
			grid-column-gap: 30px;
			grid-template-columns: repeat(2, 1fr);
	}

	.services-inner .services-list {
			margin-bottom: 0;
	}

	.services h4,
	.services h2 {
			text-align: left;
	}
}

@media screen and (min-width: 1025px) {
	.services {
			padding-top: 110px;
			padding-bottom: 60px;
			background-image: url('../images/services-bg.png');
			background-repeat: no-repeat;
			background-size: cover;
			background-position: center center;
	}

	.services h4 {
			font-size: 1.563rem;
	}

	.services h2 {
			font-size: 2.5rem;
			margin-bottom: 30px;
	}

	.services-inner {
			grid-column-gap: 55px;
	}

	.services-list {
			padding-top: 13px;
	}

	.services-list li {
			margin-bottom: 22px;
	}

	.services-list li a {
			font-size: 1.375rem;
			padding: 14px 70px 14px 25px;
	}
}

/* SUPPORT */
.support {
	z-index: 1;
	position: relative;
	padding-top: 30px;
	padding-bottom: 45px;
	background-color: var(--color-primary);
	background-image: url('../images/support-bg.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
}

.support h4 {
	letter-spacing: 0;
	color: var(--color-white);
	font-size: 1.25rem;
	margin-bottom: 10px;
}

.support h2 {
	font-size: 1.875rem;
	color: var(--color-gray-100);
	text-transform: uppercase;
}

.support-left .accordion-item {
	border-bottom-width: 0.031rem;
}

.support-left .accordion-item:first-of-type {
	border-top: 0;
}

.support-left .accordion-item-title {
	padding-top: 30px;
	padding-bottom: 10px;
	color: var(--color-white);
}

.support-left .accordion-item-title:after {
	color: var(--color-white);
}

.support-left .accordion-item-title:focus,
.support-left .accordion-item-title:hover {
	color: var(--color-white);
}

.support-left .accordion-item-content {
	color: var(--color-white);
	font-size: 1.125rem;
	font-weight: 500;
	margin-bottom: 15px;
}

.support-left .accordion-item-content > *:first-child {
	margin-top: 0;
	margin-bottom: 10px;
}

.accordion-item-content a{
	color: #fff;
	text-decoration: underline;
}

.accordion-item-content a:hover,
.accordion-item-content a:focus {
	text-decoration: none;
}

.support-right {
	margin-bottom: 40px;
	position: relative;
	z-index: 2;
}

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

	.support-inner {
			display: flex;
			flex-wrap: wrap;
			align-items: flex-start;
	}

	.support-shape {
			width: 412px;
			position: absolute;
			bottom: 0;
			right: 50%;
			margin-right: -650px;
			opacity: .06;
	}

	.support-left {
			width: 58%;
	}

	.support-right {
			width: 34%;
			order: 1;
			margin-left: auto;
			margin-bottom: 0;
	}
}

@media screen and (min-width: 1025px) {
	.support {
			padding-top: 95px;
			padding-bottom: 120px;
	}

	.support h4 {
			font-size: 1.25rem;
	}

	.support h2 {
			font-size: 2.188rem;
	}
}

/* RESOURCES */
.resources {
	z-index: 1;
	position: relative;
	padding-top: 70px;
	padding-bottom: 70px;
	background-color: rgba(217, 217, 217, .3);
}

.resources:after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	mix-blend-mode: luminosity;
	opacity: .03;
	z-index: -1;
	background-image: url('../images/resources-bg.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
}

.resources h2 {
	font-size: 1.875rem;
	color: var(--color-primary);
	text-transform: uppercase;
}

.resources-icon {
	height: 70px;
	width: 100%;
	display: flex;
	align-items: center;
	margin-bottom: 15px;
	justify-content: center;
}

.resources-list {
	margin: 0 auto;
	max-width: 240px;
}

.resources-item {
	position: relative;
	width: 100%;
	padding-bottom: 30px;
	margin-bottom: 30px;
}

a.resources-item{
	text-decoration: underline;
}

a.resources-item:hover,
a.resources-item:focus {
	text-decoration: none;
}

a.resources-item img {
	transition: transform 0.3s ease;
}

a.resources-item:hover img,
a.resources-item:focus img {
	transform: scale(1.05);
}

.resources-item:after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	height: 1px;
	background-color: var(--color-secondary);
	width: 168px;
}

.resources-item:last-child {
	margin-bottom: 0;
}

.resources-item span {
	display: block;
	font-weight: 600;
	color: var(--color-secondary);
}

@media screen and (min-width: 768px) {
	.resources-list {
			display: flex;
			padding-top: 40px;
			max-width: 100%;
			margin: 0;
	}

	.resources-item {
			width: 25%;
			padding: 0 8px 15px;
			border-right: 1px solid var(--color-secondary);
			margin-bottom: 0;
	}

	.resources-item:after {
			display: none;
	}

	.resources-item:last-child {
			border-right: 0;
	}
}

@media screen and (min-width: 1025px) {
	.resources {
			padding-top: 110px;
			padding-bottom: 110px;
	}

	.resources h2 {
			font-size: 2.5rem;
	}

	.resources-item {
			padding: 0 15px 15px;
	}
}

/* EMPLOYMENT */
.employment {
	z-index: 3;
	position: relative;
}

.employment h2 {
	font-size: 1.875rem;
	color: var(--color-primary);
	text-transform: uppercase;
	margin-bottom: 25px;
}

.employment-holder {
	position: relative;
	width: 100%;
	padding-top: 45px;
	padding-bottom: 45px;
}

.employment-inner {
	padding-bottom: 30px;
	position: relative;
	width: 100%;
}

.employment-inner:last-child {
	padding-bottom: 0;
}

.employment-image {
	margin-bottom: 20px;
}

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

.employment-content h3 {
	font-weight: 600;
	font-size: 1.25rem;
}

@media screen and (min-width: 768px) {
	.employment-inner {
			padding-bottom: 50px;
	}

	.employment-inner:nth-child(odd) .employment-image {
			order: 1;
	}
}

@media screen and (min-width: 1025px) {
	.employment-holder {
			padding-top: 70px;
			padding-bottom: 95px;
	}

	.employment-holder:after {
			content: '';
			position: absolute;
			top: 0;
			right: 30px;
			z-index: -1;
			width: 3px;
			height: 0%;
			transition: height 2s;
			background-color: var(--color-primary);
	}

	.employment.animated .employment-holder:after {
			height: calc(100% + 210px);
	}

	.employment h2 {
			font-size: 2.5rem;
			letter-spacing: -0.02em;
			line-height: 1.3;
			margin-bottom: 70px;
	}

	.employment-inner {
			display: grid;
			align-items: center;
			grid-template-columns: repeat(2, 1fr);
			grid-gap: 50px;
			padding-bottom: 90px;
	}

	.employment-image {
			margin-bottom: 0;
	}

	.employment-content {
			padding-right: 50px;
	}

	.employment-content h3 {
			font-size: 1.5rem;
	}

	.employment-inner:nth-child(odd):after {
			content: '';
			position: absolute;
			top: -160px;
			left: 30px;
			z-index: -1;
			width: 3px;
			height: 0%;
			transition: height 2s;
			background-color: var(--color-primary);
	}

	.employment-inner.animated:nth-child(odd):after {
			height: calc(100% + 260px);
	}

	.employment-inner:nth-child(odd) .employment-content {
			margin-left: 50px;
	}
}

@media screen and (min-width: 1200px) {
	.employment-holder:after {
			right: 70px;
	}

	.employment-inner:nth-child(odd):after {
			left: 50px;
	}

	.employment-image {
			padding-right: 25px;
			margin-left: 30px;
	}

	.employment-content {
			padding-right: 100px;
	}

	.employment-inner:nth-child(odd) .employment-image {
			margin-left: 6px;
			margin-right: 25px;
	}

	.employment-inner:nth-child(odd) .employment-content {
			margin-left: 100px;
	}
}

@media screen and (min-width: 1440px) {
	.employment-holder:after {
			right: 150px;
	}

	.employment-inner:nth-child(odd):after {
			left: 135px;
	}

	.employment-content {
			padding-right: 200px;
	}

	.employment-inner:nth-child(odd) .employment-content {
			margin-left: 190px;
			padding-right: 30px;
	}
}

/* TESTIMONIAL */
.testimonial {
	z-index: 1;
	position: relative;
	padding-top: 50px;
	padding-bottom: 35px;
	background-color: rgba(217, 217, 217, .3);
}

.testimonial-shape {
	position: absolute;
	top: 0;
	left: 50%;
	width: 368px;
	margin-left: -635px;
	z-index: 1;
	pointer-events: none;
}

.testimonial-shape img {
	width: 100%;
}

.testimonial h2 {
	font-size: 1.875rem;
	color: var(--color-primary);
	text-transform: uppercase;
	margin-bottom: 70px;
}

.testimonial-slider {
	margin: 0 auto;
	max-width: 820px;
	font-size: 1.25rem;
	font-weight: 500;
	position: relative;
	line-height: 1.6;
	text-align: center;
	background-color: var(--color-white);
	margin-bottom: 50px;
	padding: 70px 20px 40px;
}

.testimonial-slider:after {
	content: '';
	position: absolute;
	top: -40px;
	left: 50%;
	width: 100px;
	height: 80px;
	margin-left: -50px;
	z-index: 1;
	background-image: url('../images/quote.svg');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 100px auto;
}

.testimonial-slider .swiper-pagination-bullets {
	position: absolute;
	width: 100%;
	bottom: -40px;
	justify-content: center;
	display: flex;
}

.testimonial-slider .swiper-pagination-bullet {
	background: transparent;
	border: 1px solid var(--color-primary);
	transition: all .3s ease;
}

.testimonial-slider .swiper-pagination-bullet.swiper-pagination-bullet-active {
	background: var(--color-primary);
}

.testimonial-slider .swiper-autoplay-toggle {
	display: none !important;
}

.testimonial-name {
	font-size: 1rem;
	font-weight: 600;
}

@media screen and (min-width: 1025px) {
	.testimonial {
			padding-top: 100px;
			padding-bottom: 85px;
			background-image: url('../images/services-bg.png');
			background-repeat: no-repeat;
			background-size: cover;
			background-position: center center;
	}

	.testimonial h2 {
			font-size: 2.5rem;
			letter-spacing: -0.02em;
			line-height: 1.3;
			margin-bottom: 58px;
	}

	.testimonial-slider {
			text-align: left;
			line-height: 2;
			padding: 110px 110px 60px 130px;
	}

	.testimonial-name {
			text-align: right;
			padding-top: 20px;
	}

	.testimonial-slider:after {
			width: 144px;
			height: 120px;
			top: -50px;
			left: -60px;
			margin-left: 0;
			background-size: 144px auto;
	}
}

@media screen and (min-width: 1200px) {
	.testimonial {
			padding-top: 170px;
	}
}