/* =========================================================================
   HIRANANDANI WESTGATE — CLEANED STYLESHEET
   Bootstrap 5 rules trimmed to ONLY what index.html actually uses.
   Removed (not used anywhere in the page): tables, dropdowns, badges,
   breadcrumbs, pagination, alerts, progress bars, list-groups, toasts,
   tooltips/popovers, carousel, spinners, offcanvas, card, btn-color
   variants (btn-primary/success/...), navbar-* sub-components,
   form-select/range/floating, input-group, all unused grid columns,
   row-cols-*, offsets, gap sizes other than g-0, and every unused
   responsive utility (float-*, d-print-*, sticky-*, link-*, etc.)
   ========================================================================= */

/* ===== BOOTSTRAP: ROOT VARS + RESET (kept minimal, used by whole page) ===== */
:root {
    --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
}

*, ::after, ::before { box-sizing: border-box }

@media (prefers-reduced-motion:no-preference) {
    :root { scroll-behavior: smooth }
}

body {
    margin: 0;
    font-family: var(--bs-font-sans-serif);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    -webkit-text-size-adjust: 100%
}

hr { margin: 1rem 0; color: inherit; background-color: currentColor; border: 0; opacity: .25 }
hr:not([size]) { height: 1px }

h1, h2, h3, h4, h5, h6 { margin-top: 0; margin-bottom: .5rem; font-weight: 500; line-height: 1.2 }

p { margin-top: 0; margin-bottom: 1rem }

ol, ul { padding-left: 2rem }
dl, ol, ul { margin-top: 0; margin-bottom: 1rem }

b, strong { font-weight: bolder }

