@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;700&display=swap');
@font-face {
    font-family: 'Futura XBlkCnIt BT';
    src: url("fonts/7d55631cbe32791d734f9842b0936989.eot");
    src: url('fonts/7d55631cbe32791d734f9842b0936989.woff2') format('woff2'),
         url("fonts/7d55631cbe32791d734f9842b0936989.eot?#iefix")format("embedded-opentype"),
         url("fonts/7d55631cbe32791d734f9842b0936989.ttf")format("truetype"),
         url('fonts/7d55631cbe32791d734f9842b0936989.woff') format('woff'),
         url("fonts/7d55631cbe32791d734f9842b0936989.svg#Futura XBlkCnIt BT")format("svg");
    font-style: italic;
    font-weight: 400;
}

/* Ensuite, utilisez la police dans votre style comme ci-dessus */

body {
    background-color: #F6F6F6;
    margin: 0;
    padding: 0;
    position: relative;
    overflow: hidden;
}

body::before,
body::after {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;

    }
    
body::after {
    top: 50%;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQ0MCIgaGVpZ2h0PSIzMjkwIiB2aWV3Qm94PSIwIDAgMTQ0MCAzMjkwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBvcGFjaXR5PSIwLjA1IiBkPSJNMTAyMS41IDBIMTQ2NUwxNTUzIDMyOTBILTg5VjEyNTkuNUwzMDkuNSA5ODhWNjAxSDc2MEwxMDIxLjUgMFoiIGZpbGw9IiM4NThFQkUiLz4KPC9zdmc+Cg==');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top right;
    }
body::before {
    top: 0;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODI0IiBoZWlnaHQ9IjY5NiIgdmlld0JveD0iMCAwIDgyNCA2OTYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIG9wYWNpdHk9IjAuMDUiIGQ9Ik00NDAuNSA2OTUuNUgtMjM0TC0zMDkgLTE0NUg4MjRMNDQwLjUgNjk1LjVaIiBmaWxsPSIjODU4RUJFIi8+Cjwvc3ZnPgo=');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top left;
    width: 50%;
}    



.container {
    width: 100%;
    max-width: 1440px;
    position: relative;
    z-index: 1;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px; /* pour le padding interne */
    padding-right: 20px; /* pour le padding interne */
}

/* Styles pour le header */
header {
    /*border-bottom: 1px solid #eaeaea; /* Ajoutez une bordure si nécessaire */
    padding: 10px 0;
}

.top-bar {
    background-color: #f8f8f8; /* Changer la couleur de fond de la top bar */
    color: #333;
    text-align: center;
    padding: 5px 0;
}

.main-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    font-family: 'Manrope', sans-serif;
}

.logo img {
    height: 50px; /* Ajuster selon la taille du logo du client */
}

.nav-links {
    list-style: none;
    display: flex;
}

.nav-links li {
    padding: 0 15px;
}

.nav-links a {
    text-decoration: none;
    color: #333;
    font-weight: bold;
    font-family: 'Manrope', sans-serif; /* Applique la police Manrope */
}

.nav-link {
    display: inline-flex; /* Utilisez flexbox pour aligner le texte et l'image */
    align-items: center; /* Centre les éléments verticalement */
}

.nav-arrow {
    width: 10px; /* ou la largeur souhaitée */
    height: 4px; /* ou la hauteur souhaitée */
    margin-left: 8px; /* Espace entre le texte et l'image */
    transition: transform 0.3s ease; /* Pour une animation lors du survol, si désiré */
}

/* Pour faire pivoter l'image de la flèche quand on survole le lien, si désiré */
.nav-link:hover .nav-arrow {
    transform: rotate(180deg); /* Pivote la flèche de 180 degrés */
}



.login-area {
    /* Ajoutez des styles pour la zone de connexion si nécessaire */
}

