/* Start custom CSS for html, class: .elementor-element-22d6170 *//* ===============================
RESET
================================= */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Inter", sans-serif;
background: #ffffff;
color: #111111;
}
/* ===============================
HERO SECTION
================================= */
.hero-section {
width: 100%;
min-height: 620px;
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
gap: 50px;
padding: 70px 6%;
overflow: hidden;
}
/* ===============================
LEFT CONTENT
================================= */
.hero-content {
max-width: 650px;
}
.eyebrow {
font-size: 11px;
font-weight: 700;
letter-spacing: 2px;
color: #584cff;
margin-bottom: 20px;
}
.hero-content h1 {
font-size: clamp(45px, 5vw, 64px);
line-height: 0.98;
letter-spacing: -3px;
font-weight: 700;
margin-bottom: 25px;
}
.hero-content h1 span {
display: block;
color: #6854ff;
}
.hero-description {
max-width: 550px;
color: #686868;
font-size: 15px;
line-height: 1.7;
margin-bottom: 28px;
}
/* ===============================
BUTTONS
================================= */
.hero-buttons {
display: flex;
gap: 10px;
margin-bottom: 35px;
}
.btn-primary,
.btn-secondary {
height: 42px;
padding: 0 22px;
border-radius: 30px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;
font-size: 13px;
text-decoration: none;
transition: all .3s ease;
}
.btn-primary {
background: #5b50f0;
color: #ffffff;
}
.btn-primary:hover {
background: #463bd8;
transform: translateY(-2px);
}
.btn-secondary {
color: #111111;
border: 1px solid #dedede;
background: #ffffff;
}
.btn-secondary:hover {
border-color: #aaa;
transform: translateY(-2px);
}
/* ===============================
SERVICES
================================= */
.service-list {
border-top: 1px solid #e7e7e7;
padding-top: 20px;
display: flex;
flex-wrap: wrap;
gap: 18px;
}
.service-list span {
position: relative;
font-size: 11px;
color: #5e5e5e;
padding-left: 10px;
}
.service-list span::before {
content: "";
width: 4px;
height: 4px;
border-radius: 50%;
background: #6756ff;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}
/* ===============================
RIGHT VISUAL
================================= */
.hero-visual {
display: flex;
justify-content: center;
align-items: center;
}
.analytics-dashboard {
width: 100%;
max-width: 570px;
height: 450px;
position: relative;
border-radius: 22px;
border: 1px solid #e5e3ec;
background:
linear-gradient(
135deg,
#ffffff 0%,
#f8f7ff 100%
);
box-shadow:
0 30px 70px rgba(55, 44, 130, 0.12);
overflow: hidden;
animation: dashboardFloat 6s ease-in-out infinite;
}
/* ===============================
GRID
================================= */
.grid-pattern {
position: absolute;
inset: 0;
opacity: .35;
background-image:
linear-gradient(
rgba(105, 85, 255, .07) 1px,
transparent 1px
),
linear-gradient(
90deg,
rgba(105, 85, 255, .07) 1px,
transparent 1px
);
background-size: 40px 40px;
mask-image: linear-gradient(
to bottom,
black,
transparent
);
}
/* ===============================
GLOW CIRCLES
================================= */
.circle-glow {
position: absolute;
border-radius: 50%;
filter: blur(2px);
opacity: .45;
animation: glowPulse 5s ease-in-out infinite;
}
.circle-one {
width: 160px;
height: 160px;
right: -40px;
top: -60px;
background: rgba(109, 90, 255, .20);
}
.circle-two {
width: 120px;
height: 120px;
left: -30px;
bottom: -40px;
background: rgba(109, 90, 255, .14);
animation-delay: 1.5s;
}
/* ===============================
METRIC CARD
================================= */
.metric-card {
position: absolute;
background: rgba(255,255,255,.88);
backdrop-filter: blur(15px);
border: 1px solid #eceaf4;
box-shadow: 0 15px 30px rgba(0,0,0,.06);
border-radius: 14px;
}
.metric-top {
width: 165px;
padding: 17px;
top: 25px;
right: 25px;
animation: cardFloat 4s ease-in-out infinite;
}
.metric-label {
font-size: 10px;
color: #737373;
margin-bottom: 6px;
}
.metric-value {
font-size: 28px;
font-weight: 700;
letter-spacing: -1px;
}
.metric-status {
margin-top: 4px;
color: #5b50f0;
font-size: 9px;
}
/* ===============================
LINE CHART
================================= */
.chart-card {
background: rgba(255,255,255,.87);
backdrop-filter: blur(15px);
border: 1px solid #ebe9f3;
box-shadow: 0 15px 35px rgba(0,0,0,.055);
border-radius: 16px;
position: absolute;
overflow: hidden;
}
.line-chart-card {
width: 330px;
height: 205px;
left: 30px;
top: 75px;
}
.chart-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 17px 18px 0;
}
.chart-title {
font-size: 12px;
font-weight: 600;
}
.chart-subtitle {
font-size: 9px;
color: #8a8a8a;
margin-top: 3px;
}
.chart-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: #6555ff;
box-shadow: 0 0 0 4px rgba(101,85,255,.12);
}
.line-chart {
width: 100%;
height: 150px;
margin-top: 7px;
}
.chart-line {
fill: none;
stroke: #6655ff;
stroke-width: 4;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: drawLine 3s ease forwards;
}
.chart-area {
fill: url(#areaGradient);
opacity: 0;
animation: areaFade 1.5s ease forwards 1.8s;
}
.chart-point {
fill: #6655ff;
animation: pointPulse 2s ease-in-out infinite;
}
/* ===============================
BAR CHART
================================= */
.bar-chart-card {
width: 260px;
height: 170px;
left: 80px;
bottom: 25px;
padding: 16px;
animation: cardFloat 5s ease-in-out infinite reverse;
}
.bar-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
}
.bar-period {
font-size: 9px;
padding: 5px 8px;
border-radius: 6px;
background: #f1efff;
color: #5e50f0;
}
.bars {
height: 105px;
display: flex;
align-items: end;
justify-content: space-between;
gap: 10px;
}
.bar-group {
height: 100%;
flex: 1;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
gap: 6px;
}
.bar {
width: 100%;
max-width: 20px;
border-radius: 5px 5px 2px 2px;
background:
linear-gradient(
to top,
#786aff,
#c7c0ff
);
transform-origin: bottom;
transform: scaleY(0);
animation: barGrow 1s cubic-bezier(.17,.67,.3,1.2) forwards;
}
.bar-1 {
height: 40%;
animation-delay: .2s;
}
.bar-2 {
height: 55%;
animation-delay: .35s;
}
.bar-3 {
height: 48%;
animation-delay: .5s;
}
.bar-4 {
height: 70%;
animation-delay: .65s;
}
.bar-5 {
height: 82%;
animation-delay: .8s;
}
.bar-6 {
height: 98%;
animation-delay: .95s;
}
.bar-label {
font-size: 7px;
color: #8f8f8f;
}
/* ===============================
DONUT
================================= */
.donut-card {
width: 150px;
height: 150px;
position: absolute;
right: 25px;
bottom: 30px;
background: rgba(255,255,255,.9);
border: 1px solid #ebe9f3;
border-radius: 16px;
box-shadow: 0 15px 35px rgba(0,0,0,.05);
display: flex;
align-items: center;
justify-content: center;
animation: donutFloat 5s ease-in-out infinite;
}
.donut {
width: 92px;
height: 92px;
border-radius: 50%;
background:
conic-gradient(
#6655ff 0deg 245deg,
#eeeaff 245deg 360deg
);
display: flex;
align-items: center;
justify-content: center;
animation: donutSpin 2s ease-out;
}
.donut-inner {
width: 66px;
height: 66px;
border-radius: 50%;
background: #ffffff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.donut-inner strong {
font-size: 17px;
}
.donut-inner span {
margin-top: 3px;
font-size: 7px;
color: #888888;
}
/* ===============================
FLOATING CARDS
================================= */
.floating-card {
position: absolute;
display: flex;
align-items: center;
gap: 9px;
padding: 10px 13px;
border-radius: 12px;
background: rgba(255,255,255,.94);
backdrop-filter: blur(12px);
border: 1px solid #ebe9f4;
box-shadow: 0 15px 35px rgba(0,0,0,.08);
}
.floating-card strong {
display: block;
font-size: 14px;
}
.floating-card span {
display: block;
font-size: 8px;
color: #888;
}
.leads-card {
top: 240px;
right: 28px;
animation: cardFloat 4.5s ease-in-out infinite;
}
.ads-card {
top: 325px;
left: 25px;
animation: cardFloat 4s ease-in-out infinite reverse;
}
.mini-icon {
width: 25px;
height: 25px;
border-radius: 8px;
background: #f0edff;
color: #5f50ff;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
}
.ads-bars {
display: flex;
align-items: end;
gap: 2px;
height: 20px;
}
.ads-bars i {
width: 4px;
background: #6555ff;
border-radius: 3px;
animation: miniBar 1.3s ease-in-out infinite alternate;
}
.ads-bars i:nth-child(1) {
height: 8px;
}
.ads-bars i:nth-child(2) {
height: 14px;
animation-delay: .2s;
}
.ads-bars i:nth-child(3) {
height: 11px;
animation-delay: .4s;
}
.ads-bars i:nth-child(4) {
height: 19px;
animation-delay: .6s;
}
/* ===============================
ANIMATIONS
================================= */
@keyframes drawLine {
to {
stroke-dashoffset: 0;
}
}
@keyframes areaFade {
to {
opacity: 1;
}
}
@keyframes barGrow {
to {
transform: scaleY(1);
}
}
@keyframes cardFloat {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-8px);
}
}
@keyframes dashboardFloat {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-7px);
}
}
@keyframes donutFloat {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-6px);
}
}
@keyframes pointPulse {
0%,
100% {
r: 6;
opacity: 1;
}
50% {
r: 9;
opacity: .7;
}
}
@keyframes donutSpin {
from {
transform: rotate(-90deg);
opacity: .4;
}
to {
transform: rotate(0);
opacity: 1;
}
}
@keyframes glowPulse {
0%,
100% {
transform: scale(1);
opacity: .35;
}
50% {
transform: scale(1.12);
opacity: .55;
}
}
@keyframes miniBar {
from {
transform: scaleY(.65);
}
to {
transform: scaleY(1);
}
}
/* ===============================
RESPONSIVE
================================= */
@media (max-width: 950px) {
.hero-section {
grid-template-columns: 1fr;
padding: 60px 7%;
}
.hero-content {
max-width: 700px;
}
.hero-visual {
width: 100%;
}
}
@media (max-width: 600px) {
.hero-section {
padding: 45px 20px;
gap: 40px;
}
.hero-content h1 {
font-size: 43px;
letter-spacing: -2px;
}
.hero-description {
font-size: 14px;
}
.hero-buttons {
flex-wrap: wrap;
}
.analytics-dashboard {
height: 390px;
transform: scale(.86);
transform-origin: center;
}
.line-chart-card {
width: 280px;
left: 15px;
}
.bar-chart-card {
width: 220px;
left: 30px;
}
.donut-card {
width: 125px;
height: 125px;
right: 15px;
}
.metric-top {
right: 15px;
}
.leads-card {
right: 15px;
}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-87a8999 *//* =================================
BUSINESS SECTION
================================= */
.business-section {
width: 100%;
padding: 95px 7%;
background: #fafaf9;
overflow: hidden;
}
.business-container {
max-width: 1050px;
margin: 0 auto;
}
/* =================================
HEADER
================================= */
.business-header {
max-width: 560px;
margin-bottom: 42px;
animation: sectionFadeUp 0.8s ease forwards;
}
.business-header h2 {
margin: 0 0 15px;
font-size: clamp(34px, 4vw, 46px);
line-height: 1.02;
letter-spacing: -2px;
font-weight: 700;
color: #111111;
}
.business-header p {
max-width: 520px;
margin: 0;
font-size: 13px;
line-height: 1.65;
color: #757575;
}
/* =================================
CARDS GRID
================================= */
.business-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
}
/* =================================
CARD
================================= */
.business-card {
position: relative;
min-height: 155px;
padding: 18px 16px 16px;
background: #ffffff;
border: 1px solid #e7e7e7;
border-radius: 13px;
box-shadow:
0 6px 20px rgba(0, 0, 0, 0.035);
overflow: hidden;
opacity: 0;
transform: translateY(25px);
animation: cardReveal 0.7s ease forwards;
transition:
transform 0.35s ease,
box-shadow 0.35s ease,
border-color 0.35s ease;
}
/* Individual animation delays */
.business-card:nth-child(1) {
animation-delay: 0.15s;
}
.business-card:nth-child(2) {
animation-delay: 0.3s;
}
.business-card:nth-child(3) {
animation-delay: 0.45s;
}
.business-card:nth-child(4) {
animation-delay: 0.6s;
}
/* =================================
CARD HOVER
================================= */
.business-card:hover {
transform: translateY(-7px);
border-color: #d8d2ff;
box-shadow:
0 18px 35px rgba(87, 72, 220, 0.11);
}
/* Purple glow at bottom */
.business-card::after {
content: "";
position: absolute;
width: 90px;
height: 90px;
right: -40px;
bottom: -45px;
border-radius: 50%;
background: rgba(101, 83, 255, 0.08);
transition:
transform 0.4s ease,
opacity 0.4s ease;
}
.business-card:hover::after {
transform: scale(1.8);
opacity: 1;
}
/* =================================
ICON
================================= */
.business-icon {
width: 21px;
height: 21px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 22px;
border-radius: 7px;
background: #efedff;
transition:
transform 0.35s ease,
background 0.35s ease;
}
.business-card:hover .business-icon {
transform: rotate(-5deg) scale(1.1);
background: #e4e0ff;
}
.business-icon svg {
width: 11px;
height: 11px;
fill: none;
stroke: #6254ed;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
/* =================================
CARD TITLE
================================= */
.business-card h3 {
margin: 0 0 8px;
font-size: 11px;
font-weight: 600;
color: #171717;
}
/* =================================
CARD DESCRIPTION
================================= */
.business-card p {
max-width: 190px;
margin: 0;
font-size: 9px;
line-height: 1.55;
color: #858585;
}
/* =================================
CARD ARROW
================================= */
.card-arrow {
position: absolute;
right: 13px;
bottom: 12px;
font-size: 13px;
color: #6254ed;
opacity: 0;
transform: translate(-5px, 5px);
transition:
opacity 0.3s ease,
transform 0.3s ease;
}
.business-card:hover .card-arrow {
opacity: 1;
transform: translate(0, 0);
}
/* =================================
ANIMATIONS
================================= */
@keyframes sectionFadeUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes cardReveal {
from {
opacity: 0;
transform: translateY(25px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* =================================
RESPONSIVE
================================= */
@media (max-width: 900px) {
.business-section {
padding: 80px 6%;
}
.business-grid {
grid-template-columns: repeat(2, 1fr);
gap: 14px;
}
.business-card {
min-height: 160px;
}
}
@media (max-width: 600px) {
.business-section {
padding: 65px 20px;
}
.business-header {
margin-bottom: 30px;
}
.business-header h2 {
font-size: 34px;
letter-spacing: -1.5px;
}
.business-header p {
font-size: 12px;
}
.business-grid {
grid-template-columns: 1fr;
gap: 12px;
}
.business-card {
min-height: 145px;
}
.business-card p {
max-width: 270px;
}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-74b1127 *//* =========================================
SERVICES SECTION
========================================= */
.services-section {
width: 100%;
padding: 85px 6%;
background: #fafaf9;
}
.services-container {
width: 100%;
max-width: 1020px;
margin: 0 auto;
}
/* =========================================
HEADER
========================================= */
.services-header {
max-width: 470px;
margin-bottom: 28px;
opacity: 0;
transform: translateY(20px);
animation: servicesFadeUp 0.8s ease forwards;
}
.services-header h2 {
margin: 0 0 8px;
color: #111111;
font-size: 34px;
line-height: 1.05;
letter-spacing: -1.6px;
font-weight: 700;
}
.services-header p {
margin: 0;
color: #787878;
font-size: 11px;
line-height: 1.55;
max-width: 440px;
}
/* =========================================
GRID
========================================= */
.services-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 10px;
}
/* First row = 3 cards */
.service-card:nth-child(1),
.service-card:nth-child(2),
.service-card:nth-child(3) {
grid-column: span 2;
}
/* Second row = 2 cards */
.service-card:nth-child(4) {
grid-column: 1 / span 2;
}
.service-card:nth-child(5) {
grid-column: 3 / span 2;
}
/* =========================================
CARD
========================================= */
.service-card {
position: relative;
min-height: 175px;
padding: 13px;
background: #ffffff;
border: 1px solid #e7e7e7;
border-radius: 11px;
box-shadow:
0 5px 16px rgba(0, 0, 0, 0.035);
overflow: hidden;
opacity: 0;
transform: translateY(24px);
animation: serviceCardReveal 0.65s ease forwards;
transition:
transform 0.3s ease,
border-color 0.3s ease,
box-shadow 0.3s ease;
}
/* =========================================
STAGGERED ANIMATION
========================================= */
.service-card:nth-child(1) {
animation-delay: 0.12s;
}
.service-card:nth-child(2) {
animation-delay: 0.22s;
}
.service-card:nth-child(3) {
animation-delay: 0.32s;
}
.service-card:nth-child(4) {
animation-delay: 0.42s;
}
.service-card:nth-child(5) {
animation-delay: 0.52s;
}
/* =========================================
HOVER
========================================= */
.service-card:hover {
transform: translateY(-5px);
border-color: #d9d4ff;
box-shadow:
0 14px 30px rgba(91, 80, 240, 0.09);
}
/* Bottom glow */
.service-card::before {
content: "";
position: absolute;
width: 90px;
height: 90px;
right: -45px;
bottom: -48px;
border-radius: 50%;
background: rgba(91, 80, 240, 0.07);
transition:
transform 0.4s ease,
opacity 0.4s ease;
}
.service-card:hover::before {
transform: scale(1.7);
opacity: 1;
}
/* =========================================
ICON
========================================= */
.service-icon {
width: 21px;
height: 21px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 16px;
border-radius: 6px;
background: #efedff;
transition:
transform 0.3s ease,
background 0.3s ease;
}
.service-card:hover .service-icon {
transform: translateY(-2px) scale(1.08);
background: #e3e0ff;
}
.service-icon svg {
width: 11px;
height: 11px;
fill: none;
stroke: #6355eb;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
/* =========================================
TITLE
========================================= */
.service-card h3 {
margin: 0 0 6px;
color: #171717;
font-size: 10px;
line-height: 1.2;
font-weight: 650;
}
/* =========================================
DESCRIPTION
========================================= */
.service-card p {
margin: 0;
color: #858585;
font-size: 8px;
line-height: 1.5;
}
/* =========================================
DIVIDER
========================================= */
.service-divider {
width: 100%;
height: 1px;
margin: 11px 0 9px;
background: #ededed;
}
/* =========================================
BULLET LIST
========================================= */
.service-card ul {
list-style: none;
margin: 0;
padding: 0;
}
.service-card li {
position: relative;
padding-left: 7px;
margin-bottom: 4px;
color: #777777;
font-size: 7px;
line-height: 1.35;
}
.service-card li::before {
content: "";
width: 2.5px;
height: 2.5px;
position: absolute;
left: 0;
top: 5px;
border-radius: 50%;
background: #6857f1;
}
/* =========================================
CTA BAR
========================================= */
.services-cta {
margin-top: 35px;
min-height: 48px;
padding: 8px 10px 8px 13px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
border: 1px solid #e5e5e5;
border-radius: 11px;
background: #ffffff;
box-shadow:
0 6px 16px rgba(0, 0, 0, 0.025);
opacity: 0;
transform: translateY(18px);
animation:
servicesFadeUp 0.7s ease forwards 0.7s;
}
.services-cta span {
color: #222222;
font-size: 8px;
font-weight: 600;
}
.services-cta a {
min-width: 75px;
height: 27px;
padding: 0 11px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
border-radius: 20px;
background: #5b50f0;
color: #ffffff;
text-decoration: none;
font-size: 7px;
font-weight: 600;
transition:
transform 0.25s ease,
background 0.25s ease;
}
.services-cta a:hover {
background: #493fd7;
transform: translateY(-1px);
}
/* =========================================
ANIMATIONS
========================================= */
@keyframes servicesFadeUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes serviceCardReveal {
from {
opacity: 0;
transform: translateY(24px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* =========================================
TABLET
========================================= */
@media (max-width: 850px) {
.services-section {
padding: 70px 5%;
}
.services-grid {
grid-template-columns: repeat(2, 1fr);
}
.service-card:nth-child(1),
.service-card:nth-child(2),
.service-card:nth-child(3),
.service-card:nth-child(4),
.service-card:nth-child(5) {
grid-column: span 1;
}
}
/* =========================================
MOBILE
========================================= */
@media (max-width: 580px) {
.services-section {
padding: 60px 20px;
}
.services-header {
margin-bottom: 24px;
}
.services-header h2 {
font-size: 31px;
letter-spacing: -1.3px;
}
.services-header p {
font-size: 10px;
}
.services-grid {
grid-template-columns: 1fr;
gap: 10px;
}
.service-card:nth-child(1),
.service-card:nth-child(2),
.service-card:nth-child(3),
.service-card:nth-child(4),
.service-card:nth-child(5) {
grid-column: span 1;
}
.service-card {
min-height: 160px;
}
.services-cta {
padding: 9px 9px 9px 12px;
}
.services-cta span {
font-size: 7px;
}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-45f389a *//* ==========================================
GROWTH JOURNEY SECTION
========================================== */
.journey-section {
position: relative;
width: 100%;
padding: 110px 7%;
background: #131313;
color: #ffffff;
overflow: hidden;
}
/* ==========================================
CONTAINER
========================================== */
.journey-container {
max-width: 1050px;
margin: 0 auto;
display: grid;
grid-template-columns: 0.9fr 1.1fr;
gap: 90px;
align-items: center;
}
/* ==========================================
LEFT CONTENT
========================================== */
.journey-content {
max-width: 470px;
opacity: 0;
transform: translateY(25px);
animation:
journeyContentReveal 0.8s ease forwards;
}
.journey-eyebrow {
margin-bottom: 20px;
color: #7768ff;
font-size: 9px;
font-weight: 700;
letter-spacing: 2px;
}
.journey-content h2 {
margin: 0 0 23px;
font-size: clamp(38px, 4vw, 52px);
line-height: 0.98;
letter-spacing: -2.5px;
font-weight: 700;
}
.journey-content h2 span {
display: block;
color: #7768ff;
}
.journey-intro {
max-width: 420px;
margin: 0;
color: #9d9d9d;
font-size: 13px;
line-height: 1.7;
}
/* ==========================================
NOTE
========================================== */
.journey-note {
display: flex;
gap: 13px;
margin-top: 30px;
max-width: 390px;
}
.note-line {
flex: 0 0 2px;
height: 48px;
background: #6757f4;
border-radius: 5px;
}
.journey-note p {
margin: 0;
color: #cccccc;
font-size: 10px;
line-height: 1.65;
}
/* ==========================================
RIGHT STEPS
========================================== */
.journey-steps {
width: 100%;
display: flex;
flex-direction: column;
}
/* ==========================================
STEP
========================================== */
.journey-step {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
opacity: 0;
transform: translateY(20px);
animation:
journeyStepReveal 0.65s ease forwards;
}
.journey-step:nth-child(1) {
animation-delay: 0.15s;
}
.journey-step:nth-child(2) {
animation-delay: 0.3s;
}
.journey-step:nth-child(3) {
animation-delay: 0.45s;
}
.journey-step:nth-child(4) {
animation-delay: 0.6s;
}
.journey-step:nth-child(5) {
animation-delay: 0.75s;
}
/* ==========================================
STEP CARD
========================================== */
.step-card {
width: 100%;
min-height: 72px;
padding: 13px 14px;
display: flex;
align-items: flex-start;
gap: 12px;
border: 1px solid #303030;
border-radius: 14px;
background: #1d1d1d;
box-shadow:
0 8px 25px rgba(0, 0, 0, 0.15);
transition:
transform 0.3s ease,
border-color 0.3s ease,
background 0.3s ease,
box-shadow 0.3s ease;
}
.step-card:hover {
transform: translateX(-5px);
border-color: #5146c7;
background: #202020;
box-shadow:
0 14px 35px rgba(78, 66, 200, 0.12);
}
/* ==========================================
NUMBER
========================================== */
.step-number {
flex: 0 0 auto;
margin-top: 1px;
color: #6757f4;
font-size: 8px;
font-weight: 700;
letter-spacing: 0.5px;
}
/* ==========================================
STEP CONTENT
========================================== */
.step-content {
min-width: 0;
}
.step-content h3 {
margin: 0 0 6px;
color: #ffffff;
font-size: 11px;
font-weight: 650;
}
.step-content p {
margin: 0;
color: #888888;
font-size: 8px;
line-height: 1.5;
}
/* ==========================================
ARROWS
========================================== */
.step-arrow {
height: 22px;
display: flex;
align-items: center;
justify-content: center;
color: #5f5f5f;
font-size: 12px;
transition:
color 0.3s ease,
transform 0.3s ease;
}
.journey-step:hover .step-arrow {
color: #7768ff;
transform: translateY(2px);
}
/* ==========================================
SUBTLE BACKGROUND GLOW
========================================== */
.journey-section::before {
content: "";
position: absolute;
width: 400px;
height: 400px;
top: -200px;
right: -100px;
border-radius: 50%;
background: rgba(104, 86, 255, 0.07);
filter: blur(70px);
pointer-events: none;
}
.journey-section::after {
content: "";
position: absolute;
width: 350px;
height: 350px;
bottom: -180px;
left: -120px;
border-radius: 50%;
background: rgba(104, 86, 255, 0.045);
filter: blur(70px);
pointer-events: none;
}
/* ==========================================
ANIMATIONS
========================================== */
@keyframes journeyContentReveal {
from {
opacity: 0;
transform:
translateY(25px);
}
to {
opacity: 1;
transform:
translateY(0);
}
}
@keyframes journeyStepReveal {
from {
opacity: 0;
transform:
translateY(20px);
}
to {
opacity: 1;
transform:
translateY(0);
}
}
/* ==========================================
RESPONSIVE - TABLET
========================================== */
@media (max-width: 850px) {
.journey-section {
padding: 85px 6%;
}
.journey-container {
grid-template-columns: 1fr;
gap: 55px;
}
.journey-content {
max-width: 600px;
}
.journey-steps {
max-width: 650px;
}
}
/* ==========================================
RESPONSIVE - MOBILE
========================================== */
@media (max-width: 580px) {
.journey-section {
padding: 70px 20px;
}
.journey-container {
gap: 40px;
}
.journey-content h2 {
font-size: 38px;
letter-spacing: -1.8px;
}
.journey-intro {
font-size: 12px;
}
.step-card {
min-height: 67px;
padding: 12px;
}
.step-content h3 {
font-size: 10px;
}
.step-content p {
font-size: 7.5px;
}
.step-number {
font-size: 7px;
}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-96a3b00 *//* =========================================
SELECTED WORK SECTION
========================================= */
.work-section {
width: 100%;
padding: 95px 6%;
background: #f8f8f7;
overflow: hidden;
}
.work-container {
width: 100%;
max-width: 1050px;
margin: 0 auto;
}
/* =========================================
HEADER
========================================= */
.work-header {
max-width: 500px;
margin-bottom: 28px;
opacity: 0;
transform: translateY(22px);
animation: workFadeUp .8s ease forwards;
}
.work-eyebrow {
margin-bottom: 8px;
color: #6656ed;
font-size: 7px;
font-weight: 700;
letter-spacing: 1.8px;
}
.work-header h2 {
margin: 0 0 9px;
color: #111111;
font-size: 30px;
line-height: 1.05;
letter-spacing: -1.4px;
font-weight: 700;
}
.work-header p {
margin: 0;
max-width: 430px;
color: #7c7c7c;
font-size: 9px;
line-height: 1.6;
}
/* =========================================
PROJECT GRID
========================================= */
.work-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
/* =========================================
PROJECT CARD
========================================= */
.work-card {
position: relative;
min-height: 245px;
padding: 14px 15px;
background: #ffffff;
border: 1px solid #e7e7e7;
border-radius: 11px;
box-shadow:
0 5px 18px rgba(0, 0, 0, .035);
overflow: hidden;
opacity: 0;
transform: translateY(25px);
animation:
workCardReveal .7s ease forwards;
transition:
transform .35s ease,
box-shadow .35s ease,
border-color .35s ease;
}
/* Stagger */
.work-card:nth-child(1) {
animation-delay: .12s;
}
.work-card:nth-child(2) {
animation-delay: .25s;
}
.work-card:nth-child(3) {
animation-delay: .38s;
}
.work-card:nth-child(4) {
animation-delay: .51s;
}
/* =========================================
CARD HOVER
========================================= */
.work-card:hover {
transform: translateY(-6px);
border-color: #d8d3ff;
box-shadow:
0 18px 35px rgba(92, 77, 224, .09);
}
/* Purple hover glow */
.work-card::after {
content: "";
position: absolute;
width: 120px;
height: 120px;
right: -65px;
bottom: -65px;
border-radius: 50%;
background: rgba(99, 83, 237, .055);
transition:
transform .45s ease,
opacity .45s ease;
}
.work-card:hover::after {
transform: scale(1.8);
opacity: 1;
}
/* =========================================
TOP LINE
========================================= */
.work-card-top {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
}
.work-category {
display: inline-flex;
align-items: center;
height: 18px;
padding: 0 7px;
border-radius: 5px;
background: #eeecff;
color: #6252e8;
font-size: 6.5px;
font-weight: 600;
}
.work-number {
color: #9a9a9a;
font-size: 7px;
font-weight: 500;
}
/* =========================================
TITLE
========================================= */
.work-card h3 {
margin: 0 0 6px;
color: #141414;
font-size: 12px;
font-weight: 700;
letter-spacing: -.2px;
}
/* =========================================
SUMMARY
========================================= */
.work-summary {
margin: 0;
color: #737373;
font-size: 7.5px;
line-height: 1.55;
max-width: 95%;
}
/* =========================================
CASE DETAILS
========================================= */
.case-details {
margin-top: 12px;
display: flex;
flex-direction: column;
gap: 5px;
}
.detail-row {
display: grid;
grid-template-columns: 50px 1fr;
gap: 6px;
align-items: start;
}
.detail-label {
color: #888888;
font-size: 6px;
font-weight: 700;
letter-spacing: .3px;
}
.detail-value {
color: #6f6f6f;
font-size: 6.5px;
line-height: 1.4;
}
/* =========================================
TAGS
========================================= */
.work-tags {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin-top: 11px;
}
.work-tags span {
padding: 3px 6px;
border: 1px solid #e4e4e4;
border-radius: 4px;
color: #777777;
background: #fafafa;
font-size: 5.8px;
transition:
background .25s ease,
color .25s ease,
border-color .25s ease;
}
.work-card:hover .work-tags span {
background: #f5f3ff;
border-color: #e1ddff;
color: #6052df;
}
/* =========================================
CASE STUDY LINK
========================================= */
.case-study-link {
position: relative;
z-index: 2;
display: inline-flex;
align-items: center;
gap: 4px;
margin-top: 12px;
color: #6252ed;
text-decoration: none;
font-size: 6.5px;
font-weight: 600;
transition:
gap .25s ease,
color .25s ease;
}
.case-study-link:hover {
gap: 7px;
color: #4134c5;
}
.case-study-link span {
font-size: 8px;
}
/* =========================================
BOTTOM CTA
========================================= */
.work-cta {
min-height: 48px;
margin-top: 32px;
padding: 7px 9px 7px 12px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 15px;
background: #ffffff;
border: 1px solid #e5e5e5;
border-radius: 10px;
box-shadow:
0 5px 16px rgba(0, 0, 0, .025);
opacity: 0;
transform: translateY(20px);
animation:
workFadeUp .7s ease forwards .7s;
}
.work-cta > span {
color: #222222;
font-size: 7.5px;
font-weight: 600;
}
.work-cta a {
height: 25px;
padding: 0 11px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
border-radius: 20px;
background: #5b50f0;
color: #ffffff;
text-decoration: none;
font-size: 6.5px;
font-weight: 600;
transition:
transform .25s ease,
background .25s ease;
}
.work-cta a:hover {
background: #493ed7;
transform: translateY(-2px);
}
/* =========================================
ANIMATIONS
========================================= */
@keyframes workFadeUp {
from {
opacity: 0;
transform:
translateY(22px);
}
to {
opacity: 1;
transform:
translateY(0);
}
}
@keyframes workCardReveal {
from {
opacity: 0;
transform:
translateY(25px);
}
to {
opacity: 1;
transform:
translateY(0);
}
}
/* =========================================
TABLET
========================================= */
@media (max-width: 800px) {
.work-section {
padding: 75px 5%;
}
.work-grid {
grid-template-columns: 1fr;
gap: 12px;
}
.work-card {
min-height: auto;
padding: 18px;
}
.work-header h2 {
font-size: 32px;
}
}
/* =========================================
MOBILE
========================================= */
@media (max-width: 560px) {
.work-section {
padding: 60px 20px;
}
.work-header h2 {
font-size: 30px;
letter-spacing: -1.2px;
}
.work-header p {
font-size: 9px;
line-height: 1.65;
}
.work-card h3 {
font-size: 13px;
}
.work-summary {
font-size: 8px;
}
.detail-row {
grid-template-columns: 55px 1fr;
}
.detail-label {
font-size: 6px;
}
.detail-value {
font-size: 7px;
}
.work-tags span {
font-size: 6px;
padding: 4px 7px;
}
.work-cta {
padding-left: 12px;
}
.work-cta > span {
font-size: 7px;
}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-4e24254 *//* ==========================================
APPROACH SECTION
========================================== */
.approach-section {
width: 100%;
background: #fafaf9;
overflow: hidden;
}
/* ==========================================
COMMON CONTAINERS
========================================== */
.approach-container,
.measurable-container {
width: 100%;
max-width: 1020px;
margin: 0 auto;
}
/* ==========================================
PART 1
========================================== */
.approach-container {
padding: 85px 6% 75px;
}
/* ==========================================
HEADER
========================================== */
.approach-header {
max-width: 500px;
margin-bottom: 26px;
opacity: 0;
transform: translateY(20px);
animation:
approachFadeUp 0.75s ease forwards;
}
.approach-eyebrow,
.measurable-eyebrow {
margin-bottom: 8px;
color: #6757ee;
font-size: 7px;
font-weight: 700;
letter-spacing: 1.8px;
}
.approach-header h2,
.measurable-header h2 {
margin: 0 0 9px;
color: #111111;
font-size: 31px;
line-height: 1.04;
letter-spacing: -1.5px;
font-weight: 700;
}
.approach-header p,
.measurable-header p {
margin: 0;
color: #777777;
font-size: 9px;
line-height: 1.6;
}
/* ==========================================
PROCESS GRID
========================================== */
.process-grid {
display: grid;
grid-template-columns:
repeat(4, 1fr);
gap: 10px;
}
/* ==========================================
PROCESS CARD
========================================== */
.process-card {
position: relative;
min-height: 112px;
padding: 13px;
display: flex;
align-items: flex-start;
gap: 8px;
background: #ffffff;
border: 1px solid #e5e4ee;
border-radius: 10px;
box-shadow:
0 5px 16px rgba(0,0,0,.025);
opacity: 0;
transform: translateY(22px);
animation:
processReveal .65s ease forwards;
transition:
transform .3s ease,
border-color .3s ease,
box-shadow .3s ease;
}
.process-card:nth-child(1) {
animation-delay: .12s;
}
.process-card:nth-child(2) {
animation-delay: .23s;
}
.process-card:nth-child(3) {
animation-delay: .34s;
}
.process-card:nth-child(4) {
animation-delay: .45s;
}
.process-card:hover {
transform: translateY(-5px);
border-color: #cfc8ff;
box-shadow:
0 14px 28px rgba(93, 79, 220, .08);
}
/* ==========================================
PROCESS NUMBER
========================================== */
.process-number {
flex: 0 0 auto;
width: 22px;
height: 22px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 6px;
background: #f0eeff;
color: #6556eb;
font-size: 6px;
font-weight: 700;
transition:
transform .3s ease,
background .3s ease;
}
.process-card:hover .process-number {
transform: scale(1.1);
background: #e4e0ff;
}
/* ==========================================
PROCESS CONTENT
========================================== */
.process-content h3 {
margin: 2px 0 6px;
color: #161616;
font-size: 9px;
font-weight: 700;
}
.process-content p {
margin: 0;
color: #858585;
font-size: 7px;
line-height: 1.5;
}
/* ==========================================
DIVIDER BETWEEN SECTIONS
========================================== */
.measurable-area {
width: 100%;
padding: 72px 6% 82px;
background: #f5f5f3;
border-top: 1px solid #eeeeec;
}
/* ==========================================
MEASURABLE HEADER
========================================== */
.measurable-header {
max-width: 450px;
margin-bottom: 25px;
opacity: 0;
transform: translateY(22px);
animation:
approachFadeUp .75s ease forwards .15s;
}
/* ==========================================
PRINCIPLES GRID
========================================== */
.principles-grid {
display: grid;
grid-template-columns:
repeat(2, 1fr);
gap: 9px;
}
/* ==========================================
PRINCIPLE CARD
========================================== */
.principle-card {
min-height: 66px;
padding: 10px 12px;
display: flex;
align-items: flex-start;
gap: 9px;
background: #ffffff;
border: 1px solid #e7e7e7;
border-radius: 9px;
box-shadow:
0 4px 13px rgba(0,0,0,.025);
opacity: 0;
transform: translateY(18px);
animation:
principleReveal .6s ease forwards;
transition:
transform .3s ease,
border-color .3s ease,
box-shadow .3s ease;
}
.principle-card:nth-child(1) {
animation-delay: .25s;
}
.principle-card:nth-child(2) {
animation-delay: .35s;
}
.principle-card:nth-child(3) {
animation-delay: .45s;
}
.principle-card:nth-child(4) {
animation-delay: .55s;
}
.principle-card:hover {
transform: translateY(-4px);
border-color: #d8d2ff;
box-shadow:
0 12px 25px rgba(93,79,220,.07);
}
/* ==========================================
PRINCIPLE ICON
========================================== */
.principle-icon {
flex: 0 0 auto;
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 6px;
background: #efedff;
transition:
transform .3s ease,
background .3s ease;
}
.principle-card:hover .principle-icon {
transform: scale(1.1);
background: #e3dfff;
}
.principle-icon svg {
width: 10px;
height: 10px;
fill: none;
stroke: #6254e9;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
/* ==========================================
PRINCIPLE TEXT
========================================== */
.principle-card h3 {
margin: 1px 0 4px;
color: #161616;
font-size: 8px;
font-weight: 700;
}
.principle-card p {
margin: 0;
color: #858585;
font-size: 6.8px;
line-height: 1.5;
}
/* ==========================================
BACKGROUND DECORATION
========================================== */
.approach-container,
.measurable-area {
position: relative;
}
/* subtle purple glow */
.approach-container::before {
content: "";
position: absolute;
width: 260px;
height: 260px;
right: -100px;
top: 40px;
border-radius: 50%;
background:
rgba(104, 87, 238, .035);
filter: blur(60px);
pointer-events: none;
}
.measurable-area::after {
content: "";
position: absolute;
width: 220px;
height: 220px;
left: -100px;
bottom: -80px;
border-radius: 50%;
background:
rgba(104, 87, 238, .025);
filter: blur(60px);
pointer-events: none;
}
/* ==========================================
ANIMATIONS
========================================== */
@keyframes approachFadeUp {
from {
opacity: 0;
transform:
translateY(20px);
}
to {
opacity: 1;
transform:
translateY(0);
}
}
@keyframes processReveal {
from {
opacity: 0;
transform:
translateY(22px);
}
to {
opacity: 1;
transform:
translateY(0);
}
}
@keyframes principleReveal {
from {
opacity: 0;
transform:
translateY(18px);
}
to {
opacity: 1;
transform:
translateY(0);
}
}
/* ==========================================
TABLET
========================================== */
@media (max-width: 820px) {
.approach-container {
padding: 70px 5%;
}
.measurable-area {
padding: 60px 5% 70px;
}
.process-grid {
grid-template-columns:
repeat(2, 1fr);
}
}
/* ==========================================
MOBILE
========================================== */
@media (max-width: 560px) {
.approach-container {
padding: 60px 20px;
}
.measurable-area {
padding: 55px 20px 65px;
}
.approach-header h2,
.measurable-header h2 {
font-size: 29px;
letter-spacing: -1.2px;
}
.approach-header p,
.measurable-header p {
font-size: 8.5px;
}
.process-grid {
grid-template-columns: 1fr;
gap: 9px;
}
.process-card {
min-height: 88px;
}
.principles-grid {
grid-template-columns: 1fr;
gap: 9px;
}
.principle-card {
min-height: 62px;
}
}/* End custom CSS */