/* =========================================================
   DAWINI — SOINS & PANSEMENTS
   PAGE SEO
========================================================= */

.care-page {

    --care-blue: #10366d;
    --care-blue-dark: #092d5c;

    --care-turquoise: #13aaa9;
    --care-turquoise-dark: #079594;
    --care-turquoise-light: #e1f7f8;

    --care-text: #173b70;
    --care-text-light: #607692;

    --care-border: #e1edf3;
    --care-bg: #f7fbfd;
    --care-white: #ffffff;

    width: 100%;
    overflow: hidden;

    color: var(--care-text);

    background: #fff;

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

    line-height: 1.6;
}

.care-page *,
.care-page *::before,
.care-page *::after {
    box-sizing: border-box;
}

.care-page a {
    text-decoration: none;
}

.care-page img {
    max-width: 100%;
    display: block;
}

.care-container {
    width: min(1380px, calc(100% - 80px));
    margin: 0 auto;
}


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

.care-hero {

    position: relative;

    min-height: 520px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 78% 35%,
            rgba(31,174,190,.17),
            transparent 28%
        ),
        linear-gradient(
            120deg,
            #effaff 0%,
            #f9fcfd 53%,
            #e8f6fa 100%
        );
}

.care-hero::after {

    content: "";

    position: absolute;

    width: 600px;
    height: 600px;

    border-radius: 50%;

    right: -180px;
    top: -160px;

    background: rgba(28,174,185,.06);

    pointer-events: none;
}


.care-hero-grid {

    min-height: 520px;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);

    align-items: center;

    gap: 50px;

    position: relative;

    z-index: 2;
}


/* =========================================================
   BREADCRUMB
========================================================= */

.care-breadcrumb {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 8px;

    font-size: 12px;

    color: #6e86a3;

    margin-bottom: 20px;
}

.care-breadcrumb a {
    color: #6e86a3;
}

.care-breadcrumb a:hover {
    color: var(--care-turquoise);
}

.care-breadcrumb i {
    font-size: 9px;
    color: #9bb2c8;
}

.care-breadcrumb span {
    color: var(--care-turquoise);
}


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

.care-hero h1 {

    margin: 0;

    font-family: "Manrope", sans-serif;

    font-size: clamp(42px, 4.2vw, 65px);

    line-height: 1.08;

    color: var(--care-blue);

    font-weight: 800;

    letter-spacing: -2px;

    max-width: 700px;
}

.care-hero h1 span {
    color: var(--care-turquoise);
}


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

.care-hero-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    margin-top: 32px;

    padding: 14px 25px;

    border-radius: 28px;

    background: var(--care-turquoise);

    color: white;

    font-size: 13px;

    font-weight: 700;

    box-shadow:
        0 12px 25px rgba(16,171,169,.20);

    transition: .3s ease;
}

.care-hero-button:hover {

    transform: translateY(-2px);

    background: var(--care-turquoise-dark);

    color: white;
}


/* =========================================================
   HERO VISUAL
========================================================= */

.care-hero-visual {

    height: 420px;

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;
}


/* MEDICAL CIRCLE */

.care-medical-circle {

    width: 360px;

    height: 360px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 35% 30%,
            rgba(255,255,255,.95),
            rgba(195,230,240,.35) 40%,
            rgba(25,156,177,.15)
        );

    border: 1px solid rgba(41,164,183,.25);

    box-shadow:

        inset 0 0 60px rgba(17,142,168,.12),

        0 20px 70px rgba(31,119,148,.12);

    position: relative;
}


/* CROSS */

.care-medical-cross {

    position: absolute;

    width: 105px;

    height: 105px;

    left: 127px;

    top: 127px;

    border-radius: 28px;

    background:
        linear-gradient(
            135deg,
            #0f91a6,
            #17bbb1
        );

    display: flex;

    align-items: center;

    justify-content: center;

    color: white;

    font-size: 43px;

    box-shadow:
        0 15px 35px rgba(10,148,160,.30);
}


/* CIRCLES */

.care-ring {

    position: absolute;

    border: 1px solid rgba(24,139,165,.25);

    border-radius: 50%;
}

.care-ring-one {

    width: 270px;
    height: 360px;

    left: 44px;
    top: 0;
}

.care-ring-two {

    width: 360px;
    height: 150px;

    left: 0;
    top: 105px;
}


/* SMALL MEDICAL DOTS */

.care-dot {

    position: absolute;

    width: 12px;
    height: 12px;

    border-radius: 50%;

    background: #0ca6ae;

    box-shadow:
        0 0 0 7px rgba(12,166,174,.12);
}

.care-dot-one {
    top: 70px;
    left: 70px;
}

.care-dot-two {
    top: 65px;
    right: 70px;
}

.care-dot-three {
    bottom: 75px;
    left: 95px;
}

.care-dot-four {
    bottom: 90px;
    right: 75px;
}


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

.care-floating-card {

    position: absolute;

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

    border: 1px solid rgba(207,229,237,.9);

    box-shadow:
        0 15px 35px rgba(21,75,110,.13);

    border-radius: 16px;

    padding: 16px 19px;

    display: flex;

    align-items: center;

    gap: 12px;

    font-size: 12px;

    font-weight: 700;

    color: var(--care-blue);

    z-index: 3;
}

