/* ========================================
   Wave Background Canvas
   ======================================== */
#wave-background {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	pointer-events: none;
}


.watermark {
	font-family: 'Arizonia';
	font-weight: 400;
}

/* ========================================
   SFU Futura Font Family Import
   ======================================== */

@font-face {
	font-family: 'SFU Futura';
	src: url('../font-futura/SFUFuturaRegular.TTF') format('truetype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'SFU Futura';
	src: url('../font-futura/SFUFuturaBook.TTF') format('truetype');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'SFU Futura';
	src: url('../font-futura/SFUFuturaLight.TTF') format('truetype');
	font-weight: 200;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'SFU Futura';
	src: url('../font-futura/SFUFuturaBold.TTF') format('truetype');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'SFU Futura';
	src: url('../font-futura/SFUFuturaExtraBold.TTF') format('truetype');
	font-weight: 800;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'SFU Futura';
	src: url('../font-futura/SFUFuturaHeavy.TTF') format('truetype');
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'SFU Futura';
	src: url('../font-futura/SFUFuturaObliqueTTF.TTF') format('truetype');
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'SFU Futura';
	src: url('../font-futura/SFUFuturaBookOblique.TTF') format('truetype');
	font-weight: 300;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'SFU Futura';
	src: url('../font-futura/SFUFuturaLightOblique.TTF') format('truetype');
	font-weight: 200;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'SFU Futura';
	src: url('../font-futura/SFUFuturaBoldOblique.TTF') format('truetype');
	font-weight: 700;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'SFU Futura';
	src: url('../font-futura/SFUFuturaExtraBoldOblique.TTF') format('truetype');
	font-weight: 800;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'SFU Futura';
	src: url('../font-futura/SFUFuturaHeavyOblique.TTF') format('truetype');
	font-weight: 900;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'Argue';
	src: url('../font-argue/Argue-Regular.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

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


body,
html {
	font-family: 'SFU Futura', sans-serif;
	font-size: 14px;
	font-optical-sizing: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	color: white;
}

.bold {
	font-weight: bold !important;
}

.fancybox__container {
	z-index: 88888;
}

input:focus {
	outline: none;
	box-shadow: none;
}

.t-center {
	text-align: center;
}

.lb-dataContainer {
	position: fixed;
	top: 0;
	right: 0;
	background: #5c5c5c;
	width: 72px !important;
	height: 56px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 !important;
	border-radius: 0 !important;
}

.lb-dataContainer .lb-details {
	display: none;
}

.lb-dataContainer .lb-data {
	padding: 0;
}

.lb-dataContainer .lb-close {
	background-image: url("../images/button-slide-close.svg") !important;
	background-size: 30px !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
	opacity: 1.0 !important;
	/* width: 30px !important; height: 30px !important; */
}

.lb-nav a.lb-prev {
	width: 60px;
	height: 60px;
	background: white;
	opacity: 1;
	left: 80px;
	position: fixed;
	top: 50%;
	transform: translateY(-50%);
	overflow: hidden;
	border-radius: 100%;
	background: rgba(92, 92, 92, 1);
	background-image: url('../images/arrow-left.svg');
	background-position: center;
	background-repeat: no-repeat;
}

.lb-nav a.lb-next {
	width: 60px;
	height: 60px;
	background: white;
	opacity: 1;
	right: 80px;
	position: fixed;
	top: 50%;
	transform: translateY(-50%);
	overflow: hidden;
	border-radius: 100%;
	background: rgba(92, 92, 92, 1);
	background-image: url('../images/arrow-right.svg');
	background-position: center;
	background-repeat: no-repeat;
}

#lightbox {
	display: flex;
	align-items: center;
	justify-content: center;
}

.lb-nav {
	background: transparent;
	border: none;
}

.lightbox .lb-image {
	border: none;
}

.lb-outerContainer {
	border: none;
	background: transparent;
	position: fixed;
	top: 50%;
	transform: translateY(-50%);
	max-width: 1920px !important;
	width: 100% !important;
	height: 100% !important;
	margin: 0 auto;
	padding: 80px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.lb-container {
	border: none;
	position: absolute;

}

.lb-loader {
	top: 50%;
	transform: translateY(-50%);
}

img {
	max-width: 100%;
	width: 100%;
	height: auto;
}

ul {
	margin: 0;
	padding: 0;
}

li {
	list-style: none;
}

a {
	text-decoration: none;
	color: #333;
	transition: all 0.2s linear;
}

.section-header {
	width: 100%;
	position: absolute;
	top: 50px;
	z-index: 8;
	display: flex;
	align-items: center;
	justify-content: center;

	display: none;
}

.section-header .img-logo {
	width: 170px;
	opacity: 0;
	transform: translateY(-50px) scale(0.8) rotate(-5deg);
	transition: all 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.section-bottom {
	width: 100%;
	position: absolute;
	bottom: 0;
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	justify-content: space-between;
	z-index: 8888;
}

/*
  SECTION
*/

#section-intro {
	width: 100%;
	height: 100vh;
	background-image:
		url('../images/section-intro-pattern.svg'),
		radial-gradient(50% 50% at 50% 50%, #DD1B35 0.01%, #941324 42.31%, #7B101E 68.27%, #630D18 100%);

	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}


.brand-logo {
	display: flex;
	flex-flow: column nowrap;
	align-items: center;
	justify-content: center;
}

.brand-logo-image img {
	max-width: 440px;
	width: 100%;
}

.brand-logo-desc {
	margin-top: 16px;
}

.brand-logo-desc img {
	max-width: 480px;
	width: 100%;
}

.brand-info {
	display: flex;
	flex-flow: column nowrap;
	align-items: center;
	justify-content: center;
	margin-top: 32px;
}

.brand-info .tt1,
.brand-info .tt2 {
	font-family: 'Argue';
	font-weight: 400;
	font-size: 48px;
	line-height: 120%;
	text-align: center;
	text-transform: uppercase;
}

.brand-info .tt1 {
	color: white;
}

.brand-info .tt2 {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135.34deg, #FFD892 15.43%, #FBE67B 38.47%, #FCFBE7 53.36%, #F7D14E 69.97%, #D4A041 86.26%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

.brand-info .tt3 {
	font-family: 'Argue';
	font-weight: 400;
	font-size: 35px;
	line-height: 120%;
	text-align: center;
	text-transform: uppercase;
	margin-left: 12px;
	background: linear-gradient(135.34deg, #FFD892 15.43%, #FBE67B 38.47%, #FCFBE7 53.36%, #F7D14E 69.97%, #D4A041 86.26%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;

}

.brand-info img {
	max-width: 730px;
	width: 100%;
}

.section-intro-content {
	display: flex;
	flex-flow: column nowrap;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 5rem 0;
	width: 100%;
	height: 100vh;
	overflow: hidden;
	gap: 15vh;
	z-index: 2;
}

#section-intro .button-scroll-down {
	left: 40px;
	right: initial;
}

button {
	outline: none;
	border: none;
	background: transparent;
}

.button-form {
	display: inline-flex;
	flex-flow: row nowrap;
	align-items: center;
	justify-content: center;
	min-width: 116px;
	height: 36px;
	padding: 0 10px;
	border: 1px solid white;
	border-radius: 25px;
	/* animation: buttonFormFloat 3s ease-in-out infinite; */
	transition: all 1.2s cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
	overflow: hidden;
	cursor: pointer;
	white-space: nowrap;
}

.button-form:hover {
	/* transform: translateY(-2px) scale(1.05); */
	/* box-shadow: 0 6px 20px rgba(255, 255, 255, 0.3); */
	/* border-color: rgba(99, 13, 24, 1); */
	/* background: rgba(99, 13, 24, 1); */
	/* transition: all 1.2s cubic-bezier(0.4, 0, 0.2, 1) !important; */
}

.button-form:before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: rgba(99, 13, 24, 1);
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
	transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
	/* opacity: 0; */
	/* z-index: -1; */
}

.button-form:hover::before {
	left: 100%;
	opacity: 1;
}

.button-form:active {
	transform: translateY(0px) scale(1.02);
	transition: all 0.1s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Button form states - controlled by JavaScript */
.button-form.button-hidden {
	opacity: 0;
	transform: translateY(-20px) scale(0.8);
	pointer-events: none;
	animation-play-state: paused;
}

.button-form.button-visible {
	opacity: 1;
	transform: translateY(0) scale(1);
	pointer-events: auto;
	animation-play-state: running;
}

.button-form span {
	font-weight: 700;
	font-style: Bold;
	font-size: 14px;
	line-height: 140%;
	color: rgba(252, 252, 252, 1);
	margin-right: 8px;
}

.button-language {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	justify-content: center;
	margin-left: 24px;
	width: 56px;
	height: 38px;
	border: 1px solid #e3e3e394;
	border-radius: 25px;
	cursor: pointer;
}

.button-language span {
	font-weight: 400;
	font-size: 12px;
	line-height: 140%;
	color: rgba(252, 252, 252, 1);
	font-family: 'SFU Futura', sans-serif;
}

.button-360 {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	justify-content: center;
	margin-left: 24px;
	cursor: pointer;
}

.button-360 span {
	font-weight: 400;
	font-size: 14px;
	line-height: 140%;
	margin-left: 5px;
	color: rgba(252, 252, 252, 1);

}

.button-scroll-down {
	position: absolute;
	width: 33px;
	bottom: 32px;
	right: 32px;
	cursor: pointer;
	background: transparent;
	border: none;
	outline: none;
	z-index: 2;
	animation: scrollDownBounce 2s ease-in-out infinite;
	transition: all 0.2s ease;
}


header .button-form {
	margin-left: auto;
}

header .logo {
	margin-left: auto;
	width: 190px;
	/* animation: buttonFormFloat 3s ease-in-out infinite; */
	transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

#pp-nav {
	display: none !important;
}


#ocean-background {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
}

header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
	display: flex;
	flex-flow: row nowrap;
	align-items: start;
	z-index: 88;
	padding: 48px;
}

#myMenu {
	display: flex;
	flex-flow: column nowrap;
	align-items: center;
	justify-content: space-between;
	top: 50%;
	left: 0;
	position: fixed;
	width: 200px;
	height: 330px;
	transform: translateY(-50%);
	z-index: 888;
	padding: 30px 0px;
	animation: menuFloat 6s ease-in-out infinite 1.5s;
	opacity: 0;
	transform: translateY(-50%) translateX(-100px);
	pointer-events: none;
}


#myMenu::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 60vw;
	height: 80vh;
	background
}

#myMenu:after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	background-image: url('../images/background-ellipse-menu.svg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	width: 75px;
	height: 330px;
}

