@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: #242626; /* Vibrant Emerald Mint */
    --gold-bright: #f5b14e; /* 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, #e48f12 0%, #dba14b 100%);
    background-size: 200% auto;
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    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: #f5b14e;

    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: #fff;
    color: #00384e!important;
    padding: 4px 10px;
    padding: 5px 20px;
    font-size: 14px;
    text-transform: capitalize;
    font-weight: 600;
    border-radius: 8px !important;


}



.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: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    /* backdrop-filter: blur(8px);  */
    /*background:#012d3e;*/
    background:#044b57;
    /*background:linear-gradient(360deg, #240188 13%, #2a0c7f 63%);*/

}


.site-header .container-xl {



    display: flex;



    align-items: center;



    justify-content: space-between;



    gap: 28px;



}



.site-header.is-scrolled {



    padding: 8px 0;



    background:#044b57;
    /*background: #450303;*/
    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: #fff;



}



.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: -65%;







    margin: 56px 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;
        height: 0px;
    gap: 20px;
    display: flex;



}







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



    content: "";



    position: relative;


    bottom: -3px;
    left: -36%;
    width: 55px;
    height: 54px;
    border-left: 26px solid transparent;
    border-right: 26px solid transparent;
    border-bottom: 41px solid #ffffff;






    z-index: 1060;



    opacity: 0;



    visibility: hidden;



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



    transition:
        opacity 0.1s ease-in-out,



        visibility 0.1s 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(149 89 0);
    color: #ffffff !important;
    border: 1px solid rgb(245 177 78);
    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;



}












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



   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: #044b57!important;



    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 {




    font-size: 14.5px;



    margin: 18px 0 26px;



}



.footer-social {



    display: flex;



    gap: 10px;



}



.footer-social a {
    width: 30px;
    height: 30px;
    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: #ffffff !important;
    /* margin-bottom: 22px; */
    border-bottom: 1px solid #fff;
    padding-bottom: 7px;
    display: inline-block;


}



.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)!important;
    margin-bottom: -5px;
    transition:0.4s;



}



.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;



    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 .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-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,



        #ff960a 0%,



        #ff960a 100%



    );



    -webkit-background-clip: text;



    -webkit-text-fill-color: transparent;



}







.pp-btn-link {

    color: #ffffff;
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
    transition: color var(--dur) var(--ease);
    background: #044b57;
    padding: 2px 6px;
    border-radius: 20px;



}







