:root {
  --text-gray: #555555;
  --text-black: black;
  --violet: #000039;
  --secondaryColor: var(--red);
  --green: #008293;
  --lightGray: #eeeeee;
  --secondaryFont: "Romie Light", serif;
  --primaryFont: 'rework-regular';
  --dateColor: #666666;
  --textColor: var(--text-black);
  --blush: #cce5fc;
  --black: #282828;
  --gold-gradient: linear-gradient(14.98deg, #967956 9.41%, #FFDD82 29.04%);

  --blue: #000039;
  --white75: rgba(255, 255, 255, 0.75);
  --cardlink-color: var(--violet);
  --pink: #FFE5E3;
  --beige: #FFFFFF;
  --red: #000039;
  --maroon:#000039;
  --primary-bg: #000039;
  --modal-bg:  #FFFFFF;
  
  --mqTabsBackgroundColor: transparent;
  --mqTabsActiveBorderColor: var(--violet);
  --mq-text-color-2: white;
  --mqTabsTabTitleColor: white;
  --mqTabsContentParagraphColor: white;
  --mqTabsContentTitleColor: white;
  --mqTabsContentBorderTopColor: rgba(255,255,255,0.1);

  --header-bg: #5e5452;
  --navigationColor: var(--black);
  --toggleColor: white;

  --mq-text-font-2: 'rework-regular';
  --formFont: 'rework-regular';

  --form-h1-color: white;
  --form-label-color: rgba(255, 255, 255, 0.75);
  --form-btn-Color: var(--violet);
  --form-privacyLink-color: var(--violet);
  --form-btn-bgColor: var(--violet);
  --form-btn-textColor: white;
  --form-btn-radius: 1000px;

  --gap-30px: 30px;
  --gap-40px: 40px;
  

  --mq-overlay-mb: 100px;
  --nav-panel-bg: white;
  --nav-btn-bg-color: var(--red);
  --nav-btn-text-color: white;
  /* --nav-sticky-bg-color: var(--red);
  --nav-sticky-text-color: white; */
  --nav-btn-color-hover: white;
  --nav-btn-text-hover: var(--red);
  --nav-btn-font: var(--secondaryFont);
  --nav-font-size: 10px;
  --nav-text-color: white;
  --nav-font-family: 'Reckless Standard M', sans-serif;
  --nav-font-weight: 400;
  --nav-line-height: normal;
  --nav-mirvac-space: 170px;
  --nav-space-btn: 170px;
  --nav-btn-padding: 12px 50px;
  --navigationMegaLinkColor: var(--nav-text-color);
  --nav-spacing-between: 12px;
  --navigationMegamenuToggleColor: var(--nav-text-color);
  --switch-nav-mobile-bg: white;

  --nav-bg-color: black;
  --navigationColor: #5e5452;
  --navigationMobileColor: #5e5452;
  --navigationMegaLinkColor: var(--nav-text-color);
  --nav-text-transform: capitalize;
  --navigationRegisterSquareBackgroundFontColor: var(--nav-bg-color);
  --nav-logo-width: 178px;
  --nav-logo-height: 44px;
  --nav-sticky-border-color: var(--nav-sticky-bg-color);
  --navigationMegamenuToggleColor: var(--nav-text-color);
  --nav-space-btn: 180px;
  --switch-nav-mobile-bg: white;
  --nav-childlist-color: var(--black);
  --propertyEnquireButtonBackgroundColor: var(--nav-btn-bg-color);
  --accordion-icon: url('data:image/svg+xml,<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="22" height="22" rx="11" fill="white"/><path d="M11 4V18" stroke="%23000039" stroke-width="1.5"/><path d="M18 11L4 11" stroke="%23000039" stroke-width="1.5"/></svg>');
  --accordion-icon-open: url('data:image/svg+xml,<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="22" height="22" rx="11" fill="white"/><path d="M16 11L6 11" stroke="%23000039" stroke-width="2"/></svg>');
  --accordion-color: transparent;
  --overlap-size: 188px;
  --overlap-margin: -188px;
  --overlap-size-mb: 74px;
  --overlap-margin-mb: -74px;
  --cb-spacing-inline: 80px;
  --cb-spacing-inline-small: 83px;
  --cb-spacing-block: 90px;
  --cb-spacing-inline-mb: 20px;
  --cb-spacing-between: 30px;
  --cb-spacing-block-mb: 40px;
  --headingOneFontSize: 36px;
  --pargraphFontSize: 16px !important;
  --ulMobileFontSize: var(--pargraphFontSize) !important;

  --fontWeight-bold: 500;
  --primary-btn-bg-color: var(--violet);
  --primary-btn-text-color: white;
  --primary-btn-weight: 500;
  --primary-btn-padding: 24px;

  --ap-carousel-arrow: url('data:image/svg+xml,<svg width="12" height="20" viewBox="0 0 12 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2 2L9.92929 9.92929C9.96834 9.96834 9.96834 10.0317 9.92929 10.0707L2 18" stroke="%23E61E3F" stroke-width="3" stroke-linecap="round"/></svg>');
  --ap-borderColor: rgba(230, 30, 63, 0.3);
  --FooterBackgroundColor: black;
  --concept-slide-title-color: var(--green);
  --primaryPropertyColor: var(--violet);
  --alphabetCarouselHeadingThreeSize: 22px;
  --pf-borderColor: var(--violet);
  --tab-bg-color: var(--text-black);
  --cb-heading-font: var(--secondaryFont);

  --carousel-active: var(--red);
  --spacing-mb: 80px;
  --form-input-color: transparent;
  --maxWidth: 1200px;
  --spacing-block: 80px;
  --spacing-60: 60px;

  --concept-hover-bg: transparent;

  --input-color: rgba(255, 255, 255, 0.75);
}
@media(min-width: 1600px){
   --maxWidth: 1500px;
}
.max-width-container{
  max-width: var(--maxWidth);
  margin-inline: auto;
}
@media(max-width: 1000px){
  :root{
    --spacing-block: 60px;
    --spacing-60: 40px;
  }
  .max-width-container{
    max-width: calc(100% - 40px);
    margin-inline: 20px;
  }
}
.padding-block{
  padding-block: var(--spacing-block);
}
.padding-top-80{
  padding-block: var(--spacing-block);
}
.padding-bottom-80{
  padding-block: var(--spacing-block);
}
.padding-bottom-60{
  padding-bottom: var(--spacing-60);
}
.padding-top-60{
  padding-top: var(--spacing-60);
}
.resi-property-booking,
.property-detail__content {
  --primaryColor: var(--primaryPropertyColor);
}
div.resi-property-search-filter {
  --filter-secondary-color: var(--violet);
  --primaryColor: white;
  --filter-primary-color: white;
}

div.resi-property-search-filter .filter-buttons .button--advanced-filters{
  --filter-primary-color: var(--red);
  color: white;
}

div.react-tabs__tab-panel {
  --primaryColor: violet;
}

.react-tabs .card__tag {
  --primaryColor: var(--violet);
  --primaryContrast: white;
}

@font-face {
  font-family: 'Reckless Standard M';
  src: url('Fonts/RecklessStandardM-Regular.woff') format('woff'),
  url('Fonts/RecklessStandardM-Regular.woff2') format('woff2');
}

@font-face {
  font-family: "rework-regular";
  src: url('Fonts/rework-regular.ttf') format('truetype');
}

@font-face {
  font-family: "Romie Light";
  src: url('Fonts/Romie-Light.woff2') format('woff2'),
  url('Fonts/Romie-Light_2.woff') format('woff');
}

h1,h2,h3,h4 {
  font-family: "Romie Light" !important;
}

p,a {
  font-family: "rework-regular" !important;
}

h1,h2 {
  font-style: normal;
  font-weight: 300 !important;
  line-height: 120%;
  text-transform: unset;
  margin: unset;
}

body h1,
body h2 {
  font-weight: 300;
  font-style: Light;
  font-size: 36px;
  line-height: 42px;
  letter-spacing: 0%;

}


main .image a {
  pointer-events: none;
}

p,h5 {
  font-size: 14px;
  font-weight: 45;
  line-height: 24px;
  text-transform: unset;
}

@media (max-width: 992px) {
  p,h5 {
    font-size: 12px;
    font-weight: 55;
  }
}

h5 {
  margin-bottom: 8px;
}

p {
  margin-block: 24px;
}

.cookiebar {
  display: none !important;
}

main a,
header a {
  width: 100%;
}

.quality-carousel .promo .field-promolink {
  background: transparent;
}
#content {
  margin-top: 0px !important;
}

