Please help with Z index / background issue

Site URL: http://www.kennedy-lane.co.uk/

I have been doing some customisations to my portfolio site - http://www.kennedy-lane.co.uk/ 

I managed to get the CSS animation working how I would like, however, I cannot get it to sit properly in context of the other sections. 

I'd like it to sit behind the text and button, but in front of the background.

Initially I thought the CSS wasn't working because it wasn't showing on my site at all, but I altered the z index to 2 and it showed. Anything less than that it doesn't - which makes me think the background of that section is stopping it being visible with anything less than 2.

I assumed I could then alter the z index of the button and text using the block ID's but couldn't get that to work myself. I then looked into changing opacity of the background colour to see if that would allow me to keep a lower z index but still show the animation but I am out of ideas. Any help would be greatly appreciated

/* Footer over bubbles */

section[data-section-id="61448c01f26d6058a293ec69"] {z-index: 3;}


/* Animated Circles CSS */

.circles {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 90%;
	height: 100%;
	z-index: 2;
}

.circles li {
	position: absolute;
	display: block;
	list-style: none;
	width: 100px;
	height: 100px;
	background: rgba(59, 237, 183, 1);
	animation: animate 25s linear infinite;
	bottom: calc(-200px - 40vh);
}

.circles li:nth-child(1) {
	left: 25%;
	width: 100px;
	height: 100px;
	animation-delay: 0s;
	animation-duration: 20s;
	border-radius: 100%;
	border-top-left-radius: 100%  !important;
	background: rgba(59, 237, 183, 1);
}

.circles li:nth-child(2) {
	left: 10%;
	width: 100px;
	height: 100px;
	animation-delay: 0s;
	animation-duration: 25s;
	border-radius: 100%;
	border-top-left-radius: 100% !important;
	background: rgba(59, 237, 183, 1);
}

.circles li:nth-child(3) {
	left: 70%;
	width: 100px;
	height: 100px;
	animation-delay: 5s;
	animation-duration: 20s;
	border-radius: 100%;
	border-top-left-radius: 100% !important;
	background: rgba(59, 237, 183, 1);
}

.circles li:nth-child(4) {
	left: 40%;
	width: 100px;
	height: 100px;
	animation-delay: 5s;
	animation-duration: 15s;
	border-radius: 100%;
	border-top-left-radius: 100% !important;
	background: rgba(59, 237, 183, 1);
}

.circles li:nth-child(5) {
	left: 60%;
	width: 100px;
	height: 100px;
	animation-delay: 0s;
	animation-duration: 20s;
	border-radius: 100%;
	border-top-left-radius: 100% !important;
	background: rgba(59, 237, 183, 1);
}

.circles li:nth-child(6) {
	left: 75%;
	width: 100px;
	height: 100px;
	animation-delay: 0s;
	animation-duration: 25s;
	border-radius: 100%;
	border-top-left-radius: 100% !important;
	background: rgba(59, 237, 183, 1);
}

.circles li:nth-child(7) {
	left: 35%;
	width: 100px;
	height: 100px;
	animation-delay: 0s;
	animation-duration: 30s;
	border-radius: 100%;
	border-top-left-radius: 100% !important;
	background: rgba(59, 237, 183, 1);
}

.circles li:nth-child(8) {
	left: 50%;
	width: 100px;
	height: 100px;
	animation-delay: 0s;
	animation-duration: 35s;
	border-radius: 100%;
	border-top-left-radius: 100% !important;
	background: rgba(59, 237, 183, 1);
}

.circles li:nth-child(9) {
	left: 20%;
	width: 100px;
	height: 100px;
	animation-delay: 0s;
	animation-duration: 40s;
	border-radius: 100%;
	border-top-left-radius: 100% !important;
	background: rgba(59, 237, 183, 1);
}

.circles li:nth-child(10) {
	left: 85%;
	width: 100px;
	height: 100px;
	animation-delay: 0s;
	animation-duration: 45s;
	border-radius: 100%;
	border-top-left-radius: 100% !important;
	background: rgba(59, 237, 183, 1);
}

@keyframes animate {
	0% {
		transform: translateY(0) rotate(0deg);
		opacity: 0;
	}
	50% {
		transform: translateY(-60vh) rotate(360deg);
		opacity: 1;
	}
	100% {
		transform: translateY(-120vh) rotate(720deg);
		opacity: 0;
	}
}

<ul class='circles'>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
</ul>

It looks like you solved it?

On 9/24/2021 at 3:48 AM, tuanphan said:

It looks like you solved it?

Hi @tuanphan thanks for the reply. Not quite. I have managed to get the effect to do what I want (ie. float from the bottom) - however it sits in front of everything and I would rather it sat behind the text and button. Currently it sits in front and it doesn't allow me to press the button (see screenshot below)

I need this 'layer' to sit behind the other layers