/* Start custom CSS for html, class: .elementor-element-3c30f8a *//* =========================================================
NIVASA FIRST — FINAL PREMIUM HERO
========================================================= */
.nf-premium-hero {
--nf-bg: #F7F2E8;
--nf-bg-soft: #FBF8F2;
--nf-dark: #20231F;
--nf-green: #3D6B53;
--nf-green-dark: #294B3A;
--nf-gold: #B99A61;
--nf-border:
rgba(32,35,31,.14);
position: relative;
overflow: hidden;
background:
radial-gradient(
circle at 82% 10%,
rgba(185,154,97,.14),
transparent 29%
),
radial-gradient(
circle at 5% 88%,
rgba(61,107,83,.08),
transparent 28%
),
var(--nf-bg);
color: var(--nf-dark);
padding:
78px 6% 25px;
font-family:
"Inter",
"Helvetica Neue",
Arial,
sans-serif;
}
/* BACKGROUND */
.nf-grid {
position: absolute;
inset: 0;
opacity: .25;
background-image:
linear-gradient(
rgba(32,35,31,.035) 1px,
transparent 1px
),
linear-gradient(
90deg,
rgba(32,35,31,.035) 1px,
transparent 1px
);
background-size:
55px 55px;
pointer-events: none;
}
.nf-orb {
position: absolute;
border-radius: 50%;
pointer-events: none;
}
.nf-orb-1 {
width: 430px;
height: 430px;
right: -210px;
top: 80px;
border:
1px solid
rgba(185,154,97,.18);
animation:
nfRotate 28s linear infinite;
}
.nf-orb-2 {
width: 270px;
height: 270px;
left: -155px;
bottom: 70px;
border:
1px solid
rgba(61,107,83,.15);
animation:
nfRotateReverse 22s linear infinite;
}
@keyframes nfRotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes nfRotateReverse {
from {
transform: rotate(360deg);
}
to {
transform: rotate(0deg);
}
}
/* MAIN */
.nf-hero-inner {
position: relative;
z-index: 2;
max-width: 1400px;
margin: auto;
display: grid;
grid-template-columns:
minmax(0,1.05fr)
minmax(420px,.95fr);
gap: 70px;
align-items: center;
}
/* LEFT */
.nf-hero-content {
max-width: 700px;
}
.nf-eyebrow {
display: flex;
align-items: center;
gap: 12px;
font-size: 10px;
letter-spacing: 2.5px;
font-weight: 700;
color:
var(--nf-green);
margin-bottom: 22px;
}
.nf-eyebrow-line {
width: 34px;
height: 1px;
background:
var(--nf-gold);
}
.nf-hero-content h1 {
margin: 0;
font-size:
clamp(52px,5.3vw,82px);
line-height: .96;
letter-spacing: -4px;
font-weight: 500;
color:
var(--nf-dark);
}
.nf-hero-content h1 span {
color:
var(--nf-green);
font-style: italic;
font-family:
Georgia,
serif;
font-weight: 400;
}
.nf-hero-description {
max-width: 590px;
margin:
30px 0 18px;
font-size: 16px;
line-height: 1.8;
color:
rgba(32,35,31,.67);
}
/* KEYWORD */
.nf-keyword {
display: inline-flex;
align-items: center;
gap: 8px;
padding:
8px 14px;
margin-bottom:
30px;
border:
1px solid
rgba(61,107,83,.15);
background:
rgba(255,255,255,.42);
border-radius:
30px;
font-size: 11px;
font-weight: 650;
color:
var(--nf-green);
}
.nf-keyword span {
color:
rgba(32,35,31,.45);
font-weight: 400;
}
/* ACTIONS */
.nf-hero-actions {
display: flex;
align-items: center;
gap: 20px;
margin-bottom:
44px;
}
.nf-primary-btn {
display: inline-flex;
align-items: center;
gap: 20px;
padding:
15px 22px;
background:
var(--nf-green);
color:
white !important;
text-decoration:
none !important;
font-size: 12px;
font-weight: 700;
letter-spacing: .4px;
box-shadow:
0 12px 28px
rgba(61,107,83,.20);
transition:
.35s ease;
}
.nf-primary-btn svg {
width: 17px;
height: 17px;
fill: none;
stroke: currentColor;
stroke-width: 1.6;
transition:
.35s ease;
}
.nf-primary-btn:hover {
background:
var(--nf-dark);
transform:
translateY(-3px);
box-shadow:
0 18px 35px
rgba(32,35,31,.18);
}
.nf-primary-btn:hover svg {
transform:
translateX(4px);
}
.nf-secondary-btn {
border: none;
background: transparent;
color:
var(--nf-dark);
font-size: 12px;
font-weight: 650;
cursor: pointer;
display: flex;
align-items: center;
gap: 10px;
}
.nf-play-icon {
width: 28px;
height: 28px;
border-radius: 50%;
border:
1px solid
var(--nf-border);
display: flex;
align-items: center;
justify-content: center;
font-size: 8px;
color:
var(--nf-green);
transition:
.3s ease;
}
.nf-secondary-btn:hover
.nf-play-icon {
background:
var(--nf-green);
color:
white;
transform:
scale(1.08);
}
/* TRUST */
.nf-trust-row {
display: flex;
align-items: center;
gap: 22px;
}
.nf-trust-item {
display: flex;
align-items: center;
gap: 10px;
}
.nf-trust-item strong {
font-family:
Georgia,serif;
font-size: 19px;
color:
var(--nf-gold);
font-weight: 400;
}
.nf-trust-item span {
font-size: 9px;
line-height: 1.35;
text-transform:
uppercase;
letter-spacing: 1px;
color:
rgba(32,35,31,.54);
}
.nf-trust-divider {
width: 1px;
height: 30px;
background:
var(--nf-border);
}
/* VISUAL */
.nf-visual {
position: relative;
min-height: 500px;
display: flex;
align-items: center;
justify-content: center;
}
/* ARCHITECTURAL */
.nf-architectural-lines {
position: absolute;
right: -30px;
bottom: 25px;
width: 180px;
height: 180px;
z-index: 1;
opacity: .7;
}
.nf-architectural-lines span {
position: absolute;
display: block;
border:
1px solid
rgba(185,154,97,.25);
}
.nf-architectural-lines span:nth-child(1) {
width: 100%;
height: 100%;
transform:
rotate(12deg);
}
.nf-architectural-lines span:nth-child(2) {
width: 75%;
height: 75%;
left: 12%;
top: 12%;
transform:
rotate(-10deg);
}
.nf-architectural-lines span:nth-child(3) {
width: 45%;
height: 45%;
left: 27%;
top: 27%;
transform:
rotate(18deg);
}
/* ROTATING RING */
.nf-rotating-ring {
position: absolute;
width: 145px;
height: 145px;
right: -45px;
top: 35px;
border:
1px solid
rgba(185,154,97,.45);
border-radius: 50%;
z-index: 5;
animation:
nfRotate 18s linear infinite;
}
.nf-rotating-ring::before {
content: "";
position: absolute;
inset: 11px;
border:
1px dashed
rgba(61,107,83,.28);
border-radius: 50%;
}
.nf-ring-text {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-size: 8px;
letter-spacing: 2px;
color:
var(--nf-green);
}
/* IMAGE */
.nf-property-image {
position: relative;
width:
min(100%,520px);
height: 470px;
overflow: hidden;
z-index: 2;
box-shadow:
0 30px 80px
rgba(52,48,38,.16);
}
.nf-property-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition:
transform 1.1s
cubic-bezier(.2,.7,.2,1);
}
.nf-property-image:hover img {
transform:
scale(1.045);
}
/* IMAGE OVERLAY */
.nf-image-overlay {
position: absolute;
inset: 0;
background:
linear-gradient(
180deg,
rgba(20,30,24,.01),
rgba(20,30,24,.36)
);
}
/* SHINE */
.nf-image-shine {
position: absolute;
top: 0;
left: -80%;
width: 45%;
height: 100%;
background:
linear-gradient(
90deg,
transparent,
rgba(255,255,255,.13),
transparent
);
transform:
skewX(-15deg);
transition:
1.1s ease;
pointer-events: none;
}
.nf-property-image:hover
.nf-image-shine {
left: 140%;
}
/* IMAGE TEXT */
.nf-image-info {
position: absolute;
left: 28px;
bottom: 28px;
z-index: 3;
color: white;
}
.nf-image-info span {
display: block;
font-size: 8px;
letter-spacing: 2px;
color:
rgba(255,255,255,.72);
margin-bottom: 8px;
}
.nf-image-info strong {
font-family:
Georgia,serif;
font-size: 28px;
line-height: 1;
font-weight: 400;
}
/* COUNTER */
.nf-image-number {
position: absolute;
right: 25px;
bottom: 25px;
z-index: 4;
display: flex;
align-items: center;
gap: 9px;
color: white;
font-size: 9px;
letter-spacing: 1px;
}
.nf-image-number i {
width: 28px;
height: 1px;
background:
rgba(255,255,255,.7);
}
/* =========================================================
SMART PROPERTY DISCOVERY
MOVED AWAY FROM IMAGE TEXT
========================================================= */
.nf-discovery-badge {
position: absolute;
/*
Previously this was bottom:92px.
It is now moved toward the upper-middle
outer edge so it never covers the image copy.
*/
left: -28px;
top: 185px;
z-index: 7;
display: flex;
align-items: center;
gap: 12px;
padding:
12px 16px;
background:
rgba(255,255,255,.88);
border:
1px solid
rgba(255,255,255,.95);
box-shadow:
0 18px 38px
rgba(40,38,30,.14);
backdrop-filter:
blur(16px);
-webkit-backdrop-filter:
blur(16px);
transition:
.35s ease;
}
.nf-discovery-badge:hover {
transform:
translateY(-4px);
}
.nf-discovery-icon {
width: 30px;
height: 30px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background:
var(--nf-green);
color: white;
font-size: 13px;
}
.nf-discovery-badge span {
display: block;
font-size: 7px;
letter-spacing: 1.5px;
color:
var(--nf-gold);
}
.nf-discovery-badge strong {
display: block;
margin-top: 2px;
font-size: 10px;
color:
var(--nf-dark);
}
/* LOCATION */
.nf-location-tag {
position: absolute;
right: -20px;
bottom: 25px;
z-index: 6;
display: flex;
align-items: center;
gap: 9px;
padding:
10px 14px;
background:
rgba(247,242,232,.9);
border:
1px solid
rgba(255,255,255,.9);
box-shadow:
0 12px 30px
rgba(40,38,30,.11);
backdrop-filter:
blur(12px);
}
.nf-location-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background:
var(--nf-gold);
box-shadow:
0 0 0 5px
rgba(185,154,97,.10);
}
.nf-location-tag small {
display: block;
font-size: 6px;
letter-spacing: 1.5px;
color:
rgba(32,35,31,.4);
}
.nf-location-tag strong {
display: block;
font-size: 10px;
margin-top: 2px;
}
/* SIDE BRAND */
.nf-side-brand {
position: absolute;
right: -4px;
top: 48%;
z-index: 5;
transform:
translateY(-50%);
display: flex;
align-items: center;
gap: 9px;
writing-mode:
vertical-rl;
}
.nf-side-brand span {
font-size: 7px;
letter-spacing: 2.5px;
color:
rgba(32,35,31,.32);
}
.nf-side-brand i {
width: 1px;
height: 30px;
background:
rgba(185,154,97,.45);
}
.nf-side-brand small {
font-size: 6px;
letter-spacing: 2px;
color:
rgba(32,35,31,.25);
}
/* =========================================================
ENQUIRY
========================================================= */
.nf-enquiry-wrapper {
position: relative;
z-index: 8;
max-width: 1400px;
margin:
55px auto 0;
padding:
20px 0 4px;
border-top:
1px solid
rgba(32,35,31,.18);
display: grid;
grid-template-columns:
230px
minmax(0,1fr);
align-items: center;
gap: 35px;
}
.nf-enquiry-heading span {
display: block;
font-size: 7px;
letter-spacing: 2px;
color:
var(--nf-gold);
font-weight: 700;
margin-bottom: 6px;
}
.nf-enquiry-heading strong {
display: block;
font-size: 12px;
font-weight: 600;
}
.nf-enquiry-form {
width: 100%;
display: grid;
grid-template-columns:
minmax(110px,1fr)
minmax(110px,1fr)
minmax(125px,1.1fr)
minmax(145px,1.25fr)
auto;
align-items: end;
gap: 14px;
}
.nf-input {
min-width: 0;
display: flex;
flex-direction: column;
}
.nf-input label {
height: 11px;
font-size: 7px;
line-height: 11px;
text-transform: uppercase;
letter-spacing: 1.4px;
color:
rgba(32,35,31,.48);
margin-bottom: 6px;
}
.nf-input input,
.nf-input select {
box-sizing: border-box;
width: 100%;
height: 35px;
min-height: 35px;
border: none;
border-bottom:
1px solid
rgba(32,35,31,.22);
background:
transparent;
outline: none;
padding: 0;
margin: 0;
font-family:
inherit;
font-size: 10px;
line-height: 35px;
color:
var(--nf-dark);
}
.nf-input input:focus,
.nf-input select:focus {
border-color:
var(--nf-green);
}
.nf-input input::placeholder {
color:
rgba(32,35,31,.35);
}
.nf-submit {
height: 35px;
min-height: 35px;
align-self: end;
padding:
0 18px;
border: none;
background:
var(--nf-dark);
color: white;
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
cursor: pointer;
font-family:
inherit;
font-size: 9px;
font-weight: 700;
white-space: nowrap;
transition:
.3s ease;
}
.nf-submit svg {
width: 15px;
height: 15px;
fill: none;
stroke: currentColor;
stroke-width: 1.6;
transition:
.3s ease;
}
.nf-submit:hover {
background:
var(--nf-green);
transform:
translateY(-2px);
}
.nf-submit:hover svg {
transform:
translateX(3px);
}
/* =========================================================
MODAL
========================================================= */
.nf-modal {
position: fixed;
inset: 0;
z-index: 999999;
display: flex;
align-items: center;
justify-content: center;
visibility: hidden;
opacity: 0;
transition:
.4s ease;
}
.nf-modal.active {
visibility: visible;
opacity: 1;
}
.nf-modal-overlay {
position: absolute;
inset: 0;
background:
rgba(45,53,47,.42);
backdrop-filter:
blur(12px)
brightness(1.08);
-webkit-backdrop-filter:
blur(12px)
brightness(1.08);
}
.nf-modal-box {
position: relative;
z-index: 2;
width:
min(850px,90%);
max-height:
90vh;
overflow-y: auto;
background:
linear-gradient(
145deg,
#fffdf8 0%,
#f8f3e9 100%
);
padding:
55px;
border:
1px solid
rgba(255,255,255,.95);
box-shadow:
0 35px 100px
rgba(25,35,29,.24),
0 0 0 1px
rgba(185,154,97,.08);
transform:
translateY(30px)
scale(.97);
transition:
.45s ease;
}
.nf-modal.active
.nf-modal-box {
transform:
translateY(0)
scale(1);
}
.nf-modal-close {
position: absolute;
top: 20px;
right: 22px;
width: 35px;
height: 35px;
border-radius: 50%;
border:
1px solid
rgba(32,35,31,.14);
background:
rgba(255,255,255,.8);
cursor: pointer;
font-size: 20px;
color:
var(--nf-dark);
transition:
.3s ease;
}
.nf-modal-close:hover {
background:
var(--nf-green);
color: white;
transform:
rotate(90deg);
}
.nf-modal-eyebrow {
font-size: 8px;
letter-spacing: 2.5px;
color:
var(--nf-gold);
font-weight: 700;
margin-bottom: 18px;
}
.nf-modal-box h2 {
font-size: 43px;
line-height: 1.05;
letter-spacing: -2px;
font-weight: 500;
margin: 0;
}
.nf-modal-box h2 span {
color:
var(--nf-green);
font-family:
Georgia,serif;
font-style: italic;
font-weight: 400;
}
.nf-modal-intro {
max-width: 600px;
margin:
20px 0 35px;
font-size: 13px;
line-height: 1.8;
color:
rgba(32,35,31,.58);
}
.nf-process {
display: grid;
grid-template-columns:
1fr 1fr;
gap: 1px;
background:
rgba(32,35,31,.12);
border:
1px solid
rgba(32,35,31,.12);
}
.nf-process-item {
background:
rgba(255,253,248,.85);
padding: 25px;
display: flex;
gap: 20px;
transition:
.3s ease;
}
.nf-process-item:hover {
background:
#ffffff;
}
.nf-process-number {
font-family:
Georgia,serif;
font-size: 17px;
color:
var(--nf-gold);
}
.nf-process-item h3 {
margin:
0 0 8px;
font-size: 13px;
}
.nf-process-item p {
margin: 0;
font-size: 10px;
line-height: 1.6;
color:
rgba(32,35,31,.55);
}
.nf-modal-footer {
margin-top: 28px;
padding-top: 20px;
border-top:
1px solid
var(--nf-border);
display: flex;
justify-content: space-between;
align-items: center;
}
.nf-modal-footer span {
font-family:
Georgia,serif;
font-size: 16px;
color:
var(--nf-green);
}
.nf-modal-footer small {
font-size: 8px;
letter-spacing: 1px;
text-transform:
uppercase;
color:
rgba(32,35,31,.4);
}
/* =========================================================
RESPONSIVE
========================================================= */
@media (max-width:1000px) {
.nf-premium-hero {
padding:
60px 25px 25px;
}
.nf-hero-inner {
grid-template-columns: 1fr;
gap: 50px;
}
.nf-visual {
min-height: 450px;
}
.nf-enquiry-wrapper {
grid-template-columns: 1fr;
gap: 25px;
}
.nf-enquiry-form {
grid-template-columns:
1fr 1fr;
}
}
@media (max-width:600px) {
.nf-premium-hero {
padding:
45px 18px 22px;
}
.nf-hero-content h1 {
font-size: 48px;
letter-spacing:
-2.5px;
}
.nf-hero-description {
font-size: 14px;
}
.nf-hero-actions {
align-items:
flex-start;
flex-direction:
column;
gap: 15px;
}
.nf-trust-row {
gap: 10px;
}
.nf-trust-item span {
font-size: 7px;
}
.nf-property-image {
height: 390px;
}
.nf-rotating-ring {
width: 110px;
height: 110px;
right: -25px;
}
/* MOBILE BADGE POSITION */
.nf-discovery-badge {
left: 10px;
top: 125px;
}
.nf-location-tag {
right: -5px;
}
.nf-side-brand {
display: none;
}
.nf-architectural-lines {
right: -50px;
}
.nf-enquiry-form {
grid-template-columns:
1fr;
}
.nf-submit {
width: 100%;
}
.nf-modal-box {
padding:
35px 25px;
}
.nf-modal-box h2 {
font-size: 32px;
}
.nf-process {
grid-template-columns:
1fr;
}
.nf-modal-footer {
flex-direction:
column;
align-items:
flex-start;
gap: 8px;
}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-19ce28c *//* ==========================================================
NIVASA FIRST — PROPERTY INTELLIGENCE MAP
PREMIUM LIGHT BEIGE + CHARCOAL + GOLD
========================================================== */
.nf-property-intelligence {
--nf-beige: #eee5d4;
--nf-beige-light: #f8f4ec;
--nf-beige-dark: #dfd2bc;
--nf-green: #3d6b53;
--nf-green-dark: #243d31;
--nf-charcoal: #20241f;
--nf-charcoal-2: #292e28;
--nf-gold: #b59458;
--nf-gold-light: #d4bb86;
--nf-white: #ffffff;
width: 100%;
background:
linear-gradient(
135deg,
#f7f1e7 0%,
#e9decc 48%,
#f4ecdf 100%
);
color: var(--nf-charcoal);
overflow: hidden;
}
.nf-map-shell {
max-width: 1500px;
margin: auto;
padding:
75px 5% 55px;
position: relative;
}
/* ==========================================================
HEADER
========================================================== */
.nf-map-header {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 50px;
margin-bottom: 38px;
}
.nf-map-eyebrow {
display: flex;
align-items: center;
gap: 10px;
color: var(--nf-gold);
font-size: 8px;
font-weight: 800;
letter-spacing: 2.6px;
margin-bottom: 15px;
}
.nf-map-eyebrow span {
width: 30px;
height: 1px;
background: var(--nf-gold);
}
.nf-map-brand h2 {
margin: 0;
font-size:
clamp(42px, 5vw, 72px);
line-height: .9;
letter-spacing: -3px;
font-weight: 450;
}
.nf-map-brand h2 em {
color: var(--nf-gold);
font-family: Georgia, serif;
font-weight: 400;
}
.nf-map-brand p {
max-width: 540px;
margin:
20px 0 0;
color:
rgba(32,36,31,.57);
font-size: 11px;
line-height: 1.75;
}
.nf-map-brand p strong {
color: var(--nf-charcoal);
}
.nf-map-stat {
min-width: 145px;
padding:
18px 20px;
background:
var(--nf-charcoal);
color: white;
border-left:
3px solid var(--nf-gold);
}
.nf-map-stat span {
display: block;
color:
var(--nf-gold-light);
font-size: 6px;
font-weight: 800;
letter-spacing: 1.5px;
}
.nf-map-stat strong {
display: block;
margin: 5px 0 0;
font-family: Georgia, serif;
font-size: 38px;
font-weight: 400;
}
.nf-map-stat small {
color:
rgba(255,255,255,.55);
font-size: 6px;
letter-spacing: 1.1px;
}
/* ==========================================================
WORKSPACE
========================================================== */
.nf-map-workspace {
display: grid;
grid-template-columns:
360px minmax(0, 1fr);
min-height: 680px;
background:
var(--nf-beige-light);
border:
1px solid rgba(32,36,31,.1);
box-shadow:
0 35px 80px
rgba(32,36,31,.13);
}
/* ==========================================================
PROPERTY PANEL
========================================================== */
.nf-property-panel {
position: relative;
z-index: 10;
padding:
27px 25px 20px;
background:
#f9f5ed;
border-right:
1px solid rgba(32,36,31,.09);
overflow-y: auto;
}
.nf-panel-top {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 15px;
}
.nf-small-label {
color: var(--nf-gold);
font-size: 6px;
font-weight: 800;
letter-spacing: 1.6px;
}
.nf-panel-top h3 {
margin:
8px 0 0;
max-width: 220px;
font-size: 25px;
line-height: 1;
letter-spacing: -1px;
font-weight: 500;
}
.nf-panel-top h3 em {
color: var(--nf-gold);
font-family: Georgia, serif;
font-weight: 400;
}
.nf-reset {
border: 0;
background: transparent;
color: rgba(32,36,31,.4);
font-size: 6px;
font-weight: 800;
letter-spacing: 1px;
cursor: pointer;
}
/* ==========================================================
SEARCH
========================================================== */
.nf-search-wrap {
position: relative;
margin-top: 25px;
}
.nf-search-wrap input {
width: 100%;
height: 50px;
padding:
0 40px;
border:
1px solid rgba(32,36,31,.14);
background:
white;
outline: none;
color: var(--nf-charcoal);
font-family: inherit;
font-size: 10px;
transition: .3s ease;
}
.nf-search-wrap input:focus {
border-color:
var(--nf-gold);
box-shadow:
0 8px 25px
rgba(181,148,88,.1);
}
.nf-search-icon {
position: absolute;
left: 14px;
top: 15px;
color: var(--nf-gold);
font-size: 19px;
z-index: 2;
}
.nf-search-clear {
position: absolute;
right: 11px;
top: 13px;
width: 25px;
height: 25px;
border: 0;
border-radius: 50%;
background:
#eee9df;
color:
rgba(32,36,31,.5);
cursor: pointer;
}
/* ==========================================================
SEARCH SUGGESTIONS
========================================================== */
.nf-search-suggestions {
position: relative;
z-index: 50;
}
.nf-search-suggestion {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
padding: 13px 12px;
background: white;
border-bottom:
1px solid rgba(32,36,31,.07);
cursor: pointer;
transition: .2s ease;
}
.nf-search-suggestion:hover {
background:
#f4eee3;
}
.nf-suggestion-icon {
width: 29px;
height: 29px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background:
rgba(181,148,88,.12);
color:
var(--nf-gold);
font-size: 12px;
}
.nf-suggestion-title {
display: block;
color:
var(--nf-charcoal);
font-size: 9px;
font-weight: 700;
}
.nf-suggestion-address {
display: block;
margin-top: 3px;
color:
rgba(32,36,31,.45);
font-size: 7px;
}
/* ==========================================================
QUICK SEARCH
========================================================== */
.nf-quick-search {
margin-top: 18px;
}
.nf-quick-search > span {
display: block;
margin-bottom: 9px;
color:
rgba(32,36,31,.4);
font-size: 6px;
font-weight: 800;
letter-spacing: 1.3px;
}
.nf-chip-row {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.nf-location-chip {
padding:
7px 9px;
border:
1px solid rgba(32,36,31,.1);
background:
transparent;
color:
rgba(32,36,31,.7);
font-size: 6.5px;
cursor: pointer;
transition: .25s ease;
}
.nf-location-chip:hover {
background:
var(--nf-charcoal);
color: white;
border-color:
var(--nf-charcoal);
}
/* ==========================================================
FILTERS
========================================================== */
.nf-filter-section {
margin-top: 25px;
}
.nf-filter-title {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 10px;
color:
rgba(32,36,31,.42);
font-size: 6px;
font-weight: 800;
letter-spacing: 1.3px;
}
.nf-filter-title span {
color:
var(--nf-gold);
}
.nf-filter-grid {
display: grid;
grid-template-columns:
1fr 1fr;
gap: 5px;
}
.nf-filter {
display: flex;
align-items: center;
gap: 7px;
padding:
9px 8px;
border:
1px solid rgba(32,36,31,.08);
background:
white;
color:
rgba(32,36,31,.62);
font-size: 7px;
text-align: left;
cursor: pointer;
transition: .25s ease;
}
.nf-filter i {
width: 6px;
height: 6px;
border-radius: 50%;
background:
#d4d0c7;
}
.nf-filter.active {
background:
var(--nf-charcoal);
color:
white;
border-color:
var(--nf-charcoal);
}
.nf-filter.active i {
background:
var(--nf-gold-light);
}
/* ==========================================================
PROPERTY TYPE
========================================================== */
.nf-filter-pills {
display: flex;
flex-wrap: wrap;
gap: 5px;
}
.nf-type-filter {
padding:
8px 10px;
border:
1px solid rgba(32,36,31,.1);
background:
transparent;
color:
rgba(32,36,31,.6);
font-size: 6.5px;
cursor: pointer;
}
.nf-type-filter.active {
background:
var(--nf-green);
color:
white;
border-color:
var(--nf-green);
}
/* ==========================================================
CONFIGURATION
========================================================== */
.nf-config-row {
display:
flex;
gap: 6px;
}
.nf-config-filter {
width: 34px;
height: 32px;
border:
1px solid rgba(32,36,31,.1);
background:
white;
color:
rgba(32,36,31,.65);
font-size: 7px;
cursor: pointer;
}
.nf-config-filter.active {
background:
var(--nf-gold);
color:
white;
border-color:
var(--nf-gold);
}
/* ==========================================================
SUMMARY
========================================================== */
.nf-result-summary {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 27px;
padding-top: 17px;
border-top:
1px solid rgba(32,36,31,.1);
}
.nf-result-summary strong {
display: inline-block;
color:
var(--nf-charcoal);
font-family:
Georgia, serif;
font-size: 25px;
font-weight: 400;
}
.nf-result-summary span {
margin-left: 5px;
color:
rgba(32,36,31,.4);
font-size: 5px;
font-weight: 800;
letter-spacing: 1px;
}
.nf-live-dot {
display: flex;
align-items: center;
gap: 5px;
color:
rgba(32,36,31,.4);
font-size: 5px;
font-weight: 800;
letter-spacing: 1px;
}
.nf-live-dot i {
width: 5px;
height: 5px;
border-radius: 50%;
background:
#4d8b61;
box-shadow:
0 0 0 4px rgba(77,139,97,.1);
}
/* ==========================================================
PROJECT LIST
========================================================== */
.nf-project-list {
margin-top: 14px;
}
.nf-mini-project {
display: grid;
grid-template-columns: 30px 1fr auto;
gap: 9px;
align-items: center;
padding:
10px 7px;
border-bottom:
1px solid rgba(32,36,31,.07);
cursor: pointer;
transition: .2s ease;
}
.nf-mini-project:hover {
background:
white;
}
.nf-mini-number {
width: 25px;
height: 25px;
display: flex;
align-items: center;
justify-content: center;
background:
var(--nf-charcoal);
color:
var(--nf-gold-light);
font-size: 6px;
}
.nf-mini-name {
display: block;
color:
var(--nf-charcoal);
font-size: 8px;
font-weight: 700;
}
.nf-mini-location {
display: block;
margin-top: 3px;
color:
rgba(32,36,31,.4);
font-size: 6px;
}
.nf-mini-arrow {
color:
var(--nf-gold);
font-size: 13px;
}
/* ==========================================================
MAP
========================================================== */
.nf-map-area {
position: relative;
min-height: 680px;
overflow: hidden;
background:
#dfe3dc;
}
.nf-google-map {
position: absolute;
inset: 0;
}
/* ==========================================================
MAP OVERLAYS
========================================================== */
.nf-zone-compass {
position: absolute;
top: 18px;
left: 18px;
z-index: 5;
padding: 9px;
background:
rgba(248,244,236,.92);
backdrop-filter:
blur(12px);
box-shadow:
0 12px 30px rgba(32,36,31,.12);
}
.nf-compass-title {
margin-bottom: 7px;
color:
rgba(32,36,31,.4);
font-size: 5px;
font-weight: 800;
letter-spacing: 1.2px;
text-align: center;
}
.nf-compass-grid {
display: grid;
grid-template-columns:
1fr 1fr;
gap: 4px;
}
.nf-compass-zone {
width: 65px;
height: 40px;
border: 0;
background:
rgba(32,36,31,.05);
color:
rgba(32,36,31,.55);
font-size: 5px;
font-weight: 800;
letter-spacing: .7px;
cursor: pointer;
}
.nf-compass-zone span {
display: block;
margin-bottom: 2px;
color:
var(--nf-gold);
font-family: Georgia, serif;
font-size: 11px;
}
.nf-compass-zone:hover {
background:
var(--nf-charcoal);
color:
white;
}
/* ==========================================================
LEGEND
========================================================== */
.nf-map-legend {
position: absolute;
right: 18px;
top: 18px;
z-index: 5;
display: flex;
gap: 12px;
padding:
11px 14px;
background:
rgba(248,244,236,.92);
backdrop-filter:
blur(12px);
box-shadow:
0 12px 30px rgba(32,36,31,.1);
}
.nf-map-legend span {
display: flex;
align-items: center;
gap: 5px;
color:
rgba(32,36,31,.55);
font-size: 5px;
font-weight: 800;
}
.nf-map-legend i {
width: 6px;
height: 6px;
border-radius: 50%;
}
.legend-apartment {
background:
var(--nf-gold);
}
.legend-villa {
background:
var(--nf-green);
}
.legend-plot {
background:
#8d7760;
}
/* ==========================================================
MAP LABEL
========================================================== */
.nf-map-label {
position: absolute;
bottom: 22px;
left: 22px;
z-index: 5;
pointer-events: none;
}
.nf-map-label span {
display: block;
color:
rgba(32,36,31,.3);
font-size: 6px;
font-weight: 800;
letter-spacing: 2px;
}
.nf-map-label strong {
color:
rgba(32,36,31,.55);
font-family:
Georgia, serif;
font-size: 20px;
font-weight: 400;
}
/* ==========================================================
SELECTED PROJECT CARD
========================================================== */
.nf-selected-project {
position: absolute;
z-index: 10;
right: 20px;
bottom: 20px;
width: 330px;
display: grid;
grid-template-columns: 42px 1fr;
gap: 12px;
padding:
18px;
background:
rgba(32,36,31,.94);
backdrop-filter:
blur(18px);
color:
white;
box-shadow:
0 25px 60px
rgba(32,36,31,.25);
opacity: 0;
transform:
translateY(15px);
pointer-events: none;
transition: .35s ease;
}
.nf-selected-project.active {
opacity: 1;
transform:
translateY(0);
pointer-events: auto;
}
.nf-close-project {
position: absolute;
right: 8px;
top: 7px;
border: 0;
background: transparent;
color:
rgba(255,255,255,.5);
font-size: 16px;
cursor: pointer;
}
.nf-selected-number {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border:
1px solid rgba(212,187,134,.4);
color:
var(--nf-gold-light);
font-family:
Georgia, serif;
font-size: 13px;
}
.nf-selected-type {
color:
var(--nf-gold-light);
font-size: 5px;
font-weight: 800;
letter-spacing: 1.3px;
}
.nf-selected-project h4 {
margin:
5px 0 4px;
font-family:
Georgia, serif;
font-size: 21px;
font-weight: 400;
}
.nf-selected-project p {
margin: 0;
color:
rgba(255,255,255,.55);
font-size: 7px;
line-height: 1.5;
}
.nf-selected-meta {
display: flex;
gap: 7px;
margin-top: 10px;
}
.nf-selected-meta span {
padding:
5px 7px;
background:
rgba(255,255,255,.07);
color:
rgba(255,255,255,.65);
font-size: 5px;
}
.nf-selected-explore {
grid-column:
1 / -1;
display: flex;
justify-content: space-between;
align-items: center;
padding:
10px;
border:
1px solid rgba(212,187,134,.3);
background:
transparent;
color:
white;
font-size: 6px;
font-weight: 800;
letter-spacing: 1px;
cursor: pointer;
}
.nf-selected-explore:hover {
background:
var(--nf-gold);
color:
var(--nf-charcoal);
}
/* ==========================================================
BOTTOM STRIP
========================================================== */
.nf-map-bottom {
display: flex;
align-items: center;
gap: 22px;
padding:
17px 20px;
background:
var(--nf-charcoal);
color: white;
}
.nf-map-bottom-item {
flex: 1;
}
.nf-map-bottom-item span {
display: block;
margin-bottom: 4px;
color:
var(--nf-gold-light);
font-size: 5px;
font-weight: 800;
letter-spacing: 1.3px;
}
.nf-map-bottom-item strong {
color:
rgba(255,255,255,.75);
font-size: 8px;
font-weight: 400;
}
.nf-map-bottom-line {
width: 1px;
height: 28px;
background:
rgba(255,255,255,.12);
}
/* ==========================================================
CUSTOM GOOGLE MARKERS
========================================================== */
.nf-map-marker {
position: relative;
width: 35px;
height: 35px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background:
var(--nf-charcoal);
border:
2px solid var(--nf-gold-light);
color:
var(--nf-gold-light);
font-size: 7px;
font-weight: 800;
box-shadow:
0 7px 18px
rgba(32,36,31,.3);
cursor: pointer;
transition: .25s ease;
}
.nf-map-marker::after {
content: "";
position: absolute;
width: 48px;
height: 48px;
border:
1px solid rgba(181,148,88,.4);
border-radius: 50%;
animation:
nfMarkerPulse 2.8s infinite;
}
.nf-map-marker:hover {
transform:
scale(1.18);
background:
var(--nf-gold);
color:
var(--nf-charcoal);
}
.nf-map-marker.villa {
border-color:
#79a989;
}
.nf-map-marker.plot {
border-color:
#b08f70;
}
@keyframes nfMarkerPulse {
0% {
transform:
scale(.75);
opacity:
.75;
}
70% {
transform:
scale(1.35);
opacity:
0;
}
100% {
opacity:
0;
}
}
/* ==========================================================
RESPONSIVE
========================================================== */
@media (max-width: 1100px) {
.nf-map-workspace {
grid-template-columns:
320px minmax(0, 1fr);
}
}
@media (max-width: 800px) {
.nf-map-header {
display: block;
}
.nf-map-stat {
display: inline-block;
margin-top: 25px;
}
.nf-map-workspace {
grid-template-columns:
1fr;
}
.nf-property-panel {
border-right: 0;
border-bottom:
1px solid rgba(32,36,31,.1);
}
.nf-map-area {
min-height: 600px;
}
}
@media (max-width: 550px) {
.nf-map-shell {
padding:
50px 14px 35px;
}
.nf-map-brand h2 {
font-size:
45px;
}
.nf-map-legend {
display: none;
}
.nf-selected-project {
left: 15px;
right: 15px;
bottom: 15px;
width: auto;
}
.nf-map-bottom {
display: block;
}
.nf-map-bottom-line {
width: 100%;
height: 1px;
margin: 12px 0;
}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-eaa40ba *//* =========================================================
NIVASA FIRST
WHY CHOOSE US — PREMIUM COMPACT SECTION
========================================================= */
.nf-why {
--bg: #1d2520;
--panel: #29382f;
--panel-light: #33483b;
--ivory: #f6f1e6;
--muted: rgba(246,241,230,.56);
--gold: #c8a86c;
--gold-light: #dfc58e;
position: relative;
overflow: hidden;
background:
radial-gradient(
circle at 88% 10%,
rgba(200,168,108,.11),
transparent 28%
),
linear-gradient(
135deg,
#18201b 0%,
#222d26 55%,
#19211c 100%
);
color: var(--ivory);
}
/* =========================================================
BACKGROUND
========================================================= */
.nf-why-glow {
position: absolute;
width: 500px;
height: 500px;
right: -260px;
top: -260px;
border-radius: 50%;
border:
1px solid
rgba(200,168,108,.13);
pointer-events: none;
}
.nf-why-glow::after {
content: "";
position: absolute;
inset: 45px;
border-radius: 50%;
border:
1px solid
rgba(200,168,108,.06);
}
/* =========================================================
WRAPPER
========================================================= */
.nf-why-wrap {
position: relative;
z-index: 2;
max-width: 1380px;
margin: 0 auto;
padding:
68px 5.5% 0;
}
/* =========================================================
TOP
========================================================= */
.nf-why-top {
margin-bottom: 35px;
}
.nf-why-label {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 13px;
color: var(--gold);
font-size: 8px;
font-weight: 700;
letter-spacing: 2.5px;
}
.nf-why-label span {
width: 30px;
height: 1px;
background: var(--gold);
}
.nf-why-top-line {
font-size: clamp(35px,4.5vw,60px);
line-height: .95;
letter-spacing: -2.5px;
font-weight: 450;
color: #fff;
}
.nf-why-top-line em {
font-family: Georgia, serif;
color: var(--gold-light);
font-weight: 400;
}
/* =========================================================
MAIN
========================================================= */
.nf-why-main {
display: grid;
grid-template-columns:
.82fr 1.18fr;
min-height: 455px;
background:
var(--panel);
border:
1px solid
rgba(255,255,255,.075);
box-shadow:
0 25px 70px
rgba(0,0,0,.24);
}
/* =========================================================
IMAGE
========================================================= */
.nf-why-visual {
position: relative;
min-height: 455px;
overflow: visible;
}
.nf-why-visual > img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition:
transform 1s
cubic-bezier(.2,.7,.2,1);
}
.nf-why-visual:hover > img {
transform: scale(1.035);
}
.nf-why-image-overlay {
position: absolute;
inset: 0;
z-index: 1;
background:
linear-gradient(
180deg,
rgba(16,23,19,.08) 20%,
rgba(16,23,19,.82) 100%
);
}
/* =========================================================
TRUST BADGE
========================================================= */
.nf-trust-badge {
position: absolute;
z-index: 3;
top: 18px;
left: 18px;
display: flex;
align-items: center;
gap: 10px;
padding: 9px 13px 9px 9px;
background:
rgba(19,27,22,.86);
border:
1px solid
rgba(255,255,255,.17);
backdrop-filter:
blur(14px);
}
.nf-trust-check {
width: 27px;
height: 27px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--gold);
color: #1c241f;
font-size: 12px;
font-weight: 800;
}
.nf-trust-badge-text span {
display: block;
color: rgba(255,255,255,.48);
font-size: 6px;
letter-spacing: 1.5px;
}
.nf-trust-badge-text strong {
display: block;
margin-top: 3px;
color: #fff;
font-size: 8px;
letter-spacing: .8px;
}
/* =========================================================
IMAGE BOTTOM
========================================================= */
.nf-why-image-bottom {
position: absolute;
z-index: 3;
left: 23px;
bottom: 23px;
}
.nf-why-image-bottom span {
display: block;
margin-bottom: 6px;
color: var(--gold-light);
font-size: 6px;
letter-spacing: 2px;
font-weight: 700;
}
.nf-why-image-bottom strong {
display: block;
color: #fff;
font-family: Georgia, serif;
font-size: 29px;
line-height: 1;
font-weight: 400;
}
/* =========================================================
CLARITY CARD
========================================================= */
.nf-clarity-card {
position: absolute;
z-index: 5;
right: -38px;
bottom: 29px;
display: flex;
align-items: center;
gap: 11px;
width: 175px;
padding: 12px 14px;
box-sizing: border-box;
background:
rgba(247,243,233,.97);
color: #202822;
box-shadow:
0 15px 35px
rgba(0,0,0,.28);
}
.nf-clarity-icon {
flex: 0 0 31px;
width: 31px;
height: 31px;
display: flex;
align-items: center;
justify-content: center;
border:
1px solid
var(--gold);
border-radius: 50%;
color: var(--gold);
font-size: 13px;
}
.nf-clarity-content {
min-width: 0;
}
.nf-clarity-content small {
display: block;
margin-bottom: 4px;
color: #8b7146;
font-size: 6px;
letter-spacing: 1.4px;
font-weight: 700;
}
.nf-clarity-content strong {
display: block;
color: #202822;
font-family: Georgia, serif;
font-size: 11px;
line-height: 1.15;
font-weight: 400;
}
/* =========================================================
RIGHT CONTENT
========================================================= */
.nf-why-content {
padding:
38px 48px 34px;
display: flex;
flex-direction: column;
justify-content: center;
}
.nf-why-intro > span {
color: var(--gold);
font-size: 7px;
font-weight: 700;
letter-spacing: 2px;
}
.nf-why-intro h2 {
margin:
9px 0 10px;
color: #fff;
font-size:
clamp(30px,3.2vw,43px);
line-height: .98;
letter-spacing: -1.7px;
font-weight: 500;
}
.nf-why-intro h2 em {
display: block;
font-family: Georgia, serif;
color: var(--gold-light);
font-weight: 400;
}
.nf-why-intro p {
max-width: 600px;
margin: 0;
color: var(--muted);
font-size: 10px;
line-height: 1.75;
}
/* =========================================================
PROOF ROW
========================================================= */
.nf-proof-row {
display: grid;
grid-template-columns:
repeat(3,1fr);
gap: 0;
margin:
23px 0 20px;
border-top:
1px solid
rgba(255,255,255,.1);
border-bottom:
1px solid
rgba(255,255,255,.1);
}
.nf-proof-stat {
display: flex;
align-items: center;
gap: 9px;
padding:
13px 12px;
border-right:
1px solid
rgba(255,255,255,.1);
}
.nf-proof-stat:last-child {
border-right: 0;
}
.nf-proof-stat strong {
color: #fff;
font-family: Georgia, serif;
font-size: 27px;
font-weight: 400;
letter-spacing: -1px;
}
.nf-proof-stat strong span {
color: var(--gold);
}
.nf-proof-stat small {
color: rgba(255,255,255,.4);
font-size: 6px;
line-height: 1.35;
letter-spacing: 1px;
}
/* =========================================================
REASONS
========================================================= */
.nf-reasons {
display: grid;
grid-template-columns:
repeat(3,1fr);
gap: 10px;
}
.nf-reason {
display: flex;
gap: 9px;
padding:
11px 10px;
background:
rgba(255,255,255,.025);
border:
1px solid
rgba(255,255,255,.055);
transition:
.3s ease;
}
.nf-reason:hover {
background:
rgba(200,168,108,.07);
border-color:
rgba(200,168,108,.25);
transform:
translateY(-3px);
}
.nf-reason-number {
color: var(--gold);
font-family: Georgia, serif;
font-size: 10px;
}
.nf-reason-body h3 {
margin:
0 0 5px;
color: #fff;
font-size: 8px;
font-weight: 700;
}
.nf-reason-body p {
margin: 0;
color: rgba(255,255,255,.38);
font-size: 7px;
line-height: 1.55;
}
/* =========================================================
BUTTONS
========================================================= */
.nf-why-actions {
display: flex;
align-items: center;
gap: 12px;
margin-top: 20px;
}
.nf-why-primary {
display: inline-flex;
align-items: center;
gap: 14px;
min-height: 37px;
padding: 0 15px;
background:
var(--gold);
color:
#202822;
text-decoration: none;
font-size: 7px;
font-weight: 800;
letter-spacing: .3px;
transition: .3s ease;
}
.nf-why-primary span {
font-size: 13px;
}
.nf-why-primary:hover {
background:
var(--gold-light);
transform:
translateY(-2px);
}
.nf-why-link {
display: inline-flex;
align-items: center;
gap: 9px;
color:
rgba(255,255,255,.68);
text-decoration: none;
font-size: 8px;
transition: .3s ease;
}
.nf-why-link span {
color: var(--gold);
font-size: 13px;
}
.nf-why-link:hover {
color: #fff;
}
/* =========================================================
MOVING STRIP
========================================================= */
.nf-brand-strip {
width: 100%;
margin-top: 42px;
overflow: hidden;
border-top:
1px solid
rgba(255,255,255,.09);
border-bottom:
1px solid
rgba(255,255,255,.09);
background:
rgba(255,255,255,.018);
}
.nf-brand-track {
display: flex;
width: max-content;
animation:
nfBrandMove
32s
linear
infinite;
}
.nf-brand-track span {
display: flex;
align-items: center;
gap: 20px;
padding:
14px 25px;
color:
rgba(255,255,255,.39);
white-space: nowrap;
font-size: 7px;
letter-spacing: 1.8px;
font-weight: 700;
}
.nf-brand-track b {
color: var(--gold);
font-size: 10px;
}
@keyframes nfBrandMove {
from {
transform: translateX(0);
}
to {
transform: translateX(-50%);
}
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 1000px) {
.nf-why-main {
grid-template-columns:
1fr;
}
.nf-why-visual {
min-height: 390px;
}
.nf-why-content {
padding: 35px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 600px) {
.nf-why-wrap {
padding:
55px 18px 0;
}
.nf-why-top-line {
font-size: 38px;
}
.nf-why-visual {
min-height: 360px;
}
.nf-clarity-card {
right: 12px;
bottom: 20px;
}
.nf-why-content {
padding:
30px 20px;
}
.nf-proof-row {
grid-template-columns:
1fr;
}
.nf-proof-stat {
border-right: 0;
border-bottom:
1px solid
rgba(255,255,255,.1);
}
.nf-proof-stat:last-child {
border-bottom: 0;
}
.nf-reasons {
grid-template-columns:
1fr;
}
.nf-why-actions {
flex-direction:
column;
align-items:
stretch;
}
.nf-why-primary {
justify-content: center;
}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-e54770a *//* =========================================================
NIVASA FIRST — FEATURED PROJECTS
========================================================= */
.nf-featured-projects {
--cream: #eee5d4;
--cream-light: #f8f4ec;
--charcoal: #20241f;
--charcoal-2: #292e28;
--gold: #b59458;
--gold-light: #d1b77d;
position: relative;
overflow: hidden;
background:
radial-gradient(
circle at 12% 10%,
rgba(181,148,88,.13),
transparent 25%
),
linear-gradient(
135deg,
#f5eee2 0%,
#e9decb 50%,
#f3ebdd 100%
);
color: var(--charcoal);
}
/* ================= BACKGROUND ================= */
.nf-fp-bg-orb {
position: absolute;
width: 620px;
height: 620px;
right: -350px;
top: 80px;
border:
1px solid
rgba(32,36,31,.065);
border-radius: 50%;
pointer-events: none;
}
.nf-fp-bg-orb::before {
content: "";
position: absolute;
inset: 70px;
border:
1px solid
rgba(32,36,31,.045);
border-radius: 50%;
}
.nf-fp-bg-orb::after {
content: "";
position: absolute;
inset: 145px;
border:
1px solid
rgba(32,36,31,.035);
border-radius: 50%;
}
/* ================= GRID DETAIL ================= */
.nf-fp-grid-lines {
position: absolute;
inset: 0;
opacity: .25;
pointer-events: none;
background-image:
linear-gradient(
90deg,
transparent 49.9%,
rgba(32,36,31,.035) 50%,
transparent 50.1%
),
linear-gradient(
0deg,
transparent 49.9%,
rgba(32,36,31,.035) 50%,
transparent 50.1%
);
background-size:
90px 90px;
}
/* ================= CONTAINER ================= */
.nf-fp-container {
position: relative;
z-index: 2;
max-width: 1400px;
margin: auto;
padding: 82px 5.5% 70px;
}
/* ================= HEADER ================= */
.nf-fp-header {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 70px;
margin-bottom: 44px;
}
.nf-fp-eyebrow {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 15px;
color: var(--gold);
font-size: 8px;
font-weight: 800;
letter-spacing: 2.6px;
}
.nf-fp-eyebrow span {
width: 31px;
height: 1px;
background: var(--gold);
}
.nf-fp-heading h2 {
margin: 0;
max-width: 650px;
color: var(--charcoal);
font-size: clamp(42px,5vw,68px);
line-height: .94;
letter-spacing: -3px;
font-weight: 450;
}
.nf-fp-heading h2 em {
display: block;
color: var(--gold);
font-family: Georgia, serif;
font-weight: 400;
}
.nf-fp-header-right {
max-width: 340px;
}
.nf-fp-header-right p {
margin: 0 0 17px;
color: rgba(32,36,31,.57);
font-size: 10px;
line-height: 1.75;
}
.nf-fp-header-right strong {
color: var(--charcoal);
}
.nf-fp-view-all {
display: inline-flex;
align-items: center;
gap: 11px;
color: var(--charcoal);
text-decoration: none;
font-size: 8px;
font-weight: 800;
}
.nf-fp-view-all span {
display: flex;
align-items: center;
justify-content: center;
width: 25px;
height: 25px;
border: 1px solid rgba(32,36,31,.2);
border-radius: 50%;
transition: .3s ease;
}
.nf-fp-view-all:hover span {
background: var(--charcoal);
color: var(--cream);
transform: rotate(45deg);
}
/* ================= FOUR EQUAL CARDS ================= */
.nf-fp-grid {
display: grid;
grid-template-columns:
repeat(4, minmax(0, 1fr));
gap: 14px;
}
/* ================= CARD ================= */
.nf-fp-card {
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
background: var(--cream-light);
color: var(--charcoal);
text-decoration: none;
border: 1px solid rgba(32,36,31,.09);
overflow: hidden;
transition:
transform .45s cubic-bezier(.2,.7,.2,1),
box-shadow .45s ease,
border-color .35s ease;
}
.nf-fp-card:hover {
transform: translateY(-9px);
border-color:
rgba(181,148,88,.4);
box-shadow:
0 28px 60px
rgba(32,36,31,.16);
}
/* ================= IMAGE ================= */
.nf-fp-image {
position: relative;
height: 245px;
overflow: hidden;
}
.nf-fp-image img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
transition:
transform 1s cubic-bezier(.2,.7,.2,1);
}
.nf-fp-card:hover
.nf-fp-image img {
transform: scale(1.075);
}
.nf-fp-image-overlay {
position: absolute;
inset: 0;
background:
linear-gradient(
180deg,
rgba(10,15,11,.06) 15%,
rgba(10,15,11,.72) 100%
);
}
/* ================= IMAGE TOP ================= */
.nf-fp-top {
position: absolute;
z-index: 3;
top: 14px;
left: 14px;
right: 14px;
display: flex;
justify-content: space-between;
align-items: center;
}
.nf-fp-number {
color: rgba(255,255,255,.88);
font-family: Georgia, serif;
font-size: 19px;
}
.nf-fp-type {
padding: 6px 8px;
background:
rgba(20,24,20,.78);
border:
1px solid rgba(255,255,255,.15);
backdrop-filter:
blur(9px);
color: #fff;
font-size: 5.5px;
font-weight: 800;
letter-spacing: 1.4px;
}
/* ================= IMAGE BOTTOM ================= */
.nf-fp-image-bottom {
position: absolute;
z-index: 3;
left: 16px;
bottom: 17px;
}
.nf-fp-image-bottom span {
display: block;
margin-bottom: 4px;
color: var(--gold-light);
font-size: 5.5px;
font-weight: 800;
letter-spacing: 1.7px;
}
.nf-fp-image-bottom strong {
color: #fff;
font-family: Georgia, serif;
font-size: 20px;
font-weight: 400;
}
/* ================= ARROW ================= */
.nf-fp-corner {
position: absolute;
z-index: 4;
right: 14px;
bottom: 15px;
width: 31px;
height: 31px;
display: flex;
align-items: center;
justify-content: center;
border:
1px solid rgba(255,255,255,.3);
border-radius: 50%;
color: #fff;
font-size: 12px;
transition: .35s ease;
}
.nf-fp-card:hover
.nf-fp-corner {
background: var(--gold);
border-color: var(--gold);
color: var(--charcoal);
transform: rotate(45deg);
}
/* ================= BODY ================= */
.nf-fp-body {
min-height: 285px;
padding: 20px 19px 17px;
display: flex;
flex-direction: column;
}
.nf-fp-location {
margin-bottom: 9px;
color: var(--gold);
font-size: 5.5px;
font-weight: 800;
letter-spacing: 1.3px;
}
.nf-fp-body h3 {
margin: 0 0 10px;
color: var(--charcoal);
font-size: 23px;
line-height: .95;
letter-spacing: -1px;
font-weight: 600;
}
.nf-fp-body h3 em {
color: var(--gold);
font-family: Georgia, serif;
font-weight: 400;
}
.nf-fp-body > p {
margin: 0;
color: rgba(32,36,31,.52);
font-size: 8px;
line-height: 1.65;
}
/* ================= DETAILS ================= */
.nf-fp-details {
display: grid;
grid-template-columns: 1fr 1fr;
margin-top: 18px;
border-top:
1px solid rgba(32,36,31,.1);
border-bottom:
1px solid rgba(32,36,31,.1);
}
.nf-fp-details > div {
padding: 10px 7px;
}
.nf-fp-details > div + div {
border-left:
1px solid rgba(32,36,31,.1);
}
.nf-fp-details span {
display: block;
margin-bottom: 4px;
color: rgba(32,36,31,.4);
font-size: 5px;
letter-spacing: .9px;
}
.nf-fp-details strong {
display: block;
color: var(--charcoal);
font-size: 8px;
line-height: 1.25;
}
/* ================= FOOTER ================= */
.nf-fp-footer {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: auto;
padding-top: 17px;
}
.nf-fp-footer span {
color: rgba(32,36,31,.4);
font-size: 5.5px;
font-weight: 800;
letter-spacing: 1px;
}
.nf-fp-footer b {
color: var(--charcoal);
font-size: 6px;
letter-spacing: .8px;
transition: .3s ease;
}
.nf-fp-card:hover
.nf-fp-footer b {
color: var(--gold);
}
/* ================= BOTTOM BAR ================= */
.nf-fp-bottom {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 28px;
padding: 17px 19px;
background: var(--charcoal);
color: var(--cream);
}
.nf-fp-bottom-left {
display: flex;
align-items: center;
gap: 12px;
}
.nf-fp-star {
width: 29px;
height: 29px;
display: flex;
align-items: center;
justify-content: center;
border:
1px solid rgba(209,183,125,.45);
border-radius: 50%;
color: var(--gold-light);
}
.nf-fp-bottom small {
display: block;
margin-bottom: 3px;
color: var(--gold-light);
font-size: 5.5px;
font-weight: 800;
letter-spacing: 1.5px;
}
.nf-fp-bottom strong {
color: rgba(255,255,255,.78);
font-size: 9px;
font-weight: 400;
}
.nf-fp-bottom strong em {
color: var(--gold-light);
font-family: Georgia, serif;
}
.nf-fp-compare {
display: inline-flex;
align-items: center;
gap: 11px;
padding: 10px 14px;
border:
1px solid rgba(255,255,255,.2);
color: #fff;
text-decoration: none;
font-size: 6.5px;
font-weight: 700;
transition: .3s ease;
}
.nf-fp-compare span {
color: var(--gold-light);
font-size: 12px;
}
.nf-fp-compare:hover {
background: var(--gold);
border-color: var(--gold);
color: var(--charcoal);
}
/* ================= TABLET ================= */
@media (max-width: 1100px) {
.nf-fp-grid {
grid-template-columns:
repeat(2, minmax(0, 1fr));
}
}
/* ================= MOBILE ================= */
@media (max-width: 650px) {
.nf-fp-container {
padding:
62px 18px 50px;
}
.nf-fp-header {
display: block;
margin-bottom: 30px;
}
.nf-fp-header-right {
margin-top: 22px;
}
.nf-fp-grid {
grid-template-columns: 1fr;
}
.nf-fp-image {
height: 285px;
}
.nf-fp-body {
min-height: 270px;
}
.nf-fp-bottom {
display: block;
}
.nf-fp-compare {
margin-top: 15px;
}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-815c9a0 *//* ==========================================
NIVASA JOURNEY
LIGHT PREMIUM EDITORIAL
========================================== */
.nf-journey-section {
--bg: #f4f1e9;
--surface: #ebe7dc;
--surface-light: #faf8f2;
--text: #252b29;
--muted: #70746e;
--olive: #667466;
--olive-dark: #4f5c51;
--champagne: #b39a70;
--line: rgba(37,43,41,.14);
width: 100%;
background: var(--bg);
overflow: hidden;
}
/* ==========================================
FIXED VISUAL STAGE
========================================== */
.nf-journey-stage {
width: min(1240px, 92%);
height: min(760px, 86vh);
min-height: 620px;
margin: 70px auto;
display: grid;
grid-template-columns: 43% 57%;
background: var(--bg);
border: 1px solid var(--line);
box-shadow:
0 25px 70px rgba(40,45,40,.09);
overflow: hidden;
}
/* ==========================================
LEFT — COMPLETELY STATIC
========================================== */
.nf-journey-left {
height: 100%;
padding: 65px;
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
background:
radial-gradient(
circle at 10% 15%,
rgba(179,154,112,.12),
transparent 32%
),
var(--bg);
border-right: 1px solid var(--line);
overflow: hidden;
}
.nf-journey-left::after {
content: "";
position: absolute;
width: 250px;
height: 250px;
right: -130px;
bottom: -130px;
border-radius: 50%;
border:
1px solid
rgba(102,116,102,.18);
pointer-events: none;
}
/* ==========================================
KICKER
========================================== */
.nf-kicker {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 25px;
color: var(--olive-dark);
font-size: 9px;
font-weight: 700;
letter-spacing: 2.4px;
text-transform: uppercase;
}
.nf-kicker span {
width: 28px;
height: 1px;
background: var(--champagne);
}
/* ==========================================
LEFT HEADING
========================================== */
.nf-journey-left h2 {
margin: 0;
color: var(--text);
font-family:
Georgia,
"Times New Roman",
serif;
font-size:
clamp(40px, 4vw, 57px);
line-height: 1.02;
font-weight: 400;
letter-spacing: -2.5px;
}
.nf-journey-left h2 i {
color: var(--olive);
font-style: italic;
}
/* ==========================================
INTRO
========================================== */
.nf-intro {
max-width: 410px;
margin: 24px 0 30px;
color: var(--muted);
font-size: 13px;
line-height: 1.8;
}
/* ==========================================
25 DAYS
========================================== */
.nf-days {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 28px;
}
.nf-days strong {
color: var(--olive);
font-family: Georgia, serif;
font-size: 57px;
line-height: .8;
font-weight: 400;
}
.nf-days div {
display: flex;
flex-direction: column;
gap: 4px;
}
.nf-days b {
color: var(--text);
font-size: 9px;
letter-spacing: 2px;
}
.nf-days span {
color: #858780;
font-size: 10px;
}
/* ==========================================
WHATSAPP
========================================== */
.nf-wa-btn {
width: fit-content;
display: flex;
align-items: center;
gap: 20px;
padding: 13px 14px 13px 19px;
background: var(--olive-dark);
color: white;
text-decoration: none;
font-size: 11px;
font-weight: 600;
transition: .3s ease;
}
.nf-wa-btn strong {
width: 27px;
height: 27px;
display: grid;
place-items: center;
background: #f5f1e8;
color: var(--olive-dark);
font-size: 14px;
transition: .3s ease;
}
.nf-wa-btn:hover {
background: var(--olive);
transform: translateY(-3px);
}
.nf-wa-btn:hover strong {
transform: rotate(45deg);
}
/* ==========================================
NOTE
========================================== */
.nf-research-note {
display: flex;
align-items: center;
gap: 8px;
margin-top: 19px;
color: #8b8c85;
font-size: 9px;
letter-spacing: 1.4px;
text-transform: uppercase;
}
.nf-research-note span {
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--champagne);
}
/* ==========================================
RIGHT SIDE
========================================== */
.nf-scroll-window {
height: 100%;
overflow-y: auto;
overflow-x: hidden;
overscroll-behavior: contain;
scrollbar-width: thin;
scrollbar-color:
var(--champagne)
transparent;
}
.nf-scroll-window::-webkit-scrollbar {
width: 4px;
}
.nf-scroll-window::-webkit-scrollbar-track {
background: transparent;
}
.nf-scroll-window::-webkit-scrollbar-thumb {
background: var(--champagne);
border-radius: 20px;
}
/* ==========================================
RIGHT CONTENT
========================================== */
.nf-scroll-track {
padding: 55px 65px 25px;
}
/* ==========================================
EACH STEP
========================================== */
.nf-step {
min-height: 570px;
padding:
5px 0
90px;
display: flex;
flex-direction: column;
justify-content: center;
border-bottom:
1px solid var(--line);
}
.nf-step:last-child {
min-height: 500px;
border-bottom: 0;
}
/* ==========================================
STEP META
========================================== */
.nf-step-meta {
display: flex;
align-items: center;
gap: 13px;
margin-bottom: 20px;
}
.nf-step-meta span {
color: var(--olive);
font-family: Georgia, serif;
font-size: 14px;
}
.nf-step-meta small {
color: #999b94;
font-size: 8px;
letter-spacing: 2px;
}
/* ==========================================
STEP HEADING
========================================== */
.nf-step h3 {
margin: 0 0 16px;
color: var(--text);
font-family:
Georgia,
"Times New Roman",
serif;
font-size:
clamp(35px, 3.7vw, 49px);
font-weight: 400;
line-height: 1.03;
letter-spacing: -1.8px;
}
.nf-step > p {
max-width: 520px;
margin: 0 0 26px;
color: var(--muted);
font-size: 13px;
line-height: 1.8;
}
/* ==========================================
INFO CARDS
========================================== */
.nf-info-card {
max-width: 520px;
display: flex;
align-items: center;
gap: 15px;
padding: 15px 17px;
margin-bottom: 9px;
background:
rgba(255,255,255,.43);
border:
1px solid
rgba(37,43,41,.09);
transition: .3s ease;
}
.nf-info-card:hover {
background: var(--surface-light);
border-color:
rgba(102,116,102,.28);
transform: translateX(5px);
}
.nf-card-number {
width: 32px;
height: 32px;
flex-shrink: 0;
display: grid;
place-items: center;
color: var(--olive);
border:
1px solid
rgba(102,116,102,.25);
font-size: 9px;
}
.nf-info-card b {
display: block;
margin-bottom: 3px;
color: var(--text);
font-size: 11px;
}
.nf-info-card span {
display: block;
color: #858780;
font-size: 10px;
line-height: 1.5;
}
/* ==========================================
FEATURE BOX
========================================== */
.nf-feature-box {
max-width: 520px;
padding: 23px;
background: var(--olive-dark);
color: white;
}
.nf-feature-box > small {
display: block;
margin-bottom: 17px;
color: #cbc6ba;
font-size: 8px;
letter-spacing: 2px;
}
.nf-feature-list {
display: grid;
grid-template-columns: 1fr 1fr;
}
.nf-feature-list span {
padding: 12px 0;
color: #f5f0e6;
font-family: Georgia, serif;
font-size: 14px;
border-bottom:
1px solid
rgba(255,255,255,.12);
}
/* ==========================================
MATRIX
========================================== */
.nf-matrix {
max-width: 520px;
display: grid;
grid-template-columns: 1fr 1fr;
border-top: 1px solid var(--line);
border-left: 1px solid var(--line);
}
.nf-matrix div {
min-height: 82px;
padding: 17px;
border-right: 1px solid var(--line);
border-bottom: 1px solid var(--line);
transition: .3s ease;
}
.nf-matrix div:hover {
background:
rgba(102,116,102,.08);
}
.nf-matrix span {
display: block;
margin-bottom: 7px;
color: var(--champagne);
font-size: 8px;
letter-spacing: 1px;
}
.nf-matrix b {
color: var(--text);
font-family: Georgia, serif;
font-size: 14px;
font-weight: 400;
}
/* ==========================================
QUOTE
========================================== */
.nf-quote {
max-width: 520px;
display: flex;
gap: 16px;
padding: 20px;
background: var(--surface);
}
.nf-quote > span {
width: 2px;
height: 55px;
background: var(--champagne);
}
.nf-quote small {
display: block;
margin-bottom: 7px;
color: #858780;
font-size: 8px;
letter-spacing: 1.7px;
}
.nf-quote strong {
color: var(--olive-dark);
font-family: Georgia, serif;
font-size: 20px;
font-weight: 400;
font-style: italic;
line-height: 1.2;
}
/* ==========================================
FINAL CTA
========================================== */
.nf-final-btn {
width: fit-content;
display: flex;
align-items: center;
gap: 18px;
padding: 13px 16px 13px 19px;
background: var(--olive-dark);
color: white;
text-decoration: none;
font-size: 11px;
transition: .3s ease;
}
.nf-final-btn span {
width: 25px;
height: 25px;
display: grid;
place-items: center;
background: #f5f0e5;
color: var(--olive-dark);
}
.nf-final-btn:hover {
background: var(--olive);
transform: translateY(-3px);
}
/* ==========================================
MOBILE
========================================== */
@media (max-width: 900px) {
.nf-journey-stage {
width: 92%;
height: auto;
min-height: 0;
display: block;
margin: 45px auto;
overflow: visible;
}
.nf-journey-left {
height: auto;
padding: 50px 35px;
border-right: 0;
border-bottom: 1px solid var(--line);
}
.nf-scroll-window {
height: 650px;
overflow-y: auto;
}
.nf-scroll-track {
padding: 45px 30px;
}
}
@media (max-width: 600px) {
.nf-journey-left {
padding: 42px 25px;
}
.nf-journey-left h2 {
font-size: 34px;
}
.nf-scroll-window {
height: 600px;
}
.nf-scroll-track {
padding: 40px 22px;
}
.nf-step h3 {
font-size: 32px;
}
.nf-feature-list,
.nf-matrix {
grid-template-columns: 1fr;
}
}/* End custom CSS */