<?php
// Set the base URL for the website
$protocol = (isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] === 'on') ? 'https' : 'http';
$host = 'www.finggu.com'; // Hardcoded domain for production
$relativePath = '/';
$baseUrl = $protocol . '://' . $host;
?>
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0">
    <!-- Primary Meta Tags -->
    <meta name="description" content="<?php echo isset($pageDescription) ? $pageDescription : 'Finggu Infotech - Professional Web Design & Development Services in Mumbai. We specialize in creating stunning, high-performance websites and digital solutions.' ?>">
    <meta name="keywords" content="<?php echo isset($pageKeywords) ? $pageKeywords : 'web design, web development, digital marketing, SEO, ecommerce, mobile apps, website development company, web design services, responsive web design, ecommerce development' ?>">
    <link rel="canonical" href="<?php echo $protocol . '://' . $host . $_SERVER['REQUEST_URI']; ?>" />
    <meta name="robots" content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1">
    <meta name="author" content="Finggu Infotech">
    <meta name="publisher" content="Finggu Infotech">
    <meta name="theme-color" content="#EF4444">
    <?php
        // Build a consistent page title without duplicating the site name
        $siteSuffix = ' | Finggu Infotech';
        if (isset($pageTitle)) {
            $computedTitle = stripos($pageTitle, 'Finggu Infotech') === false
                ? ($pageTitle . $siteSuffix)
                : $pageTitle;
        } else {
            $computedTitle = 'Finggu Infotech | Web Design & Development Company in Mumbai';
        }
    ?>
    
    <!-- Open Graph / Facebook -->
    <meta property="og:locale" content="en_US" />
    <meta property="og:type" content="website" />
    <meta property="og:title" content="<?php echo htmlspecialchars($computedTitle); ?>" />
    <meta property="og:description" content="<?php echo isset($pageDescription) ? $pageDescription : 'Professional web design and development services to grow your business online. We create stunning, high-performance websites and digital solutions.'; ?>" />
    <meta property="og:url" content="<?php echo $protocol . '://' . $host . $_SERVER['REQUEST_URI']; ?>" />
    <meta property="og:site_name" content="Finggu Infotech" />
    <meta property="og:image" content="<?php echo $baseUrl; ?>/assets/images/hero.png" />
    <meta property="og:image:secure_url" content="https://www.finggu.com/assets/images/hero.png" />
    <meta property="og:image:width" content="1200" />
    <meta property="og:image:height" content="630" />
    <meta property="og:image:alt" content="<?php echo isset($pageTitle) ? $pageTitle : 'Finggu Infotech - Web Design & Development'; ?>" />
    
    <!-- Twitter Card -->
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:title" content="<?php echo htmlspecialchars($computedTitle); ?>" />
    <meta name="twitter:description" content="<?php echo isset($pageDescription) ? $pageDescription : 'Professional web design and development services to grow your business online.'; ?>" />
    <meta name="twitter:image" content="<?php echo $baseUrl; ?>/assets/images/hero.png" />
    <meta name="twitter:image:src" content="https://www.finggu.com/assets/images/hero.png" />
    
    <!-- Favicon -->
    <link rel="icon" type="image/png" sizes="32x32" href="<?php echo $baseUrl; ?>/assets/images/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="<?php echo $baseUrl; ?>/assets/images/favicon-16x16.png">
    <link rel="apple-touch-icon" sizes="180x180" href="<?php echo $baseUrl; ?>/assets/images/apple-touch-icon.png">
    <link rel="mask-icon" href="<?php echo $baseUrl; ?>/assets/images/safari-pinned-tab.svg" color="#EF4444">
    <meta name="msapplication-TileColor" content="#EF4444">
    
    <!-- Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-X3FMMYJZRF"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
      gtag('config', 'G-X3FMMYJZRF');
      
      // Enhanced ecommerce tracking (example - customize based on your needs)
      gtag('set', 'user_properties', {
        'page_title': '<?php echo isset($pageTitle) ? addslashes($pageTitle) : "Home"; ?>',
        'page_path': '<?php echo addslashes($_SERVER['REQUEST_URI']); ?>'
      });
    </script>
    
    <!-- Google Tag Manager -->
    <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-W58RFQB2');
    </script>
    <!-- End Google Tag Manager -->
    
    <!-- Page Title -->
    <title><?php echo htmlspecialchars($computedTitle); ?></title>
    <base href="<?php echo $baseUrl; ?>/" />

    <!-- Favicon -->
    <link rel="icon" type="image/png" href="<?php echo $baseUrl; ?>/assets/images/favicon.png">
    <link rel="apple-touch-icon" href="<?php echo $baseUrl; ?>/assets/images/favicon.png">
    
    <!-- Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    
    <!-- Structured Data / Schema.org -->
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "ProfessionalService",
      "name": "Finggu Infotech",
      "image": "https://www.finggu.com/assets/images/hero-image.jpg",
      "@id": "https://www.finggu.com",
      "url": "https://www.finggu.com",
      "telephone": "+91-8655442429",
      "priceRange": "$$",
      "address": {
        "@type": "PostalAddress",
        "streetAddress": "Your Street Address",
        "addressLocality": "Mumbai",
        "postalCode": "400001",
        "addressCountry": "IN"
      },
      "geo": {
        "@type": "GeoCoordinates",
        "latitude": 19.0760,
        "longitude": 72.8777
      },
      "openingHoursSpecification": {
        "@type": "OpeningHoursSpecification",
        "dayOfWeek": [
          "Monday",
          "Tuesday",
          "Wednesday",
          "Thursday",
          "Friday",
          "Saturday"
        ],
        "opens": "09:00",
        "closes": "18:00"
      },
      "sameAs": [
        "https://www.facebook.com/fingguinfotech",
        "https://www.linkedin.com/company/finggu-infotech",
        "https://twitter.com/fingguinfotech"
      ]
    }
    </script>
    
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Structured Data / JSON-LD -->
    <script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@type": "ProfessionalService",
        "name": "Finggu Infotech",
        "url": "https://finggu.com",
        "logo": "<?php echo $baseUrl; ?>/assets/images/logo.png",
        "description": "Leading web design and development company in Mumbai offering professional digital solutions for businesses of all sizes.",
        "address": {
            "@type": "PostalAddress",
            "streetAddress": "A-402, Channur Bhavan CHS., Ghanshyam Near Station",
            "addressLocality": "Dombivali West",
            "addressRegion": "Maharashtra",
            "postalCode": "421202",
            "addressCountry": "IN"
        },
        "geo": {
            "@type": "GeoCoordinates",
            "latitude": "19.2183",
            "longitude": "73.0856"
        },
        "openingHoursSpecification": [{
            "@type": "OpeningHoursSpecification",
            "dayOfWeek": [
                "Monday",
                "Tuesday",
                "Wednesday",
                "Thursday",
                "Friday",
                "Saturday"
            ],
            "opens": "10:00",
            "closes": "19:00"
        }],
        "telephone": "+918655442429",
        "priceRange": "$$",
        "sameAs": [
            "https://www.facebook.com/fingguinfotech",
            "https://twitter.com/fingguinfotech",
            "https://www.instagram.com/fingguinfotech",
            "https://www.linkedin.com/company/finggu-infotech"
        ]
    }
    </script>
    
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#FF0000',
                        'primary-dark': '#CC0000',
                        accent: '#43CBF5',
                        dark: '#1A1A1A',
                    },
                    fontFamily: {
                        sans: ['Inter', 'sans-serif'],
                    },
                }
            },
            variants: {
                extend: {
                    opacity: ['disabled'],
                    cursor: ['disabled'],
                },
            },
        }
    </script>
    
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <!-- Custom CSS -->
    <link rel="stylesheet" href="<?php echo $baseUrl; ?>/assets/css/main.css">
    
    <!-- Dropdown Menu JavaScript -->
    <script src="<?php echo $baseUrl; ?>/assets/js/dropdown.js"></script>
    
    <!-- Floating Buttons (Scroll to Top & WhatsApp) -->
    <script src="<?php echo $baseUrl; ?>/assets/js/floating-buttons.js"></script>
    
    <!-- Custom styles -->
    <style>
        /* Smooth scrolling */
        html {
            scroll-behavior: smooth;
        }
        
        /* Custom scrollbar */
        ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }
        
        ::-webkit-scrollbar-track {
            background: #f1f1f1;
        }
        
        ::-webkit-scrollbar-thumb {
            background: #888;
            border-radius: 4px;
        }
        
        ::-webkit-scrollbar-thumb:hover {
            background: #555;
        }
        
        /* Animation for floating elements */
        @keyframes float {
            0%, 100% {
                transform: translateY(0);
            }
            50% {
                transform: translateY(-10px);
            }
        }
        
        .float-animation {
            animation: float 6s ease-in-out infinite;
        }
        
        /* Custom styles for better mobile experience */
        @media (max-width: 640px) {
            .hero-content {
                padding-top: 2rem;
            }
        }
    </style>
