/* ===========================================================
   AVHAD BAYLINE RESIDENCES — brand theme
   Brochure palette: warm ivory paper, deep navy ink, gold accents.
   Loaded after style.css — colour, type and motion only. No layout changes.
   =========================================================== */

@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600&family=Jost:wght@300;400;500;600&family=Lora:ital,wght@0,400;0,500;1,400&display=swap");

:root {
  /* paper */
  --ivory: #f7f3e8;
  --ivory-50: #fcfaf4;
  --ivory-200: #eee8d9;
  --ivory-300: #e3dbc8;

  /* ink */
  --ink: #16283c;
  --ink-soft: #3c4b5c;
  --ink-mute: #6b7886;

  /* navy (accent bands only) */
  --navy-900: #091525;
  --navy-800: #0f2138;
  --navy-700: #16304f;

  /* gold */
  --gold-100: #f1e4c3;
  --gold-200: #e8d39c;
  --gold-300: #ddba6e;
  --gold-400: #c9a24c;
  --gold-500: #96712a;

  /* remap the base stylesheet's tokens */
  --primary: var(--gold-500);
  --primary-pink: var(--gold-400);
  --dark: var(--ink);
  --dark-blue: var(--navy-800);
  --text-color: var(--ink-soft);
  --text-color-2: var(--ink-soft);
  --text-dark: var(--ink-soft);
  --light: #ffffff;

  /* typography */
  --display: "Cormorant Garamond", "Times New Roman", serif;
  --body: "Jost", "Montserrat", system-ui, sans-serif;   /* labels, nav, buttons */
  --prose: "Lora", "Cormorant Garamond", Georgia, serif; /* paragraphs and content */
  --body-font: var(--body);
  --Montserrat: var(--body);

  --ease-lux: cubic-bezier(0.22, 1, 0.36, 1);
}

html { scroll-behavior: smooth; }

body {
  background-color: var(--ivory);
  color: var(--ink-soft);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--gold-300); color: var(--navy-900); }
body::-webkit-scrollbar-thumb { background-color: var(--gold-400); }
body::-webkit-scrollbar-track { background-color: var(--ivory-200); }

/* ===========================================================
   TYPOGRAPHY
   =========================================================== */
.section-heading .section-title {
  font-family: var(--body);
  color: var(--gold-500);
  letter-spacing: 0.34em;
  font-size: 0.78rem;
  font-weight: 500;
  text-transform: uppercase;
}
.section-heading .section-title::after {
  content: "";
  display: block;
  width: 54px;
  height: 1px;
  margin-top: 0.7rem;
  background: linear-gradient(90deg, var(--gold-400), rgba(201, 162, 76, 0));
}
.section-heading .text-center.section-title::after {
  margin-inline: auto;
  background: linear-gradient(90deg, rgba(201, 162, 76, 0), var(--gold-400), rgba(201, 162, 76, 0));
}

.section-heading .section-subtitle,
.config-about-txt .config-title,
.contact-title,
.thankyou-title,
.banner-overlay-txt .banner-overlay-title,
.form-title {
  font-family: var(--display);
  font-weight: 400;
  color: var(--ink);
  letter-spacing: 0.008em;
  line-height: 1.2;
}

.section-heading .section-desc,
.config-about-txt .config-subtitle,
.form-subtitle,
.thankyou-subtitle,
.disc,
.acc-location,
.more-info-txt,
footer p {
  color: var(--ink-soft);
  font-family: var(--prose);
  font-weight: 400;
  line-height: 1.82;
  letter-spacing: 0.002em;
}

/* reading sizes, lifted */
.section-heading .section-desc { font-size: 1.18rem; }
.config-about-txt .config-subtitle { font-size: 1.06rem; line-height: 1.75; }
.more-info-txt { font-size: 1.02rem; }
.acc-place { font-size: 1.05rem; }
.form-subtitle { font-size: 1.02rem; }
.thankyou-subtitle { font-size: 1.12rem; }
.disc { font-size: 1.02rem; }
footer p { font-size: 1.02rem; }
.form-subtitle { -webkit-text-stroke-width: 0; }

/* ===========================================================
   HEADER — a solid navy bar, dark + gold at every scroll position
   =========================================================== */
/* flat, fully opaque navy at every scroll position — transparent over the
   pale hero sky left the nav links unreadable, and the old scrolled gradient
   faded to 0.78 alpha at the bottom so the ivory sections washed it out */
header.header-container {
  background: var(--navy-800);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom: 1px solid rgba(201, 162, 76, 0.28);
}

header.scrolled {
  background: var(--navy-800);
}

.logo { gap: 0.75rem; }
.logo-img-1 { width: 30px; }
.logo-img-2 { width: 88px; }
.scrolled .logo-img-1 { width: 27px; }
.scrolled .logo-img-2 { width: 80px; }
.logo img {
  max-height: 56px;
  object-fit: contain;
}
.scrolled .logo img { max-height: 51px; }

.navLinks .navLink {
  font-family: var(--body);
  font-size: 0.8rem;
  letter-spacing: 0.17em;
  font-weight: 400;
  color: #ffffff;
  transition: color 0.45s var(--ease-lux);
}
.navLinks .navLink:hover { color: var(--gold-200); }
.navLinks .navLink::after {
  height: 1px;
  bottom: -8px;
  background: linear-gradient(90deg, transparent, var(--gold-300), transparent);
}

