Heading text getting cut only on iPhone browsers(both on Safari and Chrome)

I am using Next Js and Tailwind CSS to build a simple webpage. The main text in the hero section is being cut only on the iPhone browsers, both Safari & Chrome. Here's my code:

<div className="text-white flex flex-col items-center h-screen justify-center md:items-start px-5 md:pl-20 space-y-16 md:space-y-8">
    <h1 className="font-semibold text-4xl md:text-6xl">
      Software Development with <span className="font-extrabold text-transparent bg-clip-text bg-gradient-to-br from-ab-secondary-shade-1 to-ab-tertiary">Web 3.0 Specialisation</span>
    </h1>
</div>

The Specialisation text is being cut as shown below. I tried adding meta viewport tag too in the _app.js in Next js but it didn't work out.