/* Start custom CSS for html, class: .elementor-element-ded3645 *//* =========================================================
MMB TECHNOLOGIES
WORKIA - MEDECINE DU TRAVAIL
PREMIUM RESPONSIVE DESIGN
========================================================= */
/* =========================================================
VARIABLES
========================================================= */
.mmb-medecine-travail {
--mmb-blue: #213666;
--mmb-sky: #17a3de;
--mmb-black: #111111;
--mmb-white: #ffffff;
--mmb-light: #f7fafc;
position: relative;
width: 100%;
padding: 110px 20px;
overflow: hidden;
background:
radial-gradient(
circle at 5% 10%,
rgba(23, 163, 222, 0.10),
transparent 30%
),
radial-gradient(
circle at 95% 90%,
rgba(33, 54, 102, 0.10),
transparent 30%
),
#ffffff;
font-family:
Arial,
Helvetica,
sans-serif;
box-sizing: border-box;
}
/* =========================================================
RESET
========================================================= */
.mmb-medecine-travail *,
.mmb-medecine-travail *::before,
.mmb-medecine-travail *::after {
box-sizing: border-box;
}
/* =========================================================
BACKGROUND CIRCLES
========================================================= */
.mmb-medecine-travail::before {
content: "";
position: absolute;
width: 500px;
height: 500px;
right: -260px;
top: -230px;
border:
1px solid
rgba(23, 163, 222, 0.13);
border-radius: 50%;
pointer-events: none;
}
.mmb-medecine-travail::after {
content: "";
position: absolute;
width: 360px;
height: 360px;
left: -210px;
bottom: -190px;
border:
1px solid
rgba(33, 54, 102, 0.10);
border-radius: 50%;
pointer-events: none;
}
/* =========================================================
CONTAINER
========================================================= */
.mmb-container {
position: relative;
z-index: 2;
width: 100%;
max-width: 1250px;
margin:
0 auto;
}
/* =========================================================
INTRODUCTION
========================================================= */
.mmb-intro {
width: 100%;
max-width: 1000px;
margin:
0 auto 75px;
text-align: center;
}
/* =========================================================
LOGO WORKIA
========================================================= */
.workia-logo {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 38px;
animation:
workiaLogoAppear
0.9s
ease
forwards;
}
.workia-logo img {
display: block;
width: auto;
max-width: 420px;
height: auto;
object-fit: contain;
filter:
drop-shadow(
0 10px 25px
rgba(33, 54, 102, 0.10)
);
transition:
transform 0.4s ease,
filter 0.4s ease;
}
.workia-logo:hover img {
transform:
translateY(-5px)
scale(1.02);
filter:
drop-shadow(
0 18px 35px
rgba(23, 163, 222, 0.18)
);
}
/* =========================================================
LOGO ANIMATION
========================================================= */
@keyframes workiaLogoAppear {
0% {
opacity: 0;
transform:
translateY(-25px)
scale(0.94);
}
100% {
opacity: 1;
transform:
translateY(0)
scale(1);
}
}
/* =========================================================
BADGE
========================================================= */
.mmb-badge {
display: inline-flex;
align-items: center;
gap: 10px;
padding:
9px 18px;
margin-bottom: 26px;
border:
1px solid
rgba(23, 163, 222, 0.22);
border-radius: 50px;
background:
rgba(23, 163, 222, 0.06);
color:
var(--mmb-blue);
font-size: 13px;
font-weight: 700;
letter-spacing:
0.5px;
}
/* =========================================================
BADGE DOT
========================================================= */
.mmb-badge-dot {
width: 8px;
height: 8px;
flex-shrink: 0;
background:
var(--mmb-sky);
border-radius: 50%;
box-shadow:
0 0 0 5px
rgba(23, 163, 222, 0.10);
animation:
mmb-pulse
2s
infinite;
}
@keyframes mmb-pulse {
0% {
box-shadow:
0 0 0 0
rgba(23, 163, 222, 0.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);
}
}
/* =========================================================
TITLE
========================================================= */
.mmb-intro h2 {
margin:
0 auto 28px;
color:
var(--mmb-blue);
font-size:
clamp(34px, 4vw, 58px);
line-height:
1.12;
font-weight:
800;
letter-spacing:
-1.8px;
}
/* =========================================================
TITLE GRADIENT
========================================================= */
.mmb-intro h2 span {
position: relative;
background:
linear-gradient(
90deg,
var(--mmb-blue),
var(--mmb-sky)
);
-webkit-background-clip:
text;
-webkit-text-fill-color:
transparent;
background-clip:
text;
}
/* =========================================================
TITLE UNDERLINE
========================================================= */
.mmb-intro h2 span::after {
content: "";
position: absolute;
left: 0;
bottom: -7px;
width: 100%;
height: 3px;
border-radius: 10px;
background:
linear-gradient(
90deg,
var(--mmb-sky),
transparent
);
opacity:
0.55;
}
/* =========================================================
DESCRIPTION
========================================================= */
.mmb-description {
max-width: 920px;
margin:
0 auto 18px;
color:
var(--mmb-black);
font-size:
17px;
line-height:
1.85;
font-weight:
400;
}
/* =========================================================
SERVICES GRID
========================================================= */
.mmb-services {
display: grid;
grid-template-columns:
repeat(4, minmax(0, 1fr));
gap:
22px;
}
/* =========================================================
CARD
========================================================= */
.mmb-card {
position: relative;
min-height:
245px;
padding:
30px 27px;
background:
rgba(255, 255, 255, 0.92);
border:
1px solid
rgba(33, 54, 102, 0.09);
border-radius:
22px;
box-shadow:
0 12px 35px
rgba(33, 54, 102, 0.07);
overflow:
hidden;
transition:
transform 0.4s ease,
box-shadow 0.4s ease,
border-color 0.4s ease;
}
/* =========================================================
TOP LINE
========================================================= */
.mmb-card::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 0.4s ease;
}
/* =========================================================
CARD DECORATION
========================================================= */
.mmb-card::after {
content: "";
position: absolute;
width: 140px;
height: 140px;
right: -75px;
bottom: -75px;
border-radius: 50%;
background:
rgba(23, 163, 222, 0.05);
transition:
transform 0.5s ease;
}
/* =========================================================
CARD HOVER
========================================================= */
.mmb-card:hover {
transform:
translateY(-9px);
border-color:
rgba(23, 163, 222, 0.25);
box-shadow:
0 22px 55px
rgba(33, 54, 102, 0.13);
}
.mmb-card:hover::before {
transform:
scaleX(1);
}
.mmb-card:hover::after {
transform:
scale(2.2);
}
/* =========================================================
NUMBER
========================================================= */
.mmb-card-number {
position: absolute;
top: 20px;
right: 23px;
color:
rgba(33, 54, 102, 0.08);
font-size:
45px;
line-height:
1;
font-weight:
900;
transition:
color 0.3s ease,
transform 0.3s ease;
}
.mmb-card:hover .mmb-card-number {
color:
rgba(23, 163, 222, 0.12);
transform:
translateY(-4px);
}
/* =========================================================
ICON
========================================================= */
.mmb-icon {
position: relative;
z-index: 2;
width: 58px;
height: 58px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 27px;
border-radius:
16px;
background:
linear-gradient(
135deg,
rgba(33, 54, 102, 0.10),
rgba(23, 163, 222, 0.12)
);
transition:
transform 0.4s ease,
background 0.4s ease;
}
.mmb-icon svg {
width: 29px;
height: 29px;
fill:
var(--mmb-blue);
transition:
fill 0.3s ease,
transform 0.3s ease;
}
.mmb-card:hover .mmb-icon {
transform:
rotate(-4deg)
scale(1.08);
background:
linear-gradient(
135deg,
var(--mmb-blue),
var(--mmb-sky)
);
}
.mmb-card:hover .mmb-icon svg {
fill:
#ffffff;
transform:
scale(1.05);
}
/* =========================================================
CARD TITLE
========================================================= */
.mmb-card h3 {
position: relative;
z-index: 3;
margin:
0;
color:
var(--mmb-blue);
font-size:
20px;
line-height:
1.35;
font-weight:
750;
transition:
color 0.3s ease,
transform 0.3s ease;
}
.mmb-card:hover h3 {
color:
var(--mmb-sky);
transform:
translateX(3px);
}
/* =========================================================
CARD LINE
========================================================= */
.mmb-line {
width:
38px;
height:
3px;
margin-top:
20px;
border-radius:
20px;
background:
linear-gradient(
90deg,
var(--mmb-blue),
var(--mmb-sky)
);
transition:
width 0.4s ease;
}
.mmb-card:hover .mmb-line {
width:
75px;
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 1100px) {
.mmb-medecine-travail {
padding:
90px 20px;
}
.mmb-services {
grid-template-columns:
repeat(2, minmax(0, 1fr));
}
}
/* =========================================================
TABLET SMALL
========================================================= */
@media (max-width: 768px) {
.mmb-intro {
margin-bottom:
55px;
}
.workia-logo {
margin-bottom:
30px;
}
.workia-logo img {
max-width:
330px;
}
.mmb-intro h2 {
font-size:
38px;
letter-spacing:
-1px;
}
.mmb-description {
font-size:
16px;
line-height:
1.75;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 650px) {
.mmb-medecine-travail {
padding:
70px 16px;
}
.mmb-intro {
margin-bottom:
45px;
}
.workia-logo {
margin-bottom:
27px;
}
.workia-logo img {
max-width:
280px;
}
.mmb-badge {
font-size:
12px;
padding:
8px 15px;
}
.mmb-intro h2 {
font-size:
34px;
line-height:
1.15;
}
.mmb-description {
font-size:
15.5px;
line-height:
1.75;
}
.mmb-services {
grid-template-columns:
1fr;
gap:
17px;
}
.mmb-card {
min-height:
220px;
padding:
27px 23px;
}
.mmb-card h3 {
font-size:
19px;
}
}
/* =========================================================
VERY SMALL MOBILE
========================================================= */
@media (max-width: 380px) {
.mmb-medecine-travail {
padding:
60px 13px;
}
.workia-logo img {
max-width:
240px;
}
.mmb-intro h2 {
font-size:
30px;
}
.mmb-card {
padding:
25px 20px;
}
}
/* =========================================================
WORKIA - VISITER LE SITE WEB
========================================================= */
.workia-website {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
margin-top: 65px;
padding-top: 40px;
border-top:
1px solid
rgba(33, 54, 102, 0.09);
}
/* TEXTE */
.workia-website p {
margin:
0 0 20px;
color:
#111111;
font-size:
16px;
line-height:
1.6;
}
/* BOUTON */
.workia-website-button {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
padding:
15px 25px;
min-width:
220px;
border-radius:
50px;
text-decoration:
none !important;
color:
#ffffff !important;
background:
linear-gradient(
135deg,
#213666,
#17a3de
);
font-size:
15px;
font-weight:
700;
letter-spacing:
0.2px;
box-shadow:
0 10px 25px
rgba(33, 54, 102, 0.18);
overflow:
hidden;
transition:
transform 0.35s ease,
box-shadow 0.35s ease;
}
/* EFFET LUMIERE */
.workia-website-button::before {
content: "";
position: absolute;
top: 0;
left: -120%;
width: 80%;
height: 100%;
background:
linear-gradient(
90deg,
transparent,
rgba(255,255,255,0.30),
transparent
);
transform:
skewX(-20deg);
transition:
left 0.6s ease;
}
/* TEXTE */
.workia-website-button span {
position:
relative;
z-index:
2;
}
/* ICON */
.workia-website-button svg {
position:
relative;
z-index:
2;
width:
19px;
height:
19px;
fill:
#ffffff;
transition:
transform 0.35s ease;
}
/* HOVER */
.workia-website-button:hover {
transform:
translateY(-4px);
box-shadow:
0 16px 35px
rgba(23, 163, 222, 0.28);
}
.workia-website-button:hover::before {
left:
130%;
}
.workia-website-button:hover svg {
transform:
translate(3px, -3px);
}
/* MOBILE */
@media (max-width: 650px) {
.workia-website {
margin-top:
45px;
padding-top:
30px;
}
.workia-website p {
font-size:
14px;
margin-bottom:
17px;
}
.workia-website-button {
width:
100%;
max-width:
280px;
padding:
14px 20px;
}
}/* End custom CSS */