body {
    /* overflow-x: hidden; */
}

/* .container {
    max-width: 1200px;
    margin: auto;
}

.col-6 {
    margin-left: -20px;
    margin-right: -20px;
} */

/*********************************************************/

#impact .row {
    display: flex;
    flex-wrap: wrap;
}

#impact .col-6 {
    padding: 0 20px;
    width: 50%;
}

#impact .text {
    font-size: 32px;
    font-weight: 400;
    line-height: 54px;
    letter-spacing: 0em;
    text-align: left;
}

#impact .text-blue {
    margin: 100px 0 80px;
    color: #009F95;
}

#impact .text-green {
    margin: 200px 0 200px;
    color: #8CB432;
}

#impact .text-orange {
    margin: 200px 0 200px;
    color: #DC6428;
}

/*********************************************************/

#impact .cam-wrap {
    height: 1150px;
    display:flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-top: 100px;
    margin-bottom: 100px;
}

#impact .cam-img {
    width: 550px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

#impact .cam-img img {
    width: 100%;
}

#impact .cam-text {
    color: #626262;
    font-size: 32px;
    font-weight: 500;
    line-height: 39px;
    letter-spacing: 0em;
    text-align: center;
    position: absolute;
    margin-top: 60px;
}

#impact .cam-text a {
    color: inherit;
    text-decoration: none;
}

#impact .odd {
    position: absolute;
    width: 145px;
    height: 145px;
}

#impact .odd img {
    width: 100%;
}

#impact .odd-1 {
    top: 86px;
    left: 557px;
}

#impact .odd-2 {
    top: 136px;
    left: 769px;
}

#impact .odd-3 {
    top: 282px;
    left: 874px;
}

#impact .odd-4 {
    left: 877px;
    top: 337px;
}

#impact .odd-5 {
    left: 901px;
    top: 590px
}

#impact .odd-6 {
    left: 794px;
    top: 816px;
}

#impact .odd-7 {
    left: 585px;
    top: 953px;
}

#impact .odd-8 {
    left: 353px;
    top: 939px;
}

#impact .odd-9 {
    left: 148px;
    top: 749px;
}

#impact .odd-11 {
    left: 80px;
    top: 641px;
}

#impact .odd-13 {
    left: 80px;
    top: 505px;
}

#impact .odd-15 {
    left: 152px;
    top: 267px;
}

#impact .odd-17 {
    left: 323px;
    top: 113px;
}

#impact .odd-modale {
    position: absolute;
    width: 500px;
    padding: 20px;
    box-shadow: 6px 4px 29px -5px #00000040;
    background-color: #fff;
    opacity: 0;
    visibility: hidden;
    z-index: 1;
}

#impact .odd-modale p {
    color: #636363;
}

#impact .odd-modale hr {
    border: 1px solid #0000001C
}

#impact .odd-modale .title {
    font-size: 20px;
    font-weight: 700;
    line-height: 30px;
}
#impact .odd-modale .cible {
    font-size: 15px;
    font-weight: 700;
}
#impact .odd-modale .content {
    font-size: 16px;
    font-weight: 400;
}
#impact .odd-modale .content span {
    font-weight: 700;
    font-size: 32px;
}

#impact .cursor {
    width: 18px;
    height: 18px;
    background-color: #aa0f37;
    border-radius: 50%;
    border: 4px solid #E8E8E8;
    position: absolute;
}
#impact .arrow {
    position: absolute;
    width: 310px;
    height: 53px;
    background: none;
    z-index: 0;
}

#impact .top.left .cursor {
    top: -60px;
    left: -60px;
}
#impact .top.left .arrow {
    border-top: 4px solid #E8E8E8;
    border-right: 4px solid #E8E8E8;
    top: -53px;
    left: -51px;
}
#impact .top.left .odd-modale {
    top: 120px;
    left: 220px;
}

#impact .top.right .cursor{
    top: -60px;
    right: -60px;
}

