<header class="p-3  text-dark fixed-stop" id="header" style="background:rgba(255,255,255,.65)">

<a href="javascript:;" class="me-3 d-block d-md-none" id="btn-canvas" data-bs-toggle="offcanvas" data-bs-target="#offcanvasLeft" aria-controls="offcanvasLeft"><i class="bi bi-three-dots-vertical text-dark fs-2 fw-bold"></i></a>




<div class="container">
  <div class="d-flex flex-wrap align-items-center justify-content-center justify-content-sm-left">
    <div >
      <a href="./home" class="d-flex align-items-center mt-2 mt-md-0 pe-0 pe-lg-4 mb-2 mb-lg-0 text-white text-decoration-none d-none d-sm-block">
        <img alt="CABC" width="150" height="auto" src="assets/img/logo.svg" class="animation" data-animated="fade-in-down-1s" data-delay="">
      </a>

      <a href="./home" class="d-block d-sm-none" >
        <img alt="CABC" width="90" height="auto" src="assets/img/logo.svg" class="animation" data-animated="fade-in-down-1s" data-delay="">
      </a>
     
    </div>

    <div class="header-nav-main col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0 d-none d-md-block text-4 animation" class="animation" data-animated="fade-in-left-1s" data-delay="" style="padding-left: 80px">
    
  </div>

   <div class="header-nav-main  d-none d-md-block">
      <ul class="nav nav-pills">
    <li class="nav-item"><a href="<?=WEB?>home" class="nav-link "><?= _("HOME");?></a>
    </li>
    <li class="nav-item"><a href="<?=WEB?>ofertas.php" class="nav-link "><?= _("OFERTAS");?></a>
    </li>
    <li class="nav-item"><a href="<?=WEB?>habitaciones.php" class="nav-link "><?= _("HABITACIONES");?></a>
    </li>
    <li class="nav-item"><a href="<?=WEB?>eventos.php" class="nav-link "><?= _("EVENTOS");?></a>
    </li>
    <li class="nav-item"><a href="<?=WEB?>galeria.php" class="nav-link "><?= _("GALERIA");?></a>
    </li>
    <li class="nav-item"><a href="<?=WEB?>contacto.php" class="nav-link "><?= _("CONTACTO");?></a>
    </li>



 

    </ul>
    </div>
    <ul class="nav nav-pills d-none d-md-block">
      <li class="nav-item"><a href="#" class="btn btn-outline-primary" style="border-radius: 270px !important;">RESERVAS</a></li>
    </ul>
   
  </div>
</div>
</header>




<div class="offcanvas offcanvas-start bg-tertiary" tabindex="-1" id="offcanvasLeft" aria-labelledby="offcanvasLeftLabel">
<div class="offcanvas-header">
<a href="javascript:;" class="mmenu-toggle-btn-close text-color-primary" title="Toggle menu" data-bs-dismiss="offcanvas" aria-label="Close">
  <i class="bi bi-x fs-1 text-primary"></i>
</a> 

</div>
<div class="offcanvas-body">
<ul class="mobile-side-menu">


<li><a href="<?=WEB?>ofertas.php" class="p-0"><?= _("OFERTAS");?></a></li>
<li><a href="<?=WEB?>habitaciones.php" class="p-0"><?= _("HABITACIONES");?></a></li>
<li><a href="<?=WEB?>eventos.php" class="p-0"><?= _("EVENTOS");?></a></li>
<li><a href="<?=WEB?>galeria.php" class="p-0"><?= _("GALERIA");?></a></li>
<li><a href="<?=WEB?>contacto.php" class="p-0"><?= _("CONTACTO");?></a></li>



  
</ul>	 
<hr>
<ul class="mobile-side-menu">


<li><a href="<?=WEB?>login" class="p-0"><?= _("reservar");?></a></li>
            
</ul>	




<img src="assets/img/logo-light-center.svg" alt="" class="mmenu-logo"/>

</div>
</div>


<div id="divide-header"></div>  
