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

/******************************
更多下载：https://www.bootstrapmb.com 
[Table of Contents]

1. Fonts
2. Body and some general stuff
3. Menu
4. Header
5. Hero
6. Brands
7. Preview
8. Video
9. About
10. Work
11. Services
12. Tools
13. Pricing
14. Marquee
15. Testimonials
16. CTA
17. FAQ
18. Contact
19. Footer
20. Loader


******************************/

/***********
1. Fonts
***********/

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Noto+Serif+SC:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600&display=swap');

/*********************************
2. Body and some general stuff
*********************************/

:root
{
	--font1: "Inter", "PingFang SC", "Microsoft YaHei", sans-serif;
	--font2: "Playfair Display", "Noto Serif SC", "Songti SC", serif;
	--white: #ffffff;
	--black: #111111;
	--bg-dark: #f8f9fa;
	--bg-light: #ffffff;
	--textColor: #333333;
	--hColor: #0a4c3e;
    --brand-primary: #0a4c3e;
    --brand-secondary: #c5a065;
    --brand-light: rgba(10, 76, 62, 0.05);
}
*
{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
html
{
	-webkit-font-smoothing: antialiased;
  	-moz-osx-font-smoothing: grayscale;
}
body
{
	font-family: var(--font1);
	font-size: 16px;
	font-weight: 400;
	background: var(--white);
	color: var(--textColor);
    line-height: 1.8;
}
div
{
	display: block;
	position: relative;
	-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
ul
{
	list-style: none;
	margin-bottom: 0px;
	padding-left: 0;
}
p
{
	font-family: var(--font1);
	font-size: 16px;
	line-height: 1.8;
	font-weight: 400;
	color: var(--textColor);
	-webkit-font-smoothing: antialiased;
	-webkit-text-shadow: rgba(0,0,0,.01) 0 0 1px;
	text-shadow: rgba(0,0,0,.01) 0 0 1px;
	margin-bottom: 0;
}
p a
{
	display: inline;
	position: relative;
	color: inherit;
	border-bottom: solid 1px #ffa07f;
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}
p:last-of-type
{
	margin-bottom: 0;
}
a
{
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}
a, a:hover, a:visited, a:active, a:link
{
	text-decoration: none;
	-webkit-font-smoothing: antialiased;
	-webkit-text-shadow: rgba(0,0,0,.01) 0 0 1px;
	text-shadow: rgba(0,0,0,.01) 0 0 1px;
}
p a:active
{
	position: relative;
	color: #FF6347;
}
blockquote, figure
{
	padding: 0;
	margin: 0;
}
h1{font-size: 56px;}
h2{font-size: 40px;}
h3{font-size: 24px;}
h4{font-size: 16px;}
h5{font-size: 14px;}
h1, h2, h3, h4, h5, h6
{
	font-family: var(--font2);
	-webkit-font-smoothing: antialiased;
	-webkit-text-shadow: rgba(0,0,0,.01) 0 0 1px;
	text-shadow: rgba(0,0,0,.01) 0 0 1px;
	line-height: 1.2;
	margin-bottom: 0;
	color: var(--hColor);
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}
h1::selection, 
h2::selection, 
h3::selection, 
h4::selection, 
h5::selection, 
h6::selection
{
	
}
img
{
	max-width: 100%;
}
button:active
{
	outline: none;
}
section
{
	display: block;
	position: relative;
	box-sizing: border-box;
}
.clear
{
	clear: both;
}
.clearfix::before, .clearfix::after
{
	content: "";
	display: table;
}
.clearfix::after
{
	clear: both;
}
.clearfix
{
	zoom: 1;
}
.float_left
{
	float: left;
}
.float_right
{
	float: right;
}
.trans_200
{
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}
.trans_300
{
	-webkit-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	-ms-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	transition: all 300ms ease;
}
.trans_400
{
	-webkit-transition: all 400ms ease;
	-moz-transition: all 400ms ease;
	-ms-transition: all 400ms ease;
	-o-transition: all 400ms ease;
	transition: all 400ms ease;
}
.trans_500
{
	-webkit-transition: all 500ms ease;
	-moz-transition: all 500ms ease;
	-ms-transition: all 500ms ease;
	-o-transition: all 500ms ease;
	transition: all 500ms ease;
}
.fill_height
{
	height: 100%;
}
.super_container
{
	width: 100%;
	overflow: hidden;
}
.prlx_parent
{
	overflow: hidden;
}
.prlx
{
	height: 130% !important;
}
.parallax-window
{
    min-height: 400px;
    background: transparent;
}
.parallax_background
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.background_image
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
}
.nopadding
{
	padding: 0px !important;
}
.owl-carousel,
.owl-carousel .owl-stage-outer,
.owl-carousel .owl-stage,
.owl-carousel .owl-item
{
	height: 100%;
}
.slide
{
	height: 100%;
}
.btn {
	display: inline-block;
	position: relative;
	height: 44px;
	padding-left: 24px;
	padding-right: 24px;
	color: var(--black);
	font-family: var(--font1);
	font-size: 16px;
	border-radius: 0;
	transition: all 0.3s ease;
}
.primary_btn { 
    background-color: var(--brand-primary); 
    color: var(--white); 
    font-weight: 500; 
    letter-spacing: 0.05em; 
    border-radius: 2px; 
    border: 1px solid var(--brand-primary); 
}
.secondary_btn { 
    background-color: transparent; 
    color: var(--brand-primary); 
    border: 1px solid var(--brand-primary); 
    font-weight: 500; 
    letter-spacing: 0.05em; 
    border-radius: 2px; 
}
.primary_btn:hover
{
	background-color: #0d614f;
    border-color: #0d614f;
	color: var(--white);
}
.secondary_btn:hover
{
	background-color: var(--brand-primary);
	color: var(--white);
}
.blink-text span
{
	position: relative;
	overflow: hidden;
	transition: 0.6s;
}
.blink-text span .out
{
	display: inline-flex;
}
.blink-text span .in
{
	position: absolute;
	left: 0;
	opacity: 0;
	transform: translateX(70%);
}
.blink-text:hover span .out
{
	opacity: 0;
	transform: translateX(-70%);
}
.blink-text:hover span .in
{
	opacity: 1;
	transform: translateX(0);
}
html.lenis,
html.lenis body {
  height: auto;
}

.lenis:not(.lenis-autoToggle).lenis-stopped {
  overflow: clip;
}

.lenis [data-lenis-prevent],
.lenis [data-lenis-prevent-wheel],
.lenis [data-lenis-prevent-touch] {
  overscroll-behavior: contain;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

.lenis.lenis-autoToggle {
  transition-property: overflow;
  transition-duration: 1ms;
  transition-behavior: allow-discrete;
}
.section_title_container
{
	margin-bottom: 49px;
}
.section_title_container h2 { display: block; position: relative; padding-top: 22px; font-weight: 500; font-size: 40px; letter-spacing: 0.05em; }
.section_title_container p { display: inline-block; position: relative; font-size: 14px; letter-spacing: 0.2em; padding-bottom: 10px; border-bottom: solid 1px var(--brand-primary); text-transform: uppercase; color: var(--brand-primary); font-weight: 600; }
.ml .letter
{
	display: inline-block;
  	line-height: 1em;
	opacity: 0;
}
section
{
	padding-top: 120px;
	padding-bottom: 120px;
	background-color: var(--white);
}
.clip-4-lg
{
	clip-path: polygon(
		0px 24px,
		12px 24px,
		12px 12px,
		24px 12px,
		24px 0px,
		calc(100% - 24px) 0px,
		calc(100% - 24px) 12px,
		calc(100% - 12px) 12px,
		calc(100% - 12px) 24px,
		100% 24px,
		100% calc(100% - 24px),
		calc(100% - 12px) calc(100% - 24px),
		calc(100% - 12px) calc(100% - 12px),
		calc(100% - 24px) calc(100% - 12px),
		calc(100% - 24px) 100%,
		24px 100%,
		24px calc(100% - 12px),
		12px calc(100% - 12px),
		12px calc(100% - 24px),
		0px calc(100% - 24px)
	);
}
.clip-lg
{
	clip-path: polygon(
		0px 24px,
		12px 24px,
		12px 12px,
		24px 12px,
		24px 0px,
		100% 0px,
		100% calc(100% - 24px),
		calc(100% - 12px) calc(100% - 24px),
		calc(100% - 12px) calc(100% - 12px),
		calc(100% - 24px) calc(100% - 12px),
		calc(100% - 24px) 100%,
		0% 100%);
}
.clip-lg-invert
{
	clip-path: polygon(
		0px 0px,
		calc(100% - 24px) 0px,
		calc(100% - 24px) 12px,
		calc(100% - 12px) 12px,
		calc(100% - 12px) 24px,
		100% 24px,
		100% 100%,
		24px 100%,
		24px calc(100% - 12px),
		12px calc(100% - 12px),
		12px calc(100% - 24px),
		0px calc(100% - 24px)
		);
}
.clip-lg-2-top
{
	clip-path: polygon(
		0px 24px,
		12px 24px,
		12px 12px,
		24px 12px,
		24px 0px,
		100% 0px,
		100% 100%,
		0% 100%
		);
}
.clip-lg-2-bottom
{
	clip-path: polygon(
		0px 0px,
		100% 0%,
		100% 100%,
		24px 100%,
		24px calc(100% - 12px),
		12px calc(100% - 12px),
		12px calc(100% - 24px),
		0px calc(100% - 24px)
		);
}
.clip-sm
{
	clip-path: polygon(
		0px 12px,
		6px 12px,
		6px 6px,
		12px 6px,
		12px 0px,
		100% 0px,
		100% calc(100% - 12px),
		calc(100% - 6px) calc(100% - 12px),
		calc(100% - 6px) calc(100% - 6px),
		calc(100% - 12px) calc(100% - 6px),
		calc(100% - 12px) 100%,
		0% 100%
	);
}
.clip-sm-4
{
	clip-path: polygon(
		0px 12px,
		6px 12px,
		6px 6px,
		12px 6px,
		12px 0px,
		calc(100% - 12px) 0px,
		calc(100% - 12px) 6px,
		calc(100% - 6px) 6px,
		calc(100% - 6px) 12px,
		100% 12px,
		100% calc(100% - 12px),
		calc(100% - 6px) calc(100% - 12px),
		calc(100% - 6px) calc(100% - 6px),
		calc(100% - 12px) calc(100% - 6px),
		calc(100% - 12px) 100%,
		12px 100%,
		12px calc(100% - 6px),
		6px calc(100% - 6px),
		6px calc(100% - 12px),
		0px calc(100% - 12px)
	);
}
.reveal
{
	opacity: 0;
}
.ml
{
	display: inline-block;
  	overflow: hidden;
}
.word
{
	display: inline-block;
	white-space: nowrap;
}
.letter
{
	display: inline-block;
	will-change: transform, opacity;
}
.space
{
	display: inline-block;
	width: 0.4em; /* adjusts natural spacing between words */
}

/*********************************
3. Menu
*********************************/

.menu {
	position: fixed;
	top: -500px;
	left: 0;
	width: 100%;
	background-color: var(--white); box-shadow: 0 0 20px rgba(0,0,0,0.1);
	transition: all 300ms ease;
	padding-top: 88px;
	z-index: 999;
	clip-path: polygon(
		0px 0px,
		100% 0px,
		100% calc(100% - 24px),
		calc(100% - 12px) calc(100% - 24px),
		calc(100% - 12px) calc(100% - 12px),
		calc(100% - 24px) calc(100% - 12px),
		calc(100% - 24px) 100%,
		24px 100%,
		24px calc(100% - 12px),
		12px calc(100% - 12px),
		12px calc(100% - 24px),
		0% calc(100% - 24px)
	);
	box-sizing: border-box;
	overflow-y: auto;
	overflow-x: hidden;
}
.menu.active
{
	top: 0;
}
.menu_content
{
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	padding-top: 24px;
}
.menu-nav
{
	gap: 15px;
}
.menu-nav li a {
	font-size: 16px;
	font-weight: 500;
	color: var(--black);
}
.menu_btn_container
{
	padding-bottom: 32px;
}
.menu_btn
{
	margin-top: 33px;
	padding-bottom: 32px;
	background-color: var(--brand-primary);
	color: var(--black);
}
.menu_btn:hover
{
	background-color: var(--brand-primary);
	color: var(--black);
}

/*********************************
4. Header
*********************************/

.header
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 1000;
}
.header.hidden
{
	position: fixed;
	top: -100px;
	padding-left: 0;
	padding-right: 0;
}
.header.scrolled
{
	top: 0px;
	-webkit-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	-ms-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	transition: all 300ms ease;
}
.header.scrolled .header_bg_lg
{
	position: absolute;
	top: 0;
	left: 24px;
	width: calc(100% - 48px);
	height: 100%;
	background-color: #063026;
	box-shadow: 0 2px 6px #13131614;
}
.header.scrolled .header_bg_l_1
{
	position: absolute;
	top: 0;
	left: 0;
	width: 12px;
	height: calc(100% - 24px);
	background-color: #063026;
}
.header.scrolled .header_bg_l_2
{
	position: absolute;
	top: 0;
	left: 12px;
	width: 12px;
	height: calc(100% - 12px);
	background-color: #063026;
}
.header.scrolled .header_bg_r_1
{
	position: absolute;
	top: 0;
	right: 0;
	width: 12px;
	height: calc(100% - 24px);
	background-color: #063026;
}
.header.scrolled .header_bg_r_2
{
	position: absolute;
	top: 0;
	right: 12px;
	width: 12px;
	height: calc(100% - 12px);
	background-color: #063026;
}
.header_bg::after
{
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	content: "";
	z-index: -1;
	box-shadow: 0 2px 6px #13131614;
}
.header_inner
{
	height: 88px;
}
.logo_full
{
	height: 60px;
    width: auto;
    object-fit: contain;
}
.header.scrolled .logo_full
{
    height: 50px;
}
.main-nav ul
{
	gap: 28px;
}
.main-nav ul li a
{
	font-size: 16px;
	font-weight: 500;
	color: var(--black);
}
.header_btn
{
	margin-left: 48px;
}
.hamburger
{
	display: none;
	width: 40px;
	height: 40px;
	background-color: transparent;
	outline: none;
	border: none;
	-webkit-transition: background-color 200ms ease;
	-moz-transition: background-color 200ms ease;
	-ms-transition: background-color 200ms ease;
	-o-transition: background-color 200ms ease;
	transition: background-color 200ms ease;
}
.hamburger_inner
{
	display: block;
	position: absolute;
	top: 18px;
	left: 6px;
	width: 28px;
	height: 3px;
	background-color: var(--brand-primary);
}
.hamburger_inner::before
{
	display: block;
	position: absolute;
	right: 0;
	top: -8px;
	width: 16px;
	height: 3px;
	background-color: var(--brand-primary);
	content: '';
	-webkit-transition: width 200ms ease;
	-moz-transition: width 200ms ease;
	-ms-transition: width 200ms ease;
	-o-transition: width 200ms ease;
	transition: width 200ms ease;
}
.hamburger_inner::after
{
	display: block;
	position: absolute;
	left: 0;
	bottom: -8px;
	width: 16px;
	height: 3px;
	background-color: var(--brand-primary);
	content: '';
	-webkit-transition: width 200ms ease;
	-moz-transition: width 200ms ease;
	-ms-transition: width 200ms ease;
	-o-transition: width 200ms ease;
	transition: width 200ms ease;
}
.hamburger:hover .hamburger_inner::before,
.hamburger:hover .hamburger_inner::after
{
	width: 28px;
}
.hamburger:hover, .hamburger.active
{
	background-color: rgba(0,0,0,0.1);
}
.hamburger.active .hamburger_inner::before
{
	width: 100%;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%) rotate(90deg);
	-moz-transform: translate(-50%, -50%) rotate(90deg);
	-ms-transform: translate(-50%, -50%) rotate(90deg);
	-o-transform: translate(-50%, -50%) rotate(90deg);
	transform: translate(-50%, -50%) rotate(90deg);
}
.hamburger.active .hamburger_inner
{
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
}
.hamburger.active .hamburger_inner::after
{
	display: none;
}

