/*####################--Global--####################*/

.card-home{
    background: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    height: 400px;
    width: 330px;
    border-radius: 10px;
    box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 0.05), 0 2px 5px 0 rgba(0, 0, 0, 0.1);
    margin-top: 20px;
}

.homecard-width{
    max-width: 350px;
}

/*####################--Carrousel--####################*/

.header-carrousel{
    width: 100%;
    height: min-content;
}

.image-carrousel{
    min-height: 564px;
    background-size: cover!important;
    background-position: center center!important;
    background-repeat: no-repeat!important;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 10vh 26vh;
    position: relative;
    width: 100%;
}

.container-carrousel{
    margin-left: 100px;
    margin-right: 150px;
}

.title-carrousel{
    margin: 0 9px 0px;
    font-family: Gotham-Bold;
    font-size: 40px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.35;
    letter-spacing: -0.1px;
    color: #fff;
}

.subtitle-carrousel{
    font-family: Gotham-Bold;
    font-size: 40px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.3;
    letter-spacing: -0.1px;
    color: #fff;
    border: 4px solid white;
}

.desc-carrousel{
    font-family: Gotham-Bold;
    font-size: 20px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.63;
    letter-spacing: normal;
    color: #fff;
    margin: 0 9px 0px;
}

.desc-carrousel:last-of-type {
    margin-bottom: 38px;
}


/*#######################--SECTION DELIMITER--#######################*/

.section-delimiter {
    padding-bottom: 7vh !important;
    padding-top: 5vh !important;
}


.section-delimiter-bloc-3{
    padding-bottom: 7vh;
    padding-top: 14vh;
}

.section-services-delimiter{
    padding-bottom: 7vh !important;
}

.section-actu-home{
    padding-bottom: 7vh !important;
    padding-top: 15vh !important;
    margin-top: -100px;
}

/*#######################--BLOC-1--#######################*/

.bloc-1{
    width: 100%;
    display: flex;
    flex-direction: row;
    padding: 0px;
}

.box-bloc-1{
    margin-left: 200px;
    border: 0px solid red;
    flex: 50%;
    width: 530px!important;
}

.title-bloc-1{
    margin: 0px 0 14px;
    font-family: Gotham-Bold;
    font-size: 36px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.11;
    letter-spacing: normal;
    color: #50526d;
}

.desc-bloc-1{
    font-family: Gotham-Book;
    font-size: 17px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.43;
    letter-spacing: -0.2px;
    color: #333;
}

.desc-bloc-1 > strong{
    color: rgb(87,91,92);
    font-family: Gotham-Bold;
    font-weight: bold;
}

.box-img-bloc-1{
    flex: 50%;
    margin-right: 200px;

}
.image-bloc-1{
    width: 440px;
    height: 500px !important;
    border-radius: 15px!important;
}

.img-container-div{
    text-align:center !important;
    height:100%;
}

.float-image-effect{
    background-size: cover !important;
}


/*#######################--BLOC-2--#######################*/

.bloc-2{
    background-color: #3d3f5a;
    transform: skewY(-4deg);
    position: relative;
    z-index: 2;
}

.box-2{
    transform: skewY(4deg);
}

.img-bloc-2{
    width: 56px;
    height: auto;
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.title-bloc-2{
    font-size: 40px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.11;
    letter-spacing: normal;
    text-align: center;
    font-family: Gotham-Bold;
}


.subtitle-bloc-2{
    font-family: Gotham-Black;
    font-size: 20px;
    font-weight: 900!important;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.2;
    letter-spacing: normal;
    text-align: center;
    color: #575866;
    position: absolute;
    top: 15%;
    left: 50%;
    transform: translate(-50%,-50%);
}


.liste-service{
    position: absolute;
    top: 70%;
    left: 50%;
    transform: translate(-50%,-50%);
    min-width: 200px;
}


.desc-service{
    font-size: 20px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.6;
    letter-spacing: normal;
    text-align: center;
    color: #333;
    font-family: Gotham-Book;

}

.hr-bloc-2{
    width: 37px;
    height: 6px;
    background-color: #f4a541;
}

/*#######################--BLOC-3--#######################*/

.bloc-3{
    width: 100%;
    display: flex;
    flex-direction: row;
    margin-top: 0px;
    margin-bottom: 0px;
}

.box-bloc-3{
    margin-left: 200px;
    border: 0px solid red;
    flex: 50%;
    width: 530px!important;
}

.title-bloc-3{
    margin: 0 0 14px;
    font-family: Gotham-Bold;
    font-size: 36px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.11;
    letter-spacing: normal;
    color: #50526d;
}

.desc-bloc-3{
    font-family: Gotham-Book;
    font-size: 17px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.43;
    letter-spacing: -0.2px;
    color: #333;
    padding-bottom: 10px !important;
}

.desc-bloc-3 > strong{
    color: rgb(87,91,92);
    font-family: Gotham-Bold;
    font-weight: bold;
}

.box-img-bloc-3{
    flex: 50%;
    margin-right: 200px;
}
.image-bloc-3{
    width: 440px;
    height: 500px;
}

.img-center{
    display: flex;
    justify-content: center;
}

.top-align{
    display:flex;
    align-self: self-start;
}


/*#######################--BLOC-4--#######################*/

.bloc-4{
    background-color: #f7f6f6;
    transform: skewY(-4deg);
}

.box-4{
    transform: skewY(4deg);
}

.title-block-4{
    margin: 0 0 14px;
    font-family: Gotham-Bold;
    font-size: 36px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.11;
    letter-spacing: normal;
    text-align: center;
    color: #50526d;
}

.subtitle-bloc-4{
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0rem 0rem;
    border-radius: 18px;
    margin-bottom: 40px;
}

.h2-bloc-4{
    margin: 0px 0px 0px 74px;
    font-family: Gotham-Book;
    font-size: 24px;
    font-weight: bold !important;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    text-align: center;
    color: #50526d;
}


.bloc-4-svg{
    width: 225px!important;
    height: auto!important;
}


.bloc-4-projet{
    background: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 300px;
    border-radius: 10px;
    box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 0.05), 0 2px 5px 0 rgba(0, 0, 0, 0.1);
    margin: 10px 12px !important;
}