</head>
    <!-- Google Tag Manager (noscript) -->
    <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-W58RFQB2"
    height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
    <!-- End Google Tag Manager (noscript) -->
    
    <!-- Skip to main content for better accessibility -->
    <a href="#main-content" class="skip-link sr-only focus:not-sr-only focus:fixed focus:top-0 focus:left-0 focus:z-50 focus:bg-white focus:px-4 focus:py-2 focus:text-red-600">Skip to main content</a>
    
    <body class="font-sans antialiased text-gray-800 bg-white">
    <div id="main-content" tabindex="-1">
<!-- Header Component -->
<header class="fixed w-full bg-white/80 backdrop-blur-sm shadow-sm z-50 transition-all duration-300" id="main-header">
    <div class="container mx-auto px-4">
        <div class="flex items-center justify-between h-20">
            <!-- Logo -->
            <a href="<?php echo $baseUrl; ?>" class="flex items-center h-16">
                <img 
                    src="<?php echo $baseUrl; ?>/assets/images/logo.png" 
                    alt="Finggu Infotech - Web Design & Development" 
                    class="h-full w-auto object-contain"
                    width="180"
                    height="64"
                    loading="eager"
                >
            </a>

            <!-- Desktop Navigation -->
            <nav class="hidden md:flex items-center space-x-6 lg:space-x-8">
                <a href="<?php echo $baseUrl; ?>" class="font-medium hover:text-red-600 transition-colors text-gray-800">Home</a>
                <a href="<?php echo $baseUrl; ?>/about.php" class="font-medium hover:text-red-600 transition-colors text-gray-800">About</a>
                <!-- Services Dropdown -->
                <div class="relative group" id="services-dropdown" onmouseover="document.getElementById('services-menu').classList.add('opacity-100', 'pointer-events-auto', 'translate-y-0')" onmouseleave="document.getElementById('services-menu').classList.remove('opacity-100', 'pointer-events-auto', 'translate-y-0')">
                    <button class="flex items-center font-medium hover:text-red-600 transition-colors text-gray-800 focus:outline-none"
                            aria-haspopup="true"
                            aria-expanded="false"
                            id="services-menu-button">
                        <span>Services</span>
                        <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                        </svg>
                    </button>
                    <div id="services-menu" class="absolute left-0 pt-2 w-64 bg-white rounded-md shadow-lg py-2 z-50 opacity-0 pointer-events-none transform -translate-y-2 transition-all duration-200 ease-in-out"
                         role="menu"
                         aria-orientation="vertical"
                         aria-labelledby="services-menu-button"
                         style="top: 50%;"
                         onmouseover="this.classList.add('opacity-100', 'pointer-events-auto', 'translate-y-0')"
                         onmouseleave="setTimeout(() => { this.classList.remove('opacity-100', 'pointer-events-auto', 'translate-y-0') }, 200)">
                        <a href="<?php echo $baseUrl; ?>/services.php" class="block px-4 py-2 text-gray-800 hover:bg-gray-100">All Services</a>
                        <div class="border-t border-gray-100 my-1"></div>
                        <a href="<?php echo $baseUrl; ?>/services/web-design.php" class="block px-4 py-2 text-gray-800 hover:bg-gray-100">Web Design</a>
                        <a href="<?php echo $baseUrl; ?>/services/web-development.php" class="block px-4 py-2 text-gray-800 hover:bg-gray-100">Web Development</a>
                        <a href="<?php echo $baseUrl; ?>/services/ecommerce.php" class="block px-4 py-2 text-gray-800 hover:bg-gray-100">E-commerce Solutions</a>
                        <a href="<?php echo $baseUrl; ?>/services/seo.php" class="block px-4 py-2 text-gray-800 hover:bg-gray-100">SEO Services</a>
                        <a href="<?php echo $baseUrl; ?>/services/mobile-apps.php" class="block px-4 py-2 text-gray-800 hover:bg-gray-100">Mobile App Development</a>
                        <a href="<?php echo $baseUrl; ?>/services/digital-marketing.php" class="block px-4 py-2 text-gray-800 hover:bg-gray-100">Digital Marketing</a>
                    </div>
                </div>
                <a href="<?php echo $baseUrl; ?>/portfolio.php" class="font-medium hover:text-red-600 transition-colors text-gray-800">Portfolio</a>
                <a href="<?php echo $baseUrl; ?>/testimonials.php" class="font-medium hover:text-red-600 transition-colors text-gray-800">Testimonials</a>
                <a href="<?php echo $baseUrl; ?>/contact.php" class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-md transition-colors font-medium">Contact Us</a>
            </nav>

            <!-- Mobile Menu Button -->
            <button id="mobile-menu-button" class="md:hidden text-gray-800 focus:outline-none p-2 -mr-2" aria-label="Toggle menu" aria-expanded="false" aria-controls="mobile-menu">
                <span class="sr-only">Open main menu</span>
                <svg id="menu-open" class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path>
                </svg>
                <svg id="menu-close" class="w-8 h-8 hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                </svg>
            </button>
        </div>
    </div>

    <!-- Mobile Menu -->
    <div id="mobile-menu" class="md:hidden hidden bg-white shadow-lg absolute w-full left-0 right-0 transition-all duration-300 ease-in-out transform -translate-y-full" style="top: 80px; max-height: calc(100vh - 80px); overflow-y: auto;">
        <div class="container mx-auto px-4 py-2">
            <nav class="flex flex-col space-y-1 py-2">
                <a href="<?php echo $baseUrl; ?>" class="flex items-center py-3 px-4 rounded-md hover:bg-gray-100 text-gray-800 font-medium">
                    <i class="fas fa-home w-6 text-center mr-3 text-red-600"></i>
                    <span>Home</span>
                </a>
                <a href="<?php echo $baseUrl; ?>/about.php" class="flex items-center py-3 px-4 rounded-md hover:bg-gray-100 text-gray-800 font-medium">
                    <i class="fas fa-info-circle w-6 text-center mr-3 text-red-600"></i>
                    <span>About</span>
                </a>
                <!-- Mobile Services Dropdown Trigger -->
                <div class="mobile-services-dropdown">
                    <button class="flex items-center justify-between w-full py-3 px-4 rounded-md hover:bg-gray-100 text-gray-800 font-medium">
                        <div class="flex items-center">
                            <i class="fas fa-cogs w-6 text-center mr-3 text-red-600"></i>
                            <span>Services</span>
                        </div>
                        <svg class="w-4 h-4 transform transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                        </svg>
                    </button>
                    <!-- Mobile Services Dropdown Content -->
                    <div class="mobile-dropdown-content hidden pl-10 mt-1">
                        <a href="<?php echo $baseUrl; ?>/services.php" class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 rounded">All Services</a>
                        <a href="<?php echo $baseUrl; ?>/services/web-design.php" class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 rounded">Web Design</a>
                        <a href="<?php echo $baseUrl; ?>/services/web-development.php" class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 rounded">Web Development</a>
                        <a href="<?php echo $baseUrl; ?>/services/ecommerce.php" class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 rounded">E-commerce Solutions</a>
                        <a href="<?php echo $baseUrl; ?>/services/seo.php" class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 rounded">SEO Services</a>
                        <a href="<?php echo $baseUrl; ?>/services/mobile-apps.php" class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 rounded">Mobile Apps</a>
                        <a href="<?php echo $baseUrl; ?>/services/digital-marketing.php" class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 rounded">Digital Marketing</a>
                    </div>
                </div>
                <a href="<?php echo $baseUrl; ?>/portfolio.php" class="flex items-center py-3 px-4 rounded-md hover:bg-gray-100 text-gray-800 font-medium">
                    <i class="fas fa-briefcase w-6 text-center mr-3 text-red-600"></i>
                    <span>Portfolio</span>
                </a>
                <a href="<?php echo $baseUrl; ?>/testimonials.php" class="flex items-center py-3 px-4 rounded-md hover:bg-gray-100 text-gray-800 font-medium">
                    <i class="fas fa-quote-left w-6 text-center mr-3 text-red-600"></i>
                    <span>Testimonials</span>
                </a>
                <a href="<?php echo $baseUrl; ?>/contact.php" class="flex items-center justify-center py-3 px-4 rounded-md bg-red-600 text-white font-medium hover:bg-red-700 mt-2">
                    <i class="fas fa-envelope w-6 text-center mr-2"></i>
                    <span>Contact Us</span>
                </a>
            </nav>
        </div>
    </div>
