/*==============================================================
DMHEALTH360™
Professional Healthcare CSS Framework
Version : 1.0
Author : DM HEALTH TECHNOLOGY
==============================================================*/


/*==============================================================
GOOGLE FONTS
==============================================================*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');


/*==============================================================
ROOT VARIABLES
==============================================================*/

:root{

    /* Primary */

    --primary:#0F766E;
    --primary-dark:#0B5E58;
    --primary-light:#14B8A6;

    /* Secondary */

    --secondary:#2563EB;
    --secondary-light:#3B82F6;

    /* Accent */

    --accent:#F59E0B;
    --danger:#DC2626;
    --success:#16A34A;
    --info:#0891B2;

    /* Neutral */

    --white:#ffffff;
    --black:#111827;

    --gray-50:#F9FAFB;
    --gray-100:#F3F4F6;
    --gray-200:#E5E7EB;
    --gray-300:#D1D5DB;
    --gray-400:#9CA3AF;
    --gray-500:#6B7280;
    --gray-600:#4B5563;
    --gray-700:#374151;
    --gray-800:#1F2937;
    --gray-900:#111827;

    /* Radius */

    --radius-xs:6px;
    --radius-sm:10px;
    --radius:16px;
    --radius-lg:24px;
    --radius-xl:32px;

    /* Shadows */

    --shadow-sm:0 5px 20px rgba(0,0,0,.05);

    --shadow:

        0 15px 40px rgba(0,0,0,.08);

    --shadow-lg:

        0 25px 60px rgba(0,0,0,.12);

    /* Transition */

    --transition:.35s ease;

}


/*==============================================================
RESET
==============================================================*/

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

*::before,
*::after{

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;
    scroll-padding-top:90px;

}

body{

    font-family:'Inter',sans-serif;

    background:var(--white);

    color:var(--gray-800);

    font-size:16px;

    line-height:1.7;

    overflow-x:hidden;

}


/*==============================================================
SCROLLBAR
==============================================================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:var(--gray-100);

}

::-webkit-scrollbar-thumb{

    background:linear-gradient(

        180deg,

        var(--primary),

        var(--secondary)

    );

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--primary-dark);

}


/*==============================================================
SELECTION
==============================================================*/

::selection{

    background:var(--primary);

    color:white;

}


/*==============================================================
IMAGES
==============================================================*/

img{

    max-width:100%;

    display:block;

}


/*==============================================================
LINKS
==============================================================*/

a{

    text-decoration:none;

    transition:var(--transition);

}

a:hover{

    text-decoration:none;

}


/*==============================================================
LIST
==============================================================*/

ul{

    list-style:none;

    margin:0;

    padding:0;

}


/*==============================================================
HEADINGS
==============================================================*/

h1,h2,h3,h4,h5,h6{

    color:var(--gray-900);

    font-weight:700;

    line-height:1.25;

}

h1{

    font-size:clamp(2.8rem,5vw,4.5rem);

}

h2{

    font-size:clamp(2rem,4vw,3.4rem);

}

h3{

    font-size:1.7rem;

}

h4{

    font-size:1.3rem;

}

p{

    color:var(--gray-600);

}


/*==============================================================
SECTION
==============================================================*/

section{

    position:relative;

    padding:100px 0;

}


/*==============================================================
CONTAINER
==============================================================*/

.container{

    position:relative;

    z-index:2;

}


/*==============================================================
SECTION BADGE
==============================================================*/

.section-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 22px;

    background:rgba(15,118,110,.08);

    color:var(--primary);

    border-radius:100px;

    font-weight:700;

    letter-spacing:.8px;

    text-transform:uppercase;

    font-size:.82rem;

}


/*==============================================================
DISPLAY TITLES
==============================================================*/

.display-3,
.display-4,
.display-5,
.display-6{

    font-weight:800;

    letter-spacing:-1px;

}


/*==============================================================
TEXT GRADIENT
==============================================================*/

.text-gradient{

    background:linear-gradient(

        90deg,

        var(--primary),

        var(--secondary)

    );

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}


/*==============================================================
CARDS
==============================================================*/

.card,

.feature-card,

.service-card,

.partner-card,

.document-card,

.step-card,

.pricing-card,

.advantage-card,

.counter-box,

.contact-form,

.contact-info{

    border:none;

    border-radius:var(--radius);

    background:#fff;

    box-shadow:var(--shadow);

    transition:var(--transition);

}


.card:hover,

.feature-card:hover,

.service-card:hover,

.partner-card:hover,

.document-card:hover,

.step-card:hover,

.pricing-card:hover,

.advantage-card:hover{

    transform:translateY(-10px);

    box-shadow:var(--shadow-lg);

}


/*==============================================================
ICONS
==============================================================*/

.service-icon,

.partner-icon,

.icon-box,

.timeline-icon,

.icon{

    width:80px;

    height:80px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    color:white;

    font-size:2rem;

    margin:auto;

}


/*==============================================================
BUTTONS
==============================================================*/

.btn{

    border-radius:100px;

    padding:15px 34px;

    font-weight:700;

    transition:var(--transition);

    border:none;

}

.btn-success{

    background:linear-gradient(

        135deg,

        var(--primary),

        var(--primary-light)

    );

}

.btn-success:hover{

    transform:translateY(-3px);

    box-shadow:

        0 15px 35px rgba(20,184,166,.35);

}

.btn-outline-light{

    border:2px solid white;

}

.btn-outline-light:hover{

    background:white;

    color:var(--primary);

}


/*==============================================================
SPACING UTILITIES
==============================================================*/

.py-6{

    padding:120px 0;

}

.mt-6{

    margin-top:6rem;

}

.mb-6{

    margin-bottom:6rem;

}
/*==============================================================
HERO SECTION
==============================================================*/

.hero-section{

    position:relative;

    min-height:100vh;

    display:flex;

    align-items:center;

    overflow:hidden;

    background:
    radial-gradient(circle at top left,
    rgba(20,184,166,.12),
    transparent 40%),

    radial-gradient(circle at bottom right,
    rgba(37,99,235,.10),
    transparent 40%),

    linear-gradient(
    135deg,
    #ffffff 0%,
    #f8fafc 100%);

}


/*==============================================================
BACKGROUND SHAPES
==============================================================*/

.hero-section::before{

    content:"";

    position:absolute;

    width:650px;

    height:650px;

    background:linear-gradient(
    135deg,
    rgba(20,184,166,.08),
    rgba(37,99,235,.05));

    border-radius:50%;

    top:-220px;

    right:-180px;

    filter:blur(10px);

    animation:heroFloat 10s ease-in-out infinite;

}

.hero-section::after{

    content:"";

    position:absolute;

    width:450px;

    height:450px;

    background:rgba(15,118,110,.05);

    border-radius:50%;

    bottom:-180px;

    left:-120px;

    animation:heroFloat2 12s ease-in-out infinite;

}


/*==============================================================
HERO BADGE
==============================================================*/

.hero-badge{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:14px 24px;

    border-radius:100px;

    background:rgba(15,118,110,.08);

    border:1px solid rgba(20,184,166,.20);

    color:var(--primary);

    font-weight:700;

    margin-bottom:30px;

    backdrop-filter:blur(20px);

}

.hero-badge i{

    color:var(--success);

}


/*==============================================================
TITLE
==============================================================*/

.hero-title{

    font-size:clamp(3rem,6vw,5rem);

    font-weight:900;

    line-height:1.08;

    color:var(--gray-900);

    margin-bottom:30px;

}

.hero-title span{

    background:linear-gradient(
    90deg,
    var(--primary),
    var(--secondary));

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}


/*==============================================================
DESCRIPTION
==============================================================*/

.hero-description{

    font-size:1.2rem;

    color:var(--gray-600);

    max-width:650px;

    margin-bottom:40px;

}


/*==============================================================
FEATURES
==============================================================*/

.hero-features{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:18px;

    margin-bottom:45px;

}

.hero-features div{

    display:flex;

    align-items:center;

    gap:12px;

    font-weight:600;

    color:var(--gray-700);

}

.hero-features i{

    color:var(--success);

    font-size:20px;

}


/*==============================================================
BUTTONS
==============================================================*/

.hero-buttons{

    display:flex;

    gap:20px;

    flex-wrap:wrap;

}

.hero-buttons .btn{

    min-width:230px;

}


/*==============================================================
IMAGE
==============================================================*/

.hero-image{

    position:relative;

    max-width:100%;

    animation:heroImage 6s ease-in-out infinite;

    filter:

    drop-shadow(0 40px 70px rgba(0,0,0,.15));

}


/*==============================================================
IMAGE GLOW
==============================================================*/

.hero-image::after{

    content:"";

    position:absolute;

    inset:0;

}


/*==============================================================
FLOATING CARD
==============================================================*/

.hero-floating-card{

    position:absolute;

    background:white;

    border-radius:20px;

    padding:18px 24px;

    box-shadow:0 20px 45px rgba(0,0,0,.10);

    animation:floatCard 5s ease-in-out infinite;

    z-index:5;

}

.hero-floating-card h5{

    margin-bottom:6px;

    font-size:16px;

}

.hero-floating-card p{

    margin:0;

    font-size:14px;

}


/*==============================================================
STATS
==============================================================*/

.hero-stats{

    display:flex;

    gap:30px;

    margin-top:60px;

    flex-wrap:wrap;

}

.hero-stat{

    min-width:150px;

}

.hero-stat h2{

    color:var(--primary);

    font-weight:800;

    margin-bottom:8px;

}

.hero-stat p{

    margin:0;

    color:var(--gray-600);

}


/*==============================================================
SCROLL INDICATOR
==============================================================*/

.scroll-indicator{

    position:absolute;

    bottom:30px;

    left:50%;

    transform:translateX(-50%);

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:10px;

}

.scroll-indicator span{

    width:26px;

    height:42px;

    border:2px solid var(--primary);

    border-radius:30px;

    position:relative;

}

.scroll-indicator span::before{

    content:"";

    position:absolute;

    width:6px;

    height:6px;

    border-radius:50%;

    background:var(--primary);

    left:50%;

    transform:translateX(-50%);

    top:8px;

    animation:scrollWheel 2s infinite;

}


/*==============================================================
ANIMATIONS
==============================================================*/

@keyframes heroFloat{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-35px);

}

100%{

transform:translateY(0);

}

}

@keyframes heroFloat2{

0%{

transform:translateY(0);

}

50%{

transform:translateY(25px);

}

100%{

transform:translateY(0);

}

}

