.topSection .image img{
    width: 75%;
}
.topSection .image{
    display: flex;
    justify-content: center;
}
.pageTitles.centre{
    display: flow;
    place-items: center;
    text-align: center;
    margin-bottom: 30px;
}
.containerB.methodologie {
    padding: 60px 0;
    overflow: hidden;
}
.sectionTitle{
    font-family: 'PoppinsBold';
    font-size: 32px;
    color: black;
    line-height: 39px;
    text-transform: uppercase;
}
.sectionTitle span{
    color: var(--red);
}

.context span{
    color: var(--red);
    font-size: large;
}

.context ul li span {
    color: var(--red) !important;
}
/***
=============================================
Solution 
=============================================
***/
.pageTitles.B span{
    color: var(--red);
}
.heading_card_sous_Title {
    font-size: 16px;
    font-family: 'PoppinsRegular';
    margin: 12px 0;
}
.solutions.servicesPage{
    width: var(--rn-width1);
    margin-bottom: 200px;
    margin-top: 60px;
    display: flex;
    justify-content: space-between;
    align-items: flex-center;
}
.solutions.servicesPage .SAContent.top {
    height: 410px;
}
.solutions.servicesPage .SAContent {
    width: 45%;
}
.solutions.servicesPage .SAContent .context, .solutions.servicesPage .SAContent li {
    font-family: 'PoppinsRegular';
    font-size: 16px;
    list-style: disc;
}

.solutions.servicesPage .imagezone img{
    width: 100%;
}
.solutions.servicesPage .imagezone.certif img{
    width: 75%;
}

.solutions.servicesPage .imagezone {
    width: 43%;
    display: flex;
    justify-content: center;
    position: relative;
}
.solutions.servicesPage .imagezone svg {
    position: absolute;
    top: -70px;
    width: 110%;
}
.solutions.servicesPage .imagezone .svg1 {
    z-index: 3;
}
.solutions.servicesPage .imagezone .svg2 {
    z-index: 1;
}
.solutions.servicesPage .imagezone .bigImgTop,
.solutions.servicesPage .imagezone .bigImgBottom {
    position: absolute;
    width: 63%;
}
.solutions.servicesPage .imagezone .bigImgTop {
    z-index: 3;
    clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
}
.solutions.servicesPage .imagezone .bigImgBottom {
    z-index: 1;
    clip-path: polygon(0 50%, 100% 30%, 100% 100%, 0 100%);
}

/***
=============================================
Intro Cards
=============================================
***/
.intro {
    width: var(--rn-width1);
    margin: auto;
    display: flex;
    justify-content: space-around;
    padding: 25px 0;
    flex-wrap: wrap;
}
.introCard {
    flex: 0 0 calc(24% - 11px);
    box-sizing: border-box;
    text-align: center;
}
.introCard:hover .introCardTitle::after{
    left: 31%;
    width: 39%;
}
.introCard svg{
    width: 60px;
}
.introCardTitle{
    font-family: 'PoppinsBold';
    font-size: 22px;
    line-height: 26px;
    margin: 25px 0;
    position: relative;
}
.introCardText{
    font-family: 'PoppinsRegular';
    font-size: 16px;
    line-height: 22px;
}
.introCardTitle::after {
    content: "";
    position: absolute;
    left: 35%;
    bottom: -17px;
    width: 30%;
    height: 2px;
    background-color: var(--red);
    transition: width 0.5s ease, left 0.4s ease;
}


/***
=============================================
solutions section
=============================================
***/
.solutions{
    width: var(--rn-width1);
    margin: auto;
    display: flex;
    margin-top: -140px;
    margin-bottom: 60px;
    justify-content: center;
    gap: 20px;   
}
.solutionCard {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    overflow: hidden;
    width: 100%;
    color: white;
    border: 3px solid white;
    transition: 0.3s cubic-bezier(.6,.4,0,1), border 0.3s ease ;
}
.solutionCard::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #f6f6f6;
    pointer-events: none;
    z-index: 0;
}
.solutionCard img{
    width: 100%;
}
.heading_card_sous_Title{
    text-transform: uppercase;
    font-family: 'PoppinsBold';
    margin-bottom: 15px;
}
.solutionCard .heading{
    position: absolute;
    top: 7%;
    left: 6%;
    text-align: left;
    right: 22px;
}
.heading_cardTitle{
    font-family: 'PoppinsBold';
    font-size: 27px;
    line-height: 33px;
}
.solutionCard .content{
    font-family: 'PoppinsRegular';
    font-size: 15px;
    margin: 14px 0px;
    text-align: left;
    color: black;
}
.solutionCard.services .heading_cardTitle{
    margin-top: 17px;
    color: black;
}
.arrow-circle-inhover {
    font-family: 'PoppinsSemiBold';
    font-size: var(--linksSize);
    transition: opacity 0.4s ease;
    color: var(--red);
    background: #ff000012;
    padding: 8px 20px;
    position: absolute;
    bottom: 7%;
    left: 7%;
    display: block;
    cursor: pointer;
    transition: background-color 0.4s ease, color 0.3s ease;
}
.arrow-circle-inhover:hover {
      background-color: var(--red);
      color: white;
}

