/* 全局樣式 */
        body {
            font-family: 'Microsoft JhengHei', 'Noto Sans TC', sans-serif;
            line-height: 1.6;
            color: #333;
            background-color: #fff;
        }
        a {
            color: #2244EE;
            text-decoration: none;
            transition: color 0.3s;
        }
        a:hover {
            color: #0056b3;
        }
h1, h5 {
    font-size: 1.2em;
    color: #096A26;
    margin: 1.5rem 0 1rem;
    padding-bottom: 0.5rem;
}
h1 {
    font-size: 1.8rem;
    margin-bottom: 0.25rem;
    color: #333;
    font-weight: 500;
    line-height: 1.3;
}
h8 {
    background-color: #f0f0f0;
    color: #380354;
    font-size: 16pt;
    padding: 10px;
    border-radius: 5px;
}
p {
	font-size: 1.05rem;
}

.text-right-custom {
    text-align: right;
}
        img {
            max-width: 100%;
            height: auto;
        }

        /* Hero 區域 */
        .hero-title {
            font-size: 1.8rem;
            font-weight: 500;
            line-height: 1.3;
            color: #333;
        }
        .hero-subtitle {
            font-size: 0.9rem;
            color: #666;
        }

        /* 分享按鈕 */
        .btn-group .btn {
            font-size: 0.9rem;
        }

        /* 卡片樣式 */
        .card {
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
        }
		aside h5 {
            font-size: 1.2rem;
            font-weight: bold;
        }

        .news-item {
            margin-bottom: 1.5rem;
        }

        .read-more-btn {
            display: inline-block;
            color: #007bff;
            text-decoration: none;
            font-weight: 500;
            margin-top: 0.5rem;
        }

        .read-more-btn:hover {
            color: #0056b3;
            text-decoration: underline;
        }
        /* 左右欄樣式 */
        aside {
            background-color: #f8f9fa;
            padding: 1.5rem;
            border-radius: 8px;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
        }
        aside h5 {
            font-size: 1.2rem;
            font-weight: bold;
        }
        aside ul {
            list-style: none;
            padding: 0;
        }
        aside ul li {
            font-size: 0.95rem;
            line-height: 1.6;
            color: #333;
        }
		
footer {
    background-color: #f8f9fa; /* 淺灰背景 */
    color: #666; /* 文字顏色 */
}

footer h3 {
    color: #333;
    margin-bottom: 1rem; /* 標題與段落之間的間距 */
}

footer p {
    font-family: 'Microsoft JhengHei', 'Noto Sans TC', sans-serif !important;
    font-size: 1rem !important;
    line-height: 1.6 !important; /* 行距統一 */
    margin: 0 !important; /* 移除多餘 margin */
    padding: 0 !important; /* 移除多餘 padding */
}

footer p + p {
    margin-top: 0.5rem !important; /* 控制段落之間的間距 */
}
        
