<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <!-- favicon -->
    <link rel="icon" type="image/png" href="templates/wedding-3/long/_assets/img/favicon/favicon-16x16.png" sizes="16x16"/>
    <link rel="icon" type="image/png" href="templates/wedding-3/long/_assets/img/favicon/favicon-32x32.png" sizes="16x16"/>

    <title>Levidio Wedding Vol 2 - Website Templates</title>

    <!-- CSS  -->
    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
    <!-- Root-Icon -->
    <link rel="stylesheet" href="https://cdn.rootpixel.net/assets/rooticon/v2/rooticon.css">
    <!-- Tiny slider -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.3/tiny-slider.css">
    <!-- Lightgallery -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery-js/1.4.0/css/lightgallery.min.css" integrity="sha512-kwJUhJJaTDzGp6VTPBbMQWBFUof6+pv0SM3s8fo+E6XnPmVmtfwENK0vHYup3tsYnqHgRDoBDTJWoq7rnQw2+g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <!-- Plyr video player -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/plyr/3.6.8/plyr.min.css" integrity="sha512-kuSeWNZsBfW/esn9MiIQ3hkFqNdHKljzVQYBOe7gPXGUNCE8KqrbZLHDSH005HrUwCI8erQ5iDrBHlSzTfSbmw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <!-- Aos Animation on scroll -->
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
    <!-- App -->
    <link rel="stylesheet" href="templates/wedding-3/long/_assets/css/app.min.css">
