/**
Theme Name: Astra
Theme URI: https://wpastra.com/
Author: Brainstorm Force
Author URI: https://wpastra.com/about/?utm_source=theme_preview&utm_medium=author_link&utm_campaign=astra_theme
Description: The Astra WordPress theme is lightning-fast and highly customizable. It has over 1 million downloads and the only theme in the world with 6,000+ five-star reviews! It’s ideal for professional web designers, solopreneurs, small businesses, eCommerce, membership sites and any type of website. It offers special features and templates so it works perfectly with all page builders like Spectra, Elementor, Beaver Builder, etc. Fast performance, clean code, mobile-first design and schema markup are all built-in, making the theme exceptionally SEO-friendly. It’s fully compatible with WooCommerce, SureCart and other eCommerce plugins and comes with lots of store-friendly features and templates. Astra also provides expert support for free users. A dedicated team of fully trained WordPress experts are on hand to help with every aspect of the theme. Try the live demo of Astra: https://zipwp.org/themes/astra/
Version: 4.11.14
Requires at least: 5.3
WC requires at least: 3.0
WC tested up to: 9.6
Tested up to: 6.8
Requires PHP: 5.3
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra
Domain Path: /languages
Tags: custom-menu, custom-logo, entertainment, one-column, two-columns, left-sidebar, e-commerce, right-sidebar, custom-colors, editor-style, featured-images, full-width-template, microformats, post-formats, rtl-language-support, theme-options, threaded-comments, translation-ready, blog
AMP: true

Astra WordPress Theme, Copyright 2020 WPAstra.
Astra is distributed under the terms of the GNU GPL.

Astra is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of.
Nicolas Gallagher and Jonathan Neal https://necolas.github.com/normalize.css/

Astra icon font is based on IcoMoon-Free vector icon by Keyamoon.
IcoMoon-Free vector icon distributed under terms of CC BY 4.0 or GPL. (https://creativecommons.org/licenses/by/4.0/ or https://www.gnu.org/licenses/gpl.html)
Source: http://keyamoon.com/

Flexibility is a JavaScript polyfill for Flexbox By Jonathan Neal, 10up. (https://github.com/jonathantneal/flexibility)
Licensed under MIT ( https://github.com/jonathantneal/flexibility/blob/master/LICENSE.md )

Screenshot image is a collage of actual sites created using the Astra WordPress Theme.

Icons used in the Screenshot image are all licensed under Creative Commons ( CC BY 4.0 ) License ( https://fontawesome.com/license/free )
https://fontawesome.com/v5.15/icons/store?style=solid
https://fontawesome.com/v5.15/icons/shopping-cart?style=solid
https://fontawesome.com/v5.15/icons/pen-square?style=solid
https://fontawesome.com/v5.15/icons/user-tie?style=solid
https://fontawesome.com/v5.15/icons/user-tie?style=solid

Illustrations used in the Screenshot images are all licensed under Creative Commons ( CC0 ) License ( https://gumroad.com/l/humaaans )
https://websitedemos.net/web-design-agency-08/wp-content/uploads/sites/796/2021/05/standing-24.png
https://websitedemos.net/web-design-agency-08/wp-content/uploads/sites/796/2021/05/sitting-2.png

Hand-drawn illustrations used are created by Brainstorm Force and released under Creative Commons ( CC0 ) License.
https://websitedemos.net/web-design-agency-08/wp-content/uploads/sites/796/2021/05/girl-with-image-container.png
https://websitedemos.net/web-design-agency-08/wp-content/uploads/sites/796/2021/05/boy-with-code-container.png
https://websitedemos.net/web-design-agency-08/wp-content/uploads/sites/796/2021/05/web-browser.png

The same site as screenshot can be imported from here https://websitedemos.net/web-design-agency-08/.

For more information, refer to this document on how to create a page like in the screenshot - https://wpastra.com/docs/replicating-the-screenshot/.

Astra default breadcrumb is based on Breadcrumb Trail by Justin Tadlock. (https://github.com/justintadlock/breadcrumb-trail)
Breadcrumb Trail is distributed under the terms of the GNU GPL v2 or later.

Astra local fonts feature is based on Webfonts Loader by WordPress Themes Team (WPTT). (https://github.com/WPTT/webfont-loader)
Licensed under MIT ( https://github.com/WPTT/webfont-loader/blob/master/LICENSE )

/* Note: The CSS files are loaded from assets/css/ folder. */
/* ============================================================
   ECS Color Scheme Module
   ============================================================
   CSS custom properties define both the default and the
   alternative (alt) scheme.  Switching is done by setting
   data-ecs-scheme="alt" on <html>.
   ============================================================ */

/* ── Default scheme variables ─────────────────────────────── */
:root {
	--ecs-color-primary:    #2271b1;
	--ecs-color-secondary:  #135e96;
	--ecs-color-text:       #1e1e1e;
	--ecs-color-accent:     #d63638;
	--ecs-color-bg:         #ffffff;
	--ecs-color-bg-alt:     #f6f6f6;
}

/* ── Alternative scheme overrides ────────────────────────────
   These only apply when <html data-ecs-scheme="alt">
   ──────────────────────────────────────────────────────────── */
[data-ecs-scheme="alt"] {
	--ecs-color-primary:    #3a9ad4;
	--ecs-color-secondary:  #1e6fa0;
	--ecs-color-text:       #f0f0f0;
	--ecs-color-accent:     #ff6b6b;
	--ecs-color-bg:         #1a1a2e;
	--ecs-color-bg-alt:     #16213e;
}

