/* index.php extracted styles — block 1 (was inline ~line 63) */
/* ============================================================
       iOS SAFARI GPU CRASH PREVENTION — COMPREHENSIVE
       Disables GPU-intensive effects on mobile/touch devices to
       prevent WebKit process crash ("A problem repeatedly occurred").
       Covers: backdrop-filter, stacked drop-shadows, infinite
       animations, 3D map WebGL, canvas particles, blur filters.
       ============================================================ */
    @media (max-width: 1024px), (hover: none) {
        /* 1. Kill ALL backdrop-filter page-wide with high specificity */
        html body *,
        html body *::before,
        html body *::after,
        html body [class],
        html body [class]::before,
        html body [class]::after,
        html body [id],
        html body [id]::before,
        html body [id]::after {
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
        }

        /* 2. Kill filter blur/drop-shadow on ALL elements */
        .dr-deco-glow,
        .space-particles,
        .space-particles::before,
        .space-particles::after,
        .gm-style svg > g > path,
        .gm-style svg > path {
            filter: none !important;
            -webkit-filter: none !important;
        }

        /* 3. Kill the superGlowPulse neon circle animation (extremely GPU heavy) */
        .gm-style svg > g > path[stroke="#8b5cf6"],
        .gm-style svg > path[stroke="#8b5cf6"] {
            filter: none !important;
            -webkit-filter: none !important;
            animation: none !important;
            -webkit-animation: none !important;
            stroke-width: 3px !important;
        }

        /* 4. Disable ALL infinite CSS animations on decorative elements */
        .space-particles,
        .space-particles::before,
        .space-particles::after,
        .deal-room-card-shimmer,
        .dr-center-card::before,
        .stars-bg,
        .shine__divv {
            animation: none !important;
            -webkit-animation: none !important;
        }

        /* 5. Kill buttonShimmer pseudo-element animations */
        .premium-button-style::before,
        .chat-button-compare::before,
        .add-list::before,
        .premium-hover-card::before {
            animation: none !important;
            -webkit-animation: none !important;
            display: none !important;
        }

        /* 6. Simplify heavy box-shadows on cards */
        .deal-room-floating-card,
        .premium-hover-card {
            box-shadow: 0 0 8px rgba(0, 204, 255, 0.25) !important;
        }

        /* 7. Hide canvas particle systems */
        .dr-particles-canvas {
            display: none !important;
        }

        /* 8. Hide the 600x600 mouse-light radial gradient divs */
        .mouse-light {
            display: none !important;
        }

        /* 9. Disable premium card pseudo-element glow */
        .premium-hover-card::after {
            display: none !important;
        }

        /* 10. Kill card hover transforms on touch devices */
        .premium-hover-card:hover {
            transform: none !important;
            box-shadow: 0 0 8px rgba(0, 204, 255, 0.25) !important;
        }

        .deal-room-floating-card:hover {
            box-shadow: 0 0 8px rgba(0, 204, 255, 0.25) !important;
        }

        /* 11. Kill the deal-room card glow layer */
        .deal-room-card-glow {
            display: none !important;
        }

        /* 12. Kill backdrop-filter on chat interface (styles.css overrides) */
        #chatInterface {
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
        }

        /* 13. Disable 3D card perspective transforms */
        .houseBe__heroCardWrapper:hover {
            transform: none !important;
        }

        /* 15. GALAXY PARTICLES FIX — Kill galaxyRotate & luxuryCardShimmer
           These create 200%×200% radial-gradient overlays that continuously
           rotate at 80s/6s infinite, crashing WebKit GPU on iOS Safari. */
        .premium-trusted-card::after,
        .premium-trusted-card::before,
        .premium-review-card::after,
        .premium-review-card::before,
        .section-opinion .blog-article-item.style-2::after,
        .section-opinion .blog-article-item.style-2::before,
        .propertyCard__wrapper::after,
        .propertyCard__wrapper::before,
        .feature__propertyCardWrapper::after,
        .feature__propertyCardWrapper::before,
        .card-stars {
            animation: none !important;
            -webkit-animation: none !important;
        }

        /* Also kill galaxy particles on featured property & property-type cards
           (they share the same ::after/::before pattern) */
        [class*="premium-"][class*="-card"]::after,
        [class*="premium-"][class*="-card"]::before {
            animation: none !important;
            -webkit-animation: none !important;
        }

        /* Kill backdrop-filter: blur(18px) on premium galaxy cards */
        .premium-trusted-card,
        .premium-review-card,
        .section-opinion .blog-article-item.style-2,
        .propertyCard__wrapper,
        .feature__propertyCardWrapper {
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
        }

        /* Simplify heavy stacked box-shadows on premium cards */
        .premium-trusted-card,
        .premium-review-card,
        .section-opinion .blog-article-item.style-2,
        .propertyCard__wrapper,
        .feature__propertyCardWrapper {
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4),
                        0 0 15px rgba(235, 216, 176, 0.15) !important;
        }
        .premium-trusted-card:hover,
        .premium-review-card:hover,
        .section-opinion .blog-article-item.style-2:hover,
        .propertyCard__wrapper:hover,
        .feature__propertyCardWrapper:hover {
            transform: none !important;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4),
                        0 0 15px rgba(235, 216, 176, 0.15) !important;
        }

        /* 15. Enhanced Mobile Touch Precision for Map Controls */
        #radiusSlider {
            height: 44px !important;
        }
        #radiusSlider::-webkit-slider-thumb {
            width: 32px !important;
            height: 32px !important;
            cursor: pointer;
            background: #8b5cf6 !important;
            border: 2px solid #fff !important;
            box-shadow: 0 0 10px rgba(139, 92, 246, 0.5) !important;
        }
        
        /* 16. 3D Map Overlay Interaction Fixes */
        .handoff-map-3d-wrapper .overlay-controls {
            pointer-events: none !important;
        }
        .handoff-map-3d-wrapper .overlay-controls button {
            pointer-events: auto !important;
        }

        /* 17. 3D Map Overlay Buttons Responsive Alignment */
        .map-overlay-container {
            right: 6px !important;
            bottom: 6px !important;
            left: 6px !important;
            justify-content: center !important;
            flex-wrap: wrap !important;
            gap: 4px !important;
        }
        .map-overlay-btn {
            padding: 6px 8px !important;
            font-size: 11px !important;
            flex: 1 1 auto !important;
            min-width: 40px !important;
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
            gap: 2px !important;
        }
        .map-overlay-btn span {
            font-size: 9px !important;
        }
    }
    
    /* Circle Center Handle Icon */
    .circle-center-handle {
        width: 14px;
        height: 14px;
        background: #fff;
        border: 2px solid #8b5cf6;
        border-radius: 50%;
        box-shadow: 0 0 8px rgba(139, 92, 246, 0.6);
        cursor: move;
        transform: translate(-50%, -50%);
    }

