.banner-content .title {
    color: white;
}
.banner-content p {
    color: white;

}
.banner-social .title {
    color: #c9d1d9;
}
.banner-social .list-wrap li a {
    color: #c9d1d9;
}
.banner-scroll a {
    color: #c9d1d9;
}
@media screen and (max-width: 991px) {
    .shortcode-hero-banner .shortcode-hero-banner-overlay {
        background-color: rgba(0, 0, 0, .05);
        height: 100%;
        inset: 0;
        position: absolute;
        width: 100%;
    }
}
@media (max-width: 991.98px) {
    .tg-header__area {
        padding: 0px 0;
    }
}
@media (max-width: 767.98px) {
    .banner-bg {
        min-height: 750px;
        padding: 170px 0 80px;
    }
    .banner-content {
        margin-top: 300px;
    }
}
@media screen and (max-width: 991px) {
    .shortcode-hero-banner {
        /* On remplace l'image par la nouvelle pour le mobile */
        --background-image: url('https://investinsanaga.com/storage/backgrounds/invest-in-sanaga-mobile.png') !important;
        
        /* On applique l'image à la propriété background */
        background-image: var(--background-image);
        
        /* Centrage et éloignement (dézoom) */
        background-position: center center;
        background-size: cover; /* Ajustez ce % pour éloigner plus ou moins */
        background-repeat: no-repeat;
        
        position: relative;
        padding: 40px 20px; /* Donne de l'espace au texte */
    }
}

/* 1. On cache le bouton par défaut (Desktop/Tablette) */
.btn-banner {
    display: none !important;
}

/* 2. On l'affiche seulement sur les petits écrans (Small Media) */
@media screen and (max-width: 767px) {
    .btn-banner {
        display: inline-block !important; /* Ou 'block' selon votre design */
        margin: 20px auto;               /* Pour le centrer si besoin */
        text-align: center;
    }
}