<!--Navbar section (bootstrap)-->
<div class="wrap w-100">
    <div class="row align-items-center m-0 d-none d-md-flex sticky-top">
        <div class="col-5 text-center rounded-pill" >
            <ul class="d-flex list-unstyled justify-content-center m-0">
                <li class="nav-item">
                    <a class="nav-link" href="#">Rooms</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="../services.php">Services</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="index.php">News</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Gallery</a>
                </li>
            </ul>
        </div>
        <div class="col-2 bg-transparent px-3">
            <a href="index.php" style="text-decoration: none;">
                <img src="./images/logo-white.png" class="logo-img"/>
            </a>
        </div>
        <div class="col-5 text-center rounded-pill">
            <ul class="d-flex list-unstyled justify-content-center m-0">
                <li class="nav-item">
                    <a class="nav-link" href="../about.php">About</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Contact</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-bs-toggle="modal" data-bs-target="#loginBackdrop" style="cursor: pointer;">Login</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-bs-toggle="modal" data-bs-target="#registerBackdrop" style="cursor: pointer;">Register</a>
                </li>
            </ul>
        </div>
    </div>
    <!--Navbar responsive (css)-->
    <div>
        <div class="nav-parent sticky-top">
            <div class="nav-wrapper" style="margin-top: -20px;">
                <div class="branding">
                    <img src="./images/logo-white.png" style="width: 120px; margin-left: -40px;"/>
                </div>
                <a class="burger" onclick="burgerButton()">
                    <div class="bar"></div>
                    <div class="bar"></div>
                </a>
            </div>
        </div>
        <div class="burger-links">
            <ul>
                <li class="nav-item">
                    <a href="../index.php" class="nav-link">Home</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">Rooms</a>
                </li>
                <li class="nav-item">
                    <a href="../services.php" class="nav-link">Services</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">Gallery</a>
                </li>
                <li class="nav-item">
                    <a href="../about.php" class="nav-link">About</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">Contact</a>
                </li>
                <li style="padding-top: 50px">
                    <buton type="button" class="nav-link btn shadow-none" data-bs-toggle="modal" data-bs-target="#loginBackdrop" style="border: 1px solid white; font-weight: 500; color: white;">Login</button>
                </li>
                <li style="padding-top: 5px">
                    <buton type="button" class="nav-link btn shadow-none" data-bs-toggle="modal" data-bs-target="#registerBackdrop" style="background-color: #EEEEEE; font-weight: 500; color: black;">Register</button>
                </li>
            </ul>
        </div>
    </div>
</div>
<!--backdrop login-->
<div class="modal fade" id="loginBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <form>
                <div class="modal-header" style="border: none;">
                    <button type="reset" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="mb-3">
                    <h5 class="text-center" style="font-size: 22px;">Login</h5>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label">Email address</label>
                        <input type="email" class="form-control shadow-none">
                    </div>
                    <div class="mb-2">
                        <label class="form-label">Password</label>
                        <input type="password" class="form-control shadow-none">
                    </div>
                    <div class="mb-3">
                        <a href="javascript: void(0)" style="font-size: 14px; color: gray;">Forgot your password?</a>
                    </div>
                    <div class="mb-3 d-grid">
                        <button type="submit" class="btn btn-dark shadow-none d-block ">Login</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<!--backdrop register-->
<div class="modal fade" id="registerBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <form>
                <div class="modal-header" style="border: none;">
                    <button type="reset" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="mb-3">
                    <h5 class="text-center" style="font-size: 22px;">Register</h5>
                </div>
                <div class="container-fluid">
                    <div class="row">
                        <div class="mb-3 col-md-6">
                            <label>First Name</label>
                            <input type="text" class="form-control shadow-none"/>
                        </div>
                        <div class="mb-3 col-md-6">
                            <label>Last Name</label>
                            <input type="text" class="form-control shadow-none"/>
                        </div>
                        <div class="mb-3 col-md-6">
                            <label>Phone Number</label>
                            <input type="tel" class="form-control shadow-none"/>
                        </div>
                        <div class="mb-3 col-md-6">
                            <label>Date of Birth</label>
                            <input type="date" class="form-control shadow-none"/>
                        </div>
                        <div class="mb-3 col-md-12">
                            <label>Address</label>
                            <textarea type="text" rows="3" class="form-control shadow-none" style="resize: none;"></textarea>
                        </div>
                        <div class="mb-3 col-md-12">
                            <label>Email</label>
                            <input type="email" class="form-control shadow-none"/>
                        </div>
                        <div class="mb-3 col-md-6">
                            <label>Password</label>
                            <input type="password" class="form-control shadow-none"/>
                        </div>
                        <div class="mb-5 col-md-6">
                            <label>Confirm Password</label>
                            <input type="password" class="form-control shadow-none"/>
                        </div>
                        <div class="mb-3 d-grid">
                            <button type="submit" class="btn btn-dark shadow-none d-block ">Register</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>