/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 1.0.1
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/*
    Add your custom styles here
*/

/*
 * Global CSS
 * */

body{
	--white-color: var(--e-global-color-1b91ec8);
	--light-bg: var(--e-global-color-secondary);
	--bg-light: var(--e-global-color-36ca65e);
	--divider-color: rgb(from var(--e-global-color-primary) r g b / 15%);
	overflow-x: clip;
}

.br-desktop-none br{
    display: none;
}

figure,
.elementor-widget-image-carousel .swiper .swiper-slide figure{
    line-height: 0;
}

p:last-child,
.elementor-widget-theme-post-excerpt p:last-child,
.elementor-widget-text-editor p:last-child{
    margin-bottom: 0;
}

.elementor-widget-icon .elementor-icon-wrapper,
.elementor-widget-icon-box .elementor-icon-box-icon{
    line-height: 0;
}

.icon-height-size.elementor-widget-icon .elementor-icon-wrapper .elementor-icon svg{
    height: auto;
}

.elementor-widget-icon-box .elementor-icon-box-title,
.elementor-widget-image-box .elementor-image-box-title{
    margin-top: 0;
}

.icon-box-icon-center.elementor-widget-icon-box .elementor-icon-box-wrapper{
    align-items: center;
}

/* Button CSS */

.elementor-widget-button .elementor-button-wrapper{
	line-height: 0;
}

.elementor-widget-button .elementor-button,
.elementor-cta .elementor-button{
	position: relative;
    transition: all 0.3s ease-in-out;
	overflow: hidden;
	z-index: 1;
}

.elementor-widget-button .elementor-button:before,
.elementor-cta .elementor-button:before{
	content: '';
	position: absolute;
	top: 0;
	left: auto;
	right: 0;
	bottom: 0;
	background-color: var(--white-color);
	width: 0;
	height: 100%;
	transition: all 0.5s ease-in-out;
	z-index: -1;
}

.elementor-widget-button .elementor-button:hover:before,
.elementor-widget-button .elementor-button:focus:before,
.elementor-cta .elementor-button:hover:before,
.elementor-cta .elementor-button:hover:before{
	left: 0;
	right: auto;
	width: 100%;
}

.dark-btn.elementor-widget-button .elementor-button:before{
/* 	background: var(--e-global-color-accent); */
}

.no-bg.elementor-widget-button .elementor-button:before,
.underline-btn.elementor-widget-button .elementor-button:before{
	display: none;
}

.elementor-widget-button .elementor-button .elementor-button-content-wrapper{
	align-items: center;
}

.elementor-widget-button .elementor-button .elementor-button-content-wrapper .elementor-button-icon{
	line-height: 0;
}

.elementor-widget-button .elementor-button .elementor-button-icon svg{
	width: 16px;
	height: 16px;
}

.elementor-widget-button .elementor-button .elementor-button-icon svg path{
	transition: all 0.3s ease-in-out;
}

.underline-btn.elementor-widget-button .elementor-button .elementor-button-text{
	text-decoration-line: underline;
	text-decoration-style: solid;
	text-decoration-skip-ink: auto;
	text-decoration-thickness: auto;
	text-underline-offset: auto;
	text-underline-position: from-font;
}

/* Header Button CSS
   Buttons added inside the header (e.g. the Contact Us CTA) don't inherit
   the global button look automatically because the widget's Style panel
   wasn't bound to the global. Force the same scheme we use for the GF
   submit and carousel arrows: purple (#958BC2) bg with white text and
   matching border at rest; on hover the existing .elementor-button:before
   wipe-to-white already paints the background, so we just flip the text
   to the primary color so it stays readable over the wipe.
   Scoped to .main-header so this only affects buttons in the header and
   leaves body buttons alone. Uses !important to beat any per-widget inline
   style Elementor may generate for the element's own ID. */
.main-header .elementor-widget-button .elementor-button,
.main-header .elementor-widget-button .elementor-button:visited{
	background-color: #958BC2 !important;
	color: var(--white-color) !important;
	border: 1px solid var(--white-color) !important;
}

/* On hover the :before wipe paints the button white, so the white border
   would disappear against it. Swap to the #958BC2 border color on hover
   so the pill outline stays visible during the wipe transition. */
.main-header .elementor-widget-button .elementor-button:hover,
.main-header .elementor-widget-button .elementor-button:focus{
	color: var(--e-global-color-primary) !important;
	border-color: #958BC2 !important;
}

/* The text span carries its own color via Elementor's generated CSS, so
   force it to inherit from the anchor — otherwise the hover color change
   above stops at the <a> and the text stays white over the white wipe. */
.main-header .elementor-widget-button .elementor-button .elementor-button-text{
	color: inherit !important;
}

/* ==========================================================================
   Floating mobile "Contact Us" CTA
   Markup is printed in the footer via kmt_mobile_contact_cta() in
   functions.php. The element is present in the DOM at all viewports but
   is hidden by default — the <=767px rule below is the only place it's
   shown, so tablet and desktop users never see it.

   Design intent: always-visible contact CTA on phones. The regular header
   Contact Us button is hidden on tablet + mobile, so small-screen visitors
   otherwise have no one-tap route to the contact form.

   Positioning:
   - position: fixed pinned to the bottom-right corner of the viewport.
   - env(safe-area-inset-bottom/right) keeps it clear of the iOS home
     indicator and any rounded-corner / notch safe areas.
   - z-index above the header (the sticky header uses z-index ~100-1000
     depending on theme; 9999 keeps us above anything Elementor ships).

   Shape: perfect circle (width === height, border-radius: 50%) with a
   phone-icon glyph painted via mask-image so we can recolor the SVG with
   background-color — the source SVG's own fill is irrelevant, the mask
   just uses its shape as an alpha channel.

   Color scheme matches the rest of the site's button treatment:
   rest  -> purple (#958BC2) bg, white icon, white border
   hover -> white bg (wipe), primary-color icon, purple border
   Same swap we use on the header button and GF submit.
   ========================================================================== */
.mobile-contact-cta{
	display: none;
}

@media only screen and (max-width: 767px) {

	.mobile-contact-cta{
		display: inline-flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		right: calc(16px + env(safe-area-inset-right, 0px));
		bottom: calc(16px + env(safe-area-inset-bottom, 0px));
		/* Fixed square + border-radius: 50% = perfect circle. 60px is a
		   comfortable tap target (well above the 44px minimum) while still
		   staying out of the way of content. */
		width: 60px;
		height: 60px;
		border-radius: 50%;
		background-color: #958BC2;
		border: 1px solid var(--white-color);
		text-decoration: none;
		box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
		z-index: 9999;
		/* overflow: hidden so the ::before wipe is clipped to the circle
		   shape. position: fixed already establishes a stacking context,
		   which lets the ::before's z-index: -1 sit BETWEEN the button's
		   purple background and its icon — matching how the main
		   Elementor .elementor-button:before wipe is layered above. */
		overflow: hidden;
		transition:
			border-color 0.3s ease-in-out;
	}

	/* Wipe-to-white overlay — identical mechanics to the
	   .elementor-widget-button .elementor-button:before rule near the top
	   of the file. Starts anchored right-edge at 0 width, grows to 100%
	   on press. On mobile :hover is sticky after tap, :active fires during
	   the press, :focus fires for keyboard and post-tap focus — all three
	   trigger the wipe so the animation plays whether the user taps with
	   a finger or navigates with a keyboard. */
	.mobile-contact-cta:before{
		content: '';
		position: absolute;
		top: 0;
		left: auto;
		right: 0;
		bottom: 0;
		background-color: var(--white-color);
		width: 0;
		height: 100%;
		transition: all 0.5s ease-in-out;
		z-index: -1;
	}

	.mobile-contact-cta:hover,
	.mobile-contact-cta:focus,
	.mobile-contact-cta:active{
		border-color: #958BC2;
		text-decoration: none;
	}

	.mobile-contact-cta:hover:before,
	.mobile-contact-cta:focus:before,
	.mobile-contact-cta:active:before{
		left: 0;
		right: auto;
		width: 100%;
	}

	/* Icon is painted via mask-image: the SVG's shape becomes an alpha
	   mask over a solid background-color, so the "color" of the icon is
	   whatever we set as the span's background-color. On hover the wipe
	   turns the circle white, so we flip the icon to the primary purple
	   so it stays visible against the white background. */
	.mobile-contact-cta-icon{
		display: block;
		width: 28px;
		height: 28px;
		background-color: var(--white-color);
		-webkit-mask-image: url('https://kmtwellness.wpenginepowered.com/wp-content/uploads/2026/01/home5-header-call-icon_dynamic.svg');
		mask-image: url('https://kmtwellness.wpenginepowered.com/wp-content/uploads/2026/01/home5-header-call-icon_dynamic.svg');
		-webkit-mask-repeat: no-repeat;
		mask-repeat: no-repeat;
		-webkit-mask-position: center;
		mask-position: center;
		-webkit-mask-size: contain;
		mask-size: contain;
		transition: background-color 0.3s ease-in-out;
	}

	.mobile-contact-cta:hover .mobile-contact-cta-icon,
	.mobile-contact-cta:focus .mobile-contact-cta-icon,
	.mobile-contact-cta:active .mobile-contact-cta-icon{
		background-color: var(--e-global-color-primary);
	}

	/* Reserve scroll runway so the last bit of page content isn't
	   permanently hidden behind the floating button. 80px covers the
	   circle (60px) + its 16px bottom inset + a little breathing room. */
	body{
		padding-bottom: 80px;
	}
}

