/*
 ######  #######  #######  ######### 
 #     # #     #  #     #      #       
 #     # #     #  #     #      #       
 ######  #     #  #     #      #    
 #   #   #     #  #     #      #       
 #    #  #     #  #     #      #      
 #     # #######  #######      #   
                                         
*/
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');
:root{
    --clr-white : #fff;
    --clr-grey: #c8c8c6;
    --clr-dark: #2a2a2a;
    --clr-purple: #8b4dcc;
    --clr-orange:#ff8802;
    --clr-green:#098b25;
    --clr-blue:#4a95c9;
    --clr-red: #ff0707;
    --txt-primary: #212020;
    --ff-mont : 'Montserrat' , sans-serif;

}



/*
  ####   ####  #    # ##### ###### #    # #    #
 #    # #    # ##   #   #   #      ##   # #    #
 #      #    # # #  #   #   #####  # #  # #    #
 #      #    # #  # #   #   #      #  # # #    #
 #    # #    # #   ##   #   #      #   ## #    #
  ####   ####  #    #   #   ###### #    #  ####
*/
body{
    color: var(--clr-white);
    font-family: var(--ff-mont);
}
/*Lien <a>*/
a{
    color: var(--clr-blue);
    transition: all 0.5ms ease-in-out;
}
::placeholder{
    color:var(--clr-white)!important;
}
a:hover{
    color: lightgrey;
}
a.fs-white{
    color: var(--clr-white);
}
.fs-white:hover{
    color: lightgrey;
}
/*BTN */
.btn-devis{
    background-color: var(--clr-white);
    transition: all .5s ease-in-out;
    color: var(--clr-dark)!important;
    border-radius: 0;

}
.btn-devis:hover{
    background-color: var(--txt-primary);
    color: var(--clr-white)!important;
}
.btn-devis-b{
    
    background-color: var(--txt-primary);
    color: var(--clr-white)!important;
    transition: all .5s ease-in-out;
    border-radius: 0;

}
.btn-devis-b:hover{
    background-color: var(--clr-white);
    color: var(--txt-primary)!important;
    border: 1px solid var(--txt-primary);
}
/*Couleur de texte et background custom */
.primary-text{
    color: var(--txt-primary)!important;;
}
.purple-text{
    color:var(--clr-purple);
}
.orange-text{
    color:var(--clr-orange)
}
.green-text{
    color:var(--clr-green)
}
.blue-text{
    color:var(--clr-blue)
}
.purple-bg{
    background-color:var(--clr-purple);
}
.orange-bg{
    background-color:var(--clr-orange)
}
.green-bg{
    background-color:var(--clr-green)
}
.blue-bg{
    background-color:var(--clr-blue)
}
.grey-bg{
    background-color: var(--clr-grey);
}
/*Modification list*/
.list-group-item:first-child{
    border-radius:0;
}
.list-group-item:last-child{
    border-radius:0;
}
/*---------HEADER----------*/
.navbar .nav-item .nav-link{
    color: var(--clr-white);
}
.navbar:hover{
    color: var(--clr-white);
}
.nav-link:after{
    display:block;
    content: '';
    border-bottom: solid 3px var(--clr-white);  
    transform: scaleX(0);  
    transform-origin: 100% 50%;
    transition: transform 250ms ease-in-out;
}
.nav-link:hover:after{
    transform: scaleX(1);
    transform-origin:   0% 50%;
}
/*--------BODY--------*/
.accueil{
    background-image:url("../images/background.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    height:auto;

}
.normal{
    background-image:url("../images/background.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    height:auto;
}
/*Produit*/
#product {
    margin-top: 0px;
}
/*Customisation */
.space{
    margin:  18px 0; 
}

.margin-year{
    margin-top:-28px;
}
.img-h{
    max-height: 420px;
    max-width: 380px;
}
.fa-2xl{
    font-size: 4em;
}
/*Taille svg*/
.size{
    font-size: 6em;
}
.size-b{
    font-size: 3em;
}
.linkCard{
    position: relative;
}

/*Positionnement des dots du SLICK*/
.vertical-dots
{
    right:-30px;
    list-style: none;
    display: block;
    position: absolute;
    top: 20%;
    margin-top: -10px;
    text-align: right;
}
.vertical-dots li
{
    position: relative;
    width: 20px;
    height: 20px;
    cursor: pointer;
}
.vertical-dots li button
{
    font-size: 0;
    line-height: 0;
    display: block;
    width: 20px;
    height: 20px;
    padding: 5px;
    cursor: pointer;
    color: transparent;
    border: 0;
    outline: none;
    background: transparent;
}
.vertical-dots li button:hover,
.vertical-dots li button:focus
{
    outline: none;
}
.vertical-dots li button:hover:before,
.vertical-dots li button:focus:before
{
    opacity: 1;
}
.vertical-dots li button:before
{
    font-family: 'slick';
    font-size: 6px;
    line-height: 20px;

    position: absolute;
    top: 0;
    left: 0;

    width: 20px;
    height: 20px;

    content: '•';
    text-align: center;

    opacity: .25;
    color: var(--clr-white);

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.vertical-dots li.slick-active button:before
{
    opacity: .75;
    color: black;
}
.slick-track{
   display: flex !important;
   align-items: center;
  
}
.slick-slide{
    margin:auto;
    display: flex!important;
    justify-content: center;

}
.slick-slide img{
    max-height: 200px;
}
.slick-dots{
    position: absolute;
    bottom: -35px;
    display: block;
    width: 100%;
    margin-top: -20px;
    list-style: none;
    text-align: center;
    }
    .slick-dots li.slick-active button:before{
      color: black;
    }
/*ALERT NOTIFACTION MAIL*/
.email-sent{
    background-color: var(--clr-green);
    color: #fff;
    border-radius: 0;
    text-align: center;
}
.email-error{
    background-color: var(--clr-red);
    color: #fff;
    border-radius: 0;
    text-align: center;
}

/*
 ######  ####   ####  ##### ###### #####
 #      #    # #    #   #   #      #    #
 #####  #    # #    #   #   #####  #    #
 #      #    # #    #   #   #      #####
 #      #    # #    #   #   #      #   #
 #       ####   ####    #   ###### #    #
*/
footer .list-group-item{
    background-color: initial;
    border: none;
    text-transform: capitalize;
    padding: 8px 0px;
}
.footer-nav{
    text-decoration: none;
    padding: 0;
    
}
.footer a,
footer a,
.navbar a{
    color: var(--clr-white);
}
.back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: fit-content;
    height: fit-content;
    border-radius: 50%;
    z-index: 9999;
    cursor: pointer;
    text-decoration: none;
    transition: opacity 0.2s ease-out;
    background-image: url(top.png);
}

.back-to-top:hover{
    opacity: 0.7;
}
/*
 #####  ######  ####  #####   ####  #    #  ####  # #    # ######
 #    # #      #      #    # #    # ##   # #      # #    # #
 #    # #####   ####  #    # #    # # #  #  ####  # #    # #####
 #####  #           # #####  #    # #  # #      # # #    # #
 #   #  #      #    # #      #    # #   ## #    # #  #  #  #
 #    # ######  ####  #       ####  #    #  ####  #   ##   ######
*/

/*
******************************************************************
******************************************************************

*/


/* Small devices (landscape phones, 576px and up) */

@media (min-width: 576px) {
    .vertical-dots{
        top: 20%;
    }
}


/* Medium devices (tablets, 768px and up) */

@media (min-width: 768px) {
    .vertical-dots{
        top: 30%;
    }
}

/* Large devices (desktops, 992px and up) */

@media (min-width: 992px) {
    .accueil{
        height: 100vh;
    }
    #product {
        margin-top: -150px;
    }
     
}


/* Extra large devices (large desktops, 1200px and up) */

@media (min-width: 1200px) {
   
}