#myMenu li {
	width: 100%;
	opacity: 0;
	transform: translateX(-50px);
	transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	position: relative;
	z-index: 1;
}

#myMenu li a {
	display: flex;
	flex-flow: column nowrap;
	align-items: start;
	justify-content: start;
	position: relative;
	font-weight: 400;
	font-size: 16px;
	line-height: 140%;
	color: rgba(252, 252, 252, 1);
	padding-left: 32px;
	opacity: 0.6;
	text-transform: uppercase;
	transition: opacity 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	transform: translateX(0);
}

#myMenu li a:hover {
	text-shadow: 0 0 20px rgba(255, 255, 255, 0.6);
}

#myMenu li.active a {
	font-weight: 700;
}

#myMenu li.active a,
#myMenu li a:hover {
	opacity: 1.0;
	text-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
}

#myMenu li.menu-1 {
	padding-left: 22px;
}

#myMenu li.menu-2 {
	padding-left: 44px;
}

#myMenu li.menu-3 {
	padding-left: 56px;
}

#myMenu li.menu-4 {
	padding-left: 60px;
}

#myMenu li.menu-5 {
	padding-left: 55px;
}

#myMenu li.menu-6 {
	padding-left: 44px;
}

#myMenu li.menu-7 {
	padding-left: 22px;
}

#myMenu li a:after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 24px;
	height: 24px;
	background-image: url('../images/background-menu-icon.svg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	transform: scale(1) rotate(0deg);
}

#myMenu li a:hover:after {
	opacity: 0.3;
	transition: opacity 0.4s ease;
}

#myMenu li a:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 24px;
	height: 24px;
	background-image: url('../images/background-menu-icon-active.svg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	opacity: 0;
	transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	transform: scale(0.8) rotate(-10deg);
}

#myMenu li.active a:before {
	opacity: 1;
	transform: scale(1) rotate(0deg);
	animation: activeIconPulse 2s ease-in-out infinite;
}

#myMenu li.active a:after {
	opacity: 0;
	transition: opacity 0.4s ease;
}



/* Menu Floating Animation - Only when visible */
#myMenu.menu-visible {
	animation: menuFloat 6s ease-in-out infinite;
}



/* Menu Visibility States */
#myMenu.menu-hidden {
	opacity: 0;
	transform: translateY(-50%) translateX(-100px);
	pointer-events: none;
	transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

#myMenu.menu-visible {
	opacity: 1;
	transform: translateY(-50%) translateX(0);
	pointer-events: auto;
	transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Menu Item Visibility States */
#myMenu li.menu-item-hidden {
	opacity: 0;
	transform: translateX(-50px);
	transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

#myMenu li.menu-item-visible {
	opacity: 1;
	transform: translateX(0);
	transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Circular Menu Content Brand Logo Description Animation */


.circular-menu-content .brand-logo-image {
	/* margin-bottom: 20px; */
	/* animation: circularMenuLogoFloat 5s ease-in-out infinite; */
}

.circular-menu-content .brand-logo-desc {
	/* animation: circularMenuLogoFloat 4s ease-in-out infinite; */
}

.circular-menu-items {
	display: flex;
	flex-flow: column nowrap;
	align-items: flex-end;
	justify-content: center;
	max-width: 250px;
	width: 100%;
	gap: 32px;
}

.circular-menu-items a {
	position: relative;
	color: rgba(252, 252, 252, 1);
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	justify-content: start;
	font-weight: 700;
	font-size: 24px;
	line-height: 140%;
	height: 40px;
	/* transition: color 0.2s ease-in-out; */
}

.circular-menu-items a:before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: 40px;
	height: 40px;
	background-image: url('../images/menu-icon-mobile-active.svg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	z-index: 1;
	opacity: 0;
	transform: scale(0.8);
	transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);

}

.circular-menu-items a.active {
	margin-left: 16px;
	padding-right: 56px;
}

.circular-menu-items a.active:before {
	opacity: 1;
	transform: scale(1);
	animation: activeIconPulse 2s ease-in-out infinite;
}


/* Enhanced hover effects for menu items */
.circular-menu-items a:hover {
	color: #FFD892;
}

/* Smooth reverse animation for text when leaving hover */
.circular-menu-items a {
	transform: translateX(0) scale(1);
	color: rgba(252, 252, 252, 1);
	transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}



/* Active state enhancements */
.circular-menu-items a.active {
	margin-left: 16px;
	/* transform: translateX(8px); */
	/* transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); */
	font-weight: 700;
	animation: textColorFlow 4s ease-in-out infinite;
}