.pp-btn-link:hover {

    background:#f5b14e;

    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: 200px; /* 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%;



    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 {

    line-height:normal;

    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: #044b57;



    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: #044b57;



    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: #bf9a67;



}







.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: #dba14b;



    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-weight:700;

    font-size: 13px;



    color: #334155;



    



}







.pp-location-text {



    font-size: 13px;



    color: #64748b;
    font-weight:600;



}







.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-social, .brand {justify-content:center!important;}
    .sidebar{box-shadow: none!important;}

    .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) {
    
    .compare-bar .d-flex.justify-content-between{justify-content:center!important;}
    .inner-hero nav {text-align:center!important;}



   .btn-mbileview{background: #f5b14e;

    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: #044b57;}



.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!important;

    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: #f2f2f2;
    color: #044b57;
    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: #f5b165;
}

/* 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: #044b57;
    text-decoration: none;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.2);
}

.btn-contact-modern:hover {
    background: #f5b165;
    color: #000;
}

/* 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: #044b57;
}

.privacy-policy-content ol li::marker {
    color: #044b57;
}

.privacy-policy-content a {
    color: #044b57;
    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: 2%;
    top: 18px;
    border: none;
    background: #044b57;
    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: #044b57 !important;
}


.sticky-sidebar .input-group input{border-radius: 20px 0px 0px 20px !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){
    .featured-properties-v2 .fp-specs{display: flex;
    align-items: center;
    gap: 14px;
    padding: 11px 7px;
    background: var(--paper);
    border-radius: var(--radius-m);
    margin-top: auto;
    margin-bottom: 20px;
    overflow: hidden;
    white-space: nowrap;}
    
    .find-home .findbetter-text{  text-align: justify;
        text-justify: inter-word;
        hyphens: auto;
        
                font-size: 15px;
        text-align-last: left;
        line-height: 29px;}
   
    
     #open-filter-btn{        margin: 0 auto;
        display: flex;}
        .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: 120px 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;         align-items: baseline;}
    .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;}
    
    
    .compare-bar .btn-primary{    background: #ff5d2c !important;
    color: white !important;
    border: none;
    border-radius: 20px !important;}
    
    .btn-primary {
    background: linear-gradient(135deg, #f5b14e 0%, #f5b14e 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;
    }
}





.premium-compare .compare-table tr td{    border-right: 1px solid #c2c2c2!important;}
.premium-compare .compare-table tr th{   border-right: 1px solid #c2c2c2!important;}


.premium-compare {
  
  color: #0f172a;
}

/* Header */
.category-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #eff6ff;
  color: #2563eb;
  border: 1px solid #bfdbfe;
  padding: 4px 12px;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.compare-title {
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  margin: 0;
  color: #0f172a;
}

/* Main Table Container */
.compare-card {
  background: var(--pc-card-bg);
  border-radius: 16px;
  border: 1px solid #c2c2c2;
  overflow: hidden;
}

.compare-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

/* Header Cells */
.feature-head {
  background: #ffffff;
  padding: 20px 20px;
  border-bottom: 2px solid #c2c2c2;
  border-right: 1px solid #c2c2c2;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748b;
  width: 180px;
  min-width: 150px;
}

@media (min-width: 768px) {
  .feature-head, .feature-label {
          position: sticky;
        left: 0;
        z-index: 10;
        background-color: #f3f3f3;
  }
}

.property-head {
  padding: 20px;
  min-width: 255px;
  max-width: 320px;
  border-bottom: 2px solid #c2c2c2;
  vertical-align: top;
}

/* Property Header Card */
.property-header-box {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.property-img-box {
  position: relative;
  width: 100%;
  height: 160px;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 16px;
  background-color: #f1f5f9;
}

.property-img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.property-header-box:hover .property-img-box img {
  transform: scale(1.05);
}

.btn-remove-icon {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(4px);
  border: none;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-remove-icon:hover {
  background: #ef4444;
  transform: scale(1.1);
}

.property-name {
  font-size: 1rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 14px;
  line-height: 1.3;
}

/* Rows & Data Styling */
.compare-row {
  transition: background-color 0.15s ease;
}

.compare-row:hover {
  background-color: #f1f5f9;
}

.compare-row:hover .feature-label {
  background-color: #f8fafc;
}

.feature-label {
font-size: 14px;
    padding-left: 20px;
    font-weight: 600;
    color: #044b57;
    border-bottom: 1px solid #c2c2c2;
    border-right: 1px solid #c2c2c2;
    background: #f3f3f3;
}

.property-data {
    padding: 8px 11px;
    font-size: 13px;
    color: #000000;
  border-bottom: 1px solid #c2c2c2;
  vertical-align: middle;
}

/* Values & Badges */
.price-tag {
    font-size: 1.1rem;
    font-weight: 700;
    color: #4a4a4a;
}

.price-tag small {
  font-size: 0.8rem;
  font-weight: 600;
  color: #64748b;
}

.highlight-value {
  font-weight: 700;
  color: #0f172a;
}

.text-value {
  font-weight: 500;
  color: #334155;
}

.address-truncate {
  display: block;
  margin: 0 auto;
  max-width: 220px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #64748b;
}

.chip-pill {
     display: inline-block;
    background: #efefef;
    border: 1px solid #cbd5e1;
    color: #334155;
    padding: 2px 7px;
    border-radius: 6px;
    font-size: 0.825rem;
    font-weight: 500;
}

.chip-pill.count {
  background: #334155;
  color: #ffffff;
  border: none;
}

.amenities-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-transform: capitalize;
    letter-spacing: 0.05em;
    padding: 2px 10px;
    border-radius: 9999px;
    font-size: 12px;
    
  font-weight: 500;
}

.status-badge.success {
  background: #dcfce7;
  color: #15803d;
}

.status-badge.info {
  background: #e0f2fe;
  color: #0369a1;
}

.rera-code {
  font-family: monospace;
  background: #f1f5f9;
  padding: 3px 6px;
  border-radius: 4px;
  font-size: 0.8rem;
  color: #475569;
}

/* Buttons */
.btn-primary-custom {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  background: #f5b14e;
  color: #ffffff;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
}

.btn-primary-custom:hover {
    background: #044b57;
    color: #ffffff;
    box-shadow: 0 4px 12px rgb(103 10 7 / 42%);
}

.btn-secondary-custom {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #ffffff;
  border: 1px solid #c2c2c2;
  color: #334155;
  padding: 8px 16px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.875rem;
  text-decoration: none;
  transition: all 0.2s ease;
}

.btn-secondary-custom:hover {
  background: #f8fafc;
  color: #0f172a;
}

.btn-danger-custom {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #dc2626;
  padding: 8px 16px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-danger-custom:hover {
  background: #fee2e2;
}

.btn-remove-line {
  background: transparent;
  border: none;
  color: #ef4444;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.btn-remove-line:hover {
  opacity: 0.8;
}


.compare-bar .d-flex.justify-content-between{ flex-wrap: wrap;
    gap: 20px;}






/* testimonial*/




.testimonial-card {



    background: #f2f2f2;



    border-radius: 20px;



    padding: 15px 20px;



    border: 1px solid #f2f2f2;



    height: 100%;



}



.testimonial-quote {
    font-family: var(--font-display);
    font-size: 15px;
    line-height: 25px;
    color: var(--ink);
    margin-bottom: 18px;}



.testimonial-person {

    justify-content:space-between;

    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 {
    display: flex;
    gap: 4px;
    justify-content: center;
}

.stars .bi-star-fill {
  color: #ffc107;
  font-size: 0.8rem;
}

.stars .bi-star-half {
  color: #ffc107;
  font-size: 0.8rem;
}



.btn-luxury{background:#fc5d34!important;}






    .btn-mbileview {
        background: #f5b14e;
        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:#044b57!important;}



 .top-projectitem-mobile{display:none;}
    
    @media(max-width:767px){
        .top-projectitem {display:none;}
        .top-projectitem-mobile{display:block; margin-top: 25px;}
    }




/* blog new css*/


    .blog-sec {
    background: #fbfaf7;
    color: #292929;
}





/* ==========================================================
   ACTIVE FILTER
========================================================== */

.active-filter-box {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 13px 16px;

    background: #fff8ed;

    border: 1px solid rgba(245, 177, 78, 0.45);

    border-radius: 10px;
}

.filter-info {
    display: flex;
    align-items: center;
    gap: 11px;

    color: #044b57;

    font-size: 13px;
}

.filter-info > i {
    width: 32px;
    height: 32px;

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

    border-radius: 8px;

    background: #f5b14e;

    color: #044b57;
}

.filter-info span {
    display: block;

    color: #777;

    font-size: 11px;
}

.filter-info strong {
    font-size: 14px;
}

.clear-filter {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    color: #044b57;

    font-size: 12px;
    font-weight: 700;

    text-decoration: none;
}

.clear-filter:hover {
    color: #f5b14e;
}


/* ==========================================================
   BLOG LIST
========================================================== */

.premium-blog-list {
    display: flex;
    flex-direction: column;

    gap: 24px;
}


/* ==========================================================
   BLOG CARD
========================================================== */

.blog-list-card {
    display: grid;
    grid-template-columns: 36% 64%;

    min-height: 245px;

    overflow: hidden;

    background: #ffffff;

    border: 1px solid rgba(109, 4, 4, 0.08);

    border-radius: 18px;

    box-shadow:
        0 8px 30px rgba(44, 18, 18, 0.055);

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}

.blog-list-card:hover {
    transform: translateY(-6px);

    border-color: rgba(245, 177, 78, 0.55);

    box-shadow:
        0 18px 45px rgba(109, 4, 4, 0.12);
}


/* ==========================================================
   IMAGE
========================================================== */

.blog-list-image {
    position: relative;

    min-height: 245px;

    overflow: hidden;

    background: #eee;
}

.blog-list-image a {
    display: block;

    width: 100%;
    height: 100%;
}

.blog-list-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform 0.65s cubic-bezier(.2,.7,.2,1);
}

.blog-list-card:hover .blog-list-image img {
    transform: scale(1.08);
}


/* Image overlay */

.blog-list-image::after {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
       linear-gradient(180deg, rgba(109, 4, 4, 0) 40%, rgb(4 75 87 / 65%) 100%);
}


/* ==========================================================
   CATEGORY BADGE
========================================================== */

.blog-list-category {
    position: absolute;

    z-index: 2;

    top: 15px;
    left: 15px;

    display: inline-flex;
    align-items: center;
    gap: 6px;

    padding: 7px 11px;

    border-radius: 50px;

    background: #f5b14e;

    color: #044b57;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: .5px;

    box-shadow:
        0 5px 15px rgba(0, 0, 0, 0.12);
}


/* ==========================================================
   IMAGE PLACEHOLDER
========================================================== */

.blog-list-placeholder {
    width: 100%;
    height: 100%;

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

    background:
        linear-gradient(
            135deg,
            #044b57,
            #450202
        );

    color: #f5b14e;

    font-size: 42px;
}


/* ==========================================================
   CONTENT
========================================================== */

.blog-list-content {
    display: flex;
    flex-direction: column;

    padding: 25px 27px 21px;
}


/* ==========================================================
   META
========================================================== */

.blog-list-meta {
    display: flex;
    align-items: center;
    gap: 9px;

    color: #8a8a8a;

    font-size: 10px;
    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: .5px;
}

.blog-list-meta i {
    margin-right: 4px;

    color: #f5b14e;
}

.meta-dot {
    width: 4px;
    height: 4px;

    border-radius: 50%;

    background: #f5b14e;
}


/* ==========================================================
   TITLE
========================================================== */

.blog-list-title {
    margin: 12px 0 9px;

    font-size: 21px;
    line-height: 1.35;

    font-weight: 800;

    letter-spacing: -.3px;
}

.blog-list-title a {
    color: #292929;

    text-decoration: none;

    transition: color .25s ease;
}

.blog-list-title a:hover {
    color: #044b57;
}


/* ==========================================================
   DESCRIPTION
========================================================== */

.blog-list-description {
    margin: 0;

    color: #747474;

    font-size: 13px;

    line-height: 1.75;
}


/* ==========================================================
   FOOTER
========================================================== */

.blog-list-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-top: auto;
    padding-top: 17px;

    border-top: 1px solid #eeeeee;
}


/* ==========================================================
   AUTHOR
========================================================== */

.blog-author {
    display: flex;
    align-items: center;

    gap: 8px;

    min-width: 0;
}

.author-avatar {
    width: 32px;
    height: 32px;

    flex-shrink: 0;

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

    border-radius: 50%;

    background: #fff3df;

    color: #044b57;

    font-size: 11px;
    font-weight: 800;

    border: 1px solid rgba(245, 177, 78, .45);
}

.author-name {
    max-width: 100px;

    overflow: hidden;

    color: #555;

    font-size: 11px;
    font-weight: 700;

    text-overflow: ellipsis;
    white-space: nowrap;
}


/* ==========================================================
   READ ARTICLE
========================================================== */

.blog-read-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    color: #044b57;

    font-size: 11px;
    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: .6px;

    text-decoration: none;

    white-space: nowrap;
}

.blog-read-link span {
    width: 29px;
    height: 29px;

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

    border-radius: 50%;

    background: #fff3df;

    transition: all .3s ease;
}

.blog-read-link:hover {
    color: #044b57;
}

.blog-read-link:hover span {
    background: #f5b14e;

    transform: rotate(45deg);
}


/* ==========================================================
   SIDEBAR
========================================================== */

.blog-sidebar {
    position: sticky;

    top: 30px;
}


/* ==========================================================
   SEARCH CARD
========================================================== */

.sidebar-search-card,
.sidebar-category-card {
    padding: 24px;

    background: #ffffff;

    border: 1px solid rgba(109, 4, 4, .08);

    border-radius: 18px;

    box-shadow:
        0 10px 35px rgba(44, 18, 18, .055);
}


/* ==========================================================
   SIDEBAR HEADING
========================================================== */

.sidebar-heading {
    display: flex;
    align-items: center;

    gap: 12px;

    padding-bottom: 18px;

    margin-bottom: 18px;

    border-bottom: 1px solid #eeeeee;
}

.sidebar-heading-icon {
    width: 42px;
    height: 42px;

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

    flex-shrink: 0;

    border-radius: 11px;

    background: #fff3df;

    color: #044b57;

    font-size: 17px;
}

.sidebar-heading span {
    display: block;

    color: #f5b14e;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1.8px;
}

.sidebar-heading h3 {
    margin: 2px 0 0;

    color: #044b57;

    font-size: 20px;

    font-weight: 800;
}


/* ==========================================================
   SEARCH
========================================================== */

.premium-search-form {
    display: flex;
    flex-direction: column;

    gap: 10px;
}

.premium-search-input {
    position: relative;
}

.premium-search-input i {
    position: absolute;

    left: 14px;
    top: 50%;

    transform: translateY(-50%);

    color: #044b57;

    font-size: 14px;
}

.premium-search-input input {
    width: 100%;

    height: 47px;

    padding: 0 14px 0 40px;

    border: 1px solid #e8e8e8;

    border-radius: 9px;

    outline: none;

    background: #fafafa;

    color: #333;

    font-size: 13px;

    transition: all .25s ease;
}

.premium-search-input input:focus {
    background: #ffffff;

    border-color: #f5b14e;

    box-shadow:
        0 0 0 3px rgba(245,177,78,.12);
}

.premium-search-form button {
    height: 44px;

    border: 0;

    border-radius: 8px;

    background: #044b57;

    color: #ffffff;

    font-size: 12px;

    font-weight: 800;

    transition: all .3s ease;
}

.premium-search-form button:hover {
    background: #f5b14e;

    color: #044b57;

    transform: translateY(-2px);
}


/* ==========================================================
   CATEGORY CARD
========================================================== */

.sidebar-category-card {
    margin-top: 24px;
}

.premium-category-list {
    display: flex;
    flex-direction: column;
}

.premium-category-item {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 12px 4px;

    color: #555;

    text-decoration: none;

    border-bottom: 1px solid #f0f0f0;

    transition: all .25s ease;
}

.premium-category-item:last-child {
    border-bottom: 0;
}

.category-item-left {
    display: flex;
    align-items: center;

    gap: 10px;

    font-size: 13px;

    font-weight: 600;
}

.category-item-icon {
    width: 32px;
    height: 32px;

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

    border-radius: 8px;

    background: #faf3e8;

    color: #044b57;

    transition: all .25s ease;
}

.category-item-count {
    min-width: 27px;
    height: 27px;

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

    padding: 0 7px;

    border-radius: 50px;

    background: #f5f5f5;

    color: #777;

    font-size: 10px;

    font-weight: 800;

    transition: all .25s ease;
}


/* Hover */

.premium-category-item:hover {
    padding-left: 9px;

    color: #044b57;
}

.premium-category-item:hover .category-item-icon {
    background: #044b57;

    color: #f5b14e;
}

.premium-category-item:hover .category-item-count {
    background: #f5b14e;

    color: #044b57;
}


/* Active */

.premium-category-item.active {
    padding: 11px 10px;

    border-radius: 9px;

    background:
        linear-gradient(
            90deg,
            #fff3df,
            #ffffff
        );

    color: #044b57;
}

.premium-category-item.active .category-item-icon {
    background: #044b57;

    color: #f5b14e;
}

.premium-category-item.active .category-item-count {
    background: #f5b14e;

    color: #044b57;
}


/* ==========================================================
   PROPERTY CTA
========================================================== */

.blog-property-cta {
    position: relative;

    overflow: hidden;

    margin-top: 24px;

    padding: 30px 26px;

    border-radius: 18px;

    background:
        linear-gradient(145deg, #044b57 0%, #f5b14e 100%);

    color: #ffffff;

    box-shadow:
        0 15px 40px rgba(109, 4, 4, .2);
}

.cta-circle-one,
.cta-circle-two {
    position: absolute;

    border-radius: 50%;

    border: 1px solid rgba(245,177,78,.18);
}

.cta-circle-one {
    width: 160px;
    height: 160px;

    right: -80px;
    top: -80px;
}

.cta-circle-two {
    width: 110px;
    height: 110px;

    right: -55px;
    top: -55px;
}

.property-cta-icon {
    width: 48px;
    height: 48px;

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

    margin-bottom: 17px;

    border-radius: 13px;

    background: rgba(245,177,78,.14);

    color: #f5b14e;

    font-size: 21px;
}

.property-cta-label {
    color: #f5b14e;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 2px;
}

.blog-property-cta h3 {
    margin: 8px 0 12px;

    max-width: 270px;

    color: #ffffff;

    font-size: 24px;

    line-height: 1.3;

    font-weight: 800;
}

.blog-property-cta h3 span {
    color: #f5b14e;
}

.blog-property-cta p {
    margin-bottom: 22px;

    color: rgba(255,255,255,.72);

    font-size: 13px;

    line-height: 1.7;
}

.blog-property-cta > a {
    display: inline-flex;
    align-items: center;

    gap: 8px;

    padding: 11px 17px;

    border-radius: 8px;

    background: #f5b14e;

    color: #000;

    font-size: 11px;

    font-weight: 800;

    text-decoration: none;

    transition: all .3s ease;
}

.blog-property-cta > a:hover {
    background: #044b57;

    color: #fff;

    transform: translateY(-2px);
}


/* ==========================================================
   EMPTY STATE
========================================================== */

.blog-empty-state {
    padding: 70px 30px;

    text-align: center;

    background: #ffffff;

    border: 1px solid #eeeeee;

    border-radius: 18px;
}

.empty-blog-icon {
    width: 75px;
    height: 75px;

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

    margin: 0 auto 18px;

    border-radius: 50%;

    background: #fff3df;

    color: #044b57;

    font-size: 30px;
}

.blog-empty-state h3 {
    margin-bottom: 8px;

    color: #044b57;

    font-size: 23px;

    font-weight: 800;
}

.blog-empty-state p {
    max-width: 450px;

    margin: 0 auto 22px;

    color: #777;

    font-size: 13px;

    line-height: 1.7;
}

.empty-blog-btn {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 11px 18px;

    border-radius: 8px;

    background: #044b57;

    color: #ffffff;

    font-size: 12px;

    font-weight: 700;

    text-decoration: none;

    transition: all .3s ease;
}

.empty-blog-btn:hover {
    background: #f5b14e;

    color: #044b57;
}


/* ==========================================================
   PAGINATION
========================================================== */

.blog-pagination nav {
    display: flex;

    justify-content: center;
}

.blog-pagination .pagination {
    gap: 6px;
}

.blog-pagination .page-link {
    min-width: 38px;

    height: 38px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid #eeeeee;

    border-radius: 8px !important;

    color: #044b57;

    font-size: 12px;

    font-weight: 700;
}

.blog-pagination .page-link:hover {
    background: #fff3df;

    color: #044b57;
}



.blog-pagination .active .page-link {
    background: #044b57;

    border-color: #044b57;

    color: #f5b14e;
}


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

@media (max-width: 991px) {

    .blog-sidebar {
        margin-top:20px;
        position: static;
    }

}


@media (max-width: 767px) {

    .blog-sec {
        padding-top: 35px !important;
    }

    .blog-main-title {
        font-size: 32px;
    }

    .blog-main-subtitle {
        font-size: 14px;
    }

    .blog-list-card {
        grid-template-columns: 1fr;
    }

    .blog-list-image {
        min-height: 220px;

        height: 220px;
    }

    .blog-list-content {
        padding: 21px;
    }

    .blog-list-title {
        font-size: 19px;
    }

}


@media (max-width: 480px) {

    .blog-main-title {
        font-size: 28px;
    }

    .blog-list-image {
        height: 200px;

        min-height: 200px;
    }

    .blog-list-footer {
        gap: 10px;
    }

    .author-name {
        max-width: 80px;
    }

    .blog-read-link {
        font-size: 10px;
    }

    .sidebar-search-card,
    .sidebar-category-card {
        padding: 20px;
    }

    .active-filter-box {
        align-items: flex-start;
    }

}


/* category css blog  */




.category-post {
    background: #fbfaf7;
    color: #242424;
}



/* =========================
   BLOG GRID
========================= */

.category-blog-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
}


/* =========================
   PREMIUM BLOG CARD
========================= */

.premium-blog-card {
    position: relative;

    background: #ffffff;

    border: 1px solid rgba(109, 4, 4, 0.08);
    border-radius: 18px;

    overflow: hidden;

    box-shadow:
        0 8px 30px rgba(47, 20, 20, 0.06);

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}

.premium-blog-card:hover {
    transform: translateY(-8px);

    border-color: rgba(245, 177, 78, 0.55);

    box-shadow:
        0 20px 50px rgba(109, 4, 4, 0.13);
}


/* =========================
   IMAGE
========================= */

.premium-blog-image {
    position: relative;

    height: 235px;

    overflow: hidden;

    background: #eee;
}

.premium-blog-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;

    transition:
        transform 0.7s cubic-bezier(.2,.7,.2,1);
}

.premium-blog-card:hover .premium-blog-image img {
    transform: scale(1.08);
}


/* Image Overlay */

.blog-image-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(180deg, rgba(109, 4, 4, 0.02) 35%, rgb(4 75 87 / 58%) 100%);

    pointer-events: none;
}


/* =========================
   CATEGORY BADGE
========================= */

.blog-category-badge {
    position: absolute;

    top: 16px;
    left: 16px;

    z-index: 2;

    display: inline-flex;
    align-items: center;
    gap: 6px;

    padding: 7px 12px;

    border-radius: 50px;

    background: #f5b14e;
    color: #222;

    font-size: 11px;
    font-weight: 500;

    letter-spacing: 0.4px;

    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}

.blog-category-badge i {
    font-size: 10px;
}


/* =========================
   PLACEHOLDER IMAGE
========================= */

.blog-placeholder {
    width: 100%;
    height: 100%;

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

    background:
        linear-gradient(
            135deg,
            #044b57,
            #8c1717
        );

    color: #f5b14e;

    font-size: 42px;
}


/* =========================
   CARD CONTENT
========================= */

.premium-blog-content {
    padding: 23px 23px 21px;
}


/* =========================
   META
========================= */

.blog-meta {
    display: flex;
    align-items: center;
    gap: 9px;

    color: #8a8a8a;

    font-size: 11px;
    font-weight: 600;

    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.blog-meta i {
    color: #f5b14e;
    margin-right: 4px;
}

.meta-divider {
    width: 3px;
    height: 3px;

    border-radius: 50%;

    background: #f5b14e;
}


/* =========================
   TITLE
========================= */

.premium-blog-title {
    margin: 13px 0 10px;

    font-size: 20px;
    line-height: 1.35;
    font-weight: 750;
}

.premium-blog-title a {
    color: #272727;

    text-decoration: none;

    transition: color 0.25s ease;
}

.premium-blog-title a:hover {
    color: #044b57;
}


/* =========================
   DESCRIPTION
========================= */

.premium-blog-description {
    margin: 0;

    color: #747474;

    font-size: 13.5px;
    line-height: 1.75;
}


/* =========================
   CARD FOOTER
========================= */

.blog-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-top: 20px;

    padding-top: 16px;

    border-top: 1px solid #eeeeee;
}

.premium-read-more {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    color: #044b57;

    font-size: 12px;
    font-weight: 800;

    text-transform: uppercase;
    letter-spacing: 0.6px;

    text-decoration: none;
}

.premium-read-more span {
    width: 28px;
    height: 28px;

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

    border-radius: 50%;

    background: #fff4e2;
    color: #044b57;

    transition: all 0.3s ease;
}

.premium-read-more:hover {
    color: #044b57;
}

.premium-read-more:hover span {
    background: #f5b14e;
    transform: rotate(45deg);
}


/* =========================
   SIDEBAR
========================= */

.premium-sidebar {
    position: sticky;
    top: 30px;
}


/* =========================
   SIDEBAR CARD
========================= */

.sidebar-card {
    background: #ffffff;

    border: 1px solid rgba(109, 4, 4, 0.08);
    border-radius: 18px;

    padding: 25px;

    box-shadow:
        0 10px 35px rgba(47, 20, 20, 0.06);
}


/* Sidebar Heading */

.sidebar-title {
    display: flex;
    align-items: center;
    gap: 13px;

    padding-bottom: 20px;

    border-bottom: 1px solid #eeeeee;
}

.sidebar-title-icon {
    width: 43px;
    height: 43px;

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

    border-radius: 12px;

    background: #fff3df;
    color: #044b57;

    font-size: 18px;
}

.sidebar-title span {
    display: block;

    color: #f5b14e;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 1.8px;
}

.sidebar-title h3 {
    margin: 2px 0 0;

    color: #044b57;

    font-size: 21px;
    font-weight: 800;
}


/* =========================
   CATEGORY LIST
========================= */

.sidebar-category-list {
    margin-top: 8px;
}

.sidebar-category-item {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 14px 4px;

    color: #555;

    text-decoration: none;

    border-bottom: 1px solid #f1f1f1;

    transition: all 0.25s ease;
}

.sidebar-category-item:last-child {
    border-bottom: 0;
}

.category-name {
    display: flex;
    align-items: center;
    gap: 11px;

    font-size: 14px;
    font-weight: 600;
}

.category-icon {
    width: 32px;
    height: 32px;

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

    border-radius: 8px;

    background: #faf3e8;

    color: #044b57;

    transition: all 0.25s ease;
}

.category-count {
    min-width: 27px;
    height: 27px;

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

    padding: 0 7px;

    border-radius: 50px;

    background: #f5f5f5;

    color: #777;

    font-size: 11px;
    font-weight: 700;

    transition: all 0.25s ease;
}


/* Hover */

.sidebar-category-item:hover {
    padding-left: 8px;

    color: #044b57;
}

.sidebar-category-item:hover .category-icon {
    background: #044b57;
    color: #f5b14e;
}

.sidebar-category-item:hover .category-count {
    background: #f5b14e;
    color: #044b57;
}


/* Active */

.sidebar-category-item.active {
    padding: 13px 12px;

    border-radius: 10px;

    background:
        linear-gradient(
            90deg,
            #fff4e2,
            #ffffff
        );

    color: #044b57;
}

.sidebar-category-item.active .category-icon {
    background: #044b57;
    color: #f5b14e;
}

.sidebar-category-item.active .category-count {
    background: #f5b14e;
    color: #044b57;
}


/* =========================
   CTA SIDEBAR
========================= */

.sidebar-cta {
    position: relative;

    overflow: hidden;

    margin-top: 25px;

    padding: 30px 26px;

    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            #044b57 0%,
            #450202 100%
        );

    color: #ffffff;

    box-shadow:
        0 15px 40px rgba(109, 4, 4, 0.22);
}

