/* START hero */



.hero {

    display: flex;

    align-items: center;

    min-height: 80vh;

    overflow: auto;

    padding-top: 3em;

}



.hero .uniformSpacing {

    width: 100%;

    display: flex;

    flex-direction: column;

    align-items: flex-end;

    position: relative;

    z-index: 1;

}



.hero img {

    position: absolute;

    right: 0;

    width: auto;

    object-fit: cover;

    bottom: 0;

    max-height: 100%;

    height: 100%;

    min-width: 100%;

}



@media screen and (max-width: 1250px) {

    .hero img {

        opacity: .9;

    }

}





/* END hero */



/* START bigImgText */



.bigImgText .uniformSpacing {

    display: flex;

    gap: 5em;

}



.bigImgText .uniformSpacing .introText {

    width: 45%;

}



.bigImgText .containerImg {

    width: 45%;

    position: absolute;

    right: 0;

    height: 100%;

    top: 0;

}



.bigImgText .containerImg img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



@media screen and (max-width: 900px) {

    .bigImgText .uniformSpacing {

        flex-direction: column;

    }



    .bigImgText .containerImg {

        position: initial;

    }



    .bigImgText .uniformSpacing .introText,

    .bigImgText .containerImg{

        width: 100%;

    }

}





/* END bigImgText */



/* START servicesContainer */

.servicesContainer .uniformSpacing {

    display: flex;

    flex-direction: column;

    gap: 1.5em;

}



.servicesContainer .uniformSpacing .services {

    display: flex;

    justify-content: space-between;

    flex-wrap: wrap;

}



.servicesContainer .uniformSpacing .services .service {

    display: flex;

    flex-direction: column;

    gap: 1.5em;

    align-items: center;

    width: calc((100% - 2em * 4) / 5);

}





.servicesContainer .uniformSpacing .services .service .iconeContainer {

    width: 6.5em;

    height: 6.5em;

    border-radius: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 1.5em;

    transition: ease all .3s;

    position: relative;

    z-index: 1;

}



.servicesContainer .uniformSpacing .services .service .borderAnimated {

    content: "";

    position: absolute;

    width: calc(100% - 1px);

    height: calc(100% - 1px);

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    transition: ease all .3s;

    background-color: var(--basicColor1);

    border-radius: 100%;

}



.servicesContainer .uniformSpacing .services .service .iconeContainer svg {

    width: 100%;

    height: 100%;

}



.servicesContainer .uniformSpacing .services .service:hover .borderAnimated {

    width: calc(100% + 20px);

    height: calc(100% + 20px);

}





.servicesContainer .uniformSpacing .services .service .textContainer {

    display: flex;

    flex-direction: column;

    justify-content: center;

    gap: .75em;

    align-items: center;

}



.servicesContainer .uniformSpacing .services .service .textContainer h4 {

    transition: ease all .3s;

    padding: .25em .75em;

    border-radius: var(--mediumRadius);

    background-color: transparent;

}



.servicesContainer .uniformSpacing .services .service .textContainer hr {

    width: 2.5em;

    height: 5px;

    background-color: var(--basicColor4);

    border: none;

}



.servicesContainer .uniformSpacing .services .seperator {

    width: 2em;

    position: relative;

}



.servicesContainer .uniformSpacing .services .seperator:last-child {

    display: none;

}



.servicesContainer .uniformSpacing .services .seperator hr {

    width: 250%;

    height: 1px;

    background-color: var(--basicColor4);

    position: absolute;

    top: 3.25em;

    left: 50%;

    transform: translateX(-50%);

    border: none;

}



@media screen and (max-width: 1400px) {

    .servicesContainer .uniformSpacing .services {

        flex-wrap: wrap;

        justify-content: center;

        gap: 2em 0;

    }



    .servicesContainer .uniformSpacing .services .service{

        width: calc((100% - 2em * 2) / 3);

    }



    .servicesContainer .uniformSpacing .services .seperator:nth-child(6) {

        display: none;

    }



}



@media screen and (max-width: 800px) {

    .servicesContainer .uniformSpacing .services .service{

        width: 100%;

    }



    .servicesContainer .uniformSpacing .services .seperator {

        display: none;

    }

}







/* END servicesContainer */





/* START referencielsContainer */

.referencielsContainer .imgTqm {

    position: absolute;

    bottom: 0;

    right: 0;

    height: 100%;

    width: auto;

    opacity: .3;

}



.referencielsContainer .uniformSpacing {

    display: flex;

    flex-direction: column;

    gap: 1.5em;

    position: relative;

    z-index: 1;

}



.referencielsContainer .uniformSpacing .referenciels {

    display: flex;

    gap: 2em;

    justify-content: space-between;

}



.referencielsContainer .uniformSpacing .referenciels .referenciel {

    display: flex;

    flex-direction: column;

    gap: 1.5em;

    align-items: center;

}



.referencielsContainer .uniformSpacing .referenciels .referenciel .iconeContainer {

    width: 6.5em;

    height: 6.5em;

    display: flex;

    align-items: center;

    justify-content: center;

}