/* Circular Menu Items Animation */
.circular-menu-items {
	/* opacity: 0; */
	/* transform: translateY(50px) scale(0.8); */
	/* transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275); */
}

.circular-menu-overlay.active .circular-menu-items {
	/* opacity: 1;
	transform: translateY(0) scale(1); */
	/* animation: menuItemsEntrance 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; */
}

/* Individual menu item animations */
/* .circular-menu-items a {
	opacity: 0;
	transform: translateX(-30px) rotate(-5deg);
	transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
} */

.circular-menu-overlay.active .circular-menu-items a {
	/* opacity: 1;
	transform: translateX(0) rotate(0deg); */
}

/* Staggered animation delays for menu items */
/* .circular-menu-overlay.active .circular-menu-items a:nth-child(1) {
	transition-delay: 0.3s;
}

.circular-menu-overlay.active .circular-menu-items a:nth-child(2) {
	transition-delay: 0.4s;
}

.circular-menu-overlay.active .circular-menu-items a:nth-child(3) {
	transition-delay: 0.5s;
}

.circular-menu-overlay.active .circular-menu-items a:nth-child(4) {
	transition-delay: 0.6s;
}

.circular-menu-overlay.active .circular-menu-items a:nth-child(5) {
	transition-delay: 0.7s;
}

.circular-menu-overlay.active .circular-menu-items a:nth-child(6) {
	transition-delay: 0.9s;
}

.circular-menu-overlay.active .circular-menu-items a:nth-child(7) {
	transition-delay: 1.2s;
}

.circular-menu-overlay.active .circular-menu-items a:nth-child(8) {
	transition-delay: 1.5s;
} */


/* Menu Button Styles - Merged and Cleaned */
.menu-button {
	display: flex;
	flex-flow: column nowrap;
	align-items: center;
	justify-content: center;
	position: relative;
	z-index: 1000;
	cursor: pointer;
	transition: all 0.3s ease;
}

.menu-button .text {
	margin-top: 5px;
	font-weight: 400;
	font-size: 14px;
	line-height: 140%;
	text-align: center;
	color: #fff;
	font-family: 'SFU Futura', sans-serif;
}

.menu-button.menu-active {
	transform: scale(0.9);
	transition: transform 0.3s ease;
}

.menu-canvas-container {
	width: 52px;
	height: 52px;
}

/* Dynamic Background Effect for .closing-page - Top Left to Bottom Right Flow */
.closing-page {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background:
		linear-gradient(135deg,
			rgba(99, 13, 24, 0.8) 0%,
			rgba(148, 88, 96, 0.9) 30%,
			rgba(188, 151, 156, 1) 60%,
			rgba(255, 255, 255, 0.6) 100%);
	z-index: 888;
	animation: closingPageFlow 8s ease-in-out infinite;
	pointer-events: none;
}


/* Responsive adjustments for .closing-page */
@media (max-width: 768px) {
	.closing-page {
		animation-duration: 6s;
	}
}

@media (max-width: 480px) {
	.closing-page {
		animation-duration: 5s;
	}
}

/* Circular Menu Reveal Animation */
.circular-menu-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: rgba(99, 13, 24, 1);
	z-index: 999;
	opacity: 0;
	visibility: hidden;
	transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
	clip-path: circle(0% at 50% 50%);
	pointer-events: none;
}

.circular-menu-overlay.active {
	opacity: 1;
	visibility: visible;
	clip-path: circle(100% at 50% 50%);
	pointer-events: all;
}

.circular-menu-overlay .wrapper {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	justify-content: space-between;
	width: 80%;
	height: 100%;
	margin: 0 auto;
}

.circular-menu-overlay.active .brand-logo-image,
.circular-menu-overlay.active .brand-logo-desc {
	/* opacity: 1; */
}

.circular-menu-overlay .circular-menu-content {
	max-width: 500px;
	width: 100%;
	display: flex;
	flex-flow: column nowrap;
	align-items: center;
	justify-content: center;

}

/* Close button */
.circular-menu-close {
	position: absolute;
	top: 30px;
	right: 30px;
	width: 50px;
	height: 50px;
	background: rgba(255, 255, 255, 0.1);
	border: 2px solid rgba(255, 255, 255, 0.3);
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
	opacity: 0;
	transform: scale(0) rotate(-180deg);
}

.circular-menu-overlay.active .circular-menu-close {
	opacity: 1;
	transform: scale(1) rotate(0deg);
	transition-delay: 0.6s;
}

.circular-menu-close:hover {
	background: rgba(255, 255, 255, 0.2);
	border-color: rgba(255, 255, 255, 0.6);
	transform: scale(1.1);
}

.circular-menu-close::before,
.circular-menu-close::after {
	content: '';
	position: absolute;
	width: 20px;
	height: 2px;
	background: white;
	transition: all 0.3s ease;
}

.circular-menu-close::before {
	transform: rotate(45deg);
}

.circular-menu-close::after {
	transform: rotate(-45deg);
}

.circular-menu-close:hover::before {
	transform: rotate(225deg);
}

.circular-menu-close:hover::after {
	transform: rotate(135deg);
}

.fluid-animation {
	mask-image: url('../images/logo-small.svg');
	mask-position: center center;
	mask-repeat: no-repeat;
	mask-size: contain;
	filter: grayscale(.9) brightness(120%);
	mix-blend-mode: multiply;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}

/* Mobile adjustments: center menu and close button */
@media (max-width: 768px) {
	.circular-menu-overlay .wrapper {
		justify-content: center;
		gap: 24px;
	}

	.circular-menu-content {
		align-items: center;
		justify-content: center;
	}

	.circular-menu-items {
		align-items: center;
		max-width: 100%;
	}

	.circular-menu-items a {
		justify-content: center;
	}

	/* Move close button to top-center on mobile */
	.circular-menu-close {
		top: 20px;
		left: 50%;
		right: initial;
		transform: translateX(-50%) scale(0) rotate(-180deg);
	}

	.circular-menu-overlay.active .circular-menu-close {
		transform: translateX(-50%) scale(1) rotate(0deg);
	}
}

/* 
 * Responsive styles have been moved to responsive.css
 * This file contains all responsive media queries for:
 * - Circular menu
 * - Main menu (#myMenu)
 * - Header elements
 * - Section content
 * - Touch devices
 * - High DPI displays
 * - Print styles
 */


#trang-chu,
#gioi-thieu,
#video,
#vi-tri,
#tien-ich,
#lien-he,
#tin-tuc {
	width: 100%;
	height: 100vh;
	overflow: hidden;
}

#trang-chu .wrapper,
#gioi-thieu .wrapper,
#video .wrapper,
#vi-tri .wrapper,
#tien-ich .wrapper,
#lien-he .wrapper,
#tin-tuc .wrapper {
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 100vh;
}



#trang-chu {
	background-image: url('../images/bg-trang-chu.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

#trang-chu .overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 230px;
	background: linear-gradient(0deg, rgba(99, 13, 24, 0) 0.01%, #630D18 96.13%);
	opacity: 0;
	transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

#trang-chu.active .overlay {
	opacity: 1;
	animation: overlayFadeBackground 1.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

#trang-chu:not(.active) .overlay {
	opacity: 0;
	animation: overlayFadeBackground 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

#trang-chu .wrapper {
	height: 100vh;
	width: 100%;
	display: flex;
	flex-flow: column nowrap;
	align-items: center;
	justify-content: space-between;
}


#trang-chu.active .img-logo {
	opacity: 1;
	transform: translateY(0) scale(1) rotate(0deg);
	animation: logoTopEntrance 1.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

#trang-chu:not(.active) .img-logo {
	opacity: 0;
	transform: translateY(-50px) scale(0.8) rotate(-5deg);
	animation: logoTopExit 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

#trang-chu .section-bottom .button-scroll-down {
	left: 32px;
	right: initial;
}

