.footer-box {
    position: relative;
    z-index: 2;
    display: grid;
}

i.fas.fa-envelope {
    transform: rotate(359deg);
}

i.fas.fa-phone-alt {
    transform: rotate(107deg);
}

.location-trigger-btn {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    padding: 10px 14px !important;
    border-radius: 999px;
    background: #fff8ef;
    border: 1px solid #efd9b6;
    color: #7b5b35 !important;
    font-weight: 700;
    transition: all .25s ease;
    text-decoration: none !important;
}

    .location-trigger-btn:hover,
    .header-location-badge:hover {
        background: #fdf1dd;
        color: #5f4528 !important;
    }

.location-nav-icon,
.location-arrow-icon {
    color: #c29b40;
    font-size: 14px;
}

.location-nav-text {
    max-width: 180px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.header-location-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff8ef;
    border: 1px solid #efd9b6;
    color: #7b5b35 !important;
    padding: 10px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none !important;
    transition: all .25s ease;
}

.mobile-location-wrap {
    padding: 14px 0 10px;
}

.mobile-location-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 14px;
    border-radius: 14px;
    background: #fff8ef;
    border: 1px solid #efd9b6;
    color: #7b5b35 !important;
    font-weight: 700;
    text-decoration: none !important;
}

.location-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(4px);
    padding: 20px;
    overflow-y: auto;
    display: none;
}

.location-modal-box {
    width: 100%;
    max-width: 920px;
    margin: 35px auto;
    background: #fff;
    border-radius: 26px;
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.22);
    overflow: hidden;
    animation: locationPop .22s ease;
}

@keyframes locationPop {
    from {
        transform: translateY(18px) scale(.98);
        opacity: 0;
    }

    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

.location-modal-header {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    align-items: flex-start;
    padding: 22px 24px 14px;
    border-bottom: 1px solid #edf2f7;
}

    .location-modal-header h4 {
        margin: 0 0 6px;
        font-size: 24px;
        font-weight: 800;
        color: #0f172a;
    }

    .location-modal-header p {
        margin: 0;
        color: #64748b;
        font-size: 14px;
        line-height: 1.7;
    }

.location-close-btn {
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 50%;
    background: #f8fafc;
    color: #334155;
    transition: .25s ease;
}

    .location-close-btn:hover {
        background: #eef2f7;
    }

.location-search-wrap {
    position: relative;
    padding: 18px 24px 10px;
}

    .location-search-wrap i {
        position: absolute;
        left: 40px;
        top: 50%;
        transform: translateY(-50%);
        color: #94a3b8;
    }

    .location-search-wrap input {
        width: 100%;
        height: 52px;
        border-radius: 16px;
        border: 1px solid #dce5ef;
        padding: 0 16px 0 46px;
        font-size: 14px;
        font-weight: 500;
        outline: none;
    }

        .location-search-wrap input:focus {
            border-color: #c29b40;
            box-shadow: 0 0 0 3px rgba(194,155,64,.10);
        }

.popular-location-wrap {
    padding: 6px 24px 12px;
}

.popular-location-title {
    font-size: 13px;
    font-weight: 800;
    color: #475569;
    margin-bottom: 10px;
}

.popular-location-list {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.popular-location-chip {
    border: 1px solid #efd9b6;
    background: #fff8ef;
    color: #7b5b35;
    border-radius: 999px;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 700;
    transition: .25s ease;
}

    .popular-location-chip:hover {
        background: #f8ecd5;
    }

.location-state-city-wrap {
    max-height: 460px;
    overflow-y: auto;
    padding: 8px 24px 24px;
}

.location-state-block {
    border: 1px solid #edf2f7;
    border-radius: 20px;
    margin-top: 14px;
    overflow: hidden;
    background: #fcfdff;
}

.location-state-head {
    padding: 14px 18px;
    background: #f8fafc;
    border-bottom: 1px solid #edf2f7;
    font-size: 16px;
    font-weight: 800;
    color: #0f172a;
}

.location-city-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 16px;
}

.location-city-btn {
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #334155;
    border-radius: 999px;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 700;
    transition: all .25s ease;
}

    .location-city-btn:hover {
        background: #fff8ef;
        border-color: #e9c88a;
        color: #7b5b35;
        transform: translateY(-1px);
    }

.footer {
    background: #544027;
    color: #cbd5e1;
    margin-top: 0;
}

.footer-top {
    padding: 70px 0 40px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.footer-widget {
    margin-bottom: 30px;
}

.footer-logo {
    margin-bottom: 18px;
}

    .footer-logo img {
        max-height: 80px;
        width: auto;
        display: block;
        margin: 0 auto;
        transform: translateX(-20px);
    }

.footer-about {
    font-size: 15px;
    line-height: 1.9;
    color: #cbd5e1;
    margin-bottom: 20px;
    max-width: 360px;
}

.footer-title {
    color: #ffffff;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 22px;
    position: relative;
}

.footer-links,
.footer-contact,
.footer-social {
    list-style: none;
    margin: 0;
    padding: 0;
}

    .footer-links li,
    .footer-contact li {
        margin-bottom: 12px;
    }

        .footer-links li a,
        .footer-contact li a {
            color: #cbd5e1;
            text-decoration: none;
            transition: all 0.3s ease;
            font-size: 15px;
            line-height: 1.8;
        }

            .footer-links li a:hover,
            .footer-contact li a:hover {
                color: #ffffff;
                padding-left: 4px;
            }

    .footer-contact li {
        color: #cbd5e1;
        font-size: 15px;
        line-height: 1.8;
        display: flex;
        align-items: flex-start;
        gap: 10px;
    }

        .footer-contact li i {
            color: #c29b40;
            font-size: 16px;
            margin-top: 6px;
            min-width: 16px;
        }

.footer-social {
    display: flex;
    gap: 10px;
    margin-top: 20px;
    flex-wrap: wrap;
}

    .footer-social li {
        margin: 0;
    }

        .footer-social li a {
            width: 38px;
            height: 38px;
            border-radius: 50%;
            background: rgba(255,255,255,0.08);
            color: #ffffff;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
            transition: all 0.3s ease;
        }

            .footer-social li a:hover {
                background: #c29b40;
                color: #111827;
                transform: translateY(-2px);
            }

.footer-app-box {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    padding: 16px 18px;
    margin-top: 18px;
}

    .footer-app-box p {
        margin: 0;
        color: #cbd5e1;
        font-size: 14px;
        line-height: 1.8;
    }

.footer-bottom {
    padding: 18px 0;
    background: #544a2b;
}

.footer-bottom-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    flex-wrap: wrap;
}

.footer-bottom p {
    margin: 0;
    color: #94a3b8;
    font-size: 14px;
}

.footer-bottom-links {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

    .footer-bottom-links a {
        color: #94a3b8;
        text-decoration: none;
        font-size: 14px;
        transition: all 0.3s ease;
    }

        .footer-bottom-links a:hover {
            color: #ffffff;
        }

@media (max-width: 991px) {
    .footer-top {
        padding: 55px 0 25px;
    }
}

@media (max-width: 767px) {
    .footer-title {
        font-size: 18px;
        margin-bottom: 16px;
    }

    .footer-bottom-inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .footer-bottom-links {
        gap: 12px;
    }

    .location-modal-overlay {
        padding: 12px;
    }

    .location-modal-box {
        margin: 10px auto;
        border-radius: 18px;
    }

    .location-modal-header,
    .location-search-wrap,
    .popular-location-wrap,
    .location-state-city-wrap {
        padding-left: 16px;
        padding-right: 16px;
    }

    .location-nav-text {
        max-width: 130px;
    }
    /* .main-menu-wrapper {
                          display: none !important;
                      }*/
    a#mobile_btn {
        display: none !important;
    }
}

/*mobail new css start*/

/* =========================
             LOGO SETUP
          ========================= */
.desktop-logo-wrap,
.desktop-menu-logo {
    display: flex !important;
    align-items: center !important;
}

.mobile-logo-wrap,
.mobile-menu-logo {
    display: none !important;
}

.desktop-logo-img {
    max-height: 62px !important;
    width: auto !important;
    object-fit: contain !important;
}

.mobile-logo-img {
    max-height: 44px !important;
    width: auto !important;
    object-fit: contain !important;
}

.header-logo-latests {
    max-height: 56px !important;
    width: auto !important;
    object-fit: contain !important;
}

/* =========================
             DESKTOP LOCATION BUTTON
          ========================= */
.location-trigger-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    min-height: 44px !important;
    padding: 10px 16px !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    color: #111827 !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06) !important;
    transition: all 0.3s ease !important;
    white-space: nowrap !important;
}

    .location-trigger-btn:hover {
        background: #f9fafb !important;
        color: #111827 !important;
        border-color: #d1d5db !important;
        transform: translateY(-1px) !important;
    }

.location-nav-icon,
.location-arrow-icon {
    font-size: 14px !important;
}

.location-nav-text {
    max-width: 150px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* =========================
             MOBILE LOCATION BUTTON
          ========================= */
.mobile-location-wrap {
    display: none !important;
    width: 100% !important;
    margin-top: 14px !important;
}

.mobile-location-btn {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    min-height: 46px !important;
    padding: 12px 14px !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important;
    border: 1px solid #dbeafe !important;
    color: #111827 !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.07) !important;
    overflow: hidden !important;
}

    .mobile-location-btn span {
        display: inline-block !important;
        max-width: calc(100% - 50px) !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

/* =========================
             HEADER ALIGNMENT
          ========================= */
.navbar-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    /* width: 100% !important;*/
}

.mobile-header-actions {
    margin-left: auto !important;
}

.mobile-login-icon {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #f3f4f6 !important;
    color: #111827 !important;
    text-decoration: none !important;
}

/* =========================
             MOBILE RESPONSIVE
          ========================= */
@media (max-width: 600px) {
    /*  .desktop-logo-wrap,
              .desktop-menu-logo,
              .desktop-location-item {
                  display: none !important;
              }*/

    .mobile-logo-wrap,
    .mobile-menu-logo {
        display: flex !important;
        align-items: center !important;
    }

    .mobile-location-wrap {
        display: block !important;
    }

    .navbar-header {
        padding: 8px 0 !important;
    }

    .mobile-logo-img {
        max-height: 44px !important;
    }

    .main-menu-wrapper {
        padding: 16px !important;
    }

    .menu-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        margin-bottom: 14px !important;
    }
}

/* =========================
             DESKTOP RESPONSIVE
          ========================= */
@media (min-width: 991.98px) {
    .mobile-logo-wrap,
    .mobile-menu-logo,
    .mobile-location-wrap {
        display: none !important;
    }

    .desktop-logo-wrap,
    .desktop-menu-logo {
        display: flex !important;
    }
}

/* =========================
             SMALL MOBILE
          ========================= */
@media (max-width: 600px) {

    .mobile-logo-img {
        max-height: 44px !important;
    }

    .mobile-location-btn {
        min-height: 44px !important;
        font-size: 14px !important;
        padding: 10px 12px !important;
        border-radius: 12px !important;
    }

    .location-modal-box {
        width: calc(100% - 20px) !important;
        margin: 10px !important;
        border-radius: 16px !important;
    }
}

@media (max-width: 767px) {
    .main-menu-wrapper {
        display: none !important;
    }
}
/* mobile top location row */
.mobile-top-location {
    display: none;
}

    .mobile-top-location .mobile-location-btn {
        width: 100%;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        min-height: 42px !important;
        padding: 10px 14px !important;
        border-radius: 12px !important;
        background: #fff8ef !important;
        border: 1px solid #efd9b6 !important;
        color: #7b5b35 !important;
        font-weight: 700 !important;
        text-decoration: none !important;
        box-shadow: 0 6px 16px rgba(0,0,0,.06) !important;
    }

        .mobile-top-location .mobile-location-btn span {
            display: inline-block;
            max-width: calc(100% - 48px);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

/* better mobile header layout */
@media (max-width: 767px) {
    .navbar-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        padding: 10px 0 6px !important;
    }

    #mobile_btn {
        display: none !important;
    }
    /*.desktop-logo-wrap,
          .desktop-menu-logo,
          .desktop-location-item,
          .header-navbar-rht,
          .main-menu-wrapper {
              display: none !important;
          }
      */
    .mobile-logo-wrap {
        display: flex !important;
        align-items: center !important;
        margin: 0 !important;
    }

    .mobile-logo-img {
        max-height: 44px !important;
        width: auto !important;
        object-fit: contain !important;
    }

    .mobile-header-actions {
        display: flex !important;
        align-items: center !important;
        margin-left: auto !important;
    }

    .mobile-top-location {
        display: block !important;
        width: 100% !important;
        margin-top: 6px !important;
    }

    .header-nav {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
    }
}

.header-location-inline {
    display: flex;
    align-items: center;
    margin-left: 14px;
}

li.desktop-location-item.media-latest {
    display: none;
}

@media (max-width: 767px) {



    .main-menu-wrapper {
        display: none !important;
    }

    #mobile_btn {
        display: none !important;
    }

    .navbar-header {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 8px !important;
        width: 100% !important;
        padding: 8px 0 !important;
    }

    .desktop-logo-wrap {
        display: none !important;
    }

    .mobile-logo-wrap {
        display: flex !important;
        align-items: center !important;
        margin: 0 !important;
        flex: 0 0 auto !important;
    }

    .mobile-logo-img {
        max-height: 44px !important;
        width: auto !important;
        object-fit: contain !important;
    }

    .header-location-inline {
        display: flex !important;
        align-items: center !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        margin-left: 0 !important;
    }

    .desktop-location-item {
        display: flex !important;
        align-items: center !important;
    }

    .location-trigger-btn {
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        min-height: 34px !important;
        padding: 6px 10px !important;
        border-radius: 999px !important;
        max-width: 100% !important;
    }

    .location-nav-text {
        max-width: 92px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        font-size: 12px !important;
    }

    .location-nav-icon,
    .location-arrow-icon {
        font-size: 11px !important;
    }

    .mobile-header-actions {
        margin-left: auto !important;
        flex: 0 0 auto !important;
    }
}

.by-ad-container {
    width: min(1320px, calc(100% - 40px));
    margin: auto;
}




/* ============================================================
      BHOOMIYUG - GLOBAL NAV SEARCH
      Visible on every page except Default/Index (Home).
      ============================================================ */
.desktop-location-item,
.mobile-location-wrap {
    display: none !important;
}

.by-header-search-wrap {
    position: relative;
    flex: 1 1 640px;
    min-width: 360px;
    max-width: 720px;
    margin: 0 18px;
    z-index: 10010;
}

.by-header-search {
    width: 100%;
    min-height: 46px;
    display: flex;
    align-items: center;
    gap: 0;
    padding: 4px 5px 4px 6px;
    background: #ffffff;
    border: 1px solid #e6e8ec;
    border-radius: 14px;
    box-shadow: 0 5px 20px rgba(38, 30, 18, .07);
    transition: border-color .2s ease, box-shadow .2s ease;
}

    .by-header-search:focus-within {
        border-color: #d4a017;
        box-shadow: 0 8px 24px rgba(212, 160, 23, .12);
    }

.by-search-type-wrap {
    position: relative;
    flex: 0 0 auto;
}

.by-search-type-btn {
    border: 0;
    background: transparent;
    height: 36px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #3d321f;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
}

    .by-search-type-btn > i:first-child {
        color: #b18424;
        font-size: 13px;
    }

    .by-search-type-btn > i:last-child {
        color: #7d7468;
        font-size: 10px;
        transition: transform .2s ease;
    }

.by-search-type-wrap.is-open .by-search-type-btn > i:last-child {
    transform: rotate(180deg);
}

.by-search-type-menu {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    width: 235px;
    padding: 7px;
    background: #fff;
    border: 1px solid #eee6d8;
    border-radius: 14px;
    box-shadow: 0 18px 50px rgba(35, 27, 15, .16);
}

.by-search-type-wrap.is-open .by-search-type-menu {
    display: block;
}

.by-search-type-menu button {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 11px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #30291f;
    text-align: left;
    cursor: pointer;
}

    .by-search-type-menu button:hover,
    .by-search-type-menu button.active {
        background: #fff8e9;
    }

    .by-search-type-menu button > i {
        width: 32px;
        height: 32px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 9px;
        background: #f8f1e4;
        color: #a87917;
    }

    .by-search-type-menu button span {
        display: flex;
        flex-direction: column;
        line-height: 1.2;
    }

    .by-search-type-menu button small {
        margin-top: 3px;
        color: #8c857a;
        font-size: 10px;
        font-weight: 500;
    }

.by-search-divider {
    width: 1px;
    height: 25px;
    background: #e9e5df;
    flex: 0 0 auto;
}

.by-search-city-chip {
    max-width: 135px;
    height: 34px;
    margin: 0 5px 0 8px;
    padding: 0 8px 0 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid #e4c77f;
    border-radius: 999px;
    background: #fff9eb;
    color: #6b531d;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
}

    .by-search-city-chip > i:first-child {
        color: #b18424;
        font-size: 11px;
    }

    .by-search-city-chip span {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .by-search-city-chip > i:last-child {
        font-size: 10px;
        color: #8b7650;
    }

.by-search-input-wrap {
    min-width: 80px;
    flex: 1 1 auto;
    height: 36px;
    display: flex;
    align-items: center;
    gap: 7px;
    color: #9b968e;
}

    .by-search-input-wrap > i {
        font-size: 12px;
        flex: 0 0 auto;
    }

    .by-search-input-wrap input {
        width: 100%;
        min-width: 50px;
        height: 34px;
        padding: 0;
        border: 0 !important;
        outline: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
        color: #2e2a24;
        font-size: 12px;
        font-weight: 500;
    }

        .by-search-input-wrap input::placeholder {
            color: #aaa49c;
        }

.by-search-clear {
    display: none;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #f3f1ed;
    color: #70695f;
    cursor: pointer;
    flex: 0 0 auto;
}

    .by-search-clear.is-visible {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

.by-search-filter-btn,
.by-search-submit {
    flex: 0 0 auto;
    height: 36px;
    border-radius: 10px;
    border: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 800;
    transition: .2s ease;
}

.by-search-filter-btn {
    min-width: 74px;
    padding: 0 9px;
    margin-left: 4px;
    background: #f8f5ef;
    color: #5b4a2d;
    border: 1px solid #ece4d5;
}

    .by-search-filter-btn:hover,
    .by-search-filter-btn.is-active {
        background: #fff2cf;
        border-color: #e2c273;
    }

    .by-search-filter-btn b {
        min-width: 17px;
        height: 17px;
        padding: 0 4px;
        border-radius: 999px;
        background: #3e3322;
        color: #fff;
        font-size: 9px;
        line-height: 17px;
    }

.by-search-submit {
    min-width: 78px;
    padding: 0 12px;
    margin-left: 5px;
    background: #4b3b22;
    color: #fff;
    box-shadow: 0 5px 12px rgba(75, 59, 34, .16);
}

    .by-search-submit:hover {
        background: #332815;
        transform: translateY(-1px);
    }

.by-header-active-chips {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 0;
    padding: 0 4px;
    margin-top: 5px;
    overflow-x: auto;
    scrollbar-width: none;
}

    .by-header-active-chips::-webkit-scrollbar {
        display: none;
    }

.by-active-chip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    border-radius: 999px;
    border: 1px solid #e9dcc2;
    background: #fffaf0;
    color: #604d28;
    font-size: 10px;
    font-weight: 700;
}

    .by-active-chip button {
        width: 15px;
        height: 15px;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: transparent;
        color: #8b7650;
        cursor: pointer;
        font-size: 9px;
    }

.by-header-filter-panel {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: min(620px, 100vw - 30px);
    padding: 16px;
    background: #fff;
    border: 1px solid #eee6d8;
    border-radius: 18px;
    box-shadow: 0 22px 60px rgba(35, 27, 15, .18);
}

    .by-header-filter-panel.is-open {
        display: block;
    }

.by-filter-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 13px;
}

.by-filter-eyebrow {
    display: block;
    margin-bottom: 3px;
    color: #a87917;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.by-filter-panel-head strong {
    color: #2f2a23;
    font-size: 15px;
    font-weight: 800;
}

.by-filter-panel-head > button {
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 50%;
    background: #f6f3ed;
    color: #5b554d;
    cursor: pointer;
}

.by-filter-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
}

    .by-filter-grid label {
        display: flex;
        flex-direction: column;
        gap: 5px;
        margin: 0;
    }

        .by-filter-grid label span {
            color: #6d655b;
            font-size: 10px;
            font-weight: 800;
        }

    .by-filter-grid select,
    .by-filter-grid input {
        width: 100%;
        height: 38px;
        padding: 0 10px;
        border: 1px solid #e5e0d8;
        border-radius: 9px;
        background: #fff;
        color: #3d372f;
        font-size: 11px;
        outline: 0;
    }

        .by-filter-grid select:focus,
        .by-filter-grid input:focus {
            border-color: #d4a017;
            box-shadow: 0 0 0 3px rgba(212, 160, 23, .09);
        }

.by-filter-panel-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #f0ece6;
}

.by-filter-reset,
.by-filter-apply {
    min-height: 36px;
    padding: 0 13px;
    border-radius: 9px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 800;
}

.by-filter-reset {
    border: 1px solid #e3ddd3;
    background: #fff;
    color: #665d51;
}

.by-filter-apply {
    border: 0;
    background: #4b3b22;
    color: #fff;
}

@media (min-width: 992px) {
    .navbar-header {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        gap: 8px;
    }

    .by-header-search-wrap {
        margin-left: 12px;
        margin-right: 12px;
    }
}

@media (max-width: 991.98px) {
    .by-header-search-wrap {
        order: 10;
        width: 100%;
        max-width: none;
        min-width: 0;
        flex: 0 0 100%;
        margin: 7px 0 0;
    }

    .by-header-search {
        min-height: 44px;
        border-radius: 12px;
        padding: 4px;
    }

    .by-search-type-btn {
        padding: 0 8px;
        font-size: 12px;
    }

        .by-search-type-btn > i:first-child {
            display: none;
        }

    .by-search-divider {
        height: 23px;
    }

    .by-search-city-chip {
        max-width: 92px;
        margin-left: 5px;
        padding-left: 7px;
        padding-right: 7px;
    }

    .by-search-input-wrap {
        min-width: 40px;
    }

        .by-search-input-wrap > i {
            display: none;
        }

    .by-search-filter-btn {
        min-width: 39px;
        width: 39px;
        padding: 0;
        margin-left: 3px;
    }

        .by-search-filter-btn span {
            display: none;
        }

        .by-search-filter-btn b {
            display: none;
        }

    .by-search-submit {
        min-width: 42px;
        width: 42px;
        padding: 0;
        margin-left: 3px;
    }

        .by-search-submit span {
            display: none;
        }

    .by-header-filter-panel {
        left: 0;
        right: auto;
        width: 100%;
        max-height: calc(100vh - 115px);
        overflow-y: auto;
    }

    .by-filter-grid {
        grid-template-columns: 1fr;
    }

    .by-header-active-chips {
        margin-bottom: 1px;
    }
}

@media (max-width: 600px) {
    .by-header-search-wrap {
        margin-top: 5px;
    }

    .by-search-type-btn {
        max-width: 62px;
        overflow: hidden;
    }

        .by-search-type-btn span {
            max-width: 38px;
            overflow: hidden;
            text-overflow: ellipsis;
        }

    .by-search-city-chip {
        max-width: 78px;
    }

    .by-search-input-wrap input {
        font-size: 11px;
    }

    .by-search-filter-panel {
        border-radius: 14px;
        padding: 13px;
    }

    .by-filter-panel-footer {
        position: sticky;
        bottom: -13px;
        background: #fff;
        margin-left: -13px;
        margin-right: -13px;
        padding: 11px 13px;
    }
}

@media (max-width: 380px) {
    .by-search-type-btn {
        max-width: 55px;
    }

    .by-search-city-chip {
        max-width: 65px;
    }

    .by-search-submit,
    .by-search-filter-btn {
        width: 36px;
        min-width: 36px;
    }
}







