.m-interests h4 {
    color: #E76F51;
    font-size: 50px;
    font-weight: bold;
    text-align: right;
    text-transform: uppercase;
    font-weight: 600;
    margin-top: 300px;
    margin-right: 30px;
}

.interest li {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    border-radius: 10px;
    overflow: hidden;
    margin: 10px;
    display: inline-block; 
    width: calc(25% - 20px); 
  }
  
  .interest li:not(.-content) {
    position: relative;
  }
  
  .interest li img {
    width: 100%;
    display: block;
    border-radius: 10px 10px 0 0;
  }
  
  .interest li .-content {
    padding: 15px;
    background: #fff;
  }
  
  .interest li:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  }
  
  
  .swiper-slide p {
    font-size: 3rem; /* Ajustez selon la taille désirée */
    text-transform: uppercase;
    color: #FFFFFF; /* Ou toute autre couleur de votre choix */
  }
  
  
  @media (max-width: 768px) {
    .m-interests h4 {
        font-size: 24px; /* Taille plus petite pour les titres sur mobile */
        margin-top: 50px; /* Ajustez selon l'espace que vous avez en tête */
        text-align: left; /* Pour l'alignement à gauche sur les mobiles */
    }

    .swiper-container {
        overflow: visible; /* Permet aux slides de sortir de l'écran */
    }

    .swiper-slide {
        width: 80%; /* Largeur plus petite pour les slides pour les voir sortir de l'écran */
    }

    .swiper-slide p {
        font-size: 1.5rem; /* Taille de police plus petite pour les textes des slides */
    }

    .interest li {
        width: 100%; /* Largeur complète pour les intérêts, ajustez si nécessaire */
        box-shadow: none; /* Optionnel : retirez l'ombre pour un look plus plat */
        margin: 5px 0; /* Moins de marge pour les mobiles */
    }

    .interest li img {
        border-radius: 5px; /* Ajustez le rayon de la bordure si nécessaire */
    }
}