Destinos

<header class="container-fluid fixed-top bg bg-color-white px-0 position position-z-3">
    <div class="container py-lg-2">
        <div class="row align-items-center justify-content-between">
            <div class="col-7 col-lg-2">
                <img src='../../../img/logo.png' alt="logo" class="img img-auto img-w" />
            </div>
            <div class="menu col-12 col-lg-10 p-0 d-lg-flex flex-lg-wrap">
                <nav class="list list-none d-flex flex-wrap align-items-center col-12 col-lg-7 order-lg-1">
                    <li class="item px-3 px-lg-2 col-12 col-lg-auto text-center">
                        <p class="text text-size-1-2 text-size-lg-1 m-0">Inicio</p>
                    </li>
                    <li class="item px-3 px-lg-2 col-12 col-lg-auto text-center active">
                        <p class="text text-size-1-2 text-size-lg-1 m-0">Hoteles</p>
                    </li>
                    <li class="item px-3 px-lg-2 col-12 col-lg-auto text-center">
                        <p class="text text-size-1-2 text-size-lg-1 m-0">Destinos</p>
                    </li>
                    <li class="item px-3 px-lg-2 col-12 col-lg-auto text-center">
                        <p class="text text-size-1-2 text-size-lg-1 m-0">Motivos de viaje</p>
                    </li>
                </nav>
                <div class="booking col-12 align-self-end col-lg-2 px-5 px-lg-1 mb-3 mb-lg-0 order-lg-4">
                    <button class="btn btn-round btn-round-primary text text-size-1-2 text-size-lg-1 px-3 px-lg-2 py-2 py-lg-1 mb-2 mb-lg-0 w-100 text text-uppercase text-w-bold">tus reservas</button>
                </div>
                <div class="social d-flex flex-wrap align-self-end align-self-lg-center px-4 justify-content-between pt-2 pt-lg-0 px-lg-1 order-lg-2">
                    <a href="" class="d-inline-block btn btn-reset ml-lg-1">
                        <img src="../../../img/icon_ins.png" alt="" class="img img-auto img-h-1-5">
                    </a>
                    <a href="" class="d-inline-block btn btn-reset ml-lg-1">
                        <img src="../../../img/icon_tw.png" alt="" class="img img-auto img-h-1-5">
                    </a>
                    <a href="" class="d-inline-block btn btn-reset ml-lg-1">
                        <img src="../../../img/icon_fb.png" alt="" class="img img-auto img-h-1-5">
                    </a>
                </div>
                <div class="c-menu-lenguage col-1 d-none d-lg-block order-lg-3 mr-0 ml-2 position-relative">
                    <span class="btn text ">
                        <i class="icon fas fa-globe-americas mr-2 d-none"></i> ES <i class="icon fas fa-chevron-down mr-2 "></i>
                    </span>
                    <div class="wrapper position-absolute bg bg-color-white">
                        <ul class="list list-none m-0 p-0 pl-0">
                            <li class="item ">
                                <a href="#" class="btn text ">EN</a>
                            </li>
                            <li class="item ">
                                <a href="#" class="btn text ">FR</a>
                            </li>
                            <li class="item ">
                                <a href="#" class="btn text ">DE</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="icons col-auto ml-auto d-lg-none">
                <button class="btn btn-reset text text-size-1-5 btn-open-menu">
                    <span class="icon icon-size-1-5 open">
                        <i class="fa fa-bars"></i>
                    </span>
                    <span class="icon icon-size-1-5 icon-color-primary close">
                        <i class="fa fa-times"></i>
                    </span>
                </button>
            </div>
        </div>
    </div>
