.flip-card {
    background-color: transparent;
    width: 400px;
    height: 400px;
    perspective: 1000px; /* Remove this if you don't want the 3D effect */
  }

  .flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: justify;
    transition: transform 0.8s;
    transform-style: preserve-3d;
  }

  .flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
  }

  .flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 10px;
  }

  .flip-card-front {
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  }

  .flip-card-back {
    background-color: white;
    color: white;
    transform: rotateY(180deg);
    display: block;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    overflow-y: auto;
  }

  .flip-card img {
    width: 250px;
  }
  .p{
    color: black !important;
  }
  li{
    color: black !important;
  }
  .col-12 {
    margin-bottom: 20px; /* Espace de 20px entre les cartes */
  }
  /* scroll bar css */
  /* Pour les navigateurs basés sur WebKit comme Chrome, Safari */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background-color: #808080; /* Couleur principale Bootstrap */
    border-radius: 10px;
    border: 2px solid #ffffff;
}