label inside image -html and Css

Question

i try to fix my html page to add data from input and loc inside the image; it worked on the desktop, but the label and position mixed together when i opened it on my phone. How do I fix this?

i tried to change the font size in mobile menu, but nothing worked.

this is my code. i try everything but it does not work Help me, please

  document.addEventListener("DOMContentLoaded", function () {
        const showImageBtn = document.getElementById("showImageBtn");
        const hiddenImage = document.getElementById("hidden-div");

        showImageBtn.addEventListener("click", function (event) {
          event.preventDefault(); // Prevent the form from submitting

          const arNameInput = document.getElementById("ArName").value;
          const arPositionInput = document.getElementById("position-ar").value;
          const phoneEnInput = document.getElementById("phone-en").value;
          const emailEnInput = document.getElementById("email-en").value;
          const enNameInput = document.getElementById("EnName").value;
          const enPositionInput = document.getElementById("position-en").value;

          const arNameLabel = document.getElementById("ArNamelbl");
          const arPosLabel = document.getElementById("Arpos");
          const phoneLabel = document.getElementById("phoneNumber");
          const emailLabel = document.getElementById("email");
          const enNameLabel = document.getElementById("EnNamelbl");
          const enPosLabel = document.getElementById("Enpos");
          const phoneEnLabel = document.getElementById("phoneEn");
          const emailEnLabel = document.getElementById("emailEn");

          arNameLabel.textContent = arNameInput;
          arPosLabel.textContent = arPositionInput;
          phoneLabel.textContent = phoneEnInput;
          emailLabel.textContent = emailEnInput;
          enNameLabel.textContent = enNameInput;
          enPosLabel.textContent = enPositionInput;
          phoneEnLabel.textContent = phoneEnInput;
          emailEnLabel.textContent = emailEnInput;

          hiddenImage.style.display = "block";
        });
      });

 * {
      margin: 0;
      padding: 0;
    }

    body {
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color: white;
      background-image: url(bg.png);
      background-color: black;
      background-repeat: repeat;
      background-size: cover;
      background-position: center;
      width: 100%;
      height: 100vh;
      background-attachment: fixed;
    }

    .container-main {
      width: 800px;
      margin-left: auto;
      margin-right: auto;
      text-align: center; /* Center-align the content */
      padding: 20px; /* Add some spacing around the content */
    }

    .logo-pic {
      margin-bottom: 20px; /* Add some space between image and text */
    }

    img {
      width: 250px;
      height: 140px;
      display: block;
      margin: 0 auto;
    }

    .container {
      width: 560px;
      background: rgba(199, 207, 207, 0.8);
      box-shadow: 0 0 8px rgb(250, 250, 250, 0.6);
      display: flex; /* Add flex display */
      flex-direction: column; /* Stack items vertically */
      justify-content: center; /* Center items vertically */
      align-items: center; /* Center items horizontally */
      margin: 0 auto; /* Center the container horizontally */
      padding: 20px; /* Add some spacing */
    }

    .container form {
      width: 100%;
      text-align: center; /* Center the form content */
      padding: 25px 20px;
    }

    form h1 {
      padding: 10px 0;
    }

    form .id {
      position: relative;
    }

    form input {
      width: 50%;
      height: 30px;
      margin: 4px 0;
      border: 1px solid#5c5c5c;
      border-radius: 3px;
      background: #ffffff;
      padding: 0 15px;
      font-size: 20px;
    }

    form textarea {
      padding: 5px 15px;
      width: 90%;
      height: 100px;
      margin: 4px 0;
      border: 1px solid#5c5c5c;
      border-radius: 3px;
      background: #181717;
      font-size: 20px;
    }
    form .rounded-button {
  background-color: #de6d89; /* Set your desired button background color */
  color: white;
  border: none;
  border-radius: 20px; /* Add rounded corners */
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  margin-top: 15px; /* Add some space between the inputs and the button */
  transition: background-color 0.3s ease; /* Add a smooth color transition */
}