.login-button {
    padding: 12px 28px; /* Cela crée la taille du bouton en fonction du contenu */
    background-color: #026633; /* La couleur de fond du bouton */
    border-radius: 50px; /* Les coins arrondis du bouton */
    color: white; /* La couleur du texte du bouton, supposée blanche pour une bonne visibilité */
    text-decoration: none; /* Supprime le soulignement par défaut des liens */
    display: inline-block; /* Permet au padding et autres dimensions de s'appliquer */
    border: none; /* Aucune bordure, sauf si vous en voulez une */
    cursor: pointer; /* Change le curseur en une main quand vous survolez le bouton */
    transition: opacity 0.3s ease; /* Pour un effet de fondu lors du changement de l'opacité */
    /* Ajouter d'autres styles de texte si nécessaire */
    font-weight: bold; /* Par exemple, pour un texte en gras */
    /* Vous pourriez aussi vouloir ajouter :hover et :focus pseudo-classes pour les interactions */
}

.login-button:hover, .login-button:focus {
    opacity: 1; /* Change l'opacité en 1 lorsque le bouton est survolé ou focalisé */
}

.slide {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0 75px;
}

.slide-text h1 {
    font-family: 'Futura XBlkCnIt BT', sans-serif; /* Fallback to sans-serif in case the font doesn't load */
    font-size: 55px;
    font-style: italic;
    font-weight: 400;
    line-height: 65.98px;
    text-align: left;
    width: 678px;
    background: #3D8A42;
background: linear-gradient(to right, #3D8A42 0%, #04743B 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
padding: 0 5px;

    margin: 0;
}


.slogan {
    font-size: 1.2em;
    margin: 10px 0;
    color: #108147; /* Couleur du slogan */
    font-family: 'Manrope', sans-serif; /* Fallback to sans-serif in case the font doesn't load */
    font-weight: 500;
    font-size: 28px;
}
.slogan span {
    font-family: 'Futura XBlkCnIt BT', sans-serif;  
    font-weight: 400;

}

.download-buttons {
    display: flex;
    align-items: center; /* Cela aligne les boutons verticalement au centre, si leurs hauteurs sont différentes. */
    gap: 10px; /* Cela crée un espace entre les boutons. Modifiez la valeur selon vos besoins. */
}

.download-button {
    display: inherit; /* Cela permet de s'assurer que le padding et la hauteur/ largeur fonctionnent. */
    text-decoration: none;
    color: white;
    font-family: 'Manrope', sans-serif; 
    font-weight: 500;
    align-items: center;
    padding: 10px 20px;
    margin: 5px 0;
    clip-path: polygon(0% 0%, 100% 0, 100% 70%, 93% 100%, 0 100%, 0% 50%);
}

.android-button {
    background-color: #3ddc84; /* Couleur de fond pour le bouton Android. */
    /* Autres styles spécifiques au bouton Android ici... */
}

.ios-button {
    background-color: #000000; /* Couleur de fond pour le bouton iOS. */
    /* Autres styles spécifiques au bouton iOS ici... */
}

.download-button.android {
    background-color: #026633; /* Couleur du bouton Android */

}

.download-button.ios {
    background-color: #026633; /* Couleur du bouton iOS */
}

.download-button img {
    width: 19px; /* Taille de l'icône */
    margin-right: 10px;
}
img.ios {
    width: 21px;
}

.slide-image {
    position: relative;
    width: 490px; /* Largeur de l'image */
    height: 490px; /* Hauteur de l'image */
}

.phone-image {
    width: 100%;
    height: auto;
}

.user-count, .rating {
    position: absolute;
    font-size: 20px;
    font-family: 'Manrope';
    color: #026633;
    font-weight: 500;
    background-color: #ffffff;
    box-shadow: 0px 3px 20px 0px #0000001a;
    border-radius: 10px;
}

.user-count {
    top: 90px;
    padding: 15px;
    right: -30px;
    margin: 0;
    
}
.user-count img, .rating img {
vertical-align: top;
margin-right: 3px;
float: left;
}

.rating {
    bottom: 10px; /* Ajustez la position en fonction de l'image */
    padding: 5px;
    width: 210px;
}
.rating span {
    margin-left: 5px;
}
.rating::after {
    content: '';
    clear: both;
}

/* Ajoutez des media queries pour rendre le header responsive */