.service-item {
    /*border: 2px solid #007bff; /* Bordure bleue à l'état normal */
    border-radius: 10px; /* Coins arrondis */
    padding: 20px; /* Espacement interne */
    height: 100%; /* Hauteur maximale */
    display: flex; /* Utilisation de flexbox */
    flex-direction: column; /* Alignement en colonnes */
    justify-content: space-between; /* Espace entre les éléments */
    text-align: center; /* Centrage du contenu */
    position: relative; /* Position relative pour l'animation */
    overflow: hidden; /* Masquage du débordement pour l'effet de transition */
    transition: all 0.3s ease; /* Transition douce de tous les propriétés */
    margin-bottom: 20px; /* Espacement entre les blocs */
}

.service-item:hover {
    background-color: #007bff; /* Fond bleu au survol */
    cursor: pointer; /* Curseur pointer au survol */
}

.service-item:hover h4,
.service-item:hover p,
.service-item:hover i {
    color: #fff; /* Texte blanc au survol */
}

.service-item:hover i {
    transform: translateX(5px); /* Déplacement animé de l'icône vers la droite */
}

.service-item:hover .read-more {
    color: #fff; /* Texte "Read More" blanc au survol */
}

.read-more {
    color: #007bff; /* Couleur du lien "Read More" */
    display: inline-flex; /* Affichage en ligne avec flexbox */
    align-items: center; /* Alignement vertical */
}

.read-more:hover {
    color: #fff; /* Texte "Read More" blanc au survol */
}
.arrow-icon {
    font-size: 0.8rem; /* Taille plus petite pour l'icône de flèche */
    vertical-align: middle; /* Alignement vertical au centre */
    margin-left: 5px; /* Espacement à gauche de l'icône */
}
@media (max-width: 992px) {
    .gy-4 [class*="col-"] {
        margin-bottom: 20px; /* Espacement vertical entre les blocs sur les écrans plus petits */
    }
}
.page-header {
    background: linear-gradient(rgba(0, 0, 0, .4), rgba(0, 0, 0, .4)), url(../img/bg.jpg) center center no-repeat;
    background-size: cover;
  }
  .page-header .container {
    position: relative;
    padding: 45px 0 45px 35px;
    border-left: 15px solid #FFFFFF;
  }
  
  .header-carousel .container::before,
  .header-carousel .container::after,
  .page-header .container::before,
  .page-header .container::after {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100px;
    height: 15px;
    background: #FFFFFF;
  }
  
  .header-carousel .container::after,
  .page-header .container::after {
    top: 100%;
    margin-top: -15px;
  }