.row {
    margin-left: 0;
    margin-right: 0;
}

.partTopic h3 {
    font-family: 'Jost-medium', sans-serif;
    font-size: 1.4rem;
    margin: 0;
}

.partIntro div:first-of-type {
    margin-bottom: 0;
}

@media (min-width: 480px) {}

@media (min-width: 576px) {}

@media (min-width: 768px) {
    .partIntro {
        display: flex;
    }
}

@media (min-width: 992px) {}

@media (min-width: 1200px) {}

@media (min-width: 1400px) {}

/*
==================================================

TUTO : HOW IT WORKS

==================================================
*/

.partTutoTitles {
    color: #808080;
    text-align: center;
    margin-bottom: 5rem;
}

.partTutoTitles h2 {
    font-family: 'Jost-semi-bold', sans-serif;
    font-size: 2rem;
    line-height: 120%;
    margin: 2rem 0 1rem;
}

.partTutoTitles p {
    font-family: 'Jost-regular', sans-serif;
    font-size: 1.3rem;
}

.steps button {
    min-width: 30%;
}

.steps #tutoVideoStep2 {
    width: 98%;
    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.steps #tutoVideoStep2 video {
    width: 101%;
}

.steps #tutoVideoStep3 {
    width: 14rem;
    border-radius: 1.8rem;
    border: solid 0.2rem #474747;
    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.steps #tutoVideoStep3 video {
    width: 100%
}

.slogan {
    display: flex;
    align-items: center;
    margin: 4rem 0 2rem;
    justify-content: center;
    flex-direction: column;
}

.slogan h3 {
    font-size: 2rem;
    font-family: 'Montserrat-medium', sans-serif;
    color: #FF7F50;
    line-height: 120%;
}

.slogan img {
    width: 36%;
}

.advantages {
    margin: 4rem 0 0;
}
.advantages img {
    width: 1.8rem;
}
.advantages.desktop {
    display: none;
}

.partSketch {
    display: flex;
    justify-content: center;
    flex-direction: row;
    align-items: center;
    position: relative;
}

.partSketch img {
    position: absolute;
}

@media (min-width: 480px) {
    .slogan img {
        width: 30%;
    }

    .steps #tutoVideoStep2 {
        width: 84%;
    }
}

@media (min-width: 576px) {
    .slogan img {
        width: 25%;
    }

    .steps #tutoVideoStep2 {
        width: 72%;
    }
}

@media (min-width: 768px) {

    .steps .stepHeadline {
        height: 13rem;
    }

    .steps #tutoVideoStep2 {
        width: 98%;
    }

    .slogan {
        flex-direction: row;
        gap: 4rem;
        margin: 0 0 4rem;
    }

    .slogan img {
        width: 14%;
    }

    .partTutoTitles {
        margin-bottom: 10rem;
    }

    .advantages.desktop {
        display: flex;
    }
    .advantages.mobile {
        display: none;
    }
}

@media (min-width: 992px) {
    .slogan img {
        width: 12%;
    }
}

@media (min-width: 1200px) {
    .slogan img {
        width: 10%;
    }

    .partTutoTitles h2 {
        font-size: 1.8rem;
    }


    .partTutoTitles {
        margin-bottom: 8rem;
    }


    .steps .stepHeadline {
        height: 12rem;
    }

    .steps #tutoVideoStep2 {
        width: 90%;
    }

    .steps #tutoVideoStep3 {
        width: 13rem;
        border-radius: 2rem;
    }
}

@media (min-width: 1400px) {
    .steps .stepHeadline {
        height: 11rem;
    }
}


/*
==================================================

PART SPECIFIC

==================================================
*/
#scanWithScan {
    margin-bottom: 4rem;
}
#scanWithScan img {
    width: 60%;
    margin: auto;
}
#scanWithScan > div,
#scanWithTag > div {
    gap: 0;
}

#scanWithTag video {
    width: 100%;
}

#loyaltyStepsOptionPart .partSketch {
    height: 37rem;
}
#loyaltyStepsOptionPart #sketchMockupCustomer {
    width: 16rem;
    top: 0;
}
#loyaltyStepsOptionPart #sketchRewardZoom1 {
    width: 22rem;
    bottom: 23%;
}
#loyaltyStepsOptionPart #sketchRewardZoom2 {
    width: 24rem;
    bottom: 8%;
}
#loyaltyStepsOptionPart #sketchRewardZoom3 {
    width: 26rem;
    bottom: -8%;
}


