/* ✅ Importation de la police Open Sans */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap');

/* 🏆 Appliquer Open Sans à toute la page */
body {
    font-family: 'Open Sans', sans-serif;
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* 🔹 Assure un minimum de hauteur pour permettre le scroll */
}
html, body {
    width: 100vw;
    max-width: 100vw;
    min-height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    transform-origin: top left; /* ✅ Fixe le point d'origine */
    font-size: clamp(14px, 1vw, 16px); /* ✅ Ajuste la taille du texte pour le zoom */
}



br {
    display: none;
}

*{
    /* removes default margins and padding from all elements. */
  margin: 0;  
  padding: 0;
  /* makes sure that width/height includes padding and borders,
   preventing elements from expanding unexpectedly. */
  box-sizing: border-box;
  /* removes underline from links. */
  text-decoration: none;
  /* removes borders (useful for buttons). */
  border: none;
  /* removes focus outline. */
  outline: none;
  /* enables smooth scrolling when using anchors. */
  scroll-behavior: smooth;
  /* sets Poppins as the default font. */
  /* font-family: 'Roboto', sans-serif; */
}

/* 🔹 Général */
.richatt-container {
    font-family: 'Open Sans', sans-serif;
    text-align: center;
    width: 100%;
    height: 100vh;
    margin: 0;
    padding: 20px;
    background: linear-gradient(to bottom, #f9fcff, #ffffff);
}

/* ================================================= */
/* 🎯 Barre de navigation */
.richatt-header {
    max-width: calc(100vw - 100px); /* ✅ Réduit la largeur de 1000px */
    /* margin: 0 auto; ✅ Centre le contenu */
    display: flex;
    align-items: center;
    justify-content: space-between; /* ✅ Aligne les éléments sur la même ligne */
    /* padding: 10px 100px; ✅ Ajuste l'espacement à gauche et droite */
    /* background: white; */
    /* width: 100%; */
    /* gap: 40px; */
    margin-bottom: 50px;
    width: 100vw; /* ✅ Assure que le header prend toute la largeur */
    padding: 1.5vh 5vw; /* ✅ Ajuste l'espacement de manière dynamique */
    
}

/* 📌 Logo */
.richatt-logo img {
    /* width: 290px; ✅ Largeur */
    height: auto; /* ✅ Garde les proportions */
    object-fit: contain; /* ✅ Empêche la déformation */
    display: block; /* ✅ Évite l’espace supplémentaire sous l’image */
    margin: 0;
    padding: 0;
    margin-top: 28px; 
    margin-right: 10px;
    /* margin-left: 20px; */
    width: clamp(280px, 100vw, 180px); /* ✅ Ajustement dynamique sans distorsion */
    height: auto;
}


/* 📌 Navigation */
.richatt-nav {
    display: flex;
    justify-content: center;
    gap: 2vw;
    flex-wrap: nowrap; /* 🔹 Empêche le retour à la ligne */
    /* text-align: center; */
    font-size: clamp(14px, 1.5vw, 18px); /* ✅ Assure une taille dynamique */
    white-space: nowrap; /* ✅ Empêche les retours à la ligne */
    font-weight: bold;
}

/* 📌 Style des liens */
.richatt-nav a:nth-child(-n+9) {
    text-decoration: none;
    color: #007bff;
    font-weight: 700;
    font-size: clamp(1px, 1.7vw, 24px);
    white-space: nowrap;
    line-height: 36px;
    text-align: center;
    margin-top: 30px;
    margin-right: 25px;
}

.tok{
    display: flex;
    /* text-align: center; */
    margin-right: 60px;
}
#mobileLinks {
  margin-right: 25px; /* Ajustez la valeur pour décaler vers la gauche */
}

.richatt-main,
.richatt-header
 {
    max-width: 100vw; /* 🔹 Assure que tout reste bien aligné */
    overflow: hidden; /* 🔹 Évite les décalages au zoom */
    flex-wrap: nowrap; /* 🔹 Empêche les éléments de descendre */
}

/* 📌 Bouton "Get Started" */
.richatt-button {
    font-family: 'Roboto', sans-serif;
    margin-top: 28px; /* Ajustez la valeur pour un meilleur alignement */
    background-color: #0496FF; /* ✅ Couleur exacte */
    color: white;
    width: 190px; /* ✅ Largeur exacte */
    height: 46px; /* ✅ Hauteur exacte */
    text-decoration: none;
    border-radius: 12px; /* ✅ Coins arrondis */
    font-weight: bold;
    /* font-size: 20px; */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    /* margin-left: 50px;  */
    margin-right: 20px;
    margin-bottom: 50px;
    font-size: clamp(14px, 1.5vw, 18px); /* ✅ Ajuste la taille du texte dynamiquement */
}

.richatt-button:hover {
    background: #0056b3;
}





/* ================================================= */
/* 🎯 Section principale */
/* ================================================= */
/* 🎯 Section principale */
/* 🌟 Conteneur principal */
.richatt-main {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 60px 20px;
    margin-top: 20px;
}



/* 🎯 Organisation du tableau */
.richatt-layout {
    width: 100%;
    max-width: 900px;
    margin: auto;
    border-collapse: collapse;
    text-align: center;
}

/* 🔹 Ajout du cercle de fond */
/* .background-circle {
    position: absolute;
    width: 500px;
    height: 500px;
    background: rgba(0, 123, 255, 0.07);
    border-radius: 50%;
    top: -80px;
    left: 50%;
    transform: translateX(-50%);
    z-index: -1;
} */

/* 📌 Taille des icônes */
.icon {
    width: 70px;
    height: auto;
}

/* 📌 Positionnement des icônes */
.icon-left {
    text-align: left;
    padding-left: 3px;
}

.icon-right {
    text-align: right;
    padding-right: 3px;
}

/* 🎯 Correction de la position des icônes */
.icon-earth {
    position: relative;
    top: -10px;
    left: -10px;
}

.icon-paper-plane {
    position: relative;
    top: -10px;
    right: -10px;
}

.icon-fund {
    position: relative;
    bottom: -10px;
    left: -10px;
}

.icon-mobile-banking {
    position: relative;
    bottom: -10px;
    right: -1px;
}


/* 📌 Animation flottante */
/* .floating {
    animation: float 2s ease-in-out infinite;
}

@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(8px); }
    100% { transform: translateY(0px); }
} */


/* 📌 Titre */
.title-cell {
    text-align: center;
}

.richatt-title {
    font-size: 42px;
    font-weight: bold;
    color: #222;
    line-height: 1.3;
}

/* 📌 Description */
.description-cell {
    text-align: center;
    padding: 15px;
}

.richatt-description {
    font-family: 'Open Sans', sans-serif;
    font-size: 24px; /* ✅ Taille conforme */
    font-weight: 400; /* ✅ Poids conforme */
    line-height: 32.68px; /* ✅ Espacement conforme */
    letter-spacing: 0; /* ✅ Aucune modification de l'espacement des lettres */
    color: rgba(0, 0, 0, 0.5); /* ✅ Couleur conforme */
    text-align: center; /* ✅ Alignement conforme */
    inline-size: 860px; /* ✅ width */
    margin: auto; /* ✅ Centrage parfait */
    display: block;
    margin-left: 25px; 
}


/* 📌 Bouton "Join Us" */
.join-cell {
    text-align: center;
    padding: 20px 0;
}

.join-btn {
    background: #007bff;
    font-size: 24px; 
    text-decoration: none;   
    transition: background 0.3s ease-in-out;
    width: 395px; /* ✅ Largeur définie pour ressembler à l'image */
    text-align: center;
    margin-top: 30px;
    background: #007bff;
    color: white;
    padding: 18px 40px;   
    border-radius: 35px;
    font-weight: bold;
    display: inline-block;
}


.join-btn:hover {
    background: #0056b3;
}




