/* About Us — "Our Features" row (FMA Licensed & Regulated / No Fees /
   Advice Tailored to You / Always Here for You) is a single flex row that
   wraps at narrower widths. "No Fees" moves to the rightmost/last position
   via CSS order rather than DOM reordering, so screen readers and keyboard
   nav still encounter the four items in their original 1-4 sequence — only
   the visual position changes. Left unscoped by breakpoint (no media
   query): at the tablet 2x2 wrap this still lands it in the right-hand
   column (bottom-right), and at the mobile single-column stack it becomes
   the last item — both read as reasonable equivalents of "rightmost" at
   those widths, confirmed visually. */
.elementor-element-caba075 {
	order: 1;
}

/* Card treatment to match the homepage Services cards (elementskit-icon-box
   widgets on the Home/Insurance/Mortgage grids, styled via each widget's own
   settings — see tnc-service-cards.css for the equal-height side of that).
   These four are plain Elementor native icon-box widgets with no card
   background at all — just icon + heading + text floating on the section's
   white background, separated by a thin vertical divider line
   (levis/style.css .features-item:before). Client felt this read as
   under-styled next to the polished Services cards elsewhere on the site,
   and specifically flagged the heading size: each title used the "Secondary"
   global typography (a section-subheading-sized preset), so a 2-line title
   like "FMA Licensed & Regulated" ran noticeably taller than a 1-line one
   like "No Fees", leaving the description text below start at different
   heights across the row. Matches Services' exact card values (border-
   radius, shadow, title font-size) for visual consistency between the two.

   Card bg/shadow/radius/padding go on .elementor-widget-container (the
   actual visible box) rather than .features-item itself (the outer widget
   wrapper) because that outer wrapper already carries Elementor's own
   inline `padding: 0 15px` (its old spacer-between-columns mechanism) —
   zeroed out below in favour of the container gap, so the widget-container
   is the only element that needs the new card padding. */
.elementor-element-bcaef73 {
	gap: 30px;
}

/* Each item's own width is a flat inline 25% (Elementor's
   `_element_custom_width`), sized for the ORIGINAL 0px desktop gap (4 x 25%
   = 100%, no room left over). Adding a real 30px gap above without
   adjusting this pushes the row over 100% width and wraps early — same
   "25% width + 30px gap" arithmetic the Services grids solve with
   `calc(25% - 22.5px)` (3 gaps x 30px / 4 items), reused here for the same
   reason. Only needed at the >1024px desktop breakpoint: the tablet/mobile
   custom widths (`calc(50% - 15px)` / auto) were already written to match
   their own 30px flex_gap, which was already correct before this change. */
@media (min-width: 1025px) {
	.features-item {
		width: calc(25% - 22.5px) !important;
	}
}

.features-item {
	padding: 0 !important;
}

.features-item:before {
	display: none;
}

.features-item > .elementor-widget-container {
	background-color: #FFFFFF;
	border-radius: 30px 30px 30px 0;
	box-shadow: 0 0 30px rgba(0, 0, 0, 0.0392156862745098);
	padding: 40px;
}

@media (max-width: 1024px) {
	.features-item > .elementor-widget-container {
		padding: 30px;
	}
}

@media (max-width: 767px) {
	.features-item > .elementor-widget-container {
		padding: 20px;
	}
}

/* Title: same 18px/600/1.2 the Services cards use (globals/typography?id=
   secondary, what this was using before, is a much larger section-heading
   preset — fine on its own but oversized for a small icon-box card).
   min-height reserves 2 lines so all four descriptions start level
   regardless of how many lines an individual title wraps to, same approach
   as .services-items .elementskit-info-box-title in tnc-service-cards.css. */
.features-item .elementor-icon-box-title {
	font-size: 18px !important;
	font-weight: 600 !important;
	line-height: 1.2em !important;
	min-height: 2.4em;
}

@media (max-width: 767px) {
	.features-item .elementor-icon-box-title {
		min-height: 0;
	}
}