/* ==========================================================================
   UseAppy: CTA Banner widget
   ========================================================================== */

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

	padding: 53px 0 50px;
	background: #fff;
}

/* Card */

.useappy-cta__box {
	--useappy-cta-glow: rgba(231, 0, 11, 0.17);
	--useappy-cta-glow-w: 27%;
	--useappy-cta-glow-h: 52%;
	--useappy-cta-glow-y: 55%;
	--useappy-cta-ml: auto;
	--useappy-cta-mr: auto;

	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 1200px;
	margin: 0 auto;
	padding: 55px 40px 60px;
	color: #fff;
	text-align: center;
	background-color: #211e1e;
	border-radius: 16px;
}

.useappy-cta-glow-yes .useappy-cta__box {
	background-image: radial-gradient(var(--useappy-cta-glow-w) var(--useappy-cta-glow-h) at 50% var(--useappy-cta-glow-y), var(--useappy-cta-glow) 0%, transparent 100%);
}

/* Eyebrow with dashes */

.useappy-cta__eyebrow {
	--useappy-cta-dash-w: 25px;
	--useappy-cta-dash-color: currentColor;

	display: inline-flex;
	gap: 10px;
	align-items: center;
	margin: 0 0 35px;
	font-family: var(--useappy-font, inherit);
	font-size: 18px;
	font-weight: 500;
	line-height: 20px;
	color: var(--useappy-cta-red);
	text-transform: uppercase;
	letter-spacing: 0.13em;
}

.useappy-cta__eyebrow--dashes::before,
.useappy-cta__eyebrow--dashes::after {
	flex-shrink: 0;
	width: var(--useappy-cta-dash-w);
	height: 1.5px;
	content: "";
	background: var(--useappy-cta-dash-color);
}

/* Title & description */

.useappy-cta__title {
	max-width: 700px;
	margin: 0 var(--useappy-cta-mr) 16px var(--useappy-cta-ml);
	font-family: var(--useappy-font, inherit);
	font-size: 60px;
	font-weight: 700;
	line-height: 67px;
	color: #fff;
	letter-spacing: -0.02em;
}

.useappy-cta__description {
	max-width: 460px;
	margin: 0 var(--useappy-cta-mr) 31px var(--useappy-cta-ml);
	font-family: var(--useappy-font, inherit);
	font-size: var(--useappy-p-size, 20px);
	font-weight: 400;
	line-height: var(--useappy-p-lh, 1.5);
	color: rgba(255, 255, 255, 0.55);
}

/* Buttons (same look as the Main Hero buttons) */

.useappy-cta__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	justify-content: var(--useappy-cta-justify, center);
}