@keyframes heroImage{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-18px);

}

100%{

transform:translateY(0);

}

}

@keyframes floatCard{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-12px);

}

100%{

transform:translateY(0);

}

}

@keyframes scrollWheel{

0%{

opacity:0;

top:8px;

}

40%{

opacity:1;

}

100%{

opacity:0;

top:22px;

}

}


/*==============================================================
RESPONSIVE HERO
==============================================================*/

@media(max-width:991px){

.hero-section{

text-align:center;

padding-top:120px;

}

.hero-features{

grid-template-columns:1fr;

}

.hero-buttons{

justify-content:center;

}

.hero-stats{

justify-content:center;

}

.hero-image{

margin-top:60px;

max-width:80%;

margin-inline:auto;

}

}

@media(max-width:768px){

.hero-title{

font-size:2.7rem;

}

.hero-description{

font-size:1rem;

}

.hero-buttons .btn{

width:100%;

}

.hero-image{

max-width:100%;

}

.hero-stat{

width:45%;

text-align:center;

}

}
/*==============================================================
NAVBAR PREMIUM
DMHEALTH360™
==============================================================*/

/* Navbar principale */

.navbar{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    z-index:9999;

    padding:18px 0;

    transition:all .35s ease;

    background:transparent;

}

/* Navbar après scroll */

.navbar.scrolled{

    background:rgba(255,255,255,.92);

    backdrop-filter:blur(20px);

    -webkit-backdrop-filter:blur(20px);

    box-shadow:0 10px 35px rgba(0,0,0,.08);

    padding:12px 0;

}


/*==============================================================
LOGO
==============================================================*/

.navbar-brand{

    display:flex;

    align-items:center;

    gap:15px;

    text-decoration:none;

}

.navbar-brand img{

    height:58px;

    width:auto;

    transition:.3s;

}

.navbar-brand:hover img{

    transform:scale(1.05);

}

.logo-text{

    display:flex;

    flex-direction:column;

}

.logo-title{

    font-size:22px;

    font-weight:800;

    color:var(--primary);

    line-height:1;

}

.logo-subtitle{

    font-size:12px;

    color:var(--gray-500);

    letter-spacing:1px;

    text-transform:uppercase;

}


/*==============================================================
NAVIGATION
==============================================================*/

.navbar-nav{

    display:flex;

    align-items:center;

    gap:12px;

}

.nav-item{

    position:relative;

}

.nav-link{

    position:relative;

    padding:12px 18px !important;

    color:var(--gray-700);

    font-weight:600;

    border-radius:12px;

    transition:.35s;

}

.nav-link:hover{

    color:var(--primary);

    background:rgba(15,118,110,.06);

}

.nav-link.active{

    color:var(--primary);

}


/*==============================================================
ANIMATION SOUS LE MENU
==============================================================*/

.nav-link::after{

    content:"";

    position:absolute;

    bottom:6px;

    left:18px;

    width:0;

    height:3px;

    border-radius:30px;

    background:linear-gradient(

        90deg,

        var(--primary),

        var(--secondary)

    );

    transition:.35s;

}

.nav-link:hover::after,

.nav-link.active::after{

    width:calc(100% - 36px);

}


/*==============================================================
CTA BUTTON
==============================================================*/

.navbar-cta{

    margin-left:25px;

}

.navbar-cta .btn{

    padding:14px 28px;

    border-radius:50px;

    font-size:15px;

    font-weight:700;

    background:linear-gradient(

        135deg,

        var(--primary),

        var(--secondary)

    );

    color:#fff;

    border:none;

    transition:.35s;

}

.navbar-cta .btn:hover{

    transform:translateY(-3px);

    box-shadow:

    0 15px 35px rgba(37,99,235,.30);

}


/*==============================================================
DROPDOWN
==============================================================*/

.dropdown-menu{

    border:none;

    border-radius:18px;

    box-shadow:

    0 20px 45px rgba(0,0,0,.08);

    padding:12px;

    margin-top:18px;

}

.dropdown-item{

    border-radius:10px;

    padding:12px 18px;

    font-weight:500;

    transition:.3s;

}

.dropdown-item:hover{

    background:rgba(15,118,110,.08);

    color:var(--primary);

}


/*==============================================================
TOGGLER
==============================================================*/

.navbar-toggler{

    border:none;

    box-shadow:none !important;

    padding:10px;

}

.navbar-toggler span{

    display:block;

    width:28px;

    height:3px;

    background:var(--primary);

    margin:5px 0;

    border-radius:30px;

    transition:.3s;

}


/*==============================================================
MEGA MENU (OPTIONNEL)
==============================================================*/

.mega-menu{

    width:800px;

    border:none;

    border-radius:20px;

    padding:35px;

    box-shadow:

    0 30px 70px rgba(0,0,0,.12);

}

.mega-menu h6{

    font-weight:700;

    color:var(--primary);

    margin-bottom:15px;

}

.mega-menu a{

    display:block;

    padding:8px 0;

    color:var(--gray-600);

}

.mega-menu a:hover{

    color:var(--primary);

}


/*==============================================================
SOCIAL ICONS
==============================================================*/

.nav-social{

    display:flex;

    gap:12px;

    margin-left:20px;

}

.nav-social a{

    width:42px;

    height:42px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#fff;

    color:var(--primary);

    box-shadow:0 10px 20px rgba(0,0,0,.06);

    transition:.3s;

}

.nav-social a:hover{

    background:var(--primary);

    color:#fff;

    transform:translateY(-3px);

}


/*==============================================================
RESPONSIVE
==============================================================*/

@media(max-width:991px){

.navbar{

background:#fff;

box-shadow:0 10px 30px rgba(0,0,0,.08);

}

.navbar-collapse{

margin-top:25px;

padding:25px;

border-radius:20px;

background:#fff;

box-shadow:0 20px 40px rgba(0,0,0,.08);

}

.navbar-nav{

gap:5px;

}

.nav-link{

padding:14px !important;

}

.navbar-cta{

margin-top:20px;

margin-left:0;

}

.navbar-cta .btn{

width:100%;

}

.nav-social{

margin-top:20px;

justify-content:center;

margin-left:0;

}

}


/*==============================================================
ANIMATION D'APPARITION
==============================================================*/

@keyframes navbarFade{

from{

opacity:0;

transform:translateY(-40px);

}

to{

opacity:1;

transform:translateY(0);

}

}

.navbar{

animation:navbarFade .8s ease;

}
/*==============================================================
ABOUT SECTION
DMHEALTH360™
==============================================================*/

#about{

    position:relative;

    background:
    linear-gradient(
    180deg,
    #ffffff,
    #f8fbfd);

    overflow:hidden;

}


/*==============================================================
BACKGROUND
==============================================================*/

#about::before{

    content:"";

    position:absolute;

    width:700px;

    height:700px;

    background:

    radial-gradient(circle,
    rgba(20,184,166,.08),
    transparent 70%);

    top:-300px;

    right:-250px;

    border-radius:50%;

}

#about::after{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    background:

    radial-gradient(circle,
    rgba(37,99,235,.06),
    transparent 70%);

    bottom:-220px;

    left:-220px;

    border-radius:50%;

}


/*==============================================================
ABOUT IMAGE
==============================================================*/

.about-image{

    position:relative;

    padding:25px;

}

.about-image img{

    width:100%;

    border-radius:30px;

    box-shadow:

    0 35px 80px rgba(0,0,0,.12);

    transition:.45s;

}

.about-image:hover img{

    transform:

    scale(1.03)
    rotate(-1deg);

}


/*==============================================================
FLOATING EXPERIENCE CARD
==============================================================*/

.about-floating-card{

    position:absolute;

    right:-30px;

    bottom:40px;

    background:#fff;

    border-radius:20px;

    padding:25px;

    min-width:230px;

    box-shadow:

    0 25px 60px rgba(0,0,0,.10);

    animation:aboutFloat 6s ease-in-out infinite;

}

.about-floating-card h2{

    color:var(--primary);

    margin-bottom:8px;

    font-size:42px;

}

.about-floating-card p{

    margin:0;

    font-weight:600;

}


/*==============================================================
ABOUT CONTENT
==============================================================*/

.about-content{

    padding-left:35px;

}

.about-content h2{

    margin-bottom:30px;

}

.about-content p{

    font-size:18px;

    margin-bottom:25px;

    color:var(--gray-600);

}


/*==============================================================
FEATURE GRID
==============================================================*/

.feature-card{

    position:relative;

    padding:35px;

    height:100%;

    border-radius:22px;

    background:#fff;

    overflow:hidden;

}

.feature-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:6px;

    height:0;

    background:

    linear-gradient(

    180deg,

    var(--primary),

    var(--secondary));

    transition:.4s;

}

.feature-card:hover::before{

    height:100%;

}


/*==============================================================
FEATURE ICON
==============================================================*/

.feature-card i{

    font-size:48px;

    margin-bottom:25px;

    transition:.4s;

}

.feature-card:hover i{

    transform:

    scale(1.1)

    rotate(8deg);

}


/*==============================================================
FEATURE TITLE
==============================================================*/

.feature-card h5{

    font-size:22px;

    margin-bottom:18px;

    color:var(--gray-900);

}


/*==============================================================
FEATURE DESCRIPTION
==============================================================*/

.feature-card p{

    font-size:15px;

    line-height:1.8;

    color:var(--gray-600);

}


/*==============================================================
LIST
==============================================================*/

.about-list{

    margin-top:40px;

}

.about-list li{

    display:flex;

    align-items:flex-start;

    gap:16px;

    margin-bottom:22px;

    font-weight:500;

}

.about-list i{

    color:var(--success);

    font-size:22px;

    margin-top:3px;

}


/*==============================================================
NUMBERS
==============================================================*/

.about-stats{

    display:flex;

    gap:35px;

    margin-top:50px;

    flex-wrap:wrap;

}

.about-stat{

    min-width:150px;

}

.about-stat h2{

    color:var(--primary);

    font-weight:900;

    margin-bottom:5px;

}

.about-stat span{

    color:var(--gray-600);

}


/*==============================================================
QUOTE
==============================================================*/

.about-quote{

    margin-top:45px;

    padding:30px;

    border-left:5px solid var(--primary);

    background:#fff;

    border-radius:18px;

    box-shadow:

    0 15px 35px rgba(0,0,0,.06);

}

.about-quote p{

    margin:0;

    font-size:18px;

    font-style:italic;

}

.about-quote strong{

    display:block;

    margin-top:18px;

    color:var(--primary);

}


