<!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-8/long/_assets/img/favicon/favicon-16x16.png" sizes="16x16"/>
    <link rel="icon" type="image/png" href="templates/wedding-8/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" />
    <!-- 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-8/long/_assets/css/app.min.css">
</head>
<body id="index" class="opening-show" style="cursor: default !important;">
<!-- <body id="index"> -->

    <section id="opening">
        <div class="container text-white text-center flex-grow-1" data-aos="zoom-in" data-aos-duration="1200">
            <h5>Halo, <span id="guest">Justin Gouse</span></h5>
            <h5 class="mb-7">Kami mengundang Anda ke Acara Pernikahan kami</h5>
            <h1 class="font-type-secondary fw-bold">John Doe & Jane Doe</h1>
            
            <h5 class="mt-6 mb-8">30 Mei 2022</h5>

            <button id="btn-open-opening" class="btn btn-sm btn-primary mb-10">
                BUKA UNDANGAN
            </button>
        </div>
    </section>

    <!-- header -->
    <header id="header">
        <nav class="navbar navbar-expand-md">
            <div class="container">
                <a href="" class="navbar-brand d-md-none">
                    <h4 class="font-type-secondary">Our Invitation</h4>
                </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"></i></h6>
                </button>
                <div class="collapse navbar-collapse justify-content-center" id="navbarSupportedContent">
                    <ul class="navbar-nav mb-2 mb-md-0">
                        <li class="nav-item">
                            <a class="nav-link page-scroll" href="#section-3">CERITA KITA</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link page-scroll" href="#section-2">GALERI</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link page-scroll" href="#section-4">JADWAL PERNIKAHAN</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link page-scroll" href="#section-7">RSVP</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>

        <div class="container d-flex flex-column align-items-stretch justify-content-center pt-6 pt-lg-8 mb-16">
            <div class="text-white text-center pt-10" data-aos="zoom-in" data-aos-duration="1200">
                <h5 class="mb-5">Pernikahan</h5>
                <h1 class="font-type-secondary fw-bold mb-5">John Doe & Jane Doe</h1>
                <h5>Save the Date</h5>
                
                <h5 class="fw-bold mt-8">30 Mei 2022</h5>
            </div>
        </div>
    </header>
    <!-- end of header -->

    <!-- section-1 : contains spouse profile -->
    <section id="section-1">
        <div class="container text-center">
            <h3 class="font-type-secondary fw-bold mb-4 mb-md-10 mb-lg-16" data-aos="fade-up" data-aos-duration="1200">Mempelai yang Saling Mencintai</h3>
            <div class="row">
                <div class="col">
                    <div class="row gx-5 align-items-lg-center">
                        <div class="col col-md-6 order-2 order-md-1 text-center text-md-end mt-4 mt-md-0">
                            <h5 class="fw-bold" data-aos="fade-right" data-aos-offset="-30" data-aos-duration="1000">John Doe</h5>
                            <div class="text-md my-3" data-aos="fade-right" data-aos-offset="-30" data-aos-duration="1050">Putra dari</div>
                            <div class="text-md" data-aos="fade-right" data-aos-offset="-30" data-aos-duration="1100">Bpk. Jacob Jones</div>
                            <div class="text-md" data-aos="fade-right" data-aos-offset="-30" data-aos-duration="1150">Ibu Jane Cooper</div>

                            <div class="mt-4" data-aos="fade-right" data-aos-offset="-30" data-aos-duration="1200">
                                <img src="templates/wedding-8/long/_assets/img/icons/ig.svg" alt="">
                                <img src="templates/wedding-8/long/_assets/img/icons/fb.svg" alt="" class="mx-1 mx-md-3">
                                <img src="templates/wedding-8/long/_assets/img/icons/twitter.svg" alt="">
                            </div>
                        </div>
                        <div class="col-md-6 order-1 order-md-2" data-aos="fade-right" data-aos-offset="-30" data-aos-duration="1000">
                            <div class="img-wrapper img-wrapper-spouse">
                                <img src="templates/wedding-8/long/_assets/img/spouse/man.jpg" alt="">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-auto align-self-center" data-aos="zoom-in" data-aos-offset="-200" data-aos-duration="1000">
                    <div id="section-1-divider-spouse">&</div>
                </div>
                <div class="col">
                    <div class="row gx-5 align-items-lg-center">
                        <div class="col col-md-6 order-2 text-center text-md-start mt-4 mt-md-0">
                            <h5 class="fw-bold" data-aos="fade-left" data-aos-offset="-30" data-aos-duration="1000">John Doe</h5>
                            <div class="text-md my-3" data-aos="fade-left" data-aos-offset="-30" data-aos-duration="1050">Putri dari</div>
                            <div class="text-md" data-aos="fade-left" data-aos-offset="-30" data-aos-duration="1100">Bpk. Jacob Jones</div>
                            <div class="text-md" data-aos="fade-left" data-aos-offset="-30" data-aos-duration="1150">Ibu Jane Cooper</div>

                            <div class="mt-4" data-aos="fade-left" data-aos-offset="-30" data-aos-duration="1200">
                                <img src="templates/wedding-8/long/_assets/img/icons/ig.svg" alt="">
                                <img src="templates/wedding-8/long/_assets/img/icons/fb.svg" alt="" class="mx-1 mx-md-3">
                                <img src="templates/wedding-8/long/_assets/img/icons/twitter.svg" alt="">
                            </div>
                        </div>
                        <div class="col-md-6 order-md-1" data-aos="fade-left" data-aos-offset="-30" data-aos-duration="1000">
                            <div class="img-wrapper img-wrapper-spouse">
                                <img src="templates/wedding-8/long/_assets/img/spouse/woman.jpg" alt="">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <img src="templates/wedding-8/long/_assets/img/decoration/leafs-1-bottom-left.png" alt="" class="decoration" id="section-1-decoration-1" data-aos="fade-up-right" data-aos-offset="-20" data-aos-duration="1400">
        <img src="templates/wedding-8/long/_assets/img/decoration/leafs-1-bottom-right.png" alt="" class="decoration" id="section-1-decoration-2" data-aos="fade-up-left" data-aos-offset="-20" data-aos-duration="1400">
    </section>
    <!-- end of section-1 -->

    <!-- section-2 : contains gallery -->
    <section id="section-2">
        <div class="container position-relative" data-aos="fade-up" data-aos-duration="1200">
            <div id="row-lightgallery" class="row g-5">
                <div class="col-lg-8">
                    <div class="row g-5">
                        <div class="col-lg-6">
                            <h2 class="font-type-secondary fw-bold mb-10">Galeri</h2>
                            <div class="fw-light text-xl">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Dignissim scelerisque risus lacus egestas amet neque egestas ipsum. Convallis morbi sollicitudin integer proin fames. Morbi condimentum amet odio amet id. Facilisi massa duis dui.
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div data-src="templates/wedding-8/long/_assets/img/gallery/1.jpg" class="img-wrapper img-wrapper-gallery-1">
                                <img src="templates/wedding-8/long/_assets/img/gallery/1.jpg" alt="">
                            </div>
                        </div>
                        <div class="col-md-6 col-lg-12">
                            <div data-src="templates/wedding-8/long/_assets/img/gallery/2.jpg" class="img-wrapper img-wrapper-gallery-2">
                                <img src="templates/wedding-8/long/_assets/img/gallery/2.jpg" alt="">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div data-src="templates/wedding-8/long/_assets/img/gallery/3.jpg" class="img-wrapper img-wrapper-gallery-3">
                        <img src="templates/wedding-8/long/_assets/img/gallery/3.jpg" alt="">
                    </div>
                </div>

                <div class="col-12">
                    <div class="row g-5">
                        <div class="col-md-6">
                            <div data-src="templates/wedding-8/long/_assets/img/gallery/4.jpg" class="img-wrapper img-wrapper-gallery-4">
                                <img src="templates/wedding-8/long/_assets/img/gallery/4.jpg" alt="">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div data-src="templates/wedding-8/long/_assets/img/gallery/5.jpg" class="img-wrapper img-wrapper-gallery-4">
                                <img src="templates/wedding-8/long/_assets/img/gallery/5.jpg" alt="">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- decoration -->
            <img src="templates/wedding-8/long/_assets/img/decoration/leaf-2-right.png" alt="" class="decoration" id="section-2-decoration-1">
            <img src="templates/wedding-8/long/_assets/img/decoration/leaf-3-left.png" alt="" class="decoration" id="section-2-decoration-2">
            <img src="templates/wedding-8/long/_assets/img/decoration/leaf-3-right.png" alt="" class="decoration" id="section-2-decoration-3">
        </div>
    </section>
    <!-- end of section-2 -->

    <!-- section-3 : contains story -->
    <section id="section-3">
        <div class="container-xxl overflow-hidden">
            <h2 class="font-type-secondary fw-bold text-center mb-10 mb-lg-16" data-aos="fade-up" data-aos-duration="1200">Cerita Kita</h2>
            <div class="row align-items-lg-center gx-0 mb-8 mb-lg-16" data-aos="fade-right" data-aos-duration="1200">
                <div class="col-auto d-none d-md-block">
                    <div class="w-md-3rem w-xl-6rem"></div>
                </div>
                <div class="col-md order-2 order-md-1">
                    <div class="card card-bordered">
                        <div class="card-body bg-primary text-white">
                            <h4 class="fw-bold mb-6">Terlibat Suatu Project Bersama</h4>
                            <div class="text-lg fw-light">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Egestas porta amet suspendisse in sit tincidunt interdum faucibus. Ultricies magna tellus vitae, pellentesque porttitor odio. Amet porta suspendisse nulla mauris. Sagittis gravida at libero tincidunt cursus dolor in. Donec erat accumsan lorem in. Facilisi erat interdum elit elit, tempor. Sit lectus non ut.
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 col-xl-5 order-1 order-md-2 pt-md-8rem pt-lg-0">
                    <div class="obj-fit obj-fit-cover obj-pos-top w-100 h-32rem h-xl-46rem">
                        <img src="templates/wedding-8/long/_assets/img/misc/story-1.jpg" alt="">
                    </div>
                </div>
            </div>
            <div class="row align-items-lg-center gx-0 mb-8 mb-lg-16" data-aos="fade-left" data-aos-duration="1200">
                <div class="col-md-4 col-xl-5 pt-md-8rem pt-lg-0">
                    <div class="obj-fit obj-fit-cover obj-pos-top w-100 h-32rem h-xl-46rem">
                        <img src="templates/wedding-8/long/_assets/img/misc/story-2.jpg" alt="">
                    </div>
                </div>
                <div class="col-md">
                    <div class="card card-bordered">
                        <div class="card-body bg-primary text-white">
                            <h4 class="fw-bold mb-6">Terlibat Suatu Project Bersama</h4>
                            <div class="text-lg fw-light">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Egestas porta amet suspendisse in sit tincidunt interdum faucibus. Ultricies magna tellus vitae, pellentesque porttitor odio. Amet porta suspendisse nulla mauris. Sagittis gravida at libero tincidunt cursus dolor in. Donec erat accumsan lorem in. Facilisi erat interdum elit elit, tempor. Sit lectus non ut.
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-auto d-none d-md-block">
                    <div class="w-md-3rem w-xl-6rem"></div>
                </div>
            </div>
            <div class="row align-items-lg-center gx-0" data-aos="fade-right" data-aos-duration="1200">
                <div class="col-auto d-none d-md-block">
                    <div class="w-md-3rem w-xl-6rem"></div>
                </div>
                <div class="col-md order-2 order-md-1">
                    <div class="card card-bordered">
                        <div class="card-body bg-primary text-white">
                            <h4 class="fw-bold mb-6">Terlibat Suatu Project Bersama</h4>
                            <div class="text-lg fw-light">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Egestas porta amet suspendisse in sit tincidunt interdum faucibus. Ultricies magna tellus vitae, pellentesque porttitor odio. Amet porta suspendisse nulla mauris. Sagittis gravida at libero tincidunt cursus dolor in. Donec erat accumsan lorem in. Facilisi erat interdum elit elit, tempor. Sit lectus non ut.
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 col-xl-5 order-1 order-md-2 pt-md-8rem pt-lg-0">
                    <div class="obj-fit obj-fit-cover obj-pos-top w-100 h-32rem h-xl-46rem">
                        <img src="templates/wedding-8/long/_assets/img/misc/story-3.jpg" alt="">
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- end of section-3 -->

    <!-- section-4 : contains schedule -->
    <section id="section-4">
        <div class="container">
            <h2 class="font-type-secondary fw-bold text-center mb-10">Jadwal Pernikahan</h2>
            <div class="row gx-xl-5 justify-content-center">
                <div class="col-md col-lg-5 col-xl-3 mb-6 mb-md-0">
                    <h4 class="font-type-secondary fw-bold">Akad Nikah</h4>
                    <div class="text-md mt-4 mb-6">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nisl a elementum placerat quis arcu enim, commodo risus.
                    </div>
                    <div class="row gx-lg-5 align-items-center mb-6">
                        <div class="col-md-auto mb-3 mb-md-0"><img src="templates/wedding-8/long/_assets/img/icons/calendar.svg" class="w-2rem" alt=""></div>
                        <div class="col">
                            <div class="text-md fw-semibold text-spacing-default mb-2">HARI DAN TANGGAL</div>
                            <div class="text-md fw-light">Minggu, 30 Mei 2021</div>
                        </div>
                    </div>
                    <div class="row gx-lg-5 align-items-center mb-6">
                        <div class="col-md-auto mb-3 mb-md-0"><img src="templates/wedding-8/long/_assets/img/icons/clock.svg" class="w-2rem" alt=""></div>
                        <div class="col">
                            <div class="text-md fw-semibold text-spacing-default mb-2">WAKTU</div>
                            <div class="text-md fw-light">07.00 - Selesai</div>
                        </div>
                    </div>
                </div>
                <!-- spacer only -->
                <div class="col-auto">
                    <div class="w-xl-10rem"></div>
                </div>
                <div class="col-md col-lg-5 col-xl-3">
                    <h4 class="font-type-secondary fw-bold">Resepsi</h4>
                    <div class="text-md mt-4 mb-6">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nisl a elementum placerat quis arcu enim, commodo risus.
                    </div>
                    <div class="row gx-lg-5 align-items-center mb-6">
                        <div class="col-md-auto mb-3 mb-md-0"><img src="templates/wedding-8/long/_assets/img/icons/calendar.svg" class="w-2rem" alt=""></div>
                        <div class="col">
                            <div class="text-md fw-semibold text-spacing-default mb-2">HARI DAN TANGGAL</div>
                            <div class="text-md fw-light">Minggu, 30 Mei 2021</div>
                        </div>
                    </div>
                    <div class="row gx-lg-5 align-items-center mb-6">
                        <div class="col-md-auto mb-3 mb-md-0"><img src="templates/wedding-8/long/_assets/img/icons/clock.svg" class="w-2rem" alt=""></div>
                        <div class="col">
                            <div class="text-md fw-semibold text-spacing-default mb-2">WAKTU</div>
                            <div class="text-md fw-light">07.00 - Selesai</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- end of section-4 -->

    <!-- section-5 : contains coundown -->
    <section id="section-5">
        <div class="container">
            <div id="countdown-row" class="row gx-2 gx-sm-4 align-items-center justify-content-center my-5">
                <div class="col-auto">
                    <div class="card card-countdown">
                        <div class="card-body">
                            <h1 data-days>120</h1>
                            <h5>HARI</h5>
                        </div>
                    </div>
                </div>
                <div class="col-auto px-1 d-none d-sm-block">
                    <div class="divider divider-countdown">:</div>
                </div>
                <div class="col-auto">
                    <div class="card card-countdown">
                        <div class="card-body">
                            <h1 data-hours>66</h1>
                            <h5>JAM</h5>
                        </div>
                    </div>
                </div>
                <div class="col-auto px-1 d-none d-sm-block">
                    <div class="divider divider-countdown">:</div>
                </div>
                <div class="col-auto">
                    <div class="card card-countdown">
                        <div class="card-body">
                            <h1 data-minutes>66</h1>
                            <h5>MENIT</h5>
                        </div>
                    </div>
                </div>
                <div class="col-auto px-1 d-none d-sm-block">
                    <div class="divider divider-countdown">:</div>
                </div>
                <div class="col-auto">
                    <div class="card card-countdown">
                        <div class="card-body">
                            <h1 data-seconds>66</h1>
                            <h5>DETIK</h5>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- end of section-5 -->

    <!-- section-6 : contains map -->
    <section id="section-6">
        <div class="container">
            <h2 class="font-type-secondary fw-bold text-center mb-10">Lokasi Pernikahan</h2>

            <div class="card card-bordered position-relative">
                <div class="card-body p-0" style="position: relative; z-index: 2;">
                    <div class="mapouter">
                        <div class="gmap_canvas w-100 h-24rem h-md-36rem h-lg-56rem">
                            <iframe 
                                class="h-24rem h-md-36rem h-lg-56rem"
                                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>

                <!-- decoration -->
                <img 
                    src="templates/wedding-8/long/_assets/img/decoration/leaf-4-right.png" 
                    alt="" 
                    class="w-20rem" 
                    style="position: absolute; right: -8rem; bottom: -8rem; z-index: 1;">
            </div>
        </div>
    </section>
    <!-- end of section-6 -->

    <!-- section-7 : contains rsvp -->
    <section id="section-7">
        <div class="container-xxl position-relative">
            <div class="card card-bordered">
                <div class="card-body bg-light">
                    <div class="row gx-md-5">
                        <div class="col-md-7 col-lg-6 order-2 order-md-1">
                            <h2 class="font-type-secondary fw-bold mb-6">RSVP</h2>
                            <form action="core.php" method="POST">
                                <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
                                <div class="mb-7">
                                    <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-7">
                                    <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="my-7">
                                    <div class="form-check mb-2">
                                        <input class="form-check-input" value="1" type="radio" name="attendance" id="flexRadioDefault1" checked>
                                        <label class="form-check-label" for="flexRadioDefault1">
                                            Ya, saya akan hadir
                                        </label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" value="2" type="radio" name="attendance" id="flexRadioDefault2">
                                        <label class="form-check-label" for="flexRadioDefault2">
                                            Tidak, saya tidak bisa hadir
                                        </label>
                                    </div>
                                </div>
                                <div class="mb-10">
                                    <input name="greeting" type="text" id="" placeholder="Tulis pesan dan doa untuk mempelai"
                                        class="form-control {% if session.flash_greeting!=null %} is-invalid {% else %} is-valid {% endif %}"
                                        value="{% if session.flash_old_greeting!=null %} {{session.flash_old_greeting}} {% endif %}">
                                    {% if session.flash_greeting!=null %}
                                        <div class="invalid-feedback">
                                            {{ session.flash_greeting }}
                                        </div>
                                    {% endif %}
                                </div>
            
                                <button class="btn btn-primary" type="submit">Kirim Ucapan</button>
                            </form>
                        </div>
                        <div class="col-md-5 col-lg order-1 order-md-2 mb-6 mb-md-0">
                            <div class="img-wrapper" id="section-7-img-wrapper">
                                <img src="templates/wedding-8/long/_assets/img/misc/rsvp.jpg" alt="">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- end of section-7 -->

    <!-- section-8 : contains messages -->
    <section id="section-8">
        <div class="container">
            <h4 class="font-type-secondary fw-bold mb-8 mb-lg-12">Ucapan dan Doa untuk Mempelai</h4>
            
            {% if datas.read().in('greetings').count() > 0 %}
                <div class="row g-4 g-lg-5">
                    {% for data in datas.read().in('greetings').get() %}
                        <div class="col-md-6">
                            <div class="card">
                                <div class="card-body bg-light">
                                    <div class="row gx-lg-5 mb-4">
                                        <div class="col-auto">
                                            <div class="obj-fit obj-fit-cover rounded-circle w-5rem h-5rem">
                                                <img src="templates/wedding-8/long/_assets/img/icons/avatar.svg" alt="">
                                            </div>
                                        </div>
                                        <div class="col pt-2">
                                            <div class="text-xl fw-bold">{{ datas.read().in('rsvp').where('id', '==', data.rsvp_id).first().name }}</div>
                                        </div>
                                    </div>
                                    <div class="text-md fw-ligth">
                                        {{ data.greeting }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    {% endfor %}
                </div>
            {% endif %}
        </div>
    </section>
    <!-- end of section-8 -->

    <!-- section-9 : contains closing -->
    <section id="section-9">
        <div class="container text-dark text-center py-2">
            <img src="templates/wedding-8/long/_assets/img/decoration/closing-decoration.png" alt="" class="w-18rem w-sm-24rem w-lg-32rem">

            <h5 class="fw-ligth">Terimakasih atas doa restunya</h5>
            <h3 class="font-type-secondary fw-bold">John Doe & Jane Doe</h3>
        </div>
    </section>
    <!-- end of section-9 -->

    <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-high"></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>


    <!-- hidden : audio -->
    <audio controls id="audio" class="d-none" style="visibility: hidden;">
        <source src="templates/wedding-8/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.2/min/tiny-slider.js"></script>
    <!-- App -->
    <script src="templates/wedding-8/long/_assets/js/app.js"></script>
</body>
</html>
