How to put Image on top of text with Boostrap - html

Question

SO I want to reach this image
But i am getting this result, and i have a sense that i misused boostrap for the grid, but i am not sure it has to do with my initial problem
I want to reach a parallax element too by translating the image on the x axis on click as in this gif So i am worried if using margin would make it worse
EDIT: my problem isn't with the grid and text placement, i want to position the trees ( right and left on the right sides) which isn't working at all. I know it is immature to say this but idc of the grid if its work like in the prototype
here is my code
<section id="abtus">
</span>
<div class="col-4" style="margin-bottom: 700px;"><img class="tree" src="./images/tree1.png" width="750"></div>
<div class="grid text-center " >
<div class="cols-4 pb-3"><p class="text1">WHO WE ARE</p></div>
<div class="cols-4 p-1 "><p class="text2">We are two sisters who come from a similar <br>
background of love for everything creative and magical.</p> </div>
<div class="cols-4 p-1 "> <p class="text2">We aim to deliver your stories with interesting <br>
visually pleasing magic that separates you from the rest!</p></div>
<div class=" cols-4 p-1 pb-5 "> <p class="text2">To guarantee great quality work and also an added fun <br>
element to your project.</p></div>
<div class="cols-1"><img src="./images/Group 33.svg"></div>
</div>
<div class="grid px-5">
<div class="cols-4 offset-md-2"><img src="./images/Group 30.svg" width="90"> </div>
<div class=" cols-4 pb-4"></div>
<div class=" cols-4 pb-2"></div>
<div class=" cols-4"><img src="./images/Group 46.svg" width="150"></div>
</div>
<div class="grid text-center">
<div class="cols-4 pb-3"><p class="text1">THE TEAM</p></div>
<div class="cols-4 pb-5"><p class="text2 pb-4">We have a rich experience in the market, especially <br>
in gaming and animation. We work with several tasks <br>
such as visual development, concept art, character design, <br>
graphic design, branding, and social media.<br><br>
Yes, We do everything!</p> </div>
<div class=" cols-4 pb-4"></div>
<div class=" cols-4 text-center"><img src="./images/Group 50.svg" width="120"></div>
</div>
</span>
</section>
the relative css
section{
flex: none;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
width: 100vw;
scroll-snap-align: start;
}
.tree{
top: 0;
left:0;
position:absolute ;
z-index: 1;
}
.text1{
text-align: left;
left: 0;
color: #20122B;
font-family: 'Lato';
font-weight: 900;
font-size: 30px;
}
.text2{
text-align: left;
color: #20122B;
font-family: 'Lato';
font-weight: 500;
font-size: 0.9em;
line-height: 16px;
}
.arrow1{
display: grid;
place-items: center;
place-content: center;
border-left: 3px solid #ffffff;
border-bottom: 3px solid #ffffff;
width: 10px;
height: 10px;
border-radius: 0.2em;
transform: rotate(225deg);
}
.right{
margin-right: 150px;
float:left;
}
.left{
margin-right: 100px;
float:left;
transform: rotate(45deg);
}