.cta-decoration {
    position: absolute;

    width: 150px;
    height: 150px;

    right: -65px;
    top: -65px;

    border: 1px solid rgba(245, 177, 78, 0.25);

    border-radius: 50%;
}

.cta-decoration::after {
    content: "";

    position: absolute;

    inset: 18px;

    border: 1px solid rgba(245, 177, 78, 0.15);

    border-radius: 50%;
}

.cta-icon {
    width: 48px;
    height: 48px;

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

    margin-bottom: 18px;

    border-radius: 13px;

    background: rgba(245, 177, 78, 0.15);

    color: #f5b14e;

    font-size: 21px;
}

.cta-small-title {
    color: #f5b14e;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 2px;
}

.sidebar-cta h3 {
    position: relative;

    margin: 8px 0 12px;

    max-width: 250px;

    color: #ffffff;

    font-size: 25px;
    line-height: 1.25;
    font-weight: 800;
}

.sidebar-cta h3 strong {
    color: #f5b14e;
}

.sidebar-cta p {
    color: rgba(255,255,255,0.72);

    font-size: 13px;
    line-height: 1.7;

    margin-bottom: 22px;
}

.cta-button {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    padding: 11px 17px;

    border-radius: 8px;

    background: #f5b14e;
    color: #044b57;

    font-size: 12px;
    font-weight: 800;

    text-decoration: none;

    transition: all 0.3s ease;
}

