here is the html css and js fr a webpage i made

html

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Meta Tags and Title -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pay To Sagarawat Electricals</title>
    <meta name="title" content="Pay To Sagarawat Electricals">
    <meta name="description" content="UPI Payment Page - Scan and Pay Now!">
    <!-- Open Graph / Facebook Meta Tags -->
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://sagarawat.in/pay">
    <meta property="og:title" content="Pay To Sagarawat Electricals">
    <meta property="og:description" content="UPI Payment Page - Scan and Pay Now!">
    <meta property="og:image" content="https://sagarawat.in/assets/Pay%20Page%20Header.jpg">
    <!-- Twitter Meta Tags -->
    <meta property="twitter:card" content="summary_large_image">
    <meta property="twitter:url" content="https://sagarawat.in/pay">
    <meta property="twitter:title" content="Pay To Sagarawat Electricals">
    <meta property="twitter:description" content="UPI Payment Page - Scan and Pay Now!">
    <meta property="twitter:image" content="https://sagarawat.in/assets/Pay%20Page%20Header.jpg">
    <!-- Favicon -->
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&family=Poppins:wght@400;700&display=swap" rel="stylesheet">
    <!-- FontAwesome Icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
    <!-- External CSS -->
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <!-- Navigation -->
        <nav>
            <a href="/" class="logo">
                <img src="assets/HeaderLogo.svg" alt="Logo" loading="lazy">
            </a>
            <ul class="nav-menu">
                <li><a href="/">Home</a></li>
                <li><a href="/about">About</a></li>
                <li><a href="https://api.whatsapp.com/send/?phone=<PRESIDIO_ANONYMIZED_PHONE_NUMBER>">Contact</a></li>
            </ul>
            <div class="nav-toggle">
                <span></span>
                <span></span>
                <span></span>
            </div>
        </nav>
    </header>
    <main>
        <section class="hero">
            <div class="hero-content">
                <h1>Pay To Sagarawat Electricals</h1>
                <p>Click on the button below or scan the QR code to pay via UPI. All applications are supported!</p>
                <a href="#" id="upiPayLink" class="btn" target="_blank">Click To Pay!</a>
            </div>
            <div class="hero-image">
                <!-- UPI Apps Image -->
                <a href="#" id="upiAppsLink">
                    <img src="/assets/UPI.webp" alt="UPI Apps" loading="lazy" class="upi-apps-image">
                </a>
                <!-- QR Code Container -->
                <div id="qrcode-container">
                    <div id="qrcode"></div>
                </div>
                <a href="https://api.whatsapp.com/send/?phone=<PRESIDIO_ANONYMIZED_PHONE_NUMBER>" class="whatsapp-btn">
                    <i class="fab fa-whatsapp"></i> Contact us on WhatsApp
                </a>
            </div>
        </section>
    </main>
    <h4 style="text-align: center;">
        <a href="/bankdetails" style="text-decoration: none; color: #ff6600;">Click Here!</a>
        to Find Bank Details For RTGS/NEFT.
    </h4>
    <div class="footer-content">
        <hr>
        <div class="footer-content">
            <p>&copy; <span id="copyrightYear"></span> Sagarawat Electricals, 25-26 Dr.
                Bhabha Marg, Near Private Bus Stand, Neemuch M.P. - 458441 | Contact:
                7423220808, 7423452808</p>
        </div>
    </div>
    <!-- QRCode.js Library -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
    <!-- External JavaScript -->
    <script src="script.js"></script>
</body>
</html>



css

/* Global Styles */
body {
    font-family: 'Outfit', sans-serif;
    line-height: 1.6;
    background-color: #f2f2f7;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
}

img {
    max-width: 100%;
    height: auto;
}

h1, h2, h3 {
    font-family: 'Poppins', sans-serif;
}

/* Header Styles */
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    z-index: 999;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 10px;
}
nav {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}
.logo img {
    max-width: 200px;
    height: auto;
}
.nav-menu {
    list-style: none;
    display: flex;
    margin-left: auto;
    margin-right: 20px;
}
.nav-menu li {
    margin-right: 20px;
}
.nav-menu li a {
    text-decoration: none;
    color: #333;
    font-weight: 700;
    transition: color 0.3s ease;
}
.nav-menu li a:hover {
    color: #ff6600;
}
.nav-toggle {
    display: none;
}
.nav-toggle span {
    display: block;
    width: 25px;
    height: 3px;
    background-color: #333;
    margin-bottom: 5px;
}

