/* =========================================================
   REAL ESTATE WEBSITE
   MASTER STYLESHEET
   LIGHT GREEN DESIGN SYSTEM
   ========================================================= */


/* =========================================================
   DESIGN SYSTEM
   ========================================================= */

@import url("variables.css");


/* =========================================================
   COMPONENT MODULES
   ========================================================= */

@import url("components.css");

@import url("navbar.css");

@import url("footer.css");

@import url("properties.css");

@import url("property-details.css");

@import url("about.css");

@import url("contact.css");

@import url("faq.css");

@import url("legal.css");

@import url("animations.css");

@import url("responsive.css");


/* =========================================================
   HOMEPAGE
   IMPORTANT:
   home.css is the current modern homepage design.
   The old homepage.css black/gold theme is intentionally
   NOT loaded.
========================================================= */

@import url("home.css");


/* =========================================================
   RESET
   ========================================================= */

*,
*::before,
*::after {

    box-sizing:
        border-box;

}


html {

    scroll-behavior:
        smooth;

}


body {

    margin:
        0;

    padding:
        0;

    font-family:
        'DM Sans',
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        16px;

    font-weight:
        400;

    color:
        var(--text);

    background:
        var(--white);

    line-height:
        1.7;

    overflow-x:
        hidden;

    -webkit-font-smoothing:
        antialiased;

    -moz-osx-font-smoothing:
        grayscale;

}


img {

    display:
        block;

    max-width:
        100%;

    height:
        auto;

}


a {

    color:
        inherit;

    text-decoration:
        none;

    transition:
        var(--transition);

}


a:hover {

    text-decoration:
        none;

}


button,
input,
textarea,
select {

    font-family:
        inherit;

}


button {

    cursor:
        pointer;

}


ul,
ol {

    margin:
        0;

    padding:
        0;

}


ul {

    list-style:
        none;

}


/* =========================================================
   TYPOGRAPHY
   ========================================================= */

h1,
h2,
h3,
h4,
h5,
h6 {

    margin-top:
        0;

    margin-bottom:
        0.75rem;

    font-family:
        'Playfair Display',
        Georgia,
        'Times New Roman',
        serif;

    font-weight:
        600;

    line-height:
        1.2;

    color:
        var(--text);

}


h1 {

    font-size:
        clamp(2.5rem, 5vw, 4.8rem);

}


h2 {

    font-size:
        clamp(2rem, 4vw, 3.4rem);

}


h3 {

    font-size:
        clamp(1.5rem, 3vw, 2.2rem);

}


h4 {

    font-size:
        1.5rem;

}


h5 {

    font-size:
        1.15rem;

}


h6 {

    font-size:
        1rem;

}


p {

    margin-top:
        0;

    margin-bottom:
        1rem;

}


.text-gold {

    color:
        var(--gold) !important;

}


.text-muted {

    color:
        var(--text-light) !important;

}


/* =========================================================
   GLOBAL LAYOUT
   ========================================================= */

.section {

    padding:
        100px 0;

}


.section-sm {

    padding:
        70px 0;

}


.section-dark {

    background:
        var(--black);

    color:
        var(--white);

}


.section-light {

    background:
        var(--off-white);

}


.section-heading {

    max-width:
        720px;

}


.section-label {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        9px;

    margin-bottom:
        15px;

    color:
        var(--gold-dark);

    font-size:
        0.78rem;

    font-weight:
        700;

    text-transform:
        uppercase;

    letter-spacing:
        0.16em;

}


.section-label::before {

    content:
        "";

    width:
        28px;

    height:
        1px;

    background:
        var(--gold);

}


.section-title {

    margin-bottom:
        18px;

}


.section-description {

    max-width:
        650px;

    color:
        var(--text-light);

}


/* =========================================================
   BUTTONS
   ========================================================= */

.btn-gold {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    min-height:
        48px;

    padding:
        12px 22px;

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

    border-radius:
        6px;

    background:
        var(--gold);

    color:
        var(--black);

    font-size:
        0.92rem;

    font-weight:
        700;

    line-height:
        1;

    transition:
        var(--transition);

}


.btn-gold:hover {

    background:
        var(--gold-light);

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

    color:
        var(--black);

    transform:
        translateY(-2px);

    box-shadow:
        var(--shadow-gold);

}


.btn-outline-gold {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    min-height:
        48px;

    padding:
        12px 22px;

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

    border-radius:
        6px;

    background:
        transparent;

    color:
        var(--gold);

    font-size:
        0.92rem;

    font-weight:
        700;

    line-height:
        1;

    transition:
        var(--transition);

}


.btn-outline-gold:hover {

    background:
        var(--gold);

    color:
        var(--black);

    transform:
        translateY(-2px);

}


