@section('descripcion', 'Review your selections in the shopping cart before proceeding to checkout. Here, you can view all your tour bookings, including details of your selected tours, services, and packages. Once you're ready, proceed to secure payment and confirm your reservation. Our system ensures a safe and reliable payment process for your Cusco adventure with Peruvian VIP Treks.')
@section('contenido')
    
    <!-- Main -->    
    <script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.9.3/dist/confetti.browser.min.js"></script>
    <main>
        <div class="p-top-90 p-bottom-90 bg-gray-gradient" data-aos="fade">
            <!-- Modal -->
            <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="exampleModalLabel">Completar pago</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div id="modalContainer" class="modal-body"
                    style=" min-height: 200px;
                    display: flex;
                    justify-content: center;
                    align-items: center;"
                    >
                    <!-- Spinner de carga -->
                    <div id="loadingSpinner" class="spinner-border text-primary" role="status">
                        <span class="visually-hidden">Cargando...</span>
                    </div>
                    <div id="myPaymentForm"></div>
                    <!-- Mensaje de éxito con check verde -->
                    <div id="successMessage" style="display: none; text-align: center;">
                        <svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" fill="green" viewBox="0 0 16 16">
                            <path d="M16 8A8 8 0 1 1 8 0a8 8 0 0 1 8 8zM6.293 9.293 4.5 7.5l-.707.707 2.5 2.5.707-.707 5.5-5.5L11.293 3l-5 5z"/>
                        </svg>
                        <h3>¡Pago exitoso!</h3>
                        <p>Tu transacción ha sido completada con éxito.</p>
                    </div>
                    <div id="demo"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
                </div>
            </div>
            </div>
            <!-- Title -->
            <section class="container">
                <div class="d-lg-flex align-items-lg-end pb-4">
                    <div class="block-title me-auto">
                        <small class="sub-title">Booking</small>
                        <h1 class="display-5 title">Shopping cart</h1>
                    </div>
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb mt-3">
                            <li class="breadcrumb-item"><a href="/">Home</a></li>
                            <li class="breadcrumb-item active" aria-current="page">Shopping cart</li>
                        </ol>
                    </nav>
                </div>
            </section>
            <!-- Title -->

            <!-- Shopping cart -->
            <section class="container">
                <div class="row g-0 g-xl-8">
                    <div class="col-12 col-xl-9">
                        <!-- Tours -->
                        <div class="pe-xl-4 me-xl-2">
                            <div id="carrito_items"></div>
                        </div>
                        <!-- /Tours -->
                    </div>
                    <form class="col-12 col-xl-3">
                        <!-- Checkout -->
                        <div class="card border-0 shadow-sm sticky-top sticky-top-120 z-0">
                            <div class="card-body">
                                <div class="mb-4">
                                    <div class="d-flex align-items-center justify-content-between">
                                        <strong class="fs-5">Total:</strong>
                                        <span class="fs-2 fw-semibold text-body-emphasis" id="total_price"></span>
                                        <input hidden class="fs-2 fw-semibold text-body-emphasis" id="inp_total_price" />
                                    </div>
                                    <p class="text-secondary small text-end">
                                        <em id="descontado"></em>
                                    </p>
                                    <div class="col-12 col-md-12">
                                        <label>Pay: </label>
                                        <select 
                                            onchange="calcTotal()"
                                            name="porcentaje" id="porcentaje" class="form-select dropdown-select shadow-sm" id="selAdults">
                                            <option value="1" selected>100%</option>
                                            <option value="0.5">50%</option>
                                            <option value="0.3">30%</option>
                                            <option value="0.2">20%</option>
                                            <option value="0.1">10%</option>
                                        </select>
                                    </div>
                                    <div class="mt-4">
                                    @if (Auth::user() != null)
                                        <button 
                                            onclick="payment()"
                                            type="button" class="btn btn-primary w-100"
                                            data-bs-toggle="modal" data-bs-target="#exampleModal"
                                            >
                                            <i class="hicon hicon-installment-payment"></i>
                                            <span>Checkout</span>
                                        </button>
                                    @else
                                        <a 
                                            href="https://peruvianviptreks.com/en/login"
                                            type="button" class="btn btn-info w-100">
                                            <i class="hicon"></i>
                                            <span>Login</span>
                                        </a>
                                    @endif
                                    </div>
                                </div>
                                <div class="border-top pt-4">
                                    <div class="row">
                                        <div class="col-12 col-xl-12 col-md-6">
                                            <div class="d-flex">
                                                <span class="me-1 text-success"><i class="hicon hicon-bold hicon-check"></i></span>
                                                <dl class="mb-0">
                                                    <dt class="fw-medium">Pay nothing today</dt>
                                                    <dd class="text-secondary small">Book now and pay on Jun 30</dd>
                                                </dl>
                                            </div>
                                        </div>
                                        <div class="col-12 col-xl-12 col-md-6">
                                            <div class="d-flex">
                                                <span class="me-1 text-success"><i class="hicon hicon-bold hicon-check"></i></span>
                                                <dl class="mb-0">
                                                    <dt class="fw-medium">Free cancellation</dt>
                                                    <dd class="text-secondary small">Until 7:00 AM on Jun 30</dd>
                                                </dl>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- /Checkout -->
                    </form>
                </div>
            </section>
            <!-- /Shopping cart -->

        </div>

    </main>
    <!-- /Main -->   
    <script>
    document.addEventListener("DOMContentLoaded", function () {
        cargarCarrito();
    });

    function cargarFormulario() {
        // Mostrar el spinner y ocultar el contenido
        document.getElementById("loadingSpinner").style.display = "block";
    }

    // Ejecutar la función cuando se abra el modal
    document.getElementById('exampleModal').addEventListener('shown.bs.modal', cargarFormulario);

    function cargarCarrito() {
        const carritoContainer = document.getElementById("carrito_items");
        const totalContainer = document.getElementById("total_price");
        const inputTotal = document.getElementById("inp_total_price");
        carritoContainer.innerHTML = ""; // Limpiar contenido previo

        let carrito = JSON.parse(localStorage.getItem("carrito")) || [];

        if (carrito.length === 0) {
            carritoContainer.innerHTML = "<p class='text-center text-muted'>Your cart is empty</p>";
            totalContainer.textContent = "$0.00";
            inputTotal.value = 0
            return;
        }

        let total = 0;

        carrito.forEach((item, index) => {
            total += parseFloat(item.precio ?? 0) * parseInt(item.adultos ?? 0)

            const itemHTML = `
                <div class="card border-0 shadow-sm mb-4">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-12 col-xl-3 col-md-4">
                                <a href="/en/paquete/${item?.slug}">
                                    <figure class="image-hover image-hover-overlay rounded">
                                        <img src="${item.image}" alt="${item.titulo}">
                                        <i class="hicon hicon-plus-thin image-hover-icon"></i>
                                    </figure>
                                </a>
                            </div>
                            <div class="col-12 col-xl-9 col-md-8">
                                <div class="d-md-flex pt-4 pt-md-0">
                                    <div class="pe-4 flex-grow-1">
                                        <h2 class="h5 mb-2">
                                            <a href="${item.slug}" class="link-dark link-hover">${item.titulo}</a>
                                        </h2>
                                        <div class="mb-2">
                                            <small class="me-2"><i class="hicon hicon-menu-calendar"></i> ${item.dias}</small>
                                            <small class="me-2"><i class="hicon hicon-flights-pin"></i> ${item.ciudad}</small>
                                        </div>
                                        <div class="d-flex flex-column">
                                            <small class="mb-2">Tour date: <strong>${item.fecha}</strong></small>
                                            <small class="mb-2">Guests: <strong>${item.adultos} Adults - ${item.ninos} Children</strong></small>
                                        </div>
                                    </div>
                                    <div class="text-md-end">
                                        <div class="d-flex flex-md-column align-items-end mb-2">
                                            <strong class="fs-4 fw-semibold"><sup>$</sup>${(parseFloat(item.precio ?? 0) * parseInt(item.adultos ?? 0)).toFixed(2)}</strong>
                                        </div>
                                        <button type="button" class="btn btn-link link-danger p-0" onclick="eliminarDelCarrito(${index})">
                                            <i class="hicon hicon-x-icon hicon-70"></i>
                                            <span>Remove</span>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            `;

            carritoContainer.innerHTML += itemHTML;
        });

        totalContainer.textContent = `$${total.toFixed(2)}`;
        inputTotal.value = total
    }

    function eliminarDelCarrito(index) {
        let carrito = JSON.parse(localStorage.getItem("carrito")) || [];
        carrito.splice(index, 1);
        localStorage.setItem("carrito", JSON.stringify(carrito));
        cargarCarrito();
        calcTotal()
        getCarritoItems()
    }

    function calcTotal(){
        const totalContainer = document.getElementById("total_price");
        const inputTotal = document.getElementById("inp_total_price");
        const descontado = document.getElementById("descontado")
        const porcentaje = document.getElementById("porcentaje").value

        let porce = parseFloat(porcentaje)
        let total = parseFloat(inputTotal.value) * porce
        let desc = parseFloat(inputTotal.value) - total;

        totalContainer.textContent = `$${total.toFixed(2)}`;
        descontado.textContent = `Pending $${desc.toFixed(2)}`;
    }

    function payment(){
        document.getElementById("myPaymentForm").style.display = "none";
        document.getElementById("loadingSpinner").style.display = "block";
        const MERCHANT_CODE = @json(env('MERCHANT_CODE'));
        const isProduction = @json(env('IS_PRODUCTION')) === 'true'; // Convertir a booleano

        const authBasic = btoa(`${MERCHANT_CODE}:${isProduction 
            ? @json(env('MERCHANT_PROD_PASSWORD')) 
            : @json(env('MERCHANT_TEST_PASSWORD')) 
        }`);

        const endpoint = 'https://api.micuentaweb.pe';
        const publicKey = @json(env('PUBLIC_KEY'));
        const SHA2Cliente = @json(env('SHA2_CLIENTE'));

        function generateOrderNumber() {
            const length = Math.floor(Math.random() * (15 - 5 + 1)) + 5; // Longitud entre 5 y 15
            const prefix = "R" + new Date().getFullYear(); // Prefijo con año actual
            const randomPart = Math.random().toString(36).substring(2, length - prefix.length + 2).toUpperCase(); // Parte aleatoria

            let orderNumber = prefix + randomPart;
            return orderNumber.slice(0, length); // Asegurar que no supere 15 caracteres
        }

        const initialIziPay = async (monto = 0, email) => {

            const inputTotal = document.getElementById("inp_total_price");
            const descontado = document.getElementById("descontado")
            const porcentaje = document.getElementById("porcentaje").value
            const user = @json(Auth::user());

            let porce = parseFloat(porcentaje)
            let total = Math.floor((parseFloat(inputTotal.value) * porce) * 100)
            let desc = parseFloat(inputTotal.value) - total;

            const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

            function _0x3376(){const _0x28be93=['json','717242FtVlzf','5643396zVpwlU','1276944hBwLvv','stringify','4FKHuBw','543599ELnKHt','796620YzdqCt','6rGlRfN','771057opGbZp','443215IqmpfQ','correo','/proxy/payment','POST','application/json'];_0x3376=function(){return _0x28be93;};return _0x3376();}function _0x5810(_0x570c47,_0x1e2fd6){const _0x3376a4=_0x3376();return _0x5810=function(_0x58101c,_0x51f820){_0x58101c=_0x58101c-0x198;let _0x3cce93=_0x3376a4[_0x58101c];return _0x3cce93;},_0x5810(_0x570c47,_0x1e2fd6);}const _0x4b7588=_0x5810;(function(_0x34f3e1,_0x5f460d){const _0x2494be=_0x5810,_0xe47a2e=_0x34f3e1();while(!![]){try{const _0x509279=parseInt(_0x2494be(0x1a5))/0x1+parseInt(_0x2494be(0x19c))/0x2+-parseInt(_0x2494be(0x19e))/0x3*(parseInt(_0x2494be(0x19a))/0x4)+parseInt(_0x2494be(0x19f))/0x5*(-parseInt(_0x2494be(0x19d))/0x6)+parseInt(_0x2494be(0x19b))/0x7+parseInt(_0x2494be(0x198))/0x8+-parseInt(_0x2494be(0x1a6))/0x9;if(_0x509279===_0x5f460d)break;else _0xe47a2e['push'](_0xe47a2e['shift']());}catch(_0x460ae0){_0xe47a2e['push'](_0xe47a2e['shift']());}}}(_0x3376,0x5ccd9));const response=await fetch(_0x4b7588(0x1a1),{'method':_0x4b7588(0x1a2),'headers':{'Content-Type':_0x4b7588(0x1a3),'X-CSRF-TOKEN':csrfToken},'body':JSON[_0x4b7588(0x199)]({'amount':total,'currency':'USD','orderId':generateOrderNumber(),'customer':{'email':user[_0x4b7588(0x1a0)]},'authBasic':authBasic})}),data=await response[_0x4b7588(0x1a4)]();

            const _0xa1fe7b=_0xd6d6;function _0xd6d6(_0x388669,_0x26f388){const _0x19625a=_0x1962();return _0xd6d6=function(_0xd6d658,_0x414f4d){_0xd6d658=_0xd6d658-0x8b;let _0x50a3a3=_0x19625a[_0xd6d658];return _0x50a3a3;},_0xd6d6(_0x388669,_0x26f388);}function _0x1962(){const _0x45bfa4=['getElementById','770kGKtEJ','error','none','24XpgolV','197200Hkojwy','log','11679304CbkVtg','application/json','clientAnswer','2288UHwLiU','16830roDvSJ','1318800EiMBIP','display','style','828860CByitf','carrito','10eUzYqd','Error\x20en\x20el\x20proceso\x20de\x20pago:','POST','enc','setFormConfig','loadLibrary','successMessage','getItem','block','onSubmit','removeItem','answer','10529862qnvcSH','loadingSpinner','51140HtamwF','/compras','#myPaymentForm','en-US','myPaymentForm'];_0x1962=function(){return _0x45bfa4;};return _0x1962();}(function(_0x76b7f6,_0x59cbb8){const _0x415d52=_0xd6d6,_0x25b6b3=_0x76b7f6();while(!![]){try{const _0x1fb16a=parseInt(_0x415d52(0x9c))/0x1*(parseInt(_0x415d52(0x8e))/0x2)+parseInt(_0x415d52(0xad))/0x3+parseInt(_0x415d52(0xa5))/0x4*(parseInt(_0x415d52(0x8c))/0x5)+parseInt(_0x415d52(0x9a))/0x6+-parseInt(_0x415d52(0xa8))/0x7+parseInt(_0x415d52(0xab))/0x8*(parseInt(_0x415d52(0xac))/0x9)+-parseInt(_0x415d52(0xa6))/0xa*(parseInt(_0x415d52(0xa2))/0xb);if(_0x1fb16a===_0x59cbb8)break;else _0x25b6b3['push'](_0x25b6b3['shift']());}catch(_0x247f38){_0x25b6b3['push'](_0x25b6b3['shift']());}}}(_0x1962,0xe3429));try{const {KR}=await KRGlue[_0xa1fe7b(0x93)](endpoint,publicKey);await KR[_0xa1fe7b(0x92)]({'formToken':data[_0xa1fe7b(0x99)]['formToken'],'kr-language':_0xa1fe7b(0x9f)}),await KR[_0xa1fe7b(0x97)](async _0x6393fe=>{const _0x2b197e=_0xa1fe7b,_0x257729=_0x6393fe[_0x2b197e(0xaa)],_0x375fde=_0x6393fe['hash'],_0x5d41fa=CryptoJS[_0x2b197e(0x91)]['Hex']['stringify'](CryptoJS['HmacSHA256'](JSON['stringify'](_0x257729),SHA2Cliente));if(_0x375fde===_0x5d41fa){let _0x54e824=JSON['parse'](localStorage[_0x2b197e(0x95)](_0x2b197e(0x8d)))||[];localStorage[_0x2b197e(0x98)](_0x2b197e(0x8d)),await cargarCarrito(),await calcTotal(),await getCarritoItems();const _0x192e10=await fetch(_0x2b197e(0x9d),{'method':_0x2b197e(0x90),'headers':{'Content-Type':_0x2b197e(0xa9),'X-CSRF-TOKEN':csrfToken},'body':JSON['stringify']({'total':total,'carrito':_0x54e824})}),_0x30e846=await _0x192e10['json']();console[_0x2b197e(0xa7)](_0x30e846),document['getElementById'](_0x2b197e(0xa0))[_0x2b197e(0x8b)][_0x2b197e(0xae)]=_0x2b197e(0xa4),document['getElementById'](_0x2b197e(0x94))[_0x2b197e(0x8b)][_0x2b197e(0xae)]=_0x2b197e(0x96);}else console['log']('error');}),await KR['addForm'](_0xa1fe7b(0x9e));const {result}=await KR['showForm']();}catch(_0xc0a493){console[_0xa1fe7b(0xa3)](_0xa1fe7b(0x8f),_0xc0a493);}finally{document[_0xa1fe7b(0xa1)]('myPaymentForm')['style']['display']='block',document[_0xa1fe7b(0xa1)](_0xa1fe7b(0x9b))['style'][_0xa1fe7b(0xae)]=_0xa1fe7b(0xa4);}
        }

        initialIziPay()
    }

    </script>
<style>
#loadingSpinner {
    display: block;
    margin: 20px auto; /* Centra horizontalmente */
}

