/* Solution inner page */
.accrdin-itms .e-n-accordion-item {
	border: 1px solid #222 !important;
	border-radius: 20px;
}

.blog-loop-block > .e-con-inner {
    height: 100% !important;
}

.blog-loop-block > .e-con-inner .post-loop-btn {
    margin-top: auto !important;
}


/* Fix Resources outer container white background from Elementor default rule */
.elementor-element-676fe03,
.elementor-element-676fe03 > .e-con-inner {
  background-color: transparent !important;
}

/* ============================================================
   Display-size cap + text crispness
   ============================================================ */

/* 1. Crisper text. The theme forces grayscale antialiasing, which makes
      type look soft and makes glyphs re-render (shift) when highlighted. */
html,
body,
body *,
body *::before,
body *::after {
	-webkit-font-smoothing: auto !important;
	-moz-osx-font-smoothing: auto !important;
}

/* 3. Elementor gives each menu title a 2.5px white border at rest and then
   removes the border entirely on hover / while its panel is open. That is a
   5px change in the title's box, so every label to the right of it jumped
   sideways whenever one was hovered or highlighted. Hold the border at a
   constant transparent 2.5px in every state so nothing reflows. */
.elementor-element-e6be7e1 .e-n-menu-title,
.elementor-element-e6be7e1 .e-n-menu-title:hover,
.elementor-element-e6be7e1 .e-n-menu-title:focus,
.elementor-element-e6be7e1 .e-n-menu-title.e-current,
.elementor-element-e6be7e1 .e-n-menu-item:hover > .e-n-menu-title,
.elementor-element-828623c .e-n-menu-title,
.elementor-element-828623c .e-n-menu-title:hover,
.elementor-element-828623c .e-n-menu-title:focus,
.elementor-element-828623c .e-n-menu-title.e-current,
.elementor-element-828623c .e-n-menu-item:hover > .e-n-menu-title {
	border-style: solid !important;
	border-width: 2.5px !important;
	border-color: transparent !important;
}

/* 2. Maximum display size.
      The theme already draws the page at 80% between 1201px and 1599px and
      then jumps back to 100% at 1600px+, which is what makes everything
      (and every image) 25% bigger and pixelated on large monitors.
      Holding 80% from 1600px upwards makes that the permanent maximum,
      no matter how wide the screen gets. */
@media only screen and (min-width: 1600px) {

	html { zoom: 80% !important; }

	/* Items that Elementor sizes in raw viewport pixels via JS have to be
	   restated so they still reach both edges while the page is scaled. */
	.elementor-location-header > .elementor-sticky--active {
		width: 125vw !important;
	}

	/* keep the logged-in admin bar at its normal size */
	#wpadminbar { zoom: 1.25 !important; }
}

/* ============================================================
   Header — logo alignment + dropdown positioning
   ============================================================ */

/* Vertically centre the logo against the nav labels. The logo sits
   in an inline <a>, so the browser reserved descender space beneath
   it and pushed the artwork about a pixel low. */
.elementor-element-3ce5bb7e .elementor-widget-container,
.elementor-element-3ce5bb7e a {
	display: flex !important;
	align-items: center !important;
}

.elementor-element-3ce5bb7e img {
	display: block !important;
	/* The building icon is bottom-heavy: the artwork’s visual mass sits 3.5% of
	   its height below the geometric middle, which reads as the logo hanging low
	   next to the nav labels. Lift it by that amount so the two look level. */
	transform: translateY(-3.5%);
}

/* Mega-menu panels drop just below the header bar. Resources is centred on
   the item that opened it; the Solutions panel is far too wide to centre, so
   its "SOLUTIONS" heading lines up with the "Solutions" label instead. */
@media only screen and (min-width:1025px) {

	.elementor-element-e6be7e1 .e-n-menu-wrapper .e-n-menu-item {
		position: relative !important;
	}

	.elementor-element-e6be7e1 .e-n-menu-item > .e-n-menu-content {
		left: 50% !important;
		right: auto !important;
		width: auto !important;
		--stretch-left: 0px !important;
		--stretch-width: auto !important;
	}

	/* open the panel just under the header bar rather than well below it */
	.elementor-element-e6be7e1 .e-n-menu-item > .e-n-menu-content > .e-con {
		margin-top: 30px !important;
	}

	.elementor-element-e6be7e1 .e-n-menu-item > .e-n-menu-content > .e-con > .e-con-inner {
		margin-left: 0 !important;
		margin-right: auto !important;
	}

}

/* From 1201px up the page is drawn at 80%, so 100vw measures 1.25x the
   width you actually see and the gutter maths has to be scaled to match. */
@media only screen and (min-width:1201px) {

	/* Solutions panel */
	.elementor-element-e6be7e1 .e-n-menu-content:has( > .elementor-element-88bcc58) {
		left: -24px !important;
		transform: none !important;
		width: 1357px !important;
		max-width: min(calc(62.5vw + 568px), calc(125vw - 264px)) !important;
	}

	/* Resources panel */
	.elementor-element-e6be7e1 .e-n-menu-content:has( > .elementor-element-676fe03) {
		width: 720px !important;
		max-width: calc(125vw - 25px) !important;
		transform: translateX(max(calc(343px - 62.5vw), -50%)) !important;
	}

}

/* Between 1025px and 1200px the page is drawn at 100%. */
@media only screen and (min-width:1025px) and (max-width:1200px) {

	.elementor-element-e6be7e1 .e-n-menu-content:has( > .elementor-element-88bcc58) {
		left: -24px !important;
		transform: none !important;
		width: 1357px !important;
		max-width: calc(100vw - 231px) !important;
	}

	.elementor-element-e6be7e1 .e-n-menu-content:has( > .elementor-element-676fe03) {
		width: 720px !important;
		max-width: calc(100vw - 20px) !important;
		transform: translateX(-50%) !important;
	}

}

/* At exactly 1366px wide Elementor reports no device mode and lets the
   menu shrink, which bumped "Contact Us" onto a second row and made the
   bar 5px taller. Hold the row at its natural width instead. */
@media only screen and (min-width: 1025px) {

	.elementor-element-e6be7e1 {
		min-width: fit-content !important;
	}

	.elementor-element-e6be7e1 .e-n-menu-heading {
		flex-wrap: nowrap !important;
	}
}

/* Chrome leaves a sub-pixel gap between Elementor's mobile (max-width: 767px)
   and desktop (min-width: 768px) breakpoints. Without a plain fallback the logo
   column loses its width there and stretches to the full header. */
.elementor-element-46654e3f {
	--width: 200px;
}


/* Same sub-pixel breakpoint gap as above: at that one fractional width neither
   Elementor's tablet nor its mobile visibility rule matched, so the desktop
   menu, the mobile menu and the unused nav-menu widget all rendered at once. */
.elementor-element-53818f08 {
	display: none;
}

@media only screen and (max-width:1024px) {
	.elementor-element-e6be7e1 { display: none; }
	.elementor-element-828623c { display: block; }
}