/* ==========================================================
      BHOOMIYUG - SEARCH INSIDE EXISTING HEADER ON SCROLL
      IMPORTANT:
      - Existing header/search CSS is NOT changed.
      - All new selectors use by-scroll-header-* names.
      - Search becomes part of the existing sticky header.
      ========================================================== */

.header.header-fix {
    position: sticky !important;
    top: 0 !important;
    z-index: 99990 !important;
}

    .header.header-fix .header-nav {
        position: relative !important;
        overflow: visible !important;
    }

    .header.header-fix .navbar-header,
    .header.header-fix .header-navbar-rht {
        position: relative;
        z-index: 3;
    }

.by-scroll-header-search {
    display: none;
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(650px, calc(100% - 610px));
    min-width: 390px;
    transform: translate(-50%, -50%);
    z-index: 20;
}

.header.header-fix.by-scroll-header-active .by-scroll-header-search {
    display: block;
}

.by-scroll-header-box {
    width: 86%;
    min-height: 52px;
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid #e7e0d4;
    border-radius: 11px;
    padding: 4px 5px 4px 6px;
    box-shadow: 0 5px 18px rgba(35, 27, 15, .13);
}

.by-scroll-header-type-wrap {
    position: relative;
    flex: 0 0 auto;
}

.by-scroll-header-type-btn {
    height: 34px;
    min-width: 78px;
    padding: 0 9px;
    border: 0;
    background: transparent;
    color: #30291f;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
}

    .by-scroll-header-type-btn > i:first-child {
        color: #a87917;
        font-size: 12px;
    }

    .by-scroll-header-type-btn > i:last-child {
        color: #7b746b;
        font-size: 9px;
        transition: transform .2s ease;
    }

.by-scroll-header-type-wrap.is-open .by-scroll-header-type-btn > i:last-child {
    transform: rotate(180deg);
}

.by-scroll-header-type-menu {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: 215px;
    padding: 6px;
    background: #fff;
    border: 1px solid #eee5d5;
    border-radius: 12px;
    box-shadow: 0 18px 45px rgba(35, 27, 15, .18);
}

.by-scroll-header-type-wrap.is-open .by-scroll-header-type-menu {
    display: block;
}

.by-scroll-header-type-option {
    width: 100%;
    border: 0;
    border-radius: 9px;
    padding: 9px 10px;
    background: transparent;
    color: #30291f;
    display: flex;
    align-items: center;
    gap: 9px;
    text-align: left;
    cursor: pointer;
}

    .by-scroll-header-type-option:hover,
    .by-scroll-header-type-option.active {
        background: #fff7e7;
    }

    .by-scroll-header-type-option i {
        width: 28px;
        height: 28px;
        border-radius: 7px;
        background: #f8f0df;
        color: #a87917;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .by-scroll-header-type-option span {
        display: flex;
        flex-direction: column;
        line-height: 1.2;
    }

    .by-scroll-header-type-option small {
        color: #92908a;
        font-size: 9px;
        margin-top: 2px;
    }

.by-scroll-header-divider {
    width: 1px;
    height: 24px;
    background: #e7e2da;
    flex: 0 0 auto;
}

.by-scroll-header-city-wrap {
    position: relative;
    flex: 0 0 auto;
    margin-left: 3px;
}

.by-scroll-header-city-btn {
    height: 34px;
    max-width: 115px;
    padding: 0 8px;
    border: 1px solid #ead8b2;
    border-radius: 8px;
    background: #fffaf1;
    color: #745725;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
}

    .by-scroll-header-city-btn span {
        max-width: 72px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.by-scroll-header-city-menu {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: 205px;
    padding: 6px;
    background: #fff;
    border: 1px solid #eee5d5;
    border-radius: 12px;
    box-shadow: 0 18px 45px rgba(35, 27, 15, .18);
}

.by-scroll-header-city-wrap.is-open .by-scroll-header-city-menu {
    display: block;
}

.by-scroll-header-city-option {
    width: 100%;
    border: 0;
    border-radius: 8px;
    padding: 8px 9px;
    background: transparent;
    color: #40392f;
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}

    .by-scroll-header-city-option:hover {
        background: #faf6ee;
        color: #8a6517;
    }

.by-scroll-header-input {
    flex: 1 1 auto;
    min-width: 70px;
    height: 34px;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 8px;
}

    .by-scroll-header-input > i {
        color: #8b95a1;
        font-size: 12px;
    }

    .by-scroll-header-input input {
        width: 100%;
        min-width: 30px;
        height: 32px;
        border: 0 !important;
        outline: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        color: #30291f;
        padding: 0 !important;
        font-size: 11px;
    }

        .by-scroll-header-input input::placeholder {
            color: #9ca3af;
        }

.by-scroll-header-clear {
    width: 22px;
    height: 22px;
    display: none;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border: 0;
    border-radius: 50%;
    background: #f1f3f5;
    color: #65707c;
    cursor: pointer;
}

    .by-scroll-header-clear.is-visible {
        display: inline-flex;
    }

.by-scroll-header-filter-btn,
.by-scroll-header-submit {
    height: 34px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 800;
}

.by-scroll-header-filter-btn {
    min-width: 38px;
    padding: 0 9px;
    margin-left: 2px;
    border: 1px solid #e6dcc9;
    background: #faf7f0;
    color: #5d4b2f;
}

    .by-scroll-header-filter-btn:hover,
    .by-scroll-header-filter-btn.active {
        background: #fff0d0;
        border-color: #dfc178;
    }

.by-scroll-header-submit {
    min-width: 70px;
    padding: 0 11px;
    margin-left: 4px;
    border: 0;
    background: #b18432;
    color: #fff;
    box-shadow: 0 4px 10px rgba(177, 132, 50, .20);
}

    .by-scroll-header-submit:hover {
        background: #8f6723;
    }

.by-scroll-header-filter-panel {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: min(550px, calc(100vw - 30px));
    padding: 14px;
    background: #fff;
    border: 1px solid #eee5d5;
    border-radius: 13px;
    box-shadow: 0 20px 55px rgba(35, 27, 15, .20);
}

    .by-scroll-header-filter-panel.is-open {
        display: block;
    }

.by-scroll-header-filter-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 11px;
}

    .by-scroll-header-filter-head strong {
        color: #30291f;
        font-size: 14px;
        font-weight: 800;
    }

.by-scroll-header-filter-close {
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 50%;
    background: #f5f2ed;
    color: #5f5a53;
    cursor: pointer;
}

.by-scroll-header-filter-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

.by-scroll-header-filter-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

    .by-scroll-header-filter-field > span {
        color: #746d64;
        font-size: 10px;
        font-weight: 800;
    }

    .by-scroll-header-filter-field select,
    .by-scroll-header-filter-field input {
        width: 100%;
        height: 36px;
        padding: 0 9px;
        border: 1px solid #e4dfd6;
        border-radius: 8px;
        outline: 0;
        background: #fff;
        color: #40392f;
        font-size: 11px;
    }

        .by-scroll-header-filter-field select:focus,
        .by-scroll-header-filter-field input:focus {
            border-color: #d4a017;
            box-shadow: 0 0 0 3px rgba(212, 160, 23, .08);
        }

.by-scroll-header-filter-footer {
    display: flex;
    justify-content: flex-end;
    gap: 7px;
    margin-top: 11px;
    padding-top: 10px;
    border-top: 1px solid #eeeae3;
}

.by-scroll-header-filter-reset,
.by-scroll-header-filter-apply {
    min-height: 34px;
    padding: 0 11px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
}

.by-scroll-header-filter-reset {
    border: 1px solid #e3ddd4;
    background: #fff;
    color: #696158;
}

.by-scroll-header-filter-apply {
    border: 0;
    background: #4b3b22;
    color: #fff;
}

/* Desktop */
@media (min-width: 1200px) {
    .header.header-fix.by-scroll-header-active .navbar-header {
        min-width: 300px !important;
    }

    .header.header-fix.by-scroll-header-active .header-navbar-rht {
        min-width: 300px;
    }
}

/* Tablet */
@media (max-width: 1199.98px) and (min-width: 992px) {
    .by-scroll-header-search {
        width: min(500px, calc(100% - 500px));
        min-width: 300px;
    }

    .by-scroll-header-city-wrap {
        display: none;
    }

    .by-scroll-header-divider {
        display: none;
    }
}

/* Mobile */
@media (max-width: 991.98px) {
    /*.header.header-fix.by-scroll-header-active {
                   padding-bottom: 48px !important;
               }*/

    .header.header-fix.by-scroll-header-active .header-nav {
        padding-bottom: 5px !important;
    }

    .by-scroll-header-search {
        position: absolute;
        top: auto;
        bottom: 5px;
        left: 7px;
        right: 7px;
        width: auto;
        min-width: 0;
        transform: none;
    }

    .by-scroll-header-box {
        min-height: 40px;
        border-radius: 9px;
        padding: 3px;
    }

    .by-scroll-header-type-btn {
        min-width: 59px;
        max-width: 64px;
        height: 32px;
        padding: 0 5px;
        font-size: 10px;
    }

        .by-scroll-header-type-btn > i:first-child {
            display: none;
        }

    .by-scroll-header-divider {
        height: 21px;
    }

    .by-scroll-header-city-wrap {
        margin-left: 2px;
    }

    .by-scroll-header-city-btn {
        max-width: 78px;
        height: 32px;
        padding: 0 6px;
        font-size: 9px;
    }

        .by-scroll-header-city-btn span {
            max-width: 45px;
        }

    .by-scroll-header-input {
        height: 32px;
        padding: 0 5px;
        gap: 4px;
    }

        .by-scroll-header-input > i {
            display: none;
        }

        .by-scroll-header-input input {
            height: 30px;
            font-size: 10px;
        }

    .by-scroll-header-filter-btn {
        width: 34px;
        min-width: 34px;
        height: 32px;
        padding: 0;
    }

        .by-scroll-header-filter-btn span {
            display: none;
        }

    .by-scroll-header-submit {
        width: 38px;
        min-width: 38px;
        height: 32px;
        padding: 0;
    }

        .by-scroll-header-submit span {
            display: none;
        }

    .by-scroll-header-filter-panel {
        left: 0;
        right: 0;
        width: 100%;
        max-height: calc(100vh - 125px);
        overflow-y: auto;
    }

    .by-scroll-header-filter-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    /*  .header.header-fix.by-scroll-header-active {
                   padding-bottom: 46px !important;
               }*/

    .by-scroll-header-search {
        left: 5px;
        right: 5px;
        bottom: 4px;
    }

    .by-scroll-header-type-btn {
        min-width: 52px;
        max-width: 56px;
    }

    .by-scroll-header-city-btn {
        max-width: 68px;
    }

        .by-scroll-header-city-btn span {
            max-width: 38px;
        }

    .by-scroll-header-clear {
        width: 20px;
        height: 20px;
    }

    .by-scroll-header-submit,
    .by-scroll-header-filter-btn {
        width: 32px;
        min-width: 32px;
    }
}

@media (max-width: 380px) {
    .by-scroll-header-type-btn {
        min-width: 48px;
        max-width: 51px;
    }

    .by-scroll-header-city-wrap {
        display: none;
    }

    .by-scroll-header-divider {
        display: none;
    }

    .by-scroll-header-submit,
    .by-scroll-header-filter-btn {
        width: 30px;
        min-width: 30px;
    }
}




/*default page css*/




.estate-row.estate-location {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .estate-row.estate-location .estate-text {
        flex: 1;
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.contact-popup {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.7);
    backdrop-filter: blur(5px);
    z-index: 999999;
}

.contact-popup-content {
    width: 480px;
    max-width: 90%;
    background: #fff;
    padding: 35px;
    border-radius: 25px;
    border: 2px solid #d4a017;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    box-shadow: 0 15px 40px rgba(0,0,0,.25);
}

.closePopup {
    position: absolute;
    top: 9px;
    right: 7px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #2d2510;
    text-align: center;
    line-height: 42px;
    font-size: 22px;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(0, 0, 0, .15);
    color: #fff;
}

input#txtName::placeholder {
    color: #2d2510a1;
    font-weight: 700;
    font-size: 12px;
}

input#txtMobile {
    color: #2d2510a1;
    font-weight: 700;
    font-size: 12px;
}



.contact-popup-content input {
    width: 100%;
    height: 45px;
    border: none;
    background: #faebd7;
    border-radius: 12px;
    padding: 1px 15px;
    margin-bottom: 15px;
    color: #333;
}

    .contact-popup-content input:focus {
        outline: none;
        border: 1px solid #d4a017;
    }

.send-otp-btn {
    border: none;
    color: #fff;
    font-weight: 700;
    padding: 11px 21px;
    border-radius: 15px;
    background: linear-gradient(13deg, #cd8c15, #2d2510);
    box-shadow: 0 10px 20px rgba(255, 179, 0, .35);
    width: 100%;
}

.otp-wrapper {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin: 20px 0;
}

.otp-input {
    width: 50px !important;
    height: 50px !important;
    text-align: center;
    font-size: 22px;
    font-weight: 700;
    border: 1px solid #d4a017 !important;
    border-radius: 10px !important;
}

#ownerSection {
    text-align: center;
}

.owner-card {
    padding: 10px;
}

.owner-top {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.owner-avatar {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: #f5f5f5;
    border: 3px solid #e5e5e5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 42px;
    color: #999;
    flex-shrink: 0;
}

.owner-info {
    text-align: left;
}

.project-name {
    color: #a76a00;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 5px;
}

#ownerName {
    font-size: 22px;
    font-weight: 700;
    color: #222;
    margin: 0 0 10px;
}

.verified-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #eef8ef;
    color: #d97b00;
    padding: 8px 15px;
    border-radius: 30px;
    font-weight: 600;
    font-size: 14px;
}

.mobile-box {
    background: #f6f6f8;
    border-radius: 18px;
    padding: 25px;
    margin: 25px 0;
}

#ownerMobile {
    font-size: 28px;
    font-weight: 800;
    color: #222;
    letter-spacing: 2px;
    margin: 0;
}

.call-btn,
.whatsapp-btn {
    display: block;
    width: 100%;
    text-decoration: none;
    color: #fff !important;
    padding: 16px;
    border-radius: 15px;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 15px;
}

.call-btn {
    background: #9c5a00;
}

.whatsapp-btn {
    background: #2ed158;
}

    .call-btn i,
    .whatsapp-btn i {
        margin-right: 8px;
    }



/* =========================================================
   BHOOMIYUG PREMIUM SEARCH BAR
   Dynamic IDs / Data Preserved
   ========================================================= */

#bhoomiyugSearchBar {
    position: relative;
    z-index: 100;
    width: 100%;
    min-height: 72px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px;
    border-radius: 17px;
    background: linear-gradient( 135deg, #ffffff 0%, #fbf9f4 45%, #ffffff 100% );
    border: 1px solid rgba(184, 132, 39, 0.28);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.10), inset 0 1px 0 rgba(255,255,255,0.95);
    box-sizing: border-box;
}


    /* =========================================================
   COMMON FIELD
   ========================================================= */

    #bhoomiyugSearchBar .ip-field {
        position: relative;
        flex: 0 0 185px;
        height: 56px;
        display: flex;
        align-items: center;
        border-radius: 14px;
        background: #ffffff;
        border: 1px solid #dfc58f;
        box-shadow: 0 3px 12px rgba(0,0,0,0.04), inset 0 1px 0 rgba(255,255,255,0.9);
        overflow: visible;
        box-sizing: border-box;
    }


    /* =========================================================
   CATEGORY FIELD
   ========================================================= */

    #bhoomiyugSearchBar .ip-category-field {
        min-width: 185px;
        max-width: 185px;
    }


    /* =========================================================
   LEFT ICON
   ========================================================= */

    #bhoomiyugSearchBar .ip-field-icon {
        position: relative;
        z-index: 12;
        width: 48px;
        min-width: 48px;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #a67b2d;
        font-size: 15px;
        pointer-events: none;
    }

        #bhoomiyugSearchBar .ip-field-icon i {
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 9px;
            background: linear-gradient( 145deg, #fff8e8, #f4e7c8 );
            color: #9b7128;
            box-shadow: 0 2px 6px rgba(0,0,0,0.06);
        }


    /* =========================================================
   ORIGINAL SELECT
   IMPORTANT:
   Keep it in DOM so existing JS continues working.
   ========================================================= */

    #bhoomiyugSearchBar .ip-select {
        position: absolute !important;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        opacity: 0 !important;
        cursor: pointer;
        z-index: 30;
        border: 0 !important;
        outline: none !important;
        appearance: none !important;
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
    }


    /* =========================================================
   CUSTOM SELECT BUTTON
   ========================================================= */

    #bhoomiyugSearchBar .ip-custom-select-trigger {
        position: absolute;
        top: 4px;
        right: 4px;
        bottom: 4px;
        left: 45px;
        width: auto;
        border: 0;
        border-radius: 11px;
        background: linear-gradient( 145deg, #ffffff, #f8f5ee );
        color: #2d2923;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 12px 0 14px;
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        outline: none;
        z-index: 20;
        transition: background .22s ease, color .22s ease, box-shadow .22s ease;
    }


        #bhoomiyugSearchBar .ip-custom-select-trigger:hover {
            background: #fffaf0;
            color: #8c651e;
        }


        #bhoomiyugSearchBar .ip-custom-select-trigger.active {
            background: linear-gradient( 145deg, #fffaf0, #f5e7c8 );
            color: #8e651f;
            box-shadow: inset 0 0 0 1px rgba(177,128,37,.16);
        }


    /* =========================================================
   SELECT TEXT
   ========================================================= */

    #bhoomiyugSearchBar .ip-custom-select-text {
        min-width: 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        padding-right: 8px;
    }


    /* =========================================================
   ARROW
   ========================================================= */

    #bhoomiyugSearchBar .ip-custom-select-trigger .ip-select-arrow {
        position: relative;
        width: 25px;
        min-width: 25px;
        height: 25px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #a67b2d;
        pointer-events: none;
        transition: transform .22s ease;
    }


    #bhoomiyugSearchBar
    .ip-custom-select-trigger.active
    .ip-select-arrow {
        transform: rotate(180deg);
    }


    #bhoomiyugSearchBar .ip-select-arrow i {
        font-size: 11px;
    }


    /* =========================================================
   CUSTOM DROPDOWN
   ========================================================= */

    #bhoomiyugSearchBar .ip-custom-dropdown {
        position: absolute;
        left: 4px;
        right: 4px;
        top: calc(100% + 8px);
        min-width: calc(100% - 8px);
        padding: 7px;
        background: linear-gradient( 145deg, #ffffff, #faf8f2 );
        border: 1px solid rgba(182,134,48,.30);
        border-radius: 14px;
        box-shadow: 0 18px 40px rgba(0,0,0,.18), 0 5px 15px rgba(0,0,0,.08);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-7px) scale(.98);
        transform-origin: top center;
        pointer-events: none;
        z-index: 9999;
        transition: opacity .18s ease, visibility .18s ease, transform .18s ease;
        box-sizing: border-box;
    }


        #bhoomiyugSearchBar
        .ip-custom-dropdown.open {
            opacity: 1;
            visibility: visible;
            transform: translateY(0) scale(1);
            pointer-events: auto;
        }


    /* =========================================================
   DROPDOWN OPTION
   ========================================================= */

    #bhoomiyugSearchBar .ip-custom-option {
        width: 100%;
        min-height: 42px;
        display: flex;
        align-items: center;
        padding: 0 12px;
        border-radius: 9px;
        color: #28251f;
        background: transparent;
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        user-select: none;
        box-sizing: border-box;
        transition: background .18s ease, color .18s ease, transform .18s ease;
    }


        #bhoomiyugSearchBar .ip-custom-option:hover {
            background: linear-gradient( 90deg, #f8edda, #fffaf0 );
            color: #946b21;
            transform: translateX(2px);
        }


        #bhoomiyugSearchBar .ip-custom-option.selected {
            background: linear-gradient( 135deg, #b78932, #8e651e );
            color: #ffffff;
            font-weight: 600;
            box-shadow: 0 4px 10px rgba(141,98,25,.20);
        }


            #bhoomiyugSearchBar .ip-custom-option.selected::after {
                content: "\f00c";
                font-family: "Font Awesome 6 Free";
                font-weight: 900;
                margin-left: auto;
                font-size: 11px;
            }


    /* =========================================================
   COMMERCIAL FIELD
   ========================================================= */

    #bhoomiyugSearchBar
    .ip-commercial-field {
        min-width: 185px;
        max-width: 185px;
    }


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

    #bhoomiyugSearchBar .ip-keyword-shell {
        position: relative;
        flex: 1 1 auto;
        min-width: 180px;
        height: 56px;
        display: flex;
        align-items: center;
        border-radius: 14px;
        background: #ffffff;
        border: 1px solid #dfc58f;
        box-shadow: 0 3px 12px rgba(0,0,0,.04), inset 0 1px 0 rgba(255,255,255,.95);
        overflow: hidden;
        box-sizing: border-box;
    }


    /* =========================================================
   LOCATION ICON
   ========================================================= */

    #bhoomiyugSearchBar .ip-keyword-icon {
        position: absolute;
        left: 14px;
        top: 50%;
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        transform: translateY(-50%);
        color: #a37828;
        z-index: 5;
        pointer-events: none;
    }


        #bhoomiyugSearchBar .ip-keyword-icon i {
            font-size: 15px;
        }


    /* =========================================================
   INPUT
   ========================================================= */

    #bhoomiyugSearchBar .ip-input {
        position: relative;
        width: 100%;
        height: 100%;
        border: 0 !important;
        outline: 0 !important;
        background: transparent !important;
        padding: 0 100px 0 52px !important;
        color: #24211d;
        font-size: 14px;
        box-shadow: none !important;
        box-sizing: border-box;
        z-index: 2;
    }


        #bhoomiyugSearchBar .ip-input::placeholder {
            color: #9a9a9a;
            opacity: 1;
        }


        #bhoomiyugSearchBar .ip-input:focus {
            box-shadow: none !important;
        }


    /* =========================================================
   SELECTED CHIPS
   ========================================================= */

    #bhoomiyugSearchBar .ip-selected-filter-chips {
        position: absolute;
        left: 48px;
        right: 100px;
        top: 21px;
        transform: translateY(-50%);
        display: flex;
        align-items: center;
        gap: 5px;
        pointer-events: none;
        z-index: 4;
    }


    /* =========================================================
   CLEAR BUTTON
   ========================================================= */

    #bhoomiyugSearchBar .ip-keyword-clear {
        position: absolute;
        right: 52px;
        top: 50%;
        width: 28px;
        height: 28px;
        transform: translateY(-50%);
        border: 0;
        border-radius: 8px;
        background: transparent;
        color: #8d8d8d;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 7;
        opacity: 0;
        pointer-events: none;
        transition: background .18s ease, color .18s ease;
    }


        #bhoomiyugSearchBar
        .ip-keyword-clear:not([disabled]) {
            pointer-events: auto;
        }


        #bhoomiyugSearchBar .ip-keyword-clear:hover {
            background: #f6eee0;
            color: #8d641f;
        }


    /* =========================================================
   FILTER / SLIDER ICON
   Fix overlay problem
   ========================================================= */

    #bhoomiyugSearchBar .ip-keyword-filter-trigger {
        position: absolute;
        right: 7px;
        top: 50%;
        width: 34px;
        height: 34px;
        transform: translateY(-50%);
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #ead7b5;
        border-radius: 9px;
        background: linear-gradient( 145deg, #fffaf0, #f5ead5 );
        color: #86601e;
        cursor: pointer;
        z-index: 8;
        box-shadow: 0 2px 6px rgba(0,0,0,.05);
        transition: background .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
    }


        #bhoomiyugSearchBar
        .ip-keyword-filter-trigger:hover {
            background: linear-gradient( 145deg, #f9e9c7, #efd9ad );
            color: #704d13;
            box-shadow: 0 4px 10px rgba(119,82,18,.12);
        }


        #bhoomiyugSearchBar
        .ip-keyword-filter-trigger:active {
            transform: translateY(-50%) scale(.95);
        }


        #bhoomiyugSearchBar
        .ip-keyword-filter-trigger i {
            font-size: 13px;
        }


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

    #bhoomiyugSearchBar .ip-search-btn {
        position: relative;
        flex: 0 0 122px;
        width: 122px;
        min-width: 122px;
        height: 56px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        border: 0 !important;
        border-radius: 14px;
        background: linear-gradient( 135deg, #9b7128 0%, #b78932 50%, #805914 100% );
        color: #ffffff;
        font-size: 14px;
        font-weight: 700;
        cursor: pointer;
        box-shadow: 0 7px 16px rgba(116,80,18,.22);
        transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
        overflow: hidden;
    }


        #bhoomiyugSearchBar .ip-search-btn::before {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient( 120deg, transparent 20%, rgba(255,255,255,.18) 50%, transparent 80% );
            transform: translateX(-120%);
            transition: transform .55s ease;
            pointer-events: none;
        }


        #bhoomiyugSearchBar
        .ip-search-btn:hover::before {
            transform: translateX(120%);
        }


        #bhoomiyugSearchBar
        .ip-search-btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 10px 22px rgba(116,80,18,.30);
        }


        #bhoomiyugSearchBar
        .ip-search-btn:active {
            transform: translateY(0) scale(.98);
        }


        #bhoomiyugSearchBar
        .ip-search-btn i {
            font-size: 14px;
        }


        /* =========================================================
   FOCUS
   ========================================================= */

        #bhoomiyugSearchBar
        .ip-custom-select-trigger:focus-visible,
        #bhoomiyugSearchBar
        .ip-keyword-filter-trigger:focus-visible,
        #bhoomiyugSearchBar
        .ip-search-btn:focus-visible,
        #bhoomiyugSearchBar
        .ip-keyword-clear:focus-visible {
            outline: 2px solid rgba(183,137,50,.55);
            outline-offset: 2px;
        }


    /* =========================================================
   TABLET
   ========================================================= */
    #bhoomiyugSearchBar .ip-commercial-field {
        min-width: 155px;
        max-width: 155px;
        margin-left: 16px;
    }

