body {
            font-family: 'Inter', sans-serif;
            color: #333;
        }

    .hero-section {
    /*     background-color: #f8f9fa; */
        background-image: url('large.png'); /* Remplacez par le nom de votre fichier image */
        background-size: cover; /* Couvre toute la section */
        background-position: center; /* Centre l'image */
        background-repeat: no-repeat; /* Empêche la répétition */
        padding: 80px 0;
        text-align: center;
        color: white; /* Assurez-vous que le texte soit lisible sur l'image de fond */
        /* Ajoutez un léger dégradé ou un filtre pour améliorer la lisibilité du texte si l'image est trop claire */
        position: relative; /* Nécessaire pour le pseudo-élément */
        overflow: hidden; /* Empêche le débordement si un pseudo-élément est utilisé */
    }

    /* Optionnel : Ajouter un voile sombre pour améliorer la lisibilité du texte sur l'image */
    .hero-section::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.4); /* Voile noir transparent (40%) */
        z-index: 1; /* S'assure que le voile est au-dessus de l'image mais sous le texte */
    }



    .hero-section h1,
    .hero-section p,
    .hero-section .btn {
        position: relative; /* Place le texte et les boutons au-dessus du voile */
        z-index: 2;
    }

    /* Ajustez la couleur du texte dans la section hero si elle n'est pas déjà blanche */
    .hero-section h1,
    .hero-section p {
        color: white;
    }


    .hero-section p {
        font-size: 1.25rem;
        margin-bottom: 40px;
        /*             color: #555; */
    }

    .hero-section h1 {
        font-size: 3.5rem;
        font-weight: 700;
        color: #FFF;
/*         color: #212529; */
        margin-bottom: 20px;
    }