Queria que a minha div .valorCard-content ocupasse espaço e parasse de ficar em cima da segunda seção. Quero que ela continue com uma parte dela em cima da imagem, tipo sobreposição, mas não quero que ela tampe a segunda seção. Como faço para ela ocupar espaço e a segunda seção ficar posicionada em baixo não sendo tampada pela div .valorCard-content.
#valorContent {
padding: 0;
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.valorCard {
padding: 0 24px;
position: absolute;
top: 370px;
}
.valorCard-content {
border: 2px solid green;
background-color: white;
}
<section class="valor py-5 mt-4">
<div class="container pt-5" id="valorContent">
<div class="valorImagem">
<img class="img-fluid" src="https://source.unsplash.com/user/c_v_r/414x421">
</div>
<div class="valorCard text-center">
<div class="valorCard-content py-5 px-4">
<h2 class="valor-titulo mx-4">
Lorem Ipsum
</h2>
<hr>
<div class="valor-lista">
<div class="item ">
<h4 class="mx-4">Test</h4>
</div>
<hr>
<div class="item ">
<h4 class="mx-4">Test</h4>
</div>
<hr>
<div class="item ">
<h4 class="mx-4">Test</h4>
</div>
<hr>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="second">
<div>
<div>
<div>
<div>
<p class="depoimento-txt">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
<div class="col-lg-5 cardbox cardbox-dep">
<div class="p-4 pt-5 mx-2">
<p class="depoimento-txt">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
</div>
</div>
</section>