/* ===================================
   Introduction: a cluster of coloured circles, each with a word and a line of text.
=================================== */

.section_introduction_excentric .section_description {
	margin-bottom: 70px;
}
.circle_items {
	display: flex;
	flex-wrap: wrap;
	gap: 174px;
	position: relative;
}
.circle_item {
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: center;
	align-items: center;
	padding: 10px;
	border-radius: 100%;
	aspect-ratio: 1;
	line-height: 1;
	color: var(--wp--preset--color--black);
}
.circle_item.bgcolor-green-neon-gradient {
	box-shadow: 0 10px 50px 20px rgba(179, 224, 186, 0.5);
}
.circle_item.bgcolor-blue-gradient {
	box-shadow: 0 10px 50px 20px #ccd7df;
	color: var(--wp--preset--color--white);
}
.circle_item.bgcolor-dark-green-gradient {
	box-shadow: 0 10px 50px 20px rgba(144, 226, 157, 0.5);
	color: var(--wp--preset--color--white);
}
.circle_item.bgcolor-dark-gray-gradient {
	box-shadow: 0 4px 40px #adb8c0;
	color: var(--wp--preset--color--white);
}

.circle_item.bgcolor-light-green-gradient {
	box-shadow: 0 10px 50px rgba(186, 208, 190, 0.4);
}
.circle_item.bgcolor-light-gray-gradient {
	box-shadow: 0 4px 20px #cfd5d9;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(204, 215, 223, 0.6) 76.44%);
}
.circle_item.bgcolor-white-transparent {
	box-shadow: 0 4px 20px #c9dae2;
}

.circle_item.circle_item_2 {
	position: absolute;
	left: 368px;
	top: 148px;
}
.circle_item.circle_item_4 {
	position: absolute;
	left: 800px;
	top: -93px;
}
.circle_item.circle_item_5 {
	position: absolute;
	left: 984px;
	top: 109px;
}

.circle_item.circle_item_6 {
	margin-left: auto;
	margin-right: 115px;
}
.circle_item.circle_item_7 {
	position: absolute;
	right: 0;
	top: 97px;
}

.size-302 {
	width: 302px;
	height: 302px;
}
.size-250 {
	width: 250px;
	height: 250px;
}
.size-227 {
	width: 227px;
	height: 227px;
}
.size-217 {
	width: 217px;
	height: 217px;
}
.size-188 {
	width: 188px;
	height: 188px;
}
.size-163 {
	width: 163px;
	height: 163px;
}
.size-159 {
	width: 159px;
	height: 159px;
}

@media screen and (max-width: 1530px) {
	.size-302 {
		min-width: 140px;
		min-height: 140px;
		width: 20vw;
		height: 20vw;
	}
	.size-250 {
		min-width: 120px;
		min-height: 120px;
		width: 17vw;
		height: 17vw;
	}
	.size-227 {
		min-width: 110px;
		min-height: 110px;
		width: 15vw;
		height: 15vw;
	}
	.size-217 {
		min-width: 95px;
		min-height: 95px;
		width: 14.2vw;
		height: 14.2vw;
	}
	.size-188 {
		min-width: 90px;
		min-height: 90px;
		width: 12.3vw;
		height: 12.3vw;
	}
	.size-163 {
		min-width: 82px;
		min-height: 82px;
		width: 10.7vw;
		height: 10.7vw;
	}
	.size-159 {
		min-width: 78px;
		min-height: 78px;
		width: 10.4vw;
		height: 10.4vw;
	}

	.circle_items {
		gap: 9.4vw;
	}

	.circle_item.circle_item_2 {
		left: 21vw;
		top: 9.5vw;
	}
	.circle_item.circle_item_4 {
		left: 51vw;
		top: -6vw;
	}
	.circle_item.circle_item_5 {
		left: 63vw;
		top: 7vw;
	}
	.circle_item.circle_item_6 {
		margin-right: 7.5vw;
	}
	.circle_item.circle_item_7 {
		top: 7vw;
	}
}
@media screen and (max-width: 980px) {
	.circle_item .circle_title {
		font-size: 16px;
	}

	.circle_item .circle_text {
		font-size: 13px;
	}

	.circle_item.size-163 .circle_title {
		font-size: 14px;
	}
	.circle_item.size-163 .circle_text {
		font-size: 10px;
	}
	.circle_item.size-188 .circle_text {
		font-size: 10px;
	}
}

@media screen and (max-width: 768px) {
	.circle_item.circle_item_5 {
		left: 61vw;
		top: 11vw;
	}
	.section_introduction_excentric.global-block-ptb {
		padding: 67px 0 85px;
	}
}

@media screen and (max-width: 600px) {
	.circle_items {
		column-gap: 15vw;
	}
	.circle_item.circle_item_2 {
		left: 31vw;
		top: 14.5vw;
	}
	.circle_item.circle_item_4 {
		left: auto;
		right: 0;
	}
	.circle_item.circle_item_5 {
		left: 65vw;
	}
	.circle_item.circle_item_7 {
		top: auto;
		position: relative;
	}
}
@media screen and (max-width: 540px) {
	.circle_items {
		column-gap: 10vw;
	}
	.circle_item.circle_item_2 {
		left: 27vw;
		top: 16.5vw;
	}
	.circle_item.circle_item_5 {
		left: 62vw;
		top: 18vw;
	}
}
@media screen and (max-width: 490px) {
	.circle_items {
		column-gap: 4vw;
	}
	.circle_item.circle_item_2 {
		left: 11vw;
		top: 25.5vw;
	}
	.circle_item.circle_item_5 {
		left: 50vw;
		top: 27vw;
	}
	.circle_item.circle_item_6 {
		margin-right: 13.5vw;
	}
	.circle_item.circle_item_3 {
		margin-left: -11px;
	}
}
/* Stable stacking. Circles 1, 3 and 6 sit in normal flow, and 2, 4, 5 and 7 are positioned. While the
   reveal animation runs, every circle is its own layer stacked in page order. When it ends,
   positioned circles jump above the others, so overlapping semi-transparent circles would swap
   ("Drive" over "Reimagine", "Refresh" over "Promote"). Explicit z-indexes keep the final order
   from the first frame. */
.circle_items .circle_item_1,
.circle_items .circle_item_3,
.circle_items .circle_item_6 {
	position: relative;
	z-index: 1;
}
.circle_items .circle_item_2,
.circle_items .circle_item_4,
.circle_items .circle_item_5,
.circle_items .circle_item_7 {
	z-index: 2;
}