<?php
$current_page = basename($_SERVER['PHP_SELF']);
?>
<!-- click to top btn -->
<button id="scrollTopBtn">
  <i class="bi bi-arrow-up"></i>
</button>

<header>

  <nav class="navbar navbar-expand-lg custom-navbar">

    <div class="container-fluid">

      <a class="navbar-brand d-lg-none" href="#">
        <img src="./assets/images/F-studio.webp" class="img-fluid">

      </a>

      <button class="navbar-toggler border-0" type="button" data-bs-toggle="offcanvas" data-bs-target="#mobileMenu">

        <img src="./assets/images/icons/menu.webp" class="img-fluid" alt="menu" width="32">

      </button>
      <ul class="navbar-nav nav-left me-auto d-none d-lg-flex">

        <li class="nav-item">
          <a class="nav-link <?php if ($current_page == 'index.php') {
                                echo 'active';
                              } ?>" href="index.php">Home</a>
        </li>


        <li class="nav-item">
          <a class="nav-link <?php if ($current_page == 'about.php') {
                                echo 'active';
                              } ?>" href="about.php">About Us</a>
        </li>

        <li class="nav-item dropdown custim-dropdown">

          <a class="nav-link dropdown-toggle <?php if ($current_page == 'services.php') {
                                                echo 'active';
                                              } ?>"
            href="services.php" role="button" data-bs-toggle="dropdown">

            Services

          </a>

          <ul class="dropdown-menu">

            <li class="dropdown-submenu">
              <a class="dropdown-item" href="hari-services.php">Hair Services</a>
              <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="premium-hair-cut.php">Premium Hair Cut</a></li>
                <li><a class="dropdown-item" href="comming-soon.php ">Hair Colour</a></li>
                <li><a class="dropdown-item" href="comming-soon.php ">Botox Bliss Treatment</a></li>
                <li><a class="dropdown-item" href="comming-soon.php ">Nanoplastia Hair Treatment</a></li>
                <li><a class="dropdown-item" href="comming-soon.php ">Hair Spa</a></li>
                <li><a class="dropdown-item" href="comming-soon.php ">Korean Hair Spa</a></li>
              </ul>
            </li>

            <li class="dropdown-submenu">
              <a class="dropdown-item " href="facial-and-skin-service.php">Facial & Skin Services</a>
              <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="hydra-facial.php">FTV Signature Facial</a></li>
                <li><a class="dropdown-item" href="comming-soon.php">Hydra Facial</a></li>
                <li><a class="dropdown-item" href="comming-soon.php">Radiance Facial Treatment</a></li>
                <li><a class="dropdown-item" href="comming-soon.php">Korean Facial</a></li>
              </ul>
            </li>

            <li class="dropdown-submenu">
              <a class="dropdown-item " href="beauty-and-grooming.php">Beauty & Grooming</a>
              <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="threading.php">Threading</a></li>
                <li><a class="dropdown-item" href="comming-soon.php">Waxing</a></li>
                <li><a class="dropdown-item" href="comming-soon.php">Pedicure</a></li>
                <li><a class="dropdown-item" href="comming-soon.php">Manicure</a></li>
                <li><a class="dropdown-item" href="comming-soon.php">Foot Reflexology</a></li>
                <li><a class="dropdown-item" href="comming-soon.php">Head Massage</a></li>
              </ul>
            </li>
            <li><a class="dropdown-item" href="nail-art.php">Nails</a></li>
            <li><a class="dropdown-item" href="comming-soon.php">Makeup</a></li>
            <li><a class="dropdown-item" href="comming-soon.php">Hair Do</a></li>


          </ul>

        </li>
      </ul>

      <a class="navbar-brand mx-auto logo d-none d-lg-block" href="index.php">
        <img src="./assets/images/F-studio.webp" class="img-fluid">
      </a>

      <ul class="navbar-nav nav-right ms-auto d-none d-lg-flex">

        <li class="nav-item">
          <a class="nav-link <?php if ($current_page == 'gallery.php') {
                                echo 'active';
                              } ?>" href="gallery.php">Gallery</a>
        </li>

        <li class="nav-item">
          <a class="nav-link <?php if ($current_page == 'blog.php') {
                                echo 'active';
                              } ?>" href="blog.php">Blog</a>
        </li>

        <li class="nav-item">
          <a class="nav-link <?php if ($current_page == 'contact.php') {
                                echo 'active';
                              } ?>" href="contact.php">Contact</a>
        </li>

      </ul>
    </div>
  </nav>
  <div class="navbar-divider"></div>

  <div class="offcanvas offcanvas-start custom-offcanvas" tabindex="-1" id="mobileMenu">
    <div class="offcanvas-header ">
      <a href="index.php">
        <img src="./assets/images/F-studio.webp" alt="Logo" class="mobile-logo">
      </a>
      <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
    </div>

    <div class="offcanvas-body d-flex flex-column justify-content-between">

      <ul class="navbar-nav mobile-menu">

        <li class="nav-item">
          <a class="nav-link <?php if ($current_page == 'index.php') {
                                echo 'active';
                              } ?>" href="index.php">
            <i class="bi bi-house-door"></i> Home
          </a>
        </li>

        <li class="nav-item dropdown custom-dropdown">

          <a class="nav-link dropdown-toggle" href="services.php">
            <i class="bi bi-grid"></i> Services
          </a>

          <ul class="dropdown-menu">

            <li class="dropdown-submenu">
              <a class="dropdown-item submenu-toggle" href="hari-services.php">Hair Services</a>

              <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="premium-hair-cut.php">Premium Hair Cut</a></li>
                <li><a class="dropdown-item" href="comming-soon.php">Hair Colour</a></li>
                <li><a class="dropdown-item" href="comming-soon.php">Botox Bliss Treatment</a></li>
                <li><a class="dropdown-item" href="comming-soon.php">Nanoplastia Hair Treatment</a></li>
                <li><a class="dropdown-item" href="comming-soon.php">Hair Spa</a></li>
                <li><a class="dropdown-item" href="comming-soon.php">Korean Hair Spa</a></li>
              </ul>
            </li>

            <li class="dropdown-submenu">
              <a class="dropdown-item submenu-toggle" href="facial-and-skin-service.php">Facial & Skin Services</a>

              <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="ftv-signature-facial.php">FTV Signature Facial</a></li>
                <li><a class="dropdown-item" href="comming-soon.php">Hydra Facial</a></li>
                <li><a class="dropdown-item" href="comming-soon.php">Radiance Facial Treatment</a></li>
                <li><a class="dropdown-item" href="comming-soon.php">Korean Facial</a></li>
              </ul>
            </li>

            <li class="dropdown-submenu">
              <a class="dropdown-item submenu-toggle" href="beauty-and-grooming.php">Beauty & Grooming</a>

              <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="threading.php">Threading</a></li>
                <li><a class="dropdown-item" href="comming-soon.php">Waxing</a></li>
                <li><a class="dropdown-item" href="comming-soon.php">Pedicure</a></li>
                <li><a class="dropdown-item" href="comming-soon.php">Manicure</a></li>
                <li><a class="dropdown-item" href="comming-soon.php">Foot Reflexology</a></li>
                <li><a class="dropdown-item" href="comming-soon.php">Head Massage</a></li>
              </ul>
            </li>

            <li><a class="dropdown-item" href="nails.php">Nails</a></li>
            <li><a class="dropdown-item" href="comming-soon.phpp">Makeup</a></li>
            <li><a class="dropdown-item" href="comming-soon.php">Hair Do</a></li>

          </ul>

        </li>
        <script>
          const dropdownToggle = document.querySelector('.dropdown-toggle');
          const dropdown = document.querySelector('.custom-dropdown');

          dropdownToggle.addEventListener('click', function(e) {
            e.preventDefault();
            dropdown.classList.toggle('open');
          });

          document.addEventListener('click', function(e) {
            if (!e.target.closest('.custom-dropdown')) {
              dropdown.classList.remove('open');
            }
          });
        </script>

        <li class="nav-item">
          <a class="nav-link <?php if ($current_page == 'about.php') {
                                echo 'active';
                              } ?>" href="about.php">
            <i class="bi bi-person"></i> About
          </a>
        </li>

        <li class="nav-item">
          <a class="nav-link <?php if ($current_page == 'gallery.php') {
                                echo 'active';
                              } ?>" href="gallery.php">
            <i class="bi bi-images"></i> Gallery
          </a>
        </li>

        <li class="nav-item">
          <a class="nav-link <?php if ($current_page == 'blog.php') {
                                echo 'active';
                              } ?>" href="blog.php">
            <i class="bi bi-journal-text"></i> Blog
          </a>
        </li>

        <li class="nav-item">
          <a class="nav-link <?php if ($current_page == 'contact.php') {
                                echo 'active';
                              } ?>" href="contact.php">
            <i class="bi bi-envelope"></i> Contact
          </a>
        </li>

      </ul>

      <div class="mobile-contact">

        <h6>Contact Us</h6>

        <p>
          <i class="bi bi-telephone me-2"></i>
          <a href="tel:+919677902173" target="_blank">+91 9876543210</a>
        </p>

        <p>
          <i class="bi bi-envelope me-2"></i>
          <a href="mailto:info@fstudio.com" target="_blank">info@fstudio.com</a>
        </p>

        <p>
          <i class="bi bi-geo-alt me-2"></i>
          <a href="https://share.google/rVSktRjBXrhKYUpCX" target="_blank">No 31, Bharathi Park 7th Cross Rd, Saibaba Colony, Coimbatore, Tamil Nadu – 641011 </a>
        </p>

        <div class="mobile-social">
          <a href="https://www.facebook.com/profile.php?id=61583901074665" target="_blank"><i class="bi bi-facebook"></i></a>
          <a href="https://www.instagram.com/fashion_salon_cbe/" target="_blank"><i class="bi bi-instagram"></i></a>
          <a href="https://wa.me/917338928824?text=Hello%20I%20would%20like%20to%20book%20an%20appointment." target="_blank"><i class="bi bi-whatsapp"></i></a>
          <a href="https://www.youtube.com/@FtvSalonCbe" target="_blank"><i class="bi bi-youtube"></i></a>
        </div>

      </div>


    </div>

  </div>
