@charset "utf-8";
/* CSS Document */

.comp-resources-block {
	.resources-title-area {
		h2 {
			margin-right: 0;
			border-right: 0;
			padding-right: 0;
			width: 100%;

			@include bp(desktop) {
				margin-right: 24px;
				padding-right: 24px;
				border-right: 1px solid #000;
			}
		}
		p {
			margin-left: 0;
			width: 100%;

			@include bp(desktop) {
				width: 150%;
				margin-left: 24px;
			}
		}
		.button-group {
			width: 100%;
			justify-content: left;
			display: flex;
			align-items:flex-start;
			margin-top: 0;

			@include bp(desktop) {
				justify-content: right;
			}
		}
	}
	.resources-items {

		.mosaic-3 {
			flex-wrap:wrap;
			display: flex;
			margin-top: 32px;

			@include bp(desktop) {
				margin-top: 100px;
				flex-wrap:wrap;
			}

			.mosaic-item {
				border-radius: 15px;
				width: 100%;
			}

			.mosaic-3-left {
				width: 100%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				overflow:visible;
				margin-bottom: 32px;

				@include bp(desktop) {
					width: 40%;
					margin-bottom: 0;
				}

				img {
					width: 100% !important;
					max-width: 150%;
					margin: 0;
					transition: .5s all ease;
					top: 0;
					position: relative;

					&:hover {
						top: -20px;
					}

					@include bp(desktop) {
						width: 130% !important;
						margin: 0 -15%;
					}
				}

				.mosaic-item {
					height: 100%;
					overflow:visible;

					.case-study-link {
						border-radius: 15px;
					}
				}
			}
			.mosaic-3-right {
				width: 100%;
				margin-left: 0%;

				@include bp(desktop) {
					width: 58%;
					margin-left: 2%;
				}

				.mosaic-item {
					overflow:hidden;

					.case-study-link {
						border-radius: 15px;
						display: block;
						height: 100%;
						img {
							width: 100%;
							display: block;
						}

					}

					&:first-child {
							margin-bottom: 32px;
						}
				}
			}
			.case-study-link {
				display: flex;
				align-items:center;
				height: 100%;
				img {
					width: 100%;
				}
			}
		}
		.mosaic-6 {
			flex-wrap:nowrap;
			display: flex;
			margin-top: 48px;
			flex-wrap:wrap;

			@include bp(desktop) {
				margin-top: 100px;
				flex-wrap:nowrap;
			}

			.mosaic-col {
				width:100%;
				display: flex;
				flex-direction: column;

				.mosaic-item {
					height: 250px;
					margin: 1%;
					border-radius: 12px;
					overflow:hidden;

					@include bp(desktop) {
						height: 300px;
					}
				}

				&.mosaic-6-left {
					.mosaic-item:last-child {
						height: 250px;

						@include bp(desktop) {
							height: 620px;
						}
					}
				}
				&.mosaic-6-center {
					margin: 0 1%;
					.mosaic-item:first-child {
						height: 250px;

						@include bp(desktop) {
							height: 620px;
						}
					}
				}
				&.mosaic-6-right {
					.mosaic-item:last-child {
						height: 250px;

						@include bp(desktop) {
							height: 620px;
						}
					}
				}
			}

		}
		.case-study-link {
			display: block;
			height: 100%;
			img {
				width: 100%;
			}
		}
	}

	// BLOG BLOCK
	.blog-block {
		margin-top: 24px;

		@include bp(desktop) {
			margin-top: 100px;
		}

		.blog-block-item {
			position: relative;
			margin-bottom: 32px;

			&:last-child {
				margin-bottom: 0;
			}

			h4 {
				font-family: $font-body;
				font-weight: 700;
			}

			.link-arrow {
				position: absolute;
				top: 24px;
				right: 24px;
				transition: .3s all ease;

				&:hover {
					transform: scale(1.1);
				}
			}
			img {
				border-radius: 32px;
			}
		}
		.blog-block-right {
			padding-left: 0;
			width: 100%;

			@include bp(desktop) {
				padding-left: 32px;
				width: 33%;
			}
		}
		.blog-block-left {
			padding-right: 0px;
			width: 100%;

			@include bp(desktop) {
				width: 66%;
				padding-right: 32px;
			}
		}
		.blog-block-date {
			font-family:$font-body;
			font-weight: 700;
			font-size: 16px;
			margin: 24px 0 12px 0;
			&:after {
				content: "";
				width: 100px;
				display: inline-block;
				height: 1px;
				position: relative;
				top: -6px;
				left: 10px;
				background: #000;
			}
		}
	}

	// BLOG LISTING BLOCK
		.blog-listing {
			margin-top: 60px;
			.blog-item {
				margin: 1% 0;
				width: 100%;
				height: 300px;
				border-radius: 12px;
				position: relative;
				overflow:hidden;
				background-color: #e6e6e6;

				@include bp(desktop) {
					margin: .5%;
					width: 32.333%;
				}

				&:hover {
					.blog-info {
						opacity: 1;
						visibility:visible;
					}
				}

				.blog-info {
					opacity: 0;
					visibility:hidden;
					transition: .5s all ease;
					position: absolute;
					height: 100%;
					width: 100%;
					background: rgba(0,0,0,.85);
					color: #fff;
					padding:32px;
					display: flex;
					flex-direction: column;
					justify-content: flex-end;

					h4 {
						color: #fff;
					}

					p {
						margin: 0;
					}

					.blog-cats {
						margin-bottom: 12px;

						.cat-pill {
							font-size: 14px;
							padding: 6px 12px;
							font-weight: 700;
							background: #fff;
							border-radius: 32px;
							margin-right: 4px;
							margin-bottom: 8px;
							color: #333;
							text-align: center;
							display: inline-block;
						}
					}
				}
			}
		}
	}

	// CASE STUDY BLOCK
	.case-study-listing {
		margin-top: 60px;
		.case-study-item {
			margin: 1% 0;
			width: 100%;
			height: 300px;
			border-radius: 12px;
			position: relative;
			overflow:hidden;
			background-color: #e6e6e6;

			&.mosaic-item {
				width: 100%;

				@include bp(desktop) {
					width:100%;
				}
			}

			@include bp(desktop) {
				margin: .5%;
				width: 32.333%;
			}

			&:hover {
				.case-study-info {
					opacity: 1;
					visibility:visible;
				}
			}

			.case-study-info {
				opacity: 0;
				visibility:hidden;
				transition: .5s all ease;
				position: absolute;
				height: 100%;
				width: 100%;
				background: rgba(36, 167, 9, 0.65);
				color: #fff;
				padding:32px;
				display: flex;
				flex-direction: column;
				justify-content: flex-end;



				h4 {
					color: #fff;
				}

				p {
					margin: 0;
				}

				.case-study-cats {
					margin-bottom: 12px;

					.cat-pill {
						font-size: 11px;
						padding: 6px 12px;
						font-weight: 700;
						background: #fff;
						border-radius: 32px;
						margin-right: 6px;
						margin-bottom: 8px;
						color: #333;
						text-align: center;
						display: inline-block;
						text-transform:uppercase; 
					}
				}
			}
			&:nth-child(4n+1) {
				.case-study-info {
					background: rgba(36, 153, 12, 0.85);
				}
			}
			&:nth-child(4n+2) {
				.case-study-info {
					background: rgba(12, 127, 153, 0.85);
				}
			}
			&:nth-child(4n+3) {
				.case-study-info {
					background: rgba(89, 12, 153, 0.85);
				}
			}
			&:nth-child(4n+4) {
				.case-study-info {
					background: rgba(215, 94, 6, 0.85);
				}
			}
		}

	// DARK THEME
	&.color-theme--dark {
		.resources-title-area h2 {
			border-color: #fff;
		}
	}
}