/* ── Dark Mode Switcher Widget ────────────────────────────── */

/* Wrapper is a flex row; justify-content is set by Elementor controls */
.ecs-dms-wrap {
	display: flex;
	align-items: center;
}

/* ── Icon container ───────────────────────────────────────── */

.ecs-dms-icon {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
}

.ecs-dms-icon i,
.ecs-dms-icon svg {
	display: block;
}

/* ── Button base ──────────────────────────────────────────── */

.ecs-dms-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 8px 16px;
	background: transparent;
	color: inherit;
	border: 1px solid currentColor;
	border-radius: 4px;
	cursor: pointer;
	font: inherit;
	line-height: 1;
	transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.ecs-dms-btn:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* ── Toggle: state spans ──────────────────────────────────── */

/* Hidden by default; made layout-transparent when visible */
.ecs-dms-state {
	display: none;
}

/* Default scheme: show light state */
.ecs-dms-type-toggle .ecs-dms-state-light {
	display: contents;
}

/* Alt scheme: swap to dark state */
.ecs-dms-type-toggle.is-alt .ecs-dms-state-light {
	display: none;
}

.ecs-dms-type-toggle.is-alt .ecs-dms-state-dark {
	display: contents;
}

/* ── Dropdown ─────────────────────────────────────────────── */

.ecs-dms-select {
	padding: 8px 12px;
	border: 1px solid currentColor;
	border-radius: 4px;
	background: transparent;
	color: inherit;
	font: inherit;
	cursor: pointer;
}
/* ============================================================
   ECS Container Layout Module
   ============================================================ */

/* ── Fix --display for ECS modes ─────────────────────────── */
/*
 * ecs_container_type responsive control uses prefix_class 'e-ecs%s-'.
 * Desktop: e-ecs-slider, e-ecs-custom, e-ecs-flex, e-ecs-grid
 * Tablet:  e-ecs-tablet-flex, e-ecs-tablet-grid, etc.
 * Mobile:  e-ecs-mobile-flex, e-ecs-mobile-grid, etc.
 *
 * Elementor's --display CSS var must be overridden for ECS modes.
 * Two-class specificity (0-0-2-0) beats Elementor's single-class rule.
 */
.e-con.e-ecs-slider,
.e-con.e-ecs-custom {
	--display: flex;
}

/* Desktop flex/grid classes from our responsive control */
.e-con.e-ecs-flex {
	--display: flex;
	display: flex;
}
.e-con.e-ecs-grid {
	--display: grid;
	display: grid;
}

/* ── Slider mode (Swiper) ─────────────────────────────────── */

/*
 * Prevents the outer container from wrapping slides horizontally.
 * On editor (before JS runs), overflow-x:auto gives a scrollable preview.
 * On live, .ecs-swiper clips slides with overflow:hidden — the container
 * itself stays visible so absolutely-positioned arrows/dots are not clipped.
 */
.e-con.e-ecs-slider {
	overflow: visible;
	flex-wrap: nowrap !important;
}

/* Editor: children still inside .e-con-inner before JS moves them */
.e-con.e-ecs-slider > .e-con-inner {
	overflow-x: auto;
	flex-wrap: nowrap !important;
}

/*
 * Editor: real children are moved into swiper slides. Hide the now-empty
 * .e-con-inner (Boxed containers) so it doesn't occupy space or show
 * Elementor's "drag widget here" placeholder.
 * Full Width containers have no .e-con-inner — no rule needed.
 */
.ecs-editor-slider-active > .e-con-inner {
	display: none !important;
}

.ecs-swiper {
	width: 100%;
	overflow: hidden;
	position: relative;
}

/* ── Custom Layout mode ───────────────────────────────────── */

.e-con.e-ecs-custom > .e-con-inner {
	display: contents;
}

/*
 * Live mode: wrapper emitted by after_container_render() around all cycling
 * template instances. flex-direction is set inline from the ecs_direction
 * control; width:100% + flex-wrap:wrap ensure correct block behaviour.
 */
.ecs-custom-layout-wrap {
	width: 100%;
	flex-wrap: wrap;
}

/* ── Dual-render show/hide ────────────────────────────────────
 * When responsive overrides exist, PHP emits two versions:
 *   .ecs-custom-version    — desktop: template with children in slots
 *   .ecs-responsive-version — tablet/mobile: children as grid or slider
 * CSS shows one at a time based on active breakpoint.
 * ──────────────────────────────────────────────────────────── */

.ecs-custom-version,
.ecs-responsive-version {
	width: 100%;
}

/* Desktop: show template version, hide responsive */
.ecs-responsive-version {
	display: none;
}

