/* ============================================================
   USP Lower Bar – responsive carousel
   ============================================================ */

/* ---------- Outer wrapper ---------- */
.usp-lowerbar {
	background-color: #dce6ee;
	width: 100%;
	overflow: hidden;
	position: relative;
}

/* ---------- Scrollable track ---------- */
.usp-track {
	display: flex;
	flex-direction: row;
	list-style: none;
	margin: 0;
	padding: 0;

	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	overflow-x: auto;
	scrollbar-width: none;
}

.usp-track::-webkit-scrollbar {
	display: none;
}

/* ---------- Individual USP item ---------- */
.usp-item {
	display: flex;
	align-items: stretch;      /* children fill the full height */
	flex-shrink: 0;
}

/*
 * The actual content row lives inside a GB element div (.gb-element-*).
 * We target it as the direct child of .usp-item.
 * This makes icon + text sit side-by-side and vertically centred.
 */
.usp-item > div {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 12px 20px;
	width: 100%;

	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: #0d2b4e;
	text-transform: uppercase;
	white-space: nowrap;
}

/* Override any inline font-size GP may have set on the text paragraph */
.usp-item .usp-text {
	font-size: 13px !important;
	margin: 0;
	padding: 0;
	line-height: 1.2;
	color: inherit;
}

/* Icons – gb-shape SVGs, plain SVGs, <img>, <i> */
.usp-item .gb-shape,
.usp-item .gb-shape svg {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.usp-item .gb-shape svg,
.usp-item svg,
.usp-item img,
.usp-item i {
	width: 32px;
	height: 32px;
	flex-shrink: 0;
	fill: #0d2b4e;
	color: #0d2b4e;
}

/* ============================================================
   DESKTOP  ≥ 1025 px – all 5 items static, evenly spread
   ============================================================ */
@media (min-width: 1025px) {
	.usp-track {
		justify-content: space-around;
		overflow-x: hidden;
		scroll-behavior: auto;
	}

	.usp-item {
		flex: 1 1 0;
	}

	.usp-item > div {
		justify-content: center;
	}
}

/* ============================================================
   TABLET  768 px – 1024 px – 3 items visible, auto-scroll
   ============================================================ */
@media (min-width: 768px) and (max-width: 1024px) {
	.usp-track {
		scroll-snap-type: x mandatory;
	}

	.usp-item {
		flex: 0 0 calc(100% / 3);
		scroll-snap-align: start;
	}

	.usp-item > div {
		justify-content: center;
		white-space: nowrap;
	}
}

/* ============================================================
   MOBILE  < 768 px – 1 item visible, snappy auto-scroll
   ============================================================ */
@media (max-width: 767px) {
	.usp-track {
		scroll-snap-type: x mandatory;
	}

	.usp-item {
		flex: 0 0 100%;
		scroll-snap-align: center;
	}

	.usp-item > div {
		flex-direction: column;
		justify-content: center;
		padding: 16px 12px;
		white-space: normal;
		text-align: center;
		gap: 6px;
	}

	.usp-item .usp-text {
		white-space: normal;
	}

	.usp-item .gb-shape svg,
	.usp-item svg,
	.usp-item img,
	.usp-item i {
		width: 36px;
		height: 36px;
	}
}