/* navbar call-to-action — white, so it reads as the one action on the hero */
.navbar-container .primary-button .btnPrimary { color: var(--navy-900); font-weight: 500; }
.navbar-container .primary-button .btnPrimary::after {
  background: url("../assets/images/icons/btn-white.png") no-repeat center center/contain;
}
.navbar-container .primary-button .btnPrimary:hover { filter: brightness(1); }

/* off-canvas is a light panel */
.offcanvas { background: var(--ivory) !important; }
.offcanvas.offcanvas-end .offcanvas-header { border-bottom: 1px solid rgba(201, 162, 76, 0.3); }
.offcanvas-logo .logo-img img { content: url("../assets/images/logo/logo-dark.png"); }
.offcanvas-close i { color: var(--ink); }
.offcanvas-link {
  color: var(--ink);
  letter-spacing: 0.12em;
  font-size: 0.92rem;
  transition: color 0.4s var(--ease-lux), padding-left 0.4s var(--ease-lux);
}
.offcanvas-link:hover { color: var(--gold-500); padding-left: 0.5rem; }
.offcanvas-links .line, .line { background-color: rgba(22, 40, 60, 0.12); }

/* ===========================================================
   BUTTONS — navy primary, gold secondary
   =========================================================== */
.btnPrimary {
  font-family: var(--body);
  font-size: 0.86rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--ivory);
  overflow: hidden;
  transition: transform 0.5s var(--ease-lux), filter 0.5s var(--ease-lux);
}
.btnPrimary.light { color: var(--navy-900); font-weight: 500; }
.btnPrimary::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, transparent 22%, rgba(255, 255, 255, 0.4) 50%, transparent 78%);
  transform: translateX(-125%);
  transition: transform 0.9s var(--ease-lux);
  pointer-events: none;
}
.btnPrimary:hover { transform: translateY(-2px); filter: brightness(1.07); }
.btnPrimary:hover::before { transform: translateX(125%); }
.btnPrimary:active { transform: translateY(0); }

/* ===========================================================
   FORMS — ivory card, navy ink
   =========================================================== */
.overview-form {
  padding: 3.5rem 2.5rem 3rem 2.5rem;
  background-size: 100% 100%;
  transition: transform 0.7s var(--ease-lux), filter 0.7s var(--ease-lux);
  filter: drop-shadow(0 22px 48px rgba(22, 40, 60, 0.14));
}
.overview-form:hover { transform: translateY(-6px); filter: drop-shadow(0 30px 60px rgba(22, 40, 60, 0.2)); }
.overview-form form { width: 84%; }

.form-title {
  font-size: 1.6rem;
  margin: auto auto 1.15rem auto;
  text-align: center;
  color: var(--ink);
}
.form-subtitle { text-align: center; margin-bottom: 0.75rem; }

.custom-input {
  color: var(--ink);
  font-family: var(--body);
  font-weight: 400;
  letter-spacing: 0.08em;
  background-color: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(22, 40, 60, 0.18);
  transition: border-color 0.45s var(--ease-lux), background-color 0.45s var(--ease-lux), box-shadow 0.45s var(--ease-lux);
}
.custom-input:focus {
  color: var(--ink);
  background-color: #fff;
  border: 1px solid var(--gold-400);
  box-shadow: 0 0 0 3px rgba(201, 162, 76, 0.18);
}
.custom-input::placeholder { color: rgba(107, 120, 134, 0.85); }
.custom-input::-webkit-input-placeholder { color: rgba(107, 120, 134, 0.85); }