/* ================================================= */
/* 🟢 Responsive */
@media (max-width: 480px) {
  /* Ciblez l'élément contenant le texte */
.what-we-do-card {
  word-wrap: break-word;  /* Assure que le texte se brise à la fin de la ligne si nécessaire */
  overflow: hidden;       /* Cache tout texte qui dépasse du conteneur */
  text-overflow: ellipsis; /* Ajoute des points de suspension "..." lorsque le texte dépasse */
  white-space: normal;    /* Permet au texte de s'afficher normalement, pas en une seule ligne */
  padding: 20px;          /* Ajoutez du padding si nécessaire */
}
    .richatt-layout {
        max-width: 100%;
    }

    .background-circle {
        width: 350px;
        height: 350px;
        top: -60px;
    }

    .icon {
        width: 50px;
    }

    .icon-left, .icon-right {
        text-align: center;
        padding: 0;
    }

    .richatt-title {
        font-size: 32px;
    }

    .richatt-description {
        font-size: 16px;
    }
}
























/* Animation flottante */
/* .floating {
    animation: float 2s ease-in-out infinite;
}

@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(10px); }
    100% { transform: translateY(0px); }
} */

/* Bouton Join Us */



/* 🏆 Section partenaires */ 
.richatt-partners {
    display: flex;
    flex-direction: column; /* S'assure que les enfants restent bien en colonne */
    align-items: center;
    width: 100%; /* Prend toute la largeur */
    padding-top: 24px;
    padding-bottom: 24px;
    background: linear-gradient(to bottom, #f6faff, #f6faff); /* 🎨 Dégradé clair */
    border-radius: 10px;
    max-width: 100%;
    text-align: center;
    margin-top: 200px;
}

/* 📌 Titre principal */
.richatt-partners h2 {
    color: #007bff;
    font-size: 48px;
    font-weight: bold;
    margin-bottom: 60px;
}

/* 🏦 Onglets de navigation */
.partner-tabs {
    display: flex;
    justify-content: space-between; /* ✅ Appliqué pour un bon espacement */
    width: 100%; /* ✅ Prend toute la largeur */
    max-width: 1100px; /* ✅ Ajustable selon la mise en page */
    padding-bottom: 40px;
    font-family: 'Roboto' !important;
    margin-top: 25px;
   
}

.tab-button {
    font-size: 32px;
    font-weight: bold;
    color: #BCBCBC;
    background: none;
    border: none;
    cursor: pointer;
    transition: color 0.3s ease-in-out, border-bottom 0.3s ease-in-out;
}

/* 🌟 Onglet actif */
.tab-button.active {
    color: #007bff;
    font-weight: 700;
}

/* ✅ Supprime le rectangle lors du clic sur un onglet */
.tab-button:focus, 
.tab-button:active {
    outline: none !important;
    box-shadow: none !important;
}

/* 💡 Contenu des partenaires */
.partners-content {
    display: flex;
    justify-content: space-between; /* ✅ Garde le même espacement */
    width: 100%;
    max-width: 1100px; /* ✅ Même largeur que .partner-tabs */
    flex-wrap: wrap;
    gap: 60px;
    padding: 15px 0;
}

/* 🎯 Logos des partenaires */
.partners-content img {
    width: 130px; /* Ajuste la taille des images */
    height: 130px;
    border-radius: 50%;
    object-fit: contain;
    background: white; /* Assurer un fond propre */
    padding: 10px;
    position: relative;
    z-index: 2;
}

/* ✅ Ajouter le contour dégradé autour des images */
.partners-content .gradient-border {
    box-sizing: border-box;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 133px; /* ✅ Centrage parfait */
    block-size: 133px;
    border-radius: 50%;
    background: linear-gradient(to bottom, 
        #FFCE88 10%,   /* 🔶 Jaune en haut */
        #5ADBFF 30%,  /* 🔹 Bleu clair au centre */
        #0496FF 100%  /* 🔵 Bleu foncé en bas */
    );
    padding: 0.5px; 
}

/* Placer l'image à l'intérieur du cercle */
.partners-content .gradient-border img {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    object-fit: contain;
    background: linear-gradient(to bottom, #f6faff, #f6faff); /* 🎨 Dégradé clair */
    padding: 10px;
}











/* Effet actif sur le logo de la section sélectionnée */
.tab-button.active + .partners-content img {
    border-color: #007bff; /* 🔵 Bordure bleue sur l’onglet actif */
}

/* 🌟 Effet au survol */
/* .partners-content img:hover {
    transform: scale(1.1);
    box-shadow: 0px 6px 14px rgba(0, 0, 0, 0.15);
} */

/* 🌟 Responsive Design */
@media (max-width: 1024px) {
    .partner-tabs {
        gap: 20px;
        font-size: 16px;
    }
    .partners-content img {
        width: 90px;
        height: 90px;
    }
}

@media (max-width: 480px) {
    .richatt-header {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }
    .partner-tabs {
        flex-wrap: wrap;
    }
    .partners-content {
        gap: 15px;
    }
}




/* =================================================================
/* 🌟 Icône décorative remplaçant la ligne */
/* 🌟 Icône décorative plus grande */
/* 🌟 Icône décorative agrandie */
.decorative-icon { 
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto; /* ✅ Supprime complètement l'espacement */
    padding: 0; /* ✅ Assure qu'il n'y a aucun padding */
}

/* 🎨 Ajustement de la taille et couleur du SVG */
.decorative-icon svg {
    fill: #007bff; /* Couleur primaire */
    inline-size: 200px; /* Taille du SVG */
    block-size: 100px;
    margin: 0; /* ✅ Supprime l'espace autour du SVG */
    padding: 0; /* ✅ Supprime tout padding interne */
}

/* 🌟 Conteneur principal */
.what-we-do-text {
    font-family: 'Open Sans', sans-serif;
    font-size: 22px; /* Taille du texte */
    font-weight: 500;
    line-height: 1.6;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px; /* Espacement entre les éléments */
    max-width: 800px;
    margin: auto;
    position: relative;
    white-space: pre-line; /*il remplace la balise br car je desactive toutes les balises <br>*/
}

/* ✨ Guillemets */
.quote-icon {
    display: inline-block;
    width: 42px;
    height: 37px;
    position: absolute;
}

/* 📌 Déplacement du guillemet ouvrant uniquement */
.quote-left {
    position: absolute;
    left: -30px; /* Déplace plus à gauche */
    top: -5px; /* Monte plus haut */
    transform: translateY(-10px); /* Ajustement fin */
    width: 43px; /* Ajuste la largeur (modifie cette valeur si nécessaire) */
    height: 31px;
}

/* 🎯 Guillemets fermants (inchangé) */
/* 📌 Correction du guillemet fermant */
.quote-right {
    position: absolute;
    right: -30px; /* Éloigne légèrement vers la droite */
    bottom: 30px; /* Remonte un peu pour éviter le chevauchement */
    transform: translateY(0px); /* Annule l'ancien ajustement */
    width: 43px; /* Ajuste la largeur (modifie cette valeur si nécessaire) */
    height: 31px; /* Ajuste la hauteur (modifie cette valeur si nécessaire) */
}


/* 📝 Texte */
.quote-text {
    max-width: 650px;
    color: #1a1a1a;
    font-family: "Arial", sans-serif;
}






/* 🌟 Section What We Do */
.what-we-do {
    margin-top: 116px;
    padding: 60px 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    white-space: nowrap; /* ✅ Empêche le texte de passer à la ligne */
}

.what-we-do h2 {
    font-family: 'Roboto', sans-serif;
    font-size: 48px;
    font-weight: 700;
    line-height: 56.25px;
    text-align: center;
    color: rgba(4, 150, 255, 1);
  
    white-space: nowrap; /* ✅ Forcer le texte sur une seule ligne */
}

/* .what-we-do .decorative-line {
    width: 100px;
    height: 4px;
    background: linear-gradient(to right, #0496FF, #FFCE88);
    border-radius: 2px;
    margin-top: 5px;
} */


/* 📌 Grille de cartes */
/* 🌟 Grille des cartes */
.what-we-do-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);/* 3 colonnes par ligne */
    gap: 72px;/* Espacement entre les cartes */
    justify-content: center;
    max-inline-size: 1100px;
    margin: auto;
    margin-top: 102px; /* ✅ Ajuste cet espace selon ton besoin */

}

