/*--------------------------------------------------------------
# Feature Card grid that is mobile responsive
---------------------------------------------------------------*/

/*----------------------------------------------------------------
# Feature-grid-1 dark background design to stand out with big accent
-----------------------------------------------------------------*/

.feature-grid-1 {
	background-color: var(--brand-secondary-light) !important;
}

.feature-card {
	background-color: var(--brand-primary-light);
	border-radius: 12px;
	box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

.feature-card h5 {
	color: color-mix(in srgb, var(--brand-secondary-accent) 80%, black 20%);
	
}

/* Icon placeholder */
.icon {
	width: 40px;
	height: 40px;
	border-radius: 6px;
	display: inline-block;
}

/*-----------------------------------------------------------------------
# Feature-grid-2 light background design to hold more extensive content 
------------------------------------------------------------------------*/

.feature-grid-2 {
	background-color: var(--brand-primary-light) !important;
}

.feature-grid-2 h2 {
	margin-bottom: 24px;
}

.feature-card-2 {
	background-color: var(--brand-secondary-light);
	padding: 12px;
	border-radius: 12px;
	box-shadow: 0 2px 6px rgba(0,0,0,0.05);
	display: flex;
	flex-direction: column;
	height: 100%;
}

.feature-title-2 i {
	margin-right: 6px;
}

/*----------------------------------------------------------------
# Feature-grid-3 invisable cards, ideal to show a process timeline
-----------------------------------------------------------------*/


.horiz-rule {
	height:2px; 
	transform:translateY(-50%); 
	background:var(--brand-secondary-light); 
	z-index:0;
}

.feature-grid-3 .rounded-circle {
	position: relative;
	z-index: 2;
	box-shadow: 0 6px 20px rgba(13,110,253,0.06);
	width: 96px;
	height: 96px;
	border: 2px solid var(--brand-primary-dark);
	background: #fff;
}

.feature-grid-3 .rounded-circle img {
	width: 56px;
	height: 56px;
}

/* CTA styling */
.feature-grid-3 .cta-button {
	background: var(--brand-primary-dark);
	color: var(--brand-primary-light) !important;
	border-radius: 10px;
	padding: 14px 18px;
	font-weight: 600;
}

@media (min-width: 992px) {
	#how-it-works .card {
		background: transparent;
	}
	
}

/* Small screens: vertical spacing between steps */
@media (max-width: 991.98px) {
	#how-it-works .rounded-circle {
		margin-bottom: .75rem;
	}
}