.form-check-label, .checkbox-label { color: var(--ink-mute); font-size: 0.86rem; line-height: 1.6; }
.form-check-input[type="checkbox"] { background-color: #fff; border-color: rgba(22, 40, 60, 0.3); }
.form-check-input:checked { background-color: var(--gold-500); border-color: var(--gold-500); }
.form-check-input:focus { box-shadow: 0 0 0 3px rgba(201, 162, 76, 0.2); border-color: var(--gold-400); }
.invalid-feedback { color: #b4433f; }
.form-loader { border-top-color: var(--ivory); }

/* ===========================================================
   CONFIGURATION
   =========================================================== */
/* the unselected pill used to be a near-invisible 0.18-alpha outline on
   ivory, so the pair never read as a toggle — it now carries a gold rule,
   a white fill and a lift, and the selected one adds a gold halo */
.config-nav .custom-nav .nav-item .nav-link {
  color: var(--ink);
  font-family: var(--body);
  letter-spacing: 0.16em;
  font-size: 0.82rem;
  font-weight: 500;
  padding: 0.7rem 2.35rem;
  background: #fff;
  border: 1px solid rgba(201, 162, 76, 0.55);
  box-shadow: 0 8px 18px -14px rgba(22, 40, 60, 0.6);
  transition: all 0.45s var(--ease-lux);
}
.config-nav .custom-nav .nav-item .nav-link:hover {
  color: var(--ink);
  border-color: var(--gold-400);
  box-shadow: 0 12px 24px -14px rgba(22, 40, 60, 0.55);
  transform: translateY(-2px);
}
.config-nav .custom-nav .nav-item .nav-link.active {
  color: var(--ivory);
  background: linear-gradient(100deg, var(--navy-700), var(--navy-900));
  border-color: var(--gold-400);
  box-shadow: 0 16px 30px -14px rgba(15, 33, 56, 0.8),
              0 0 0 3px rgba(201, 162, 76, 0.24);
  transform: translateY(-2px);
}

.config-about { transition: transform 0.7s var(--ease-lux); }
.config-about:hover { transform: translateY(-6px); }
.config-about-txt .config-title { font-size: 1.8rem; }


.config-about-img {
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(22, 40, 60, 0.1);
  transition: border-color 0.6s var(--ease-lux), box-shadow 0.6s var(--ease-lux);
}
.config-about-img img { transition: transform 1.1s var(--ease-lux); }
.config-about-img:hover { border-color: rgba(201, 162, 76, 0.65); box-shadow: 0 26px 56px -32px rgba(22, 40, 60, 0.45); }
.config-about-img:hover img { transform: scale(1.04); }

/* ===========================================================
   AMENITIES
   =========================================================== */
.amenities-img { overflow: hidden; }
.amenities-img img { transition: transform 1.4s var(--ease-lux); }
.amenities-swiper-2 .swiper-slide:hover .amenities-img img { transform: scale(1.06); }
.amenities-img::after {
  background: linear-gradient(0deg, rgba(9, 21, 37, 0.9) 0%, rgba(9, 21, 37, 0.18) 55%, rgba(9, 21, 37, 0) 100%) !important;
}
.amenities-txt span { color: #fff; font-family: var(--body); letter-spacing: 0.06em; }
.amenities-swiper-2 .swiper-slide.swiper-slide-active .amenities-txt span { color: var(--gold-200); }
.amenities-swiper-2 .swiper-slide.swiper-slide-active .amenities-img {
  box-shadow: 0 30px 66px -34px rgba(22, 40, 60, 0.55);
}

.swiper-button-container .swiper-nav .swiper-button {
  border-radius: 100px;
  transition: transform 0.5s var(--ease-lux), box-shadow 0.5s var(--ease-lux);
}
.swiper-button-container .swiper-nav .swiper-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px -14px rgba(15, 33, 56, 0.8);
}

/* ===========================================================
   GALLERY
   =========================================================== */
.custom-nav-tabs .custom-nav-link {
  color: var(--ink-soft);
  font-family: var(--body);
  letter-spacing: 0.16em;
  font-size: 0.82rem;
  transition: color 0.45s var(--ease-lux);
}
.custom-nav-tabs .custom-nav-link:hover { color: var(--ink); }
.custom-nav-tabs .custom-nav-link.active {
  color: var(--ivory) !important;
  background: linear-gradient(100deg, var(--navy-700), var(--navy-900)) !important;
  border-color: var(--navy-800) !important;
}

.gal_image { overflow: hidden; }
.gal_image img { transition: transform 1.3s var(--ease-lux); }
.gal-carousel .owl-item.active.center .gal_image:hover img { transform: scale(1.05); }
.section-gallery .overtext { color: #fff; font-family: var(--display); }
.gal-carousel .owl-nav button {
  background: transparent !important;
  transition: transform 0.5s var(--ease-lux);
}
.gal-carousel .owl-nav button:hover { transform: scale(1.08); }

/* ===========================================================
   LOCATION — a set of quiet index cards, distances set like a price list
   =========================================================== */
.location-accordion { margin-top: 2.25rem; }

.location-accordion .accordion-item {
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(22, 40, 60, 0.08);
  border-radius: 2px;
  margin-bottom: 0.85rem;
  overflow: hidden;
  transition: border-color 0.6s var(--ease-lux), background-color 0.6s var(--ease-lux),
    box-shadow 0.6s var(--ease-lux);
}
.location-accordion .accordion-item:hover {
  border-color: rgba(201, 162, 76, 0.45);
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0 16px 40px -28px rgba(22, 40, 60, 0.45);
}
.location-accordion .accordion-item:has(.accordion-button:not(.collapsed)) {
  background: rgba(255, 255, 255, 0.78);
  border-color: rgba(201, 162, 76, 0.5);
  box-shadow: 0 20px 48px -30px rgba(22, 40, 60, 0.4);
}

/* the header reads as a label, with a gold rule that fills as it opens */
.accordion-button {
  position: relative;
  color: var(--ivory) !important;
  font-family: var(--body);
  letter-spacing: 0.2em;
  font-size: 0.76rem !important;
  font-weight: 500;
  text-transform: uppercase;
  border-bottom: 0 !important;
  padding: 1.15rem 1.4rem !important;
  background: linear-gradient(100deg, var(--navy-700) 0%, var(--navy-900) 100%) !important;
  transition: color 0.45s var(--ease-lux), letter-spacing 0.45s var(--ease-lux), filter 0.45s var(--ease-lux);
}
.accordion-button::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 0;
  background: linear-gradient(180deg, var(--gold-200), var(--gold-500));
  transition: height 0.55s var(--ease-lux);
}
.accordion-button:hover { color: var(--gold-200) !important; letter-spacing: 0.23em; filter: brightness(1.15); }
.accordion-button:hover::before { height: 55%; }
.accordion-button:not(.collapsed) { color: var(--gold-200) !important; }
.accordion-button:not(.collapsed)::before { height: 100%; }
.accordion-button::after { width: 0.85rem; height: 0.85rem; opacity: 0.9; }

.accordion-body { padding: 0 1.4rem 1.35rem 1.4rem !important; }
.accordion-container { gap: 0 !important; }

/* each row: pin, place, and the distance set hard right in gold */
.accordion-content {
  border-top: 1px solid rgba(22, 40, 60, 0.08);
  transition: background-color 0.45s var(--ease-lux);
}
.accordion-content:first-child { border-top: 0; }
.accordion-content:hover { background-color: rgba(201, 162, 76, 0.07); }

.accordion-content .acc-name {
  align-items: center;
  gap: 0.7rem !important;
  padding: 0.78rem 0.55rem;
}
.accordion-content .acc-icon {
  flex: 0 0 auto;
  width: 15px;
  transition: transform 0.55s var(--ease-lux);
}
.accordion-content:hover .acc-icon { transform: translateY(-3px) scale(1.12); }

/* the base sheet absolutely-positions any span inside .accordion-body — undo that */
.accordion-body span { position: static !important; right: auto !important; }

.acc-location {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
}
.acc-place {
  color: var(--ink);
  font-family: var(--prose);
  font-weight: 400;
  line-height: 1.45;
}
.acc-dist {
  flex: 0 0 auto;
  color: var(--gold-500);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  font-weight: 500;
  white-space: nowrap;
  text-align: right;
}

/* the map, framed — held back so the index leads */
.location-map {
  position: relative;
  overflow: hidden;
  max-width: 78%;
  margin-inline: auto;
  border: 1px solid rgba(22, 40, 60, 0.12);
  transition: border-color 0.6s var(--ease-lux), box-shadow 0.6s var(--ease-lux);
}
.location-map::after {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(232, 211, 156, 0.35);
  pointer-events: none;
  z-index: 2;
  transition: inset 0.7s var(--ease-lux), border-color 0.7s var(--ease-lux);
}
.location-map img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 1.4s var(--ease-lux);
}
.location-map:hover {
  border-color: rgba(201, 162, 76, 0.6);
  box-shadow: 0 28px 64px -34px rgba(22, 40, 60, 0.5);
}
.location-map:hover::after { inset: 20px; border-color: rgba(232, 211, 156, 0.7); }
.location-map:hover img { transform: scale(1.04); }

/* ===========================================================
   ABOUT
   =========================================================== */
.about-img { overflow: hidden; position: relative; }
.about-img img { transition: transform 1.4s var(--ease-lux); }
.about-img:hover img { transform: scale(1.05); }
.about-img::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(201, 162, 76, 0.35);
  pointer-events: none;
  transition: inset 0.7s var(--ease-lux), border-color 0.7s var(--ease-lux);
}
.about-img:hover::after { inset: 12px; border-color: rgba(201, 162, 76, 0.8); }

