(function () {
  document.write(`

    <div class="mainhead">
        <h1 id="menuTitle">Biblical Reformation</h1>
    </div>
        
    <nav id="navbar">
        <ul>
        <li><a href="index.html?return=true">Home</a></li>
    
        <li>
            <a href="#">Connect</a>
            <ul class="submenu">
            <li><a href="Desktop Pages/Connect/about_d.html">About</a></li>
            <li><a href="Desktop Pages/Connect/contact_d.html">Contact</a></li>
            <li><a href="Desktop Pages/Connect/church_d.html">Find A Church</a></li>
            <li><a href="Desktop Pages/Connect/faq_d.html">FAQ</a></li>
            </ul>
        </li>
    
        <li>
            <a href="#">Religion</a>
            <ul class="submenu">
            <li><a href="Desktop Pages/Religion/catholic_d.html">Roman Catholic</a></li>
            <li><a href="Desktop Pages/Religion/advent_d.html">Adventism</a></li>
            <li><a href="Desktop Pages/Religion/icc_d.html">ICC/ICOC</a></li>
            <li><a href="Desktop Pages/Religion/christian_d.html">Christianity</a></li>
            <li><a href="Desktop Pages/Religion/islam_d.html">Islam</a></li>
            <li><a href="Desktop Pages/Religion/athiesm_d.html">Athiestism</a></li>
            <li><a href="Desktop Pages/Religion/mormon_d.html">Mormonism</a></li>
            <li><a href="Desktop Pages/Religion/jw_d.html">Jehovah Witnesses</a></li>
            <li><a href="Desktop Pages/Religion/science_d.html">Christian Science</a></li>
            <li><a href="Desktop Pages/Religion/oneness_d.html">Unitarianism</a></li>
            </ul>
        </li>
    
        <li>
            <a href="#">Content</a>
            <ul class="submenu">
            <li><a href="Desktop Pages/Literature/love_d.html">True Love</a></li>
            <li><a href="Desktop Pages/Literature/mental health_d.html">Mental Health</a></li>
            <li><a href="Desktop Pages/Literature/identity_d.html">Identity</a></li>
            <li><a href="Desktop Pages/Literature/abortion_d.html">Abortion</a></li>
            <li><a href="Desktop Pages/Literature/immorality_d.html">Pornography</a></li>
            <li><a href="Desktop Pages/Literature/death_d.html">Death</a></li>
            <li><a href="Desktop Pages/Literature/fear_d.html">Fear</a></li>
            <li><a href="Desktop Pages/Literature/good_d.html">Good Enough?</a></li>
            <li><a href="Desktop Pages/Literature/bereavement_d.html">Bereavement</a></li>
            <li><a href="Desktop Pages/Literature/born again_d.html">Born Again</a></li>
            <li><a href="Desktop Pages/Literature/conscience_d.html">Guilty Conscience</a></li>
            <li><a href="Desktop Pages/Literature/manhood_d.html">True Man</a></li>
            <li><a href="Desktop Pages/Literature/grace_d.html">Grace</a></li>
            <li><a href="Desktop Pages/Literature/quran_d.html">Bible or Quran</a></li>
            <li><a href="Desktop Pages/Literature/gods name_d.html">Yahweh or Allah</a></li>
            </ul>
        </li>
    
        <li>
            <a href="#">Evangelism</a>
            <ul class="submenu">
            <li><a href="Desktop Pages/Evangelism/convert_d.html">Become a Christian</a></li>
            <li><a href="Desktop Pages/Evangelism/gospel_d.html">The Good News</a></li>
            <li><a href="Desktop Pages/Evangelism/preachers_d.html">Good Preachers</a></li>
            <li><a href="Desktop Pages/Evangelism/street_d.html">Street Preaching</a></li>
            <li><a href="Desktop Pages/Evangelism/apologetics_d.html">Apologetics</a></li>
            <li><a href="Desktop Pages/Evangelism/training_d.html">Evangelism Training</a></li>
            </ul>
        </li>
    
        <li>
            <a href="#">Discipleship</a>
            <ul class="submenu">
            <li><a href="Desktop Pages/Discipleship/seeking_d.html">Just Seeking</a></li>
            <li><a href="Desktop Pages/Discipleship/steps_d.html">First Steps</a></li>
            <li><a href="Desktop Pages/Discipleship/mentoring_d.html">Biblical Mentoring</a></li>
            </ul>
        </li>
    
        <li>
            <a href="#">Prayer</a>
            <ul class="submenu">
            <li><a href="Desktop Pages/Prayer/request_d.html">Prayer Request</a></li>
            <li><a href="Desktop Pages/Prayer/prayer_d.html">Prayer Topics</a></li>
            </ul>
        </li>
    
        </ul>
    </nav>

    <div class="header-placeholder"></div>

    <div class="header">
        <div class="burger-container">
            <div id="burger">
                <div class="bar topBar"></div>
                <div class="bar btmBar"></div>
            </div>
        </div>
        <ul class="menu">
            <li class="mobile_menu-item mobile_menu-item-home"><a href="./index.html">Home</a></li>
            <li class="mobile_menu-item">Connect
                <ul class="mobile_submenu">
                <li class="mobile_submenu-item"><a href="Mobile Pages/Connect/about.html">About</a></li>
                <li class="mobile_submenu-item"><a href="Mobile Pages/Connect/contact.html">Contact</a></li>
                <li class="mobile_submenu-item"><a href="Mobile Pages/Connect/church.html">Find A Church</a></li>
                <li class="mobile_submenu-item"><a href="Mobile Pages/Connect/faq.html">FAQ</a></li>
                </ul>
            </li>
            <li class="mobile_menu-item">Religion
                <ul class="mobile_submenu">
                <li class="mobile_submenu-item"><a href="Mobile Pages/Religion/catholic.html">Roman Catholic</a></li>
                <li class="mobile_submenu-item"><a href="Mobile Pages/Religion/advent.html">Adventism</a></li>
                <li class="mobile_submenu-item"><a href="Mobile Pages/Religion/icc.html">ICC/ICOC</a></li>
                <li class="mobile_submenu-item"><a href="Mobile Pages/Religion/christian.html">Christianity</a></li>
                <li class="mobile_submenu-item"><a href="Mobile Pages/Religion/islam.html">Islam</a></li>
                <li class="mobile_submenu-item"><a href="Mobile Pages/Religion/athiesm.html">Athiestism</a></li>
                <li class="mobile_submenu-item"><a href="Mobile Pages/Religion/mormon.html">Mormonism</a></li>
                <li class="mobile_submenu-item"><a href="Mobile Pages/Religion/jw.html">Jehovah Witnesses</a></li>
                <li class="mobile_submenu-item"><a href="Mobile Pages/Religion/science.html">Christian Science</a></li>
                <li class="mobile_submenu-item"><a href="Mobile Pages/Religion/oneness.html">Unitarianism</a></li>
                </ul>
            </li>
            <li class="mobile_menu-item">Content
                <ul class="mobile_submenu">
                <li class="mobile_submenu-item"><a href="Mobile Pages/Literature/love.html">True Love</a></li>
                <li class="mobile_submenu-item"><a href="Mobile Pages/Literature/mental health.html">Mental Health</a></li>
                <li class="mobile_submenu-item"><a href="Mobile Pages/Literature/identity.html">Identity</a></li>
                <li class="mobile_submenu-item"><a href="Mobile Pages/Literature/abortion.html">Abortion</a></li>
                <li class="mobile_submenu-item"><a href="Mobile Pages/Literature/immorality.html">Pornography</a></li>
                <li class="mobile_submenu-item"><a href="Mobile Pages/Literature/death.html">Death</a></li>
                <li class="mobile_submenu-item"><a href="Mobile Pages/Literature/fear.html">Fear</a></li>
                <li class="mobile_submenu-item"><a href="Mobile Pages/Literature/good.html">Good Enough?</a></li>
                <li class="mobile_submenu-item"><a href="Mobile Pages/Literature/bereavement.html">Bereavement</a></li>
                <li class="mobile_submenu-item"><a href="Mobile Pages/Literature/born again.html">Born Again</a></li>
                <li class="mobile_submenu-item"><a href="Mobile Pages/Literature/conscience.html">Guilty Conscience</a></li>
                <li class="mobile_submenu-item"><a href="Mobile Pages/Literature/manhood.html">True Man</a></li>
                <li class="mobile_submenu-item"><a href="Mobile Pages/Literature/grace.html">Grace</a></li>
                <li class="mobile_submenu-item"><a href="Mobile Pages/Literature/quran.html">Bible or Quran</a></li>
                <li class="mobile_submenu-item"><a href="Mobile Pages/Literature/gods name.html">Yahweh or Allah</a></li>
                </ul>
            </li>
            <li class="mobile_menu-item">Evangelism
                <ul class="mobile_submenu">
                <li class="mobile_submenu-item"><a href="Mobile Pages/Evangelism/convert.html">Become a Christian</a></li>
                <li class="mobile_submenu-item"><a href="Mobile Pages/Evangelism/gospel.html">The Good News</a></li>
                <li class="mobile_submenu-item"><a href="Mobile Pages/Evangelism/preachers.html">Good Preachers</a></li>
                <li class="mobile_submenu-item"><a href="Mobile Pages/Evangelism/street.html">Street Preaching</a></li>
                <li class="mobile_submenu-item"><a href="Mobile Pages/Evangelism/apologetics.html">Apologetics</a></li>
                <li class="mobile_submenu-item"><a href="Mobile Pages/Evangelism/training.html">Evangelism Training</a></li>
                </ul>
            </li>
            <li class="mobile_menu-item">Discipleship
                <ul class="mobile_submenu">
                <li class="mobile_submenu-item"><a href="Mobile Pages/Discipleship/seeking.html">Just Seeking</a></li>
                <li class="mobile_submenu-item"><a href="Mobile Pages/Discipleship/steps.html">First Steps</a></li>
                <li class="mobile_submenu-item"><a href="Mobile Pages/Discipleship/mentoring.html">Biblical Mentoring</a></li>
                </ul>
            </li>
            <li class="mobile_menu-item">Prayer
                <ul class="mobile_submenu">
                <li class="mobile_submenu-item"><a href="Mobile Pages/Prayer/request.html">Prayer Request</a></li>
                <li class="mobile_submenu-item"><a href="Mobile Pages/Prayer/prayer.html">Prayer Topics</a></li>
                </ul>
            </li>
        </ul>
    </div>
        
    <!-- desktop styles -->
    <style>

        .header{
            display: none;
            }

        .mainhead {
            background-color: #061e36;
            color: #ecf0f1;
            text-align: center;
            width: 100%;
            position: relative;
            height: 20vh;
            min-height: 100px;
            display: flex;
            align-items: center; /* Center vertically */
            justify-content: center; /* Center horizontally */
        }

        #logo1 {
            max-width: 70px; /* Adjust the max-width as needed */
            position: absolute;
            left: 50px; /* Adjust the left position as needed */
            top: 50%;
            transform: translateY(-50%);
        }
        
        #menuTitle{
            font-size: 50px;
            position: relative;
            
        }

        nav {
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #0c2742;
            color: #ecf0f1;
            padding: 10px;
            text-align: center;
            width: 100%;
            min-height: 50px;
            height: 8vh;
        }

        ul {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            justify-content: center;
        }

        li {
            margin: 0 20px;
            position: relative;
        }

        a {
            text-decoration: none;
            color: #ecf0f1;
            font-weight: bold;
            padding: 10px;
            display: block;
            transition: color 0.3s ease;
        }

        a:hover {
            color: #3498db;
        }

        ul.submenu {
            display: none;
            position: absolute;
            background-color: #2c3e50;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
            width: 200px;
            text-align: center; /* Center the text */
            left: 50%; /* Center the box horizontally */
            transform: translateX(-50%);
            z-index: 32;
        }

        li:hover .submenu {
            display: block;
        }

        ul.submenu li {
            margin: 0;
            border-bottom: 1px solid #34495e;
            text-align: center; /* Center the text */
        }

        ul.submenu li:last-child {
            border-bottom: none;
        }

        .sticky {
            position: fixed;
            top: 0;
            background-color: #0c2742;
            color: #ecf0f1;
            padding: 10px;
            text-align: center;
            width: 100%;
            z-index: 1002;
        }

        .header-placeholder {
            display: none;
            height: 60px; /* Same as header height */
        }
    </style>

    <!-- mobile styles -->
    <style>

        @media only screen and (max-width: 768px) {
            body {
                margin: 0;
                line-height: 1.4;
                background-color: #0A2F54;
                position: relative;
                display: block;
                width: 100%;
                overflow-x: hidden;
            }
            
            .header-placeholder, #navbar, .mainhead{
                display: none;
            }

            .menu {
                list-style: none;
                padding: 0;
                margin-top: 50px;
                margin-left: 50px;
                margin-right: 50px;
                display: block;
                justify-content: center;
            }
            
            .mobile_submenu {
                list-style: none;
                padding: 0;
                margin-left: 10px;
                margin-right: 50px;
                display: none;
            }

            .mobile_menu-item-home a{
                text-decoration: none;
                color: #ecf0f1;
                font-weight: bold;
                margin: -10px;
                display: block;
                transition: color 0.3s ease;
            }

            .mobile_menu-item, .mobile_submenu-item a{
                font-family: "Ek Mukta", sans-serif;
                text-decoration: none;
                color: whitesmoke;
                font-weight: bold;
                padding: 10px;
                display: block;
                transition: color .3s ease;
                border-bottom: 1px solid #333;
                transition: transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99), opacity 0.6s cubic-bezier(0.4, 0.01, 0.165, 0.99);
            }
            
            .mobile_menu-item{
                font-size: 20px;
            }
            
            .mobile_submenu-item a{
                font-size: 15px;
            }
            
            .mobile_submenu-item{
                opacity: 0;
            }
            
            .header {
                position: absolute;
                display: block;
                top: 0;
                left: 0;
                height: 50px;
                width: 100%;
                background: rgba(0, 0, 0, 0.8);
                overflow-y: auto;
                transition: all 0.5s ease-out, background 1s ease-out;
                transition-delay: 0.2s;
                z-index: 1;
            }

            .header {
                scrollbar-width: none; /* New property */
            }
            .header::-webkit-scrollbar {
                width: 8px; /* Fallback for Webkit browsers */
            }

            .header .burger-container {
                position: relative;
                display: inline-block;
                height: 50px;
                width: 50px;
                cursor: pointer;
                transform: rotate(0deg);
                transition: all 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99);
                -ms-user-select: none;
                -webkit-user-select: none;
                user-select: none;
                -webkit-tap-highlight-color: transparent; /* Safari and Chrome for iOS */
                -webkit-touch-callout: none; /* Disable callout on iOS Safari */
                -moz-tap-highlight-color: transparent; /* Firefox for Android */
                -ms-touch-action: manipulation; /* IE 10+ */
                touch-action: manipulation; /* IE 11+, Firefox, Chrome, Safari */
            }
            
            .header .burger-container #burger {
                width: 18px;
                height: 8px;
                position: relative;
                display: block;
                margin: -4px auto 0;
                top: 50%;
            }
            .header .burger-container #burger .bar {
                width: 100%;
                height: 1px;
                display: block;
                position: relative;
                background: #FFF;
                transition: all 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99);
                transition-delay: 0s;
            }
            .header .burger-container #burger .bar.topBar {
                transform: translateY(0px) rotate(0deg);
            }
            .header .burger-container #burger .bar.btmBar {
                transform: translateY(6px) rotate(0deg);
            }
            .header.menu-opened {
                height: 100%;
                background-color: #000;
                transition: all 0.3s ease-in, background 0.5s ease-in;
                transition-delay: 0.25s;
            }
            .header.menu-opened .burger-container {
                transform: rotate(90deg);
            }
            .header.menu-opened .burger-container #burger .bar {
                transition: all 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99);
                transition-delay: 0.2s;
            }
            .header.menu-opened .burger-container #burger .bar.topBar {
                transform: translateY(4px) rotate(45deg);
            }
            .header.menu-opened .burger-container #burger .bar.btmBar {
                transform: translateY(3px) rotate(-45deg);
            }

        }
    </style>

    <script>
        document.addEventListener('DOMContentLoaded', function() {

            if (window.innerWidth <= 768) {

                var burgerContainer = document.querySelector('.burger-container');
                var header = document.querySelector('.header');
                var mobileMenuItems = document.querySelectorAll('.mobile_menu-item');

                burgerContainer.addEventListener('click', function() {
                    console.log('here1')
                    header.classList.toggle('menu-opened');
                    if (header.classList.contains('menu-opened')) {
                        menuOpen();
                    } else {
                        menuClose();
                    }
                });

                function menuOpen() {
                    mobileMenuItems.forEach(function(menuItem, index) {
                        menuItem.style.transition = 'transform 0s, opacity 0s';
                        menuItem.style.opacity = '0';
                        menuItem.style.transform = 'scale(1.5)';
                        setTimeout(function() {
                            menuItem.style.transition = 'transform .5s cubic-bezier(0.4, 0.01, 0.165, 0.99), opacity .6s cubic-bezier(0.4, 0.01, 0.165, 0.99)';
                            menuItem.style.opacity = '1';
                            menuItem.style.transform = 'scale(1) translateY(-50px)';
                        }, index * 60 + 200);
                    });
                }

                function menuClose() {
                    var len = mobileMenuItems.length;
                    mobileMenuItems.forEach(function(menuItem, index) {
                        setTimeout(function() {
                            menuItem.style.transition = 'transform 0s, opacity 0s';
                            menuItem.style.opacity = '0';
                            menuItem.style.transform = 'scale(1.5)';
                        }, (len - index) * 60 + 200);
                    });
                }

                document.querySelectorAll('.mobile_menu-item').forEach(function(menuItem) {
                    menuItem.addEventListener('click', function() {
                        var submenu = menuItem.querySelector('.mobile_submenu');
                        var allSubmenus = document.querySelectorAll('.mobile_submenu');
                        var allMenuItemElements = document.querySelectorAll('.mobile_menu-item');
                        var allSubmenuItemElements = document.querySelectorAll('.mobile_submenu-item');

                        // Close all open submenus
                        allSubmenus.forEach(function(sub) {
                            if (sub !== submenu) {
                                sub.style.display = 'none';
                            }
                        });

                        allMenuItemElements.forEach(function(item) {
                            item.style.marginTop = '0px';
                        });

                        allSubmenuItemElements.forEach(function(submenuItem) {
                            submenuItem.style.transition = 'transform 0s, opacity 0s';
                            submenuItem.style.opacity = '0';
                            submenuItem.style.transform = 'scale(0)';
                        });

                        if (submenu) {
                            submenu.style.display = submenu.style.display === 'block' ? 'none' : 'block';
                            if (submenu.style.display === 'block') {
                                menuItem.style.borderBottom = '0px';
                                var submenuItems = submenu.querySelectorAll('.mobile_submenu-item');
                                submenuItems.forEach(function(submenuItem, index) {
                                    setTimeout(function() {
                                        submenuItem.style.display = 'block';
                                        submenuItem.style.transition = 'transform .5s cubic-bezier(0.4, 0.01, 0.165, 0.99), opacity .6s cubic-bezier(0.4, 0.01, 0.165, 0.99)';
                                        submenuItem.style.opacity = '1';
                                        submenuItem.style.transform = 'scale(1)';
                                    }, index * 50 + 100);
                                });
                            } else {
                                menuItem.style.borderBottom = '1px solid #333';
                            }
                        }
                    });
                });
            }
        });
    </script>

    <script>
        window.onscroll = function() {
            if (window.innerWidth > 768) {
                var navbar = document.getElementById('navbar');
                var placeholder = document.querySelector('.header-placeholder');
                var header = document.querySelector('.mainhead');
                if (window.pageYOffset > header.offsetHeight) {
                    navbar.classList.add('sticky');
                    placeholder.style.display = 'block';
                } else {
                    navbar.classList.remove('sticky');
                    placeholder.style.display = 'none';
                }
            }
        };
    </script>

  `);
})();