/* Global Styles */
html {
	scroll-behavior: smooth;
	scroll-padding-top: 70px; /* Offset for fixed navbar */
}

body {
	font-family: 'Helvetica Neue', '微軟正黑體', 'Microsoft JhengHei', sans-serif;
}

.full-screen-section {
	min-height: 100vh;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	overflow: hidden;
}

.section-padding {
	padding: 80px 0;
}

h2.section-title{
	font-size: 4vw;
	font-weight: bolder;
	color:#375492;
}

.navbar{
	background: #4ca99f;
}

.navbar-expand-lg .navbar-nav .nav-link{
	font-size: 1.2rem;
	color:#fff;
}

.navbar-expand-lg .navbar-nav .nav-link.active {
	color: #ecf979 !important; /* 假設您的主色是橘色 */
	font-weight: bold;
}

.navbar-nav .nav-item{
	display: flex;
	align-items: center;
}

.navbar-nav .nav-item + .nav-item::before {
  content: "・"; /* 您可以將 "|" 替換成 "・" 或其他符號 */
  color: #fff;  /* 設定分隔符號的顏色 */
  padding: 0 5px; /* 調整分隔符號與項目之間的間距 */
}

img.main-title.title-sz-1{
	width:50%;
	height: auto;
}

/* ============================================= */
/* Section 1: Hero Carousel */
/* ============================================= */
#section1 {
	padding: 0;
}

.swiper {
	width: 100%;
	height: 100vh;
}

.swiper-slide {
	display: flex;
	align-items: center;
	justify-content: center;
}

.slide-content {
	display: flex;
	width: 100%;
	height: 100%;
	flex-direction: row;
}

.slide-image {
	width: 50%;
	height: 100%;
}

.slide-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.slide-text {
	width: 50%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 5%;
	position: relative;
	background-color: #f8f9fa;
}

.slide-text img{
	width:70%;
	height:auto;
	margin-bottom:2rem;
}

.slide-text p{
	font-size: 1.5rem;
	margin-bottom:0;
}

.swiper-custom-next {
	position: absolute;
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
	cursor: pointer;
	z-index: 10;
}

.swiper-custom-next img {
	width: 40px;
	height: 40px;
	border-radius: 50%;
}


/* ============================================= */
/* Section 2: Multilingual Resources */
/* ============================================= */
#section2 {
	background-color: #cde2ec;
}

#section2 img.main-title{
	width:100%;
	height: auto;
}

.resource-content-modal {
	width: 100%;
	max-width: 900px; /* 限制內容最大寬度 */
	padding: 20px;
}

.language-button-group {
	display: flex;
	flex-wrap: wrap; /* 允許按鈕換行 */
	justify-content: center; /* 置中按鈕 */
	gap: 20px; /* 按鈕之間的間距 */
	margin-top: 40px;
}

.btn-language {
	font-size: 1.2rem;
	padding: 12px 25px;
	min-width: 150px; /* 確保按鈕有一定寬度 */
	background-color: #fff;
	color: #56a4c3;
	border: 2px solid #56a4c3;
	border-radius: 50px;
	font-weight: bold;
	transition: all 0.3s ease;
}

.btn-language:hover {
	background-color: #56a4c3;
	color: #fff;
	transform: translateY(-5px);
	box-shadow: 0 8px 15px rgba(0,0,0,0.15);
}

/* Modal (Lightbox) 內的縮圖樣式 */
.thumbnail-link {
	display: block;
	text-decoration: none;
	color: #333;
	text-align: center;
	background-color: #f8f9fa;
	border-radius: 5px;
	padding: 10px;
	transition: all 0.3s ease;
	height: 100%; /* 確保高度一致 */
}