/* ===========================================================
   CONTACT — a deep navy band carrying one white card
   =========================================================== */
.section-contact { position: relative; z-index: 2; }
.section-contact.texture-pattern::after { display: none; }
.section-contact::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(150deg, var(--navy-700) 0%, var(--navy-900) 100%);
}
.section-contact .section-heading .section-subtitle { color: var(--ivory); }
.section-contact .section-desc { color: rgba(247, 243, 232, 0.78); }

/* the form itself is white paper */
.contact-container::after { display: none; }
.contact-form {
  position: relative;
  z-index: 3;
  padding: 2rem 2.5rem;
  background: var(--ivory-50);
  border: 1px solid rgba(201, 162, 76, 0.45);
  box-shadow: 0 34px 80px -46px rgba(0, 0, 0, 0.7);
  transition: box-shadow 0.7s var(--ease-lux);
}
.contact-form::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(201, 162, 76, 0.28);
  pointer-events: none;
}
.contact-form:hover { box-shadow: 0 42px 96px -46px rgba(0, 0, 0, 0.78); }

.contact-form-title {
  margin: 0 auto 0.25rem;
  font-size: 1.85rem;
  text-align: center;
  line-height: 1.2;
}
.contact-form-title::after {
  content: "";
  display: block;
  width: 54px;
  height: 1px;
  margin: 0.85rem auto 0;
  background: linear-gradient(90deg, rgba(201, 162, 76, 0), var(--gold-400), rgba(201, 162, 76, 0));
}

.contact-form .custom-input {
  color: var(--ink);
  background-color: #fff;
  border-color: rgba(22, 40, 60, 0.18);
}
.contact-form .custom-input:focus {
  background-color: #fff;
  border-color: var(--gold-400);
  box-shadow: 0 0 0 3px rgba(201, 162, 76, 0.18);
}
.contact-form .custom-input::placeholder { color: rgba(107, 120, 134, 0.85); }
.contact-form .custom-input::-webkit-input-placeholder { color: rgba(107, 120, 134, 0.85); }
.contact-form .btnPrimary { color: var(--ivory); font-weight: 400; }

/* ===========================================================
   FOOTER — ivory paper, but with weight: a gold rule, framed QR, real type
   =========================================================== */
footer {
  position: relative;
  z-index: 2;
  padding-top: 4rem !important;
}
footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, rgba(201, 162, 76, 0) 0%, var(--gold-400) 35%, var(--gold-200) 50%, var(--gold-400) 65%, rgba(201, 162, 76, 0) 100%);
}
footer p, .disc { color: var(--ink-soft); }
footer hr {
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(22, 40, 60, 0) 0%, rgba(22, 40, 60, 0.22) 50%, rgba(22, 40, 60, 0) 100%);
  opacity: 1;
  margin: 2rem auto;
}

