<!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-5/long/_assets/img/favicon/favicon-16x16.png" sizes="16x16"/>
    <link rel="icon" type="image/png" href="templates/wedding-5/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">
    <!-- Glide -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Glide.js/3.2.0/css/glide.core.min.css" integrity="sha512-YQlbvfX5C6Ym6fTUSZ9GZpyB3F92hmQAZTO5YjciedwAaGRI9ccNs4iw2QTCJiSPheUQZomZKHQtuwbHkA9lgw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Glide.js/3.2.0/css/glide.theme.min.css" integrity="sha512-wCwx+DYp8LDIaTem/rpXubV/C1WiNRsEVqoztV0NZm8tiTvsUeSlA/Uz02VTGSiqfzAHD4RnqVoevMcRZgYEcQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <!-- 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-5/long/_assets/css/app.min.css">
</head>
<body id="index" class="opening-show" style="cursor: default !important;">
<!-- <body id="index"> -->

    <section id="opening">
        <div id="opening-container-xl" class="container-xl">
            <div class="text-center pt-10 pt-lg-16">
                <h5 class="text-dark-500">Halo, <span id="guest">Justin Gouse</span></h5>
                <h5 class="text-dark-500 mb-7">Kami mengundang Anda ke Acara Pernikahan kami</h5>
                <h1 class="font-type-secondary">John Doe & Jane Doe</h1>

                <div class="divider divider-horizontal w-17rem mx-auto my-5"></div>
                <h4 class="text-dark-500 mb-12">22 - 02 - 2022</h4>

                <button id="btn-open-opening" class="btn btn-sm btn-primary mb-10"><i class="ri ri-mail mr-1"></i> Buka Undangan</button>
            </div>

            <!-- decoration container-xl -->
            <img 
                src="templates/wedding-5/long/_assets/img/decoration/flower-purple-left.png" 
                alt="" 
                class="decoration" 
                id="container-xl-decoration-1"
                data-aos="fade-up-right"
                data-aos-duration="1400">
            <img 
                src="templates/wedding-5/long/_assets/img/decoration/flower-purple-right.png" 
                alt="" 
                class="decoration" 
                id="container-xl-decoration-2"
                data-aos="fade-up-left"
                data-aos-duration="1400">
        </div>
        
        <div id="opening-container" class="container">
            <div id="opening-img-wrapper" class="img-wrapper">
                <img 
                    src="templates/wedding-5/long/_assets/img/misc/header-bridge.jpg" 
                    alt=""
                    data-aos-offset="0">
            </div>

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

    <header id="header">
        <div id="header-container-xl" class="container-xl">
            <nav class="navbar navbar-expand-md">
                <div class="container">
                    <a href="" class="navbar-brand d-md-none">
                        <h5 class="font-type-secondary">Our Invitation</h5>
                    </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-lg-0">
                            <li class="nav-item">
                                <a class="nav-link page-scroll" href="#section-2">CERITA KITA</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link page-scroll" href="#section-4">GALERI</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link page-scroll" href="#section-5">JADWAL PERNIKAHAN</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link page-scroll" href="#section-8">RSVP</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>

            <div class="text-center pt-10 pt-lg-16">
                <h5 class="text-dark-500 mb-7">Wedding Invitation</h5>
                <h1 class="font-type-secondary">John Doe & Jane Doe</h1>

                <div class="divider divider-horizontal w-17rem mx-auto my-8"></div>
                <h4 class="text-dark-500">22 - 02 - 2022</h4>
            </div>

            <!-- decoration container-xl -->
            <img 
                src="templates/wedding-5/long/_assets/img/decoration/flower-purple-left.png" 
                alt="" 
                class="decoration" 
                id="container-xl-decoration-1"
                data-aos="fade-up-right"
                data-aos-duration="1400">
            <img 
                src="templates/wedding-5/long/_assets/img/decoration/flower-purple-right.png" 
                alt="" 
                class="decoration" 
                id="container-xl-decoration-2"
                data-aos="fade-up-left"
                data-aos-duration="1400">
        </div>
        
        <div id="header-container" class="container">
            <div id="header-img-wrapper" class="img-wrapper">
                <img 
                    src="templates/wedding-5/long/_assets/img/misc/header-bridge.jpg" 
                    alt=""
                    data-aos="fade-up"
                    data-aos-duration="1400"
                    data-aos-offset="0">
            </div>

            <!-- decoration container -->
            <img 
                src="templates/wedding-5/long/_assets/img/decoration/leaf-left.png" 
                alt="" 
                class="decoration" 
                id="container-decoration-1"
                data-aos="fade-up"
                data-aos-duration="1400"
                data-aos-offset="450">
            <img 
                src="templates/wedding-5/long/_assets/img/decoration/leaf-right.png" 
                alt="" 
                class="decoration" 
                id="container-decoration-2"
                data-aos="fade-up"
                data-aos-duration="1400"
                data-aos-offset="450">
        </div>
    </header>

    <section id="section-1">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-7">
                    <h4 class="text-center mb-10">
                        “Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sed ipsum pharetra, cursus bibendum feugiat”
                    </h4>
                </div>
            </div>
            <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 data-aos="fade-right" data-aos-duration="1200">John Doe</h5>
                            <div class="text-md my-3" data-aos="fade-right" data-aos-duration="1400">Putra dari</div>
                            <div class="text-md"  data-aos="fade-right" data-aos-duration="1600">Bpk. Jacob Jones</div>
                            <div class="text-md"  data-aos="fade-right" data-aos-duration="1800">Ibu Jane Cooper</div>

                            <div class="mt-4" data-aos="fade-right" data-aos-duration="1900">
                                <img src="templates/wedding-5/long/_assets/img/icons/ig.svg" alt="">
                                <img src="templates/wedding-5/long/_assets/img/icons/fb.svg" alt="" class="mx-1 mx-md-3">
                                <img src="templates/wedding-5/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-duration="1200">
                            <div class="img-wrapper img-wrapper-spouse">
                                <img src="templates/wedding-5/long/_assets/img/spouse/man.jpg" alt="">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-auto align-self-center" data-aos="zoom-in" data-aos-duration="1200">
                    <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 data-aos="fade-left" data-aos-duration="1200">John Doe</h5>
                            <div class="text-md my-3" data-aos="fade-left" data-aos-duration="1400">Putri dari</div>
                            <div class="text-md" data-aos="fade-left" data-aos-duration="1600">Bpk. Jacob Jones</div>
                            <div class="text-md" data-aos="fade-left" data-aos-duration="1800">Ibu Jane Cooper</div>

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

    <section id="section-2">
        <div id="section-2-container-xxl" class="container-xxl">
            <div class="text-shadow text-center mb-12">
                <div class="text-shadow-content">
                    Bagaimana Kita Bertemu
                </div>
                <div class="text-shadow-item" data-aos="fade-right" data-aos-duration="1400">Kisah Kita</div>
            </div>

            <div class="row gx-lg-5 align-items-center mb-12 mb-lg-0">
                <div class="col-11 col-sm-10 col-md-6 mb-4 mb-md-0" data-aos="fade-right" data-aos-duration="1400">
                    <div id="section-2-card-1" class="card">
                        <div class="obj-fit obj-fit-cover w-28rem h-32 w-md-39rem h-md-58rem">
                            <img src="templates/wedding-5/long/_assets/img/misc/story-1.jpg" alt="">
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-lg-5 px-6 pl-md-10">
                    <h4 class="mb-6" data-aos="fade-up" data-aos-duration="1200">Lorem ipsum dolor</h4>
                    <h6 class="text-dark-500" data-aos="fade-up" data-aos-duration="1400">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Arcu quis et blandit urna neque pellentesque proin. Dictum massa, diam dignissim nulla vestibulum interdum sollicitudin. Id nulla adipiscing et vulputate turpis tempus tempus sagittis. Nulla nec nibh ipsum duis sapien aenean. Eget eu leo neque duis pharetra, sem cursus lacus, massa. Aliquet integer id turpis.
                    </h6>
                </div>
            </div>
            <div class="row gx-lg-5 align-items-center">
                <div class="col-md-6 order-md-2 mb-4 mb-md-0" data-aos="fade-left" data-aos-duration="1400">
                    <div id="section-2-card-2" class="card">
                        <div class="obj-fit obj-fit-cover w-100 w-sm-48rem h-sm-32rem w-md-52rem h-md-36rem">
                            <img src="templates/wedding-5/long/_assets/img/misc/story-2.jpg" alt="">
                        </div>
                    </div>
                </div>
                <div class="col-md-5 offset-md-1 px-6 pr-md-10">
                    <h4 class="mb-6" data-aos="fade-up" data-aos-duration="1200">Lorem ipsum dolor</h4>
                    <h6 class="text-dark-500" data-aos="fade-up" data-aos-duration="1400">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Arcu quis et blandit urna neque pellentesque proin. Dictum massa, diam dignissim nulla vestibulum interdum sollicitudin. Id nulla adipiscing et vulputate turpis tempus tempus sagittis. Nulla nec nibh ipsum duis sapien aenean. Eget eu leo neque duis pharetra, sem cursus lacus, massa. Aliquet integer id turpis.
                    </h6>
                </div>
            </div>
        </div>
    </section>

    <section id="section-3">
        <div class="container text-center">
            <div class="row justify-content-center">
                <div class="col-lg-10">
                    <h4 class="mb-8" data-aos="fade-up" data-aos-duration="1200">Lorem ipsum dolor</h4>
                    <h6 class="text-dark-500 text-height-2" data-aos="fade-up" data-aos-duration="1400">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Arcu quis et blandit urna neque pellentesque proin. Dictum massa, diam dignissim nulla vestibulum interdum sollicitudin. Id nulla adipiscing et vulputate turpis tempus tempus sagittis. Nulla nec nibh ipsum duis sapien aenean. Eget eu leo neque duis pharetra, sem cursus lacus, massa. Aliquet integer id turpis.
                    </h6>
                </div>
            </div>

            <div class="obj-fit obj-fit-cover w-100 h-lg-58rem my-10 my-lg-16">
                <img src="templates/wedding-5/long/_assets/img/misc/lorem.jpg" alt="">
            </div>

            <div class="row justify-content-center">
                <div class="col-lg-10">
                    <h5 class="text-height-2" data-aos="fade-up" data-aos-duration="1200">
                        "Dan di antara tanda-tanda (kebesaran)-Nya ialah Dia menciptakan pasangan-pasangan untukmu dari jenismu sendiri, agar kamu cenderung dan merasa tenteram kepadanya, dan Dia menjadikan di antaramu rasa kasih dan sayang. Sesungguhnya pada yang demikian itu benar-benar terdapat tanda-tanda (kebesaran Allah) bagi kaum yang berpikir."
                    </h5>
                    <div class="divider divider-horizontal w-17rem mx-auto my-10" data-aos="fade-up" data-aos-duration="1200"></div>
                    <h5 data-aos="fade-up" data-aos-duration="1400">
                        QS. Ar Rum ayat 21
                    </h5>
                </div>
            </div>
        </div>
    </section>

    <section id="section-4">
        <div id="section-4-container-xxl" class="container-xxl">
            <div class="text-shadow text-center mb-12">
                <div class="text-shadow-content">
                    Foto Prewedding Kami
                </div>
                <div class="text-shadow-item font-bold">Galeri</div>
            </div>

            <!-- #row-lightgallery make .img-wrapper-image work -->
            <div id="row-lightgallery" class="row g-4 g-lg-5">
                <div class="col-4">
                    <div 
                        data-src="templates/wedding-5/long/_assets/img/gallery/1.jpg" 
                        class="img-wrapper img-wrapper-gallery img-wrapper-gallery-1"
                        data-aos="zoom-in" 
                        data-aos-offset="-50"
                        data-aos-duration="1400">
                            <img src="templates/wedding-5/long/_assets/img/gallery/1.jpg" alt="">
                    </div>
                </div>
                <div class="col-4">
                    <div 
                        data-src="templates/wedding-5/long/_assets/img/gallery/2.jpg" 
                        class="img-wrapper img-wrapper-gallery img-wrapper-gallery-1"
                        data-aos="zoom-in" 
                        data-aos-offset="-50"
                        data-aos-duration="1600">
                            <img src="templates/wedding-5/long/_assets/img/gallery/2.jpg" alt="">
                    </div>
                </div>
                <div class="col-4">
                    <div 
                        data-src="templates/wedding-5/long/_assets/img/gallery/3.jpg" 
                        class="img-wrapper img-wrapper-gallery img-wrapper-gallery-1"
                        data-aos="zoom-in" 
                        data-aos-offset="-50"
                        data-aos-duration="1800">
                            <img src="templates/wedding-5/long/_assets/img/gallery/3.jpg" alt="">
                    </div>
                </div>
                <div class="col-6">
                    <div 
                        data-src="templates/wedding-5/long/_assets/img/gallery/4.jpg" 
                        class="img-wrapper img-wrapper-gallery img-wrapper-gallery-3"
                        data-aos="zoom-in" 
                        data-aos-offset="-50"
                        data-aos-duration="2000">
                            <img src="templates/wedding-5/long/_assets/img/gallery/4.jpg" alt="">
                    </div>
                </div>
                <div class="col-6">
                    <div class="row gy-4 gy-lg-5">
                        <div class="col-12">
                            <div 
                                data-src="templates/wedding-5/long/_assets/img/gallery/5.jpg" 
                                class="img-wrapper img-wrapper-gallery img-wrapper-gallery-2"
                                data-aos="zoom-in" 
                                data-aos-offset="-50"
                                data-aos-duration="2100">
                                    <img src="templates/wedding-5/long/_assets/img/gallery/5.jpg" alt="">
                            </div>
                        </div>
                        <div class="col-12">
                            <div 
                                data-src="templates/wedding-5/long/_assets/img/gallery/6.jpg" 
                                class="img-wrapper img-wrapper-gallery img-wrapper-gallery-2"
                                data-aos="zoom-in" 
                                data-aos-offset="-50"
                                data-aos-duration="2200">
                                    <img src="templates/wedding-5/long/_assets/img/gallery/6.jpg" alt="">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section id="section-5">
        <div class="container">
            <h3 class="mb-8 d-lg-none">Jadwal Pernikahan</h3>
            <div class="row gx-5">
                <div class="col-lg-6">
                    <div class="row gx-5 mb-10">
                        <div class="col-4 d-none d-lg-block" data-aos="fade-right" data-aos-duration="1200">
                            <img src="templates/wedding-5/long/_assets/img/decoration/leaf-light.png" alt="" class="w-14rem">
                        </div>
                        <div class="col-md-7 order-2 order-lg-0">
                            <h3 class="mb-8 d-none d-lg-block">Jadwal Pernikahan</h3>
                            <h4 class="font-type-secondary mb-6" data-aos="fade-up" data-aos-duration="1200">Akad Nikah</h4>
                            <h6 class="text-height-2 mb-4" data-aos="fade-up" data-aos-duration="1400">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. In et risus purus consectetur elit, pellentesque.
                            </h6>
                            <h6 class="mb-2" data-aos="fade-up" data-aos-duration="1500">Minggu, 30 Mei 2021</h6>
                            <h6 class="mb-6" data-aos="fade-up" data-aos-duration="1600">07.00 - Selesai</h6>
                            <h6 class="text-dark" data-aos="fade-up" data-aos-duration="1700"><a href="" class="text-dark mr-1">Lihat Detail</a> <i class="ri ri-arrow-right"></i></h6>
                        </div>

                        <div class="w-100 mb-10 d-none d-lg-block"></div>

                        <div class="col-md col-lg-9 mb-8 mb-md-0" data-aos="fade-up" data-aos-duration="1200">
                            <div class="obj-fit obj-fit-cover h-30rem">
                                <img src="templates/wedding-5/long/_assets/img/misc/schedule-2.jpg" alt="">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="row gx-5">
                        <div class="col-md col-lg-8 ms-auto" data-aos="fade-up" data-aos-duration="1200">
                            <div class="obj-fit obj-fit-cover h-30rem h-lg-22rem mb-8 mb-md-0">
                                <img src="templates/wedding-5/long/_assets/img/misc/schedule-1.jpg" alt="">
                            </div>
                        </div>

                        <div class="w-100 d-none d-lg-block"></div>

                        <div class="col-md-7 mb-10">
                            <h4 class="font-type-secondary mb-6" data-aos="fade-up" data-aos-duration="1200">Resepsi</h4>
                            <h6 class="text-height-2 mb-4" data-aos="fade-up" data-aos-duration="1400">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. In et risus purus consectetur elit, pellentesque.
                            </h6>
                            <h6 class="mb-2" data-aos="fade-up" data-aos-duration="1500">Minggu, 30 Mei 2021</h6>
                            <h6 class="mb-6" data-aos="fade-up" data-aos-duration="1600">07.00 - Selesai</h6>
                            <h6 class="text-dark" data-aos="fade-up" data-aos-duration="1700" data-aos-offset="-50"><a href="" class="text-dark mr-1">Lihat Detail</a> <i class="ri ri-arrow-right"></i></h6>
                        </div>

                        <div class="col-12 d-none d-lg-block" data-aos="fade-up" data-aos-duration="1400">
                            <div class="obj-fit obj-fit-cover h-32rem">
                                <img src="templates/wedding-5/long/_assets/img/misc/schedule-1.jpg" alt="">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section id="section-6">
        <div class="container">
            <h2 class="font-type-secondary text-white text-center mb-10 mb-lg-16" data-aos="fade-up" data-aos-duration="1400">Akad Nikah</h2>
            <div id="countdown-row" class="row gx-1 gx-sm-4 align-items-center justify-content-center my-5">
                <div class="col-auto" data-aos="fade-up" data-aos-duration="1200">
                    <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" data-aos="fade-up" data-aos-duration="1300">
                    <div class="divider divider-countdown">:</div>
                </div>
                <div class="col-auto" data-aos="fade-up" data-aos-duration="1400">
                    <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" data-aos="fade-up" data-aos-duration="1500">
                    <div class="divider divider-countdown">:</div>
                </div>
                <div class="col-auto" data-aos="fade-up" data-aos-duration="1600">
                    <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" data-aos="fade-up" data-aos-duration="1700">
                    <div class="divider divider-countdown">:</div>
                </div>
                <div class="col-auto" data-aos="fade-up" data-aos-duration="1800">
                    <div class="card card-countdown">
                        <div class="card-body">
                            <h1 data-seconds>66</h1>
                            <h5>DETIK</h5>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section id="section-7">
        <div class="container">
            <h2 class="font-type-secondary text-center mb-10">Lokasi Pernikahan</h2>
            <ul class="nav nav-tabs" id="tabs-location">
                <li class="nav-item">
                    <button class="nav-link active" id="akad-tab" data-bs-toggle="tab" data-bs-target="#akad">
                        Akad Nikah
                    </button>
                </li>
                <li class="nav-item">
                    <button class="nav-link" id="resepsi-tab" data-bs-toggle="tab" data-bs-target="#resepsi">
                        Resepsi
                    </button>
                </li>
            </ul>
            <div class="tab-content" id="tabs-location-content">
                <div class="tab-pane fade show active" id="akad">
                    <h6 class="mb-8"><i class="ri ri-pin mr-1"></i>Akad : Jl. Lorem ipsum X No. 00</h6>

                    <div class="mapouter">
                        <div class="gmap_canvas w-100 h-32rem h-md-51rem">
                            <iframe 
                                class="h-32rem h-md-51rem"
                                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 class="tab-pane fade" id="resepsi">
                    <h6 class="mb-8"><i class="ri ri-pin mr-1"></i>Resepsi : Jl. Lorem ipsum X No. 00</h6>

                    <div class="mapouter">
                        <div class="gmap_canvas w-100 h-32rem h-md-51rem">
                            <iframe 
                                class="h-32rem h-md-51rem"
                                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>
    </section>

    <!-- section-8 : form -->
    <section id="section-8">
        <div class="container">
            <h2 class="font-type-secondary text-center mb-10">RSVP</h2>
            <div class="row justify-content-center">
                <div class="col-lg-7">
                    <!-- form ucapan -->
                    <form action="core.php" method="POST">
                        <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
                        <div class="mb-3">
                            <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-3">
                            <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-5">
                            <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-5">
                            <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>
                    <!-- end of form ucapan -->
                </div>
            </div>
        </div>
    </section>

    <section id="section-9">
        <div class="container">
            <h2 class="font-type-secondary text-center mb-10 mb-lg-16">Berbagai Ucapan dan Doa untuk Mempelai</h2>
            
            {% if datas.read().in('greetings').count() > 0 %}
                <!-- row list ucapan -->
                <div class="row justify-content-center">
                    <div class="col-lg-10">
                        <div class="pr-3" style="max-height: 85vh; overflow-x: hidden; overflow-y: auto;">
                            {% for data in datas.read().in('greetings').get() %}
                                <div class="row gx-3 gx-md-5 mb-8">
                                    <div class="col-auto">
                                        <div class="w-5rem h-5rem bg-secondary rounded-circle d-flex align-items-center justify-content-center">
                                            <h5><i class="ri ri-user text-primary"></i></h5>
                                        </div>
                                    </div>
                                    <div class="col pt-2">
                                        <h5 class="font-bold">{{ datas.read().in('rsvp').where('id', '==', data.rsvp_id).first().name }}</h5>
                                        <div class="card card-message">
                                            <div class="card-body">
                                                {{ data.greeting }}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            {% endfor %}
                        </div>
                    </div>
                </div>
                <!-- end of row list ucapan -->
            {% endif %}
        </div>
    </section>

    <section id="section-10">
        <div class="container text-center">
            <h5>Terimakasih atas doa restunya</h5>
            <h2 class="font-type-secondary mt-6 mb-10">John & Jane</h2>
            <img src="templates/wedding-5/long/_assets/img/decoration//foliage-footer.png" alt="" class="w-24rem w-lg-32rem">
        </div>
    </section>

    <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="#header" 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">
        <source src="templates/wedding-5/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>
    <!-- App -->
    <script src="templates/wedding-5/long/_assets/js/app.js"></script>
</body>
</html>