.thumbnail-link:hover {
	transform: scale(1.05);
	box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.thumbnail-link .img-thumbnail {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1.414; /* A4 紙張比例，可自行調整 */
	object-fit: cover;
	margin-bottom: 10px;
}

.thumbnail-caption {
	display: block;
	font-weight: bold;
	font-size: 0.9rem;
}

/* 調整 Modal 本身的樣式 */
.modal-dialog.modal-lg {
	max-width: 900px; /* 讓 Modal 更寬一點 */
}


.spokesperson-img {
	position: absolute;
	bottom: 0;
	left: 5%;
	height: 80%;
	width: auto;
	object-fit: contain; /* 確保圖片比例正確 */
}

.resource-content {
	width: 60%; /* 調整內容區塊寬度以錯開圖片 */
	max-width: 800px;
}

/* 主容器，現在包含多個 wrapper */
.resource-links {
	display: flex;
	justify-content: center;
	gap: 25px; /* 每個 wrapper 之間的間距 */
	margin-top: 30px;
}

/* 圖標 + 多個連結的包裹容器 */
.resource-item-wrapper {
	display: flex;
	align-items: center; /* 垂直置中圖標和連結區塊 */
	flex-direction: column;
	gap: 10px; /* 圖標和連結區塊之間的間距 */
}

/* 左側圓形圖標 */
.resource-icon img {
	width: 180px;  /* 稍微縮小圖標 */
	height: auto;
}


.split-icon img {
	width: 8vw;  /* 稍微縮小圖標 */
	max-width:100px;
	height: auto;
}


/* 右側多個語言連結的容器 */
.resource-item-links {
	display: flex;
	flex-direction: column;
	gap: 10px; /* 連結之間的間距 */
	flex: 0; /* 佔據剩餘的所有空間 */
}

/* 單一語言連結的樣式 */
.resource-item-links .resource-item {
	flex-grow: 0; /* 允許連結項目伸展 */
	background-color: #30a6c6;
	color: #333;
	text-decoration: none;
	padding: .25rem .5rem;
	border-radius: 20px;
	text-align: center;
	border: 1px solid #30a6c6;
	transition: all 0.3s ease;
	font-size: 0.9rem;
	color:#fff;
}

.resource-item-links .resource-item:hover {
	background-color: #e8a65f;
	color: #fff;
	border-color: #e8a65f;
	transform: translateY(-3px);
	box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}



/* ============================================= */
/* Section 3: Why Quitting is Hard */
/* ============================================= */
#section3 {
	background-color: #d9d9d9;
	padding-bottom: 0;
}

#section3 img.main-title{
	width:80%;
	height: auto;
	margin-bottom:2rem;
}



.split-layout {
	display: flex;
	width: 100%;
	height: 100vh;
}

.split-text {
	flex: 0 0 60%;
	padding: 5%;
	padding-right:0;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.split-row{
	display: flex;
	margin-bottom:1.2rem;
	align-items: center;
}

.split-row p.split-sub-title{
	font-size: 1.5rem;
	background: #326cb4;
	color:#fff;
	padding:.25rem .35rem;
	border-radius: 10px;
	flex-basis: 150px; 
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
}

.split-row ul {
	margin-left:2%;
}

.split-row ul li{
	font-size: 1.3vw;
}

.split-image {
	flex: 0 0 30%;
	height: 100%;
	display: flex;
	align-items: end;
}

.split-image img {
	width: auto;
	height: 90%;
	object-fit: cover;
}


/* ============================================= */
/* Section 4: Myths and Harms */
/* ============================================= */
#section4 {
	background-color: #ece8dd;
}

.tabs-container {
	max-width: 800px;
	margin: 0 auto;
}

.tab-buttons {
	display: flex;
	border-bottom: 2px solid #ccc;
	margin-bottom: 20px;
}

.tab-btn {
	padding: 10px 20px;
	border: none;
	background-color: transparent;
	cursor: pointer;
	font-size: 1.2rem;
	color: #888;
	position: relative;
}

.tab-btn.active {
	color: #0d6efd;
}

.tab-btn.active::after {
	content: '';
	position: absolute;
	bottom: -2px;
	left: 0;
	width: 100%;
	height: 2px;
	background-color: #0d6efd;
}

.tab-pane {
	display: none;
}

.tab-pane.active {
	display: block;
}



.accordion-button{
	font-size: 1.4rem;
	background-color: #56a3c2;
	border-bottom:1px solid #56a3c2;
	color:#fff;
}

/* .accordion-button span:after{
	content: "";
    width: 20px;
    height: 20px;
    background: url("../images/wrongAns_icon.png");
    background-color: red;
    top: 0;
    right: 0;
    position: absolute;
    display: inline-block;
} */

.accordion-button:not(.collapsed){
	background-color: #56a3c2;
	border-bottom:0px;
	color:#dff;
}



#headingSix .accordion-button{
	border-bottom:0px;
}

.accordion-body{
	font-size: 1.2rem;
}

/* ============================================= */
/* Section 5: Ready to Quit? */
/* ============================================= */
#section5 {
	background-color: #cde2ec;
	padding-top:80px;
	align-items: flex-end;
}

