EXACT INSERTION INSTRUCTIONS
=============================

INSERTION #1: Learn More Modal HTML
------------------------------------

FIND THIS (around line 5041):
<script src="<?php echo $baseURL; ?>scripts/preview_modals.js"></script>
</body>
</html>

INSERT THE MODAL HTML BETWEEN preview_modals.js AND </body>:
<script src="<?php echo $baseURL; ?>scripts/preview_modals.js"></script>

<!-- Learn More Info Modal -->
<div id="learnMoreModal" class="lfl-modal-overlay lfl-info-modal">
    <div class="lfl-modal">
        <div class="lfl-modal-header">
            <h2>About the "Learn More" Button</h2>
            <button class="lfl-modal-close" onclick="closeLearnMoreModal()">&times;</button>
        </div>
        <div class="lfl-modal-body" style="text-align: center; padding: 40px 30px;">
            <div style="font-size: 48px; margin-bottom: 20px;">ℹ️</div>
            <h3 style="color: #2c3e50; font-size: 22px; margin-bottom: 16px;">This is a Demo Preview</h3>
            <p style="color: #475569; font-size: 16px; line-height: 1.6; margin-bottom: 24px;">
                In a production website, the <strong>"Learn More"</strong> button will display detailed information about the selected service or take you to a dedicated page that fully describes the service, pricing, and options.
            </p>
            <p style="color: #64748b; font-size: 14px; font-style: italic;">
                This preview focuses on showing you the design and layout. The full functionality would be implemented in your live site.
            </p>
        </div>
        <div class="lfl-modal-footer">
            <button class="lfl-modal-button" onclick="closeLearnMoreModal()">Got It</button>
        </div>
    </div>
</div>

</body>
</html>


INSERTION #2: JavaScript for Mobile Menu & Learn More
------------------------------------------------------

FIND THIS (around line 5034):
			})();
			</script>
<script src="https://kit.fontawesome.com/2274634b67.js" async></script>
<script src="<?php echo $baseURL; ?>scripts/jquery.js"></script>

INSERT THE NEW SCRIPT BETWEEN })(); AND fontawesome:
			})();
			</script>

<script>
// ===================================================================
// MOBILE HAMBURGER MENU FUNCTIONALITY
// ===================================================================
(function() {
    // Wait for DOM to load
    function initMobileMenu() {
        var toggleButton = document.querySelector('.page-toggle-menu');
        var closeButton = document.querySelector('.page-close-menu');
        var navbar = document.querySelector('.page-navbar');
        var navLinks = document.querySelectorAll('.page-navbar .lfl-nav-item');
        
        if (!toggleButton || !navbar) {
            console.log('Mobile menu elements not found');
            return;
        }
        
        // Open menu
        toggleButton.addEventListener('click', function(e) {
            e.preventDefault();
            navbar.classList.add('show-menu');
            document.body.style.overflow = 'hidden'; // Prevent background scroll
        });
        
        // Close menu
        if (closeButton) {
            closeButton.addEventListener('click', function(e) {
                e.preventDefault();
                navbar.classList.remove('show-menu');
                document.body.style.overflow = 'auto';
            });
        }
        
        // Close menu when clicking nav links and scroll to section
        navLinks.forEach(function(link) {
            link.addEventListener('click', function(e) {
                var href = this.getAttribute('href');
                
                // Close menu
                navbar.classList.remove('show-menu');
                document.body.style.overflow = 'auto';
                
                // Handle anchor link scrolling
                if (href && href.indexOf('#') === 0) {
                    e.preventDefault();
                    var targetId = href.substring(1);
                    var targetElement = document.getElementById(targetId);
                    
                    if (targetElement) {
                        // Smooth scroll to target
                        targetElement.scrollIntoView({
                            behavior: 'smooth',
                            block: 'start'
                        });
                        
                        // Update URL without jumping
                        history.pushState(null, null, href);
                    }
                }
            });
        });
        
        // Close menu when clicking outside
        navbar.addEventListener('click', function(e) {
            if (e.target === navbar) {
                navbar.classList.remove('show-menu');
                document.body.style.overflow = 'auto';
            }
        });
    }
    
    // Initialize when DOM is ready
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initMobileMenu);
    } else {
        initMobileMenu();
    }
})();

// ===================================================================
// LEARN MORE BUTTON FUNCTIONALITY
// ===================================================================

// Show Learn More modal
function showLearnMoreModal() {
    var modal = document.getElementById('learnMoreModal');
    if (modal) {
        modal.classList.add('active');
        document.body.style.overflow = 'hidden';
    }
}

