/* Global Styles */
body {
    font-family: "Helvetica Neue", Arial, sans-serif;
    background: #f9f9f9;
    color: #333;
  }
  
  .hero {
    height: 100vh;
    background: linear-gradient(180deg, #e0f7fa, #ffffff);
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .card:hover {
    transform: translateY(-10px);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  }
  
  footer a:hover {
    text-decoration: underline;
  }
  .scrollable-container {
    display: flex;
    justify-content: center;
    width: 100%; /* Largeur personnalisée */
    height: auto; /* Hauteur personnalisée */
    overflow: auto; /* Permet le défilement */
    border: 1px solid #ccc; /* Bordure optionnelle */
  }
  
  .content {
     /* Largeur plus grande que le conteneur */
    height: 600px; /* Hauteur plus grande que le conteneur */
  }
  @media screen and (max-width: 768px) {
    .scrollable-container {
      width: 100%; /* Prend toute la largeur de l'écran */
      height: auto; /* Prend toute la hauteur de la fenêtre */
      overflow: scroll; /*
    }
  
    .content {
      width: auto ; /* Assure que le contenu occupe toute la largeur */
      height: auto; /* Permet au contenu de s'adapter à la hauteur */
    }
  }