/* Set the body and html to take up full height */
html, body {
  height: 100%;
  margin: 0;
  font-family: "Montserrat", sans-serif; /* Add Montserrat to body */
}

/* Make the page container a flex container */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Footer container */
footer {
  background-color: #000;
  padding-top: 40px;
  padding-bottom: 30px;
  display: flex;
  flex-direction: column;
  align-items: center; /* Center content horizontally */
  justify-content: center; /* Center content vertically */
  width: 100%;
  flex-shrink: 0;
  box-sizing: border-box; /* Ensures padding does not affect width/height */
  margin-top: auto;
}

/* Main content can be styled as usual */
main {
  flex: 1;  /* Allow main content to grow and push footer down */
}

/* Social Icons container */
footer .social-icons {
  display: flex;
  gap: 25px; /* Adjust space between icons */
  justify-content: center; /* Center social icons horizontally */
  margin-bottom: 10px; /* Space between icons and copyright text */
  box-sizing: border-box; /* Prevent padding or margins from affecting layout */
}

/* Social Icon Styles */
footer .social-icons .social-icon {
  width: 28px;
  height: 28px;
  transition: transform 0.3s ease;
}

footer .social-icons .social-icon img {
  width: 100%;
  height: 100%;
}

footer .social-icons .social-icon:hover img {
  transform: scale(1.1); /* Slight zoom effect on hover */
}

/* Copyright Styles */
footer .copyright {
  font-size: 14px;
  color: #fff;
  text-align: center; /* Center the copyright text */
  margin-top: 10px; /* Space between social icons and copyright text */
}