/* Tablet: swap when any tablet override is active (768px–1024px only) */
@media (min-width: 768px) and (max-width: 1024px) {
	.e-con.e-ecs-custom.e-ecs-tablet-flex > .ecs-custom-version,
	.e-con.e-ecs-custom.e-ecs-tablet-grid > .ecs-custom-version,
	.e-con.e-ecs-custom.e-ecs-tablet-slider > .ecs-custom-version {
		display: none;
	}
	.e-con.e-ecs-custom.e-ecs-tablet-flex > .ecs-responsive-version,
	.e-con.e-ecs-custom.e-ecs-tablet-grid > .ecs-responsive-version,
	.e-con.e-ecs-custom.e-ecs-tablet-slider > .ecs-responsive-version {
		display: block;
	}

	/* tablet=grid: CSS grid on the swiper-wrapper */
	.e-con.e-ecs-custom.e-ecs-tablet-grid > .ecs-responsive-version > .ecs-swiper > .swiper-wrapper {
		display: grid !important;
		grid-template-columns: repeat(2, 1fr) !important;
		transform: none !important;
		transition: none !important;
		width: 100%;
	}
	.e-con.e-ecs-custom.e-ecs-tablet-grid > .ecs-responsive-version > .ecs-swiper > .swiper-slide {
		width: auto !important;
		height: auto !important;
		margin-right: 0 !important;
	}
	.e-con.e-ecs-custom.e-ecs-tablet-grid > .ecs-responsive-version > .ecs-swiper > .elementor-swiper-button,
	.e-con.e-ecs-custom.e-ecs-tablet-grid > .ecs-responsive-version > .ecs-swiper > .swiper-pagination {
		display: none !important;
	}

	/* tablet=flex: column stack */
	.e-con.e-ecs-custom.e-ecs-tablet-flex > .ecs-responsive-version > .ecs-resp-children {
		display: flex;
		flex-direction: column;
	}
	.e-con.e-ecs-custom.e-ecs-tablet-flex > .ecs-responsive-version > .ecs-resp-children > * {
		width: 100% !important;
	}
}

/* Tablet show/hide also at mobile when no mobile override (fallback) */
@media (max-width: 767px) {
	.e-con.e-ecs-custom.e-ecs-tablet-flex:not(.e-ecs-mobile-flex):not(.e-ecs-mobile-grid):not(.e-ecs-mobile-slider) > .ecs-custom-version,
	.e-con.e-ecs-custom.e-ecs-tablet-grid:not(.e-ecs-mobile-flex):not(.e-ecs-mobile-grid):not(.e-ecs-mobile-slider) > .ecs-custom-version,
	.e-con.e-ecs-custom.e-ecs-tablet-slider:not(.e-ecs-mobile-flex):not(.e-ecs-mobile-grid):not(.e-ecs-mobile-slider) > .ecs-custom-version {
		display: none;
	}
	.e-con.e-ecs-custom.e-ecs-tablet-flex:not(.e-ecs-mobile-flex):not(.e-ecs-mobile-grid):not(.e-ecs-mobile-slider) > .ecs-responsive-version,
	.e-con.e-ecs-custom.e-ecs-tablet-grid:not(.e-ecs-mobile-flex):not(.e-ecs-mobile-grid):not(.e-ecs-mobile-slider) > .ecs-responsive-version,
	.e-con.e-ecs-custom.e-ecs-tablet-slider:not(.e-ecs-mobile-flex):not(.e-ecs-mobile-grid):not(.e-ecs-mobile-slider) > .ecs-responsive-version {
		display: block;
	}
}

/* Mobile: swap when any mobile override is active */
@media (max-width: 767px) {
	.e-con.e-ecs-custom.e-ecs-mobile-flex > .ecs-custom-version,
	.e-con.e-ecs-custom.e-ecs-mobile-grid > .ecs-custom-version,
	.e-con.e-ecs-custom.e-ecs-mobile-slider > .ecs-custom-version {
		display: none;
	}
	.e-con.e-ecs-custom.e-ecs-mobile-flex > .ecs-responsive-version,
	.e-con.e-ecs-custom.e-ecs-mobile-grid > .ecs-responsive-version,
	.e-con.e-ecs-custom.e-ecs-mobile-slider > .ecs-responsive-version {
		display: block;
	}

	/* mobile=grid */
	.e-con.e-ecs-custom.e-ecs-mobile-grid > .ecs-responsive-version > .ecs-swiper > .swiper-wrapper {
		display: grid !important;
		grid-template-columns: repeat(2, 1fr) !important;
		transform: none !important;
		transition: none !important;
		width: 100%;
	}
	.e-con.e-ecs-custom.e-ecs-mobile-grid > .ecs-responsive-version > .ecs-swiper > .elementor-swiper-button,
	.e-con.e-ecs-custom.e-ecs-mobile-grid > .ecs-responsive-version > .ecs-swiper > .swiper-pagination {
		display: none !important;
	}

	/* mobile=flex */
	.e-con.e-ecs-custom.e-ecs-mobile-flex > .ecs-responsive-version > .ecs-resp-children {
		display: flex;
		flex-direction: column;
	}
	.e-con.e-ecs-custom.e-ecs-mobile-flex > .ecs-responsive-version > .ecs-resp-children > * {
		width: 100% !important;
	}
}

/* ── Missing placeholder fallback ────────────────────────── */

.ecs-missing-placeholder {
	outline: 2px dashed #d63638;
}

.ecs-missing-placeholder::after {
	content: 'ECS: missing placeholder';
	display: block;
	background: #d63638;
	color: #fff;
	font-size: 11px;
	padding: 2px 6px;
	text-align: center;
}

/* ── Editor: Placeholder hint ────────────────────────────── */

