<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Document</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="assets/css/bootstrap/bootstrap.min.css" />

    <!-- Font Awesome -->
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
    />

    <!-- Silent Reaction Font -->
    <link rel="stylesheet" href="assets/css/font.css" />

    <!-- Custom Styles -->
    <link rel="stylesheet" href="assets/css/style.css" />

    <!-- animation -->
    <link rel="stylesheet" href="assets/css/animation.css" />

    <!-- responsive -->
    <link rel="stylesheet" href="assets/css/responsive.css" />
  </head>

  <body>
    <main class="overflow-hidden">
      <div class="container position-relative">
        <!-- Wrapper -->
        <div class="wrapper slideTop">
          <!-- Ball1 -->
          <img
            src="assets/images/shapes/ball2.svg"
            alt="ball"
            class="ball ball2"
          />
          <!-- Ball2 -->

          <img
            src="assets/images/shapes/ball1.svg"
            alt="ball"
            class="ball ball1"
          />

          <!-- coming soon content -->
          <div class="comingSoon">
            <!-- heading -->
            <h1 class="mainHeading">Under Construction</h1>
            <p class="soonDesc">We are Still working on it</p>

            <!-- countdown Timer -->
            <div id="countdown">
              <div class="timeSingle">
                <div class="time" id="days">0</div>
                days
              </div>
              <div class="timeSingle">
                <div class="time" id="hours">0</div>
                Hours
              </div>
              <div class="timeSingle">
                <div class="time" id="minutes">0</div>
                Minutes
              </div>
              <div class="timeSingle border-0">
                <div class="time" id="seconds">0</div>
                Seconds
              </div>
            </div>

            <!-- form -->
            <form class="subscribe">
              <input
                type="email"
                name="email"
                id="email"
                placeholder="Enter Your Email"
              />
              <button><i class="fa-solid fa-chevron-right"></i></button>
            </form>

            <!-- social Icons -->
            <div class="socialIcon">
              <a href="#"><i class="fa-brands fa-twitter"></i></a>
              <a href="#"><i class="fa-brands fa-dribbble"></i></a>
              <a href="#"><i class="fa-brands fa-square-facebook"></i></a>
              <a href="#"><i class="fa-brands fa-instagram"></i></a>
              <a href="#"><i class="fa-brands fa-linkedin-in"></i></a>
            </div>
          </div>

          <!-- Ball 3 -->
          <img
            src="assets/images/shapes/ball3.svg"
            alt="ball"
            class="ball ball3"
          />
        </div>
      </div>
    </main>
    <!-- Bootstrap JS -->
    <script src="assets/js/bootstrap/bootstrap.min.js"></script>

    <!-- jQuery -->
    <script src="assets/js/jQuery/jquery-3.7.0.min.js"></script>

    <!-- Custom JS -->
    <script src="assets/js/custom.js"></script>
  </body>
</html>
