<style>
      .center-countdown {
        display: flex;
        justify-content: center;
        width: 100%;
        margin: 25px 0 -25px;
      }
      .countdown-container {
        display: flex;
        width: 100%;
        max-width: 70%;
        justify-content: space-between;
        padding: 20px;
        background-color: #fff;
        border-radius: 4px;
        box-shadow: 0 0 9px rgba(0, 0, 0, 0.1);
      }
      .time-unit {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background-color: rgb(29 54 95);
        border: 5px solid rgba(255, 255, 255, 0.3);
        width: 140px;
        height: 140px;
        border-radius: 99px;
        margin: 10px;
        color: #fff;
      }
      .time-unit span:first-child {
        font-size: 2.5em;
        margin-bottom: 10px;
      }
      .time-unit span:last-child {
        text-transform: uppercase;
      }
      @media (max-width: 800px) {
        .countdown-container {
          max-width: 90%;
        }
        .time-unit {
          font-size: 0.8em;
          width: 100px;
          height: 100px;
        }
      }
    </style>
    <div class="center-countdown">
      <div class="countdown-container">
        <div class="time-unit">
          <span id="days"></span>
          <span>Days</span>
        </div>
        <div class="time-unit">
          <span id="hours"></span>
          <span>Hours</span>
        </div>
        <div class="time-unit">
          <span id="minutes"></span>
          <span>Minutes</span>
        </div>
        <div class="time-unit">
          <span id="seconds"></span>
          <span>Seconds</span>
        </div>
      </div>
    </div>

    <script>
      const countdownTimer = (targetTimestamp) => {
        const daysElement = document.getElementById("days");
        const hoursElement = document.getElementById("hours");
        const minutesElement = document.getElementById("minutes");
        const secondsElement = document.getElementById("seconds");

        function updateCountdown() {
          const now = Date.now();
          const difference = targetTimestamp - now;

          if (difference <= 0) {
            daysElement.textContent = "00";
            hoursElement.textContent = "00";
            minutesElement.textContent = "00";
            secondsElement.textContent = "00";
            return;
          }

          const days = Math.floor(difference / (1000 * 60 * 60 * 24));
          const hours = Math.floor(
            (difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
          );
          const minutes = Math.floor(
            (difference % (1000 * 60 * 60)) / (1000 * 60)
          );
          const seconds = Math.floor((difference % (1000 * 60)) / 1000);

          daysElement.textContent = String(days).padStart(2, "0");
          hoursElement.textContent = String(hours).padStart(2, "0");
          minutesElement.textContent = String(minutes).padStart(2, "0");
          secondsElement.textContent = String(seconds).padStart(2, "0");

          setTimeout(updateCountdown, 1000);
        }

        updateCountdown();
      };

      countdownTimer(new Date("2024-10-16T14:00:00"));
    </script>