Licensing.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Licensing - FinVeda</title>
    <link rel="shortcut icon" href="/assets/images/favicon2.webp" type="image/png" />
    <link rel="stylesheet" href="./assets/css/animate.css" />
    <link rel="stylesheet" href="./assets/css/magnific-popup.css" />
    <link rel="stylesheet" href="./assets/css/slick.css" />
    <link rel="stylesheet" href="./assets/css/LineIcons.css" />
    <link rel="stylesheet" href="./assets/css/font-awesome.min.css" />
    <link rel="stylesheet" href="./assets/css/bootstrap.min.css" />
    <link rel="stylesheet" href="./assets/css/default.css" />
    <link rel="stylesheet" href="./assets/css/style.css" />
    <link rel="stylesheet" href="./assets/css/quiz.css" />
    <link rel="stylesheet" href="./assets/css/popup.css" />
    <link rel="stylesheet" href="./assets/css/about.css"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" />
    <link rel="stylesheet" href="./assets/css/Licensing.css"/>
  </head>

  <body>
    <div id="progressBar"></div>

    <div class="circle-container">
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
    </div>
   
    <div id="preloader">
      <div id="lottie-loader"></div>
    </div>
    <div class="content-wrapper">
      <header class="header-area">
        <div style="display: flex; justify-content: center;" class="navbar-area">
          <div style="display: flex; justify-content: center;" class="container">
            <div class="row">
         
              <div style="display: flex; justify-content: center;" class="">
                <nav class="navbar navbar-expand-lg " style="display: flex;">
                  <!-- <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
              aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
              <span class="toggler-icon"></span>
              <span class="toggler-icon"></span>
              <span class="toggler-icon"></span>
            </button> -->
                  <div class="collapse navbar-collapse sub-menu-bar" id="navbarSupportedContent"
                    style="margin: auto; margin-left: -5px;">
                    <div class="icon1">
                      <a href="./index.html">
                        <img src="./assets/images/FinvedaLogo.png" alt="icon.png" style="width: 13rem;">
                      </a>
                    </div>
                    <ul id="nav" class="navbar-nav ml-auto" style="margin: auto;">
                      <li class="nav-item">
                        <a class="page-scroll active-link" href="./index.html" style="color: rgb(237, 242, 244);">Home
                          🏡</a>
                      </li>
                      <li class="nav-item">
                        <a class="page-scroll" href="./about.html" style="color: rgb(237, 242, 244);">About Us 📖</a>
                      </li>
                      <li class="nav-item">
                        <a class="page-scroll" href="./trends.html" style="color: rgb(237, 242, 244);">Trends 📈</a>
                      </li>
                      <li class="nav-item">
                        <a class="page-scroll" href="./tools/sip.html" style="color: rgb(237, 242, 244);">Tools 🔧</a>
                      </li>
                      
                      
                      <li class="nav-item">
                        <a class="page-scroll" href="./finance.html" style="color: rgb(237, 242, 244);">Courses 📚</a>
                      </li>
                      
                     
                      <li class="nav-item">
                        <a class="page-scroll" href="./contact.html" style="color: rgb(237, 242, 244);">Contact📞</a>
                      </li>
                      <li class="nav-item">
                        <a class="page-scroll" href="./faq.html" style="color: rgb(237, 242, 244);">Help 🙋‍♂️</a>
                      </li>
                      <li class="nav-item no-underline">
                        <a class="main-btn navbar-btn"
                          style="padding: 2px 20px; color: rgb(237, 242, 244);animation-duration: 0.4s;animation-name: ease;"
                          data-scroll-nav="0" href="./loginPage.html">Login/Register 💻</a>
                      </li>
                      <li class="nav-item no-underline">
                        <button id="theme-toggle" class="theme-toggle" style="margin-right: 2px;">
                          🌙
                        </button>
                      </li>
                    </ul>
                  </div>
  
                  <script>
                    const toggleButton = document.getElementById('theme-toggle');
                    var body = document.body;
                    var currentTheme = localStorage.getItem('theme');
  
                    if (currentTheme === 'dark') {
                      body.classList.add('dark-mode');
                      toggleButton.classList.add('dark');
                      toggleButton.textContent = '🌞';
                    }
  
                    toggleButton.addEventListener('click', function () {
                      body.classList.toggle('dark-mode');
                      toggleButton.classList.toggle('dark');
  
                      // Update button icon based on mode
                      if (body.classList.contains('dark-mode')) {
                        toggleButton.textContent = '🌞';  // Light mode icon
                        localStorage.setItem('theme', 'dark');
                      } else {
                        toggleButton.textContent = '🌙';  // Dark mode icon
                        localStorage.setItem('theme', 'light');
                      }
                    });
                  </script>
                  <div class="">
                    <!-- Login Modal -->
                    <div id="myModal" class="modal">
                      <div class="modal-content">
                        <span class="close" style="display: flex; justify-content: right;">×</span>
                        <div class="mt-3">
                          <h3 class="join"><i class="fa-solid fa-right-to-bracket"></i> Login to join us....</h3>
                          <form class="px-3 py-4" id="loginForm">
                            <div class="form-group">
                              <label class="d-flex">Username</label>
                              <input type="text" placeholder="Username" class="form-control" required="">
                            </div>
                            <div class="form-group">
                              <label class="d-flex">Password</label>
                              <input type="password" placeholder="Password" class="form-control" required="">
                              <button type="button" class="toggle-password-btn"><i class="fa-solid fa-eye"></i></button>
                            </div>
                            <div class="form-check d-flex">
                              <input type="checkbox" class="form-check-input me-1" style="margin-top: 0;">
                              <label class="form-check-label" style="margin-bottom: 0;">Remember me</label>
                              <a href="#" id="forgot-password" style="margin-left: 120px;">Forget Password?</a>
                            </div>
                            <div style="height: 20px;"></div>
                            <button class="main-btn w-100 mb-3" onclick="submitForm('loginForm')">Sign in</button>
                            <p class="text-center">Don't have an account? <a href="#" id="registerLink">Register</a></p>
                            <div class="or-sign-in-with text-center">
                              <p>Or sign in with</p>
                            </div>
                            <div class="social-icons mt-3">
                              <ul class="list-inline">
                                <li><a href="#" class="google" id="google-login"><i class="fa-brands fa-google"></i></a>
                                </li>
                                <li><a href="#" class="facebook" id="facebook-login"><i
                                      class="fa-brands fa-facebook-f"></i></a></li>
                                <li><a href="#" class="twitter" id="twitter-login"><i
                                      class="fa-brands fa-x-twitter"></i></a>
                                </li>
                              </ul>
                            </div>
                          </form>
                        </div>
                      </div>
                    </div>
  
                    <script>
                      // Add event listeners to the social media icons
                      document.getElementById('google-login').addEventListener('click', function () {
                        window.location.href = 'https://accounts.google.com/o/oauth2/auth?client_id=YOUR_CLIENT_ID&redirect_uri=YOUR_REDIRECT_URI&response_type=code&scope=profile email';
                      });
  
                      document.getElementById('facebook-login').addEventListener('click', function () {
                        window.location.href = 'https://www.facebook.com/v13.0/dialog/oauth?client_id=YOUR_APP_ID&redirect_uri=YOUR_REDIRECT_URI&response_type=code&scope=public_profile email';
                      });
  
                      document.getElementById('twitter-login').addEventListener('click', function () {
                        window.location.href = 'https://twitter.com/i/oauth2/authorize?client_id=YOUR_CLIENT_ID&redirect_uri=YOUR_REDIRECT_URI&response_type=code&scope=users.read';
                      });
                    </script>
  
                    <!-- Register Modal -->
                    <div id="registerModal" class="modal">
                      <div class="modal-content">
                        <span class="close" style="display: flex; justify-content: right;">×</span>
                        <div class="mt-3">
                          <h3 class="join"><i class="fa-solid fa-user"></i> Register to join us....</h3>
  
                          <div class="form-group">
                            <label class="d-flex">Email</label>
                            <input type="email" placeholder="Email" class="form-control" required="">
                          </div>
                          <div class="form-group">
                            <label class="d-flex">Username</label>
                            <input type="text" placeholder="Username" class="form-control" required="">
                          </div>
                          <div class="form-group">
                            <label class="d-flex">Password</label>
                            <input type="password" placeholder="Password" class="form-control" id="register-password"
                              required="" oninput="checkPasswordStrength()">
                            <button type="button" class="toggle-password-btn"
                              onclick="togglePasswordVisibility('register-password')">
                              <i class="fa-solid fa-eye"></i>
                              <i class="fa-solid fa-eye-slash" style="display: none;"></i>
                            </button>
                          </div>
                          <div id="password-meter" style="display: none; margin-top: 5px;">
                            <div id="meter"
                              style="height: 10px; background-color: #ccc; border-radius: 5px; transition: width 0.3s;">
                            </div>
                            <div id="strength-text" style="margin-top: 5px; font-weight: bold;"></div>
                          </div>
  
  
                          <!-- Import zxcvbn library -->
                          <script src="https://cdnjs.cloudflare.com/ajax/libs/zxcvbn/4.4.2/zxcvbn.js"></script>
                          <script>
                            function checkPasswordStrength() {
                              const password = document.getElementById('register-password').value;
                              const meter = document.getElementById('meter');
                              const meterContainer = document.getElementById('password-meter');
                              const strengthText = document.getElementById('strength-text');
  
                              if (password) {
                                meterContainer.style.display = 'block'; // Show the meter when typing
                                const result = zxcvbn(password);
                                const score = result.score; // Score ranges from 0 to 4
  
                                // Set meter width and color based on score
                                meter.style.width = (score + 1) * 20 + '%'; // Convert score to percentage
                                meter.style.backgroundColor = getMeterColor(score);
                                strengthText.innerText = getStrengthText(score); // Update strength text
                              } else {
                                meterContainer.style.display = 'none'; // Hide the meter if no password
                                strengthText.innerText = ''; // Clear strength text
                              }
                            }
  
                            function getMeterColor(score) {
                              switch (score) {
                                case 0: return 'red'; // Weak
                                case 1: return 'orange'; // Fair
                                case 2: return 'yellow'; // Good
                                case 3: return 'blue'; // Strong
                                case 4: return 'green'; // Very Strong
                                default: return 'gray';
                              }
                            }
  
                            function getStrengthText(score) {
                              switch (score) {
                                case 0: return 'Very Weak';
                                case 1: return 'Weak';
                                case 2: return 'Fair';
                                case 3: return 'Strong';
                                case 4: return 'Very Strong';
                                default: return '';
                              }
                            }
  
                            function togglePasswordVisibility(id) {
                              const passwordInput = document.getElementById(id);
                              const eyeIcon = passwordInput.nextElementSibling;
                              if (passwordInput.type === 'password') {
                                passwordInput.type = 'text';
                                eyeIcon.children[0].style.display = 'none';
                                eyeIcon.children[1].style.display = 'inline';
                              } else {
                                passwordInput.type = 'password';
                                eyeIcon.children[0].style.display = 'inline';
                                eyeIcon.children[1].style.display = 'none';
                              }
                            }
                          </script>
  
                          <button class="main-btn mt-2 w-100 mb-3" onclick="submitForm('registerForm')">Register</button>
                          <p class="text-center">Already have an account? <a href="#" id="loginLink">Login</a></p>
                          <div class="or-sign-in-with text-center">
                            <p>Or sign up with</p>
                          </div>
                          <div class="social-icons mt-3">
                            <ul class="list-inline">
                              <li><a href="#" class="google" id="google-signup"><i class="fa-brands fa-google"></i></a>
                              </li>
                              <li><a href="#" class="facebook" id="facebook-signup"><i
                                    class="fa-brands fa-facebook-f"></i></a></li>
                              <li><a href="#" class="twitter" id="twitter-signup"><i class="fa-brands fa-twitter"></i></a>
                              </li>
                            </ul>
                          </div>
                        </div>
                      </div>
                    </div>
  
                    <script>
                      // Add event listeners to the social media icons
                      document.getElementById('google-signup').addEventListener('click', function () {
                        window.location.href = 'https://accounts.google.com/o/oauth2/auth?client_id=YOUR_CLIENT_ID&redirect_uri=YOUR_REDIRECT_URI&response_type=code&scope=profile email';
                      });
  
                      document.getElementById('facebook-signup').addEventListener('click', function () {
                        window.location.href = 'https://www.facebook.com/v13.0/dialog/oauth?client_id=YOUR_APP_ID&redirect_uri=YOUR_REDIRECT_URI&response_type=code&scope=public_profile email';
                      });
  
  
                      document.getElementById('twitter-signup').addEventListener('click', function () {
                        window.location.href = 'https://twitter.com/i/oauth2/authorize?client_id=YOUR_CLIENT_ID&redirect_uri=YOUR_REDIRECT_URI&response_type=code&scope=users.read';
                      });
                      // Add event listener to the "Register" button in the login modal
                      document.getElementById('registerLink').addEventListener('click', function () {
                        // Close the login modal
                        document.getElementById('myModal').style.display = 'none';
  
                        // Open the registration modal
                        document.getElementById('registerModal').style.display = 'block';
                      });
                      // Add event listener to the "Login" button in the registration modal
                      document.getElementById('loginLink').addEventListener('click', function () {
                        // Close the registration modal
                        document.getElementById('registerModal').style.display = 'none';
  
                        // Open the login modal
                        document.getElementById('myModal').style.display = 'block';
                      });
                      // Function to close the modal window
                      var loginCloseButton = document.querySelector("#myModal .close");
                      loginCloseButton.addEventListener("click", function () {
                        var modal = document.getElementById("myModal");
                        modal.style.display = "none";
                      });
                    </script>
  
  
                    </script>
                  </div>
                </nav>
  
                <link href="https://fonts.googleapis.com/css?family=Raleway&amp;display=swap" rel="stylesheet">
  
                <nav class="mobile-menu ">
                  <a class="page-scroll" href="./index.html">Home 🏡</a>
                  <a class="page-scroll" href="./about.html">About Us 📖</a>
                  <a class="page-scroll" href="./trends.html">Trends 📈</a>
                  <a class="page-scroll" href="./tools/sip.html">Tools 🔧</a>
                  <a class="page-scroll" href="./blog.html">Blogs 📰</a>
                  <a class="page-scroll" href="./quiz.html">Quiz 🤔</a>
                  <a class="page-scroll main-btn" href="#" onclick="openModal()" onmouseout="this.style.color='white'">Login/Register 💻</a>
                  <li class="nav-item no-underline">
                    <button id="theme-toggle2" class="theme-toggle2" style="margin-right: 2px;">
                      🌙
                    </button>
                  </li>
                  <div class="mobile-menu__trigger" onclick="toggleMobileMenu()">
                    <span></span>
                  </div>
                </nav>
                <script>
                  const toggleBtn = document.getElementById('theme-toggle2');
                  var body = document.body;
                  var currentTheme = localStorage.getItem('theme');
        
                  if (currentTheme === 'dark') {
                  body.classList.add('dark-mode');
                  toggleBtn.classList.add('dark');
                  toggleBtn.textContent = '🌞';
                  }
                  
                  toggleBtn.addEventListener('click', function () {
                  body.classList.toggle('dark-mode');
                  toggleBtn.classList.toggle('dark');
                  
                  // Update button icon based on mode
                  if (body.classList.contains('dark-mode')) {
                    toggleBtn.textContent = '🌞';  // Light mode icon
                    localStorage.setItem('theme', 'dark');
                  } else {
                    toggleBtn.textContent = '🌙';  // Dark mode icon
                    localStorage.setItem('theme', 'light');
                  }
                  });
              </script>
              </div>


              <link href="./navbar.css" rel="stylesheet">
              <script type="text/javascript" src="./navbar.js"></script>
            </div>
          </div>
        </div>
        <div id="home" class="header-hero bg_cover" style="background-image: url(./assets/images/banner-bg.svg)">
          <div class="container">
            <h2 class="head-animate" style="font-size: 90px;">
              WELCOME TO FINVEDA
            </h2>
            <div class="row justify-content-center">
              <div class="col-lg-8">
                <div class="header-hero-content text-center">
                  <style>
                    .head-animate {
                      text-align: center;
                      position: relative;
                      top: 200px;
                      color: transparent;
                      -webkit-text-stroke: 2px white;
                      font-weight: bold;
                      background: url(./assets/images/back.png);
                      -webkit-background-clip: text;
                      background-position: 0 0;
                      animation: back 20s linear infinite, hovering 1.5s ease-in-out infinite;
                      ;
                    }
  
                    @keyframes back {
                      100% {
                        background-position: 2000px 0;
                      }
                    }
  
                    @keyframes hovering {
                      0% {
                        transform: translateY(0);
                      }
  
                      50% {
                        transform: translateY(-5px);
                      }
  
                      100% {
                        transform: translateY(0);
                      }
                    }
  
                    .header-hero-content h2 {
                      font-size: 200px;
                    }
                  </style>
                  <br>
                  <br>
                  <p class="text wow fadeInUp" data-wow-duration="1.3s" data-wow-delay="0.8s"
                    style="visibility: visible; animation-duration: 1.3s; animation-delay: 0.8s;">
                    Wanna learn how to grow your money to become rich? We have
                    made becoming a stock market Guru easy with our AI
                    powered finance advisor - <b>Arth Sathi 🤵🏻</b>
                  </p>
                  <a href="#" class="main-btn wow fadeInUp" data-wow-duration="1.3s" data-wow-delay="1.1s"
                    onclick="window.botpressWebChat.sendEvent({ type: 'show' }); return false;"
                    style="visibility: visible; animation-duration: 1.3s; animation-delay: 1.1s;">
                    Chat with ArthaSathi 💬
                  </a>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-lg-12">
                <div class="header-hero-image text-center wow fadeIn" data-wow-duration="1.3s" data-wow-delay="1.4s">
                  <img src="./assets/images/header-hero.webp" alt="hero" />
                </div>
              </div>
            </div>
          </div>
          <div id="particles-1" class="particles"></div>
        </div>
      </header>
  
    <main class="license-wrapper">
      <div class="content">
          <section class="text-left">
              <h1>Licensing</h1>
  
              <div class="Lastupdate">
                  Last updated: <span id="last-updated-date"></span>
              </div>
  
              <p style="color: black;">
                  Welcome to FinVeda. This Licensing Agreement governs your access and
                  use of our software, content, and services. By accessing or using
                  any part of our services, you agree to comply with and be bound by
                  the terms outlined in this agreement.
              </p>
          </section>
  
          <section class="text-left">
              <div class="license-card">
                  <h2>GNU General Public License v3.0</h2>
                  <p style="color: black;">
                      This program is free software: you can redistribute it and/or modify
                      it under the terms of the GNU General Public License as published by
                      the Free Software Foundation, either version 3 of the License, or
                      (at your option) any later version.
                  </p>
                  <p style="color: black;">
                      This program is distributed in the hope that it will be useful, but
                      WITHOUT ANY WARRANTY; without even the implied warranty of
                      MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
                      General Public License for more details.
                  </p>
                  <p style="color: black;">
                      You should have received a copy of the GNU General Public License
                      along with this program. If not, see
                      <a
                          href="https://www.gnu.org/licenses/"
                          target="_blank"
                          rel="noopener noreferrer">https://www.gnu.org/licenses/</a>.
                  </p>
              </div>
          </section>
  
          <section class="text-left">
              <div class="license-card">
                  <h3>Permissions</h3>
                  <ul>
                      <li>Use: You are free to use the software for any purpose.</li>
                      <li>Study: You have the freedom to study how the program works and change it to make it do what you wish.</li>
                      <li>Distribute: You can redistribute copies of the original program so you can help others.</li>
                      <li>Modify: You can distribute copies of your modified versions to others.</li>
                  </ul>
              </div>
          </section>
  
          <section class="text-left">
              <div class="license-card">
                  <h3>Conditions</h3>
                  <ul>
                      <li>The source code must be made available when the software is distributed.</li>
                      <li>Any modifications to the software must be licensed under the GNU GPL v3.0 or later.</li>
                      <li>The license notice and copyright notice must be preserved in all copies or substantial portions of the software.</li>
                  </ul>
              </div>
          </section>
  
          <section class="text-left">
              <h2>Contact Information</h2>
              <p style="color: black;">
                  If you have any questions or concerns about this Licensing
                  Agreement, please contact us at: Email:
                  <a href="mailto:ayush1337@hotmail.com">ayush1337@hotmail.com</a>
              </p>
          </section>
      </div>
  </main>
  
  <style>
    /* Importing Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Montserrat:wght@400;700&display=swap');

/* Base styles for the main license wrapper */
.license-wrapper {
    max-width: 1200px;
    margin: auto;
    padding: 30px;
    font-family: 'Roboto', sans-serif;
    color: #333;
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
}

