<?php
require_once('config.php');
$light_mode = false;
$small_footer = false;
?>
<!doctype html>
<html lang="en">
  <head>
      <?php 
      // global head tag stylesheet
      /* **************************************** */
      include_once("components/head.php");
      /* **************************************** */
      // global head tag stylesheet
      ?>  

    <!-- CUSTOM CSS VIEW --> 
    <style>
      .franjas {
        background-image: linear-gradient(to right, white 11.1%, red 11.1% 22.2%, white 22.2% 33.3%, 
                    red 33.3% 44.4%, white 44.4% 55.5%, red 55.5% 66.6%, 
                    white 66.6% 77.7%, red 77.7% 88.8%, white 88.8% 100%);
        display: inline-block;
        border: 1px solid #dfdfdf;
        
      }

      h1 > .franjas{
        height: 35px;
        width: 100px;
      }


      h2 > .franjas{
        width: 50px;
        height: 28px;
      }

      @media (max-width: 575px) {
        h1 > .franjas{
          height: 25px !important;
          width: 55px !important;
        }

        #header.fixed-stop {
          max-height: 70px !important;
        }
        #divide-header {
          height: 70px !important;
        }
        #reserver-container {
            margin-top: -380px !important;
            padding-bottom: 15px !important;
        }
      }

      .newdate{
        background: red;
        color: #fff;
        position: absolute;
        top: 10px;
        left: 10px;
        padding: 4px 10px;
        font-weight: bold;
        font-family: 'Anton', sans-serif;
      }

      .newview{
        background: red;
        color: #fff;
        position: relative;
        bottom: 10px;
        left: 10px;
        padding: 2px 8px;
        font-weight: bold;
        width: 100px;
        margin-bottom: -20px;
        margin-top: 10px;
      }

      #reserver-container{
        margin-top: -260px;
  padding-bottom: 85px;
  z-index: 3 !important;
  display: block;
  position: relative;
      }
      .reserva-home{
        padding: 30px;
  background: rgba(0,0,0,0.4);
      }


.card-grid {
  .card-grid-lg{
    height: 560px;
  }
  .card-grid-sm{
    height: calc(280px - calc(var(--bs-gutter-y) / 2));
  }
}
@include media-breakpoint-down(md) {
  .card-grid .card-grid-lg{
    height: 400px;
  }
}

