/* cc-font-inherit-reset: some theme stylesheets set font-family directly on
 * span/a/strong (e.g. "p, a, strong, span { font-family: Poppins }"), which
 * stops a parent's Typography control from reaching inner text. Kept at the top
 * so explicit rules below and Elementor controls still win. */
.cc-icon-boxes :where(span, a, strong, b, em, i) {
	font-family: inherit;
}

.cc-icon-boxes {
	--cc-ib-cols: 3;
	--cc-ib-lift: -4px;
	--cc-ib-transition: 280ms;
	--cc-ib-icon-scale: 1.06;
	--cc-ib-accent-w: 32px;
	--cc-ib-accent-w-hover: 52px;
	align-items: stretch;
	display: grid;
	gap: 24px;
	grid-template-columns: repeat(var(--cc-ib-cols), minmax(0, 1fr));
	width: 100%;
}

.cc-icon-box {
	align-items: flex-start;
	background: linear-gradient(135deg, #ffffff 0%, #f1f6fd 100%);
	border: 1px solid rgba(197, 211, 235, 0.65);
	border-radius: 12px;
	box-shadow: 0 12px 30px -20px rgba(16, 42, 110, 0.28);
	box-sizing: border-box;
	color: inherit;
	display: flex;
	gap: 22px;
	height: 100%;
	padding: 28px;
	position: relative;
	text-align: left;
	text-decoration: none;
	transition: transform var(--cc-ib-transition) ease, box-shadow var(--cc-ib-transition) ease, border-color var(--cc-ib-transition) ease, background var(--cc-ib-transition) ease;
}

a.cc-icon-box:hover,
a.cc-icon-box:focus {
	color: inherit;
	text-decoration: none;
}

a.cc-icon-box:focus-visible {
	outline: 2px solid #2f6fe0;
	outline-offset: 3px;
}

.cc-icon-box__icon {
	align-items: center;
	background: radial-gradient(circle at 35% 30%, #f5f9ff 0%, #dce8fb 100%);
	border-radius: 50%;
	box-shadow: inset 0 0 0 1px rgba(47, 111, 224, 0.08), 0 8px 18px -10px rgba(47, 111, 224, 0.45);
	box-sizing: border-box;
	color: #1f5fd1;
	display: flex;
	flex: 0 0 auto;
	font-size: 26px;
	height: 64px;
	justify-content: center;
	line-height: 1;
	transition: transform var(--cc-ib-transition) ease, color var(--cc-ib-transition) ease, background var(--cc-ib-transition) ease;
	width: 64px;
}

.cc-icon-box__icon i {
	display: block;
	font-size: inherit;
	line-height: 1;
}

.cc-icon-box__icon svg {
	display: block;
	fill: currentColor;
	height: 1em;
	width: 1em;
}

.cc-icon-box__icon img {
	display: block;
	height: auto;
	max-width: none;
	width: 1.6em;
}

.cc-icon-box__content {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-width: 0;
}

.cc-icon-box__title {
	color: #0b1a5c;
	font-family: "Poppins", sans-serif;
	font-size: var(--cc-fc-type-elements-heading-size, 20px);
	font-style: normal;
	font-weight: 600;
	letter-spacing: 0;
	line-height: var(--cc-fc-type-elements-heading-line-height, 1.3);
	margin: 0;
	transition: color var(--cc-ib-transition) ease;
}

.cc-icon-box__accent {
	background: #2f6fe0;
	border-radius: 2px;
	display: block;
	height: 2px;
	/* Horizontal margins follow the Text Alignment control. */
	margin: 12px var(--cc-ib-accent-mr, auto) 12px var(--cc-ib-accent-ml, 0);
	transition: width var(--cc-ib-transition) ease, background var(--cc-ib-transition) ease;
	width: var(--cc-ib-accent-w);
}

.cc-icon-box__description {
	color: #5d6475;
	font-family: "Poppins", sans-serif;
	font-size: var(--cc-fc-type-elements-body-size, 15px);
	font-style: normal;
	font-weight: 400;
	line-height: var(--cc-fc-type-elements-body-line-height, 1.6);
	margin: 0;
	transition: color var(--cc-ib-transition) ease;
}

/* ---- Hover ------------------------------------------------------------- */

.cc-icon-boxes--hover .cc-icon-box:hover,
.cc-icon-boxes--hover .cc-icon-box:focus-visible {
	border-color: rgba(47, 111, 224, 0.35);
	box-shadow: 0 22px 40px -22px rgba(16, 42, 110, 0.4);
	transform: translateY(var(--cc-ib-lift));
}

.cc-icon-boxes--hover .cc-icon-box:hover .cc-icon-box__icon,
.cc-icon-boxes--hover .cc-icon-box:focus-visible .cc-icon-box__icon {
	transform: scale(var(--cc-ib-icon-scale));
}

.cc-icon-boxes--hover .cc-icon-box:hover .cc-icon-box__accent,
.cc-icon-boxes--hover .cc-icon-box:focus-visible .cc-icon-box__accent {
	width: var(--cc-ib-accent-w-hover);
}

/* ---- Responsive fallbacks (the Columns control normally sets these) ----- */

@media (max-width: 1024px) {
	.cc-icon-boxes {
		--cc-ib-cols: 2;
	}
}

@media (max-width: 767px) {
	.cc-icon-boxes {
		--cc-ib-cols: 1;
		gap: 16px;
	}

	.cc-icon-box {
		gap: 18px;
		padding: 22px;
	}

	.cc-icon-box__icon {
		font-size: 22px;
		height: 56px;
		width: 56px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cc-icon-box,
	.cc-icon-box__icon,
	.cc-icon-box__accent {
		transition: none;
	}

	.cc-icon-boxes--hover .cc-icon-box:hover,
	.cc-icon-boxes--hover .cc-icon-box:focus-visible {
		transform: none;
	}
}