/* ----- Home Page ----- */


    /* ----- Banner Hero ----- */
    .banner-hero {
        background-color: var(--secondary-color);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        min-height: 80vh;
        gap: 1.875rem;
        width: 100%;
        text-align: center;
        color: var(--primary-color);

    }

    .hero-image {
        max-width: 18.75rem;
        max-height: 18.75rem;
        aspect-ratio: 1;
        border-radius: 50%;
    }

    .hero-buttons {
        display: flex;
        gap: 1.563rem;
    }

    /* ----- Expertise Area ----- */
    .expertise-area {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    .expertise-image {
        border-radius: 100%;
        max-width: 50%;

    }

    .expertise-content {
        width: 40%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 3rem;

        .expertise-list {
            li {
                list-style-type: disc;
                margin-left: 1.3rem;
            }
        }
    }

    /* ----- Our Treatment ----- */
    .our-treatment {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 1.875rem;

        .our-treatment-header {
            text-align: center;
        }
    }

    .our-treatment-content {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        gap: 1.875rem;
    }

    .our-treatment-content-card {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        background-color: var(--secondary-color);
        color: var(--primary-color);
        gap: 1.875rem;
        padding: 4.375rem 3.75rem;
        border-radius: 10px;
    }

    .our-treatment-card-icon {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 0.5rem;
    }

    /* ----- Centers ----- */
    .centers {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 1.875rem;
    }

    .centers-container {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        gap: 6.5rem;
        max-width: 100%;
    }
    .center-comment p {
        text-align: left;
        width: 100%;
    }
    .center-card {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        gap: 1rem;
        border-radius: 10px;
        width: 50%;
        box-sizing: content-box;

        img {
            height: 30rem;
        }
        h4, p {
            width: 100%;
            text-align: left;
        }
    }

    .center-image {
        width: 100%;
        height: 50%;
        object-fit: cover;

    }

    .schedule-container {
        display: flex;
        justify-content: space-around;
        width: 100%;
    }

    .schedule-container-left,
    .schedule-container-right {
        display: flex;
        flex-direction: column;
        gap: 1rem;

        p {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;

            strong {
                text-decoration: underline;
                text-underline-offset: 0.3rem;
                text-decoration-color: var(--accent-color);
                text-decoration-thickness: 1.5px;
            }
        }
    }



    /* Media Queries */

    /* ============================== */
    /* RESPONSIVE - ECRANS INTERMEDIAIRES */
    /* ============================== */
    @media screen and (max-width: 1200px) {

        .expertise-area {
            justify-content: space-around;
        }

        .our-treatment-content {
            max-width: 100%;
        }

        .hero-image {
            width: 90%;
            max-width: 252px;
            max-height: 252px;
        }
    }

    /* ============================== */
    /* RESPONSIVE - TABLETTES */
    /* ============================== */
    @media screen and (max-width: 992px) {
        .container {
            padding: 0.938rem 3.75rem;
        }

        .expertise-area {
            flex-direction: column-reverse;
            gap: 3rem;
        }

        .expertise-content {
            width: 80%;
            align-items: center;

            p {
                text-align: center;
            }
        }

        .expertise-image {
            max-width: 100%;
        }

    }

    @media screen and (max-width: 780px) {

        .our-treatment-content {
            flex-direction: column;
        }

        .centers-container {
            flex-direction: column;
            max-width: 100%;
            gap: 3rem !important;

            .center-card {
                width: 100%;
                box-sizing:border-box;
            }

        }

    }

    /* ============================== */
    /* RESPONSIVE - MOBILES */
    /* ============================== */
    @media screen and (max-width: 600px) {
        h3 {
            text-align: center;
        }

        .center-card     img {
            height: 20rem;
        }

        .our-treatment>p:nth-child(2) {
            width: 100%;
            text-align: center;
        }

        .centers>p:nth-child(2) {
            text-align: center;
        }
    }