/* Main Content Styles */
main {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Hero Section */
.hero {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 80px 20px;
    width: 100%;
    box-sizing: border-box;
}

.hero-content {
    max-width: 500px;
    text-align: center;
    margin-bottom: 40px;
}

.hero-content h1 {
    font-size: 36px;
    margin-bottom: 15px;
    line-height: 1.2;
    color: #333;
}

.hero-content p {
    font-size: 18px;
    margin-bottom: 20px;
    color: #555;
}

.btn {
    display: inline-block;
    padding: 12px 24px;
    background-color: #ff6600;
    color: #fff;
    text-decoration: none;
    border-radius: 50px;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.btn:hover {
    background-color: #e65c00;
}

/* Hero Image */
.hero-image {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-width: 400px;
}

/* Adjusted UPI Apps Image Styles */
.hero-image .upi-apps-image {
    max-width: 100%;
    height: auto;
    cursor: pointer;
    transition: transform 0.2s;
    margin-bottom: 0;
}

/* Adjusted Spacing Between Elements in .hero-image */
.hero-image > *:not(:last-child) {
    margin-bottom: 10px;
}

/* Adjustments for Desktop Screens */
@media (min-width: 769px) {
    .hero-image .upi-apps-image {
        margin-top: 20px;
        margin-bottom: 10px; 
    }

        /* Add top padding to main */
        main {
            padding-top: 50px;
        }
}

/* QR Code Styles */
#qrcode-container {
    padding: 15px;
    border: 4px solid #ff6600;
    border-radius: 20px;
    display: inline-block;
    margin: 0;
    background-color: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

#qrcode img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* WhatsApp Button */
.whatsapp-btn {
    display: inline-flex;
    align-items: center;
    padding: 12px 24px;
    background-color: #25d366;
    color: #fff;
    text-decoration: none;
    border-radius: 50px;
    font-weight: bold;
    transition: background-color 0.3s ease;
    margin-top: 20px;
}

.whatsapp-btn i {
    font-size: 1.5rem;
    margin-right: 8px;
}

.whatsapp-btn:hover {
    background-color: #1ebe5b;
}

/* Footer Styles */
.footer-content {
    text-align: center;
    padding: 10px;
    flex-shrink: 0;
    margin-top: auto;
}

.footer-content p {
    font-size: 14px;
    color: #777;
    margin: 0;
}

hr {
    border: none;
    border-top: 1px solid #ddd;
    margin: 0;
}

/* Responsive Adjustments */
/* Mobile Styles */
@media (max-width: 768px) {
    .nav-toggle {
        display: block;
        margin-left: auto;
        margin-right: 30px;
    }

    .nav-menu {
        display: none;
        flex-direction: column;
        align-items: flex-start;
        position: absolute;
        top: 70px;
        left: 0;
        width: 100%;
        background-color: #fff;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        padding: 20px;
    }

    .nav-menu.active {
        display: flex;
    }

    .nav-menu li {
        margin-right: 0;
        margin-bottom: 10px;
    }

    .hero {
        padding-top: 80px;
    }

    .hero-content {
        text-align: center;
    }

    .hero-image {
        margin-top: 30px;
    }
}

/* Desktop Styles */
@media (min-width: 769px) {
    .hero {
        padding: 60px 20px;
    }

    main {
        justify-content: space-between;
    }

    .hero {
        flex-direction: row;
        align-items: center;
    }

    .hero-content {
        max-width: 500px;
        text-align: left;
        margin-right: 20px;
    }

    .hero-image {
        max-width: 400px;
        margin-left: 20px;
    }
}


js

// Get the current year and update the copyright
const currentYear = new Date().getFullYear();
document.getElementById("copyrightYear").textContent = currentYear;

// Toggle mobile navigation
const navToggle = document.querySelector('.nav-toggle');
const navMenu = document.querySelector('.nav-menu');

navToggle.addEventListener('click', () => {
    navMenu.classList.toggle('active');
});

// Function to get the amount from the URL
function getAmountFromURL() {
    const queryString = window.location.search;

    // If there's no query string, return null
    if (!queryString) return null;

    // Extract the amount after the '?'
    const amountStr = decodeURIComponent(queryString.substring(1)).trim();

    // Validate the amount
    return !isNaN(amountStr) && amountStr !== '' ? amountStr : null;
}

// Function to generate the UPI URL
function generateUpiUrl(amount) {
    const baseUrl = 'upi://pay?pa=Q625192146@ybl&pn=SagarawatElectricals&mam=1';
    return amount ? `${baseUrl}&am=${encodeURIComponent(amount)}` : baseUrl;
}

// Function to generate the QR code
function generateQrCode(upiUrl) {
    // Clear any existing QR code
    document.getElementById('qrcode').innerHTML = '';

    // Generate new QR code
    new QRCode(document.getElementById('qrcode'), {
        text: upiUrl,
        width: 350,
        height: 350,
        colorDark: "#000000",
        colorLight: "#ffffff",
        correctLevel: QRCode.CorrectLevel.H
    });
}

// Main Execution Function
(function () {
    const amount = getAmountFromURL();
    const upiUrl = generateUpiUrl(amount);

    // Set the href attributes
    document.getElementById('upiPayLink').setAttribute('href', upiUrl);
    document.getElementById('upiAppsLink').setAttribute('href', upiUrl);

    // Generate the QR code
    generateQrCode(upiUrl);
})();




now in this make modificatioons to first fix a problem that on mobile screen the qr code is soo big that it is overlapping with the screen edge soo first please fix that and secnd the hamburger nav menu which appoears on mobile screen loks pretty old style so add nice animation to it and also stylize the dropdown which appres on pressibng the hamburger menu to look moore modern.