/* Custom UX Builder Card feature — child theme */

.ux-card-feature {
	--ux-card-feature-bg: #ffffff;
	--ux-card-feature-border-color: #e2e2e2;
	--ux-card-feature-border-width: 1px;
	--ux-card-feature-accent: #d3272d;
	--ux-card-feature-accent-height: 4px;
	--ux-card-feature-padding: 40px;
	--ux-card-feature-icon-size: 42px;
	--ux-card-feature-icon-color: #d3272d;
	--ux-card-feature-title-color: #1a1a1a;
	--ux-card-feature-title-size: 1.25rem;
	--ux-card-feature-text-color: #6d6762;
	--ux-card-feature-text-size: 0.95rem;
	position: relative;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: var(--ux-card-feature-padding);
	background-color: var(--ux-card-feature-bg);
	border: 0 solid transparent;
	border-radius: 0;
	text-align: left;
}

.ux-card-feature > style {
	display: none !important;
}

.ux-card-feature.align-center {
	text-align: center;
}

.ux-card-feature.align-right {
	text-align: right;
}

.ux-card-feature.align-center .ux-card-feature__icon,
.ux-card-feature.align-right .ux-card-feature__icon {
	margin-left: auto;
}

.ux-card-feature.align-center .ux-card-feature__icon {
	margin-right: auto;
}

.ux-card-feature--accent {
	box-shadow: 0 10px 28px rgba(17, 17, 17, 0.07);
}

.ux-card-feature--accent::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: var(--ux-card-feature-accent-height);
	background-color: var(--ux-card-feature-accent);
}

.ux-card-feature--bordered {
	--ux-card-feature-icon-color: #d3272d;
	--ux-card-feature-title-color: #111111;
	--ux-card-feature-text-color: #4a4a4a;
	border: var(--ux-card-feature-border-width) solid var(--ux-card-feature-border-color);
	box-shadow: none;
}

.ux-card-feature__icon {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	width: var(--ux-card-feature-icon-size);
	height: var(--ux-card-feature-icon-size);
	margin: 0 0 1.1em;
	color: var(--ux-card-feature-icon-color);
}

.ux-card-feature.align-center .ux-card-feature__icon {
	justify-content: center;
}

.ux-card-feature.align-right .ux-card-feature__icon {
	justify-content: flex-end;
}

.ux-card-feature__icon svg,
.ux-card-feature__icon img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 100%;
	object-fit: contain;
}

.ux-card-feature__icon-svg {
	display: block;
	width: 100%;
	height: 100%;
	background-color: currentColor;
	-webkit-mask: var(--ux-card-feature-icon-mask) center / contain no-repeat;
	mask: var(--ux-card-feature-icon-mask) center / contain no-repeat;
}

.ux-card-feature__icon-svg.is-shield-check {
	--ux-card-feature-icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22black%22%20fill-rule%3D%22evenodd%22%20d%3D%22M12%202.4l8.2%203.3v6.5c0%205.1-3.6%209.5-8.2%2010.9C7.4%2021.7%203.8%2017.3%203.8%2012.2V5.7L12%202.4zm-1.75%2013.05L7.2%2012.4l1.35-1.35%201.7%201.7%204.7-4.7%201.35%201.35-6.05%206.05z%22%2F%3E%3C%2Fsvg%3E");
}

.ux-card-feature__icon-svg.is-bolt {
	--ux-card-feature-icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linejoin%3D%22round%22%20stroke-linecap%3D%22round%22%20d%3D%22M13.2%203.2L5.4%2013.4h6.1l-1.1%207.4%207.9-10.3h-6.1l1-7.3z%22%2F%3E%3C%2Fsvg%3E");
}

.ux-card-feature__icon-svg.is-check {
	--ux-card-feature-icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22black%22%20fill-rule%3D%22evenodd%22%20d%3D%22M12%202.2a9.8%209.8%200%20100%2019.6%209.8%209.8%200%20000-19.6zm-1.6%2013.5L7.1%2012.4l1.3-1.3%201.99%202%204.5-4.5%201.3%201.3-5.8%205.85z%22%2F%3E%3C%2Fsvg%3E");
}

.ux-card-feature__icon-svg.is-star {
	--ux-card-feature-icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22black%22%20d%3D%22M12%202.8l2.7%205.5%206.1.9-4.4%204.3%201%206.1L12%2016.7%206.6%2019.6l1-6.1-4.4-4.3%206.1-.9L12%202.8z%22%2F%3E%3C%2Fsvg%3E");
}

.ux-card-feature__icon-svg.is-lock {
	--ux-card-feature-icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22black%22%20fill-rule%3D%22evenodd%22%20d%3D%22M8.2%209.2V7.4a3.8%203.8%200%20017.6%200v1.8h1.5c.7%200%201.3.6%201.3%201.3v9.2c0%20.7-.6%201.3-1.3%201.3H6.7c-.7%200-1.3-.6-1.3-1.3v-9.2c0-.7.6-1.3%201.3-1.3h1.5zm1.8-1.8a2%202%200%20114%200v1.8h-4V7.4zM12%2013.1a1.5%201.5%200%20100%203%201.5%201.5%200%20000-3z%22%2F%3E%3C%2Fsvg%3E");
}