@media (max-width: 992px) {

    #bhoomiyugSearchBar {
        gap: 8px;
        padding: 7px;
    }

        #bhoomiyugSearchBar .ip-field {
            flex-basis: 160px;
            min-width: 160px;
        }

        #bhoomiyugSearchBar .ip-category-field,
        #bhoomiyugSearchBar .ip-commercial-field {
            min-width: 160px;
            max-width: 160px;
        }

        #bhoomiyugSearchBar .ip-search-btn {
            flex-basis: 105px;
            width: 105px;
            min-width: 105px;
        }

        #bhoomiyugSearchBar .ip-input {
            font-size: 13px;
        }
}


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

@media (max-width: 768px) {

    #bhoomiyugSearchBar {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 8px;
        height: auto;
        padding: 9px;
        border-radius: 16px;
    }


        #bhoomiyugSearchBar .ip-field {
            width: 100%;
            min-width: 0 !important;
            max-width: none !important;
            height: 52px;
        }


        #bhoomiyugSearchBar .ip-category-field {
            grid-column: 1 / 2;
        }


        #bhoomiyugSearchBar .ip-commercial-field {
            grid-column: 2 / 3;
        }


        #bhoomiyugSearchBar .ip-keyword-shell {
            grid-column: 1 / -1;
            width: 100%;
            height: 54px;
            min-width: 0;
        }


        #bhoomiyugSearchBar .ip-search-btn {
            grid-column: 1 / -1;
            width: 100%;
            min-width: 0;
            height: 52px;
        }


        #bhoomiyugSearchBar
        .ip-custom-select-trigger {
            left: 43px;
        }


        #bhoomiyugSearchBar
        .ip-field-icon {
            width: 43px;
            min-width: 43px;
        }


        #bhoomiyugSearchBar
        .ip-input {
            padding-left: 48px !important;
            padding-right: 95px !important;
        }


        #bhoomiyugSearchBar
        .ip-selected-filter-chips {
            left: 45px;
            right: 92px;
        }


        #bhoomiyugSearchBar
        .ip-custom-dropdown {
            top: calc(100% + 6px);
        }
}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    #bhoomiyugSearchBar {
        padding: 7px;
        gap: 7px;
        border-radius: 14px;
    }


        #bhoomiyugSearchBar .ip-field {
            height: 50px;
            border-radius: 12px;
        }


        #bhoomiyugSearchBar
        .ip-custom-select-trigger {
            top: 3px;
            right: 3px;
            bottom: 3px;
            left: 40px;
            padding-left: 10px;
            padding-right: 7px;
            font-size: 13px;
            border-radius: 9px;
        }


        #bhoomiyugSearchBar
        .ip-field-icon {
            width: 40px;
            min-width: 40px;
        }


            #bhoomiyugSearchBar
            .ip-field-icon i {
                width: 27px;
                height: 27px;
                font-size: 13px;
            }


        #bhoomiyugSearchBar
        .ip-input {
            font-size: 13px;
            padding: 0 88px 0 44px !important;
        }


        #bhoomiyugSearchBar
        .ip-keyword-icon {
            left: 10px;
        }


        #bhoomiyugSearchBar
        .ip-keyword-filter-trigger {
            right: 5px;
            width: 31px;
            height: 31px;
        }


        #bhoomiyugSearchBar
        .ip-keyword-clear {
            right: 42px;
            width: 25px;
            height: 25px;
        }


        #bhoomiyugSearchBar
        .ip-selected-filter-chips {
            left: 42px;
            right: 82px;
        }


        #bhoomiyugSearchBar
        .ip-search-btn {
            height: 50px;
            border-radius: 12px;
            font-size: 14px;
        }


        #bhoomiyugSearchBar
        .ip-custom-option {
            min-height: 40px;
            font-size: 13px;
        }
}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 360px) {

    #bhoomiyugSearchBar {
        grid-template-columns: 1fr;
    }


        #bhoomiyugSearchBar
        .ip-category-field,
        #bhoomiyugSearchBar
        .ip-commercial-field {
            grid-column: 1 / -1;
        }


        #bhoomiyugSearchBar
        .ip-commercial-field {
            display: none;
        }


        #bhoomiyugSearchBar
        .ip-custom-dropdown {
            max-height: 190px;
            overflow-y: auto;
        }
}


/* =========================================================
   TOUCH DEVICES
   ========================================================= */

@media (hover: none) and (pointer: coarse) {

    #bhoomiyugSearchBar
    .ip-custom-option {
        min-height: 44px;
    }

    #bhoomiyugSearchBar
    .ip-search-btn {
        min-height: 50px;
    }
}


/* =========================================================
   REDUCE MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    #bhoomiyugSearchBar *,
    #bhoomiyugSearchBar *::before,
    #bhoomiyugSearchBar *::after {
        transition: none !important;
        animation: none !important;
    }
}
     



/*projectlist css start*/



.contact-success-card {
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
    padding: 30px 25px;
    background: #ffffff;
    border-radius: 18px;
    text-align: center;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.10);
    border: 1px solid #e9ecef;
}

/* Success Icon */
.contact-success-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eaf8ef;
    color: #28a745;
    font-size: 38px;
}

.contact-success-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Project Name */
.contact-success-card .project-popup-name {
    font-size: 15px;
    font-weight: 600;
    color: #777;
    margin-bottom: 8px;
}

/* Coordinator Name */
.contact-success-card h2 {
    margin: 0 0 10px;
    font-size: 24px;
    font-weight: 700;
    color: #222;
}

/* Project Coordinator Badge */
.coordinator-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 30px;
    background: #eef6ff;
    color: #1769aa;
    font-size: 13px;
    font-weight: 600;
}

/* Message */
.contact-success-message {
    margin: 20px auto 5px;
    max-width: 430px;
    font-size: 15px;
    line-height: 1.7;
    color: #555;
}

    .contact-success-message strong {
        color: #222;
    }

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

    .contact-success-card {
        padding: 25px 18px;
        border-radius: 15px;
    }

    .contact-success-icon {
        width: 62px;
        height: 62px;
        font-size: 32px;
        margin-bottom: 15px;
    }

    .contact-success-card h2 {
        font-size: 21px;
    }

    .contact-success-message {
        font-size: 14px;
        line-height: 1.6;
    }
}

.favorite-btn {
    border: none;
    background: none;
    cursor: pointer;
    background: transparent;
}

    .favorite-btn i {
        font-size: 22px;
        color: #cfcfcf;
    }

    /* RED HEART */
    .favorite-btn.active-fav i {
        color: red !important;
    }

/*custom css */

/* =========================================
       PREMIUM HORIZONTAL REAL ESTATE CARD
    ========================================= */

.project-grid-ultra {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

/* MAIN CARD */

.ultra-premium-card.horizontal-card {
    display: flex;
    align-items: stretch;
    background: #fff;
    border-radius: 28px;
    overflow: hidden;
    border: 1px solid #ececec;
    min-height: 251px;
    position: relative;
    transition: none !important;
}

    .ultra-premium-card.horizontal-card:hover {
        transform: none !important;
        box-shadow: none !important;
    }

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

.horizontal-card .ultra-card-image {
    width: 42%;
    min-width: 42%;
    position: relative;
    overflow: visible !important;
}

    .horizontal-card .ultra-card-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: 0.5s ease;
    }

.horizontal-card:hover .ultra-card-image img {
    transform: none !important;
}

/* OVERLAY */

.image-gradient-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient( to top, rgba(0,0,0,0.85), rgba(0,0,0,0.10) );
}

/* TAGS */

.top-floating-tags {
    position: absolute;
    top: 18px;
    left: 18px;
    display: flex;
    gap: 10px;
    z-index: 2;
}

    .top-floating-tags span {
        padding: 8px 16px;
        border-radius: 50px;
        font-size: 12px;
        font-weight: 700;
        color: #fff;
        letter-spacing: .3px;
    }

.featured-tag {
    background: linear-gradient(135deg, #a17b48, #faebd7) !important;
}

.top-floating-tags span {
    padding: 8px 16px !important;
    border-radius: 50px !important;
    color: #000000 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: .5px !important;
    backdrop-filter: blur(10px) !important;
    text-transform: uppercase !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15) !important;
}

.verified-tag {
    background: linear-gradient(135deg, #d99410, #faebd7) !important;
}

.rera-tag {
    background: linear-gradient(135deg, #fbfbfb, #f9ead6) !important;
}

/* ICONS */

.card-icons-floating {
    position: absolute;
    top: 18px;
    right: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 3;
}

    .card-icons-floating button {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        border: none;
        background: rgba(255,255,255,0.18);
        backdrop-filter: blur(10px);
        color: #fff;
        cursor: pointer;
        transition: .3s ease;
    }

        .card-icons-floating button:hover {
            background: #fff;
            color: #111;
        }

/* BOTTOM CONTENT */

.image-bottom-content {
    position: absolute;
    bottom: 22px;
    left: 22px;
    right: 22px;
    z-index: 2;
}

.project-price {
    font-size: 20px !important;
    font-weight: 800;
    line-height: 1.2;
    color: #fff;
    margin-bottom: 16px;
}

.project-location {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 50px;
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(10px);
    color: #fff;
    font-size: 14px;
    font-weight: 500;
}

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

.horizontal-card .ultra-card-body {
    flex: 1;
    padding: 28px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.ultra-meta-grid {
    margin-bottom: 23px !important;
}
/* TOP */

.project-top-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
}

.project-title {
    font-size: 34px;
    font-weight: 800;
    color: #111;
    margin-bottom: 10px;
    line-height: 1.2;
}

.project-subtitle {
    color: #777;
    font-size: 17px;
    line-height: 1.5;
}

/* HIGHLIGHT POINTS */

.ultra-highlights {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 22px;
}

.highlight-pill {
    padding: 10px 16px;
    border-radius: 50px;
    background: #f7f8fc;
    border: 1px solid #eceef5;
    font-size: 13px;
    font-weight: 600;
    color: #444;
}

.project-title {
    font-size: 22px !important;
    font-weight: 900 !important;
    color: #111 !important;
    line-height: 1.3 !important;
    margin-bottom: 6px !important;
}
/* META GRID */
.btn-outline-gold, .btn-gold-filled {
    flex: 1;
    height: 47px !important;
    border-radius: 18px;
    font-size: 17px;
    font-weight: 700;
    cursor: pointer;
    transition: .3s ease;
}

.ultra-meta-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 16px;
    margin-top: 1px;
}

/* META GRID */
.ultra-meta-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
    margin-bottom: 5px !important;
}

.meta-box {
    padding: 6px 4px !important;
    border-radius: 10px !important;
    text-align: center !important;
    background: #f8f8f8 !important;
    min-height: 55px;
}

    .meta-box small {
        display: block;
        color: #666;
        font-size: 10px !important;
        margin-bottom: 4px !important;
        font-weight: 600;
        text-transform: uppercase;
        line-height: 1.2;
    }

    .meta-box strong {
        color: #222;
        font-size: 12px !important;
        font-weight: 700;
        line-height: 1.2;
    }

/* PRICE STRIP */

.project-price-strip {
    margin-top: 14px;
    padding: 18px 24px !important;
    border-radius: 20px;
    background: linear-gradient( 90deg, #9f7716, #5b430f );
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
}

    .project-price-strip span {
        font-size: 16px;
        opacity: .95;
    }

    .project-price-strip strong {
        font-size: 28px;
        font-weight: 800;
    }

.project-price-strip {
    background: linear-gradient(135deg, #9b7329, #2e2611) !important;
    border-radius: 24px !important;
    padding: 8px 24px !important;
    margin-bottom: 14px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    overflow: hidden !important;
    position: relative !important;
    width: 57%;
    top: -13px;
}
/* FOOTER */

.card-footer-lux {
    display: flex;
    gap: 18px;
    margin-top: 28px;
}

.btn-outline-gold,
.btn-gold-filled {
    flex: 1;
    height: 58px;
    border-radius: 18px;
    font-size: 17px;
    font-weight: 700;
    cursor: pointer;
    transition: .3s ease;
}

.btn-outline-gold {
    background: #fff;
    border: 2px solid #1b1b1b;
    color: #111;
}

    .btn-outline-gold:hover {
        background: #111;
        color: #fff;
    }

.btn-gold-filled {
    border: none;
    color: #fff;
    background: linear-gradient( 135deg, #f0ae00, #7d5d0a );
}

    .btn-gold-filled:hover {
        transform: translateY(-2px);
    }

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

@media(max-width:1100px) {

    .ultra-premium-card.horizontal-card {
        flex-direction: column;
    }

    .horizontal-card .ultra-card-image {
        width: 100%;
        min-width: 100%;
        height: 360px;
    }
}

@media(max-width:768px) {
    .project-price-strip {
        background: linear-gradient(135deg, #9b7329, #2e2611) !important;
        border-radius: 24px !important;
        padding: 8px 24px !important;
        margin-bottom: 14px !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        overflow: hidden !important;
        position: relative !important;
        width: 100% !important;
        top: -13px;
    }

    .ultra-card-body {
        padding-top: 25px !important;
    }


    .horizontal-card .ultra-card-body {
        padding: 20px;
    }

    .project-top-row {
        flex-direction: column;
    }

    .project-title {
        font-size: 28px;
    }

    .project-price {
        font-size: 30px;
    }

    .ultra-meta-grid {
        grid-template-columns: 1fr;
    }

    .project-price-strip {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .card-footer-lux {
        flex-direction: column;
    }

    .btn-outline-gold,
    .btn-gold-filled {
        width: 100%;
    }

    .project-top-row {
        padding-top: 20px !important;
    }
}

@media (max-width: 480px) {
    .ultra-card-body {
        padding: 6px !important;
    }
}

@media(max-width:480px) {

    .horizontal-card .ultra-card-image {
        height: 300px;
    }

    .project-title {
        font-size: 24px;
    }

    .project-price {
        font-size: 24px;
    }

    .top-floating-tags {
        gap: 6px;
        flex-wrap: wrap;
    }

        .top-floating-tags span {
            font-size: 11px;
            padding: 6px 12px;
        }

    .meta-box strong {
        color: #000;
        font-size: 12px !important;
        font-weight: 700;
    }
}

.contact-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 999999;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(8px);
    animation: fadeIn .3s ease;
}

.contact-modal-content {
    width: 450px;
    max-width: 95%;
    margin: 80px auto;
    background: #fff;
    border-radius: 30px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 25px 60px rgba(0,0,0,.35);
    border: 2px solid #d4af37;
    animation: popupScale .35s ease;
}

.contact-header h2 {
    margin: 0;
    font-size: 32px;
    font-weight: 800;
    letter-spacing: .5px;
}

.contact-header p {
    margin-top: 8px;
    opacity: .9;
    font-size: 15px;
}

/* CLOSE BUTTON */

.close-contact {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: #fff;
    color: #111;
    cursor: pointer;
    z-index: 9999999;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    box-shadow: 0 4px 15px rgba(0,0,0,.25);
}

    .close-contact:hover {
        background: #fff;
        color: #111;
        transform: rotate(90deg);
    }

/* BODY */

.contact-card {
    padding: 30px;
}

.field {
    margin-bottom: 18px;
}

    .field label {
        display: block;
        color: #9b7329;
        font-size: 14px;
        font-weight: 700;
        margin-bottom: 8px;
        text-transform: uppercase;
        letter-spacing: .5px;
    }

    .field div {
        background: #fafafa;
        border: 1px solid #ececec;
        border-left: 4px solid #b88a2a;
        padding: 15px;
        border-radius: 14px;
        font-size: 16px;
        font-weight: 600;
        color: #222;
        min-height: 22px;
        transition: .3s;
    }

        .field div:hover {
            background: #fff;
            box-shadow: 0 4px 12px rgba(0,0,0,.08);
        }

/* FOOTER ACTIONS */

.contact-actions {
    display: flex;
    gap: 12px;
    padding: 0 30px 30px;
}

.contact-call-btn,
.contact-email-btn {
    flex: 1;
    text-decoration: none;
    text-align: center;
    padding: 14px;
    border-radius: 14px;
    font-weight: 700;
    transition: .3s;
}

.contact-call-btn {
    background: linear-gradient(135deg,#9b7329,#2e2611);
    color: #fff;
}

    .contact-call-btn:hover {
        transform: translateY(-2px);
    }

.contact-email-btn {
    border: 2px solid #9b7329;
    color: #9b7329;
    background: #fff;
}

    .contact-email-btn:hover {
        background: #9b7329;
        color: #fff;
    }

/* ANIMATION */

@keyframes popupScale {
    from {
        opacity: 0;
        transform: translateY(30px) scale(.9);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* MOBILE */

@media(max-width:768px) {

    .contact-modal-content {
        width: 95%;
        margin: 40px auto;
    }

    .contact-header h2 {
        font-size: 26px;
    }

    .contact-card {
        padding: 20px;
    }

    .contact-actions {
        flex-direction: column;
        padding: 0 20px 20px;
    }
}

.rera-tooltip {
    position: relative;
    cursor: pointer;
}

.rera-tooltip-text {
    display: none;
    position: absolute;
    top: 45px;
    left: 50%;
    transform: translateX(-50%);
    background: #222;
    color: #fff;
    padding: 10px 15px;
    border-radius: 8px;
    min-width: 220px;
    text-align: center;
    font-size: 13px;
    z-index: 999999;
    box-shadow: 0 5px 20px rgba(0,0,0,.25);
}

.rera-tooltip:hover .rera-tooltip-text {
    display: block;
}

.owner-card {
    padding: 25px;
}

.owner-top {
    display: flex;
    gap: 18px;
    align-items: center;
    margin-bottom: 25px;
}

.owner-avatar {
    width: 85px;
    height: 85px;
    border-radius: 50%;
    background: #f2f2f2;
    border: 3px solid #e5e5e5;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .owner-avatar i {
        font-size: 42px;
        color: #888;
    }

.owner-info h2 {
    margin: 0;
    font-size: 28px;
    font-weight: 700;
    color: #222;
}

.verified-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 8px 15px;
    background: #e8f6ec;
    color: #d06d00;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 600;
}

.owner-info p {
    margin: 8px 0 0;
    color: #666;
    font-size: 15px;
}

.owner-mobile-box {
    background: #f4f4f4;
    border-radius: 18px;
    padding: 22px;
    text-align: center;
    margin-bottom: 18px;
}

    .owner-mobile-box span {
        font-size: 34px;
        font-weight: 800;
        color: #222;
        letter-spacing: 2px;
    }

.call-btn,
.whatsapp-btn {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    height: 56px;
    border-radius: 16px;
    font-size: 18px;
    font-weight: 700;
    margin-top: 15px;
}

.call-btn {
    background: linear-gradient(135deg,#8a4a00,#6b3700);
    color: #fff;
}

    .call-btn:hover {
        color: #fff;
        text-decoration: none;
    }

.whatsapp-btn {
    background: #25D366;
    color: #fff;
}

    .whatsapp-btn:hover {
        color: #fff;
        text-decoration: none;
    }

.project-popup-name {
    font-size: 18px;
    font-weight: 700;
    color: #9b7329;
    margin-bottom: 8px;
}


/* =========================================================
       CONTACT ENQUIRY FLOW - SAME AS ADVERTISEMENT ENQUIRY
       ========================================================= */
.project-contact-enquiry-modal {
    width: 500px;
    max-width: 95%;
    max-height: calc(100vh - 40px);
    margin: 30px auto;
    overflow-y: auto;
    background: #fffdf9;
    border-radius: 24px;
    border: 1px solid rgba(216,138,22,.18);
    box-shadow: 0 30px 80px rgba(0,0,0,.35);
    position: relative;
    animation: popupScale .3s ease;
}

.project-contact-head {
    padding: 30px 30px 8px;
    text-align: center;
}

    .project-contact-head h3 {
        margin: 0 0 7px;
        color: #21170f;
        font-family: "Poppins",sans-serif;
        font-size: 24px;
        font-weight: 800;
    }

    .project-contact-head p {
        margin: 0;
        color: #756b62;
        font-size: 11px;
        line-height: 1.6;
    }

.project-contact-body {
    padding: 22px 30px 30px;
}

.project-contact-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.project-contact-field {
    margin-bottom: 16px;
}

    .project-contact-field label {
        display: block;
        margin-bottom: 7px;
        color: #3d2c1f;
        font-size: 11px;
        font-weight: 700;
    }

.project-contact-required {
    color: #c36f0b;
}

.project-contact-input-wrap {
    position: relative;
}

.project-contact-input-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #9d8e81;
    font-size: 12px;
    pointer-events: none;
    z-index: 1;
}

.project-contact-input,
.project-contact-textarea {
    width: 100%;
    border: 1px solid #e8ddd0;
    outline: none;
    border-radius: 11px;
    color: #21170f;
    background: #fffdf9;
    font-family: "Poppins",sans-serif;
    font-size: 11px;
    transition: .2s ease;
}

.project-contact-input {
    height: 47px;
    padding: 0 14px 0 39px;
}

.project-contact-textarea {
    min-height: 105px;
    padding: 13px 14px;
    resize: vertical;
    line-height: 1.65;
}

    .project-contact-input:focus,
    .project-contact-textarea:focus {
        border-color: rgba(216,138,22,.62);
        background: #fff;
        box-shadow: 0 0 0 4px rgba(216,138,22,.075);
    }

.project-contact-submit,
.project-contact-verify {
    width: 100%;
    height: 50px;
    border: 0;
    border-radius: 11px;
    color: #fff;
    background: linear-gradient(135deg,#1d0f05,#42240d 48%,#d88a16);
    box-shadow: 0 12px 26px rgba(44,24,8,.20);
    font-family: "Poppins",sans-serif;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: .2s ease;
}

    .project-contact-submit:hover:not(:disabled),
    .project-contact-verify:hover:not(:disabled) {
        transform: translateY(-2px);
    }

    .project-contact-submit:disabled,
    .project-contact-verify:disabled,
    .project-contact-resend:disabled {
        opacity: .65;
        cursor: not-allowed;
    }

.project-contact-secure {
    margin-top: 11px;
    color: #998b7e;
    font-size: 9px;
    text-align: center;
}

.project-contact-message {
    display: none;
    margin-top: 10px;
    padding: 9px 12px;
    border-radius: 8px;
    font-size: 9px;
    line-height: 1.5;
    text-align: center;
}

    .project-contact-message.show {
        display: block;
    }

    .project-contact-message.error {
        color: #9d2f2f;
        background: #fff0f0;
        border: 1px solid #f1cccc;
    }

    .project-contact-message.success {
        color: #496f37;
        background: #f1f9ed;
        border: 1px solid #d3e7c8;
    }

.project-contact-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000001;
    align-items: center;
    justify-content: center;
    padding: 15px;
    background: rgba(24,13,5,.74);
    backdrop-filter: blur(9px);
}

    .project-contact-overlay.active {
        display: flex;
    }

.project-contact-otp-modal {
    width: 100%;
    max-width: 475px;
    max-height: calc(100vh - 30px);
    overflow-y: auto;
    padding: 34px;
    border: 1px solid rgba(216,138,22,.18);
    border-radius: 22px;
    background: #fffdf9;
    box-shadow: 0 35px 100px rgba(0,0,0,.32);
    position: relative;
}

.project-contact-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 35px;
    height: 35px;
    border: 0;
    border-radius: 50%;
    background: #f5eee5;
    color: #776a5f;
    cursor: pointer;
}

.project-contact-otp-modal h3 {
    margin: 0;
    text-align: center;
    color: #21170f;
    font-size: 27px;
    font-weight: 800;
}

.project-contact-otp-description {
    max-width: 360px;
    margin: 8px auto 20px;
    text-align: center;
    color: #756b62;
    font-size: 10px;
    line-height: 1.7;
}

.project-contact-otp-card {
    padding: 16px;
    margin-top: 13px;
    border: 1px solid #eadfd2;
    border-radius: 14px;
    background: #fff8ef;
}

.project-contact-otp-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 5px;
    color: #21170f;
    font-size: 11px;
    font-weight: 700;
}

    .project-contact-otp-title i {
        color: #d88a16;
    }

.project-contact-otp-text {
    margin: 0 0 11px;
    color: #8d8074;
    font-size: 9px;
}

    .project-contact-otp-text strong {
        color: #2c1808;
    }

.project-contact-otp-row {
    display: flex;
    gap: 8px;
}

.project-contact-otp-input {
    flex: 1;
    min-width: 0;
    height: 46px;
    border: 1px solid #dfd2c4;
    border-radius: 10px;
    outline: none;
    background: #fff;
    color: #21170f;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 5px;
    text-align: center;
}

.project-contact-resend {
    height: 46px;
    padding: 0 14px;
    border: 1px solid #dcc9b3;
    border-radius: 10px;
    color: #2c1808;
    background: #fff;
    font-size: 9px;
    font-weight: 700;
    cursor: pointer;
}

.project-contact-otp-status {
    min-height: 15px;
    margin-top: 7px;
    color: #988b7f;
    font-size: 8px;
}

.project-contact-success {
    width: 100%;
    max-width: 500px;
    padding: 34px 28px;
    border-radius: 24px;
    background: #fffdf9;
    text-align: center;
    border: 1px solid rgba(216,138,22,.18);
    box-shadow: 0 35px 100px rgba(0,0,0,.32);
}

.project-contact-success-icon {
    width: 76px;
    height: 76px;
    margin: 0 auto 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg,#4f8a3f,#76ad5c);
    color: #fff;
    font-size: 30px;
    box-shadow: 0 14px 30px rgba(79,138,63,.22);
}

.project-contact-success-text {
    max-width: 410px;
    margin: 0 auto 22px;
    color: #555;
    font-size: 14px;
    line-height: 1.8;
}

.project-contact-success-button {
    width: 100%;
    height: 50px;
    border: 0;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #fff;
    background: linear-gradient(135deg,#2c1808 0%,#42240d 50%,#d88a16 100%);
    box-shadow: 0 12px 26px rgba(44,24,8,.22);
    font-family: "Poppins",sans-serif;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all .25s ease;
}

    .project-contact-success-button:hover {
        color: #fff;
        transform: translateY(-2px);
        box-shadow: 0 16px 32px rgba(44,24,8,.28);
    }

    .project-contact-success-button:focus {
        outline: none;
        box-shadow: 0 0 0 4px rgba(216,138,22,.14),0 12px 26px rgba(44,24,8,.22);
    }

    .project-contact-success-button i {
        font-size: 13px;
    }

@media(max-width:600px) {
    .project-contact-enquiry-modal {
        margin: 15px auto;
        border-radius: 19px;
    }

    .project-contact-head {
        padding: 25px 20px 6px;
    }

    .project-contact-body {
        padding: 18px 20px 22px;
    }

    .project-contact-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .project-contact-otp-modal {
        padding: 30px 18px 22px;
        border-radius: 20px;
    }

    .project-contact-otp-row {
        flex-direction: column;
    }

    .project-contact-resend {
        width: 100%;
    }

    .project-contact-success {
        padding: 30px 20px;
        border-radius: 20px;
    }

    .project-contact-success-text {
        font-size: 13px;
    }
}







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

html {
    scroll-behavior: smooth;
}

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100%;
}

body {
    overflow-x: hidden;
    overflow-y: auto !important;
}

.lux-main-wrapper,
.lux-main-wrapper * {
    box-sizing: border-box;
}


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

       IMPORTANT:
       Do NOT use height:100vh here.
       Do NOT use overflow:hidden here.

       Browser/page will handle the scrolling.
    ========================================================= */

.lux-main-wrapper {
    width: 100%;
    min-height: calc(100vh - 191px);
    background: radial-gradient( circle at 15% 15%, rgba(223, 163, 49, 0.08), transparent 28% ), linear-gradient( 135deg, #faf7f1 0%, #f6f2eb 50%, #fbf9f5 100% );
    overflow: visible;
}

    .lux-main-wrapper > .container-fluid {
        width: 100%;
        padding: 0;
    }


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

       Left = sidebar
       Right = normal page content
    ========================================================= */

.lux-grid-layout {
    width: 100%;
    display: grid;
    grid-template-columns: 340px minmax(0, 1fr);
    align-items: start;
    gap: 40px;
    padding: 48px 28px 60px 12px;
    min-width: 0;
}


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

       THIS IS THE IMPORTANT PART

       Sidebar sticks while page scrolls.
       Height is only its own content height.

       It will NOT stretch to the complete project list height.
    ========================================================= */
#projectContainer .ultra-premium-card.horizontal-card {
    width: 100%;
    max-width: 100%;
    margin-bottom: 0px !important;
}

.ultra-premium-card::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -120% !important;
    width: 80% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent) !important;
    transform: skewX(-25deg) !important;
    transition: 1.2s !important;
    z-index: 20 !important;
    display: none;
}

.ultra-project-card:hover {
    transform: none;
    box-shadow: 0 30px 70px rgba(0, 0, 0, .16);
}

.ultra-project-card {
    background: rgba(255, 255, 255, .78);
    border: 1px solid rgba(255, 255, 255, .65);
    backdrop-filter: blur(24px);
    border-radius: 28px;
    overflow: hidden;
    transition: none;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .08);
}

.lux-sidebar-glass {
    position: sticky;
    top: 114px;
    align-self: start;
    width: 100%;
    height: fit-content;
    max-height: none;
    min-height: 0;
    background: linear-gradient( 145deg, rgba(255, 244, 224, 0.97), rgba(250, 234, 208, 0.94) );
    border: 1px solid rgba(255, 255, 255, 0.90);
    border-radius: 34px;
    box-shadow: 0 18px 50px rgba(88, 61, 21, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.90);
    padding: 28px 30px;
    overflow: visible;
    z-index: 20;
}


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

    .lux-sidebar-glass .sidebar-header {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 15px;
        margin-bottom: 28px;
    }

        .lux-sidebar-glass .sidebar-header h3 {
            margin: 0;
            color: #403522;
            font-size: 25px;
            line-height: 1.2;
            font-weight: 800;
            letter-spacing: -0.5px;
        }

    .lux-sidebar-glass #btnResetFilters {
        border: 0;
        outline: none;
        background: transparent;
        color: #c28a20;
        font-size: 14px;
        font-weight: 800;
        cursor: pointer;
        padding: 5px;
        white-space: nowrap;
        transition: color .25s ease, transform .25s ease;
    }

        .lux-sidebar-glass #btnResetFilters:hover {
            color: #7d571b;
            transform: translateY(-1px);
        }


    /* =========================================================
       FILTER BLOCK
    ========================================================= */

    .lux-sidebar-glass .filter-block {
        margin-bottom: 26px;
    }

    .lux-sidebar-glass .filter-title {
        margin-bottom: 14px;
        color: #403b35;
        font-size: 15px;
        font-weight: 800;
    }


    /* =========================================================
       SHORTLISTED
    ========================================================= */

    .lux-sidebar-glass a {
        text-decoration: none;
    }

