<div class="modal fade" id="whatsapp" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <div class="modal-title">Message on WhatsApp</div>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form method="post" target="_blank" id="whatsapp_form">
                    <span class="text-danger wht_error_message"></span>
                    <span class="text-success wht_success_message"></span>
                    <div class="row">
                        <div class="col-xxl-12 col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                            <div class="form-group">
                                <input class="form-control" type="text" name="name" placeholder="Full Name*" value="" onkeyup="validateOnlyTextField(this)"
                                    required>
                            </div>
                        </div>
                        <div class="col-xxl-12 col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                            <div class="form-group">
                                <input type="hidden" name="countryName" class="countryName" value="">

                                <input type="hidden" name="code" class="code" value="">
                                <input class="form-control telePhone" type="tel" name="mobile" value="" maxlength="10" minlength="10" onkeyup="this.value=this.value.replace(/[^0-9]/g,'')"
                                    placeholder="Mobile Number*" required>
                            </div>
                        </div>
                        <div class="col-xxl-12 col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                            <button type="submit" class="readMore_2" name="whatsapp_submit" title="Submit">Submit <span class="btn_caret"><svg
                                        xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                                        viewBox="0 0 16 16">
                                        <path
                                            d="m12.14 8.753-5.482 4.796c-.646.566-1.658.106-1.658-.753V3.204a1 1 0 0 1 1.659-.753l5.48 4.796a1 1 0 0 1 0 1.506z">
                                        </path>
                                    </svg></span></button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <div class="modal-title">Request a Quote</div>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="enq_pop_form1" method="post">
                    <div id="enq_pop_up"></div>
                    <!-- <script src="https://www.google.com/recaptcha/api.js" async defer></script> -->
                    <div class="form-group">
                        <input class="form-control" type="text" name="name" onkeyup="validateOnlyTextField(this)" placeholder="Full Name*" value="" required>
                    </div>

                    <div class="form-group">
                        <input class="form-control" type="email" name="email" value="" placeholder="Email ID*" required>
                    </div>

                    <div class="form-group">
                         <input type="hidden" name="countryName" class="countryName" value="">

                        <input type="hidden" name="code" class="code" value="">
                        <input class="form-control telePhone" type="tel" name="mobile" value="" placeholder="Mobile Number*"
                            maxlength="10" minlength="10" onkeyup="this.value=this.value.replace(/[^0-9]/g,'')" required>
                    </div>

                    <div class="form-group">
                        <input class="form-control" type="text" name="location" onkeyup="validateOnlyTextField(this)" value="" placeholder="Your Location*"
                            required>
                    </div>

                    <div class="form-group">
                        <textarea class="form-control" name="message" placeholder="Your Message*" required></textarea>
                    </div>

                    <div class="form-group" style="margin-bottom: 0;">
                        <div class="g-recaptcha" data-sitekey="<?= site_key; ?>"></div>
                    </div>

                    <button type="submit" class="readMore_2" name="submit_enq" title="Submit">Submit <span class="btn_caret"><svg
                                xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                                viewBox="0 0 16 16">
                                <path
                                    d="m12.14 8.753-5.482 4.796c-.646.566-1.658.106-1.658-.753V3.204a1 1 0 0 1 1.659-.753l5.48 4.796a1 1 0 0 1 0 1.506z">
                                </path>
                            </svg></span></button>
                </form>
            </div>
        </div>
    </div>
</div>