.what-we-do-card:nth-child(7) {
    grid-column: 2; /* Centre la dernière carte sous la colonne 2 */
}


/* 📝 Carte individuelle */
/* 📝 Carte individuelle */
.what-we-do-card {
    inline-size: 300px; /* ✅ Largeur ajustée */
    block-size: 347px; /* ✅ Hauteur ajustée */
    padding: 12px; /* ✅ Espacement interne ajusté */
    border-radius: 16px; /* ✅ Coins arrondis */
    background: white; /* ✅ Fond blanc */
    box-shadow: 3px 4px 4px rgba(0, 0, 0, 0.25); /* ✅ Ombre */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 24px;
  }

/* 🌟 Effet au survol */
/* .what-we-do-card:hover {
    transform: translateY(-3px);
    box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.2);
} */

/* 📌 Icônes */
/* .what-we-do-icon {
    margin-bottom: 15px;
} */



/* 📱 Responsive */
@media (max-width: 1024px) {
    .what-we-do-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}



/* 📌 Icônes des cartes */
/* .what-we-do-icon {
    margin-bottom: 15px;
} */

.what-we-do-icon svg {
    width: 45px; /* ✅ Taille ajustée */
    height: auto;
    fill: #007bff;
}

/* 📌 Titre des cartes */
.what-we-do-card h3 {
    color: black;
    font-size: 24px; /* ✅ Taille ajustée */
    font-weight: bold;
    /* margin-bottom: 10px; */
}

/* 📜 Texte des cartes */
.what-we-do-card p {
    font-size: 18px;
    color: #757575;
    font-weight: 500;
    line-height: 1.6;
    white-space: pre-line;
}

/* 🔗 Bouton Read More */
.what-we-do-card a {
    display: inline-flex;
    align-items: center;
    font-weight: bold;
    font-size: 18px;
    text-decoration: none;
    color: #007bff;
    /* margin-top: 15px; */
}

/* 📌 Icône de flèche */
.what-we-do-card a::after {
    content: "↗"; /* ✅ Icône correcte */
    font-size: 15px;
    margin-left: 5px;
    transition: transform 0.2s ease-in-out;
}

/* 📌 Effet au survol */
.what-we-do-card a:hover::after {
    transform: translateX(3px);
}

/* 📱 Responsive */
@media (max-width: 1024px) {
    .what-we-do-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .what-we-do-grid {
        grid-template-columns: 1fr;
    }
}



/*partie les cars pour who use Richatt Pay*`


/* ��� Section Who Use Richatt Pay */
/* 🌟 Section globale avec fond dégradé */
/* 🌟 Conteneur principal */
.who-uses-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(to bottom, rgba(238, 245, 255, 0.6) 8%, rgba(249, 252, 255, 0.9) 25%);

    padding: 40px;
    border-radius: 15px;
    max-width: 100vw; /* 🔹 Utilisation de toute la largeur de l'écran */
    width: 100%; /* 🔹 S'étend à 100% du conteneur parent */
    margin: auto;
    margin-top: 132px;
}
/* 🔹 Style pour le footer sans impacter la section principale */

/* 📌 Zone de texte */
.text-content {
    flex: 0 0 40%;
    text-align: left;
    margin-right: 16px;
}
.text-content p{
    font-size: 18px;
    line-height: 1.6;
    margin-top: 16px;
    color: #757575;
}
.text-span {
 
    font-size: 40px;
    font-weight: bold;
    color: black;
    
}




/* 📌 Flèches pour le défilement */
.carousel-buttons {
    display: flex;
    gap: 10px;
    margin-top: 24px;
}

/* 📌 Style des boutons de navigation */
.carousel-btn {
    background: #D9E1E7; /* Gris clair avec transparence */
    color: white;
    border: none;
    font-size: 20px;
    cursor: pointer;
    border-radius: 50%; /* Boutons ronds */
    width: 50px; /* Taille ajustée */
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
    transition: background 0.3s ease-in-out, transform 0.2s ease;
    
}

/* 📌 Effet au survol */
.carousel-btn:hover {
    background: rgba(200, 210, 220, 1); /* Légèrement plus foncé */
    transform: scale(1.1); /* Légère augmentation */
}


/* 📌 Carrousel */
.carousel-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    padding-left: 20px;
}

.carousel-container {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 24px;
    padding: 20px;
    width: 100%;
    max-inline-size: 800px;
    scroll-behavior: smooth;
}

/* 📌 Style du titre dans les cartes */
.carousel-card h3 {
    font-family: "Roboto", sans-serif;
    font-size: 24px; /* Taille exacte */
    font-weight: 600; /* Texte en semi-gras */
    line-height: 28.13px; /* Hauteur de ligne ajustée */
    text-align: center; /* Centrer le texte */
    color: black;
    inline-size: 274px; /* Largeur max */
    margin: 0 auto 10px auto; /* Centrage horizontal */
    initial-letter: 0;
}




/* 📌 Appliquer le dégradé sur "RichattPay" */
/* 📌 Style du titre principal */
/* 📌 Style du titre principal */
h1 {
    font-family: "Roboto", sans-serif;
    font-size: 52px; /* 🔹 Augmenté légèrement */
    font-weight: 600;
    line-height: 100px; /* 🔹 Ajusté pour un meilleur espacement */
    color: black;
    
}

