<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
    <meta charset="utf-8">

    <!-- Page Title -->
    <title>Merry Christmas</title>

    <!-- Meta Tags -->
    <meta name="description" content="Indonesian Province - Christmas Card">
    <meta name="keywords" content="christmas, remark">
    <meta name="author" content="windar">

    <!-- Viewport Meta-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <!-- Template Favicon & Icons Start -->
    <link rel="icon" href="img/favicon/favicon.ico" sizes="any">
    <link rel="icon" href="img/favicon/icon.svg" type="image/svg+xml">
    <link rel="apple-touch-icon" href="img/favicon/apple-touch-icon.png">
    <link rel="manifest" href="img/favicon/manifest.webmanifest">
    <!-- Template Favicon & Icons End -->

    <!-- Facebook Metadata Start -->
    <meta property="og:image:height" content="1200">
    <meta property="og:image:width" content="1200">
    <meta property="og:title" content="Indonesian Province - Christmas Card">
    <meta property="og:description" content="Indonesian Province - Christmas Card">
    <!-- Facebook Metadata End -->

    <!-- Template Styles Start -->
    <link rel="stylesheet" type="text/css" href="css/loaders/loader.css">
    <link rel="stylesheet" type="text/css" href="css/plugins.css">
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <!-- Template Styles End -->

    <!-- Custom Browser Color Start -->
    <meta name="theme-color" content="#2c342b">
    <meta name="msapplication-navbutton-color" content="#2c342b">
    <meta name="apple-mobile-web-app-status-bar-style" content="#2c342b">
    <!-- Custom Browser Color End -->
</head>

