/* Define custom font */
@font-face {
  font-family: 'NeueFrutigerWorld_Book';
  src: url('../fonts/NeueFrutigerWorld-Book.woff2') format('woff2'),
       url('../fonts/NeueFrutigerWorld-Book.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'NotoSansCJKTC_Thin';
  src: url('../fonts/NotoSansCJKtc-Thin.woff2') format('woff2'),
       url('../fonts/NotoSansCJKtc-Thin.woff') format('woff');
}

@font-face {
  font-family: 'MXiangHeHeiTC_Light';
  src: url('../fonts/MXiangHeHeiTC-Light.woff2') format('woff2'),
       url('../fonts/MXiangHeHeiTC-Light.woff') format('woff');

}

@font-face {
  font-family: 'MXiangHeHeiTC_Heavy';
  src: url('../fonts/MXiangHeHeiTC-Heavy.woff2') format('woff2'),
       url('../fonts/MXiangHeHeiTC-Heavy.woff') format('woff');

}

@font-face {
  font-family: 'MXiangHeHeiTC_Bold';
  src: url('../fonts/MXiangHeHeiTC-Bold.woff2') format('woff2'),
       url('../fonts/MXiangHeHeiTC-Bold.woff') format('woff');

}

@font-face {
  font-family: 'MXiangHeHeiTC-Book';
  src: url('../fonts/MXiangHeHeiTC-Book.woff2') format('woff2'),
       url('../fonts/MXiangHeHeiTC-Book.woff') format('woff');

}


@font-face {
  font-family: 'NeueFrutigerWorld-Book';
  src: url('../fonts/NeueFrutigerWorld-Book.woff2') format('woff2'),
       url('../fonts/NeueFrutigerWorld-Book.woff') format('woff');

}

@font-face {
  font-family: 'NotoSansCJKTC_Regular';
  src: url('../fonts/NotoSansCJKtc-Regular.woff2') format('woff2'),
       url('../fonts/NotoSansCJKtc-Regular.woff') format('woff');
}


/* Remove underline from all link states */
a:link,
a:visited,
a:hover,
a:active {
  text-decoration: none;
}

/* Example: Remove underline only on hover */
a {
  text-decoration: none; /* Default underline */
}

a:hover {
  text-decoration: none; /* Remove underline on hover */
}

Oops, something went wrong.


.font_MXiangHeHeiTC_Light {
	font-family: 'MXiangHeHeiTC_Light';
}

body {
  font-family: 'NeueFrutigerWorld_Book', sans-serif;
  margin: 0;
  padding: 0; /* Ensure no default padding or margin on body */
}

/* Full-width wrapper for sections with backgrounds */
.full-width {
  width: 100%; /* Full viewport width, covers entire browser */
  position: relative;
  overflow: hidden; /* Prevent horizontal scroll issues */
}

/* Inner container for content, limited to 1280px */
.inner-container {
  
  width: 100%;
  box-sizing: border-box; /* Ensure no extra width */
}

h1, h2, h3, h4, .btn {
  font-family: 'Roboto', sans-serif;
}

/* Section 1: Image Slider - Full-width slider */
.slider-section {
  position: relative;
}

.aspect-ratio-wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 50%; /* Dynamic height: 640/1280 = 50% for 2:1 ratio */
  height: 0; /* Forces the aspect ratio */
}

.aspect-ratio-wrapper .carousel {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; /* Fills the aspect-ratio wrapper */
}

.slider-section .carousel-inner {
  height: 100%; /* Fills the carousel height */
   /* Base min-height from AI, but dynamic with padding-bottom min-height: 640px; */
}

.slider-section .carousel-item {
  height: 100%; /* Fills the carousel-inner height */
  background-size: cover; /* Cover the full area */
  background-position: center;
  background-color: #f0f0f0; /* Fallback color if image fails */
  padding-bottom: 50%;
}

/* Logo Styling for Section 1 (Image Slider) */
.logo {
  position: absolute;
  top: 4vw; /* Dynamic relative to viewport height */
  right: 4%; /* Dynamic percentage from right */
  width: 9.14vw; /* Dynamic width: 117px at 1280px viewport (117 / 1280 * 100 = 9.14vw) */
  height: auto; /* Maintains aspect ratio, scales dynamically */
  max-width: 117px; /* Cap at AI max width */
  max-height: 140px; /* Cap at AI max height */
  z-index: 10; /* Above slider content */
  object-fit: contain; /* Preserves aspect ratio */
}