/*********************************
5. Hero
*********************************/

.hero
{
	min-height: 100vh; display: flex; align-items: center;
	height: auto;
	background: #ffffff;
	padding-top: 0;
	padding-bottom: 0;
	z-index: 0;
}
.hero_inner
{
	width: 100%;
	height: 100%;
	padding-top: 120px;
	padding-bottom: 80px;
}
.hero_content
{
	animation: hero-scale linear both;
	animation-timeline: scroll(root);
	animation-range: 250px 100vh;
}
@keyframes hero-scale
{
	from
	{
		transform: scale(1);
	}
	to
	{
		transform: scale(0.5);
	}
}
.hero_logo {
	width: 100%;
	height: auto;
	margin-bottom: 20px;
	animation: logoGlow 2s ease-in-out 1;
}

@keyframes logoGlow {
	0% {
		opacity: 1;
		filter: brightness(1);
	}
	50% {
		opacity: 0.3;
		filter: brightness(1.2);
	}
	100% {
		opacity: 1;
		filter: brightness(1);
	}
}
.hero_inner p { color: var(--black); 
	max-width: 800px; font-size: 20px; line-height: 1.8; margin-left: auto; margin-right: auto;
	margin-top: 6px;

	color: var(--black);
}
.hero_buttons
{
	margin-top: 25px;
	gap: 12px;
}
.social_container
{
	width: 100%;
	margin-top: 32px;
}
.social_container ul
{
	display: block;
	width: 100%;
	gap: 12px;
}
.social_container ul li
{
	width: 28px;
	height: 28px;
	background-color: var(--brand-primary);
}
.social_container ul li a
{
	display: block;
	width: 100%;
	height: 100%;
}
.social_container ul li a i
{
	color: var(--white);
	font-size: 16px;
}
.social_container ul li a:hover i
{
	opacity: 0.8;
}

