:root {
--font-12: 12px;
--font-13: 13px;
--font-14: 14px;
--font-16: 16px;
--font-17: 17px;
--font-20: 20px;
--font-24: 24px;
--font-72: 72px;
--h1: 64px;
--h2: 58px;
--h3: 40px;
--h4: 32px; /* Desktop/Caption */
--h5: 26px; /* Desktop/body-LG */
--h6: 22px; /* Desktop/body */
--body: 22px;
--container-padding: 65px;
}
:target {
scroll-margin-top: 114px;
}
@media (max-width: 1680px) {
:root {
--h1:calc( 64px * 0.75);
--h2: calc(58px * 0.75);
--h3: calc(40px * 0.75);
--h4: calc(32px * 0.75); /* Desktop/Caption */
--h5: calc(26px * 0.75); /* Desktop/body-LG */
--h6: calc(22px * 0.75); /* Desktop/body */
--body: calc(22px * 0.75);
--container-padding: 35px;
}
}
@media (min-width: 992px) and (max-width: 1366px) {
.elementor-element-1fe2a75, .elementor-18 .elementor-element.elementor-element-87f73e0 {
padding-bottom: 10px !important;
}
.elementor-element-1fe2a75 .elementor-heading-title {
font-size: 2.5vw !important;
}
.elementor-18 .elementor-element.elementor-element-c46f905 {
padding:30px;
}
.elementor-button, .btn.btn-default {
font-size: 18px !important;
}
.elementor-element-ee9d5d3 {
transform: scale(0.75);
transform-origin: bottom right;
}
}
@media (max-width: 991.98px) {
:root {
--container-padding: 20px;
}
}
.eyebrow {
font-family: 'Instrument Sans';
font-style: normal;
font-weight: 700;
font-size: var(--font-16);
line-height: 130%;
/* identical to box height, or 21px */
letter-spacing: 0.1em;
}
html {
font-family: "Instrument Sans", sans-serif;
scrollbar-gutter: stable;
scroll-behavior: smooth !important;
}
:target {
scroll-margin-top: 100px;
}
html, body {
font-family: "Instrument Sans", sans-serif;
background-color: #FFF; -webkit-font-smoothing: antialiased;
}
.p-10{padding:10px}.p-20{padding:20px}.p-30{padding:30px}.p-40{padding:40px}.p-50{padding:50px}.p-60{padding:60px}.p-70{padding:70px}.p-80{padding:80px}.p-90{padding:90px}.p-100{padding:100px}.p-110{padding:110px}.p-120{padding:120px}.p-130{padding:130px}.p-140{padding:140px}.p-150{padding:150px}.p-160{padding:160px}.p-170{padding:170px}.p-180{padding:180px}.p-190{padding:190px}.p-200{padding:200px}.p-5{padding:5px}.p-15{padding:15px}.p-25{padding:25px}.p-35{padding:35px}.p-45{padding:45px}.p-55{padding:55px}.p-65{padding:65px}.p-75{padding:75px}.p-85{padding:85px}.p-95{padding:95px}.p-105{padding:105px}.p-115{padding:115px}.p-125{padding:125px}.p-135{padding:135px}.p-145{padding:145px}.p-155{padding:155px}.p-165{padding:165px}.p-175{padding:175px}.p-185{padding:185px}.p-195{padding:195px}.pt-10{padding-top:10px}.pt-20{padding-top:20px}.pt-30{padding-top:30px}.pt-40{padding-top:40px}.pt-50{padding-top:50px}.pt-60{padding-top:60px}.pt-70{padding-top:70px}.pt-80{padding-top:80px}.pt-90{padding-top:90px}.pt-100{padding-top:100px}.pt-110{padding-top:110px}.pt-120{padding-top:120px}.pt-130{padding-top:130px}.pt-140{padding-top:140px}.pt-150{padding-top:150px}.pt-160{padding-top:160px}.pt-170{padding-top:170px}.pt-180{padding-top:180px}.pt-190{padding-top:190px}.pt-200{padding-top:200px}.pt-5{padding-top:5px}.pt-15{padding-top:15px}.pt-25{padding-top:25px}.pt-35{padding-top:35px}.pt-45{padding-top:45px}.pt-55{padding-top:55px}.pt-65{padding-top:65px}.pt-75{padding-top:75px}.pt-85{padding-top:85px}.pt-95{padding-top:95px}.pt-105{padding-top:105px}.pt-115{padding-top:115px}.pt-125{padding-top:125px}.pt-135{padding-top:135px}.pt-145{padding-top:145px}.pt-155{padding-top:155px}.pt-165{padding-top:165px}.pt-175{padding-top:175px}.pt-185{padding-top:185px}.pt-195{padding-top:195px}.pb-10{padding-bottom:10px}.pb-20{padding-bottom:20px}.pb-30{padding-bottom:30px}.pb-40{padding-bottom:40px}.pb-50{padding-bottom:50px}.pb-60{padding-bottom:60px}.pb-70{padding-bottom:70px}.pb-80{padding-bottom:80px}.pb-90{padding-bottom:90px}.pb-100{padding-bottom:100px}.pb-110{padding-bottom:110px}.pb-120{padding-bottom:120px}.pb-130{padding-bottom:130px}.pb-140{padding-bottom:140px}.pb-150{padding-bottom:150px}.pb-160{padding-bottom:160px}.pb-170{padding-bottom:170px}.pb-180{padding-bottom:180px}.pb-190{padding-bottom:190px}.pb-200{padding-bottom:200px}.pb-5{padding-bottom:5px}.pb-15{padding-bottom:15px}.pb-25{padding-bottom:25px}.pb-35{padding-bottom:35px}.pb-45{padding-bottom:45px}.pb-55{padding-bottom:55px}.pb-65{padding-bottom:65px}.pb-75{padding-bottom:75px}.pb-85{padding-bottom:85px}.pb-95{padding-bottom:95px}.pb-105{padding-bottom:105px}.pb-115{padding-bottom:115px}.pb-125{padding-bottom:125px}.pb-135{padding-bottom:135px}.pb-145{padding-bottom:145px}.pb-155{padding-bottom:155px}.pb-165{padding-bottom:165px}.pb-175{padding-bottom:175px}.pb-185{padding-bottom:185px}.pb-195{padding-bottom:195px}.m-10{margin:10px}.m-20{margin:20px}.m-30{margin:30px}.m-40{margin:40px}.m-50{margin:50px}.m-60{margin:60px}.m-70{margin:70px}.m-80{margin:80px}.m-90{margin:90px}.m-100{margin:100px}.m-110{margin:110px}.m-120{margin:120px}.m-130{margin:130px}.m-140{margin:140px}.m-150{margin:150px}.m-160{margin:160px}.m-170{margin:170px}.m-180{margin:180px}.m-190{margin:190px}.m-200{margin:200px}.m-5{margin:5px}.m-15{margin:15px}.m-25{margin:25px}.m-35{margin:35px}.m-45{margin:45px}.m-55{margin:55px}.m-65{margin:65px}.m-75{margin:75px}.m-85{margin:85px}.m-95{margin:95px}.m-105{margin:105px}.m-115{margin:115px}.m-125{margin:125px}.m-135{margin:135px}.m-145{margin:145px}.m-155{margin:155px}.m-165{margin:165px}.m-175{margin:175px}.m-185{margin:185px}.m-195{margin:195px}.mb-10{margin-bottom:10px}.mb-20{margin-bottom:20px}.mb-30{margin-bottom:30px}.mb-40{margin-bottom:40px}.mb-50{margin-bottom:50px}.mb-60{margin-bottom:60px}.mb-70{margin-bottom:70px}.mb-80{margin-bottom:80px}.mb-90{margin-bottom:90px}.mb-100{margin-bottom:100px}.mb-110{margin-bottom:110px}.mb-120{margin-bottom:120px}.mb-130{margin-bottom:130px}.mb-140{margin-bottom:140px}.mb-150{margin-bottom:150px}.mb-160{margin-bottom:160px}.mb-170{margin-bottom:170px}.mb-180{margin-bottom:180px}.mb-190{margin-bottom:190px}.mb-200{margin-bottom:200px}.mb-5{margin-bottom:5px}.mb-15{margin-bottom:15px}.mb-25{margin-bottom:25px}.mb-35{margin-bottom:35px}.mb-45{margin-bottom:45px}.mb-55{margin-bottom:55px}.mb-65{margin-bottom:65px}.mb-75{margin-bottom:75px}.mb-85{margin-bottom:85px}.mb-95{margin-bottom:95px}.mb-105{margin-bottom:105px}.mb-115{margin-bottom:115px}.mb-125{margin-bottom:125px}.mb-135{margin-bottom:135px}.mb-145{margin-bottom:145px}.mb-155{margin-bottom:155px}.mb-165{margin-bottom:165px}.mb-175{margin-bottom:175px}.mb-185{margin-bottom:185px}.mb-195{margin-bottom:195px}.mt-10{margin-top:10px}.mt-20{margin-top:20px}.mt-30{margin-top:30px}.mt-40{margin-top:40px}.mt-50{margin-top:50px}.mt-60{margin-top:60px}.mt-70{margin-top:70px}.mt-80{margin-top:80px}.mt-90{margin-top:90px}.mt-100{margin-top:100px}.mt-110{margin-top:110px}.mt-120{margin-top:120px}.mt-130{margin-top:130px}.mt-140{margin-top:140px}.mt-150{margin-top:150px}.mt-160{margin-top:160px}.mt-170{margin-top:170px}.mt-180{margin-top:180px}.mt-190{margin-top:190px}.mt-200{margin-top:200px}.mt-5{margin-top:5px}.mt-15{margin-top:15px}.mt-25{margin-top:25px}.mt-35{margin-top:35px}.mt-45{margin-top:45px}.mt-55{margin-top:55px}.mt-65{margin-top:65px}.mt-75{margin-top:75px}.mt-85{margin-top:85px}.mt-95{margin-top:95px}.mt-105{margin-top:105px}.mt-115{margin-top:115px}.mt-125{margin-top:125px}.mt-135{margin-top:135px}.mt-145{margin-top:145px}.mt-155{margin-top:155px}.mt-165{margin-top:165px}.mt-175{margin-top:175px}.mt-185{margin-top:185px}.mt-195{margin-top:195px}
/* TYPOGRAPHY */
body, html {
font-size: var(--body);
line-height: 140%;
font-weight: 400;
}
h1, .h1 {
font-size: var(--h1);
line-height: 1.21875em !important;
font-weight: 400;
}
h2, .h2 {
font-size: var(--h2);
line-height: 1.224137931034483em !important;
font-weight: 400;
}
h3, .h3 {
font-size: var(--h3);
line-height: 100%;
font-weight: 400;
}
h4, .h4 {
font-size: var(--h4);
line-height: 1.3em !important;
font-weight: 400;
}
h5, .h5 {
font-size: var(--h5);
line-height: 150%;
font-weight: 400;
}
h6, .h6 {
font-size: var(--h6);
line-height: 140%;
font-weight: 400;
}
small {
font-size: var(--font-16);
line-height: 150%;
}
.elementor-button, .btn.btn-default {
font-family: inherit;
font-size: var(--font-20);
line-height: 100%;
font-weight: 600;
padding: 15px 40px;
background: #006057;
border-radius: 45px;
font-family: 'Instrument Sans';
font-style: normal;
font-weight: 600;
font-size: var(--font-20);
line-height: 24px;
text-align: center;
color: #F5F5F5;
}
.elementor-button:hover {
text-decoration: none;
}
/* Elementor buttons — match the CF7 submit animation */
.elementor-button,
.btn.btn-default {
transition:
background-color 250ms ease,
color 250ms ease,
transform 250ms ease,
box-shadow 250ms ease;
}
/* Lift and lighten */
.elementor-button:hover,
.btn.btn-default:hover {
background-color: #168881;
transform: translateY(-2px);
text-decoration: none;
}
/* Return down when pressed */
.elementor-button:active,
.btn.btn-default:active {
transform: translateY(0);
}
/* Animate the horizontal arrow */
.btn-right .elementor-button::before {
transition: transform 250ms ease;
}
.btn-right:hover .elementor-button::before {
transform: translate(4px, -50%);
}
/* Animate the diagonal arrow */
.btn-top-right .elementor-button::before {
transition: transform 250ms ease;
}
.btn-top-right:hover .elementor-button::before {
transform: translate(3px, calc(-50% - 3px));
}
/* White-button variant */
.white-btn .elementor-button:hover {
background-color: #e3ecec;
color: #006057;
}
/* Keyboard focus */
.elementor-button:focus-visible,
.btn.btn-default:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgb(22 136 129 / 20%);
}
/* Accessibility */
@media (prefers-reduced-motion: reduce) {
.elementor-button,
.btn.btn-default,
.btn-right .elementor-button::before,
.btn-top-right .elementor-button::before {
transition: none;
}
.elementor-button:hover,
.btn.btn-default:hover {
transform: none;
}
}
.btn-icon .elementor-button {
position: relative;
padding-right: 60px !important;
}
.btn-icon-smaller .elementor-button {
position: relative;
padding-right: 45px !important;
padding-left: 20px !important;
font-size: var(--font-20);
}
@media (max-width: 1680px) {
.btn-icon-smaller .elementor-button {
font-size: 18px;
}
.elementor-element-b4cf609 .elementor-heading-title {
font-size: 1.25vw !important;
}
}
.btn-top-right .elementor-button::before {
content: '';
background: url('data:image/svg+xml,') no-repeat center center;
background-size: contain;
width: 14px;
height: 14px;
position: absolute;
right: 35px;
top: calc(50% + 2px);
transform: translateY(-50%);
}
.btn-right .elementor-button::before {
content: '';
background: url('data:image/svg+xml,') no-repeat center center;
background-size: contain;
width: 19px;
height: 19px;
position: absolute;
right: 18px;
top: calc(50% + 0px);
transform: translateY(-50%);
}
.white-btn .elementor-button {
background: #F5F5F5;
color: #006057;
}
/* END TYPOGRAPHY */
.container-padding {
padding-left: var(--container-padding) !important;
padding-right: var(--container-padding) !important;
}
/* HEADER */
header, nav {
height: 114px;
}
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: linear-gradient(90deg, rgba(245, 245, 245, 0.6) 0%, rgba(245, 245, 245, 0.48) 100%);
/* Inside auto layout */
flex: none;
order: 9;
flex-grow: 0;
z-index: 9;
-webkit-backdrop-filter: blur(18px) saturate(145%) brightness(1.0);
backdrop-filter: blur(18px) saturate(145%) brightness(1.0);
}
.navbar-brand {
padding-top: 15px;
padding-bottom: 0;
}
.navbar {
padding-left: var(--container-padding);
padding-right: var(--container-padding);
}
.navbar img {
width: 215px;
}
.navbar-nav .nav-link {
padding: 10px 30px !important;
font-family: 'Instrument Sans';
font-style: normal;
font-weight: 400;
font-size: var(--font-20);
line-height: 150%;
color: #193D3E;
}
#nav-icon4 {
width: 26px;
height: 20px;
position: absolute;
top: 15px;
right: 17px;
margin: 1px auto;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .15s ease;
-moz-transition: .15s ease;
-o-transition: .15s ease;
transition: .15s ease;
cursor: pointer;
z-index: 999;
xbackground: #97F1FF;
}
#nav-icon4::before {
content: '';
width: 100%;
height: 5px;
position: absolute;
top: -5px;
left:0;
xbackground: #97F1FF;
z-index: 0;
}
#nav-icon4::after {
content: '';
width: 100%;
height: 5px;
position: absolute;
bottom: -5px;
left:0;
xbackground: #97F1FF;
z-index: 0;
}
#nav-icon4 span {
display: block;
position: absolute;
height: 2px;
width: 20px;
background: #02554D;
border-radius: 0;
opacity: 1;
left: 3px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .15s ease;
-moz-transition: .15s ease;
-o-transition: .15s ease;
transition: .15s ease;
z-index: 1;
}
/* Icon 4 */
#nav-icon4 {
}
#nav-icon4 span:nth-child(1) {
top: 0px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
#nav-icon4 span:nth-child(2) {
top: 8px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
#nav-icon4 span:nth-child(3) {
top: 16px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
#nav-icon4.open span:nth-child(1) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
top: -1px;
left: 8px;
}
#nav-icon4.open span:nth-child(2) {
width: 0%;
opacity: 0;
}
#nav-icon4.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
top: 13px;
left: 8px;
}
#mobile-nav {
background: #F5F5F5;
position: fixed;
top: 50px;
left: 0;
width: 100%;
z-index: 9;
color: #016156;
padding: 20px;
display: none;
}
#mobile-nav a {
color: #016156;
font-weight: 500;
font-size: 19px;
}
header {
transition: all .15s ease;
}
.menu-opened header {
background: #F9F9F9 linear-gradient(180deg, rgba(245, 245, 245, 0.6) 0%, rgba(245, 245, 245, 0.48) 100%);
}
/* END HEADER */
/* CONTENT */
.glass-card {
background: linear-gradient(
145deg,
rgba(245, 245, 245, 0.52) 0%,
rgba(226, 240, 240, 0.34) 55%,
rgba(55, 194, 192, 0.16) 100%
);
border: 1px solid rgba(255, 255, 255, 0.7);
-webkit-backdrop-filter: blur(28px) saturate(125%);
backdrop-filter: blur(28px) saturate(125%);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.45),
0 18px 45px rgba(0, 60, 65, 0.12);
}
/* Optional soft highlight */
.glass-card::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: radial-gradient(
circle at 15% 10%,
rgba(255, 255, 255, 0),
transparent 45%
);
}
.glass-card > * {
position: relative;
z-index: 1;
}
/* =====================================================
NOOVIA GLUCOSE HUD
Exact outer dimensions: 378 × 409px
===================================================== */
.nv-glucose-hud,
.nv-glucose-hud * {
box-sizing: border-box;
}
.nv-glucose-hud {
position: relative;
display: block;
flex: 0 0 378px;
width: 378px;
height: 409px;
font-family: "Instrument Sans", sans-serif;
color: #f5f5f5;
isolation: isolate;
}
/* =====================================================
LIVE STATUS PILL
Figma: 253 × 44px
===================================================== */
.nv-status-pill {
position: absolute;
z-index: 2;
top: 0;
left: 1px;
display: flex;
align-items: center;
gap: 18px;
width: 253px;
height: 44px;
padding: 10px 30px 10px 20px;
background: rgba(242, 242, 242, 0.20);
border-radius: 27px;
-webkit-backdrop-filter: blur(16px);
backdrop-filter: blur(16px);
/* Glass edge and soft depth */
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.55),
inset 0 1px 0 rgba(255, 255, 255, 0.18),
0 8px 24px rgba(0, 0, 0, 0.12);
}
.nv-status-dot {
display: block;
flex: 0 0 16px;
width: 16px;
height: 16px;
background: #37c2c0;
border-radius: 50%;
}
.nv-status-content {
display: grid;
grid-template-columns: 38px 5px 110px;
align-items: center;
column-gap: 8px;
width: 169px;
height: 24px;
white-space: nowrap;
font-size: var(--font-20);
line-height: 100%;
letter-spacing: 0;
}
.nv-status-live {
width: 38px;
font-weight: 400;
}
.nv-status-separator {
width: 5px;
text-align: center;
font-weight: 400;
}
.nv-status-day {
width: 110px;
text-align: right;
font-weight: 400;
}
.nv-status-day strong {
font-weight: 700;
}
/* =====================================================
MAIN GLUCOSE CARD
Figma: 378 × 339px
===================================================== */
.nv-glucose-card {
position: absolute;
z-index: 1;
top: 70px;
left: 0;
width: 378px;
height: 339px;
overflow: hidden;
background: rgba(0, 96, 87, 0.90);
border-radius: 40px;
-webkit-backdrop-filter: blur(18px);
backdrop-filter: blur(18px);
box-shadow:
0 20px 45px rgba(0, 0, 0, 0.18),
inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
/* Top labels */
.nv-card-label,
.nv-card-range {
position: absolute;
top: 37px;
width: 91px;
height: 20px;
font-size: var(--font-16);
font-weight: 600;
line-height: 100%;
letter-spacing: 0.14em;
white-space: nowrap;
}
.nv-card-label {
left: 41px;
color: #f5f5f5;
}
.nv-card-range {
left: 253px;
color: #79a3a5;
text-align: right;
}
/* Glucose reading */
.nv-card-value {
position: absolute;
top: 88px;
left: 41px;
width: 82px;
height: 88px;
color: #f5f5f5;
font-size: var(--font-72);
font-weight: 400;
line-height: 100%;
letter-spacing: 0;
}
.nv-card-unit {
position: absolute;
top: 134px;
left: 140px;
width: 63px;
height: 24px;
color: #37c2c0;
font-size: var(--font-20);
font-weight: 600;
line-height: 100%;
letter-spacing: 0;
}
/* Graph */
.nv-glucose-graph {
position: absolute;
top: 166px;
left: 45px;
display: block;
width: 304px;
height: 65px;
overflow: visible;
}
/* =====================================================
UPDATE FREQUENCY PILL
Figma: 190 × 44px
===================================================== */
.nv-frequency-pill {
position: absolute;
top: 268px;
left: 36px;
display: flex;
align-items: center;
gap: 18px;
width: 190px;
height: 44px;
padding: 10px 30px 10px 20px;
background: rgba(55, 194, 192, 0.30);
border-radius: 27px;
box-shadow:
inset 0 0 0 1px rgba(55, 194, 192, 0.55),
inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.nv-frequency-dot {
display: block;
flex: 0 0 14px;
width: 14px;
height: 14px;
background: #37c2c0;
border-radius: 50%;
}
.nv-frequency-text {
width: 108px;
height: 24px;
color: #f5f5f5;
font-size: var(--font-20);
font-weight: 400;
line-height: 120%;
letter-spacing: 0;
text-align: right;
white-space: nowrap;
}
.nv-frequency-text strong {
font-weight: 700;
}
/* =====================================================
LOADED ENTRANCE ANIMATIONS
Trigger:
===================================================== */
.nv-glucose-hud {
--nv-reveal-ease: cubic-bezier(0.22, 1, 0.36, 1);
}
/* Initial states */
.nv-status-pill {
opacity: 0;
transform: translateY(-16px) scale(0.96);
filter: blur(7px);
transform-origin: left center;
}
.nv-glucose-card {
opacity: 0;
transform: translateY(28px) scale(0.96);
filter: blur(9px);
transform-origin: center bottom;
}
.nv-card-label,
.nv-card-range {
opacity: 0;
transform: translateY(10px);
}
.nv-card-value {
opacity: 0;
transform: translateY(16px) scale(0.88);
transform-origin: left bottom;
}
.nv-card-unit {
opacity: 0;
transform: translateX(-8px);
}
.nv-frequency-pill {
opacity: 0;
transform: translateY(12px) scale(0.94);
transform-origin: left center;
}
/* Prepare graph drawing */
.nv-glucose-graph path {
stroke-dasharray: 420;
stroke-dashoffset: 420;
}
.nv-glucose-graph circle {
opacity: 0;
transform: scale(0.25);
transform-box: fill-box;
transform-origin: center;
}
/* =====================================================
ANIMATION SEQUENCE
===================================================== */
/* 1. Live pill */
body.loaded .nv-status-pill {
animation:
nv-status-enter 700ms var(--nv-reveal-ease) 100ms
forwards;
}
/* 2. Main card */
body.loaded .nv-glucose-card {
animation:
nv-card-enter 900ms var(--nv-reveal-ease) 260ms
forwards;
}
/* 3. Card labels */
body.loaded .nv-card-label {
animation:
nv-content-enter 600ms var(--nv-reveal-ease) 650ms
forwards;
}
body.loaded .nv-card-range {
animation:
nv-content-enter 600ms var(--nv-reveal-ease) 740ms
forwards;
}
/* 4. Glucose number and unit */
body.loaded .nv-card-value {
animation:
nv-number-enter 750ms var(--nv-reveal-ease) 760ms
forwards;
}
body.loaded .nv-card-unit {
animation:
nv-unit-enter 600ms var(--nv-reveal-ease) 940ms
forwards;
}
/* 5. Draw the graph */
body.loaded .nv-glucose-graph path {
animation:
nv-draw-graph 1200ms cubic-bezier(0.45, 0, 0.25, 1) 900ms
forwards;
}
/* Graph target marker */
body.loaded .nv-glucose-graph circle:first-of-type {
stroke-opacity: 0.65;
will-change: transform, opacity;
animation:
nv-marker-pulse-gentle 2400ms
cubic-bezier(0.2, 0.65, 0.3, 1)
infinite;
}
@keyframes nv-marker-pulse-gentle {
from {
opacity: 0.55;
transform: scale(0.78);
}
to {
opacity: 0;
transform: scale(1.45);
}
}
body.loaded .nv-glucose-graph circle:last-of-type {
animation:
nv-marker-enter 450ms var(--nv-reveal-ease) 1840ms
forwards;
}
/* 6. Frequency pill */
body.loaded .nv-frequency-pill {
animation:
nv-frequency-enter 650ms var(--nv-reveal-ease) 1400ms
forwards;
}
/* Live indicator pulses */
body.loaded .nv-status-dot {
animation:
nv-live-pulse 2800ms ease-in-out 1500ms infinite;
}
body.loaded .nv-frequency-dot {
animation:
nv-frequency-pulse 2800ms ease-in-out 1900ms infinite;
}
/* =====================================================
KEYFRAMES
===================================================== */
@keyframes nv-status-enter {
from {
opacity: 0;
transform: translateY(-16px) scale(0.96);
filter: blur(7px);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
filter: blur(0);
}
}
@keyframes nv-card-enter {
from {
opacity: 0;
transform: translateY(28px) scale(0.96);
filter: blur(9px);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
filter: blur(0);
}
}
@keyframes nv-content-enter {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes nv-number-enter {
0% {
opacity: 0;
transform: translateY(16px) scale(0.88);
}
65% {
opacity: 1;
transform: translateY(-2px) scale(1.025);
}
100% {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@keyframes nv-unit-enter {
from {
opacity: 0;
transform: translateX(-8px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes nv-draw-graph {
from {
stroke-dashoffset: 420;
}
to {
stroke-dashoffset: 0;
}
}
@keyframes nv-marker-enter {
from {
opacity: 0;
transform: scale(0.25);
}
to {
opacity: 1;
transform: scale(1);
}
}
@keyframes nv-frequency-enter {
from {
opacity: 0;
transform: translateY(12px) scale(0.94);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
/* Continuous but subtle activity */
@keyframes nv-live-pulse {
0%,
100% {
box-shadow: 0 0 0 0 rgba(55, 194, 192, 0);
}
50% {
box-shadow: 0 0 0 7px rgba(55, 194, 192, 0.18);
}
}
@keyframes nv-frequency-pulse {
0%,
100% {
box-shadow: 0 0 0 0 rgba(55, 194, 192, 0);
}
50% {
box-shadow: 0 0 0 6px rgba(55, 194, 192, 0.16);
}
}
@keyframes nv-marker-pulse {
0% {
opacity: 0.4;
transform: scale(0.65);
}
55% {
opacity: 0;
transform: scale(1.55);
}
100% {
opacity: 0;
transform: scale(1.55);
}
}
/* =====================================================
ACCESSIBILITY
===================================================== */
@media (prefers-reduced-motion: reduce) {
.nv-status-pill,
.nv-glucose-card,
.nv-card-label,
.nv-card-range,
.nv-card-value,
.nv-card-unit,
.nv-frequency-pill,
.nv-glucose-graph path,
.nv-glucose-graph circle,
.nv-status-dot,
.nv-frequency-dot {
animation: none !important;
transition: none !important;
}
.nv-status-pill,
.nv-glucose-card,
.nv-card-label,
.nv-card-range,
.nv-card-value,
.nv-card-unit,
.nv-frequency-pill,
.nv-glucose-graph circle {
opacity: 1;
transform: none;
filter: none;
}
.nv-glucose-graph path {
stroke-dashoffset: 0;
}
}
.your-parent-section {
position: relative;
}
/* The image and circles must share this positioned parent */
.nv-focus-wrapper {
position: relative;
}
.nv-product-focus.circles {
--nv-focus-x: 52%;
--nv-focus-y: 48%;
}
/* Responsive ring group */
.nv-product-focus.circles {
/* 378px at a 1440px desktop viewport */
--nv-focus-size: clamp(220px, 26.25vw, 378px);
position: absolute;
/* Position the centre over the sensor */
top: var(--nv-focus-y, 50%);
left: var(--nv-focus-x, 50%);
z-index: 2;
width: var(--nv-focus-size);
height: var(--nv-focus-size);
transform: translate(-50%, -50%);
overflow: visible;
pointer-events: none;
}
/* Shared ring styling */
.nv-product-focus.circles > .circle {
position: absolute;
display: block;
box-sizing: border-box;
border-style: solid;
border-radius: 50%;
opacity: 0;
transform: scale(0.9);
transform-origin: center;
backface-visibility: hidden;
will-change: opacity, transform;
}
/* Ellipse 14 */
.nv-product-focus .circle--inner {
top: 36.241%;
left: 35.897%;
width: 27.862%;
height: 27.862%;
border-width: 2px;
border-color: rgb(245 245 245 / 100%);
}
/* Ellipse 15 */
.nv-product-focus .circle--middle {
top: 22.138%;
left: 22.138%;
width: 55.725%;
height: 55.725%;
border-width: 1px;
border-color: rgb(245 245 245 / 40%);
}
/* Ellipse 16 */
.nv-product-focus .circle--outer {
inset: 0;
width: 100%;
height: 100%;
border-width: 1px;
border-color: rgb(245 245 245 / 20%);
}
.nv-product-focus.circles.nv-focus--small {
transform: translate(-50%, -50%) scale(0.75);
transform-origin: center;
}
/* Start after the preloader adds body.loaded */
body.loaded .nv-product-focus .circle--inner {
animation: nv-pulse-out 2s ease-out 0s infinite;
}
body.loaded .nv-product-focus .circle--middle {
animation: nv-pulse-out 2s ease-out 0.2s infinite;
}
body.loaded .nv-product-focus .circle--outer {
animation: nv-pulse-out 2s ease-out 0.4s infinite;
}
/* Adapted from the reference page */
@keyframes nv-pulse-out {
0% {
opacity: 0;
transform: scale(0.9);
}
40% {
opacity: 1;
}
80% {
opacity: 0;
transform: scale(1.05);
}
100% {
opacity: 0;
transform: scale(1.05);
}
}
@media (prefers-reduced-motion: reduce) {
.nv-product-focus.circles > .circle {
animation: none !important;
transform: scale(1);
}
.nv-product-focus .circle--inner {
opacity: 1;
}
.nv-product-focus .circle--middle {
opacity: 1;
}
.nv-product-focus .circle--outer {
opacity: 1;
}
}
/* ==========================================
ELEMENTOR FADE ANIMATION OVERRIDES
========================================== */
.animated.fadeInUp,
.animated.fadeInDown {
animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1) !important;
animation-fill-mode: both;
will-change: transform, opacity, filter;
backface-visibility: hidden;
}
/* Fade in while moving upward */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translate3d(0, 28px, 0);
filter: blur(9px);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
filter: blur(0);
}
}
@-webkit-keyframes fadeInUp {
from {
opacity: 0;
-webkit-transform: translate3d(0, 28px, 0);
-webkit-filter: blur(9px);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
-webkit-filter: blur(0);
}
}
/* Fade in while moving downward */
@keyframes fadeInDown {
from {
opacity: 0;
transform: translate3d(0, -28px, 0);
filter: blur(9px);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
filter: blur(0);
}
}
@-webkit-keyframes fadeInDown {
from {
opacity: 0;
-webkit-transform: translate3d(0, -28px, 0);
-webkit-filter: blur(9px);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
-webkit-filter: blur(0);
}
}
/* Accessibility */
@media (prefers-reduced-motion: reduce) {
.animated.fadeInUp,
.animated.fadeInDown {
animation-duration: 0.01ms !important;
transform: none !important;
filter: none !important;
opacity: 1 !important;
}
}
.feature-cards {
padding: 40px;
background: rgba(255, 255, 255, 0.4);
border-radius: 26.0129px;
}
/* Elementor parent container: Photometric Sensing */
.feature-cards {
position: relative;
isolation: isolate;
overflow: hidden;
/* Figma dimensions */
padding: 40px !important;
padding-right: 30px;
--gap: 28.9px 28.9px;
--row-gap: 28.9px;
--column-gap: 28.9px;
/* Figma corner radius */
--border-radius: 26.01px 26.01px 26.01px 26.01px;
border-radius: 26.01px !important;
/* Figma white fill at 40% */
background: linear-gradient(
135deg,
rgb(255 255 255 / 48%),
rgb(255 255 255 / 34%)
) !important;
/* Frosted background */
-webkit-backdrop-filter:
blur(18px)
saturate(145%)
brightness(1.04);
backdrop-filter:
blur(18px)
saturate(145%)
brightness(1.04);
/* Glass edges and depth */
border: 1px solid rgb(255 255 255 / 52%) !important;
xbox-shadow:
inset 1px 1px 0 rgb(255 255 255 / 85%),
inset -1px -1px 0 rgb(255 255 255 / 18%),
inset 0 12px 28px rgb(255 255 255 / 10%),
0 12px 32px rgb(0 60 87 / 8%);
transform: translateZ(0);
}
/* Reflected light across the glass */
.feature-cards::after {
content: "";
position: absolute;
inset: 0;
z-index: 0;
border-radius: inherit;
pointer-events: none;
background:
radial-gradient(
circle at 8% 5%,
rgb(255 255 255 / 38%),
transparent 35%
),
linear-gradient(
120deg,
rgb(255 255 255 / 16%) 0%,
transparent 38%,
transparent 72%,
rgb(255 255 255 / 8%) 100%
);
box-shadow:
inset 0 0 10px rgb(255 255 255 / 14%),
inset 0 0 2px rgb(255 255 255 / 55%);
}
/* Keep Elementor widgets above the glass highlight */
.feature-cards > * {
position: relative;
z-index: 1;
}
/* Tablet/mobile */
@media (max-width: 767px) {
.feature-cards {
width: 100%;
min-height: auto;
padding: 28px !important;
--gap: 20px 20px;
--row-gap: 20px;
--column-gap: 20px;
}
}
/* Browser fallback */
@supports not (backdrop-filter: blur(1px)) {
.feature-cards {
background: rgb(255 255 255 / 82%) !important;
}
}
.glass-card {
overflow: hidden;
border-radius: 26.01px !important;
background: linear-gradient(
135deg,
rgb(255 255 255 / 48%),
rgb(255 255 255 / 34%)
) !important;
-webkit-backdrop-filter:
blur(18px)
saturate(145%)
brightness(1.04);
backdrop-filter:
blur(18px)
saturate(145%)
brightness(1.04);
border: 1px solid rgb(255 255 255 / 52%) !important;
box-shadow:
inset 1px 1px 0 rgb(255 255 255 / 85%),
inset -1px -1px 0 rgb(255 255 255 / 18%),
inset 0 12px 28px rgb(255 255 255 / 10%),
0 12px 32px rgb(0 60 87 / 8%);
transform: translateZ(0);
}
.glass-card::after {
content: "";
position: absolute;
inset: 0;
z-index: 0;
border-radius: 26.01px !important;
border-radius: inherit;
pointer-events: none;
background:
radial-gradient(
circle at 8% 5%,
rgb(255 255 255 / 38%),
transparent 35%
),
linear-gradient(
120deg,
rgb(255 255 255 / 16%) 0%,
transparent 38%,
transparent 72%,
rgb(255 255 255 / 8%) 100%
);
box-shadow:
inset 0 0 10px rgb(255 255 255 / 14%),
inset 0 0 2px rgb(255 255 255 / 55%);
}
.glass-card > * {
position: relative;
z-index: 1;
}
@supports not (backdrop-filter: blur(1px)) {
.glass-card {
background: rgb(255 255 255 / 82%) !important;
}
}
.glass-effect {
position: relative;
isolation: isolate;
overflow: hidden;
/* Translucent glass and reflected light */
background:
radial-gradient(
circle at 8% 5%,
rgb(255 255 255 / 38%),
transparent 38%
),
linear-gradient(
125deg,
rgb(255 255 255 / 48%),
rgb(255 255 255 / 34%)
) !important;
/* Frosted background */
-webkit-backdrop-filter:
blur(18px)
saturate(145%)
brightness(1.04);
backdrop-filter:
blur(18px)
saturate(145%)
brightness(1.04);
/* Glass edge */
border: 1px solid rgb(255 255 255 / 52%) !important;
/* Highlight, depth and shadow */
box-shadow:
inset 1px 1px 0 rgb(255 255 255 / 85%),
inset -1px -1px 0 rgb(255 255 255 / 18%),
inset 0 12px 28px rgb(255 255 255 / 10%),
inset 0 0 10px rgb(255 255 255 / 14%),
0 12px 32px rgb(0 60 87 / 8%);
transform: translateZ(0);
}
/* Fallback */
@supports not (backdrop-filter: blur(1px)) {
.glass-effect {
background: rgb(255 255 255 / 82%) !important;
}
}
.platform-card {
position: relative;
isolation: isolate;
overflow: hidden;
box-sizing: border-box;
padding: 40px !important;
gap: 28.9px;
/* Elementor variables */
--display: flex;
--flex-direction: row;
--align-items: center;
--gap: 28.9px 28.9px;
--row-gap: 28.9px;
--column-gap: 28.9px;
--border-radius: 26.01px 26.01px 26.01px 26.01px;
border-radius: 26.01px !important;
/* Original Figma translucent fill */
background: rgb(255 255 255 / 32%) !important;
-webkit-backdrop-filter:
blur(18px)
saturate(140%)
brightness(1.03);
backdrop-filter:
blur(18px)
saturate(140%)
brightness(1.03);
/* Figma has no separate border or shadow */
border: none !important;
box-shadow: none !important;
transform: translateZ(0);
}
.platform-card .elementor-heading-title {
font-size: var(--font-16);
font-weight: 500 !important;
}
/*
* Subtle surface tint.
* This stops the bottom of the card disappearing into white.
*/
.platform-card::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
border-radius: inherit;
pointer-events: none;
background: linear-gradient(
180deg,
rgb(255 255 255 / 8%) 0%,
rgb(239 247 246 / 22%) 48%,
rgb(232 237 236 / 34%) 100%
) !important;
}
/* Keep Elementor content above the tint */
.platform-card > * {
position: relative;
z-index: 1;
}
/* Responsive */
@media (max-width: 767px) {
.platform-card {
xflex-basis: 100% !important;
xwidth: 100% !important;
xmax-width: 100% !important;
xmin-height: auto;
padding: 28px !important;
gap: 20px;
--gap: 20px 20px;
--row-gap: 20px;
--column-gap: 20px;
}
}
/* Browser fallback */
@supports not (backdrop-filter: blur(1px)) {
.platform-card {
background: rgb(242 246 245 / 88%) !important;
}
}
@media (max-width: 767px) {
.platform-card {
width: 100%;
min-height: auto;
padding: 28px !important;
gap: 20px;
--gap: 20px 20px;
--row-gap: 20px;
--column-gap: 20px;
}
}
@supports not (backdrop-filter: blur(1px)) {
.platform-card {
background: rgb(255 255 255 / 72%) !important;
}
}
.blue-glass {
position: relative;
isolation: isolate;
overflow: hidden;
box-sizing: border-box;
/* Exact Figma dimensions */
width: 329px;
max-width: 100%;
height: 132px;
min-height: 132px;
display: flex;
justify-content: center;
padding: 20px 25px 25px 32px;
/* Exact Figma radius */
--border-radius: 40px 40px 40px 40px;
border-radius: 40px !important;
/* Exact Figma fill: #0C8D8A at 50% */
background-color: rgb(12 141 138 / 50%) !important;
background-image: none !important;
/*
* Browser approximation of the Figma Glass effect.
* This allows the photograph beneath to remain visible.
*/
-webkit-backdrop-filter:
blur(18px)
saturate(130%)
brightness(1.04);
backdrop-filter:
blur(18px)
saturate(130%)
brightness(1.04);
/* No separate stroke or shadow in Figma */
border: none !important;
box-shadow: none !important;
transform: translateZ(0);
}
/* Soft directional lighting produced by the Glass effect */
.blue-glass::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
border-radius: inherit;
pointer-events: none;
background: linear-gradient(
125deg,
rgb(255 255 255 / 13%) 0%,
rgb(255 255 255 / 4%) 38%,
transparent 62%,
rgb(0 66 64 / 8%) 100%
);
}
/* Teal status dot from the Figma card */
.blue-glass::after {
content: "";
position: absolute;
top: 20px;
right: 22px;
z-index: 2;
width: 16px;
height: 16px;
border-radius: 50%;
background: #0ca8a4;
pointer-events: none;
}
/* Keep Elementor content over the glass surface */
.blue-glass > * {
position: relative;
z-index: 1;
}
/* Optional: match the white Figma typography */
.blue-glass .elementor-heading-title,
.blue-glass .elementor-widget-text-editor,
.blue-glass .elementor-widget-text-editor p {
color: #ffffff !important;
}
/* Mobile */
@media (max-width: 767px) {
.blue-glass {
width: 100%;
border-radius: 20px !important;
padding: 20px !important;
min-height: 120px;
height: 120px;
}
}
/* Fallback */
@supports not (backdrop-filter: blur(1px)) {
.blue-glass {
background-color: rgb(12 141 138 / 82%) !important;
}
}
p {
margin-bottom: 20px;
}
p:last-child {
margin-bottom: 0;
}
.elementor-element-d71676f {
justify-items: start;
}
.elementor-element-d71676f > .e-con {
width: fit-content !important;
max-width: 100%;
min-width: 0;
justify-self: start;
align-self: start;
}
.elementor .e-d71676f-2acd7b9 {
display: flex;
gap: 123px;
}
/* Keep the footer groups full-width on mobile */
@media (max-width: 767px) {
.elementor-element-d71676f {
justify-items: stretch;
}
.elementor-element-d71676f > .e-con {
width: 100% !important;
justify-self: stretch;
}
}
.noovia-work-slide img {
border-radius: 27px 27px 0 0;
}
.noovia-work-content .title {
font-style: normal;
font-weight: 500;
font-size: var(--font-24);
line-height: 29px;
color: #006057;
margin-bottom: 20px;
}
.noovia-work-content .content {
font-style: normal;
font-weight: 400;
font-size: var(--font-16);
line-height: 150%;
color: #6A6A6A;
}
.noovia-work-content {
padding: 40px;
}
.slider-card-content {
position: relative;
isolation: isolate;
overflow: hidden;
box-sizing: border-box;
width: 100%;
min-height: 225.07px;
padding: clamp(28px, 4vw, 40px);
border-radius: 0 0 26px 26px;
/* Soft Figma-style white gradient */
background:
linear-gradient(
180deg,
rgb(239 237 233 / 72%) 0%,
rgb(245 245 245 / 82%) 48%,
rgb(250 250 250 / 92%) 100%
);
/* Glass effect */
-webkit-backdrop-filter:
blur(20px)
saturate(135%)
brightness(1.04);
backdrop-filter:
blur(20px)
saturate(135%)
brightness(1.04);
/* Very subtle glass edge—no shadow */
border: 1px solid rgb(255 255 255 / 45%);
border-top-color: rgb(255 255 255 / 65%);
box-shadow: none;
transform: translateZ(0);
}
#noovia-at-work-slider, .elementor-element-d5dbf4b {
overflow: hidden;
}
/* the slides */
#noovia-at-work-slider .slick-slide {
margin: 0 12px;
}
/* the parent */
#noovia-at-work-slider .slick-list {
margin: 0 -12px;
}
#noovia-at-work-slider .slick-list{padding:0 var(--container-padding) !important;}
/* Slick arrow dimensions */
.slick-prev,
.slick-next {
width: 50px !important;
height: 50px !important;
padding: 0 !important;
border: 0 !important;
border-radius: 50% !important;
background-color: transparent !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: 50px 50px !important;
font-size: 0 !important;
z-index: 10;
}
/* Remove Slick's default arrow icons */
.slick-prev::before,
.slick-next::before {
content: none !important;
display: none !important;
}
/* Previous arrow */
.slick-prev,
.slick-prev:hover,
.slick-prev:focus {
background-image: url("data:image/svg+xml,%3Csvg width='50' height='50' viewBox='0 0 50 50' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='50' height='50' rx='25' transform='matrix(-1 0 0 1 50 0)' fill='%23E3ECEC'/%3E%3Cpath d='M32.0711 24.9998H17.9289M25 32.0708L17.9289 24.9998L25 17.9287' stroke='%23168881' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}
/* Next arrow */
.slick-next,
.slick-next:hover,
.slick-next:focus {
background-image: url("data:image/svg+xml,%3Csvg width='50' height='50' viewBox='0 0 50 50' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='50' height='50' rx='25' fill='%23E3ECEC'/%3E%3Cpath d='M17.9289 24.9998H32.0711M25 32.0708L32.0711 24.9998L25 17.9287' stroke='%23168881' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}
/* Disabled state */
.slick-prev.slick-disabled,
.slick-next.slick-disabled {
opacity: 0.35;
cursor: default;
}
/* Reserve space below the slider for the arrows */
.slick-slider {
position: relative;
padding-bottom: 74px;
overflow: visible !important;
}
/* Position both arrows below the slides */
.slick-prev,
.slick-next {
top: auto !important;
bottom: 0 !important;
right: auto !important;
transform: none !important;
}
/* Centre the complete arrow group */
.slick-prev {
left: calc(50% - 56px) !important;
}
.slick-next {
left: calc(50% + 6px) !important;
}
/* Banner containing both the image and circle HTML widget */
.nv-hero-banner {
--nv-focal-x: 53.6%;
--nv-focal-y: 60%;
position: relative;
overflow: hidden;
/* If it is an Elementor background image */
background-size: cover !important;
background-position:
var(--nv-focal-x)
var(--nv-focal-y) !important;
}
/* If the banner uses an Image widget instead of a CSS background */
.elementor-18 .elementor-element.elementor-element-71d0a09 img {
width: 100%;
height: 100%;
object-fit: cover;
object-position:
var(--nv-focal-x)
var(--nv-focal-y);
}
/*
* Override Elementor's absolute positioning.
* The HTML widget must cover the complete banner.
*/
.nv-hero-banner .nv-focus-layer {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
transform: none !important;
pointer-events: none;
}
/* Anchor the centre of the circles to the same image focal point */
.nv-focus-layer .nv-product-focus.circles {
--nv-focus-size: clamp(220px, 26.25vw, 378px);
position: absolute;
top: var(--nv-focal-y) !important;
left: var(--nv-focal-x) !important;
width: var(--nv-focus-size);
height: var(--nv-focus-size);
transform: translate(-50%, -50%);
transform-origin: center;
overflow: visible;
}
.footer-email {
position: relative;
padding-left: 38px;
}
.footer-email::before {
content: '';
background: url('data:image/svg+xml,') no-repeat center center;
width: 24px;
height: 24px;
position: absolute;
left: 0;
}
.footer-address {
position: relative;
padding-left: 38px;
}
.footer-address::before {
content: '';
background: url('data:image/svg+xml,') no-repeat center center;
width: 24px;
height: 24px;
position: absolute;
left: 0;
}
.single-line-btn .elementor-button-text {
white-space: nowrap;
}
.single-line-btn .elementor-button {
width: max-content;
max-width: 100%;
}
.nv-focus-layer { z-index: 0 !important; }
/* OPEN CARD HOVER */
.open-card {
transition: transform 0.5s cubic-bezier(.2,.8,.2,1);
}
/* animate individual content */
.open-card img,
.open-card h3,
.open-card h4,
.open-card p,
.open-card .btn {
transition:
transform 0.5s cubic-bezier(.2,.8,.2,1),
opacity 0.5s cubic-bezier(.2,.8,.2,1);
}
/* IMAGE */
.open-card img {
transform: scale(1) translateY(0);
transform-origin: center;
}
/* TITLE */
.open-card h3,
.open-card h4 {
transition-delay: 0s;
}
/* TEXT */
.open-card p {
transition-delay: 0.03s;
}
/* BUTTON */
.open-card .btn {
transition-delay: 0.06s;
}
/* HOVER */
@media (hover: hover) {
.open-card:hover {
transform: translateY(-5px);
}
.open-card:hover img {
xtransform: scale(1.04) translateY(-3px);
}
.open-card:hover h3,
.open-card:hover h4 {
transform: translateY(-5px);
}
.open-card:hover p {
transform: translateY(-4px);
}
.open-card:hover .btn {
transform: translateX(7px);
}
}
/* Accessibility */
@media (prefers-reduced-motion: reduce) {
.open-card,
.open-card img,
.open-card h3,
.open-card h4,
.open-card p,
.open-card .btn {
transition: none;
}
}
.footer-nav-c .noovia-footer-typography.e-paragraph-base {
display: none;
}
/* END CONTENT */
/* Start wpcf7 */
/* =========================================
NOOVIA — CONTACT FORM 7 SIGNUP FORM
Figma desktop content: 1692px × 428px
Width remains fully responsive.
========================================= */
.nv-signup-form,
.nv-signup-form * {
box-sizing: border-box;
}
.nv-signup-form {
width: 100%;
display: flex;
flex-direction: column;
gap: 20px;
font-family: "Instrument Sans", sans-serif;
color: #1d1d1d;
}
.nv-signup-form p {
margin: 0;
}
/* Screen-reader labels */
.nv-sr-only {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
/* Fields group */
.nv-signup-fields {
width: 100%;
display: flex;
flex-direction: column;
gap: 10px;
}
/* Fluid 50/50 columns */
.nv-signup-row {
width: 100%;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.nv-signup-field,
.nv-signup-field .wpcf7-form-control-wrap {
position: relative;
display: block;
width: 100%;
}
/* Inputs */
.nv-signup-form .nv-form-control {
width: 100%;
height: 60px;
margin: 0 !important;
padding: 0 30px;
border: 1px solid #dedede;
border-radius: 20px;
outline: none;
background-color: #ffffff;
box-shadow: none;
color: #1d1d1d;
font-family: "Instrument Sans", sans-serif;
font-size: var(--font-16);
font-weight: 400;
line-height: 1.5;
transition:
border-color 220ms ease,
box-shadow 220ms ease,
background-color 220ms ease;
}
.nv-signup-form .nv-form-control::placeholder {
color: #8b8b8b;
opacity: 1;
}
.nv-signup-form .nv-form-control:hover {
border-color: #b9c9c7;
}
.nv-signup-form .nv-form-control:focus {
border-color: #168881;
box-shadow: 0 0 0 3px rgb(22 136 129 / 10%);
}
/* Select arrow */
.nv-signup-form select.nv-form-control {
appearance: none;
-webkit-appearance: none;
padding-right: 64px;
color: #8b8b8b;
cursor: pointer;
background-image:
linear-gradient(45deg, transparent 50%, #8b8b8b 50%),
linear-gradient(135deg, #8b8b8b 50%, transparent 50%);
background-position:
calc(100% - 34px) 27px,
calc(100% - 28px) 27px;
background-size: 6px 6px;
background-repeat: no-repeat;
}
/* Message field: exact Figma height */
.nv-signup-form textarea.nv-form-control {
display: block;
height: 100px;
min-height: 100px;
padding: 18px 30px;
resize: vertical;
}
/* Consent */
.nv-signup-consent {
min-height: 24px;
}
.nv-signup-consent .wpcf7-list-item {
display: block;
margin: 0;
}
.nv-signup-consent .wpcf7-list-item > label {
display: flex;
align-items: flex-start;
gap: 20px;
cursor: pointer;
}
.nv-signup-consent input[type="checkbox"] {
appearance: none;
-webkit-appearance: none;
flex: 0 0 20px;
width: 20px;
height: 20px;
margin: 2px 0 0;
border: 1px solid #dedede;
border-radius: 5px;
background-color: #ffffff;
cursor: pointer;
transition:
background-color 180ms ease,
border-color 180ms ease,
box-shadow 180ms ease;
}
.nv-signup-consent input[type="checkbox"]:checked {
border-color: #006057;
background-color: #006057;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M3 7.2 5.7 10 11 4.5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-position: center;
background-repeat: no-repeat;
}
.nv-signup-consent input[type="checkbox"]:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgb(22 136 129 / 15%);
}
.nv-signup-consent .wpcf7-list-item-label {
color: #6a6a6a;
font-size: var(--font-16);
font-weight: 400;
line-height: 24px;
}
.nv-signup-consent a {
color: inherit;
text-decoration: underline;
text-underline-offset: 2px;
}
/* Submit button */
.nv-signup-submit-wrap {
position: relative;
display: inline-flex;
align-self: flex-start;
max-width: 100%;
}
.nv-signup-submit-wrap::after {
transition: all .3s ease;
}
.nv-signup-submit-wrap:hover::after {
background: url('data:image/svg+xml,') no-repeat center center;
transition: all .3s ease;
}
.nv-signup-form .nv-signup-submit {
width: auto;
height: 54px;
margin: 0 !important;
padding: 15px 58px 15px 30px !important;
border: 0 !important;
border-radius: 45px !important;
background: #006057 !important;
box-shadow: none !important;
color: #f5f5f5 !important;
font-family: "Instrument Sans", sans-serif;
font-size: var(--font-20);
font-weight: 600;
line-height: 20px;
text-align: left;
cursor: pointer;
transition:
background-color 250ms ease,
transform 250ms ease;
}
.nv-signup-submit-wrap::after {
content: "";
background: url('data:image/svg+xml,') no-repeat center center;
background-size: contain;
width: 19px;
height: 19px;
position: absolute;
top: 50%;
right: 20px;
z-index: 2;
color: #f5f5f5;
font-size: var(--font-20);
line-height: 1;
pointer-events: none;
transform: translateY(-52%);
transition: all .3s ease;
}
.nv-signup-submit-wrap:hover .nv-signup-submit {
background: #168881 !important;
transform: translateY(-2px);
}
.nv-signup-submit-wrap:hover::after {
transform: translate(4px, -52%);
}
.nv-signup-submit-wrap:active .nv-signup-submit {
transform: translateY(0);
}
/* CF7 validation */
.nv-signup-form .wpcf7-not-valid {
border-color: #b42318 !important;
}
.nv-signup-form .wpcf7-not-valid-tip {
margin: 5px 0 0 20px;
color: #b42318;
font-size: var(--font-13);
line-height: 1.3;
}
.nv-signup-form .wpcf7-spinner {
position: absolute;
top: 50%;
left: calc(100% + 8px);
margin: 0;
transform: translateY(-50%);
}
.wpcf7 form .nv-signup-form + .wpcf7-response-output,
.wpcf7 form .wpcf7-response-output {
margin: 20px 0 0;
padding: 12px 16px;
border-width: 1px;
border-radius: 10px;
font-family: "Instrument Sans", sans-serif;
font-size: var(--font-14);
}
/* =========================================
MOBILE
========================================= */
@media (max-width: 767px) {
.nv-signup-form {
gap: 16px;
}
.nv-signup-fields {
gap: 16px;
}
.nv-signup-row {
grid-template-columns: minmax(0, 1fr);
gap: 16px;
}
.nv-signup-form .nv-form-control {
height: 38.67px;
padding: 0 10px;
border-width: 1px;
border-radius: 6px;
font-size: var(--font-14);
line-height: 1.3;
}
.nv-signup-form select.nv-form-control {
padding-right: 36px;
background-position:
calc(100% - 18px) 16px,
calc(100% - 13px) 16px;
background-size: 5px 5px;
}
.nv-signup-form textarea.nv-form-control {
height: 50px;
min-height: 50px;
padding: 7px 10px;
border-radius: 6.7px;
}
.nv-signup-consent .wpcf7-list-item > label {
gap: 12px;
}
.nv-signup-consent .wpcf7-list-item-label {
font-size: var(--font-14);
line-height: 1.3;
}
.nv-signup-form .nv-signup-submit {
max-width: 100%;
height: 44px;
padding: 11px 48px 11px 22px !important;
font-size: var(--font-16);
}
.nv-signup-submit-wrap::after {
right: 18px;
font-size: var(--font-17);
}
}
/* Placeholder colour */
.wpcf7 select {
color: #8f8f8f !important;
}
/* Selected value */
.wpcf7 select:has(option:checked:not([value=""])) {
color: #000 !important;
}
/* Dropdown option colours */
.wpcf7 select option {
color: #000;
}
.wpcf7 select option[value=""] {
color: #8f8f8f;
}
/* End wpcf7 */
/* start mobile/tablets */
.mobile { display: none; }
@media (max-width: 991.98px){
.mobile { display: block; }
.mobile.flex { display: flex; }
.desktop { display: none !important; }
:root {
--h1: 24px;
--h2: 22px;
--h3: 20px;
--h4: 18px; /* Mobile/Caption */
--h5: 16px; /* Mobile/Body-LG */
--h6: 16px; /* Mobile/Body */
--body: 16px;
}
body, html { line-height: 130%; }
h1, .h1 { line-height: 100%; }
h2, .h2 { line-height: 140%; }
h3, .h3 { line-height: 129%; }
h4, .h4 { line-height: 100%; }
h5, .h5, h6, .h6 { line-height: 130%; }
small { font-size: var(--font-14); line-height: 130%; }
.elementor-button, .btn.btn-default { font-size: var(--font-14); line-height: 130%; }
.m-p-0{padding:0!important}.m-p-10{padding:10px!important}.m-p-20{padding:20px!important}.m-p-30{padding:30px!important}.m-p-40{padding:40px!important}.m-p-50{padding:50px!important}.m-p-60{padding:60px!important}.m-p-70{padding:70px!important}.m-p-80{padding:80px!important}.m-p-90{padding:90px!important}.m-p-100{padding:100px!important}.m-p-110{padding:110px!important}.m-p-120{padding:120px!important}.m-p-130{padding:130px!important}.m-p-140{padding:140px!important}.m-p-150{padding:150px!important}.m-p-160{padding:160px!important}.m-p-170{padding:170px!important}.m-p-180{padding:180px!important}.m-p-190{padding:190px!important}.m-p-200{padding:200px!important}.m-pt-0{padding-top:0!important}.m-pt-10{padding-top:10px!important}.m-pt-20{padding-top:20px!important}.m-pt-30{padding-top:30px!important}.m-pt-40{padding-top:40px!important}.m-pt-50{padding-top:50px!important}.m-pt-60{padding-top:60px!important}.m-pt-70{padding-top:70px!important}.m-pt-80{padding-top:80px!important}.m-pt-90{padding-top:90px!important}.m-pt-100{padding-top:100px!important}.m-pt-110{padding-top:110px!important}.m-pt-120{padding-top:120px!important}.m-pt-130{padding-top:130px!important}.m-pt-140{padding-top:140px!important}.m-pt-150{padding-top:150px!important}.m-pt-160{padding-top:160px!important}.m-pt-170{padding-top:170px!important}.m-pt-180{padding-top:180px!important}.m-pt-190{padding-top:190px!important}.m-pt-200{padding-top:200px!important}.m-pb-0{padding-bottom:0!important}.m-pb-10{padding-bottom:10px!important}.m-pb-20{padding-bottom:20px!important}.m-pb-30{padding-bottom:30px!important}.m-pb-40{padding-bottom:40px!important}.m-pb-50{padding-bottom:50px!important}.m-pb-60{padding-bottom:60px!important}.m-pb-70{padding-bottom:70px!important}.m-pb-80{padding-bottom:80px!important}.m-pb-90{padding-bottom:90px!important}.m-pb-100{padding-bottom:100px!important}.m-pb-110{padding-bottom:110px!important}.m-pb-120{padding-bottom:120px!important}.m-pb-130{padding-bottom:130px!important}.m-pb-140{padding-bottom:140px!important}.m-pb-150{padding-bottom:150px!important}.m-pb-160{padding-bottom:160px!important}.m-pb-170{padding-bottom:170px!important}.m-pb-180{padding-bottom:180px!important}.m-pb-190{padding-bottom:190px!important}.m-pb-200{padding-bottom:200px!important}.m-mb-0{margin-bottom:0!important}.m-mb-10{margin-bottom:10px!important}.m-mb-20{margin-bottom:20px!important}.m-mb-30{margin-bottom:30px!important}.m-mb-40{margin-bottom:40px!important}.m-mb-50{margin-bottom:50px!important}.m-mb-60{margin-bottom:60px!important}.m-mb-70{margin-bottom:70px!important}.m-mb-80{margin-bottom:80px!important}.m-mb-90{margin-bottom:90px!important}.m-mb-100{margin-bottom:100px!important}.m-mb-110{margin-bottom:110px!important}.m-mb-120{margin-bottom:120px!important}.m-mb-130{margin-bottom:130px!important}.m-mb-140{margin-bottom:140px!important}.m-mb-150{margin-bottom:150px!important}.m-mb-160{margin-bottom:160px!important}.m-mb-170{margin-bottom:170px!important}.m-mb-180{margin-bottom:180px!important}.m-mb-190{margin-bottom:190px!important}.m-mb-200{margin-bottom:200px!important}.m-mt-0{margin-top:0!important}.m-mt-10{margin-top:10px!important}.m-mt-20{margin-top:20px!important}.m-mt-30{margin-top:30px!important}.m-mt-40{margin-top:40px!important}.m-mt-50{margin-top:50px!important}.m-mt-60{margin-top:60px!important}.m-mt-70{margin-top:70px!important}.m-mt-80{margin-top:80px!important}.m-mt-90{margin-top:90px!important}.m-mt-100{margin-top:100px!important}.m-mt-110{margin-top:110px!important}.m-mt-120{margin-top:120px!important}.m-mt-130{margin-top:130px!important}.m-mt-140{margin-top:140px!important}.m-mt-150{margin-top:150px!important}.m-mt-160{margin-top:160px!important}.m-mt-170{margin-top:170px!important}.m-mt-180{margin-top:180px!important}.m-mt-190{margin-top:190px!important}.m-mt-200{margin-top:200px!important}
.mpt-0 {
padding-top: 0 !important;
}
.mpb-0 {
padding-bottom: 0 !important;
}
}
/* start mobile/tablets */
.mobile { display: none; }
@media (max-width: 991.98px){
.mobile { display: block; }
.mobile.flex { display: flex; }
.desktop { display: none; }
.e-con.e-flex>.e-con-inner {
padding-left: 20px;
padding-right: 20px;
}
header, nav {
height: auto;
}
.navbar img {
width: auto;
height: 24px;
}
.navbar {
padding: 0 20px !important;
}
.elementor-18 .elementor-element.elementor-element-c33a4d1 img {
width: 100%;
max-width: 100%;
height: auto;
object-fit: cover;
object-position: center center;
}
body:not(.rtl) .elementor-18 .elementor-element.elementor-element-c46f905 {
left: 20px;
bottom: 15px;
top: auto !important;
width: calc(100% - 40px);
gap: 0 !important;
}
body:not(.rtl) .elementor-18 .elementor-element.elementor-element-ee9d5d3 {
right: 20px;
left: auto;
transform: scale(0.5);
transform-origin: right bottom;
display: flex;
align-items: flex-end;
}
.elementor-18 .elementor-element.elementor-element-c46f905 {
padding: 20px;
}
.elementor-button {
padding: 8px 16px !important;
}
.nv-hero-banner {
--nv-focal-x: 31.6%;
--nv-focal-y: 58%;
}
.elementor-element-26e02ec { gap: 8px; }
.feature-cards { flex-wrap: nowrap; }
.feature-card-right {
flex: 0 0 calc(100% - 80px) !important;
}
.feature-cards svg {
width: 62px !important;
height: 62px !important;
}
.elementor-element-9561234, .elementor-element-0a44f61, .elementor-18 .elementor-element.elementor-element-02ffec6 {
position: relative;
}
.elementor-element-0a44f61 {
width: 236px;
gap: 10px;
margin-left: auto;
margin-top: -152px;
}
.slick-dots {
left: 0;
}
.elementor-element-be298ec {
overflow:hidden;
}
.platform-slick-img img {
height: 538px;
width: 280vw !important;
max-width: none;
object-fit: cover;
object-position: left center;
transition: all .5s ease;
}
.platform-slick-img.viewing-slide-1 img {
height: 538px;
width: 280vw !important;
max-width: none;
object-fit: cover;
object-position: left center;
}
.platform-slick-img.viewing-slide-2 img {
height: 538px;
width: 280vw !important;
max-width: none;
object-fit: cover;
object-position: left center;
transform: translateX(-53vw);
}
.platform-slick-img.viewing-slide-3 img {
height: 538px;
width: 280vw !important;
max-width: none;
object-fit: cover;
object-position: left center;
transform: translateX(-117vw);
}
.platform-slick-img.viewing-slide-4 img {
height: 538px;
width: 280vw !important;
max-width: none;
object-fit: cover;
object-position: left center;
transform: translateX(-180vw);
}
.slick-dots {
position: static;
display: flex !important;
align-items: center;
justify-content: center;
gap: 14px;
width: auto;
margin: 24px 0 0;
padding: 0;
list-style: none;
}
.slick-dots li {
width: 10px;
height: 10px;
margin: 0;
padding: 0;
}
.slick-dots li button {
display: block;
width: 10px;
height: 10px;
padding: 0;
border: 0;
border-radius: 50%;
background: #bfdfde;
font-size: 0;
line-height: 0;
opacity: 1;
cursor: pointer;
transition:
background-color 300ms ease,
transform 300ms ease,
opacity 300ms ease;
}
.xelementor-element-beaafa1 .slick-dots li button {
background: #f5f5f581;
}
/* Remove Slick's default dot */
.slick-dots li button::before {
display: none !important;
content: none !important;
}
/* Current slide */
.slick-dots li.slick-active button {
background: #209b96;
}
.xelementor-element-beaafa1 .slick-dots li.slick-active button {
background: #F5F5F5;
}
/* Optional hover */
.slick-dots li:not(.slick-active) button:hover {
background: #8fc9c6;
transform: scale(1.08);
}
.elementor-element-1fe2a75 .elementor-heading-title {
color: white !important;
}
.glass-card {
isolation: isolate;
overflow: hidden;
/* Lighter translucent Figma-style tint */
background:
linear-gradient(
135deg,
rgb(105 101 94 / 48%) 0%,
rgb(65 84 80 / 43%) 55%,
rgb(35 81 75 / 40%) 100%
) !important;
-webkit-backdrop-filter:
blur(16px)
saturate(115%)
brightness(1.04);
backdrop-filter:
blur(16px)
saturate(115%)
brightness(1.04);
border: 1px solid rgb(255 255 255 / 22%) !important;
xborder-radius: 2px !important;
box-shadow: none !important;
transform: translateZ(0);
}
/* Match the white Figma typography */
.glass-card :is(h1, h2, h3, h4, h5, h6, p) {
color: rgb(255 255 255 / 96%) !important;
}
.glass-card > * {
position: relative;
z-index: 1;
}
.elementor-element-295447f {
z-index: 0;
}
/* =========================================================
MOBILE TYPOGRAPHY FIXES — paste inside your mobile query
========================================================= */
/* Section eyebrow: 16px → Figma 14px */
.eyebrow .elementor-heading-title {
font-size: var(--font-14, 14px) !important;
line-height: 1 !important;
letter-spacing: 0.1em !important;
}
/* Platform-card labels: APPLICATOR, DETECTOR, etc. */
.platform-card .elementor-heading-title {
font-size: var(--font-14, 14px) !important;
line-height: 1 !important;
letter-spacing: 0.1em !important;
}
/* Difference section supporting statement: 26px → 18px */
.elementor-element-7aa88c8 .elementor-heading-title {
font-size: var(--font-18, 18px) !important;
line-height: 130% !important;
}
/* Use-case slider titles: 24px → 18px */
.noovia-at-work-slider .title {
font-size: var(--font-18, 18px) !important;
line-height: 1 !important;
}
/* Integration-card titles: 24px → 18px */
.mobile-slick .elementor-widget-heading .elementor-heading-title {
font-size: var(--font-18, 18px) !important;
line-height: 1 !important;
}
/* Contact-form consent: 16px → 14px */
.nv-signup-consent,
.nv-signup-consent .wpcf7-list-item-label,
.nv-signup-consent a {
font-size: var(--font-14, 14px) !important;
line-height: 1.3 !important;
}
/* Footer tagline: 16px → 14px */
.footer-mobile-tagline {
font-size: var(--font-14, 14px) !important;
line-height: 1.3 !important;
}
/* Footer address and email: 16px → 14px */
.footer-mobile-contact .noovia-footer-typography,
.footer-mobile-contact .footer-address {
font-size: var(--font-14, 14px) !important;
line-height: 1.3 !important;
}
/* Footer column labels: 16px → 10px */
.footer-mobile-chunk-title {
font-size: var(--font-10, 10px) !important;
line-height: 1 !important;
letter-spacing: 0.14em !important;
}
/* Footer disclaimer: approximately 8.3px → 10px */
.footer-mobile-disclaimer {
font-size: var(--font-10, 10px) !important;
line-height: 1.5 !important;
}
/* Footer copyright: 12px → 10px */
.footer-mobile-copyright .noovia-footer-typography {
font-size: var(--font-10, 10px) !important;
line-height: 1 !important;
}
.noovia-work-content .title {
font-size: 18px;
}
.noovia-work-content .content {
font-size: 14px;
}
.elementor-element-afc9593 .slick-slide > .elementor-element {
align-items: center;
}
.elementor-element-afc9593 .slick-slide > .elementor-element p {
text-align: center;
}
.elementor-element-9561234 {
position: absolute;
bottom: 50px !important;
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
.elementor-18 .elementor-element.elementor-element-02ffec6 {
--display: flex;
--position: absolute;
top: 0;
--z-index: 1;
}
.elementor-18 .elementor-element.elementor-element-be298ec {
background: #fff;
}
.elementor-element-b26561c {
padding-bottom: 60px;
}
#noovia-at-work-slider .slick-list{padding:0 60px 0 var(--container-padding) !important;}
.slick-slider {
padding-bottom: 60px;
}
.slick-dotted.slick-slider {
margin-bottom: 0;
}
.contact-form {
padding: 30px !important;
}
.navbar-brand {
padding-top: 16px;
padding-bottom: 10px;
}
.elementor-18 .elementor-element.elementor-element-de66b58 {
--display: flex;
--margin-top: 0;
--margin-bottom: 0px;
--margin-left: 0px;
--margin-right: 0px;
padding: 0 30px;
padding-bottom: 40px;
}
.elementor .footer-mobile-logo {
width: 296px;
max-width: 100%;
}
.elementor .e-d71676f-2acd7b9 {
display: flex;
gap: 30px;
flex-direction: column;
}
.elementor .footer-mobile-use-cases {
width: 100% !important;
flex-direction: row !important;
flex-wrap: wrap !important;
justify-content: center !important;
align-items: center !important;
gap: 0.85rem 1.25rem !important;
}
.elementor .footer-mobile-use-cases > .footer-mobile-chunk-title {
width: 100% !important;
flex: 0 0 100% !important;
text-align: center !important;
}
.elementor .footer-mobile-use-cases >
.noovia-footer-typography:not(.footer-mobile-chunk-title) {
width: auto !important;
flex: 0 0 auto !important;
}
.elementor-element-0b1868d {
text-align: center;
padding-block-end: 32px;
border-block-end-width: 1px;
padding-bottom: 32px !important;
align-items: center;
border-bottom-style: solid;
border-bottom-color: rgba(121, 163, 165, .35);
}
/* Main mobile footer spacing: Figma uses 32px side padding */
.elementor .footer-mobile-content {
box-sizing: border-box;
padding: 50px 32px 40px !important;
gap: 40px !important;
}
/* Contact section */
.elementor .footer-mobile-contact {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
width: 100% !important;
gap: 3px !important;
}
/* CONTACT label missing from the current HTML */
.elementor .footer-mobile-contact::before {
content: "CONTACT";
display: block;
width: 100%;
margin-bottom: 9px;
color: rgb(121 163 165 / 50%);
font-family: "Instrument Sans", Arial, sans-serif;
font-size: var(--font-10, 10px);
font-weight: 600;
line-height: 1;
letter-spacing: 0.14em;
text-transform: uppercase;
}
/* Address and email */
.elementor .footer-mobile-contact .noovia-footer-typography {
box-sizing: border-box;
width: 100% !important;
padding-left: 26px !important;
color: #f5f5f5 !important;
font-size: var(--font-14, 14px) !important;
font-weight: 400 !important;
line-height: 1.3 !important;
}
.elementor .footer-mobile-contact a {
color: inherit !important;
font: inherit !important;
}
/* Smaller Figma-sized contact icons */
.footer-address::before,
.footer-email::before {
top: 1px !important;
left: 0 !important;
width: 16px !important;
height: 16px !important;
background-size: 16px 16px !important;
background-position: center !important;
}
/* Remove divider currently appearing between contact and disclaimer */
.elementor .footer-mobile-content > .e-divider-base {
display: none !important;
}
/* Legal disclaimer */
.elementor .footer-mobile-disclaimer {
display: block;
width: 100% !important;
color: #f5f5f5 !important;
opacity: 0.4 !important;
font-family: "Instrument Sans", Arial, sans-serif !important;
font-size: var(--font-10, 10px) !important;
font-weight: 400 !important;
line-height: 1.5 !important;
letter-spacing: 0 !important;
}
/* Copyright gradient bar */
.elementor .footer-mobile-copyright {
box-sizing: border-box;
width: 100% !important;
height: 31.29px !important;
min-height: 31.29px !important;
padding: 0 32px !important;
justify-content: flex-start !important;
align-items: center !important;
text-align: left !important;
background:
linear-gradient(
90deg,
#006057 0%,
#27a6a1 100%
) !important;
margin-top: 0;
}
.elementor .footer-mobile-copyright .noovia-footer-typography {
color: #f5f5f5 !important;
font-size: var(--font-10, 10px) !important;
font-weight: 500 !important;
line-height: 1 !important;
}
.nv-cxm-timeline__dot {
position: absolute;
top: calc(50% - 9px) !important;
left: 10px !important;
width: 18px !important;
height: 18px !important;
}
.nv-cxm-timeline__rings {
transform: translate(-50%, -50%) scale(0.75) !important;
}
.nv-cxm-timeline__rings {
top: 50% !important;
/* background: red; */
left: 110% !important;
right: 24px;
transform: translate(-50%, -50%) scale(0.38);
}
.elementor-element-b75c101 {
overflow: hidden;
}
.nv-cxm-timeline__fade { display: none; }
.elementor-element-6dfffad { z-index: 0 !important; }
body:not(.rtl) .elementor-18 .elementor-element.elementor-element-6dfffad {
left: 43.5%;
}
.elementor-18 .elementor-element.elementor-element-6dfffad {
top: 35.5%;
top: 61%;
}
.elementor-element-40254f1 {
width: 236px !important;
margin-left: auto;
margin-top: -140px;
}
.slider-card-content {
min-height: 100px;;
}
.elementor-element-afc9593 h4.elementor-heading-title {
text-align:center;
}
.elementor-element-b26561c {
margin-top: -60px;
}
.btn-top-right .elementor-button::before {
content: '';
background-size: contain;
width: 10px;
height: 10px;
position: absolute;
right: 15px;
top: calc(50% + 1px);
transform: translateY(-50%);
}
.btn-right .elementor-button::before {
content: '';
background-size: contain;
width: 14px;
height: 14px;
position: absolute;
right: 15px;
top: calc(50% + 1px);
transform: translateY(-50%);
}
.btn-icon .elementor-button {
position: relative;
padding-right: 35px !important;
}
.btn-icon-smaller .elementor-button {
font-size: var(--font-14);
}
.elementor-18 .elementor-element.elementor-element-c411a9d {
padding-right: 10vw;
}
.elementor-18 .elementor-element.elementor-element-15b44ab img {
aspect-ratio: 295 / 370;
object-fit: cover;
}
.elementor-18 .elementor-element.elementor-element-15b44ab img {
border-radius: 15px;
}
} /* end mobile/tablets */
@media (max-width: 991.98px) {
.elementor-element-0b1868d.e-con, .elementor-element-ee49b57.e-con { width: 100% !important; }
.platform-slick-img {
touch-action: pan-y;
user-select: none;
-webkit-user-select: none;
}
.platform-slick-img img {
pointer-events: none;
-webkit-user-drag: none;
}
.e-con.e-flex {
--width: 100%;
--flex-wrap: var(--flex-wrap-mobile);
}
}
/* mobile only */
@media (max-width: 767.98px) {
.slick-slider {
padding-bottom: 0px;
}
.elementor-element-0a44f61 {
display: none;
}
} /* end mobile only */
/* tablets only */
@media (min-width: 768px) and (max-width: 1224px) {
.feature-cards {
flex: 0 0 calc(50% - 12px) !important;
}
.elementor-element-b26561c {
margin-top: 0;
}
.elementor-element-0a44f61 {
display: none;
}
} /* end tablets only */
/* iPads (landscape) ----------- */
@media only screen and (max-width : 1224px) {...}
/* iPads (portrait) ----------- */
@media only screen and (max-width : 1024px) {...}
/* =========================================================
HERO FOCAL POINT — TABLET / LARGE MOBILE
========================================================= */
@media (min-width: 500px) and (max-width: 991.98px) {
.hero-mobile {
display: none !important;
}
.hero-desktop {
display: block !important;
}
.nv-hero-banner {
--nv-focal-x: 53.6%;
--nv-focal-y: 60%;
position: relative;
overflow: hidden;
}
/* Switch to desktop image */
.nv-hero-banner .hero-desktop {
display: block !important;
}
.nv-hero-banner .hero-mobile {
display: none !important;
}
/*
* The hero must already have its intended height.
* These elements then occupy exactly the same area.
*/
.nv-hero-banner .hero-desktop,
.nv-hero-banner .hero-desktop .elementor-widget-container {
width: 100%;
height: 100%;
}
.nv-hero-banner .hero-desktop img {
display: block;
width: 100% !important;
height: 100% !important;
max-width: none !important;
object-fit: cover !important;
object-position:
var(--nv-focal-x)
var(--nv-focal-y) !important;
}
/* Keep the rings in the same coordinate system */
.nv-hero-banner .nv-focus-layer {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
transform: none !important;
pointer-events: none;
}
.nv-hero-banner .nv-product-focus.circles {
top: var(--nv-focal-y) !important;
left: var(--nv-focal-x) !important;
transform: translate(-50%, -50%) !important;
}
}