.ux-card-feature__icon-svg.is-heart {
	--ux-card-feature-icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22black%22%20d%3D%22M12%2020.4s-7.4-4.6-9.1-8.7C1.5%208.4%203.2%205%206.6%205c2%200%203.4%201.2%205.4%203.4C14%206.2%2015.4%205%2017.4%205c3.4%200%205.1%203.4%203.7%206.7-1.7%204.1-9.1%208.7-9.1%208.7z%22%2F%3E%3C%2Fsvg%3E");
}

.ux-card-feature__icon-svg.is-users {
	--ux-card-feature-icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22black%22%20d%3D%22M8.6%2012.2a3.4%203.4%200%20110-6.8%203.4%203.4%200%20010%206.8zm7.6-1.2a2.8%202.8%200%20100-5.6%202.8%202.8%200%20000%205.6zM2.8%2019.4c.4-3.4%203.1-5.4%205.8-5.4s5.4%202%205.8%205.4H2.8zm10.6%200c.2-1.6.9-3%202-3.9%201%20.4%202.1.6%203.3.6%201.8%200%203.4-.5%204.5-1.5v4.8h-9.8z%22%2F%3E%3C%2Fsvg%3E");
}

.ux-card-feature__icon-svg.is-cog {
	--ux-card-feature-icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22black%22%20fill-rule%3D%22evenodd%22%20d%3D%22M10.1%203.4h3.8l.5%202.2%202%20.9%202-1.1%202.7%202.7-1.1%202%20.9%202%202.2.5v3.8l-2.2.5-.9%202%201.1%202-2.7%202.7-2-1.1-2%20.9-.5%202.2h-3.8l-.5-2.2-2-.9-2%201.1-2.7-2.7%201.1-2-.9-2-2.2-.5V9.6l2.2-.5.9-2-1.1-2%202.7-2.7%202%201.1%202-.9.5-2.2zM12%2015.2a3.2%203.2%200%20100-6.4%203.2%203.2%200%20000%206.4z%22%2F%3E%3C%2Fsvg%3E");
}

.ux-card-feature__icon-svg.is-phone {
	--ux-card-feature-icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22black%22%20d%3D%22M7.2%203.4c.4-.4%201.1-.5%201.6-.2l2.4%201.4c.5.3.8.9.7%201.5l-.4%202.4c-.1.4-.3.8-.7%201L9.4%2011c.8%201.6%202%202.8%203.6%203.6l1.5-1.4c.3-.4.7-.6%201.1-.7l2.4-.4c.6-.1%201.2.2%201.5.7l1.4%202.4c.3.5.2%201.2-.2%201.6l-1.5%201.5c-.5.5-1.2.8-1.9.7-3.6-.4-7-2.3-9.5-4.8S4.2%208.3%203.8%204.7c-.1-.7.2-1.4.7-1.9l2.7.6z%22%2F%3E%3C%2Fsvg%3E");
}

.ux-card-feature__icon-svg.is-envelope {
	--ux-card-feature-icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22black%22%20fill-rule%3D%22evenodd%22%20d%3D%22M3.4%206.2A1.8%201.8%200%20015.2%204.4h13.6a1.8%201.8%200%20011.8%201.8v11.6a1.8%201.8%200%2001-1.8%201.8H5.2a1.8%201.8%200%2001-1.8-1.8V6.2zm2.2.6l6.4%204.3%206.4-4.3v-.6H5.6v.6zm13.2%201.7l-6.2%204.1c-.5.4-1.3.4-1.8%200L4.6%208.5v8.7h14.2V8.5z%22%2F%3E%3C%2Fsvg%3E");
}

.ux-card-feature__title {
	margin: 0 0 0.45em;
	color: var(--ux-card-feature-title-color);
	font-size: var(--ux-card-feature-title-size);
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.25;
}

.ux-card-feature.is-uppercase .ux-card-feature__title {
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.ux-card-feature.is-capitalize .ux-card-feature__title {
	text-transform: capitalize;
}

.ux-card-feature__text {
	margin: 0;
	color: var(--ux-card-feature-text-color);
	font-size: var(--ux-card-feature-text-size);
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.6;
}

a.ux-card-feature-link {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

a.ux-card-feature-link > .ux-card-feature {
	flex: 1 1 auto;
}

a.ux-card-feature-link:hover,
a.ux-card-feature-link:focus {
	color: inherit;
	text-decoration: none;
}

/*
 * Match the tallest Card feature in a Flatsome row.
 * Rows already stretch .col; Align Vertical → Equal only makes .col a flex
 * container. These rules do that automatically when a column contains a card.
 */
.row:has(> .col .ux-card-feature) {
	align-items: stretch;
}

.row > .col:has(.ux-card-feature) {
	display: flex;
}

.row > .col:has(.ux-card-feature) > .col-inner {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.row > .col:has(.ux-card-feature) > .col-inner > .ux-card-feature,
.row > .col:has(.ux-card-feature) > .col-inner > .ux-card-feature-link,
.row > .col:has(.ux-card-feature) > .col-inner > *:has(.ux-card-feature) {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	width: 100%;
}

.ux-card-feature__icon i {
	display: block;
	font-size: var(--ux-card-feature-icon-size);
	line-height: 1;
}