// Close Learn More modal
function closeLearnMoreModal() {
    var modal = document.getElementById('learnMoreModal');
    if (modal) {
        modal.classList.remove('active');
        document.body.style.overflow = 'auto';
    }
}

// Attach Learn More handlers to all Learn More buttons
(function() {
    function initLearnMoreButtons() {
        // Find all buttons with "Learn More" text
        var allButtons = document.querySelectorAll('a[href="javascript:void(0);"]');
        
        allButtons.forEach(function(button) {
            var buttonText = button.textContent || button.innerText;
            if (buttonText.indexOf('Learn More') !== -1) {
                button.addEventListener('click', function(e) {
                    e.preventDefault();
                    showLearnMoreModal();
                });
            }
        });
    }
    
    // Initialize when DOM is ready
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initLearnMoreButtons);
    } else {
        initLearnMoreButtons();
    }
})();

// Close modal when clicking outside
document.addEventListener('click', function(e) {
    var modal = document.getElementById('learnMoreModal');
    if (modal && e.target === modal) {
        closeLearnMoreModal();
    }
});

// Close modal with ESC key
document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') {
        closeLearnMoreModal();
    }
});
</script>

<script src="https://kit.fontawesome.com/2274634b67.js" async></script>
<script src="<?php echo $baseURL; ?>scripts/jquery.js"></script>


FINAL FILE STRUCTURE:
=====================

Line ~5033:     })();
Line ~5034:     </script>
                
                <!-- NEW SCRIPT BLOCK GOES HERE -->
                
Line ~5035:     <script src="https://kit.fontawesome.com/...
Line ~5036:     <script src="<?php echo $baseURL; ?>scripts/jquery.js"></script>
Line ~5037:     <script src="<?php echo $baseURL; ?>scripts/lazyload.min.js"></script>
Line ~5038:     <script src="https://apis.google.com/js/platform.js"></script>
Line ~5039:     <script src="<?php echo $baseURL; ?>scripts/global2.js?v=5.0.6"></script>
Line ~5040:     <script src="<?php echo $baseURL; ?>scripts/faq-accordion.js"></script>
Line ~5041:     <script src="<?php echo $baseURL; ?>scripts/preview_modals.js"></script>
                
                <!-- LEARN MORE MODAL HTML GOES HERE -->
                
Line ~5042:     </body>
Line ~5043:     </html>


VERIFICATION CHECKLIST:
=======================

After editing, verify:
□ No duplicate <script> tags
□ All opening tags have closing tags
□ JavaScript is inside <script></script>
□ HTML modal is NOT inside <script> tags
□ Modal HTML is BEFORE </body>
□ JavaScript is AFTER automation script, BEFORE fontawesome
□ Preview.php still loads without PHP errors
□ View page source - modal HTML visible
□ View page source - JavaScript visible
□ Browser console shows no errors


QUICK VERIFICATION:
===================

1. Search for "learnMoreModal" in preview.php
   Should find: <div id="learnMoreModal"
   
2. Search for "initMobileMenu" in preview.php
   Should find: function initMobileMenu() {
   
3. Search for "showLearnMoreModal" in preview.php
   Should find: function showLearnMoreModal() {

4. Count <script> tags at end of file
   Should have: 7 script tags total
   - Automation buttons script
   - NEW mobile menu + learn more script
   - fontawesome
   - jquery
   - lazyload
   - google platform
   - global2
   - faq-accordion
   - preview_modals

5. Count <div id="...Modal"> in file
   Should have: 3 modals
   - welcomeModal
   - exitModal
   - learnMoreModal (NEW)


COMMON MISTAKES TO AVOID:
==========================

❌ Putting JavaScript inside modal HTML
❌ Putting modal HTML inside <script> tag
❌ Missing closing </script> tag
❌ Adding script AFTER </body> tag
❌ Duplicate function names
❌ Forgetting to save file after editing
❌ Not refreshing browser cache after saving


IF SOMETHING BREAKS:
====================

1. Check PHP errors:
   - Look at page in browser
   - Any "Parse error" or "Syntax error"?
   - Check line number in error message

2. Check JavaScript errors:
   - F12 → Console tab
   - Any red errors?
   - Look for line numbers

3. Verify file saved:
   - Re-open preview.php
   - Search for "learnMoreModal"
   - If not found, file didn't save

4. Clear browser cache:
   - Hard refresh: Ctrl+F5
   - Or clear cache in settings

5. Test on desktop first:
   - Easier to debug
   - Check console for errors
   - Then test on mobile