.ecs-placeholder-editor-hint {
	min-height: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ── Hide empty slot containers ──────────────────────────── */
/*
 * .e-ecs-hide-empty-slots appears in two contexts:
 *  - Editor: on the .e-con container itself (Elementor applies prefix_class)
 *  - Live:   on a display:contents wrapper div emitted by after_container_render
 * Both cases work with this selector (no .e-con requirement on the ancestor).
 */

/* Boxed mode: slot container wraps e-con-inner > widget */
.e-ecs-hide-empty-slots .e-con:has(
	> .e-con-inner
	> .elementor-widget-ecs_container_placeholder
	> .elementor-widget-container
	> .ecs-slot-empty
) {
	display: none;
}

/* Full Width mode: slot container wraps widget directly */
.e-ecs-hide-empty-slots .e-con:has(
	> .elementor-widget-ecs_container_placeholder
	> .elementor-widget-container
	> .ecs-slot-empty
) {
	display: none;
}

/* ── Editor: AJAX preview injection ──────────────────────── */

/*
 * The injected template structure sits inside .e-con-inner alongside the
 * live child elements that have been moved into its slots.
 * width: 100% + min-width: 0 ensure it fills a flex parent correctly.
 */
.ecs-injected-structure {
	width: 100%;
	min-width: 0;
}

/* ── Responsive Layout Override ──────────────────────────── */
/*
 * When ecs_layout_tablet / ecs_layout_mobile is set to 'flex' or 'grid',
 * the container gets e-ecs-tablet-{value} / e-ecs-mobile-{value} classes.
 * Swiper has enabled:false at those breakpoints via JS breakpoints config.
 * CSS resets the Swiper wrapper so slides behave as normal block elements.
 */

/* ── Tablet overrides (≤1024px) ──────────────────────────── */

@media (max-width: 1024px) {

	/* Flexbox/Grid → Slider on tablet (desktop is NOT slider) */
	.e-con.e-ecs-tablet-slider {
		overflow-x: auto;
		flex-wrap: nowrap !important;
	}
	.e-con.e-ecs-tablet-slider > .e-con-inner {
		flex-wrap: nowrap !important;
	}

	/* Slider → Flexbox on tablet */
	.e-con.e-ecs-slider.e-ecs-tablet-flex {
		overflow: visible;
	}
	.e-con.e-ecs-slider.e-ecs-tablet-flex > .ecs-swiper {
		overflow: visible;
	}
	.e-con.e-ecs-slider.e-ecs-tablet-flex > .ecs-swiper > .swiper-wrapper {
		flex-wrap: wrap;
		transform: none !important;
		transition: none !important;
		width: 100%;
	}
	.e-con.e-ecs-slider.e-ecs-tablet-flex > .ecs-swiper > .swiper-wrapper > .swiper-slide {
		width: 100% !important;
		height: auto !important;
		margin-right: 0 !important;
	}
	.e-con.e-ecs-tablet-flex > .ecs-swiper > .elementor-swiper-button,
	.e-con.e-ecs-tablet-flex > .ecs-swiper > .swiper-pagination {
		display: none !important;
	}

	/* Slider → Grid on tablet */
	.e-con.e-ecs-slider.e-ecs-tablet-grid > .ecs-swiper {
		overflow: visible;
	}
	.e-con.e-ecs-slider.e-ecs-tablet-grid > .ecs-swiper > .swiper-wrapper {
		display: grid !important;
		grid-template-columns: repeat(var(--ecs-slider-columns, 2), 1fr) !important;
		transform: none !important;
		transition: none !important;
		width: 100%;
	}
	.e-con.e-ecs-slider.e-ecs-tablet-grid > .ecs-swiper > .swiper-wrapper > .swiper-slide {
		width: auto !important;
		height: auto !important;
		margin-right: 0 !important;
	}
	.e-con.e-ecs-tablet-grid > .ecs-swiper > .elementor-swiper-button,
	.e-con.e-ecs-tablet-grid > .ecs-swiper > .swiper-pagination {
		display: none !important;
	}

	/* Custom Layout → Flexbox on tablet */
	.e-con.e-ecs-custom.e-ecs-tablet-flex .ecs-injected-structure {
		display: flex !important;
		flex-direction: column !important;
		width: 100%;
	}
	.e-con.e-ecs-custom.e-ecs-tablet-flex .ecs-injected-structure > * {
		width: 100% !important;
		position: static !important;
		grid-area: unset !important;
	}

	/* Custom Layout → Grid on tablet */
	.e-con.e-ecs-custom.e-ecs-tablet-grid .ecs-injected-structure {
		display: grid !important;
		grid-template-columns: repeat(2, 1fr) !important;
		width: 100%;
	}
	.e-con.e-ecs-custom.e-ecs-tablet-grid .ecs-injected-structure > * {
		width: 100% !important;
		position: static !important;
		grid-area: unset !important;
	}
}

/* ── Mobile overrides (≤767px) ───────────────────────────── */

@media (max-width: 767px) {

	/* Flexbox/Grid → Slider on mobile (desktop is NOT slider) */
	.e-con.e-ecs-mobile-slider {
		overflow-x: auto;
		flex-wrap: nowrap !important;
	}
	.e-con.e-ecs-mobile-slider > .e-con-inner {
		flex-wrap: nowrap !important;
	}

	/* Slider → Flexbox on mobile */
	.e-con.e-ecs-slider.e-ecs-mobile-flex {
		overflow: visible;
	}
	.e-con.e-ecs-slider.e-ecs-mobile-flex > .ecs-swiper {
		overflow: visible;
	}
	.e-con.e-ecs-slider.e-ecs-mobile-flex > .ecs-swiper > .swiper-wrapper {
		flex-wrap: wrap;
		transform: none !important;
		transition: none !important;
		width: 100%;
	}
	.e-con.e-ecs-slider.e-ecs-mobile-flex > .ecs-swiper > .swiper-wrapper > .swiper-slide {
		width: 100% !important;
		height: auto !important;
		margin-right: 0 !important;
	}
	.e-con.e-ecs-mobile-flex > .ecs-swiper > .elementor-swiper-button,
	.e-con.e-ecs-mobile-flex > .ecs-swiper > .swiper-pagination {
		display: none !important;
	}

	/* Slider → Grid on mobile */
	.e-con.e-ecs-slider.e-ecs-mobile-grid > .ecs-swiper {
		overflow: visible;
	}
	.e-con.e-ecs-slider.e-ecs-mobile-grid > .ecs-swiper > .swiper-wrapper {
		display: grid !important;
		grid-template-columns: repeat(var(--ecs-slider-columns, 2), 1fr) !important;
		transform: none !important;
		transition: none !important;
		width: 100%;
	}
	.e-con.e-ecs-slider.e-ecs-mobile-grid > .ecs-swiper > .swiper-wrapper > .swiper-slide {
		width: auto !important;
		height: auto !important;
		margin-right: 0 !important;
	}
	.e-con.e-ecs-mobile-grid > .ecs-swiper > .elementor-swiper-button,
	.e-con.e-ecs-mobile-grid > .ecs-swiper > .swiper-pagination {
		display: none !important;
	}

	/* Custom Layout → Flexbox on mobile */
	.e-con.e-ecs-custom.e-ecs-mobile-flex .ecs-injected-structure {
		display: flex !important;
		flex-direction: column !important;
		width: 100%;
	}
	.e-con.e-ecs-custom.e-ecs-mobile-flex .ecs-injected-structure > * {
		width: 100% !important;
		position: static !important;
		grid-area: unset !important;
	}

	/* Custom Layout → Grid on mobile */
	.e-con.e-ecs-custom.e-ecs-mobile-grid .ecs-injected-structure {
		display: grid !important;
		grid-template-columns: repeat(2, 1fr) !important;
		width: 100%;
	}
	.e-con.e-ecs-custom.e-ecs-mobile-grid .ecs-injected-structure > * {
		width: 100% !important;
		position: static !important;
		grid-area: unset !important;
	}
}
/* ============================================================
   ECS Mobile Menu — WordPress Menu Responsive Layout Controls
   ============================================================

   HOW IT WORKS
   ─────────────────────────────────────────────────────────
   Elementor PHP does NOT add breakpoint prefixes (tablet-/mobile-)
   to prefix_class values. All breakpoint values of the `layout`
   responsive control are added as ecs-nav-layout-{value} without
   any device prefix, meaning the same class appears multiple times
   when multiple breakpoints share a value.

   To handle responsive behaviour correctly, we use CSS Custom
   Properties (--ecs-nav-main-display, etc.) that are set by
   Elementor's dynamic CSS engine via the `selectors` configuration
   in upgrade_layout(). Elementor generates:
     • @media max-width rules for frontend
     • body.elementor-device-* rules for editor device preview

   The presence of any ecs-nav-layout-* class on the wrapper
   indicates ECS layout is active for that widget, scoping our
   CSS variable rules so they never affect other nav-menu widgets.
   ============================================================ */

/* Apply CSS variables to nav-menu elements when ECS layout is active.
   Fallbacks = default "horizontal" behaviour.                        */

.ecs-nav-layout-horizontal .elementor-nav-menu--main,
.ecs-nav-layout-vertical   .elementor-nav-menu--main,
.ecs-nav-layout-dropdown   .elementor-nav-menu--main {
	display: var( --ecs-nav-main-display, flex ) !important;
}

/* flex-direction must target the inner <ul>, not the <nav> wrapper */
.ecs-nav-layout-horizontal .elementor-nav-menu--main .elementor-nav-menu,
.ecs-nav-layout-vertical   .elementor-nav-menu--main .elementor-nav-menu,
.ecs-nav-layout-dropdown   .elementor-nav-menu--main .elementor-nav-menu {
	flex-direction: var( --ecs-nav-main-dir, row ) !important;
}

.ecs-nav-layout-horizontal .elementor-menu-toggle,
.ecs-nav-layout-vertical   .elementor-menu-toggle,
.ecs-nav-layout-dropdown   .elementor-menu-toggle {
	display: var( --ecs-nav-toggle-display, none ) !important;
}

/* Alignment — reads --ecs-nav-align; applies justify-content to both the
   <nav> (positions the <ul> within the flex container) and the <ul> itself
   (aligns <li> items when the <ul> is full-width in vertical layout). */
.ecs-nav-layout-horizontal .elementor-nav-menu--main,
.ecs-nav-layout-vertical   .elementor-nav-menu--main,
.ecs-nav-layout-horizontal .elementor-nav-menu--main .elementor-nav-menu,
.ecs-nav-layout-vertical   .elementor-nav-menu--main .elementor-nav-menu {
	justify-content: var( --ecs-nav-align, flex-start ) !important;
}

/* Pointer visibility — reads --ecs-nav-ptr-vis set by the ecs_pointer_hide responsive
   control. visibility:hidden preserves layout space and does not block hover animations. */
.ecs-nav-layout-horizontal .elementor-nav-menu--main .elementor-item::before,
.ecs-nav-layout-horizontal .elementor-nav-menu--main .elementor-item::after,
.ecs-nav-layout-vertical   .elementor-nav-menu--main .elementor-item::before,
.ecs-nav-layout-vertical   .elementor-nav-menu--main .elementor-item::after {
	visibility: var( --ecs-nav-ptr-vis, visible );
}

/* ═══════════════════════════════════════════════════════════
   DROPDOWN ALIGNMENT — follows Toggle Button align
   Uses prefix_class ecs-toggle-align-{left|center|right} set
   by the Toggle Align CHOOSE control.

   NOTE: Elementor only sets position:absolute on the dropdown
   when Full Width (stretch) is ON. For non-stretch dropdowns,
   the panel is position:static, so left/right have no effect.
   We add position:absolute here when any ecs-toggle-align-*
   class is present. The widget wrapper is position:relative,
   so absolute positioning is correct.

   Skipped when Full Width is ON (:not(.elementor-nav-menu--stretch))
   to avoid conflict with the stretch rules below.
   ═══════════════════════════════════════════════════════════ */

/* Base: make dropdown absolutely positioned when ECS align is active.
   top: 100% places it immediately below the widget (same as Full Width). */
.ecs-toggle-align-left:not(.elementor-nav-menu--stretch)
	.elementor-nav-menu--dropdown.elementor-nav-menu__container,
.ecs-toggle-align-center:not(.elementor-nav-menu--stretch)
	.elementor-nav-menu--dropdown.elementor-nav-menu__container,
.ecs-toggle-align-right:not(.elementor-nav-menu--stretch)
	.elementor-nav-menu--dropdown.elementor-nav-menu__container {
	position:  absolute    !important;
	top:       100%        !important;
	width:     auto        !important;
	min-width: max-content;
}

.ecs-toggle-align-left:not(.elementor-nav-menu--stretch)
	.elementor-nav-menu--dropdown.elementor-nav-menu__container {
	left:  0    !important;
	right: auto !important;
}

.ecs-toggle-align-center:not(.elementor-nav-menu--stretch)
	.elementor-nav-menu--dropdown.elementor-nav-menu__container {
	left:      50%                !important;
	right:     auto               !important;
	transform: translateX( -50% ) !important;
}

.ecs-toggle-align-right:not(.elementor-nav-menu--stretch)
	.elementor-nav-menu--dropdown.elementor-nav-menu__container {
	right: 0    !important;
	left:  auto !important;
}

/* ═══════════════════════════════════════════════════════════
   FIX: Dropdown panel width (Fill Width ON)
   ═══════════════════════════════════════════════════════════ */

/* Fill Width ON → full width (reinforce existing behaviour) */
.elementor-nav-menu--stretch
	.elementor-nav-menu--dropdown.elementor-nav-menu__container {
	width: 100% !important;
	left:  0    !important;
}

/* ═══════════════════════════════════════════════════════════
   FORCE BREAKPOINT
   When "Force Breakpoint" is ON, the menu switches to dropdown
   mode at the Elementor native breakpoint regardless of the ECS
   Layout setting.

   Combines .ecs-force-breakpoint (ECS prefix_class) with
   .elementor-nav-menu--dropdown-{mobile|tablet} (Elementor's own
   prefix_class for the Breakpoint control) to target exactly the
   right viewport without needing JS.

   CSS custom properties use !important to override the inline
   variables set by ecs-mobile-menu-editor.js in the editor.
   ═══════════════════════════════════════════════════════════ */

/* Frontend: Mobile breakpoint (≤ 767px) */
@media (max-width: 767px) {
	.ecs-force-breakpoint.elementor-nav-menu--dropdown-mobile {
		--ecs-nav-main-display:   none !important;
		--ecs-nav-main-dir:       row  !important;
		--ecs-nav-toggle-display: flex !important;
	}
}

/* Frontend: Tablet breakpoint (≤ 1024px, covers mobile too) */
@media (max-width: 1024px) {
	.ecs-force-breakpoint.elementor-nav-menu--dropdown-tablet {
		--ecs-nav-main-display:   none !important;
		--ecs-nav-main-dir:       row  !important;
		--ecs-nav-toggle-display: flex !important;
	}
}

/* Editor device preview */
body.elementor-device-mobile .ecs-force-breakpoint.elementor-nav-menu--dropdown-mobile,
body.elementor-device-mobile .ecs-force-breakpoint.elementor-nav-menu--dropdown-tablet,
body.elementor-device-tablet .ecs-force-breakpoint.elementor-nav-menu--dropdown-tablet {
	--ecs-nav-main-display:   none !important;
	--ecs-nav-main-dir:       row  !important;
	--ecs-nav-toggle-display: flex !important;
}
/* ============================================================
   ECS Editorial Text Module
   ============================================================ */

/* ── Figure ───────────────────────────────────────────────── */

.ecs-et-figure {
	margin: 0;      /* Reset browser default <figure> margin */
	line-height: 0; /* Prevents inline-block gap below img */
}

.ecs-et-figure img {
	display: block;
	max-width: 100%;
	height: auto;
}

/* ── Text ─────────────────────────────────────────────────── */

.ecs-et-text > *:first-child { margin-top: 0; }
.ecs-et-text > *:last-child  { margin-bottom: 0; }

/* ============================================================
   Image Position — desktop base rules
   Classes are added to the Elementor widget wrapper via prefix_class.

   Gap margin specificity note
   ───────────────────────────
   Elementor's frontend.min.css contains:
     .elementor .elementor-widget:not(...):not(...) figure { margin: 0 }
   which has specificity (0,4,1) and resets all figure margins.

   Rules that only set float / display / order use short selectors
   (no conflict). Rules that set the gap margin use the longer form
     .elementor-widget.elementor-widget-ecs_editorial_text.e-et-flow-X figure.ecs-et-figure
   which also reaches (0,4,1) and wins by source order (our stylesheet
   is enqueued after Elementor's frontend CSS).
   ============================================================ */

/* none / before — layout */
.e-et-flow-none .ecs-et-figure,
.e-et-flow-before .ecs-et-figure { display: block; }

/* none / before — gap */
.elementor-widget.elementor-widget-ecs_editorial_text.e-et-flow-none figure.ecs-et-figure,
.elementor-widget.elementor-widget-ecs_editorial_text.e-et-flow-before figure.ecs-et-figure {
	margin-bottom: var(--ecs-et-gap, 1em);
}

/* after — layout */
.e-et-flow-after .ecs-editorial-text {
	display: flex;
	flex-direction: column;
}
.e-et-flow-after .ecs-et-figure { order: 2; }
.e-et-flow-after .ecs-et-text   { order: 1; }

/* after — gap */
.elementor-widget.elementor-widget-ecs_editorial_text.e-et-flow-after figure.ecs-et-figure {
	margin-top: var(--ecs-et-gap, 1em);
}

/* float_left — layout */
.e-et-flow-float_left .ecs-et-figure { float: left; }

/* float_left — gap */
.elementor-widget.elementor-widget-ecs_editorial_text.e-et-flow-float_left figure.ecs-et-figure {
	margin-right: var(--ecs-et-gap, 1.5em);
}

/* float_right — layout */
.e-et-flow-float_right .ecs-et-figure { float: right; }

/* float_right — gap */
.elementor-widget.elementor-widget-ecs_editorial_text.e-et-flow-float_right figure.ecs-et-figure {
	margin-left: var(--ecs-et-gap, 1.5em);
}

/* Clearfix — CSS ::after replaces the old <div class="ecs-et-clearfix"> */
.e-et-flow-float_left .ecs-editorial-text::after,
.e-et-flow-float_right .ecs-editorial-text::after {
	content: '';
	display: table;
	clear: both;
}

/* ============================================================
   Content Align — desktop base rules
   ============================================================ */

/*
 * text-align cascades into .ecs-et-text.
 * align-items activates only in 'after' flex mode.
 * display:inline-block on the figure lets it respond to text-align
 * in block layout; float overrides it in float modes.
 */

.e-et-align-left .ecs-editorial-text    { text-align: left;    align-items: flex-start; }

.e-et-align-center .ecs-editorial-text { text-align: center;  align-items: center; }
.e-et-align-center .ecs-et-figure      { display: inline-block; }

.e-et-align-right .ecs-editorial-text  { text-align: right;   align-items: flex-end; }
.e-et-align-right .ecs-et-figure       { display: inline-block; }

.e-et-align-justify .ecs-editorial-text { text-align: justify; align-items: flex-start; }

/* ============================================================
   Tablet overrides  (≤ 1024px)
   ============================================================ */

@media (max-width: 1024px) {

	/* none / before — layout */
	.e-et-tablet-flow-none .ecs-et-figure,
	.e-et-tablet-flow-before .ecs-et-figure {
		float: none;
		order: unset;
	}
	.e-et-tablet-flow-none .ecs-editorial-text,
	.e-et-tablet-flow-before .ecs-editorial-text { display: block; }

	/* none / before — gap */
	.elementor-widget.elementor-widget-ecs_editorial_text.e-et-tablet-flow-none figure.ecs-et-figure,
	.elementor-widget.elementor-widget-ecs_editorial_text.e-et-tablet-flow-before figure.ecs-et-figure {
		margin-top: 0;
		margin-right: 0;
		margin-left: 0;
		margin-bottom: var(--ecs-et-gap, 1em);
	}

	/* after — layout */
	.e-et-tablet-flow-after .ecs-editorial-text {
		display: flex;
		flex-direction: column;
	}
	.e-et-tablet-flow-after .ecs-et-figure { float: none; order: 2; }
	.e-et-tablet-flow-after .ecs-et-text   { order: 1; }

	/* after — gap */
	.elementor-widget.elementor-widget-ecs_editorial_text.e-et-tablet-flow-after figure.ecs-et-figure {
		margin-bottom: 0;
		margin-right: 0;
		margin-left: 0;
		margin-top: var(--ecs-et-gap, 1em);
	}

	/* float_left — layout */
	.e-et-tablet-flow-float_left .ecs-et-figure { float: left; order: unset; }
	.e-et-tablet-flow-float_left .ecs-editorial-text { display: block; }

	/* float_left — gap */
	.elementor-widget.elementor-widget-ecs_editorial_text.e-et-tablet-flow-float_left figure.ecs-et-figure {
		margin-top: 0;
		margin-bottom: 0;
		margin-left: 0;
		margin-right: var(--ecs-et-gap, 1.5em);
	}

	/* float_right — layout */
	.e-et-tablet-flow-float_right .ecs-et-figure { float: right; order: unset; }
	.e-et-tablet-flow-float_right .ecs-editorial-text { display: block; }

	/* float_right — gap */
	.elementor-widget.elementor-widget-ecs_editorial_text.e-et-tablet-flow-float_right figure.ecs-et-figure {
		margin-top: 0;
		margin-bottom: 0;
		margin-right: 0;
		margin-left: var(--ecs-et-gap, 1.5em);
	}

	/* Clearfix for tablet floats */
	.e-et-tablet-flow-float_left .ecs-editorial-text::after,
	.e-et-tablet-flow-float_right .ecs-editorial-text::after {
		content: '';
		display: table;
		clear: both;
	}

	/* Remove clearfix for tablet non-float modes */
	.e-et-tablet-flow-none .ecs-editorial-text::after,
	.e-et-tablet-flow-before .ecs-editorial-text::after,
	.e-et-tablet-flow-after .ecs-editorial-text::after {
		content: none;
	}

	/* Content align — tablet */
	.e-et-tablet-align-left .ecs-editorial-text    { text-align: left;    align-items: flex-start; }

	.e-et-tablet-align-center .ecs-editorial-text  { text-align: center;  align-items: center; }
	.e-et-tablet-align-center .ecs-et-figure       { display: inline-block; }

	.e-et-tablet-align-right .ecs-editorial-text   { text-align: right;   align-items: flex-end; }
	.e-et-tablet-align-right .ecs-et-figure        { display: inline-block; }

	.e-et-tablet-align-justify .ecs-editorial-text { text-align: justify; align-items: flex-start; }
}

/* ============================================================
   Mobile overrides  (≤ 767px)
   ============================================================ */

@media (max-width: 767px) {

	/* none / before — layout */
	.e-et-mobile-flow-none .ecs-et-figure,
	.e-et-mobile-flow-before .ecs-et-figure {
		float: none;
		order: unset;
	}
	.e-et-mobile-flow-none .ecs-editorial-text,
	.e-et-mobile-flow-before .ecs-editorial-text { display: block; }

	/* none / before — gap */
	.elementor-widget.elementor-widget-ecs_editorial_text.e-et-mobile-flow-none figure.ecs-et-figure,
	.elementor-widget.elementor-widget-ecs_editorial_text.e-et-mobile-flow-before figure.ecs-et-figure {
		margin-top: 0;
		margin-right: 0;
		margin-left: 0;
		margin-bottom: var(--ecs-et-gap, 1em);
	}

	/* after — layout */
	.e-et-mobile-flow-after .ecs-editorial-text {
		display: flex;
		flex-direction: column;
	}
	.e-et-mobile-flow-after .ecs-et-figure { float: none; order: 2; }
	.e-et-mobile-flow-after .ecs-et-text   { order: 1; }

	/* after — gap */
	.elementor-widget.elementor-widget-ecs_editorial_text.e-et-mobile-flow-after figure.ecs-et-figure {
		margin-bottom: 0;
		margin-right: 0;
		margin-left: 0;
		margin-top: var(--ecs-et-gap, 1em);
	}

	/* float_left — layout */
	.e-et-mobile-flow-float_left .ecs-et-figure { float: left; order: unset; }
	.e-et-mobile-flow-float_left .ecs-editorial-text { display: block; }

	/* float_left — gap */
	.elementor-widget.elementor-widget-ecs_editorial_text.e-et-mobile-flow-float_left figure.ecs-et-figure {
		margin-top: 0;
		margin-bottom: 0;
		margin-left: 0;
		margin-right: var(--ecs-et-gap, 1.5em);
	}

	/* float_right — layout */
	.e-et-mobile-flow-float_right .ecs-et-figure { float: right; order: unset; }
	.e-et-mobile-flow-float_right .ecs-editorial-text { display: block; }

	/* float_right — gap */
	.elementor-widget.elementor-widget-ecs_editorial_text.e-et-mobile-flow-float_right figure.ecs-et-figure {
		margin-top: 0;
		margin-bottom: 0;
		margin-right: 0;
		margin-left: var(--ecs-et-gap, 1.5em);
	}

	/* Clearfix for mobile floats */
	.e-et-mobile-flow-float_left .ecs-editorial-text::after,
	.e-et-mobile-flow-float_right .ecs-editorial-text::after {
		content: '';
		display: table;
		clear: both;
	}

	/* Remove clearfix for mobile non-float modes */
	.e-et-mobile-flow-none .ecs-editorial-text::after,
	.e-et-mobile-flow-before .ecs-editorial-text::after,
	.e-et-mobile-flow-after .ecs-editorial-text::after {
		content: none;
	}

	/* Content align — mobile */
	.e-et-mobile-align-left .ecs-editorial-text    { text-align: left;    align-items: flex-start; }

	.e-et-mobile-align-center .ecs-editorial-text  { text-align: center;  align-items: center; }
	.e-et-mobile-align-center .ecs-et-figure       { display: inline-block; }

	.e-et-mobile-align-right .ecs-editorial-text   { text-align: right;   align-items: flex-end; }
	.e-et-mobile-align-right .ecs-et-figure        { display: inline-block; }

	.e-et-mobile-align-justify .ecs-editorial-text { text-align: justify; align-items: flex-start; }
}
/* Settings page */



.vtfe_form .bg-primary {

	background-color:#9f2382!important;

}



/* ELementor */



.elementor-auto-video-thumbnail, .elementor-fit-aspect-ratio-auto-video-thumbnail {

	height: 0 !important;

	width: 100%;

	padding-bottom: 56.25% !important;

	position: relative;

	background-position: center;

	background-size: contain;

	background-repeat: no-repeat;

	background-color: black;

}

.elementor-auto-video-thumbnail.elementor-auto-video-thumbnail-crop, .elementor-fit-aspect-ratio-auto-video-thumbnail.elementor-auto-video-thumbnail-crop {

	background-size: cover;

}

.elementor-auto-video-thumbnail-edit {

	background-image: url(https://mlpyk33dda75.i.optimole.com/w:auto/h:auto/q:mauto/ig:avif/https://icrmedia.com/wp-content/plugins/video-thumbnailer-for-elementor/assets/images/bg.png) !important;

	background-size: auto !important;

	background-repeat: repeat !important;

	position: relative;

}

.elementor-auto-video-thumbnail-edit:not(.elementor-auto-video-thumbnail-crop):before {

	position: absolute;

	height: 100%;

	width: 100%;

	border-top: 40px solid black;

	border-bottom: 40px solid black;

	display: block;

	top: 0;

	left: 0;

	content: "";

	z-index: 2;

}

.elementor-widget-video .elementor-open-inline .elementor-custom-embed-image-overlay.elementor-auto-video-thumbnail {

	height: 100% !important;

}

.elementor-auto-video-thumbnail img {

	width: 100%;

	height: 100%;

	top: 0;

	object-fit: cover;

	position: absolute;

}