/* css/style.css */
:root {
	--primary-blue: #0056b3;
	--primary-green: #8cc63f;
	--primary-teal: #00a99d;
	--text-dark: #333333;
	--text-light: #666666;
	--white: #ffffff;
	--bg-light: #f8f9fa;
	--bg-light-blue: #e1eeff;
	--container-width: 1280px;
	--transition-speed: 0.3s;
	--swiper-theme-color: #fff; /* 改成白色或您網站的主色 */
	--swiper-navigation-size: 30px; /* 箭頭大小 */
}

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body {
	/* 修改 font-family: Inter 優先，後面補上中文黑體作為後備 */
	font-family: "Inter", "Helvetica Neue", Arial, "Heiti TC", "Microsoft JhengHei", sans-serif;
	
	line-height: 1.6;
	color: var(--text-dark);
	background-color: var(--white);
	
	/* 建議加入這個屬性讓 Inter 字體在 Mac 上顯示更清晰 */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	margin: 0;
}

a {
	text-decoration: none;
	color: inherit;
}

ul {
	list-style: none;
}

.hightlight-txt{
	color:#ff6b6b;
	font-weight: bold;
}



.container {
	max-width: var(--container-width);
	margin: 0 auto;
	padding: 0 20px;
	width:100%;
}

/* 常用按鈕樣式 */
.btn {
	display: inline-flex;
	align-items: center;    /* <-- 讓文字跟 icon 垂直置中 */
	justify-content: center; /* <-- 讓內容水平置中 (選用) */
	gap: 8px; /* <-- 這很實用！可以讓文字跟 icon 之間自動產生間距 */
	padding: 10px 25px;
	border-radius: 50px;
	background: linear-gradient(90deg, var(--primary-blue), var(--primary-teal));
	color: var(--white);
	font-weight: bold;
	transition: var(--transition-speed);
	font-size: 1.2rem;
}

.btn:hover {
	opacity: 0.9;
	transform: translateY(-2px);
	box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}


.py-20{
	padding-top:20px;
	padding-bottom:20px;
}

.d-none{
	display: none!important;
}


/* 情境 A: 這個物件只在「手機版」出現 (>= 769px 時隱藏) */
@media (min-width: 769px) {
	.mobile-only {
		display: none !important;
	}
}

/* 情境 B: 這個物件只在「桌機版」出現 (<= 768px 時隱藏) */
@media (max-width: 768px) {
	.desktop-only {
		display: none !important;
	}
}