.card-fold {
  position: relative;
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba($black, 0);
}
.card-fold:after {
  position: absolute;
  content: '';
  height: 0;
  width: 0;
  bottom: 0;
  right: 0;
  z-index: 1000;
  background: linear-gradient(-45deg, var(--#{$prefix}body-bg) 45%, var(--#{$prefix}body-bg) 45%, $gray-400 50%, $white 70%);
  box-shadow: -5px -5px 5px rgba($black, 0.4);
  transition: 0.3s;
  border-radius: 20px;
}
.card:hover .card-fold:after,
.card:focus .card-fold:after,
.card:active .card-fold:after,
.card:hover.card-fold:after,
.card:focus.card-fold:after,
.card:active.card-fold:after  {
  width: 40px;
  height: 40px;
}

.card .card-img-overlay {
  z-index: 2;
}
.card.card-overlay-bottom::before {
  content: "";
  position: absolute;
  height: 50%;
  width: 100%;
  bottom: 0;
  left: 0;
  right: 0;
  background-image: -webkit-gradient(linear, left top, left bottom, from(transparent), to(black));
  background-image: linear-gradient(180deg, transparent, black);
  z-index: 1;
  border-radius: 20px;
}


    </style>
    <!-- CUSTOM CSS VIEW END --> 
  </head>

  <body>

    <main role="main" class="main">
    
    <?php 

      // global header menu 
      /* **************************************** */
          require_once("components/header.php");
      /* **************************************** */
      // global header end
    ?> 
    <!-- COMPONENT CAROSULE -->
    <section class="py-5 text-start position-relative overlay-opacity overlay-opacity-scale-4" style="background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-image: url(assets/img/header-eventos.webp);
}">
      <div class="container position-relative">
        <div class="row py-lg-5">
          <div class="col-12 mx-auto mt-5 text-white">
            <h1 class="fw-bold">Reuniones y Congresos</h1>
            <h3 class="font-secondary text-11"></h3>
            <p class="lead text-light"><i class="bi bi-arrow-bar-left"></i> <a href="<?=WEB?>evebtos.php" class="text-light">Volver</a></p>
            
          </div>
        </div>
        </div>
  </section>
    <!-- COMPONENT CAROSULE END -->


    <section class="py-5 card-grid ">
	<div class="container my-5"> 

      <div class="row justify-content-sm-center">
        <div class="col-12 col-sm-8">


        <h2 class="font-secondary">Realice una reunión impresionante con nosotros</h2>
        <p class="lead mb-4">Con 17 salas de reuniones modernas y bellamente decoradas. Nuestro Hotel ha sido el principal destino para reuniones y eventos en el centro de Las Condes. En nuestro hotel de cinco estrellas, el estilo atemporal, el lujo moderno y la planificación personalizada y los servicios de catering se unen para crear un escenario impresionante para eventos memorables. </p>
          

        
          <div class="row justify-content-center align-items-top  mb-4">

          <h4 class="fw-light mb-2 font-secondary">Reuniones y Convenciones</h4> 
            <div class="col">

                  <p>Ya sea que esté planeando un seminario de capacitación para 20 invitados o una reunión de ventas de la empresa o un banquete para 100 invitados, nuestros lugares combinan la elegancia atemporal con la sofisticación contemporánea.</p>

<small>* Valores para chilenos y residentes en el país se les debe sumar el pago del IVA. (Valor sujeto a tipo de cambio) y para turistas extranjeros exentos de impuesto  </small>
            </div>


            
            
          </div>


          <div class="row justify-content-center align-items-top  mb-4">

         

            <div class="d-grid mt-5">
							<a href="<?=WEB?>habitaciones" class="btn btn-lg btn-primary mb-0 text-light">RESERVAR AHORA</a>
						</div>
            
          </div>
          
        

     
        
        
        </div>
        <div class="col-12 col-sm-4">
        <img src="assets/img/salon-evento.png" class="w-100">
        </div>


        

       
       
      
      </div>
    </div>



      <div class=" animation" data-animated="fade-in-down-2s" data-delay="1000" id="reserver-all" style="position: absolute;
  z-index: 99;
  top: 130px;
  right: 20px;background: rgba(0,0,0,.7);
  padding: 20px; width: 180px;">
        <div class="row justify-content-md-center">
          
          <div class="col">
                      <div class="reserva-interior">

                                    <div class="input-group">
                                      <input type="date" class="form-control" placeholder="Desde" aria-label="Desde">
                                      <span class="input-group-text">to</span>
                                      <input type="date" class="form-control" placeholder="Hasta" aria-label="Hasta">
                                    </div>
                                    <button class="btn btn-primary w-100 h-100 pt-2 mt-2" type="submit">Reservar Ahora</button>
                                  </div>
                         
                      </div>
          </div>
        </div>
      </div>



</section>




      <div class=" animation" data-animated="fade-in-down-2s" data-delay="1000" id="reserver-all" style="position: absolute;
  z-index: 99;
  top: 130px;
  right: 20px;background: rgba(0,0,0,.7);
  padding: 20px; width: 180px;">
        <div class="row justify-content-md-center">
          
          <div class="col">
                      <div class="reserva-interior">

                                    <div class="input-group">
                                      <input type="date" class="form-control" placeholder="Desde" aria-label="Desde">
                                      <span class="input-group-text">to</span>
                                      <input type="date" class="form-control" placeholder="Hasta" aria-label="Hasta">
                                    </div>
                                    <button class="btn btn-primary w-100 h-100 pt-2 mt-2" type="submit">Reservar Ahora</button>
                                  </div>
                         
                      </div>
          </div>
        </div>
      </div>





    


 


</main>
    
    <?php 
      /* **************************************** */
      // footer
      require_once("components/footer.php");
      // footer end
      // script js global
      require_once('components/bottom.php');
      //  script js global end
      /* **************************************** */
    ?>        


    <!-- CUSTOM VIEW SCRIPT/LIBRARY END -->
    <script type="module" src="assets/js/views/home.js?<?=date('U')?>"></script>
    <!-- CUSTOM VIEW SCRIPT/LIBRARY END -->
   

    <script>
       window.addEventListener('scroll', function() {
          var scrollMessage = document.getElementById('header');
          // Si el desplazamiento vertical es mayor que 0, se ha desplazado hacia abajo.
          if (window.scrollY > 0) {
            scrollMessage.style.background = 'rgba(255,255,255,1)';
          } else {
            scrollMessage.style.background = 'rgba(255,255,255,.6)';
          }
        });
    </script>

  </body>
</html>
