/* 通用設定 */
* {
  box-sizing: border-box;
  /* 保持原有字體，現代且易讀 */
  font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, "Helvetica Neue", Arial, sans-serif;
  margin: 0; /* 重置預設外邊距，以便更好地控制佈局 */
  padding: 0; /* 重置預設內邊距 */
}

body {
  line-height: 1.6; /* 增加行高，提升閱讀舒適度 */
  background-color: #242628; /* 確保背景顏色一致 */
  overflow-x: hidden; /* 防止橫向滾動 */
}

/* 容器佈局調整 */
.container {
  display: flex;
  flex-direction: column;
  align-items: center; /* 水平居中 */
  justify-content: center; /* 垂直居中，內容不足時也能美觀 */
  min-height: 100vh; /* 確保至少佔滿整個視窗高度 */
  width: 100%;
  padding: 80px 20px; /* 增加上下內距，左右留一點空間 */
  background-color:rgba(36, 38, 40, 0.9); /* 保持背景色 */
  background-image: url(./assets/world.png);
  background-repeat: no-repeat;
  background-size: cover; /* 背景圖片覆蓋整個容器 */
  background-position: center center; /* 背景圖片置中 */
  text-align: center; /* 確保內部所有文字都居中 */
  position: relative; /* 用於定位背景圖等 */
}

/* 標題區塊 `header` 調整 */
.header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 50px; /* 增加與下方選項區塊的間距 */
}

.header h3 {
  color: #ffffff;
  font-size: 28px; /* 稍微放大，增加視覺衝擊力 */
  font-weight: 300; /* 使用較輕的字重，增加現代感 */
  letter-spacing: 2px; /* 增加字距，讓文字更有質感 */
  margin-bottom: 10px; /* 增加與H1的間距 */
}

.header > h1 {
  color: #ff9e40; /* 保持原有強調色 */
  font-size: 64px; /* 顯著放大主標題，更具品牌識別度 */
  font-weight: 700; /* 加粗字重，強調品牌名稱 */
  line-height: 1.2;
  margin-bottom: 20px; /* 增加與段落的間距 */
  text-shadow: 0 0 10px rgba(255, 158, 64, 0.5); /* 輕微光暈效果 */
}

.header > p {
  color: #ffffff;
  font-size: 20px; /* 段落文字稍微縮小，與H1形成對比 */
  line-height: 1.6; /* 增加行高，提升閱讀性 */
  margin: 8px 0; /* 調整段落間距 */
  max-width: 450px; /* 限制段落寬度，讓文字更集中易讀 */
}

/* 選項區塊 `.options` 調整 */
.options {
  display: flex;
  flex-direction: row; /* 保持水平排列 */
  flex-wrap: wrap; /* 允許項目換行 */
  justify-content: center; /* 項目在換行時保持居中 */
  gap: 40px; /* 增加圖片之間的間距 */
  margin-top: 40px; /* 增加與上方段落的間距 */
}

.options > a {
  color: #ffffff;
  text-decoration: none; /* 移除底線，更簡潔現代 */
  font-weight: 500;
  font-size: 22px;
  line-height: 1.5;
  display: flex;
  flex-direction: column; /* 圖片和文字垂直排列 */
  align-items: center;
  gap: 15px; /* 圖片和文字之間的間距 */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* 添加平滑過渡效果 */
  text-align: center;
  padding: 15px; /* 增加點擊區域的內距 */
  border-radius: 12px; /* 圓角效果 */
  background-color: rgba(255, 255, 255, 0.05); /* 輕微半透明背景，增加層次 */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); /* 柔和的陰影 */
}

.options > a:hover {
  transform: translateY(-8px); /* 滑鼠懸停時上浮效果，更明顯 */
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.5); /* 陰影更明顯 */
}

.options > a img {
  width: 180px;
  height: 180px;
  object-fit: cover; /* 確保圖片不變形 */
  border-radius: 15px; /* 圖片圓角 */
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35); /* 為圖片添加陰影，增加立體感 */
  transition: transform 0.3s ease;
}

.options > a:hover img {
    transform: scale(1.05); /* 滑鼠懸停時圖片輕微放大 */
}

/* 移除原有針對第一個a標籤的margin-right */
.options > a:first-of-type {
    margin-right: 0;
}

/* "更多服務選擇" 按鈕調整 */
.learn-more {
  margin-top: 60px; /* 增加與上方內容的間距 */
}

.learn-more > a > button {
  background: #f6821f; /* 保持原有橘色 */
  border-radius: 50px; /* 讓按鈕呈現圓角膠囊狀，更現代 */
  border: none;
  width: 250px; /* 稍微加大按鈕寬度 */
  height: 65px; /* 稍微加大按鈕高度 */
  color: #ffffff;
  font-weight: 600;
  font-size: 24px; /* 放大文字，更清晰 */
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(246, 130, 31, 0.4); /* 柔和的陰影，增加立體感 */
  transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; /* 添加過渡效果 */
  letter-spacing: 1px; /* 輕微字距 */
}

.learn-more > a > button:hover {
  background: #e07218; /* 滑鼠懸停時顏色稍深 */
  transform: translateY(-5px); /* 輕微上浮效果 */
  box-shadow: 0 15px 30px rgba(246, 130, 31, 0.6); /* 陰影更明顯 */
}

/* Logo 和底部資訊調整 */
.logo {
  margin-top: 80px; /* 增加與上方按鈕的間距 */
  margin-bottom: 25px; /* 增加與下方客服信箱的間距 */
}

.logo > a > img {
  width: 100px; /* 稍微放大 logo */
  height: auto; /* 保持圖片比例 */
  opacity: 0.85; /* 輕微透明，增加融入感 */
  transition: opacity 0.3s ease;
}

.logo > a:hover img {
    opacity: 1; /* 滑鼠懸停時恢復不透明 */
}

.container > p {
  color: #aaaaaa; /* 調整為淺灰色，與白色文字區分但保持和諧 */
  font-size: 15px; /* 底部文字調整為較小的字體 */
  margin: 5px 0; /* 調整行距 */
}

/* 響應式設計優化 */
@media screen and (max-width: 1024px) {
    .header > h1 {
        font-size: 56px;
    }
    .options {
        gap: 30px;
    }
    .options > a img {
        width: 160px;
        height: 160px;
    }
    .learn-more > a > button {
        width: 220px;
        height: 60px;
        font-size: 20px;
    }
    .logo > a > img {
        width: 80px;
    }
}

@media screen and (max-width: 768px) {
    .container {
        padding: 60px 15px;
    }
    .header h3 {
        font-size: 24px;
    }
    .header > h1 {
        font-size: 48px;
    }
    .header > p {
        font-size: 18px;
        max-width: 90%;
    }
    .options {
        flex-direction: column; /* 在平板和手機上堆疊顯示 */
        gap: 30px;
        margin-top: 30px;
    }
    .options > a {
        width: 90%; /* 讓選項佔用更多寬度 */
        max-width: 300px; /* 限制最大寬度 */
    }
    .options > a img {
        width: 150px;
        height: 150px;
    }
    .learn-more {
        margin-top: 40px;
    }
    .learn-more > a > button {
        width: 180px;
        height: 50px;
        font-size: 18px;
    }
    .logo {
        margin-top: 50px;
        margin-bottom: 20px;
    }
    .logo > a > img {
        width: 80px;
    }
    .container > p {
        font-size: 14px;
    }
}