/* UPDATED: Carousel Caption (text message) */
.slider-section .carousel-caption {
  position: absolute;
    top: 16.5vw; /* Scale down top padding for better fit */
    left: 6.67vw; /* Scale down left padding for better fit */
  text-align: left;
  color: #000000; /* Color code as specified */
  padding: 0;
  margin: 0;
  transform: none; /* Remove transform for fixed positioning */
  max-width: 100%; /* Prevent overflow on small screens */
  box-sizing: border-box;
}

/* Caption text classes */
.slider-section .carousel-caption .church-name-zh {
  font-size: 2.656vw; /* Dynamic font-size: 34pt / 1280px * 100vw ≈ 2.656vw */
  line-height: 1.2;
  margin: 0;
}

.slider-section .carousel-caption .church-name-en {
  font-size: 2.656vw; /* Dynamic font-size: 34pt / 1280px * 100vw ≈ 2.656vw */
  line-height: 1.2;
  margin: 0 0 3.28125% 0; /* Dynamic margin-bottom: 42px / 1280px * 100% ≈ 3.281% */
}

.slider-section .carousel-caption .theme-zh1 {
  font-size: 5.078vw; /* Dynamic font-size: 65pt / 1280px * 100vw ≈ 5.078vw */
  line-height: 1.1;
  margin: 0;
}

.slider-section .carousel-caption .theme-zh2 {
  font-size: 5.078vw; /* Dynamic font-size: 65pt / 1280px * 100vw ≈ 5.078vw */
  line-height: 1.1;
  margin: 0;
}

.church-names{
	/*padding-top: 16.56vw;*/
}

/* Carousel Indicators (dots) */
.carousel-indicators {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  z-index: 5; /* Ensure above slider content but below controls */
}

.carousel-indicators .normaldot {
  background-color: #98a4b4; /* Inactive dot color */
  border-radius: 50%; /* Make it a circle */
  margin: 0 0.5vw; /* Dynamic spacing */
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.carousel-indicators .normaldot {
  background-color: #505965; /* Active dot color */
  width: 1vw; /* Slightly larger for active dot */
  height: 1vw;
  min-width: 10px;
  min-height: 10px;

}

.carousel-indicators .active {
  background-color: #505965; /* Active dot color */
  width: 1.2vw; /* Slightly larger for active dot */
  height: 1.2vw;
  min-width: 12px;
  min-height: 12px;
  border-radius: 50%;
}


  .slider-section .carousel-caption {

  }

  .slider-section .carousel-caption .church-name-zh {
    font-size: 2vw; /* Scale down font-size */
  }

  .slider-section .carousel-caption .church-name-en {
    font-size: 2vw; /* Scale down font-size */
    margin-bottom: 2.5%; /* Scale down margin */
  }

  .slider-section .carousel-caption .theme-zh1 {
    font-size: 4vw; /* Scale down font-size */
  }

  .slider-section .carousel-caption .theme-zh2 {
    font-size: 4vw; /* Scale down font-size */
  }




/* Section 2: Static Section - Full-width red background */
.static-section {
  background-color: #800529;
  color: #FFFFFF;
  height: 37.5vw;
  display: flex;
  flex-direction: column;
}

.HPSect2, .HPSect2_m {
	margin-left: 11.25vw;
	margin-top: 7vw
}

.Sect2title{
	font-size: 3vw;
	margin-bottom: 2.5vw;
}

.Sect2cont{
	font-size: 1.6vw;
}

.HPSect2 a, .HPSect2_m a {
	margin-top: 2vw;
}

.HPSect2_m{
	display: none !important;
}

.custom-btn {
  background-color: #F4EEE9;
  color: #000000;
  font-weight: bold;
  padding: .6vw 2rem;
  text-decoration: none;
  border-radius: 5px;
  margin-top: 1rem;
  width: 20vw;
  height: 5.46vw;
  font-size: 2.83vw;
}

/* Mixed Section (Section 3) - Assume full-width background if needed */
.mixed-section {
  position: relative;
  background: url('../images/bghpsect3.png') no-repeat bottom center;
  background-size: cover;
  height: 71.8vw
}


/* Common for subsections */
.subsection-1 {
  margin-left: 5.97vw;
}

.HPSect3Flex{
	margin-top: 9vw;
	margin-right: 3.125vw;
}

.subsection-logo {
	width: 25vw;
}

.text-info {
  flex: 1;
  margin-top: 3.55vw;
  color: #000000;
}

.HPSect3Flex_1 {
	color: #000;
	font-size: 3.4vw;
}

.HPSect3Flex_1_en {
	font-size: 1.7vw;
	color: #666;
}

.HPSect3Flex_2 {
	margin-top: 2.5vw;
}

.flex_2_txt{
	flex: 1;
}

.flex_2_box, .flex_3_box {
	border-radius: 8px;
	background-color: #800529;
	width: 10vw;
	height: 3.75vw;
	text-align: center;
	padding-top: .8vw;
	color: #fff;
	font-size: 1.5vw;
}

.flex_2_txt {
	padding-top: .6vw;
	color: #000;
	font-size: 1.5vw;
	margin-left: 1.4vw
}

.HPSect3Flex_3 {
	margin-top: .86vw
}

.flex_3_box{
	width: 16vw;
}

.subsection-2 {
  margin-top: 3.53vw;
  text-align: center;
}

.HPSect3_sub2_tc{
	font-size: 3.4vw;
}

.HPSect3_sub2_en{
	font-size: 3.4vw;
}

.notice_box_outer {
	width: 80.8vw;
	height: 27.7vw;
	margin: 0 auto;
	overflow-y: auto;
	background-color: #eae1d8;
	border-radius: 24px;
}

.notice-box {
  width: 75vw;
  height: 25vw;
  background-color: #eae1d8;
  color: #000000;
  max-width: 1034px;
  max-height: 355px;
  margin: 1vw auto;
  overflow-y: auto;
  padding: 1rem;
}


.news-item {
  margin-bottom: 1rem;
  border-bottom: 0px solid #ccc;
  padding-bottom: 1rem;
  font-size: 2vw;
  color: #000;
}

.news_tilte {
	color: #800529
}

/* Dual Section (Section 4) - Assume full-width background if needed */
.dual-section {
  
  background-color: #aa9261;
  color: #FFFFFF;
  height: 37.5vw;
  display: flex;
}

.left-subsection {
  background-color: #aa9261;
  color: #FFFFFF;
  margin-top: 9.37vw;
  margin-left: 7.57vw;
  flex: 1.12;
  max-width: 45.43vw;
  font-size: 4.2vw;
}

.left-subsection div {
	line-height: 4.5vw;
}

.right-subsection {
  flex: 1;
  background-image: url('../images/HPSect4_rightimg.png');
  background-size: cover;
}

.en_thin{
	font-family: 'NotoSansCJKTC_Thin';
}

.right-subsection img {
  object-fit: cover;
}

.eventgallery_section {
  height: 61.87vw;
  background-image: url('../images/HPSect5_bg.png');
  background-size: cover;
}

.HPsect5_title {
	margin-top: 5.23vw;
	text-align: center;
	font-size: 3.4vw;
	line-height: 3vw;
}

.HPsect5_title_en {
	text-align: center;
	font-size: 3.4vw;
}

/* Section 5: Gallery Slider - Full-width with gold gradient background */
#galleryCarousel{
	margin-top: 3.35vw;
}

