/* ==========================================================================
   UseAppy: Feature Grid widget
   ========================================================================== */

.useappy-feat {
	--useappy-feat-red: var(--useappy-red, #e7000b);

	position: relative;
	overflow: hidden;
	padding: 82px 0 80px;
	color: #fff;
	background:
		radial-gradient(27% 110% at 0% 35%, rgba(162, 8, 14, 0.319) 0%, rgba(162, 8, 14, 0.245) 20%, rgba(162, 8, 14, 0.163) 38%, rgba(162, 8, 14, 0.083) 58%, rgba(162, 8, 14, 0.029) 77%, rgba(162, 8, 14, 0) 100%),
		radial-gradient(27% 110% at 100% 35%, rgba(162, 8, 14, 0.28) 0%, rgba(162, 8, 14, 0.216) 20%, rgba(162, 8, 14, 0.143) 38%, rgba(162, 8, 14, 0.073) 58%, rgba(162, 8, 14, 0.025) 77%, rgba(162, 8, 14, 0) 100%),
		var(--useappy-dark, #0d0d0d);
}

/* Heading */

.useappy-feat__header {
	--useappy-feat-auto: auto;

	margin-bottom: 50px;
	text-align: center;
}

.useappy-feat__title {
	margin: 0 0 22px;
	font-family: var(--useappy-font, inherit);
	font-size: 48px;
	font-weight: 700;
	line-height: 56px;
	color: var(--useappy-feat-red);
	letter-spacing: -0.03em;
}

.useappy-feat__description {
	max-width: 520px;
	margin: 0 var(--useappy-feat-auto);
	font-family: var(--useappy-font, inherit);
	font-size: var(--useappy-p-size, 20px);
	font-weight: 300;
	line-height: var(--useappy-p-lh, 1.5);
	color: #fff;
}

/* Grid */

.useappy-feat__grid {
	--useappy-feat-cols: 3;

	display: grid;
	grid-template-columns: repeat(var(--useappy-feat-cols), minmax(0, 1fr));
	gap: 30px 25px;
	max-width: 1370px;
	margin: 0 auto;
}

/* Card */

.useappy-feat__card {
	--useappy-feat-lift: 0px;

	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 29px 25px 29px 29px;
	color: #fff;
	text-align: left;
	text-decoration: none;
	background-color: rgba(255, 255, 255, 0.07);
	border: 1px solid #ececec;
	border-radius: 12px;
	container: useappy-feat-card / inline-size;
	transition: transform 0.3s var(--useappy-ease, ease), background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.useappy-feat__card:hover {
	transform: translateY(var(--useappy-feat-lift));
}

a.useappy-feat__card:hover,
a.useappy-feat__card:focus {
	color: #fff;
}

a.useappy-feat__card:focus-visible {
	outline: 2px solid var(--useappy-feat-red);
	outline-offset: 3px;
}

.useappy-feat__icon {
	--useappy-feat-icon: 28px;

	display: inline-grid;
	flex-shrink: 0;
	place-items: center;
	width: 44px;
	height: 44px;
	margin-bottom: 10px;
	overflow: hidden;
	color: var(--useappy-feat-red);
	background: #fff0f0;
	border-radius: 12px;
	transition: color 0.3s ease, background-color 0.3s ease;
}

.useappy-feat__icon svg {
	display: block;
	width: var(--useappy-feat-icon);
	height: var(--useappy-feat-icon);
}

.useappy-feat__icon i {
	font-size: var(--useappy-feat-icon);
	line-height: 1;
}

.useappy-feat__icon svg:not(.useappy-feat__svg) {
	fill: currentColor;
}

.useappy-feat__icon img {
	display: block;
	width: var(--useappy-feat-icon);
	height: var(--useappy-feat-icon);
	object-fit: contain;
}

.useappy-feat__card-title {
	margin: 0 0 4px;
	font-family: var(--useappy-font, inherit);
	font-size: 20px;
	font-weight: 500;
	line-height: 28px;
	color: #fff;
	letter-spacing: 0.01em;
	transition: color 0.3s ease;
}

.useappy-feat__card-text {
	margin: 0;
	font-family: var(--useappy-font, inherit);
	font-size: var(--useappy-p-size, 20px);
	font-weight: 300;
	line-height: var(--useappy-p-lh, 1.5);
	color: #fff;
}

.useappy-feat__highlight {
	color: var(--useappy-feat-red);
}

/* --------------------------------------------------------------------------
   Card style "Icon beside title" (.useappy-feat--inline): compact cards with
   the icon left of the title, a white title with a red highlight, and red
   glows in the top corners. Selectors use :where() so they weigh no more than
   the base rules above, and the Style tab controls still win.
   -------------------------------------------------------------------------- */

.useappy-feat:where(.useappy-feat--inline) {
	padding: 72px 0 70px;
	/* Two elliptical glows fitted to the design (500 x 700 and 450 x 700 at 1920 x 500). */
	background:
		radial-gradient(26% 140% at 0% 10%, rgba(162, 8, 14, 0.287) 0%, rgba(162, 8, 14, 0.267) 10%, rgba(162, 8, 14, 0.235) 20%, rgba(162, 8, 14, 0.197) 30%, rgba(162, 8, 14, 0.154) 40%, rgba(162, 8, 14, 0.11) 50%, rgba(162, 8, 14, 0.072) 60%, rgba(162, 8, 14, 0.044) 70%, rgba(162, 8, 14, 0.027) 80%, rgba(162, 8, 14, 0.013) 90%, rgba(162, 8, 14, 0) 100%),
		radial-gradient(23.4% 140% at 100% 10%, rgba(162, 8, 14, 0.262) 0%, rgba(162, 8, 14, 0.239) 10%, rgba(162, 8, 14, 0.207) 20%, rgba(162, 8, 14, 0.17) 30%, rgba(162, 8, 14, 0.13) 40%, rgba(162, 8, 14, 0.092) 50%, rgba(162, 8, 14, 0.06) 60%, rgba(162, 8, 14, 0.037) 70%, rgba(162, 8, 14, 0.023) 80%, rgba(162, 8, 14, 0.012) 90%, rgba(162, 8, 14, 0) 100%),
		var(--useappy-dark, #0d0d0d);
}

/* flow-root: the title's space below adds to the header's instead of collapsing into it (72px, as in the design). */
.useappy-feat--inline :where(.useappy-feat__header) {
	display: flow-root;
}

.useappy-feat--inline :where(.useappy-feat__title) {
	color: #fff;
	letter-spacing: -0.027em;
}

.useappy-feat--inline :where(.useappy-feat__grid) {
	gap: 30px;
	max-width: 1380px;
}

.useappy-feat--inline :where(.useappy-feat__card) {
	flex-direction: row;
	gap: 15px;
	align-items: center;
	padding: 24px;
	border-radius: 16px;
}

.useappy-feat--inline :where(.useappy-feat__icon) {
	margin-bottom: 0;
}

.useappy-feat--inline :where(.useappy-feat__body) {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.useappy-feat--inline :where(.useappy-feat__card-title) {
	margin: 0;
}

/* Breakpoint rules (Bootstrap sm / md / lg / xl / xxl): themes/useappy/assets/css/responsive.css */

/* Manual line breaks are tuned for the 440px design cards (384px of text);
   narrower cards wrap naturally instead. */
@container useappy-feat-card (max-width: 383.98px) {
	.useappy-feat__card-text br {
		display: none;
	}

	.useappy-feat-breaks-yes .useappy-feat__card-text br {
		display: inline;
	}
}

@media (prefers-reduced-motion: reduce) {
	.useappy-feat__card,
	.useappy-feat__icon,
	.useappy-feat__card-title {
		transition: none;
	}
}

/* ==========================================================================
   Color modes (Layout > Color mode): "Dark" puts the section on the theme's dark
   background (--useappy-dark-bg) with light text; "Light" on white with dark
   text. Style-tab colours still win (their selectors are stronger).
   ========================================================================== */

/* Dark */

.elementor-element.useappy-mode-dark .useappy-feat {
	--useappy-feat-red: var(--useappy-red, #e7000b);
	color: #fff;
	background: var(--useappy-dark-bg, var(--useappy-dark, #0d0d0d));
}

.elementor-element.useappy-mode-dark .useappy-feat__title {
	color: var(--useappy-feat-red);
}

.elementor-element.useappy-mode-dark .useappy-feat__description {
	color: #fff;
}

.elementor-element.useappy-mode-dark .useappy-feat__card {
	color: #fff;
	background-color: rgba(255, 255, 255, 0.07);
	border: 1px solid rgba(255, 255, 255, 0.14);
}

.elementor-element.useappy-mode-dark a.useappy-feat__card:hover,
.elementor-element.useappy-mode-dark a.useappy-feat__card:focus {
	color: #fff;
}

.elementor-element.useappy-mode-dark .useappy-feat__icon {
	color: var(--useappy-feat-red);
	background: #fff0f0;
}

.elementor-element.useappy-mode-dark .useappy-feat__icon svg:not(.useappy-feat__svg) {
	fill: currentColor;
}

.elementor-element.useappy-mode-dark .useappy-feat__card-title {
	color: #fff;
}

.elementor-element.useappy-mode-dark .useappy-feat__card-text {
	color: #fff;
}

.elementor-element.useappy-mode-dark .useappy-feat__highlight {
	color: #ff4d55;
}

.elementor-element.useappy-mode-dark .useappy-feat:where(.useappy-feat--inline) {
	color: #fff;
}

.elementor-element.useappy-mode-dark .useappy-feat--inline :where(.useappy-feat__title) {
	color: #fff;
}

/* Light */

.elementor-element.useappy-mode-light .useappy-feat {
	--useappy-feat-red: var(--useappy-red, #e7000b);
	color: #0d0d0d;
	background: #fff;
}

.elementor-element.useappy-mode-light .useappy-feat__title {
	color: var(--useappy-feat-red);
}

.elementor-element.useappy-mode-light .useappy-feat__description {
	color: #0d0d0d;
}

.elementor-element.useappy-mode-light .useappy-feat__card {
	color: #0d0d0d;
	background-color: #f5f5f5;
	border: 1px solid #ececec;
}

.elementor-element.useappy-mode-light a.useappy-feat__card:hover,
.elementor-element.useappy-mode-light a.useappy-feat__card:focus {
	color: #0d0d0d;
}

.elementor-element.useappy-mode-light .useappy-feat__icon {
	color: var(--useappy-feat-red);
	background: #fff0f0;
}

.elementor-element.useappy-mode-light .useappy-feat__icon svg:not(.useappy-feat__svg) {
	fill: currentColor;
}

.elementor-element.useappy-mode-light .useappy-feat__card-title {
	color: #0d0d0d;
}

.elementor-element.useappy-mode-light .useappy-feat__card-text {
	color: #0d0d0d;
}

.elementor-element.useappy-mode-light .useappy-feat__highlight {
	color: var(--useappy-feat-red);
}

.elementor-element.useappy-mode-light .useappy-feat:where(.useappy-feat--inline) {
	color: #0d0d0d;
}

.elementor-element.useappy-mode-light .useappy-feat--inline :where(.useappy-feat__title) {
	color: #0d0d0d;
}

/* End color modes */