/* section services */
    .container_services{
        width: max-content;
        max-width: 100%;
        margin: 25px auto 16px auto;
        display: flex;
        justify-content: center;
        gap: 16px;
        flex-wrap: wrap;
    }

    .content_service{
        flex: 0 0 260px;
        border-bottom: 2px solid var(--blue);
        border-radius: 12px;
    }

    .box_img_service{
        position: relative;
        width: 100%;
        height: 150px;
        overflow: hidden;
    }

    .box_img_service:before{
        content: '';
        position: absolute;
        left: 0; top: 0;
        width: 100%;
        height: 150px;
        z-index: 1;
        background-image: linear-gradient(to bottom, transparent, transparent, transparent, var(--blue));
        clip-path: polygon(18% 0, 70% 0%, 100% 0, 100% 70%, 100% 100%, 0 100%, 0% 70%, 0% 30%);
    }

    .box_img_service .img_service{
        width: 100%;
        height: 100%;
        object-fit: cover;
        clip-path: polygon(18% 0, 70% 0%, 100% 0, 100% 70%, 100% 100%, 0 100%, 0% 70%, 0% 30%);
    }

    .content_service:hover img{
        scale: 1.1;
    }

    .icon_service{
        position: absolute;
        width: 65px; height: 65px;
        bottom: -30px; left: 25px;
        background: var(--white);
        border-radius: 50%;
        padding: 10px;
        z-index: 10;
    }

    .icon_service img{
        width: 100%; height: 100%;
        object-fit: contain;
    }

    .text_service{
        position: relative;
        z-index: 10;
        padding: 16px 16px 8px 16px;
    }

    .titre_service{
        font-weight: 700;
        margin-bottom: 8px;
    }

    .description_service{
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-align: justify;
        margin-bottom: 8px;
    }

    .savoir_plus{
        display: flex;
        align-items: center;
        gap: 5px;
        font-weight: 600;
        color: var(--yellow);
        svg{
            fill: var(--yellow);
        }
    }

    .savoir_plus:hover{
        color: var(--blue);
        svg{
            fill: var(--blue);
        }
    }
/* section services */

/* responsive */
    /* section services */
        @media screen and (max-width: 450px) {
            .content_service{
                flex: 0 0 85%;
            }
        }
    /* section services */
/* responsive */