.cta-button:hover {
    background: #ffffff;
    color: #044b57;

    transform: translateY(-2px);
}


/* =========================
   EMPTY STATE
========================= */

.no-blog-result {
    grid-column: 1 / -1;

    padding: 70px 30px;

    text-align: center;

    background: #ffffff;

    border: 1px solid #eeeeee;
    border-radius: 18px;
}

.no-blog-icon {
    width: 75px;
    height: 75px;

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

    margin: 0 auto 18px;

    border-radius: 50%;

    background: #fff3df;
    color: #044b57;

    font-size: 30px;
}

.no-blog-result h3 {
    color: #044b57;

    font-size: 24px;
    font-weight: 800;
}

.no-blog-result p {
    color: #777;

    font-size: 14px;

    margin-bottom: 22px;
}

.premium-gold-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 12px 20px;

    border-radius: 8px;

    background: #044b57;
    color: #ffffff;

    font-size: 13px;
    font-weight: 700;

    text-decoration: none;

    transition: all 0.3s ease;
}

.premium-gold-btn:hover {
    background: #f5b14e;
    color: #044b57;
}


/* =========================
   PAGINATION
========================= */

.premium-pagination nav {
    display: flex;
    justify-content: center;
}

.premium-pagination .pagination {
    gap: 6px;
}