</head>
<body id="index" style="cursor: default !important;">
<!-- <body id="index"> -->

    <!-- header -->
    <header id="header">
        <nav class="navbar navbar-expand-md">
            <div class="container">
                <a href="#index" class="navbar-brand page-scroll">
                    <h5 class="font-type-secondary">John & Jane</h5>
                    <img src="templates/wedding-3/long/_assets/img/decoration/foliage-navbar-brand.svg" class="w-7rem mt-1" alt="">
                </a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <h6 class="mb-0"><i class="ri ri-menu text-light"></i></h6>
                </button>
                <div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
                    <ul class="navbar-nav mb-4 mb-md-2">
                        <li class="nav-item">
                            <a class="nav-link page-scroll" href="#section-1">Undangan</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link page-scroll" href="#section-2">Mempelai</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link page-scroll" href="#section-3">Story</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link page-scroll" href="#section-4">Galleri</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link page-scroll" href="#section-5">RSVP</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
        <div class="container py-10">
            <div class="row">
                <div class="col-lg">
                    <h6 class="fw-bold">Wedding Invitation for <span id="guest">Justin Gouse</span></h6>
                    <h6>Kami mengharap kehadiran Anda pada acara pernikahan kami</h6>
                    <h1 class="font-type-secondary mt-4 mb-8">John Doe & Jane Doe</h1>

                    <div id="countdown-row-1" class="row mb-12">
                        <div class="col-auto text-center">
                            <div class="card card-countdown">
                                <div data-days class="card-body">20</div>
                            </div>
                            <div>Hari</div>
                        </div>
                        <div class="col-auto text-center">
                            <div class="card card-countdown">
                                <div data-hours class="card-body">20</div>
                            </div>
                            <div>Jam</div>
                        </div>
                        <div class="col-auto text-center">
                            <div class="card card-countdown">
                                <div data-minutes class="card-body">20</div>
                            </div>
                            <div>Menit</div>
                        </div>
                        <div class="col-auto text-center">
                            <div class="card card-countdown">
                                <div data-seconds class="card-body">20</div>
                            </div>
                            <div>Detik</div>
                        </div>
                    </div>

                    <a href="#section-1" id="btn-open-opening" class="btn btn-primary page-scroll">Buka Undangan</a>
                </div>
            </div>
        </div>
    </header>
    <!-- end of header -->

    <!-- section-1 : contains invitation -->
    <section id="section-1">
        <div class="container text-dark text-center">
            <div class="row justify-content-center mb-10">
                <div class="col-lg-8">
                    <h3 class="font-type-secondary mb-16" data-aos="fade-up" data-aos-duration="1200">Undangan Kami</h3>

                    <h6 class="mb-8" data-aos="fade-up" data-aos-duration="1300">Assalamu’alaikum wa rohmatullahi wa barokatuh</h6>
                    <h6 class="mb-10" data-aos="fade-up" data-aos-duration="1400">
                        Maha suci Allah yang telah menciptakan mahluk-Nya berpasang-pasangan dan sungguh besar rahmat dan karunia yang diberikan Allah kepada kita semua. Kami mengundang bapak/ibu/saudara/i sekaligus mengharapkan doa restu dari bapak/ibu/saudara/i dalam acara pernikahan anak kami pada:
                    </h6>

                    <div class="row">
                        <div class="col-md mb-8 mb-lg-0" data-aos="fade-up" data-aos-duration="1500" data-aos-offset="-50">
                            <img src="templates/wedding-3/long/_assets/img/icons/heart-calendar.svg" alt="" class="mb-4">
                            <h4 class="fw-bolder">Ahad, 12 Januari 2021</h4>
                        </div>
                        <div class="col-md mb-8 mb-lg-0" data-aos="fade-up" data-aos-duration="1500" data-aos-offset="-50">
                            <img src="templates/wedding-3/long/_assets/img/icons/heart-clock.svg" alt="" class="mb-4">
                            <h4 class="fw-bolder">Pukul 12.00 WIB</h4>
                        </div>
                        <div class="col-12 d-lg-flex align-items-center justify-content-center mt-lg-8" data-aos="fade-up" data-aos-duration="1600" data-aos-offset="-50">
                            <img src="templates/wedding-3/long/_assets/img/icons/heart-pin.svg" alt="" class="mb-4 mb-lg-0 me-lg-2">
                            <h4 class="fw-bolder">di Gedung Serbaguna “Lorem Ipsum”</h4>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row justify-content-center">
                <div class="col-lg-9">
                    <div class="mapouter">
                        <div class="gmap_canvas w-100 h-24rem h-md-26rem rounded-3">
                            <iframe 
                                class="h-24rem h-md-26rem"
                                width="100%" 
                                id="gmap_canvas" 
                                src="https://maps.google.com/maps?q=Rootpixel&t=&z=13&ie=UTF8&iwloc=&output=embed" 
                                frameborder="0"
                                scrolling="no" 
                                marginheight="0" marginwidth="0">
                            </iframe>
                            <a href="https://2piratebay.org"></a><br><style>.gmap_canvas {overflow:hidden;background:none!important;}</style>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- decoreation -->
        <img src="templates/wedding-3/long/_assets/img/decoration/foliage-black-left.svg" alt="" class="decoration" id="section-1-decoration-1"  data-aos="fade-left" data-aos-duration="1200">
        <img src="templates/wedding-3/long/_assets/img/decoration/foliage-black-right.svg" alt="" class="decoration" id="section-1-decoration-2"  data-aos="fade-right" data-aos-duration="1200">
        <img src="templates/wedding-3/long/_assets/img/decoration/leaf-left-1.png" alt="" class="decoration" id="section-1-decoration-3"  data-aos="fade-up-right" data-aos-duration="1200">
        <img src="templates/wedding-3/long/_assets/img/decoration/leaf-right-1.png" alt="" class="decoration" id="section-1-decoration-4"  data-aos="fade-up-left" data-aos-duration="1200">
    </section>
    <!-- end of section-1 -->

    <!-- section-2 : contains spouse -->
    <section id="section-2">
        <div class="container text-light text-center">
            <h3 class="font-type-secondary font-bold mb-4" data-aos="fade-up" data-aos-duration="1200">Mempelai</h3>
            <div class="fw-lighter mb-16" data-aos="fade-up" data-aos-duration="1300">
                Posuere mattis velit in ornare ac nunc pulvinar nunc tristique. Cras consequat diam at aliquam. <br class="d-none d-lg-block">
                Consequat, quis id tellus sit egestas tortor, quis auctor morbi. 
            </div>

            <div class="row justify-content-center">
                <div class="col-md-6 d-flex flex-column align-items-center mb-8 mb-lg-0">
                    <div class="img-wrapper img-wrapper-left mb-6" data-aos="fade-right" data-aos-duration="1200" data-aos-offset="-10">
                        <div class="img-wrapper-spouse">
                            <img src="templates/wedding-3/long/_assets/img/spouse/man.png" alt="">
                        </div>
                    </div>

                    <h3 class="font-type-secondary fw-bold" data-aos="fade-right" data-aos-duration="1300" data-aos-offset="-50">John Doe</h3>
                    <h6 data-aos="fade-right" data-aos-duration="1400" data-aos-offset="-50">Mempelai Pria</h6>

                    <!-- divider -->
                    <div class="divider divider-horizontal bg-light w-17rem mx-auto mt-8 mb-4"></div>
                    <div class="d-flex align-items-center justify-content-center">
                        <i class="ri ri-facebook-alt"></i>
                        <i class="ri ri-twitter-alt mx-3 mx-lg-6"></i>
                        <i class="ri ri-instagram-alt"></i>
                    </div>
                </div>
                <div class="col-md-6 d-flex flex-column align-items-center">
                    <div class="img-wrapper img-wrapper-right mb-6" data-aos="fade-left" data-aos-duration="1200" data-aos-offset="-10">
                        <div class="img-wrapper-spouse">
                            <img src="templates/wedding-3/long/_assets/img/spouse/woman.png" alt="">
                        </div>
                    </div>

                    <h3 class="font-type-secondary fw-bold" data-aos="fade-left" data-aos-duration="1300" data-aos-offset="-50">Jane Doe</h3>
                    <h6 data-aos="fade-left" data-aos-duration="1200" data-aos-offset="-50">Mempelai Wanita</h6>

                    <!-- divider -->
                    <div class="divider divider-horizontal bg-light w-17rem mx-auto mt-8 mb-4"></div>
                    <div class="d-flex align-items-center justify-content-center">
                        <i class="ri ri-facebook-alt"></i>
                        <i class="ri ri-twitter-alt mx-3 mx-lg-6"></i>
                        <i class="ri ri-instagram-alt"></i>
                    </div>
                </div>
            </div>
        </div>

        <!-- decoreation -->
        <img src="templates/wedding-3/long/_assets/img/decoration/foliage-light-left.svg" alt="" class="decoration" id="section-2-decoration-1" data-aos="fade-left" data-aos-duration="1200">
        <img src="templates/wedding-3/long/_assets/img/decoration/foliage-light-right.svg" alt="" class="decoration" id="section-2-decoration-2" data-aos="fade-right" data-aos-duration="1200">
    </section>
    <!-- end of section-2 -->

    <!-- section-3 : constains story -->
    <section id="section-3">
        <div class="container text-dark text-center">
            <h3 class="font-type-secondary font-bold mb-4" data-aos="fade-up" data-aos-duration="1200">Story</h3>
            <div class="fw-lighter mb-16" data-aos="fade-up" data-aos-duration="1300">
                Posuere mattis velit in ornare ac nunc pulvinar nunc tristique. Cras consequat diam at <br class="d-none d-lg-block">
                aliquam. Consequat, quis id tellus sit egestas tortor, quis auctor morbi. 
            </div>

            <div class="row justify-content-center">
                <div class="col-md-6 col-lg-4">
                    <div id="section-3-card-1" class="card" data-aos="fade-right" data-aos-duration="1200">
                        <div class="card-body">
                            <div class="text-md text-dark mb-4">Kami satu sekolah</div>
                            <p class="text-dark-500">
                                Malesuada nibh amet, dui lectus vitae nam malesuada arcu sagittis. Natoque viverra condimentum at condimentum dolor quis aliquam. At sed pellentesque rhoncus nascetur. Iaculis gravida euismod aliquet sed nunc id. Arcu hac eget 
                            </p>
                        </div>
                    </div>
                    <div id="section-3-card-3" class="card" data-aos="fade-right" data-aos-duration="1200">
                        <div class="card-body">
                            <div class="text-md text-dark mb-4">Berpisah karena kuliah</div>
                            <p class="text-dark-500">
                                Malesuada nibh amet, dui lectus vitae nam malesuada arcu sagittis. Natoque viverra condimentum at condimentum dolor quis aliquam. At sed pellentesque rhoncus nascetur. Iaculis gravida euismod aliquet sed nunc id. Arcu hac eget 
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-auto d-none d-lg-block" data-aos="fade-up" data-aos-duration="1200">
                    <img src="templates/wedding-3/long/_assets/img/decoration/list-decoration.svg" alt="">
                </div>
                <div class="col-md-6 col-lg-4">
                    <div id="section-3-card-2" class="card" data-aos="fade-left" data-aos-duration="1200">
                        <div class="card-body">
                            <div class="text-md text-dark mb-4">Kami satu sekolah</div>
                            <p class="text-dark-500">
                                Malesuada nibh amet, dui lectus vitae nam malesuada arcu sagittis. Natoque viverra condimentum at condimentum dolor quis aliquam. At sed pellentesque rhoncus nascetur. Iaculis gravida euismod aliquet sed nunc id. Arcu hac eget 
                            </p>
                        </div>
                    </div>
                    <div id="section-3-card-4" class="card" data-aos="fade-left" data-aos-duration="1200">
                        <div class="card-body">
                            <div class="text-md text-dark mb-4">Kami satu sekolah</div>
                            <p class="text-dark-500">
                                Malesuada nibh amet, dui lectus vitae nam malesuada arcu sagittis. Natoque viverra condimentum at condimentum dolor quis aliquam. At sed pellentesque rhoncus nascetur. Iaculis gravida euismod aliquet sed nunc id. Arcu hac eget 
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- decoreation -->
        <img src="templates/wedding-3/long/_assets/img/decoration/foliage-dark-left.svg" alt="" class="decoration" id="section-3-decoration-1" data-aos="fade-right" data-aos-duration="1200">
        <img src="templates/wedding-3/long/_assets/img/decoration/foliage-dark-right.svg" alt="" class="decoration" id="section-3-decoration-2"  data-aos="fade-left" data-aos-duration="1200">
    </section>
    <!-- end of section-3 -->

    <!-- section-4 : contains gallery -->
    <section id="section-4">
        <div class="container text-white text-center">
            <h3 class="font-type-secondary font-bold mb-4" data-aos="fade-up" data-aos-duration="1200">Galeri</h3>
            <div class="fw-lighter mb-16" data-aos="fade-up" data-aos-duration="1300">
                Posuere mattis velit in ornare ac nunc pulvinar nunc tristique. Cras consequat diam at aliquam. <br class="d-none d-lg-block">
                Consequat, quis id tellus sit egestas tortor, quis auctor morbi. 
            </div>

            <!-- Gallery slider 1 -->
            <div class="row align-items-center justify-content-end mb-10">
                <div class="col-lg">
                    <div class="tinyslider-container-wrapper">
                        <div id="tinyslider-container-gallery-1" class="tinyslider-container" class="tinyslider">
                            <div class="tinyslider-item tinyslider-item-gallery-1">
                                <img src="templates/wedding-3/long/_assets/img/gallery/1.jpg" alt="">
                            </div>
                            <div class="tinyslider-item tinyslider-item-gallery-1">
                                <img src="templates/wedding-3/long/_assets/img/gallery/2.jpg" alt="">
                            </div>
                            <div class="tinyslider-item tinyslider-item-gallery-1">
                                <img src="templates/wedding-3/long/_assets/img/gallery/3.jpg" alt="">
                            </div>
                            <div class="tinyslider-item tinyslider-item-gallery-1">
                                <img src="templates/wedding-3/long/_assets/img/gallery/4.jpg" alt="">
                            </div>
                            <div class="tinyslider-item tinyslider-item-gallery-1">
                                <img src="templates/wedding-3/long/_assets/img/gallery/5.jpg" alt="">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-auto">
                    <div class="tinyslider-controls-wrapper">
                        <div id="tinyslider-controls-gallery-1" class="tinyslider-controls" class="row justify-content-end">
                            <div class="col-auto d-none">
                                <img src="templates/wedding-3/long/_assets/img/icons/tinyslider-next.svg" alt="">
                            </div>
                            <div class="col-auto">
                                <img id="icon-tinyslider-next" src="templates/wedding-3/long/_assets/img/icons/tinyslider-next.svg" class="csr-pointer w-5rem" alt="">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Gallery slider 2 -->
            <div class="row align-items-center justify-content-end mb-10">
                <div class="col-lg">
                    <div class="tinyslider-container-wrapper">
                        <div id="tinyslider-container-gallery-2" class="tinyslider-container" class="tinyslider">
                            <div class="tinyslider-item tinyslider-item-gallery-2">
                                <img src="templates/wedding-3/long/_assets/img/gallery/1.jpg" alt="">
                            </div>
                            <div class="tinyslider-item tinyslider-item-gallery-2">
                                <img src="templates/wedding-3/long/_assets/img/gallery/2.jpg" alt="">
                            </div>
                            <div class="tinyslider-item tinyslider-item-gallery-2">
                                <img src="templates/wedding-3/long/_assets/img/gallery/3.jpg" alt="">
                            </div>
                            <div class="tinyslider-item tinyslider-item-gallery-2">
                                <img src="templates/wedding-3/long/_assets/img/gallery/4.jpg" alt="">
                            </div>
                            <div class="tinyslider-item tinyslider-item-gallery-2">
                                <img src="templates/wedding-3/long/_assets/img/gallery/5.jpg" alt="">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-auto">
                    <div class="tinyslider-controls-wrapper">
                        <div id="tinyslider-controls-gallery-2" class="tinyslider-controls" class="row justify-content-end">
                            <div class="col-auto d-none">
                                <img src="templates/wedding-3/long/_assets/img/icons/tinyslider-next.svg" alt="">
                            </div>
                            <div class="col-auto">
                                <img id="icon-tinyslider-next" src="templates/wedding-3/long/_assets/img/icons/tinyslider-next.svg" class="csr-pointer w-5rem" alt="">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
        </div>

        <!-- decoreation -->
        <img src="templates/wedding-3/long/_assets/img/decoration/foliage-black-left.svg" alt="" class="decoration" id="section-4-decoration-1"  data-aos="fade-left" data-aos-duration="1200">
        <img src="templates/wedding-3/long/_assets/img/decoration/foliage-black-right.svg" alt="" class="decoration" id="section-4-decoration-2"  data-aos="fade-right" data-aos-duration="1200">
    </section>
    <!-- end of section-4 -->

    <!-- section-5 : contains form -->
    <section id="section-5">
        <div class="container text-light text-center">
            <h3 class="font-type-secondary font-bold mb-4" data-aos="fade-up" data-aos-duration="1200">RSVP</h3>
            <div class="fw-lighter mb-16" data-aos="fade-up" data-aos-duration="1300">
                Posuere mattis velit in ornare ac nunc pulvinar nunc tristique. Cras consequat diam at aliquam. <br class="d-none d-lg-block">
                Consequat, quis id tellus sit egestas tortor, quis auctor morbi. 
            </div>

            <!-- row form -->
            <form class="mb-16" action="core.php" method="POST">
                <div class="row justify-content-center text-start">
                    <div class="col-lg-10" action="core.php" method="POST">
                        <div class="mb-4 mb-lg-6">
                            <label for="" class="form-label">Nama</label>
                            <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
                            <input type="text" class="form-control {% if session.flash_name!=null %} is-invalid {% else %} is-valid {% endif %}" 
                                placeholder="Nama lengkap" name="name" value="{% if session.flash_old_name!=null %} {{session.flash_old_name}} {% endif %}">
                            {% if session.flash_name!=null %}
                                <div class="invalid-feedback">
                                    {{ session.flash_name }}
                                </div>
                            {% endif %}
                        </div>
                        <div class="mb-4 mb-lg-6">
                            <label for="" class="form-label">WhatsApp / Hp</label>
                            <input type="text" class="form-control {% if session.flash_phone!=null %} is-invalid {% else %} is-valid {% endif %}" 
                                placeholder="Nomor Hp atau Whatsapp" name="phone" value="{% if session.flash_old_phone!=null %} {{session.flash_old_phone}} {% endif %}">
                            {% if session.flash_phone!=null %}
                                <div class="invalid-feedback">
                                    {{ session.flash_phone }}
                                </div>
                            {% endif %}
                        </div>
                        <div class="mb-4 mb-lg-6">
                            <label for="" class="form-label">Apakah anda bersedia hadir di acara kami?</label>
                            <select class="form-select {% if session.flash_attendance!=null %} is-invalid {% else %} is-valid {% endif %}" 
                                aria-label="Default select example" name="attendance">
                                <option selected disabled>Pilih salah satu</option>
                                <option {% if session.flash_old_attendance!=null and session.flash_old_attendance==1 %} selected {% endif %} value="1">Ya</option>
                                <option {% if session.flash_old_attendance!=null and session.flash_old_attendance==2 %} selected {% endif %} value="2">Tidak</option>
                            </select>
                        </div>
                        <div class="mb-4 mb-lg-6">
                            <label for="" class="form-label">Tulis ucapan</label>
                            <textarea name="greeting" id="" cols="30" rows="8" placeholder="Anda bisa menuliskan ucapan selamat dan doa" 
                            class="form-control {% if session.flash_greeting!=null %} is-invalid {% else %} is-valid {% endif %}"
                                >{% if session.flash_old_greeting!=null %} {{session.flash_old_greeting}} {% endif %}</textarea>
                            {% if session.flash_greeting!=null %}
                                <div class="invalid-feedback">
                                    {{ session.flash_greeting }}
                                </div>
                            {% endif %}
                        </div>
                    </div>
                    <div class="w-100"></div>
                    <div class="col-auto">
                        <button class="btn btn-primary" type="submit">Kirim Ucapan</button>
                    </div>
                </div>
            </form>
            <!-- end of row form -->

            {% if datas.read().in('greetings').count() > 0 %}
            <!-- messages -->
            <div id="tinyslider-container-message"> 
                {% for data in datas.read().in('greetings').get() %}
                    <div class="tinyslider-item tinyslider-item-message">
                        <div>{{ datas.read().in('rsvp').where('id', '==', data.rsvp_id).first().name }}</div>
                        <div class="text-sm text-gray">{{ datas.read().in('rsvp').where('id', '==', data.rsvp_id).first().created_at | timeago }}</div>
                        <div class="text-sm">
                            {{ data.greeting }}
                        </div>
                    </div>
                {% endfor %}
            </div>
            <!-- end of messages -->
            {% endif %}

            <div id="tinyslider-controls-message" class="row w-100 justify-content-between mt-4 mt-lg-6">
                <div class="col-auto">
                    <img src="templates/wedding-3/long/_assets/img/icons/tinyslider-prev.svg" class="csr-pointer w-3rem" alt="">
                </div>
                <div class="col-auto">
                    <img src="templates/wedding-3/long/_assets/img/icons/tinyslider-next.svg" class="csr-pointer w-3rem" alt="">
                </div>
            </div>
        </div>

        <!-- decoreation -->
        <img src="templates/wedding-3/long/_assets/img/decoration/foliage-dark-left.svg" alt="" class="decoration" id="section-5-decoration-1" data-aos="fade-left" data-aos-duration="1200">
        <img src="templates/wedding-3/long/_assets/img/decoration/foliage-dark-right.svg" alt="" class="decoration" id="section-5-decoration-2"
        data-aos="fade-right" data-aos-duration="1200">
    </section>
    <!-- end of section-5 -->

    <!-- section-6 : contains countdown-row-2 -->
    <section id="section-6">
        <div class="container text-light text-center">
            <h6 class="mb-4">Hitung mundur waktu acara</h6>
            <div id="countdown-row-2" class="row justify-content-center">
                <div class="col-auto text-center">
                    <div class="card card-countdown">
                        <div data-days class="card-body">20</div>
                    </div>
                    <div>Hari</div>
                </div>
                <div class="col-auto text-center">
                    <div class="card card-countdown">
                        <div data-hours class="card-body">20</div>
                    </div>
                    <div>Jam</div>
                </div>
                <div class="col-auto text-center">
                    <div class="card card-countdown">
                        <div data-minutes class="card-body">20</div>
                    </div>
                    <div>Menit</div>
                </div>
                <div class="col-auto text-center">
                    <div class="card card-countdown">
                        <div data-seconds class="card-body">20</div>
                    </div>
                    <div>Detik</div>
                </div>
            </div>
        </div>
    </section>
    <!-- end of section-6 -->

    <footer id="footer">
        <div class="container">
            <div class="row">
                <div class="col-sm mb-3 mb-md-0">Copyright Levidio Wedding - All Rights Reserved</div>
                <div class="col-sm-auto">info@rootpixel.net</div>
            </div>
        </div>
    </footer>


    <button id="btn-play" class="btn btn-icon btn-icon-page">
        <i class="ri ri-volume-off"></i>
    </button>
    <a href="#index" id="btn-to-top" class="btn btn-icon btn-icon-page page-scroll">
        <i class="ri ri-arrow-up"></i>
    </a>

    <audio controls id="audio" class="d-none" style="visibility: hidden;">
        <source src="templates/wedding-3/long/_assets/music.mp3" type="audio/mpeg">
    </audio>

    <!-- JS -->
    <!-- Bootstrap -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
    <!-- Countdown -->
    <script src="https://cdn.jsdelivr.net/npm/timezz@6.1.0/dist/timezz.min.js"></script>
    <!-- Lightgallery -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery-js/1.4.0/js/lightgallery.min.js" integrity="sha512-b4rL1m5b76KrUhDkj2Vf14Y0l1NtbiNXwV+SzOzLGv6Tz1roJHa70yr8RmTUswrauu2Wgb/xBJPR8v80pQYKtQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <!-- Aos Animation os scroll -->
    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
    <!-- Anime js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js" integrity="sha512-z4OUqw38qNLpn1libAN9BsoDx6nbNFio5lA6CuTp9NlK83b89hgyCVq+N5FdBJptINztxn1Z3SaKSKUS5UP60Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <!-- Tiny slider -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.3/min/tiny-slider.min.js" integrity="sha512-Pkcph1V1x3OJMZd1RJhG4cnsW+rTAT7fp1X2FlYF9+yZjm+zu8BbcpBqw8FpspmFMZcOr29TavH6CUBIz3bzYw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <!-- Plyr video player -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/plyr/3.6.8/plyr.min.js" integrity="sha512-8Tq/SKkeNKeVYZCkk0esWn+r00nNMcfZhsdszg9GN7BZSGgV1v9AJ8qHDI/PqFqRYZVOe8Afbph7OFb7SWwaPA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <!-- App -->
    <script src="templates/wedding-3/long/_assets/js/app.js"></script>
</body>
</html>