/* 圖標樣式 */
.share-item {
    display: inline-block;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s, box-shadow 0.2s;
}
.share-item img {
    width: 40px;
    height: 40px;
    display: block;
}
.share-item:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* 字體調整按鈕樣式 */
.font-adjust-btn,
.language-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 14px;
    font-weight: bold;
    transition: background-color 0.2s, transform 0.2s;
}
.font-adjust-btn:hover,
.language-toggle-btn:hover {
    background-color: #007bff;
    color: #fff;
    transform: scale(1.1);
}
        /* 標題樣式 */
        .section-title {
            color: #005500; /* 深綠色 */
            font-size: 16pt;
            font-weight: bold;
        }

        /* 列表項樣式 */
        .list-group-item {
            background-color: #f6fff6; /* 淺綠色背景 */
            margin-bottom: 0.5rem; /* 下方間距 */
            color: #4a4a4a; /* 深灰色文字 */
        }

        /* 列表項左右對齊 */
        .list-group-item.d-flex {
            justify-content: space-between;
        }

        /* 超連結樣式 */
        .list-group-item a {
            text-decoration: none; /* 去除下劃線 */
            color: #4a4a4a; /* 深灰色文字 */
            transition: color 0.3s; /* 滑鼠懸停時的顏色過渡效果 */
        }

        /* 超連結滑鼠懸停效果 */
        .list-group-item a:hover {
            color: #005500; /* 深綠色 */
        }		

    /* 標題樣式：加深綠色字體，增加字距與下方間距 */
    .linklisthead {
        font-size: 16pt; /* 調整字體大小 */
        font-weight: bold; /* 粗體字 */
        color: #005500; /* 深綠色 */
        margin-bottom: 0.5rem; /* 與下方列表的間距 */
    }

    /* 通用列表樣式 */
    .linklist {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .linklist li {
        background-color: #f6fff6;
        padding: 10px 15px;
        margin-bottom: 1rem;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .linklist a {
        text-decoration: none;
        color: #4a4a4a;
        font-size: 1rem;
        transition: color 0.3s;
    }

    .linklist a:hover {
        color: #005500;
    }

    /* 第一組：人名在下一行 */
    .linklist.multiline li span {
        display: block;
        margin-top: 0.5rem;
        font-size: 0.9rem;
        color: #666;
    }

    /* 第二組：人名排向右邊 */
 /* 列表項的基本布局 */
.linklist.singleline li {
    display: flex; /* 使用 Flexbox 布局 */
    justify-content: flex-start; /* 確保內容從左側開始排列 */
    align-items: center; /* 垂直居中 */
    gap: 0.5rem; /* 保持 a 和 span 之間的間距（可調整，視需要） */
}

/* a 標籤的設置 */
.linklist.singleline li a {
    flex-grow: 0; /* 取消自動填充剩餘空間 */
    text-align: left; /* 確保文字左對齊 */
    white-space: nowrap; /* 禁止換行 */
    overflow: hidden; /* 隱藏超出內容 */
    text-overflow: ellipsis; /* 添加省略號（可選） */
}

/* span 標籤的設置 */
.linklist.singleline li span {
    font-size: 0.9rem; /* 字體大小 */
    color: #666; /* 字體顏色 */
    white-space: nowrap; /* 禁止換行 */
    margin-left: 0; /* 確保 span 與 a 之間無不必要的間距 */
    text-align: left; /* 確保文字左對齊 */
}
        /* 圖片容器樣式 */
    .pic {
        text-align: center; /* 將圖片及說明置中 */
        margin: 1.5rem 0; /* 上下空白 */
    }

    /* 圖片樣式 */
    .pic .picture {
        max-width: 100%; /* 確保圖片在不同螢幕下自適應 */
        height: auto; /* 保持圖片比例 */
        border-radius: 10px; /* 圖片圓角 */
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* 添加輕微陰影 */
    }

    /* 圖片說明文字樣式 */
    .pic .caption {
        display: block; /* 獨占一行 */
        font-size: 0.9rem; /* 說明文字大小 */
        color: #666; /* 深灰色文字 */
        margin-top: 0.5rem; /* 與圖片的間距 */
        line-height: 1.4; /* 行高 */
    }
.card {
    border: none; /* 移除預設邊框 */
    border-radius: 10px; /* 圓角 */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    transform: scale(1.02); /* 放大效果 */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); /* 增加陰影 */
}

.card-title {
    font-size: 1.25rem; /* 調整標題字體大小 */
}

.card-text {
    font-size: 0.95rem; /* 調整內文字體大小 */
    line-height: 1.5; /* 行距 */
}
/* 本週推介區塊樣式 */
.weekly-recommendations {
    background-color:; /* 淺綠背景 */
    border-radius: 10px; /* 圓角 */
    padding: 1.5rem; /* 內距 */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 輕微陰影 */
}

.weekly-recommendations h2 {
    font-size: 1.5rem; /* 標題大小 */
    color: #005500; /* 標題顏色 */
}

.weekly-recommendations a {
    font-size: 1rem; /* 推薦項目文字大小 */
    color: #005500; /* 推薦項目顏色 */
    text-decoration: none; /* 移除下劃線 */
    margin: 0.5rem 1rem; /* 間距 */
    transition: color 0.3s ease; /* 顏色過渡效果 */
}

.weekly-recommendations a:hover {
    color: #007b33; /* 滑鼠懸停時的顏色 */
}
/* 專欄文章區塊樣式 */
.featured-articles {
    margin-top: 2rem; /* 與其他內容的間距 */
}

/* 卡片項目樣式 */
.list-group-item {
    border: none; /* 移除邊框 */
    border-radius: 8px; /* 卡片圓角 */
    padding: 1rem; /* 內距 */
    background-color: #ffffff; /* 白色背景 */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* 卡片陰影 */
    transition: transform 0.2s ease, box-shadow 0.2s ease; /* 過渡效果 */
}

.list-group-item:hover {
    transform: translateY(-2px); /* 懸停效果 */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* 加重陰影 */
}

/* 分類標題樣式 */
.list-group-item .fw-bold {
    font-size: 1.25rem; /* 增大分類標題字體大小 */
    color: #d98d00; /* 深橙色 */
}

/* 文章標題樣式 */
.list-group-item .text-muted {
    font-size: 0.95rem; /* 文章標題大小 */
    margin-top: 0.25rem; /* 與分類標題的間距 */
}

/* 作者樣式 */
.list-group-item .text-secondary {
    font-size: 1rem; /* 增大作者名稱字體大小 */
    font-style: italic; /* 保持斜體樣式 */
    color: #666; /* 深灰色 */
}
/* 專欄文章部分標題 */
.section-title {
    font-size: 1.8rem; /* 調整專欄文章/要聞標題字體大小 */
    font-weight: bold; /* 粗體 */
    color: #005500; /* 深綠色 */
    margin-bottom: 1rem; /* 與下方內容的間距 */
}

/* 教會之聲等分類標題 */
.category-title {
    font-size: 1.25rem; /* 調整分類標題字體大小，如教會之聲 */
    font-weight: bold; /* 粗體 */
    color: #d98d00; /* 深橙色 */
    margin-bottom: 0.5rem; /* 與下方文章標題的間距 */
}

/* 文章標題 */
.article-title {
    font-size: 1rem; /* 調整文章標題字體大小 */
    font-weight: normal; /* 正常字體 */
    color: #333333; /* 深灰色 */
    margin-bottom: 0.5rem; /* 與其他元素的間距 */
}

/* 作者名稱樣式 */
.author-name {
    font-size: 1rem; /* 調整作者名稱字體大小 */
    font-style: italic; /* 斜體 */
    color: #666666; /* 深灰色 */
}
/* 教會觸覺外層區塊樣式 */
.church-recommendation {
    background-color: #f1f9f0; /* 淺橙色背景 */
    padding: 1.5rem; /* 區塊內距 */
    border-radius: 10px; /* 圓角 */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* 陰影效果 */
    margin-bottom: 2rem; /* 與其他區塊的間距 */
}

/* 教會觸覺標題樣式 */
.church-recommendation .section-title {
    font-size: 1.8rem; /* 標題字體大小 */
    font-weight: bold; /* 粗體 */
    color: #005500; /* 深綠色 */
    margin-bottom: 1rem; /* 與推薦文字的間距 */
}

/* 圖片樣式 */
.article-image {
    display: block; /* 確保圖片為塊級元素 */
    max-width: 100%; /* 防止圖片超過容器寬度 */
    height: auto; /* 保持圖片比例 */
    margin-bottom: 1.5rem; /* 圖片底部空間 */
}

/* 推薦內容樣式 */
.recommendation-text ul {
    list-style: none; /* 移除列表符號 */
    padding: 0; /* 移除內邊距 */
    margin: 0; /* 移除外邊距 */
}

.recommendation-text li {
    display: flex; /* 彈性佈局 */
    justify-content: space-between; /* 左右對齊連結與作者 */
    align-items: center; /* 垂直居中對齊 */
    margin-bottom: 1rem; /* 每行之間的間距 */
    line-height: 1.8; /* 行距 */
    color: #333333; /* 深灰色 */
}

/* 文章連結樣式 */
.recommendation-text a {
    text-decoration: none; /* 移除連結底線 */
    color: #333333; /* 深綠色 */
    font-size: 1.1rem; /* 標題字體大小 */ 
    font-weight: none; /* 加粗 */
    flex-grow: 1; /* 讓連結占據剩餘空間 */
    padding-right: 1rem; /* 與作者名稱的間距 */
    transition: color 0.3s ease; /* 懸停效果 */
}

.recommendation-text a:hover {
    color: #007bff; /* 懸停時變藍 */
}

/* 作者名稱樣式 */
.author {
    white-space: nowrap; /* 防止換行 */
    color: 6c757d#; /* 暗灰色 */
    font-size: 1.1rem; /* 標題字體大小 */ 	
    font-style: italic; /* 斜體 */
    flex-shrink: 0; /* 防止被壓縮 */
}

/* 專欄文章標題 */
.articles-container {
    background-color: #fff9ef; /* 米色背景 */
    padding: 1.5rem;
    border-radius: 10px; /* 圓角 */
}

/* 單篇文章卡片 */
.article-item {
    background-color: #f6fff6; /* 淺綠色背景 */
    border-radius: 10px; /* 圓角 */
    padding: 1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* 陰影效果 */
    margin-bottom: 1rem; /* 每篇文章間距 */
}

/* 標題容器樣式 */
.linklistheadT {
    font-size: 1.2rem; /* 標題字體大小 */
    font-weight: bold; /* 加粗 */
    color: #d98d00; /* 橙色 */
    margin-bottom: 0.5rem;
    display: flex; /* 使用 Flexbox 排列圖標與文字 */
    align-items: center; /* 垂直居中對齊 */
    gap: 0.5rem; /* 圖標與文字的間距 */
    position: relative; /* 提供定位基準 */
    padding-left: 2rem; /* 為圖標留出空間 */
}

/* 在標題左側添加圖標 */
.linklistheadT::before {
    content: "✍️"; /* 圖標內容 */
    font-size: 1.5rem; /* 圖標大小 */
    color: #d98d00; /* 圖標顏色 */
    position: absolute; /* 絕對定位 */
    left: 0; /* 放置在標題最左側 */
    top: 50%; /* 垂直居中 */
    transform: translateY(-50%); /* 修正垂直居中偏移 */
}

/* 列表樣式 */
.linklistT {
    list-style: none; /* 移除項目符號 */
    padding: 0; /* 移除內邊距 */
    margin: 0; /* 移除外邊距 */
}

.linklistT li {
    display: flex; /* 使用 Flexbox 排列 */
    justify-content: space-between; /* 左右對齊標題和作者 */
    align-items: flex-start; /* 作者名稱與標題頂部對齊 */
    gap: 1rem; /* 左右間距 */
    flex-wrap: wrap; /* 允許內容換行 */
}

/* 連結樣式 */
.linklistT a {
    text-decoration: none; /* 移除底線 */
    font-size: 1.2rem; /* 圖標大小 */
    color: #005500; /* 深綠色 */
    transition: color 0.3s ease; /* 懸停效果 */
    flex-grow: 1; /* 讓題目占據剩餘空間 */
    white-space: normal; /* 允許換行 */
    word-break: break-word; /* 遇到超長單詞時換行 */
}

.linklistT a:hover {
    color: #007bff; /* 懸停時變藍 */
}

/* 整體容器背景 */
.articles-container {
    background-color: #fff9ef; /* 米色背景 */
    padding: 1.5rem;
    border-radius: 10px; /* 圓角 */
}

/* 單篇文章卡片 */
.article-item {
    background-color: #f6fff6; /* 淺綠色背景 */
    border-radius: 10px; /* 圓角 */
    padding: 1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* 陰影效果 */
    margin-bottom: 1rem; /* 每篇文章間距 */
}

/* 作者名稱樣式 */
.author-name {
    flex-shrink: 0; /* 防止作者名稱被壓縮 */
    white-space: nowrap; /* 防止換行 */
    color: #6c757d; /* 暗灰色 */
    font-style: italic; /* 斜體 */
    text-align: right; /* 右對齊 */
    margin-left: auto; /* 推動作者名稱靠右 */
}
/* 圖標樣式 */
.share-item {
    display: inline-block;
    margin: 0; /* 移除多餘的間距，間距由 Flexbox 控制 */
    transition: transform 0.3s ease; /* 懸停效果 */
}

.share-item:hover {
    transform: scale(1.1); /* 放大效果 */
}

.share-icon {
    width: 40px; /* 圖標的大小 */
    height: auto; /* 按比例縮放 */
}

/* Flexbox 容器樣式 */
.d-flex {
    display: flex;
    flex-wrap: wrap; /* 允許內容在小螢幕換行 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    gap: 1rem; /* 圖標之間的間距 */
}

/* 語言切換按鈕樣式 */
.language-toggle-btn {
    font-size: 0.875rem; /* 按鈕文字大小 */
    padding: 0.25rem 0.75rem; /* 按鈕內邊距 */
    border-radius: 5px; /* 按鈕圓角 */
    white-space: nowrap; /* 防止按鈕文字換行 */
}
/* 分享區塊的樣式 */
.d-flex {
    display: flex;
    flex-wrap: wrap; /* 當空間不足時允許換行 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    gap: 1rem; /* 元素之間的間距 */
}

/* 「分享：」文字樣式 */
.fw-bold {
    font-size: 1rem; /* 字體大小 */
    margin-right: 0.5rem; /* 與圖標的間距 */
    white-space: nowrap; /* 防止文字換行 */
}

/* 分享圖標樣式 */
.share-item {
    display: inline-block;
    transition: transform 0.3s ease; /* 懸停效果 */
}

.share-item:hover {
    transform: scale(1.1); /* 懸停時放大效果 */
}

.share-icon {
    width: 40px; /* 圖標大小 */
    height: auto; /* 保持比例 */
}

/* 語言切換按鈕樣式 */
.language-toggle-btn {
    font-size: 0.875rem; /* 按鈕文字大小 */
    padding: 0.25rem 0.75rem; /* 按鈕內邊距 */
    border-radius: 5px; /* 圓角按鈕 */
    white-space: nowrap; /* 防止按鈕換行 */
}
/* 限制 .linklist.singleline 的影響範圍 */
#aside .linklist.singleline li {
    display: flex;
    justify-content: flex-start; /* 從左對齊 */
    align-items: center; /* 垂直居中 */
}
#aside .linklist.singleline li span {
    font-size: 0.9rem;
    color: #666;
    white-space: nowrap;
}