a { color: #0d6efd; text-decoration: underline }
a:hover { color: #0a58ca }
a:not([href]):not([class]), a:not([href]):not([class]):hover { color: inherit; text-decoration: none }

img, svg { vertical-align: middle }

label { display: inline-block }

button { border-radius: 0 }
button:focus:not(:focus-visible) { outline: 0 }
button, input, optgroup, select, textarea { margin: 0; font-family: inherit; font-size: inherit; line-height: inherit }
button, select { text-transform: none }
[role=button] { cursor: pointer }
[type=button], [type=reset], [type=submit], button { -webkit-appearance: button }
[type=button]:not(:disabled), [type=reset]:not(:disabled), [type=submit]:not(:disabled), button:not(:disabled) { cursor: pointer }
::-moz-focus-inner { padding: 0; border-style: none }

iframe { border: 0 }

[hidden] { display: none !important }

/* ===== BOOTSTRAP: GRID (container / row / only the col-* sizes actually used) ===== */
.container {
    width: 100%;
    padding-right: var(--bs-gutter-x, .75rem);
    padding-left: var(--bs-gutter-x, .75rem);
    margin-right: auto;
    margin-left: auto
}
@media (min-width:576px) { .container { max-width: 540px } }
@media (min-width:768px) { .container { max-width: 720px } }
@media (min-width:992px) { .container { max-width: 960px } }
@media (min-width:1200px) { .container { max-width: 1140px } }
@media (min-width:1400px) { .container { max-width: 1320px } }

.row {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(var(--bs-gutter-y)*-1);
    margin-right: calc(var(--bs-gutter-x)*-0.5);
    margin-left: calc(var(--bs-gutter-x)*-0.5)
}
.row > * {
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding-right: calc(var(--bs-gutter-x)*.5);
    padding-left: calc(var(--bs-gutter-x)*.5);
    margin-top: var(--bs-gutter-y)
}

.g-0, .gx-0 { --bs-gutter-x: 0 }
.g-0, .gy-0 { --bs-gutter-y: 0 }

.col-6  { flex: 0 0 auto; width: 50% }
.col-12 { flex: 0 0 auto; width: 100% }

@media (min-width:576px) {
    .col-sm-2 { flex: 0 0 auto; width: 16.66666667% }
}
@media (min-width:768px) {
    .col-md-4  { flex: 0 0 auto; width: 33.33333333% }
    .col-md-6  { flex: 0 0 auto; width: 50% }
    .col-md-8  { flex: 0 0 auto; width: 66.66666667% }
    .col-md-12 { flex: 0 0 auto; width: 100% }
}
@media (min-width:992px) {
    .col-lg-4  { flex: 0 0 auto; width: 33.33333333% }
    .col-lg-5  { flex: 0 0 auto; width: 41.66666667% }
    .col-lg-6  { flex: 0 0 auto; width: 50% }
    .col-lg-7  { flex: 0 0 auto; width: 58.33333333% }
    .col-lg-8  { flex: 0 0 auto; width: 66.66666667% }
    .col-lg-12 { flex: 0 0 auto; width: 100% }
}
@media (min-width:1200px) {
    .col-xl-4 { flex: 0 0 auto; width: 33.33333333% }
    .col-xl-5 { flex: 0 0 auto; width: 41.66666667% }
    .col-xl-7 { flex: 0 0 auto; width: 58.33333333% }
    .col-xl-8 { flex: 0 0 auto; width: 66.66666667% }
}

/* ===== BOOTSTRAP: FORMS (checkbox + basic input used in enquiry forms) ===== */
.form-control {
    display: block;
    width: 100%;
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    appearance: none;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out
}
.form-control:focus {
    color: #212529;
    background-color: #fff;
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 .25rem rgb(13 110 253 / .25)
}

.form-check { display: block; min-height: 1.5rem; padding-left: 1.5em; margin-bottom: .125rem }
.form-check .form-check-input { float: left; margin-left: -1.5em }
.form-check-input {
    width: 1em; height: 1em; margin-top: .25em; vertical-align: top;
    background-color: #fff; background-repeat: no-repeat; background-position: center; background-size: contain;
    border: 1px solid rgb(0 0 0 / .25); appearance: none
}
.form-check-input[type=checkbox] { border-radius: .25em }
.form-check-input:checked { background-color: #0d6efd; border-color: #0d6efd }
.form-check-input:checked[type=checkbox] {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e")
}
label.error { color: red !important }

/* ===== BOOTSTRAP: BUTTON BASE (only base — colour variants unused, custom .commonBt/.SubmitBtn styles it) ===== */
.btn {
    display: inline-block; font-weight: 400; line-height: 1.5; color: #212529;
    text-align: center; text-decoration: none; vertical-align: middle; cursor: pointer;
    user-select: none; background-color: transparent; border: 1px solid transparent;
    padding: .375rem .75rem; font-size: 1rem; border-radius: .25rem
}

/* ===== BOOTSTRAP: NAV / TABS (towers + amenities tab switchers) ===== */
.nav { display: flex; flex-wrap: wrap; padding-left: 0; margin-bottom: 0; list-style: none }
.nav-link { display: block; padding: .5rem 1rem; color: #0d6efd; text-decoration: none }
.nav-link:focus, .nav-link:hover { color: #0a58ca }
.nav-tabs { border-bottom: 1px solid #dee2e6 }
.nav-tabs .nav-link {
    margin-bottom: -1px; background: 0 0; border: 1px solid transparent;
    border-top-left-radius: .25rem; border-top-right-radius: .25rem
}
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    color: #495057; background-color: #fff; border-color: #dee2e6 #dee2e6 #fff
}
.tab-content > .tab-pane { display: none }
.tab-content > .active { display: block }

/* ===== BOOTSTRAP: NAVBAR (header nav — only the base rule; custom CSS overrides layout) ===== */
.navbar {
    position: relative; display: flex; flex-wrap: wrap; align-items: center;
    justify-content: space-between; padding-top: .5rem; padding-bottom: .5rem
}
.navbar > .container { display: flex; flex-wrap: inherit; align-items: center; justify-content: space-between }

/* ===== BOOTSTRAP: ACCORDION (LOCATION section — connectivity/education/etc.) ===== */
.accordion-button {
    position: relative; display: flex; align-items: center; width: 100%;
    padding: 1rem 1.25rem; font-size: 1rem; color: #212529; text-align: left;
    background-color: #fff; border: 0; overflow-anchor: none;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out, border-radius .15s ease
}
.accordion-button:not(.collapsed) {
    color: #0c63e4; background-color: #e7f1ff; box-shadow: inset 0 -1px 0 rgb(0 0 0 / .125)
}
.accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230c63e4'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    transform: rotate(-180deg)
}
.accordion-button::after {
    flex-shrink: 0; width: 1.25rem; height: 1.25rem; margin-left: auto; content: "";
    background-repeat: no-repeat; background-size: 1.25rem; transition: transform .2s ease-in-out
}
.accordion-header { margin-bottom: 0 }
.accordion-item { background-color: #fff; border: 1px solid rgb(0 0 0 / .125) }
.accordion-item:first-of-type { border-top-left-radius: .25rem; border-top-right-radius: .25rem }
.accordion-item:not(:first-of-type) { border-top: 0 }
.accordion-item:last-of-type { border-bottom-right-radius: .25rem; border-bottom-left-radius: .25rem }
.accordion-body { padding: 1rem 1.25rem }
.collapse:not(.show) { display: none }
.collapsing { height: 0; overflow: hidden; transition: height .35s ease }

/* ===== BOOTSTRAP: MODAL (enquiry popup + youtube video popup) ===== */
.fade { transition: opacity .15s linear }
.fade:not(.show) { opacity: 0 }
.modal {
    position: fixed; top: 0; left: 0; z-index: 1060; display: none; width: 100%; height: 100%;
    overflow-x: hidden; overflow-y: auto; outline: 0
}
.modal-dialog { position: relative; width: auto; margin: .5rem; pointer-events: none }
.modal.fade .modal-dialog { transition: transform .3s ease-out; transform: translate(0, -50px) }
.modal.show .modal-dialog { transform: none }
.modal-dialog-centered { display: flex; align-items: center; min-height: calc(100% - 1rem) }
.modal-content {
    position: relative; display: flex; flex-direction: column; width: 100%; pointer-events: auto;
    background-color: #fff; background-clip: padding-box; border: 1px solid rgb(0 0 0 / .2);
    border-radius: .3rem; outline: 0
}
.modal-header {
    display: flex; flex-shrink: 0; align-items: center; justify-content: space-between;
    padding: 1rem 1rem; border-bottom: 1px solid #dee2e6;
    border-top-left-radius: calc(.3rem - 1px); border-top-right-radius: calc(.3rem - 1px)
}
.modal-header .btn-close { padding: .5rem .5rem; margin: -.5rem -.5rem -.5rem auto }
.modal-body { position: relative; flex: 1 1 auto; padding: 1rem }
@media (min-width:576px) {
    .modal-dialog { max-width: 500px; margin: 1.75rem auto }
    .modal-dialog-centered { min-height: calc(100% - 3.5rem) }
}
@media (min-width:992px) { .modal-lg { max-width: 800px } }

.btn-close {
    box-sizing: content-box; width: 1em; height: 1em; padding: .25em .25em; color: #000;
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
    border: 0; border-radius: .25rem; opacity: .5
}
.btn-close:hover { color: #000; text-decoration: none; opacity: .75 }

.modal-backdrop { position: fixed; top: 0; left: 0; z-index: 1040; width: 100vw; height: 100vh; background-color: #000 }
.modal-backdrop.fade { opacity: 0 }
.modal-backdrop.show { opacity: .5 }

/* ===== BOOTSTRAP: RATIO (16x9 video embed only) ===== */
.ratio { position: relative; width: 100% }
.ratio::before { display: block; padding-top: var(--bs-aspect-ratio); content: "" }
.ratio > * { position: absolute; top: 0; left: 0; width: 100%; height: 100% }
.ratio-16x9 { --bs-aspect-ratio: calc(9 / 16 * 100%) }

/* ===== BOOTSTRAP: UTILITIES ACTUALLY USED ===== */
.img-fluid { max-width: 100%; height: auto }
.position-relative { position: relative !important }
.d-flex { display: flex !important }
.d-block { display: block !important }
.d-none { display: none !important }
@media (min-width:768px) { .d-md-block { display: block !important } }
@media (min-width:992px) { .d-lg-block { display: block !important }
    .d-lg-none { display: none !important } }
@media (min-width:1200px) { .d-xl-none { display: none !important } }

.justify-content-center  { justify-content: center !important }
.justify-content-between { justify-content: space-between !important }
.justify-content-around  { justify-content: space-around !important }
.justify-content-evenly  { justify-content: space-evenly !important }
@media (min-width:768px)  { .justify-content-md-start { justify-content: flex-start !important } }
@media (min-width:992px)  { .justify-content-lg-center  { justify-content: center !important }
    .justify-content-lg-between { justify-content: space-between !important }
    .justify-content-lg-evenly  { justify-content: space-evenly !important } }

.order-0 { order: 0 !important }
.order-1 { order: 1 !important }
@media (min-width:768px) { .order-md-0 { order: 0 !important } }
@media (min-width:992px) { .order-lg-1 { order: 1 !important } }

.mx-auto { margin-right: auto !important; margin-left: auto !important }
.mt-4 { margin-top: 1.5rem !important }
.mt-5 { margin-top: 3rem !important }
.mb-1 { margin-bottom: .25rem !important }
.mb-3 { margin-bottom: 1rem !important }
.p-1  { padding: .25rem !important }
.text-center { text-align: center !important }

/* =========================================================================
   CUSTOM SITE STYLES — organised by page section
   ========================================================================= */

/* ===== SECTION: THEME VARIABLES / GLOBAL ===== */
:root {
    --sandClr: #FFF3E9;
    --brown: #901749;
    --gold: #C5995B;
    --White: #fff;
    --TextColor: #414042;
    --font-weight-100: 100;
    --font-weight-300: 300;
    --font-weight-400: 400;
    --font-weight-500: 500;
    --font-weight-600: 600;
    --font-weight-700: 700;
    --font-weight-800: 800
}
:root .font-weight-500 { font-weight: var(--font-weight-500) }
:root .font-weight-600 { font-weight: var(--font-weight-600) }
:root .font-weight-700 { font-weight: var(--font-weight-700) }
:root .white-text { color: var(--White) !important }
:root .brown { color: var(--brown) !important }
:root .sandClr { color: var(--sandClr) !important }
:root .TextColor { color: var(--TextColor) !important }

::-webkit-scrollbar { width: 8px; height: 8px }
::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 4px rgb(120 120 120 / .5) }
::-webkit-scrollbar-thumb { border-radius: 6px; background: rgb(120 120 120 / .6); -webkit-box-shadow: inset 0 0 4px rgb(120 120 120 / .6) }
::-webkit-scrollbar-thumb:window-inactive { background: rgb(120 120 120 / .4) }

@font-face {
    font-family: "Zona Pro";
    src: url(../fonts/ZonaPro-Regular.eot);
    src: url("../fonts/ZonaPro-Regular.eot#iefix") format("embedded-opentype"), url(../fonts/ZonaPro-Regular.woff2) format("woff2"), url(../fonts/ZonaPro-Regular.woff) format("woff"), url(../fonts/ZonaPro-Regular.ttf) format("truetype"), url("../images/ZonaPro-Regular.svg#ZonaPro-Regular") format("svg");
    font-weight: 400; font-style: normal; font-display: swap
}
@font-face {
    font-family: "Zona Pro";
    src: url(../fonts/ZonaPro-Bold.eot);
    src: url("../fonts/ZonaPro-Bold.eot#iefix") format("embedded-opentype"), url(../fonts/ZonaPro-Bold.woff2) format("woff2"), url(../fonts/ZonaPro-Bold.woff) format("woff"), url(../fonts/ZonaPro-Bold.ttf) format("truetype"), url("../images/ZonaPro-Bold.svg#ZonaPro-Bold") format("svg");
    font-weight: 700; font-style: normal; font-display: swap
}
@font-face {
    font-family: "Zona Pro";
    src: url(../fonts/ZonaPro-Thin.eot);
    src: url("../fonts/ZonaPro-Thin.eot#iefix") format("embedded-opentype"), url(../fonts/ZonaPro-Thin.woff2) format("woff2"), url(../fonts/ZonaPro-Thin.woff) format("woff"), url(../fonts/ZonaPro-Thin.ttf) format("truetype"), url("../images/ZonaPro-Thin.svg#ZonaPro-Thin") format("svg");
    font-weight: 100; font-style: normal; font-display: swap
}
@font-face {
    font-family: "Zona Pro";
    src: url(../fonts/ZonaPro-SemiBold.eot);
    src: url("../fonts/ZonaPro-SemiBold.eot#iefix") format("embedded-opentype"), url(../fonts/ZonaPro-SemiBold.woff2) format("woff2"), url(../fonts/ZonaPro-SemiBold.woff) format("woff"), url(../fonts/ZonaPro-SemiBold.ttf) format("truetype"), url("../images/ZonaPro-SemiBold.svg#ZonaPro-SemiBold") format("svg");
    font-weight: 600; font-style: normal; font-display: swap
}
@font-face {
    font-family: "Bodoni 72";
    src: url(../fonts/BodoniSvtyTwoITCTT-BookIta.eot);
    src: url("../fonts/BodoniSvtyTwoITCTT-BookIta.eot?#iefix") format("embedded-opentype"), url(../fonts/BodoniSvtyTwoITCTT-BookIta.woff2) format("woff2"), url(../fonts/BodoniSvtyTwoITCTT-BookIta.woff) format("woff"), url(../fonts/BodoniSvtyTwoITCTT-BookIta.ttf) format("truetype"), url("../fonts/BodoniSvtyTwoITCTT-BookIta.svg#BodoniSvtyTwoITCTT-BookIta") format("svg");
    font-weight: 400; font-style: italic; font-display: swap
}
@font-face {
    font-family: RupeeForadian;
    src: url(../fonts/Rupee_Foradian.eot);
    src: url(../fonts/Rupee_Foradian.eot) format("embedded-opentype"), url(../fonts/Rupee_Foradian.woff2) format("woff2"), url(../fonts/Rupee_Foradian.woff) format("woff"), url(../fonts/Rupee_Foradian.ttf) format("truetype"), url(../images/Rupee_Foradian.svg#Rupee_Foradian) format("svg");
    font-display: swap
}

html, body {
    font-family: "Zona Pro" !important;
    padding: 0; margin: 0; font-weight: 400 !important;
    background-color: var(--sandClr) !important
}
h1, h2, h3, h4, h5, h6, a { padding: 0; margin: 0; text-decoration: none }
a:hover { text-decoration: none }

/* spacing helper classes actually used: mt0/mb0/p0/m0 family, fs20, fs-12, fs-14 */
.mt0 { margin-top: 0 } .pt0 { padding-top: 0 }
.mb0 { margin-bottom: 0 } .pb0 { padding-bottom: 0 }
.ml0 { margin-left: 0 } .pl0 { padding-left: 0 }
.mr0 { margin-right: 0 } .pr0 { padding-right: 0 }
.m0 { margin: 0 } .p0 { padding: 0 }
.rs { font-family: RupeeForadian }
.fs20 { font-size: 20px !important }
.fs22 { font-size: 22px !important }
.fs26 { font-size: 26px !important }
.fs-14 { font-size: 14px !important }
.fs-18 { font-size: 18px !important }
.fs-12 { font-size: 12px !important }
.sandClr { color: var(--sandClr) }
.gold { color: var(--gold) }
.White { color: var(--White) }
.TextColor { color: var(--TextColor) }

.commonBt {
    display: inline-block; border: solid 1px var(--gold); color: var(--gold);
    text-transform: uppercase; font-size: 15px; font-weight: var(--font-weight-600); position: relative
}
.commonBt span {
    padding: 10px 10px; display: block; position: relative; z-index: 1;
    background-color: var(--White); color: var(--gold); transition: .5s
}
.commonBt span strong { font-weight: var(--font-weight-600); position: relative; z-index: 1 }
.commonBt span::before {
    content: ""; position: absolute; left: 0; top: 0; height: 100%; width: 0%;
    background-color: var(--gold); transition: all 600ms cubic-bezier(.645, .045, .355, 1) 0s;
    background-repeat: no-repeat; background-position: 97% center
}
.commonBt::before {
    content: ""; position: absolute; left: 5px; top: 5px; border: solid 1px var(--gold); height: 100%; width: 100%
}
.commonBt:hover::before { border: solid 1px var(--brown) }
.commonBt:hover span { color: var(--White); padding-right: 30px }
.commonBt:hover span::before { width: 100%; background-image: url(../images/arrow-right.svg) }

.container-1360-wrp { max-width: 1360px; margin: 0 auto; padding: 0 15px }

.wow { visibility: hidden }
.split-parent { overflow: hidden }
.split-child { display: inline-block }
.text_reveal { overflow: hidden }
.small-title { font-size: 20px; line-height: normal; margin-bottom: 5px }
.common-ttle, .common-ttle2 { font-size: 46px; line-height: 1.1; font-weight: var(--font-weight-700); letter-spacing: -1.5px }
.common-desc { font-size: 22px; line-height: 30px; letter-spacing: -.55px; margin-bottom: 20px }
.title-30 { font-size: 30px; font-weight: var(--font-weight-700); line-height: 1; margin-bottom: 15px }
.title-20 { font-size: 20px; font-weight: var(--font-weight-700); line-height: 1; margin-bottom: 15px }
p { font-size: 18px; color: var(--TextColor) }

.infoNos { margin-bottom: 20px }
.infoNos .nos { font-size: 46px; line-height: 1.2; font-weight: var(--font-weight-700); letter-spacing: -2px }
.infoNos .nos .cr { font-size: 16px; letter-spacing: 0 }
.infoNos p { font-size: 16px; font-weight: var(--font-weight-700); line-height: 22px }

.reveal { visibility: hidden; position: relative; width: 100%; height: auto }
.reveal img { height: 100%; width: 100%; object-fit: cover }

.desc { font-size: 22px; line-height: 36px }

.image-label {
    position: absolute; right: 30px; bottom: 20px; width: fit-content; text-align: center;
    color: var(--White); font-size: 9px; padding: 4px; line-height: 1; font-weight: 600
}

.five-cols .col-xs-2 { width: 20% }
@media (min-width:768px) { .five-cols .col-sm-2 { width: 20% } }

.fancybox-content { padding: 0px !important }
.fancybox-content .container { padding-left: 0; padding-right: 0 }

.onloadshow { opacity: 0; visibility: hidden; min-height: 0 }
.onloadshow.active { opacity: 1; visibility: visible; min-height: 100px }

/* ===== SECTION: HEADER / NAVBAR ===== */
#header {
    position: fixed; left: 0; top: 0; width: 100%; padding: 10px 0; z-index: 1031;
    transition: .5s; background-color: var(--White); box-shadow: 0 10px 15px -3px rgb(0 0 0 / .1)
}
#header .container { position: relative; display: flex }
#header .navbar input[type=checkbox], #header .navbar .hamburger-lines { display: none }
#header .navbar { padding: 0; width: 100%; display: inherit }
#header .navbar-container { display: flex; justify-content: space-evenly; align-items: center }
#header .menu-items { order: 2; display: flex; margin: 0; padding: 0; margin: auto }
#header .logo { order: 1 }
#header .menu-items li { list-style: none; margin-left: 2rem }
#header .navbar a {
    color: #000; text-decoration: none; font-weight: var(--font-weight-600);
    transition: color .3s ease-in-out; display: block; font-size: 16px; position: relative; overflow: hidden
}
#header .navbar a span { display: block; position: relative; transform: translateY(0) }
#header .navbar a::after { content: attr(data-text); position: absolute; top: 0; left: 0; transform: translateY(100%); color: var(--gold) }
#header .navbar a:hover span, #header .navbar a.active span { transform: translateY(-100%); opacity: 0; transition: all .5s cubic-bezier(.785, .135, .15, .86) }
#header .navbar a:hover::after, #header .navbar a.active::after { transform: translateY(0); transition: all .5s cubic-bezier(.785, .135, .15, .86) }

@media (max-width:768px) {
    #header .navbar { opacity: .95 }
    #header .navbar-container input[type=checkbox], #header .navbar-container .hamburger-lines { display: block }
    #header .navbar-container { display: block; position: relative; height: 64px }
    #header .navbar-container input[type=checkbox] { position: absolute; display: block; height: 32px; width: 30px; top: 20px; right: 20px; z-index: 5; opacity: 0; cursor: pointer }
    #header .navbar-container .hamburger-lines { display: flex; flex-direction: column; justify-content: space-between; height: 24px; width: 33px; position: absolute; top: 20px; right: 20px; z-index: 2 }
    #header .navbar-container .hamburger-lines .line { display: block; height: 2px; width: 100%; border-radius: 10px; background: #c59a5b }
    #header .navbar-container .hamburger-lines .line1 { transform-origin: 0% 0%; transition: transform .3s ease-in-out }
    #header .navbar-container .hamburger-lines .line2 { transition: transform .2s ease-in-out }
    #header .navbar-container .hamburger-lines .line3 { transform-origin: 0% 100%; transition: transform .3s ease-in-out }
    #header .navbar .menu-items {
        padding-top: 30px; background: #c89f63; height: 100vh; max-width: 300px; transform: translate(-150%);
        display: flex; flex-direction: column; margin-left: -40px; padding-left: 0; transition: transform .5s ease-in-out; overflow: hidden
    }
    #header .navbar .menu-items li { font-size: 1.1rem; font-weight: 500; margin-right: 2rem; padding: 18px 0; border-bottom: solid 1px rgb(255 255 255 / .5) }
    #header .logo { position: absolute; top: 10px; font-size: 2.5rem }
    #header .navbar-container input[type=checkbox]:checked ~ .menu-items { transform: translateX(0) }
    #header .navbar-container input[type=checkbox]:checked ~ .hamburger-lines .line1 { transform: rotate(45deg) }
    #header .navbar-container input[type=checkbox]:checked ~ .hamburger-lines .line2 { transform: scaleY(0) }
    #header .navbar-container input[type=checkbox]:checked ~ .hamburger-lines .line3 { transform: rotate(-45deg) }
}
@media (max-width:500px) {
    #header .navbar-container input[type=checkbox]:checked ~ .logo { display: none }
}

#header .NavRight { display: flex }
#header .NavRight .EnquireNow {
    border: solid 1px var(--brown); padding: 10px 20px; font-size: 16px; font-weight: var(--font-weight-600);
    display: block; width: 143px; background-color: var(--brown); color: var(--White); transition: .5s
}
#header .NavRight .EnquireNow:hover { background-color: var(--gold); color: var(--White) }
#header.fixed { background-color: #fff; box-shadow: 0 10px 15px -3px rgb(0 0 0 / .1) }
#header.nav-up { transition: .5s; top: -120px }
#header.nav-down { transition: .5s; top: 0 }

@media (max-width:767px) {
    #header { padding: 0 }
    #header .navbar a { color: var(--White) }
}

/* ===== SECTION: BANNER ===== */
.viewport { }
#banner {
    width: 100%; margin: 66px auto 0; height: calc(113vh - 0px); position: relative;
    overflow: hidden; background-color: var(--sandClr); background-size: cover
}
#banner .banner1 { height: 100%; position: relative }
#banner .banner1 img { width: 100%; height: 100%; object-fit: cover }

/* ===== SECTION: OVERVIEW ===== */
#overview { position: relative; padding: 100px 0; background: url(../images/welcome-back-bg.webp) repeat-x top center }
@media (max-width:767px) { #overview { padding: 60px 0 } }

#overview .welcome-inner { position: relative; border-bottom: solid 1px var(--gold); border-top: solid 1px var(--gold); background-color: var(--White); padding: 50px 100px }
#overview .welcome-inner p { opacity: .8 }
#overview .welcome-inner .welcomeDetails { margin-top: 60px }
#overview .welcome-inner .welcomeDetails .infoNos { background-color: var(--sandClr); padding: 12px 20px; opacity: 1; height: 136px; display: flex; justify-content: center; flex-direction: column }

#overview .welcome-inner .welcomeDetails .experienceVideo { transition: all .05s cubic-bezier(.645, .045, .355, 1) 0s }
#overview .welcome-inner .welcomeDetails .experienceVideo a { display: block; overflow: hidden; position: relative }
#overview .welcome-inner .welcomeDetails .experienceVideo a .experiencepix { overflow: hidden; height: 291px; transition: 1s; background-color: #000 }
#overview .welcome-inner .welcomeDetails .experienceVideo a .experiencepix img { width: 100%; height: 110%; object-fit: cover; transition: 1s }
#overview .welcome-inner .welcomeDetails .experienceVideo a .play-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1; width: 50px; height: 50px }
#overview .welcome-inner .welcomeDetails .experienceVideo a h2 { position: absolute; bottom: 20px; text-align: center; z-index: 1; color: var(--White); font-size: 20px; font-weight: var(--font-weight-700); padding: 0 60px }
@media (max-width:767px) { #overview .welcome-inner .welcomeDetails .experienceVideo a h2 { padding: 0 20px } }
#overview .welcome-inner .welcomeDetails .experienceVideo:hover .experiencepix { transform: scale(1.1) }
#overview .welcome-inner .welcomeDetails .experienceVideo:hover .experiencepix img { opacity: .7 }

#overview .welcome-inner .welcomeDetails .multilevelgrand { position: relative; overflow: hidden; height: 291px; transition: all .05s cubic-bezier(.645, .045, .355, 1) 0s }
#overview .welcome-inner .welcomeDetails .multilevelgrand img { width: 100%; height: 110%; object-fit: cover }
@media (max-width:767px) { #overview .welcome-inner .welcomeDetails .multilevelgrand { margin-bottom: 20px; height: 430px } }
#overview .welcome-inner .welcomeDetails .multilevelgrand .multilevelgrandimg { transition: 1s }
@media (max-width:767px) { #overview .welcome-inner .welcomeDetails .multilevelgrand .multilevelgrandimg { height: 100% } }
#overview .welcome-inner .welcomeDetails .multilevelgrand:hover .multilevelgrandimg { transform: scale(1.1) }
#overview .welcome-inner .welcomeDetails .multilevelgrand h2 { position: absolute; bottom: 20px; z-index: 1; color: var(--White); font-size: 20px; font-weight: var(--font-weight-700); padding: 20px }
@media (max-width:767px) { #overview .welcome-inner .welcomeDetails .multilevelgrand h2 { padding: 0 30px; bottom: 20px } }
#overview .welcome-inner .welcomeDetails .multilevelgrand .image-label { right: 10px; bottom: 10px }

@media (max-width:767px) {
    #overview .welcome-inner { padding: 20px 0 }
    #overview .welcome-inner .welcome-left { margin-bottom: 10px }
    #overview .welcome-inner .welcomeDetails { margin-top: 30px }
    #overview .welcome-inner .welcomeDetails .col-lg-8 { padding: 0 0 }
    #overview .welcome-inner .welcomeDetails .d-flex { justify-content: space-between }
    #overview .welcome-inner .welcomeDetails .infoNos { width: 48%; padding: 12px 10px }
    #overview .welcome-inner .welcomeDetails .infoNos .nos { font-size: 40px }
}

/* ===== SECTION: TOWERS (2/3/4 BHK tabs) ===== */
#towers { background-color: var(--sandClr); padding: 100px 0 }
#towers nav { margin-top: 50px; margin-bottom: 40px }
#towers nav .nav { width: fit-content; margin: auto }
@media (max-width:767px) { #towers nav .nav { display: flex; flex-wrap: wrap; width: 100%; justify-content: center } }
#towers nav .nav-link {
   background-color: #901749; color: #fff; font-size: 20px; border-radius: 0; padding: 10px 60px;
    border: solid 1px rgb(144 23 73 / .2); margin-right: 10px; text-transform: uppercase; font-weight: var(--font-weight-600)
}
#towers nav .nav-link.active { background-color: #901749; color: #fff }
#towers .towerDetails { text-align: center; padding-top: 40px }
#towers .towerDetails h2 {
    text-transform: uppercase; font-weight: var(--font-weight-700);
    background: linear-gradient(167deg, #ECC17F 40%, #C47A14 63%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; padding: 10px 0
}
#towers h6 { font-weight: var(--font-weight-700); color: var(--gold); font-size: 22px; margin-bottom: 10px; margin-top: 30px }
#towers ul { margin: 0; padding: 0; list-style-type: none; width: fit-content; margin: auto }
#towers ul li { font-size: 18px; line-height: 1.2em; padding: 20px 20px; border-bottom: solid 1px #c59a5b; color: var(--TextColor) }
#towers ul li:last-child { border-bottom: none; margin-bottom: 20px }
#towers .outerbr { position: relative }
#towers .outerbr::before { content: ""; width: 100%; height: 100%; position: absolute; top: 15px; left: 10px; background-color: #e9c7c9; z-index: 1; transition: .5s }
#towers .outerbr .towerImg { position: relative; z-index: 1 }
#towers .outerbr .towerImg img { width: 100%; height: 110%; object-fit: cover; position: relative }
@media (max-width:767px) { #towers { padding: 40px 0 } }

/* ===== SECTION: PROJECT HIGHLIGHTS ===== */
#projectHighlight { background-color: var(--sandClr); position: relative; overflow: hidden; padding: 100px 0 }
#projectHighlight .projecthilight-back-vet { position: absolute; left: 0; top: 0%; opacity: .7 }
#projectHighlight .container { position: relative }
#projectHighlight .projectHilightList { margin-top: 60px }
#projectHighlight .projectHilightList .projectHilight1 { margin-top: 80px }
@media (max-width:767px) { #projectHighlight .projectHilightList .projectHilight1 { margin-top: 0 } }
#projectHighlight .projectHilightList .projectHilightLCards { border: solid 1px var(--gold); margin-bottom: 30px; position: relative }
#projectHighlight .projectHilightList .projectHilightLCards .CardsInner { background-color: var(--White); height: 280px; position: relative; padding: 30px; z-index: 2; transition: .5s }
@media (max-width:767px) { #projectHighlight .projectHilightList .projectHilightLCards .CardsInner { height: 250px } }
#projectHighlight .projectHilightList .projectHilightLCards .CardsInner .highlightIcon { position: relative; overflow: hidden; z-index: 2; transition: .2s }
#projectHighlight .projectHilightList .projectHilightLCards .CardsInner .highlightIcon span:nth-child(2) { position: absolute; left: 0; bottom: 0; z-index: 2; clip-path: circle(0% at 50% 50%) }
#projectHighlight .projectHilightList .projectHilightLCards .CardsInner p { position: absolute; bottom: 0; left: 0; padding: 20px; z-index: 2; transition: .2s; color: var(--brown); font-size: 20px; line-height: 1.2; font-weight: var(--font-weight-600) }
#projectHighlight .projectHilightList .projectHilightLCards::before { content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: rgb(144 23 73 / .3); z-index: 1; transition: .5s }
#projectHighlight .projectHilightList .projectHilightLCards:hover::before { top: 10px; left: 10px }
#projectHighlight .projectHilightList .projectHilightLCards:hover .CardsInner { background-color: var(--brown) }
#projectHighlight .projectHilightList .projectHilightLCards:hover .CardsInner p { color: var(--White) }
#projectHighlight .projectHilightList .projectHilightLCards:hover .CardsInner .highlightIcon span:nth-child(2) { clip-path: circle(100% at 50% 50%); transition: all 1.3s cubic-bezier(.645, .045, .355, 1) 0s }
@media (max-width:767px) {
    #projectHighlight { padding: 40px 0; height: auto }
    #projectHighlight .projectHilightLeft { margin-bottom: 10px }
}

/* ===== SECTION: PROJECT AMENITIES (4 tabs + sliders) ===== */
#ProjectAmenities { padding: 100px 0 }
#ProjectAmenities .swiper { padding-left: 3%; margin-top: 40px }
@media (max-width:767px) { #ProjectAmenities .swiper { padding-left: 0% } }
#ProjectAmenities .ProjectAmenitiesTabs { margin-top: 80px }
#ProjectAmenities .nav-tabs { border: none; margin: auto; width: fit-content }
@media (max-width:767px) { #ProjectAmenities .nav-tabs { width: 100%; display: flex; flex-wrap: wrap } }
#ProjectAmenities .nav-tabs .nav-link {
    padding: 20px 30px; padding-bottom: 15px; font-size: 20px; line-height: 1.2em; font-weight: var(--font-weight-600);
    color: var(--TextColor); border: none; border-radius: 0; opacity: 1; margin-bottom: 10px; display: flex; text-align: left
}
#ProjectAmenities .nav-tabs .nav-link span { display: inline-block; margin-right: 10px }
#ProjectAmenities .nav-tabs .nav-link.active { color: var(--White); background-color: var(--brown); opacity: 1; font-weight: var(--font-weight-600) }
#ProjectAmenities .nav-tabs .nav-link.active svg circle { fill: #bf56a0 }
#ProjectAmenities .nav-tabs .nav-link.active svg path { fill: var(--White); stroke: var(--White) }
#ProjectAmenities .nav-tabs .nav-link:nth-child(1).active { background-color: #00b7b8 }
#ProjectAmenities .nav-tabs .nav-link:nth-child(2).active { background-color: #5ebe7b }
#ProjectAmenities .nav-tabs .nav-link:nth-child(3).active { background-color: #b38868 }
#ProjectAmenities .nav-tabs .nav-link:nth-child(4).active { background-color: #c59a5b }
#ProjectAmenities .blueClr { background-color: #00b7b8 }
#ProjectAmenities .wellnessClr { background-color: #5ebe7b }
#ProjectAmenities .ExplorationClr { background-color: #b38868 }
#ProjectAmenities .ClubClr { background-color: #c59a5b }
#ProjectAmenities .galleryImg { height: 540px; overflow: hidden; position: relative }
#ProjectAmenities .galleryImg img { width: 100%; height: 540px; object-fit: cover }
@media (max-width:767px) { #ProjectAmenities .galleryImg img { height: 340px } }
#ProjectAmenities .galleryImg .gallerylabel {
    text-transform: uppercase; position: absolute; font-weight: var(--font-weight-700); color: var(--White);
    font-size: 12px; bottom: 20px; left: 20px; background-color: var(--gold); padding: 5px 10px
}
@media (max-width:767px) { #ProjectAmenities .galleryImg { height: auto } }
#ProjectAmenities .swiper-button-next:after, #ProjectAmenities .swiper-button-prev:after { display: none }
#ProjectAmenities .swiper-button-next, #ProjectAmenities .swiper-button-prev { width: 60px }
#ProjectAmenities .swiper-button-prev { left: 70px }
#ProjectAmenities .swiper-button-next { right: 30px }
#ProjectAmenities .AmenitiesRight { padding: 20px 30px; position: relative; height: 100% }
#ProjectAmenities .AmenitiesRight .amenitiesTitle { color: var(--White); font-weight: var(--font-weight-700); font-size: 36px; display: flex; line-height: 1.1em }
#ProjectAmenities .AmenitiesRight .amenitiesTitle .icon { display: inline-block; margin-right: 10px; padding-top: 11px }
@media (max-width:767px) { #ProjectAmenities .AmenitiesRight .amenitiesTitle { font-size: 32px } }
#ProjectAmenities .AmenitiesRight .desc {
    color: var(--White); font-size: 22px; line-height: 1.2em; font-weight: var(--font-weight-400); margin-top: 20px;
    border-bottom: solid 1px var(--White); border-top: solid 1px var(--White); padding-bottom: 20px; padding-top: 20px; margin-bottom: 30px
}
@media (max-width:767px) { #ProjectAmenities .AmenitiesRight .desc { margin-bottom: 20px } }
#ProjectAmenities .AmenitiesRight .AmenitiesList p { color: var(--White); font-size: 14px; margin-bottom: 6px }
#ProjectAmenities .AmenitiesRight .swipemore { position: absolute; font-weight: var(--font-weight-700); color: var(--White); font-size: 14px; bottom: 20px; right: 20px }
@media (max-width:767px) { #ProjectAmenities .AmenitiesRight .swipemore { display: none } }
@media (max-width:767px) { #ProjectAmenities .AmenitiesRight { padding: 20px } }
@media (max-width:767px) {
    #ProjectAmenities { padding: 40px 0; height: auto }
    #ProjectAmenities .ProjectAmenitiesLeft { margin-bottom: 10px }
}
#ProjectAmenities .swiper-pagination-bullet { width: 24px; height: 7px; border-radius: 8px; background-color: var(--White); opacity: .5 }
#ProjectAmenities .swiper-pagination-bullet-active { opacity: 1; background-color: var(--gold) }

/* ===== SECTION: ICONIC (Hiranandani Estate strip) ===== */
#iconic {
    position: relative; overflow: hidden; height: 800px;
    background-image: url(../images/sky.webp); background-position: center; background-size: cover
}
@media (max-width:767px) { #iconic { height: auto } }
#iconic .iconic-bg { position: absolute; margin: auto; top: 0; left: 0%; right: 0 }
#iconic .iconic-bg img { width: 100% }
@media (max-width:767px) { #iconic .iconic-bg { position: relative } }
#iconic .container { position: relative; z-index: 1; padding-top: 100px }
@media (max-width:767px) { #iconic .container { padding-top: 40px } }
#iconic .container .iconicRight { padding-top: 80px; padding-right: 60px }
@media (max-width:767px) { #iconic .container .iconicRight { padding-top: 20px; padding-right: 0 } }

/* ===== SECTION: LOCATION (map, animated road SVG, accordion) ===== */
#location { background-color: var(--White); position: relative; padding: 100px 0; height: 890px; overflow: hidden }
@media (max-width:767px) { #location { padding: 40px 0; height: auto } }
#location .locationmap { position: absolute; right: 0; top: 0 }
@media (max-width:767px) { #location .locationmap { position: relative } }
#location .locationmap .LocationPin { position: absolute; top: 0 }
#location .locationmap .LocationPinName { position: absolute; top: 0 }
#location .locationmap .LocationPin2 { position: absolute; top: 144px; left: 310px }
#location .locationmap .LocationPin2::before {
    content: ""; width: 10px; height: 10px; border-radius: 100px; position: absolute; bottom: 0; left: 17px;
    background-color: transparent; z-index: 1; transition: .5s; animation: pulse-animation 2s infinite
}
#location button:focus { outline: none; border: none; box-shadow: none }
#location .accordion { margin-top: 40px }
#location .accordion-item { background-color: transparent; border: none; border-bottom: 1px solid rgb(0 0 0 / .125) }
#location .accordion-button, #location .accordion-button:not(.collapsed) { background-color: transparent !important; font-weight: var(--font-weight-700); font-size: 20px; color: var(--TextColor) }
#location .locationList { margin: 0; padding: 0; list-style-type: none }
#location .locationList li { position: relative; background-image: url(../images/tri.svg); background-repeat: no-repeat; background-position: left center; font-size: 16px; padding: 3px 0; padding-left: 20px; transition: .3s }
@media (max-width:767px) { #location .locationList li { padding-left: 13px } }
#location .locationList li span { position: absolute; right: 0; top: 0; font-weight: var(--font-weight-700) }
@media (max-width:767px) { #location .locationList li span { display: block; position: relative } }
#location .locationList li:hover { color: var(--gold); margin-left: 3px }
#location .accordion-button:after {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23C59A5B'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !important
}
@keyframes pulse-animation {
    0% { box-shadow: 0 0 0 0 rgb(144 23 73 / .5) }
    100% { box-shadow: 0 0 0 20px transparent }
}
#location .mobilemap { margin-top: 30px; box-shadow: 0 0 15px -3px rgb(0 0 0 / .1); position: relative }
#location .mobilemap a { border: none; outline: none }
#location .mobilemap::after {
    content: "Click to zoom"; width: fit-content; height: 26px; position: absolute; top: 0; left: 0; right: 0; margin: auto; bottom: 0;
    background-color: var(--gold); color: var(--White); z-index: 1; padding: 10px; line-height: 5px; font-weight: 700; font-size: 14px; pointer-events: none
}

/* ===== SECTION: MORE INFORMATION / ENQUIRY FORM STRIP ===== */
.moreInfromation-wrp { width: 100%; margin: 0 auto; background-color: var(--sandClr); justify-content: flex-end; align-items: center; padding: 0; margin-top: 0; position: relative }
.moreInfromation-wrp .moreInfromation-lhs { height: 600px; overflow: hidden }
.moreInfromation-wrp .moreInfromation-lhs img { width: 100%; height: 110%; object-fit: cover }
@media (max-width:767px) { .moreInfromation-wrp .moreInfromation-lhs { height: auto } }
.moreInfromation-wrp .moreInfromation-rhs { padding: 70px 50px }
@media (max-width:767px) { .moreInfromation-wrp .moreInfromation-rhs { padding: 20px; padding-bottom: 30px } }
.moreInfromation-wrp .moreInfromation-rhs .getintouchRight { margin-top: 30px }
.moreInfromation-wrp .moreInfromation-rhs .getintouchRight .login-box .user-box { position: relative }
.moreInfromation-wrp .moreInfromation-rhs .getintouchRight .login-box .user-box input,
.moreInfromation-wrp .moreInfromation-rhs .getintouchRight .login-box .user-box textarea {
    width: 100%; padding: 10px 0; font-size: 16px; color: #000; margin-bottom: 0 !important;
    border: none; border-bottom: 1px solid #a4a4a4; outline: none; background: transparent
}
.moreInfromation-wrp .moreInfromation-rhs .getintouchRight .login-box .user-box .labeltag {
    position: absolute; top: 0; left: 0; padding: 10px 0; font-size: 14px; color: #000; opacity: .3; pointer-events: none; transition: .5s
}
.moreInfromation-wrp .moreInfromation-rhs .getintouchRight .login-box .user-box input:focus ~ .labeltag,
.moreInfromation-wrp .moreInfromation-rhs .getintouchRight .login-box .user-box textarea:focus ~ .labeltag,
.moreInfromation-wrp .moreInfromation-rhs .getintouchRight .login-box .user-box textarea:valid ~ .labeltag,
.moreInfromation-wrp .moreInfromation-rhs .getintouchRight .login-box .user-box input:valid ~ .labeltag {
    top: -20px; left: 0; color: #000; opacity: 1; font-size: 12px
}
.moreInfromation-wrp .form-group .labeltag { position: relative; cursor: pointer; opacity: .6 }
.moreInfromation-wrp button { background-color: transparent; padding: 0; margin-top: 30px }

/* ===== SECTION: FOOTER ===== */
#footer { background-color: #ecddc2; padding: 64px 0; }
#footer .houseofhiranandani-logo { margin-top: 15px }
#footer .houseofhiranandani-logo img { width: 230px }
#footer .maharera { display: flex; border-bottom: solid 1px rgb(255 255 255 / .3); padding-bottom: 11px; margin-bottom: 20px }
#footer .maharera .HiranandaniMahaRERA { padding-left: 17px; padding-top: 5px }
#footer .maharera .HiranandaniMahaRERA p { color: var(--TextColor); font-size: 14px }
#footer .maharera .HiranandaniMahaRERA p.bor-bottom { border-bottom: solid 1px rgb(255 255 255 / .3); padding-bottom: 10px }
#footer .maharera .HiranandaniMahaRERA p span, #footer .maharera .HiranandaniMahaRERA p a { font-weight: var(--font-weight-700); color: var(--TextColor) }
@media (max-width:767px) { #footer .maharera { display: block } }
#footer .HeadOffice { padding-left: 20px }
#footer .HeadOffice h2 { font-weight: var(--font-weight-700); color: var(--TextColor); font-size: 16px; margin-bottom: 13px }
#footer .HeadOffice p { color: var(--TextColor); font-size: 14px }
#footer .HeadOffice p img { margin-right: 5px; display: inline-block; transform: translateY(-4px) }
#footer .HeadOffice p span, #footer .HeadOffice p a { color: var(--TextColor) }
#footer .copyright { color: var(--TextColor); font-size: 12px; text-align: center; border-top: solid 1px rgb(0 0 0 / .3); padding-top: 20px; margin-top: 30px }
@media (max-width:767px) {
    #footer { padding: 40px 0; text-align: center }
    #footer .HeadOffice { margin-top: 0; padding-left: 0 }
}

/* ===== SECTION: MOBILE STICKY ENQUIRE BAR + POPUP FORM ===== */
.getintouchRight2 { padding: 40px 25px }
.getintouchRight2 .login-box .user-box { position: relative }
.getintouchRight2 .login-box h6 { margin: 0 0 30px 0; padding: 0 }
.getintouchRight2 .login-box .user-box input, .getintouchRight2 .login-box .user-box textarea, .getintouchRight2 .login-box .user-box select {
    width: 100%; padding: 10px 0; font-size: 16px; color: #000; margin-bottom: 0 !important;
    border: none; border-bottom: 1px solid #c6c6c6; outline: none; background: transparent
}
.getintouchRight2 .login-box .user-box .labeltag {
    position: absolute; top: 0; left: 0; padding: 10px 0; font-size: 15px; color: #000; opacity: .6;
    pointer-events: none; transition: .5s; text-transform: capitalize
}
.getintouchRight2 .user-box label.error { position: unset !important; bottom: -20px; color: red; font-size: 10px !important; padding: 0 }
.getintouchRight2 .user-box { position: relative; margin-bottom: 15px }
.getintouchRight2 .login-box .user-box select { appearance: auto !important }
.getintouchRight2 .login-box .user-box input:focus ~ .labeltag,
.getintouchRight2 .login-box .user-box textarea:focus ~ .labeltag,
.getintouchRight2 .login-box .user-box textarea:valid ~ .labeltag,
.getintouchRight2 .login-box .user-box input:valid ~ .labeltag { top: -20px; left: 0; opacity: 1; font-size: 12px }
select { opacity: .6 }

.SubmitBtn { font-size: 16px; font-weight: var(--font-weight-600); transition: .5s; padding: 10px 15px; background-color: var(--brown); color: var(--White); border: none; display: inline-block }
.SubmitBtn span { transition: .5s; display: inline-block; transform: translate(0, -3px) }
.SubmitBtn:hover { padding-right: 20px; background-color: var(--brown); color: var(--White) }
.SubmitBtn:hover span { transform: translate(10px, -3px) }
.SubmitBtn:hover span svg path { fill: var(--White) }

.Close_btn { position: absolute; right: 10px; top: 10px; border: none; padding: 0; z-index: 1; box-shadow: none }
.Close_btn:focus { outline: none; border: none; box-shadow: none }
.poplogo { margin-bottom: 30px }
#enqueryFormPopup .modal-body { padding: 0 }
#enqueryFormPopup .modal-dialog { max-width: 614px !important }

.modal { z-index: 9999; background: rgb(0 0 0 / .25); box-shadow: 0 8px 32px 0 rgb(31 38 135 / .37); backdrop-filter: blur(13.5px); -webkit-backdrop-filter: blur(13.5px) }
.modal-body { padding: 0 }

.enquieymb.pricepop { }