#galleryCarousel_m {
	display: none !important;
}

.gallery-section {
  position: relative;
  background: linear-gradient(90deg, #d4a373, #f0e6d2); /* Gold gradient inspired by screenshot */
  padding: 2rem 0;
  min-height: 500px; /* Base height, scales with content */
}

.gallery-section .carousel {
  width: 100%;
}

.gallery-section .carousel-inner {
  overflow: hidden; /* Ensure content stays within bounds */
  position: relative; /* Relative positioning for arrows */
  width: 100%; /* Full width of carousel */
  display: flex; /* Use flex for multi-item layout */
  transition: transform 0.5s ease; /* Smooth sliding */
}

.gallery-section .carousel-item {
  display: flex; /* Display group of 3 */
  justify-content: space-between; /* Space between cards */
  align-items: center;
  transition: opacity 0.5s ease; /* Smooth transition for visibility */
}

.gallery-section .gallery-group {
  display: flex;
  width: 100%;
  justify-content: space-around; /* Even spacing for 3 cards */
}

.gallery-section .gallery-card {
  flex: 0 0 30%; /* Each card ~30% width for 3 in a row with spacing */
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 1rem; /* Spacing between cards */
  box-sizing: border-box;
}

.gallery-section .gallery-card img {
  width: 100%;
  height: auto;
  object-fit: cover;
  max-height: 400px; /* Cap image height for aspect ratio */
}

.gallery-section .gallery-caption {
  text-align: center;
  padding: 1rem 0;
  color: #333;
}

.gallery-section .gallery-caption h3 {
  font-size: 1.5rem;
  margin: 0.5rem 0;
}

.gallery-section .gallery-caption p {
  font-size: 1rem;
  margin: 0;
}

#galleryCarousel .carousel-inner{
	padding: 0 7.3vw;
}

