/* ═══════════════════════════════════════════════════════════════
Corvanta Group — Custom Brand Styles
Headings : Plus Jakarta Sans
Body : Inter
Primary : #1D49A6 | Secondary : #142467 | Accent : #489CD3
═══════════════════════════════════════════════════════════════ */
/* ─── Google Fonts loaded via in each page's for performance ─ */
/* @import removed – fonts are loaded asynchronously via HTML preload */
/* ─── Brand CSS Variables ────────────────────────────────────── */
:root {
--cv-primary: #1D49A6;
--cv-secondary: #142467;
--cv-accent: #489CD3;
--cv-gradient: linear-gradient(135deg, #142467 0%, #1D49A6 60%, #489CD3 100%);
--cv-gradient-overlay: linear-gradient(135deg, rgba(20, 36, 103, 0.85) 0%, rgba(29, 73, 166, 0.65) 60%, rgba(72, 156, 211, 0.40) 100%);
}
/* ─── Critical: Override theme page-transition opacity ────────── */
/* style.css sets body{opacity:0} for a JS-driven fade — we removed that JS.
This ensures the page is always immediately visible, fixing NO_FCP. */
body {
opacity: 1 !important;
transition: none !important;
background-color: #ffffff;
}
/* ═══════════════════════════════════════════════════════════════
GLOBAL FONTS
Headings → Plus Jakarta Sans
Body / UI → Inter
═══════════════════════════════════════════════════════════════ */
/* Headings */
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: 'Plus Jakarta Sans', sans-serif !important;
}
/* Body, nav, forms, everything else */
body,
p,
a,
li,
ul,
ol,
span,
label,
input,
textarea,
select,
button,
.toptitle,
.e-date,
time,
nav,
.menu-holder,
.mobile-wrap,
blockquote,
cite,
figcaption {
font-family: 'Inter', sans-serif !important;
}
/* ─── Heading weights ─── */
h1,
h2 {
font-weight: 700 !important;
letter-spacing: -0.01em !important;
}
h1.big {
font-weight: 800 !important;
letter-spacing: -0.02em !important;
line-height: 1.1 !important;
}
h3,
h4,
h5 {
font-weight: 700 !important;
}
h6 {
font-weight: 600 !important;
}
/* ─── Body text ─── */
p {
font-weight: 400 !important;
font-size: 0.925rem !important;
line-height: 1.7 !important;
}
/* ═══════════════════════════════════════════════════════════════
TOPTITLE LABELS
═══════════════════════════════════════════════════════════════ */
.toptitle {
color: var(--cv-accent) !important;
font-family: 'Inter', sans-serif !important;
font-weight: 600 !important;
font-size: 0.7rem !important;
letter-spacing: 0.16em !important;
text-transform: uppercase !important;
}
/* ═══════════════════════════════════════════════════════════════
FIXED HEADER
═══════════════════════════════════════════════════════════════ */
/* Fix header to top — out of document flow on all pages */
#header {
position: fixed !important;
top: 0;
left: 0;
right: 0;
z-index: 9999;
width: 100%;
background: #ffffff;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.07);
transition: box-shadow 0.3s ease, background-color 0.3s ease;
}
/* Pages with a hero image — transparent overlay on fixed header */
#header.transparent--fixed {
background: transparent !important;
box-shadow: none !important;
}
/* After scroll on any page — solid white + brand shadow */
#header.moove {
background: #ffffff !important;
box-shadow: 0 2px 28px rgba(20, 36, 103, 0.14) !important;
}
/* ─── Compensate for fixed header on text-only page headers ─── */
/* .page-header (text) — push down by header height */
/* .page-header--image and .slider-pageheader are NOT affected */
.page-header {
margin-top: 80px;
}
/* ═══════════════════════════════════════════════════════════════
NAVIGATION LAYOUT — Logo (left) | Nav (center) | CTA (right)
═══════════════════════════════════════════════════════════════ */
/* Step 1: Remove the template's fixed 40px horizontal padding so the
nav can control its own inset (top/bottom 1.25rem is preserved) */
#header [class|="wrap-header"] {
padding-left: 0 !important;
padding-right: 0 !important;
}
/* Step 2: Give the nav Bootstrap-container behaviour — same max-widths,
auto side margins, and 15px inner padding as every .container below */
nav.main-navigation {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
width: 100% !important;
padding-left: 15px !important;
padding-right: 15px !important;
margin-left: auto !important;
margin-right: auto !important;
}
@media (min-width: 576px) {
nav.main-navigation {
max-width: 540px;
}
}
@media (min-width: 768px) {
nav.main-navigation {
max-width: 720px;
}
}
@media (min-width: 992px) {
nav.main-navigation {
max-width: 960px;
}
}
@media (min-width: 1200px) {
nav.main-navigation {
max-width: 1140px;
}
}
/* Logo — takes the left third, content left-aligned */
#logo {
flex: 1 !important;
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
}
/* Nav links — centred, does not expand */
#main-menu {
flex: 0 0 auto !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
/* CTA buttons — takes the right third, content right-aligned */
.header-cta {
flex: 1 !important;
display: flex !important;
align-items: center !important;
justify-content: flex-end !important;
gap: 10px !important;
}
/* Hide desktop CTA strip on mobile — it lives inside the mobile menu instead */
@media (max-width: 991px) {
.header-cta {
display: none !important;
}
}
/* ─── Mobile menu CTA buttons (below Contact link) ─── */
.mobile-cta-wrap {
display: flex;
flex-direction: column;
gap: 10px;
padding: 20px 24px 28px;
}
.mobile-cta-btn {
display: block !important;
text-align: center !important;
padding: 12px 24px !important;
justify-content: center !important;
width: 100%;
}
/* ─── Nav link styles ─── */
.menu-holder ul>li>a {
font-family: 'Inter', sans-serif !important;
font-weight: 500 !important;
font-size: 0.85rem !important;
letter-spacing: 0.02em !important;
text-transform: none !important;
}
.menu-holder ul>li>a.active {
color: var(--cv-primary) !important;
}
.menu-holder ul>li>a:hover {
color: var(--cv-primary) !important;
}
/* Mobile menu active/hover */
#mobile-menu .main-links--border li a.active,
#mobile-menu .main-links--border li a:hover {
color: var(--cv-primary) !important;
}
/* Mobile menu accent border */
#mobile-menu .main-links--border {
border-color: rgba(29, 73, 166, 0.15) !important;
}
/* ─── Header CTA buttons ─── */
.btn--header--outline,
.btn--header--solid {
display: inline-flex;
align-items: center;
padding: 8px 20px;
border-radius: 100px;
font-family: 'Inter', sans-serif !important;
font-size: 0.82rem !important;
font-weight: 600 !important;
letter-spacing: 0.01em !important;
text-decoration: none !important;
line-height: 1;
white-space: nowrap;
transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
/* Outlined button — default (solid header) */
.btn--header--outline {
background: transparent;
color: var(--cv-primary) !important;
border: 1.5px solid var(--cv-primary);
}
.btn--header--outline:hover {
background: var(--cv-primary) !important;
color: #ffffff !important;
}
/* Solid filled button — default (solid header) */
.btn--header--solid {
background: var(--cv-primary);
color: #ffffff !important;
border: 1.5px solid var(--cv-primary);
}
.btn--header--solid:hover {
background: var(--cv-secondary) !important;
border-color: var(--cv-secondary) !important;
color: #ffffff !important;
}
/* On transparent hero pages — invert to white until scrolled */
#header.transparent--fixed:not(.moove) .btn--header--outline {
color: #ffffff !important;
border-color: rgba(255, 255, 255, 0.65);
}
#header.transparent--fixed:not(.moove) .btn--header--outline:hover {
background: rgba(255, 255, 255, 0.15) !important;
border-color: #ffffff;
}
#header.transparent--fixed:not(.moove) .btn--header--solid {
background: #ffffff;
border-color: #ffffff;
color: var(--cv-primary) !important;
}
#header.transparent--fixed:not(.moove) .btn--header--solid:hover {
background: rgba(255, 255, 255, 0.88) !important;
}
/* ═══════════════════════════════════════════════════════════════
BUTTONS
═══════════════════════════════════════════════════════════════ */
/* Primary solid buttons */
.btn--big--round,
.btn--big--arrow--round,
.btn--medium--round,
.btn--big--round--border {
background-color: var(--cv-primary) !important;
border-color: var(--cv-primary) !important;
color: #fff !important;
font-family: 'Inter', sans-serif !important;
font-weight: 600 !important;
font-size: 0.82rem !important;
letter-spacing: 0.04em !important;
text-transform: none !important;
transition: all 0.3s ease !important;
}
.btn--big--round:hover,
.btn--big--arrow--round:hover,
.btn--medium--round:hover,
.btn--big--round--border:hover {
background-color: #3A6FD8 !important;
border-color: #3A6FD8 !important;
opacity: 1 !important;
transform: translateY(-1px);
}
/* Light outlined buttons (on dark backgrounds) */
.btn--big--round--border--light,
.btn--big--border--light--round {
font-family: 'Inter', sans-serif !important;
font-weight: 600 !important;
font-size: 0.82rem !important;
letter-spacing: 0.04em !important;
text-transform: none !important;
transition: all 0.3s ease !important;
}
.btn--big--round--border--light:hover,
.btn--big--border--light--round:hover {
background-color: var(--cv-accent) !important;
border-color: var(--cv-accent) !important;
color: #fff !important;
transform: translateY(-1px);
}
/* ═══════════════════════════════════════════════════════════════
TEXT LINKS
═══════════════════════════════════════════════════════════════ */
.simple--underline,
.simple--arrow {
color: var(--cv-primary) !important;
font-family: 'Inter', sans-serif !important;
font-weight: 500 !important;
font-size: 0.85rem !important;
letter-spacing: 0.01em !important;
}
.simple--underline::after,
.simple--arrow::after {
background-color: var(--cv-accent) !important;
}
.simple--underline:hover,
.simple--arrow:hover {
color: var(--cv-secondary) !important;
}
/* ═══════════════════════════════════════════════════════════════
SEPARATORS
═══════════════════════════════════════════════════════════════ */
.separator-element--lg--center {
border-top-color: var(--cv-accent) !important;
opacity: 0.4;
}
/* ═══════════════════════════════════════════════════════════════
ICON ELEMENTS
═══════════════════════════════════════════════════════════════ */
.icon-element--round--box--border .icon>i,
.icon-element--center .icon>i,
.ilight,
.feather {
color: var(--cv-accent) !important;
}
.icon-element--round--box--border {
transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
height: 100%;
}
.icon-element--round--box--border:hover {
border-color: var(--cv-accent) !important;
box-shadow: 0 8px 30px rgba(29, 73, 166, 0.12) !important;
}
.icon-element--round--box--border:hover .icon>i,
.icon-element--round--box--border:hover .ilight {
color: var(--cv-primary) !important;
}
/* Centre icon elements (used in stats) */
.icon-element--center .text h2 {
color: var(--cv-primary) !important;
font-family: 'Plus Jakarta Sans', sans-serif !important;
font-weight: 800 !important;
font-size: 2.2rem !important;
}
/* ═══════════════════════════════════════════════════════════════
PRODUCT / PROJECT CARDS
═══════════════════════════════════════════════════════════════ */
.icon--br--square--secondary {
background-color: var(--cv-primary) !important;
transition: background-color 0.3s ease !important;
}
.icon--br--square--secondary i {
color: #fff !important;
}
.square-element--project:hover .icon--br--square--secondary {
background-color: var(--cv-accent) !important;
}
.square-element--project {
transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}
.square-element--project:hover {
transform: translateY(-4px) !important;
box-shadow: 0 12px 40px rgba(20, 36, 103, 0.15) !important;
}
/* Ensure text inside product cards has breathing room */
.square-element--project .text {
padding: 18px 20px 22px !important;
}
.square-element--project .text h3 {
font-size: 1rem !important;
line-height: 1.45 !important;
margin-bottom: 8px !important;
}
.square-element--project .text p {
font-size: 0.875rem !important;
margin-bottom: 12px !important;
}
/* ═══════════════════════════════════════════════════════════════
CAROUSEL / PORTFOLIO NAVIGATION
═══════════════════════════════════════════════════════════════ */
.navigation-element--border--round--light .nav--prev,
.navigation-element--border--round--light .nav--next {
transition: all 0.3s ease !important;
}
.navigation-element--border--round--light .nav--prev:hover,
.navigation-element--border--round--light .nav--next:hover {
background-color: var(--cv-primary) !important;
border-color: var(--cv-primary) !important;
color: #fff !important;
}
/* ═══════════════════════════════════════════════════════════════
data-bg="template" — Stats, CTA backgrounds → brand gradient
═══════════════════════════════════════════════════════════════ */
[data-bg="template"] {
background: var(--cv-gradient) !important;
}
[data-bg="template"] .toptitle {
color: rgba(255, 255, 255, 0.65) !important;
}
[data-bg="template"] h2,
[data-bg="template"] h6 {
color: #fff !important;
}
[data-bg="template"] p {
color: rgba(255, 255, 255, 0.78) !important;
}
[data-bg="template"] .icon-element--center .text h2 {
color: #fff !important;
font-family: 'Plus Jakarta Sans', sans-serif !important;
font-size: 2.2rem !important;
font-weight: 800 !important;
}
[data-bg="template"] .icon-element--center .text h6 {
color: rgba(255, 255, 255, 0.9) !important;
}
[data-bg="template"] .icon-element--center .text p {
color: rgba(255, 255, 255, 0.65) !important;
}
/* ═══════════════════════════════════════════════════════════════
CTA BOX
═══════════════════════════════════════════════════════════════ */
.ctabox-element--center--round--light {
background: var(--cv-gradient) !important;
}
/* ═══════════════════════════════════════════════════════════════
BLOCKQUOTE
═══════════════════════════════════════════════════════════════ */
.blockquote-element--primary {
border-left-color: var(--cv-accent) !important;
}
.blockquote-element--primary::before {
color: var(--cv-accent) !important;
}
/* ═══════════════════════════════════════════════════════════════
LIST ELEMENT (checkmarks / bullets)
═══════════════════════════════════════════════════════════════ */
.list-element--plus ul li::before {
color: var(--cv-primary) !important;
border-color: var(--cv-primary) !important;
}
/* ═══════════════════════════════════════════════════════════════
BLOG / ARTICLE META
═══════════════════════════════════════════════════════════════ */
.e-date,
time.e-date {
color: var(--cv-accent) !important;
font-weight: 600 !important;
}
.categories li a {
color: var(--cv-primary) !important;
font-weight: 600 !important;
}
.categories li a:hover {
color: var(--cv-secondary) !important;
}
/* Article body intro heading */
.sectiontitle-element--full h2 {
color: var(--cv-secondary) !important;
}
/* ═══════════════════════════════════════════════════════════════
ARTICLE CARD HOVER + PADDING
═══════════════════════════════════════════════════════════════ */
.rectangle-element--article--wide {
transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}
.rectangle-element--article--wide:hover {
transform: translateY(-4px) !important;
box-shadow: 0 12px 36px rgba(20, 36, 103, 0.13) !important;
}
/* Ensure text inside article cards has breathing room */
.rectangle-element--article--wide .text {
padding: 20px 20px 22px !important;
}
.rectangle-element--article--wide .text h3 {
font-size: 1rem !important;
line-height: 1.45 !important;
margin-bottom: 8px !important;
}
.rectangle-element--article--wide .text p {
font-size: 0.875rem !important;
margin-bottom: 12px !important;
}
/* Blog section on homepage — ensure section has consistent vertical padding */
section.blog-section-home {
padding-top: 60px !important;
padding-bottom: 60px !important;
}
/* ═══════════════════════════════════════════════════════════════
VIDEO / PLAY BUTTON
═══════════════════════════════════════════════════════════════ */
.icon--xl--white--shadow--round--white i {
color: var(--cv-primary) !important;
}
/* ═══════════════════════════════════════════════════════════════
FOOTER — white background
═══════════════════════════════════════════════════════════════ */
#footer {
background-color: #ffffff !important;
border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
}
/* Headings */
#footer h6 {
color: var(--cv-secondary) !important;
font-family: 'Plus Jakarta Sans', sans-serif !important;
font-weight: 700 !important;
font-size: 0.78rem !important;
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
}
/* Body / description text */
#footer p,
#footer .logo-footer p {
color: #555e7a !important;
font-size: 0.875rem !important;
line-height: 1.7 !important;
}
/* Nav links */
#footer .list-element--text ul li a,
#footer .info-footer p {
color: #555e7a !important;
font-size: 0.875rem !important;
}
#footer .list-element--text ul li a:hover {
color: var(--cv-primary) !important;
}
/* Inline bottom links (privacy / cookie) */
#footer .list-element--text--inline ul li a {
color: #888 !important;
font-size: 0.78rem !important;
}
#footer .list-element--text--inline ul li a:hover {
color: var(--cv-primary) !important;
}
/* Copyright */
#footer .down .text p {
color: #888 !important;
font-size: 0.78rem !important;
}
/* Bottom border */
#footer .down.border {
border-top-color: rgba(0, 0, 0, 0.08) !important;
}
/* Social icons */
#footer .social-element--small ul li a {
color: var(--cv-primary) !important;
border-color: rgba(29, 73, 166, 0.2) !important;
}
#footer .social-element--small ul li a:hover {
background-color: var(--cv-primary) !important;
border-color: var(--cv-primary) !important;
color: #ffffff !important;
}
/* ═══════════════════════════════════════════════════════════════
PAGE HEADER (non-image, text only)
═══════════════════════════════════════════════════════════════ */
.page-header {
border-bottom: 3px solid rgba(72, 156, 211, 0.25);
}
.page-header h1.big {
color: var(--cv-secondary) !important;
}
/* ═══════════════════════════════════════════════════════════════
COLOURED SECTION ACCENT — grey bg sections get a top accent line
═══════════════════════════════════════════════════════════════ */
[data-bg="grey"] {
position: relative;
}
[data-bg="grey"]::before {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: 80px;
height: 3px;
background: var(--cv-gradient);
border-radius: 0 0 3px 0;
}
/* ═══════════════════════════════════════════════════════════════
HERO SLIDER — 3-Slide Swiper
═══════════════════════════════════════════════════════════════ */
.slider-pageheader {
position: relative;
width: 100%;
height: 100vh;
min-height: 620px;
overflow: hidden;
}
.slider-pageheader .swiper-wrapper {
height: 100%;
}
/* Each slide fills the full container */
.slider-pageheader .swiper-slide,
.slider-pageheader .hero-slide {
position: relative;
height: 100%;
width: 100%;
overflow: hidden;
display: flex;
align-items: flex-start;
}
/* Full-bleed background image per slide */
.hero-slide-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
/* Subtle Ken Burns zoom effect */
transform: scale(1.06);
transition: transform 8s ease-out;
}
.swiper-slide-active .hero-slide-bg {
transform: scale(1.0);
}
/* Branded gradient overlay */
.hero-slide-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--cv-gradient-overlay);
z-index: 1;
}
/* Left accent bar on slides */
.hero-slide-overlay::after {
content: '';
display: block;
position: absolute;
left: 0;
top: 0;
width: 6px;
height: 100%;
background: var(--cv-gradient);
opacity: 0.7;
}
/* Slide text content sits above overlay — top-anchored so CTA is never clipped */
.hero-slide-content {
position: relative;
z-index: 2;
width: 100%;
padding-top: clamp(120px, 16vh, 180px);
/* 80px header + generous breathing room */
padding-bottom: 60px;
}
/* Slide text fade-up animation */
.swiper-slide-active .hero-slide-content .sectiontitle-element--light {
animation: slideContentIn 0.9s ease forwards;
}
@keyframes slideContentIn {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Disable interaction on hidden (non-active) slides so their invisible buttons
cannot intercept clicks — required when effect: 'fade' stacks all slides in DOM */
.slider-pageheader .swiper-slide:not(.swiper-slide-active) {
pointer-events: none;
}
/* ─── Swiper Arrow Navigation (desktop) ─────────────────────────────────── */
.slider-pageheader .swiper-button-prev,
.slider-pageheader .swiper-button-next {
color: #fff;
opacity: 0.7;
transition: opacity 0.25s ease;
}
.slider-pageheader .swiper-button-prev:hover,
.slider-pageheader .swiper-button-next:hover {
opacity: 1;
}
/* Hidden on mobile — swipe gesture is sufficient */
@media (max-width: 768px) {
.slider-pageheader .swiper-button-prev,
.slider-pageheader .swiper-button-next {
display: none !important;
}
}
/* ─── Swiper Pagination Dots ─── */
.slider-pageheader .swiper-pagination {
bottom: 32px !important;
}
.slider-pageheader .swiper-pagination-bullet {
width: 10px !important;
height: 10px !important;
background: rgba(255, 255, 255, 0.40) !important;
opacity: 1 !important;
transition: all 0.35s ease !important;
}
.slider-pageheader .swiper-pagination-bullet-active {
background: var(--cv-accent) !important;
width: 30px !important;
border-radius: 5px !important;
}
/* ─── Clients Logo Ticker ────────────────────────────────────────────────── */
.clients-logos-wrap {
overflow: hidden;
padding: 28px 0;
}
/* Force linear easing so the scroll looks like a true continuous marquee */
.clients-logos-carousel .swiper-wrapper {
transition-timing-function: linear !important;
}
.clients-logos-carousel .swiper-slide {
display: flex;
align-items: center;
justify-content: center;
height: 90px !important;
/* fixed row height — overrides the generic swiper-slide padding */
padding: 0 !important;
/* strip the large top/bottom padding from style.css */
}
.clients-logos-carousel .swiper-slide figure {
margin: 0;
padding: 0 8px;
display: flex;
align-items: center;
justify-content: center;
}
.clients-logos-carousel .swiper-slide img {
max-height: 64px;
width: auto;
max-width: 100%;
object-fit: contain;
/* filter: grayscale(100%); */
/* opacity: 0.55; */
transition: filter 0.35s ease, opacity 0.35s ease;
}
.clients-logos-carousel .swiper-slide img:hover {
filter: grayscale(0%);
opacity: 1;
}
/* ═══════════════════════════════════════════════════════════════
RESPONSIVE VIDEO EMBEDS (YouTube iframes)
═══════════════════════════════════════════════════════════════ */
.video-embed-responsive {
position: relative;
padding-bottom: 56.25%;
/* 16:9 */
height: 0;
overflow: hidden;
border-radius: 14px;
background: #000;
box-shadow: 0 16px 56px rgba(20, 36, 103, 0.16);
}
.video-embed-responsive iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
}
/* Portrait / Shorts aspect ratio (9:16) for industry YouTube Shorts */
.video-embed-responsive--vertical {
position: relative;
padding-bottom: 177.78%;
/* 9:16 */
height: 0;
overflow: hidden;
border-radius: 14px;
background: #000;
box-shadow: 0 16px 56px rgba(20, 36, 103, 0.16);
max-width: 320px;
/* prevents full-column stretch */
margin: 0 auto;
}
.video-embed-responsive--vertical iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
}
/* Industry card text block below the video */
.industry-text-block {
padding: 22px 8px 0;
}
.industry-text-block h4 {
margin-bottom: 10px;
}
.industry-text-block p {
margin-bottom: 14px;
}
/* ═══════════════════════════════════════════════════════════════
INDUSTRY IMAGE CARDS (product-detail page)
═══════════════════════════════════════════════════════════════ */
.industry-card {
position: relative;
height: 420px;
border-radius: 16px;
overflow: hidden;
margin-bottom: 30px;
cursor: default;
}
.industry-card__bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
transition: transform 0.6s ease;
}
.industry-card:hover .industry-card__bg {
transform: scale(1.06);
}
.industry-card__overlay {
position: absolute;
inset: 0;
background: linear-gradient(to bottom,
rgba(20, 36, 103, 0.12) 0%,
rgba(20, 36, 103, 0.50) 45%,
rgba(20, 36, 103, 0.94) 100%);
z-index: 1;
}
.industry-card__content {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 28px 28px 32px;
color: #fff;
z-index: 2;
}
.industry-card__icon {
margin-bottom: 10px;
}
.industry-card__icon i {
color: var(--cv-accent) !important;
font-size: 1.5rem;
line-height: 1;
}
.industry-card__content h4 {
color: #fff !important;
font-size: 1.15rem !important;
font-weight: 700 !important;
margin-bottom: 8px !important;
line-height: 1.3 !important;
}
.industry-card__content p {
color: rgba(255, 255, 255, 0.80) !important;
font-size: 0.875rem !important;
line-height: 1.55 !important;
margin-bottom: 12px !important;
}
.industry-card__content ul {
list-style: none;
padding: 0;
margin: 0;
}
.industry-card__content ul li {
position: relative;
padding: 3px 0 3px 18px;
color: rgba(255, 255, 255, 0.70) !important;
font-size: 0.80rem !important;
line-height: 1.5 !important;
}
.industry-card__content ul li::before {
content: '→';
position: absolute;
left: 0;
top: 3px;
color: var(--cv-accent) !important;
font-size: 0.75rem;
line-height: 1.5;
}
/* ═══════════════════════════════════════════════════════════════
MOBILE APP IMAGES (product-detail page)
═══════════════════════════════════════════════════════════════ */
.immerse-app-images {
display: flex;
align-items: flex-start;
justify-content: center;
gap: 16px;
}
.app-img-tablet {
width: 90%;
height: auto;
border-radius: 14px;
box-shadow: 0 20px 60px rgba(20, 36, 103, 0.15);
mix-blend-mode: multiply;
}
@media (max-width: 575px) {
.immerse-app-images {
flex-direction: column;
align-items: center;
}
.app-img-tablet {
width: 90%;
}
.app-img-phone {
width: 60%;
margin-top: 0;
}
}
/* ─── Station section label badge ─── */
.station-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 5px 14px;
border-radius: 100px;
background: rgba(29, 73, 166, 0.08);
color: var(--cv-primary);
font-family: 'Inter', sans-serif;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
margin-bottom: 14px;
border: 1px solid rgba(29, 73, 166, 0.15);
}
/* Slide counter badge (optional visual polish) */
.hero-slide-number {
position: absolute;
bottom: 36px;
right: 40px;
z-index: 10;
color: rgba(255, 255, 255, 0.5);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.15em;
}
/* ─── Responsive hero height ─── */
@media (max-width: 768px) {
.slider-pageheader {
height: 100svh;
min-height: 520px;
}
.hero-slide-content {
padding-top: 110px;
padding-bottom: 50px;
}
.slider-pageheader .swiper-button-prev,
.slider-pageheader .swiper-button-next {
display: none !important;
}
}
/* ─── iPhone SE / very small screens ─── */
@media (max-width: 390px) {
.hero-slide-content .sectiontitle-element--light h1.big,
.hero-slide-content .sectiontitle-element--light h2.big {
font-size: 2.2rem !important;
}
.hero-slide-content .sectiontitle-element--light p {
font-size: 0.85rem !important;
margin-bottom: 1rem !important;
}
.hero-slide-content {
padding-top: 100px;
padding-bottom: 30px;
}
}
/* ═══════════════════════════════════════════════════════════════
COLOURFUL CLIENTS SECTION ICONS
═══════════════════════════════════════════════════════════════ */
.icon-element--center .info {
transition: transform 0.3s ease;
}
.icon-element--center:hover .info {
transform: translateY(-3px);
}
.icon-element--center .text p.f500 {
color: var(--cv-primary) !important;
font-weight: 700 !important;
}
.icon-element--center .text p.sm {
color: var(--cv-accent) !important;
font-size: 0.78rem !important;
}
/* ═══════════════════════════════════════════════════════════════
BRAND ACCENT UTILITY CLASSES
═══════════════════════════════════════════════════════════════ */
.cv-accent-bar {
display: block;
width: 48px;
height: 4px;
background: var(--cv-gradient);
border-radius: 2px;
margin-bottom: 20px;
}
.text-cv-accent {
color: var(--cv-accent) !important;
}
.text-cv-primary {
color: var(--cv-primary) !important;
}
.bg-cv-gradient {
background: var(--cv-gradient) !important;
}
/* Centre-align the form success / error message */
[class|="basic-form"] [class*="alert-wrap"] {
text-align: center;
}
/* ═══════════════════════════════════════════════════════════════
UNIFORM FIELD HEIGHT — contact form
Locks all text inputs to the same height so nothing looks short
═══════════════════════════════════════════════════════════════ */
[class|="basic-form"] input.form-field {
height: 46px;
line-height: 46px;
}
/* ═══════════════════════════════════════════════════════════════
INTL-TEL-INPUT — Visual integration with .form-field
Makes the phone flag+dial-code prefix match site form styles
═══════════════════════════════════════════════════════════════ */
/* Wrapper must be full-width block to match .form-field layout */
.iti {
width: 100%;
display: block;
}
/* Restore full width on the input — the library shrinks it to
accommodate the flag button via inline style */
.iti input.form-field,
.iti input[type="tel"] {
width: 100% !important;
}
/* Flag + dial-code button — must match the 46px input height exactly */
.iti__flag-container {
height: 46px;
line-height: 46px;
}
.iti__selected-flag {
background-color: #F8F8F8 !important;
border-right: 1px solid rgba(34, 34, 34, 0.12) !important;
border-radius: 5px 0 0 5px !important;
height: 46px !important;
line-height: 46px !important;
padding: 0 8px 0 12px !important;
outline: none !important;
}
.iti__selected-flag:hover,
.iti__selected-flag:focus {
background-color: #f0f0f0 !important;
}
/* Dial code badge — match Inter body font */
.iti__selected-dial-code {
font-family: 'Inter', sans-serif !important;
font-size: 14px !important;
font-weight: 500 !important;
color: #222222 !important;
margin-left: 6px !important;
}
/* Country dropdown list */
.iti__country-list {
font-family: 'Inter', sans-serif !important;
font-size: 13px !important;
border: 1px solid rgba(34, 34, 34, 0.15) !important;
border-radius: 5px !important;
box-shadow: 0 8px 24px rgba(20, 36, 103, 0.10) !important;
max-height: 220px !important;
}
.iti__country.iti__highlight,
.iti__country:hover {
background-color: rgba(29, 73, 166, 0.06) !important;
}
/* Preferred-country separator */
.iti__divider {
border-bottom-color: rgba(34, 34, 34, 0.10) !important;
}
@media screen and (max-width: 414px) {
.iti__selected-flag {
padding: 0 6px 0 8px !important;
}
}
/* ═══════════════════════════════════════════════════════════════
PICTURE ELEMENTS AS FULL-BLEED BACKGROUNDS (LCP-discoverable)
Allows ![]()
to replace CSS background-image divs so
Lighthouse can measure Largest Contentful Paint correctly.
═══════════════════════════════════════════════════════════════ */
/* Hero slider slides */
.hero-slide-bg picture {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.hero-slide-bg img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
/* Page headers (contact, product-detail) */
picture.imagebg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
overflow: hidden;
z-index: 0;
}
[class|="page-header"] picture.imagebg>img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
display: block;
position: absolute;
top: 0;
left: 0;
transform: none;
}
/* ═══════════════════════════════════════════════════════════════
PRODUCT DETAIL — Full Video Banner (show complete video, no crop)
═══════════════════════════════════════════════════════════════ */
/* Remove fixed padding so video height drives the banner */
.page-header--image {
padding-top: 0 !important;
padding-bottom: 0 !important;
isolation: isolate;
/* create stacking context for overlay */
}
/* Flow imagebg div normally so video's natural height sets banner height */
.page-header--image>div.imagebg {
position: relative !important;
top: auto !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
width: 100%;
z-index: 0 !important;
line-height: 0;
font-size: 0;
}
/* Full-width video, natural aspect ratio — no crop on desktop */
.page-header--image>div.imagebg video {
width: 100%;
height: auto;
display: block;
}
/* Ensure dark overlay sits ON TOP of the video */
.page-header--image[data-overlay]:before {
z-index: 1 !important;
}
/* Text/CTA content floats above the overlay near the bottom of the banner */
.page-header--image>.container {
position: absolute !important;
bottom: 80px;
left: 0;
right: 0;
z-index: 2;
}
/* ── Mobile: fixed height with video covering the area ──────── */
@media screen and (max-width: 767px) {
.page-header--image {
min-height: 520px;
}
/* Revert imagebg to absolute so it fills the min-height container */
.page-header--image>div.imagebg {
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
}
/* Video covers the banner area, anchored to the left so left columns are visible */
.page-header--image>div.imagebg video {
width: 100%;
height: 100%;
object-fit: cover;
object-position: left top;
}
/* Text stretches from below nav to near bottom */
.page-header--image>.container {
top: 100px;
bottom: 40px;
display: flex;
align-items: flex-end;
}
}
@media screen and (max-width: 576px) {
.page-header--image {
min-height: 480px;
}
.page-header--image>.container {
top: 80px;
bottom: 30px;
}
}