/*********************************
7. Preview
*********************************/

.preview_container
{
	width: 100%;
	height: auto;
	aspect-ratio: 1424 / 762;
	background-color: var(--white);
	overflow: hidden;
	box-sizing: border-box;
	border: solid 8px var(--white);
	padding: 100px 15%; /* Increased padding to make images even smaller */
}
.preview_container_inner
{
	width: 100%;
	height: auto;
	gap: 20px; /* Slightly tightened gap */
}
.preview_col
{
	width: calc((100% - 40px) / 3);
	gap: 20px; /* Slightly tightened vertical gap */
}
.preview_img
{
	width: 100%;
	aspect-ratio: auto;
	overflow: hidden;
	background-color: var(--white);
	border-radius: 12px;
}
.preview_img img
{
	display: block;
	position: relative;
	width: 100%;
	height: auto;
	object-fit: contain;
	transform: scale(0.85);
}
.preview_img_contain img
{
	object-fit: contain;
    background-color: var(--white);
}

/*********************************
8. Video
*********************************/

.video-section
{
	width: 100%;
}
.video_container
{
	width: 100%;
	height: auto;
	overflow: hidden;
}
.video_container img
{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.play-btn-container
{
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: 400px;
	height: 400px;
}
.play-btn
{
	width: 104px;
	height: 104px;
	border-radius: 50%;
	background-color: rgba(31,31,31,0.3);
	border: solid 3px rgba(31,31,31,0.5);
	cursor: pointer;
}
.play-btn a
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 50%;
}
.play-btn img
{
	width: 18px;
	height: 30px;
}
.play-btn:hover
{
	background-color: rgba(31,31,31,0.5);
}

/*********************************
9. About
*********************************/