/* #section5 img.sub-title{
	width:80%;
	height:auto;
	margin-bottom: 1.3rem;
} */

#section5 .sub-title {
	margin-bottom:2rem;
}

/* #section5 .sub-title.st-2{
	margin-bottom:4rem;
} */

#section5 .sub-title h2{
	font-size: 3.2rem;
	line-height: 1.4;
	color:#5a6be2;
	white-space: nowrap;
}

#section5 .sub-title h2 span,
#section5 .sub-title h2 b {
	display: inline-block; /* 让它们可以设置宽度等，并保持在同一行 */
}

#section5 .sub-title h2 b{
	margin-left:1rem;
}

#section5 .sub-title.st-2 h2{
	color:#ff0096
}



#section5 .sub-title b{
	font-size: 1.5rem;
	padding:.35rem;
	border-radius: 8px;
	background: #e1f1f4;
	color:#30b0ce;
}

.story-list a.story-item-link:link,
.story-list a.story-item-link:visited,
.story-list a.story-item-link:active{
	display: block;
	text-decoration: none!important;
	background: #a5c8fa;
	border:2px solid #a5c8fa;
	border-radius: 10px;
	margin-bottom: .5vw;
	padding: .45rem 1rem;
	transition: all .3s ease-in-out;
}

.story-list a.story-item-link:hover{
	background: #82cbe4;
	border:2px solid #82cbe4;
}

/* .story-list h5 a {
	text-decoration: none;
	color: #0056b3;
}

.story-list h5 a:hover {
	text-decoration: underline;
} */
.story-list a.story-item-link h5{
	font-weight: bold;
	color:#fff;
}

.story-list a.story-item-link p{
	margin-bottom: 0;
	color:#333;
}

.story-showcase {
	display: flex;
	align-items: start;
	flex-direction: column;
	border-radius: 10px;
}

.showcase-img-col{
	display: flex;
	align-items: flex-end;
}

.showcase-image {
	flex: 0 0 100%;
}

.showcase-image img{
	width:100%;
	height:auto;
}

.showcase-text {
	width: 100%;
	display: flex;
	margin-bottom: 1.2rem;
	align-items: flex-start;
}

.showcase-text img.text-icon{
	width:70px;
	height:auto;
}

.showcase-text .text-cnt{
	padding:.25rem .5rem;
	margin-left:1rem;
}

.showcase-text .text-cnt h6{
	font-size: 1.3rem;
	font-weight: bold;
	color:#3b9cc8;
}

/* ============================================= */
/* Section 6: Action Guide */
/* ============================================= */
#section6 {
	background-color: #fff;
}

.guide-txt{
	display: flex;
	flex-direction: column;
	align-items: center;
}

.guide-txt img{
	width:70%;
}

.guide-txt a{
	background:#f8eaf3;
	color:#d45590;
	border:1px solid #d45590;
	padding:.5rem 1.5rem;
	border-radius: 10px;
	font-size: 1.2rem;
	width:fit-content;
	text-decoration: none;
	transition: all .3s ease-in-out;
	font-weight: bold;
}

.guide-txt a:hover{
	background:#d45590;
	color:#f8eaf3;
	border:1px solid #f8eaf3;
}



/* ============================================= */
/* Responsive Styles (Mobile) */
/* ============================================= */
@media (max-width: 991.98px) {
	.spokesperson-img {
		height: 50%;
		left: 50%;
		transform: translateX(-50%);
		max-width: 90%;
	}
	.resource-content {
		width: 100%;
		margin-top: 50vh; /* 將內容往下推，避開圖片 */
		padding: 0 20px;
	}
}

