.overlay-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 4rem;
    color: white;
    background-color: rgba(0, 0, 0, 0.15);
    pointer-events: none;
    /* Empêche cette div de bloquer les clics */
}

.overlay-container a {
    pointer-events: auto;
    /* Assure que les boutons restent cliquables */
    position: relative;
    z-index: 10;
}




/* Ajustement pour les écrans mobiles */
@media (max-width: 768px) {

.overlay-container {
height: 60vh !important; /* Prend la moitié de l'écran sur mobile */
padding: 5rem 2rem !important; /* Évite trop d'espace vide */

}

.display-4 {
font-size: 2rem; /* Animation du texte en frappe au clavier */
}
.display-3 {
font-size: 2rem;
}

.display-5 {
font-size: 1.5rem;
}
.display-6{
font-size: 1.5rem;
}
.carousel-item img {
height: 60vh !important; /* Force l'image à prendre la moitié de l'écran */
}
.carousel-item .position-relative {
min-height: 60vh; /* 50% de la hauteur de l'écran */
}

}



@media (max-width: 768px) {
.gradient-btn {
font-size: 16px;
padding: 8px 16px;
width: auto;
}

.d-flex {
justify-content: center; /* Centre les boutons */
}
.btn {
margin-bottom: 0.5rem !important; /* Évite un grand espace vide sous le bouton */
}
}


.text-blue-light {
    color: rgb(37, 113, 201);
    /* Bleu plus doux pour le texte */
}

.btn-hover {
    transition: all 0.3s ease-in-out;
}

.btn-hover:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.gradient-btn {
    background: linear-gradient(90deg, #6a11cb, rgb(161, 143, 37));
    background-size: 200% auto;
    transition: all 0.3s ease-in-out;
    animation: gradientAnimation 4s linear infinite;
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 18px;
    border-radius: 8px;
    text-decoration: none;
}

@keyframes gradientAnimation {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.gradient-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.plus-sign {
    font-size: 3rem; /* Taille agrandie */
    font-weight: bold;
    background: linear-gradient(90deg, #6a11cb, #ff6f61);
    -webkit-background-clip: text;
    color: transparent;
    animation: gradientMove 3s infinite alternate ease-in-out;
}

@keyframes gradientMove {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

.feature-content p {
    font-size: 3rem; /* Taille plus grande */
    font-weight: bold;
    text-align: center; /* Centre horizontalement */
    display: flex;
    justify-content: center; /* Centre horizontalement */
    align-items: center; /* Centre verticalement */
    height: 100%; /* Prend toute la hauteur disponible */
}

.feature-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.feature-content p {
    font-size: 10rem; /* Réduit légèrement pour mobile */
}

@media (max-width: 768px) {
    .feature-content p {
        font-size: 2.5rem; /* Réduit légèrement pour mobile */
    }

    .feature-content {
        height: 200px; /* Ajuste la hauteur sur petits écrans */
    }
}

   /* Applique une transparence et un effet de hover */
   .custom-selectTopB {
    background-color: rgba(117, 124, 131, 0.75) !important; /* Couleur Bootstrap bg-secondary avec 75% d'opacité */
    transition: background-color 0.3s ease-in-out; /* Animation fluide */
}

.custom-selectTopB:hover {
    background-color: #0050b2 !important; /* Bleu Bootstrap au survol */
    color: white !important; /* Texte blanc */
}

.top-barTb {
    background: linear-gradient(16deg, #d9d5d734,  #222222, #d1d1d1 ); /* Dégradé du gris au noir */
}
.top-barTb2 {
    background: linear-gradient(16deg, #000000,  #222222, #000000 ); /* Dégradé du gris au noir */
}
.text-xs {
    font-size: 10px !important;
}