/*
 * "Why Choose Us" section: the parent widget renders each benefit as a
 * plain stacked block (icon, heading, paragraph) with no layout of its
 * own. Turning that into a proper responsive card grid.
 */

.choose-section {
	background: transparent !important;
	padding: 0;
}

/* The widget's original design paired a narrow (590px) text column with
   a decorative image floating on the right — not what a full-width
   card grid needs. Let the content block use the full section width. */
#content_block_2 .content-box {
	max-width: 100%;
}

.choose-section .content-box .text {
	margin-bottom: 20px;
}

/* The original design also absolutely-positioned the icon over a
   padding-left:110px reserved gutter (old icon-beside-text layout) and
   added its own margin-bottom between items. Both fight the flex-column
   card layout above. Same-selector rules turned out to be load-order
   dependent rather than reliably losing to source order, so these are
   forced with !important to remove any ambiguity. */
#content_block_2 .content-box .inner-box .single-item {
	padding-left: 30px !important;
	margin-bottom: 0 !important;
}

#content_block_2 .content-box .inner-box .single-item .icon-box {
	position: static !important;
	width: 64px !important;
	height: 64px !important;
	line-height: normal !important;
	font-size: 28px !important;
	color: var(--nji-red) !important;
	background: var(--nji-red-tint) !important;
	box-shadow: none !important;
	text-align: center !important;
}

.choose-section .pattern-layer {
	display: none;
}

.choose-section .content-box .text p {
	max-width: 760px;
	color: var(--nji-text-body);
	font-size: 16px;
	line-height: 1.7;
}

.choose-section .inner-box {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-auto-rows: 1fr;
	align-items: stretch;
	gap: 28px;
	margin-top: 44px;
}

.choose-section .single-item {
	position: relative;
	height: 100%;
	min-height: 220px;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--nji-grey-100);
	border-radius: var(--nji-radius-lg);
	padding: 36px 30px 30px;
	box-shadow: var(--nji-shadow-soft);
	overflow: hidden;
	transition: transform var(--nji-transition), box-shadow var(--nji-transition), border-color var(--nji-transition);
}

.choose-section .single-item:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(90deg, var(--nji-red) 0%, var(--nji-red-light) 100%);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 350ms ease;
}

.choose-section .single-item:hover {
	transform: translateY(-8px);
	box-shadow: var(--nji-shadow-card);
	border-color: transparent;
}

.choose-section .single-item:hover:before {
	transform: scaleX(1);
}

.choose-section .single-item .icon-box {
	width: 64px;
	height: 64px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--nji-red-tint);
	border: none;
	border-radius: 50%;
	color: var(--nji-red);
	font-size: 28px;
	margin-bottom: 24px;
	transition: background var(--nji-transition), color var(--nji-transition), transform var(--nji-transition);
}

.choose-section .single-item .icon-box img,
.choose-section .single-item .icon-box svg {
	width: 28px;
	height: 28px;
}

.choose-section .single-item:hover .icon-box {
	background: var(--nji-red);
	color: #fff;
	transform: scale(1.08) rotate(-4deg);
}

.choose-section .single-item .choose_item_heading {
	font-size: 19px !important;
	line-height: 1.3 !important;
	margin-bottom: 12px;
	padding-bottom: 12px;
	color: var(--nji-charcoal);
	border-bottom: 1px solid var(--nji-grey-100);
}

.choose-section .single-item p {
	font-size: 14.5px;
	line-height: 1.65;
	color: var(--nji-text-body);
	margin: 0;
	flex-grow: 1;
}

@media only screen and (max-width: 991px) {
	.choose-section .inner-box {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media only screen and (max-width: 599px) {
	.choose-section .inner-box {
		grid-template-columns: 1fr;
	}
}