* {
    --couleur-lien-active: #24699f;
    --couleur-lien: #11bbe1;
    --color-back-content: #dce3ee;
    --color-text-blanc: #fff;
    --back-color-boutons: rgba(18, 186, 227, 255);
}

#head-sec {
    background: url("../images/Entete.png");
    background-position: center;
    background-size: cover;
    height: 70vh;
    position: relative;
}

#service-home {
    position: absolute;
    left: 6%;
    top: 80%;
    transform: translateY(-50px);
    display: flex;
    align-items: center;
}

#service-home i {
    font-size: 6rem;
}

#service-home h4 {
    font-size: 3rem;
    color: var(--color-text-blanc);
    font-family: "Merriweather", serif;
    font-weight: bold;
    font-style: italic;
}

.all-section {
    margin: 4rem 0;
    display: flex;
    flex-direction: column;
    row-gap: 10rem;
}

.box-1 {
    padding: 6rem 6%;
    display: flex;
    column-gap: 8rem;
}

.box-1 .image {
    width: 250px;
    height: 250px;
    border-radius: 20px;
    border: 0.3rem solid rgba(221, 226, 239, 255);
    padding: 4rem;
}

.box-1 .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bar {
    width: 100%;
    height: 1px;
    background-color: var(--color-back-content);
}

.right {
    display: flex;
    flex-direction: column;
    row-gap: 2rem;
    width: 60%;
}

.right h4 {
    font-size: 3rem;
    color: var(--couleur-lien-active);
    font-weight: bold;
    font-family: "Ubuntu", sans-serif;
}

.right p {
    color: var(--couleur-lien-active);
    font-size: 2.3rem;
    font-weight: 400;
    font-family: "Ubuntu", sans-serif;
}

.right a {
    font-weight: 500;
    color: var(--couleur-lien);
    font-size: 2rem;
    text-decoration: underline;
    font-family: "Ubuntu", sans-serif;
}

@media screen and (max-width: 980px) {
    .right a {
        font-size: 1.5rem;
    }

    .right p {
        font-size: 1.5rem;
    }

    .right h4 {
        font-size: 2rem;
    }
}

@media screen and (max-width: 715px) {
    .box-1 {
        padding: 6rem 6%;
        display: flex;
        row-gap: 4rem;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .box-1 .image {
        width: 300px;
        height: 300px;
    }

    .right {
        width: 100%;
    }

    .all-section {
        row-gap: 2rem;
    }
}