/* SECTION 2 */
#gioi-thieu {
	background-image: url('../images/bg-gioi-thieu.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

#gioi-thieu .overlay {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 50%;
	background: linear-gradient(180deg, rgba(99, 13, 24, 0) 0.01%, #630D18 100%);
	opacity: 0;
	transform: translateY(20px);
	transition: all 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

#gioi-thieu.active .overlay {
	opacity: 1;
	transform: translateY(0);
	animation: overlayFadeIn 1.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

#gioi-thieu:not(.active) .overlay {
	opacity: 0;
	transform: translateY(20px);
	animation: overlayFadeOut 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

#gioi-thieu .wrapper {
	height: 100vh;
	width: 100%;
	display: flex;
	flex-flow: column nowrap;
	align-items: center;
	justify-content: space-between;
}


#gioi-thieu.active .img-logo {
	opacity: 1;
	transform: translateY(0) scale(1) rotate(0deg);
	animation: logoTopEntrance 1.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

#gioi-thieu:not(.active) .img-logo {
	opacity: 0;
	transform: translateY(-50px) scale(0.8) rotate(-5deg);
	animation: logoTopExit 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

#gioi-thieu .contents {
	bottom: 0;
	right: 0;
	position: absolute;
	z-index: 3;
	display: flex;
	flex-flow: row nowrap;
	align-items: end;
	justify-content: end;
	margin-bottom: 10rem;
	opacity: 0;
	transform: translateY(60px) translateX(40px);
	transition: all 1.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Active state animation */
#gioi-thieu.active .contents {
	opacity: 1;
	transform: translateY(0) translateX(0);
}

/* Reverse animation when not active */
#gioi-thieu:not(.active) .contents {
	opacity: 0;
	transform: translateY(60px) translateX(40px);
}

#gioi-thieu .contents::after {
	content: '';
	position: absolute;
	bottom: 65px;
	left: 0;
	width: 100%;
	height: 1px;
	background: white;
}

#gioi-thieu .contents .block-content {
	display: flex;
	flex-flow: column nowrap;
	padding: 0 30px;
	opacity: 0;
	transform: translateY(30px);
	transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
}

#gioi-thieu .contents .block-content.first-block:before {
	width: 6px;
	height: 6px;
	bottom: 62px;
	left: 0;
}

#gioi-thieu .contents .block-content:before {
	content: '';
	position: absolute;
	bottom: 60px;
	left: 40px;
	width: 10px;
	height: 10px;
	background: white;
	transform: rotateZ(45deg);
}

/* Staggered entrance animations for each block */
#gioi-thieu.active .contents .block-content:nth-child(1) {
	opacity: 1;
	transform: translateY(0);
	transition-delay: 0.3s;
}

#gioi-thieu.active .contents .block-content:nth-child(2) {
	opacity: 1;
	transform: translateY(0);
	transition-delay: 0.5s;
}

#gioi-thieu.active .contents .block-content:nth-child(3) {
	opacity: 1;
	transform: translateY(0);
	transition-delay: 0.7s;
}

#gioi-thieu.active .contents .block-content:nth-child(4) {
	opacity: 1;
	transform: translateY(0);
	transition-delay: 0.9s;
}

#gioi-thieu.active .contents .block-content:nth-child(5) {
	opacity: 1;
	transform: translateY(0);
	transition-delay: 1.1s;
}

/* Reverse animations when not active */
#gioi-thieu:not(.active) .contents .block-content {
	opacity: 0;
	transform: translateY(30px);
	transition-delay: 0s;
}

#gioi-thieu .contents .block-content.first-block {
	align-items: center;
	justify-content: center;
}

#gioi-thieu .contents .block-content.first-block .highlight {
	font-family: 'Argue', sans-serif;
	font-weight: 400;
	font-size: 56px;
	line-height: 120%;
	text-align: center;
	text-transform: uppercase;
}

#gioi-thieu .contents .block-content.first-block .detail {
	display: flex;
	flex-flow: row nowrap;
	align-items: start;
	justify-content: start;
	position: relative;
	top: 22px;
}

#gioi-thieu .contents .block-content.first-block .detail .tt1 {
	padding-top: 5px;
}

#gioi-thieu .contents .block-content .tt1 {
	font-weight: 400;
	font-size: 16px;
	line-height: 140%;
	font-family: 'SFU Futura', sans-serif;
	transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

#gioi-thieu .contents .block-content .detail {
	padding-top: 10px;
}

#gioi-thieu .contents .block-content .detail .tt2 {
	font-family: 'SFU Futura', sans-serif;
	font-weight: bold;
	font-size: 48px;
	line-height: 140%;
	text-align: center;
	background: linear-gradient(135.34deg, #FFD892 15.43%, #FBE67B 38.47%, #FCFBE7 53.36%, #F7D14E 69.97%, #FFDEA1 86.26%), linear-gradient(210.08deg, #FDE7BB 9.32%, #9E6D38 26.23%, #E9B86E 51.87%, #9D6933 65.14%, #FEE9BF 79.51%, #683E23 93.89%), #FCFCFC;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

#gioi-thieu .contents .block-content .detail .tt3-unit {
	font-size: 20px;
}


#gioi-thieu .bottom-info {
	width: 100%;
	position: relative;
	z-index: 3;
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	align-items: center;
	padding: 0 4rem;
	margin-bottom: 4rem;
}

#gioi-thieu .bottom-info .button-scroll-down {
	cursor: pointer;
	position: initial !important;
}


#gioi-thieu .section-bottom .button-scroll-down {
	left: 32px;
	right: initial;
}


/* SECTION 3 */
#vi-tri {
	background: rgba(210, 185, 132, 1);
}

#vi-tri .overlay {
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url('../images/vi-tri-bg2.svg');
	background-repeat: no-repeat;
	background-position: center right;
	background-size: contain;
}

#vi-tri .wrapper {
	height: 100vh;
	width: 100%;
	display: flex;
	flex-flow: column nowrap;
	align-items: center;
	justify-content: center;
}


#video.active .img-logo {
	opacity: 1;
	transform: translateY(0) scale(1) rotate(0deg);
	animation: logoTopEntrance 1.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

#vi-tri.active .img-logo {
	opacity: 1;
	transform: translateY(0) scale(1) rotate(0deg);
	animation: logoTopEntrance 1.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

#vi-tri:not(.active) .img-logo {
	opacity: 0;
	transform: translateY(-50px) scale(0.8) rotate(-5deg);
	animation: logoTopExit 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

#vi-tri .section-bottom {
	width: 100%;
	position: absolute;
	bottom: 0;
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	align-items: center;
	padding: 0 4rem;
	margin-bottom: 4rem;
}

#vi-tri .section-bottom .bottom-left {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	justify-content: space-between;
}

#vi-tri .section-bottom .map-button {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin-left: 42px;
}

#vi-tri .section-bottom .map-button button {
	width: 32px;
	height: 32px;
	border-radius: 100%;
	border: 1px solid white;
	cursor: pointer;

}


#vi-tri .watermark {
	position: absolute;
	bottom: 35px;
	right: 45px;
	z-index: 10;
}

