/* 自定義樣式 */
body {
    font-family: 'Arial', sans-serif;
}

.navbar-brand {
    font-weight: bold;
}

footer {
    margin-top: auto;
}

.mainlogo {
    background-image: url('/images/main_img_green_whitebg9b.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    text-shadow: 2px 2px 2px white,
        2px 0px 2px white,
        2px -2px 2px white,
        0px 2px 2px white,
        0px 0px 2px white,
        0px -2px 2px white,
        -2px 2px 2px white,
        -2px 0px 2px white,
        -2px -2px 2px white;
    transition: background-image 1s ease-in-out;
}

.mainlogo img {
    filter: drop-shadow(1px 1px 1px white);
    width: 120px;           /* 手機預設大小 */
    max-width: 100%;
    transition: width .5s ease-in-out;
}

@media (min-width: 576px) {
    .mainlogo img {
        width: 140px;
    }
}

/* 確保卡片內容不會超出其父容器的限制 */
.card {
    width: 100%;
}

/* 為標題和副標題設定深綠色文字 */
.dark-green-text {
    color: #006400; /* 深綠色 Hex Code */
}

/* 圖片區域：強制使用固定比例或高度，以解決垂直不一致的問題 */
.card-img-top {
    width: 100%; /* 讓圖片佔滿整個寬度 */
    height: 250px; /* 設定一個固定的標準高度 (請根據實際需求調整此數值) */
    object-fit: cover; /* 使用 object-fit: cover 來裁剪，確保填滿指定高度，這是最常見的解決方案 */
    display: block; /* 確保圖片作为块级元素处理 */
}

/* 限制卡片內容的內邊距，防止文字撑開布局 */
.card-body {
    padding: 1rem; /* 使用 Bootstrap 的默认间距或更保守的值 */
}

/* 修正行內元素的垂直對齊問題，讓卡片根據內容高度排列，而不是拉伸到同一高度 */
.row > div {
    align-self: flex-start !important;
}