.premium-pagination .page-link {
    min-width: 38px;
    height: 38px;

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

    border-radius: 8px !important;

    border: 1px solid #eeeeee;

    color: #044b57;

    font-size: 13px;
    font-weight: 600;
}

.premium-pagination .page-link:hover {
    background: #fff3df;
    color: #044b57;
}

.premium-pagination .active .page-link {
    background: #044b57;
    border-color: #044b57;

    color: #f5b14e;
}


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

@media (max-width: 991px) {

    .premium-sidebar {
        position: static;
    }

    .category-blog-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}


@media (max-width: 767px) {

    .category-post {
        padding-top: 35px !important;
    }

    .category-heading-wrap h1 {
        font-size: 32px;
    }

    .category-blog-grid {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .premium-blog-image {
        height: 220px;
    }

    .premium-blog-content {
        padding: 20px;
    }

    .sidebar-card {
        padding: 20px;
    }

}


@media (max-width: 480px) {

    .category-heading-wrap h1 {
        font-size: 28px;
    }

    .premium-blog-image {
        height: 200px;
    }

    .premium-blog-title {
        font-size: 18px;
    }

    .premium-breadcrumb .breadcrumb {
        font-size: 11px;
        padding: 8px 13px;
    }


}



/* single post blog */



    /* ==========================================================
   BRICKAFFAIRS
   PREMIUM BLOG DETAIL PAGE

   Primary : #044b57
   Gold    : #f5b14e
========================================================== */

.blog-detail-page {
    
padding-top:11%;
        padding-bottom: 30px;
    background: #fbfaf7;
    color: #292929;
}


/* ==========================================================
   BREADCRUMB
========================================================== */

.blog-detail-breadcrumb {
    max-width: 900px;

    margin-left: auto;
    margin-right: auto;

    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 8px;

    font-size: 12px;
}

.blog-detail-breadcrumb a {
    color: #044b57;

    text-decoration: none;

    font-weight: 600;

    transition: color .25s ease;
}

.blog-detail-breadcrumb a:hover {
    color: #f5b14e;
}

.blog-detail-breadcrumb span {
    color: #c5c5c5;

    font-size: 10px;
}

.blog-detail-breadcrumb strong {
    color: #888;

    font-weight: 500;
}

.blog-detail-breadcrumb i {
    margin-right: 3px;
}


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

.blog-detail-header {
    text-align: center;

    max-width: 900px;

    margin: 0 auto 35px;
}


/* ==========================================================
   CATEGORIES
========================================================== */

.detail-category-list {
    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 7px;

    margin-bottom: 17px;
}

.detail-category {
    display: inline-flex;

    align-items: center;

    gap: 6px;

    padding: 7px 12px;

    border-radius: 50px;

    background: #fff1d9;

    color: #044b57;

    border: 1px solid rgba(245,177,78,.45);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: .5px;

    text-transform: uppercase;

    text-decoration: none;

    transition: all .25s ease;
}

.detail-category:hover {
    background: #f5b14e;

    color: #044b57;
}

.detail-category i {
    font-size: 9px;
}


/* ==========================================================
   TITLE
========================================================== */

.blog-detail-title {
    max-width: 900px;

    margin: 0 auto;

    color: #292929;

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

    line-height: 1.12;

    font-weight: 700;

    letter-spacing: 0.8px;
}


/* ==========================================================
   EXCERPT
========================================================== */

.blog-detail-excerpt {
    max-width: 720px;

    margin: 18px auto 0;

    color: #777;

    font-size: 16px;

    line-height: 1.8;
}


/* ==========================================================
   META
========================================================== */

.blog-detail-meta {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    margin-top: 28px;

    padding: 17px 0;

    border-top: 1px solid #e9e9e9;

    border-bottom: 1px solid #e9e9e9;
}


/* Author */

.detail-author {
    display: flex;

    align-items: center;

    gap: 10px;

    text-align: left;
}

.detail-author-avatar {
        text-align: center;
    align-items: center;
    display: flex;
    font-size: 26px;
    font-weight: 500;
    color: #044b57;
    width: 42px;

    height: 42px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #fff1d9;


    border: 1px solid rgba(245,177,78,.5);

}

.detail-author strong {
    display: block;

    color: #333;

    font-size: 13px;

    line-height: 1.3;
}




/* Meta information */

.detail-meta-info {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    justify-content: flex-end;

    gap: 10px;

    color: #777;

    font-size: 11px;

    font-weight: 600;
}

.detail-meta-info i {
    color: #f5b14e;

    margin-right: 4px;
}

.detail-meta-dot {
    width: 4px;

    height: 4px;

    border-radius: 50%;

    background: #f5b14e;
}


/* ==========================================================
   FEATURED IMAGE
========================================================== */

.blog-detail-featured {
    position: relative;

    overflow: hidden;

    margin-bottom: 45px;

    border-radius: 20px;

    background: #eee;

    box-shadow:
        0 20px 55px rgba(44,18,18,.12);
}

.blog-detail-featured img {
    width: 100%;

    height: auto;

    max-height: 560px;

    display: block;

    object-fit: cover;
}


/* Image bottom gradient */

.blog-detail-featured::after {
    content: "";

    position: absolute;

    left: 0;

    right: 0;

    bottom: 0;

    height: 90px;

    pointer-events: none;

    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.38),
            transparent
        );
}


