.custom-navbar-color {
            background-color: #060628;
        }
        .custom-btn-turquoise {
            background-color: #00ffcc;
            color: #060628;
            border-color:#00ffcc;
        }
        .custom-btn-turquoise:hover {
            background-color:#00e6b8;
            border-color: #00e6b8;
        }
        .custom-btn-turquoise:active {
            background-color:#00cc9e;
            border-color:#00cc9e;
        }

        .btn-primaire {
  background-color: #00ffcc !important; /* Couleur de fond du bouton */
  color: #060628 !important; /* Couleur du texte du bouton */
  border-color: #00ffcc !important; /* Couleur de la bordure du bouton */
}

.btn-primaire:hover {
  background-color: #00e6b8 !important; /* Couleur de fond au survol */
  border-color: #00e6b8 !important; /* Couleur de la bordure au survol */
  color: #060628 !important; /* Couleur du texte au survol */
}

.btn-primaire:active {
  background-color: #00cc9e !important; /* Couleur de fond lors du clic */
  border-color: #00cc9e !important; /* Couleur de la bordure lors du clic */
  color: #060628 !important; /* Couleur du texte lors du clic */
  box-shadow: inset 0 0 0.2rem rgba(0, 0, 0, 0.2); /* Ombre pour effet de pression */
}

.btn-primaire:focus, .btn-primaire.focus {
  box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.2); /* Ombre de mise au point */
}

.btn-outside-primaire {
  background-color: transparent !important; /* Changes the fill color of the button */
  color: #00ffcc !important;             /* Changes the color of the text inside the button */
  border: 1px solid #00ffcc !important; /* Changes the color of the button's border */
}

.btn-outside-primaire:hover {
  background-color: #00e6b8 !important; /* Background color when mouse is over the button */
  color: #060628 !important;             /* Text color when mouse is over the button */
  border-color: #00e6b8 !important;    /* Border color when mouse is over the button */
}

.btn-outside-primaire:active {
  background-color: #00cc9e !important; /* Couleur de fond lors du clic */
  border-color: #00cc9e !important; /* Couleur de la bordure lors du clic */
  color: #060628 !important; /* Couleur du texte lors du clic */
  box-shadow: inset 0 0 0.2rem rgba(0, 0, 0, 0.2); /* Ombre pour effet de pression */
}

.btn-secondaire {
  background-color: #3737c8 !important; /* Couleur de fond du bouton */
  color: #d5d5ff !important; /* Couleur du texte du bouton */
  border-color: #3737c8 !important; /* Couleur de la bordure du bouton */
}

.btn-secondaire:hover {
  background-color: #00e6b8 !important; /* Couleur de fond au survol */
  border-color: #3737c8 !important; /* Couleur de la bordure au survol */
  color: #060628 !important; /* Couleur du texte au survol */
}

.btn-secondaire:active {
  background-color: #00cc9e !important; /* Couleur de fond lors du clic */
  border-color: #00cc9e !important; /* Couleur de la bordure lors du clic */
  color: #060628 !important; /* Couleur du texte lors du clic */
  box-shadow: inset 0 0 0.2rem rgba(0, 0, 0, 0.2); /* Ombre pour effet de pression */
}

.btn-secondaire:focus, .btn-secondaire.focus {
  box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.2); /* Ombre de mise au point */
}

.dropdown-menu-primaire .dropdown-item {
  color: #060628; /* Couleur du texte */
}

.dropdown-menu-primaire .dropdown-item:hover,
.dropdown-menu-primaire .dropdown-item:focus {
  background-color: #060628; /* Couleur primaire pour le fond */
  color: #d5d5ff; /* Couleur du texte au survol */
}

.dropdown-menu-primaire .dropdown-item.active,
.dropdown-menu-primaire .dropdown-item:active {
  background-color: #3737c8; /* Couleur primaire pour le fond */
  color: #fff; /* Couleur du texte actif */
}


        /* Features */
        .service-card {
            transition: all 0.3s ease;
            border: none;
            border-radius: 15px;
            overflow: hidden;
            background: linear-gradient(145deg, #ffffff, #f3f3f3);
            box-shadow: 5px 5px 15px #d9d9d9, -5px -5px 15px #ffffff;
        }
        
        .service-card:hover {
            transform: translateY(-10px);
            box-shadow: 8px 8px 20px #d1d1d1, -8px -8px 20px #ffffff;
        }
        
        .icon-wrapper {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto;
            background: linear-gradient(135deg, #3737c8, #00ffcc);
        }
        
        .custom-badge {
            background: linear-gradient(135deg, #3737c8, #00ffcc);
            padding: 8px 15px;
            border-radius: 20px;
            font-size: 0.8rem;
            font-weight: 500;
        }
        
        .service-title {
            color: #2d3748;
            font-weight: 600;
        }
        
        .service-text {
            color: #718096;
            font-size: 0.95rem;
        }


        /* pricing */

        .pricing-card {
    transition: all 0.3s ease;
    border: none;
    background: linear-gradient(145deg, #ffffff, #f5f5f5);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
}

.pricing-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.feature-list li {
    padding: 8px 0;
    position: relative;
}

.popular-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    transform: rotate(15deg);
}

.btn-custom {
    background: linear-gradient(45deg, #3737c8, #00ffcc);
    border: none;
    padding: 12px 30px;
    transition: all 0.3s ease;
}

.btn-custom:hover {
    transform: scale(1.05);
    box-shadow: 0 5px 15px rgba(94, 92, 231, 0.4);
}

.text-primaire { 
    color: #3737c8 !important;
}
.text-secondaire { 
    color: #3737c8 !important;
}
.text-fonce { 

    color: #060628 !important;
}

.text-fonce-bord {
color: white !important; /* Couleur du texte en blanc */
   /* Contour pour navigateurs WebKit (Chrome, Safari) avec transparence */
    -webkit-text-stroke: 1px rgba(6, 6, 40, 0.25); /* 1px d'épaisseur, couleur #060628 avec 70% d'opacité (30% transparence) */
    
    /* Contour pour autres navigateurs avec transparence */
    text-shadow:
        -1px -1px 0 rgba(6, 6, 40, 0.25),
        1px -1px 0 rgba(6, 6, 40, 0.25),
        -1px 1px 0 rgba(6, 6, 40, 0.25),
        1px 1px 0 rgba(6, 6, 40, 0.25);
}

.smaller-text {
    font-size: 0.4em; /* Ajuste cette valeur pour un rendu plus petit ou plus grand */
    vertical-align: super; /* Aide à aligner le texte plus petit */
}

.bg-clair {
     background-color:#d5d5ff;
}
.bg-primaire {
  background-color: #3737c8;
}
.bg-secondaire {
     background-color:#00ffcc;
}
.bg-middle {
  background-color: #1C9BCA;
}
.bg-primaire-50 {
  /* Ancien: background-color: #3737c8; */
  background-color: rgba(55, 55, 200, 0.5); /* Rouge:55, Vert:55, Bleu:200, Alpha:0.7 */
}

.bg-secondaire-50 {
  /* Ancien: background-color: #00ffcc; */
  background-color: rgba(0, 255, 204, 0.5); /* Rouge:0, Vert:255, Bleu:204, Alpha:0.7 */
}

.bg-middle-50 {
  /* Ancien: background-color: #1C9BCA; */
  background-color: rgba(28, 155, 202, 0.5); /* Rouge:28, Vert:155, Bleu:202, Alpha:0.7 */
}