<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta content="width=device-width, initial-scale=1.0" name="viewport">
  <title><%= metaTitle %></title>
  <meta name="description" content="<%= metaDescription %>">
  <meta name="keywords" content="<%= metaKeywords %>">

  <!-- Favicons -->
  <link href="/img/favicon.png" rel="icon">
  <link href="/img/apple-touch-icon.png" rel="apple-touch-icon">

  <!-- Fonts -->
  <link href="https://fonts.googleapis.com" rel="preconnect">
  <link href="https://fonts.gstatic.com" rel="preconnect" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">

  <!-- Vendor CSS Files -->
  <link href="/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  <link href="/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
  <link href="/vendor/aos/aos.css" rel="stylesheet">
  <link href="/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
  <link href="/vendor/fontawesome-free/css/all.min.css" rel="stylesheet">
  <link href="/vendor/glightbox/css/glightbox.min.css" rel="stylesheet">

  <!-- Main CSS File -->
  <link href="/css/main.css" rel="stylesheet">

</head>

<body class="index-page">

  <header id="header" class="header d-flex align-items-center fixed-top">
    <div class="container-fluid container-xl position-relative d-flex align-items-center">

      <a href="/" class="logo d-flex align-items-center me-auto">
        <!-- Uncomment the line below if you also wish to use an image logo -->
        <img src="/img/logo.png" alt="">
        <h1 class="sitename">CASA FAMILIA HOTEL</h1>
      </a>

    <nav id="navmenu" class="navmenu">
      <ul>
        <li><a href="/" class="<%= current_route === '/' ? 'active' : '' %>">Home</a></li>
        <li><a href="/accommodation" class="<%= current_route === '/accommodation' ? 'active' : '' %>">ACCOMMODATION</a></li>
        <li><a href="/facilities" class="<%= current_route === '/facilities' ? 'active' : '' %>">FACILITIES</a></li>
        <li><a href="/events" class="<%= current_route === '/events' ? 'active' : '' %>">EVENTS</a></li>
        <li><a href="/dining" class="<%= current_route === '/dining' ? 'active' : '' %>">DINING</a></li>
        <li class="dropdown"><a href="#"><span>More</span> <i class="bi bi-chevron-down toggle-dropdown"></i></a>
          <ul>
            <li><a href="/promo" class="<%= current_route === '/promo' ? 'active' : '' %>">Promo</a></li>
            <li><a href="/#about-us" class="<%= current_route === '/#about-us' ? 'active' : '' %>">About Us</a></li>
            <li><a href="/#gallery" class="<%= current_route === '/#gallery' ? 'active' : '' %>">Gallery</a></li>
            <li><a href="/#blog-news" class="<%= current_route === '/#blog-news' ? 'active' : '' %>">Blog/News</a></li>
            <li><a href="/#faq" class="<%= current_route === '/#faq' ? 'active' : '' %>">FAQ</a></li>
          </ul>
        </li>
        <li><a href="/contact" class="<%= current_route === '/contact' ? 'active' : '' %>">Contact</a></li>
        <li><a href="/careers" class="<%= current_route === '/careers' ? 'active' : '' %>">Careers</a></li>
      </ul>
      <i class="mobile-nav-toggle d-xl-none bi bi-list"></i>
    </nav>
    
    <a class="cta-btn <%= current_route === '/book-now' ? 'active' : '' %>" href="https://www.booking.com/hotel/ph/casa-familia-restaurant-cafe-amp-events-place.en-gb.html">BOOK NOW</a>

    </div>
  </header>