/* ════════════════════════════════════════════════════════════
ON TIME MANPOWER SOLUTIONS — Design System
Refactored CSS | Single source of truth via :root tokens
════════════════════════════════════════════════════════════ */
/* ──────────────────────────────────────────────────────────
1. DESIGN TOKENS
────────────────────────────────────────────────────────── */
:root {
/* Brand colours */
--c-primary: #C8102E;
--c-primary-dark: #9A0B21;
--c-primary-light: #E8314F;
--c-primary-100: #FFF1F3;
--c-primary-200: #FFD9DF;
--c-primary-300: #FFBCC7;
--c-primary-400: #FF95A6;
--c-primary-500: #E8314F;
/* Neutrals */
--c-bg: #F3F6FC;
--c-surface: #FFFFFF;
--c-text: #0D0D0D;
--c-text-muted: #2E314D;
--c-muted: #6B7194;
--c-white: #FFFFFF;
/* Dividers */
--c-divider: rgba(1, 5, 53, 0.10);
--c-divider-d: rgba(255, 255, 255, 0.12);
/* Typography */
--font: "DM Sans", sans-serif;
--fw-normal: 400;
--fw-medium: 500;
--fw-semibold: 600;
--fw-bold: 700;
--fw-extrabold: 800;
/* Type scale */
--text-xs: 12px;
--text-sm: 13px;
--text-base: 14.5px;
--text-md: 15px;
--text-lg: 17px;
--text-xl: 20px;
--text-2xl: clamp(20px, 2.2vw, 28px);
/* Heading scale — use via .section-title */
--heading-display: clamp(28px, 3.5vw, 48px);
--heading-lg: clamp(26px, 3vw, 40px);
--heading-md: clamp(22px, 2.5vw, 32px);
--heading-sm: 20px;
/* Spacing */
--sp-xs: 8px;
--sp-sm: 12px;
--sp-md: 20px;
--sp-lg: 32px;
--sp-xl: 48px;
--sp-2xl: 72px;
--section-pad: 96px;
/* ← single value for all section-pad */
/* Border radius */
--radius-xs: 6px;
--radius-sm: 8px;
--radius-md: 14px;
--radius-lg: 20px;
--radius-xl: 28px;
--radius-full: 999px;
/* Shadows */
--shadow-xs: 0 2px 8px rgba(0, 0, 0, 0.05);
--shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.06);
--shadow-md: 0 12px 32px rgba(0, 0, 0, 0.08);
--shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.11);
--shadow-primary: 0 6px 22px rgba(200, 16, 46, 0.28);
/* Transitions */
--t-fast: 150ms ease;
--t-base: 220ms ease;
--t-slow: 350ms ease;
--t-spring: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
--c-dark-bg: #2E080D;
--c-dark-surface: #0D1440;
--c-dark-border: rgba(255,255,255,0.07);
--c-dark-border-hover: rgba(200,16,46,0.45);
}
/* ──────────────────────────────────────────────────────────
2. RESET & BASE
────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
}
body {
font-family: var(--font);
font-size: var(--text-base);
line-height: 1.65;
background: var(--c-bg);
color: var(--c-text);
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
}
img {
display: block;
max-width: 100%;
}
a {
color: inherit;
}
ul,
ol {
list-style: none;
padding: 0;
margin: 0;
}
button {
font-family: var(--font);
}
/* ──────────────────────────────────────────────────────────
3. LAYOUT UTILITIES
────────────────────────────────────────────────────────── */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
}
.custom-container {
max-width: 1300px;
margin: 0 auto;
padding: 0 24px;
}
/* Universal section spacing */
.section-pad {
padding: var(--section-pad) 0;
}
/* ──────────────────────────────────────────────────────────
4. TYPOGRAPHY — heading system
────────────────────────────────────────────────────────── */
/* Eyebrow label */
.section-eyebrow {
display: inline-flex;
align-items: center;
gap: var(--sp-xs);
border: 1px solid var(--c-divider);
border-radius: var(--radius-full);
padding: 6px 16px 6px 10px;
font-size: var(--text-sm);
font-weight: var(--fw-semibold);
color: var(--c-text);
background: var(--c-surface);
width: fit-content;
letter-spacing: 0.01em;
}
.section-eyebrow .eyebrow-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--c-primary);
flex-shrink: 0;
}
.section-eyebrow.light {
background: rgba(255, 255, 255, 0.10);
border-color: var(--c-divider-d);
color: rgba(255, 255, 255, 0.88);
}
.section-eyebrow.light .eyebrow-dot {
background: rgba(255, 255, 255, 0.7);
}
/* ── Master heading class ── */
/*
Usage:
…
— dark on light bg
…
— white on dark bg
size modifier via --title-size custom prop or modifier classes below
*/
.section-title {
font-family: var(--font);
font-size: var(--heading-display);
font-weight: var(--fw-bold);
line-height: 1.15;
letter-spacing: -0.025em;
color: var(--c-text);
margin: 0;
}
.section-title.--light {
color: var(--c-white);
}
.section-title.--primary {
color: var(--c-primary);
}
.section-title.--md {
font-size: var(--heading-lg);
}
.section-title.--sm {
font-size: var(--heading-md);
}
.section-title.--xs {
font-size: var(--heading-sm);
}
/* Highlight span inside a heading */
.section-title .highlight,
.about-heading .highlight {
background: var(--c-primary);
color: var(--c-white);
padding: 2px 10px;
border-radius: var(--radius-xs);
}
/* Legacy aliases — map old class names to token values */
.section-heading {
font-size: var(--heading-display);
font-weight: var(--fw-bold);
line-height: 1.18;
letter-spacing: -0.022em;
margin: 0;
}
.section-heading.dark {
color: var(--c-text);
}
.section-heading.light {
color: var(--c-white);
}
.about-heading {
font-size: var(--heading-display);
font-weight: var(--fw-bold);
line-height: 1.18;
letter-spacing: -0.022em;
color: var(--c-text);
}
.team-heading {
font-size: var(--heading-lg);
font-weight: var(--fw-bold);
line-height: 1.22;
color: var(--c-text);
margin-top: var(--sp-sm);
}
.approach-heading {
font-size: var(--heading-display);
font-weight: var(--fw-bold);
line-height: 1.22;
color: var(--c-text);
}
.cta-heading {
font-size: clamp(22px, 2.8vw, 40px);
font-weight: var(--fw-bold);
line-height: 1.2;
color: var(--c-white);
}
/* Supporting text */
.section-sub {
font-size: var(--text-md);
line-height: 1.78;
color: var(--c-muted);
max-width: 600px;
}
/* Centred section header block */
.section-header-center {
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--sp-md);
margin-bottom: 56px;
}
.section-header-center .section-sub {
margin: 0 auto;
}
/* ──────────────────────────────────────────────────────────
5. BUTTONS — two variants only
────────────────────────────────────────────────────────── */
/* Shared base */
.btn-primary,
.btn-secondary {
display: inline-flex;
align-items: center;
gap: var(--sp-xs);
font-family: var(--font);
font-size: var(--text-md);
font-weight: var(--fw-semibold);
padding: 13px 26px;
border-radius: var(--radius-full);
text-decoration: none;
border: none;
cursor: pointer;
transition: background var(--t-base), transform var(--t-fast), box-shadow var(--t-base), color var(--t-base);
width: fit-content;
line-height: 1;
}
/* Primary — solid red */
.btn-primary {
background: var(--c-primary);
color: var(--c-white);
box-shadow: var(--shadow-primary);
}
.btn-primary:hover {
background: var(--c-primary-dark);
transform: translateY(-2px);
box-shadow: 0 8px 28px rgba(200, 16, 46, 0.38);
color: var(--c-white);
}
.btn-primary:active {
transform: translateY(0);
}
/* Secondary — ghost / outline */
.btn-secondary {
background: transparent;
color: var(--c-white);
border: 1.5px solid rgba(255, 255, 255, 0.40);
}
.btn-secondary:hover {
background: rgba(255, 255, 255, 0.10);
border-color: rgba(255, 255, 255, 0.80);
color: var(--c-white);
}
/* Secondary on light background */
.btn-secondary.--dark {
color: var(--c-text);
border-color: var(--c-divider);
}
.btn-secondary.--dark:hover {
background: var(--c-bg);
border-color: rgba(200, 16, 46, 0.35);
color: var(--c-primary);
}
/* Arrow badge inside button */
.btn-arrow,
.arrow {
width: 26px;
height: 26px;
background: rgba(255, 255, 255, 0.20);
border-radius: 50%;
display: grid;
place-items: center;
flex-shrink: 0;
transition: background var(--t-base);
}
/* Legacy button aliases — point to .btn-primary / .btn-secondary internals */
.btn-primary-red {
display: inline-flex;
align-items: center;
gap: var(--sp-xs);
background: var(--c-primary);
color: var(--c-white);
font-size: var(--text-md);
font-weight: var(--fw-semibold);
padding: 13px 26px;
border-radius: var(--radius-full);
text-decoration: none;
border: none;
cursor: pointer;
box-shadow: var(--shadow-primary);
transition: background var(--t-base), transform var(--t-fast);
width: fit-content;
}
.btn-primary-red:hover {
background: var(--c-primary-dark);
transform: translateY(-2px);
color: var(--c-white);
}
.btn-primary-red .btn-arrow {
width: 26px;
height: 26px;
background: rgba(255, 255, 255, 0.20);
border-radius: 50%;
display: grid;
place-items: center;
}
/* Hero CTA */
.btn-hero-primary {
display: inline-flex;
align-items: center;
gap: 10px;
background: var(--c-primary);
color: var(--c-white);
font-size: var(--text-base);
font-weight: var(--fw-semibold);
padding: 13px 24px;
border-radius: var(--radius-full);
text-decoration: none;
border: none;
cursor: pointer;
transition: background var(--t-base), transform var(--t-fast);
}
.btn-hero-primary:hover {
background: var(--c-primary-dark);
transform: translateY(-2px);
color: var(--c-white);
}
.btn-hero-primary .arr {
width: 22px;
height: 22px;
background: rgba(255, 255, 255, 0.20);
border-radius: 50%;
display: grid;
place-items: center;
font-size: 0.75rem;
}
/* Play button */
.btn-play {
display: inline-flex;
align-items: center;
gap: 12px;
background: none;
border: none;
color: var(--c-white);
font-size: var(--text-base);
font-weight: var(--fw-medium);
cursor: pointer;
padding: 0;
}
.play-circle {
width: 42px;
height: 42px;
border-radius: 50%;
border: 1.5px solid rgba(255, 255, 255, 0.35);
display: grid;
place-items: center;
transition: border-color var(--t-base), background var(--t-base);
}
.btn-play:hover .play-circle {
border-color: var(--c-primary-400);
background: rgba(200, 16, 46, 0.20);
}
.play-circle svg {
width: 13px;
height: 13px;
fill: var(--c-white);
margin-left: 2px;
}
/* FAQ contact CTA */
.faq-cta {
display: inline-flex;
align-items: center;
background: var(--c-primary);
color: var(--c-white);
text-decoration: none;
border-radius: var(--radius-full);
font-size: var(--text-md);
font-weight: var(--fw-semibold);
overflow: hidden;
width: fit-content;
transition: background var(--t-base), transform var(--t-fast);
}
.faq-cta:hover {
background: var(--c-primary-dark);
transform: translateY(-2px);
}
.faq-cta-icon {
width: 50px;
height: 50px;
background: rgba(255, 255, 255, 0.18);
display: grid;
place-items: center;
border-radius: var(--radius-full) 0 0 var(--radius-full);
}
.faq-cta span:last-of-type {
padding: 0 24px;
}
/* CTA banner button */
.cta-btn {
display: inline-flex;
align-items: center;
gap: 12px;
background: var(--c-white);
color: var(--c-primary);
font-size: var(--text-md);
font-weight: var(--fw-semibold);
padding: 13px 26px;
border-radius: var(--radius-full);
text-decoration: none;
width: fit-content;
transition: background var(--t-base), transform var(--t-fast), color var(--t-base);
}
.cta-btn:hover {
background: var(--c-primary-dark);
color: var(--c-white);
transform: translateY(-2px);
}
.cta-btn-icon {
width: 30px;
height: 30px;
background: var(--c-primary);
border-radius: 50%;
display: grid;
place-items: center;
color: var(--c-white);
transition: background var(--t-base), color var(--t-base);
}
.cta-btn:hover .cta-btn-icon {
background: var(--c-white);
color: var(--c-primary);
}
/* ──────────────────────────────────────────────────────────
6. SHARED COMPONENTS
────────────────────────────────────────────────────────── */
/* Icon box */
.icon-box {
width: 46px;
height: 46px;
background: var(--c-primary);
border-radius: var(--radius-sm);
display: grid;
place-items: center;
flex-shrink: 0;
}
.icon-box svg {
width: 22px;
height: 22px;
stroke: var(--c-white);
fill: none;
}
.icon-box.sm {
width: 34px;
height: 34px;
}
.icon-box.sm svg {
width: 16px;
height: 16px;
}
/* Check item */
.check-item {
display: flex;
align-items: center;
gap: 10px;
font-size: var(--text-base);
font-weight: var(--fw-medium);
color: var(--c-text);
}
.check-icon {
width: 22px;
height: 22px;
background: var(--c-primary);
border-radius: 50%;
display: grid;
place-items: center;
flex-shrink: 0;
}
.check-icon svg {
width: 11px;
height: 11px;
stroke: var(--c-white);
fill: none;
}
/* Card variants */
.card-light {
background: var(--c-surface);
border: 1px solid var(--c-divider);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
}
.glass-dark {
background: rgba(255, 255, 255, 0.07);
border: 1px solid var(--c-divider-d);
border-radius: var(--radius-lg);
backdrop-filter: blur(14px);
}
/* CEO chip */
.ceo-chip {
display: flex;
align-items: center;
gap: 12px;
}
.ceo-avatar {
width: 46px;
height: 46px;
border-radius: 50%;
object-fit: cover;
border: 2px solid var(--c-primary);
}
.ceo-name {
font-size: var(--text-base);
font-weight: var(--fw-bold);
color: var(--c-text);
}
.ceo-title {
font-size: var(--text-xs);
color: var(--c-muted);
margin-top: 2px;
}
/* Stat pill */
.stat-pill {
display: inline-flex;
align-items: center;
gap: 12px;
background: rgba(255, 255, 255, 0.07);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: var(--radius-md);
padding: 10px 18px;
backdrop-filter: blur(8px);
}
.stat-pill .stat-text strong {
display: block;
font-size: 0.88rem;
font-weight: var(--fw-semibold);
}
.stat-pill .stat-text span {
font-size: 0.74rem;
color: rgba(255, 255, 255, 0.50);
}
/* Client avatars */
.client-avatars {
display: flex;
align-items: center;
}
.client-avatars span {
width: 30px;
height: 30px;
border-radius: 50%;
border: 2px solid rgba(80, 5, 15, 0.70);
display: grid;
place-items: center;
font-size: 0.6rem;
font-weight: var(--fw-bold);
color: var(--c-white);
}
.client-avatars span:nth-child(1) {
background: #e85575;
}
.client-avatars span:nth-child(2) {
background: var(--c-primary);
margin-left: -9px;
}
.client-avatars span:nth-child(3) {
background: var(--c-primary-dark);
margin-left: -9px;
}
.client-text strong {
display: block;
font-size: 0.80rem;
font-weight: var(--fw-semibold);
}
.client-text span {
font-size: 0.72rem;
color: rgba(255, 255, 255, 0.50);
}
/* Pulse dot */
.pulse-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--c-primary);
flex-shrink: 0;
animation: pulseDot 1.4s ease-in-out infinite;
}
@keyframes pulseDot {
0%,
100% {
box-shadow: 0 0 0 0 rgba(200, 16, 46, 0.70);
}
50% {
box-shadow: 0 0 0 5px rgba(200, 16, 46, 0);
}
}
/* ──────────────────────────────────────────────────────────
7. NAVBAR
────────────────────────────────────────────────────────── */
.navbar {
position: fixed;
top: 10px;
left: 0;
right: 0;
z-index: 1000;
padding: 0;
transition: background var(--t-slow), box-shadow var(--t-slow), transform var(--t-slow), top var(--t-slow);
}
.navbar.at-top {
background: transparent;
box-shadow: none;
}
.navbar.scrolled {
top: 0;
background: #000;
}
.navbar.hidden {
transform: translateY(-200%);
}
.nav-inner {
height: 70px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
padding: 0 24px;
max-width: 1200px;
margin: 0 auto;
}
.nav-logo {
display: flex;
align-items: center;
}
.nav-logo img {
width: 180px;
}
.nav-links {
display: flex;
align-items: center;
gap: 2px;
list-style: none;
flex: 1;
justify-content: center;
background: rgba(255, 255, 255, 0.16);
backdrop-filter: blur(12px);
padding: 8px 16px;
border-radius: 10px;
}
.nav-links>li {
position: relative;
}
.nav-links>li>a,
.nav-links>li>button {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 8px 13px;
font-size: var(--text-base);
font-weight: var(--fw-medium);
color: rgba(255, 255, 255, 0.88);
text-decoration: none;
background: none;
border: none;
cursor: pointer;
font-family: var(--font);
border-radius: var(--radius-sm);
transition: background var(--t-fast), color var(--t-fast);
}
.nav-links>li>a:hover,
.nav-links>li>button:hover {
background: rgba(255, 255, 255, 0.12);
color: var(--c-white);
}
.nav-links .active::after {
content: '';
position: absolute;
bottom: -6px;
left: 13px;
right: 13px;
height: 2px;
background: rgba(255, 255, 255, 0.70);
border-radius: 2px;
}
.nav-chevron {
width: 13px;
height: 13px;
transition: transform var(--t-base);
}
.nav-links>li.open>button .nav-chevron {
transform: rotate(180deg);
}
/* Dropdown */
.nav-dropdown {
position: absolute;
top: calc(100% + 10px);
left: 50%;
transform: translateX(-50%) translateY(-8px);
min-width: 220px;
background: rgba(154, 11, 33, 0.95);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: var(--radius-md);
padding: var(--sp-xs);
list-style: none;
opacity: 0;
pointer-events: none;
transition: opacity var(--t-base), transform var(--t-base);
box-shadow: 0 20px 48px rgba(154, 11, 33, 0.35);
}
.nav-links>li.open .nav-dropdown {
opacity: 1;
pointer-events: all;
transform: translateX(-50%) translateY(0);
}
.nav-dropdown a {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
font-size: var(--text-base);
color: rgba(255, 255, 255, 0.80);
text-decoration: none;
border-radius: var(--radius-sm);
transition: background var(--t-fast), color var(--t-fast);
}
.nav-dropdown a:hover {
background: rgba(232, 49, 79, 0.35);
color: var(--c-white);
}
.nav-dropdown .dd-icon {
width: 28px;
height: 28px;
background: rgba(232, 49, 79, 0.25);
border-radius: var(--radius-xs);
display: grid;
place-items: center;
flex-shrink: 0;
color: #ff8fa0;
}
.nav-dropdown .dd-icon svg {
width: 13px;
height: 13px;
}
/* Nav CTA */
.nav-cta {
display: inline-flex;
align-items: center;
gap: 10px;
background: var(--c-primary);
color: var(--c-white);
font-size: var(--text-base);
font-weight: var(--fw-semibold);
padding: 10px 22px;
border-radius: var(--radius-full);
text-decoration: none;
flex-shrink: 0;
box-shadow: var(--shadow-primary);
transition: background var(--t-base), transform var(--t-fast);
}
.nav-cta:hover {
background: var(--c-primary-dark);
transform: translateY(-2px);
color: var(--c-white);
}
.nav-cta-arrow {
width: 26px;
height: 26px;
background: rgba(255, 255, 255, 0.20);
border-radius: 50%;
display: grid;
place-items: center;
}
/* Hamburger */
.nav-hamburger {
display: none;
flex-direction: column;
gap: 5px;
background: none;
border: none;
cursor: pointer;
padding: 6px;
}
.nav-hamburger span {
display: block;
width: 22px;
height: 2px;
background: var(--c-white);
border-radius: 2px;
transition: transform var(--t-base), opacity var(--t-base);
}
.nav-hamburger.open span:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.nav-hamburger.open span:nth-child(2) {
opacity: 0;
}
.nav-hamburger.open span:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
/* Mobile nav */
.nav-mobile {
display: none;
flex-direction: column;
gap: 2px;
padding: 12px 20px 20px;
background: rgba(154, 11, 33, 0.97);
backdrop-filter: blur(20px);
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.nav-mobile.open {
display: flex;
}
.nav-mobile a,
.nav-mobile button {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 14px;
font-size: var(--text-md);
font-weight: var(--fw-medium);
color: rgba(255, 255, 255, 0.85);
text-decoration: none;
background: none;
border: none;
font-family: var(--font);
cursor: pointer;
border-radius: 10px;
width: 100%;
transition: background var(--t-fast);
}
.nav-mobile a:hover,
.nav-mobile button:hover {
background: rgba(255, 255, 255, 0.08);
color: var(--c-white);
}
.nav-mobile-sub {
padding-left: 16px;
display: none;
flex-direction: column;
gap: 2px;
}
.nav-mobile-sub.open {
display: flex;
}
.nav-mobile-sub a {
font-size: var(--text-base);
color: rgba(255, 255, 255, 0.60);
padding: 9px 14px;
}
.nav-mobile-cta {
margin-top: 10px;
background: var(--c-primary) !important;
color: var(--c-white) !important;
border-radius: var(--radius-full) !important;
justify-content: center !important;
}
@media (max-width: 900px) {
.nav-links,
.nav-cta {
display: none;
}
.nav-hamburger {
display: flex;
}
}
/* ──────────────────────────────────────────────────────────
8. BREADCRUMB
────────────────────────────────────────────────────────── */
.breadcrumb-section {
position: relative;
min-height: 400px;
display: flex;
align-items: center;
overflow: hidden;
background:
linear-gradient(90deg, rgba(206, 42, 66, 0.95) 0%, rgba(154, 11, 33, 0.85) 50%, transparent 100%),
url("../public/hero-bg-image.jpg") center/cover no-repeat;
}
.breadcrumb-section::before {
content: '';
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.20);
}
.breadcrumb-content {
position: relative;
z-index: 2;
max-width: 700px;
padding: var(--sp-xl) 0;
}
.breadcrumb-content h1 {
font-family: var(--font);
font-size: clamp(40px, 5.5vw, 72px);
font-weight: var(--fw-extrabold);
line-height: 1.08;
color: var(--c-white);
letter-spacing: -0.03em;
margin-bottom: 16px;
}
.breadcrumb-nav {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.breadcrumb-nav a,
.breadcrumb-nav span {
color: rgba(255, 255, 255, 0.80);
font-size: var(--text-md);
font-weight: var(--fw-medium);
}
.breadcrumb-nav a {
text-decoration: none;
transition: color var(--t-base);
}
.breadcrumb-nav a:hover {
color: var(--c-primary-400);
}
.breadcrumb-nav span:last-child {
color: var(--c-primary-400);
font-weight: var(--fw-bold);
}
@media (max-width: 768px) {
.breadcrumb-section {
min-height: 300px;
text-align: center;
}
.breadcrumb-nav {
justify-content: center;
}
.breadcrumb-content h1 {
font-size: 40px;
}
}
/* ──────────────────────────────────────────────────────────
9. HERO
────────────────────────────────────────────────────────── */
.hero {
position: relative;
min-height: 100vh;
padding-top: 70px;
display: flex;
flex-direction: column;
background-image: url("../public/hero.png");
background-size: cover;
background-position: center;
overflow: hidden;
}
.hero-grid {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.55);
animation: gridShift 18s linear infinite;
}
@keyframes gridShift {
to {
transform: translateY(48px);
}
}
.hero-orb {
position: absolute;
right: 16%;
top: 20%;
width: 460px;
height: 460px;
border-radius: 50%;
animation: orbPulse 5s ease-in-out infinite;
}
@keyframes orbPulse {
0%,
100% {
transform: scale(1);
opacity: 0.7;
}
50% {
transform: scale(1.1);
opacity: 1;
}
}
.hero-overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.48);
}
.hero-body {
position: relative;
z-index: 2;
flex: 1;
display: flex;
align-items: center;
}
.hero-body .container {
padding-top: 100px;
padding-bottom: 70px;
}
/* Trust badge */
.trust-badge {
display: inline-flex;
align-items: center;
gap: 10px;
background: rgba(255, 255, 255, 0.10);
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: var(--radius-full);
padding: 6px 16px 6px 6px;
backdrop-filter: blur(8px);
}
.trust-label {
font-size: 0.80rem;
font-weight: var(--fw-medium);
color: rgba(255, 255, 255, 0.80);
}
.trust-avatars {
display: flex;
align-items: center;
}
.trust-avatars span {
width: 26px;
height: 26px;
border-radius: 50%;
border: 2px solid rgba(80, 5, 15, 0.60);
display: grid;
place-items: center;
font-size: 0.6rem;
font-weight: var(--fw-bold);
color: var(--c-white);
}
.trust-avatars span:nth-child(1) {
background: #e85575;
}
.trust-avatars span:nth-child(2) {
background: var(--c-primary);
margin-left: -7px;
}
.trust-avatars span:nth-child(3) {
background: var(--c-primary-dark);
margin-left: -7px;
}
/* Hero type */
.hero-title {
font-size: clamp(2.1rem, 4.5vw, 3.5rem);
font-weight: var(--fw-bold);
line-height: 1.10;
letter-spacing: -0.025em;
color: var(--c-white);
}
.hero-title em {
font-style: normal;
color: var(--c-primary-400);
position: relative;
}
.hero-title em::after {
content: '';
position: absolute;
bottom: 2px;
left: 0;
right: 0;
height: 3px;
background: var(--c-primary-400);
border-radius: 2px;
opacity: 0.40;
}
.hero-sub {
font-size: var(--text-md);
color: rgba(255, 255, 255, 0.65);
line-height: 1.70;
}
/* Threat card */
.threat-card {
background: rgba(255, 255, 255, 0.07);
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: var(--radius-lg);
padding: 24px;
backdrop-filter: blur(16px);
animation: cardFloat 5s ease-in-out infinite;
}
@keyframes cardFloat {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-12px);
}
}
.card-icon-wrap {
width: 38px;
height: 38px;
background: var(--c-primary);
border-radius: 10px;
display: grid;
place-items: center;
}
.card-icon-wrap svg {
width: 20px;
height: 20px;
stroke: var(--c-white);
fill: none;
}
.card-title {
font-size: 0.85rem;
font-weight: var(--fw-semibold);
color: var(--c-white);
}
.card-sub {
font-size: 0.72rem;
color: rgba(255, 255, 255, 0.45);
}
/* Bars */
.bar-label {
display: flex;
justify-content: space-between;
font-size: 0.72rem;
color: rgba(255, 255, 255, 0.60);
}
.bar-track {
height: 6px;
background: rgba(255, 255, 255, 0.10);
border-radius: var(--radius-full);
overflow: hidden;
}
.bar-fill {
height: 100%;
border-radius: var(--radius-full);
animation: barGrow 1.6s ease forwards;
}
@keyframes barGrow {
from {
width: 0;
}
}
.bar-fill.high {
background: #ff4d6d;
width: 78%;
}
.bar-fill.mid {
background: #f5a623;
width: 54%;
}
.bar-fill.low {
background: #4caf50;
width: 32%;
}
/* Badge */
.card-badge {
display: flex;
align-items: center;
gap: var(--sp-xs);
background: rgba(200, 16, 46, 0.18);
border: 1px solid rgba(200, 16, 46, 0.35);
border-radius: 10px;
padding: 9px 14px;
font-size: 0.78rem;
font-weight: var(--fw-medium);
color: var(--c-primary-400);
}
/* Ticker */
.ticker-wrap {
position: relative;
z-index: 2;
background: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(10px);
border-top: 1px solid var(--c-divider-d);
padding: 18px 0;
overflow: hidden;
}
.ticker-track {
display: flex;
width: max-content;
animation: ticker 35s linear infinite;
}
@keyframes ticker {
to {
transform: translateX(-50%);
}
}
.ticker-item {
display: flex;
padding: 0 20px;
align-items: center;
font-size: 22px;
font-weight: var(--fw-medium);
gap: 12px;
letter-spacing: -0.02em;
color: var(--c-white);
text-transform: capitalize;
white-space: nowrap;
line-height: 1.25;
}
.ticker-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--c-primary-light);
flex-shrink: 0;
}
@media (max-width: 767px) {
.hero-body .container {
padding-top: 80px;
}
.ticker-item {
font-size: 16px;
}
}
/* ──────────────────────────────────────────────────────────
10. ABOUT
────────────────────────────────────────────────────────── */
.about-section {
background: var(--c-surface);
}
.about-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--sp-2xl);
align-items: center;
}
/* Image stack */
.about-images {
position: relative;
height: 520px;
}
.img-top {
position: absolute;
top: 0;
left: 0;
width: 68%;
height: 55%;
border-radius: var(--radius-lg);
object-fit: cover;
box-shadow: var(--shadow-md);
}
.img-bottom {
position: absolute;
bottom: 0;
right: 0;
width: 72%;
height: 60%;
border-radius: var(--radius-lg);
object-fit: cover;
box-shadow: var(--shadow-lg);
}
/* Dot grid */
.dot-grid {
position: absolute;
top: 8px;
right: 8px;
z-index: 0;
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 7px;
}
.dot-grid span {
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--c-primary);
opacity: 0.28;
}
/* Experience badge */
.exp-badge {
position: absolute;
bottom: 100px;
left: -20px;
background: var(--c-surface);
border-radius: var(--radius-md);
padding: 16px 22px;
display: flex;
align-items: center;
gap: 14px;
box-shadow: var(--shadow-md);
z-index: 10;
}
.exp-badge-text {
font-size: var(--text-base);
font-weight: var(--fw-bold);
color: var(--c-text);
line-height: 1.35;
}
/* Content */
.about-desc {
font-size: var(--text-md);
line-height: 1.78;
color: var(--c-muted);
}
/* Feature card inside about */
.glass-card {
display: flex;
gap: var(--sp-md);
align-items: flex-start;
border: 1px solid var(--c-divider);
padding: 22px 24px;
border-radius: 12px;
background: var(--c-bg);
}
.glass-card-img {
width: 130px;
height: 100px;
border-radius: 10px;
object-fit: cover;
flex-shrink: 0;
}
.glass-card-checks {
display: flex;
flex-direction: column;
gap: 14px;
}
@media (max-width: 900px) {
.about-grid {
grid-template-columns: 1fr;
gap: var(--sp-xl);
}
.about-images {
height: 360px;
}
}
@media (max-width: 520px) {
.about-images {
height: 280px;
}
.glass-card {
flex-direction: column;
}
.glass-card-img {
width: 100%;
height: 140px;
}
}
/* ──────────────────────────────────────────────────────────
11. SERVICES
────────────────────────────────────────────────────────── */
.services-section {
background: var(--c-bg);
}
.services-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 24px;
}
.svc-card {
position: relative;
border-radius: var(--radius-lg);
overflow: hidden;
background: var(--c-surface);
cursor: pointer;
/* transition: box-shadow var(--t-slow), transform var(--t-base); */
}
.svc-card:hover {
box-shadow: var(--shadow-lg);
transform: translateY(-4px);
}
.svc-img-bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
opacity: 0;
transform: scale(1.06);
/* transition: opacity 0.5s var(--t-spring), transform 0.55s var(--t-spring); */
z-index: 0;
}
.svc-img-bg::after {
content: '';
position: absolute;
inset: 0;
background: var(--c-primary-dark);
opacity: 0.58;
}
.svc-card:hover .svc-img-bg {
opacity: 1;
transform: scale(1);
}
.svc-inner {
position: relative;
z-index: 1;
padding: 32px 28px 28px;
display: flex;
flex-direction: column;
gap: 16px;
}
.svc-top {
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.svc-title {
font-size: 18px;
font-weight: var(--fw-bold);
color: var(--c-text);
line-height: 1.35;
max-width: 76%;
transition: color var(--t-slow);
}
.svc-num {
font-size: 90px;
font-weight: var(--fw-bold);
color: rgba(0, 0, 0, 0.04);
position: absolute;
right: 16px;
top: -16px;
transition: color var(--t-slow);
}
.svc-card:hover .svc-title,
.svc-card:hover .svc-num {
color: var(--c-white);
}
.svc-divider {
border: none;
border-top: 2px solid var(--c-divider);
transition: border-color var(--t-slow);
}
.svc-card:hover .svc-divider {
border-color: rgba(255, 255, 255, 0.20);
}
.svc-desc {
font-size: var(--text-base);
line-height: 1.72;
color: var(--c-muted);
flex: 1;
transition: color var(--t-slow);
}
.svc-card:hover .svc-desc {
color: rgba(255, 255, 255, 0.82);
}
.svc-icon {
width: 52px;
height: 52px;
background: var(--c-primary);
border-radius: 12px;
display: grid;
place-items: center;
color: var(--c-white);
margin-top: auto;
transition: background var(--t-slow), color var(--t-slow);
}
.svc-card:hover .svc-icon {
background: var(--c-white);
color: var(--c-primary);
}
@media (max-width: 640px) {
.services-grid {
grid-template-columns: 1fr;
}
}
/* ──────────────────────────────────────────────────────────
12. WHY CHOOSE US
────────────────────────────────────────────────────────── */
.wcu-section {
position: relative;
padding: var(--section-pad) 0;
overflow: hidden;
background-image: url(../public/hero.png);
background-size: cover;
background-position: top center;
}
.wcu-pattern {
position: absolute;
inset: 0;
background: rgba(100, 5, 18, 0.82);
}
.wcu-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--sp-2xl);
position: relative;
z-index: 2;
}
.wcu-left {
display: flex;
flex-direction: column;
gap: 28px;
}
.wcu-img-wrap {
position: relative;
border-radius: var(--radius-lg);
overflow: hidden;
max-width: 500px;
}
.wcu-img {
width: 100%;
min-height: 400px;
object-fit: cover;
border-radius: var(--radius-lg);
display: block;
}
/* Spinning badge */
.wcu-badge {
position: absolute;
top: 18px;
right: 18px;
width: 110px;
height: 110px;
display: grid;
place-items: center;
}
.badge-ring {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
animation: spin 10s linear infinite;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
.badge-arrow {
width: 40px;
height: 40px;
background: var(--c-primary);
border-radius: 50%;
display: grid;
place-items: center;
z-index: 1;
}
/* Tags */
.wcu-tags {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.wcu-tag {
border: 1px solid rgba(255, 255, 255, 0.20);
border-radius: var(--radius-full);
padding: 10px 16px;
font-size: var(--text-md);
font-weight: var(--fw-medium);
color: var(--c-white);
background: rgba(255, 255, 255, 0.06);
transition: background var(--t-fast), border-color var(--t-fast);
cursor: default;
}
.wcu-tag:hover {
background: var(--c-primary);
border-color: var(--c-primary);
}
.wcu-right {
display: flex;
flex-direction: column;
gap: 14px;
}
.wcu-desc {
font-size: var(--text-md);
line-height: 1.78;
color: rgba(255, 255, 255, 0.65);
}
/* Stat cards */
.wcu-stats {
display: flex;
flex-direction: column;
gap: 14px;
}
.stat-card {
display: flex;
align-items: center;
gap: var(--sp-md);
background: rgba(255, 255, 255, 0.07);
border: 1px solid rgba(255, 255, 255, 0.10);
border-radius: var(--radius-md);
padding: 20px 24px;
transition: background var(--t-base), border-color var(--t-base);
}
.stat-card:hover {
background: rgba(200, 16, 46, 0.28);
border-color: rgba(200, 16, 46, 0.50);
}
.stat-card .icon-box {
border-radius: 10px;
}
.stat-body {
display: flex;
align-items: center;
gap: var(--sp-md);
flex: 1;
}
.stat-number {
font-size: 34px;
font-weight: var(--fw-bold);
color: var(--c-white);
min-width: 90px;
line-height: 1;
}
.stat-label {
font-size: var(--text-base);
color: rgba(255, 255, 255, 0.55);
line-height: 1.45;
}
@media (max-width: 768px) {
.wcu-grid {
grid-template-columns: 1fr;
gap: var(--sp-xl);
}
}
/* ──────────────────────────────────────────────────────────
13. PROCESS
────────────────────────────────────────────────────────── */
.process-section {
background: var(--c-surface);
}
.process-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(2, 280px);
gap: 20px;
}
.proc-card {
border-radius: 18px;
overflow: hidden;
}
.proc-text {
background: var(--c-bg);
padding: 32px 28px;
display: flex;
flex-direction: column;
gap: 14px;
border: 1px solid var(--c-divider);
transition: box-shadow var(--t-base), transform var(--t-base);
}
.proc-text:hover {
box-shadow: var(--shadow-md);
transform: translateY(-4px);
}
.proc-step {
font-size: var(--text-sm);
color: var(--c-primary);
font-weight: var(--fw-semibold);
letter-spacing: 0.04em;
}
.proc-title {
font-size: var(--text-xl);
font-weight: var(--fw-bold);
color: var(--c-text);
line-height: 1.3;
}
.proc-desc {
font-size: var(--text-base);
line-height: 1.72;
color: var(--c-muted);
}
.proc-img-card {
background: #e8d0d4;
}
.proc-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform var(--t-slow);
}
.proc-img-card:hover .proc-img {
transform: scale(1.05);
}
@media (max-width: 1024px) {
.process-grid {
grid-template-columns: repeat(2, 1fr);
grid-template-rows: auto;
}
.proc-card {
min-height: 220px;
}
}
@media (max-width: 640px) {
.process-grid {
grid-template-columns: 1fr;
}
.proc-card {
min-height: 200px;
}
}
/* ──────────────────────────────────────────────────────────
14. WHAT WE DO
────────────────────────────────────────────────────────── */
.wwd-section {
background: var(--c-bg);
}
.wwd-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 24px;
margin-bottom: var(--sp-xl);
}
.wwd-card {
border-radius: 18px;
overflow: hidden;
position: relative;
min-height: 420px;
background: var(--c-surface);
box-shadow: var(--shadow-sm);
transition: transform var(--t-slow), box-shadow var(--t-slow);
cursor: pointer;
}
.wwd-card:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-lg);
}
.wwd-img-wrap {
position: relative;
overflow: hidden;
height: 100%;
}
.wwd-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform var(--t-slow);
}
.wwd-card:hover .wwd-img {
transform: scale(1.06);
}
.wwd-shine {
position: absolute;
inset: 0;
background: linear-gradient(120deg, transparent 20%, rgba(255, 255, 255, 0.38) 50%, transparent 80%);
transform: translateX(-100%);
transition: transform 0.55s;
pointer-events: none;
}
.wwd-card:hover .wwd-shine {
transform: translateX(100%);
}
.wwd-info {
padding: 20px 22px 24px;
position: absolute;
bottom: 0;
border-radius: 10px;
background: var(--c-bg);
margin: 16px;
display: flex;
flex-direction: column;
gap: var(--sp-xs);
}
.wwd-cat {
display: flex;
align-items: center;
gap: var(--sp-xs);
font-size: var(--text-xs);
font-weight: var(--fw-semibold);
color: var(--c-primary);
letter-spacing: 0.04em;
}
.wwd-cat-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--c-primary);
flex-shrink: 0;
}
.wwd-title {
font-size: var(--text-lg);
font-weight: var(--fw-bold);
color: var(--c-text);
}
.wwd-desc {
font-size: 13.5px;
line-height: 1.72;
color: var(--c-muted);
}
.wwd-footer {
text-align: center;
font-size: var(--text-base);
color: var(--c-muted);
padding-top: var(--sp-xs);
}
.wwd-link {
color: var(--c-primary);
font-weight: var(--fw-semibold);
text-decoration: underline;
margin-left: 4px;
}
/* ──────────────────────────────────────────────────────────
15. TEAM
────────────────────────────────────────────────────────── */
.team-section {
padding: var(--section-pad) 0;
background: var(--c-bg);
}
.team-header {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--sp-xl);
align-items: center;
margin-bottom: 56px;
}
.team-header-right {
display: flex;
flex-direction: column;
gap: var(--sp-xs);
}
.team-desc {
font-size: var(--text-md);
color: var(--c-muted);
line-height: 1.72;
}
.team-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.team-card {
border-radius: var(--radius-lg);
overflow: hidden;
position: relative;
background: var(--c-surface);
box-shadow: var(--shadow-sm);
transition: transform var(--t-slow), box-shadow var(--t-slow);
cursor: pointer;
}
.team-card:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-lg);
}
.team-img-wrap {
position: relative;
overflow: hidden;
}
.team-img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top;
aspect-ratio: 1 / 1.08;
display: block;
transition: transform var(--t-slow);
}
.team-card:hover .team-img {
transform: scale(1.05);
}
.team-socials {
position: absolute;
bottom: 16px;
right: 16px;
display: flex;
flex-direction: column;
gap: var(--sp-xs);
opacity: 0;
transform: translateX(16px);
transition: opacity var(--t-base), transform var(--t-base);
}
.team-card:hover .team-socials {
opacity: 1;
transform: translateX(0);
}
.team-social-btn {
width: 34px;
height: 34px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, 0.30);
display: grid;
place-items: center;
color: var(--c-white);
text-decoration: none;
transition: background var(--t-fast), border-color var(--t-fast);
}
.team-social-btn:hover {
background: var(--c-primary-light);
border-color: var(--c-primary-light);
}
.team-info {
position: absolute;
right: 10px;
bottom: 10px;
left: 10px;
background: var(--c-divider-d);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-radius: 20px;
padding: 30px;
text-align: center;
transition: all 0.4s ease-in-out;
z-index: 2;
}
.team-name {
font-size: var(--text-lg);
font-weight: var(--fw-bold);
color: var(--c-white);
margin-bottom: 4px;
}
.team-role {
font-size: 13.5px;
color: rgba(255, 255, 255, 0.58);
}
@media (max-width: 900px) {
.team-header {
grid-template-columns: 1fr;
gap: 24px;
}
.team-grid {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 560px) {
.team-grid {
grid-template-columns: 1fr;
}
}
/* ──────────────────────────────────────────────────────────
16. APPROACH (Mission / Vision / Contact)
────────────────────────────────────────────────────────── */
.approach-section {
padding: var(--section-pad) 0;
background: var(--c-surface);
}
.approach-header {
text-align: center;
margin-bottom: 56px;
}
.approach-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
align-items: stretch;
}
.approach-card {
background: var(--c-bg);
border-radius: var(--radius-lg);
padding: 36px 32px 32px;
display: flex;
flex-direction: column;
gap: 16px;
transition: box-shadow var(--t-slow), transform var(--t-base);
}
.approach-card:hover {
box-shadow: var(--shadow-md);
transform: translateY(-4px);
}
.appr-icon-wrap {
width: 56px;
height: 56px;
background: var(--c-primary-light);
border-radius: var(--radius-md);
display: grid;
place-items: center;
color: var(--c-white);
flex-shrink: 0;
}
.appr-title {
font-size: var(--text-xl);
font-weight: var(--fw-bold);
color: var(--c-primary);
}
.appr-desc {
font-size: var(--text-base);
color: var(--c-muted);
line-height: 1.72;
flex: 1;
}
.appr-divider {
border: none;
border-top: 2px solid var(--c-divider);
margin: 4px 0;
}
.appr-checks {
display: flex;
flex-direction: column;
gap: 10px;
}
.appr-checks li {
display: flex;
align-items: center;
gap: 10px;
font-size: var(--text-base);
font-weight: var(--fw-medium);
color: var(--c-primary);
}
.appr-check-icon {
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--c-primary-light);
display: grid;
place-items: center;
flex-shrink: 0;
}
/* Contact card */
.appr-contact-card {
padding: 0;
overflow: hidden;
position: relative;
min-height: 340px;
}
.appr-contact-img-wrap {
position: absolute;
inset: 0;
}
.appr-contact-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.appr-contact-overlay {
position: absolute;
inset: 0;
background: linear-gradient(160deg, rgba(10, 10, 50, 0.50) 0%, rgba(10, 10, 50, 0.88) 100%);
}
.appr-contact-content {
position: relative;
z-index: 1;
padding: 36px 32px;
display: flex;
flex-direction: column;
gap: 14px;
height: 100%;
justify-content: flex-end;
}
.appr-contact-title {
font-size: 22px;
font-weight: var(--fw-bold);
color: var(--c-white);
}
.appr-contact-desc {
font-size: var(--text-base);
color: rgba(255, 255, 255, 0.70);
line-height: 1.65;
}
.appr-contact-phone {
font-size: var(--text-lg);
font-weight: var(--fw-bold);
color: var(--c-white);
letter-spacing: 0.01em;
}
@media (max-width: 900px) {
.approach-grid {
grid-template-columns: 1fr;
}
.appr-contact-card {
min-height: 300px;
}
}
/* ──────────────────────────────────────────────────────────
17. TESTIMONIALS
────────────────────────────────────────────────────────── */
.testi-section {
position: relative;
overflow: hidden;
}
.testi-bg {
position: absolute;
inset: 0;
background: url('https://images.unsplash.com/photo-1550751827-4bd374c3f58b?w=1600&q=70') center/cover no-repeat;
filter: brightness(0.25) saturate(1.2);
}
.testi-overlay {
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(80, 5, 15, 0.92) 35%, rgba(154, 11, 33, 0.50) 100%);
}
.testi-inner {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
min-height: 600px;
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
}
.testi-left {
display: flex;
flex-direction: column;
gap: 24px;
padding: var(--sp-2xl) var(--sp-2xl) var(--sp-2xl) 0;
}
.testi-right {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
height: 600px;
overflow: hidden;
position: relative;
}
.testi-fade-top,
.testi-fade-bottom {
position: absolute;
left: 0;
right: 0;
height: 100px;
z-index: 3;
pointer-events: none;
}
.testi-fade-top {
top: 0;
background: linear-gradient(to bottom, rgba(80, 5, 15, 0.92), transparent);
}
.testi-fade-bottom {
bottom: 0;
background: linear-gradient(to top, rgba(80, 5, 15, 0.92), transparent);
}
.testi-col {
display: flex;
flex-direction: column;
gap: 16px;
}
.testi-card {
background: rgba(255, 255, 255, 0.07);
backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 18px;
padding: 26px 24px 22px;
flex-shrink: 0;
transition: background var(--t-base), border-color var(--t-base), transform var(--t-base);
}
.testi-card:hover {
background: rgba(200, 16, 46, 0.22);
border-color: rgba(200, 16, 46, 0.45);
transform: scale(1.02);
}
.testi-stars {
color: #f5c518;
font-size: 13px;
letter-spacing: 2px;
margin-bottom: 10px;
}
.testi-card-quote {
font-size: var(--text-lg);
font-weight: var(--fw-bold);
color: var(--c-white);
margin-bottom: 10px;
}
.testi-card-body {
font-size: 13.5px;
color: rgba(255, 255, 255, 0.65);
line-height: 1.72;
margin-bottom: 18px;
}
.testi-card-person {
display: flex;
align-items: center;
gap: 12px;
}
.testi-avatar {
width: 44px;
height: 44px;
border-radius: 50%;
object-fit: cover;
border: 2px solid rgba(200, 16, 46, 0.50);
flex-shrink: 0;
}
.testi-name {
font-size: var(--text-base);
font-weight: var(--fw-bold);
color: var(--c-white);
}
.testi-role {
font-size: var(--text-xs);
color: rgba(255, 255, 255, 0.50);
margin-top: 2px;
}
@media (max-width: 900px) {
.testi-inner {
grid-template-columns: 1fr;
}
.testi-left {
padding: 56px 0 32px;
}
.testi-right {
height: 400px;
}
}
@media (max-width: 600px) {
.testi-right {
grid-template-columns: 1fr;
height: 360px;
}
#testiColB {
display: none;
}
}
/* ──────────────────────────────────────────────────────────
18. CLIENTS / LOGO GRID
────────────────────────────────────────────────────────── */
.clients-section {
background: var(--c-surface);
}
.logo-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 20px;
}
.logo-card {
height: 96px;
perspective: 1000px;
cursor: pointer;
transition: transform var(--t-base);
}
.logo-card:hover {
transform: translateY(-5px);
}
.logo-inner {
position: relative;
width: 100%;
height: 100%;
transition: transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
transform-style: preserve-3d;
}
.logo-card.flipped .logo-inner {
transform: rotateY(180deg);
}
.logo-face {
position: absolute;
inset: 0;
backface-visibility: hidden;
display: flex;
align-items: center;
justify-content: center;
background: var(--c-surface);
border-radius: 12px;
border: 1px solid var(--c-divider);
transition: border-color var(--t-base);
}
.logo-card:hover .logo-face {
border-color: rgba(200, 16, 46, 0.30);
}
.logo-face img {
width: 70%;
mix-blend-mode: multiply;
object-fit: contain;
}
.logo-face.front img {
filter: grayscale(100%);
opacity: 0.55;
}
.logo-face.back {
transform: rotateY(180deg);
}
.logo-face.back img {
filter: none;
opacity: 1;
}
@media (max-width: 1100px) {
.logo-grid {
grid-template-columns: repeat(4, 1fr);
}
}
@media (max-width: 768px) {
.logo-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 480px) {
.logo-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* ──────────────────────────────────────────────────────────
19. REGISTRATION & QUOTATION TABLE
────────────────────────────────────────────────────────── */
.reg-section {
background: var(--c-bg);
}
.reg-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
align-items: start;
}
.quotation-table {
width: 100%;
border-collapse: collapse;
margin-top: var(--sp-xs);
}
.quotation-table th {
background: var(--c-primary);
color: var(--c-white);
padding: 12px 16px;
font-size: var(--text-base);
font-weight: var(--fw-semibold);
text-align: left;
}
.quotation-table th:first-child {
border-radius: var(--radius-xs) 0 0 0;
}
.quotation-table th:last-child {
border-radius: 0 var(--radius-xs) 0 0;
}
.quotation-table td {
padding: 11px 16px;
font-size: var(--text-base);
border-bottom: 1px solid var(--c-divider);
color: var(--c-text);
}
.quotation-table tr:last-child td {
font-weight: var(--fw-bold);
color: var(--c-primary);
background: rgba(200, 16, 46, 0.05);
border-bottom: none;
}
.quotation-table tr:hover:not(:last-child) td {
background: rgba(200, 16, 46, 0.03);
}
@media (max-width: 768px) {
.reg-grid {
grid-template-columns: 1fr;
}
}
/* ──────────────────────────────────────────────────────────
20. FAQ
────────────────────────────────────────────────────────── */
.faq-grid {
display: grid;
grid-template-columns: 1fr 1.3fr;
gap: 80px;
align-items: start;
}
.faq-left {
position: sticky;
top: 100px;
display: flex;
flex-direction: column;
gap: var(--sp-md);
}
.faq-desc {
font-size: var(--text-md);
color: var(--c-muted);
line-height: 1.75;
}
.faq-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.faq-item {
border: 1px solid var(--c-divider);
border-radius: var(--radius-md);
background: var(--c-bg);
overflow: hidden;
transition: border-color var(--t-base), box-shadow var(--t-base);
}
.faq-item.open {
border-color: rgba(200, 16, 46, 0.35);
box-shadow: 0 6px 24px rgba(200, 16, 46, 0.10);
background: var(--c-surface);
}
.faq-q {
width: 100%;
background: none;
border: none;
padding: 20px 22px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
text-align: left;
font-size: var(--text-md);
font-weight: var(--fw-semibold);
color: var(--c-text);
font-family: var(--font);
cursor: pointer;
transition: color var(--t-fast);
}
.faq-q:hover,
.faq-item.open .faq-q {
color: var(--c-primary);
}
.faq-icon {
width: 32px;
height: 32px;
border-radius: 50%;
border: 1.5px solid var(--c-divider);
display: grid;
place-items: center;
flex-shrink: 0;
color: var(--c-text);
transition: background var(--t-base), border-color var(--t-base), transform var(--t-slow), color var(--t-base);
}
.faq-item.open .faq-icon {
background: var(--c-primary);
border-color: var(--c-primary);
color: var(--c-white);
transform: rotate(45deg);
}
.faq-a {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.faq-item.open .faq-a {
max-height: 300px;
}
.faq-a p {
padding: 0 22px 22px;
font-size: var(--text-base);
color: var(--c-muted);
line-height: 1.78;
margin: 0;
}
@media (max-width: 900px) {
.faq-grid {
grid-template-columns: 1fr;
gap: var(--sp-xl);
}
.faq-left {
position: static;
}
}
/* ──────────────────────────────────────────────────────────
21. CTA BANNER
────────────────────────────────────────────────────────── */
.cta-banner {
background: var(--c-primary);
padding: 0 56px;
border-radius: var(--radius-xl);
overflow: hidden;
}
.cta-inner {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
min-height: 280px;
}
.cta-left {
padding: 48px 40px 48px 0;
display: flex;
flex-direction: column;
gap: 18px;
}
.cta-desc {
font-size: var(--text-md);
color: rgba(255, 255, 255, 0.80);
line-height: 1.65;
max-width: 380px;
}
.cta-right {
height: 100%;
min-height: 280px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.cta-img {
width: 100%;
max-width: 520px;
max-height: 380px;
object-fit: cover;
object-position: top;
border-radius: var(--radius-lg);
display: block;
}
@media (max-width: 900px) {
.cta-banner {
padding: 0 32px;
}
.cta-inner {
grid-template-columns: 1fr;
}
.cta-left {
padding: 40px 0;
}
.cta-right {
display: none;
}
}
/* ──────────────────────────────────────────────────────────
22. FOOTER
────────────────────────────────────────────────────────── */
.site-footer {
background: #3A0410;
color: rgba(255, 255, 255, 0.65);
font-size: var(--text-base);
}
.footer-glow-line {
height: 2px;
background: linear-gradient(90deg, transparent, var(--c-primary), transparent);
}
.footer-grid {
display: grid;
grid-template-columns: 1.6fr 1fr 1fr 1.5fr;
gap: 48px;
padding: 72px 24px 56px;
}
/* Logo */
.footer-logo {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 18px;
}
.footer-logo-icon {
width: 38px;
height: 38px;
background: var(--c-primary);
border-radius: var(--radius-sm);
display: grid;
place-items: center;
}
.footer-logo-text {
font-size: 18px;
font-weight: var(--fw-bold);
color: var(--c-white);
}
.footer-tagline {
font-size: var(--text-base);
line-height: 1.75;
color: rgba(255, 255, 255, 0.48);
margin-bottom: 28px;
max-width: 280px;
}
.footer-socials {
display: flex;
gap: 10px;
}
.social-btn {
width: 38px;
height: 38px;
border-radius: var(--radius-sm);
background: rgba(255, 255, 255, 0.07);
border: 1px solid rgba(255, 255, 255, 0.12);
display: grid;
place-items: center;
color: rgba(255, 255, 255, 0.65);
text-decoration: none;
transition: background var(--t-base), color var(--t-base), transform var(--t-fast);
}
.social-btn:hover {
background: var(--c-primary);
border-color: var(--c-primary);
color: var(--c-white);
transform: translateY(-3px);
}
.footer-col-title {
font-size: var(--text-sm);
font-weight: var(--fw-bold);
color: var(--c-white);
text-transform: uppercase;
letter-spacing: 0.10em;
margin-bottom: var(--sp-md);
padding-bottom: 12px;
border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
.footer-links {
display: flex;
flex-direction: column;
gap: 11px;
}
.footer-links a {
color: rgba(255, 255, 255, 0.48);
text-decoration: none;
font-size: var(--text-base);
display: flex;
align-items: center;
gap: 7px;
transition: color var(--t-fast), gap var(--t-fast);
}
.footer-links a::before {
content: '';
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--c-primary);
flex-shrink: 0;
opacity: 0;
transition: opacity var(--t-fast);
}
.footer-links a:hover {
color: var(--c-white);
gap: 11px;
}
.footer-links a:hover::before {
opacity: 1;
}
.footer-newsletter-desc {
font-size: 13.5px;
color: rgba(255, 255, 255, 0.48);
line-height: 1.65;
margin-bottom: 16px;
}
.footer-newsletter {
display: flex;
background: rgba(255, 255, 255, 0.07);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 10px;
overflow: hidden;
margin-bottom: 24px;
transition: border-color var(--t-fast);
}
.footer-newsletter:focus-within {
border-color: var(--c-primary);
}
.footer-input {
flex: 1;
background: transparent;
border: none;
outline: none;
padding: 12px 14px;
font-size: 13.5px;
color: var(--c-white);
font-family: var(--font);
}
.footer-input::placeholder {
color: rgba(255, 255, 255, 0.28);
}
.footer-sub-btn {
width: 44px;
background: var(--c-primary);
border: none;
color: var(--c-white);
cursor: pointer;
display: grid;
place-items: center;
transition: background var(--t-fast);
}
.footer-sub-btn:hover {
background: var(--c-primary-dark);
}
.footer-contact-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.footer-contact-item {
display: flex;
align-items: flex-start;
gap: 10px;
color: rgba(255, 255, 255, 0.48);
font-size: 13.5px;
line-height: 1.5;
}
.footer-contact-icon {
width: 28px;
height: 28px;
background: rgba(200, 16, 46, 0.20);
border-radius: 7px;
display: grid;
place-items: center;
flex-shrink: 0;
color: #ff8fa0;
}
.footer-bottom {
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.footer-bottom-inner {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 24px;
flex-wrap: wrap;
gap: 12px;
}
.footer-copy {
font-size: var(--text-sm);
color: rgba(255, 255, 255, 0.35);
}
.footer-bottom-links {
display: flex;
gap: 24px;
}
.footer-bottom-links a {
font-size: var(--text-sm);
color: rgba(255, 255, 255, 0.35);
text-decoration: none;
transition: color var(--t-fast);
}
.footer-bottom-links a:hover {
color: var(--c-white);
}
@media (max-width: 1024px) {
.footer-grid {
grid-template-columns: 1fr 1fr;
gap: 36px;
}
}
@media (max-width: 600px) {
.footer-grid {
grid-template-columns: 1fr;
gap: 32px;
padding: 48px 24px 40px;
}
.footer-bottom-inner {
flex-direction: column;
text-align: center;
}
}
/* ──────────────────────────────────────────────────────────
23. AOS INIT (ensures AOS library works correctly)
────────────────────────────────────────────────────────── */
[data-aos] {
transition-property: opacity, transform;
}
/* ──────────────────────────────────────────────────────────
24. UTILITIES
────────────────────────────────────────────────────────── */
.text-primary {
color: var(--c-primary);
}
.text-muted {
color: var(--c-muted);
}
.text-white {
color: var(--c-white);
}
.text-center {
text-align: center;
}
.mt-0 {
margin-top: 0;
}
.mt-2 {
margin-top: var(--sp-xs);
}
.mt-3 {
margin-top: var(--sp-sm);
}
.mt-4 {
margin-top: var(--sp-md);
}
.mb-0 {
margin-bottom: 0;
}
.mb-2 {
margin-bottom: var(--sp-xs);
}
.mb-3 {
margin-bottom: var(--sp-sm);
}
.mb-4 {
margin-bottom: var(--sp-md);
}
.my-4 {
margin-top: var(--sp-md);
margin-bottom: var(--sp-md);
}
/* ==================================================
BLOG SECTION
================================================== */
.blog-section {
background: var(--c-surface);
}
.blog-header {
text-align: center;
max-width: 780px;
margin: 0 auto var(--sp-2xl);
}
/* Common heading class for whole project */
.section-title {
font-family: var(--font);
font-size: var(--heading-lg);
font-weight: var(--fw-bold);
line-height: 1.15;
color: var(--c-text);
letter-spacing: -0.03em;
margin: 0;
}
.blog-badge {
display: inline-flex;
align-items: center;
gap: var(--sp-xs);
padding: 10px 18px;
margin-bottom: var(--sp-lg);
background: var(--c-surface);
border: 1px solid var(--c-divider);
border-radius: var(--radius-full);
font-size: var(--text-sm);
font-weight: var(--fw-semibold);
color: var(--c-text);
}
.blog-badge span {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--c-primary);
}
/* ==================================================
GRID
================================================== */
.blog-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--sp-lg);
}
/* ==================================================
CARD
================================================== */
.blog-card {
transition: var(--t-spring);
}
.blog-card:hover {
transform: translateY(-8px);
}
.blog-image {
overflow: hidden;
border-radius: var(--radius-lg);
margin-bottom: var(--sp-md);
}
.blog-image img {
width: 100%;
height: 280px;
object-fit: cover;
display: block;
transition: transform .5s ease;
}
.blog-card:hover .blog-image img {
transform: scale(1.05);
}
.blog-title {
font-family: var(--font);
font-size: var(--text-lg);
font-weight: var(--fw-semibold);
color: var(--c-text);
margin-bottom: var(--sp-sm);
}
.blog-card p{
padding-top: var(--sp-sm);
border-top: 2px solid var(--c-divider);
color: var(--c-muted);
}
.blog-link {
display: flex;
align-items: center;
gap: var(--sp-sm);
text-decoration: none;
color: var(--c-text);
font-size: var(--text-lg);
font-weight: var(--fw-semibold);
transition: var(--t-base);
}
.blog-link span {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-full);
background: var(--c-primary);
color: var(--c-white);
transition: var(--t-base);
}
.blog-card:hover .blog-link {
color: var(--c-primary);
}
.blog-card:hover .blog-link span {
transform: rotate(45deg);
box-shadow: var(--shadow-primary);
}
/* ==================================================
RESPONSIVE
================================================== */
@media (max-width: 991px) {
.blog-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 767px) {
.blog-section {
padding: 70px 0;
}
.blog-grid {
grid-template-columns: 1fr;
}
.blog-image img {
height: 240px;
}
.blog-title {
min-height: auto;
}
}
/* */
/* ===================================
BLOG DETAILS
=================================== */
.blog-details {
padding: var(--section-pad) 0;
}
.blog-layout {
display: grid;
grid-template-columns: 320px 1fr;
gap: var(--sp-xl);
align-items: start;
}
/* ===================================
SIDEBAR
=================================== */
.blog-sidebar {
position: sticky;
top: 120px;
}
.sidebar-card,
.cta-card {
background: var(--c-surface);
border-radius: var(--radius-lg);
border: 1px solid var(--c-divider);
overflow: hidden;
box-shadow: var(--shadow-xs);
}
.sidebar-card {
margin-bottom: var(--sp-lg);
}
.sidebar-title {
background: var(--c-primary);
color: var(--c-white);
padding: 18px 22px;
font-size: var(--text-lg);
font-weight: var(--fw-bold);
}
.service-list {
list-style: none;
margin: 0;
padding: 0;
}
.service-list li {
border-bottom: 1px solid var(--c-divider);
}
.service-list li:last-child {
border-bottom: none;
}
.service-list a {
display: flex;
justify-content: space-between;
align-items: center;
padding: 18px 22px;
color: var(--c-text);
text-decoration: none;
font-size: var(--text-base);
font-weight: var(--fw-medium);
transition: var(--t-base);
}
.service-list a:hover {
color: var(--c-primary);
background: var(--c-primary-100);
}
/* ===================================
CTA
=================================== */
.cta-card {
padding: var(--sp-lg);
background:
linear-gradient(
135deg,
var(--c-primary),
var(--c-primary-dark)
);
}
.cta-card h4 {
color: var(--c-white);
margin-bottom: var(--sp-md);
font-size: var(--text-xl);
font-weight: var(--fw-bold);
}
/* ===================================
BUTTON SYSTEM
=================================== */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
border: none;
cursor: pointer;
text-decoration: none;
font-family: var(--font);
font-weight: var(--fw-semibold);
transition: var(--t-base);
}
.btn-primary {
background: var(--c-white);
color: var(--c-primary);
padding: 12px 24px;
border-radius: var(--radius-full);
}
.btn-primary:hover {
transform: translateY(-2px);
}
/* ===================================
CONTENT
=================================== */
.blog-content {
background: var(--c-surface);
border-radius: var(--radius-xl);
overflow: hidden;
box-shadow: var(--shadow-sm);
}
.featured-image img {
width: 100%;
height: 500px;
object-fit: cover;
display: block;
}
.blog-body {
padding: var(--sp-xl);
}
.blog-body p {
color: var(--c-text-muted);
line-height: 1.8;
font-size: var(--text-base);
}
/* Global heading class */
.section-title {
font-size: var(--heading-md);
font-weight: var(--fw-bold);
color: var(--c-text);
margin: var(--sp-xl) 0 var(--sp-md);
}
/* ===================================
LIST
=================================== */
.content-list {
padding-left: 20px;
margin: var(--sp-lg) 0;
}
.content-list li {
margin-bottom: var(--sp-md);
color: var(--c-text);
line-height: 1.8;
}
/* ===================================
IMAGE GRID
=================================== */
.image-grid {
display: grid;
grid-template-columns: repeat(2,1fr);
gap: var(--sp-md);
margin: var(--sp-xl) 0;
}
.image-grid img {
width: 100%;
height: 260px;
object-fit: cover;
border-radius: var(--radius-md);
}
/* ===================================
BENEFITS
=================================== */
.benefits-grid {
display: grid;
grid-template-columns: repeat(2,1fr);
gap: var(--sp-md);
margin-top: var(--sp-lg);
}
.blog-content ul{
list-style: decimal-leading-zero;
padding-left: 30px;
}
.blog-content li{
margin-bottom: var(--sp-md);
}
::marker{
color: var(--c-primary-dark);
font-size: 21px;
}
strong{
color: var(--c-primary);
}
.benefit-card {
display: flex;
align-items: center;
gap: var(--sp-md);
padding: 20px;
background: var(--c-bg);
border-radius: var(--radius-md);
border: 1px solid var(--shadow-md);
-webkit-border-radius: var(--radius-md);
-moz-border-radius: var(--radius-md);
-ms-border-radius: var(--radius-md);
-o-border-radius: var(--radius-md);
}
.benefit-icon {
width: 42px;
height: 42px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-sm);
background: var(--c-primary);
color: var(--c-white);
font-weight: var(--fw-bold);
}
.benefit-card span {
color: var(--c-text);
font-weight: var(--fw-medium);
}
/* ===================================
RESPONSIVE
=================================== */
@media (max-width: 991px) {
.blog-layout {
grid-template-columns: 1fr;
}
.blog-sidebar {
position: static;
}
.featured-image img {
height: 350px;
}
}
@media (max-width: 767px) {
.blog-body {
padding: var(--sp-lg);
}
.image-grid,
.benefits-grid {
grid-template-columns: 1fr;
}
.featured-image img {
height: 260px;
}
}
/* contact */
.contact-wrapper {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
}
.badge {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 12px 22px;
border-radius: var(--radius-full);
background: var(--c-primary-100);
color: var(--c-primary);
font-weight: 700;
margin-bottom: 24px;
}
.badge::before {
content: "";
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--c-primary);
}
.section-title {
font-size: var(--heading-display);
font-weight: 800;
line-height: 1.15;
margin-bottom: 24px;
}
.section-desc {
font-size: 18px;
line-height: 1.8;
color: var(--c-text-muted);
margin-bottom: 35px;
}
.feature-list {
list-style: none;
margin-bottom: 40px;
}
.feature-list li {
display: flex;
align-items: flex-start;
gap: 14px;
margin-bottom: 18px;
color: var(--c-text-muted);
line-height: 1.7;
}
.feature-list li::before {
content: "✓";
min-width: 28px;
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
background: var(--c-primary);
color: #fff;
border-radius: 50%;
font-weight: 700;
}
.office-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.office-box {
background: #fff;
border-radius: var(--radius-md);
padding: 24px;
box-shadow: var(--shadow-sm);
border: 1px solid var(--c-divider);
}
.office-box h4 {
font-size: 18px;
margin-bottom: 12px;
color: var(--c-primary);
}
.office-box p {
line-height: 1.8;
color: var(--c-text-muted);
font-size: 15px;
}
.form-card {
background: var(--c-surface);
padding: 45px;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
}
.form-card h3 {
font-size: var(--heading-md);
margin-bottom: 12px;
}
.form-card .sub-title {
color: var(--c-muted);
line-height: 1.7;
margin-bottom: 30px;
}
.form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
}
.form-group {
margin-bottom: 18px;
}
.form-group.full {
grid-column: 1/-1;
}
input,
textarea {
width: 100%;
border: none;
outline: none;
padding: 18px 20px;
background: var(--c-bg);
border: 2px solid transparent;
border-radius: 12px;
font-family: inherit;
font-size: 15px;
transition: .3s;
}
input:focus,
textarea:focus {
border-color: var(--c-primary);
background: #fff;
}
textarea {
resize: none;
min-height: 170px;
}
.submit-btn {
border: none;
cursor: pointer;
background: var(--c-primary);
color: #fff;
padding: 16px 34px;
border-radius: 50px;
font-size: 16px;
font-weight: 700;
transition: .3s;
}
.submit-btn:hover {
background: var(--c-primary-dark);
}
.contact-bar {
margin-top: 25px;
display: flex;
flex-wrap: wrap;
gap: 15px;
}
.contact-pill {
background: var(--c-primary-100);
color: var(--c-primary);
padding: 10px 18px;
border-radius: 50px;
font-size: 14px;
font-weight: 600;
}
@media(max-width:992px) {
.contact-wrapper {
grid-template-columns: 1fr;
}
.office-grid {
grid-template-columns: 1fr;
}
.form-grid {
grid-template-columns: 1fr;
}
.form-group.full {
grid-column: auto;
}
.form-card {
padding: 30px;
}
.contact-section {
padding: 70px 0;
}
}
.contact-info-cards {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
.info-card {
position: relative;
background: var(--c-surface);
padding: 20px;
border-radius: var(--radius-lg);
border: 1px solid var(--c-divider);
box-shadow: var(--shadow-sm);
transition: var(--t-base);
overflow: hidden;
}
.info-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-md);
}
.info-icon {
width: 55px;
height: 55px;
border-radius: 50%;
background: var(--c-primary-100);
color: var(--c-primary);
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
margin-bottom: 25px;
}
.info-card h3 {
font-size: var(--heading-sm);
font-weight: 600;
color: var(--c-text);
margin-bottom: 25px;
}
.info-card p {
color: var(--c-text-muted);
padding-top: 25px;
border-top: 1px solid var(--c-divider);
}
.card-arrow {
position: absolute;
right: 25px;
bottom: 25px;
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--c-primary);
color: #fff;
text-decoration: none;
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
transition: .3s;
}
.card-arrow:hover {
background: var(--c-primary-dark);
transform: rotate(45deg);
}
@media(max-width:991px) {
.contact-info-cards {
grid-template-columns: 1fr;
}
.info-card {
padding: 30px;
}
.info-card h3 {
font-size: 24px;
}
}
.contact-cards{
background-color: var(--c-white);
}
/* services */
.why-us {
padding: var(--section-pad) 0;
background: var(--c-bg);
}
.why-grid {
display: grid;
grid-template-columns: 520px 1fr;
gap: 70px;
align-items: center;
}
.why-image {
position: relative;
}
.why-image img {
width: 100%;
height: 720px;
object-fit: cover;
border-radius: var(--radius-xl);
display: block;
}
.experience-card {
position: absolute;
left: 25px;
bottom: 25px;
background: rgba(255,255,255,.95);
padding: 22px 28px;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
}
.experience-card span {
display: block;
font-size: 42px;
font-weight: var(--fw-extrabold);
color: var(--c-primary);
line-height: 1;
}
.experience-card p {
margin-top: 6px;
color: var(--c-text-muted);
font-size: var(--text-md);
}
.section-badge {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 20px;
background: var(--c-surface);
border: 1px solid var(--c-divider);
border-radius: var(--radius-full);
font-size: var(--text-lg);
font-weight: var(--fw-semibold);
color: var(--c-primary);
margin-bottom: 24px;
}
.section-title {
font-size: var(--heading-display);
font-weight: var(--fw-extrabold);
line-height: 1.15;
color: var(--c-text);
margin-bottom: 24px;
}
.section-desc {
color: var(--c-text-muted);
line-height: 1.8;
max-width: 700px;
margin-bottom: 45px;
}
.feature-list {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 20px;
}
.feature-item {
display: flex;
gap: 22px;
}
.feature-icon {
width: 50px;
height: 50px;
background: var(--c-primary);
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
font-size: 30px;
color: var(--c-white);
box-shadow: var(--shadow-primary);
}
.feature-item h4 {
font-size: var(--heading-sm);
font-weight: var(--fw-bold);
margin-bottom: 10px;
}
.feature-item p {
color: var(--c-text-muted);
line-height: 1.8;
}
.why-footer {
margin-top: 45px;
padding-top: 35px;
border-top: 1px solid var(--c-divider);
display: flex;
align-items: center;
justify-content: space-between;
gap: 25px;
}
.primary-btn {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 18px 34px;
background: var(--c-primary);
color: var(--c-white);
text-decoration: none;
border-radius: var(--radius-full);
font-weight: var(--fw-bold);
transition: var(--t-base);
}
.primary-btn:hover {
background: var(--c-primary-dark);
transform: translateY(-2px);
}
.founder-box {
display: flex;
align-items: center;
gap: 16px;
}
.founder-box img {
width: 64px;
height: 64px;
object-fit: cover;
border-radius: 50%;
}
.founder-box h5 {
font-size: 22px;
font-weight: var(--fw-bold);
margin-bottom: 4px;
}
.founder-box span {
color: var(--c-muted);
}
@media (max-width: 992px) {
.why-grid {
grid-template-columns: 1fr;
}
.why-image img {
height: 500px;
}
.why-footer {
flex-direction: column;
align-items: flex-start;
}
}
/* ─── SECTION ─── */
.hww-section {
position: relative;
background-color: var(--c-dark-bg);
padding: var(--section-pad) 0;
overflow: hidden;
background-image: url(../public/dark-section-bg-image.png);
background-repeat: no-repeat;
background-position: top center;
background-size: cover;
}
/* hex-mesh background pattern */
.hww-section::before {
content: '';
position: absolute;
inset: 0;
background-image:
repeating-linear-gradient(60deg,
rgba(255, 255, 255, 0.025) 0px,
rgba(255, 255, 255, 0.025) 1px,
transparent 1px,
transparent 28px),
repeating-linear-gradient(-60deg,
rgba(255, 255, 255, 0.025) 0px,
rgba(255, 255, 255, 0.025) 1px,
transparent 1px,
transparent 28px);
pointer-events: none;
}
/* subtle radial glow top-right */
.hww-section::after {
content: '';
position: absolute;
top: -160px;
right: -160px;
width: 560px;
height: 560px;
border-radius: 50%;
background: radial-gradient(circle, rgba(200, 16, 46, 0.10) 0%, transparent 68%);
pointer-events: none;
}
/* ─── HEADER ─── */
.hww-header {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--sp-xl);
align-items: end;
margin-bottom: var(--sp-2xl);
position: relative;
z-index: 1;
}
.hww-header-left {}
.hww-eyebrow {
display: inline-flex;
align-items: center;
gap: var(--sp-xs);
background: rgba(255, 255, 255, 0.07);
border: 1px solid var(--c-divider-d);
border-radius: var(--radius-full);
padding: 6px 16px 6px 10px;
font-size: var(--text-sm);
font-weight: var(--fw-semibold);
color: rgba(255, 255, 255, 0.75);
margin-bottom: var(--sp-md);
backdrop-filter: blur(8px);
}
.hww-eyebrow-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--c-primary);
box-shadow: 0 0 6px var(--c-primary);
flex-shrink: 0;
}
.hww-heading {
font-size: var(--heading-lg);
font-weight: var(--fw-extrabold);
color: var(--c-white);
line-height: 1.18;
letter-spacing: -0.02em;
}
.hww-header-right {
padding-bottom: 4px;
display: flex;
flex-direction: column;
gap: var(--sp-md);
align-items: flex-start;
}
.hww-desc {
font-size: var(--text-md);
color: rgba(255, 255, 255, 0.55);
line-height: 1.75;
max-width: 480px;
}
/* ─── BUTTON ─── */
.btn-primary {
display: inline-flex;
align-items: center;
gap: var(--sp-sm);
background: var(--c-primary);
color: var(--c-white);
font-family: var(--font);
font-size: var(--text-md);
font-weight: var(--fw-semibold);
padding: 12px 24px;
border-radius: var(--radius-full);
text-decoration: none;
border: none;
cursor: pointer;
box-shadow: var(--shadow-primary);
transition: background var(--t-base), transform var(--t-base), box-shadow var(--t-base);
}
.btn-primary:hover {
background: var(--c-primary-dark);
transform: translateY(-2px);
box-shadow: 0 10px 28px rgba(200, 16, 46, 0.38);
}
.btn-primary .btn-icon {
width: 22px;
height: 22px;
background: rgba(255, 255, 255, 0.18);
border-radius: 50%;
display: grid;
place-items: center;
flex-shrink: 0;
}
/* ─── STEP CARDS GRID ─── */
.hww-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
position: relative;
z-index: 1;
margin-bottom: var(--sp-2xl);
}
/* vertical divider between cards */
.hww-card:not(:last-child) {
border-right: 1px solid var(--c-dark-border);
}
.hww-card {
position: relative;
padding: var(--sp-xl) var(--sp-lg) var(--sp-xl);
display: flex;
flex-direction: column;
gap: var(--sp-md);
cursor: default;
transition: background var(--t-spring);
border-radius: 0;
overflow: hidden;
}
/* hover: lift text + slight bg */
.hww-card:hover {
background: rgba(255, 255, 255, 0.03);
}
.hww-card:hover .hww-card-num {
color: rgba(200, 16, 46, 0.18);
transform: translateY(0px);
transform: translateY(-8px) scale(1.04);
-webkit-transform: translateY(0px);
transition: all 0.5s ease-in-out;;
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
}
.hww-card:hover .hww-card-title {
color: var(--c-white);
transform: translateY(-4px);
}
.hww-card:hover .hww-card-desc {
color: rgba(255, 255, 255, 0.7);
transform: translateY(-4px);
}
.hww-card:hover .hww-card-divider {
border-color: rgba(200, 16, 46, 0.4);
transform: translateY(-4px);
}
.hww-card:hover .hww-card-points {
transform: translateY(-4px);
}
.hww-card:hover .hww-point-dot {
background: var(--c-primary);
box-shadow: 0 0 6px var(--c-primary);
}
/* ghost number watermark */
.hww-card-num {
font-size: 120px;
line-height: 0.9em;
font-weight: var(--fw-extrabold);
color: rgba(255, 255, 255, 0.05);
transform: translateY(20px);
letter-spacing: -0.02em;
text-align: center;
transition:all 0.5s ease-in-out;
user-select: none;
transition: color var(--t-spring), transform var(--t-spring);
will-change: transform;
-webkit-transition:all 0.5s ease-in-out;
-moz-transition:all 0.5s ease-in-out;
-ms-transition:all 0.5s ease-in-out;
-o-transition:all 0.5s ease-in-out;
}
.hww-card-body {
display: flex;
flex-direction: column;
gap: var(--sp-md);
}
.hww-card-title {
font-size: var(--text-lg);
font-weight: var(--fw-bold);
color: rgba(255, 255, 255, 0.90);
text-align: center;
transition: color var(--t-spring), transform var(--t-spring);
will-change: transform;
}
.hww-card-desc {
font-size: var(--text-base);
color: rgba(255, 255, 255, 0.45);
line-height: 1.70;
text-align: center;
transition: color var(--t-spring), transform var(--t-spring);
will-change: transform;
}
.hww-card-divider {
border: none;
border-top: 1px solid var(--c-dark-border);
margin: var(--sp-xs) 0;
transition: border-color var(--t-spring), transform var(--t-spring);
will-change: transform;
}
.hww-card-points {
list-style: none;
display: flex;
flex-direction: column;
gap: var(--sp-sm);
transition: transform var(--t-spring);
will-change: transform;
}
.hww-card-points li {
display: flex;
align-items: center;
gap: var(--sp-sm);
font-size: var(--text-base);
color: rgba(255, 255, 255, 0.50);
}
.hww-point-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: rgba(200, 16, 46, 0.55);
flex-shrink: 0;
transition: background var(--t-base), box-shadow var(--t-base);
}
/* ─── BOTTOM BAR ─── */
.hww-bottom {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--sp-sm);
}
.hww-bottom-cta {
display: flex;
align-items: center;
gap: var(--sp-sm);
font-size: var(--text-md);
color: rgba(255, 255, 255, 0.6);
}
.hww-free-badge {
background: var(--c-primary);
color: var(--c-white);
font-size: var(--text-xs);
font-weight: var(--fw-bold);
padding: 4px 10px;
border-radius: var(--radius-full);
letter-spacing: 0.04em;
text-transform: uppercase;
flex-shrink: 0;
}
.hww-bottom-cta a {
color: var(--c-primary-light);
font-weight: var(--fw-semibold);
text-decoration: underline;
transition: color var(--t-fast);
}
.hww-bottom-cta a:hover {
color: var(--c-white);
}
.hww-stars {
display: flex;
align-items: center;
gap: var(--sp-sm);
font-size: var(--text-md);
color: rgba(255, 255, 255, 0.55);
}
.hww-stars-rating {
font-size: var(--text-lg);
font-weight: var(--fw-bold);
color: var(--c-white);
}
.hww-stars-icons {
display: flex;
gap: 3px;
}
.hww-stars-icons svg {
width: 18px;
height: 18px;
fill: #F5A623;
}
/* ─── RESPONSIVE ─── */
@media (max-width: 900px) {
.hww-header {
grid-template-columns: 1fr;
gap: var(--sp-lg);
}
.hww-cards {
grid-template-columns: 1fr;
}
.hww-card:not(:last-child) {
border-right: none;
border-bottom: 1px solid var(--c-dark-border);
}
.hww-card-num {
font-size: 72px;
}
}
@media (max-width: 600px) {
.hww-section {
padding: 64px 0;
}
.hww-card {
padding: var(--sp-lg) var(--sp-md);
}
}
/* From Uiverse.io by namecho */
.primary-button,.outline-button,
.primary-button::after, .outline-button::after {
padding: 16px 20px;
font-size: 18px;
background: linear-gradient(45deg, transparent 5%, var(--c-primary) 5%);
border: 0;
text-decoration: none;
color: #fff;
letter-spacing: 3px;
line-height: 1;
box-shadow: 6px 0px 0px var(--c-primary-dark);
outline: transparent;
position: relative;
}
.primary-button::after, .outline-button::after {
--slice-0: inset(50% 50% 50% 50%);
--slice-1: inset(80% -6px 0 0);
--slice-2: inset(50% -6px 30% 0);
--slice-3: inset(10% -6px 85% 0);
--slice-4: inset(40% -6px 43% 0);
--slice-5: inset(80% -6px 5% 0);
content: "ON TIME";
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(45deg, transparent 3%, var(--c-dark-bg) 3%, #00e6f6 5%, var(--c-primary) 5%);
text-shadow: -3px -3px 0px #f8f005, 3px 3px 0px #00e6f6;
clip-path: var(--slice-0);
}
.primary-button:hover::after, .outline-button:hover:after {
animation: 1s glitch;
animation-timing-function: steps(2, end);
}
@keyframes glitch {
0% {
clip-path: var(--slice-1);
transform: translate(-20px, -10px);
}
10% {
clip-path: var(--slice-3);
transform: translate(10px, 10px);
}
20% {
clip-path: var(--slice-1);
transform: translate(-10px, 10px);
}
30% {
clip-path: var(--slice-3);
transform: translate(0px, 5px);
}
40% {
clip-path: var(--slice-2);
transform: translate(-5px, 0px);
}
50% {
clip-path: var(--slice-3);
transform: translate(5px, 0px);
}
60% {
clip-path: var(--slice-4);
transform: translate(5px, 10px);
}
70% {
clip-path: var(--slice-2);
transform: translate(-10px, 10px);
}
80% {
clip-path: var(--slice-5);
transform: translate(20px, -10px);
}
90% {
clip-path: var(--slice-1);
transform: translate(-10px, 0px);
}
100% {
clip-path: var(--slice-1);
transform: translate(0);
}
}
.outline-button{
background: linear-gradient(45deg, transparent 5%, var(--c-text) 5%);
}