From 088bd8b9474fcb9b1be8ddc2671a61a1fec86603 Mon Sep 17 00:00:00 2001
From: Vansh Garg <vanshgarg0706@gmail.com>
Date: Sun, 10 Nov 2024 14:40:23 +0530
Subject: [PATCH] Mismanagement of Footer Resolved

---
 index.html | 797 +++++++++++++++++++++++++++++++++--------------------
 1 file changed, 500 insertions(+), 297 deletions(-)

diff --git a/index.html b/index.html
index 7e2d621c..98ba2297 100644
--- a/index.html
+++ b/index.html
@@ -4740,27 +4740,28 @@ <h3 class="card-heading">Eigen Value and Vector Calculator</h3>
     <!--============================== End =========================================== -->
 
     <button id="scrollToTopBtn" title="Go to top"><i class="ri-arrow-up-double-fill"></i></button>
-
-    <div>
+    <div class="feedback-form">
 
         <section id="feedback">
             <div class="container">
                 <h2>We Value Your Feedback!</h2>
                 <p>Your input helps us improve our services. Please share your thoughts with us below.</p>
                 <form id="feedbackForm">
+
                     <div class="form-group">
                         <label for="name">Name</label>
                         <input type="text" id="name" name="name" placeholder="Your Name" required pattern="[a-zA-Z ]+"
                             oninvalid="this.setCustomValidity('Numbers and Symbols are not allowed')"
                             oninput="this.setCustomValidity('')">
                     </div>
-    
+
+
                     <div class="form-group">
                         <label for="email">Email</label>
                         <input type="email" id="email" name="email" placeholder="Your Email" required>
                     </div>
 
-                  
+        
         <div class="form-group">
           <label for="rating"></label>
           
@@ -4777,12 +4778,36 @@ <h2>We Value Your Feedback!</h2>
             <label for="feedback-content">Your Feedback</label>
             <textarea id="feedback-content" name="feedback" rows="5" placeholder="Tell us about your experience..." required></textarea>
           </div>