/*==============================================================
BUTTON
==============================================================*/

.about-content .btn{

    margin-top:35px;

}


/*==============================================================
ANIMATION
==============================================================*/

@keyframes aboutFloat{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-18px);

}

100%{

transform:translateY(0);

}

}


/*==============================================================
RESPONSIVE
==============================================================*/

@media(max-width:991px){

.about-content{

padding-left:0;

margin-top:60px;

text-align:center;

}

.about-floating-card{

position:relative;

right:auto;

bottom:auto;

margin:30px auto 0;

}

.about-stats{

justify-content:center;

}

.about-list{

text-align:left;

}

}

@media(max-width:768px){

.feature-card{

padding:28px;

}

.about-content h2{

font-size:2rem;

}

.about-stat{

width:45%;

text-align:center;

}

.about-floating-card{

width:100%;

}

}
/*==============================================================
SERVICES SECTION
DMHEALTH360™
==============================================================*/

.services-section{

    position:relative;

    background:linear-gradient(
        180deg,
        #ffffff 0%,
        #f8fbfd 100%
    );

    overflow:hidden;

}

/*==============================================================
BACKGROUND
==============================================================*/

.services-section::before{

    content:"";

    position:absolute;

    top:-250px;

    left:-250px;

    width:600px;

    height:600px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(20,184,166,.07),
        transparent 70%
    );

}

.services-section::after{

    content:"";

    position:absolute;

    right:-220px;

    bottom:-220px;

    width:500px;

    height:500px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(37,99,235,.06),
        transparent 70%
    );

}


/*==============================================================
SERVICE CARD
==============================================================*/

.service-card{

    position:relative;

    padding:45px 35px;

    border-radius:24px;

    background:#fff;

    height:100%;

    overflow:hidden;

    transition:.4s;

    border:1px solid rgba(15,118,110,.06);

}

.service-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:5px;

    background:linear-gradient(
        90deg,
        var(--primary),
        var(--secondary)
    );

    transform:scaleX(0);

    transition:.45s;

}

.service-card:hover{

    transform:translateY(-12px);

    box-shadow:
    0 30px 60px rgba(0,0,0,.10);

}

.service-card:hover::before{

    transform:scaleX(1);

}


/*==============================================================
ICON
==============================================================*/

.service-icon{

    width:90px;

    height:90px;

    border-radius:24px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:30px;

    font-size:36px;

    color:#fff;

    transition:.4s;

}

.service-card:hover .service-icon{

    transform:
        rotate(10deg)
        scale(1.08);

}


/*==============================================================
TITLE
==============================================================*/

.service-card h4{

    font-size:24px;

    font-weight:800;

    margin-bottom:18px;

}


/*==============================================================
DESCRIPTION
==============================================================*/

.service-card p{

    color:var(--gray-600);

    line-height:1.9;

    font-size:15px;

}


/*==============================================================
HOVER BUTTON
==============================================================*/

.service-card .read-more{

    display:inline-flex;

    align-items:center;

    gap:10px;

    margin-top:20px;

    color:var(--primary);

    font-weight:700;

}

.service-card:hover .read-more{

    transform:translateX(6px);

}


/*==============================================================
ENGAGEMENT CARDS
==============================================================*/

.commitment-card{

    position:relative;

    padding:35px;

    border-radius:20px;

    background:#fff;

    text-align:center;

    transition:.35s;

}

.commitment-card:hover{

    transform:translateY(-8px);

}

.commitment-card i{

    font-size:52px;

    margin-bottom:25px;

    color:var(--primary);

}

.commitment-card h5{

    margin-bottom:15px;

    font-weight:700;

}

.commitment-card p{

    font-size:15px;

}


/*==============================================================
ECOSYSTEM CARD
==============================================================*/

.ecosystem-card{

    position:relative;

    height:100%;

    padding:40px 30px;

    border-radius:22px;

    background:#fff;

    text-align:center;

    transition:.35s;

    overflow:hidden;

}

.ecosystem-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        135deg,
        rgba(20,184,166,.04),
        rgba(37,99,235,.04)
    );

    opacity:0;

    transition:.35s;

}

.ecosystem-card:hover::before{

    opacity:1;

}

.ecosystem-card:hover{

    transform:translateY(-10px);

    box-shadow:0 25px 55px rgba(0,0,0,.10);

}

.ecosystem-card i{

    font-size:52px;

    margin-bottom:25px;

    transition:.35s;

}

.ecosystem-card:hover i{

    transform:scale(1.12);

}

.ecosystem-card h4{

    margin-bottom:18px;

    font-size:22px;

    font-weight:800;

}

.ecosystem-card p{

    line-height:1.8;

}


/*==============================================================
PARTNER CARD
==============================================================*/

.partner-card{

    background:#fff;

    border-radius:20px;

    padding:35px;

    text-align:center;

    transition:.35s;

    border:1px solid rgba(15,118,110,.08);

}

.partner-card:hover{

    transform:translateY(-8px);

}

.partner-icon{

    width:90px;

    height:90px;

    margin:0 auto 25px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:36px;

    color:#fff;

}

.partner-card h4{

    font-size:22px;

    margin-bottom:12px;

}


/*==============================================================
ICON COLORS
==============================================================*/

.bg-primary{

    background:linear-gradient(
        135deg,
        #2563eb,
        #1d4ed8
    ) !important;

}

.bg-success{

    background:linear-gradient(
        135deg,
        #10b981,
        #059669
    ) !important;

}

.bg-warning{

    background:linear-gradient(
        135deg,
        #f59e0b,
        #d97706
    ) !important;

}

.bg-danger{

    background:linear-gradient(
        135deg,
        #ef4444,
        #dc2626
    ) !important;

}

.bg-info{

    background:linear-gradient(
        135deg,
        #06b6d4,
        #0891b2
    ) !important;

}

.bg-dark{

    background:linear-gradient(
        135deg,
        #1f2937,
        #111827
    ) !important;

}


/*==============================================================
SECTION TITLE
==============================================================*/

.services-section .display-5{

    margin-bottom:20px;

}

.services-section .lead{

    max-width:850px;

    margin:auto;

}


/*==============================================================
RESPONSIVE
==============================================================*/

@media(max-width:991px){

.service-card{

padding:35px 25px;

}

.ecosystem-card{

padding:35px 25px;

}

.partner-card{

padding:30px 20px;

}

}

@media(max-width:768px){

.service-icon{

width:80px;

height:80px;

font-size:30px;

}

.partner-icon{

width:80px;

height:80px;

font-size:30px;

}

.service-card h4{

font-size:22px;

}

.ecosystem-card h4{

font-size:20px;

}

}
/*==============================================================
PRICING SECTION
DMHEALTH360™
==============================================================*/

.pricing-section{

    position:relative;

    background:
    linear-gradient(
        180deg,
        #f8fbfd 0%,
        #ffffff 100%);

    overflow:hidden;

}

/*==============================================================
BACKGROUND
==============================================================*/

.pricing-section::before{

    content:"";

    position:absolute;

    width:700px;

    height:700px;

    border-radius:50%;

    background:

    radial-gradient(circle,
    rgba(20,184,166,.06),
    transparent 70%);

    top:-350px;

    right:-300px;

}

.pricing-section::after{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    border-radius:50%;

    background:

    radial-gradient(circle,
    rgba(37,99,235,.05),
    transparent 70%);

    bottom:-250px;

    left:-200px;

}

/*==============================================================
PRICING CARD
==============================================================*/

.pricing-card{

    position:relative;

    background:#fff;

    border-radius:30px;

    overflow:hidden;

    transition:.45s;

    box-shadow:

    0 20px 45px rgba(0,0,0,.08);

    height:100%;

    border:1px solid rgba(15,118,110,.08);

}

.pricing-card:hover{

    transform:

    translateY(-18px);

    box-shadow:

    0 35px 70px rgba(0,0,0,.14);

}

/*==============================================================
HEADER
==============================================================*/

.pricing-header{

    text-align:center;

    padding:45px 30px;

    background:#fff;

    border-bottom:1px solid #eee;

}

.pricing-header h3{

    font-size:28px;

    font-weight:800;

    margin-bottom:20px;

}

/*==============================================================
PRICE
==============================================================*/

.price{

    margin:25px 0;

}

.currency{

    font-size:22px;

    color:var(--gray-500);

    font-weight:600;

}

.amount{

    display:block;

    font-size:58px;

    font-weight:900;

    line-height:1;

    color:var(--primary);

}

.month{

    font-size:18px;

    color:var(--gray-500);

}

/*==============================================================
DESCRIPTION
==============================================================*/

.pricing-header p{

    color:var(--gray-600);

    margin-top:20px;

}

/*==============================================================
LIST
==============================================================*/

.pricing-list{

    padding:35px;

}

.pricing-list li{

    display:flex;

    align-items:flex-start;

    gap:15px;

    padding:14px 0;

    border-bottom:1px solid rgba(0,0,0,.05);

    color:var(--gray-700);

    font-weight:500;

}

.pricing-list li:last-child{

    border:none;

}

/*==============================================================
CHECK
==============================================================*/

.pricing-list li::before{

    content:"✓";

    width:28px;

    height:28px;

    min-width:28px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(22,163,74,.12);

    color:var(--success);

    font-weight:800;

}

/*==============================================================
BUTTON
==============================================================*/

.pricing-card .btn{

    margin:30px;

    width:calc(100% - 60px);

}

/*==============================================================
FEATURED CARD
==============================================================*/

.featured{

    transform:scale(1.05);

    border:3px solid var(--success);

    z-index:5;

}

.featured:hover{

    transform:

    scale(1.05)

    translateY(-18px);

}

/*==============================================================
POPULAR BADGE
==============================================================*/

.popular-badge{

    position:absolute;

    top:20px;

    right:20px;

    background:

    linear-gradient(
    135deg,
    #F59E0B,
    #F97316);

    color:#fff;

    padding:10px 18px;

    border-radius:50px;

    font-size:13px;

    font-weight:700;

    box-shadow:

    0 10px 25px rgba(249,115,22,.35);

}

/*==============================================================
HEADER FEATURED
==============================================================*/

.featured .pricing-header{

    background:

    linear-gradient(
    135deg,
    var(--primary),
    var(--secondary));

    color:#fff;

}

.featured .pricing-header h3,

.featured .pricing-header p,

.featured .currency,

.featured .month,

.featured .amount{

    color:#fff;

}

/*==============================================================
HOVER EFFECT
==============================================================*/

.pricing-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:5px;

    background:

    linear-gradient(
    90deg,
    var(--primary),
    var(--secondary));

    transform:scaleX(0);

    transition:.4s;

}

.pricing-card:hover::before{

    transform:scaleX(1);

}

/*==============================================================
CTA STRIP
==============================================================*/

.pricing-strip{

    margin-top:80px;

    border-radius:30px;

    padding:50px;

    background:

    linear-gradient(
    135deg,
    var(--primary),
    var(--secondary));

    color:#fff;

    text-align:center;

}

.pricing-strip h2{

    color:#fff;

    margin-bottom:20px;

}

.pricing-strip p{

    color:rgba(255,255,255,.92);

    font-size:18px;

}

.pricing-strip .btn{

    margin-top:25px;

    background:#fff;

    color:var(--primary);

}

.pricing-strip .btn:hover{

    transform:translateY(-4px);

}

/*==============================================================
SAVINGS BOX
==============================================================*/

.savings-box{

    display:flex;

    justify-content:center;

    gap:30px;

    flex-wrap:wrap;

    margin-top:70px;

}

.saving-card{

    background:#fff;

    padding:30px;

    border-radius:20px;

    min-width:230px;

    text-align:center;

    box-shadow:

    0 15px 35px rgba(0,0,0,.08);

}

.saving-card h3{

    color:var(--primary);

    font-size:42px;

    margin-bottom:12px;

}

.saving-card p{

    margin:0;

}

/*==============================================================
RESPONSIVE
==============================================================*/

@media(max-width:1200px){

.featured{

transform:none;

}

.featured:hover{

transform:translateY(-18px);

}

}

@media(max-width:991px){

.pricing-card{

margin-bottom:35px;

}

.pricing-header{

padding:40px 25px;

}

.amount{

font-size:48px;

}

.pricing-strip{

padding:35px;

}

}

@media(max-width:768px){

.pricing-list{

padding:25px;

}

.pricing-card .btn{

margin:25px;

width:calc(100% - 50px);

}

.popular-badge{

right:15px;

top:15px;

font-size:11px;

}

.amount{

font-size:42px;

}

.pricing-strip{

padding:30px 20px;

}

}
/*==============================================================
METHODOLOGY SECTION
DMHEALTH360™
==============================================================*/

#methodologie,
#first100days{

    position:relative;

    background:
    linear-gradient(
        180deg,
        #ffffff 0%,
        #f8fbfd 100%);

    overflow:hidden;

}

/*==============================================================
BACKGROUND
==============================================================*/

#methodologie::before,
#first100days::before{

    content:"";

    position:absolute;

    width:650px;

    height:650px;

    top:-320px;

    right:-280px;

    border-radius:50%;

    background:
    radial-gradient(circle,
    rgba(20,184,166,.07),
    transparent 70%);

}

