<!--Main Navigation-->
<header>
    <link rel="stylesheet" href="/style/styles.css" class="css">

    <!-- Animated navbar-->
    <nav class="navbar navbar-light 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="/">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">Support</a>
                    </li>
                </ul>

            </div>
            <ul class="navbar-nav">
                <li class="nav-item px-2">
                    <div class="btn-group shadow-0">
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button"
                        data-mdb-toggle="dropdown" aria-expanded="false">
                        Settings
                    </a>
                    <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                        <li>
                            <a class="dropdown-item" href="/wifi">Account</a>
                        </li>
                        <li>
                            <a class="dropdown-item" href="/wifi">Change Password</a>
                        </li>

                        <li>
                            <a href="/" class="btn btn-link text-danger"><i class="fas fa-user">
                                    Log Out</i></a>
                        </li>

                    </ul>
                </li>

        </div>
        </li>
        </ul>
        </div>

    </nav>
    <!-- Animated navbar -->


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