/*==============================================
    services section
================================================*/
.services{
    width: var(--rn-width1);
    margin: auto;
}
.swiper-container.Allservices, .controlButtons{
    overflow: hidden;
    position: relative;
    display: flex;
    justify-content: center;
    flex-direction: row;
}
.controlButtons .slick-arrow{
    border-radius: 50%;
    height: 40px;
    position: relative;
    width: 40px;
    align-items: center;
    justify-content: center;
    border: none;
}
.controlButtons .slick-arrow.slick-prev{
    margin: 20px 10px 0 0;
}
.controlButtons .slick-arrow.slick-next{
    margin: 20px 0 0 10px;
}
.swiper-wrapper.servicesCards.show{
    display: flex;
    flex-wrap: nowrap; 
    gap: 0px;
}
.swiper-slide.solutionCard{
    justify-content: flex-start;
}
.swiper-slide.solutionCard.services{
    box-sizing: border-box;
    text-align: center;
    background-color: #f8f8f8;
    overflow: hidden;
    height: 565px;
}
.swiper-slide.solutionCard.services svg {
    width: 60px;
}

/***
=============================================
méthodologie section
=============================================
***/
.explanationTopTitle{
    margin-top: 5%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'PoppinsBold';
    font-size: var(--titleSize);
    color: var(--red);
    text-transform: uppercase;
}
.explanationZone{
    width: var(--rn-width1);
    margin: auto;
}
.explanationZone .line{
    display: flex;
    align-items: center;
    gap: 40px;
    margin: 50px 0;
    justify-content: space-around;
}
.explanationZone .line .icon{
    display: flex;
    width: 25%;
}
.explanationZone .line .icon.left{
    justify-content: flex-end;
}
.explanationZone .line .icon.right{
    justify-content: flex-start;
}
.explanationZone .line .explanation{
    width: 48%;
}
.explanationZone .line .explanation .step{
    color: var(--red);
    position: relative;
}
.explanationZone .line .explanation .step::after {
    content: "";
    position: absolute;
    bottom: 11px;
    width: 64%;
    height: 1px;
    background-color: var(--red);
}
.explanationZone .line.right .explanation .step::after {
    right: -66%;
}
.explanationZone .line.left .explanation .step::after {
    left: -66%;
}
.explanationZone .line .explanation h3{
    font-family: 'PoppinsSemiBold';
    font-size: 25px;
}
.explanationZone .line .explanation p{
    font-family: 'PoppinsRegular';
    font-size: 15px;
    line-height: 22px;
}




@media(max-width: 1300px){
    .solutions.servicesPage .SAContent .context, .solutions.servicesPage .SAContent li {
        font-size: 12px;
    }
    .sectionTitle {
        font-size: 26px;
        line-height: 31px;
    }
    .solutions.servicesPage .imagezone .bigImgTop, .solutions.servicesPage .imagezone .bigImgBottom {
        width: 69%;
    }
    .solutions.servicesPage .imagezone svg {
        top: -52px;
    }
    .solutions.servicesPage .SAContent.top {
        height: 290px;
    }

    /*+++++++++++++++++++++++++++++++++++++++++++
    services
    ++++++++++++++++++++++++++++++++++++++++++++*/
    .heading_cardTitle {
        font-size: 20px;
        line-height: 25px;
    }
    .solutionCard .content {
        font-size: 12px;
    }
    .solutionCard .heading {
        top: 5%;
        left: 6%;
    }
    .arrow-circle-inhover {
        bottom: 4%;
        left: 6%;
    }
    .swiper-slide.solutionCard.services {
        height: 489px;
    }

    /*++++++++++++++++++++++++++++++++++++++++++++
    Intro Cards
    ++++++++++++++++++++++++++++++++++++++++++++*/
    .intro {
        gap: 14px;
    }
    .introCardText {
        font-size: 13px;
        line-height: 18px;
    }
    .introCard {
        flex: 0 0 calc(25% - 11px);
    }
    .introCardTitle {
        font-size: 17px;
        line-height: 22px;
        margin: 13px 0 28px;
    }
    .introCard svg {
        width: 53px;
    }

    /*++++++++++++++++++++++++++++++++++++++++++++
    méthodologie
    ++++++++++++++++++++++++++++++++++++++++++++*/
    .explanationZone .line .explanation h3 {
        font-size: 21px;
    }
    .explanationZone .line .explanation p {
        font-size: 13px;
        line-height: 19px;
    }
}

