/**
 * Site-wide content gutters.
 *
 * Theme default boxed width: 1170px (.disle-container).
 * Elementor kit is 1440px with 0 left/right padding, which makes
 * headings and cards sit on the viewport edge. This file only adds
 * side padding — it does not restyle cards, buttons, or type.
 */

:root {
	--isw-page-gutter: 40px;
	--isw-content-max: 1440px;
}

@media (min-width: 1441px) {
	:root {
		--isw-page-gutter: 48px;
		--isw-content-max: 1680px;
	}

	.elementor {
		--container-max-width: 1680px;
	}
}

@media (min-width: 1920px) {
	:root {
		--isw-page-gutter: 56px;
		--isw-content-max: 1800px;
	}

	.elementor {
		--container-max-width: 1800px;
	}
}

@media (max-width: 1024px) {
	:root {
		--isw-page-gutter: 28px;
	}
}

@media (max-width: 767px) {
	:root {
		--isw-page-gutter: 20px;
	}
}

/* Elementor pages: do not start at the theme 1170px box (causes CLS). */
body.elementor-page #content-wrap.disle-container {
	width: 100%;
	max-width: var(--isw-content-max, 1440px);
	box-sizing: border-box;
}

.elementor-section.elementor-section-boxed > .elementor-container {
	max-width: var(--isw-content-max, 1440px);
	width: 100%;
	box-sizing: border-box;
}

/* Classic Elementor boxed sections (page content, not the header). */
#main-content .elementor-section.elementor-top-section.elementor-section-boxed > .elementor-container {
	padding-left: var(--isw-page-gutter);
	padding-right: var(--isw-page-gutter);
	box-sizing: border-box;
}

/* Flexbox boxed containers — e.g. Pricing heading. */
#main-content .e-con.e-parent.e-con-boxed > .e-con-inner {
	padding-left: var(--isw-page-gutter);
	padding-right: var(--isw-page-gutter);
	box-sizing: border-box;
}

/* Page title banners (Pricing, etc.) — keep full-bleed photo, inset text. */
#featured-title .inner-wrap {
	padding-left: var(--isw-page-gutter);
	padding-right: var(--isw-page-gutter);
	box-sizing: border-box;
}

#featured-title.modern #breadcrumbs {
	left: var(--isw-page-gutter);
	width: calc(100% - (var(--isw-page-gutter) * 2));
}

/* Why Choose Us — keep content off the viewport edges. */
#main-content .elementor-element-2ac9a59 > .elementor-container,
#main-content .elementor-element-2ac9a59 .elementor-element-77968e4 > .elementor-container {
	padding-left: var(--isw-page-gutter) !important;
	padding-right: var(--isw-page-gutter) !important;
	box-sizing: border-box;
}

/*
 * Why Choose Us cards.
 * A plugin warning can print <br>/<b> after .inner. Hide only that
 * leftover text. Do not hide .bg-static — that layer is the white
 * card face and the right-edge hover line.
 */
#main-content .elementor-element-2ac9a59 .master-icon-box > br,
#main-content .elementor-element-2ac9a59 .master-icon-box > b {
	display: none !important;
}

/*
 * Our Team cards.
 * They render in a Flickity carousel (default 3 columns, items start at
 * width:100%). With two members that stacks them full-width, then JS
 * shrinks them — layout shift. Keep a stable 2-up grid.
 */
#main-content .elementor-widget-mae-team-carousel .master-carousel-box,
#main-content .elementor-widget-mae-team-carousel .flickity-slider {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	gap: 0 40px;
}

#main-content .elementor-widget-mae-team-carousel .flickity-viewport,
#main-content .elementor-widget-mae-team-carousel .flickity-slider {
	transform: none !important;
	width: 100% !important;
	height: auto !important;
	position: relative !important;
	left: auto !important;
}

