/* Start custom CSS for html, class: .elementor-element-a14e0ae *//* =========================================================
MMB TECHNOLOGIES
MARKETING DIGITAL & VISIBILITÉ
PREMIUM DESIGN
========================================================= */
.mmb-digital-marketing {
--mmbdm-blue: #213666;
--mmbdm-sky: #17a3de;
--mmbdm-black: #111111;
--mmbdm-white: #ffffff;
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% 30%,
rgba(33,54,102,.07),
transparent 30%
),
#ffffff;
font-family:
Arial,
Helvetica,
sans-serif;
color:
var(--mmbdm-black);
}
.mmb-digital-marketing *,
.mmb-digital-marketing *::before,
.mmb-digital-marketing *::after {
box-sizing: border-box;
}
.mmb-digital-marketing h1,
.mmb-digital-marketing h2,
.mmb-digital-marketing h3,
.mmb-digital-marketing h4,
.mmb-digital-marketing p {
margin-top: 0;
}
.mmb-digital-marketing b,
.mmb-digital-marketing strong {
color:
var(--mmbdm-blue);
}
/* =========================================================
CONTAINER
========================================================= */
.mmbdm-container {
max-width: 1240px;
width: 100%;
margin: auto;
position: relative;
z-index: 2;
}
/* =========================================================
HERO
========================================================= */
.mmbdm-hero {
max-width: 1000px;
margin:
0 auto 120px;
text-align: center;
}
.mmbdm-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(--mmbdm-blue);
font-size: 13px;
font-weight: 700;
letter-spacing: .4px;
}
.mmbdm-badge span {
width: 8px;
height: 8px;
border-radius: 50%;
background:
var(--mmbdm-sky);
box-shadow:
0 0 0 6px
rgba(23,163,222,.10);
}
.mmbdm-hero h1 {
margin-bottom: 25px;
color:
var(--mmbdm-blue);
font-size:
clamp(40px,5vw,65px);
line-height: 1.08;
letter-spacing: -2px;
font-weight: 800;
}
.mmbdm-hero h1 strong {
display: block;
background:
linear-gradient(
90deg,
var(--mmbdm-blue),
var(--mmbdm-sky)
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.mmbdm-line {
width: 80px;
height: 4px;
margin:
0 auto 28px;
border-radius: 10px;
background:
linear-gradient(
90deg,
var(--mmbdm-blue),
var(--mmbdm-sky)
);
}
.mmbdm-hero h2 {
margin-bottom: 28px;
color:
var(--mmbdm-blue);
font-size:
clamp(24px,3vw,36px);
line-height: 1.35;
}
.mmbdm-hero p {
max-width: 920px;
margin:
0 auto 20px;
color:
var(--mmbdm-black);
font-size: 17px;
line-height: 1.85;
}
/* =========================================================
SECTIONS
========================================================= */
.mmbdm-section {
margin-bottom: 120px;
}
.mmbdm-heading {
margin-bottom: 55px;
}
.mmbdm-heading.center {
text-align: center;
}
.mmbdm-label {
display: inline-block;
margin-bottom: 15px;
color:
var(--mmbdm-sky);
font-size: 13px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 1.5px;
}
.mmbdm-heading h2 {
margin: 0;
color:
var(--mmbdm-blue);
font-size:
clamp(32px,4vw,50px);
line-height: 1.15;
font-weight: 800;
letter-spacing: -1.2px;
}
.mmbdm-heading h2 span {
background:
linear-gradient(
90deg,
var(--mmbdm-blue),
var(--mmbdm-sky)
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.mmbdm-heading.center > p {
max-width: 750px;
margin:
22px auto 0;
color: #333;
font-size: 16px;
line-height: 1.7;
}
/* =========================================================
STRATEGY
========================================================= */
.mmbdm-strategy-grid {
display: grid;
grid-template-columns:
1.1fr .9fr;
gap: 80px;
align-items: center;
}
.mmbdm-strategy-text p {
color: #222;
font-size: 17px;
line-height: 1.85;
margin-bottom: 20px;
}
.mmbdm-objective {
display: flex;
gap: 18px;
align-items: flex-start;
padding: 25px;
margin-top: 30px;
border-radius: 20px;
background:
linear-gradient(
135deg,
rgba(33,54,102,.05),
rgba(23,163,222,.08)
);
border-left:
4px solid
var(--mmbdm-sky);
}
.mmbdm-objective-icon {
width: 45px;
height: 45px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
border-radius: 14px;
background:
linear-gradient(
135deg,
var(--mmbdm-blue),
var(--mmbdm-sky)
);
color: #ffffff;
font-size: 23px;
}
.mmbdm-objective strong {
display: block;
margin-bottom: 5px;
}
.mmbdm-objective p {
margin: 0;
font-size: 15px;
}
/* =========================================================
DIGITAL VISUAL
========================================================= */
.mmbdm-strategy-visual {
position: relative;
min-height: 380px;
display: flex;
align-items: center;
justify-content: center;
}
.mmbdm-ring {
position: absolute;
border-radius: 50%;
border:
1px solid
rgba(23,163,222,.2);
}
.ring-1 {
width: 220px;
height: 220px;
animation:
mmbdmRotate 14s linear infinite;
}
.ring-2 {
width: 310px;
height: 310px;
border-color:
rgba(33,54,102,.12);
animation:
mmbdmRotateReverse 19s linear infinite;
}
.ring-3 {
width: 380px;
height: 380px;
border-color:
rgba(23,163,222,.08);
}
@keyframes mmbdmRotate {
from {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}
@keyframes mmbdmRotateReverse {
from {
transform: rotate(360deg);
}
to {
transform: rotate(0);
}
}
.mmbdm-digital-core {
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(--mmbdm-blue),
var(--mmbdm-sky)
);
color: #ffffff;
box-shadow:
0 25px 65px
rgba(33,54,102,.25);
}
.mmbdm-digital-core span {
font-size: 17px;
font-weight: 800;
letter-spacing: 2px;
}
.mmbdm-digital-core strong {
color: #ffffff;
font-size: 24px;
}
/* =========================================================
SERVICES
========================================================= */
.mmbdm-services {
display: grid;
grid-template-columns:
repeat(2,1fr);
gap: 25px;
}
.mmbdm-service {
position: relative;
padding: 35px;
overflow: hidden;
border:
1px solid
rgba(33,54,102,.09);
border-radius: 26px;
background: #ffffff;
box-shadow:
0 15px 45px
rgba(33,54,102,.06);
transition:
transform .4s ease,
box-shadow .4s ease,
border-color .4s ease;
}
.mmbdm-service::before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 4px;
background:
linear-gradient(
90deg,
var(--mmbdm-blue),
var(--mmbdm-sky)
);
transform:
scaleX(0);
transform-origin: left;
transition:
transform .4s ease;
}
.mmbdm-service:hover {
transform:
translateY(-8px);
border-color:
rgba(23,163,222,.25);
box-shadow:
0 25px 60px
rgba(33,54,102,.13);
}
.mmbdm-service:hover::before {
transform:
scaleX(1);
}
.mmbdm-service-top {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 25px;
}
.mmbdm-service-icon {
width: 62px;
height: 62px;
display: flex;
align-items: center;
justify-content: center;
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;
}
.mmbdm-service:hover .mmbdm-service-icon {
transform:
scale(1.08)
rotate(-4deg);
background:
linear-gradient(
135deg,
var(--mmbdm-blue),
var(--mmbdm-sky)
);
}
.mmbdm-service-number {
color:
rgba(33,54,102,.08);
font-size: 50px;
font-weight: 900;
}
.mmbdm-service h3 {
margin-bottom: 18px;
color:
var(--mmbdm-blue);
font-size: 23px;
line-height: 1.35;
}
.mmbdm-service h4 {
margin:
25px 0 15px;
color:
var(--mmbdm-blue);
font-size: 15px;
}
.mmbdm-service p {
color: #222;
font-size: 15.5px;
line-height: 1.75;
}
.mmbdm-service ul {
margin:
15px 0 0;
padding-left: 20px;
}
.mmbdm-service li {
margin-bottom: 8px;
color: #333;
font-size: 14.5px;
line-height: 1.6;
}
.mmbdm-service li::marker {
color:
var(--mmbdm-sky);
}
.mmbdm-service-goal {
margin-top: 25px;
padding: 18px;
border-radius: 15px;
background:
rgba(23,163,222,.06);
color: #333;
font-size: 14px;
line-height: 1.7;
}
/* =========================================================
MEDICAL
========================================================= */
.mmbdm-medical {
margin-bottom: 120px;
padding: 75px;
border-radius: 35px;
background:
linear-gradient(
135deg,
#f5fafc,
#ffffff
);
border:
1px solid
rgba(33,54,102,.08);
}
.mmbdm-medical-grid {
display: grid;
grid-template-columns:
.8fr 1.2fr;
gap: 80px;
align-items: center;
}
.mmbdm-medical-visual {
display: flex;
align-items: center;
justify-content: center;
}
.mmbdm-medical-circle {
position: relative;
width: 300px;
height: 300px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border-radius: 50%;
background:
linear-gradient(
135deg,
var(--mmbdm-blue),
var(--mmbdm-sky)
);
color: #ffffff;
box-shadow:
0 30px 70px
rgba(33,54,102,.22);
}
.mmbdm-medical-circle::before {
content: "";
position: absolute;
inset: -20px;
border:
1px solid
rgba(23,163,222,.25);
border-radius: 50%;
}
.mmbdm-medical-circle span {
font-size: 55px;
margin-bottom: 10px;
}
.mmbdm-medical-circle strong {
color: #ffffff;
font-size: 25px;
letter-spacing: 4px;
}
.mmbdm-medical-circle small {
margin-top: 5px;
font-size: 12px;
letter-spacing: 3px;
}
.mmbdm-medical-content h2 {
margin:
0 0 25px;
color:
var(--mmbdm-blue);
font-size:
clamp(32px,4vw,48px);
line-height: 1.15;
}
.mmbdm-medical-content h2 span {
display: block;
background:
linear-gradient(
90deg,
var(--mmbdm-blue),
var(--mmbdm-sky)
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.mmbdm-medical-content p {
color: #222;
font-size: 16px;
line-height: 1.8;
}
.mmbdm-medical-content h3 {
margin:
30px 0 20px;
color:
var(--mmbdm-blue);
font-size: 20px;
}
.mmbdm-medical-list {
display: grid;
grid-template-columns:
repeat(2,1fr);
gap: 12px;
}
.mmbdm-medical-list div {
padding: 12px 15px;
border-radius: 12px;
background: #ffffff;
color: #333;
font-size: 13.5px;
line-height: 1.5;
border:
1px solid
rgba(33,54,102,.07);
}
.mmbdm-medical-list div::first-letter {
color:
var(--mmbdm-sky);
}
.mmbdm-medical-goal {
margin-top: 25px;
padding: 22px;
border-left:
4px solid
var(--mmbdm-sky);
border-radius: 0 15px 15px 0;
background:
rgba(23,163,222,.06);
color: #333;
font-size: 14px;
line-height: 1.7;
}
/* =========================================================
METHOD
========================================================= */
.mmbdm-method {
padding:
75px 50px;
border-radius: 35px;
background: #f7fafc;
}
.mmbdm-method-grid {
display: grid;
grid-template-columns:
repeat(4,1fr);
gap: 20px;
}
.mmbdm-method-item {
text-align: center;
}
.mmbdm-method-number {
width: 72px;
height: 72px;
display: flex;
align-items: center;
justify-content: center;
margin:
0 auto 25px;
border-radius: 50%;
background:
linear-gradient(
135deg,
var(--mmbdm-blue),
var(--mmbdm-sky)
);
color: #ffffff;
font-size: 18px;
font-weight: 800;
box-shadow:
0 10px 25px
rgba(33,54,102,.18);
}
.mmbdm-method-item h3 {
color:
var(--mmbdm-blue);
font-size: 20px;
margin-bottom: 14px;
}
.mmbdm-method-item p {
color: #333;
font-size: 14.5px;
line-height: 1.7;
}
/* =========================================================
RESULTS
========================================================= */
.mmbdm-results-grid {
display: grid;
grid-template-columns:
repeat(4,1fr);
gap: 18px;
}
.mmbdm-result {
min-height: 145px;
padding: 25px;
border:
1px solid
rgba(33,54,102,.08);
border-radius: 20px;
background: #ffffff;
box-shadow:
0 10px 30px
rgba(33,54,102,.05);
transition:
transform .35s ease,
box-shadow .35s ease;
}
.mmbdm-result:hover {
transform:
translateY(-6px);
box-shadow:
0 20px 45px
rgba(33,54,102,.11);
}
.mmbdm-result span {
display: block;
margin-bottom: 15px;
color:
var(--mmbdm-sky);
font-size: 12px;
font-weight: 800;
}
.mmbdm-result strong {
display: block;
color:
var(--mmbdm-blue);
font-size: 17px;
line-height: 1.45;
}
.mmbdm-results-message {
max-width: 900px;
margin:
40px auto 0;
padding: 25px;
text-align: center;
border-radius: 20px;
background:
linear-gradient(
135deg,
rgba(33,54,102,.05),
rgba(23,163,222,.08)
);
color: #333;
font-size: 16px;
line-height: 1.7;
}
.mmbdm-results-message strong {
color:
var(--mmbdm-blue);
}
/* =========================================================
VALUES
========================================================= */
.mmbdm-values {
display: grid;
grid-template-columns:
repeat(4,1fr);
gap: 20px;
}
.mmbdm-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;
}
.mmbdm-value:hover {
transform:
translateY(-7px);
box-shadow:
0 22px 50px
rgba(33,54,102,.11);
}
.mmbdm-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;
}
.mmbdm-value h3 {
color:
var(--mmbdm-blue);
font-size: 21px;
margin-bottom: 14px;
}
.mmbdm-value p {
color: #333;
font-size: 14.5px;
line-height: 1.7;
margin: 0;
}
/* =========================================================
FINAL CTA
========================================================= */
.mmbdm-final {
position: relative;
padding:
90px 40px;
overflow: hidden;
border-radius: 35px;
text-align: center;
background:
linear-gradient(
135deg,
#213666,
#17294e
);
box-shadow:
0 30px 80px
rgba(33,54,102,.20);
}
.mmbdm-final-glow {
position: absolute;
width: 550px;
height: 550px;
top: -280px;
right: -220px;
border-radius: 50%;
background:
rgba(23,163,222,.18);
}
.mmbdm-final-content {
position: relative;
z-index: 2;
max-width: 900px;
margin: auto;
}
.mmbdm-label-light {
color:
#6fd1f7;
}
.mmbdm-final h2 {
margin-bottom: 25px;
color: #ffffff;
font-size:
clamp(35px,4vw,52px);
line-height: 1.15;
}
.mmbdm-final h2 strong {
display: block;
color:
#6fd1f7;
}
.mmbdm-final p {
color:
rgba(255,255,255,.86);
font-size: 17px;
line-height: 1.8;
}
.mmbdm-final p strong {
color: #ffffff;
}
.mmbdm-final-separator {
width: 60px;
height: 3px;
margin:
35px auto;
border-radius: 10px;
background:
var(--mmbdm-sky);
}
.mmbdm-final h3 {
margin-bottom: 12px;
color: #ffffff;
font-size: 25px;
}
.mmbdm-final-slogan {
margin-bottom: 30px;
color:
#6fd1f7;
font-size: 18px;
font-weight: 700;
}
.mmbdm-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
padding:
16px 28px;
border-radius: 50px;
background: #ffffff;
color:
var(--mmbdm-blue) !important;
font-size: 15px;
font-weight: 800;
text-decoration: none !important;
box-shadow:
0 15px 35px
rgba(0,0,0,.18);
transition:
transform .35s ease,
box-shadow .35s ease;
}
.mmbdm-button svg {
width: 20px;
height: 20px;
fill:
var(--mmbdm-blue);
transition:
transform .3s ease;
}
.mmbdm-button:hover {
transform:
translateY(-4px);
box-shadow:
0 20px 45px
rgba(0,0,0,.25);
}
.mmbdm-button:hover svg {
transform:
translateX(5px);
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 1050px) {
.mmbdm-strategy-grid {
grid-template-columns: 1fr;
}
.mmbdm-medical-grid {
grid-template-columns: 1fr;
}
.mmbdm-method-grid {
grid-template-columns:
repeat(2,1fr);
}
.mmbdm-values {
grid-template-columns:
repeat(2,1fr);
}
.mmbdm-results-grid {
grid-template-columns:
repeat(2,1fr);
}
}
/* =========================================================
800 PX
========================================================= */
@media (max-width: 800px) {
.mmb-digital-marketing {
padding:
80px 18px;
}
.mmbdm-services {
grid-template-columns: 1fr;
}
.mmbdm-medical {
padding:
50px 30px;
}
.mmbdm-medical-list {
grid-template-columns: 1fr;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 600px) {
.mmb-digital-marketing {
padding:
60px 14px;
}
.mmbdm-hero {
margin-bottom:
80px;
}
.mmbdm-hero h1 {
font-size:
36px;
letter-spacing:
-1px;
}
.mmbdm-hero h2 {
font-size:
24px;
}
.mmbdm-hero p {
font-size:
15.5px;
}
.mmbdm-section {
margin-bottom:
80px;
}
.mmbdm-heading h2 {
font-size:
32px;
}
.mmbdm-strategy-visual {
min-height:
300px;
}
.ring-3 {
width:
300px;
height:
300px;
}
.ring-2 {
width:
250px;
height:
250px;
}
.ring-1 {
width:
190px;
height:
190px;
}
.mmbdm-digital-core {
width:
125px;
height:
125px;
}
.mmbdm-service {
padding:
28px 22px;
}
.mmbdm-medical {
padding:
45px 20px;
border-radius:
25px;
}
.mmbdm-medical-circle {
width:
240px;
height:
240px;
}
.mmbdm-medical-content h2 {
font-size:
32px;
}
.mmbdm-method {
padding:
55px 20px;
}
.mmbdm-method-grid {
grid-template-columns:
1fr;
}
.mmbdm-results-grid {
grid-template-columns:
1fr;
}
.mmbdm-values {
grid-template-columns:
1fr;
}
.mmbdm-final {
padding:
60px 20px;
border-radius:
25px;
}
.mmbdm-final h2 {
font-size:
34px;
}
.mmbdm-final p {
font-size:
15.5px;
}
.mmbdm-button {
width:
100%;
}
}/* End custom CSS */