.footer-qr { margin-bottom: 1.25rem; }
.qr-content .qr-img {
  width: 142px;
  height: 142px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  padding: 12px;
  background: #fff;
  border: 1px solid var(--gold-400);
  outline: 1px solid rgba(201, 162, 76, 0.3);
  outline-offset: 5px;
  box-shadow: 0 14px 32px -22px rgba(22, 40, 60, 0.5);
  transition: transform 0.6s var(--ease-lux), box-shadow 0.6s var(--ease-lux);
}
.qr-content .qr-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border: 0;
  padding: 0;
  background: transparent;
}
.qr-content:hover .qr-img { transform: translateY(-4px); box-shadow: 0 22px 44px -22px rgba(22, 40, 60, 0.5); }
.qr-content .qr-txt { color: var(--ink); text-align: center; margin-top: 1rem; }
.qr-content .qr-txt p:first-child {
  font-family: var(--body);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  color: var(--gold-500);
  font-weight: 500;
}
.qr-content .qr-txt p:last-child {
  font-family: var(--body);
  font-size: 0.9rem;
  letter-spacing: 0.14em;
  color: var(--ink);
}

.disc {
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(22, 40, 60, 0.08);
  padding: 1.6rem 1.9rem;
  border-radius: 2px;
}
.disc strong {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--gold-500);
  font-family: var(--body);
  letter-spacing: 0.22em;
  font-size: 0.8rem;
}

.footer-copyright, .created p {
  color: var(--ink-mute);
  font-family: var(--body);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
}
.leaf { opacity: 1; }

.toggle-up {
  background: linear-gradient(140deg, var(--navy-700), var(--navy-900));
  color: var(--gold-200);
  box-shadow: 0 14px 34px -16px rgba(15, 33, 56, 0.85);
  transition: transform 0.5s var(--ease-lux), box-shadow 0.5s var(--ease-lux), opacity 0.5s var(--ease-lux);
}
.toggle-up:hover { transform: translateY(-26px) !important; }

/* ===========================================================
   MODAL
   =========================================================== */
.custom-modal-content {
  background: var(--ivory) !important;
  border: 1px solid rgba(201, 162, 76, 0.4);
  box-shadow: 0 40px 90px -40px rgba(9, 21, 37, 0.55);
}
.custom-modal-content::before, .custom-modal-content::after { opacity: 0.85; }
.modal-close { transition: transform 0.5s var(--ease-lux); }
.modal-close img { filter: none; }
.modal-close:hover { transform: rotate(90deg); }
.modal-backdrop.show { opacity: 0.6; background: var(--navy-900); }

/* ===========================================================
   THANK YOU
   =========================================================== */
.section-thankyou { min-height: 78dvh; display: flex; align-items: center; }
.thankyou-title { color: var(--ink); }
.thankyou-title + .thankyou-title { color: var(--gold-500); }
.go_txt {
  background: linear-gradient(100deg, var(--navy-700), var(--navy-900)) !important;
  color: var(--ivory) !important;
  letter-spacing: 0.13em;
  transition: transform 0.5s var(--ease-lux), box-shadow 0.5s var(--ease-lux);
}
.go_txt:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -20px rgba(15, 33, 56, 0.8); }

/* ===========================================================
   BANNER
   =========================================================== */
section.main-banner { background: var(--navy-900) !important; }
section.main-banner::after { content: none !important; }
.main-banner .carousel-item img { animation: none; transform: none; }


/* ---------- inner pages (no hero photo behind the header) ---------- */
.page-inner .header-container { background: rgba(247, 243, 232, 0.92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(201, 162, 76, 0.3); }
.page-inner .navLinks .navLink { color: var(--ink); }
.page-inner .navLinks .navLink:hover { color: var(--gold-500); }
.page-inner .logo-img-1 img { content: url("../assets/images/logo/avhad-dark.png"); }
.page-inner .logo-img-2 img { content: url("../assets/images/logo/logo-dark.png"); }
.page-inner .logo img { filter: none; }
.page-inner .menu img { filter: brightness(0) saturate(100%) invert(11%) sepia(30%) saturate(1200%) hue-rotate(178deg); }
.page-inner main { padding-top: 6rem; }


/* ===========================================================
   FRAMES — a gold double rule around the forms and the gallery
   =========================================================== */

/* overview / hero-side form */
.overview-form { position: relative; }
.overview-form::before {
  content: "";
  position: absolute;
  inset: 14px;
  z-index: 2;
  pointer-events: none;
  border: 1px solid rgba(201, 162, 76, 0.6);
}
.overview-form::after {
  content: "";
  position: absolute;
  inset: 22px;
  z-index: 2;
  pointer-events: none;
  border: 1px solid rgba(201, 162, 76, 0.26);
}
.overview-form form { position: relative; z-index: 3; }

/* modal form */
.modal-subtitle {
  position: relative;
  z-index: 2;
  margin: 0 auto 1.5rem;
  max-width: 26rem;
  padding: 0 1rem;
  text-align: center;
  font-family: var(--prose);
  font-size: 1.02rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--ink-soft);
}

.custom-modal-content { position: relative; }
.custom-modal-content .modal-body::before {
  content: "";
  position: absolute;
  inset: 6px;
  z-index: 0;
  pointer-events: none;
  pointer-events: none;
  border: 1px solid rgba(201, 162, 76, 0.45);
}
.custom-modal-content .modal-form { position: relative; z-index: 2; }

/* gallery — every plate gets a framed mat */
.gal_image {
  position: relative;
  padding: 10px;
  background: var(--ivory-50);
  border: 1px solid rgba(201, 162, 76, 0.5);
  box-shadow: 0 20px 46px -30px rgba(22, 40, 60, 0.45);
}
.gal_image::after {
  content: "";
  position: absolute;
  inset: 4px;
  z-index: 3;
  pointer-events: none;
  border: 1px solid rgba(201, 162, 76, 0.28);
}
.gal-carousel .owl-item.active.center .gal_image {
  border-color: var(--gold-400);
  box-shadow: 0 30px 64px -30px rgba(22, 40, 60, 0.55);
}
.gal_image img { position: relative; z-index: 1; }


