I want the second section to appear underneath the hero section. which it does in desktop view. As soon as the screen size decreases (tablet/phone) the columns in top section start encroaching/overlapping with section 2.
The Hero section has a height of 100VH and the overflow visible. This restricts the section from growing. However, the content inside will grow and overflow. Since you have a lot of content in this section, it might be better to set the height of the section to auto for tablet and mobile view to let it adjust with the content.