.gallery-card-0 {
	width: 26.5vw;
	margin-right: 2vw;
}

.gallery-card-1 {
	width: 26.5vw;
	margin: 0 1vw;
}

.gallery-card-2 {
	width: 26.5vw;
	margin-left: 2vw;
}

.gallery-img {
	width: 100%;
	max-width: 26.5vw;
	height: 28.9vw;
	background-size: cover;
  	background-repeat: no-repeat;
  	background-position: top;
  	border-radius: 12px 12px 0 0;
  	cursor: pointer;
}

.gallery-caption-0, .gallery-caption-2, .gallery-caption-1{
	width: 26.5vw;
	height: 11.7vw;
	background-color: #800529;
	color: #fff;
	border-radius: 0 0 12px 12px;
	cursor: pointer;
}

.gallery-caption-1 {
	background-color: #aa9261;
}

.Gal_Cap_Tite, .Gal_Cap_Date {
	width: 22.6vw;
	margin: 0 auto;
}

.Gal_Cap_Tite {
	padding-top: 1.5vw;
	font-family: 'MXiangHeHeiTC_Thin';
	font-size: 1.8vw;
}

.Gal_Cap_Date{
	font-family: 'MXiangHeHeiTC_Thin';
	font-size: 1.6vw;
}


/* Carousel controls (arrows) */
.carousel-control-prev,
.carousel-control-next {
  width: 5%; /* Adjust arrow width */
  opacity: 0.8; /* Visible but subtle */
  z-index: 10; /* Above gallery content */
}

.carousel-control-prev:hover,
.carousel-control-next:hover {
  opacity: 1; /* Full opacity on hover */
}


/* Section 6 */
.left_SubSect6{
  flex: 1;
  background-image: url('../images/HPSect6_leftimg.jpg');
  background-size: cover;
  background-position: center;
}

.right_SubSect6{
  background-color: #aa9261;
  color: #FFFFFF;
  margin-top: 12.89vw;
  margin-left: 7.65vw;
  flex: 1.12;
  max-width: 45.43vw;
  font-size: 4.2vw;
}

/* Section 7 */
.one-section-400{
	height: 31.25vw;
	background-image: url('../images/HPSect7_bgimg.png');
  background-size: cover;
  background-position: center;
}

/* Section 8 */
.one-section-280{
	height: 21.87vw;
	background-color: #757575
}



.HPSect8_title_tc{
	font-family: 'NeueFrutigerWorld-Book';
	margin-top: 3vw;
	text-align: center;
	font-size: 3vw;
	color: #fff;
	line-height: 2.5vw
}

.HPSect8_title_en {
	font-size: 2.5vw;
	color: #fff;
	margin-top: .5vw;
	text-align: center;
}

.HPSect8_info {
	margin-left: 16.25vw;
	display: flex;	
}

.HPSect8_info_right, .HPSect8_info_left{
	font-size: 1.4vw;
	color: #fff;
	letter-spacing: .2vw;
	font-family: 'NeueFrutigerWorld-Book';
}

.HPSect8_info_left{
	width: 45.4vw;
	
}

/* Footer */
footer {
	height: 29.68vw;
	width: 100%;
	background-color: #ededed;
	font-family: 'NeueFrutigerWorld-Book';
}

.Foo_title{
	padding-top: 3.28vw;
	text-align: center;
	padding-bottom: 2.2vw;
}

.Foo_title img {
	width: 6.8vw;
}

.Foo_T {
	text-align: center;
	font-size: 2vw;
}

.pb25{
	padding-bottom: 1vw;
}

.Foo_I{
	text-align: center;
	cursor: pointer;
}

.Foo_I_I {
	width: 7vw;
}

/* Then and Now */
.MainDiv{
 background-image: url('../images/Otherbg.png');
  background-size: cover;
  background-position: top;
}

.NavMenu {
	width: 100%;
	height: 14.84vw;
	display: flex
}

.NavMenu_logo {
	padding-left: 3.9vw;
	text-align: center;
	padding-top: 3.78vw;
}
	
.NavMenu_img{
	width: 9.1vw
}

.NavMenu_bar {
	width: 86.87vw;
	padding-top: 7.96vw;
	padding-left: 17vw;
	display: flex;
	text-align: center;
}

.NMB_tc, .NMB_en{
	font-size: 1.8vw;
	
}

.NMB_tc{
	font-family: 'MXiangHeHeiTC-Book';
}