/* 📌 Appliquer le dégradé vertical sur "RichattPay ?" */
/* 📌 Appliquer le dégradé correct sur "RichattPay ?" */
.highlight {
    
    background: linear-gradient(to bottom, 
        #FFCE88 30%,   /* 🔶 Jaune en haut */
        #5ADBFF 50%,  /* 🔹 Bleu clair au centre */
        #0496FF 100%  /* 🔵 Bleu foncé en bas */
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}











/* 📌 Cards */
/* 📌 Cards */
.carousel-card {
    flex: 0 0 280px;
    scroll-snap-align: start;
    background: white;
    padding: 16px;
    text-align: start;
    position: relative;
    border-radius: 12px 0px 12px 12px; /* 🎯 Coins arrondis en haut gauche, bas gauche, bas droite */
    border: none; /* Supprime toute bordure standard */
    
       
    /* Permet d'aligner le contenu uniformément */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Pousse le bouton vers le bas */
}

* 📌 Contenu de la carte */
.carousel-card p {
    flex-grow: 1; /* Remplit l'espace vide pour que le bouton reste en bas */
}

/* 📌 Bouton */
.cta-btn {
    display: block;
    background: #0496FF;
    color: white;
    text-align: center;
    padding: 10px;
    border-radius: 12px;
    font-weight: bold;
    text-decoration: none;
    transition: background 0.3s ease-in-out;
}
/* 📌 Bordure en dégradé équilibré (Bleu en haut/droite, Jaune en bas/gauche) */
.carousel-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 12px 0px 12px 12px;
    padding: 0.5px;
    background: linear-gradient(145deg, 
        rgba(4, 150, 255, 1) 0%,    /* Bleu vif en haut */
        rgba(4, 150, 255, 0.9) 25%,  /* Bleu atténué progressivement */
        rgba(255, 204, 0, 0.8) 70%,  /* Jaune qui commence en douceur */
        rgba(255, 204, 0, 1) 100%   /* Jaune bien visible en bas */
    ); 
    -webkit-mask: linear-gradient(white 0 0) content-box, linear-gradient(white 0 0);
    mask: linear-gradient(white 0 0) content-box, linear-gradient(white 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
    pointer-events: none;
}




/* 📌 Texte */
.carousel-card h3 {
    font-size: 24px;
    font-weight: bold;
    color: black;
    margin-bottom: 10px;
}

.carousel-card p {
    /* font-family: 'Roboto'; */
    font-size: 18px;
    color: #666;
    /* line-height: 1.5; */
    /* margin-bottom: 20px; */
    text-align: justify;
}

/* 📌 Bouton CTA */
.cta-btn {
    display: block;
    background: #007bff;
    color: white;
    text-align: center;
    padding: 10px;
    border-radius: 5px;
    font-weight: bold;
    margin-top: 15px;
    text-decoration: none;
    transition: background 0.3s ease-in-out;
}

.cta-btn:hover {
    background: #0056b3;
}

/* 📌 Masquer la scrollbar */
.carousel-container::-webkit-scrollbar {
    display: none;
}

/* 📱 Responsive Design */
@media (max-width: 1024px) {
    .who-uses-section {
        flex-direction: column;
        text-align: center;
    }
    
    .text-content {
        flex: none;
        width: 100%;
        text-align: center;
    }

    .carousel-wrapper {
        padding-left: 0;
        width: 100%;
    }
}

/* 📌 Texte en bas */
/* 📌 Style du texte en bas */
.bottom-text {
    
    display: inline-block;
    background: linear-gradient(to bottom, rgba(238, 245, 255, 0.6) 8%, rgba(249, 252, 255, 0.9) 25%);; /* Aucun fond */
    color: #0496FF; /* 🔹 Couleur du texte */
    font-size: 20px;
    font-weight: 400; /* Texte normal sauf "Contact us" */
    padding: 10px;
    border-radius: 12px; /* 🔹 Coins arrondis */
    text-align: center;
    block-size: 46px; /* 🔹 Hauteur exacte */
    background: inherit; /* ✅ Hérite du même fond que son parent */
    
    
}

/* 📌 Style du lien "Contact us" en gras */
.bottom-text a {
    font-weight: 700; /* 🔹 Met en gras "Contact us" */
    color: #0496FF;
    text-decoration: none;
    text-decoration: underline;
}

/* 📌 Effet au survol */
.bottom-text a:hover {
    text-decoration: underline;
}



/* 📌 Section de la newsletter */
.newsletter-section {
    text-align: center;
    margin: 50px auto;
    max-width: 800px; /* 🔹 Augmenté pour s’adapter */
    margin-top: 132px;
}

.newsletter-section h2 {
    font-size: 40px; 
    font-weight: 600;
    color: black;
    margin-bottom: 25px;
    line-height: 1.5; /* Augmente la hauteur de ligne */
}

/* 📌 Conteneur du formulaire */
.newsletter-form {
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border-radius: 30px; /* 🔹 Augmenté pour un effet plus doux */
    overflow: hidden;
    border: 1px solid #ddd;
    max-width: 610px; /* 🔹 Augmenté pour s’adapter */
    margin: auto;
    margin-top: 56px;
}

/* 📌 Champ d'email */
.newsletter-form input {
    flex: 1;
    border: none;
    padding: 15px 20px; /* 🔹 Augmenté pour plus de confort */
    font-size: 18px; /* 🔹 Augmenté de 16px à 18px */
    outline: none;
}

/* 📌 Bouton "Submit" */
.newsletter-form button {
    background: #0496FF;
    color: white;
    border: none;
    padding: 15px 25px; /* 🔹 Plus grand pour correspondre au design */
    font-size: 18px; /* 🔹 Augmenté pour correspondre */
    font-weight: 600;
    width: 184px;
    cursor: pointer;
    border-radius: 0 30px 30px 0; /* 🔹 Arrondi augmenté */
    transition: background 0.3s ease-in-out;
}

/* 📌 Effet au survol */
.newsletter-form button:hover {
    background: #0378D8;
}
/*footre

/* 🌟 Footer principal */
.footer {
    background: linear-gradient(to bottom, #eef5ff, #f9fcff);
    padding: 50px 50px;
    font-family: Arial, sans-serif;
    width: 100vw !important; /* ✅ Force la largeur totale de l'écran */
     max-width: 100vw; /* ✅ Empêche toute restriction */
    margin-top: 132px;
}

/* 🌟 Structure du tableau */
.footer-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    /* vertical-align: top; */
    margin-bottom: 50px;
}

/* 📌 Colonne Gauche : Logo + Texte */
.footer-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    max-width: fit-content;
}

/* 📌 Optimisation du logo */
.footer-logo {
    width: 337.2px; /* Ajustement de la taille du logo */
    height: 55.2;
    display: block;
    object-fit: contain;
}

/* ✅ Texte sous le logo */
.footer-left p {
    font-size: 20px;
    color: #333;
    margin-bottom: 10px;
}

/* 📌 Section des icônes sociales */
.social-icons {
    display: flex;
    gap: 16px;
    margin-top: 5px;
}

.social-icons a svg {
    width: 20px;
    height: 20px;
    fill: #0496FF;
    transition: transform 0.3s ease-in-out, fill 0.3s ease-in-out;
}

.social-icons a:hover svg {
    transform: scale(1.1);
    fill: #0378D8;
}

/* 📌 Colonne Droite : Quick Links */
.footer-right {
    width: 45%;
    vertical-align: top;
    text-align: left;
    padding-left: 50px;
    margin-left: auto; /* ✅ Pousse l'élément vers la droite */
}

/* ✅ Quick Links parfaitement aligné avec le logo */
.quick-links-title {
    font-family: 'Roboto', sans-serif;
    font-size: 32px;
    font-weight: bold;
    /* margin-bottom: 10px; */
    color: rgba(15, 23, 42, 1);
    margin-bottom: 5px;
}

/* 📌 Liste des liens */
.footer-right ul {
    list-style: none;
    padding: 10px;
}

.footer-right ul li {
    margin-bottom: 10px;
}

.footer-right ul li a {
    font-family: 'Roboto', sans-serif;
    text-decoration: none;
    color:rgba(15, 23, 42, 1);
    font-size: 20px;
    transition: color 0.3s ease-in-out;
    inline-size: 79px;
    block-size: 24px;
    inset-block-start: 81px;
    inset-inline-start: 945px;

}

.footer-right ul li a:hover {
    color: #0496FF;
}

/* 📌 Bas du footer */
.footer-bottom {
    display: flex;
    /* justify-content: space-between; ✅ Espacement uniforme */
    /* align-items: center; */
    font-size: 20px;
    border-top: 1px solid #ddd;
    padding: 15px;
    width: 100%;
    /* text-align: center; */
    /* margin-right: 50px; */
   /* margin-right: 20px; */

}

/* ✅ Rendre chaque élément égal en largeur */
/* .footer-bottom p,
.footer-links {
    flex: 1;
    /* text-align: center; */
    /* margin: 0; */
/* } */

/* ✅ Conteneur des liens avec espacement équilibré */ 
.footer-links {
    
    display: flex;
    justify-content: space-around; /* ✅ Répartition parfaite */
    flex: 2; /* ✅ Permet d'occuper un peu plus de place */
}

/* ✅ Style des liens */
.footer-links a {
    text-decoration: none;
    color: rgba(15, 23, 42, 1);
    font-size: 20px;
    transition: color 0.3s ease-in-out;
    text-align: center;
    flex: 1; /* ✅ Chaque lien prend une place égale */
}

.footer-links a:hover {
    color: #0496FF;
}


/* 📌 Responsive pour mobile
@media (max-width: 480px) {
    .footer-top {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .footer-right {
        margin-top: 20px;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 10px;
    }

    .footer-links {
        flex-direction: column;
        gap: 8px;
    }
} */


.footer-links a:focus, 
.footer-links a:active {
    outline: none !important; /* ✅ Supprime la bordure bleue */
    box-shadow: none !important; /* ✅ Supprime toute ombre */
}
a:focus, a:active {
    outline: none !important;  /* ✅ Supprime la bordure bleue */
    box-shadow: none !important;  /* ✅ Supprime toute ombre */
}






  
    



  

  



 
  




