.hero h1 { font-size: clamp(2.25em, -0.5em + 6vw, 3.6875em);}

#main-services {
	padding: 3em 0;
	ul.grid {
		list-style: none;
		margin: 0;
		padding: 0;
		align-content: center;
		display:grid;
		grid-template-columns: 1fr 1fr;
	
		column-gap: 2rem;
		row-gap: 2rem;
	}
	li.grid-item {
		background: white;
		padding: 4rem 4rem 4rem 1.5rem ;
		position: relative;
		display: flex;
	}
	
	.col-icon { padding-right:1em; }
	.col-icon > svg-icon { font-size: 2.75em; color: #777; margin-top: -0.25em; }
	h4 { font-weight: var(--font-weight-extrabold); font-size: 1.5em; }
	p { font-size: 1.125em; margin: 0; }
	a.cover { position: absolute; left: 0; top: 0; right:0; bottom:0; border-top: solid 8px; }
	.green a.cover { border-top-color:var(--category-accounting-color)}
	.red a.cover { border-top-color:var(--category-payroll-color)}
	.blue a.cover { border-top-color:var(--category-tax-color)}
	.yellow a.cover { border-top-color:var(--category-m-a-color)}
	a.cover:hover { box-shadow: var(--base-box-shadow)}
}

.row.w-image-col {
	.image-col { flex-shrink: 1; flex-grow: unset !important; min-width:35%; background-repeat:no-repeat; background-position: 50% 100%; background-size:contain; }
	h3 { white-space: wrap; }
	p { margin-bottom: 6rem;}
}
.chart-graphics {
	display: grid;
	align-items: flex-start;
	grid-template-columns: 1fr 1fr;
	column-gap: 5%;
	margin-bottom: 3rem;
	.graphic { position: relative;  }
	.graphic h5 { font-size:1.25em; position: absolute; top:50%; transform: translateY(-50%); white-space: nowrap; }
	.graphic h5:after { 
		content: ''; 
		position: absolute; 
		display: block; 
		left:40%; 
		width: 120px; 
		height: 120px;
		background: url('../../media/images/graphics/curved-arrow-ccw.svg') no-repeat 50%; 
		background-size: contain; 
	}
	.graphic-1 {
		h5 { left: calc(100% + 2rem); }
		h5:after {
			bottom: 0;
			transform:rotate(10deg) translateX(-80%);
			transform-origin:center;
		}
	}
	.graphic-2 {
		margin-top: 75%;
		h5 { right: calc(100% + 2rem); }
		h5:after {
			transform: rotate(180deg);
			top:10px;
			animation-duration:1s;
			animation-name: nod;
			animation-iteration-count: 100;
  		animation-direction:alternate-reverse;
			animation-delay: 3s;
		}
	}
}
@keyframes nod {
	0% {
		transform: rotate(160deg);
	}
	
	100% {
		transform: rotate(180deg);
	}
}
.hero { overflow: hidden; }
.hero .col:first-child {flex-grow:unset; flex-shrink: 1; padding-top: 3rem; padding-bottom: 2rem; }
.hero div.col[data-defer-bg] { background-repeat:no-repeat;background-size:contain; background-position: 50% 100%; min-width: 290px }
@media(min-width:992px) {
.row-cols-2 { justify-content:center;}
.row-cols-2 > .col { max-width:40%}
}
@media(min-width:768px) {
	.row.w-image-col .col:not(.image-col) { padding-top: 5%; }
	.hero { padding-top: 2rem; }
	.hero h1 { white-space: nowrap; }
	
	.row-cols-2 h3 { white-space: nowrap; margin-right:2rem }
}
@media(max-width:991px) {
	.hero .btn-lg { font-size:105%; padding: 0.5em 1.875em;}
}
@media(max-width: 767px) {
	.hero { padding: 3rem 0 2rem; position: relative; }
	.hero .col:first-child { max-width: 75%}
	.hero div.col[data-defer-bg] {
		position: absolute;
		left: auto;
		right: 0;
		top: 0;
		height: 100%;
		width: 20%;
		z-index: -1;
		opacity: 0.75;
		background-size: cover;
		background-repeat: no-repeat;
		background-position: 50px 100%;
	}
	
	#main-services {
		padding: 1.5rem 0;
		ul.grid {
			grid-template-columns:100%;
			row-gap: 1.5rem;
		}
		li.grid-item {
			margin-bottom: 0;
			padding: 2.75rem 4rem 2rem 1.5rem ;
		}
	}
	.row.w-image-col { flex-direction: column-reverse; }
	.row.w-image-col p { margin-bottom: 2em; }
	.row.w-image-col > div {  width:unset !important; min-width:unset !important; max-width:unset !important; }
	.row.w-image-col .image-col { padding-right: 0; min-height: 250px;}

	.image-col.flip-mobile { transform: scaleX(-100%); background-position-x: 3rem !important; }

	.chart-graphics {
		column-gap: 0;
		.graphic h5:after { width: 60px; height: 70px; }
		.graphic-2 { margin-top: 90%; }
		}
}
@media(max-width:420px) {
.chart-graphics {
	display: block;

	.graphic h5 { left: auto !important; right: auto !important; position: static; top:auto; transform: initial; white-space: initial; }
	.graphic h5:after { display: none; }
	.graphic-1 { margin-bottom: 3rem; }
	.graphic-2 { margin-top: 0;}
}
}