rewrite my whole css and html but make my footer look much more professional and better in terms of layout, also please do not use curly quotation marks but use these (")



html and css:
<!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>Follow us on social media:</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">
            <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d807.7372184221917!2d14.4785827695389!3d35.9237514330982!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2smt!4v1682008279222!5m2!1sen!2smt" width="200" height="200" style="border:0;" allowfullscreen="""loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
         </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 {
  position: relative;
  bottom: 0px;
  background: #32612D;
  padding: 1rem;
  text-align: center;
  margin-top: auto;
}

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;
}