/* ===========================================================
   STACKING — the wave accents are bright now, so keep them
   strictly behind photography and copy
   =========================================================== */
.overlay-tree,
.leaf { z-index: 0 !important; }
.amenities-txt-container::before,
.amenities-txt-container::after { z-index: 0 !important; }

.section-heading,
.overview-content,
.gal_image,
.config-about,
.config-about-img,
.amenities-img,
.location-map,
.location-accordion,
.about-img,
.overview-form,
.contact-form,
.footer-qr,
.disc,
.footer-copyright,
.config-nav,
.tabbss { position: relative; z-index: 3; }


/* ===========================================================
   MOTION
   =========================================================== */
@keyframes bayline-drift { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -14px, 0); } }

.overlay-tree { opacity: 1; pointer-events: none; }
.overlay-tree img { object-fit: contain !important; animation: bayline-drift 14s ease-in-out infinite; }
.overlay-tree.overlay-tree-2 img { animation-delay: -7s; }
.amenities-txt-container::before, .amenities-txt-container::after { opacity: 1; }
.leaf { animation: bayline-drift 16s ease-in-out infinite; }
.leaf-top-right { animation-delay: -8s; }

.divider .line.line-1::after, .divider .line.line-2::after { background: var(--gold-400) !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  html { scroll-behavior: auto; }
}

/* ===========================================================
   SMALL SCREENS
   =========================================================== */
@media (max-width: 991px) {
  .logo-img-1 { width: 26px; }
  .logo-img-2 { width: 76px; }
  .scrolled .logo-img-2 { width: 70px; }
  .logo img { max-height: 48px; }
  .form-title { font-size: 1.3rem; }
  .config-about-txt .config-title { font-size: 1.45rem; }
}


/* ===========================================================
   OVERVIEW — balanced two-column layout
   The old .calc-container pushed this section to the right and
   left a dead gutter down the left edge; it now uses the same
   centred .container as every other section. Type and content
   are untouched.
   =========================================================== */
section.section-overview { padding: 5.5rem 0; }

.section-overview .container { max-width: 1400px; }

.overview-content { margin: 0; }

@media (max-width: 991px) {
  section.section-overview { padding: 4rem 0; }
}


/* ===========================================================
   CLIENT REVISIONS — "Avhad Bayline LP Changes"
   =========================================================== */

/* -----------------------------------------------------------
   1. MODAL — "Enquire Now" heading above the sub-line
   ----------------------------------------------------------- */
.custom-modal-content .modal-body { padding-top: 3rem; }
.modal-close { z-index: 5; }

.modal-heading {
  position: relative;
  z-index: 2;
  margin: 0.25rem auto 0.5rem;
  text-align: center;
  font-family: var(--display);
  font-size: 1.75rem;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.01em;
  color: var(--ink);
}
.modal-heading::after {
  content: "";
  display: block;
  width: 54px;
  height: 1px;
  margin: 0.6rem auto 0;
  background: linear-gradient(90deg, rgba(201, 162, 76, 0), var(--gold-400), rgba(201, 162, 76, 0));
}
.modal-subtitle { margin-bottom: 1.15rem; }

/* -----------------------------------------------------------
   2. BUTTONS — new shape: a straight-edged plate with a gold
      hairline, replacing the notched PNG cut-outs
   ----------------------------------------------------------- */
.btnPrimary::after {
  background: linear-gradient(100deg, var(--navy-700), var(--navy-900)) !important;
  border: 1px solid rgba(201, 162, 76, 0.55);
  border-radius: 3px;
}
.btnPrimary.light::after {
  background: linear-gradient(100deg, var(--gold-200), var(--gold-400)) !important;
  border-color: rgba(22, 40, 60, 0.2);
}
.navbar-container .primary-button .btnPrimary::after {
  background: var(--ivory) !important;
  border-color: rgba(201, 162, 76, 0.6);
}
.navbar-container .primary-button .btnPrimary { padding: 0.85rem 2.1rem; }

/* -----------------------------------------------------------
   3. FLOATING CTAs — brochure left, book a preview right
   ----------------------------------------------------------- */
.fixed-button { bottom: 2%; }
.fixed-button-left { left: 1.5%; right: auto; align-items: start; justify-content: start; }
.fixed-button-right { right: 1.5%; left: auto; }

@media (max-width: 575px) {
  .fixed-button-left { left: 3%; }
  .fixed-button-right { right: 3%; }
  .fixed-button .btnPrimary.custom-size { font-size: 0.72rem; padding: 0.8rem 1.1rem; }
}

/* -----------------------------------------------------------
   4. OVERVIEW — less padding, tighter (un-stretched) body copy
   ----------------------------------------------------------- */
section.section-overview { padding: 3.5rem 0 3rem; }

.section-heading .section-desc { font-size: 1.05rem; line-height: 1.6; }
.section-overview .section-desc { max-width: 60ch; }
.section-overview .section-heading.gap-4 { gap: 1.5rem !important; }

.overview-form { padding: 2.25rem 1.75rem 2rem 1.75rem; }
.overview-form form { width: 92%; }
.form-title { font-size: 1.45rem; margin-bottom: 0.7rem; }
.form-subtitle { font-size: 0.95rem; line-height: 1.5; margin-bottom: 0.35rem; }