</header>
<div class="s-hero container-fluid mb-5 px-0 overflow-hidden">
    <div class="row align-content-center align-items-center">
        <div class="main-carousel main-carousel-full dots dots-bullets dots-no-zoom dots-no-arrow col-12 px-0">
            <div class="item w-100 overflow-hidden">
                <img src="../../../img/dummy.png" alt="" class="img img-w img-auto img-h">
                <div class="circle position position-absolute position-z-1 bg bg-color-primary col-12 col-lg-3 pt-5 px-4 d-lg-flex flex-lg-wrap align-items-center text text-center text-lg-left">
                    <div class="wrapper position position-relative position-z-1 pt-3">
                        <p class="text text-w-light text-color-white text-uppercase text-size-2-5 mb-0">Descubre</p>
                        <p class="text text-w-bold text-color-white text-uppercase text-size-2-3 text-size-lg-4 text-lh-100 mb-3 mid">nuestros hoteles</p>
                        <p class="text text-w-light text-color-white text-size-1-5 px-3">Una oportunidad unica de conocer cuba</p>
                    </div>
                </div>
            </div>
            <div class="item w-100 overflow-hidden">
                <img src="../../../img/dummy.png" alt="" class="img img-w img-auto img-h">
                <div class="circle position position-absolute position-z-1 bg bg-color-primary col-12 col-lg-3 pt-5 px-4 d-lg-flex flex-lg-wrap align-items-center text text-center text-lg-left">
                    <div class="wrapper position position-relative position-z-1 pt-3">
                        <p class="text text-w-light text-color-white text-uppercase text-size-2-5 mb-0">Descubre</p>
                        <p class="text text-w-bold text-color-white text-uppercase text-size-2-3 text-size-lg-4 text-lh-100 mb-3 mid">nuestros hoteles</p>
                        <p class="text text-w-light text-color-white text-size-1-5 px-3">Una oportunidad unica de conocer cuba</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<section class="s-bubble contanier-fluid mb-5">
    <div class="container">
        <div class="row align-items-center">
            <div class="images col-12 col-lg-4">
                <img src="../../../img/bubble.png" alt="" class="img img-auto img-w">
            </div>
            <div class="col-12 col-lg-8">
                <h2 class="text text-color-primary text-w-bold text-size-2 text-size-lg-2-5 text-lh-120 mb-2 mb-lg-1">Descubre nuestros destinos</h2>
                <p class="text text-color-gray">Quisque cursus lacus a ultricies imperdiet. Maecenas ex arcu, dignissim a pellentesque molestie, sodales at risus. Cras neque odio, maximus ac magna in, mattis cursus metus. Aenean hendrerit velit ultricies, iaculis libero vel, pellentesque quam. Aliquam erat volutpat. Donec sed placerat velit, sed hendrerit sapien. Quisque pharetra risus sapien, in semper est finibus sed. Quisque mattis venenatis feugiat.</p>
            </div>
        </div>
    </div>
