/* style.css (Updated Version) */

/* 全局樣式 */
body {
    font-family: 'Poppins', 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #333333; /* 改為柔和的淺灰色背景 */
    color: #343a40; /* 設定更一致的基礎文字顏色 */
    line-height: 1.8; /* 增加行高以提高可讀性 */
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 100vh;
    padding-top: 50px; /* 頂部留白 */
    padding-bottom: 50px; /* 底部留白，避免內容貼底 */
    box-sizing: border-box;
}

.container {
    max-width: 760px; /* 調整最大寬度 */
    width: 90%;
    background: #ffffff; /* 內容區塊改為純白，更乾淨 */
    padding: 40px 50px;
    border-radius: 16px; /* 更大的圓角 */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); /* 更現代、細膩的陰影 */
    box-sizing: border-box;
}

/* 頁首 Header */
.header {
    text-align: center;
    margin-bottom: 45px;
}

.header h3 {
    font-size: 1.5em; /* 放大副標題 */
    color: #17a2b8; /* 改為更現代的藍綠色 */
    font-weight: 500;
    margin-bottom: 10px;
    letter-spacing: 0.5px;
}

.header h1 {
    font-size: 3.2em; /* 放大主標題 */
    color: #212529; /* 使用深度灰，對比更清晰 */
    font-weight: 700;
    margin-bottom: 15px;
    letter-spacing: 1px;
}

.header p {
    font-size: 1.2em; /* 放大段落文字 */
    color: #5a6268; /* 柔和的灰色文字 */
    margin-bottom: 8px;
}

.header p:last-of-type {
    margin-bottom: 25px;
}

/* 服務選項 */
.options {
    display: flex;
    justify-content: space-between; /* 讓卡片左右分佈 */
    gap: 30px; /* 選項之間的間距 */
    margin-bottom: 45px;
    flex-wrap: wrap; /* 當空間不足時換行 */
}

.option-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    background-color: #fff;
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08); /* 調整陰影以適應新背景 */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    flex: 1; /* 讓卡片平分空間 */
    min-width: 280px; /* 最小寬度，避免過窄 */
    box-sizing: border-box;
    border: 1px solid #e9ecef; /* 細邊框 */
}

.option-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.1); /* 調整懸停陰影 */
    color: #117a8b; /* 懸停時顏色加深 */
}

.option-card img {
    width: 120px; /* 調整圖片大小 */
    height: 120px;
    border-radius: 10px; /* 圖片圓角 */
    margin-bottom: 20px;
    object-fit: cover; /* 確保圖片不變形且填滿 */
}

.option-card span {
    font-size: 1.3em; /* 放大服務名稱 */
    color: #343a40; /* 服務名稱顏色 */
    font-weight: 600; /* 加粗 */
    text-align: center;
}

/* "更多服務選擇" 按鈕 */
.learn-more {
    text-align: center;
    margin-top: 30px;
    margin-bottom: 40px;
}

.learn-more button {
    padding: 16px 40px; /* 調整按鈕大小，使其更大方 */
    background-image: linear-gradient(to right, #17a2b8 0%, #117a8b 100%); /* 更新漸層背景色 */
    color: white;
    border: none;
    border-radius: 30px; /* 更圓的按鈕 */
    cursor: pointer;
    font-size: 1.2em; /* 放大按鈕文字 */
    font-weight: 500; /* 調整字重 */
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(23, 162, 184, 0.3); /* 配合新顏色調整陰影 */
}

.learn-more button:hover {
    background-image: linear-gradient(to right, #138496 0%, #0d5c68 100%);
    box-shadow: 0 6px 20px rgba(23, 162, 184, 0.4);
    transform: translateY(-2px);
}

.learn-more button:active {
    transform: translateY(0);
    box-shadow: 0 2px 10px rgba(23, 162, 184, 0.2);
}

.learn-more button i {
    margin-left: 10px; /* 圖標與文字間距 */
    font-size: 0.9em; /* 調整圖標大小 */
}

/* Logo */
.logo-container {
    text-align: center;
    margin-top: 40px;
    margin-bottom: 30px;
}

.hgw-logo {
    max-width: 120px; /* 限制 logo 大小 */
    height: auto;
    opacity: 0.85;
    transition: opacity 0.3s ease;
}

.hgw-logo:hover {
    opacity: 1;
}

/* 頁腳 Footer */
.footer {
    text-align: center;
    margin-top: 40px;
    padding-top: 25px;
    border-top: 1px solid #dee2e6; /* 更柔和的分隔線 */
    font-size: 1em; /* 放大頁腳文字 */
    color: #6c757d; /* 頁腳文字顏色 */
}

.footer p {
    margin-bottom: 8px;
}

.footer a {
    color: #17a2b8; /* 連結顏色與主色調統一 */
    text-decoration: none;
    transition: color 0.2s ease-in-out;
}

.footer a:hover {
    color: #117a8b;
    text-decoration: underline;
}

/* 基礎按鈕樣式 (如果還有其他普通按鈕) */
button {
    font-family: 'Poppins', sans-serif; /* 確保按鈕也使用Poppins字體 */
}

/* 響應式設計 */
@media (max-width: 768px) {
    .container {
        padding: 30px 25px;
        width: 90%;
    }
    .header h1 {
        font-size: 2.8em; /* 同步調整 */
    }
    .header h3 {
        font-size: 1.3em; /* 同步調整 */
    }
    .header p {
        font-size: 1.1em; /* 同步調整 */
    }

    .options {
        flex-direction: column; /* 垂直排列 */
        align-items: center;
        gap: 25px;
    }
    .option-card {
        width: 100%; /* 卡片寬度佔滿 */
        max-width: 350px; /* 在平板上限制一個最大寬度 */
        min-width: unset; /* 重置最小寬度 */
        margin-bottom: 0; /* 因為gap已經處理了間距 */
    }
    .learn-more button {
        padding: 14px 30px; /* 同步調整 */
        font-size: 1.1em; /* 同步調整 */
    }
}

@media (max-width: 480px) {
    body {
        padding-top: 30px;
        padding-bottom: 30px;
    }
    .container {
        padding: 25px 20px;
        width: 95%; /* 在手機上更寬一點 */
    }
    .header h1 {
        font-size: 2.4em; /* 同步調整 */
    }
    .header h3 {
        font-size: 1.1em; /* 同步調整 */
    }
    .header p {
        font-size: 1.05em; /* 同步調整 */
    }

    .option-card img {
        width: 100px;
        height: 100px;
    }
    .option-card span {
        font-size: 1.15em; /* 同步調整 */
    }
    .option-card {
        padding: 20px;
    }

    .learn-more button {
        width: 100%; /* 在小屏幕上按鈕可以全寬 */
        padding: 14px 25px;
    }

    .hgw-logo {
        max-width: 100px;
    }
}