.footer {
  width: 100%;
  background-color: #222;
  color: #ccc;
  padding: 40px 0;

  .container {
    width: 1200px;
    margin: 0 auto;

    .footer-nav {
      display: flex;
      justify-content: space-between;
      margin-bottom: 40px;

      .nav-column {
        display: flex;
        flex-direction: column;
        gap: 12px;

        h3 {
          font-size: 16px;
          color: #fff;
          margin-bottom: 8px;
          font-weight: normal;
        }

        a {
          color: #ccc;
          text-decoration: none;
          font-size: 14px;
          transition: color 0.3s;

          &:hover {
            color: #fff;
          }
        }

        &.qrcode-column {
          align-items: flex-start;

          .qrcode {
            width: 80px;
            height: 80px;
            background-color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;

            img {
              width: 100%;
              height: 100%;
            }
          }
        }
      }
    }
    .lines {
      width: 1200px;
      height: 1px;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 0px 0px 0px 0px;
      margin-bottom: 40px;
    }

    .payment-icons {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 35px;
      margin-bottom: 20px;

      img {
        height: 50px;
        object-fit: contain;
      }
    }

    .bottom-links {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 79px;

      a {
        color: #ccc;
        text-decoration: none;
        font-size: 14px;
        transition: color 0.3s;

        &:hover {
          color: #fff;
        }
      }
    }
  }
}