/*#######################--BLOC-5--#######################*/

.bloc-5{
    height: min-content;
    background-color: #3d3f5a;
    transform: skewY(-4deg);
}

.box-5{
    transform: skewY(4deg); 
}


/*#######################--BLOC-6--#######################*/

.bloc-6{
    background-color: #f7f6f6;
    height: min-content;
}

.title-bloc-6{
    font-size: 40px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.11;
    letter-spacing: normal;
    text-align: center;
    font-family: Gotham-Bold;
    margin-top: 15px;
    color: #50526d!important;
}

.card-title-home{
    text-align: left;
    font-size: 10px;
    margin-top: 5%;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: #50526d;
    font-family: Gotham-Bold;
    text-transform: uppercase;
}

.news-circle-btn-margin{
    margin-bottom: 8px!important;
}

.card-text-home{
    text-align:left;
    font-family: Gotham-Book;
    font-size: 16px!important;
    color: #333!important;
    min-width: 270px !important;
}

.card-img-top-home {
    padding-top: 10px;
    max-height: 206px;
    max-width: 310px;
    min-height: 206px;
    object-fit: contain;
}

/***Carrousel collaborateur***/

.bloc-5{
    height: min-content;
}

@keyframes scroll {
    0% {
        transform: translateX(200px);
   }
    100% {
        transform: translateX(calc(-450px * 7.6));
   }
}
.slider {
    height: 100px;
    margin: auto;
    overflow: hidden;
    position: relative;
    width: 100%;
}
.slider::before, .slider::after {
    content: "";
    height: 100px;
    position: absolute;
    width: 200px;
    z-index: 2;
}
.slider::after {
    right: 0;
    top: 0;
    transform: rotateZ(180deg);
}
.slider::before {
    left: 0;
    top: 0;
}
.slider .slide-track {
    animation: scroll 40s linear infinite;
    display: flex;
    width: calc(250px * 18);
}
.slider .slide {
    height: 100px;
    width: 250px;
}

.carousel-indicators {
    margin-right: auto;
    margin-left: auto;
    padding-bottom: 100px;
    width: 100vw;
}

.arrow-header-after{
    background-image: url('https://www.snapp.fr/wp-content/themes/snapp/assets/images/Slider_arrow.svg');
    display: inline-block;
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    margin-left: 50px;
}

.arrow-header-before{
    background-image: url('https://www.snapp.fr/wp-content/themes/snapp/assets/images/Slider_arrow.svg');
    display: inline-block;
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    margin-bottom: -7px;
    transform: rotateY(180deg);
    margin-right: 50px;
}

.num-header{
    font-size: 15px;
    font-weight: normal;
    font-family: Gotham-Medium;
    position: relative;
    top: -5px;
    margin-left: auto;
    margin-right: auto;
}

/*************************/
/***     BUTTONS      ***/
/*************************/

.btn-home{
    display: inline-block;
    border-radius: 50px;
    width: auto;
    font-size: 15px;
    padding: 13px 25px;
    background-color:  #f4a541;
    font-family: "Gotham-Medium";
    line-height: 1;
    font-weight: 500;
    font-stretch: normal;
    font-style: normal;
    letter-spacing: normal;
}

.btn-home .btn_arrow {
    padding-left: 15px;
}

.btn-home:hover {
    text-decoration: none;
    color: white;
}

.btn-home-service{
    margin-top: 20px !important;
    background-color:  white !important;
    border: solid 2px #f4a541 !important;
    color: #f4a541!important;
    line-height: 1 !important;
}

.btn-home-service .btn_arrow {
    padding-left: 15px;
}

.btn-sm-size{
    min-width: 400px;
    max-width: 400px;
}

.btn-lg-size{
    min-width: 200px;
    max-width: 400px;
}

.responsive-btn-actu{
    position: absolute;
    right: 0;
}

.btn-carrousel-home{
    background-color:white !important;
    color: rgb(61,63,90);
}

.btn-carrousel-home:hover {
    text-decoration: none;
    color: rgb(61,63,90);
}

.a-btn-home{
    background-color: #f4a541;
    color: #fff;
    border-radius: 50px;
}

/*####################--ANIMATION--####################*/
@keyframes pulse {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(244, 165, 65, 0.7);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(244, 165, 65, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(244, 165, 65, 0);
    }
}

@keyframes zoom {
    0% {
        transform: scale(1.1);
    }

    70% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1.1);
    }
}

#button-actus{
    margin-top: 50px;
    margin-left: 85px;
}

.accueil-bloc-carrousel{
    border: 0px solid red;
    width: 100vw;
    height: min-content;
    margin-bottom: 50px;
}

.accueil-title-carrousel{
    font-size: 9vw;
    font-family: Gotham-Bold;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.35;
    letter-spacing: -0.1px;
    color: #fff;
}

.accueil-subtitle-carrousel{
    font-family: Gotham-Bold;
    font-size: 9vw;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.3;
    letter-spacing: -0.1px;
    color: #fff;
    border: 4px solid white;
}

.accueil-hr-carrousel{
    margin-top: 12px;
    color: white;
    font-weight: bold;
}

.accueil-desc-carrousel{
    font-family: Gotham-Bold;
    font-size: 5vw;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.63;
    letter-spacing: normal;
    color: white;
    margin: 0 9px 0px;
}