take this website and add in the footer in the appropriate position these elements:

add inbetween where to find us and contact us, Address information: This could include the company's address, phone number, email address, and social media links.
 Add above everything in the footer Navigation links with cool hovers: The website footer can include links to important pages on the website, such as the company's product pages, FAQs, and customer service pages.
between where to find us and the newsletter subscribe.php in the footer, add Privacy policy and terms of service: These are important legal documents that protect both the company and its customers.



HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Cabin:wght@400;700&display=swap">
<link rel="stylesheet" href="style/style.css" />
<title>Camping Equipment - Retail Camping Company</title>
</head>
<body>
<header>
<div class="nav-container">
<img src="C:/Users/Kaddra52/Desktop/DDW/assets/images/logo.svg" alt="Logo" class="logo">
<h1>Retail Camping Company</h1>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="camping-equipment.html">Camping Equipment</a></li>
<li><a href="furniture.html">Furniture</a></li>
<li><a href="reviews.html">Reviews</a></li>
<li><a href="basket.html">Basket</a></li>+
<li><a href="offers-and-packages.html">Offers and Packages</a></li>
</ul>
</nav>
</div>
</header>
   <!-- Home Page -->
   <main>
      <section>
         <!-- Insert slide show here -->
         <div class="slideshow-container">
            <div class="mySlides">
               <img src="https://via.placeholder.com/600x400" alt="Tents" style="width:100%">
            </div>
            <div class="mySlides">
               <img src="https://via.placeholder.com/600x400" alt="Cookers" style="width:100%">
            </div>
            <div class="mySlides">
               <img src="https://via.placeholder.com/600x400" alt="Camping Gear" style="width:100%">
            </div>
         </div>
      </section>
      <section>
         <!-- Display special offers and relevant images -->
         <div class="special-offers-container">
            <div class="special-offer">
               <img src="https://via.placeholder.com/200x200" alt="Tent Offer">
               <p>20% off premium tents!</p>
            </div>
            <div class="special-offer">
               <img src="https://via.placeholder.com/200x200" alt="Cooker Offer">
               <p>Buy a cooker, get a free utensil set!</p>
            </div>
            <div class="special-offer">
               <img src="https://via.placeholder.com/200x200" alt="Furniture Offer">
               <p>Save on camping furniture bundles!</p>
            </div>
         </div>
      </section>
      <section class="buts">
         <!-- Modal pop-up window content here -->
         <button id="modalBtn">Special Offer!</button>
         <div id="modal" class="modal">
            <div class="modal-content">
               <span class="close">×</span>
               <p>Sign up now and receive 10% off your first purchase!</p>
            </div>
         </div>
      </section>
   </main>
   <footer>
<div class="footer-container">

<div class="footer-item">
<p>Contact Us:</p>
<ul class="social-links">
<li><a href="https://www.facebook.com">Facebook</a></li>
<li><a href="https://www.instagram.com">Instagram</a></li>
<li><a href="https://www.twitter.com">Twitter</a></li>
</ul>
</div>

<div class="footer-item">
<p>Where to find us: </p>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3843.534694025997!2d14.508501137353216!3d35.89765941458404!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x130e452d3081f035%3A0x61f492f43cae68e4!2sCity Gate!5e0!3m2!1sen!2smt!4v1682213255989!5m2!1sen!2smt” width="600" height="200" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>

<div class="footer-item">
<p>Subscribe to our newsletter:</p>
<form action="subscribe.php" method="post">
<input type="email" name="email" placeholder="Enter your email" required>
<button type="submit">Subscribe</button>
</form>
</div>

</div>
</footer>
   <script>

// Get modal element
var modal = document.getElementById('modal');
// Get open model button
var modalBtn = document.getElementById('modalBtn');
// Get close button
var closeBtn = document.getElementsByClassName('close')[0];
// Listen for open click
modalBtn.addEventListener('click', openModal);
// Listen for close click
closeBtn.addEventListener('click', closeModal);
// Listen for outside click
window.addEventListener('click', outsideClick);

// Function to open modal
function openModal() {
modal.style.display = 'block';
}

// Function to close modal
function closeModal() {
modal.style.display = 'none';
}

// Function to close modal if outside click
function outsideClick(e) {
if (e.target == modal) {
modal.style.display = 'none';
}
}
   </script>
</body>
</html>

CSS:
html, body, h1, h2, h3, h4, p, a, ul, li, div, main, header, section, footer, img {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font-family: inherit;
  vertical-align: baseline;
  box-sizing: border-box;
}

