/* =========================================
   Global Settings & Variables
   ========================================= */
:root {
	/* Brand Colors */
	--color-navy-dark: #03192E;
	/* Hero & Footer Dark BG */
	--color-navy-text: #004567;
	/* Dark Blue Text */
	--color-blue-card: #008CFF;
	/* Intro Blue */
	--color-purple-card: #421C76;
	/* Intro Purple */
	--color-profile-bg: #0060AA;
	/* Profile Blue */
	--color-cyan: #00BCD4;
	/* Cyan Icons */
	--color-teal: #008FFF;
	/* Teal Highlights */
	--color-gray-text: #004567;
	/* Body Text */
}

body {
	font-family: 'Noto Sans TC', sans-serif;
	color: var(--color-gray-text);
	line-height: 1.6;
	overflow-x: hidden;
}

/* Utility Helpers */
.py-large {
	padding-top: 5rem;
	padding-bottom: 5rem;
}

.text-dark-blue {
	color: var(--color-navy-text) !important;
}

.text-cyan {
	color: var(--color-cyan);
}

.text-teal {
	color: var(--color-teal);
}

/* =========================================
   1. Header Section
   ========================================= */
.sec-header .navbar-nav .nav-link {
	color: #666;
	font-size: 1.1rem;
	font-weight: 500;
	margin-right: 1.5rem;
	position: relative;
	transition: color 0.3s;
}

.sec-header .navbar-nav .nav-link:hover,
.sec-header .navbar-nav .nav-link.active {
	color: var(--color-navy-dark);
}

/* Desktop Underline Effect */
@media (min-width: 992px) {
	.sec-header .navbar-nav .nav-link.active::after {
		content: '';
		position: absolute;
		bottom: -24px;
		left: 0;
		width: 100%;
		height: 2px;
		background-color: var(--color-navy-dark);
	}
}

.sec-header .phone-number {
	font-size: 1.1rem;
	color: #004567;
}

.sec-header .btn-contact {
	background-color: #0d6efd;
	color: #fff;
	font-size: 1.1rem;
	font-weight: 700;
	padding: 0.375rem 1.5rem;
}

/* =========================================
   2. Hero Section
   ========================================= */
.sec-hero {
	background-color: var(--color-navy-dark);
	padding-top: 110px;
	padding-bottom: 130px;
}

.sec-hero .avatar-wrapper img {
	width: 130px;
	height: 130px;
	object-fit: cover;
	border: 4px solid #fff;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.sec-hero .hero-name {
	font-size: 2.5rem;
	font-weight: 700;
	letter-spacing: 0.5px;
	margin-top: 1.5rem;
	color: #ffffff;
}

.sec-hero .hero-title {
	font-size: 1.35rem;
	font-weight: 400;
	color: #ffffff;
	letter-spacing: 0.5px;
	line-height: 1.4;
}

.sec-hero .hero-subtitle {
	font-size: 1rem;
	font-weight: 300;
	color: #CFD8DC;
	letter-spacing: 0.5px;
	margin-top: 0.5rem;
}

@media (max-width: 768px) {
	.sec-hero {
		padding-top: 80px;
		padding-bottom: 100px;
	}

	.sec-hero .hero-name {
		font-size: 2rem;
	}

	.sec-hero .hero-title {
		font-size: 1.1rem;
		padding: 0 10px;
	}
}


/* =========================================
   3. Intro Section
   ========================================= */
.sec-intro {
	padding-top: 5rem;
	padding-bottom: 3rem;
	background-color: #fff;
}

.sec-intro .brand-story-title {
	color: #005662;
	font-size: 1.4rem;
	letter-spacing: 1px;
}

.sec-intro .intro-name,
.sec-intro .intro-tagline,
.sec-intro .intro-sub-tagline {
	color: var(--color-navy-text);
}

.sec-intro .intro-name {
	font-size: 2rem;
	letter-spacing: 0.5px;
}

.sec-intro .intro-tagline,
.intro-sub-tagline {
	font-weight: 300;
	font-size: 2.2rem;
	letter-spacing: 0.5px;
}