.about_text {
    margin-bottom: 60px;
}
.about_highlight_title {
    font-family: var(--font2);
    font-size: 36px;
    margin-bottom: 10px;
    color: var(--black);
    line-height: 1.3;
}
.text_highlight {
    color: var(--brand-primary);
    position: relative;
    display: inline-block;
}
.text_highlight::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 0;
    width: 100%;
    height: 8px;
    background-color: var(--brand-light);
    z-index: -1;
}
.about_date {
    font-size: 16px;
    color: #666;
    margin-bottom: 40px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
}
.about_date::before {
    content: '';
    display: block;
    width: 20px;
    height: 1px;
    background-color: #666;
}
.about_core_values {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 50px;
    flex-wrap: wrap;
}
.core_value_item {
    flex: 1;
    background: var(--bg-light);
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 240px;
    clip-path: polygon(
        0px 12px,
        6px 12px,
        6px 6px,
        12px 6px,
        12px 0px,
        100% 0px,
        100% calc(100% - 12px),
        calc(100% - 6px) calc(100% - 12px),
        calc(100% - 6px) calc(100% - 6px),
        calc(100% - 12px) calc(100% - 6px),
        calc(100% - 12px) 100%,
        0% 100%
    );
    transition: all 0.3s ease;
}
.core_value_item:hover {
    background: var(--brand-light);
    transform: translateY(-5px);
}
.core_icon {
    font-size: 28px;
    color: var(--brand-primary);
    width: 50px;
    height: 50px;
    background: var(--brand-light);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}
.core_text {
    font-size: 16px;
    line-height: 1.4;
    color: var(--black);
}
.core_text strong {
    font-size: 16px;
    display: block;
    margin-bottom: 4px;
    color: var(--black);
}

.about_positioning_block { text-align: center; background: #ffffff; color: var(--black); border: 1px solid rgba(22, 93, 53, 0.2); box-shadow: 0 20px 50px rgba(0,0,0,0.08); padding: 80px 40px; position: relative; overflow: hidden; border-radius: 12px; }
.about_positioning_block::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at top right, var(--brand-light), transparent 40%);
    pointer-events: none;
}
.positioning_title {
    font-family: var(--font2);
    font-size: 28px; /* Default size */
    margin-bottom: 20px;
    line-height: 1.4;
    color: var(--black);
    font-weight: 700;
    white-space: nowrap; /* Force single line */
    overflow: hidden; /* Hide overflow if any */
    display: inline-block; /* Allow width to fit content */
    max-width: 100%; /* Ensure it doesn't overflow container */
}

/* Responsive font sizing */
@media (max-width: 991px) {
    .positioning_title {
        font-size: 20px;
    }
}
@media (max-width: 768px) {
    .positioning_title {
        font-size: 16px;
        white-space: normal; /* Allow wrap on very small screens if absolutely necessary, but user prefers single line */
    }
}
@media (max-width: 500px) {
    .positioning_title {
        font-size: 14px; /* Go smaller */
    }
}

.text_highlight_primary {
    color: var(--brand-primary);
}

#typewriter-text {
    color: var(--black);
}

.cursor {
    display: inline-block;
    vertical-align: bottom;
    animation: blink 0.7s infinite;
    font-weight: 100;
    color: var(--brand-primary);
    margin-left: 2px;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}
.quote_mark {
    font-size: 40px;
    color: var(--brand-primary);
    vertical-align: -10px;
    line-height: 0;
    opacity: 0.5;
    margin: 0 5px;
}
.positioning_desc {
    font-size: 16px;
    opacity: 0.9;
    color: rgba(0,0,0,0.7);
    font-weight: 400;
    line-height: 1.8;
}
.brand_positioning_text {
    max-width: 800px;
    margin: 0 auto;
    border-top: 1px solid rgba(255,255,255,0.2);
    padding-top: 24px;
}
.text_highlight_white {
    color: var(--black);
    font-weight: 600;
    border-bottom: 1px dashed rgba(0,0,0,0.3);
}

.stats
{
	gap: 8px;
}
.stats_item
{
	width: calc((100% - 16px) / 4);
	background-color: var(--brand-primary);
	border: 1px solid #EAEAEA;
	padding-top: 58px;
	padding-bottom: 59px;
	text-align: center;
	user-select: none;
}
.stats_item h3
{
	font-family: var(--font2);
	font-size: 32px;
	font-weight: 600;
	line-height: 1.2;
	margin-bottom: 10px;
}
.stats_item p
{
	font-family: var(--font1);
	font-size: 16px;
	font-weight: 400;
	text-transform: none;
	color: var(--black);
	letter-spacing: normal;
	margin-top: 15px;
}

/*********************************
10. Work
*********************************/

.work_container
{
	padding-top: 36px;
}
.work_columns > div
{
	width: 50%;
}
.work .section_title_container
{
	margin-bottom: 0;
}
.work_item {
	transition: transform 0.3s ease;

	width: 100%;
}
.sticky_content
{
	width: 100%;
}
.sticky h2
{
	padding-top: 22px;
}
.sticky p
{
	max-width: 410px;
	margin-top: 13px;
}
.work_container > article:not(:last-of-type)
{
	margin-bottom: 20px;
}
.work_item figure {
	border-radius: 12px 12px 0 0;

	display: block;
	position: relative;
	overflow: hidden;
	margin-bottom: 8px;
	width: 100%;
	aspect-ratio: 698 / 469;
}
.work_item figure img
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}
.work_item figure canvas
{
	display: block;
	position: relative;
	transition: all 600ms ease;
}
.work_item figure:hover canvas
{
	transform: scale(1.1);
}
.work_details {
	background-color: var(--white); box-shadow: 0 10px 40px rgba(0,0,0,0.08); border-radius: 0 0 12px 12px;
	padding-left: 32px;
	padding-top: 24px;
	padding-right: 99px;
	padding-bottom: 24px;
}
.work_details h3 {
	font-family: var(--font1);
	font-size: 16px;
	font-weight: 500;
	color: var(--black);
	text-transform: none;
}
.work_details p {
	font-family: var(--font1);
	font-size: 16px;
	font-weight: 400;
	color: rgba(0,0,0,0.6);
	opacity: 0.67;
	margin-top: 7px;
}
.work_item figcaption
{
	position: absolute;
	bottom: 12px;
	left: 12px;
	z-index: 100;
}
.work_item figcaption ul li a
{
	display: inline-block;
	position: relative;
	height: 40px;
	line-height: 40px;
	padding-left: 8px;
	padding-right: 8px;
	font-family: var(--font1);
	font-size: 16px;
	color: var(--white);
	font-weight: 400;
	background-color: rgba(31,31,31,0.15);
	user-select: none;
}
.work_item figure:hover figcaption ul li a
{
	background-color: rgba(31,31,31,0.5);
}
.work_item figcaption ul li a:hover
{
	background-color: rgba(31,31,31,1) !important;
}
.work_btn
{
	margin-top: 28px;
}

