body{

    background-color: rgb(16, 0, 21) !important;

}



h1, h2, h3, p, a, span{

    color: white !important;

}



.image-banner {

    position: relative;

    background-image: url('/images/hero4.jpg');

    background-size: cover;

    background-position: center;

    overflow: hidden;

}

.image-banner::after {

    content: '';

    position: absolute;

    bottom: 0;

    left: 0;

    width: 100%;

    height: 100%;

    /*background: rgba(33, 1, 42, 0.7);*/

    background: linear-gradient(rgba(33, 1, 42, 0.7), rgba(16, 0, 21, 1));

    pointer-events: none;

}



#clientLogo {

    background-color: #fdfbfe;

    overflow: hidden;

    position: relative;

}



.logo-slider {

    display: flex;

    align-items: center;

    height: 100%;

    animation: scrollLogos 40s linear infinite;

    will-change: transform;

    width: max-content;

}



.logo-item {

    flex: 0 0 auto;

    display: flex;

    justify-content: center;

    align-items: center;

}



.logo-item img {

    object-fit: contain;

    display: block;

}



/* Animation du carrousel de logo*/

@keyframes scrollLogos {

    0% {

        transform: translateX(0);

    }

    100% {

        transform: translateX(-50%);

    }

}



/*Animation au survol de la page*/

@media (hover: hover) {

    .logo-item img:hover {

        transform: scale(1.1);

    }

    .quotationBtn:hover{

        background-color: #ffde36;

        transform: scale(1.02);

    }

}



.card{

    border:none;

}



#cardLink{

    text-decoration: none;

}



.carousel-item .row {

    align-items: center;

}

/*CSS Téléphone portrait*/

@media (max-width: 575.99px){

    /*Hero de la page d'accueil*/

    .image-banner {

        width: 100%;

        height: 50vh;



    }



    /*Contenu du hero de la page d'accueil*/

    .banner-content {

        width: 80%;

        z-index: 2;

        margin: auto;

    }



    /*h2 du hero de la page d'accueil*/

    .banner-content h2{

        font-size: 1.1rem;

    }



    /*Bouton pour aller vers la page de demande de devis*/

    .quotationBtn{

        font-size: 1.1rem;

    }



    /*Section de pr�sentation de l'entreprise*/    

    #companyBlock{

        width: 80vw;

    }



    /*Section carrousel de client important*/

    #importantClient{

        margin-top: 12vh;

    }

    .logo-slider {

    animation: scrollLogos 20s linear infinite;


}



    /*Bannière de logo qui défile*/

    #clientLogo {

        height: 25vh;

    }

    

    /*Le bloc des logos qui défile*/

    .logo-item {

        min-width: 30vw;

        height: 100%;



    }



    /*Les image des logos*/

    .logo-item img {

        height: auto;

        max-height: 10vh;

        width: auto;

    }



    /*La section des News*/

    .sectionNews{

        min-height: 10vh;

    }



    /*Card de News*/

    .card-body{

        min-height: 20vh;
        height: auto;
        overflow: hidden;
        padding-bottom: 0px !important;

    }

    

    /*Section contenant le carrousel des cards de News*/    

    #carouselNews{

        height: 100%;

    }



    .carousel-item {

        height: 100%;

    }

    

    .carousel-item .row {

        height: 100%; 

    }  



    

}

/*CSS Tablette mode portrait*/

@media (min-width: 576px) and (max-width:767px){

    /*Hero de la page d'accueil*/

    .image-banner {

        width: 100%;

        height: 45vh;



    }



    /*Contenu du hero de la page d'accueil*/

    .banner-content {

        width: 70%;

        z-index: 2;

        margin: auto

    }



    /*h2 du hero de la page d'accueil*/

    .banner-content h2{

        font-size: 1.3rem;

    }



    /*Bouton pour aller vers la page de demande de devis*/

    .quotationBtn{

        font-size: 1.2rem;

    }



    /*Section de présentation de l'entreprise*/    

    #companyBlock{

        width: 80vw;

    }



    /*Section carrousel de client important*/

    #importantClient{

        margin-top: 12vh;

    }



    /*Bannière de logo qui défile*/

    #clientLogo {

        height: 20vh;

    }

    

    /*Le bloc des logos qui défile*/

    .logo-item {

        min-width: 30vw;

        height: 100%;



    }



    /*Les image des logos*/

    .logo-item img {

        height: auto;

        max-height: 15vh;

        width: auto;

    }



    /*La section des News*/

    .sectionNews{

        min-height: 60vh;

    }



    /*Card de News*/

    .card-body{

        min-height: 18vh;
        height: auto;
        overflow: hidden;
        padding-bottom: 0px !important;

    }

    

    /*Section contenant le carrousel des cards de News*/    

    #carouselNews{

        height: 100%;

    }



    .carousel-item {

        height: 100%;

    }

    

    .carousel-item .row {

        height: 100%; 

    } 





    

}



/*CSS Tablette mode paysage*/

