@charset "utf-8";
/* CSS Document */

body, html {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    font-family: Roboto;
}

/* 標題 */
h1, h2, h3, h4, h5, h6, .display-5 {
	font-family: 'Outfit', sans-serif;
}

/* 選單 */
.dropdown-menu li { position: relative; }

@media (min-width: 768px) {
	.dropdown:hover > .dropdown-menu { display: block; }
}

/* Banner */
.carousel-indicators [data-bs-target] {
    width: 12px;           /* 圓點寬度 */
    height: 12px;          /* 圓點高度 */
    border-radius: 50%;    /* 變成正圓形 */
    background-color: #004d4d; /* 品牌深墨綠色 */
    border: 2px solid transparent; /* 預留邊框，增加點擊感 */
    margin: 0 6px;         /* 圓點之間的間距 */
    opacity: 0.5;          /* 非當前頁面的透明度 */
    transition: all 0.3s ease;
}

.carousel-indicators .active {
    opacity: 1;            /* 選中時不透明 */
    transform: scale(1.2); /* 選中時稍微放大，增加視覺引導 */
    background-color: #24a108; /* 也可以換成你剛才按鈕的綠色 */
}

/* 通用橫幅樣式 */
.page-banner {
    background-size: cover;          /* 背景圖填滿 */
    background-position: center;     /* 背景圖置中 */
    background-repeat: no-repeat;    /* 背景圖不重複 */
    position: relative;              /* 為遮罩做準備 */
    overflow: hidden;                /* 防止遮罩溢出 */
    font-family: 'Outfit', sans-serif;
}

.page-banner::before {
    content: '';                     /* 必須有這個屬性 */
    position: absolute;              /* 絕對定位 */
    top: 0;
    left: 0;
    width: 100%;                     /* 滿寬 */
    height: 100%;                    /* 滿高 */
    background-color: rgba(0, 0, 0, 0.5); /* 黑色，50% 透明度。可依圖調整 */
    z-index: 1;                      /* 放在背景圖上面，文字下面 */
}

.page-banner .container {
    position: relative;
    z-index: 2;                      /* 文字放在遮罩上方 */
}

/* 選單樣式 */
.navbar-nav .dropdown-item.active, 
.navbar-nav .dropdown-item:active {
    background-color: #008a00;
    color: #ffffff;
}

.navbar-nav .dropdown-item:hover {
    background-color: #f8f9fa;
    color: #008a00;
    font-weight: bold;
}

/* 按鈕 */
.btn-agile-outline {
    color: #24a108; /* 圖片中的亮綠色 */
    background-color: #ffffff;
    border: 2px solid #ffffff; /* 隱形邊框防止抖動 */
    border-radius: 50px; /* 膠囊形狀 */
    padding: 10px 40px;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    letter-spacing: 1px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* 柔和陰影 */
    transition: all 0.3s ease;
}

.btn-agile-outline:hover {
    background-color: #24a108;
    color: #ffffff;
    transform: translateY(-2px); /* 輕微上浮感 */
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.btn-agile-solid {
    color: #ffffff;
    background-color: #24a108;
    border: none;
    border-radius: 50px;
    padding: 12px 40px;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    letter-spacing: 1px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

.btn-agile-solid:hover {
    background-color: #1d8206; /* 稍微加深綠色 */
    color: #ffffff;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.error-msg:empty {
    display: none;
}

.error-msg {
    font-size: 12px;
    display: block;
    color: red;
}