/* =====================================================
           BANNER
        ===================================================== */

        .properties-banner {

            width: 100%;
            min-height: 360px;

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

            position: relative;

            background:
                linear-gradient(
                    rgba(0,0,0,0.48),
                    rgba(0,0,0,0.48)
                ),
                url("../images/properties-banner.jpg")
                center center / cover no-repeat;
        }


        .properties-banner-content {
            text-align: center;
            color: #fff;
            padding: 40px 20px;
        }


        .properties-banner-content span {

            display: block;

            font-size: 14px;
            letter-spacing: 3px;
            text-transform: uppercase;

            margin-bottom: 15px;

            color: #c8a45e;
        }


        .properties-banner-content h1 {

            margin: 0;

            font-family: Georgia, serif;

            font-size: 52px;
            font-weight: 400;

            letter-spacing: 1px;
        }


        .properties-banner-content p {

            margin: 18px auto 0;

            max-width: 650px;

            font-size: 16px;

            line-height: 1.7;

            color: rgba(255,255,255,0.88);
        }


        /* =====================================================
           MAIN
        ===================================================== */

        .properties-page {

            width: 92%;
            max-width: 1400px;

            margin: 60px auto;

            display: grid;

            grid-template-columns: 280px 1fr;

            gap: 35px;
        }


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

        .filter-sidebar {

            background: #fff;

            padding: 28px;

            border: 1px solid #e7e7e7;

            height: fit-content;

            position: sticky;

            top: 30px;
        }


        .filter-title {

            display: flex;

            align-items: center;

            justify-content: space-between;

            padding-bottom: 20px;

            margin-bottom: 22px;

            border-bottom: 1px solid #e5e5e5;
        }


        .filter-title h2 {

            margin: 0;

            font-size: 21px;

            font-family: Georgia, serif;

            font-weight: 400;
        }


        .reset-filter {

            color: #a9894e;

            text-decoration: none;

            font-size: 13px;
        }


        .filter-group {

            margin-bottom: 23px;
        }


        .filter-group label {

            display: block;

            font-size: 13px;

            font-weight: 600;

            margin-bottom: 9px;

            color: #333;
        }


        .filter-group input,
        .filter-group select {

            width: 100%;

            height: 44px;

            border: 1px solid #ddd;

            padding: 0 12px;

            outline: none;

            background: #fff;

            font-size: 14px;

            color: #333;
        }


        .filter-group input:focus,
        .filter-group select:focus {

            border-color: #c8a45e;
        }


        .price-fields,
        .area-fields {

            display: grid;

            grid-template-columns: 1fr 1fr;

            gap: 10px;
        }


        .filter-button {

            width: 100%;

            border: 0;

            height: 48px;

            background: #222;

            color: #fff;

            font-size: 14px;

            cursor: pointer;

            transition: 0.3s;
        }


        .filter-button:hover {

            background: #c8a45e;

            color: #fff;
        }


        /* =====================================================
           CONTENT TOP BAR
        ===================================================== */

        .properties-content {
            min-width: 0;
        }


        .properties-toolbar {

            display: flex;

            align-items: center;

            justify-content: space-between;

            margin-bottom: 25px;

            gap: 20px;
        }


        .property-count {

            font-size: 14px;

            color: #666;
        }


        .property-count strong {

            color: #222;
        }


        .toolbar-right {

            display: flex;

            align-items: center;

            gap: 12px;
        }


        .sort-box select {

            height: 42px;

            border: 1px solid #ddd;

            background: #fff;

            padding: 0 35px 0 12px;

            font-size: 13px;

            outline: none;

            cursor: pointer;
        }


        .view-buttons {

            display: flex;

            border: 1px solid #ddd;

            background: #fff;
        }


        .view-buttons a {

            width: 42px;

            height: 42px;

            display: flex;

            align-items: center;

            justify-content: center;

            text-decoration: none;

            color: #888;

            border-right: 1px solid #ddd;

            font-size: 17px;
        }


        .view-buttons a:last-child {
            border-right: 0;
        }


        .view-buttons a.active {

            background: #222;

            color: #fff;
        }


        /* =====================================================
           PROPERTY GRID
        ===================================================== */

        .properties-grid {

            display: grid;

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

            gap: 28px;
        }


        .property-card {

            background: #fff;

            border: 1px solid #e8e8e8;

            overflow: hidden;

            transition: 0.3s;
        }


        .property-card:hover {

            transform: translateY(-4px);

            box-shadow: 0 15px 35px rgba(0,0,0,0.08);
        }


        .property-image-wrapper {

            width: 100%;

            height: 270px;

            position: relative;

            overflow: hidden;
        }


        .property-image {

            width: 100%;

            height: 100%;

            object-fit: cover;

            display: block;

            transition: transform 0.5s ease;
        }


        .property-card:hover .property-image {

            transform: scale(1.04);
        }


        .no-image {

            width: 100%;
            height: 100%;

            display: flex;

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

            background: #eee;

            color: #777;
        }


        .property-status {

            position: absolute;

            left: 15px;
            top: 15px;

            background: #fff;

            padding: 7px 12px;

            font-size: 11px;

            text-transform: uppercase;

            letter-spacing: 1px;

            color: #333;
        }


        .property-content {

            padding: 24px;
        }


        .property-type {

            color: #b18c4d;

            text-transform: uppercase;

            font-size: 11px;

            letter-spacing: 1.5px;

            margin-bottom: 8px;
        }


        .property-card h2 {

            margin: 0 0 8px;

            font-family: Georgia, serif;

            font-size: 23px;

            font-weight: 400;

            line-height: 1.3;
        }


        .property-location {

            color: #777;

            font-size: 14px;

            margin-bottom: 17px;
        }


        .property-details {

            display: flex;

            gap: 20px;

            flex-wrap: wrap;

            border-top: 1px solid #eee;

            border-bottom: 1px solid #eee;

            padding: 14px 0;

            margin-bottom: 18px;
        }


        .property-detail {

            font-size: 13px;

            color: #555;
        }


        .property-detail strong {

            color: #222;
        }


        .property-bottom {

            display: flex;

            align-items: center;

            justify-content: space-between;

            gap: 15px;
        }


        .price {

            font-size: 21px;

            font-weight: 600;

            color: #222;
        }


        .view-details {

            display: inline-flex;

            align-items: center;

            justify-content: center;

            padding: 11px 17px;

            background: #222;

            color: #fff;

            text-decoration: none;

            font-size: 13px;

            transition: 0.3s;
        }


        .view-details:hover {

            background: #c8a45e;
        }


        /* =====================================================
           LIST VIEW
        ===================================================== */

        .properties-grid.list-view {

            grid-template-columns: 1fr;
        }


        .properties-grid.list-view .property-card {

            display: grid;

            grid-template-columns: 300px 1fr;
        }


        .properties-grid.list-view .property-image-wrapper {

            height: 100%;

            min-height: 280px;
        }


        /* =====================================================
           NO RESULT
        ===================================================== */

        .no-results {

            background: #fff;

            border: 1px solid #e5e5e5;

            padding: 70px 30px;

            text-align: center;
        }


        .no-results h2 {

            font-family: Georgia, serif;

            font-weight: 400;

            margin: 0 0 10px;
        }


        .no-results p {

            color: #777;

            margin-bottom: 25px;
        }


        .reset-button {

            display: inline-block;

            padding: 12px 22px;

            background: #222;

            color: #fff;

            text-decoration: none;

            font-size: 13px;
        }


        /* =====================================================
           MOBILE FILTER BUTTON
        ===================================================== */

        .mobile-filter-button {

            display: none;

            width: 100%;

            height: 45px;

            margin-bottom: 20px;

            border: 1px solid #ddd;

            background: #fff;

            cursor: pointer;

            font-size: 14px;
        }


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

        @media (max-width: 1000px) {

            .properties-page {

                grid-template-columns: 240px 1fr;

                gap: 25px;
            }

            .properties-grid {

                grid-template-columns: 1fr;
            }

        }


        @media (max-width: 768px) {

            .properties-banner {

                min-height: 280px;
            }


            .properties-banner-content h1 {

                font-size: 38px;
            }


            .properties-page {

                width: 92%;

                display: block;

                margin: 40px auto;
            }


            .mobile-filter-button {

                display: block;
            }


            .filter-sidebar {

                display: none;

                position: static;

                margin-bottom: 25px;
            }


            .filter-sidebar.show {

                display: block;
            }


            .properties-toolbar {

                flex-direction: column;

                align-items: flex-start;
            }


            .toolbar-right {

                width: 100%;

                justify-content: space-between;
            }


            .properties-grid.list-view .property-card {

                display: block;
            }


            .properties-grid.list-view .property-image-wrapper {

                height: 240px;

                min-height: 0;
            }

        }


        @media (max-width: 480px) {

            .properties-banner-content h1 {

                font-size: 32px;
            }


            .properties-banner-content p {

                font-size: 14px;
            }


            .property-bottom {

                align-items: flex-start;

                flex-direction: column;
            }


            .view-details {

                width: 100%;
            }

        }