/* Unique Tag Styling */
.unique_tag {
    display: inline-block;
    padding: 8px 16px;
    background: linear-gradient(135deg, #207d49 0%, #0e3d23 100%);
    color: white;
    font-weight: 600;
    border-radius: 30px;
    font-size: 14px;
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4);
    letter-spacing: 1px;
    text-transform: uppercase;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.unique_tag::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    transition: 0.5s;
    z-index: -1;
}

.work_item figure:hover .unique_tag::before {
    left: 100%;
}

/* Custom Work Content Visual */
.work_content_visual {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #f8f9fa;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    overflow: hidden;
}

.visual_list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.visual_list li {
    font-size: 14px;
    color: #333;
    margin-bottom: 6px;
    padding-left: 15px;
    position: relative;
    line-height: 1.4;
    font-weight: 500;
}

.visual_list li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: #000;
    font-weight: bold;
}

.visual_grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 12px;
    flex-grow: 1;
}

.grid_item {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #ffffff;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.grid_img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    flex-grow: 1;
}

.grid_caption {
    font-size: 12px;
    color: #666;
    text-align: center;
    padding: 4px;
    background: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Responsive adjustments for the visual content */
@media (max-width: 768px) {
    .work_content_visual {
        padding: 10px;
        gap: 10px;
    }
    .visual_list li {
        font-size: 12px;
        margin-bottom: 4px;
    }
    .grid_caption {
        font-size: 10px;
        padding: 2px;
    }
}

/*********************************
11. Services
*********************************/

.services_wrapper
{
	gap: 20px;
}
.services_wrapper > div
{
	width: calc((100% - 20px) / 2);
	height: auto;
}
.services_container
{
	gap: 8px;
}
.services_item {
	padding-top: 21px;
	padding-right: 32px;
	padding-bottom: 24px;
	padding-left: 32px;
	background-color: var(--white); border: 1px solid rgba(0,0,0,0.05); border-radius: 12px; margin-bottom: 10px;
	user-select: none;
}
.services_item > div
{
	opacity: 0.3;
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}
.services_item h3
{
	font-size: 32px;
}
.services_item p
{
	font-size: 16px;
	margin-top: 1px;
}
.services_item.active > div
{
	opacity: 1;
}
.services_pics
{
	width: 100%;
	flex-grow: 1;
	overflow: hidden;
}
.service_image
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}
.service_image img
{
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.services_pics > figure
{
	z-index: 0;
	margin-bottom: 0;
	height: 100%;
}
.services_pics > figure:first-child
{
	z-index: 1;
}
.services_pics > figure.front
{
	z-index: 1;
}
.service_image
{
	width: 100%;
	aspect-ratio: 698 / 582;
}
.service_image figcaption
{
	position: absolute;
	bottom: 12px;
	left: 12px;
	z-index: 100;
}
.service_image figcaption ul li a
{
	display: inline-block;
	position: relative;
	height: 40px;
	line-height: 40px;
	padding-left: 8px;
	padding-right: 8px;
	font-family: var(--font1);
	font-size: 16px;
	color: var(--white);
	font-weight: 400;
	background-color: rgba(31,31,31,0.15);
	user-select: none;
}
.service_tags
{
	gap: 4px;
}
.service_image:hover figcaption ul li a
{
	background-color: rgba(31,31,31,0.5);
}
.service_image figcaption ul li a:hover
{
	background-color: rgba(31,31,31,1) !important;
}

/*********************************
12. Rights
*********************************/

.rights_container
{
	gap: 16px;
}
.rights_item {
	width: calc((100% - 16px) / 2);
	background-color: var(--white); border: 1px solid rgba(0,0,0,0.05); border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,0.06); transition: transform 0.3s ease;
	padding: 32px;
	margin-bottom: 16px;
	user-select: none;
}
.rights_item h3
{
	font-family: var(--font2);
	font-size: 24px;
	margin-bottom: 12px;
}
.rights_item p
{
	font-size: 16px;
	line-height: 1.5;
}

/*********************************
13. Membership
*********************************/

.membership_container
{
	gap: 24px;
	width: 100%;
}
.membership_card {
	width: 100%;
	max-width: 800px;
	background-color: var(--white); border: 1px solid var(--brand-primary); border-radius: 16px; box-shadow: 0 20px 40px rgba(22, 93, 53, 0.08);
	padding: 40px;
	text-align: center;
}
.membership_card h3
{
	font-family: var(--font2);
	font-size: 28px;
	margin-bottom: 16px;
}
.membership_detail
{
	font-size: 22px;
	font-weight: 600;
	color: var(--black);
}
.membership_note
{
	margin-top: 10px;
}
.membership_note p
{
	color: #ff6347; /* Highlight color */
	font-weight: 600;
	font-size: 16px;
}
.membership_slogan
{
	margin-top: 40px;
	margin-bottom: 30px;
}
.membership_slogan h3
{
	font-size: 32px;
	margin-bottom: 12px;
	text-transform: none;
}
.membership_slogan p
{
	font-size: 20px;
	opacity: 0.8;
}
.membership_btn_container
{
	margin-top: 20px;
}

/*********************************
15. Testimonials
*********************************/

.testimonials_content
{
	background-color: var(--bg-light);
	padding-left: 20px;
    padding-top: 21px;
    padding-right: 36px;
    padding-bottom: 25px;
}
.testimonials_content::after
{
	display: block;
	position: absolute;
	top: 20px;
	right: 20px;
	content: url("../images/quote.png");
	opacity: 0.2;
}
.testimonials_rating
{
	gap: 2px;
}
.testimonials_rating li i
{
	color: #f7ca00;
	font-size: 15px;
}
.testimonials_content blockquote
{
	margin-top: 17px;
	font-size: 16px;
}
.testimonials_author {
	margin-top: 8px;
	background-color: #ffffff; border-top: 1px solid rgba(0,0,0,0.05);
	padding-left: 20px;
    padding-top: 20px;
    padding-right: 32px;
    padding-bottom: 20px;
}
.testimonials_author img
{
	display: inline-block;
	position: relative;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	overflow: hidden;
	flex-basis: 48px;
	flex-grow: 0;
	flex-shrink: 0;
}
.testimonials_author > div
{
	margin-left: 10px;
	margin-top: -6px;
}
.testimonials_author strong {
	display: block;
	color: var(--black);
	font-weight: 500;
	font-size: 16px;
}
.testimonials_author small {
	display: block;
	font-size: 16px;
	font-weight: 400;
	color: rgba(0,0,0,0.6);
	opacity: 0.67;
	margin-top: 1px;
}
.slider_nav
{
	position: absolute;
	right: 8px;
	bottom: 6px;
}
.slider_nav ul
{
	gap: 24px;
}
.slider_nav ul li
{
	cursor: pointer;
	padding: 8px;
	user-select: none;
}
.slider_nav ul li img
{
	width: 18px;
	height: 30px;
}
.slider_nav ul li:hover
{
	opacity: 0.2;
}