.referencielsContainer .uniformSpacing .referenciels .referenciel .iconeContainer svg {

    width: 100%;

    height: 100%;

}



.referencielsContainer .uniformSpacing .referenciels .referenciel .textContainer {

    display: flex;

    flex-direction: column;

    justify-content: center;

    gap: .75em;

    align-items: center;

}



.referencielsContainer .uniformSpacing .referenciels .referenciel .textContainer h4 {

    transition: ease all .3s;

    padding: .25em .75em;

    border-radius: var(--mediumRadius);

    background-color: transparent;

}



.referencielsContainer .uniformSpacing .referenciels .referenciel:hover .textContainer h4 {

    background-color: var(--basicColor1);

    color: var(--basicWhite);

}



.referencielsContainer .uniformSpacing .referenciels .referenciel .textContainer hr {

    width: 2.5em;

    height: 5px;

    background-color: var(--basicColor4);

    border: none;

}

@media screen and (max-width: 1500px) {

    .referencielsContainer .uniformSpacing .referenciels{

        flex-wrap: wrap;

        gap: 2em;

    }



    .referencielsContainer .uniformSpacing .referenciels .referenciel{

        width: calc((100% - 2em * 5 ) / 6);

    }

}



@media screen and (max-width: 1200px) {

    .referencielsContainer .uniformSpacing .referenciels .referenciel{

        width: calc((100% - 2em * 2 ) / 3);

    }

}



@media screen and (max-width: 750px) {

    .referencielsContainer .uniformSpacing .referenciels .referenciel{

        width: calc((100% - 2em ) / 2);

    }

}



@media screen and (max-width: 750px) {

    .referencielsContainer .uniformSpacing .referenciels .referenciel{

        width: calc((100% - 2em ) / 2);

    }

}





/* END referencielsContainer */



/* START bandeauImgSlider */



.bandeauImgSlider {

    display: flex;

    flex-direction: column;

    gap: 2.5em;

}



.bandeauImgSlider .sliderContainer {

    position: relative;

    z-index: 10;

}



.bandeauImgSlider .avisContainer .slider {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 2em;

}



.bandeauImgSlider .avisContainer .sliderWrapper {

    width: 70%;

    gap: 2.5em;

}



.bandeauImgSlider .avisContainer .sliderWrapper .sliderSlide {

    width: 100%;

}





.bandeauImgSlider .avisContainer .sliderWrapper .sliderSlide {

    border-radius: var(--smallRadius);

    display: flex;

    flex-direction: column;

    gap: 1.5em;

    padding: 1.25em;

}





.bandeauImgSlider .containerSliderButton .sliderDots {

    display: flex;

    justify-content: center;

    gap: .5em;

}



.bandeauImgSlider .containerSliderButton .sliderDots .sliderDot {

    width: 1em;

    height: 1em;

    background-color: transparent;

    border: 1px solid var(--basicWhite);

    border-radius: var(--basicRadius);

    transition: ease all .3s;

    cursor: pointer;

}



.bandeauImgSlider .containerSliderButton .sliderDots .sliderDot.active {

    background-color: var(--basicWhite);

}



@media screen and (max-width: 550px) {

    .bandeauImgSlider .avisContainer .sliderWrapper {

        width: 90%;

        gap: 1.5em;

    }



}



/* END bandeauImgSlider */





/* START listingBlogs */

.listingBlogs {

    background-color: #F2F7F8;

}



.listingBlogs > * {

    position: relative;

    z-index: 10;

}



.listingBlogs .blogs {

    position: relative;

    z-index: 10;

    padding-right: 0;

}



.listingBlogs .slider {

    padding: 2em;

}



.listingBlogs .sliderWrapper {

    width: calc((100% - 2em * 3) / 3.5);

    gap: 2.5em;

}



.listingBlogs .sliderWrapper .sliderSlide {

    width: 100%;

    display: flex;

    flex-direction: column;

    gap: 1em;

    border-radius: var(--smallRadius);

    padding: 1em;

    box-shadow: 0px 0px 20px #00000029;

}



.listingBlogs .sliderWrapper .sliderSlide img {

    width: 100%;

    aspect-ratio: 21/9;

    object-fit: cover;

    border-radius: var(--smallRadius);

}



.listingBlogs .sliderWrapper .sliderSlide hr {

    width: 30%;

    height: 5px;

    background-color: var(--basicColor4);

    border: none

}



@media screen and (max-width: 1200px) {

    .listingBlogs .sliderWrapper {

        width: calc((100% - 2em ) / 2.5);

    }

}



@media screen and (max-width: 900px) {

    .listingBlogs .sliderWrapper {

        width: calc((100% - 2em ) / 1.5);

    }

}



@media screen and (max-width: 650px) {



    .listingBlogs .slider{

        padding: 2em .5em;

    }



    .listingBlogs .sliderWrapper{

        gap: 1em;

    }



    .listingBlogs .sliderWrapper {

        width: calc(100% - 1em);

    }



    .listingBlogs .blogs{

        padding-left: 0;

    }

}









/* END listingBlogs */