.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%
	);
}

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

.mySwiper {
	width: 100%;
	padding: 20px 0;
}

#modes h5 {
	text-transform: uppercase;
}

#modes button {
	justify-content: center;
}

#modes .my-card {
	background-color: var(--color-primary);
	color: var(--color-white);
}

#modes .my-card h5 {
	color: var(--color-secondary-light);
}

.mode-card {
	background: white;
	border-radius: 16px;
	padding: 16px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	height: 100%;
	text-align: justify;
}

.mode-image {
	width: 100%;
	height: 180px;
	object-fit: cover;
	/* border-radius: 12px; */
	border-radius: 0.375rem;
	margin-bottom: 16px;
}

.mode-title {
	margin: 8px 0;
	/* font-size: 20px; */
	/* font-weight: bold; */
	text-transform: uppercase;
}

.mode-desc {
	margin-bottom: 16px;
}

.quote {
	color: var(--color-primary);
	font-size: 35px;
	line-height: 1em;
	font-weight: 400;
}

.icon-box {
	width: 48px;
	height: 48px;
	/* background-color: var(--Primitives-Color-NeutralLightest); */
	background-color: #dee2e6;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px;
	border-radius: 0.375rem;
}

@media (max-width: 576px) {
	.icon-box {
		width: 36px;
		height: 36px;
	}
}

.icon-box img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain; /* Keeps the whole image visible */
	display: block; /* Removes unwanted gaps */
}

.icon-box i {
	font-size: 24px; /* icon size */
	line-height: 1;
	/* color: white; */
}

@media (max-width: 576px) {
	.icon-box i {
		font-size: 16px; /* smaller icon size for mobile */
	}
}

@media (max-width: 767.98px) {
	#value-add .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 */
	#value-add .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 */
	}

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

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

@media (max-width: 767.98px) {
	#modes .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 */
	#modes .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 */
	}

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

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