form .rounded-button:hover {
  background-color: #2980b9; /* Darken the color on hover */
}

   @media screen and (max-width: 600px) {
  .container-main {
    width: 90%; /* Full width on smaller screens */
    padding: 10px; /* Adjust the spacing around the main content */
  }

  img {
    width: 90%; /* Ensure the logo is fully responsive */
    max-width: 450px; /* Set a max-width to maintain proportions */
    height: auto; /* Let the image height adjust automatically */
  }

  .container {
    width: 90%; /* 90% width on smaller screens */
    margin: 20px auto; /* Increase the top and bottom margin for breathing space */
    padding: 10px; /* Adjust padding */
  }

  form input,
  form textarea {
    width: 90%; /* Full width inputs on smaller screens */
    box-sizing: border-box; /* Ensure padding and border are included in total width */
  }
  
 
}
.hiddenImage{
  width: 100%;
  height: 100%;
}
.fristImage{
  position: relative;
}
.secImage{
  position: relative;
}

  #ArNamelbl {
    color: #7A7E82;
    position: absolute;
    top: 40%; /* Adjust as needed */
    left: 50%;
    font-size: xx-large;
    transform: translate(-10%, -50%);
}

#Arpos {
  color: #7A7E82;
    position: absolute;
    top: 50%; /* Adjust as needed */
    left: 50%;
    font-size: large;
    transform: translate(30%, -50%); /* Center the label both horizontally and vertically */
  }

#phoneNumber {
    color: #7A7E82;
    position: absolute;
    top: 60%; /* Adjust as needed */
    left: 50%;
    font-size: medium;
    transform: translate(-30%, -50%);
}

#email {
    color: #7A7E82;
    position: absolute;
    top: 63%; /* Adjust as needed */
    left: 50%;
    font-size: medium;
    transform: translate(-10%, -10%);
}

#EnNamelbl {
  color: #7A7E82;
    position: absolute;
    top: 40%; /* Adjust as needed */
    left: 50%;
    font-size: xx-large;
    transform: translate(-100%, -50%);
}

#Enpos {
  color: #7A7E82;
    position: absolute;
    top: 50%; /* Adjust as needed */
    left: 50%;
    font-size: large;
    transform: translate(-100%, -50%); /* Center the label both horizontally and vertically */
}

#phoneEn {
  color: #7A7E82;
    position: absolute;
    top: 60%; /* Adjust as needed */
    left: 50%;
    font-size: medium;
    transform: translate(-250%, -50%);
}

#emailEn {
  color: #7A7E82;
  position: absolute;
  top: 67%; /* Adjust as needed */
  left: 50%;
  font-size: medium;
  transform: translate(-110%, -50%);
}

    <div class="main">
      <div class="container-main">
        <div class="container">
          <div class="logo-pic">
            <img src="logo-naqaba.png" alt="naqhaba" width="450" height="150" />
          </div>
          <h2>ننتمنى لك عامًا مليئًا بالسعادة والصحة والازدهار</h2>
          <small>كل عام وانتم بخير</small>
          <form>
            <div class="id">
              <input
                type="text"
                id="ArName"
                placeholder="الاسم كامل"
                name="first-name-ar"
              /><br />
              <!-- Your other input fields -->
              <input
                type="text"
                id="position-ar"
                placeholder="المنصب"
                name="position-ar"
              /><br />
              <input
                type="tel"
                id="phone-en"
                placeholder="رقم الهاتف"
                name="phone-en"
              /><br />
              <input
                type="email"
                id="email-en"
                placeholder="الايميل"
                name="email-en"
              /><br />
              <input
                type="text"
                id="EnName"
                placeholder="full Name"
                name="EnName"
              /><br />
              <input
                type="text"
                id="position-en"
                placeholder="Position"
                name="position-en"
              /><br />

              <button type="submit" class="rounded-button" id="print">
                حفظ البطاقة
              </button>
              <button type="submit" class="rounded-button" id="showImageBtn">
                معاينة البطاقة
              </button>
            </div>
          </form>
          <div
            id="hidden-div"
            style="display: none; font: Din-next-light; color: #7a7e82"
          >
            <div class="fristImage">
              <img class="hiddenImage" src="newCard.png" alt="card1" />
              <label id="ArNamelbl"></label><br />
              <label id="Arpos"></label>
              <label id="phoneNumber"></label>
              <label id="email"></label>
            </div>
            <br />
            <div class="secImage">
              <img class="hiddenImage" src="newCard2.png" alt="card2" />
              <label id="EnNamelbl"></label><br />
              <label id="Enpos"></label>
              <label id="phoneEn"></label>
              <label id="emailEn"></label>
            </div>
          </div>
        </div>
      </div>
    </div>