/**
 * Elementor compatibility layer.
 *
 * The site's design comes from the original stylesheet, which sets its grid up
 * with Bootstrap 3 (container / row / col-md-*). Elementor's own containers use
 * flex with logical padding and margin properties, which would override the
 * Bootstrap spacing. This file restores the Bootstrap geometry for the
 * containers that carry those classes, and removes Elementor's default widget
 * spacing so the legacy margins apply.
 */

.elementor .elementor-widget {
	margin-block-end: 0 !important;
}

.elementor .e-con {
	--gap: 0px;
	--row-gap: 0px;
	--column-gap: 0px;
	/* Elementor pads every container 10px by default; the legacy layout does
	   its own spacing, so the defaults have to go. */
	--padding-top: 0px;
	--padding-right: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
	--margin-top: 0px;
	--margin-right: 0px;
	--margin-bottom: 0px;
	--margin-left: 0px;
}

/* Container: the Bootstrap 1170px grid. */
.elementor .e-con.container {
	width: 1170px !important;
	max-width: 100% !important;
	margin-inline: auto !important;
	padding-inline: 15px !important;
}

@media (max-width: 1199px) {
	.elementor .e-con.container {
		width: 970px !important;
	}
}

@media (max-width: 991px) {
	.elementor .e-con.container {
		width: 750px !important;
	}
}

@media (max-width: 767px) {
	.elementor .e-con.container {
		width: auto !important;
	}
}

/* Row and columns. */
/* The original grid is Bootstrap 3: block rows and floated columns, which lets
   child margins collapse the way the design depends on. Elementor's flex
   containers keep those margins inside, so every legacy container goes back to
   block flow and Bootstrap's own float rules take over. */
.elementor .e-con.container,
.elementor .e-con.row,
.elementor .e-con.middle,
.elementor .e-con.divPosition,
.elementor .e-con.snippetText,
.elementor .e-con[class*="col-"] {
	display: block !important;
}

.elementor .e-con.row::after {
	content: "";
	display: table;
	clear: both;
}

/* A Bootstrap row is 30px wider than its parent because of the matching
   negative margins. Elementor's layout cannot work that out from
   `width: auto`, so state the width explicitly. */
.elementor .e-con.row {
	width: calc(100% + 30px) !important;
	margin-inline: -15px !important;
}

/* A row that is also a column takes the column width once its breakpoint is
   reached, and behaves like a plain row below it. */
@media (min-width: 992px) {
	.elementor .e-con.row[class*="col-md-"] {
		width: var(--width) !important;
	}
}

@media (min-width: 768px) {
	.elementor .e-con.row[class*="col-sm-"] {
		width: var(--width) !important;
	}
}

/* Column padding has to beat Elementor's zeroed padding variables, but must
   not beat LEAdv.css's own !important mobile overrides, so it is not
   !important here. Rows are excluded from the max-width because a row that
   also carries a col-* class is 30px wider than its parent and a percentage
   max-width would clamp it back. */
.elementor .e-con[class*="col-"] {
	padding-inline: 15px;
}

.elementor .e-con[class*="col-"]:not(.row) {
	max-width: 100% !important;
}

.elementor .e-con.col-xs-12,
.elementor .e-con.col-sm-12,
.elementor .e-con.col-md-12 {
	--width: 100% !important;
}

.elementor .e-con.col-md-1 { --width: 8.33333333% !important; }
.elementor .e-con.col-md-2 { --width: 16.66666667% !important; }
.elementor .e-con.col-md-3 { --width: 25% !important; }
.elementor .e-con.col-md-4 { --width: 33.33333333% !important; }
.elementor .e-con.col-md-5 { --width: 41.66666667% !important; }
.elementor .e-con.col-md-6 { --width: 50% !important; }
.elementor .e-con.col-md-7 { --width: 58.33333333% !important; }
.elementor .e-con.col-md-8 { --width: 66.66666667% !important; }
.elementor .e-con.col-md-9 { --width: 75% !important; }
.elementor .e-con.col-md-10 { --width: 83.33333333% !important; }
.elementor .e-con.col-md-11 { --width: 91.66666667% !important; }

@media (max-width: 991px) {
	.elementor .e-con[class*="col-md-"] {
		--width: 100% !important;
	}
}

@media (min-width: 768px) {
	.elementor .e-con.col-sm-6 { --width: 50% !important; }
	.elementor .e-con.col-sm-4 { --width: 33.33333333% !important; }
	.elementor .e-con.col-sm-8 { --width: 66.66666667% !important; }
}

/* #PageTitle is unpositioned in the original, so its absolutely positioned h1
   resolves against the next positioned ancestor. Elementor makes every
   container relative, which would pull the heading up over the banner. */
.elementor #PageTitle {
	position: static !important;
}

.elementor #PageTitle .elementor-widget {
	position: static !important;
}

/* The widget that holds #PageTitle must not be a containing block either.
   Only that widget: #contentZone above it has to stay positioned, exactly as
   it is on the original. */
.elementor .elementor-widget:has(#PageTitle) {
	position: static !important;
}

/* The enquiry form keeps its own box. */
.elementor .e-con.serviceForm {
	padding: 20px !important;
	margin-block-start: -50px !important;
	background: #b7b7b7;
	border-radius: 10px;
	position: relative;
	z-index: 100;
}

.bodyHome .elementor .e-con.serviceForm,
.elementor .SliderHome .e-con.serviceForm {
	position: absolute;
	top: 0;
	margin-block-start: 35px !important;
}

/* Elementor adds a 10px gap above the first container below its tablet
   breakpoint. Pull it back so the banner sits flush under the header, as it
   does on the original site. */
@media (max-width: 991px) {
	.elementor > .e-con {
		top: -10px;
	}

	[data-elementor-type].elementor {
		margin-block-end: -10px !important;
	}
}