h3 {
  margin-top: 70px;
}

.header-layout {
  display: flex;
  align-items: center;
  justify-content: flex-start; /* 把標題和Logo靠左對齊 */
}

.header-title {
  flex: 0 1 auto;
  margin-right: 1rem; /* 控制標題和圖形的間距 */
}

.header-logo {
  flex: 0 0 auto;
}

.logo-image {
  max-height: 500px;
  max-width: 500px;
}

.hr1{
  border: 1.2px solid gray;
}
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
   display: grid;
  grid-template-rows: 1fr auto;
}

.wrapper {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 50px);
}

footer {
 text-align: center;
  padding: 5px;
  background-color: #abbaba;
  color: #000;
}
@media (max-width: 768px) {
  .header-layout {
    flex-direction: column; /* 在小螢幕上垂直排列 */
    text-align: center;
  }

  .header-logo {
    margin-right: 0; /* 移除右側空間 */
    margin-top: 1rem; /* 加入頂部間距 */
  }

  .display-3 {
    font-size: 3.5rem; /* 調整標題大小 */
  }
}



.nav-tabs .nav-item.active-tab {
    background-color: #789090 ; /* 深色背景 */
    color: #eeeeee ; /* 浅色文字 */
    border-radius: 5px; /* 可选，圆角效果 */
    cursor: pointer; /* 为整个导航项添加鼠标手势 */
}

    .nav-tabs .nav-item.active-tab a {
        cursor: pointer; /* 確保所有 tab 項目顯示手指 */
        color: #eeeeee; /* 預設文字顏色 */
        text-decoration: none; /* 可選：移除下劃線 */
        display: flex;
        gap: 15px; /* 水平间距 */
    }

.nav-tabs .nav-item:hover a {
    color: #0d6efd; /* 滑鼠懸停時改變文字顏色 */
}