Scroll arrow anchor point

Site URL: http://gregorylassale.com

I found these scroll arrows and am wanting to add #5 to one of my pages.

https://codepen.io/nxworld/pen/OyRrGy

If I'm understanding the code right, on the template each arrow scrolls down the following section.

<section id="section05" class="demo">
  <h1>Scroll Down Button #5</h1>
  <a href="#section06"><span></span>Scroll</a>
</section>

On my site, I only want the arrow the scroll a bit further down the service page to reveal the rest of it (it's too tall to fit entirely on my screen). How would I need to change the code to control the anchor location on the same page?

I'll also need to alter the CSS as I don't want the background pictures or gradients, but I can play with that and determine what bit I do or do not need.

Thanks.