Add page numbers at the bottom in the middle.  Keep everything else the exactly the same.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Root Cause Analysis Document</title>
<style>
  body {
    font-family: Arial, sans-serif;
    margin: 2rem;
    background: #f9f9f9;
    color: #333;
  }
  h1 {
    color: #004080;
  }
  h4 {
    color: #004080;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
  }
  .container {
    max-width: 900px;
    margin: auto;
    background: white;
    padding: 2rem 3rem;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    position: relative;
  }
  .date-container {
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    font-weight: bold;
    color: #333;
  }
  section {
    margin-bottom: 2rem;
  }
  .timeline {
    border-left: 3px solid #004080;
    padding-left: 1rem;
  }
  .timeline-item {
    margin-bottom: 1rem;
    position: relative;
  }
  .timeline-item::before {
    content: '';
    position: absolute;
    left: -10px;
    top: 5px;
    width: 10px;
    height: 10px;
    background: #004080;
    border-radius: 50%;
  }
  button {
    background-color: #004080;
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    cursor: pointer;
    border-radius: 4px;
  }
  button:hover {
    background-color: #003060;
  }
  .form-group {
    margin-bottom: 1rem;
  }
  .form-group label {
    display: block;
    margin-bottom: 0.5rem;
  }
  .form-group textarea, .form-group input {
    width: 100%;
    padding: 0.5rem;
    box-sizing: border-box;
  }
  .footer {
    margin-top: 2rem;
    border-top: 1px solid #ddd;
    padding-top: 1rem;
    text-align: left;
  }
  .confidential {
    color: #aaa;
    font-size: 0.9rem;
    font-style: italic;
  }
</style>
</head>
<body>

<div class="container" id="rca-document">
  <div class="date-container" id="current-date"></div>

  <div class="form-group">
    <label for="title">Title</label>
    <input type="text" id="title" placeholder="Enter document title here">
  </div>

  <div class="form-group">
    <label for="event-summary">Event Summary</label>
    <textarea id="event-summary" rows="4" placeholder="Enter event summary here"></textarea>
  </div>

  <div class="form-group">
    <label for="resolution-summary">Resolution Summary</label>
    <textarea id="resolution-summary" rows="4" placeholder="Enter resolution summary here"></textarea>
  </div>

  <div class="form-group">
    <label for="duration">Duration</label>
    <textarea id="duration" rows="4" placeholder="Enter duration details here"></textarea>
  </div>

  <div class="form-group">
    <label for="event-timeline">Event Timeline</label>
    <textarea id="event-timeline" rows="6" placeholder="Enter event timeline here"></textarea>
  </div>

  <div class="form-group">
    <label for="root-cause">Root Cause</label>
    <textarea id="root-cause" rows="4" placeholder="Enter root cause here"></textarea>
  </div>

  <div class="form-group">
    <label for="remediation-actions">Remediation Actions Taken</label>
    <textarea id="remediation-actions" rows="6" placeholder="Enter remediation actions taken here"></textarea>
  </div>

  <div style="text-align:center; margin-top: 2rem;">
    <button id="download-pdf">Download as PDF</button>
  </div>

  <div class="footer">
    <div class="confidential">confidential</div>
  </div>
</div>

<!-- Include html2pdf.js from CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
<script>
  // Add current date to the document
  window.onload = function() {
    const today = new Date();
    const options = { year: 'numeric', month: 'long', day: 'numeric' };
    document.getElementById('current-date').textContent = today.toLocaleDateString(undefined, options);
  };

  document.getElementById('download-pdf').addEventListener('click', () => {
    const title = document.getElementById('title').value;
    const eventSummary = document.getElementById('event-summary').value;
    const resolutionSummary = document.getElementById('resolution-summary').value;
    const duration = document.getElementById('duration').value;
    const eventTimeline = document.getElementById('event-timeline').value;
    const rootCause = document.getElementById('root-cause').value;
    const remediationActions = document.getElementById('remediation-actions').value;
    const currentDate = document.getElementById('current-date').textContent;

    document.getElementById('rca-document').innerHTML = `
      <div class="date-container">${currentDate}</div>
      <h1>${title}</h1>
      <section>
        <h4>Event Summary</h4>
        <p>${eventSummary}</p>
      </section>
      <section>
        <h4>Resolution Summary</h4>
        <p>${resolutionSummary}</p>
      </section>
      <section>
        <h4>Duration</h4>
        <p>${duration}</p>
      </section>
      <section>
        <h4>Event Timeline</h4>
        <div class="timeline">${eventTimeline.split('\n').map(item => `<div class="timeline-item">${item}</div>`).join('')}</div>
      </section>
      <section>
        <h4>Root Cause</h4>
        <p>${rootCause}</p>
      </section>
      <section>
        <h4>Remediation Actions Taken</h4>
        <p>${remediationActions}</p>
      </section>
      <div class="footer">
        <div class="confidential" style="color: #aaa; font-size: 0.9rem; font-style: italic;">confidential</div>
      </div>
    `;

    const element = document.getElementById('rca-document');
    const opt = {
      margin: 0.5,
      filename: 'Root_Cause_Analysis_Document.pdf',
      image: { type: 'jpeg', quality: 0.98 },
      html2canvas: { scale: 2 },
      jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
    };
    html2pdf().set(opt).from(element).save();
  });
</script>

</body>
</html>