<?php require_once './inc/email.php'?>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">

    <title>WELCOME TO <span style="text-transform: uppercase;"><?=$courier_new_name?></span> LOGISTICS/SECURITY COMPANY</title>
    <meta content="" name="description">
    <meta content="" name="keywords">

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

    <!-- Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link
        href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,600;1,700&family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Inter:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap"
        rel="stylesheet">

    <!-- Vendor CSS Files -->
    <link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
    <link href="assets/vendor/fontawesome-free/css/all.min.css" rel="stylesheet">
    <link href="assets/vendor/glightbox/css/glightbox.min.css" rel="stylesheet">
    <link href="assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet">
    <link href="assets/vendor/aos/aos.css" rel="stylesheet">

    <!-- Template Main CSS File -->
    <link href="assets/css/main.css" rel="stylesheet">
    <style>
    @import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css");

    /* footer style starts here */
    footer .footer-container {
        width: 100%;
        background-color: #0d237d;

    }

    footer .container-fluid {
        display: block;
        width: 100%;
    }

    footer .container-fluid ul {
        display: flex;
        padding: 0;
        margin: 0;

    }

    footer .container-fluid ul li {
        list-style: none;
    }

    footer .container-fluid ul li a {
        display: block;
        width: 100%;
        text-decoration: none;
        font-weight: bold;
        color: #fff;
        padding: 0 10px;
        font-size: 13px;
    }

    footer .container-fluid ul li a:hover {
        text-decoration: underline;
    }

    .dt-copyright {
        font-weight: bold;
        color: #fff;
        padding: 10px 0;
        margin: -90px 0 20px 0px;
        font-size: 13px;
    }

    .container-fluid .email a {
        display: inline-block;
        color: #fff;
        font-weight: bold;
        margin: -20px 0 40px 0;
    }

    @media only screen and (min-width:768px) {
        footer .container-fluid {
            display: flex;
            width: 100%;
            margin: 0 auto;
        }

        footer .container-fluid .email a {
            transform: translate(-20%, 180%);
        }
    }

    @media only screen and (min-width:1200px) {
        footer .container-fluid {
            width: 1200px;
            margin: 0 auto;
        }
    }

    /* footer styling ends here */
    </style>

    <!-- =======================================================
  * Template Name: Logis - v1.1.0
  * Template URL: https://bootstrapmade.com/logis-bootstrap-logistics-website-template/
  * Author: BootstrapMade.com
  * License: https://bootstrapmade.com/license/
  ======================================================== -->
</head>