/* Image branding */

.featured-image-caption {
    position: absolute;

    left: 22px;

    bottom: 18px;

    z-index: 2;

    color: #ffffff;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 2px;
}


/* ==========================================================
   ARTICLE LAYOUT
========================================================== */

.blog-detail-layout {
    display: grid;

    grid-template-columns: 65px minmax(0, 1fr);

    gap: 25px;

    max-width: 850px;

    margin: 0 auto;
}


/* ==========================================================
   SHARE
========================================================== */

.article-share {
    position: sticky;

    top: 115px;

    height: max-content;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 9px;
}

.article-share > span {
    margin-bottom: 5px;

    color: #aaa;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 1.4px;

    writing-mode: vertical-rl;

    transform: rotate(180deg);
}

.article-share a,
.article-share button {
    width: 34px;

    height: 34px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid #e9e9e9;

    border-radius: 50%;

    background: #ffffff;

    color: #044b57;

    font-size: 13px;

    text-decoration: none;

    cursor: pointer;

    transition: all .3s ease;
}

.article-share a:hover,
.article-share button:hover {
    background: #044b57;

    border-color: #044b57;

    color: #f5b14e;

    transform: translateY(-3px);
}


/* ==========================================================
   ARTICLE CONTENT
========================================================== */

.blog-detail-content {
    color: #383838;

    font-size: 16px;

    line-height: 1.9;
}