/* index.php extracted styles — block 2 (was inline ~line 450) */
html,
    body {
        width: 100%;
        min-height: 100%;
        margin: 0;
        padding: 0;
        overflow-x: clip;
        position: relative;
    }

    html {
        -webkit-text-size-adjust: 100%;
    }

    body {
        min-height: var(--app-height, 100dvh);
    }

    /* No Leads UI Styling Refined (Global) */

    .no-leads-container {

        padding: 60px 20px !important;

        display: flex !important;

        justify-content: center !important;

        align-items: center !important;

        width: 100% !important;

        text-align: center !important;

    }

    .no-leads-card {

        max-width: 550px !important;

        width: 100% !important;

        display: flex !important;

        flex-direction: column !important;

        align-items: center !important;

        justify-content: center !important;

    }

    .no-leads-icon-circle {

        width: 110px !important;

        height: 110px !important;

        background: rgba(59, 130, 246, 0.1) !important;

        border-radius: 50% !important;

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        margin-bottom: 30px !important;

        border: 1px solid rgba(59, 130, 246, 0.2) !important;

        box-shadow: 0 0 50px rgba(59, 130, 246, 0.2) !important;

    }

    .no-leads-icon-circle i {

        font-size: 48px !important;

        color: #3b82f6 !important;

    }

    .no-leads-title {

        font-size: 26px !important;

        font-weight: 600 !important;

        color: #fff !important;

        margin-bottom: 20px !important;

        text-align: center !important;

        width: 100% !important;

    }

    .no-leads-text {

        font-size: 16px !important;

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

        line-height: 1.6 !important;

        margin-bottom: 8px !important;

        text-align: center !important;

        width: 100% !important;

    }

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

       NEON CIRCLE GLOW - SINGLE COLOR CYAN GLOW

       Clean, focused glow on the circle line only

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



    /* Main Circle Line/Path ONLY - SUPER INTENSE GLOW */

    .gm-style svg>g>path[stroke="#8b5cf6"],

    .gm-style svg>path[stroke="#8b5cf6"] {

        stroke: #ffffff !important;
        /* Pure white core for maximum brightness */

        stroke-opacity: 1 !important;

        stroke-width: 5px !important;
        /* Thicker for more light emission */

        stroke-linecap: round;

        filter:

            /* Blinding White/Violet Core */

            drop-shadow(0 0 2px #ffffff) drop-shadow(0 0 4px #e9d5ff)
            /* Intense Electric Purple Body */

            drop-shadow(0 0 8px #d8b4fe) drop-shadow(0 0 15px #a855f7) drop-shadow(0 0 25px #a855f7)
            /* Massive Atmospheric Glow */

            drop-shadow(0 0 50px rgba(168, 85, 247, 1)) drop-shadow(0 0 90px rgba(147, 51, 234, 0.9)) drop-shadow(0 0 120px rgba(126, 34, 206, 0.8)) !important;

        animation: superGlowPulse 1.5s ease-in-out infinite alternate;

        transition: all 0.3s ease;

    }

    /* REMOVE glow from edit/resize handle POINTS */

    .gm-style svg circle,

    .gm-style svg>g>circle,

    .gm-style div[style*="cursor: pointer"],

    .gm-style div[style*="cursor: move"],

    .gm-style div[style*="width: 8px"],

    .gm-style div[style*="width: 10px"],

    .gm-style div[style*="width: 12px"] {

        filter: none !important;

        animation: none !important;

        box-shadow: none !important;

        stroke: #ffffff !important;

    }

    /* Purple Fill - Subtle interior tint */

    .gm-style svg>g>path[fill="#8b5cf6"],

    .gm-style svg>path[fill="#8b5cf6"] {

        fill: rgba(168, 85, 247, 0.15) !important;

    }

    /* Super Intense Glow Animation */

    @keyframes superGlowPulse {

        0% {

            stroke-width: 4.5px;

            filter:

                drop-shadow(0 0 2px #ffffff) drop-shadow(0 0 4px #e9d5ff) drop-shadow(0 0 8px #d8b4fe) drop-shadow(0 0 15px #a855f7) drop-shadow(0 0 35px rgba(168, 85, 247, 0.9)) drop-shadow(0 0 60px rgba(147, 51, 234, 0.7));

        }

        100% {

            stroke-width: 5.5px;

            filter:

                drop-shadow(0 0 3px #ffffff) drop-shadow(0 0 6px #e9d5ff) drop-shadow(0 0 12px #9333ea) drop-shadow(0 0 30px #a855f7) drop-shadow(0 0 60px #a855f7)
                /* Solid light */

                drop-shadow(0 0 100px rgba(147, 51, 234, 1));

        }

    }

    /* Hover Enhancement - Blindingly Bright */

    .gm-style svg>g>path[stroke="#8b5cf6"]:hover,

    .gm-style svg>path[stroke="#8b5cf6"]:hover {

        stroke-width: 6px !important;

        filter:

            drop-shadow(0 0 3px #ffffff) drop-shadow(0 0 6px #e9d5ff) drop-shadow(0 0 12px #d8b4fe) drop-shadow(0 0 25px #a855f7) drop-shadow(0 0 50px #9333ea) drop-shadow(0 0 100px #a855f7)
            /* Massive solid glow */

            drop-shadow(0 0 150px rgba(147, 51, 234, 1)) !important;

    }

    .no-leads-action-btn {

        margin-top: 30px !important;

        background: linear-gradient(135deg, #1d4ed8 0%, #3b82f6 100%) !important;

        color: #fff !important;

        padding: 16px 60px !important;

        border-radius: 50px !important;

        font-size: 17px !important;

        font-weight: 600 !important;

        box-shadow: 0 10px 30px rgba(59, 130, 246, 0.3) !important;

        border: none !important;

        display: inline-block !important;

        text-decoration: none !important;

        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;

        width: 100% !important;

        max-width: 380px !important;

        text-align: center !important;

    }

    .no-leads-action-btn:hover {

        transform: translateY(-3px) !important;

        box-shadow: 0 15px 40px rgba(59, 130, 246, 0.4) !important;

        color: #fff !important;

    }

    /* Remove autofill white/yellow background (cross-browser including Safari & Firefox) */

    input:-webkit-autofill,
    input:-webkit-autofill:hover,
    input:-webkit-autofill:focus,
    input:-webkit-autofill:active,
    textarea:-webkit-autofill,
    textarea:-webkit-autofill:hover,
    textarea:-webkit-autofill:focus,
    textarea:-webkit-autofill:active,
    select:-webkit-autofill,
    select:-webkit-autofill:hover,
    select:-webkit-autofill:focus,
    select:-webkit-autofill:active {
        -webkit-box-shadow: 0 0 0px 1000px #2E3136 inset !important;
        box-shadow: 0 0 0px 1000px #2E3136 inset !important;
        -webkit-text-fill-color: #fff !important;
        caret-color: #fff !important;
        -webkit-background-clip: text !important;
        background-clip: text !important;
        transition: background-color 600000s 0s, color 600000s 0s !important;
    }

    /* Firefox */
    input:-moz-autofill,
    textarea:-moz-autofill,
    select:-moz-autofill {
        background-color: #2E3136 !important;
        color: #fff !important;
        filter: none;
    }

    .housebe__heroCardImgWrapper {

        flex-shrink: 0 !important;

    }

    .houseBe__heroCardWrapper {

        height: 100% !important;

    }

    .paraWrapper {

        min-height: 25vh !important;

    }

    @media(max-width:640px) {

        .paraWrapper {

            min-height: 17vh !important;

        }

    }

    .houseBe__heroContentMianWrapper {

        padding: 50px 0px !important;

    }

    #filter-form {

        display: none;

        position: fixed;

        top: 50%;

        left: 50%;

        transform: translate(-50%, -50%);

        z-index: 9999;

        width: 85%;

        height: 550px;

        overflow-y: scroll;

        box-shadow: 0 15px 35px rgba(50, 50, 93, .1), 0 5px 15px rgba(0, 0, 0, .07);

    }

    #filter-form::before {

        content: '';

        position: absolute;

        top: -50px;

        left: -50px;

        width: 200px;

        height: 200px;

        background: rgb(219 52 52 / 10%);

        border-radius: 50%;

        z-index: 1;

    }

    .overlay {

        display: none;

        position: fixed;

        top: 0;

        left: 0;

        width: 100%;

        height: 100%;

        background-color: rgba(0, 0, 0, 0.5);

        /* Adjust the transparency here */

        z-index: 9998;

    }

    #close {

        display: none;

        color: #000;

        position: absolute;

        top: 10px;

        right: 20px;

        font-size: 22px;

        cursor: pointer;

    }

    #close2 {

        display: none;

        position: fixed;

        top: 3%;

        right: 13%;

        font-size: 30px;

        z-index: 11111;

        color: #FFF;

        cursor: pointer;

    }

    .form-control {

        height: 50px !important;

        border-radius: 35px;

    }

    .section-title {

        color: #E82025;

        margin-bottom: 15px;

        font-weight: 600;

        position: relative;

        padding-bottom: 10px;

    }

    .section-title2 {

        color: #E82025;

        margin-bottom: 15px;

        font-weight: 600;

        position: relative;

        padding-bottom: 10px;

    }

    .section-title::after {

        content: '';

        position: absolute;

        bottom: 0;

        left: 0;

        width: 50px;

        height: 3px;

        background-color: #E82025;

    }

    .section-title2::after {

        content: '';

        position: absolute;

        bottom: 0;

        left: 15px;

        width: 50px;

        height: 3px;

        background-color: #E82025;

    }

    form label {

        display: block;

        margin-bottom: 10px !important;

        color: #34495e !important;

        font-weight: 300 !important;

        transition: color 0.3s ease !important;

        font-size: 14px !important;

    }

    .nice-select {

        appearance: none;

        background: white url(data:image/svg+xml;utf8,<svg fill='%233498db' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>) no-repeat right 15px center;

        background-size: 24px;

    }

    .form-control:focus,

    .nice-select:focus {

        outline: none;

        box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);

    }

    #map {

        height: 300px;

        display: none;

    }

    .pac-container {

        z-index: 9999 !important;

    }

    /* Style the dropdown suggestions */

    .suggestions {

        display: none;

        position: absolute;

        background: #fff;

        padding-left: 10px;

        padding-top: 10px;

        width: 78%;

        max-height: 200px;

        overflow-y: auto;

        z-index: 1000;

        border-radius: 10px;

        margin-top: 10px;

        border: 1px solid #e3e3e3;

    }

    .suggestions div {

        padding: 10px;

        cursor: pointer;

    }

    .suggestions div:hover {

        background: #f1f1f1;

    }

    #voiceButton {

        background: #d3d3d3;

        color: #363636;

    }

    .property-card {

        display: none;

        width: 900px;

        margin: 0 auto;

        background: white;

        border-radius: 10px;

        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);

        overflow-y: scroll;

        position: fixed;

        top: 50%;

        left: 50%;

        transform: translate(-50%, -50%);

        height: 570px;

        z-index: 9999;

    }

    .image-gallery {

        position: relative;

        height: 400px;

        background: #f0f0f0;

    }

    .main-image {

        width: 100%;

        height: 100%;

        object-fit: cover;

    }

    .thumbnails {

        position: absolute;

        bottom: 20px;

        left: 20px;

        display: flex;

        gap: 10px;

    }

    .thumbnail {

        width: 60px;

        height: 60px;

        border: 3px solid white;

        border-radius: 5px;

        cursor: pointer;

        object-fit: cover;

        transition: all 0.2s;

    }

    .thumbnail:hover {

        transform: scale(1.05);

    }

    .thumbnail.active {

        border-color: #4CAF50;

    }

    .property-status {

        position: absolute;

        top: 20px;

        left: 20px;

        background: linear-gradient(135deg, #667eea 0%, #FF0000 100%);

        ;

        color: white;

        padding: 8px 15px;

        border-radius: 30px;

        font-weight: 600;

        font-size: 14px;

    }

    .property-status2 {

        position: absolute;

        top: 20px;

        left: 125px;

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

        color: white;

        padding: 8px 15px;

        border-radius: 30px;

        font-weight: 600;

        font-size: 14px;

    }

    .image-nav {

        position: absolute;

        top: 50%;

        transform: translateY(-50%);

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

        width: 40px;

        height: 40px;

        border-radius: 50%;

        display: flex;

        align-items: center;

        justify-content: center;

        cursor: pointer;

        font-size: 20px;

        color: #333;

        transition: all 0.2s;

    }

    .image-nav:hover {

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

    }

    .prev {

        left: 20px;

    }

    .next {

        right: 20px;

    }

    .property-details {

        padding: 25px;

    }

    .price-section {

        display: flex;

        justify-content: space-between;

        align-items: center;

        margin-bottom: 15px;

    }

    .price {

        font-size: 28px;

        font-weight: 700;

        color: #2c3e50;

    }

    .action-buttons {

        display: flex;

        gap: 10px;

    }

    .btn-outline {

        background: transparent;

        border: 1px solid #ddd;

    }

    .btn-outline:hover {

        background: #f5f5f5;

    }

    .btn i {

        margin-right: 5px;

    }

    .property-title {

        font-size: 22px;

        margin-bottom: 5px;

        color: #2c3e50;

    }

    .property-address {

        color: #7f8c8d;

        margin-bottom: 20px;

        display: flex;

        align-items: center;

    }

    .property-address i {

        margin-right: 5px;

        color: #95a5a6;

    }

    .property-features {

        display: flex;

        justify-content: space-between;

        border-top: 1px solid #eee;

        border-bottom: 1px solid #eee;

        padding: 15px 0;

        margin-bottom: 20px;

    }

    .feature {

        display: flex;

        flex-direction: column;

        align-items: center;

    }

    .feature-value {

        font-size: 18px;

        font-weight: 600;

        color: #2c3e50;

    }

    .feature-label {

        font-size: 14px;

        color: #7f8c8d;

    }

    .property-description {

        color: #34495e;

        line-height: 1.6;

        margin-bottom: 20px;

    }

    .agent-section {

        display: flex;

        align-items: center;

        background: #f9f9f9;

        padding: 15px;

        border-radius: 8px;

    }

    .agent-image {

        width: 60px;

        height: 60px;

        border-radius: 50%;

        object-fit: cover;

        margin-right: 15px;

    }

    .agent-info {

        flex: 1;

    }

    .agent-name {

        font-weight: 600;

        color: #2c3e50;

    }

    .agent-contact {

        color: #7f8c8d;

        font-size: 14px;

    }

    .contact-agent {

        margin-left: 10px;

    }

    /* Responsive styles */

    @media (max-width: 768px) {

        .image-gallery {

            height: 300px;

        }

        .property-features {

            flex-wrap: wrap;

            gap: 15px;

        }

        .feature {

            width: 48%;

        }

    }

    @media (max-width: 480px) {

        .price-section {

            flex-direction: column;

            align-items: flex-start;

            gap: 15px;

        }

        .agent-section {

            flex-direction: column;

            text-align: center;

        }

        .agent-image {

            margin-right: 0;

            margin-bottom: 10px;

        }

        .contact-agent {

            margin-left: 0;

            margin-top: 10px;

        }

    }

    .overlay {

        display: none;

        position: fixed;

        top: 0;

        left: 0;

        width: 100%;

        height: 100%;

        background-color: rgba(0, 0, 0, 0.7);

        /* Adjust the transparency here */

        z-index: 9998;

    }

    #close2 {

        display: none;

        position: fixed;

        top: 3%;

        right: 13%;

        font-size: 30px;

        z-index: 11111;

        color: #FFF;

        cursor: pointer;

    }

    @media only screen and (max-width: 600px) {

        .mobile-search {

            display: flex;

            flex-direction: column;

        }

        #voiceButton {

            width: 100%;

        }

    }

    .houseBe__heroMainWrapper {

        min-height: 100dvh;

            {

            /* background-color: #1F2C2D !important; */

        }

        display: flex;

        justify-content: center;

        align-items: center;

    }

    .houseBe__heroContentMianWrapper {

        width: 80%;

        display: grid;

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

        gap: 20px;

    }

    .houseBe__heroCardWrapper {

        display: flex;

        flex-direction: column;

        gap: 10px;

        padding: 15px;

        border-radius: 15px;

        /* background: #314B4C; */

        background: rgba(49, 75, 76, .3) !important;

        transform-style: preserve-3d;

        transition: all .5s ease-in-out;

        cursor: pointer;

    }

    .houseBe__heroCardWrapper:hover {

        transform: perspective(1000px) rotateX(-3deg) rotateY(5deg) translateY(-15px);

        box-shadow: 0px 30px 60px 0px rgba(0, 0, 0, 0.1019607843);

    }

    .housebe__heroCardImgWrapper {

        height: 35dvh !important;

        width: 100%;

        overflow: hidden;

        border-radius: 8px;

        position: relative;

    }

    .housebe__heroCardImgWrapper img {

        height: 100%;

        width: 100%;

        object-fit: cover;

        object-position: top;

    }

    .housebe__heroCardImgWrapper .filterSearchWrapper {

        position: absolute;

        top: 0;

        left: 0;

        width: 100%;

        height: 100%;

        display: flex;

        justify-content: center;

        align-items: center;

    }

    @media(min-width:640px) {

        .housebe__heroCardImgWrapper .filterSearchWrapper {

            position: absolute;

            top: 0;

            left: 0;

            width: 100%;

            height: 100%;

            display: none;

            justify-content: center;

            align-items: center;

        }

    }

    .housebe__heroCardImgWrapper .filterSearchWrapper div {

        width: 100%;

        display: flex;

        gap: 10px;

        padding: 10px;

    }

    .housebe__heroCardImgWrapper .filterSearchWrapper div input {

        padding: 5px 10px;

        flex: 1;

        border: none;

        outline: none;

        border-radius: 5px;

        background: rgba(255, 255, 255, .6);

        color: black;

    }

    .housebe__heroCardImgWrapper .filterSearchWrapper div button {

        padding: 10px 10px;

        background: #1E90FF;

        border-radius: 5px;

    }

    .housebe__cardContentWrapper h3 {

        color: #ffffff;

    }

    .housebe__cardContentWrapper p {

        color: #f2f2f2;

        font-weight: 400;

    }

    .property__wrapper {

        width: 100%;

    }

    .property__wrapper h4 {

        color: #ffffff;

        text-align: center;

        font-size: 30px;

    }

    .housebe__propertyCategoriesWrapper {

        width: 80%;

        margin: 0px auto;

        display: grid;

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

        gap: 10px;

    }

    .card__BTNs {

        display: flex;

        flex-direction: column;

        gap: 20px;

        border: none;

        outline: none;

        background: none;

        background: #314B4C;

        padding: 36px;

        border-radius: 16px;

        margin: 40px 0px;

    }

    .cardBtn__iconWrapper {

        background: rgba(31, 44, 45, .5);

        font-size: 50px;

        color: #f2f2f2;

        padding: 40px 0px;

        border-radius: 8px;

    }

    .btn__paraText {

        font-size: 20px !important;

        color: #ffffff;

    }

    .card__buttonWrapper {

        display: flex;

        justify-content: center;

        align-items: center;

        gap: 10px;

        margin: 20px 0px;

    }

    .card__buttonWrapper button {

        padding: 10px 15px;

        background: #1E90FF;

        color: #ffffff;

        border: none;

        outline: none;

        border-radius: 8px;

    }

    @media (max-width: 640px) {

        .card__buttonWrapper {

            flex-direction: column;

            gap: 15px;

            width: 100%;

        }

        .card__buttonWrapper a {

            width: 100%;

        }

        .card__buttonWrapper button {

            width: 100%;

        }

    }

    .compare-homes-btn {

        padding: 12px 35px;

        font-size: 10px;

        font-weight: 700;

        text-transform: uppercase;

        letter-spacing: 0.6px;

        white-space: nowrap;

        background: linear-gradient(135deg, #e53935 0%, #1e88e5 100%) !important;

        color: #FFF;

        border: none;

        border-radius: 50px !important;

        cursor: pointer;

        position: relative;

        overflow: hidden;

        z-index: 5;

        box-shadow: 0 4px 15px rgba(30, 136, 229, 0.3);

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

    }

    .compare-homes-btn:hover {

        color: #FFF;

    }

    .compare-homes-btn::before {

        content: "";

        position: absolute;

        top: -50%;

        left: -50%;

        width: 200%;

        height: 200%;

        background: linear-gradient(to right,

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

                rgba(255, 255, 255, 0.3) 50%,

                rgba(255, 255, 255, 0) 100%);

        transform: rotate(45deg);

        animation: buttonShimmer 4s infinite;

    }

    @keyframes buttonShimmer {

        0% {

            transform: rotate(45deg) translateY(100%);

        }

        100% {

            transform: rotate(45deg) translateY(-100%);

        }

    }

    @media (min-width: 640px) and (max-width: 1023px) {

        .compare-homes-btn {

            padding: 10px 25px !important;

            font-size: 9px !important;

            white-space: nowrap !important;

        }

    }

    @media (max-width: 639px) {

        .compare-homes-btn {

            padding: 10px 20px;

            font-size: 9px;

            white-space: nowrap;

        }

    }

    .premium-button-style {

        padding: 12px 30px;

        font-size: 13px;

        font-weight: 700;

        text-transform: uppercase;

        letter-spacing: 1.2px;

        color: #FFF !important;

        border: none;

        border-radius: 50px !important;

        cursor: pointer;

        position: relative;

        overflow: hidden;

        z-index: 5;

        box-shadow: 0 4px 15px rgba(30, 136, 229, 0.3);

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

        display: inline-flex;

        align-items: center;

        justify-content: center;

        text-decoration: none !important;

    }

    .premium-button-style::before {

        content: "";

        position: absolute;

        top: -50%;

        left: -50%;

        width: 200%;

        height: 200%;

        background: linear-gradient(to right,

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

                rgba(255, 255, 255, 0.3) 50%,

                rgba(255, 255, 255, 0) 100%);

        transform: rotate(45deg);

        animation: buttonShimmer 4s infinite;

    }

    .premium-button-blue {

        background: #1E90FF !important;

    }

    /* Premium Card Core Styles */

    .premium-hover-card {

        position: relative;

        overflow: hidden;

        background: linear-gradient(145deg, #091428 0%, #050a15 100%) !important;

        border: 1px solid rgba(0, 204, 255, 0.4) !important;

        backdrop-filter: blur(12px);

        transition: transform 0.3s ease, box-shadow 0.3s ease;

        padding-bottom: 40px !important;

        border-radius: 15px !important;

        box-shadow: 
            0 0 40px rgba(0, 204, 255, 0.6), 
            inset 0 0 40px rgba(0, 204, 255, 0.4),
            0 0 4px 1px rgba(0, 204, 255, 0.9) !important;

    }

    .premium-hover-card::after {
        content: '' !important;
        position: absolute !important;
        top: 6px !important; 
        left: 6px !important; 
        right: 6px !important; 
        bottom: 6px !important;
        border: 1px solid rgba(0, 204, 255, 0.15) !important;
        border-radius: 9px !important;
        pointer-events: none !important;
        z-index: 1 !important;
    }

    .premium-hover-card:hover {

        box-shadow: 
            0 0 50px rgba(0, 204, 255, 0.8), 
            inset 0 0 50px rgba(0, 204, 255, 0.5),
            0 0 6px 2px rgba(0, 204, 255, 1) !important;
        transform: translateY(-3px) !important;
        border-color: rgba(0, 204, 255, 0.8) !important;

    }

    /* Interactive Mouse Light Effect */

    .mouse-light {

        position: absolute;

        width: 600px;

        height: 600px;

        background: radial-gradient(circle, rgba(30, 144, 255, 0.15) 0%, rgba(30, 144, 255, 0) 70%);

        pointer-events: none;

        z-index: 1;

        transform: translate(-50%, -50%);

        opacity: 0;

        transition: opacity 0.5s ease;

    }

    .premium-hover-card:hover .mouse-light {

        opacity: 1;

    }

    /* Interactive Blocks Grid */

    .interactive-blocks-grid {

        display: grid;

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

        gap: 16px;

        margin-top: 28px;

        position: relative;

        z-index: 2;

        text-align: left;

    }

    /* ── Premium 3D gold cards ── */
    .interactive-block {

        position: relative;

        background:
            radial-gradient(ellipse at top left, rgba(235, 216, 176, 0.10) 0%, transparent 55%),
            linear-gradient(160deg, rgba(14, 30, 45, 0.85) 0%, rgba(7, 20, 30, 0.92) 100%);

        border-top: 1px solid rgba(235, 216, 176, 0.72);
        border-left: 1px solid rgba(235, 216, 176, 0.45);
        border-right: 1px solid rgba(235, 216, 176, 0.14);
        border-bottom: 1px solid rgba(235, 216, 176, 0.08);

        border-radius: 16px;

        padding: 20px 18px;

        transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s ease, border-color 0.45s ease;

        display: flex;

        flex-direction: column;

        gap: 10px;

        cursor: default;

        overflow: hidden;

        isolation: isolate;

        box-shadow:
            3px 5px 0 rgba(195, 145, 35, 0.45),
            0 10px 22px rgba(0, 0, 0, 0.40),
            inset 0 1px 0 rgba(255, 255, 255, 0.12);

    }

    /* soft gold corner glow */
    .interactive-block::before {

        content: '';

        position: absolute;

        top: 0;
        left: 0;

        width: 70px;
        height: 70px;

        background: radial-gradient(circle at top left, rgba(235, 216, 176, 0.20), transparent 70%);

        z-index: 0;

        pointer-events: none;

    }

    .interactive-block:hover {

        transform: translateY(-6px);

        border-color: rgba(235, 216, 176, 0.85);

        box-shadow:
            4px 7px 0 rgba(195, 145, 35, 0.50),
            0 16px 34px rgba(0, 0, 0, 0.50),
            0 0 26px rgba(235, 216, 176, 0.28),
            inset 0 1px 0 rgba(255, 255, 255, 0.18);

    }

    .interactive-block i {

        font-size: 19px;

        color: #ebd8b0;

        width: 44px;
        height: 44px;

        border-radius: 12px;

        background: linear-gradient(135deg, rgba(235, 216, 176, 0.22), rgba(235, 216, 176, 0.06));

        border: 1px solid rgba(235, 216, 176, 0.32);

        display: flex;

        align-items: center;

        justify-content: center;

        margin-bottom: 4px;

        position: relative;

        z-index: 1;

        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);

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

    }

    .interactive-block:hover i {

        transform: scale(1.08) translateY(-1px);

    }

    .interactive-block h4 {

        font-size: 15px;

        font-weight: 700;

        margin: 0;

        color: #ffffff;

        line-height: 1.25;

        letter-spacing: -0.2px;

        position: relative;

        z-index: 1;

    }

    .interactive-block p {

        font-size: 12.5px;

        line-height: 1.5;

        margin: 0;

        color: #aebfcb !important;

        position: relative;

        z-index: 1;

    }

    /* Premium Button Override for this section */

    .leave-task-btn-premium {

        background: linear-gradient(135deg, #1E90FF 0%, #0000FF 100%) !important;

        margin-top: 30px;

        padding: 15px 40px !important;

        font-size: 15px !important;

        box-shadow: 0 0 20px rgba(30, 144, 255, 0.4);

        animation: premiumPulse 2s infinite;

        display: inline-flex;

        align-items: center;

        justify-content: center;

        text-decoration: none !important;

        border-radius: 50px;

        color: white;

        font-weight: 700;

        text-transform: uppercase;

        border: none;

        cursor: pointer;

        position: relative;

        z-index: 5;

    }

    @keyframes premiumPulse {

        0% {

            box-shadow: 0 0 0 0 rgba(30, 144, 255, 0.4);

        }

        70% {

            box-shadow: 0 0 0 15px rgba(30, 144, 255, 0);

        }

        100% {

            box-shadow: 0 0 0 0 rgba(30, 144, 255, 0);

        }

    }

    @media (max-width: 768px) {

        .interactive-blocks-grid {

            grid-template-columns: 1fr;

        }

    }

    /* Leads Section Enhancements */

    .leads-section-inner {

        width: 100%;

        max-width: 1200px;

        margin: 0 auto;

        padding: 0 16px;

    }

    .leads-title {

        font-size: 24px !important;

        font-weight: 500 !important;

        color: #fff;

        margin-bottom: 35px !important;

        text-align: center;

        opacity: 0.9;

    }

    .leads-search-form {

        position: relative;

        display: flex;

        align-items: center;

        width: 100%;

        max-width: 800px;

        margin: 0 auto 50px;

        gap: 0;

    }

    .leads-search-input-wrapper {

        position: relative;

        flex: 1;

    }

    .leads-search-input {

        width: 100%;

        height: 50px !important;

        background: transparent !important;

        border: none !important;

        border-radius: 30px !important;

        padding: 0 10px !important;

        color: #fff !important;

        font-size: 17px !important;

        transition: all 0.3s ease !important;

    }

    .leads-search-input-wrapper .premium-button-style {

        height: 42px !important;

    }

    .leads-search-glow {

        position: absolute;

        top: 0;

        right: 0;

        width: 40%;

        height: 100%;

        background: radial-gradient(circle at 100% 50%, rgba(59, 130, 246, 0.3) 0%, transparent 70%) !important;

        border-radius: 0 30px 30px 0 !important;

        pointer-events: none !important;

    }

    .leads-card {

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

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

        border-radius: 12px;

        padding: 25px 35px;

        margin-bottom: 15px;

        display: flex;

        justify-content: space-between;

        align-items: center;

        backdrop-filter: blur(8px);

        transition: all 0.3s ease;

    }

    .leads-card:hover {

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

        border-color: rgba(255, 255, 255, 0.1);

        transform: scale(1.005);

    }

    .leads-info {

        flex: 1;

        padding-right: 20px;

    }

    .leads-summary-line {

        font-size: 20px;

        font-weight: 600;

        color: #fff;

        margin-bottom: 8px;

        display: block;

    }

    .leads-detail-line {

        font-size: 16px;

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

        margin-bottom: 15px;

        display: block;

    }

    .leads-badge {

        display: inline-flex;

        align-items: center;

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

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

        font-size: 13px;

        font-weight: 500;

        padding: 6px 16px;

        border-radius: 20px;

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

    }

    /* Premium Fintech Lead Card Styles */
    .premium-lead-card {
        background: linear-gradient(145deg, #091428 0%, #050a15 100%) !important;
        backdrop-filter: blur(12px) !important;
        border: 1px solid rgba(0, 204, 255, 0.4) !important;
        border-radius: 20px !important;
        padding: 24px !important;
        margin-bottom: 24px !important;
        position: relative !important;
        transition: all 0.3s ease !important;
        overflow: visible !important;
        box-shadow: 
            0 0 40px rgba(0, 204, 255, 0.6), 
            inset 0 0 40px rgba(0, 204, 255, 0.4),
            0 0 4px 1px rgba(0, 204, 255, 0.9) !important;
    }

    /* Premium AI Leads Section Card */
    .premium-ai-leads-card {
        background: linear-gradient(145deg, #091428 0%, #050a15 100%) !important;
        backdrop-filter: blur(15px) !important;
        border: 1px solid rgba(0, 204, 255, 0.5) !important;
        border-radius: 24px !important;
        padding: 60px 40px !important;
        position: relative !important;
        transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
        overflow: visible !important;
        box-shadow: 
            0 0 60px rgba(0, 204, 255, 0.4), 
            inset 0 0 60px rgba(0, 204, 255, 0.2),
            0 0 10px 2px rgba(0, 204, 255, 0.6) !important;
    }

    .premium-ai-leads-card:hover {
        box-shadow: 
            0 0 80px rgba(0, 204, 255, 0.6), 
            inset 0 0 70px rgba(0, 204, 255, 0.3),
            0 0 15px 3px rgba(0, 204, 255, 0.8) !important;
        transform: translateY(-8px) scale(1.01) !important;
        border-color: rgba(0, 204, 255, 0.9) !important;
    }

    /* Keyframes for premium elements */
    @keyframes galaxyRotate {
         0% { transform: rotate(0deg); }
         100% { transform: rotate(360deg); }
    }

    @keyframes luxuryCardShimmer {
        0% { transform: rotate(45deg) translateY(120%); }
        50% { transform: rotate(45deg) translateY(-120%); }
        100% { transform: rotate(45deg) translateY(-120%); }
    }


    /* Premium Trusted Section Card - 3D Golden Galaxy Theme */
    .premium-trusted-card {
        background:
            radial-gradient(ellipse at top left, rgba(235, 216, 176, 0.18) 0%, transparent 55%),
            radial-gradient(ellipse at bottom right, rgba(43, 93, 153, 0.14) 0%, transparent 55%),
            linear-gradient(160deg, rgba(14, 30, 55, 0.88) 0%, rgba(6, 17, 33, 0.80) 100%) !important;
        backdrop-filter: blur(18px) !important;
        -webkit-backdrop-filter: blur(18px) !important;
        border-top: 1px solid rgba(235, 216, 176, 0.72) !important;
        border-left: 1px solid rgba(235, 216, 176, 0.50) !important;
        border-right: 1px solid rgba(235, 216, 176, 0.12) !important;
        border-bottom: 1px solid rgba(235, 216, 176, 0.06) !important;
        border-radius: 20px !important;
        padding: 35px !important;
        position: relative !important;
        transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
        overflow: hidden !important;
        isolation: isolate !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
        box-shadow: 
            3px 5px 0 rgba(195, 145, 35, 0.45),
            4px 7px 8px rgba(0, 0, 0, 0.55),
            0 12px 24px rgba(0, 0, 0, 0.45),
            0 5px 10px rgba(0, 0, 0, 0.32),
            0 20px 40px rgba(0, 0, 0, 0.22),
            0 0 28px rgba(235, 216, 176, 0.32),
            inset 0 1px 0 rgba(255, 255, 255, 0.18),
            inset 0 0 18px rgba(235, 216, 176, 0.18) !important;
    }

    .premium-trusted-card:hover {
        transform: translateY(-8px) scale(1.02) !important;
        background:
            radial-gradient(ellipse at top left, rgba(235, 216, 176, 0.25) 0%, transparent 55%),
            radial-gradient(ellipse at bottom right, rgba(43, 93, 153, 0.18) 0%, transparent 55%),
            linear-gradient(160deg, rgba(16, 34, 62, 0.92) 0%, rgba(6, 17, 33, 0.86) 100%) !important;
        border-top-color: rgba(235, 216, 176, 0.92) !important;
        border-left-color: rgba(235, 216, 176, 0.72) !important;
        border-right-color: rgba(235, 216, 176, 0.22) !important;
        border-bottom-color: rgba(235, 216, 176, 0.10) !important;
        box-shadow:
            4px 7px 0 rgba(215, 165, 45, 0.58),
            5px 9px 12px rgba(0, 0, 0, 0.65),
            0 18px 36px rgba(0, 0, 0, 0.55),
            0 8px 16px rgba(0, 0, 0, 0.42),
            0 28px 50px rgba(0, 0, 0, 0.28),
            0 0 36px rgba(235, 216, 176, 0.50),
            inset 0 1px 0 rgba(255, 255, 255, 0.26),
            inset 0 0 26px rgba(235, 216, 176, 0.26) !important;
    }

    /* Restore the gold 3D border/depth on mobile for the "Trusted by Buyers
       and Agents" cards. The global GPU block flattens .premium-trusted-card
       shadows on <=1024px / touch — a two-class selector beats it, and 0-blur
       offset shadows are GPU-cheap so iOS WebKit stays safe. */
    @media (max-width: 1024px), (hover: none) {
        .tf-grid-layout .premium-trusted-card {
            border-top: 1px solid rgba(235, 216, 176, 0.72) !important;
            border-left: 1px solid rgba(235, 216, 176, 0.50) !important;
            border-right: 1px solid rgba(235, 216, 176, 0.18) !important;
            border-bottom: 1px solid rgba(235, 216, 176, 0.10) !important;
            border-radius: 20px !important;
            box-shadow:
                4px 6px 0 rgba(195, 145, 35, 0.48),
                8px 11px 0 rgba(0, 0, 0, 0.28) !important;
            transform: none !important;
        }
        .tf-grid-layout .premium-trusted-card:hover {
            transform: none !important;
            box-shadow:
                4px 6px 0 rgba(195, 145, 35, 0.48),
                8px 11px 0 rgba(0, 0, 0, 0.28) !important;
        }
    }

    /* Rotating galaxy star particles on trusted cards */
    .premium-trusted-card::after {
         content: "" !important;
         position: absolute !important;
         top: -50% !important;
         left: -50% !important;
         width: 200% !important;
         height: 200% !important;
         background-image: 
             radial-gradient(circle, rgba(255, 255, 255, 0.45) 1px, transparent 1px),
             radial-gradient(circle, rgba(255, 255, 255, 0.25) 1.5px, transparent 1.5px),
             radial-gradient(circle, rgba(235, 216, 176, 0.25) 1px, transparent 1px) !important;
         background-size: 70px 70px, 105px 105px, 84px 84px !important;
         animation: galaxyRotate 80s infinite linear !important;
         pointer-events: none !important;
         z-index: -1 !important;
         opacity: 0.65 !important;
    }

    /* Premium Shimmer for trusted cards */
    .premium-trusted-card::before {
         content: "" !important;
         position: absolute !important;
         top: -50% !important;
         left: -50% !important;
         width: 200% !important;
         height: 200% !important;
         background: linear-gradient(
             to right,
             rgba(255, 255, 255, 0) 0%,
             rgba(255, 255, 255, 0.18) 50%,
             rgba(255, 255, 255, 0) 100%
         ) !important;
         transform: rotate(45deg);
         animation: luxuryCardShimmer 6s infinite linear !important;
         pointer-events: none !important;
         z-index: 2 !important;
    }

    /* Specific Gold Accents for Trusted Card Elements */
    .premium-trusted-card .tf-icon.allIcon__bgColor {
        background: none !important;
        border: none !important;
        width: 64px !important;
        height: 64px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 16px !important;
        margin-bottom: 5px;
        transition: all 0.3s ease;
        position: relative;
        z-index: 2;
        box-shadow: none !important;
    }

    .premium-trusted-card:hover .tf-icon.allIcon__bgColor {
        background: none !important;
        transform: scale(1.1);
    }

    .premium-trusted-card .tf-icon i {
        color: #ebd8b0 !important;
        font-size: 26px !important;
    }

    .premium-trusted-card h5.title a {
        color: #ebd8b0 !important;
        font-size: 22px !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;
        text-shadow: 0 0 8px rgba(235, 216, 176, 0.25) !important;
        transition: color 0.3s ease;
    }

    .premium-trusted-card h5.title a:hover {
        color: #fff !important;
    }

    .premium-trusted-card .leads-btn-premium {
        background: linear-gradient(135deg, #ebd8b0 0%, #d3bf98 100%) !important;
        color: #061121 !important;
        border: 1px solid rgba(235, 216, 176, 0.4) !important;
        box-shadow: 0 4px 15px rgba(235, 216, 176, 0.2), inset 0 0 10px rgba(235, 216, 176, 0.1) !important;
        transition: all 0.3s ease !important;
    }

    .premium-trusted-card .leads-btn-premium:hover {
        background: linear-gradient(135deg, #f7e6c4 0%, #e0cda7 100%) !important;
        box-shadow: 0 6px 20px rgba(235, 216, 176, 0.35) !important;
        color: #061121 !important;
        transform: translateY(-2px) scale(1.02) !important;
    }


    .premium-lead-card::after {
        content: '' !important;
        position: absolute !important;
        top: 6px !important; 
        left: 6px !important; 
        right: 6px !important; 
        bottom: 6px !important;
        border: 1px solid rgba(0, 204, 255, 0.15) !important;
        border-radius: 14px !important;
        pointer-events: none !important;
    }

    .premium-lead-card:hover {
        box-shadow: 
            0 0 40px rgba(0, 204, 255, 0.6), 
            inset 0 0 40px rgba(0, 204, 255, 0.4),
            0 0 4px 1px rgba(0, 204, 255, 0.9) !important;
        transform: translateY(-3px) !important;
        border-color: rgba(0, 204, 255, 0.8) !important;
    }

    .lead-header {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        margin-bottom: 20px !important;
        position: relative;
        z-index: 2;
    }

    .lead-status-badge {
        padding: 6px 16px !important;
        border-radius: 30px !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 1px !important;
        border: 1px solid rgba(0, 204, 255, 0.3) !important;
        box-shadow: 0 0 10px rgba(0, 204, 255, 0.2) !important;
    }

    .status-new {
        background: rgba(0, 60, 100, 0.4) !important;
        color: #5eead4 !important;
        border-color: rgba(94, 234, 212, 0.3) !important;
        box-shadow: 0 0 10px rgba(94, 234, 212, 0.2) !important;
    }

    .status-looking {
        background: rgba(0, 60, 100, 0.4) !important;
        color: #60a5fa !important;
    }

    .lead-location-id {
        color: #fff !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        letter-spacing: 0.5px !important;
        text-shadow: 0 0 10px rgba(255,255,255,0.3) !important;
    }

    .lead-price-main {
        font-size: 36px !important;
        font-weight: 800 !important;
        color: #38bdf8 !important;
        margin: 15px 0 !important;
        letter-spacing: -1px !important;
        text-shadow: 0 0 20px rgba(56, 189, 248, 0.4) !important;
        position: relative;
        z-index: 2;
    }

    .lead-meta-container {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        margin-bottom: 20px !important;
        position: relative;
        z-index: 2;
    }

    .lead-meta-row {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        color: rgba(255, 255, 255, 0.85) !important;
        font-size: 14px !important;
        font-weight: 500 !important;
    }

    .lead-meta-row i {
        width: 20px !important;
        font-size: 16px !important;
        color: #94a3b8 !important;
    }

    .lead-footer {
        display: flex !important;
        justify-content: flex-end !important;
        margin-top: 15px !important;
        position: relative;
        z-index: 2;
    }

    .unlock-lead-shimmer {
        background: linear-gradient(90deg, #0052cc 0%, #0088ff 100%) !important;
        color: #ffffff !important;
        padding: 10px 24px !important;
        border-radius: 30px !important;
        font-weight: 600 !important;
        font-size: 14px !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
        box-shadow: 
            0 4px 15px rgba(0, 136, 255, 0.4),
            inset 0 4px 8px rgba(255, 255, 255, 0.3),
            inset 0 -4px 8px rgba(0, 0, 0, 0.2) !important;
        text-shadow: 0 1px 2px rgba(0,0,0,0.2) !important;
        position: relative !important;
        overflow: hidden !important;
        z-index: 1 !important;
        transition: all 0.3s ease !important;
    }

    .unlock-lead-shimmer:hover {
        box-shadow: 
            0 6px 20px rgba(0, 136, 255, 0.6),
            inset 0 4px 8px rgba(255, 255, 255, 0.4),
            inset 0 -4px 8px rgba(0, 0, 0, 0.2) !important;
        transform: translateY(-2px) !important;
    }

    .leads-btn-premium {
        background: linear-gradient(135deg, #0f4c81 0%, #082444 100%) !important;
        color: white !important;
        border: 1px solid rgba(0, 150, 255, 0.4) !important;
        border-radius: 30px !important;
        padding: 0 40px !important;
        height: 50px !important;
        font-weight: 600 !important;
        font-size: 14px !important;
        text-transform: uppercase !important;
        letter-spacing: 1.5px !important;
        cursor: pointer !important;
        box-shadow: 0 0 15px rgba(0, 150, 255, 0.4), inset 0 0 10px rgba(0, 150, 255, 0.2) !important;
        transition: all 0.3s ease !important;
        text-decoration: none !important;
        display: block !important;
        margin: 0 auto !important;
        align-items: center !important;
        justify-content: center !important;
        white-space: nowrap !important;
        max-width: fit-content;
        line-height: 50px !important;
    }

    .leads-btn-premium:hover {
        transform: translateY(-2px) scale(1.02);
        box-shadow: 0 0 25px rgba(0, 150, 255, 0.6), inset 0 0 15px rgba(0, 150, 255, 0.3) !important;
        background: linear-gradient(135deg, #135b99 0%, #0c3360 100%) !important;
        border-color: rgba(0, 150, 255, 0.6) !important;
    }

    .marquee-bar {
        background: linear-gradient(to right, #081121, #0a1b32, #081121);
        border: 1px solid rgba(0, 180, 255, 0.4) !important;
        border-radius: 30px;
        padding: 12px 24px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        max-width: max-content;
        margin: 20px auto;
        box-shadow: 0 0 15px rgba(0, 180, 255, 0.2), inset 0 0 10px rgba(0, 180, 255, 0.1);
        color: white;
    }
    .marquee-bar .marquee-left {
        color: #38bdf8;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 1px;
        text-transform: uppercase;
        margin-right: 40px;
    }
    .marquee-bar .marquee-right {
        font-size: 14px;
        font-weight: 600;
    }



    @media (max-width: 991px) {

        .leads-section-inner {

            padding: 0 10px !important;

        }

        .leads-title {

            font-size: 18px !important;

            margin-bottom: 20px !important;

        }

        .leads-search-form {

            flex-direction: column !important;

            gap: 10px !important;

            margin-bottom: 25px !important;

        }



        .leads-scroll-wrapper {

            height: 380px !important;

            margin-bottom: 40px !important;

        }

        /* duplicate .leads-search-input removed */

        .leads-search-glow {

            display: none;

            /* Hide glow on mobile to keep it clean */

        }

        .leads-btn-premium {

            width: auto !important;

            height: 36px !important;
            
            line-height: 36px !important;

            padding: 0 20px !important;

            min-width: 0 !important;

            font-size: 11px !important;

            margin: 0 auto !important;

            border-radius: 18px !important;

            text-align: center !important;
            
            display: inline-flex !important;

            letter-spacing: 0.3px !important;

            box-shadow: 0 0 10px rgba(0, 150, 255, 0.4) !important;

        }

        .leads-card {

            flex-direction: column !important;

            align-items: center !important;

            text-align: center !important;

            gap: 10px !important;

            padding: 15px 10px !important;

        }

        .leads-info {

            padding-right: 0 !important;

            width: 100% !important;

        }

        .leads-summary-line {

            font-size: 14px;

        }

        .leads-detail-line {

            font-size: 12px;

        }

    }

    /* Responsive Adjustments */
    @media (max-width: 991px) {
        .premium-lead-card {
            padding: 8px 12px !important;
            margin-bottom: 10px !important;
        }
        .lead-price-main {
            font-size: 20px !important;
            margin: 4px 0 !important;
        }
        .lead-header {
            margin-bottom: 8px !important;
        }
        .lead-meta-container {
            gap: 6px !important;
            margin-bottom: 8px !important;
        }
        .lead-meta-row {
            font-size: 11px !important;
        }
        .lead-status-badge {
            padding: 3px 8px !important;
            font-size: 9px !important;
            letter-spacing: 0.5px !important;
        }
        .unlock-lead-shimmer {
            padding: 6px 14px !important;
            font-size: 11px !important;
        }
        .lead-location-id {
            font-size: 12px !important;
        }
        .leads-scroll-wrapper {
            height: 380px !important;
        }
    }

    .property__searchAndCategory {

        min-height: 70dvh;

    }

    .property__category {

        width: 70%;

        margin: 0px auto;

    }

    .Property__searchMainWrapper {

        margin: 10px 0px;

    }

    .Property__searchMainWrapper h4 {

        color: #ffffff;

        margin: 10px 0px;

        text-align: center;

        font-size: 35px;

    }

    .search__inputMainWrapper {

        display: flex;

        justify-content: center;

        align-content: center;

        gap: 10px;

        margin: 25px 0px;

    }

    .inputWrapper {

        flex: 1;

        padding: 0px;

        background: transparent !important;

        border-radius: 8px;

        display: flex;

        gap: 0.5rem;

    }

    .inputWrapper input {

        /* width: 100%; */

        padding: 8px 13px;

        border: none;

        outline: none;

        color: #f2f2f2;

        border-radius: 35px !important;

    }

    .inputWrapper input::placeholder {

        color: #FFF !important;

        opacity: 1;

        font-size: 15px;

        font-weight: 400;

    }

    .maxAndMin__inputWrapper {

        display: flex;

        justify-content: center;

        align-items: center;

        gap: 10px;

        flex: 1;

    }

    .searchInput__wrapper {

        display: flex;

        justify-content: center;

    }

    .searchInput__wrapper button {

        padding: 10px 35px;

        background: linear-gradient(135deg, #1E90FF 0%, #0066cc 100%);

        color: #fff;

        border: none;

        outline: none;

        border-radius: 35px;

        font-size: 16px;

        font-weight: 600;

        cursor: pointer;

        box-shadow: 0 4px 15px rgba(30, 144, 255, 0.4);

        transition: all 0.3s ease;

        letter-spacing: 0.5px;

    }

    .searchInput__wrapper button:hover {

        transform: translateY(-2px);

        box-shadow: 0 8px 20px rgba(30, 144, 255, 0.5);

    }

    .featureProperty__mainWrapper {

        min-height: 100dvh;

        display: flex;

        justify-content: center;

        align-items: center;

        padding: 50px 0px;

    }

    .featureProperty__containerWrapper {

        width: 85%;

        display: flex;

        justify-content: center;

        align-items: start;

        gap: 20px;

    }

    .feature__propertyWrapper {

        width: 30%;

        background: #314B4C;

        padding: 15px;

        border-radius: 10px;

        display: grid;

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

        gap: 20px;

    }

    .feature__popertyTitle {

        display: flex;

        justify-content: center;

        align-items: center;

    }

    .feature__popertyTitle h3 {

        color: #fff;

    }

    .feature__propertyCardWrapper {

        min-height: 50dvh;

        width: 100%;

        border-radius: 20px;

        overflow: hidden;

        position: relative;

        /* Premium Gold Gradient Border */
        border-top: 1px solid rgba(235, 216, 176, 0.72) !important;
        border-left: 1px solid rgba(235, 216, 176, 0.50) !important;
        border-right: 1px solid rgba(235, 216, 176, 0.12) !important;
        border-bottom: 1px solid rgba(235, 216, 176, 0.06) !important;

        z-index: 1;

        isolation: isolate;

        transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;

        box-shadow: 
            3px 5px 0 rgba(195, 145, 35, 0.45),
            4px 7px 8px rgba(0, 0, 0, 0.55),
            0 12px 24px rgba(0, 0, 0, 0.45),
            0 5px 10px rgba(0, 0, 0, 0.32),
            0 20px 40px rgba(0, 0, 0, 0.22),
            0 0 28px rgba(235, 216, 176, 0.32),
            inset 0 1px 0 rgba(255, 255, 255, 0.18),
            inset 0 0 18px rgba(235, 216, 176, 0.18) !important;
    }

    /* Rotating galaxy star particles on featured property cards */
    .feature__propertyCardWrapper::after {
         content: "" !important;
         position: absolute !important;
         top: -50% !important;
         left: -50% !important;
         width: 200% !important;
         height: 200% !important;
         background-image: 
             radial-gradient(circle, rgba(255, 255, 255, 0.4) 1px, transparent 1px),
             radial-gradient(circle, rgba(255, 255, 255, 0.2) 1.5px, transparent 1.5px),
             radial-gradient(circle, rgba(235, 216, 176, 0.2) 1px, transparent 1px) !important;
         background-size: 70px 70px, 105px 105px, 84px 84px !important;
         animation: galaxyRotate 80s infinite linear !important;
         pointer-events: none !important;
         z-index: 2 !important;
         opacity: 0.55 !important;
    }

    /* Premium Shimmer for featured property cards */
    .feature__propertyCardWrapper::before {
         content: "" !important;
         position: absolute !important;
         top: -50% !important;
         left: -50% !important;
         width: 200% !important;
         height: 200% !important;
         background: linear-gradient(
             to right,
             rgba(255, 255, 255, 0) 0%,
             rgba(255, 255, 255, 0.12) 50%,
             rgba(255, 255, 255, 0) 100%
         ) !important;
         transform: rotate(45deg);
         animation: luxuryCardShimmer 6s infinite linear !important;
         pointer-events: none !important;
         z-index: 3 !important;
    }

    .feature__propertyCardWrapper:hover {
        transform: translateY(-8px) scale(1.01) !important;
        border-top-color: rgba(235, 216, 176, 0.92) !important;
        border-left-color: rgba(235, 216, 176, 0.72) !important;
        border-right-color: rgba(235, 216, 176, 0.22) !important;
        border-bottom-color: rgba(235, 216, 176, 0.10) !important;
        box-shadow:
            4px 7px 0 rgba(215, 165, 45, 0.58),
            5px 9px 12px rgba(0, 0, 0, 0.65),
            0 18px 36px rgba(0, 0, 0, 0.55),
            0 8px 16px rgba(0, 0, 0, 0.42),
            0 28px 50px rgba(0, 0, 0, 0.28),
            0 0 36px rgba(235, 216, 176, 0.50),
            inset 0 1px 0 rgba(255, 255, 255, 0.26),
            inset 0 0 26px rgba(235, 216, 176, 0.26) !important;
    }

    .feature__propertyCardWrapper img {

        width: 100%;

        height: 100%;

        object-fit: cover;

        filter: brightness(.65);

        transition: all .5s linear;

    }

    /* Ghibli Image Hover Effect */
    .state-card-image-wrapper {
        position: relative;
        display: block;
        width: 100%;
        height: 100%;
    }

    .state-card-main-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: brightness(.65);
        transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .state-card-ghibli-image {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: brightness(1);
        opacity: 0;
        transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Stand-in tile for the few states with no artwork in state/ (Alabama,
       DC). Keeps the card's shape and gradient instead of a broken image. */
    .state-card-placeholder {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        padding: 0 12px;
        text-align: center;
        font-size: 22px;
        font-weight: 600;
        letter-spacing: 1px;
        color: rgba(235, 216, 176, 0.65);
        background:
            radial-gradient(120% 90% at 50% 0%, rgba(235, 216, 176, 0.14), transparent 62%),
            linear-gradient(160deg, #0B2634 0%, #071A25 100%);
    }

    .feature__propertyCardWrapper:hover .state-card-ghibli-image {
        opacity: 1;
        filter: brightness(1);
    }

    .feature__propertyCardWrapper:hover .state-card-main-image {
        opacity: 0;
    }

    .contentWrapper {

        position: absolute;

        top: 0;

        left: 0;

        width: 100%;

        height: 100%;

        padding: 20px;

        display: flex;

        flex-direction: column;

        justify-content: end;

        align-items: center;

        z-index: 10;
        /* Ensure content is above the glow effects */

        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.8) 100%);
        /* Add gradient for text readability */

    }

    .poperty__cardTitle {

        color: #ebd8b0 !important;

        font-size: 20px;

        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8), 0 0 8px rgba(235, 216, 176, 0.25) !important;

    }

    .poperty__cardPara {

        color: #f0f0f0;

        color: 16px;

    }

    .poperty__priceAndBTNWrapper {

        display: flex;

        justify-content: space-between;

        align-items: center;

        margin: 10px 0px;

    }

    .poperty__priceAndBTNWrapper h4 {

        color: #ffffff;

    }

    .poperty__priceAndBTNWrapper button {

        padding: 10px 10px;

        border: none;

        outline: none;

        color: #fff;

        background: #1E90FF;

        border-radius: 6px;

    }

    /* ============================================================
       Professional State / Area Cards (scoped to .state__card)
       Enhanced real-estate style location cards
       ============================================================ */
    .state__card {
        min-height: 0 !important;
        aspect-ratio: 4 / 5;
        cursor: pointer;
    }

    /* Smooth, zoom-on-hover imagery */
    .state__card .state-card-image-wrapper {
        overflow: hidden;
        border-radius: inherit;
    }

    .state__card .state-card-main-image,
    .state__card .state-card-ghibli-image {
        transform: scale(1.02);
        transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1),
                    opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
                    filter 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .state__card:hover .state-card-main-image,
    .state__card:hover .state-card-ghibli-image {
        transform: scale(1.1);
    }

    /* Readability overlay sitting above the image, below content */
    .state__card-overlay {
        position: absolute;
        inset: 0;
        z-index: 5;
        background:
            linear-gradient(180deg, rgba(7, 26, 37, 0) 38%, rgba(7, 26, 37, 0.55) 68%, rgba(4, 14, 20, 0.92) 100%),
            linear-gradient(180deg, rgba(7, 26, 37, 0.28) 0%, rgba(7, 26, 37, 0) 30%);
        pointer-events: none;
        transition: background 0.5s ease;
    }

    .state__card:hover .state__card-overlay {
        background:
            linear-gradient(180deg, rgba(7, 26, 37, 0.05) 28%, rgba(7, 26, 37, 0.6) 62%, rgba(4, 14, 20, 0.95) 100%),
            linear-gradient(180deg, rgba(7, 26, 37, 0.32) 0%, rgba(7, 26, 37, 0) 32%);
    }

    /* Glass "listings count" badge, top-right */
    .state__card-badge {
        position: absolute;
        top: 14px;
        right: 14px;
        z-index: 20;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 7px 12px;
        font-size: 12.5px;
        font-weight: 600;
        letter-spacing: 0.2px;
        color: #fff7e6;
        background: rgba(11, 24, 33, 0.55);
        border: 1px solid rgba(235, 216, 176, 0.45);
        border-radius: 999px;
        backdrop-filter: blur(10px) saturate(120%);
        -webkit-backdrop-filter: blur(10px) saturate(120%);
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.18);
        transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.4s ease;
    }

    .state__card-badge svg {
        width: 15px;
        height: 15px;
        color: #ebd8b0;
        flex: none;
    }

    .state__card:hover .state__card-badge {
        transform: translateY(-2px);
        border-color: rgba(235, 216, 176, 0.85);
    }

    /* Content layer overrides (scoped) */
    .state__card-content {
        padding: 22px 20px 24px !important;
        background: none !important;
        justify-content: flex-end !important;
        align-items: stretch !important;
    }

    .state__card-meta {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .state__card-location {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        font-size: 11.5px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 1.4px;
        color: rgba(235, 216, 176, 0.85);
        margin-bottom: 2px;
    }

    .state__card-location svg {
        width: 13px;
        height: 13px;
        flex: none;
    }

    .state__card .poperty__cardTitle {
        font-size: 26px !important;
        font-weight: 700;
        line-height: 1.15;
        margin: 0 0 2px;
        letter-spacing: 0.2px;
    }

    .state__card .poperty__cardPara {
        color: #d4e2ea !important;
        font-size: 14px !important;
        margin: 0;
        opacity: 0.92;
    }

    /* CTA: hidden hint that slides in on hover, always tappable */
    .state__card-cta {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        align-self: flex-start;
        margin-top: 14px;
        padding: 10px 18px;
        font-size: 14px;
        font-weight: 600;
        color: #071a25;
        text-decoration: none;
        background: linear-gradient(135deg, #f4e4ba 0%, #ebd8b0 55%, #d9c190 100%);
        border-radius: 999px;
        box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.5);
        transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease, opacity 0.45s ease;
        opacity: 0;
        transform: translateY(10px);
    }

    .state__card-cta svg {
        width: 17px;
        height: 17px;
        transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .state__card:hover .state__card-cta,
    .state__card:focus-within .state__card-cta {
        opacity: 1;
        transform: translateY(0);
    }

    .state__card-cta:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5), 0 0 18px rgba(235, 216, 176, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
    }

    .state__card-cta:hover svg {
        transform: translateX(4px);
    }

    /* Touch / no-hover devices: reveal CTA so it stays usable */
    @media (hover: none) {
        .state__card-cta {
            opacity: 1;
            transform: none;
        }
    }

    /* Restore the gold 3D border/depth on mobile for the state cards.
       The global GPU-crash-prevention block (top of file) flattens
       .feature__propertyCardWrapper shadows on <=1024px / touch — but a
       solid 0-blur offset shadow is GPU-cheap (no animation, no blur stack),
       so we re-add just the 3D edge here with a higher-specificity selector. */
    @media (max-width: 1024px), (hover: none) {
        .Neighborhoods__cardsMainWrapper .state__card {
            border-top: 1px solid rgba(235, 216, 176, 0.72) !important;
            border-left: 1px solid rgba(235, 216, 176, 0.50) !important;
            border-right: 1px solid rgba(235, 216, 176, 0.18) !important;
            border-bottom: 1px solid rgba(235, 216, 176, 0.08) !important;
            box-shadow:
                3px 5px 0 rgba(195, 145, 35, 0.45),
                0 8px 20px rgba(0, 0, 0, 0.45),
                0 0 16px rgba(235, 216, 176, 0.20),
                inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
        }
    }

    /* ============================================================
       Professional Featured Property Cards (scoped to .fp__card)
       Mirrors state card quality — location label, bed/bath chips,
       price + animated CTA. Does not affect other feature__propertyCardWrapper uses.
       ============================================================ */
    .fp__card {
        aspect-ratio: 4 / 5;
        cursor: pointer;
    }

    .fp__card-img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: brightness(0.65);
        transform: scale(1.02);
        transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1),
                    filter 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .fp__card:hover .fp__card-img {
        transform: scale(1.1);
        filter: brightness(0.55);
    }

    .fp__card-overlay {
        position: absolute;
        inset: 0;
        z-index: 5;
        background:
            linear-gradient(180deg, rgba(7, 26, 37, 0) 35%, rgba(7, 26, 37, 0.55) 65%, rgba(4, 14, 20, 0.94) 100%),
            linear-gradient(180deg, rgba(7, 26, 37, 0.30) 0%, rgba(7, 26, 37, 0) 30%);
        pointer-events: none;
        transition: background 0.5s ease;
    }

    .fp__card:hover .fp__card-overlay {
        background:
            linear-gradient(180deg, rgba(7, 26, 37, 0.06) 25%, rgba(7, 26, 37, 0.62) 60%, rgba(4, 14, 20, 0.97) 100%),
            linear-gradient(180deg, rgba(7, 26, 37, 0.34) 0%, rgba(7, 26, 37, 0) 30%);
    }

    .fp__card-content {
        padding: 20px 18px 22px !important;
        background: none !important;
        justify-content: flex-end !important;
        align-items: stretch !important;
    }

    .fp__card-meta {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 5px;
    }

    .fp__card-location {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 1.3px;
        color: rgba(235, 216, 176, 0.85);
        margin-bottom: 1px;
    }

    .fp__card-location svg {
        width: 12px;
        height: 12px;
        flex: none;
    }

    .fp__card .poperty__cardTitle {
        font-size: 20px !important;
        font-weight: 700;
        line-height: 1.2;
        margin: 0;
        letter-spacing: 0.1px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Bed / Bath / Type chips */
    .fp__card-chips {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin-top: 2px;
    }

    .fp__chip {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 4px 9px;
        font-size: 11.5px;
        font-weight: 600;
        color: #e8f4ff;
        background: rgba(255, 255, 255, 0.10);
        border: 1px solid rgba(255, 255, 255, 0.18);
        border-radius: 999px;
    }

    .fp__chip svg {
        width: 12px;
        height: 12px;
        color: #ebd8b0;
        flex: none;
    }

    /* Footer: price left, CTA right */
    .fp__card-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        margin-top: 10px;
    }

    .fp__card-price {
        font-size: 20px;
        font-weight: 700;
        color: #ebd8b0;
        letter-spacing: 0.2px;
        text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
        white-space: nowrap;
    }

    .fp__card-price small {
        font-size: 12px;
        font-weight: 500;
        color: rgba(235, 216, 176, 0.72);
    }

    .fp__card-cta {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 9px 16px;
        font-size: 13px;
        font-weight: 600;
        color: #071a25;
        text-decoration: none;
        background: linear-gradient(135deg, #f4e4ba 0%, #ebd8b0 55%, #d9c190 100%);
        border-radius: 999px;
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.5);
        transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                    box-shadow 0.4s ease,
                    opacity 0.45s ease;
        opacity: 0;
        transform: translateY(8px);
        white-space: nowrap;
    }

    .fp__card-cta svg {
        width: 15px;
        height: 15px;
        transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .fp__card:hover .fp__card-cta,
    .fp__card:focus-within .fp__card-cta {
        opacity: 1;
        transform: translateY(0);
    }

    .fp__card-cta:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5), 0 0 16px rgba(235, 216, 176, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.6);
    }

    .fp__card-cta:hover svg {
        transform: translateX(4px);
    }

    @media (hover: none) {
        .fp__card-cta {
            opacity: 1;
            transform: none;
        }
    }

    /* Restore 3D border on mobile for featured property cards */
    @media (max-width: 1024px), (hover: none) {
        .FP__cardsMainWrapper .fp__card {
            border-top: 1px solid rgba(235, 216, 176, 0.72) !important;
            border-left: 1px solid rgba(235, 216, 176, 0.50) !important;
            border-right: 1px solid rgba(235, 216, 176, 0.18) !important;
            border-bottom: 1px solid rgba(235, 216, 176, 0.08) !important;
            box-shadow:
                3px 5px 0 rgba(195, 145, 35, 0.45),
                0 8px 20px rgba(0, 0, 0, 0.45),
                0 0 16px rgba(235, 216, 176, 0.20),
                inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
        }
    }

    .feature__rightMainWrapper {

        flex: 1;

    }

    .feature__topWrapper {

        background: #314B4C;

        padding: 15px;

        border-radius: 10px;

        display: grid;

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

        gap: 15px;

    }

    .Fcard__wrapper {

        border-radius: 20px;

        padding: 20px;

        cursor: pointer;

        transition: all .4s linear;

    }

    .Fcard__wrapper:hover {

        background: #1F2C2D;

    }

    .Fcard__imageWrapper {

        width: 100%;

        height: 20dvh;

        border-radius: 10px;

        overflow: hidden;

    }

    .Fcard__imageWrapper img {

        width: 100%;

        height: 100%;

        object-fit: cover;

    }

    .Fcard__contentWrapper {

        margin: 10px 0px;

    }

    .Fcard__contentWrapper h4 {

        color: #fff;

    }

    .Fcard__contentWrapper p {

        color: #f0f0f0;

    }

    .Neighborhoods__wrapper {

        background: #314B4C;

        padding: 15px;

        border-radius: 10px;

        margin: 20px 0px;

    }

    .Neighborhoods__wrapper .heading {

        color: #fff;

        margin: 20px 0px;

    }

    .feature__neighborWrapper {

        display: grid;

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

        gap: 10px;

    }

    @media(max-width:640px) {

        .houseBe__heroMainWrapper {

            padding: 100px 0px;

        }

        .houseBe__heroContentMianWrapper {

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

            width: 100%;

        }

        .housebe__cardContentWrapper h3 {

            font-size: 22px;

            line-height: 25px !important;

        }

        .property__category {

            width: 100%;

            margin: 0px auto;

        }

        .housebe__propertyCategoriesWrapper {

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

            gap: 0px;

        }

        .cardBtn__iconWrapper {

            width: 100%;

        }

        .property__searchAndCategory {

            padding: 90px 0px 10px 0px !important;

            min-height: auto !important;

        }

        .housebe__propertyCategoriesWrapper {

            width: 100%;

        }

        .card__BTNs {

            margin: 30px 0px;

        }

        .btn__paraText {

            text-align: center !important;

        }

        .search__inputMainWrapper {

            flex-direction: column;

            gap: 15px;

        }

        .searchInput__wrapper button {

            width: 100%;

            height: 50px;

        }

        .feature__propertyWrapper {

            display: none;

        }

        .feature__topWrapper {

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

        }

        .featureProperty__containerWrapper {

            width: 100%;

        }

        .Fcard__imageWrapper {

            height: 30dvh;

        }

        .feature__neighborWrapper {

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

        }

        .svg__logo {

            width: 17.5dvw;

            height: 17.5dvw;

        }

    }

    @media(min-width:1024px) {

        .houseBe__heroContentMianWrapper {

            width: 90% !important;

        }

        .mainWrapper__propertyCards {

            display: grid;

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

            gap: 10px;

            width: 100%;

        }

    }

    @media(min-width:1280px) {

        .mainWrapper__propertyCards {

            display: grid;

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

            gap: 10px;

            width: 100%;

        }

        .FP__cardsMainWrapper,

        .Neighborhoods__cardsMainWrapper {

            display: grid;

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

            gap: 10px;

            width: 100%;

        }

        .houseBe__heroContentMianWrapper {

            width: 90% !important;

        }

        .housebe__cardContentWrapper h3 {

            font-size: 25px;

            line-height: 35px;

        }

        .card__buttonWrapper button {

            font-size: 13px;

        }

        .property__searchAndCategory {

            display: flex;

            justify-content: center;

            align-items: center;

            min-height: 40dvh;

        }

        .property__category {

            width: 80%;

            margin: 0px auto;

        }

        .card__BTNs {

            display: flex;

            flex-direction: column;

            justify-content: center;

            align-items: center;

            gap: 10px;

        }

        .card__BTNs .cardBtn__iconWrapper {

            width: 100% !important;

        }

        .propertyType__wrapper {

            width: 100%;

            margin: 0 auto !important;

        }

        .tf-container .row {

            margin-left: auto !important;

            margin-right: auto !important;

        }

    }

    @media(min-width:1536px) {

        .mainWrapper__propertyCards {

            display: grid;

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

            gap: 10px;

            width: 100%;

        }

        .FP__cardsMainWrapper,

        .Neighborhoods__cardsMainWrapper {

            display: grid;

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

            gap: 10px;

            width: 100%;

        }

        .houseBe__heroContentMianWrapper {

            width: 90% !important;

        }

    }

    .houseBe__heroCardWrapper {

        position: relative;

        overflow: hidden;

    }

    .shine__divv {

        position: absolute;

        top: 0;

        left: 0;

        height: 100%;

        width: 10%;

        background: #FFF;

        background: linear-gradient(91deg, rgba(255, 255, 255, 0.54) 0%, rgba(255, 255, 255, 0.68) 100%);

        opacity: 0;

        filter: blur(2px);

        z-index: 1;

        transform: skew(-50deg) translateX(-250px);

        transition: all .6s ease-in-out;

    }

    .houseBe__heroCardWrapper:hover .shine__divv {

        transform: skew(-50deg) translateX(85dvh);

        opacity: .6;

    }

    .property__typeMainWrapper {

        min-height: 100dvh;

        background: radial-gradient(1000px 600px at 50% 50%, rgba(235, 216, 176, 0.08), transparent 70%),
            linear-gradient(180deg, #0B2634, #071A25) !important;

        display: flex;

        justify-content: center;

        align-items: center;

    }

    .property__typeCardMainWrapper {

        width: 80%;

        display: flex;

        justify-content: center;

        align-items: center;

        flex-direction: column;

        gap: 50px;

    }

    .property__typeHeadingWrapper {

        display: flex;

        flex-direction: column;

        gap: 10px;

        justify-content: center;

        align-items: center;

    }

    - .property__typeHeadingWrapper h4 {

        color: #fff;

        font-size: 40px;

        line-height: 50px;

    }

    .property__typeHeadingWrapper p {

        color: #f2f2f2;

    }

    .mainWrapper__propertyCards {

        display: grid;

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

        gap: 10px;

        width: 100%;

    }

    .propertyCard__wrapper {

        height: 30dvh;

        border-radius: 20px;

        position: relative;

        overflow: hidden;

        /* Premium Gold Gradient Border */
        border-top: 1px solid rgba(235, 216, 176, 0.72) !important;
        border-left: 1px solid rgba(235, 216, 176, 0.50) !important;
        border-right: 1px solid rgba(235, 216, 176, 0.12) !important;
        border-bottom: 1px solid rgba(235, 216, 176, 0.06) !important;

        transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;

        z-index: 1;

        isolation: isolate;

        box-shadow: 
            3px 5px 0 rgba(195, 145, 35, 0.45),
            4px 7px 8px rgba(0, 0, 0, 0.55),
            0 12px 24px rgba(0, 0, 0, 0.45),
            0 5px 10px rgba(0, 0, 0, 0.32),
            0 20px 40px rgba(0, 0, 0, 0.22),
            0 0 28px rgba(235, 216, 176, 0.32),
            inset 0 1px 0 rgba(255, 255, 255, 0.18),
            inset 0 0 18px rgba(235, 216, 176, 0.18) !important;
    }

    /* Rotating galaxy star particles on property type cards */
    .propertyCard__wrapper::after {
         content: "" !important;
         position: absolute !important;
         top: -50% !important;
         left: -50% !important;
         width: 200% !important;
         height: 200% !important;
         background-image: 
             radial-gradient(circle, rgba(255, 255, 255, 0.4) 1px, transparent 1px),
             radial-gradient(circle, rgba(255, 255, 255, 0.2) 1.5px, transparent 1.5px),
             radial-gradient(circle, rgba(235, 216, 176, 0.2) 1px, transparent 1px) !important;
         background-size: 70px 70px, 105px 105px, 84px 84px !important;
         animation: galaxyRotate 80s infinite linear !important;
         pointer-events: none !important;
         z-index: 2 !important;
         opacity: 0.55 !important;
    }

    /* Premium Shimmer for property type cards */
    .propertyCard__wrapper::before {
         content: "" !important;
         position: absolute !important;
         top: -50% !important;
         left: -50% !important;
         width: 200% !important;
         height: 200% !important;
         background: linear-gradient(
             to right,
             rgba(255, 255, 255, 0) 0%,
             rgba(255, 255, 255, 0.12) 50%,
             rgba(255, 255, 255, 0) 100%
         ) !important;
         transform: rotate(45deg);
         animation: luxuryCardShimmer 6s infinite linear !important;
         pointer-events: none !important;
         z-index: 3 !important;
    }

    .propertyCard__wrapper:hover {
        transform: translateY(-8px) scale(1.01) !important;
        border-top-color: rgba(235, 216, 176, 0.92) !important;
        border-left-color: rgba(235, 216, 176, 0.72) !important;
        border-right-color: rgba(235, 216, 176, 0.22) !important;
        border-bottom-color: rgba(235, 216, 176, 0.10) !important;
        box-shadow:
            4px 7px 0 rgba(215, 165, 45, 0.58),
            5px 9px 12px rgba(0, 0, 0, 0.65),
            0 18px 36px rgba(0, 0, 0, 0.55),
            0 8px 16px rgba(0, 0, 0, 0.42),
            0 28px 50px rgba(0, 0, 0, 0.28),
            0 0 36px rgba(235, 216, 176, 0.50),
            inset 0 1px 0 rgba(255, 255, 255, 0.26),
            inset 0 0 26px rgba(235, 216, 176, 0.26) !important;
    }

    /* Premium Gold Button for property type cards */
    .premium-button-gold {
        background: linear-gradient(135deg, #ebd8b0 0%, #d3bf98 100%) !important;
        color: #061121 !important;
        border: 1px solid rgba(235, 216, 176, 0.4) !important;
        box-shadow: 0 4px 15px rgba(235, 216, 176, 0.2), inset 0 0 10px rgba(235, 216, 176, 0.1) !important;
    }

    .premium-button-gold:hover {
        background: linear-gradient(135deg, #f7e6c4 0%, #e0cda7 100%) !important;
        box-shadow: 0 6px 20px rgba(235, 216, 176, 0.35) !important;
        color: #061121 !important;
    }

    .propertyCard__wrapper img {

        width: 100%;

        height: 100%;

        object-fit: cover;

    }

    .cardOverlayDiv {

        position: absolute;

        top: 0;

        left: 0;

        height: 100%;

        width: 100%;

        background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 50%, rgba(0, 0, 0, 0.95) 100%);

        padding: 20px 30px;

        display: flex;

        justify-content: center;

        align-items: flex-end;

        flex-direction: column;

        gap: 8px;

        backdrop-filter: blur(0px);

        z-index: 4 !important;

    }

    .cardOverlayDiv h3 {

        color: #ebd8b0 !important;

        font-size: 22px !important;

        line-height: 1.2 !important;

        text-align: right !important;

        font-weight: 600;

        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8), 0 0 10px rgba(235, 216, 176, 0.3) !important;

        margin: 0;

    }

    .cardOverlayDiv p {

        color: #e0e0e0;

        font-size: 14px;

        text-align: right;

        margin: 0;

    }

    .cardOverlayDiv button {

        padding: 8px 30px;

        color: #fff;

        font-size: 16px;

        border-radius: 50px;

        background: linear-gradient(90deg, #1E90FF 0%, #00BFFF 100%);

        opacity: 1;

        transform: none;

        border: none;

        box-shadow: 0 0 10px rgba(30, 144, 255, 0.5);

        cursor: pointer;

        font-weight: 600;

        margin-top: 15px;

        text-transform: capitalize;

    }

    @media(max-width:640px) {
        .propertyCard__wrapper {
            height: 200px !important;
            /* Adjust height for mobile cards to look like the screenshot */
        }

        .cardOverlayDiv h3 {
            font-size: 18px !important;
        }
    }

    .cardOverlayDiv button:hover {
        box-shadow: 0 6px 20px rgba(30, 144, 255, 0.6);
    }

    /* ============================================================
       Property Type Cards — scoped to .ptype__card
       ============================================================ */
    .ptype__card {
        cursor: pointer;
    }

    .ptype__card-img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: brightness(0.65);
        transform: scale(1.03);
        transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1), filter 0.6s ease;
    }

    .ptype__card:hover .ptype__card-img {
        transform: scale(1.12);
        filter: brightness(0.5);
    }

    .ptype__card-overlay {
        position: absolute;
        inset: 0;
        z-index: 5;
        background: linear-gradient(180deg, rgba(7, 26, 37, 0) 30%, rgba(4, 14, 20, 0.92) 100%);
        pointer-events: none;
        transition: background 0.5s ease;
    }

    .ptype__card:hover .ptype__card-overlay {
        background: linear-gradient(180deg, rgba(7, 26, 37, 0.08) 20%, rgba(4, 14, 20, 0.97) 100%);
    }

    /* Listings count badge top-right */
    .ptype__card-badge {
        position: absolute;
        top: 12px;
        right: 12px;
        z-index: 20;
        padding: 5px 11px;
        font-size: 11.5px;
        font-weight: 600;
        letter-spacing: 0.2px;
        color: #fff7e6;
        background: rgba(11, 24, 33, 0.55);
        border: 1px solid rgba(235, 216, 176, 0.45);
        border-radius: 999px;
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        box-shadow: 0 4px 14px rgba(0,0,0,0.3);
        transition: border-color 0.4s ease, transform 0.4s ease;
    }

    .ptype__card:hover .ptype__card-badge {
        border-color: rgba(235, 216, 176, 0.85);
        transform: translateY(-2px);
    }

    /* Override .cardOverlayDiv for ptype__card — z-index MUST beat overlay's z-index:5 */
    .ptype__card .ptype__card-content {
        background: none !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: flex-end !important;
        padding: 18px 20px 22px !important;
        z-index: 10 !important;   /* above .ptype__card-overlay (z-index:5) */
    }

    .ptype__card-meta {
        display: flex;
        flex-direction: column;
        gap: 4px;
        align-items: flex-start;
        width: 100%;
    }

    .ptype__card-eyebrow {
        font-size: 10.5px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1.4px;
        color: #ebd8b0;
        text-shadow: 0 1px 6px rgba(0,0,0,0.8);
        margin-bottom: 2px;
    }

    .ptype__card .ptype__card-content h3 {
        text-align: left !important;
        font-size: 20px !important;
        line-height: 1.25 !important;
        margin: 0 0 10px !important;
        color: #ffffff !important;
        text-shadow: 0 2px 10px rgba(0,0,0,0.9), 0 1px 3px rgba(0,0,0,0.7) !important;
    }

    .ptype__card-cta {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 9px 18px;
        font-size: 13px;
        font-weight: 700;
        color: #071a25;
        text-decoration: none;
        background: linear-gradient(135deg, #f4e4ba 0%, #ebd8b0 55%, #d9c190 100%);
        border-radius: 999px;
        box-shadow: 0 6px 18px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.5);
        transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease, opacity 0.35s ease;
        opacity: 1;
        transform: translateY(0);
    }

    .ptype__card-cta svg {
        width: 15px;
        height: 15px;
        transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .ptype__card:hover .ptype__card-cta {
        box-shadow: 0 10px 24px rgba(0,0,0,0.5), 0 0 16px rgba(235,216,176,0.45);
    }

    .ptype__card:hover .ptype__card-cta svg {
        transform: translateX(4px);
    }

    @media (max-width: 1024px), (hover: none) {
        .mainWrapper__propertyCards .ptype__card {
            border-top: 1px solid rgba(235, 216, 176, 0.72) !important;
            border-left: 1px solid rgba(235, 216, 176, 0.50) !important;
            border-right: 1px solid rgba(235, 216, 176, 0.18) !important;
            border-bottom: 1px solid rgba(235, 216, 176, 0.08) !important;
            box-shadow:
                3px 5px 0 rgba(195, 145, 35, 0.45),
                0 8px 20px rgba(0, 0, 0, 0.45),
                0 0 16px rgba(235, 216, 176, 0.20),
                inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
        }
    }

    /* .propertyCard__wrapper:hover .cardOverlayDiv button {

        opacity: 1;

        transform: translateY(0dvh);

    } REMOVE OLD HOVER EFFECT */

    .FeaturedProperty__mainWrapper {

        min-height: 100dvh;

        background: radial-gradient(1000px 600px at 50% 50%, rgba(235, 216, 176, 0.08), transparent 70%),
            linear-gradient(180deg, #071A25, #0B2634) !important;

        display: flex;

        justify-content: center;

        align-items: center;

    }

    .main__contentWrapperFP {

        width: 80%;

        display: flex;

        flex-direction: column;

        justify-content: center;

        align-content: center;

        gap: 50px;

    }

    .FP__topHeadingWrapper {

        display: flex;

        justify-content: center;

        align-items: center;

        flex-direction: column;

        gap: 10px;

    }

    .FP__topHeadingWrapper h3 {

        color: #fff;

        font-size: 40px;

        line-height: 50px;

    }

    .FP__topHeadingWrapper p {

        color: #f2f2f2;

    }

    .FP__cardsMainWrapper {

        display: grid;

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

        gap: 10px;

        width: 100%;

    }

    .neighborhood__mainWrapper {

        min-height: 100dvh;

        /* background: #1F2C2D !important; */

        display: flex;

        justify-content: center;

        align-items: center;

    }

    .Neighborhoods__contentWrapper {

        width: 80%;

        margin: 0 auto;

    }

    .Neighborhoods__topHeadingWrapper {

        display: flex;

        flex-direction: column;

        justify-content: center;

        align-items: center;

        gap: 10px;

    }

    .Neighborhoods__topHeadingWrapper h4 {

        color: #fff;

        font-size: 40px;

        line-height: 50px;

    }

    .Neighborhoods__topHeadingWrapper p {

        color: #f2f2f2;

    }

    .Neighborhoods__cardsMainWrapper {

        display: grid;

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

        gap: 10px;

        margin: 50px 0px;

        width: 100%;

    }

    @media(max-width:640px) {

        .housebe__cardContentWrapper p {

            font-size: 3.5dvw !important;

            line-height: 4dvw !important;

        }

        .card__buttonWrapper {

            flex-direction: column !important;

            width: 70%;

            margin: 25px auto !important;

        }

        .card__buttonWrapper button {

            /*flex-direction: column !important;*/

            width: 100%;

        }

        .property__typeCardMainWrapper,

        .main__contentWrapperFP,

        .Neighborhoods__contentWrapper {

            width: 92% !important;

            margin: 0 auto;

        }

        .mainWrapper__propertyCards {

            display: grid;

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

            gap: 10px;

            width: 100%;

        }

        .FP__cardsMainWrapper,

        .Neighborhoods__cardsMainWrapper {

            display: grid;

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

            gap: 10px;

            width: 100%;

        }

        .FP__topHeadingWrapper h3 {

            color: #fff;

            font-size: 31px;

            line-height: 40px;

        }

        .Neighborhoods__topHeadingWrapper h4 {

            color: #fff;

            font-size: 30px;

            line-height: 40px;

            text-align: center;

        }

        .neighborhood__mainWrapper,

        .property__typeMainWrapper,

        .FeaturedProperty__mainWrapper {

            padding: 50px 0px;

        }

    }

    .badgeWrapper {

        position: absolute;

        top: 0;

        left: 0;

        z-index: 50;

        padding: 20px;

        display: flex;

        align-items: center;

        justify-content: center;

        gap: 10px;

    }

    .badgeWrapper span {

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

        color: #fff;

        font-size: 12px;

        font-weight: 500;

        padding: 6px 20px;

        border-radius: 20px;

    }

    .badgeWrapper .active {

        background: #1E90FF;

    }

    .quickActions__mainWrapper {

        position: absolute;

        top: 38%;

        left: 0;

        width: 100%;

        display: flex;

        justify-content: center;

        align-items: center;

        gap: 10px;

        z-index: 50;

        opacity: 0;

        transition: all .5s linear;

    }

    .quickActions__mainWrapper button {

        height: 40px;

        width: 40px;

        border-radius: 50px;

        border: none;

        outline: none;

        display: flex;

        justify-content: center;

        align-items: center;

        cursor: pointer;

        background: #fff;

    }

    .feature__propertyCardWrapper:hover .quickActions__mainWrapper {

        opacity: 1;

    }

    .feature__propertyCardWrapper:hover img {

        filter: brightness(.4);

    }

    .bp {

        background: #FFF;

        padding: 10px 10px;

        border-radius: 10px;

        line-height: 10px;

    }

    @media(min-width:640px) and (max-width:1023px) {

        .houseBe__heroContentMianWrapper {

            width: 70%;

            display: grid;

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

            gap: 20px;

        }

        .FilterTop {

            margin-top: 14% !important;

            min-height: 10dvh !important;

        }

        .search__inputMainWrapper {

            display: flex;

            justify-content: center;

            align-content: center;

            gap: 10px;

            margin: 25px 0px;

            flex-direction: column;

        }

        .search__inputMainWrapper button {

            width: 100% !important;

            padding: 20px 20px;

        }

        .houseBe__heroCardWrapper {

            height: 60vh !important;

        }

        .housebe__cardContentWrapper p {

            font-size: 2.5dvw !important;

            line-height: normal !important;

        }

        .housebe__cardContentWrapper h3 {

            font-size: 20px !important;

            line-height: 25px !important;

        }

        .housebe__heroCardImgWrapper {

            height: 30dvh !important;

        }

        .property__category {

            width: 90% !important;

            margin: 0px auto;

        }

        .property__searchAndCategory {

            min-height: 44dvh !important;

            padding: 50px 0px !important;

        }

        .btn__paraText {

            font-size: 16px !important;

        }

        .housebe__propertyCategoriesWrapper {

            width: 100% !important;

            margin: 0px auto;

            display: grid;

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

            gap: 10px;

        }

        .property__typeCardMainWrapper {

            width: 100% !important;

            display: flex;

            justify-content: center;

            align-items: center;

            flex-direction: column;

            gap: 50px;

        }

        .mainWrapper__propertyCards {

            display: grid;

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

            gap: 10px;

            width: 100%;

        }

        .main__contentWrapperFP {

            width: 100% !important;

            display: flex;

            flex-direction: column;

            justify-content: center;

            align-content: center;

            gap: 50px;

        }

        .FeaturedProperty__mainWrapper {

            min-height: 100dvh;

            background: #1F2C2D !important;

            display: flex;

            justify-content: center;

            align-items: center;

            padding: 70px 0px !important;

        }

        .FP__cardsMainWrapper {

            display: grid;

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

            gap: 10px;

            width: 100%;

        }

        .Neighborhoods__contentWrapper {

            width: 100% !important;

            margin: 0 auto;

        }

        .Neighborhoods__cardsMainWrapper {

            display: grid;

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

            gap: 10px;

            margin: 50px 0px;

            width: 100%;

        }

        .feature__propertyCardWrapper {

            min-height: 40dvh !important;

            width: 100%;

            border-radius: 10px;

            overflow: hidden;

            position: relative;

        }

    }

    @media(max-width:640px) {

        .property-card {

            width: 350px !important;

        }

        .feature {

            width: 44% !important;

        }

    }

    .card__BTNs {

        cursor: auto !important;

    }

    .svg__logoFooter {

        width: 27dvw !important;

        height: 27dvw !important;

    }

    .fastEfficient__mainWrapper {

        width: 100% !important;

        display: flex;

        justify-content: center;

        align-items: center;

        padding: 40px 0px
    }

    .cardGrid__mainWrapper {

        width: 100%;

        display: grid;

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

        gap: 20px;

    }

    .cardContent__mainWrapper {

        display: flex;

        justify-content: center;

        align-items: center;

        gap: 10px:
    }

    @media(max-width:640px) {

        .Neighborhoods__topHeadingWrapper p {

            text-align: center;

        }

        .houseBe__heroCardWrapper {

            height: 100%;

        }

        .FilterTop {

            margin-top: 20%;

        }

        .houseBe__heroMainWrapper {

            padding: 10px 0px !important;

        }

        .FilterTop h4 {

            display: none;

        }

    }

    .FilterTop h4 {

        display: none;

    }

    .FilterTop {

        margin-top: 5%;

        min-height: 10dvh;

    }

    .houseBe__heroMainWrapper {

        padding: 10px 0px !important;

    }

    .cardBtn__iconWrapper i {

        transition: all .4s ease-in-out;

    }

    .card__BTNs:hover .cardBtn__iconWrapper i {

        color: #1E90FF !important;

        scale: 1.1;

    }

    .houseBe__heroMainWrapper {

        min-height: 75dvh !important;

    }

    .houseBe__heroContentMianWrapper {

        padding: 0px 0px !important;

    }

    /* foreclosures */

    .foreclo {

        background: #314b4c;

        border-radius: 20px;

        padding: 40px;

        width: 100%;

        max-width: 100%;

        position: relative;

        margin-top: 50px;

    }

    .form-group {

        border: none !important;

    }

    .title {

        color: #FFF;

        font-size: 22px;

        font-weight: 600;

        text-align: left;

        margin-bottom: 20px;

    }

    .login-btn {

        background: #1976d2;

        color: white;

        padding: 12px 30px;

        border: none;

        border-radius: 8px;

        font-size: 1.1rem;

        font-weight: 600;

        cursor: pointer;

        transition: all 0.3s ease;

    }

    .login-btn:hover {

        background: #1565c0;

        transform: translateY(-2px);

        box-shadow: 0 5px 15px rgba(25, 118, 210, 0.3);

    }

    .subtitle {

        color: #666;

        font-size: 1.2rem;

        margin-bottom: 30px;

        text-align: left;

    }

    .form-control:focus {

        background: white;

        box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);

    }

    .form-control::placeholder {

        color: #FFF !important;

        font-weight: 400 !important;

        font-size: 15px !important;

    }

    .select-wrapper {

        position: relative;

    }

    .select-control {

        appearance: none;

        background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");

        background-repeat: no-repeat;

        background-position: right 20px center;

        background-size: 20px;

        cursor: pointer;

        font-size: 15px;

    }

    .select-control:focus {

        color: #333;

    }

    .divider {

        text-align: center;

        margin: 10px 0;

        position: relative;

    }

    .divider-text {

        padding: 0 20px;

        color: #b7b4b4;

        font-size: 14px;

        font-weight: 300;

    }

    .search-btn {

        width: 100%;

        background: #1E90FF;

        color: white;

        padding: 18px;

        border: none;

        border-radius: 12px;

        font-size: 1.5rem;

        font-weight: 400;

        cursor: pointer;

        transition: all 0.3s ease;

        text-transform: capitalize;

        letter-spacing: 1px;

    }

    .search-btn:hover {

        background: #1E90FF;

        transform: translateY(-2px);

        box-shadow: 0 10px 25px rgba(76, 175, 80, 0.3);

    }

    .search-btn:active {

        transform: translateY(0);

    }

    @media (max-width: 600px) {

        .foreclo {

            padding: 30px 20px;

            margin: 10px;

        }

        .title {

            font-size: 2.5rem;

        }

        .title2 {

            font-size: 2rem !important;

        }

        .search-btn {

            padding: 15px;

            font-size: 1.1rem;

        }

        .form-control {

            margin-bottom: 10px !important;

        }

        .divider {

            margin: 15px 0px;

        }



        .lead-s-button {

            height: 40px !important;

        }

    }

    /* Subtle animations */

    .container {

        animation: slideIn 0.6s ease-out;

    }

    @keyframes slideIn {

        from {

            opacity: 0;

            transform: translateY(30px);

        }

        to {

            opacity: 1;

            transform: translateY(0);

        }

    }

    .form-control:focus {

        animation: focusPulse 0.3s ease-out;

    }

    @keyframes focusPulse {

        0% {

            transform: scale(1);

        }

        50% {

            transform: scale(1.02);

        }

        100% {

            transform: scale(1);

        }

    }

    /* auto scrolling leads */

    .scroll-container,

    .lending-scroll {

        height: 250px;

        /* Adjust based on row height */

        overflow: hidden;

        position: relative;

        /* border: 1px solid #ccc; */

        border-radius: 10px;

        padding: 0px 20px;

    }

    .scroll-list,

    .lending-list {

        margin: 0;

        padding: 0;

        list-style: none;

        position: relative;

    }

    .scroll-list li,

    .lending-list li {

        padding: 15px;

        font-size: 15px;

        border-bottom: 1px solid #314b4c;

        background: #11242b;

        color: #FFF;

        font-weight: 300 !important;

    }

    .leadoverlay {

        position: fixed;

        top: 0;

        left: 0;

        width: 100%;

        height: 100%;

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

        backdrop-filter: blur(5px);

        display: flex;

        align-items: center;

        justify-content: center;

        visibility: hidden;

        opacity: 0;

        transition: all 0.3s ease;

        z-index: 99999;

    }

    .leadoverlay .popup {

        background:
            radial-gradient(ellipse at top left, rgba(59, 130, 246, 0.18) 0%, transparent 55%),
            radial-gradient(ellipse at bottom right, rgba(120, 80, 220, 0.14) 0%, transparent 55%),
            linear-gradient(160deg, rgba(14, 23, 48, 0.96) 0%, rgba(6, 12, 28, 0.96) 100%);

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

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

        border-radius: 24px;

        padding: 28px 24px;

        width: 100%;

        max-width: 640px;

        height: auto;

        max-height: 88vh;

        position: relative;

        transform: scale(0.92);

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

        box-shadow:
            0 25px 60px -12px rgba(0, 0, 0, 0.65),
            0 0 40px rgba(59, 130, 246, 0.15),
            inset 0 1px 0 rgba(255, 255, 255, 0.08);

        overflow-y: auto;

        overflow-x: hidden;

        box-sizing: border-box;

        margin: 16px;

    }

    /* Premium scrollbar for the modal */
    .leadoverlay .popup::-webkit-scrollbar {
        width: 6px;
    }

    .leadoverlay .popup::-webkit-scrollbar-thumb {
        background: rgba(59, 130, 246, 0.4);
        border-radius: 4px;
    }

    .leadoverlay .popup::-webkit-scrollbar-track {
        background: transparent;
    }

    .leadoverlay.active .popup,
    .leadoverlay[style*="visible"] .popup {

        transform: scale(1);

    }

    @media (max-width: 480px) {
        .leadoverlay {
            align-items: center;
        }
        .leadoverlay .popup {
            padding: 18px 14px;
            max-height: calc(100vh - 24px);
            border-radius: 18px;
            margin: 12px auto;
        }
    }

    /* No Leads UI Styling Refined */

    .no-leads-container {

        padding: 60px 20px;

        display: flex;

        justify-content: center;

        align-items: center;

        width: 100%;

        text-align: center;

    }

    .no-leads-card {

        max-width: 550px;

        width: 100%;

        display: flex;

        flex-direction: column;

        align-items: center;

        justify-content: center;

    }

    .no-leads-icon-circle {

        width: 110px;

        height: 110px;

        background: rgba(59, 130, 246, 0.1);

        border-radius: 50%;

        display: flex;

        align-items: center;

        justify-content: center;

        margin-bottom: 30px;

        border: 1px solid rgba(59, 130, 246, 0.2);

        box-shadow: 0 0 50px rgba(59, 130, 246, 0.2);

    }

    .no-leads-icon-circle i {

        font-size: 48px;

        color: #3b82f6;

    }

    .no-leads-title {

        font-size: 24px;

        font-weight: 600;

        color: #fff;

        margin-bottom: 20px;

        text-align: center;

        width: 100%;

    }

    .no-leads-text {

        font-size: 16px;

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

        line-height: 1.6;

        margin-bottom: 8px;

        text-align: center;

        width: 100%;

    }

    .no-leads-action-btn {

        margin-top: 30px;

        background: linear-gradient(135deg, #1d4ed8 0%, #3b82f6 100%) !important;

        color: #fff !important;

        padding: 16px 60px !important;

        border-radius: 50px !important;

        font-size: 17px !important;

        font-weight: 600 !important;

        box-shadow: 0 10px 30px rgba(59, 130, 246, 0.3) !important;

        border: none !important;

        display: inline-block !important;

        text-decoration: none !important;

        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;

        width: 100%;

        max-width: 380px;

        text-align: center;

    }

    .no-leads-action-btn:hover {

        transform: translateY(-3px);

        box-shadow: 0 15px 40px rgba(59, 130, 246, 0.4) !important;

        color: #fff !important;

    }

    .closelead-btn {

        position: absolute;

        top: 20px;

        right: 20px;

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

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

        width: 36px;

        height: 36px;

        border-radius: 50%;

        display: flex;

        align-items: center;

        justify-content: center;

        font-size: 20px;

        cursor: pointer;

        color: #fff;

        transition: all 0.3s ease;

        text-decoration: none;

        z-index: 10;

    }

    .closelead-btn:hover {

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

        color: #fff;

        transform: rotate(90deg);

    }

    #lead-search,

    #lending-lead-search {

        display: flex;

        gap: 1rem;

        margin-bottom: 20px;

    }

    .lead-s-button {

        width: 240px;

        font-size: 14px;

        border-radius: 20px;

        /* background:linear-gradient(135deg, #667eea 0%, #ff0000 100%) !important; */

        background: #ff0000 !important;

    }

    #lead-query,

    #lending-query {

        border-radius: 20px;

        color: #FFF;

    }

    .lead-details,

    .lending-details {

        /* background: linear-gradient(135deg, #667eea 0%, #ff0000 100%) !important; */

        background: #1E90FF !important;

        padding: 2px 8px;

        font-size: 13px;

        border-radius: 5px;

    }

    .lead-details {

        box-shadow: 0 0 10px rgba(30, 144, 255, 0.5);

    }

    .verify {

        font-weight: 300;

        font-size: 12px;

        background: #019f4e;

        padding: 2px 8px;

        border-radius: 12px;

    }

    /* ============================================================
       HIAA SECTION — "Built for Independence" (index.php, #hiaa)
       Four cards: two by two on desktop and tablet, one column on
       phones. READ MORE and I'M INTERESTED open the "Join the HIAA
       Program" modal (inc/hiaa_interest_modal.php).
       The star fields are static gradients — no backdrop-filter and
       no infinite animation — so the iOS GPU rules at the top of
       this file have nothing to strip, and phones keep the glow.
       Selectors carry .hb-hiaa so they outrank AOS's
       [data-aos][data-aos] transform and Tailwind's button reset.
       ============================================================ */
    .hb-hiaa {
        position: relative;
        padding: 96px 20px 104px;
        overflow: hidden;
        background:
            radial-gradient(900px 520px at 50% 0%, rgba(32, 78, 150, 0.30), transparent 70%),
            radial-gradient(700px 520px at 100% 100%, rgba(20, 60, 120, 0.22), transparent 70%),
            linear-gradient(180deg, #071a32 0%, #06162c 100%);
    }

    .hb-hiaa::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background-image:
            radial-gradient(1.4px 1.4px at 22px 34px, rgba(255, 255, 255, 0.55), transparent 60%),
            radial-gradient(1px 1px at 118px 92px, rgba(255, 255, 255, 0.40), transparent 60%),
            radial-gradient(1.2px 1.2px at 64px 152px, rgba(255, 240, 200, 0.45), transparent 60%),
            radial-gradient(1px 1px at 168px 44px, rgba(255, 255, 255, 0.35), transparent 60%);
        background-size: 190px 190px, 230px 230px, 170px 170px, 260px 260px;
        opacity: 0.7;
    }

    .hb-hiaa__inner {
        position: relative;
        z-index: 1;
        max-width: 1240px;
        margin: 0 auto;
    }

    .hb-hiaa__head {
        max-width: 860px;
        margin: 0 auto 44px;
        text-align: center;
    }

    .hb-hiaa .hb-hiaa__head h3 {
        margin: 0 0 14px;
        color: #fff;
        font-size: 36px;
        line-height: 44px;
        font-weight: 700;
    }

    .hb-hiaa .hb-hiaa__head p {
        margin: 0;
        color: #e8eef8;
        font-size: 20px;
        font-weight: 300;
        line-height: 1.6;
    }

    .hb-hiaa__grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 22px;
    }

    .hb-hiaa .hb-hiaa-card {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        min-width: 0;
        padding: 36px 36px 34px;
        border: 2px solid #f7d36f;
        border-radius: 24px;
        color: #eef3fa;
        text-align: left;
        overflow: hidden;
        isolation: isolate;
        background:
            radial-gradient(110% 75% at 100% 0%, rgba(34, 92, 160, 0.50) 0%, transparent 62%),
            radial-gradient(90% 60% at 0% 100%, rgba(10, 40, 90, 0.45) 0%, transparent 70%),
            linear-gradient(170deg, #0b2b57 0%, #062148 46%, #051d40 100%);
        box-shadow:
            0 0 0 1px rgba(255, 236, 170, 0.30),
            0 0 16px rgba(250, 205, 90, 0.65),
            0 0 38px rgba(247, 190, 60, 0.28),
            inset 0 0 16px rgba(247, 200, 80, 0.22);
        transition: transform 0.35s ease, box-shadow 0.35s ease, opacity 0.6s ease;
    }

    .hb-hiaa .hb-hiaa-card::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        pointer-events: none;
        background-image:
            radial-gradient(1.3px 1.3px at 30px 40px, rgba(255, 255, 255, 0.60), transparent 60%),
            radial-gradient(1px 1px at 140px 110px, rgba(255, 255, 255, 0.45), transparent 60%),
            radial-gradient(1.1px 1.1px at 90px 190px, rgba(255, 244, 210, 0.45), transparent 60%),
            radial-gradient(0.9px 0.9px at 200px 60px, rgba(255, 255, 255, 0.40), transparent 60%);
        background-size: 230px 230px, 290px 290px, 210px 210px, 330px 330px;
        opacity: 0.75;
    }

    @media (hover: hover) and (min-width: 1025px) {
        .hb-hiaa .hb-hiaa__grid .hb-hiaa-card:hover {
            transform: translateY(-4px);
            box-shadow:
                0 0 0 1px rgba(255, 238, 175, 0.35),
                0 0 18px rgba(250, 205, 90, 0.70),
                0 0 44px rgba(247, 190, 60, 0.30),
                inset 0 0 20px rgba(247, 200, 80, 0.26);
        }
    }

    .hb-hiaa-card__icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 74px;
        height: 74px;
        flex: 0 0 74px;
        border-radius: 16px;
        color: #f5c95f;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(0, 0, 0, 0.22) 100%), #10213a;
        border: 1.5px solid rgba(246, 205, 104, 0.9);
        box-shadow: 0 0 12px rgba(246, 200, 90, 0.28), 0 6px 14px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.10);
    }

    .hb-hiaa-card__icon svg {
        width: 42px;
        height: 42px;
    }

    .hb-hiaa .hb-hiaa-card__title {
        margin: 22px 0 14px;
        color: #f6cf67;
        font-size: 26px;
        line-height: 1.25;
        font-weight: 700;
        letter-spacing: -0.2px;
        text-shadow: 0 0 12px rgba(246, 207, 103, 0.25);
    }

    .hb-hiaa .hb-hiaa-card p {
        margin: 0 0 16px;
        color: #eef3fa;
        font-size: 17px;
        font-weight: 300;
        line-height: 1.6;
    }

    .hb-hiaa .hb-hiaa-card__list {
        display: flex;
        flex-direction: column;
        gap: 16px;
        margin: 4px 0 18px;
        padding: 0;
        list-style: none;
    }

    .hb-hiaa .hb-hiaa-card__list--tight {
        gap: 9px;
    }

    .hb-hiaa .hb-hiaa-card__list li {
        position: relative;
        padding-left: 38px;
        color: #eef3fa;
        font-size: 16.5px;
        font-weight: 300;
        line-height: 1.55;
    }

    .hb-hiaa .hb-hiaa-card__list li::before {
        content: "";
        position: absolute;
        left: 1px;
        top: 2px;
        width: 22px;
        height: 22px;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2378efc6' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.8l4.7 4.7L19.6 6.9'/%3E%3C/svg%3E") no-repeat center / contain;
    }

    .hb-hiaa-card__cta {
        align-self: center;
        margin-top: auto;
        padding-top: 8px;
    }

    .hb-hiaa .hb-hiaa-card__join {
        width: 100%;
        margin-top: auto;
        padding-top: 20px;
        border-top: 1.5px solid rgba(246, 205, 104, 0.85);
        text-align: center;
    }

    .hb-hiaa .hb-hiaa-card__join h5 {
        margin: 0 0 6px;
        color: #f6cf67;
        font-size: 21px;
        line-height: 1.3;
        font-weight: 700;
    }

    .hb-hiaa .hb-hiaa-card__join p {
        margin: 0 0 18px;
        font-size: 16px;
    }

    .hb-hiaa .hb-hiaa-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 220px;
        height: 54px;
        padding: 0 36px;
        border: 0;
        border-radius: 999px;
        cursor: pointer;
        color: #0f1a2e;
        font-family: inherit;
        font-size: 18px;
        font-weight: 800;
        letter-spacing: 0.2px;
        background: linear-gradient(180deg, #fcd979 0%, #f3bf4f 55%, #e9ad3a 100%);
        box-shadow:
            0 0 18px rgba(246, 190, 64, 0.45),
            0 6px 16px rgba(0, 0, 0, 0.35),
            inset 0 1px 0 rgba(255, 255, 255, 0.60),
            inset 0 -2px 0 rgba(150, 95, 10, 0.25);
        transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
    }

    .hb-hiaa .hb-hiaa-btn--caps {
        font-size: 16px;
        letter-spacing: 2.5px;
        text-transform: uppercase;
    }

    .hb-hiaa .hb-hiaa-btn:hover {
        transform: translateY(-2px);
        filter: brightness(1.05);
        box-shadow:
            0 0 26px rgba(246, 190, 64, 0.65),
            0 8px 18px rgba(0, 0, 0, 0.38),
            inset 0 1px 0 rgba(255, 255, 255, 0.60),
            inset 0 -2px 0 rgba(150, 95, 10, 0.25);
    }

    .hb-hiaa .hb-hiaa-btn:focus-visible {
        outline: 2px solid #fff3c4;
        outline-offset: 3px;
    }

    @media (max-width: 1024px) {
        .hb-hiaa {
            padding: 80px 18px 88px;
        }

        .hb-hiaa__grid {
            gap: 18px;
        }

        .hb-hiaa .hb-hiaa-card {
            padding: 30px 26px 28px;
            /* two glow layers instead of four on tablets and phones */
            box-shadow:
                0 0 0 1px rgba(255, 233, 160, 0.22),
                0 0 12px rgba(247, 200, 80, 0.50),
                inset 0 0 12px rgba(247, 200, 80, 0.16);
        }

        .hb-hiaa .hb-hiaa-card__title {
            font-size: 23px;
        }

        .hb-hiaa .hb-hiaa-card p,
        .hb-hiaa .hb-hiaa-card__list li {
            font-size: 15.5px;
        }
    }

    @media (max-width: 767px) {
        .hb-hiaa__grid {
            grid-template-columns: 1fr;
            gap: 20px;
            max-width: 560px;
            margin: 0 auto;
        }

        .hb-hiaa__head {
            margin-bottom: 30px;
        }

        .hb-hiaa .hb-hiaa__head h3 {
            font-size: 28px;
            line-height: 1.2;
            margin-bottom: 12px;
        }

        .hb-hiaa .hb-hiaa__head p {
            font-size: 16px;
        }
    }

    @media (max-width: 480px) {
        .hb-hiaa {
            padding: 60px 16px 70px;
        }

        .hb-hiaa .hb-hiaa-card {
            padding: 26px 20px 24px;
            border-radius: 20px;
        }

        .hb-hiaa-card__icon {
            width: 62px;
            height: 62px;
            flex-basis: 62px;
            border-radius: 14px;
        }

        .hb-hiaa-card__icon svg {
            width: 34px;
            height: 34px;
        }

        .hb-hiaa .hb-hiaa-card__title {
            margin: 18px 0 12px;
            font-size: 21px;
        }

        .hb-hiaa .hb-hiaa-card p,
        .hb-hiaa .hb-hiaa-card__list li {
            font-size: 15px;
        }

        .hb-hiaa .hb-hiaa-card__list li {
            padding-left: 32px;
        }

        .hb-hiaa .hb-hiaa-card__list li::before {
            width: 19px;
            height: 19px;
        }

        .hb-hiaa .hb-hiaa-card__join h5 {
            font-size: 18px;
        }

        .hb-hiaa .hb-hiaa-btn {
            min-width: 200px;
            height: 50px;
            font-size: 16px;
        }

        .hb-hiaa .hb-hiaa-btn--caps {
            font-size: 14px;
        }
    }


    .property__typeHeadingWrapper h3 {

        color: white;

        font-size: 36px;

        line-height: 44px;

        font-weight: 700;

        margin-bottom: 14px;

        text-align: center;

    }

    @media(max-width:640px) {










        .property__typeHeadingWrapper h3 {

            font-size: 28px;

            line-height: 1.2;

            margin-bottom: 12px;

        }




















        .counterSec__mainWrapper {

            display: grid;

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

            width: 60% !important;

            gap: 10px;

            position: relative;

            z-index: 30;

            margin: 0 auto;

        }

        .counterCard_wrapper {

            height: auto !important;

            border-radius: 20px !important;

            padding: 24px 16px !important;

        }

    }

    .allIcon__bgColor {

        background: linear-gradient(135deg, #0f2027, #203a43) !important;

    }

    .counterSec__mainWrapper {

        display: grid;

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

        width: 100%;

        gap: 10px;

        position: relative;

        z-index: 30;

    }

    .counterCard_wrapper {
        background: linear-gradient(135deg, rgba(11, 38, 52, 0.80) 0%, rgba(7, 26, 37, 0.90) 100%);
        height: auto;
        border-radius: 20px;
        border-top: 1px solid rgba(235, 216, 176, 0.60);
        border-left: 1px solid rgba(235, 216, 176, 0.40);
        border-right: 1px solid rgba(235, 216, 176, 0.12);
        border-bottom: 1px solid rgba(235, 216, 176, 0.08);
        box-shadow:
            3px 5px 0 rgba(195, 145, 35, 0.40),
            0 12px 30px rgba(0, 0, 0, 0.45),
            0 0 22px rgba(235, 216, 176, 0.15),
            inset 0 1px 0 rgba(255, 255, 255, 0.12);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 32px 20px;
        position: relative;
        overflow: hidden;
        transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease;
    }

    .counterCard_wrapper:hover {
        transform: translateY(-6px);
        box-shadow:
            4px 7px 0 rgba(215, 165, 45, 0.55),
            0 18px 40px rgba(0, 0, 0, 0.55),
            0 0 30px rgba(235, 216, 176, 0.28),
            inset 0 1px 0 rgba(255, 255, 255, 0.18);
    }

    /* Icon circle */
    .stat__card-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 52px;
        height: 52px;
        border-radius: 50%;
        background: linear-gradient(135deg, rgba(235, 216, 176, 0.18) 0%, rgba(235, 216, 176, 0.08) 100%);
        border: 1px solid rgba(235, 216, 176, 0.35);
        color: #ebd8b0;
        margin-bottom: 4px;
        flex: none;
    }

    .stat__card-icon svg {
        width: 24px;
        height: 24px;
    }

    /* Decorative bottom rule */
    .stat__card-rule {
        position: absolute;
        bottom: 0;
        left: 20%;
        right: 20%;
        height: 2px;
        background: linear-gradient(90deg, transparent, rgba(235, 216, 176, 0.5), transparent);
        border-radius: 999px;
    }

    .count_text h3 {
        color: #ebd8b0;
        font-size: clamp(28px, 3.5dvw, 48px);
        font-weight: 800;
        letter-spacing: -0.5px;
        line-height: 1;
    }

    .counterCard_title {
        color: #c8dde8;
        font-size: clamp(12px, 1.1dvw, 14px);
        font-weight: 500;
        text-align: center;
        letter-spacing: 0.3px;
    }

    @media(max-width:640px) {

        .count_text h3 {

            font-size: 8.5dvw;

        }

        .counterCard_title {

            color: white;

            font-size: 4dvw;

        }

        .inputWrapper {

            flex-direction: column;

        }

    }

    #searchForm {

        padding: 1px 12px;

        border-radius: 10px;

    }

    /* conatct container bootom */

    .contact-section-wrapper {
        display: flex;
        width: 100%;
        min-height: 100vh;
        /* Make it take full viewport height */
        justify-content: center;
        align-items: center;
        /* Center content vertically */
        padding: 60px 20px;

        /* Volcanic / Space Background moved here for full width.
           Only the coloured nebula flares live on the section itself;
           the stars are rendered on the animated ::before / ::after layers below. */
        background-color: #05070a;
        background-image:
            radial-gradient(circle at 80% 90%, rgba(220, 50, 50, 0.4) 0%, transparent 60%),
            /* Red flare bottom right */
            radial-gradient(circle at 20% 80%, rgba(255, 80, 0, 0.3) 0%, transparent 50%),
            /* Orange flare bottom left */
            radial-gradient(circle at 50% 0%, rgba(40, 60, 120, 0.4) 0%, transparent 70%);
        /* Blue glow top */
        background-size: 100% 100%, 100% 100%, 100% 100%;
        position: relative;
        overflow: hidden;
    }

    /* ===== Animated galaxy star layers =====
       Two oversized (200%) star fields slowly counter-rotate around the
       centre of the section to create a parallax "galaxy swirl", while a
       twinkle animation fades the stars in and out. */
    .contact-section-wrapper::before,
    .contact-section-wrapper::after {
        content: "";
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        pointer-events: none;
        z-index: 0;
        will-change: transform, opacity;
    }

    /* Dense layer of small distant stars */
    .contact-section-wrapper::before {
        background-image:
            radial-gradient(1px 1px at 10% 10%, #fff 100%, transparent),
            radial-gradient(1px 1px at 20% 20%, #fff 100%, transparent),
            radial-gradient(2px 2px at 30% 70%, #ffffff 100%, transparent),
            radial-gradient(1px 1px at 40% 40%, #fff 100%, transparent),
            radial-gradient(1px 1px at 50% 50%, #fff 100%, transparent),
            radial-gradient(1px 1px at 60% 60%, #fff 100%, transparent),
            radial-gradient(1px 1px at 70% 30%, #fff 100%, transparent),
            radial-gradient(2px 2px at 80% 80%, #fff 100%, transparent),
            radial-gradient(1px 1px at 90% 10%, #fff 100%, transparent);
        background-size: 200px 200px, 300px 300px, 400px 400px, 150px 150px, 250px 250px, 350px 350px, 180px 180px, 220px 220px, 320px 320px;
        animation: galaxy-spin 160s linear infinite, galaxy-twinkle 5s ease-in-out infinite alternate;
    }

    /* Sparser layer of larger near stars, counter-rotating for depth */
    .contact-section-wrapper::after {
        background-image:
            radial-gradient(2px 2px at 15% 35%, #cfe3ff 100%, transparent),
            radial-gradient(2px 2px at 65% 15%, #fff 100%, transparent),
            radial-gradient(3px 3px at 85% 55%, #ffe9c7 100%, transparent),
            radial-gradient(2px 2px at 35% 85%, #fff 100%, transparent),
            radial-gradient(2px 2px at 5% 65%, #d9c7ff 100%, transparent);
        background-size: 420px 420px, 520px 520px, 600px 600px, 480px 480px, 560px 560px;
        opacity: 0.85;
        animation: galaxy-spin-reverse 110s linear infinite, galaxy-twinkle 7s ease-in-out infinite alternate;
    }

    @keyframes galaxy-spin {
        from { transform: rotate(0deg); }
        to   { transform: rotate(360deg); }
    }

    @keyframes galaxy-spin-reverse {
        from { transform: rotate(360deg); }
        to   { transform: rotate(0deg); }
    }

    @keyframes galaxy-twinkle {
        0%   { opacity: 0.35; }
        50%  { opacity: 1; }
        100% { opacity: 0.55; }
    }

    @media (prefers-reduced-motion: reduce) {
        .contact-section-wrapper::before,
        .contact-section-wrapper::after {
            animation: none;
        }
    }

    /* Keep the galaxy stars static on mobile */
    @media (max-width: 768px) {
        .contact-section-wrapper::before,
        .contact-section-wrapper::after {
            animation: none;
        }
    }

    .container-contact {
        max-width: 800px;
        width: 100%;
        /* Background removed from here */
        color: #fff;
        position: relative;
        z-index: 1;
    }

    /* Add some stars in background if possible, or just keep simple dark gradient */

    .header-contact {
        text-align: center;
        margin-bottom: 40px;
    }

    .header-contact h3 {
        font-size: 2.5em;
        margin-bottom: 10px;
        color: #FFF !important;
        font-weight: 500;
    }

    .header-contact p {
        font-size: 1.1em;
        color: #b0c4de;
        opacity: 0.9;
        font-weight: 300;
    }

    .contact-grid {
        display: flex;
        flex-direction: column;
        gap: 20px;
        margin-bottom: 40px;
    }

    .contact-card,
    .office-card {
        background: rgba(255, 255, 255, 0.03);
        border-radius: 20px;
        padding: 25px 30px;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        backdrop-filter: blur(10px);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        border: 1px solid rgba(255, 255, 255, 0.1);
        overflow: hidden;
    }

    /* Gradient Border Effect */
    .contact-card::before,
    .office-card::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 20px;
        padding: 1px;
        background: linear-gradient(90deg, #5356ff, #d64aef, #f58448);
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        opacity: 0.7;
        pointer-events: none;
    }

    .contact-card::after,
    .office-card::after {
        content: "";
        /* Inner glow */
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        box-shadow: inset 0 0 20px rgba(83, 86, 255, 0.2);
        border-radius: 20px;
        pointer-events: none;
    }

    .contact-card:hover,
    .office-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3), inset 0 0 30px rgba(83, 86, 255, 0.3);
    }

    .card-content {
        display: flex;
        align-items: center;
        gap: 20px;
        flex: 1;
    }

    .contact-icon {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5em;
        flex-shrink: 0;
    }

    /* Specific Icon Backgrounds */
    .icon-general {
        background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
    }

    .icon-legal {
        background: linear-gradient(135deg, #7F00FF 0%, #E100FF 100%);
    }

    .icon-privacy {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }

    .icon-corporate {
        background: linear-gradient(135deg, #30cfd0 0%, #330867 100%);
    }

    .icon-florida {
        background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    }

    .icon-delaware {
        background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    }

    .icon-sales {
        background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
    }

    .icon-dmca {
        background: linear-gradient(135deg, #09203f 0%, #537895 100%);
    }


    .text-content {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .card-title {
        color: #fff;
        font-size: 1.25em;
        margin: 0 0 5px 0;
        font-weight: 500;
        text-align: left;
    }

    .card-subtitle {
        color: #bbb;
        font-size: 0.95em;
        margin: 0;
        font-weight: 300;
        text-align: left;
    }

    .card-button {
        padding: 10px 25px;
        background: transparent;
        color: #fff;
        border-radius: 30px;
        text-decoration: none;
        font-size: 0.95em;
        white-space: nowrap;
        position: relative;
        z-index: 2;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        transition: all 0.3s ease;
    }

    /* Button Border Gradient */
    .card-button::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 30px;
        padding: 2px;
        background: linear-gradient(90deg, #4facfe, #00f2fe);
        /* Default Blueish */
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
    }

    /* Specific Button Gradients to match screenshot colors somewhat */
    .btn-general::before {
        background: linear-gradient(90deg, #5356ff, #f58448);
    }

    /* Actually screenshot shows similar gradients for all buttons: Blue to Pink/Orange */
    .card-button::before {
        background: linear-gradient(90deg, #4facfe, #f5576c);
    }

    .card-button:hover {
        background: rgba(255, 255, 255, 0.1);
        text-decoration: none;
        color: #fff;
    }

    .container-contact h2 {
        /* Divider Title */
        text-align: center;
        color: #fff;
        font-size: 1.5em;
        margin: 40px 0;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .container-contact h2::before,
    .container-contact h2::after {
        content: "";
        flex: 1;
        height: 1px;
        background: linear-gradient(90deg, transparent, #764ba2, transparent);
        margin: 0 20px;
        opacity: 0.7;
    }

    .container-contact h2 span {
        padding-bottom: 5px;
        border-bottom: 2px solid #7F00FF;
    }


    .offices-grid {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }


    @media (max-width: 768px) {

        .contact-card,
        .office-card {
            flex-direction: column;
            align-items: flex-start;
            gap: 20px;
        }

        .card-button {
            width: 100%;
            justify-content: center;
        }
    }


    padding: 30px 20px;

    }

    }

    .searchInput__wrapper a {

        animation-name: beat;

        animation-duration: 4s;

        animation-iteration-count: infinite;

        /* animation-direction: reverse; */

        animation-timing-function: linear;

        animation-fill-mode: both;

    }

    @keyframes beat {

        0% {

            transform: scale(1);

        }

        50% {

            transform: scale(1.05);

        }

        100% {

            transform: scale(1);

        }

    }

    @media(max-width:640px) {

        .searchInput__wrapper a {

            width: 100%;

            display: flex;

            justify-content: center;

            margin: 0px 0px !important;

            border-radius: 35px !important;

            animation-name: beat;

            animation-duration: 4s;

            animation-iteration-count: infinite;

            /* animation-direction: reverse; */

            animation-timing-function: linear;

            animation-fill-mode: both;

        }

        @keyframes beat {

            0% {

                transform: scale(1);

            }

            50% {

                transform: scale(1.05);

            }

            100% {

                transform: scale(1);

            }

        }

    }

    /* contact container */

    /* multi select property dropdown feature */

    .dropdown-box {

        position: relative;

        width: 100%;

        z-index: 1;

        /* create stacking context */

    }

    .dropdown-btn {

        width: 100%;

        height: 55px;

        border-radius: 30px;

        background: #2E3136;

        color: #fff;

        border: none;

        text-align: left;

        padding: 0 15px;

        cursor: pointer;

    }

    /* ===== Dropdown list ===== */

    .dropdown-list {

        position: absolute;

        width: 100%;

        max-height: 240px;

        overflow-x: hidden;

        overflow-y: auto !important;

        background: #404246;

        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

        box-shadow: inset 6px 6px 12px rgb(204 183 183 / 71%), inset -6px -6px 12px rgb(103 106 109 / 42%);

        border-radius: 12px;

        display: none;

        padding: 8px 4px;

        z-index: 10;

        /* controlled z-index */

        top: 55px;

        scrollbar-width: thin;

        scrollbar-color: rgba(255, 255, 255, 0.4) rgba(255, 255, 255, 0.05);

    }

    .dropdown-list label {

        display: block;

        padding: 6px;

        cursor: pointer;

        position: relative;

    }

    .dropdown-box.active {
        display: block;
        z-index: 2000005 !important;
    }

    .dropdown-box.active .dropdown-list {
        display: block;
    }

    /* Premium Selects and Inputs Styling Overrides (Housbe Sapphire & Gold) */
    .dropdown-btn,
    .inputWrapper input:not([type="checkbox"]):not([type="hidden"]),
    .input-effect {
        background-color: rgba(6, 17, 33, 0.8) !important;
        color: #FFF !important;
        border: 1px solid rgba(235, 216, 176, 0.25) !important;
        border-radius: 30px !important;
        transition: all 0.3s ease !important;
        height: 55px !important;
        padding: 0 20px !important;
        width: 100% !important;
        font-family: 'Outfit', sans-serif !important;
    }
    .dropdown-btn:hover,
    .inputWrapper input:not([type="checkbox"]):not([type="hidden"]):hover,
    .inputWrapper input:not([type="checkbox"]):not([type="hidden"]):focus,
    .input-effect:hover,
    .input-effect:focus {
        border-color: #ebd8b0 !important;
        box-shadow: 0 0 15px rgba(235, 216, 176, 0.3) !important;
        background-color: rgba(14, 30, 55, 0.9) !important;
    }
    .dropdown-list {
        background: rgba(14, 30, 55, 0.95) !important;
        border: 1px solid rgba(235, 216, 176, 0.25) !important;
        border-radius: 12px !important;
        box-shadow: none !important;
    }
    .dropdown-list label:hover {
        background: rgba(235, 216, 176, 0.12) !important;
        color: #ebd8b0 !important;
    }

    .mobile-done-wrapper {
        display: none;
    }

    /* ================= MOBILE FIX ================= */

    @media (max-width: 640px) {



        .dropdown-box {

            position: relative;
            /* Keep as anchor for absolute child */
            margin-bottom: 0;
        }

        .dropdown-list {
            position: relative !important;
            top: 0 !important;
            left: 0 !important;
            width: 100% !important;
            max-height: 280px !important;
            overflow-y: auto !important;
            margin-top: 10px !important;
            box-shadow: none !important;
            border: 1px solid rgba(0, 204, 255, 0.4) !important;
            z-index: 1000;
            background: #404246;
        }
        
        .mobile-done-wrapper {
            display: block;
            position: sticky;
            bottom: 0;
            background: rgba(9, 20, 40, 0.95);
            backdrop-filter: blur(10px);
            padding: 10px;
            border-top: 1px solid rgba(0, 150, 255, 0.3);
            z-index: 10;
        }

        .mobile-done-btn {
            width: 100%;
            background: linear-gradient(135deg, #1a4d6d 0%, #0d3a52 100%);
            color: #22D3EE;
            border: 1px solid #22D3EE;
            padding: 12px;
            border-radius: 8px;
            font-weight: 600;
            font-size: 1rem;
            cursor: pointer;
            text-transform: uppercase;
        }
    }

    .input-effect {

        background-color: #404246;

        color: #FFF;

        font-size: 15px;

        font-weight: 400 !important;

        border: 2px solid transparent !important;

        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

            {

            /*box-shadow: 

    inset 6px 6px 12px rgba(0, 0, 0, 0.5),

    inset -6px -6px 12px rgba(80, 86, 92, 0.3);*/

        }

        box-shadow: inset 6px 6px 12px rgb(204 183 183 / 71%),

        inset -6px -6px 12px rgb(103 106 109 / 42%);

    }

    .input-effect:hover,

    .input-effect:focus {

        border: 1px solid #ebd8b0 !important;

        background: rgba(14, 30, 55, 0.95) !important;

        color: #FFF !important;

        box-shadow: 0 0 15px rgba(235, 216, 176, 0.3) !important;

        outline: none;

    }

    .child-item {

        position: relative;

        align-items: center;

        gap: 8px;

    }

    .parent-item {

        display: flex;

        align-items: center;

        gap: 8px;

    }

    #parentList .parent-item,
    #childList .child-item {
        display: flex;
        align-items: center;
        gap: 8px;
        min-height: 36px;
        padding: 8px 10px;
    }

    #parentList .parentChk,
    #childList .childChk {
        width: 16px !important;
        height: 16px !important;
        min-width: 16px;
        margin: 0;
        padding: 0 !important;
        border-radius: 3px !important;
        flex: 0 0 16px;
        accent-color: #ebd8b0;
        box-shadow: none !important;
    }

    .mode-item {
        display: block;
        padding: 10px 15px;
        cursor: pointer;
        color: #fff;
        transition: all 0.3s ease;
    }

    .mode-item:hover {
        background: rgba(102, 126, 234, 0.2);
        box-shadow: inset 0px -5px 24px -3px #1E90FF;
        border-radius: 8px;
    }

    .color-dot {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        flex-shrink: 0;
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
    }

    /*

@media (min-width: 769px) {

  .dropdown-box:hover .dropdown-list {

    display: block;

  }

}

*/

    /* multi select property dropdown feature */

    #parentList label:hover {

        box-shadow: inset 0px -5px 24px -3px #1E90FF;

        border-radius: 8px;

    }

    #childList label:hover {

        box-shadow: inset 0px -5px 24px -3px #1E90FF;

        border-radius: 8px;

    }

/* ── Hero search: room for the mode-carrying type pills ──────────────────
   Both type pills now name the search mode ("Property Type to Rent-to-Own",
   "Property Sub Type to Rent-to-Own") — the longest strings on the bar. Every
   control in .search__inputMainWrapper is flex:1, so each got an equal share:
   at ~1024–1300px that is about 190px of text room against a 235px label. And
   .dropdown-btn is white-space:normal at a fixed 55px height, so the overflow
   wrapped onto a second line the button then clipped, rather than ellipsising.
   Giving these two a larger share fixes it without touching the other
   controls; below 1024px the bar is a single column and every pill is already
   full width. */
@media (min-width: 1024px) {

    .search__inputMainWrapper .searchType__wrapper {

        flex: 2 1 0;

        min-width: 0;

    }

    /* Buy / Rent / Rent-to-Own is the shortest label on the bar, so it gives
       back the share the two type pills need rather than the address field
       paying for all of it. */
    .search__inputMainWrapper .searchMode__wrapper {

        flex: 0.75 1 0;

        min-width: 0;

    }

}

/* Safety net for the narrow end of that band: one line, ellipsised. The pill
   is a fixed 55px, so without this a label that still does not fit wraps and
   the second line is clipped mid-letter. property.php's filter pills already
   take this approach for the same reason. */
.search__inputMainWrapper .searchType__wrapper .dropdown-btn {

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}