</section>
<section class="container mb-5 px-3">
    <div class="row align-items-lg-center">
        <div class="card thumb thumb_1 col-12 col-md-6 col-lg-4 col-xl-3 position-relative px-3 mb-5 align-self-end">
            <div class="wrapper overflow-hidden">
                <div class="images w-100 overflow-hidden">
                    <img src="../../../img/dummy.png" alt="Guardalavaca" class="img img-auto img-w img-h-290">
                </div>
                <div class="captions w-100 bg bg-color-secondary py-2 px-3 text-center">
                    <p class="text text-lh-100 text-w-bold text-color-white text-size-1-2 mb-1">Guardalavaca</p>
                    <p class="text text-lh-100 text-color-white m-0">2 hoteles</p>
                </div>
            </div>
            <div class="c-flag position position-absolute position-z-2">
                <img src="../../../img/flag.png" alt="flag-background" class="img img-auto">
                <p class="value text text-color-white m-0 text-center text-size-0-8 text-lh-100 position-absolute">Desde<span class="d-block text text-size-1-5 text-color-white text-family-primary text-w-bold">41,00€</span></p>
            </div>
        </div>
        <div class="card thumb thumb_1 col-12 col-md-6 col-lg-4 col-xl-3 position-relative px-3 mb-5 align-self-end">
            <div class="wrapper overflow-hidden">
                <div class="images w-100 overflow-hidden">
                    <img src="../../../img/dummy.png" alt="Guardalavaca" class="img img-auto img-w img-h-290">
                </div>
                <div class="captions w-100 bg bg-color-secondary py-2 px-3 text-center">
                    <p class="text text-lh-100 text-w-bold text-color-white text-size-1-2 mb-1">Guardalavaca</p>
                    <p class="text text-lh-100 text-color-white m-0">2 hoteles</p>
                </div>
            </div>
            <div class="c-flag position position-absolute position-z-2">
                <img src="../../../img/flag.png" alt="flag-background" class="img img-auto">
                <p class="value text text-color-white m-0 text-center text-size-0-8 text-lh-100 position-absolute">Desde<span class="d-block text text-size-1-5 text-color-white text-family-primary text-w-bold">41,00€</span></p>
            </div>
        </div>
        <div class="card thumb thumb_1 col-12 col-md-6 col-lg-4 col-xl-3 position-relative px-3 mb-5 align-self-end">
            <div class="wrapper overflow-hidden">
                <div class="images w-100 overflow-hidden">
                    <img src="../../../img/dummy.png" alt="Guardalavaca" class="img img-auto img-w img-h-290">
                </div>
                <div class="captions w-100 bg bg-color-secondary py-2 px-3 text-center">
                    <p class="text text-lh-100 text-w-bold text-color-white text-size-1-2 mb-1">Guardalavaca</p>
                    <p class="text text-lh-100 text-color-white m-0">2 hoteles</p>
                </div>
            </div>
            <div class="c-flag position position-absolute position-z-2">
                <img src="../../../img/flag.png" alt="flag-background" class="img img-auto">
                <p class="value text text-color-white m-0 text-center text-size-0-8 text-lh-100 position-absolute">Desde<span class="d-block text text-size-1-5 text-color-white text-family-primary text-w-bold">41,00€</span></p>
            </div>
        </div>
        <div class="card thumb thumb_1 col-12 col-md-6 col-lg-4 col-xl-3 position-relative px-3 mb-5 align-self-end">
            <div class="wrapper overflow-hidden">
                <div class="images w-100 overflow-hidden">
                    <img src="../../../img/dummy.png" alt="Guardalavaca" class="img img-auto img-w img-h-290">
                </div>
                <div class="captions w-100 bg bg-color-secondary py-2 px-3 text-center">
                    <p class="text text-lh-100 text-w-bold text-color-white text-size-1-2 mb-1">Guardalavaca</p>
                    <p class="text text-lh-100 text-color-white m-0">2 hoteles</p>
                </div>
            </div>
            <div class="c-flag position position-absolute position-z-2">
                <img src="../../../img/flag.png" alt="flag-background" class="img img-auto">
                <p class="value text text-color-white m-0 text-center text-size-0-8 text-lh-100 position-absolute">Desde<span class="d-block text text-size-1-5 text-color-white text-family-primary text-w-bold">41,00€</span></p>
            </div>
        </div>
        <div class="card thumb thumb_1 col-12 col-md-6 col-lg-4 col-xl-3 position-relative px-3 mb-5 align-self-end">
            <div class="wrapper overflow-hidden">
                <div class="images w-100 overflow-hidden">
                    <img src="../../../img/dummy.png" alt="Guardalavaca" class="img img-auto img-w img-h-290">
                </div>
                <div class="captions w-100 bg bg-color-secondary py-2 px-3 text-center">
                    <p class="text text-lh-100 text-w-bold text-color-white text-size-1-2 mb-1">Guardalavaca</p>
                    <p class="text text-lh-100 text-color-white m-0">2 hoteles</p>
                </div>
            </div>
            <div class="c-flag position position-absolute position-z-2">
                <img src="../../../img/flag.png" alt="flag-background" class="img img-auto">
                <p class="value text text-color-white m-0 text-center text-size-0-8 text-lh-100 position-absolute">Desde<span class="d-block text text-size-1-5 text-color-white text-family-primary text-w-bold">41,00€</span></p>
            </div>
        </div>
        <div class="card thumb thumb_1 col-12 col-md-6 col-lg-4 col-xl-3 position-relative px-3 mb-5 align-self-end">
            <div class="wrapper overflow-hidden">
                <div class="images w-100 overflow-hidden">
                    <img src="../../../img/dummy.png" alt="Guardalavaca" class="img img-auto img-w img-h-290">
                </div>
                <div class="captions w-100 bg bg-color-secondary py-2 px-3 text-center">
                    <p class="text text-lh-100 text-w-bold text-color-white text-size-1-2 mb-1">Guardalavaca</p>
                    <p class="text text-lh-100 text-color-white m-0">2 hoteles</p>
                </div>
            </div>
            <div class="c-flag position position-absolute position-z-2">
                <img src="../../../img/flag.png" alt="flag-background" class="img img-auto">
                <p class="value text text-color-white m-0 text-center text-size-0-8 text-lh-100 position-absolute">Desde<span class="d-block text text-size-1-5 text-color-white text-family-primary text-w-bold">41,00€</span></p>
            </div>
        </div>
    </div>