.mq-tabs__container,
.carousel-container,
footer {
  z-index: 3;
  position: relative;
}

footer {
  background-color: #000000;
}
.megamenu__list .cta-square a {
  border-radius: 6px;
}

.bg-gray {
  background-color: var(--gray) !important;
}
.bg-white{
  background-color: white !important;
}

.bg-red-z p,
.bg-red-z h1,
.bg-red-z h2,
.bg-red-z h3,
.bg-red-z h4,
.bg-red-z h5,
.explore-bg h1{
  color: white;
}

.full-width__image img {
  width: 100%;
}

main {
  margin-top: 60px;
}

@media (max-width: 992px) {
  .mobile-centered {
    margin-inline: auto;
  }
}

/* ===== PromoNav (amenity navigation) ===== */

/* The nav sits alone in its own column (.col-sm-12), which is exactly its own
   height - so position:sticky has no room to travel. Instead the component's JS
   adds `promo-fixed` once the nav reaches the offset below, then pins it there so
   it follows you (and stops short of the fixed site header instead of overlapping
   the component above). Tune `--promo-sticky-top` to match your header height. */
.g-menu-container .g-menu-wrapper {
  --promo-sticky-top: 120px;
}
.g-menu-container .g-menu-wrapper.promo-fixed {
  position: fixed;
  top: var(--promo-sticky-top, 0px);
  z-index: 122;
}

