@model EmailModel
@{
    ViewBag.Title = "Contact";
    ViewBag.MetaKeywords = "Contact,maps,islamabad,hamadan,guidance,heights,academy,";
    ViewBag.MetaDescription = "Contact us and give us your most valuable feedback";
}

<div class="gdlr-core-pbf-wrapper " style="padding: 250px 0px 160px 0px;">
    <div class="gdlr-core-pbf-background-wrap">
        <div class="gdlr-core-pbf-background gdlr-core-parallax gdlr-core-js" style="background-image: url(../Content/images/contact-us.jpg) ;background-size: cover ;background-position: center ;" data-parallax-speed="0.3"></div>
    </div>
    <div class="gdlr-core-pbf-wrapper-content gdlr-core-js " data-gdlr-animation="fadeInUp" data-gdlr-animation-duration="600ms" data-gdlr-animation-offset="0.8">
        <div class="gdlr-core-pbf-wrapper-container clearfix gdlr-core-container">
            <div class="gdlr-core-pbf-element">
                <div class="gdlr-core-title-item gdlr-core-item-pdb clearfix  gdlr-core-center-align gdlr-core-title-item-caption-bottom gdlr-core-item-pdlr">
                    <div class="gdlr-core-title-item-title-wrap clearfix">
                        <h3 class="gdlr-core-title-item-title gdlr-core-skin-title " style="font-size: 75px ;font-weight: 700 ;letter-spacing: 0px ;text-transform: none ;color: #ffffff ;">Contact Us</h3>
                    </div><span class="gdlr-core-title-item-caption gdlr-core-info-font gdlr-core-skin-caption" style="font-size: 25px ;font-style: normal ;color: #f2f2f2 ;margin-top: 25px ;">Get Intouch</span>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="gdlr-core-pbf-wrapper " style="padding: 50px 0px 40px 0px;" data-skin="White Text">
    <div class="gdlr-core-pbf-background-wrap" style="background-color: #161616 ;"></div>
    <div class="gdlr-core-pbf-wrapper-content gdlr-core-js ">
        <div class="gdlr-core-pbf-wrapper-container clearfix gdlr-core-container">
            <div class="gdlr-core-pbf-column gdlr-core-column-20 gdlr-core-column-first">
                <div class="gdlr-core-pbf-column-content-margin gdlr-core-js " style="padding: 50px 20px 0px 20px;">
                    <div class="gdlr-core-pbf-column-content clearfix gdlr-core-js " data-gdlr-animation="fadeInUp" data-gdlr-animation-duration="600ms" data-gdlr-animation-offset="0.8">
                        <div class="gdlr-core-pbf-element">
                            <div class="gdlr-core-icon-item gdlr-core-item-pdlr gdlr-core-item-pdb gdlr-core-left-align" style="padding-bottom: 35px ;"><i class=" gdlr-core-icon-item-icon fa fa-phone" style="color: #ffffff ;font-size: 40px ;min-width: 40px ;min-height: 40px ;"></i></div>
                        </div>
                        <div class="gdlr-core-pbf-element">
                            <div class="gdlr-core-title-item gdlr-core-item-pdb clearfix  gdlr-core-left-align gdlr-core-title-item-caption-top gdlr-core-item-pdlr" style="padding-bottom: 25px ;">
                                <div class="gdlr-core-title-item-title-wrap clearfix">
                                    <h3 class="gdlr-core-title-item-title gdlr-core-skin-title " style="font-size: 26px ;letter-spacing: 0px ;text-transform: none ;">Phone</h3>
                                </div>
                            </div>
                        </div>
                        <div class="gdlr-core-pbf-element">
                            <div class="gdlr-core-text-box-item gdlr-core-item-pdlr gdlr-core-item-pdb gdlr-core-left-align" style="padding-bottom: 0px ;">
                                <div class="gdlr-core-text-box-item-content" style="font-size: 16px ;">
                                    <p>Please feel free to contact or ask any query.</p>
                                </div>
                            </div>
                        </div>
                        <div class="gdlr-core-pbf-element">
                            <div class="gdlr-core-text-box-item gdlr-core-item-pdlr gdlr-core-item-pdb gdlr-core-left-align">
                                <div class="gdlr-core-text-box-item-content" style="font-size: 16px ;text-transform: none ;color: #3db166 ;">
                                    
                                    <p><a href="tel:03335354500"><i class="fa fa-phone" style="margin-right:5px;"></i>(0333)5354500</a></p>
                                    <p><a href="tel:03115354500"><i class="fa fa-phone" style="margin-right:5px;"></i>(0311)5354500</a></p>
                                    <p><a href="tel:0515191919"><i class="fa fa-phone" style="margin-right:5px;"></i>(051)5191919</a></p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="gdlr-core-pbf-column gdlr-core-column-20">
                <div class="gdlr-core-pbf-column-content-margin gdlr-core-js " style="padding: 50px 20px 0px 20px;">
                    <div class="gdlr-core-pbf-column-content clearfix gdlr-core-js " data-gdlr-animation="fadeInDown" data-gdlr-animation-duration="600ms" data-gdlr-animation-offset="0.8">
                        <div class="gdlr-core-pbf-element">
                            <div class="gdlr-core-icon-item gdlr-core-item-pdlr gdlr-core-item-pdb gdlr-core-left-align" style="padding-bottom: 35px ;"><i class=" gdlr-core-icon-item-icon fa fa-envelope-o" style="color: #ffffff ;font-size: 40px ;min-width: 40px ;min-height: 40px ;"></i></div>
                        </div>
                        <div class="gdlr-core-pbf-element">
                            <div class="gdlr-core-title-item gdlr-core-item-pdb clearfix  gdlr-core-left-align gdlr-core-title-item-caption-top gdlr-core-item-pdlr" style="padding-bottom: 25px ;">
                                <div class="gdlr-core-title-item-title-wrap clearfix">
                                    <h3 class="gdlr-core-title-item-title gdlr-core-skin-title " style="font-size: 26px ;letter-spacing: 0px ;text-transform: none ;">Email</h3>
                                </div>
                            </div>
                        </div>
                        <div class="gdlr-core-pbf-element">
                            <div class="gdlr-core-text-box-item gdlr-core-item-pdlr gdlr-core-item-pdb gdlr-core-left-align" style="padding-bottom: 0px ;">
                                <div class="gdlr-core-text-box-item-content" style="font-size: 16px ;">
                                    <p>Please feel free to contact or ask any query.</p>
                                </div>
                            </div>
                        </div>
                        <div class="gdlr-core-pbf-element">
                            <div class="gdlr-core-text-box-item gdlr-core-item-pdlr gdlr-core-item-pdb gdlr-core-left-align">
                                <div class="gdlr-core-text-box-item-content" style="font-size: 16px ;">
                                    <p><a href="mailto:quranacademyisb@gmail.com"><i class="fa fa-envelope" style="margin-right:5px;" aria-hidden="true"></i> quranacademyisb@gmail.com</a></p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="gdlr-core-pbf-column gdlr-core-column-20">
                <div class="gdlr-core-pbf-column-content-margin gdlr-core-js " style="padding: 50px 20px 0px 20px;">
                    <div class="gdlr-core-pbf-column-content clearfix gdlr-core-js " data-gdlr-animation="fadeInUp" data-gdlr-animation-duration="600ms" data-gdlr-animation-offset="0.8">
                        <div class="gdlr-core-pbf-element">
                            <div class="gdlr-core-icon-item gdlr-core-item-pdlr gdlr-core-item-pdb gdlr-core-left-align" style="padding-bottom: 35px ;"><i class=" gdlr-core-icon-item-icon fa fa-location-arrow" style="color: #ffffff ;font-size: 40px ;min-width: 40px ;min-height: 40px ;"></i></div>
                        </div>
                        <div class="gdlr-core-pbf-element">
                            <div class="gdlr-core-title-item gdlr-core-item-pdb clearfix  gdlr-core-left-align gdlr-core-title-item-caption-top gdlr-core-item-pdlr" style="padding-bottom: 25px ;">
                                <div class="gdlr-core-title-item-title-wrap clearfix">
                                    <h3 class="gdlr-core-title-item-title gdlr-core-skin-title " style="font-size: 26px ;letter-spacing: 0px ;text-transform: none ;">Location</h3>
                                </div>
                            </div>
                        </div>
                        <div class="gdlr-core-pbf-element">
                            <div class="gdlr-core-text-box-item gdlr-core-item-pdlr gdlr-core-item-pdb gdlr-core-left-align" style="padding-bottom: 0px ;">
                                <div class="gdlr-core-text-box-item-content" style="font-size: 16px ;">
                                    <p>
                                        Basement Hamadan Heights, Near Save Mart
                                        <br /> Ghori Town Express Way Islamabad
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div class="gdlr-core-pbf-element">
                            <div class="gdlr-core-text-box-item gdlr-core-item-pdlr gdlr-core-item-pdb gdlr-core-left-align">
                                <div class="gdlr-core-text-box-item-content" style="font-size: 16px ;">
                                    <p><a href="https://goo.gl/maps/AaAdP56DCojiGQVG6" target="_blank">View On Google Map</a></p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="gdlr-core-pbf-wrapper " style="padding: 115px 0px 40px 0px;">
    <div class="gdlr-core-pbf-background-wrap" style="background-color: #f3f3f3 ;"></div>
    <div class="gdlr-core-pbf-wrapper-content gdlr-core-js ">
        <div class="gdlr-core-pbf-wrapper-container clearfix gdlr-core-container">
            <div class="gdlr-core-pbf-column gdlr-core-column-60 gdlr-core-column-first">
                <div class="gdlr-core-pbf-column-content-margin gdlr-core-js ">
                    <div class="gdlr-core-pbf-column-content clearfix gdlr-core-js " style="max-width: 760px ;">
                        <div class="gdlr-core-pbf-element">
                            <div class="gdlr-core-title-item gdlr-core-item-pdb clearfix  gdlr-core-center-align gdlr-core-title-item-caption-bottom gdlr-core-item-pdlr" style="padding-bottom: 60px ;">
                                <div class="gdlr-core-title-item-title-wrap clearfix">
                                    <h3 class="gdlr-core-title-item-title gdlr-core-skin-title " style="font-size: 39px ;">Leave us your info</h3>
                                </div><span class="gdlr-core-title-item-caption gdlr-core-info-font gdlr-core-skin-caption" style="font-size: 19px ;font-style: normal ;text-transform: uppercase ;">and we will get back to you.</span>
                            </div>
                        </div>
                        <div class="gdlr-core-pbf-element">
                            <div class="gdlr-core-contact-form-7-item gdlr-core-item-pdlr gdlr-core-item-pdb ">
                                <div role="form" class="wpcf7" id="wpcf7-f1979-p1964-o1" lang="en-US" dir="ltr">
                                    <div class="screen-reader-response"></div>
                                    @using (Html.BeginForm("SendMail", "Home"))
                                        {
                                            <div class="quform-elements">
                                                @Html.ValidationSummary(true, "", new { @class = "text-danger" })
                                                <div class="quform-element">
                                                    <p>
                                                        Your Name (required)
                                                        <br>
                                                        <span class="wpcf7-form-control-wrap your-name">
                                                            @Html.TextBoxFor(m => m.Name, new { @class = "input1", @aria_required = "true", @aria_invalid = "false" })
                                                            @Html.ValidationMessageFor(m => m.Name)
                                                        </span>
                                                    </p>
                                                </div>
                                                <div class="quform-element">
                                                    <p>
                                                        Your Email (required)
                                                        <br>
                                                        <span class="wpcf7-form-control-wrap your-email">
                                                            @Html.TextBoxFor(m => m.Email, new { @class = "input1", @aria_required = "true", @aria_invalid = "false" })
                                                            @Html.ValidationMessageFor(m => m.Email)
                                                        </span>
                                                    </p>
                                                </div>
                                                <div class="quform-element">
                                                    <p>
                                                        Your Message (required)
                                                        <br>
                                                        <span class="wpcf7-form-control-wrap your-message">
                                                            @Html.TextAreaFor(m => m.Message, new { @class = "input1", @aria_required = "true", @aria_invalid = "false" })
                                                            @Html.ValidationMessageFor(m => m.Message)
                                                        </span>
                                                    </p>
                                                </div>
                                                <p>
                                                    <!-- Begin Submit button -->
                                                    <div class="quform-submit">
                                                        <div class="quform-submit-inner">
                                                            <button type="submit" class="submit-button" name="submit"><span>Send</span></button>
                                                        </div>
                                                        <div class="quform-loading-wrap"><span class="quform-loading"></span></div>
                                                    </div>
                                                </p>
                                            </div>
                                        }
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="gdlr-core-pbf-wrapper " style="padding: 0px 0px 0px 0px;">
    <div class="gdlr-core-pbf-wrapper-content gdlr-core-js ">
        <div class="gdlr-core-pbf-wrapper-container clearfix gdlr-core-pbf-wrapper-full-no-space">
            <div class="gdlr-core-pbf-element">
                <div class="gdlr-core-wp-google-map-plugin-item gdlr-core-item-pdlr gdlr-core-item-pdb " style="padding-bottom: 0px ;">

                    <div style="overflow:hidden;width: 100%;position: relative;">

                        <iframe  style="width:100%; height:480px;" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d830.701631372108!2d73.12949502924074!3d33.61032409879554!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x38dfeb79773996d5%3A0xb6898608f14f9ba7!2sHamdan%20Heights!5e0!3m2!1sen!2s!4v1589894419363!5m2!1sen!2s" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
                        <div style="position: absolute;width: 80%;bottom: 20px;left: 0;right: 0;margin-left: auto;margin-right: auto;color: #000;">

                        </div>
                        <style>
                            #gmap_canvas img {
                                max-width: none !important;
                                background: none !important;
                            }
                        </style>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>
<div class="gdlr-core-pbf-wrapper " style="padding: 80px 0px 50px 0px;">
    <div class="gdlr-core-pbf-background-wrap" style="background-color: #ffffff ;"></div>
    <div class="gdlr-core-pbf-wrapper-content gdlr-core-js ">
        <div class="gdlr-core-pbf-wrapper-container clearfix gdlr-core-container">
            <div class="gdlr-core-pbf-element">
                <div class="gdlr-core-social-network-item gdlr-core-item-pdb  gdlr-core-center-align gdlr-core-item-pdlr">
                <a href="https://www.facebook.com/QAIslamabad/" target="_blank" class="gdlr-core-social-network-icon" title="facebook" style="font-size: 20px ;color: #1e1e1e ;margin-left: 40px ;"><i class="fa fa-facebook"></i></a>
                <a href="https://twitter.com/tanzeemorg?ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor" target="_blank" class="gdlr-core-social-network-icon" title="twitter" style="font-size: 20px ;color: #1e1e1e ;margin-left: 40px ;"><i class="fa fa-twitter"></i></a></div>
            </div>
        </div>
    </div>
</div>