</section>

<section class="container-fluid mb-5" style="border-top: .5rem solid #dc0155; border-bottom: .5rem solid #dc0155;">
    <div class="row">
        <div class="col-12 px-0">
            <img src="../../../img/dummy_mapa.png" alt="" class="img img-w img-auto">
        </div>
    </div>
</section>

<section class="s-iconos container">
    <div class="row">
        <div class="col-12 text-center mb-3 px-5">
            <h3 class="text text-w-bold text-size-1-5 text-size-lg-2 text-color-six m-0">Reserva directamente en Hoteles Cubanacan y Benefíciate</h3>
        </div>
        <div class="col-12 col-lg-10 mx-auto d-flex flex-wrap">
            <div class="card thumb col-10 mx-auto col-lg-3 mb-5">
                <div class="images col-7 px-0 mx-auto mb-3 mb-lg-1">
                    <img src="../../../img/flag.png" class="img img-auto img-w img">
                </div>
                <div class="captions w-100 text-center p-2">
                    <p class="text text-family-secondary text-size-1-2 m-0">Mejor precio online a clientes fidelizados</p>
                </div>
            </div>
            <div class="card thumb col-10 mx-auto col-lg-3 mb-5">
                <div class="images col-7 px-0 mx-auto mb-3 mb-lg-1">
                    <img src="../../../img/flag.png" class="img img-auto img-w img">
                </div>
                <div class="captions w-100 text-center p-2">
                    <p class="text text-family-secondary text-size-1-2 m-0">Mejor precio online a clientes fidelizados</p>
                </div>
            </div>
            <div class="card thumb col-10 mx-auto col-lg-3 mb-5">
                <div class="images col-7 px-0 mx-auto mb-3 mb-lg-1">
                    <img src="../../../img/flag.png" class="img img-auto img-w img">
                </div>
                <div class="captions w-100 text-center p-2">
                    <p class="text text-family-secondary text-size-1-2 m-0">Mejor precio online a clientes fidelizados</p>
                </div>
            </div>
            <div class="card thumb col-10 mx-auto col-lg-3 mb-5">
                <div class="images col-7 px-0 mx-auto mb-3 mb-lg-1">
                    <img src="../../../img/flag.png" class="img img-auto img-w img">
                </div>
                <div class="captions w-100 text-center p-2">
                    <p class="text text-family-secondary text-size-1-2 m-0">Mejor precio online a clientes fidelizados</p>
                </div>
            </div>
        </div>
    </div>
</section>
<section class="s-brands container-fluid py-4 mb-5">
    <div class="container">
        <div class="row">
            <div class="col-12 px-5">
                <h3 class="text text-w-bold text-size-1-5 text-size-lg-2 text-color-secondary mb-2 mb-lg-3">Grupo Hotelero Cubanacan S.A. <span class="text text-size-1-2 text-size-lg-1 text-color-secondary pl-2 border-left">Nuestras marcas, la mejor forma de conocer y disfrutar Cuba.</span></h3>
            </div>
            <div class="col-12 mx-auto">
                <img src="../../../img/multiLogo.png" alt="logo" class="img img-auto img-w">
            </div>
        </div>
    </div>