</style>

@endsection
<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Shopping cart - Peruvian Vip Treks</title>
    <meta name="description" content="">
    <meta name="keywords" content="Cusco, Machu Picchu, tours in Cusco, trips to Machu Picchu, Sacred Valley, Rainbow Mountain, tourism in Peru, travel agency in Cusco, exclusive tours, trekking in Cusco, hiking in the Andes, personalized experiences, tour operator Cusco, adventure in Peru, Cusco tour packages, tourist circuits, luxury travel, Inca culture, hiking in Cusco, sustainable tourism, nature in Cusco, guided tour, excursions in Peru, private tours, organized trips, routes in Cusco, Andean exploration, best tours in Cusco, destinations in Peru.">
    <meta name="keywords" content="tourism in anta cusco, ampay cusco tourism phone, ampay cusco tourism, tourism to cusco, ampay cusco quillabamba tourism, adventure tourism cusco, ampay cusco abancay tourism, mer cusco tourism to puno, alternative tourism cusco, tourism agencies in cusco, boris cusco tourism, cheap tourism agencies in cusco, imperial cusco tourism bus, benefits of tourism in cusco, tourism in cusco city, experiential tourism in chinchero cusco, civa tourism cusco, community tourism cusco, chankas tourism cusco, cultural tourism cusco, tourism career in cusco, tourism growth in cusco, how is tourism in cusco, tourism in cusco city, cusco tourism, tourism agencies in cusco, authorized tourism agencies in cusco, adventure tourism in cusco, tourism companies in cusco, tourism institutes in cusco, tourism packages in cusco, types of tourism in cusco, tour guides in cusco, tourism in cusco statistics 2024, tourism in cusco statistics, tourism in cusco, tourism in espinar cusco, sustainable tourism in cusco, spiritual tourism cusco, employment in tourism cusco, tourism agencies in cusco, studying tourism in cusco, jose studies tourism in cusco and is excited, tourism fair in cusco, grisman tourism cusco, gastronomic tourism in cusco, tour guides in cusco, tourism in cusco today, history of tourism in cusco, places for tourism in cusco, cusco imperial tourism, imperial cusco tourism phone, inambari cusco tourism, tourism institutes in cusco, impact of tourism in cusco, importance of tourism in cusco, negative impacts of tourism in cusco, tourism in cusco tourist places, lima cusco tourism, tourist places in cusco, tourism in the city of cusco, places to do tourism in cusco, cusco machu picchu tourism, mer cusco tourism, mer cusco terminal tourism, mendivil cusco tourism, milan cusco tourism, mystical tourism cusco, magical tourism cusco, molina cusco tourism, best tourism agencies in cusco, best tourism companies in cusco, news of tourism in cusco, negative impacts of tourism in cusco, tourism office in cusco, tourism operators in cusco, tourism in cusco peru, tourism in cusco pdf, tourism in cusco tour packages, tourism agency in cusco peru, mer cusco tourism puno, palomino cusco tourism, tourism in cusco, tourism for cusco, tourism packages in cusco, tourism problems in cusco, tourism in cusco what to see, cusco tourism what to do, ampay cusco quillabamba tourism, rural tourism cusco, real tourism cusco, receptive tourism cusco, religious tourism cusco, rural community tourism in cusco, tourism in cusco continues to recover but is still below pre-pandemic levels, sustainable tourism cusco, tourism sector in cusco, tourism in cusco tourist places, tourism in cusco tour packages, ampay cusco phone, imperial cusco phone, mer cusco phone, mer cusco terminal, universal cusco phone, jobs in tourism cusco, types of tourism in cusco, tourism thesis in cusco, universal cusco tourism, universal cusco tourism phone, tourism in cusco what to see, experiential tourism cusco, experiential tourism in chinchero cusco, jose studies tourism in cusco and is excited">

    <meta name="keywords" content="shopping cart, purchase, checkout, secure payment, booking, order, tour booking, travel cart, tour reservation, booking summary, payment gateway">
    <meta name="author" content="Cus-code.com - Alex granada Campana">
    <meta name="csrf-token" content="N0GlbgW4puaJ3oWB1pbZPNTd4oeWRhIV0i28UdWl">
    <link href="https://peruvianviptreks.com/assets/img/logos/logo.png" rel="shortcut icon" type="image/png">
    <link href="https://peruvianviptreks.com/assets/css/theme-1.min.css" rel="stylesheet">
    <link href="https://peruvianviptreks.com/assets/css/theme-2.min.css" rel="stylesheet">
    <link href="https://peruvianviptreks.com/assets/css/theme-3.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css">
    <script src="https://cdn.jsdelivr.net/npm/@lyracom/embedded-form-glue@1.4.2/dist/js/kr-payment-form-glue.min.js">
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/base-64@1.0.0/base64.min.js"></script>
    <link rel="stylesheet" href="https://static.micuentaweb.pe/static/js/krypton-client/V4.0/ext/classic-reset.css">
    <script src="https://static.micuentaweb.pe/static/js/krypton-client/V4.0/ext/classic.js"></script>

