<?php
include "config.php";
$idtamu = $_GET['idtamu'];
$sql = "SELECT * FROM tamu WHERE idtamu=$idtamu";
$result = $db->query($sql);
while ($row = $result->fetch_assoc()) {
	$data[] = $row;
}
$pengantin = 114;
$sql1 = "SELECT * FROM ucapan WHERE idpengantin=$pengantin ORDER BY `ucapan`.`iducapan` DESC";
$result1 = $db->query($sql1);
while ($row1 = $result1->fetch_assoc()) {
	$data1[] = $row1;
}
?>
    <!DOCTYPE html>
    <html lang="en">

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
        <meta name="format-detection" content="telephone=no">

        <meta name="title" content="The Wedding of Widni & Hilmi | Idzibooth X Peony Planner">
        <meta name="description" content="Web Invitation by Idzibooth x Peony Planner">

        <meta property="og:type" content="website">
        <meta property="og:site_name" content="Web Invitation by Idzibooth x Peony Planner">
        <meta property="og:url" content="idzibooth.com">
        <meta property="og:title" content="The Wedding of Widni & Hilmi | Idzibooth X Peony Planner">
        <meta property="og:description" content="Web Invitation by Idzibooth x Peony Planner">
        <meta property="og:image" content="https://idzibooth.com/WidniHilmi/aul-abed_files/widni-title.png">
        <meta property="og:locale" content="in_ID">

        <meta property="twitter:card" content="https://idzibooth.com/WidniHilmi/aul-abed_files/widni-title.png">
        <meta property="twitter:url" content="idzibooth.com">
        <meta property="twitter:title" content="The Wedding of Widni & Hilmi | Idzibooth X Peony Planner">
        <meta property="twitter:description" content="Web Invitation by Idzibooth x Peony Planner">
        <meta property="twitter:image" content="https://idzibooth.com/WidniHilmi/aul-abed_files/widni-title.png">

        <script type="text/javascript" async="" src="./aul-abed_files/js"></script>
        <script async="" src="./aul-abed_files/gtm.js"></script>
        <script>
            (function(w, d, s, l, i) {
                w[l] = w[l] || [];
                w[l].push({
                    'gtm.start': new Date().getTime(),
                    event: 'gtm.js'
                });
                var f = d.getElementsByTagName(s)[0],
                    j = d.createElement(s),
                    dl = l != 'dataLayer' ? '&l=' + l : '';
                j.async = true;
                j.src =
                    'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
                f.parentNode.insertBefore(j, f);
            })(window, document, 'script', 'dataLayer', 'GTM-P7SMP7M');
        </script>

        <script src="./aul-abed_files/jquery.js"></script>
        <title>The Wedding of Widni & Hilmi | Idzibooth X Peony Planner</title>
        <link rel="icon" href="https://idzibooth.com/WidniHilmi/aul-abed_files/widni-title.png">
        <link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&amp;display=block">

        <link rel="stylesheet" href="./aul-abed_files/selectize.default.css">
        <link rel="stylesheet" href="./aul-abed_files/flexbin.css" media="all">
        <link href="https://db.onlinewebfonts.com/c/413b0d86cb6b8cc8fca3bc9111ed8e99?family=New+Walt+Disney+UI" rel="stylesheet">
        <link rel="stylesheet" href="./aul-abed_files/aos.css">
        <link rel="stylesheet" href="./aul-abed_files/lightgallery.css">
        <link rel="stylesheet" href="./aul-abed_files/all.css">
        <link rel="stylesheet" href="./aul-abed_files/slick.css">
        <link rel="stylesheet" href="./aul-abed_files/modal-video.min.css">

        <script src="./aul-abed_files/web"></script>
        <link rel="stylesheet" type="text/css" href="./aul-abed_files/style.css">
        <link rel="stylesheet" type="text/css" href="./aul-abed_files/style(1).css">
        <link rel="stylesheet" type="text/css" href="./aul-abed_files/style(2).css">
        <link rel="stylesheet" type="text/css" href="./aul-abed_files/style(3).css">
        <link rel="stylesheet" type="text/css" href="./aul-abed_files/style(4).css">
        <link rel="stylesheet" type="text/css" href="./aul-abed_files/style(5).css">

        <link rel="stylesheet" href="./aul-abed_files/universal.css">
        <link rel="stylesheet" href="./aul-abed_files/global.css">
        <link rel="stylesheet" type="text/css" href="./aul-abed_files/kado-template.1722393118.css">

        <link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Prata&amp;display=block">
        <link rel="stylesheet" href="./aul-abed_files/custom-saskia-alvin.css">
        <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
        <style>
            .mySlides {
                display: none;
            }
        </style>
    </head>

    <body data-aos-once="false" class="  saskia-alvin" data-template="" data-aos-easing="ease" data-aos-duration="0" data-aos-delay="0" style="--body-height: 599.3333129882812px;">

        <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-P7SMP7M" height="0" width="0"
            style="display:none;visibility:hidden"></iframe></noscript>


        <section data-aos-once="false" class="kat-page__side-to-side">

            <section data-aos-once="false" class="primary-pane">
                <div data-aos-once="false" class="inner">

                    <div data-aos-once="false" class="highlight aos-init " data-aos="zoom-out" data-aos-duration="1000">
                        <div data-aos-once="false" class="preview-container">
                        </div>
                    </div>
                </div>
            </section>

            <section data-aos-once="false" class="secondary-pane">

                <section data-aos-once="false" class="top-cover">
                    <div data-aos-once="false" class="inner">
                        <div data-aos-once="false" class="details"><br><br>
                            <p style="color: #fff; margin: 0; opacity: 1; transition-duration: 1000ms;" data-aos-once="false" class="bank-account-name aos-init aos-animate" data-aos-once="false" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="800">
                                THE WEDDING OF
                            </p>
                            <h1 data-aos-once="false" style="font-weight: 600; color: #fff; font-size: 333%; font-family: New Walt Disney UI;" class="save-date-title aos-init" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="800">
                                Widni & Hilmi
                            </h1>
                            <p style="color: #fff; opacity: 1; transition-duration: 1000ms; margin: 0;" data-aos-once="false" class="bank-account-name aos-init aos-animate" data-aos-once="false" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="800">
                                #terlaHILuntukWIDNI
                            </p>
                            <div data-aos-once="false" class="head aos-init " data-aos="fade-down" data-aos-duration="1000">
                                <br><br><br><br><br><br><br><br><br><br><br>
                                <p data-aos-once="false" class="date aos-init " data-aos="fade-up" data-aos-duration="1200" data-aos-delay="300" style="color: white;">
                                    Kepada Yth.<br>Bapak/Ibu/Saudara/i
                                </p>
                                <p data-aos-once="false" class="date aos-init " data-aos="fade-up" data-aos-duration="1200" data-aos-delay="300" style="color: white;">
                                    <b>
                                    <?= $data[0]['nama_tamu']; ?>
                                </b>
                                </p>
                            </div>
                            <div data-aos-once="false" class="link-wrap aos-init " data-aos="fade-up" data-aos-duration="1200" data-aos-delay="850">
                                <a href="javascript:;" value="PLAY" onclick="startTheJourney()" style="color: #000000; background-color: white;" data-aos-once="false" class="link" id="startToExplore">Buka
                                Undangan</a>
                            </div>
                        </div>
                    </div>
                </section>

                <section style="background-image: url(./aul-abed_files/Widni-bg-cover-cream.png); background-size: auto 100%;" data-aos-once="false" class="cover">
                    <div data-aos-once="false" class="inner">
                        <div data-aos-once="false" class="ornaments-wrapper">
                            <div data-aos-once="false" class="orn-cover-top left">
                                <div data-aos-once="false" class="image-wrap aos-init " data-aos="fade-left" data-aos-duration="1000" data-aos-delay="500">
                                    <img src="./aul-abed_files/burung-kiri.gif" alt="orn footnote">
                                </div>
                            </div>
                            <div data-aos-once="false" class="orn-cover-top right">
                                <div data-aos-once="false" class="image-wrap aos-init " data-aos="fade-left" data-aos-duration="1000" data-aos-delay="600">
                                    <img src="./aul-abed_files/burung.gif" alt="orn footnote">
                                </div>
                            </div>
                            <div data-aos-once="false" class="widni-cover-1">
                                <div data-aos-once="false" class="image-wrap aos-init " data-aos="fade-up" data-aos-duration="2800" data-aos-delay="1800">
                                    <img src="./aul-abed_files/widni-pohon-4.png" alt="Mia-Cover - By Idzi">
                                </div>
                            </div>
                            <div data-aos-once="false" class="widni-cover-2">
                                <div data-aos-once="false" class="image-wrap aos-init " data-aos="fade-up" data-aos-duration="2800" data-aos-delay="1500">
                                    <img src="./aul-abed_files/widni-pohon-3.png" alt="Mia-Cover - By Idzi">
                                </div>
                            </div>
                            <div data-aos-once="false" class="widni-cover-3">
                                <div data-aos-once="false" class="image-wrap aos-init " data-aos="fade-up" data-aos-duration="2800" data-aos-delay="1400">
                                    <img src="./aul-abed_files/widni-castil.png" alt="Mia-Cover - By Idzi">
                                </div>
                            </div>
                            <div data-aos-once="false" class="widni-cover-4">
                                <div data-aos-once="false" class="image-wrap aos-init " data-aos="fade-up" data-aos-duration="2800" data-aos-delay="800">
                                    <img src="./aul-abed_files/Widni-tanah.png" alt="Mia-Cover - By Idzi">
                                </div>
                            </div>
                            <div data-aos-once="false" class="widni-cover-7">
                                <div data-aos-once="false" class="image-wrap aos-init " data-aos="fade-up" data-aos-duration="2800" data-aos-delay="1200">
                                    <img src="./aul-abed_files/widni-pagar.png" alt="Mia-Cover - By Idzi">
                                </div>
                            </div>
                            <div data-aos-once="false" class="widni-cover-5">
                                <div data-aos-once="false" class="image-wrap aos-init " data-aos="fade-left" data-aos-duration="2800" data-aos-delay="1000">
                                    <img src="./aul-abed_files/Widni-pohon-emas-samping.png" alt="Mia-Cover - By Idzi">
                                </div>
                            </div>
                            <div data-aos-once="false" class="widni-cover-6">
                                <div data-aos-once="false" class="image-wrap aos-init " data-aos="fade-left" data-aos-duration="2800" data-aos-delay="1100">
                                    <img src="./aul-abed_files/Widni-pohon-emas-samping.png" alt="Mia-Cover - By Idzi">
                                </div>
                            </div>
                            <div data-aos-once="false" class="widni-cover-8">
                                <div data-aos-once="false" class="image-wrap aos-init " data-aos="fade-up" data-aos-duration="2800" data-aos-delay="1700">
                                    <img src="./aul-abed_files/Widni-air-mancur.png" alt="Mia-Cover - By Idzi">
                                </div>
                            </div>
                            <div data-aos-once="false" class="widni-cover-9">
                                <div data-aos-once="false" class="image-wrap aos-init " data-aos="fade-up" data-aos-duration="2800" data-aos-delay="2000">
                                    <img src="./aul-abed_files/Widni-bunga-merah-tengah.png" alt="Mia-Cover - By Idzi">
                                </div>
                            </div>
                            <div data-aos-once="false" class="widni-cover-10">
                                <div data-aos-once="false" class="image-wrap aos-init " data-aos="fade-left" data-aos-duration="2800" data-aos-delay="1900">
                                    <img src="./aul-abed_files/Widni-bunga-merah-samping.png" alt="Mia-Cover - By Idzi">
                                </div>
                            </div>
                            <div data-aos-once="false" class="widni-cover-11">
                                <div data-aos-once="false" class="image-wrap aos-init " data-aos="fade-left" data-aos-duration="2800" data-aos-delay="2100">
                                    <img src="./aul-abed_files/Widni-bunga-merah-samping.png" alt="Mia-Cover - By Idzi">
                                </div>
                            </div>
                            <div data-aos-once="false" class="widni-cover-12">
                                <div data-aos-once="false" class="image-wrap aos-init " data-aos="fade-up" data-aos-duration="2800" data-aos-delay="2200">
                                    <img src="./aul-abed_files/Widni-bunga-merah-samping-bawah.png" alt="Mia-Cover - By Idzi">
                                </div>
                            </div>
                            <div data-aos-once="false" class="widni-cover-13">
                                <div data-aos-once="false" class="image-wrap aos-init " data-aos="fade-up" data-aos-duration="2800" data-aos-delay="2300">
                                    <img src="./aul-abed_files/Widni-bunga-merah-samping-bawah.png" alt="Mia-Cover - By Idzi">
                                </div>
                            </div>
                            <div data-aos-once="false" class="widni-cover-14">
                                <div data-aos-once="false" class="image-wrap aos-init " data-aos="fade-up" data-aos-duration="2800" data-aos-delay="2500s">
                                    <img src="./aul-abed_files/widni-kupu.gif" alt="Mia-Cover - By Idzi">
                                </div>
                            </div>
                        </div>
                        <div data-aos-once="false" class="wedding-gift-inner" style="padding: 15%; width: 100%;">
                            <div data-aos-once="false" class="gift-frame aos-init aos-animate" data-aos-once="false" data-aos="fade-up" data-aos-duration="1200" data-aos-delay="2700" style="opacity: 1; transition-duration: 1200ms;background-color: #ffffff94;">
                                <div data-aos-once="false" class="frame-wrap" style="padding: 0;">
                                    <div data-aos-once="false" class="wedding-gift-body" style="padding: 0;">
                                        <div data-aos-once="false" class="wedding-gift-bank-wrap" style="padding: 0;">
                                            <div data-aos-once="false" class="bank-item" id="savingBook5947" style="padding: 0;">
                                                <div data-aos-once="false" class="gift-frame aos-init aos-animate" data-aos-once="false" data-aos="fade-up" data-aos-duration="1200" data-aos-delay="2700" style="opacity: 1; transition-duration: 1200ms;background-color: #766d6000; border: 2px solid #680001; padding: 0;">
                                                    <div data-aos-once="false" class="frame-wrap" style="padding: 0;">
                                                        <div data-aos-once="false" class="wedding-gift-body" style="padding: 0;">
                                                            <div data-aos-once="false" class="wedding-gift-bank-wrap" style="padding: 0;">
                                                                <div data-aos-once="false" class="bank-item" style="padding: 0;" id="savingBook5947">
                                                                    <div data-aos-once="false" class="bank-detail">
                                                                        <br><br><br><br>
                                                                        <p style="color: #680001; margin: 0; opacity: 1; transition-duration: 1000ms;" data-aos-once="false" class="bank-account-name aos-init aos-animate" data-aos-once="false" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="800">
                                                                            THE WEDDING OF
                                                                        </p>
                                                                        <h1 data-aos-once="false" style="color: #680001; font-family: New Walt Disney UI;" class="save-date-title aos-init" data-aos="fade-right" data-aos-duration="1000">
                                                                            Widni<br>&<br>Hilmi
                                                                        </h1>
                                                                        <p style="color: #680001; opacity: 1; transition-duration: 1000ms; margin: 0;" data-aos-once="false" class="bank-account-name aos-init aos-animate" data-aos-once="false" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="800">
                                                                            #terlaHILuntukWIDNI
                                                                        </p><br>
                                                                        <center><img style="width: 15%;" src="./aul-abed_files/bawahin.gif" alt="">
                                                                        </center>
                                                                        <br><br><br><br>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>

                <section style="background-color: #680001;" class="couple-wrap">
                    <div class="couple" style="padding: 10% 0%;">
                        <div class="couple-head" style="padding: 0 10%;">
                            <h1 style="color: var(--text-tertiary); font-weight: 600; font-size: 160%;" data-aos-once="false" class="activity-title aos-init" data-aos="fade-up" data-aos-duration="1000">
                                QS Ar Rum: 21</h1><br>
                            <p style="color: var(--text-tertiary);" data-aos-once="false" class="activity-time aos-init " data-aos="fade-up" data-aos-duration="1000">
                                "Dan di antara tanda-tanda (kebesaran)-Nya ialah bahwa Dia menciptakan pasangan-pasangan untukmu dari (jenis) dirimu sendiri agar kamu merasa tenteram kepadanya. Dia menjadikan di antaramu rasa cinta dan kasih sayang. Sesungguhnya pada yang demikian itu
                                benar-benar terdapat tanda-tanda (kebesaran Allah) bagi kaum yang berpikir.</p><br>
                        </div>
                    </div>
                </section>

                <section style="background-image: url(./aul-abed_files/Widni-bg-cover-cream.png);" class="couple-wrap">
                    <div data-aos-once="false" class="ornaments-wrapper">
                        <div data-aos-once="false" class="widni-atas-1">
                            <div data-aos-once="false" class="image-wrap aos-init " data-aos="fade-up" data-aos-duration="2800" data-aos-delay="700">
                                <img src="./aul-abed_files/Widni-bunga-merah-tengah.png" alt="Mia-Cover - By Idzi">
                            </div>
                        </div>
                        <div data-aos-once="false" class="widni-atas-2">
                            <div data-aos-once="false" class="image-wrap aos-init " data-aos="fade-up" data-aos-duration="2800" data-aos-delay="700">
                                <img src="./aul-abed_files/Widni-bunga-merah-samping-bawah.png" alt="Mia-Cover - By Idzi">
                            </div>
                        </div>
                        <div data-aos-once="false" class="widni-atas-3">
                            <div data-aos-once="false" class="image-wrap aos-init " data-aos="fade-up" data-aos-duration="2800" data-aos-delay="700">
                                <img src="./aul-abed_files/Widni-bunga-merah-samping-bawah.png" alt="Mia-Cover - By Idzi">
                            </div>
                        </div>
                    </div>
                    <br>
                    <div class="couple">
                        <div class="couple-head">
                            <div class="orn-bismillah">
                                <div class="image-wrap aos-init" data-aos="zoom-in" data-aos-duration="1000" data-aos-delay="600" data-aos-once="false">
                                    <img src="./aul-abed_files/gambar-bismillah(1).png" alt="bismillah">
                                </div>
                            </div>
                            <p style="color: var(--text-primary);" class="couple-description aos-init" data-aos="fade-up" data-aos-duration="1000" data-aos-once="false">
                                Assalamu'alaikum Warahmatullahi Wabarakatuh<br><br> Dengan memohon rahmat dan ridho Allah SWT,<br> Tanpa mengurangi rasa hormat, kami bermaksud mengundang Bapak/Ibu/Saudara/i pada acara resepsi pernikahan kami.</p>
                        </div>
                        <div class="couple-body  bride-first   show-picture  ">
                            <div class="couple-info groom">
                                <div class="couple-details">
                                    <div class="couple-small-details groom">
                                        <h2 style="color: var(--text-primary); text-align: start; font-family: New Walt Disney UI;" class="nick-name aos-init" data-aos="fade-up" data-aos-duration="1000" data-aos-once="false">Hilmi</h2>
                                        <p style="color: var(--text-primary); text-align: start; font-weight: 600;" class="couple-name aos-init" data-aos="fade-up" data-aos-duration="1000" data-aos-once="false">
                                            Hilmi Afifi Al-Atsari, S.Kom.
                                        </p>
                                        <div class="couple-link-wrap aos-init aos-animate" data-aos="fade-up" data-aos-duration="1000">
                                            <a href="https://www.instagram.com/hilmithanos" target="_blank" class="couple-link"></i> @hilmithanos</a><br>
                                        </div>
                                    </div>
                                    <p style="color: var(--text-primary);" class="couple-parents aos-init" data-aos="fade-up" data-aos-duration="1000" data-aos-once="false">Putra pertama dari <br> Bapak Heri Widodo & Ibu Nur Hayati, A.Md.Ek.
                                    </p>
                                </div>
                                <div class="couple-preview ">
                                    <div class="couple-frame">
                                        <div class="couple-picture">
                                            <div class="orn-groom-4">
                                                <div class="image-wrap aos-init" data-aos="fade-right" data-aos-duration="1000" data-aos-delay="400" data-aos-once="false">
                                                    <img src="./aul-abed_files/widni-castil.png" alt="">
                                                </div>
                                            </div>
                                            <div class="orn-groom-4">
                                                <div class="image-wrap aos-init" data-aos="fade-right" data-aos-duration="1000" data-aos-delay="400" data-aos-once="false">
                                                    <img src="./aul-abed_files/widni-kupu.gif" alt="">
                                                </div>
                                            </div>
                                            <a class="img-wrap aos-init" data-aos="zoom-in" data-aos-duration="1500" data-aos-once="false" href="./aul-abed_files/widni-cpp2.png" target="_blank">
                                                <img class="img" src="./aul-abed_files/widni-cpp2.png" alt="" style="transform: scaleX(1);">
                                            </a>
                                            <div class="orn-groom-9">
                                                <div class="image-wrap aos-init" data-aos="fade-right" data-aos-duration="1000" data-aos-delay="450" data-aos-once="false">
                                                    <img style="transform: scaleX(1);" src="./aul-abed_files/widni-bunga-pengantin-kiri.png" alt="">
                                                </div>
                                            </div>
                                            <div class="orn-groom-2">
                                                <div class="image-wrap aos-init" data-aos="fade-right" data-aos-duration="1000" data-aos-delay="550" data-aos-once="false">
                                                    <img style="transform: scaleX(1);" src="./aul-abed_files/widni-bunga-pengantin-bawah.png" alt="">
                                                </div>
                                            </div>
                                            <div class="orn-groom-1">
                                                <div class="image-wrap aos-init" data-aos="fade-right" data-aos-duration="1000" data-aos-delay="450" data-aos-once="false">
                                                    <img style="transform: scaleX(1);" src="./aul-abed_files/Widni-air-mancur.png" alt="">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="ornaments-wrapper">
                                </div>
                            </div>
                            <div class="separator-wrap">
                                <div class="separator aos-init" data-aos="zoom-in" data-aos-duration="1500" data-aos-once="false">
                                    <h2 style="color: var(--text-primary);" class="couple-separator">&amp;</h2>
                                </div>
                            </div>
                            <div class="couple-info bride">
                                <div class="couple-details">
                                    <div class="couple-small-details groom">
                                        <h2 style="color: var(--text-primary); font-family: New Walt Disney UI;" class="nick-name aos-init" data-aos="fade-up" data-aos-duration="1000" data-aos-once="false">Widni</h2>
                                    </div>
                                    <p style="color: var(--text-primary); font-weight: 600;" class="couple-name aos-init" data-aos="fade-up" data-aos-duration="1000" data-aos-once="false">
                                        Widni Megaria Rohman, S.I.Kom., M.Sc.
                                    </p>
                                    <div class="couple-link-wrap aos-init aos-animate" data-aos="fade-up" data-aos-duration="1000">
                                        <a href="https://www.instagram.com/widnimega" target="_blank" class="couple-link"></i> @widnimega</a><br>
                                    </div>
                                    <p style="color: var(--text-primary);" class="couple-parents aos-init" data-aos="fade-up" data-aos-duration="1000" data-aos-once="false">Putri pertama dari
                                        <br> Bapak H. Oman Rohman (Ketua Umum PBVSI Kota Tasikmalaya) & Ibu Ria Farida
                                    </p>
                                </div>
                                <div class="couple-preview ">
                                    <div class="couple-frame">
                                        <div class="couple-picture">
                                            <div class="orn-groom-4">
                                                <div class="image-wrap aos-init" data-aos="fade-right" data-aos-duration="1000" data-aos-delay="400" data-aos-once="false">
                                                    <img src="./aul-abed_files/widni-castil.png" style="transform: scaleX(-1);" alt="">
                                                </div>
                                            </div>
                                            <div class="orn-groom-4">
                                                <div class="image-wrap aos-init" data-aos="fade-right" data-aos-duration="1000" data-aos-delay="400" data-aos-once="false">
                                                    <img src="./aul-abed_files/widni-kupu.gif" alt="">
                                                </div>
                                            </div>
                                            <a class="img-wrap aos-init" data-aos="zoom-in" data-aos-duration="1500" data-aos-once="false" href="./aul-abed_files/widni-cpw2.png" target="_blank">
                                                <img class="img" src="./aul-abed_files/widni-cpw2.png" alt="">
                                            </a>
                                            <div class="orn-groom-9">
                                                <div class="image-wrap aos-init" data-aos="fade-right" data-aos-duration="1000" data-aos-delay="450" data-aos-once="false">
                                                    <img src="./aul-abed_files/widni-bunga-pengantin-kiri.png" alt="">
                                                </div>
                                            </div>
                                            <div class="orn-groom-2">
                                                <div class="image-wrap aos-init" data-aos="fade-right" data-aos-duration="1000" data-aos-delay="550" data-aos-once="false">
                                                    <img src="./aul-abed_files/widni-bunga-pengantin-bawah.png" alt="">
                                                </div>
                                            </div>
                                            <div class="orn-groom-1">
                                                <div class="image-wrap aos-init" data-aos="fade-right" data-aos-duration="1000" data-aos-delay="450" data-aos-once="false">
                                                    <img src="./aul-abed_files/Widni-air-mancur.png" alt="">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div data-aos-once="false" class="ornaments-wrapper">
                        <div data-aos-once="false" class="widni-cover-9">
                            <div data-aos-once="false" class="image-wrap aos-init " data-aos="fade-up" data-aos-duration="2800" data-aos-delay="700">
                                <img src="./aul-abed_files/Widni-bunga-merah-tengah.png" alt="Mia-Cover - By Idzi">
                            </div>
                        </div>
                        <div data-aos-once="false" class="widni-cover-12">
                            <div data-aos-once="false" class="image-wrap aos-init " data-aos="fade-up" data-aos-duration="2800" data-aos-delay="2200">
                                <img src="./aul-abed_files/Widni-bunga-merah-samping-bawah.png" alt="Mia-Cover - By Idzi">
                            </div>
                        </div>
                        <div data-aos-once="false" class="widni-cover-13">
                            <div data-aos-once="false" class="image-wrap aos-init " data-aos="fade-up" data-aos-duration="2800" data-aos-delay="2300">
                                <img src="./aul-abed_files/Widni-bunga-merah-samping-bawah.png" alt="Mia-Cover - By Idzi">
                            </div>
                        </div>
                        <div data-aos-once="false" class="widni-cover-14">
                            <div data-aos-once="false" class="image-wrap aos-init " data-aos="fade-up" data-aos-duration="2800" data-aos-delay="2500s">
                                <img src="./aul-abed_files/widni-kupu.gif" alt="Mia-Cover - By Idzi">
                            </div>
                        </div>
                    </div>
                </section>
                
                <section style="background-image: url(./aul-abed_files/Widni-bg-cover-cream.png);" data-aos-once="false" class="save-date-wrap">
                    <div data-aos-once="false" class="ornaments-wrapper">
                        <div data-aos-once="false" class="widni-atas-1">
                            <div data-aos-once="false" class="image-wrap aos-init " data-aos="fade-up" data-aos-duration="2800" data-aos-delay="700">
                                <img src="./aul-abed_files/Widni-bunga-merah-tengah.png" alt="Mia-Cover - By Idzi">
                            </div>
                        </div>
                        <div data-aos-once="false" class="widni-atas-2">
                            <div data-aos-once="false" class="image-wrap aos-init " data-aos="fade-up" data-aos-duration="2800" data-aos-delay="700">
                                <img src="./aul-abed_files/Widni-bunga-merah-samping-bawah.png" alt="Mia-Cover - By Idzi">
                            </div>
                        </div>
                        <div data-aos-once="false" class="widni-atas-3">
                            <div data-aos-once="false" class="image-wrap aos-init " data-aos="fade-up" data-aos-duration="2800" data-aos-delay="700">
                                <img src="./aul-abed_files/Widni-bunga-merah-samping-bawah.png" alt="Mia-Cover - By Idzi">
                            </div>
                        </div>
                        <div data-aos-once="false" class="widni-cover-8">
                            <div data-aos-once="false" class="image-wrap aos-init " data-aos="fade-up" data-aos-duration="2800" data-aos-delay="1700">
                                <img src="./aul-abed_files/Widni-air-mancur.png" alt="Mia-Cover - By Idzi">
                            </div>
                        </div>
                    </div><br><br><br><br>
                                    
                    <div data-aos-once="false" class="save-date-frame">
                        <div data-aos-once="false" class="image-wrap aos-init" data-aos="zoom-in" data-aos-duration="1000">
                            <img src="./aul-abed_files/frame-deris (1).png" alt="">
                        </div>
                        <div data-aos-once="false" class="orn-save-date-1">
                            <div data-aos-once="false" class="image-wrap aos-init" data-aos="zoom-in" data-aos-duration="1000" data-aos-delay="500">
                                <img src="./aul-abed_files/mia-cover-pohon-kanan-samping.png" alt="">
                            </div>
                        </div>
                        <div data-aos-once="false" class="orn-save-date-1">
                            <div data-aos-once="false" class="image-wrap aos-init" data-aos="zoom-in" data-aos-duration="1000" data-aos-delay="500">
                                <img src="./aul-abed_files/widni-kupu.gif" alt="">
                            </div>
                        </div>
                        <div data-aos-once="false" class="orn-save-date-2">
                            <div data-aos-once="false" class="orn-save-date-4">
                                <div data-aos-once="false" class="image-wrap aos-init" data-aos="zoom-in" data-aos-duration="1000" data-aos-delay="600">
                                    <img src="./aul-abed_files/widni-kupu.gif" alt="">
                                </div>
                            </div>
                            <div data-aos-once="false" class="image-wrap aos-init" data-aos="zoom-in" data-aos-duration="1000" data-aos-delay="650">
                                <img src="./aul-abed_files/mia-penganton-[ohon-1.png" alt="">
                            </div>
                        </div>

                        <script>
                            function getCounter() {
                                var countDownDate = new Date("May 25, 2025 08:00:00").getTime();

                                var x = setInterval(function() {
                                    var now = new Date().getTime();

                                    var distance = countDownDate - now;

                                    var days = Math.floor(distance / (1000 * 60 * 60 * 24));
                                    var hours = Math.floor(
                                        (distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
                                    );
                                    var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
                                    var seconds = Math.floor((distance % (1000 * 60)) / 1000);

                                    var textDays = document.getElementById("days");
                                    var textHours = document.getElementById("hours");
                                    var textMinutes = document.getElementById("minutes");
                                    var textSeconds = document.getElementById("seconds");

                                    textDays.innerHTML = days < 10 ? "0" + days : days;
                                    textHours.innerHTML = hours < 10 ? "0" + hours : hours;
                                    textMinutes.innerHTML = minutes < 10 ? "0" + minutes : minutes;
                                    textSeconds.innerHTML = seconds < 10 ? "0" + seconds : seconds;

                                    if (distance < 0) {
                                        clearInterval(x);
                                    }
                                }, 1000);
                            }

                            getCounter();
                        </script>
                        <div class="save-date" style="transform: translate(-50%, -50%);">
                            <div class="save-date-body">
                                <div class="save-date-head" style="padding: 0;">
                    <h1 class="save-date-title aos-init" style="margin-bottom: 0;" data-aos="fade-right" data-aos-duration="1000">
                        Countdown
                    </h1>
                </div>
                                <div href="javascript:;" class="countdown" data-date="Sep 7 2024 08:00:00">
                                    <div class="count-item aos-init" data-aos="fade-down-right" data-aos-duration="1200" data-aos-delay="100">
                                        <h2 id="days" class="count-num count-day">0</h2>
                                        <small class="count-text">Days</small>
                                    </div>
                                    <div class="count-item aos-init" data-aos="fade-down-left" data-aos-duration="1200" data-aos-delay="300">
                                        <h2 id="hours" class="count-num count-hour">0</h2>
                                        <small class="count-text">Hours</small>
                                    </div>
                                    <div class="count-item aos-init" data-aos="fade-up-right" data-aos-duration="1200" data-aos-delay="500">
                                        <h2 id="minutes" class="count-num count-minute">0</h2>
                                        <small class="count-text">Minutes</small>
                                    </div>
                                    <div class="count-item aos-init" data-aos="fade-up-left" data-aos-duration="1200" data-aos-delay="700">
                                        <h2 id="seconds" class="count-num count-second">0</h2>
                                        <small class="count-text">Seconds</small>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div><br><br><br><br>

                    <div data-aos-once="false" class="ornaments-wrapper">
                        <div data-aos-once="false" class="widni-cover-10">
                            <div data-aos-once="false" class="image-wrap aos-init " data-aos="fade-left" data-aos-duration="2800" data-aos-delay="700">
                                <img src="./aul-abed_files/Widni-bunga-merah-samping.png" alt="Mia-Cover - By Idzi">
                            </div>
                        </div>
                        <div data-aos-once="false" class="widni-cover-11">
                            <div data-aos-once="false" class="image-wrap aos-init " data-aos="fade-left" data-aos-duration="2800" data-aos-delay="700">
                                <img src="./aul-abed_files/Widni-bunga-merah-samping.png" alt="Mia-Cover - By Idzi">
                            </div>
                        </div>
                        <div data-aos-once="false" class="widni-cover-9">
                            <div data-aos-once="false" class="image-wrap aos-init " data-aos="fade-up" data-aos-duration="2800" data-aos-delay="700">
                                <img src="./aul-abed_files/Widni-bunga-merah-tengah.png" alt="Mia-Cover - By Idzi">
                            </div>
                        </div>
                        <div data-aos-once="false" class="widni-cover-12">
                            <div data-aos-once="false" class="image-wrap aos-init " data-aos="fade-up" data-aos-duration="2800" data-aos-delay="700">
                                <img src="./aul-abed_files/Widni-bunga-merah-samping-bawah.png" alt="Mia-Cover - By Idzi">
                            </div>
                        </div>
                        <div data-aos-once="false" class="widni-cover-13">
                            <div data-aos-once="false" class="image-wrap aos-init " data-aos="fade-up" data-aos-duration="2800" data-aos-delay="700">
                                <img src="./aul-abed_files/Widni-bunga-merah-samping-bawah.png" alt="Mia-Cover - By Idzi">
                            </div>
                        </div>
                        <div data-aos-once="false" class="widni-cover-14">
                            <div data-aos-once="false" class="image-wrap aos-init " data-aos="fade-up" data-aos-duration="2800" data-aos-delay="700">
                                <img src="./aul-abed_files/widni-kupu.gif" alt="Mia-Cover - By Idzi">
                            </div>
                        </div>
                    </div>
                </section>


                <section style="background-image: url(./aul-abed_files/Widni-bg-cover-cream.png);" data-aos-once="false" class="save-date-wrap">
                    <div data-aos-once="false" class="ornaments-wrapper">
                        <div data-aos-once="false" class="widni-atas-1">
                            <div data-aos-once="false" class="image-wrap aos-init " data-aos="fade-up" data-aos-duration="2800" data-aos-delay="700">
                                <img src="./aul-abed_files/Widni-bunga-merah-tengah.png" alt="Mia-Cover - By Idzi">
                            </div>
                        </div>
                        <div data-aos-once="false" class="widni-atas-2">
                            <div data-aos-once="false" class="image-wrap aos-init " data-aos="fade-up" data-aos-duration="2800" data-aos-delay="700">
                                <img src="./aul-abed_files/Widni-bunga-merah-samping-bawah.png" alt="Mia-Cover - By Idzi">
                            </div>
                        </div>
                        <div data-aos-once="false" class="widni-atas-3">
                            <div data-aos-once="false" class="image-wrap aos-init " data-aos="fade-up" data-aos-duration="2800" data-aos-delay="700">
                                <img src="./aul-abed_files/Widni-bunga-merah-samping-bawah.png" alt="Mia-Cover - By Idzi">
                            </div>
                        </div>
                        <div data-aos-once="false" class="widni-cover-8">
                            <div data-aos-once="false" class="image-wrap aos-init " data-aos="fade-up" data-aos-duration="2800" data-aos-delay="1700">
                                <img src="./aul-abed_files/Widni-air-mancur.png" alt="Mia-Cover - By Idzi">
                            </div>
                        </div>
                    </div><br><br><br><br><br>
                    <div data-aos-once="false" class="save-date-head">
                    </div>
                    <div data-aos-once="false" class="save-date-frame">
                        <div data-aos-once="false" class="image-wrap aos-init" data-aos="zoom-in" data-aos-duration="1000">
                            <img src="./aul-abed_files/frame-deris (1).png" alt="">
                        </div>
                        <div data-aos-once="false" class="orn-save-date-1">
                            <div data-aos-once="false" class="image-wrap aos-init" data-aos="zoom-in" data-aos-duration="1000" data-aos-delay="500">
                                <img src="./aul-abed_files/mia-cover-pohon-kanan-samping.png" alt="">
                            </div>
                        </div>
                        <div data-aos-once="false" class="orn-save-date-1">
                            <div data-aos-once="false" class="image-wrap aos-init" data-aos="zoom-in" data-aos-duration="1000" data-aos-delay="500">
                                <img src="./aul-abed_files/widni-kupu.gif" alt="">
                            </div>
                        </div>
                        <div data-aos-once="false" class="orn-save-date-2">
                            <div data-aos-once="false" class="orn-save-date-4">
                                <div data-aos-once="false" class="image-wrap aos-init" data-aos="zoom-in" data-aos-duration="1000" data-aos-delay="600">
                                    <img src="./aul-abed_files/widni-kupu.gif" alt="">
                                </div>
                            </div>
                            <div data-aos-once="false" class="image-wrap aos-init" data-aos="zoom-in" data-aos-duration="1000" data-aos-delay="650">
                                <img src="./aul-abed_files/mia-penganton-[ohon-1.png" alt="">
                            </div>
                        </div>
                        <div data-aos-once="false" class="save-date">
                            <div data-aos-once="false" class="save-date-body">
                                <div data-aos-once="false" class="activity-wrap  same-location ">
                                    <div data-aos-once="false" class="activity-item"><br><br>
                                        <div data-aos-once="false" class="activity-head"><br><br>
                                            <h1 style="color: #774e14; font-weight: 600; font-family: New Walt Disney UI; font-size: 212%;" data-aos-once="false" class="activity-title aos-init" data-aos="fade-up" data-aos-duration="1000">
                                                Akad</h1>
                                            <p style="color: #774e14;" data-aos-once="false" class="activity-time aos-init " data-aos="fade-up" data-aos-duration="1000">
                                                08:00 - 10:00 WIB</p>
                                        </div>
                                    </div>
                                    <div data-aos-once="false" class="activity-item">
                                        <div data-aos-once="false" class="activity-head">
                                            <h1 style="color: #774e14; font-weight: 600; font-family: New Walt Disney UI; font-size: 212%;" data-aos-once="false" class="activity-title aos-init" data-aos="fade-up" data-aos-duration="1000">
                                                Resepsi</h1>
                                            <p style="color: #774e14;" data-aos-once="false" class="activity-time aos-init" data-aos="fade-up" data-aos-duration="1000">
                                                11:00 - 14:00 WIB</p>
                                        </div>
                                    </div>
                                    <div data-aos-once="false" class="activity-item">
                                        <div data-aos-once="false" class="activity-head"><br>
                                            <p style="color: #774e14; font-weight: 600;" data-aos-once="false" class="event-hall aos-init" data-aos="fade-up" data-aos-duration="1000">
                                                Minggu<br>25.05.25</p>
                                            <p style="color: #774e14;" data-aos-once="false" class="event-hall aos-init" data-aos="fade-up" data-aos-duration="1000">
                                                Ballroom Hotel Grand Metro Tasikmalaya</p>
                                            <p style="color: #774e14;" data-aos-once="false" class="activity-time aos-init " data-aos="fade-up" data-aos-duration="1000">
                                                Jl. HZ. Mustofa No.263, Nagarawangi, Kec. Cihideung, Kota Tasikmalaya
                                            </p>
                                            <div data-aos-once="false" class="event-link-wrap aos-init" data-aos="fade-up" data-aos-duration="1000"><a href="https://maps.app.goo.gl/V9tGgoAmpQD6zmny7" data-aos-once="false" class="event-link" target="_blank">View Maps</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div><br><br><br><br>

                    <div data-aos-once="false" class="ornaments-wrapper">
                        <div data-aos-once="false" class="widni-cover-10">
                            <div data-aos-once="false" class="image-wrap aos-init " data-aos="fade-left" data-aos-duration="2800" data-aos-delay="700">
                                <img src="./aul-abed_files/Widni-bunga-merah-samping.png" alt="Mia-Cover - By Idzi">
                            </div>
                        </div>
                        <div data-aos-once="false" class="widni-cover-11">
                            <div data-aos-once="false" class="image-wrap aos-init " data-aos="fade-left" data-aos-duration="2800" data-aos-delay="700">
                                <img src="./aul-abed_files/Widni-bunga-merah-samping.png" alt="Mia-Cover - By Idzi">
                            </div>
                        </div>
                        <div data-aos-once="false" class="widni-cover-9">
                            <div data-aos-once="false" class="image-wrap aos-init " data-aos="fade-up" data-aos-duration="2800" data-aos-delay="700">
                                <img src="./aul-abed_files/Widni-bunga-merah-tengah.png" alt="Mia-Cover - By Idzi">
                            </div>
                        </div>
                        <div data-aos-once="false" class="widni-cover-12">
                            <div data-aos-once="false" class="image-wrap aos-init " data-aos="fade-up" data-aos-duration="2800" data-aos-delay="700">
                                <img src="./aul-abed_files/Widni-bunga-merah-samping-bawah.png" alt="Mia-Cover - By Idzi">
                            </div>
                        </div>
                        <div data-aos-once="false" class="widni-cover-13">
                            <div data-aos-once="false" class="image-wrap aos-init " data-aos="fade-up" data-aos-duration="2800" data-aos-delay="700">
                                <img src="./aul-abed_files/Widni-bunga-merah-samping-bawah.png" alt="Mia-Cover - By Idzi">
                            </div>
                        </div>
                        <div data-aos-once="false" class="widni-cover-14">
                            <div data-aos-once="false" class="image-wrap aos-init " data-aos="fade-up" data-aos-duration="2800" data-aos-delay="700">
                                <img src="./aul-abed_files/widni-kupu.gif" alt="Mia-Cover - By Idzi">
                            </div>
                        </div>
                    </div>
                </section>

                <section data-aos-once="false" class="wedding-gift-wrap">
                    <div data-aos-once="false" class="ornaments-wrapper">
                        <div data-aos-once="false" class="widni-atas-1">
                            <div data-aos-once="false" class="image-wrap aos-init " data-aos="fade-up" data-aos-duration="2800" data-aos-delay="700">
                                <img src="./aul-abed_files/Widni-bunga-merah-tengah.png" alt="Mia-Cover - By Idzi">
                            </div>
                        </div>
                        <div data-aos-once="false" class="widni-atas-2">
                            <div data-aos-once="false" class="image-wrap aos-init " data-aos="fade-up" data-aos-duration="2800" data-aos-delay="700">
                                <img src="./aul-abed_files/Widni-bunga-merah-samping-bawah.png" alt="Mia-Cover - By Idzi">
                            </div>
                        </div>
                        <div data-aos-once="false" class="widni-atas-3">
                            <div data-aos-once="false" class="image-wrap aos-init " data-aos="fade-up" data-aos-duration="2800" data-aos-delay="700">
                                <img src="./aul-abed_files/Widni-bunga-merah-samping-bawah.png" alt="Mia-Cover - By Idzi">
                            </div>
                        </div>
                    </div>
                    <br><br><br><br>
                    <style>
                        * {
                            box-sizing: border-box
                        }
                        
                        body {
                            font-family: Verdana, sans-serif;
                            margin: 0
                        }
                        
                        .mySlides {
                            display: none
                        }
                        
                        img {
                            vertical-align: middle;
                        }
                        /* Slideshow container */
                        
                        .slideshow-container {
                            max-width: 1000px;
                            position: relative;
                            margin: auto;
                        }
                        /* Next & previous buttons */
                        
                        .prev,
                        .next {
                            cursor: pointer;
                            position: absolute;
                            top: 50%;
                            width: auto;
                            padding: 16px;
                            margin-top: -22px;
                            color: white;
                            font-weight: bold;
                            font-size: 18px;
                            transition: 0.6s ease;
                            border-radius: 0 3px 3px 0;
                            user-select: none;
                        }
                        /* Position the "next button" to the right */
                        
                        .next {
                            right: 0;
                            border-radius: 3px 0 0 3px;
                        }
                        /* On hover, add a black background color with a little bit see-through */
                        
                        .prev:hover,
                        .next:hover {
                            background-color: rgba(0, 0, 0, 0.8);
                        }
                        /* Caption text */
                        
                        .text {
                            color: #f2f2f2;
                            font-size: 15px;
                            padding: 8px 12px;
                            position: absolute;
                            bottom: 8px;
                            width: 100%;
                            text-align: center;
                        }
                        /* Number text (1/3 etc) */
                        
                        .numbertext {
                            color: #f2f2f2;
                            font-size: 12px;
                            padding: 8px 12px;
                            position: absolute;
                            top: 0;
                        }
                        /* The dots/bullets/indicators */
                        
                        .dot {
                            cursor: pointer;
                            height: 15px;
                            width: 15px;
                            margin: 0 2px;
                            background-color: #bbb;
                            border-radius: 50%;
                            display: inline-block;
                            transition: background-color 0.6s ease;
                        }
                        
                        .active,
                        .dot:hover {
                            background-color: #717171;
                        }
                        /* Fading animation */
                        
                        .fade {
                            animation-name: fade;
                            animation-duration: 1.5s;
                        }
                        
                        @keyframes fade {
                            from {
                                opacity: .4
                            }
                            to {
                                opacity: 1
                            }
                        }
                        /* On smaller screens, decrease text size */
                        
                        @media only screen and (max-width: 300px) {
                            .prev,
                            .next,
                            .text {
                                font-size: 11px
                            }
                        }
                    </style>


                    <div class="slideshow-container" style="padding: 5%;">

                        <div class="mySlides fade">
                            <div class="rsvp-inner" style="background-color: #774e14; box-shadow: 0 4px 8px 0 #14001b99, 0 6px 20px 0 #14001b99;">
                                <div class="rsvp-body">
                                    <div class="rsvp-status-wrap">
                                        <div class="rsvp-amount-wrap" id="rsvpAmountWrap" style="margin: 0;">
                                            <div class="rsvp-amount-head aos-init aos-animate" data-aos="fade-up" data-aos-once="false" data-aos-duration="1200">
                                                <h1 style="color: white;" class="rsvp-title aos-init aos-animate" data-aos="fade-up" data-aos-once="false" data-aos-duration="1500">
                                                    Our Memory
                                                </h1>
                                            </div>
                                        </div>
                                        <img src="./aul-abed_files/wd-1.png">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="mySlides fade">
                            <div class="rsvp-inner" style="background-color: #774e14; box-shadow: 0 4px 8px 0 #14001b99, 0 6px 20px 0 #14001b99;">
                                <div class="rsvp-body">
                                    <div class="rsvp-status-wrap">
                                        <div class="rsvp-amount-wrap" id="rsvpAmountWrap" style="margin: 0;">
                                            <div class="rsvp-amount-head aos-init aos-animate" data-aos="fade-up" data-aos-once="false" data-aos-duration="1200">
                                                <h1 style="color: white;" class="rsvp-title aos-init aos-animate" data-aos="fade-up" data-aos-once="false" data-aos-duration="1500">
                                                    Our Memory
                                                </h1>
                                            </div>
                                        </div>
                                        <img src="./aul-abed_files/wd-2.png">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="mySlides fade">
                            <div class="rsvp-inner" style="background-color: #774e14; box-shadow: 0 4px 8px 0 #14001b99, 0 6px 20px 0 #14001b99;">
                                <div class="rsvp-body">
                                    <div class="rsvp-status-wrap">
                                        <div class="rsvp-amount-wrap" id="rsvpAmountWrap" style="margin: 0;">
                                            <div class="rsvp-amount-head aos-init aos-animate" data-aos="fade-up" data-aos-once="false" data-aos-duration="1200">
                                                <h1 style="color: white;" class="rsvp-title aos-init aos-animate" data-aos="fade-up" data-aos-once="false" data-aos-duration="1500">
                                                    Our Memory
                                                </h1>
                                            </div>
                                        </div>
                                        <img src="./aul-abed_files/wd-3.png">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="mySlides fade">
                            <div class="rsvp-inner" style="background-color: #774e14; box-shadow: 0 4px 8px 0 #14001b99, 0 6px 20px 0 #14001b99;">
                                <div class="rsvp-body">
                                    <div class="rsvp-status-wrap">
                                        <div class="rsvp-amount-wrap" id="rsvpAmountWrap" style="margin: 0;">
                                            <div class="rsvp-amount-head aos-init aos-animate" data-aos="fade-up" data-aos-once="false" data-aos-duration="1200">
                                                <h1 style="color: white;" class="rsvp-title aos-init aos-animate" data-aos="fade-up" data-aos-once="false" data-aos-duration="1500">
                                                    Our Memory
                                                </h1>
                                            </div>
                                        </div>
                                        <img src="./aul-abed_files/wd-4.png">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="mySlides fade">
                            <div class="rsvp-inner" style="background-color: #774e14; box-shadow: 0 4px 8px 0 #14001b99, 0 6px 20px 0 #14001b99;">
                                <div class="rsvp-body">
                                    <div class="rsvp-status-wrap">
                                        <div class="rsvp-amount-wrap" id="rsvpAmountWrap" style="margin: 0;">
                                            <div class="rsvp-amount-head aos-init aos-animate" data-aos="fade-up" data-aos-once="false" data-aos-duration="1200">
                                                <h1 style="color: white;" class="rsvp-title aos-init aos-animate" data-aos="fade-up" data-aos-once="false" data-aos-duration="1500">
                                                    Our Memory
                                                </h1>
                                            </div>
                                        </div>
                                        <img src="./aul-abed_files/wd-5.png">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="mySlides fade">
                            <div class="rsvp-inner" style="background-color: #774e14; box-shadow: 0 4px 8px 0 #14001b99, 0 6px 20px 0 #14001b99;">
                                <div class="rsvp-body">
                                    <div class="rsvp-status-wrap">
                                        <div class="rsvp-amount-wrap" id="rsvpAmountWrap" style="margin: 0;">
                                            <div class="rsvp-amount-head aos-init aos-animate" data-aos="fade-up" data-aos-once="false" data-aos-duration="1200">
                                                <h1 style="color: white;" class="rsvp-title aos-init aos-animate" data-aos="fade-up" data-aos-once="false" data-aos-duration="1500">
                                                    Our Memory
                                                </h1>
                                            </div>
                                        </div>
                                        <img src="./aul-abed_files/wd-6.png" style="margin: 0;">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="mySlides fade">
                            <div class="rsvp-inner" style="background-color: #774e14; box-shadow: 0 4px 8px 0 #14001b99, 0 6px 20px 0 #14001b99;">
                                <div class="rsvp-body">
                                    <div class="rsvp-status-wrap">
                                        <div class="rsvp-amount-wrap" id="rsvpAmountWrap" style="margin: 0;">
                                            <div class="rsvp-amount-head aos-init aos-animate" data-aos="fade-up" data-aos-once="false" data-aos-duration="1200">
                                                <h1 style="color: white;" class="rsvp-title aos-init aos-animate" data-aos="fade-up" data-aos-once="false" data-aos-duration="1500">
                                                    Our Memory
                                                </h1>
                                            </div>
                                        </div>
                                        <img src="./aul-abed_files/wd-7.png">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="mySlides fade">
                            <div class="rsvp-inner" style="background-color: #774e14; box-shadow: 0 4px 8px 0 #14001b99, 0 6px 20px 0 #14001b99;">
                                <div class="rsvp-body">
                                    <div class="rsvp-status-wrap">
                                        <div class="rsvp-amount-wrap" id="rsvpAmountWrap" style="margin: 0;">
                                            <div class="rsvp-amount-head aos-init aos-animate" data-aos="fade-up" data-aos-once="false" data-aos-duration="1200">
                                                <h1 style="color: white;" class="rsvp-title aos-init aos-animate" data-aos="fade-up" data-aos-once="false" data-aos-duration="1500">
                                                    Our Memory
                                                </h1>
                                            </div>
                                        </div>
                                        <img src="./aul-abed_files/wd-8.png">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="mySlides fade">
                            <div class="rsvp-inner" style="background-color: #774e14; box-shadow: 0 4px 8px 0 #14001b99, 0 6px 20px 0 #14001b99;">
                                <div class="rsvp-body">
                                    <div class="rsvp-status-wrap">
                                        <div class="rsvp-amount-wrap" id="rsvpAmountWrap" style="margin: 0;">
                                            <div class="rsvp-amount-head aos-init aos-animate" data-aos="fade-up" data-aos-once="false" data-aos-duration="1200">
                                                <h1 style="color: white;" class="rsvp-title aos-init aos-animate" data-aos="fade-up" data-aos-once="false" data-aos-duration="1500">
                                                    Our Memory
                                                </h1>
                                            </div>
                                        </div>
                                        <img src="./aul-abed_files/wd-9.png">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="mySlides fade">
                            <div class="rsvp-inner" style="background-color: #774e14; box-shadow: 0 4px 8px 0 #14001b99, 0 6px 20px 0 #14001b99;">
                                <div class="rsvp-body">
                                    <div class="rsvp-status-wrap">
                                        <div class="rsvp-amount-wrap" id="rsvpAmountWrap" style="margin: 0;">
                                            <div class="rsvp-amount-head aos-init aos-animate" data-aos="fade-up" data-aos-once="false" data-aos-duration="1200">
                                                <h1 style="color: white;" class="rsvp-title aos-init aos-animate" data-aos="fade-up" data-aos-once="false" data-aos-duration="1500">
                                                    Our Memory
                                                </h1>
                                            </div>
                                        </div>
                                        <img src="./aul-abed_files/wd-10.png">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="mySlides fade">
                            <div class="rsvp-inner" style="background-color: #774e14; box-shadow: 0 4px 8px 0 #14001b99, 0 6px 20px 0 #14001b99;">
                                <div class="rsvp-body">
                                    <div class="rsvp-status-wrap">
                                        <div class="rsvp-amount-wrap" id="rsvpAmountWrap" style="margin: 0;">
                                            <div class="rsvp-amount-head aos-init aos-animate" data-aos="fade-up" data-aos-once="false" data-aos-duration="1200">
                                                <h1 style="color: white;" class="rsvp-title aos-init aos-animate" data-aos="fade-up" data-aos-once="false" data-aos-duration="1500">
                                                    Our Memory
                                                </h1>
                                            </div>
                                        </div>
                                        <img src="./aul-abed_files/wd-11.png">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="mySlides fade">
                            <div class="rsvp-inner" style="background-color: #774e14; box-shadow: 0 4px 8px 0 #14001b99, 0 6px 20px 0 #14001b99;">
                                <div class="rsvp-body">
                                    <div class="rsvp-status-wrap">
                                        <div class="rsvp-amount-wrap" id="rsvpAmountWrap" style="margin: 0;">
                                            <div class="rsvp-amount-head aos-init aos-animate" data-aos="fade-up" data-aos-once="false" data-aos-duration="1200">
                                                <h1 style="color: white;" class="rsvp-title aos-init aos-animate" data-aos="fade-up" data-aos-once="false" data-aos-duration="1500">
                                                    Our Memory
                                                </h1>
                                            </div>
                                        </div>
                                        <img src="./aul-abed_files/wd-12.png">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="mySlides fade">
                            <div class="rsvp-inner" style="background-color: #774e14; box-shadow: 0 4px 8px 0 #14001b99, 0 6px 20px 0 #14001b99;">
                                <div class="rsvp-body">
                                    <div class="rsvp-status-wrap">
                                        <div class="rsvp-amount-wrap" id="rsvpAmountWrap" style="margin: 0;">
                                            <div class="rsvp-amount-head aos-init aos-animate" data-aos="fade-up" data-aos-once="false" data-aos-duration="1200">
                                                <h1 style="color: white;" class="rsvp-title aos-init aos-animate" data-aos="fade-up" data-aos-once="false" data-aos-duration="1500">
                                                    Our Memory
                                                </h1>
                                            </div>
                                        </div>
                                        <img src="./aul-abed_files/wd-13.png">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="mySlides fade">
                            <div class="rsvp-inner" style="background-color: #774e14; box-shadow: 0 4px 8px 0 #14001b99, 0 6px 20px 0 #14001b99;">
                                <div class="rsvp-body">
                                    <div class="rsvp-status-wrap">
                                        <div class="rsvp-amount-wrap" id="rsvpAmountWrap" style="margin: 0;">
                                            <div class="rsvp-amount-head aos-init aos-animate" data-aos="fade-up" data-aos-once="false" data-aos-duration="1200">
                                                <h1 style="color: white;" class="rsvp-title aos-init aos-animate" data-aos="fade-up" data-aos-once="false" data-aos-duration="1500">
                                                    Our Memory
                                                </h1>
                                            </div>
                                        </div>
                                        <img src="./aul-abed_files/wd-14.png">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="mySlides fade">
                            <div class="rsvp-inner" style="background-color: #774e14; box-shadow: 0 4px 8px 0 #14001b99, 0 6px 20px 0 #14001b99;">
                                <div class="rsvp-body">
                                    <div class="rsvp-status-wrap">
                                        <div class="rsvp-amount-wrap" id="rsvpAmountWrap" style="margin: 0;">
                                            <div class="rsvp-amount-head aos-init aos-animate" data-aos="fade-up" data-aos-once="false" data-aos-duration="1200">
                                                <h1 style="color: white;" class="rsvp-title aos-init aos-animate" data-aos="fade-up" data-aos-once="false" data-aos-duration="1500">
                                                    Our Memory
                                                </h1>
                                            </div>
                                        </div>
                                        <img src="./aul-abed_files/wd-15.png">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="mySlides fade">
                            <div class="rsvp-inner" style="background-color: #774e14; box-shadow: 0 4px 8px 0 #14001b99, 0 6px 20px 0 #14001b99;">
                                <div class="rsvp-body">
                                    <div class="rsvp-status-wrap">
                                        <div class="rsvp-amount-wrap" id="rsvpAmountWrap" style="margin: 0;">
                                            <div class="rsvp-amount-head aos-init aos-animate" data-aos="fade-up" data-aos-once="false" data-aos-duration="1200">
                                                <h1 style="color: white;" class="rsvp-title aos-init aos-animate" data-aos="fade-up" data-aos-once="false" data-aos-duration="1500">
                                                    Our Memory
                                                </h1>
                                            </div>
                                        </div>
                                        <img src="./aul-abed_files/wd-16.png">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="mySlides fade">
                            <div class="rsvp-inner" style="background-color: #774e14; box-shadow: 0 4px 8px 0 #14001b99, 0 6px 20px 0 #14001b99;">
                                <div class="rsvp-body">
                                    <div class="rsvp-status-wrap">
                                        <div class="rsvp-amount-wrap" id="rsvpAmountWrap" style="margin: 0;">
                                            <div class="rsvp-amount-head aos-init aos-animate" data-aos="fade-up" data-aos-once="false" data-aos-duration="1200">
                                                <h1 style="color: white;" class="rsvp-title aos-init aos-animate" data-aos="fade-up" data-aos-once="false" data-aos-duration="1500">
                                                    Our Memory
                                                </h1>
                                            </div>
                                        </div>
                                        <img src="./aul-abed_files/wd-17.png">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="mySlides fade">
                            <div class="rsvp-inner" style="background-color: #774e14; box-shadow: 0 4px 8px 0 #14001b99, 0 6px 20px 0 #14001b99;">
                                <div class="rsvp-body">
                                    <div class="rsvp-status-wrap">
                                        <div class="rsvp-amount-wrap" id="rsvpAmountWrap" style="margin: 0;">
                                            <div class="rsvp-amount-head aos-init aos-animate" data-aos="fade-up" data-aos-once="false" data-aos-duration="1200">
                                                <h1 style="color: white;" class="rsvp-title aos-init aos-animate" data-aos="fade-up" data-aos-once="false" data-aos-duration="1500">
                                                    Our Memory
                                                </h1>
                                            </div>
                                        </div>
                                        <img src="./aul-abed_files/wd-18.png">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="mySlides fade">
                            <div class="rsvp-inner" style="background-color: #774e14; box-shadow: 0 4px 8px 0 #14001b99, 0 6px 20px 0 #14001b99;">
                                <div class="rsvp-body">
                                    <div class="rsvp-status-wrap">
                                        <div class="rsvp-amount-wrap" id="rsvpAmountWrap" style="margin: 0;">
                                            <div class="rsvp-amount-head aos-init aos-animate" data-aos="fade-up" data-aos-once="false" data-aos-duration="1200">
                                                <h1 style="color: white;" class="rsvp-title aos-init aos-animate" data-aos="fade-up" data-aos-once="false" data-aos-duration="1500">
                                                    Our Memory
                                                </h1>
                                            </div>
                                        </div>
                                        <img src="./aul-abed_files/wd-19.png">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="mySlides fade">
                            <div class="rsvp-inner" style="background-color: #774e14; box-shadow: 0 4px 8px 0 #14001b99, 0 6px 20px 0 #14001b99;">
                                <div class="rsvp-body">
                                    <div class="rsvp-status-wrap">
                                        <div class="rsvp-amount-wrap" id="rsvpAmountWrap" style="margin: 0;">
                                            <div class="rsvp-amount-head aos-init aos-animate" data-aos="fade-up" data-aos-once="false" data-aos-duration="1200">
                                                <h1 style="color: white;" class="rsvp-title aos-init aos-animate" data-aos="fade-up" data-aos-once="false" data-aos-duration="1500">
                                                    Our Memory
                                                </h1>
                                            </div>
                                        </div>
                                        <img src="./aul-abed_files/wd-20.png">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="mySlides fade">
                            <div class="rsvp-inner" style="background-color: #774e14; box-shadow: 0 4px 8px 0 #14001b99, 0 6px 20px 0 #14001b99;">
                                <div class="rsvp-body">
                                    <div class="rsvp-status-wrap">
                                        <div class="rsvp-amount-wrap" id="rsvpAmountWrap" style="margin: 0;">
                                            <div class="rsvp-amount-head aos-init aos-animate" data-aos="fade-up" data-aos-once="false" data-aos-duration="1200">
                                                <h1 style="color: white;" class="rsvp-title aos-init aos-animate" data-aos="fade-up" data-aos-once="false" data-aos-duration="1500">
                                                    Our Memory
                                                </h1>
                                            </div>
                                        </div>
                                        <img src="./aul-abed_files/wd-21.png">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="mySlides fade">
                            <div class="rsvp-inner" style="background-color: #774e14; box-shadow: 0 4px 8px 0 #14001b99, 0 6px 20px 0 #14001b99;">
                                <div class="rsvp-body">
                                    <div class="rsvp-status-wrap">
                                        <div class="rsvp-amount-wrap" id="rsvpAmountWrap" style="margin: 0;">
                                            <div class="rsvp-amount-head aos-init aos-animate" data-aos="fade-up" data-aos-once="false" data-aos-duration="1200">
                                                <h1 style="color: white;" class="rsvp-title aos-init aos-animate" data-aos="fade-up" data-aos-once="false" data-aos-duration="1500">
                                                    Our Memory
                                                </h1>
                                            </div>
                                        </div>
                                        <img src="./aul-abed_files/wd-22.png">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="mySlides fade">
                            <div class="rsvp-inner" style="background-color: #774e14; box-shadow: 0 4px 8px 0 #14001b99, 0 6px 20px 0 #14001b99;">
                                <div class="rsvp-body">
                                    <div class="rsvp-status-wrap">
                                        <div class="rsvp-amount-wrap" id="rsvpAmountWrap" style="margin: 0;">
                                            <div class="rsvp-amount-head aos-init aos-animate" data-aos="fade-up" data-aos-once="false" data-aos-duration="1200">
                                                <h1 style="color: white;" class="rsvp-title aos-init aos-animate" data-aos="fade-up" data-aos-once="false" data-aos-duration="1500">
                                                    Our Memory
                                                </h1>
                                            </div>
                                        </div>
                                        <img src="./aul-abed_files/wd-23.png">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="mySlides fade">
                            <div class="rsvp-inner" style="background-color: #774e14; box-shadow: 0 4px 8px 0 #14001b99, 0 6px 20px 0 #14001b99;">
                                <div class="rsvp-body">
                                    <div class="rsvp-status-wrap">
                                        <div class="rsvp-amount-wrap" id="rsvpAmountWrap" style="margin: 0;">
                                            <div class="rsvp-amount-head aos-init aos-animate" data-aos="fade-up" data-aos-once="false" data-aos-duration="1200">
                                                <h1 style="color: white;" class="rsvp-title aos-init aos-animate" data-aos="fade-up" data-aos-once="false" data-aos-duration="1500">
                                                    Our Memory
                                                </h1>
                                            </div>
                                        </div>
                                        <img src="./aul-abed_files/wd-24.png">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="mySlides fade">
                            <div class="rsvp-inner" style="background-color: #774e14; box-shadow: 0 4px 8px 0 #14001b99, 0 6px 20px 0 #14001b99;">
                                <div class="rsvp-body">
                                    <div class="rsvp-status-wrap">
                                        <div class="rsvp-amount-wrap" id="rsvpAmountWrap" style="margin: 0;">
                                            <div class="rsvp-amount-head aos-init aos-animate" data-aos="fade-up" data-aos-once="false" data-aos-duration="1200">
                                                <h1 style="color: white;" class="rsvp-title aos-init aos-animate" data-aos="fade-up" data-aos-once="false" data-aos-duration="1500">
                                                    Our Memory
                                                </h1>
                                            </div>
                                        </div>
                                        <img src="./aul-abed_files/wd-25.png">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="mySlides fade">
                            <div class="rsvp-inner" style="background-color: #774e14; box-shadow: 0 4px 8px 0 #14001b99, 0 6px 20px 0 #14001b99;">
                                <div class="rsvp-body">
                                    <div class="rsvp-status-wrap">
                                        <div class="rsvp-amount-wrap" id="rsvpAmountWrap" style="margin: 0;">
                                            <div class="rsvp-amount-head aos-init aos-animate" data-aos="fade-up" data-aos-once="false" data-aos-duration="1200">
                                                <h1 style="color: white;" class="rsvp-title aos-init aos-animate" data-aos="fade-up" data-aos-once="false" data-aos-duration="1500">
                                                    Our Memory
                                                </h1>
                                            </div>
                                        </div>
                                        <img src="./aul-abed_files/wd-26.png">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="mySlides fade">
                            <div class="rsvp-inner" style="background-color: #774e14; box-shadow: 0 4px 8px 0 #14001b99, 0 6px 20px 0 #14001b99;">
                                <div class="rsvp-body">
                                    <div class="rsvp-status-wrap">
                                        <div class="rsvp-amount-wrap" id="rsvpAmountWrap" style="margin: 0;">
                                            <div class="rsvp-amount-head aos-init aos-animate" data-aos="fade-up" data-aos-once="false" data-aos-duration="1200">
                                                <h1 style="color: white;" class="rsvp-title aos-init aos-animate" data-aos="fade-up" data-aos-once="false" data-aos-duration="1500">
                                                    Our Memory
                                                </h1>
                                            </div>
                                        </div>
                                        <img src="./aul-abed_files/wd-27.png">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="mySlides fade">
                            <div class="rsvp-inner" style="background-color: #774e14; box-shadow: 0 4px 8px 0 #14001b99, 0 6px 20px 0 #14001b99;">
                                <div class="rsvp-body">
                                    <div class="rsvp-status-wrap">
                                        <div class="rsvp-amount-wrap" id="rsvpAmountWrap" style="margin: 0;">
                                            <div class="rsvp-amount-head aos-init aos-animate" data-aos="fade-up" data-aos-once="false" data-aos-duration="1200">
                                                <h1 style="color: white;" class="rsvp-title aos-init aos-animate" data-aos="fade-up" data-aos-once="false" data-aos-duration="1500">
                                                    Our Memory
                                                </h1>
                                            </div>
                                        </div>
                                        <img src="./aul-abed_files/wd-28.png">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <a style="background-color: #0c0c0c;" class="prev" onclick="plusSlides(-1)">❮</a>
                        <a style="background-color: #0c0c0c;" class="next" onclick="plusSlides(1)">❯</a>

                    </div>
                    <br>

                    <div style="text-align:center">
                        <span class="dot" onclick="currentSlide(1)"></span>
                        <span class="dot" onclick="currentSlide(2)"></span>
                        <span class="dot" onclick="currentSlide(3)"></span>
                    </div>

                    <script>
                        let slideIndex = 1;
                        showSlides(slideIndex);

                        function plusSlides(n) {
                            showSlides(slideIndex += n);
                        }

                        function currentSlide(n) {
                            showSlides(slideIndex = n);
                        }

                        function showSlides(n) {
                            let i;
                            let slides = document.getElementsByClassName("mySlides");
                            let dots = document.getElementsByClassName("dot");
                            if (n > slides.length) {
                                slideIndex = 1
                            }
                            if (n < 1) {
                                slideIndex = slides.length
                            }
                            for (i = 0; i < slides.length; i++) {
                                slides[i].style.display = "none";
                            }
                            for (i = 0; i < dots.length; i++) {
                                dots[i].className = dots[i].className.replace(" active", "");
                            }
                            slides[slideIndex - 1].style.display = "block";
                            dots[slideIndex - 1].className += " active";
                        }
                    </script>
                    </div>
                </section>


                <section data-aos-once="false" class="photo-wrap" style="background-image: url(./aul-abed_files/Widni-bg-cover-cream.png);">
                    <div data-aos-once="false" class="photo-inner">
                        <div data-aos-once="false" class="photo-head">
                            <h1 data-aos-once="false" class="photo-title aos-init aos-animate" data-aos="fade-up" data-aos-duration="1000" style="opacity: 1; transition-duration: 1000ms; font-family: New Walt Disney UI; font-size: 212%;">
                                Our Video Memory</h1>
                        </div>
                        <div class="video-body">
                            <div class="video-lists">
                                <div class="video-box">
                                    <div class="video-preview-wrap aos-init aos-animate" data-aos="fade-up" data-aos-once="false" data-aos-duration="1200" style="opacity: 1; transition-duration: 1200ms;">
                                        <div class="video-preview">
                                            <img src="./aul-abed_files/widni (25).JPG" alt="" class="video-img">
                                            <button value="pause" class="video-play-btn play-youtube-video" data-video-id="X37qAsgv3Jc">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="100" viewBox="0 0 512 512">
                                                <path
                                                    d="M133 440a35.37 35.37 0 01-17.5-4.67c-12-6.8-19.46-20-19.46-34.33V111c0-14.37 7.46-27.53 19.46-34.33a35.13 35.13 0 0135.77.45l247.85 148.36a36 36 0 010 61l-247.89 148.4A35.5 35.5 0 01133 440z">
                                                </path>
                                            </svg>
                                        </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div><br><br><br><br><br>
                    <div data-aos-once="false" class="ornaments-wrapper">
                        <div data-aos-once="false" class="widni-cover-10">
                            <div data-aos-once="false" class="image-wrap aos-init " data-aos="fade-left" data-aos-duration="2800" data-aos-delay="700">
                                <img src="./aul-abed_files/Widni-bunga-merah-samping.png" alt="Mia-Cover - By Idzi">
                            </div>
                        </div>
                        <div data-aos-once="false" class="widni-cover-11">
                            <div data-aos-once="false" class="image-wrap aos-init " data-aos="fade-left" data-aos-duration="2800" data-aos-delay="700">
                                <img src="./aul-abed_files/Widni-bunga-merah-samping.png" alt="Mia-Cover - By Idzi">
                            </div>
                        </div>
                        <div data-aos-once="false" class="widni-cover-9">
                            <div data-aos-once="false" class="image-wrap aos-init " data-aos="fade-up" data-aos-duration="2800" data-aos-delay="700">
                                <img src="./aul-abed_files/Widni-bunga-merah-tengah.png" alt="Mia-Cover - By Idzi">
                            </div>
                        </div>
                        <div data-aos-once="false" class="widni-cover-12">
                            <div data-aos-once="false" class="image-wrap aos-init " data-aos="fade-up" data-aos-duration="2800" data-aos-delay="700">
                                <img src="./aul-abed_files/Widni-bunga-merah-samping-bawah.png" alt="Mia-Cover - By Idzi">
                            </div>
                        </div>
                        <div data-aos-once="false" class="widni-cover-13">
                            <div data-aos-once="false" class="image-wrap aos-init " data-aos="fade-up" data-aos-duration="2800" data-aos-delay="700">
                                <img src="./aul-abed_files/Widni-bunga-merah-samping-bawah.png" alt="Mia-Cover - By Idzi">
                            </div>
                        </div>
                        <div data-aos-once="false" class="widni-cover-14">
                            <div data-aos-once="false" class="image-wrap aos-init " data-aos="fade-up" data-aos-duration="2800" data-aos-delay="700">
                                <img src="./aul-abed_files/widni-kupu.gif" alt="Mia-Cover - By Idzi">
                            </div>
                        </div>
                    </div>
                </section>

                <section style="background-color: #680001;" class="couple-wrap">
                    <div class="couple" style="padding: 10% 0%;">
                        <div class="couple-head" style="padding: 0 10%;">
                            <h1 style="color: var(--text-tertiary); font-weight: 600; font-family: New Walt Disney UI; font-size: 212%;" data-aos-once="false" class="activity-title aos-init" data-aos="fade-up" data-aos-duration="1000">
                                Love Story</h1><br>
                            <p style="color: var(--text-tertiary);" data-aos-once="false" class="activity-time aos-init " data-aos="fade-up" data-aos-duration="1000">
                                Semua berawal dari sebuah pesan sederhana di media sosial. Percakapan ringan itu perlahan membawa mereka ke arah yang lebih dalam, hingga tanpa disadari, benih cinta mulai tumbuh.
                                <br><br>Pertemuan pertama menjadi awal dari perjalanan saling mengenal yang penuh makna. Hari demi hari mereka lalui dengan berbagi cerita, tawa, dan mimpi termasuk membayangkan hari pernikahan seperti 25 Februari 2025
                                atau 25 Mei 2025.
                                <br><br>Pada 25 September 2024, sang pria menyatakan perasaannya. Sebulan kemudian, tepat pada 25 Oktober 2024, sang wanita menerima dengan penuh bahagia.
                                <br><br>Langkah serius mulai diambil pada 25 Desember 2024, saat ia bersilaturahmi ke rumah sang wanita untuk meminta izin kepada orang tua.
                                <br><br>Dengan penuh rasa syukur, prosesi lamaran berlangsung pada 25 Januari 2025, menjadi awal dari perjalanan menuju kehidupan bersama.
                                <br><br>Kini, dengan restu keluarga dan seizin Allah SWT, mereka memilih 25 Mei 2025 sebagai hari istimewa untuk mengikat janji suci di hadapan orang-orang tercinta.
                            </p><br>
                        </div>
                    </div>
                </section>

                <section data-aos-once="false" class="wedding-gift-wrap" style="background-image: url(./aul-abed_files/Widni-bg-cover-cream.png);">
                    <div data-aos-once="false" class="ornaments-wrapper">
                        <div data-aos-once="false" class="widni-atas-1">
                            <div data-aos-once="false" class="image-wrap aos-init " data-aos="fade-up" data-aos-duration="2800" data-aos-delay="700">
                                <img src="./aul-abed_files/Widni-bunga-merah-tengah.png" alt="Mia-Cover - By Idzi">
                            </div>
                        </div>
                        <div data-aos-once="false" class="widni-atas-2">
                            <div data-aos-once="false" class="image-wrap aos-init " data-aos="fade-up" data-aos-duration="2800" data-aos-delay="700">
                                <img src="./aul-abed_files/Widni-bunga-merah-samping-bawah.png" alt="Mia-Cover - By Idzi">
                            </div>
                        </div>
                        <div data-aos-once="false" class="widni-atas-3">
                            <div data-aos-once="false" class="image-wrap aos-init " data-aos="fade-up" data-aos-duration="2800" data-aos-delay="700">
                                <img src="./aul-abed_files/Widni-bunga-merah-samping-bawah.png" alt="Mia-Cover - By Idzi">
                            </div>
                        </div>
                    </div><br><br>
                    <BR>
                    <BR>
                    <div data-aos-once="false" class="photo-head">
                        <h1 data-aos-once="false" class="photo-title aos-init aos-animate" data-aos="fade-up" data-aos-duration="1000" style="opacity: 1; transition-duration: 1000ms; font-family: New Walt Disney UI; font-size: 212%;">
                            Send The Love</h1>
                        <p style="color: var(--text-primary);" class="couple-description aos-init" data-aos="fade-up" data-aos-duration="1000">
                            Doa restu anda merupakan karunia yang sangat berarti bagi kami. Tanpa mengurangi rasa hormat, bagi anda yang ingin memberikan tanda kasih untuk mempelai dapat melalui e-wallet berikut :</p>
                    </div>
                    <div data-aos-once="false" class="wedding-gift-inner">
                        <div data-aos-once="false" class="gift-frame aos-init aos-animate" data-aos="fade-up" data-aos-duration="1200" data-aos-delay="700" style="opacity: 1; transition-duration: 1200ms; min-height: 0; border-radius: 35px; width: 90%;padding: 0; background-color: #680001; box-shadow: 0 4px 8px 0 #14001b99, 0 6px 20px 0 #14001b99;">
                            <div data-aos-once="false" class="frame-wrap" style="padding: 0; min-height: 0;">
                                <div data-aos-once="false" class="wedding-gift-body" style="padding: 0; min-height: 0;">
                                    <div data-aos-once="false" class="wedding-gift-bank-wrap" style="padding: 0; min-height: 0;">
                                        <div data-aos-once="false" class="bank-item" id="savingBook5947" style="padding: 0; min-height: 0;">
                                            <div data-aos-once="false" class="bank-detail" style="padding: 0; min-height: 0;">
                                                <div class="save-date-head">
                                                    <img src="./aul-abed_files/bca.png" alt="Mia-Cover - By Idzi" style="width: 43%;">
                                                    <p style="color: #f9e0bc; opacity: 1; transition-duration: 1000ms;" data-aos-once="false" class="bank-account-name aos-init aos-animate" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="800">
                                                        No. Rek. : 3212541998
                                                    </p>
                                                    <p style="color: #f9e0bc; opacity: 1; transition-duration: 1000ms;" data-aos-once="false" class="bank-account-name aos-init aos-animate" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="900">
                                                        a/n : Widni Megaria Rohman
                                                    </p>
                                                    <div data-aos-once="false" class="bank-copy-wrap aos-init aos-animate" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="1000" style="opacity: 1; transition-duration: 1000ms;">
                                                        <button style="background-color: #f9e0bc; color: #680001; box-shadow: 0 4px 8px 0 #14001b99, 0 6px 20px 0 #14001b99;" type="button" data-aos-once="false" class="bank-copy" data-copy="3212541998">Copy</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div><br>
                    <div data-aos-once="false" class="wedding-gift-inner">
                        <div data-aos-once="false" class="gift-frame aos-init aos-animate" data-aos="fade-up" data-aos-duration="1200" data-aos-delay="700" style="opacity: 1; transition-duration: 1200ms; min-height: 0; border-radius: 35px; width: 90%;padding: 0; background-color: #680001; box-shadow: 0 4px 8px 0 #14001b99, 0 6px 20px 0 #14001b99;">
                            <div data-aos-once="false" class="frame-wrap" style="padding: 0; min-height: 0;">
                                <div data-aos-once="false" class="wedding-gift-body" style="padding: 0; min-height: 0;">
                                    <div data-aos-once="false" class="wedding-gift-bank-wrap" style="padding: 0; min-height: 0;">
                                        <div data-aos-once="false" class="bank-item" id="savingBook5947" style="padding: 0; min-height: 0;">
                                            <div data-aos-once="false" class="bank-detail" style="padding: 0; min-height: 0;">
                                                <div class="save-date-head">
                                                    <img src="./aul-abed_files/bca.png" alt="Mia-Cover - By Idzi" style="width: 43%;">
                                                    <p style="color: #f9e0bc; opacity: 1; transition-duration: 1000ms;" data-aos-once="false" class="bank-account-name aos-init aos-animate" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="800">
                                                        No. Rek. : 4560939014
                                                    </p>
                                                    <p style="color: #f9e0bc; opacity: 1; transition-duration: 1000ms;" data-aos-once="false" class="bank-account-name aos-init aos-animate" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="900">
                                                        a/n : Hilmi Afifi Al-Atsari
                                                    </p>
                                                    <div data-aos-once="false" class="bank-copy-wrap aos-init aos-animate" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="1000" style="opacity: 1; transition-duration: 1000ms;">
                                                        <button style="background-color: #f9e0bc; color: #680001; box-shadow: 0 4px 8px 0 #14001b99, 0 6px 20px 0 #14001b99;" type="button" data-aos-once="false" class="bank-copy" data-copy="4560939014">Copy</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div><br>
                    <div data-aos-once="false" class="wedding-gift-inner">
                        <div data-aos-once="false" class="gift-frame aos-init aos-animate" data-aos="fade-up" data-aos-duration="1200" data-aos-delay="700" style="opacity: 1; transition-duration: 1200ms; min-height: 0; border-radius: 35px; width: 90%;padding: 0; background-color: #680001; box-shadow: 0 4px 8px 0 #14001b99, 0 6px 20px 0 #14001b99;">
                            <div data-aos-once="false" class="frame-wrap" style="padding: 0; min-height: 0;">
                                <div data-aos-once="false" class="wedding-gift-body" style="padding: 0; min-height: 0;">
                                    <div data-aos-once="false" class="wedding-gift-bank-wrap" style="padding: 0; min-height: 0;">
                                        <div data-aos-once="false" class="bank-item" id="savingBook5947" style="padding: 0; min-height: 0;">
                                            <div data-aos-once="false" class="bank-detail" style="padding: 0; min-height: 0;">
                                                <div class="save-date-head" style="padding: 0 25px;"><br>
                                                    <h3 style="color: #f9e0bc; opacity: 1; transition-duration: 1000ms; font-size: 175%;" data-aos-once="false" class="bank-name aos-init aos-animate" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="700">
                                                        KONFIRMASI KADO
                                                    </h3>
                                                    <form action="konfirmasi.php" method="POST">
                                                        <div data-aos-once="false" class="rsvp-amount-wrap" id="rsvpAmountWrap" style="margin: 0;">
                                                            <div data-aos-once="false" class="rsvp-amount-head aos-init aos-animate" data-aos="fade-up" data-aos-duration="1200">
                                                                <p data-aos-once="false" class="rsvp-amount-caption" style="color: #f9e0bc;">Nama Tamu</p>
                                                                <div data-aos-once="false" class="rsvp-amount-controller-wrap">
                                                                    <div data-aos-once="false" class="rsvp-amount-controller">
                                                                        <div data-aos-once="false" class="input-wrap">
                                                                            <input type="text" name="nama" data-aos-once="false" class="form-control guest-name" placeholder="Name" value="<?= $data[0]['nama_tamu']; ?>">
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div><br>
                                                        <div data-aos-once="false" class="rsvp-amount-wrap" id="rsvpAmountWrap" style="margin: 0;">
                                                            <div data-aos-once="false" class="rsvp-amount-head aos-init aos-animate" data-aos="fade-up" data-aos-duration="1200">
                                                                <p data-aos-once="false" class="rsvp-amount-caption" style="color: #f9e0bc;">Nominal</p>
                                                                <div data-aos-once="false" class="rsvp-amount-controller-wrap">
                                                                    <div data-aos-once="false" class="rsvp-amount-controller">
                                                                        <div data-aos-once="false" class="input-wrap">
                                                                            <input type="number" name="nominal" data-aos-once="false" class="form-control guest-name" placeholder="Name" value="10000">
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div><br>
                                                        <div data-aos-once="false" class="rsvp-confirm-wrap aos-init aos-animate" data-aos="fade-up" data-aos-duration="1200">
                                                            <button data-aos-once="false" class="rsvp-confirm-btn confirm submit">Confirm</button>
                                                        </div><br><br>

                                                        <script>
                                                            // JavaScript to handle the "Check All" functionality
                                                            document.getElementById("check-all").addEventListener("change", function() {
                                                                var checkboxes = document.getElementsByName("selected_event[]");
                                                                for (var i = 0; i < checkboxes.length; i++) {
                                                                    checkboxes[i].checked = this.checked;
                                                                }
                                                            });
                                                        </script>
                                                    </form>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div data-aos-once="false" class="wedding-gift-inner">
                        <div data-aos-once="false" class="gift-frame aos-init aos-animate" data-aos="fade-up" data-aos-duration="1200" data-aos-delay="700" style="opacity: 1; transition-duration: 1200ms; min-height: 0; border-radius: 35px; width: 90%;padding: 0; background-color: #680001; box-shadow: 0 4px 8px 0 #14001b99, 0 6px 20px 0 #14001b99;">
                            <div data-aos-once="false" class="frame-wrap" style="padding: 0; min-height: 0;">
                                <div data-aos-once="false" class="wedding-gift-body" style="padding: 0; min-height: 0;">
                                    <div data-aos-once="false" class="wedding-gift-bank-wrap" style="padding: 0; min-height: 0;">
                                        <div data-aos-once="false" class="bank-item" id="savingBook5947" style="padding: 0; min-height: 0;">
                                            <div data-aos-once="false" class="bank-detail" style="padding: 0; min-height: 0;">
                                                <div class="save-date-head" style="padding: 0 25px;"><br>
                                                    <h3 style="color: #f9e0bc; opacity: 1; transition-duration: 1000ms; font-size: 175%;" data-aos-once="false" class="bank-name aos-init aos-animate" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="700">
                                                        ALAMAT KADO
                                                    </h3>
                                                    <p style="color: #f9e0bc; opacity: 1; transition-duration: 1000ms;" data-aos-once="false" class="bank-account-name aos-init aos-animate" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="800">
                                                        Rumah Cat Merah, Jl. Ahmad Yani, Gg. Periwatas RT/RW 03/13 Kel. Lengkongsari, Kec. Tawang, Kota Tasikmalaya, Jawa Barat, 46111, No.HP 081112555577
                                                    </p>
                                                    <p style="color: #f9e0bc; opacity: 1; transition-duration: 1000ms;" data-aos-once="false" class="bank-account-name aos-init aos-animate" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="900">
                                                        a/n : Widni Mega
                                                    </p>
                                                    <div data-aos-once="false" class="bank-copy-wrap aos-init aos-animate" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="1000" style="opacity: 1; transition-duration: 1000ms;">
                                                        <button style="background-color: #f9e0bc; color: #680001; box-shadow: 0 4px 8px 0 #14001b99, 0 6px 20px 0 #14001b99;" type="button" data-aos-once="false" class="bank-copy" data-copy="Rumah Cat Merah, Jl. Ahmad Yani, Gg. Periwatas RT/RW 03/13 Kel. Lengkongsari, Kec. Tawang, Kota Tasikmalaya, Jawa Barat, 46111, No.HP 081112555577">Copy</button>
                                                    </div><br>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div><br><br><br><br><br>
                    <div data-aos-once="false" class="ornaments-wrapper">
                        <div data-aos-once="false" class="widni-cover-9">
                            <div data-aos-once="false" class="image-wrap aos-init " data-aos="fade-up" data-aos-duration="2800" data-aos-delay="700">
                                <img src="./aul-abed_files/Widni-bunga-merah-tengah.png" alt="Mia-Cover - By Idzi">
                            </div>
                        </div>
                        <div data-aos-once="false" class="widni-cover-12">
                            <div data-aos-once="false" class="image-wrap aos-init " data-aos="fade-up" data-aos-duration="2800" data-aos-delay="700">
                                <img src="./aul-abed_files/Widni-bunga-merah-samping-bawah.png" alt="Mia-Cover - By Idzi">
                            </div>
                        </div>
                        <div data-aos-once="false" class="widni-cover-13">
                            <div data-aos-once="false" class="image-wrap aos-init " data-aos="fade-up" data-aos-duration="2800" data-aos-delay="700">
                                <img src="./aul-abed_files/Widni-bunga-merah-samping-bawah.png" alt="Mia-Cover - By Idzi">
                            </div>
                        </div>
                        <div data-aos-once="false" class="widni-cover-14">
                            <div data-aos-once="false" class="image-wrap aos-init " data-aos="fade-up" data-aos-duration="2800" data-aos-delay="700">
                                <img src="./aul-abed_files/widni-kupu.gif" alt="Mia-Cover - By Idzi">
                            </div>
                        </div>
                    </div>
                </section>

                <section style="background-color: #680001;" class="couple-wrap">
                    <div class="couple" style="padding: 10% 0%;">
                        <div class="couple-head" style="padding: 0 10%;">
                            <h1 style="color: var(--text-tertiary); font-family: New Walt Disney UI; font-size: 212%; font-weight: 600;" data-aos-once="false" class="activity-title aos-init" data-aos="fade-up" data-aos-duration="1000">
                                Turut Mengundang</h1><br>
                            <p style="color: var(--text-tertiary);" data-aos-once="false" class="activity-time aos-init " data-aos="fade-up" data-aos-duration="1000">
                                Bapak Viman Alfarizi Ramadhan, ST., MBA,.<br>(WALIKOTA TASIKMALAYA)<br><br> Bapak Rd. Diky Candra Negara<br>(WAKIL WALIKOTA TASIKMALAYA)<br><br> Bapak Drs. H. Asep Goparulloh, M.Pd.<br>(SEKDA KOTA TASIKMALAYA)<br><br> Bapak
                                Tono Efendi<br>(Ketua Umum Solidaritas Komunikasi Wartawan Tasikmalaya)</p><br>
                        </div>
                    </div>
                </section>

                <section data-aos-once="false" class="wedding-gift-wrap" style="background-image: url(./aul-abed_files/Widni-bg-cover-cream.png);">
                    <div data-aos-once="false" class="ornaments-wrapper">
                        <div data-aos-once="false" class="widni-atas-1">
                            <div data-aos-once="false" class="image-wrap aos-init " data-aos="fade-up" data-aos-duration="2800" data-aos-delay="700">
                                <img src="./aul-abed_files/Widni-bunga-merah-tengah.png" alt="Mia-Cover - By Idzi">
                            </div>
                        </div>
                        <div data-aos-once="false" class="widni-atas-2">
                            <div data-aos-once="false" class="image-wrap aos-init " data-aos="fade-up" data-aos-duration="2800" data-aos-delay="700">
                                <img src="./aul-abed_files/Widni-bunga-merah-samping-bawah.png" alt="Mia-Cover - By Idzi">
                            </div>
                        </div>
                        <div data-aos-once="false" class="widni-atas-3">
                            <div data-aos-once="false" class="image-wrap aos-init " data-aos="fade-up" data-aos-duration="2800" data-aos-delay="700">
                                <img src="./aul-abed_files/Widni-bunga-merah-samping-bawah.png" alt="Mia-Cover - By Idzi">
                            </div>
                        </div>
                    </div>
                    <div data-aos-once="false" class="photo-head">
                        <h1 data-aos-once="false" class="photo-title aos-init aos-animate" data-aos="fade-up" data-aos-duration="1000" style="opacity: 1; transition-duration: 1000ms; font-family: New Walt Disney UI; font-size: 212%;">
                            Live Streaming</h1>
                    </div>
                    <div data-aos-once="false" class="wedding-gift-inner">
                        <div data-aos-once="false" class="gift-frame aos-init aos-animate" data-aos="fade-up" data-aos-duration="1200" data-aos-delay="700" style="opacity: 1; transition-duration: 1200ms; min-height: 0; border-radius: 35px; width: 90%;padding: 0; background-color: #680001; box-shadow: 0 4px 8px 0 #14001b99, 0 6px 20px 0 #14001b99;">
                            <div data-aos-once="false" class="frame-wrap" style="padding: 0; min-height: 0;">
                                <div data-aos-once="false" class="wedding-gift-body" style="padding: 0; min-height: 0;">
                                    <div data-aos-once="false" class="wedding-gift-bank-wrap" style="padding: 0; min-height: 0;">
                                        <div data-aos-once="false" class="bank-item" id="savingBook5947" style="padding: 0; min-height: 0;">
                                            <div data-aos-once="false" class="bank-detail" style="padding: 0; min-height: 0;">
                                                <div class="save-date-head">
                                                    <br>
                                                    <p style="color: #f9e0bc; padding: 5%; font-weight: 500; opacity: 1; transition-duration: 1200ms;" class="wedding-gift-description aos-init aos-animate" data-aos="fade-up" data-aos-duration="1200">Saksikan acara pernikahan kami dalam bentuk virtual yang akan disiarkan langsung melalui youtube berikut :
                                                    </p>
                                                    <div data-aos-once="false" class="event-link-wrap aos-init" data-aos="fade-up" data-aos-duration="1000"><a href="https://www.youtube.com/live/GBuM4fb4LWQ" data-aos-once="false" class="event-link" target="_blank">
                                                        Link Streaming
                                                    </a>
                                                    </div>
                                                </div>
                                                <br>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div data-aos-once="false" class="photo-head">
                        <h1 data-aos-once="false" class="photo-title aos-init aos-animate" data-aos="fade-up" data-aos-duration="1000" style="opacity: 1; transition-duration: 1000ms; font-family: New Walt Disney UI; font-size: 212%;">
                            QR-Code<br>Check-In</h1>
                    </div>
                    <div data-aos-once="false" class="wedding-gift-inner">
                        <div data-aos-once="false" class="gift-frame aos-init aos-animate" data-aos="fade-up" data-aos-duration="1200" data-aos-delay="700" style="opacity: 1; transition-duration: 1200ms; min-height: 0; border-radius: 35px; width: 90%;padding: 0; background-color: #680001; box-shadow: 0 4px 8px 0 #14001b99, 0 6px 20px 0 #14001b99;">
                            <div data-aos-once="false" class="frame-wrap" style="padding: 0; min-height: 0;">
                                <div data-aos-once="false" class="wedding-gift-body" style="padding: 0; min-height: 0;">
                                    <div data-aos-once="false" class="wedding-gift-bank-wrap" style="padding: 0; min-height: 0;">
                                        <div data-aos-once="false" class="bank-item" id="savingBook5947" style="padding: 0; min-height: 0;">
                                            <div data-aos-once="false" class="bank-detail" style="padding: 0; min-height: 0;">
                                                <div class="save-date-head">
                                                    <br>
                                                    <p style="color: #f9e0bc; padding: 5%; font-weight: 500; opacity: 1; transition-duration: 1200ms;" class="wedding-gift-description aos-init aos-animate" data-aos="fade-up" data-aos-duration="1200">Harap tunjukan barcode ini kepada petugas penerima tamu untuk proses registrasi.
                                                    </p>
                                                    <center>
                                                        <img style="align-items: center; width: 69%;" src="https://idzibooth.com/idzii/userzi/img-qrcode/7777.png" alt="">
                                                    </center>
                                                    <p style="color: #f9e0bc; padding: 5%; font-weight: 500; opacity: 1; transition-duration: 1200ms;" class="wedding-gift-description aos-init aos-animate" data-aos="fade-up" data-aos-duration="1200">
                                                        ID Tamu :
                                                        <?= $data[0]['idtamu']; ?><br> Nama Tamu :
                                                            <?= $data[0]['nama_tamu']; ?>
                                                    </p>
                                                </div>
                                                <br>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>


                <section data-aos-once="false" class="wedding-wish-wrap" data-template="" style="background-image: url(./aul-abed_files/Widni-bg-cover-cream.png);">
                    <div data-aos-once="false" class="photo-head">
                        <h1 data-aos-once="false" class="photo-title aos-init aos-animate" data-aos="fade-up" data-aos-duration="1000" style="opacity: 1; transition-duration: 1000ms; font-family: New Walt Disney UI; font-size: 212%;">
                            Wedding Wish</h1>
                    </div>
                    <div data-aos-once="false" class="wedding-wish-inner">
                        <div data-aos-once="false" class="rsvp-inner" style="background-color: #680001;">
                            <div data-aos-once="false" class="rsvp-body">
                                <form action="komen.php" method="POST">
                                    <!-- Status -->
                                    <div data-aos-once="false" class="rsvp-status-wrap">

                                        <div data-aos-once="false" class="rsvp-amount-wrap" id="rsvpAmountWrap">
                                            <div data-aos-once="false" class="rsvp-amount-head aos-init aos-animate" data-aos="fade-up" data-aos-duration="1200">
                                                <p data-aos-once="false" class="rsvp-amount-caption" style="color: #f9e0bc;">Nama Tamu</p>
                                                <div data-aos-once="false" class="rsvp-amount-controller-wrap">
                                                    <div data-aos-once="false" class="rsvp-amount-controller">
                                                        <div data-aos-once="false" class="input-wrap">
                                                            <input type="text" name="nama" data-aos-once="false" class="form-control guest-name" placeholder="Name" value="<?= $data[0]['nama_tamu']; ?>">
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div data-aos-once="false" class="rsvp-status-head aos-init aos-animate" data-aos="fade-up" data-aos-duration="1200">
                                            <p data-aos-once="false" class="rsvp-status-caption" style="color: #f9e0bc;">
                                                Konfirmasi Kehadiran</p>
                                        </div>
                                        <div data-aos-once="false" class="rsvp-status-body">
                                            <div data-aos-once="false" class="rsvp-confirm-wrap">
                                                <label data-aos="fade-up" data-aos-duration="1200" data-aos-once="false" class="aos-init aos-animate">
                                                <input type="radio" name="konfirmasi" value="Hadir">
                                                <div data-aos-once="false" class="rsvp-confirm-btn going"
                                                    style="font-size: 100%;">
                                                    Hadir
                                                </div>
                                            </label>
                                                <label data-aos="fade-up" data-aos-duration="1200" data-aos-once="false" class="aos-init aos-animate">
                                                <input type="radio" name="konfirmasi" value="Tidak Hadir">
                                                <div data-aos-once="false" class="rsvp-confirm-btn not-going"
                                                    style="font-size: 100%;">
                                                    Tidak Hadir
                                                </div>
                                            </label>
                                            </div>
                                        </div>
                                        <br>
                                        <div data-aos-once="false" class="rsvp-status-head aos-init aos-animate" data-aos="fade-up" data-aos-duration="1200">
                                            <p data-aos-once="false" class="rsvp-status-caption" style="color: #f9e0bc;">
                                                Jumlah Kehadiran</p>
                                        </div>
                                        <div data-aos-once="false" class="rsvp-status-body">
                                            <div data-aos-once="false" class="rsvp-confirm-wrap">
                                                <label data-aos="fade-up" data-aos-duration="1200" data-aos-once="false" class="aos-init aos-animate">
                                                <input type="radio" name="tamu" value="1 Orang">
                                                <div data-aos-once="false" class="rsvp-confirm-btn going"
                                                    style="font-size: 100%;">
                                                    1 Orang
                                                </div>
                                            </label>
                                                <label data-aos="fade-up" data-aos-duration="1200" data-aos-once="false" class="aos-init aos-animate">
                                                <input type="radio" name="tamu" value="2 Orang">
                                                <div data-aos-once="false" class="rsvp-confirm-btn not-going"
                                                    style="font-size: 100%;">
                                                    2 Orang
                                                </div>
                                            </label>
                                            </div>
                                        </div>
                                    </div>

                                    <div data-aos-once="false" class="rsvp-amount-wrap" id="rsvpAmountWrap">
                                        <div data-aos-once="false" class="rsvp-amount-head aos-init aos-animate" data-aos="fade-up" data-aos-duration="1200">
                                            <p data-aos-once="false" class="rsvp-amount-caption" style="color: #f9e0bc;">
                                                Ucapan untuk pengantin</p>
                                            <div data-aos-once="false" class="rsvp-amount-controller-wrap">
                                                <div data-aos-once="false" class="rsvp-amount-controller">
                                                    <div data-aos-once="false" class="input-wrap">
                                                        <textarea data-aos-once="false" class="form-control guest-comment" name="isi" rows="1" placeholder="Give your wish"></textarea>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div>
                                        <input type="hidden" name="idpengantin" value="114">
                                        <input type="hidden" name="idtamu" value="<?= $data[0]['idtamu']; ?>">
                                        <input type="hidden" data-aos-once="false" class="form-control" value="<?php date_default_timezone_set(" Asia/Jakarta "); echo date("l, d M Y ");?>" name="waktu" id="basic-default-name" />
                                    </div>

                                    <div data-aos-once="false" class="rsvp-confirm-wrap aos-init aos-animate" data-aos="fade-up" data-aos-duration="1200">
                                        <button data-aos-once="false" class="rsvp-confirm-btn confirm submit">Confirm</button>
                                    </div>

                                    <script>
                                        // JavaScript to handle the "Check All" functionality
                                        document.getElementById("check-all").addEventListener("change", function() {
                                            var checkboxes = document.getElementsByName("selected_event[]");
                                            for (var i = 0; i < checkboxes.length; i++) {
                                                checkboxes[i].checked = this.checked;
                                            }
                                        });
                                    </script>

                                </form>
                            </div>
                            <div data-aos-once="false" class="comment-wrap show">
                                <div data-aos-once="false" class="comment-item aos-init aos-animate" data-aos="fade-up" data-aos-duration="1200">
                                    <?php $no = 1;
										foreach ($data1 as $d1) : ?>
                                    <div data-aos-once="false" class="comment-head">
                                        <h3 data-aos-once="false" class="comment-name" style="color: #f9e0bc; font-weight: 600;">
                                            <?= $d1['nama']; ?> |
                                                <?= $d1['waktu']; ?>
                                        </h3>
                                    </div>
                                    <div data-aos-once="false" class="comment-body">
                                        <p data-aos-once="false" class="comment-caption" style="color: #f9e0bc;">
                                            <?= $d1['isi']; ?>
                                        </p>
                                    </div><br>
                                    <?php endforeach ?>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>

                <section data-aos-once="false" class="footer">
                    <div data-aos-once="false" class="footer-inner ">
                        <p style="color: white;">Made with ❤️ by Idzibooth X Peony Planner</p>
                    </div>
                </section>
            </section>
        </section>

        <section data-aos-once="false" class="music-outer aos-init " data-aos="fade-up" data-aos-duration="1000" data-aos-delay="300">
            <div data-aos-once="false" class="music-box auto" id="music-box"></div>
        </section>
        <script>
            function startTheJourney() {
                var audio = document.getElementById("audio");
                audio.play();
            }

            function pause() {
                var audio = document.getElementById("audio");
                audio.pause();
            }
        </script>
        <audio id="audio" autoplay src="./aul-abed_files/desney.MP3"></audio>
        <script>
            // Music
            var MUSIC = {
                'url': "./aul-abed_files/desney.MP3",
                'box': '#music-box'
            };

            // Event
            var EVENT = 1701518400;

            // Banks
            var BANK_OPTIONS = [{
                "id": 5947,
                "title": "BANK MANDIRI",
                "credential": "1234567890"
            }, {
                "id": 6807,
                "title": "BANK BNI",
                "credential": "1234567890"
            }];

            // RSVP
            var RSVP = {
                'button_text': {
                    'attend': "Will Attend",
                    'not_attend': "Unable To Attend"
                }
            };

            // Covers
            var COVERS = [{
                'position': 'MAIN',
                'details': {
                    'desktop': "",
                    'mobile': "<div data-aos-once="
                    false " class=\"picture mobile\">\n                                    <img src=\"https:\/\/idzibooth.com"
                    alt = \"\">\n                                <\/div>"
                },
                'element': '#cover-main'
            }, {
                'position': 'OPENING',
                'details': {
                    'desktop': "",
                    'mobile': ""
                },
                'element': '#cover-opening'
            }, {
                'position': 'PANE',
                'details': {
                    'desktop': "",
                    'mobile': ""
                },
                'element': '#cover-pane'
            }];

            // Protocol
            var PROTOCOL = {
                'slider': '#protocol-slider',
                'dots': '#protocol-dots'
            };

            // RSVP Data
            var RSVP_DATA = {
                post: 'rsvp_request',
                request: 'get_rsvp',
                content: '',
                template: 'default_v2_rsvp',
                changeButton: '#changeRSVP',
                amountElement: '#rsvpAmountWrap'
            }
        </script>

        <div data-aos-once="false" class="alert" id="alert">
            <div data-aos-once="false" class="alert-text"></div>
            <div data-aos-once="false" class="alert-close fas fa-times"></div>
        </div>

        <div id="modal" data-aos-once="false" class="modal modal-center"></div>

        <script src="./aul-abed_files/aos.js"></script>
        <script src="./aul-abed_files/slick.min.js"></script>
        <script src="./aul-abed_files/selectize.min.js"></script>
        <script src="./aul-abed_files/jquery-modal-video.min.js"></script>
        <script src="./aul-abed_files/lightgallery.min.js"></script>
        <script src="./aul-abed_files/universal.js"></script>
        <script src="./aul-abed_files/template.js"></script>
        <script src="./aul-abed_files/custom-saskia-alvin.js"></script>
        <script>
            (function() {
                function c() {
                    var b = a.contentDocument || a.contentWindow.document;
                    if (b) {
                        var d = b.createElement('script');
                        d.innerHTML = "window.__CF$cv$params={r:'8aee4686ca08e68a',t:'MTcyMjkzOTQyOS4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";
                        b.getElementsByTagName('head')[0].appendChild(d)
                    }
                }
                if (document.body) {
                    var a = document.createElement('iframe');
                    a.height = 1;
                    a.width = 1;
                    a.style.position = 'absolute';
                    a.style.top = 0;
                    a.style.left = 0;
                    a.style.border = 'none';
                    a.style.visibility = 'hidden';
                    document.body.appendChild(a);
                    if ('loading' !== document.readyState) c();
                    else if (window.addEventListener) document.addEventListener('DOMContentLoaded', c);
                    else {
                        var e = document.onreadystatechange || function() {};
                        document.onreadystatechange = function(b) {
                            e(b);
                            'loading' !== document.readyState && (document.onreadystatechange = e, c())
                        }
                    }
                }
            })();
        </script>
        <iframe height="1" width="1" style="position: absolute; top: 0px; left: 0px; border: none; visibility: hidden;" src="./aul-abed_files/saved_resource.html"></iframe>
    </body>

    </html>