/*
==========================================================================
STYLESHEET ORGANISATION
==========================================================================
This stylesheet is arranged to follow the flow of the website. Each
section begins with a descriptive comment, making it easier to locate
related rules. The general order is:
1. Navigation Bar (#navbar)
2. Hero Section (#hero)
3. How We Help You Grow / Services (#services)
4. How We Work (#how-we-work)
5. Why Choose Us (#why)
6. FAQ Section (#faq)
7. Contact Section (#contact)
8. Footer (footer)
9. Utility and animation classes
Where possible, related rules are grouped together. Global resets and
responsive breakpoints remain near their original positions to
preserve the cascade. Additional notes accompany overrides so you
understand why values differ between sections.
*/
/* ==========================================================================
FAQ Section Circles
========================================================================== */
.bg-animation-faq { inset: 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: -1;
pointer-events: none;
}
.faq-circle1 {
position: absolute;
width: 180px;
height: 180px;
background-color: rgba(18, 10, 143, 0.15);
border-radius: 50%;
top: 10%;
left: 5%;
}
.faq-circle2 {
position: absolute;
width: 130px;
height: 130px;
background-color: rgba(52, 152, 219, 0.2);
border-radius: 50%;
top: 35%;
right: 10%;
}
.faq-circle3 {
position: absolute;
width: 160px;
height: 160px;
background-color: rgba(18, 10, 143, 0.1);
border-radius: 50%;
bottom: 15%;
left: 20%;
}
.faq-circle4 {
position: absolute;
width: 110px;
height: 110px;
background-color: rgba(52, 152, 219, 0.25);
border-radius: 50%;
bottom: 5%;
right: 15%;
}
/* Contact container layering
Ensure the contact card appears above the animated waves and floating circles. */
.contact-container {
position: relative;
z-index: 3;
padding-top: 20px !important;
padding-bottom: 20px !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* Disable floating circle animations on small screens and reduce the number of circles. */
@media (max-width: 768px) {
.floating-circle {
animation: none !important;
transform: none !important;
}
/* Hide some of the circles on mobile to reduce clutter */
.bg-animation-services .service-circle3,
.bg-animation-services .service-circle4,
.bg-animation-why .why-circle3,
.bg-animation-why .why-circle4,
.bg-animation-work .work-circle3,
.bg-animation-work .work-circle4,
.bg-animation-contact .contact-circle7,
.bg-animation-contact .contact-circle8,
.bg-animation-contact .contact-circle9,
.bg-animation-faq .faq-circle3,
.bg-animation-faq .faq-circle4 {
display: none;
}
/* Remove the lift effect on the highlighted why card */
#why .why-card.highlight {
transform: none !important;
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
}
/* Automatically draw the outline on the highlighted why card */
#why .why-card.highlight .why-outline .outline {
animation: drawHalf 0.85s ease forwards;
}
/* Reduce the gap between Why and FAQ sections */
#why {
padding-bottom: 60px;
}
#faq {
padding-top: 60px;
}
/* Adjust spacing for work steps container on mobile */
#how-we-work .work-steps {
gap: 28px;
}
/* Simplify the work steps layout on mobile
Convert each step into a horizontal row with the icon on the left and
text on the right. Remove card backgrounds, borders and shadows to
differentiate this section from the Services cards above. Hide the
animated connecting line entirely. */
#how-we-work .work-line {
display: none;
}
#how-we-work .work-step,
#how-we-work .process-card {
/* Lay out the icon/title cluster on the left and the description on the right */
display: flex;
align-items: flex-start;
background: none;
border: none;
box-shadow: none;
padding: 0;
margin-bottom: 28px;
}
/* The header wrapper holds the icon above its title. It sits to the left of the
description on mobile. */
#how-we-work .work-step .step-header {
display: flex;
flex-direction: column;
align-items: center;
margin-right: 16px;
width: 64px; /* give enough space for icon + title */
flex-shrink: 0;
}
#how-we-work .work-step .step-header .step-icon {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #f5f5f5;
color: #120a8f;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 6px;
border: none;
}
#how-we-work .work-step .step-header h3 {
margin: 0;
font-size: 1.2rem;
text-align: center;
}
#how-we-work .work-step p {
margin-top: 0;
font-size: 0.95rem;
color: #24324a;
line-height: 1.4;
}
}
/* ==========================================================================
Global Styles & Resets
========================================================================== */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
color: #333333; /* Dark Gray for body text */
overflow-x: hidden;
}
/* ==========================================================================
Utilities
========================================================================== */
.container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
section {
padding: 100px 0;
position: relative;
overflow: hidden;
}
.text-center {
text-align: center;
}
/* Add touch-friendly tap targets */
a, button, .hamburger {
min-height: 44px; /* Minimum tap target size for accessibility */
min-width: 44px;
display: flex;
align-items: center;
justify-content: center;
}
/* ==========================================================================
Typography
========================================================================== */
h1, h2, h3, h4 {
margin-bottom: 20px;
font-weight: 700;
line-height: 1.2;
}
h1 {
font-size: 3.5rem;
}
h2 {
font-size: 2.5rem;
text-align: center;
margin-bottom: 40px;
}
h3 {
font-size: 1.8rem;
margin-bottom: 15px;
}
h4 {
font-size: 1.3rem;
}
p {
margin-bottom: 20px;
}
.section-subtitle {
font-size: 1.2rem;
text-align: center;
max-width: 800px;
margin: 0 auto 60px;
opacity: 0.8;
}
.gradient-text {
background: linear-gradient(45deg, #120a8f, #3498db); /* Navy to Sky Blue */
-webkit-background-clip: text;
background-clip: text;
color: transparent;
font-weight: 900;
}
.solid-black {
color: #333333 !important; /* Black for contrast on Sky Blue background */
font-weight: 900;
}
/* ==========================================================================
Buttons
========================================================================== */
/* Removed older base .cta-button block (consolidated) */
.cta-button:hover {
background-color: #120a8f; /* Navy on hover */
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
.submit-button {
display: inline-block;
padding: 15px 30px;
border: none;
border-radius: 30px;
font-weight: bold;
font-size: 1.1rem;
cursor: pointer;
transition: all 0.3s ease;
color: #ffffff;
/* Match CTA gradient for consistency */
background: linear-gradient(135deg, #0c0f6b, #2b85c9);
text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}
.submit-button:hover {
background-color: #120a8f; /* Navy on hover */
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
/* ==========================================================================
Navbar
========================================================================== */
#navbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
transition: all 0.3s ease;
padding: 20px 0;
background-color: transparent;
}
#navbar.scrolled {
background-color: #ffffff; /* White when scrolled */
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
padding: 15px 0;
}
#navbar .container {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo-image {
height: 40px;
width: auto;
}
.nav-links {
display: flex;
list-style: none;
}
.nav-links li {
margin-left: 30px;
}
.nav-links a {
text-decoration: none;
color: #120a8f; /* Dark Navy for visibility on light hero */
font-weight: 500;
transition: color 0.3s ease;
}
#navbar.scrolled .nav-links a {
color: #120a8f; /* Keep dark when scrolled */
}
.nav-links a:hover {
color: #3498db; /* Sky Blue on hover */
}
.hamburger {
display: none;
cursor: pointer;
}
.hamburger span {
display: block;
width: 25px;
height: 3px;
background-color: #120a8f; /* Dark for visibility */
margin: 5px 0;
transition: all 0.3s ease;
}
#navbar.scrolled .hamburger span {
background-color: #120a8f;
}
/* ==========================================================================
Hero Section
========================================================================== */
#hero {
height: 100vh;
min-height: 100svh; /* mobile-safe viewport height */
display: flex;
align-items: center;
justify-content: center;
background-color: #f5f5f5; /* match Services off-white */
color: #0b0b3a;
position: relative;
overflow: hidden;
text-align: center;
}
.hero-content {
position: relative;
z-index: 10;
max-width: 1100px;
width: 100%;
padding: 0 20px;
box-sizing: border-box;
margin: 0 auto;
}
.hero-content h1 {
/* Show the hero headline immediately without fading or sliding. The
typewriter script controls the appearance of each line, so we
disable the fade-in animation here to prevent text from flashing
briefly and then reappearing. */
opacity: 1;
transform: none;
animation: none;
animation-delay: 0s;
font-size: clamp(2.8rem, 6vw, 4.8rem);
font-weight: 900;
line-height: 1.1;
margin-bottom: 0.8rem; /* ↑ more space under headline */
text-align: center;
display: block;
text-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
margin-bottom: 30px !important; /* equal gap below heading */
}
.hero-content h1 span {
display: inline;
}
.hero-content p {
font-size: 1.25rem;
margin-top: 1rem;
margin-bottom: 1.2rem; /* ↑ space above CTA */
opacity: 0;
transform: translateY(20px);
animation: fadeInUp 1s ease forwards;
/* Delay the subheading fade‑in so it appears after the headline has
finished typing on most devices. Lengthen this if you adjust
the typewriter speed or number of characters. */
animation-delay: 2.8s;
text-shadow: 0 2px 6px rgba(255, 255, 255, 0.5);
margin-bottom: 30px !important; /* equal gap below subheading */
}
.bg-animation {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
overflow: visible;
z-index: 1;
}
.waves {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 40vh;
z-index: 2;
transform: translateY(0);
}
.waves svg {
height: 100%;
width: 100%;
}
.floating-circle {
position: absolute;
border-radius: 50%;
opacity: 0.4;
z-index: 1;
}
.circle1 {
width: 300px;
height: 300px;
background-color: rgba(18, 10, 143, 0.3); /* Navy */
top: 10%;
left: 5%;
}
.circle2 {
width: 200px;
height: 200px;
background-color: rgba(52, 152, 219, 0.2); /* Sky Blue */
top: 30%;
right: 10%;
}
.circle3 {
width: 150px;
height: 150px;
background-color: rgba(18, 10, 143, 0.2); /* Navy */
bottom: 20%;
left: 20%;
}
.circle4 {
width: 180px;
height: 180px;
background-color: rgba(52, 152, 219, 0.3); /* Sky Blue */
bottom: 10%;
right: 5%;
}
/* --- Hero Typewriter --- */
/* Centralised styles for the hero headline and typewriter effect. These declarations
appear only once to avoid duplication scattered throughout the stylesheet. */
/* Headline styling */
.hero-head {
font-weight: 900;
line-height: 1.1;
font-size: clamp(2.2rem, 5vw, 3.6rem);
text-align: center;
color: #000; /* default text colour */
}
/* Wrapper for the lines generated by the typewriter script */
.tw-lines {
display: inline-block;
}
/* Each line output by the typewriter sits on its own row */
.tw-line {
display: block;
color: #000;
-webkit-text-fill-color: initial;
background: none;
}
/* Typing caret styling */
.tw-caret {
display: inline-block;
width: 2px;
height: 1em;
margin-left: 4px;
background: currentColor;
transform: translateY(0.15em);
animation: tw-blink 1s step-end infinite;
}
/* Blink animation for the caret */
@keyframes tw-blink {
0%, 60% { opacity: 1; }
60.001%, 100% { opacity: 0; }
}
/* Respect users' reduced motion preferences by disabling the caret animation */
@media (prefers-reduced-motion: reduce) {
.tw-caret {
animation: none;
}
}
/* Subheading under the hero headline */
/* The subheading gently fades in after the headline has typed. We
initialize it hidden and slide it up slightly before settling into
place. Adjust the delay to appear a moment before the CTA button. */
.hero-sub {
margin-top: 1.5rem;
font-size: 1.125rem;
text-align: center;
max-width: 650px;
margin-left: auto;
margin-right: auto;
opacity: 0;
transform: translateY(20px);
animation: fadeInUp 1s ease forwards;
/* Delay slightly so the text appears after the headline finishes typing */
animation-delay: 2.0s;
}
/* Fade in the CTA after the headline has been typed and the subheading has
appeared. We start hidden and slide up slightly before settling into
place. */
.hero-content .cta-button {
/* Start hidden and slide up into place. The delay is extended
slightly so it appears after the subheading for a smoother
sequential reveal. */
opacity: 0;
transform: translateY(20px);
animation: fadeInUp 1s ease forwards;
animation-delay: 3.5s;
margin-top: 0 !important; /* ensure spacing above button isn't doubled */
}
/* -------------------------------------------------------------------------
Reveal animations for headings, subtitles and key cards
------------------------------------------------------------------------- */
/* Start hidden for section titles, subtitles, the FAQ card wrapper and the
contact panel. The IntersectionObserver in script.js will add the
`.show` class when these elements enter the viewport, triggering a
fade‑and‑slide animation identical to the cards used elsewhere on the
page. */
/* Elements that should reveal with a fade-and-slide effect on scroll.
Adding `.faq-item` here ensures each FAQ row animates individually rather than
only the parent card. This grouping shares the same transition settings for
consistency across all sections. */
.section-title,
.section-subtitle,
.faq-card,
.faq-item,
.contact-container {
opacity: 0;
transform: translateY(40px);
transition: opacity 0.6s ease, transform 0.6s ease;
padding-top: 20px !important;
padding-bottom: 20px !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.section-title.show,
.section-subtitle.show,
.faq-card.show,
.faq-item.show,
.contact-container.show {
opacity: 1;
transform: translateY(0);
}
/* Primary CTA button */
.cta-button {
display: inline-block;
width: auto;
padding: 14px 28px;
border-radius: 999px;
font-weight: 800;
color: #ffffff;
text-decoration: none;
/* Adjust gradient stops so the navy and sky halves split 50/50 rather than
being dominated by dark blue. */
/* Match the contact form submit button style: use a two‑tone horizontal gradient. */
background: linear-gradient(90deg, #120a8f, #3498db);
box-shadow: 0 6px 16px rgba(52, 152, 219, 0.25);
transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}
.cta-button:hover {
transform: translateY(-3px);
box-shadow: 0 10px 24px rgba(52, 152, 219, 0.30);
filter: brightness(1.03);
}
.cta-button:active {
transform: translateY(-1px) scale(0.99);
}
/* Outline button variant. Defined once to prevent repetition. */
.btn-outline {
padding: 12px 22px;
border-radius: 999px;
font-weight: 700;
color: #120a8f;
text-decoration: none;
background: #fff;
border: 2px solid transparent;
background-image:
linear-gradient(#fff, #fff),
linear-gradient(135deg, #120a8f, #3498db);
background-origin: border-box;
background-clip: padding-box, border-box;
transition: 0.15s ease;
}
.btn-outline:hover {
color: #0b0b3a;
filter: brightness(1.03);
}
/* One-word gradient highlight — reuse via .gradient-word class (see bottom of file). */
/* ==========================================================================
About Section
========================================================================== */
#about {
background-color: #f5f5f5; /* Light Gray */
}
#about .container {
position: relative;
z-index: 1;
}
.section-title {
text-align: center;
width: 100%;
margin-bottom: 2rem;
}
.about-content {
display: flex;
gap: 40px;
margin-bottom: 80px;
flex-wrap: wrap;
}
.about-image {
flex: 1;
min-width: 300px;
}
.about-image img {
width: 100%;
height: auto;
border-radius: 10px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
.about-text {
flex: 1;
min-width: 300px;
}
.about-text h2 {
text-align: left;
}
.about-text-card {
flex: 1;
min-width: 300px;
background-color: #ffffff; /* White */
border-radius: 15px;
padding: 30px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.about-text-card:hover {
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
transform: translateY(-5px);
}
.fun-facts {
margin-top: 80px;
}
.fun-facts h3 {
text-align: center;
margin-bottom: 40px;
}
.fun-facts-container {
display: flex;
gap: 30px;
justify-content: center;
flex-wrap: wrap;
}
.fun-fact-card {
width: 300px;
padding: 30px;
background-color: #f5f5f5; /* Light Gray */
border-radius: 15px;
text-align: center;
box-shadow: none;
}
.fun-fact-card i {
font-size: 3rem;
margin-bottom: 20px;
color: #3498db; /* Sky Blue */
}
.fun-fact-card h4 {
font-size: 1.3rem;
margin-bottom: 10px;
}
.fun-fact-card .teaser {
font-size: 1rem;
opacity: 0.8;
}
/* About Section Circles */
.about-circle1 {
width: 200px;
height: 200px;
background-color: rgba(18, 10, 143, 0.3); /* Navy */
top: 15%;
left: 10%;
}
.about-circle2 {
width: 150px;
height: 150px;
background-color: rgba(52, 152, 219, 0.2); /* Sky Blue */
bottom: 20%;
right: 15%;
}
.about-circle3 {
width: 120px;
height: 120px;
background-color: rgba(18, 10, 143, 0.2); /* Navy */
top: 50%;
left: 20%;
}
.about-circle4 {
width: 180px;
height: 180px;
background-color: rgba(52, 152, 219, 0.3); /* Sky Blue */
top: 30%;
right: 10%;
}
.about-circle5 {
width: 130px;
height: 130px;
background-color: rgba(18, 10, 143, 0.2); /* Navy */
bottom: 10%;
right: 5%;
}
.about-circle6 {
width: 170px;
height: 170px;
background-color: rgba(52, 152, 219, 0.2); /* Sky Blue */
bottom: 25%;
left: 35%;
}
.about-circle7 {
width: 140px;
height: 140px;
background-color: rgba(18, 10, 143, 0.3); /* Navy */
top: 40%;
right: 25%;
}
/* ==========================================================================
Process Section
========================================================================== */
#process {
background-color: #2c3e50; /* Dark Navy */
color: #ffffff;
}
.parallax {
background-image: url('data:image/svg+xml;utf8,');
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.process-cards {
display: flex;
gap: 25px;
flex-wrap: wrap;
justify-content: center;
}
.process-card {
background-color: rgba(255, 255, 255, 0.1);
padding: 30px;
border-radius: 10px;
width: calc(50% - 25px);
min-width: 300px;
margin-bottom: 25px;
backdrop-filter: blur(5px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
transform: translateY(50px);
opacity: 0;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.process-card:hover {
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
transform: translateY(-3px);
}
.card-icon {
width: 70px;
height: 70px;
border-radius: 50%;
background-color: #3498db; /* Sky Blue */
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 20px;
}
.card-icon i {
font-size: 2rem;
color: #ffffff;
}
/* ==========================================================================
Why Us Section
========================================================================== */
#why-us {
background-color: #ffffff; /* White */
}
#why-us .container {
position: relative;
z-index: 1;
}
.features-grid {
display: flex;
flex-wrap: wrap;
gap: 30px;
justify-content: center;
}
.feature-card {
background-color: #f5f5f5; /* Light Gray */
border-radius: 10px;
padding: 30px;
width: calc(50% - 30px);
min-width: 300px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
transform: translateY(50px);
opacity: 0;
}
.feature-card:hover {
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
transform: translateY(-5px);
}
.feature-icon {
width: 60px;
height: 60px;
border-radius: 50%;
background-color: #3498db; /* Sky Blue */
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 20px;
}
.feature-icon i {
font-size: 1.5rem;
color: #ffffff;
}
.bg-animation-why-us {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: 0;
}
.why-us-circle1 {
width: 200px;
height: 200px;
background-color: rgba(18, 10, 143, 0.1); /* Navy */
top: 10%;
left: 5%;
}
.why-us-circle2 {
width: 150px;
height: 150px;
background-color: rgba(52, 152, 219, 0.2); /* Sky Blue */
bottom: 20%;
right: 10%;
}
.why-us-circle3 {
width: 120px;
height: 120px;
background-color: rgba(18, 10, 143, 0.2); /* Navy */
top: 50%;
left: 20%;
}
.why-us-circle4 {
width: 170px;
height: 170px;
background-color: rgba(52, 152, 219, 0.3); /* Sky Blue */
top: 20%;
right: 15%;
}
.why-us-circle5 {
width: 140px;
height: 140px;
background-color: rgba(18, 10, 143, 0.2); /* Navy */
bottom: 15%;
right: 5%;
}
.why-us-circle6 {
width: 160px;
height: 160px;
background-color: rgba(52, 152, 219, 0.3); /* Sky Blue */
top: 60%;
left: 15%;
}
.why-us-circle7 {
width: 130px;
height: 130px;
background-color: rgba(18, 10, 143, 0.2); /* Navy */
top: 70%;
right: 20%;
}
.why-us-circle8 {
width: 200px;
height: 200px;
background-color: rgba(52, 152, 219, 0.1); /* Sky Blue */
top: 50%;
left: 40%;
}
/* ==========================================================================
Contact Section
========================================================================== */
#contact {
/* Light gray backdrop for the contact section. This container
provides context for the white card inside. */
background-color: #f5f5f5;
position: relative;
overflow: hidden;
padding-bottom: 100px;
}
/* The default .container positioning applies inside contact; no custom
positioning needed here. */
/* Removed legacy .contact-card styles. The contact section now
consistently uses .contact-container and .contact-info/.contact-form-container
for layout and card styling. */
.form-group {
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 5px;
font-weight: 500;
/* Dark label text for improved contrast on the light contact card. */
color: #0b0b3a;
}
.required {
color: #e74c3c;
margin-left: 5px;
}
input, textarea {
width: 100%;
padding: 12px;
border: none;
border-radius: 5px;
font-size: 16px; /* Ensures iOS doesn’t zoom in on form inputs */
font-family: inherit;
/* Use a neutral light background and dark text for the unified contact
form. The previous translucent white and white text were part of
a dark card design that has been removed. */
background-color: #f5f5f5;
color: #0b0b3a;
resize: none;
}
input:focus, textarea:focus {
outline: none;
box-shadow: 0 0 0 2px #3498db; /* Sky Blue */
}
#form-message {
margin-top: 20px;
padding: 10px;
border-radius: 5px;
display: none;
}
#form-message.success {
display: block;
background-color: rgba(46, 204, 113, 0.2);
color: #2ecc71;
}
#form-message.error {
display: block;
background-color: rgba(231, 76, 60, 0.2);
color: #e74c3c;
}
.bg-animation-contact {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
min-height: 90vh;
overflow: visible;
z-index: 1;
}
.contact-waves {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 70%;
z-index: 2;
opacity: 1;
transform: translateY(0);
}
.contact-waves svg {
height: 100%;
width: 100%;
}
.contact-circle1 {
width: 250px;
height: 250px;
background-color: rgba(18, 10, 143, 0.2); /* Navy */
top: 5%;
left: 10%;
}
.contact-circle2 {
width: 180px;
height: 180px;
background-color: rgba(52, 152, 219, 0.2); /* Sky Blue */
top: 25%;
right: 15%;
}
.contact-circle3 {
width: 120px;
height: 120px;
background-color: rgba(18, 10, 143, 0.2); /* Navy */
top: 40%;
left: 20%;
}
.contact-circle4 {
width: 150px;
height: 150px;
background-color: rgba(52, 152, 219, 0.3); /* Sky Blue */
top: 60%;
right: 25%;
}
.contact-circle5 {
width: 100px;
height: 100px;
background-color: rgba(18, 10, 143, 0.2); /* Navy */
top: 70%;
left: 15%;
}
.contact-circle6 {
width: 200px;
height: 200px;
background-color: rgba(52, 152, 219, 0.1); /* Sky Blue */
top: 50%;
right: 10%;
}
.contact-circle7 {
width: 160px;
height: 160px;
background-color: rgba(18, 10, 143, 0.3); /* Navy */
top: 30%;
left: 30%;
}
.contact-circle8 {
width: 140px;
height: 140px;
background-color: rgba(52, 152, 219, 0.3); /* Sky Blue */
bottom: 20%;
left: 35%;
}
.contact-circle9 {
width: 180px;
height: 180px;
background-color: rgba(18, 10, 143, 0.2); /* Navy */
bottom: 10%;
right: 30%;
}
/* ==========================================================================
Footer
========================================================================== */
footer {
/* Use the same gradient as our buttons and hero to tie the footer into
the overall colour palette. */
background: linear-gradient(135deg, #0c0f6b 0%, #2b85c9 100%);
color: #ffffff;
padding: 30px 0;
text-align: center;
position: relative;
}
/* ==========================================================================
Services Section
========================================================================== */
#services {
background-color: #f5f5f5;
position: relative;
overflow: hidden;
padding: 100px 0;
}
.services-cards {
display: flex;
flex-wrap: wrap;
gap: 30px;
justify-content: center;
margin-top: 60px;
/* Elevate cards above decorative circles */
position: relative;
z-index: 1;
}
.service-card {
position: relative;
background-color: #ffffff;
border-radius: 16px;
padding: 40px 30px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
flex: 1 1 300px;
max-width: 350px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
overflow: hidden;
opacity: 0;
transform: translateY(50px);
}
.service-card.show {
opacity: 1;
transform: translateY(0);
}
.service-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15),
/* Add a subtle wrap-around gradient border using multiple box-shadows */
0 0 0 3px rgba(18, 10, 143, 0.15),
0 0 0 6px rgba(52, 152, 219, 0.15);
}
.service-icon {
font-size: 2.5rem;
color: #120a8f;
margin-bottom: 20px;
}
.service-card h3 {
font-size: 1.5rem;
margin-bottom: 10px;
}
.service-card p {
font-size: 1rem;
opacity: 0.8;
}
/* ==========================================================================
How We Work Section
========================================================================== */
.dark-section {
background-color: #0b0b3a;
color: #ffffff;
position: relative;
overflow: hidden;
padding: 120px 0;
}
#how-we-work .section-title,
#how-we-work .section-subtitle {
text-align: center;
}
.timeline {
position: relative;
display: flex;
justify-content: space-between;
gap: 40px;
margin-top: 60px;
flex-wrap: wrap;
}
.timeline-line {
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 4px;
background: linear-gradient(135deg, #120a8f, #3498db);
transform: translateY(-50%);
z-index: 1;
}
.timeline-step {
position: relative;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(6px);
padding: 40px 30px;
border-radius: 12px;
flex: 1 1 250px;
text-align: center;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
z-index: 2;
opacity: 0;
transform: translateY(40px);
transition: all 0.6s ease;
}
.timeline-step.show {
opacity: 1;
transform: translateY(0);
}
.timeline-icon {
font-size: 2rem;
margin-bottom: 15px;
color: #ffffff;
background: linear-gradient(135deg, #120a8f, #3498db);
width: 60px;
height: 60px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
}
@media (max-width: 768px) {
.timeline {
flex-direction: column;
align-items: flex-start;
}
.timeline-line {
width: 4px;
height: calc(100% - 40px);
left: 50%;
top: 20px;
transform: translateX(-50%);
}
.timeline-step {
margin-bottom: 40px;
}
}
/* Work Section Circles */
.bg-animation-work {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: 0;
}
.work-circle1 {
position: absolute;
width: 200px;
height: 200px;
background-color: rgba(18, 10, 143, 0.2);
border-radius: 50%;
top: 10%;
left: 5%;
}
.work-circle2 {
position: absolute;
width: 150px;
height: 150px;
background-color: rgba(52, 152, 219, 0.2);
border-radius: 50%;
top: 40%;
right: 10%;
}
.work-circle3 {
position: absolute;
width: 180px;
height: 180px;
background-color: rgba(18, 10, 143, 0.15);
border-radius: 50%;
bottom: 20%;
left: 20%;
}
.work-circle4 {
position: absolute;
width: 120px;
height: 120px;
background-color: rgba(52, 152, 219, 0.25);
border-radius: 50%;
bottom: 10%;
right: 25%;
}
/* ==========================================================================
Services Section Circles
========================================================================== */
.bg-animation-services {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: 0;
}
.service-circle1 {
position: absolute;
width: 200px;
height: 200px;
background-color: rgba(18, 10, 143, 0.15);
border-radius: 50%;
top: 15%;
left: -10%;
}
.service-circle2 {
position: absolute;
width: 140px;
height: 140px;
background-color: rgba(52, 152, 219, 0.2);
border-radius: 50%;
top: 45%;
right: 15%;
}
.service-circle3 {
position: absolute;
width: 160px;
height: 160px;
background-color: rgba(18, 10, 143, 0.1);
border-radius: 50%;
bottom: 20%;
left: 15%;
}
.service-circle4 {
position: absolute;
width: 120px;
height: 120px;
background-color: rgba(52, 152, 219, 0.25);
border-radius: 50%;
bottom: 10%;
right: 5%;
}
/* ==========================================================================
Why Section Circles
========================================================================== */
.bg-animation-why {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: 0;
}
.why-circle1 {
position: absolute;
width: 180px;
height: 180px;
background-color: rgba(52, 152, 219, 0.15);
border-radius: 50%;
top: 20%;
left: -8%;
}
.why-circle2 {
position: absolute;
width: 130px;
height: 130px;
background-color: rgba(18, 10, 143, 0.15);
border-radius: 50%;
top: 50%;
right: 12%;
}
.why-circle3 {
position: absolute;
width: 160px;
height: 160px;
background-color: rgba(52, 152, 219, 0.25);
border-radius: 50%;
bottom: 15%;
left: 20%;
}
.why-circle4 {
position: absolute;
width: 110px;
height: 110px;
background-color: rgba(18, 10, 143, 0.2);
border-radius: 50%;
bottom: 5%;
right: 8%;
}
/* ==========================================================================
Why Choose Us Section
========================================================================== */
.why-section {
background-color: #f5f5f5;
position: relative;
overflow: hidden;
padding: 120px 0;
}
.why-grid {
display: flex;
flex-wrap: wrap;
gap: 30px;
justify-content: center;
margin-top: 60px;
/* Ensure why cards sit above floating circles */
position: relative;
z-index: 1;
}
.why-card {
position: relative;
background-color: #ffffff;
border-radius: 16px;
padding: 40px 30px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
flex: 1 1 300px;
max-width: 350px;
backdrop-filter: blur(0px);
transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;
opacity: 0;
transform: translateY(40px);
}
.why-card.show {
opacity: 1;
transform: translateY(0);
}
.why-card.highlight {
/* Raise and slightly enlarge the highlighted card to make it stand out */
transform: translateY(-30px) scale(1.03);
box-shadow: 0 25px 45px rgba(0, 0, 0, 0.2);
filter: none;
}
.why-card.blurred {
/* Reduce blur slightly so comparison cards are more readable while still
receding into the background. Increase brightness just a hair to
improve contrast. */
filter: blur(0.3px) brightness(0.99);
}
.why-icon {
font-size: 2rem;
color: #120a8f;
margin-bottom: 20px;
}
.why-card h3 {
font-size: 1.5rem;
margin-bottom: 10px;
}
.why-card ul {
list-style: none;
padding-left: 0;
font-size: 1rem;
line-height: 1.5;
color: #444;
}
.why-card ul li {
margin-bottom: 10px;
position: relative;
padding-left: 24px;
}
.why-card ul li::before {
content: '\2713';
position: absolute;
left: 0;
top: 0;
color: #3498db;
}
/* Ensure services and why sections can contain floating circles */
#services {
position: relative;
overflow: hidden;
}
.why-section {
position: relative;
overflow: hidden;
}
/* ==========================================================================
FAQ Section
========================================================================== */
#faq {
background-color: #ffffff;
padding: 120px 0;
}
.faq-list {
max-width: 800px;
margin: 0 auto;
}
.faq-item {
/* Each FAQ becomes its own card with subtle depth */
border-bottom: none;
/* Use a fully opaque white background so the answers remain legible on top of the FAQ card’s gradient. */
background-color: #ffffff;
background: #ffffff;
border-radius: 16px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
margin-bottom: 20px;
padding: 20px 25px;
margin-bottom: 16px !important;
}
.faq-question {
width: 100%;
background: none;
border: none;
font-size: 1.25rem;
font-weight: 700;
color: #120a8f;
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
text-align: left;
padding: 0;
}
.faq-question::after {
content: '+';
font-size: 1.5rem;
transition: transform 0.3s ease;
}
.faq-item.open .faq-question::after {
transform: rotate(45deg);
}
/* FAQ answers are hidden by default and revealed when their parent item
receives the `.open` class. Using simple display toggling avoids
JavaScript height calculations and ensures reliable behaviour across
devices. */
.faq-answer {
display: none;
padding-top: 15px;
color: #444444;
font-size: 1rem;
}
.faq-item.open .faq-answer {
display: block;
}
/* ==========================================================================
Contact Section
========================================================================== */
#contact {
background-color: #f5f5f5;
position: relative;
overflow: hidden;
padding: 120px 0;
}
.contact-container {
/* Arrange the contact section as a responsive two‑column layout. By
centring items both vertically and horizontally we ensure the
heading and form are balanced within the card on all devices. */
display: flex;
flex-wrap: wrap;
gap: 40px;
align-items: center;
justify-content: center;
padding-top: 20px !important;
padding-bottom: 20px !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.contact-info {
flex: 1 1 300px;
color: #0b0b3a;
max-width: 500px;
}
.contact-info h2 {
/* Enlarge the contact heading for greater emphasis. The clamp()
function ensures the text scales fluidly between larger
headings on desktop and comfortable sizes on mobile. */
font-size: clamp(3.5rem, 7vw, 5.5rem);
line-height: 1.2;
margin-bottom: 20px;
font-weight: 800;
}
.contact-info p {
font-size: 1.2rem;
opacity: 0.8;
}
.contact-form-container {
flex: 1 1 350px;
max-width: 600px;
padding-top: 10px !important;
padding-bottom: 10px !important;
gap: 10px !important;
}
.contact-form-container form {
background-color: #ffffff;
padding: 40px;
border-radius: 16px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
.contact-form-container label {
color: #0b0b3a;
}
.contact-form-container input,
.contact-form-container textarea {
background-color: #f5f5f5;
color: #0b0b3a;
}
.contact-form-container input:focus,
.contact-form-container textarea:focus {
box-shadow: 0 0 0 2px #3498db;
}
/*
* Unify the contact section into a single card. The white background now
* wraps both the headline and the form, creating a cohesive panel. On
* mobile the layout still stacks vertically thanks to flex-wrap.
*/
.contact-container {
background-color: #ffffff;
padding: 40px;
border-radius: 16px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
display: flex;
gap: 40px;
flex-wrap: wrap;
align-items: center;
justify-content: center;
padding-top: 20px !important;
padding-bottom: 20px !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* Remove the interior card around the form since the container now
* provides the card styling. */
.contact-form-container form {
background-color: transparent;
padding: 0;
box-shadow: none;
}
@media (max-width: 768px) {
.contact-info h2 {
/* Adjust heading size on smaller screens while maintaining emphasis */
font-size: 2.5rem;
}
.contact-container {
/* Stack the form below the info on narrow devices and centre align. */
flex-direction: column;
align-items: center;
justify-content: center;
/* Increase padding on mobile so the button isn’t flush with the card edge */
padding: 30px 20px;
padding-top: 20px !important;
padding-bottom: 20px !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.contact-form-container {
/* Allow the form to span the full width on mobile for better usability */
max-width: none;
flex: 1 1 100%;
width: 100%;
padding-top: 10px !important;
padding-bottom: 10px !important;
gap: 10px !important;
}
}
/* ==========================================================================
Hero Tweaks
========================================================================== */
.cta-button {
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
/* -------------------------------------------------------------------------
Mobile Responsiveness & Interaction Adjustments
On touch devices where hover interactions are not available, disable
hover-driven lifts and shadows on cards. Instead, the cards remain
static when tapped. This improves usability on mobile and prevents
content from jumping unexpectedly.
*/
@media (hover: none) and (pointer: coarse) {
.service-card:hover,
#how-we-work .work-step:hover,
#how-we-work .process-card:hover,
.why-card.highlight:hover,
.why-card.blurred:hover {
transform: none !important;
box-shadow: inherit !important;
}
}
/* Hide the "Doing It Yourself" card on small screens to simplify the
comparison. The last blurred why-card corresponds to that card. */
@media (max-width: 768px) {
#why .why-card.blurred:last-of-type {
display: none;
}
}
/* Compress the amplitude of the decorative waves on mobile devices to
better match the desktop appearance. Scaling the Y-axis reduces the
height of the peaks and troughs without altering width. */
@media (max-width: 768px) {
.waves {
transform: scaleY(0.6);
transform-origin: bottom;
}
.contact-waves {
transform: scaleY(0.6);
transform-origin: bottom;
}
}
/* Typewriter effect for hero lines */
.type-line {
display: inline-block;
overflow: hidden;
white-space: nowrap;
/* Caret is applied to the final line only */
line-height: 1.2;
}
/*
* Brand gradient for hero typewriter lines
*
* Assign a gradient to each line of the hero headline so that the typed
* text reflects the site’s colour palette. The background-clip property
* ensures the gradient only applies to the text itself, while the
* colour is set to transparent so the gradient shines through.
*/
/* Removed gradient-on-entire-line; only .gradient-word stays */
.line1 {
/* First line types without a caret */
border-right: none;
animation: typing1 2.2s steps(24, end) 0.2s forwards;
}
.line2 {
/* Second line types without a caret */
border-right: none;
animation: typing2 2.5s steps(26, end) 2.5s forwards;
}
.line3 {
/* Final line types and retains caret */
border-right: 2px solid currentColor;
animation: typing3 2s steps(15, end) 5s forwards, blink-caret 0.75s step-end infinite 5s;
}
@keyframes typing1 {
from { width: 0; }
to { width: 100%; }
}
@keyframes typing2 {
from { width: 0; }
to { width: 100%; }
}
@keyframes typing3 {
from { width: 0; }
to { width: 100%; }
}
@keyframes blink-caret {
0%, 100% { border-color: currentColor; }
50% { border-color: transparent; }
}
/* ==========================================================================
Work Steps (How We Work) Section
========================================================================== */
.work-steps {
display: flex;
justify-content: space-between;
gap: 40px;
position: relative;
margin-top: 60px;
flex-wrap: wrap;
}
/* Horizontal connecting line for desktop */
.work-steps::before {
content: '';
position: absolute;
top: 50%;
left: 5%;
right: 5%;
/* Hide the original straight connecting line. A wavy, animated line is
now inserted via SVG in the markup. Set the pseudo-element's
background and dimensions to zero so it no longer appears. */
height: 0;
background: none;
z-index: 1;
}
.work-step {
position: relative;
text-align: center;
flex: 1 1 250px;
max-width: 320px;
z-index: 2;
opacity: 0;
transform: translateY(40px);
transition: opacity 0.6s ease, transform 0.6s ease;
/* Remove the frosted card so only the icon has a card. The text
floats on the dark background, making the connection line and
icons feel cohesive. */
background: none;
backdrop-filter: none;
border-radius: 0;
padding: 20px 10px;
box-shadow: none;
}
.work-step.show {
opacity: 1;
transform: translateY(0);
}
.step-icon {
width: 70px;
height: 70px;
border-radius: 50%;
background: linear-gradient(135deg, #120a8f, #3498db);
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
color: #ffffff;
margin: 0 auto 20px;
}
.work-step h3 {
font-size: 1.6rem;
margin-bottom: 10px;
}
.work-step p {
font-size: 1rem;
opacity: 0.85;
max-width: 320px;
margin: 0 auto;
}
/* New wrapper to group the icon and heading together. On desktop the
header remains stacked vertically; on mobile it will be repositioned
via media queries. */
#how-we-work .work-step .step-header {
display: flex;
flex-direction: column;
align-items: center;
}
#how-we-work .work-step .step-header h3 {
margin-top: 0.5rem;
margin-bottom: 0.25rem;
}
@media (max-width: 768px) {
.work-steps {
flex-direction: column;
align-items: flex-start;
}
.work-steps::before {
left: 50%;
top: 0;
width: 2px;
height: 100%;
transform: translateX(-50%);
}
.work-step {
text-align: left;
margin-left: 40px;
margin-bottom: 50px;
}
.step-icon {
margin-left: 0;
}
}
/* ==========================================================================
Difference Section
========================================================================== */
.difference-cards {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 30px;
margin-top: 60px;
}
.difference-card {
background: rgba(255, 255, 255, 0.1);
border-radius: 16px;
padding: 40px 30px;
flex: 1 1 250px;
max-width: 320px;
text-align: center;
backdrop-filter: blur(6px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
transition: transform 0.3s ease, box-shadow 0.3s ease;
/* Place cards above the floating circles */
position: relative;
z-index: 2;
}
.difference-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5);
}
.difference-icon {
width: 70px;
height: 70px;
border-radius: 50%;
background: linear-gradient(135deg, #120a8f, #3498db);
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
color: #ffffff;
margin: 0 auto 20px;
}
.difference-card h3 {
font-size: 1.6rem;
margin-bottom: 10px;
}
.difference-card p {
font-size: 1rem;
opacity: 0.85;
}
.bg-animation-difference {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: 0;
}
.diff-circle1, .diff-circle2, .diff-circle3, .diff-circle4 {
position: absolute;
border-radius: 50%;
}
.diff-circle1 {
width: 200px;
height: 200px;
background-color: rgba(18, 10, 143, 0.3);
top: 10%;
left: 10%;
}
.diff-circle2 {
width: 150px;
height: 150px;
background-color: rgba(52, 152, 219, 0.25);
top: 40%;
right: 20%;
}
.diff-circle3 {
width: 180px;
height: 180px;
background-color: rgba(18, 10, 143, 0.25);
bottom: 15%;
left: 25%;
}
.diff-circle4 {
width: 130px;
height: 130px;
background-color: rgba(52, 152, 219, 0.2);
top: 65%;
right: 10%;
}
/* ==========================================================================
Why Choose Us tweaks
========================================================================== */
.why-card.highlight {
transform: translateY(-25px);
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2);
filter: none;
}
.why-card.blurred {
filter: blur(0.3px) brightness(0.99);
}
/* ==========================================================================
Contact Section tweaks
========================================================================== */
.contact-info {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
max-width: 500px;
height: 100%;
}
.contact-info h2 {
/* Match the primary contact heading sizing defined earlier. Clamp the
size so it scales gracefully between small and large screens. */
font-size: clamp(3.5rem, 7vw, 5.5rem);
line-height: 1.2;
margin-bottom: 20px;
font-weight: 800;
}
.footer-content {
display: flex;
justify-content: space-between; /* Spreads logo, links, and socials */
align-items: center;
flex-wrap: wrap; /* Allows wrapping on smaller screens */
gap: 20px; /* Adds spacing between elements */
}
.footer-logo {
display: flex;
flex-direction: column;
align-items: flex-start;
text-align: left;
min-width: 200px; /* Ensures logo section doesn’t collapse too much */
}
.footer-logo-image {
height: 50px;
width: auto;
margin-bottom: 10px;
}
.footer-logo p {
font-size: 0.9rem;
opacity: 0.7;
margin-bottom: 0; /* Remove extra margin for tighter layout */
}
.footer-links-wrapper {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex-grow: 1; /* Allows it to take available space and center properly */
}
.footer-links {
display: flex;
list-style: none;
gap: 20px;
margin-bottom: 10px; /* Space between links and copyright */
}
.footer-links a {
color: #ffffff;
text-decoration: none;
font-size: 1rem;
transition: color 0.3s ease;
}
.footer-links a:hover {
color: #3498db; /* Sky Blue */
}
.footer-copy {
font-size: 0.9rem;
opacity: 0.7;
margin: 0; /* Reset margin for centering */
}
.social-links {
display: flex;
align-items: center;
}
.social-links a {
color: #ffffff;
font-size: 1.2rem;
transition: color 0.3s ease;
}
.social-links a:hover {
color: #3498db; /* Sky Blue */
}
/* ==========================================================================
Animations
========================================================================== */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ========================================================================
Custom updates by Mason (September 2025)
These overrides implement requested design refinements on top of the
existing stylesheet. Append at the end so they take precedence.
======================================================================== */
/* How We Work cards: apply a frosted glass effect so the text and icons
are legible on the dark background. */
.work-step {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 16px;
padding: 30px 20px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
/* Increase the stroke width of the How We Work connecting wave.
The gradient colour is defined inline in the SVG. */
.work-wave {
stroke-width: 2;
}
/* Why Choose Us cards: de-emphasise comparison cards and highlight our
offering. Side cards are dulled and do not lift on hover. The
centre card remains raised and lifts slightly more on hover. */
.why-card.blurred {
filter: grayscale(100%) brightness(0.92);
transform: none;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
}
.why-card.blurred:hover {
transform: none;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
}
.why-card.highlight {
transform: translateY(-30px) scale(1.03);
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.25);
z-index: 1;
}
.why-card.highlight:hover {
transform: translateY(-40px) scale(1.05);
box-shadow: 0 40px 80px rgba(0, 0, 0, 0.3);
}
/* Custom bullets for why card lists. Check marks for our card, crosses for the others. */
.why-card.highlight ul li::before {
content: '\2714';
color: #0b0b3a;
}
.why-card.blurred ul li::before {
content: '\2716';
color: #9aa0b5;
}
/* FAQ section: unify the background with the contact section and wrap the list
in a card. Each FAQ item also gets a white background. */
#faq {
/* Off‑white background for the FAQ section itself. The gradient on the
card is applied via the .faq-card styles below. */
background-color: #f5f5f5;
}
/*
* FAQ card styles
*
* We apply a subtle gradient to the entire card using a ::before
* pseudo‑element. This pseudo‑element sits behind the card’s content
* thanks to isolation and z-index stacking. A border and shadow
* provide visual depth. The card also constrains its maximum width
* and centres itself within the section. Individual FAQ items
* maintain a white background to stand out against the gradient.
*/
.faq-card {
position: relative;
isolation: isolate;
border-radius: 16px;
border: 1px solid rgba(12, 15, 107, 0.18);
box-shadow: 0 12px 32px rgba(16, 42, 112, 0.14);
padding: 26px;
max-width: 900px;
margin: 0 auto;
margin-bottom: 16px !important; /* ensures spacing between each dropdown card */
}
.faq-card::before {
content: "";
position: absolute;
inset: 0;
border-radius: 16px;
background: linear-gradient(135deg,
rgba(18, 10, 143, 0.12) 0%,
rgba(43, 133, 201, 0.12) 100%);
z-index: -1;
}
/* Individual FAQ items */
.faq-item {
background-color: #ffffff;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
border-radius: 16px;
margin-bottom: 20px;
padding: 20px 25px;
margin-bottom: 16px !important;
}
/* Contact section: centre the logo, headline and subheadline on the left side
and ensure they align vertically. */
.contact-info {
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.contact-logo {
width: 100px;
height: auto;
margin-bottom: 20px;
}
/* Footer: switch to a white background with navy text and blue link accents.
Add a subtle top border. */
footer {
background: #ffffff;
color: #120a8f;
border-top: 1px solid rgba(0, 0, 0, 0.05);
}
.footer-links a {
color: #120a8f;
}
.footer-links a:hover {
color: #3498db;
}
.footer-logo p,
.footer-copy {
color: #120a8f;
opacity: 0.8;
}
.social-links a {
color: #120a8f;
margin-left: 15px;
}
.social-links a:first-child {
margin-left: 0;
}
.social-links a:hover {
color: #3498db;
}
/* Section headings: ensure consistent sizing and spacing across the page.
Use clamp to adapt to different screen widths. */
.section-title {
font-size: clamp(2.5rem, 6vw, 3.5rem);
line-height: 1.2;
margin-bottom: 40px;
font-weight: 800;
text-align: center;
}
/* Contact heading: match the section title sizing for consistency. */
.contact-info h2 {
font-size: clamp(2.5rem, 6vw, 3.5rem);
}
/*
* Animated wavy line for the How We Work section
*
* The SVG element inserted into the markup uses the classes below. The
* wave is drawn and erased by animating the stroke-dashoffset on the path.
*/
.work-line {
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 80px;
transform: translateY(-50%);
z-index: 1;
pointer-events: none;
overflow: visible;
}
.work-wave {
stroke: #3498db;
stroke-width: 2;
fill: none;
stroke-linecap: round;
/* A large dash array ensures the entire path can be drawn */
stroke-dasharray: 800;
stroke-dashoffset: 800;
animation: work-wave-draw 6s linear infinite;
}
@keyframes work-wave-draw {
0% {
stroke-dashoffset: 800;
opacity: 0;
}
10% {
opacity: 1;
}
50% {
stroke-dashoffset: 0;
opacity: 1;
}
80% {
opacity: 1;
}
100% {
stroke-dashoffset: -800;
opacity: 0;
}
}
@keyframes float {
0% {
transform: translateY(0) rotate(0deg);
}
50% {
transform: translateY(-20px) rotate(5deg);
}
100% {
transform: translateY(0) rotate(0deg);
}
}
@keyframes waveFloat {
0% {
transform: translateY(0) rotate(0deg);
}
50% {
transform: translateY(-15px) rotate(-5deg);
}
100% {
transform: translateY(0) rotate(0deg);
}
}
/* Disable aggressive animations on mobile for performance */
@media (prefers-reduced-motion: reduce) {
.floating-circle,
.wave-group,
.contact-wave-group {
animation: none !important;
}
}
/* ==========================================================================
Media Queries
========================================================================== */
/* Large Tablets (992px and below) */
@media (max-width: 992px) {
/* Typography */
h1 {
font-size: 3rem; /* Reduced from 3.5rem */
}
h2 {
font-size: 2rem; /* Reduced from 2.5rem */
}
h3 {
font-size: 1.5rem; /* Reduced from 1.8rem */
}
h4 {
font-size: 1.2rem; /* Reduced from 1.3rem */
}
p, .section-subtitle {
font-size: 1rem; /* Reduced from 1.2rem for subtitles */
}
/* General Section Padding */
section {
padding: 80px 0; /* Reduced from 100px */
}
/* Hero Section */
.hero-content h1 {
/* Reduce the heading size further on medium screens to prevent
awkward line breaks on tablets. */
font-size: 3rem;
margin-bottom: 30px !important; /* equal gap below heading */
}
.hero-content p {
font-size: 1.1rem; /* Reduced from 1.3rem */
margin-bottom: 30px !important; /* equal gap below subheading */
}
.cta-button {
padding: 12px 25px; /* Slightly smaller button */
font-size: 1rem; /* Reduced from 1.1rem */
}
/* About Section */
.about-content {
gap: 20px; /* Reduced from 40px */
margin-bottom: 40px; /* Reduced from 80px */
}
.about-image,
.about-text-card {
min-width: 100%; /* Ensure full width on smaller screens */
}
.about-text-card {
padding: 20px; /* Reduced from 30px */
}
.fun-facts {
margin-top: 40px; /* Reduced from 80px */
}
.fun-fact-card {
width: 100%; /* Full width instead of 300px */
padding: 20px; /* Reduced from 30px */
}
.fun-fact-card i {
font-size: 2.5rem; /* Reduced from 3rem */
}
/* Process and Why Us Sections */
.process-card,
.feature-card {
width: 100%;
padding: 20px; /* Reduced from 30px */
}
.card-icon,
.feature-icon {
width: 50px; /* Reduced from 70px and 60px */
height: 50px;
}
.card-icon i,
.feature-icon i {
font-size: 1.5rem; /* Reduced from 2rem and 1.5rem */
}
/* Contact Section */
.contact-card {
padding: 30px; /* Reduced from 40px */
}
}
/* Tablets and Small Devices (768px and below) */
@media (max-width: 768px) {
/* Typography */
h1 {
font-size: 2.5rem; /* Further reduced */
}
h2 {
font-size: 1.8rem; /* Further reduced */
}
h3 {
font-size: 1.4rem;
}
h4 {
font-size: 1.1rem;
}
p, .section-subtitle {
font-size: 0.95rem;
}
/* General Section Padding */
section {
padding: 60px 0; /* Further reduced */
}
/* Navbar */
.nav-links {
position: fixed;
top: 70px;
left: -100%;
flex-direction: column;
background-color: #ffffff;
width: 100%;
text-align: center;
transition: 0.3s;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
padding: 20px 0;
}
.nav-links.active {
left: 0;
}
.nav-links li {
margin: 20px 0; /* Increased for better tap targets */
}
.nav-links a {
color: #120a8f;
font-size: 1.1rem; /* Slightly larger for readability */
}
.hamburger {
display: block;
}
/* Hero Section */
.hero-content h1 {
/* Smaller heading on small tablets and large phones */
font-size: 2.4rem;
margin-bottom: 30px !important; /* equal gap below heading */
}
.hero-content p {
font-size: 1rem;
margin-bottom: 30px !important; /* equal gap below subheading */
}
.cta-button {
padding: 10px 20px;
font-size: 0.95rem;
}
.waves {
height: 50vh; /* Reduced from 40vh to fit better */
}
/* Keep some of the floating circles visible on smaller screens. We no
longer hide all circles globally; instead, selected circles are
hidden at the top of this media query. Any remaining circles
simply stop animating (see the earlier rule). */
.floating-circle {
/* Do not hide all circles; animations are already disabled above. */
display: block;
}
/* About Section */
.about-text h2 {
font-size: 1.8rem; /* Match h2 size */
}
.fun-fact-card i {
font-size: 2rem;
}
/* Contact Section */
.contact-card {
padding: 25px;
}
.contact-waves {
height: 60vh; /* Adjusted */
}
/* Footer */
.footer-content {
flex-direction: column;
align-items: center;
gap: 20px;
}
.footer-logo {
position: static;
align-items: center;
text-align: center;
width: auto;
}
.footer-logo-image {
height: 40px; /* Reduced from 50px */
}
.footer-logo p {
font-size: 0.85rem;
}
.footer-links-wrapper {
width: auto;
padding-left: 0;
padding-right: 0;
}
.footer-links {
flex-direction: column;
gap: 15px;
}
.footer-links a {
font-size: 0.95rem;
}
.social-links a {
font-size: 1.1rem;
}
}
/* Mobile Devices (576px and below) */
@media (max-width: 576px) {
/* Typography */
h1 {
font-size: 2rem;
}
h2 {
font-size: 1.6rem;
}
h3 {
font-size: 1.3rem;
}
h4 {
font-size: 1rem;
}
p, .section-subtitle {
font-size: 0.9rem;
}
/* General Section Padding */
section {
padding: 50px 0;
}
/* Container */
.container {
padding: 0 15px; /* Reduced padding for smaller screens */
}
/* Hero Section */
#hero {
height: 80vh; /* Reduced height for better mobile fit */
}
.hero-content h1 {
/* Further reduce heading on very small devices */
font-size: 2rem;
margin-bottom: 30px !important; /* equal gap below heading */
}
.hero-content p {
font-size: 0.9rem;
margin-bottom: 30px !important; /* equal gap below subheading */
}
.cta-button {
padding: 8px 18px;
font-size: 0.9rem;
}
.waves {
height: 40vh;
}
/* About Section */
.about-content {
gap: 15px;
margin-bottom: 30px;
}
.about-text-card {
padding: 15px;
}
.fun-facts {
margin-top: 30px;
}
.fun-facts h3 {
font-size: 1.4rem;
}
.fun-fact-card {
padding: 15px;
}
.fun-fact-card i {
font-size: 1.8rem;
}
/* Process and Why Us Sections */
.process-card,
.feature-card {
padding: 15px;
}
.card-icon,
.feature-icon {
width: 40px;
height: 40px;
}
.card-icon i,
.feature-icon i {
font-size: 1.2rem;
}
/* Contact Section */
.contact-card {
padding: 20px;
}
label {
font-size: 0.9rem;
}
input, textarea {
padding: 10px;
}
.submit-button {
padding: 10px 20px;
font-size: 0.9rem;
}
.contact-waves {
height: 50vh;
}
}
/* Small Mobile Devices (375px and below) */
@media (max-width: 375px) {
/* Typography */
h1 {
font-size: 1.8rem;
}
h2 {
font-size: 1.4rem;
}
h3 {
font-size: 1.2rem;
}
h4 {
font-size: 0.95rem;
}
p, .section-subtitle {
font-size: 0.85rem;
}
/* General Section Padding */
section {
padding: 40px 0;
}
/* Container */
.container {
padding: 0 10px;
}
/* Hero Section */
.hero-content h1 {
/* Tiny screens need an even smaller headline */
font-size: 1.7rem;
margin-bottom: 30px !important; /* equal gap below heading */
}
.hero-content p {
font-size: 0.85rem;
margin-bottom: 30px !important; /* equal gap below subheading */
}
.cta-button {
padding: 8px 15px;
font-size: 0.85rem;
}
/* About Section */
.about-content {
gap: 10px;
margin-bottom: 20px;
}
.about-text-card {
padding: 10px;
}
.fun-facts {
margin-top: 20px;
}
.fun-facts h3 {
font-size: 1.2rem;
}
.fun-fact-card {
padding: 10px;
}
.fun-fact-card i {
font-size: 1.5rem;
}
/* Process and Why Us Sections */
.process-card,
.feature-card {
padding: 10px;
}
/* Contact Section */
.contact-card {
padding: 15px;
}
label {
font-size: 0.85rem;
}
input, textarea {
padding: 8px;
}
.submit-button {
padding: 8px 15px;
font-size: 0.85rem;
}
/* Footer */
.footer-logo-image {
height: 35px;
}
.footer-logo p {
font-size: 0.8rem;
}
.footer-links a {
font-size: 0.9rem;
}
.footer-copy {
font-size: 0.8rem;
}
}
/* The hero headline and typewriter styles are centralised above. Duplicate
declarations removed to avoid conflicts. */
/* Services: centered short gradient bar that grows on hover */
/* One-word gradient helper (single source of truth) */
.gradient-word{
background: linear-gradient(135deg, #0c0f6b 0%, #2b85c9 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
/* Services: centered short gradient bar that grows on hover */
.service-card::after{
content:"";
position:absolute;
left:50%;
transform:translateX(-50%);
bottom:14px;
height:4px;
width:30%;
border-radius:999px;
background: linear-gradient(135deg, #0c0f6b 0%, #2b85c9 100%);
transition: width .28s ease, opacity .28s ease;
opacity:.9;
pointer-events:none;
}
.service-card:hover::after{ width:92%; }
.process-card{
opacity: 0;
transform: translateY(40px);
transition: transform .3s ease, opacity .3s ease, box-shadow .3s ease;
}
.process-card.show{
opacity: 1;
transform: translateY(0);
}
/* Light variant to match Services */
.light-section{
background:#f6f8fc;
color:#1e232f;
}
.light-section .section-subtitle{ color:#5b6475; }
/* How We Work cards */
.cards-grid{
display:grid;
grid-template-columns: repeat(3, minmax(240px,1fr));
gap: 28px;
}
.process-card{
position:relative;
overflow:hidden;
background:#ffffff;
border-radius:16px;
padding:28px 24px 42px;
box-shadow: 0 10px 24px rgba(3,22,75,.08);
transition: transform .2s ease, box-shadow .2s ease;
}
.process-icon{ font-size:2rem; color:#0c0f6b; margin-bottom:14px; }
.process-card h3{ margin:8px 0 10px; color:#1e232f; }
.process-card p{ color:#4b5565; }
.process-card:hover{ transform: translateY(-4px); box-shadow: 0 16px 36px rgba(3,22,75,.12); }
/* How We Work: white background */
#how-we-work.light-section{ background:#f5f5f5; color:#1e232f; }
#how-we-work.light-section .section-subtitle{ color:#5b6475; }
/* tw-fix: keep typewriter targets hidden until JS starts */
[data-typewriter-target], .tw-output, .typewriter-target{ opacity:0; }
.typing-start [data-typewriter-target],
.typing-start .tw-output,
.typing-start .typewriter-target{ opacity:1; transition:opacity .2s ease; }
#why .section-title{ margin-bottom: clamp(4.5rem, 8vw, 6.5rem); }
#how-we-work.hww-alt{ background:#f5f5f5; }
#how-we-work.hww-alt .work-step,
#how-we-work.hww-alt .process-card{
background:#f5f5f5;
border:1px solid rgba(12,15,107,0.06);
box-shadow:0 10px 28px rgba(16,42,112,.10);
}
.why-logo{ width:52px; height:auto; display:block; margin:0 0 10px; }
#typewriter{ opacity:0; }
.typing-start #typewriter{ opacity:1; transition:opacity .2s ease; }
#why .section-title{ margin-bottom: clamp(4.5rem, 8vw, 6.5rem); }
/* hero-typing-guard */
#typewriter, .tw-output, [data-typewriter-target]{
opacity:0;
}
.typing-start #typewriter,
.typing-start .tw-output,
.typing-start [data-typewriter-target]{
opacity:1; transition: opacity .18s ease;
}
/* removed legacy why-pop hover to allow perimeter line *//* hero-guard-v3 */
#hero h1, #hero .hero-title, #hero [data-typewriter-target], #hero .tw-output{ opacity:0; }
.typing-live #hero h1, .typing-live #hero .hero-title,
.typing-live #hero [data-typewriter-target], .typing-live #hero .tw-output{ opacity:1; transition:opacity .2s ease; }
/* match other sections */
#how-we-work .work-step, #how-we-work .process-card{
background: linear-gradient(135deg, rgba(12,15,107,0.06) 0%, rgba(43,133,201,0.06) 100%);
border:1px solid rgba(12,15,107,0.08);
box-shadow:0 10px 24px rgba(16,42,112,.08);
}
#how-we-work .work-step:hover, #how-we-work .process-card:hover{
box-shadow:0 18px 40px rgba(16,42,112,.16);
}
/* diff-mobile-list */
#advantus-diff.diff-alt{ background:#f6f8fc; }
#advantus-diff .compare-grid, #advantus-diff .why-grid, #advantus-diff .diff-grid{
display:grid;
grid-template-columns: repeat(3, minmax(260px, 1fr));
gap: 28px;
}
#advantus-diff .why-card, #advantus-diff .compare-card{
border-radius:18px;
background:#ffffff;
border:1px solid rgba(12,15,107,.08);
box-shadow:0 10px 24px rgba(16,42,112,.08);
padding:28px;
}
@media (max-width: 860px){
#advantus-diff .compare-grid, #advantus-diff .why-grid, #advantus-diff .diff-grid{
grid-template-columns: 1fr;
gap: 18px;
}
#advantus-diff .why-card, #advantus-diff .compare-card{
display:grid;
grid-template-columns: auto 1fr;
align-items:start;
gap:14px;
padding:20px;
}
#advantus-diff .why-logo, #advantus-diff .why-icon{ margin:0; }
}
#advantus-diff .why-card::before, #advantus-diff .compare-card::before{
content:""; position:absolute; left:0; top:0; bottom:0; width:4px;
background:linear-gradient(180deg, #0c0f6b, #2b85c9);
opacity:.25;
}
#advantus-diff .why-card, #advantus-diff .compare-card{ position:relative; overflow:hidden; }
/* hww-gradient-cards */
#how-we-work .work-step, #how-we-work .process-card{
background: linear-gradient(135deg,
rgba(18,10,143,0.12) 0%,
rgba(43,133,201,0.12) 100%);
border:1px solid rgba(12,15,107,0.18);
box-shadow: 0 12px 32px rgba(16,42,112,.14);
color:#0f163a;
}
#how-we-work .work-step h3{ color:#0b1140; }
#how-we-work .work-step p{ color:#24324a; }
/* ICON = solid dark bg, no gradient */
#how-we-work .work-step .step-icon{
background: #0c0f6b;
color:#ffffff;
border:1px solid rgba(255,255,255,.14);
box-shadow: 0 6px 16px rgba(12,15,107,.28) inset, 0 4px 10px rgba(16,42,112,.18);
}
#how-we-work .work-step .step-icon i{
color:#ffffff;
}
#how-we-work .work-step:hover, #how-we-work .process-card:hover{
box-shadow: 0 18px 44px rgba(16,42,112,.22);
transform: translateY(-2px);
}
/* Override hww-alt white cards to show light brand gradient */
#how-we-work.hww-alt .work-step,
#how-we-work.hww-alt .process-card{
background: linear-gradient(135deg,
rgba(18,10,143,0.12) 0%,
rgba(43,133,201,0.12) 100%) !important;
border-color: rgba(12,15,107,0.18);
}
/* Why-card perimeter hover animation */
.why-card{ position:relative; overflow:visible; }
.why-card::before,
/* top/bottom from center out */
.why-card:hover::before{
background-size: 100% 2px, 100% 2px;
}
/* left/right from top to bottom */
.why-card:hover::after{
background-size: 2px 100%, 2px 100%;
}
/* bigger logo on the brand card */
.why-card
.why-logo-top{
display:block;
width: 120px;
height:auto;
margin: -4px 0 14px;
filter: drop-shadow(0 3px 8px rgba(16,42,112,.12));
}
/* Perimeter animation around why-card */
.why-card{ position:relative; overflow:visible; border-radius:18px; }
.why-card::before,
/* top & bottom lines (grow from center to edges) */
/* left & right lines (grow top to bottom) */
.why-card:hover::before{ background-size: 100% 2px, 100% 2px; }
.why-card:hover::after{ background-size: 2px 100%, 2px 100%; }
/* normalized by pathLength */
.why-card .why-outline path { /* normalized by pathLength */
stroke-dashoffset: 400;
transition: stroke-dashoffset .8s ease;
}
.why-card:hover .why-outline path{
stroke-dashoffset: 0;
}
/* Dual-direction perimeter draw with gradient stroke */
.why-card{ position:relative; border-radius:18px; overflow:visible; }
.why-card .why-outline{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.why-card .why-outline .outline{ vector-effect: non-scaling-stroke;
stroke: url(#whyGrad);
stroke-width: 2;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
}
.why-card .why-outline .o1{ stroke-dasharray: 0 400; stroke-dashoffset: 0; }
.why-card .why-outline .o2{ stroke-dasharray: 0 400; stroke-dashoffset: 200; }
@keyframes drawHalf {
from { stroke-dasharray: 0 400; }
to { stroke-dasharray: 200 200; }
}
.why-card:hover .why-outline .outline{
animation: drawHalf .85s ease forwards;
}
/* Restore the default hover animation for the first blurred card ("Other Agencies").
By removing the earlier override, the perimeter will draw when the user hovers
the card just like other comparison cards. */
/* -------------------------------------------------------------------------
Mobile refinements and overrides
------------------------------------------------------------------------- */
@media (max-width: 768px) {
/* HERO: reduce clutter by hiding the two largest floating circles on small screens */
#hero .circle1,
#hero .circle3 {
display: none;
}
/* CONTACT: Increase bottom padding so the submit button isn’t flush with the card edge */
.contact-container {
/* Override the generic padding set earlier. Define explicit top, horizontal and bottom
padding values to create breathing room below the button. */
padding: 30px 20px 50px;
padding-top: 20px !important;
padding-bottom: 20px !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* HOW WE WORK: Present each step as a full-width card with a left-aligned header
(icon + title) and right-hand description. This corrects alignment issues
where the header was spilling out of its container. */
#how-we-work .work-step,
#how-we-work .process-card {
display: flex;
flex-direction: row;
align-items: center;
width: 100%;
/* Restore a subtle gradient and border to differentiate the cards on mobile */
background: linear-gradient(135deg,
rgba(18,10,143,0.08) 0%,
rgba(43,133,201,0.08) 100%);
border: 1px solid rgba(12, 15, 107, 0.14);
border-radius: 16px;
box-shadow: 0 8px 24px rgba(16, 42, 112, 0.12);
padding: 24px;
margin-bottom: 24px;
}
#how-we-work .work-step .step-header {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
margin-right: 20px;
flex-shrink: 0;
}
#how-we-work .work-step .step-header .step-icon {
width: 54px;
height: 54px;
border-radius: 50%;
background: linear-gradient(135deg, #120a8f, #2b85c9);
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
/* Stack the heading below the icon */
margin-bottom: 8px;
margin-right: 0;
box-shadow: 0 4px 12px rgba(12, 15, 107, 0.25) inset, 0 2px 6px rgba(16, 42, 112, 0.18);
border: 1px solid rgba(255, 255, 255, 0.14);
}
#how-we-work .work-step .step-header h3 {
font-size: 1.1rem;
margin: 0;
text-align: center;
line-height: 1.2;
}
#how-we-work .work-step p {
flex: 1;
margin: 0;
font-size: 0.95rem;
line-height: 1.4;
}
/* Widen the hero section container on small screens to reduce awkward line
breaks in the headline. By removing the max-width constraint and
expanding the width, the heading can comfortably span up to three
lines instead of wrapping into many shorter lines. */
#hero .container {
width: 95%;
max-width: none;
}
/* Centre the work cards and constrain their width on small screens. */
#how-we-work .work-steps {
flex-direction: column;
align-items: center;
justify-content: center;
}
#how-we-work .work-step,
#how-we-work .process-card {
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
/* Add a subtle vertical divider between the header and body of each work
card on mobile. We draw this line on the header itself using a
pseudo‑element so that it remains consistent regardless of the heading
length. The line does not span the full height of the card for
a refined look. */
#how-we-work .work-step .step-header {
position: relative;
}
#how-we-work .work-step .step-header::after {
content: '';
position: absolute;
right: -12px;
top: 20%;
bottom: 20%;
width: 1px;
background: rgba(12, 15, 107, 0.2);
}
}
/* Compact, space-efficient Difference list */
/* subtle left accent that grows on open */
/* when open, body reveals and we square up slightly */
/* Accent ring around capsule head */
/* Open indicator */
/* Tighter spacing when open so body aligns */
@media (max-width: 720px){
/* Reduce bottom margin of FAQ heading on small screens. Gradient and
card styling are defined globally above. */
#faq > .container > .section-title {
margin-bottom: 16px;
}
/* End of mobile-specific overrides */
}
/* Ensure FAQ section creates a stacking context so background sits behind but remains visible */
#faq { position: relative; z-index: 0; }
/* === Mobile tune-up: How We Work spacing === */
@media (max-width: 768px) {
/* Give the cards breathing room on mobile only */
#how-we-work .work-step,
#how-we-work .process-card {
padding: 14px 18px; /* was 0; increases inner padding */
margin-bottom: 28px;
border-radius: 16px; /* ensure rounded feel if card bg visible */
}
/* Widen the left column (icon + title) so text isn't cramped */
#how-we-work .work-step .step-header {
width: 92px; /* was 64px */
margin-right: 20px; /* was 16px */
}
/* Keep the divider line aligned given wider header */
#how-we-work .work-step .step-header::after {
right: -16px; /* was -12px */
}
/* Improve paragraph readability and spacing from the edge */
#how-we-work .work-step p {
line-height: 1.55; /* was 1.4 */
}
}
/* ===== Contact layout refinement ===== */
#contact .contact-container {
/* more breathing room left/right */
max-width: 1200px;
margin: 0 auto;
padding: 80px 32px;
display: grid;
grid-template-columns: 30% 70%; /* give the form more room */
gap: 56px;
align-items: start;
padding-top: 20px !important;
padding-bottom: 20px !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* Make the left heading big but not cramped */
#contact .contact-info h1 {
font-size: clamp(44px, 7.2vw, 104px);
line-height: 0.92;
letter-spacing: -0.02em;
margin: 0 0 16px 0;
}
#contact .contact-info p {
font-size: 20px;
line-height: 1.45;
color: #6c6966;
}
/* One field per line */
#contact .field,
#contact .form-block { margin-bottom: 22px; }
#contact .field label,
#contact .block-label { font-size: 14px; color: #4b4846; margin-bottom: 8px; }
/* Underline inputs to match your style */
#contact input[type="text"],
#contact input[type="email"],
#contact input[type="url"],
#contact input[type="tel"],
#contact textarea {
width: 100%;
background: transparent;
border: none;
border-bottom: 2px solid #ddd3c6;
padding: 10px 2px;
font-size: 18px;
outline: none;
}
#contact input:focus,
#contact textarea:focus { border-bottom-color: #000; }
/* +1 prefix box */
#contact .input-prefix {
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
column-gap: 10px;
}
#contact .input-prefix .prefix {
display: inline-block;
padding: 8px 12px;
border: 2px solid #ddd3c6;
border-radius: 8px;
background: #fff;
font-weight: 600;
color: #333;
}
/* Pill radios – off-white idle, blue gradient selected */
#contact .pill-group { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; }
#contact .pill { position: relative; }
#contact .pill input {
position: absolute; inset: 0; opacity: 0; cursor: pointer;
}
#contact .pill span {
display: inline-block;
padding: 10px 16px;
border: 2px solid #e3dbcf;
border-radius: 999px;
font-weight: 600;
background: #f3efe9; /* your site off-white */
color: #1a1a1a;
transition: all .15s ease;
}
#contact .pill input:checked + span {
background: linear-gradient(45deg, #120a8f, #3498db); /* your gradient */
color: #fff;
border-color: transparent;
box-shadow: 0 4px 14px rgba(18, 10, 143, 0.25);
}
/* Submit button spacing polish */
#contact .submit-button { margin-top: 6px; }
/* Mobile stacking */
@media (max-width: 980px) {
#contact .contact-container {
grid-template-columns: 1fr;
gap: 28px;
padding: 64px 20px;
padding-top: 20px !important;
padding-bottom: 20px !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
}
/* Contact Form Floating Fields */
.floating-field {
margin-bottom: 1.5rem;
}
.floating-field input,
.floating-field textarea {
width: 100%;
padding: 1rem;
font-size: 1rem;
border: none;
border-bottom: 2px solid #3498db;
background-color: transparent;
color: #fff;
outline: none;
transition: border-color 0.3s;
}
.floating-field input::placeholder,
.floating-field textarea::placeholder {
color: #ccc;
opacity: 0.6;
}
.floating-field input:focus,
.floating-field textarea:focus {
border-bottom-color: #120a8f;
}
.radio-group {
display: flex;
gap: 1rem;
margin-bottom: 1.5rem;
}
.radio-group-label {
font-weight: 600;
margin-bottom: 0.5rem;
color: #fff;
}
.submit-btn-container {
margin-top: 2rem;
}
.form-submit-button {
background-color: #120a8f;
color: #fff;
padding: 1rem 2rem;
border: none;
font-size: 1rem;
border-radius: 2rem;
cursor: pointer;
transition: background-color 0.3s;
}
.form-submit-button:hover {
background-color: #3498db;
}
/* === CONTACT LAYOUT TUNING === */
#contact .contact-container {
display: grid;
grid-template-columns: 1.25fr 1fr; /* give left column more space */
gap: 56px;
padding-left: 56px;
padding-right: 56px;
padding-top: 20px !important;
padding-bottom: 20px !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
#contact .contact-info,
#contact .contact-form-container {
padding: 0; /* normalize internal padding so both sides match */
margin: 0;
padding-top: 10px !important;
padding-bottom: 10px !important;
gap: 10px !important;
}
@media (max-width: 900px){
#contact .contact-container {
grid-template-columns: 1fr;
gap: 32px;
padding-left: 24px;
padding-right: 24px;
padding-top: 20px !important;
padding-bottom: 20px !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
}
/* === FORM COLORS & TYPO === */
#contact .floating-field input,
#contact .floating-field textarea{
color: #000; /* typed text black */
border-bottom: 2px solid #3498db; /* underline blue */
background: transparent;
}
#contact .floating-field input::placeholder,
#contact .floating-field textarea::placeholder{
color: rgba(0,0,0,.55); /* placeholder dark grey */
}
#contact .radio-group-label{
color: #000;
}
/* === PILL TOGGLE BUTTONS === */
.choice-group{
display: flex;
gap: 12px;
flex-wrap: wrap;
margin: 10px 0 24px;
}
.pill input{
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.pill span{
display: inline-block;
padding: 10px 16px;
border-radius: 999px;
border: 1px solid #000;
font-weight: 600;
color: #000;
user-select: none;
transition: transform .06s ease, background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.pill input:focus + span{
outline: 2px solid #3498db;
outline-offset: 2px;
}
.pill input:checked + span{
background: #000;
color: #fff;
border-color: #000;
box-shadow: 0 0 0 2px rgba(0,0,0,0.05) inset;
}
/* Hover */
.pill span:hover{
transform: translateY(-1px);
}
/* Submit button colors to match brand */
#contact .form-submit-button{
background:#000;
color:#fff;
}
#contact .form-submit-button:hover{
background:#120a8f;
}
/* === Minimal Contact Overrides (keep original design intact) === */
/* 60/40 layout only */
section#contact .contact-container {
grid-template-columns: 2fr 3fr !important; /* 40% / 60% */
padding-top: 20px !important;
padding-bottom: 20px !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* Keep pill size/layout exactly the same; just hide dark corners on selection */
section#contact .pill input:checked + span{
/* preserve original background set elsewhere */
border: 1px solid transparent !important; /* keep same thickness to avoid size shift */
box-shadow: none !important;
background-clip: padding-box !important;
-webkit-background-clip: padding-box !important;
}
/* Keep pills in a row (do not change if already correct) */
/* (No changes to display/gap here) */
/* Submit button: same style as existing, just match field width */
section#contact .form-submit-button{
width: 100% !important;
display: block !important;
}
/* === End minimal overrides === */
/* ===== Final polish: submit gradient, pill stability, bigger logo ===== */
/* 1) Submit button uses brand gradient by default */
section#contact .form-submit-button{
background: linear-gradient(90deg, #120a8f, #3498db) !important;
color: #fff !important;
border: none !important;
}
section#contact .form-submit-button:hover{
filter: brightness(1.03);
}
/* 2) Pill buttons: prevent vertical jiggle on Yes/No
- keep identical box model in both states
- remove translateY on hover/checked to avoid movement */
section#contact .pill span{
box-sizing: border-box;
padding: 10px 16px !important;
border-width: 1px !important;
}
section#contact .pill span:hover{
transform: none !important;
}
section#contact .pill input:checked + span{
border-width: 1px !important; /* same width as default */
border-color: transparent !important; /* hide corners but keep size */
box-shadow: none !important;
background-clip: padding-box !important;
-webkit-background-clip: padding-box !important;
transform: none !important; /* no vertical nudge */
}
/* 3) Bigger logo in contact card */
section#contact .contact-logo img{
max-width: 220px !important; /* increase as needed */
width: 220px !important;
height: auto !important;
}
@media (max-width: 900px){
section#contact .contact-logo img{
width: 180px !important;
}
}
/* ===== End polish ===== */
/* Ensure base contact heading text is black (gradient spans still override) */
section#contact .contact-info h1{
color:#000 !important;
}
/* Hero spacing adjustments */
#hero .hero-content h1 { margin-bottom: 18px !important;
margin-bottom: 30px !important; /* equal gap below heading */
}
#hero .hero-content .subheading,
#hero .hero-content .hero-subheading,
#hero .hero-content p.hero-subtitle{
margin-top: 0 !important;
margin-bottom: 22px !important;
}
#hero .hero-content .cta-button { margin-top: 6px !important;
margin-top: 0 !important; /* ensure spacing above button isn't doubled */
}
/* Lottie sizing for service cards */
.service-card .how-media{
width: 100%;
max-width: 520px; /* keeps similar width to text block on large screens */
margin: 0 auto 16px; /* center */
aspect-ratio: 4 / 3; /* adjust if your Lotties are taller/wider */
border-radius: 16px;
overflow: hidden;
}
.service-card .how-media lottie-player{
width: 100%;
height: 100%;
}
/* Ensure cards align nicely */
.services-cards{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 24px;
}
/* Footer social icon sizing */
Zpx; height:32px; display:inline-block;
}
/* Footer tagline styling */
footer .footer-tag{
font-size: 1.25rem; /* ~20px */
font-weight: 800;
margin: 10px 0 6px;
}
footer .footer-subtag{
font-size: 1rem;
opacity: 0.9;
margin: 0 0 10px;
}
/* === Footer tuning (2025-11-02): keep original layout, center nav, push headline left, enlarge icons === */
.footer-content{
align-items: flex-start; /* better vertical alignment with multi-line headline */
}
.footer-logo{
flex: 0 1 420px; /* don't let the headline hog the middle */
margin-right: auto; /* push it hard left */
max-width: 520px; /* safety cap for very wide screens */
}
.footer-tag{
line-height: 1.15;
max-width: 28ch; /* wrap to ~2 lines like the reference */
word-wrap: break-word;
}
.footer-subtag{
max-width: 34ch;
}
/* Keep the links wrapper truly centered between left + right columns */
.footer-links-wrapper{
flex: 1 1 auto; /* take remaining space */
align-items: center; /* already centered, reiterate for clarity */
text-align: center;
}
/* Make the social icons larger and keep on the far right */
.social-links{
margin-left: auto; /* pin to right edge of the row */
gap: 14px;
}
.social-links img{
width: 32px !important;
height: 32px !important;
display: block;
}
@media (max-width: 700px){
.footer-content{
justify-content: center;
align-items: center;
}
.footer-logo, .footer-links-wrapper, .social-links{
margin-right: 0;
margin-left: 0;
}
.social-links{
order: 3;
}
}
/* === End footer tuning === */
/* === Footer tuning v2 (exact center for nav/copyright) === */
.footer-content{ position: relative; }
/* Absolutely center the links/copyright wrapper in the viewport */
.footer-links-wrapper{
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 0; /* keep same row */
}
/* Keep spacing below the absolute block by reserving its height via padding */
.footer-content{ padding-top: 0.5rem; padding-bottom: 0.5rem; }
/* Prevent headline from overlapping center content on very small widths */
@media (max-width: 900px){
.footer-links-wrapper{
position: static;
transform: none;
}
}
/* Utility to keep two words together */
.nowrap{ white-space: nowrap; }
/* === End v2 === */
/* === Footer tuning v3 (vertically center nav/copyright with logo block) === */
.footer-content{
align-items: center; /* middle align all three columns */
min-height: 120px; /* ensure enough height for vertical centering */
}
.footer-links-wrapper{
top: 50%;
transform: translate(-50%, -50%); /* center both horizontally & vertically */
}
@media (max-width: 900px){
.footer-content{ align-items: center; }
.footer-links-wrapper{ position: static; transform: none; }
}
/* === End v3 === */
/* Footer heading color + size tweak */
footer .footer-tag{
color:#000; /* all black base */
font-size: 1.1rem; /* slightly smaller than before */
font-weight: 800;
}
footer .footer-tag .gradient-text{ font-weight: 900; } /* make "Real" pop */
/* Make the Why card logo match other icons (~2rem ≈ 32px) */
.why-logo-top{ width: 32px !important; height:auto; margin: 0 0 14px; }
/* Hero: gradient utility for typed target spans */
.hero-head .gradient-word, .hero-head .gradient-text{
background: linear-gradient(45deg, #120a8f, #3498db);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
font-weight: 900;
}
/* Hero spacing tuning (2025-11-03) */
/* Increase bottom and top margins for extra breathing room */
.hero-head { margin-bottom: 2.5rem; }
.hero-sub { margin-top: 2.5rem; margin-bottom: 4rem; }
.cta-button{ margin-top: 1.5rem; }
@media (min-width: 900px){
/* On desktop the extra spacing remains roughly the same. */
.hero-head { margin-bottom: 2.5rem; }
.hero-sub { margin-top: 2.5rem; margin-bottom: 4rem; }
.cta-button{ margin-top: 1.5rem; }
}
/* Hero: fade-in (replaces typewriter) */
.fade-in {
opacity: 0;
animation: fadeIn 0.6s ease forwards;
}
/* Keyframe for simple fade-in */
@keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
/* Footer: force all text/links to black */
footer .footer-links a { color:#000 !important; }
footer .footer-links a:hover { color:#000 !important; opacity:0.8; }
footer .footer-copy { color:#000 !important; opacity:0.8; }
footer .footer-col h6,
footer .footer-nav-col h6 { color:#000 !important; }
footer { color:#000; } /* default text color inside footer */
/* Hero headline sizing and spacing:
Explicit line breaks are used in the markup, so we drop the narrow width
constraint and rely on a wider max-width. The clamp ensures the font scales
smoothly across viewports. */
.hero-head{
/* Smaller font size and wider max-width to keep the entire first phrase
together on large screens and still fit on three lines total. */
/* Reduce the maximum font size further and expand the maximum width
so that the headline consistently fits on three lines across
desktop and mobile. The clamp ensures a smooth scale between
narrow and wide screens. */
/* Further reduce the size to prevent the headline from feeling
overwhelming. The max value ensures it stays under roughly 1.5rem
on large screens. */
/* Reduce the maximum size a bit further so the headline isn't so
overwhelming. */
/* Further reduce the maximum font size so the hero headline does not
dominate the viewport. On large screens it will cap at 1.3rem. */
font-size: clamp(1.0rem, 1.6vw, 1.3rem);
line-height: 1.15;
/* Expand the width to allow more words per line and avoid wrapping
"Guaranteed" onto a fourth line. */
max-width: 75ch;
margin-left: auto;
margin-right: auto;
}
/* Ensure fade-in sequence starts immediately for the headline,
then triggers the subheading and CTA with short delays. */
.hero-head.fade-in{ animation-delay: 0s !important; }
.hero-sub{ animation-delay: 0.5s !important; }
.hero-content .cta-button { animation-delay: 1.0s !important;
margin-top: 0 !important; /* ensure spacing above button isn't doubled */
}
/* Override legacy typewriter styles so hero text is never hidden */
#hero h1, #hero .hero-title, #hero [data-typewriter-target], #hero .tw-output {
opacity: 1 !important;
}
[data-typewriter-target], .tw-output, .typewriter-target{
opacity: 1 !important;
}
/* On very narrow screens allow hero headline segments to wrap naturally */
@media (max-width: 600px){
.hero-head .nowrap{
white-space: normal;
}
}
/* =====================================================================
Hero heading final override
=====================================================================
Target the hero heading within the hero section specifically. This
increases specificity beyond the base `.hero-head` rule, ensuring the
following values are honoured even if earlier declarations differ. The
clamp bounds are tuned so the headline spans exactly three lines without
overwhelming the viewer.
*/
#hero .hero-head{
/* Moderately enlarge the hero headline. This clamp lets the text
scale smoothly from 2.4rem on the smallest screens up to 4rem on
large monitors, with a 4vw mid-point to maintain proportional
sizing across common laptop widths. The reduced max-width helps
keep the forced line breaks (
) effective so the headline
remains on three lines. */
font-size: clamp(2.4rem, 4vw, 4rem);
max-width: 60ch;
line-height: 1.15;
}
/*
* Additional spacing adjustments for the hero section
* These override earlier margin settings to provide more breathing
* room between the headline, subheading and call‑to‑action. By
* increasing the bottom margin on the headline and the top margin on
* the subheading, we create a clear separation between the three
* elements. Adjust the values here to tune the spacing.
*/
#hero .hero-head{
margin-bottom: 3rem !important;
}
#hero .hero-sub{
margin-top: 2.5rem !important;
margin-bottom: 3.5rem !important;
}
#hero .hero-content .cta-button {
margin-top: 2.5rem !important;
margin-top: 0 !important; /* ensure spacing above button isn't doubled */
}
/* === Dark gray heading overrides (fix) === */
#hero .hero-head, #hero .solid-black { color: #333333 !important; }
section#contact .contact-info h1,
section#contact .contact-info .solid-black { color: #333333 !important; }
footer .footer-tag { color: #333333 !important; }
/* === Hero CTA width tweak === */
#hero .cta-button {
padding-left: 42px !important;
padding-right: 42px !important;
min-width: 240px; /* ensures a wider visual without breaking layout */
}
/* === Footer heading weight tweak === */
footer .footer-tag,
footer .footer-tag .solid-black,
footer .footer-tag .gradient-text {
font-weight: 500 !important;
}
/* ===================== Mobile-specific layout & spacing fixes ===================== */
@media (max-width: 768px){
/* Stack contact section (logo/heading/subhead) above the form */
.contact-container{
display: block !important;
grid-template-columns: 1fr !important;
}
.contact-info,
.contact-form-container{
max-width: 100% !important;
width: 100% !important;
}
/* Center-align the content on mobile */
.contact-info{
text-align: center !important;
align-items: center !important;
margin-bottom: 16px;
}
.contact-info h1,
.contact-info p{ text-align: center !important; }
.contact-logo{ margin: 0 auto 12px !important; }
.contact-form-container{ margin: 0 auto !important; }
/* Reduce excess whitespace above the footer */
#contact{ padding-bottom: 32px !important; }
.contact-waves{ height: 40% !important; transform: scaleY(0.45) !important; }
/* Footer: tighten vertical spacing on small screens */
footer { padding: 18px 0 !important; }
.footer-content{ gap: 12px !important; }
.footer-links{ margin-bottom: 6px !important; }
}