Half of the back of my profile card is showing through the front on IOS mobile devices

I have created a website for my non-profit organization, and I have a problem with my CSS for IOS mobile devices. For my website, I have created flippable profile cards that, when clicked on, will flip to display information at the back of the card.

My flipping function works on all devices(even mobile devices!), expect for mobile IOS devices. For some reason, the card's z index does not work, and the back of the card is shown, even when the card is supposed to display the front.

For reference: Here is the card when it is supposed to show the front: Front Side

And here is the card when it is supposed to show the back: Back Side

Please note that this only happens on mobile IOS devices, and works on every other device. I'm not sure what's going on here, and I have tried countless times fiddling with the perspective, the z-index, and changing the transform: to a webkit transform. However, none of these solutions have worked. Anyone have any ideas?

Here is the website if you want to dig into the HTML and CSS: https://outputsuccesseducation.org/

And here is the code for the profile cards in CSS specifically:

.label{
    
    top: 50%;
    left: 50%;
    width:280px;
    height: 10px;
    transform-style:preserve-3d;
    cursor: pointer;

}

.flip-card {
    
    position: relative;
    width: 100%;
    height: 80%;
    margin-bottom: 600px;
    transform-style: preserve-3d;
    transition: all 0.5s ease-in-out;
    border-radius: 25px 25px 25px 25px;
   
}

.flip-card .front{
 
    position: absolute !important;
    width: 100%;
    height: 100%;
    text-align: center;
    background: #AAC3B2;
    backface-visibility: hidden; 
  z-index: 3;
    border-radius: 25px 25px 25px 25px; 
}
.flip-card .back {
    position: absolute !important;
    width: 100%;
    height: 100%;
    text-align: center;
    background: #AAC3B2;
      z-index: 1;
    backface-visibility: hidden; 

    border-radius: 25px 25px 25px 25px; 
 
}


.flip-card .back {
    -webkit-transform: rotate(179.9deg);
    transform: rotateX(179.9deg);
    color: #000;
    background: #A4C3B2; 
    

}




:checked + .flip-card {
     -webkit-transform: rotate(179.9deg);
    transform: rotateX(179.9deg);
    
}



label:hover :checked + .flip-card {

    box-shadow: 0 20px 20px rgba(0, 0, 0, 0.2);
}

PS: This is one of the first times I've posted a question on Stack Overflow. If there is anything I can improve on, please let me know. I've heard that Stack Overflow users are ruthless when it comes to not following the guidelines to asking questions, so let me know if there was anything I needed to touch upon.