@media (max-width: 768px) {
	html {
		scroll-padding-top: 56px; /* Adjust for smaller navbar */
	}
	
	main{
		padding-top:50px;
	}
	
	.navbar-toggler{
		border:0;
	}
	
	.navbar-toggler:focus {
		text-decoration: none;
		outline: 0;
		box-shadow: none;
	}
	
	.navbar-nav .nav-item{
		flex-direction: column;
	}
	
	.navbar-nav .nav-item + .nav-item::before {
		content: "-";
		color: #fff;
		padding: 0 5px;
	}
	
	.dropdown-menu{
		border: 0;
	}
	
	.section-padding{
		padding:60px 0;
	}
	
	.resource-content {
		width: 100%;
		margin-top: 0vh; /* 將內容往下推，避開圖片 */
		padding: 0 20px;
	}
	
	.swiper {
		width: 100%;
		height: auto;
	}
	
	/* .section-padding{
		padding:0 0;
	} */
	
	/* Section 1 */
	.slide-content {
		flex-direction: column;
	}
	.slide-image, .slide-text {
		width: 100%;
	}
	.slide-image { height: 50%; }
	.slide-text { height: 100%; }
	
	.slide-text p {
		font-size: 1.1rem;
		margin-bottom: 0;
	}
	
	.slide-text img.banner-title {
		width: 100%;
		height: auto;
		margin-bottom: 2rem;
	}
	
	.swiper-custom-next{
		osition: absolute;
		right: 3%;
		top: 22%;
		transform: translateY(-50%);
		cursor: pointer;
		z-index: 10;
	}
	
	.swiper-custom-next img{
		width: 32px;
		height: 32px;
	}
	
	
	.resource-item-links .resource-item {
		flex-grow: 0;
		background-color: #30a6c6;
		color: #333;
		text-decoration: none;
		padding: .15rem .25rem;
		border-radius: 20px;
		text-align: center;
		border: 1px solid #30a6c6;
		transition: all 0.3s ease;
		font-size: 0.8rem;
		color: #fff;
	}
	/* Section 2 */
	.btn-language {
		font-size: 1rem;
		padding: 10px 20px;
		min-width: 120px;
		flex: 1 1 40%; /* 手機上按鈕自動撐開，一行兩個 */
	}
	
	.thumbnail-caption {
		font-size: 0.8rem;
	}
	
	#section2.full-screen-section{
		align-items: flex-start;
		flex-direction: column;
	}
	
	.resource-item-wrapper {
		flex-direction: column; /* 改為垂直排列 */
		gap: 15px;
	}
	
	.resource-item-links {
		justify-content: center; /* 讓連結在容器內置中 */
		width: 100%; /* 確保連結容器寬度足夠 */
	}
	
	img.spokesperson-img{
		position: relative;
		width: 100%;
		height:auto;
		left: none;
		bottom: auto;
		transform: translateX(-50%);
	}
	
	.resource-links {
		display: flex;
		justify-content: center;
		gap: 15px;
		margin-top: 30px;
	}
	
	.resource-icon img{
		width: 100%;
		height: auto;
	}
	
	

	/* Section 3 */
	
	#section3{
		padding-bottom:auto;
	}
	
	.split-layout {
		flex-direction: column;
		height: auto;
	}
	
	#section3 img.main-title{
		width: 100%;
		height: auto;
		margin-bottom: 1.2rem;
	}
	
	.split-row ul li{
		font-size: 1rem;
	}
	
	.split-text {
		flex: 0 0 60%;
		padding: 5%;
		padding-right: 5%;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	
	.split-icon img {
		width: 60px;
	}
	
	#section3 .split-text{
		height:auto;
	}
	
	.split-text, .split-image {
		flex: 1; /* Make them equal height */
		height: 50vh;
	}
	.split-text {
		order: 2; /* Text below image */
	}
	 .split-image {
		order: 1; /* Image on top */
	}
	
	/* section 4 */
	img.main-title.title-sz-1{
		width:90%;
		margin:0 auto;
	}
	
	.accordion-button {
		font-size: 1.2rem;
		background-color: #56a3c2;
		border-bottom: 1px solid #56a3c2;
		color: #fff;
	}
	
	.accordion-body {
		font-size: 1rem;
	}
	
	/* section 5 */
	#section5 .container{
		
	}
	
	.showcase-image{
		margin-bottom:1.2rem;
	}
	
	
	#section5 .sub-title h2 span, #section5 .sub-title h2 b {
		display: block;
	}
	
	#section5 .sub-title h2 b {
		display: block;
		width: fit-content;
		margin: 0 auto;
	}
	
	#section5 .sub-title{
		width:100%;
		text-align: center;
	}
	
	.story-list{
		margin-bottom:1.2rem;
	}
	
	.story-list a.story-item-link:link, 
	.story-list a.story-item-link:visited, 
	.story-list a.story-item-link:active{
		margin-bottom: .5rem;
	}
	
	/* section 6 */
	#section6 
	
	/* Footer */
	.logo-group {
		flex-direction: column;
		gap: 20px;
	}
}