:root {

            --navy: #001a3d;

            --gold: #d99a22;

            --text: #172033;

            --muted: #70798a;

            --border: #e6e9ef;

            --background: #f6f8fb;

        }



        * {

            box-sizing: border-box;

        }



        body {

            margin: 0;

            background: var(--background);

            color: var(--text);

        }



        .detail-container {

            width: min(1180px, calc(100% - 30px));

            margin: auto;

        }



        .detail-breadcrumb {

            padding: 17px 0;

            background: #fff;

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

            color: var(--muted);

            font-size: 13px;

        }



        .detail-breadcrumb a {

            color: var(--navy);

            text-decoration: none;

        }



        .property-page {

            padding: 30px 0 65px;

        }



        .property-heading {

            margin-bottom: 22px;

            display: flex;

            justify-content: space-around;

            align-items: flex-start;

            gap: 5px;

        }



        .property-heading h1 {

            margin: 0 0 8px;

            color: var(--navy);

            /* font-size: clamp(27px, 4vw, 38px) !important; */

            font-size: 18px !important;

        }



        .property-location {

            display: flex;

            gap: 7px;

            align-items: center;

            color: var(--muted);

            font-size: 14px;

        }



        .property-location i {

            color: var(--gold);

        }



        .heading-price {

            color: var(--navy);

            font-size: clamp(18px, 1vw, 20px) !important;

            font-weight: 800 !important;

            white-space: nowrap;

        }



        .card {

            overflow: hidden;

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

            border-radius: 17px;

            background: #fff;

            box-shadow: 0 10px 35px rgba(0, 26, 61, .05);

        }



        .gallery-main {

            height: 490px;

            position: relative;

            overflow: hidden;

            background: #e9edf2;

        }



        .gallery-main img {

            width: 100%;

            height: 100%;

            display: block;

            object-fit: cover;

        }



        .gallery-arrow {

            width: 44px;

            height: 44px;

            position: absolute;

            top: 50%;

            border: 0;

            border-radius: 50%;

            background: rgba(0, 26, 61, .75);

            color: #fff;

            cursor: pointer;

            transform: translateY(-50%);

        }



        .gallery-arrow.prev {

            left: 16px;

        }



        .gallery-arrow.next {

            right: 16px;

        }



        .gallery-count {

            position: absolute;

            right: 16px;

            bottom: 16px;

            padding: 7px 11px;

            border-radius: 8px;

            background: rgba(0, 26, 61, .8);

            color: #fff;

            font-size: 12px;

            font-weight: 800;

        }



        .gallery-status {

            position: absolute;

            top: 16px;

            left: 16px;

            padding: 8px 12px;

            border-radius: 8px;

            background: linear-gradient(90deg, #e6b632, #fff0a5, #e0a822);

            color: #111;

            font-size: 12px;

            font-weight: 900;

        }



        .gallery-thumbs {

            padding: 12px;

            display: flex;

            gap: 9px;

            overflow-x: auto;

        }



        .gallery-thumb {

            width: 90px;

            height: 65px;

            flex: 0 0 90px;

            padding: 0;

            overflow: hidden;

            border: 2px solid transparent;

            border-radius: 9px;

            cursor: pointer;

        }



        .gallery-thumb.active {

            border-color: var(--gold);

        }



        .gallery-thumb img {

            width: 100%;

            height: 100%;

            object-fit: cover;

        }



        .section-card {

            margin-top: 22px;

            padding: 23px;

        }



        .section-card h2 {

            margin: 0 0 18px;

            color: var(--navy);

            font-size: 21px;

        }



        .details-grid {

            display: grid;

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

            gap: 11px;

        }



        .detail-item {

            padding: 14px;

            display: flex;

            align-items: center;

            gap: 11px;

            border: 1px solid #edf0f4;

            border-radius: 11px;

            background: #fafbfc;

        }



        .detail-icon {

            width: 39px;

            height: 39px;

            flex: 0 0 39px;

            display: grid;

            place-items: center;

            border-radius: 9px;

            background: #fff5d9;

            color: var(--gold);

        }



        .detail-item small,

        .detail-item strong {

            display: block;

        }



        .detail-item small {

            margin-bottom: 3px;

            color: var(--muted);

            font-size: 10px;

            font-weight: 800;

            text-transform: uppercase;

        }



        .detail-item strong {

            color: var(--navy);

            font-size: 13px;

        }



        .description {

            color: #384152;

            font-size: 14px;

            line-height: 1.85;

        }



        .features {

            display: grid;

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

            gap: 10px;

        }



        .feature {

            padding: 11px 13px;

            display: flex;

            gap: 8px;

            align-items: center;

            border: 1px solid #edf0f4;

            border-radius: 9px;

            font-size: 13px;

        }



        .feature i {

            color: #1e9c53;

        }



        .property-video {

            width: 100%;

            max-height: 500px;

            display: block;

            border-radius: 12px;

            background: #000;

        }



        .external-links {

            margin-top: 13px;

            display: flex;

            flex-wrap: wrap;

            gap: 9px;

        }



        .layouts {

            display: grid;

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

            gap: 11px;

        }



        .layout-file {

            min-height: 110px;

            padding: 14px;

            display: grid;

            place-items: center;

            gap: 6px;

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

            border-radius: 11px;

            color: var(--navy);

            text-align: center;

            text-decoration: none;

        }



        .layout-file i {

            color: var(--gold);

            font-size: 27px;

        }



        .sidebar {

            padding: 22px;

            position: sticky;

            top: 20px;

        }



        .property-id {

            margin-bottom: 18px;

            color: var(--gold);

            font-size: 12px;

            font-weight: 900;

        }



        .sidebar h2 {

            margin: 0 0 13px;

            color: var(--navy);

        }



        .summary-row {

            padding: 12px 0;

            display: flex;

            justify-content: space-between;

            gap: 15px;

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

            font-size: 13px;

        }



        .summary-row span {

            color: var(--muted);

        }



        .summary-row strong {

            color: var(--navy);

            text-align: right;

        }



        .actions {

            margin-top: 20px;

            display: grid;

            grid-template-columns: 1fr 1fr;

            gap: 9px;

        }



        .action {

            min-height: 44px;

            padding: 0 12px;

            display: inline-flex;

            justify-content: center;

            align-items: center;

            gap: 7px;

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

            border-radius: 9px;

            background: #fff;

            color: var(--navy);

            font: inherit;

            font-size: 13px;

            font-weight: 800;

            text-decoration: none;

            cursor: pointer;

        }



        .action.primary {

            grid-column: 1 / -1;

            border-color: var(--navy);

            background: var(--navy);

            color: #fff;

        }



        .action.like.active {

            border-color: #e63946;

            background: #fff0f1;

            color: #e63946;

        }



        .map-button {

            width: 100%;

            margin-top: 10px;

        }



        @media (max-width: 900px) {

            .property-layout {

                grid-template-columns: 1fr;

            }



            .sidebar {

                position: static;

            }



            .details-grid,

            .features {

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

            }

        }



        @media (max-width: 600px) {

            .detail-container {

                width: calc(100% - 20px);

            }



            .property-heading {

                flex-direction: column;

            }



            .gallery-main {

                height: 300px;

            }



            .details-grid,

            .features,

            .layouts {

                grid-template-columns: 1fr;

            }



            .section-card,

            .sidebar {

                padding: 17px;

            }

        }





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

   HEADER

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



.main-header {

    position: relative;

    z-index: 1000;



    width: 100%;

    height: 64px;



    background: #111;

    color: #fff;

}



.header-inner {

    position: relative;



    display: flex;

    align-items: center;



    width: 100%;

    max-width: 1600px;

    height: 64px;



    margin: 0 auto;



    padding-left: 150px;

    padding-right: 125px;

}





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

   LOGO

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



.logo-box {

    position: absolute;

    z-index: 20;



    top: 0;

    left: 150px;



    display: flex;

    align-items: center;

    justify-content: center;



    width: 150px;

    height: 100px;



    overflow: hidden;



    border-radius: 0 0 6px 6px;



    background: #fff;



    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);

}



