.service-group-body {
}

.service-group-intro {
	width: 80%;
	margin: 4rem auto;
	line-height: 2rem;
	font-size: clamp(16px, 3vw, 24px);
}

.service-group-blocks {
	margin: 64px 0;
}

	.service-group-blocks .cb-sidebyside-wrap {
		margin-bottom: 24px;
	}


.services-divider-spheres img {
	width: 50%;
	margin: 0 auto;
	display: block;
}

.services-divider-scale img {
	width: 25%;
	margin: 0 auto;
	display: block;
	margin-bottom: 64px;
}

.serviceGroupTabGroup {
	width: 80%;
	max-width: 1280px;
	margin: 0 auto;
	border: 1px solid var(--light-grey);
	margin-bottom: 12px;
}

	.serviceGroupTabGroup .tabs__labels {
		flex-direction: row;
		display: flex;
		justify-content: flex-start; /* or just remove justify-content */
		gap: 0;
	}

		.serviceGroupTabGroup .tabs__labels .tabs__label {
			/* border: 1px solid #555; */
			padding: 24px;
			flex: 1 1 0; /* makes each tab take equal width */
			margin: 0; /* just in case */
			text-align: left;
			cursor: pointer;
			color: var(--cream);
			z-index: 1;
			border-radius: 6px 6px 0 0;
			position: relative;
			transition: .25s ease;
		}


			.serviceGroupTabGroup .tabs__labels .tabs__label[data-tab="0"] {
				background: var(--agency-purple);
			}

			.serviceGroupTabGroup .tabs__labels .tabs__label[data-tab="1"] {
				background: var(--agency-orange);
			}

			.serviceGroupTabGroup .tabs__labels .tabs__label[data-tab="2"] {
				background: var(--agency-green);
			}

			.serviceGroupTabGroup .tabs__labels .tabs__label[data-tab="3"] {
				background: var(--bureau-blue2);
			}

			.serviceGroupTabGroup .tabs__labels .tabs__label.is-active {
				z-index: 2;
			}


				.serviceGroupTabGroup .tabs__labels .tabs__label.is-active[data-tab="0"] {
					background-color: var(--agency-purple);
					box-shadow: 0px -10px 0px 0px var(--agency-purple),0px 1px 4px 2px hsl(0deg 0% 0% / 50%);
				}

				.serviceGroupTabGroup .tabs__labels .tabs__label.is-active[data-tab="1"] {
					background-color: var(--agency-orange);
					box-shadow: 0px -10px 0px 0px var(--agency-orange), 0px 1px 4px 2px hsl(0deg 0% 0% / 50%);
				}

				.serviceGroupTabGroup .tabs__labels .tabs__label.is-active[data-tab="2"] {
					background-color: var(--agency-green);
					box-shadow: 0px -10px 0px 0px var(--agency-green), 0px 1px 4px 2px hsl(0deg 0% 0% / 50%);
				}

				.serviceGroupTabGroup .tabs__labels .tabs__label.is-active[data-tab="3"] {
					background-color: var(--bureau-blue2);
					box-shadow: 0px -10px 0px 0px var(--bureau-blue2), 0px 1px 4px 2px hsl(0deg 0% 0% / 50%);
				}



				.serviceGroupTabGroup .tabs__labels .tabs__label.is-active:after {
					content: "";
					position: absolute;
					z-index: -1;
					transform: translateX(-50%);
					top: 100%;
					width: 0;
					height: 0;
					left: 50%;
					border-left: 24px solid transparent;
					border-right: 24px solid transparent;
					border-top: 24px solid var(--deep-blue);
					filter: drop-shadow(0px 7px 3px #969696);
					margin-top: -6px;
					color: #969696;
				}

				.serviceGroupTabGroup .tabs__labels .tabs__label.is-active[data-tab="0"]:after {
					border-top: 24px solid var(--agency-purple);
				}

				.serviceGroupTabGroup .tabs__labels .tabs__label.is-active[data-tab="1"]:after {
					border-top: 24px solid var(--agency-orange);
				}

				.serviceGroupTabGroup .tabs__labels .tabs__label.is-active[data-tab="2"]:after {
					border-top: 24px solid var(--agency-green);
				}

				.serviceGroupTabGroup .tabs__labels .tabs__label.is-active[data-tab="3"]:after {
					border-top: 24px solid var(--bureau-blue2);
				}

			.serviceGroupTabGroup .tabs__labels .tabs__label h3 {
				display: flex;
				gap: 12px;
				margin-bottom: 24px;
			}

				.serviceGroupTabGroup .tabs__labels .tabs__label h3 img {
					height: 34px;
					width: auto;
					filter: invert(1) blur(.2px) brightness(2) drop-shadow(1px 1px 0px var(--white));
				}

			.serviceGroupTabGroup .tabs__labels .tabs__label p {
				text-align: center;
				font-style: italic;
			}


	.serviceGroupTabGroup .tabs__panels {
		position: relative;
		border: 1px solid var(--deep-blue);
		border-top: 0;
		border-radius: 0 0 6px 6px;
	}

		.serviceGroupTabGroup .tabs__panels .tabs__panel {
			padding: 4rem 3rem;
			position: relative;
			display: none;
		}

			.serviceGroupTabGroup .tabs__panels .tabs__panel p {
				width: calc(100% - 110px);
			}

			.serviceGroupTabGroup .tabs__panels .tabs__panel.is-active {
				display: block
			}

		.serviceGroupTabGroup .tabs__panels::before {
			content: "";
			position: absolute;
			top: 40px;
			left: 0;
			right: 0;
			bottom: 0;
			background-image: url('/assets/images/processesGreyscale.png');
			background-size: cover;
			opacity: .1; /* Set your desired opacity here */
			z-index: -1; /* Place it behind the content */
			filter: blur(3px);
		}





body:has(.service-page) .service-side-by-side .umb-block-grid__area-container {
	width: 100%;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, .1);
	box-shadow: 0px 5px 10px rgba(0, 0, 0, .3);
	padding: 30px;
	gap: 30px;
	border-radius: 6px;
}