#impact .top.right .arrow {
    border-top: 4px solid #E8E8E8;
    border-left: 4px solid #E8E8E8;
    top: -53px;
    right: -51px;
}
#impact .top.right .odd-modale {
    top: 120px;
    left: -550px;
}

#impact .bottom.right .cursor{
    bottom: -60px;
    right: -60px;
}
#impact .bottom.right .arrow {
    border-bottom: 4px solid #E8E8E8;
    border-left: 4px solid #E8E8E8;
    bottom: -53px;
    right: -51px;
}
#impact .bottom.right .odd-modale {
    bottom: 120px;
    left: -530px;
}

#impact .bottom.left .cursor{
    bottom: -60px;
    left: -60px;
}
#impact .bottom.left .arrow {
    border-bottom: 4px solid #E8E8E8;
    border-right: 4px solid #E8E8E8;
    bottom: -53px;
    left: -51px;
}
#impact .bottom.left .odd-modale {
    bottom: 120px;
    left: 220px;
}

@media (min-width: 1200px) {
    #impact .odd:hover {
        z-index: 99;
    }
    #impact .odd:hover .odd-modale {
        visibility: visible;
        opacity: 1;
    }
}

#impact .odd-1 span {
    color: #EB1C2D;
}
#impact .odd-2 span {
    color: #D3A029;
}
#impact .odd-3 span {
    color: #279B48;
}
#impact .odd-4 span {
    color: #C31F33;
}
#impact .odd-5 span {
    color: #E72922;
}
#impact .odd-6 span {
    color: #00AED9;
}
#impact .odd-7 span {
    color: #FCB617;
}
#impact .odd-8 span {
    color: #982E47;
}
#impact .odd-9 span {
    color: #F16E25;
}
#impact .odd-11 span {
    color: #F88B1D;
}
#impact .odd-13 span {
    color: #48773E;
}
#impact .odd-15 span {
    color: #5DBB46;
}
#impact .odd-17 span {
    color: #183668;
}

/*********************************************************/

#impact h2 {
    position: relative;
    font-size: 36px;
    font-weight: 600;
    line-height: 44px;
    letter-spacing: 0em;
    text-align: left;
    color: #fff;
    margin-bottom: 20px;
}

#impact h2::before {
    content: '';
    position: absolute;
    width: 1000px;
    background-color: white;
    height: 4px;
    right: calc(22px + 100%);
    top: 20px;
}

#impact h3 {
    font-size: 24px;
    font-weight: 600;
    line-height: 29px;
    letter-spacing: 0em;
    color: #fff;
    margin-bottom: 20px;
}

#impact h5 {
    font-size: 20px;
    font-weight: 500;
    text-decoration: underline;
    margin-bottom: 20px;
    line-height: 25px;
}

#impact .section-blue h5 {
    color: #197C76;
    font-weight: 600;
}

#impact .section-green h5 {
    color: #3C422F;
    font-weight: 600;
}

#impact .section-orange h5 {
    color: #98461E;
    font-weight: 600;
}

#impact :is(.section-blue, .section-green, .section-orange) p {
    color: #fff;
    font-size: 20px;
    font-weight: 400;
}

#impact :is(.section-blue, .section-green, .section-orange) span {
    font-size: 36px;
    font-weight: 700;
}

#impact .odd-img {
    width: 95px;
    height: 95px;
    margin-right: 10px;
}

#impact .img-cycle {
    margin-top: 80px;
    text-align: center;
}

#impact .img-cycle img {
    width: 350px;
}

#impact .section-img {
    position: relative;
}

#impact .section-img img {
    width: 100%;
    left:0;
    position: absolute;
    top: -130px;
}

#impact .odd-wrap {
    margin: 10px 0;
}

/*********************************************************/