/* 480px------------------->>>>480px------------------->>>>480px------------------->>>>480px------------------->>>>480px------------------->>>>480px------------------->>>>480px------------------->>>> */
@media (max-width: 480px) {
    .partner-tabs {
        gap: 15px;
        font-size: 14px;
    }
    .partners-content img {
        width: 75px;
        height: 75px;
    }
}
/* forms newsletter */
@media (max-width: 480px) {
    .newsletter-form button {
        padding: 0 15px !important;     /* Réduit le padding sur très petits écrans */
        font-size: 14px !important;     /* Taille de police réduite */
    }
}
/* 📱 Responsive : Réduction de l'espacement sur très petits écrans */
@media (max-width: 480px) {
    .footer {
        /* padding: 20px 5%; */
    }

    .footer-right h3 {
        font-size: 18px;
    }

    .footer-right ul li a {
        font-size: 16px;
    }
  .footer-copyright ,.footer-links a ,.footer-left p{
    font-size: 14px;
    
  }
  
  
    .footer-logo {
        width: 150px;
    }

    .footer-bottom {
        padding-block-start: 5px;
    }
    .footer-right {
        padding-inline-start: 15px !important; /* Réduction du padding */
    }
}




@media (max-width: 480px) {
  
  .footer-links {
      
      justify-content: center;
      gap: 15px 20px; /* 15px vertical, 30px horizontal */
  }
  .footer-copyright {
    margin-right: 0; /* Réinitialise la marge en mobile */
    align-self: flex-start; /* Aligne à gauche en colonne */
}

}







  /* 480px------------------>>>>480px------------------>>>>480px------------------>>>>480px------------------>>>>480px------------------>>>>480px------------------>>>>480px------------------>>>> /
  /* styles pour les cards */
  @media (max-width: 480px) {
    .what-we-do-grid {
        display: flex;
        flex-direction: column;
        gap: 40px;
        margin-top: 50px;
      }
      
      .what-we-do-card {
        width: 100%;
        max-width: 350px;
        height: auto;
        min-height: 300px;
        padding: 20px;
      }
      /* ahmed */
@media (max-width: 480px) {
    .footer-right {
        text-align: left !important;
        align-items: flex-start !important;
        padding-left: 20px !important; /* Conserve un padding cohérent */
        justify-content: flex-end !important;
        /* margin-left: auto !important; */
        /* padding-right: 50px !important; */
        transform: translateX(20px) !important; /* Ajustement fin */
    }

    .footer-right ul {
        text-align: left !important;
        align-items: flex-start !important;
        margin-left: 0 !important;
        padding-left: 0 !important;
    }

    .footer-right ul li {
        justify-content: flex-start !important;
        text-align: left !important;
    }
    .newsletter-section h2 {
        font-size: 24px; 
        font-weight: 600;
       
        margin-bottom: 25px;
        line-height: 1.5; /* Augmente la hauteur de ligne */
    }
    .what-we-do h2 {
        font-size: 30px !important;
        
    }
    
    .decorative-icon svg {
        width: 140px !important;
        height: 70px !important;
    }
    
    .what-we-do-text {
        font-size: 18px !important;
        line-height: 1.5 !important;
    }
   
    
    .quote-icon {
        width: 30px !important;
        height: 26px !important;
    }
    
    .quote-left {
        left: -15px !important;
    }
    
    .quote-right {
        right: -15px !important;
    }
}

      
} 
@media (max-width: 480px)  {
  .richatt-header {
    flex-direction: column;
    gap: 15px;
  }
  .tok {
    flex-direction: column;
    margin-right: 0;
  }
  .richatt-nav {
    gap: 10px;
  }

  /* 📌 Flèches pour le défilement */
.carousel-buttons {
  display: flex;
  justify-content: center; /* Centre les boutons horizontalement */
  align-items: center; /* Centre les boutons verticalement */
  gap: 10px;
  margin-top: 24px;
}


}
  
  @media (max-width: 480px) {
    .who-uses-section {
      flex-direction: column;
    }
    .text-content {
      /* margin-bottom: 20px; */
      margin-top: 20px;
    }
  }
   /* section les icones  */
   @media (max-width: 480px) {
    .richatt-main {
      padding: 30px 15px;
      height: auto;
    }
  
    .richatt-layout {
      display: flex;
      flex-direction: column;
    }
  
    .richatt-title {
      font-size: 28px;
      line-height: 1.3;
      padding: 0 15px;
    }
  
    .richatt-description {
      font-size: 16px;
      inline-size: 100%;
      margin-left: 0;
    }
  
    .join-btn {
      width: 100%;
      max-width: 300px;
      padding: 12px;
      font-size: 18px;
    }
  
    .icon {
      width: 50px;
      margin: 15px 0;
    }
  }
  @media (max-width: 480px) {
    
    /* dernier */
    .richatt-partners,.what-we-do{
        margin-top: 60px;
    }
    .partner-tabs {
        display: flex;
        flex-direction: row;  /* Change de column à row pour les aligner horizontalement */
        align-items: center;
        justify-content: center;
        gap: 28px;  /* Espace entre les éléments */
        margin-top: 15px;
    }
    
    .partner-tabs .tab-button {
        width: auto;  /* Ajuste la largeur en fonction du contenu */
        max-width: 300px;
        text-align: center;
        font-size: 18px;
        padding: 10px 0;
    }
    
}
 /* les logos wallets.... */
 @media (max-width: 480px) {
  .partners-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px; /* Ajuster l'espacement entre les cercles */
    align-items: center; /* Pour s'assurer que les cercles sont bien alignés verticalement */
  }

  /* Optimisation des cercles */
  .partners-content img {
    width: 80px;  /* Taille uniforme pour les cercles */
    height: 80px; /* S'assurer que la hauteur est identique à la largeur */
    border-radius: 50%; /* Garder la forme circulaire */
    object-fit: contain; /* Adapter l'image sans la déformer */
  }

  
}
@media (min-width: 480px) and (max-width: 534px) {
  .partners-content {
    /* display: flex; */
    /* flex-wrap: wrap; */
    justify-content: center;
    gap: 10px !important; /* Ajuster l'espacement entre les cercles */
    align-items: center; /* Pour s'assurer que les cercles sont bien alignés verticalement */
  }

  /* Optimisation des cercles */
  .partners-content img {
  
    border-radius: 50%; /* Garder la forme circulaire */
    object-fit: contain; /* Adapter l'image sans la déformer */
  }
}


  @media (max-width: 480px) {
    /* khouna */
    /* ✅ Ajuste la largeur et évite les débordements */
    .richatt-container, 
    .richatt-main, 
    .who-uses-section, 
    .footer {
        width: 100%;
        max-width: 100vw;
        overflow-x: hidden;
        padding: 0 2%;
    }

    /* ✅ Assurer que la navbar est bien centrée et alignée */
    .richatt-header {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        /* padding: 30px 20px; */
        gap: 30px;
      }
    
      .richatt-logo img {
        width: 180px;
        max-width: 100%;
        height: auto;
      }
    
      .richatt-nav {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0px;
        width: 100%;
      }
    
      .richatt-nav a:nth-child(-n+9) {
        font-size: 18px;
        font-weight: bold;
        text-align: center;
        color: #007bff;
        text-decoration: none;
        
      }
    
      .richatt-button {
        margin-top: 40px;
        width: 90%;
        max-width: 300px;
        padding: 15px;
        text-align: center;
        font-size: 18px;
        font-weight: bold;
        background-color: #009aff;
        color: white;
        border-radius: 12px;
      }
    /* ✅ Correction de la grille des cartes */
    .carousel-card, .what-we-do-card {
        flex: 0 0 90%;
        margin: 15px auto;
        text-align: center;
        max-width: 320px;
    }

    /* ✅ Assurer que le texte est bien centré */
    .richatt-title {
        font-size: 28px;
        text-align: center;
        line-height: 1.3;
    }

    .richatt-description {
        font-size: 16px;
        line-height: 1.5;
        text-align: center;
    }

    /* ✅ Footer bien centré et aligné */
    .footer {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 30px 5%;
    }

    .footer-left, .footer-right {
        width: 100%;
        text-align: center;
    }

    .footer-right ul {
        padding: 0;
    }

    .footer-right ul li {
        margin-bottom: 6px;
    }

    /* ✅ Formulaire Newsletter en colonne */
    .newsletter-form {
        flex-direction: row !important;  /* Garde les éléments sur la même ligne */
        align-items: stretch !important; /* Étire les éléments à la même hauteur */
      }
      
      .newsletter-form input {
        flex: 1; /* Prend tout l'espace disponible */
        border-radius: 30px 0 0 30px !important; /* Arrondi à gauche seulement */
        margin-right: -1px !important;  /* Superposition parfaite */
        text-align: center; /* Centrer le texte du placeholder */
        padding-left: 10px; /* Un petit padding pour un effet plus joli */
        width: calc(100% - 80px); /* Réduit l'espace de l'input pour permettre au bouton de bien s'afficher */
      }
      
      .newsletter-form button {
        width: 80px !important; /* Réduit la largeur du bouton */
        padding: 0 25px !important; /* Padding horizontal */
        border-radius: 0 30px 30px 0 !important; /* Arrondi à droite seulement */
        margin: 0 !important;
        text-align: center; /* Centrer le texte dans le bouton */
        display: inline-flex; /* Utilisation de flex pour centrer à l'intérieur du bouton */
        justify-content: center;
        align-items: center;
        font-size: 16px; /* Ajuste la taille du texte si nécessaire */
      }
      .newsletter-form input::placeholder {
        font-size: 14px; /* Réduit la taille du texte du placeholder */
        text-align: left; /* Aligne le placeholder à gauche */
      }      

    /* ✅ Ajustement des sections */
    .who-uses-section {
        flex-direction: column;
        text-align: center;
    }

    .text-content {
        flex: none;
        width: 100%;
        text-align: center;
    }

    /* ✅ Assurer que le slider fonctionne bien sur mobile */
    .carousel-wrapper {
        padding-left: 0;
        width: 100%;
    }

    /* ✅ Supprimer le débordement horizontal */
    html, body {
        overflow-x: hidden;
    }
}