.care-floating-card i {

    width: 37px;

    height: 37px;

    flex-shrink: 0;

    border-radius: 50%;

    background: var(--care-turquoise-light);

    color: #079c9e;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 17px;
}

.care-card-one {

    left: 10px;
    top: 70px;
}

.care-card-two {

    right: 0;
    top: 180px;
}

.care-card-three {

    left: 50px;
    bottom: 50px;
}


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

.care-section {

    padding: 90px 0;
}

.care-section-light {
    background: #f5fafc;
}


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

.care-section-heading {

    max-width: 780px;

    margin: 0 auto 50px;

    text-align: center;
}

.care-label {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    color: #0ca3a6;

    font-size: 12px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 1px;

    margin-bottom: 15px;
}

.care-label::before {

    content: "";

    width: 27px;

    height: 2px;

    background: #13aaa9;
}

.care-title {

    margin: 0;

    font-family: "Manrope", sans-serif;

    color: var(--care-blue);

    font-size: clamp(31px, 3vw, 45px);

    line-height: 1.18;

    font-weight: 800;

    letter-spacing: -1px;
}

.care-title span {
    color: var(--care-turquoise);
}

.care-intro {

    margin: 17px auto 0;

    max-width: 700px;

    color: var(--care-text-light);

    font-size: 15px;

    line-height: 1.85;
}


/* =========================================================
   INTRO
========================================================= */

.care-intro-grid {

    display: grid;

    grid-template-columns:
        minmax(0, .9fr)
        minmax(0, 1.1fr);

    gap: 75px;

    align-items: center;
}

.care-intro-content h2 {

    margin: 0;

    font-family: "Manrope", sans-serif;

    font-size: 36px;

    line-height: 1.2;

    color: var(--care-blue);
}

.care-intro-content h2 span {
    color: var(--care-turquoise);
}

.care-intro-content p {

    margin: 18px 0 0;

    color: var(--care-text-light);

    font-size: 14px;

    line-height: 1.9;
}


/* INFO BOX */

.care-info-box {

    padding: 35px;

    border-radius: 24px;

    background:
        linear-gradient(
            135deg,
            #eefafd,
            #f8fcfd
        );

    border: 1px solid #dceff4;

    position: relative;

    overflow: hidden;
}

.care-info-box::after {

    content: "";

    position: absolute;

    right: -35px;

    bottom: -65px;

    width: 190px;

    height: 190px;

    border-radius: 50%;

    background: rgba(15,167,171,.06);
}

.care-info-box h3 {

    margin: 0 0 15px;

    font-family: "Manrope", sans-serif;

    color: var(--care-blue);

    font-size: 21px;
}

.care-info-box p {

    margin: 0;

    color: #5c7594;

    font-size: 13px;

    line-height: 1.85;
}


/* =========================================================
   CATEGORIES
========================================================= */

.care-products-grid {

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 22px;
}

.care-product-card {

    padding: 30px;

    background: white;

    border: 1px solid var(--care-border);

    border-radius: 20px;

    transition: .3s ease;
}

.care-product-card:hover {

    transform: translateY(-5px);

    box-shadow:
        0 16px 35px rgba(20,74,104,.08);

    border-color: #cce7ec;
}

.care-product-icon {

    width: 58px;

    height: 58px;

    border-radius: 17px;

    background: var(--care-turquoise-light);

    color: #0b9fa3;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 23px;

    margin-bottom: 22px;
}

.care-product-card h3 {

    margin: 0 0 10px;

    font-family: "Manrope", sans-serif;

    color: var(--care-blue);

    font-size: 18px;
}

.care-product-card p {

    margin: 0;

    color: #627894;

    font-size: 13px;

    line-height: 1.8;
}


/* =========================================================
   LISTE DES BESOINS
========================================================= */

.care-needs {

    display: grid;

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

    gap: 18px;

    max-width: 950px;

    margin: 0 auto;
}

.care-need {

    display: flex;

    align-items: flex-start;

    gap: 13px;

    padding: 20px;

    background: white;

    border: 1px solid var(--care-border);

    border-radius: 15px;
}

.care-need i {

    color: var(--care-turquoise);

    margin-top: 3px;

    flex-shrink: 0;
}

.care-need strong {

    display: block;

    color: var(--care-blue);

    font-size: 14px;

    margin-bottom: 3px;
}

.care-need span {

    display: block;

    color: #647b96;

    font-size: 12px;

    line-height: 1.7;
}


/* =========================================================
   DAWINI PROCESS
========================================================= */

.care-process-grid {

    display: grid;

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

    gap: 20px;
}

.care-process-card {

    position: relative;

    padding: 30px 25px;

    background: white;

    border: 1px solid var(--care-border);

    border-radius: 20px;
}

.care-process-number {

    position: absolute;

    top: 17px;

    right: 20px;

    font-size: 12px;

    font-weight: 800;

    color: #9bb2c8;
}

