Custom slider dots

hey,

im trying to make my slider dots like this:

i have add this thee css styling:

.w-slider-dot {
width: 5px;
height: 5px;
border-radius: 0px;
background: #898989;
}

.w-slider-dot.w-active {
width: 20px;
height: 20px;
position: relative;
border-radius: 0px;
transform: rotate (45deg);
background: #FD746C;
}

but I still get the round dots:

any help please, to fix this!!

thanks in advance


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

watch this
https://www.youtube.com/watch?v=Z5slJSfRLug

Thanks,
I have tried that but for some reason, I still get the round points in stade of the cube even setting the border-radius to 0px

he mentions .w-slider.nav.w-round
and you do not.
He says that it the bit that changes the shape.
I haven’t tried it myself just pointing out.

so i copy and pasted the code from the video and added the brackets and such and my slider dots are unchanged. This is due to them being a child of the section element. any ideas around this?