/* Background gradient */
.license-wrapper::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(52, 152, 219, 0.1), rgba(46, 204, 113, 0.1));
    z-index: 0;
    border-radius: 10px;
}

/* Header styling */
h1, h2, h3 {
    font-family: 'Montserrat', sans-serif;
    color: #3498db;
    text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
    margin-bottom: 20px;
    position: relative;
    z-index: 1;
}

h1 {
    font-size: 2em;
    text-align: center;
}

h2, h3 {
    font-size: 1.5em;
}

/* Last updated date styling */
.Lastupdate {
    text-align: center;
    font-style: italic;
    color: #7f8c8d;
    margin-bottom: 20px;
    font-size: 0.9em;
    z-index: 1;
    position: relative;
}

/* Content sections */
.content {
    position: relative;
    z-index: 1;
}

/* License card styling */
.license-card {
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 15px rgba(52, 152, 219, 0.4), 0 0 25px rgba(52, 152, 219, 0.3);
    margin-bottom: 20px;
    transition: transform 0.3s, box-shadow 0.3s;
    position: relative;
    z-index: 1;
}

/* Hover effect for license cards */
.license-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 0 20px rgba(52, 152, 219, 0.5), 0 0 30px rgba(52, 152, 219, 0.4);
}

/* Paragraph styling */
p {
    line-height: 1.6;
    margin-bottom: 15px;
}

