src/foot.css

.labassist-footer {
  background-color: #111122; /* 頁腳背景色，比 body 略深 */
  padding: 60px 40px; /* 上下左右內邊距 */
  display: flex;
  flex-direction: column; /* 讓主要內容和底部版權資訊垂直堆疊 */
  align-items: center; /* 讓整個 footer 的內容水平居中（在有 max-width 的情況下） */
}

/* 主要內容區域：包含四個列 */
.footer-main-content {
  display: flex;
  justify-content: space-between; /* 將四個列均勻分佈在水平空間 */
  width: 100%; /* 佔滿父容器寬度 */
  max-width: 1200px; /* 限制內容的最大寬度，使其不會太寬 */
  margin-bottom: 50px; /* 與底部版權資訊的間距 */
  flex-wrap: wrap; /* 允許在小螢幕上換行 */
}

/* 每一個列（公司資訊、Product、Support、Company） */
.footer-column {
  flex-basis: 22%; /* 讓每列佔據大約 22% 的空間，以便容納 4 列並留有間距 */
  /* 可以根據內容調整 flex-basis，或者使用 flex-grow: 1; 讓它們自動分配空間 */
  margin-bottom: 20px; /* 小螢幕換行時的間距 */
}

.footer-column h4 {
  font-size: 1.1em;
  color: #FFFFFF; /* 標題文字白色 */
  margin-bottom: 15px; /* 標題與下方連結的間距 */
  font-weight: bold;
}

.footer-column ul {
  list-style: none; /* 移除列表點 */
}

.footer-column ul li {
  margin-bottom: 8px; /* 連結之間的間距 */
}

.footer-column ul li a {
  color: #B0B0B0; /* 連結文字顏色 */
  text-decoration: none; /* 移除下劃線 */
  font-size: 0.95em;
  transition: color 0.3s ease; /* 平滑過渡效果 */
}

.footer-column ul li a:hover {
  color: #FFFFFF; /* 鼠標懸停時變白 */
}

/* 左側公司資訊區塊特有樣式 */
.company-info {
  flex-basis: 30%; /* 給公司資訊列更多空間 */
  min-width: 250px; /* 確保在小螢幕上有足夠寬度 */
}

.company-logo-section {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.footer-logo {
  height: 30px; /* Logo 高度 */
  margin-right: 10px;
}

.company-logo-section span {
  font-size: 1.2em;
  font-weight: bold;
  color: #FFFFFF;
}

.company-info p {
  font-size: 0.9em;
  line-height: 1.6;
  margin-bottom: 20px;
  color: #B0B0B0;
}

.social-icons {
  display: flex;
  gap: 15px; /* 圖標間距 */
}

.social-icons a img {
  width: 20px; /* 圖標大小 */
  height: 20px;
  filter: invert(100%) brightness(80%); /* 將圖標顏色反轉為淺色 */
  transition: filter 0.3s ease;
}

.social-icons a:hover img {
  filter: invert(100%) brightness(100%); /* 鼠標懸停時變亮 */
}


/* 底部版權資訊區域 */
.footer-bottom-bar {
  border-top: 1px solid #333344; /* 上方加一條細分隔線 */
  padding-top: 30px;
  width: 100%;
  max-width: 1200px; /* 與主要內容寬度保持一致 */
  display: flex;
  justify-content: space-between; /* 版權資訊靠左，法律連結靠右 */
  align-items: center; /* 垂直居中對齊 */
  font-size: 0.85em;
  color: #888899; /* 較淺的灰色 */
}

.footer-legal-links a {
  color: #888899;
  text-decoration: none;
  margin-left: 20px; /* 連結之間的間距 */
  transition: color 0.3s ease;
}

.footer-legal-links a:hover {
  color: #FFFFFF;
}

/* 響應式設計：小螢幕適應 */
@media (max-width: 768px) {
  .labassist-footer {
    padding: 40px 20px;
  }

  .footer-main-content {
    flex-direction: column; /* 小螢幕時，列變成垂直堆疊 */
    align-items: flex-start; /* 讓每個列都靠左對齊 */
    gap: 30px; /* 列之間的間距 */
  }

  .footer-column {
    flex-basis: 100%; /* 每列佔據全部寬度 */
    max-width: 100%; /* 確保最大寬度 */
  }

  .footer-bottom-bar {
    flex-direction: column; /* 版權和法律連結垂直堆疊 */
    text-align: center;
  }

  .footer-legal-links {
    margin-top: 15px; /* 與版權資訊的間距 */
  }

  .footer-legal-links a {
    margin: 0 10px; /* 調整連結間距 */
  }
}

@media (max-width: 480px) {
  .labassist-footer {
    padding: 30px 15px;
  }

  .footer-main-content {
    gap: 20px;
  }

  .social-icons {
    gap: 10px;
  }
}