@media (max-width: 768px) {
    .main-nav ul {
      flex-direction: column;
      text-align: center;
    }
  
    .main-nav ul li {
      margin: 0.5rem 0;
    }
  
    .site-header .logo {
      float: none;
      text-align: center;
    }
}