@media(max-width: 900px){
    /*+++++++++++++++++++++++++++++++++++++++++++
    solution
    ++++++++++++++++++++++++++++++++++++++++++++*/
    .solutions.servicesPage .SAContent {
        width: 54%;
    }
    .solutions.servicesPage .imagezone .bigImgTop, .solutions.servicesPage .imagezone .bigImgBottom {
        width: 70%;
    }
    .solutions.servicesPage .imagezone svg {
        top: -22px;
    }
    .solutions.servicesPage {
        margin: 52px auto;
    }

    /*+++++++++++++++++++++++++++++++++++++++++++
    services
    ++++++++++++++++++++++++++++++++++++++++++++*/
    .swiper-slide.solutionCard.services {
        height: 445px;
    }
    .solutionCard.services img {
        width: 118%;
    }

    /*++++++++++++++++++++++++++++++++++++++++++++
    Intro Cards
    ++++++++++++++++++++++++++++++++++++++++++++*/
    .intro {
        gap: 25px;
    }
    .introCard {
        flex: 0 0 calc(49% - 30px);
    }
    

    /*++++++++++++++++++++++++++++++++++++++++++++
    méthodolohgie
    ++++++++++++++++++++++++++++++++++++++++++++*/
    .explanationZone .line .explanation h3 {
        font-size: 21px;
    }
    .explanationZone .line .explanation p {
        font-size: 14px;
        line-height: 21px;
    }
    .explanationZone .line .icon {
        width: 0;
    }
    .explanationZone .line .explanation {
        width: 65%;
    }

}

@media(max-width: 700px){

    .sectionTitle {
        font-size: 24px;
    }

    /*+++++++++++++++++++++++++++++++++++++++++++
    solutions
    ++++++++++++++++++++++++++++++++++++++++++++*/
    .solutions.servicesPage.IR {
        flex-direction: column-reverse;
        margin: 100px auto;
    }
    .solutions.servicesPage.IL {
        flex-direction: column;
    }
    .solutions.servicesPage .imagezone .bigImgTop, .solutions.servicesPage .imagezone .bigImgBottom {
        top: 18px;
    }
    .solutions.servicesPage .imagezone {
        width: 100%;
        height: 290px;
    }
    .solutions.servicesPage .imagezone svg {
        top: 6px;
    }

    .solutions.servicesPage {
        flex-direction: column;
    }
    .solutions.servicesPage .SAContent {
        width: 100%;
    }
    .solutions.servicesPage .imagezone.certif img {
        width: 100%;
    }

    /*+++++++++++++++++++++++++++++++++++++++++++
    Services
    ++++++++++++++++++++++++++++++++++++++++++++*/
    .controlButtons{
        display: flex;
        flex-direction: row;
    }
    .swiper-slide.solutionCard.services img {
        width: 100%;
    }
    .swiper-slide.solutionCard.services .content {
        position: static;
        padding: 0px;
    }
    .swiper-slide.solutionCard.services svg {
        margin-left: 20px;
    }
    .arrow-circle-inhover {
        bottom: 7%;
    }

    /*** Intro Cards ***/
    .introCard {
        flex: 100%;
    }

    /*** méthodologie ***/
    .explanationZone .line .explanation h3 {
        font-size: 19px;
    }
    .explanationZone .line.right {
        flex-direction: column;
    }
    .explanationZone .line.left {
        flex-direction: column-reverse;
    }
    .explanationZone .line .explanation, .explanationZone .line .icon{
        width: 100%;
    }
    .explanationTopTitle {
        width: var(--rn-width1);
        margin: auto;
    }    
}