/* 導航欄樣式修復 */
nav ul {
    padding: 0;
    margin: 0;
    list-style: none; /* 去掉子彈符號 */
}

nav ul li {
    display: block; /* 每個選項單獨占一行 */
    font-size: 1rem; /* 設置字體大小 */
    font-weight: normal; /* 設置字體粗細 */
}

/* 調整內邊距和對齊方式 */
nav ul li a {
    display: block; /* 讓鏈接充滿整個行 */
    padding: 10px 15px; /* 增加內邊距，讓項目更容易點擊 */
    text-decoration: none; /* 去掉超連結的下劃線 */
    color: #000; /* 設置文字顏色（黑色） */
}

/* 添加懸停效果 */
nav ul li a:hover {
    background-color: #f8f9fa; /* 改變背景顏色 */
    color: #007bff; /* 改變文字顏色（藍色） */
}

/* 頁腳樣式修復 */
footer ul {
    padding: 0;
    margin: 0;
    list-style: none; /* 去掉子彈符號 */
}
footer ul li {
    display: block; /* 確保正常排列 */
    font-size: 0.9rem; /* 恢復字體大小 */
    font-weight: normal; /* 恢復字體粗細 */
}

/* 頁腳和導航欄的全局還原 */
footer, nav {
    font-size: inherit; /* 繼承父級字體大小 */
    font-weight: normal; /* 恢復正常字體粗細 */
}
/* 確保在窄屏幕下分享按鈕換行顯示 */
.d-flex {
    display: flex;
    flex-wrap: nowrap; /* 禁止換行 */
    justify-content: flex-start; /* 左對齊 */
    align-items: center; /* 垂直居中 */
    gap: 0.5rem; /* 元素之間的間距 */
    overflow-x: auto; /* 內容超出時啟用橫向滾動 */
    -webkit-overflow-scrolling: touch; /* 提升移動裝置滾動體驗 */
    padding-right: 1rem; /* 增加右側內邊距 */
}