#vi-tri .section-bottom .button-scroll-down {
	left: 32px;
	right: initial;
	bottom: 0;
}

/* Vi Tri Map  */
#vi-tri .section-map-container,
#vi-tri .section-map-container2 {
	position: relative;
}

#vi-tri .section-map-container {
	opacity: 0;
	transform: translateY(20px);
	transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

#vi-tri .section-map-container.active {
	opacity: 1;
	transform: translateY(0);
	/* animation: mapContainerFadeIn 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards; */
}

#vi-tri .section-map-container svg {
	width: 100%;
	height: 100%;
}

#vi-tri .layer-point {
	position: absolute;
	z-index: 2;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

#vi-tri .layer-logo {
	position: absolute;
	z-index: 3;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

#vi-tri .layer-base {
	width: 100%;
	height: 100%;
}

#vi-tri .section-map-container2 {
	display: none;
	opacity: 0;
	transform: translateY(20px);
	transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

#vi-tri .section-map-container2.active {
	display: block;
	opacity: 1;
	transform: translateY(0);
	animation: mapContainerFadeIn 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}


/* SECTION 4 */
#lien-he {
	background: radial-gradient(50% 50% at 50% 50%, #DD1B35 0.01%, #941324 42.31%, #7B101E 68.27%, #630D18 100%);
}

#lien-he:after {
	position: absolute;
	content: '';
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url('../images/bg4.svg');
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	pointer-events: none;
}



#lien-he .label {
	font-weight: 400;
	font-size: 12px;
	line-height: 140%;
	text-transform: uppercase;
	color: rgba(252, 252, 252, 1);
	opacity: 0;
	transform: translateX(30px) scale(0.8);
	transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

#lien-he.active .label {
	opacity: 1;
	transform: translateX(0) scale(1);
	animation: labelEntrance 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

#lien-he:not(.active) .label {
	opacity: 0;
	transform: translateX(30px) scale(0.8);
	animation: labelExit 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

#lien-he.active .img-logo {
	opacity: 1;
	transform: translateY(0) scale(1) rotate(0deg);
	animation: logoTopEntrance 1.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

#lien-he:not(.active) .img-logo {
	opacity: 0;
	transform: translateY(-50px) scale(0.8) rotate(-5deg);
	animation: logoTopExit 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

#lien-he .logo-clients {
	display: flex;
	flex-flow: column nowrap;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	opacity: 0;
	margin: 0 auto;
	transform: translateY(30px) scale(0.9);
	transition: all 1.2s cubic-bezier(0.4, 0, 0.2, 1);
	min-height: 530px;
}

#lien-he .section-contents {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0 auto;
	padding-bottom: 180px;
}

#lien-he.active .logo-clients {
	position: relative;
	z-index: 8;
	opacity: 1;
	transform: translateY(0) scale(1);
	/* animation: logoClientsEntrance 1.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; */
}

#lien-he:not(.active) .logo-clients {
	opacity: 0;
	transform: translateY(30px) scale(0.9);
	animation: logoClientsExit 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

#lien-he:not(.active) .logo-clients .logo-row {
	opacity: 0;
	transform: translateX(-50px);
	animation: logoRowExit 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

#lien-he:not(.active) .logo-clients .logo-col {
	opacity: 0;
	transform: translateY(20px) scale(0.8);
	animation: logoColExit 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

#lien-he .logo-clients .logo-row {
	display: flex;
	flex-flow: row nowrap;
	align-items: start;
	justify-content: center;
	gap: 80px;
	opacity: 0;
	transform: translateX(-50px);
	transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

#lien-he.active .logo-clients .logo-row {
	opacity: 1;
	transform: translateX(0);
	/* animation: logoRowEntrance 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; */
}

/* Staggered animation for logo rows */
#lien-he.active .logo-clients .logo-row:nth-child(1) {
	animation-delay: 0.3s;
}

#lien-he.active .logo-clients .logo-row:nth-child(2) {
	animation-delay: 0.6s;
}

#lien-he .logo-clients .logo-col {
	display: flex;
	flex-flow: column nowrap;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transform: translateY(20px) scale(0.8);
	transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

#lien-he.active .logo-clients .logo-col {
	opacity: 1;
	transform: translateY(0) scale(1);
	/* animation: logoColEntrance 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; */
}

/* Staggered animation for logo columns */
#lien-he.active .logo-clients .logo-row:nth-child(1) .logo-col:nth-child(1) {
	animation-delay: 0.4s;
}

#lien-he.active .logo-clients .logo-row:nth-child(1) .logo-col:nth-child(2) {
	animation-delay: 0.5s;
}

#lien-he.active .logo-clients .logo-row:nth-child(1) .logo-col:nth-child(3) {
	animation-delay: 0.6s;
}

#lien-he.active .logo-clients .logo-row:nth-child(1) .logo-col:nth-child(4) {
	animation-delay: 0.7s;
}

#lien-he.active .logo-clients .logo-row:nth-child(2) .logo-col:nth-child(1) {
	animation-delay: 0.8s;
}

#lien-he.active .logo-clients .logo-row:nth-child(2) .logo-col:nth-child(2) {
	animation-delay: 0.9s;
}

#lien-he.active .logo-clients .logo-row:nth-child(2) .logo-col:nth-child(3) {
	animation-delay: 1.0s;
}

#lien-he .logo-clients .logo-col .text {
	margin-bottom: 16px;
	font-weight: 400;
	font-size: 14px;
	line-height: 140%;
	color: rgba(252, 252, 252, 1);
}

/* Hover effects for logo columns */
#lien-he .logo-clients .logo-col:hover {
	transform: translateY(-8px) scale(1.05);
	transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

#lien-he .logo-clients .logo-col:hover .text {
	color: rgba(255, 255, 255, 1);
	text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

#lien-he .logo-clients .logo-col:hover img {
	filter: brightness(1.2) drop-shadow(0 8px 16px rgba(255, 255, 255, 0.3));
	transform: scale(1.1);
	transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Text Animation Styles */
.text-animation {
	overflow: hidden;
}

.text-animation .animated-word {
	display: inline-block;
	white-space: nowrap;
	will-change: transform, opacity;
}

/* Enhanced animation for even words (up to down) */
.text-animation .animated-word:nth-child(even) {
	transform: translateY(-30px);
	opacity: 0;
	transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Enhanced animation for odd words (down to up) */
.text-animation .animated-word:nth-child(odd) {
	transform: translateY(30px);
	opacity: 0;
	transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}



/* Active state animations */
#lien-he.active .text-animation .animated-word {
	opacity: 1;
	transform: translateY(0);
}

/* Hover effect for individual words */
.text-animation .animated-word:hover {
	transform: translateY(-5px) scale(1.05);
	transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}


#lien-he .logo-clients .tumys-homes-logo {
	width: 230px;
}

#lien-he .logo-clients .dkrs-logo {
	width: 200px;
}

#lien-he .logo-clients .sg-holdings-logo {
	width: 110px;
}

#lien-he .logo-clients .phuoc-thanh-logo {
	width: 95px;
}

#lien-he .logo-clients .coninco-logo {
	width: 70px;
}

#lien-he .logo-clients .mb-logo {
	width: 106px;
}

#lien-he .logo-clients .cbre-logo {
	width: 136px;
}

#lien-he .section-bottom {
	padding: 0 45px;
	bottom: 50px;
	align-items: end;
}

#lien-he .section-bottom .content-left,
#lien-he .section-bottom .content-right {
	width: 250px;
}

#lien-he .section-bottom .content-right {
	justify-items: end;
}

