/* Start custom CSS for html, class: .elementor-element-72b5e79 *//* =========================================================
MMB TECHNOLOGIES
CRÉATION DE SITES WEB & SOLUTIONS DIGITALES
PREMIUM DESIGN
========================================================= */
.mmb-web-solutions {
--mmbws-blue: #213666;
--mmbws-sky: #17a3de;
--mmbws-black: #111111;
--mmbws-white: #ffffff;
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(--mmbws-black);
}
/* =========================================================
RESET
========================================================= */
.mmb-web-solutions *,
.mmb-web-solutions *::before,
.mmb-web-solutions *::after {
box-sizing:
border-box;
}
.mmb-web-solutions h1,
.mmb-web-solutions h2,
.mmb-web-solutions h3,
.mmb-web-solutions h4,
.mmb-web-solutions p {
margin-top:
0;
}
.mmb-web-solutions b {
color:
var(--mmbws-blue);
}
/* =========================================================
CONTAINER
========================================================= */
.mmbws-container {
position:
relative;
z-index:
2;
max-width:
1240px;
width:
100%;
margin:
auto;
}
/* =========================================================
HERO
========================================================= */
.mmbws-hero {
max-width:
1000px;
margin:
0 auto 120px;
text-align:
center;
}
.mmbws-badge {
display:
inline-flex;
align-items:
center;
gap:
10px;
padding:
9px 18px;
margin-bottom:
30px;
border:
1px solid
rgba(23,163,222,.25);
border-radius:
50px;
background:
rgba(23,163,222,.06);
color:
var(--mmbws-blue);
font-size:
13px;
font-weight:
700;
letter-spacing:
.4px;
}
.mmbws-badge span {
width:
8px;
height:
8px;
border-radius:
50%;
background:
var(--mmbws-sky);
box-shadow:
0 0 0 6px
rgba(23,163,222,.10);
}
.mmbws-hero h1 {
margin-bottom:
25px;
color:
var(--mmbws-blue);
font-size:
clamp(40px,5vw,65px);
line-height:
1.08;
letter-spacing:
-2px;
font-weight:
800;
}
.mmbws-hero h1 strong {
display:
block;
background:
linear-gradient(
90deg,
var(--mmbws-blue),
var(--mmbws-sky)
);
-webkit-background-clip:
text;
-webkit-text-fill-color:
transparent;
background-clip:
text;
}
.mmbws-hero-line {
width:
80px;
height:
4px;
margin:
0 auto 28px;
border-radius:
10px;
background:
linear-gradient(
90deg,
var(--mmbws-blue),
var(--mmbws-sky)
);
}
.mmbws-hero h2 {
margin-bottom:
28px;
color:
var(--mmbws-blue);
font-size:
clamp(25px,3vw,36px);
line-height:
1.3;
}
.mmbws-hero p {
max-width:
920px;
margin:
0 auto 20px;
color:
var(--mmbws-black);
font-size:
17px;
line-height:
1.85;
}
/* =========================================================
SECTION
========================================================= */
.mmbws-section {
margin-bottom:
120px;
}
.mmbws-heading {
margin-bottom:
55px;
}
.mmbws-heading.center {
text-align:
center;
}
.mmbws-label {
display:
inline-block;
margin-bottom:
15px;
color:
var(--mmbws-sky);
font-size:
13px;
font-weight:
800;
text-transform:
uppercase;
letter-spacing:
1.5px;
}
.mmbws-heading h2,
.mmbws-experience-text h2 {
margin:
0;
color:
var(--mmbws-blue);
font-size:
clamp(32px,4vw,50px);
line-height:
1.15;
font-weight:
800;
letter-spacing:
-1.2px;
}
.mmbws-heading h2 span,
.mmbws-experience-text h2 span {
background:
linear-gradient(
90deg,
var(--mmbws-blue),
var(--mmbws-sky)
);
-webkit-background-clip:
text;
-webkit-text-fill-color:
transparent;
background-clip:
text;
}
/* =========================================================
BUSINESS
========================================================= */
.mmbws-business-content {
display:
grid;
grid-template-columns:
1fr 1fr;
gap:
80px;
align-items:
center;
}
.mmbws-business-text p {
color:
#222;
font-size:
17px;
line-height:
1.85;
margin-bottom:
20px;
}
/* =========================================================
VISUAL
========================================================= */
.mmbws-business-visual {
position:
relative;
min-height:
360px;
display:
flex;
align-items:
center;
justify-content:
center;
}
.mmbws-orbit {
position:
absolute;
border:
1px solid
rgba(23,163,222,.22);
border-radius:
50%;
}
.orbit-one {
width:
260px;
height:
260px;
animation:
mmbwsRotate 15s linear infinite;
}
.orbit-two {
width:
360px;
height:
360px;
border-color:
rgba(33,54,102,.12);
animation:
mmbwsRotateReverse 20s linear infinite;
}
@keyframes mmbwsRotate {
from {
transform:
rotate(0deg);
}
to {
transform:
rotate(360deg);
}
}
@keyframes mmbwsRotateReverse {
from {
transform:
rotate(360deg);
}
to {
transform:
rotate(0deg);
}
}
.mmbws-visual-center {
position:
relative;
z-index:
3;
width:
155px;
height:
155px;
display:
flex;
flex-direction:
column;
align-items:
center;
justify-content:
center;
border-radius:
50%;
background:
linear-gradient(
135deg,
var(--mmbws-blue),
var(--mmbws-sky)
);
color:
#ffffff;
box-shadow:
0 25px 60px
rgba(33,54,102,.25);
}
.mmbws-visual-center span {
font-size:
20px;
font-weight:
800;
letter-spacing:
2px;
}
.mmbws-visual-center strong {
font-size:
25px;
}
/* =========================================================
SOLUTIONS
========================================================= */
.mmbws-solutions {
display:
grid;
grid-template-columns:
repeat(2,1fr);
gap:
25px;
}
.mmbws-card {
position:
relative;
padding:
35px;
border:
1px solid
rgba(33,54,102,.09);
border-radius:
25px;
background:
rgba(255,255,255,.95);
box-shadow:
0 15px 45px
rgba(33,54,102,.06);
overflow:
hidden;
transition:
transform .4s ease,
box-shadow .4s ease,
border-color .4s ease;
}
.mmbws-card::before {
content:
"";
position:
absolute;
top:
0;
left:
0;
width:
100%;
height:
4px;
background:
linear-gradient(
90deg,
var(--mmbws-blue),
var(--mmbws-sky)
);
transform:
scaleX(0);
transform-origin:
left;
transition:
transform .4s ease;
}
.mmbws-card:hover {
transform:
translateY(-8px);
border-color:
rgba(23,163,222,.25);
box-shadow:
0 25px 60px
rgba(33,54,102,.13);
}
.mmbws-card:hover::before {
transform:
scaleX(1);
}
.mmbws-card-number {
position:
absolute;
right:
25px;
top:
18px;
color:
rgba(33,54,102,.06);
font-size:
52px;
font-weight:
900;
}
.mmbws-card-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,.08),
rgba(23,163,222,.12)
);
font-size:
29px;
transition:
transform .4s ease,
background .4s ease;
}
.mmbws-card:hover .mmbws-card-icon {
transform:
scale(1.08)
rotate(-4deg);
background:
linear-gradient(
135deg,
var(--mmbws-blue),
var(--mmbws-sky)
);
}
.mmbws-card h3 {
position:
relative;
color:
var(--mmbws-blue);
font-size:
23px;
line-height:
1.35;
margin-bottom:
18px;
}
.mmbws-card p {
color:
#222;
font-size:
15.5px;
line-height:
1.75;
margin:
0;
}
.mmbws-card-arrow {
margin-top:
25px;
color:
var(--mmbws-sky);
font-size:
24px;
font-weight:
800;
transition:
transform .3s ease;
}
.mmbws-card:hover .mmbws-card-arrow {
transform:
translateX(7px);
}
.mmbws-card-featured {
background:
linear-gradient(
145deg,
#f3f9fc,
#ffffff
);
}
/* =========================================================
EXPERIENCE
========================================================= */
.mmbws-experience {
padding:
70px;
border-radius:
35px;
background:
linear-gradient(
135deg,
#f6fafc,
#ffffff
);
border:
1px solid
rgba(33,54,102,.08);
}
.mmbws-experience-grid {
display:
grid;
grid-template-columns:
.9fr 1.1fr;
gap:
90px;
align-items:
center;
}
.mmbws-experience-text p {
color:
#222;
font-size:
16px;
line-height:
1.8;
margin-bottom:
18px;
}
.mmbws-experience-text h2 {
margin-bottom:
28px;
}
/* DEVICE */
.mmbws-experience-visual {
display:
flex;
justify-content:
center;
}
.mmbws-device {
width:
330px;
min-height:
330px;
padding:
14px;
border-radius:
25px;
background:
#ffffff;
border:
1px solid
rgba(33,54,102,.12);
box-shadow:
0 30px 70px
rgba(33,54,102,.15);
transform:
perspective(1000px)
rotateY(-8deg)
rotateX(3deg);
transition:
transform .5s ease;
}
.mmbws-device:hover {
transform:
perspective(1000px)
rotateY(0deg)
rotateX(0deg)
translateY(-8px);
}
.mmbws-device-top {
display:
flex;
gap:
6px;
padding:
8px;
}
.mmbws-device-top span {
width:
7px;
height:
7px;
border-radius:
50%;
background:
var(--mmbws-blue);
opacity:
.4;
}
.mmbws-device-content {
padding:
25px;
}
.mmbws-ui-line {
width:
80%;
height:
9px;
margin-bottom:
13px;
border-radius:
10px;
background:
#e9eef5;
}
.mmbws-ui-line.large {
width:
95%;
height:
18px;
background:
linear-gradient(
90deg,
var(--mmbws-blue),
var(--mmbws-sky)
);
}
.mmbws-ui-line.short {
width:
55%;
}
.mmbws-ui-cards {
display:
grid;
grid-template-columns:
repeat(3,1fr);
gap:
10px;
margin-top:
35px;
}
.mmbws-ui-cards span {
height:
90px;
border-radius:
12px;
background:
linear-gradient(
145deg,
rgba(33,54,102,.09),
rgba(23,163,222,.12)
);
}
/* =========================================================
TECHNOLOGIES
========================================================= */
.mmbws-heading.center > p {
max-width:
750px;
margin:
22px auto 0;
color:
#333;
font-size:
16px;
line-height:
1.7;
}
.mmbws-tech-grid {
display:
grid;
grid-template-columns:
repeat(3,1fr);
gap:
18px;
}
.mmbws-tech-item {
position:
relative;
min-height:
170px;
padding:
28px;
border-radius:
20px;
background:
#ffffff;
border:
1px solid
rgba(33,54,102,.08);
box-shadow:
0 10px 30px
rgba(33,54,102,.05);
overflow:
hidden;
transition:
transform .35s ease,
box-shadow .35s ease;
}
.mmbws-tech-item:hover {
transform:
translateY(-5px);
box-shadow:
0 20px 45px
rgba(33,54,102,.10);
}
.mmbws-tech-item > span {
display:
block;
margin-bottom:
15px;
color:
var(--mmbws-sky);
font-size:
12px;
font-weight:
800;
}
.mmbws-tech-item strong {
display:
block;
margin-bottom:
10px;
color:
var(--mmbws-blue);
font-size:
18px;
line-height:
1.4;
}
.mmbws-tech-item p {
margin:
0;
color:
#444;
font-size:
14px;
line-height:
1.6;
}
.mmbws-tech-wide {
grid-column:
span 3;
min-height:
auto;
text-align:
center;
}
/* =========================================================
PROCESS
========================================================= */
.mmbws-process {
padding:
80px 50px;
border-radius:
35px;
background:
#f7fafc;
}
.mmbws-process-grid {
position:
relative;
display:
grid;
grid-template-columns:
repeat(4,1fr);
gap:
20px;
}
.mmbws-process-grid::before {
content:
"";
position:
absolute;
top:
35px;
left:
8%;
width:
84%;
height:
2px;
background:
linear-gradient(
90deg,
var(--mmbws-blue),
var(--mmbws-sky)
);
opacity:
.2;
}
.mmbws-process-item {
position:
relative;
z-index:
2;
text-align:
center;
}
.mmbws-process-number {
width:
70px;
height:
70px;
display:
flex;
align-items:
center;
justify-content:
center;
margin:
0 auto 25px;
border:
5px solid
#f7fafc;
border-radius:
50%;
background:
linear-gradient(
135deg,
var(--mmbws-blue),
var(--mmbws-sky)
);
color:
#ffffff;
font-size:
18px;
font-weight:
800;
box-shadow:
0 10px 25px
rgba(33,54,102,.18);
}
.mmbws-process-item h3 {
color:
var(--mmbws-blue);
font-size:
20px;
margin-bottom:
14px;
}
.mmbws-process-item p {
color:
#333;
font-size:
14.5px;
line-height:
1.7;
}
/* =========================================================
VALUES
========================================================= */
.mmbws-values {
display:
grid;
grid-template-columns:
repeat(4,1fr);
gap:
20px;
}
.mmbws-value {
padding:
32px 25px;
text-align:
center;
border:
1px solid
rgba(33,54,102,.08);
border-radius:
23px;
background:
#ffffff;
box-shadow:
0 12px 35px
rgba(33,54,102,.05);
transition:
transform .35s ease,
box-shadow .35s ease;
}
.mmbws-value:hover {
transform:
translateY(-7px);
box-shadow:
0 22px 50px
rgba(33,54,102,.11);
}
.mmbws-value-icon {
width:
58px;
height:
58px;
display:
flex;
align-items:
center;
justify-content:
center;
margin:
0 auto 20px;
border-radius:
17px;
background:
rgba(23,163,222,.09);
font-size:
27px;
}
.mmbws-value h3 {
color:
var(--mmbws-blue);
font-size:
21px;
margin-bottom:
14px;
}
.mmbws-value p {
color:
#333;
font-size:
14.5px;
line-height:
1.7;
margin:
0;
}
/* =========================================================
CTA
========================================================= */
.mmbws-cta {
position:
relative;
padding:
90px 40px;
border-radius:
35px;
overflow:
hidden;
text-align:
center;
background:
linear-gradient(
135deg,
#213666,
#17294e
);
box-shadow:
0 30px 80px
rgba(33,54,102,.20);
}
.mmbws-cta-circle {
position:
absolute;
width:
500px;
height:
500px;
right:
-200px;
top:
-260px;
border-radius:
50%;
background:
rgba(23,163,222,.18);
}
.mmbws-cta-content {
position:
relative;
z-index:
2;
max-width:
850px;
margin:
auto;
}
.mmbws-label-light {
color:
#6fd1f7;
}
.mmbws-cta h2 {
margin-bottom:
25px;
color:
#ffffff;
font-size:
clamp(34px,4vw,52px);
line-height:
1.15;
}
.mmbws-cta h2 strong {
display:
block;
color:
#6fd1f7;
}
.mmbws-cta p {
color:
rgba(255,255,255,.86);
font-size:
17px;
line-height:
1.8;
}
.mmbws-cta p b {
color:
#ffffff;
}
.mmbws-cta-separator {
width:
60px;
height:
3px;
margin:
35px auto;
border-radius:
10px;
background:
var(--mmbws-sky);
}
.mmbws-cta h3 {
margin-bottom:
12px;
color:
#ffffff;
font-size:
25px;
}
.mmbws-slogan {
display:
block;
margin-bottom:
30px;
color:
#6fd1f7;
font-size:
18px;
}
.mmbws-button {
display:
inline-flex;
align-items:
center;
justify-content:
center;
gap:
12px;
padding:
16px 28px;
border-radius:
50px;
background:
#ffffff;
color:
var(--mmbws-blue) !important;
font-size:
15px;
font-weight:
800;
box-shadow:
0 15px 35px
rgba(0,0,0,.18);
transition:
transform .35s ease,
box-shadow .35s ease;
}
.mmbws-button svg {
width:
20px;
height:
20px;
fill:
var(--mmbws-blue);
transition:
transform .3s ease;
}
.mmbws-button:hover {
transform:
translateY(-4px);
box-shadow:
0 20px 45px
rgba(0,0,0,.25);
}
.mmbws-button:hover svg {
transform:
translateX(5px);
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 1050px) {
.mmbws-business-content {
grid-template-columns:
1fr;
gap:
40px;
}
.mmbws-experience-grid {
grid-template-columns:
1fr;
gap:
50px;
}
.mmbws-process-grid {
grid-template-columns:
repeat(2,1fr);
}
.mmbws-process-grid::before {
display:
none;
}
.mmbws-values {
grid-template-columns:
repeat(2,1fr);
}
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 800px) {
.mmb-web-solutions {
padding:
80px 18px;
}
.mmbws-solutions {
grid-template-columns:
1fr;
}
.mmbws-tech-grid {
grid-template-columns:
repeat(2,1fr);
}
.mmbws-tech-wide {
grid-column:
span 2;
}
.mmbws-experience {
padding:
50px 30px;
}
.mmbws-process {
padding:
60px 25px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 600px) {
.mmb-web-solutions {
padding:
60px 14px;
}
.mmbws-hero {
margin-bottom:
80px;
}
.mmbws-hero h1 {
font-size:
36px;
letter-spacing:
-1px;
}
.mmbws-hero h2 {
font-size:
25px;
}
.mmbws-hero p {
font-size:
15.5px;
line-height:
1.75;
}
.mmbws-section {
margin-bottom:
80px;
}
.mmbws-heading h2,
.mmbws-experience-text h2 {
font-size:
32px;
}
.mmbws-business-visual {
min-height:
300px;
}
.orbit-two {
width:
290px;
height:
290px;
}
.orbit-one {
width:
210px;
height:
210px;
}
.mmbws-visual-center {
width:
125px;
height:
125px;
}
.mmbws-card {
padding:
28px 22px;
}
.mmbws-card h3 {
font-size:
21px;
}
.mmbws-experience {
padding:
40px 20px;
border-radius:
25px;
}
.mmbws-device {
width:
280px;
min-height:
280px;
}
.mmbws-tech-grid {
grid-template-columns:
1fr;
}
.mmbws-tech-wide {
grid-column:
auto;
}
.mmbws-process-grid {
grid-template-columns:
1fr;
}
.mmbws-values {
grid-template-columns:
1fr;
}
.mmbws-cta {
padding:
60px 20px;
border-radius:
25px;
}
.mmbws-cta h2 {
font-size:
34px;
}
.mmbws-cta p {
font-size:
15.5px;
}
.mmbws-button {
width:
100%;
}
}/* End custom CSS */