.btn-dark {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    min-height:
        48px;

    padding:
        12px 22px;

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

    border-radius:
        6px;

    background:
        var(--black);

    color:
        var(--white);

    font-size:
        0.92rem;

    font-weight:
        700;

    line-height:
        1;

    transition:
        var(--transition);

}


.btn-dark:hover {

    background:
        var(--dark);

    color:
        var(--gold-light);

    transform:
        translateY(-2px);

}


/* =========================================================
   FORMS
   ========================================================= */

.form-control,
.form-select {

    min-height:
        50px;

    padding:
        12px 15px;

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

    border-radius:
        8px;

    background:
        var(--white);

    color:
        var(--text);

    transition:
        var(--transition);

}


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

    border-color:
        var(--gold);

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

}


textarea.form-control {

    min-height:
        140px;

    resize:
        vertical;

}


/* =========================================================
   UTILITY CLASSES
   ========================================================= */

.bg-black {

    background:
        var(--black) !important;

}


.bg-gold {

    background:
        var(--gold) !important;

}


.bg-off-white {

    background:
        var(--off-white) !important;

}


.border-gold {

    border-color:
        var(--gold) !important;

}


.rounded-luxury {

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

}


.shadow-luxury {

    box-shadow:
        var(--shadow-lg);

}


/* =========================================================
   TEXT SELECTION
   ========================================================= */

::selection {

    background:
        var(--gold);

    color:
        var(--black);

}


/* =========================================================
   SCROLLBAR
   ========================================================= */

::-webkit-scrollbar {

    width:
        8px;

}


::-webkit-scrollbar-track {

    background:
        var(--black);

}


::-webkit-scrollbar-thumb {

    background:
        var(--gold-dark);

    border-radius:
        10px;

}


::-webkit-scrollbar-thumb:hover {

    background:
        var(--gold);

}


/* =========================================================
   GLOBAL FRONTEND CONTAINER FIX
   Prevents the website from becoming unnecessarily narrow
========================================================= */

body {
    width: 100%;
    min-width: 0;
    overflow-x: hidden;
}

.container {
    width: 100%;
    max-width: 1320px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 24px;
    padding-right: 24px;
}


/* Large desktop */
@media (min-width: 1400px) {

    .container {
        max-width: 1380px !important;
    }

}


/* Desktop */
@media (min-width: 1200px) and (max-width: 1399.98px) {

    .container {
        max-width: 1140px !important;
    }

}


/* Tablet */
@media (min-width: 992px) and (max-width: 1199.98px) {

    .container {
        max-width: 960px !important;
    }

}


/* Small tablet */
@media (min-width: 768px) and (max-width: 991.98px) {

    .container {
        max-width: 720px !important;
        padding-left: 20px;
        padding-right: 20px;
    }

}


/* Mobile */
@media (max-width: 767.98px) {

    .container {
        max-width: 100% !important;
        padding-left: 16px;
        padding-right: 16px;
    }

}

/* =========================================================
   FINAL RESPONSIVE SYSTEM
   Luxury Estates — mobile, tablet, desktop and large screens
   These rules intentionally come last so they safely override
   conflicting legacy/duplicate component rules without
   changing the existing visual design.
========================================================= */


/* =========================================================
   FINAL RESPONSIVE SYSTEM
   Luxury Estates — mobile, tablet, desktop and large screens
   These rules intentionally come last so they safely override
   conflicting legacy/duplicate component rules without
   changing the existing visual design.
========================================================= */

html,
body {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
}

img,
svg,
video,
canvas {
    max-width: 100%;
}

button,
a,
input,
select,
textarea {
    max-width: 100%;
}

/* Keep Bootstrap containers genuinely fluid on every screen. */
.container,
.container-fluid {
    width: 100%;
}

/* ---------------------------------------------------------
   NAVIGATION
--------------------------------------------------------- */