<!--Start of Tawk.to Script-->
<script type="text/javascript">
var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date();
(function(){
var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0];
s1.async=true;
s1.src='https://embed.tawk.to/67e826722ba1a3190cacd6ce/1inhdcbte';
s1.charset='UTF-8';
s1.setAttribute('crossorigin','*');
s0.parentNode.insertBefore(s1,s0);
})();
</script>
<!--End of Tawk.to Script-->
    
    <style>
        /* Estilo para el botón de WhatsApp */
.whatsapp-button {
    position: fixed;
    bottom: 100px;
    right: 30px;
    background-color: #fff; /* Color de fondo de WhatsApp */
    padding: 10px;
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60px;
    height: 60px;
}

/* Estilo para el ícono de WhatsApp */
.whatsapp-button img {
    width: 100%;
    height: auto;
    border-radius: 50%;
}

    </style>
</head>

<body>

    <!-- Preloader -->
    <div id="preloader">
        <div class="spinner-border text-primary" role="status">
            <span class="visually-hidden">Cargando...</span>
        </div>
    </div>
    <!-- /Preloader -->

    <!-- Header -->
    <header id="header" data-aos="fade">

        <!-- Header Topbar -->
        <div class="header-topbar">
            <div class="container">
                <div class="row g-0">
                    <div class="col-6 col-xl-7 col-md-8">
                        <div class="d-flex align-items-center">
                            <a href="tel:+84966704132">
                                <i class="hicon hicon-telephone me-1"></i>
                                <span>+51 991 421 499</span>
                            </a>
                            
                            
                            
                            
                            
                            
                            <span class="vr bg-white d-none d-md-inline ms-3 me-3"></span>
                            <a href="mailto:" class="d-none d-md-inline">
                                <i class="hicon hicon-email-envelope me-1"></i>
                                <span>info@peruvianviptreks.com</span>
                            </a>
                            
                            <span class="vr bg-white d-none d-md-inline ms-3 me-3"></span>
                                                            <a href="https://www.facebook.com/share/1AEBRi4GTH/" class="mx-3">
                                    <i class="fab fa-facebook-f"></i>
                                </a>
                                                                                        <a href="https://www.instagram.com/peruvian_vip_treks" class="mx-3">
                                    <i class="fab fa-instagram"></i>
                                </a>
                            
                                                            <a href="https://youtube.com/@peruvianviptreks?si=vTrAdf1qhbSUrGag" class="mx-3">
                                    <i class="fab fa-youtube"></i>
                                </a>
                            
                                                            <a href="https://www.tiktok.com/@peruvianviptreks?_t=ZM-8uuniUNi1QN&amp;_r=1" class="mx-3">
                                    <i class="fab fa-tiktok"></i>
                                </a>
                                                    </div>
                    </div>
                    <div class="col-6 col-xl-5 col-md-4">
                        <div class="text-end">
                            <a class="d-inline-flex align-items-center me-3" data-bs-toggle="modal" href="#mdlLanguage">
                                <img src="https://peruvianviptreks.com/assets/img/flags/en.svg" height="14" class="me-1"
                                    alt="">
                                <span class="me-1">English</span>
                                <i class="hicon hicon-thin-arrow-down hicon-bold hicon-60"></i>
                            </a>

                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- /Header Topbar -->

        <!-- Header Navbar -->
        <div class="header-navbar">
            <nav class="navbar navbar-expand-xl">
                <div class="container">
                    <button class="navbar-toggler me-3" type="button" data-bs-toggle="offcanvas"
                        data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar" title="botón del menú">
                        <i class="hicon hicon-bold hicon-hamburger-menu"></i>
                    </button>
                    <a class="navbar-brand" href="https://peruvianviptreks.com/en/home">
                        <img src="https://peruvianviptreks.com/assets/img/logos/logo.png" alt="Logo" height="80">
                    </a>
                    <div class="offcanvas offcanvas-navbar offcanvas-start border-end-0" tabindex="-1"
                        id="offcanvasNavbar">
                        <div class="offcanvas-header border-bottom p-4 p-xl-0">
                            <a href="https://peruvianviptreks.com/en/home" class="d-inline-block">
                                <img src="https://peruvianviptreks.com/assets/img/logos/logo.png" alt="">
                            </a>
                            <button type="button" class="btn-close shadow-none" data-bs-dismiss="offcanvas"
                                aria-label="Close"></button>
                        </div>
                        <div class="offcanvas-body p-4 p-xl-0">
                            <ul class="navbar-nav">
                                <li class="nav-item dropdown">
                                    <a class="nav-link  "
                                        href="https://peruvianviptreks.com/en/home">
                                        <span>Home</span>
                                    </a>
                                </li>
                                <li class="nav-item dropdown">
                                    <a class="nav-link "
                                        href="https://peruvianviptreks.com/en/our-agency">
                                        <span>About</span>
                                    </a>
                                </li>
                                <li class="nav-item dropdown">
                                    <a class="nav-link "
                                        href="https://peruvianviptreks.com/en/packages">
                                        <span>Packages</span>
                                    </a>
                                </li>
                                <li class="nav-item dropdown">
                                    <a class="nav-link "
                                        href="https://peruvianviptreks.com/en/treks">
                                        <span>Treks</span>
                                    </a>
                                </li>
                                <li class="nav-item dropdown">
                                    <a class="nav-link "
                                        href="https://peruvianviptreks.com/en/gallery">
                                        <span>Gallery</span>
                                    </a>
                                </li>
                                <li class="nav-item dropdown">
                                    <a class="nav-link "
                                        href="https://peruvianviptreks.com/en/contact-us">
                                        <span>Contact Us</span>
                                    </a>
                                </li>

                            </ul>


                                                            <div class="d-flex align-items-center ms-auto">
                                    <a href="https://peruvianviptreks.com/en/carrito" class="circle-icon cart-icon me-4">
                                        
                                        <i class="fas fa-shopping-cart"></i>

                                        <span id="carrito_count">0</span>
                                    </a>
                                    <a href="#" class="circle-icon wishlist-icon me-4">
                                        <i class="hicon hicon-bold hicon-menu-favorite"></i>
                                        <span>0</span>
                                    </a>
                                </div>
                            

                        </div>
                    </div>
                                            <div class="dropdown user-menu ms-xl-auto">
                            <button class="btn btn-primary" data-bs-toggle="dropdown" data-bs-display="static">
                                Sign In
                            </button>
                            <ul class="dropdown-menu dropdown-menu-end animate slideIn" data-bs-popper="static">
                                <li>
                                    <a class="dropdown-item" href="register">
                                        <i class="hicon hicon-edit me-1"></i>
                                        <span>Register</span>
                                    </a>
                                </li>
                                <li>
                                    <a class="dropdown-item" href="https://peruvianviptreks.com/en/login">
                                        <i class="hicon hicon-aps-lock me-1"></i>
                                        <span>Login</span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                                    </div>
            </nav>
        </div>
        <!-- /Header Navbar -->

        <!-- Language -->
        <div class="modal fade" id="mdlLanguage" tabindex="-1" aria-labelledby="h3Language" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content border-0 shadow-lg">
                    <div class="modal-header">
                        <span class="fs-3 modal-title text-body-emphasis fw-medium" id="h3Language">Seleccione un
                            idioma</span>
                        <button type="button" class="btn-close shadow-none" data-bs-dismiss="modal"
                            aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <ul class="list-unstyled row mb-0">
                            <li class="col-6 col-lg-4">
                                <a href="/change-language/en" class="link-dark link-hover">
                                    <span class="d-flex align-items-center pt-2 pb-2">
                                        <img src="https://peruvianviptreks.com/assets/img/flags/en.svg" height="16"
                                            alt="">
                                        <span class="ms-2">English</span>
                                    </span>
                                </a>
                            </li>

                            <li class="col-6 col-lg-4">
                                <a href="/change-language/es" class="link-dark link-hover">
                                    <span class="d-flex align-items-center pt-2 pb-2">
                                        <img src="https://peruvianviptreks.com/assets/img/flags/es.svg" height="16"
                                            alt="">
                                        <span class="ms-2">Español</span>
                                    </span>
                                </a>
                            </li>

                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <!-- /Language -->

    </header>
    <!-- /Header -->

    <!-- Main -->
    <main>

        
    </main>
    <!-- /Main -->

    <!-- Footer -->
    <footer class="footer p-top-80 p-bottom-50" data-aos="fade">

        <!-- Footer top -->
        <div class="footer-top">
            <div class="container">
                <div class="row">
                    <div class="col-12 col-xl-3 col-md-6">
                        <!-- Brand -->
                        <div class="footer-widget">
                            <a href="https://peruvianviptreks.com/es/home" class="brand-img" title="logo peruvian vip treks blamco">
                                <img class="me-4" src="https://peruvianviptreks.com/assets/img/logos/footer-logo.png"
                                    alt="" height="120">
                            </a>
                            <p class="brand-desc">
                                <em> Peruvian VIP Treks offers exclusive tours in Cusco, Machu Picchu, Sacred Valley, and Rainbow Mountain. Enjoy unique adventures with expert guides and personalized service. Discover the magic of the Andes with us! </em>
                                <a href="https://peruvianviptreks.com/en/our-agency">[+]</a>
                            </p>

                            <ul class="social-list">
                                <link
                                    href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
                                    rel="stylesheet">

                                <li class="social-item">
                                                                            <a href="https://www.facebook.com/share/1AEBRi4GTH/" title="facebook">
                                            <i class="fab fa-facebook-f"></i>
                                        </a>
                                                                    </li>

                                <li class="social-item">
                                                                            <a href="https://www.instagram.com/peruvian_vip_treks" title="instagram">
                                            <i class="fab fa-instagram"></i>
                                        </a>
                                                                    </li>

                                <li class="social-item">
                                                                            <a href="https://youtube.com/@peruvianviptreks?si=vTrAdf1qhbSUrGag" title="youtube">
                                            <i class="fab fa-youtube"></i>
                                        </a>
                                                                    </li>

                                <li class="social-item">
                                                                            <a href="https://www.tiktok.com/@peruvianviptreks?_t=ZM-8uuniUNi1QN&amp;_r=1" title="tiktok">
                                            <i class="fab fa-tiktok"></i>
                                        </a>
                                                                    </li>


                                <li class="social-item">
                                    <a
                                        href="https://www.tripadvisor.com.pe/Attraction_Review-g294314-d32968243-Reviews-Peruvian_Vip_Treks-Cusco_Cusco_Region.html">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
                                            viewBox="0 0 24 24" stroke-width="1.75" stroke="none" fill="none"
                                            stroke-linecap="round" stroke-linejoin="round" title="tripadvisor">
                                            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                                            <path d="M6.5 13.5m-1.5 0a1.5 1.5 0 1 0 3 0a1.5 1.5 0 1 0 -3 0"></path>
                                            <path d="M17.5 13.5m-1.5 0a1.5 1.5 0 1 0 3 0a1.5 1.5 0 1 0 -3 0"></path>
                                            <path d="M17.5 9a4.5 4.5 0 1 0 3.5 1.671l1 -1.671h-4.5z"></path>
                                            <path d="M6.5 9a4.5 4.5 0 1 1 -3.5 1.671l-1 -1.671h4.5z"></path>
                                            <path d="M10.5 15.5l1.5 2l1.5 -2"></path>
                                            <path d="M9 6.75c2 -.667 4 -.667 6 0"></path>
                                        </svg>
                                    </a>
                                </li>
                            </ul>
                        </div>
                        <!-- /Brand -->
                    </div>
                    <div class="col-12 col-xl-3 col-md-6">
                        <!-- Contact Info -->
                        <div class="footer-widget">
                            <h2 class="h4 pb-3">Contact information</h2>
                            <div class="contact-info">
                                <b>RUC: </b> <i>20613643479 </i> <br>
                                <b>COMPANY NAME: </b> <i> PERUVIAN VIP TREKS E.I.R.L. </i>
                                <p>
                                    <span></span>
                                </p>
                                <p>
                                    <span>+51 991 421 499</span>
                                </p>
                                <p>Emergencies:
                                    <span>+51 991 421 499</span>
                                </p>
                                <p>
                                    <a href="mailto:info@peruvianviptreks.com">info@peruvianviptreks.com</a>
                                </p>
                                <p>
                                    <a href="#">www.peruvianviptreks.com</a>
                                </p>
                            </div>
                        </div>
                        <!-- /Contact Info -->
                    </div>
                    <div class="col-12 col-xl-3 col-md-6">
                        <!-- Quick Links -->
                        <div class="footer-widget">
                            <h2 class="h4 pb-3">Quick Links</h2>
                            <ul class="footer-link">
                                <li class="link-item">
                                    <a href="https://peruvianviptreks.com/en/our-agency">about us</a>
                                </li>
                                <li class="link-item">
                                    <a href="https://peruvianviptreks.com/en/packages">Packages</a>
                                </li>
                                <li class="link-item">
                                    <a href="https://peruvianviptreks.com/en/terms-and-conditions">Terms and Conditions</a>
                                </li>
                                <li class="link-item">
                                    <a href="https://peruvianviptreks.com/en/privacy-policies">Privacy policies</a>
                                </li>
                                <li class="link-item">
                                    <a href="https://peruvianviptreks.com/en/purchasing-policies">Purchasing policies</a>
                                </li>
                            </ul>
                        </div>
                        <!-- /Quick Links -->
                    </div>
                    <div class="col-12 col-xl-3 col-md-6">
                        <div class="footer-widget">
                            <!-- Mobile App -->
                            <div class="mb-5 pt-3">
                                <div class="row g-3">
                                    <div class="col-6">
                                        <a href="#">
                                            <img src="https://peruvianviptreks.com/assets/img/footer/esnna.png" class="w-100"
                                                alt="esnna" title="esnna">
                                        </a>
                                    </div>
                                    <div class="col-6">
                                        <a href="#">
                                            <img src="https://peruvianviptreks.com/assets/img/footer/dircetur.png" class="w-100"
                                                alt="dircetur" title="dircetur">
                                        </a>
                                    </div>
                                    <div class="col-12">
                                        <img src="https://peruvianviptreks.com/assets/img/footer/pagos.png" alt="pagos en linea"
                                            class="w-100">
                                    </div>
                                </div>
                            </div>
                            <!-- /Mobile App -->
                            <!-- Social -->
                            <div class="footer-local">
                                <a data-bs-toggle="modal" href="#mdlLanguage" class="me-4">
                                    <img src="https://peruvianviptreks.com/assets/img/flags/en.svg" height="14" alt=""
                                        class="me-2">
                                    <span class="me-1">English</span>
                                    <i class="hicon hicon-thin-arrow-down fsm-6"></i>
                                </a>

                            </div>
                            <!-- /Social -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- /Footer top -->

        <!-- Footer Bottom -->
        <div class="footer-bottom">
            <div class="container">
                <div class="row">
                    <div class="col-12 col-md-6">
                        <p class="mb-lg-0">© 2025 Peruvian vip Treks. All rights reserved.</p>
                    </div>
                    <div class="col-12 col-md-6">
                        <div class="text-start text-md-end">
                            <ul class="list-inline mb-lg-0">
                                <li class="list-inline-item">
                                    <a href="https://peruvianviptreks.com/en/privacy-policies">Privacy policies</a>
                                </li>
                                <li class="list-inline-item">
                                    <a href="https://peruvianviptreks.com/en/terms-and-conditions">Terms and conditions</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- /Footer Bottom -->

    </footer>
    <!-- /Footer -->

    <!-- Scroll top -->
    <a href="#" class="scroll-top">
        <i class="hicon hicon-thin-arrow-up"></i>
    </a>
    <!-- /Scroll top -->
    
    <!-- WhatsApp Button -->
<a href="https://wa.me/+51991421499" target="_blank" class="whatsapp-button">
    <i class="fab fa-whatsapp fa-2x"></i>

</a>
    
    
    <script>
        const getCarritoItems = () => {
            const data = JSON.parse(localStorage.getItem('carrito')) || [];
            const carrito_count = document.getElementById('carrito_count');

            if (carrito_count) {
                carrito_count.textContent = data.length; // Asegura que siempre se actualice, incluso si está vacío
            }
        }

        document.addEventListener("DOMContentLoaded", getCarritoItems);
    </script>
    <script defer src="https://peruvianviptreks.com/assets/js/theme-1.min.js"></script>
    <script defer src="https://peruvianviptreks.com/assets/js/theme-2.min.js"></script>
    <script defer src="https://peruvianviptreks.com/assets/js/theme-3.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/toastify-js"></script>
</body>

</html>