<!--Main Navigation-->
<header>

    <!-- Animated navbar-->
    <nav class="navbar navbar-expand-lg fixed-top navbar-scroll">
        <div class="container-fluid">
            <button class="navbar-toggler ps-0" type="button" data-mdb-toggle="collapse"
                data-mdb-target="#navbarExample01" aria-controls="navbarExample01" aria-expanded="false"
                aria-label="Toggle navigation">
                <span class="navbar-toggler-icon d-flex justify-content-start align-items-center">
                    <i class="fas fa-bars"></i>
                </span>
            </button>
            <a class="navbar-brand" style="margin: 0; margin-right: auto;" href="/">
                <img src="/img/logo-xl.png" height="40px" alt="Witchcraft">
            </a>

            <div class="collapse navbar-collapse" id="navbarExample01">
                <ul class="navbar-nav me-auto mb-2 mb-lg-0" style="margin-left: 10px;">
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button"
                            data-mdb-toggle="dropdown" aria-expanded="false">
                            Products
                        </a>
                        <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                            <li>
                                <a class="dropdown-item" href="/pakages">Internet</a>
                            </li>
                            <li>
                                <a class="dropdown-item" href="/wifi">Wi-Fi</a>
                            </li>

                        </ul>
                    </li>
                    <li class="nav-item">
                        <!-- <a class="nav-link" href="/contact" target="_blank">Contact</a> -->
                        <a
                        type="button"
                        class="nav-link"
                        data-mdb-toggle="modal"
                        data-mdb-target="#exampleModal"   
                      >
                      Contact
                    </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/reg" target="_blank">Reg</a>
                    </li>
                </ul>
                <ul class="navbar-nav flex-row" style="margin-left: auto;">

                    <!-- Icons -->
                    <li class="nav-item">
                        <a class="nav-link pe-2" href="https://www.youtube.com/channel/UC5CF7mLQZhvx8O5GODZAhdA"
                            rel="nofollow" target="_blank">
                            <i class="fab fa-youtube"></i>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link px-2" href="https://www.facebook.com/mdbootstrap" rel="nofollow"
                            target="_blank">
                            <i class="fab fa-facebook-f"></i>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link px-2" href="https://twitter.com/MDBootstrap" rel="nofollow" target="_blank">
                            <i class="fab fa-twitter"></i>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link ps-2" href="https://github.com/mdbootstrap/mdb-ui-kit" rel="nofollow"
                            target="_blank">
                            <i class="fas fa-envelope"></i>
                        </a>
                    </li>
                </ul>
            </div>
            <ul class="navbar-nav">
                <li class="nav-item px-2">
                    <div class="btn-group shadow-0">
                        <!-- <a href="#!" class="btn btn-white"> Check availability</a> -->
                        <a href="/login" class="btn btn-primary"><i class="fas fa-user">
                                Login</i></a>
                    </div>
                </li>
            </ul>
        </div>

    </nav>
    <!-- Animated navbar -->
</header>
<!--Main Navigation-->
