/* =========================================================
   Maxxdge theme – front end + editor
   Values measured from the original site (1440px desktop).
   ========================================================= */

:root {
	--mx-teal: #02cfc9;
	--mx-dark: #12141c;
	--mx-slate: #243344;
	--mx-grey: #828282;
	--mx-muted: #8b8b8b;
	--mx-wrap: 1260px;
	--mx-gutter: 20px;
	--mx-shadow: 0 15px 50px rgba(36, 51, 68, .15);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	font-family: 'Open Sans', Arial, sans-serif;
	font-size: 16px;
	line-height: 2;
	color: #000;
	background: #fff;
	overflow-x: hidden;
}

img { max-width: 100%; height: auto; }
a { color: var(--mx-teal); text-decoration: none; transition: color .2s, background-color .2s, opacity .2s; }
a:hover { color: var(--mx-slate); }
h1, h2, h3, h4, h5, h6 { margin: 0 0 .5em; line-height: 1.4; font-weight: 700; color: inherit; }
p { margin: 0 0 1em; }
figure { margin: 0; }
button { font: inherit; }

.screen-reader-text {
	border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
	height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0;
	position: absolute !important; word-wrap: normal !important;
}
.skip-link:focus {
	clip: auto; clip-path: none; height: auto; width: auto; z-index: 100000;
	left: 10px; top: 10px; padding: 12px 20px; background: #fff; color: var(--mx-dark);
}
:focus-visible { outline: 2px solid var(--mx-teal); outline-offset: 2px; }

.mx-ico { width: 1em; height: 1em; display: inline-block; vertical-align: middle; flex: none; }

.mx-wrap {
	width: 100%;
	max-width: calc(var(--mx-wrap) + 2 * var(--mx-gutter));
	margin-inline: auto;
	padding-inline: var(--mx-gutter);
}