/* 2-column placeholder layout: nav on the left, promo content on the right.
   Here the nav and content share a tall parent (.promo-nav), so real
   position: sticky works - the left column follows as you scroll. */
.promo-nav {
  display: flex;
  align-items: flex-start;
  gap: 60px;
}
.promo-nav .g-menu-wrapper {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  flex: 0 0 240px;
  align-self: flex-start;
}
.promo-nav .promo-container {
  flex: 1 1 auto;
  min-width: 0;
}
.promo-nav .promo-section {
  scroll-margin-top: var(--promo-sticky-top, 120px);
}
@media (max-width: 1024px) {
  .promo-nav {
    flex-direction: column;
    gap: 0;
  }
  .promo-nav .g-menu-wrapper {
    position: static;
    width: 100%;
    flex: none;
  }
}

/* Desktop: vertical (flex-col) list with gold active indicator */
@media (min-width: 1025px) {
  .promo-fixed .g-menu-ul,
  .g-menu-wrapper.promo-fixed {
    position: sticky;
    top: 100px;
  }
  .g-menu-container ul.responsive-visible {
    display: none;
  }
  .g-menu-container ul.g-menu-ul {
    display: flex;
    flex-direction: column;
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: left;
    background: transparent;
  }
  .g-menu-container ul.g-menu-ul li {
    display: block;
    width: 100%;
    padding: 0;
  }
  .g-menu-container ul.g-menu-ul li a,
  .g-menu-container ul.g-menu-ul li a:hover,
  .g-menu-container ul.g-menu-ul li a:focus {
    position: relative;
    display: block;
    padding: 14px 10px;
    color: var(--color-black);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 13px;
    text-decoration: none;
  }
  .g-menu-container ul.g-menu-ul li a:hover{
    opacity: 0.85;
  }
  /* Gold gradient bar on the active item */
  .g-menu-container ul.g-menu-ul li a.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 16px;
    background: var(--gold-gradient);
  }
}

/* Mobile: collapsed dropdown toggled by the placeholder */
@media (max-width: 1024px) {
  .g-menu-container ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .g-menu-container ul.responsive-visible {
    display: block;
  }
  .g-menu-container ul.responsive-visible li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 13px;
    text-decoration: none;
  }
  /* Replace the component's inline chevron with the gold gradient arrow */
  .g-menu-container ul.responsive-visible li a .arrow svg {
    display: none;
  }
  .g-menu-container ul.responsive-visible li a .arrow {
    display: inline-block;
    width: 16px;
    height: 10px;
    margin-left: 12px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url('data:image/svg+xml,<svg width="16" height="10" viewBox="0 0 16 10" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 1L7.92474 8.91399C7.96458 8.95952 8.03542 8.95952 8.07526 8.91399L15 1" stroke="url(%23promonav_arrow)" stroke-width="2" stroke-linecap="round"/><defs><linearGradient id="promonav_arrow" x1="1.18667" y1="-0.416666" x2="15.5096" y2="0.478331" gradientUnits="userSpaceOnUse"><stop stop-color="%23A28461"/><stop offset="0.302885" stop-color="%23FFD14C"/><stop offset="0.524038" stop-color="%23FFD356"/><stop offset="0.716346" stop-color="%23FFD14C"/><stop offset="1" stop-color="%23A28461"/></linearGradient></defs></svg>');
  }
  .g-menu-container ul.g-menu-ul {
    display: none;
    position: absolute;
    z-index: 50;
    width: 100%;
    flex-direction: column;
    margin: 0;
    padding: 4px 0;
    background: #1c1c1c;
  }
  .g-menu-container ul.g-menu-ul li {
    display: block;
    width: 100%;
  }
  .g-menu-container ul.g-menu-ul li:not(:last-child) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
  .g-menu-container ul.g-menu-ul li a {
    display: block;
    padding: 12px 20px;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 13px;
    text-decoration: none;
  }
  .g-menu-container ul.g-menu-ul li a.active {
    color: #ffd356;
  }
}

