tags, so the default paragraph margin between them read as loosely
scattered rather than one tight caption. ---------- */
.elementor-element-6c316cf p,
.elementor-element-d7ebacc p,
.elementor-element-a1eb23b p,
.elementor-element-cd79b70 p,
.elementor-element-b796522 p,
.elementor-element-6514a54 p {
margin-bottom: 0;
line-height: 1.25;
}
/* ---------- Tabs: center the "Time saved in pre-construction phase" image
blocks under their titles (the title had text-align:center already; the
image widget next to it didn't, so it defaulted to the start edge). ---------- */
.elementor-element-8ff78d7,
.elementor-element-8cacffd,
.elementor-element-4962a2b,
.elementor-element-24b43c7 {
text-align: center;
}
/* ---------- Additional benefits: gap between each icon and its text ---------- */
.elementor-element.elementor-element-132ac31,
.elementor-element.elementor-element-4ebcf79,
.elementor-element.elementor-element-fc29c73,
.elementor-element.elementor-element-c30ee6b,
.elementor-element.elementor-element-69f8c1c,
.elementor-element.elementor-element-e98c6ed,
.elementor-element.elementor-element-b45d6fa,
.elementor-element.elementor-element-364a5e7 {
--gap: 0px 16px;
--row-gap: 0px;
--column-gap: 16px;
}
/* ---------- All six "Criteria" stat numbers unified at one size. The
source used 45px (large-scale) / 50px (small-scale) with "≥5 years"
wrapping to two lines at 45px — rather than leave the other five at
their original, larger sizes (making "≥5 years" look like an odd one
out), all six now match the size that made it fit on one line.
Scoped to desktop (min-width:1025px) only: this rule has no media query
of its own, so it was unconditionally overriding the source's OWN
smaller responsive sizes at tablet/mobile widths (20px, already uniform
across all six there) with this larger 38px -- which doesn't fit "≥5
years" in a narrow mobile column, wrapping it mid-word. ---------- */
@media (min-width: 1025px) {
.elementor-element.elementor-element-3a1052a .elementor-heading-title,
.elementor-element.elementor-element-6b0d818 .elementor-heading-title,
.elementor-element.elementor-element-7e8f753 .elementor-heading-title,
.elementor-element.elementor-element-9b28cd1 .elementor-heading-title,
.elementor-element.elementor-element-7c13f7a .elementor-heading-title,
.elementor-element.elementor-element-70e8688 .elementor-heading-title {
font-size: 38px;
}
}
/* ---------- Section-separator dividers (before "Time saved..." and before
"Additional benefits") had 0 padding-bottom, so the heading right below
sat flush against the line. ---------- */
.elementor-element.elementor-element-2411bf3.elementor-element-2411bf3 > .elementor-widget-container.elementor-widget-container,
.elementor-element.elementor-element-d211e0d.elementor-element-d211e0d > .elementor-widget-container.elementor-widget-container {
padding-bottom: 28px;
}
/* ---------- The "before Time saved..." divider on each tab (2411bf3 on
large-scale, 5d482f1 on small-scale) also had 0 gap ABOVE it: the
Industries photo grid is the tallest column in that row, so its bottom
edge touched the divider directly with no breathing room. Same story for
the "before Additional benefits" divider (d211e0d): only 10px separated
it from the "36 -> 19 months" stat boxes above. ---------- */
.elementor-element.elementor-element-2411bf3.elementor-element-2411bf3 > .elementor-widget-container.elementor-widget-container,
.elementor-element.elementor-element-5d482f1.elementor-element-5d482f1 > .elementor-widget-container.elementor-widget-container,
.elementor-element.elementor-element-d211e0d.elementor-element-d211e0d > .elementor-widget-container.elementor-widget-container {
padding-top: 32px;
}
/* ---------- "Your next step": tighten the gap between the section heading
and the cards below (source value was 60px, felt too loose). ---------- */
.elementor-element.elementor-element-8e6e024.elementor-element-8e6e024 > .elementor-widget-container.elementor-widget-container {
margin-bottom: 24px;
}
/* ---------- "Your next step": the section wrapper's own padding-bottom
(56px, source value) was the dominant contributor to the gap above the
cards -- the heading widget's own margin above only accounted for part
of it. ---------- */
.elementor-element.elementor-element-47f764e.elementor-element-47f764e {
--padding-bottom: 24px;
}
/* ---------- "Already running in Lithuania": Aumovio card removed at the
user's request, converting this from a 3-slide carousel into a plain
2-card static row (no swiper/carousel machinery, no arrows). The two
remaining cards (#d670ab8 Healthcare, #e44f770 Defence) are now direct
flex children of this wrapper instead of swiper slides, so they need
their own side-by-side sizing here. ---------- */
.e-con.e-flex.already-running-grid.already-running-grid {
display: flex;
flex-direction: row;
align-items: stretch;
gap: 90px;
}
.already-running-grid > .elementor-element-d670ab8,
.already-running-grid > .elementor-element-e44f770 {
flex: 1 1 0;
width: auto;
max-width: none;
}
@media (max-width: 767px) {
.e-con.e-flex.already-running-grid.already-running-grid {
flex-direction: column;
gap: 40px;
}
}
/* ---------- "Your next step" ghost numerals: aligned flush with the card's
own top edge instead of the source's intentional -25px bleed above it. ---------- */
.elementor-element.elementor-element-9417b64.elementor-element-9417b64,
.elementor-element.elementor-element-bb2cf4d.elementor-element-bb2cf4d,
.elementor-element.elementor-element-c7d100b.elementor-element-c7d100b,
.elementor-element.elementor-element-11f58ce.elementor-element-11f58ce,
.elementor-element.elementor-element-861b76d.elementor-element-861b76d {
top: 0;
}
/* ---------- Small-scale tab: the "20" stat has a tooltip info-icon sibling
sitting in the same centered flex row (#1f23d0c). The icon's own 15px
width shifts the whole row's centered content 7.5px right of where the
caption below (which has no icon) centers, throwing off the vertical
alignment between number and caption. Giving the icon zero layout width
(rendering past that via overflow:visible) excludes it from the
centering math while keeping it visually in place. ---------- */
.elementor-element.elementor-element-0632b8c {
width: 0;
overflow: visible;
flex: 0 0 0;
}
/* ---------- "Already running in Lithuania": the photo column is genuinely
position:absolute in the source (pinned via bottom:0/right:0, no
explicit height), which takes it out of the row's flex flow entirely --
so it sized to its own tall natural aspect ratio, overflowed past the
card's top edge, and ignored both align-self:stretch and the row's gap
(out-of-flow elements participate in neither; an earlier attempt to fix
this with align-self/object-fit alone did nothing for exactly that
reason). Overriding it back to a normal in-flow flex column is what
actually lets align-self:stretch and the row gap take effect.
Applied at ALL widths, including mobile, per explicit user direction: the
source's own mobile treatment (text at 100% width, photo shrunk to a
110px absolutely-positioned corner overlay) is intentionally overridden
here to keep the same two-column layout (column 1: logo/sector/
description/button, column 2: photo stretched to match column 1's
height) all the way down to phone widths. Since the two columns stay
side-by-side (row) at every width, align-self:stretch on the photo
column is enough to match its height to column 1 -- no JS needed. ---------- */
.elementor-element.elementor-element-d670ab8,
.elementor-element.elementor-element-e44f770 {
--gap: 0px 40px;
--row-gap: 0px;
--column-gap: 40px;
--flex-wrap: nowrap;
}
.elementor-element.elementor-element-e168ea2.elementor-element-e168ea2,
.elementor-element.elementor-element-44c8b35.elementor-element-44c8b35 {
flex: 1 1 0;
min-width: 0;
width: auto;
/* Source uses justify-content:space-between so the button anchors to
the card's bottom edge when this column is short and its own
content doesn't fill it. Once the column is stretched to the photo's
full height (see align-self:stretch on the photo column above),
that leaves a large empty gap between the description and the
button -- switch to flex-start so the button sits right after the
text instead, with a fixed gap between them. */
justify-content: flex-start;
gap: 32px;
}
.elementor-element.elementor-element-a51ee33.elementor-element-a51ee33,
.elementor-element.elementor-element-ba1be1f.elementor-element-ba1be1f {
--position: relative;
bottom: auto;
flex: 1 1 0;
width: auto;
align-self: stretch;
height: auto;
flex-direction: column;
}
body:not(.rtl) .elementor-element.elementor-element-a51ee33.elementor-element-a51ee33,
body:not(.rtl) .elementor-element.elementor-element-ba1be1f.elementor-element-ba1be1f {
right: auto;
}
/* The photo column itself (a51ee33/ba1be1f) correctly stretches to match
the text column's height, but that height doesn't propagate down to the
on its own: the image widget wrapper and its
.elementor-widget-container are plain block boxes with no explicit
height, so they size to the image's OWN content (i.e. its natural
aspect ratio at 96px/50% width) and leave the rest of the stretched
column empty below it. Giving every link in that chain height:100%
lets the percentage height finally resolve all the way down to the img. */
.elementor-element.elementor-element-43a9d02.elementor-element-43a9d02,
.elementor-element.elementor-element-5c4656c.elementor-element-5c4656c {
height: 100%;
}
.elementor-element.elementor-element-43a9d02.elementor-element-43a9d02 > .elementor-widget-container,
.elementor-element.elementor-element-5c4656c.elementor-element-5c4656c > .elementor-widget-container {
height: 100%;
}
.elementor-element.elementor-element-43a9d02.elementor-element-43a9d02 img,
.elementor-element.elementor-element-5c4656c.elementor-element-5c4656c img {
height: 100%;
width: 100%;
object-fit: cover;
}
/* Mobile: the gap and the 50/50 split that work fine at desktop widths
leave too little room for the text column's logo/description/button --
give the photo a smaller, fixed share instead and a tighter gap. */
@media (max-width: 767px) {
.elementor-element.elementor-element-d670ab8,
.elementor-element.elementor-element-e44f770 {
--gap: 0px 20px;
--column-gap: 20px;
}
.elementor-element.elementor-element-e168ea2.elementor-element-e168ea2,
.elementor-element.elementor-element-44c8b35.elementor-element-44c8b35 {
flex: 1 1 auto;
gap: 16px;
}
.elementor-element.elementor-element-a51ee33.elementor-element-a51ee33,
.elementor-element.elementor-element-ba1be1f.elementor-element-ba1be1f {
flex: 0 0 96px;
}
}
/* ---------- Hero headline: 1.2em line-height (source) reads loose across
two lines at this font size. This is a text-editor widget (its content is
a plain
, not a heading element), and a directly-matched rule on an element always wins over an inherited value from an ancestor -- so overriding line-height on the OUTER widget div alone did nothing, because base.css's generic "p { line-height: 1.6 }" reset is a direct match on the
itself and out-ranks inheritance every time. Target the
directly instead. ---------- */ .elementor-element.elementor-element-88aa69a.elementor-element-88aa69a p { line-height: 1.05em; } /* ---------- "Your running partner" card headlines (Run the numbers / Find a team / Stay on track): no source line-height meant the generic 1.4 default applied, reading loose across two lines. ---------- */ .elementor-element.elementor-element-7315f0a.elementor-element-7315f0a .elementor-heading-title, .elementor-element.elementor-element-84378f2.elementor-element-84378f2 .elementor-heading-title, .elementor-element.elementor-element-4369d44.elementor-element-4369d44 .elementor-heading-title { line-height: 1.1; } /* ---------- Small-scale tab: "DOWNLOAD FACT SHEET" button had its top padding zeroed out at mobile (max-width:767px) in the source itself -- an inconsistency, since the large-scale tab's equivalent button (f0b90c6) keeps 40px padding-top at the same breakpoint. Restoring the same 40px here so the button doesn't sit flush against the image above. ---------- */ @media (max-width: 767px) { .elementor-element.elementor-element-95b428b.elementor-element-95b428b > .elementor-widget-container.elementor-widget-container { padding-top: 40px; } } /* ---------- Tooltip info icons: 15px source size renders as a ~7px dot on mobile, way too small to notice or tap. ---------- */ @media (max-width: 767px) { .elementor-element.elementor-element-d9aa611.elementor-element-d9aa611 .eael-tooltip, .elementor-element.elementor-element-357d7d1.elementor-element-357d7d1 .eael-tooltip, .elementor-element.elementor-element-0632b8c.elementor-element-0632b8c .eael-tooltip { width: 26px; } } /* ---------- Mobile: gap between the Industries photo grid and the "Criteria" label below it (0px -- they touched directly once the two columns started stacking). Large-scale tab is #07acdcd; small-scale tab's own Industries column is the separate #39050fe (each tab panel is a fully separate DOM subtree). ---------- */ @media (max-width: 767px) { .elementor-element.elementor-element-07acdcd.elementor-element-07acdcd, .elementor-element.elementor-element-39050fe.elementor-element-39050fe { margin-bottom: 32px; } } /* ---------- Industries image: fixed at width:580px (max-width:100% only ever shrinks it, never grows it). At desktop this is fine -- 580px is wider than its ~50% column, so max-width clamps it down to fit. But once the Industries/Criteria row wraps (mobile and the ~768-1024px range right before the tablet breakpoint), the column becomes far wider than 580px and the image no longer stretches to fill it, leaving a visible gap on the right. Same fix for both tabs (5310a5c large-scale, 0c073bd small-scale). ---------- */ @media (max-width: 1024px) { .elementor-element.elementor-element-5310a5c.elementor-element-5310a5c img, .elementor-element.elementor-element-0c073bd.elementor-element-0c073bd img { width: 100%; } } /* ---------- Large-scale tab: the middle stat ("≥150 / Full-time employees") wraps its number in an extra container (#53d6ba6) that the left/right stats don't have around theirs -- a source markup asymmetry. The generic ".elementor-widget:not(:last-child)" 20px trailing margin rule applies to the actual heading widget either way, but here it lands INSIDE that extra wrapper instead of between the wrapper and the divider after it, so the wrapper itself needs the same 20px to keep the divider (and everything below it) level with the other two columns. ---------- */ .elementor-element.elementor-element-53d6ba6.elementor-element-53d6ba6 { margin-bottom: 20px; } /* ---------- Small-scale tab: "DOWNLOAD FACT SHEET" had 0 padding-top on mobile (the large-scale tab's equivalent button keeps 40px there -- this is a source inconsistency between the two tabs), so it sat flush against the stat image above it. ---------- */ @media (max-width: 767px) { .elementor-element.elementor-element-95b428b.elementor-element-95b428b > .elementor-widget-container.elementor-widget-container { padding-top: 32px; } } /* ---------- "Already running" cards: "Read more" button was fixed at width:75px on mobile (a leftover from the source's "narrow corner thumbnail" mobile treatment, where the button had to squeeze in beside it) -- at 18px font, "Read more" doesn't fit that width on one line. Since column 1 now keeps its normal desktop-width column at mobile too (see the un-scoped fix above), the button has plenty of room; just needs to stop being force-narrowed. ---------- */ @media (max-width: 767px) { .elementor-element.elementor-element-f36bc83.elementor-element-f36bc83 .eael-creative-button, .elementor-element.elementor-element-82aaf69.elementor-element-82aaf69 .eael-creative-button { width: auto; padding: 15px 24px; white-space: nowrap; } } /* ---------- "Already running" cards: the description widget carries a source padding-bottom:120px at the mobile breakpoint only -- room the original design reserved to clear a small corner-thumbnail photo that used to overlap this column. That layout is gone now (see the side-by-side, JS-free redesign above), so this leftover padding just reads as a huge dead gap between the description and the "Read more" button. Desktop/tablet never had this rule to begin with (checked page.css), so it only needs zeroing out at mobile. ---------- */ @media (max-width: 767px) { .elementor-element.elementor-element-c840115.elementor-element-c840115 > .elementor-widget-container, .elementor-element.elementor-element-c038020.elementor-element-c038020 > .elementor-widget-container { padding-bottom: 0; } } /* ========================================================================== Site header / footer -- these wrap the Elementor page content (which is body-only, no header/footer, since those need backend/CMS integration) and aren't part of the generated page.css mirror, so they're hand-built here from scratch using the same design tokens (colors, font, boxed content width) as the rest of the page. ========================================================================== */ .ih-site-header, .ih-site-footer { font-family: "TT Hoves", sans-serif; } .ih-site-header__inner, .ih-site-footer__inner { max-width: 1220px; margin-inline: auto; padding-inline: 40px; box-sizing: border-box; } /* ---------- Header: logo left, "Contact us" right -- same gold CTA style used for the page's other primary buttons (e.g. "GET IN TOUCH"). Sticky so it stays reachable while scrolling the long page, with a background (needed since it now sits over scrolling content) and a soft shadow to separate it from what's underneath. ---------- */ .ih-site-header { position: sticky; top: 0; z-index: 100; background-color: #FFFFFF; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08); } .ih-site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 14px; padding-bottom: 14px; } .ih-site-header__logo { display: inline-flex; line-height: 0; } .ih-site-header__logo img { height: 42px; width: auto; display: block; } .ih-header-cta { display: inline-flex; align-items: center; justify-content: center; padding: 11px 28px; background-color: #FED700; color: #000000; font-size: 16px; font-weight: 500; text-decoration: none; text-align: center; white-space: nowrap; transition: 0.2s all ease-in; } .ih-header-cta:hover { background-color: #1E5037; color: #FFFFFF; } @media (max-width: 480px) { .ih-site-header__inner { padding-inline: 20px; } .ih-header-cta { padding: 12px 20px; font-size: 14px; } } /* ---------- Footer: logo, description text and social links in a row on desktop; stacked (logo, text, icons) on mobile. Background/logo/icon colors reuse the same global palette as the rest of the page (--e-global-color-4c8dca1 light gray, --e-global-color-f96cae4 dark green). ---------- */ .ih-site-footer { background-color: var(--e-global-color-4c8dca1, #F0EFF4); } .ih-site-footer__inner { display: flex; align-items: center; gap: 48px; padding-top: 40px; padding-bottom: 40px; } .ih-site-footer__logo { display: inline-flex; flex-shrink: 0; line-height: 0; } .ih-site-footer__logo img { height: 56px; width: auto; display: block; } .ih-site-footer__text { flex: 1 1 auto; margin: 0; font-size: 16px; line-height: 1.5; color: #000000; } .ih-site-footer__social { display: flex; flex-shrink: 0; gap: 12px; } .ih-site-footer__social a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; background-color: var(--e-global-color-f96cae4, #195236); transition: background-color 0.2s ease-in; } .ih-site-footer__social a:hover { background-color: var(--e-global-color-9605a98, #1B8F45); } .ih-site-footer__social svg { width: 20px; height: 20px; fill: #FFFFFF; } @media (max-width: 767px) { .ih-site-footer__inner { flex-direction: column; align-items: flex-start; gap: 24px; } } @media (max-width: 480px) { .ih-site-footer__inner { padding-inline: 20px; } }