.hero {
    background-color: #125072;  /* Couleur de fond derrière l'image */
    height: 434px;              /* Hauteur fixe */
    display: flex;
    justify-content: center;    /* Centre l'image horizontalement */
    align-items: center;        /* Centre verticalement */
}

.hero img {
    width: 100%;                /* L'image prend toute la largeur disponible */
    height: 100%;               /* L'image prend la hauteur définie de la bannière */
    object-fit: cover;          /* L'image couvre tout le conteneur sans se déformer */
}

header {
    background-color: #002F5F; /* Une couleur pour ton header */
    color: white;
}

.activity-summary {
    margin-top: 20px; /* Ajoute un espace entre la bannière et la section "About" */
}

.features {
    background-color: #3979a8;  /* Couleur de fond pour la section */
    padding: 40px 0;            /* Ajout de padding pour un espacement confortable */
    color: white;               /* Changer la couleur du texte en blanc pour un bon contraste */
}

.features .card {
    background-color: white;    /* Les cartes doivent rester avec un fond blanc pour contraster */
    color: black;               /* Texte des cartes en noir */
}

/* Styles pour les menus déroulants */
select.form-control {
    color: black !important;
}

/* Styles pour les options du menu déroulant */
select.form-control option {
    background-color: white !important;
    color: black !important;
    padding: 8px !important;
}