<!-- Product Popup -->
<div class="modal fade" id="productID" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <div class="modal-title">Send Enquiry</div>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-xxl-7 col-xl-7 col-lg-7 col-md-12 col-sm-12 col-12">
                        <div class="product_popup">
                            <div class="product_popup_image">
                                <img class="catImg" src="<?=site_url;?>/designer/images/product/Carbon-Thrust-Bearings.jpg" alt="<?= COMPANY_NAME; ?>"
                                    title="<?= COMPANY_NAME; ?>">
                            </div>
                            <div class="popupTitle mb-2 catName"><?= COMPANY_NAME; ?></div>
                        </div>
                    </div>
                    <div class="col-xxl-5 col-xl-5 col-lg-5 col-md-12 col-sm-12 col-12">

                        <form name="contact-form" method="post" id="product_pop_form">
                            <div id="cat_pop_up"></div>
                            <!-- <script src="https://www.google.com/recaptcha/api.js" async defer></script> -->
                            <div class="form-group">
                                <input class="form-control" type="text" name="name" placeholder="Full Name*" onkeyup="validateOnlyTextField(this)" value=""
                                    pattern="[a-z A-Z]+" required>
                            </div>

                            <div class="form-group">
                                <input class="form-control" type="email" name="email" placeholder=" Email ID*" value=""
                                    required>
                            </div>

                            <div class="form-group">
                                <input type="hidden" name="countryName" class="countryName" value="">

                                <input type="hidden" name="code" class="code" value="">
                                <input class="form-control telePhone" type="tel" name="mobile" placeholder=" Phone No*" value="" maxlength="10" minlength="10" onkeyup="this.value=this.value.replace(/[^0-9]/g,'')"
                                    required>
                            </div>

                            <div class="form-group">
                                <input class="form-control" type="text" name="location" onkeyup="validateOnlyTextField(this)" placeholder="Location*" value=""
                                    pattern="[a-z A-Z]+" required>
                            </div>

                              <div class="form-group">
                                <input class="form-control" type="tel" name="quantity"  maxlength="7" onkeyup="this.value=this.value.replace(/[^0-9]/g,'')" placeholder="Order Quantity*" value="" required>
                            </div>
                            <div class="form-group">
                                <textarea class="form-control" name="message" placeholder=" Message*"
                                    required></textarea>
                            </div>

                            <div class="form-group" style="margin-bottom: 0;">
                                <div class="g-recaptcha" data-sitekey="<?= site_key; ?>"></div>
                            </div>

                            <div class="form-group">
                                <button type="submit" class="readMore_2" name="submit_cat_popup" title="Submit">Submit <span class="btn_caret"><svg
                                            xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                            fill="currentColor" viewBox="0 0 16 16">
                                            <path
                                                d="m12.14 8.753-5.482 4.796c-.646.566-1.658.106-1.658-.753V3.204a1 1 0 0 1 1.659-.753l5.48 4.796a1 1 0 0 1 0 1.506z">
                                            </path>
                                        </svg></span></button>
                            </div>
                        </form>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="callback" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <div class="modal-title">Get Callback Quickly</div>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-xxl-5 col-xl-5 col-lg-5 col-md-12 col-sm-12 col-12">
                        <div class="product_popup">
                            <div class="product_popup_image">
                                <img class="catImg" src="<?=site_url;?>/designer/images/product/Carbon-Thrust-Bearings.jpg" alt="<?=$admin_res['companyName'];?>" title="<?=$admin_res['companyName'];?>">
                            </div>
                            <div class="fs-6 mb-2 catName"> Product Heading One</div>
                        </div>
                    </div>
                    <div class="col-xxl-7 col-xl-7 col-lg-7 col-md-12 col-sm-12 col-12">

                        <form name="contact-form" method="post" id="callback_form">
                            <div id="cpop_up"></div>
                            <div class="form-group">
                                <input class="form-control" type="text" name="name" placeholder="Full Name*" value=""
                                    pattern="[a-z A-Z]+" required="">
                            </div>


                            <div class="form-group">
                                <input type="hidden" name="countryName" class="countryName" value="">

                                <input type="hidden" name="code" class="code" value="">
                            <input class="form-control telePhone" type="tel" name="mobile" placeholder=" Phone No*" value="" maxlength="10" minlength="10" onkeyup="this.value=this.value.replace(/[^0-9]/g,'')" required>
                            </div>
                            <p>We will contact you on this number</p>

                            <div class="form-group">
                                <button type="submit" class="readMore_2" name="submit_callback" title="Submit"><span>Submit</span></button>
                            </div>
                        </form>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>