#methodologie::after,
#first100days::after{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    bottom:-220px;

    left:-220px;

    border-radius:50%;

    background:
    radial-gradient(circle,
    rgba(37,99,235,.05),
    transparent 70%);

}

/*==============================================================
STEP CARD
==============================================================*/

.step-card{

    position:relative;

    padding:40px 35px;

    background:#fff;

    border-radius:25px;

    overflow:hidden;

    text-align:center;

    height:100%;

    transition:.45s;

    border:1px solid rgba(15,118,110,.08);

}

.step-card:hover{

    transform:
    translateY(-15px);

    box-shadow:
    0 30px 65px rgba(0,0,0,.12);

}

/*==============================================================
NUMBER
==============================================================*/

.step-number{

    width:70px;

    height:70px;

    margin:auto auto 25px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:24px;

    font-weight:800;

    color:#fff;

    background:
    linear-gradient(
    135deg,
    var(--primary),
    var(--secondary));

    box-shadow:
    0 15px 35px rgba(37,99,235,.25);

}

/*==============================================================
ICON
==============================================================*/

.step-card i{

    font-size:54px;

    margin-bottom:25px;

    transition:.4s;

}

.step-card:hover i{

    transform:

    rotate(10deg)

    scale(1.1);

}

/*==============================================================
TITLE
==============================================================*/

.step-card h4{

    margin-bottom:20px;

    font-size:24px;

    font-weight:800;

}

/*==============================================================
TEXT
==============================================================*/

.step-card p{

    line-height:1.9;

    color:var(--gray-600);

}

/*==============================================================
TIMELINE
==============================================================*/

.timeline{

    position:relative;

    max-width:1000px;

    margin:auto;

    padding:60px 0;

}

/*==============================================================
CENTER LINE
==============================================================*/

.timeline::before{

    content:"";

    position:absolute;

    left:50%;

    top:0;

    transform:translateX(-50%);

    width:6px;

    height:100%;

    border-radius:50px;

    background:

    linear-gradient(

    180deg,

    var(--primary),

    var(--secondary));

}

/*==============================================================
ITEM
==============================================================*/

.timeline-item{

    position:relative;

    width:50%;

    padding:30px 60px;

}

.timeline-item:nth-child(odd){

    left:0;

    text-align:right;

}

.timeline-item:nth-child(even){

    left:50%;

}

/*==============================================================
ICON
==============================================================*/

.timeline-icon{

    position:absolute;

    top:35px;

    width:70px;

    height:70px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#fff;

    font-size:28px;

    background:

    linear-gradient(
    135deg,
    var(--primary),
    var(--secondary));

    box-shadow:
    0 20px 40px rgba(0,0,0,.15);

    z-index:5;

}

.timeline-item:nth-child(odd) .timeline-icon{

    right:-35px;

}

.timeline-item:nth-child(even) .timeline-icon{

    left:-35px;

}

/*==============================================================
CONTENT
==============================================================*/

.timeline-content{

    background:#fff;

    border-radius:25px;

    padding:35px;

    box-shadow:
    0 20px 45px rgba(0,0,0,.08);

    transition:.4s;

}

.timeline-content:hover{

    transform:translateY(-10px);

    box-shadow:
    0 30px 60px rgba(0,0,0,.12);

}

/*==============================================================
DATE
==============================================================*/

.timeline-date{

    display:inline-block;

    padding:8px 18px;

    border-radius:50px;

    background:
    rgba(20,184,166,.10);

    color:var(--primary);

    font-size:13px;

    font-weight:700;

    margin-bottom:18px;

    text-transform:uppercase;

}

/*==============================================================
TITLE
==============================================================*/

.timeline-content h4{

    font-size:24px;

    margin-bottom:18px;

}

/*==============================================================
TEXT
==============================================================*/

.timeline-content p{

    line-height:1.9;

    color:var(--gray-600);

}

/*==============================================================
HOVER BORDER
==============================================================*/

.timeline-content::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:25px;

    border:2px solid transparent;

    transition:.35s;

}

.timeline-content:hover::before{

    border-color:rgba(20,184,166,.25);

}

/*==============================================================
ANIMATION
==============================================================*/

.timeline-item{

    animation:timelineFade .8s ease both;

}

.timeline-item:nth-child(2){

animation-delay:.15s;

}

.timeline-item:nth-child(3){

animation-delay:.30s;

}

.timeline-item:nth-child(4){

animation-delay:.45s;

}

.timeline-item:nth-child(5){

animation-delay:.60s;

}

.timeline-item:nth-child(6){

animation-delay:.75s;

}

.timeline-item:nth-child(7){

animation-delay:.90s;

}

/*==============================================================
KEYFRAMES
==============================================================*/

@keyframes timelineFade{

from{

opacity:0;

transform:translateY(50px);

}

to{

opacity:1;

transform:translateY(0);

}

}

/*==============================================================
RESPONSIVE
==============================================================*/

@media(max-width:991px){

.timeline::before{

left:40px;

}

.timeline-item{

width:100%;

left:0!important;

padding-left:110px;

padding-right:20px;

text-align:left!important;

margin-bottom:40px;

}

.timeline-icon{

left:5px!important;

right:auto!important;

}

}

@media(max-width:768px){

.step-card{

padding:30px 25px;

}

.step-number{

width:60px;

height:60px;

font-size:20px;

}

.timeline-content{

padding:25px;

}

.timeline-content h4{

font-size:20px;

}

.timeline-icon{

width:60px;

height:60px;

font-size:22px;

}

}
/*==============================================================
LIVRABLES & DOCUMENTATION
DMHEALTH360™
==============================================================*/

#livrables{

    position:relative;

    background:
    linear-gradient(
        180deg,
        #f8fbfd 0%,
        #ffffff 100%
    );

    overflow:hidden;

}

/*==============================================================
BACKGROUND EFFECTS
==============================================================*/

#livrables::before{

    content:"";

    position:absolute;

    top:-250px;

    left:-250px;

    width:650px;

    height:650px;

    border-radius:50%;

    background:
    radial-gradient(circle,
    rgba(20,184,166,.06),
    transparent 70%);

}

#livrables::after{

    content:"";

    position:absolute;

    right:-200px;

    bottom:-200px;

    width:500px;

    height:500px;

    border-radius:50%;

    background:
    radial-gradient(circle,
    rgba(37,99,235,.05),
    transparent 70%);

}

/*==============================================================
DOCUMENT CARD
==============================================================*/

.document-card{

    position:relative;

    background:#fff;

    border-radius:24px;

    padding:40px 35px;

    height:100%;

    overflow:hidden;

    transition:.40s;

    border:1px solid rgba(15,118,110,.08);

}

.document-card:hover{

    transform:translateY(-12px);

    box-shadow:
    0 30px 60px rgba(0,0,0,.10);

}

/*==============================================================
TOP BORDER
==============================================================*/

.document-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:5px;

    background:
    linear-gradient(
        90deg,
        var(--primary),
        var(--secondary)
    );

    transform:scaleX(0);

    transition:.35s;

}

.document-card:hover::before{

    transform:scaleX(1);

}

/*==============================================================
ICON BOX
==============================================================*/

.icon-box{

    width:90px;

    height:90px;

    border-radius:22px;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#fff;

    font-size:36px;

    margin-bottom:28px;

    transition:.35s;

}

.document-card:hover .icon-box{

    transform:
        rotate(8deg)
        scale(1.08);

}

/*==============================================================
TITLE
==============================================================*/

.document-card h4{

    font-size:24px;

    font-weight:800;

    margin-bottom:18px;

    color:var(--gray-900);

}

/*==============================================================
DESCRIPTION
==============================================================*/

.document-card p{

    line-height:1.9;

    color:var(--gray-600);

    margin:0;

}

/*==============================================================
DOWNLOAD BUTTON
==============================================================*/