</header>


<!-- <header>

  <nav class="navbar navbar-expand-lg custom-navbar">

    <div class="container-fluid">

      <a class="navbar-brand d-lg-none" href="#">
        <img src="./assets/images/F-studio.webp" class="img-fluid">
      </a>

      <button class="navbar-toggler border-0" type="button" data-bs-toggle="offcanvas" data-bs-target="#mobileMenu">
        <img src="./assets/images/icons/menu.webp" class="img-fluid" alt="menu" width="32">
      </button>

      <ul class="navbar-nav nav-left me-auto d-none d-lg-flex">

        <li class="nav-item">
          <a class="nav-link <?php if ($current_page == 'index.php') {
                                echo 'active';
                              } ?>" href="#">Home</a>
        </li>

        <li class="nav-item">
          <a class="nav-link <?php if ($current_page == 'about.php') {
                                echo 'active';
                              } ?>" href="#">About Us</a>
        </li>

        <li class="nav-item dropdown custim-dropdown">

          <a class="nav-link dropdown-toggle <?php if ($current_page == 'services.php') {
                                                echo 'active';
                                              } ?>" href="#" role="button" data-bs-toggle="dropdown">
            Services
          </a>

          <ul class="dropdown-menu">

            <li class="dropdown-submenu">
              <a class="dropdown-item" href="#">Hair Services</a>
              <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#">Premium Hair Cut</a></li>
                <li><a class="dropdown-item" href="#">Hair Colour</a></li>
                <li><a class="dropdown-item" href="#">Botox Bliss Treatment</a></li>
                <li><a class="dropdown-item" href="#">Nanoplastia Hair Treatment</a></li>
                <li><a class="dropdown-item" href="#">Hair Spa</a></li>
                <li><a class="dropdown-item" href="#">Korean Hair Spa</a></li>
              </ul>
            </li>

            <li class="dropdown-submenu">
              <a class="dropdown-item" href="#">Facial & Skin Services</a>
              <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#">FTV Signature Facial</a></li>
                <li><a class="dropdown-item" href="#">Hydra Facial</a></li>
                <li><a class="dropdown-item" href="#">Radiance Facial Treatment</a></li>
                <li><a class="dropdown-item" href="#">Korean Facial</a></li>
              </ul>
            </li>

            <li class="dropdown-submenu">
              <a class="dropdown-item" href="#">Beauty & Grooming</a>
              <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#">Threading</a></li>
                <li><a class="dropdown-item" href="#">Waxing</a></li>
                <li><a class="dropdown-item" href="#">Pedicure</a></li>
                <li><a class="dropdown-item" href="#">Manicure</a></li>
                <li><a class="dropdown-item" href="#">Foot Reflexology</a></li>
                <li><a class="dropdown-item" href="#">Head Massage</a></li>
              </ul>
            </li>

            <li><a class="dropdown-item" href="#">Nails</a></li>
            <li><a class="dropdown-item" href="#">Makeup</a></li>
            <li><a class="dropdown-item" href="#">Hair Do</a></li>

          </ul>

        </li>

      </ul>

      <a class="navbar-brand mx-auto logo d-none d-lg-block" href="#">
        <img src="./assets/images/F-studio.webp" class="img-fluid">
      </a>

      <ul class="navbar-nav nav-right ms-auto d-none d-lg-flex">

        <li class="nav-item">
          <a class="nav-link <?php if ($current_page == 'gallery.php') {
                                echo 'active';
                              } ?>" href="#">Gallery</a>
        </li>

        <li class="nav-item">
          <a class="nav-link <?php if ($current_page == 'blog.php') {
                                echo 'active';
                              } ?>" href="#">Blog</a>
        </li>

        <li class="nav-item">
          <a class="nav-link <?php if ($current_page == 'contact.php') {
                                echo 'active';
                              } ?>" href="#">Contact</a>
        </li>

      </ul>

    </div>

  </nav>

  <div class="navbar-divider"></div>

  <div class="offcanvas offcanvas-start custom-offcanvas" tabindex="-1" id="mobileMenu">

    <div class="offcanvas-header">
      <img src="./assets/images/F-studio.webp" alt="Logo" class="mobile-logo">
      <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
    </div>

    <div class="offcanvas-body d-flex flex-column justify-content-between">

      <ul class="navbar-nav mobile-menu">

        <li class="nav-item">
          <a class="nav-link <?php if ($current_page == 'index.php') {
                                echo 'active';
                              } ?>" href="#">
            <i class="bi bi-house-door"></i> Home
          </a>
        </li>

        <li class="nav-item dropdown custom-dropdown">

          <a class="nav-link dropdown-toggle <?php if ($current_page == 'services.php') {
                                                echo 'active';
                                              } ?>" href="#" data-bs-toggle="dropdown">
            <i class="bi bi-grid"></i> Services
          </a>

          <ul class="dropdown-menu">

            <li class="dropdown-submenu">
              <a class="dropdown-item dropdown-toggle" href="#">Hair Services</a>

              <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#">Premium Hair Cut</a></li>
                <li><a class="dropdown-item" href="#">Hair Colour</a></li>
                <li><a class="dropdown-item" href="#">Botox Bliss Treatment</a></li>
                <li><a class="dropdown-item" href="#">Nanoplastia Hair Treatment</a></li>
                <li><a class="dropdown-item" href="#">Hair Spa</a></li>
                <li><a class="dropdown-item" href="#">Korean Hair Spa</a></li>
              </ul>
            </li>

            <li class="dropdown-submenu">
              <a class="dropdown-item dropdown-toggle" href="#">Facial & Skin Services</a>

              <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#">FTV Signature Facial</a></li>
                <li><a class="dropdown-item" href="#">Hydra Facial</a></li>
                <li><a class="dropdown-item" href="#">Radiance Facial Treatment</a></li>
                <li><a class="dropdown-item" href="#">Korean Facial</a></li>
              </ul>
            </li>

            <li class="dropdown-submenu">
              <a class="dropdown-item dropdown-toggle" href="#">Beauty & Grooming</a>

              <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#">Threading</a></li>
                <li><a class="dropdown-item" href="#">Waxing</a></li>
                <li><a class="dropdown-item" href="#">Pedicure</a></li>
                <li><a class="dropdown-item" href="#">Manicure</a></li>
                <li><a class="dropdown-item" href="#">Foot Reflexology</a></li>
                <li><a class="dropdown-item" href="#">Head Massage</a></li>
              </ul>
            </li>

            <li><a class="dropdown-item" href="#">Nails</a></li>
            <li><a class="dropdown-item" href="#">Makeup</a></li>
            <li><a class="dropdown-item" href="#">Hair Do</a></li>

          </ul>

        </li>

        <li class="nav-item">
          <a class="nav-link <?php if ($current_page == 'about.php') {
                                echo 'active';
                              } ?>" href="#">
            <i class="bi bi-person"></i> About
          </a>
        </li>

        <li class="nav-item">
          <a class="nav-link <?php if ($current_page == 'gallery.php') {
                                echo 'active';
                              } ?>" href="#">
            <i class="bi bi-images"></i> Gallery
          </a>
        </li>

        <li class="nav-item">
          <a class="nav-link <?php if ($current_page == 'blog.php') {
                                echo 'active';
                              } ?>" href="#">
            <i class="bi bi-journal-text"></i> Blog
          </a>
        </li>

        <li class="nav-item">
          <a class="nav-link <?php if ($current_page == 'contact.php') {
                                echo 'active';
                              } ?>" href="#">
            <i class="bi bi-envelope"></i> Contact
          </a>
        </li>

      </ul>

      <div class="mobile-contact">

        <h6>Contact Us</h6>

        <p>
          <i class="bi bi-telephone me-2"></i>
          <a href="tel:+919677902173" target="_blank">+91 9876543210</a>
        </p>

        <p>
          <i class="bi bi-envelope me-2"></i>
          <a href="mailto:info@fstudio.com" target="_blank">info@fstudio.com</a>
        </p>

        <p>
          <i class="bi bi-geo-alt me-2"></i>
          <a href="https://share.google/rVSktRjBXrhKYUpCX" target="_blank">No 31, Bharathi Park 7th Cross Rd, Saibaba Colony, Coimbatore, Tamil Nadu – 641011 </a>
        </p>

        <div class="mobile-social">
          <a href="https://www.facebook.com/profile.php?id=61583901074665" target="_blank"><i class="bi bi-facebook"></i></a>
          <a href="https://www.instagram.com/fashion_salon_cbe/" target="_blank"><i class="bi bi-instagram"></i></a>
          <a href="https://wa.me/917338928824?text=Hello%20I%20would%20like%20to%20book%20an%20appointment." target="_blank"><i class="bi bi-whatsapp"></i></a>
          <a href="https://www.youtube.com/@FtvSalonCbe" target="_blank"><i class="bi bi-youtube"></i></a>
        </div>

      </div>

    </div>

  </div>

</header> -->