.care-process-icon {

    width: 53px;

    height: 53px;

    border-radius: 15px;

    background: #e8f8fa;

    color: #079ea3;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 20px;

    margin-bottom: 22px;
}

.care-process-card h3 {

    margin: 0 0 10px;

    font-family: "Manrope", sans-serif;

    color: var(--care-blue);

    font-size: 16px;
}

.care-process-card p {

    margin: 0;

    color: #637993;

    font-size: 12px;

    line-height: 1.75;
}


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

.care-seo {

    background: white;
}

.care-seo-content {

    max-width: 950px;

    margin: auto;
}

.care-seo-content h2 {

    margin: 0 0 20px;

    font-family: "Manrope", sans-serif;

    color: var(--care-blue);

    font-size: 32px;
}

.care-seo-content h3 {

    margin: 30px 0 10px;

    color: var(--care-blue);

    font-family: "Manrope", sans-serif;

    font-size: 21px;
}

.care-seo-content p {

    margin: 0 0 15px;

    color: #617895;

    font-size: 14px;

    line-height: 1.9;
}


/* =========================================================
   FAQ
========================================================= */

.care-faq {

    max-width: 900px;

    margin: auto;
}

.care-faq-item {

    border-bottom: 1px solid #e1edf3;

    padding: 22px 0;
}

.care-faq-item h3 {

    margin: 0 0 8px;

    color: var(--care-blue);

    font-family: "Manrope", sans-serif;

    font-size: 16px;
}

.care-faq-item p {

    margin: 0;

    color: #647b96;

    font-size: 13px;

    line-height: 1.8;
}


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

.care-cta {

    padding: 20px 0 90px;
}

.care-cta-box {

    background:
        linear-gradient(
            135deg,
            #0d9fa1,
            #16b3af
        );

    border-radius: 26px;

    padding: 48px 55px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 30px;

    position: relative;

    overflow: hidden;
}

.care-cta-box h2 {

    margin: 0 0 9px;

    color: white;

    font-family: "Manrope", sans-serif;

    font-size: 29px;
}

.care-cta-box p {

    margin: 0;

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

    font-size: 13px;
}

.care-cta-button {

    position: relative;

    z-index: 2;

    background: white;

    color: #087f88;

    padding: 14px 23px;

    border-radius: 25px;

    font-size: 12px;

    font-weight: 800;

    white-space: nowrap;
}


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

@media(max-width:1100px) {

    .care-container {
        width: calc(100% - 40px);
    }

    .care-products-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .care-process-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}


/* =========================================================
   TABLETTE
========================================================= */

@media(max-width:768px) {

    .care-hero {
        min-height: auto;
    }

    .care-hero-grid {

        grid-template-columns: 1fr;

        padding: 60px 0 20px;

        gap: 20px;
    }

    .care-hero-visual {
        height: 360px;
    }

    .care-intro-grid {

        grid-template-columns: 1fr;

        gap: 35px;
    }

    .care-products-grid {

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

    .care-needs {

        grid-template-columns: 1fr;
    }
}


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

@media(max-width:600px) {

    .care-container {
        width: calc(100% - 30px);
    }

    .care-hero-grid {
        padding: 50px 0 20px;
    }

    .care-hero h1 {

        font-size: 39px;

        line-height: 1.12;
    }

    .care-hero-button {
        width: 100%;
    }

    .care-hero-visual {

        height: 330px;

        transform: scale(.88);

        transform-origin: center;
    }

    .care-medical-circle {

        width: 290px;

        height: 290px;
    }

    .care-ring-one {

        width: 215px;

        height: 290px;

        left: 37px;
    }

    .care-ring-two {

        width: 290px;

        height: 120px;

        top: 85px;
    }

    .care-medical-cross {

        width: 72px;

        height: 72px;

        left: 109px;

        top: 109px;

        font-size: 27px;

        border-radius: 20px;
    }

    .care-floating-card {
        transform: scale(.82);
    }

    .care-card-one {
        left: -10px;
    }

    .care-card-two {
        right: -20px;
    }

    .care-card-three {
        left: 0;
    }

    .care-section {
        padding: 65px 0;
    }

    .care-title {
        font-size: 30px;
    }

    .care-products-grid {

        grid-template-columns: 1fr;

        gap: 18px;
    }

    .care-process-grid {

        grid-template-columns: 1fr;

        gap: 18px;
    }

    .care-process-card {
        padding: 25px 22px;
    }

    .care-seo-content h2 {
        font-size: 28px;
    }

    .care-cta {
        padding: 10px 0 65px;
    }

    .care-cta-box {

        padding: 35px 25px;

        flex-direction: column;

        align-items: flex-start;
    }

    .care-cta-button {

        width: 100%;

        text-align: center;
    }
}


/* =========================================================
   PETIT MOBILE
========================================================= */

@media(max-width:400px) {

    .care-container {
        width: calc(100% - 24px);
    }

    .care-hero h1 {
        font-size: 34px;
    }

    .care-hero-visual {

        height: 300px;

        transform: scale(.78);
    }

    .care-section {
        padding: 55px 0;
    }

    .care-title {
        font-size: 27px;
    }

    .care-product-card {
        padding: 25px 20px;
    }
}