/*********************************
16. CTA
*********************************/

.cta_bg
{
	background-attachment: fixed;
}
.cta_inner
{
	position: relative;
	overflow: hidden;
	text-align: center;
	background: #ffffff;
}
.grid_canvas
{
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
}
.cta_content
{
	padding-top: 136px;
	padding-bottom: 160px;
	padding-left: 135px;
	padding-right: 135px;
}
.cta_content h2
{
	font-size: 68px;
}
.cta_btn
{
	margin-top: 22px;
}

.training_gallery
{
	margin-top: 8px;
}
.training_gallery_item
{
	overflow: hidden;
	border-radius: 16px;
	background: #f4f6f8;
	box-shadow: 0 10px 30px rgba(16, 24, 40, 0.08);
}
.training_gallery_item img
{
	height: 220px;
	object-fit: cover;
	transition: transform 300ms ease, filter 300ms ease;
}
.training_gallery_item:hover img
{
	transform: scale(1.03);
	filter: saturate(1.05);
}
.training_gallery_actions
{
	margin-top: 28px;
}
.training_more_btn
{
	min-width: 148px;
}

/* Custom Gallery Modal (Popup Slider) */
.custom-gallery-modal .modal-content {
    background-color: rgba(0, 0, 0, 0.95) !important;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
}

.custom-gallery-modal .modal-header {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1060;
    padding: 20px;
}

.custom-gallery-modal .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
    opacity: 0.7;
    transition: opacity 0.3s;
}

.custom-gallery-modal .btn-close:hover {
    opacity: 1;
}

.gallery-modal-img {
    max-height: 80vh;
    object-fit: contain;
    border-radius: 8px;
    margin: 0 auto;
}

.custom-gallery-modal .carousel-control-prev,
.custom-gallery-modal .carousel-control-next {
    width: 10%;
    opacity: 0.6;
    transition: opacity 0.3s;
}

.custom-gallery-modal .carousel-control-prev:hover,
.custom-gallery-modal .carousel-control-next:hover {
    opacity: 1;
}

.custom-gallery-modal .carousel-control-prev-icon,
.custom-gallery-modal .carousel-control-next-icon {
    width: 3rem;
    height: 3rem;
    background-color: rgba(0,0,0,0.5);
    border-radius: 50%;
    background-size: 50%;
}

/*********************************
17. FAQ
*********************************/

.faq .section_title_container
{
	border-bottom: solid 1px #dedede;
	padding-bottom: 16px;
	margin-bottom: 22px;
}
.faq .section_title_container p { display: inline-block; position: relative; font-size: 14px; letter-spacing: 0.2em; padding-bottom: 10px; border-bottom: solid 1px var(--brand-primary); text-transform: uppercase; color: var(--brand-primary); font-weight: 600; }
.faq_container
{
	gap: 8px;
}
.faq_container > div
{
	width: calc((100% - 8px) / 2);
}
.faq_content p
{
	max-width: 350px;
	margin-top: 14px;
}
.faq_accordion_container
{
	margin-top: 14px;
	min-height: 526px;
}
.faq_btn
{
	margin-top: 28px;
}
.faq_item
{
	width: 100%;
	margin-bottom: 8px;
	background-color: var(--bg-light);
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}
.faq_item:hover
{
	background-color: #ebebeb;
}
.faq_item button
{
	display: block;
	position: relative;
	width: 100%;
	border: none;
	outline: none;
	padding-left: 36px;
	padding-top: 21px;
	padding-bottom: 21px;
	padding-right: 36px;
	background-color: transparent;
	text-align: left;
	font-size: 16px;
	font-weight: 500;
	color: var(--black);
}
.faq_item button::after
{
	display: block;
	position: absolute;
	top: 50%;
	right: 19px;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(-50%);
	content: '+';
	font-family: var(--font2);
	font-size: 40px;
	color: var(--black);
	font-weight: 200;
}
.faq_item.acc_active button::after
{
	content: '-';
}
.faq_item dd
{
	padding-left: 36px;
	font-size: 16px;
	font-weight: 400;
	color: var(--black);
	opacity: 0.67;
	padding-bottom: 22px;
	margin-top: -14px;
	padding-right: 72px;
}
.faq_item button span
{
	display: inline-block;
	position: relative;
	width: 6px;
	height: 6px;
	background-color: var(--brand-primary);
	margin-right: 9px;
	transform: rotate(45deg);
	margin-bottom: 3px;
}