</section>
<footer class="container-fluid px-0 overflow-hidden">
    <div class="container">
        <div class="row">
            <div class="col-12 px-5 px-lg-0 mb-2 openmodal text-center">
                <img src='../../../img/logo.png' alt="logo" class="img img-auto col-10 col-md-3" />
            </div>
            <div class="col-12 col-md-6 col-lg-3 px-5 px-lg-3 mb-5 mb-lg-0">
                <p class='text text-family-secondary text-lh-150 text-color-gray m-0'>En compañía de experimentados profesionales del turismo y una acertada calidad en los servicios, el Grupo Hotelero de Cubanacan harán que sus vacaciones en Cuba tengan un encanto único al que le acompañarán modalidades diversas en hoteles de playa, ciudad y campos de Cuba.</p>
            </div>
            <div class="col-12 col-md-6 col-lg-3 px-5 px-lg-3 mb-5 mb-lg-0">
                <p class='text text-family-secondary text-w-bold'>Grupo Hotelero Cubanacan S.A.</p>
                <p class='text text-family-secondary text-color-gray'>Política de Privacidad</p>
                <p class='text text-family-secondary text-color-gray'>Términos y Condiciones</p>
                <p class='text text-family-secondary text-color-gray'>Sobre Nosotros</p>
                <p class='text text-family-secondary text-color-gray'>Contáctenos</p>
            </div>
            <div class="col-12 col-md-6 col-lg-3 px-5 px-lg-3 mb-5 mb-lg-0">
                <p class='text text-family-secondary text-w-bold text-color-six mb-1'>Descargue nuestra App</p>
                <p class='text text-family-secondary text-color-gray'>Contáctenos</p>
                <img src='../../../img/logo_store.png' alt="logo store" class="img img-auto col-3 col-lg-6" />
            </div>
            <div class="col-12 col-md-6 col-lg-3 px-5 px-lg-3 mb-5 mb-lg-0">
                <p class='text text-family-secondary text-w-bold text-color-six mb-1'>Contactenos</p>
                <div class="w-100 d-flex flex-wrap">
                    <i class="icon fas fa-map-marker-alt d-inline-block mt-1 col-1"></i>
                    <p class='text text-family-secondary text-lh-150 col-11 m-0 pl-1 text-color-gray'>Calle 23, Nº 156 N Y O. Vedado, Plaza de la Revolución La Habana, Cuba</p>
                </div>
                <div class="w-100 d-flex flex-wrap">
                    <i class="icon fas fa-phone d-inline-block mt-1 col-1"></i>
                    <p class='text text-family-secondary text-lh-150 col-11 m-0 pl-1 text-color-gray'>(+53) 7 838 5252</p>
                </div>
                <div class="w-100 d-flex flex-wrap">
                    <i class="icon fas fa-envelope d-inline-block mt-1 col-1"></i>
                    <p class='text text-family-secondary text-lh-150 col-11 m-0 pl-1 text-color-gray'>callcenter@cubanacan.tur.cu</p>
                </div>
            </div>
        </div>
    </div>
    <div class="w-100 bg bg-color-quintary py-3 mt-lg-5">
        <div class="container">
            <div class="row">
                <div class="col-12 d-lg-flex flex-lg-wrap align-items-center">
                    <p class="text text-family-secondary text-color-gray mb-3 mb-lg-0 col-lg-8">© 2022 SISTEMA DE RESERVAS ON LINE S.L. Todos los Derechos Reservados</p>
                    <img src='../../../img/logos_footer.png' alt="logo footer" class="img img-auto col-12 col-lg-4" />
                </div>
            </div>
        </div>
    </div>
</footer>

<div class="c-modal w-100 h-100 position position-fixed position-z-5 p-4">
    <span class="mask w-100 h-100 position-fixed position-z-2 openmodal"></span>
    <div class="wrapper col-11 col-md-7 col-lg-5 mx-auto position position-50-50 position-absolute position-z-3 p-4 bg bg-color-white">
        <p class="text text-w-bold text-size-1-5 text-size-lg-2 mb-2">Titulo</p>
        <p class="text">Texto</p>
        <form class="c-form">
            <div class="form-group text-center mb-3">
                <input type="text" class="form-control border" placeholder="texto">
            </div>
            <div class="form-group text-center mb-3">
                <input type="text" class="form-control border" placeholder="texto">
            </div>
            <div class="form-group text-center mb-3">
                <input type="submit" class="btn btn-solid btn-solid-primary px-4 py-2 w-100 d-block" value="texto">
            </div>
        </form>
    </div>
</div>