/* Start custom CSS for html, class: .elementor-element-d70f795 *//* =========================================================
MMB TECHNOLOGIES
TRANSFORMATION DIGITALE & AUTOMATISATION
PREMIUM DESIGN
========================================================= */
.mmb-transformation {
--mmb-blue: #213666;
--mmb-sky: #17a3de;
--mmb-black: #111111;
--mmb-white: #ffffff;
--mmb-light: #f7fafc;
position: relative;
width: 100%;
padding: 100px 20px;
overflow: hidden;
background:
radial-gradient(
circle at 5% 5%,
rgba(23,163,222,.08),
transparent 28%
),
radial-gradient(
circle at 95% 35%,
rgba(33,54,102,.07),
transparent 30%
),
#ffffff;
font-family:
Arial,
Helvetica,
sans-serif;
color:
var(--mmb-black);
}
/* =========================================================
RESET
========================================================= */
.mmb-transformation *,
.mmb-transformation *::before,
.mmb-transformation *::after {
box-sizing:
border-box;
}
.mmb-transformation h1,
.mmb-transformation h2,
.mmb-transformation h3,
.mmb-transformation h4,
.mmb-transformation p,
.mmb-transformation ul {
margin-top:
0;
}
.mmb-transformation a {
text-decoration:
none;
}
/* =========================================================
CONTAINER
========================================================= */
.mmbt-container {
position:
relative;
z-index:
2;
width:
100%;
max-width:
1240px;
margin:
0 auto;
}
/* =========================================================
HERO
========================================================= */
.mmbt-hero {
max-width:
1000px;
margin:
0 auto 110px;
text-align:
center;
}
.mmbt-hero-badge {
display:
inline-flex;
align-items:
center;
gap:
10px;
padding:
9px 18px;
margin-bottom:
28px;
border:
1px solid
rgba(23,163,222,.22);
border-radius:
50px;
background:
rgba(23,163,222,.06);
color:
var(--mmb-blue);
font-size:
13px;
font-weight:
700;
letter-spacing:
.4px;
}
.mmbt-hero-badge span {
width:
8px;
height:
8px;
border-radius:
50%;
background:
var(--mmb-sky);
box-shadow:
0 0 0 6px
rgba(23,163,222,.10);
animation:
mmbtPulse 2s infinite;
}
@keyframes mmbtPulse {
0% {
box-shadow:
0 0 0 0
rgba(23,163,222,.35);
}
70% {
box-shadow:
0 0 0 8px
rgba(23,163,222,0);
}
100% {
box-shadow:
0 0 0 0
rgba(23,163,222,0);
}
}
/* =========================================================
HERO TITLE
========================================================= */
.mmbt-hero h1 {
margin-bottom:
32px;
color:
var(--mmb-blue);
font-size:
clamp(38px,5vw,64px);
line-height:
1.08;
font-weight:
800;
letter-spacing:
-2px;
}
.mmbt-hero h1 strong {
display:
block;
background:
linear-gradient(
90deg,
var(--mmb-blue),
var(--mmb-sky)
);
-webkit-background-clip:
text;
-webkit-text-fill-color:
transparent;
background-clip:
text;
}
.mmbt-hero p {
max-width:
930px;
margin:
0 auto 20px;
color:
var(--mmb-black);
font-size:
17px;
line-height:
1.85;
}
.mmbt-hero b,
.mmbt-transformation b {
color:
var(--mmb-blue);
}
/* =========================================================
SECTION
========================================================= */
.mmbt-section {
margin-bottom:
120px;
}
.mmbt-section-heading {
margin-bottom:
55px;
}
.mmbt-section-heading.center {
text-align:
center;
}
.mmbt-label {
display:
inline-block;
margin-bottom:
16px;
color:
var(--mmb-sky);
font-size:
13px;
font-weight:
800;
text-transform:
uppercase;
letter-spacing:
1.5px;
}
.mmbt-section-heading h2 {
max-width:
850px;
margin:
0;
color:
var(--mmb-blue);
font-size:
clamp(32px,4vw,50px);
line-height:
1.15;
font-weight:
800;
letter-spacing:
-1.3px;
}
.mmbt-section-heading.center h2 {
margin:
0 auto;
}
.mmbt-section-heading h2 span {
background:
linear-gradient(
90deg,
var(--mmb-blue),
var(--mmb-sky)
);
-webkit-background-clip:
text;
-webkit-text-fill-color:
transparent;
background-clip:
text;
}
/* =========================================================
APPROACH
========================================================= */
.mmbt-approach {
display:
grid;
grid-template-columns:
.85fr 1.15fr;
gap:
80px;
align-items:
center;
}
.mmbt-approach .mmbt-section-heading {
margin:
0;
}
.mmbt-text-content p {
color:
var(--mmb-black);
font-size:
17px;
line-height:
1.85;
margin-bottom:
18px;
}
.mmbt-objective {
display:
flex;
gap:
18px;
align-items:
center;
margin-top:
35px;
padding:
25px;
border-left:
4px solid
var(--mmb-sky);
border-radius:
0 18px 18px 0;
background:
linear-gradient(
90deg,
rgba(23,163,222,.08),
rgba(33,54,102,.03)
);
}
.mmbt-objective-icon {
width:
48px;
height:
48px;
flex-shrink:
0;
display:
flex;
align-items:
center;
justify-content:
center;
border-radius:
14px;
background:
linear-gradient(
135deg,
var(--mmb-blue),
var(--mmb-sky)
);
color:
#ffffff;
font-size:
22px;
font-weight:
800;
}
.mmbt-objective small {
display:
block;
margin-bottom:
7px;
color:
#555;
}
.mmbt-objective strong {
display:
block;
color:
var(--mmb-blue);
line-height:
1.6;
}
/* =========================================================
INTRO TEXT
========================================================= */
.mmbt-intro-text {
max-width:
850px;
margin:
-20px auto 45px;
text-align:
center;
}
.mmbt-intro-text p {
color:
#333;
line-height:
1.8;
}
/* =========================================================
SOLUTIONS
========================================================= */
.mmbt-solutions {
display:
grid;
grid-template-columns:
repeat(2,1fr);
gap:
25px;
}
.mmbt-solution {
position:
relative;
padding:
35px;
background:
rgba(255,255,255,.92);
border:
1px solid
rgba(33,54,102,.09);
border-radius:
25px;
box-shadow:
0 15px 45px
rgba(33,54,102,.06);
overflow:
hidden;
transition:
transform .4s ease,
box-shadow .4s ease,
border-color .4s ease;
}
.mmbt-solution::before {
content:
"";
position:
absolute;
top:
0;
left:
0;
width:
100%;
height:
4px;
background:
linear-gradient(
90deg,
var(--mmb-blue),
var(--mmb-sky)
);
transform:
scaleX(0);
transform-origin:
left;
transition:
transform .4s ease;
}
.mmbt-solution:hover {
transform:
translateY(-8px);
box-shadow:
0 25px 60px
rgba(33,54,102,.12);
border-color:
rgba(23,163,222,.25);
}
.mmbt-solution:hover::before {
transform:
scaleX(1);
}
.mmbt-solution-number {
position:
absolute;
top:
20px;
right:
25px;
color:
rgba(33,54,102,.07);
font-size:
50px;
font-weight:
900;
}
.mmbt-solution-icon {
width:
62px;
height:
62px;
display:
flex;
align-items:
center;
justify-content:
center;
margin-bottom:
25px;
border-radius:
18px;
background:
linear-gradient(
135deg,
rgba(33,54,102,.09),
rgba(23,163,222,.12)
);
font-size:
29px;
transition:
transform .4s ease,
background .4s ease;
}
.mmbt-solution:hover .mmbt-solution-icon {
transform:
scale(1.08)
rotate(-4deg);
background:
linear-gradient(
135deg,
var(--mmb-blue),
var(--mmb-sky)
);
}
.mmbt-solution h3 {
position:
relative;
color:
var(--mmb-blue);
font-size:
24px;
line-height:
1.3;
margin-bottom:
18px;
}
.mmbt-solution p {
color:
#222;
font-size:
16px;
line-height:
1.75;
margin-bottom:
18px;
}
.mmbt-solution h4 {
margin:
25px 0 15px;
color:
var(--mmb-blue);
font-size:
15px;
}
.mmbt-solution ul {
padding:
0;
margin:
0;
list-style:
none;
}
.mmbt-solution li {
position:
relative;
padding:
9px 0 9px 27px;
color:
#333;
font-size:
15px;
line-height:
1.5;
border-bottom:
1px solid
rgba(33,54,102,.06);
}
.mmbt-solution li::before {
content:
"✓";
position:
absolute;
left:
0;
top:
8px;
color:
var(--mmb-sky);
font-weight:
800;
}
.mmbt-highlight {
margin-top:
25px;
padding:
18px;
border-radius:
15px;
background:
rgba(23,163,222,.07);
color:
#222;
font-size:
14px;
line-height:
1.7;
}
.mmbt-workior {
margin-top:
25px;
padding:
22px;
border-radius:
18px;
background:
linear-gradient(
135deg,
#213666,
#17a3de
);
color:
#ffffff;
}
.mmbt-workior strong {
color:
#ffffff;
font-size:
21px;
}
.mmbt-workior p {
margin:
10px 0 0;
color:
#ffffff;
}
.mmbt-workior b {
color:
#ffffff;
}
/* =========================================================
TIMELINE
========================================================= */
.mmbt-timeline {
position:
relative;
display:
grid;
grid-template-columns:
repeat(4,1fr);
gap:
25px;
}
.mmbt-timeline::before {
content:
"";
position:
absolute;
top:
35px;
left:
8%;
width:
84%;
height:
2px;
background:
linear-gradient(
90deg,
var(--mmb-blue),
var(--mmb-sky)
);
opacity:
.25;
}
.mmbt-step {
position:
relative;
z-index:
2;
}
.mmbt-step-number {
width:
70px;
height:
70px;
display:
flex;
align-items:
center;
justify-content:
center;
margin:
0 auto 25px;
border:
5px solid
#ffffff;
border-radius:
50%;
background:
linear-gradient(
135deg,
var(--mmb-blue),
var(--mmb-sky)
);
color:
#ffffff;
font-size:
18px;
font-weight:
800;
box-shadow:
0 10px 30px
rgba(33,54,102,.18);
}
.mmbt-step-content {
padding:
25px;
min-height:
200px;
text-align:
center;
background:
#ffffff;
border:
1px solid
rgba(33,54,102,.08);
border-radius:
20px;
box-shadow:
0 12px 35px
rgba(33,54,102,.06);
}
.mmbt-step-content h3 {
color:
var(--mmb-blue);
font-size:
21px;
margin-bottom:
14px;
}
.mmbt-step-content p {
color:
#333;
font-size:
15px;
line-height:
1.7;
}
/* =========================================================
BENEFITS
========================================================= */
.mmbt-benefits {
display:
grid;
grid-template-columns:
repeat(3,1fr);
gap:
22px;
}
.mmbt-benefit {
padding:
30px;
border:
1px solid
rgba(33,54,102,.08);
border-radius:
22px;
background:
#ffffff;
box-shadow:
0 12px 35px
rgba(33,54,102,.05);
transition:
transform .35s ease,
box-shadow .35s ease;
}
.mmbt-benefit:hover {
transform:
translateY(-7px);
box-shadow:
0 22px 50px
rgba(33,54,102,.11);
}
.mmbt-benefit-icon {
width:
55px;
height:
55px;
display:
flex;
align-items:
center;
justify-content:
center;
margin-bottom:
22px;
border-radius:
16px;
background:
rgba(23,163,222,.09);
font-size:
26px;
}
.mmbt-benefit h3 {
color:
var(--mmb-blue);
font-size:
20px;
margin-bottom:
12px;
}
.mmbt-benefit p {
color:
#333;
font-size:
15px;
line-height:
1.7;
margin:
0;
}
/* =========================================================
WHY MMB
========================================================= */
.mmbt-why-grid {
display:
grid;
grid-template-columns:
repeat(3,1fr);
gap:
25px;
}
.mmbt-why-card {
position:
relative;
padding:
35px;
border-radius:
24px;
background:
linear-gradient(
145deg,
#f8fbfd,
#ffffff
);
border:
1px solid
rgba(33,54,102,.08);
overflow:
hidden;
}
.mmbt-why-number {
margin-bottom:
25px;
color:
rgba(23,163,222,.15);
font-size:
55px;
line-height:
1;
font-weight:
900;
}
.mmbt-why-card h3 {
color:
var(--mmb-blue);
font-size:
22px;
line-height:
1.35;
margin-bottom:
18px;
}
.mmbt-why-card p {
color:
#333;
font-size:
15px;
line-height:
1.75;
}
/* =========================================================
CTA
========================================================= */
.mmbt-cta {
position:
relative;
padding:
85px 40px;
border-radius:
35px;
overflow:
hidden;
text-align:
center;
background:
linear-gradient(
135deg,
#213666,
#18294f
);
box-shadow:
0 30px 80px
rgba(33,54,102,.20);
}
.mmbt-cta-glow {
position:
absolute;
width:
450px;
height:
450px;
right:
-180px;
top:
-220px;
border-radius:
50%;
background:
rgba(23,163,222,.22);
filter:
blur(5px);
}
.mmbt-cta-content {
position:
relative;
z-index:
2;
max-width:
850px;
margin:
0 auto;
}
.mmbt-label-light {
color:
#6fd1f7;
}
.mmbt-cta h2 {
margin-bottom:
25px;
color:
#ffffff;
font-size:
clamp(34px,4vw,52px);
line-height:
1.15;
}
.mmbt-cta p {
color:
rgba(255,255,255,.86);
font-size:
17px;
line-height:
1.8;
}
.mmbt-cta p b {
color:
#ffffff;
}
.mmbt-cta-divider {
width:
60px;
height:
3px;
margin:
35px auto;
border-radius:
10px;
background:
var(--mmb-sky);
}
.mmbt-cta h3 {
margin-bottom:
10px;
color:
#ffffff;
font-size:
25px;
}
.mmbt-cta-slogan {
display:
block;
margin-bottom:
30px;
color:
#6fd1f7;
font-size:
18px;
}
.mmbt-cta-button {
display:
inline-flex;
align-items:
center;
justify-content:
center;
gap:
12px;
padding:
16px 27px;
border-radius:
50px;
background:
#ffffff;
color:
var(--mmb-blue) !important;
font-size:
15px;
font-weight:
800;
box-shadow:
0 12px 30px
rgba(0,0,0,.15);
transition:
transform .35s ease,
box-shadow .35s ease;
}
.mmbt-cta-button svg {
width:
20px;
height:
20px;
fill:
var(--mmb-blue);
transition:
transform .3s ease;
}
.mmbt-cta-button:hover {
transform:
translateY(-4px);
box-shadow:
0 18px 40px
rgba(0,0,0,.22);
}
.mmbt-cta-button:hover svg {
transform:
translateX(4px);
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 1050px) {
.mmbt-approach {
grid-template-columns:
1fr;
gap:
40px;
}
.mmbt-timeline {
grid-template-columns:
repeat(2,1fr);
}
.mmbt-timeline::before {
display:
none;
}
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 800px) {
.mmb-transformation {
padding:
80px 18px;
}
.mmbt-solutions {
grid-template-columns:
1fr;
}
.mmbt-benefits {
grid-template-columns:
repeat(2,1fr);
}
.mmbt-why-grid {
grid-template-columns:
1fr;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 600px) {
.mmb-transformation {
padding:
65px 14px;
}
.mmbt-hero {
margin-bottom:
75px;
}
.mmbt-hero h1 {
font-size:
36px;
letter-spacing:
-1px;
}
.mmbt-hero p {
font-size:
15.5px;
line-height:
1.75;
}
.mmbt-section {
margin-bottom:
80px;
}
.mmbt-section-heading h2 {
font-size:
32px;
}
.mmbt-approach {
gap:
25px;
}
.mmbt-text-content p {
font-size:
15.5px;
}
.mmbt-objective {
align-items:
flex-start;
padding:
20px;
}
.mmbt-solutions {
gap:
18px;
}
.mmbt-solution {
padding:
28px 22px;
}
.mmbt-solution h3 {
font-size:
21px;
}
.mmbt-timeline {
grid-template-columns:
1fr;
gap:
20px;
}
.mmbt-step-content {
min-height:
auto;
}
.mmbt-benefits {
grid-template-columns:
1fr;
}
.mmbt-cta {
padding:
60px 22px;
border-radius:
25px;
}
.mmbt-cta h2 {
font-size:
34px;
}
.mmbt-cta p {
font-size:
15.5px;
}
.mmbt-cta-button {
width:
100%;
}
}/* End custom CSS */