.NMB-1 {
	padding-right: 3vw;
    color: #000;
    padding-left: 3vw;
}

.NMB-2 {
	padding-right: 3vw;
	color: #000;
}



.NMB-3 {
	padding-right: 3vw;
	color: #000;
}

.NMB-4 {
	padding-right: 4vw;
	color: #000;
}

.NMB-5 {
	color: #000;
}

.NMB_en {
	font-family: 'NotoSansCJKTC_Regular';
}

.activeNM{
	color: #800529;
}

.TN_main, .EG_main {
	padding-top: 2.65vw;
	
}

.TN_main{
	padding-bottom: 2.65vw;
	
}

.EG_main{
	background-image: url('../images/Otherbg.png');
}

.TN_main_title, .TN_main_hist {
	text-align: center;
}

.TN_main_title_tc {
	font-family: 'MXiangHeHeiTC-Book';
	font-size: 4vw;
	letter-spacing: .4vw;
}

.TN_main_title_en{
	font-family: 'NotoSansCJKTC_Thin';
	font-size: 4vw;
	letter-spacing: .4vw;
	margin-top: -2vw;
}

/* Section 6: Then & Now Photo Comparison */
.then-now-section {
  background-color: #f8f8f8; /* Light background for contrast */
  padding: 2rem 0;
  min-height: 500px; /* Base height, scales with content */
}

.then-now-section .inner-container {
  display: flex;
}

.then-now-panel {
  width: 10%; /* Left panel width */
  display: flex;
  flex-direction: column;
  align-items: baseline;
  gap: 1rem; /* Space between numbers */
}

.panel-number {
  width: 4.5vw;
  height: 4.5vw;
  background-color: #bcbcbc; /* Inactive gray */
  color: #ffffff;
  border-radius: 50%; /* Circle shape */
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.3s;
  font-size: 2vw;
  border: 0;
  margin-bottom: 2vw;
}

.panel-number.active {
  background-color: #800529; /* Active red */
}

html {
    height: 100%;
}

body {
    background-size: cover;
    height: 100%;
}

.comparison-slider-wrapper, .comparison-slider-wrapper2 {
  width: 90%; /* Right slider width */
  margin-left: 1rem;
}

.comparison-slider, .comparison-slider2 {
  position: relative;
  width: 71.4vw; /* Dynamic width as specified */
  height: 47.65vw; /* Dynamic height as specified */
  overflow: hidden;
  cursor: ew-resize; /* Horizontal resize cursor for interactivity */
  border: 1px solid #ccc; /* Optional border for visibility */
}

.comparison-image-old, .comparison-image-old2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 1; /* Below handler */
}

.comparison-image-new, .comparison-image-new2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 2; /* Above old image, below handler */
  clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 50% 100%); /* Default middle split */
}

.comparison-img, .comparison-img2 {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Cover the area */
}

.comparison-handler, .comparison-handler2 {
  position: absolute;
  top: 0;
  left: 50%;
  width: 6px; /* Wider handler bar */
  height: 100%;
  background-color: #800529; /* White handler bar */
  transform: translateX(-50%); /* Center the bar */
  cursor: ew-resize; /* Horizontal resize cursor */
  z-index: 3; /* Above images */
}

.comparison-handler-icon, .comparison-handler-icon2 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #800529; /* Red background */
  border-radius: 50%; /* Circular shape */
  padding: .5vw; /* Space for image */
  z-index: 4; /* Above handler bar */
}

.handler-arrow-img, .handler-arrow-img2 {
  width: 4vw; /* Default size, adjust based on your image */
  height: auto; /* Maintain aspect ratio */
  display: block; /* Ensure proper alignment */
}

.comparison-caption {
  text-align: center;
  margin-top: 1rem;
  font-size: 1rem;
  color: #333;
}
.TN_main_img {
	padding-top: 2.65vw;
	padding-left: 9.2vw;
	display: flex;
}
.mobonly{
	display: none;
}

.TN_main_leftdot {
	width: 9.2vw;
}

.TN_main_hist {
	padding-top: 5.78vw;
	padding-bottom: 4.76vw;
}

.EG_main_title_tc{
	font-family: 'NeueFrutigerWorld_Book';
	font-size: 4vw;
	letter-spacing: .4vw;
}

.EG_main_gal{
	padding: 0 6.8vw;
	padding-top: 4.45vw;
}

.EG_gal {
	padding-bottom: 3.2vw
}

.LR_main_subtitle_tc {
	padding-top: 3vw;
	font-family: 'NeueFrutigerWorld_Book';
	font-size: 2.8vw;
	padding-bottom: 1.7vw;
}

