.hShadow{
    text-shadow: black 0.2em 0.1em 0.3em;
}
.decoNone{
    text-decoration: none;
    color: black;
}
footer{
    margin-top: auto;
}
.MomentBG{
    background-color: #2c2c2c;
    /* font-size:40px; */
    font-size: calc(1.475rem + 2.7vw);
    font-weight: 300;
    line-height: 1.2;
    margin-left:5%;
    font-family:Brush Script MT;
    border-radius: 12px;
}
 .textColor{
   color: #FFFFFF; 
 }
body{
     background-image: url(https://images6.alphacoders.com/872/thumb-1920-872784.jpg);
     background-repeat: no-repeat;
     background-size: cover;
     background-attachment: fixed;
 }
.roundBorderTitle{
    border-radius: 30px;
    text-align: center;
}
.roundBorder{
    border-radius: 30px;
}
 .BackGround{
    background-color: #8A5F42;
 }
  .hide{
    opacity: 0;
    border: none;
    transition:all 1s ease-in-out;
}

.toutnoir{
    background-color:rgba(0,0,0,0.6);
}
.imgCard{
    border-radius: 12px !important;
}
.cardlivre{
    color: black !important;
    box-shadow: black !important;
    border-radius: 12px !important;
}

.stext{
    text-shadow:black 3px 1px 10px;
}
.imgslide{
    height: 340px;
    width: 280px;
}

#slick .arrow_prev{
    position:absolute;
    right: 102.2%;
    bottom: 50%;
    background-color: #8A5F42;
    width: 60px;
    border-radius: 50px;
}
#slick .arrow_next{
    position:absolute;
    left: 102.2%;
    bottom: 50%;
    background-color: #8A5F42;
    width: 60px;
    border-radius: 50px;
}
#slick .slick-dots li{
    list-style: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: inline-block;
    margin-left: 1%;
    margin-top: 1%;
    background: grey ;
    
}
#slick .slick-dots {
     text-align: center;
 }

 #slick .slick-dots li button {
     display: none ;
 }
 .slick-dots li.slick-active {
    background: white!important;
 }
 .slick-slide{
     transform: scale(0.8);
     opacity: 0.8;
     transition: all ease-in-out 0.5s;
 } 
 .slick-slide.slick-current{
        transform: scale(1);
        opacity: 1;
 }
 .red{
     color: red;
 }
 
 .btn-grad {background-image: linear-gradient(to right, #4b2dd1 0%, #26a0da  51%, #314755  100%)}
 .btn-grad {
    margin: 10px;
    padding: 15px 45px;
    text-align: center;
    text-transform: uppercase;
    transition: 0.5s;
    background-size: 200% auto;
    color: white;            
    box-shadow: 0 0 20px #eee;
    border-radius: 10px;
    display: block;
  }

  .btn-grad:hover {
    background-position: right center; /* change the direction of the change here */
    color: #fff;
    text-decoration: none;
  }

 #slick .slick-dots li button {
     display: none ;
 }
 .slick-dots li.slick-active {
    background: white!important;
 }
 .slick-slide{
     transform: scale(0.8);
     opacity: 0.8;
     transition: all ease-in-out 0.5s;
 } 
 .slick-slide.slick-current{
        transform: scale(1);
        opacity: 1;
 }

 .btn-balayage {
    padding: 1%;
    border: 1px rgba(128, 128, 128, 0.418) solid;
    border-radius: 50px;
    background: linear-gradient(to right, #a8ff78, #78ffd6);
    background-repeat: no-repeat;
    background-size: 0 100%;
    transition: background-size 1s 0s;
  }
  
  .btn-balayage:hover {
    background-size: 100% 100%;
  }

  .checkbox1 {
    margin-top: 5%;
    margin-bottom: 2%;
  }

  .back{
      position: absolute;
      top: 5%;
      left: 2%;
      color: white;
  }

  .roundedBorders{
      border-radius: 10px;
      background-color: white;
      margin-top: 4%;
      width: 75%;
      padding: 1%;
      box-shadow: 2px 8px 10px black;
  }
/* .white{
    background-color:#FFE9D6;
} */
.bSn
{
    border: 1px solid black;
    width: 0px;
    height: 200px;
    --bs-gutter-x:none;
}
.starYell{
    color: #FFD700;
}

#scroll{
    position: absolute;
    top: 18%;
    width: 16%;
}

#numeroCb{
background-size: contain;
background-repeat: no-repeat;
}
@media screen and (width >=  768px) {
    .descriptionProduit{
        min-width: 700px;
    }
}
@media screen and (width <=  768px) {
    .produitImage{
        text-align: center!important;
    }
}