@media (min-width: 992px) {
  .section-overview .section-heading.gap-lg-5 { gap: 1.75rem !important; }
  .section-overview .row.g-5 { --bs-gutter-y: 2.5rem; }
}

@media (max-width: 991px) {
  section.section-overview { padding: 2.75rem 0; }
  .overview-form form { width: 100%; }
}

/* -----------------------------------------------------------
   5. CONFIGURATION — the whole section inside one fold
   ----------------------------------------------------------- */
@media (min-width: 992px) {
  section.section-config {
    padding: 2.25rem 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  section.section-config > .container { width: 100%; }

  .section-config .section-heading .section-subtitle { font-size: clamp(1.6rem, 2.3vw, 2.2rem); }
  .section-config .section-heading .section-desc { font-size: 0.98rem; line-height: 1.55; max-width: 62ch; margin-inline: auto; }
  .section-config .section-heading .section-desc.mt-4 { margin-top: 0.85rem !important; }
  .section-config .section-heading .section-subtitle.mt-2 { margin-top: 0.5rem !important; }

  .config-nav .custom-nav { margin: 1.1rem auto 0.4rem auto; }
  .config-nav .custom-nav .nav-item .nav-link { padding: 0.45rem 1.6rem; }

  .config-content { margin-top: 1.1rem; }
  .config-content .row.g-5 { --bs-gutter-x: 2rem; --bs-gutter-y: 1.5rem; }

  .config-about { padding: 2.25rem 0; }
  .config-about-txt .config-title { font-size: 1.5rem; margin-bottom: 0.7rem; }
  .config-about-txt .config-subtitle { font-size: 0.95rem; line-height: 1.55; }
  .config-about-txt .line { margin: 1.1rem auto; }
  .config-more-info { gap: 0.75rem; }
  .config-more-info .more-info .more-info-txt { font-size: 0.95rem; }

  .config-about-img {
    width: max-content;
    max-width: 100%;
    margin-inline: auto;
  }
  .config-about-img img {
    height: min(46vh, 30rem);
    width: auto;
    max-width: 100%;
    object-fit: contain;
    background: #ffffff;
  }

  .config-content > .section-desc.mt-4 {
    margin-top: 0.9rem !important;
    font-size: 0.86rem;
    line-height: 1.5;
  }
}

/* -----------------------------------------------------------
   6. LOGO — the assets themselves were re-sharpened; the header
      lock-up also gets a touch more room so it is not squeezed
      into a size the artwork cannot hold.
   ----------------------------------------------------------- */
.logo-img-1 { width: 34px; }
.logo-img-2 { width: 104px; }
.scrolled .logo-img-1 { width: 30px; }
.scrolled .logo-img-2 { width: 92px; }
.logo img { max-height: 62px; }
.scrolled .logo img { max-height: 56px; }

@media (max-width: 991px) {
  .logo-img-1 { width: 28px; }
  .logo-img-2 { width: 86px; }
  .scrolled .logo-img-2 { width: 78px; }
  .logo img { max-height: 52px; }
  /* without this the scrolled bar grew taller than the bar at rest */
  .scrolled .logo img { max-height: 48px; }
}


/* -----------------------------------------------------------
   7. FOOTER — mobile
   ----------------------------------------------------------- */

/* The QR block was laid out as a 3-column grid from when the footer
   carried three codes. With a single code left it was pinned to the
   first column, hard against the left edge — centre it instead. */
@media (max-width: 991px) {
  .footer-qr {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
  }
  .qr-content { margin-inline: auto; }
  .qr-content .qr-txt { text-align: center; }
  .qr-content .qr-txt p { margin-bottom: 0.15rem; }
}

/* -----------------------------------------------------------
   8. FLOATING CTAs — a single joined bar on phones
   ----------------------------------------------------------- */
@media (max-width: 767px) {
  .fixed-button {
    bottom: 0;
    width: 50%;
    margin: 0;
    gap: 0;
  }
  .fixed-button-left { left: 0; right: auto; }
  .fixed-button-right { right: 0; left: auto; }

  .fixed-button .btnPrimary.custom-size {
    width: 100%;
    justify-content: center;
    padding: 0.95rem 0.5rem;
    font-size: 0.74rem;
    letter-spacing: 0.12em;
  }

  /* square off the abutting edges so the two halves read as one bar */
  .fixed-button .btnPrimary::after {
    border-radius: 0;
    border-width: 1px 0 0 0;
  }
  .fixed-button .btnPrimary:hover { transform: none; }

  .fixed-button .icon { width: 16px; height: 16px; flex: 0 0 auto; }
  .fixed-button .icon img { width: 100%; height: 100%; object-fit: contain; display: block; }
  .fixed-button .btnPrimary.custom-size { gap: 0.5rem; }

  /* the bar is fixed and flush to the bottom — keep it off the last
     footer row instead of parking on top of it */
  footer { padding-bottom: 4.25rem; }
}

@media (max-width: 360px) {
  .fixed-button .btnPrimary.custom-size { font-size: 0.66rem; letter-spacing: 0.08em; }
}


/* -----------------------------------------------------------
   9. CAROUSEL ARROWS — scaled down for phones
   ----------------------------------------------------------- */
/* the icon is sized at every breakpoint, not just mobile, so the
   img inside never outgrows the box that holds it */
.fixed-button .icon img { width: 100%; height: 100%; object-fit: contain; display: block; }

@media (max-width: 767px) {
  .main-banner .carousel-control-prev,
  .main-banner .carousel-control-next { width: 44px; opacity: 0.75; }

  .main-banner .carousel-control-prev-icon,
  .main-banner .carousel-control-next-icon { width: 18px; height: 18px; }
}

@media (max-width: 400px) {
  .main-banner .carousel-control-prev,
  .main-banner .carousel-control-next { width: 36px; }

  .main-banner .carousel-control-prev-icon,
  .main-banner .carousel-control-next-icon { width: 15px; height: 15px; }
}

/* -----------------------------------------------------------
   10. FOOTER — close the gap between the QR block and the
       MahaRERA registration line
   ----------------------------------------------------------- */
.qr-content { margin-bottom: 0.75rem; }
.footer-qr { margin-bottom: 0.35rem; }
.footer-qr + p.text-center { margin-bottom: 1.5rem !important; }

@media (max-width: 991px) {
  .qr-content { margin-bottom: 0.5rem; }
  .footer-qr { margin-bottom: 0.25rem; }
}


/* -----------------------------------------------------------
   11. BANNER — clear the fixed header
       The header is position:fixed, so the first slide started
       underneath it and the top of the artwork was cut off.
       --header-h is the measured height of the bar at rest at
       each breakpoint; the carousel is pushed down by exactly
       that much. The strip it leaves behind sits under the
       header itself, so nothing shows through.
   ----------------------------------------------------------- */
:root { --header-h: 80px; }

@media (max-width: 1400px) { :root { --header-h: 80px; } }
@media (max-width: 1200px) { :root { --header-h: 77px; } }
@media (max-width: 991px)  { :root { --header-h: 85px; } }
/* @media (max-width: 767px)  { :root { --header-h: 85px; } }
@media (max-width: 576px)  { :root { --header-h: 85px; } } */
@media (max-width: 450px)  { :root { --header-h: 69px; } }
/* @media (max-width: 350px)  { :root { --header-h: 85px; } } */

.main-banner .carousel-inner { margin-top: var(--header-h); }


/* -----------------------------------------------------------
   12. CONTACT FORM — sub-line under "Enquire Now"
   ----------------------------------------------------------- */
.contact-form-subtitle {
  margin: 0.7rem auto 0;
  max-width: 34rem;
  text-align: center;
}


/* -----------------------------------------------------------
   12. SECTION HEADINGS — larger eyebrow + config subtitle
   ----------------------------------------------------------- */
.section-heading .section-title { font-size: 1.6rem; letter-spacing: 0.06em; }

@media (max-width: 991px) {
  .section-heading .section-title { font-size: 1.4rem; }
}

@media (max-width: 575px) {
  .section-heading .section-title { font-size: 1.25rem; }
}

/* "Luxury Residences, Sized to Match the Address" */
.section-config .section-heading .section-subtitle { font-size: 3.1vw; }

@media (max-width: 1200px) {
  .section-config .section-heading .section-subtitle { font-size: 3.7vw; }
}

@media (max-width: 991px) {
  .section-config .section-heading .section-subtitle { font-size: 4.8vw; }
}

@media (max-width: 767px) {
  .section-config .section-heading .section-subtitle { font-size: 5.8vw; }
}

@media (max-width: 575px) {
  .section-config .section-heading .section-subtitle { font-size: 6.6vw; }
}

/* -----------------------------------------------------------
   13. OVERVIEW FORM — bolder title, pushed down from the top
   ----------------------------------------------------------- */
.form-title {
  font-weight: 700;
  /* margin-top: 2.5rem; */
}

@media (max-width: 767px) {
  .form-title { margin-top: 2rem; }
}

/* -----------------------------------------------------------
   14. CONFIGURATION — "Check Price" CTA, last in the panel
   ----------------------------------------------------------- */
.config-cta {
  display: flex;
  justify-content: center;
  margin-top: 2rem;
}

.config-cta .btnPrimary.custom-size {
  padding: 0.9rem 2.25rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* -----------------------------------------------------------
   15. MOBILE — vertical "Call Now" CTA pinned to the right edge
   ----------------------------------------------------------- */
.side-call-cta { display: none; }

@media (max-width: 767px) {
  .side-call-cta {
    display: block;
    position: fixed;
    top: 50%;
    right: 0;
    z-index: 998;
    transform: translateY(-50%);
  }

  .side-call-btn {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    border: none;
    cursor: pointer;
    padding: 0.55rem 0.7rem;
    background: var(--primary);
    color: var(--light);
    text-decoration: none;
    font-family: var(--body-font);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
    line-height: 1;
    /* vertical tab whose label reads bottom-to-top: stack the content
       vertically, then flip the whole box so the icon lands at the base */
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    /* the flip swaps the physical sides, so round the edge away from screen */
    border-radius: 0 6px 6px 0;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.22);
  }

  /* the tab itself is flipped 180deg, so cancel that (180) and add the
     130deg tilt on top of it — 310deg here renders as 130deg on screen */
  .side-call-icon {
    writing-mode: horizontal-tb;
    transform: rotate(130deg);
    font-size: 0.8rem;
    line-height: 1;
  }

  .side-call-btn:focus-visible {
    outline: 2px solid var(--light);
    outline-offset: -4px;
  }
}

@media (max-width: 360px) {
  .side-call-btn { font-size: 0.64rem; padding: 0.45rem 0.6rem; }
}