#r-span {
	font-size: 0.6em; /* Adjust smaller/larger as needed */
	vertical-align: super; /* Keeps it raised like a trademark symbol */
}

#tagline-txt {
	/* color: var(--color-secondary); */
	/* color: #9dd4f2; */
	color: var(--color-white);
	font-weight: 300;
}

.bg-gradient-blue {
	background-image: linear-gradient(
		45deg,
		hsl(204deg 100% 20%) 0%,
		hsl(204deg 89% 22%) 8%,
		hsl(205deg 79% 26%) 17%,
		hsl(205deg 72% 29%) 25%,
		hsl(205deg 67% 31%) 33%,
		hsl(205deg 64% 34%) 42%,
		hsl(205deg 61% 37%) 50%,
		hsl(205deg 58% 40%) 58%,
		hsl(205deg 56% 42%) 67%,
		hsl(205deg 55% 45%) 75%,
		hsl(204deg 53% 48%) 83%,
		hsl(204deg 53% 51%) 92%,
		hsl(204deg 58% 53%) 100%
	);
}

@media (max-width: 767.98px) {
	.capabilities .row > [class*='col-'] {
		padding-left: 0.25rem; /* same as p-1 */
		padding-right: 0.25rem; /* same as p-1 */
	}
}

@media (max-width: 768px) {
	/* adjust breakpoint if needed */
	.capabilities .row {
		display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		gap: 0.5rem; /* spacing between cards */
		padding-bottom: 1rem; /* space for scrollbar */
		-webkit-overflow-scrolling: touch; /* smooth scroll on iOS */
	}

	.capabilities .row::-webkit-scrollbar {
		display: none; /* hide scrollbar (optional) */
	}

	.capabilities .col-md-6 {
		flex: 0 0 80%; /* each card takes ~80% of viewport width */
		max-width: 80%;
	}
}

.stats,
.stats h2 {
	color: var(--color-white);
}

.stats-box {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 100%;
	background-color: var(--Primitives-Opacity-White5);
	border: solid 1px var(--Primitives-Opacity-White10);
	border-radius: 4px;
	padding: 20px;
	gap: 10px;
}

.number {
	font-family: 'Poppins', serif;
	font-weight: 600;
	font-size: 42px;
}

@media (max-width: 992px) {
	.number {
		font-size: 34px; /* smaller number size for tablet */
	}
}

@media (max-width: 576px) {
	.number {
		font-size: 32px; /* smaller number size for mobile */
	}
}

p .number {
	margin-bottom: 20;
}

#btn-contact-us {
	padding-left: 16px;
	padding-right: 16px;
}

#contact-arrow {
	display: inline-block;
	margin-left: 8px;
	animation: arrowMove 0.8s infinite alternate ease-in-out;
}

@keyframes arrowMove {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(6px);
	}
}