footer {
    position: relative;
    width:94%;
    margin: auto;
    padding: 40px 3% 20px;
    height: fit-content;
  }
  
  footer h1 {


    font-family:sans-serif;
align-items: baseline;
    font-size: 20px;
    letter-spacing: 6px;
  }
  
  footer h1 span {
    font-size: 15px;
    letter-spacing: 3px;
    margin: 0 10px 0 0px;
  }
  
  footer h1 .logo {
    width: 60px;
    margin: 0 10px 0 0;
  }
  
  footer h1 .logo img {
    width: 100%;
    height: auto;
    object-fit: cover;
  }
  
  footer ul {
    margin: 20px 0 40px;
  }
  
  footer ul li {
    font-size: 13px;
    border-left: 0.5px solid #333;
    padding: 0 10px 0 20px;
    letter-spacing: 2px;
  }
  
  footer ul li a {
    color: inherit;
    text-decoration: none;
  }
  
  footer ul li:first-child{    padding: 0 10px 0 0px;}
  footer ul li:first-child {
    border: none;
    padding-right: 10px; /* simplified */
  }
  
  footer .copyright {
    font-size: 13px;
  color: #888888;
  }
  
  /* ===== 768px ===== */
  @media (max-width: 768px) {

  
    footer h1 {
      font-size: 20px;
      letter-spacing: 4px;
    }
  
    footer h1 span {
      font-size: 13px;
      letter-spacing: 2px;
      margin: 0 10px 0 0px;
    }
  
    footer h1 .logo {
      width: 55px;
    }
  
    footer ul {
      margin: 20px 0;
    }
  
    footer ul li {
      font-size: 13px;
      letter-spacing: 2px;
      padding: 0 15px;
    }
  
    footer .copyright {
      font-size: 10px;
    }
  }
  
  /* ===== 600px ===== */
  @media (max-width: 600px) {

    footer {
      padding: 20px 0 20px;
    width: 95%;
  }


    footer h1 {
      font-size: 18px;
      letter-spacing: 2px;
    }
  
    footer h1 span {
      font-size: 13px;
      margin: 0 5px 0 0px;
    }
  
    footer h1 .logo {
      width: 50px;
    }
  
    footer ul {
      margin: 30px 0;
      display: block;
    }
  
    footer ul li {
     font-size: 10px;
      border: none;
      margin: 20px 0;
      padding: 0;
    }
  }
  
  /* ===== 320px ===== */
  @media (max-width: 320px) {
    footer {
        padding: 20px 0 20px;
      width: 95%;
    }
  
    footer h1 {
      display: block;
      text-align: center;
      font-size: 18px;
      letter-spacing: 1px;
    }
  
    footer h1 .logo {
      width: 100px;
      margin: 10px auto;
    }
  
    footer h1 .logo img {
      width: 100px; /* explicit width for smallest size */
    }
  
    footer h1 span {
      font-size: 13px;
      margin: 0 5px 0 0px;
    }
  
    footer ul {
      margin: 30px 0;
      display: block;
    }
  
    footer ul li {
      border: none;
      text-align: center;
      margin: 25px 0;
      padding: 0;
    }
  
    footer .copyright {
      width: 100%;
      margin: auto;
      text-align: center;

    }
  }