<?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"
    />

    <!-- Recoleta Alt Font -->
    <link rel="stylesheet" href="assets/css/fonts.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">
        <!-- Wrapp -->
        <div class="wrapper">
          <div class="Trim-vote">
            <!-- Header -->
            <header>
              <!-- main heading -->
              <h1 class="main-heading">
                How Far in advance do you usally book Accommodation?
              </h1>
            </header>

            <!-- step -->
            <section class="step">
              <!-- vote Form -->
              <form class="stepWrapp">
                <div class="radioField FadeReveal">
                  <input type="radio" name="op1" value="With 23th before" />
                  <label>With 23th before<span>20%</span></label>
                  <div class="fill"></div>
                </div>
                <div class="radioField FadeReveal delay-100ms">
                  <input type="radio" name="op1" value="1-3 Days Before" />
                  <label>1-3 Days Before<span>45%</span></label>
                  <div class="fill"></div>
                </div>
                <div class="radioField FadeReveal delay-200ms">
                  <input type="radio" name="op1" value="1-3 weeks Before" />
                  <label>1-3 weeks Before<span>60%</span></label>
                  <div class="fill"></div>
                </div>
                <div class="radioField FadeReveal delay-300ms">
                  <input type="radio" name="op1" value="Order a month before" />
                  <label>Order a month before<span>40%</span></label>
                  <div class="fill"></div>
                </div>
              </form>
              <!-- send button -->
              <button class="hoverBtn voteBtn" id="vote">
                <span>Vote Now</span>
              </button>
              <button class="hoverBtn voteBtn" id="sub">
                <span>Vote Now</span>
              </button>
            </section>
          </div>
        </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>
