@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');






:root {
    --ink: #0a1411; /* Deep Forest Charcoal */
    --ink-soft: #182823; /* Muted Pine Dark */
    --paper: #f2f7f5; /* Fresh Mint-Toned Light Paper */
    --paper-deep: #e1ede8; /* Soft Mint Contrast */
    --surface: #ffffff;
    --gold: #5f0d00; /* Vibrant Emerald Mint */
    --gold-bright: #ff6b35; /* Bright Neo-Mint */
    --olive: #1e3a8a; /* Royal Deep Blue/Green Accent */
    --grey: #526560; /* Cool Pine Grey */
    --grey-light: #94a3b8; /* Muted Light Slate */
    --line: rgba(10, 20, 17, 0.12);
    --line-soft: rgba(10, 20, 17, 0.06);
    --line-on-dark: rgba(242, 247, 245, 0.18);
    --font-display: "Open Sans", sans-serif;
    --font-body: "Open Sans", sans-serif;
    --font-mono: "Open Sans", sans-serif;
    --container-max: 1360px;
    --gutter: clamp(20px, 4vw, 64px);
    --radius-s: 6px;
    --radius-m: 12px;
    --radius-l: 22px;
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --dur: 0.6s;
}




* {



    box-sizing: border-box;



}



html {



    scroll-behavior: smooth;



}



@media (prefers-reduced-motion: reduce) {



    html {



        scroll-behavior: auto;



    }



    *,



    *::before,



    *::after {



        animation-duration: 0.001ms !important;



        animation-iteration-count: 1 !important;



        transition-duration: 0.001ms !important;



        scroll-behavior: auto !important;



    }



}







body {



    font-family: var(--font-body);



    color: var(--ink);



    background: var(--paper);



    font-size: 16px;



    line-height: 1.6;



    -webkit-font-smoothing: antialiased;



    overflow-x: hidden;



}







h1,



h2,



h3,



h4,



.font-display {



    font-family: var(--font-display);



    font-weight: 500;



    color: var(--ink);



    letter-spacing: -0.01em;



    line-height: 1.08;



    margin: 0;



}







p {



    margin: 0 0 1em;



    color: var(--ink-soft);



}







a {



    color: inherit;



    text-decoration: none;



    transition: color 0.3s var(--ease);



}







img {



    max-width: 100%;



    display: block;



}







button {



    font-family: inherit;



}







::selection {



    background: var(--gold);



    color: var(--surface);



}







:focus-visible {



    outline: 2px solid var(--gold-bright);



    outline-offset: 3px;



}







.container-xl {



    max-width: var(--container-max);



    margin: 0 auto;



    /* padding: 0 var(--gutter); */



}







.title-wrapper {



    position: relative;



    font-family: "Plus Jakarta Sans", sans-serif;



    z-index: 2;



}







/* Main Section Title Styling */



.section-title {



    font-size: 32px !important; /* Standard Desktop size according to your setup */



    font-weight: 600;



    color: #111827; /* Dark Rich Charcoal */



    letter-spacing: -0.5px;



    line-height: 1.35;



    margin: 0;



    transition: all 0.3s ease;



}







/* Animated Metallic/Gold Premium Gradient Text */