/* Custom bullet styling */
ul {
    list-style: circle;
    font-size: 1em;
    color: #333;
    padding-left: 20px;
}

li {
    margin-bottom: 10px;
    color: #27ae60;
    font-weight: 500;
}

/* Custom link styling */
a {
    color: #e74c3c;
    text-decoration: underline;
    font-weight: 700;
}

a:hover {
    color: #c0392b;
    text-decoration: none;
}

/* Responsive styles */
@media (max-width: 768px) {
    .license-wrapper {
        padding: 15px;
    }
}

  </style>

  <!-- <style>
      .license-wrapper {
          background-color: #f9f9f9;
          padding: 20px;
          border-radius: 8px;
          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
          width: 85%;
          max-width: 1200px;
          margin: 0 auto;
      }
  
      .license-wrapper h1 {
          font-size: 2.5em;
          color: #333;
          margin-bottom: 20px;
          text-align: center;
      }
  
      .license-wrapper h2 {
          font-size: 1.75em;
          color: #007BFF;
          margin-top: 20px;
          margin-bottom: 10px;
          text-align: center;
      }
  
      .license-wrapper p,
      .license-wrapper li {
          font-size: 1.1em;
          line-height: 1.6;
          color: #555;
          text-align: center;
      }
  
      .license-wrapper ul {
          list-style-type: disc;
          padding-left: 20px;
          display: inline-block;
      }
  
      .license-wrapper a {
          color: #007BFF;
          text-decoration: none;
      }
  
      .license-wrapper a:hover {
          text-decoration: underline;
      }
  
      .Lastupdate {
          font-style: italic;
          color: #777;
          margin-bottom: 20px;
          text-align: center;
      }
  
      .license-card {
          background-color: #f8f9fa;
          border: 1px solid #e0e0e0;
          border-radius: 8px;
          box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
          padding: 20px;
          margin: 20px auto;
          transition: box-shadow 0.3s ease, transform 0.3s ease;
          width: 100%;
          max-width: 800px; /* Increased width for inner cards */
      }
  
      .license-card:hover {
          box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
          transform: translateY(-2px);
      }
  
      .license-card h3 {
          margin-top: 0;
          color: #333;
          font-size: 1.5rem;
          text-align: center;
      }
  
      .license-card ul {
          padding-left: 0;
          list-style-type: none;
      }
  
      .license-card li {
          background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD6uN5ZAAAAIHRFWHRDcmVhdGlvbiBUaW1lADIwMjQtMTAyIDEyOjA3OjQ1IFBNABhM9nUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAdSURBVHicYgINq4wBIDJjAiI2hXykAQBeAChQHcCUCAAAAAElFTkSuQmCC') no-repeat left center;
          background-size: 1em;
          padding-left: 1.5em;
          margin-bottom: 10px;
          text-align: left;
      }
  </style> -->
      
      