/* First paragraph */

.blog-detail-content > p:first-child {
    color: #555;

    font-size: 18px;

    line-height: 1.85;

    margin-top: 0;
}


/* Paragraph */

.blog-detail-content p {
    margin-bottom: 22px;
}


/* Headings */

.blog-detail-content h2 {
    position: relative;

    margin: 42px 0 18px;

    padding-left: 16px;

    color: #044b57;

    font-size: 29px;

    line-height: 1.3;

    font-weight: 800;
}

.blog-detail-content h2::before {
    content: "";

    position: absolute;

    left: 0;

    top: 5px;

    bottom: 5px;

    width: 4px;

    border-radius: 5px;

    background: #f5b14e;
}


.blog-detail-content h3 {
    margin: 32px 0 14px;

    color: #044b57;

    font-size: 22px;

    font-weight: 800;
}


/* Links */

.blog-detail-content a {
    color: #044b57;

    font-weight: 600;

    text-decoration: underline;

    text-decoration-color: rgba(245,177,78,.7);

    text-underline-offset: 3px;
}

.blog-detail-content a:hover {
    color: #a40a0a;
}


/* Lists */

.blog-detail-content ul,
.blog-detail-content ol {
    margin: 20px 0;

    padding-left: 24px;
}

.blog-detail-content li {
    margin-bottom: 9px;
}


