/* Solution complète pour aligner parfaitement les icônes */

/* 1. Réinitialiser les styles pour les deux types d'icônes */
.services .icon {
  display: block;
  text-align: center;
  margin-bottom: 25px; /* Espace entre l'icône et le texte */
  height: 80px; /* Hauteur fixe pour toutes les icônes */
  position: relative;
}

/* 2. Styles spécifiques pour l'icône Flaticon */
.services .icon span.flaticon-charity {
  font-size: 60px;
  color: #ff0a54;
  line-height: 80px; /* Centrer verticalement dans le conteneur */
}

/* 3. Styles pour les icônes personnalisées */
.custom-icon {
  width: 60px;
  height: 60px;
  display: inline-block;
  filter: brightness(0) invert(27%) sepia(85%) saturate(7057%) hue-rotate(333deg) brightness(100%) contrast(101%);
  position: relative;
  top: 10px; /* Ajustement vertical pour aligner avec l'icône Flaticon */
}

/* 4. Styles pour le survol */
.services:hover .icon span,
.services:hover .icon img.custom-icon {
  filter: brightness(0) invert(100%);
}

/* 5. Styles pour la section active */
.services.active .icon span,
.services.active .icon img.custom-icon {
  filter: brightness(0) invert(100%);
}

/* 6. Ajustements pour mobile */
@media (max-width: 767px) {
  .services .icon {
    height: 70px;
  }
  .services .icon span.flaticon-charity {
    font-size: 50px;
    line-height: 70px;
  }
  .custom-icon {
    width: 50px;
    height: 50px;
    top: 10px;
  }
}