.sec-intro .highlight {
	font-weight: 700;
}

.sec-intro .intro-card {
	border-radius: 8px;
	padding: 3.5rem 3rem;
	color: #fff;
	transition: transform 0.3s ease;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.sec-intro .intro-card:hover {
	transform: translateY(-5px);
}

.sec-intro .card-blue {
	background-color: var(--color-blue-card);
}

.sec-intro .card-purple {
	background-color: var(--color-purple-card);
}

.sec-intro .card-title {
	font-size: 2rem;
	letter-spacing: 1px;
}

.sec-intro .card-subtitle {
	font-size: 1.8rem;
	font-weight: 300;
	letter-spacing: 1px;
}

.sec-intro .intro-arrow {
	width: 32px;
	height: 32px;
	display: inline-block;
	background: url(../img/intro_arrow.svg) center center no-repeat;
	background-size: contain;
	margin-left: 6px;
}


/* =========================================
   4. Profile Section
   ========================================= */
.sec-profile {
	padding-top: 1rem;
	padding-bottom: 5rem;
}

.sec-profile .profile-box {
	border-radius: 12px;
}

.sec-profile .bg-profile-blue {
	background-color: var(--color-profile-bg);
}

.sec-profile .bg-profile-light {
	background-color: #B9EBFD;
}

.sec-profile .min-h-500 {
	min-height: 580px;
}

.sec-profile img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sec-profile .profile-name {
	font-size: 2.2rem;
	letter-spacing: 1px;
}

.sec-profile .profile-role {
	font-size: 2rem;
	font-weight: 500;
	background: linear-gradient(90deg, #BCEBFF 0%, #6CD4FF 43.75%, #988CFF 58.41%, #976DF5 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	text-fill-color: transparent;
}

.sec-profile .profile-meta {
	font-size: 1.4rem;
}
.sec-profile .profile-meta p{
	font-weight: 500;
}

.sec-profile .profile-desc {
	font-size: 1.2rem;
	line-height: 1.6;
	font-weight: 400;
	letter-spacing: 0px;
	opacity: 0.7;
}

/* =========================================
   5. Story Sections A & B
   ========================================= */
.sec-story-a,
.sec-story-b {
	padding-top: 3rem;
	padding-bottom: 3rem;
}

.sec-story-b {
	margin-bottom: 2rem;
}

.sec-story-a .story-title,
.sec-story-b .story-title {
	color: var(--color-navy-text);
	font-size: 2rem;
	line-height: 1.4;
}

.sec-story-a .story-title {
	font-weight: 300;
}

.sec-story-a img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 8px;
}

.sec-story-a .story-content p,
.sec-story-b .story-content p {
	font-size: 1.2rem;
}

.sec-story-a .bg-pale-lavender {
	background-color: #E0DEFD;
}

.sec-story-b .bg-pale-blue {
	background-color: #90CAF9;
}

.placeholder-box {
	z-index: 1;
	width: 100%;
	height: 100%;
	min-height: 350px;
	max-height: 420px;
}

.placeholder-box img{
	border-radius: 8px;
}

.btn-outline-custom {
	background: #fff;
	color: var(--color-teal);
	border: 1px solid var(--color-teal);
	transition: all 0.3s ease;
	font-size: 1rem;
}

.btn-outline-custom:hover {
	background-color: var(--color-teal);
	color: #fff;
}

.sec-story-b .custom-list li {
	font-size: 1.2rem;
	font-weight: 600;
}

.sec-story-b .icon-teal {
	color: var(--color-teal);
}

/* =========================================
   7. Features Section
   ========================================= */
.sec-features {
	padding-top: 5rem;
	padding-bottom: 5rem;
}

.sec-features .subtext {
	font-size: 1.2rem;
}

.sec-features .section-heading {
	font-weight: 300;
	font-size: 2rem;
	line-height: 1.4;
	color: var(--color-navy-text);
}

.sec-features .feature-card {
	background-color: #fff;
	border: 2px solid #B2EBF2;
	padding-top: 0px !important;
	min-height: 240px;
	transition: all 0.3s ease;
}

.sec-features .feature-card:hover {
	box-shadow: 0 10px 20px rgba(0, 188, 212, 0.15);
	border-color: var(--color-cyan);
	transform: translateY(-5px);
}

.sec-features .fa-3x {
	font-size: 2.5rem;
}

.sec-features .section-sub-heading {
	font-size: 1.4rem;
}

/* =========================================
   8. Intermediate Conclusion
   ========================================= */
.buildingbg {
	background: url(../img/conclusion_buildingbg.jpg) center bottom no-repeat;
}

.sec-conclusion {
	padding-bottom: 5rem;
}

.sec-conclusion .bg-solid-cyan {
	background-color: #8FD8E3;
}

.sec-conclusion .conclusion-title {
	color: var(--color-navy-text);
	font-size: 1.75rem;
	letter-spacing: 0.5px;
	line-height: 1.4;
}

.sec-conclusion .highlight-text {
	color: var(--color-teal);
}

.sec-conclusion .subtext {
	font-size: 1.2rem;
}

.sec-conclusion img {
	border-radius: 8px;
}

/* =========================================
   9. Boston Experience
   ========================================= */
.sec-boston {
	padding-top: 6rem;
	padding-bottom: 6rem;
}

.sec-boston .section-label {
	font-size: 2rem;
	font-weight: 400;
	letter-spacing: 1px;
}

.sec-boston .section-headline {
	color: var(--color-navy-text);
	font-size: 2rem;
	line-height: 1.4;
	letter-spacing: 0.5px;
}

.sec-boston .text-desc {
	font-size: 1.2rem;
	line-height: 1.6;
}

.sec-boston .icon-teal {
	color: #008FFF;
	font-size: 1.2rem;
}

.sec-boston .quote-banner {
	position: relative;
	padding: 5rem;
	background: #165c8a url(../img/quotebanner_bg.jpg) center center no-repeat;
	background-size: cover;
}

.sec-boston .quote-subtitle {
	font-size: 1.2rem;
}

.sec-boston .quote-text {
	font-size: 2rem;
	font-weight: 400;
	line-height: 1.5;
}

.sec-boston .list-unstyled span {
	font-size: 1.2rem;
}

.sec-boston .subtitle {
	font-size: 1.2rem
}

.sec-boston .quote-content {
	position: relative;
	z-index: 100;
	padding-left: 4%;
}

.sec-boston .boston-feature-item p {
	font-size: 1.25rem;
	color: #004567;
}

.sec-boston .quote-icon {
	background: url(../img/quote-icon-light.svg) center center no-repeat;
	width: 68px;
	height: 68px;
	background-size: contain;
	position: absolute;
	top: 40px;
	z-index: 10;
}

.w-100 {
	object-fit: cover;
}


/* =========================================
   10. Accumulation
   ========================================= */
.sec-accumulate {
	background: #00426A url(../img/accumulatebg.jpg) center center no-repeat;
	background-size: cover;
	padding-top: 7rem;
	padding-bottom: 9rem;
}

.sec-accumulate .section-title {
	font-weight: 300;
	font-size: 2rem;
	letter-spacing: 1px;
}

.sec-accumulate .acc-card {
	min-height: 240px;
	border: none;
	padding: 2.5rem !important;
	transition: transform 0.3s;
}

.sec-accumulate .acc-card:hover {
	transform: translateY(-5px);
}

.sec-accumulate .acc-card .icon-box {
	color: #00ACC1;
	margin-bottom: 1.5rem;
}

.sec-accumulate .acc-card .card-text {
	font-size: 1.4rem;
	line-height: 1.6;
}

.sec-accumulate .section-desc {
	font-size: 1.2rem;
	line-height: 1.6;
}

/* =========================================
   11. Problem Section
   ========================================= */
.sec-problem {
	padding-top: 6rem;
	padding-bottom: 4rem;
}

.sec-problem .subtitle {
	font-size: 1.2rem;
}

.sec-problem .problem-headline {
	font-size: 2rem;
	line-height: 1.4;
	letter-spacing: 0.5px;
}

.bg-light-gray {
	background-color: #F2F2F2;
}

.ratio-21x9 {
	--bs-aspect-ratio: 42.85%;
}

/* =========================================
   12. Looking Back
   ========================================= */
.sec-looking-back {
	position: relative;
	z-index: 100;
	padding-top: 2rem;
	padding-bottom: 4rem;
}

.sec-looking-back .section-title {
	font-weight: 300;
	font-size: 2rem;
	letter-spacing: 0.5px;
}

.sec-looking-back .subtitle {
	font-size: 1.2rem;
}

.sec-looking-back .look-card {
	border: 1px solid #E0E0E0 !important;
	transition: box-shadow 0.3s;
}

.sec-looking-back .look-card:hover {
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}

.bg-gray-block {
	background-color: #C4C4C4;
}

.sec-looking-back .card-body h5 {
	font-weight: 500;
	font-size: 1.3rem;
}

.sec-looking-back .card-body p {
	font-size: 1rem;
}

.sec-looking-back .card-body {
	padding-bottom: 2.5rem !important;
}

.sec-looking-back .tipsCon {
	font-size: 1.3rem;
}


/* =========================================
   13. Core Positioning
   ========================================= */
.sec-core-position {
	background: #00325B url(../img/core-positionbg.jpg) center center no-repeat;
	background-size: cover;
	padding-top: 2rem;
	padding-bottom: 8rem;
}

.sec-core-position .section-label {
	font-size: 2rem;
}

.sec-core-position h2 {
	font-size: 2rem;
	letter-spacing: 1px;
}

.sec-core-position .core-list .text-teal {
	font-size: 1.25rem;
}

.sec-core-position .core-list span {
	font-size: 1.3rem;
	color: var(--color-navy-text);
}

.btn-outline-cyan {
	border: 1px solid #00ACC1;
	color: #00ACC1;
	background-color: transparent;
	transition: all 0.3s;
	font-size: 0.9rem;
}

.btn-outline-cyan:hover {
	background-color: #00ACC1;
	color: white;
}

.sec-core-position .subtitle {
	font-size: 1.3rem;
}

/* =========================================
   14. Final Conclusion - Top
   ========================================= */
.sec-final-dark {
	background: #00325B url(../img/final-darkbg.jpg) center center no-repeat;
	background-size: cover;
	padding-top: 8rem;
	padding-bottom: 8rem;
}

.sec-final-dark .final-label {
	font-size: 2.85rem;
	letter-spacing: 1px;
	font-weight: 300;
}

.sec-final-dark .final-title {
	font-size: 2.85rem;
	letter-spacing: 1px;
	font-weight: 300;
}

.sec-final-dark .divider-line {
	width: 50px;
	height: 1px;
	background-color: rgba(255, 255, 255, 0.5);
	margin-top: 2rem;
	margin-bottom: 2rem;
}

.sec-final-dark .final-desc {
	font-size: 1.35rem;
	line-height: 1.6;
	font-weight: 300;
}

.sec-final-dark .text-highlight {
	color: #00E5FF;
	font-weight: 400;
}


/* =========================================
   15. Final Conclusion - Bottom
   ========================================= */
.sec-final-white {
	padding-top: 5rem;
	padding-bottom: 8rem;
}

.sec-final-white .final-sub-label {
	font-size: 1.4rem;
	letter-spacing: 0.5px;
	font-weight: 400;
}

.sec-final-white .final-headline {
	font-weight: 400;
	font-size: 2.45rem;
	line-height: 1.4;
	color: var(--color-navy-text);
	letter-spacing: 0.5px;
}

.sec-final-white .placeholder-box {
	max-width: 100%;
}

.sec-final-white .placeholder-box img {
	width: 100%;
}


/* Mobile Response (Global) */
@media (max-width: 1360px) {
	.sec-intro .intro-tagline, .intro-sub-tagline {
	    font-size: 2rem;
	}
	.sec-intro .card-title {
	    font-size: 1.8rem;
	}
	.sec-intro .card-subtitle {
	    font-size: 1.6rem;
	}
	.sec-profile .profile-name {
	    font-size: 2rem;
	}
	.sec-profile .profile-role {
	    font-size: 1.8rem;
	}
	.sec-profile .profile-desc {
	    width: 94%;
	}
	.sec-story-a .story-title br,
	.sec-story-b .story-title br,
	.sec-features .section-sub-heading br{
		display: none;
	}
	
	
	.sec-features .section-sub-heading {
	    font-size: 1.4rem;
	    width: 80%;
	}
	
	.sec-boston .quote-icon {
	    width: 54px;
	    height: 54px;
	}
	
}
@media (max-width: 768px) {

	.sec-final-dark .final-title,
	.sec-final-dark .final-label {
		font-size: 2rem;
	}

	.sec-final-white .final-headline {
		font-size: 1.5rem;
	}

	.sec-hero .hero-name {
		font-size: 2rem;
	}

	.sec-intro .intro-name {
		font-size: 1.4rem;
	}

	.sec-accumulate .acc-card {
		padding: 1.5rem !important;
		min-height: auto;
	}

	.sec-final-white .final-sub-label {
		font-size: 1.2rem;
	}

	.sec-final-white .placeholder-box {
		height: auto;
		min-height: inherit;
	}

	.sec-final-white .final-headline br {
		display: none;
	}
	
}

@media (max-width: 768px) {
	
	.sec-intro .intro-tagline,
	.intro-sub-tagline {
		font-size: 1.8rem;
	}

	.sec-intro .intro-card {
		padding: 2rem;
		color: #fff;
	}

	.sec-intro .card-title {
		font-size: 1.4rem;
		letter-spacing: 1px;
	}

	.sec-intro .card-subtitle {
		font-size: 1.4rem;
	}

	.sec-intro .intro-arrow {
		width: 26px;
		height: 26px;
	}

	.sec-profile .profile-name {
		font-size: 1.8rem;
	}

	.sec-profile .profile-role {
		font-size: 1.4rem;
	}

	.sec-profile .profile-meta {
		font-size: 1rem;
	}

	.sec-profile .profile-desc {
		font-size: 0.95rem;
		width: 100%;
		line-height: 1.5;
	}

	.sec-profile .bg-profile-blue {
		padding: 3rem 2rem 4rem !important;
	}

	.sec-story-a .story-title,
	.sec-story-b .story-title,
	.sec-features .section-heading,
	.sec-boston .section-headline,
	.sec-core-position h2,
	.sec-boston .quote-text,
	.sec-accumulate .section-title,
	.sec-problem .problem-headline,
	.sec-looking-back .section-title {
		font-size: 1.8rem;
	}

	.sec-story-a .story-title br,
	.sec-story-b .story-title br,
	.sec-features .section-sub-heading br,
	.sec-problem .problem-headline br,
	.sec-conclusion .conclusion-title br,
	.sec-features .section-heading br,
	.sec-boston .quote-text br,
	.sec-accumulate .section-desc br {
		display: none;
	}
	
	
	.sec-features .section-sub-heading {
	    font-size: 1.4rem;
	}
	
	.sec-features .section-sub-heading{
		width:100%;
		justify-content: flex-start!important;
		margin-bottom:2rem;
	}

	.sec-boston .quote-banner {
		padding: 5rem 2.5rem;
	}

	.sec-boston .boston-feature-item p {
		font-size: 1rem;
	}

	.sec-boston .boston-feature-item p br {
		display: none;
	}
	.sec-final-dark .final-title {
	    width: 98%;
	    margin: 0 auto;
	}
	.sec-features .section-sub-heading {
	    font-size: 1.2rem;
	}
	.sec-final-dark .final-desc {
	    width: 90%;
	    margin: 0 auto;
	}
	.sec-story-a .story-content p, .sec-story-b .story-content p {
	    font-size: 1.1rem;
	}
	.sec-boston .list-unstyled span {
	    font-size: 1.1rem;
	}
	.sec-problem .subtitle {
	    font-size: 1.1rem;
		width:80%;
	}
	.sec-accumulate .acc-card .card-text {
	    font-size: 1.2rem;
	    line-height: 1.6;
	}
	.sec-accumulate .acc-card .card-text br{
	    display:none;
	}
}