.document-card .btn{

    margin-top:25px;

}

/*==============================================================
REPORT CARD
==============================================================*/

.report-card{

    background:#fff;

    border-radius:24px;

    padding:35px;

    box-shadow:
    0 20px 45px rgba(0,0,0,.08);

    transition:.35s;

}

.report-card:hover{

    transform:translateY(-8px);

}

/*==============================================================
REPORT HEADER
==============================================================*/

.report-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-bottom:25px;

}

.report-header h5{

    margin:0;

    font-weight:700;

}

.report-status{

    padding:8px 16px;

    border-radius:50px;

    background:rgba(22,163,74,.10);

    color:var(--success);

    font-size:13px;

    font-weight:700;

}

/*==============================================================
REPORT PROGRESS
==============================================================*/

.progress{

    height:10px;

    border-radius:20px;

    background:#edf2f7;

    overflow:hidden;

}

.progress-bar{

    border-radius:20px;

    background:
    linear-gradient(
        90deg,
        var(--primary),
        var(--secondary)
    );

}

/*==============================================================
KPI BOXES
==============================================================*/

.kpi-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:25px;

    margin-top:50px;

}

.kpi-card{

    background:#fff;

    border-radius:20px;

    padding:30px;

    text-align:center;

    transition:.35s;

    box-shadow:
    0 15px 35px rgba(0,0,0,.06);

}

.kpi-card:hover{

    transform:translateY(-10px);

}

.kpi-card i{

    font-size:42px;

    color:var(--primary);

    margin-bottom:20px;

}

.kpi-card h2{

    color:var(--primary);

    font-weight:900;

    margin-bottom:10px;

}

.kpi-card span{

    color:var(--gray-600);

}

/*==============================================================
PREVIEW PANEL
==============================================================*/

.dashboard-preview{

    background:#fff;

    border-radius:30px;

    padding:40px;

    margin-top:70px;

    box-shadow:
    0 30px 60px rgba(0,0,0,.10);

}

.dashboard-preview img{

    width:100%;

    border-radius:18px;

    border:1px solid rgba(0,0,0,.08);

}

/*==============================================================
FEATURE LIST
==============================================================*/

.dashboard-features{

    margin-top:30px;

}

.dashboard-features li{

    display:flex;

    align-items:center;

    gap:15px;

    margin-bottom:18px;

    font-weight:600;

}

.dashboard-features i{

    color:var(--success);

    font-size:20px;

}

/*==============================================================
CALL OUT
==============================================================*/

.document-highlight{

    margin-top:70px;

    padding:45px;

    border-radius:28px;

    background:
    linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

    color:#fff;

    text-align:center;

}

.document-highlight h2{

    color:#fff;

    margin-bottom:20px;

}

.document-highlight p{

    color:rgba(255,255,255,.92);

    font-size:18px;

    max-width:850px;

    margin:auto;

}

.document-highlight .btn{

    margin-top:30px;

    background:#fff;

    color:var(--primary);

}

/*==============================================================
RESPONSIVE
==============================================================*/

@media(max-width:991px){

.kpi-grid{

grid-template-columns:repeat(2,1fr);

}

.dashboard-preview{

padding:30px;

}

.document-card{

padding:30px;

}

}

@media(max-width:768px){

.kpi-grid{

grid-template-columns:1fr;

}

.document-card{

padding:28px 24px;

}

.icon-box{

width:80px;

height:80px;

font-size:30px;

}

.dashboard-preview{

padding:20px;

}

.document-highlight{

padding:35px 25px;

}

}
/*==============================================================
ADVANTAGES SECTION
DMHEALTH360™
==============================================================*/

#advantages,
#difference{

    position:relative;

    overflow:hidden;

    background:
    linear-gradient(
        180deg,
        #ffffff,
        #f8fbfd);

}


/*==============================================================
BACKGROUND
==============================================================*/

#advantages::before,
#difference::before{

    content:"";

    position:absolute;

    width:650px;

    height:650px;

    border-radius:50%;

    background:
    radial-gradient(circle,
    rgba(20,184,166,.06),
    transparent 70%);

    top:-320px;

    right:-260px;

}

#advantages::after,
#difference::after{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    border-radius:50%;

    background:
    radial-gradient(circle,
    rgba(37,99,235,.05),
    transparent 70%);

    left:-220px;

    bottom:-220px;

}


/*==============================================================
ADVANTAGE CARD
==============================================================*/

.advantage-card{

    position:relative;

    background:#fff;

    border-radius:28px;

    padding:40px;

    height:100%;

    overflow:hidden;

    transition:.45s;

    border:1px solid rgba(15,118,110,.08);

}

.advantage-card:hover{

    transform:translateY(-15px);

    box-shadow:

    0 30px 70px rgba(0,0,0,.12);

}


/*==============================================================
TOP BORDER
==============================================================*/

.advantage-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:5px;

    background:

    linear-gradient(

    90deg,

    var(--primary),

    var(--secondary));

    transform:scaleX(0);

    transition:.35s;

}

.advantage-card:hover::before{

    transform:scaleX(1);

}


/*==============================================================
ICON
==============================================================*/

.advantage-card .icon{

    width:90px;

    height:90px;

    border-radius:22px;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:38px;

    color:white;

    background:

    linear-gradient(

    135deg,

    var(--primary),

    var(--secondary));

    margin-bottom:30px;

    transition:.4s;

}

.advantage-card:hover .icon{

    transform:

    rotate(8deg)

    scale(1.08);

}


/*==============================================================
TITLE
==============================================================*/

.advantage-card h4{

    font-size:24px;

    font-weight:800;

    margin-bottom:20px;

}


/*==============================================================
TEXT
==============================================================*/

.advantage-card p{

    color:var(--gray-600);

    line-height:1.9;

}


/*==============================================================
COUNTER BOX
==============================================================*/

.counter-box{

    background:#fff;

    border-radius:24px;

    padding:35px;

    text-align:center;

    transition:.35s;

    box-shadow:

    0 18px 40px rgba(0,0,0,.08);

}

.counter-box:hover{

    transform:translateY(-8px);

}

.counter-box h2{

    font-size:58px;

    font-weight:900;

    margin-bottom:10px;

}

.counter-box p{

    margin:0;

    font-weight:600;

}


/*==============================================================
COMPARISON
==============================================================*/

.comparison-box{

    background:white;

    border-radius:30px;

    overflow:hidden;

    border:2px solid transparent;

    transition:.35s;

    box-shadow:

    0 20px 45px rgba(0,0,0,.08);

}

.comparison-box:hover{

    transform:translateY(-10px);

}

.border-success{

    border-color:rgba(16,185,129,.30);

}

.border-danger{

    border-color:rgba(239,68,68,.30);

}


/*==============================================================
HEADER
==============================================================*/

.comparison-header{

    padding:25px;

    text-align:center;

}

.comparison-header h3{

    color:white;

    margin:0;

    font-weight:800;

}


/*==============================================================
LIST
==============================================================*/

.comparison-list{

    padding:35px;

}

.comparison-list li{

    display:flex;

    align-items:flex-start;

    gap:14px;

    padding:16px 0;

    border-bottom:1px solid rgba(0,0,0,.06);

    font-weight:500;

}

.comparison-list li:last-child{

    border:none;

}


/*==============================================================
MESSAGE
==============================================================*/

.stat-card{

    background:#fff;

    border-radius:22px;

    padding:35px;

    text-align:center;

    transition:.35s;

    box-shadow:

    0 15px 35px rgba(0,0,0,.08);

}

.stat-card:hover{

    transform:translateY(-8px);

}

.stat-card i{

    margin-bottom:18px;

}

.stat-card h2{

    font-size:50px;

    color:var(--primary);

    font-weight:900;

}

.stat-card p{

    margin:0;

}


/*==============================================================
QUOTE BLOCK
==============================================================*/

.message-box{

    position:relative;

    border-radius:30px;

    overflow:hidden;

    padding:70px 50px;

    background:

    linear-gradient(

    135deg,

    var(--primary),

    var(--secondary));

    color:white;

}

.message-box::before{

    content:"";

    position:absolute;

    width:250px;

    height:250px;

    border-radius:50%;

    background:rgba(255,255,255,.08);

    right:-80px;

    top:-80px;

}

.message-box h2{

    color:white;

    margin-bottom:20px;

}

.message-box h4{

    color:white;

    font-weight:400;

    line-height:1.7;

}


/*==============================================================
VALUE GRID
==============================================================*/

.value-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:30px;

    margin-top:70px;

}

.value-card{

    background:white;

    border-radius:22px;

    padding:35px;

    text-align:center;

    transition:.35s;

}

.value-card:hover{

    transform:translateY(-10px);

}

.value-card i{

    font-size:46px;

    color:var(--primary);

    margin-bottom:20px;

}

.value-card h5{

    margin-bottom:15px;

}


/*==============================================================
RESPONSIVE
==============================================================*/

@media(max-width:991px){

.value-grid{

grid-template-columns:repeat(2,1fr);

}

.comparison-list{

padding:25px;

}

.message-box{

padding:50px 35px;

}

}

@media(max-width:768px){

.value-grid{

grid-template-columns:1fr;

}

.advantage-card{

padding:30px;

}

.advantage-card h4{

font-size:22px;

}

.counter-box h2{

font-size:42px;

}

.message-box{

padding:35px 25px;

}

}
/*==============================================================
CONTACT SECTION
DMHEALTH360™
==============================================================*/

.contact-section{

    position:relative;

    background:
    linear-gradient(
        180deg,
        #ffffff 0%,
        #f8fbfd 100%
    );

    overflow:hidden;

}

.contact-section::before{

    content:"";

    position:absolute;

    width:650px;

    height:650px;

    top:-320px;

    right:-250px;

    border-radius:50%;

    background:
    radial-gradient(circle,
    rgba(20,184,166,.06),
    transparent 70%);

}

.contact-section::after{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    left:-220px;

    bottom:-220px;

    border-radius:50%;

    background:
    radial-gradient(circle,
    rgba(37,99,235,.05),
    transparent 70%);

}

/*==============================================================
CONTACT INFO
==============================================================*/

.contact-info{

    position:relative;

    background:#fff;

    padding:50px;

    border-radius:30px;

    height:100%;

    box-shadow:
    0 25px 60px rgba(0,0,0,.08);

}

.contact-info h3{

    font-size:34px;

    font-weight:800;

    margin-bottom:20px;

    color:var(--primary);

}

.contact-info>p{

    margin-bottom:45px;

    color:var(--gray-600);

    line-height:1.9;

}

