/*
 * how-it-works.css
 * Clients page: "How it Works" section -- title block uses shared
 * .c-title-block classes. The 3 numbered steps (Shape the
 * question / Build a picture / Validate the conclusion) use
 * vcex_icon_box with icon_alternative_character as the number --
 * default theme sizing rendered the number far too large (60px)
 * relative to Figma. Scaled down and adjusted heading/text sizes to
 * match Figma.
 * Added 2026-08-25.
 */

/* el_class doesn't apply for this vcex_icon_box (icon="" +
   icon_alternative_character combo) -- target these numbered ones
   structurally instead: text-only icon box (no svg/icon-font child)
   is unique to the "How it Works" 3 steps on this page (the other
   icon_box instances all use real icons/svg). */
.c-how-it-works .vcex-icon-box-icon {
	font-size: 18px !important;
	width: auto !important;
	height: auto !important;
}

.c-how-it-works .vcex-icon-box-heading {
	font-size: 18px !important;
	font-weight: var(--font-weight-semibold) !important;
}

.c-how-it-works .vcex-icon-box-content p {
	font-size: 16px !important;
}


/* Font-size overrides for this section's title block, scoped to the
   .c-how-it-works section wrapper (unique to this section) so
   they don't affect the other c-title-block instances on this page
   (Why Clients Choose Us, etc). Per feedback. */
.c-how-it-works .c-title-block__eyebrow {
	font-size: 16px !important;
}

.c-how-it-works .c-title-block__title {
	font-size: 24px !important;
}

.c-how-it-works .c-title-block__body {
	font-size: 16px !important;
}


.c-how-it-works .vcex-image-inner {
	width: 644px !important;
	max-width: 644px !important;
}

.c-how-it-works .vcex-image-img {
	max-width: 644px !important;
	max-height: 644px !important;
	width: 100%;
	height: auto;
}


/* Align description paragraph under the number/icon (not under the
   title, which sits to the right of the icon). Offset matches the
   measured icon+gap width for this section (~40.6px). Per feedback. */
.c-how-it-works .vcex-icon-box-content {
	margin-left: -40.6px !important;
	width: calc(100% + 40.6px) !important;
}


/* Reduce space between description and divider from 40px to 25px
   (divider had margin-top:20px from wpex-my-20; reduced by 15px).
   Per feedback. */
.c-how-it-works .vcex-divider {
	margin-top: 25px !important;
}


/* Keep this section's title block left-aligned on mobile, overriding
   the shared .c-title-block system's default of centering on mobile
   (<=767px). Per feedback. */
@media (max-width: 767px) {
	.c-how-it-works .c-title-block__eyebrow,
	.c-how-it-works .c-title-block__title,
	.c-how-it-works .c-title-block__body {
		text-align: left !important;
	}
}


/* Shrink the "How it Works" image container on mobile -- it was
   staying fixed at 644x644px (the desktop size) and overflowing the
   viewport. Constrain to available width, keep it square. Per
   feedback. */
@media (max-width: 767px) {
	.c-how-it-works .vcex-image-inner {
		width: 100% !important;
		max-width: 100% !important;
	}

	.c-how-it-works .vcex-image-img {
		max-width: 100% !important;
		max-height: 100% !important;
		width: 100%;
		height: auto;
		aspect-ratio: 1 / 1;
	}
}


/* Section wrapper spacing -- moved out of WPBakery's inline css
   attribute per Monika's request (spacing controlled by CSS only,
   not editable in the visual editor). */
.c-how-it-works {
	padding: 4vw 6vw;
}

.c-how-it-works__inner {
	padding: 20px 0 30px;
	max-width: var(--max-width) !important;
	margin-left: auto !important;
	margin-right: auto !important;
	left: 0 !important;
	right: 0 !important;
}

/* Replaces the four [vcex_spacing ... visibility="hidden-phone"]
   shortcodes that manually added desktop-only spacing between the
   eyebrow/title, body/divider, divider/steps, and after the last
   step. */
@media (min-width: 768px) {
	.c-how-it-works .c-title-block__eyebrow {
		margin-bottom: 40px;
	}
	.c-how-it-works .c-title-block__body {
		margin-bottom: 20px;
	}
	.c-how-it-works .vcex-divider {
		margin-bottom: 20px !important;
	}
	.c-how-it-works .vcex-icon-box-one:last-child {
		margin-bottom: 40px;
	}
}