.fw-bold {
    white-space: nowrap; /* 禁止「分享：」換行 */
    margin-right: 0.5rem; /* 與按鈕之間保持間距 */
}

.share-item {
    flex: 0 0 auto; /* 防止按鈕壓縮 */
    width: 40px; /* 固定按鈕寬度 */
    height: 40px; /* 固定按鈕高度 */
}

.share-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.language-toggle-btn, 
.font-adjust-btn {
    flex: 0 0 auto;
    width: 36px; /* 固定寬度 */
    height: 36px; /* 固定高度 */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    font-weight: bold;
    border: 1px solid #007bff;
    background-color: #fff;
    color: #007bff;
    box-sizing: border-box;
    overflow: hidden;
    margin-right: 0;
}

@media (max-width: 768px) {
    .d-flex {
        gap: 0.25rem; /* 減少按鈕之間的間距 */
        padding-right: 0.5rem; /* 減少右側內邊距 */
    }

    .share-item {
        width: 28px; /* 縮小按鈕寬度 */
        height: 28px; /* 縮小按鈕高度 */
    }

    .language-toggle-btn, 
    .font-adjust-btn {
        width: 28px;
        height: 28px;
        font-size: 12px; /* 調整按鈕字體大小 */
    }

    .fw-bold {
        margin-right: 0.25rem; /* 減少「分享：」與按鈕之間的距離 */
    }
}
/* 圓形語言切換按鈕樣式 */
.language-toggle-btn {
    width: 36px; /* 設定按鈕寬度 */
    height: 36px; /* 設定按鈕高度，與寬度一致形成圓形 */
    border-radius: 50%; /* 圓角設置為 50% 以形成圓形 */
    display: flex; /* 使用 Flexbox 排版 */
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    font-size: 14px; /* 調整文字大小 */
    font-weight: bold; /* 粗體字 */
    border: 1px solid #007bff; /* 外框顏色 */
    background-color: #fff; /* 背景顏色 */
    color: #007bff; /* 文字顏色 */
    transition: all 0.3s ease; /* 添加過渡效果 */
}