/*==============================================================
CONTACT ITEM
==============================================================*/

.contact-item{

    display:flex;

    align-items:flex-start;

    gap:20px;

    margin-bottom:30px;

}

.contact-item:last-child{

    margin-bottom:0;

}

.contact-item i{

    width:65px;

    height:65px;

    border-radius:18px;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#fff;

    font-size:24px;

    background:
    linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

    box-shadow:
    0 15px 30px rgba(15,118,110,.20);

    transition:.35s;

}

.contact-item:hover i{

    transform:
    rotate(8deg)
    scale(1.08);

}

.contact-item strong{

    display:block;

    font-size:18px;

    margin-bottom:8px;

    color:var(--gray-900);

}

.contact-item p{

    margin:0;

    color:var(--gray-600);

}

/*==============================================================
SOCIAL CONTACT
==============================================================*/

.contact-social{

    display:flex;

    gap:15px;

    margin-top:45px;

}

.contact-social a{

    width:50px;

    height:50px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#fff;

    background:
    linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

    transition:.35s;

}

.contact-social a:hover{

    transform:translateY(-5px);

    box-shadow:
    0 20px 35px rgba(0,0,0,.15);

}

/*==============================================================
CONTACT FORM
==============================================================*/

.contact-form{

    position:relative;

    background:#fff;

    padding:50px;

    border-radius:30px;

    box-shadow:
    0 25px 60px rgba(0,0,0,.08);

}

.contact-form h3{

    font-size:30px;

    margin-bottom:35px;

    color:var(--primary);

}

/*==============================================================
FORM CONTROLS
==============================================================*/

.form-control,
.form-select{

    height:60px;

    border-radius:16px;

    border:1px solid rgba(0,0,0,.08);

    padding:15px 20px;

    font-size:15px;

    background:#fff;

    transition:.35s;

    box-shadow:none;

}

textarea.form-control{

    min-height:170px;

    resize:none;

    padding-top:18px;

}

.form-control:focus,
.form-select:focus{

    border-color:var(--primary);

    box-shadow:
    0 0 0 .25rem rgba(15,118,110,.12);

}

.form-control::placeholder{

    color:var(--gray-500);

}

/*==============================================================
LABEL
==============================================================*/

.form-label{

    font-weight:700;

    margin-bottom:10px;

    color:var(--gray-700);

}

/*==============================================================
INPUT GROUP
==============================================================*/

.input-group-text{

    background:#fff;

    border:1px solid rgba(0,0,0,.08);

    border-right:none;

    color:var(--primary);

    border-radius:16px 0 0 16px;

}

/*==============================================================
CHECKBOX
==============================================================*/

.form-check-input{

    width:20px;

    height:20px;

    border-radius:6px;

}

.form-check-input:checked{

    background:var(--primary);

    border-color:var(--primary);

}

/*==============================================================
BUTTON
==============================================================*/

.contact-form .btn{

    width:100%;

    height:60px;

    font-size:17px;

    font-weight:700;

    border-radius:16px;

    background:
    linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

    color:#fff;

    transition:.35s;

}

.contact-form .btn:hover{

    transform:translateY(-3px);

    box-shadow:
    0 20px 40px rgba(15,118,110,.25);

}

/*==============================================================
SUCCESS MESSAGE
==============================================================*/

.form-success{

    display:none;

    margin-top:20px;

    padding:18px;

    border-radius:16px;

    background:rgba(22,163,74,.08);

    color:var(--success);

    font-weight:600;

}

/*==============================================================
ERROR MESSAGE
==============================================================*/

.form-error{

    display:none;

    margin-top:20px;

    padding:18px;

    border-radius:16px;

    background:rgba(220,38,38,.08);

    color:var(--danger);

    font-weight:600;

}

/*==============================================================
MAP
==============================================================*/

.contact-map{

    margin-top:60px;

    overflow:hidden;

    border-radius:30px;

    box-shadow:
    0 25px 60px rgba(0,0,0,.10);

}

.contact-map iframe{

    width:100%;

    height:500px;

    border:0;

}

/*==============================================================
RESPONSIVE
==============================================================*/

@media(max-width:991px){

.contact-info{

margin-bottom:40px;

padding:40px;

}

.contact-form{

padding:40px;

}

}

@media(max-width:768px){

.contact-info{

padding:30px;

}

.contact-form{

padding:30px 25px;

}

.contact-item{

gap:15px;

}

.contact-item i{

width:55px;

height:55px;

font-size:20px;

}

.form-control,
.form-select{

height:56px;

}

textarea.form-control{

min-height:150px;

}

.contact-map iframe{

height:350px;

}

}
/*==============================================================
FAQ SECTION
DMHEALTH360™
==============================================================*/

#faq{

    position:relative;

    background:linear-gradient(
        180deg,
        #f8fbfd 0%,
        #ffffff 100%
    );

    overflow:hidden;

}

#faq::before{

    content:"";

    position:absolute;

    width:650px;

    height:650px;

    border-radius:50%;

    background:
    radial-gradient(circle,
    rgba(20,184,166,.05),
    transparent 70%);

    right:-250px;

    top:-250px;

}

#faq::after{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    border-radius:50%;

    background:
    radial-gradient(circle,
    rgba(37,99,235,.05),
    transparent 70%);

    left:-220px;

    bottom:-220px;

}

/*==============================================================
ACCORDION
==============================================================*/

.accordion{

    border-radius:25px;

    overflow:hidden;

    background:white;

    box-shadow:

    0 20px 50px rgba(0,0,0,.08);

}

.accordion-item{

    border:none;

    border-bottom:1px solid rgba(0,0,0,.05);

}

.accordion-item:last-child{

    border-bottom:none;

}

/*==============================================================
BUTTON
==============================================================*/

.accordion-button{

    padding:28px 30px;

    font-size:18px;

    font-weight:700;

    color:var(--gray-900);

    background:white;

    box-shadow:none !important;

    transition:.35s;

}

.accordion-button:hover{

    background:rgba(20,184,166,.04);

}

.accordion-button:not(.collapsed){

    color:var(--primary);

    background:rgba(20,184,166,.05);

}

/*==============================================================
ICON
==============================================================*/

.accordion-button::after{

    transition:.35s;

}

.accordion-button:not(.collapsed)::after{

    transform:rotate(-180deg);

}

/*==============================================================
BODY
==============================================================*/

.accordion-body{

    padding:25px 30px 35px;

    color:var(--gray-600);

    line-height:1.9;

    font-size:16px;

}

/*==============================================================
CTA SECTION
==============================================================*/

.cta-section{

    position:relative;

    overflow:hidden;

    background:

    linear-gradient(

    135deg,

    var(--primary),

    var(--secondary));

    color:white;

}

.cta-section::before{

    content:"";

    position:absolute;

    width:700px;

    height:700px;

    border-radius:50%;

    background:

    rgba(255,255,255,.05);

    top:-320px;

    right:-220px;

}

.cta-section::after{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    border-radius:50%;

    background:

    rgba(255,255,255,.04);

    bottom:-220px;

    left:-180px;

}

/*==============================================================
CTA CARD
==============================================================*/

.cta-card{

    position:relative;

    z-index:2;

    background:

    rgba(255,255,255,.08);

    backdrop-filter:blur(20px);

    -webkit-backdrop-filter:blur(20px);

    border:1px solid rgba(255,255,255,.15);

    border-radius:35px;

    padding:70px 60px;

    overflow:hidden;

}

.cta-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(

    135deg,

    rgba(255,255,255,.05),

    transparent);

    pointer-events:none;

}

/*==============================================================
BADGE
==============================================================*/

.cta-badge{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:12px 24px;

    border-radius:50px;

    background:rgba(255,255,255,.12);

    color:white;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.8px;

}

/*==============================================================
TITLE
==============================================================*/

.cta-card h2{

    color:white;

    font-weight:900;

    line-height:1.15;

}

.cta-card p{

    color:rgba(255,255,255,.92);

    font-size:20px;

    line-height:1.8;

}

/*==============================================================
MINI STATS
==============================================================*/

.mini-stat{

    padding:25px;

    border-radius:20px;

    background:rgba(255,255,255,.08);

    transition:.35s;

}

.mini-stat:hover{

    transform:translateY(-8px);

    background:rgba(255,255,255,.12);

}

.mini-stat i{

    color:white;

}

.mini-stat h5{

    color:white;

    margin:0;

    line-height:1.6;

}

/*==============================================================
CTA BUTTONS
==============================================================*/

.cta-card .btn{

    min-width:250px;

    border-radius:16px;

    font-weight:700;

    transition:.35s;

}

.cta-card .btn-light{

    color:var(--primary);

}

.cta-card .btn-light:hover{

    transform:translateY(-4px);

}

.cta-card .btn-success{

    background:white;

    color:var(--primary);

    border:none;

}

.cta-card .btn-success:hover{

    transform:translateY(-4px);

}

/*==============================================================
BOTTOM STATS
==============================================================*/

.cta-card h3{

    color:white;

    font-size:52px;

    font-weight:900;

    margin-bottom:10px;

}

.cta-card .row:last-child p{

    color:rgba(255,255,255,.85);

    margin:0;

}

/*==============================================================
RESPONSIVE
==============================================================*/

@media(max-width:991px){

.cta-card{

padding:50px 35px;

}

.cta-card .btn{

width:100%;

margin-bottom:15px;

}

}
@media(max-width:768px){

.accordion-button{

padding:22px;

font-size:16px;

}

.accordion-body{

padding:20px 22px 28px;

}

.cta-card{

padding:35px 25px;

}

.cta-card h2{

font-size:2rem;

}

.cta-card p{

font-size:16px;

}

.mini-stat{

margin-bottom:20px;

}

.cta-card h3{

font-size:40px;

}

}
/*==============================================================
FOOTER PREMIUM
DMHEALTH360™
==============================================================*/