@media (min-width: 768px) and (max-width: 1199px) {

    /*Hero de la page d'accueil*/

    .image-banner {

        width: 100%;

        height: 70vh;

    }


    /*Contenu du hero de la page d'accueil*/

    .banner-content {

        width: 60%;

        z-index: 2;

        margin-left: 10%;

        margin-bottom: 2%;

        padding-bottom: 5%;

    }



    /*h2 du hero de la page d'accueil*/

    .banner-content h2{

        font-size: 1.5rem;

    }



    /*Bouton pour aller vers la page de demande de devis*/

    .quotationBtn{

        font-size: 1.2rem;

    }



    /*Section de présentation de l'entreprise*/    

    #companyBlock{

        width: 80vw;

    }



    /*Section carrousel de client important*/

    #importantClient{

        margin-top: 12vh;

    }



    /*Bannière de logo qui défile*/

    #clientLogo {

        height: 30vh;

    }

    

    /*Le bloc des logos qui défile*/

    .logo-item {

        min-width: 30vw;

        height: 100%;


    }



    /*Les image des logos*/

    .logo-item img {

        height: auto;

        max-height: 25vh;

        width: auto;

    }



    /*La section des News*/

    .sectionNews{

        min-height: 50vh;

    }



    /*Card de News*/

    .card-body{
        min-height: 44vh;
        height: auto;
        overflow: hidden;
        padding-bottom: 0px !important;

    }

    

    /*Section contenant le carrousel des cards de News*/    

    #carouselNews{

        height: 100%;

    }



    .carousel-item {

        height: 100%;

    }

    

    .carousel-item .row {

        height: 100%; 

    } 

      

}



/*CSS Ordinateur 1200 à 1400*/

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

    /*Hero de la page d'accueil*/

    .image-banner {

        width: 100%;

        height: 80vh;



    }



    /*Contenu du hero de la page d'accueil*/

    .banner-content {

        width: 50%;

        z-index: 2;

        margin-left: 10%;

        margin-bottom: 10%;

    }



    /*h2 du hero de la page d'accueil*/

    .banner-content h2{

        font-size: 1.5rem;

    }



    /*Bouton pour aller vers la page de demande de devis*/

    .quotationBtn{

        font-size: 1.2rem;

    }



    /*Section de présentation de l'entreprise*/    

    #companyBlock{

        width: 80vw;

    }



    /*Section carrousel de client important*/

    #importantClient{

        margin-top: 15vh;

    }



    /*Bannière de logo qui défile*/

    #clientLogo {

        height: 30vh;

    }

    

    /*Le bloc des logos qui défile*/

    .logo-item {

        min-width: 25vw;

        height: 100%;



    }



    /*Les image des logos*/

    .logo-item img {

        height: auto;

        max-height: 20vh;

        width: auto;

    }



    /*La section des News*/

    .sectionNews{

        min-height: 60vh;

    }



    /*Card de News*/

    .card-body{
        min-height: 38vh;
        height: auto;
        overflow: hidden;
        padding-bottom: 0px !important;
    }

    

    /*Section contenant le carrousel des cards de News*/    

    #carouselNews{

        height: 100%;

    }



    .carousel-item {

        height: 100%;

    }

    

    .carousel-item .row {

        height: 100%; 

    } 

 

    

}



/*CSS Ordinateur*/

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

    /*Hero de la page d'accueil*/

    .image-banner {

        width: 100%;

        height: 70vh;



    }



    /*Contenu du hero de la page d'accueil*/

    .banner-content {

        width: 40%;

        z-index: 1;

        margin-left: 10%;

        margin-bottom: 10%;

    }



    /*h2 du hero de la page d'accueil*/

    .banner-content h2{

        font-size: 1.5rem;

    }



    /*Bouton pour aller vers la page de demande de devis*/

    .quotationBtn{

        font-size: 1.2rem;

    }



    /*Section de présentation de l'entreprise*/    

    #companyBlock{

        width: 80vw;

    }



    /*Section carrousel de client important*/

    #importantClient{

        margin-top: 15vh;

    }



    /*Bannière de logo qui défile*/

    #clientLogo {

        height: 30vh;

    }

    

    /*Le bloc des logos qui défile*/

    .logo-item {

        min-width: 25vw;

        height: 100%;



    }



    /*Les image des logos*/

    .logo-item img {

        height: auto;

        max-height: 25vh;

        width: auto;

    }



    /*La section des News*/

    .sectionNews{

        min-height: 60vh;

    }



    /*Card de News*/

    .card-body{
        min-height: 35vh;
        height: auto;
        overflow: hidden;
        padding-bottom: 0px !important;

    }

    

    /*Section contenant le carrousel des cards de News*/    

    #carouselNews{

        height: 100%;

    }



    .carousel-item {

        height: 100%;

    }

    

    .carousel-item .row {

        height: 100%; 

    } 

}



/*CSS grand Ordinateur*/

@media (min-width: 1850px){



    /*Hero de la page d'accueil*/

    .image-banner {

        width: 100%;

        height: 70vh;



    }



    /*Contenu du hero de la page d'accueil*/

    .banner-content {

        width: 40%;

        z-index: 1;

        margin-left: 10%;

        margin-bottom: 10%;

    }



    /*h2 du hero de la page d'accueil*/

    .banner-content h2{

        font-size: 1.5rem;

    }



    /*Bouton pour aller vers la page de demande de devis*/

    .quotationBtn{

        font-size: 1.2rem;

    }



    /*Section de présentation de l'entreprise*/    

    #companyBlock{

        width: 60vw;

    }



    /*Section carrousel de client important*/

    #importantClient{

        margin-top: 15vh;

    }



    /*Bannière de logo qui défile*/

    #clientLogo {

        height: 30vh;

    }

    

    /*Le bloc des logos qui défile*/

    .logo-item {

        min-width: 20vw;

        height: 100%;



    }



    /*Les image des logos*/

    .logo-item img {

        height: auto;

        max-height: 25vh;

        width: auto;

    }



    /*La section des News*/

    .sectionNews{

        min-height: 60vh;

    }



    /*Card de News*/

    .card-body{
        min-height: 25vh;
        height: auto;
        overflow: hidden;
        padding-bottom: 0px !important;

    }

    

    /*Section contenant le carrousel des cards de News*/    

    #carouselNews{

        height: 100%;

    }



    .carousel-item {

        height: 100%;

    }

    

    .carousel-item .row {

        align-items: center;

        height: 100%; 

    }

    

    

}