Custom react modal getting hidden behind service card - css

Question

I'm building info modals for a website on the services page. The services page has 3 cards that have different options, heres that code from the services page.
React JS
<ServicesContainer id='services'>
<ServicesH1>Services</ServicesH1>
<ServicesWrapper>
<ServicesCard>
<ServicesIcon src={Icon1} />
<ServicesH2>Equine Therapy</ServicesH2>
<ServicesP>
Work with horses
</ServicesP>
<Button
to='services'
onClick={openInfoModal}
primary='true'
dark='true'
smooth={true}
duration={500}
spy={true}
exact='true'
offset={-80}
>
modal
</Button>
</ServicesCard>
<ServicesCard>
<ServicesIcon src={Icon2} />
<ServicesH2>Group Therapy</ServicesH2>
<ServicesP>
Group therapy.
</ServicesP>
<InfoModal showInfoModal={showInfoModal} setShowInfoModal={setShowInfoModal}/>
</ServicesCard>
<ServicesCard>
<ServicesIcon src={Icon3} />
<ServicesH2>Individual Therapy</ServicesH2>
<ServicesP>
Individual Therapy.
</ServicesP>
</ServicesCard>
</ServicesWrapper>
</ServicesContainer>
When the modal pops up it's hidden behind the 3rd card, i'm assuming it has something to do with the 3rd card coming after the InfoModal component/ the styling. I've tried setting the z-index to 900, messed with opacity as well with no luck. When I put the InfoModal component under the 3rd card it shows up on the 3rd (far right) column of the page off center which I definitely don't want. I've looked around trying to find a solution by maybe being able to identify the custom InfoModal component as a modal so it shows up in front of everything but was only able to find styled-react-modal, which i tried but it made so many errors about ecma script that I just had to remove it. I'm pretty bad with css but heres the InfoModal styled components code
const Background = styled.div`
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 1);
position: fixed;
display: flex;
justify-content: center;
align-items: center;
z-index: 10;
`;
const ModalWrapper = styled.div`
width: 800px;
height: 500px;
box-shadow: 0 5px 16px rgba(0, 0, 0, 1);
background: #fff;
color: #000;
display: grid;
grid-template-columns: 1fr;
position: relative;
z-index: 10;
border-radius: 10px;
`;
const ModalContent = styled.div`
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
line-height: 1.8;
color: #141414;
p {
margin-bottom: 1rem;
}
button {
padding: 10px 24px;
background: #141414;
color: #fff;
border: none;
}
`;
const CloseModalButton = styled(MdClose)`
cursor: pointer;
position: absolute;
top: 20px;
right: 20px;
width: 32px;
height: 32px;
padding: 0;
z-index: 10;
`;
the services styled components code
import styled from 'styled-components';
export const ServicesContainer = styled.div`
height: 800px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: #189AC0;
z-index: 1;
#media screen and (max-width: 768px) {
height: 1100px;
}
#media screen and (max-width: 480px) {
height: 1300px;
}
`;
export const ServicesWrapper = styled.div`
max-width: 1000px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
align-items: center;
grid-gap: 16px;
padding: 0 50px;
z-index: 1;
#media screen and (max-width: 1000px) {
grid-template-columns: 1fr 1fr;
}
#media screen and (max-width: 768px) {
grid-template-columns: 1fr;
padding: 0 20px;
}
`;
export const ServicesCard = styled.div`
background: #fff;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
border-radius: 10px;
max-height: 340px;
padding: 30px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
transition: all 0.2s ease-in-out;
transform: scale(1.05);
z-index: 0.5;
&:hover {
transform: scale(1.05);
transition: all 0.2s ease-in-out;
cursor: pointer;
}
`;
export const ServicesIcon = styled.img`
height: 160px;
width: 160px;
margin-bottom: 10px;
`;
export const ServicesH1 = styled.h1`
font-size: 2.5rem;
color: #fff;
margin-bottom: 64px;
#media screen and (max-width: 480px) {
font-size: 2rem;
}
`;
export const ServicesH2 = styled.h2`
font-size: 1rem;
margin-bottom: 10px;
`;
export const ServicesP = styled.p`
font-size: 1rem;
text-align: center;
`;
I hope this isn't to much but if anyone is good with styling or react, would appreciate any feedback.