.shortlisted-box {
    background: linear-gradient( 145deg, rgba(255, 253, 249, .97), rgba(255, 248, 238, .98) );
    border: 1px solid #ead8bd;
    border-radius: 20px;
    padding: 18px;
    margin-bottom: 22px;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

    .shortlisted-box:hover {
        transform: translateY(-2px);
        border-color: #d5aa57;
        box-shadow: 0 12px 30px rgba(106, 73, 23, .10);
    }

.shortlisted-content {
    display: flex;
    align-items: center;
    gap: 15px;
}

.shortlisted-icon {
    flex: 0 0 58px;
    width: 58px;
    height: 58px;
    border-radius: 16px;
    background: linear-gradient( 135deg, #b8860b, #7a5520 );
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 22px;
    box-shadow: 0 8px 18px rgba(122, 85, 32, .20);
}

.shortlisted-text {
    min-width: 0;
}

    .shortlisted-text h4 {
        margin: 0;
        font-size: 17px;
        font-weight: 800;
        color: #2d2d2d;
    }

    .shortlisted-text p {
        margin: 4px 0 0;
        font-size: 13px;
        color: #8a6a3d;
        line-height: 1.5;
    }


/* =========================================================
       FILTER CHIPS
    ========================================================= */

.lux-chip-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.lux-chip,
.bhk-filter,
.budget-filter {
    user-select: none;
    cursor: pointer;
    transition: all .22s ease;
}

.lux-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 14px;
    background: #fff;
    border: 1px solid rgba(225, 218, 207, .90);
    border-radius: 15px;
    color: #4c4c4c;
    font-size: 13px;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(60, 40, 15, .04);
}

    .lux-chip:hover {
        border-color: #d2a044;
        color: #9a6b1e;
        transform: translateY(-1px);
    }


/* =========================================================
       BHK
    ========================================================= */

.lux-pill-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.bhk-filter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 70px;
    min-height: 42px;
    padding: 0 15px;
    background: #fff;
    border: 1px solid #eee6db;
    border-radius: 50px;
    color: #4d4d4d;
    font-size: 13px;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(60, 40, 15, .04);
}

    .bhk-filter:hover {
        border-color: #c89535;
        color: #8e641f;
        transform: translateY(-1px);
    }


/* =========================================================
       BUDGET
    ========================================================= */

.budget-chip-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.budget-filter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 13px;
    background: rgba(255, 255, 255, .88);
    border: 1px solid #eadfce;
    border-radius: 50px;
    color: #555;
    font-size: 12px;
    font-weight: 700;
}

    .budget-filter:hover {
        border-color: #bd8b2c;
        color: #8e641f;
        transform: translateY(-1px);
    }


/* =========================================================
       SELECTED FILTER
    ========================================================= */

.selected-filter {
    background: linear-gradient( 135deg, #bd8b24, #8c641f ) !important;
    color: #fff !important;
    border-color: #b8860b !important;
    box-shadow: 0 7px 16px rgba(157, 111, 28, .22) !important;
}


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

       IMPORTANT:
       NO overflow-y:auto
       NO fixed height

       It will naturally grow with all projects and browser
       will scroll the complete page.
    ========================================================= */

.lux-content-right {
    width: 100%;
    min-width: 0;
    height: auto;
    min-height: 0;
    overflow: visible;
    padding: 0 0 30px 0;
}


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

.lux-topbar {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    margin-bottom: 32px;
}

    .lux-topbar > div:first-child {
        min-width: 0;
    }

    .lux-topbar h2 {
        margin: 0 0 8px;
        color: #090909;
        font-size: clamp( 30px, 3vw, 42px );
        line-height: 1.12;
        font-weight: 900;
        letter-spacing: -1.3px;
    }

    .lux-topbar p {
        margin: 0;
        color: #69707a;
        font-size: 14px;
        font-weight: 500;
    }


/* =========================================================
       SORT
    ========================================================= */

.lux-sort-wrap {
    flex: 0 0 auto;
    width: 235px;
    min-width: 210px;
    height: 56px;
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, .95);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(70, 51, 24, .08);
    padding: 0 17px;
}

    .lux-sort-wrap i {
        color: #b38327;
        font-size: 17px;
        margin-right: 14px;
    }

    .lux-sort-wrap select {
        width: 100%;
        height: 100%;
        border: 0;
        outline: none;
        background: transparent;
        color: #171717;
        font-size: 14px;
        font-weight: 800;
        cursor: pointer;
    }


/* =========================================================
       PROJECT CONTAINER
    ========================================================= */

#projectContainer {
    width: 100%;
    min-width: 0;
    overflow: visible;
}


    /* =========================================================
       PROJECT CARDS
    ========================================================= */

    #projectContainer
    .ultra-premium-card.horizontal-card {
        width: 100%;
        max-width: 100%;
        margin-bottom: 28px;
        transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
    }

.ultra-premium-card.horizontal-card:hover {
    border: 1px solid #dfa331 !important;
    box-shadow: 0 18px 45px rgba(75, 53, 20, .12);
}

/* =========================================================
       MOBILE FILTER BAR
    ========================================================= */

.mobile-filter-bar {
    display: none;
}


/* =========================================================
       LARGE DESKTOP
    ========================================================= */

@media (min-width: 1500px) {

    .lux-grid-layout {
        grid-template-columns: 360px minmax(0, 1fr);
        gap: 42px;
        padding-left: 14px;
        padding-right: 30px;
    }

    .lux-sidebar-glass {
        padding-left: 30px;
        padding-right: 30px;
    }
}


/* =========================================================
       LAPTOP
    ========================================================= */

@media (max-width: 1199px) {

    .lux-grid-layout {
        grid-template-columns: 300px minmax(0, 1fr);
        gap: 25px;
        padding: 35px 20px 50px 12px;
    }

    .lux-sidebar-glass {
        top: 166px;
        padding: 24px 22px;
        border-radius: 28px;
    }

        .lux-sidebar-glass
        .sidebar-header h3 {
            font-size: 22px;
        }

    .lux-topbar h2 {
        font-size: 34px;
    }

    .lux-sort-wrap {
        width: 210px;
    }
}

.lux-main-wrapper {
    position: relative;
    padding: 0px 0 0px;
}

/* =========================================================
       TABLET
    ========================================================= */

@media (max-width: 991px) {

    .lux-main-wrapper {
        min-height: 0;
        overflow: visible;
    }

    .lux-grid-layout {
        display: grid;
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 25px 16px 60px;
    }
    /*
            Sticky disabled on tablet/mobile.
            Everything scrolls normally.
        */

    .lux-sidebar-glass {
        position: relative;
        top: auto;
        width: 100%;
        height: auto;
        max-height: none;
        overflow: visible;
        border-radius: 25px;
        padding: 24px;
    }

    .lux-content-right {
        width: 100%;
        height: auto;
        overflow: visible;
    }

    .lux-topbar {
        margin-bottom: 25px;
    }

        .lux-topbar h2 {
            font-size: 32px;
        }

    .lux-sort-wrap {
        width: 210px;
        height: 52px;
    }

    .mobile-filter-bar {
        display: none;
    }
}


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

@media (max-width: 767px) {

    .lux-main-wrapper {
        min-height: 0;
        background: linear-gradient( 180deg, #faf7f1 0%, #f5f0e8 100% );
    }

    .lux-grid-layout {
        grid-template-columns: 1fr;
        gap: 18px;
        padding: 18px 12px 90px;
    }
    /* Sidebar */

    .lux-sidebar-glass {
        position: relative;
        top: auto;
        height: auto;
        max-height: none;
        padding: 20px 17px;
        border-radius: 22px;
        box-shadow: 0 10px 30px rgba(88, 61, 21, .08);
    }

        .lux-sidebar-glass
        .sidebar-header {
            margin-bottom: 20px;
        }

            .lux-sidebar-glass
            .sidebar-header h3 {
                font-size: 21px;
            }

        .lux-sidebar-glass
        #btnResetFilters {
            font-size: 13px;
        }
    /* Shortlist */

    .shortlisted-box {
        padding: 15px;
        border-radius: 17px;
    }

    .shortlisted-icon {
        flex-basis: 52px;
        width: 52px;
        height: 52px;
        border-radius: 14px;
    }

    .shortlisted-text h4 {
        font-size: 15px;
    }

    .shortlisted-text p {
        font-size: 12px;
    }
    /* Content */

    .lux-content-right {
        width: 100%;
        height: auto;
        overflow: visible;
        padding: 0;
    }

    .lux-topbar {
        flex-direction: column;
        align-items: stretch;
        gap: 18px;
        margin-bottom: 20px;
    }

        .lux-topbar h2 {
            font-size: 28px;
            line-height: 1.15;
            letter-spacing: -.7px;
        }

        .lux-topbar p {
            font-size: 13px;
            margin-top: 7px;
        }

    .lux-sort-wrap {
        width: 100%;
        min-width: 0;
        height: 52px;
        border-radius: 16px;
    }
    /* Cards */

    #projectContainer
    .ultra-premium-card.horizontal-card {
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 18px;
    }
    /* Existing horizontal card responsive */

    #projectContainer
    .horizontal-card {
        width: 100% !important;
        max-width: 100% !important;
    }
    /*
            Only force vertical card layout on small screens.
            Desktop data/design remains untouched.
        */

    #projectContainer
    .horizontal-card {
        display: flex;
        flex-direction: column;
    }

        #projectContainer
        .horizontal-card > * {
            max-width: 100%;
        }
    /* Mobile bottom buttons */

    .mobile-filter-bar {
        position: fixed;
        left: 12px;
        right: 12px;
        bottom: 12px;
        z-index: 9999;
        display: flex;
        gap: 10px;
        padding: 8px;
        background: rgba(255, 255, 255, .95);
        border: 1px solid rgba(220, 205, 180, .8);
        border-radius: 18px;
        box-shadow: 0 15px 45px rgba(60, 42, 20, .18);
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
    }

        .mobile-filter-bar button {
            flex: 1;
            height: 46px;
            border: 0;
            border-radius: 13px;
            background: #fff7e8;
            color: #76531d;
            font-size: 13px;
            font-weight: 800;
            cursor: pointer;
        }

            .mobile-filter-bar button i {
                margin-right: 7px;
            }
}


/* =========================================================
       SMALL MOBILE
    ========================================================= */

@media (max-width: 480px) {

    .lux-grid-layout {
        padding: 14px 10px 85px;
    }

    .lux-sidebar-glass {
        padding: 18px 14px;
    }

        .lux-sidebar-glass
        .sidebar-header h3 {
            font-size: 19px;
        }

    .lux-topbar h2 {
        font-size: 25px;
    }

    .lux-topbar p {
        font-size: 12px;
    }

    .lux-chip {
        min-height: 40px;
        padding: 0 12px;
        font-size: 12px;
    }

    .bhk-filter {
        min-width: 62px;
        min-height: 39px;
        padding: 0 12px;
        font-size: 12px;
    }

    .budget-filter {
        min-height: 38px;
        padding: 0 11px;
        font-size: 11px;
    }

    .shortlisted-content {
        gap: 11px;
    }
}







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




/* =========================================
               BODY
            ========================================= */


.col-12.apartment-item {
    margin-bottom: 74px;
}

.main-container {
    max-width: 1400px;
    margin: auto;
    padding: 25px 15px;
}

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

