/*
* CLEANUK site stylesheet
* -----------------------
* Reference this file to build pages that match the CLEANUK site preview.
*
*
*
* Optional scroll-in animations (matches template behavior):
*
*
* Expected markup roots:
*
* …
*
*
*
* Asset paths are root-absolute (/input/…).
* Pages use clean URLs: /, /services, /gallery, /areas, /contact
*/
@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Montserrat:wght@400;500;600;700;800&display=swap");
/* ============================================================
Design tokens — use these when authoring matching pages
============================================================ */
:root {
/* Brand */
--cu-navy: #0d1f3c;
--cu-navy-deep: #091e45;
--cu-navy-mid: #0d2b5e;
--cu-navy-hover: #1a3560;
--cu-red: #c8102e;
--cu-red-alt: #c0202a;
--cu-red-dark: #a01820;
--cu-sky: #a8c8e8;
--cu-sky-soft: #eaf2f8;
--cu-sky-mist: #dcebfc;
--cu-water: #5b9bd5;
--cu-ink: #1a1a2e;
--cu-text: #2c2c2c;
--cu-muted: #555555;
--cu-white: #ffffff;
/* Typography */
--cu-font-display: "Bebas Neue", "Anton", Impact, sans-serif;
--cu-font-body: "Montserrat", "Nunito Sans", Arial, sans-serif;
--cu-font-ui: Arial, "Helvetica Neue", Helvetica, sans-serif;
/* Layout */
--cu-max: 1280px;
--cu-gutter: 32px;
--cu-gutter-sm: 24px;
--cu-section-y: 64px;
--cu-radius: 4px;
--cu-radius-md: 6px;
--cu-radius-lg: 10px;
/* Motion */
--cu-ease: cubic-bezier(0.22, 1, 0.36, 1);
--cu-ease-section: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
/* ============================================================
Site styles (extracted from template / final site preview)
============================================================ */
/* preview shell */
html {
scroll-behavior: smooth;
overscroll-behavior: none;
}
body {
margin: 0;
overscroll-behavior: none;
}
.site-preview-root {
display: block;
}
/* Keep hero/nav appearance stable even if sections toggle page theme/color-scheme. */
.wf-assembled-hero-shell,
.wf-assembled-hero-shell * {
color-scheme: normal !important;
}
/* Hide common model-added fixed “Press D / light–dark” hint UI; document-level key handlers still run */
.site-preview-root [aria-label*="Press D" i],
.site-preview-root [aria-label*="press d" i],
.site-preview-root [title*="Press D" i],
.site-preview-root [title*="light/dark" i],
.site-preview-root [title*="light / dark" i],
.site-preview-root [data-theme-toggle],
.site-preview-root [data-wf-theme-hint],
.site-preview-root .wf-theme-toggle-chip {
display: none !important;
}
/* === section scroll animations === */
@keyframes wf-section-in {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: none; }
}
/*
* wf-anim-js is added to by a blocking script before body renders.
* Without it (no JS), nothing is hidden.
*
* Structure per section:
* [data-wf-section] ← outer shell, background, never animated
* .wf-section-body ← passthrough
* model root ← owns background colour, never animated
* > children ← hidden until in-view, then fade+lift
*/
html.wf-anim-js .site-preview-root [data-wf-section]:not(.wf-section--in) .wf-section-body > * > * {
opacity: 0;
}
.site-preview-root [data-wf-section].wf-section--in .wf-section-body > * > * {
animation: wf-section-in 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
@media (prefers-reduced-motion: reduce) {
html.wf-anim-js .site-preview-root [data-wf-section]:not(.wf-section--in) .wf-section-body > * > * {
opacity: 1;
}
.site-preview-root [data-wf-section].wf-section--in .wf-section-body > * > * {
animation: none;
}
}
/* === hero_final.css === */
.wf-hero { font-family: 'Arial', 'Helvetica Neue', Helvetica, sans-serif; margin: 0; padding: 0; box-sizing: border-box; width: 100%; }.wf-hero *, .wf-hero *::before, .wf-hero *::after { box-sizing: border-box; }.wf-hero__topbar { background-color: #0d1f3c; color: #fff; font-size: 14px; padding: 8px 0; }.wf-hero__topbar-inner { max-width: 1280px; margin: 0 auto; padding: 0 24px; display: flex; justify-content: flex-end; align-items: center; gap: 32px; }.wf-hero__topbar-item { display: flex; align-items: center; gap: 7px; font-weight: 500; letter-spacing: 0.01em; }.wf-hero__icon { width: 16px; height: 16px; flex-shrink: 0; }.wf-hero__nav { background-color: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.08); padding: 0; }.wf-hero__nav-inner { max-width: 1280px; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; height: 80px; }.wf-hero__logo { display: flex; align-items: center; gap: 6px; text-decoration: none; }.wf-hero__logo-clean { font-size: 36px; font-weight: 900; color: #0d1f3c; letter-spacing: -1px; font-style: italic; }.wf-hero__logo-uk { font-size: 36px; font-weight: 900; color: #c8102e; letter-spacing: -1px; font-style: italic; }.wf-hero__logo-badge { width: 44px; height: 44px; border-radius: 50%; border: 3px solid #0d1f3c; background: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; margin-left: 4px; }.wf-hero__logo-badge-ring { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, #c8102e 40%, #fff 40%, #fff 60%, #0d1f3c 60%); display: flex; align-items: center; justify-content: center; }.wf-hero__logo-badge-text { font-size: 5px; font-weight: 900; color: #fff; text-align: center; letter-spacing: 0; line-height: 1; }.wf-hero__navlinks { display: flex; align-items: center; gap: 4px; }.wf-hero__navlink { text-decoration: none; color: #1a1a2e; font-size: 15px; font-weight: 600; padding: 8px 16px; border-radius: 4px; transition: color 0.2s; white-space: nowrap; }.wf-hero__navlink--active { color: #c8102e; border-bottom: 2px solid #c8102e; border-radius: 0; }.wf-hero__navlink:hover { color: #c8102e; }.wf-hero__navlink--cta { background-color: #0d1f3c; color: #fff !important; border-radius: 6px; padding: 12px 22px; margin-left: 12px; font-size: 15px; }.wf-hero__navlink--cta:hover { background-color: #1a3560; color: #fff !important; }.wf-hero__body { position: relative; width: 100%; min-height: 0; flex: 1 1 auto; overflow: hidden; display: flex; align-items: center; }.wf-hero__bg-image { position: absolute; inset: 0; background-image: url(/input/hero_reference.jpg); background-size: cover; background-position: center center; z-index: 0; }.wf-hero__overlay { position: absolute; inset: 0; background: linear-gradient(to right, rgba(220,235,252,0.82) 0%, rgba(220,235,252,0.65) 38%, rgba(220,235,252,0.15) 60%, transparent 80%); z-index: 1; }.wf-hero__deco-drops { position: absolute; inset: 0; z-index: 2; pointer-events: none; }.wf-hero__drop { position: absolute; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); opacity: 0.18; }.wf-hero__drop--1 { width: 28px; height: 28px; background: #5b9bd5; top: 18%; left: 3%; }.wf-hero__drop--2 { width: 18px; height: 18px; background: #5b9bd5; top: 30%; left: 1.5%; }.wf-hero__drop--3 { width: 14px; height: 14px; background: #5b9bd5; top: 55%; left: 4%; }.wf-hero__drop--4 { width: 22px; height: 22px; background: #5b9bd5; top: 10%; left: 8%; }.wf-hero__drop--5 { width: 10px; height: 10px; background: #5b9bd5; top: 68%; left: 2%; }.wf-hero__content { position: relative; z-index: 3; max-width: 600px; padding: 60px 48px 100px 60px; }.wf-hero__headline { font-size: clamp(32px, 4.5vw, 58px); font-weight: 900; color: #0d1f3c; line-height: 1.08; text-transform: uppercase; margin: 0 0 20px 0; letter-spacing: -0.5px; }.wf-hero__headline{white-space:normal;}.wf-hero__headline-br{display:block;}.wf-hero__subtext { font-size: 16px; color: #1a1a2e; line-height: 1.6; margin: 0 0 32px 0; max-width: 460px; font-weight: 400; }.wf-hero__ctas { display: flex; gap: 16px; flex-wrap: wrap; }.wf-hero__btn { display: inline-block; text-decoration: none; font-size: 13px; font-weight: 800; letter-spacing: 0.06em; padding: 16px 26px; border-radius: 4px; text-transform: uppercase; transition: opacity 0.2s, transform 0.2s; white-space: nowrap; }.wf-hero__btn--red { background-color: #c8102e; color: #fff; }.wf-hero__btn--dark { background-color: #0d1f3c; color: #fff; }.wf-hero__btn:hover { opacity: 0.88; transform: translateY(-1px); }.wf-hero__bottom-wave { position: absolute; bottom: 0; left: 0; right: 0; z-index: 4; height: 60px; pointer-events: none; }.wf-hero__wave-red { position: absolute; bottom: 0; left: 0; width: 220px; height: 28px; background-color: #c8102e; border-radius: 0 40px 0 0; clip-path: ellipse(110px 28px at 0% 100%); }.wf-hero__wave-blue { position: absolute; bottom: 0; left: 0; width: 180px; height: 40px; background-color: rgba(91,155,213,0.35); border-radius: 0 60px 0 0; clip-path: ellipse(90px 40px at 0% 100%); }@media (max-width: 768px) { .wf-hero__topbar-inner { justify-content: center; flex-wrap: wrap; gap: 16px; } .wf-hero__nav-inner { flex-wrap: wrap; height: auto; padding: 12px 16px; gap: 12px; } .wf-hero__navlinks { flex-wrap: wrap; gap: 2px; } .wf-hero__content { padding: 40px 24px 80px 24px; } .wf-hero__body { min-height: 0; } }
/* Web Foundation: hero concept image as section background */
.wf-hero__body {
position: relative;
}
.wf-hero__bg-image {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background-image: url("/input/hero_reference.jpg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.wf-hero__overlay {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
}
.wf-hero__nav,
.wf-hero__content,
.wf-hero__text-col,
.wf-hero__tablet-preview {
position: relative;
z-index: 2;
}
/* Hero always fills the viewport */
.wf-hero {
display: flex;
flex-direction: column;
min-height: 100vh;
min-height: 100svh;
height: 100vh;
height: 100svh;
box-sizing: border-box;
}
.wf-hero__topbar,
.wf-hero__nav {
flex-shrink: 0;
}
.wf-hero__body {
flex: 1 1 auto;
min-height: 0;
height: auto;
}
@media (max-width: 768px) {
.wf-hero__bg-image {
background-image: url("/input/mobilebg.jpg");
background-size: cover;
background-position: top center;
background-repeat: no-repeat;
}
.wf-hero__overlay {
background: transparent;
}
.wf-hero__deco-drops,
.wf-hero__bottom-wave {
display: none;
}
.wf-hero__topbar,
.wf-hero__nav {
flex-shrink: 0;
}
.wf-hero__body {
min-height: 0;
flex-direction: column;
align-items: center;
justify-content: flex-end;
}
.wf-hero__content {
padding: 24px 24px 48px;
max-width: 100%;
width: 100%;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
.wf-hero__subtext {
margin-left: auto;
margin-right: auto;
}
.wf-hero__ctas {
justify-content: center;
}
}
@media (max-width: 768px) and (max-height: 979px) {
.wf-hero__bg-image {
background-image: url("/input/tablet.jpg");
background-size: cover;
background-position: top center;
background-repeat: no-repeat;
}
}
.wf-hero.is-menu-open,
.wf-assembled-hero-shell:has(.wf-hero.is-menu-open) {
position: relative;
z-index: 100000;
}
.wf-hero__drawer {
z-index: 100000 !important;
}
.wf-hero.is-menu-open .wf-hero__nav,
.wf-hero.is-menu-open .wf-hero__burger {
z-index: 100002;
}
/* === Mobile hamburger menu (<700px) === */
.wf-hero__burger {
display: none;
appearance: none;
border: 0;
background: transparent;
padding: 10px;
margin: 0;
cursor: pointer;
width: 48px;
height: 48px;
position: relative;
z-index: 10002;
flex-shrink: 0;
border-radius: 8px;
transition: background-color 0.25s ease;
}
.wf-hero__burger:hover,
.wf-hero__burger:focus-visible {
background-color: rgba(13, 31, 60, 0.06);
outline: none;
}
.wf-hero__burger-line {
display: block;
position: absolute;
left: 12px;
right: 12px;
height: 2px;
background: #0d1f3c;
border-radius: 2px;
transition:
transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
opacity 0.25s ease,
top 0.35s cubic-bezier(0.22, 1, 0.36, 1),
background-color 0.25s ease;
}
.wf-hero__burger-line:nth-child(1) { top: 16px; }
.wf-hero__burger-line:nth-child(2) { top: 23px; }
.wf-hero__burger-line:nth-child(3) { top: 30px; }
.wf-hero.is-menu-open .wf-hero__burger-line {
background: #0d1f3c;
}
.wf-hero.is-menu-open .wf-hero__burger-line:nth-child(1) {
top: 23px;
transform: rotate(45deg);
}
.wf-hero.is-menu-open .wf-hero__burger-line:nth-child(2) {
opacity: 0;
transform: scaleX(0);
}
.wf-hero.is-menu-open .wf-hero__burger-line:nth-child(3) {
top: 23px;
transform: rotate(-45deg);
}
.wf-hero__drawer {
display: none;
}
@media (max-width: 700px) {
.wf-hero__nav {
position: relative;
z-index: 10001;
}
.wf-hero__nav-inner {
position: relative;
z-index: 10002;
}
.wf-hero__burger {
display: inline-flex;
align-items: center;
justify-content: center;
}
.wf-hero__navlinks {
display: none !important;
}
.wf-hero__drawer {
display: block;
position: fixed;
inset: 0;
z-index: 10000;
pointer-events: none;
}
.wf-hero__drawer-backdrop {
position: absolute;
inset: 0;
background: rgba(9, 20, 40, 0.45);
opacity: 0;
transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.wf-hero__drawer-close {
appearance: none;
border: 0;
background: rgba(13, 31, 60, 0.06);
width: 44px;
height: 44px;
border-radius: 10px;
position: absolute;
top: calc(18px + env(safe-area-inset-top, 0px));
right: 18px;
cursor: pointer;
z-index: 2;
transition: background-color 0.2s ease, transform 0.2s ease;
}
.wf-hero__drawer-close:hover,
.wf-hero__drawer-close:focus-visible {
background: rgba(200, 16, 46, 0.1);
outline: none;
transform: scale(1.04);
}
.wf-hero__drawer-close span {
position: absolute;
left: 12px;
right: 12px;
top: 50%;
height: 2px;
background: #0d1f3c;
border-radius: 2px;
}
.wf-hero__drawer-close span:first-child {
transform: rotate(45deg);
}
.wf-hero__drawer-close span:last-child {
transform: rotate(-45deg);
}
.wf-hero__drawer-panel {
position: absolute;
}
.wf-hero__drawer-panel {
position: absolute;
top: 0;
right: 0;
width: min(100%, 360px);
height: 100%;
background: #ffffff;
box-shadow: -12px 0 40px rgba(13, 31, 60, 0.18);
padding: calc(80px + env(safe-area-inset-top, 0px)) 28px 40px;
display: flex;
flex-direction: column;
gap: 6px;
transform: translateX(104%);
transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.wf-hero__drawer-link {
display: block;
text-decoration: none;
color: #0d1f3c;
font-family: 'Arial', 'Helvetica Neue', Helvetica, sans-serif;
font-size: 22px;
font-weight: 800;
letter-spacing: 0.02em;
text-transform: uppercase;
padding: 14px 8px;
border-radius: 8px;
opacity: 0;
transform: translateX(18px);
transition:
opacity 0.35s ease,
transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
color 0.2s ease,
background-color 0.2s ease;
}
.wf-hero__drawer-link:nth-child(1) { transition-delay: 0ms; }
.wf-hero__drawer-link:nth-child(2) { transition-delay: 40ms; }
.wf-hero__drawer-link:nth-child(3) { transition-delay: 80ms; }
.wf-hero__drawer-link:nth-child(4) { transition-delay: 120ms; }
.wf-hero__drawer-link:nth-child(5) { transition-delay: 160ms; }
.wf-hero__drawer-link:nth-child(6) { transition-delay: 200ms; }
.wf-hero__drawer-link:hover,
.wf-hero__drawer-link:focus-visible {
color: #c8102e;
background: rgba(200, 16, 46, 0.06);
outline: none;
}
.wf-hero__drawer-link--active {
color: #c8102e;
}
.wf-hero__drawer-link--cta {
margin-top: 18px;
text-align: center;
background: #0d1f3c;
color: #fff !important;
padding: 16px 18px;
border-radius: 8px;
}
.wf-hero__drawer-link--cta:hover,
.wf-hero__drawer-link--cta:focus-visible {
background: #1a3560;
color: #fff !important;
}
.wf-hero__drawer.is-menu-open {
pointer-events: auto;
}
.wf-hero__drawer.is-menu-open .wf-hero__drawer-backdrop {
opacity: 1;
}
.wf-hero__drawer.is-menu-open .wf-hero__drawer-panel {
transform: translateX(0);
}
.wf-hero__drawer.is-menu-open .wf-hero__drawer-link {
opacity: 1;
transform: translateX(0);
}
html.wf-menu-lock,
html.wf-menu-lock body {
overflow: hidden;
touch-action: none;
}
}
@media (prefers-reduced-motion: reduce) {
.wf-hero__burger-line,
.wf-hero__drawer-backdrop,
.wf-hero__drawer-panel,
.wf-hero__drawer-link {
transition-duration: 0.01ms !important;
}
}
/* === assembled preview layer (hero bg, sections, rhythm, responsive non-hero) === */
/* ========== Assembled preview: coordinated rest-of-site (variant CSS owns section backgrounds) ========== */
.site-preview-root {
min-height: auto;
background: #fff;
}
.wf-assembled-hero-shell {
display: block;
width: 100%;
margin: 0;
padding: 0;
}
.site-section-wf {
width: 100%;
box-sizing: border-box;
margin: 0;
padding: 0;
border-top: none;
background: transparent;
color: inherit;
}
@media (max-width: 900px) {
.site-section-wf--coordinated[data-wf-section]:not([data-wf-section="hero"]) {
padding-left: max(0rem, env(safe-area-inset-left, 0px));
padding-right: max(0rem, env(safe-area-inset-right, 0px));
}
.site-section-wf--coordinated[data-wf-section]:not([data-wf-section="hero"]) img,
.site-section-wf--coordinated[data-wf-section]:not([data-wf-section="hero"]) video,
.site-section-wf--coordinated[data-wf-section]:not([data-wf-section="hero"]) svg {
max-width: 100%;
height: auto;
}
.site-section-wf--coordinated[data-wf-section]:not([data-wf-section="hero"]) table {
display: block;
width: 100% !important;
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
}
@media (max-width: 768px) {
.site-section-wf--coordinated[data-wf-section]:not([data-wf-section="hero"]) {
min-width: 0;
}
.site-section-wf--coordinated[data-wf-section]:not([data-wf-section="hero"]) [style*="display:grid"],
.site-section-wf--coordinated[data-wf-section]:not([data-wf-section="hero"]) [style*="display: grid"] {
grid-template-columns: 1fr !important;
}
.site-section-wf--coordinated[data-wf-section]:not([data-wf-section="hero"]) [style*="flex-direction:row"],
.site-section-wf--coordinated[data-wf-section]:not([data-wf-section="hero"]) [style*="flex-direction: row"] {
flex-direction: column !important;
}
}
@media (max-width: 480px) {
.site-section-wf--coordinated[data-wf-section]:not([data-wf-section="hero"]) button,
.site-section-wf--coordinated[data-wf-section]:not([data-wf-section="hero"]) .button,
.site-section-wf--coordinated[data-wf-section]:not([data-wf-section="hero"]) a[class*="btn"],
.site-section-wf--coordinated[data-wf-section]:not([data-wf-section="hero"]) a[class*="cta"] {
max-width: 100%;
box-sizing: border-box;
word-break: break-word;
}
}
/* === about_v1.css === */
.about-section-v1 {
background: #FFFFFF;
padding: 64px 0;
position: relative;
overflow: hidden;
}
.about-section-v1::before {
content: '';
position: absolute;
top: 20%;
right: -10%;
width: 200px;
height: 200px;
background: radial-gradient(circle, rgba(168,200,232,0.2) 0%, transparent 70%);
border-radius: 50%;
}
.about-section-v1::after {
content: '';
position: absolute;
bottom: 10%;
left: -5%;
width: 150px;
height: 150px;
background: linear-gradient(45deg, rgba(168,200,232,0.15) 0%, transparent 50%);
border-radius: 50%;
}
.about-container {
max-width: 1280px;
margin: 0 auto;
padding: 0 32px;
}
.about-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 64px;
align-items: center;
}
.about-heading {
font-family: 'Bebas Neue', 'Anton', 'Impact', sans-serif;
font-size: 48px;
font-weight: 800;
line-height: 1.05;
color: #0D2B5E;
text-transform: uppercase;
letter-spacing: 0.02em;
margin: 0 0 8px 0;
}
.about-subtext {
font-family: 'Montserrat', 'Nunito Sans', Arial, sans-serif;
font-size: 17px;
font-weight: 600;
color: #C0202A;
margin: 0 0 24px 0;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.about-text p {
font-family: 'Montserrat', 'Nunito Sans', Arial, sans-serif;
font-size: 16px;
line-height: 1.65;
color: #2C2C2C;
margin: 0 0 16px 0;
}
.about-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
margin-top: 32px;
}
.stat-item {
text-align: center;
}
.stat-number {
display: block;
font-family: 'Bebas Neue', 'Anton', 'Impact', sans-serif;
font-size: 32px;
font-weight: 800;
color: #0D2B5E;
line-height: 1;
}
.stat-label {
display: block;
font-family: 'Montserrat', 'Nunito Sans', Arial, sans-serif;
font-size: 12px;
font-weight: 600;
color: #555555;
text-transform: uppercase;
letter-spacing: 0.05em;
margin-top: 4px;
}
.about-image {
position: relative;
}
.about-image img {
width: 100%;
height: 400px;
object-fit: cover;
border-radius: 6px;
box-shadow: 0 4px 24px rgba(13,43,94,0.12);
}
@media (max-width: 1024px) {
.about-content {
grid-template-columns: 1fr;
gap: 48px;
}
.about-stats {
grid-template-columns: repeat(2, 1fr);
}
.about-heading {
font-size: 36px;
}
}
/* === services_v1.css === */
.services-section-v1 {
background: #EAF2F8;
padding: 64px 0;
position: relative;
}
.services-section-v1::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: radial-gradient(circle at 20% 50%, rgba(168,200,232,0.1) 0%, transparent 20%), radial-gradient(circle at 80% 20%, rgba(168,200,232,0.08) 0%, transparent 25%);
}
.services-container {
max-width: 1280px;
margin: 0 auto;
padding: 0 32px;
position: relative;
z-index: 1;
}
.services-header {
text-align: center;
margin-bottom: 48px;
}
.services-heading {
font-family: 'Bebas Neue', 'Anton', 'Impact', sans-serif;
font-size: 48px;
font-weight: 800;
line-height: 1.05;
color: #0D2B5E;
text-transform: uppercase;
letter-spacing: 0.02em;
margin: 0 0 16px 0;
}
.services-intro {
font-family: 'Montserrat', 'Nunito Sans', Arial, sans-serif;
font-size: 17px;
line-height: 1.65;
color: #2C2C2C;
max-width: 680px;
margin: 0 auto;
}
.services-bands {
display: flex;
flex-direction: column;
gap: 2px;
}
.service-band {
padding: 32px 48px;
transition: transform 0.2s ease;
}
.service-band:hover {
transform: translateX(8px);
}
.service-band.primary {
background: #FFFFFF;
border-left: 5px solid #C0202A;
}
.service-band.secondary {
background: rgba(168,200,232,0.15);
border-left: 5px solid #0D2B5E;
}
.service-content h3 {
font-family: 'Bebas Neue', 'Anton', 'Impact', sans-serif;
font-size: 24px;
font-weight: 800;
color: #0D2B5E;
text-transform: uppercase;
margin: 0 0 12px 0;
letter-spacing: 0.02em;
}
.service-content p {
font-family: 'Montserrat', 'Nunito Sans', Arial, sans-serif;
font-size: 16px;
line-height: 1.65;
color: #2C2C2C;
margin: 0;
}
@media (max-width: 1024px) {
.service-band {
padding: 24px 32px;
}
.services-heading {
font-size: 36px;
}
}
/* === gallery_v3.css === */
.gallery-section-v3 {
background: #FFFFFF;
padding: 64px 0;
position: relative;
}
.gallery-container {
max-width: 1280px;
margin: 0 auto;
padding: 0 32px;
}
.gallery-header {
text-align: center;
margin-bottom: 48px;
}
.gallery-heading {
font-family: 'Bebas Neue', 'Anton', 'Impact', sans-serif;
font-size: 48px;
font-weight: 800;
line-height: 1.05;
color: #0D2B5E;
text-transform: uppercase;
letter-spacing: 0.02em;
margin: 0 0 16px 0;
}
.gallery-intro {
font-family: 'Montserrat', 'Nunito Sans', Arial, sans-serif;
font-size: 17px;
line-height: 1.65;
color: #2C2C2C;
max-width: 680px;
margin: 0 auto;
}
.gallery-carousel {
overflow: hidden;
border-radius: 10px;
background: #EAF2F8;
padding: 24px;
}
.carousel-track {
display: flex;
gap: 24px;
animation: scroll 20s linear infinite;
}
@keyframes scroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
.carousel-slide {
flex: 0 0 300px;
background: #FFFFFF;
border-radius: 6px;
overflow: hidden;
box-shadow: 0 4px 16px rgba(13,43,94,0.08);
transition: transform 0.3s ease;
}
.carousel-slide:hover {
transform: translateY(-4px);
}
.slide-image {
height: 200px;
overflow: hidden;
}
.slide-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.carousel-slide:hover .slide-image img {
transform: scale(1.05);
}
.slide-content {
padding: 20px;
}
.slide-content h3 {
font-family: 'Bebas Neue', 'Anton', 'Impact', sans-serif;
font-size: 20px;
font-weight: 800;
color: #0D2B5E;
text-transform: uppercase;
margin: 0 0 8px 0;
letter-spacing: 0.02em;
}
.slide-content p {
font-family: 'Montserrat', 'Nunito Sans', Arial, sans-serif;
font-size: 14px;
line-height: 1.5;
color: #555555;
margin: 0;
}
@media (max-width: 1024px) {
.carousel-slide {
flex: 0 0 280px;
}
.gallery-heading {
font-size: 36px;
}
}
@media (max-width: 640px) {
.carousel-slide {
flex: 0 0 260px;
}
.slide-image {
height: 160px;
}
}
/* === cta_v1.css === */
.cta-section-v1 {
background: #0D2B5E;
padding: 64px 0;
position: relative;
overflow: hidden;
}
.cta-section-v1::before {
content: '';
position: absolute;
bottom: -50px;
right: -100px;
width: 300px;
height: 200px;
background: #C0202A;
border-radius: 50%;
opacity: 0.1;
transform: rotate(-15deg);
}
.cta-section-v1::after {
content: '';
position: absolute;
top: -30px;
left: -80px;
width: 200px;
height: 150px;
background: rgba(168,200,232,0.15);
border-radius: 50%;
transform: rotate(25deg);
}
.cta-container {
max-width: 1280px;
margin: 0 auto;
padding: 0 32px;
position: relative;
z-index: 1;
}
.cta-content {
text-align: center;
max-width: 800px;
margin: 0 auto;
}
.cta-heading {
font-family: 'Bebas Neue', 'Anton', 'Impact', sans-serif;
font-size: 52px;
font-weight: 800;
line-height: 1.05;
color: #FFFFFF;
text-transform: uppercase;
letter-spacing: 0.02em;
margin: 0 0 24px 0;
}
.cta-text {
font-family: 'Montserrat', 'Nunito Sans', Arial, sans-serif;
font-size: 18px;
line-height: 1.65;
color: rgba(255,255,255,0.9);
margin: 0 0 40px 0;
}
.cta-actions {
display: flex;
gap: 16px;
justify-content: center;
margin-bottom: 48px;
}
.cta-button {
font-family: 'Montserrat', 'Nunito Sans', Arial, sans-serif;
font-size: 13px;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
text-decoration: none;
padding: 16px 28px;
border-radius: 4px;
transition: all 0.3s ease;
display: inline-block;
}
.cta-button.primary {
background: #C0202A;
color: #FFFFFF;
box-shadow: 0 4px 16px rgba(192,32,42,0.35);
}
.cta-button.primary:hover {
background: #A01820;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(192,32,42,0.45);
}
.cta-button.secondary {
background: rgba(255,255,255,0.1);
color: #FFFFFF;
border: 2px solid rgba(255,255,255,0.3);
}
.cta-button.secondary:hover {
background: rgba(255,255,255,0.2);
border-color: rgba(255,255,255,0.5);
transform: translateY(-2px);
}
.trust-indicators {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
.trust-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
.trust-icon {
font-size: 20px;
color: #C0202A;
font-weight: 800;
}
.trust-text {
font-family: 'Montserrat', 'Nunito Sans', Arial, sans-serif;
font-size: 13px;
font-weight: 600;
color: rgba(255,255,255,0.8);
text-align: center;
text-transform: uppercase;
letter-spacing: 0.03em;
}
@media (max-width: 1024px) {
.trust-indicators {
grid-template-columns: repeat(2, 1fr);
}
.cta-heading {
font-size: 40px;
}
}
@media (max-width: 640px) {
.cta-actions {
flex-direction: column;
align-items: center;
}
.trust-indicators {
grid-template-columns: 1fr;
}
}
/* === footer_v2.css === */
.footer-section-v2 {
background: #091E45;
padding: 48px 0 24px 0;
position: relative;
}
.footer-section-v2::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 2px;
background: linear-gradient(90deg, #C0202A 0%, #A8C8E8 50%, #C0202A 100%);
}
.footer-container {
max-width: 1280px;
margin: 0 auto;
padding: 0 32px;
}
.footer-main {
display: grid;
grid-template-columns: 2fr 1.5fr 1fr;
gap: 40px;
margin-bottom: 32px;
}
.brand-section {
max-width: 400px;
}
.footer-brand {
font-family: 'Bebas Neue', 'Anton', 'Impact', sans-serif;
font-size: 28px;
font-weight: 800;
color: #FFFFFF;
text-transform: uppercase;
letter-spacing: 0.02em;
margin: 0 0 12px 0;
}
.brand-tagline {
font-family: 'Montserrat', 'Nunito Sans', Arial, sans-serif;
font-size: 14px;
line-height: 1.6;
color: rgba(255,255,255,0.8);
margin: 0;
}
.contact-title {
font-family: 'Bebas Neue', 'Anton', 'Impact', sans-serif;
font-size: 18px;
font-weight: 800;
color: #FFFFFF;
text-transform: uppercase;
margin: 0 0 16px 0;
}
.contact-methods {
display: flex;
flex-direction: column;
gap: 12px;
margin-bottom: 16px;
}
.contact-method {
display: flex;
flex-direction: column;
text-decoration: none;
padding: 8px;
background: rgba(255,255,255,0.05);
border-radius: 4px;
transition: background 0.3s ease;
}
.contact-method:hover {
background: rgba(255,255,255,0.1);
}
.method-label {
font-family: 'Montserrat', 'Nunito Sans', Arial, sans-serif;
font-size: 11px;
font-weight: 600;
color: rgba(255,255,255,0.6);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.method-value {
font-family: 'Montserrat', 'Nunito Sans', Arial, sans-serif;
font-size: 14px;
font-weight: 700;
color: #FFFFFF;
}
.service-area {
font-family: 'Montserrat', 'Nunito Sans', Arial, sans-serif;
font-size: 13px;
font-weight: 600;
color: #A8C8E8;
margin: 0;
}
.footer-nav {
display: flex;
gap: 24px;
}
.nav-column {
display: flex;
flex-direction: column;
gap: 8px;
}
.nav-title {
font-family: 'Bebas Neue', 'Anton', 'Impact', sans-serif;
font-size: 16px;
font-weight: 800;
color: #FFFFFF;
text-transform: uppercase;
margin: 0 0 8px 0;
}
.nav-link {
font-family: 'Montserrat', 'Nunito Sans', Arial, sans-serif;
font-size: 13px;
font-weight: 500;
color: rgba(255,255,255,0.8);
text-decoration: none;
transition: color 0.3s ease;
}
.nav-link:hover {
color: #C0202A;
}
.footer-legal {
border-top: 1px solid rgba(255,255,255,0.1);
padding-top: 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
.copyright {
font-family: 'Montserrat', 'Nunito Sans', Arial, sans-serif;
font-size: 12px;
color: rgba(255,255,255,0.7);
margin: 0;
}
.company-motto {
font-family: 'Bebas Neue', 'Anton', 'Impact', sans-serif;
font-size: 13px;
font-weight: 800;
color: #C0202A;
text-transform: uppercase;
letter-spacing: 0.05em;
margin: 0;
}
@media (max-width: 1024px) {
.footer-main {
grid-template-columns: 1fr 1fr;
gap: 32px;
}
.footer-nav {
grid-column: 1 / -1;
justify-content: space-around;
}
}
@media (max-width: 640px) {
.footer-main {
grid-template-columns: 1fr;
gap: 24px;
}
.footer-legal {
flex-direction: column;
gap: 8px;
text-align: center;
}
}
/* Logo image (nav + footer) */
.wf-hero__logo {
display: inline-flex;
align-items: center;
line-height: 0;
}
.wf-hero__logo-img {
display: block;
height: 64px;
width: auto;
max-width: min(220px, 48vw);
object-fit: contain;
}
.footer-brand {
display: inline-block;
line-height: 0;
text-decoration: none;
}
.footer-brand__img {
display: block;
height: 72px;
width: auto;
max-width: 220px;
object-fit: contain;
}
@media (max-width: 768px) {
.wf-hero__logo-img {
height: 52px;
}
.footer-brand__img {
height: 60px;
}
}