/* Icon & Images Box CSS */
.elementor-widget-icon-box .elementor-icon-box-description a,
.elementor-widget-image-box .elementor-image-box-description a{
    color: inherit;
    transition: all 0.3s ease-in-out;
}

/*  Tab Widget CSS */
.elementor-widget-n-tabs .e-n-tabs-heading .e-n-tab-title:hover,
.elementor-widget-n-tabs .e-n-tabs-heading .e-n-tab-title:focus{
    border-radius: var(--n-tabs-title-border-radius);
}

.elementor-widget-n-tabs .e-n-tabs-heading .e-n-tab-title{
    transition: all 0.3s ease-in-out;
}

.elementor-widget-n-tabs .e-n-tabs-heading .e-n-tab-title .e-n-tab-icon svg path{
    transition: all 0.3s;
}

/* Menu Border CSS */
.elementor-widget-nav-menu ul.elementor-nav-menu--dropdown a, 
.elementor-widget-nav-menu ul.elementor-nav-menu--dropdown a:focus, 
.elementor-widget-nav-menu ul.elementor-nav-menu--dropdown a:hover{
	border-inline-start: 0 !important;
}

/*	Overflow in Container Edit Mode CSS */
.elementor-element.overflow-hidden-container.elementor-element-edit-mode .elementor-editor-element-overlay-settings{
	border-end-end-radius: 5px;
    border-end-start-radius: 5px;
    border-start-end-radius: 0;
    border-start-start-radius: 0;
	transform:translateX(-50%) translateY(0%);
}

.elementor-element.overflow-hidden-container.elementor-element-edit-mode .elementor-editor-element-setting:first-child:before{
	border-block-end: 22px solid transparent;
	border-block-start: 0px solid transparent;
	border-inline-end: 12px solid var(--e-p-border-section);
	border-inline-start: 0 none transparent;
	inset-block-start: 0px;
}

.elementor-element.overflow-hidden-container.elementor-element-edit-mode .elementor-editor-element-setting:first-child {
    border-end-end-radius: 0;
    border-end-start-radius: 5px;
    border-start-end-radius: 0;
    border-start-start-radius: 0;
}

.elementor-element.overflow-hidden-container.elementor-element-edit-mode .elementor-editor-element-setting:last-child:after {
    border-block-end: 22px solid transparent;
    border-block-start: 0 none transparent;
    border-inline-end: 0 none transparent;
    border-inline-start: 12px solid var(--e-p-border-section);
    inset-block-start: 0px;
}

.elementor-element.overflow-hidden-container.elementor-element-edit-mode .elementor-editor-element-setting:last-child {
    border-end-end-radius: 5px;
    border-end-start-radius: 0;
    border-start-end-radius: 0;
    border-start-start-radius: 0;
}

/* Counter Prefix Font Family Changes CSS */

.elementor-widget-counter .elementor-counter .elementor-counter-number-prefix,
.elementor-widget-counter .elementor-counter .elementor-counter-number-suffix{
	font-family: var(--e-global-typography-text-font-family), Sans-serif;
}

.elementor-widget-counter .elementor-counter .elementor-counter-number-prefix cite,
.elementor-widget-counter .elementor-counter .elementor-counter-number-suffix cite{
	font-family: var(--e-global-typography-primary-font-family), Sans-serif;
	font-style: var(--e-global-typography-primary-font-style);
}

@media only screen and (max-width: 1320px) {
	
	.container-padding-left{
		padding-left: 10px;
	}
	
	.container-padding-right{
		padding-right: 10px;
	}
}

@media only screen and (max-width: 1024px) {
		
	.br-tablet-none br{
		display: none;
	}
	
	.container-padding-left{
		padding-left: var(--padding-left);
	}
	
	.container-padding-right{
		padding-right: var(--padding-right);
	}
}

@media only screen and (max-width: 767px) {

	.br-mobile-none br{
		display: none;
	}

}

/* ==========================================================================
   Services Carousel (Tablet + Mobile, <= 1024px)
   Converts a 3x3 grid of Elementor containers into a horizontal, one-at-a-time
   swipe/scroll carousel with infinite loop and prev/next arrows.
   Desktop layout (>= 1025px) is untouched.
   Usage: add CSS class "services-carousel" to the outer container in Elementor.
   ========================================================================== */