+    
+        <style>
+            .stars {
+               
+                cursor: pointer;
+                font-size: 2rem;
+                color: gray;
+            }
+            .star {
+                transition: color 0.2s;
+            }
+            .star.selected {
+                color: gold;
+            }
+        </style>
         
        <script>document.addEventListener("DOMContentLoaded", () => {
         const stars = document.querySelectorAll(".star");
         const ratingValue = document.getElementById("rating-value");
         let selectedRating = 0;
-
+    
+        stars.forEach(star => {
+            star.addEventListener("mouseover", () => highlightStars(star.dataset.value));
+            star.addEventListener("mouseout", () => highlightStars(selectedRating));
+            star.addEventListener("click", () => {
+                selectedRating = star.dataset.value;
+                ratingValue.innerText = `Rating: ${selectedRating}`;
+            });
+        });
+    
         function highlightStars(rating) {
             stars.forEach(star => {
                 star.classList.toggle("selected", star.dataset.value <= rating);
@@ -4794,85 +4819,34 @@ <h2>We Value Your Feedback!</h2>
 
     </script>
 
+
+
                     <button type="submit">Submit Feedback</button>
                 </form>
             </div>
         </section>
     </div>
-    
-    <style>
-        .stars {
-            cursor: pointer;
-            font-size: 2rem;
-            color: gray;
-        }
-        .star {
-            transition: color 0.2s;
-        }
-        .star.selected {
-            color: gold;
-        }
-    </style>
-    
     <script>
-        // JavaScript for star rating interaction
-        document.addEventListener("DOMContentLoaded", () => {
-            const stars = document.querySelectorAll(".star");
-            const ratingValue = document.getElementById("rating-value");
-            let selectedRating = 0;
+        document.getElementById('feedbackForm').addEventListener('submit', function(event) {
+            // Prevent the default form submission behavior
+            event.preventDefault();
     
-            stars.forEach(star => {
-                star.addEventListener("mouseover", () => highlightStars(star.dataset.value));
-                star.addEventListener("mouseout", () => highlightStars(selectedRating));
-                star.addEventListener("click", () => {
-                    selectedRating = star.dataset.value;
-                    ratingValue.innerText = `Rating: ${selectedRating}`;
-                });
-            });
+            // Show an alert message
+            alert('Your feedback has been submitted! Thank you!');
     
-            function highlightStars(rating) {
-                stars.forEach(star => {
-                    star.classList.toggle("selected", star.dataset.value <= rating);
-                });
-            }
+            // clear the form fields after submission
+            document.getElementById('name').value = '';
+            document.getElementById('email').value = '';
+            document.getElementById('feedback').value = '';
+            document.getElementById('rating').selectedIndex = 0; // Reset the rating dropdown
+            document.getElementById("rating-value").innerText = "Rating: 0"; // Reset the rating display
+            // Reset star selection
+        const stars = document.querySelectorAll(".star");
+        stars.forEach(star => {
+            star.classList.remove("selected");
         });
-    </script>
-    
-    <script>
-        // JavaScript for form submission and clearing fields
-        document.addEventListener('DOMContentLoaded', function () {
-            document.getElementById('feedbackForm').addEventListener('submit', function(event) {
-                event.preventDefault();
-    
-                // Show an alert message
-                alert('Your feedback has been submitted! Thank you!');
-    
-                // Clear form fields after submission
-                const nameField = document.getElementById('name');
-                const emailField = document.getElementById('email');
-                const feedbackField = document.getElementById('userFeedback'); // Updated ID
-                const ratingValueDisplay = document.getElementById("rating-value");
-    
-                if (nameField && emailField && feedbackField && ratingValueDisplay) {
-                    nameField.value = '';
-                    emailField.value = '';
-                    feedbackField.value = ''; // Clear feedback field
-                    ratingValueDisplay.innerText = "Rating: 0";
-                    console.log('Form fields cleared');
-                } else {
-                    console.error('One or more form elements were not found.');
-                }
-    
-                // Reset star selection
-                const stars = document.querySelectorAll(".star");
-                stars.forEach(star => {
-                    star.classList.remove("selected");
-                });
-            });
         });
     </script>
-
-    
     <style>
         /* Feedback Form Section */
         #feedback {
@@ -4885,6 +4859,34 @@ <h2>We Value Your Feedback!</h2>
             color: black;
         }
 
+
+        /* Dark theme of the Fedback Section */
+        [data-theme="dark"] .feedback-form input,
+        [data-theme="dark"] .feedback-form textarea,
+        [data-theme="dark"] .form-group textarea
+        [data-theme="dark"] .form-group #feedback-content{
+            background-color:#000327;
+            color:white;
+        }
+        
+        [data-theme="dark"] #feedback{
+            background:#000327;
+            border-top:1px solid #333;
+        }
+
+        [data-theme="dark"] .dark-change{
+            color:white !important;;
+            background-color: #000327;
+        }
+
+        [data-theme="dark"] .quickLinks{
+            color:white !important;;
+            background-color: #000327;
+        }
+
+
+
+
         #feedback h2 {
             font-size: 2rem;
             margin-bottom: 10px;
@@ -4959,10 +4961,8 @@ <h2>We Value Your Feedback!</h2>
         }
     </style>
 
-    <!-- Footer -->
-    <footer>
+    <!-- <footer>
         <div class="footer-content">
-            <!-- Quick Links Section -->
             <div class="footer-section quick-links">
                 <h3>Quick Links</h3>
                 <ul>
@@ -4973,12 +4973,10 @@ <h3>Quick Links</h3>
                     <li><a href="#">Contact</a></li>
                 </ul>
             </div>
-            <!-- About Us Section -->
-            <div class="footer-section about-us">
+            <div class="footer-section about-us" id="about">
                 <h3>About Us</h3>
                 <p>Empowering aspiring developers to master web development through hands-on, small-scale projects.</p>
             </div>
-            <!-- Newsletter Section -->
             <div class="footer-section newsletter">
                 <h3>Subscribe to Our Newsletter</h3>
                 <form>
@@ -4988,6 +4986,7 @@ <h3>Subscribe to Our Newsletter</h3>
             </div>
         </div>
 
+    </footer>  -->
 
 
     <!-- Added FAQ Section -->
@@ -5021,6 +5020,59 @@ <h3 class="faq-question">Where can I find the source code?</h3>
         </div>
     </section>
     
+    <style>
+        /* FAQ Section Styling */
+        #faq {
+            background-color: #f8f8f8;
+            padding: 50px 20px;
+        }
+        
+        #faq h2 {
+            text-align: center;
+            margin-bottom: 20px;
+            font-size: 2rem;
+        }
+
+        /*Dark Mode theme styling adjustments*/
+        [data-theme="dark"] #faq,
+        [data-theme="dark"] #faq h2{
+            background-color:#000327;
+            color:white;
+        }
+
+        [data-theme="dark"] .faq-item h3,
+        [data-theme="dark"] .faq-item p{
+            color:white;
+        }
+        
+        .faq-item {
+            margin-bottom: 15px;
+            border-bottom: 1px solid #ccc;
+            padding: 15px 0;
+        }
+    
+        .faq-question {
+            cursor: pointer;
+            font-size: 1.2rem;
+            color: #333;
+            margin: 0;
+            padding: 10px;
+            transition: background 0.3s;
+        }
+    
+        .faq-question:hover {
+            background-color: #f0f0f0;
+        }
+    
+        .faq-answer {
+            display: none;
+            margin-top: 10px;
+            font-size: 1rem;
+            color: #666;
+        }
+        
+        </style>
+    
     <script>
         document.addEventListener('DOMContentLoaded', function () {
     const faqQuestions = document.querySelectorAll('.faq-question');
@@ -5054,216 +5106,57 @@ <h3 class="faq-question">Where can I find the source code?</h3>
     
     
 
+<!-- Footer -->
+<footer id="footer1">
+    <div class="footer-content">
+        <!-- Quick Links Section -->
+        <div class="footer-section quick-links">
+            <h3>Quick Links</h3>
+            <ul>
+                <li><a href="./index.html">Home</a></li>
+                <li><a href="chatbot.html">ChatBot</a></li>
+                <li><a href="./feedback.html">Feedback</a></li>
+                <li><a href="./faq.html">FAQ's</a></li>
+                <li><a href="./contact.html">Contact</a></li>
+            </ul>
+        </div>
 
-    <footer>
-        <div class="footer-content">
-            <!-- Quick Links Section -->
-            <div class="footer-section quick-links">
-                <h3>Quick Links</h3>
-                <ul>
-                    <li><a href="./index.html">Home</a></li>
-                    <li><a href="chatbot.html">ChatBot</a></li>
-                    <li><a href="./feedback.html">Feedback</a></li>
-                    <li><a href="./faq.html">FAQ's</a></li>
-                    <li><a href="./contact.html">Contact</a></li>
-                </ul>
-            </div>
-    
-            <!-- About Us Section -->
-            <div class="footer-section about-us">
-                <h3>About Us</h3>
-                <p>Empowering aspiring developers to master web development through hands-on, small-scale projects.</p>
-            </div>
-    
-            <!-- Newsletter Section -->
-            <div class="footer-section newsletter">
-                <h3>Subscribe to Our Newsletter</h3>
-                <form>
-                    <input type="email" placeholder="Enter your email" required>
-                    <button type="submit" class="subscribe-btn">Subscribe</button>
-                </form>
-            </div>
-    
-            <!-- Social Media Section -->
-            <div class="follow-us">
-                <h3>Follow Us</h3>
-                <a href="https://www.linkedin.com/in/berajeevkumar/" target="_blank">
-                    <img src="https://cdn-icons-png.flaticon.com/512/174/174857.png" alt="LinkedIn Logo" />
-                </a>
-                <a href="https://x.com/be_rajeevkumar" target="_blank">
-                    <img src="https://cdn-icons-png.flaticon.com/512/733/733579.png" alt="Twitter Logo" />
-                </a>
-                <a href="https://github.com/beRajeevKumar" target="_blank">
-                    <img src="https://cdn-icons-png.flaticon.com/512/25/25231.png" alt="GitHub Logo" />
-                </a>
-            </div>
+        <!-- About Us Section -->
+        <div class="footer-section about-us">
+            <h3>About Us</h3>
+            <p>Empowering aspiring developers to master web development through hands-on, small-scale projects.</p>
         </div>
-    
-        <!-- Share Button -->
-        <div class="share-section">
-            <button id="shareBtn" class="share-btn">Share Us</button>
+
+        <!-- Newsletter Section -->
+        <div class="footer-section newsletter">
+            <h3>Subscribe to Our Newsletter</h3>
+            <form>
+                <input type="email" placeholder="Enter your email" required>
+               <button type="submit" class="subscribe">Subscribe</button>
+               
+            </form>
         </div>
-    
-        <!-- Bottom Links Section -->
-        <ul class="gridbox">
-            <li><a href="#">Help Centre</a></li>
-            <li><a href="./welcometestimonials.html">Testimonials</a></li>
-            <li><a href="#">Account</a></li>
-            <li><a href="#">Media Centre</a></li>
-            <li><a href="./terms.html">Terms of Use</a></li>
-            <li><a href="./privacy.html">Privacy</a></li>
-            <li><a href="#">Cookie Preferences</a></li>
-            <li><a href="./contact.html">Contact Us</a></li>
-        </ul>
-    
-        <!-- Footer Bottom -->
-        <div class="footer-bottom">
-            <div class="social-icons">
-                <a href="#"><i class="fab fa-facebook-f"></i></a>
-                <a href="#"><i class="fab fa-twitter"></i></a>
-                <a href="#"><i class="fab fa-instagram"></i></a>
-                <a href="#"><i class="fab fa-linkedin-in"></i></a>
-                <a href="#"><i class="fab fa-youtube"></i></a>
-                <a href="#"><i class="fab fa-pinterest"></i></a>
-                <a href="#"><i class="fab fa-snapchat-ghost"></i></a>
-            </div>
-            <p>© 2024 Open Projects. All Rights Reserved.</p>
+
+        <div class="footer-section follow-us" id="footer-section">
+            <DIV>
+                <h3>Follow Us</h3>
+            <a href="https://www.linkedin.com/in/berajeevkumar/" target="_blank">
+                <img src="https://cdn-icons-png.flaticon.com/512/174/174857.png" alt="LinkedIn Logo" />
+            </a>
+            <a href="https://x.com/be_rajeevkumar" target="_blank">
+                <img src="https://cdn-icons-png.flaticon.com/512/733/733579.png" alt="Twitter Logo" />
+            </a>
+            <a href="https://github.com/beRajeevKumar" target="_blank">
+                <img src="https://cdn-icons-png.flaticon.com/512/25/25231.png" alt="GitHub Logo" />
+            </a>
+            </DIV>
         </div>
-    </footer>
-    
-    <!-- Styles -->
-    <style>
-        /* Footer Section Styling */
-        footer {
-            background: #040423;
-            color: #eee;
-            padding: 20px;
-            font-family: Arial, sans-serif;
-        }
-    
-        .footer-content {
-            display: flex;
-            justify-content: space-between;
-            padding: 20px 0;
-        }
-    
-        .footer-section h3 {
-            color: #f8b400;
-        }
-    
-        .footer-section ul {
-            list-style: none;
-            padding: 0;
-        }
-    
-        .footer-section ul li a {
-            color: #ccc;
-            text-decoration: none;
-        }
-    
-        .footer-section ul li a:hover {
-            color: #f8b400;
-            transition: color 0.3s;
-        }
-    
-        /* Newsletter and Share Button */
-        .subscribe-btn, .share-btn {
-            background: linear-gradient(45deg, #ff7e5f, #feb47b);
-            color: white;
-            border: none;
-            border-radius: 5px;
-            padding: 10px 20px;
-            cursor: pointer;
-            transition: background 0.3s, transform 0.3s;
-        }
-    
-        .subscribe-btn:hover, .share-btn:hover {
-            background: linear-gradient(45deg, #feb47b, #ff7e5f);
-            transform: scale(1.05);
-        }
-    
-        /* Follow Us Icons */
-        .follow-us a img {
-            width: 30px;
-            height: 30px;
-            margin: 0 10px;
-            transition: transform 0.3s;
-        }
-    
-        .follow-us a img:hover {
-            transform: scale(1.2);
-        }
-    
-        /* Social Icons */
-        .social-icons a {
-            color: #eee;
-            font-size: 20px;
-            margin-right: 15px;
-            transition: color 0.3s, transform 0.3s;
-        }
-    
-        .social-icons a:hover {
-            color: #f8b400;
-            transform: scale(1.1);
-        }
-    
-        /* Gridbox Links */
-        .gridbox {
-            display: flex;
-            justify-content: center;
-            padding: 20px 0;
-            list-style: none;
-        }
-    
-        .gridbox li {
-            margin: 0 10px;
-        }
-    
-        .gridbox a {
-            color: #ccc;
-            text-decoration: none;
-        }
-    
-        .gridbox a:hover {
-            color: #f8b400;
-        }
-    
-        /* Footer Bottom */
-        .footer-bottom {
-            text-align: center;
-            padding-top: 10px;
-            border-top: 1px solid #040423;
-        }
-    
-        .footer-bottom p {
-            color:#040423;
-        }
-    </style>
-    
-    <!-- Share Button Script -->
-    <script>
-        document.getElementById('shareBtn').addEventListener('click', function() {
-            if (navigator.share) {
-                navigator.share({
-                    title: 'Contact Us',
-                    text: 'Check out this Contact Us page!',
-                    url: window.location.href
-                }).then(() => {
-                    console.log('Thanks for sharing!');
-                }).catch((error) => {
-                    console.error('Error sharing:', error);
-                });
-            } else {
-                alert('Web Share API is not supported in your browser.');
-            }
-        });
-    </script>
-    
 
+    </div>
 
 
-    <!-- Bottom Links Section -->
-    <ul class="gridbox">
+     <!-- Bottom Links Section  -->
+<ul class="gridbox">
         <li><a href="#">Help Centre</a></li>
         <li><a href="./welcometestimonials.html">Testimonials</a></li>
         <li><a href="#">Account</a></li>
@@ -5272,25 +5165,37 @@ <h3>Follow Us</h3>
         <li><a href="./privacy.html">Privacy</a></li>
         <li><a href="#">Cookie Preferences</a></li>
         <li><a href="./contact.html">Contact Us</a></li>
-
-    </ul> 
-
+    </ul>
+    <!-- Share Section -->
+    <div class="share-section">
+        <button id="shareBtn">Share Us</button>
+    </div>
     <!-- Social Media Icons -->
-    <div class="social-media">
-        <a class="spaced-item" href="https://www.facebook.com" target="_blank"><i class="fab fa-facebook-f"></i></a>
-        <a class="spaced-item" href="https://www.twitter.com" target="_blank"><i class="fab fa-twitter"></i></a>
-        <a class="spaced-item" href="https://www.instagram.com" target="_blank"><i class="fab fa-instagram"></i></a>
-        <a class="spaced-item" href="https://www.linkedin.com" target="_blank"><i class="fab fa-linkedin-in"></i></a>
-        <a class="spaced-item" href="https://www.pinterest.com" target="_blank"><i class="fab fa-pinterest"></i></a>
-        <a class="spaced-item" href="https://www.snapchat.com" target="_blank"><i class="fab fa-snapchat-ghost"></i></a>
-        <a class="spaced-item" href="https://www.github.com" target="_blank"><i class="fab fa-github"></i></a>
+    
+    <div class="footer-bottom" id="footer-bottom">
+        <div class="social-icons">
+            <a href="#"><i class="fab fa-facebook-f"></i></a>
+            <a href="#"><i class="fab fa-twitter"></i></a>
+            <a href="#"><i class="fab fa-instagram"></i></a>
+            <a href="#"><i class="fab fa-linkedin-in"></i></a> 
+            <a href="#"><i class="fab fa-youtube"></i></a> 
+            <a href="#"><i class="fab fa-pinterest"></i></a> 
+            <a href="#"><i class="fab fa-snapchat-ghost"></i></a>
+        </div>
+        <p>© 2024 Open Projects. All Rights Reserved. </p>
     </div>
 
-    <!-- Footer Bottom -->
-    <div class="footer-bottom">
-        <p>© 2024 Open Projects. All Rights Reserved.</p>
-    </div> 
+    <link rel="stylesheet" href="visi.css">
+<!-- ############### Footer ############### -->
+<!-- Footer Visitor Counter -->
+<div class="visitor-counter-container">
+    <div class="visitor-counter">
+        <div>Visitor Count: </div>
+        <div class="website-counter"></div>
+    </div>
+</div>
 
+<script src="visi.js"></script>
 </footer>
 
 
@@ -5312,6 +5217,21 @@ <h3>Follow Us</h3>
         }
     });
 </script>
+
+    <style>
+        .share-section {
+            text-align: center;
+        }
+        #shareBtn {
+            background-color: #f71257;
+            color: white;
+            padding: 10px 20px;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+
+        }
+    </style>
     
 
 
@@ -5344,6 +5264,289 @@ <h3>Follow Us</h3>
 
 <br /><br />
 
+ 
+
+  
+<style>
+
+body {
+font-family: Arial, sans-serif;
+height: auto;
+
+}
+
+/* Popup Styles */
+.popup {
+
+display: none; /* Hidden by default */
+position: fixed; /* Stay in place */
+left: 0;
+top: 0;
+width: 100%; /* Full width */
+height: 100%; /* Full height */
+background-color: rgba(0, 0, 0, 0.5); /* Black background with opacity */
+justify-content: center; /* Center the popup */
+align-items: center; /* Center the popup */
+z-index: 1000; /* Sit on top */
+
+}
+.source-code-btn {
+    background-color:#f02647 ;
+}
+.popup-content {
+
+background: linear-gradient(#f74b67, #e7d3d7), url(your-image-url.jpg);
+padding: 20px;
+border-radius: 5px;
+max-width: 400px;
+text-align: center;
+
+}
+
+/* Set poll options to stack vertically */
+#pollOptions {
+
+display: flex;
+flex-direction: column; /* Stack buttons vertically */
+align-items: center; /* Center the buttons */
+
+}
+
+.poll-button {
+
+display: block; /* Change to block for full-width */
+margin: 5px 0; /* Add vertical margin */
+padding: 10px 15px;
+border: none;
+border-radius: 5px;
+background-color: #4CAF50; /* Green */
+color: white;
+cursor: pointer;
+transition: background-color 0.3s;
+width: 100%; /* Full width */
+
+}
+
+.poll-button:hover {
+
+background-color: #45a049; /* Darker green */
+
+}
+
+.poll-button.selected {
+
+background-color: #2196F3; /* Blue for selected */
+
+}
+
+/* New Vote Button Styles */
+.vote-button {
+
+display: block; /* Change to block for full-width */
+margin: 5px 0; /* Add vertical margin */
+padding: 10px 15px;
+border: none;
+border-radius: 5px;
+background-color: #f44336; /* Red */
+color: white;
+cursor: pointer;
+transition: background-color 0.3s;
+width: 100%; /* Full width */
+
+}
+
+.vote-button:hover {
+
+background-color: #d32f2f; /* Darker red */
+
+}
+
+.uppercase {
+
+text-transform: uppercase;
+font-size: 15px;
+
+}
+
+        .popup-nl {
+  
+            display: none;
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0, 0, 0, 0.7);
+            justify-content: center;
+            align-items: center;
+            z-index: 1009;
+  
+        }
+  
+        .popup-content-nl {
+  
+            display: flex;
+            background-color: white;
+            border-radius: 10px;
+            max-width: 800px;
+            height: 450px;
+            width: 700px;
+            overflow: hidden;
+            position: relative;
+            box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
+  
+        }
+  
+        .close1-btn-nl {
+  
+            width: 20px;
+            cursor: pointer;
+            margin: 18px 10px;
+            position: absolute;
+            top: -4px;
+            right: 12px;
+            font-size: 18px;
+            font-weight: 800;
+  
+        }
+  
+        .popup-left-nl img {
+  
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+  
+        }
+  
+        .popup-right-nl {
+  
+            padding: 20px;
+            width: 50%;
+            display: flex;
+            flex-direction: column; 
+            align-items: center;
+            justify-content: center;
+  
+        }
+  
+        .popup-nl h1 {
+  
+            font-size: 24px;
+            background: linear-gradient(to right, #913700, #ff6000, #913700); 
+            -webkit-text-fill-color: transparent;
+            background-clip: text; 
+            -webkit-background-clip: text;
+            text-align: center;
+            margin-bottom: 12px;
+            margin-top: 35px;
+  
+        }
+  
+        .h2-nl{
+  
+            font-size: 18px;
+            margin-bottom: 8px;
+            text-align: center;
+            color: #333;
+  
+        }
+  
+        .pop_up-nl {
+  
+            margin-bottom: 15px;
+            font-weight: bold;
+            background: -webkit-linear-gradient(left, #007d39, #44f899, #005f2b);
+            background-clip: text;
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            font-size: 12.7px;
+  
+        }
+  
+        .bold{
+  
+            font-size: 13.1px;
+  
+        }
+  
+        input[type="email"] {
+  
+            width: 100%;
+            padding: 10px;
+            margin-bottom: 16px;
+            border: 1px solid #000000;
+            border-radius: 5px;
+            font-size: 14px;
+  
+        }
+  
+        .signup-btn1-nl {
+  
+            width: 100%;
+            height: 30px;
+            text-align: center;
+            background: linear-gradient(to right, #febd1b, #ffdb80, #febd1b);
+            color: white;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+            font-size: 16px;
+  
+        }
+  
+        .signup-btn1-nl:hover {
+  
+            background-color: #4682B4;
+  
+        }
+  
+        .no-thanks-nl {
+  
+            display: block;
+            margin-top: 10px;
+            color: #888;
+            text-decoration: none;
+            margin-bottom: 15px;
+  
+        }
+  
+        .no-thanks-nl:hover {
+  
+            color: #000000;
+            font-size: 14px;
+  
+        }
+  
+        .terms-nl {
+  
+            margin-top: 15px;
+            font-size: 10px;
+            color: #888;
+  
+        }
+  
+        .terms-nl a {
+  
+            display: inline;
+  
+        }
+  
+        .terms-nl a:hover {
+  
+            text-decoration: underline;
+  
+        }
+  
+        .popup-right-nl p {
+  
+            margin-top: 0;
+            margin-bottom: 10px;
+            text-align: center;
+  
+        }
+  
+  
+</style>
       <div id="popup-nl" class="popup-nl">
         <div class="popup-content-nl">
             <div class="popup-left-nl">