Centering not working on iPhone & iPad

[PHOE999]

Hi,
I have a problem with centering the img. Everything works fine on my computer and Android phone, but on my iOS phone and iPad, centering the image doesn't work.
Screenshots attached.

Thanks in advance!

Code:

<style>
#rotatingText {
  animation-name: rotate-circle;
  animation-duration: 22s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes rotate-circle {
  to {
    transform: rotate(1turn);
  }
}

 .text {
      font-weight: 300;
      letter-spacing: 6px;
      text-transform: uppercase;
      font-family: 'Outfit';
      font-size: 14px;
      fill: white;
       text-shadow: white 1px 0 10px;;
    }

    .main {
      display: grid;
      align-items: center;
      justify-items: center;
    
    }
    
     .main img {
      position: absolute;
    }
    
    .main img {
      position: absolute;
      border-radius: 500px;
      z-index: 0;
    }
    
    
    
  </style>
 
  <a target=”_blank” href="https://9ypjmq3pbhg.typeform.com/to/vz0yqohg">
  <div class="main">
<img src="https://polygonstudio.eu/wp-content/uploads/2024/06/imgrotate-1.png" width="120" height="50">

<svg id="rotatingText" viewBox="0 0 200 200" width="200" height="200">
  <defs>
    <path id="circle" d="M 100, 100
            m -75, 0
            a 75, 75 0 1, 0 150, 0
            a 75, 75 0 1, 0 -150, 0
            ">
    </path>
  </defs>
  <text width="400">
    <textPath alignment-baseline="top" xlink:href="#circle" class="text">
      Wypełnij formularz - wypełnij formularz -
    </textPath>
  </text>
</svg>
  </div>
  </a>