/* ---------- Top bar ---------- */
.mx-topbar { background: var(--mx-dark); color: #fff; font: 700 14px/28px Poppins, sans-serif; }
.mx-topbar .mx-wrap { display: flex; align-items: center; justify-content: space-between; min-height: 50px; gap: 20px; }
.mx-topinfo { display: flex; flex-wrap: wrap; gap: 6px 30px; list-style: none; margin: 0; padding: 0; }
.mx-topinfo li { display: flex; align-items: center; gap: 13px; }
.mx-topinfo .mx-ico { color: var(--mx-teal); font-size: 13px; }
.mx-topinfo a { color: #fff; }
.mx-topinfo a:hover { color: var(--mx-teal); }
.mx-social { display: flex; gap: 10px; }
.mx-social > * {
	width: 30px; height: 30px; display: grid; place-items: center;
	background: var(--mx-teal); color: #fff; font-size: 15px;
}
.mx-social a:hover { background: #fff; color: var(--mx-teal); }

/* ---------- Header ---------- */
.mx-header { position: relative; z-index: 50; background: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, .5); }
.mx-header .mx-wrap { display: flex; align-items: center; min-height: 93px; }
.mx-logo { display: block; flex: none; width: 180px; line-height: 0; }
.mx-logo img { width: 180px; height: auto; }
.mx-logo-text { font: 700 26px/1 Montserrat, sans-serif; color: var(--mx-dark); }
.mx-burger { display: none; }

.mx-nav { margin-left: 35px; }
.mx-menu, .mx-menu ul { list-style: none; margin: 0; padding: 0; }
.mx-menu { display: flex; align-items: center; }
.mx-menu > li { position: relative; }
.mx-menu a {
	display: block; padding: 13px 20px;
	font: 700 14px/23px Montserrat, sans-serif; text-transform: uppercase;
	color: var(--mx-slate);
}
.mx-menu a:hover,
.mx-menu .current-menu-item > a,
.mx-menu .current-menu-ancestor > a,
.mx-menu .current_page_item > a { color: var(--mx-teal); }
.mx-menu .menu-item-has-children > a { display: flex; align-items: center; gap: 6px; }
.mx-menu > .menu-item-has-children > a::after {
	content: ''; width: 9px; height: 9px; background: currentColor;
	-webkit-mask: url(../icons/angle-down.svg) center / contain no-repeat;
	mask: url(../icons/angle-down.svg) center / contain no-repeat;
}
.mx-menu .sub-menu {
	position: absolute; top: 100%; left: 0; min-width: 250px; padding: 10px 0;
	background: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
	opacity: 0; visibility: hidden; transform: translateY(10px);
	transition: opacity .2s, transform .2s, visibility .2s;
}
.mx-menu li:hover > .sub-menu,
.mx-menu li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }
.mx-menu .sub-menu a { padding: 8px 22px; font-size: 13px; text-transform: none; }
.mx-menu .sub-menu .sub-menu { top: 0; left: 100%; }
.mx-subtoggle { display: none; }

.mx-hbtn {
	margin-left: auto; margin-bottom: -10px; align-self: flex-start; margin-top: 10px;
	padding: 15px 40px; background: var(--mx-teal); color: #fff;
	font: 600 20px/40px 'Open Sans', sans-serif; box-shadow: var(--mx-shadow);
}
.mx-hbtn:hover { background: var(--mx-dark); color: #fff; }

/* ---------- Generic sections ---------- */
.mx-content > * { margin-block: 0; }
.mx-sec { position: relative; padding: 100px 0; }
.mx-sec, .mx-quote, .mx-cta { overflow-x: clip; }
.mx-sec.is-dark { background: var(--mx-dark); color: #fff; }
.mx-sec.is-flush-top { padding-top: 0; }
.mx-sec.is-flush-bottom { padding-bottom: 0; }
.mx-sec p { font-size: 20px; line-height: 40px; }

/* Section heading: faded big word + teal subtitle + title */
.mx-head { position: relative; z-index: 0; margin-bottom: 50px; }
.mx-head > * { position: relative; z-index: 1; }
.mx-head .mx-big {
	position: absolute; z-index: 0; left: -60px; top: -54px;
	margin: 0; white-space: nowrap; pointer-events: none; user-select: none;
	font: 900 140px/140px 'Open Sans', sans-serif !important; color: rgba(2, 207, 201, .09);
}
.mx-head.is-center { text-align: center; }
.mx-head.is-center .mx-big { left: 50%; transform: translateX(-50%); }
.mx-head .mx-sub {
	margin: 0 0 25px; font-size: 24px !important; line-height: 33.6px !important;
	font-weight: 400; color: var(--mx-teal); text-transform: uppercase;
}
.mx-head .mx-h2, .mx-h2 { margin: 0; font-size: 50px; line-height: 70px; font-weight: 700; color: #000; }
.is-dark .mx-h2, .mx-head.is-light .mx-h2 { color: #fff; }
.mx-head .mx-sub:last-child { margin-bottom: 0; }

/* Buttons */
.mx-btns { display: flex; flex-wrap: wrap; gap: 15px; margin-top: 40px; }
.mx-btns.is-center { justify-content: center; }
.mx-btn .wp-block-button__link,
.mx-btn-link {
	display: inline-block; border-radius: 0; padding: 15px 40px;
	background: var(--mx-teal); color: #fff;
	font: 600 20px/40px 'Open Sans', sans-serif; text-decoration: none;
	box-shadow: var(--mx-shadow);
}
.mx-btn .wp-block-button__link:hover, .mx-btn-link:hover { background: var(--mx-dark); color: #fff; }
.mx-btn.is-white .wp-block-button__link { background: #fff; color: var(--mx-dark); }
.mx-btn.is-white .wp-block-button__link:hover { background: var(--mx-teal); color: #fff; }
.mx-btn.is-upper .wp-block-button__link { text-transform: uppercase; }

/* Check list */
.mx-checks { list-style: none; margin: 40px 0 0; padding: 0; }
.mx-checks li {
	position: relative; display: flex; align-items: center; min-height: 52px;
	margin: 0 0 10px; padding-left: 62px;
	font-size: 20px; font-weight: 600; line-height: 32px;
}
.mx-checks li::before {
	content: ''; position: absolute; left: 0; top: 50%; width: 26px; height: 26px; margin: -13px 0 0 13px;
	background: var(--mx-teal);
	-webkit-mask: url(../icons/check.svg) center / contain no-repeat;
	mask: url(../icons/check.svg) center / contain no-repeat;
}
.mx-checks.is-boxed { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
.mx-checks.is-boxed li { min-height: 40px; padding-left: 50px; font-size: 16px; font-weight: 400; line-height: 26px; }
.mx-checks.is-boxed li::before {
	width: 40px; height: 40px; margin: -20px 0 0; background: var(--mx-dark);
	-webkit-mask: none; mask: none;
}
.mx-checks.is-boxed li::after {
	content: ''; position: absolute; left: 11px; top: 50%; width: 18px; height: 18px; margin-top: -9px;
	background: var(--mx-teal);
	-webkit-mask: url(../icons/check.svg) center / contain no-repeat;
	mask: url(../icons/check.svg) center / contain no-repeat;
}

/* ---------- Home hero banner ---------- */
.mx-homehero { margin: 0; line-height: 0; }
.mx-homehero img { width: 100%; height: auto; display: block; }
.mx-homehero a { display: block; }

/* ---------- Inner page hero (Cover block) ---------- */
.wp-block-cover.mx-pagehero, .mx-pagehero {
	min-height: 430px; padding: 40px 20px; margin: 0;
	display: flex; align-items: center; justify-content: center;
	position: relative; overflow: hidden;
}
.mx-pagehero:not(.wp-block-cover) { background: var(--mx-dark) url(../img/page-hero.png) center / cover no-repeat; }
.mx-pagehero .wp-block-cover__inner-container { width: 100%; }
.mx-pagehero-title, .mx-pagehero h1 {
	margin: 0; text-align: center; color: var(--mx-teal);
	font-size: 70px; line-height: 98px; font-weight: 700;
}

/* ---------- Split section: framed image + text ---------- */
.mx-split {
	display: grid; grid-template-columns: minmax(0, 48.6fr) minmax(0, 41.7fr);
	column-gap: 4.2%; align-items: center; padding-right: 5.5%;
}
.mx-frame { position: relative; padding: 80px 0 210px; }
.mx-frame::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 81.5%; background: var(--mx-teal); }
.mx-frame.is-even { padding: 70px 0; }
.mx-frame img, .mx-frame .wp-block-image {
	position: relative; display: block; margin: 0 0 0 4.3%; width: 91.5%;
}
.mx-frame .wp-block-image img { width: 100%; margin: 0; box-shadow: 0 10px 50px rgba(36, 51, 68, .2); }
.mx-split-text .mx-h2 { margin-bottom: 30px; }
.mx-split-text > p { color: #000; }

/* About page: heading left, text right */
.mx-about2 { display: grid; grid-template-columns: minmax(0, 382fr) minmax(0, 833fr); column-gap: 45px; }
.mx-about2 .mx-head { margin: 0; }
.mx-about2 p { font-size: 16px; line-height: 32px; color: #555; margin: 0; }

/* ---------- Service cards (image + title bar) ---------- */
.mx-sec.is-cut { background: linear-gradient(var(--mx-dark) calc(100% - 180px), #fff 0); }
.mx-acicon { margin: 0 auto 10px; width: 150px; }
.mx-acicon img { display: block; width: 150px; }
.mx-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 70px 20px; padding: 0 10px; }
.mx-card { position: relative; height: 352px; overflow: hidden; background: #333; }
.mx-card .wp-block-image, .mx-card figure { margin: 0; height: 100%; }
.mx-card figure a { display: block; height: 100%; }
.mx-card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s; }
.mx-card h3 {
	position: absolute; left: 10px; right: 10px; bottom: 40px; z-index: 2; margin: 0;
	min-height: 102px; padding: 0 70px 0 50px;
	display: flex; flex-direction: column; justify-content: center;
	background: rgba(36, 51, 68, .7); color: #fff;
	font-size: 24px; line-height: 33.6px; font-weight: 500;
	transition: background-color .35s, bottom .35s, min-height .35s;
	pointer-events: none;
}
.mx-card h3::after {
	content: ''; position: absolute; right: 40px; top: 50%; width: 16px; height: 16px; margin-top: -8px;
	background: #fff;
	-webkit-mask: url(../icons/chevron-up.svg) center / contain no-repeat;
	mask: url(../icons/chevron-up.svg) center / contain no-repeat;
}
.mx-card h3 a { color: #fff; pointer-events: auto; }
.mx-card h3 a::after {
	content: 'Learn More ...'; display: block; height: 0; overflow: hidden; opacity: 0;
	font-size: 18px; font-weight: 400; transition: opacity .3s;
}
.mx-card:hover h3, .mx-card:focus-within h3 { background: rgba(2, 207, 201, .95); bottom: 10px; min-height: calc(100% - 20px); }
.mx-card:hover h3 a::after, .mx-card:focus-within h3 a::after { height: auto; opacity: 1; margin-top: 10px; }
.mx-card:hover img { transform: scale(1.05); }

/* ---------- Home: why choose us ---------- */
.mx-sec.mx-why { overflow: hidden; padding: 0; margin: 70px 0; }
.mx-why-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 70px; }
.mx-why-text { padding: 25px 0 100px 50px; }
.mx-why-text > p { color: var(--mx-muted); }
.mx-why-img { position: relative; margin: 60px 33px 0 0; max-width: 527px; }
.mx-why-img::before { content: ''; position: absolute; inset: 33px 33px -33px -33px; background: var(--mx-teal); }
.mx-why-img img { position: relative; display: block; width: 100%; background: #fff; box-shadow: 0 10px 50px rgba(36, 51, 68, .15); }
.mx-why-list { position: relative; padding: 135px 0 100px; }
.mx-why-list::before { content: ''; position: absolute; top: 0; bottom: 0; left: 72px; right: -100vw; background: var(--mx-dark); }
.mx-why-list > * { position: relative; }

/* Numbered item: teal square + title (+ text) */
.mx-num { display: flex; align-items: center; gap: 0 50px; margin: 0 0 59px; }
.mx-num:last-child { margin-bottom: 0; }
.mx-num .mx-n {
	flex: none; width: 136px; height: 136px; margin: 0; display: grid; place-items: center;
	background: var(--mx-teal); color: #fff;
	font-size: 58px !important; line-height: 1 !important; font-weight: 300;
}
.mx-num-body { min-width: 0; }
.mx-num h3 { margin: 0; color: #fff; font-size: 36px; line-height: 50.4px; font-weight: 700; }
.mx-num p:not(.mx-n) { margin: 0; color: #fff; font-size: 16px !important; line-height: 28px !important; }

.mx-benefits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 83px 0; }
.mx-benefits .mx-num { margin: 0; gap: 0 40px; }

/* ---------- Call to action band ---------- */
.mx-cta { background: var(--mx-dark); padding: 50px 0; }
.mx-cta-grid { display: grid; grid-template-columns: minmax(0, 897px) auto; justify-content: space-between; align-items: center; gap: 30px; }
.mx-cta-title { margin: 0 0 20px; color: var(--mx-teal); font-size: 32px; line-height: 44.8px; font-weight: 700; }
.mx-cta p { margin: 0; color: #fff; font-size: 20px; line-height: 40px; }
.mx-cta .mx-btns { margin: 0; }
.mx-cta .mx-btn .wp-block-button__link { padding: 15px 40px; }

/* ---------- Client logos ---------- */
.mx-logos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid #e8e8e8; border-left: 1px solid #e8e8e8; }
.mx-logos > * { margin: 0; display: grid; place-items: center; min-height: 240px; padding: 20px; border-right: 1px solid #e8e8e8; border-bottom: 1px solid #e8e8e8; }
.mx-logos img { max-height: 195px; width: auto; max-width: 100%; object-fit: contain; }

/* ---------- Testimonials ---------- */
.mx-testi-sec { padding: 100px 0 120px; overflow: hidden; }
.mx-testi {
	display: flex; gap: 90px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
	padding: 20px calc(50vw - 520px) 60px; margin: 0 calc(50% - 50vw);
}
.mx-testi::-webkit-scrollbar { display: none; }
.mx-tcard {
	position: relative; flex: 0 0 1040px; max-width: 1040px; scroll-snap-align: center;
	padding: 75px 150px; background: #fff; box-shadow: 0 10px 50px rgba(36, 51, 68, .15);
	transition: opacity .4s;
}
.mx-testi.is-ready .mx-tcard:not(.is-active) { opacity: .45; }
.mx-tcard p { margin: 0 0 40px; font-size: 24px !important; line-height: 48px !important; color: var(--mx-slate); }
.mx-tcard .mx-tname { margin: 0; font-size: 18px !important; line-height: 36px !important; font-style: italic; color: #aaa; }
.mx-tcard::after {
	content: ''; position: absolute; right: 50px; bottom: 30px; width: 68px; height: 60px;
	background: rgba(244, 192, 59, .25);
	-webkit-mask: url(../icons/quote-right.svg) center / contain no-repeat;
	mask: url(../icons/quote-right.svg) center / contain no-repeat;
}
.mx-dots { display: flex; justify-content: flex-end; gap: 8px; max-width: 1040px; margin: -20px auto 0; }
.mx-dots button { width: 14px; height: 5px; padding: 0; border: 0; background: rgba(2, 207, 201, .3); cursor: pointer; transition: width .3s, background-color .3s; }
.mx-dots button.is-active { width: 32px; background: var(--mx-teal); }

/* ---------- Service boxes (icon square + title + text + button) ---------- */
.mx-boxes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 140px 22px; padding-top: 64px; }
.mx-box {
	position: relative; display: flex; flex-direction: column; align-items: center; text-align: center;
	border: 2px solid var(--mx-dark); background: #fff; padding: 0 10px 10px; box-shadow: 0 10px 30px rgba(36, 51, 68, .08);
}
.mx-box .mx-box-icon { margin: -64px 0 0; width: 128px; height: 128px; background: var(--mx-dark); display: grid; place-items: center; }
.mx-box .mx-box-icon img { width: 44px; height: 44px; }
.mx-box h3 { margin: 30px 0 15px; font-size: 24px; line-height: 33.6px; color: var(--mx-dark); }
.mx-box p { flex: 1; margin: 0 30px 30px; font-size: 16px !important; line-height: 32px !important; color: var(--mx-grey); }
.mx-box .mx-btns { width: 100%; margin: 0; }
.mx-box .mx-btn { width: 100%; }
.mx-box .mx-btn .wp-block-button__link {
	display: block; width: 100%; padding: 10px; box-shadow: none;
	background: var(--mx-dark); color: #fff; font-size: 16px; line-height: 40px; text-transform: uppercase;
}
.mx-box .mx-btn .wp-block-button__link:hover { background: var(--mx-teal); }
.mx-sec.is-split-dark { background: linear-gradient(#fff calc(100% - 140px), var(--mx-dark) 0); padding-bottom: 0; }
.mx-boxes.is-plain .mx-box { padding-bottom: 40px; }

/* ---------- Counters ---------- */
.mx-counters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 20px; padding: 0 10px; }
.mx-counter { position: relative; background: #fff; text-align: center; padding: 50px 0 0; margin-bottom: 21px; }
.mx-counter .mx-count { margin: 0; font-size: 80px !important; line-height: 1.35 !important; font-weight: 200; color: var(--mx-dark); }
.mx-counter .mx-clabel {
	width: 87.5%; margin: 25px auto -21px; background: var(--mx-teal); color: var(--mx-dark);
	font-size: 20px !important; line-height: 47px !important; font-weight: 700;
	box-shadow: 0 20px 40px rgba(2, 207, 201, .25);
}

/* ---------- Careers ---------- */
.mx-careers { padding: 60px 0 0; }
.mx-careers .wp-block-image { text-align: center; margin: 0; }
.mx-careers img { width: 1024px; display: block; margin: 0 auto; }

/* ---------- Blog list (Query Loop block) ---------- */
.mx-blogs { padding: 60px 0 40px; }
.mx-blogs .wp-block-post-template {
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 30px;
	list-style: none; margin: 0; padding: 0;
}
.mx-postgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 30px; }
.mx-blogs .wp-block-post-featured-image, .mx-pcard-img { display: block; margin: 0 0 25px; aspect-ratio: 615 / 405; overflow: hidden; }
.mx-blogs .wp-block-post-featured-image img, .mx-pcard-img img { width: 100%; height: 100%; object-fit: cover; }
.mx-blogs .wp-block-post-title, .mx-pcard-title { margin: 0 0 4px; font-size: 18px; line-height: 1.4; font-weight: 600; }
.mx-blogs .wp-block-post-title a, .mx-pcard-title a { color: #333; }
.mx-blogs .wp-block-post-title a:hover, .mx-pcard-title a:hover { color: var(--mx-teal); }
.mx-blogs .wp-block-post-date, .mx-pcard-meta { margin: 0 0 12px; font-size: 12px; line-height: 1.5; color: #999; }
.mx-blogs .wp-block-post-excerpt, .mx-pcard-ex { margin: 0; font-size: 14px; line-height: 1.7; color: #666; }
.mx-blogs .wp-block-post-excerpt__excerpt, .mx-pcard-ex p { margin: 0 0 15px; }
.mx-blogs .wp-block-post-excerpt__more-text { margin: 0; }
.mx-blogs .wp-block-post-excerpt__more-link, .mx-readmore {
	display: inline-flex; align-items: center; gap: 6px; padding: 4px 20px; border-radius: 30px;
	background: rgba(244, 192, 59, .1); color: #f4c03b; font-size: 12px; line-height: 2;
}
.mx-blogs .wp-block-post-excerpt__more-link:hover, .mx-readmore:hover { background: #f4c03b; color: #fff; }
.mx-archive { padding: 60px var(--mx-gutter) 40px; }

/* ---------- Single post ---------- */
.mx-post-wrap { padding-top: 70px; padding-bottom: 40px; max-width: 1260px; }
.mx-post-head { text-align: center; margin-bottom: 50px; }
.mx-post-title { margin: 0 0 10px; font-size: 50px; line-height: 70px; color: #000; }
.mx-post-meta { margin: 0; color: #999; font-size: 14px; }
.mx-post-body { font-size: 15px; line-height: 2.1; }
.mx-post-body h2 { font-size: 34px; line-height: 1.4; margin: 40px 0 25px; }
.mx-post-body h3 { font-size: 26px; margin: 30px 0 15px; }
.mx-post-body h4 { font-size: 20px; margin: 0; }
.mx-post-body ol, .mx-post-body ul { margin: 0 0 5px; padding-left: 20px; }
.mx-post-body img { height: auto; }

/* ---------- Quote section (synced pattern) ---------- */
.mx-quote-slot > * { margin: 0; }
.mx-quote { position: relative; margin: 100px 0; padding: 0 0 130px; }
.mx-quote::before { content: ''; position: absolute; inset: 0 43% 0 0; background: var(--mx-dark); }
.mx-quote-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 620px); column-gap: 60px; }
.mx-quote-text { padding: 180px 0 0 40px; color: #fff; }
.mx-quote-text .mx-head { margin-bottom: 40px; }
.mx-quote-text .mx-h2 { color: #fff; }
.mx-quote-text .mx-head .mx-big { left: -37px; color: rgba(2, 207, 201, .09); }
.mx-quote-text > p { color: var(--mx-muted); font-size: 20px; line-height: 40px; margin: 0 0 40px; max-width: 505px; }
.mx-quote-form { align-self: start; margin-top: 110px; background: var(--mx-teal); padding: 50px 75px 45px; }
.mx-quote-form > * { margin: 0; }

.mx-clist { list-style: none; margin: 0; padding: 0; }
.mx-clist li {
	position: relative; min-height: 46px; margin: 0 0 12px; padding: 8.6px 0 8.6px 62px;
	color: #fff; font-size: 18px; font-weight: 500; line-height: 28.8px;
}
.mx-clist li::before { content: ''; position: absolute; left: 0; top: 50%; margin-top: -23px; width: 46px; height: 46px; background: var(--mx-teal); }
.mx-clist li::after {
	content: ''; position: absolute; left: 13px; top: 50%; margin-top: -10px; width: 20px; height: 20px; background: #fff;
	-webkit-mask: url(../icons/phone-volume.svg) center / contain no-repeat;
	mask: url(../icons/phone-volume.svg) center / contain no-repeat;
}
.mx-clist li:nth-child(2)::after { -webkit-mask-image: url(../icons/sms.svg); mask-image: url(../icons/sms.svg); }
.mx-clist li:nth-child(3)::after { -webkit-mask-image: url(../icons/map-marker-alt.svg); mask-image: url(../icons/map-marker-alt.svg); }
.mx-clist a { color: #fff; }
.mx-clist a:hover { color: var(--mx-teal); }

/* Contact Form 7 */
.wpcf7 p { margin: 0 0 10px; }
.wpcf7 label { display: block; font-size: 14px; line-height: 28px; color: rgba(36, 51, 68, .7); }
.wpcf7 input[type=text], .wpcf7 input[type=tel], .wpcf7 input[type=email], .wpcf7 textarea {
	display: block; width: 100%; margin-top: 5px; padding: 15px 17px; border: 0; border-radius: 0;
	background: #fff; color: #282828; font: 400 14px/1.4 'Open Sans', sans-serif;
}
.wpcf7 textarea { height: 160px; resize: vertical; }
.wpcf7 input[type=submit] {
	margin: 10px 0 0 77px; padding: 15px 40px; border: 0; cursor: pointer;
	background: var(--mx-slate); color: #fff; font: 600 16px 'Open Sans', sans-serif; box-shadow: var(--mx-shadow);
}
.wpcf7 input[type=submit]:hover { background: var(--mx-dark); }
.wpcf7 .wpcf7-spinner { vertical-align: middle; }
.wpcf7 form .wpcf7-response-output { margin: 15px 0 0; padding: 8px 12px; font-size: 14px; line-height: 1.5; color: var(--mx-dark); background: #fff; }
.wpcf7-not-valid-tip { font-size: 13px; color: #b00020; }

/* ---------- Footer ---------- */
.mx-footer { background: var(--mx-dark); color: #fff; padding: 100px 0; }
.mx-footer-grid { max-width: 1380px; display: grid; grid-template-columns: minmax(0, 442fr) minmax(0, 279fr) minmax(0, 280fr) minmax(0, 337fr); column-gap: 0; }
.mx-fcol { padding-right: 30px; }
.mx-fabout { padding-right: 0; }
.mx-fhead { margin: 0 0 16px; color: var(--mx-teal); font-size: 18px; line-height: 28px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.mx-flinks { list-style: none; margin: 0; padding: 0; }
.mx-flinks li { margin: 0 0 20px; }
.mx-flinks a { color: #fff; font-size: 18px; line-height: 28px; font-weight: 500; }
.mx-flinks a:hover { color: var(--mx-teal); }
.mx-contact-list { list-style: none; margin: 0; padding: 0; }
.mx-contact-list li { display: flex; align-items: center; gap: 15px; margin: 0 0 30px; font-size: 16px; line-height: 26px; font-weight: 500; }
.mx-contact-list a { color: #fff; }
.mx-contact-list a:hover { color: var(--mx-teal); }
.mx-cicon { flex: none; width: 44px; height: 44px; display: grid; place-items: center; background: var(--mx-teal); color: #fff; font-size: 19px; }
.mx-flogo { display: block; width: 337px; max-width: 100%; height: auto; margin: 0 0 12px; }
.mx-fabout p { margin: 0; font-size: 16px; line-height: 30px; }

/* ---------- Floating buttons + popup ---------- */
.mx-wa {
	position: fixed; z-index: 90; left: 50px; bottom: 50px; width: 50px; height: 50px;
	display: grid; place-items: center; border-radius: 10px; background: #25d366; color: #fff; font-size: 32px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
}
.mx-wa:hover { color: #fff; transform: scale(1.06); }
.mx-top {
	position: fixed; z-index: 90; right: 30px; bottom: 30px; width: 44px; height: 44px;
	display: grid; place-items: center; background: var(--mx-teal); color: #fff; font-size: 16px;
	opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s;
}
.mx-top.is-visible { opacity: 1; visibility: visible; }
.mx-top:hover { background: var(--mx-dark); color: #fff; }

.mx-modal { width: min(560px, calc(100% - 30px)); max-height: calc(100% - 30px); padding: 0; border: 0; background: var(--mx-teal); overflow: auto; }
.mx-modal::backdrop { background: rgba(18, 20, 28, .75); }
.mx-modal-close { position: absolute; top: 10px; right: 10px; width: 40px; height: 40px; border: 0; background: var(--mx-dark); color: #fff; cursor: pointer; font-size: 18px; display: grid; place-items: center; }
.mx-popup { padding: 50px 45px 40px; }
.mx-popup > * { margin: 0; }
.mx-popup-title { margin: 0 0 20px; text-align: center; font-size: 32px; line-height: 1.3; color: #fff; }
.mx-popup .wpcf7 input[type=submit] { margin-left: 0; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1300px) {
	.mx-head .mx-big { font-size: 110px !important; line-height: 110px !important; }
	.mx-hbtn { padding: 15px 28px; font-size: 18px; }
	.mx-menu a { padding: 13px 13px; }
	.mx-nav { margin-left: 20px; }
	.mx-tcard { flex-basis: min(1040px, calc(100vw - 120px)); padding: 60px 90px; }
	.mx-testi { padding-inline: 60px; }
}

@media (max-width: 1024px) {
	.mx-topbar { display: none; }
	.mx-header .mx-wrap { min-height: 80px; justify-content: center; position: relative; }
	.mx-hbtn { display: none; }
	.mx-burger {
		display: grid; place-items: center; position: absolute; left: var(--mx-gutter); top: 50%; margin-top: -25px;
		width: 50px; height: 50px; border: 0; background: var(--mx-teal); color: #fff; font-size: 24px; cursor: pointer;
	}
	.mx-burger .is-close, .mx-burger[aria-expanded=true] .is-open { display: none; }
	.mx-burger[aria-expanded=true] .is-close { display: block; }
	.mx-logo, .mx-logo img { width: 210px; }
	.mx-nav {
		display: none; position: absolute; top: 100%; left: 0; right: 0; margin: 0;
		background: #fff; box-shadow: 0 15px 30px rgba(0, 0, 0, .15); max-height: calc(100vh - 80px); overflow-y: auto;
	}
	.mx-nav.is-open { display: block; }
	.mx-menu { display: block; padding: 10px 0; }
	.mx-menu li { position: relative; border-bottom: 1px solid #f0f0f0; }
	.mx-menu a { padding: 12px 20px; }
	.mx-menu > .menu-item-has-children > a::after { display: none; }
	.mx-menu .sub-menu {
		position: static; display: none; min-width: 0; padding: 0 0 10px 15px; box-shadow: none;
		opacity: 1; visibility: visible; transform: none;
	}
	.mx-menu .is-open > .sub-menu { display: block; }
	.mx-subtoggle {
		display: grid; place-items: center; position: absolute; right: 10px; top: 4px;
		width: 40px; height: 40px; border: 0; background: none; color: var(--mx-slate); cursor: pointer;
	}
	.mx-subtoggle .mx-ico { transition: transform .2s; }
	.is-open > .mx-subtoggle .mx-ico { transform: rotate(180deg); }

	.mx-sec { padding: 70px 0; }
	.mx-h2, .mx-head .mx-h2 { font-size: 40px; line-height: 54px; }
	.mx-head .mx-big { font-size: 90px !important; line-height: 90px !important; top: -36px; }
	.mx-split { grid-template-columns: 1fr; padding: 0; row-gap: 50px; }
	.mx-split-text { padding: 0 var(--mx-gutter); max-width: 760px; margin: 0 auto; }
	.mx-frame { padding: 60px 0; }
	.mx-frame::before { width: 85%; }
	.mx-about2 { grid-template-columns: 1fr; row-gap: 30px; }
	.mx-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 20px; padding: 0; }
	.mx-why-grid { grid-template-columns: 1fr; }
	.mx-why-text { padding: 0 0 80px; }
	.mx-why-list { padding: 80px 0; }
	.mx-why-list::before { left: -100vw; }
	.mx-num h3 { font-size: 28px; line-height: 38px; }
	.mx-benefits { grid-template-columns: 1fr; gap: 40px; }
	.mx-cta-grid { grid-template-columns: 1fr; }
	.mx-logos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.mx-boxes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 110px 22px; }
	.mx-counters { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; gap: 50px; }
	.mx-quote::before { inset: 0; }
	.mx-quote-grid { grid-template-columns: 1fr; }
	.mx-quote-text { padding: 90px 0 0; }
	.mx-quote-form { margin-top: 40px; }
	.mx-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 50px; }
	.mx-pagehero-title, .mx-pagehero h1 { font-size: 54px; line-height: 70px; }
	.wp-block-cover.mx-pagehero, .mx-pagehero { min-height: 320px; }
}

@media (max-width: 767px) {
	:root { --mx-gutter: 16px; }
	.mx-logo, .mx-logo img { width: 190px; }
	.mx-sec { padding: 60px 0; }
	.mx-sec p { font-size: 18px; line-height: 34px; }
	.mx-head { margin-bottom: 35px; }
	.mx-h2, .mx-head .mx-h2 { font-size: 32px; line-height: 44px; }
	.mx-head .mx-sub { font-size: 20px !important; line-height: 28px !important; margin-bottom: 15px; }
	.mx-head .mx-big { font-size: 56px !important; line-height: 56px !important; top: -26px; left: 0; }
	.mx-head.is-center .mx-big { left: 50%; }
	.mx-split-text, .mx-why-text { text-align: center; }
	.mx-split-text .mx-head .mx-big, .mx-why-text .mx-head .mx-big { left: 50%; transform: translateX(-50%); }
	.mx-checks { text-align: left; display: inline-block; }
	.mx-checks li { font-size: 18px; }
	.mx-checks.is-boxed { display: grid; grid-template-columns: 1fr; }
	.mx-btns { justify-content: center; }
	.mx-btn .wp-block-button__link { font-size: 18px; padding: 12px 34px; }
	.mx-cards { grid-template-columns: 1fr; }
	.mx-card { height: 300px; }
	.mx-card h3 { font-size: 22px; min-height: 84px; padding-left: 30px; }
	.mx-sec.is-cut { background: var(--mx-dark); }
	.mx-why-img { margin: 40px 0 0 33px; }
	.mx-num { gap: 0 22px; margin-bottom: 30px; }
	.mx-num .mx-n { width: 80px; height: 80px; font-size: 36px !important; }
	.mx-num h3 { font-size: 22px; line-height: 30px; }
	.mx-cta { padding: 50px 0; text-align: center; }
	.mx-cta-title { font-size: 26px; line-height: 36px; }
	.mx-cta p { font-size: 18px; line-height: 32px; }
	.mx-cta .mx-btns { justify-content: center; }
	.mx-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mx-logos > * { min-height: 160px; }
	.mx-logos img { max-height: 120px; }
	.mx-testi { gap: 20px; padding-inline: var(--mx-gutter); }
	.mx-tcard { flex-basis: calc(100vw - 2 * var(--mx-gutter)); padding: 40px 25px 90px; }
	.mx-tcard p { font-size: 18px !important; line-height: 34px !important; }
	.mx-dots { justify-content: center; margin-top: -10px; }
	.mx-boxes { grid-template-columns: 1fr; gap: 100px; }
	.mx-quote { margin: 60px 0; padding-bottom: 60px; }
	.mx-quote-text { padding-top: 70px; text-align: left; }
	.mx-quote-text > p { font-size: 18px; line-height: 32px; }
	.mx-quote-form { padding: 35px 22px; }
	.mx-clist li { font-size: 16px; }
	.wpcf7 input[type=submit] { margin-left: 0; }
	.mx-footer { padding: 70px 0 90px; }
	.mx-footer-grid { grid-template-columns: 1fr; }
	.mx-pagehero-title, .mx-pagehero h1 { font-size: 38px; line-height: 50px; }
	.wp-block-cover.mx-pagehero, .mx-pagehero { min-height: 220px; }
	.mx-blogs .wp-block-post-template, .mx-postgrid { grid-template-columns: 1fr; }
	.mx-post-title { font-size: 32px; line-height: 44px; }
	.mx-post-body h2 { font-size: 26px; }
	.mx-wa { left: 16px; bottom: 16px; }
	.mx-top { right: 16px; bottom: 16px; }
	.mx-careers { padding-top: 30px; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}