<!doctype html>
<html class="no-js" lang="zxx">

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Karbar - Multipurpose Bootstrap 4 Template</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Favicons -->
    <link rel="shortcut icon" href="images/favicon.ico">
    <link rel="apple-touch-icon" href="images/icon.png">

    <!-- Google font (font-family: 'Roboto', sans-serif;) -->
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
    <!-- Google font (font-family: 'Roboto Condensed', sans-serif;) -->
    <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700" rel="stylesheet">

    <!-- Stylesheets -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/plugins.css">
    <link rel="stylesheet" href="style.css">

    <!-- Cusom css -->
    <link rel="stylesheet" href="css/custom.css">

    <!-- Modernizer js -->
    <script src="js/vendor/modernizr-3.5.0.min.js"></script>
</head>

<body>
     
		 
	 

    <!-- Add your site or application content here -->

     

    <!-- Main wrapper -->
    <div class="wrapper" id="wrapper">

        <!-- Header -->
        <header class="header header-style-1 theme-color transparent-header megamenu-container sticky-header">

            <div class="container d-none d-lg-block">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="header-inner">
                            <div class="logo">
                                <a href="index.html">
                                    <img src="images/logo/logo-theme-light.png" alt="logo secondary dark">
                                </a>
                            </div>
                            <nav class="menu">
                                <ul>
                                    <li class="cr-dropdown"><a href="index.html">Home</a></li>
                                    <li class="cr-dropdown"><a href="about-us.html">ABOUT US</a></li>
                                    <li class="cr-dropdown">
                                        <a href="index.html">Pages</a>
                                        <ul>
                                            <li class="cr-sub-dropdown"><a href="about-us.html">About</a></li>
                                            <li class="cr-sub-dropdown"><a href="services.html">Services</a></li>
                                            <li class="cr-sub-dropdown"><a href="contact-us.html">Contact Us</a></li>
                                            <li class="cr-sub-dropdown">
                                                <a href="portfolo.html">Portfolios</a></li>
                                            <li>
                                                <a href="faq.html">FAQ</a>
                                            </li>
                                            <li>
                                                <a href="team-details.html">Team Details</a>
                                            </li>
                                            <li>
                                                <a href="videos.html">Videos</a>
                                            </li>
                                        </ul>
                                        <li class="cr-dropdown"><a href="blog.html">BLOG</a></li>
                                        <li class="cr-dropdown"><a href="contact-us.html">CONTACT</a></li>
                                </ul>
                            </nav>
                            <a href="#" class="cr-btn cr-btn-sm cr-btn-round">
                                <span>Buy now</span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Mobile Menu -->
            <div class="mobile-menu-wrapper">
                <div class="container d-block d-lg-none">
                    <div class="mobile-menu clearfix">
                        <a class="mobile-logo" href="index.html">
                            <img src="images/logo/logo-theme-light.png" alt="mobile logo">
                        </a>
                        <a href="#" class="cr-btn cr-btn-sm cr-btn-round">
                            <span>Buy now</span>
                        </a>
                    </div>
                </div>
            </div>
            <!-- //Mobile Menu -->

        </header>
        <!-- //Header -->

        <!-- Breacrumb Area -->
        <div class="breadcrumb-area" data-black-overlay="7">
            <div class="container">
                <div class="row">
                    <div class="col-xl-8 offset-xl-2 col-lg-10 offset-lg-1">
                        <div class="cr-breadcrumb text-center">
                            <h1>Contact Us</h1>
                            <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered
                                alteration passages of Lorem Ipsum available, but the majority</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--// Breacrumb Area -->

        <!-- Page Content -->
        <main class="page-content">

            <!-- Contact Us Area -->
            <div class="pg-contact-us-area section-padding-lg bg-white">
                <div class="container">
                    <div class="row">
                        <div class="col-lg-8">
                            <div class="pg-contact-form mr-0 mr-lg-3">
                                <div class="small-title">
                                    <h2>Contact Form</h2>
                                    <p>There are many variations of passages of Lorem Ipsum available, but the majority Lorem
                                        Ipsum available.</p>
                                </div>
                                <form id="contact-form" action="mail.php" method="post">
                                    <div class="row no-gutters">
                                        <div class="col-lg-6 col-md-6">
                                            <div class="single-input">
                                                <input type="text" name="name" placeholder="Name">
                                            </div>
                                        </div>
                                        <div class="col-lg-6 col-md-6">
                                            <div class="single-input">
                                                <input type="email" name="email" placeholder="E-mail">
                                            </div>
                                        </div>
                                        <div class="col-lg-6 col-md-6">
                                            <div class="single-input">
                                                <input type="text" name="phone" placeholder="Phone">
                                            </div>
                                        </div>
                                        <div class="col-lg-6 col-md-6">
                                            <div class="single-input">
                                                <input type="text" name="subject" placeholder="Subject">
                                            </div>
                                        </div>
                                        <div class="col-lg-12">
                                            <div class="single-input">
                                                <textarea name="message" cols="10" rows="4" placeholder="Message"></textarea>
                                            </div>
                                        </div>
                                        <div class="col-lg-12">
                                            <div class="single-input">
                                                <button class="cr-btn" type="submit">
                                                    <span>Send Now</span>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                        <div class="col-lg-4">
                            <div class="pg-contact-details">
                                <div class="small-title">
                                    <h2>Quick contact</h2>
                                    <p>There are many variations of passages of Lorem Ipsum available, but the majority</p>
                                </div>
                                <ul>
                                    <li class="single-quick-contact">
                                        <h5>Phone Number</h5>
                                        <p>
                                            <a href="tel:+88012659845">+88012659845</a>
                                            <a href="tel:+88012659864">+88012659864</a>
                                        </p>
                                    </li>
                                    <li class="single-quick-contact">
                                        <h5>E-Mail Address</h5>
                                        <p>
                                            <a href="mailto:info@example.com">info@example.com</a>
                                            <a href="mailto:info@example.com">info@example.com</a>
                                        </p>
                                    </li>
                                    <li class="single-quick-contact">
                                        <h5>Our Address</h5>
                                        <p>32/3 north south road, Wilon, new wrork</p>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <div class="row section-padding-top-xs">
                        <div class="col-lg-6 offset-lg-3">
                            <div class="small-title text-center">
                                <h2>Contact Maps</h2>
                                <p>There are many variations of passages of Lorem Ipsum available, but the majority Lorem Ipsum
                                    available.
                                </p>
                            </div>
                        </div>
                        <div class="col-lg-12">
                            <div class="contact-map">
                                <div class="contact-google-map" id="google-map"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--// Contact Us Area -->

            <!-- Counter Area -->
            <div class="counter-area bg-theme">
                <div class="counter-area-inner bg-theme">
                    <div class="container">
                        <div class="row no-gutters align-items-center">
                            <div class="col-lg-3 col-md-12">
                                <div class="counter-content">
                                    <h1>The last 9 years</h1>
                                    <h4>What we have done</h4>
                                </div>
                            </div>
                            <div class="col-lg-3 col-md-4">
                                <div class="counter text-center">
                                    <h1 class="counter-active">131</h1>
                                    <h6>AWARD WIN</h6>
                                </div>
                            </div>
                            <div class="col-lg-3 col-md-4">
                                <div class="counter text-center">
                                    <h1 class="counter-active">612</h1>
                                    <h6>Projects Done</h6>
                                </div>
                            </div>
                            <div class="col-lg-3 col-md-4">
                                <div class="counter text-center">
                                    <h1 class="counter-active">465</h1>
                                    <h6>Satisfied Client</h6>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--// Counter Area -->

        </main>
        <!--// Page Content -->

        <!-- Footer Area -->
        <footer id="footer" class="footer-area">

            <!-- Footer Top Area -->
            <div class="footer-top-area bg-dark-light section-padding-sm">
                <div class="container">
                    <div class="footer-widgets widgets">
                        <div class="row">

                            <div class="col-lg-4 col-md-6 col-12">
                                <!-- Single Widget -->
                                <div class="single-widget footer-widget-about">
                                    <a href="index.html">
                                        <img src="images/logo/logo-theme-light.png" alt="footer logo">
                                    </a>
                                    <p>long established fact that a reader will be distracted by the readable content by the
                                        readable content established fact that</p>
                                </div>
                                <!--// Single Widget -->

                                <!-- Single Widget -->
                                <div class="single-widget widget-newsletter">
                                    <form action="http://devitems.us11.list-manage.com/subscribe/post?u=6bbb9b6f5827bd842d9640c82&id=05d85f18ef" method="post" class="newsletter-widget-form">
                                        <input type="email" placeholder="Your Email">
                                        <button type="submit" class="cr-btn cr-btn-sm cr-btn-round">
                                            <span>Subscribe</span>
                                        </button>
                                    </form>
                                </div>
                                <!--// Single Widget -->
                            </div>

                            <div class="col-lg-2 col-md-6 col-12">
                                <!-- Single Widget -->
                                <div class="single-widget widget-quick-links">
                                    <h5 class="footer-widget-title">QUICK LINK</h5>
                                    <ul>
                                        <li>
                                            <a href="index.html">Home</a>
                                        </li>
                                        <li>
                                            <a href="about-us.html">About Us</a>
                                        </li>
                                        <li>
                                            <a href="blog-fullwidth.html">Blog Pages</a>
                                        </li>
                                        <li>
                                            <a href="contact-us.html">Quick Contact</a>
                                        </li>
                                        <li>
                                            <a href="about-us-2.html">Karbar History</a>
                                        </li>
                                        <li>
                                            <a href="services.html">Our Services</a>
                                        </li>
                                    </ul>
                                </div>
                                <!--// Single Widget -->
                            </div>

                            <div class="col-lg-3 col-md-6 col-12">
                                <!-- Single Widget -->
                                <div class="single-widget widget-latest-blog">
                                    <h5 class="footer-widget-title">Latest Blog</h5>
                                    <ul>
                                        <li>
                                            <a href="blog-details.html" class="widget-latest-blog-thumb">
                                                <img src="images/blog/footer-latest-blog/latest-blog-thumb-1.png" alt="footer latest blog">
                                            </a>
                                            <div class="widget-latest-blog-content">
                                                <h6>
                                                    <a href="blog-details.html">Some patience for the modern market</a>
                                                </h6>
                                                <div class="widget-latest-blog-meta">
                                                    <span>21 Aug 2017</span>
                                                    <span>By
                                                        <a href="blog-fullwidth.html">Admin</a>
                                                    </span>
                                                </div>
                                            </div>
                                        </li>
                                        <li>
                                            <a href="blog-details.html" class="widget-latest-blog-thumb">
                                                <img src="images/blog/footer-latest-blog/latest-blog-thumb-2.png" alt="footer latest blog">
                                            </a>
                                            <div class="widget-latest-blog-content">
                                                <h6>
                                                    <a href="blog-details.html">Patience for the modern market</a>
                                                </h6>
                                                <div class="widget-latest-blog-meta">
                                                    <span>21 Aug 2017</span>
                                                    <span>By
                                                        <a href="blog-fullwidth.html">Admin</a>
                                                    </span>
                                                </div>
                                            </div>
                                        </li>
                                        <li>
                                            <a href="blog-details.html" class="widget-latest-blog-thumb">
                                                <img src="images/blog/footer-latest-blog/latest-blog-thumb-3.png" alt="footer latest blog">
                                            </a>
                                            <div class="widget-latest-blog-content">
                                                <h6>
                                                    <a href="blog-details.html">Some patience the modern market & new Generation</a>
                                                </h6>
                                                <div class="widget-latest-blog-meta">
                                                    <span>21 Aug 2017</span>
                                                    <span>By
                                                        <a href="blog-fullwidth.html">Admin</a>
                                                    </span>
                                                </div>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                                <!--// Single Widget -->
                            </div>

                            <div class="col-lg-3 col-md-6 col-12">
                                <!-- Single Widget -->
                                <div class="single-widget widget-quick-contact">
                                    <h5 class="footer-widget-title">Quick Contact</h5>
                                    <ul>
                                        <li>
                                            <span>Phone</span>
                                            <p>
                                                <a href="tel:+01234567890123">+01234567890123</a>
                                            </p>
                                            <p>
                                                <a href="tel:+01234567890124">+01234567890124</a>
                                            </p>
                                        </li>
                                        <li>
                                            <span>Email</span>
                                            <p>
                                                <a href="#">info@example.com</a>
                                            </p>
                                            <p>
                                                <a href="#">info@example.com</a>
                                            </p>
                                        </li>
                                        <li>
                                            <span>Address</span>
                                            <p>34/5 evergreen road, karbar city New work, United States</p>
                                        </li>
                                    </ul>
                                </div>
                                <!--// Single Widget -->
                            </div>

                        </div>
                    </div>
                </div>
            </div>
            <!--// Footer Top Area -->

            <!-- Footer Bottom Area -->
            <div class="footer-bottom-area bg-dark">
                <div class="container">
                    <div class="row">
                        <div class="col-lg-7">
                            <ul class="footer-social">
                                <li>
                                    <a href="https://www.facebook.com/">Facebook</a>
                                </li>
                                <li>
                                    <a href="https://twitter.com/">Twitter</a>
                                </li>
                                <li>
                                    <a href="https://plus.google.com/">Google+</a>
                                </li>
                                <li>
                                    <a href="https://www.linkedin.com/">Linkedin</a>
                                </li>
                                <li>
                                    <a href="https://www.behance.net/">Behance</a>
                                </li>
                            </ul>
                        </div>
                        <div class="col-lg-5 copyright">
                            <p>Copyright <i class="fa fa-copyright"></i> 2018 <a href="https://freethemescloud.com/" target="_blank" >Free Themes Cloud.</a> All rights reserved. </p>
                        </div>
                    </div>
                </div>
            </div>
            <!--// Footer Bottom Area -->

        </footer>
        <!-- //Footer Area -->

        <!-- Form Message -->
        <div class="cr-contact-message-modal">
            <p class="form-messege"></p>
        </div>
        <!--// Form Message -->

    </div>
    <!-- //Main wrapper -->


    <!-- Google Map -->
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCxvP66_Xk1ts77oL2Z7EpDxhDD_jMg-D0"></script>
    <script>
        // When the window has finished loading create our google map below
        google.maps.event.addDomListener(window, 'load', init);

        function init() {
            // Basic options for a simple Google Map
            // For more options see: https://developers.google.com/maps/documentation/javascript/reference#MapOptions
            var mapOptions = {
                // How zoomed in you want the map to start at (always required)
                zoom: 12,

                scrollwheel: false,

                // The latitude and longitude to center the map (always required)
                center: new google.maps.LatLng(40.740610, -73.935242), // New York

                // How you would like to style the map. 
                // This is where you would paste any style found on

                styles: [{
                        "featureType": "water",
                        "elementType": "geometry",
                        "stylers": [{
                                "color": "#e9e9e9"
                            },
                            {
                                "lightness": 17
                            }
                        ]
                    },
                    {
                        "featureType": "landscape",
                        "elementType": "geometry",
                        "stylers": [{
                                "color": "#f5f5f5"
                            },
                            {
                                "lightness": 20
                            }
                        ]
                    },
                    {
                        "featureType": "road.highway",
                        "elementType": "geometry.fill",
                        "stylers": [{
                                "color": "#ffffff"
                            },
                            {
                                "lightness": 17
                            }
                        ]
                    },
                    {
                        "featureType": "road.highway",
                        "elementType": "geometry.stroke",
                        "stylers": [{
                                "color": "#ffffff"
                            },
                            {
                                "lightness": 29
                            },
                            {
                                "weight": 0.2
                            }
                        ]
                    },
                    {
                        "featureType": "road.arterial",
                        "elementType": "geometry",
                        "stylers": [{
                                "color": "#ffffff"
                            },
                            {
                                "lightness": 18
                            }
                        ]
                    },
                    {
                        "featureType": "road.local",
                        "elementType": "geometry",
                        "stylers": [{
                                "color": "#ffffff"
                            },
                            {
                                "lightness": 16
                            }
                        ]
                    },
                    {
                        "featureType": "poi",
                        "elementType": "geometry",
                        "stylers": [{
                                "color": "#f5f5f5"
                            },
                            {
                                "lightness": 21
                            }
                        ]
                    },
                    {
                        "featureType": "poi.park",
                        "elementType": "geometry",
                        "stylers": [{
                                "color": "#dedede"
                            },
                            {
                                "lightness": 21
                            }
                        ]
                    },
                    {
                        "elementType": "labels.text.stroke",
                        "stylers": [{
                                "visibility": "on"
                            },
                            {
                                "color": "#ffffff"
                            },
                            {
                                "lightness": 16
                            }
                        ]
                    },
                    {
                        "elementType": "labels.text.fill",
                        "stylers": [{
                                "saturation": 36
                            },
                            {
                                "color": "#333333"
                            },
                            {
                                "lightness": 40
                            }
                        ]
                    },
                    {
                        "elementType": "labels.icon",
                        "stylers": [{
                            "visibility": "off"
                        }]
                    },
                    {
                        "featureType": "transit",
                        "elementType": "geometry",
                        "stylers": [{
                                "color": "#f2f2f2"
                            },
                            {
                                "lightness": 19
                            }
                        ]
                    },
                    {
                        "featureType": "administrative",
                        "elementType": "geometry.fill",
                        "stylers": [{
                                "color": "#fefefe"
                            },
                            {
                                "lightness": 20
                            }
                        ]
                    },
                    {
                        "featureType": "administrative",
                        "elementType": "geometry.stroke",
                        "stylers": [{
                                "color": "#fefefe"
                            },
                            {
                                "lightness": 17
                            },
                            {
                                "weight": 1.2
                            }
                        ]
                    }
                ]
            };

            // Get the HTML DOM element that will contain your map 
            // We are using a div with id="map" seen below in the <body>
            var mapElement = document.getElementById('google-map');

            // Create the Google Map using our element and options defined above
            var map = new google.maps.Map(mapElement, mapOptions);

            // Let's also add a marker while we're at it
            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(40.740610, -73.935242),
                map: map,
                title: 'Karbar',
                icon: "images/icons/marker.png",
                animation: google.maps.Animation.BOUNCE
            });
        }
    </script>


    <!-- JS Files -->
    <script src="js/vendor/jquery-3.2.1.min.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/plugins.js"></script>
    <script src="js/active.js"></script>
    <script src="js/scripts.js"></script>
    <script src="js/ajax-mail.js"></script>
</body>

</html>