/* 滑鼠懸停效果 */
.language-toggle-btn:hover {
    background-color: #007bff; /* 懸停時背景顏色變為藍色 */
    color: #fff; /* 文字顏色變為白色 */
    transform: scale(1.1); /* 懸停時按鈕放大 */
}

/* 預設字體大小變數 */
:root {
    --base-font-size: 16px; /* 預設字體大小 */
    --header-font-size: 1.8rem; /* 預設標題字體大小 */
}

/* 全局字體大小 */
body {
    font-size: var(--base-font-size);
    font-family: 'Microsoft JhengHei', 'Noto Sans TC', sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #fff;
}

/* 標題字體大小 */
h1 {
    font-size: var(--header-font-size);
    color: #333;
    font-weight: 500;
    line-height: 1.3;
}

/* 控制按鈕樣式 */
.controls {
    margin-top: 1rem;
}

button.font-adjust-btn {
    padding: 0.5rem 1rem;
    margin-right: 0.5rem;
    background-color: #fff;
    color: #007bff;
    border: 1px solid #007bff;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
    transition: all 0.3s ease;
}

button.font-adjust-btn:hover {
    background-color: #007bff;
    color: #fff;
}

button.small-font {
    font-size: 0.8rem; /* 縮小按鈕的字體大小 */
}

button.large-font {
    font-size: 1.2rem; /* 放大按鈕的字體大小 */
}


/* Image Section */
.hero-image {
	position: relative;
    margin: 1rem 0;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.hero-image img {
    width: 100%;
    height: auto;
    transition: transform 0.3s ease;
}
.hero-image:hover img {
    transform: scale(1.01);
}

.caption {
    font-style: italic;
    text-align: center;
    margin-top: 0.5rem;
    color: #666;
    font-size: 0.9rem;
}