/* 992px------------------------------------------>> 992px------------------------------------------>> 992px------------------------------------------>> 992px------------------------------------------>> */
/* code:k9sUR#qog(nz3bZaZi */
@media (min-width: 481px) and (max-width: 630px) {



    .richatt-partners,.what-we-do{
        margin-top: 60px;
    }

    .text-span,.highlight{
        font-size:36px;
    }
    .footer-right {
        text-align: left !important;
        align-items: flex-start !important;
        padding-left: 20px !important; /* Conserve un padding cohérent */
        justify-content: flex-end !important;
        margin-left: auto !important;
        padding-right: 50px !important;
        transform: translateX(30px) !important; /* Ajustement fin */
    }

    .footer-right ul {
        text-align: left !important;
        align-items: flex-start !important;
        margin-left: 0 !important;
        padding-left: 0 !important;
    }

    .footer-right ul li {
        justify-content: flex-start !important;
        text-align: left !important;
    }
    .quick-links-title{
        font-size: 18px;
    }
    .footer-logo{
        width: 100%;
    }
    .footer-right ul li a,.footer-links a,.footer-copyright{
        font-size: 15px;
    }
  /* ✅ Mettre le texte sur une seule ligne */
.footer-left p {
    white-space: nowrap;
    font-size: 15px;
  }
  
  /* ✅ Marge automatique à gauche pour pousser vers la droite */
  .footer-right {
    margin-left: auto;
    text-align: right;
  }
  
  /* ✅ Réorganisation propre du bas de page */
  .footer-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px;
    font-size: 15px;
    padding-top: 20px;
    text-align: center;
  }
  
  .footer-bottom div {
    flex: 1 1 200px;
  }
  
   
    /* Section principale Richatt */
    .richatt-main {
      padding: 30px 20px;
      height: auto;
    }
  
    .richatt-layout {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
    }
  
    .richatt-title {
      font-size: 32px;
      line-height: 1.4;
      padding: 0 15px;
    }
  
    .richatt-description {
      font-size: 18px;
      line-height: 1.6;
      inline-size: 100%;
      text-align: center;
      margin: 0 auto;
    }
  
    .join-btn {
      width: 100%;
      max-width: 350px;
      padding: 14px;
      font-size: 18px;
      margin-top: 20px;
    }
  
    .icon {
      width: 60px;
      height: auto;
      margin: 15px 0;
    }
  
    .icon-left,
    .icon-right {
      display: block;
      text-align: center;
    }
  
    /* ✅ Logos partenaires : 3 par ligne */
    .partners-content {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 40px;
    }
  
    .partners-content img {
      width: 90px;
      height: 90px;
      /* flex: 0 0 calc(88.33% - 90px); */
    }
    /*  */
    .decorative-icon svg {
        
        inline-size: 160px; /* Taille du SVG */
        /* block-size: 100px; */
    
    }
    .richatt-partners h2,.what-we-do h2{
        font-size: 36px;
    }
  .tab-button{
    font-size: 20px;
  }
    /* ✅ Cartes what-we-do : 1 par ligne */
    .what-we-do-grid {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 30px;
      margin-top: 50px;
    }
  
    .what-we-do-card {
      width: 100%;
      max-width: 300px;
      min-height: 300px;
      /* padding: 20px; */
      box-sizing: border-box;
    }
  
    /* Footer ajustement */
    .footer {
      padding: 30px 5%;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
    }
  
    .footer-left,
    .footer-right {
      width: 100%;
      text-align: center;
    }
  
    .footer-right ul {
      padding: 0;
    }
  
    .footer-right ul li {
      margin-bottom: 6px;
    }
  
    /* Newsletter */
    .newsletter-section h2 {
      font-size: 26px;
      font-weight: 600;
      line-height: 1.4;
      text-align: center;
      margin-bottom: 25px;
    }
  
    .newsletter-form {
      display: flex;
      justify-content: center;
      align-items: stretch;
      flex-direction: row;
      flex-wrap: wrap;
      max-width: 100%;
    }
  
    .newsletter-form input {
      flex: 1;
      min-width: 200px;
      border-radius: 30px 0 0 30px !important;
      margin-right: -1px !important;
    }
  
    .newsletter-form button {
      width: auto !important;
      padding: 0 25px !important;
      border-radius: 0 30px 30px 0 !important;
      margin: 0 !important;
    }
  
    html, body {
      overflow-x: hidden;
    }
  }
  




  @media (max-width: 300px) {
    .newsletter-form {
      flex-direction: row !important;
      align-items: stretch !important;
      width: 100%;
      /* padding: 0 10px; */
      box-sizing: border-box;
    }
  
    .newsletter-form input {
      flex: 1;
      min-width: 0;
      border-radius: 0 30px 30px 0 !important;
      /* margin-right: -1px !important; */
    }
  
    .newsletter-form button {
      width: auto !important;
      min-width: 80px;
      /* padding: 0 18px !important; */
      font-size: 13px;
      /* border-radius: 0 30px 30px 0 !important; ✅ plus petit arrondi à droite */
      margin: 0 !important;
      white-space: nowrap;
    }
    .newsletter-form input::placeholder {
        font-size: 13px; /* ou 13px selon ton goût */
       
      }

      /* footer */
      .footer {
        flex-direction: column;
        align-items: center;
        padding: 20px 5%;
        text-align: center;
      }
    
      .footer-left,
      .footer-right {
        width: 100%;
        text-align: center !important;
        padding: 0 !important;
        margin: 0 auto !important;
        transform: none !important;
        align-items: center !important;
        justify-content: center !important;
      }
    
      .footer-left p {
        white-space: normal;
        font-size: 14px;
      }
    
      .footer-logo {
        width: 150px;
        margin-bottom: 10px;
      }
    
      .quick-links-title {
        font-size: 16px;
        margin-top: 15px;
      }
    
      .footer-right ul {
        display: flex;
        flex-direction: column;
        align-items: center !important;
        margin: 0;
        padding: 0;
      }
    
      .footer-right ul li {
        margin-bottom: 8px;
        font-size: 14px;
      }
    
      .footer-right ul li a,
      .footer-links a {
        font-size: 14px;
      }
    
      .footer-bottom {
        flex-direction: column;
        gap: 8px;
        padding-top: 15px;
        font-size: 13px;
      }
    
      .footer-bottom div {
        flex: none;
        width: 100%;
      }
     .quick-links-title{
        font-size: 12px;

      }
      .footer-copyright{
        font-size: 14px;
      }
      
      .partner-tabs {
        flex-direction: column; /* Afficher les boutons verticalement */
        align-items: center; /* Centrer les éléments */
        gap: 10px; /* Espacement entre les boutons */
    }

    .tab-button {
        width: 100%; /* Les boutons vont s'étendre pour prendre toute la largeur */
    }
  }
  
































  /* css menu */