.project-layout {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

/* =========================================
               LEFT SIDE
            ========================================= */

.left-apartment-side {
    width: 32%;
    position: sticky;
    top: 20px;
}

/* =========================================
               RIGHT SIDE
            ========================================= */

.right-property-side {
    width: 68%;
}

/* =========================================
               BHK TABS
            ========================================= */

.bhk-tabs {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.bhk-tab {
    border: none;
    background: #fff;
    color: #111827;
    padding: 12px 18px;
    border-radius: 16px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: .3s;
    box-shadow: 0 6px 20px rgba(0,0,0,.05);
}

    .bhk-tab.active {
        background: linear-gradient(135deg,#d4a437,#b8860b);
        color: #fff;
    }

    .bhk-tab:hover {
        transform: translateY(-2px);
    }

/* =========================================
       PROPERTY CATEGORY TABS
    ========================================= */

.property-category-tabs {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.property-category-tab {
    border: 1px solid rgba(212,175,55,.25);
    background: #fff;
    color: #2b1807;
    padding: 11px 20px;
    border-radius: 14px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: .3s ease;
    box-shadow: 0 6px 18px rgba(0,0,0,.05);
}

    .property-category-tab:hover {
        transform: translateY(-2px);
    }

    .property-category-tab.active {
        background: linear-gradient(135deg,#d4a437,#b8860b);
        color: #fff;
        box-shadow: 0 8px 20px rgba(184,134,11,.25);
    }
/* =========================================
               APARTMENT CARD
            ========================================= */

.apartment-card {
    background: #fff;
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid #edf2f7;
    box-shadow: 0 12px 30px rgba(0,0,0,.05);
    margin-bottom: 24px;
    transition: .3s;
}

    .apartment-card:hover {
        transform: translateY(-4px);
    }

    .apartment-card img,
    .apartment-card video {
        width: 100%;
        height: 230px;
        object-fit: cover;
        display: block;
    }

/* =========================================
               APARTMENT BODY
            ========================================= */

.apartment-body {
    padding: 20px;
}

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

.price-tag {
    font-size: 12px !important;
    padding: 8px 14px !important;
}

/* =========================================
               APARTMENT GRID
            ========================================= */

.apartment-grid {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 12px;
}

.apartment-info {
    background: #f8fafc;
    border-radius: 14px;
    padding: 14px;
    border: 1px solid #edf2f7;
}

    .apartment-info label {
        font-size: 14px !important;
    }

    .apartment-info strong {
        font-size: 12px !important;
    }

.apartment-info {
    background: #271808 !important;
    border-radius: 14px;
    padding: 14px;
    border: 1px solid #edf2f7;
}
/* =========================================
               PROPERTY CARD
            ========================================= */

.property-main-combined-card {
    background: #fff;
    border-radius: 30px;
    overflow: hidden;
    border: 1px solid #edf2f7;
    box-shadow: 0 16px 40px rgba(0,0,0,.06);
}

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

.property-image-box {
    width: 100%;
    height: 360px;
    overflow: hidden;
    position: relative;
}

    .property-image-box img {
        width: 100%;
        height: 360px;
        object-fit: cover;
        transition: .5s;
    }

    .property-image-box:hover img {
        transform: scale(1.04);
    }

/* =========================================
               PROPERTY DETAILS
            ========================================= */

.property-details-wrapper {
    padding: 35px;
}

/* =========================================
               TITLE + BUTTONS
            ========================================= */

.property-title-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 25px;
    margin-bottom: 20px;
}

.property-left-content {
    flex: 1;
}

.property-title {
    font-size: 24px !important;
}

.property-location {
    font-size: 12px !important;
}

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

.property-action-buttons {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    flex-wrap: wrap;
}

.property-btn {
    border: none;
    outline: none;
    padding: 13px 24px;
    border-radius: 50px;
    background: #fff;
    color: #1f2937;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: .3s;
    white-space: nowrap;
    border: 1px solid #e5e7eb;
    box-shadow: 0 6px 18px rgba(0,0,0,.05);
}

    .property-btn:hover {
        background: linear-gradient(135deg,#d4a437,#b8860b);
        color: #fff;
        transform: translateY(-2px);
    }

    .property-btn.active {
        background: linear-gradient(135deg,#d4a437,#b8860b);
        color: #fff;
    }

/* =========================================
               PROPERTY HIGHLIGHTS
            ========================================= */

.property-highlights {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 30px;
}

.highlight-chip {
    font-size: 11px !important;
    padding: 10px 14px !important;
}

    .highlight-chip:hover {
        background: #fff;
        transform: translateY(-2px);
        box-shadow: 0 8px 22px rgba(0,0,0,.05);
    }

/* =========================================
               ABOUT PROPERTY
            ========================================= */

.about-property-box {
    background: #f8fafc;
    border-radius: 24px;
    padding: 28px;
    border: 1px solid #edf2f7;
}

.description-title {
    font-size: 18px !important;
}

.description-text {
    font-size: 12px !important;
    line-height: 1.7 !important;
}

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

.carousel-control-prev,
.carousel-control-next {
    width: 50px;
    opacity: 1;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-color: rgba(0,0,0,.45);
    border-radius: 50%;
    padding: 16px;
    background-size: 12px;
}

.plan-popup-modal {
    display: none;
    position: fixed;
    z-index: 999999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.88);
    overflow: auto;
    padding: 30px;
}

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

.plan-popup-content {
    position: relative;
    width: 90%;
    max-width: 1200px;
    margin: auto;
    text-align: center;
    animation: popupZoom .3s ease;
}

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

    .plan-popup-content img {
        width: 100%;
        max-height: 85vh;
        object-fit: contain;
        background: #fff;
        border-radius: 20px;
        padding: 10px;
    }

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

.popup-plan-title {
    font-size: 22px !important;
}

/* =========================================
               CLOSE BUTTON
            ========================================= */

.plan-popup-close {
    position: absolute;
    top: -10px;
    right: 0;
    color: #fff;
    font-size: 50px;
    font-weight: 700;
    cursor: pointer;
}

.download-icon-btn {
    width: 60px;
    height: 60px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: 0.3s ease;
    background: transparent; /* remove background */
    box-shadow: none;
    border: none;
}

    .download-icon-btn i {
        font-size: 24px !important;
    }

    .download-icon-btn:hover {
        transform: translateY(-2px) scale(1.08);
        background: transparent;
    }

        .download-icon-btn:hover i {
            color: #b8860b; /* dark golden on hover */
        }

.project-date-wrapper {
    display: flex;
    gap: 16px;
    margin-bottom: 25px;
    flex-wrap: wrap;
}

.project-date-card {
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 16px;
    padding: 12px 18px;
    min-width: 160px;
}

    .project-date-card span {
        display: block;
        font-size: 10px;
        color: #888;
        margin-bottom: 4px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .project-date-card strong {
        font-size: 13px;
        color: #111827;
        font-weight: 700;
    }

/* MEDIA POPUP */
.media-popup-modal {
    display: none;
    position: fixed;
    z-index: 9999999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.95);
}

.media-popup-content {
    width: 90%;
    max-width: 1300px;
    margin: 30px auto;
    position: relative;
}

    .media-popup-content img,
    .media-popup-content video {
        width: 100%;
        max-height: 90vh;
        object-fit: contain;
        border-radius: 15px;
        background: #000;
    }

.media-popup-close {
    position: absolute;
    top: -10px;
    right: 0;
    color: white;
    font-size: 50px;
    cursor: pointer;
    z-index: 1000;
}

#popupCarousel .carousel-item {
    text-align: center;
}

#popupCarousel img,
#popupCarousel video {
    width: 100%;
    max-height: 85vh;
    object-fit: contain;
    background: #000;
}

/* ================================
           YOUTUBE PREVIEW
        ================================ */

.youtube-frame {
    width: 100%;
    aspect-ratio: 16/9;
    border: none;
    border-radius: 14px;
    cursor: pointer;
    background: #000;
    object-fit: cover;
    overflow: hidden;
}

/* ================================
           YOUTUBE MODAL
        ================================ */

.youtube-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 999999;
    background: rgba(0,0,0,.92);
    padding: 20px;
    overflow: auto;
}

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

.youtube-modal-content {
    position: relative;
    width: 95%;
    max-width: 1200px;
    margin: auto;
    top: 50%;
    transform: translateY(-50%);
}

/* ================================
           YOUTUBE VIDEO
        ================================ */

#youtubeFrame {
    width: 100%;
    aspect-ratio: 16/9;
    border: none;
    border-radius: 18px;
    background: #000;
    box-shadow: 0 10px 40px rgba(0,0,0,.45);
}

/* ================================
           CLOSE BUTTON
        ================================ */

.youtube-close {
    position: absolute;
    right: -10px;
    top: -55px;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: #fff;
    color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    cursor: pointer;
    font-weight: bold;
    transition: .3s;
    z-index: 999999;
}

    .youtube-close:hover {
        transform: rotate(90deg);
        background: #f1f1f1;
    }

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

@media(max-width:992px) {

    .youtube-modal-content {
        width: 98%;
    }

    #youtubeFrame {
        aspect-ratio: 16/9;
    }
}

@media(max-width:768px) {

    .youtube-frame {
        aspect-ratio: 16/9;
        border-radius: 12px;
    }

    .youtube-modal {
        padding: 10px;
    }

    .youtube-modal-content {
        width: 100%;
        top: 50%;
    }

    #youtubeFrame {
        width: 100%;
        aspect-ratio: 16/9;
        border-radius: 12px;
    }

    .youtube-close {
        right: 0;
        top: -45px;
        width: 40px;
        height: 40px;
        font-size: 24px;
    }
}

@media(max-width:480px) {

    .youtube-frame {
        aspect-ratio: 16/9;
    }

    #youtubeFrame {
        aspect-ratio: 16/9;
    }

    .youtube-close {
        width: 36px;
        height: 36px;
        font-size: 20px;
    }
}


/* ===========================
           PREMIUM PROPERTY DETAILS
        =========================== */

.property-details-wrapper {
    background: linear-gradient(145deg,#241406,#120a03);
    border-radius: 28px;
    padding: 30px;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(212,175,55,.25);
    box-shadow: 0 15px 40px rgba(0,0,0,.35), inset 0 0 30px rgba(212,175,55,.06);
    border-top-right-radius: 0px;
    border-top-left-radius: 0px;
}

    .property-details-wrapper::before {
        content: "";
        position: absolute;
        top: -120px;
        right: -120px;
        width: 260px;
        height: 260px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(212,175,55,.15), transparent 70%);
    }

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

.property-title-wrapper {
    display: block;
    width: 100%;
    margin-bottom: 22px;
    padding-bottom: 22px;
    border-bottom: 1px solid rgba(212,175,55,.15);
}

.property-left-content {
    width: 100%;
    min-width: 0;
}

.property-title {
    font-size: 34px;
    font-weight: 800;
    color: #fff;
    line-height: 1.2;
    margin: 0;
}

/* Professional one-line project definition under the name */
.project-definition-line {
    margin-top: 9px;
    color: rgba(255,255,255,.70);
    font-size: 13px;
    line-height: 1.7;
    max-width: 1100px;
}

    .project-definition-line strong {
        color: #d4af37;
        font-weight: 700;
    }

/* ===========================
           BUTTONS - ONE LINE
        =========================== */

