This appears to be a collision with your popover box.
I will ask the moderators to splinter this with a link to the page in question, so that the CSS gurus (of which I am certainly not one) can give better advice.
As @m_hutley said its an invisible popover that is blocking those first couple of inputs.
However it seems to be an html issue as you have copied the html for the popover directly into your page here.
<div class="alert alert-success displaynone">
<strong>Message Sent!</strong>
You will be directed to Payment Page. <a href="https://www.paypal.com/cgi-bin...." class="alert-link">Click here</a> to make a payment.
</div>
</form>
</div>
</div>
<div class="popover fade" style="top: 357px; left: 521.109px; display: block;">
<div class="arrow"></div>
<div class="popover-inner">
<h3 class="popover-title"></h3>
<div class="popover-content"><p>Enter your family name as the family name appears on your passport under the Family Name or Surname field.</p>
</div>
</div>
</div>
<!-- 1 -->
<!-- Modal Data starts here -->
The popover should be generated dynamically from the information in the span I believe.
<span rel="popover" data-placement="bottom" data-content="Enter your family name as the family name appears on your passport under the Family Name or Surname field." data-original-title="" style="cursor: pointer;">?</span>
I would remove the following html and re-test.
<div class="popover fade" style="top: 357px; left: 521.109px; display: block;">
<div class="arrow"></div>
<div class="popover-inner">
<h3 class="popover-title"></h3>
<div class="popover-content"><p>Enter your family name as the family name appears on your passport under the Family Name or Surname field.</p>
</div>
</div>
</div>
<!-- 1 -->
But If you fill nothing the same modal POP UP appears stating unfilled fields to be filled, but that modal despite using the same CSS appears at the top, in fact, it appears as if it submerged in the top border. why the anomaly?
I hovered my mouse over where the cursor wasnt a text input I bar, right clicked, and Inspected the thing my mouse pointer was hovering over at the time. Took me straight to it.
Sir, where did you see that rule as I checked both in my style.css and shortcode.php and I could not find that. I even could not find that in script.js.
Structure of all the GIF’s are the same here, but then why one is ana anamoly. If we remove translate CSS part than error modal seems to fit well, but then others such as more info, one deviates.
You want the transform but you need to get rid of the margin as the margin will only work on elements of the exact same size. They are conflicting rules as they are both effectively doing the same thing.
The styles are all there to be seen in the devtools window you just need to highlight the modal and all relevant styles are listed. Just scroll down to view all the sources. The css file they come from are also listed.
It seems you just need a bit of practice with devtools to save you time
If you look at the 2 screenshoits I have highligted the areas in red for the 2 modals so that you can see the negative margin is present on one rule and not the other.
Alternatively you could just remove the margin from this rule.
Of course you would still need the margin:0 in the.modal.fade.in rule because some of your modals are within the context of that universal selector rule I already mentioned.