#how_work_block{
    height:800px;
    width:100%;
    position:relative;
}
#how_work_block_small{
    display: none;
}
#how_work_block_small .steps-group{
    padding: 20px;
    margin-bottom:40px;
}

#how_work_block_small .steps-group div{
    font-family: "Poppins", sans-serif;
    background-color:#FF416F;
    color: white;
    width:30px;
    height:30px;
    border-radius:30px;
    display:flex;
    justify-content:center;
    align-items: center;
}
#how_work_block_small .steps-group img{
    height:140px;
    width:100%;
}

@media (max-width: 768px) {
    #how_work_block{
        display: none;
    }
    #how_work_block_small{
        display: block;
    }
}

.how-does-it-work{
    height:100%;
    width:100%;
    position:absolute;
}

.presentation_block{
    width:100%;
    height:800px;
}

.presentation_block img{
    height:100%;
    width:100%;
}

.qualities{
    opacity:0;
    transition:opacity 0.3s ease;
    list-style-type: none;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    width:100%;
}
.qualities.shown{
    opacity:1;
}
.qualities li{
    padding: 5px 15px;
    text-transform: uppercase;
    font-family: "Poppins", sans-serif;
    margin:10px;
}
.presentation_block_small{
    display:none;
}
.presentation_block_small .assmat{
    height:100%;
    width:100%;
}

.presentation_block_small .presentation-group{
    margin-bottom:50px;
}
.presentation_block{
    position:relative;
}
.presentation_block::after{
    content: '';
    position: absolute;
    bottom: 100px;
    width: 0;
    right: 50%;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid #F0BF26;
    animation: floatArrow 2s ease-in-out infinite;
}
.presentation_block:has(.qualities.shown){
    content: unset;
}
.presentation_block_small .presentation-picto{
    height:50px;
    width:50px;
}
@keyframes floatArrow {
    0% {
        transform: translateX(-50%) translateY(0);
    }
    50% {
        transform: translateX(-50%) translateY(-10px); /* Ajuste la distance du flottement */
    }
    100% {
        transform: translateX(-50%) translateY(0);
    }
}

@media (max-width: 1400px) {
    .presentation_block::after{
        bottom:130px;
    }
}
@media (max-width: 1200px) {
    .presentation_block::after{
        bottom:190px;
        right:49.25%;
    }
}
@media (max-width: 992px) {
    .presentation_block {
        height:600px;
    }
    .presentation_block::after{
        bottom:130px;
        right:49.25%;
    }
}
@media (max-width: 768px) {
    .presentation_block, .infographies {
        display: none;
    }
    .qualities{
        opacity:1;
    }
    .presentation_block_small{
        display:block;
    }
}