.text-container {
    width: 20%;
    margin-top: 150px;
    position: relative;
    overflow: hidden;
}

.text-wrapper,
.readmore-btn {
    position: relative;
    z-index: 2; /* Placer le contenu au-dessus de l'overlay */
}
.readmore-btn {
    margin-top: 20px;
    background: #cbd4d2;
    font-size: 16px;
    width: 150px;
    padding: 5px 10px 5px 10px;
    text-align: center;
    border-radius: 20px;
    cursor: pointer;
}
.text-wrapper {
    position: relative;
    overflow: hidden; /* Masquer le contenu dépassant la hauteur initiale */
    max-height: 450px; /* Limiter la hauteur visible pour le texte initial */
    transition: max-height 0.5s ease; /* Animation pour l'agrandissement */
    color: #041d26 !important;
}

.text-wrapper.expanded {
    max-height: none; /* Supprime la limite de hauteur pour afficher tout le contenu */
}

.text-wrapper:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 450px; /* Hauteur du dégradé */
    background: linear-gradient(to bottom, transparent, #f2f2f2);
    pointer-events: none; /* Empêche toute interaction avec l'overlay */
    z-index: 1;
    transition: opacity 0.5s ease; /* Animation lors de la disparition */
}

.text-wrapper.expanded:after {
    opacity: 0; /* Masquer le dégradé quand le texte est affiché entièrement */
}