/*********************************
18. Contact
*********************************/
.contact
{
	padding-bottom: 200px;
}
/* Modal Styles */
.contact_modal_content {
    background: #ffffff;
    padding: 40px;
    border-radius: 8px;
    max-width: 500px;
    margin: 0 auto;
    position: relative;
}
.contact_modal_content .section_title_container p { display: inline-block; position: relative; font-size: 14px; letter-spacing: 0.2em; padding-bottom: 10px; border-bottom: solid 1px var(--brand-primary); text-transform: uppercase; color: var(--brand-primary); font-weight: 600; }
.contact_modal_content .qr_code_container {
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
}
.lity-content {
    background: transparent;
}
.qr_code_container {
    width: 200px;
    height: 200px;
    background: white;
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    margin-bottom: 20px;
}
.contact_qr {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.qr_code_desc {
    font-size: 16px;
    color: var(--white);
    line-height: 1.6;
}
.text_highlight_primary {
    color: var(--brand-primary);
    font-weight: 600;
}

/*********************************
19. Footer
*********************************/

.footer
{
	display: block;
	position: relative;
	background: #ffffff;
}
.footer_content
{
	max-width: 525px;
	margin-left: auto;
	margin-right: auto;
	padding-bottom: 64px;
	padding-top: 50px;
}
.footer_content h2 { color: var(--black); 
	font-size: 64px;

	color: var(--black);
}
.footer_content p { color: var(--black); opacity: 0.8; 
	margin-top: 9px;

	color: var(--black);
	opacity: 0.8;
}
.footer_content .social_container
{
	margin-top: 23px;
}
.goodbye_msg
{
	font-family: var(--font2);
	font-size: 32px;
	font-weight: 600;
	color: var(--black);
	margin-top: 79px !important;
}
.scroll_top {
	position: absolute;
	right: 8px;
	top: -17px;
	width: 44px;
	height: 44px;
	background-color: var(--brand-primary);
}
.scroll_top a
{
	position: relative;
	width: 100%;
	height: 100%;
	z-index: 100;
}
.scroll_top img
{
	width: 20px;
	height: 12px;
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}
.scroll_top:hover img
{
	opacity: 0.5;
}
.footer_bottom ul
{
	height: 79px;
}
.footer_bottom ul li
{
	font-size: 16px;
	color: rgba(31,31,31,0.67);
}
.footer_bottom ul li span:first-child
{
	position: relative;
}
.footer_bottom ul li span:first-child::after
{
	display: inline-block;
	position: relative;
	font-family: var(--font1);
	font-size: 16px;
	color: rgba(31,31,31,0.67);
	content: '|';
	margin-left: 5px;
}
.footer_bottom ul li span:last-child
{
	margin-left: 4px;
}

/*********************************
20. Loader
*********************************/

.loader-container
{
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: radial-gradient(circle at center, #0a3d31 0%, #031a15 100%);
	z-index: 9999;
	visibility: hidden;
	opacity: 0;
	transition: all 0.8s ease-out;
}
.loader-container.active
{
	visibility: visible;
	opacity: 1;
}

/* Splash animations */
.splash-content {
    text-align: center;
    animation: splashZoom 4s ease-out forwards;
}

.splash-logo {
    max-width: 280px;
    opacity: 0;
    animation: splashFadeIn 1s ease-out 0.2s forwards;
    filter: drop-shadow(0 0 15px rgba(255,255,255,0.2));
}

.splash-loader-bar {
    width: 160px;
    height: 4px;
    background: rgba(255,255,255,0.2);
    margin: 40px auto 0;
    border-radius: 2px;
    position: relative;
    overflow: hidden;
    opacity: 0;
    animation: splashFadeIn 1s ease-out 0.8s forwards;
}

.splash-loader-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0;
    background: #fff;
    animation: splashProgress 3.5s ease-in-out forwards;
}

#splash-skip {
    position: absolute;
    top: 30px;
    right: 30px;
    background: rgba(255,255,255,0.1);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.3);
    padding: 6px 16px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 14px;
    transition: background 0.3s;
    opacity: 0;
    animation: splashFadeIn 1s ease-out 1.2s forwards;
}

#splash-skip:hover {
    background: rgba(255,255,255,0.3);
}

@keyframes splashZoom {
    0% { transform: scale(0.95); }
    100% { transform: scale(1.05); }
}

@keyframes splashFadeIn {
    0% { opacity: 0; transform: translateY(10px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes splashProgress {
    0% { width: 0; }
    100% { width: 100%; }
}

/* Degradation for low-performance/reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .splash-content, .splash-logo, .splash-loader-bar, .splash-loader-bar::after, #splash-skip {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
        width: 100% !important;
    }
}

body.preload-active
{
	overflow: hidden;
}

.work_item:hover { transform: translateY(-5px); }

.rights_item:hover { transform: translateY(-5px); box-shadow: 0 15px 40px rgba(0,0,0,0.06); }

/*********************************
21. New High-End Styles
*********************************/

/* Hero Refinements */
.hero_title {
    font-family: var(--font2);
    font-size: 48px;
    font-weight: 700;
    color: var(--black);
    margin-bottom: 24px;
    line-height: 1.3;
    max-width: 900px;
}

.hero_subtitle {
    font-family: var(--font1);
    font-size: 20px;
    color: var(--textColor);
    opacity: 0.8;
    margin-bottom: 40px;
    max-width: 800px;
}

@media (max-width: 768px) {
    .hero_title {
        font-size: 32px;
    }
    .hero_subtitle {
        font-size: 16px;
    }
}

/* Core Values Grid */
.values_grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 60px;
}

.value_item {
    background: var(--white);
    border: 1px solid rgba(0,0,0,0.05);
    padding: 40px;
    border-radius: 8px;
    transition: all 0.4s ease;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
    text-align: left;
}


/*********************************
21. New High-End Styles
*********************************/

/* Hero Refinements */
.hero_title {
    font-family: var(--font2);
    font-size: 48px;
    font-weight: 700;
    color: var(--black);
    margin-bottom: 24px;
    line-height: 1.3;
    max-width: 900px;
}

.hero_subtitle {
    font-family: var(--font1);
    font-size: 20px;
    color: var(--textColor);
    opacity: 0.8;
    margin-bottom: 40px;
    max-width: 800px;
}

@media (max-width: 768px) {
    .hero_title {
        font-size: 32px;
    }
    .hero_subtitle {
        font-size: 16px;
    }
}

/* Core Values Grid */
.values_grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 60px;
}

.value_item {
    background: var(--white);
    border: 1px solid rgba(0,0,0,0.05);
    padding: 40px;
    border-radius: 8px;
    transition: all 0.4s ease;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
    text-align: left;
}

.value_item:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.08);
    border-color: var(--brand-primary);
}

.value_item h3 {
    font-family: var(--font2);
    font-size: 24px;
    margin-bottom: 16px;
    color: var(--black);
    position: relative;
    display: inline-block;
}

.value_item h3::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 40px;
    height: 2px;
    background-color: var(--brand-primary);
    transition: width 0.3s ease;
}

.value_item:hover h3::after {
    width: 100%;
}

.value_item p {
    font-size: 15px;
    line-height: 1.8;
    color: rgba(0,0,0,0.7);
    margin-top: 15px;
}

@media (max-width: 991px) {
    .values_grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 575px) {
    .values_grid {
        grid-template-columns: 1fr;
    }
    .value_item {
        padding: 30px;
    }
}

/* Footer Refinements */
.footer_content h2 {
    font-size: 32px;
    line-height: 1.4;
    margin-bottom: 20px;
    color: var(--black);
}

.footer_content p {
    font-size: 18px;
    color: var(--brand-primary);
    font-weight: 500;
}

@media (max-width: 768px) {
    .footer_content h2 {
        font-size: 24px;
    }
}

/* Membership Refinements */
.membership_card {
    border: 1px solid rgba(22, 93, 53, 0.3);
    box-shadow: none;
    transition: all 0.3s ease;
}

.membership_card:hover {
    box-shadow: 0 20px 40px rgba(22, 93, 53, 0.1);
    transform: translateY(-5px);
}

/* Override Bootstrap Links to avoid blue */
a {
    color: var(--black);
    text-decoration: none;
}