<body>

    <!-- ======= Header ======= -->
    <header id="header" class="header d-flex align-items-center fixed-top">
        <div class="container-fluid container-xl d-flex align-items-center justify-content-between">

            <a href="index.html" class="logo d-flex align-items-center">
                <!-- Uncomment the line below if you also wish to use an image logo -->
                <!--<img src="assets/img/logo.png" alt="">-->
                <h1 style="color:#ccc; font-weight: bold; text-transform: uppercase"><?=$logo?></h1>
            </a>

            <i class="mobile-nav-toggle mobile-nav-show bi bi-list"></i>
            <i class="mobile-nav-toggle mobile-nav-hide d-none bi bi-x"></i>
            <nav id="navbar" class="navbar fw-bold" style="background-color: #000;">
                <ul>
                    <li><a href="index" class="active">Home</a></li>
                    <li><a href="about">About</a></li>
                    <li><a href="network">Network</a></li>
                    <li><a href="career">Careers</a></li>
                    <li><a href="logistics">Security logistics</a></li>
                    <li class="dropdown"><a href="#"><span>Security Services</span> <i
                                class="bi bi-chevron-down dropdown-indicator"></i></a>
                        <ul>
                            <li><a href="services">List of Services</a></li>
                            <li><a href="products">Security Product</a></li>
                        </ul>
                    </li>
                    <li><a href="contact">Contact</a></li>
                    <li><a class="get-a-quote" href="get-a-quote">Get a Quote</a></li>
                </ul>
            </nav><!-- .navbar -->
        </div>
    </header><!-- End Header -->
    <!-- End Header -->

    <main id="main">

        <!-- ======= Breadcrumbs ======= -->
        <div class="breadcrumbs">
            <div class="page-header d-flex align-items-center"
                style="background-image: url('assets/img/bg-locater.jpg');">
                <div class="container position-relative">
                    <div class="row d-flex justify-content-center">
                        <div class="col-lg-6 text-center">
                            <img src="./assets/img/locater.png" alt="" style="max-width:100%;height: auto">
                            <h2 style="color:#10237f; font-size: 25px;">REACH US</h2>
                            <p style="font-family: 'Buenard-Regular';font-size: 18px;color: #000">We're always there to
                                help</p>
                        </div>
                    </div>
                </div>
            </div>
            <nav>
                <div class="container">
                    <ol>
                        <li><a href="index">Home</a></li>
                        <li>Contact</li>
                    </ol>
                </div>
            </nav>
        </div><!-- End Breadcrumbs -->

        <!-- ======= Contact Section ======= -->
        <section id="contact" class="contact">
            <div class="container" data-aos="fade-up">

                <div>
                    <iframe
                        src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d28921.116197591036!2d121.50307366643386!3d25.029338659850797!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3442a99bd01e2d1d%3A0xba188a1ec4fe797d!2sZhongzheng%20District%2C%20Taipei%20City%2C%20Taiwan%20100!5e0!3m2!1sen!2sus!4v1663538525456!5m2!1sen!2sus"
                        style="border:0; width: 100%; height: 340px;" frameborder="0" allowfullscreen></iframe>
                </div><!-- End Google Maps -->

                <div class="row gy-4 mt-4">

                    <div class="col-lg-4">

                        <div class="info-item d-flex">
                            <i class="bi bi-geo-alt flex-shrink-0"></i>
                            <div>
                                <h4>Locations:</h4>
                                <p>
                                    <strong>HEAD OFFICE:</strong> New York, United States
                                </p>
                                <p><strong>BRANCH:</strong> Ontario, Canada </p>
                                <p><strong>BRANCH:</strong> London, United Kingdoma </p>
                            </div>
                        </div><!-- End Info Item -->

                        <div class="info-item d-flex">
                            <i class="bi bi-envelope flex-shrink-0"></i>
                            <div>
                                <h4>Email:</h4>
                                <p><?=$email?></p>
                            </div>
                        </div><!-- End Info Item -->

                        <div class="info-item d-flex">
                            <i class="bi bi-phone flex-shrink-0"></i>
                            <div>
                                <h4>Call:</h4>
                                <p><?=$phone?></p>
                            </div>
                        </div><!-- End Info Item -->

                    </div>

                    <div class="col-lg-8">
                        <form action="forms/contact.php" method="post" role="form" class="php-email-form">
                            <div class="row">
                                <div class="col-md-6 form-group">
                                    <input type="text" name="name" class="form-control" id="name"
                                        placeholder="Your Name" required>
                                </div>
                                <div class="col-md-6 form-group mt-3 mt-md-0">
                                    <input type="email" class="form-control" name="email" id="email"
                                        placeholder="Your Email" required>
                                </div>
                            </div>
                            <div class="form-group mt-3">
                                <input type="text" class="form-control" name="subject" id="subject"
                                    placeholder="Subject" required>
                            </div>
                            <div class="form-group mt-3">
                                <textarea class="form-control" name="message" rows="5" placeholder="Message"
                                    required></textarea>
                            </div>
                            <div class="my-3">
                                <div class="loading">Loading</div>
                                <div class="error-message"></div>
                                <div class="sent-message">Your message has been sent. Thank you!</div>
                            </div>
                            <div class="text-center"><button type="submit">Send Message</button></div>
                        </form>
                    </div><!-- End Contact Form -->

                </div>

            </div>
        </section><!-- End Contact Section -->

    </main><!-- End #main -->

    <!-- ======= Footer ======= -->
    <footer class="w-100">
        <div class="footer-container">
            <div class="container-fluid">
                <div class="col-lg-8 col-md-8 col-sm-8 col-xs-12 ul-menu">
                    <div class="region region-footer">
                        <section id="block-menu-menu-footer-menu" class="block block-menu clearfix">
                            <ul class="dt-foot-menu" style="margin-top: -40px">
                                <li class="first leaf active-trail active"><a href="about-us"
                                        class="active-trail active">About us</a></li>
                                <li class="leaf"><a href="careers.html">Careers</a></li>
                                <li class="leaf"><a href="privacy-policy.html">Privacy Policy</a></li>
                                <li class="last leaf"><a href="terms-conditions.html">Terms &amp; Conditions</a></li>
                            </ul>
                        </section> <!-- /.block -->
                    </div>
                    <div class="clearfix"></div>
                    <p class="dt-copyright">© Copyright <span style="text-transform: uppercase"><?=$courier_new_name?></span> LOGISTICS Express Limited. All Rights
                        Reserved</p>
                </div>
                <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 email"> <a class="dt-mail-foot"
                        href="mailto:<?=$email?>"><i class="glyphicon glyphicon-envelope"></i><?=$email?></a> </div>
            </div>
        </div>
    </footer><!-- End Footer -->
    <!-- End Footer -->

    <a href="#" class="scroll-top d-flex align-items-center justify-content-center"><i
            class="bi bi-arrow-up-short"></i></a>

    <div id="preloader"></div>
    <div class="livechat">
        <?php include './inc/livechat.php'?>
    </div>
    <!-- Vendor JS Files -->
    <script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
    <script src="assets/vendor/purecounter/purecounter_vanilla.js"></script>
    <script src="assets/vendor/glightbox/js/glightbox.min.js"></script>
    <script src="assets/vendor/swiper/swiper-bundle.min.js"></script>
    <script src="assets/vendor/aos/aos.js"></script>
    <script src="assets/vendor/php-email-form/validate.js"></script>

    <!-- Template Main JS File -->
    <script src="assets/js/main.js"></script>
    <script>
    window.onscroll = function() {
        removeBackground()

    }

    function removeBackground() {
        var navbars = document.getElementById('navbar');
        if (
            document.body.scrollTop > 20 ||
            document.documentElement.scrollTop > 20
        ) {
            navbar.style.background = "none";

        } else {
            navbar.style.background = "black";
        }
    }
    </script>

</body>

</html>