#lien-he .section-bottom .content-right .button-form {
	position: relative;

}

#lien-he .section-bottom .content-center {
	flex: 1;
	text-align: center;
	max-width: 650px;
	margin: 0 auto;
}

#lien-he .section-bottom .content-center .tt1 {
	font-family: 'SFU Futura';
	font-weight: 700;
	font-size: 16px;
	line-height: 150%;
	text-align: center;
	text-transform: uppercase;
	color: rgba(252, 252, 252, 1);
}

#lien-he .section-bottom .content-center .tt2 {
	font-family: 'SFU Futura';
	font-weight: 400;
	font-size: 12px;
	line-height: 150%;
	text-align: center;
	/* text-transform: uppercase; */
	color: rgba(252, 252, 252, 1);
	display: flex;
	justify-content: center;
	gap: 6px;
	align-items: center;
}

#lien-he .section-bottom .content-center .tt3 {
	margin-top: 20px;
	font-family: 'SFU Futura';
	font-weight: 400;
	font-style: Oblique;
	font-size: 10px;
	line-height: 140%;
	text-align: center;
	color: rgba(191, 191, 191, 1);
}

#lien-he .section-bottom .content-left {
	display: flex;
	flex-flow: column nowrap;
	gap: 16px;
}

#lien-he .section-bottom .content-left .tt1 {
	font-family: 'SFU Futura';
	font-weight: 400;
	font-style: Regular;
	font-size: 10px;
	line-height: 140%;
	text-transform: uppercase;
}

#lien-he .section-bottom .content-left .tt1 .highlight {
	font-weight: bold;
}

#lien-he .section-bottom .social-icon {
	display: flex;
	flex-flow: row nowrap;
	gap: 14px;
}

#lien-he .section-bottom .social-icon a {
	display: flex;
	flex-flow: column nowrap;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 100%;
	border: 1px solid white;
}

#lien-he .section-bottom .social-icon a:hover {
	background: rgba(252, 252, 252, 0.2);
	border: 1px solid rgba(252, 252, 252, 0.3);
}

/* Smooth animations for #lien-he .section-bottom content sections */
#lien-he .section-bottom .content-left,
#lien-he .section-bottom .content-center,
#lien-he .section-bottom .content-right {
	transition: all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	opacity: 0;
	transform: translateY(30px);
}

/* Animation when #lien-he has active class */
#lien-he.active .section-bottom .content-left {
	opacity: 1;
	transform: translateY(0);
	animation: contentLeftSlideIn 1.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

#lien-he.active .section-bottom .content-center {
	opacity: 1;
	transform: translateY(0);
	animation: contentCenterSlideIn 2.1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

#lien-he.active .section-bottom .content-right {
	opacity: 1;
	transform: translateY(0);
	animation: contentRightSlideIn 2.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Animation when #lien-he doesn't have active class */
#lien-he:not(.active) .section-bottom .content-left,
#lien-he:not(.active) .section-bottom .content-center,
#lien-he:not(.active) .section-bottom .content-right {
	opacity: 0;
	transform: translateY(30px);
	animation: contentSlideOut 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}


#tin-tuc {
	background: radial-gradient(50% 50% at 50% 50%, #DD1B35 0.01%, #941324 42.31%, #7B101E 68.27%, #630D18 100%);
}


#tin-tuc:after {
	width: 100%;
	height: 100%;
	position: absolute;
	content: '';
	top: 0;
	left: 0;
	background-image: url('../images/tin-tuc-bg-canvas.svg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	z-index: -1;
}

#tin-tuc .wrapper {
	height: 100vh;
	width: 100%;
	display: flex;
	flex-flow: column nowrap;
	align-items: center;
	justify-content: start;
}


#tin-tuc.active .img-logo {
	opacity: 1;
	transform: translateY(0) scale(1) rotate(0deg);
	animation: logoTopEntrance 1.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

#tin-tuc:not(.active) .img-logo {
	opacity: 0;
	transform: translateY(-50px) scale(0.8) rotate(-5deg);
	animation: logoTopExit 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}


#tin-tuc .block-news {
	display: flex;
	flex-flow: row nowrap;
	align-items: start;
	justify-content: start;
	gap: 24px;
	margin-top: 62px;
}

#tin-tuc .entry-new-image {
	border-radius: 16px;
	overflow: hidden;
	position: relative;
}

/* Hover effects for entry-new-image links */
#tin-tuc .entry-new-image a {
	display: block;
	position: relative;
	overflow: hidden;
	border-radius: 16px;
	/* transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); */
}

#tin-tuc .entry-new-image a:hover {
	transform: scale(1.05);
	/* box-shadow: 0 8px 25px rgba(255, 255, 255, 0.2); */
}

#tin-tuc .entry-new-image a:hover img {
	/* transform: scale(1.1); */
	/* filter: brightness(1.1) contrast(1.05); */
}

#tin-tuc .entry-new-image a::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
	opacity: 0;
	/* transition: opacity 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); */
	z-index: 1;
	border-radius: 16px;
}

#tin-tuc .entry-new-image a:hover::before {
	opacity: 1;
}

#tin-tuc .entry-new-image img {
	width: 100%;
	height: auto;
	/* transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); */
	border-radius: 16px;
}

#tin-tuc .entry-new-content {
	display: flex;
	flex-flow: column nowrap;
	gap: 16px;
	margin-top: 20px;
}

#tin-tuc .block-news .date {
	color: rgba(191, 191, 191, 1);
	font-family: 'SFU Futura';
	font-weight: 400;
	font-size: 12px;
	line-height: 140%;
}

#tin-tuc .block-news .title a {
	color: rgba(252, 252, 252, 1);
	font-family: 'SFU Futura';
	font-weight: 700;
	font-size: 16px;
	line-height: 140%;
}

#tin-tuc .block-news .desc {
	color: rgba(191, 191, 191, 1);
	font-family: 'SFU Futura';
	font-weight: 400;
	font-size: 14px;
	line-height: 140%;

}

/* Hover effects for entry-new-content links */
#tin-tuc .entry-new-content a {
	transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	position: relative;
}

#tin-tuc .entry-new-content a:hover {
	color: rgba(255, 255, 255, 1);
	transform: translateY(-1px);
	text-shadow: 0 2px 8px rgba(255, 255, 255, 0.2);
}

#tin-tuc .entry-new-content a:hover::after {
	content: '';
	position: absolute;
	bottom: -3px;
	left: 0;
	width: 100%;
	height: 1px;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.3));
	border-radius: 1px;
	transform: scaleX(0);
	animation: linkUnderlineExpand 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Enhanced hover for title links specifically */
#tin-tuc .block-news .title a:hover {
	color: rgba(255, 255, 255, 1);
	/* font-weight: 800; */
	/* letter-spacing: 0.5px; */
}


#tin-tuc .heading {
	width: 100%;
	margin-top: 190px;
	display: flex;
	flex-flow: row nowrap;
	align-items: start;
	justify-content: start;
	gap: 100px;
}

#tin-tuc .heading .title {
	position: relative;
}

#tin-tuc .heading .title h2 {
	font-family: 'Argue';
	font-weight: 400;
	font-size: 56px;
	line-height: 145%;
	text-transform: uppercase;
}

#tin-tuc .heading .title .watermark {
	font-family: 'Arizonia';
	font-weight: 400;
	font-size: 200px;
	line-height: 120%;
	color: rgba(255, 255, 255, 0.06);
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	pointer-events: none;
	min-width: 500px;
}