/* ===== NavigationMenu variant - full-screen hamburger overlay ===== */

/* The open menu fills the screen: dark gradient base + blurred building photo + gold animation. */
.megamenu--menu.is-opened .megamenu__list {
  position: fixed;
  inset: 0;
  z-index: 200;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin: 0;
  padding: 150px 20px;
  list-style: none;
  overflow-y: auto;
  background: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(27, 27, 27, 1) 100%);
  /* Quick fade-in so the overlay eases in instead of snapping open. */
  animation: hsv-menu-fade-in 0.25s ease-out;
}

@keyframes hsv-menu-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Blurred header background photo, faint over the gradient. */
.megamenu--menu.is-opened .megamenu__list::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('images/bg/header-bg.jpg');
  background-size: cover;
  background-position: center;
  filter: blur(8px);
  opacity: 0.35;
  z-index: 0;
}

/* Keep the menu items above the background layers. */
.megamenu--menu.is-opened .megamenu__list > .megamenu__item {
  position: relative;
  z-index: 1;
  list-style: none;
  text-align: center;
  margin: 0;
  padding: 0;
}


/* Item: large Romie Light title + small uppercase subtitle (the <p> from the rich NavigationTitle). */
.megamenu--menu .megamenu__link--rich {
  display: block;
  padding: 8px 0;
  text-decoration: none;
  color: #ffffff;
  font-family: 'Romie Light', serif;
  font-weight: 300;
  font-size: 28px;
  line-height: 1.2;
  transition: color 0.2s ease;
}
.megamenu--menu .megamenu__item:hover > .megamenu__link--rich,
.megamenu--menu .megamenu__link--rich:hover,
.megamenu--menu .megamenu__link--rich:focus {
  color: #ffd356;
}
.megamenu--menu .megamenu__link--rich p {
  margin: 8px 0 0;
  font-family: 'rework-regular', sans-serif;
  font-size: 12px;
  font-weight: 45;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
}

/* When open, float the toggle above the overlay so it can close the menu. */
.megamenu--menu.is-opened .megamenu__toggle {
  position: fixed;
  top: 40px;
  left: 40px;
  right: unset;
  z-index: 210;
}
@media(max-width: 1119px){
  .megamenu--menu.is-opened .megamenu__toggle {
    top: 35px;
    left: 0;
  }
}
header:has(.megamenu--menu.is-opened) .nav-phase-3 .image{
  z-index: 99999;
}

header .link-list ul:has(.btn-bordered){
  justify-content: flex-end;
}

