/*
 * "Following Steps" feature cards (visarzo_feature, style_2 layout).
 * Same issue as the Why Choose Us cards: no height:100% anywhere, so
 * cards shrink-wrap to their own content instead of matching row
 * height, and the icon is absolutely positioned over a padding-left
 * gutter from an older layout. Restyled to match the site's card
 * design system (white card, red top-accent sweep on hover) instead of
 * the old red-fill-from-bottom hover trick, which also changed the
 * card's own height on hover — incompatible with equal-height rows.
 */

.feature-style-two .row {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
}

.feature-style-two .feature-block {
	display: flex;
	margin-bottom: 28px;
}

.feature-block-two {
	width: 100%;
	margin-bottom: 0;
}

.feature-block-two .inner-box {
	position: relative;
	height: 100%;
	width: 100%;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--nji-grey-100);
	border-radius: var(--nji-radius-lg);
	padding: 34px 30px 30px;
	box-shadow: var(--nji-shadow-soft);
	overflow: hidden;
	transition: transform var(--nji-transition), box-shadow var(--nji-transition);
}

.feature-block-two .inner-box:hover {
	padding-bottom: 30px;
	margin-bottom: 0;
	transform: translateY(-8px);
	box-shadow: var(--nji-shadow-card);
}

.feature-block-two .inner-box:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	width: 100%;
	background: linear-gradient(90deg, var(--nji-red) 0%, var(--nji-red-light) 100%);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 350ms ease;
}

.feature-block-two .inner-box:hover:before {
	height: 4px;
	top: 0;
	transform: scaleX(1);
}

.feature-block-two .inner-box:after {
	display: none;
}

.feature-block-two .inner-box .title-inner {
	position: relative;
	padding-left: 0;
	padding-bottom: 18px;
	margin-bottom: 18px;
	min-height: 0;
	border-bottom: 1px solid var(--nji-grey-100);
}

.feature-block-two .inner-box:hover .title-inner {
	border-bottom-color: var(--nji-grey-100);
}

.feature-block-two .inner-box .title-inner .icon-box {
	position: static;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	margin-bottom: 16px;
	background: var(--nji-red-tint);
	border-radius: 50%;
	font-size: 26px;
	line-height: normal;
	color: var(--nji-red);
	transition: background var(--nji-transition), color var(--nji-transition), transform var(--nji-transition);
}

.feature-block-two .inner-box .title-inner .icon-box img,
.feature-block-two .inner-box .title-inner .icon-box svg {
	width: 26px;
	height: 26px;
}

.feature-block-two .inner-box:hover .title-inner .icon-box {
	background: var(--nji-red);
	color: #fff;
	transform: scale(1.08) rotate(-4deg);
}

.feature-block-two .inner-box .title-inner h3 {
	font-size: 19px !important;
	line-height: 1.3 !important;
	color: var(--nji-charcoal);
}

.feature-block-two .inner-box:hover .title-inner h3 {
	color: var(--nji-charcoal);
}

.feature-block-two .inner-box .text {
	flex-grow: 1;
}

.feature-block-two .inner-box .text p {
	font-size: 14.5px;
	line-height: 1.65;
	color: var(--nji-text-body);
}

.feature-block-two .inner-box:hover .text p {
	color: var(--nji-text-body);
}

/* The "Learn More" link was hidden until hover — poor for touch
   devices and accessibility. Keep it always visible instead. */
.feature-block-two .inner-box .link {
	position: relative;
	opacity: 1;
	margin-top: 16px;
	transition: none;
}

.feature-block-two .inner-box .link a {
	color: var(--nji-red);
	font-weight: 600;
	font-size: 14px;
}

.feature-block-two .inner-box .link a i {
	margin-left: 6px;
}