#tin-tuc .block-contents {
	width: 100%;
	display: flex;
	flex-flow: column nowrap;
	align-items: start;
	justify-content: start;
	transition: all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	padding-right: 45px;
	padding-left: 270px;
}

#tin-tuc .heading .tagline {
	max-width: 410px;
	width: 100%;
	font-family: 'SFU Futura';
	font-weight: 400;
	font-style: Oblique;
	font-size: 16px;
	line-height: 140%;
	letter-spacing: 0%;
}

#tin-tuc .heading h2 {
	color: white;
	font-family: 'Argue';
	font-weight: 400;
	font-size: 56px;
	line-height: 120%;
	text-transform: uppercase;
}


#tin-tuc .heading .tt1 {
	font-family: 'SFU Futura';
	font-weight: 400;
	font-style: Oblique;
	font-size: 16px;
	line-height: 140%;
	color: rgba(252, 252, 252, 1);
}

#tin-tuc .heading .button-light {
	margin-top: 24px;
}

#tin-tuc .section-bottom .button-scroll-down {
	left: 32px;
	right: initial;
}

.button-light {
	color: rgba(252, 252, 252, 1);
	font-family: 'SFU Futura';
	font-weight: 700;
	font-size: 14px;
	line-height: 140%;
	text-align: center;
	padding: 8px 14px;
	border-radius: 100px;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0.4) 0%, rgba(153, 153, 153, 0.4) 100%);
	transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	border: 1px solid rgba(217, 217, 217, 1);
	display: inline-flex;
	flex-flow: row nowrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
	position: relative;
	overflow: hidden;
}

.button-light:hover {
	transform: translateY(-3px) scale(1.05);
	box-shadow: 0 8px 25px rgba(255, 255, 255, 0.25);
	filter: brightness(1.15);
	border-color: rgba(255, 255, 255, 0.6);
	background: linear-gradient(90deg, rgba(255, 255, 255, 0.6) 0%, rgba(200, 200, 200, 0.6) 100%);
}

.button-light:hover::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
	transition: left 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.button-light:hover::before {
	left: 100%;
}

.button-light:active {
	transform: translateY(-1px) scale(1.02);
	transition: all 0.1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}


.section-map-contents {
	max-width: 360px;
	width: 100%;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 50px;
	display: flex;
	flex-flow: column nowrap;
	align-items: end;
	justify-content: end;
	transform: translateY(-50%);
	z-index: 88;
}

.section-map-contents h3 {
	font-family: 'Argue';
	font-weight: 400;
	font-size: 56px;
	line-height: 120%;
	text-transform: uppercase;
	color: white;
}

/* .section-map-contents p {
	margin-top: 16px;
	font-family: 'SFU Futura';
	font-weight: 400;
	font-style: Oblique;
	font-size: 16px;
	line-height: 140%;
	text-align: justify;
	color: rgba(252, 252, 252, 1);
} */

.section-map-contents .button-light {
	margin-top: 24px;
}



.section-map-contents .button-light {
	margin-top: 24px;
}

.section-map-info {
	position: absolute;
	bottom: 100px;
	left: 60%;
	color: rgba(163, 29, 51, 1);
	transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.section-map-info .tt1 {
	font-family: 'Inter';
	font-weight: 400;
	font-size: 20px;
	line-height: 100%;
	text-decoration: underline;
	padding-left: 45px;
}

.section-map-info .line1,
.section-map-info .line2 {
	font-family: 'Inter';
	font-weight: 400;
	font-size: 16px;
	line-height: 100%;
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	justify-content: start;
	margin-top: 16px;
}

.section-map-info .line1 {
	padding-left: 4px;
}

.section-map-info svg {
	margin-right: 16px;
}

.section-map-info .line2 svg {
	margin-right: 14px;
}


/* ========================================
   Vitri Line Animations
   ======================================== */

/* Base styles for all vitri lines */
.vitri-line1 {
	stroke-dasharray: 4 4;
	stroke-dashoffset: 0;
}


#tien-ich {
	background: radial-gradient(80.89% 80.89% at 50% 50%, #886D3C 4.33%, #C8B07E 77.88%),
		radial-gradient(80.89% 80.89% at 50% 50%, #C8B07E 0%, #886D3C 100%);
}

#tien-ich:after {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	content: '';
	background-image: url('../images/tien-ich-bg2.svg');
	background-size: contain;
	background-repeat: no-repeat;
	pointer-events: none;
}

#tien-ich .wrapper {
	z-index: 1;
}


#tien-ich .section-contents {
	max-width: 370px;
	width: 100%;
	position: absolute;
	z-index: 88;
	top: 22%;
	right: 45px;
	width: 100%;
	display: flex;
	flex-flow: column nowrap;
	align-items: end;
	justify-content: end;
}


#tien-ich .button-light {
	margin-top: 30px;
}

#tien-ich .section-contents .tt1 {
	font-family: 'SFU Futura';
	font-weight: 400;
	font-style: Oblique;
	font-size: 16px;
	text-align: justify;
	line-height: 1.6;
}

#tien-ich .section-contents .highlight {
	font-weight: bold;
	font-style: italic;
}


#tien-ich.active .img-logo {
	opacity: 1;
	transform: translateY(0) scale(1) rotate(0deg);
	animation: logoTopEntrance 1.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

#tien-ich:not(.active) .img-logo {
	opacity: 0;
	transform: translateY(-50px) scale(0.8) rotate(-5deg);
	animation: logoTopExit 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

#tien-ich .heading {
	width: 100%;
	height: 140px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 15%;
	z-index: 8;
}

#tien-ich .heading .tt1 {
	position: absolute;
	text-align: center;
	font-family: 'Argue';
	font-weight: 400;
	font-size: 56px;
	line-height: 120%;
	text-transform: uppercase;
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Step 1: Smooth zoom popup animation for .heading .tt1 */
#tien-ich.active .heading .tt1 {
	transform: scale(1);
	opacity: 1;
}

#tien-ich .heading .watermark {
	position: absolute;
	font-family: 'Arizonia';
	font-weight: 400;
	font-size: 200px;
	line-height: 120%;
	color: rgba(255, 255, 255, 0.06);
	transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);
}

#tien-ich .section-images {
	position: absolute;
	bottom: 5%;
	width: 100%;
	height: 100%;
	padding-right: 45px;
	padding-left: 190px;
	display: flex;
	flex-flow: row nowrap;
	align-items: end;
	justify-content: end;
	gap: 24px;
}

/* Special clip-path animation for .section-images */
#tien-ich.active .section-images {
	clip-path: circle(150% at 100% 0);
	animation: sectionImagesCircleReveal 3.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

#tien-ich:not(.active) .section-images {
	clip-path: circle(0 at 100% 0);
	animation: sectionImagesCircleHide 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}


#tien-ich .section-images .sample1 {
	width: 70%;
}

#tien-ich .section-images .sample2 {
	width: 30%;
}


#tien-ich .section-images img {
	border-radius: 16px;
}

#tien-ich .section-bottom .button-scroll-down {
	left: 32px;
	right: initial;
}




#video {
	background-image: url('../images/bg-form.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

#video .button-play-video {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 889;
	cursor: pointer;
	background: none;
	outline: none;
	box-shadow: none;
}

#video .video-wrapper {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 88;
	display: none;
}

#video .video-wrapper video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

#video .button-pause-video {
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	position: fixed;
	z-index: 888;
	cursor: pointer;
	background: none;
	outline: none;
	box-shadow: none;
}

.page-form-contact {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 9999;
	display: flex;
	flex-flow: column nowrap;
	align-items: flex-end;
	background: white;
	opacity: 0;
	visibility: hidden;
	transform: scale(0.95) translateY(20px);
	transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	backdrop-filter: blur(0px);
}