.comp-testimonial-block {
	.testimonial-item {
		display: flex;
		flex-wrap:wrap;
		border-bottom: 0;
		padding: 24px 0;

		@include bp(desktop) {
			padding: 80px 0;
			border-bottom: 1px solid rgba(0,0,0,.35);
		}

		@include bp(desktop) {
			flex-wrap:nowrap;
		}

		.img-content {
			width:100%;
			min-width:100px;
			margin-right: 65px;

			@include bp(desktop) {
				width:100px;
			}

			img {
				width: 100%;
			}
		}
		.text-content {
			width: 100%;
			margin-right: 65px;

			h4 {
				margin-bottom: 8px;

				@include bp(desktop) {
					margin-bottom: inherit;
				}
			}

			@include bp(desktop) {
				max-width:260px;
			}
		}
		.quote-content {
			width: 100%;
			font-size: 24px;
			line-height: 36px;
			margin-top: 24px;

			@include bp(desktop) {
				width: auto;
				font-size: 36px;
				line-height: 54px;
				margin-top: 0;
			}
		}
	}

	&.color-theme--dark {
		color: #fff;

		h1, h2, h3, h4 { 
			color:#fff;
		}

		.testimonial-item {
			border-bottom: 1px solid rgba(255,255,255,.35);
		}
	}
	
}