@media only screen and (max-width: 1024px) {

	/* Wrapper injected by JS to hold the carousel track + the nav row below.
	   Hard-capped to 100% of its parent so nothing below (the nav row) inherits
	   an inflated width from the scroll track. */
	.services-carousel-wrap {
		display: block;
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
		overflow: hidden;          /* clip any stray horizontal bleed */
	}

	/* Main container becomes a horizontal snap-scroll track */
	.services-carousel.e-con,
	.elementor-element.services-carousel.e-con {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		align-items: stretch !important;
		overflow-x: auto !important;
		overflow-y: hidden !important;
		scroll-snap-type: x mandatory !important;
		overscroll-behavior-x: contain !important;
		-webkit-overflow-scrolling: touch !important;
		gap: 15px !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		box-sizing: border-box !important;
		scrollbar-width: none;        /* Firefox */
		-ms-overflow-style: none;     /* IE/Edge */
	}

	.services-carousel.e-con::-webkit-scrollbar {
		display: none;                /* WebKit */
	}

	/* Row containers (direct children WITHOUT the .sc-slide marker) are
	   removed from the layout so their 3 cards become direct flex items
	   of the carousel track. Clones added by JS have .sc-slide, so they
	   are excluded from this rule. */
	.services-carousel.e-con > .e-con:not(.sc-slide) {
		display: contents !important;
	}

	/* Every slide (real card + cloned edges) — default is 1 per view.
	   Tablet media query below overrides this to 2 per view.
	   min-width: 0 + box-sizing prevents Elementor/child content from
	   forcing the slide wider than its flex basis (which was causing
	   the card to blow past the viewport on small phones). */
	.services-carousel.e-con .sc-slide,
	.services-carousel.e-con > .e-con > .e-con {
		flex: 0 0 100% !important;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		box-sizing: border-box !important;
		scroll-snap-align: start !important;
		scroll-snap-stop: always !important;
	}

	/* Keep any images inside cards within their slide width. */
	.services-carousel.e-con .sc-slide img,
	.services-carousel.e-con > .e-con > .e-con img {
		max-width: 100% !important;
		height: auto;
	}

	/* Nav row sits BELOW the carousel track, centered, with the two arrows.
	   !important on display + visibility because some theme CSS was hiding
	   the row on narrow viewports. */
	.services-carousel-nav {
		display: flex !important;
		visibility: visible !important;
		opacity: 1 !important;
		justify-content: center;
		align-items: center;
		gap: 40px;
		margin-top: 20px;
		padding: 6px 0;
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
	}

	/* Arrows: no background, no border, just a clean arrow glyph. */
	.services-carousel-arrow {
		-webkit-appearance: none !important;
		appearance: none !important;
		background: transparent !important;
		border: 0 !important;
		border-radius: 0 !important;
		box-shadow: none !important;
		padding: 6px !important;
		margin: 0 !important;
		color: var(--e-global-color-primary, #3a1f5c) !important;
		cursor: pointer;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		line-height: 0 !important;
		width: auto !important;
		height: auto !important;
		min-width: 0 !important;
		min-height: 0 !important;
		transition: opacity 0.2s ease, transform 0.2s ease;
		-webkit-tap-highlight-color: transparent;
	}

	.services-carousel-arrow:hover,
	.services-carousel-arrow:focus-visible {
		opacity: 0.65;
		outline: none;
	}

	.services-carousel-arrow:active {
		transform: scale(0.9);
	}

	/* SVG arrow body — defensive rules so nothing else in the theme can
	   fill it solid (which is what was producing the "purple blocks"). */
	.services-carousel-arrow svg {
		width: 32px;
		height: 32px;
		display: block;
		fill: none !important;
		stroke: currentColor !important;
		stroke-width: 2;
		stroke-linecap: round;
		stroke-linejoin: round;
		overflow: visible;
	}

	.services-carousel-arrow svg *,
	.services-carousel-arrow svg path,
	.services-carousel-arrow svg line,
	.services-carousel-arrow svg polyline,
	.services-carousel-arrow svg polygon {
		fill: none !important;
		stroke: currentColor !important;
	}
}

/* Tablet only (768–1024px): show 2 cards per view instead of 1.
   Cards become ~half the carousel width; the rest of the carousel
   (gap, snap, infinite loop) keeps working. */
@media only screen and (min-width: 768px) and (max-width: 1024px) {

	.services-carousel.e-con .sc-slide,
	.services-carousel.e-con > .e-con > .e-con {
		flex: 0 0 calc((100% - 15px) / 2) !important;
		width: calc((100% - 15px) / 2) !important;
		max-width: calc((100% - 15px) / 2) !important;
	}
}

/* Mobile only (≤767px): larger tap targets + a bit more presence so the
   arrows are noticeable once the user scrolls to the bottom of the card. */
@media only screen and (max-width: 767px) {

	.services-carousel-nav {
		gap: 50px;
		margin-top: 18px;
		padding: 10px 0 4px;
	}

	.services-carousel-arrow {
		padding: 10px !important;
	}

	.services-carousel-arrow svg {
		width: 36px;
		height: 36px;
	}
}


/* 
 * Header CSS 
 * */

/* For Editor if Header BG Color Was White OR Transparent */
body .site-header,
body.hello-elementor-default .elementor-location-header,
body.elementor-editor-active .elementor-location-header,
body.elementor-template-full-width .elementor-location-header{
	background-color: var(--e-global-color-primary);
}

/* For Mega Menu */
body.hello-elementor-default .elementor-widget-maxmegamenu .elementor-location-header,
body.elementor-template-full-width .elementor-widget-maxmegamenu .elementor-location-header{
	background-color: transparent;
}

.main-header{
	backdrop-filter: blur(7.5px);
	transition: all 0.6s ease-in-out
}

.main-header.elementor-sticky--effects.elementor-sticky--active{
	background-color: #00000033 !important;
	backdrop-filter: blur(20px);
}

/* ==========================================================================
   Header width fix (stretch-section + sticky recalc)
   Elementor writes inline `width` / `margin-left` onto the header section
   via JS — both for the stretch-section feature (normal state) and the
   sticky effect (scrolled state). Those values are calculated once, at the
   moment the script ran, and don't refresh on window resize. When you
   resize the browser the header keeps its old pixel width and appears
   compressed/marooned in the middle of the new viewport — in both states.
   Forcing full width with !important overrides the stale inline styles.
   Companion JS in function.js also clears the inline values on resize so
   Elementor can recompute cleanly.
   ========================================================================== */
.elementor-location-header .elementor-section-stretched,
.main-header,
.main-header.elementor-sticky,
.main-header.elementor-sticky--active,
.main-header.elementor-sticky--effects.elementor-sticky--active {
	width: 100% !important;
	max-width: 100% !important;
	left: 0 !important;
	right: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.header-logo img[src$=".svg"]{
	width: auto !important;
}

.header-logo img{
	transition: all 0.3s ease-in-out;
}

.mobile-menu{
	display: none !important;
}

.header-menu .elementor-nav-menu--main > .elementor-nav-menu > li > .elementor-nav-menu--dropdown, 
.header-menu .elementor-nav-menu__container.elementor-nav-menu--dropdown{
	transition: all 0.3s ease-in-out;
}

.main-header.elementor-sticky.elementor-sticky--effects .header-menu .elementor-nav-menu--main > .elementor-nav-menu > li > .elementor-nav-menu--dropdown, 
.main-header.elementor-sticky.elementor-sticky--effects .header-menu .elementor-nav-menu__container.elementor-nav-menu--dropdown{
	margin-top: 23px !important;
}

/*
 * Max Mega Menu CSS
 * Scope: .header-menu .mega-menu-wrap .max-mega-menu
 * These selectors are intentionally class-based (not ID-based) so every
 * Max Mega Menu location that Philip assigns to the header widget —
 * e.g. the default desktop menu and the newer "Mobile" location used on
 * tablet/phone — picks up the same styling without the need to duplicate
 * each rule per location ID.
 * */

/* Max Mega Menu CSS */

.header-menu .mega-menu-wrap .max-mega-menu li.mega-menu-item.mobile-menu{
	display: none !important;
}

/* Menu Visiable CSS */
.header-menu ul li.mega-menu-visiable ul{
    opacity: 1 !important;
	visibility: visible !important;
}

.header-menu .mega-menu-wrap > ul > li > ul{
	margin-top: 25px !important;
	box-shadow: 0px 0px 10px 5px rgb(from var(--e-global-color-secondary) r g b / 10%);
}

.main-header.elementor-sticky.elementor-sticky--effects .header-menu .mega-menu-wrap > ul > li > ul{
	margin-top: 25px !important;
}

/* Mega Menu Templated CSS */
.mega-menu-img-box .elementor-image-box-img{
	overflow: hidden;
}

.mega-menu-img-box .elementor-image-box-img img{
	aspect-ratio: 1 / 0.8;
    object-fit: cover;
	transition: all 0.6s ease-in-out !important;
}

.mega-menu-img-box:hover .elementor-image-box-img img{
	transform: scale(1.1);
}

/* ==========================================================================
   Header menu link color scheme.
   Palette (confirmed by Philip):
     Dark purple:   #958BC2  (the primary accent color used site-wide)
     Medium purple: #D7D7F1  (soft lavender, used for mobile hover text)
     Light purple:  #E6E4F1  (softest lavender, used for mobile hover/current bg)

   Rest (all viewports): white text, no background or border.

   Desktop horizontal mode:
     Hover / focus / current-menu-item: text flips to dark purple. No
     background change — in the horizontal bar the link is its own
     element; adding a block background would make it read as a pill.

   Mobile dropdown mode (≤1024px, handled in the media query below):
     Hover / focus: medium-purple text on light-purple background.
     Current-menu-item: dark-purple text on light-purple background.
     The background treatment works here because each link is already
     a full-width row in the dropdown.

   !important is required because Max Mega Menu's own stylesheet
   targets these links with the same selector specificity and ships
   its own colors via its admin-configured theme.
   ========================================================================== */
.header-menu .mega-menu-wrap .max-mega-menu > li.mega-menu-item > a.mega-menu-link{
	color: var(--white-color) !important;
	background: transparent !important;
	border: none !important;
	transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out !important;
}

.header-menu .mega-menu-wrap .max-mega-menu > li.mega-menu-item > a.mega-menu-link:hover,
.header-menu .mega-menu-wrap .max-mega-menu > li.mega-menu-item > a.mega-menu-link:focus,
.header-menu .mega-menu-wrap .max-mega-menu > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link{
	color: #958BC2 !important;
}


@media only screen and (max-width: 1024px) {

	/* 	body.elementor-editor-active .elementor-location-header[data-elementor-post-type=elementor_library]>.elementor-document-handle{
		min-height: 80px;
	} */

	/* ==========================================================================
	   Vertically center logo + hamburger on tablet / mobile
	   On narrow viewports the header's inner row defaults to flex-start
	   vertical alignment, so the logo and the hamburger end up at
	   different vertical positions (logo drifts down with its own line
	   height; hamburger pins to the top of the column). Force the row
	   to center-align its children and make the logo / menu columns
	   center themselves too.
	   Covers both layout generations Elementor ships with:
	   - legacy section/column: .elementor-container + .elementor-column
	   - flex containers:        .e-con + .e-con-inner
	   ========================================================================== */
	.main-header > .elementor-container,
	.main-header .elementor-container,
	.main-header > .e-con-inner,
	.main-header.e-con > .e-con-inner,
	.main-header.e-con{
		align-items: center !important;
	}

	.main-header .elementor-column,
	.main-header > .e-con-inner > .e-con,
	.main-header .header-logo,
	.main-header .header-menu{
		align-self: center !important;
	}

	/* The logo and menu widgets both have their own .elementor-widget-container
	   wrapper that sometimes carries inline padding/margin from Elementor's
	   widget-level spacing controls. Reset top/bottom auto-margins so the
	   center alignment above isn't fought by stray widget-level margins. */
	.main-header .header-logo > .elementor-widget-container,
	.main-header .header-menu > .elementor-widget-container{
		margin-top: auto;
		margin-bottom: auto;
	}

	.mobile-menu{
		display: block !important;
	}
	
	.main-header.elementor-sticky.elementor-sticky--effects .header-menu .elementor-nav-menu__container.elementor-nav-menu--dropdown{
		margin-top: 20px !important;
	}
	
	/* Mega Menu CSS */
	
	.header-menu .mega-menu-wrap .max-mega-menu li.mega-menu-item.mobile-menu{
		display: block !important;
	}
	
	/* Menu Toggle Button CSS Start
	   These rules used to rely on #mega-menu-wrap-menu-1 for specificity
	   to beat Max Mega Menu's own defaults. Now that the selector is
	   class-based (so a newly-created Mobile menu location picks them up
	   too), we lose two points of ID specificity — add !important on the
	   structural properties so MMM's internal ID-prefixed rules can't win
	   the cascade. */
	.header-menu .mega-menu-wrap .mega-menu-toggle{
		align-items: center !important;
		justify-content: center !important;
		width: 40px !important;
        height: 40px !important;
		border-radius: 0 !important;
	}

	.header-menu .mega-menu-wrap .mega-menu-toggle .mega-toggle-block-0 .mega-toggle-animated-box{
		width: 35px !important;
    	height: 23px !important;
	}

	.header-menu .mega-menu-wrap .mega-menu-toggle .mega-toggle-blocks-right .mega-toggle-block:only-child{
		margin-left: 6px !important;
	}
	
	.header-menu .mega-menu-wrap .mega-menu-toggle .mega-toggle-animated-box .mega-toggle-animated-inner,
	.header-menu .mega-menu-wrap .mega-menu-toggle .mega-toggle-animated-box .mega-toggle-animated-inner:before,
	.header-menu .mega-menu-wrap .mega-menu-toggle .mega-toggle-animated-box .mega-toggle-animated-inner:after{
		width: 35px !important;
	}
	/* Menu Toggle Button CSS End */
	
	/* Menu Menu List CSS Start */
	.header-menu ul.mega-menu{
		margin-top: 20px !important;
        max-height: calc(100vh - 80px) !important;
		overflow: auto !important;
		filter: drop-shadow(0px 5px 5px rgb(from var(--e-global-color-accent) r g b / 10%));
	}
	
	.main-header.elementor-sticky.elementor-sticky--effects .header-menu ul.mega-menu{
		margin-top: 20px !important;
	}
	
	.header-menu .mega-menu-wrap > ul > li > ul{
		margin-top: 0 !important;
		box-shadow: none;
		filter: none;
	}	
	
	.header-menu .mega-menu-wrap .max-mega-menu>li.mega-menu-item>a.mega-menu-link{
		display: flex !important;
		padding: 0 20px !important;
	}
	
	/* Mobile dropdown hover + current-menu-item treatment.
	   Hover / focus:        dark-purple text on light-purple bg
	                         (#958BC2 on #E6E4F1).
	   Current (active page, or section once the scroll spy is wired):
	                         dark-purple text on light-purple bg
	                         (#958BC2 on #E6E4F1) — same as hover so the
	                         current item doesn't visually regress when
	                         mouse-hovered.
	   See the unscoped block above for the shared rest state and for
	   the reason we have to repeat the full selector chain plus
	   !important here. */
	.header-menu .mega-menu-wrap .max-mega-menu > li.mega-menu-item > a.mega-menu-link:hover,
	.header-menu .mega-menu-wrap .max-mega-menu > li.mega-menu-item > a.mega-menu-link:focus,
	.header-menu .mega-menu-wrap .max-mega-menu > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link{
		color: #958BC2 !important;
		background: #E6E4F1 !important;
	}


	.header-menu .mega-menu-item.mega-menu-item-has-children > a.mega-menu-link:before{
		display: none !important;
		position: absolute !important;
		bottom: 0;
		left: 0;
		transform: translatex(0);
		border: 0px solid transparent;
		opacity: 0 !important;
	}
	
	/* Sub Menu List CSS */
	.header-menu .mega-menu-wrap .max-mega-menu>li.mega-menu-item> ul li a.mega-menu-link{
		padding: 0 30px !important;
	}
	
	.main-header.elementor-sticky.elementor-sticky--effects .header-menu .mega-menu-wrap > ul > li > ul{
		margin-top: 0 !important;
	}
	
	.header-menu .mega-menu-item.mega-menu-item-has-children .mega-indicator{
		display: inline-block !important;
		margin: 0 0 0 10px !important;
	}
	
	/* Menu Menu List CSS End */

	/* Mega Menu Template CSS */
	.mega-menu-img-box .elementor-image-box-img img {
		aspect-ratio: 1 / 0.5;
		object-fit: cover;
	}
}

@media only screen and (max-width: 767px) {
	
	.main-header.elementor-sticky.elementor-sticky--effects .header-logo img{
		
	}
	
	.main-header.elementor-sticky.elementor-sticky--effects .header-menu .elementor-nav-menu__container.elementor-nav-menu--dropdown{
		margin-top: 15px !important;
	}	
	
	/* Header Mega Menu CSS */
	.header-menu ul.mega-menu{
		margin-top: 15px !important;
		max-height: calc(100vh - 70px) !important;
	}
	
	.main-header.elementor-sticky.elementor-sticky--effects .header-menu ul.mega-menu{
		margin-top: 15px !important;
	}

	
	/* Mega Menu Templated CSS */
	.mega-menu-img-box .elementor-image-box-img img {
		aspect-ratio: 1 / 0.85;
		object-fit: cover;
	}
}

/* 
 * Footer Section CSS 
 * */


@media only screen and (max-width: 767px) {
	
	.footer-menu .elementor-nav-menu--layout-horizontal .elementor-nav-menu{
		flex-direction: column;
	}

	.footer-menu.elementor-nav-menu__align-justify .elementor-nav-menu--layout-horizontal .elementor-nav-menu>li>a{
    	justify-content: flex-start;
	}

	.footer-menu .elementor-nav-menu--layout-horizontal .elementor-nav-menu>li:not(:last-child)>a {
		margin-bottom: var(--e-nav-menu-horizontal-menu-item-margin); 
		margin-inline-end: 0;
	}
	
	.footer-menu .elementor-nav-menu--layout-horizontal .elementor-nav-menu>li:not(:first-child)>a {
		margin-top: var(--e-nav-menu-horizontal-menu-item-margin); 
		margin-inline-start: 0;
	}

	
}

/*
 * Home Page CSS
 * */

.about-img-container{
	
}

.about-img-1{
	filter: drop-shadow(0 0 30px rgba(0, 0, 0, 0.20));
}

.about-img-1 img{
	aspect-ratio: 1 / 0.45;
	object-fit: cover;
}

.about-img-2,
.about-img-3{
	position: relative;
}

.about-img-2:before,
.about-img-3:before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: var(--e-global-color-primary);
	opacity: 50%;
	width: 100%;
	height: 100%;
}

.about-img-2 img{
	aspect-ratio: 1 / 0.44;
	object-fit: cover;
}

.about-img-3 img{
	aspect-ratio: 1 / 0.44;
	object-fit: cover;
}

.why-choose-us-1 img{
	aspect-ratio: 1 / 0.85;
	object-fit: cover;
}

.why-choose-us-2 img{
	aspect-ratio: 1 / 1.35;
	object-fit: cover;
}

.pricing-price-title .elementor-heading-title span{
	position: relative;
    display: inline-block;
	font-size: 22px;
    margin-left: 4px;
	line-height: 1em;
}

.pricing-price-title .elementor-heading-title span:before{
	content: '/';
	display: inline-block;
	position: relative;
	font-family: var(--e-global-typography-text-font-family), Sans-serif;
    font-weight: var(--e-global-typography-text-font-weight);
    padding-right: 4px;
}

.client-review .elementor-main-swiper{
	width: 100% !important;
	padding-bottom: 0 !important;
}

.client-review .elementor-main-swiper .elementor-testimonial{
	position: relative;
	display: flex;
	align-items: flex-end;
}

.client-review .elementor-main-swiper .elementor-testimonial .elementor-testimonial__content{
	width: 52.8%;
	width: calc(52.8% + 80px);
	background-color: var(--light-bg);
	padding: 30px;
	margin-left: -80px;
}

.client-review .elementor-main-swiper .elementor-testimonial .elementor-testimonial__footer{
	width: 48.2%;
}

.client-review .elementor-testimonial .elementor-testimonial__footer .elementor-testimonial__image{
	line-height: 0;
}

.client-review .elementor-testimonial__footer .elementor-testimonial__image img{
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.client-review .elementor-main-swiper .elementor-swiper-button{
	position: absolute;
	top: 0;
	bottom: auto !important;
	left: auto;
	right: 0;
	width: 36px;
	height: 30px;
	transform: translateY(0);
}

.client-review .elementor-main-swiper .elementor-swiper-button-prev{
	right: 135px;
}

.client-review .elementor-main-swiper .elementor-swiper-button i{
	background-color: currentcolor;
	mask-image: url("./images/arrow.svg");
	mask-position: center center;
	mask-repeat: no-repeat;
	mask-size: cover;
	width: 100%;
	height: 100%;
	transition: all 0.3s ease-in-out;
}

.client-review .elementor-main-swiper .elementor-swiper-button:hover i{
	background-color: var(--e-global-color-primary);
}

.client-review .elementor-main-swiper .elementor-swiper-button-prev i{
	transform: scale(-1);
}

.client-review .elementor-main-swiper .elementor-swiper-button i:before{
	content: '' !important;
}

.client-review .elementor-main-swiper .swiper-pagination{
	position: absolute;
	top: 0;
	bottom: auto !important;
	left: auto;
	right: 40px;
	display: flex;
	align-items: center;
	width: auto;
	height: 30px;
	line-height: 0;
}

.client-review .elementor-main-swiper .elementor-testimonial{
	position: relative;
	display: flex;
	align-items: flex-end;
	isolation: isolate;
}

.client-review .elementor-main-swiper .elementor-testimonial .elementor-testimonial__content{
	width: 52.8%;
	width: calc(52.8% + 80px);
	background-color: var(--light-bg);
	padding: 30px;
	margin-left: -80px;
	position: relative;
	z-index: 2;
}

.client-review .elementor-main-swiper .elementor-testimonial .elementor-testimonial__footer{
	width: 48.2%;
	position: relative;
	z-index: 1;
}

@media only screen and (max-width: 1024px) {
	
	.about-img-1 img{
		aspect-ratio: 1 / 0.66;
	}
	
	.about-img-2 img{
		aspect-ratio: 1 / 0.45;
	}
	
	.about-img-3 img{
		aspect-ratio: 1 / 0.45;
	}
	
	.why-choose-us-1 img,
	.why-choose-us-2 img{
		aspect-ratio: 1 / 1.1;		
	}
	
	.client-review .elementor-main-swiper .elementor-testimonial .elementor-testimonial__footer{
		width: 50%;
	}
	
	.client-review .elementor-main-swiper .elementor-testimonial .elementor-testimonial__content{
		width: calc(50% + 80px);
	}
	
	.client-review .elementor-main-swiper .elementor-swiper-button{
		width: 30px;
		height: 24px;
	}
	
	.client-review .elementor-main-swiper .swiper-pagination{
		height: 24px;
	}
	
}

@media only screen and (max-width: 767px) {
	
	.why-choose-us-1 img, .why-choose-us-2 img {
		aspect-ratio: 1 / 1.5;
	}
	
	.pricing-price-title .elementor-heading-title span{
		font-size: 20px;
	}
	
	.client-review .elementor-main-swiper{
		padding-bottom: 40px !important;
	}
	
	.elementor-testimonial--layout-image_left .elementor-testimonial{
		flex-direction: column-reverse;
	}
	
	.client-review .elementor-main-swiper .elementor-testimonial .elementor-testimonial__footer{
		width: 100%;
	}
	
	.client-review .elementor-testimonial__footer .elementor-testimonial__image img{
		aspect-ratio: 1 / 0.66;
	}
	
	.client-review .elementor-main-swiper .elementor-testimonial .elementor-testimonial__content{
		width: 100%;
		margin-left: 0;
		padding: 20px;
	}
	
	.client-review .elementor-main-swiper .elementor-swiper-button{
		top: auto;
		bottom: 0 !important;
        width: 24px;
        height: 18px;
	}
	
	.client-review .elementor-main-swiper .elementor-swiper-button-prev {
		right: auto;
		left: 0;
	}
	
	.client-review .elementor-main-swiper .swiper-pagination{
		top: auto;
		bottom: 0 !important;
		left: 50%;
		right: auto;
		transform: translateX(-50%);
		height: 18px;
	}
	
}


/*
 * About Us Page CSS
 * */

.page-breadcrumb ul li:after{
	transform: rotate(15deg);
}

.about-page-img-1{
	height: 100%;
}

.about-page-img-1 img{
	aspect-ratio: 1 / 1.25;
	object-fit: cover;
	height: 100%;
}

.about-page-img-2 img{
	aspect-ratio: 1 / 0.4;
	object-fit: cover;
}

.about-page-icon-box{
	position: relative;
}

.about-page-icon-box:before{
	content: '';
	position: absolute;
	top: 0;
	left: auto;
	right: -15px;
	bottom: 0;
	background-color: rgb(from var(--e-global-color-primary) r g b / 15%);
	width: 1px;
	height: 100%;
}

.about-page-icon-box:nth-of-type(4n + 4):before,
.about-page-icon-box:last-child:before{
	display: none;
}

.premium-facial-img img{
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.premium-facial-img-title{
	writing-mode: sideways-lr;
	height: calc(100% - 20px);
}

.premium-facial-img-title .elementor-widget-container{
	width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.our-team-img-box:nth-of-type(even) .elementor-image-box-wrapper{
	display: flex;
	flex-wrap: wrap;
	flex-direction: column-reverse;
}

.our-team-img-box:nth-of-type(even) .elementor-image-box-wrapper .elementor-image-box-img{
	margin-bottom: 0 !important;
	margin-top: 20px !important;
}

.our-team-img-box .elementor-image-box-img{
	position: relative;
}

.our-team-img-box .elementor-image-box-img:before{
	content: '';
	position: absolute;
	top: -10px;
	left: -10px;
	background-color: var(--e-global-color-secondary);
	width: 100%;
	height: 100%;
	z-index: -1;
}

.our-team-img-box:nth-of-type(even)  .elementor-image-box-img:before{
	top: 10px;
}

.our-team-img-box .elementor-image-box-img img{
	width: 100%;
	aspect-ratio: 1 / 1.29035;
    object-fit: cover;
}

@media only screen and (max-width: 1024px) {
	
	.about-page-img-1,
	.about-page-img-1 img{
		height: auto;
	}
	
	.about-page-img-1 img{
		aspect-ratio: 1 / 1.1;
	}
	
	.about-page-img-2 img{
		aspect-ratio: 1 / 0.5;
	}
	
	.about-page-icon-box:nth-of-type(2n + 2):before{
		display: none;
	}
	
	.our-team-img-box:nth-of-type(even) .elementor-image-box-wrapper{
		flex-direction: column;
	}

	.our-team-img-box:nth-of-type(even) .elementor-image-box-wrapper .elementor-image-box-img{
		margin-bottom: 20px !important;
		margin-top: 0 !important;
	}
	
	.our-team-img-box:nth-of-type(even)  .elementor-image-box-img:before{
		top: -10px;
	}
	
}

@media only screen and (max-width: 767px) {
	
	.about-page-img-2 img{
		aspect-ratio: 1 / 0.5;
	}
	
	.about-page-icon-box:before{
		top: auto;
		left: 0;
		right: 0;
		bottom: -15px;		
		width: 100%;
		height: 1px;
	}
	
	.about-page-icon-box:nth-of-type(4n + 4):before,
	.about-page-icon-box:nth-of-type(2n + 2):before{
		display: block;
	}
	
	.about-page-icon-box:last-child:before{
		display: none;
	}
	
	.our-team-img-box .elementor-image-box-img img	{
		aspect-ratio: 1 / 1.12;
	}
	
}

/*
 * Services Page CSS
 * */

@media only screen and (max-width: 1024px) {}
@media only screen and (max-width: 767px) {}

/*
 * Services 1 Page CSS
 * */

.services-1-about-img img{
	aspect-ratio: 1 / 0.99;
	object-fit: cover;
}

.services-1-signature-interiors-img img{
	aspect-ratio: 1 / 1.335;
	object-fit: cover;
}

.services-1-design-detail img{
	aspect-ratio: 1 / 0.95;
    object-fit: cover;
}

.contact-us-circle .elementor-widget-text-path{
	animation: infiniterotate 20s infinite linear;
}

.contact-us-circle:hover .elementor-widget-text-path{
	animation-play-state: paused;
}

@keyframes infiniterotate{
	from{
		transform: rotate(0deg);
    }
    to{
		transform: rotate(360deg);
    }
}


.services-1-tab-section{
	
}

.services-1-tab-section-img img{
	aspect-ratio: 1 / 1.1407;
    object-fit: cover;
}

.services-1-footer-white-content-section{
	position: relative;
}

.services-1-footer-white-content-section > *{
	z-index: 1;
}

.services-1-footer-white-content-section:before {
    content: '';
    position: absolute;
    top: auto;
    left: calc(-50vw - 50px);
    right: 0;
    bottom: 0;
    background-color: var(--white-color);
    width: calc(100vw + 50px);
    height: 100%;
	z-index: 0;
}

@media only screen and (max-width: 1024px) {
	
	.services-1-about-img img {
		aspect-ratio: 1 / 0.75;
	}
	
	.services-1-signature-interiors-img img{
		aspect-ratio: 1 / 1.2;
	}
	
	.contact-us-circle .elementor-widget-text-path .e-text-path,
	.contact-us-circle .elementor-widget-icon .elementor-icon{
		filter: invert(1);
	}
	
	.services-1-tab-section-img img{
		aspect-ratio: 1 / 1.1;
	}
	
	.services-1-footer-white-content-section:before{
		left: calc(0vw - 20px);
		width: calc(100vw + 30px);
	}
	
}

@media only screen and (max-width: 767px) {
	
	.services-1-about-img img {
		aspect-ratio: 1 / 1.1;
	}
	
}

/*
 * Services 2 Page CSS
 * */

.services-2-about-counter .elementor-counter .elementor-counter-number-suffix{
	line-height: 0.9em;
}

.services-2-about-img img{
	aspect-ratio: 1 / 0.385;
	object-fit: cover;
}

.services-2-hover-img-box .elementor-cta .elementor-cta__content{
	position: absolute;
    top: -100%;
    left: 0;
    right: 0;
	opacity: 0;
	visibility: hidden;
	transition: all 0.4s ease-in-out;
}

.services-2-hover-img-box .elementor-cta:hover .elementor-cta__content,
.services-2-hover-img-box.active .elementor-cta .elementor-cta__content{
	top: 0;
	opacity: 1;
	visibility: visible;
}

.services-2-hover-img-box.active .elementor-cta .elementor-bg{
	transform: scale(1.2);
}

.services-2-what-we-design-img img{
	aspect-ratio: 1 / 0.8;
	object-fit: cover;
}

.services-2-step-section-img-1 img{
	aspect-ratio: 1 / 0.6;
	object-fit: cover;
}

.services-2-step-section-img-2 img{
	aspect-ratio: 1 / 0.702;
	object-fit: cover;
}

.services-2-step-section-img-3 img{
	aspect-ratio: 1 / 0.9545;
	object-fit: cover;
}

.services-2-step-section-icon-box .elementor-icon-box-content{
	display: flex;
	align-items: center;
	gap: 10px;
}

.services-2-step-section-icon-box .elementor-icon-box-title{
	width: calc(20% - 5px);
}

.services-2-step-section-icon-box .elementor-icon-box-description{
	width: calc(80% - 5px);
}

@media only screen and (max-width: 1024px) {

	.services-2-about-img img{
		aspect-ratio: 1 / 0.66;
	}
	
	.services-2-what-we-design-img img{
		aspect-ratio: 1 / 0.8;
		object-fit: cover;
	}
	
	.services-2-step-section-img-2 img,
	.services-2-step-section-img-3 img{
		aspect-ratio: 1 / 0.7;
		object-fit: cover;
	}
	
}

@media only screen and (max-width: 767px) {
	
	.services-2-what-we-design-img img{
		aspect-ratio: 1 / 1.1;
	}
	
	.services-2-step-section-icon-box .elementor-icon-box-content {
		align-items: flex-start;
		flex-direction: column;
	}
	
	.services-2-step-section-icon-box .elementor-icon-box-title,
	.services-2-step-section-icon-box .elementor-icon-box-description{
		width: 100%;
	}
	
	.services-2-about-counter .elementor-counter .elementor-counter-number-suffix{
		line-height: 0.85em;
	}

}

/*
 * Services 3 Page CSS
 * */

.services-3-about-img-1 img{
	aspect-ratio: 1 / 0.66;
	object-fit: cover;
}

.services-3-about-img-2 img{
	aspect-ratio: 1 / 0.48;
	object-fit: cover;
}

.services-3-inspired-spaces-bg-img{
	position: relative;
	height: 100%;
}

.services-3-inspired-spaces-bg-img:before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgb(from var(--white-color) r g b / 93%);
	width: 100%;
	height: 100%;
}

.services-3-inspired-spaces-bg-img img{
	aspect-ratio: 1 / 0.4;
	object-fit: cover;
	height: 100%;
}

.services-3-inspired-spaces-img-1 img{
	aspect-ratio: 1 / 1.15;
    object-fit: cover;
}

.services-3-inspired-spaces-img-2 img{
	aspect-ratio: 1 / 1.15;
    object-fit: cover;
}

.services-3-modern-interior-img-box.elementor-cta--valign-bottom .elementor-cta__content{
	align-content: space-between;
}

.services-3-inspired-living-spaces{
	height: 100%;
}

.services-3-inspired-living-spaces img{
	aspect-ratio: 1 / 0.556;
	object-fit: cover;
	height: 100%;
}

.services-3-team-container{
	position: relative;
}

.services-3-team-img img{
	aspect-ratio: 1 / 1.02;
    object-fit: cover;
}

/* Carousel clips off-screen slides; inner containers stay visible for bio panels */
.active-boxes-container{
	overflow: hidden !important;
	position: relative !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* overflow:visible override removed — bios now live in #team-bio-portal outside the track */

/************************************************************************************************/
/* Carousel Track & Controls */

.carousel-track{
	display: flex !important;
	width: 100% !important;
	align-items: flex-start;
	will-change: transform;
	gap: 20px;
	cursor: grab;
	user-select: none;
	touch-action: pan-y; /* browser handles vertical scroll; JS handles horizontal swipe */
}


.carousel-track .active-box{
	flex-shrink: 0;
	box-sizing: border-box;
}

/* Controls row above carousel */
.carousel-controls{
	display: flex;
	justify-content: center;
	gap: 4px;
	padding-top: 12px; /* desktop: gap between carousel above and arrows below */
}

@media only screen and (max-width: 1024px){
	.carousel-controls{
		padding-top: 0;
		padding-bottom: 12px; /* tablet/mobile: gap between arrows above and carousel below */
	}
}

/* Team carousel arrow buttons */
.team-carousel-arrow{
	-webkit-appearance: none !important;
	appearance: none !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 6px !important;
	margin: 0 !important;
	color: var(--e-global-color-primary, #3a1f5c) !important;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 0 !important;
	transition: opacity 0.2s ease, transform 0.2s ease;
	-webkit-tap-highlight-color: transparent;
}

.team-carousel-arrow:hover,
.team-carousel-arrow:focus-visible{
	opacity: 0.65;
	outline: none;
}

.team-carousel-arrow:active{
	transform: scale(0.9);
}

.team-carousel-arrow svg{
	width: 32px;
	height: 32px;
	display: block;
	fill: none !important;
	stroke: currentColor !important;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	overflow: visible;
}

.team-carousel-arrow svg *,
.team-carousel-arrow svg path,
.team-carousel-arrow svg line,
.team-carousel-arrow svg polyline{
	fill: none !important;
	stroke: currentColor !important;
}

/**/

/* Bio portal — zero-size host appended to body */
#team-bio-portal{
	position: fixed;
	top: 0;
	left: 0;
	width: 0;
	height: 0;
	overflow: visible;
	pointer-events: none;
	z-index: 9999;
}

/* Bio panel — lives in #team-bio-portal (direct body child, no transform ancestor).
   position:fixed !important beats Elementor's position:relative on .e-con.
   top/left have no !important so JS inline styles can freely override them.
   Background/padding set explicitly here so Elementor's generated CSS is irrelevant.
   transform starts offset so the panel slides in from the image edge. */
.services-3-team-content{
	position: fixed !important;
	top: -9999px;
	left: -9999px;
	opacity: 0;
	visibility: hidden;
	z-index: 99999;
	pointer-events: none;
	overflow-y: auto;
	background-color: #ffffff !important;
	padding: 30px !important;
	box-shadow: -4px 0 24px rgba(0, 0, 0, 0.10);
	transform: translateX(-24px);
	transition: opacity 0.35s ease, visibility 0.35s ease, transform 0.35s ease;
}

/* Desktop: same purple accent bar as tablet */
#team-bio-portal .services-3-team-content{
	border-top: 3px solid var(--e-global-color-primary, #3a1f5c) !important;
	padding-top: 20px !important;
}

/************************************************************************************************/
/* Team Bio — Button Styles */

#team-bio-portal .services-3-team-content .elementor-button{
	background-color: #958BC2 !important;
	border-color: #958BC2 !important;
	color: #fff !important;
}

#team-bio-portal .services-3-team-content .elementor-button:hover,
#team-bio-portal .services-3-team-content .elementor-button:focus{
	background-color: #E3E0EF !important;
	border-color: #382B6F !important;
	color: #382B6F !important;
}

/* Melissa Jacobs (bio-index 2) — extra spacing above button */
#team-bio-portal [data-bio-index="2"] .elementor-widget-button{
	margin-top: 20px !important;
}

/**/

/* Reduce bio heading size */
.services-3-team-content .elementor-heading-title{
	font-size: 1.25rem !important;
	line-height: 1.3 !important;
	margin-bottom: 10px !important;
}

@media only screen and (max-width: 1370px){

	.services-3-team-img img{
		aspect-ratio: 1 / 1.5;
	}

}

/* Static bio area — sits below the carousel on tablet/mobile, outside overflow:hidden */
.team-static-bio-area{
	width: 100%;
	padding-top: 20px;
}

/* All bios inside the static area: reset portal/fixed styles, hidden by default */
.team-static-bio-area .services-3-team-content{
	position: static !important;
	top: auto !important;
	left: auto !important;
	box-sizing: border-box !important;
	width: auto !important;     /* JS uses margin-left + margin-right; don't set width */
	min-width: 0 !important;
	max-width: none !important;
	height: auto !important;
	max-height: none !important;
	overflow-y: visible !important;
	opacity: 1 !important;
	visibility: visible !important;
	transform: none !important;
	pointer-events: auto !important;
	box-shadow: none !important;
	transition: none !important;
	display: none !important;
}

/* Only the active bio is shown */
.team-static-bio-area .services-3-team-content.team-bio-active{
	display: block !important;
}

/* Desktop: purple accent bar on the active image.
   ::before is on the card (.active-box) which always has position:relative from Elementor —
   no conditional position change means the bar paints in the same frame the class is added. */
@media only screen and (min-width: 1025px) {
	.carousel-track .active-box.team-card-active::before{
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 3px;
		background-color: var(--e-global-color-primary, #3a1f5c);
		z-index: 10;
		pointer-events: none;
	}
}

/* Mobile: purple accent bar on the bio */
@media only screen and (max-width: 767px) {
	.team-static-bio-area .services-3-team-content.team-bio-active{
		border-top: 3px solid var(--e-global-color-primary, #3a1f5c) !important;
		padding-top: 20px !important;
	}
}

/* Tablet: dim inactive cards so it is clear which image the bio belongs to */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
	.carousel-track .active-box{
		opacity: 0.4;
		transition: opacity 0.3s ease;
		cursor: pointer;
	}
	.carousel-track .active-box.team-card-active{
		opacity: 1 !important;
		transition: opacity 0.3s ease;
		cursor: default;
	}
	/* Accent bar on bio matches the active card above */
	.team-static-bio-area .services-3-team-content.team-bio-active{
		border-top: 3px solid var(--e-global-color-primary, #3a1f5c) !important;
		padding-top: 20px !important;
	}
}

@media only screen and (max-width: 1024px) {
	
	.services-3-about-img-1 img,
	.services-3-about-img-2 img{
		aspect-ratio: 1 / 0.5;
		object-fit: cover;
	}
	
	.services-3-inspired-spaces-img-1 img {
		aspect-ratio: 1 / 0.89;
	}
	
	.services-3-inspired-spaces-img-2 img {
		aspect-ratio: 1 / 0.75;
	}
	
	.services-3-inspired-living-spaces,
	.services-3-inspired-living-spaces img{
		height: auto;
	}

	.services-3-inspired-living-spaces img{
		aspect-ratio: 1 / 0.5;
	}
	

	.services-3-team-img img{
		aspect-ratio: 1 / 1.2;
	}
}

@media only screen and (max-width: 767px) {
	
	.services-3-about-img-1 img,
	.services-3-about-img-2 img{
		aspect-ratio: 1 / 0.66;
		object-fit: cover;
	}
	
	.services-3-inspired-living-spaces img{
		aspect-ratio: 1 / 0.66;
	}
	
}

/*
 * Blog Page CSS
 * */

@media only screen and (max-width: 1024px) {}
@media only screen and (max-width: 767px) {}

/*
 * Blog Single Page CSS
 * */

@media only screen and (max-width: 1024px) {}
@media only screen and (max-width: 767px) {}

/*
 * Contact Us CSS
 * */


.google-map,
.google-map .elementor-custom-embed,
.google-map .elementor-custom-embed iframe{
	height: 100%;
}

.contact-working-list ul li .elementor-icon-list-text{
	display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
}

@media only screen and (max-width: 1024px) {

	.google-map,
	.google-map .elementor-custom-embed,
	.google-map .elementor-custom-embed iframe{
		height: auto;
	}

}

@media only screen and (max-width: 767px) {}


/* 
 * Gravity Form CSS
 * */

.gform_wrapper .gform_heading{
	display: none;
}

.gform_wrapper form .gform-body .gform_fields{
	row-gap: 30px;
	column-gap: 30px;
	--gf-field-gap-x: 30px;
	--gf-field-gap-y: 30px;
}

.gform_wrapper form .gform-body .gform_fields .gfield{
	border-radius: 0;
    box-shadow: none;
}

.gform_wrapper form .gform-body .gform_fields .gfield label{
	font-family: var(--e-global-typography-text-font-family), Sans-serif;
    font-size: var(--e-global-typography-text-font-size);
    font-weight: var(--e-global-typography-text-font-weight);
    line-height: var(--e-global-typography-text-line-height);
	color: var(--e-global-color-text);
}

.gform_wrapper form .gform-body .gform_fields .gfield .ginput_container input,
.gform_wrapper form .gform-body .gform_fields .gfield .ginput_container select,
.gform_wrapper form .gform-body .gform_fields .gfield .ginput_container textarea{
    font-family: var(--e-global-typography-text-font-family), Sans-serif;
    font-size: var(--e-global-typography-text-font-size);
    font-weight: var(--e-global-typography-text-font-weight);
    line-height: var(--e-global-typography-text-line-height);
	color: var(--e-global-color-text);
	background-color: var(--white-color);
	border: 0;
	border-bottom: 1px solid var(--divider-color);
	border-radius: 0;
    box-shadow: none;
	height: auto;
	padding: 5px 20px 25px 0;
}

.gform_wrapper form .gform-body .gform_fields .gfield .ginput_container input::placeholder,
.gform_wrapper form .gform-body .gform_fields .gfield .ginput_container select::placeholder,
.gform_wrapper form .gform-body .gform_fields .gfield .ginput_container textarea::placeholder{
	color: var(--e-global-color-text);
}

.gform_wrapper form .gform-body .gform_fields .gfield .ginput_container select{
	background-image: var(--gf-ctrl-select-icon);
    background-position: var(--gf-ctrl-select-icon-position);
    background-repeat: no-repeat;
    background-size: var(--gf-ctrl-select-icon-size);
}

/* If Placeholder Color Was Opacity */
.gform_wrapper form .gform-body .gform_fields .gfield .ginput_container select[data-gtm-form-interact-field-id="0"]{
	color: var(--e-global-color-text);
}

.gform_wrapper form .gform-body .gform_fields .gfield .ginput_container select option{
	background-color: var(--white-color);
}

.gform_wrapper .gform-grid-row{
	margin-inline: 0 !important;
	column-gap: var(--gf-field-gap-x);
	row-gap: var(--gf-field-gap-y) !important;
}

.gform_wrapper .gform-grid-col{
	padding-inline: 0 !important;
}

.gform_wrapper form .gform-body .gform_fields .gfield--type-date .ginput_container_date{
	position: relative;
	flex-direction: column;
}

.gform_wrapper form .gform-body .gform_fields .gfield--type-date .ginput_container_date img{
	position: absolute;
	top: 50%;
	left: auto;
	right: 20px;
	opacity: 1;
	transform: translateY(-50%);
}

.gform_wrapper form .gform-body .gform_fields .gfield--type-date .ginput_container_date input{
	width: 100%;
}

.gform_wrapper form .gform-body .gform_fields .gfield--type-time .ginput_container{
	column-gap: 0;
}

.gform_wrapper form .gform-body .gform_fields .gfield--type-time .ginput_container .gform-grid-col{
	inline-size: 50%;
}

.gform_wrapper form .gform-body .gform_fields .gfield--type-number .ginput_container .instruction {
	display: none;
}

.gform_wrapper form .gform-body .gform_fields .gfield .ginput_container input:focus,
.gform_wrapper form .gform-body .gform_fields .gfield .ginput_container select:focus,
.gform_wrapper form .gform-body .gform_fields .gfield .ginput_container textarea:focus,
.gform_wrapper form .gform_footer .gform_button:focus{
	outline: none !important;
	box-shadow: none;
}

.gform-theme--foundation .gfield textarea.small,
.gform-theme--foundation .gfield textarea.large,
.gform-theme--foundation .gfield textarea.medium{
	min-block-size: auto;
}

.gform_wrapper form .gform-body .gform_fields .gfield .ginput_container textarea{
	height: 120px;
}

.gform_wrapper form .gform-body .gform_fields .gfield .validation_message.gfield_validation_message{
	font-family: var(--e-global-typography-text-font-family), Sans-serif;
    font-size: 14px;
    font-weight: 500;
	line-height: var(--e-global-typography-text-line-height);
    text-transform: capitalize;
    letter-spacing: 0.02em;
	color: #C8221E;
	margin-top: 0;
}

.contact-us-form .gform_validation_errors{
	padding: 10px;
	margin-bottom: 20px;	
}

.gform_wrapper form .gform_footer{
	--gf-form-footer-margin-y-start: 40px;
	justify-content: flex-start;
}

.gform_wrapper form .gform_footer .gform_button{
	text-align: center;
    font-family: var(--e-global-typography-text-font-family), Sans-serif !important;
    font-size: var(--e-global-typography-accent-font-size) !important;
    font-weight: 500 !important;
    line-height: var(--e-global-typography-accent-line-height) !important;
	letter-spacing: var(--e-global-typography-accent-letter-spacing) !important;
    color: var(--white-color) !important;
    background-color: var(--e-global-color-accent) !important;
    border: 1px solid var(--e-global-color-accent) !important;
    border-radius: 0 !important;
    padding: 15px 25px !important;
    transition: all 0.3s ease-in-out !important;
	box-shadow: none !important;
}

.gform_wrapper form .gform_footer .gform_button:hover{
	background-color: var(--white-color) !important;
	color: var(--e-global-color-accent) !important;
}

/* Gravity Form #1 submit button override — use Elementor "button color" (#958BC2)
 *
 * Converging hover animation:
 *   Two white stripes layered on top of the purple background-color via
 *   background-image gradients. One anchored to the left edge, one
 *   anchored to the right. Both stripes start at width 0% at rest and
 *   grow to width 50% on hover, meeting precisely in the middle to fill
 *   the whole button with white.
 *
 * Why gradients instead of ::before / ::after?
 *   Gravity Forms renders the submit button as <input type="submit">.
 *   Input elements are "replaced elements" and cannot host pseudo-
 *   elements in any major browser, so the wipe pattern we use on the
 *   .elementor-button (where ::before slides across) literally wouldn't
 *   render here. Two background-image layers are a drop-in equivalent
 *   that works on <input> as well as <button>.
 *
 * Text color fades in-tandem so it stays readable as the stripes cover
 * the background — purple (#958BC2) at rest over white text, primary
 * color at the end over the now-white surface.
 */
#gform_wrapper_1 form .gform_footer .gform_button,
#gform_1 .gform_footer .gform_button,
#gform_submit_button_1{
	color: var(--white-color) !important;
	background-color: #958BC2 !important;
	border: 1px solid #958BC2 !important;

	background-image:
		linear-gradient(var(--white-color), var(--white-color)),
		linear-gradient(var(--white-color), var(--white-color)) !important;
	background-repeat: no-repeat, no-repeat !important;
	background-size: 0% 100%, 0% 100% !important;
	background-position: 0% 0%, 100% 0% !important;

	transition:
		background-size 0.5s ease-in-out,
		color 0.5s ease-in-out,
		border-color 0.5s ease-in-out !important;
}

#gform_wrapper_1 form .gform_footer .gform_button:hover,
#gform_1 .gform_footer .gform_button:hover,
#gform_submit_button_1:hover,
#gform_wrapper_1 form .gform_footer .gform_button:focus,
#gform_1 .gform_footer .gform_button:focus,
#gform_submit_button_1:focus{
	/* background-color stays #958BC2 — the two gradient stripes provide
	   the "white coverage" visual. Setting bg-color to white here would
	   snap instantly and hide the converging animation behind a flat
	   white wash. */
	color: var(--e-global-color-primary) !important;
	border-color: #958BC2 !important;
	background-size: 50% 100%, 50% 100% !important;
}

.gform_wrapper form .gform_footer .gform-loader,
.gform_wrapper form .gform-loader{
	display: none !important;
	--gf-color-primary-rgb: 21,100,155;
	--gf-form-spinner-bg-color: rgba(var(--gf-color-primary-rgb), 0.1) !important;
	border-block-end-color: var(--e-global-color-primary);
	border-block-start-color: var(--gf-form-spinner-bg-color);
    border-inline-end-color: var(--gf-form-spinner-bg-color);
    border-inline-start-color: var(--e-global-color-primary);
}

.gform_wrapper .gform_validation_errors{
	padding: 10px;
    margin-bottom: 30px;
}

.gform_wrapper .gform_validation_errors h2.gform_submission_error{
	font-family: var(--e-global-typography-text-font-family), Sans-serif;
	font-size: var(--e-global-typography-text-font-size);
	font-weight: 500;
    line-height: 1.2em;
}

.gform_wrapper .gform_confirmation_message{
	font-family: var(--e-global-typography-primary-font-family), Sans-serif;
    font-size: var( --e-global-typography-secondary-font-size );
    font-weight: var(--e-global-typography-primary-font-weight);
    line-height: var(--e-global-typography-primary-line-height);
    color: var(--e-global-color-primary);
	min-height: 450px;
}

/* Home Form CSS */

.home-form{
	
}

.home-form .gform_wrapper form .gform-body .gform_fields .gfield .ginput_container input, 
.home-form .gform_wrapper form .gform-body .gform_fields .gfield .ginput_container select, 
.home-form .gform_wrapper form .gform-body .gform_fields .gfield .ginput_container textarea{
	color: var(--white-color);
	background-color: rgb(from var(--white-color) r g b / 20%);
	backdrop-filter: blur(10px);
    border: 1px solid rgb(from var(--white-color) r g b / 30%);
	padding: 15px 20px;
}

.home-form .gform_wrapper form .gform-body .gform_fields .gfield .ginput_container input::placeholder,
.home-form .gform_wrapper form .gform-body .gform_fields .gfield .ginput_container select::placeholder,
.home-form .gform_wrapper form .gform-body .gform_fields .gfield .ginput_container textarea::placeholder{
	color: var(--white-color);
}

.home-form .gform_wrapper form .gform_footer{
	justify-content: center;
}

.home-form .gform_wrapper form .gform-body .gform_fields .gfield .ginput_container .gfield_description{
	color: var(--white-color);
}

.home-form .gform-theme--framework .gform_validation_errors .gform-icon{
	color: var(--white-color);
	border-color: var(--white-color);
}

.home-form .gform_wrapper form .gform-body .gform_fields .gfield .validation_message.gfield_validation_message,
.home-form .gform-theme--framework .gform_validation_errors{
	color: var(--white-color);
	border-color: var(--white-color);
}

.home-form .gform_wrapper .gform_validation_errors h2.gform_submission_error,
.home-form .gform-theme--framework .gform_validation_errors ol,
.home-form .gform-theme--framework .gform_validation_errors ol a{
	color: var(--white-color);
}


@media only screen and (max-width: 1024px){
	
	.gform_wrapper .gform_confirmation_message{
		min-height: auto;
	}
}

@media only screen and (max-width: 767px){
	
	.gform_wrapper form .gform-body .gform_fields{		
		column-gap: 0;
		row-gap: 20px;
		--gf-field-gap-x: 0;
		--gf-field-gap-y: 20px;
	}
	
	.gform_wrapper form .gform_footer{
		--gf-form-footer-margin-y-start: 20px;
	}
	
	.gform_wrapper form .gform-body .gform_fields .gfield .validation_message.gfield_validation_message{
		font-size: 12px;
	}
	
}