.logo-box img {

    display: block;



    width: 120px;

    height: auto;



    max-height: 105px;



    object-fit: contain;

}





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

   NAVIGATION

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



.main-nav {

    display: flex;

    align-items: center;



    margin-left: 235px;



    gap: 42px;

}



.main-nav a {

    display: inline-flex;

    align-items: center;



    color: #fff;



    text-decoration: none;



    font-size: 14px;

    font-weight: 500;



    white-space: nowrap;



    transition: color 0.2s ease;

}



.main-nav a:hover {

    color: #d19a00;

}



.main-nav i {

    margin-left: 6px;



    font-size: 11px;

}





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

   HEADER RIGHT BUTTONS

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



.header-actions {

    display: flex;

    align-items: center;



    margin-left: auto;



    gap: 18px;

}



.requirement-btn {

    display: flex;

    align-items: center;



    min-width: 150px;

    height: 44px;



    padding: 0 14px;



    gap: 9px;



    border-radius: 5px;



    background:

        linear-gradient(

            135deg,

            #e2b83d,

            #ffe38b

        );



    color: #111;



    text-decoration: none;



    font-size: 13px;

    font-weight: 500;



    line-height: 1.2;

}



.requirement-btn i {

    font-size: 21px;

}



.phone-btn {

    display: flex;

    align-items: center;

    justify-content: center;



    min-width: 180px;

    height: 44px;



    padding: 0 15px;



    gap: 9px;



    border-radius: 5px;



    background: #3f9200;



    color: #fff;



    text-decoration: none;



    font-size: 14px;

    font-weight: 600;

}



.phone-btn i {

    font-size: 15px;

}



.main-gallery-link {

    position: relative;

    width: 100%;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

}



.main-gallery-link > img {

    width: 100%;

    height: 100%;

    object-fit: contain;

}