#main-content .elementor-widget-mae-team-carousel .master-team.item-carousel {
	width: calc(50% - 20px) !important;
	max-width: 520px;
	margin-right: 0 !important;
	position: relative !important;
	left: auto !important;
	line-height: normal;
}

#main-content .elementor-widget-mae-team-carousel .master-team .avatar img {
	aspect-ratio: 1 / 1;
	width: 100%;
	height: auto;
	display: block;
}

@media (max-width: 767px) {
	#main-content .elementor-widget-mae-team-carousel .master-team.item-carousel {
		width: 100% !important;
		max-width: 420px;
	}
}

/*
 * Sign Language Interpreting.
 * Columns are marked 50/50, then Elementor page CSS changes them
 * to ~32/68. The image also starts with no height. That jump is
 * the same kind of shift as the team cards.
 */
.elementor-5269 .elementor-element-b4b3daa {
	padding-top: 80px;
}

@media (min-width: 1025px) {
	.elementor-5269 .elementor-element-b4b3daa {
		min-height: 846px;
	}
}

.elementor-5269 .elementor-element-331a77f img {
	aspect-ratio: 1884 / 1508;
	width: 100%;
	height: auto;
	display: block;
}

@media (min-width: 768px) {
	.elementor-5269 .elementor-element-aa9d333 {
		width: 31.624%;
	}

	.elementor-5269 .elementor-element-536a5d3 {
		width: 68.376%;
	}
}

@media (min-width: 1025px) {
	.elementor-5269 .elementor-element-536a5d3 > .elementor-element-populated {
		margin-left: 30px;
	}
}

@media (max-width: 1024px) and (min-width: 768px) {
	.elementor-5269 .elementor-element-aa9d333,
	.elementor-5269 .elementor-element-536a5d3 {
		width: 100%;
	}
}

/*
 * Contact form (.contact-form-fh).
 * Nested MetForm uses a boxed Elementor section. Our 1440px +
 * gutter rules treat that as a page section, so fields overflow
 * the right column. Keep the form inside its column.
 */
.contact-form-fh,
.contact-form-fh .elementor-widget-metform,
.contact-form-fh .mf-form-wrapper,
.contact-form-fh .metform-form-content,
.contact-form-fh .elementor-section,
.contact-form-fh .elementor-container,
.contact-form-fh .elementor-column,
.contact-form-fh .elementor-widget-wrap {
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0;
	box-sizing: border-box;
}

.contact-form-fh .elementor-section.elementor-section-boxed > .elementor-container {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.contact-form-fh .elementor-widget-wrap {
	display: flex;
	flex-wrap: wrap;
}

.contact-form-fh .elementor-widget__width-initial {
	width: 50% !important;
	max-width: 50% !important;
	flex: 0 0 50%;
}

.contact-form-fh .elementor-widget-mf-textarea {
	width: 100% !important;
	max-width: 100% !important;
	flex: 0 0 100%;
}

.contact-form-fh .mf-input,
.contact-form-fh .mf-textarea {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

@media (max-width: 767px) {
	.contact-form-fh .elementor-widget__width-initial {
		width: 100% !important;
		max-width: 100% !important;
		flex: 0 0 100%;
	}
}

/*
 * Our Clients logos.
 * The images have very different sizes, so the carousel shows
 * tiny strips next to tall stretched marks. Keep each logo in
 * an even slot. Do not change opacity or colors.
 */
#main-content .elementor-widget-mae-partner-carousel .flickity-viewport {
	height: 88px !important;
	min-height: 88px;
}

#main-content .elementor-widget-mae-partner-carousel .flickity-slider {
	display: flex;
	align-items: center;
}

#main-content .elementor-widget-mae-partner-carousel .master-partner {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 80px;
	box-sizing: border-box;
}

#main-content .elementor-widget-mae-partner-carousel .master-partner img {
	width: auto !important;
	max-width: 100%;
	height: auto !important;
	max-height: 70px;
	object-fit: contain;
	object-position: center;
}