.comp-form-block {
	width: 100%;

	.form-title-area {
		padding: 24px;
		width: 100%;

		@include bp(desktop) {
			padding: 40px;
		}
	}

	.form-image {
		width: 100%;
	}
	.form-lottie {
		width: 100%;
	}

	&.hero-form {
		> .container {
			align-items: flex-start;
		}
		.form-title-area {
			padding: 32px;
			background: $pastel-blue;
			border-radius: 24px;
			margin-right: 0px;
			max-width: 500px;
			height: auto;

			h1{
				padding-bottom: 16px;
				border-bottom: 1px solid $color-orange;
				margin-bottom: 16px;
			}

			@include bp(desktop) {
				margin-right: 100px;
			}
		}
		.form-image {
			margin-right: 100px;
		}
		
	}

	&.img-pos-left {

		&.callout-form {
			.form-title-area {
					padding: 0 0 24px 0; 

					@include bp(desktop) {
						padding: 48px;
					}
			}
		}

		.form-title-area {
			padding: 24px; 

			@include bp(desktop) {
				padding: 40px;
			}
		}
		.container {
			flex-direction: row-reverse;
		}
	}
}
// GLOBAL FORM EMBED
.form-embed {
	width: 100%;
	margin-top: 0;

	@include bp(desktop) {
		margin-top: 24px;
	}

	p {
		margin: 0;
	}

	form {
		max-width: 100%;
		margin-top: 24px;

		input, select, textarea {
			max-width: 100%;
			width: 100%;
		}
		textarea {
			max-height: 100px;
			min-height: 100px;
		}
		input[type=submit] {
			width: auto;
		}
	}

	.wpcf7-spinner {
		display: none;
	}
}

// MISC RESET
body .wpcf7 form.sent .wpcf7-response-output {
  font-weight: bold;
  font-size: 20px;
  border: 0;
  padding: 24px 0 0 0;
  color: green;
}



.comp-grid-columns {
	.grid-title-area {
		display: flex;
		flex-wrap:wrap;

		@include bp(desktop) {
			flex-wrap: nowrap;
		}

		.title-content {
			width: 100%;
		}
		.title-image {
			width: 100%;
			padding-left: 100px;
			text-align: right;

			img {
				min-width: 50%;
				max-width: 100%;
			}
		}
	}
	.grid-items {
		display: flex;
		flex-wrap:wrap;

		&.two-col {
			.grid-item {
				width: 100%;

				@include bp(desktop) {
					width: 50%;
				}
			}
		}

		&.three-col {
			.grid-item {
				width: 100%;

				@include bp(desktop) {
					width: 33.333%;
				}
			}
		}

		&.four-col {
			.grid-item {
				width: 100%;

				@include bp(desktop) {
					width: 25%;
				}
			}
		}
		&.stat-grid {
			.grid-item {
				display: flex;
			}
		}

		.grid-item {
			padding: 0 24px 0 0;
			margin-top: 24px;

			@include bp(desktop) {
				margin-top: 60px;
			}

			.donut-chart {
				width: 64px;
				margin-right: 24px;
			}

			.large-stat {
				font-size: 55px;
				font-family: $font-body;
				font-weight: 500;
				line-height: 1.1em;
			}

			.icon-content {
				width: 64px;
				height: 64px;
				display: flex;
				justify-content: center;
				flex-direction: column;
				margin-bottom: 16px;

				img {
					width: 100%;

				}
			}

			// DONUT CHART
			#donut-chart {
			  transform: rotate(-90deg);
			}

			#donut-fill {
			  animation: fill-animation 2s forwards;
			}

			@keyframes fill-animation {
			  to {
			    stroke-dashoffset: 0;
			  }
			}

		}
	}
	.grid-image-text {
		padding-top: 50px;

		@include bp(desktop) {
			padding-top: 80px;
		}

		&--item {
			max-width: 720px;

			.text-content {
				p {
					margin-bottom: 10px;
				}
				h4 {
					margin-bottom: 5px;
				}
			}

			.img-content {
				line-height: 0;
				margin-bottom: 15px;

				img {
					width: 100%;
					max-width: 100%;
				}
			}
		}
	}
}



.comp-large-callout {
	padding: 0;
	overflow:visible;

	.text-content {
		width: 60%;
		display: flex;
		align-items:center;
		text-align: center;

		h2 {
			font-size: clamp(20px, 5vw, 64px);
			line-height: 120%; 
			margin-top: 10px;

			@include bp(desktop) {
				font-size: clamp(48px, 5vw, 64px);
				line-height: 150%;
				margin-top: 0; 
			}
		}
	}
	.img-content {
		width: 40%;

		img {
			display: block;
			width: 100%;
		}

		&.lrg-img {
			img {
				width: 120%;
				margin: -10% 0 0 -10%;

				
			}
		}
	}

	&.img-pos-left {
		> .container {
			flex-direction: row-reverse;
		}
	}
}.comp-large-callout {
	padding: 0;
	overflow:visible;

	.text-content {
		width: 60%;
		display: flex;
		align-items:center;
		text-align: center;

		h2 {
			font-size: clamp(20px, 5vw, 64px);
			line-height: 120%; 
			margin-top: 10px;

			@include bp(desktop) {
				font-size: clamp(48px, 5vw, 64px);
				line-height: 150%;
				margin-top: 0; 
			}
		}
	}
	.img-content {
		width: 40%;

		img {
			display: block;
			width: 100%;
		}

		&.lrg-img {
			img {
				width: 120%;
				margin: -10% 0 0 -10%;

				
			}
		}
	}

	&.img-pos-left {
		> .container {
			flex-direction: row-reverse;
		}
	}
}