.property-action-buttons {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
    margin-top: 22px;
    align-items: stretch;
}

    .property-action-buttons .property-btn,
    .property-action-buttons .contact-owner-btn,
    .property-action-buttons .brochure-btn {
        width: 100%;
        min-width: 0;
        height: 46px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 9px 7px;
        border-radius: 10px;
        border: 1px solid rgba(212,175,55,.45) !important;
        background: linear-gradient(135deg,#d4af37,#f5d76e) !important;
        color: #2b1807 !important;
        font-size: 12px;
        font-weight: 700;
        white-space: nowrap;
        text-decoration: none;
        cursor: pointer;
        box-shadow: 0 6px 16px rgba(212,175,55,.16);
        transition: all .25s ease;
    }

        .property-action-buttons .property-btn:hover,
        .property-action-buttons .property-btn.active,
        .property-action-buttons .contact-owner-btn:hover,
        .property-action-buttons .brochure-btn:hover {
            background: linear-gradient(135deg,#f5d76e,#d4af37) !important;
            color: #2b1807 !important;
            transform: translateY(-2px);
            box-shadow: 0 10px 24px rgba(212,175,55,.28);
        }

    .property-action-buttons i {
        font-size: 12px;
    }

.download-icon-btn {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border-radius: 12px;
    background: linear-gradient( 135deg, #d4af37, #f5d76e);
    color: #2b1807;
    font-size: 18px;
    transition: .3s;
}

    .download-icon-btn:hover {
        transform: scale(1.08);
    }

/* ===========================
           HIGHLIGHTS
        =========================== */

.property-highlights {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 25px;
}

.highlight-chip {
    padding: 12px 18px;
    border-radius: 50px;
    background: rgba(255,255,255,.05);
    color: #fff;
    border: 1px solid rgba(212,175,55,.15);
    font-size: 14px;
    font-weight: 600;
    transition: .3s;
}

    .highlight-chip:hover {
        background: rgba(212,175,55,.10);
        transform: translateY(-2px);
    }

/* ===========================
           DATE CARDS
        =========================== */

.project-date-wrapper {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 18px;
    margin-bottom: 25px;
}

.project-date-card {
    background: rgba(255,255,255,.04);
    border-radius: 18px;
    padding: 22px;
    border: 1px solid rgba(212,175,55,.15);
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    text-align: center;
    transition: .3s;
}

    .project-date-card:hover {
        transform: translateY(-4px);
        background: rgba(212,175,55,.06);
    }

    .project-date-card span {
        display: block;
        color: #d4af37;
        font-size: 13px;
        text-transform: uppercase;
        letter-spacing: 1px;
        margin-bottom: 8px;
        font-weight: 600;
    }

/* ===========================
           ABOUT BOX
        =========================== */

.about-property-box {
    background: rgba(255,255,255,.04);
    border-radius: 22px;
    padding: 28px;
    border: 1px solid rgba(212,175,55,.15);
}

.description-title {
    color: #d4af37;
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 18px;
    position: relative;
}

    .description-title::after {
        content: "";
        width: 70px;
        height: 3px;
        background: #d4af37;
        display: block;
        margin-top: 10px;
        border-radius: 10px;
    }

.description-text {
    color: #e5e5e5;
    line-height: 1.9;
    font-size: 15px;
}

/* ===========================
           TABLET
        =========================== */

@media(max-width:991px) {

    .property-title-wrapper {
        flex-direction: column;
    }

    .property-action-buttons {
        justify-content: flex-start;
    }

    .property-title {
        font-size: 28px;
    }
}

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

@media(max-width:1100px) {

    .property-action-buttons {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media(max-width:576px) {

    .property-details-wrapper {
        padding: 20px;
        border-radius: 20px;
    }

    .property-title {
        font-size: 22px;
    }

    .property-location {
        font-size: 14px;
    }

    .property-action-buttons .property-btn,
    .property-action-buttons .contact-owner-btn,
    .property-action-buttons .brochure-btn {
        width: 100%;
        height: 44px;
        padding: 8px 5px;
        font-size: 11px;
    }

    .project-date-wrapper {
        grid-template-columns: 1fr;
    }

    .project-date-card {
        padding: 18px;
        font-size: 16px;
    }

    .about-property-box {
        padding: 20px;
    }

    .description-title {
        font-size: 20px;
    }

    .description-text {
        font-size: 14px;
    }

    .download-icon-btn {
        width: 100%;
        height: 50px;
    }
}

@media(max-width:576px) {
    .property-title {
        font-size: 24px;
        line-height: 1.2;
    }

    .project-definition-line {
        font-size: 12px;
        line-height: 1.65;
        margin-top: 7px;
    }
}

.plan-message-box {
    display: block;
    width: 100%;
    margin-top: 15px;
    padding: 10px 15px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
    color: #ff6b6b;
    background: rgba(255, 107, 107, 0.08);
    border: 1px solid rgba(255, 107, 107, 0.25);
    display: none;
}

    .plan-message-box.show {
        display: block;
    }

    .plan-message-box.error {
        color: #ff6b6b;
        background: rgba(255, 107, 107, 0.08);
        border: 1px solid rgba(255, 107, 107, 0.25);
    }

    .plan-message-box.success {
        color: #4ade80;
        background: rgba(74, 222, 128, 0.08);
        border: 1px solid rgba(74, 222, 128, 0.25);
    }

/* 27-JUNE MANU - Brown Theme */

.project-contact-card {
    margin-top: 35px;
    background: #fff;
    border-radius: 24px;
    padding: 35px;
    box-shadow: 0 15px 45px rgba(0,0,0,.08);
    border: 1px solid #e5ddd8;
}

.contact-heading {
    font-size: 24px;
    font-weight: 700;
    color: #4e342e;
    margin-bottom: 10px;
}

    .contact-heading i {
        color: #6d4c41;
        margin-right: 10px;
    }

.contact-subtitle {
    color: #6b6b6b;
    margin-bottom: 25px;
}

.contact-input {
    position: relative;
    margin-bottom: 18px;
}

    .contact-input i {
        position: absolute;
        left: 18px;
        top: 18px;
        color: #6d4c41;
        font-size: 16px;
    }

    .contact-input input,
    .contact-input textarea {
        width: 100%;
        border: 1px solid #d7ccc8;
        border-radius: 14px;
        padding: 14px 18px 14px 48px;
        font-size: 15px;
        transition: .3s;
        outline: none;
        background: #fff;
        color: #4e342e;
    }

    .contact-input textarea {
        min-height: 120px;
        resize: none;
    }

        .contact-input input:focus,
        .contact-input textarea:focus {
            border-color: #795548;
            box-shadow: 0 0 0 4px rgba(121,85,72,.15);
        }

.contact-btn {
    width: 100%;
    border: none;
    border-radius: 15px;
    padding: 16px;
    font-size: 16px;
    font-weight: 700;
    background: linear-gradient(135deg,#8d6e63,#5d4037);
    color: #fff;
    cursor: pointer;
    transition: .3s ease;
}

    .contact-btn:hover {
        transform: translateY(-2px);
        background: linear-gradient(135deg,#6d4c41,#4e342e);
        box-shadow: 0 12px 30px rgba(93,64,55,.35);
    }

@media (max-width:768px) {

    .project-contact-card {
        padding: 22px;
    }

    .contact-heading {
        font-size: 20px;
    }
}

/*4-Aug*/
.read-more-btn {
    display: inline-block;
    margin-top: 10px;
    color: #d4af37;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: .3s;
}

    .read-more-btn:hover {
        color: #f5d76e;
        text-decoration: underline;
    }

.description-text,
.description-text * {
    color: #ffffff !important;
}

    .description-text h1,
    .description-text h2,
    .description-text h3,
    .description-text h4,
    .description-text h5,
    .description-text h6 {
        color: #d4af37 !important;
    }

    .description-text p,
    .description-text li,
    .description-text span,
    .description-text strong {
        color: #ffffff !important;
    }

    .description-text a {
        color: #d4af37 !important;
    }

/* =========================================
       CONTACT OWNER BUTTON + POPUP
       ========================================= */
.contact-owner-btn {
    border: none;
    outline: none;
    cursor: pointer;
    padding: 12px 22px;
    border-radius: 12px;
    background: linear-gradient(135deg,#d4af37,#f5d76e);
    color: #2b1807;
    font-weight: 800;
    transition: .35s;
    border: 1px solid rgba(212,175,55,.45);
    box-shadow: 0 8px 22px rgba(212,175,55,.18);
    white-space: nowrap;
}

    .contact-owner-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 28px rgba(212,175,55,.30);
    }

.owner-contact-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10000000;
    background: rgba(0,0,0,.78);
    padding: 20px;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
}

    .owner-contact-modal.show {
        display: flex;
    }

.owner-contact-box {
    width: 100%;
    max-width: 560px;
    background: #fff;
    border-radius: 24px;
    padding: 30px;
    position: relative;
    box-shadow: 0 25px 80px rgba(0,0,0,.35);
    animation: ownerPopupIn .25s ease;
}

@keyframes ownerPopupIn {
    from {
        opacity: 0;
        transform: translateY(25px) scale(.97);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.owner-contact-title {
    color: #4e342e;
    font-size: 24px;
    font-weight: 800;
    margin: 0 35px 7px 0;
}

.owner-contact-subtitle {
    color: #777;
    font-size: 14px;
    margin-bottom: 22px;
    line-height: 1.6;
}

.owner-contact-close {
    position: absolute;
    right: 18px;
    top: 12px;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: #f5f1ee;
    color: #4e342e;
    font-size: 25px;
    line-height: 35px;
    cursor: pointer;
}

    .owner-contact-close:hover {
        background: #5d4037;
        color: #fff;
    }

.owner-project-name {
    background: linear-gradient(135deg,#4e342e,#795548);
    color: #fff;
    border-radius: 14px;
    padding: 13px 16px;
    margin-bottom: 18px;
    font-weight: 700;
}

.owner-contact-box .contact-input {
    margin-bottom: 14px;
}

    .owner-contact-box .contact-input input,
    .owner-contact-box .contact-input textarea {
        box-sizing: border-box;
    }

@media (max-width:576px) {
    .owner-contact-modal {
        padding: 12px;
    }

    .owner-contact-box {
        padding: 22px 18px;
        border-radius: 20px;
    }

    .owner-contact-title {
        font-size: 20px;
    }

    .contact-owner-btn {
        width: 100%;
    }
}


/* =========================================
       APARTMENT DEFINITION
       ========================================= */

.apartment-definition {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-top: 18px;
    padding: 18px 20px;
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.018));
    border: 1px solid rgba(212,175,55,.20);
    position: relative;
    overflow: hidden;
    transition: all .3s ease;
}

    .apartment-definition::before {
        content: "";
        position: absolute;
        width: 150px;
        height: 150px;
        top: -80px;
        right: -70px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(212,175,55,.12), transparent 70%);
        pointer-events: none;
    }

.apartment-definition-icon {
    width: 44px;
    height: 44px;
    min-width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: linear-gradient(135deg, #d4af37, #f5d76e);
    color: #2b1807;
    font-size: 16px;
    box-shadow: 0 7px 18px rgba(212,175,55,.20);
}

.apartment-definition-content {
    position: relative;
    z-index: 2;
    flex: 1;
    min-width: 0;
}

    .apartment-definition-content h4 {
        margin: 0 0 6px;
        color: #d4af37;
        font-size: 16px;
        font-weight: 800;
    }

    .apartment-definition-content p {
        margin: 0;
        color: rgba(255,255,255,.72);
        font-size: 13px;
        line-height: 1.8;
    }

    .apartment-definition-content strong {
        color: #fff;
        font-weight: 700;
    }

.apartment-definition:hover {
    border-color: rgba(212,175,55,.35);
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0,0,0,.15);
}

@media (max-width:576px) {
    .apartment-definition {
        padding: 16px;
        gap: 11px;
        border-radius: 15px;
    }

    .apartment-definition-icon {
        width: 38px;
        height: 38px;
        min-width: 38px;
        font-size: 14px;
        border-radius: 10px;
    }

    .apartment-definition-content h4 {
        font-size: 15px;
    }

    .apartment-definition-content p {
        font-size: 12px;
        line-height: 1.7;
    }
}


/* =========================================================
       INLINE PLAN VIEWER — plan image below description, no popup
       ========================================================= */
.in-page-plan-viewer {
    margin-top: 26px;
    padding: 18px;
    scroll-margin-top: 20px;
    border: 1px solid rgba(212,175,55,.35);
    border-radius: 18px;
    background: rgba(255,255,255,.05);
}

    .in-page-plan-viewer[hidden] {
        display: none;
    }

.in-page-plan-title {
    margin: 0 0 14px;
    color: #f5d76e;
    font-size: 21px;
    font-weight: 800;
}

.in-page-plan-image {
    display: block;
    width: 100%;
    max-height: 760px;
    object-fit: contain;
    border-radius: 12px;
    background: #fff;
}

.in-page-plan-pdf {
    display: block;
    width: 100%;
    height: 720px;
    border: 0;
    border-radius: 12px;
    background: #fff;
}

.in-page-plan-error {
    margin: 0;
    color: #ffd6d6;
    font-weight: 700;
}

@media(max-width:576px) {
    .in-page-plan-viewer {
        padding: 12px;
    }

    .in-page-plan-pdf {
        height: 520px;
    }
}


/* All plan sections show automatically; action buttons scroll to these IDs. */
.in-page-plan-viewer {
    margin-top: 26px;
}

.in-page-contact-form {
    display: grid;
    gap: 14px;
}

    .in-page-contact-form label {
        display: grid;
        gap: 6px;
        color: #f5d76e;
        font-size: 13px;
        font-weight: 700;
    }

    .in-page-contact-form input,
    .in-page-contact-form textarea {
        width: 100%;
        padding: 12px 14px;
        border: 1px solid rgba(212,175,55,.50);
        border-radius: 9px;
        color: #2b1807;
        background: #fff;
        outline: none;
    }

    .in-page-contact-form textarea {
        min-height: 115px;
        resize: vertical;
    }

.in-page-contact-submit {
    width: max-content;
    min-width: 155px;
    border: 0;
    border-radius: 9px;
    padding: 13px 18px;
    background: linear-gradient(135deg,#d4af37,#f5d76e);
    color: #2b1807;
    font-weight: 800;
    cursor: pointer;
}

#inPageContactStatus {
    min-height: 18px;
    margin: 0;
    font-weight: 700;
}


/* =========================================================
       PROFESSIONAL INLINE DOCUMENT + CONTACT DESIGN
       ========================================================= */
.in-page-plan-viewer {
    position: relative;
    overflow: hidden;
    margin-top: 30px;
    padding: 26px;
    border: 1px solid rgba(212,175,55,.34);
    border-radius: 22px;
    background: radial-gradient(circle at 100% 0%, rgba(212,175,55,.14), transparent 30%), linear-gradient(145deg,#26170a,#140b04);
    box-shadow: 0 16px 38px rgba(0,0,0,.20);
}

    .in-page-plan-viewer::after {
        content: "";
        position: absolute;
        right: -70px;
        bottom: -80px;
        width: 180px;
        height: 180px;
        border-radius: 50%;
        pointer-events: none;
        background: radial-gradient(circle,rgba(245,215,110,.10),transparent 68%);
    }

.in-page-plan-title {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 19px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(212,175,55,.23);
    color: #f7dc82;
    font-size: clamp(20px,2.4vw,26px);
    font-weight: 800;
    letter-spacing: .15px;
}

    .in-page-plan-title::before {
        content: "";
        width: 5px;
        height: 26px;
        flex: 0 0 auto;
        border-radius: 8px;
        background: linear-gradient(180deg,#f5d76e,#b8860b);
        box-shadow: 0 0 15px rgba(245,215,110,.42);
    }

.in-page-plan-image,
.in-page-plan-pdf {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    border: 1px solid rgba(245,215,110,.38);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 11px 28px rgba(0,0,0,.24);
}

.in-page-plan-image {
    max-height: 780px;
    object-fit: contain;
}

.in-page-plan-pdf {
    height: 730px;
}

.in-page-plan-error {
    position: relative;
    z-index: 1;
    margin: 0;
    padding: 20px;
    border: 1px dashed rgba(245,215,110,.55);
    border-radius: 12px;
    color: #ffe6a4;
    background: rgba(255,255,255,.045);
    text-align: center;
}

.in-page-contact-form {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 17px;
    max-width: 900px;
}

    .in-page-contact-form label {
        color: #f7dc82;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: .12px;
    }

        .in-page-contact-form label:nth-of-type(3) {
            grid-column: 1 / -1;
        }

    .in-page-contact-form input,
    .in-page-contact-form textarea {
        margin: 0;
        padding: 13px 14px;
        border: 1px solid rgba(212,175,55,.45);
        border-radius: 10px;
        background: rgba(255,255,255,.98);
        color: #281806;
        box-shadow: inset 0 1px 2px rgba(0,0,0,.06);
        transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
    }

        .in-page-contact-form input:focus,
        .in-page-contact-form textarea:focus {
            border-color: #f5d76e;
            box-shadow: 0 0 0 3px rgba(245,215,110,.18);
        }

.in-page-contact-submit {
    min-height: 47px;
    padding: 12px 22px;
    border: 1px solid rgba(245,215,110,.62);
    border-radius: 10px;
    background: linear-gradient(135deg,#f5d76e,#d4af37);
    color: #2b1807;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .15px;
    box-shadow: 0 8px 18px rgba(0,0,0,.20);
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

    .in-page-contact-submit:hover:not(:disabled) {
        transform: translateY(-2px);
        filter: brightness(1.04);
        box-shadow: 0 12px 24px rgba(0,0,0,.28);
    }

    .in-page-contact-submit:disabled {
        cursor: wait;
        opacity: .72;
    }

#inPageContactStatus {
    align-self: center;
    margin: 0;
    padding: 7px 0;
}

@media(max-width:576px) {
    .in-page-plan-viewer {
        margin-top: 20px;
        padding: 16px;
        border-radius: 16px;
    }

    .in-page-plan-title {
        margin-bottom: 14px;
        padding-bottom: 11px;
        font-size: 20px;
    }

    .in-page-plan-pdf {
        height: 510px;
    }

    .in-page-contact-form {
        grid-template-columns: 1fr;
        gap: 13px;
    }

        .in-page-contact-form label:nth-of-type(3) {
            grid-column: auto;
        }

    .in-page-contact-submit {
        width: 100%;
    }
}


/* =========================================================
       DESKTOP LAYOUT: LEFT APARTMENT PANEL STAYS FIXED/STICKY;
       RIGHT PROJECT CONTENT SCROLLS WITH THE PAGE.
       ========================================================= */
.project-layout {
    align-items: flex-start;
}

.left-apartment-side {
    position: -webkit-sticky;
    position: sticky;
    top: 104px;
    align-self: flex-start;
    max-height: calc(100vh - 124px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 7px;
    scrollbar-width: thin;
    scrollbar-color: rgba(212,175,55,.75) rgba(43,24,7,.10);
}

    .left-apartment-side::-webkit-scrollbar {
        width: 6px;
    }

    .left-apartment-side::-webkit-scrollbar-track {
        border-radius: 10px;
        background: rgba(43,24,7,.08);
    }

    .left-apartment-side::-webkit-scrollbar-thumb {
        border-radius: 10px;
        background: linear-gradient(#f5d76e,#b8860b);
    }

.right-property-side {
    min-width: 0;
    padding-bottom: 50px;
}

@media(max-width:992px) {
    .project-layout {
        display: block;
    }

    .left-apartment-side,
    .right-property-side {
        width: 100%;
    }

    .left-apartment-side {
        position: static;
        max-height: none;
        overflow: visible;
        padding-right: 0;
        margin-bottom: 22px;
    }
}


/* =========================================================
       TWO-PANEL DESKTOP VIEW
       Left apartment panel: fixed, no scroll
       Right project panel: the only scrolling panel
       ========================================================= */
@media(min-width:993px) {
    .project-layout {
        height: calc(100vh - 132px);
        min-height: 520px;
        overflow: hidden;
        align-items: stretch;
    }

    .left-apartment-side {
        position: -webkit-sticky;
        position: sticky;
        top: 104px;
        align-self: flex-start;
        height: calc(100vh - 132px);
        max-height: calc(100vh - 132px);
        overflow: hidden;
        padding-right: 0;
    }

    .right-property-side {
        height: calc(100vh - 132px);
        max-height: calc(100vh - 132px);
        overflow-y: auto;
        overflow-x: hidden;
        overscroll-behavior: contain;
        padding: 0 10px 42px 0;
        scrollbar-width: thin;
        scrollbar-color: rgba(212,175,55,.75) rgba(43,24,7,.12);
    }

        .right-property-side::-webkit-scrollbar {
            width: 7px;
        }

        .right-property-side::-webkit-scrollbar-track {
            border-radius: 12px;
            background: rgba(43,24,7,.10);
        }

        .right-property-side::-webkit-scrollbar-thumb {
            border-radius: 12px;
            background: linear-gradient(#f5d76e,#b8860b);
        }

    .inline-document-list {
        padding: 4px 0 24px;
    }

    .right-property-side .in-page-plan-viewer {
        scroll-margin-top: 14px;
    }
}

@media(max-width:992px) {
    .inline-document-list {
        padding: 0;
    }
}


/* Right panel still scrolls, but its scrollbar is visually hidden. */
@media(min-width:993px) {
    .right-property-side {
        -ms-overflow-style: none;
        scrollbar-width: none;
        padding-right: 0;
    }

        .right-property-side::-webkit-scrollbar {
            display: none;
            width: 0;
            height: 0;
        }
}

/* =========================================================
       SMALL CLICKABLE PLAN THUMBNAILS + LARGE IMAGE PREVIEW
       ========================================================= */
.in-page-plan-image {
    width: 100%;
    max-height: 260px !important;
    min-height: 180px;
    object-fit: contain;
    cursor: zoom-in;
    transition: transform .22s ease, box-shadow .22s ease, filter .22s ease;
}

    .in-page-plan-image:hover {
        transform: translateY(-3px) scale(1.01);
        filter: brightness(1.04);
        box-shadow: 0 17px 32px rgba(0,0,0,.32);
    }

.plan-preview-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10000000;
    align-items: center;
    justify-content: center;
    padding: 28px;
    background: rgba(8,5,2,.92);
    backdrop-filter: blur(6px);
}

    .plan-preview-modal.show {
        display: flex;
    }

.plan-preview-dialog {
    position: relative;
    width: min(1180px, 96vw);
    max-height: 94vh;
    padding: 14px;
    border: 1px solid rgba(245,215,110,.58);
    border-radius: 18px;
    background: linear-gradient(145deg,#2b1a0d,#120a04);
    box-shadow: 0 26px 70px rgba(0,0,0,.55);
}

.plan-preview-title {
    margin: 0 45px 12px 4px;
    color: #f5d76e;
    font-size: 20px;
    font-weight: 800;
}

.plan-preview-image {
    display: block;
    width: 100%;
    max-height: calc(94vh - 82px);
    object-fit: contain;
    border-radius: 10px;
    background: #fff;
}

.plan-preview-close {
    position: absolute;
    z-index: 1;
    top: 9px;
    right: 9px;
    width: 35px;
    height: 35px;
    border: 1px solid rgba(245,215,110,.60);
    border-radius: 50%;
    background: #fff;
    color: #2b1807;
    font-size: 25px;
    font-weight: 700;
    line-height: 30px;
    cursor: pointer;
    transition: transform .2s ease;
}

    .plan-preview-close:hover {
        transform: rotate(90deg);
    }

@media(max-width:576px) {
    .in-page-plan-image {
        max-height: 210px !important;
        min-height: 145px;
    }

    .plan-preview-modal {
        padding: 12px;
    }

    .plan-preview-dialog {
        padding: 10px;
        border-radius: 13px;
    }

    .plan-preview-title {
        font-size: 17px;
    }
}


/* =========================================================
       FINAL PROFESSIONAL POLISH
       Keeps the existing brown/gold identity and functionality.
       These rules intentionally override the older duplicate rules.
       ========================================================= */

:root {
    --rp-brown-950: #120a05;
    --rp-brown-900: #1b0f08;
    --rp-brown-800: #27150b;
    --rp-brown-700: #3a2113;
    --rp-gold: #d4af37;
    --rp-gold-light: #f5d76e;
    --rp-gold-soft: rgba(212,175,55,.16);
    --rp-white: #ffffff;
    --rp-muted: rgba(255,255,255,.68);
    --rp-border: rgba(212,175,55,.20);
    --rp-shadow: 0 18px 45px rgba(0,0,0,.22);
}

html {
    scroll-behavior: smooth;
}

body {
    background: #f5f3ef;
    color: #2b1807;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.main-container {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 24px 18px 50px;
}

.project-layout {
    gap: 22px;
}

/* ---------- LEFT APARTMENT PANEL ---------- */
.left-apartment-side {
    width: 34%;
}

.right-property-side {
    width: 66%;
}

.property-category-tabs,
.bhk-tabs {
    gap: 8px;
    margin-bottom: 12px;
}

.property-category-tab,
.bhk-tab {
    position: relative;
    border: 1px solid rgba(121,85,72,.14);
    border-radius: 12px;
    padding: 10px 15px;
    background: #fff;
    color: #4e342e;
    box-shadow: 0 5px 18px rgba(43,24,7,.06);
    font-size: 12px;
    font-weight: 700;
}

    .property-category-tab::after,
    .bhk-tab::after {
        content: "";
        position: absolute;
        left: 14px;
        right: 14px;
        bottom: 4px;
        height: 2px;
        border-radius: 4px;
        background: var(--rp-gold);
        transform: scaleX(0);
        transform-origin: center;
        transition: transform .2s ease;
    }

    .property-category-tab:hover::after,
    .bhk-tab:hover::after,
    .property-category-tab.active::after,
    .bhk-tab.active::after {
        transform: scaleX(1);
    }

    .property-category-tab.active,
    .bhk-tab.active {
        background: linear-gradient(135deg, #b8860b, #e2bf4d);
        color: #fff;
        border-color: rgba(212,175,55,.55);
        box-shadow: 0 8px 20px rgba(184,134,11,.20);
    }

.apartment-card {
    border-radius: 18px;
    border: 1px solid rgba(121,85,72,.12);
    background: #fff;
    box-shadow: 0 12px 28px rgba(43,24,7,.08);
    margin-bottom: 16px;
    transform: none;
}

    .apartment-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 18px 35px rgba(43,24,7,.12);
    }

    .apartment-card .carousel,
    .apartment-card .carousel-inner,
    .apartment-card .carousel-item {
        border-radius: 18px 18px 0 0;
        overflow: hidden;
    }

    .apartment-card img,
    .apartment-card video {
        height: 205px;
    }

.apartment-body {
    padding: 17px;
}

.apartment-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 9px;
}

    .apartment-top h3 {
        margin: 0;
        color: #3e2617;
        font-size: 17px !important;
        font-weight: 800;
    }

.price-tag {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 7px 11px !important;
    margin-bottom: 4px;
    border-radius: 9px;
    background: #f8f1df;
    color: #8a6505;
    border: 1px solid rgba(212,175,55,.25);
    font-size: 12px !important;
    font-weight: 800;
}

.apartment-info {
    background: #2b1807 !important;
    border: 1px solid rgba(212,175,55,.16) !important;
}

/* ---------- PROPERTY CARD ---------- */
.property-main-combined-card {
    border-radius: 22px;
    border: 1px solid rgba(121,85,72,.13);
    background: var(--rp-brown-950);
    box-shadow: var(--rp-shadow);
}

.property-image-box {
    height: clamp(280px, 32vw, 430px);
    background: #0c0704;
}

    .property-image-box .carousel,
    .property-image-box .carousel-inner,
    .property-image-box .carousel-item {
        height: 100%;
    }

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

    .property-image-box::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: linear-gradient(180deg, rgba(0,0,0,.02) 45%, rgba(18,10,5,.62) 100%);
        display:none;
    }

    .property-image-box .carousel-control-prev,
    .property-image-box .carousel-control-next {
        z-index: 3;
        width: 48px;
    }

    .property-image-box .carousel-control-prev-icon,
    .property-image-box .carousel-control-next-icon {
        width: 38px;
        height: 38px;
        padding: 0;
        background-color: rgba(18,10,5,.66);
        background-size: 12px;
        border: 1px solid rgba(245,215,110,.35);
        backdrop-filter: blur(5px);
    }

.property-details-wrapper {
    padding: 26px;
    border-radius: 0 0 22px 22px;
    background: radial-gradient(circle at 100% 0%, rgba(245,215,110,.11), transparent 28%), linear-gradient(145deg, #27150b, #120a05);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

.property-title-wrapper {
    margin-bottom: 18px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(212,175,55,.17);
}

.property-title {
    max-width: 100%;
    color: #fff;
    font-size: clamp(25px, 2.5vw, 34px) !important;
    font-weight: 800;
    letter-spacing: -.3px;
}

.project-definition-line {
    max-width: 1000px;
    margin-top: 8px;
    color: rgba(255,255,255,.68);
    font-size: 13px;
    line-height: 1.75;
}

    .project-definition-line strong {
        color: var(--rp-gold-light);
    }

/* ---------- ACTIONS ---------- */
.property-action-buttons {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 9px;
    margin: 20px 0 22px;
}

    .property-action-buttons .property-btn,
    .property-action-buttons .contact-owner-btn,
    .property-action-buttons .brochure-btn {
        min-height: 45px;
        height: auto;
        padding: 10px 8px;
        border-radius: 11px;
        border: 1px solid rgba(212,175,55,.35) !important;
        background: rgba(255,255,255,.055) !important;
        color: #f7e7ae !important;
        box-shadow: none;
        font-size: 11px;
        font-weight: 700;
        transition: all .22s ease;
    }

        .property-action-buttons .property-btn i,
        .property-action-buttons .contact-owner-btn i,
        .property-action-buttons .brochure-btn i {
            color: #1c0f05;
            font-size: 12px;
        }

        .property-action-buttons .property-btn:hover,
        .property-action-buttons .property-btn.active,
        .property-action-buttons .contact-owner-btn:hover,
        .property-action-buttons .brochure-btn:hover {
            transform: translateY(-2px);
            background: linear-gradient(135deg, #d4af37, #f5d76e) !important;
            color: #2b1807 !important;
            box-shadow: 0 9px 22px rgba(212,175,55,.20);
        }

            .property-action-buttons .property-btn:hover i,
            .property-action-buttons .property-btn.active i,
            .property-action-buttons .contact-owner-btn:hover i,
            .property-action-buttons .brochure-btn:hover i {
                color: #2b1807;
            }

/* ---------- HIGHLIGHTS / DATES ---------- */
.property-highlights {
    gap: 8px;
    margin-bottom: 20px;
}

.highlight-chip {
    padding: 8px 12px !important;
    border-radius: 10px;
    background: rgba(255,255,255,.045);
    border: 1px solid rgba(212,175,55,.16);
    color: rgba(255,255,255,.82);
    font-size: 11px !important;
    font-weight: 600;
}

.project-date-wrapper {
    gap: 10px;
    margin-bottom: 18px;
}

.project-date-card {
    padding: 15px 14px;
    border-radius: 13px;
    background: rgba(255,255,255,.045);
    border: 1px solid rgba(212,175,55,.14);
    text-align: left;
}

    .project-date-card span {
        color: rgba(245,215,110,.75);
        font-size: 10px;
        letter-spacing: .8px;
        margin-bottom: 5px;
    }

    .project-date-card strong {
        color: #fff;
        font-size: 13px;
    }

.about-property-box {
    padding: 20px;
    border-radius: 15px;
    background: rgba(255,255,255,.035);
    border: 1px solid rgba(212,175,55,.13);
}

.description-title {
    margin-bottom: 13px;
    color: var(--rp-gold-light);
    font-size: 19px !important;
}

    .description-title::after {
        width: 46px;
        height: 2px;
        margin-top: 7px;
    }

.description-text {
    color: rgba(255,255,255,.78) !important;
    font-size: 13px !important;
    line-height: 1.85 !important;
}

    .description-text * {
        color: inherit !important;
    }

    .description-text h1,
    .description-text h2,
    .description-text h3,
    .description-text h4,
    .description-text h5,
    .description-text h6,
    .description-text a {
        color: var(--rp-gold-light) !important;
    }

.read-more-btn {
    color: var(--rp-gold-light) !important;
    font-size: 12px;
}

/* ---------- DOCUMENT SECTIONS ---------- */
.inline-document-list {
    padding: 2px 0 30px;
}

.in-page-plan-viewer {
    position: relative;
    overflow: hidden;
    margin-top: 18px;
    padding: 20px;
    border-radius: 17px;
    border: 1px solid rgba(121,85,72,.15);
    background: radial-gradient(circle at 100% 0%, rgba(212,175,55,.10), transparent 30%), linear-gradient(145deg,#27150b,#160c06);
    box-shadow: 0 12px 28px rgba(0,0,0,.12);
}

.in-page-plan-title {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 14px;
    padding-bottom: 11px;
    border-bottom: 1px solid rgba(212,175,55,.15);
    color: #f5d76e;
    font-size: 20px !important;
    font-weight: 800;
}

    .in-page-plan-title::before {
        width: 4px;
        height: 21px;
    }

.in-page-plan-image,
.in-page-plan-pdf {
    border-radius: 11px;
    border: 1px solid rgba(245,215,110,.22);
    box-shadow: 0 8px 22px rgba(0,0,0,.18);
}

.in-page-plan-image {
    min-height: 150px;
    max-height: 520px !important;
    background: #fff;
}

    .in-page-plan-image:hover {
        transform: translateY(-2px) scale(1.005);
    }

.in-page-plan-pdf {
    height: 650px;
}

.in-page-plan-error {
    padding: 18px;
    border-radius: 10px;
    background: rgba(255,255,255,.035);
    color: rgba(255,255,255,.70);
    font-size: 13px;
}

/* ---------- CONTACT FORM ---------- */
.in-page-contact-form {
    max-width: 100%;
    gap: 13px;
}

    .in-page-contact-form label {
        color: rgba(245,215,110,.88);
        font-size: 12px;
    }

    .in-page-contact-form input,
    .in-page-contact-form textarea {
        border: 1px solid rgba(212,175,55,.28);
        border-radius: 10px;
        background: rgba(255,255,255,.97);
        color: #281806;
        font-size: 13px;
    }

        .in-page-contact-form input:focus,
        .in-page-contact-form textarea:focus {
            border-color: var(--rp-gold);
            box-shadow: 0 0 0 3px rgba(212,175,55,.13);
        }

.in-page-contact-submit {
    min-height: 44px;
    border-radius: 10px;
    background: linear-gradient(135deg,#d4af37,#f5d76e);
    color: #2b1807;
    font-size: 12px;
    font-weight: 800;
}

/* ---------- MODALS ---------- */
.plan-preview-modal,
.owner-contact-modal,
.youtube-modal,
.media-popup-modal,
.plan-popup-modal {
    backdrop-filter: blur(5px);
}

.plan-preview-dialog {
    border-radius: 18px;
    border-color: rgba(245,215,110,.38);
}

.plan-preview-title {
    font-size: 18px;
}

.plan-preview-close {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid rgba(212,175,55,.25);
    background: rgba(255,255,255,.08);
    color: #fff;
    font-size: 25px;
}

.owner-contact-box {
    border: 1px solid rgba(212,175,55,.18);
    border-radius: 20px;
}

/* ---------- TABLET ---------- */
@media (max-width: 1100px) {
    .left-apartment-side,
    .right-property-side {
        width: 100%;
    }

    .project-layout {
        display: block;
        height: auto;
        overflow: visible;
    }

    .left-apartment-side,
    .right-property-side {
        height: auto;
        max-height: none;
        overflow: visible;
    }

    .left-apartment-side {
        position: static;
        margin-bottom: 20px;
    }

    .right-property-side {
        padding: 0;
    }

    .property-image-box {
        height: min(58vw, 430px);
    }
}

@media (max-width: 700px) {
    .main-container {
        padding: 14px 10px 35px;
    }

    .property-details-wrapper {
        padding: 18px 15px;
    }

    .property-title {
        font-size: 23px !important;
    }

    .project-definition-line {
        font-size: 12px;
        line-height: 1.65;
    }

    .property-action-buttons {
        grid-template-columns: repeat(2, minmax(0,1fr));
        gap: 8px;
    }

        .property-action-buttons .property-btn,
        .property-action-buttons .contact-owner-btn,
        .property-action-buttons .brochure-btn {
            min-height: 43px;
            font-size: 10px;
        }

    .project-date-wrapper {
        grid-template-columns: repeat(2,1fr);
        gap: 8px;
    }

    .project-date-card {
        padding: 12px;
    }

    .in-page-plan-viewer {
        padding: 14px;
        margin-top: 14px;
        border-radius: 14px;
    }

    .in-page-plan-title {
        font-size: 18px !important;
    }

    .in-page-plan-pdf {
        height: 500px;
    }

    .apartment-card img,
    .apartment-card video {
        height: 190px;
    }
}

@media (max-width: 480px) {
    .main-container {
        padding-left: 7px;
        padding-right: 7px;
    }

    .property-main-combined-card {
        border-radius: 17px;
    }

    .property-image-box {
        height: 235px;
    }

    .property-details-wrapper {
        padding: 16px 12px;
        border-radius: 0 0 17px 17px;
    }

    .property-title {
        font-size: 21px !important;
    }

    .property-action-buttons {
        grid-template-columns: repeat(2,1fr);
    }

        .property-action-buttons .property-btn,
        .property-action-buttons .contact-owner-btn,
        .property-action-buttons .brochure-btn {
            min-height: 42px;
            padding: 8px 5px;
            font-size: 9.5px;
        }

    .project-date-wrapper {
        grid-template-columns: 1fr;
    }

    .apartment-card img,
    .apartment-card video {
        height: 175px;
    }

    .apartment-body {
        padding: 14px;
    }

    .apartment-definition {
        padding: 13px;
    }

    .in-page-contact-form {
        grid-template-columns: 1fr;
    }

        .in-page-contact-form label:nth-of-type(3) {
            grid-column: auto;
        }

    .in-page-contact-submit {
        width: 100%;
    }

    .in-page-plan-pdf {
        height: 430px;
    }
}

/* =========================================================
    NEW PAGE LAYOUT
    - RIGHT PROJECT SECTION = FULL WIDTH / TOP
    - APARTMENT DATA = BELOW AS HIGHLIGHT CARDS
    - DATA / RAZOR / JS / API LOGIC IS NOT CHANGED
    ========================================================= */

:root {
    --new-brown-950: #120a05;
    --new-brown-900: #1b0f08;
    --new-brown-800: #2b1807;
    --new-brown-700: #4e342e;
    --new-gold: #d4af37;
    --new-gold-light: #f5d76e;
    --new-cream: #f8f3e8;
    --new-white: #ffffff;
    --new-border: rgba(212,175,55,.25);
    --new-shadow: 0 18px 50px rgba(43,24,7,.14);
}

/* PAGE */
.main-container {
    width: 100% !important;
    max-width: 1500px !important;
    margin: 0 auto !important;
    padding: 24px 20px 60px !important;
}

/* =========================================================
    IMPORTANT:
    Make RIGHT CONTENT appear first and full width.
    Apartment section goes underneath.
    ========================================================= */
.project-layout {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 28px !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    align-items: stretch !important;
}

/* RIGHT = FULL WIDTH */
.right-property-side {
    order: 1 !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 0 !important;
    min-width: 0 !important;
}

/* LEFT = BELOW RIGHT */
.left-apartment-side {
    order: 2 !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    position: static !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 !important;
}

    /* Remove old internal scrollbar */
    .left-apartment-side::-webkit-scrollbar,
    .right-property-side::-webkit-scrollbar {
        width: 0 !important;
        height: 0 !important;
    }

/* =========================================================
    FULL WIDTH PROJECT HERO
    ========================================================= */
.property-main-combined-card {
    width: 100% !important;
    border-radius: 26px !important;
    overflow: hidden !important;
    border: 1px solid rgba(212,175,55,.22) !important;
    background: var(--new-brown-950) !important;
    box-shadow: 0 24px 65px rgba(43,24,7,.18) !important;
}

/* Big responsive banner */
.property-image-box {
    width: 100% !important;
    height: clamp(320px, 48vw, 610px) !important;
    min-height: 300px !important;
    background: #0b0704 !important;
    position: relative !important;
    overflow: hidden !important;
}

    .property-image-box .carousel,
    .property-image-box .carousel-inner,
    .property-image-box .carousel-item {
        width: 100% !important;
        height: 100% !important;
    }

    .property-image-box img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
    }

    /* Premium image overlay */
    .property-image-box::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        z-index: 1;
        background: linear-gradient(180deg, rgba(0,0,0,.03) 35%, rgba(18,10,5,.78) 100%);
    }

    .property-image-box .carousel-control-prev,
    .property-image-box .carousel-control-next {
        z-index: 4 !important;
        width: 65px !important;
    }

    .property-image-box .carousel-control-prev-icon,
    .property-image-box .carousel-control-next-icon {
        width: 44px !important;
        height: 44px !important;
        padding: 0 !important;
        border-radius: 50% !important;
        background-color: rgba(18,10,5,.72) !important;
        background-size: 13px !important;
        border: 1px solid rgba(245,215,110,.45) !important;
        backdrop-filter: blur(8px);
    }

/* =========================================================
    PROJECT DETAILS
    ========================================================= */
.property-details-wrapper {
    width: 100% !important;
    padding: clamp(22px, 3vw, 40px) !important;
    border-radius: 0 0 26px 26px !important;
    background: radial-gradient(circle at 100% 0%, rgba(245,215,110,.13), transparent 28%), linear-gradient(145deg,#2b1807,#120a05) !important;
}

/* Project title */
.property-title {
    font-size: clamp(25px, 3vw, 40px) !important;
    line-height: 1.15 !important;
    font-weight: 900 !important;
    color: #fff !important;
}

/* Definition */
.project-definition-line {
    max-width: 1200px !important;
    font-size: 14px !important;
    line-height: 1.8 !important;
    color: rgba(255,255,255,.72) !important;
}

    .project-definition-line strong {
        color: var(--new-gold-light) !important;
    }

/* Action buttons */
.property-action-buttons {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0,1fr)) !important;
    gap: 10px !important;
    margin-top: 24px !important;
}

    .property-action-buttons .property-btn,
    .property-action-buttons .contact-owner-btn,
    .property-action-buttons .brochure-btn {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 48px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 7px !important;
        padding: 10px 8px !important;
        border-radius: 12px !important;
        font-size: 12px !important;
        font-weight: 800 !important;
    }

/* =========================================================
    PROJECT HIGHLIGHTS
    ========================================================= */
.property-highlights {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0,1fr)) !important;
    gap: 12px !important;
    margin: 24px 0 !important;
}

.highlight-chip {
    min-height: 52px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 12px 14px !important;
    border-radius: 14px !important;
    background: rgba(255,255,255,.045) !important;
    color: #fff !important;
    border: 1px solid rgba(212,175,55,.18) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
}

/* =========================================================
    DATE CARDS
    ========================================================= */
.project-date-wrapper {
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 14px !important;
    margin-bottom: 24px !important;
}

.project-date-card {
    min-width: 0 !important;
    padding: 18px !important;
    border-radius: 15px !important;
    background: rgba(255,255,255,.045) !important;
    border: 1px solid rgba(212,175,55,.17) !important;
    color: #fff !important;
}

/* About */
.about-property-box {
    width: 100% !important;
    padding: clamp(20px, 3vw, 32px) !important;
    border-radius: 20px !important;
    background: rgba(255,255,255,.045) !important;
    border: 1px solid rgba(212,175,55,.17) !important;
}

/* =========================================================
    APARTMENT SECTION BELOW PROJECT
    ========================================================= */
.left-apartment-side {
    position: relative !important;
}

    /* Section heading generated only by CSS; no data is changed */
    .left-apartment-side::before {
        content: "PROPERTY HIGHLIGHTS & APARTMENT DETAILS";
        display: block;
        width: 100%;
        margin: 0 0 16px;
        padding: 15px 18px;
        border-radius: 16px;
        background: linear-gradient(135deg, rgba(212,175,55,.18), rgba(255,255,255,.82));
        border: 1px solid rgba(212,175,55,.35);
        color: #4e342e;
        font-size: clamp(16px, 2vw, 22px);
        font-weight: 900;
        letter-spacing: .5px;
        box-shadow: 0 12px 28px rgba(43,24,7,.08);
    }

/* Tabs become a clean filter bar */
.property-category-tabs,
.bhk-tabs {
    width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 9px !important;
    margin-bottom: 15px !important;
    padding: 5px 0 !important;
}

.property-category-tab,
.bhk-tab {
    border-radius: 12px !important;
    padding: 10px 16px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
}

/* =========================================================
    APARTMENT CARDS
    Existing apartment data stays exactly the same.
    Cards are simply presented in a responsive grid.
    ========================================================= */

/* If the existing markup contains a direct wrapper/list,
    make common wrappers full width without touching content. */
.left-apartment-side > div {
    box-sizing: border-box;
}

/* Cards */
.apartment-card {
    width: 100% !important;
    margin-bottom: 0 !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    background: #fff !important;
    border: 1px solid rgba(121,85,72,.14) !important;
    box-shadow: 0 14px 35px rgba(43,24,7,.09) !important;
    transition: transform .25s ease, box-shadow .25s ease !important;
}

    .apartment-card:hover {
        transform: translateY(-5px) !important;
        box-shadow: 0 22px 45px rgba(43,24,7,.15) !important;
    }

    .apartment-card img,
    .apartment-card video {
        width: 100% !important;
        height: 245px !important;
        object-fit: cover !important;
        display: block !important;
    }

.apartment-body {
    padding: 18px !important;
    background: #fff !important;
}

.apartment-top {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    margin-bottom: 10px !important;
}

    .apartment-top h3 {
        margin: 0 !important;
        color: #3e2617 !important;
        font-size: 18px !important;
        font-weight: 900 !important;
    }

.price-tag {
    display: inline-flex !important;
    width: fit-content !important;
    align-items: center !important;
    padding: 8px 12px !important;
    border-radius: 10px !important;
    background: #fbf3dd !important;
    color: #856100 !important;
    border: 1px solid rgba(212,175,55,.28) !important;
    font-size: 12px !important;
    font-weight: 900 !important;
}

/* Info blocks */
.apartment-grid {
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 10px !important;
}

.apartment-info {
    min-width: 0 !important;
    padding: 13px !important;
    border-radius: 13px !important;
    background: linear-gradient(145deg,#2b1807,#1b0f08) !important;
    border: 1px solid rgba(212,175,55,.20) !important;
    box-shadow: none !important;
}

    .apartment-info label {
        color: rgba(255,255,255,.62) !important;
        font-size: 11px !important;
    }

    .apartment-info strong {
        color: #f5d76e !important;
        font-size: 13px !important;
    }

/* Definition box */
.apartment-definition {
    margin-top: 14px !important;
    padding: 15px !important;
    border-radius: 15px !important;
    background: linear-gradient(145deg,#2b1807,#1b0f08) !important;
    border: 1px solid rgba(212,175,55,.20) !important;
}

.apartment-definition-content h4 {
    color: #f5d76e !important;
}

.apartment-definition-content p {
    color: rgba(255,255,255,.75) !important;
}

/* =========================================================
    MAKE APARTMENT CARDS INTO A RESPONSIVE GRID
    We target likely direct card containers safely.
    ========================================================= */

/* When cards are direct children of the apartment panel */
.left-apartment-side > .apartment-card {
    display: inline-block;
    vertical-align: top;
    width: calc(33.333% - 11px) !important;
    margin-right: 12px !important;
    margin-bottom: 16px !important;
}

    /* Every third card */
    .left-apartment-side > .apartment-card:nth-child(3n) {
        margin-right: 0 !important;
    }

/* If cards are inside a known list/grid wrapper, keep them clean */
.apartment-list,
.apartments-list,
.apartment-cards,
.apartment-grid-list {
    width: 100% !important;
}

/* =========================================================
    DOCUMENT / PLAN SECTIONS
    Full width now because right panel is full width.
    ========================================================= */
.in-page-plan-viewer {
    width: 100% !important;
    margin-top: 24px !important;
    border-radius: 20px !important;
}

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

@media (max-width: 1200px) {
    .main-container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .property-action-buttons {
        grid-template-columns: repeat(3,minmax(0,1fr)) !important;
    }

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

    .left-apartment-side > .apartment-card {
        width: calc(50% - 8px) !important;
        margin-right: 12px !important;
    }

        .left-apartment-side > .apartment-card:nth-child(3n) {
            margin-right: 12px !important;
        }

        .left-apartment-side > .apartment-card:nth-child(2n) {
            margin-right: 0 !important;
        }
}

@media (max-width: 768px) {
    .main-container {
        padding: 12px 10px 35px !important;
    }

    .project-layout {
        gap: 20px !important;
    }

    .property-main-combined-card {
        border-radius: 18px !important;
    }

    .property-image-box {
        height: 300px !important;
        min-height: 260px !important;
    }

    .property-details-wrapper {
        padding: 20px 16px !important;
        border-radius: 0 0 18px 18px !important;
    }

    .property-title {
        font-size: 24px !important;
    }

    .project-definition-line {
        font-size: 12px !important;
        line-height: 1.7 !important;
    }

    .property-action-buttons {
        grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    }

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

    .project-date-wrapper {
        grid-template-columns: 1fr !important;
    }

    .left-apartment-side::before {
        font-size: 15px;
        padding: 13px 15px;
    }

    .left-apartment-side > .apartment-card {
        width: 100% !important;
        margin-right: 0 !important;
        margin-bottom: 15px !important;
    }

    .apartment-card img,
    .apartment-card video {
        height: 215px !important;
    }

    .apartment-grid {
        grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    }
}

@media (max-width: 480px) {
    .main-container {
        padding: 8px 7px 30px !important;
    }

    .property-image-box {
        height: 235px !important;
        min-height: 220px !important;
    }

    .property-title {
        font-size: 21px !important;
    }

    .property-action-buttons {
        grid-template-columns: 1fr 1fr !important;
        gap: 7px !important;
    }

        .property-action-buttons .property-btn,
        .property-action-buttons .contact-owner-btn,
        .property-action-buttons .brochure-btn {
            min-height: 42px !important;
            font-size: 9.5px !important;
            padding: 7px 5px !important;
        }

    .property-highlights {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    .highlight-chip {
        min-height: 45px !important;
        font-size: 12px !important;
    }

    .property-category-tabs,
    .bhk-tabs {
        gap: 7px !important;
    }

    .property-category-tab,
    .bhk-tab {
        padding: 9px 12px !important;
        font-size: 11px !important;
    }

    .apartment-card img,
    .apartment-card video {
        height: 190px !important;
    }

    .apartment-body {
        padding: 14px !important;
    }

    .apartment-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }

    .apartment-info {
        padding: 11px !important;
    }

    .apartment-definition {
        padding: 13px !important;
    }
}



/* =========================================================
    FINAL RESPONSIVE DESIGN
    DATA / RAZOR / API / JAVASCRIPT REMAIN UNCHANGED
    Layout:
    1. Project / right section = full width
    2. Apartment / left section = below as highlight cards
    ========================================================= */

:root {
    --gv-brown-1: #160c05;
    --gv-brown-2: #281507;
    --gv-brown-3: #4e342e;
    --gv-gold: #d4af37;
    --gv-gold-light: #f5d76e;
    --gv-cream: #faf6ed;
    --gv-white: #ffffff;
    --gv-text: #332218;
    --gv-muted: #74675f;
    --gv-border: rgba(212,175,55,.22);
    --gv-shadow: 0 18px 50px rgba(38,20,7,.12);
}

/* PAGE */
.main-container {
    width: 100% !important;
    max-width: 1500px !important;
    margin: 0 auto !important;
    padding: 22px 20px 65px !important;
    box-sizing: border-box !important;
}

/* =========================================================
    MAIN ORDER
    Original HTML order is LEFT then RIGHT.
    CSS changes only visual order.
    ========================================================= */
.project-layout {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 30px !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
}

/* RIGHT / PROJECT = FULL WIDTH + FIRST */
.right-property-side {
    order: 1 !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* LEFT / APARTMENTS = BELOW */
.left-apartment-side {
    order: 2 !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    position: static !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* =========================================================
    PROJECT HERO
    ========================================================= */
.property-main-combined-card {
    width: 100% !important;
    margin: 0 !important;
    border-radius: 28px !important;
    overflow: hidden !important;
    background: var(--gv-brown-1) !important;
    border: 1px solid var(--gv-border) !important;
    box-shadow: 0 25px 70px rgba(30,15,5,.17) !important;
}

/* Full-width project image */
.property-image-box {
    width: 100% !important;
    height: clamp(320px, 46vw, 590px) !important;
    min-height: 300px !important;
    overflow: hidden !important;
    position: relative !important;
    background: #090604 !important;
}

    /* Carousel fills hero */
    .property-image-box .carousel,
    .property-image-box .carousel-inner,
    .property-image-box .carousel-item {
        width: 100% !important;
        height: 100% !important;
    }

    .property-image-box .carousel-item {
        overflow: hidden !important;
    }

    .property-image-box img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
        display: block !important;
        transition: transform .7s ease !important;
    }

    .property-image-box:hover img {
        transform: scale(1.025) !important;
    }

    /* Premium bottom fade */
    .property-image-box::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 38%;
        pointer-events: none;
        z-index: 2;
        background: linear-gradient( to bottom, rgba(18,10,5,0), rgba(18,10,5,.62) );
    }

    /* Carousel arrows */
    .property-image-box .carousel-control-prev,
    .property-image-box .carousel-control-next {
        width: 70px !important;
        z-index: 5 !important;
        opacity: 1 !important;
    }

    .property-image-box .carousel-control-prev-icon,
    .property-image-box .carousel-control-next-icon {
        width: 46px !important;
        height: 46px !important;
        border-radius: 50% !important;
        background-color: rgba(22,12,5,.72) !important;
        background-size: 13px !important;
        border: 1px solid rgba(245,215,110,.50) !important;
        box-shadow: 0 7px 20px rgba(0,0,0,.28) !important;
    }

/* =========================================================
    PROJECT DETAILS
    ========================================================= */
.property-details-wrapper {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: clamp(24px, 3.5vw, 42px) !important;
    border-radius: 0 0 28px 28px !important;
    background: radial-gradient( circle at 100% 0%, rgba(245,215,110,.14), transparent 27% ), linear-gradient(145deg,#2a1708,#120a04) !important;
    border: 0 !important;
}

.property-title-wrapper {
    display: block !important;
    width: 100% !important;
    margin: 0 0 22px !important;
    padding: 0 0 20px !important;
    border-bottom: 1px solid rgba(212,175,55,.17) !important;
}

.property-left-content {
    width: 100% !important;
    min-width: 0 !important;
}

.property-title {
    color: #fff !important;
    font-size: clamp(27px, 3vw, 42px) !important;
    line-height: 1.15 !important;
    font-weight: 900 !important;
    letter-spacing: -.3px !important;
}

.project-definition-line {
    max-width: 1250px !important;
    margin-top: 10px !important;
    color: rgba(255,255,255,.72) !important;
    font-size: 14px !important;
    line-height: 1.85 !important;
}

    .project-definition-line strong {
        color: var(--gv-gold-light) !important;
    }

/* =========================================================
    ACTION BUTTONS
    ========================================================= */
.property-action-buttons {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(6,minmax(0,1fr)) !important;
    gap: 10px !important;
    margin: 0 0 26px !important;
}

    .property-action-buttons .property-btn,
    .property-action-buttons .contact-owner-btn,
    .property-action-buttons .brochure-btn {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 48px !important;
        height: 48px !important;
        padding: 8px 10px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 7px !important;
        border-radius: 12px !important;
        border: 1px solid rgba(212,175,55,.46) !important;
        background: linear-gradient(135deg,#d4af37,#f5d76e) !important;
        color: #2b1807 !important;
        font-size: 12px !important;
        font-weight: 800 !important;
        white-space: nowrap !important;
        text-decoration: none !important;
        box-shadow: 0 7px 18px rgba(212,175,55,.13) !important;
        transition: transform .22s ease, box-shadow .22s ease, filter .22s ease !important;
    }

        .property-action-buttons .property-btn:hover,
        .property-action-buttons .property-btn.active,
        .property-action-buttons .contact-owner-btn:hover,
        .property-action-buttons .brochure-btn:hover {
            color: #211205 !important;
            transform: translateY(-3px) !important;
            filter: brightness(1.05) !important;
            box-shadow: 0 12px 25px rgba(212,175,55,.25) !important;
        }

    .property-action-buttons i {
        font-size: 12px !important;
    }

/* =========================================================
    PROJECT HIGHLIGHTS
    ========================================================= */
.property-highlights {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(4,minmax(0,1fr)) !important;
    gap: 12px !important;
    margin: 0 0 25px !important;
}

.highlight-chip {
    min-width: 0 !important;
    min-height: 54px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 12px 14px !important;
    box-sizing: border-box !important;
    border-radius: 14px !important;
    background: rgba(255,255,255,.045) !important;
    border: 1px solid rgba(212,175,55,.18) !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    transition: .25s ease !important;
}

    .highlight-chip:hover {
        transform: translateY(-3px) !important;
        background: rgba(212,175,55,.09) !important;
        border-color: rgba(245,215,110,.35) !important;
    }

/* =========================================================
    DATES
    ========================================================= */
.project-date-wrapper {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 14px !important;
    margin: 0 0 25px !important;
}

.project-date-card {
    min-width: 0 !important;
    padding: 18px !important;
    box-sizing: border-box !important;
    border-radius: 16px !important;
    background: rgba(255,255,255,.045) !important;
    border: 1px solid rgba(212,175,55,.17) !important;
    color: #fff !important;
}

    .project-date-card span {
        color: var(--gv-gold-light) !important;
    }

    .project-date-card strong {
        color: #fff !important;
    }

/* Description */
.description-text {
    color: #fff !important;
    font-size: 14px !important;
    line-height: 1.85 !important;
}

    .description-text *,
    .description-text p,
    .description-text span {
        color: #fff !important;
    }

    .description-text a,
    .read-more-btn {
        color: var(--gv-gold-light) !important;
        font-weight: 800 !important;
    }

/* =========================================================
    DOCUMENT SECTIONS - FULL WIDTH
    ========================================================= */
.inline-document-list {
    width: 100% !important;
    margin-top: 25px !important;
}

.in-page-plan-viewer {
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 22px 0 0 !important;
    padding: 24px !important;
    border-radius: 20px !important;
    background: radial-gradient(circle at 100% 0%,rgba(212,175,55,.13),transparent 25%), linear-gradient(145deg,#251608,#140b04) !important;
    border: 1px solid rgba(212,175,55,.27) !important;
    box-shadow: 0 14px 34px rgba(0,0,0,.16) !important;
}

.in-page-plan-title {
    color: #f5d76e !important;
    font-size: clamp(20px,2.2vw,27px) !important;
    font-weight: 900 !important;
    margin: 0 0 17px !important;
    padding-bottom: 13px !important;
    border-bottom: 1px solid rgba(212,175,55,.18) !important;
}

.in-page-plan-image,
.in-page-plan-pdf {
    width: 100% !important;
    display: block !important;
    border-radius: 13px !important;
    border: 1px solid rgba(245,215,110,.30) !important;
    background: #fff !important;
}

.in-page-plan-image {
    max-height: 720px !important;
    object-fit: contain !important;
}

.in-page-plan-pdf {
    height: 700px !important;
}

/* =========================================================
    APARTMENT SECTION BELOW PROJECT
    ========================================================= */

/* Section header */
.left-apartment-side::before {
    content: "PROPERTY HIGHLIGHTS & APARTMENT DETAILS";
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 0 16px !important;
    padding: 17px 20px !important;
    border-radius: 17px !important;
    background: linear-gradient( 135deg, rgba(212,175,55,.18), rgba(255,255,255,.82) ) !important;
    border: 1px solid rgba(212,175,55,.38) !important;
    color: #4e342e !important;
    font-size: clamp(17px,2vw,24px) !important;
    font-weight: 900 !important;
    letter-spacing: .3px !important;
    box-shadow: 0 12px 30px rgba(43,24,7,.09) !important;
}

/* Tabs */
.property-category-tabs,
.bhk-tabs {
    width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 9px !important;
    margin: 0 0 14px !important;
    padding: 0 !important;
}

.property-category-tab,
.bhk-tab {
    border-radius: 12px !important;
    padding: 10px 16px !important;
    border: 1px solid rgba(212,175,55,.25) !important;
    background: #fff !important;
    color: #2b1807 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    box-shadow: 0 5px 16px rgba(43,24,7,.06) !important;
    transition: .22s ease !important;
}

    .property-category-tab:hover,
    .bhk-tab:hover,
    .property-category-tab.active,
    .bhk-tab.active {
        background: linear-gradient(135deg,#d4af37,#f5d76e) !important;
        color: #2b1807 !important;
        transform: translateY(-2px) !important;
        box-shadow: 0 9px 20px rgba(184,134,11,.20) !important;
    }

/* =========================================================
    APARTMENT GRID
    IMPORTANT:
    Do NOT force display on .apartment-item.
    The existing inline display:none is used by dynamic
    BHK/category filtering and must continue to work.
    ========================================================= */
.left-apartment-side > .row {
    width: 100% !important;
    display: grid !important;
    /* grid-template-columns: repeat(3,minmax(0,1fr)) !important;*/
    gap: 18px !important;
    margin: 0 !important;
}

.left-apartment-side .col-12.apartment-item {
    width: auto !important;
    max-width: none !important;
    flex: none !important;
    padding: 0 !important;
    margin: 0 !important;
    min-width: 0 !important;
}

/* Card */
.apartment-card {
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    border-radius: 21px !important;
    background: #fff !important;
    border: 1px solid rgba(121,85,72,.14) !important;
    box-shadow: 0 14px 34px rgba(43,24,7,.10) !important;
    transition: transform .25s ease, box-shadow .25s ease !important;
}

    .apartment-card:hover {
        transform: translateY(-6px) !important;
        box-shadow: 0 22px 46px rgba(43,24,7,.16) !important;
    }

    /* Apartment image */
    .apartment-card .carousel,
    .apartment-card .carousel-inner,
    .apartment-card .carousel-item {
        width: 100% !important;
    }

    .apartment-card .carousel-item {
        height: 245px !important;
        overflow: hidden !important;
    }

    .apartment-card img {
        width: 100% !important;
        height: 245px !important;
        object-fit: cover !important;
        display: block !important;
    }

    .apartment-card .youtube-frame {
        width: 100% !important;
        height: 245px !important;
        display: block !important;
        border: 0 !important;
        border-radius: 0 !important;
    }

    /* Carousel controls */
    .apartment-card .carousel-control-prev,
    .apartment-card .carousel-control-next {
        width: 48px !important;
        opacity: 1 !important;
    }

    .apartment-card .carousel-control-prev-icon,
    .apartment-card .carousel-control-next-icon {
        width: 34px !important;
        height: 34px !important;
        border-radius: 50% !important;
        background-color: rgba(22,12,5,.72) !important;
        background-size: 10px !important;
        border: 1px solid rgba(245,215,110,.45) !important;
    }

/* Card body */
.apartment-body {
    flex: 1 1 auto !important;
    padding: 18px !important;
    background: linear-gradient(180deg,#fff,#fffaf1) !important;
}

.apartment-top {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    margin: 0 0 9px !important;
}

    .apartment-top h3 {
        margin: 0 !important;
        color: #3e2617 !important;
        font-size: 18px !important;
        line-height: 1.3 !important;
        font-weight: 900 !important;
    }

.price-tag {
    display: inline-flex !important;
    width: fit-content !important;
    max-width: 100% !important;
    padding: 8px 12px !important;
    border-radius: 10px !important;
    background: #fbf3dd !important;
    border: 1px solid rgba(212,175,55,.30) !important;
    color: #806000 !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: 1.35 !important;
}

/* Property definition */
.apartment-definition {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    margin-top: 14px !important;
    padding: 15px !important;
    border-radius: 15px !important;
    background: linear-gradient(145deg,#2b1807,#1b0f08) !important;
    border: 1px solid rgba(212,175,55,.22) !important;
}

.apartment-definition-icon {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 11px !important;
    background: linear-gradient(135deg,#d4af37,#f5d76e) !important;
    color: #2b1807 !important;
}

.apartment-definition-content {
    min-width: 0 !important;
}

    .apartment-definition-content h4 {
        margin: 0 0 5px !important;
        color: #f5d76e !important;
        font-size: 15px !important;
        font-weight: 900 !important;
    }

    .apartment-definition-content p {
        margin: 0 !important;
        color: rgba(255,255,255,.75) !important;
        font-size: 12px !important;
        line-height: 1.7 !important;
    }

/* =========================================================
    OWNER / CONTACT / PLAN MODALS
    Only visual styling; IDs and JS remain unchanged.
    ========================================================= */
.owner-contact-box {
    border: 1px solid rgba(212,175,55,.25) !important;
}

.contact-btn,
.in-page-contact-submit {
    background: linear-gradient(135deg,#d4af37,#f5d76e) !important;
    color: #2b1807 !important;
}

/* =========================================================
    TABLET
    ========================================================= */
@media (max-width: 1100px) {
    .main-container {
        padding: 18px 14px 50px !important;
    }

    .property-action-buttons {
        grid-template-columns: repeat(3,minmax(0,1fr)) !important;
    }

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

    .left-apartment-side > .row {
        grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    }

    .property-image-box {
        height: clamp(300px,50vw,500px) !important;
    }
}

/* =========================================================
    MOBILE
    ========================================================= */
@media (max-width: 768px) {
    .main-container {
        padding: 12px 10px 40px !important;
    }

    .project-layout {
        gap: 22px !important;
    }

    .property-main-combined-card {
        border-radius: 19px !important;
    }

    .property-image-box {
        height: 290px !important;
        min-height: 240px !important;
    }

        .property-image-box .carousel-control-prev,
        .property-image-box .carousel-control-next {
            width: 52px !important;
        }

        .property-image-box .carousel-control-prev-icon,
        .property-image-box .carousel-control-next-icon {
            width: 38px !important;
            height: 38px !important;
        }

    .property-details-wrapper {
        padding: 20px 15px !important;
        border-radius: 0 0 19px 19px !important;
    }

    .property-title {
        font-size: 25px !important;
    }

    .project-definition-line {
        font-size: 12px !important;
        line-height: 1.7 !important;
    }

    .property-action-buttons {
        grid-template-columns: repeat(2,minmax(0,1fr)) !important;
        gap: 8px !important;
    }

        .property-action-buttons .property-btn,
        .property-action-buttons .contact-owner-btn,
        .property-action-buttons .brochure-btn {
            min-height: 44px !important;
            height: 44px !important;
            padding: 7px 5px !important;
            font-size: 10.5px !important;
        }

    .property-highlights {
        grid-template-columns: repeat(2,minmax(0,1fr)) !important;
        gap: 8px !important;
    }

    .highlight-chip {
        min-height: 46px !important;
        padding: 9px 8px !important;
        font-size: 11px !important;
    }

    .project-date-wrapper {
        grid-template-columns: 1fr !important;
        gap: 9px !important;
    }

    .in-page-plan-viewer {
        padding: 15px !important;
        border-radius: 16px !important;
    }

    .in-page-plan-pdf {
        height: 500px !important;
    }

    .left-apartment-side::before {
        font-size: 16px !important;
        padding: 14px 15px !important;
    }

    .left-apartment-side > .row {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }

    .apartment-card .carousel-item,
    .apartment-card img,
    .apartment-card .youtube-frame {
        height: 225px !important;
    }
}

/* =========================================================
    SMALL MOBILE
    ========================================================= */
@media (max-width: 480px) {
    .main-container {
        padding: 8px 7px 30px !important;
    }

    .property-image-box {
        height: 235px !important;
        min-height: 210px !important;
    }

    .property-title {
        font-size: 21px !important;
    }

    .project-definition-line {
        font-size: 11.5px !important;
        line-height: 1.65 !important;
    }

    .property-action-buttons {
        grid-template-columns: 1fr 1fr !important;
        gap: 6px !important;
    }

        .property-action-buttons .property-btn,
        .property-action-buttons .contact-owner-btn,
        .property-action-buttons .brochure-btn {
            min-height: 42px !important;
            height: 42px !important;
            font-size: 9.5px !important;
            padding: 6px 4px !important;
            border-radius: 9px !important;
        }

    .property-highlights {
        grid-template-columns: 1fr !important;
        gap: 7px !important;
    }

    .highlight-chip {
        min-height: 43px !important;
        font-size: 11px !important;
    }

    .left-apartment-side::before {
        font-size: 14px !important;
        padding: 13px 14px !important;
    }

    .property-category-tabs,
    .bhk-tabs {
        gap: 6px !important;
    }

    .property-category-tab,
    .bhk-tab {
        padding: 8px 11px !important;
        font-size: 10.5px !important;
    }

    .apartment-card .carousel-item,
    .apartment-card img,
    .apartment-card .youtube-frame {
        height: 195px !important;
    }

    .apartment-body {
        padding: 14px !important;
    }

    .apartment-top h3 {
        font-size: 16px !important;
    }

    .price-tag {
        font-size: 10.5px !important;
        padding: 7px 9px !important;
    }

    .apartment-definition {
        padding: 12px !important;
        gap: 9px !important;
    }

    .apartment-definition-icon {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
    }

    .apartment-definition-content h4 {
        font-size: 14px !important;
    }

    .apartment-definition-content p {
        font-size: 11px !important;
        line-height: 1.65 !important;
    }

    .in-page-plan-pdf {
        height: 420px !important;
    }
}





/* FINAL RESPONSIVE LAYOUT: full-width project hero, apartment list left, remaining details right */
.main-container {
    width: 100% !important;
    max-width: 1500px !important;
    margin: 0 auto !important;
    padding: 22px 20px 50px !important;
    box-sizing: border-box !important
}

    .main-container > .property-main-combined-card {
        display: block !important;
        width: 100% !important;
        margin: 0 0 24px !important;
        grid-column: 1/-1 !important
    }

    .main-container > .project-layout {
        display: grid !important;
        grid-template-columns: minmax(280px,.85fr) minmax(0,1.65fr) !important;
        align-items: start !important;
        gap: 24px !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important
    }

.project-layout > .left-apartment-side {
    order: 0 !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: none !important;
    position: static !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 !important
}

.project-layout > .right-property-side {
    order: 0 !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 0 0 35px !important;
    margin: 0 !important
}

    .project-layout > .right-property-side > .property-main-combined-card {
        display: none !important
    }

.left-apartment-side::before {
    box-sizing: border-box !important;
    font-size: clamp(15px,1.5vw,21px) !important;
    line-height: 1.35 !important
}

.left-apartment-side > .row, .left-apartment-side > div {
    min-width: 0;
    box-sizing: border-box
}

.left-apartment-side .apartment-card, .left-apartment-side .col-12.apartment-item {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important
}

.property-image-box, .property-image-box img {
    max-width: 100% !important
}

@media(max-width:1050px) {
    .main-container {
        padding: 18px 14px 35px !important
    }

        .main-container > .project-layout {
            grid-template-columns: minmax(240px,.9fr) minmax(0,1.3fr) !important;
            gap: 16px !important
        }
}

@media(max-width:760px) {
    .main-container {
        padding: 14px 10px 30px !important
    }

        .main-container > .property-main-combined-card {
            margin-bottom: 18px !important;
            border-radius: 18px !important
        }

        .main-container > .project-layout {
            display: flex !important;
            flex-direction: column !important;
            gap: 24px !important
        }

    .project-layout > .left-apartment-side, .project-layout > .right-property-side {
        width: 100% !important;
        max-width: 100% !important;
        grid-column: auto !important;
        grid-row: auto !important
    }

    .property-image-box {
        height: clamp(210px,55vw,340px) !important
    }

        .property-image-box img {
            height: 100% !important;
            object-fit: cover !important
        }

    .property-details-wrapper {
        padding: 18px 15px !important
    }

    .property-title {
        font-size: clamp(22px,5vw,30px) !important;
        overflow-wrap: anywhere
    }

    .property-action-buttons {
        grid-template-columns: repeat(2,minmax(0,1fr)) !important;
        gap: 8px !important
    }

        .property-action-buttons .property-btn, .property-action-buttons .contact-owner-btn, .property-action-buttons .brochure-btn {
            min-width: 0 !important;
            white-space: normal !important;
            font-size: 11px !important
        }

    .project-date-wrapper {
        grid-template-columns: repeat(2,minmax(0,1fr)) !important
    }
}

@media(max-width:420px) {
    .main-container {
        padding-left: 7px !important;
        padding-right: 7px !important
    }

    .property-details-wrapper {
        padding: 15px 11px !important
    }

    .property-action-buttons {
        grid-template-columns: repeat(2,minmax(0,1fr)) !important
    }

    .project-date-wrapper {
        grid-template-columns: 1fr !important
    }

    .property-action-buttons .property-btn, .property-action-buttons .contact-owner-btn, .property-action-buttons .brochure-btn {
        padding: 8px 4px !important;
        font-size: 10px !important
    }
}



/*delet account css start*/



.delete-account-page-wrapper {
    background: radial-gradient(circle at top left, rgba(196, 155, 90, 0.08), transparent 22%), radial-gradient(circle at bottom right, rgba(111, 34, 50, 0.06), transparent 24%), linear-gradient(180deg, #fcfaf8 0%, #f7f2ee 100%);
    padding: 0 0 80px 0;
    overflow: hidden;
}

.delete-account-hero {
    position: relative;
    background: linear-gradient(135deg, #2d2510 0%, #9b7328 45%, #b07b3b 100%);
    padding: 95px 0 120px;
    text-align: center;
    overflow: hidden;
}

    .delete-account-hero::before {
        content: "";
        position: absolute;
        width: 360px;
        height: 360px;
        border-radius: 50%;
        background: rgba(255,255,255,0.05);
        top: -110px;
        left: -110px;
    }

    .delete-account-hero::after {
        content: "";
        position: absolute;
        width: 280px;
        height: 280px;
        border-radius: 50%;
        background: rgba(255,255,255,0.06);
        right: -70px;
        bottom: -70px;
    }

    .delete-account-hero .container {
        position: relative;
        z-index: 2;
    }

.delete-account-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 999px;
    color: #fff4e0;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 20px;
    backdrop-filter: blur(5px);
}

    .delete-account-hero-badge i {
        color: #ffd289;
    }

.delete-account-hero h1 {
    color: #fff !important;
    font-size: 50px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.5px;
    margin: 0 0 14px 0 !important;
}

.delete-account-hero p {
    color: rgba(255,255,255,0.88) !important;
    font-size: 18px !important;
    line-height: 1.8 !important;
    margin: 0 auto !important;
    max-width: 760px;
}

.delete-account-main-section {
    margin-top: -60px;
    position: relative;
    z-index: 5;
}

.delete-account-content-card,
.delete-account-note-card {
    background: rgba(255,255,255,0.96) !important;
    border-radius: 26px !important;
    padding: 40px !important;
    box-shadow: 0 24px 55px rgba(64, 31, 20, 0.10) !important;
    border: 1px solid rgba(223, 206, 186, 0.8);
    position: relative;
    overflow: hidden;
}

    .delete-account-content-card::before,
    .delete-account-note-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 5px;
        background: linear-gradient(90deg, #6f2232 0%, #b07b3b 100%);
    }

.delete-account-header-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.delete-account-content-card h2 {
    font-size: 35px !important;
    font-weight: 700 !important;
    color: #241c24 !important;
    margin: 0 0 8px 0 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.4px;
}

.delete-account-content-card .delete-account-updated {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 15px;
    border-radius: 999px;
    background: #fff7eb;
    border: 1px solid #ecd7b6;
    color: #8a6424 !important;
    font-size: 14px !important;
    font-weight: 700;
    white-space: nowrap;
    margin-bottom: 0 !important;
}

.delete-account-intro-box {
    background: linear-gradient(180deg, #fffaf4 0%, #fffdfb 100%);
    border: 1px solid #f1e4cf;
    border-radius: 18px;
    padding: 20px 22px;
    margin-bottom: 22px;
}

.delete-account-content-card h4 {
    font-size: 23px !important;
    font-weight: 700 !important;
    color: #36261f !important;
    margin-top: 30px !important;
    margin-bottom: 12px !important;
    line-height: 1.4 !important;
    position: relative;
    padding-left: 18px;
}

    .delete-account-content-card h4::before {
        content: "";
        position: absolute;
        left: 0;
        top: 8px;
        width: 6px;
        height: 24px;
        border-radius: 10px;
        background: linear-gradient(180deg, #8d5f1c 0%, #c89744 100%);
    }

.delete-account-content-card p,
.delete-account-content-card li,
.delete-account-note-card li {
    color: #5a504b !important;
    font-size: 16px !important;
    line-height: 1.95 !important;
    font-weight: 400 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.delete-account-content-card p {
    margin-bottom: 14px !important;
}

.delete-account-content-card ul,
.delete-account-note-card ul {
    list-style: none !important;
    padding-left: 0 !important;
    margin: 0 0 18px 0 !important;
}

    .delete-account-content-card ul:not(.delete-steps) li {
        position: relative;
        padding-left: 30px !important;
        margin-bottom: 10px !important;
    }

        .delete-account-content-card ul:not(.delete-steps) li::before {
            content: "\f058";
            font-family: "Font Awesome 6 Free";
            font-weight: 900;
            position: absolute;
            left: 0;
            top: 4px;
            font-size: 15px;
            color: #b18233;
        }

.delete-steps {
    margin-top: 12px !important;
}

    .delete-steps li {
        background: linear-gradient(135deg, #fff8ee 0%, #fffdfb 100%);
        border: 1px solid #efddbf;
        border-left: 5px solid #8f6120;
        border-radius: 18px;
        padding: 18px 20px !important;
        margin-bottom: 16px !important;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.65);
        transition: all .25s ease;
    }

        .delete-steps li:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 24px rgba(64, 31, 20, 0.08);
        }

        .delete-steps li strong {
            color: #2f241c !important;
            font-size: 17px;
        }

.delete-step-inner {
    margin-left: 0;
    margin-top: 10px;
    color: #5a504b !important;
    line-height: 1.9 !important;
}

.delete-account-note-card {
    margin-top: 28px;
    background: linear-gradient(180deg, #fffdfa 0%, #fff8ef 100%) !important;
}

    .delete-account-note-card ul {
        margin-bottom: 0 !important;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px 22px;
    }

        .delete-account-note-card ul li {
            position: relative;
            padding: 16px 18px 16px 48px !important;
            margin-bottom: 0 !important;
            background: #ffffff;
            border: 1px solid #efe4cf;
            border-radius: 16px;
            box-shadow: 0 6px 18px rgba(84, 62, 27, 0.05);
        }

            .delete-account-note-card ul li i {
                position: absolute;
                left: 16px;
                top: 18px;
                color: #b58b2e !important;
                font-size: 20px !important;
            }

.delete-account-contact-box {
    background: linear-gradient(135deg, #fff8ee 0%, #fffdfb 100%);
    border: 1px solid #efddbf;
    border-left: 5px solid #8f6120;
    padding: 20px 22px;
    border-radius: 16px;
    margin-top: 14px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
}

    .delete-account-contact-box strong {
        display: inline-block;
        margin-bottom: 6px;
        font-size: 17px;
        color: #2f241c !important;
    }

    .delete-account-contact-box strong,
    .delete-account-contact-box a,
    .delete-account-contact-box span {
        color: #473b34 !important;
        font-size: 16px !important;
        line-height: 1.9 !important;
        text-decoration: none;
    }

    .delete-account-contact-box a {
        font-weight: 600;
        transition: all .25s ease;
    }

        .delete-account-contact-box a:hover {
            color: #8f6120 !important;
        }

@@media (max-width: 991px) {
    .delete-account-hero {
        padding: 78px 0 96px;
    }

        .delete-account-hero h1 {
            font-size: 39px !important;
        }

    .delete-account-main-section {
        margin-top: -42px;
    }

    .delete-account-content-card,
    .delete-account-note-card {
        padding: 30px !important;
    }

        .delete-account-content-card h2 {
            font-size: 30px !important;
        }

        .delete-account-note-card ul {
            grid-template-columns: 1fr;
        }
}

@@media (max-width: 767px) {
    .delete-account-page-wrapper {
        padding-bottom: 56px;
    }

    .delete-account-hero {
        padding: 64px 0 84px;
    }

    .delete-account-hero-badge {
        font-size: 12px;
        padding: 9px 14px;
        margin-bottom: 16px;
    }

    .delete-account-hero h1 {
        font-size: 31px !important;
    }

    .delete-account-hero p {
        font-size: 16px !important;
        line-height: 1.7 !important;
        padding: 0 10px;
    }

    .delete-account-main-section {
        margin-top: -30px;
    }

    .delete-account-content-card,
    .delete-account-note-card {
        padding: 22px !important;
        border-radius: 18px !important;
    }

    .delete-account-header-top {
        flex-direction: column;
        gap: 12px;
    }

    .delete-account-content-card h2 {
        font-size: 24px !important;
    }

    .delete-account-content-card h4 {
        font-size: 19px !important;
        padding-left: 14px;
    }

        .delete-account-content-card h4::before {
            height: 20px;
            top: 7px;
        }

    .delete-account-content-card p,
    .delete-account-content-card li,
    .delete-account-note-card li,
    .delete-account-contact-box strong,
    .delete-account-contact-box a,
    .delete-account-contact-box span {
        font-size: 15px !important;
        line-height: 1.8 !important;
    }

    .delete-steps li strong {
        font-size: 15px;
    }
}

.delete-account-content-card::before, .delete-account-note-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background: linear-gradient(90deg, #9c742a 0%, #b07b3b 100%) !important;
}



/*desclaimer csss start*/


.disclaimer-wrapper {
    background: radial-gradient(circle at top left, rgba(196, 155, 90, 0.08), transparent 22%), radial-gradient(circle at bottom right, rgba(111, 34, 50, 0.06), transparent 24%), linear-gradient(180deg, #fcfaf8 0%, #f7f2ee 100%);
    padding: 0 0 80px 0;
    overflow: hidden;
}

.disclaimer-hero {
    position: relative;
    background: linear-gradient(135deg, #000000 0%, #2d2510 45%, #b07b3b 100%);
    padding: 95px 0 120px;
    text-align: center;
    overflow: hidden;
}

    .disclaimer-hero::before {
        content: "";
        position: absolute;
        width: 360px;
        height: 360px;
        border-radius: 50%;
        background: rgba(255,255,255,0.05);
        top: -110px;
        left: -110px;
    }

    .disclaimer-hero::after {
        content: "";
        position: absolute;
        width: 280px;
        height: 280px;
        border-radius: 50%;
        background: rgba(255,255,255,0.06);
        right: -70px;
        bottom: -70px;
    }

    .disclaimer-hero .container {
        position: relative;
        z-index: 2;
    }

.disclaimer-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 999px;
    color: #fff4e0;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 20px;
    backdrop-filter: blur(5px);
}

    .disclaimer-hero-badge i {
        color: #ffd289;
    }

.disclaimer-hero h1 {
    color: #fff !important;
    font-size: 50px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.5px;
    margin: 0 0 14px 0 !important;
}

.disclaimer-hero p {
    color: rgba(255,255,255,0.88) !important;
    font-size: 18px !important;
    line-height: 1.8 !important;
    margin: 0 auto !important;
    max-width: 760px;
}

.disclaimer-main {
    margin-top: -60px;
    position: relative;
    z-index: 5;
}

.disclaimer-card {
    background: rgba(255,255,255,0.96);
    border-radius: 26px;
    padding: 40px;
    box-shadow: 0 24px 55px rgba(64, 31, 20, 0.10);
    border: 1px solid rgba(223, 206, 186, 0.8);
    position: relative;
    overflow: hidden;
}

    .disclaimer-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 5px;
        background: linear-gradient(90deg, #2d2510 0%, #2d2510 100%);
    }

.disclaimer-header-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.disclaimer-card h2 {
    font-size: 35px;
    font-weight: 700;
    color: #241c24;
    margin: 0 0 8px 0;
    line-height: 1.25;
    letter-spacing: -0.4px;
}

.disclaimer-updated {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 15px;
    border-radius: 999px;
    background: #fff7eb;
    border: 1px solid #ecd7b6;
    color: #8a6424;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
}

.disclaimer-intro-box {
    background: linear-gradient(180deg, #fffaf4 0%, #fffdfb 100%);
    border: 1px solid #f1e4cf;
    border-radius: 18px;
    padding: 20px 22px;
    margin-bottom: 22px;
}

.disclaimer-card h4 {
    font-size: 23px;
    font-weight: 700;
    color: #36261f;
    margin-top: 28px;
    margin-bottom: 12px;
    line-height: 1.4;
    position: relative;
    padding-left: 18px;
}

    .disclaimer-card h4::before {
        content: "";
        position: absolute;
        left: 0;
        top: 8px;
        width: 6px;
        height: 24px;
        border-radius: 10px;
        background: linear-gradient(180deg, #8d5f1c 0%, #c89744 100%);
    }

.disclaimer-card p {
    color: #5a504b !important;
    font-size: 16px;
    line-height: 1.95;
    margin-bottom: 14px;
}

.disclaimer-contact {
    background: linear-gradient(135deg, #fff8ee 0%, #fffdfb 100%);
    border: 1px solid #efddbf;
    border-left: 5px solid #8f6120;
    padding: 20px 22px;
    border-radius: 16px;
    margin-top: 14px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
}

    .disclaimer-contact strong {
        display: inline-block;
        margin-bottom: 6px;
        font-size: 17px;
        color: #2f241c !important;
    }

    .disclaimer-contact,
    .disclaimer-contact a {
        color: #473b34;
        font-size: 16px;
        line-height: 1.9;
        text-decoration: none;
    }

        .disclaimer-contact a {
            font-weight: 600;
            transition: all .25s ease;
        }

            .disclaimer-contact a:hover {
                color: #8f6120;
            }

.disclaimer-footer {
    margin-top: 34px;
    padding-top: 18px;
    border-top: 1px solid #eee1d2;
    font-size: 14px;
    text-align: center;
    color: #8c8178;
}

@@media (max-width: 991px) {
    .disclaimer-hero {
        padding: 78px 0 96px;
    }

        .disclaimer-hero h1 {
            font-size: 39px !important;
        }

    .disclaimer-main {
        margin-top: -42px;
    }

    .disclaimer-card {
        padding: 30px;
    }

        .disclaimer-card h2 {
            font-size: 30px;
        }
}

@@media (max-width: 767px) {
    .disclaimer-wrapper {
        padding-bottom: 56px;
    }

    .disclaimer-hero {
        padding: 64px 0 84px;
    }

    .disclaimer-hero-badge {
        font-size: 12px;
        padding: 9px 14px;
        margin-bottom: 16px;
    }

    .disclaimer-hero h1 {
        font-size: 31px !important;
    }

    .disclaimer-hero p {
        font-size: 16px !important;
        line-height: 1.7 !important;
        padding: 0 10px;
    }

    .disclaimer-main {
        margin-top: -30px;
    }

    .disclaimer-card {
        padding: 22px;
        border-radius: 18px;
    }

    .disclaimer-header-top {
        flex-direction: column;
        gap: 12px;
    }

    .disclaimer-card h2 {
        font-size: 24px;
    }

    .disclaimer-card h4 {
        font-size: 19px;
        padding-left: 14px;
    }

        .disclaimer-card h4::before {
            height: 20px;
            top: 7px;
        }

    .disclaimer-card p,
    .disclaimer-contact,
    .disclaimer-contact a {
        font-size: 15px;
        line-height: 1.8;
    }

        .disclaimer-contact strong {
            font-size: 15px;
        }
}