a:hover {
    color: var(--brand-primary);
}

/* High-end Culture Grid Design */
.culture_grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 60px;
    width: 100%;
}
.culture_card {
    position: relative;
    background: var(--white);
    border: 1px solid rgba(22, 93, 53, 0.1);
    border-radius: 16px;
    padding: 40px;
    overflow: hidden;
    transition: all 0.4s ease;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
    display: flex;
    flex-direction: column;
    z-index: 1;
}
.culture_card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(22, 93, 53, 0.08);
    border-color: var(--brand-primary);
}
.culture_card_bg {
    position: absolute;
    right: -10px;
    bottom: -20px;
    font-size: 140px;
    font-weight: 900;
    color: rgba(22, 93, 53, 0.03);
    z-index: -1;
    transition: all 0.4s ease;
    line-height: 1;
    font-family: 'Syne', sans-serif;
}
.culture_card:hover .culture_card_bg {
    color: rgba(22, 93, 53, 0.06);
    transform: scale(1.05);
}
.culture_icon {
    font-size: 36px;
    color: var(--brand-primary);
    margin-bottom: 24px;
    width: 60px;
    height: 60px;
    background: rgba(22, 93, 53, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    transition: all 0.4s ease;
}
.culture_card:hover .culture_icon {
    background: var(--brand-primary);
    color: var(--white);
}
.culture_title {
    font-size: 24px;
    font-weight: 700;
    color: var(--black);
    margin-bottom: 24px;
    position: relative;
    padding-bottom: 15px;
}
.culture_title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 40px;
    height: 3px;
    background: var(--brand-primary);
    transition: width 0.3s ease;
}
.culture_card:hover .culture_title::after {
    width: 60px;
}
.culture_content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.highlight_text {
    font-size: 18px;
    line-height: 1.8;
    color: #444;
    font-weight: 500;
    margin: 0;
}
.culture_list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.culture_list li {
    font-size: 16px;
    color: #666;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    padding-bottom: 16px;
    border-bottom: 1px dashed rgba(22, 93, 53, 0.1);
}
.culture_list li:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}
.culture_list li .strong_text {
    color: var(--brand-primary);
    font-weight: 600;
    flex: 1;
}
.culture_list li i {
    color: #ccc;
    font-size: 12px;
    margin: 0 15px;
}
.culture_list li .weak_text {
    color: #999;
    flex: 1;
    text-align: right;
}
.value_tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.value_tags span {
    background: rgba(22, 93, 53, 0.05);
    color: var(--brand-primary);
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}
.culture_card:hover .value_tags span {
    background: var(--white);
    border-color: var(--brand-primary);
    box-shadow: 0 4px 10px rgba(22, 93, 53, 0.05);
}

/*********************************
22. Showcase Refactor (活动案例展示区)
*********************************/
.work-showcase {
    background-color: #FAFBFC;
    border-radius: 8px;
    padding: 24px;
    margin: 60px auto;
    max-width: 1400px;
    width: 90%;
    box-shadow: 0 4px 12px rgba(0,0,0,0.02);
}
.showcase-container {
    width: 100%;
}

/* Image Grid */
.image-gallery-grid {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 768px) {
    .image-gallery-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1200px) {
    .image-gallery-grid { grid-template-columns: repeat(4, 1fr); }
}

.gallery-item {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    border: 1px solid #eaeaea;
}

.gallery-img-link {
    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: 4/3;
    overflow: hidden;
}
.gallery-img-link:focus-visible {
    outline: 3px solid var(--brand-primary);
    outline-offset: 2px;
}

.gallery-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.hover-mask {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.gallery-img-link:hover .hover-mask,
.gallery-img-link:focus-visible .hover-mask {
    opacity: 1;
}
.gallery-img-link:hover .gallery-img {
    transform: scale(1.08);
}

.btn-detail {
    color: #fff;
    border: 2px solid #fff;
    padding: 8px 20px;
    border-radius: 24px;
    font-size: 14px;
    font-weight: 600;
    transform: translateY(10px);
    transition: transform 0.3s ease;
}
.gallery-img-link:hover .btn-detail {
    transform: translateY(0);
}

.gallery-info {
    padding: 14px;
}
.gallery-title {
    font-size: 16px;
    margin: 0 0 6px 0;
    color: #333;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.gallery-date {
    font-size: 13px;
    color: #666;
}

/* 3D Video Carousel */
.video-3d-wrapper {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding-bottom: 40px;
}

.video-carousel .owl-stage {
    display: flex;
    align-items: center;
}

.video-carousel .owl-item {
    transition: all 0.5s ease;
    opacity: 0.5;
    transform: scale(0.85);
    z-index: 1;
    position: relative;
}

.video-carousel .owl-item.center {
    opacity: 1;
    transform: scale(1);
    z-index: 10;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.video-card-3d {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    background: #000;
    overflow: hidden;
    border-radius: 4px;
}

.video-card-3d .showcase-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none; /* Prevent default controls clicking */
    background: #000 url('https://www.w3schools.com/html/img_girl.jpg') center center/cover no-repeat;
}

.video-card-3d .play-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.2);
    cursor: pointer;
    transition: background 0.3s ease;
    z-index: 2;
}

.video-card-3d .play-overlay:hover {
    background: rgba(0,0,0,0.4);
}

.video-card-3d.is-playing .play-overlay {
    opacity: 0;
    pointer-events: none;
}

.video-card-3d.is-playing .showcase-video {
    pointer-events: auto;
}

/* Custom Dots for Owl Carousel */
.video-carousel .owl-dots {
    text-align: center;
    margin-top: 30px;
}

.video-carousel .owl-dots .owl-dot {
    display: inline-block;
    zoom: 1;
}

.video-carousel .owl-dots .owl-dot span {
    width: 30px;
    height: 3px;
    margin: 5px 4px;
    background: #e0e0e0;
    display: block;
    transition: background-color 200ms ease;
    border-radius: 0;
}

.video-carousel .owl-dots .owl-dot.active span {
    background: #d32f2f;
}

/* Skeleton & Error */
.skeleton-loading {
    position: relative;
    overflow: hidden;
}
.skeleton-loading > * {
    visibility: hidden;
}
.skeleton-loading::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #e0e0e0 25%, #f5f5f5 50%, #e0e0e0 75%);
    background-size: 200% 100%;
    animation: skeletonShimmer 1.5s infinite;
    z-index: 10;
}
@keyframes skeletonShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.media-error {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #e9ecef;
    color: #6c757d;
    font-size: 14px;
    text-align: center;
    padding: 10px;
    z-index: 5;
}
.media-error i { font-size: 28px; margin-bottom: 8px; color: #adb5bd; }