/* ==========================================================================
Palette — taken from valunxt.com (2026-08-31)
These are that site's own custom properties, read off the live page, mapped
onto the token names this build already uses. The --vxn-gold-* names are kept
deliberately: they are referenced in ~2,900 lines here and in the generated
Elementor CSS, and renaming them would be a much larger and riskier edit than
changing what they hold. Read "gold" as "the accent" — it is blue now.
========================================================================== */
:root {
/* Their palette, under their names, so the source is traceable. */
/* The #0B2DBE family became the CTA ramp's #0B2DBE family on 20260914,
on client instruction, for India and every global page — the UAE sheets
already ran it. Dark is the CTA sweep colour, light the ramp's midpoint. */
--vxn-blue: #0B2DBE;
--vxn-blue-dark: #08248F;
--vxn-blue-light: #1436D8;
--vxn-violet: #9C00DD;
--vxn-navy-2: #0E355F;
--vxn-sky: #8FB7FF;
--vxn-ink: #16233B;
--vxn-text: #35415A;
--vxn-muted: #6A7590;
--vxn-cream: #F6F4EF;
--vxn-card: #FBFAF7;
--vxn-line: rgba(11, 44, 86, .12);
--vxn-line-inv: rgba(255, 255, 255, .16);
/* Height of the pinned navbar. The mega-menu sheet hangs off it, so the two
have to agree — keep this in step with `--min-height` on
`.elementor-location-header .vamtam-sticky-header`. */
--vxn-navh: 94px;
/* The brand fill. It is written as a gradient with one colour on purpose:
roughly 150 rules paint it through `background-image: var(--vxn-grad-gold)`
— buttons, the feature bands, the panels, every card hover — and a plain
hex there would paint nothing. Flattening it here changes all of them at
once; put two stops back and the gradient returns everywhere. */
--vxn-grad-gold: linear-gradient(150deg, #0E3FA8 0%, #1436D8 48%, #0B2DBE 100%);
/* The same fill one step darker, for the states that need to differ. */
--vxn-grad-hover: linear-gradient(150deg, #0B2DBE 0%, #08248F 100%);
--vxn-grad-soft: linear-gradient(115deg, #1436D8 0%, #B24DE8 100%);
/* Dark surfaces keep their blue-to-navy fall — this is a background for
whole sections, not the accent fill. */
--vxn-grad-navy: linear-gradient(115deg, #0B2DBE 0%, #0E355F 100%);
/* Their footer panel. */
--vxn-grad-footer: linear-gradient(165deg, #1436D8 0%, #0B2DBE 45%, #08248F 100%);
/* Legacy names, now pointing at the new palette. */
--vxn-navy: #0B2DBE;
--vxn-navy-dark: #0E355F;
--vxn-gold: #0B2DBE;
/* The secondary accent — ghost-button text, small labels, the cookie link,
the switcher tick. It was the violet half of the gradient; with the fill
flat, a violet accent has nothing to belong to, so it is the fill one step
darker. The violet itself stays defined above for the logo. */
--vxn-gold-dark: #08248F;
/* ---- THE ONE CTA (20260911) --------------------------------------------
Every pill on the site draws its geometry from these, and the fill from
one of three finishes: the gradient on a light ground, white with the ink
on a dark or photographic ground, and an outline. The geometry is enforced
at the foot of this file (THE ONE CTA) on every button class the site
renders; the per-section sheets read the same tokens so the two agree.
The wedge that sweeps a CTA on hover (CTA HOVER, below) takes the dark
value on a filled pill and the light one on an inverse pill. */
--vxn-cta-grad: linear-gradient(150deg, #0E3FA8 0%, #1436D8 48%, #0B2DBE 100%);
--vxn-cta-ink: #0B2DBE;
--vxn-cta-h: 46px;
--vxn-cta-px: 28px;
--vxn-cta-fs: 14px;
/* Regular, on client instruction (20260911): the pills were 600, which in
Sanomat Sans, with no 600 cut, drew the Bold face. */
--vxn-cta-fw: 400;
--vxn-cta-ls: .01em;
--vxn-cta-r: 999px;
--vxn-cta-sweep-dark: #08248F;
--vxn-cta-sweep-light: #EAF0FF;
}
.elementor-button:not(.elementor-button-info):not(.elementor-button-success):not(.elementor-button-warning):not(.elementor-button-danger),
a.elementor-button:not(.elementor-button-info):not(.elementor-button-success):not(.elementor-button-warning):not(.elementor-button-danger),
.elementor-cta__button,
.wp-block-button__link,
.vamtam-button,
.vamtam-btn,
form.elementor-form button[type="submit"] {
/* The one CTA gradient (20260911); was the flat --vxn-grad-gold. */
background-image: var(--vxn-cta-grad) !important;
background-color: var(--vxn-cta-ink) !important;
color: #fff !important;
fill: #fff !important;
border-color: transparent !important;
--vxn-cta-sweep: var(--vxn-cta-sweep-dark);
}
.elementor-button:not(.elementor-button-info):not(.elementor-button-success):not(.elementor-button-warning):not(.elementor-button-danger):hover,
.elementor-button:not(.elementor-button-info):not(.elementor-button-success):not(.elementor-button-warning):not(.elementor-button-danger):focus,
a.elementor-button:not(.elementor-button-info):not(.elementor-button-success):not(.elementor-button-warning):not(.elementor-button-danger):hover,
a.elementor-button:not(.elementor-button-info):not(.elementor-button-success):not(.elementor-button-warning):not(.elementor-button-danger):focus,
.elementor-cta__button:hover,
.wp-block-button__link:hover,
.vamtam-button:hover,
.vamtam-btn:hover,
form.elementor-form button[type="submit"]:hover {
/* The darker fill is NOT set here any more. It arrives as the skewed wipe in
the "CTA hover" section at the foot of this file — swapping the background
outright here would repaint the button instantly and the wipe would have
nothing to reveal. The resting fill stays; only the label is asserted. */
color: #FFFFFF !important;
fill: #FFFFFF !important;
border-color: transparent !important;
}
[data-vxn-dark],
.vxn-dark {
background-image: var(--vxn-grad-navy) !important;
}
.elementor-section[style*="0E355F"],
.elementor-section>.elementor-background-overlay[style*="0E355F"],
.e-con[style*="0E355F"],
.elementor-element[style*="0E355F"] {
background-image: var(--vxn-grad-navy) !important;
}
.has-midnight-gradient-background {
background: var(--vxn-grad-navy) !important;
}
.has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background {
background: var(--vxn-grad-gold) !important;
}
.elementor-location-header .elementor-element-72e5739 img {
max-width: 180px !important;
}
.elementor-location-header .elementor-element-8d706f9 img,
.elementor-location-header .elementor-element-2d2e9ea img {
max-width: 150px !important;
}
.elementor-widget-image:has(img[src*="/group-"]) {
width: auto !important;
max-width: none !important;
flex: 0 0 auto !important;
}
.elementor-widget-image:has(img[src*="/group-"]) .elementor-widget-container {
width: auto !important;
}
.e-con:has(> .elementor-widget-image img[src*="/group-"]),
.e-con-inner:has(> .elementor-widget-image img[src*="/group-"]) {
justify-content: center !important;
align-items: center !important;
gap: 32px !important;
flex-wrap: wrap !important;
}
.elementor-widget-image:has(img[src*="/group-"])>.elementor-widget-container>a,
.elementor-widget-image:has(img[src*="/group-"])>.elementor-widget-container {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 200px !important;
height: 50px !important;
max-width: 200px !important;
overflow: hidden !important;
}
img[src*="/group-valunxt-corporate"],
img[src*="/group-reliant-surveyors"] {
width: 100% !important;
height: 100% !important;
max-width: 100% !important;
object-fit: contain !important;
object-position: center !important;
}
.vamtam-footer,
footer.elementor-location-footer,
.elementor-location-footer>.elementor-section-wrap,
.elementor-2094 .elementor-element.elementor-element-6578101,
.elementor-2094 .elementor-element.elementor-element-6578101:not(.elementor-motion-effects-element-type-background),
.elementor-2094 .elementor-element.elementor-element-a66bf67,
.elementor-2094 .elementor-element.elementor-element-a66bf67:not(.elementor-motion-effects-element-type-background),
.elementor-2094 .elementor-element.elementor-element-e5832a5,
.elementor-2094 .elementor-element.elementor-element-e5832a5:not(.elementor-motion-effects-element-type-background) {
background-image: none !important;
background-color: var(--vxn-navy-dark) !important;
}
/* Footer logo. The 13px pull-left was compensating for the whitespace inside
the old two-line PNG; the new single-line SVG is flush, so the nudge was
pushing the mark out of line with the paragraph beneath it. */
.elementor-2094 .elementor-element.elementor-element-6a0cd31 img {
width: 180px !important;
height: auto !important;
position: static;
margin-bottom: 14px;
}
.elementor-2094 .elementor-element.elementor-element-7a5ce4a .elementor-element-ed7850a {
margin-top: 14px;
}
.elementor-2094 .elementor-element.elementor-element-7a5ce4a .elementor-social-icons-wrapper {
justify-content: flex-start !important;
}
.elementor-2094 .elementor-element.elementor-element-a66bf67>.e-con-inner {
justify-content: flex-end !important;
position: fixed;
right: 33px;
bottom: 0px;
z-index: 1;
}
@media (min-width: 1025px) {
.elementor-2094 .elementor-element.elementor-element-7a5ce4a {
--width: 30%;
gap: 0;
z-index: 999;
}
.elementor-2094 .elementor-element.elementor-element-df2c858 {
--width: 15%;
}
.elementor-2094 .elementor-element.elementor-element-aa41969 {
--width: 27%;
}
.elementor-2094 .elementor-element.elementor-element-aa41969 .elementor-nav-menu .elementor-item {
white-space: nowrap;
}
.elementor-2094 .elementor-element.elementor-element-b2872b3 {
--width: 28%;
margin-top: 43px;
}
}
.elementor-2094 .elementor-element.elementor-element-b2872b3 {
background-color: var(--vxn-navy) !important;
border-radius: 14px;
padding: 26px 28px !important;
margin-bottom: 24px;
align-self: flex-start;
}
.elementor-2094 .elementor-element.elementor-element-b2872b3 .elementor-element-65f6f11>.elementor-widget-container {
margin-top: 0 !important;
}
.elementor-2094 .vxn-footer-disclaimer {
background-color: var(--vxn-navy-dark) !important;
display: flex !important;
flex-direction: column;
background-image: none !important;
}
.elementor-2094 .vxn-footer-disclaimer>.e-con-inner {
padding-top: 26px;
padding-bottom: 26px;
border-top: 1px solid rgba(255, 255, 255, 0.08);
width: 100%;
max-width: min(100%, 1280px);
margin-left: auto;
margin-right: auto;
}
.elementor-2094 .vxn-footer-disclaimer__title {
margin: 0 0 16px;
font-size: 18px;
font-weight: 600;
letter-spacing: 2px;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.82);
}
.elementor-2094 .vxn-footer-disclaimer p {
margin: 0 0 0px;
max-width: none;
font-size: 14px;
line-height: 1.75;
color: rgba(255, 255, 255, 0.5);
}
.elementor-2094 .vxn-footer-disclaimer p:last-child {
margin-bottom: 0;
}
.elementor-248 .elementor-element-7ab26c9 .elementor-element-26edf8b a.elementor-button.elementor-button-link,
.elementor-248 .elementor-element-7ab26c9 .elementor-element-26edf8b a.elementor-button.elementor-button-link:hover,
.elementor-248 .elementor-element-7ab26c9 .elementor-element-26edf8b a.elementor-button.elementor-button-link:focus {
background-image: none !important;
background-color: transparent !important;
box-shadow: none !important;
border-color: transparent !important;
}
.elementor-248 .elementor-element-7ab26c9 .elementor-element-26edf8b a.elementor-button.elementor-button-link,
.elementor-248 .elementor-element-7ab26c9 .elementor-element-26edf8b a.elementor-button.elementor-button-link .elementor-button-text {
color: var(--vxn-navy) !important;
fill: var(--vxn-navy) !important;
}
.elementor-248 .elementor-element-7ab26c9 .elementor-element-26edf8b a.elementor-button.elementor-button-link:hover .elementor-button-text,
.elementor-248 .elementor-element-7ab26c9 .elementor-element-26edf8b a.elementor-button.elementor-button-link:focus .elementor-button-text {
color: var(--vxn-gold-dark) !important;
}
:is(.page-id-264, .page-id-296) .elementor-widget-icon-box+.elementor-widget-icon>.elementor-widget-container {
margin-top: 0 !important;
height: 48px;
display: flex;
align-items: center;
justify-content: flex-end;
}
:is(.page-id-264, .page-id-296) .elementor-widget-icon-box+.elementor-widget-icon>.elementor-widget-container .elementor-icon-wrapper {
line-height: 0 !important;
}
:is(.page-id-264, .page-id-296) .elementor-widget-icon-box:has(+ .elementor-widget-icon) .elementor-icon-box-wrapper {
align-items: flex-start !important;
text-align: left !important;
}
:is(.page-id-264, .page-id-296) .elementor-widget-icon-box:has(+ .elementor-widget-icon) .elementor-icon-box-icon,
:is(.page-id-264, .page-id-296) .elementor-widget-icon-box:has(+ .elementor-widget-icon) .elementor-icon-box-content {
text-align: left !important;
}
.page-id-17 .elementor-2190 .elementor-element.elementor-element-752eec4 {
margin-top: 50px !important;
}
:is(.page-id-250, .page-id-252, .page-id-254, .page-id-256) .elementor-widget-button.elementor-align-justify.vamtam-content-align-space-between a.elementor-button.elementor-button-link {
background-image: none !important;
background-color: transparent !important;
box-shadow: none !important;
border-color: transparent !important;
color: var(--vxn-navy) !important;
fill: var(--vxn-navy) !important;
}
:is(.page-id-250, .page-id-252, .page-id-254, .page-id-256) .elementor-widget-button.elementor-align-justify.vamtam-content-align-space-between a.elementor-button.elementor-button-link .elementor-button-text,
:is(.page-id-250, .page-id-252, .page-id-254, .page-id-256) .elementor-widget-button.elementor-align-justify.vamtam-content-align-space-between a.elementor-button.elementor-button-link .elementor-button-icon i {
color: var(--vxn-navy) !important;
}
:is(.page-id-250, .page-id-252, .page-id-254, .page-id-256) .elementor-widget-button.elementor-align-justify.vamtam-content-align-space-between a.elementor-button.elementor-button-link:hover,
:is(.page-id-250, .page-id-252, .page-id-254, .page-id-256) .elementor-widget-button.elementor-align-justify.vamtam-content-align-space-between a.elementor-button.elementor-button-link:focus {
background-image: none !important;
background-color: transparent !important;
color: var(--vxn-gold-dark) !important;
fill: var(--vxn-gold-dark) !important;
}
:is(.page-id-250, .page-id-252, .page-id-254, .page-id-256) .elementor-widget-button.elementor-align-justify.vamtam-content-align-space-between a.elementor-button.elementor-button-link:hover .elementor-button-text,
:is(.page-id-250, .page-id-252, .page-id-254, .page-id-256) .elementor-widget-button.elementor-align-justify.vamtam-content-align-space-between a.elementor-button.elementor-button-link:hover .elementor-button-icon i,
:is(.page-id-250, .page-id-252, .page-id-254, .page-id-256) .elementor-widget-button.elementor-align-justify.vamtam-content-align-space-between a.elementor-button.elementor-button-link:focus .elementor-button-text,
:is(.page-id-250, .page-id-252, .page-id-254, .page-id-256) .elementor-widget-button.elementor-align-justify.vamtam-content-align-space-between a.elementor-button.elementor-button-link:focus .elementor-button-icon i {
color: var(--vxn-gold-dark) !important;
}
.elementor-icon .vamtam-logo-sign-img,
.vamtam-logo-sign-img {
display: inline-block;
width: 1em;
height: 1em;
max-width: 2em;
object-fit: contain;
vertical-align: middle;
}
/* No glass on the navbar, and the theme's own sticky background is white:
whatever paints the pinned bar — this rule, the theme's "shown" state, the
scroll-down state — lands on the same solid white. */
body:not(.elementor-editor-active) .vamtam-sticky-header {
--vamtam-sticky-header-bg-color: #FFFFFF !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
}
body:not(.elementor-editor-active) .vamtam-sticky-header--transparent-header::before {
/* The theme reveals this overlay below its mobile breakpoint, which is the
home header's at-rest solid state on a phone — it keeps the dark navy and
the white logo. White belongs to the pinned state only, below. */
background-color: #0E355F !important;
background-image: none !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
}
.vxn-svc-card {
position: relative;
overflow: hidden;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
border-radius: 8px;
background: var(--vxn-navy-dark) !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-end !important;
align-items: stretch !important;
}
a.vxn-svc-card,
a.vxn-svc-card:hover,
a.vxn-svc-card:focus {
text-decoration: none !important;
color: #FFFFFF !important;
}
.elementor-button .elementor-button-text {
white-space: nowrap;
}
.elementor-17 .elementor-element-636c472 .elementor-heading-title {
font-size: clamp(28px, 3vw, 42px) !important;
line-height: 1.25 !important;
}
.elementor-17 .elementor-element.elementor-element-611b40a.e-con {
--min-height: clamp(440px, 62vh, 600px);
--margin-top: 70px;
--margin-bottom: 0px;
}
.elementor-17 .elementor-element.elementor-element-1f79b02.e-con {
--align-self: center;
}
.elementor-17 .elementor-element.elementor-element-c430c42 {
--margin-bottom: 0px;
--margin-right: 0px;
}
.elementor-element-1c4cf6b .elementor-heading-title {
font-size: clamp(28px, 3vw, 42px) !important;
line-height: 1.25 !important;
}
.elementor-2421 .elementor-element-35b5e58 img {
aspect-ratio: 608 / 658;
object-fit: cover;
border-radius: 8px;
display: block;
}
.elementor-2421 .e-con-inner {
position: relative;
}
.elementor-2421 .elementor-element-35b5e58 a {
display: block;
position: relative;
border-radius: 8px;
overflow: hidden;
}
.elementor-2421 .elementor-element-35b5e58 a::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg,
rgba(14, 53, 95, 0) 0%,
rgba(14, 53, 95, 0) 52%,
rgba(14, 53, 95, .55) 76%,
rgba(14, 53, 95, .94) 100%);
}
.elementor-2421 .elementor-element-e1d7406 {
position: absolute;
left: 24px;
right: 24px;
bottom: 40px;
z-index: 2;
}
.elementor-2421 .elementor-element-e1d7406 .elementor-heading-title {
line-height: 1.2 !important;
}
.elementor-2421 .elementor-element-e1d7406 .elementor-widget-container,
.elementor-2421 .elementor-element-e1d7406 .elementor-heading-title,
.elementor-2421 .elementor-element-7dc0a15 .elementor-widget-container {
margin: 0 !important;
}
.elementor-2421 .elementor-element-e1d7406 .elementor-heading-title,
.elementor-2421 .elementor-element-e1d7406 .elementor-heading-title a {
color: #FFFFFF !important;
}
.elementor-2421 .elementor-element-7dc0a15 {
position: absolute;
left: 24px;
right: 24px;
bottom: 20px;
z-index: 2;
}
.elementor-2421 .elementor-element-7dc0a15,
.elementor-2421 .elementor-element-7dc0a15 a {
color: rgba(242, 245, 241, .85) !important;
}
.vxn-loc {
max-width: 1240px;
margin: 40px auto 100px;
padding: 0 24px;
}
.vxn-loc__head {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 40px;
margin-bottom: 48px;
}
.vxn-loc__chip {
display: inline-block;
background: #F2F2EC;
color: var(--vxn-navy-dark);
font-size: 14px;
line-height: 1;
padding: 9px 14px;
border-radius: 6px;
margin-bottom: 18px;
}
.vxn-loc__title {
margin: 0;
color: #0E1B25;
font-family: "Inter", sans-serif !important;
font-weight: 400 !important;
font-size: clamp(28px, 3vw, 42px) !important;
line-height: 1.25 !important;
}
.vxn-loc__desc {
margin: 0;
max-width: 460px;
color: rgba(14, 27, 37, .75);
font-size: 16px;
line-height: 1.65;
}
/* Entrance animations must never be the reason content is unreadable.
`.elementor-invisible` is visibility:hidden and is only cleared by script,
so it applies solely when scripting is available to clear it again — see the
`vxn-js` marker set at the top of includes/head.php. */
html:not(.vxn-js) .elementor-invisible {
visibility: visible !important;
}
/* Same principle for the home services accordion: the three collapsed panels
keep their copy in the DOM at opacity:0, which a crawler reads but a sighted
user cannot. If the accordion script never runs, show every panel's text. */
html:not(.vxn-js) .vxn-klay__content {
opacity: 1;
transform: none;
pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
.elementor-invisible {
visibility: visible !important;
}
}
.vxn-loc__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
}
/* The group section carries four companies, not three offices. */
.vxn-loc--group .vxn-loc__grid {
grid-template-columns: repeat(4, 1fr);
}
/* Explains why only one office publishes a phone number. */
.vxn-loc__note {
max-width: 78ch;
margin: 30px 0 0;
color: rgba(14, 27, 37, .62);
font-size: 14.5px;
line-height: 1.7;
}
.vxn-loc__media {
position: relative;
border-radius: 8px;
overflow: hidden;
}
.vxn-loc__media img {
display: block;
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
transition: transform .8s cubic-bezier(.22, .61, .36, 1);
}
.vxn-loc__media::after {
content: "";
position: absolute;
inset: 0;
opacity: 0;
background: linear-gradient(180deg,
rgba(14, 53, 95, .25) 0%,
rgba(14, 53, 95, .72) 45%,
rgba(13, 27, 40, .96) 100%);
transition: opacity .5s ease;
}
.vxn-loc__panel {
position: absolute;
left: 22px;
right: 22px;
bottom: 20px;
z-index: 1;
opacity: 0;
transform: translateY(16px);
transition: opacity .5s ease, transform .5s cubic-bezier(.22, .61, .36, 1);
}
.vxn-loc__card:hover .vxn-loc__media::after,
.vxn-loc__card:focus-within .vxn-loc__media::after {
opacity: 1;
}
.vxn-loc__card:hover .vxn-loc__panel,
.vxn-loc__card:focus-within .vxn-loc__panel {
opacity: 1;
transform: translateY(0);
}
.vxn-loc__card:hover .vxn-loc__media img {
transform: scale(1.06);
}
.vxn-loc__city {
margin: 0 0 0px;
color: #FFFFFF !important;
font-size: 16px !important;
font-weight: 500 !important;
line-height: 1.2 !important;
}
.vxn-loc__city span {
font-size: 15px;
font-weight: 400;
color: var(--vxn-gold);
}
.vxn-loc__company {
color: rgba(255, 255, 255, .85);
font-size: 14px;
line-height: normal;
margin-bottom: 8px;
}
.vxn-loc__addr {
margin: 0 0 10px;
color: #FFFFFF;
font-size: 14px;
line-height: 1.55;
}
.vxn-loc__meta {
margin: 0 0 3px;
color: rgba(255, 255, 255, .9);
font-size: 13px;
line-height: 1.6;
}
.vxn-loc__meta strong {
color: #FFFFFF;
font-weight: 600;
}
.vxn-loc__meta a {
color: var(--vxn-gold);
text-decoration: none;
}
.vxn-loc__meta a:hover {
color: #FFFFFF;
}
@media (hover: none) {
.vxn-loc__media::after,
.vxn-loc__panel {
opacity: 1;
transform: none;
}
}
@media (max-width: 1024px) {
.vxn-loc__head {
flex-direction: column;
align-items: flex-start;
gap: 16px;
}
.vxn-loc__grid,
.vxn-loc--group .vxn-loc__grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 700px) {
.vxn-loc__grid,
.vxn-loc--group .vxn-loc__grid {
grid-template-columns: 1fr;
}
}
.vxn-svc-card__media {
position: absolute;
inset: 0;
overflow: hidden;
border-radius: inherit;
}
.vxn-svc-card__media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
will-change: transform, filter;
}
.vxn-svc-card__media::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg,
rgba(14, 53, 95, 0) 0%,
rgba(14, 53, 95, 0) 55%,
rgba(14, 53, 95, .55) 80%,
rgba(14, 53, 95, .92) 100%);
}
.vxn-svc-card__footer {
position: relative;
z-index: 1;
width: 100%;
min-width: 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 18px 20px;
}
.vxn-svc-card__title {
margin: 0;
min-width: 0;
color: #FFFFFF !important;
font-family: "Inter", sans-serif !important;
font-weight: 400 !important;
font-size: 20px !important;
line-height: 1.35 !important;
}
.vxn-svc-card__arrow,
.vxn-svc-card__arrow i {
color: #FFFFFF !important;
}
.vxn-svc-card__arrow {
flex: 0 0 auto;
font-size: 22px;
line-height: 1;
transition: transform .5s cubic-bezier(.22, .61, .36, 1);
}
.vxn-svc-card:hover .vxn-svc-card__arrow {
transform: translateX(8px);
}
@media (min-width: 1025px) {
.vxn-svc-grid>.e-con-inner {
display: block !important;
}
.vxn-svc-row {
display: flex;
gap: 16px;
height: clamp(380px, 32vw, 500px);
}
.vxn-svc-card {
flex-grow: 1 !important;
flex-shrink: 1 !important;
flex-basis: 0 !important;
min-width: 0;
width: auto !important;
transition: flex-grow .65s cubic-bezier(.4, 0, .2, 1);
}
.vxn-svc-row .vxn-svc-card:hover,
.vxn-svc-row .vxn-svc-card:focus-within {
flex-grow: 2.2 !important;
}
.vxn-svc-row .vxn-svc-card__media img {
filter: grayscale(1) brightness(.92);
transition: filter .65s cubic-bezier(.4, 0, .2, 1);
}
.vxn-svc-row .vxn-svc-card:hover .vxn-svc-card__media img,
.vxn-svc-row .vxn-svc-card:focus-within .vxn-svc-card__media img {
filter: grayscale(0) brightness(1);
}
}
@media (max-width: 1024px) {
.vxn-svc-grid>.e-con-inner {
display: grid !important;
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: 320px;
gap: 20px;
}
.vxn-svc-row {
display: contents;
}
.vxn-svc-card {
width: 100% !important;
}
.vxn-svc-card__media img {
transform: scale(1.001);
transition: transform 1.1s cubic-bezier(.22, .61, .36, 1);
}
.vxn-svc-card:hover .vxn-svc-card__media img {
transform: scale(1.1);
}
}
@media (max-width: 767px) {
.vxn-svc-grid>.e-con-inner {
grid-template-columns: 1fr;
grid-auto-rows: 280px;
gap: 16px;
}
.vxn-svc-card__footer {
padding: 18px 20px;
}
}
@media (prefers-reduced-motion: reduce) {
.vxn-svc-card,
.vxn-svc-card__media img,
.vxn-svc-card__title,
.vxn-svc-card__arrow {
transition: none !important;
}
}
.vxn-home-svc-section .vxn-svc-grid {
padding-left: 0 !important;
padding-right: 0 !important;
}
.vxn-home-svc-section .vxn-svc-grid>.e-con-inner {
max-width: none !important;
width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
.vxn-home-svc-section .vxn-svc-card,
.vxn-home-svc-section .vxn-svc-card__media,
.vxn-home-svc-section .vxn-svc-card__media img {
border-radius: 0 !important;
}
.vxn-home-svc-section .elementor-element-85963b4 {
display: none !important;
}
.vxn-home-svc-section {
padding-top: 0px;
}
@media (min-width: 1025px) {
.vxn-home-svc-section .vxn-svc-row {
gap: 0 !important;
}
}
@media (max-width: 1024px) {
.vxn-home-svc-section .vxn-svc-grid>.e-con-inner {
gap: 0 !important;
}
}
@media (max-width: 767px) {
.vxn-home-svc-section {
padding-top: 40px;
}
}
.vxn-offer {
position: relative;
background-color: #0E2233;
background-image:
linear-gradient(90deg,
rgba(14, 30, 44, .30) 0%,
rgba(14, 30, 44, .52) 42%,
rgba(13, 27, 40, .90) 68%,
rgba(13, 27, 40, .97) 100%),
var(--vxn-offer-img);
background-size: cover;
background-position: center left;
background-repeat: no-repeat;
padding: 96px 24px;
margin: 50px 0;
}
.vxn-offer__inner {
max-width: 1280px;
margin: 0 auto;
display: flex;
justify-content: flex-end;
}
.vxn-offer--reverse {
background-image:
linear-gradient(270deg,
rgba(14, 30, 44, .30) 0%,
rgba(14, 30, 44, .52) 42%,
rgba(13, 27, 40, .90) 68%,
rgba(13, 27, 40, .97) 100%),
var(--vxn-offer-img);
background-position: center right;
}
.vxn-offer--reverse .vxn-offer__inner {
justify-content: flex-start;
}
.vxn-offer__content {
width: min(660px, 100%);
}
.vxn-offer__label {
display: inline-block;
color: var(--vxn-gold);
font-size: 14px;
letter-spacing: .12em;
text-transform: uppercase;
margin-bottom: 14px;
}
.vxn-offer__heading {
margin: 0 0 14px !important;
color: #FFFFFF !important;
font-family: "Inter", sans-serif !important;
font-weight: 400 !important;
font-size: clamp(28px, 2.6vw, 40px) !important;
line-height: 1.2 !important;
}
.vxn-offer__sub {
margin: 0 0 42px;
color: rgba(242, 245, 241, .85) !important;
font-size: 16px;
line-height: 1.65;
max-width: 560px;
}
.vxn-offer__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 40px 32px;
}
.vxn-offer__item {
display: flex;
flex-direction: column;
gap: 12px;
}
.vxn-offer__icon {
font-size: 30px;
line-height: 1;
color: #E8EDF2;
}
.vxn-offer__text {
color: #FFFFFF;
font-size: 16px;
line-height: 1.45;
}
@media (max-width: 1024px) {
.vxn-offer {
background-image:
linear-gradient(rgba(13, 27, 40, .88), rgba(13, 27, 40, .92)),
var(--vxn-offer-img);
padding: 72px 20px;
}
.vxn-offer__inner {
justify-content: flex-start;
}
.vxn-offer__grid {
grid-template-columns: repeat(2, 1fr);
gap: 32px 24px;
}
}
@media (max-width: 560px) {
.vxn-offer__grid {
grid-template-columns: 1fr;
gap: 26px;
}
}
.elementor-widget-heading .elementor-heading-title[class*=elementor-size-]>a {
font-size: 16px;
/* font-weight: 600; */
}
.vxn-klay {
display: flex;
width: 100%;
/* The closed panels carry their label set vertically, so the band needs real
height for those to read — and the open panel's copy sits in the lower half
of a full-bleed photograph. Stacks to auto height below 1024px. */
height: clamp(640px, 84vh, 840px);
background: var(--vxn-grad-navy);
overflow: hidden;
}
.vxn-klay__panel {
position: relative;
overflow: hidden;
display: block;
flex: 1 1 0;
min-width: 0;
text-decoration: none !important;
color: #FFFFFF !important;
border-left: 1px solid rgba(255, 255, 255, .08);
transition: flex-grow .8s cubic-bezier(.4, 0, .2, 1);
}
.vxn-klay__panel:first-child {
border-left: none;
}
.vxn-klay__panel.is-active {
flex-grow: 7;
}
.vxn-klay__bg {
position: absolute;
inset: 0;
}
.vxn-klay__bg img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
border-radius: 0 !important;
opacity: .16;
filter: grayscale(.65) brightness(.75);
transform: scale(1.05);
transition: opacity .8s cubic-bezier(.4, 0, .2, 1),
filter .8s cubic-bezier(.4, 0, .2, 1),
transform .8s cubic-bezier(.4, 0, .2, 1);
will-change: opacity, filter, transform;
}
.vxn-klay__bg::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg,
rgba(13, 27, 40, .58) 0%,
rgba(13, 27, 40, .24) 42%,
rgba(13, 27, 40, 0) 72%);
opacity: 0;
transition: opacity .8s cubic-bezier(.4, 0, .2, 1);
}
.vxn-klay__panel.is-active .vxn-klay__bg img {
opacity: 1;
filter: grayscale(0) brightness(1);
transform: scale(1);
}
.vxn-klay__panel.is-active .vxn-klay__bg::after {
opacity: 1;
}
.vxn-klay__label {
position: absolute;
left: 50%;
bottom: 48px;
writing-mode: vertical-rl;
transform: translateX(-50%) rotate(180deg);
font-family: "Inter", sans-serif;
font-size: clamp(19px, 1.6vw, 27px);
letter-spacing: .05em;
line-height: 1;
white-space: nowrap;
color: var(--vxn-gold);
opacity: 1;
transition: opacity .45s ease;
}
.vxn-klay__panel.is-active .vxn-klay__label {
opacity: 0;
}
/* One accent colour per collapsed panel label instead of a uniform gold.
The active panel hides its own label, so with the first panel open the
three visible labels read teal / pink / orange, matching the reference.
Panel 1 carries the fourth accent for when another panel is open. */
.vxn-klay__panel:nth-child(1) .vxn-klay__label {
color: #A97BFF;
}
.vxn-klay__panel:nth-child(2) .vxn-klay__label {
color: #2ED9C3;
}
.vxn-klay__panel:nth-child(3) .vxn-klay__label {
color: #FF3B9A;
}
.vxn-klay__panel:nth-child(4) .vxn-klay__label {
color: #FF7A33;
}
.vxn-klay__content {
position: absolute;
z-index: 1;
left: clamp(28px, 4.5vw, 72px);
top: clamp(52px, 10vh, 104px);
max-width: min(540px, 62%);
opacity: 0;
transform: translateY(16px);
transition: opacity .3s ease, transform .3s ease;
pointer-events: none;
}
.vxn-klay__panel.is-active .vxn-klay__content {
opacity: 1;
transform: none;
transition: opacity .55s ease .3s, transform .55s ease .3s;
pointer-events: auto;
}
.vxn-klay__title {
margin: 0 0 14px;
font-family: "Inter", sans-serif !important;
font-weight: 400 !important;
color: #FFFFFF !important;
font-size: clamp(30px, 3vw, 44px) !important;
line-height: 1.15 !important;
}
.vxn-klay__desc {
margin: 0 0 28px;
max-width: 46ch;
color: rgba(255, 255, 255, .88);
font-size: clamp(15px, 1.1vw, 17px);
line-height: 1.6;
}
.vxn-klay__btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 0;
border: none;
background: none;
color: #FFFFFF;
font-size: 16px;
line-height: 1;
}
.vxn-klay__btn i {
font-size: 15px;
line-height: 1;
transition: transform .35s ease;
}
.vxn-klay__panel.is-active:hover .vxn-klay__btn i {
transform: translateX(6px);
}
@media (max-width: 1024px) {
.vxn-klay {
flex-direction: column;
height: auto;
}
.vxn-klay__panel {
flex: 0 0 auto !important;
border-left: none;
border-top: 1px solid rgba(255, 255, 255, .1);
}
.vxn-klay__panel:first-child {
border-top: none;
}
.vxn-klay__label {
display: none;
}
.vxn-klay__bg img,
.vxn-klay__panel.is-active .vxn-klay__bg img {
opacity: 1;
filter: none;
transform: none;
}
.vxn-klay__bg::after,
.vxn-klay__panel.is-active .vxn-klay__bg::after {
opacity: 1;
background: linear-gradient(90deg,
rgba(13, 27, 40, .86) 0%,
rgba(13, 27, 40, .55) 55%,
rgba(13, 27, 40, .25) 100%);
}
.vxn-klay__content,
.vxn-klay__panel.is-active .vxn-klay__content {
position: relative;
left: auto;
top: auto;
max-width: 100%;
opacity: 1;
transform: none;
pointer-events: auto;
padding: 44px 24px;
}
.vxn-klay__title {
font-size: 27px !important;
}
.vxn-klay__desc {
font-size: 15px;
margin-bottom: 22px;
}
}
@media (prefers-reduced-motion: reduce) {
.vxn-klay__panel,
.vxn-klay__bg img,
.vxn-klay__bg::after,
.vxn-klay__label,
.vxn-klay__content,
.vxn-klay__btn,
.vxn-klay__btn i {
transition: none !important;
}
}
/* ==========================================================================
THE SERVICES ROW FRAMER MOTION DRIVES (20260917) —
components/motion/UaeKlayMotion.tsx, which has the full account of why the
band felt "chonky" and what each of the rules below is for.
Scoped to [data-vxn-klay="motion"], which is the UAE home page's row of six
and nothing else: the India home's four-panel accordion keeps the script and
the timings it has always had. Every state the band can be in looks exactly
as it did; only the movement between states is different.
========================================================================== */
.vxn-klay[data-vxn-klay="motion"] {
--vxn-klay-paint: .7s;
--vxn-klay-ease: cubic-bezier(.22, 1, .36, 1);
}
/* The widths are written inline by a spring, frame by frame; a CSS transition
on flex-grow would ease values that are already being eased, one frame
behind. The background-color transition valunxt-landing.css adds stays.
`isolation: isolate` makes each panel the root its frost samples from, so a
panel that only slides along the row while another opens keeps the blur it
already has instead of recomputing it on every frame. The panels never
overlap, so the stacking order between them is unchanged. */
.vxn-klay[data-vxn-klay="motion"] .vxn-klay__panel {
transition: background-color .6s ease;
isolation: isolate;
}
/* THE FROST, CROSS-FADED. valunxt-landing.css draws the sheet with
`.vxn-klay--six .vxn-klay__panel:not(.is-active)::after`, so it is created
the instant a panel closes and destroyed the instant one opens — a pop on
both panels on the first frame of every hover. Here it exists on every
panel, as the same sheet, and fades: fully on over a closed panel, fully off
over the open one, which is exactly what the two resting states were.
Written at (0,4,1) so it clears that rule's (0,3,1) whichever sheet loads
last; the hover rule there that thins the frost still applies, and now
eases. */
.vxn-klay.vxn-klay--six[data-vxn-klay="motion"] .vxn-klay__panel::after {
content: "";
position: absolute;
inset: 0;
-webkit-backdrop-filter: blur(7px) saturate(105%);
backdrop-filter: blur(7px) saturate(105%);
background: linear-gradient(to top,
rgba(16, 20, 28, .88) 0%,
rgba(16, 20, 28, .84) 20%,
rgba(17, 22, 31, .78) 40%,
rgba(18, 24, 34, .45) 62%,
rgba(20, 27, 38, .24) 100%);
border-left: 1px solid rgba(255, 255, 255, .10);
pointer-events: none;
opacity: 1;
transition:
opacity var(--vxn-klay-paint) var(--vxn-klay-ease),
-webkit-backdrop-filter .6s var(--vxn-klay-ease),
backdrop-filter .6s var(--vxn-klay-ease);
}
.vxn-klay.vxn-klay--six[data-vxn-klay="motion"] .vxn-klay__panel.is-active::after {
opacity: 0;
}
/* THE FROST, BAKED. The live `backdrop-filter` above is what made this band
stall: it is recomputed on every frame anything behind it changes, which
while the band moves is every frame, on five sheets at once — measured at
300 to 940ms a frame on an integrated GPU. components/motion/klay-frost.ts
draws the same result once, as a picture (the closed panel's photograph,
zoomed, filtered and 92% opaque over the ground, blurred 7px and saturated
5%), and sets it on the panel as --vxn-frost with data-vxn-frost="baked".
From then on the sheet is that picture under the same gradient, sized by
`cover` exactly as the photograph beneath it is, and nothing is blurred
while anything moves.
Written at (0,5,1), so it also clears the hover rule in valunxt-landing.css
that thinned the live blur under the pointer. That state lasted for the
70ms before a hovered panel opens and could not be seen.
A panel whose picture is not ready yet, or a browser whose canvas cannot
filter, keeps the live frost above. */
.vxn-klay.vxn-klay--six[data-vxn-klay="motion"] .vxn-klay__panel[data-vxn-frost="baked"]::after {
-webkit-backdrop-filter: none;
backdrop-filter: none;
background:
linear-gradient(to top,
rgba(16, 20, 28, .88) 0%,
rgba(16, 20, 28, .84) 20%,
rgba(17, 22, 31, .78) 40%,
rgba(18, 24, 34, .45) 62%,
rgba(20, 27, 38, .24) 100%),
var(--vxn-frost) center / cover no-repeat;
transition: opacity var(--vxn-klay-paint) var(--vxn-klay-ease);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.vxn-klay.vxn-klay--six[data-vxn-klay="motion"] .vxn-klay__panel::after {
background: linear-gradient(to top,
rgba(16, 20, 28, .92) 0%,
rgba(16, 20, 28, .89) 20%,
rgba(17, 22, 31, .84) 40%,
rgba(18, 24, 34, .62) 62%,
rgba(20, 27, 38, .48) 100%);
}
}
/* The photograph, its scrim and its slow settle, all on the one curve.
THE PHOTOGRAPHS KEEP THEIR OWN LAYERS, as the base rule above has always
given them (`will-change` on .vxn-klay__bg img). For a day this row dropped
the hint and raised it only while the band moved, to save GPU memory, and
measured that was the worst of both: every raise re-rasterised six
full-bleed pictures and every drop merged them back, a stall at each end of
every hover. Nothing here overrides the hint now. */
.vxn-klay[data-vxn-klay="motion"] .vxn-klay__bg img {
transition:
opacity var(--vxn-klay-paint) var(--vxn-klay-ease),
filter var(--vxn-klay-paint) var(--vxn-klay-ease),
transform 1.1s var(--vxn-klay-ease);
}
.vxn-klay[data-vxn-klay="motion"] .vxn-klay__bg::after {
transition: opacity var(--vxn-klay-paint) var(--vxn-klay-ease);
}
/* The vertical name. It waits for a closing panel to narrow before it comes
back, rather than appearing across a panel that is still wide, and leaves an
opening one at once. Both halves are named: valunxt-landing.css transitions
its transform too, for the 6px nudge under the pointer. */
.vxn-klay[data-vxn-klay="motion"] .vxn-klay__label {
transition:
opacity .5s var(--vxn-klay-ease) .22s,
transform .55s var(--vxn-klay-ease);
}
.vxn-klay[data-vxn-klay="motion"] .vxn-klay__panel.is-active .vxn-klay__label {
transition:
opacity .25s ease 0s,
transform .55s var(--vxn-klay-ease);
}
/* The open panel's copy box. It only has to clear quickly and come back
quickly: the heading, the sentence and "Learn more" inside it are brought
in one after another by the engine. */
.vxn-klay[data-vxn-klay="motion"] .vxn-klay__content {
transition: opacity .22s ease, transform .22s ease;
}
.vxn-klay[data-vxn-klay="motion"] .vxn-klay__panel.is-active .vxn-klay__content {
transition:
opacity .35s var(--vxn-klay-ease) .1s,
transform .6s var(--vxn-klay-ease) .1s;
}
@media (prefers-reduced-motion: reduce) {
.vxn-klay[data-vxn-klay="motion"] .vxn-klay__panel::after {
transition: none !important;
}
}
/* --------------------------------------------------------------------------
THE ROW, STACKED (20260917, second pass) — UaeKlayMotion.tsx adds
`.is-stacked` on a desktop, and has the account of why. Every panel becomes
the full OPEN width, absolutely placed and layered above the panel to its
left; the engine writes one translate3d per panel per frame and nothing in
the row is laid out or rasterised while it moves. Without the class (bundle
blocked, phone, reduced motion) every rule above still draws the row in flex.
--klay-open and --klay-shut are the two widths in px, set by the engine.
-------------------------------------------------------------------------- */
.vxn-klay[data-vxn-klay="motion"].is-stacked {
display: block;
position: relative;
}
.vxn-klay[data-vxn-klay="motion"].is-stacked .vxn-klay__panel {
position: absolute;
top: 0;
left: 0;
width: var(--klay-open, 54.6%);
height: 100%;
flex: none;
will-change: transform;
backface-visibility: hidden;
transition: none;
}
/* The closed look is the real .vxn-klay__frost element below, so the pseudo
sheet — and with it the last live backdrop-filter — is off in this mode. */
.vxn-klay.vxn-klay--six[data-vxn-klay="motion"].is-stacked .vxn-klay__panel::after {
content: none !important;
}
/* The photograph is never dimmed, filtered or resized here: the frost above it
is opaque once baked, so the closed state needs nothing from the picture.
Only its slow scale settle is kept, which is a transform. */
.vxn-klay.vxn-klay--six[data-vxn-klay="motion"].is-stacked .vxn-klay__panel .vxn-klay__bg img,
.vxn-klay.vxn-klay--six[data-vxn-klay="motion"].is-stacked .vxn-klay__panel:not(.is-active):hover .vxn-klay__bg img {
opacity: 1;
filter: none;
transition: transform 1.1s var(--vxn-klay-ease);
}
.vxn-klay[data-vxn-klay="motion"].is-stacked .vxn-klay__frost {
position: absolute;
inset: 0;
pointer-events: none;
will-change: opacity;
background:
linear-gradient(to top,
rgba(16, 20, 28, .92) 0%,
rgba(16, 20, 28, .89) 20%,
rgba(17, 22, 31, .84) 40%,
rgba(18, 24, 34, .62) 62%,
rgba(20, 27, 38, .48) 100%);
}
.vxn-klay[data-vxn-klay="motion"].is-stacked .vxn-klay__panel[data-vxn-frost="baked"] .vxn-klay__frost {
background:
linear-gradient(to top,
rgba(16, 20, 28, .88) 0%,
rgba(16, 20, 28, .84) 20%,
rgba(17, 22, 31, .78) 40%,
rgba(18, 24, 34, .45) 62%,
rgba(20, 27, 38, .24) 100%),
var(--vxn-frost) center / cover no-repeat;
}
/* The vertical name sits in the middle of the CLOSED width, which is no longer
half the panel's own. */
.vxn-klay[data-vxn-klay="motion"].is-stacked .vxn-klay__label {
left: calc(var(--klay-shut, 9%) / 2);
}
.elementor-element.elementor-element-682a6a8.e-con {
--margin-top: 90px;
--margin-bottom: 90px;
}
@media (max-width: 767px) {
.elementor-element.elementor-element-682a6a8.e-con {
--margin-top: 56px;
--margin-bottom: 56px;
}
}
.elementor-element.elementor-element-6b781e9.e-con {
--margin-top: 90px;
}
@media (max-width: 767px) {
.elementor-element.elementor-element-6b781e9.e-con {
--margin-top: 56px;
}
}
.elementor-17 .elementor-element.elementor-element-4b2e43b.e-con {
background-color: rgba(0, 83, 183, 0.14);
background-image: linear-gradient(135deg,
rgba(0, 83, 183, 0.24) 0%,
rgba(0, 83, 183, 0.05) 100%);
-webkit-backdrop-filter: blur(14px) saturate(120%);
backdrop-filter: blur(14px) saturate(120%);
border-width: 1px;
border-color: rgba(0, 83, 183, 0.40);
--border-color: rgba(0, 83, 183, 0.40);
border-radius: 12px;
--border-radius: 12px 12px 12px 12px;
box-shadow: 0 12px 34px rgba(14, 53, 95, 0.10),
inset 0 1px 0 rgba(255, 255, 255, 0.50);
--padding-top: 12px;
--padding-bottom: 12px;
}
@media (min-width: 1025px) {
.elementor-17 .elementor-element.elementor-element-761c5fe {
--align-items: stretch;
}
.elementor-17 .elementor-element.elementor-element-670c111 {
--min-height: 0px;
}
}
body {
--vxn-hero-overlay: linear-gradient(90deg,
rgba(14, 53, 95, 0.90) 0%,
rgba(14, 53, 95, 0.72) 38%,
rgba(14, 53, 95, 0.42) 68%,
rgba(14, 53, 95, 0.22) 100%);
}
@media (max-width: 767px) {
body {
--vxn-hero-overlay: linear-gradient(180deg,
rgba(14, 53, 95, 0.82) 0%,
rgba(14, 53, 95, 0.74) 100%);
}
}
.elementor-3752 .elementor-element.elementor-element-c4d353f.e-con,
.elementor-3752 .elementor-element.elementor-element-c4d353f:not(.elementor-motion-effects-element-type-background) {
background-color: #0E355F;
background-image: var(--vxn-hero-overlay),
var(--vxn-hero-img, url("../content/uploads/new-folder/about-us-banner.webp"));
background-position: center center, center center;
background-size: cover, cover;
background-repeat: no-repeat, no-repeat;
padding: 100px 50px;
/* margin: 10px 0; */
}
.elementor-3752 .elementor-element.elementor-element-c739b5b .elementor-heading-title,
.elementor-3752 .elementor-element.elementor-element-c739b5b .elementor-heading-title a,
.elementor-3752 .elementor-element.elementor-element-1707a75 .elementor-heading-title {
color: rgba(255, 255, 255, 0.82);
}
.elementor-3752 .elementor-element.elementor-element-c739b5b .elementor-heading-title a:hover,
.elementor-3752 .elementor-element.elementor-element-c739b5b .elementor-heading-title a:focus {
color: #ffffff;
}
.elementor-3752 .elementor-element.elementor-element-16f0cb0 .elementor-heading-title {
color: #ffffff;
}
.elementor-3752 .elementor-element.elementor-element-44a2511 {
color: rgba(255, 255, 255, 0.90);
}
.elementor-3752 .elementor-element.elementor-element-3f5733d {
--divider-color: rgba(255, 255, 255, 0.32);
}
body.elementor-page-248 {
--vxn-hero-img: url("../content/uploads/new-folder/services-1.webp");
}
body.elementor-page-258 {
--vxn-hero-img: url("../content/uploads/banners/about-us.webp");
}
body.elementor-page-264 {
--vxn-hero-img: url("../content/uploads/new-folder/about-us-1.webp");
}
body.elementor-page-268 {
--vxn-hero-img: url("../content/uploads/new-folder/career-1.webp");
}
body.elementor-page-296 {
--vxn-hero-img: url("../content/uploads/new-folder/client-success-2.webp");
}
body.elementor-page-9001 {
--vxn-hero-img: url("../content/uploads/2025/04/low-view-modern-skyscrapers-office-buildings.jpg");
}
body.elementor-page-262 {
--vxn-hero-img: url("../content/uploads/banners/insights.webp");
}
body.elementor-page-3 {
--vxn-hero-img: url("../content/uploads/new-folder/who-we-are-2.webp");
}
body.elementor-page-2034 {
--vxn-hero-img: url("../content/uploads/new-folder/who-we-are-2.webp");
}
.elementor-3752 .elementor-element.elementor-element-c4d353f.vxn-hero--group {
--vxn-hero-img: url("../content/uploads/banners/our-group.webp");
}
.elementor-3752 .elementor-element.elementor-element-c4d353f.vxn-hero--corporate {
--vxn-hero-img: url("../content/uploads/new-folder/valunxt-corporate-services.webp");
}
.elementor-3752 .elementor-element.elementor-element-c4d353f.vxn-hero--reliant {
--vxn-hero-img: url("../content/uploads/new-folder/reliant-surveyors-1.webp");
}
.elementor-element.elementor-element-d726ecf.e-con.e-parent {
background-color: #0E355F;
background-image: var(--vxn-hero-overlay),
var(--vxn-hero-img, url("../content/uploads/banners/insights.webp"));
background-position: center center, center center;
background-size: cover, cover;
background-repeat: no-repeat, no-repeat;
padding: 100px 50px;
margin-bottom: 50px;
}
.elementor-element.elementor-element-d726ecf.e-con .elementor-heading-title,
.elementor-element.elementor-element-d726ecf.e-con .elementor-heading-title a {
color: #ffffff;
}
.elementor-element-d726ecf.e-con .elementor-element-3b31e9d .elementor-heading-title,
.elementor-element-d726ecf.e-con .elementor-element-3b31e9d .elementor-heading-title a {
color: rgba(255, 255, 255, 0.82);
}
.elementor-element-d726ecf.e-con .elementor-element-3b31e9d .elementor-heading-title a:hover,
.elementor-element-d726ecf.e-con .elementor-element-3b31e9d .elementor-heading-title a:focus {
color: #ffffff;
}
.elementor-element.elementor-element-d726ecf .elementor-widget-text-editor,
.elementor-element.elementor-element-d726ecf .elementor-widget-theme-post-excerpt {
color: rgba(255, 255, 255, 0.90);
}
.elementor-3947 .elementor-element.elementor-element-bc5a61e {
display: block !important;
}
.elementor-3947 .elementor-element.elementor-element-110cfac {
--divider-color: rgba(255, 255, 255, 0.32);
}
body.elementor-page-250 {
--vxn-hero-img: url("../content/uploads/new-folder/real-estate-wealth-advisory-1.webp");
}
body.elementor-page-252 {
--vxn-hero-img: url("../content/uploads/banners/capital-advisory.webp");
}
body.elementor-page-254 {
--vxn-hero-img: url("../content/uploads/new-folder/research-intelligence-1.webp");
}
body.elementor-page-256 {
--vxn-hero-img: url("../content/uploads/banners/technology-and-ai.webp");
}
.elementor-element.elementor-element-4f2e97ad.e-con.e-parent {
background-color: #0E355F;
background-image: var(--vxn-hero-overlay),
url("../content/uploads/new-folder/insights-main.webp");
background-position: center center, center center;
background-size: cover, cover;
background-repeat: no-repeat, no-repeat;
}
.elementor-element.elementor-element-4f2e97ad.e-con .elementor-heading-title,
.elementor-element.elementor-element-4f2e97ad.e-con .elementor-heading-title a {
color: #ffffff;
}
.elementor-element.elementor-element-4f2e97ad .elementor-element-1ccc37a0 {
--divider-color: rgba(255, 255, 255, 0.32);
}
.elementor-2094 .elementor-element.elementor-element-97f60b2>.elementor-widget-container {
border-style: none;
width: 85%;
text-align: justify;
}
body.elementor-page-262 .e-loop__load-more,
body.elementor-page-262 .e-load-more-anchor,
body.elementor-page-262 .e-load-more-message,
body.elementor-page-262 .e-load-more-spinner {
display: none !important;
}
.elementor img.vxn-blog-hero,
img.vxn-blog-hero {
width: 100% !important;
height: clamp(240px, 38vw, 460px) !important;
max-width: 100% !important;
object-fit: cover !important;
object-position: center !important;
border-radius: 12px;
margin: 0 0 28px;
display: block;
}
.elementor-page-7647 .elementor-widget-theme-post-content>.elementor-widget-container {
max-width: 900px;
margin-left: auto;
margin-right: auto;
padding-left: 22px;
padding-right: 22px;
}
.elementor-page-7647 .elementor-widget-theme-post-content p {
margin: 0 0 22px;
line-height: 1.85;
}
.elementor-page-7647 .elementor-widget-theme-post-content h2,
.elementor-page-7647 .elementor-widget-theme-post-content h3 {
margin: 42px 0 14px;
line-height: 1.32;
}
.elementor-page-7647 img.vxn-blog-hero {
margin: 4px 0 44px;
}
.elementor-page-7647 .elementor-element.elementor-element-c0f96e2 {
--padding-top: 44px;
--padding-bottom: 36px;
padding-top: 44px;
padding-bottom: 36px;
}
.elementor-page-7647 .vxn-author .elementor-post-info__item--type-author {
color: var(--e-global-color-vamtam_accent_1);
font-weight: 600;
}
.elementor-17 .elementor-element-61f0432 .vxn-icon,
.elementor-17 .elementor-element-d954cf7 .vxn-icon,
.elementor-17 .elementor-element-0dd4cbe .vxn-icon {
background: none !important;
padding: 0 !important;
border-radius: 0 !important;
width: 54px !important;
height: 54px !important;
}
.elementor-2190 .vxn-wwa {
text-align: center;
padding: 4px 0;
}
.elementor-2190 .vxn-wwa__intro {
max-width: 780px;
margin: 0 auto 60px;
font-family: "Inter", sans-serif;
font-size: clamp(20px, 1.9vw, 27px);
line-height: 1.5;
color: #14202b;
}
.elementor-2190 .vxn-wwa__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 34px 28px;
max-width: 1060px;
margin: 0 auto;
}
.elementor-2190 .vxn-wwa__item {
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
gap: 14px;
padding: 22px 18px;
background-color: #FFFFFF;
border: 1px solid rgba(14, 53, 95, .10);
border-radius: 14px;
transition: border-color .4s ease, background-color .4s ease;
}
.elementor-2190 .vxn-wwa__item::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
z-index: 2;
background: var(--vxn-grad-gold);
opacity: 0;
transition: opacity .4s ease;
}
.elementor-2190 .vxn-wwa__item:hover::before,
.elementor-2190 .vxn-wwa__item:focus-within::before {
opacity: 1;
}
.elementor-2190 .vxn-wwa__icon {
position: relative;
z-index: 1;
box-sizing: content-box;
width: 32px;
height: 32px;
padding: 12px;
flex: 0 0 auto;
border-radius: 50%;
background-color: rgba(0, 83, 183, .06);
stroke: var(--vxn-navy-dark) !important;
transition: background-color .4s ease, stroke .4s ease;
}
.elementor-2190 .vxn-wwa__item:hover .vxn-wwa__icon,
.elementor-2190 .vxn-wwa__item:focus-within .vxn-wwa__icon {
background-color: rgba(0, 83, 183, .18);
stroke: var(--vxn-gold-dark) !important;
}
.elementor-2190 .vxn-wwa__label {
position: relative;
z-index: 1;
font-size: 15px;
line-height: 1.45;
color: var(--vxn-navy-dark);
max-width: 220px;
}
.elementor-2190 .vxn-wwa__item:hover,
.elementor-2190 .vxn-wwa__item:focus-within {
background-color: #FCF9F4;
border-color: rgba(0, 83, 183, .55);
}
@media (max-width: 900px) {
.elementor-2190 .vxn-wwa__grid {
grid-template-columns: repeat(2, 1fr);
gap: 44px 24px;
}
}
@media (max-width: 520px) {
.elementor-2190 .vxn-wwa__grid {
grid-template-columns: 1fr;
}
}
.elementor-17 .elementor-element.elementor-element-926da5a {
position: relative;
overflow: hidden;
}
.elementor-17 .elementor-element.elementor-element-926da5a::before {
background-image: none !important;
}
.elementor-17 .elementor-element.elementor-element-926da5a>.vxn-hero-video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
pointer-events: none;
}
.elementor-17 .elementor-element.elementor-element-926da5a>.vxn-hero-scrim {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background: linear-gradient(90deg,
rgba(14, 53, 95, .85) 0%,
rgba(14, 53, 95, .62) 40%,
rgba(14, 53, 95, .30) 72%,
rgba(14, 53, 95, .12) 100%);
}
.elementor-17 .elementor-element.elementor-element-926da5a>.e-con-inner {
position: relative;
z-index: 1;
}
.vxn-logo-slider {
width: 100%;
max-width: 960px;
margin: 0 auto;
--vxn-visible: 3;
}
@media (max-width: 991px) {
.vxn-logo-slider {
--vxn-visible: 2;
}
}
@media (max-width: 639px) {
.vxn-logo-slider {
--vxn-visible: 1;
}
}
.vxn-logo-slider__viewport {
width: 100%;
overflow: hidden;
padding: 22px 0;
}
.vxn-logo-slider__track {
display: flex;
will-change: transform;
}
.vxn-logo-slider__slide {
flex: 0 0 calc(100% / var(--vxn-visible, 3));
min-width: 0;
display: flex;
align-items: center;
justify-content: center;
height: 56px;
overflow: visible;
box-sizing: border-box;
}
.vxn-logo-slider__slide a {
display: flex;
align-items: center;
justify-content: center;
}
.vxn-logo-slider .vxn-logo-slider__slide img {
display: block;
height: 56px !important;
width: auto !important;
max-width: none !important;
object-fit: contain !important;
}
.vxn-logo-slider .vxn-logo-slider__slide img[src*="/reliant-surveyors.svg"] {
height: 70px !important;
width: auto !important;
max-width: none !important;
}
.vxn-logo-slider__dots {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
margin-top: 26px;
}
.vxn-logo-slider .vxn-logo-slider__dots .vxn-logo-slider__dot {
-webkit-appearance: none !important;
appearance: none !important;
width: 8px !important;
height: 8px !important;
min-width: 0 !important;
min-height: 0 !important;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
border-radius: 50% !important;
background-color: #C7CBD1 !important;
background-image: none !important;
box-shadow: none !important;
cursor: pointer;
transition: background-color .3s ease, transform .3s ease;
}
.vxn-logo-slider .vxn-logo-slider__dots .vxn-logo-slider__dot:hover {
background-color: #9BA2AA !important;
}
.vxn-logo-slider .vxn-logo-slider__dots .vxn-logo-slider__dot.is-active {
background-color: #0B2DBE !important;
transform: scale(1.4) !important;
}
@media (max-width: 767px) {
body {
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
img,
svg,
video,
iframe {
max-width: 100%;
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
li,
a,
.elementor-heading-title {
overflow-wrap: break-word;
word-break: break-word;
}
h1,
.elementor-widget-heading h1.elementor-heading-title {
font-size: 30px !important;
line-height: 1.18 !important;
}
h2,
.elementor-widget-heading h2.elementor-heading-title {
font-size: 26px !important;
line-height: 1.22 !important;
}
h3,
.elementor-widget-heading h3.elementor-heading-title {
font-size: 21px !important;
line-height: 1.3 !important;
}
h4,
.elementor-widget-heading h4.elementor-heading-title {
font-size: 19px !important;
line-height: 1.35 !important;
}
h5,
.elementor-widget-heading h5.elementor-heading-title {
font-size: 17px !important;
line-height: 1.4 !important;
}
h6,
.elementor-widget-heading h6.elementor-heading-title {
font-size: 15px !important;
line-height: 1.45 !important;
}
.elementor-widget-text-editor p,
.elementor-widget-text-editor li,
.elementor-post__excerpt p,
article p,
article li,
.vxn-loc__addr,
.vxn-loc__desc,
.vxn-loc__meta {
line-height: 1.6 !important;
}
.elementor-widget-text-editor p {
margin-bottom: 1em;
}
}
@media (max-width: 480px) {
h1,
.elementor-widget-heading h1.elementor-heading-title {
font-size: 27px !important;
}
h2,
.elementor-widget-heading h2.elementor-heading-title {
font-size: 23px !important;
}
h3,
.elementor-widget-heading h3.elementor-heading-title {
font-size: 20px !important;
}
}
@media (min-width: 768px) {
/* Tight to the bar. The bar goes white while a menu is open (.vxn-nav-open),
so a deep gap here left a strip of hero showing between two white surfaces. */
.elementor-nav-menu--main.elementor-nav-menu__container>ul.elementor-nav-menu>li.menu-item.menu-item-has-children>ul.sub-menu {
margin-top: 10px !important;
}
/* Hover bridge: the panel sits below the bar with a gap, so an invisible slab
above it keeps :hover alive while the pointer crosses. Narrow dropdowns only
— see the mega-menu note below for why the wide panels are excluded. */
.elementor-nav-menu--main>ul>li.menu-item-has-children:not(.vxn-mega)>.sub-menu::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: -32px;
height: 32px;
}
/* A mega panel is ~1200px wide and centred on the viewport, so the bridge
above spanned the WHOLE nav row: once one menu opened, that invisible slab
covered every other item and swallowed the pointer — hovering "Our Group"
kept showing the "Services" panel because the cursor never actually reached
the Our Group
. The bridge therefore hangs off the
instead, where
it is only as wide as the menu item itself.
The selector has to out-rank Elementor's own divider rule,
`.elementor-nav-menu--layout-horizontal .elementor-nav-menu > li:not(:last-child)::after`
(0-3-2), which sets `content: var(--e-nav-menu-divider-content, none)` and
so switches this pseudo-element off entirely. Hence the long selector and
the !importants — without them there is no bridge at all, and the menu only
appears to work because the panel sits a couple of pixels below the item. */
.elementor-nav-menu--main.elementor-nav-menu__container>ul.elementor-nav-menu>li.menu-item.vxn-mega::after {
content: "" !important;
position: absolute !important;
left: 0;
right: 0;
top: 100% !important;
/* The sheet is flush under the bar now, so this only has to cover the few
pixels of bar left below the menu item itself. */
height: 26px !important;
width: auto !important;
background: none !important;
border: 0 !important;
transform: none !important;
/* Inert until the item is actually being hovered, so the strip never eats a
click on the page content sitting just under the bar. Hovering the link
arms it; the pointer then stays inside the
all the way to the panel. */
pointer-events: none;
}
.elementor-nav-menu--main.elementor-nav-menu__container>ul.elementor-nav-menu>li.menu-item.vxn-mega:hover::after,
.elementor-nav-menu--main.elementor-nav-menu__container>ul.elementor-nav-menu>li.menu-item.vxn-mega:focus-within::after {
pointer-events: auto;
}
}
@media (min-width: 768px) {
.elementor-nav-menu--main .vxn-mega {
position: relative;
}
/* Full-bleed sheet: it spans the viewport and sits flush under the bar, which
is what lets the bar itself go white behind it (see .vxn-nav-open). */
.elementor-nav-menu--main .elementor-nav-menu>li.vxn-mega>.vxn-mega__panel {
inset-inline-start: 0 !important;
inset-inline-end: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100vw !important;
max-width: 100vw !important;
margin-top: 0 !important;
padding: 46px 0 44px !important;
background: #ffffff;
border: 0;
border-top: 1px solid rgba(14, 53, 95, 0.10);
border-radius: 0;
box-shadow: 0 28px 48px rgba(11, 26, 38, 0.14);
}
.elementor-nav-menu--main .vxn-mega:hover>.vxn-mega__panel,
.elementor-nav-menu--main .vxn-mega:focus-within>.vxn-mega__panel {
display: block !important;
}
/* Plain dropdowns (About) open on hover too. SmartMenus only initialises on
the burger drawer's vertical nav — the desktop bar has no `sm-` classes, so
nothing was ever opening these, and Location / Careers / FAQ were reachable
only from the footer. Same CSS-only mechanism the mega panels use. */
.elementor-nav-menu--main>ul>li.menu-item-has-children:not(.vxn-mega):hover>.sub-menu,
.elementor-nav-menu--main>ul>li.menu-item-has-children:not(.vxn-mega):focus-within>.sub-menu {
display: block !important;
}
.elementor-nav-menu--main>ul>li.menu-item-has-children:not(.vxn-mega)>.sub-menu {
padding: 6px 0 !important;
background: #ffffff;
border: 1px solid rgba(14, 53, 95, 0.12);
border-radius: 2px;
box-shadow: 0 20px 44px rgba(11, 26, 38, 0.15);
z-index: 9999;
}
/* The sheet runs edge to edge, but its content keeps the header's measure so
the section title starts on the same line as the logo. Mirrors
`.elementor-location-header .e-con-inner`. */
.elementor-nav-menu--main .vxn-mega__panel>.vxn-mega__wrap {
display: block;
border: 0 !important;
margin: 0 auto !important;
padding: 0 34px !important;
max-width: min(100%, 1560px) !important;
background: transparent !important;
}
/* Stops the theme tinting menu anchors. The colour longhand, not the
shorthand: the promo card is an anchor and sets background-size,
-position and -repeat of its own further down, and the shorthand would
reset all three — with this !important, so they could not be won back. */
.elementor-nav-menu--main .vxn-mega__panel a:hover,
.elementor-nav-menu--main .vxn-mega__panel a:focus {
background-color: transparent !important;
}
}
@media (min-width: 1025px) {
.elementor-nav-menu--main.elementor-nav-menu__container .elementor-nav-menu>li.vxn-mega.menu-item.menu-item-has-children>ul.vxn-mega__panel.sub-menu {
position: fixed !important;
/* Flush against the foot of the bar, not clear of it: the sheet is full
width and the bar goes white behind it, so the two read as one surface
and there is no gap for the pointer to fall through. --vxn-navh tracks
the bar's height, which shrinks once it pins. */
top: var(--vxn-navh, 94px) !important;
inset-inline-start: 0 !important;
inset-inline-end: 0 !important;
left: 0 !important;
right: 0 !important;
transform: none !important;
/* Sized by the insets, not by 100vw: a fixed box's containing block already
excludes a classic scrollbar, where 100vw does not — that difference is a
15px horizontal scrollbar on Windows every time a menu opens. */
width: auto !important;
max-width: none !important;
margin-top: 0 !important;
padding: 46px 0 44px !important;
z-index: 9999 !important;
}
}
/* ==========================================================================
MEGA MENU
Three rails on one sheet: an intro column that names the section and carries
the CTA, a two-up index of links (the substance), and a featured card.
The register is deliberately sober — hairline rules, square corners, flat
icons, text CTAs. An earlier pass used tinted rounded icon tiles and pill
buttons, which read as a consumer SaaS product rather than an advisory firm.
Colour appears twice only: the rule across the head of the panel, and on
hover. Everything else is type and rules.
SCOPING: by nav container, not viewport width. The theme hides the desktop
bar below 1400px (`nav.elementor-nav-menu--main { display:none }` in
elementor-max.css), so a `min-width: 1025px` query would hand the three-rail
layout to the burger drawer for the whole 1025–1399 band. `--main` gets the
rails; `--dropdown` (the drawer) always stacks, at any width.
Markup is built in includes/partials/more-mega.php from vxn_services() /
vxn_companies(), so the menu can never disagree with the pages it links to.
========================================================================== */
.vxn-mega__wrap {
text-align: left;
white-space: normal;
}
/* ---- Shared: type and marks, identical in both navs ---- */
.vxn-mega__head {
display: block;
font-family: "Inter", sans-serif;
font-weight: 400;
color: var(--e-global-color-vamtam_text, #0E355F);
}
.vxn-mega__kicker {
display: block;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 1.6px;
text-transform: uppercase;
color: var(--e-global-color-vamtam_text, #0E355F);
}
.vxn-mega__lede {
display: block;
font-size: 13px;
line-height: 1.6;
color: var(--vxn-muted, #6A7590);
}
.vxn-mega__itembody {
display: block;
min-width: 0;
}
.vxn-mega__itemtitle {
display: block;
font-size: 14.5px;
font-weight: 600;
line-height: 1.3;
letter-spacing: -0.1px;
color: var(--e-global-color-vamtam_text, #0E355F);
transition: color .22s ease;
}
.vxn-mega__item:hover .vxn-mega__itemtitle {
color: var(--vxn-blue, #0B2DBE);
}
.vxn-mega__itemdesc {
margin-top: 4px;
font-size: 12.5px;
font-weight: 400;
line-height: 1.45;
color: var(--vxn-muted, #6A7590);
/* Two lines keeps every row the same height however long the blurb is. */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Flat line icon, no tile. It carries the accent colour on hover — the only
thing that changes besides the rule. */
.vxn-mega__ico {
display: flex;
align-items: center;
justify-content: flex-start;
width: 24px;
height: 22px;
color: #93A3B8;
transition: color .25s ease;
}
.vxn-mega__ico svg {
width: 21px;
height: 21px;
}
.vxn-mega__item:hover .vxn-mega__ico {
color: var(--vxn-blue, #0B2DBE);
}
.vxn-mega__chev {
align-self: center;
font-style: normal;
font-size: 17px;
line-height: 1;
color: var(--vxn-blue, #0B2DBE);
transition: transform .25s ease, opacity .25s ease;
}
.vxn-mega__eyebrow {
display: block;
font-size: 10px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--vxn-muted, #6A7590);
}
/* The ringed arrow that ends every CTA on the sheet. The panel-wide radius
reset below is written as `.vxn-mega__wrap *`, which outranks a bare class —
hence the long selector to keep the ring round. */
.vxn-mega__panel .vxn-mega__wrap .vxn-mega__circ {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 38px;
height: 38px;
border: 1px solid rgba(0, 83, 183, 0.35);
border-radius: 999px !important;
color: var(--vxn-blue, #0B2DBE);
transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}
.vxn-mega__viewall:hover .vxn-mega__circ,
.vxn-mega__card:hover .vxn-mega__circ {
background-color: var(--vxn-blue, #0B2DBE);
border-color: var(--vxn-blue, #0B2DBE);
color: #ffffff;
}
/* Nothing inside the panel is rounded. Elementor's post-139.css carries
`.elementor-139 .elementor-element-1243e1d .elementor-nav-menu--dropdown
li:first-child a { border-top-*-radius: 6px }` (and the same for :last-child),
which outweighs anything we can write by selector alone. The panel is a single
, so that rule caught BOTH CTAs and the featured card, leaving the ruled
underlines curling up at their ends. */
.vxn-mega__panel .vxn-mega__wrap * {
border-radius: 0 !important;
}
/* Elementor's dropdown rules force nowrap on sub-menu text; the panel is a
layout, not a list of one-liners. */
.vxn-mega__panel .vxn-mega__head,
.vxn-mega__panel .vxn-mega__kicker,
.vxn-mega__panel .vxn-mega__lede,
.vxn-mega__panel .vxn-mega__itemtitle,
.vxn-mega__panel .vxn-mega__itemdesc,
.vxn-mega__panel .vxn-mega__eyebrow,
.vxn-mega__panel .vxn-mega__cardtitle {
white-space: normal !important;
}
/* ==========================================================================
Desktop bar (nav.elementor-nav-menu--main) — the three-rail sheet
========================================================================== */
.elementor-nav-menu--main .vxn-mega__inner {
display: grid;
/* Index on the left, the pair of cards on the right — the proportion of the
reference. The cards are given a share rather than a fixed width so the
link titles keep their measure as the viewport narrows. */
grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
gap: 0 64px;
align-items: stretch;
/* All three panels stand the same height. Left to their content they follow
the length of their own link list — Services leads with six entries,
Insights five, Our Group four — so the sheet visibly changed size as you
moved along the bar. This is the height of the longest of them (three rows
of links), so it is a floor the shorter menus rise to rather than a cap on
any of them. */
min-height: 545px;
}
/* ---- Index region (title, links, the ruled CTA at its foot) ---- */
.elementor-nav-menu--main .vxn-mega__main {
display: flex;
flex-direction: column;
min-width: 0;
}
.elementor-nav-menu--main .vxn-mega__list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: 44px;
align-content: start;
}
.elementor-nav-menu--main .vxn-mega__intro {
display: flex;
flex-direction: column;
align-items: flex-start;
margin-bottom: 22px;
}
.elementor-nav-menu--main .vxn-mega__kicker {
margin-bottom: 12px;
color: var(--vxn-blue, #0B2DBE);
}
.elementor-nav-menu--main .vxn-mega__head {
font-size: 40px;
line-height: 1.08;
margin: 0 0 12px;
}
.elementor-nav-menu--main .vxn-mega__lede {
max-width: 46ch;
font-size: 14px;
}
/* The CTA runs the width of the index region under a hairline, with the ringed
arrow on the far right — the "Tous les produits" row of the reference. */
.elementor-nav-menu--main .vxn-mega__panel .vxn-mega__viewall {
display: flex !important;
align-items: center;
justify-content: space-between;
gap: 16px;
/* The theme gives every menu anchor flex-grow:1 and margin:0, which stretched
this link down the whole column — pin it to its content and let the auto
margin push it to the foot. */
flex: 0 0 auto !important;
align-self: stretch;
margin: auto 0 0 !important;
padding: 22px 0 0 !important;
border-top: 1px solid rgba(14, 53, 95, 0.16);
border-radius: 0;
text-decoration: none !important;
background: transparent !important;
font-size: 15px;
font-weight: 500;
letter-spacing: 0;
text-transform: none;
color: var(--vxn-blue, #0B2DBE) !important;
transition: color .25s ease;
}
.elementor-nav-menu--main .vxn-mega__panel .vxn-mega__viewall:hover {
color: var(--vxn-blue-dark, #08248F) !important;
}
/* ---- Link index ---- */
.elementor-nav-menu--main .vxn-mega__panel .vxn-mega__item {
position: relative;
display: grid !important;
grid-template-columns: 24px minmax(0, 1fr) 12px;
align-items: start;
gap: 0 14px;
padding: 26px 6px 26px 0 !important;
border-top: 1px solid rgba(14, 53, 95, 0.10);
border-radius: 0;
text-decoration: none !important;
background: transparent !important;
}
/* Hover is carried by the title, the icon and the chevron alone — no drawn
accent bar down the left edge, and no indent shifting the row sideways (the
indent only existed to make room for that bar). */
.elementor-nav-menu--main .vxn-mega__ico {
margin-top: 1px;
}
.elementor-nav-menu--main .vxn-mega__chev {
opacity: 0;
}
.elementor-nav-menu--main .vxn-mega__item:hover .vxn-mega__chev {
opacity: 1;
transform: translateX(3px);
}
/* ---- Promo cards ----
Two blue panels standing side by side to the right of the index, each a title
over its artwork with a ruled "Discover" row at the foot. They are the only
rounded thing on the sheet, which is why the radius reset above has to be
answered explicitly here, and the only saturated thing on it — the sheet is
white, so the cards are what the eye goes to.
Each carries a slow abstract drift: two soft colour fields, brand blue and
violet, moving behind the content on long unequal cycles so the pair never
visibly loops. They sit at `z-index: -1` inside the card's own stacking
context (`isolation: isolate`), which paints them above the card's background
and below every word on it — no z-index needed on the content. */
.elementor-nav-menu--main .vxn-mega__cards {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px;
align-items: stretch;
}
.elementor-nav-menu--main .vxn-mega__panel .vxn-mega__card {
display: flex !important;
flex-direction: column;
/* The theme centres menu anchors (`align-items: center`), which centred the
caption under a left-aligned image. */
align-items: stretch;
position: relative;
margin: 0 !important;
padding: 22px 22px 18px !important;
/* The image longhand, not the `background` shorthand: the shorthand also
resets background-size, -position and -repeat, and with this !important
it would take them from the block at the foot of this file that sets
them deliberately. */
background-image: linear-gradient(150deg, #0057BE 0%, #0E355F 100%) !important;
border: 1px solid rgba(255, 255, 255, 0.14);
text-decoration: none !important;
/* Clips the drifting fields to the card's rounded corner; `isolate` is what
keeps them above this background and behind the content. */
overflow: hidden;
isolation: isolate;
transition: border-color .3s ease, box-shadow .35s ease;
}
.vxn-mega__panel .vxn-mega__wrap .vxn-mega__card {
border-radius: 14px !important;
}
/* The gradient has to be restated here, not just left to the base rule. The
panel carries `.vxn-mega__panel a:hover { background: transparent !important }`
to stop the theme tinting menu links, and at 0-3-1 that outranks the card's
own 0-3-0 background — so without this the card turns white under the
pointer. This selector is 0-4-0 and wins. One step brighter, so the hover
still registers. */
.elementor-nav-menu--main .vxn-mega__panel .vxn-mega__card:hover {
/* Longhand, for the same reason as the resting rule above. */
background-image: linear-gradient(150deg, #0061D4 0%, #13416F 100%) !important;
border-color: rgba(255, 255, 255, 0.3);
box-shadow: 0 14px 30px -12px rgba(0, 45, 100, .55);
}
/* The two drifting fields. Long, unequal, alternating cycles — 19s against
26s — so the pair never returns to the same arrangement on a visible beat,
and `alternate` means each one eases back rather than snapping to its start. */
.elementor-nav-menu--main .vxn-mega__panel .vxn-mega__card::before,
.elementor-nav-menu--main .vxn-mega__panel .vxn-mega__card::after {
content: "";
position: absolute;
z-index: -1;
border-radius: 50%;
pointer-events: none;
filter: blur(34px);
will-change: transform;
}
.elementor-nav-menu--main .vxn-mega__panel .vxn-mega__card::before {
width: 72%;
aspect-ratio: 1;
left: -20%;
top: -24%;
background: radial-gradient(circle, rgba(143, 183, 255, .85) 0%, rgba(143, 183, 255, 0) 70%);
animation: vxn-mega-drift-a 19s ease-in-out infinite alternate;
}
.elementor-nav-menu--main .vxn-mega__panel .vxn-mega__card::after {
width: 80%;
aspect-ratio: 1;
right: -26%;
bottom: -22%;
background: radial-gradient(circle, rgba(156, 0, 221, .55) 0%, rgba(156, 0, 221, 0) 70%);
animation: vxn-mega-drift-b 26s ease-in-out infinite alternate;
}
/* The second card runs both cycles from the other end, so the pair never drifts
in step with each other. */
.elementor-nav-menu--main .vxn-mega__panel .vxn-mega__card:nth-child(2)::before,
.elementor-nav-menu--main .vxn-mega__panel .vxn-mega__card:nth-child(2)::after {
animation-direction: alternate-reverse;
}
@keyframes vxn-mega-drift-a {
from {
transform: translate3d(0, 0, 0) scale(1);
}
to {
transform: translate3d(30%, 26%, 0) scale(1.3);
}
}
@keyframes vxn-mega-drift-b {
from {
transform: translate3d(0, 0, 0) scale(1.15);
}
to {
transform: translate3d(-26%, -20%, 0) scale(.85);
}
}
@media (prefers-reduced-motion: reduce) {
.elementor-nav-menu--main .vxn-mega__panel .vxn-mega__card::before,
.elementor-nav-menu--main .vxn-mega__panel .vxn-mega__card::after {
animation: none;
}
}
.vxn-mega__cardtitle {
display: block;
margin-top: 6px;
font-family: "Inter", sans-serif;
font-weight: 400;
font-size: 24px;
line-height: 1.15;
color: #FFFFFF;
}
/* The artwork takes whatever height is left between the title and the CTA, so
both cards stand exactly as tall as the index beside them.
The is taken out of flow. Left in it, `height: 100%` has no definite
height to resolve against and falls back to the file's own aspect ratio — so
a portrait-ish photo would set the height of the whole sheet. */
.vxn-mega__panel .vxn-mega__wrap .vxn-mega__cardmedia {
position: relative;
display: block;
flex: 1 1 auto;
height: 0;
min-height: 150px;
margin: 18px 0;
overflow: hidden;
border-radius: 10px !important;
/* Reads as a lit panel on the blue rather than a grey hole while it loads. */
background: rgba(255, 255, 255, .12);
}
/* The artwork holds still on hover — the card's own tint and the ringed arrow
carry the state instead. */
.vxn-mega__cardmedia img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.vxn-mega__cardcta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: auto;
padding-top: 16px;
border-top: 1px solid rgba(255, 255, 255, 0.26);
font-size: 14px;
font-weight: 500;
color: #FFFFFF;
}
/* The eyebrow and the ringed arrow are on blue now, so both invert. The ring
fills white on hover with the glyph in brand blue — the reverse of what it
does beside the white "view all" link on the same sheet. */
.vxn-mega__card .vxn-mega__eyebrow {
color: rgba(255, 255, 255, 0.68);
}
.vxn-mega__panel .vxn-mega__wrap .vxn-mega__card .vxn-mega__circ {
border-color: rgba(255, 255, 255, 0.45);
color: #FFFFFF;
}
/* Same selector depth as the resting rule above, plus `:hover`. Written short
(`.vxn-mega__card:hover .vxn-mega__circ`) it loses to that 0-4-0 resting rule
and the glyph stays white — invisible against the white fill. */
.vxn-mega__panel .vxn-mega__wrap .vxn-mega__card:hover .vxn-mega__circ {
background-color: #FFFFFF;
border-color: #FFFFFF;
color: var(--vxn-blue, #0B2DBE);
}
/* ==========================================================================
Burger drawer (nav.elementor-nav-menu--dropdown) — the stacked list
Width-independent: the theme uses the drawer everywhere below 1400px.
The `nav.` prefix is load-bearing. Every sub-menu
also carries
`elementor-nav-menu--dropdown` (Elementor tags submenus with it), so a bare
`.elementor-nav-menu--dropdown .vxn-mega__inner` matches panels inside the
DESKTOP bar too — and, coming later in the file, wins. Only the drawer's
container is a