#impact .section-blue {
    position: relative;
    background-color: #8AD3CE;
    width: 100%;
    margin-top: 280px;
    padding-top: 220px;
    padding-bottom: 150px;
}
#impact .section-blue::before {
    content: '';
    position: absolute;
    left: -100%;
    width: 100%;
    background-color: #8AD3CE;
    height: 100%;
    top: 0;
}
#impact .section-blue::after {
    content: '';
    position: absolute;
    right: -150px;
    width: 150px;
    background-color: #8AD3CE;
    height: 100%;
    border-top-right-radius: 150px;
    top: 0;
}
#impact .circle-wrap {
    display: flex;
    width: 100%;
    justify-content: space-around;
    position: absolute;
    top: 0;
    transform: translateY(-50%);
}

#impact .circle {
    width: 290px;
    height: 290px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 20px;
}

#impact .circle a {
    color: white;
    font-size: 26px;
    font-weight: 600;
    line-height: 30px;
}

#impact .circle.blue {
    background-color: #009F95;
}

#impact .circle.green {
    background-color: #8CB432;
}

#impact .circle.orange {
    background-color: #DD682F;
}

#impact .section-img.blue img {
    right: 20px;
}

/*********************************************************/

#impact .section-green {
    position: relative;
    background-color: #bed688;
    width: 100%;
    padding-top: 80px;
    padding-bottom: 150px;
}
#impact .section-green::before {
    content: '';
    position: absolute;
    left: -150px;
    width: 150px;
    background-color: #bed688;
    height: 100%;
    border-bottom-left-radius: 300px;
    top: 0;
}
#impact .section-green::after {
    content: '';
    position: absolute;
    right: -100%;
    width: 100%;
    background-color: #bed688;
    height: 100%;
    top: 0;
}

#impact .section-img.green img {
    left: 20px;
}


/*********************************************************/

#impact .section-orange {
    position: relative;
    background-color: #E28A5F;
    width: 100%;
    padding-top: 80px;
    padding-bottom: 200px;
}
#impact .section-orange::before {
    content: '';
    position: absolute;
    left: -100%;
    width: 100%;
    background-color: #E28A5F;
    height: 100%;
    top: 0;
}
#impact .section-orange::after {
    content: '';
    position: absolute;
    right: -150px;
    width: 150px;
    background-color: #E28A5F;
    height: 100%;
    border-bottom-right-radius: 150px;
    top: 0;
}

#impact .section-img.orange img {
    left: -20px;
}

/*********************************************************/

@media (max-width: 768px) {
    #impact .img-cycle img {
        width: 100%;
        margin-bottom: 50px;
    }
}

@media (max-width: 992px) {
    #impact .col-6 {
        width: 100%;
    }

    #impact .section-img img {
        display: none;
        /* top: -130px; */
    }

    #impact .cam-img {
        width: 100%;
    }

    #impact .section-blue::after,
    #impact .section-blue::before,
    #impact .section-green::after,
    #impact .section-green::before,
    #impact .section-orange::after,
    #impact .section-orange::before
    {
        content: none;
    }

    #impact .circle-wrap {
        flex-direction: column;
        align-items: center;
        transform: translateY(calc(-50% + 25px));
    }

    #impact .circle {
        width: 220px;
        height: 220px;
        margin-bottom: 50px;
    }

    #impact .section-blue {
        margin-top: 450px;
        padding-top: 430px;
    }

    #impact .odd-img {
        margin-bottom: 10px;
    }
}

@media (max-width: 1200px) {
    #impact .cam-wrap {
        height: auto;
    }

    #impact .cam-text {
        font-size: 25px;
        line-height: 25px;
    }

    #impact .odd {
        position: static;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        height: auto;
        margin-bottom: 50px;
    }

    #impact .odd-modale {
        position: static;
        visibility: visible;
        opacity: 1;
        width: 100%;
    }

    #impact .odd img {
        height: 200px;
        width: 200px;
    }

    #impact .odd-modale :is(.cursor, .arrow) {
        display: none;
    }
}