<!-- Timed popup that will appear after succesful submission of feebback form! -->
      <button class="notification" id="successnotification" style="display:none;">
        <span class="message" id="successmsg">Submitted successfully!</span>
        <span class="closenotif" id="closeSuccessNotification">✖</span>
        <div class="timerline" id="timerline"></div>
      </button>

      <footer id="footer" class="footer-area pt-120">
        <div class="container">
          <div class="subscribe-area wow fadeIn" data-wow-duration="1s" data-wow-delay="0.5s">
            <div class="row">
              <div class="col-lg-6">
                <div class="subscribe-content mt-45">
                  <h2 class="subscribe-title">
                    Subscribe Our Newsletter <span>get regular updates</span>
                  </h2>
                </div>
              </div>
              <div class="col-lg-6">
                <div class="subscribe-form mt-50">
                  <form id="unique-subscribe-form">
                    <input type="email" id="unique-news-email" placeholder="Enter Email" required/>
                    <button class="unique-main-btn" id="unique-subscribe-btn" type="submit">Subscribe</button>
                  </form>
                  <div id="unique-message" class="unique-popup-message" style="display: none;">
                    <div class="border-animation"></div>
                    Thank You for the subscription!
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
               
        <div class="footer-widget pb-100">
          <div class="row" id="footer">
              <div class="col-lg-4 col-md-6 col-sm-8">
                  <div class="footer-about mt-50 ml-45 wow fadeIn" data-wow-duration="1s" data-wow-delay="0.2s">
                    <!-- Updated the Page Logo -->
                    <img src="./assets/images/FinvedaLogo.png" alt="FinVeda Logo" style="height: 80px; width: auto; margin-bottom: 15px;" />
                      <p class="text custom-margin">
                          We at FinVeda aim to make you a stock market Guru easily with our AI-powered teaching and financial blogs.
                      </p>
                  </div>
              </div>
              <div class="col-lg-5 col-md-7 col-sm-7">
                  <div class="footer-link d-flex mt-50 justify-content-md-between" style="justify-content: space-around !important;">
                      <div class="link-wrapper wow fadeIn" data-wow-duration="1s" data-wow-delay="0.4s">
                          <div class="footer-title">
                              <h3 class="title custom-margin">Quick Links</h3>
                          </div>
                          <ul class="link custom-margin">
                              <li><a href="./blogs/privacy-policy.html"><i class="fas fa-user-secret"></i> Privacy Policy</a></li>
                              <li><a href="./blogs/refund-policy.html"><i class="fas fa-undo-alt"></i> Refund Policy</a></li>
                              <li><a href="Licensing.html"><i class="fas fa-file-contract"></i> Licensing</a></li>
                              <li><a href="./blogs/terms-of-service.html"><i class="fas fa-file-alt"></i> Terms of Service</a></li>
                              <li><a href="./contributors.html"><i class="fas fa-users"></i> Our Contributors</a></li>
                          </ul>
                      </div>
                      <div class="link-wrapper wow fadeIn" data-wow-duration="1s" data-wow-delay="0.6s">
                          <div class="footer-title">
                              <h4 class="title custom-margin">Resources</h4>
                          </div>
                          <ul class="link custom-margin">
                              <li><a href="./index.html"><i class="fas fa-home"></i> Home</a></li>
                              <li><a href="./about.html"><i class="fas fa-info-circle"></i> About Us</a></li>
                              <li><a href="./trends.html"><i class="fas fa-chart-line"></i> Trends</a></li>
                              <li><a href="./tools/sip.html"><i class="fas fa-tools"></i> Tools</a></li>
                              <li><a href="./blog.html"><i class="fas fa-blog"></i> Blog</a></li>
                              <li><a href="./quiz.html"><i class="fas fa-question-circle"></i> Quiz</a></li>
                          </ul>
                      </div>
                  </div>
              </div>
              <div class="col-lg-3 col-md-5 col-sm-5">
                  <div class="footer-contact mt-50 wow fadeIn" data-wow-duration="1s" data-wow-delay="0.8s">
                      <div class="footer-title">
                          <h4 class="title custom-margin">Contact Us</h4>
                      </div>
                      <ul class="contact custom-margin-big" style="justify-content: space-around;">
                          <li class="d-sm-flex justify-content-center">
                              <i class="fa fa-envelope d-sm-flex align-items-center white" style="font-size: 16px; width: 10%;"></i>
                              <p style="width: 80%;">
                                  <a href="mailto:ayush1337@hotmail.com" target="_blank"
                                     style="color: white; text-decoration: underline;">
                                      ayush1337@hotmail.com
                                  </a>
                              </p>
                          </li>
                          <li class="d-sm-flex justify-content-center">
                              <i class="fa fa-globe d-sm-flex align-items-center white" style="font-size: 16px; width: 10%;"></i>
                              <div style="width: 80%;">
                                  <a href="https://fin-veda.vercel.app/index.html" target="_blank" style="color: #fff ;">
                                      fin-veda.vercel.app
                                  </a>
                              </div>
                          </li>
                          <li class="d-sm-flex justify-content-center">
                              <!-- Modified: Inline CSS to adjust logo size and sync with other pages -->
                              <i class="fa fa-location-dot d-sm-flex align-items-center white" style="font: 12px; width: 10%;"></i>
                              <div style="width: 80%;">
                                  <a href="https://www.google.com/maps/place/Delhi/@28.6436846,76.7635778,10z/data=!3m1!4b1!4m6!3m5!1s0x390cfd5b347eb62d:0x37205b715389640!8m2!3d28.7040592!4d77.1024902!16zL20vMDlmMDc?entry=ttu"
                                     style="color:#fff">
                                      Delhi, India
                                  </a>
                              </div>
                            </li>
                          <!-- Added Social Logos -->
                           <!-- Added: Social Media Redirects -->
                          <div class="social-icons">
                            <a href="https://www.instagram.com/"><i class="fa-brands fa-instagram"></i></a>
                            <a href="https://www.facebook.com/"><i class="fa-brands fa-facebook"></i></a>
                            <a href="https://x.com/"><i class="fa-brands fa-x-twitter"></i></a>
                            <a href="https://discord.com/"><i class="fa-brands fa-discord"></i></a>
                            <a href="https://github.com/ayush-that/FinVeda"><i class="fa-brands fa-github"></i></a>
                          </div>
                      </ul>
                  </div>
              </div>
          </div>
      </div>
        <div class="footer-copyright mt-50 wow fadeIn" data-wow-duration="1s" data-wow-delay="0.8s" style="text-align: center">
          <div class="row">
            <div class="col-lg-12">
              <div
                class="copyright d-sm-flex justify-content-center"
                style="
                  display: flex;
                  justify-content: center;
                  text-align: center;
                  width: 100%;
                  height: 100%;
                "
              >
                <div class="copyright-content" style="text-align: center">
                  <p class="text" style="text-align: center">
                    © <span id="copyright-year">2024</span> FinVeda. All rights
                    reserved<br />
                    Made with ♥ in India
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
        
      </div>
      <div id="particles-2"></div>
    </footer>
    <script>
      document.getElementById("copyright-year").textContent =
        new Date().getFullYear();
    </script>
    <div class="gtranslate_wrapper"></div>
    <script>
        window.gtranslateSettings = {
            "default_language": "en",
            "detect_browser_language": true,
            "wrapper_selector": ".gtranslate_wrapper"
        }
    </script>
    <script src="https://cdn.gtranslate.net/widgets/latest/float.js" defer></script>
    <script src="./assets/js/Licensing.js"></script>
    <script src="./assets/js/Licensingmodals.js"></script>
    <script src="./assets/js/subscribe.js"></script>
    <script src="./assets/js/vendor/jquery-1.12.4.min.js"></script>
    <script src="./assets/js/vendor/modernizr-3.7.1.min.js"></script>
    <script src="./assets/js/popper.min.js"></script>
    <script src="./assets/js/bootstrap.min.js"></script>
    <script src="./assets/js/plugins.js"></script>
    <script src="./assets/js/slick.min.js"></script>
    <script src="./assets/js/ajax-contact.js"></script>
    <script src="./assets/js/waypoints.min.js"></script>
    <script src="./assets/js/jquery.counterup.min.js"></script>
    <script src="./assets/js/jquery.magnific-popup.min.js"></script>
    <script src="./assets/js/jquery.easing.min.js"></script>
    <script src="./assets/js/scrolling-nav.js"></script>
    <script src="./assets/js/wow.min.js"></script>
    <script src="./assets/js/particles.min.js"></script>
    <script src="./assets/js/main.js"></script>
    <script src="./assets/js/popup.js"></script>
    <script src="./tools/smoothScroll.js"></script>

    <script>
      document.addEventListener("DOMContentLoaded", () => {
        setTimeout(() => {
          const loader = document.getElementById("loader");
          if (loader) {
            loader.style.display = "none";
          } else {
            console.error("Element with ID 'loader' not found.");
          }
        }, 500);

        // Update the date dynamically
        function updateLastUpdatedDate() {
          const dateElement = document.getElementById("last-updated-date");
          const now = new Date();
          const day = now.getDate();
          const monthNames = [
            "January", "February", "March", "April", "May", "June",
            "July", "August", "September", "October", "November", "December"
          ];
          const month = monthNames[now.getMonth()]; // Get the full month name
          const year = now.getFullYear();
          dateElement.textContent = `${month} ${day}, ${year}`;
        }

        // Update the date weekly
        function updateWeekly() {
          const now = new Date();
          const dayOfWeek = now.getDay(); // 0 (Sunday) to 6 (Saturday)
          const timeUntilNextUpdate = (7 - dayOfWeek) * 24 * 60 * 60 * 1000; // Time until next Sunday
          updateLastUpdatedDate();
          setTimeout(updateWeekly, timeUntilNextUpdate);
        }

        // Initialize weekly updates
        updateWeekly();
      });
    </script>
    <button id="scrollToTopBtn" class="scroll-top" aria-label="Scroll to top">
      <div class="scroll-top-icon">
        <i class="fa-solid fa-arrow-up"></i>
      </div>
      <svg class="progress-ring" width="60" height="60">
        <circle class="progress-ring__circle" stroke="#ffffff" stroke-width="4" fill="transparent" r="28" cx="30"
          cy="30"></circle>
      </svg>
    </button>
    <style>
      .scroll-top {
        position: fixed;
        right: 1.6%;
        background: #635adc;
        color: white;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        border: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
        box-shadow: 0 5px 15px rgba(255, 69, 159, 0.4);
        overflow: visible;
        z-index: 10;
        bottom: 15px;
        margin-right: 10px;
        /* Ensure button is on top */
      }

      .scroll-top.show {
        opacity: 1;
        visibility: visible;
      }

      .scroll-top:hover {
        transform: scale(1.1);
        /* Subtle scaling instead of expanding */
        box-shadow: 0 8px 20px rgba(255, 69, 159, 0.6);
        /* Slightly larger shadow */
      }

      .scroll-top:active {
        transform: scale(1.05);
        /* Minor scale reduction on click */
      }

      .scroll-top-icon {
        position: relative;
        z-index: 2;
        transition: transform 0.3s ease;
      }

      .scroll-top:hover .scroll-top-icon {
        transform: translateY(-3px);
      }

      /* Progress Ring Styling */
      .progress-ring {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transform: rotate(-90deg);
        /* To start from the top */
      }

      .progress-ring__circle {
        transition: stroke-dashoffset 0.35s;
        transform-origin: 50% 50%;
      }

      /* Pulse Animation */
      @keyframes pulse {
        0% {
          box-shadow: 0 5px 15px rgba(255, 69, 159, 0.4);
        }

        50% {
          box-shadow: 0 5px 15px rgba(255, 69, 159, 0.7);
        }

        100% {
          box-shadow: 0 5px 15px rgba(255, 69, 159, 0.4);
        }
      }

      .scroll-top:hover {
        animation: pulse 1.5s infinite;
      }

      .scroll-top.show {
        animation: none;
        /* No animation when showing the button */
      }

      .scroll-top.show:hover {
        animation: pulse 1.5s infinite;
        /* Pulse on hover */
      }
    </style>
    <script>
      // Get the button
      const scrollToTopBtn = document.getElementById("scrollToTopBtn");
      const progressCircle = document.querySelector(".progress-ring__circle");
      const radius = progressCircle.r.baseVal.value;
      const circumference = 2 * Math.PI * radius;

      // Set the circle progress properties
      progressCircle.style.strokeDasharray = `${circumference} ${circumference}`;
      progressCircle.style.strokeDashoffset = circumference;

      // Function to show or hide the button based on scroll position
      function toggleScrollButton() {
        if (window.scrollY > 100) {
          scrollToTopBtn.classList.add("show");
        } else {
          scrollToTopBtn.classList.remove("show");
        }
      }

      // Function to set the scroll progress on the button ring
      function setProgress(percent) {
        const offset = circumference - (percent / 100) * circumference;
        progressCircle.style.strokeDashoffset = offset;
      }

      // Listen for scroll events to update button visibility and progress
      window.addEventListener("scroll", () => {
        toggleScrollButton();
        const scrollPercent = (window.scrollY / (document.documentElement.scrollHeight - window.innerHeight)) * 100;
        setProgress(scrollPercent);
      });

      // Smooth scroll to top when the button is clicked
      scrollToTopBtn.addEventListener("click", () => {
        window.scrollTo({
          top: 0,
          behavior: "smooth"
        });
      });
    </script>

  </body>
</html>