#statisticsPart a {
    color: coral;
    font-family: 'Jost-bold', sans-serif;
}
#statisticsPart .partSketch {
    height: 26rem;
}
#statisticsPart #sketchGrapLu,
#statisticsPart #sketchGrapMa,
#statisticsPart #sketchGrapSa {
    width: 98%;
    top: 0;
}
#statisticsPart #sketchGrapLu {
    z-index: 1;
    opacity: 1;
    animation-name: graphLuFade;
    animation-duration: 10s;
    animation-iteration-count: infinite;
}
@keyframes graphLuFade {
    from {
        opacity: 1;
    }
    33% {
        opacity: 1;
    }
    35% {
        opacity: 0;
    }
    to {
        opacity: 0;
    }
}
#statisticsPart #sketchGrapMa {
    z-index: 2;
    opacity: 0;
    animation-name: graphMaFade;
    animation-duration: 10s;
    animation-iteration-count: infinite;
}
@keyframes graphMaFade {
    from {
        opacity: 0;
    }
    33% {
        opacity: 0;
    }
    34% {
        opacity: 1;
    }
    66% {
        opacity: 1;
    }
    68% {
        opacity: 0;
    }
    to {
        opacity: 0;
    }
}
#statisticsPart #sketchGrapSa {
    z-index: 3;
    opacity: 0;
    animation-name: graphSaFade;
    animation-duration: 10s;
    animation-iteration-count: infinite;
}
@keyframes graphSaFade {
    from {
        opacity: 1;
    }
    1% {
        opacity: 0;
    }
    66% {
        opacity: 0;
    }
    67% {
        opacity: 1;
    }
    to {
        opacity: 1;
    }
}

@media (max-width: 360px) {
    #scanWithScan img {
        width: 70%;
    }

    #loyaltyStepsOptionPart .partSketch {
        height: 35rem;
    }
    #loyaltyStepsOptionPart #sketchMockupCustomer {
        width: 15rem;
    }
    #loyaltyStepsOptionPart #sketchRewardZoom1 {
        width: 20rem;
    }
    #loyaltyStepsOptionPart #sketchRewardZoom2 {
        width: 22rem;
    }
    #loyaltyStepsOptionPart #sketchRewardZoom3 {
        width: 24rem;
    }

    #statisticsPart .partSketch {
        height: 20rem;
    }
}

@media (min-width: 480px) {
    #scanWithScan img {
        width: 45%;
    }
    #scanWithTag video {
        width: 80%;
        left: 50%;
        position: relative;
        transform: translateX(-50%);
    }

    #statisticsPart .partSketch {
        height: 30rem;
    }
    #statisticsPart #sketchGrapLu,
    #statisticsPart #sketchGrapMa,
    #statisticsPart #sketchGrapSa {
        width: 86%;
    }
}

@media (min-width: 576px) {
    #scanWithScan img {
        width: 13rem;
    }
    #scanWithTag video {
        width: 23rem;
    }

    #statisticsPart .partSketch {
        height: 34rem;
    }
    #statisticsPart #sketchGrapLu,
    #statisticsPart #sketchGrapMa,
    #statisticsPart #sketchGrapSa {
        width: 30rem;
    }
}

@media (min-width: 768px) {
    #scanWithTag video {
        width: 80%;
    }

    #statisticsPart .partSketch {
        height: 30rem;
    }
    #statisticsPart #sketchGrapLu,
    #statisticsPart #sketchGrapMa,
    #statisticsPart #sketchGrapSa {
        width: 90%;
    }

    #loyaltyStepsOptionPart .partSketch {
        height: 35rem;
    }
    #loyaltyStepsOptionPart #sketchMockupCustomer {
        width: 14rem;
        top: 0;
    }
    #loyaltyStepsOptionPart #sketchRewardZoom1 {
        width: 20rem;
        bottom: 30%;
    }
    #loyaltyStepsOptionPart #sketchRewardZoom2 {
        width: 22rem;
        bottom: 16%;
    }
    #loyaltyStepsOptionPart #sketchRewardZoom3 {
        width: 24rem;
        bottom: 1%;
    }
}

@media (min-width: 992px) {
    #statisticsPart #sketchGrapLu,
    #statisticsPart #sketchGrapMa,
    #statisticsPart #sketchGrapSa {
        width: 80%;
    }
}

@media (min-width: 1200px) {
    #statisticsPart #sketchGrapLu,
    #statisticsPart #sketchGrapMa,
    #statisticsPart #sketchGrapSa {
        width: 82%;
    }
}

@media (min-width: 1400px) {
    #statisticsPart .partSketch {
        height: 34rem;
    }
    #statisticsPart #sketchGrapLu,
    #statisticsPart #sketchGrapMa,
    #statisticsPart #sketchGrapSa {
        width: 76%;
    }
}