Help customising a theme

Hi friends,

Firstly, I appreciate your tremendous work and interactive learning

I have purchased a responsive multi purpose HTML5 theme package and it is great. I almost have customized all the desired pages of concern out of it. the only issue I have right now is with footer. I finally choosed one of the package footers and customized it to my needs, I just removed the un-necessary parts of it and included others. I didn’t modify the style sheet or anything else. I just edited the footer, and now it looks like the following when I put it in empty HTML page.
My question: with all the staff and various pages included in the theme package, I’m confused how to link this footer to all the pages I made without having to copy and paste manually all the code to all the pages. and also to make it easier for me in the future when I add or remove an item from the footer, then I can make it from the footer file without doing that with all pages which it will take a lot of time.
Please note that I’m familiar now with HTML and CSS and I use code editor along with Dreamweaver v2021 which works perfectly with your templates without issues.
Also, is their HTML code I can include in the head side of any page which will define the footer I designed below and will load it from the store location

I really appreciate your kind assistance in this regards

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>footer</title>
</head>

	<!-- Stylesheets
	============================================= -->
	<link href="https://fonts.googleapis.com/css?family=Lato:300,400,400i,700|Poppins:300,400,500,600,700|PT+Serif:400,400i&display=swap" rel="stylesheet" type="text/css" />
	<link rel="stylesheet" href="css/bootstrap.css" type="text/css" />
	<link rel="stylesheet" href="style.css" type="text/css" />
	<link rel="stylesheet" href="css/dark.css" type="text/css" />
	<link rel="stylesheet" href="css/font-icons.css" type="text/css" />
	<link rel="stylesheet" href="css/animate.css" type="text/css" />
	<link rel="stylesheet" href="css/magnific-popup.css" type="text/css" />

	<link rel="stylesheet" href="css/custom.css" type="text/css" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	
	
<body>
	
<footer>
	
		<!-- Footer
		============================================= -->
		<footer id="footer" class="dark" style="background: url('images/footer-bg.jpg') repeat; background-size: cover;">
			<div class="container">
				<!-- Footer Widgets
				============================================= -->
				<div class="footer-widgets-wrap">

					<div class="row col-mb-50">
						<div class="col-md-8">
							<div class="widget clearfix">

									<div class="row col-mb-30">
									<div class="col-6 col-lg-3 widget_links">
										<ul>
											<li><a href="#">Home</a></li>
											<li><a href="#">About</a></li>
											<li><a href="#">FAQs</a></li>
											<li><a href="#">Support</a></li>
											<li><a href="#">Contact</a></li>
										</ul>
									</div>

									<div class="col-6 col-lg-3 widget_links">
										<ul>
											<li><a href="#">test</a></li>
											<li><a href="#">test</a></li>
											<li><a href="#">test</a></li>
											<li><a href="#">test</a></li>
											<li><a href="#">test</a></li>
										</ul>
									</div>

									<div class="col-6 col-lg-3 widget_links">
										<ul>
											<li><a href="#">test</a></li>
											<li><a href="#">test</a></li>
											<li><a href="#">test</a></li>
											<li><a href="#">test</a></li>
											<li><a href="#">test</a></li>
										</ul>
									</div>

									<div class="col-6 col-lg-3 widget_links">
										<ul>
											<li><a href="#">test</a></li>
											<li><a href="#">test</a></li>
											<li><a href="#">test</a></li>
											<li><a href="#">test</a></li>
											<li><a href="#">test</a></li>
										</ul>
									</div>
								</div>

							</div>
						</div>

					<div class="col-md-4">&nbsp;</div>
					</div>

				</div><!-- .footer-widgets-wrap end -->
			</div>

			<!-- Copyrights
			============================================= -->
			<div id="copyrights">
				<div class="container">

					<div class="row justify-content-between col-mb-30">
						<div class="col-12 col-lg-auto text-center text-lg-left">
							<div class="copyrights-menu copyright-links clearfix">
							</div>
							Copyrights &copy; 2006-2021 test<br>
                            test<br>
							Published by test
                            
						</div>

						<div class="col-12 col-lg-auto text-center text-lg-right">
							<p class="text-left">Connect withtest<br>
						    founder and publisher</p>
							
							<a href="https://www.linkedin.com/in/test" class="social-icon inline-block si-small si-borderless mb-0 si-twitter">
								<i class="icon-linkedin"></i>
								<i class="icon-linkedin"></i><br>
                           	</a>

							<a href="https://www.youtube.com/user/test" class="social-icon inline-block si-small si-borderless mb-0 si-gplus">
								<i class="icon-youtube"></i>
								<i class="icon-youtube"></i>
							</a>

							<a href="https://.blogspot.com/" class="social-icon inline-block si-small si-borderless mb-0 si-pinterest">
								<i class="icon-blogger"></i>
								<i class="icon-blogger"></i>
							</a>

							<a href="https://twitter.com/test" class="social-icon inline-block si-small si-borderless mb-0 si-vimeo">
								<i class="icon-twitter"></i>
								<i class="icon-twitter"></i>
							</a>

							<a href="mailto:e@test.com" class="social-icon inline-block si-small si-borderless mb-0 si-github">
								<i class="icon-mail"></i>
								<i class="icon-mail"></i>
							</a>

							</div>
					</div>

				</div>
			</div><!-- #copyrights end -->
		</footer><!-- #footer end -->

	</div><!-- #wrapper end 'images/footer-bg.jpg'-->

	<!-- Go To Top
	============================================= -->
	<div id="gotoTop" class="icon-angle-up"></div>

	<!-- JavaScripts
	============================================= -->
	<script src="js/jquery.js"></script>
	<script src="js/plugins.min.js"></script>

	<!-- Footer Scripts
	============================================= -->
	<script src="js/functions.js"></script>
	
	
</footer>
</body>
</html>