.gradient-text {



    background: linear-gradient(135deg, #0b3c26 0%, #d4af37 50%, #111827 100%);



    background-size: 200% auto;



    color: transparent;



    -webkit-background-clip: text;



    background-clip: text;



    display: inline-block;



    animation: shineGradient 6s ease infinite;



    position: relative;



}







/* Sleek Underline Accent */



.title-accent-line {



    width: 60px;



    height: 3px;



    background: linear-gradient(90deg, #0b3c26, #d4af37);



    border-radius: 10px;



    transition: width 0.4s ease;



}







.title-wrapper:hover .title-accent-line {



    width: 90px; /* Hover Effect on Line */



}







/* Keyframe Animations */



@keyframes shineGradient {



    0% {



        background-position: 0% 50%;



    }



    50% {



        background-position: 100% 50%;



    }



    100% {



        background-position: 0% 50%;



    }



}







@keyframes pulseDot {



    0%,



    100% {



        transform: scale(1);



        opacity: 1;



    }



    50% {



        transform: scale(1.4);



        opacity: 0.5;



    }



}





.mbile-loginbtn {

    background: #082f91;

    padding: 9px 14px;

    border-radius: 30px;

    font-size: 14px;

    transition: background 0.2s ease;

}



/* Single-touch / Tap state (Jab mobile screen par click drop hoga) */

.mbile-loginbtn:active {

    background: #ff6b35;

}



/* Hover style sirf Desktop / Mouse devices par trigger hoga */

@media (hover: hover) and (pointer: fine) {

    .mbile-loginbtn:hover {

        background: #ff6b35;

    }

}



/* Responsive adjustments */



@media (max-width: 768px) {





/* .mbile-loginbtn {    background: #082f91;

    padding: 9px 14px;

    border-radius: 30px;

    font-size: 14px;}

    .mbile-loginbtn:hover{background: #ff6b35;} */

    

    .latestpro-carousel {

    position: relative;

    padding-top: 8px!important;

}

    .pp-section-head h2 {

    font-size: 22px!important;

    font-weight: 700!important;

}



    .section-title {



        font-size: 22px !important;

        padding-top: 10px;



    }



}







/* ---- Eyebrow / sheet labels (architectural drawing-sheet motif) ---- */



.eyebrow {



    display: inline-flex;



    align-items: center;



    gap: 10px;



    font-family: var(--font-mono);



    font-size: 12px;



    letter-spacing: 0.14em;



    text-transform: uppercase;



    color: var(--gold);



    margin-bottom: 18px;



}



.eyebrow::before {



    content: "";



    width: 26px;



    height: 1px;



    background: var(--gold);



    display: inline-block;



}



.eyebrow.on-dark {



    color: var(--gold-bright);



}







.section {



    padding: 40px 0;



    position: relative;



}



.section-tight {



    padding: 80px 0;



}



.bg-ink {



    background: var(--ink);



    color: var(--paper);



}



.bg-ink p {



    color: var(--grey-light);



}



.bg-ink h1,



.bg-ink h2,



.bg-ink h3,



.bg-ink h4 {



    color: var(--paper);



}



.bg-deep {



    background: var(--paper-deep);



}



.bg-surface {



    background: var(--surface);



}







/* ---- Blueprint hairline grid (signature decorative system) ---- */



.blueprint-frame {



    position: relative;



}



.blueprint-frame::before,



.blueprint-frame::after,



.corner-mark {



    content: "";



    position: absolute;



    width: 22px;



    height: 22px;



    border: 1px solid var(--gold);



    opacity: 0.55;



    pointer-events: none;



}



.blueprint-frame::before {



    top: 18px;



    left: 18px;



    border-right: none;



    border-bottom: none;



}



.blueprint-frame::after {



    bottom: 18px;



    right: 18px;



    border-left: none;



    border-top: none;



}







.grid-lines {



    position: absolute;



    inset: 0;



    background-image:



        linear-gradient(to right, var(--line-soft) 1px, transparent 1px),



        linear-gradient(to bottom, var(--line-soft) 1px, transparent 1px);



    background-size: 64px 64px;



    pointer-events: none;



    z-index: 0;



}



.bg-ink .grid-lines {



    background-image:



        linear-gradient(to right, var(--line-on-dark) 1px, transparent 1px),



        linear-gradient(to bottom, var(--line-on-dark) 1px, transparent 1px);



}







/* ==========================================================================



   BUTTONS



   ========================================================================== */



.btn {



    display: inline-flex;



    align-items: center;



    gap: 10px;



    font-family: var(--font-mono);



    font-size: 13px;



    letter-spacing: 0.08em;



    text-transform: uppercase;



    padding: 16px 30px;



    border-radius: 999px;



    border: 1px solid transparent;



    cursor: pointer;



    transition:



        transform 0.4s var(--ease),



        background 0.4s var(--ease),



        color 0.4s var(--ease),



        border-color 0.4s var(--ease);



    white-space: nowrap;



}



.btn i,



.btn svg {



    transition: transform 0.35s var(--ease);



}



.btn:hover i,



.btn:hover svg {



    transform: translateX(4px);



}







.btn-primary {



    background: var(--ink);



    color: var(--paper);



}



.btn-primary:hover {



    background: var(--gold);



    color: var(--ink);



}







.btn-gold {



    background: var(--gold);



    color: var(--ink);



}



.btn-gold:hover {



    background: var(--gold-bright);



}







.btn-outline {



    background: transparent;



    color: var(--ink);



    border-color: var(--line);



}



.btn-outline:hover {



    border-color: var(--gold);



    color: var(--gold);



}







.btn-outline-light {



    background: transparent;



    color: var(--paper);



    border-color: var(--line-on-dark);



}



.btn-outline-light:hover {



    border-color: var(--gold-bright);



    color: var(--gold-bright);



}







.btn-sm {



    padding: 11px 20px;



    font-size: 11px;



}







.btn-icon-circle {



    width: 52px;



    height: 52px;



    border-radius: 50%;



    display: inline-flex;



    align-items: center;



    justify-content: center;



    border: 1px solid var(--line);



    background: var(--surface);



    transition: all 0.4s var(--ease);



}



.btn-icon-circle:hover {



    background: var(--ink);



    color: var(--paper);



    border-color: var(--ink);



}







/* Magnetic link with underline sweep */



.link-sweep {



    position: relative;



    font-family: var(--font-mono);



    font-size: 13px;



    letter-spacing: 0.06em;



    text-transform: uppercase;



    display: inline-flex;



    align-items: center;



    gap: 8px;



    padding-bottom: 4px;



}



.link-sweep::after {



    content: "";



    position: absolute;



    left: 0;



    bottom: 0;



    width: 100%;



    height: 1px;



    background: currentColor;



    transform: scaleX(0.25);



    transform-origin: left;



    transition: transform 0.45s var(--ease);



    opacity: 0.5;



}



.link-sweep:hover::after {



    transform: scaleX(1);



    opacity: 1;



}



.link-sweep:hover {



    color: var(--gold);



}







/* ==========================================================================



   HEADER / NAVIGATION



   ========================================================================== */



.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
       padding: 13px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    /* backdrop-filter: blur(8px);  */
    background:linear-gradient(180deg, #ffdfd6, #ffffff);

}



.site-header .container-xl {



    display: flex;



    align-items: center;



    justify-content: space-between;



    gap: 28px;



}



.site-header.is-scrolled {



    padding: 14px 0;



    background:rgb(255 255 255 / 93%);



    backdrop-filter: blur(14px);



    box-shadow: 0 1px 0 var(--line);



}







.brand {



    display: flex;



    align-items: baseline;



    gap: 8px;



    font-family: var(--font-display);



    font-size: 24px;



    letter-spacing: 0.01em;



    color: var(--ink);



}



.site-header.is-dark .brand,



.site-header.is-dark .nav-link,



.site-header.is-dark .icon-btn {



    color: #191919;



}



.brand .brand-mark {



    color: var(--gold);



    font-style: italic;



}



.brand small {



    font-family: var(--font-mono);



    font-size: 10px;



    letter-spacing: 0.18em;



    color: var(--grey);



    text-transform: uppercase;



}







.main-nav {



    display: flex;



    align-items: center;



    gap: 6px;



}



.nav-item {



    position: relative;



}



.nav-link {



    display: flex;



    align-items: center;



    gap: 6px;



    padding: 10px 16px;



    font-size: 14.5px;



    font-weight: 600;



    color: var(--ink);



    border-radius: 999px;



    transition:



        background 0.3s var(--ease),



        color 0.3s var(--ease);



}









.nav-link i.chev {



    font-size: 10px;



    transition: transform 0.3s var(--ease);



}



.nav-item:hover .chev {



    transform: rotate(180deg);



}







.header-actions {



    display: flex;



    align-items: center;



    gap: 10px;



}



.icon-btn {



    width: 44px;



    height: 44px;



    display: inline-flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    border: 1px solid var(--line);

    color: #fff !important;

    background: var(--ink);

    transition: all 0.3s var(--ease);





}



.icon-btn:hover {



    border-color: var(--gold);



    color: var(--gold);



}







/* .nav-item {



    position: relative;



}







.mega-menu {



    position: absolute;



    top: calc(100% + 5px);



    left: 10%;



    transform: translateX(-50%) translateY(8px);



    width: min(900px, 86vw);



    background: var(--surface);



    border-radius: 15px;



    box-shadow: 0 30px 70px rgba(21, 23, 26, 0.16);



    border: 1px solid var(--line);



    padding: 25px;



    display: grid;



    grid-template-columns: repeat(4, 1fr);



    gap: 25px;



    opacity: 0;



    visibility: hidden;



    pointer-events: none;



    transition:



        opacity 0.35s var(--ease),



        transform 0.35s var(--ease),



        visibility 0.35s;



    z-index: 50;



} */







/* Create a transparent bridge so mouse move doesn't trigger mouseleave */



/* .mega-menu::before {



    content: "";



    position: absolute;



    top: -10px;



    left: 0;



    right: 0;



    height: 15px;



} */







/* Hover state */



/* .nav-item:hover .mega-menu,



.mega-menu:hover {



    opacity: 1;



    visibility: visible;



    pointer-events: auto;



    transform: translateX(-50%) translateY(0);



} */







/* .mega-menu.is-active {



    opacity: 1;



    visibility: visible;



    pointer-events: auto;



    transform: translateX(-50%) translateY(0);



} */



/* ---- Mega menu ---- */



/* .mega-menu {



    position: absolute;



    top: calc(100% + 5px);



    left: 6%;



    transform: translateX(-50%) translateY(8px);



    width: min(1000px, 86vw);



    background: var(--surface);



    border-radius: 15px;



    box-shadow: 0 30px 70px rgba(21, 23, 26, 0.16);



    border: 1px solid var(--line);



    padding: 25px;



    display: grid;



    grid-template-columns: repeat(4, 1fr);



    gap: 25px;



    opacity: 0;



    visibility: hidden;



    pointer-events: none;



    transition:



        opacity 0.35s var(--ease),



        transform 0.35s var(--ease),



        visibility 0.35s;



    z-index: 50;



}



.nav-item:hover .mega-menu {



    opacity: 1;



    visibility: visible;



    pointer-events: auto;



    transform: translateX(-45%) translateY(0);



} */







.mega-col-title {



    font-family: var(--font-mono);



    font-size: 14px;



    letter-spacing: normal;



    text-transform: capitalize;



    color: #333333;



    margin-bottom: 8px;



    padding-left: 10px;



    padding-bottom: 0px;



    /* border-bottom: 1px solid var(--line); */



    font-weight: 600;



}







.main-nav {



    position: relative;



    display: flex;



    align-items: center;



    gap: 30px;



}







/* Disable relative anchoring on individual items */



.main-nav .nav-item {



    position: static;



}







/* Base Mega Menu styling */



.mega-menu {



    position: absolute;



    top: 100%;



    left: -85%;







    margin: 12px auto 0 auto;



    /* Centered position under header */



    width: min(1100px, 92vw);



    background: var(--surface, #ffffff);



    border-radius: 16px;



    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);



    border: 1px solid var(--line, #e2e8f0);



    padding: 30px;



    display: grid;



    grid-template-columns: repeat(4, 1fr);



    gap: 24px;







    /* Animation & visibility states */



    opacity: 0;



    visibility: hidden;



    pointer-events: none;



    transform: translateY(10px);



    transition:



        opacity 0.3s ease,



        transform 0.3s ease,



        visibility 0.3s;



    z-index: 1000;



}







/* Invisible bridge preventing menu closure on hover movement */



.mega-menu::before {



    content: "";



    position: absolute;



    top: -15px;



    left: 0;



    right: 0;



    height: 15px;



}







/* Hover and active state triggers */



.main-nav .nav-item:hover .mega-menu,



.mega-menu:hover,



.mega-menu.dropdown-active {



    opacity: 1;



    visibility: visible;



    pointer-events: auto;



    transform: translateY(0);



}







/* Responsive Grid adjustment for smaller screens */



@media (max-width: 992px) {



    .mega-menu {



        grid-template-columns: repeat(2, 1fr);



        width: 95vw;



        padding: 20px;



    }



}







.main-nav .nav-item {



    /* position: relative; */



    height: 45px;



}







.main-nav .nav-item::after {



    content: "";



    position: relative;



    bottom: 25px;



    left: 34%;



    width: 0;



    height: 0;



    border-left: 18px solid transparent;



    border-right: 18px solid transparent;



    border-bottom: 18px solid #ffffff;







    z-index: 1060;



    opacity: 0;



    visibility: hidden;



    transform: translateX(-50%) translateY(10px);



    transition:



        transform 0.3s ease-in-out,



        opacity 0.3s ease-in-out,



        visibility 0.3s ease-in-out;



    pointer-events: none;



}







.main-nav .nav-item:hover::after {



    opacity: 1;



    visibility: visible;



    transform: translateX(-50%) translateY(0);



}







.mega-col ul {



    list-style: none;



    margin: 0;



    padding: 0;



}



.mega-col li {



    margin-bottom: 4px;



}



.mega-col a {



    display: block;



    font-size: 14px;



    color: #333333;



    padding: 5px 0px 5px 10px;



    transition:



        color 0.25s var(--ease),



        transform 0.25s var(--ease);



}



.mega-col a:hover {



    background: #f2f3f8;



}



.mega-feature {



    border-radius: var(--radius-m);



    overflow: hidden;



    position: relative;



    height: 100%;



    min-height: 200px;



    display: flex;



    align-items: flex-end;



    padding: 18px;



    color: var(--paper);



    background-size: cover;



    background-position: center;



}



.mega-feature::before {



    content: "";



    position: absolute;



    inset: 0;



    background: linear-gradient(



        180deg,



        rgba(21, 23, 26, 0) 30%,



        rgba(21, 23, 26, 0.85) 100%



    );



}



.mega-feature span {



    position: relative;



    font-family: var(--font-mono);



    font-size: 12px;



    letter-spacing: 0.06em;



}







/* simple dropdown (Buy/Rent/Projects/Locations) */



.simple-dropdown {



    position: absolute;



    top: calc(100% + 18px);



    left: 0;



    min-width: 240px;



    background: var(--surface);



    border-radius: var(--radius-m);



    border: 1px solid var(--line);



    box-shadow: 0 24px 54px rgba(21, 23, 26, 0.14);



    padding: 12px;



    opacity: 0;



    visibility: hidden;



    pointer-events: none;



    transform: translateY(8px);



    transition: all 0.3s var(--ease);



    z-index: 50;



}



.nav-item:hover .simple-dropdown {



    opacity: 1;



    visibility: visible;



    pointer-events: auto;



    transform: translateY(0);



}



.simple-dropdown a {



    display: block;



    padding: 10px 14px;



    border-radius: var(--radius-s);



    font-size: 14px;



    color: var(--ink-soft);



}



.simple-dropdown a:hover {



    background: var(--paper);



    color: var(--gold);



}







/* ---- Offcanvas (mobile) ---- */



.offcanvas.aureate-offcanvas {



    width: min(360px, 90vw);



    background: var(--ink);



    color: var(--paper);



}



.aureate-offcanvas .offcanvas-header {



    border-bottom: 1px solid var(--line-on-dark);



}



.aureate-offcanvas .btn-close {



    filter: invert(1);



}



.mobile-accordion .accordion-item {



    background: transparent;



    border: none;



    border-bottom: 1px solid var(--line-on-dark);



}



.mobile-accordion .accordion-button {



    background: transparent;



    color: var(--paper);



    font-family: var(--font-mono);



    font-size: 13px;



    letter-spacing: 0.06em;



    text-transform: uppercase;



    box-shadow: none;



    padding: 16px 4px;



}



.mobile-accordion .accordion-button::after {



    filter: invert(1);



}



.mobile-accordion .accordion-button:not(.collapsed) {



    color: var(--gold-bright);



}



.mobile-accordion .accordion-body {



    padding: 0 4px 16px;



}



.mobile-accordion .accordion-body a {



    display: block;



    padding: 8px 0;



    color: var(--grey-light);



    font-size: 14.5px;



}



.mobile-accordion .accordion-body a:hover {



    color: var(--gold-bright);



}



.mobile-cta {



    display: flex;



    flex-direction: column;



    gap: 12px;



    margin-top: 24px;



}







/* ==========================================================================



   HERO



   ========================================================================== */



.hero {



    position: relative;



    min-height: 80dvh;



    display: flex;



    align-items: flex-end;



    overflow: hidden;



    background: var(--ink);



    padding-top: 90px;



}



.hero-media {



    position: absolute;



    inset: 0;



    z-index: 0;



}



.hero-media img {



    width: 100%;



    height: 100%;



    object-fit: cover;



    opacity: 0.72;



}


.btn-post-ad {
   background-color:rgb(255 93 44);
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    padding: 5px 12px;
    font-weight: 600;
    font-size: 0.88rem;
    text-decoration: none;
    backdrop-filter: blur(4px);
    transition: all 0.3s ease;
    margin-right: 12px;
}

.hero-media::after {



    content: "";



    position: absolute;



    inset: 0;



    /* background: linear-gradient(180deg, rgba(74, 15, 10, 0.82) 0%, rgba(115, 25, 16, 0.65) 50%, rgba(40, 8, 5, 0.88) 100%);
 */


}



#hero-canvas {



    position: absolute;



    inset: 0;



    z-index: 1;



    opacity: 0.9;



}



.hero-content {



    position: relative;



    z-index: 2;



    width: 100%;



    padding-bottom: 10%;



    color: var(--paper);



}



.hero-kicker {



    font-family: var(--font-mono);



    font-size: 13px;



    letter-spacing: 0.18em;



    text-transform: uppercase;



    color: var(--gold-bright);



    display: flex;



    align-items: center;



    gap: 12px;



    margin-bottom: 26px;



}



.hero-kicker::before {



    content: "";



    width: 40px;



    height: 1px;



    background: var(--gold-bright);



}



.hero-title {

    font-size: 38px;
    /* max-width: 15ch; */
    font-weight: 600;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.51);


    color: #fff;



    line-height: normal;



    overflow: hidden;



    text-align: center;



}



.hero-title .line {



    display: block;



    overflow: hidden;



}



.hero-title .line span {



    display: inline-block;



}



.hero-sub {



    max-width: 480px;



    color: var(--grey-light);



    font-size: 18px;



    margin: 26px 0 46px;



}







/* ---- search panel ---- */

.search-panel {
          max-width: 920px;
    margin: 0 auto;
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
    padding: 4px;
    color: #070d0b;
}

/* 
.search-panel {
      margin: 32px auto 0;
    position: relative;
    z-index: 1;
    background: rgba(0, 0, 0, 0.5);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-radius: 8px 8px 41px 41px;
    margin-top: 26px;
} */



.search-tabs {

display: flex;
    gap: 13px;
    flex-wrap: wrap;
    padding: 4px 6px;
    background: #5f0d00;
    border-radius: 10px 10px 0px 0px;
}


.search-tabs .pp-tab:hover {color:#ff5d2c !important;}

/* .pp-tab.active {color:#ff5d2c !important; border-bottom: 2px solid #ff5d2c ; } */

.search-tabs button {
    position: relative;
    background: transparent;
    padding: 0 10px;
    line-height: 43px;
    text-transform: capitalize;
    color: #fff !important;
    cursor: pointer;
    font-size: 15px;
    font-weight: 700;
    border-radius: 0px; 




}



.search-fields {



    display: grid;



    grid-template-columns: 1.6fr 1fr 1fr 1fr auto;



    gap: 1px;



    background: var(--line);



    border-radius: var(--radius-m);



    overflow: hidden;



    margin: 0px;



}



.search-field {



    background: var(--surface);



    padding: 14px 18px;



    position: relative;



}



.search-field label {



    display: block;



    font-family: var(--font-mono);



    font-size: 10.5px;



    letter-spacing: 0.08em;



    text-transform: uppercase;



    color: var(--grey);



    margin-bottom: 5px;



}



.search-field select,



.search-field input {



    border: none;



    background: transparent;



    width: 100%;



    padding: 0;



    font-family: var(--font-body);



    font-size: 14.5px;



    font-weight: 600;



    color: var(--ink);



}



.search-field select:focus,



.search-field input:focus {



    outline: none;



}



.search-field-btn {



    background: var(--gold);



    display: flex;



    align-items: center;



    justify-content: center;



    padding: 0px;



}



.search-field-btn button {



    border: none;



    background: transparent;



    color: var(--ink);



    display: flex;



    align-items: center;



    gap: 10px;



    font-family: var(--font-mono);



    font-size: 13px;



    letter-spacing: 0.08em;



    text-transform: uppercase;



    cursor: pointer;



    white-space: nowrap;



}



.search-advanced {



    display: flex;



    justify-content: flex-end;



    padding: 14px 22px 0;



}







/* search new */







.search-field1 {



    display: grid;



    grid-template-columns: 1.2fr 1.7fr 1fr auto;



    gap: 0px;



    align-items: stretch;



    width: 100%;



}







.search-field1 > div {



    min-height: 48px;



}




.search-field1 input::placeholder{color: #1a202c !important;}


.pp-search-btn {
    background: #ff5d2c !important;
}


.search-field1 .form-select,



.search-field1 .form-control,



.search-field1 .pp-search-btn {



    height: 100%;



    width: 100%;



    border-radius: 0px 0px 0px 0px;



    border: 1px solid rgba(11, 77, 224, 0.12);





    padding: 0px 10px;



    font-size: 0.95rem;



    color: #12213d;



    transition: all 0.25s ease;



}





.search-field1 .form-select:focus,
.search-field1 .form-control:focus {

    box-shadow: none !important;
    outline: none;
      border: 1px solid #ff5d2c !important;
    color:#2a2a2a!important;


}


/* .form-control, .form-select{background: #fff!important;} */






.search-field1 .pp-search-btn {



    background: linear-gradient(135deg, #082f90, #082f8f);

    border: none;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    padding: 0 22px;
    border-radius: 0px 7px 7px 0px;
    text-transform: capitalize;
    font-size: 16px;

}







.pp-hero-badges {



    margin-top: 1rem !important;



}







.search-field1 .type-field {



    border-radius: 10px 0px 0px 10px;



}







.search-field1 .pp-search-btn:hover {



    /* background: linear-gradient(135deg, #0939b8, #0d63d2); */



    transform: translateY(-1px);



}







.search-field1 .search-field-btn {



    border-radius: 0px 10px 10px 0px;



}







@media (max-width: 991px) {



    .search-field1 {



        grid-template-columns: 1fr 1fr;



    }



}







@media (max-width: 575px) {



    .search-field1 {



        grid-template-columns: 1fr;



    }



}







.autosuggest {



    position: absolute;



    top: calc(100% + 8px);



    left: 0;



    right: 0;



    background: var(--surface);



    border-radius: var(--radius-m);



    box-shadow: 0 20px 46px rgba(21, 23, 26, 0.18);



    border: 1px solid var(--line);



    overflow: hidden;



    z-index: 40;



    display: none;



}



.autosuggest.show {



    display: block;



}



.autosuggest button {



    width: 100%;



    text-align: left;



    border: none;



    background: transparent;



    padding: 11px 16px;



    font-size: 13.5px;



    cursor: pointer;



}



.autosuggest button:hover {



    background: var(--paper);



    color: var(--gold);



}







.hero-scroll-cue {



    position: absolute;



    right: var(--gutter);



    bottom: 40px;



    z-index: 2;



    display: flex;



    flex-direction: column;



    align-items: center;



    gap: 10px;



    color: var(--grey-light);



    font-family: var(--font-mono);



    font-size: 11px;



    letter-spacing: 0.12em;



}



.hero-scroll-cue .rail {



    width: 1px;



    height: 46px;



    background: var(--line-on-dark);



    position: relative;



    overflow: hidden;



}



.hero-scroll-cue .rail::after {



    content: "";



    position: absolute;



    top: 0;



    left: 0;



    width: 100%;



    height: 16px;



    background: var(--gold-bright);



    animation: railmove 2.4s ease-in-out infinite;



}



@keyframes railmove {



    0% {



        transform: translateY(-16px);



    }



    100% {



        transform: translateY(46px);



    }



}







/* floating architecture SVG lines */



.float-line {



    position: absolute;



    opacity: 0.35;



    pointer-events: none;



    z-index: 1;



}







/* ==========================================================================



   STATS



   ========================================================================== */



.stats-strip {



    display: grid;



    grid-template-columns: repeat(4, 1fr);



    border-top: 1px solid var(--line-on-dark);



}



.stat-block {



    padding: 46px var(--gutter);



    border-right: 1px solid var(--line-on-dark);



    position: relative;



}



.stat-block:last-child {



    border-right: none;



}



.stat-num {



    font-family: var(--font-display);



    font-size: 27px;



    color: var(--gold-bright);



    display: flex;



    align-items: baseline;



    gap: 4px;



}



.stat-label {



    font-family: var(--font-mono);



    font-size: 12px;



    letter-spacing: 0.08em;



    text-transform: uppercase;



    color: var(--grey-light);



    margin-top: 8px;



}







/* ==========================================================================



   PROPERTY CARDS



   ========================================================================== */



/* .property-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }



.property-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }







.property-card {



  position: relative;



  background: var(--surface);



  border-radius: var(--radius-l);



  overflow: hidden;



  border: 1px solid var(--line);



  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);



}



.property-card:hover { transform: translateY(-8px); box-shadow: 0 34px 60px rgba(21,23,26,0.14); }



.property-media { position: relative; aspect-ratio: 4/3.1; overflow: hidden; }



.property-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease); }



.property-card:hover .property-media img { transform: scale(1.08); }



.property-media::after {



  content: ""; position: absolute; inset: 0;



  background: linear-gradient(180deg, rgba(21,23,26,0) 55%, rgba(21,23,26,0.75) 100%);



  opacity: 0; transition: opacity 0.5s var(--ease);



}



.property-card:hover .property-media::after { opacity: 1; }



.badge {



  position: absolute; top: 16px; left: 16px;



  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;



  padding: 7px 14px; border-radius: 999px; background: var(--ink); color: var(--paper);



  z-index: 2;



}



.badge.badge-rent { background: var(--olive); }



.badge.badge-sale { background: var(--gold); color: var(--ink); }



.fav-btn {



  position: absolute; top: 16px; right: 16px; z-index: 2;



  width: 38px; height: 38px; border-radius: 50%; border: none;



  background: rgba(245,242,234,0.9); color: var(--ink);



  display: flex; align-items: center; justify-content: center;



  transition: all 0.3s var(--ease);



}



.fav-btn:hover, .fav-btn.active { background: var(--gold); }



.fav-btn.active i { font-weight: 900; }



.property-type-tag {



  position: absolute; bottom: 16px; left: 16px; z-index: 2;



  font-family: var(--font-mono); font-size: 11px; color: var(--paper);



  opacity: 0; transform: translateY(6px); transition: all 0.4s var(--ease);



}



.property-card:hover .property-type-tag { opacity: 1; transform: translateY(0); }







.property-body { padding: 24px; }



.property-price { font-family: var(--font-display); font-size: 24px; color: var(--gold); margin-bottom: 6px; }



.property-title { font-size: 19px; margin-bottom: 6px; }



.property-loc { font-size: 13.5px; color: var(--grey); display: flex; align-items: center; gap: 6px; margin-bottom: 18px; }



.property-specs {



  display: flex; gap: 18px; padding-top: 16px; border-top: 1px solid var(--line);



  font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-soft);



}



.property-specs span { display: flex; align-items: center; gap: 6px; }



.property-specs i { color: var(--gold); }



.property-cta {



  margin-top: 18px; display: flex; align-items: center; justify-content: space-between;



} */







/* ========================================



   MODERN FEATURED SECTION



   ======================================== */



.featured-modern {



    position: relative;



    padding: 40px 0;



    background:



        radial-gradient(



            ellipse at 20% 0%,



            rgba(212, 175, 55, 0.08) 0%,



            transparent 50%



        ),



        radial-gradient(



            ellipse at 80% 100%,



            rgba(138, 110, 255, 0.06) 0%,



            transparent 50%



        ),



        var(--surface);



    overflow: hidden;



    isolation: isolate;



}







/* ---- Animated Background Orbs ---- */



.bg-orbs {



    position: absolute;



    inset: 0;



    z-index: -1;



    pointer-events: none;



}



.orb {



    position: absolute;



    border-radius: 50%;



    filter: blur(80px);



    opacity: 0.5;



    animation: float-orb 20s ease-in-out infinite;



}



.orb-1 {



    width: 500px;



    height: 500px;



    background: linear-gradient(135deg, #d4af37, #f4c27b);



    top: -100px;



    left: -100px;



    animation-delay: 0s;



}



.orb-2 {



    width: 400px;



    height: 400px;



    background: linear-gradient(135deg, #8a6eff, #c780ff);



    bottom: -80px;



    right: 10%;



    animation-delay: -5s;



}



.orb-3 {



    width: 350px;



    height: 350px;



    background: linear-gradient(135deg, #ff6ec7, #ffa8a8);



    top: 40%;



    right: -80px;



    animation-delay: -10s;



}



.orb-4 {



    width: 300px;



    height: 300px;



    background: linear-gradient(135deg, #5ee7c7, #8ae0ff);



    bottom: 20%;



    left: 15%;



    animation-delay: -15s;



}



@keyframes float-orb {



    0%,



    100% {



        transform: translate(0, 0) scale(1);



    }



    33% {



        transform: translate(40px, -30px) scale(1.1);



    }



    66% {



        transform: translate(-30px, 40px) scale(0.95);



    }



}







/* ---- Section Title Enhancements ---- */



.featured-modern .eyebrow {



    display: inline-block;



    font-size: 12px;



    letter-spacing: 0.3em;



    color: var(--gold, #d4af37);



    text-transform: uppercase;



    margin-bottom: 16px;



    opacity: 0.85;



}



.featured-modern .animated-gradient {



    background: linear-gradient(



        90deg,



        #d4af37 0%,



        #ff6ec7 25%,



        #8a6eff 50%,



        #5ee7c7 75%,



        #d4af37 100%



    );



    background-size: 300% 100%;



    -webkit-background-clip: text;



    background-clip: text;



    -webkit-text-fill-color: transparent;



    animation: gradient-sweep 6s linear infinite;



}



@keyframes gradient-sweep {



    to {



        background-position: 300% 0;



    }



}



.section-subtitle {



    color: var(--grey, #8a8a8a);



    font-size: 16px;



    margin-top: 20px;



    max-width: 520px;



    margin-inline: auto;



}







/* ========================================



   MODERN PROPERTY CARD



   ======================================== */



.modern-card {



    position: relative;



    border-radius: 20px;



    transform-style: preserve-3d;



    transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);



    will-change: transform;



}







/* Animated Gradient Border using conic-gradient */



.card-gradient-border {



    position: relative;



    border-radius: 10px;



    padding: 0px;



   border:1px solid #7c7c7c;



    transition: padding 0.4s ease;



}











.modern-card:hover .card-gradient-border {



    /* padding: 3px; */



    animation: rotate-border 3s linear infinite;



}







.card-inner {



    position: relative;



    border-radius: 10px;



    overflow: hidden;







}







/* Dark mode support */







/* ---- Card Media ---- */



.card-media {



    position: relative;



    aspect-ratio: 5 / 3;



    overflow: hidden;



}



.card-media img {



    width: 100%;



    object-fit: cover;



    position: relative;



    height: 210px;



    overflow: hidden;



    transition: transform 1s cubic-bezier(0.23, 1, 0.32, 1);



}











/* Shine sweep effect */













/* Media overlay (badges & buttons) */



.media-overlay {



    position: absolute;



    inset: 0;



    padding: 16px;



    display: flex;



    flex-direction: column;



    justify-content: space-between;



    z-index: 2;



}







.media-overlay::after {



    content: "";



    position: absolute;



    inset: 0;



    background: linear-gradient(



        180deg,



        rgba(0, 0, 0, 0.15) 0%,



        transparent 40%,



        transparent 60%,



        rgba(0, 0, 0, 0.55) 100%



    );



    pointer-events: none;



}







/* ---- Status Badges with Pulse Dot ---- */



.status-badge {



    align-self: flex-start;



    display: inline-flex;



    align-items: center;



    gap: 8px;



    padding: 8px 16px;



    border-radius: 999px;



    font-family: var(--font-mono, monospace);



    font-size: 11px;



    font-weight: 600;



    letter-spacing: 0.1em;



    text-transform: uppercase;



    backdrop-filter: blur(12px);



    -webkit-backdrop-filter: blur(12px);



    z-index: 3;



    position: relative;



    border: 1px solid rgba(255, 255, 255, 0.2);



}



.status-sale {



    background: linear-gradient(



        135deg,



        rgba(212, 175, 55, 0.95),



        rgba(244, 194, 123, 0.9)



    );



    color: #1a1a1a;



    box-shadow: 0 8px 24px rgba(212, 175, 55, 0.4);



}



.status-rent {



    background: linear-gradient(



        135deg,



        rgba(94, 231, 199, 0.95),



        rgba(138, 224, 255, 0.9)



    );



    color: #0a2a25;



    box-shadow: 0 8px 24px rgba(94, 231, 199, 0.35);



}



.status-new {



    background: linear-gradient(



        135deg,



        rgba(138, 110, 255, 0.95),



        rgba(199, 128, 255, 0.9)



    );



    color: #fff;



    box-shadow: 0 8px 24px rgba(138, 110, 255, 0.45);



}



.pulse-dot {



    width: 8px;



    height: 8px;



    border-radius: 50%;



    background: currentColor;



    position: relative;



}



.pulse-dot::before {



    content: "";



    position: absolute;



    inset: -4px;



    border-radius: 50%;



    background: currentColor;



    opacity: 0.5;



    animation: pulse-ring 1.8s ease-out infinite;



}



@keyframes pulse-ring {



    0% {



        transform: scale(0.8);



        opacity: 0.6;



    }



    100% {



        transform: scale(2.4);



        opacity: 0;



    }



}











/* ---- Property Type Tag ---- */



.media-overlay .property-type-tag {



    align-self: flex-start;



    padding: 6px 12px;



    background: rgba(0, 0, 0, 0.6);



    backdrop-filter: blur(8px);



    border: 1px solid rgba(255, 255, 255, 0.15);



    border-radius: 6px;



    color: #fff;



    font-size: 10px;



    letter-spacing: 0.15em;



    text-transform: uppercase;



    opacity: 0;



    transform: translateY(10px);



    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0.1s;



}



.modern-card:hover .media-overlay .property-type-tag {



    opacity: 1;



    transform: translateY(0);



}







/* ---- Card Body ---- */



.card-body {



    padding: 15px 15px 10px;



}







.price-row {



    display: flex;



    align-items: baseline;



    justify-content: space-between;



    margin-bottom: 10px;



}



.property-price {



    font-family: var(--font-display, serif);



    font-size: 20px;



    font-weight: 400;



    color: #082f90;



    letter-spacing: -0.01em;



}



.property-price small {



    font-size: 14px;



    font-weight: 500;



    opacity: 0.7;



}



.price-label.mono {



    font-size: 11px;



    text-transform: capitalize;



    color: #082f90;



}







.property-title {



    font-size: 18px;



    font-weight: 500;



    margin-bottom: 8px;



    line-height: 1.3;



}



.property-title a {



    color: inherit;



    text-decoration: none;



    background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px



        no-repeat;



    transition: background-size 0.4s ease;



}



.property-title a:hover {



    background-size: 100% 1px;



}







.property-loc {



    display: flex;



    align-items: center;



    gap: 8px;



    font-size: 13px;



    color: var(--grey, #8a8a8a);



    margin-bottom: 18px;



    transition: color 0.3s ease;



}



.property-loc i {



    color: var(--gold, #d4af37);



    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);



}



.modern-card:hover .property-loc i {



    transform: translateY(-3px) scale(1.15);



}







/* ---- Property Specs Grid ---- */



.property-specs {



    display: grid;



    grid-template-columns: repeat(3, 1fr);



    gap: 10px;



    padding: 6px 7px;



    border-top: 1px dashed rgba(138, 138, 138, 0.15);







    margin-bottom: 18px;



}



.spec-item {



    display: flex;



    flex-direction: column;



    align-items: center;



    gap: 2px;



    transition: transform 0.4s ease;



}



.modern-card:hover .spec-item {



    animation: spec-rise 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;



}



.modern-card:hover .spec-item:nth-child(1) {



    animation-delay: 0.05s;



}



.modern-card:hover .spec-item:nth-child(2) {



    animation-delay: 0.1s;



}



.modern-card:hover .spec-item:nth-child(3) {



    animation-delay: 0.15s;



}



.modern-card:hover .spec-item:nth-child(4) {



    animation-delay: 0.2s;



}



@keyframes spec-rise {



    0% {



        transform: translateY(0);



    }



    50% {



        transform: translateY(-3px);



    }



    100% {



        transform: translateY(0);



    }



}



.spec-item i {



    font-size: 14px;



    color: var(--gold, #d4af37);



    margin-bottom: 2px;



}



.spec-num {



    font-family: var(--font-display, serif);



    font-size: 15px;



    font-weight: 700;



    color: var(--ink, #1a1a1a);



    line-height: 1;



}



.spec-lbl {



    font-family: var(--font-mono, monospace);



    font-size: 9px;



    letter-spacing: 0.12em;



    text-transform: uppercase;



    color: var(--grey, #8a8a8a);



}







/* ---- CTA Button with Gradient Fill ---- */



.property-cta {



    display: flex;



    align-items: center;



    justify-content: space-between;



}



.property-type-label {



    font-size: 11px;



    letter-spacing: 0.15em;



    text-transform: uppercase;



    color: var(--grey, #8a8a8a);



    padding: 6px 12px;



    background: rgba(138, 138, 138, 0.08);



    border-radius: 6px;



}







.btn-view {



    position: relative;



    display: inline-flex;



    align-items: center;



    gap: 8px;



    padding: 10px 20px;



    border-radius: 999px;



    background: var(--ink, #1a1a1a);



    color: var(--paper, #fff);



    text-decoration: none;



    font-size: 13px;



    font-weight: 500;



    letter-spacing: 0.02em;



    overflow: hidden;



    isolation: isolate;



    transition:



        color 0.4s ease,



        transform 0.3s ease;



}



.btn-view::before {



    content: "";



    position: absolute;



    inset: 0;



    background: linear-gradient(135deg, #d4af37, #ff6ec7, #8a6eff);



    z-index: -1;



    transform: translateY(100%);



    transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);



}



.btn-view:hover {



    transform: translateY(-2px);



}



.btn-view:hover::before {



    transform: translateY(0);



}



.btn-view i {



    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);



}



.btn-view:hover i {



    transform: translateX(4px);



}







/* ========================================



   RESPONSIVE



   ======================================== */



@media (max-width: 991px) {



    .featured-modern {



        padding: 30px 0;



    }



    .property-specs {



        grid-template-columns: repeat(4, 1fr);



        gap: 4px;



    }



    .spec-lbl {



        font-size: 8px;



    }



}



@media (max-width: 575px) {



    .property-price {



        font-size: 22px;



    }



    .property-title {



        font-size: 17px;



    }



    .btn-view {



        padding: 8px 16px;



        font-size: 12px;



    }



}







/* home about */







/* Base Layout */



.section-padding {



    padding: clamp(60px, 10vw, 40px) 0;



    background-color: var(--paper);



    color: var(--ink);



    font-family: var(--font-body);



}







.container-custom {



    max-width: var(--container-max);



    padding-left: var(--gutter);



    padding-right: var(--gutter);



    margin: 0 auto;



}







.about-grid {



    display: grid;



    grid-template-columns: 1fr;



    gap: clamp(40px, 6vw, 80px);



    align-items: center;



}







@media (min-width: 992px) {



    .about-grid {



        grid-template-columns: 0.95fr 1.05fr;



    }



}







/* Luxury Image Wrapper with Badge Accent */



.about-image {



    position: relative;



    border-radius: var(--radius-l);



    overflow: hidden;



    box-shadow: 0 24px 48px -12px rgba(21, 23, 26, 0.12);



}







.about-image img {



    width: 100%;



    height: 100%;



    min-height: 520px;



    object-fit: cover;



    display: block;



    transition: transform 0.8s var(--ease);



}







.about-image:hover img {



    transform: scale(1.04);



}







/* Floating Badge */



.about-experience-badge {



    position: absolute;



    bottom: 24px;



    right: 24px;



    background: rgba(255, 255, 255, 0.85);



    backdrop-filter: blur(12px);



    -webkit-backdrop-filter: blur(12px);



    padding: 16px 24px;



    border-radius: var(--radius-m);



    border: 1px solid rgba(255, 255, 255, 0.6);



    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);



    display: flex;



    align-items: center;



    gap: 12px;



}







.about-experience-badge .exp-num {



    font-family: var(--font-display);



    font-size: 2rem;



    font-weight: 700;



    color: var(--gold);



    line-height: 1;



}







.about-experience-badge .exp-text {



    font-size: 0.75rem;



    font-weight: 700;



    text-transform: uppercase;



    letter-spacing: 0.08em;



    color: var(--ink);



    line-height: 1.3;



}







/* Typography Header */



.about-content .eyebrow {



    display: inline-flex;



    align-items: center;



    gap: 8px;



    font-family: var(--font-mono);



    font-size: 0.825rem;



    text-transform: uppercase;



    letter-spacing: 0.15em;



    color: var(--gold);



    margin-bottom: 12px;



    font-weight: 600;



}







.about-content h2 {



    font-family: var(--font-display);



    font-size: clamp(2.2rem, 3.8vw, 3.5rem);



    line-height: 1.15;



    letter-spacing: -0.02em;



    color: var(--ink);



    margin-bottom: 24px;



    font-weight: 400;



}







.about-content p {



    font-size: clamp(0.95rem, 1.1vw, 1.1rem);



    line-height: 1.7;



    color: var(--ink-soft);



    margin-bottom: 16px;



}







/* Features Grid - Modern Card Grid with Font Awesome Icons */



.about-features {



    display: grid;



    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));



    gap: 18px;



    margin: 36px 0;



}







.about-feature {



    display: flex;



    align-items: flex-start;



    gap: 16px;



    padding: 20px;



    background: var(--surface);



    border: 1px solid var(--line-soft);



    border-radius: var(--radius-m);



    transition:



        transform var(--dur) var(--ease),



        box-shadow var(--dur) var(--ease),



        border-color var(--dur) var(--ease);



}







.about-feature:hover {



    transform: translateY(-4px);



    border-color: var(--gold);



    box-shadow: 0 16px 32px -12px rgba(166, 129, 60, 0.12);



}







/* Font Awesome Icon Box */



.about-feature-icon {



    display: flex;



    align-items: center;



    justify-content: center;



    width: 48px;



    height: 48px;



    flex-shrink: 0;



    border-radius: 50%;



    background: var(--paper);



    color: var(--gold);



    font-size: 1.15rem;



    transition:



        background-color var(--dur) var(--ease),



        color var(--dur) var(--ease),



        transform var(--dur) var(--ease);



}







.about-feature:hover .about-feature-icon {



    background: var(--gold);



    color: var(--surface);



    transform: rotate(-8deg) scale(1.05);



}







.about-feature h4 {



    font-size: 1.05rem;



    font-weight: 700;



    color: var(--ink);



    margin-bottom: 4px;



}







.about-feature p {



    font-size: 0.85rem;



    line-height: 1.5;



    color: var(--grey);



    margin: 0;



}







/* Interactive CTA Button */



.btn-outline {



    display: inline-flex;



    align-items: center;



    gap: 12px;



    padding: 16px 36px;



    border: 1.5px solid var(--ink);



    border-radius: 50px;



    color: var(--ink);



    text-decoration: none;



    font-weight: 600;



    font-size: 0.95rem;



    letter-spacing: 0.03em;



    transition: all var(--dur) var(--ease);



    background: transparent;



}







.btn-outline i {



    font-size: 0.85rem;



    transition: transform var(--dur) var(--ease);



}







.btn-outline:hover {



    background: var(--ink);



    color: var(--paper);



    box-shadow: 0 10px 25px -5px rgba(21, 23, 26, 0.25);



}







.btn-outline:hover i {



    transform: translateX(6px);



}







/* ==========================================================================



   CATEGORY CARDS



   ========================================================================== */







/*=================================================



  SECTION BACKGROUND WITH SVG VECTOR + PHOTO OVERLAY



=================================================*/







.category-section-modern {



    position: relative;



    overflow: hidden;



    background-color: #ffeed1;



    padding-top: 5rem;



    padding-bottom: 5rem;



}







/* Background Photo + SVG Grid Container */



.cat-bg-overlay {



    position: absolute;



    inset: 0;



    pointer-events: none;



    z-index: 0;



}







/* Real Estate Dummy Photo Background Overlay */



.cat-bg-image {



    position: absolute;



    inset: 0;



    background-image: url("https://images.unsplash.com/photo-1545324418-cc1a3fa10c00?q=80&w=1600&auto=format&fit=crop");



    background-size: cover;



    background-position: center;



    opacity: 0.05; /* Subtle architectural outline in background */



    filter: grayscale(100%) contrast(120%);



}







/* Embedded SVG Vector Grid + Wave Pattern */



.cat-svg-pattern {



    position: absolute;



    inset: 0;



    background-image:



        radial-gradient(



            circle at 10% 20%,



            rgba(0, 136, 204, 0.05) 0%,



            transparent 40%



        ),



        radial-gradient(



            circle at 90% 80%,



            rgba(0, 136, 204, 0.04) 0%,



            transparent 40%



        ),



        /* SVG Isometric Architectural Grid Pattern */



        url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0l30 30-30 30L0 30z' fill='none' stroke='%230f172a' stroke-width='0.5' stroke-opacity='0.05'/%3E%3C/svg%3E");



}







/* Badge Styling */



.category-badge-wrapper {



    display: flex;



    justify-content: center;



}







.category-badge {



    display: inline-flex;



    align-items: center;



    gap: 8px;



    padding: 6px 18px;



    background: rgba(0, 136, 204, 0.08);



    color: var(--gold, #0088cc);



    border: 1px solid rgba(0, 136, 204, 0.18);



    border-radius: 50px;



    font-size: 12px;



    font-weight: 600;



    letter-spacing: 0.06em;



    text-transform: uppercase;



}







/*=================================================



  ASYMMETRIC BENTO GRID & FLOATING CARDS



=================================================*/







.cat-bento-grid {



    display: grid;



    grid-template-columns: repeat(3, 1fr);



    gap: 26px;



}







.cat-bento-card {



    position: relative;



    border-radius: var(--radius-l, 22px);



    overflow: hidden;



    min-height: 350px;



    display: flex;



    flex-direction: column;



    justify-content: space-between;



    text-decoration: none;



    background-color: var(--surface, #ffffff);



    border: 1px solid var(--line, rgba(15, 23, 42, 0.08));



    box-shadow: 0 10px 30px -10px rgba(15, 23, 42, 0.05);



    transition:



        transform 0.4s var(--ease, ease),



        box-shadow 0.4s var(--ease, ease),



        border-color 0.4s ease;



}







/* Wide Featured Card */



.cat-card-wide {



    grid-column: span 2;



}







/* Background Image Zooming */



.cat-bg-img {



    position: absolute;



    inset: 0;



    background-size: cover;



    background-position: center;



    transition: transform 0.7s cubic-bezier(0.25, 1, 0.5, 1);



    z-index: 0;



}







.cat-bento-card:hover .cat-bg-img {



    transform: scale(1.08);



}







/* Glassmorphism Dark Tint Overlay */



.cat-card-glass {



    position: relative;



    z-index: 2;



    height: 100%;



    padding: 28px;



    display: flex;



    flex-direction: column;



    justify-content: space-between;



    background: linear-gradient(



        180deg,



        rgba(15, 23, 42, 0.15) 0%,



        rgba(15, 23, 42, 0.85) 100%



    );



    transition: background 0.4s ease;



}







.cat-bento-card:hover {



    transform: translateY(-6px);



    box-shadow: 0 20px 40px -15px rgba(15, 23, 42, 0.2);



    border-color: rgba(0, 136, 204, 0.3);



}







.cat-bento-card:hover .cat-card-glass {



    background: linear-gradient(



        180deg,



        rgba(15, 23, 42, 0.25) 0%,



        rgba(15, 23, 42, 0.94) 100%



    );



}







/* Card Header (Icon & Badge) */



.cat-card-top {



    display: flex;



    align-items: center;



    justify-content: space-between;



}







.cat-icon {



    width: 50px;



    height: 50px;



    border-radius: 14px;



    background: rgba(255, 255, 255, 0.2);



    backdrop-filter: blur(12px);



    -webkit-backdrop-filter: blur(12px);



    border: 1px solid rgba(255, 255, 255, 0.3);



    display: flex;



    align-items: center;



    justify-content: center;



    color: #ffffff;



    font-size: 20px;



    transition: all 0.4s ease;



}







.cat-bento-card:hover .cat-icon {



    background: var(--gold, #0088cc);



    border-color: var(--gold, #0088cc);



    transform: scale(1.05);



}







.cat-count-pill {



    font-size: 12px;



    font-weight: 600;



    color: #ffffff;



    background: rgba(255, 255, 255, 0.2);



    backdrop-filter: blur(8px);



    -webkit-backdrop-filter: blur(8px);



    padding: 5px 14px;



    border-radius: 30px;



    border: 1px solid rgba(255, 255, 255, 0.3);



}







/* Card Content Body */



.cat-card-bottom h3 {



    font-size: 24px;



    font-weight: 700;



    color: #ffffff;



    margin-bottom: 8px;



}







.cat-card-bottom p {



    font-size: 14px;



    line-height: 1.5;



    color: rgba(255, 255, 255, 0.82);



    margin-bottom: 18px;



    max-width: 40ch;



}







/* Explore Link Text */



.cat-explore-link {



    font-size: 13px;



    font-weight: 600;



    color: #ffffff;



    display: inline-flex;



    align-items: center;



    gap: 8px;



    letter-spacing: 0.02em;



    transition: color 0.3s ease;



}







.cat-explore-link i {



    font-size: 12px;



    transition: transform 0.3s ease;



}







.cat-bento-card:hover .cat-explore-link {



    color: var(--gold-bright, #00a8ff);



}







.cat-bento-card:hover .cat-explore-link i {



    transform: translateX(6px);



}







/* Responsive Rules */



@media (max-width: 992px) {



    .cat-bento-grid {



        grid-template-columns: repeat(2, 1fr);



    }



    .cat-card-wide {



        grid-column: span 2;



    }



}







@media (max-width: 576px) {



    .cat-bento-grid {



        grid-template-columns: 1fr;



    }



    .cat-card-wide {



        grid-column: span 1;



    }



    .cat-bento-card {



        min-height: 300px;



    }



}







/* ============================================



   KEYFRAME ANIMATIONS



   ============================================ */



@keyframes lineUp {



    to {



        transform: translateY(0);



    }



}







@keyframes fadeUp {



    from {



        opacity: 0;



        transform: translateY(30px);



    }



    to {



        opacity: 1;



        transform: translateY(0);



    }



}







@keyframes hintFloat {



    0%,



    100% {



        transform: translateY(0);



    }



    50% {



        transform: translateY(-4px);



    }



}







@keyframes dotPulse {



    0%,



    100% {



        box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.22);



    }



    50% {



        box-shadow: 0 0 0 7px rgba(201, 162, 39, 0.06);



    }



}







@keyframes lineTravel {



    to {



        left: 130%;



    }



}







@keyframes corridorKenBurns {



    from {



        transform: scale(1.05);



    }



    to {



        transform: scale(1.18) translate(-1.5%, -1%);



    }



}







@keyframes icoBob {



    0%,



    100% {



        transform: translateY(0);



    }



    50% {



        transform: translateY(-5px);



    }



}







/* ============================================



   THE GOLDEN CORRIDOR — EXPANDING PANELS



   ============================================ */



.corridor {



    background: var(--ink);



    color: var(--paper);



    padding: 40px 0px;



    position: relative;



    overflow: hidden;



    font-family: var(--font-body);



}







/* Ambient gold glow */



.corridor::before {



    content: "";



    position: absolute;



    top: -20%;



    left: 50%;



    width: 900px;



    height: 900px;



    transform: translateX(-50%);



    background: radial-gradient(



        circle,



        rgba(201, 162, 39, 0.08) 0%,



        transparent 65%



    );



    pointer-events: none;



}







/* ===== HEADER ===== */



.corridor__head {



    max-width: var(--container-max);



    margin: 0 auto;



    padding: 0 var(--gutter) clamp(40px, 5vw, 64px);



    display: flex;



    flex-direction: column;



    gap: 26px;



    position: relative;



    z-index: 1;



    animation: fadeUp 0.9s var(--ease) both;



}







.corridor__meta {



    display: flex;



    align-items: center;



    gap: 14px;



    font-family: var(--font-mono);



    font-size: 12px;



    letter-spacing: 0.14em;



    text-transform: uppercase;



    color: var(--grey-light);



    border-bottom: 1px solid var(--line-on-dark);



    padding-bottom: 20px;



}







.corridor__index {



    color: var(--gold-bright);



}



.corridor__label {



    padding-left: 14px;



    border-left: 1px solid var(--line-on-dark);



}







.corridor__hint {



    margin-left: auto;



    display: inline-flex;



    align-items: center;



    gap: 8px;



    color: var(--grey-light);



    animation: hintFloat 3s var(--ease) infinite;



}



.corridor__hint i {



    color: var(--gold-bright);



    font-size: 11px;



}







.corridor__title {



    font-family: var(--font-display);



    font-weight: 300;



    font-size: clamp(42px, 7vw, 96px);



    line-height: 1;



    letter-spacing: -0.035em;



    margin: 0;



}







.corridor__title em {



    font-style: italic;



    color: var(--gold-bright);



}







.corridor__line {



    display: block;



    overflow: hidden;



}



.corridor__line > span {



    display: block;



    transform: translateY(110%);



    animation: lineUp 1s var(--ease) forwards;



}



.corridor__line:nth-child(2) > span {



    animation-delay: 0.15s;



}







.corridor__sub {



    max-width: 58ch;



    font-size: 15px;



    line-height: 1.75;



    color: var(--grey-light);



    margin: 0;



}







/* ===== ROUTE BAR ===== */



.route {



    max-width: var(--container-max);



    margin: 0 auto clamp(24px, 3vw, 40px);



    padding: 0 var(--gutter);



    display: flex;



    align-items: center;



    gap: 12px;



    position: relative;



    z-index: 1;



    animation: fadeUp 1s var(--ease) 0.2s both;



}







.route__stop {



    display: inline-flex;



    align-items: center;



    gap: 8px;



    background: none;



    border: none;



    cursor: pointer;



    font-family: var(--font-mono);



    font-size: 11px;



    letter-spacing: 0.18em;



    color: var(--grey);



    padding: 6px 2px;



    transition: color var(--dur) var(--ease);



}







.route__dot {



    width: 8px;



    height: 8px;



    border-radius: 50%;



    border: 1px solid var(--grey);



    transition: all var(--dur) var(--ease);



}







.route__stop:hover {



    color: var(--paper);



}



.route__stop.is-active {



    color: var(--gold-bright);



}







.route__stop.is-active .route__dot {



    background: var(--gold-bright);



    border-color: var(--gold-bright);



    box-shadow: 0 0 0 4px rgba(201, 162, 39, 0.18);



    animation: dotPulse 1.8s var(--ease) infinite;



}







.route__line {



    flex: 1;



    height: 1px;



    background: var(--line-on-dark);



    position: relative;



    overflow: hidden;



}







.route__line::after {



    content: "";



    position: absolute;



    top: 0;



    left: -30%;



    width: 30%;



    height: 100%;



    background: linear-gradient(



        90deg,



        transparent,



        var(--gold-bright),



        transparent



    );



    animation: lineTravel 4s linear infinite;



}







/* ===== PANELS ===== */



.corridor__panels {



    max-width: var(--container-max);



    margin: 0 auto;



    padding: 0 var(--gutter);



    display: flex;



    height: clamp(560px, 76vh, 760px);



    border: 1px solid var(--line-on-dark);



    border-radius: var(--radius-l);



    overflow: hidden;



    position: relative;



    z-index: 1;



    background: var(--ink-soft);



    animation: fadeUp 1s var(--ease) 0.35s both;



}







.panel {



    flex: 1;



    min-width: 0;



    position: relative;



    cursor: pointer;



    overflow: hidden;



    transition: flex 1.1s var(--ease);



    border-right: 1px solid var(--line-on-dark);



    outline: none;



}







.panel:last-child {



    border-right: none;



}



.panel.is-active {



    flex: 4.4;



}







.panel:focus-visible {



    box-shadow: inset 0 0 0 2px var(--gold-bright);



}







.panel::before {



    content: "";



    position: absolute;



    top: 0;



    left: 0;



    width: 100%;



    height: 3px;



    background: linear-gradient(90deg, var(--gold), var(--gold-bright));



    transform: scaleX(0);



    transform-origin: left;



    transition: transform 1s var(--ease) 0.2s;



    z-index: 4;



}



.panel.is-active::before {



    transform: scaleX(1);



}







.panel img {



    position: absolute;



    inset: 0;



    width: 100%;



    height: 100%;



    object-fit: cover;



    filter: grayscale(70%) brightness(0.45);



    transform: scale(1.05);



    transition:



        filter 1s var(--ease),



        transform 1s var(--ease);



}







.panel.is-active img {



    filter: grayscale(0%) brightness(0.9);



    animation: corridorKenBurns 12s var(--ease) forwards;



}







.panel__shade {



    position: absolute;



    inset: 0;



    background: linear-gradient(



        to top,



        rgba(21, 23, 26, 0.95) 0%,



        rgba(21, 23, 26, 0.35) 45%,



        rgba(21, 23, 26, 0.15) 100%



    );



    z-index: 1;



    transition: opacity 0.8s var(--ease);



}







/* ===== COLLAPSED RAIL ===== */



.panel__rail {



    position: absolute;



    inset: 0;



    z-index: 2;



    display: flex;



    flex-direction: column;



    align-items: center;



    justify-content: space-between;



    padding: 22px 0;



    transition: opacity 0.4s var(--ease);



}







.panel.is-active .panel__rail {



    opacity: 0;



    pointer-events: none;



}







.panel__code {



    font-family: var(--font-mono);



    font-size: 10px;



    letter-spacing: 0.2em;



    color: var(--grey-light);



}







.panel__vert {



    writing-mode: vertical-rl;



    transform: rotate(180deg);



    font-family: var(--font-display);



    font-weight: 300;



    font-size: clamp(18px, 1.8vw, 26px);



    letter-spacing: 0.12em;



    color: var(--paper);



    margin: 0;



    transition:



        color var(--dur) var(--ease),



        letter-spacing var(--dur) var(--ease);



}







.panel:hover .panel__vert {



    color: var(--gold-bright);



    letter-spacing: 0.2em;



}







.panel__ico {



    font-size: 15px;



    color: var(--gold);



    animation: icoBob 3.2s var(--ease) infinite;



}







/* ===== EXPANDED BODY ===== */



.panel__body {



    position: absolute;



    left: 0;



    right: 0;



    bottom: 0;



    z-index: 3;



    padding: clamp(22px, 3vw, 40px);



    display: flex;



    flex-direction: column;



    gap: 12px;



    opacity: 0;



    pointer-events: none;



}







.panel.is-active .panel__body {



    opacity: 1;



    pointer-events: auto;



}







.panel__body > * {



    transform: translateY(28px);



    opacity: 0;



    transition:



        transform 0.7s var(--ease),



        opacity 0.7s var(--ease);



}







.panel.is-active .panel__body > * {



    transform: translateY(0);



    opacity: 1;



}







.panel.is-active .panel__body > *:nth-child(1) {



    transition-delay: 0.25s;



}



.panel.is-active .panel__body > *:nth-child(2) {



    transition-delay: 0.35s;



}



.panel.is-active .panel__body > *:nth-child(3) {



    transition-delay: 0.45s;



}



.panel.is-active .panel__body > *:nth-child(4) {



    transition-delay: 0.55s;



}



.panel.is-active .panel__body > *:nth-child(5) {



    transition-delay: 0.65s;



}







.panel__chips {



    display: flex;



    gap: 8px;



    flex-wrap: wrap;



}







.chip {



    display: inline-flex;



    align-items: center;



    gap: 7px;



    font-family: var(--font-mono);



    font-size: 10px;



    letter-spacing: 0.16em;



    text-transform: uppercase;



    padding: 8px 14px;



    border-radius: 999px;



    border: 1px solid var(--line-on-dark);



    color: var(--paper);



    backdrop-filter: blur(8px);



    -webkit-backdrop-filter: blur(8px);



    background: rgba(21, 23, 26, 0.45);



}







.chip--gold {



    background: var(--gold);



    border-color: var(--gold);



    color: var(--ink);



    font-weight: 600;



}







.panel__name {



    font-family: var(--font-display);



    font-weight: 300;



    font-size: clamp(34px, 4vw, 60px);



    line-height: 1;



    letter-spacing: -0.02em;



    margin: 0;



    color: var(--paper);



}







.panel__desc {



    font-size: 14px;



    line-height: 1.7;



    color: var(--grey-light);



    max-width: 52ch;



    margin: 0;



}







.panel__stats {



    display: flex;



    gap: 10px;



    flex-wrap: wrap;



    list-style: none;



    margin: 4px 0 0;



    padding: 0;



}







.panel__stats li {



    display: flex;



    align-items: center;



    gap: 11px;



    padding: 9px 16px;



    border: 1px solid var(--line-on-dark);



    border-radius: 999px;



    background: rgba(21, 23, 26, 0.55);



    backdrop-filter: blur(8px);



    -webkit-backdrop-filter: blur(8px);



    transition:



        border-color var(--dur) var(--ease),



        transform var(--dur) var(--ease);



}







.panel__stats li:hover {



    border-color: var(--gold);



    transform: translateY(-3px);



}







.panel__stats i {



    color: var(--gold-bright);



    font-size: 12px;



}







.panel__stats strong {



    display: block;



    font-family: var(--font-display);



    font-size: 16px;



    font-weight: 400;



    line-height: 1.1;



    color: var(--paper);



}







.panel__stats span {



    display: block;



    font-family: var(--font-mono);



    font-size: 9px;



    letter-spacing: 0.14em;



    text-transform: uppercase;



    color: var(--grey-light);



}







.panel__cta {



    align-self: flex-start;



    display: inline-flex;



    align-items: center;



    gap: 10px;



    font-family: var(--font-mono);



    font-size: 11px;



    letter-spacing: 0.2em;



    text-transform: uppercase;



    color: var(--gold-bright);



    text-decoration: none;



    position: relative;



    margin-top: 4px;



}







.panel__cta::after {



    content: "";



    position: absolute;



    left: 0;



    bottom: -5px;



    width: 100%;



    height: 1px;



    background: var(--gold-bright);



    transform: scaleX(0.3);



    transform-origin: left;



    transition: transform 0.6s var(--ease);



}







.panel__cta:hover::after {



    transform: scaleX(1);



}



.panel__cta i {



    transition: transform 0.5s var(--ease);



}



.panel__cta:hover i {



    transform: translateX(7px);



}







/* ===== RESPONSIVE ===== */



@media (max-width: 960px) {



    .corridor__panels {



        flex-direction: column;



        height: auto;



    }







    .panel {



        flex: none;



        height: 92px;



        border-right: none;



        border-bottom: 1px solid var(--line-on-dark);



        transition: height 0.9s var(--ease);



    }







    .panel:last-child {



        border-bottom: none;



    }



    .panel.is-active {



        height: 540px;



    }







    .panel__rail {



        flex-direction: row;



        padding: 0 20px;



        justify-content: flex-start;



        gap: 16px;



    }







    .panel__vert {



        writing-mode: horizontal-tb;



        transform: none;



        font-size: 20px;



        letter-spacing: 0.06em;



    }







    .panel__ico {



        margin-left: auto;



    }







    .route {



        overflow-x: auto;



        scrollbar-width: none;



        padding-bottom: 6px;



    }



    .route::-webkit-scrollbar {



        display: none;



    }



    .route__line {



        min-width: 26px;



        flex: 0 0 26px;



    }



    .route__line::after {



        display: none;



    }



}







@media (max-width: 560px) {



    .corridor__panels {



        border-radius: var(--radius-m);



    }



    .panel.is-active {



        height: 560px;



    }



    .corridor__hint {



        display: none;



    }



}







/* ===== REDUCED MOTION ===== */



@media (prefers-reduced-motion: reduce) {



    .panel,



    .panel img,



    .panel__body > * {



        transition-duration: 0.01ms !important;



    }



    .panel.is-active img,



    .route__line::after,



    .route__stop.is-active .route__dot,



    .panel__ico,



    .corridor__hint,



    .corridor__line > span,



    .corridor__head,



    .route,



    .corridor__panels {



        animation: none !important;



    }



    .corridor__line > span {



        transform: none;



    }



}







/* ==========================================================================



   EDITORIAL SPLIT (Luxury villa feature)



   ========================================================================== */



.editorial-split {



    display: grid;



    grid-template-columns: 1fr 1fr;



    gap: 0;



    align-items: stretch;



}



.editorial-media {



    position: relative;



    overflow: hidden;



    min-height: 560px;



}



.editorial-media img {



    width: 100%;



    height: 100%;



    object-fit: cover;



}



.editorial-copy {



    padding: 0 var(--gutter) 0 80px;



    display: flex;



    flex-direction: column;



    justify-content: center;



}



.editorial-list {



    list-style: none;



    padding: 0;



    margin: 28px 0 36px;



    display: grid;



    grid-template-columns: 1fr 1fr;



    gap: 12px 24px;



}



.editorial-list li {



    display: flex;



    align-items: center;



    gap: 10px;



    font-size: 14.5px;



    color: var(--ink-soft);



}



.editorial-list i {



    color: var(--gold);



}







/* permium Project */







/*=================================================



  SHOWCASE SECTION BACKGROUND & ANIMATED EFFECTS



=================================================*/







.project-showcase-section {



    position: relative;



    overflow: hidden;



    background-color: var(--paper, #f8fafc);



}







.project-bg-effects {



    position: absolute;



    inset: 0;



    pointer-events: none;



    z-index: 0;



}







/* Subtle Animated Ambient Glow Orbs */



.project-glow-orb {



    position: absolute;



    border-radius: 50%;



    filter: blur(90px);



    opacity: 0.25;



    animation: floatOrb 12s ease-in-out infinite alternate;



}







.glow-1 {



    width: 320px;



    height: 320px;



    background: var(--gold, #0088cc);



    top: -50px;



    left: 5%;



}







.glow-2 {



    width: 280px;



    height: 280px;



    background: var(--gold-bright, #00a8ff);



    bottom: -40px;



    right: 8%;



    animation-delay: -6s;



}







@keyframes floatOrb {



    0% {



        transform: translate(0, 0) scale(1);



    }



    50% {



        transform: translate(30px, -20px) scale(1.08);



    }



    100% {



        transform: translate(-20px, 25px) scale(0.95);



    }



}







/* Background Structural Vector Grid */



.project-svg-grid {



    position: absolute;



    inset: 0;



    background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%230f172a' fill-opacity='0.03' fill-rule='evenodd'%3E%3Cpath d='M0 40L40 0H20L0 20M40 40V20L20 40'/%3E%3C/g%3E%3C/svg%3E");



}







/* Section Header Badge */



.showcase-badge-wrapper {



    display: flex;



    justify-content: center;



}







.showcase-badge {



    display: inline-flex;



    align-items: center;



    gap: 8px;



    padding: 6px 18px;



    background: rgba(0, 136, 204, 0.08);



    color: var(--gold, #0088cc);



    border: 1px solid rgba(0, 136, 204, 0.18);



    border-radius: 50px;



    font-size: 12px;



    font-weight: 600;



    letter-spacing: 0.06em;



    text-transform: uppercase;



}







/*=================================================



  MODERN PROJECT CARD DESIGN



=================================================*/







.modern-project-card {



    background: var(--surface, #ffffff);



    border-radius: var(--radius-l, 22px);



    border: 1px solid var(--line, rgba(15, 23, 42, 0.08));



    overflow: hidden;



    box-shadow: 0 12px 32px -12px rgba(15, 23, 42, 0.06);



    transition:



        transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),



        box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1),



        border-color 0.4s ease;



    margin: 10px 4px 20px;



}







.modern-project-card:hover {



    transform: translateY(-8px);



    box-shadow: 0 22px 48px -15px rgba(15, 23, 42, 0.16);



    border-color: rgba(0, 136, 204, 0.28);



}







/* Image Media Header */



.project-media {



    position: relative;



    height: 230px;



    overflow: hidden;



}







.project-media img {



    width: 100%;



    height: 100%;



    object-fit: cover;



    transition: transform 0.7s cubic-bezier(0.25, 1, 0.5, 1);



}







.modern-project-card:hover .project-media img {



    transform: scale(1.08);



}







/* Media Overlay Pills & Status */



.media-top-overlay {



    position: absolute;



    top: 16px;



    left: 16px;



    right: 16px;



    display: flex;



    align-items: center;



    justify-content: space-between;



    z-index: 2;



}







.project-type-tag {



    background: rgba(15, 23, 42, 0.65);



    backdrop-filter: blur(10px);



    -webkit-backdrop-filter: blur(10px);



    color: #ffffff;



    padding: 5px 12px;



    border-radius: 30px;



    font-size: 11px;



    font-weight: 600;



    letter-spacing: 0.04em;



    text-transform: uppercase;



    border: 1px solid rgba(255, 255, 255, 0.2);



}







.project-status-pill {



    padding: 5px 12px;



    border-radius: 30px;



    font-size: 11px;



    font-weight: 600;



    backdrop-filter: blur(10px);



    -webkit-backdrop-filter: blur(10px);



    border: 1px solid rgba(255, 255, 255, 0.3);



}







.status-launch {



    background: rgba(16, 185, 129, 0.85);



    color: #ffffff;



}







.status-uc {



    background: rgba(245, 158, 11, 0.85);



    color: #ffffff;



}







.status-rtm {



    background: rgba(0, 136, 204, 0.85);



    color: #ffffff;



}







/* Glassmorphism Price Badge */



.price-glass-badge {



    position: absolute;



    bottom: 14px;



    left: 16px;



    background: rgba(15, 23, 42, 0.72);



    backdrop-filter: blur(12px);



    -webkit-backdrop-filter: blur(12px);



    border: 1px solid rgba(255, 255, 255, 0.2);



    padding: 6px 14px;



    border-radius: 12px;



    display: flex;



    flex-direction: column;



    z-index: 2;



}







.price-label {



    font-size: 10px;



    text-transform: uppercase;



    letter-spacing: 0.05em;



    color: rgba(255, 255, 255, 0.7);



}







.price-value {



    font-size: 15px;



    font-weight: 700;



    color: #ffffff;



}







/* Card Body Content */



.project-body {



    padding: 22px;



}







.property-title {



    font-size: 20px;



    font-weight: 700;



    color: var(--ink, #0f172a);



    margin-bottom: 6px;



    transition: color 0.3s ease;



}







.modern-project-card:hover .property-title {



    color: var(--gold, #0088cc);



}







.property-loc {



    display: flex;



    align-items: center;



    gap: 6px;



    font-size: 13.5px;



    color: var(--grey, #64748b);



    margin-bottom: 16px;



}







.property-loc i {



    color: var(--gold, #0088cc);



}







/* Builder & Possession Meta Grid */



.project-meta-grid {



    display: grid;



    grid-template-columns: 1fr 1fr;



    gap: 10px;



    padding: 10px 12px;



    background: var(--paper-deep, #f1f5f9);



    border-radius: 12px;



    margin-bottom: 16px;



}







.meta-item {



    display: flex;



    align-items: center;



    gap: 8px;



    font-size: 12px;



    font-weight: 500;



    color: var(--ink-soft, #1e293b);



}







.meta-item i {



    color: var(--gold, #0088cc);



    font-size: 13px;



}







/* Amenity Chips */



.project-amenities {



    display: flex;



    flex-wrap: wrap;



    gap: 6px;



    margin-bottom: 20px;



}







.amenity-chip {



    display: inline-flex;



    align-items: center;



    gap: 5px;



    font-size: 11.5px;



    font-weight: 500;



    color: var(--grey, #64748b);



    background: rgba(15, 23, 42, 0.04);



    padding: 4px 10px;



    border-radius: 20px;



    border: 1px solid rgba(15, 23, 42, 0.05);



}







.amenity-chip i {



    font-size: 10px;



    color: var(--gold, #0088cc);



}







/* Action CTA Button */



.btn-explore-project {



    display: flex;



    align-items: center;



    justify-content: center;



    gap: 10px;



    width: 100%;



    padding: 12px 20px;



    background: var(--paper-deep, #f1f5f9);



    color: var(--ink, #0f172a);



    border-radius: var(--radius-m, 12px);



    font-size: 13.5px;



    font-weight: 600;



    text-decoration: none;



    transition: all 0.3s ease;



    border: 1px solid var(--line, rgba(15, 23, 42, 0.08));



}







.btn-explore-project i {



    transition: transform 0.3s ease;



}







.modern-project-card:hover .btn-explore-project {



    background: var(--gold, #0088cc);



    color: #ffffff;



    border-color: var(--gold, #0088cc);



    box-shadow: 0 6px 18px rgba(0, 136, 204, 0.25);



}







.modern-project-card:hover .btn-explore-project i {



    transform: translateX(6px);



}







/* Custom Styling for Owl Carousel Nav Dots & Arrows */



.project-carousel .owl-dots {



    margin-top: 25px !important;



}







.project-carousel .owl-dot span {



    width: 10px !important;



    height: 10px !important;



    margin: 5px 6px !important;



    background: rgba(15, 23, 42, 0.15) !important;



    transition: all 0.3s ease !important;



}







.project-carousel .owl-dot.active span {



    width: 28px !important;



    border-radius: 10px !important;



    background: var(--gold, #0088cc) !important;



}







/* ==========================================================================



   LOCATIONS



   ========================================================================== */



.location-list {



    list-style: none;



    padding: 0;



    margin: 0;



}



.location-row {



    display: flex;



    align-items: center;



    justify-content: space-between;



    padding: 20px 4px;



    border-bottom: 1px solid var(--line-on-dark);



    transition: padding-left 0.35s var(--ease);



}



.location-row:hover {



    padding-left: 14px;



}



.location-row .loc-name {



    font-family: var(--font-display);



    font-size: 22px;



    color: var(--paper);



    display: flex;



    align-items: center;



    gap: 14px;



}



.location-row .loc-name span {



    font-family: var(--font-mono);



    font-size: 12px;



    color: var(--gold-bright);



}



.location-row .loc-count {



    font-family: var(--font-mono);



    font-size: 12px;



    color: var(--grey-light);



}



.map-visual {



    position: relative;



    border-radius: var(--radius-l);



    overflow: hidden;



    min-height: 480px;



    background: var(--paper-deep);



}



.map-visual svg {



    width: 100%;



    height: 100%;



}



.map-pin {



    position: absolute;



    width: 14px;



    height: 14px;



    border-radius: 50%;



    background: var(--gold);



    box-shadow: 0 0 0 6px rgba(166, 129, 60, 0.22);



}



.map-pin::after {



    content: "";



    position: absolute;



    inset: 0;



    border-radius: 50%;



    background: var(--gold);



    animation: pulse-pin 2.2s ease-out infinite;



}



@keyframes pulse-pin {



    0% {



        transform: scale(1);



        opacity: 0.7;



    }



    100% {



        transform: scale(3.2);



        opacity: 0;



    }



}







/* ==========================================================================



   WHY CHOOSE US



   ========================================================================== */



.feature-grid {



    display: grid;



    grid-template-columns: repeat(3, 1fr);



    gap: 1px;



    background: var(--line);



    border: 1px solid var(--line);



}



.feature-block {



    background: var(--surface);



    padding: 42px 34px;



}



.feature-num {



    font-family: var(--font-mono);



    font-size: 12px;



    color: var(--gold);



    margin-bottom: 22px;



}



.feature-block h3 {



    font-size: 21px;



    margin-bottom: 10px;



}



.feature-block p {



    font-size: 14.5px;



    margin: 0;



}







/* ==========================================================================



   INVESTMENT



   ========================================================================== */



.invest-wrap {



    display: grid;



    grid-template-columns: 1fr 0.9fr;



    gap: 70px;



    align-items: center;



}



.invest-chart {



    border: 1px solid var(--line-on-dark);



    border-radius: var(--radius-l);



    padding: 28px;



}



.invest-bars {



    display: flex;



    align-items: flex-end;



    gap: 14px;



    height: 220px;



    margin-top: 20px;



}



.invest-bars .bar {



    flex: 1;



    background: linear-gradient(180deg, var(--gold-bright), var(--gold));



    border-radius: 6px 6px 0 0;



    position: relative;



}



.invest-bars .bar span {



    position: absolute;



    top: -26px;



    left: 0;



    right: 0;



    text-align: center;



    font-family: var(--font-mono);



    font-size: 11px;



    color: var(--grey-light);



}



.invest-list {



    list-style: none;



    padding: 0;



    margin: 26px 0;



}



.invest-list li {



    display: flex;



    gap: 14px;



    padding: 14px 0;



    border-bottom: 1px solid var(--line-on-dark);



    font-size: 14.5px;



    color: var(--grey-light);



}



.invest-list i {



    color: var(--gold-bright);



    margin-top: 3px;



}







/* ==========================================================================



   TESTIMONIALS



   ========================================================================== */



.testimonial-card {



    background: var(--surface);



    border-radius: var(--radius-l);



    padding: 44px;



    border: 1px solid var(--line);



    height: 100%;



}



.testimonial-quote {



    font-family: var(--font-display);



    font-size: 18px;



    line-height: 1.2;



    color: var(--ink);



    margin-bottom: 28px;



}



.testimonial-person {



    display: flex;



    align-items: center;



    gap: 14px;



}



.testimonial-person img {



    width: 52px !important;



    height: 52px;



    border-radius: 50%;



    object-fit: cover;



}



.testimonial-person .name {



    font-weight: 700;



    font-size: 14.5px;



}



.testimonial-person .meta {



    font-size: 12.5px;



    color: var(--grey);



}



.stars {



    color: var(--gold);



    font-size: 13px;



    margin-bottom: 16px;



    letter-spacing: 2px;



}







/* ==========================================================================



   AGENTS



   ========================================================================== */







/* Header Elements */



.badge-pill {



    display: inline-block;



    padding: 6px 14px;



    font-family: var(--font-mono);



    font-size: 11px;



    font-weight: 600;



    letter-spacing: 0.08em;



    text-transform: uppercase;



    color: var(--ink);



    background: var(--paper-deep);



    border: 1px solid var(--line-soft);



    border-radius: 99px;



}







.section-title {



    font-family: var(--font-display);



    font-weight: 700;



    color: var(--ink);



}







.gradient-text {



    background: linear-gradient(



        90deg,



        #d4af37 0%,



        #ff6ec7 25%,



        #8a6eff 50%,



        #5ee7c7 75%,



        #d4af37 100%



    );



    background-size: 300% 100%;



    -webkit-background-clip: text;



    background-clip: text;



    -webkit-text-fill-color: transparent;



    animation: gradient-sweep 6s linear infinite;



}







.section-subtext {



    color: var(--grey);



    font-size: 14px;



}







/* Modern Card Layout */



.agent-card {



    background: var(--surface);



    border-radius: var(--radius-l);



    padding: 10px;



    border: 1px solid var(--line-soft);



    box-shadow: 0 10px 30px -15px rgba(10, 20, 17, 0.05);



    transition:



        transform var(--dur) var(--ease),



        box-shadow var(--dur) var(--ease),



        border-color var(--dur) var(--ease);



}







.agent-card:hover {



    transform: translateY(-6px);



    border-color: var(--line);



    box-shadow: 0 20px 35px -12px rgba(16, 185, 129, 0.15);



}







.agent-media {



    position: relative;



    border-radius: var(--radius-m);



    overflow: hidden;



    aspect-ratio: 4 / 4.6;



}







.agent-media img {



    width: 100%;



    height: 100%;



    object-fit: cover;



    transition: transform var(--dur) var(--ease);



}







.agent-card:hover .agent-media img {



    transform: scale(1.06);



}







/* Experience Floating Badge */



.exp-badge {



    position: absolute;



    top: 10px;



    right: 10px;



    background: rgba(10, 20, 17, 0.7);



    backdrop-filter: blur(8px);



    -webkit-backdrop-filter: blur(8px);



    color: var(--paper);



    font-family: var(--font-mono);



    font-size: 11px;



    font-weight: 500;



    padding: 4px 10px;



    border-radius: 99px;



    border: 1px solid var(--line-on-dark);



}







/* Glassmorphism Social Pill */



.agent-social {



    position: absolute;



    bottom: 12px;



    left: 50%;



    transform: translateX(-50%) translateY(16px);



    display: flex;



    gap: 8px;



    padding: 6px 10px;



    background: rgba(242, 247, 245, 0.85);



    backdrop-filter: blur(10px);



    -webkit-backdrop-filter: blur(10px);



    border-radius: 99px;



    border: 1px solid var(--line-soft);



    opacity: 0;



    transition: all 0.4s var(--ease);



}







.agent-card:hover .agent-social {



    opacity: 1;



    transform: translateX(-50%) translateY(0);



}







.agent-social a {



    width: 32px;



    height: 32px;



    border-radius: 50%;



    background: var(--surface);



    display: flex;



    align-items: center;



    justify-content: center;



    color: var(--ink);



    font-size: 12px;



    text-decoration: none;



    transition:



        background var(--dur) var(--ease),



        color var(--dur) var(--ease);



}







.agent-social a:hover {



    background: var(--gold);



    color: var(--surface);



}







/* Typography & Info */



.agent-content {



    padding: 12px 6px 4px 6px;



}







.agent-name {



    font-family: var(--font-display);



    font-size: 16px;



    font-weight: 600;



    color: var(--ink);



    margin: 0;



}







.agent-location {



    font-size: 11px;



    color: var(--grey-light);



    font-weight: 500;



}







.agent-role {



    font-family: var(--font-mono);



    font-size: 12px;



    color: var(--gold);



    font-weight: 600;



    margin: 0;



}







/* ==========================================================================



   BLOG



   ========================================================================== */



.blog-card {



    border-radius: var(--radius-l);



    overflow: hidden;



    background: var(--surface);



    border: 1px solid var(--line);



    height: 100%;



}



.blog-media {



    aspect-ratio: 16/10;



    overflow: hidden;



}



.blog-media img {



    width: 100%;



    height: 100%;



    object-fit: cover;



    transition: transform 0.6s var(--ease);



}



.blog-card:hover .blog-media img {



    transform: scale(1.07);



}



.blog-body {



    padding: 24px;



}



.blog-meta {



    display: flex;



    gap: 14px;



    font-family: var(--font-mono);



    font-size: 11px;



    text-transform: uppercase;



    letter-spacing: 0.05em;



    color: var(--gold);



    margin-bottom: 12px;



}



.blog-body h3 {



    font-size: 19px;



    margin-bottom: 10px;



}



.blog-body p {



    font-size: 14px;



}







/* ==========================================================================



   FINAL CTA



   ========================================================================== */



.final-cta {



    position: relative;



    min-height: 70vh;



    display: flex;



    align-items: center;



    justify-content: center;



    text-align: center;



    overflow: hidden;



}



.final-cta .hero-media img {



    opacity: 0.55;



}



.final-cta-content {



    position: relative;



    z-index: 2;



    color: var(--paper);



    max-width: 720px;



    padding: 0 var(--gutter);



}



.final-cta-content .btn-row {



    display: flex;



    gap: 16px;



    justify-content: center;



    margin-top: 40px;



    flex-wrap: wrap;



}







/* ==========================================================================



   FOOTER



   ========================================================================== */



.site-footer {



    background: var(--ink);



    color: var(--grey-light);



    padding: 100px 0 0;



}



.footer-top {



    display: grid;



    grid-template-columns: 1.4fr 1fr 1fr 1fr 1.2fr;



    gap: 40px;



    padding-bottom: 70px;



    border-bottom: 1px solid var(--line-on-dark);



}



.footer-brand p {



    max-width: 30ch;



    font-size: 14.5px;



    margin: 18px 0 26px;



}



.footer-social {



    display: flex;



    gap: 10px;



}



.footer-social a {



    width: 38px;



    height: 38px;



    border: 1px solid var(--line-on-dark);



    border-radius: 50%;



    display: flex;



    align-items: center;



    justify-content: center;



    transition: all 0.3s var(--ease);



}



.footer-social a:hover {



    background: var(--gold);



    border-color: var(--gold);



    color: var(--ink);



}



.footer-col-title {



    font-family: var(--font-mono);



    font-size: 12px;



    letter-spacing: 0.1em;



    text-transform: uppercase;



    color: var(--paper);



    margin-bottom: 22px;



}



.footer-col ul {



    list-style: none;



    padding: 0;



    margin: 0;



}



.footer-col li {



    margin-bottom: 12px;



}



.footer-col a {



    font-size: 14.5px;



    color: var(--grey-light);



}



.footer-col a:hover {



    color: var(--gold-bright);



}



.footer-newsletter form {



    display: flex;



    border-bottom: 1px solid var(--line-on-dark);



    padding-bottom: 12px;



    margin-top: 20px;



}



.footer-newsletter input {



    flex: 1;



    background: transparent;



    border: none;



    color: var(--paper);



    font-size: 14px;



}



.footer-newsletter input::placeholder {



    color: var(--grey);



}



.footer-newsletter button {



    background: none;



    border: none;



    color: var(--gold-bright);



    font-size: 18px;



}



.footer-bottom {



    display: flex;



    justify-content: space-between;



    align-items: center;



    padding: 26px 0;



    font-size: 13px;



    color: var(--grey);



    flex-wrap: wrap;



    gap: 12px;



}



.footer-bottom .legal-links {



    display: flex;



    gap: 22px;



}







/* ==========================================================================



   FLOATING CONTACT



   ========================================================================== */



.floating-actions {



    position: fixed;



    right: 26px;



    bottom: 26px;



    z-index: 900;



    display: flex;



    flex-direction: column;



    gap: 12px;



    align-items: flex-end;



}



.floating-actions .fa-btn {



    width: 54px;



    height: 54px;



    border-radius: 50%;



    display: flex;



    align-items: center;



    justify-content: center;



    color: var(--paper);



    font-size: 19px;



    box-shadow: 0 14px 30px rgba(21, 23, 26, 0.28);



    position: relative;



}



.fa-btn.wa {



    background: #2c4a3b;



}



.fa-btn.call {



    background: var(--gold);



    color: var(--ink);



}



.fa-btn.enquire {



    background: var(--ink);



}



.fa-btn.wa::after {



    content: "";



    position: absolute;



    inset: 0;



    border-radius: 50%;



    border: 2px solid #2c4a3b;



    animation: pulse-pin 2.4s ease-out infinite;



}







/* ==========================================================================



   PAGE HERO (interior pages)



   ========================================================================== */



.page-hero {



    position: relative;



    min-height: 56vh;



    display: flex;



    align-items: flex-end;



    padding-top: 160px;



    overflow: hidden;



    background: var(--ink);



}



.page-hero .hero-content {



    padding-bottom: 60px;



}



.breadcrumb-row {



    display: flex;



    align-items: center;



    gap: 8px;



    font-family: var(--font-mono);



    font-size: 12px;



    color: var(--grey-light);



    text-transform: uppercase;



    letter-spacing: 0.05em;



    margin-bottom: 18px;



}



.breadcrumb-row a:hover {



    color: var(--gold-bright);



}



.page-hero .hero-title {



    font-size: clamp(38px, 5vw, 70px);



}







/* ==========================================================================



   GENERIC UTILITIES



   ========================================================================== */



.text-gold {



    color: var(--gold) !important;



}



.mono {



    font-family: var(--font-mono);



}



/* .reveal-up {



    opacity: 0;



    transform: translateY(40px);



} */



.divider {



    height: 1px;



    background: var(--line);



    border: none;



    margin: 0;



}



.divider-dark {



    background: var(--line-on-dark);



}



.form-control-aureate {



    background: var(--surface);



    border: 1px solid var(--line);



    border-radius: var(--radius-m);



    padding: 14px 18px;



    font-size: 14.5px;



    width: 100%;



    color: var(--ink);



}



.form-control-aureate:focus {



    outline: none;



    border-color: var(--gold);



    box-shadow: 0 0 0 3px rgba(166, 129, 60, 0.14);



}



.form-label-aureate {



    font-family: var(--font-mono);



    font-size: 11.5px;



    letter-spacing: 0.06em;



    text-transform: uppercase;



    color: var(--grey);



    margin-bottom: 8px;



    display: block;



}



.invalid-feedback-aureate {



    font-size: 12.5px;



    color: #a33;



    margin-top: 6px;



    display: none;



}



.was-validated-aureate



    .form-control-aureate:invalid



    ~ .invalid-feedback-aureate {



    display: block;



}



.form-success-aureate {



    display: none;



    background: var(--olive);



    color: var(--paper);



    border-radius: var(--radius-m);



    padding: 20px;



    margin-top: 20px;



    font-size: 14.5px;



}







.skip-link {



    position: absolute;



    left: -999px;



    top: 0;



    background: var(--ink);



    color: var(--paper);



    padding: 14px 22px;



    z-index: 2000;



    border-radius: 0 0 8px 0;



}



.skip-link:focus {



    left: 0;



}







/*  owl caorusle slider */







.property-carousel {



    position: relative;



    padding-top: 55px;



}







.property-carousel .owl-nav {



    position: absolute;



    top: 0;



    right: 0;







    display: flex;



    align-items: center;



    gap: 8px;







    margin: 0;



}







.property-carousel .owl-nav button.owl-prev,



.property-carousel .owl-nav button.owl-next {



    width: 44px;



    height: 44px;







    margin: 0;



    padding: 0 !important;







    display: flex;



    align-items: center;



    justify-content: center;







    border: 1px solid rgba(201, 162, 39, 0.35) !important;



    border-radius: 50%;







    background: #000000 !important;



    color: #e4e4e4 !important;







    transition: all 0.3s ease;



}







.property-carousel .owl-nav button.owl-prev:hover,



.property-carousel .owl-nav button.owl-next:hover {



    background: var(--gold, #c9a227) !important;



    color: #111 !important;



    border-color: var(--gold, #c9a227) !important;



}







.property-carousel .owl-nav button i {



    font-size: 14px;



    line-height: 1;



}







.property-carousel .owl-nav button:focus {



    outline: none;



    box-shadow: none;



}







/* Disabled arrow */



.property-carousel .owl-nav button.disabled {



    opacity: 0.35;



    cursor: not-allowed;



}







/* Mobile */



@media (max-width: 575px) {



    .property-carousel {



        padding-top: 50px;



    }







    .property-carousel .owl-nav {



        right: 0;



    }







    .property-carousel .owl-nav button.owl-prev,



    .property-carousel .owl-nav button.owl-next {



        width: 38px;



        height: 38px;



    }



}







/* =========================================



   OWL CAROUSEL



========================================= */







.project-carousel .owl-stage {



    display: flex;



}







.project-carousel .owl-item {



    display: flex;



}







.project-carousel .item {



    width: 100%;



    height: 100%;



}







/* =========================================



   NAVIGATION - TOP RIGHT



========================================= */







.project-carousel .owl-nav {



    position: absolute;



    top: -10%;



    right: 0;







    display: flex;



    gap: 8px;







    margin: 0;



}







.project-carousel .owl-nav button.owl-prev,



.project-carousel .owl-nav button.owl-next {



    width: 42px;



    height: 42px;







    margin: 0;



    padding: 0 !important;







    display: flex;



    align-items: center;



    justify-content: center;







    border: 1px solid rgba(201, 162, 39, 0.4) !important;



    border-radius: 50%;







    background: #000 !important;







    color: var(--grey-light, #c9a227) !important;







    transition: all 0.3s ease;



}







.project-carousel .owl-nav button.owl-prev:hover,



.project-carousel .owl-nav button.owl-next:hover {



    background: var(--gold, #c9a227) !important;



    color: #111 !important;



    border-color: var(--gold, #c9a227) !important;



}







.project-carousel .owl-nav button i {



    font-size: 13px;



}







.project-carousel .owl-nav button:focus {



    outline: none;



    box-shadow: none;



}







/* =========================================



   MOBILE



========================================= */







@media (max-width: 575px) {



    .project-carousel {



        padding-top: 52px;



    }







    .project-media {



        height: 240px;



    }







    .project-body {



        padding: 20px;



    }







    .project-carousel .owl-nav button.owl-prev,



    .project-carousel .owl-nav button.owl-next {



        width: 38px;



        height: 38px;



    }



}







@media (min-width: 992px) {



    .text-lg-start {



        text-align: left !important;



    }



}







@media (min-width: 1200px) {



    .container,



    .container-lg,



    .container-md,



    .container-sm,



    .container-xl {



        max-width: 1140px !important;



    }



}







/* neon blur dot */







/*==============================



  MODERN LIGHT-THEME AMBIENT ORBS



==============================*/







.neon-dot {



    position: absolute;



    border-radius: 50%;



    filter: blur(60px);



    opacity: 0.4; /* Softened for clean light backgrounds */



    animation: floatGlow 14s ease-in-out infinite;



    pointer-events: none;



    z-index: 1;



    mix-blend-mode: normal; /* Replaced 'screen' so it renders correctly on white/light paper */



}







/* Cool Icy Blue */



.dot1 {



    width: 220px;



    height: 220px;



    background: #38bdf8;



    top: 5%;



    left: 6%;



}







.dot2 {



    width: 120px;



    height: 120px;



    background: #0ea5e9;



    top: 22%;



    right: 18%;



    animation-delay: -2s;



}







.dot3 {



    width: 160px;



    height: 160px;



    background: #2dd4bf;



    bottom: 10%;



    left: 12%;



    animation-delay: -4s;



}







/* Soft Periwinkle & Lavender */



.dot4 {



    width: 190px;



    height: 190px;



    background: #818cf8;



    top: 40%;



    right: 5%;



    animation-delay: -1s;



}







.dot5 {



    width: 130px;



    height: 130px;



    background: #a78bfa;



    top: 70%;



    right: 32%;



    animation-delay: -5s;



}







.dot6 {



    width: 150px;



    height: 150px;



    background: #6366f1;



    bottom: 22%;



    left: 45%;



    animation-delay: -3s;



}







/* Deep Architectural Cyan/Teal */



.dot7 {



    width: 260px;



    height: 260px;



    background: #0d9488;



    top: 12%;



    left: 42%;



    opacity: 0.25; /* Larger elements kept extra subtle */



    animation-delay: -6s;



}







.dot8 {



    width: 140px;



    height: 140px;



    background: #14b8a6;



    bottom: 5%;



    right: 10%;



    animation-delay: -2.5s;



}







/* Cool Sky Blue */



.dot9 {



    width: 180px;



    height: 180px;



    background: #7dd3fc;



    top: 58%;



    left: 2%;



    animation-delay: -4.5s;



}







.dot10 {



    width: 100px;



    height: 100px;



    background: #38bdf8;



    top: 82%;



    left: 70%;



    animation-delay: -1.5s;



}







/* Muted Mint & Slate Accents */



.dot11 {



    width: 220px;



    height: 220px;



    background: #5eead4;



    top: -40px;



    right: 28%;



    animation-delay: -5.5s;



}







.dot12 {



    width: 150px;



    height: 150px;



    background: #94a3b8;



    bottom: -20px;



    left: 78%;



    animation-delay: -3.5s;



}







/* Fluid, Expensive Floating Animation */



@keyframes floatGlow {



    0% {



        transform: translate(0, 0) scale(1);



    }



    33% {



        transform: translate(30px, -35px) scale(1.06);



    }



    66% {



        transform: translate(-20px, 25px) scale(0.94);



    }



    100% {



        transform: translate(0, 0) scale(1);



    }



}







/* proeprty listing read more or read less */



.property-overview-card {



    border: 1px solid rgba(10, 20, 17, 0.08);



}







.leading-relaxed {



    line-height: 1.65;



    color: var(--text-grey);



}







/* Collapse / Expand Container */



.expandable-text-wrapper {



    position: relative;



    max-height: 2000px; /* High value for expanded state transition */



    overflow: hidden;



    transition: max-height 0.4s cubic-bezier(0.22, 1, 0.36, 1);



}







/* Collapsed State with Fade Overlay */



.expandable-text-wrapper.collapsed {



    max-height: 72px; /* Adjust line-height x visible lines count */



}







.expandable-text-wrapper.collapsed::after {



    content: "";



    position: absolute;



    bottom: 0;



    left: 0;



    right: 0;



    height: 40px;



    background: linear-gradient(



        180deg,



        rgba(255, 255, 255, 0) 0%,



        rgba(255, 255, 255, 1) 100%



    );



    pointer-events: none;



}







/* Toggle Button Styling */



.toggle-btn {



    color: var(--primary-color);



    font-size: 14px;



}







.toggle-btn:hover {



    color: #059669;



}







.icon-chevron {



    font-size: 12px;



    transition: transform 0.3s ease;



}







.expandable-text-wrapper:not(.collapsed) + .toggle-btn .icon-chevron {



    transform: rotate(180deg);



}







/* filter property */







.filter-toolbar {



    border: 1px solid var(--line-soft);



    box-shadow: 0 4px 20px -5px rgba(10, 20, 17, 0.04);



}







.listings-title {



    font-family: var(--font-display, sans-serif);



    font-size: 18px;



    font-weight: 700;



    color: var(--ink);



}







.updated-tag {



    font-size: 12px;



    color: var(--grey-light);



    font-weight: 500;



}







/* Sort Dropdown */



.sort-label {



    font-size: 13px;



    font-weight: 600;



    color: var(--grey);



    white-space: nowrap;



}







.custom-sort-select {



    border-radius: 99px;



    font-size: 13px;



    font-weight: 600;



    color: var(--ink);



    background-color: var(--paper);



    border: 1px solid var(--line-soft);



    padding: 6px 36px 6px 14px;



    cursor: pointer;



    box-shadow: none !important;



    transition: border-color 0.2s var(--ease);



}







.custom-sort-select:focus {



    border-color: var(--gold);



}







/* Horizontal Scroll Container for Mobile */



.filter-pills-wrapper {



    display: flex;



    align-items: center;



    gap: 10px;



    overflow-x: auto;



    padding-bottom: 4px;



    scrollbar-width: none; /* Firefox */



}







.filter-pills-wrapper::-webkit-scrollbar {



    display: none; /* Chrome/Safari */



}







/* Base Filter Pill */



.filter-pill {



    display: inline-flex;



    align-items: center;



    white-space: nowrap;



    padding: 8px 20px;



    font-family: var(--font-body, sans-serif);



    font-size: 13.5px;



    font-weight: 600;



    color: var(--grey);



    background: var(--paper);



    border: 1px solid var(--line-soft);



    border-radius: 99px;



    cursor: pointer;



    transition: all 0.25s var(--ease);



    user-select: none;



}







.filter-pill:hover {



    color: var(--ink);



    background: var(--paper-deep);



    border-color: rgba(16, 185, 129, 0.3);



    transform: translateY(-1px);



}







/* Active State */



.filter-pill.active {



    color: #ffffff;



    background: var(--ink);



    border-color: var(--ink);



    box-shadow: 0 4px 14px -3px rgba(10, 20, 17, 0.25);



}







/* Highlighted Badge (Zero Brokerage) */



.filter-pill.pill-highlight {



    color: #047857;



    background: rgba(16, 185, 129, 0.1);



    border-color: rgba(16, 185, 129, 0.25);



}







.filter-pill.pill-highlight:hover {



    background: rgba(16, 185, 129, 0.18);



}







.filter-pill.pill-highlight.active {



    color: #ffffff;



    background: var(--gold);



    border-color: var(--gold);



}







/* builder */







.builder-carousel {



    position: relative;



    padding-top: 55px;



}







.builder-carousel .owl-nav {



    position: absolute;



    top: 0;



    right: 0;







    display: flex;



    align-items: center;



    gap: 8px;







    margin: 0;



}







.builder-carousel {



    position: relative;



    padding-top: 55px;



}







.builder-carousel .owl-nav {



    position: absolute;



    top: 0;



    right: 0;







    display: flex;



    align-items: center;



    gap: 8px;







    margin: 0;



}







.builder-carousel .owl-nav button.owl-prev,



.builder-carousel .owl-nav button.owl-next {



    width: 44px;



    height: 44px;







    margin: 0;



    padding: 0 !important;







    display: flex;



    align-items: center;



    justify-content: center;







    border: 1px solid rgba(201, 162, 39, 0.35) !important;



    border-radius: 50%;







    background: #000000 !important;



    color: #e4e4e4 !important;







    transition: all 0.3s ease;



}







.builder-carousel .owl-nav button.owl-prev:hover,



.builder-carousel .owl-nav button.owl-next:hover {



    background: var(--gold, #c9a227) !important;



    color: #111 !important;



    border-color: var(--gold, #c9a227) !important;



}







.builder-carousel .owl-nav button i {



    font-size: 14px;



    line-height: 1;



}







.builder-carousel .owl-nav button:focus {



    outline: none;



    box-shadow: none;



}







/* Disabled arrow */



.builder-carousel .owl-nav button.disabled {



    opacity: 0.35;



    cursor: not-allowed;



}



.builder-carousel {



    position: relative;



    padding-top: 55px;



}







.builder-carousel .owl-nav {



    position: absolute;



    top: 0;



    right: 0;







    display: flex;



    align-items: center;



    gap: 8px;







    margin: 0;



}







.builder-carousel .owl-nav button.owl-prev,



.builder-carousel .owl-nav button.owl-next {



    width: 44px;



    height: 44px;







    margin: 0;



    padding: 0 !important;







    display: flex;



    align-items: center;



    justify-content: center;







    border: 1px solid rgba(201, 162, 39, 0.35) !important;



    border-radius: 50%;







    background: #000000 !important;



    color: #e4e4e4 !important;







    transition: all 0.3s ease;



}







.builder-carousel .owl-nav button.owl-prev:hover,



.builder-carousel .owl-nav button.owl-next:hover {



    background: var(--gold, #c9a227) !important;



    color: #111 !important;



    border-color: var(--gold, #c9a227) !important;



}







.builder-carousel .owl-nav button i {



    font-size: 14px;



    line-height: 1;



}







.builder-carousel .owl-nav button:focus {



    outline: none;



    box-shadow: none;



}







/* Disabled arrow */



.builder-carousel .owl-nav button.disabled {



    opacity: 0.35;



    cursor: not-allowed;



}



.builder-carousel .owl-nav button.owl-prev,



.builder-carousel {



    position: relative;



    padding-top: 55px;



}







.builder-carousel .owl-nav {



    position: absolute;



    top: 0;



    right: 0;







    display: flex;



    align-items: center;



    gap: 8px;







    margin: 0;



}







.builder-carousel .owl-nav button.owl-prev,



.builder-carousel .owl-nav button.owl-next {



    width: 44px;



    height: 44px;







    margin: 0;



    padding: 0 !important;







    display: flex;



    align-items: center;



    justify-content: center;







    border: 1px solid rgba(201, 162, 39, 0.35) !important;



    border-radius: 50%;







    background: #000000 !important;



    color: #e4e4e4 !important;







    transition: all 0.3s ease;



}







.builder-carousel .owl-nav button.owl-prev:hover,



.builder-carousel .owl-nav button.owl-next:hover {



    background: var(--gold, #c9a227) !important;



    color: #111 !important;



    border-color: var(--gold, #c9a227) !important;



}







.builder-carousel .owl-nav button i {



    font-size: 14px;



    line-height: 1;



}







.builder-carousel .owl-nav button:focus {



    outline: none;



    box-shadow: none;



}







/* Disabled arrow */



.builder-carousel .owl-nav button.disabled {



    opacity: 0.35;



    cursor: not-allowed;



}



.builder-carousel .owl-nav button.owl-next {



    width: 44px;



    height: 44px;







    margin: 0;



    padding: 0 !important;







    display: flex;



    align-items: center;



    justify-content: center;







    border: 1px solid rgba(201, 162, 39, 0.35) !important;



    border-radius: 50%;







    background: #000000 !important;



    color: #e4e4e4 !important;







    transition: all 0.3s ease;



}







.builder-carousel .owl-nav button.owl-prev:hover,



.builder-carousel .owl-nav button.owl-next:hover {



    background: var(--gold, #c9a227) !important;



    color: #111 !important;



    border-color: var(--gold, #c9a227) !important;



}







.builder-carousel .owl-nav button i {



    font-size: 14px;



    line-height: 1;



}







.builder-carousel .owl-nav button:focus {



    outline: none;



    box-shadow: none;



}







/* Disabled arrow */



.builder-carousel .owl-nav button.disabled {



    opacity: 0.35;



    cursor: not-allowed;



}







/*  popular cities */







/* Section Background */



.popular-cities-section {



    background-color: var(--paper);



    font-family: var(--font-body);



}







/* Title Wrapper */



.title-wrapper .eyebrow {



    font-family: var(--font-mono);



    font-size: 12px;



    letter-spacing: 0.14em;



    text-transform: uppercase;



    color: var(--grey);



    font-weight: 700;



    display: block;



    margin-bottom: 6px;



}







.title-wrapper .section-title {



    font-family: var(--font-display);



    font-size: clamp(22px, 3vw, 32px);



    font-weight: 700;



    color: var(--ink);



    margin: 0;



    line-height: 1.25;



}







.gradient-text {



    background: linear-gradient(



        135deg,



        var(--gold) 0%,



        var(--gold-bright) 100%



    );



    -webkit-background-clip: text;



    -webkit-text-fill-color: transparent;



}







.animated-gradient {



    background-size: 200% auto;



    animation: shine 4s linear infinite;



}







@keyframes shine {



    to {



        background-position: 200% center;



    }



}







.title-accent-line {



    width: 44px;



    height: 3px;



    background: var(--gold-bright);



    border-radius: var(--radius-s);



}







/* Premium Compact City Card */



.city-card {



    display: flex;



    flex-direction: column;



    background: var(--surface);



    border-radius: var(--radius-m);



    padding: 7px;



    border: 1px solid var(--line-soft);



    text-decoration: none !important;



    height: 100%;



    transition:



        transform var(--dur) var(--ease),



        box-shadow var(--dur) var(--ease),



        border-color var(--dur) var(--ease);



}







.city-card:hover {



    transform: translateY(-5px);



    border-color: rgba(255, 107, 53, 0.3);



    box-shadow: 0 14px 28px -10px rgba(10, 20, 17, 0.12);



}







/* Image Container & Overlay */



.city-img-wrapper {



    position: relative;



    width: 100%;



    aspect-ratio: 4 / 3;



    border-radius: calc(var(--radius-m) - 3px);



    overflow: hidden;



    background-color: var(--paper-deep);



}







.city-img-wrapper img {



    width: 100%;



    height: 100%;



    object-fit: cover;



    transition: transform var(--dur) var(--ease);



}







.city-card:hover .city-img-wrapper img {



    transform: scale(1.08);



}







/* Dark Glassmorphism Badge */



.city-badge {



    position: absolute;



    bottom: 8px;



    left: 8px;



    background: rgba(10, 20, 17, 0.65);



    backdrop-filter: blur(8px);



    -webkit-backdrop-filter: blur(8px);



    color: #ffffff;



    font-size: 10.5px;



    font-weight: 600;



    padding: 3px 8px;



    border-radius: var(--radius-s);



    border: 1px solid rgba(255, 255, 255, 0.15);



    display: flex;



    align-items: center;



    gap: 4px;



    line-height: 1;



}







/* Bottom Info Section */



.city-info {



    display: flex;



    align-items: center;



    justify-content: space-between;



    padding: 10px 6px 4px;



}







.city-name {



    font-family: var(--font-display);



    font-size: 14.5px;



    font-weight: 600;



    color: var(--ink);



    margin: 0;



    transition: color var(--dur) var(--ease);



}







.city-card:hover .city-name {



    color: var(--gold-bright);



}







/* Dynamic Interactive Arrow Button */



.city-arrow {



    width: 26px;



    height: 26px;



    border-radius: 50%;



    background: var(--paper);



    color: var(--ink-soft);



    display: inline-flex;



    align-items: center;



    justify-content: center;



    font-size: 12px;



    transition:



        background var(--dur) var(--ease),



        color var(--dur) var(--ease),



        transform var(--dur) var(--ease);



}







.city-card:hover .city-arrow {



    background: var(--gold-bright);



    color: #ffffff;



    transform: translate(2px, -2px);



}







/* why choose */







/* ---- Section Base ---- */



.pp-why-split-section {



    background-color: var(--paper);



    font-family: var(--font-body);



    position: relative;



    overflow: hidden;



}







/* ---- Left Column: Image Composition ---- */



.pp-why-visual-wrapper {



    padding: 12px;



}







.pp-visual-glow {



    position: absolute;



    width: 70%;



    height: 70%;



    top: 15%;



    left: 15%;



    background: radial-gradient(



        circle,



        rgba(255, 107, 53, 0.18) 0%,



        rgba(8, 47, 145, 0.08) 70%,



        transparent 100%



    );



    filter: blur(40px);



    z-index: 0;



}







.pp-visual-img-frame {



    position: relative;



    z-index: 1;



    border-radius: var(--radius-l);



    overflow: hidden;



    box-shadow: 0 20px 40px -15px rgba(10, 20, 17, 0.12);



    border: 4px solid var(--surface);



}







.pp-visual-img {



    width: 100%;



    height: 480px;



    object-fit: cover;



    transition: transform var(--dur) var(--ease);



}







.pp-why-visual-wrapper:hover .pp-visual-img {



    transform: scale(1.04);



}







/* Floating Glass Badges */



.pp-float-badge {



    position: absolute;



    z-index: 2;



    background: rgba(255, 255, 255, 0.9);



    backdrop-filter: blur(12px);



    -webkit-backdrop-filter: blur(12px);



    border: 1px solid rgba(255, 255, 255, 0.6);



    padding: 10px 16px;



    border-radius: var(--radius-m);



    display: flex;



    align-items: center;



    gap: 12px;



    box-shadow: 0 12px 24px -6px rgba(10, 20, 17, 0.1);



    transition: transform var(--dur) var(--ease);



}







.pp-float-badge:hover {



    transform: translateY(-4px);



}







.pp-badge-top-right {



    top: 30px;



    right: -10px;



}







.pp-badge-bottom-left {



    bottom: 30px;



    left: -10px;



}







.pp-badge-icon {



    width: 38px;



    height: 38px;



    border-radius: 50%;



    display: flex;



    align-items: center;



    justify-content: center;



    font-size: 18px;



    background-color: var(--paper-deep);



}







.bg-success-soft {



    background-color: #d1fae5;



    color: #059669;



}







.pp-badge-title,



.pp-badge-number {



    display: block;



    font-family: var(--font-display);



    font-weight: 700;



    font-size: 13.5px;



    color: var(--ink);



    line-height: 1.2;



}







.pp-badge-sub {



    display: block;



    font-size: 11px;



    color: var(--grey);



}







/* ---- Right Column: Typography & Eyebrow ---- */



.pp-eyebrow-pill {



    display: inline-block;



    font-family: var(--font-mono);



    font-size: 11.5px;



    letter-spacing: 0.12em;



    text-transform: uppercase;



    color: var(--gold-bright);



    background: rgba(255, 107, 53, 0.08);



    padding: 6px 14px;



    border-radius: 50px;



    font-weight: 700;



}







.pp-title {



    font-family: var(--font-display);



    font-size: clamp(24px, 3vw, 36px);



    font-weight: 700;



    color: var(--ink);



    line-height: 1.25;



}







.pp-subtitle {



    font-size: 15px;



    color: var(--grey);



    line-height: 1.6;



}







.gradient-text {



    background: linear-gradient(



        135deg,



        var(--gold) 0%,



        var(--gold-bright) 100%



    );



    -webkit-background-clip: text;



    -webkit-text-fill-color: transparent;



}







.animated-gradient {



    background-size: 200% auto;



    animation: shine 4s linear infinite;



}







@keyframes shine {



    to {



        background-position: 200% center;



    }



}







/* ---- Feature Items (List Layout) ---- */



.pp-feature-item {



    background: var(--surface);



    border: 1px solid var(--line-soft);



    border-radius: var(--radius-m);



    padding: 18px;



    height: 100%;



    display: flex;



    flex-direction: column;



    gap: 12px;



    transition:



        transform var(--dur) var(--ease),



        box-shadow var(--dur) var(--ease),



        border-color var(--dur) var(--ease);



}







.pp-feature-item:hover {



    transform: translateY(-5px);



    border-color: rgba(255, 107, 53, 0.3);



    box-shadow: 0 14px 28px -10px rgba(10, 20, 17, 0.08);



}







.pp-feature-icon-wrapper {



    width: 44px;



    height: 44px;



    border-radius: var(--radius-s);



    background-color: var(--paper-deep);



    color: var(--gold);



    display: flex;



    align-items: center;



    justify-content: center;



    font-size: 20px;



    transition:



        background-color var(--dur) var(--ease),



        color var(--dur) var(--ease),



        transform var(--dur) var(--ease);



}







.pp-feature-item:hover .pp-feature-icon-wrapper {



    background-color: var(--gold-bright);



    color: #ffffff;



    transform: scale(1.05) rotate(-3deg);



}







.pp-feature-title {



    font-family: var(--font-display);



    font-size: 15.5px;



    font-weight: 600;



    color: var(--ink);



    transition: color var(--dur) var(--ease);



}







.pp-feature-item:hover .pp-feature-title {



    color: var(--gold-bright);



}







.pp-feature-text {



    font-size: 13px;



    color: var(--grey);



    line-height: 1.5;



}







/* ---- Responsive Tweaks ---- */



@media (max-width: 991.98px) {



    .pp-badge-top-right {



        right: 10px;



    }



    .pp-badge-bottom-left {



        left: 10px;



    }



    .pp-visual-img {



        height: 380px;



    }



}







/* listing property */







/* ---- Section Base ---- */



.pp-latest-section {



    background-color: var(--paper);



    font-family: var(--font-body);



}







/* Header & Eyebrow */



.pp-eyebrow-pill {



    display: inline-block;



    font-family: var(--font-mono);



    font-size: 11px;



    letter-spacing: 0.12em;



    text-transform: uppercase;



    color: var(--gold-bright);



    background: rgba(255, 107, 53, 0.08);



    padding: 5px 12px;



    border-radius: 50px;



    font-weight: 700;



}







.pp-title {



    font-family: var(--font-display);



    font-size: clamp(22px, 3vw, 32px);



    font-weight: 700;



    color: var(--ink);



    line-height: 1.2;



}







.pp-subtitle {



    font-size: 14px;



    color: var(--grey);



}







.gradient-text {



    background: linear-gradient(



        135deg,



        var(--gold) 0%,



        var(--gold-bright) 100%



    );



    -webkit-background-clip: text;



    -webkit-text-fill-color: transparent;



}







.pp-btn-link {



    color: var(--gold-bright);



    font-weight: 600;



    font-size: 14px;



    text-decoration: none;



    transition: color var(--dur) var(--ease);



}







.pp-btn-link:hover {



    color: var(--gold);



}







/* ---- Top-Right Navigation Arrow Buttons ---- */



.pp-nav-btn {



    width: 38px;



    height: 38px;



    border-radius: 50%;



    border: 1px solid var(--line-soft);



    background: var(--surface);



    color: var(--ink);



    display: inline-flex;



    align-items: center;



    justify-content: center;



    font-size: 14px;



    cursor: pointer;



    transition: all var(--dur) var(--ease);



}







.pp-nav-btn:hover {



    background: var(--gold-bright);



    color: #ffffff;



    border-color: var(--gold-bright);



    transform: translateY(-2px);



    box-shadow: 0 6px 14px rgba(255, 107, 53, 0.25);



}







/* ---- Compact Property Card Styling ---- */



.pp-prop-card-sm {



    background: var(--surface);



    border: 1px solid var(--line-soft);



    border-radius: var(--radius-m);



    padding: 8px;



    display: flex;



    flex-direction: column;



    overflow: hidden;



    transition:



        transform var(--dur) var(--ease),



        box-shadow var(--dur) var(--ease),



        border-color var(--dur) var(--ease);



}







.pp-prop-card-sm:hover {



    transform: translateY(-5px);



    border-color: rgba(255, 107, 53, 0.3);



    box-shadow: 0 14px 28px -10px rgba(10, 20, 17, 0.1);



}







/* Compact Image Area */



.pp-card-media {



    position: relative;



    width: 100%;



    height: 180px; /* Reduced height for small/compact card */



    border-radius: calc(var(--radius-m) - 2px);



    overflow: hidden;



    background-color: var(--paper-deep);



}







.pp-card-media img {



    width: 100%;



    height: 100%;



    object-fit: cover;



    transition: transform var(--dur) var(--ease);



}







.pp-prop-card-sm:hover .pp-card-media img {



    transform: scale(1.06);



}







/* Badges & Favorite Button */



.pp-media-badges {



    position: absolute;



    top: 10px;



    left: 10px;



    z-index: 2;



}







.pp-badge-new {



    background: var(--gold-bright);



    color: #ffffff;



    font-size: 10.5px;



    font-weight: 700;



    padding: 3px 9px;



    border-radius: var(--radius-s);



    text-transform: uppercase;



    letter-spacing: 0.05em;



}







.pp-fav-btn {



    position: absolute;



    top: 10px;



    right: 10px;



    z-index: 2;



    width: 32px;



    height: 32px;



    border-radius: 50%;



    background: rgba(255, 255, 255, 0.85);



    backdrop-filter: blur(4px);



    border: none;



    color: var(--grey-light);



    display: flex;



    align-items: center;



    justify-content: center;



    font-size: 13px;



    cursor: pointer;



    transition: all var(--dur) var(--ease);



}







.pp-fav-btn:hover {



    background: #ffffff;



    color: #ef4444;



    transform: scale(1.1);



}







/* Card Body */



.pp-card-body {



    padding: 12px 8px 6px;



}







.pp-card-price {



    font-family: var(--font-display);



    font-size: 16px;



    font-weight: 700;



    color: var(--gold);



}







.pp-time-text {



    font-size: 11px;



    color: var(--grey-light);



}







.pp-card-title {



    font-family: var(--font-display);



    font-size: 14.5px;



    font-weight: 600;



    color: var(--ink);



    transition: color var(--dur) var(--ease);



}







.pp-prop-card-sm:hover .pp-card-title {



    color: var(--gold-bright);



}







.pp-card-location {



    font-size: 12.5px;



    color: var(--grey);



}







/* Compact Specs Pills */



.pp-spec-pill {



    font-size: 11.5px;



    color: var(--grey);



    background: var(--paper);



    padding: 4px 8px;



    border-radius: var(--radius-s);



    display: inline-flex;



    align-items: center;



    gap: 4px;



    white-space: nowrap;



}







.pp-spec-pill i {



    color: var(--gold);



    font-size: 12px;



}







/* popular cities */







/* Top-Right Custom Navigation Buttons */



.pp-owl-nav .pp-nav-btn {



    width: 38px;



    height: 38px;



    border-radius: 50%;



    border: 1px solid var(--line);



    background: var(--surface);



    color: var(--ink);



    display: inline-flex;



    align-items: center;



    justify-content: center;



    font-size: 0.85rem;



    transition: all 0.25s var(--ease);



    cursor: pointer;



}







.pp-owl-nav .pp-nav-btn:hover {



    background: var(--gold);



    color: #ffffff;



    border-color: var(--gold);



    transform: translateY(-2px);



    box-shadow: 0 4px 12px rgba(8, 47, 145, 0.15);



}







/* Modern Builder Card Design */



.pp-builder-card {



    background: var(--surface);



    border: 1px solid var(--line);



    border-radius: var(--radius-m);



    padding: 18px;



    display: flex;



    flex-direction: column;



    justify-content: space-between;



    height: 100%;



    transition: all 0.3s var(--ease);



    position: relative;



    overflow: hidden;



}







.pp-builder-card:hover {



    border-color: var(--paper-deep);



    transform: translateY(-4px);



    box-shadow: 0 12px 28px -6px rgba(10, 20, 17, 0.08);



}







/* Card Header & Logo */



.pp-builder-head {



    display: flex;



    align-items: center;



    justify-content: center;



    margin-bottom: 14px;



}







.pp-builder-logo {



    width: 70px;



    height: 70px;



    border-radius: var(--radius-s);



    background: var(--paper);



    border: 1px solid var(--line-soft);



    padding: 6px;



    display: flex;



    align-items: center;



    justify-content: center;



}







.pp-builder-logo img {



    max-width: 100%;

    height: 100%;

    max-height: 100%;



    /* object-fit: contain; */



}







.pp-badge-verified {



    color: var(--gold);



    font-size: 1.1rem;



}







/* Card Body & Name */



.pp-builder-name {



    font-family: var(--font-display);



    font-weight: 700;



    font-size: 1rem;



    color: var(--ink);



    text-align: center !important;



    margin-bottom: 10px;



}







/* Compact Stats Row */



.pp-builder-stats {



    display: flex;



    align-items: center;



    gap: 8px;



    background: var(--paper);



    padding: 8px 10px;



    border-radius: var(--radius-s);



    font-size: 0.78rem;



    color: var(--grey);



    margin-bottom: 16px;



}







.pp-stat-item {



    display: flex;



    align-items: center;



    gap: 5px;



    white-space: nowrap;



}







.pp-stat-item i {



    color: var(--olive);



    font-size: 0.75rem;



}







.pp-stat-divider {



    width: 1px;



    height: 12px;



    background: var(--line);



}







/* Button / Link Action */



.pp-builder-link {



    display: flex;



    align-items: center;



    justify-content: space-between;



    font-size: 0.82rem;



    font-weight: 600;



    color: var(--gold);



    text-decoration: none;



    padding-top: 10px;



    border-top: 1px dashed var(--line-soft);



    transition: all 0.25s var(--ease);



}







.pp-builder-link i {



    transition: transform 0.25s var(--ease);



}







.pp-builder-card:hover .pp-builder-link {



    color: var(--gold-bright);



}







.pp-builder-card:hover .pp-builder-link i {



    transform: translateX(4px);



}







/* exclusive ghaziabad */







/* ---- Owner Badge & Photo Count styling ---- */



.pp-badge-photos {



    background: rgba(10, 20, 17, 0.65);



    backdrop-filter: blur(4px);



    color: #ffffff;



    font-size: 11px;



    font-weight: 600;



    padding: 3px 8px;



    border-radius: var(--radius-s);



}







.pp-badge-owner {



    position: absolute;



    top: 10px;



    right: 10px;



    z-index: 2;



    background: var(--gold-bright);



    color: #ffffff;



    font-size: 10px;



    font-weight: 700;



    padding: 3px 8px;



    border-radius: var(--radius-s);



    text-transform: uppercase;



}







.pp-status-tag {



    font-size: 12px;



    font-weight: 600;



    color: var(--grey);



}







.pp-view-details-link {



    font-size: 12px;



    font-weight: 700;



    color: var(--gold-bright);



    text-decoration: none;



    transition: color var(--dur) var(--ease);



}







.pp-view-details-link:hover {



    color: var(--gold);



    text-decoration: underline;



}







/* types of property */







/* Card Container */



.pp-type-overlay-card {



    position: relative;



    display: block;



    height: 380px;



    border-radius: 18px;



    overflow: hidden;



    text-decoration: none !important;



    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.12);



    transition:



        transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),



        box-shadow 0.4s ease;



}







.pp-type-overlay-card:hover {



    transform: translateY(-6px);



    box-shadow: 0 20px 35px -8px rgba(0, 0, 0, 0.25);



}







/* Background Image Layer */



.pp-type-bg {



    position: absolute;



    top: 0;



    left: 0;



    width: 100%;



    height: 100%;



    background-size: cover;



    background-position: center;



    transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);



    z-index: 1;



}







.pp-type-overlay-card:hover .pp-type-bg {



    transform: scale(1.08);



}







/* Gradient Overlay */



.pp-type-overlay {



    position: absolute;



    top: 0;



    left: 0;



    width: 100%;



    height: 100%;



    background: linear-gradient(



        180deg,



        rgba(10, 20, 17, 0.15) 0%,



        rgba(10, 20, 17, 0.45) 50%,



        rgba(8, 20, 45, 0.92) 100%



    );



    z-index: 2;



    transition: opacity 0.3s ease;



}







/* Card Content Area */



.pp-type-content {



    position: relative;



    z-index: 3;



    height: 100%;



    padding: 20px;



    display: flex;



    flex-direction: column;



    justify-content: space-between;



}







/* Glassmorphism Badge */



.pp-type-badge {



    align-self: flex-start;



    background: rgba(255, 255, 255, 0.2);



    backdrop-filter: blur(8px);



    -webkit-backdrop-filter: blur(8px);



    border: 1px solid rgba(255, 255, 255, 0.3);



    color: #ffffff;



    font-size: 12px;



    font-weight: 600;



    padding: 5px 12px;



    border-radius: 30px;



}







/* Details Section */



.pp-type-icon-wrapper {



    width: 42px;



    height: 42px;



    background: rgba(255, 107, 53, 0.9);



    color: #ffffff;



    border-radius: 12px;



    display: flex;



    align-items: center;



    justify-content: center;



    font-size: 20px;



    backdrop-filter: blur(4px);



    transition:



        transform 0.3s ease,



        background-color 0.3s ease;



}







.pp-type-overlay-card:hover .pp-type-icon-wrapper {



    transform: translateY(-3px);



    background: #ff6b35;



}







.pp-type-name {



    color: #ffffff;



    font-size: 20px;



    font-weight: 700;



    margin-bottom: 2px;



    letter-spacing: -0.3px;



}







.pp-type-sub {



    color: rgba(255, 255, 255, 0.8);



    font-size: 13px;



    margin-bottom: 14px;



}







/* Action Link with Animated Arrow */



.pp-type-action {



    display: inline-flex;



    align-items: center;



    color: #ffaa8a;



    font-size: 13px;



    font-weight: 700;



    transition: color 0.3s ease;



}







.pp-type-action i {



    transition: transform 0.3s ease;



}







.pp-type-overlay-card:hover .pp-type-action {



    color: #ffffff;



}







.pp-type-overlay-card:hover .pp-type-action i {



    transform: translateX(5px);



}







/* high demanding */







/* Section Typography */



.pp-invest-title {



    color: #091e42;



    font-size: 26px;



    letter-spacing: -0.2px;



}







.pp-invest-subtitle {



    font-size: 15px;



    color: #5e6c84;



}







/* Card Container */



.pp-project-card {



    display: flex;



    background: #ffffff;



    border: 1px solid #e2e8f0;



    border-radius: 8px;



    overflow: hidden;



    height: 140px;



    transition:



        border-color 0.25s ease,



        box-shadow 0.25s ease,



        transform 0.25s ease;



}







.pp-project-card:hover {



    border-color: #cbd5e1;



    box-shadow: 0 8px 20px rgba(9, 30, 66, 0.08);



    transform: translateY(-2px);



}







/* Fixed Width Image Area */



.pp-img-wrapper {



    width: 140px;



    min-width: 140px;



    height: 100%;



    overflow: hidden;



    background-color: #f1f5f9;



}







.pp-img-wrapper img {



    width: 100%;



    height: 100%;



    object-fit: cover;



    transition: transform 0.3s ease;



}







.pp-project-card:hover .pp-img-wrapper img {



    transform: scale(1.05);



}







/* Right Content Area */



.pp-card-info {



    padding: 12px 14px;



    display: flex;



    flex-direction: column;



    justify-content: space-between;



    width: calc(100% - 140px);



}







.pp-project-name {



    font-size: 15px;



    font-weight: 700;



    color: #091e42;



    line-height: 1.2;



}







.pp-developer-name {



    font-size: 12px;



    color: #6b7280;



}







.pp-spec-text {



    font-size: 13px;



    color: #334155;



    font-weight: 500;



}







.pp-location-text {



    font-size: 12px;



    color: #64748b;



}







.pp-price-tag {



    font-size: 15px;



    font-weight: 700;



    color: #091e42;



}







/* breadcrumbs */







/* Fixed Header Clearance & Dark Hero Background */



.pp-breadcrumb-wrapper {



    position: relative;



    padding-top: 120px; /* Offset for fixed transparent header */



    padding-bottom: 24px;



    background: linear-gradient(180deg, #070d0b 0%, #0f1c18 100%);



    border-bottom: 1px solid rgba(255, 255, 255, 0.08);



    overflow: hidden;



}







/* Background Soft Glow Accent */



.pp-breadcrumb-wrapper::before {



    content: "";



    position: absolute;



    top: 0;



    left: 20%;



    width: 350px;



    height: 100%;



    background: radial-gradient(



        circle,



        rgba(255, 107, 53, 0.12) 0%,



        rgba(0, 0, 0, 0) 70%



    );



    pointer-events: none;



}







/* Glassmorphism Capsule Pill Style */



.pp-breadcrumb {



    display: inline-flex;



    align-items: center;



    background: rgba(255, 255, 255, 0.06);



    backdrop-filter: blur(12px);



    -webkit-backdrop-filter: blur(12px);



    padding: 8px 20px;



    border-radius: 50px;



    border: 1px solid rgba(255, 255, 255, 0.12);



    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);



    max-width: 100%;



}







.pp-breadcrumb .breadcrumb-item {



    font-size: 13.5px;



    font-weight: 500;



    display: flex;



    align-items: center;



}







/* Chevron Divider Icon */



.pp-breadcrumb .breadcrumb-item + .breadcrumb-item::before {



    content: "\F285";



    font-family: "bootstrap-icons";



    color: rgba(255, 255, 255, 0.35);



    font-size: 11px;



    padding: 0 10px;



}







/* Non-active Links */



.pp-breadcrumb .breadcrumb-item a {



    color: rgba(255, 255, 255, 0.75);



    text-decoration: none;



    transition: color 0.25s ease;



    display: inline-flex;



    align-items: center;



}







.pp-breadcrumb .breadcrumb-item a:hover {



    color: #ff6b35;



}







/* Active Current Page */



.pp-breadcrumb .breadcrumb-item.active {



    color: #ffffff;



    font-weight: 600;



    min-width: 0;



}







.pp-breadcrumb .breadcrumb-item.active .text-truncate {



    max-width: 300px;



    display: inline-block;



    vertical-align: bottom;



}







/* property detail */







/* ============================================================



               GALLERY



               ============================================================ */



.gallery-main {



    position: relative;



    border-radius: var(--radius-l);



    overflow: hidden;



    background: var(--paper-deep);



    height: 480px;



}







.gallery-main img {



    width: 100%;



    height: 100%;



    object-fit: cover;



    transition: transform 0.4s var(--ease);



    cursor: pointer;



}







.gallery-main img:hover {



    transform: scale(1.02);



}







.gallery-thumb {



    position: relative;



    border-radius: var(--radius-m);



    overflow: hidden;



    background: var(--paper-deep);



    aspect-ratio: 1 / 1;



    cursor: pointer;



    transition: all 0.25s var(--ease);



    border: 2px solid transparent;



}







.gallery-thumb:hover {



    border-color: var(--gold);



    transform: translateY(-2px);



}







.gallery-thumb img {



    width: 100%;



    height: 100%;



    object-fit: cover;



}







.gallery-thumb .overlay-count {



    position: absolute;



    inset: 0;



    display: flex;



    align-items: center;



    justify-content: center;



    background: rgba(10, 20, 17, 0.55);



    backdrop-filter: blur(3px);



    color: #fff;



    font-family: var(--font-display);



    font-weight: 700;



    font-size: 1.1rem;



    letter-spacing: 0.02em;



}







.gallery-thumb .overlay-count i {



    font-size: 1.2rem;



    margin-right: 6px;



}







/* ============================================================



               MODAL GALLERY



               ============================================================ */



.modal-gallery .modal-content {



    background: rgba(10, 20, 17, 0.92);



    backdrop-filter: blur(12px);



    border: 0;



    border-radius: var(--radius-l);



    overflow: hidden;



}







.modal-gallery .modal-body {



    padding: 0;



}







.modal-gallery .carousel-item {



    height: 70vh;



    min-height: 400px;



    background: var(--ink);



}







.modal-gallery .carousel-item img {



    width: 100%;



    height: 100%;



    object-fit: contain;



}







.modal-gallery .carousel-control-prev,



.modal-gallery .carousel-control-next {



    width: 10%;



    opacity: 0;



    transition: opacity 0.3s var(--ease);



}







.modal-gallery .carousel:hover .carousel-control-prev,



.modal-gallery .carousel:hover .carousel-control-next {



    opacity: 1;



}







.modal-gallery .carousel-indicators {



    bottom: 20px;



}







.modal-gallery .carousel-indicators button {



    width: 10px;



    height: 10px;



    border-radius: 50%;



    border: 0;



    background: rgba(255, 255, 255, 0.35);



    margin: 0 5px;



    transition: all 0.25s var(--ease);



}







.modal-gallery .carousel-indicators button.active {



    background: #fff;



    width: 28px;



    border-radius: 100px;



}







.modal-gallery .btn-close-white {



    filter: brightness(0) invert(1);



    opacity: 0.7;



    transition: opacity 0.2s;



}







.modal-gallery .btn-close-white:hover {



    opacity: 1;



}







/* ============================================================



               RESPONSIVE



               ============================================================ */



@media (max-width: 991.98px) {



    .gallery-main {



        height: 340px;



    }







    .property-title {



        font-size: 1.6rem;



    }







    .property-price {



        font-size: 1.8rem;



    }







    .sidebar-sticky {



        position: static;



        margin-top: 2rem;



    }







    .modal-gallery .carousel-item {



        height: 50vh;



        min-height: 300px;



    }



}







@media (max-width: 575.98px) {



    .gallery-main {



        height: 240px;



        border-radius: var(--radius-m);



    }







    .property-title {



        font-size: 1.3rem;



    }







    .property-price {



        font-size: 1.5rem;



    }







    .card-modern .card-body {



        padding: 1.25rem 1rem;



    }







    .gallery-thumb {



        aspect-ratio: 1 / 1;



    }







    .modal-gallery .carousel-item {



        height: 40vh;



        min-height: 220px;



    }



}







/* ============================================================



               UTILITY HELPERS



               ============================================================ */







/* image placeholder fallback */



.img-placeholder {



    background: var(--paper-deep);



    display: flex;



    align-items: center;



    justify-content: center;



    color: var(--grey-light);



    font-size: 2.5rem;



}









/*  update a new css */







.modern-card.reveal-up .property-title{    font-size: 17px!important;

    font-weight: 600!important;    }



.modern-card.reveal-up .property-price {font-size: 20px!important;

    font-weight: 400!important;     display: flex;

    align-items: center;

    gap: 10px;}









    

.builder-carousel {



    position: relative;



    padding-top: 55px;



}







.latestpro-carousel .owl-nav {



    position: absolute;



    top: 0;



    right: 0;







    display: flex;



    align-items: center;



    gap: 8px;







    margin: 0;



}







.latestpro-carousel {



    position: relative;



    padding-top: 55px;



}







.latestpro-carousel .owl-nav {



    position: absolute;



    top: 0;



    right: 0;







    display: flex;



    align-items: center;



    gap: 8px;







    margin: 0;



}







.latestpro-carousel .owl-nav button.owl-prev,



.latestpro-carousel .owl-nav button.owl-next {



    width: 44px;



    height: 44px;







    margin: 0;



    padding: 0 !important;







    display: flex;



    align-items: center;



    justify-content: center;







    border: 1px solid rgba(201, 162, 39, 0.35) !important;



    border-radius: 50%;







    background: #000000 !important;



    color: #e4e4e4 !important;







    transition: all 0.3s ease;



}







.latestpro-carousel .owl-nav button.owl-prev:hover,



.latestpro-carousel .owl-nav button.owl-next:hover {



    background: var(--gold, #c9a227) !important;



    color: #111 !important;



    border-color: var(--gold, #c9a227) !important;



}







.latestpro-carousel .owl-nav button i {



    font-size: 14px;



    line-height: 1;



}







.latestpro-carousel .owl-nav button:focus {



    outline: none;



    box-shadow: none;



}





@media(max-width:767px){

    .footer-brand p{max-width: 100%!important;}



    .pp-section-head{text-align: center;

        margin: 0 auto;

        display: block !important;}



    .sidebar-ambient-glow{display: none !important;}

    .pp-section-head{flex-wrap: wrap!important;}

    .latestpro-carousel .owl-nav{display: none!important;}

    .hero-title { font-size:26px!important;}



}



@media (max-width: 991px) {





    .main-nav, .icon-btn.d-search {

        display: none !important;

    }

}







/* ==========================================

   MOBILE OPTIMIZATION (Up to 768px)

   ========================================== */

@media (max-width: 768px) {



   .btn-mbileview{background: #ff8558;

    text-transform: capitalize;

    font-size: 14px;

    font-weight: 600;

    padding: 8px 11px;

    border-radius: 30px;

    margin-top: 30px;

    transition: cubic-bezier(0.165, 0.84, 0.44, 1);

}



.btn-mbileview:hover{background: #ff8551;}



.pp-builder-link{justify-content: center; gap:15px;}







    .builder-carousel {

    position: relative;

    padding-top: 9px;

}

    .builder-carousel .owl-nav{display: none!important;}



    .pp-builder-stats{justify-content: center;}



    .pp-builder-logo{width: 100px;

    height: 100px;}

    /* 1. Panel Container Adjustments */

    .search-panel {

        padding: 16px 12px 20px;

        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);

    }



    /* 2. Responsive Tabs (Horizontal Scroll / Full Width) */

    .search-tabs {

        width: 100%;

        overflow-x: auto;

        white-space: nowrap;

        -webkit-overflow-scrolling: touch;

        margin-bottom: -1px; /* Align seamlessly with form grid */

        scrollbar-width: none; /* Hide scrollbar Firefox */

    }



    .search-tabs::-webkit-scrollbar {

        display: none; /* Hide scrollbar Chrome/Safari */

    }



    .search-tabs button {

        max-width: none;

        flex: 1 0 auto;

        padding: 12px 14px;

        font-size: 13px;

    }



    /* 3. Single Column Grid Layout */

    .search-field1 {

        grid-template-columns: 1fr !important;

        gap: 8px; /* Adds clear spacing between stacked fields */

        background: transparent;

    }



    .search-field1 > div {

        min-height: 46px;

    }



    /* 4. Fix Input Rounded Corners When Stacked */

    .search-field1 .form-select,

    .search-field1 .form-control {

        border-radius: 8px !important; /* Full rounded corners for mobile items */

        border: 1px solid rgba(11, 77, 224, 0.18);

        height: 48px;

        font-size: 0.9rem;

    }



    .search-field1 .search-field-btn {

        border-radius: 8px !important;

        margin-top: 4px;

    }



    .search-field1 .pp-search-btn {

        height: 48px;

        border-radius: 8px !important;

        width: 100%;

        font-size: 1rem;

        justify-content: center;

    }



    /* 5. Mobile Suggestions Menu Positioning */

    #location-suggestions {

        position: absolute;

        top: 100%;

        left: 0;

        right: 0;

        max-height: 220px;

        box-shadow: 0 10px 25px rgba(0,0,0,0.15) !important;

    }



    /* 6. Feature Badges Spacing */

    .pp-hero-badges {

        display: flex;

        flex-wrap: wrap;

        gap: 8px 14px;

        justify-content: center;

        margin-top: 1.2rem !important;

    }



    .pp-hero-badges span {

        font-size: 12px;

        white-space: nowrap;

    }

}











/* Nested Accordion Clean Styling */

.nested-mobile-accordion {

    border: none;

    background: transparent;

}



.nested-mobile-accordion .accordion-item {

    border: none;

    border-bottom: 1px solid rgba(0, 0, 0, 0.05);

    background: transparent;

}



.nested-mobile-accordion .mega-col-title {

    font-size: 14px;

    border-radius: 10px;

    font-weight: 600;

    padding: 10px 16px;

        background: rgb(212 212 212 / 23%);

    color: #eaeaea;

    box-shadow: none !important;

}



/* Adjust toggle icon size for nested items */

.nested-mobile-accordion .mega-col-title::after {

    width: 12px;

    height: 12px;

    background-size: 12px;

}



.nested-mobile-accordion .accordion-body {

    padding: 10px 20px;

    

}



.nested-mobile-accordion ul li {

    margin-bottom: 8px;

}



.nested-mobile-accordion ul li a {

    text-decoration: none;

    color: #555;

    font-size: 13.5px;

    display: block;

    transition: color 0.2s ease;

}



.nested-mobile-accordion ul li a:hover {

    color: #082f91;

}



/* devloper pages */



/* Hero Banner Container */
.developer-hero-banner {
    height: 480px;
    position: relative;
    background-color: #0f172a;
}

/* Background Real Estate Image */
.developer-banner-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transform: scale(1.02);
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.developer-hero-banner:hover .developer-banner-bg {
    transform: scale(1.05);
}

/* Bright Vibrant Gradient Overlay (Blue to Deep Indigo) */
.developer-banner-overlay {
    position: absolute;
    inset: 0;
    background: #0000009e;
    z-index: 1;
}

/* Center Avatar Profile Styling */
.developer-avatar-wrapper {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    padding: 4px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
}

.developer-avatar-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #ffffff;
}

.verified-badge-icon {
    position: absolute;
    bottom: 4px;
    right: 4px;
    background: #ffffff;
    color: #2563eb;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

/* Typography & Layout Adjustments */
.max-w-700 {
    max-width: 700px;
}

.developer-title {
    font-size: clamp(2.2rem, 4.5vw, 3.2rem);
    letter-spacing: -0.02em;
    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.developer-subtitle {
    font-size: 1.05rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
}

.bg-white-soft {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.tracking-wide {
    letter-spacing: 0.08em;
    font-size: 0.75rem;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .developer-hero-banner {
        height: 420px;
    }

    .developer-avatar-wrapper {
        width: 100px;
        height: 100px;
    }
}








/* Layout Container */
.property-listing-v2 {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Base Horizontal Card */
.property-card-modern {
    display: flex;
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
}

.property-card-modern:hover {
    transform: translateY(-4px);
    border-color: #cbd5e1;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08);
}

/* Image / Media Wrapper */
.property-media-wrapper {
    position: relative;
    width: 320px;
    min-width: 320px;
    background-color: #f8fafc;
    overflow: hidden;
}

.media-link {
    display: block;
    height: 100%;
    width: 100%;
}

.property-media-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.property-card-modern:hover .property-media-img {
    transform: scale(1.05);
}

/* Agency Tag */
.agency-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    background: rgba(15, 23, 42, 0.75);
    backdrop-filter: blur(8px);
    color: #ffffff;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 500;
}

/* Floating Overlays */
.media-floating-meta {
    position: absolute;
    bottom: 12px;
    left: 12px;
    right: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 2;
}

.status-badge.verified {
    background: #10b981;
    color: #ffffff;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.photo-counter {
    background: rgba(0, 0, 0, 0.6);
    color: #ffffff;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 500;
}

/* Main Content Area */
.property-content-body {
    flex: 1;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.header-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.property-type-pill {
    background: #eff6ff;
    color: #ff5d2c;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 6px;
}

.update-time-text {
    font-size: 0.75rem;
    color: #94a3b8;
}

.property-listing-v2 .property-title {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 14px;
}

.property-title a {
    color: #0f172a;
    text-decoration: none;
    transition: color 0.2s ease;
}

.property-title a:hover {
    color: #ff5d2c;
}

/* Metrics Bar */
.property-metrics-bar {
    display: flex;
    align-items: center;
   
    margin-bottom: 10px;
}

.metric-item {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.metric-val {
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.2;
}

.metric-lbl {
    font-size: 0.725rem;
    color: #64748b;
    margin-top: 2px;
}

.metric-divider {
    width: 1px;
    height: 28px;
    background-color: #e2e8f0;
    margin: 0 16px;
}

/* Amenities Strip */
.property-amenities-strip {
    font-size: 0.825rem;
    color: #475569;
    white-space: normal;
   
    margin-bottom: 12px;
}

.amenities-label {
    font-weight: 600;
    color: #1e293b;
    margin-right: 4px;
}

/* Footer Section */
.property-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 14px;
    border-top: 1px solid #f1f5f9;
}

.location-brief {
    font-size: 0.825rem;
    color: #64748b;
    font-weight: 500;
}

.footer-actions {
    display: flex;
    gap: 10px;
}

.btn-view-details {
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #475569;
    background: #f1f5f9;
    text-decoration: none;
    transition: all 0.2s ease;
}

.btn-view-details:hover {
    background: #e2e8f0;
    color: #0f172a;
}

.btn-contact-modern {
    padding: 8px 18px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #ffffff;
    background: #ff5d2c;
    text-decoration: none;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.2);
}

.btn-contact-modern:hover {
    background: #ff5d2c;
    color: #ffffff;
}

/* Mobile Responsive Adjustments */
@media (max-width: 768px) {
    .property-card-modern {
        flex-direction: column;
    }

    .property-media-wrapper {
        width: 100%;
        min-width: 100%;
        height: 200px;
    }

    .property-metrics-bar {
        flex-wrap: wrap;
        gap: 12px;
    }

    .metric-divider {
        display: none;
    }

    .metric-item {
        min-width: 45%;
    }

    .property-card-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .footer-actions {
        width: 100%;
    }

    .btn-view-details, .btn-contact-modern {
        flex: 1;
        text-align: center;
    }
}


/* Sidebar Wrapper & Cards */
.developer-sidebar-wrapper {
    display: flex;
    flex-direction: column;
}

.sidebar-card {
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.04);
    overflow: hidden;
}



/* Banner Card & Overlay */
.promo-banner-card {
    height: 360px;
    position: relative;
    border-radius: 16px;
}

.banner-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.promo-banner-card:hover .banner-img {
    transform: scale(1.05);
}

.banner-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(15, 23, 42, 0.9) 0%, rgba(15, 23, 42, 0.2) 60%);
}

/* Glassmorphic Badge */
.glass-badge {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.3);
}



/* pages */


.privacy-policy-section p{text-align: justify;}
.privacy-policy-section p, .privacy-policy-section ul li, .privacy-policy-section ol li{    color: #333;
    font-size: 15px;
    line-height: 1.5rem;
    margin-bottom: 1rem;
    font-weight: 500;}
    .privacy-policy-section h1, .privacy-policy-section h2, .privacy-policy-section h3, .privacy-policy-section h4, .privacy-policy-section h5, .privacy-policy-section h6{
        color: #333;
    font-weight: 700;
    margin-bottom: 17px;
    margin-top: 22px;
    
    }


    .privacy-policy-section h1{font-size: 35px;}
    .privacy-policy-section h2{font-size: 28px;}
    .privacy-policy-section h3{font-size: 25px;}
    .privacy-policy-section h4{font-size: 22px;}

    .privacy-policy-content ul {padding-left: 15px;
    list-style-type: disc;}
    .privacy-policy-content ul li::marker {
    color: #ff5d2c;
}

.privacy-policy-content ol li::marker {
    color: #ff5d2c;
}

.privacy-policy-content a {
    color: #ff5d2c;
    text-decoration: underline;
}


/* contact us */


/* =========================================
   CONTACT SECTION
========================================= */

.contact-section {
    padding: 50px 0;
    background: #fff!important

    
}






/* =========================================
   MAIN CONTACT WRAPPER
========================================= */

.contact-section .contact-wrapper {
    display: grid;

    grid-template-columns: 0.85fr 1.15fr;

    max-width: 1180px;

    margin: 0 auto;

    background: var(--surface);

    border-radius: 28px;

    overflow: hidden;

    box-shadow:
        0 25px 70px rgba(10, 20, 17, 0.08);

    border: 1px solid rgba(10, 20, 17, 0.06);
}


/* =========================================
   LEFT CONTACT INFORMATION
========================================= */

.contact-section .contact-info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    padding: 50px 45px;

    background: var(--ink);

    color: var(--surface);

    position: relative;

    overflow: hidden;
}


/* Decorative Circle */

.contact-section .contact-info::before {
    content: "";

    position: absolute;

    width: 280px;
    height: 280px;

    border-radius: 50%;

    background: var(--gold);

    opacity: 0.12;

    top: -120px;
    right: -100px;
}

.contact-section .contact-info::after {
    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    border-radius: 50%;

    background: var(--gold-bright);

    opacity: 0.06;

    bottom: -80px;
    left: -80px;
}


.contact-section .info-content,
.contact-section .social-area {
    position: relative;
    z-index: 2;
}


.contact-section .info-label {
    display: inline-block;

    color: var(--gold-bright);

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 2px;

    margin-bottom: 18px;
}


.contact-section .info-content h2 {
    max-width: 400px;

    margin: 0 0 18px;

    color: var(--surface);

    font-size: 24px;
    font-weight: 700;

    line-height: 1.2;

    letter-spacing: -1px;
}

.contact-section .info-content h2 span {
    color: var(--gold-bright);
}


.contact-section .info-description {
    max-width: 430px;

    margin-bottom: 38px;

    color: rgba(255, 255, 255, 0.65);

    font-size: 14px;

    line-height: 1.8;
}


/* =========================================
   CONTACT DETAILS
========================================= */

.contact-section .contact-details {
    display: flex;
    flex-direction: column;

    gap: 25px;
}

.contact-section .contact-item {
    display: flex;

    align-items: flex-start;

    gap: 16px;
}


.contact-section .contact-icon {
    flex: 0 0 44px;

    width: 44px;
    height: 44px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 12px;

    background: rgba(255, 255, 255, 0.08);

    color: var(--gold-bright);

    font-size: 18px;

    transition: all 0.3s ease;
}


.contact-section .contact-item:hover .contact-icon {
    background: var(--gold-bright);

    color: var(--surface);

    transform: translateY(-3px);
}


.contact-section .contact-text span {
    display: block;

    margin-bottom: 5px;

    color: rgba(255, 255, 255, 0.5);

    font-size: 11px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 1px;
}


.contact-section .contact-text p {
    margin: 0;

    color: rgba(255, 255, 255, 0.9);

    font-size: 14px;

    line-height: 1.6;
}


.contact-section .contact-text a {
    color: rgba(255, 255, 255, 0.9);

    text-decoration: none;

    transition: color 0.3s ease;
}


.contact-section .contact-text a:hover {
    color: var(--gold-bright);
}


/* =========================================
   SOCIAL AREA
========================================= */

.contact-section .social-area {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin-top: 45px;

    padding-top: 25px;

    border-top: 1px solid rgba(255, 255, 255, 0.1);
}


.contact-section .social-area > span {
    color: rgba(255, 255, 255, 0.5);

    font-size: 11px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 1px;
}


.contact-section .social-links {
    display: flex;

    gap: 9px;
}


.contact-section .social-links a {
    width: 36px;
    height: 36px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 10px;

    color: var(--surface);

    background: rgba(255, 255, 255, 0.08);

    text-decoration: none;

    transition: all 0.3s ease;
}


.contact-section .social-links a:hover {
    background: var(--gold-bright);

    color: var(--surface);

    transform: translateY(-3px);
}


/* =========================================
   RIGHT FORM
========================================= */

.contact-section .contact-form {
    padding: 50px 55px;

    background: var(--surface);
}


.contact-section .form-header {
    margin-bottom: 30px;
}


.contact-section .form-header > span {
    color: var(--gold);

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1.8px;
}


.contact-section .form-header h2 {
    margin: 8px 0 8px;

    color: var(--ink);

    font-size: 30px;

    font-weight: 750;

    letter-spacing: -1px;
}


.contact-section .form-header p {
    max-width: 550px;

    margin: 0;

    color: #74827d;

    font-size: 14px;

    line-height: 1.7;
}


/* =========================================
   FORM GRID
========================================= */

.contact-section .form-grid {
    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 12px;
}


.contact-section .form-group {
    display: flex;

    flex-direction: column;

    gap: 8px;
}


.contact-section .form-group.full-width {
    grid-column: 1 / -1;
}


.contact-section .form-group label {
    color: var(--ink-soft);

    font-size: 13px;

    font-weight: 650;
}


/* =========================================
   INPUT
========================================= */

.contact-section .input-wrapper {
    position: relative;
}


.contact-section .input-wrapper > i {
    position: absolute;

    left: 16px;

    top: 50%;

    transform: translateY(-50%);

    color: #8a9893;

    font-size: 16px;

    pointer-events: none;

    transition: color 0.3s ease;
}


.contact-section .input-wrapper input,
.contact-section .input-wrapper select,
.contact-section .input-wrapper textarea {
    width: 100%;

    border: 1px solid #dce6e2;

    background: #f8fbfa;

    color: var(--ink);

    border-radius: 12px;

    outline: none;

    font-family: inherit;

    font-size: 14px;

    transition: all 0.25s ease;
}


.contact-section .input-wrapper input,
.contact-section .input-wrapper select {
        height: 40px;
    padding: 0 9px 0 38px;
}


.contact-section .input-wrapper textarea {
    min-height: 110px;

    resize: vertical;

    padding: 15px 16px 15px 45px;
}


.contact-section .input-wrapper input::placeholder,
.contact-section .input-wrapper textarea::placeholder {
    color: #9ba8a4;
}


.contact-section .input-wrapper select {
    cursor: pointer;

    appearance: auto;
}


.contact-section .input-wrapper input:focus,
.contact-section .input-wrapper select:focus,
.contact-section .input-wrapper textarea:focus {
    border-color: var(--gold);

    background: var(--surface);

    box-shadow: 0 0 0 4px rgba(95, 13, 0, 0.07);
}


.contact-section .input-wrapper:focus-within > i {
    color: var(--gold);
}


/* =========================================
   TEXTAREA ICON
========================================= */

.contact-section .textarea-wrapper > i {
    top: 18px;

    transform: none;
}


/* =========================================
   SUBMIT BUTTON
========================================= */

.contact-section .submit-btn {
    width: 100%;

    min-height: 54px;

    margin-top: 28px;

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 10px;

    border: 0;

    border-radius: 12px;

    background: var(--gold-bright);

    color: var(--surface);

    font-family: inherit;

    font-size: 14px;

    font-weight: 700;

    cursor: pointer;

    transition:
        transform 0.25s ease,
        background 0.25s ease,
        box-shadow 0.25s ease;
}


.contact-section .submit-btn i {
    font-size: 17px;

    transition: transform 0.25s ease;
}


.contact-section .submit-btn:hover {
    background: var(--gold);

    transform: translateY(-2px);

    box-shadow:
        0 12px 25px rgba(255, 107, 53, 0.2);
}


.contact-section .submit-btn:hover i {
    transform: translate(3px, -3px);
}


.contact-section .submit-btn:active {
    transform: translateY(0);
}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 991px) {

    .contact-section .contact-section {
        padding: 70px 0;
    }

    .contact-section .contact-wrapper {
        grid-template-columns: 1fr;
    }

    .contact-section .contact-info {
        padding: 45px 35px;
    }

    .contact-section .contact-form {
        padding: 45px 35px;
    }

}


@media (max-width: 767px) {

    .contact-section .contact-section {
        padding: 55px 15px;
    }

    .contact-section .contact-header {
        margin-bottom: 35px;
    }

    .contact-section .contact-title {
        font-size: 38px;

        letter-spacing: -1.5px;
    }

    .contact-section .contact-description {
        font-size: 14px;
    }

    .contact-section .contact-info,
    .contact-section .contact-form {
        padding: 35px 25px;
    }

    .contact-section .info-content h2 {
        font-size: 28px;
    }

    .contact-section .form-header h2 {
        font-size: 27px;
    }

    .contact-section .form-grid {
        grid-template-columns: 1fr;
    }

    .contact-section .form-group.full-width {
        grid-column: auto;
    }

    .contact-section .social-area {
        align-items: flex-start;

        flex-direction: column;
    }

}


@media (max-width: 480px) {

    .contact-section .contact-title {
        font-size: 32px;
    }

    .contact-section .contact-wrapper {
        border-radius: 20px;
    }

    .contact-section .contact-info,
    .contact-section .contact-form {
        padding: 30px 20px;
    }

    .contact-section .contact-item {
        gap: 12px;
    }

    .contact-section .contact-icon {
        width: 40px;
        height: 40px;

        flex-basis: 40px;
    }

}

.postbtn a:hover{
    background: var(--gold);
    
}

.postbtn a{
    position: absolute;
    right: 10%;
    top: 18px;
    border: none;
    background: #ff6e42;
    padding: 8px 9px;
    font-size: 14px;
    /* text-decoration: underline; */
    font-weight: 600;
    color: #ffffff;
    border-radius: 8px;
    transition: all 0.25s ease;
}

.hero-v2-tabs{position: relative;}


  .blog-detail-wrapper{padding-top:124px!important;}
    


/* Category Tags */
.blog-detail-wrapper .badge-category {
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    padding: 0.3rem 0.7rem;
    background-color: #f1f5f9;
    color: #0f172a;
    border-radius: 4px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.blog-detail-wrapper .badge-category:hover {
    background-color: #0d6efd;
    color: #ffffff;
}

/* Typography & Headings */
.blog-detail-wrapper .blog-article-title {
    font-size: clamp(1.6rem, 3vw, 2.25rem);
    line-height: 1.25;
    letter-spacing: -0.02em;
}

/* Author Avatar Circle */
.blog-detail-wrapper .author-avatar {
    width: 36px;
    height: 36px;
    font-size: 0.875rem;
}

/* Meta Dots Separator */
.blog-detail-wrapper .dot-separator {
    width: 3px;
    height: 3px;
    background-color: #cbd5e1;
    border-radius: 50%;
    display: inline-block;
}

/* Article Body Formatting (Clean Editorial Look) */
.blog-detail-wrapper .blog-article-content {
    font-size: 1.05rem;
    line-height: 1.75;
    color: #334155;
}

.blog-detail-wrapper .blog-article-content p {
    margin-bottom: 1.5rem;
}

/* Back Button Link */
.blog-detail-wrapper .btn-back-link {
    transition: color 0.2s ease, transform 0.2s ease;
}

.blog-detail-wrapper .btn-back-link:hover {
    color: #0d6efd !important;
    transform: translateX(-3px);
}


     /* Card Core Structure */
.modern-blog-card {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    border-radius: 12px !important;
    min-height: 220px; /* Enforces equal baseline height */
}

.modern-blog-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08) !important;
}

/* Image Handling */
.card-img-wrapper {
    min-height: 180px;
}

.blog-card-img {
    transition: transform 0.35s ease;
}

.modern-blog-card:hover .blog-card-img {
    transform: scale(1.05);
}

/* Title & Description Formatting */
.blog-card-title {
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Limits title to 2 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.35;
}

.blog-card-title a {
    transition: color 0.2s ease;
}

.modern-blog-card:hover .blog-card-title a {
    color: var(--bs-primary) !important;
}

.blog-card-desc {
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Limits description to 2 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
}

/* Meta Footer Styling */
.author-avatar-sm {
    width: 26px;
    height: 26px;
    font-size: 0.75rem;
}

.dot-divider {
    width: 4px;
    height: 4px;
    background-color: currentColor;
    border-radius: 50%;
    opacity: 0.5;
}

.modern-blog-card:hover .read-more-icon {
    transform: translate(2px, -2px);
}

.transition-all {
    transition: transform 0.2s ease;
}
.sticky-sidebar {
    position: -webkit-sticky;
    position: sticky;
    top: 90px; /* Offset from top header */
    z-index: 10;
    margin-top:50px;
}





@media(max-width:767.98px){
        .developer-img-wrapper {
        width: 151px!1important;
        height: 155px!important;
    }
    
    .developer-section{background-position: left;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;}
    .developer-section{padding: 70px 0 0px!important;}
    .developer-section::before, .developer-section::after{display:none!important;}
     
            .property-detail-wrapper .gallery-main {
    height: 160px !important;
}
    
    .property-detail-wrapper .gallery-thumb {
    height: 75px !important;
    width: 100% !important;
}

    .property-price {
        font-size: 1.2rem !important;
        padding: 8px 0px;
    }

    
    
    
    
    .property-card-horizontal .content-header {    display: flex;
    justify-content: space-between;}
    .property-listing .property-content{gap:8px!important;}
    .property-listing .property-stats-grid .border-start{ border-top:0px!important;}
    .property-listing .property-stats-grid{         display: flex!important;
        align-items: baseline!important;
        gap: 17px!important;
        overflow-x: auto;
        white-space: nowrap!important;
        padding-bottom: 4px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;}
    
    
    .btn-primary {
    background: linear-gradient(135deg, #ff5d2c 0%, #ff5d2c 100%) !important;}
    
    .filter-body {
    padding: 20px 0px;}
    /* Hide Sidebar & convert to Right Slide-in Drawer */
    #property-sidebar {
        position: fixed;
        top: 0;
        right: -100%; /* Default hidden outside screen on the right */
        width: 320px;
        max-width: 85%;
        height: 100vh;
        background-color: #ffffff;
        z-index: 1050;
        box-shadow: -5px 0 25px rgba(0, 0, 0, 0.15);
        overflow-y: auto;
        transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        padding: 20px;
    }

    /* Active State: Slide into view from right */
    #property-sidebar.active {
        right: 0;
    }

    /* Dark Backdrop Overlay */
    .filter-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(2px);
        z-index: 1040;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    .filter-overlay.active {
        opacity: 1;
        visibility: visible;
    }

    /* Mobile Close Icon Button */
    .btn-close-filter {
        background: transparent;
        border: none;
        font-size: 1.25rem;
        color: #333;
        cursor: pointer;
        padding: 4px 8px;
        border-radius: 4px;
    }

    .btn-close-filter:hover {
        background-color: #f1f5f9;
    }


}



@media (min-width: 768px) {
    #property-sidebar {
        position: static!important;
        width: 100%;
        height: auto;
        box-shadow: none;
    }
    
    .filter-overlay {
        display: none !important;
    }
}