.footer{

    position:relative;

    overflow:hidden;

    background:
    linear-gradient(
    135deg,
    #0b1320,
    #111827,
    #1f2937);

    color:#fff;

}

/*==============================================================
BACKGROUND EFFECT
==============================================================*/

.footer::before{

    content:"";

    position:absolute;

    width:700px;

    height:700px;

    right:-250px;

    top:-250px;

    border-radius:50%;

    background:

    radial-gradient(circle,
    rgba(20,184,166,.08),
    transparent 70%);

}

.footer::after{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    left:-180px;

    bottom:-180px;

    border-radius:50%;

    background:

    radial-gradient(circle,
    rgba(37,99,235,.08),
    transparent 70%);

}

/*==============================================================
CONTAINER
==============================================================*/

.footer .container{

    position:relative;

    z-index:2;

}

/*==============================================================
LOGO
==============================================================*/

.footer-logo{

    display:flex;

    align-items:center;

    gap:15px;

    margin-bottom:25px;

}

.footer-logo img{

    height:70px;

    width:auto;

}

.footer-logo h3{

    color:white;

    font-size:28px;

    font-weight:800;

    margin:0;

}

.footer-description{

    color:rgba(255,255,255,.75);

    line-height:1.9;

    margin-bottom:30px;

}

/*==============================================================
FOOTER TITLE
==============================================================*/

.footer h5{

    color:white;

    font-weight:700;

    margin-bottom:25px;

    position:relative;

}

.footer h5::after{

    content:"";

    display:block;

    width:50px;

    height:3px;

    margin-top:10px;

    border-radius:20px;

    background:linear-gradient(
    90deg,
    var(--primary),
    var(--secondary));

}

/*==============================================================
LINKS
==============================================================*/

.footer ul{

    padding:0;

    margin:0;

}

.footer ul li{

    margin-bottom:15px;

}

.footer ul li a{

    color:rgba(255,255,255,.75);

    transition:.35s;

    display:inline-flex;

    align-items:center;

    gap:10px;

}

.footer ul li a:hover{

    color:white;

    transform:translateX(8px);

}

/*==============================================================
CONTACT
==============================================================*/

.footer-contact{

    display:flex;

    align-items:flex-start;

    gap:15px;

    margin-bottom:20px;

}

.footer-contact i{

    width:42px;

    height:42px;

    border-radius:12px;

    display:flex;

    justify-content:center;

    align-items:center;

    color:white;

    background:

    linear-gradient(
    135deg,
    var(--primary),
    var(--secondary));

}

.footer-contact span{

    color:rgba(255,255,255,.80);

}

/*==============================================================
SOCIAL
==============================================================*/

.footer-social{

    display:flex;

    gap:15px;

    margin-top:30px;

}

.footer-social a{

    width:50px;

    height:50px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    color:white;

    background:rgba(255,255,255,.08);

    transition:.35s;

}

.footer-social a:hover{

    background:

    linear-gradient(
    135deg,
    var(--primary),
    var(--secondary));

    transform:
    translateY(-6px)
    rotate(8deg);

}

/*==============================================================
NEWSLETTER
==============================================================*/

.footer-newsletter{

    margin-top:25px;

}

.footer-newsletter .form-control{

    height:58px;

    border:none;

    border-radius:14px;

}

.footer-newsletter .btn{

    width:100%;

    margin-top:15px;

    height:56px;

    border-radius:14px;

    background:

    linear-gradient(
    135deg,
    var(--primary),
    var(--secondary));

}

/*==============================================================
DIVIDER
==============================================================*/

.footer hr{

    border-color:rgba(255,255,255,.08);

    margin:60px 0 30px;

}

/*==============================================================
BOTTOM
==============================================================*/

.footer-bottom{

    display:flex;

    justify-content:space-between;

    align-items:center;

    flex-wrap:wrap;

    gap:20px;

}

.footer-bottom p{

    color:rgba(255,255,255,.65);

    margin:0;

}

.footer-bottom a{

    color:rgba(255,255,255,.70);

}

.footer-bottom a:hover{

    color:white;

}

/*==============================================================
LEGAL LINKS
==============================================================*/

.footer-legal{

    display:flex;

    gap:25px;

    flex-wrap:wrap;

}

/*==============================================================
CERTIFICATION BADGES
==============================================================*/

.footer-badges{

    display:flex;

    gap:20px;

    margin-top:30px;

    flex-wrap:wrap;

}

.footer-badge{

    padding:12px 18px;

    border-radius:50px;

    background:rgba(255,255,255,.08);

    color:white;

    font-size:13px;

    font-weight:600;

}

/*==============================================================
BACK TO TOP INSIDE FOOTER
==============================================================*/

.footer-top{

    position:absolute;

    right:40px;

    top:-25px;

}

.footer-top a{

    width:60px;

    height:60px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:

    linear-gradient(
    135deg,
    var(--primary),
    var(--secondary));

    color:white;

    font-size:20px;

    box-shadow:

    0 20px 35px rgba(0,0,0,.20);

    transition:.35s;

}

.footer-top a:hover{

    transform:
    translateY(-5px)
    rotate(360deg);

}

/*==============================================================
RESPONSIVE
==============================================================*/

@media(max-width:991px){

.footer{

text-align:center;

}

.footer h5::after{

margin-inline:auto;

}

.footer-social{

justify-content:center;

}

.footer-contact{

justify-content:center;

}

.footer-bottom{

justify-content:center;

}

.footer-legal{

justify-content:center;

}

.footer-badges{

justify-content:center;

}

}

@media(max-width:768px){

.footer{

padding-top:70px;

}

.footer-logo{

justify-content:center;

}

.footer-top{

right:20px;

}

.footer-top a{

width:55px;

height:55px;

}

.footer-newsletter .btn{

height:54px;

}

}
/*==============================================================
FLOATING WHATSAPP
==============================================================*/

.whatsapp-float{

    position:fixed;

    right:25px;

    bottom:95px;

    width:68px;

    height:68px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:linear-gradient(
        135deg,
        #25D366,
        #128C7E);

    color:#fff;

    font-size:32px;

    text-decoration:none;

    z-index:9998;

    box-shadow:
        0 20px 40px rgba(37,211,102,.35);

    transition:all .35s ease;

    animation:whatsappPulse 2s infinite;

}

.whatsapp-float:hover{

    color:#fff;

    transform:
        translateY(-6px)
        scale(1.08);

    box-shadow:
        0 25px 50px rgba(37,211,102,.45);

}

.whatsapp-float::before{

    content:"";

    position:absolute;

    inset:-8px;

    border-radius:50%;

    border:2px solid rgba(37,211,102,.25);

    animation:ringPulse 2s infinite;

}

/*==============================================================
BACK TO TOP
==============================================================*/

.back-to-top{

    position:fixed;

    right:25px;

    bottom:20px;

    width:60px;

    height:60px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary));

    color:white;

    text-decoration:none;

    font-size:22px;

    opacity:0;

    visibility:hidden;

    transform:translateY(20px);

    transition:all .35s ease;

    z-index:9998;

    box-shadow:
        0 20px 35px rgba(0,0,0,.18);

}

.back-to-top.active{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

.back-to-top:hover{

    color:white;

    transform:
        translateY(-5px)
        rotate(360deg);

}

/*==============================================================
PAGE LOADER
==============================================================*/

#page-loader{

    position:fixed;

    inset:0;

    background:#ffffff;

    display:flex;

    align-items:center;

    justify-content:center;

    z-index:99999;

    transition:opacity .5s ease,
               visibility .5s ease;

}

#page-loader.loaded{

    opacity:0;

    visibility:hidden;

}

/*==============================================================
SPINNER
==============================================================*/

.loader-circle{

    position:relative;

    width:90px;

    height:90px;

    border-radius:50%;

    border:6px solid rgba(15,118,110,.15);

    border-top:6px solid var(--primary);

    animation:loaderSpin 1s linear infinite;

}

.loader-circle::before{

    content:"";

    position:absolute;

    inset:12px;

    border-radius:50%;

    border:5px solid rgba(37,99,235,.15);

    border-top:5px solid var(--secondary);

    animation:loaderSpinReverse 1.2s linear infinite;

}

/*==============================================================
LOADER TEXT
==============================================================*/

.loader-text{

    position:absolute;

    margin-top:150px;

    font-weight:700;

    letter-spacing:2px;

    color:var(--primary);

    text-transform:uppercase;

}

/*==============================================================
TOP PROGRESS BAR
==============================================================*/

.page-progress{

    position:fixed;

    top:0;

    left:0;

    width:0;

    height:4px;

    background:linear-gradient(
        90deg,
        var(--primary),
        var(--secondary));

    z-index:10000;

    transition:width .2s linear;

}

/*==============================================================
CUSTOM CURSOR
==============================================================*/

.cursor{

    position:fixed;

    width:18px;

    height:18px;

    border-radius:50%;

    background:var(--primary);

    pointer-events:none;

    transform:translate(-50%,-50%);

    z-index:99999;

    transition:
        transform .08s linear,
        width .2s,
        height .2s;

    mix-blend-mode:difference;

}

.cursor-outline{

    position:fixed;

    width:42px;

    height:42px;

    border-radius:50%;

    border:2px solid rgba(15,118,110,.4);

    pointer-events:none;

    transform:translate(-50%,-50%);

    z-index:99998;

    transition:
        transform .15s linear;

}

.cursor-grow{

    width:40px;

    height:40px;

}

/*==============================================================
SECTION REVEAL
==============================================================*/

.reveal{

    opacity:0;

    transform:translateY(60px);

    transition:1s ease;

}

.reveal.active{

    opacity:1;

    transform:translateY(0);

}

/*==============================================================
FLOATING SHAPES
==============================================================*/

.floating-shape{

    position:absolute;

    border-radius:50%;

    opacity:.08;

    animation:floatingShape 12s infinite ease-in-out;

}

.floating-shape.one{

    width:180px;

    height:180px;

    background:var(--primary);

}

.floating-shape.two{

    width:120px;

    height:120px;

    background:var(--secondary);

}

.floating-shape.three{

    width:80px;

    height:80px;

    background:var(--accent);

}

/*==============================================================
KEYFRAMES
==============================================================*/

@keyframes loaderSpin{

100%{

transform:rotate(360deg);

}

}

@keyframes loaderSpinReverse{

100%{

transform:rotate(-360deg);

}

}

@keyframes whatsappPulse{

0%{

transform:scale(1);

}

50%{

transform:scale(1.08);

}

100%{

transform:scale(1);

}

}

@keyframes ringPulse{

0%{

transform:scale(.9);

opacity:1;

}

100%{

transform:scale(1.5);

opacity:0;

}

}

@keyframes floatingShape{

0%{

transform:translateY(0) rotate(0);

}

50%{

transform:translateY(-30px) rotate(180deg);

}

100%{

transform:translateY(0) rotate(360deg);

}

}

/*==============================================================
GLASS EFFECT
==============================================================*/

.glass{

    background:rgba(255,255,255,.08);

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.15);

}

/*==============================================================
HOVER SCALE
==============================================================*/