/* ✅ Cacher le bouton mobile en desktop et inversement */
/* ✅ Cacher le bouton en desktop */
.mobile-menu-btn {
    display: none;
    font-size: 26px;
    background: none;
    border: none;
    cursor: pointer;
  }
.mobile-only {
    display: none;
  }
  .desktop-only {
    display: inline-block;
  }
  .richatt-links{
    text-decoration: none;
    color: #007bff;
    font-weight: 700;
    font-size: clamp(1px, 1.7vw, 24px);
    white-space: nowrap;
    line-height: 36px;
    text-align: center;
    margin-top: 34px;
    /* margin-right: 10px; */
  }

  
  /* ✅ Cacher le bouton normal et afficher le menu mobile en mobile */
 
    
  
  

  /* >480px menu */


  
/*  <480px */



@media (max-width: 480px) {
    
    .richatt-partners h2,.what-we-do h2{
        font-size: 30px;
    }
    .desktop-only {
      display: none;
    }
  
    .mobile-only {
      display: block;
      text-align: center;
      margin: 15px; /* Réduit l'espace autour du bouton */
      border-radius: 10px;
      font-weight: bold;
    }
    
    .richatt-button {
      background-color: #009aff;
      color: white !important;
      font-size: 16px !important;  /* Réduction de la taille de la police */
      padding: 6px 15px;          /* Ajuste le padding pour rendre le bouton plus petit */
      margin-bottom: 10px;
      border-radius: 10px; /* Assure que le bouton garde les coins arrondis */
      width: 50%; /* Réduit la largeur du bouton à sa taille de contenu */
    }
    
      
    .richatt-links {
        position: relative; /* ✅ pour le garder visible au scroll */
        top: 40px;        /* adapte selon la hauteur de ton header */
        left: 0;
        width: 100vw;     /* ✅ prend toute la largeur visible */
        max-width: 100%;
        height: auto;
        z-index: 9999;
        background-color: #fff;
        display: none;
        flex-direction: column;
        align-items: center;
        padding: 20px;
        overflow-y: auto;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        
      }
    .richatt-links.show {
      display: flex;
    }
  
    .richatt-links a {
      /* padding: 12px 20px; */
      border-bottom: 1px solid #eee;
      text-decoration: none;
      /* color: #000; */
      
    }
  /* iciici */
    .mobile-menu-btn {
        display: block;
        position: absolute;
        top: 30px;
        right: 35px;
        font-size: 26px;
        background: rgba(4, 150, 255, 1);
        color: white;
        border: none;
        cursor: pointer;
        padding: 4px 10px;
        border-radius: 6px;
      }
      .richatt-logo img{
        margin-right: 200px;
        
      }

      .richatt-header {
        position: relative; /* ✅ nécessaire pour que le bouton position: absolute reste attaché au header */
        z-index: 999;
      }
      
  }
  

/* to to*/

  
  @media (min-width:638px) and (max-width: 768px) {
    .partners-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 100px; /* tu peux ajuster selon l’espacement souhaité */
  }
  
  .partners-content img {
    width: 70px;
    /* height: 70px; */
    flex: 0 0 calc(33.33% - 20px); /* ✅ 3 images par ligne avec espace */
    box-sizing: border-box;
  }

  .what-we-do-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    margin-top: 50px;
  }

  .what-we-do-card {
    width: 100%;
    max-width: 300px;
    min-height: 300px;
    /* padding: 20px; */
    box-sizing: border-box;
  }
}







  
  @media (min-width:481px) and (max-width: 830px) {
  
    .what-we-do-grid {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 30px;
        margin-top: 50px;
      }
    
      .what-we-do-card {
        width: 100%;
        max-width: 300px;
        min-height: 300px;
        /* padding: 20px; */
        box-sizing: border-box;
      }
    
    .desktop-only {
      display: none;
    }
  
    .mobile-only {
      display: block;
      text-align: center;
      margin: 20px;
      /* background-color: #009aff; */
      /* color: white; */
      /* padding: 12px; */
      border-radius: 10px;
      font-weight: bold;
      
    }
  
    /* .richatt-button {
        background-color: #009aff;
        color: white !important;
        font-size: 18px !important; 
        margin-bottom: 10px;
      } */
      .richatt-button {
        background-color: #009aff;
        color: white !important;
        font-size: 18px !important;  /* Réduction de la taille de la police */
        padding: 6px 15px;          /* Ajuste le padding pour rendre le bouton plus petit */
        margin-bottom: 10px;
        border-radius: 10px; /* Assure que le bouton garde les coins arrondis */
        width: 30%; /* Réduit la largeur du bouton à sa taille de contenu */
      }
      /*  */
    .richatt-links {
        position: fixed; /* ✅ pour le garder visible au scroll */
        top: 80px;        /* adapte selon la hauteur de ton header */
        left: 0;
        width: 100vw;     /* ✅ prend toute la largeur visible */
        max-width: 100%;
        height: auto;
        z-index: 9999;
        background-color: #fff;
        display: none;
        flex-direction: column;
        align-items: center;
        padding: 20px;
        overflow-y: auto;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        
      }
    .richatt-links.show {
      display: flex;
    }
  
    .richatt-links a {
      /* padding: 12px 20px; */
      border-bottom: 1px solid #eee;
      text-decoration: none;
      /* color: #000; */
      font-size: 18px !important;
      
    }
  /* iciici */
    .mobile-menu-btn {
        display: block;
        position: absolute;
        top: 32px;
        right: 35px;
        font-size: 26px;
        background: rgba(4, 150, 255, 1);
        color: white;
        border: none;
        cursor: pointer;
        padding: 10px 14px;
        border-radius: 6px;
      }
      .richatt-header {
        position: relative; /* ✅ nécessaire pour que le bouton position: absolute reste attaché au header */
        z-index: 999;
      }

      .richatt-main {
        padding: 30px 20px;
        height: auto;
      }
    
      .richatt-layout {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
      }
    
      .richatt-title {
        font-size: 32px;
        line-height: 1.4;
        padding: 0 15px;
      }
    
      .richatt-description {
        font-size: 18px;
        line-height: 1.6;
        inline-size: 100%;
        text-align: center;
        margin: 0 auto;
      }
    
      .join-btn {
        width: 100%;
        max-width: 350px;
        padding: 14px;
        font-size: 18px;
        margin-top: 20px;
      }
    
      .icon {
        width: 60px;
        height: auto;
        margin: 15px 0;
      }
    
      .icon-left,
      .icon-right {
        display: block;
        text-align: center;
      }

      /* .quick-links-title{
        font-size: 24px;
      }
      .footer-left p {
        white-space: nowrap;
        font-size: 18px;
      }
      .footer-right ul li a,.footer-links a {
        font-size: 18px;
      }
      .footer-copyright{
        font-size: 18px;
      } */
  }




  @media (min-width: 768px) and (max-width: 1200px) {



    .richatt-main {
        padding: 30px 20px;
        height: auto;
      }
    
      .richatt-layout {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
      }
    
      .richatt-title {
        font-size: 32px;
        line-height: 1.4;
        padding: 0 15px;
      }
    
      .richatt-description {
        font-size: 18px;
        line-height: 1.6;
        inline-size: 100%;
        text-align: center;
        margin: 0 auto;
      }
    
      .join-btn {
        width: 100%;
        max-width: 350px;
        padding: 14px;
        font-size: 18px;
        margin-top: 20px;
      }
    
      .icon {
        width: 60px;
        height: auto;
        margin: 15px 0;
      }
    
      .icon-left,
      .icon-right {
        display: block;
        text-align: center;
      }


      .partners-content {
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* 3 colonnes */
        gap: 80px; /* Espacement entre les cercles */
        padding: 20px;
        justify-items: center; /* Centre les éléments */
    }
    
    /* Images partenaires */
    .partners-content img {
        width: 100%;
        height: auto;
        border-radius: 50%; /* Pour les rendre circulaires */
        object-fit: contain;
        box-sizing: border-box;
    }
    


   /* ✅ Navbar avec alignement horizontal et espacement correct */
.richatt-header {
    display: flex;
    flex-direction: row; /* Afficher tous les éléments sur la même ligne */
    justify-content: space-between; /* Espacer correctement le logo et les liens */
    align-items: center; /* Centrer verticalement */
    width: 100%; /* Prendre toute la largeur disponible */
    /* padding: 20px 30px; Espacement interne */
}

/* 📌 Logo */
.richatt-logo img {
    width: 190px; /* Réduire la taille du logo pour mieux s'adapter */
    height: auto; /* Assure que l'image conserve ses proportions */
}

/* 📌 Menu de navigation */
.richatt-nav {
    display: flex;
    flex-direction: row; /* Aligner les éléments du menu sur une seule ligne */
    gap: 3px; /* Espacement entre les liens du menu */
    align-items: center;
}

/* 📌 Liens de navigation */
.richatt-nav a {
    font-size: 20px; /* Taille des liens */
    font-weight: bold;
    color: #007bff; /* Couleur des liens */
    text-decoration: none; /* Enlever le soulignement */
    transition: color 0.3s ease; /* Transition au survol */
    

}
/* tiktac */

/* 📌 Effet sur les liens au survol */
.richatt-nav a:hover {
    color: #0056b3; /* Couleur lors du survol */
}

/* 📌 Bouton Get Started */
.richatt-button {
  background-color: #009aff;
  color: white !important;
  font-size: 18px !important;  /* Réduction de la taille de la police */
  padding: 6px 15px;          /* Ajuste le padding pour rendre le bouton plus petit */
  margin-bottom: 10px;
  border-radius: 10px; /* Assure que le bouton garde les coins arrondis */
  width: 30%; /* Réduit la largeur du bouton à sa taille de contenu */
}
.richatt-links {
  position: fixed; /* ✅ pour le garder visible au scroll */
  top: 80px;        /* adapte selon la hauteur de ton header */
  left: 0;
  width: 100vw;     /* ✅ prend toute la largeur visible */
  max-width: 100%;
  height: auto;
  z-index: 9999;
  background-color: #fff;
  display: none;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  overflow-y: auto;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  
}
.richatt-links.show {
display: flex;
}

.richatt-links a {
/* padding: 12px 20px; */
border-bottom: 1px solid #eee;
text-decoration: none;
/* color: #000; */
font-size: 18px !important;

}

/* 📌 Effet au survol du bouton */
.richatt-button:hover {
    background-color: #0077cc; /* Couleur du fond au survol */
}


.mobile-menu-btn {

  top: 29px;
  right: 38px;
  font-size: 24px;
  background: rgba(4, 150, 255, 1);
  color: white;
  border: none;
  cursor: pointer;
  /* padding: 10px 14px; */
  border-radius: 8px;
}

.richatt-logo img {
  /* width: 290px; ✅ Largeur */
  height: auto; /* ✅ Garde les proportions */
  object-fit: contain; /* ✅ Empêche la déformation */
  display: block; /* ✅ Évite l’espace supplémentaire sous l’image */
  margin: 0;
  padding: 0;
  margin-top: 28px; 
  margin-right: 10px;
  /* margin-left: 20px; */
  width: clamp(280px, 100vw, 180px); /* ✅ Ajustement dynamique sans distorsion */
  height: auto;
}
}