.LR_main_result{
	display: flex;
	padding: 0 7.1vw 2.9vw 7.1vw;
}

.LR_main_result_2 {
	display: flex;
	padding: 0 22vw 2.9vw 22vw;
}

.LR_result_1 {
	margin-right: 2.65vw;
}

.LR_result_3 {
	margin-left: 2.65vw;
}

.LR_rewards, .LR_rewards_G {
	width: 26.56vw;
	height: 4.92vw;
	background-color: #800529;
	text-align: center;
	color: #fff;
	display: flex;
  justify-content: center; /* Horizontally centers content */
  align-items: center; /* Vertically centers content */
  font-size: 2.8vw;
  font-family: 'MXiangHeHeiTC_Bold';
	
}

.LR_rewards_G {
	background-color: #aa9261;
}

.LR_img {
	width: 26.56vw;
	height: 27.65vw;
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
	border-left: 1px solid #9b9b9b;
	border-right: 1px solid #9b9b9b;
	background-color: #fff;
}

.LR_info, .LR_info_2 {
	width: 26.56vw;
	background-color: #a0a0a0;
	color: #fff;
	border-radius: 0 0 12px 12px;
	font-family: 'MXiangHeHeiTC_Light';
	padding-top: 1.5vw;
	padding-left: 1.7vw;
	font-size: 1.9vw;
}

.LR_info{
	height: 15vw;
}

.LR_info_2{
	height: 11.7vw;
}

.LR_main_P {
	text-align: center;
}

.LR_chur {
	background-image: url('../images/Otherbg.png');
	background-size: cover;
}

.PC_main_b, .PC_main_c {

	padding: 3.8vw 17.9vw 5vw 17.9vw;
}











/* Publication Page (Grey Background with PDF Viewer) */
.publication-section {
  background-color: #f0f0f0; /* Grey background */
  padding: 2rem 0;
  min-height: 600px; /* Base height, scales with content */
}

.pdf-viewer-wrapper {
  position: relative;
  width: 100%;
  
  overflow: hidden;
}

#pdf-canvas {
  width: 100%;
  height: 100%;
  border: 1px solid #ccc; /* Optional border for visibility */
}

.pdf-controls {
  position: absolute;
  bottom: 10px; /* Position at the bottom with some padding */
  left: 50%; /* Center horizontally */
  transform: translateX(-50%); /* Adjust for center alignment */
  display: flex;
  justify-content: center; /* Center the buttons */
  gap: 20px; /* Space between arrows */
  z-index: 10; /* Above PDF content */
}

.pdf-arrow {
  background-color: rgba(0, 0, 0, 0.1); /* Semi-transparent background */
  border: none;
  cursor: pointer;
  padding: .5vw;
  opacity: 0.8;
  transition: opacity 0.3s;
}


.arrow-icon {
  display: block;
  width: 2vw;
  height: 2vw;
  background-color: #ffffff; /* White arrow icon, adjust as needed */
  border-radius: 50%; /* Circle shape for icon */
  background-size: contain; /* Scale image to fit within circle */
  background-repeat: no-repeat; /* Prevent tiling */
  background-position: center; /* Center the image */
}

.left-icon {
  background: url('../images/publicaleft.png'); /* Replace with your left arrow image */
  background-size: contain; /* Scale image to fit within circle */
  background-repeat: no-repeat; /* Prevent tiling */
  background-position: center; /* Center the image */
  
}

.right-icon {
  background: url('../images/publicaright.png'); /* Replace with your right arrow image */
  
}

.page-info {
  text-align: center;
  margin-top: 1rem;
  font-size: 1rem;
  color: #333;
}

.PC_arrow {
	width: 3vw;
}


.CU_main {
	padding-left: 6.9vw;
	padding-top: 3.6vw;
	display: flex;
	padding-bottom: 4.5vw;
}

.CU_main_left {
	width: 52.6vw;
	height: 30.78vw;

}

.CU_main_right{
	padding-left: 3.5vw;
	padding-top: 3.5vw;
	width: 30vw;
	font-family: 'MXiangHeHeiTC-Book';
	font-size: 1.5vw;
}

.CU_right_3 {
	padding-left: 5vw;
}

.CU_right_4 {
	margin-top: 2.5vw;
}

	.deskview{
		display: block;
	}
	
	.mobview{
		display: none;
	}
	
.sidebar{
	display: none !important;
}	

.menu-icon{
	display: none !important;
}

