*/No conteiner pai : usar a classe "container-pai", e nos demais usar "coluna", aplicar o código abaixo no conteiner pai"/

.coluna {
    overflow: hidden;
    height: 300px; /* Controle a altura do card aqui */
    transition: width 0.5s ease;
}

.coluna:hover {
    width: 100%;
}

.saiba-mais {
    display: block;
    font-size: 20px; /* Ajuste o tamanho do 'saiba mais' aqui */
    letter-spacing: 0;
    transition: 0.2s;
    color: #0330fc; /* Ajuste a cor do 'saiba mais' aqui */
    position: relative;
    top: 0px; /* Ajuste a posição do 'saiba mais' aqui */
}

.texto .elementor-image-box-description {
    opacity: 0;
    transition: 0.55s;
    transform: translateY(165px); /* Ajuste a posição dos textos aqui */
}

.texto {
    transform: translateY(165px); /* Ajuste a posição dos textos aqui */
    transition: 0.5s;
}

.coluna {
    padding: 32px; /* Ajuste o padding das colunas aqui */
}

.coluna:hover .elementor-image-box-description {
    opacity: 1;
    transition: all 0.5s 0.5s;
    transform: translateY(-60px); /* Ajuste a posição da descrição aqui */
}

.coluna:hover .texto {
    transform: translateY(0);
}

.coluna:hover .saiba-mais {
    opacity: 0;
}

.coluna::before,
.coluna::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(to bottom, transparent, #000000); /* Ajuste as cores do gradiente aqui */
    width: 100%;
    height: 100%;
    transition: 0.5s;
}

.coluna::after {
    background: linear-gradient(to bottom, #000000af, #000000); /* Ajuste as cores do gradiente no hover aqui */
    opacity: 0;
}

.coluna:hover::after {
    opacity: 1;
}

.coluna * {
    z-index: 1;
}