</header>

<!-- Backdrop for mobile menu -->
<div id="mobile-backdrop" class="fixed inset-0 bg-black bg-opacity-50 z-40 hidden transition-opacity duration-300"></div>

<!-- Page content wrapper (to push content below fixed header) -->
<div class="pt-20">
<!-- End of Header Component -->

<script>
// Mobile menu toggle functionality
document.addEventListener('DOMContentLoaded', function() {
    const mobileMenuButton = document.getElementById('mobile-menu-button');
    const mobileMenu = document.getElementById('mobile-menu');
    const mobileBackdrop = document.getElementById('mobile-backdrop');
    const menuOpenIcon = document.getElementById('menu-open');
    const menuCloseIcon = document.getElementById('menu-close');
    
    // Mobile services dropdown toggle
    const mobileServiceButtons = document.querySelectorAll('.mobile-services-dropdown button');
    mobileServiceButtons.forEach(button => {
        button.addEventListener('click', function() {
            const content = this.nextElementSibling;
            const isExpanded = this.getAttribute('aria-expanded') === 'true';
            
            // Toggle the dropdown content
            content.classList.toggle('hidden');
            this.setAttribute('aria-expanded', !isExpanded);
            
            // Rotate the arrow icon
            const icon = this.querySelector('svg');
            icon.classList.toggle('rotate-180');
            
            // Close other open dropdowns
            mobileServiceButtons.forEach(otherButton => {
                if (otherButton !== button) {
                    otherButton.nextElementSibling.classList.add('hidden');
                    otherButton.setAttribute('aria-expanded', 'false');
                    otherButton.querySelector('svg').classList.remove('rotate-180');
                }
            });
        });
    });
    
    function toggleMobileMenu() {
        const isOpening = mobileMenu.classList.contains('hidden');
        
        // Toggle menu visibility with animation
        if (isOpening) {
            mobileMenu.classList.remove('hidden');
            mobileMenu.style.opacity = '0';
            mobileMenu.style.transform = 'translateY(-10px)';
            
            // Force reflow to enable transition
            mobileMenu.offsetHeight;
            
            mobileMenu.style.opacity = '1';
            mobileMenu.style.transform = 'translateY(0)';
            mobileMenu.style.transition = 'opacity 0.2s ease-out, transform 0.2s ease-out';
        } else {
            mobileMenu.style.opacity = '0';
            mobileMenu.style.transform = 'translateY(-10px)';
            mobileMenu.style.transition = 'opacity 0.2s ease-out, transform 0.2s ease-out';
            
            // Hide after animation completes
            setTimeout(() => {
                mobileMenu.classList.add('hidden');
            }, 200);
        }
        
        // Toggle backdrop and icons
        mobileBackdrop.classList.toggle('hidden');
        menuOpenIcon.classList.toggle('hidden');
        menuCloseIcon.classList.toggle('hidden');
        
        // Toggle body scroll
        document.body.style.overflow = isOpening ? 'hidden' : 'auto';
        
        // Update aria-expanded attribute
        mobileMenuButton.setAttribute('aria-expanded', isOpening ? 'true' : 'false');
    }
    
    // Toggle menu on button click
    mobileMenuButton.addEventListener('click', (e) => {
        e.preventDefault();
        e.stopPropagation();
        toggleMobileMenu();
    });
    
    // Close menu when clicking on backdrop
    mobileBackdrop.addEventListener('click', toggleMobileMenu);
    
    // Close menu when clicking on a menu item
    const menuItems = mobileMenu.querySelectorAll('a');
    menuItems.forEach(item => {
        item.addEventListener('click', () => {
            if (window.innerWidth < 768) {
                toggleMobileMenu();
            }
        });
    });
    
    // Close menu when pressing Escape key
    document.addEventListener('keydown', (e) => {
        if (e.key === 'Escape' && !mobileMenu.classList.contains('hidden')) {
            toggleMobileMenu();
        }
    });
    
    // Close menu when window is resized to desktop
    function handleResize() {
        if (window.innerWidth >= 768) {
            mobileMenu.classList.add('hidden');
            mobileBackdrop.classList.add('hidden');
            menuOpenIcon.classList.remove('hidden');
            menuCloseIcon.classList.add('hidden');
            document.body.style.overflow = 'auto';
            mobileMenuButton.setAttribute('aria-expanded', 'false');
        }
    }
    
    window.addEventListener('resize', handleResize);
});
</script>