.btn-bordered{
  border: 1px solid transparent;
  border-radius: 9999px;
  background:
    linear-gradient(#000, #000) padding-box,
    linear-gradient(91.8deg, #967956 3.98%, #FFDD82 56.1%, #967956 99.76%) border-box;
  padding: 7px 22px;
  font-weight: 126;
  font-size: 12px;
  line-height: 20px;
  text-align: center;
  text-transform: uppercase;
}
.btn-bordered.arrow,
.btn-bordered.transparent {
  background-color: transparent;
  border: none;
  color: #967956;                
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='48' viewBox='0 0 140 48' fill='none' preserveAspectRatio='none'%3E%3Crect x='0.5' y='0.5' width='139' height='47' rx='23.5' stroke='url(%23btnGold)'/%3E%3Cdefs%3E%3ClinearGradient id='btnGold' x1='3.03' y1='0' x2='142.87' y2='12.78' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0.019' stop-color='%23967956'/%3E%3Cstop offset='0.553' stop-color='%23FFDD82'/%3E%3Cstop offset='1' stop-color='%23967956'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: fit-content;
  gap: 20px;
  padding: 13px 35px;

  /* 
  background:
    linear-gradient(91.8deg, #967956 3.98%, #FFDD82 56.1%, #967956 99.76%) border-box;

 
  -webkit-mask:
    linear-gradient(#fff 0 0) padding-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;           
          mask-composite: exclude;    */

}
.btn-bordered.arrow{
  font-weight: 500;
  font-size: 16px;
  leading-trim: NONE;
  line-height: 22px;
  letter-spacing: 0%;
  text-align: center;
  text-transform: uppercase;
}
.btn-bordered.transparent {
  font-family: var(--primaryFont);
  font-weight: 126;
  font-style: Semibold;
  font-size: 16px;
  line-height: 22px;
  text-align: center;
  text-transform: uppercase;
  justify-content: center;
}



.full-width,
.full-width img{
  width: 100vw;
}

/* ===== Concept Carousel — full-width-carousel (VariableSlides variant) =====
   Full-bleed image carousel: centred title on top, gold gradient prev/next
   arrows, white pagination dots at the bottom. */
.concept-carousel.full-width-carousel{
  padding: 0;
  margin: 0;
  background: transparent;
  margin-bottom: -52px;
}
.concept-carousel.full-width-carousel .component-content{
  position: relative;       /* anchor for the overlaid title */
  max-width: 100%;
  padding: 0;
  margin: 0;
}
.concept-carousel.full-width-carousel .concept-carousel__slides{
  position: relative;
  margin: 0;
}
.concept-carousel.full-width-carousel .concept-carousel__slide-image::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 55.13%);
}
.concept-carousel.full-width-carousel .tns-outer{
  position: relative;       /* anchor for arrows + dots */
}
.concept-carousel.full-width-carousel .concept-carousel__slide-image img{
  display: block;
  width: 100%;
  height: auto;
}

/* Title overlaid at the top, centred, white */
.concept-carousel.full-width-carousel .concept-carousel__title{
  position: absolute;
  top: 28px;
  left: 0;
  right: 0;
  z-index: 10;
  margin: 0;
  max-width: 100%;
  text-align: center;
  color: #fff;
  pointer-events: none;
}

/* Gold circular arrows (same gold-arrow.svg as the HoverCarousel variant),
   vertically centred on the image. The SVG points left, so flip it for next. */
.concept-carousel.full-width-carousel .tns-controls button{
  position: absolute;
  top: 50%;
  width: 54px;
  height: 54px;
  padding: 0;
  border: none;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url('/harbourside-vip/images/icons/gold-arrow.svg');
  text-indent: -99999px;
  overflow: hidden;
  cursor: pointer;
  z-index: 10;
}
.concept-carousel.full-width-carousel .tns-controls button:first-child{
  left: 24px;
  transform: translateY(-50%);
}
.concept-carousel.full-width-carousel .tns-controls button:last-child{
  right: 24px;
  transform: translateY(-50%) scaleX(-1);
}
.concept-carousel.full-width-carousel .tns-controls button:hover{
  opacity: 0.85;
}
.concept-carousel.full-width-carousel .concept-carousel__slide{
  position: relative;
}
.concept-carousel.full-width-carousel .tns-slide-active .concept-carousel__slide-content{
    position: absolute;
    top: 20px;
    left: 50%;
    right: 50%;
    transform: translateX(-50%);
    width: 100%;
    color: white;
}

.concept-carousel.full-width-carousel .tns-slide-active .concept-carousel__slide-content h1{
  font-weight: 300;
      font-style: Light;
      font-size: 32px;
      line-height: 38px;
      letter-spacing: 0%;
      text-align: center;

}
/* White pagination dots at the bottom */
.concept-carousel.full-width-carousel .tns-nav{
  display: block;
  position: absolute;
  bottom: 80px;
  left: 0;
  right: 0;
  z-index: 10;
  margin: 0;
  text-align: center;
}
.concept-carousel.full-width-carousel .tns-nav button{
  width: 9px;
  height: 9px;
  margin: 0 5px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  transition: background-color .2s ease;
}
.concept-carousel.full-width-carousel .tns-nav button.tns-nav-active{
  background: #fff;
}

/* Hide the numeric nav for this variant */
.concept-carousel.full-width-carousel .concept-carousel__nav-numbers{
  display: none;
}