body {
  font-family: 'Cabin', sans-serif;
  line-height: 1.5;
  color: #333;
  width: 100%;
  margin: 0;
  padding: 0;
  min-height: 100vh;
  flex-direction: column;
  display: flex;
  background-image: url("../assets/images/cover.jpg");
  background-size: cover;
}
header {
  background: #00000000;
  padding: 0.5rem 2rem;
  text-align: center;
  color: #32612D;
  font-size: 1.2rem;
}
main{
  flex-grow: 1;
}

.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.logo {
  width: 50px;
  height: auto;
  margin-right: 1rem;
}

h1 {
  flex-grow: 1;
  text-align: left;
}

nav ul {
  display: inline;
  list-style: none;
}

nav ul li {
  display: inline;
  margin-left: 1rem;
}

nav ul li a {
  text-decoration: none;
  color: #32612D;
}

nav ul li a:hover {
  color: #000000;
}

@media screen and (max-width: 768px) {
  .nav-container {
    flex-direction: column;
  }
  h1 {
    margin-bottom: 1rem;
  }
}
nav ul li a {
  position: relative;
}

nav ul li a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #000;
  transform: scaleX(0);
  transition: transform 0.3s;
}

nav ul li a:hover::after {
  transform: scaleX(1);
}

.slideshow-container {
width: 100%;
position: relative;
margin: 1rem 0;
}

.mySlides {
display: none;
}

.mySlides img {
width: 100%;
height: auto;
}

.special-offers-container {
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
margin: 1rem 0;
}

.special-offer {
width: 200px;
padding: 1rem;
text-align: center;
margin: 1rem;
background-color: #ADC3AB;
border-radius: 5px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}

.special-offer:hover {
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
transform: translateY(-5px);
}

.special-offer img {
width: 100%;
height: auto;
margin-bottom: 0.5rem;
border-radius: 5px;
}

.modal {
display: none;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 1;
overflow: auto;
align-items: center;
}

.modal-content {
background-color: #fefefe;
padding: 2rem;
margin: 10% auto;
width: 30%;
min-width: 300px;
max-width: 80%;
text-align: center;
border-radius: 5px;
box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1);
}
.buts{

text-align: center;
}

.close {
display: block;
text-align: right;
font-size: 2rem;
color: #333;
cursor: pointer;
}

footer {
  background: #32612D;
  padding: 1rem;
  text-align: center;
  margin-top: auto;
}

.footer-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.footer-item {
  margin: 1rem 2rem;
}

footer p {
color: #fff;
margin-bottom: 1rem;
}

footer ul {
list-style: none;
}

footer ul li {
display: inline;
margin: 0.5rem;
}

footer ul li a {
text-decoration: none;
color: #fff;
}

@media screen and (max-width: 768px) {
.special-offers-container {
flex-direction: column;
}
}

@media screen and (max-width: 480px) {


h1 {
display: block;
margin-bottom: 1rem;
}
}

.catalog {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: 2rem 0;
}

.catalog-item {
width: 200px;
padding: 1rem;
margin: 1rem;
background-color: #ADC3AB;
border-radius: 5px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
text-align: center;
}

.catalog-item:hover {
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.catalog-item img {
width: 100%;
height: auto;
margin-bottom: 0.5rem;
border-radius: 5px;
}

.catalog-item h3 {
margin-bottom: 0.5rem;
}

.catalog-item p {
margin-bottom: 0.5rem;
}

.catalog-item button {
background-color: #32612D;
color: #fff;
padding: 0.5rem;
border: none;
border-radius: 5px;
cursor: pointer;
}

.catalog-item button:hover {
background-color: #ADC3AB;
}
footer form {
   display: inline-flex;
   align-items: center;
}

footer input[type="email"] {
   padding: 0.5rem;
   border: none;
   border-radius: 5px;
   margin-right: 0.5rem;
}

footer button {
   background-color: #ADC3AB;
   color: #32612D;
   padding: 0.5rem;
   border: none;
   border-radius: 5px;
   cursor: pointer;
}

footer button:hover {
   background-color: #32612D;
   color: #fff;
}
.special-offer .social-share {
   display: inline-flex;
   align-items: center;
   justify-content: space-around;
   margin-top: 0.5rem;
}

.special-offer .social-share a {
   text-decoration: none;
   color: #32612D;
}

.special-offer .social-share a:hover {
   color: #ADC3AB;
}