/* START sliderServices */
.sliderServices .uniformSpacing {
    display: flex;
    flex-direction: column;
    gap: 1.25em;
}

.sliderServices .sliderWrapper {
    padding: 0 1em;
    gap: 7em;
}

.sliderServices .sliderContainer {
    display: flex;
    flex-direction: column;
    gap: 2.5em;
}

.sliderServices .sliderContainer .horizontalScroll {
    width: 100%;
}

.sliderServices .categoriesListing {
    display: flex;
    gap: 1.5em;
    justify-content: center;
    flex-wrap: wrap;
}

.sliderServices .categoriesListing svg{
    height: 2.5em;
    width: auto;
    border-bottom: 2px solid transparent;
    transition: ease all .3s;
    cursor: pointer;
}

.sliderServices .categoriesListing .active svg{
    border-bottom: 2px solid var(--basicColor2);
}

.sliderServices .sliderContainer .categoriesListing p {
    padding: .5em 1em;
    cursor: pointer;
    opacity: .6;
    transition: ease all .3s;
}

.sliderServices .sliderContainer .categoriesListing p.active,
.sliderServices .sliderContainer .categoriesListing p:hover {
    opacity: 1;
}

.sliderServices .sliderWrapper,
.sliderServices .sliderSlide {
    width: 90%;
}

.sliderServices .sliderSlide {
    display: flex;
    flex-direction: column;
    gap: 1em;
}


.sliderServices .sliderSlide img {
    width: 100%;
    aspect-ratio: 21/9;
    border-radius: var(--basicRadius);
    object-fit: cover;
}

@media screen and (max-width: 1000px) {
    .sliderServices .sliderSlide {
        gap: 2em;
        flex-direction: column;
    }

    .sliderServices .sliderSlide > div,
    .sliderServices .sliderSlide .imgContainerSlider {
        width: 100%;
    }

    .sliderServices .sliderWrapper, .sliderServices .sliderSlide{
        width: 100%;
    }
}

@media screen and (max-width: 500px) {
    .bigSpacing.sliderServices {
        padding: var(--defaultSpacing) .5em;
    }

    .sliderServices .sliderSlide {
        padding: 1.5em;
    }

    .sliderServices .uniformSpacing > .introText,
    .sliderServices .categoriesListing {
        padding: 0 calc(var(--defaultSpacing) - .5em);
    }
}

/* END sliderServices */

/* START sliderProduct*/
.sliderProduct .sliderWrapper,
.sliderProduct .sliderSlide {
    width: 100%;
}

.sliderProduct .sliderSlide{
    display: flex;
    flex-direction: column;
    width: 80%;
    margin: 0 auto;
    gap: 1.5em;
}

.sliderProduct .sliderSlide{
    width: 100%;
    height: auto;
}



.sliderProduct .sliderSlide .containerText > div.infoVelo{
    display: flex;
    flex-direction: column;
    gap: .5em;
}

.sliderProduct .sliderSlide .containerText > div.infoVelo .infos{
    display: flex;
    flex-direction: column;
    gap: .5em;
    width: 50%;

}

.sliderProduct .sliderSlide .containerText > div.infoVelo .infos .spec{
    display: flex;
    flex-direction: column;
    gap: .25em;
}

.sliderProduct .sliderSlide .containerText > div.infoVelo .infosContainer{
    display: flex;
    gap: 1em;
}

.sliderProduct .sliderSlide .containerText  > div.infoVelo .description{
    border-left: 1px solid #707070;
    padding-left: 1em;
    width: 50%;
}

/* END sliderProduct*/

/* START  listingCards */
.listingCards .uniformSpacing{
    display: flex;
    flex-direction: column;
    gap: 2em;
}
.listingCards .containerCards{
    display: flex;
    flex-wrap: wrap;
    gap: 2em;
}

.listingCards .containerCards .element{
    display: flex;
    flex-direction: column;
    gap: 1em;
    width: calc((100% - 2em * 2 ) / 3);
}

.listingCards .containerCards .element div{
    display: flex;
    flex-direction: column;
    gap: .75em;
}

.listingCards .containerCards .element img{
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
    border-radius: var(--basicRadius);
    object-fit: cover;
}

@media screen and (max-width: 750px) {
    .listingCards .containerCards .element{
        width: 100%;
    }
}
/* END  listingCards */

/* START listeImg */
.listeImg .uniformSpacing{
    display: flex;
    flex-direction: column;
    gap: 2em;
}

.listeImg .containerImg{
    display: flex;
    flex-wrap: wrap;
    gap: 1.5em;
    align-items: center;
    justify-content: center;
}

.listeImg .containerImg img{
    width: calc((100% - 2em * 3) /4);
    height: auto;
}

@media screen and (max-width: 600px) {
    .listeImg .containerImg img{
        width: calc((100% - 2em ) /2)
    }
}


/* END listeImg */

/* START bandeauImg */

.bandeauImg  > img {
    position: absolute;
    bottom: 0;
    right: 4em;
    height: 70%;
    width: auto;
}

.bandeauImg .introText {
    padding: 2em 0;
    width: 70%;
}

.bandeauImg .smallUniformSpacing{
    z-index: 60;
}

@media screen and (max-width: 800px) {
    .bandeauImg  > img {
        height: 50%;
    }
}

@media screen and (max-width: 650px) {
    .bandeauImg  > img {
        display: none;
    }

    .bandeauImg .introText{
        width: 100%;
    }
}

/* END bandeauImg */


/* START bigImgText */
.bigImgText .uniformSpacing {
    display: flex;
    align-items: center;
    gap: 8em;
}

.bigImgText .uniformSpacing > img,
.bigImgText .uniformSpacing > .editor-img {
    width: 50%;
    height: -webkit-fill-available;
    object-fit: cover;
}

.bigImgText .uniformSpacing > .editor-img img {
    width: 100%
}

.bigImgText .uniformSpacing .introText {
    width: 50%;
    padding: 3em 0;
}

.bigImgText .uniformSpacing .introText img {
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
    object-fit: cover;
    border-radius: var(--basicRadius);
}

@media screen and (max-width: 1000px) {
    .bigImgText .uniformSpacing{
        gap: 4em;
    }
}

@media screen and (max-width: 700px) {
    .bigImgText .uniformSpacing{
        flex-direction: column;
        gap: 2em;
    }

    .bigImgText .uniformSpacing > img,
    .bigImgText .uniformSpacing > .editor-img{
        width: 100%;
        height: auto;
        aspect-ratio: 16/9;
        padding-top: 3em;
    }

    .bigImgText .uniformSpacing .introText{
        width: 100%;
        padding-top: 0;
    }

}

/* END bigImgText */