Why is my custom liquid section not working on Safari?

[Prarthana]

hi

URGENT HELP PLEASE!!!

my store is- https://everybodies.com/

password- relisi

theme- dawn

I added a custom liquid section on my store. the code seems to work on google chrome but not on safari. can you please help??

the code is-

WHEY PROTEIN
Contains whey protein isolate (milk), natural flavouring, thickener (xanthan gum), sweetener (steviol glycosides).

WHEY PROTEIN
Contains whey protein isolate (milk), natural flavouring, thickener (xanthan gum), sweetener (steviol glycosides).

WHEY PROTEIN
Contains whey protein isolate (milk), natural flavouring, thickener (xanthan gum), sweetener (steviol glycosides).

html, body { overflow-x: hidden !important; }

[type=radio] {
display: none;
}

#slider {
height: 100vh;
position: relative;
perspective: 1000px;
transform-style: preserve-3d;
}

#slider .team-card {
margin: auto;
width: 50%;
height: auto;
position: absolute;
left: 0; right: 0;
cursor: pointer;
transition: transform 0.4s ease;
background-size: contain;
background-position: center center;
background-repeat: no-repeat;
box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
border-radius: 10px;
}

#s1:checked ~ #slide3, #s2:checked ~ #slide1,
#s3:checked ~ #slide2 {
transform: translate3d(-80%,0,-300px);
}

#s1:checked ~ #slide1, #s2:checked ~ #slide2,
#s3:checked ~ #slide3 {
transform: translate3d(0,0,0);
}

#s1:checked ~ #slide2, #s2:checked ~ #slide3,
#s3:checked ~ #slide1 {
transform: translate3d(80%,0,-300px);
}

.team-card img {
width: 100%;
height: 500px;
object-fit: contain;
object-position: center;
border-radius: 10px 10px 0 0;
}

.team-content {
padding: 30px;
background-color: #e1e6e9;
border-radius: 0 0 10px 10px;
}

.team-content p {
text-align: center;
}

@media (max-width: 500px) {

#slider .team-card {
margin: auto;
width: 70%;
height: auto;
position: absolute;
left: 0; right: 0;
cursor: pointer;
transition: transform 0.4s ease;
background-size: contain;
background-position: center center;
background-repeat: no-repeat;
}

.team-card img {
height: 400px;
}

.team-content {
padding: 15px;
}

.team-content p {
font-size: 12px;
margin-bottom: 10px;
}

#s1:checked ~ #slide3, #s2:checked ~ #slide1,
#s3:checked ~ #slide2 {
transform: translate3d(-55%,0,-400px);
}

#s1:checked ~ #slide1, #s2:checked ~ #slide2,
#s3:checked ~ #slide3 {
transform: translate3d(0,0,100px);
}

#s1:checked ~ #slide2, #s2:checked ~ #slide3,
#s3:checked ~ #slide1 {
transform: translate3d(55%,0,-400px);
}

}

[BSS-Commerce]

Hi @Prarthana

We’ve carefully checked your website and found your problem quite complicated. So we suggest hiring a developer.

It’s what we can help with an optimal solution. If you need help from our expert, kindly share your request with us via Shopify experts.

We will check it and give you a detailed solution. We’re looking forward to working with you.