@import url('https://fonts.googleapis.com/css2?family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap');
@font-face { font-family: 'Fiest Script'; src: url('fonts/FiestScript.woff2') format('woff2'), url('fonts/FiestScript.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; }
@font-face { font-family: 'TT Firs Neue'; src: url('fonts/TTFirsNeue-DmBd.woff2') format('woff2'), url('fonts/TTFirsNeue-DmBd.woff') format('woff'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'TT Firs Neue'; src: url('fonts/TTFirsNeue-Md.woff2') format('woff2'), url('fonts/TTFirsNeue-Md.woff') format('woff'); font-weight: 500; font-style: normal; font-display: swap; }


:root { --primary-navy: #0e1e38; --accent-orange: #f36c21; --accent-magenta: #e91198; --accent-purple: #7b15ff; --accent-yellow: #fba80a;}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {  font-family: "Urbanist", sans-serif; color: var(--text-dark); line-height: 1.6; overflow-x: hidden; background-color: #ffffff; -webkit-font-smoothing: antialiased;}
.handwritten { font-family: 'Fiest Script';  font-weight: normal;}
.tt-Firs {font-family: 'TT Firs Neue';font-weight: 600;font-style: normal; line-height: 1.2;}
.text-yellow { color: var(--accent-yellow);}
.text-deepurple { color: #403f98;}
.text-magenta {color: var(--accent-magenta);}
.text-purple {color: var(--accent-purple);}

/* ------------------------------
Header / Navbar 
------------------------------ */
header { position: absolute; top: 0; left: 0; width: 100%; z-index: 100; padding: 20px 0; background: transparent; }
.navbar-dark, .navbar[data-bs-theme=dark] {--bs-navbar-active-color : var(--accent-yellow);--bs-navbar-color:rgba(255, 255, 255, 0.95);--bs-nav-link-font-size:.75rem;}
.nav-link { text-transform: uppercase; font-family: 'TT Firs Neue'; letter-spacing: 1px; position: relative;}
.navbar-nav .nav-link.active:after, .navbar-nav .nav-link.show:after {content: "";border-bottom: 1px solid var(--accent-yellow);width: 80%;display: block;margin: 3% 10% 0;}

/* ------------------------------
Section 1: Hero
------------------------------ */
.hero { background: #0c102d; color: #ffffff; padding: 140px 0 80px 0; position: relative; }
.pbc-logo-badge { width: 80%;}
.hero-title { font-size: 2.8rem; }
.hero-features {display: flex;gap: 40px;border-top: 1px solid rgba(255, 255, 255, 0.15);padding-top: 25px;justify-content: space-between;}
.feature-item {display: flex;align-items: center;gap: 12px;font-size: 0.9rem;line-height: 1.2; width: fit-content;}
.feature-item i{ font-size: 1.2rem; color: #ffffff; }
.feature-item .ico { width: 20px; height: 20px;}
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
  .pbc-logo-badge { width: 100%;}
  .hero-features { flex-direction: column;}
}

/* Section Header Component */
.section-header { text-align: center; max-width: 790px; margin: 0 auto 50px auto; }
.section-title {font-size: 2.2rem;font-weight: 700;display: inline-flex;align-items: center;column-gap: 10px;font-family: 'TT Firs Neue', sans-serif;}
.title-logo {height: 28px;}


/* ------------------------------
Masterplan Section
------------------------------ */
.masterplan { background: #ffffff; text-align: center;position: relative; overflow: hidden; aspect-ratio: 12/9;}
.masterplan:before{ content: ""; width: 100%; height:33%; position: absolute; top: 0; left: 0; z-index: 1; background:linear-gradient(0deg,rgba(12, 16, 45, 0) 0%, rgba(12, 16, 45, 1) 100%);}
.masterplan:after{ content: ""; width: 100%; height:25%; position: absolute; bottom: 0; left: 0; z-index: 0; background:linear-gradient(0deg,rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);}
.btn-site-plan { display: inline-block; align-items: center; gap: 10px; background: var(--accent-orange); color: #fff; padding: 12px 30px; border-radius: 30px; text-decoration: none; font-weight: 600; position: relative; z-index: 10; box-shadow: 0 4px 15px rgba(243, 108, 33, 0.4); }
.masterplan-aerial-img { position: absolute; left: 0; bottom: 0; z-index: 0; width: 100%;}
.masterplan-img-container {position: absolute;bottom: 13.5%;width: 100%;}

/* Masterplan Location Pin */
.loca-pin-wrapper {display: flex;font-weight: 800;aspect-ratio: 4/1; position: relative; z-index: 1;}
[class*="loc-"] {position: absolute;top: 0;width: 120px;text-align: left;line-height: 1.2;padding-left: 15px;}
[class*="loc-"]:before {content: "";position: absolute;bottom: -2px;left: -2px;width: 5px;height: 5px;border-radius: 50%;display: block;background: #000;}
[class*="loc-"]:after {content: "";width: 1px;height: 100%;background: #000;display: block;position: absolute;left: 0;top: 0;}
[class*="loc-"] span {font-weight: normal;display: block;}
.loc-01 {height: 36%;left: 8%;}
.loc-02 {height: 77%;left: 26%;}
.loc-03 {height: 35%;left: 36%;}
.loc-04 {height: 47%;left: 61%;width: 150px;}
.loc-05 {height: 47%;left: 80%;width: 160px;}
[class*="ftr-"] {position: absolute;display: flex;align-items: start;justify-content: center;width: 2px;}
[class*="ftr-"]:after {content: "";width: 2px;background: #0098ff;display: block;position: absolute;left: calc(50% - 1px);top: 0;bottom: 8px;z-index: -1;}
[class*="ftr-"]:before {content: "";position: absolute;bottom: 0;left: calc(50% - 5px);background: #ffffff;width: 10px;height: 10px;border: 2px solid #0098ff;border-radius: 10px;}
.ftr-01 {height: 57%;left: 10%;top: 122%;}
.ftr-02 {height: 58%;left: 34%;top: 66%;}
.ftr-03 {height: 58%;left: 44.5%;top: 66%;}
.ftr-04 {height: 66%;left: 62%;top: 58%;}
.ftr-05 {height: 61%;left: 90%;top: 120%;}
.ftr-main:after {background: #e91198;}
.ftr-main:before {border: 2px solid #e91198;}
.ftr-main {height: 117%;left: 50%;top: -10%;}
.ftr-main img { width: 150px; height: 150px;}

/* Gooey Button */
.btn-site-plan-wrapper{position:absolute;z-index:1;bottom:6%; left: 50%; transform: translateX(-50%);}
.goo-svg{position:absolute;width:0;height:0}
.btn-gooey {display:inline-flex;align-items:center;padding:var(--gooey-btn-padding);border-radius:50px;background:#fff;color:#fff;box-shadow:0 10px 25px rgba(0,0,0,.4);--gooey-btn-padding:6px;--gooey-text-width:150px;--gooey-arrow-width:48px}
.gooey-layer{position:relative;display:flex;align-items:center;width:210px;height:var(--gooey-arrow-width);border-radius:40px;filter:url('#goo');overflow:hidden; }
.left-pill{position:absolute;left:0;top:0;width:var(--gooey-text-width);height:100%;border-radius:40px;background:linear-gradient(90deg,#f90 0,#b2c927 100%)}
.right-circle{position:absolute;right:0;top:0;width:var(--gooey-arrow-width);height:var(--gooey-arrow-width);border-radius:50%;background:linear-gradient(90deg,#f90 -160%,#b2c927 40%)}
.content-layer{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:space-between;align-items:center;box-sizing:border-box;pointer-events:none;z-index:2}
.btn-text{width: calc(var(--gooey-btn-padding) * 2 + var(--gooey-text-width)); text-align: center; font-weight: 600;}
.btn-arrow{ width: calc(var(--gooey-btn-padding) * 2 + var(--gooey-arrow-width));}


/* SVG outline */
.animated-path {  stroke-dasharray: 4500; stroke-dashoffset: 4500;  animation:  draw-line 5s cubic-bezier(0.4, 0, 0.2, 1) forwards, neon-pulse 3s ease-in-out infinite alternate 3s; }
@keyframes draw-line {
  0% { stroke-dashoffset: 4500; }
  100% { stroke-dashoffset: 0; }
}
@keyframes neon-pulse {
  0% { opacity: 0.7; stroke: #e91198; filter: drop-shadow(0 0 4px #e91198); }
  100% { opacity: 1; stroke: #ff33b4; filter: drop-shadow(0 0 16px #e91198) drop-shadow(0 0 30px #e91198); }
}


/* ------------------------------
New Approach Section
------------------------------ */
.new-approach { padding: 80px 0; background: #fdfdfd; }
.approach-graphic { width: 100%; max-width: 900px; margin: 0 auto; display: block; }
[class*="cmhub-"] {position: absolute;font-weight: 800;padding-left: 10px;width: 160px;line-height: 1.2;}
[class*="cmhub-"]:before {content: "";position: absolute;bottom: -2px;left: -2px;color: #e91198;font-size: 1.5rem;line-height: 1;width: 5px;height: 5px;border-radius: 50%;background: #e91198;}
[class*="cmhub-"]:after {content: "";width: 1px;height: 100%;background: #e91198;display: block;position: absolute;left: 0;top: 0;}
.cmhub-4:before, .cmhub-5:before{left: calc(100% - 2px);}
.cmhub-4:after, .cmhub-5:after {left: 100%;}
.cmhub-6:before, .cmhub-7:before {left: -100px;bottom: unset;top: 12px;}
.cmhub-6:after, .cmhub-7:after {left: -100px;height: 1px;top: 25px;width: 100px;}
[class*="cmhub-"] .badge {background: #403f98;border-radius: 10px;margin-bottom: 10px;}
[class*="cmhub-"] .small {font-size: 0.8em;}
.cmhub-1 {top: 10%;left: 14%;height: 14%;}
.cmhub-2 {top: 5%;left: 29%;height: 22%;}
.cmhub-3 {top: 10%;left: 49%;height: 23%;}
.cmhub-4 {top: 5%;left: calc(76% - 110px);height: 29%;text-align: right;padding-left: 0;padding-right: 10px;width: 110px;}
.cmhub-5 {top: 5%;left: calc(86% - 110px);height: 26%;text-align: right;padding-left: 0;padding-right: 10px;width: 110px;}
.cmhub-6 {top: 68%;left: calc(25% + 100px);height: 10%;}
.cmhub-7 {top: 72%;left: calc(74% + 100px);height: 10%;}

/* Advantages Cards */
.advantages { padding: 80px 0; background: #f8f9fa; }
.slider-container { width: 100%; max-width: 1300px; margin: 0 auto; overflow: hidden; padding: 0px 60px; position: relative; }
.advantages-wrapper { position: relative; display: flex; align-items: center; height: 380px; width: 100%; }
.adv-card { background: #0e1e38; color: #ffffff; border-radius: 20px; padding: 30px 10px 70px; text-align: center; position: absolute; width: calc(20% - 16px); min-width: 200px; height: 240px; cursor: grab; user-select: none; box-shadow: 0 8px 20px rgba(0,0,0,0.15); will-change: transform, opacity; top: 50%; left: 0; margin-top: -160px; }
.adv-title { font-family: 'TT Firs Neue'; font-weight: 600; font-style: normal; line-height: 1.2; font-size: 1.46em; }
.adv-md { font-size: 1.1rem; line-height: 1.2; font-weight: 800; }
.adv-sm { font-size: 0.85rem; line-height: 1.2; font-weight: 600; margin-top: 1.5em; }
.adv-icon-footer { position: absolute; width: calc(100% - 40px); top: calc(100% - 50px); }
.adv-icon-footer img { height: 100px; margin-bottom: -80px; }

/* Navigation Controls */
.nav-btn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; width: 40px; height: 40px; cursor: pointer; outline: none; color: #bfa63b; border: 2px solid transparent; border-radius: 50%; background-image: linear-gradient(white, white), linear-gradient(135deg, #f2a922, #7cb342); background-origin: border-box; background-clip: padding-box, border-box; transition: transform 0.2s ease, opacity 0.2s ease; }
.prev-btn { left: 10px; }
.next-btn { right: 0px; }


/* ------------------------------
Demand Infographic / Path
------------------------------ */
.demand-section {padding: 80px 0;aspect-ratio: 6 / 5;line-height: 1.2;font-weight: 500;height: 100%; position: relative;}
[class*="demand-item-"] {position: absolute;/* transform: translateY(-50%); */}
.demand-item-header {width: 29%;text-align: right;right: 10%;top: 6%;}
/* .demand-item-active { width: 50%; text-align: right; top: 20%; left: 50%; line-height: 1;} */
.demand-item-active-txt {top: 35%;left: 44%;width: 19%;text-align: right;}
.demand-item-active-img-1 {top: 21%;left: 64%;width: 23%;}
.demand-item-active-img-2 {top: 23%;left: 83%;width: 9%;}

/* .demand-item-established { width: 50%; text-align: right; top: 20%; left: 50%; line-height: 1;} */
.demand-item-established-txt {top: 13%;left: 35%;width: 15%;text-align: left;}
.demand-item-established-img-1 {top: 5%;left: 9%;width: 26%;}
.demand-item-established-img-2 {top: 7%;left: 6%;width: 9%;}

/* .demand-item-growing { width: 50%; text-align: right; top: 20%; left: 50%; line-height: 1;} */
.demand-item-growing-txt {top: 60%;left: 27%;width: 15%;text-align: left;}
.demand-item-growing-img-1 {top: 40%;left: 10%;width: 22%;}
.demand-item-growing-img-2 {top: 40%;left: 26%;width: 9%;}

/* .demand-item-branded { width: 50%; text-align: right; top: 20%; left: 50%; line-height: 1;} */
.demand-item-branded-txt {top: 65%;left: 73%;width: 19%;text-align: right;}
.demand-item-branded-img-1 {top: 54%;left: 49%;width: 26%;}
.demand-item-branded-img-2 {top: 55%;left: 47%;width: 8%;}

.demand-curved-txt {font-family: 'Fiest Script';  font-weight: normal; font-size: 2.6rem;}
.demand-svg-01 {position: absolute;left: -2%;top: 27%;}
.demand-svg-02 {position: absolute;left: -2%;top: 71.5%;}


/* ------------------------------
Map Section
------------------------------ */
.map-section { padding: 80px 0 0 0; }
.location-pin { position: absolute; left: 63%; top: 59%; width: 1px; height: 1px; }
.location-pin img { width: 80px; position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 0%); }
.distance-wrapper { position: relative; }
.distance-wrapper::before { content: ''; position: absolute; top: 95px; left: 0; right: 0; height: 1px; background-color: #e0e0e0; z-index: 1; }
.distance-bar { display: flex; align-items: flex-start; overflow-x: auto; position: relative; padding: 60px 0 30px; cursor: grab; user-select: none; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; }
.distance-bar::-webkit-scrollbar { display: none; }
.distance-bar:active { cursor: grabbing; }
.dist-item { flex: 0 0 12.5%; min-width: 130px; display: flex; flex-direction: column; align-items: center; position: relative; z-index: 2; scroll-snap-align: start; scroll-snap-stop: always; --badge-size:60px}
.dist-badge {width: var(--badge-size);height: var(--badge-size);border-radius: 50%;border: 1px solid var(--accent-purple);background-color: #ffffff;color: var(--accent-purple);display: flex;flex-direction: column;justify-content: center;align-items: center;font-weight: bold;line-height: 1.1;transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;cursor: pointer;padding: 12px;text-align: center;font-family:'TT Firs Neue';margin-right: auto;}
.dist-badge span { font-size: 13px; font-weight: bold; }
.dist-item:hover .dist-badge { background-color: #0098ff; border-color: #0098ff; color: #ffffff; }
.dist-name { position: relative; padding-top: 25px; margin-left: calc(var(--badge-size)/2 - 6px); font-size: 13px; line-height: 1.2; font-weight: 600; width: calc(100% - var(--badge-size)/2 - 6px); padding-left: 10px; }
.dist-name::before { content: ''; position: absolute; top: 0; left: 0; width: 1px; height: 100%; background-color: #d1d1d1; }
.dist-name::after { content: ''; position: absolute; bottom: -2px; left: -2px; width: 5px; height: 5px; background-color: #b0b0b0; border-radius: 50%; }


/* Product Showcase (Orange Sections) */
.product-showcase { background: #fca311; background: linear-gradient(135deg, #f36c21 0%, #ff8c00 100%); padding: 60px 0; color: #ffffff; position: relative; margin-bottom: 30px; }
.product-container { display: grid; grid-template-columns: 1fr 1.2fr; gap: 40px; align-items: center; }
.product-title { font-size: 2.2rem; font-weight: 700; line-height: 1.1; margin-bottom: 20px; }
.product-subtitle { font-size: 2.5rem; font-family: 'Caveat', cursive; display: block; }
.product-card-badge { background: #0e1e38; color: #ffffff; border-radius: 8px; padding: 15px; display: inline-block; margin-top: 15px; }
.product-badge-header { font-size: 0.9rem; font-weight: 700; margin-bottom: 10px; text-transform: uppercase; }
.product-specs { display: flex; gap: 15px; }
.spec-box { background: #1e2d4a; padding: 8px 12px; border-radius: 4px; font-size: 0.75rem; }
.spec-box span { display: block; font-weight: 700; font-size: 0.9rem; }
.btn-floorplan { display: inline-flex; align-items: center; gap: 8px; background: #ffffff; color: var(--primary-navy); padding: 8px 16px; border-radius: 20px; font-size: 0.8rem; font-weight: 700; text-decoration: none; margin-top: 15px; }
.product-img { width: 100%; border-radius: 8px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15); }

/* Media / Gallery Links */
.footprint-gallery { padding: 50px 0; display: flex; justify-content: center; gap: 50px; }
.fg-item { display: flex; align-items: center; gap: 15px; font-weight: 700; font-size: 1.2rem; color: var(--primary-navy); text-decoration: none; }
.fg-icon { width: 50px; height: 50px; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.4rem; }
.fg-icon.orange { background: var(--accent-orange); }
.fg-icon.purple { background: var(--accent-purple); }

/* Form Section */
.contact-form-section { background: #f8f9fa; padding: 60px 0; text-align: center; }
.form-title { font-size: 2.2rem; font-weight: 700; margin-bottom: 30px; }
.form-title span { font-family: 'Caveat', cursive; font-size: 2.8rem; }
.contact-form { max-width: 800px; margin: 0 auto; }
.form-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-bottom: 20px; }
.form-control { width: 100%; padding: 12px 15px; border: 1px solid #dddddd; border-radius: 20px; font-size: 0.85rem; outline: none; background: #fff; }
.form-checkbox { display: flex; align-items: flex-start; gap: 10px; font-size: 0.65rem; color: #777; text-align: left; margin-bottom: 20px; }
.btn-submit { background: #5c8435; color: #fff; border: none; padding: 10px 40px; border-radius: 20px; font-weight: 600; cursor: pointer; font-size: 0.9rem; }

/* Sticky Action Buttons Right */
.sticky-actions { position: fixed; right: 20px; bottom: 80px; z-index: 99; display: flex; flex-direction: column; gap: 10px; }
.sticky-btn { padding: 10px 18px; border-radius: 20px; color: #fff; text-decoration: none; font-size: 0.75rem; font-weight: 600; display: flex; align-items: center; gap: 8px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); }
.btn-brochure { background: #b82384; }
.btn-register { background: var(--accent-orange); }
.btn-interested { background: #00b09b; }

/* Footer */
footer { background: var(--primary-navy); color: #ffffff; padding: 60px 0 20px 0; font-size: 0.75rem; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 2fr 1.5fr; gap: 30px; padding-bottom: 40px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.footer-logo { font-weight: 800; font-size: 1.2rem; margin-bottom: 15px; }
.footer-links ul { list-style: none; }
.footer-links a { color: #ccc; text-decoration: none; line-height: 2; }
.footer-socials { display: flex; gap: 10px; margin-top: 15px; }
.social-icon { width: 30px; height: 30px; background: rgba(255, 255, 255, 0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; text-decoration: none; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 20px; color: #888888; }
.footer-bottom-links a { color: #888888; text-decoration: none; margin-left: 15px; }
.scroll-top { position: fixed; right: 20px; bottom: 20px; background: rgba(14, 30, 56, 0.8); color: #fff; width: 35px; height: 35px; border-radius: 50%; display: flex; align-items: center; justify-content: center; text-decoration: none; font-size: 0.8rem; }

/* Responsiveness */
@media (max-width: 992px) {
   .hero-grid, .product-container, .footer-grid { grid-template-columns: 1fr; }
   .advantages-grid { grid-template-columns: repeat(2, 1fr); }
   .form-grid { grid-template-columns: 1fr; }
}