.open-gallery-label {

    position: absolute;

    right: 18px;

    bottom: 18px;



    display: flex;

    align-items: center;

    gap: 7px;



    padding: 10px 14px;



    border-radius: 8px;



    background: rgba(0, 26, 61, 0.9);

    color: #fff;



    font-size: 13px;

    font-weight: 700;

}
.no-photo-gallery {

    position: relative;

}



.no-photo-gallery > img {

    width: 100%;

    height: 100%;

    object-fit: contain;

}



.request-photo-overlay {

    position: absolute;

    inset: 0;



    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;



    gap: 12px;



    background: rgba(0, 26, 61, 0.16);

}



.request-photo-message {

    padding: 8px 14px;



    border-radius: 6px;



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



    color: #001a3d;



    font-size: 14px;

    font-weight: 700;

}



.request-photo-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;



    gap: 8px;



    padding: 12px 20px;



    border: 0;

    border-radius: 7px;



    background: #001a3d;

    color: #fff;



    font-size: 14px;

    font-weight: 700;



    cursor: pointer;



    box-shadow: 0 6px 18px rgba(0, 26, 61, 0.22);

}



.request-photo-btn:hover {

    background: #0a2d5a;

}



/* Featured Badge */



/* Featured property badge */

.featured-property-badge {

    position: absolute;

    top: 16px;

    right: 16px;

    z-index: 10;



    display: inline-flex;

    align-items: center;

    gap: 6px;



    padding: 8px 12px;



    border-radius: 6px;



    background: #d99a22;

    color: #ffffff;



    font-size: 11px;

    font-weight: 800;

    letter-spacing: 0.04em;

    text-transform: uppercase;



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

}



.featured-property-badge i {

    font-size: 10px;

}



@media (max-width: 700px) {

    .featured-property-badge {

        top: 10px;

        right: 10px;

        padding: 6px 9px;

        font-size: 9px;

    }

}



.related-featured-badge {

    position: absolute;

    top: 14px;

    right: 14px;

    z-index: 3;



    display: inline-flex;

    align-items: center;

    gap: 5px;



    padding: 6px 10px;



    border-radius: 5px;



    background: #d99a22;

    color: #ffffff;



    font-size: 10px;

    font-weight: 800;

    text-transform: uppercase;



    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16);

}

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

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

   STICKY MAIN NAVIGATION

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



.main-header {

    position: sticky;

    top: 0;

    z-index: 9999;

    width: 100%;

}

/* Property page responsive layout and image gallery */
.property-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
    gap: 22px;
    align-items: start;
}
.property-layout > *,
.property-heading > *,
.detail-item > *,
.section-card,
.sidebar,
.card {
    min-width: 0;
}
.property-page,
.property-layout,
.property-layout > *,
.section-card,
.details-grid,
.features,
.layouts {
    min-height: 0;
}
.detail-item strong,
.summary-row strong,
.description,
.property-location,
.layout-file {
    overflow-wrap: anywhere;
}
.gallery-main {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    max-height: 490px;
}
.gallery-main img,
.main-gallery-link > img,
.no-photo-gallery > img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.main-gallery-link,
.gallery-thumb {
    cursor: pointer;
}
.gallery-thumb:focus-visible,
.main-gallery-link:focus-visible,
.gallery-arrow:focus-visible {
    outline: 3px solid var(--gold);
    outline-offset: 2px;
}
.gallery-arrow.prev { left: 12px; }
.gallery-arrow.next { right: 12px; }
.gallery-arrow { z-index: 2; }
.gallery-thumbs { max-width: 100%; scrollbar-width: thin; }
.property-video,
.section-card iframe,
.section-card video {
    max-width: 100%;
}
.section-card iframe {
    display: block;
    border: 0;
}
@media (max-width: 900px) {
    .property-layout {
        grid-template-columns: minmax(0, 1fr);
    }
    .sidebar { position: static; }
    .header-inner {
        padding-left: 15px;
        padding-right: 15px;
    }
    .logo-box {
        left: 15px;
        width: 110px;
        height: 64px;
    }
    .logo-box img { max-width: 95px; max-height: 58px; }
    .main-nav { margin-left: 115px; gap: 12px; }
    .header-actions { gap: 8px; }
}
@media (max-width: 600px) {
    .detail-container {
        width: calc(100% - 24px);
        max-width: 100%;
    }
    .property-page { padding: 18px 0 40px; }
    .property-heading {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .heading-price { white-space: normal; }
    .gallery-main {
        height: auto;
        max-height: none;
        aspect-ratio: 4 / 3;
    }
    .gallery-arrow { width: 38px; height: 38px; }
    .gallery-thumb {
        width: 76px;
        height: 58px;
        flex-basis: 76px;
    }
    .details-grid, .features, .layouts {
        grid-template-columns: minmax(0, 1fr);
    }
    .section-card, .sidebar { padding: 15px; }
    .section-card iframe { width: 100%; }
    .main-header, .header-inner { max-width: 100%; }
    .main-nav { gap: 8px; }
    .header-actions { min-width: 0; }
}