<body>

    <!-- Loader Start-->
    <div class="loader">
        <div class="loader__content">
            <div class="loader__logo fadeIn">
                <!-- Your Logo Here -->
                <img src="img/logo-loader.png" alt="Indonesian Province - Christmas Card">
            </div>
        </div>
    </div>
    <!-- Loader End-->

    <!-- Navigation Start -->
    <nav id="menu" class="menu">
        <div class="menu__container">

            <!-- Navigation Close Button Start -->
            <a id="menu-close" class="section-close light" href="#0"><span></span></a>
            <!-- Navigation Close Button End -->

            <!-- Navigation Content Start -->
            <div class="menu__content fullheight">

                <!-- Menu List Start -->
                <ul class="navigation">
                    <li class="light transition-el transition-el-1">
                        <span>welcome</span>
                        <a id="home-trigger" href="#0">Home</a>
                    </li>
                    <li class="transition-el transition-el-3">
                        <span>Provincial</span>
                        <a id="works-trigger" class="inner-link" href="#0">Messege</a>
                    </li>
                    <li class="transition-el transition-el-4">
                        <span>feel free to</span>
                        <a id="contact-trigger" class="inner-link" href="#0">Contact</a>
                    </li>
                </ul>
                <!-- Menu List End -->



            </div>
            <!-- Navigation Content End -->

        </div>
    </nav>
    <!-- Navigation End -->

    <!-- Main Section Start -->
    <section id="main" class="main">
        <div class="container-fluid p-0 fullheight">
            <div class="row g-0 fullheight">

                <!-- Main Section Content Start -->
                <div class="col-12 col-xl-6 main__content">

                    <!-- Main Header Start -->
                    <div class="main__header">
                        <div class="header__container">
                            <div class="header__content">
                                <!-- logo -->
                                <div class="logo">
                                    <img src="img/logo.png" alt="">
                                </div>
                                <!-- menu trigger -->
                                <a href="#0" id="menu-trigger" class="menu-trigger"><span></span></a>
                            </div>
                        </div>
                    </div>
                    <!-- Main Header End -->

                    <!-- Main Headline Start -->
                    <div class="main__headline">
                        <div class="headline__content centered">
                            <span class="headline__subtitle light loading-el loading-el-1">Ignatius and his Companions</span>
                            <h1 class="light loading-el loading-el-2">The Pilgrims of Hope</h1>
                            <p class="headline__text light loading-el loading-el-3">Christmas is the joyful fulfilment of God’s promise of salvation in which we dare to hope.
                            <div class="headline__btnholder loading-el loading-el-4">
                                <a href="https://www.youtube.com/watch?v=O6LIuMIVyZE" target="_blank" class="btn btn-solid-light" id="works-trigger">
                                    <span class="btn-caption">Provincial Message</span>
                                </a>
                            </div>
                        </div>
                    </div>
                    <!-- Main Headline End -->

                    <!-- Main Socials Text Start -->
                    <div class="main__dataline">
                        <div class="container-fluid px-0">
                            <div class="row gx-0">
                                <div class="col-12 text-center">
                                    <ul class="socials-text">
                                        <li>
                                            <a href="https://www.facebook.com/JesuitIndonesia/" target="_blank">Facebook</a>
                                        </li>
                                        <li>
                                            <a href="https://www.instagram.com/jesuitindonesia/" target="_blank">Instagram</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- Main Socials Text End -->

                </div>
                <!-- Main Section Content End -->

                <!-- Main Section Media Start -->
                <div class="col-12 col-xl-6 main__media">

                    <!-- Main Media Content Start -->
                    <div class="mainmedia__container">
                        <div class="mainmedia__content">

                            <!-- Section Image Background Start -->
                            <div> <img src="img/natal.png" alt="Indonesian Province - Christmas Card"></div>
                            <!-- Section Image Background End -->

                        </div>
                    </div>
                    <!-- Main Media Content End -->

                    <!-- Copyright Start -->
                    <div class="mainmedia__copyright">
                        <p class="additional-text">
                            <a class="light" href="https://1.envato.market/EKA9WD" target="_blank">Jesuit Indonesia</a>
                        </p>
                    </div>
                    <!-- Copyright End -->

                </div>
                <!-- Main Section Media End -->

            </div>
        </div>
    </section>
    <!-- Main Section End -->


    <!-- Our Works Section Start -->
    <section id="works" class="inner works">
        <div class="container-fluid p-0 fullheight">
            <div class="row g-0 flex-xl-row-reverse fullheight">

                <!-- Section Content Start -->
                <div class="col-12 col-xl-6 inner__content">

                    <!-- Section Close Button Start -->
                    <a id="works-close" class="section-close" href="#0"><span></span></a>
                    <!-- Section Close Button End -->

                    <!-- Section Content Block Start -->
                    <div class="inner__block background-mute">

                        <!-- Section Container - Section Title Start -->
                        <div class="inner__container">
                            <h2>Provincial Messege</h2>
                            <span class="section__subtitle">The More Present, The More Serving</span>
                            <p class="section__text">Merry Christmas! May the birth of Jesus the Savior bring true peace and joy to all of us. The greatest joy of 2024 for the Society of Jesus was definitely the meeting with Pope Francis. To this day we endlessly continue to talk about that event. The private audience with the Jesuits on September 4, 2024, the second day of the Holy Father's visit, at the Nunciatura or Vatican Embassy in Jakarta. A total of 200 Jesuits, young and old, were invited to meet and chat with the Holy Father. For further reading please go to <a href="https://jesuits.id/download/" target="_blank">this link.</a>
                            </p>
                        </div>
                        <!-- Section Container - Section Title End -->

                    </div>
                    <!-- Section Content Block End -->

                    <!-- Section Content Block Start -->
                    <div class="inner__block no-padding background-light">

                        <!-- Section Container - Gallery Start -->
                        <div class="container-fluid p-0 gallery">
                            <div class="row g-0 my-gallery" itemscope itemtype="http://schema.org/ImageGallery">

                                <!-- Works Gallery Single Item Start -->
                                <figure class="col-12 col-md-6" itemprop="associatedMedia" itemscope itemtype="https://jesuits.id/wp-content/uploads/2024/12/eng.png">
                                    <a href="https://jesuits.id/wp-content/uploads/2024/12/eng.png" data-image="https://jesuits.id/wp-content/uploads/2024/12/eng.png" class="works-link" itemprop="contentUrl" data-size="900x1200">
                                        <img src="https://jesuits.id/download/" class="works-image" itemprop="thumbnail" alt="Image description">
                                    </a>
                                    <figcaption class="works-description" itemprop="caption description">
                                        <h4>English
                                            <small>Provincial Messege</small>
                                        </h4>
                                        <p>Merry Christmas! May the birth of Jesus the Savior bring true peace and joy to all of us. The greatest joy of 2024 for the Society of Jesus was definitely the meeting with Pope Francis. To this day we continue to talk about that event endlessly.
                                        </p>
                                    </figcaption>
                                </figure>
                                <!-- Works Gallery Single Item End -->

                                <!-- Works Gallery Single Item Start -->
                                <figure class="col-12 col-md-6" itemprop="associatedMedia" itemscope itemtype="https://jesuits.id/wp-content/uploads/2024/12/sat2024.png">
                                    <a href="https://jesuits.id/wp-content/uploads/2024/12/1.png" class="works-link" data-image="https://jesuits.id/wp-content/uploads/2024/12/sat2024.png" itemprop="contentUrl" data-size="900x1200">
                                        <img src="https://jesuits.id/wp-content/uploads/2024/12/2.png" class="works-image" itemprop="thumbnail" alt="Image description">
                                    </a>
                                    <figcaption class="works-description" itemprop="caption description">
                                        <h4>Indonesia
                                            <small>Surat Akhir Tahun</small>
                                        </h4>
                                        <p>Selamat Natal! Semoga kelahiran Yesus Sang Juru Selamat menghadirkan damai dan sukacita sejati bagi kita semua. Sukacita terbesar sepanjang 2024 bagi Serikat Jesus sudah pasti adalah perjumpaan dengan Paus Fransiskus. Sampai hari ini kami masih terus membicarakan peristiwa itu tak habis-habisnya.
                                        </p>
                                    </figcaption>
                                </figure>
                                <!-- Works Gallery Single Item End -->

                            </div>
                        </div>
                        <!-- Section Container - Gallery End -->

                    </div>
                    <!-- Section Content Block End -->



                </div>
                <!-- Section Content End -->

                <!-- Section Media Start -->
                <div class="col-12 col-xl-6 inner__media">

                    <!-- Section Media Content Start -->
                    <div class="media__container">
                        <div class="media__content">

                            <!-- Section Image Background Start -->
                            <div class="media__image works-image"></div>
                            <!-- Section Image Background End -->

                        </div>
                    </div>
                    <!-- Section Media Content End -->

                    <!-- Copyright Start -->
                    <div class="media__copyright">
                        <p class="additional-text light">Jesuit Indonesia
                        </p>
                    </div>
                    <!-- Copyright End -->

                </div>
                <!-- Section Media End -->

            </div>
        </div>
    </section>
    <!-- Our Works Section End -->

    <!-- Contact Section Start -->
    <section id="contact" class="inner contact">
        <div class="container-fluid p-0 fullheight">
            <div class="row g-0 flex-xl-row-reverse fullheight">

                <!-- Section Content Start -->
                <div class="col-12 col-xl-6 inner__content">

                    <!-- Section Close Button Start -->
                    <a id="contact-close" class="section-close" href="#0"><span></span></a>
                    <!-- Section Close Button End -->

                    <!-- Section Content Block Start -->
                    <div class="inner__block background-mute">

                        <!-- Section Container - Section Title Start -->
                        <div class="inner__container">
                            <h2>Contact</h2>
                            <span class="section__subtitle">Welcome to the Indonesia Province of Society of Jesus</span>
                            <p class="section__text">Feel free to Contact Us!
                                You can
                                <a href="tel:+622448315004">call us</a>
                                or leave a request here. We are always glad to see you in our office from
                                <span>8:00</span>
                                to
                                <span>17:00</span>.
                            </p>
                        </div>
                        <!-- Section Container - Section Title End -->

                        <!-- Section Container - Contact Data Start -->
                        <div class="inner__container grid-block">
                            <div class="container-fluid px-4">
                                <div class="row gx-5">
                                    <!-- contact data item -->
                                    <div class="col-12 col-sm-6 contact-data__item">
                                        <h5 class="contact-data__title">Location</h5>
                                        <p class="contact-data__text">
                                            Jl. Argopuro 24
                                            <br>Lempongsari, Semarang
                                            <br>50231
                                        </p>
                                    </div>
                                    <!-- contact data item -->
                                    <div class="col-12 col-sm-6 contact-data__item">
                                        <h5 class="contact-data__title">Follow us</h5>
                                        <ul class="contact-data__socials">
                                            <li>
                                                <a href="https://www.facebook.com/jesuitindonesia" target="_blank">Facebook</a>
                                            </li>
                                            <li>
                                                <a href="https://www.instagram.com/jesuitindonesia" target="_blank">Instagram</a>
                                            </li>
                                        </ul>
                                    </div>
                                    <!-- contact data item -->
                                    <div class="col-12 col-sm-6 contact-data__item">
                                        <h5 class="contact-data__title">Phone</h5>
                                        <p class="contact-data__text">
                                            <a href="tel:+622448315004">+62 24 483 15004</a>
                                        </p>
                                    </div>
                                    <!-- contact data item -->
                                    <div class="col-12 col-sm-6 contact-data__item">
                                        <h5 class="contact-data__title">Email</h5>
                                        <p class="contact-data__text">
                                            <a href="mailto:socius@jesuits.id?subject=Message%20from%20your%20site">socius@jesuits.id</a>
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- Section Container - Contact Data End -->

                    </div>
                    <!-- Section Content Block End -->



                </div>
                <!-- Section Content End -->

                <!-- Section Media Start -->
                <div class="col-12 col-xl-6 inner__media">

                    <!-- Section Media Content Start -->
                    <div class="media__container">
                        <div class="media__content">

                            <!-- Section Image Background Start -->
                            <div class="media__image contact-image"></div>
                            <!-- Section Image Background End -->

                            <!-- Google Map Start -->
                            <!-- <div class="map">
                                <div id="google-map">
                                    <div id="google-container"></div>
                                    <div id="zoom-in">
                                        <i class="btn-icon fa-solid fa-plus"></i>
                                    </div>
                                    <div id="zoom-out">
                                        <i class="btn-icon fa-solid fa-minus"></i>
                                    </div>
                                </div>
                            </div> -->
                            <!-- Google Map End -->

                        </div>
                    </div>
                    <!-- Section Media Content End -->

                    <!-- Copyright Start -->
                    <div class="media__copyright">
                        <p class="additional-text light">Jesuit Indonesia
                        </p>
                    </div>
                    <!-- Copyright End -->

                </div>
                <!-- Section Media End -->

            </div>
        </div>
    </section>
    <!-- Contact Section End -->

    <!-- Root element of PhotoSwipe. Must have class pswp. -->
    <div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">

        <!-- Background of PhotoSwipe.
      It's a separate element, as animating opacity is faster than rgba(). -->
        <div class="pswp__bg"></div>

        <!-- Slides wrapper with overflow:hidden. -->
        <div class="pswp__scroll-wrap">

            <!-- Container that holds slides. PhotoSwipe keeps only 3 slides in DOM to save memory. -->
            <!-- don't modify these 3 pswp__item elements, data is added later on. -->
            <div class="pswp__container">
                <div class="pswp__item"></div>
                <div class="pswp__item"></div>
                <div class="pswp__item"></div>
            </div>

            <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
            <div class="pswp__ui pswp__ui--hidden">

                <div class="pswp__top-bar">

                    <!--  Controls are self-explanatory. Order can be changed. -->

                    <div class="pswp__counter"></div>

                    <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>

                    <button class="pswp__button pswp__button--share" title="Share"></button>

                    <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>

                    <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>

                    <!-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR -->
                    <!-- element will get class pswp__preloader-active when preloader is running -->
                    <div class="pswp__preloader">
                        <div class="pswp__preloader__icn">
                            <div class="pswp__preloader__cut">
                                <div class="pswp__preloader__donut"></div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
                    <div class="pswp__share-tooltip"></div>
                </div>

                <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
                </button>

                <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
                </button>

                <div class="pswp__caption">
                    <div class="pswp__caption__center"></div>
                </div>

            </div>

        </div>

    </div>

    <!-- Load Scripts Start -->
    <script src="js/libs.min.js"></script>
    <script src="js/gallery-init.js"></script>
    <script src="js/custom.js"></script>
    <script src="js/maps/map.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDNMDtmEsvSevM4ztfsbhLfLNZhKHCvWXk"></script>
    <!-- Load Scripts End -->

</body>

</html>