.scale-hover{

    transition:.35s ease;

}

.scale-hover:hover{

    transform:scale(1.05);

}

/*==============================================================
SHADOW UTILITIES
==============================================================*/

.shadow-soft{

    box-shadow:
        0 20px 40px rgba(0,0,0,.08);

}

.shadow-large{

    box-shadow:
        0 35px 70px rgba(0,0,0,.15);

}

/*==============================================================
RESPONSIVE
==============================================================*/

@media(max-width:768px){

.whatsapp-float{

width:60px;

height:60px;

font-size:28px;

right:18px;

bottom:85px;

}

.back-to-top{

width:54px;

height:54px;

right:18px;

bottom:18px;

}

.cursor,
.cursor-outline{

display:none;

}

.loader-circle{

width:70px;

height:70px;

}

.loader-text{

font-size:13px;

margin-top:120px;

}

}
/*==============================================================
DARK MODE
DMHEALTH360™
==============================================================*/

body.dark-mode{

    background:#0f172a;

    color:#e5e7eb;

}

body.dark-mode section{

    background:#0f172a !important;

}

body.dark-mode .card,
body.dark-mode .feature-card,
body.dark-mode .service-card,
body.dark-mode .pricing-card,
body.dark-mode .document-card,
body.dark-mode .step-card,
body.dark-mode .advantage-card,
body.dark-mode .partner-card,
body.dark-mode .contact-form,
body.dark-mode .contact-info,
body.dark-mode .timeline-content,
body.dark-mode .comparison-box,
body.dark-mode .ecosystem-card,
body.dark-mode .accordion,
body.dark-mode .cta-card{

    background:#1e293b;

    color:#f8fafc;

    border-color:rgba(255,255,255,.08);

}

body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6{

    color:#ffffff;

}

body.dark-mode p,
body.dark-mode li,
body.dark-mode span{

    color:#cbd5e1;

}

body.dark-mode .form-control,
body.dark-mode .form-select{

    background:#334155;

    border-color:#475569;

    color:#fff;

}

body.dark-mode .form-control::placeholder{

    color:#94a3b8;

}

body.dark-mode .navbar.scrolled{

    background:rgba(15,23,42,.95);

}

body.dark-mode .footer{

    background:#020617;

}

/*==============================================================
GLOBAL HOVER EFFECTS
==============================================================*/

.hover-lift{

    transition:.35s;

}

.hover-lift:hover{

    transform:translateY(-10px);

}

.hover-zoom{

    overflow:hidden;

}

.hover-zoom img{

    transition:.45s;

}

.hover-zoom:hover img{

    transform:scale(1.08);

}

.hover-rotate i{

    transition:.4s;

}

.hover-rotate:hover i{

    transform:rotate(10deg);

}

/*==============================================================
GLOBAL ANIMATIONS
==============================================================*/

.fade-up{

    animation:fadeUp .8s ease both;

}

.fade-left{

    animation:fadeLeft .8s ease both;

}

.fade-right{

    animation:fadeRight .8s ease both;

}

.zoom-in{

    animation:zoomIn .8s ease both;

}

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(50px);

}

to{

opacity:1;

transform:translateY(0);

}

}

@keyframes fadeLeft{

from{

opacity:0;

transform:translateX(-60px);

}

to{

opacity:1;

transform:translateX(0);

}

}

@keyframes fadeRight{

from{

opacity:0;

transform:translateX(60px);

}

to{

opacity:1;

transform:translateX(0);

}

}

@keyframes zoomIn{

from{

opacity:0;

transform:scale(.85);

}

to{

opacity:1;

transform:scale(1);

}

}

/*==============================================================
GRADIENT BACKGROUNDS
==============================================================*/

.bg-gradient-primary{

background:linear-gradient(
135deg,
var(--primary),
var(--secondary));

color:white;

}

.bg-gradient-success{

background:linear-gradient(
135deg,
#16a34a,
#22c55e);

color:white;

}

.bg-gradient-dark{

background:linear-gradient(
135deg,
#111827,
#1f2937);

color:white;

}

/*==============================================================
GLASS EFFECTS
==============================================================*/

.glass-card{

background:rgba(255,255,255,.08);

backdrop-filter:blur(18px);

-webkit-backdrop-filter:blur(18px);

border:1px solid rgba(255,255,255,.12);

}

/*==============================================================
BORDER UTILITIES
==============================================================*/

.rounded-xl{

border-radius:30px;

}

.rounded-2xl{

border-radius:40px;

}

/*==============================================================
SPACING
==============================================================*/

.py-7{

padding:140px 0;

}

.mt-7{

margin-top:7rem;

}

.mb-7{

margin-bottom:7rem;

}

/*==============================================================
TEXT UTILITIES
==============================================================*/

.text-primary-gradient{

background:linear-gradient(
90deg,
var(--primary),
var(--secondary));

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

.text-shadow{

text-shadow:

0 5px 20px rgba(0,0,0,.20);

}

/*==============================================================
IMAGE UTILITIES
==============================================================*/

.img-shadow{

box-shadow:

0 30px 70px rgba(0,0,0,.18);

}

.img-rounded{

border-radius:30px;

}

/*==============================================================
TRANSITIONS
==============================================================*/

.transition{

transition:.35s ease;

}

/*==============================================================
RESPONSIVE LARGE
==============================================================*/

@media(max-width:1200px){

.display-3{

font-size:3.5rem;

}

.display-4{

font-size:3rem;

}

.display-5{

font-size:2.4rem;

}

}

/*==============================================================
RESPONSIVE TABLET
==============================================================*/

@media(max-width:991px){

section{

padding:80px 0;

}

.display-3{

font-size:3rem;

}

.display-4{

font-size:2.5rem;

}

.hero-title{

font-size:3rem;

}

.container{

padding-inline:20px;

}

}

/*==============================================================
RESPONSIVE MOBILE
==============================================================*/

@media(max-width:768px){

section{

padding:70px 0;

}

.display-3{

font-size:2.4rem;

}

.display-4{

font-size:2rem;

}

.display-5{

font-size:1.8rem;

}

.hero-title{

font-size:2.2rem;

}

.hero-buttons{

flex-direction:column;

}

.hero-buttons .btn{

width:100%;

}

.counter-box h2{

font-size:40px;

}

.about-stat{

width:100%;

}

.contact-form{

padding:25px;

}

}

/*==============================================================
RESPONSIVE SMALL MOBILE
==============================================================*/

@media(max-width:576px){

.section-badge{

font-size:12px;

padding:10px 18px;

}

.btn{

padding:14px 24px;

font-size:15px;

}

.hero-title{

font-size:2rem;

}

.hero-description{

font-size:1rem;

}

.timeline-item{

padding-left:90px;

}

.timeline-icon{

width:55px;

height:55px;

font-size:20px;

}

}

/*==============================================================
PRINT
==============================================================*/

@media print{

.navbar,

.footer,

.whatsapp-float,

.back-to-top{

display:none !important;

}

body{

background:white;

color:black;

}

}

/*==============================================================
PERFORMANCE
==============================================================*/

img{

content-visibility:auto;

}

.card,
.feature-card,
.service-card,
.pricing-card{

will-change:transform;

}

/*==============================================================
END OF FILE
DMHEALTH360™
==============================================================*/

/* =================================================
PACK TERANGA PERFORMANCE
OFFRE SIGNATURE DMHEALTH360™
================================================= */


/* Carte premium */
.performance-pack {
    background: linear-gradient(
        180deg,
        #ffffff 0%,
        #f5fff8 100%
    );

    border: 2px solid #16a34a !important;
    transform: scale(1.04);
    transition: all 0.4s ease;
    position: relative;
    z-index: 5;

    box-shadow:
        0 20px 50px rgba(22,163,74,0.25),
        0 0 30px rgba(22,163,74,0.15);
}



/* Effet au passage souris */
.performance-pack:hover {

    transform:
        translateY(-15px)
        scale(1.07);

    box-shadow:
        0 35px 80px rgba(22,163,74,0.35),
        0 0 45px rgba(22,163,74,0.35);

}




/* Lumière premium animée */
.performance-pack::before {

    content:"";
    position:absolute;

    top:-50%;
    left:-50%;

    width:200%;
    height:200%;

    background:
    linear-gradient(
        120deg,
        transparent,
        rgba(34,197,94,0.18),
        transparent
    );

    transform:rotate(25deg);

    animation:
        shinePerformance 5s infinite;

}



@keyframes shinePerformance {

    0% {
        transform:
        translateX(-100%)
        rotate(25deg);
    }

    100% {
        transform:
        translateX(100%)
        rotate(25deg);
    }

}





/* Badge haut de gamme */
.performance-pack .popular-badge {

    position:absolute;

    top:18px;
    right:-45px;

    background:
    linear-gradient(
        135deg,
        #16a34a,
        #22c55e
    );

    color:white;

    padding:
    10px 50px;

    font-size:12px;
    font-weight:800;

    transform:
    rotate(35deg);

    box-shadow:
    0 10px 25px rgba(0,0,0,.25);

    z-index:20;

}




/* Zone prix */
.performance-pack .pricing-header {

    background:
    linear-gradient(
        135deg,
        #065f46,
        #16a34a,
        #22c55e
    )
    !important;

}



.performance-pack .amount {

    text-shadow:
    0 5px 20px rgba(0,0,0,.3);

}



/* Titres catégories */
.performance-pack h6 {

    letter-spacing:.5px;

}



/* Box coordination clinique */
.clinical-box {

    background:
    linear-gradient(
        135deg,
        #ffffff,
        #ecfdf5
    )
    !important;

    border-left:
    6px solid #16a34a !important;

    box-shadow:
    0 8px 25px rgba(22,163,74,.15);

}





/* Livrables */
.monthly-box {

    background:
    linear-gradient(
        135deg,
        #064e3b,
        #16a34a
    )
    !important;

    box-shadow:
    0 12px 30px rgba(22,163,74,.35);

}






/* Bouton premium */
.performance-pack .btn-success {

    background:
    linear-gradient(
        135deg,
        #16a34a,
        #22c55e
    );

    border:none;

    font-weight:800;

    padding:15px;

    transition:.3s;

}




.performance-pack .btn-success:hover {

    transform:scale(1.05);

    box-shadow:
    0 15px 35px rgba(22,163,74,.45);

}





/* Responsive mobile */
@media(max-width:768px){

    .performance-pack {

        transform:none;

        margin-top:30px;

    }


    .performance-pack:hover {

        transform:
        translateY(-8px);

    }


}