.service-panel-index {
	color: #b3b0ad;
	font-size: 14px;
	opacity: 1;
	font-family: system-ui;
	font-weight: 600;
	/* position: absolute; */
	line-height: 1;
	/* top: -80px; */
	/* left: -153px; */
	z-index: -1;
	filter: drop-shadow(1px 1px 1px #00000033);
	display: block;
	text-align: left;
}

.left-item {
	text-align: right;
}

	.left-item li {
		display: flex;
		text-align: left;
	}

	.left-item .service-panel-index {
		/* left: unset; */
		/* right: -153px; */
	}

.right-item .service-panel-index {
}


.service-group-panel-icon {
	width: 26px;
	height: 26px;
	opacity: .85;
	filter: none; /* keep it flat like the background system */
}

.service-group-panel-icon-wrap {
	position: absolute;
	/* top: 48px; */
	/* right: 48px; */
	width: 62px;
	height: 62px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	overflow: hidden;
	padding: 24px;
	background: rgba(255,255,255,.85);
	box-shadow: 0 10px 18px rgba(0,0,0,.08), 0 0 0 2px rgba(0,0,0,.14), 0 0 0 6px rgba(255,255,255,.85), 0 0 0 7px rgba(0,0,0,.10), inset 0 6px 10px rgba(0,0,0,.05);
	box-sizing: content-box;
	z-index: 1;
}

	.service-group-panel-icon-wrap:after {
		content: "";
		position: absolute;
		width: 150%;
		height: 150%;
		background: radial-gradient(circle at 0 0, #00000094, #ffffff36);
		z-index: -1;
		transform: rotate( 295deg);
	}

.service-group-panel-icon {
	width: 40px;
	height: 40px;
	opacity: .9;
	filter: invert(1) drop-shadow(1px 1px 0 rgba(255,255,255,1)) drop-shadow(-6px 6px 8px rgba(255,255,255,.8));
}


.service-groups-next {
	width: 80%;
	max-width: 1280px;
	margin: 0 auto;
	margin-bottom: 64px;
	text-align: right;
}

.service-groups-previous {
	width: 80%;
	max-width: 80%;
	margin: 0 auto;
	margin-bottom: 64px;
	text-align: left;
}

	.service-groups-previous a,
	.service-groups-next a {
		color: var(--cream);
	}

		.service-groups-previous a:hover,
		.service-groups-next a:hover {
			text-decoration: underline;
		}


.umb-block-grid__layout-item:has(.service-inside-segue) {
	box-shadow: 0 0 13px 7px var(--cream);
	z-index: 10;
}


.umb-block-grid__layout-item:has(.service-side-by-side),
.umb-block-grid__layout-item:has(.service-groups-previous),
.umb-block-grid__layout-item:has(.interactive-scales-mini) {
	background: var(--service-group-background);
	color: var(--cream);
}





.service-side-by-side {
	width: 80%;
	margin: 4rem auto;
	line-height: clamp(20px, 2vw, 32px);
	font-size: clamp(12px, 2vw, 16px);
	position: relative;
}


	.service-side-by-side h1 {
		line-height: 1.2;
		height: 112px;
		text-align: left;
		padding-left: 132px;
		margin-bottom: 32px;
	}

	.service-side-by-side:after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 1;
		background-image: url(/assets/images/processesGreyscale.png);
		background-size: cover;
		opacity: 0.12; /* Set your desired background transparency */
		background-attachment: fixed;
		/* filter: sepia(3) blur(3px); */
		/* filter: sepia(3); */
		pointer-events: none;
	}

	.service-side-by-side > div > div {
		position: relative;
	}

	.service-side-by-side .service-group-panel-icon-wrap {
		/* display: none; */
	}

	.service-side-by-side ul {
		/* background:Red; */
		margin: 142px 0 0 32px;
	}

	.service-side-by-side .button1.btn-transparent.has-icon {
		margin-top: 42px;
	}

@supports (-webkit-touch-callout: none) {
	/* CSS specific to iOS devices */
	.service-block:before {
		background-attachment: scroll;
	}
}