.useappy-cta__btn {
	--useappy-cta-icon-color: var(--useappy-cta-red);
	--useappy-cta-icon-bg: #fff;

	display: inline-flex;
	gap: 17px;
	align-items: center;
	height: 50px;
	padding: 0 19px 0 20px;
	font-family: var(--useappy-font, inherit);
	font-size: 20px;
	font-weight: 500;
	line-height: 1;
	color: #fff;
	text-decoration: none;
	white-space: nowrap;
	letter-spacing: 0.025em;
	background-color: var(--useappy-cta-red);
	border: 1px solid transparent;
	border-radius: 999px;
	transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.useappy-cta__btn:hover,
.useappy-cta__btn:focus-visible {
	color: #fff;
	background-color: var(--useappy-red-dark, #c10009);
}

.useappy-cta__btn:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

.useappy-cta__btn-icon {
	display: inline-grid;
	flex-shrink: 0;
	place-items: center;
	width: 32px;
	height: 32px;
	color: var(--useappy-cta-icon-color);
	background: var(--useappy-cta-icon-bg);
	border-radius: 50%;
	transition: transform 0.25s var(--useappy-ease, ease);
}

.useappy-cta__btn-icon svg,
.useappy-cta__btn-icon i {
	display: block;
	width: 16px;
	height: 16px;
	font-size: 16px;
	line-height: 1;
	fill: currentColor;
}

.useappy-cta__btn-icon svg[fill="none"] {
	fill: none;
}

.useappy-cta__btn:hover .useappy-cta__btn-icon,
.useappy-cta__btn:focus-visible .useappy-cta__btn-icon {
	transform: translateX(3px);
}

.useappy-cta__btn--secondary {
	--useappy-cta-icon-color: currentColor;
	--useappy-cta-icon-bg: transparent;

	gap: 8px;
	padding: 0 20px 0 21px;
	background-color: transparent;
	border-color: #fff;
}

.useappy-cta__btn--secondary:hover,
.useappy-cta__btn--secondary:focus-visible {
	color: var(--useappy-dark, #0d0d0d);
	background-color: #fff;
}

.useappy-cta__btn--secondary .useappy-cta__btn-icon {
	width: auto;
	height: auto;
}

.useappy-cta__btn--secondary .useappy-cta__btn-icon svg {
	width: 22px;
	height: 22px;
}

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

/* ==========================================================================
   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-cta {
	--useappy-cta-red: var(--useappy-red, #e7000b);
	background: var(--useappy-dark-bg, var(--useappy-dark, #0d0d0d));
	color: #fff;
}

.elementor-element.useappy-mode-dark .useappy-cta__box {
	color: #fff;
	background-color: #211e1e;
}

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

.elementor-element.useappy-mode-dark .useappy-cta__eyebrow--dashes::before,
.elementor-element.useappy-mode-dark .useappy-cta__eyebrow--dashes::after {
	background: var(--useappy-cta-dash-color);
}

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

.elementor-element.useappy-mode-dark .useappy-cta__description {
	color: rgba(255, 255, 255, 0.55);
}

.elementor-element.useappy-mode-dark .useappy-cta__btn {
	--useappy-cta-icon-color: var(--useappy-cta-red);
	--useappy-cta-icon-bg: #fff;
	color: #fff;
	background-color: var(--useappy-cta-red);
	border: 1px solid transparent;
}

.elementor-element.useappy-mode-dark .useappy-cta__btn:hover,
.elementor-element.useappy-mode-dark .useappy-cta__btn:focus-visible {
	color: #fff;
	background-color: var(--useappy-red-dark, #c10009);
}

.elementor-element.useappy-mode-dark .useappy-cta__btn-icon {
	color: var(--useappy-cta-icon-color);
	background: var(--useappy-cta-icon-bg);
}

.elementor-element.useappy-mode-dark .useappy-cta__btn-icon svg,
.elementor-element.useappy-mode-dark .useappy-cta__btn-icon i {
	fill: currentColor;
}

.elementor-element.useappy-mode-dark .useappy-cta__btn-icon svg[fill="none"] {
	fill: none;
}

.elementor-element.useappy-mode-dark .useappy-cta__btn--secondary {
	background-color: transparent;
	border-color: rgba(255, 255, 255, 0.14);
}

.elementor-element.useappy-mode-dark .useappy-cta__btn--secondary:hover,
.elementor-element.useappy-mode-dark .useappy-cta__btn--secondary:focus-visible {
	color: var(--useappy-dark, #0d0d0d);
	background-color: #fff;
}

/* Light */

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

.elementor-element.useappy-mode-light .useappy-cta__box {
	color: #0d0d0d;
	background-color: #f5f5f5;
}

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

.elementor-element.useappy-mode-light .useappy-cta__eyebrow--dashes::before,
.elementor-element.useappy-mode-light .useappy-cta__eyebrow--dashes::after {
	background: var(--useappy-cta-dash-color);
}

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

.elementor-element.useappy-mode-light .useappy-cta__description {
	color: #595959;
}

.elementor-element.useappy-mode-light .useappy-cta__btn {
	--useappy-cta-icon-color: var(--useappy-cta-red);
	--useappy-cta-icon-bg: #fff;
	color: #fff;
	background-color: var(--useappy-cta-red);
	border: 1px solid transparent;
}

.elementor-element.useappy-mode-light .useappy-cta__btn:hover,
.elementor-element.useappy-mode-light .useappy-cta__btn:focus-visible {
	color: #fff;
	background-color: var(--useappy-red-dark, #c10009);
}

.elementor-element.useappy-mode-light .useappy-cta__btn-icon {
	color: var(--useappy-cta-icon-color);
	background: var(--useappy-cta-icon-bg);
}

.elementor-element.useappy-mode-light .useappy-cta__btn-icon svg,
.elementor-element.useappy-mode-light .useappy-cta__btn-icon i {
	fill: currentColor;
}

.elementor-element.useappy-mode-light .useappy-cta__btn-icon svg[fill="none"] {
	fill: none;
}

.elementor-element.useappy-mode-light .useappy-cta__btn--secondary {
	background-color: transparent;
	border-color: #fff;
}

.elementor-element.useappy-mode-light .useappy-cta__btn--secondary:hover,
.elementor-element.useappy-mode-light .useappy-cta__btn--secondary:focus-visible {
	color: var(--useappy-dark, #0d0d0d);
	background-color: #fff;
}

/* Fine-tuning */

/* Light: red eyebrow on the light grey box in the darker brand red (4.5:1). */
.elementor-element.useappy-mode-light .useappy-cta__eyebrow {
	color: var(--useappy-red-dark, #c10009);
}

/* End color modes */