/* ========================================================================== Magixs — Elementor bridge. design.css holds the brand design tokens and component styles. Pages are built from native Elementor containers and widgets, so this file maps those components onto Elementor's markup (buttons, headings, lists, counters, tabs, carousels, clocks). No page content lives here. ========================================================================== */ /* 1. Reset Elementor's default spacing inside brand containers ------------- */ .elementor .e-con { --padding-top: 0px; --padding-right: 0px; --padding-bottom: 0px; --padding-left: 0px; --gap: 0px; --row-gap: 0px; --column-gap: 0px; --margin-top: 0px; --margin-right: 0px; --margin-bottom: 0px; --margin-left: 0px; } .elementor .e-con > .elementor-widget { --container-widget-width: auto; --container-widget-flex-grow: 0; width: auto; } .elementor .e-con.e-flex.mx-hero__btns > .elementor-widget, .elementor .e-con.e-flex.mx-actions > .elementor-widget { flex: none; } .elementor .e-con > .e-con { --width: auto; } /* wrapper baseline: brand component classes sit on Elementor widget wrappers, so reset any layout the old HTML-era rules gave them */ .elementor-widget[class*="mx-"] { display: block; grid-template-columns: none; flex-direction: initial; } .elementor-widget-container { margin: 0; } .e-con.e-grid { display: grid; } .elementor .e-con.mx-section, .elementor .e-con.mx-cta2, .elementor .e-con.mx-logos-wrap, .elementor .e-con.mx-hero { width: 100%; max-width: none; } :where(.elementor-widget-text-editor, .elementor-widget-heading, .elementor-widget-icon-list) { color: inherit; } /* bottom spacing of widgets is set per component through --mb (Elementor's own rule needs more specificity than a plain class) */ .elementor .elementor-widget:not(:last-child) { margin-block-end: var(--mb, 0px); margin-bottom: var(--mb, 0px); } .mx-title { --mb: .55em; } .mx-eyebrow { --mb: 16px; } .mx-lead, .mx-text { --mb: 1.1em; } .mx-hero__badge { --mb: 28px; } .mx-hero__title--xl { --mb: 26px; } .mx-hero__lead { --mb: 14px; } .mx-tick__title { --mb: 4px; } .mx-footer__heading { --mb: 22px; } .mx-place__label { --mb: 8px; } .mx-pcard__type { --mb: 8px; } .mx-mega__promo-kicker { --mb: 10px; } .elementor-widget-text-editor p:last-child { margin-bottom: 0; } .elementor .e-con.mx-container { width: 100%; max-width: calc(var(--wrap) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); } /* 2. Headings --------------------------------------------------------------- */ .elementor-widget-heading .elementor-heading-title { padding: 0; margin: 0; line-height: 1.15; letter-spacing: -.025em; font-weight: 600; font-family: var(--font-head); } .mx-title .elementor-heading-title { font-size: inherit; line-height: 1.08; letter-spacing: -.035em; text-wrap: balance; } .mx-hero__title .elementor-heading-title { font-size: inherit; line-height: 1.02; letter-spacing: -.05em; color: #fff; text-wrap: balance; } .mx-hero__title .elementor-heading-title span { color: #ff3b3b; } .mx-hero__title { max-width: none; } .mx-hero__lead .elementor-heading-title { font-size: inherit; font-weight: 500; letter-spacing: -.015em; line-height: 1.35; color: #fff; } .mx-cta2__title .elementor-heading-title { font-size: inherit; letter-spacing: -.05em; line-height: 1.02; } .mx-cta2__title .elementor-heading-title span { color: var(--red); } .mx-logos__title .elementor-heading-title { font-size: 1.05rem; font-weight: 500; letter-spacing: -.01em; color: var(--muted); } .mx-section--dark .elementor-heading-title, .mx-hero .elementor-heading-title, .mx-footer .elementor-heading-title { color: #fff; } .mx-section--dark .mx-title .elementor-heading-title span { color: #ff3b3b; } .mx-title .elementor-heading-title span { color: var(--red); } .mx-footer__heading .elementor-heading-title { font-size: 1rem; font-weight: 700; margin-bottom: 22px; } .mx-tick__title .elementor-heading-title { font-size: 1rem; font-weight: 600; letter-spacing: 0; color: var(--ink); margin-bottom: 4px; } /* 3. Text ------------------------------------------------------------------- */ .elementor-widget.mx-eyebrow { display: inline-flex; width: auto; align-self: flex-start; } .mx-head--center .elementor-widget.mx-eyebrow { align-self: center; } .mx-text { color: var(--muted); } .mx-section--dark .elementor-widget-text-editor { color: inherit; } .mx-tick__text { font-size: .93rem; color: var(--muted); line-height: 1.6; } /* 4. Buttons ---------------------------------------------------------------- */ .elementor-widget-button.mx-btn { display: inline-block; width: auto; padding: 0; min-height: 0; border: 0; background: none; border-radius: 0; overflow: visible; isolation: auto; transform: none; box-shadow: none; } .elementor-widget-button.mx-btn::before { content: none; } .mx-btn .elementor-button { --btn-bg: var(--red); --btn-fg: #fff; --btn-icon-bg: rgba(255, 255, 255, .18); position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; gap: 14px; padding: 6px 6px 6px 22px; min-height: 50px; font-family: var(--font-head); font-size: .92rem; font-weight: 600; letter-spacing: 0; line-height: 1.2; color: var(--btn-fg); background: var(--btn-bg); border: 1.5px solid transparent; border-radius: 100px; fill: currentColor; transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), color .35s, border-color .35s, background .35s; white-space: nowrap; } .mx-btn .elementor-button::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--ink); border-radius: inherit; transform: translateX(-101%); transition: transform .5s var(--ease-out); } .mx-btn .elementor-button:hover, .mx-btn .elementor-button:focus { color: var(--btn-fg); transform: translateY(-1px); box-shadow: 0 12px 30px -14px rgba(213, 0, 0, .55); background: var(--btn-bg); } .mx-btn .elementor-button:hover::before { transform: none; } .mx-btn .elementor-button-content-wrapper { gap: 14px; align-items: center; } .mx-btn .elementor-button-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; margin: 0; background: var(--btn-icon-bg); transition: transform .45s var(--ease-out), background .35s; } .mx-btn .elementor-button-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; } .mx-btn .elementor-button:hover .elementor-button-icon { transform: rotate(-45deg); } .mx-btn .elementor-button-text { padding: 0; } .mx-btn--ghost .elementor-button { --btn-bg: transparent; --btn-icon-bg: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .4); } .mx-btn--ghost .elementor-button::before { background: #fff; } .mx-btn--ghost .elementor-button:hover { --btn-fg: var(--ink); --btn-icon-bg: var(--red); box-shadow: none; background: transparent; } .mx-btn--ghost .elementor-button:hover .elementor-button-icon { color: #fff; } .mx-btn--light .elementor-button { --btn-bg: #fff; --btn-fg: var(--ink); --btn-icon-bg: var(--red); } .mx-btn--light .elementor-button-icon { color: #fff; } .mx-btn--light .elementor-button:hover { --btn-fg: #fff; box-shadow: 0 18px 40px -14px rgba(0, 0, 0, .5); } .mx-btn--outline .elementor-button { --btn-bg: transparent; --btn-fg: var(--ink); --btn-icon-bg: var(--red); border-color: var(--line); } .mx-btn--outline .elementor-button-icon { color: #fff; } .mx-btn--outline .elementor-button:hover { --btn-fg: #fff; border-color: var(--ink); box-shadow: var(--shadow); background: transparent; } .mx-btn--dark .elementor-button { --btn-bg: var(--ink); --btn-icon-bg: var(--red); } .mx-btn--dark .elementor-button::before { background: var(--red); } .mx-btn--sm .elementor-button { min-height: 46px; padding: 5px 5px 5px 20px; font-size: .88rem; } .mx-btn--sm .elementor-button-icon { width: 34px; height: 34px; } /* text links with an arrow */ .elementor-widget-button.mx-link .elementor-button { display: inline-flex; align-items: center; gap: 8px; padding: 0; min-height: 0; background: none; border: 0; border-radius: 0; color: var(--red); font-family: var(--font-head); font-weight: 600; font-size: .92rem; box-shadow: none; transform: none; overflow: visible; } .elementor-widget-button.mx-link .elementor-button::before { content: none; } .elementor-widget-button.mx-link .elementor-button-content-wrapper { gap: 8px; } .elementor-widget-button.mx-link .elementor-button-icon { width: 18px; height: 18px; background: none; border-radius: 0; } .elementor-widget-button.mx-link .elementor-button:hover .elementor-button-icon { transform: translateX(5px); } .mx-link--light .elementor-button { color: #fff; } .mx-link--light .elementor-button-icon { color: #ff5a5a; } .mx-link--light .elementor-button:hover { color: #ff6b6b; } /* 5. Icons ------------------------------------------------------------------ */ .elementor-widget-icon .elementor-icon { font-size: inherit; line-height: 1; display: grid; place-items: center; } .elementor-widget-icon .elementor-icon svg, .elementor-icon-list-icon svg, .elementor-icon svg { fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; } .elementor-widget-icon .elementor-icon-wrapper { display: grid; place-items: center; } /* 6. Icon lists ------------------------------------------------------------- */ .elementor-widget-icon-list .elementor-icon-list-items { list-style: none; margin: 0; padding: 0; } .elementor-widget-icon-list .elementor-icon-list-item { padding: 0; margin: 0; } .elementor-widget-icon-list .elementor-icon-list-item > a { display: inline-flex; align-items: center; gap: 8px; color: inherit; } .elementor-widget-icon-list .elementor-icon-list-icon { display: inline-flex; width: auto; } .elementor-widget-icon-list .elementor-icon-list-icon svg { width: 18px; height: 18px; } .elementor-widget-icon-list .elementor-icon-list-text { padding: 0; color: inherit; } /* 7. Image widgets ---------------------------------------------------------- */ .elementor-widget-image img { display: block; max-width: 100%; height: auto; } /* 8. Counters --------------------------------------------------------------- */ .elementor-counter { display: flex; flex-direction: column-reverse; } .elementor-counter .elementor-counter-number-wrapper { font: inherit; line-height: 1; } .elementor-counter .elementor-counter-title { font: inherit; } .mx-tile__counter .elementor-counter-number-wrapper { font-family: var(--font-head); font-size: clamp(2.4rem, 3.6vw, 3.2rem); font-weight: 600; letter-spacing: -.05em; line-height: 1; color: var(--ink); } .mx-tile__counter .elementor-counter-number-suffix { color: var(--red); } .mx-tile__counter .elementor-counter-title { margin: 10px 0 0; font-size: .9rem; font-weight: 400; color: var(--muted); letter-spacing: 0; text-align: left; } /* 9. Header ----------------------------------------------------------------- */ .ekit-template-content-header { position: static; } .mx-header { position: fixed; inset: 0 0 auto; z-index: 100; width: 100%; height: var(--header-h); color: var(--ink); background: rgba(255, 255, 255, .92); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); box-shadow: 0 1px 0 rgba(12, 12, 17, .06); transition: background .4s, box-shadow .4s, transform .45s var(--ease-out), height .35s var(--ease-out), color .4s; } body.has-hero .mx-header:not(.is-scrolled) { background: transparent; box-shadow: none; color: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; } .mx-header.is-scrolled { --header-h: 72px; box-shadow: 0 10px 40px -20px rgba(12, 12, 17, .3); } .mx-header.is-hidden { transform: translateY(-100%); } .admin-bar .mx-header { top: 32px; } .mx-header__bar { height: var(--header-h); align-items: center; justify-content: space-between; gap: 28px; } .mx-header__brand { position: relative; flex: none; display: block; } .mx-header__brand .elementor-widget-image img { height: 44px; width: auto; transition: opacity .35s, height .35s; } .mx-header.is-scrolled .mx-header__brand img { height: 38px; } .mx-header__logo-dark { position: absolute; inset: 0; } .mx-header .mx-header__logo-light { opacity: 0; } body.has-hero .mx-header:not(.is-scrolled) .mx-header__logo-light { opacity: 1; } body.has-hero .mx-header:not(.is-scrolled) .mx-header__logo-dark { opacity: 0; } .mx-header__actions { display: flex; align-items: center; gap: 12px; } .mx-header__cta { display: inline-block; } /* ElementsKit menu -> glass capsule */ .mx-nav { flex: 1 1 auto; display: flex; justify-content: center; } .mx-nav .elementskit-menu-container { width: auto; } .mx-nav .elementskit-navbar-nav { display: flex; flex-wrap: nowrap; white-space: nowrap; align-items: center; gap: 4px; padding: 5px; border-radius: 100px; background: rgba(12, 12, 17, .04); border: 1px solid var(--line); margin: 0; } body.has-hero .mx-header:not(.is-scrolled) .mx-nav .elementskit-navbar-nav { background: rgba(12, 12, 17, .38); border-color: rgba(255, 255, 255, .14); } .mx-nav .elementskit-navbar-nav > li { margin: 0; } .mx-nav .elementskit-navbar-nav > li > a { padding: 8px 16px; border-radius: 100px; font-family: var(--font-head); font-size: .9rem; font-weight: 500; color: inherit; line-height: 1.4; transition: background .25s, color .25s; height: auto; } .mx-nav .elementskit-navbar-nav > li > a:hover, .mx-nav .elementskit-navbar-nav > li:hover > a { background: rgba(12, 12, 17, .06); color: inherit; } body.has-hero .mx-header:not(.is-scrolled) .mx-nav .elementskit-navbar-nav > li > a { color: #fff; } body.has-hero .mx-header:not(.is-scrolled) .mx-nav .elementskit-navbar-nav > li:hover > a { background: rgba(255, 255, 255, .1); } .mx-nav .elementskit-navbar-nav > li.current-menu-item > a { color: var(--red); } body.has-hero .mx-header:not(.is-scrolled) .mx-nav .elementskit-navbar-nav > li.current-menu-item > a { color: #fff; background: rgba(255, 255, 255, .12); } .mx-nav .elementskit-navbar-nav > li > a .elementskit-submenu-indicator { margin-left: 6px; } /* Mega panel */ .mx-nav .elementskit-megamenu-panel { border-radius: var(--radius-lg); background: #fff; box-shadow: var(--shadow-lg); border: 1px solid var(--line); padding: 0; overflow: hidden; } .mx-mega__inner { display: grid; grid-template-columns: 1fr 320px; gap: 8px; padding: 14px; } .mx-mega__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; padding: 10px; } .mx-mega__link { display: flex; align-items: flex-start; gap: 14px; padding: 14px; border-radius: 14px; transition: background .25s; color: var(--text); } .mx-mega__link:hover { background: var(--soft); } .mx-mega__icon { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 12px; background: var(--red-soft); color: var(--red); transition: background .3s, color .3s, transform .4s var(--ease-out); } .mx-mega__icon .elementor-icon { font-size: 22px; } .mx-mega__icon svg { width: 22px; height: 22px; } .mx-mega__link:hover .mx-mega__icon { background: var(--red); color: #fff; transform: rotate(-6deg) scale(1.05); } .mx-mega__label { display: flex; flex-direction: column; gap: 2px; } .mx-mega__title .elementor-heading-title { font-size: .95rem; font-weight: 600; color: var(--ink); letter-spacing: 0; line-height: 1.3; } .mx-mega__desc { font-size: .82rem; line-height: 1.45; color: var(--muted); } .mx-mega__promo { position: relative; overflow: hidden; padding: 28px; border-radius: 20px; color: #fff; background: radial-gradient(120% 90% at 100% 0%, #ff3434 0%, var(--red) 40%, #7a0000 100%); } .mx-mega__promo::after { content: ''; position: absolute; right: -60px; bottom: -60px; width: 200px; height: 200px; border: 32px solid rgba(255, 255, 255, .08); border-radius: 50%; pointer-events: none; } .mx-mega__promo-kicker { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; opacity: .8; margin-bottom: 10px; font-weight: 600; } .mx-mega__promo-title .elementor-heading-title { font-size: 1.35rem; font-weight: 700; line-height: 1.25; margin-bottom: 10px; color: #fff; } .mx-mega__promo-text { font-size: .9rem; opacity: .85; line-height: 1.55; margin-bottom: 22px; } .mx-mega__all .elementor-button { background: none; color: #fff; padding: 0; min-height: 0; border: 0; margin-top: 18px; font-size: .88rem; opacity: .9; } .mx-mega__all .elementor-button::before { content: none; } /* 10. Hero ------------------------------------------------------------------ */ .elementor .e-con.mx-hero { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end; justify-content: flex-end; min-height: clamp(520px, 78vh, 760px); padding: calc(var(--header-h) + 60px) 0 clamp(64px, 8vw, 110px); background-color: var(--ink); color: #e3e4ea; } .elementor .e-con.mx-hero--home { min-height: 100vh; min-height: 100svh; padding: calc(var(--header-h) + 80px) 0 clamp(36px, 4vw, 56px); } .mx-hero > .elementor-background-video-container { z-index: -3; } .mx-hero > .elementor-background-overlay { z-index: -2; opacity: 1 !important; background: radial-gradient(60% 70% at 85% 20%, rgba(213, 0, 0, .35), transparent 60%), linear-gradient(180deg, rgba(12, 12, 17, .55) 0%, rgba(12, 12, 17, .45) 45%, rgba(12, 12, 17, .95) 100%), linear-gradient(90deg, rgba(12, 12, 17, .8) 0%, rgba(12, 12, 17, .15) 80%) !important; } .mx-hero__inner { position: relative; width: 100%; } .mx-hero__title--xl { font-size: clamp(2.8rem, 6.6vw, 6.1rem); font-weight: 600; line-height: 1; letter-spacing: -.05em; margin-bottom: 26px; } .elementor-widget.mx-hero__badge { display: inline-flex; width: auto; align-self: flex-start; align-items: center; gap: 12px; margin-bottom: 28px; padding: 8px 18px 8px 12px; border-radius: 100px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-size: .85rem; font-weight: 500; letter-spacing: .04em; color: #fff; } .mx-hero__badge::before { content: ''; position: relative; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 0 rgba(213, 0, 0, .7); animation: mx-ping2 2s var(--ease) infinite; } @keyframes mx-ping2 { 0% { box-shadow: 0 0 0 0 rgba(213, 0, 0, .7); } 80%, 100% { box-shadow: 0 0 0 10px rgba(213, 0, 0, 0); } } .mx-hero__lead { font-size: clamp(1.15rem, 1.6vw, 1.4rem); margin-bottom: 14px; max-width: 560px; } .mx-hero__text { font-size: 1.02rem; max-width: 560px; color: #c4c5cf; margin: 0; } .mx-hero__btns { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; } .mx-hero__row { display: grid; grid-template-columns: minmax(0, 660px) minmax(0, 1fr); gap: 40px; align-items: start; } .mx-hero__orb { position: absolute; z-index: -1; border-radius: 50%; filter: blur(70px); opacity: .55; pointer-events: none; width: 420px; height: 420px; right: -120px; top: 10%; background: var(--red); animation: mx-float 14s ease-in-out infinite alternate; } .elementor-widget-icon-list.mx-hero__tabs .elementor-icon-list-items { display: flex; gap: 20px; flex-wrap: nowrap; justify-content: space-between; overflow-x: auto; scrollbar-width: none; } .mx-hero__tabs .elementor-icon-list-items::-webkit-scrollbar { display: none; } .mx-hero__tabs .elementor-icon-list-item > a { position: relative; padding: 8px 0; font-size: .86rem; color: rgba(255, 255, 255, .72); white-space: nowrap; } .mx-hero__tabs .elementor-icon-list-item > a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -14px; height: 2px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease-out); } .mx-hero__tabs .elementor-icon-list-item > a:hover { color: #fff; } .mx-hero__tabs .elementor-icon-list-item > a:hover::after { transform: scaleX(1); } .mx-hero__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 26px; } .mx-hero__card { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 20px 52px 20px 22px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(12, 12, 17, .45); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: #fff; transition: border-color .3s, background .3s, transform .4s var(--ease-out); } .mx-hero__card:hover { border-color: rgba(255, 59, 59, .6); background: rgba(213, 0, 0, .14); transform: translateY(-3px); } .mx-hero__card-kicker { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: #ff6b6b; font-weight: 600; } .mx-hero__card-name .elementor-heading-title { font-weight: 600; font-size: 1.08rem; letter-spacing: -.01em; color: #fff; } .mx-hero__card-text { font-size: .84rem; line-height: 1.5; color: #b9bbc7; } .mx-hero__card-arrow { position: absolute; right: 20px; top: 22px; color: #ff6b6b; transition: transform .35s var(--ease-out); } .mx-hero__card-arrow svg { width: 18px; height: 18px; } .mx-hero__card:hover .mx-hero__card-arrow { transform: translateX(4px); } /* 11. Intro + tiles --------------------------------------------------------- */ .mx-intro__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(40px, 6vw, 96px); align-items: start; } .mx-ticks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px 32px; margin: 34px 0 0; } .mx-ticks--one { grid-template-columns: 1fr; gap: 18px; margin-top: 28px; } .mx-tick { position: relative; padding-left: 30px; } .mx-tick::before { content: ''; position: absolute; left: 0; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--red-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d50000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5L20 7'/%3E%3C/svg%3E") center / 11px no-repeat; } .mx-actions { display: flex; flex-wrap: wrap; flex-direction: row; gap: 14px; margin-top: 36px; } .mx-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; } .mx-tile { padding: 26px 26px 22px; border-radius: 18px; border: 1px solid var(--line); background: #fff; transition: border-color .3s, box-shadow .3s; } .mx-tile:hover { border-color: transparent; box-shadow: var(--shadow); } .mx-intro__photo { margin: 14px 0 0; border-radius: 18px; overflow: hidden; } .mx-intro__photo img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform 1.2s var(--ease-out); } .mx-intro__photo:hover img { transform: scale(1.04); } .mx-intro__aside { display: flex; flex-direction: column; } /* 12. Logo wall ------------------------------------------------------------- */ .mx-logos-wrap { padding-block: clamp(48px, 6vw, 80px); border-block: 1px solid var(--line); } .mx-logos__head { display: flex; flex-wrap: wrap; flex-direction: row; align-items: center; justify-content: space-between; gap: 12px 30px; margin-bottom: 30px; } .mx-logos { display: grid; grid-template-columns: repeat(7, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); } .mx-logos > .elementor-widget { display: grid; place-items: center; height: 104px; padding: 16px 14px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transition: background .3s; width: auto; } .mx-logos > .elementor-widget:hover { background: var(--soft); } .mx-logos img { max-height: 46px; width: auto; max-width: 100%; object-fit: contain; filter: grayscale(1); opacity: .6; transition: filter .4s, opacity .4s; } .mx-logos > .elementor-widget:hover img { filter: none; opacity: 1; } /* 13. Services showcase: nested tabs --------------------------------------- */ .mx-showcase, .mx-products-show, .mx-global { overflow: hidden; isolation: isolate; } .mx-showcase > .mx-container, .mx-products-show > .mx-container { position: relative; z-index: 1; } .elementor .e-con.mx-glow { position: absolute; z-index: 0; right: -10%; top: -20%; width: 60%; height: 80%; } .elementor .e-con.mx-glow--center { right: auto; left: 20%; top: auto; bottom: -30%; } .mx-tabs .e-n-tabs { display: grid; grid-template-columns: minmax(280px, 380px) 1fr; gap: clamp(28px, 4vw, 56px); align-items: start; } .mx-tabs .e-n-tabs-heading { display: flex; flex-direction: column; gap: 4px; flex-wrap: nowrap; } .mx-tabs .e-n-tab-title { display: grid; grid-template-columns: 34px 1fr 18px; align-items: center; gap: 10px; width: 100%; padding: 16px 18px; border: 0; border-radius: 14px; background: transparent; text-align: left; color: #a9abb8; transition: background .3s, color .3s; counter-increment: tab; --n-tabs-title-order: 0; } .mx-tabs .e-n-tabs-heading { counter-reset: tab; } .mx-tabs .e-n-tab-title::before { content: counter(tab, decimal-leading-zero); font-family: var(--font-head); font-size: .8rem; font-weight: 600; color: #ff5a5a; } .mx-tabs .e-n-tab-title::after { content: ''; width: 18px; height: 18px; opacity: 0; transform: translateX(-6px); transition: opacity .3s, transform .3s var(--ease-out); background: #ff5a5a; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; } .mx-tabs .e-n-tab-title:hover { color: #fff; background: rgba(255, 255, 255, .04); } .mx-tabs .e-n-tab-title[aria-selected="true"] { color: #fff; background: rgba(255, 255, 255, .07); box-shadow: inset 2px 0 0 var(--red); } .mx-tabs .e-n-tab-title[aria-selected="true"]::after { opacity: 1; transform: none; } .mx-tabs .e-n-tab-title-text { font-family: var(--font-head); font-size: 1.05rem; font-weight: 500; letter-spacing: -.01em; } .mx-tabs .e-n-tabs-content > .e-con { display: none; animation: mx-fade-up .6s var(--ease-out) both; } .mx-tabs .e-n-tabs-content > .e-con.e-active { display: flex; } .mx-tabs__media { position: relative; border-radius: 22px; overflow: hidden; } .mx-tabs__media img { width: 100%; aspect-ratio: 16 / 8.5; object-fit: cover; } .mx-tabs__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(12, 12, 17, .6)); pointer-events: none; } .elementor-widget-icon.mx-tabs__icon { position: absolute; left: 22px; bottom: 22px; z-index: 1; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 16px; background: var(--red); color: #fff; } .mx-tabs__icon svg { width: 26px; height: 26px; } .mx-tabs__body { padding-top: 28px; } .mx-tabs__body .elementor-heading-title { font-size: clamp(1.5rem, 2.4vw, 2rem); letter-spacing: -.03em; margin-bottom: 10px; color: #fff; } .mx-tabs__body .elementor-widget-text-editor { color: #b9bbc7; font-size: 1.04rem; max-width: 620px; margin-bottom: 1.1em; } .mx-showcase__foot { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 18px 32px; margin-top: clamp(40px, 5vw, 64px); padding-top: 32px; border-top: 1px solid rgba(255, 255, 255, .1); } .mx-chips .elementor-icon-list-items { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 26px; } .mx-chips .elementor-icon-list-item { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; border-radius: 100px; border: 1px solid var(--line); background: #fff; font-size: .92rem; font-weight: 500; color: var(--text); transition: border-color .3s, color .3s, background .3s; } .mx-chips .elementor-icon-list-icon { color: var(--red); } .mx-chips .elementor-icon-list-item:hover { border-color: var(--red); color: var(--red); } .mx-chips--dark .elementor-icon-list-item { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .14); color: #e3e4ea; padding: 8px 16px; font-size: .88rem; } .mx-chips--dark .elementor-icon-list-item:hover { border-color: rgba(255, 90, 90, .6); color: #fff; } /* 14. Why mosaic ------------------------------------------------------------ */ .mx-mosaic { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(40px, 6vw, 88px); align-items: start; } .mx-mosaic__intro { position: sticky; top: 120px; } .mx-callout { display: flex; flex-direction: row; gap: 16px; margin-top: 30px; padding: 22px 24px; border-radius: 0 16px 16px 0; border-left: 2px solid var(--red); background: var(--soft); } .elementor-widget-icon.mx-callout__icon { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 12px; background: #fff; color: var(--red); } .mx-callout__icon svg { width: 22px; height: 22px; } .mx-callout .elementor-heading-title { font-size: 1.05rem; margin: 2px 0 6px; letter-spacing: -.01em; } .mx-callout .elementor-widget-text-editor { margin: 0; font-size: .94rem; color: var(--muted); } .mx-mosaic__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .mx-mosaic__grid > :nth-child(even) { transform: translateY(48px); } .mx-mosaic__tile { position: relative; margin: 0; border-radius: 22px; overflow: hidden; aspect-ratio: 4 / 5; background: var(--ink); } .mx-mosaic__tile .elementor-widget-image, .mx-mosaic__tile .elementor-widget-image img { width: 100%; height: 100%; } .mx-mosaic__tile img { object-fit: cover; opacity: .9; transition: transform 1.2s var(--ease-out); } .mx-mosaic__tile:hover img { transform: scale(1.06); } .mx-mosaic__cap { position: absolute; inset: auto 0 0; padding: 70px 24px 24px; background: linear-gradient(180deg, transparent, rgba(12, 12, 17, .92) 55%); color: #d9dae2; } .mx-mosaic__cap .elementor-heading-title { color: #fff; font-size: 1.12rem; margin-bottom: 6px; letter-spacing: -.01em; } .mx-mosaic__cap .elementor-widget-text-editor { margin: 0; font-size: .88rem; line-height: 1.55; color: #c4c5cf; } /* 15. Partners -------------------------------------------------------------- */ .mx-partners__grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(40px, 6vw, 88px); align-items: center; } .mx-partners__logos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .mx-partner { display: grid; place-items: center; height: 136px; padding: 22px; border-radius: 18px; background: #fff; border: 1px solid var(--line); transition: transform .45s var(--ease-out), box-shadow .45s, border-color .3s; } .mx-partner:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: transparent; } .mx-partner img { max-height: 58px; width: auto; max-width: 100%; object-fit: contain; } /* 16. Product cards --------------------------------------------------------- */ .mx-pcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .elementor .e-con.mx-pcard { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; min-height: 540px; padding: 30px; border-radius: 24px; border: 1px solid rgba(255, 255, 255, .1); background-color: var(--ink-2); color: #c4c5cf; transition: border-color .4s, transform .5s var(--ease-out); } .mx-pcard::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(21, 21, 28, .8), rgba(21, 21, 28, .97) 55%); } .mx-pcard:hover { border-color: rgba(255, 59, 59, .55); transform: translateY(-6px); } .elementor-widget-image.mx-pcard__logo { align-self: flex-start; height: 40px; margin-bottom: 60px; } .mx-pcard__logo img { height: 34px; width: auto; max-width: 190px; object-fit: contain; } .mx-pcard__type { margin: 0 0 8px; font-size: .74rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #ff5a5a; } .mx-pcard .elementor-heading-title { font-size: 1.9rem; letter-spacing: -.04em; margin-bottom: 10px; color: #fff; } .mx-pcard__tag { font-size: .98rem; color: #c4c5cf; } .mx-pcard__list .elementor-icon-list-items { display: flex; flex-direction: column; gap: 10px; margin: 10px 0 30px; } .mx-pcard__list .elementor-icon-list-item { font-size: .92rem; color: #e3e4ea; } .mx-pcard__list .elementor-icon-list-icon { color: #ff5a5a; } .mx-pcard__list .elementor-icon-list-icon svg { width: 16px; height: 16px; } .mx-pcard__actions { margin-top: auto; display: flex; flex-direction: row; flex-wrap: wrap; gap: 12px 26px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .1); } .mx-center { text-align: center; } .mx-center .mx-actions { justify-content: center; } /* 17. Case-study carousel (Premium Carousel) ------------------------------- */ .mx-carousel { margin-top: clamp(48px, 6vw, 80px); } .mx-carousel__head { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 26px; } .mx-carousel__head .elementor-heading-title { font-size: clamp(1.4rem, 2.2vw, 1.8rem); letter-spacing: -.03em; margin: 0; } .mx-carousel__slider .premium-carousel-template { padding: 0 10px; } .mx-ccard { display: flex; flex-direction: column; border-radius: 20px; overflow: hidden; border: 1px solid var(--line); background: #fff; transition: box-shadow .4s, border-color .4s; } .mx-ccard:hover { box-shadow: var(--shadow); border-color: transparent; } .mx-ccard__media { position: relative; overflow: hidden; } .mx-ccard__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform 1.1s var(--ease-out); } .mx-ccard:hover .mx-ccard__media img { transform: scale(1.05); } .mx-work-card__tag { position: absolute; left: 18px; top: 18px; z-index: 1; padding: 6px 14px; border-radius: 100px; background: rgba(255, 255, 255, .92); color: var(--ink); font-size: .78rem; font-weight: 600; letter-spacing: .02em; backdrop-filter: blur(6px); } .mx-ccard__body { padding: 22px 24px 26px; } .mx-ccard .elementor-heading-title { font-size: 1.12rem; margin-bottom: 8px; letter-spacing: -.01em; } .mx-ccard__body .elementor-widget-text-editor { margin: 0; font-size: .92rem; color: var(--muted); line-height: 1.6; } /* 18. Process steps --------------------------------------------------------- */ .mx-steps { display: grid; gap: 18px; position: relative; } .mx-steps--4 { grid-template-columns: repeat(4, 1fr); } .mx-steps::before { content: ''; position: absolute; left: 0; right: 0; top: 33px; height: 1px; background: repeating-linear-gradient(90deg, var(--line) 0 6px, transparent 6px 12px); } .mx-step { position: relative; } .elementor-widget-text-editor.mx-step__num { display: grid; place-items: center; width: 66px; height: 66px; margin-bottom: 24px; border-radius: 50%; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; color: var(--ink); transition: background .4s, transform .5s var(--ease-out), box-shadow .4s, color .4s; position: relative; } .mx-step:hover .mx-step__num { background: var(--red); color: #fff; transform: scale(1.08); box-shadow: 0 0 0 8px rgba(213, 0, 0, .18); } .mx-step .elementor-heading-title { font-size: 1.05rem; color: var(--ink); margin-bottom: 8px; letter-spacing: -.01em; } .mx-step .elementor-widget-text-editor:not(.mx-step__num) { font-size: .92rem; color: var(--muted); } /* 19. Testimonials (Premium Testimonials carousel) ------------------------- */ .mx-tslider .premium-testimonial-box { text-align: left; } .mx-tslider .premium-testimonial-content-wrapper { position: relative; display: grid; grid-template-columns: 220px 1fr; gap: 20px clamp(28px, 5vw, 70px); align-items: center; } .mx-tslider .premium-testimonial-img-wrapper { grid-column: 1; grid-row: 1 / span 3; text-align: center; } .mx-tslider .premium-testimonial-img-wrapper img { width: 150px; height: 150px; border-radius: 50%; margin: 0 auto; } .mx-tslider .premium-testimonial-author-info { grid-column: 1; grid-row: 4; text-align: center; } .mx-tslider .premium-testimonial-person-name { font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; color: var(--ink); margin: 0; } .mx-tslider .premium-testimonial-job { font-size: .86rem; font-weight: 400; color: var(--muted); margin: 4px 0 0; line-height: 1.4; } .mx-tslider .premium-testimonial-text-wrapper { grid-column: 2; grid-row: 2; font-family: var(--font-head); font-size: clamp(1.02rem, 1.35vw, 1.2rem); line-height: 1.7; color: var(--ink); letter-spacing: -.01em; } .mx-tslider .premium-testimonial__rating-wrapper { grid-column: 2; grid-row: 1; } .mx-tslider .premium-testimonial-upper-quote, .mx-tslider .premium-testimonial-lower-quote { display: none; } .mx-tslider .slick-dots li button:before { color: var(--line); } .mx-tslider .slick-dots li.slick-active button:before { color: var(--red); } /* 20. Global presence (Premium World Clock) --------------------------------- */ .mx-bg { position: absolute; inset: 0; z-index: -2; } .mx-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .45; } .mx-global::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, var(--ink) 0%, rgba(12, 12, 17, .55) 50%, var(--ink) 100%); pointer-events: none; } .mx-places { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .mx-place { padding: 30px; border-radius: 22px; border: 1px solid rgba(255, 255, 255, .12); background: rgba(12, 12, 17, .5); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .mx-place__label { margin: 0 0 8px; font-size: .74rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #ff5a5a; } .mx-place .elementor-heading-title { font-size: 1.6rem; letter-spacing: -.03em; margin-bottom: 14px; color: #fff; } .mx-place__time { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; font-size: .9rem; color: #a9abb8; } .mx-place__address { font-size: .92rem; color: #a9abb8; margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid rgba(255, 255, 255, .1); } .mx-place__phone .elementor-icon-list-item > a { color: #fff; font-weight: 500; } .mx-place__phone .elementor-icon-list-icon { color: #ff5a5a; } .mx-place__time .premium-world-clock__time-wrapper { font-family: var(--font-head); font-size: 1.05rem; font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; } /* 21. Closing CTA ----------------------------------------------------------- */ .elementor .e-con.mx-cta2 { position: relative; overflow: hidden; isolation: isolate; padding-block: var(--section); background: #f2f2f5; } .elementor .e-con.mx-cta2__glow { position: absolute; z-index: -1; right: -8%; top: 50%; width: 46vw; height: 46vw; max-width: 720px; max-height: 720px; transform: translateY(-50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(213, 0, 0, .28), rgba(255, 90, 90, .12) 60%, transparent); filter: blur(10px); animation: mx-breathe 9s ease-in-out infinite alternate; } .mx-cta2__grid { display: grid; grid-template-columns: 1.3fr .7fr; gap: clamp(40px, 6vw, 96px); align-items: center; } .mx-cta2__title { font-size: clamp(2.3rem, 4.8vw, 4.2rem); font-weight: 600; line-height: 1.02; margin-bottom: 20px; max-width: 760px; } .mx-cta2__facts { display: flex; flex-direction: column; } .mx-cta2__fact { display: flex; flex-direction: row; align-items: baseline; gap: 18px; padding: 20px 0; border-bottom: 1px solid rgba(12, 12, 17, .1); } .mx-cta2__fact:first-child { border-top: 1px solid rgba(12, 12, 17, .1); } .mx-fact__value { min-width: 90px; font-family: var(--font-head); font-size: 2rem; font-weight: 600; letter-spacing: -.04em; color: var(--red); } .mx-fact__label { color: var(--muted); } /* 22. Footer ---------------------------------------------------------------- */ .elementor .e-con.mx-footer { position: relative; isolation: isolate; overflow: hidden; background: var(--ink); color: #a9abb8; font-size: .95rem; padding-top: 0; } .elementor .e-con.mx-footer__glow { position: absolute; z-index: -1; left: 50%; top: -340px; width: 900px; height: 500px; margin-left: -450px; border-radius: 50%; background: var(--red); filter: blur(140px); opacity: .25; } .mx-footer__grid { display: grid; grid-template-columns: 1.5fr .8fr 1fr 1.1fr; gap: 40px; padding-block: clamp(60px, 7vw, 96px) clamp(50px, 6vw, 76px); } .mx-footer__logo img { height: 46px; width: auto; margin-bottom: 22px; } .mx-footer__about { max-width: 380px; line-height: 1.75; } .mx-footer .elementor-widget-text-editor, .mx-footer .elementor-widget-icon-list { color: inherit; } .mx-footer__links .elementor-icon-list-items, .mx-footer__links ul { list-style: none; display: flex; flex-direction: column; gap: 11px; margin: 0; padding: 0; } .mx-footer__links a { position: relative; display: inline-block; color: #a9abb8; transition: color .3s, transform .3s var(--ease-out); } .mx-footer__links a:hover { color: #fff; transform: translateX(5px); } .mx-footer__office { margin-bottom: 16px; } .mx-footer__city { display: flex; align-items: center; gap: 10px; margin: 0 0 2px; color: #fff; font-weight: 500; } .mx-footer__phone a, .mx-footer__email a { color: #a9abb8; } .mx-footer__phone a:hover, .mx-footer__email a:hover { color: #fff; } .mx-flag { display: inline-grid; place-items: center; min-width: 28px; height: 20px; padding: 0 5px; border-radius: 5px; background: var(--red); color: #fff; font-size: .66rem; font-weight: 700; letter-spacing: .06em; } .mx-social .elementor-social-icon { width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .14); background: transparent !important; color: #fff; transition: background .3s, border-color .3s, transform .4s var(--ease-out); } .mx-social .elementor-social-icon i { color: #fff; font-size: 16px; } .mx-social .elementor-social-icon:hover { background: var(--red) !important; border-color: var(--red); transform: translateY(-3px); } .mx-social { margin-top: 24px; } .mx-footer__bottom { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; gap: 10px 30px; padding-block: 26px; border-top: 1px solid rgba(255, 255, 255, .08); font-size: .86rem; } .mx-footer__bottom a { color: #fff; } .mx-footer__meta { display: flex; flex-direction: row; gap: 24px; } /* 23. Responsive ------------------------------------------------------------ */ @media (max-width: 1200px) { .mx-logos { grid-template-columns: repeat(3, 1fr); } .mx-footer__grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 1100px) { .mx-hero__row { grid-template-columns: 1fr; } .mx-hero__mark { display: none; } } @media (max-width: 992px) { .mx-intro__grid, .mx-mosaic, .mx-cta2__grid, .mx-partners__grid { grid-template-columns: 1fr; } .mx-mosaic__intro { position: relative; top: 0; } .mx-hero__cards, .mx-pcards, .mx-places { grid-template-columns: 1fr; } .mx-pcard { min-height: 0; } .mx-tabs .e-n-tabs { grid-template-columns: 1fr; } .mx-tabs .e-n-tabs-heading { flex-direction: row; overflow-x: auto; scrollbar-width: none; gap: 8px; padding-bottom: 4px; } .mx-tabs .e-n-tab-title { width: auto; flex: none; grid-template-columns: auto auto; padding: 10px 16px; border-radius: 100px; border: 1px solid rgba(255, 255, 255, .14); } .mx-tabs .e-n-tab-title[aria-selected="true"] { box-shadow: none; background: var(--red); border-color: var(--red); } .mx-tabs .e-n-tab-title::after { display: none; } .mx-steps--4 { grid-template-columns: repeat(2, 1fr); } .mx-steps::before { display: none; } .mx-tslider .premium-testimonial-content-wrapper { grid-template-columns: 1fr; } .mx-tslider .premium-testimonial-img-wrapper, .mx-tslider .premium-testimonial-author-info, .mx-tslider .premium-testimonial-text-wrapper, .mx-tslider .premium-testimonial__rating-wrapper { grid-column: 1; grid-row: auto; text-align: left; } } @media (max-width: 680px) { .mx-hero__btns .mx-btn { flex: 1 1 100%; } .mx-hero__card { padding: 16px 46px 16px 18px; } .mx-hero__card-text { display: none; } .mx-ticks, .mx-steps--4 { grid-template-columns: 1fr; } .mx-logos { grid-template-columns: repeat(3, 1fr); } .mx-logos > .elementor-widget { height: 84px; padding: 10px 8px; } .mx-logos img { max-height: 36px; } .mx-mosaic__grid { gap: 10px; } .mx-mosaic__grid > :nth-child(even) { transform: none; } .mx-mosaic__tile { aspect-ratio: 3 / 4; } .mx-partners__logos { grid-template-columns: repeat(2, 1fr); gap: 10px; } .mx-partner { height: 104px; padding: 16px; } .mx-footer__grid { grid-template-columns: 1fr; } .mx-footer__bottom, .mx-footer__meta { flex-direction: column; gap: 6px; } } /* 24. Fixes after first visual review -------------------------------------- */ .e-con.e-grid { align-content: start; } .elementor-widget.mx-tabs { width: 100%; } .elementor .mx-tabs .e-n-tabs-heading .e-n-tab-title { background: transparent; border: 0; border-radius: 14px; color: #a9abb8; padding: 16px 18px; width: 100%; justify-content: flex-start; } .elementor .mx-tabs .e-n-tabs-heading .e-n-tab-title:hover { color: #fff; background: rgba(255, 255, 255, .04); } .elementor .mx-tabs .e-n-tabs-heading .e-n-tab-title[aria-selected="true"] { color: #fff; background: rgba(255, 255, 255, .07); box-shadow: inset 2px 0 0 var(--red); } .elementor .mx-tabs .e-n-tab-title .e-n-tab-title-text { text-align: left; } .elementor .mx-tabs .e-n-tabs-content { width: 100%; } .elementor .elementor-widget-button.mx-link.mx-link--light .elementor-button { color: #fff; } .elementor .elementor-widget-button.mx-link.mx-link--light .elementor-button:hover { color: #ff6b6b; } .elementor .mx-chips--dark .elementor-icon-list-items { margin: 0 0 26px; } .elementor .mx-chips--dark .elementor-icon-list-text { white-space: nowrap; } .mx-tile__counter .elementor-counter { align-items: flex-start; text-align: left; } .mx-tile__counter .elementor-counter-number-wrapper { justify-content: flex-start; } .elementor-widget-text-editor.mx-step__num { align-self: flex-start; width: 66px; } /* tabs: flex layout, tab backgrounds */ .elementor .mx-tabs .e-n-tabs { display: flex; flex-direction: row; gap: clamp(28px, 4vw, 56px); align-items: flex-start; } .elementor .mx-tabs .e-n-tabs-heading { flex: 0 0 min(380px, 32%); } .elementor .mx-tabs .e-n-tabs-content { flex: 1 1 0; min-width: 0; } .elementor .mx-tabs .e-n-tabs-content > .e-con { width: 100%; } .elementor .mx-tabs .e-n-tabs-heading .e-n-tab-title { background: transparent !important; box-shadow: none; } .elementor .mx-tabs .e-n-tabs-heading .e-n-tab-title:hover { background: rgba(255, 255, 255, .04) !important; } .elementor .mx-tabs .e-n-tabs-heading .e-n-tab-title[aria-selected="true"] { background: rgba(255, 255, 255, .07) !important; box-shadow: inset 2px 0 0 var(--red); } .elementor .mx-tabs .e-n-tab-title .e-n-tab-title-text { color: inherit; } .elementor .elementor-widget.mx-step__num { align-self: flex-start; width: 66px; height: 66px; } @media (max-width: 992px) { .elementor .mx-tabs .e-n-tabs { flex-direction: column; } .elementor .mx-tabs .e-n-tabs-heading { flex: none; width: 100%; } } .elementor .e-con > .elementor-widget.mx-tabs, .elementor .e-con > .elementor-widget.mx-hero__tabs, .elementor .e-con > .elementor-widget.mx-chips { width: 100%; } .elementor .elementor-widget-button.mx-link .elementor-button { white-space: nowrap; } .elementor .mx-tabs .e-n-tabs { width: 100%; flex: 1 1 100%; } .elementor-widget.mx-tabs { display: block; grid-template-columns: none; } /* fixed-size widgets (Elementor's `.e-con > .elementor-widget { width:auto }` would otherwise win) */ .elementor .elementor-widget.mx-tabs__icon { width: 54px; height: 54px; } .elementor .elementor-widget.mx-callout__icon { width: 44px; height: 44px; } .elementor .elementor-widget.mx-mega__icon { width: 46px; height: 46px; } .elementor .elementor-widget.mx-hero__card-arrow { width: 18px; height: 18px; } .elementor .elementor-widget.mx-pcard__logo { height: 40px; } .elementor .elementor-widget.mx-pcard__logo img { height: 34px; width: auto; } .elementor .elementor-widget.mx-footer__logo img { height: 46px; width: auto; } .mx-tabs__body .mx-chips { margin-top: 6px; } .mx-nav .elementskit-menu-container, .mx-nav .elementskit-navbar-nav { height: auto; } .mx-nav .elementskit-navbar-nav > li > a { height: auto; line-height: 1.4; } /* 25. Header nav (ElementsKit) -------------------------------------------- */ .mx-header .elementor-widget.mx-nav { align-items: center; } .elementor .mx-nav .elementskit-navbar-nav { padding: 5px; gap: 4px; align-items: center; } .elementor .mx-nav .elementskit-navbar-nav > li > a { padding: 8px 16px; display: inline-flex; align-items: center; height: auto; line-height: 1.4; } .mx-nav .elementskit-navbar-nav > li.elementskit-dropdown-has > a { padding-right: 10px; } .mx-nav .elementskit-navbar-nav > li > a > .elementskit-submenu-indicator { display: inline-block; position: static; width: 16px; height: 16px; margin: 0 0 0 6px; font-size: 0; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; } .mx-nav .elementskit-navbar-nav > li > a > .elementskit-submenu-indicator::before { content: none; } /* 26. Testimonials slider layout ------------------------------------------ */ .mx-tslider { position: relative; padding-bottom: 96px; } .mx-tslider .premium-testimonial-box, .mx-tslider .premium-testimonial-container { text-align: left; } .mx-tslider .premium-testimonial-content-wrapper { display: grid; grid-template-columns: 220px 1fr; grid-template-areas: "img rating" "author text"; grid-template-rows: auto auto; gap: 0 clamp(28px, 5vw, 70px); align-items: start; } .mx-tslider .premium-testimonial-img-wrapper { grid-area: img; justify-self: center; align-self: end; margin-bottom: 18px; } .mx-tslider .premium-testimonial-author-info { grid-area: author; justify-self: center; text-align: center; } .mx-tslider .premium-testimonial__rating-wrapper { grid-area: rating; align-self: end; margin-bottom: 18px; } .mx-tslider .premium-testimonial-text-wrapper { grid-area: text; text-align: left; align-self: start; } .mx-tslider .premium-testimonial-text-wrapper > div { text-align: left; } .mx-tslider .premium-fb-rev-stars { display: flex; gap: 4px; } .mx-tslider .premium-fb-rev-star svg { width: 20px; height: 20px; fill: #ffb400; } .mx-tslider .slick-arrow { position: absolute; top: auto; bottom: 0; width: 54px; height: 54px; border-radius: 50%; border: 1.5px solid var(--line); background: #fff; color: var(--ink); display: grid; place-items: center; transform: none; padding: 0; transition: background .3s, border-color .3s, color .3s; } .mx-tslider .slick-arrow:hover { background: var(--red); border-color: var(--red); color: #fff; } .mx-tslider .slick-prev { left: auto; right: 66px; } .mx-tslider .slick-next { right: 0; } .mx-tslider .slick-dots { position: absolute; left: 0; bottom: 22px; display: flex; gap: 8px; width: auto; } .mx-tslider .slick-dots li { margin: 0; width: auto; height: auto; } .mx-tslider .slick-dots li button { width: 10px; height: 10px; padding: 0; border-radius: 10px; background: var(--line); font-size: 0; transition: width .4s var(--ease-out), background .3s; } .mx-tslider .slick-dots li button::before { content: none; } .mx-tslider .slick-dots li.slick-active button { width: 34px; background: var(--red); } /* 27. Case-study carousel arrows ------------------------------------------ */ .mx-carousel { position: relative; } .mx-carousel__slider { position: static; } .mx-carousel__slider .premium-carousel-wrapper { position: relative; } .mx-carousel__slider .premium-carousel-nav-arrow-prev, .mx-carousel__slider .premium-carousel-nav-arrow-next { position: absolute; top: -77px; z-index: 3; } .mx-carousel__slider .premium-carousel-nav-arrow-prev { right: 208px; left: auto; } .mx-carousel__slider .premium-carousel-nav-arrow-next { right: 154px; left: auto; } .mx-carousel__slider .carousel-arrow { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--ink); font-size: 14px; transition: background .3s, color .3s, border-color .3s; position: static; transform: none; } .mx-carousel__slider .carousel-arrow:hover { background: var(--ink); border-color: var(--ink); color: #fff; } .mx-carousel__slider .premium-carousel-inner { margin: 0 -10px; } /* 28. Refinements ---------------------------------------------------------- */ .mx-header .elementor-widget.mx-nav { display: flex; justify-content: center; align-items: center; } .mx-header .mx-nav .ekit-wid-con, .mx-header .mx-nav .elementskit-menu-container { width: auto; height: auto; } .mx-header .mx-nav .elementskit-navbar-nav { width: auto; } .elementor .mx-carousel__slider .premium-carousel-wrapper .premium-carousel-nav-arrow-prev, .elementor .mx-carousel__slider .premium-carousel-wrapper .premium-carousel-nav-arrow-next { position: absolute !important; top: -77px !important; bottom: auto !important; transform: none !important; z-index: 3; } .elementor .mx-carousel__slider .premium-carousel-wrapper .premium-carousel-nav-arrow-prev { right: 208px !important; left: auto !important; } .elementor .mx-carousel__slider .premium-carousel-wrapper .premium-carousel-nav-arrow-next { right: 154px !important; left: auto !important; } .elementor .mx-carousel__slider .premium-carousel-wrapper .carousel-arrow { position: static !important; display: grid; place-items: center; width: 46px !important; height: 46px !important; border-radius: 50% !important; border: 1px solid var(--line) !important; background: #fff !important; color: var(--ink) !important; font-size: 14px; padding: 0 !important; } .elementor .mx-carousel__slider .premium-carousel-wrapper .carousel-arrow:hover { background: var(--ink) !important; border-color: var(--ink) !important; color: #fff !important; } .elementor .mx-tslider .premium-testimonial-box .slick-arrow { position: absolute !important; top: auto !important; bottom: 0 !important; width: 54px !important; height: 54px !important; border-radius: 50% !important; border: 1.5px solid var(--line) !important; background: #fff !important; color: var(--ink) !important; display: grid !important; place-items: center; transform: none !important; padding: 0 !important; margin: 0 !important; opacity: 1 !important; } .elementor .mx-tslider .premium-testimonial-box .slick-arrow:hover { background: var(--red) !important; border-color: var(--red) !important; color: #fff !important; } .elementor .mx-tslider .premium-testimonial-box .slick-prev { left: auto !important; right: 66px !important; } .elementor .mx-tslider .premium-testimonial-box .slick-next { right: 0 !important; left: auto !important; } .elementor .mx-tslider .premium-testimonial-text-wrapper, .elementor .mx-tslider .premium-testimonial-text-wrapper > div { font-weight: 400; text-align: left; } /* 29. Grids: rows come from content, not Elementor's default 2-row template */ .elementor .e-con.e-grid { grid-template-rows: none !important; grid-auto-rows: auto; } .mx-cta2__title { --mb: 20px; } /* Premium World Clock -> plain "1:41 PM" text */ .mx-place__time .premium-world-clock__clock-wrapper { background: none; border: 0; padding: 0; box-shadow: none; } .mx-place__time .premium-world-clock__time-wrapper { font-family: var(--font-head) !important; font-size: 1.05rem !important; font-weight: 600 !important; color: #fff !important; font-style: normal !important; letter-spacing: 0; border: 0 !important; background: none !important; padding: 0 !important; box-shadow: none !important; display: inline-flex; align-items: baseline; gap: 4px; } .mx-place__time .premium-world-clock__hand, .mx-place__time .premium-world-clock__separator, .mx-place__time .premium-world-clock__meridiem { font: inherit !important; font-style: normal !important; color: inherit !important; background: none !important; border: 0 !important; padding: 0 !important; } .mx-place__time .premium-world-clock__hours::after { content: none; } .mx-place__time-label { font-size: .9rem; color: #a9abb8; } .elementor .elementor-widget.mx-place__time-label::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 10px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 0 rgba(34, 197, 94, .7); animation: mx-ping3 2s var(--ease) infinite; } @keyframes mx-ping3 { 0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .7); } 80%, 100% { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); } } .mx-social .elementor-social-icon svg { fill: #fff; width: 16px; height: 16px; } .mx-social .elementor-grid { gap: 10px; } .mx-social .elementor-grid-item { margin: 0; } .mx-footer__city .mx-flag { margin-right: 10px; } .elementor .elementor-widget.mx-footer__logo { align-self: flex-start; text-align: left; } .mx-social .elementor-social-icons-wrapper { margin: 0; } .elementor .elementor-widget.mx-social { margin-top: 24px; } .mx-footer__links ul.menu, .mx-footer__links .menu { list-style: none; display: flex; flex-direction: column; gap: 11px; margin: 0; padding: 0; } .mx-header .elementor-widget.mx-nav { align-self: center; } /* 30. Inner pages: hero ----------------------------------------------------- */ .elementor .e-con.mx-hero { flex-direction: column; justify-content: flex-end; } .elementor .e-con.mx-hero__media { position: absolute; inset: 0; z-index: -3; } .elementor .elementor-widget.mx-hero__img { width: 100%; height: 100%; animation: mx-kenburns 18s var(--ease) both; } .mx-hero__img img { width: 100%; height: 100%; object-fit: cover; } .elementor .e-con.mx-hero__shade { position: absolute; inset: 0; z-index: -2; background: radial-gradient(70% 90% at 0% 100%, rgba(213, 0, 0, .38), transparent 60%), linear-gradient(180deg, rgba(12, 12, 17, .7) 0%, rgba(12, 12, 17, .55) 40%, rgba(12, 12, 17, .92) 100%), linear-gradient(90deg, rgba(12, 12, 17, .85) 0%, rgba(12, 12, 17, .25) 75%); } .mx-hero:not(.mx-hero--home) .mx-hero__title { max-width: 960px; --mb: 22px; font-size: clamp(2.2rem, 4.8vw, 4rem); line-height: 1.06; letter-spacing: -.04em; } .mx-hero:not(.mx-hero--home) .mx-hero__title .elementor-heading-title { line-height: 1.06; letter-spacing: -.04em; text-wrap: balance; } .mx-hero__text { max-width: 680px; font-size: clamp(1.05rem, 1.4vw, 1.22rem); color: #c9cad4; } .mx-hero--home .mx-hero__text { font-size: 1.02rem; max-width: 560px; } .mx-crumbs { margin-bottom: 28px; } .mx-crumbs .rank-math-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; font-size: .84rem; color: #a9abb8; } .mx-crumbs .rank-math-breadcrumb p { margin: 0; } .mx-crumbs a { color: #e3e4ea; } .mx-crumbs a:hover { color: #ff5a5a; } .mx-crumbs .separator { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--red); font-size: 0; } .mx-crumbs .last { color: #a9abb8; } .mx-eyebrow--light { color: #ff5a5a; } /* 31. Inner pages: layout + components ------------------------------------- */ .mx-split { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(40px, 6vw, 96px); } .mx-split--top { align-items: start; } .mx-split--reverse > .mx-split__media { order: 2; } .mx-split__body > :last-child { margin-bottom: 0; } .mx-media__frame { position: relative; overflow: hidden; border-radius: var(--radius-lg); box-shadow: var(--shadow); } .mx-media__frame .elementor-widget-image, .mx-media__frame img { width: 100%; } .elementor .e-con.mx-media__accent { position: absolute; z-index: -1; width: 46%; aspect-ratio: 1; right: -24px; bottom: -24px; min-height: 0; } .elementor .e-con.mx-media__small { position: absolute; left: -34px; bottom: -40px; width: 46%; border-radius: var(--radius); overflow: hidden; border: 8px solid #fff; box-shadow: var(--shadow-lg); } .elementor .e-con.mx-badge { position: absolute; right: 28px; top: 28px; z-index: 2; width: auto; } .elementor .e-con.mx-badge--bottom { top: auto; bottom: 28px; } .elementor .e-con.mx-badge--left { right: auto; left: 28px; } .mx-badge__text { font-size: .82rem; font-weight: 500; line-height: 1.3; } .mx-badge__num { font-family: var(--font-head); font-size: 2.3rem; font-weight: 700; line-height: 1; letter-spacing: -.04em; } .mx-badge--light .mx-badge__num { color: var(--red); } /* icon tiles */ .elementor .elementor-widget-icon[class*="mx-"] { display: grid; place-items: center; } .elementor .elementor-widget.mx-feature__icon { width: 50px; height: 50px; flex: none; border-radius: 14px; background: var(--red-soft); color: var(--red); transition: transform .4s var(--ease-out), background .3s, color .3s; } .elementor .elementor-widget.mx-value__icon, .elementor .elementor-widget.mx-related__icon { width: 52px; height: 52px; border-radius: 14px; margin-bottom: 20px; background: var(--red-soft); color: var(--red); } .elementor .elementor-widget.mx-mission__icon { width: 60px; height: 60px; border-radius: 18px; margin-bottom: 26px; background: rgba(255, 255, 255, .1); color: #fff; } .mx-feature__icon svg, .mx-value__icon svg, .mx-related__icon svg { width: 24px; height: 24px; } .mx-mission__icon svg { width: 28px; height: 28px; } .mx-features { display: grid; gap: 26px 30px; margin: 34px 0 6px; } .mx-feature .elementor-heading-title { font-size: 1.02rem; margin: 2px 0 6px; letter-spacing: -.01em; } .mx-feature .elementor-widget-text-editor p { font-size: .93rem; color: var(--muted); margin: 0; line-height: 1.6; } .mx-features--cards .mx-feature--cta .elementor-widget-text-editor p { color: rgba(255, 255, 255, .85); margin-bottom: 20px; } .mx-features--3 { gap: 18px; margin-top: clamp(48px, 6vw, 80px); } /* checklist + pills */ .mx-checklist .elementor-icon-list-items { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 22px; margin: 26px 0 0; } .mx-checklist .elementor-icon-list-item { position: relative; padding-left: 32px; font-size: .97rem; font-weight: 500; color: var(--text); } .mx-checklist .elementor-icon-list-item::before { content: ''; position: absolute; left: 0; top: .2em; width: 20px; height: 20px; border-radius: 50%; background: var(--red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5L20 7'/%3E%3C/svg%3E") center / 12px no-repeat; } .mx-pills .elementor-icon-list-items { display: flex; flex-wrap: wrap; gap: 8px; } .mx-pills .elementor-icon-list-item { padding: 7px 14px; border-radius: 100px; background: var(--soft); border: 1px solid var(--line); font-size: .85rem; font-weight: 500; color: var(--text); transition: background .3s, color .3s, border-color .3s; } .mx-pills .elementor-icon-list-item:hover { background: var(--red); border-color: var(--red); color: #fff; } .mx-section--dark .mx-pills .elementor-icon-list-item { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .12); color: #e3e4ea; } /* stats */ .mx-stats { display: grid; gap: 1px; } .mx-stats--band { background: var(--line); border-radius: var(--radius-lg); overflow: hidden; } .mx-stats--band .mx-stat { background: #fff; padding: clamp(28px, 3vw, 44px); text-align: center; } .mx-stats--dark { background: rgba(255, 255, 255, .08); border-radius: var(--radius-lg); overflow: hidden; } .mx-stats--dark .mx-stat { background: var(--ink-2); padding: clamp(28px, 3vw, 44px); text-align: center; } .mx-stat__counter .elementor-counter { align-items: center; text-align: center; } .mx-stat__counter .elementor-counter-number-wrapper { justify-content: center; font-family: var(--font-head); font-weight: 600; font-size: clamp(2.2rem, 3.6vw, 3.2rem); line-height: 1; letter-spacing: -.04em; color: var(--ink); } .mx-stat__counter .elementor-counter-number-suffix { color: var(--red); margin-left: 2px; } .mx-stat__counter .elementor-counter-title { margin: 10px 0 0; font-size: .9rem; font-weight: 400; color: var(--muted); letter-spacing: 0; } .mx-stats--dark .mx-stat__counter .elementor-counter-number-wrapper { color: #fff; } .mx-stats--dark .mx-stat__counter .elementor-counter-title { color: #a9abb8; } /* mission / values / team */ .mx-mission-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-bottom: 22px; } .mx-mission .elementor-heading-title { color: #fff; font-size: clamp(1.5rem, 2.4vw, 2rem); margin-bottom: 14px; } .mx-mission .elementor-widget-text-editor p { margin: 0; font-size: 1.02rem; } .mx-values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .mx-value .elementor-heading-title { font-size: 1.12rem; margin-bottom: 8px; } .mx-value .elementor-widget-text-editor p { margin: 0; font-size: .94rem; color: var(--muted); } .mx-team { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; } .mx-member { text-align: center; align-items: center; } .elementor .elementor-widget.mx-avatar { width: 120px; height: 120px; margin: 0 auto 6px; } .mx-avatar img { width: 120px; height: 120px; border-radius: 50%; } .mx-member .elementor-heading-title { font-size: 1.12rem; margin: 6px 0 4px; } .mx-member .elementor-widget-text-editor p { margin: 0; font-size: .9rem; color: var(--red); font-weight: 500; } /* FAQ accordion */ .mx-faq .mx-split { grid-template-columns: .8fr 1.2fr; } .mx-faq__head { position: sticky; top: 110px; } .mx-faq__head .mx-title { font-size: clamp(1.9rem, 3.4vw, 2.8rem); } .mx-faq__list .elementor-accordion { display: flex; flex-direction: column; gap: 12px; } .mx-faq__list .elementor-accordion-item { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; transition: border-color .3s, box-shadow .3s; overflow: hidden; } .mx-faq__list .elementor-accordion-item:has(.elementor-active) { border-color: transparent; box-shadow: var(--shadow); } .mx-faq__list .elementor-tab-title { display: flex; flex-direction: row-reverse; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 26px; border: 0; background: none; cursor: pointer; } .mx-faq__list .elementor-accordion-icon { display: grid; place-items: center; flex: none; width: 36px; height: 36px; margin: 0; border-radius: 50%; background: var(--red-soft); color: var(--red); transition: transform .4s var(--ease-out), background .3s, color .3s; } .mx-faq__list .elementor-accordion-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; } .mx-faq__list .elementor-accordion-icon .elementor-accordion-icon-opened { display: none; } .mx-faq__list .elementor-tab-title.elementor-active .elementor-accordion-icon { transform: rotate(45deg); background: var(--red); color: #fff; } .mx-faq__list .elementor-tab-title.elementor-active .elementor-accordion-icon .elementor-accordion-icon-closed { display: block; } .mx-faq__list .elementor-accordion-title { margin: 0; font-family: var(--font-head); font-size: 1.05rem; font-weight: 600; line-height: 1.4; color: var(--ink); letter-spacing: -.01em; transition: color .3s; flex: 1; } .mx-faq__list .elementor-tab-title:hover .elementor-accordion-title, .mx-faq__list .elementor-tab-title.elementor-active .elementor-accordion-title { color: var(--red); } .mx-faq__list .elementor-tab-content { padding: 0 26px 24px; border: 0; color: var(--muted); font-size: .98rem; } .mx-faq__list .elementor-tab-content p { margin: 0; } .mx-faq__head .elementor-widget-text-editor { color: var(--muted); } /* CTA card */ .mx-cta-wrap { padding-block: var(--section); } .elementor .e-con.mx-cta { position: relative; isolation: isolate; overflow: hidden; padding: clamp(48px, 7vw, 96px) clamp(28px, 6vw, 90px); border-radius: clamp(24px, 3vw, 40px); color: #fff; background: radial-gradient(90% 120% at 100% 0%, #ff3030 0%, var(--red) 45%, #730000 100%); display: grid; grid-template-columns: 1.3fr .7fr; gap: 30px 60px; align-items: center; } .elementor .e-con.mx-cta__bg { position: absolute; inset: 0; z-index: -1; } .mx-cta__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .14; mix-blend-mode: luminosity; } .mx-cta .elementor-heading-title { font-size: clamp(2rem, 4vw, 3.3rem); font-weight: 600; letter-spacing: -.04em; margin-bottom: 18px; color: #fff; } .mx-cta .elementor-heading-title span { color: #fff; text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 8px; } .mx-cta .elementor-widget-text-editor { font-size: 1.1rem; color: rgba(255, 255, 255, .86); max-width: 620px; } .mx-cta .elementor-widget-text-editor p { margin: 0; } .mx-cta .mx-actions { margin: 0; flex-direction: column; align-items: flex-end; } /* strip, related, industries */ .mx-strip .elementor-heading-title { color: #fff; font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin: 0 0 6px; } .mx-strip .elementor-widget-text-editor { color: #a9abb8; } .mx-strip .elementor-widget-text-editor p { margin: 0; } .mx-related__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; } .mx-related__card .elementor-heading-title { font-size: 1.08rem; margin-bottom: 8px; } .mx-related__card .elementor-widget-text-editor p { font-size: .9rem; color: var(--muted); margin: 0; } .elementor .elementor-widget.mx-related__arrow { position: absolute; right: 24px; top: 28px; width: 20px; height: 20px; color: var(--muted-light); } .mx-related__card:hover .mx-related__arrow { color: var(--red); transform: translate(3px, -3px); } .mx-industries { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(255, 255, 255, .09); border: 1px solid rgba(255, 255, 255, .09); border-radius: var(--radius-lg); overflow: hidden; } .mx-industry { position: relative; padding: 26px 24px; background: rgba(12, 12, 17, .72); color: #e3e4ea; font-family: var(--font-head); font-weight: 600; font-size: 1rem; transition: background .4s, color .4s; } .mx-industry .elementor-widget-text-editor p { margin: 0; } .mx-industry__icon { color: #ff4d4d; } .mx-industry__icon svg { width: 26px; height: 26px; } .mx-industry:hover { background: var(--red); color: #fff; } .mx-industry:hover .mx-industry__icon { color: #fff; } .mx-industries-wrap .mx-bg { position: absolute; inset: 0; z-index: -2; } .mx-industries-wrap .mx-bg img { width: 100%; height: 115%; object-fit: cover; opacity: .38; } /* responsive for inner components */ @media (max-width: 992px) { .mx-split, .mx-mission-grid, .mx-cta { grid-template-columns: 1fr; } .mx-split--reverse > .mx-split__media { order: 0; } .mx-faq .mx-split { grid-template-columns: 1fr; } .mx-faq__head { position: relative; top: 0; } .mx-team, .mx-values, .mx-industries, .mx-stats { grid-template-columns: repeat(2, 1fr); } .mx-cta .mx-actions { align-items: flex-start; flex-direction: row; } .elementor .e-con.mx-media__small { left: auto; right: -10px; } } @media (max-width: 680px) { .mx-features, .mx-checklist .elementor-icon-list-items, .mx-team, .mx-values, .mx-industries, .mx-stats { grid-template-columns: 1fr; } .elementor .e-con.mx-media__small { display: none; } } /* 32. Widget max-widths (Elementor's own `max-width:100%` rule needs a stronger selector) */ .elementor .elementor-widget.mx-hero__text { max-width: 680px; } .elementor .elementor-widget.mx-hero--home .mx-hero__text, .mx-hero--home .elementor-widget.mx-hero__text { max-width: 560px; } .elementor .elementor-widget.mx-hero__lead { max-width: 560px; } .elementor .elementor-widget.mx-lead { max-width: 680px; } .mx-head--center .elementor-widget.mx-lead { margin-inline: auto; } .elementor .elementor-widget.mx-cta2__title { max-width: 760px; } .elementor .elementor-widget.mx-footer__about { max-width: 380px; } .elementor .mx-hero:not(.mx-hero--home) .elementor-widget.mx-hero__title { max-width: 960px; } .mx-crumbs .rank-math-breadcrumb p { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; } .mx-crumbs .rank-math-breadcrumb { display: block; font-size: .84rem; color: #a9abb8; } /* icons inherit the colour of their tile */ .elementor-widget-icon[class*="mx-"] .elementor-icon { color: inherit; } .elementor-widget-icon[class*="mx-"] .elementor-icon svg { color: inherit; } /* 33. Fixes from inner-page review ------------------------------------------ */ .mx-split > .mx-split__media { align-self: center; } .mx-split--top > .mx-split__media { align-self: start; } .mx-checklist .elementor-icon-list-item { align-items: flex-start; } .mx-checklist .elementor-icon-list-text { line-height: 1.5; } .mx-svc-block .elementor-widget.mx-svc-block__num { font-family: var(--font-head); font-size: clamp(4rem, 8vw, 7rem); font-weight: 700; line-height: .8; letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 1.5px var(--line); margin-bottom: 16px; display: block; } .mx-svc-block__num p { margin: 0; line-height: .8; } .mx-svc-block { padding-block: clamp(64px, 8vw, 120px); border-bottom: 1px solid var(--line); } .mx-svc-block:nth-of-type(even) { background: var(--soft); } .mx-section--dark .elementor-widget-text-editor.mx-step__num { background: var(--ink-3); border-color: rgba(255, 255, 255, .14); color: #fff; box-shadow: none; } .mx-section--dark .mx-step .elementor-heading-title { color: #fff; } .mx-section--dark .mx-step .elementor-widget-text-editor:not(.mx-step__num) p { color: #a9abb8; } .mx-section--dark .mx-steps::before { background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .25) 0 6px, transparent 6px 12px); } .mx-process-head { align-items: end; margin-bottom: clamp(48px, 6vw, 76px); } .mx-process-head .mx-title { margin-bottom: 0; } .mx-quote { position: relative; margin: 28px 0 0; padding: 26px 30px 26px 34px; border-left: 3px solid var(--red); background: rgba(213, 0, 0, .05); border-radius: 0 var(--radius) var(--radius) 0; } .mx-quote p { margin: 0; font-family: var(--font-head); font-size: 1.08rem; font-weight: 500; font-style: italic; line-height: 1.6; color: var(--ink); } .mx-section--dark .mx-quote { background: rgba(255, 255, 255, .04); } .mx-section--dark .mx-quote p { color: #fff; } .mx-results { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 32px; } .mx-result { padding: 22px 20px; border-radius: var(--radius); background: var(--soft); border: 1px solid var(--line); } .mx-result__value p { margin: 0; font-family: var(--font-head); font-size: clamp(1.8rem, 2.8vw, 2.4rem); font-weight: 700; letter-spacing: -.04em; line-height: 1; color: var(--red); } .mx-result__label p { margin: 8px 0 0; font-size: .85rem; color: var(--muted); line-height: 1.4; } .mx-faq__list .elementor-accordion-icon .elementor-accordion-icon-opened { display: none !important; } .mx-faq__list .elementor-accordion-icon .elementor-accordion-icon-closed { display: grid !important; place-items: center; } .elementor .mx-faq__list .elementor-tab-title .elementor-accordion-icon { width: 36px; height: 36px; align-self: center; flex: none; } .mx-faq__list .elementor-accordion-icon svg { width: 18px; height: 18px; } .mx-mt { margin-top: 20px; } @media (max-width: 680px) { .mx-results { grid-template-columns: 1fr; } } /* 34. Products ------------------------------------------------------------- */ .elementor .e-con.mx-product__grid { align-items: start; grid-template-columns: .85fr 1.15fr; gap: clamp(36px, 5vw, 80px); } .elementor .e-con.mx-product--alt .mx-product__grid { grid-template-columns: 1.15fr .85fr; } .mx-product { padding-block: clamp(64px, 8vw, 110px); border-bottom: 1px solid var(--line); } .mx-product:last-of-type { border-bottom: 0; } .elementor .e-con.mx-product__brand { position: sticky; top: 110px; align-self: start; overflow: hidden; isolation: isolate; padding: clamp(30px, 4vw, 48px); border-radius: var(--radius-lg); color: #fff; background: var(--ink); } .elementor .e-con.mx-product__brand-bg { position: absolute; inset: 0; z-index: -1; } .mx-product__brand-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .28; } .mx-product__brand::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(160deg, rgba(12, 12, 17, .3), rgba(12, 12, 17, .95) 70%), radial-gradient(80% 60% at 100% 0, rgba(213, 0, 0, .5), transparent 70%); } .elementor .elementor-widget.mx-product__logo { height: 48px; --mb: 70px; } .mx-product__logo img { height: 42px; width: auto; max-width: 240px; object-fit: contain; } .elementor .elementor-widget.mx-product__brandmark { --mb: 24px; margin-top: 4px; } .mx-product__brandmark img { height: 52px; width: auto; max-width: 300px; object-fit: contain; } .elementor .elementor-widget.mx-product__type { display: inline-block; width: auto; align-self: flex-start; padding: 6px 14px; border-radius: 100px; background: var(--red); font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; --mb: 18px; } .mx-product__type p { margin: 0; } .mx-product__name .elementor-heading-title { color: #fff; font-size: clamp(2.2rem, 4vw, 3.2rem); font-weight: 700; letter-spacing: -.04em; } .mx-product__name { --mb: 12px; } .mx-product__tagline { font-size: 1.08rem; color: #d1d2da; } .mx-product__tagline p { margin: 0; } .mx-product__brand .mx-actions { margin-top: 28px; } .mx-product__desc { font-size: 1.04rem; color: var(--muted); --mb: 34px; } .mx-product .mx-features { margin-top: 0; } /* 35. Case studies + filters ------------------------------------------------ */ .mx-filter { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: clamp(36px, 4vw, 54px); } .mx-filter .elementor-widget-button .elementor-button { padding: 11px 22px; min-height: 0; border-radius: 100px; border: 1.5px solid var(--line); background: #fff; font-family: var(--font-head); font-size: .88rem; font-weight: 600; color: var(--text); transition: background .3s, color .3s, border-color .3s, transform .3s var(--ease-out); box-shadow: none; } .mx-filter .elementor-widget-button .elementor-button:hover { border-color: var(--red); color: var(--red); background: #fff; } .mx-filter .elementor-widget-button .elementor-button[aria-pressed="true"], .mx-filter .elementor-widget-button[aria-pressed="true"] .elementor-button { background: var(--red); border-color: var(--red); color: #fff; box-shadow: var(--shadow-red); } .mx-cases { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.4vw, 32px) clamp(18px, 2vw, 28px); } .mx-cases .mx-work-card[hidden] { display: none; } .mx-work-card { position: relative; display: flex; flex-direction: column; } .mx-work-card__media { position: relative; overflow: hidden; border-radius: var(--radius-lg); aspect-ratio: 4 / 3.4; margin-bottom: 22px; } .mx-work-card__media .elementor-widget-image, .mx-work-card__media img { width: 100%; height: 100%; object-fit: cover; } .mx-work-card__media img { transition: transform 1.1s var(--ease-out); } .mx-work-card:hover .mx-work-card__media img { transform: scale(1.07); } .mx-work-card .elementor-heading-title { font-size: 1.3rem; margin-bottom: 8px; } .mx-work-card .elementor-widget-text-editor p { color: var(--muted); font-size: .95rem; margin: 0; } /* 36. Technologies ---------------------------------------------------------- */ .mx-tech-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .mx-tech-card { padding: 30px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); transition: transform .4s var(--ease-out), box-shadow .4s; } .mx-tech-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); } .mx-tech-card__head { margin-bottom: 22px; } .elementor .elementor-widget.mx-tech-card__icon { width: 48px; height: 48px; flex: none; border-radius: 14px; background: var(--ink); color: #fff; } .mx-tech-card__icon svg { width: 24px; height: 24px; } .mx-tech-card .elementor-heading-title { margin: 0; font-size: 1.12rem; } .mx-tech-card__head .elementor-widget-text-editor p { margin: 4px 0 0; font-size: .88rem; color: var(--muted); line-height: 1.5; } .mx-bysvc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; } .mx-bysvc { padding: 30px; border-radius: 22px; border: 1px solid var(--line); background: #fff; transition: box-shadow .4s, border-color .4s; } .mx-bysvc:hover { box-shadow: var(--shadow); border-color: transparent; } .mx-bysvc__head { margin-bottom: 14px; } .elementor .elementor-widget.mx-bysvc__icon { width: 46px; height: 46px; border-radius: 13px; background: var(--red-soft); color: var(--red); flex: none; } .mx-bysvc__icon svg { width: 24px; height: 24px; } .mx-bysvc .elementor-heading-title { margin: 0; font-size: 1.2rem; } .mx-bysvc > .elementor-widget-text-editor p { color: var(--muted); font-size: .95rem; } .mx-bysvc .mx-pills { margin-bottom: 22px; } .mx-principles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .mx-principle { padding-top: 26px; border-top: 2px solid var(--red); } .mx-principle__num p { font-family: var(--font-head); font-size: .85rem; font-weight: 600; color: var(--red); margin: 0; } .mx-principle .elementor-heading-title { font-size: 1.3rem; margin: 10px 0 14px; } .mx-principle__quote p { margin: 0 0 16px; color: var(--muted); font-size: 1rem; line-height: 1.7; } .mx-principle__cap p { margin: 0; font-size: .82rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); } @media (max-width: 992px) { .mx-tech-grid, .mx-cases, .mx-principles { grid-template-columns: repeat(2, 1fr); } .mx-bysvc-grid { grid-template-columns: 1fr; } .elementor .e-con.mx-product__grid, .elementor .e-con.mx-product--alt .mx-product__grid { grid-template-columns: 1fr; } .elementor .e-con.mx-product__brand { position: relative; top: 0; } } @media (max-width: 680px) { .mx-tech-grid, .mx-cases, .mx-principles { grid-template-columns: 1fr; } } /* 37. Contact -------------------------------------------------------------- */ .mx-offices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .mx-office { position: relative; overflow: hidden; padding: 36px 32px; border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--line); transition: transform .45s var(--ease-out), box-shadow .45s; } .mx-office:hover { transform: translateY(-6px); box-shadow: var(--shadow); } .mx-office > * { position: relative; } .elementor .elementor-widget.mx-office__code { position: absolute; right: 18px; top: 4px; z-index: 0; font-family: var(--font-head); font-size: 5.5rem; font-weight: 700; letter-spacing: -.05em; color: var(--soft); line-height: 1; } .mx-office__code p { margin: 0; } .elementor .elementor-widget.mx-office__label { display: inline-block; width: auto; align-self: flex-start; padding: 5px 12px; border-radius: 100px; background: var(--red-soft); color: var(--red); font-size: .76rem; font-weight: 600; letter-spacing: .04em; --mb: 18px; } .mx-office__label p { margin: 0; } .mx-office .elementor-heading-title { font-size: 1.35rem; margin-bottom: 14px; } .mx-office__address { color: var(--muted); font-size: .96rem; --mb: 20px; } .mx-office__address p { margin: 0; } .mx-office__links .elementor-icon-list-items { display: flex; flex-direction: column; gap: 8px; padding-top: 18px; border-top: 1px solid var(--line); } .mx-office__links .elementor-icon-list-item > a { display: inline-flex; align-items: center; gap: 10px; font-weight: 500; font-size: .95rem; color: var(--text); } .mx-office__links .elementor-icon-list-icon { color: var(--red); } .mx-office__links .elementor-icon-list-icon svg { width: 17px; height: 17px; } .elementor .e-con.mx-contact { display: grid; grid-template-columns: 1.35fr .65fr; gap: clamp(28px, 4vw, 56px); align-items: start; } .mx-contact__form { padding: clamp(28px, 4vw, 52px); border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); } .elementor .e-con.mx-contact__aside { position: sticky; top: 110px; padding: clamp(28px, 3vw, 40px); border-radius: var(--radius-lg); background: var(--ink); color: #c9cad4; overflow: hidden; isolation: isolate; } .mx-contact__aside::after { content: ''; position: absolute; z-index: -1; right: -90px; top: -90px; width: 240px; height: 240px; border-radius: 50%; background: var(--red); filter: blur(80px); opacity: .5; } .mx-contact__aside .elementor-heading-title { color: #fff; font-size: 1.35rem; margin-bottom: 24px; } .mx-contact__row { padding: 16px 0; border-top: 1px solid rgba(255, 255, 255, .08); } .elementor .elementor-widget.mx-contact__icon { width: 42px; height: 42px; flex: none; border-radius: 12px; background: rgba(255, 255, 255, .07); color: #ff5a5a; } .mx-contact__icon svg { width: 20px; height: 20px; } .mx-contact__label p { margin: 0 0 4px; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: #8d8f9c; } .mx-contact__links .elementor-icon-list-items { display: flex; flex-direction: column; } .mx-contact__links .elementor-icon-list-item > a { color: #fff; font-weight: 500; font-size: .96rem; line-height: 1.6; } .mx-contact__links .elementor-icon-list-item > a:hover { color: #ff5a5a; } .mx-contact__follow { padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .08); } .mx-contact__follow .mx-social { margin-top: 14px; } .mx-form__note p { margin: 14px 0 0; font-size: .84rem; color: var(--muted); text-align: center; } /* Forminator form -> brand form styling */ .mx-contact__formwrap .forminator-ui { margin-top: 8px; } .mx-contact__formwrap .forminator-row { margin-bottom: 20px; } .mx-contact__formwrap .forminator-label { font-family: var(--font-head); font-size: .86rem; font-weight: 600; color: var(--ink); margin-bottom: 8px; display: block; } .mx-contact__formwrap .forminator-required { color: var(--red); } .mx-contact__formwrap .forminator-input, .mx-contact__formwrap .forminator-textarea, .mx-contact__formwrap select, .mx-contact__formwrap .forminator-select2 + .select2 .select2-selection { width: 100%; padding: 15px 18px; font: inherit; font-size: .98rem; color: var(--text); background: var(--soft); border: 1.5px solid transparent; border-radius: 14px; transition: border-color .25s, background .25s, box-shadow .25s; box-shadow: none; } .mx-contact__formwrap .forminator-textarea { resize: vertical; min-height: 150px; } .mx-contact__formwrap .forminator-input:hover, .mx-contact__formwrap .forminator-textarea:hover { border-color: var(--line); } .mx-contact__formwrap .forminator-input:focus, .mx-contact__formwrap .forminator-textarea:focus, .mx-contact__formwrap select:focus { outline: none; background: #fff; border-color: var(--red); box-shadow: 0 0 0 4px rgba(213, 0, 0, .1); } .mx-contact__formwrap .forminator-error-message { margin-top: 6px; font-size: .82rem; color: var(--red); } .mx-contact__formwrap .forminator-has_error .forminator-input, .mx-contact__formwrap .forminator-has_error .forminator-textarea { border-color: var(--red); background: #fff6f6; } .mx-contact__formwrap .forminator-button-submit { position: relative; display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 50px; margin-top: 6px; padding: 6px 6px 6px 22px; border: 0; border-radius: 100px; background: var(--red); color: #fff; font-family: var(--font-head); font-size: .92rem; font-weight: 600; cursor: pointer; transition: transform .35s var(--ease-out), box-shadow .35s; } .mx-contact__formwrap .forminator-button-submit::after { content: ''; width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, .18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 2 11 13M22 2l-7 20-4-9-9-4z'/%3E%3C/svg%3E") center / 18px no-repeat; transition: transform .45s var(--ease-out); } .mx-contact__formwrap .forminator-button-submit:hover { transform: translateY(-1px); box-shadow: 0 12px 30px -14px rgba(213, 0, 0, .55); background: var(--ink); } .mx-contact__formwrap .forminator-button-submit:hover::after { transform: rotate(-45deg); } .mx-contact__formwrap .forminator-response-message { margin: 18px 0 0; padding: 16px 20px; border-radius: 14px; font-weight: 500; } .mx-contact__formwrap .forminator-response-message.forminator-success { background: #ecfbf1; color: #11683a; } .mx-contact__formwrap .forminator-response-message.forminator-error { background: #fff1f1; color: var(--red-dark); } /* 38. Portfolio (Essential Addons Filterable Gallery) ----------------------- */ .mx-gallery .fg-layout-3-filter-controls, .mx-gallery .eael-filter-gallery-control ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 0 clamp(36px, 4vw, 54px); padding: 0; list-style: none; } .mx-gallery .eael-filter-gallery-control ul li.control { padding: 11px 22px; border-radius: 100px; border: 1.5px solid var(--line); background: #fff; font-family: var(--font-head); font-size: .88rem; font-weight: 600; color: var(--text); transition: background .3s, color .3s, border-color .3s; margin: 0; cursor: pointer; } .mx-gallery .eael-filter-gallery-control ul li.control:hover { border-color: var(--red); color: var(--red); background: #fff; } .mx-gallery .eael-filter-gallery-control ul li.control.active { background: var(--red); border-color: var(--red); color: #fff; box-shadow: var(--shadow-red); } .mx-gallery .eael-filter-gallery-container .eael-filterable-gallery-item-wrap { padding: 8px; } .mx-gallery .eael-filterable-gallery-item-wrap .eael-gallery-grid-item { overflow: hidden; border-radius: var(--radius); background: var(--soft); aspect-ratio: 1; } .mx-gallery .eael-gallery-grid-item .gallery-item-thumbnail-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); } .mx-gallery .eael-gallery-grid-item:hover img { transform: scale(1.08); } .mx-gallery .gallery-item-caption-over { background: linear-gradient(180deg, transparent, rgba(12, 12, 17, .88)) !important; text-align: left; align-items: flex-end; } .mx-gallery .fg-item-title { color: #fff; font-size: 1.05rem; font-weight: 600; margin: 0; } .mx-gallery .fg-item-content p { margin: 0 0 4px; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: #ff6b6b; font-weight: 600; } /* 39. Legal pages ----------------------------------------------------------- */ .mx-prose { max-width: 780px; margin-inline: auto; font-size: 1.08rem; } .mx-prose .elementor-heading-title { margin-top: 1.8em; margin-bottom: .6em; font-size: 1.6rem; } .mx-prose__body { color: var(--text); } .mx-prose__body p, .mx-prose__body ul { margin: 0 0 1.1em; } .mx-prose__body ul { padding-left: 1.2em; list-style: disc; } .mx-prose__body li { margin-bottom: .4em; } .mx-prose__body a { color: var(--red); text-decoration: underline; } .elementor .elementor-widget.mx-filter__btn.is-active .elementor-button, .mx-filter__btn.is-active .elementor-button { background: var(--red); border-color: var(--red); color: #fff; box-shadow: var(--shadow-red); } @media (max-width: 992px) { .elementor .e-con.mx-contact, .mx-offices { grid-template-columns: 1fr; } .elementor .e-con.mx-contact__aside { position: relative; top: 0; } } .mx-contact__formwrap .forminator-response-message:not(.forminator-show) { display: none; } .mx-contact__follow .elementor-social-icons-wrapper, .mx-contact__follow .elementor-grid { justify-content: flex-start; } .mx-contact__follow .elementor-grid { display: flex; gap: 10px; } .elementor .mx-faq__list .elementor-tab-title .elementor-accordion-icon { display: flex !important; align-items: center; justify-content: center; } .elementor .mx-faq__list .elementor-accordion-icon .elementor-accordion-icon-closed { display: flex !important; align-items: center; justify-content: center; width: 18px; height: 18px; } /* 40. Header nav: ElementsKit sets an 80px menubar height inline */ .mx-header .mx-nav .elementskit-menu-container, .mx-header .mx-nav .ekit-wid-con, .mx-header .mx-nav .elementskit-navbar-nav { height: auto !important; min-height: 0 !important; } .mx-header .mx-nav .elementskit-menu-container { display: flex; align-items: center; } .mx-header .mx-nav .elementskit-navbar-nav > li > a { height: auto !important; min-height: 0; } .elementor .e-con.mx-hero--404 { min-height: 100vh; justify-content: center; } /* 41. Mobile navigation (ElementsKit off-canvas) --------------------------- */ @media (max-width: 1024px) { :root { --header-h: 74px; } .mx-header__cta { display: none; } .mx-header .elementor-widget.mx-nav { flex: none; display: block; } .mx-nav .elementskit-menu-hamburger { display: grid !important; place-items: center; align-content: center; gap: 5px; width: 48px; height: 48px; padding: 0; border: 1.5px solid currentColor; border-radius: 50%; background: transparent !important; color: inherit; float: none; position: relative; z-index: 1002; } .mx-nav .elementskit-menu-hamburger .elementskit-menu-hamburger-icon { display: block; width: 20px; height: 2px; margin: 0; border-radius: 2px; background: currentColor !important; } .mx-nav .elementskit-menu-hamburger .elementskit-menu-hamburger-icon:nth-child(2) { width: 14px; justify-self: start; margin-left: 14px; } .mx-header .mx-nav .elementskit-menu-container { position: fixed !important; inset: 0 !important; z-index: 1001; width: 100% !important; max-width: none !important; height: 100% !important; display: block; padding: calc(var(--header-h) + 24px) var(--gutter) 32px; background: radial-gradient(90% 60% at 100% 0%, rgba(213, 0, 0, .35), transparent 60%), var(--ink); color: #fff; overflow-y: auto; } .mx-header .mx-nav .elementskit-navbar-nav { display: block; width: 100%; padding: 0; background: none !important; border: 0 !important; border-radius: 0; } .mx-header .mx-nav .elementskit-navbar-nav > li { border-bottom: 1px solid rgba(255, 255, 255, .08); } .mx-header .mx-nav .elementskit-navbar-nav > li > a { display: flex; padding: 16px 0; font-size: clamp(1.35rem, 5vw, 1.8rem); font-weight: 600; color: #fff !important; background: none !important; border-radius: 0; } .mx-header .mx-nav .elementskit-navbar-nav > li.current-menu-item > a { color: #ff4d4d !important; } .mx-nav .elementskit-menu-close { color: #fff; border-color: rgba(255, 255, 255, .3); } .mx-nav .elementskit-megamenu-panel .mx-mega__inner { grid-template-columns: 1fr; padding: 0; } .mx-nav .elementskit-megamenu-panel { background: transparent; border: 0; box-shadow: none; } .mx-mega__promo { display: none; } .mx-mega__grid { grid-template-columns: 1fr; padding: 0 0 14px; } .mx-mega__title .elementor-heading-title { color: #fff; } .mx-mega__desc { display: none; } .mx-mega__icon { background: rgba(255, 255, 255, .06); color: #ff5a5a; } } @media (max-width: 1024px) { .elementor .elementor-widget.mx-header__cta { display: none; } } @media (max-width: 1024px) { .mx-header .elementor-widget.mx-nav { flex: 0 0 auto; width: auto; margin-left: auto; } .mx-header .mx-nav > .elementor-widget-container, .mx-header .mx-nav .ekit-wid-con { width: auto; } .mx-header__actions { display: none; } } @media (max-width: 1024px) { .mx-nav .elementskit-menu-hamburger { border-radius: 50% !important; } .mx-nav .elementskit-menu-close { display: none !important; } .mx-header .mx-header__brand { z-index: 1002; } .mx-header .mx-header__brand .mx-header__logo-light { opacity: 1 !important; } .mx-header .mx-header__brand .mx-header__logo-dark { opacity: 0 !important; } .mx-header .mx-nav .elementskit-navbar-nav > li > a { justify-content: space-between; align-items: center; } .mx-header .mx-nav .elementskit-navbar-nav > li > a > .elementskit-submenu-indicator { width: 44px; height: 44px; margin: 0; border: 1px solid rgba(255, 255, 255, .2); border-radius: 50%; background: none; position: relative; } .mx-header .mx-nav .elementskit-navbar-nav > li > a > .elementskit-submenu-indicator::after { content: ''; position: absolute; inset: 14px; background: #fff; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; } } /* 42. Desktop mega panel: anchored to the header bar like the original */ @media (min-width: 1025px) { .mx-header__bar { position: relative; } .mx-header .elementor-widget.mx-nav, .mx-header .mx-nav .elementor-widget-container, .mx-header .mx-nav .ekit-wid-con, .mx-header .mx-nav .elementskit-menu-container, .mx-header .mx-nav .elementskit-navbar-nav, .mx-header .mx-nav .elementskit-navbar-nav > li.elementskit-dropdown-has { position: static !important; } .mx-header .mx-nav .elementskit-megamenu-panel { position: absolute !important; left: var(--gutter) !important; right: var(--gutter) !important; top: calc(100% - 6px) !important; width: auto !important; min-width: 0 !important; max-width: none !important; margin: 0 !important; padding: 14px 0 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } .mx-header .mx-nav .elementskit-megamenu-panel > .elementor { width: 100%; } .mx-mega__inner { display: grid; grid-template-columns: 1fr 320px; gap: 8px; padding: 14px; background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); border: 1px solid var(--line); color: var(--text); } .mx-mega__list { min-width: 0; } } .mx-header .mx-nav .elementskit-megamenu-panel { white-space: normal; } .mx-mega__grid > * { min-width: 0; } @media (min-width: 1025px) { .mx-header .mx-nav .elementskit-navbar-nav > li > a > .elementskit-submenu-indicator { display: inline-block !important; position: static !important; width: 16px !important; height: 16px !important; margin: 0 0 0 6px !important; font-size: 0 !important; line-height: 0; background: currentColor !important; transform: none !important; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat !important; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat !important; } .mx-header .mx-nav .elementskit-navbar-nav > li > a > .elementskit-submenu-indicator::before { content: none !important; } } /* 43. Back-to-top (ElementsKit) */ .mx-top .ekit-btt__button, .ekit-btt .ekit-btt__button { width: 52px; height: 52px; padding: 0; border: 0; border-radius: 50%; background: var(--ink); color: #fff; box-shadow: var(--shadow); display: grid; place-items: center; transition: background .3s; } .mx-top .ekit-btt__button:hover { background: var(--red); } .mx-top .ekit-btt__button svg { width: 20px; height: 20px; fill: currentColor; } /* 44. Office clock row */ .elementor .elementor-widget.mx-place__time-label { display: flex; align-items: center; width: auto; } .mx-place__time-label p { margin: 0; } .mx-place__time, .mx-place__time * { font-style: normal !important; } .mx-place__time .premium-world-clock__time-wrapper, .mx-place__time .premium-world-clock__time-wrapper * { transform: none !important; font-family: var(--font-head) !important; letter-spacing: 0; text-shadow: none !important; } .mx-place__time .premium-world-clock__separator { animation: none !important; opacity: 1 !important; } /* 45. Mega panel hover bridge: the panel box starts inside the nav pill, so the pointer never leaves the hover area */ @media (min-width: 1025px) { .mx-header .mx-nav .elementskit-megamenu-panel { top: 48px !important; padding: 30px 0 0 !important; } .mx-header .mx-nav .elementskit-navbar-nav > li.elementskit-dropdown-has { padding-bottom: 0; } .mx-header .mx-nav .elementskit-navbar-nav > li.elementskit-dropdown-has > a { position: relative; z-index: 2; } .mx-header .mx-nav .elementskit-navbar-nav > li.elementskit-dropdown-has:hover > .elementskit-megamenu-panel, .mx-header .mx-nav .elementskit-navbar-nav > li.elementskit-dropdown-has:focus-within > .elementskit-megamenu-panel { opacity: 1; visibility: visible; pointer-events: auto; } } /* 46. Header on scroll: white bar with dark text (Elementor's container background would otherwise stay transparent) */ .elementor .e-con.mx-header.is-scrolled, body:not(.has-hero) .elementor .e-con.mx-header { background-color: rgba(255, 255, 255, .94) !important; box-shadow: 0 10px 40px -20px rgba(12, 12, 17, .3); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); color: var(--ink); } .mx-header.is-scrolled .mx-nav .elementskit-navbar-nav > li > a, body:not(.has-hero) .mx-header .mx-nav .elementskit-navbar-nav > li > a { color: var(--ink) !important; } .mx-header.is-scrolled .mx-nav .elementskit-navbar-nav > li.current-menu-item > a, body:not(.has-hero) .mx-header .mx-nav .elementskit-navbar-nav > li.current-menu-item > a { color: var(--red) !important; background: rgba(12, 12, 17, .06); } .mx-header.is-scrolled .mx-nav .elementskit-navbar-nav { background: rgba(12, 12, 17, .04); border-color: var(--line); } .mx-header.is-scrolled .mx-header__logo-light, body:not(.has-hero) .mx-header .mx-header__logo-light { opacity: 0 !important; } .mx-header.is-scrolled .mx-header__logo-dark, body:not(.has-hero) .mx-header .mx-header__logo-dark { opacity: 1 !important; } @media (max-width: 1024px) { body.has-hero .mx-header .mx-nav .elementskit-navbar-nav > li > a { color: #fff !important; } .mx-header.is-scrolled .mx-nav .elementskit-navbar-nav > li > a { color: #fff !important; } } /* 47. Clickable cards: the link sits on the title and is stretched over the whole card (container links are an Elementor Pro feature) */ .mx-mega__link, .mx-hero__card, .mx-related__card { position: relative; cursor: pointer; } .mx-mega__title a, .mx-hero__card-name a, .mx-related__card .elementor-heading-title a { color: inherit; } .mx-mega__title a::after, .mx-hero__card-name a::after, .mx-related__card .elementor-heading-title a::after { content: ''; position: absolute; inset: 0; z-index: 3; } /* the stretched link must be positioned against the card, so the widgets/containers inside it must not be positioned */ .mx-mega__link .elementor-widget, .mx-mega__link .e-con, .mx-hero__card .elementor-widget:not(.mx-hero__card-arrow), .mx-related__card .elementor-widget:not(.mx-related__arrow) { position: static; } /* testimonial slider arrows: Premium Addons names them .carousel-prev / .carousel-next */ .elementor .mx-tslider .premium-testimonial-box .carousel-arrow { position: absolute !important; top: auto !important; bottom: 0 !important; width: 54px !important; height: 54px !important; border-radius: 50% !important; border: 1.5px solid var(--line) !important; background: #fff !important; color: var(--ink) !important; display: grid !important; place-items: center; transform: none !important; padding: 0 !important; margin: 0 !important; opacity: 1 !important; cursor: pointer; line-height: 1; } .elementor .mx-tslider .premium-testimonial-box .carousel-arrow:hover { background: var(--red) !important; border-color: var(--red) !important; color: #fff !important; } .elementor .mx-tslider .premium-testimonial-box .carousel-prev { left: auto !important; right: 66px !important; } .elementor .mx-tslider .premium-testimonial-box .carousel-next { right: 0 !important; left: auto !important; } .mx-tslider .carousel-arrow i { font-size: 16px; } /* case-study carousel arrows: position the buttons themselves against the carousel, in line with the heading */ .elementor .mx-carousel__slider .premium-carousel-wrapper .premium-carousel-nav-arrow-prev, .elementor .mx-carousel__slider .premium-carousel-wrapper .premium-carousel-nav-arrow-next { position: static !important; } .elementor .mx-carousel__slider .premium-carousel-wrapper .carousel-arrow { position: absolute !important; top: -77px !important; bottom: auto !important; z-index: 3; margin: 0 !important; transform: none !important; } .elementor .mx-carousel__slider .premium-carousel-wrapper .carousel-prev { left: auto !important; right: 240px !important; } .elementor .mx-carousel__slider .premium-carousel-wrapper .carousel-next { left: auto !important; right: 186px !important; } /* testimonial slider: room for the arrows below the quote */ .elementor .mx-tslider .premium-testimonial-box { position: relative; padding-bottom: 90px; } /* 48. Mobile menu fix: backdrop-filter / transform on the header turn it into the containing block of the position:fixed off-canvas menu, so the menu was clipped to the header height once the page was scrolled */ @media (max-width: 1024px) { .elementor .e-con.mx-header, .mx-header { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .elementor .e-con.mx-header:has(.elementskit-menu-container.active), .mx-header:has(.elementskit-menu-container.active) { transform: none !important; } } /* 49. Mobile menu: closed/open states. Section 41 pinned the off-canvas container with `inset: 0 !important`, which overrides ElementsKit's `left: -100vw` (closed) / `.active { left: 0 }` (open), so the menu covered the page permanently. Restore the closed state, keep the open state, and fix colours/scroll while it is open. */ @media (max-width: 1024px) { .mx-header .mx-nav .elementskit-menu-container { left: -100vw !important; right: auto !important; visibility: hidden; transition: left .45s cubic-bezier(.22, .61, .24, 1), visibility 0s linear .45s; overscroll-behavior: contain; } .mx-header .mx-nav .elementskit-menu-container.active { left: 0 !important; visibility: visible; transition: left .45s cubic-bezier(.22, .61, .24, 1), visibility 0s; } .mx-nav .elementskit-menu-overlay { display: none !important; } /* hamburger morphs into a close icon */ .mx-nav .elementskit-menu-hamburger .elementskit-menu-hamburger-icon { transition: transform .3s, opacity .2s, width .3s; } .mx-nav .elementskit-menu-hamburger[aria-expanded="true"] .elementskit-menu-hamburger-icon:nth-child(1) { transform: translateY(7px) rotate(45deg); } .mx-nav .elementskit-menu-hamburger[aria-expanded="true"] .elementskit-menu-hamburger-icon:nth-child(2) { opacity: 0; } .mx-nav .elementskit-menu-hamburger[aria-expanded="true"] .elementskit-menu-hamburger-icon:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* while open the bar sits on the dark panel: white logo, white button, whatever the page/scroll state */ .mx-header:has(.elementskit-menu-container.active) .mx-nav .elementskit-menu-hamburger { color: #fff !important; border-color: rgba(255, 255, 255, .4); } .mx-header:has(.elementskit-menu-container.active) .mx-header__logo-light { opacity: 1 !important; } .mx-header:has(.elementskit-menu-container.active) .mx-header__logo-dark { opacity: 0 !important; } .mx-header:has(.elementskit-menu-container.active) .mx-nav .elementskit-navbar-nav > li > a { color: #fff !important; } .mx-header:has(.elementskit-menu-container.active) .mx-nav .elementskit-navbar-nav > li.current-menu-item > a { color: #ff4d4d !important; } body.mx-nav-lock { overflow: hidden; } } @media (prefers-reduced-motion: reduce) { .mx-header .mx-nav .elementskit-menu-container, .mx-nav .elementskit-menu-hamburger .elementskit-menu-hamburger-icon { transition: none !important; } } @media (max-width: 1024px) { /* the desktop chevron is drawn with a mask on the indicator itself (section 25); on mobile the indicator is a bordered button that draws its own chevron, so the mask would clip it */ .mx-header .mx-nav .elementskit-navbar-nav > li > a > .elementskit-submenu-indicator { -webkit-mask: none !important; mask: none !important; background: none !important; display: block; flex: none; } .mx-header .mx-nav .elementskit-navbar-nav > li > a > .elementskit-submenu-indicator::before { content: none; } .mx-header .mx-nav .elementskit-navbar-nav > li > a > .elementskit-submenu-indicator::after { transition: transform .3s; } .mx-header .mx-nav .elementskit-navbar-nav > li:has(> .elementskit-megamenu-panel.elementskit-dropdown-open) > a > .elementskit-submenu-indicator::after { transform: rotate(180deg); } } @media (max-width: 1024px) { html:has(body.mx-nav-lock) { overflow: hidden; } /* services list inside the off-canvas menu: compact icon + title rows */ .elementor .e-con.mx-mega__link { flex-direction: row !important; align-items: center; gap: 14px; padding: 8px 0; } .elementor .mx-mega__desc { display: none !important; } .mx-mega__icon { width: 40px; height: 40px; } .mx-mega__title .elementor-heading-title a { color: #fff; font-weight: 500; font-size: 1rem; } } @media (max-width: 1024px) { /* hover/focus/tap on the dark off-canvas panel: the desktop hover uses a light background, which hid the white text */ .mx-nav .mx-mega__link:hover, .mx-nav .mx-mega__link:focus-within, .mx-nav .mx-mega__link:active { background: rgba(255, 255, 255, .08); border-radius: 14px; } .mx-nav .mx-mega__link:hover .mx-mega__title .elementor-heading-title, .mx-nav .mx-mega__link:hover .mx-mega__title a, .mx-nav .mx-mega__link:focus-within .mx-mega__title a, .mx-nav .mx-mega__link:active .mx-mega__title a { color: #fff !important; } .mx-nav .mx-mega__link:hover .mx-mega__icon, .mx-nav .mx-mega__link:active .mx-mega__icon { background: var(--red); color: #fff; transform: none; } .mx-nav .mx-mega__link:hover .mx-mega__icon svg, .mx-nav .mx-mega__link:hover .mx-mega__icon .elementor-icon { color: #fff; } .mx-nav .mx-mega__link { padding-left: 8px; padding-right: 8px; margin: 0 -8px; } } /* 50. Client logos: single row scrolling left on mobile (the grid is kept on tablet/desktop). logos-marquee.js appends an aria-hidden copy of the logos so the loop is seamless; the copy is hidden above 767px. */ .mx-logos > .mx-logo--clone { display: none; } @media (max-width: 767px) { .mx-logos-wrap .mx-container { overflow: hidden; } .elementor .e-con.mx-logos { display: flex !important; flex-wrap: nowrap; grid-template-columns: none; width: max-content; max-width: none; gap: 0; border: 0; animation: mx-logos-scroll 40s linear infinite; will-change: transform; } .elementor .e-con.mx-logos > .elementor-widget { flex: none; width: 140px; height: 76px; padding: 10px 14px; border: 0; } .mx-logos > .mx-logo--clone { display: grid; } .mx-logos:hover, .mx-logos:active { animation-play-state: paused; } } @keyframes mx-logos-scroll { to { transform: translateX(-50%); } } @media (max-width: 767px) and (prefers-reduced-motion: reduce) { .mx-logos-wrap .mx-container { overflow-x: auto; } .elementor .e-con.mx-logos { animation: none; } .mx-logos > .mx-logo--clone { display: none; } }