html
{
 margin: 0;
 padding: 0;
}

body
{
 margin: 0;
 padding: 0;
 font-family: "Lato", sans-serif;
 font-optical-sizing: auto;
 font-size: small;
 font-weight: 300;
 font-style: normal;
}

.logo {
  height: 100px;
  margin-left: 50px;
}

.nav-item-span {
  font-size: larger;
  padding-left: 5px;
}

.nav-item-span:hover {
  text-decoration: underline;
  font-size: larger;
  padding-left: 5px;
}

.sm_logo {
  width: 20px;
}

.footer-columns {
  display: flex;  /* Or use grid */
  justify-content: space-around; /* Distribute space evenly */
  /* align-items: center; Align items vertically if needed   */
}

.column1, .column2, .column3, .column4 {
  width: calc(25% - 10px); /* Adjust as needed */
  padding: 10px;
}

@media screen and (max-width: 900px) {
  .logo {
    height: 70px;
  }
  .nav-item-span {
    font-size: small;
  }

  .nav-item-span:hover {
    font-size: small;
  }  
}

@media screen and (max-width: 600px) {
  .footer-columns {
    flex-wrap: wrap;
  }  
  .column1, .column2, .column3, .column4 {
    width: 100%;
  }
}