/* ==========================================================================
   1. FONT DEFINITIONS (@font-face)
   ========================================================================== */

/* Metropolis */
@font-face {
	font-family: "Metropolis";
	src: url(../fonts/Metropolis-Black.woff2) format("woff2");
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Metropolis";
	src: url(../fonts/Metropolis-ExtraBold.woff2) format("woff2");
	font-weight: 800;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Metropolis";
	src: url(../fonts/Metropolis-Bold.woff2) format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Metropolis";
	src: url(../fonts/Metropolis-Regular.woff2) format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/* Absara TF */
@font-face {
	font-family: "AbsaraTF";
	src: url(../fonts/AbsaraTF-Thin.woff2) format("woff2"),
		url(../fonts/AbsaraTF-Thin.woff) format("woff");
	font-weight: 100;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "AbsaraTF";
	src: url(../fonts/AbsaraTF-Light.woff2) format("woff2"),
		url(../fonts/AbsaraTF-Light.woff) format("woff");
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "AbsaraTF";
	src: url(../fonts/AbsaraTF-Regular.woff2) format("woff2"),
		url(../fonts/AbsaraTF-Regular.woff) format("woff");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "AbsaraTF";
	src: url(../fonts/AbsaraTF-Medium.woff2) format("woff2"),
		url(../fonts/AbsaraTF-Medium.woff) format("woff");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

/* Calibre */
@font-face {
	font-family: "Calibre";
	src: url(../fonts/CalibreBold.woff2) format("woff2"),
		url(../fonts/CalibreBold.woff) format("woff");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}


/* ==========================================================================
   2. BASE & GLOBAL STYLES
   ========================================================================== */

/* Chrome, Safari, Edge, Opera Spin Buttons */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Firefox Spin Buttons */
input[type=number] {
	-moz-appearance: textfield;
}

body {
	background-color: #231f20;
	font-family: "Metropolis";
	font-weight: 400;
}

p {
	font-family: "Metropolis";
	font-weight: 400;
}

main {
	position: relative;
	background-image: url(../images/bg-overlay.webp);
	background-color: #231f20;
}

.topgap {
	padding-top: 180px;
}

.showbb {
	display: inline-block !important;
}

#topBtn.showbb {
	opacity: 1;
	visibility: visible;
	cursor: pointer;
}

.bgbl {
	position: relative;
	background-image: url(../images/bg-overlay.webp);
	background-color: #231f20;
	overflow: hidden;
}


/* ==========================================================================
   3. NAVIGATION BAR
   ========================================================================== */

#navbarserenade #navbarserenade-inner {
	max-width: 100%;
	margin: 0 auto;
}

#navbarserenade.fixed {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
}

#navbarserenade.is-minimized {
	transform: translateY(-65px);
}

#navbarserenade.is-maximized {
	transform: none;
}

#navbarserenade .top-section {
	background: none;
}

#navbarserenade .bottom-section {
	background: none;
}

.active-dropdown {
	color: #ffe17e;
}

.mobile-menu {
	transform: translateX(100%);
	transition: 0.3s;
}

.mobile-menu.slide-in {
	transform: none;
}

.mobile-menu a {
	margin-top: 1.25rem;
}

.nav-down {
	top: 0;
}

.btmNav {
	background: none;
	color: #fff;
	display: flex;
	top: 64px;
	position: absolute;
	width: 100%;
	font-size: 0.8rem;
	padding: 20px 0;
	font-family: "Metropolis";
	font-weight: 700;
	transition: background 0.3s ease, padding 0.3s ease;
}

