Fullpage JS navigation dots dont change in size between sections

Design help CMS
1

Hello flowers,
I have fullpage js running in my webflow project but the navigation dots don’t change in size as I scroll between sections. The dots increase in size, the tooltips appear upon hover, and the dots are linked/anchored to the appropriate sections.

How can I make the dots change in size upon section transition? Thank you!

This is my fullpage initiation script from the tag:

<script> new fullpage('#fullpage', { licenseKey: '', autoScrolling: true, navigation: true, menu: '#menu', lockAnchors: true, navigationPosition: 'right', navigationTooltips: ['Search', 'Presentation', 'Slides'], showActiveTooltip: true, slidesNavigation: true, slidesNavPosition: 'bottom', anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage'] }); </script>

this is the html for the navigation dots (within HTML embed):

`<div id="fp-nav" class="fp-right">
<ul>
<li>
<a class="active" href="#firstPage">
<span class="fp-sr-only">First page</span>
<span></span>
</a>
<div class="fp-tooltip fp-right">Search</div>
</li>

<li>
<a class="" href="#secondPage">
 <span class="fp-sr-only">Second page</span>
<span></span>
</a>
<div class="fp-tooltip fp-right">Presentation</div>
</li>

<li>
<a class="" href="#3rdPage">
  <span class="fp-sr-only">Third and last page</span>
  <span></span>
   </a>
   <div class="fp-tooltip fp-right">Slides</div>
 </li>

 </ul>
   </div>`

Here is my public share link: https://preview.webflow.com/preview/andrass-finsweet-filter-search?utm_medium=preview_link&utm_source=designer&utm_content=andrass-finsweet-filter-search&preview=294feb46c42820c36edf2524e882b34e&pageId=5fd971470a0c834b00b720eb&mode=preview