.page-form-contact.form-visible {
	opacity: 1;
	visibility: visible;
	transform: scale(1) translateY(0);
	backdrop-filter: blur(10px);
}

.page-form-contact.form-hidden {
	opacity: 0;
	visibility: hidden;
	transform: scale(0.95) translateY(20px);
	backdrop-filter: blur(0px);
}

.page-form-contact:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
	background: linear-gradient(270deg, #A08047 40%, rgba(160, 128, 71, 0) 80%);
}


.page-form-contact:after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
	background-image: url('../images/bg-form.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.page-form-contact .wrapper {
	position: relative;
	z-index: 3;
	max-width: 600px;
	width: 100%;
	height: 100%;
	display: flex;
	flex-flow: column nowrap;
	justify-content: flex-start;
	align-items: center;
	padding: 40px;
	box-sizing: border-box;
	padding: 5% 0;
	gap: 72px;
	overflow-y: auto;
	opacity: 0;
	transform: translateX(50px);
	transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	transition-delay: 0.2s;
	padding: 0 50px;
	padding-top: 100px;
	padding-bottom: 50px;
}

.page-form-contact.form-visible .wrapper {
	opacity: 1;
	transform: translateX(0);
}



.page-form-contact #close-form-contact {
	position: fixed;
	top: 50px;
	right: 20px;
	z-index: 9999;
	cursor: pointer;
	background: none;
	outline: none;
	box-shadow: none;
	opacity: 0;
	transform: scale(0.8) rotate(-90deg);
	transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	transition-delay: 0.4s;
}

.page-form-contact.form-visible #close-form-contact {
	opacity: 1;
	transform: scale(1) rotate(0deg);
}

.page-form-contact #close-form-contact:hover {
	transform: scale(1.1) rotate(0deg);
	filter: brightness(1.2);
}

.page-form-contact .col-content {
	padding: 60px 40px;
	width: 100%;
	height: auto;
	margin: 0 auto;
	display: flex;
	flex-flow: column nowrap;
	align-items: center;
	gap: 32px;
	/* border-width: 1px;
   border-style: solid;
   border-image-source: linear-gradient(137.95deg, #7A96AC 2.28%, #EAEFF3 19.8%, #C2D4E1 32.94%, #FFFFFF 50.16%, #D4DEE5 62.15%, #ABBDC8 78.69%, #BCCAD7 95.24%); */
	border: 1px solid white;
	border-radius: 16px;
	/* overflow-y: auto; */
	opacity: 0;
	transform: translateY(30px);
	transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	transition-delay: 0.3s;
}

.page-form-contact.form-visible .col-content {
	opacity: 1;
	transform: translateY(0);
}

.page-form-contact .col-content .img-logo {
	max-width: 190px;
}

.page-form-contact .col-content h3 {
	font-family: 'Argue';
	font-weight: 400;
	font-size: 40px;
	line-height: 120%;
	text-align: center;
	text-transform: uppercase;
	color: white;
}

.page-form-contact .form-design {
	width: 100%;
}

.page-form-contact .form-design input,
.page-form-contact .form-design textarea {
	background: none;
	outline: none;
	box-shadow: none;
	border: none;
	border-bottom: 1px solid white;
	width: 100%;
	padding: 10px 0;
	color: white;
	font-size: 16px;
	margin-bottom: 16px;
}

.page-form-contact .form-design textarea {
	height: 130px;
	resize: none;
}

.page-form-contact .form-design input::placeholder,
.page-form-contact .form-design textarea::placeholder {
	color: rgba(252, 252, 252, 1);
	font-family: 'SFU Futura';
	font-weight: 400;
	font-style: Oblique;
	font-size: 16px;
	line-height: 140%;
}

.page-form-contact .form-design .wpcf7-submit {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	justify-content: space-between;
	border-radius: 25px;
	color: white;
	font-family: 'SFU Futura';
	font-weight: 700;
	font-size: 14px;
	line-height: 140%;
	letter-spacing: 0%;
	text-align: center;
	gap: 8px;
	padding: 8px 10px;
	cursor: pointer;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0.4) 0%, rgba(153, 153, 153, 0.4) 100%);
	transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	border: 1px solid rgba(217, 217, 217, 1);
	margin-top: 24px;
}

.page-form-contact .form-design .wpcf7-submit:hover {
	transform: translateY(-3px) scale(1.05);
	box-shadow: 0 8px 25px rgba(255, 255, 255, 0.25);
	filter: brightness(1.15);
	border-color: rgba(255, 255, 255, 0.6);
	background: linear-gradient(90deg, rgba(255, 255, 255, 0.6) 0%, rgba(200, 200, 200, 0.6) 100%);
}


.wpcf7 form .wpcf7-response-output {
	border: none;
	text-align: center;
}

.wpcf7-spinner {
	top: 16px;
	left: 40px;
}

.wpcf7-not-valid-tip {
	color: #a20000;
}

.bottom-fixed {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100px;
	z-index: 88;
	display: flex;
}

#page-gioi-thieu-main,
#page-thong-tin,
#page-chu-dau-tu {
	width: 100%;
	height: 100vh;
	overflow: hidden;
	position: relative;
}

#menu-vertical.menu-page-gioi-thieu {
	height: 120px;
}

#page-gioi-thieu-main {
	background-image: url('../images/page-gioi-thieu-bg.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

#page-gioi-thieu-main .section-content {
	max-width: 450px;
	width: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 1;
	display: flex;
	flex-flow: column nowrap;
	align-items: center;
	justify-content: center;
	/* Allow mix-blend-mode to work properly */
	isolation: auto;
}

#page-gioi-thieu-main .section-content .tt1 {
	font-family: 'Argue';
	font-weight: 400;
	font-size: 56px;
	line-height: 120%;
	letter-spacing: 0%;
	text-align: center;
	text-transform: uppercase;
	color: white;
}

#page-gioi-thieu-main .section-content .tt2 {
	font-family: 'SFU Futura';
	font-weight: 400;
	font-style: Oblique;
	font-size: 14px;
	line-height: 140%;
	text-align: center;
	margin-bottom: 8px;
}

#page-gioi-thieu-main .section-content .highlight {
	font-weight: bold;
}

#page-gioi-thieu-main .section-content .watermark {
	position: absolute;
	bottom: -95px;
	left: 50%;
	transform: translateX(-50%);
	font-family: 'Arizonia';
	font-weight: 400;
	font-size: 100px;
	line-height: 120%;
	text-align: center;
	isolation: isolate;
	color: rgba(69, 151, 177, 0.6);
	/* Try different blend modes to match Figma */
	mix-blend-mode: plus-lighter;
	z-index: 2;
	/* Ensure the element can blend properly */
	will-change: transform;
	/* Alternative blend modes - uncomment to try:
   mix-blend-mode: multiply;     - Darker effect
   mix-blend-mode: overlay;      - High contrast
   mix-blend-mode: soft-light;   - Soft blending
   mix-blend-mode: hard-light;   - Strong blending
   mix-blend-mode: color-dodge;  - Bright effect
   mix-blend-mode: color-burn;   - Dark effect
   mix-blend-mode: difference;   - Inverted colors
   mix-blend-mode: exclusion;    - Softer difference
   mix-blend-mode: hue;          - Changes hue only
   mix-blend-mode: saturation;   - Changes saturation only
   mix-blend-mode: color;        - Changes hue and saturation
   mix-blend-mode: luminosity;   - Changes brightness only
   */
}