@media (min-width:830px) and (max-width: 1200px) {

  .what-we-do-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    margin-top: 50px;
  }

  .what-we-do-card {
    width: 100%;
    max-width: 300px;
    min-height: 300px;
    /* padding: 20px; */
    box-sizing: border-box;
  }

.desktop-only {
  display: none;
}

.mobile-only {
  display: block;
  text-align: center;
  margin: 20px;
  /* background-color: #009aff; */
  /* color: white; */
  /* padding: 12px; */
  border-radius: 10px;
  font-weight: bold;
  
}

/* .richatt-button {
    background-color: #009aff;
    color: white !important;
    font-size: 18px !important; 
    margin-bottom: 10px;
  } */
  .richatt-button {
    background-color: #009aff;
    color: white !important;
    font-size: 18px !important;  /* Réduction de la taille de la police */
    padding: 6px 15px;          /* Ajuste le padding pour rendre le bouton plus petit */
    margin-bottom: 10px;
    border-radius: 10px; /* Assure que le bouton garde les coins arrondis */
    width: 30%; /* Réduit la largeur du bouton à sa taille de contenu */
  }
.richatt-links {
    position: fixed; /* ✅ pour le garder visible au scroll */
    top: 80px;        /* adapte selon la hauteur de ton header */
    left: 0;
    width: 100vw;     /* ✅ prend toute la largeur visible */
    max-width: 100%;
    height: auto;
    z-index: 9999;
    background-color: #fff;
    display: none;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    overflow-y: auto;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    
  }
.richatt-links.show {
  display: flex;
}

.richatt-links a {
  /* padding: 12px 20px; */
  border-bottom: 1px solid #eee;
  text-decoration: none;
  /* color: #000; */
  font-size: 18px !important;
  
}
/* iciici */
.mobile-menu-btn {
    display: block;
    position: absolute;
    top: 32px;
    right: 35px;
    font-size: 26px;
    background: rgba(4, 150, 255, 1);
    color: white;
    border: none;
    cursor: pointer;
    padding: 10px 14px;
    border-radius: 6px;
  }
  .richatt-header {
    position: relative; /* ✅ nécessaire pour que le bouton position: absolute reste attaché au header */
    z-index: 999;
  }

  .richatt-main {
    padding: 30px 20px;
    height: auto;
  }

  .richatt-layout {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .richatt-title {
    font-size: 32px;
    line-height: 1.4;
    padding: 0 15px;
  }

  .richatt-description {
    font-size: 18px;
    line-height: 1.6;
    inline-size: 100%;
    text-align: center;
    margin: 0 auto;
  }

  .join-btn {
    width: 100%;
    max-width: 350px;
    padding: 14px;
    font-size: 18px;
    margin-top: 20px;
  }

  .icon {
    width: 60px;
    height: auto;
    margin: 15px 0;
  }

  .icon-left,
  .icon-right {
    display: block;
    text-align: center;
  }

}

@media (min-width: 830px) and (max-width: 1200px) {
  .partners-content {
      display: grid;
      grid-template-columns: repeat(3, 1fr); /* 3 colonnes */
      gap: 12.1px; /* Espacement entre les cercles */
      padding: 20px;
      justify-items: center; /* Centre les éléments */
  }

  /* Images partenaires */
  .partners-content img {
      width: 100%;
      height: auto;
      border-radius: 50%; /* Pour les rendre circulaires */
      object-fit: contain;
      box-sizing: border-box;
  }
}

@media (min-width: 754px) and (max-width: 954px) {
  .partners-content {
      display: grid;
      grid-template-columns: repeat(3, 1fr); /* 3 colonnes */
      gap: 5px; /* Espacement entre les cercles */
      padding: 20px;
      justify-items: center; /* Centre les éléments */
  }

  /* Images partenaires */
  .partners-content img {
      width: 100%;
      height: auto;
      border-radius: 50%; /* Pour les rendre circulaires */
      object-fit: contain;
      box-sizing: border-box;
  }
}