<div class="container-fluid mb-5">
    <div class="row pb-3">
        <div class="col-md-3 col-sm-12 offset-md-1">
            <h3 class="wln-text-purple package-header">CONTACT US</h3>
            <hr style="border: solid 2px #d66325; "/>
        </div>
    </div>        
    <div class="row pt-2">
            <div class="col-md-5 col-sm-12 offset-md-1">
                <p class='lead pb-3'>Leave us a message.</p>
                <form action="message-confirmation/" class="sendMessage" method="POST" autocomplete="off">
                    <div class="input-group mb-2">
                        <div class="input-group-prepend">
                            <span class="input-group-text"><i class="fas fa-user"></i></span>
                        </div>
                        <input type="text" class="form-control" placeholder="Name" name="name" required />
                    </div>
                    <div class="input-group mb-2">
                        <div class="input-group-prepend">
                            <span class="input-group-text"><i class="fas fa-at"></i></span>
                        </div>
                        <input type="email" class="form-control" placeholder="Email" name="email" required />
                    </div>
                    <div class="input-group mb-2">
                        <div class="input-group-prepend">
                            <span class="input-group-text"><i class="fas fa-pencil-alt"></i></span>
                        </div>
                        <input type="text" class="form-control" placeholder="Subject" name="subject" required />
                    </div>
                    <div class="input-group mb-2">
                        <div class="input-group-prepend">
                            <span class="input-group-text"><i class="fas fa-file-alt"></i></span>
                        </div>
                        <textarea type="text" class="form-control" placeholder="Message" rows="7"
                            name="message"></textarea>
                    </div>
                    <h5 class="my-2">Please Enter the Captcha Text</h5>
                    <div class="input-group mb-2"> 
                        <img style="-webkit-user-select: none" src="captcha.php" alt="CAPTCHA" class="img-fluid">
                    </div>
                    <div class="input-group mb-2">
                        <input type="text" id="captcha" class="form-control" name="captcha_challenge" pattern="[A-Z]{1,6}">
                    </div>
                    <button type="submit" class="btn btn-outline-secondary mb-2 rounded-0" name="send">Submit</button>
                </form>
            </div>
            <div class="col-md-6 col-sm-12">
                <div class="embed-responsive embed-responsive-4by3 shadow">
                    <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d14129.551311046474!2d85.3492014!3d27.7053095!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x3e74cd776b400fda!2sWish+List+Nepal+Tours+%26+Travels!5e0!3m2!1sen!2snp!4v1566221135908!5m2!1sen!2snp" 
                    width="100%" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
                </div>
            </div>
        </div>
</div>
<script type="text/javascript">
    var refreshButton = document.querySelector(".refresh-captcha");
    refreshButton.onclick = function() {
        document.querySelector(".captcha-image").src = 'captcha.php?' + Date.now();
    }
</script>