/* Blockquote */

.blog-detail-content blockquote {
    position: relative;

    margin: 30px 0;

    padding: 25px 28px;

    border-left: 4px solid #f5b14e;

    border-radius: 0 12px 12px 0;

    background: #fff8ed;

    color: #044b57;

    font-size: 18px;

    font-weight: 600;

    line-height: 1.7;
}


/* Images inside article */

.blog-detail-content img {
    max-width: 100%;

    height: auto;

    display: block;

    margin: 30px auto;

    border-radius: 12px;
}


/* Tables */

.blog-detail-content table {
    width: 100%;

    margin: 25px 0;

    border-collapse: collapse;

    font-size: 14px;
}

.blog-detail-content th {
    background: #044b57;

    color: #ffffff;

    padding: 12px;

    text-align: left;
}

.blog-detail-content td {
    padding: 11px 12px;

    border: 1px solid #eeeeee;
}

.blog-detail-content tr:nth-child(even) {
    background: #fffaf3;
}


/* Strong */

.blog-detail-content strong {
    color: #333;
}


/* ==========================================================
   ARTICLE FOOTER
========================================================== */

.blog-detail-footer {
    max-width: 850px;

    margin: 50px auto 0;

    padding-top: 25px;

    border-top: 1px solid #e6e6e6;
}


/* Topics */

.detail-footer-categories {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 12px;

    margin-bottom: 25px;
}

.detail-footer-categories > span {
    display: inline-flex;

    align-items: center;

    gap: 6px;

    color: #777;

    font-size: 11px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: .8px;
}

.detail-footer-categories > span i {
    color: #f5b14e;
}

.detail-footer-categories > div {
    display: flex;

    flex-wrap: wrap;

    gap: 7px;
}

.detail-footer-categories a {
    padding: 7px 12px;

    border-radius: 50px;

    background: #fff1d9;

    color: #044b57;

    font-size: 10px;

    font-weight: 700;

    text-decoration: none;

    transition: all .25s ease;
}

.detail-footer-categories a:hover {
    background: #f5b14e;
}


/* Back button */

.detail-back-button {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    color: #044b57;

    font-size: 12px;

    font-weight: 800;

    text-decoration: none;

    text-transform: uppercase;

    letter-spacing: .5px;
}

.detail-back-button span {
    width: 32px;

    height: 32px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #fff1d9;

    transition: all .3s ease;
}

.detail-back-button:hover {
    color: #044b57;
}

.detail-back-button:hover span {
    background: #f5b14e;

    transform: translateX(-3px);
}


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

@media (max-width: 767px) {

    .blog-detail-page {
        padding-top: 140px !important;
    }

    .blog-detail-title {
        font-size: 34px;

        letter-spacing: -1px;
    }

    .blog-detail-meta {
        align-items: flex-start;

        flex-direction: row;
    }

    .detail-meta-info {
        justify-content: flex-start;
    }

    .blog-detail-featured {
        margin-bottom: 30px;

        border-radius: 13px;
    }

    .blog-detail-layout {
        display: block;
    }

    .article-share {
        position: static;

        flex-direction: row;

        justify-content: flex-start;

        margin-bottom: 25px;
    }

    .article-share > span {
        writing-mode: horizontal-tb;

        transform: none;

        margin-right: 5px;

        margin-bottom: 0;
    }

    .blog-detail-content {
        font-size: 15px;

        line-height: 1.8;
    }

    .blog-detail-content > p:first-child {
        font-size: 17px;
    }

    .blog-detail-content h2 {
        font-size: 20px;
        font-weight: 600;
    }

}


@media (max-width: 480px) {

    .blog-detail-title {
        font-size: 22px;
        font-weight:700;
    }

    .blog-detail-excerpt {
        font-size: 14px;
    }

    .detail-meta-info {
        gap: 7px;

        font-size: 10px;
    }

    .blog-detail-featured img {
        min-height: 220px;

        object-fit: cover;
    }

}