.btmNav .logo {
	width: 15%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.btmNav .logo a img {
	height: 50px;
	object-fit: contain;
	width: 136px;
}

.btmNav .logo a {
	color: #FFF;
	text-decoration: none;
}

.btmNav ul {
	margin: 0;
	display: flex;
	align-items: center;
	margin-left: 10px;
	justify-content: space-evenly;
	width: 60%;
}

.btmNav ul li {
	list-style: none;
}

.btmNav ul li a {
	color: #FFF;
	display: block;
	text-decoration: none;
	text-transform: capitalize;
}

.regBtn {
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	width: 12%;
	font-size: 20px;
	background-image: linear-gradient(to right, #f5c4a9, #a87b70);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.regBtn span {
	position: relative;
	width: 90%;
	text-align: center;
	padding: 7px 0px;
	background-image: linear-gradient(to right, #f5c4a9, #a87b70);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.regBtn span::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 30px;
	padding: 1.5px;
	box-sizing: border-box;
	display: block;
	background: linear-gradient(to right, #f5c4a9, #a87b70);
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: destination-out;
	mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	mask-composite: exclude;
	pointer-events: none;
}

.regBtn a {
	display: flex;
	align-items: center;
	flex-direction: row;
	gap: 7px;
	color: #fff;
}

.dropdown-content {
	display: flex;
	width: 100%;
	margin: auto;
	justify-content: space-evenly;
}

.dropdown {
	display: flex;
	width: 73.55%;
}

.dropdown a {
	cursor: pointer;
	display: flex;
	height: 58px;
	align-items: center;
	justify-content: center;
	font-size: 14px;
}

.dropbtn {
	display: none;
}

.navContainer {
	max-width: 97%;
	position: relative;
	display: flex;
	margin: auto;
	border-radius: 50px;
	width: 100%;
	overflow: clip;
	transition: max-width 0.3s ease, border-radius 0.3s ease;
}

.navContainer::before {
	content: "";
	background: linear-gradient(to top, #231f20 20%, #fff 238%);
	filter: opacity(0.5);
	inset: 0;
	position: absolute;
	z-index: -1;
	transition: opacity 0.3s ease;
}

.btmNav.scrolled {
	padding: 0;
	background: #1d1a1c;
}

.btmNav.scrolled .navContainer {
	max-width: 100%;
	position: relative;
	display: flex;
	margin: auto;
	border-radius: 0;
	width: 100%;
	overflow: unset;
}

.btmNav.scrolled .navContainer::before {
	display: none;
	opacity: 0;
}


/* ==========================================================================
   4. HERO BANNER
   ========================================================================== */

.main-sub {
    font-weight: 400;
    font-size: 1.2vw;
    text-align: center;
    background: linear-gradient(0deg, #f5c4a9, #a87b70);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    letter-spacing: 0.09em;
}

.img1 {
	width: 12vw;
}

.img2 {
	width: 24vw;
}

.cta_register {
	background: linear-gradient(0deg, #a87b70, #f5c4a9);
	color: #fff;
	display: block;
	margin: auto;
	width: fit-content;
	padding: 10px 20px;
	border-radius: 20px;
	font-weight: 800;
	letter-spacing: 0.06em;
	position: relative;
	animation: ctaPulse 2s infinite ease-in-out;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.cta_register:hover {
	animation-play-state:running;
	transform: scale(1.08);
	box-shadow: 0 0 20px rgba(216, 118, 66, 0.8);
}

@keyframes ctaPulse {
	0% {
		transform: scale(1);
		
	}
	70% {
		transform: scale(1.05);
			box-shadow: 0 0 20px rgba(224, 167, 61, 0.8);
		
	}
	100% {
		transform: scale(1);
	
	}
}
.cta_register::before {
    content: "";
    width: 17dvi;
    height: 2dvi;
    position: absolute;
    top: -11%;
    right: 0;
    background: url(../images/cta-glow.webp);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top;
	    mix-blend-mode: plus-lighter;
}
.cta_register::after {
    content: "";
    width: 17dvi;
    height: 2dvi;
    position: absolute;
    bottom: -10%;
    left: 0;
    background: url(../images/cta-glow.webp);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom;
	    mix-blend-mode: plus-lighter;
}


/* ==========================================================================
   5. INTRODUCTION / OVERVIEW SECTION
   ========================================================================== */

.block-wrapper {
	text-align: center;
	padding: 1.5rem 3rem;
	width: fit-content;
	margin: auto;
	background: #231f20;
	border-bottom: 1px solid #f5c4a9;
	position: relative;
}

.block-wrapper p {
	font-weight: 700;
	color: #fff;
	letter-spacing: 0.055em;
}

.block-wrapper h1 {
	font-weight: 700;
	font-size: 2rem;
	background: linear-gradient(0deg, #f5c4a9, #a87b70);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	margin: 0;
}

.block-wrapper::before {
	content: "";
	position: absolute;
	width: 300px;
	height: 20px;
	bottom: -18px;
	background: url(../images/glow-shadow.webp);
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
	left: 0;
	right: 0;
	margin: auto;
	mix-blend-mode: multiply;
}

.intro {
	background: linear-gradient(0deg, #f5c4a9, #a87b70);
	position: relative;
}

.overlay-1 {
	position: absolute;
	bottom: 0;
	width: 35vw;
	right: 0;
	opacity: 0.3;
	mix-blend-mode: hard-light;
}

.introcont p {
	font-size: 1.1rem;
	text-align: center;
	max-width: 34ch;
	margin: auto;
	color: #414042;
}

.deco-1 {
	position: absolute;
	top: 0;
	left: -24px;
	width: 100px;
	height: 80px;
	object-fit: contain;
	object-position: top left;
	z-index: -1;
}

.deco-line {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 80%;
}

.image-cont {
	position: relative;
}

.image-cont::before {
	content: "";
	position: absolute;
	width: 400px;
	height: 40px;
	top: -18px;
	background: url(../images/glow-img.webp);
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
	left: 0;
	right: 0;
	margin: auto;
	/* mix-blend-mode: multiply; */
	z-index: 2;
}

.pos-deco-stp {
	position: absolute;
	top: 20%;
	width: 600px;
	height: 600px;
	object-fit: contain;
	object-position: top left;
	z-index: 0;
}

p strong.cust1 {
	font-size: 1.12rem;
}

.linedecobtw {
	position: absolute;
	left: 0;
	right: 0;
	top: -1em;
	height: 3.5em;
	width: 100%;
	object-fit: cover;
	display: block;
}


/* ==========================================================================
   6. WES / WHY SERENIA SERIES
   ========================================================================== */

.wes-container {
	background: linear-gradient(180deg, #d3a490 0%, #af7c69 100%);
	border-radius: 50px 0;
	position: relative;
	overflow: hidden;
	z-index: 2;
}

.wes-container::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 24dvi;
	height: 25dvi;
	background: url(../images/circle.webp);
	background-size: contain;
	background-position: top left;
	background-repeat: no-repeat;
	opacity: 0.4;
	z-index: -1;
}

.wes-container h2 {
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 1.7rem;
}

.wes-container h2 span {
	font-weight: 700;
	display: block;
	margin: auto;
}

.item-box {
	text-align: left;
	height: 100%;
}

.item-box .we-icon {
	width: 90px;
	height: 75px;
	object-fit: contain;
	display: block;
	margin: auto;
	margin-bottom: 1.25rem;
}

.item-box h3 {
	font-size: 0.93em;
	font-weight: 700;
	color: #414042;
	text-transform: uppercase;
	line-height: 1.35;
	letter-spacing: 0.02em;
	margin-bottom: 1.5em;
}

.item-box p {
	font-size: 0.85em;
	font-weight: 400;
	color: rgba(255, 255, 255, 0.92);
	line-height: 1.3;
	margin-bottom: 0;
}

.maskedglow {
	position: absolute;
	top: -5em;
	left: 0;
	right: 0;
	width: 100%;
	height: 10em;
	margin: auto;
	display: block;
	z-index: 3;
	mix-blend-mode: screen;
	object-position: top center;
}

.wesbtmglow {
	position: absolute;
	bottom: -2em;
	left: 0;
	right: 0;
	width: 100%;
	height: 2em;
	margin: auto;
	display: block;
	z-index: 22;
	mix-blend-mode: multiply;
	object-position: bottom right;
}


/* ==========================================================================
   7. GRAYNITE SECTION
   ========================================================================== */

.graynite {
	background-image: url(../images/overlay-texture.webp);
	background-size: cover;
	background-repeat: no-repeat;
	background-color: #ffffff;
	margin-top: -12%;
	z-index: 1;
	position: relative;
	padding-top: 9%;
}

.graynite h2 {
	text-transform: uppercase;
	font-weight: 700;
	line-height: 1.6;
	font-size: 2.3rem;
}

.graynite h2 span {
	display: block;
	font-weight: 400;
	font-size: 1rem;
}

.sseries {
	position: absolute;
	top: 0;
	right: 0;
	width: 16vw;
	height: 22vw;
	object-fit: contain;
	object-position: top right;
}


/* ==========================================================================
   8. LOCATION & HIGHWAYS SECTION
   ========================================================================== */

.maplocation {
	background: linear-gradient(135deg, #b3aca5 0%, #ffffff 100%);
}

.maplocation h2 {
	font-weight: 700;
	letter-spacing: 0.08em;
	font-size: 1.6rem;
}

.maplocation h2 span {
	color: #fcceb2;
}

.highway-container {
	max-width: 520px;
}

.highway-container h3 {
	font-size: 0.9rem;
	margin-left: 1rem;
}

.travelicon {
	height: 30px;
	object-fit: contain;
	object-position: center;
}

.highway-list {
	display: flex;
	flex-direction: column;
	margin-top: 1.25rem;
}

.highway-item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.2rem 0;
}

.highway-num {
	width: 33px;
	height: 33px;
	min-width: 33px;
	background-color: #f4e400;
	border: 2px solid #fff;
	color: #000;
	font-weight: 700;
	font-size: 1em;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 30px;
	font-family: "Metropolis", sans-serif;
	line-height: 1;
	flex-shrink: 0;
}

.highway-info {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.highway-title {
		font-size: 0.8rem;
	font-weight: 400;
	color: #000;
	line-height: 1.2;
	font-family: "Metropolis", sans-serif;
}

.highway-sub {
	font-size: 0.8rem;
	font-weight: 400;
	color: #000;
	line-height: 1.3;
	font-family: "Metropolis", sans-serif;
}

.extrah {
	height: 10dvi;
}

.discont {
	display: flex;
	gap: 12px;
	align-items: center;
	padding-top: 1.25rem;
}

.dis-card {
	width: 9dvi;
	height: 9dvi;
	border-radius: 50%;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	flex-shrink: 0;
}

.dis-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 18px rgba(0, 0, 0, 0.15);
}

.dis-top {
	height: 63%;
	background: #f7c6a5;
	box-shadow: inset 0px -7px 8px 3px rgba(0, 0, 0, 0.08);
	color: #38281e;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 6px 8px 2px;
	font-family: "Metropolis", sans-serif;
	font-size: 0.8vw;
	font-weight: 400;
	line-height: 1.25;
}

.dis-bottom {
	height: 37%;
	background: linear-gradient(to left, #2d2616, #000);
	color: #fcceb2;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-family: "Metropolis", sans-serif;
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: 0.5px;
	line-height: 1;
}


/* ==========================================================================
   9. AWARDS CAROUSEL
   ========================================================================== */

.awards-section {
	background: linear-gradient(180deg, #a29791, #e4e4e5, #fff);
}

.award-img {
	max-width: 100%;
	height: 6dvi;
	object-fit: contain;
	object-position: bottom;
}

.access-cont {
	width: 100%;
}

.splide__list.toCenter {
	justify-content: center !important;
}


/* ==========================================================================
   10. BRAND / SLANTED PARALLELOGRAM GRID (.bgblass)
   ========================================================================== */

.bgblass {
	position: relative;
	background-image: url(../images/bg-overlay.webp);
	background-color: #231f20;
	overflow: hidden;
	--slant: 42px;
	--gap: 6px;
}

.bgblass-deco {
	width: 40vw;
	pointer-events: none;
	z-index: 1;
	object-fit: contain;
	object-position: top left;
	height: 16vw;
	filter: drop-shadow(2px 4px 6px black);
	position: absolute;
	left: 0;
	top: 0;
}

.bgblass-header {
	text-align: center;
	margin-bottom: 2.5rem;
	position: relative;
	z-index: 2;
}

.bgblass-header h2 {
	font-weight: 800;
	font-size: 0.95rem;
	letter-spacing: 0.05em;
	color: #ffffff;
	text-transform: uppercase;
	margin-top: 1rem;
	text-shadow: 0 2px 5px rgba(0, 0, 0, 0.7);
	width: fit-content;
	margin: auto;
	padding-top: 1em;
}

.bgblass-header h2 span {
	display: inline-block;
	background: linear-gradient(to right, #f5c4a9, #a87b70);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	text-shadow: none;
}

.bgblass-subtext {
	max-width: 720px;
	margin: 1.2rem auto 0 auto;
	color: rgba(255, 255, 255, 0.85);
	font-size: 0.95rem;
	line-height: 1.6;
	text-align: center;
}

.bgblass-subtext p {
	margin: 0 0 0.2rem 0;
}

.bgblass-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: 2.5rem auto 0 auto;
	row-gap: 2rem;
	position: relative;
	z-index: 2;
}

.bgblass-card {
	flex: 0 0 calc(33.333% + (var(--slant) * 0.666));
	max-width: calc(33.333% + (var(--slant) * 0.666));
	margin-left: calc(var(--slant) * -1 + var(--gap));
	position: relative;
	text-align: center;
}

.bgblass-card:nth-child(-n+3) {
	transform: translateX(calc(var(--slant) * -0.8));
}

.bgblass-card:nth-child(4) {
	margin-right: 0;
}

.bgblass-card:nth-child(n+4) {
	transform: translateX(calc(var(--slant) * 2.5));
}

.bgblass-card-img-wrap {
	position: relative;
	aspect-ratio: 15 / 7.25;
}

.bgblass-card-img-wrap::before {
	content: "";
	position: absolute;
	top: -0.5em;
	left: var(--slant);
	right: 0;
	background: url(../images/frame-glow.webp);
	background-size: contain;
	background-repeat: no-repeat;
	height: 2em;
	z-index: 5;
}

.bgblass-card-img-wrap::after {
	content: "";
	position: absolute;
	bottom: -1.5em;
	left: var(--slant);
	right: 0;
	background: url(../images/frame-glow.webp);
	background-size: contain;
	background-repeat: no-repeat;
	height: 2em;
	z-index: 5;
}

.bgblass-card-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}

.bgblass-card-title {
	font-weight: 800;
	font-size: 0.95rem;
	letter-spacing: 0.05em;
	color: #ffffff;
	text-transform: uppercase;
	margin-top: 1rem;
	text-shadow: 0 2px 5px rgba(0, 0, 0, 0.7);
}

.bgblass-bottom-text {
	max-width: 760px;
	margin: auto;
	color: rgba(255, 255, 255, 0.85);
	font-size: 0.95rem;
	line-height: 1.6;
	text-align: center;
	position: relative;
	z-index: 2;
	padding-bottom: 2rem;
}


/* ==========================================================================
   11. MARKET STATISTICS (.marketstat)
   ========================================================================== */

.marketstat {
	background-color: #ffffff;
	position: relative;
	overflow: hidden;
}

.static_img svg {
	width: 140px;
}

.mcc {
	max-width: 40vw;
	display: block;
	margin: auto;
}

.market-swiper {
	width: 100%;
	height: 110px;
	overflow: hidden;
}

.market-card {
	    max-width: 80vw;
    margin: auto;
	background: #ffffff;
	border-radius: 4px;
	display: flex;
	align-items: center;
	gap: 1.25rem;
	height: 100%;
	padding-right: 25px;
	box-sizing: border-box;
}

.market-card-title-box {
	flex: 0 0 auto;
	min-width: 20vw;
	margin: auto;
	display: flex;
	flex-direction: column;
	align-items: flex-start;

}

.market-badge {
	font-size: 1.72rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: #414042;
	display: block;
	text-transform: uppercase;
	margin-bottom: 2px;
}

.market-heading {
	font-size: 2.3rem;
	font-weight: 900;
	letter-spacing: 0.03em;
	color: #414042;
	margin: 0;
	text-transform: uppercase;
	line-height: 1.1;
}

.market-card-img-box {
	flex: 0 0 10%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.market-ring-svg {
    width: 12dvi;
    height: 12dvi;
	object-fit: contain;
}

.market-card-content {
	flex: 1 1 auto;
}

.market-desc {
	font-size: 1rem;
    font-weight: 400;
	color: #2b2b2b;
	line-height: 1.45;
	margin: 0 0 2.3rem 0;
}

.market-source {
	font-size: 0.68rem;
	font-weight: 400;
	color: #222222;
	display: block;
	line-height: 1.3;
}

.market-card-dots {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
	display: flex;
	flex-direction: column;
	gap: 5px;
	align-items: center;
}

.market-card-dots .dot {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background-color: #333333;
	cursor: pointer;
	transition: background-color 0.3s ease, transform 0.3s ease;
}

.market-card-dots .dot-active {
	background-color: #f5c4a9;
	transform: scale(1.3);
}

.splide__pagination__page:focus-visible {
	outline: 3px solid rgba(180, 233, 0, 0.8);
	outline-offset: 3px;
	z-index: 1;
	transition: none;
}

.market-carousel .splide__pagination__page {
	display: block;
	width: 3px;
	height: 4rem;
	cursor: pointer;
	transition: var(--transition);
	background-color: rgba(255, 255, 255, 0.4);
}

.market-splide {
	position: relative;
	margin: 0 auto;
}

.market-splide .splide__pagination {
	position: absolute;
	right: 1.25rem;
	left: auto;
	top: 50%;
	bottom: auto;
	transform: translateY(-50%);
	z-index: 10;
	display: flex;
	flex-direction: column;
	padding: 0;
	margin: 0;
	gap: 6px;
	height: auto;
}

.market-splide .splide__pagination li {
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
	margin: 0;
}

.market-splide .splide__pagination__page {
	display: block;
	width: 0.85dvi;
	height: 0.85dvi;
	border-radius: 50%;
	background-color: #000000;
	border: none;
	padding: 0;
	margin: 0;
	opacity: 1;
	cursor: pointer;
	transition: background-color 0.3s ease, transform 0.3s ease;
}

.market-splide .splide__pagination__page.is-active {
	background-color: #f5c4a9;
	transform: scale(1.25);
}


/* ==========================================================================
   12. SIGNATURE FEATURES SECTION (01 - 07 Cards)
   ========================================================================== */

.pos-fac {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 2;
	height: 25%;
	display: flex;
	align-items: center;
}

.pos-fac h2 {
	font-weight: 700;
	text-transform: uppercase;
	margin-bottom: 0;
	line-height: 0.7;
	font-size: 2.7rem;
}

.pos-fac h2 span {
	font-weight: 700;
	font-size: 1.2rem;
}

.signature-features-bg {
	background: linear-gradient(180deg, #d39f84 0%, #e6beaa 65%, #f7e6dc 100%);
	position: relative;
	overflow: hidden;
}

.sig-content {
	padding-left: 2.34rem;
}

.sig-feature-card {
	border-radius: 10px;
	height: 100%;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	position: relative;
}

.sig-feature-card::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	display: block;
	background: url(../images/shadow-line.webp);
	background-size: 100% 100%;
	width: 1em;
	background-repeat: no-repeat;
	height: 100%;
	background-position: center;
}

.sig-feature-item {
	position: relative;
}

.sig-badge-box {
	display: inline-flex;
	align-items: center;
	margin-bottom: 0.5rem;
}

.sig-num {
	width: 35px;
	height: 35px;
	border-radius: 50%;
	background: linear-gradient(#1c1c1c, #1c1c1c) padding-box,
	            linear-gradient(135deg, #f5c4a9 0%, #a87b70 100%) border-box;
	border: 3px solid transparent;
	color: #ffffff;
	font-size: 0.72rem;
	font-weight: 800;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.sig-tag {
	background: linear-gradient(to bottom, #f5c4a9 0%, #a87b70 100%) border-box;
	color: #ffffff;
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: uppercase;
	padding: 2px 8px 2px 10px;
	border-radius: 0 4px 4px 0;
	margin-left: -6px;
	z-index: 1;
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-left: none;
}

.sig-title {
	font-size: 1.15rem;
	font-weight: 800;
	letter-spacing: 0.03em;
	color: #1a1a1a;
	text-transform: uppercase;
	margin-bottom: 0.1rem;
	line-height: 1.2;
}

.sig-desc {
	font-size: 0.88rem;
	font-weight: 400;
	color: #2b2b2b;
	line-height: 1.2;
	margin: 0;
}


/* ==========================================================================
   13. FLOOR PLAN INTERACTIVE SECTION
   ========================================================================== */

.floor-plan-section {
	background: linear-gradient(to bottom, black, #2d2616 80%);
	position: relative;
	color: #ffffff;
	/* overflow: hidden; */
}

.fp-slash-deco {
	position: absolute;
	top: 0.5rem;
	right: 1.5rem;
	display: flex;
	gap: 10px;
	pointer-events: none;
}

.fp-slash-deco span {
	display: block;
	width: 2.5px;
	height: 40px;
	background: linear-gradient(180deg, #f5c4a9 0%, #a87b70 100%);
	transform: skewX(-30deg);
	opacity: 0.7;
}

.fp-header-row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.5rem;
	padding-bottom: 1rem;
	position: relative;
}

.fp-tabs-wrapper {
	width: 80%;
	position: relative;
}

.fp-tabs-wrapper::before {
	content: "";
	position: absolute;
	bottom: -0.8rem;
	left: 0;
	right: 0;
	border-bottom: 2px solid #e2b398;
}

.fp-label {
	font-size: 0.88rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	color: #e2b398;
	display: block;
	text-transform: uppercase;
	margin-bottom: 2px;
}

.fp-type-title {
	font-size: 2.7rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: #e2b398;
	margin: 0;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	line-height: 1;
}

.fp-chevron {
	background: url(../images/arrow-next.webp);
	background-size: contain;
	width: 1.4dvi;
	height: 1.4dvi;
	background-repeat: no-repeat;
	background-position: center;
}

.fp-subtitle {
	font-size: 0.78rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	color: #ffffff;
	display: block;
	text-transform: uppercase;
	margin-top: 6px;
	position: absolute;
}

.fp-tabs {
	display: flex;
	gap: 8px;
	background: transparent;
	padding: 0;
	border: none;
}

.fp-tab {
	background: linear-gradient(180deg, #2d2929 0%, #171515 100%);
	border: 1px solid transparent;
	color: #ffffff;
	    font-size: 1rem;
    font-weight: 800;
    padding: 6px 29px;
	border-radius: 20px;
	cursor: pointer;
	transition: all 0.3s ease;
	letter-spacing: 0.05em;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}

.fp-tab:hover {
	color: #ffffff;
	border-color: #e2b398;
	transform: translateY(-2px);
}

.fp-tab.active {
	background: linear-gradient(180deg, #383333 0%, #1e1b1b 100%);
	border: 1px solid #e2b398;
	color: #ffffff;
}
.patternline {
	position: absolute;
	top: -4%;
	right: 10%;
	width: 18dvi;
	height: 22dvi;
	object-fit: contain;
	object-position: top;
	z-index: 3;
}
.fp-specs-container {
	padding-right: 1rem;
}

.fp-spec-label {
	font-size: 0.7rem;
	font-weight: 400;
	letter-spacing: 0.1em;
	color: #f5c4a9;
	display: block;
	text-transform: uppercase;
	margin-bottom: 4px;
}

.fp-spec-val {
	font-size: 1.2rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	color: #ffffff;
	margin: 0;
	line-height: 1.1;
}

.fp-spec-subval {
	font-size: 0.58rem;
	font-weight: 700;
	color: rgba(255, 255, 255, 0.7);
	line-height: 1;
}

.fp-sitemap-box {
	padding: 1rem;
	text-align: center;
}

.fp-sitemap-img {
	max-height: 220px;
	object-fit: contain;
	filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.5));
}

.fp-plan-card {
	background: #dedede;
	border-radius: 16px;
	padding: 2.2rem 1.8rem 1.8rem 1.8rem;
	position: relative;
	box-shadow: 0 15px 35px rgba(0, 0, 0, 0.35);
	overflow: hidden;
}

.fp-diagram-viewport {
	overflow: hidden;
	position: relative;
	cursor: grab;
}

.fp-diagram-wrapper {
	transition: transform 0.3s ease;
	transform-origin: center center;
}

.fp-plan-svg {
	width: 100%;
	max-height: 380px;
	display: block;
	margin: 0 auto;
}

.fp-floor-badge {
	display: inline-block;
	background: #9b9a98;
	color: #ffffff;
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	padding: 4px 16px;
	border-radius: 20px;
	text-transform: uppercase;
}

.fp-zoom-controls {
	position: absolute;
	right: 1.25rem;
	bottom: 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 8px;
	z-index: 10;
}

.fp-zoom-btn {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #1c1c1c;
	color: #ffffff;
	border: 1px solid rgba(255, 255, 255, 0.2);
	font-size: 1.1rem;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.2s ease;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.fp-zoom-btn:hover {
	background: #333333;
	transform: scale(1.1);
}


/* ==========================================================================
   14. REGISTER INTEREST FORM & FOOTER
   ========================================================================== */

.regcont {
	position: relative;
	background-image: url(../images/bg-overlay.webp);
	background-color: #231f20;
	overflow: hidden;
}

.coverimg {
	height: 100%;
	padding-top: 46px;
}

.coverimg h3 {
	font-size: 1.2rem;
}

.coverimg p {
	font-size: 0.9rem;
}

.gray-card {
	background: #c7c8c9;
	width: 80%;
	height: 95%;
	margin: auto;
	display: flex;
	justify-content: space-evenly;
	flex-direction: column;
}

.dis-txt {
	font-size: 9px;
	text-align: justify;
	padding: 0 1rem;
}

.linkBtn {
	background: #231f20;
	min-width: 145px;
	font-weight: 700;
	display: block;
	padding-top: 0.8rem;
	padding-bottom: 0.8rem;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	max-width: 30rem;
	text-align: center;
	font-size: 13px;
	line-height: 1rem;
	color: #fff;
}

.reg_d .reg-main-title {
	font-size: 1.9rem;
	font-weight: 800;
	color: #ffffff;
	letter-spacing: 3px;
	text-transform: uppercase;
	margin-bottom: 0;
	line-height: 1.1;
}

.reg_d .reg-sub-title {
	font-size: 1rem;
	font-weight: 400;
	color: #ffffff;
	text-transform: uppercase;
	margin-top: 6px;
	margin-bottom: 1.75rem;
}

#frmLeadGen {
	max-width: 32rem;
	margin: 0 auto;
}

#frmLeadGen input[type="text"],
#frmLeadGen input[type="tel"],
#frmLeadGen input[type="email"] {
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1rem;
	display: block;
	width: 100%;
	padding: 0.85rem 1.25rem;
	border-radius: 6px;
	border: 1px solid rgba(255, 255, 255, 0.7);
	max-width: 32rem;
	background-color: rgba(30, 30, 30, 0.45);
	text-align: left;
	font-weight: 400;
	font-size: 15px;
	line-height: 1.4;
	color: #ffffff;
	letter-spacing: 0.5px;
	outline: none;
	box-shadow: none;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

#frmLeadGen input[type="text"]:focus,
#frmLeadGen input[type="tel"]:focus,
#frmLeadGen input[type="email"]:focus {
	border-color: #ffffff;
	background-color: rgba(45, 45, 45, 0.65);
}

#frmLeadGen input[type="text"]::placeholder,
#frmLeadGen input[type="email"]::placeholder,
#frmLeadGen input[type="tel"]::placeholder {
	color: rgba(255, 255, 255, 0.75);
	font-weight: 400;
}

label.checkbox-label {
	font-size: .7rem;
	color: #e8dab2;
}

.cjbc-container {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 1.5rem 0;
	color: #ffffff;
	text-align: left;
}

.cjbc-container input[type="checkbox"] {
	accent-color: #ffffff;
	width: 18px;
	height: 18px;
	margin-top: 2px;
	cursor: pointer;
	flex-shrink: 0;
	border-radius: 2px;
}

.cjbc-container label {
	font-weight: 400;
	font-size: 0.68rem;
	line-height: 1.45;
	color: #ffffff;
	margin: 0;
}

.cjbc-container label a {
	color: #ffffff;
	text-decoration: underline;
}

.submit-btn-wrapper {
	display: flex;
	justify-content: center;
	width: 100%;
	margin-top: 1.5rem;
}

.submitBtnre {
	width: 100%;
	max-width: 32rem;
	background-color: #CCA08B;
	color: #2D2522;
	border: none;
	border-radius: 12px;
	padding: 0.85rem 1.5rem;
	font-weight: 700;
	font-size: 1.1rem;
	cursor: pointer;
	transition: background-color 0.2s ease, opacity 0.2s ease;
	text-align: center;
}

.submitBtnre:hover {
	background-color: #bf917b;
	color: #1a1412;
}

.oveltx {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 18vh;
	object-fit: cover;
	background: #fff;
}
.copyrightcaption {
	cursor: pointer; text-decoration: underline; color: inherit;
	font-size: 0.8rem;
	font-weight: 700;
}
#disclaimerModal .hystmodal__close {
	filter: invert(1);
}
.banner_p {
	background: linear-gradient(to bottom, #f5c4a9, #a87b70);
}
.banner_p h2 {
	font-size: 2.5rem;
	font-weight: 700;
}
.yglow {
	width: 40dvi;
	height: auto;
	object-fit: contain;
	display: block;
	margin: auto;
}
.slantedline1, .slantedline2 {
	display: none;
}
.mod-disc {
	font-size: 0.85rem; line-height: 1.6; text-align: justify; color: #dddddd; max-height: 380px; overflow-y: auto; padding-right: 8px;
}
/* ==========================================================================
   15. MEDIA QUERIES
   ========================================================================== */

/* --- Min-width Queries (Mobile-First) --- */

/* Min-width: 768px */
@media (min-width: 768px) {
	.bgblass-header h2 {
		font-size: 2rem;
		max-width: 20ch;
		text-align: center;
		margin-right: auto;
		display: block;
		margin: auto;
		width: 100%;
		padding: 0;
		padding-top: 2.5rem;
	}
}

/* Min-width: 992px */
@media (min-width: 992px) {
	.bgblass-card-title {
		font-size: 1.1rem;
	}

	.access-cont {
		width: fit-content;
		margin: auto;
		position: relative;
		left: 3.5em;
	}

	.item-box h3 {
		max-width: 30ch;
	}

	.graynite::after {
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		padding-right: 3rem;
		height: 100%;
		border-left: 1px solid #000;
	}
	.intro:before {
	        content: "";
        position: absolute;
        top: 0;
        right: 0;
        padding-right: 3rem;
        height: 100%;
        border-left: 1px solid #000;
}
	.intro:after {
	    content: "";
        position: absolute;
        bottom: 0;
        right: 0;
        padding-top: 3rem;
        /* height: 100%; */
        border-top: 1px solid #000;
        width: 100%;
}

	.bordertop {
		width: 100%;
		border-top: 1px solid #000;
	}
}

/* Min-width: 1025px */
@media screen and (min-width: 1025px) {
	.linedecobtw {
		        width: 54em;
        margin: auto;
        z-index: 2;
        object-fit: contain;
	}

	.maskedglow {
		width: 69em;
	}
	.slantedline1 {
    position: absolute;
    top: 5%;
    width: 3.7vw;
    height: 13vw;
    right: 2%;

}
.slantedline2 {
    position: absolute;
    top: 56%;
    width: 4vw;
    height: 13vw;
    left: 4%;

}
}

/* --- Max-width Queries (Desktop-First) --- */

/* Max-width: 1024px */
@media screen and (max-width: 1024px) {
	.btmNav {
		display: flex;
		justify-content: center;
		align-items: center;
		position: fixed;
		left: 0;
		width: 100%;
		height: auto;
		z-index: 999;
		padding: 1.3em 1em;
		background: transparent !important;
		box-shadow: none !important;
	}

	.btmNav.scrolled {
		background: transparent !important;
		padding: 1em 0.8em !important;
	}

	.navContainer,
	.btmNav.scrolled .navContainer {
		width: 100% !important;
		max-width: 100% !important;
		background: linear-gradient(180deg, #433f41 0%, #262325 100%) !important;
		border: 1px solid rgba(255, 255, 255, 0.12);
		border-radius: 40px !important;
		padding: 0px 16px !important;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
		position: relative;
		margin: 0 auto !important;
		overflow: unset !important;
	}

	.navContainer::before,
	.btmNav.scrolled .navContainer::before {
		display: none !important;
	}

	.btmNav .logo {
		order: 1;
		padding: 0;
		width: auto;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		background: transparent;
	}

	.btmNav .logo img {
		height: 36px;
		width: auto;
		object-fit: contain;
	}

	.btmNav .logo a img {
		width: 8em;
	}

	.regBtn {
		order: 2;
		line-height: normal;
		border: 1.5px solid #cfa385;
		border-radius: 30px;
		background: transparent;
		-webkit-background-clip: initial;
		background-clip: initial;
		-webkit-text-fill-color: #cfa385;
		color: #cfa385;
		padding: 0 6vw;
		text-align: center;
		font-size: 14px;
		font-weight: 700;
		width: auto;
		margin-left: auto;
		margin-right: 12px;
		text-decoration: none;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: all 0.3s ease;
	}

	.regBtn span::before {
		content: none;
	}

	.regBtn span {
		color: #cfa385;
		background: none;
		-webkit-background-clip: initial;
		background-clip: initial;
		-webkit-text-fill-color: #cfa385;
	}

	.dropdown {
		order: 3;
		position: static;
		display: flex;
		align-items: center;
		width: auto;
	}

	.dropbtn {
		background: transparent;
		border: none;
		cursor: pointer;
		display: flex;
		width: auto;
		padding: 4px;
		align-items: center;
		justify-content: center;
		outline: none;
	}

	.dropdown-content {
		display: none;
		position: absolute;
		top: calc(100% + 12px);
		left: 0;
		right: 0;
		width: 100%;
		background-color: #231f20;
		border: 1px solid rgba(255, 255, 255, 0.15);
		border-radius: 20px;
		box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
		padding: 0 0;
		z-index: 1000;
	}

	.dropdown-content a {
		color: #ffffff;
		padding: 12px 24px;
		height: auto;
		text-decoration: none;
		display: block;
		font-size: 13px;
		text-align: center;
		border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	}

	.dropdown-content a:last-child {
		border-bottom: none;
	}

	.dropdown-content a:hover {
		background-color: rgba(207, 163, 133, 0.15);
		color: #cfa385;
	}

	.dropdown-content.showbb {
		display: block !important;
	}

	.pos-fac {
		        height: fit-content;
        border-top: 4px solid #fff;
	}
	.pos-fac h2 {
		padding-top: 2rem;
	}
}

/* Max-width: 991px */
@media (max-width: 991px) {
	.bgblass {
		--slant: 24px;
		--gap: 4px;
		padding: 3rem 1rem;
	}

	.bgblass-grid {
		row-gap: 1.5rem;
	}

	.bgblass-card {
		flex: 0 0 calc(50% + (var(--slant) * 0.5));
		max-width: calc(50% + (var(--slant) * 0.5));
		margin-left: calc(var(--slant) * -1 + var(--gap));
	}

	.bgblass-card:nth-child(1),
	.bgblass-card:nth-child(2) {
		transform: translateX(calc(var(--slant) * 0.3));
	}

	.bgblass-card:nth-child(3),
	.bgblass-card:nth-child(4) {
		transform: translateX(calc(var(--slant) * -0.3));
	}

	.bgblass-card:nth-child(5),
	.bgblass-card:nth-child(6) {
		transform: translateX(calc(var(--slant) * 0.3));
	}

	.bgblass-card-title {
		font-size: 0.82rem;
		margin-top: 0.6rem;
	}

	.block-wrapper {
		width: 90%;
	}

	.sig-feature-card {
		padding: 1.75rem 1.4rem;
		gap: 1.75rem;
	}

	.sig-title {
		font-size: 1.05rem;
	}

	.sig-desc {
		font-size: 0.84rem;
	}

	.pos-fac h2 {
		line-height: 1;
		        font-size: 4vw;
	}

	[data-panel="mapcont"] {
		margin-top: -1.5rem;
	}
	
}

/* Max-width: 767px */
@media (max-width: 767px) {
	.bgblass-subtext p {
		max-width: 38ch;
		margin: auto;
	}
	.getdire {
	flex-direction: column-reverse;
}
	.sig-feature-card {
		padding: 0;
		gap: 0;
	}

	.sig-title {
		font-size: 3.3vw;
	}

	.sig-badge-box {
		margin-bottom: 0;
	}

	.sig-desc {
		        font-size: 2.4vw;
        line-height: 1.2;
        margin-bottom: 1rem;
	}
	.fp-label {
    font-size: 3vw;
	}
	.fp-type-title {
    font-size: 5.3vw;
	}
	.pos-fac h2 span {
		font-size: 3vw;
	}
.fp-subtitle {
	        position: unset;
        font-size: 2.6vw;
}
.fp-spec-label {
    font-size: 2vw;
}
.fp-spec-val {
    font-size: 3vw;
}
.fp-sitemap-box {
    padding: 1rem;
    text-align: center;
    position: absolute;
    top: 22%;
    right: 7%;
}
.fp-tabs-wrapper {
	width: 100%;

}
#disclaimerModal .hystmodal__window {
	width: 100%;
}
.fp-tab {
	        font-size: 2.4vw;
        padding: 2vw 0;
        width: 100%;
}

.gray-card {
    background: #c7c8c9;
    width: 95%;
    height: 100%;
	padding: 2rem 0;
}
	.signature-features-bg .container {
		max-width: 100%;
		padding-left: 1rem;
		padding-right: 1rem;
	}

	.signature-features-bg .row {
		display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 1.2rem;
		gap: 1.25rem !important;
		cursor: grab;
		user-select: none;
	}
.fp-sitemap-img {
    max-height: 50dvi
}
.banner_p h2 {
    font-size: 6vw;

}
	.signature-features-bg .row.is-dragging {
		cursor: grabbing;
		scroll-snap-type: none;
	}

	.signature-features-bg .row > [class*="col-"] {
		flex: 0 0 64%;
		max-width: 100%;
		scroll-snap-align: start;
	}

	.signature-features-bg .row::-webkit-scrollbar {
		height: 0.6em;
		display: block;
	}

	.signature-features-bg .row::-webkit-scrollbar-track {
		background: rgba(35, 31, 32, 1);
		border-radius: 10px;
		border: 0.15em solid #b58e78;
	}

	.signature-features-bg .row::-webkit-scrollbar-thumb {
		background: #ffffff;
		border-radius: 10px;
	}

	.award-img {
		max-width: 100%;
		height: 20dvi;
	}
	.coverimg h3 {
		 font-size: 4vw;
	}
	.coverimg p {
		        font-size: 2.8vw;
        max-width: 30ch;
        margin: auto;
	}

.reg_d .reg-main-title {
	font-size: 8vw;
}
.cjbc-container label {
		font-size: 2.6vw;
}
.submitBtnre, .linkBtn {
	font-size: 3.6vw;
}
#frmLeadGen input[type="text"], #frmLeadGen input[type="tel"], #frmLeadGen input[type="email"] {
	font-size: 3vw;
}
	.item-box h3 {
	        font-size: 3.4vw;
        text-align: center;
        max-width: 34ch;
        margin: auto;
        margin-bottom: 0.3em;

	}

	.item-box p {
		        text-align: center;
        font-size: 3vw;
        max-width: 32ch;
        margin: auto;
        letter-spacing: 0.03em;
        line-height: 1.1;
    
	}
.graynite h2 {
	font-size: 5vw;
}
	.graynite h2 span {
		        font-size: 2.8vw;
        line-height: 2;
	}
	.highway-container {
    max-width: 100%;
}
.main-sub {
         font-size:4vw;
}

.highway-container h3 {
	font-size: 2.8vw;
}
.bgblass-deco {
top: -2%;
}
.pos-fac h2 {
		padding-top: 0;
	}
    .bgblass-card-title {
        font-size: 2.3vw;
	}

	h2, .maplocation h2 , .bgblass-header h2 {
		font-size: 5vw;
	}

	.market-splide {
		padding: 0 2.2rem 0 0.5rem;
		position: relative;
	}

	.marketstat {
		background-image: url(../images/bg-mob.webp);
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
	}

	.market-card {
		display: grid;
		grid-template-columns: auto 1fr;
		grid-template-rows: auto auto;
		column-gap: 1.1rem;
		row-gap: 0rem;
		padding: 0.4rem 0;
		height: auto;
		border-radius: 6px;
		background-color: transparent;
		box-sizing: border-box;
	}

	.market-card-title-box {
		grid-column: 1 / -1;
		width: 100%;
		min-width: unset;
		margin-bottom: 0;
	}

	.market-card-img-box {
		grid-column: 1;
		flex: 0 0 70px;
		width: 70px;
		height: 70px;
		align-self: center;
	}

	.market-ring-svg {
		width: 70px;
		height: 70px;
	}

	.market-card-content {
		grid-column: 2;
		align-self: center;
	}

	.mcc {
		max-width: 100%;
		min-height: 170px;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}

	.market-badge {
		font-size: 4vw;
		font-weight: 700;
		letter-spacing: 0.08em;
		color: #414042;
		margin-bottom: 2px;
	}

	.market-heading {
		font-size: 6.6vw;
		font-weight: 900;
		letter-spacing: 0.04em;
		color: #414042;
		line-height: 1;
	}

	.market-desc {
		font-size: 2.8vw;
		line-height: 1.4;
		font-weight: 400;
		color: #2b2b2b;
		margin-bottom: 1.4rem;
	}

	.market-source {
		font-size: 2.3vw;
		font-weight: 700;
		color: #1a1a1a;
		line-height: 1.3;
	}
	    .bgblass-card:nth-child(1), .bgblass-card:nth-child(2) {
        transform: translateX(calc(var(--slant) * 2.3));
    }
	.bgblass-card:nth-child(3), .bgblass-card:nth-child(4) {
        transform: translateX(calc(var(--slant) * -1.5));
    }
	    .bgblass-card:nth-child(5), .bgblass-card:nth-child(6) {
        transform: translateX(calc(var(--slant) * 2.3));
    }
		.reg_d .reg-sub-title {
		font-size: 3vw;
		letter-spacing: 2px;
	}
	.copyrightcaption {
	font-size: 2.4vw;
}
.cta_register::before {
 
    width: 30dvi;
    height: 2dvi;
    top: -10%;
    right: 0;
   
}
.cta_register::after {
 
    width: 30dvi;
    height: 2dvi;
  
    bottom: -8%;
    left: 0;
   
}

}

/* Max-width: 600px */
@media (max-width: 600px) {
	.mod-disc {
		font-size: 2.5vw;
	}
		.regBtn { 
			font-size: 2.9vw;
		}
		.btmNav .logo a img {
        width: 26vw;
    }
	.dis-card {
		width: 20dvi;
		height: 20dvi;
	}

	.dis-top {
		font-size: 2vw;
		padding: 4px 6px 2px;
	}

	.dis-bottom {
		font-size: 2.7vw;
	}

	main {
		background-image: url(../images/bg-overlay-mob.webp);
	}
	.cta_register {
		font-size: 3vw;
		padding: 0.35rem 1rem;
	}

	.img1 {
		width: 29vw;
	}

	.img2 {
		width: 68vw;
	}

	p, .introcont p {
		font-size: 2.8vw;
	}

	.block-wrapper h1 {
		font-size: 5vw;
	}

	.block-wrapper {
		padding: 1.5rem 0;
		        top: -1em;
        position: relative;
		
	}
	.block-wrapper::before {
		width: 100%;
	}

	.introcont {
		margin-top: -1rem;
	}
	.block-wrapper p {
		font-size: 3vw;
	}

	p strong.cust1 {
		font-size: 3.5vw;
	}

	.pos-deco-stp {
		           width: 51dvi;
        height: auto;
        top: 90dvi;
	}

	.wes-container {
		width: 90%;
		margin: auto;
	}
	.wes-container h2 span {
 font-size: 4vw;
	}


	.maskedglow {
		height: 2em;
		top: -1em;
	}

	.wes-container h2 {
		font-size: 5vw;
	}
	.highway-title {
    font-size: 3vw;
	}
	.highway-sub {
    font-size: 2.8vw;
	}
}

/* Max-width: 576px */
@media (max-width: 576px) {
	.discont {
		justify-content: center;
		gap: 10px;
	}

}

/* Masterplan Glow Overlay Animation */
.glowmap {
	pointer-events: none;
	animation: glowPulse 0.8s ease-in-out infinite alternate;
}

@keyframes glowPulse {
	0% {
		filter: brightness(2) drop-shadow(2px 4px 2px transparent) drop-shadow(2px 4px 2px transparent);
	}
	100% {
	
		filter: brightness(2) drop-shadow(2px 4px 2px yellow) drop-shadow(2px 4px 2px yellow);
	}

}