@media (max-width: 991.98px) {
    .luxury-navbar .container {
        width: 100%;
        min-height: 52px;
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
    }

    .luxury-logo {
        min-width: 0;
        max-width: calc(100% - 58px);
        overflow: hidden;
    }

    .luxury-logo .logo-text {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .luxury-toggler {
        display: block !important;
        flex: 0 0 44px;
        margin-left: auto;
    }

    .luxury-navbar .navbar-collapse {
        width: 100%;
        flex-basis: 100%;
    }

    .luxury-navbar .navbar-nav {
        width: 100%;
        margin-right: 0 !important;
    }

    .luxury-navbar .navbar-actions {
        width: 100%;
    }
}

@media (max-width: 575.98px) {
    .luxury-navbar {
        padding: 9px 0;
    }

    .luxury-logo {
        gap: 8px;
        font-size: .98rem;
    }

    .luxury-navbar .logo-mark {
        width: 36px;
        height: 36px;
        flex: 0 0 36px;
    }

    .luxury-navbar .luxury-logo-image {
        max-width: 34px;
        max-height: 34px;
    }

    .luxury-toggler {
        width: 42px;
        height: 40px;
        flex-basis: 42px;
    }
}

/* ---------------------------------------------------------
   HOMEPAGE
--------------------------------------------------------- */

.modern-home {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

.modern-home .mh-hero,
.modern-home .mh-search-section,
.modern-home .mh-featured,
.modern-home .mh-categories,
.modern-home .mh-stats-band,
.modern-home .mh-about,
.modern-home .mh-benefits,
.modern-home .mh-process,
.modern-home .mh-latest,
.modern-home .mh-faq,
.modern-home .mh-cta {
    width: 100%;
}

.modern-home .mh-hero-image-card,
.modern-home .mh-property-photo,
.modern-home .mh-latest-image,
.modern-home .mh-about-visual,
.modern-home .mh-about-visual > img {
    width: 100%;
    max-width: 100%;
}

.modern-home .mh-hero-image-card img,
.modern-home .mh-property-photo > img,
.modern-home .mh-latest-image > img,
.modern-home .mh-about-visual > img {
    width: 100%;
    max-width: 100%;
}

@media (min-width: 1400px) {
    .modern-home .mh-hero {
        min-height: 680px;
    }

    .modern-home .mh-hero h1 {
        font-size: clamp(64px, 5.4vw, 82px);
    }
}

@media (max-width: 1199.98px) {
    .modern-home .mh-hero h1 {
        letter-spacing: -2px;
    }

    .modern-home .mh-hero-visual {
        width: 100%;
    }
}

@media (max-width: 991.98px) {
    .modern-home .mh-hero .row {
        align-items: stretch !important;
    }

    .modern-home .mh-hero .col-lg-6 {
        width: 100%;
    }

    .modern-home .mh-hero-content {
        width: 100%;
    }

    .modern-home .mh-hero h1 {
        max-width: 100%;
        font-size: clamp(44px, 8vw, 62px);
    }

    .modern-home .mh-hero-image-card {
        width: 100%;
        min-height: 480px;
        height: auto;
    }

    .modern-home .mh-search-form {
        width: 100%;
    }
}

@media (max-width: 767.98px) {
    .modern-home .mh-hero {
        padding: 48px 0 85px;
    }

    .modern-home .mh-hero h1 {
        font-size: clamp(36px, 10vw, 49px);
        line-height: 1;
        letter-spacing: -1.5px;
    }

    .modern-home .mh-hero-content > p {
        max-width: 100%;
        font-size: 13px;
        line-height: 1.7;
    }

    .modern-home .mh-hero-actions {
        width: 100%;
    }

    .modern-home .mh-hero-actions .mh-btn {
        width: 100%;
    }

    .modern-home .mh-trust-row {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .modern-home .mh-trust-item {
        min-width: 0;
        width: 100%;
    }

    .modern-home .mh-trust-item:last-child {
        grid-column: 1 / -1;
    }

    .modern-home .mh-hero-image-card {
        min-height: 390px;
        border-radius: 16px;
    }

    .modern-home .mh-hero-property-info {
        left: 16px;
        right: 16px;
        bottom: 16px;
        gap: 12px;
    }

    .modern-home .mh-hero-property-info h2 {
        font-size: 24px;
    }

    .modern-home .mh-hero-property-info p {
        font-size: 10px;
        line-height: 1.45;
    }

    .modern-home .mh-hero-property-info > strong {
        font-size: 12px;
        white-space: normal;
        text-align: right;
    }

    .modern-home .mh-hero-image-top {
        left: 12px;
        right: 12px;
        top: 12px;
    }

    .modern-home .mh-floating-review {
        top: auto !important;
        right: 12px !important;
        bottom: 105px !important;
        left: auto !important;
        transform: none !important;
        max-width: min(245px, calc(100% - 24px)) !important;
    }

    .modern-home .mh-search-section {
        margin-top: -38px;
    }

    .modern-home .mh-search-card {
        padding: 18px;
        border-radius: 14px;
    }

    .modern-home .mh-search-form {
        grid-template-columns: 1fr !important;
    }

    .modern-home .mh-search-field,
    .modern-home .mh-search-button {
        min-width: 0;
        width: 100%;
    }

    .modern-home .mh-category-grid,
    .modern-home .mh-benefits .row {
        width: 100%;
    }

    .modern-home .mh-category {
        min-width: 0;
    }

    .modern-home .mh-section-head,
    .modern-home .mh-section-side-text {
        width: 100%;
        max-width: 100% !important;
    }

    .modern-home .mh-section-head h2,
    .modern-home .mh-centered h2,
    .modern-home .mh-about-content h2,
    .modern-home .mh-faq h2,
    .modern-home .mh-cta h2 {
        font-size: clamp(30px, 8vw, 40px);
        letter-spacing: -1px;
    }

    .modern-home .mh-carousel-shell {
        width: 100%;
        max-width: 100%;
    }

    .modern-home .mh-carousel {
        width: 100%;
    }

    .modern-home .mh-carousel-slide {
        flex-basis: 100% !important;
        min-width: 100%;
    }

    .modern-home .mh-property-card,
    .modern-home .mh-latest-card {
        width: 100%;
    }

    .modern-home .mh-property-photo {
        min-height: 240px;
    }

    .modern-home .mh-latest-image {
        min-height: 240px;
    }
}

@media (max-width: 480px) {
    .modern-home .mh-hero {
        padding-top: 40px;
    }

    .modern-home .mh-hero h1 {
        font-size: 36px;
    }

    .modern-home .mh-hero-image-card {
        min-height: 330px;
    }

    .modern-home .mh-hero-property-info {
        flex-direction: column;
        align-items: flex-start;
    }

    .modern-home .mh-hero-property-info > strong {
        text-align: left;
    }

    .modern-home .mh-floating-review {
        bottom: 118px !important;
        max-width: calc(100% - 24px) !important;
    }
}

/* ---------------------------------------------------------
   PROPERTY LISTING PAGE
--------------------------------------------------------- */

.property-listing-page,
.property-listing-page .container {
    width: 100%;
    max-width: 100%;
}

.property-listing-page img,
.property-card-image {
    max-width: 100%;
}

@media (max-width: 991.98px) {
    .property-listing-header,
    .property-listing-summary,
    .property-filter-card,
    .property-results-bar,
    .property-grid,
    .property-listing-cta {
        width: 100%;
    }

    .property-filter-card {
        overflow: hidden;
    }
}

@media (max-width: 767.98px) {
    .property-listing-heading h1 {
        font-size: clamp(34px, 9vw, 43px);
        line-height: 1.05;
    }

    .property-listing-summary {
        grid-template-columns: 1fr !important;
    }

    .property-filter-grid,
    .property-grid {
        grid-template-columns: 1fr !important;
    }

    .property-card-image {
        height: 240px;
    }

    .property-results-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
}

/* ---------------------------------------------------------
   PROPERTY DETAILS PAGE
--------------------------------------------------------- */

.property-details-page,
.property-details-page .container {
    width: 100%;
    max-width: 100%;
}

.property-details-main-image,
.property-details-main-image img,
.property-details-thumbnail,
.property-details-thumbnail img {
    max-width: 100%;
}

@media (max-width: 991.98px) {
    .property-details-hero,
    .property-details-layout {
        grid-template-columns: 1fr !important;
    }

    .property-details-summary {
        width: 100%;
    }
}

@media (max-width: 767.98px) {
    .property-details-page {
        padding-top: 20px;
    }

    .property-details-main-image {
        height: min(72vw, 380px) !important;
        min-height: 260px;
    }

    .property-details-summary {
        padding: 22px 18px !important;
    }

    .property-details-summary h1 {
        font-size: clamp(30px, 9vw, 38px) !important;
        overflow-wrap: anywhere;
    }

    .property-details-price strong {
        max-width: 100%;
        font-size: clamp(28px, 8vw, 44px);
        overflow-wrap: anywhere;
    }

    .property-details-thumbnails {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }

    .property-details-thumbnail {
        min-width: 0;
        height: 68px;
    }

    .property-details-section,
    .property-inquiry-card {
        width: 100%;
        max-width: 100%;
        overflow-wrap: anywhere;
    }
}

@media (max-width: 480px) {
    .property-details-thumbnails {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .property-details-thumbnail {
        height: 70px;
    }
}

/* ---------------------------------------------------------
   GENERAL PAGE SAFETY / FORMS
--------------------------------------------------------- */

@media (max-width: 767.98px) {
    .about-page,
    .contact-page,
    .faq-page,
    .legal-page {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
    }

    .about-page .row,
    .contact-page .row,
    .faq-page .row,
    .legal-page .row {
        --bs-gutter-x: 1.25rem;
    }

    .contact-form-card,
    .contact-info-list,
    .faq-list,
    .legal-document,
    .legal-sidebar {
        max-width: 100%;
    }

    input,
    select,
    textarea {
        width: 100%;
        min-width: 0;
    }

    .btn,
    .property-filter-button,
    .property-reset-button,
    .property-cta-button,
    .legal-cta-button,
    .contact-submit-button {
        max-width: 100%;
    }
}

/* ---------------------------------------------------------
   LARGE SCREENS
--------------------------------------------------------- */

@media (min-width: 1600px) {
    .container {
        max-width: 1440px !important;
    }

    .modern-home .mh-hero .container {
        max-width: 1440px !important;
    }
}