@media (max-width: 768px) {
	.menu-icon{
		display: block !important;
		right: 4.5vw;
		position: fixed;
		z-index: 1000;
		padding-top: 3vw;
		font-size: 7vw;
	}
	
	.logo {
		position: relative;
		top: 4vw;
		/* right: 4%; */
		left: 4%;
		width: 15vw;
	}
	
	#carouselExample{
		margin-top: -18vw;
	}
	
	.EG_main_m{
		background-image: url(../images/Otherbg.png);
		padding-top: 2.65vw;
	}
	
	
	
	.sidebar {
		display: block !important;
		position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #444;
            color: white;
            transform: translateX(-100%);
            opacity: 0;
            transition: transform 0.3s ease, opacity 0.3s ease;
            z-index: 999;
            padding: 20px;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;	
	}
	
	.sidebar.active {
            transform: translateX(0);
            opacity: 1;
        }
	
	.NavMenu_bar {
			display: none !important;
	}
	
	.menu-items {
		margin-top: 25vw;
            list-style: none;
            padding: 0;
            flex-grow: 1;
        }

        .menu-items li {
            margin-bottom: 10vw;
        }

        .menu-items a {
            color: white;
            text-decoration: none;
            font-size: 18px;
        }
		
	.NMB_tc, .NMB_en {
		font-size: 4.5vw;
	}
	
	.slider-section .carousel-item{
		padding-bottom: 60%;
	}
	
	.slider-section .carousel-caption {
		top: 24.5vw;
	}
	
	.custom-btn{
		width: 30vw;
	}
	
	.d-none{
		display: block !important;
	}
	
	.CU_main_left{
		background-size: cover;
	}
	
	
	.gallery-card-0, .gallery-card-1, .gallery-card-2 {
		width: 100vw;
		margin-right: 2vw;
		margin-bottom: 8vw;
	}
	
	.gallery-card-0, .gallery-card-1, .gallery-card-2 {
		width: 85vw;
		
	}
	
	.gallery-img{
		height: 40vw;
		max-width: none;
		background-position: center;
	}
	
	.gallery-caption-0, .gallery-caption-1, .gallery-caption-2 {
		width: 85vw;
		height: 15vw;
	}
	
	.Gal_Cap_Tite, .Gal_Cap_Date {
		width: 60vw;
		font-size: 4vw;
		text-align: center;
	}
	
	.NavMenu {
		height: 25vw;
	}
	
	.NavMenu_img{
		width: 15vw;
		position: relative;
		z-index: 1000;
	}
	
	.PC_main_b{
		padding-left: 5vw;
		padding-right: 5vw;
		background-image: url(../images/pbook.jpg);
		background-size: cover;
		height: 60vh;
	}
	
	.PC_main_c{
		padding-left: 5vw;
		padding-right: 5vw;
		background-image: url(../images/publication3_1.jpg);
		background-size: cover;
		height: 60vh;
	}
	
	
	.EG_main_title_tc{
		font-size: 8vw;
	}
	
	.TN_main_title_en{
		font-size: 6vw;
	}
	
	.EG_gal {
		padding-bottom: 1vw;
	}
	
	.slider-section .carousel-caption .church-name-zh {
		font-size: 5vw;
	}
	
	.slider-section .carousel-caption .church-name-en {
		font-size: 3vw;
	}
	
	.Sect2title{
		font-size: 5vw;
	}
	
	.HPSect2{
		display: none !important;
	}
	
	.HPSect2_m{
		display: block !important;
		margin-left: 8vw;
		margin-top: 5vw;
		margin-right: 8vw;
	}
	
	.static-section{
		height: 60vw;
	}
	
	.HPSect3Flex_1 {
		font-size: 5vw;
	}
	
	.HPSect3Flex_1_en {
		font-size: 2.4vw;
	}
	
	.Sect2cont {
		font-size: 4vw;
	}
	
	.custom-btn {
		background-color: #F4EEE9;
		color: #000000;
		font-weight: bold;
		padding: 1.2vw 1rem;
		text-decoration: none;
		border-radius: 5px;
		margin-top: 1rem;
		width: 30vw;
		height: 8vw;
		font-size: 4vw;
	}
	
	.deskview{
		display: none !important;
	}
	
	.mobview{
		display: block;
	}
	
	.CU_main{
		display: block;
		background-image: url(../images/Otherbg.png);
		padding-bottom: 15.5vw;
	}
	
	.CU_main_left{
		width: 340px;
		height: 250px;
	}
	
	.CU_main_right{
		width: 100%;
		font-size: 4vw;
		padding-left: 0;
		padding-top: 6vw;
		padding-bottom: 6vw;
	}
	
	.CU_right_3 {
		padding-left: 13vw;
	}
	
	.LR_rewards, .LR_rewards_G {
		width: 53vw;
		height: 10vw;
		font-size: 5vw;
	}
	
	.LR_img {
		width: 53vw;
		height: 55vw;
	}
	
	.LR_info, .LR_info_2{
		width: 53vw;
		height: 26vw;
		font-size: 4.5vw;
	}
	
	.LR_main_result{
		display: block;
	}
	
	.LR_main_subtitle_tc {
		font-size: 4vw;
	}
	
	.LR_result_1, .LR_result_2, .LR_result_3{
		padding: 2vw 16.5vw;
	}
	
	.LR_result_3{
		margin-left: 0;
	}
	
	.LR_main_result_2 {
		display: block;
		padding: 0 22vw 2.9vw 7vw;
	}
	
	.HPSect3Flex {
		margin-top: 5vw;
		text-align: center;
	}
	
	.text-info-m {
		padding: 0 5vw;
	}
	
	.flex_2_box, .flex_3_box {
		border-radius: 8px;
		background-color: #800529;
		width: 24vw;
		height: 7vw;
		text-align: center;
		padding-top: 1vw;
		color: #fff;
		font-size: 3vw;
	}
	
	.HPSect3Flex_3	{
		margin-top: 2vw;
	}
	
	.flex_2_txt {
		font-size: 3vw;
	}
	
	.mixed-section {
		height: 140vw;
	}
	
	.news-item{
		font-size: 3.5vw;
	}
	
	.notice_box_outer{
		height: 40vw;
		width: 90vw;
		margin-top: 2vw;
	}
	
	.notice-box{
		height: 30vw;
		width: 80vw;
	}
	
	.left-subsection, .HPsect5_title, .font_MXiangHeHeiTC_Light{
		font-size: 5vw;
	}
	
	.HPsect5_title_en{
		font-size: 5vw;
		margin-top: 1vw;
	}
	
	.left-subsection {
		margin-top: 9vw;
	}
	
	.left-subsection div {
		margin-top: 2vw;
		line-height: 4vw;
	}
		
	#galleryCarousel {
		display: block;
	}
	
	#galleryCarousel_m {
		display: block !important;
		padding-left: 3vw;
		margin-top: -1vw;
	}
	
	.eventgallery_section{
		height: 80vw;
	}
	
	.right_SubSect6{
		font-size: 4vw;
	}
	
	.HPSect8_title_tc{
		font-size: 4vw;
	}
	
	.HPSect8_title_en {
		font-size: 3.5vw;
	}
	
	.HPSect8_info{
		margin-left: 2.5vw;
	}
	
	.HPSect8_info_right, .HPSect8_info_left {
		font-size: 2.8vw;
		padding-top: 3vw;
		
	}
	
	.one-section-280, .one-section-400, .dual-section {
		height: 50vw;

	}
	
	.HPSect8_title_tc{
		margin-top: 6vw;
	}
	
	#pdf-canvas{
		border: 0;
	}
	
	.TN_main_title_tc{
		font-size: 8vw;
	}
	
	.subsection-2{
		margin-top: 5vw;
	}
	
	.HPSect3_sub2_tc{
		font-size: 5vw;
	}
	
	.HPSect3_sub2_en{
		font-size: 4vw;
	}
	
	.subsection-logo{
		width: 30vw;
	}
}




/* Custom scrollbar styling for WebKit browsers (Chrome, Safari) */
::-webkit-scrollbar {
  width: 10px; /* Width of the scrollbar */
}

::-webkit-scrollbar-track {
  background: #ffffff; /* White background */
}

::-webkit-scrollbar-thumb {
  background-color: #d0bcae; /* Scrollbar color */
  border-radius: 5px; /* Rounded edges */
}

::-webkit-scrollbar-thumb:hover {
  background-color: #b8a395; /* Slightly darker on hover for interactivity */
}

/* Custom scrollbar styling for Firefox */
* {
  scrollbar-width: thin; /* Slim scrollbar */
  scrollbar-color: #d0bcae #ffffff; /* Thumb color, track color */
}

/* Additional Firefox-specific styling (limited support) */
@-moz-document url-prefix() {
  /* Firefox-specific tweaks */
  * {
    scrollbar-width: thin;
    scrollbar-color: #d0bcae #ffffff;
  }
  /* Optional: Customize thumb appearance further if supported */
  /* Note: Firefox has limited pseudo-element support for scrollbars */
}