@font-face {
    font-family: "Konnect";
    src: url("konnect/KonnectRegular.otf") format("truetype");
    font-weight: 400;
}

@font-face {
    font-family: "Konnect";
    src: url("konnect/KonnectMedium.otf") format("truetype");
    font-weight: 500;
}

@font-face {
    font-family: "Konnect";
    src: url("konnect/KonnectBold.otf") format("truetype");
    font-weight: 700;
}

@font-face {
    font-family: "Konnect";
    src: url("konnect/KonnectBoldItalic.otf") format("truetype");
    font-weight: 300;
}

@font-face {
    font-family: "Konnect";
    src: url("konnect/KonnectSemiBold.otf") format("truetype");
    font-weight: 600;
}

@font-face {
    font-family: "Konnect";
    src: url("konnect/KonnectLight.otf") format("truetype");
    font-weight: 200;
}

@font-face {
    font-family: "Konnect";
    src: url("konnect/KonnectExtraBold.otf") format("truetype");
    font-weight: 800;
}

@font-face {
    font-family: "Konnect";
    src: url("konnect/KonnectSemiBoldItalic.otf") format("truetype");
    font-weight: 900;
}

@font-face {
    font-family: "Konnect";
    src: url("konnect/KonnectExtraBoldItalic.otf") format("truetype");
    font-weight: 1000;
}

@font-face {
    font-family: "Konnect";
    src: url("konnect/KonnectLight.otf") format("truetype");
    font-weight: 100;
}

/* Color Variables */

:root {
    --primary-orange: #FF5403;
    --primary-green: #4CAF50;
    --primary-pink: #FF69B4;
    --primary-purple: #9C27B0;
    --text-dark: #333333;
    --text-light: #666666;
    --bg-light: #F5F5F5;
    --white: #FFFFFF;
    --orange: #FF5403;
}

/* Global Styles */
body {
    background-color: #FFFFFF;
    font-family: "Konnect", sans-serif;
    color: var(--text-dark);
    line-height: 1.6;
    overflow-x: hidden;
}

.bg-color-a {
    background: #f8f8f8;
}



html {
    overflow-x: hidden;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Header Styles */
.header-section-m {
    background: #F5F5F5;
    position: relative;
    z-index: 10005;
}

.navbar-brand h4 {
    color: var(--text-dark);
    font-size: 1.5rem;
}

.navbar-brand small {
    font-size: 0.75rem;
}

.btn-download {
    background: var(--primary-orange);
    color: var(--white);
    padding: 8px 20px;
    border-radius: 26px;
    font-weight: 500;
}

.btn-download:hover {
    background: #e55a2b;
    color: var(--white);
}

.btn-list {
    background: var(--white);
    color: var(--primary-orange);
    border: 1px solid #e0e0e0;
    padding: 8px 20px;
    border-radius: 26px;
    font-weight: 500;
}

.btn-list:hover {
    background: var(--bg-light);
    color: var(--primary-orange);
    border-color: var(--primary-orange);
}

.btn-list i {
    color: var(--text-dark);
}

/* Pay via Credit Card (Rent tab header) */
.btn-pay-credit {
    background: linear-gradient(90deg, #1f1f1f 0%, #2b2b2b 100%);
    color: #ffffff;
    border: none;
    border-radius: 30px;
    padding: 10px 16px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
    font-weight: 500;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    white-space: nowrap;
}

.btn-pay-credit:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.2);
}

.pay-credit-text {
    color: #ffffff;
}

.pay-credit-accent {
    color: #f5a623;
    font-weight: 600;
}

.user-icon {
    font-size: 2rem;
    color: var(--text-dark);
    cursor: pointer;
    transition: opacity 0.3s ease;
}

.user-icon:hover {
    opacity: 0.7;
}

.logo-icon {
    width: 158px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-icon svg {
    width: 100%;
    height: 100%;
}

.navbar-logo-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Hero Section */
.hero-section-idx {
    background: #F5F5F5;
    padding: 40px 0;
    position: relative;
    min-height: 400px;
    overflow: visible !important;
}
.pac-container {
    z-index: 99999 !important;
}

.hero-area-idx {
    position: relative;
    z-index: 2;
}

.hero-area-idx .row {
    position: relative;
    z-index: 2;
}

.image_home-idx {
    width: 50%;
    height: 150%;
    position: absolute;
    bottom: -130px;
    left: -10px;
    z-index: 0;
    pointer-events: none;
}

.image_home1-idx {
    width: 50%;
    height: 150%;
    position: absolute;
    bottom: -130px;
    right: -280px;
    z-index: 0;
    pointer-events: none;
}

.image_home1-idx img {
    width: 150%;
    height: 100%;

    opacity: 0.15;
    display: block;
}

.image_home-idx img {
    width: 150%;
    height: 100%;

    opacity: 0.15;
    display: block;
}


.hero-title-idx {
    font-size: 3.5rem;
    font-weight: regular;
    color: var(--text-dark);
    letter-spacing: -0.5px;
}

.hero-subtitle-idx {
    font-size: 1.1rem;
    color: var(--text-light);
    max-width: 800px;
    margin: 0 auto;
}

/* Search Tabs Wrapper */
.search-tabs-wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: -1px;
    margin-top: 0;
}

.search-tabs {
    display: flex;
    gap: 0;
    background: var(--primary-orange);
    border-radius: 35px 35px 0 0;
    padding: 9px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.tab-btn {
    background: transparent;
    border: none;
    padding: 10px 24px;
    font-size: 1rem;
    color: var(--white);
    cursor: pointer;
    transition: all 0.3s;
    position: relative;
    border-radius: 8px;
    font-weight: 400;
    font-family: Konnect;
}

.tab-btn.active {
    background: var(--white);
    border-radius: 30px;
    color: var(--primary-orange);
    font-weight: 400;
}

.tab-btn:hover:not(.active) {
    opacity: 0.9;
}

/* Search Container */
.search-container {
    background: var(--white);
    width: 914px;
    min-height: 92px;
    border-radius: 31px;
    padding: 8px 8px 8px 0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
    margin: 0 auto;
    display: flex;
    position: relative;
    z-index: 5;
}

.search-container .search-form {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    border: none;
}

.search-form .row {
    height: 100%;
    margin: 0;
}

.search-divider {
    width: 1px;
    height: 60%;
    background: #e0e0e0;
}

.search-input-wrapper {
    position: relative;
    padding: 12px 20px;
    background: var(--white);
    border-radius: 0;
    min-height: 76px;
    display: flex;
    flex-direction: column;
}

.search-form .col-md-5:first-child .search-input-wrapper {
    border-radius: 23px 0 0 23px;
}

.search-input-wrapper label {
    display: block;
    font-size: 16px;
    color: var(--text-light);
    margin-bottom: 4px;
    font-weight: 400;
    line-height: 1.2;
    text-align: left;
}

.search-value {
    font-size: 1rem;
    color: var(--text-dark);
    font-weight: 500;
    display: flex;
    /* text-align: center;
    justify-content: center; */
    gap: 8px;
}

.chevron-icon {
    position: absolute;
    right: 20px;
    top: 40%;
    transform: translateY(-40%);
    color: #000000;
    font-size: 1.4rem;
    margin-top: 8px;
    cursor: pointer;
    z-index: 10;
    pointer-events: none;
}

.search-property-select {
    width: 100%;
    border: none;
    background: transparent;
    padding: 0;
    font-size: 1rem;
    color: var(--text-dark);
    font-weight: 500;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    position: relative;
    padding-right: 40px;
    z-index: 5;
}

.search-property-select:focus {
    outline: none;
    box-shadow: none;
}

.search-property-select option {
    color: var(--text-dark);
    background: var(--white);
    padding: 10px;
}

.location-icon {
    border-radius: 16px;
    color: #1B1B1B;
    font-size: 1.2rem;
    background-color: #FEEFE9;
    padding: 4px;
    display: flex;
    position: absolute;
    top: 27px;
    left: -20px;
}

.search-input-wrapper .form-select,
.search-input-wrapper .form-control {
    border: none;
    background: transparent;
    padding: 0;
    font-size: 1rem;
    color: var(--text-dark);
    font-weight: 500;
}

.search-input-wrapper .form-select:focus,
.search-input-wrapper .form-control:focus {
    box-shadow: none;
    outline: none;
}

.btn-search {
    background: var(--primary-orange);
    color: var(--white);
    border: none;
    border-radius: 50px;
    font-weight: 400;
    font-size: 1rem;
    padding: 12px 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto;
    min-height: 10px;
    box-shadow: 0 2px 8px rgba(255, 84, 3, 0.3);
    transition: all 0.3s;
}

.btn-search:hover {
    background: #e04a02;
    color: var(--white);
    box-shadow: 0 4px 12px rgba(255, 84, 3, 0.4);
    transform: translateY(-1px);
}

.btn-search i {
    font-size: 1.1rem;
    font-weight: 700;
}

.search-pg-link {
    display: flex;
    justify-content: center;
    margin-top: 20px;
    width: 30%;

}

.btn-search-pid-idx {

    width: 144px;
    border: 1px solid #FF5403;
    background: #FFE5D9;
    color: var(--text-dark);
    padding: 8px 7px 7px 7px;
    border-radius: 100px;
    font-weight: 500;
    font-size: 0.95rem;
    transition: all 0.3s;
}

.btn-search-pid-idx:hover {
    background: #FFD4C2;
    color: var(--text-dark);
    border: 1px solid #FF5403;
}

/* Location Section */
.location-section {
    background: var(--white);
}


.section-title i.bi-house-heart {
    color: var(--primary-pink);
}

.section-title i.bi-person-badge {
    color: var(--primary-orange);
}

.size {
    padding-top: 7px;
    font-size: 36px;
    font-weight: 700;
    color: #333333;
    display: flex;
    align-items: center;
}


.location-card-idx {
    width: 100%;
    height: 300px;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s;
    cursor: pointer;
}

.location-card-idx:hover {
    transform: translateY(-5px);
}

.location-image-idx {
    position: relative;
    width: 100%;
    height: 300px;
    overflow: hidden;
}

.location-image-idx img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.location-title {

    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 12px 15px;
    color: #fff;
    font-size: 16px;
    font-weight: 400;
    line-height: 130%;
    text-align: center;

    background: linear-gradient(to top,
            rgba(0, 0, 0, 0.7) 0%,
            rgba(0, 0, 0, 0.3) 50%,
            rgba(0, 0, 0, 0) 100%);
}

/* Statistics Section */
.stats-section {
    background: #F06A37;
    height: 70px;
}

.stat-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 1.1rem;
    font-weight: 400;
    color: var(--white);
}

.stat-item i {
    color: var(--white);
    font-size: 1.5rem;
}

/* Recommended PG Section */
.recommended-section {
    background: var(--white);
}

.recommended-section .section-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-dark);
    margin: 0;
}

.see-all-link {
    color: var(--text-dark);
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
}

.see-all-link:hover {
    color: var(--primary-orange);
}

.pg-card {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s;
    background: var(--white);
}

.pg-card:hover {
    transform: translateY(-5px);
}

.pg-image-wrapper {
    position: relative;
    width: 100%;
    height: 200px;
    overflow: hidden;
}

.pg-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.heart-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #00000066;
    border: none;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.heart-btn i {
    color: var(--white);
    font-size: 1.2rem;
}

.pg-content {
    padding: 15px;
}

.pg-pid {
    font-size: 0.85rem;
    color: var(--text-light);
    margin-bottom: 5px;
    font-weight: 500;
}

.pg-price {
    font-size: 12px;
    font-weight: 500;
    color: #333333;
    margin-bottom: 8px;
    font-family: Konnect;
}

.pg-price-amount {
    font-size: 16px;
    font-weight: 700;
    color: #000000;
    font-style: bold;
    line-height: 27.64px;
    font-family: Konnect;
}

.pg-type {
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 5px;
    font-size: 0.95rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 220px;
}

.pg-location {
    font-size: 0.9rem;
    color: var(--text-light);
    margin-bottom: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 220px;
}

.pg-listed {
    font-size: 0.85rem;
    color: var(--text-light);
    margin-top: 8px;
    background: linear-gradient(to right,
            rgba(255, 234, 224, 1),
            rgba(255, 255, 255, 1));
    padding: 10px;
    border-bottom-right-radius: 11.05px;
    border-bottom-left-radius: 11.05px;

}

.read-more-link {
    color: var(--primary-orange);
    text-decoration: none;
    font-weight: 500;
}

/* Assistance Section */

.assistance-header {
    flex: 1;
    min-width: 0;
}

.fox-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    color: rgba(238, 85, 27, 1);
}

.fox-icon svg {
    width: 100%;
    height: 100%;
}

.assistance-subtitle {
    font-size: 40px;
    color: rgba(238, 85, 27, 1);
    font-weight: 600;
    margin-bottom: 5px;
    line-height: 1.4;
}

.assistance-subtitle-span {
    font-size: 40px;
    color: rgba(51, 51, 51, 1);
    font-weight: 600;
    margin-bottom: 5px;
    line-height: 1.4;
}

.assistance-title {
    font-size: 40px;
    color: rgba(238, 85, 27, 1);
    font-weight: 300;
    font-family: Konnect;
    line-height: 1.2;
    font-style: italic;
}

.btn-assistance-idx {
    background: linear-gradient(to right,
            rgba(51, 51, 51, 1),
            rgba(15, 15, 15, 1));
    color: var(--white);
    border: none;
    padding: 12px 30px;
    border-radius: 26px;
    font-weight: 600;
    font-size: 1rem;
    white-space: nowrap;

}

.assistance-btn-text {
    background: linear-gradient(to right,
            rgba(248, 162, 1, 1),
            rgba(204, 120, 8, 1));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.btn-assistance:hover {
    background: #333;
    color: var(--white);
}

.assistance-cards-wrapper {
    position: relative;
}

.assistance-cards-wrapper .row {
    position: relative;
}

.assistance-cards-row {
    display: flex;
    align-items: flex-start;
    min-height: 250px;
}

.assistance-cards-row>[class*="col-"] {
    display: flex;
    flex-direction: column;
    min-height: 250px;
}

/* Third column - align content to bottom */
.assistance-cards-row>[class*="col-"]:nth-child(3) {
    justify-content: flex-end;
}

/* .assistance-cards-wrapper .row::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 2px;
    background-image: repeating-linear-gradient(to right, #d0d0d0 0, #d0d0d0 6px, transparent 6px, transparent 12px);
    z-index: 0;
    transform: translateY(-50%);
    margin: 0 10%;
    pointer-events: none;
} */

.assistance-box {
    background: var(--white);
    padding: 25px 20px;
    border-radius: 10px;
    text-align: left;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 1;
    border-right: 4px solid transparent;
}

.understanding-box {
    border-right-color: rgba(240, 106, 55, 1);
    border-bottom: 4px solid rgba(240, 106, 55, 1);
    height: 100%;
    min-height: 250px;
}

/* Second card - half height, starts from top */
.assistance-cards-row>[class*="col-"]:nth-child(2) .assistance-box {
    height: 165px;
    min-height: 231px;
    max-height: 125px;
}

/* Third card - half height, positioned at bottom */
.assistance-box-bottom {
    top: 32.5px;
    height: 251px;
    min-height: 125px;
    max-height: 190px;
}

/* Fourth card - half height, same as second, starts from top */
.assistance-box-half {
    padding: 38px;
    height: 165px;
    min-height: 231px;
    max-height: 125px;
}

.assistance-box h5 {
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 12px;
    font-size: 1.2rem;
}

.assistance-box p {
    color: var(--text-light);
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.6;
}

.assistance-box p strong {
    color: var(--text-dark);
    font-weight: 700;
}

.understanding-box p strong {
    color: var(--primary-orange);
    font-weight: 700;
}

/* Budget Section */
.budget-section {
    background: var(--white);
}

.budget-section-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-dark);
    margin: 0;
}

/* .bdgt{
    width: 10px;
} */

.budget-btn {
    width: 100%;
    max-width: 100%;
    padding: 50px 20px;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: transform 0.3s;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 160px;
}

/* Mobile Budget Scroll */
.budget-scroll {
    display: flex;
    gap: 15px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 10px 0;
    scroll-snap-type: x mandatory;
    margin: 0 -15px;
    padding-left: 15px;
    padding-right: 15px;
}



@media (max-width: 767px) {
    .budget-section .container {
        padding-left: 15px;
        padding-right: 15px;
    }

    .budget-section-title {
        padding-left: 0;
        padding-right: 0;
    }

    .budget-scroll {
        margin-left: -15px;
        margin-right: -15px;
        padding-left: 15px;
        padding-right: 15px;
    }
}

/* Top-left circle */
.budget-btn::before {
    content: "";
    position: absolute;
    width: 100px;
    /* circle size */
    height: 100px;
    background-color: rgba(255, 255, 255, 0.3);
    /* semi-transparent */
    border-radius: 50%;
    top: -30px;
    /* move partially outside */
    left: -30px;
}

/* Bottom-right circle */
.budget-btn::after {
    content: "";
    position: absolute;
    width: 120px;
    height: 120px;
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    bottom: -40px;
    right: -40px;
}

.budget-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.budget-label {
    font-size: 0.95rem;
    font-weight: 600;
    display: block;
    margin-bottom: 5px;
    position: relative;
    z-index: 1;
    line-height: 1.2;
}

.budget-amount {
    font-size: 2.2rem;
    font-weight: 700;
    display: block;
    position: relative;
    z-index: 1;
    line-height: 1;
}

.budget-green {
    background: #97E2C4;
}

.budget-green .budget-label,
.budget-green .budget-amount {
    color: #1D7753;
}

.budget-pink {
    background: #FFACAC;
}

.budget-pink .budget-label,
.budget-pink .budget-amount {
    color: #8C1E20;
}

.budget-purple {
    background: #CE93D8;
}

.budget-purple .budget-label,
.budget-purple .budget-amount {
    color: #6F2179;
}

/* Rent Out Section */
.rent-out-section {
    background: var(--white);
    position: relative;
}

.rent-out-banner {
    background: #F06A37;
    padding: 50px 40px;
    border-radius: 50px;
    text-align: center;
    position: relative;
}

.rent-out-banner::before {
    content: '';
    position: absolute;
    top: 170px;
    left: 0;
    width: 120px;
    height: 120px;
    background: linear-gradient(135deg, #FFB88C 0%, #FF8C5A 100%);
    border-radius: 40px;
    /* keep it outside orange box but inside rent-out-section */
    transform: translate(-30%, -10%);
    z-index: 0;
    pointer-events: none;
}

.rent-out-banner::after {
    content: '';
    position: absolute;
    bottom: 170px;
    right: 0;
    width: 120px;
    height: 120px;
    background: linear-gradient(135deg, #FF8C5A 0%, #E55A2B 100%);
    border-radius: 40px;
    /* keep it outside orange box but inside rent-out-section */
    transform: translate(30%, 10%);
    z-index: 0;
    pointer-events: none;
}

.calendar-icon-wrapper {
    position: absolute;
    left: -20px;
    top: 50%;
    transform: translateY(-50%);
    width: 75.73px;
    height: 75.73px;
    opacity: 1;
    filter: blur(10px);
    pointer-events: none;
    z-index: 2;
}

.rent-out-calculator-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform: rotate(23.22deg);
    display: block;
}

.rent-out-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 30px;
    text-align: center;
}

.rent-out-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}

.btn-rent-out,
.btn-rent-out-whatsapp {
    background: var(--white);
    color: #F06A37;
    border: none;
    padding: 15px 30px;
    border-radius: 26px;
    font-weight: 400;
    font-size: 1.05rem;
    white-space: nowrap;
    transition: all 0.3s;
}

.btn-rent-out-whatsapp i {
    color: #25D366;
}

.rent-out-or {
    color: #ffffff;
    font-size: 1.05rem;
    font-weight: 400;
    display: flex;
    align-items: center;
    padding: 0 10px;
    white-space: nowrap;
}

.btn-rent-out:hover,
.btn-rent-out-whatsapp:hover {
    background: var(--bg-light);
    color: var(--primary-orange);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Explore Section */
.explore-section {
    background: var(--white);
}

/* Explore Section City Tabs */
.explore-section .city-tabs {
    display: flex !important;
    gap: 10px;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    margin-bottom: 30px;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding-bottom: 5px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    width: 100%;
}

.explore-section .city-tabs::-webkit-scrollbar {
    display: none;
}

/* Hide inactive city containers in PG section - JavaScript controls which city is active */
/* Desktop containers - only handle responsive visibility, not which city is active */
@media (min-width: 768px) {

    /* Completely hide ALL mobile containers on desktop */
    .explore-section .city-pg-mobile-container,
    .explore-section .city-pg-mobile-container.d-md-none {
        display: none !important;
        visibility: hidden !important;
    }

    /* Desktop containers visibility is controlled by JavaScript via inline styles */
    /* CSS only ensures desktop containers can be shown on desktop */
    .explore-section .city-pg-cards-container.d-md-flex {
        display: flex !important;
    }
}

/* Mobile containers - only handle responsive visibility, not which city is active */
@media (max-width: 767px) {

    /* Completely hide ALL desktop containers on mobile - override any inline styles and Bootstrap classes */
    .explore-section .city-pg-cards-container,
    .explore-section .city-pg-cards-container.d-md-flex,
    .explore-section .city-pg-cards-container.d-none.d-md-flex,
    .explore-section .city-pg-cards-container[style*="display: flex"],
    .explore-section .city-pg-cards-container[style*="display:flex"] {
        display: none !important;
        visibility: hidden !important;
    }

    /* Mobile containers visibility is controlled by JavaScript via inline styles */
    /* CSS only ensures mobile containers can be shown on mobile */
    .explore-section .city-pg-mobile-container.d-md-none {
        display: flex !important;
    }
}

/* Hide inactive city containers in Flatmate section - default to Mohali */
/* Desktop containers - hide non-Mohali on desktop */
@media (min-width: 768px) {
    .explore-section .city-flatmate-cards-container:not([data-city="Mohali"]) {
        display: none !important;
        visibility: hidden !important;
    }

    .explore-section .city-flatmate-cards-container[data-city="Mohali"] {
        display: flex !important;
        visibility: visible !important;
    }

    /* Hide mobile containers on desktop */
    .explore-section .city-flatmate-mobile-container {
        display: none !important;
        visibility: hidden !important;
    }
}

/* Mobile containers - hide non-Mohali on mobile */
@media (max-width: 767px) {
    .explore-section .city-flatmate-mobile-container:not([data-city="Mohali"]) {
        display: none !important;
        visibility: hidden !important;
    }

    .explore-section .city-flatmate-mobile-container[data-city="Mohali"] {
        display: flex !important;
        visibility: visible !important;
    }

    /* Hide desktop containers on mobile - override any inline styles and Bootstrap classes */
    .explore-section .city-flatmate-cards-container,
    .explore-section .city-flatmate-cards-container.d-md-flex,
    .explore-section .city-flatmate-cards-container.d-none.d-md-flex,
    .explore-section .city-flatmate-cards-container[data-city="Mohali"],
    .explore-section .city-flatmate-cards-container[data-city="Chandigarh"],
    .explore-section .city-flatmate-cards-container[style*="display: flex"],
    .explore-section .city-flatmate-cards-container[style*="display:flex"] {
        display: none !important;
        visibility: hidden !important;
    }
}

.city-tabs {
    display: flex;
    gap: 10px;
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-bottom: 30px;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding-bottom: 5px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.city-tabs::-webkit-scrollbar {
    display: none;
}

@media (max-width: 767px) {

    .image_home {
        display: none !important;
    }

    .image_home1 {
        display: none !important;
    }

    .explore-section .city-tabs {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        margin-left: -15px;
        margin-right: -15px;
        padding-left: 15px;
        padding-right: 15px;
        scrollbar-width: none;
        -ms-overflow-style: none;
        width: calc(100% + 30px);
    }

    .explore-section .city-tabs::-webkit-scrollbar {
        display: none !important;
    }

    .city-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin-left: -15px;
        margin-right: -15px;
        padding-left: 15px;
        padding-right: 15px;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .city-tabs::-webkit-scrollbar {
        display: none;
    }

    .explore-section .container {
        padding-left: 15px;
        padding-right: 15px;
    }

    .explore-section .section-title {
        padding-left: 0;
        padding-right: 0;
    }
}

.city-tab {
    background: var(--white);
    border: 2px solid #e0e0e0;
    padding: 10px 20px;
    border-radius: 10px;
    font-weight: 500;
    color: var(--text-dark);
    cursor: pointer;
    transition: all 0.3s;
    white-space: nowrap;
    font-size: 0.95rem;
    flex-shrink: 0 !important;
    scroll-snap-align: start;
    min-width: fit-content;
}

.city-tab.active {
    background: var(--primary-orange);
    color: var(--white);
    border-color: var(--primary-orange);
}

.city-tab:hover:not(.active) {
    border-color: var(--primary-orange);
}

/* Mobile specific styles for explore section city tabs */
@media (max-width: 767px) {
    .explore-section .city-tab {
        background: var(--white) !important;
        border: 2px solid #e0e0e0 !important;
        color: var(--text-dark) !important;
        flex-shrink: 0 !important;
        min-width: fit-content !important;
    }

    .explore-section .city-tab.active {
        background: #333333 !important;
        color: var(--white) !important;
        border-color: #333333 !important;
    }

    .explore-section .city-tab:hover:not(.active) {
        border-color: #333333;
    }
}

.explore-card {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background: var(--white);
    display: flex;
    flex-direction: column;
}

.explore-image1 {
    position: relative;
    width: 110%;
    height: 350px;
    overflow: hidden;
}

.explore-image1 img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.explore-image::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 60%;
    /* how much white area on left */
    height: 100%;
    /* background: linear-gradient(to right,
            rgba(255, 255, 255, 0.95) 0%,
            rgba(255, 255, 255, 0.6) 40%,
            rgba(255, 255, 255, 0) 100%); */
    z-index: 1;
}

.explore-image1 .explore-title {
    position: absolute;
    top: 25px;
    left: 25px;
    z-index: 2;
    font-size: 16px;
    font-weight: 600;
    color: #333333;
    line-height: 1.2;
    max-width: calc(100% - 50px);
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
}

.brokers-title {
    margin-bottom: 4px;
}

/* Mobile Explore Cards Scroll */
.explore-scroll {
    display: flex;
    gap: 15px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 10px 0;
    scroll-snap-type: x mandatory;
    margin: 0 -15px;
    padding-left: 15px;
    padding-right: 15px;
}

.explore-card-mobile {
    position: relative;
    min-width: 280px;
    max-width: 280px;
    border-radius: 12px;
    overflow: hidden;
    background: var(--white);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    scroll-snap-align: start;
}

.explore-card-mobile .explore-image {
    width: 100%;
    height: 200px;
    overflow: hidden;
}

.explore-card-mobile .explore-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.explore-card-mobile .explore-title {
    padding: 15px;
    font-size: 1rem;
    font-weight: 700;
}

/* Download Section */
.badge-pill {
    position: relative;
    display: inline-block;
    background-color: #F06A37;
    color: #ffffff;
    padding: 8px 20px;
    border-radius: 50px;
    font-size: 16px;
    top: -10px;
    font-family: Konnect;
    font-style: regular;
    font-weight: 400;
    font-size: 16px;
    line-height: 120%;
    letter-spacing: 0%;
}

.download-section {
    position: relative;
    background: var(--white);
    background-image: url('../images/images/wave-pattern.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #333333;
    font-weight: 400;
    font-size: 18px;
    line-height: 160%;
    font-style: regular;
    font-family: Konnect;
    font: bold;
}

.section-title {
    font-family: Konnect;
    font-weight: 700;
    font-style: bold;
    font-size: 30px;
    line-height: 120%;
    letter-spacing: 0%;
    position: relative;
}

.d-section-content {
    max-width: 600px;
    /* Adjust this value to fit the pink background */
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box;
}

.phone-mockup {
    text-align: center;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: -10px;
}

.phone-mockup::after {
    position: absolute;

    right: 50px;
    font-size: 2rem;
    z-index: 0;
}

.phone-mockup .phone-1 {
    width: 580px;
    height: 480px;
    transform: rotate(-1deg);
    z-index: 0;
    position: relative;
    top: -40px;
}


.download-description {
    position: relative;
    color: var(--text-light);
    font-size: 0.85rem;
    line-height: 1.8;
}

.app-badges {
    position: relative;
    display: flex;
    flex-wrap: wrap;
}

.app-badge img {
    position: relative;
    height: 50px;
    width: auto;
}


/* Top Cities Section */
.top-cities-section {
    background: var(--white);
    padding: 60px 0;
}

.top-cities-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 30px;
}

.house-icon-blurred {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    z-index: 0;
    filter: blur(2px);
    opacity: 0.6;
}

.house-icon-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.top-cities-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-dark);
    margin: 0;
    padding-left: 60px;
    position: relative;
    z-index: 1;
    line-height: 1.2;
}

.top-cities-highlight {
    color: var(--primary-orange);
}

.city-tabs-wrapper {
    position: relative;
    margin-bottom: 30px;
}

.city-tabs-divider {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: #e0e0e0;
    z-index: 0;
}

.city-tabs {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    overflow-x: auto;
    margin-bottom: 0;
    padding-bottom: 15px;
    -webkit-overflow-scrolling: touch;
}

.top-cities-section .city-tab {
    background: transparent;
    border: none;
    padding: 10px 20px;
    border-radius: 0;
    font-weight: 500;
    color: var(--text-dark);
    cursor: pointer;
    transition: all 0.3s;
    white-space: nowrap;
    font-size: 0.95rem;
    position: relative;
    margin-right: 20px;
}

.top-cities-section .city-tab.active {
    background: transparent;
    color: var(--text-dark);
    font-weight: 700;
}

.top-cities-section .city-tab.active::after {
    content: '';
    position: absolute;
    bottom: -16px;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--primary-orange);
    z-index: 2;
}

.top-cities-section .city-tab:hover:not(.active) {
    color: var(--primary-orange);
}

.top-cities-content-wrapper {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.carousel-nav-btn {
    position: absolute;
    left: -50px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #e0e0e0;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s;
    color: var(--text-dark);
    font-size: 1.2rem;
}

.carousel-nav-btn:hover {
    background: var(--primary-orange);
    color: var(--white);
}

.carousel-nav-left {
    left: -50px;
}

.top-cities-cards {
    flex: 1;
    margin: 0;
}

.city-list-card {
    width: 345px;
    background: var(--white);
    padding: 20px;
    border-radius: 8px;
    height: 100%;
}

.city-list-title {
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 15px;
    font-size: 1.1rem;
}

.city-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.city-list li {
    margin-bottom: 8px;
    position: relative;
    padding-left: 15px;
}

.city-list li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--text-light);
    font-size: 1.2rem;
    line-height: 1;
}

.city-list a {
    color: var(--text-light);
    text-decoration: none;
    font-size: 0.95rem;
    transition: color 0.3s;
    line-height: 1.5;
}

.city-list a:hover {
    color: var(--primary-orange);
}

/* Testimonials Section */
.testimonials-section {
    background: var(--white);
    padding: 60px 0;
}

.tsection-title {
    font-family: Konnect;
    font-size: 40px;
    font-weight: 700;
    line-height: 120%;
    text-align: center;
    margin-bottom: 20px;
    color: #000000;
}

.text_t {
    color: #F06A37;
}

.testimonial-description {
    font-family: Konnect;
    font-size: 18px;
    font-weight: 400;
    line-height: 160%;
    color: #666666;
    max-width: 800px;
    margin: 0 auto 40px;
}

.testimonials-carousel {
    position: relative;
}

.testimonial-track {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 10px 0 20px;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.testimonial-track::-webkit-scrollbar {
    display: none;
}

.testimonial-card {
    background: var(--white);
    padding: 30px 25px;
    border-radius: 10px;
    min-width: 600px;
    height: 100%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    min-height: 280px;
    display: flex;
    flex-direction: column;
    scroll-snap-align: start;
}

.stars {
    color: rgba(255, 187, 14, 1);
    font-size: 20px;
    display: flex;
    gap: 2px;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e6e6e6;
}

.stars .bi-star-fill {
    color: rgba(255, 187, 14, 1);
}

.testimonial-text {
    color: #666666;
    font-family: Konnect;
    font-size: 16px;
    font-weight: 400;
    line-height: 160%;
    margin-bottom: 25px;
    flex-grow: 1;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: auto;
}

.author-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.author-name {
    font-family: Konnect;
    font-weight: 700;
    font-size: 16px;
    color: #333333;
    margin-bottom: 2px;
}

.author-designation {
    font-family: Konnect;
    font-size: 14px;
    font-weight: 400;
    color: #666666;
}

.testimonial-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 30px;
}

.pagination-dot {
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background-color: transparent;
    border: 2px solid #F06A37;
    cursor: pointer;
    transition: all 0.3s;
}

.pagination-dot.active {
    background-color: #F06A37;
    border-color: #F06A37;
}

/* Footer */
.footer-section {
    background: #333333;
    border-top: 1px solid var(--border-color);
    padding: 40px 0 0;
    position: relative;
}

.footer-brand h4 {
    color: var(--text-dark);
    font-size: 1.5rem;
    margin: 0;
}

.footer-logo-img {
    max-width: 200px;
    height: auto;
    display: block;
}

.footer-description {
    color: #FFFFFF;
    font-size: 0.9rem;
    margin-bottom: 15px;
}

.social-icons {
    display: flex;
    gap: 15px;
}

.social-icons a {
    color: #FFFFFF;
    font-size: 1.5rem;
    transition: color 0.3s;
}

.social-icons a:hover {
    color: var(--primary-orange);
}

.footer-heading {
    font-size: 1rem;
    font-weight: 600;
    color: #FFFFFF;
    margin-bottom: 15px;
}

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

.footer-links li {
    margin-bottom: 10px;
}

.footer-links a {
    color: #FFFFFF;
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.3s;
}

.footer-links a:hover {
    color: var(--primary-orange);
}

.contact-info p {
    color: #FFFFFF;
    font-size: 0.9rem;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}

.contact-info i {
    color: #FFFFFF;
}

.app-badges-footer {
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
}

.app-badge-footer {
    display: inline-flex;
    width: 48px;
    height: 48px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 12px;
    background: transparent;
    padding: 12px;
    transition: all 0.3s;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.app-badge-footer:hover {
    border-color: rgba(255, 255, 255, 0.6);
    transform: translateY(-2px);
    text-decoration: none;
}

.app-badge-footer img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.footer-bottom {
    border-top: 1px solid #FFFFFF;
    padding-top: 20px;
    padding-bottom: 0;
    position: relative;
    overflow: visible;
    min-height: 0;
    z-index: 1;
    margin-bottom: 0;
}

.footer-bottom-images-wrapper {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    z-index: 0;
    margin: 0;
    padding: 0;
    pointer-events: none;
}

.footer-bottom-image {
    width: calc(100vw / 6);
    height: auto;
    display: block;
    object-fit: cover;
    object-position: bottom;
    opacity: 0.3;
    flex-shrink: 0;
    margin: 0;
    padding: 0;
}

.footer-bottom p {
    position: relative;
    z-index: 1;
}



.footer-bottom p {
    color: #FFFFFF;
    font-size: 0.85rem;
    margin: 0;
    position: relative;
    z-index: 1;
}


/* Mobile Footer - White Background */
@media (max-width: 767px) {
    .footer-section {
        background: var(--white);
        color: var(--text-dark);
    }
}

/* Mobile Footer Styles */
.mobile-footer-section {
    background: var(--white);
    padding: 24px 0 0;
    display: none !important;
}

@media only screen and (max-width: 767.98px) {
    .mobile-footer-section {
        display: block !important;
    }
}

@media (min-width: 768px) {
    .mobile-footer-section {
        display: none !important;
    }
}

.mobile-footer-content {
    padding: 0 16px 0;
}

.mobile-footer-brand {
    margin-bottom: 16px;
}

.mobile-footer-logo-img {
    height: 40px;
    width: auto;
    object-fit: contain;
}

.mobile-footer-main-tagline {
    font-size: 0.875rem;
    color: var(--text-dark);
    margin-bottom: 20px;
    line-height: 1.5;
}

.mobile-footer-section-group {
    margin-bottom: 20px;
}

.mobile-footer-heading {
    font-size: 0.9375rem;
    font-weight: bold;
    color: var(--text-dark);
    margin-bottom: 10px;
}

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

.mobile-footer-link {
    font-size: 0.8125rem;
    color: var(--text-dark);
    text-decoration: none;
    transition: color 0.3s;
}

.mobile-footer-link:hover {
    color: var(--primary-orange);
}

.mobile-footer-separator {
    font-size: 0.8125rem;
    color: var(--text-light);
    margin: 0 4px;
}

.mobile-footer-social-icons {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
    padding-top: 8px;
}

.mobile-social-icon {
    color: var(--text-dark);
    font-size: 1.25rem;
    text-decoration: none;
    transition: color 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mobile-social-icon:hover {
    color: var(--primary-orange);
}

.mobile-footer-copyright {
    background: #FFF5F0;
    padding: 16px;
    margin: 0 -16px 0;
    text-align: center;
}

.mobile-footer-copyright p {
    font-size: 0.75rem;
    color: var(--text-dark);
    margin: 0;
}

/* Responsive Design */
@media (max-width: 992px) {

    .phone-mockup .phone-1,
    .phone-mockup .phone-2 {
        max-width: 200px;
    }

    .phone-mockup .phone-2 {
        margin-left: -60px;
    }
}

@media (max-width: 992px) {
    .search-container {
        width: 100%;
        max-width: 914px;
        height: auto;
        min-height: 92px;
    }

    .phone-mockup .phone-1,
    .phone-mockup .phone-2 {
        max-width: 200px;
    }

    .phone-mockup .phone-2 {
        margin-left: -60px;
    }
}

@media (max-width: 768px) {
    .hero-title {
        font-size: 2rem;
    }

    .hero-subtitle {
        font-size: 1rem;
    }

    .section-title {
        font-size: 1.5rem;
    }

    .budget-btn {
        min-height: 140px;
        padding: 40px 15px;
    }

    .budget-amount {
        font-size: 2rem;
    }

    .budget-label {
        font-size: 0.9rem;
    }

    .search-container {
        width: 100%;
        height: auto;
        border-radius: 20px;
        min-height: auto;
    }

    .search-tabs {
        flex-wrap: wrap;
        gap: 5px;
    }

    .tab-btn {
        padding: 8px 16px;
        font-size: 0.9rem;
    }

    .search-form .row {
        flex-direction: column;
    }

    .search-form .col-md-2 {
        width: 100%;
    }

    .search-input-wrapper {
        min-height: 60px;
    }

    .btn-search {
        border-radius: 0 0 20px 20px;
        padding: 15px;
        min-height: 50px;
    }

    .search-divider {
        display: none;
    }

    .budget-btn {
        padding: 30px 15px;
        font-size: 1.2rem;
    }

    .city-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .assistance-section .d-flex {
        flex-direction: column;
        align-items: flex-start !important;
    }

    .btn-assistance {
        margin-top: 20px;
    }

    .phone-mockup {
        flex-direction: column;
        gap: 20px;
    }

    .phone-mockup .phone-1,
    .phone-mockup .phone-2 {
        transform: rotate(0deg);
        margin-left: 0;
        max-width: 200px;
    }

    .phone-mockup::after {
        display: none;
    }
}

@media (max-width: 576px) {
    .hero-title {
        font-size: 1.75rem;
    }

    .hero-subtitle {
        font-size: 0.9rem;
    }

    .navbar-brand h4 {
        font-size: 1.2rem;
    }

    .btn-download,
    .btn-list {
        padding: 6px 12px;
        font-size: 0.85rem;
    }

    .user-icon {
        font-size: 1.5rem;
    }

    .location-image {
        height: 150px;
    }

    .pg-image-wrapper {
        height: 150px;
    }

    .assistance-icon {
        width: 60px;
        height: 60px;
    }

    .assistance-icon i {
        font-size: 2rem;
    }

    .search-container {
        padding: 15px;
    }

    .tab-btn {
        padding: 10px 15px;
        font-size: 0.9rem;
    }

    .budget-section-title {
        font-size: 1.5rem;
    }

    .budget-btn {
        min-height: 120px;
        padding: 35px 15px;
    }

    .budget-amount {
        font-size: 1.8rem;
    }

    .budget-label {
        font-size: 0.85rem;
    }

    .rent-out-title {
        font-size: 1.4rem;
    }

    .rent-out-banner {
        padding: 30px 20px;
    }

    .btn-rent-out,
    .btn-rent-out-whatsapp {
        padding: 12px 20px;
        font-size: 0.95rem;
    }
}

/* Mobile App Banner */
.mobile-app-banner {
    background: #F5F5F5;
    border-bottom: 1px solid #e0e0e0;
}

.logo-icon-small {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mobile-banner-logo-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.banner-text {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-dark);
    line-height: 1.2;
}

.banner-rating {
    font-size: 0.75rem;
    color: var(--text-light);
}

.broker-title {
    margin-bottom: 10px;
}

.btn-use-app {
    background: var(--primary-orange);
    color: var(--white);
    border: none;
    padding: 6px 12px;
    border-radius: 5px;
    font-size: 0.85rem;
    font-weight: 600;
}

.btn-close-banner {
    background: none;
    border: none;
    color: var(--text-dark);
    font-size: 1.2rem;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Shared Mobile Header (single header for all sections) */
.mobile-global-header {
    background: var(--white);
}

.mobile-global-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
}

.mobile-global-top-r {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
}

.mobile-header-subtitle {
    font-size: 0.75rem;
    color: var(--text-light);
    font-weight: 500;
    line-height: 1;
    margin-top: 2px;
}

.mobile-global-hero {
    position: relative;
    padding: 6px 0 14px;
}

.mobile-global-hero .hero-title-mobile {
    margin-top: 20px;
    margin-bottom: 14px;
    font-weight: 600;
    font-size: 22px;
    color: rgba(51, 51, 51, 1);
    display: flex;
    justify-content: center;
    text-align: center;
    width: 100%;
}

/* Image container */
.m-image {
    position: absolute;
    inset: 0;
    /* top:0; right:0; bottom:0; left:0 */
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    /* ensures image stays contained */
}

/* Decorative image */
.m-image img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1.2);
    /* centered and slightly scaled */
    width: auto;
    /* scale proportionally */
    height: 100%;
    /* fill container height */
    max-width: none;
    /* ignore default width limit */
    opacity: 0.15;
    display: block;
}

/* Responsive adjustments */
@media (max-width: 1200px) {
    .m-image img {
        transform: translate(-50%, -50%) scale(1.1);
        height: 110%;
    }
}

@media (max-width: 768px) {
    .m-image img {
        transform: translate(-50%, -43%) scale(1);
        height: 120%;
        /* adjust height for mobile */
    }
}

@media (max-width: 480px) {
    .m-image img {
        transform: translate(-50%, -43%) scale(0.9);
        height: 130%;
    }
}

/* Index mobile hero: card tabs + search row (beats generic .mobile-tabs in responsive.css) */
.mobile-global-header .mobile-global-hero .mobile-tabs {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 8px;
    border-bottom: none !important;
    padding-bottom: 0;
    padding: 0px 10px;
    margin-bottom: 14px;
    z-index: 1;
    overflow: visible;
}

.mobile-global-header .mobile-global-hero .mobile-tab {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 4px;
    min-height: 78px;
    margin: 0;
    border: 1px solid transparent;
    border-radius: 12px;
    background: 
      linear-gradient(#fff, #fff) padding-box,
      linear-gradient(180deg, #FF5403 -90%, #FFE3D6 87.5%) border-box;
    color: #333333;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
    box-shadow: none;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.mobile-global-header .mobile-global-hero .mobile-tab:hover {
    border-color: #ff9458;
}

.mobile-global-header .mobile-global-hero .mobile-tab.active {
    border: 1px solid transparent;
    background:
      linear-gradient(360deg, #FFFFFF 15.83%, #FF5403 472.5%) padding-box,
      linear-gradient(180deg, #FF5403 -90%, #FFFFFF 87.5%) border-box;
    color: #333333;
    font-weight: 600;
}

.mobile-global-header .mobile-global-hero .mobile-tab.active::after,
.mobile-global-header .mobile-global-hero .mobile-tab::after {
    display: none !important;
    content: none !important;
}

.mobile-global-header .mobile-global-hero .mobile-tab-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

.mobile-global-header .mobile-global-hero .mobile-tab-icon svg {
    display: block;
}

.mobile-global-header .mobile-global-hero .mobile-tab-label {
    display: block;
    text-align: center;
    font-family: "Konnect", "Poppins", sans-serif;
}

.mobile-search-stack {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 1;
}

.mobile-property-select-wrapper {
    position: relative;
    width: 60%;
}


.mobile-property-select-wrapper-r {
    position: relative;
    width: 60%;
    bottom: 10px;
}

.mobile-property-select {
    width: 100%;
    border: 1px solid rgba(102, 102, 102, 1);
    border-radius: 30px;
    padding: 7px 12px;
    padding-right: 35px;
    background: var(--white);
    font-size: 0.95rem;
    color: rgba(102, 102, 102, 1);
    font-weight: 600;
    text-align: center;
    z-index: 1;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
}

.mobile-property-select:focus {
    outline: none;
    box-shadow: none;
    border-color: rgba(173, 216, 230, 1);
}

.mobile-property-select option {
    text-align: center;
    color: #000000;
    background: var(--white);
    padding: 10px;
}

.mobile-chevron-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #000000;
    font-size: 1rem;
    pointer-events: none;
    z-index: 2;
}

.mobile-global-header .mobile-search-bar {
    width: 100%;
    box-shadow: none;
    border: 1px solid rgba(102, 102, 102, 1);
    padding: 7px;
    z-index: 1;
}

.mobile-global-header .btn-mobile-search {
    width: 61px;
    height: 44px;
    border-radius: 30px;
    z-index: 1;
}

.mobile-global-header .btn-search-pid1 {
    position: relative;
    border-radius: 10px;
    background: #FFF8F5;
    color: #666666;
    font-weight: 600;
    font-size: 12px;
    width: 76px;
    z-index: 1;
    border: none;
    /* important */
}

/* Gradient border */
.mobile-global-header .btn-search-pid1::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1px;
    /* border thickness */
    border-radius: 10px;
    background: linear-gradient(270deg, #FF5403 0%, #FFB38F 100%);
    z-index: -1;

    /* mask trick to create hollow center */
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask-composite: exclude;
}

/* Index mobile hero: search + PID in one row; leading search icon inside pill */
.mobile-global-header .mobile-global-hero .mobile-search-stack {
    align-items: stretch;
    width: 100%;
    z-index: 1;
}

.mobile-global-header .mobile-global-hero .mobile-hero-search-row {
    display: flex;
    align-items: stretch;
    gap: 10px;
    width: 100%;
}

.mobile-global-header .mobile-global-hero .mobile-search-bar {
    flex: 1 1 72%;
    min-width: 0;
    width: auto;
    height: 43px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    border-radius: 8px;
    background: #ffffff;
    border: 1px solid #d0d0d0;
    box-shadow: none;
}

.mobile-global-header .mobile-global-hero .mobile-hero-search-leading-icon {
    flex-shrink: 0;
    font-size: 1.1rem;
    color: #666666;
}

.mobile-global-header .mobile-global-hero .mobile-search-bar .form-control {
    border: none;
    background: transparent;
    box-shadow: none;
    padding: 6px 0;
    font-size: 0.95rem;
    color: #333333;
    min-width: 0;
}

.mobile-global-header .mobile-global-hero .mobile-search-bar .form-control:focus {
    outline: none;
    box-shadow: none;
}

.mobile-global-header .mobile-global-hero .mobile-search-bar .form-control::placeholder {
    color: #888888;
}

.mobile-global-header .mobile-global-hero .btn-search-pid1 {
    flex: 0 0 26%;
    max-width: 120px;
    min-width: 86px;
    width: auto;
    height: 28px;
    margin-top: 7.5px;
    padding: 8px 6px;
    align-self: stretch;
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    text-align: center;
    line-height: 1.15;
    border-radius: 8px;
    background: #ffffff;
    color: #1a1a1a;
    font-weight: 400;
    font-size: 11px;
    border: 1px solid rgba(51, 51, 51, 1);
    box-shadow: 1px 2px 0px 0px rgba(51, 51, 51, 1);
}

.mobile-global-header .mobile-global-hero .btn-search-pid1:hover {
    background: #fafafa;
    color: #1a1a1a;
}

.mobile-global-header .mobile-global-hero .btn-search-pid1::before {
    display: none !important;
    content: none !important;
}


/* Mobile Hero Section */
.mobile-hero {
    padding: 20px 15px;
}

.hero-title-mobile {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text-dark);
    margin: 0;
}

.mobile-tabs {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 5px;
}

.mobile-tab {
    background: none;
    border: none;
    padding: 8px 16px;
    font-size: 0.95rem;
    color: var(--text-light);
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    cursor: pointer;
}

.mobile-tab.active {
    color: var(--primary-orange);
    border-bottom-color: var(--primary-orange);
    font-weight: 600;
}

.mobile-search-bar {
    display: flex;
    gap: 10px;
    background: var(--white);
    border-radius: 10px;
    padding: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.mobile-search-bar .form-control {
    border: none;
    background: transparent;
    flex: 1;
    font-size: 0.95rem;
}

.mobile-search-bar .form-control:focus {
    box-shadow: none;
    outline: none;
}

.btn-mobile-search {
    background: var(--primary-orange);
    color: var(--white);
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.btn-search-pid1 {
    width: 100%;
    background: var(--white);
    color: var(--text-dark);
    border: 1px solid #e0e0e0;
    padding: 10px;
    border-radius: 8px;
    font-weight: 500;
}

/* Recent Searches */
.recent-searches {
    margin-top: 20px;
}

.recent-search-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-dark);
}

.recent-search-tags {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.recent-tag {
    background: #F5F5F5;
    border: 1px solid #e0e0e0;
    border-radius: 20px;
    padding: 8px 16px;
    font-size: 0.85rem;
    color: var(--text-dark);
    white-space: nowrap;
    cursor: pointer;
}

/* Hide Scrollbars on Mobile */
.pg-scroll,
.brokers-scroll,
.explore-scroll,
.budget-scroll,
.city-tabs,
.recent-search-tags {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.pg-scroll::-webkit-scrollbar,
.brokers-scroll::-webkit-scrollbar,
.explore-scroll::-webkit-scrollbar,
.budget-scroll::-webkit-scrollbar,
.city-tabs::-webkit-scrollbar,
.recent-search-tags::-webkit-scrollbar {
    display: none;
}

/* Mobile Scrollable PG Cards */
.pg-scroll {
    display: flex;
    gap: 15px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 10px 0;
    scroll-snap-type: x mandatory;
}

.pg-card-mobile {
    min-width: 280px;
    background: var(--white);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    scroll-snap-align: start;
    flex-shrink: 0;
}

.pg-card-mobile .pg-image-wrapper {
    height: 180px;
}

.pg-card-mobile .pg-content {
    padding: 12px;
}

.pg-card-mobile .pg-pid {
    font-size: 0.8rem;
}

.pg-card-mobile .pg-price {
    font-size: 1rem;
    margin: 5px 0;
}

.pg-card-mobile .pg-type {
    font-size: 0.9rem;
    margin: 5px 0;
}

.pg-card-mobile .pg-location {
    font-size: 0.85rem;
    margin: 5px 0;
}

.pg-card-mobile .pg-listed {
    font-size: 0.8rem;
    margin-top: 5px;
}

/* Section Title Mobile */
.section-title-mobile {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-dark);
}

/* Recommended Brokers Section */
.brokers-section {
    background: var(--white);
}

.brokers-scroll {
    display: flex;
    gap: 15px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 10px 15px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.brokers-scroll::-webkit-scrollbar {
    display: none;
}

/* Rent mobile brokers: reuse buy desktop broker card design */
.brokers-scroll-desktop-cards {
    gap: 16px;
    /* extra top space so the avatar can overflow upward */
    padding: 60px 15px 10px;
    margin: 0 0px;
    overflow-y: visible !important;
}

.brokers-scroll-desktop-cards .broker-card-desktop {
    min-width: 130px;
    max-width: 130px;
    flex: 0 0 auto;
    margin: 0;
    scroll-snap-align: start;
    margin-top: 44px;
}

/* ensure the scroll container never clips the avatar vertically */
.brokers-section .brokers-scroll {
    overflow-y: visible;
}

/* If any parent is clipping, force visibility */
.brokers-section,
.brokers-section .container-fluid,
.brokers-section .container {
    overflow: visible !important;
}

/* Some browsers clip Y when X is scrollable; keep avatar inside scroll padding */
.brokers-scroll-desktop-cards {
    padding-top: 72px;
    /* keeps avatar within the scroll container box */
}

.brokers-scroll-desktop-cards .broker-card-desktop .btn-view-details-broker {
    padding-top: 14px;
    padding-bottom: 14px;
}

.broker-card {
    min-width: 240px;
    max-width: 240px;
    background: #F5F5F0;
    border-radius: 20px;
    padding: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    scroll-snap-align: start;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    position: relative;
    border: 1px solid rgba(255, 107, 53, 0.2);

}

.broker-avatar-wrapper {
    display: flex;
    justify-content: center;
    margin-top: -40px;
    margin-bottom: 10px;
    position: relative;
    z-index: 1;
    bottom: -30px;
}

.broker-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid #F5F5F0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.broker-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.broker-content {
    padding: 50px 15px 0 15px;
    text-align: center;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.broker-company {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-light);
    margin-bottom: 5px;
}

.broker-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 5px;
}

.broker-member {
    font-size: 0.8rem;
    color: var(--text-light);
    margin-bottom: 12px;
}

.broker-tag {
    display: inline-block;
    background: #FFE5D9;
    color: var(--text-dark);
    padding: 6px 12px;
    border-radius: 15px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: 15px;
    align-self: center;
}

.broker-footer {
    margin-top: auto;
    background: #F0E6E0;
    padding: 12px;
    border-radius: 0 0 20px 20px;
}

.btn-view-details {
    width: 100%;
    background: transparent;
    color: var(--text-dark);
    border: none;
    padding: 8px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}

/* Recent News & Articles Section */
.news-section {
    background: var(--white);
    overflow-x: hidden;
    width: 100%;
}

.news-section .container-fluid {
    overflow-x: hidden;
    width: 100%;
}

.news-images-scroll {
    display: flex;
    gap: 15px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    margin: 0 -15px;
    padding: 0 15px;
}

.news-images-scroll::-webkit-scrollbar {
    display: none;
}

.news-image-placeholder {
    min-width: 280px;
    max-width: 280px;
    flex-shrink: 0;
    scroll-snap-align: start;
    border: none;
    outline: none;
}

.news-image-placeholder img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    display: block;
    border: none;
    outline: none;
    box-shadow: none;
}

/* Bottom Property Navigation */
.bottom-nav-section {
    background: var(--white);
    border-top: 1px solid #e0e0e0;
}

.property-type-tabs {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 5px;
}

.property-tab {
    background: none;
    border: none;
    padding: 8px 16px;
    font-size: 0.9rem;
    color: var(--text-light);
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    cursor: pointer;
}

.property-tab.active {
    color: var(--primary-orange);
    border-bottom-color: var(--primary-orange);
    font-weight: 600;
}

.location-lists {
    margin-top: 20px;
}

.location-list-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 10px;
}

.location-list-mobile {
    list-style: none;
    padding: 0;
    margin: 0;
}

.location-list-mobile li {
    margin-bottom: 8px;
}

.location-list-mobile a {
    font-size: 0.85rem;
    color: var(--text-light);
    text-decoration: none;
}

/* Hide desktop sections on mobile */
@media (max-width: 767px) {

    .location-section,
    .stats-section,
    .assistance-section,
    .download-section
    .testimonials-section {
        display: none !important;
    }

    .recommended-section .row {
        display: none;
    }

    .hero-section .row.d-none.d-md-flex {
        display: none !important;
    }

    /* Show mobile hero */
    .mobile-hero {
        display: block !important;
    }
}

/* ============================================
   RENTING HOMEPAGE STYLES
   ============================================ */

/* Header Styles */
.header-section {
    background: #F5F5F5;

}

.navbar-brand h4 {
    color: var(--text-dark);
    font-size: 1.5rem;
}

.navbar-brand small {
    font-size: 0.75rem;
}

.btn-download {
    background: var(--primary-orange);
    color: var(--white);
    padding: 8px 20px;
    border-radius: 26px;
    font-weight: 500;
}

.btn-download:hover {
    background: #e55a2b;
    color: var(--white);
}

.btn-list {
    background: var(--white);
    color: var(--primary-orange);
    border: 1px solid #e0e0e0;
    padding: 8px 20px;
    border-radius: 26px;
    font-weight: 500;
}

.btn-list:hover {
    background: var(--bg-light);
    color: var(--primary-orange);
    border-color: var(--primary-orange);
}

.btn-list i {
    color: var(--text-dark);
}

.user-icon {
    font-size: 2rem;
    color: var(--text-dark);
    cursor: pointer;
}

.logo-icon {
    width: 158px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-icon svg {
    width: 100%;
    height: 100%;
}

.navbar-logo-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Hero Section */
.hero-section {
    background: #F5F5F5;
    padding: 40px 0;
    position: relative;
    min-height: 400px;
    overflow: hidden;
}

.hero-area {
    position: relative;
    z-index: 2;
}

.hero-area .row {
    position: relative;
    z-index: 2;
}

.image_home {
    width: 50%;
    height: 150%;
    position: absolute;
    bottom: -130px;
    left: -10px;
    z-index: 0;
    pointer-events: none;
}

.image_home1 {
    width: 50%;
    height: 150%;
    position: absolute;
    bottom: -130px;
    right: -280px;
    z-index: 0;
    pointer-events: none;
}

.image_home1 img {
    width: 150%;
    height: 100%;

    opacity: 0.15;
    display: block;
}

.image_home img {
    width: 150%;
    height: 100%;

    opacity: 0.15;
    display: block;
}


.hero-title {
    font-size: 3.5rem;
    font-weight: regular;
    color: var(--text-dark);
    letter-spacing: -0.5px;
}

.hero-subtitle {
    font-size: 1.1rem;
    color: var(--text-light);
    max-width: 800px;
    margin: 0 auto;
}

/* Search Tabs Wrapper */
.search-tabs-wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: -1px;
    margin-top: 0;
}

.search-tabs {
    display: flex;
    gap: 0;
    background: var(--primary-orange);
    border-radius: 35px 35px 0 0;
    padding: 9px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.tab-btn {
    background: transparent;
    border: none;
    padding: 10px 24px;
    font-size: 1rem;
    color: var(--white);
    cursor: pointer;
    transition: all 0.3s;
    position: relative;
    border-radius: 8px;
    font-weight: 400;
    font-family: Konnect;
}

.tab-btn.active {
    background: var(--white);
    border-radius: 30px;
    color: var(--primary-orange);
    font-weight: 600;
}

.tab-btn:hover:not(.active) {
    opacity: 0.9;
}

/* Search Container */
.search-container {
    background: var(--white);
    width: 914px;
    min-height: 92px;
    border-radius: 31px;
    padding: 8px 8px 8px 0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
    margin: 0 auto;
    display: flex;
    position: relative;
}

.search-container .search-form {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    border: none;
}

.search-form .row {
    height: 100%;
    margin: 0;
}

.search-divider {
    width: 1px;
    height: 60%;
    background: #e0e0e0;
}

.search-input-wrapper {
    position: relative;
    padding: 12px 20px;
    background: var(--white);
    border-radius: 0;
    min-height: 76px;
    display: flex;
    flex-direction: column;
}

.search-form .col-md-5:first-child .search-input-wrapper {
    border-radius: 23px 0 0 23px;
}

.search-input-wrapper label {
    display: block;
    font-size: 16px;
    color: var(--text-light);
    margin-bottom: 4px;
    font-weight: 400;
    line-height: 1.2;
    text-align: left;
}

.search-value {
    font-size: 1rem;
    color: var(--text-dark);
    font-weight: 500;
    display: flex;
    /* text-align: center;
    justify-content: center; */
    gap: 8px;
}

.chevron-icon {
    position: absolute;
    right: 20px;
    top: 40%;
    transform: translateY(-40%);
    color: #000000;
    font-size: 1.4rem;
    margin-top: 8px;
    cursor: pointer;
    z-index: 10;
    pointer-events: none;
}

.search-property-select {
    width: 100%;
    border: none;
    background: transparent;
    padding: 0;
    font-size: 1rem;
    color: var(--text-dark);
    font-weight: 500;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    position: relative;
    padding-right: 40px;
    z-index: 5;
}

.search-property-select:focus {
    outline: none;
    box-shadow: none;
}

.search-property-select option {
    color: var(--text-dark);
    background: var(--white);
    padding: 10px;
}

.location-icon {
    border-radius: 16px;
    color: #1B1B1B;
    font-size: 1.2rem;
    background-color: #FEEFE9;
    padding: 4px;
    display: flex;
    position: absolute;
    top: 27px;
    left: -20px;
}

.search-input-wrapper .form-select,
.search-input-wrapper .form-control {
    border: none;
    background: transparent;
    padding: 0;
    font-size: 1rem;
    color: var(--text-dark);
    font-weight: 500;
}

.search-input-wrapper .form-select:focus,
.search-input-wrapper .form-control:focus {
    box-shadow: none;
    outline: none;
}

.btn-search {
    background: var(--primary-orange);
    color: var(--white);
    border: none;
    border-radius: 50px;
    font-weight: 400;
    font-size: 1rem;
    padding: 12px 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto;
    min-height: 10px;
    box-shadow: 0 2px 8px rgba(255, 84, 3, 0.3);
    transition: all 0.3s;
}

.btn-search:hover {
    background: #e04a02;
    color: var(--white);
    box-shadow: 0 4px 12px rgba(255, 84, 3, 0.4);
    transform: translateY(-1px);
}

.btn-search i {
    font-size: 1.1rem;
    font-weight: 700;
}

.search-pg-link {
    display: flex;
    justify-content: center;
    margin-top: 20px;
    width: 30%;

}

.btn-search-pid {

    width: 50%;
    border: 1px solid #FF5403;
    background: #FFE5D9;
    color: var(--text-dark);
    padding: 7px;
    border-radius: 100px;
    font-weight: 500;
    font-size: 0.95rem;
    transition: all 0.3s;
}

.btn-search-pid:hover {
    background: #FFD4C2;
    color: var(--text-dark);
}

/* Location Section */
.location-section {
    background: var(--white);
}


.section-title i.bi-house-heart {
    color: var(--primary-pink);
}

.section-title i.bi-person-badge {
    color: var(--primary-orange);
}

.size {
    padding-top: 7px;
    font-size: 36px;
    font-weight: 700;
    color: #333333;
    display: flex;
    align-items: center;
}


.location-card {
    width: 100%;
    height: 300px;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s;
    cursor: pointer;
}

.location-card:hover {
    transform: translateY(-5px);
}

.location-image {
    position: relative;
    width: 100%;
    height: 300px;
    overflow: hidden;
}

.location-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.location-title {

    position: absolute;
    bottom: -9px;
    width: 100%;
    padding: 12px 15px;
    color: #fff;
    font-size: 15px;
    font-weight: 400;
    text-align: center;

    background: linear-gradient(to top,
            rgba(0, 0, 0, 0.7) 0%,
            rgba(0, 0, 0, 0.3) 50%,
            rgba(0, 0, 0, 0) 100%);
}

/* Statistics Section */
.stats-section {
    background: #F06A37;
    height: 70px;
}

.stat-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 1.1rem;
    font-weight: 400;
    color: var(--white);
}

.stat-item i {
    color: var(--white);
    font-size: 1.5rem;
}

/* Recommended PG Section */
.recommended-section {
    background: var(--white);
}

.recommended-section .section-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-dark);
    margin: 0;
}

.see-all-link {
    color: var(--text-dark);
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
}

.see-all-link:hover {
    color: var(--primary-orange);
}

.pg-card {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s;
    background: var(--white);
    display: flex;
    flex-direction: column;
}

.pg-card:hover {
    transform: translateY(-5px);
}

.pg-image-wrapper {
    position: relative;
    width: 100%;
    height: 200px;
    overflow: hidden;
    flex-shrink: 0;
}

.pg-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px 12px 0 0;
}

.pg-family-tag {
    position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(240, 240, 240, 0.95);
    color: #666666;
    padding: 6px 12px;
    border-radius: 5px;
    font-size: 0.75rem;
    font-weight: 500;
    z-index: 3;
    backdrop-filter: blur(4px);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    white-space: nowrap;
    display: block;
}

.pg-family-tag-pid {
    position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(255, 255, 255, 1);
    color: #676767;
    padding: 6px 12px;
    border-radius: 5px;
    font-size: 0.75rem;
    font-weight: 500;
    z-index: 3;
    backdrop-filter: blur(4px);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    white-space: nowrap;
    display: block;
}

.heart-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    z-index: 2;
    backdrop-filter: blur(4px);
}

.heart-btn i {
    color: #666666;
    font-size: 1.1rem;
}

.pg-content {
    padding: 18px 15px 0px;
    background: var(--white);
    border-radius: 0 0 12px 12px;
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.pg-content::before {
    content: '';
    position: absolute;
    top: -18px;
    left: 0;
    right: 0;
    height: 20px;
    background: var(--white);
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}

.pg-pid {
    font-size: 0.85rem;
    color: #333333;
    margin-bottom: 8px;
    font-weight: 500;
}

.pg-price-wrapper {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    flex-wrap: nowrap;
}

.pg-price-amount {
    font-size: 20px;
    font-weight: 700;
    color: rgba(51, 51, 51, 1);
    line-height: 1.2;
    font-family: Konnect;
}

.pg-price-month {
    font-size: 12px;
    font-weight: 400;
    color: #666666;
    line-height: 1.2;
}

.pg-verified-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #009960;
    color: var(--white);
    padding: 4px 8px;
    border-radius: 1105.44px;
    font-size: 11px;
    font-weight: 700;
    margin-left: 4px;
    white-space: nowrap;
    letter-spacing: 0.99px;
    line-height: 140%;
}

.pg-verified-badge-nearby {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #009960;
    color: var(--white);
    padding: 4px 8px;
    border-radius: 1105.44px;
    font-size: 10px;
    font-weight: 700;
    margin-left: 4px;
    white-space: nowrap;
    letter-spacing: 0.99px;
    line-height: 140%;
}

.pg-verified-badge-list {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: #009960;
    color: var(--white);
    padding: 8px 4px 4px 4px;
    border-radius: 1105.44px;
    font-size: 10px;
    font-weight: 700;
    margin-left: 0px;
    white-space: nowrap;
    letter-spacing: 0.99px;
    line-height: 140%;
}

.pg-verified-badge-list i {
    background: white;
    border-radius: 50%;
    color: rgba(0, 153, 96, 1);
    font-size: 0.80rem;

    width: 16px;
    height: 16px;

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

    padding: 0;

}

.pg-verified-badge i {
    background: white;
    border-radius: 50%;
    color: rgba(0, 153, 96, 1);
    font-size: 0.65rem;

    width: 16px;
    height: 16px;

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

    padding: 0;
}


.pg-verified-badge-pid {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(103, 103, 103, 1);
    color: var(--white);
    padding: 4px 8px;
    border-radius: 1105.44px;
    font-size: 11px;
    font-weight: 700;
    margin-left: 4px;
    white-space: nowrap;
    letter-spacing: 0.99px;
    line-height: 140%;
}


.pg-verified-badge-pid i {
    background: white;
    border-radius: 50%;
    color: rgba(0, 153, 96, 1);
    font-size: 0.65rem;

    width: 16px;
    height: 16px;

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

    padding: 0;

}

.pg-type {
    font-weight: 500;
    color: #333333;
    margin-bottom: 6px;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    line-height: 1.3;
}

.pg-location {
    font-size: 0.85rem;
    color: #666666;
    margin-bottom: 6px;
    line-height: 1.4;
}

.pg-listed {
    font-size: 0.75rem;
    font-weight: 500;
    color: #676767;
    margin-top: auto;
    padding-top: 6px;
    padding-bottom: 6px;
}


.pg-listed-pid {
    font-size: 0.75rem;
    color: #676767;
    padding-top: 8px;
    padding-left: 15px;
    padding-bottom: 8px;
    margin-top: 8px;
    background: linear-gradient(to right,
            #ecebe9 0%,
            #ffffff 100%);
    border-bottom-right-radius: 11.05px;
    border-bottom-left-radius: 11.05px;
}

.read-more-link {
    color: var(--primary-orange);
    text-decoration: none;
    font-weight: 500;
}

/* Flatmate Recommended Section Cards */
.flatmate-card {
    background: #FFFFFF;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.flatmate-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.flatmate-image-wrapper {
    position: relative;
    width: 100%;
    height: 200px;
    overflow: hidden;
    flex-shrink: 0;
}

.flatmate-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px 8px 0 0;
}

.flatmate-content {
    padding: 18px 15px 15px;
    background: var(--white);
    border-radius: 0 0 8px 8px;
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.flatmate-content::before {
    content: '';
    position: absolute;
    top: -18px;
    left: 0;
    right: 0;
    height: 20px;
    background: var(--white);
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}

.flatmate-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.flatmate-pid {
    font-size: 0.85rem;
    color: #666666;
    font-weight: 500;
    font-family: 'Poppins', sans-serif;
}

.flatmate-category {
    font-size: 0.8rem;
    color: #999999;
    font-weight: 400;
    font-family: 'Poppins', sans-serif;
    text-align: right;
}

.flatmate-price {
    margin-bottom: 8px;
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.flatmate-price-amount {
    font-size: 1.1rem;
    font-weight: 700;
    color: #000000;
    font-family: 'Poppins', sans-serif;
    line-height: 1.2;
}

.flatmate-price-period {
    font-size: 0.85rem;
    font-weight: 400;
    color: #666666;
    font-family: 'Poppins', sans-serif;
}

.flatmate-description {
    font-size: 0.9rem;
    font-weight: 400;
    color: #333333;
    margin-bottom: 8px;
    line-height: 1.4;
    font-family: 'Poppins', sans-serif;
}

.flatmate-location {
    font-size: 0.85rem;
    color: #666666;
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 400;
}

.flatmate-location i {
    color: #F06A37;
    font-size: 0.9rem;
}

/* Assistance Section */
.assistance-section {
    position: relative;
    background-color: #fff;
    /* fallback */
    overflow: hidden;
    min-height: 500px;
    /* IMPORTANT: gives space to show image */
}

.assistance-section::after {
    content: "";
    position: absolute;
    top: 140px;
    right: 0px;
    width: 1000px;
    height: 400px;
    background-image: url(../images/images/assistance-image-bg.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: right center;
    z-index: 0;
}

/* keep content visible */
.assistance-section>* {
    position: relative;
    z-index: 1;
}

.assistance-header {
    flex: 1;
    min-width: 0;
    z-index: 1;

}

.fox-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    z-index: 1;

    color: rgba(238, 85, 27, 1);
}

.fox-icon svg {
    width: 100%;
    z-index: 1;

    height: 100%;
}

.assistance-subtitle {
    font-size: 40px;
    color: rgba(238, 85, 27, 1);
    z-index: 1;

    font-weight: 600;
    margin-bottom: 5px;
    line-height: 1.4;
}

.assistance-subtitle-span {
    z-index: 1;

    font-size: 40px;
    color: rgba(51, 51, 51, 1);
    font-weight: 600;
    margin-bottom: 5px;
    line-height: 1.4;
}

.assistance-title {
    z-index: 1;

    font-size: 40px;
    color: rgba(238, 85, 27, 1);
    font-weight: 300;
    font-family: Konnect;
    line-height: 1.2;
    font-style: italic;
}

.btn-assistance {
    z-index: 1;

    background: linear-gradient(to right,
            rgba(51, 51, 51, 1),
            rgba(15, 15, 15, 1));
    color: var(--white);
    border: none;
    padding: 12px 30px;
    border-radius: 26px;
    font-weight: 600;
    font-size: 1rem;
    white-space: nowrap;

}

.assistance-btn-text {
    z-index: 1;

    background: linear-gradient(to right,
            rgba(248, 162, 1, 1),
            rgba(204, 120, 8, 1));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.btn-assistance:hover {
    background: #333;
    color: var(--white);
}

.assistance-cards-wrapper {
    z-index: 1;

    position: relative;
}

.assistance-cards-wrapper .row {
    z-index: 1;

    position: relative;
}

.assistance-cards-row {
    z-index: 1;

    display: flex;
    align-items: flex-start;
    min-height: 250px;
}

.assistance-cards-row>[class*="col-"] {
    z-index: 1;
    display: flex;
    flex-direction: column;
    min-height: 250px;
}

/* Third column - align content to bottom */
.assistance-cards-row>[class*="col-"]:nth-child(3) {
    justify-content: flex-end;
}

/* .assistance-cards-wrapper .row::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 2px;
    background-image: repeating-linear-gradient(to right, #d0d0d0 0, #d0d0d0 6px, transparent 6px, transparent 12px);
    z-index: 0;
    transform: translateY(-50%);
    margin: 0 10%;
    pointer-events: none;
} */

.assistance-box {
    z-index: 1;

    background: var(--white);
    padding: 25px 20px;
    border-radius: 10px;
    text-align: left;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 1;
    border-right: 4px solid transparent;
}

.understanding-box {
    z-index: 1;

    border-right-color: rgba(240, 106, 55, 1);
    border-bottom: 4px solid rgba(240, 106, 55, 1);
    height: 100%;
    min-height: 250px;
}

/* Second card - half height, starts from top */
.assistance-cards-row>[class*="col-"]:nth-child(2) .assistance-box {
    height: 165px;
    min-height: 231px;
    max-height: 125px;
}

/* Third card - half height, positioned at bottom */
.assistance-box-bottom {
    top: 32.5px;
    height: 251px;
    min-height: 125px;
    max-height: 190px;
}

/* Fourth card - half height, same as second, starts from top */
.assistance-box-half {
    padding: 38px;
    height: 165px;
    min-height: 231px;
    max-height: 125px;
}

.assistance-box h5 {
    z-index: 1;

    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 12px;
    font-size: 1.2rem;
}

.assistance-box p {
    z-index: 1;

    color: var(--text-light);
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.6;
}

.assistance-box p strong {
    z-index: 1;

    color: var(--text-dark);
    font-weight: 700;
}

.understanding-box p strong {
    color: var(--primary-orange);
    font-weight: 700;
}

/* Budget Section */
.budget-section {
    background: var(--white);
}

.budget-section-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-dark);
    margin: 0;
}

/* .bdgt{
    width: 10px;
} */

.budget-btn {
    width: 100%;
    max-width: 100%;
    padding: 50px 20px;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: transform 0.3s;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 160px;
}

/* Mobile Budget Scroll */
.budget-scroll {
    display: flex;
    gap: 15px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 10px 0;
    scroll-snap-type: x mandatory;
    margin: 0 0px;
    padding-left: 15px;
    padding-right: 15px;
}

.budget-scroll .budget-btn {
    width: 143px;
    min-height: 104px;
    flex-shrink: 0;
    scroll-snap-align: start;
}

@media (max-width: 767px) {
    .budget-section .container {
        padding-left: 15px;
        padding-right: 15px;
    }

    .budget-section-title {
        padding-left: 0;
        padding-right: 0;
    }

    .budget-scroll {
        margin-right: -15px;
        padding-left: 15px;
        padding-right: 15px;
    }
}

/* Top-left circle */
.budget-btn::before {
    content: "";
    position: absolute;
    width: 100px;
    /* circle size */
    height: 100px;
    background-color: rgba(255, 255, 255, 0.3);
    /* semi-transparent */
    border-radius: 50%;
    top: -30px;
    /* move partially outside */
    left: -30px;
}

/* Bottom-right circle */
.budget-btn::after {
    content: "";
    position: absolute;
    width: 120px;
    height: 120px;
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    bottom: -40px;
    right: -40px;
}

.budget-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.budget-label {
    font-size: 0.95rem;
    font-weight: 600;
    display: block;
    margin-bottom: 5px;
    position: relative;
    z-index: 1;
    line-height: 1.2;
}

.budget-amount {
    font-size: 2.2rem;
    font-weight: 700;
    display: block;
    position: relative;
    z-index: 1;
    line-height: 1;
}

.budget-green {
    background: #97E2C4;
}

.budget-green .budget-label,
.budget-green .budget-amount {
    color: #1D7753;
}

.budget-pink {
    background: #FFACAC;
}

.budget-pink .budget-label,
.budget-pink .budget-amount {
    color: #8C1E20;
}

.budget-purple {
    background: #F2BEF9;
}

.budget-purple .budget-label,
.budget-purple .budget-amount {
    color: #6F2179;
}

.budget-half-white {
    background: #FFF5E4;
}

.budget-half-white .budget-label,
.budget-half-white .budget-amount {
    color: #041533;
}

.budget-light-pink {
    background: #F9DCC4;
}

.budget-light-pink .budget-label,
.budget-light-pink .budget-amount {
    color: #8B470E;
}

/* Rent Out Section */
.rent-out-section {
    background: var(--white);
    position: relative;
}

.rent-out-banner {
    background: #F06A37;
    padding: 50px 40px;
    border-radius: 50px;
    text-align: center;
    position: relative;
}

.rent-out-banner::before {
    content: '';
    position: absolute;
    top: 170px;
    left: 0;
    width: 120px;
    height: 120px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 40px;
    transform: translate(-30%, -30%);
    z-index: 0;
    pointer-events: none;
    opacity: 0.9;
}

.rent-out-banner::after {
    content: '';
    position: absolute;
    bottom: 170px;
    right: 0;
    width: 120px;
    height: 120px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 40px;
    transform: translate(30%, 30%);
    z-index: 0;
    pointer-events: none;
    opacity: 0.9;
}

.calendar-icon-wrapper {
    position: absolute;
    left: -100px;
    top: 50%;
    transform: translateY(-50%);
    width: 75.73px;
    height: 75.73px;
    opacity: 1;
    filter: blur(4px);
    pointer-events: none;
    z-index: 2;
}

.rent-out-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 30px;
    text-align: center;
    position: relative;
    z-index: 1;
}

.rent-out-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}

.btn-rent-out,
.btn-rent-out-whatsapp {
    background: var(--white);
    color: #F06A37;
    border: none;
    padding: 15px 30px;
    border-radius: 26px;
    font-weight: 400;
    font-size: 1.05rem;
    white-space: nowrap;
    transition: all 0.3s;
}

.btn-rent-out-whatsapp i {
    color: #25D366;
}

.btn-rent-out:hover,
.btn-rent-out-whatsapp:hover {
    background: var(--bg-light);
    color: var(--primary-orange);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Tools Section */
.tools-section {
    background: var(--white);
}

.tool-card {
    background: var(--white);
    padding: 30px 20px;
    border-radius: 10px;
    text-align: left;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    height: 100%;
    transition: transform 0.3s;
}

.tool-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.tool-icon-wrapper {
    margin-bottom: 20px;
}

.tool-icon-circle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #FFE5D9;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tool-icon-image {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.tool-title {
    font-weight: 700;
    color: #F06A37;
    margin-bottom: 12px;
    font-size: 1.2rem;
    line-height: 1.3;
}

.tool-description {
    color: #333333;
    margin-bottom: 15px;
    font-size: 0.95rem;
    line-height: 1.6;
}

.tool-link {
    color: #F06A37;
    font-weight: 400;
    font-size: 18px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    text-decoration: underline;
}

.tool-link:hover {
    color: #e04a02;
    text-decoration: none;
}

.tool-link i {
    font-size: 0.85rem;
}


/* Explore Section */
.explore-section {
    background: var(--white);
}

/* Explore Section City Tabs */
.explore-section .city-tabs {
    display: flex !important;
    gap: 10px;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    margin-bottom: 30px;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding-bottom: 5px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    width: 100%;
}

.explore-section .city-tabs::-webkit-scrollbar {
    display: none;
}



/* Mobile containers - hide non-Mohali on mobile */
@media (max-width: 767px) {

    /* Completely hide ALL desktop containers on mobile - override any inline styles and Bootstrap classes */
    .explore-section .city-pg-cards-container,
    .explore-section .city-pg-cards-container.d-md-flex,
    .explore-section .city-pg-cards-container.d-none.d-md-flex,
    .explore-section .city-pg-cards-container[style*="display: flex"],
    .explore-section .city-pg-cards-container[style*="display:flex"] {
        display: none !important;
        visibility: hidden !important;
    }

    /* Mobile containers visibility is controlled by JavaScript via inline styles */
    /* CSS only ensures mobile containers can be shown on mobile */
    .explore-section .city-pg-mobile-container.d-md-none {
        display: flex !important;
    }
}

/* Hide inactive city containers in Flatmate section - default to Mohali */
/* Desktop containers - hide non-Mohali on desktop */
@media (min-width: 768px) {
    .explore-section .city-flatmate-cards-container:not([data-city="Mohali"]) {
        display: none !important;
        visibility: hidden !important;
    }

    .explore-section .city-flatmate-cards-container[data-city="Mohali"] {
        display: flex !important;
        visibility: visible !important;
    }

    /* Hide mobile containers on desktop */
    .explore-section .city-flatmate-mobile-container {
        display: none !important;
        visibility: hidden !important;
    }
}

/* Mobile containers - hide non-Mohali on mobile */
@media (max-width: 767px) {
    .explore-section .city-flatmate-mobile-container:not([data-city="Mohali"]) {
        display: none !important;
        visibility: hidden !important;
    }

    .explore-section .city-flatmate-mobile-container[data-city="Mohali"] {
        display: flex !important;
        visibility: visible !important;
    }

    /* Hide desktop containers on mobile - override any inline styles and Bootstrap classes */
    .explore-section .city-flatmate-cards-container,
    .explore-section .city-flatmate-cards-container.d-md-flex,
    .explore-section .city-flatmate-cards-container.d-none.d-md-flex,
    .explore-section .city-flatmate-cards-container[data-city="Mohali"],
    .explore-section .city-flatmate-cards-container[data-city="Chandigarh"],
    .explore-section .city-flatmate-cards-container[style*="display: flex"],
    .explore-section .city-flatmate-cards-container[style*="display:flex"] {
        display: none !important;
        visibility: hidden !important;
    }
}

.city-tabs {
    display: flex;
    gap: 10px;
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-bottom: 30px;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding-bottom: 5px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.city-tabs::-webkit-scrollbar {
    display: none;
}

@media (max-width: 767px) {

    .image_home {
        display: none !important;
    }

    .image_home1 {
        display: none !important;
    }

    .explore-section .city-tabs {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        margin-left: 0px;
        margin-right: -15px;
        padding-left: 15px;
        padding-right: 15px;
        scrollbar-width: none;
        -ms-overflow-style: none;
        width: calc(100% + 30px);
    }

    .explore-section .city-tabs::-webkit-scrollbar {
        display: none !important;
    }

    .city-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin-left: -15px;
        margin-right: -15px;
        padding-left: 15px;
        padding-right: 15px;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .city-tabs::-webkit-scrollbar {
        display: none;
    }

    .explore-section .container {
        padding-left: 15px;
        padding-right: 15px;
    }

    .explore-section .section-title {
        padding-left: 0;
        padding-right: 0;
    }
}

.city-tab {
    background: var(--white);
    border: 2px solid #e0e0e0;
    padding: 10px 20px;
    border-radius: 10px;
    font-weight: 500;
    color: var(--text-dark);
    cursor: pointer;
    transition: all 0.3s;
    white-space: nowrap;
    font-size: 0.95rem;
    flex-shrink: 0 !important;
    scroll-snap-align: start;
    min-width: fit-content;
}

.city-tab.active {
    background: var(--primary-orange);
    color: var(--white);
    border-color: var(--primary-orange);
}

.city-tab:hover:not(.active) {
    border-color: var(--primary-orange);
}

/* Mobile specific styles for explore section city tabs */
@media (max-width: 767px) {
    .explore-section .city-tab {
        background: var(--white) !important;
        border: 2px solid #e0e0e0 !important;
        color: var(--text-dark) !important;
        flex-shrink: 0 !important;
        min-width: fit-content !important;
        height: 35px;
        padding: 7px;
        font-size: 12px;
    }

    .explore-section .city-tab.active {
        background: #333333 !important;
        color: var(--white) !important;
        border-color: #333333 !important;
        height: 35px;
        padding: 7px;
        font-size: 12px;
    }

    .explore-section .city-tab:hover:not(.active) {
        border-color: #333333;
    }
}

.explore-card {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background: var(--white);
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid #D9D9D9;
}

.explore-image {
    position: relative;
    width: 100%;
    height: 280px;
    overflow: hidden;
    flex: 1;
}

.explore-image img {
    width: 104%;
    height: 106%;
    display: block;
    object-fit: cover;
}



.explore-title {
    position: absolute;
    top: 15px;
    left: 18px;
    z-index: 2;
    font-size: 0.95rem;
    font-weight: 600;
    color: #000000;
    line-height: 1.3;
    margin: 0;
    max-width: calc(100% - 36px);
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
}

/* Mobile Explore Cards Scroll */
.explore-scroll {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 10px 0;
    scroll-snap-type: x mandatory;
    margin: 0 0px;
    padding-left: 15px;
    padding-right: 15px;
}

.explore-card-mobile {
    position: relative;
    min-width: 200px;
    max-width: 280px;
    border: 1px solid rgba(240, 106, 55, 1);
    border-radius: 12px;
    overflow: hidden;
    background: var(--white);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    scroll-snap-align: start;
    height: 130px;
}

.explore-card-mobile .explore-image {
    position: relative;
    width: 100%;
    height: 200px;
    overflow: hidden;
    flex: 1;
}

.explore-card-mobile .explore-image img {
    width: 100%;
    height: 130px;
    object-fit: cover;
}

.explore-card-mobile .explore-title {
    position: absolute;
    top: 6px;
    left: 2px;
    z-index: 2;
    font-size: 10px;
    font-weight: 600;
    color: rgba(51, 51, 51, 1);
    line-height: 1.3;
    margin: 0;
}

.explore-card-mobile-rent {
    position: relative;
    min-width: 180px;
    max-width: 180px;
    border-radius: 12px;
    overflow: hidden;
    background: var(--white);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    scroll-snap-align: start;
    height: 236px;
}

.explore-card-mobile-rent .explore-image {
    position: relative;
    width: 100%;
    height: 233px;
    overflow: hidden;
    flex: 1;
}

.explore-card-mobile-rent .explore-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.explore-card-mobile-rent .explore-title {
    position: absolute;
    top: 15px;
    left: 15px;
    z-index: 2;
    font-size: 15px;
    font-weight: 600;
    color: rgba(51, 51, 51, 1);
    line-height: 1.3;
    margin: 0;
}


/* Download Section */
.badge-pill {
    position: relative;
    display: inline-block;
    background-color: #F06A37;
    color: #ffffff;
    padding: 8px 20px;
    border-radius: 50px;
    font-size: 16px;
    top: -10px;
    font-family: Konnect;
    font-style: regular;
    font-weight: 400;
    font-size: 16px;
    line-height: 120%;
    letter-spacing: 0%;
}

.download-section {
    position: relative;
    background: var(--white);
    background-image: url('../images/wave-pattern.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #333333;
    font-weight: 400;
    font-size: 18px;
    line-height: 160%;
    font-style: regular;
    font-family: Konnect;
    font: bold;
}

.section-title {
    font-family: Konnect;
    font-weight: 700;
    font-style: bold;
    font-size: 30px;
    line-height: 120%;
    letter-spacing: 0%;
    position: relative;
}

.d-section-content {
    max-width: 600px;
    /* Adjust this value to fit the pink background */
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box;
}

.phone-mockup {
    text-align: center;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: -10px;
}

.phone-mockup::after {
    position: absolute;

    right: 50px;
    font-size: 2rem;
    z-index: 0;
}

.phone-mockup .phone-1 {
    width: 580px;
    height: 480px;
    transform: rotate(-1deg);
    z-index: 0;
    position: relative;
    top: -40px;
}


.download-description {
    position: relative;
    color: var(--text-light);
    font-size: 0.85rem;
    line-height: 1.8;
}

.app-badges {
    position: relative;
    display: flex;
    flex-wrap: wrap;
}

.app-badge img {
    position: relative;
    height: 50px;
    width: auto;
}


/* Top Cities Section */
.top-cities-section {
    background: var(--white);
    padding: 60px 0;
}

.top-cities-header {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 30px;
}

.top-cities-header-content {
    flex: 1;
}

.top-cities-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-dark);
    margin: 0 0 10px 0;
    padding: 0;
    position: relative;
    z-index: 1;
    line-height: 1.2;
    text-align: left;
}

.top-cities-subtitle {
    font-size: 0.95rem;
    font-weight: 400;
    color: #666666;
    margin: 0;
    line-height: 1.5;
    text-align: left;
}

.top-cities-nav-buttons {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-left: 20px;
}

.top-cities-highlight {
    color: var(--primary-orange);
}

.city-tabs-wrapper {
    position: relative;
    margin-bottom: 30px;
}

.city-tabs-divider {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: #e0e0e0;
    z-index: 0;
}

.city-tabs {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    overflow-x: auto;
    margin-bottom: 0;
    padding-bottom: 15px;
    -webkit-overflow-scrolling: touch;
}

.top-cities-section .city-tab {
    background: transparent;
    border: none;
    padding: 10px 20px;
    border-radius: 0;
    font-weight: 500;
    color: var(--text-dark);
    cursor: pointer;
    transition: all 0.3s;
    white-space: nowrap;
    font-size: 0.95rem;
    position: relative;
    margin-right: 20px;
}

.top-cities-section .city-tab.active {
    background: transparent;
    color: var(--text-dark);
    font-weight: 700;
}

.top-cities-section .city-tab.active::after {
    content: '';
    position: absolute;
    bottom: -16px;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--primary-orange);
    z-index: 2;
}

.top-cities-section .city-tab:hover:not(.active) {
    color: var(--primary-orange);
}

.top-cities-content-wrapper {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.carousel-nav-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
    color: var(--text-dark);
    font-size: 1.2rem;
    flex-shrink: 0;
}

.carousel-nav-btn:hover {
    background: var(--primary-orange);
    border-color: var(--primary-orange);
    color: var(--white);
}

.top-cities-nav-buttons .carousel-nav-btn {
    position: static;
    transform: none;
}

.top-cities-content-wrapper .carousel-nav-left {
    position: absolute;
    left: -50px;
    top: 50%;
    transform: translateY(-50%);
}

.top-cities-content-wrapper .carousel-nav-right {
    position: absolute;
    right: -50px;
    top: 50%;
    transform: translateY(-50%);
}

.top-cities-cards {
    flex: 1;
    margin: 0;
}

.top-cities-cards .col-md-3 {
    padding-left: 0px;
    padding-right: 18px;
}

.city-list-card {
    width: 104%;
    max-width: 98%;
    background: var(--white);
    padding: 20px;
    border-radius: 12px;
    height: 100%;
}

.city-list-title {
    font-weight: 700;
    color: #000000;
    margin-bottom: 15px;
    font-size: 1.1rem;
    text-align: left;
}

.city-list {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
}

.city-list li {
    margin-bottom: 8px;
    position: relative;
    padding-left: 15px;
}

.city-list li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: #000000;
    font-size: 1rem;
    line-height: 1.5;
    font-weight: 700;
}

.city-list a {
    color: #000000;
    text-decoration: none;
    font-size: 0.95rem;
    transition: color 0.3s;
    line-height: 1.5;
    font-weight: 400;
}

.city-list a:hover {
    color: var(--primary-orange);
}

/* Testimonials Section */
.testimonials-section {
    background: var(--white);
    padding: 60px 0;
}

.tsection-title {
    font-family: Konnect;
    font-size: 40px;
    font-weight: 700;
    line-height: 120%;
    text-align: center;
    margin-bottom: 20px;
    color: #333333;
}

.text_t {
    color: #F06A37;
}

.testimonial-description {
    font-family: Konnect;
    font-size: 18px;
    font-weight: 400;
    line-height: 160%;
    color: #666666;
    max-width: 800px;
    margin: 0 auto 40px;
}

.testimonials-carousel {
    position: relative;
}

.testimonial-track {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 10px 0 20px;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.testimonial-track::-webkit-scrollbar {
    display: none;
}

.testimonial-card {
    background: var(--white);
    padding: 30px 25px;
    border-radius: 10px;
    min-width: 600px;
    height: 100%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    min-height: 280px;
    display: flex;
    flex-direction: column;
    scroll-snap-align: start;
}

.stars {
    color: rgba(255, 187, 14, 1);
    font-size: 20px;
    display: flex;
    gap: 2px;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e6e6e6;
}

.stars .bi-star-fill {
    color: rgba(255, 187, 14, 1);
}

.testimonial-text {
    color: #666666;
    font-family: Konnect;
    font-size: 16px;
    font-weight: 400;
    line-height: 160%;
    margin-bottom: 25px;
    flex-grow: 1;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: auto;
}

.author-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.author-name {
    font-family: Konnect;
    font-weight: 700;
    font-size: 16px;
    color: #333333;
    margin-bottom: 2px;
}

.author-designation {
    font-family: Konnect;
    font-size: 14px;
    font-weight: 400;
    color: #666666;
}

.testimonial-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 30px;
}

.pagination-dot-1 {
    width: 102px;
    height: 4px;
    border-radius: 2px;
    background-color: transparent;
    border: 2px solid #F06A37;
    cursor: pointer;
    transition: all 0.3s;
}

.pagination-dot-2 {
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background-color: transparent;
    border: 1px solid #F06A37;
    cursor: pointer;
    transition: all 0.3s;
}

.pagination-dot-3 {
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background-color: transparent;
    border: 1px solid #F06A37;
    cursor: pointer;
    transition: all 0.3s;
}

.pagination-dot.active,
.pagination-dot-1.active,
.pagination-dot-2.active,
.pagination-dot-3.active {
    background-color: #F06A37;
    border-color: #F06A37;
}

/* Footer */
.footer-section {
    background: #333333;
    border-top: 1px solid var(--border-color);
    padding: 40px 0 20px;
}

.footer-brand h4 {
    color: var(--text-dark);
    font-size: 1.5rem;
    margin: 0;
}

.footer-logo-img {
    max-width: 200px;
    height: auto;
    display: block;
}

.footer-description {
    color: #FFFFFF;
    font-size: 0.9rem;
    margin-bottom: 15px;
}

.social-icons {
    display: flex;
    gap: 15px;
}

.social-icons a {
    color: #FFFFFF;
    font-size: 1.5rem;
    transition: color 0.3s;
}

.social-icons a:hover {
    color: var(--primary-orange);
}

.footer-heading {
    font-size: 1rem;
    font-weight: 600;
    color: #FFFFFF;
    margin-bottom: 15px;
}

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

.footer-links li {
    margin-bottom: 10px;
}

.footer-links a {
    color: #FFFFFF;
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.3s;
}

.footer-links a:hover {
    color: var(--primary-orange);
}

.contact-info p {
    color: #FFFFFF;
    font-size: 0.9rem;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}

.contact-info i {
    color: #FFFFFF;
}

.app-badges-footer {
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
}

.app-badge-footer {
    display: inline-flex;
    width: 48px;
    height: 48px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 12px;
    background: transparent;
    padding: 12px;
    transition: all 0.3s;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.app-badge-footer:hover {
    border-color: rgba(255, 255, 255, 0.6);
    transform: translateY(-2px);
    text-decoration: none;
}

.app-badge-footer img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.footer-bottom {
    border-top: 1px solid #FFFFFF;
    padding-top: 20px;
    padding-bottom: 80px;
    position: relative;
    overflow: hidden;
    min-height: 140px;
}

.footer-bottom-images-wrapper {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    z-index: 0;
    margin: 0;
    padding: 0;
    pointer-events: none;
}

.footer-bottom-image {
    width: calc(100vw / 6);
    height: auto;
    display: block;
    object-fit: cover;
    object-position: bottom;
    opacity: 0.3;
    flex-shrink: 0;
    margin: 0;
    padding: 0;
}

.footer-bottom p {
    position: relative;
    z-index: 1;
}



.footer-bottom p {
    color: #FFFFFF;
    font-size: 0.85rem;
    margin: 0;
    position: relative;
    z-index: 1;
}


/* Mobile Footer - White Background */
@media (max-width: 767px) {
    .city-tab {
        padding: 4px 10px;
    }

    .footer-section {
        background: var(--white);
        color: var(--text-dark);
    }
}

/* Mobile Footer Styles */
.mobile-footer-section {
    background: var(--white);
    padding: 24px 0 0;
    display: none !important;
}

@media only screen and (max-width: 767.98px) {
    .mobile-footer-section {
        display: block !important;
    }
}

@media (min-width: 768px) {
    .mobile-footer-section {
        display: none !important;
    }
}

.mobile-footer-content {
    padding: 0 16px 0;
}

.mobile-footer-brand {
    margin-bottom: 16px;
}

.mobile-footer-logo-img {
    height: 40px;
    width: auto;
    object-fit: contain;
}

.mobile-footer-main-tagline {
    font-size: 0.875rem;
    color: var(--text-dark);
    margin-bottom: 20px;
    line-height: 1.5;
}

.mobile-footer-section-group {
    margin-bottom: 20px;
}

.mobile-footer-heading {
    font-size: 0.9375rem;
    font-weight: bold;
    color: var(--text-dark);
    margin-bottom: 10px;
}

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

.mobile-footer-link {
    font-size: 0.8125rem;
    color: var(--text-dark);
    text-decoration: none;
    transition: color 0.3s;
}

.mobile-footer-link:hover {
    color: var(--primary-orange);
}

.mobile-footer-separator {
    font-size: 0.8125rem;
    color: var(--text-light);
    margin: 0 4px;
}

.mobile-footer-social-icons {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
    padding-top: 8px;
}

.mobile-social-icon {
    color: var(--text-dark);
    font-size: 1.25rem;
    text-decoration: none;
    transition: color 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mobile-social-icon:hover {
    color: var(--primary-orange);
}

.mobile-footer-copyright {
    background: #FFF5F0;
    padding: 16px;
    margin: 0 -16px 0;
    text-align: center;
}

.mobile-footer-copyright p {
    font-size: 0.75rem;
    color: var(--text-dark);
    margin: 0;
}

/* Responsive Design */
@media (max-width: 992px) {

    .phone-mockup .phone-1,
    .phone-mockup .phone-2 {
        max-width: 200px;
    }

    .phone-mockup .phone-2 {
        margin-left: -60px;
    }
}

@media (max-width: 992px) {
    .search-container {
        width: 100%;
        max-width: 914px;
        height: auto;
        min-height: 92px;
    }

    .phone-mockup .phone-1,
    .phone-mockup .phone-2 {
        max-width: 200px;
    }

    .phone-mockup .phone-2 {
        margin-left: -60px;
    }
}

@media (max-width: 768px) {
    .hero-title {
        font-size: 2rem;
    }

    .hero-subtitle {
        font-size: 1rem;
    }

    .section-title {
        font-size: 1.5rem;
    }

    .budget-btn {
        min-height: 140px;
        padding: 40px 15px;
    }

    .budget-amount {
        font-size: 2rem;
    }

    .budget-label {
        font-size: 0.9rem;
    }

    .search-container {
        width: 100%;
        height: auto;
        border-radius: 20px;
        min-height: auto;
    }

    .search-tabs {
        flex-wrap: wrap;
        gap: 5px;
    }

    .tab-btn {
        padding: 8px 16px;
        font-size: 0.9rem;
    }

    .search-form .row {
        flex-direction: column;
    }

    .search-form .col-md-2 {
        width: 100%;
    }

    .search-input-wrapper {
        min-height: 60px;
    }

    .btn-search {
        border-radius: 0 0 20px 20px;
        padding: 15px;
        min-height: 50px;
    }

    .search-divider {
        display: none;
    }

    .budget-btn {
        padding: 30px 15px;
        font-size: 1.2rem;
    }

    .city-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .assistance-section .d-flex {
        flex-direction: column;
        align-items: flex-start !important;
    }

    .btn-assistance {
        margin-top: 20px;
    }

    .phone-mockup {
        flex-direction: column;
        gap: 20px;
    }

    .phone-mockup .phone-1,
    .phone-mockup .phone-2 {
        transform: rotate(0deg);
        margin-left: 0;
        max-width: 200px;
    }

    .phone-mockup::after {
        display: none;
    }
}

@media (max-width: 576px) {
    .hero-title {
        font-size: 1.75rem;
    }

    .hero-subtitle {
        font-size: 0.9rem;
    }

    .navbar-brand h4 {
        font-size: 1.2rem;
    }

    .btn-download,
    .btn-list {
        padding: 6px 12px;
        font-size: 0.85rem;
    }

    .user-icon {
        font-size: 1.5rem;
    }

    .location-image {
        height: 150px;
    }

    .pg-image-wrapper {
        height: 150px;
    }

    .assistance-icon {
        width: 60px;
        height: 60px;
    }

    .assistance-icon i {
        font-size: 2rem;
    }

    .search-container {
        padding: 15px;
    }

    .tab-btn {
        padding: 10px 15px;
        font-size: 0.9rem;
    }

    .budget-section-title {
        font-size: 1.5rem;
    }

    .budget-btn {
        min-height: 120px;
        padding: 35px 15px;
    }

    .budget-amount {
        font-size: 1.8rem;
    }

    .budget-label {
        font-size: 0.85rem;
    }

    .rent-out-title {
        font-size: 1.4rem;
    }

    .rent-out-banner {
        padding: 30px 20px;
    }

    .btn-rent-out,
    .btn-rent-out-whatsapp {
        padding: 12px 20px;
        font-size: 0.95rem;
    }
}

/* Mobile App Banner */
.mobile-app-banner {
    background: #F5F5F5;
    border-bottom: 1px solid #e0e0e0;
}

.logo-icon-small {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mobile-banner-logo-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.banner-text {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-dark);
    line-height: 1.2;
}

.banner-rating {
    font-size: 0.75rem;
    color: var(--text-light);
}

/* Mobile Recent Search (shared header) */
.mobile-recent-search {
    background: var(--white);
    padding: 10px 0;
}

.mobile-recent-search .recent-search-tags {
    display: flex;
    align-items: center;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    flex-wrap: nowrap !important;
    width: 100%;
    padding: 6px 2px;
}

/* hide scrollbar but keep scroll */
.mobile-recent-search .recent-search-tags::-webkit-scrollbar {
    display: none;
}

.mobile-recent-search .recent-search-tags {
    scrollbar-width: none;
    /* firefox */
}

.recent-search-heading {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    padding-right: 6px;
}

.recent-search-icon {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #F3F3F3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #666666;
    flex: 0 0 auto;
}

.mobile-recent-search .recent-search-label {
    font-size: 12px;
    color: rgba(102, 102, 102, 1);
    font-weight: 500;
    line-height: 1;
    margin: 0;
    white-space: nowrap;
}

.mobile-recent-search .recent-search-tag {
    display: inline-flex;
    align-items: center;
    height: 34px;
    padding: 0 12px;
    background: #ffffff;
    border-radius: 18px;
    color: rgba(51, 51, 51, 1);
    font-size: 12px;
    font-weight: 500;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.10);
    flex: 0 0 auto;
    white-space: nowrap;
}

/* Mobile Credit Card Banner (after recent search) */
.mobile-credit-banner {
    background: var(--white);
    padding: 10px 0 14px;
}

.credit-banner-card {
    position: relative;
    border-radius: 12px;
    background: linear-gradient(90deg, #1E1E1E 0%, #2B2B2B 60%, #3A3A3A 100%);
    overflow: hidden;
    padding: 14px 14px 14px 14px;
    min-height: 92px;
}

.credit-banner-text {
    position: relative;
    z-index: 2;
    max-width: 70%;
}

.credit-banner-title {
    font-size: 16px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.15;
    margin-bottom: 4px;
}

.credit-banner-accent {
    color: #FF9A3D;
}

.credit-banner-subtitle {
    font-size: 11px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 10px;
    line-height: 1.2;
}

.credit-banner-btn {
    background: #ffffff;
    color: #2B2B2B;
    border: none;
    border-radius: 6px;
    padding: 7px 14px;
    font-size: 12px;
    font-weight: 400;
    line-height: 1;
}

.credit-banner-image {
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translateY(-50%);
    height: 120%;
    width: auto;
    opacity: 0.35;
    pointer-events: none;
    z-index: 1;
}

.btn-use-app {
    background: var(--primary-orange);
    color: var(--white);
    border: none;
    padding: 6px 12px;
    border-radius: 5px;
    font-size: 0.85rem;
    font-weight: 600;
}

.btn-close-banner {
    background: none;
    border: none;
    color: var(--text-dark);
    font-size: 1.2rem;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Mobile Hero Section */
.mobile-hero {
    padding: 20px 15px;
}

.hero-title-mobile {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text-dark);
    font-weight: 600;
    margin: 0;
}

.mobile-tabs {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 5px;
}

.mobile-tab {
    background: none;
    border: none;
    padding: 8px 16px;
    font-size: 0.95rem;
    color: var(--text-light);
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    cursor: pointer;
}

.mobile-tab.active {
    color: var(--primary-orange);
    border-bottom-color: var(--primary-orange);
}

.mobile-search-bar {
    display: flex;
    gap: 10px;
    background: var(--white);
    border-radius: 30px;
    padding: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.mobile-search-bar .form-control {
    border: none;
    background: transparent;
    flex: 1;
    font-size: 0.95rem;
}

.mobile-search-bar .form-control:focus {
    box-shadow: none;
    outline: none;
}

.btn-mobile-search {
    background: var(--primary-orange);
    color: var(--white);
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.btn-search-pid1 {
    width: 100%;
    background: var(--white);
    color: var(--text-dark);
    border: 1px solid #e0e0e0;
    padding: 10px;
    border-radius: 8px;
    font-weight: 500;
}

/* Recent Searches */
.recent-searches {
    margin-top: 20px;
}

.recent-search-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-dark);
}

.recent-search-tags {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.recent-tag {
    background: #F5F5F5;
    border: 1px solid #e0e0e0;
    border-radius: 20px;
    padding: 8px 16px;
    font-size: 0.85rem;
    color: var(--text-dark);
    white-space: nowrap;
    cursor: pointer;
}

/* Hide Scrollbars on Mobile */
.pg-scroll,
.brokers-scroll,
.explore-scroll,
.budget-scroll,
.city-tabs,
.recent-search-tags {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.pg-scroll::-webkit-scrollbar,
.brokers-scroll::-webkit-scrollbar,
.explore-scroll::-webkit-scrollbar,
.budget-scroll::-webkit-scrollbar,
.city-tabs::-webkit-scrollbar,
.recent-search-tags::-webkit-scrollbar {
    display: none;
}

/* Mobile Scrollable PG Cards */
.pg-scroll {
    display: flex;
    gap: 15px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 10px 0;
    scroll-snap-type: x mandatory;
}

.pg-scroll-m {
    display: flex;
    gap: 15px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 10px 0;
    margin-left: 18px;
    scroll-snap-type: x mandatory;
}

.pg-card-mobile {
    min-width: 280px;
    background: var(--white);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    scroll-snap-align: start;
    flex-shrink: 0;
}

.pg-card-mobile .pg-image-wrapper {
    height: 180px;
}

.pg-card-mobile .pg-content {
    padding: 12px;
}

.pg-card-mobile .pg-pid {
    margin-bottom: -4px;
    font-size: 0.8rem;
}

.pg-card-mobile .pg-price {
    font-weight: 600;
    font-size: 1rem;
    margin: 5px 0px 5px 0px;
}

.pg-card-mobile .pg-price-list {
    font-weight: 600;
    font-size: 13px;
    margin: 5px 0px 5px 0px;
}

.pg-card-mobile .pg-price-list-text {
    font-weight: 400;
    font-size: 13px;
    margin: 5px 0px 5px 0px;
    color: #676767;

}



.pg-card-mobile .pg-type {
    font-size: 0.9rem;
    margin: 0px 0;
}

.pg-card-mobile .pg-location {
    font-size: 0.85rem;
    margin: 5px 0px -8px 0px;
}

.pg-card-mobile .pg-listed {
    font-size: 0.8rem;
    margin-top: 5px;
}

/* Section Title Mobile */
.section-title-mobile {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-dark);
}

/* Recommended Brokers Section */
.brokers-section {
    background: var(--white);
}

.brokers-scroll {
    display: flex;
    gap: 15px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0px 15px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.brokers-scroll::-webkit-scrollbar {
    display: none;
}

.broker-card {
    min-width: 240px;
    max-width: 240px;
    background: #F5F5F0;
    border-radius: 20px;
    padding: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    scroll-snap-align: start;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    position: relative;
    border: 1px solid rgba(255, 107, 53, 0.2);

}

.broker-avatar-wrapper {
    display: flex;
    justify-content: center;
    margin-top: -40px;
    margin-bottom: 10px;
    position: relative;
    z-index: 1;
    bottom: -30px;
}

.broker-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid #F5F5F0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.broker-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.broker-content {
    padding: 50px 15px 0 15px;
    text-align: center;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.broker-company {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-light);
    margin-bottom: 5px;
}

.broker-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 5px;
}

.broker-member {
    font-size: 0.8rem;
    color: var(--text-light);
    margin-bottom: 12px;
}

.broker-tag {
    display: inline-block;
    background: #FFE5D9;
    color: var(--text-dark);
    padding: 6px 12px;
    border-radius: 15px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: 15px;
    align-self: center;
}

.broker-footer {
    margin-top: auto;
    background: #F0E6E0;
    padding: 12px;
    border-radius: 0 0 20px 20px;
}

.btn-view-details {
    width: 100%;
    background: transparent;
    color: var(--text-dark);
    border: none;
    padding: 8px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}

/* Recent News & Articles Section */
.news-section {
    background: var(--white);
    overflow-x: hidden;
    width: 100%;
}

.news-section .container-fluid {
    overflow-x: hidden;
    width: 100%;
}

.news-images-scroll {
    display: flex;
    gap: 15px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    margin: 0 -15px;
    padding: 0 15px;
}

.news-images-scroll::-webkit-scrollbar {
    display: none;
}

.news-image-placeholder {
    min-width: 280px;
    max-width: 280px;
    flex-shrink: 0;
    scroll-snap-align: start;
    border: none;
    outline: none;
}

.news-image-placeholder img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    display: block;
    border: none;
    outline: none;
    box-shadow: none;
}

/* Bottom Property Navigation */
.bottom-nav-section {
    background: var(--white);
    border-top: 1px solid #e0e0e0;
}

.property-type-tabs {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 5px;
}

.property-tab {
    background: none;
    border: none;
    padding: 8px 16px;
    font-size: 0.9rem;
    color: var(--text-light);
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    cursor: pointer;
}

.property-tab.active {
    color: var(--primary-orange);
    border-bottom-color: var(--primary-orange);
    font-weight: 600;
}

.location-lists {
    margin-top: 20px;
}

.location-list-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 10px;
}

.location-list-mobile {
    list-style: none;
    padding: 0;
    margin: 0;
}

.location-list-mobile li {
    margin-bottom: 8px;
}

.location-list-mobile a {
    font-size: 0.85rem;
    color: var(--text-light);
    text-decoration: none;
}

/* Hide desktop sections on mobile */
@media (max-width: 767px) {

    .location-section,
    .stats-section,
    .assistance-section,
    .download-section,
    .testimonials-section {
        display: none !important;
    }

    .recommended-section .row {
        display: none;
    }

    .hero-section .row.d-none.d-md-flex {
        display: none !important;
    }

    /* Show mobile hero */
    .mobile-hero {
        display: block !important;
    }
}

/* Header Styles */
.header-section {
    background: var(--white);
    border-bottom: 1px solid var(--border-color);
}

.navbar-brand h4 {
    color: var(--text-dark);
    font-size: 1.5rem;
    margin: 0;
}

.navbar-brand small {
    font-size: 0.75rem;
    color: var(--text-light);
}

.logo-icon {
    width: auto;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-right: 10px;
}

.logo-icon svg {
    width: 100%;
    height: 100%;
}

.navbar-logo-img {
    width: 158px;
    height: 46px;
    max-height: 60px;
    object-fit: contain;
    display: block;
}

.search-bar-header {
    display: flex;
    align-items: center;
}

.search-bar-header .input-group {
    border: 1px solid var(--border-color);
    border-radius: 5px;
    overflow: hidden;
}

.search-bar-header .form-select {
    border: none;
    border-right: 1px solid var(--border-color);
    border-radius: 0;
}

.search-bar-header .form-control {
    border: none;
    border-radius: 0;
}

.btn-search-header {
    background: var(--primary-orange);
    color: var(--white);
    border: none;
    padding: 6px 15px;
    border-radius: 0;
}

.btn-search-header:hover {
    background: #e55a2b;
    color: var(--white);
}

.btn-search-pid-header {
    background: transparent;
    color: var(--text-dark);
    border: none;
    padding: 6px 10px;
    font-size: 0.9rem;
}

.btn-search-pid-header:hover {
    color: var(--primary-orange);
}

.user-icon {
    font-size: 2rem;
    color: var(--text-dark);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.user-icon-img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

/* Main Content */
.main-content {
    padding: 40px 0 20px;
    background: var(--bg-light);
    background-position: bottom center;
    background-repeat: no-repeat;
    background-size: contain;
    min-height: calc(100vh - 200px);
    overflow-x: hidden;
}


/* Search Section */
.search-section {
    padding: 30px 0;
    margin-bottom: 30px;
}

.search-bar-main {
    max-width: 651px;
    margin: 0 auto;
}

.search-bar-main .input-group {
    background: var(--white);
    border-radius: 31px;
    padding: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    overflow: visible !important;
    display: flex;
    align-items: center;
    border: none;
    position: relative;
}

.search-bar-main .input-group::after {
    display: none;
}

.search-bar-main .form-select {
    border: none;
    border-right: 1px solid #E0E0E0;
    border-radius: 23px 0 0 23px;
    padding: 12px 20px;
    font-weight: 500;
    background: transparent;
    flex-shrink: 0;
    color: var(--text-dark);
    font-size: 1rem;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23000' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    padding-right: 35px;
}

.search-bar-main .form-select:focus {
    box-shadow: none;
    border-color: #E0E0E0;
    outline: none;
}

.search-bar-main .form-control {
    border: none;
    border-radius: 0;
    padding: 12px 20px;
    font-size: 1rem;
    flex: 1;
    background: transparent;
    margin-right: 12px;
}

.search-bar-main .form-control::placeholder {
    color: var(--text-light);
}

.search-bar-main .form-control:focus {
    box-shadow: none;
    border-color: transparent;
    outline: none;
}

.btn-search-main {
    background: #F06A37 !important;
    color: var(--white) !important;
    border: none !important;
    padding: 12px 30px !important;
    border-radius: 23px !important;
    font-weight: 500;
    font-size: 1rem;
    white-space: nowrap;
    flex-shrink: 0;
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    margin-left: 0 !important;
    margin-right: 0 !important;
    position: relative;
    z-index: 1;
}

.btn-search-main:hover {
    background: #e55a2b;
    color: var(--white);
}

.btn-search-main i {
    font-size: 1rem;
}

.search-pid-section {
    text-align: center;
}

.pid-search-header {
    max-width: 800px;
    margin: 0 auto 20px auto;
    text-align: center;
}

.pid-search-title {
    font-size: 1rem;
    color: var(--text-dark);
    font-weight: 600;
    margin-bottom: 18px;
    text-align: center;
}

.btn-pid-type-dropdown {
    background: rgba(254, 239, 233, 1);
    color: rgba(51, 51, 51, 1);
    border: 1px solid rgba(255, 84, 3, 1);
    border-radius: 17.5px;
    padding: 5px 16px;
    font-weight: 500;
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-pid-type-dropdown:hover {
    background: #FFE8CC;
    border-color: #FFC085;
    color: var(--text-dark);
}

.btn-pid-type-dropdown:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 84, 3, 0.1);
}

.btn-pid-type-dropdown i {
    color: rgba(51, 51, 51, 1);
    font-size: 13px;
    transition: transform 0.3s ease;
}

.btn-pid-type-dropdown:hover i {
    transform: translateY(2px);
}

/* PID Dropdown Wrapper */
.pid-dropdown-wrapper {
    position: relative;
    display: inline-block;
}

/* PID Dropdown Menu */
.pid-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    background: var(--white);
    border: 1px solid #E5E5E5;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    min-width: 120px;
    z-index: 1000;
    display: none;
    overflow: hidden;
}

.pid-dropdown-menu.show {
    display: block;
}

.pid-dropdown-item {
    padding: 10px 16px;
    cursor: pointer;
    color: rgba(51, 51, 51, 1);
    font-size: 1rem;
    font-weight: 400;
    transition: background-color 0.2s ease;
    border-bottom: 1px solid #f0f0f0;
}

.pid-dropdown-item:last-child {
    border-bottom: none;
}

.pid-dropdown-item:hover {
    background-color: rgba(254, 239, 233, 1);
    color: rgba(51, 51, 51, 1);
}

.pid-dropdown-item:active {
    background-color: #FFE8CC;
}

/* Full-width background */
.pid-illustration-bg {
    background: white;
    width: 100%;
}

.pid-illustration-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 800px;
    margin: 0px auto;
    padding: 100px 20px;
}

.pid-illustration-container svg {
    width: 100%;
    max-width: 387px;
    height: 327px;
    display: block;
}

.btn-search-pid-main {
    background: var(--white);
    color: var(--primary-orange);
    border: 2px solid var(--primary-orange);
    padding: 10px 25px;
    border-radius: 23px;
    font-weight: 500;
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
}

.btn-search-pid-main:hover {
    background: var(--white);
    color: var(--primary-orange);
    border-color: var(--primary-orange);
}

.btn-search-pid-main i {
    font-size: 0.85rem;
    margin-left: 4px;
}

.container-fluid {
    overflow-x: hidden;
    max-width: 100%;
    width: 100%;
}

.main-content .row {
    margin-left: 0;
    margin-right: 0;
    overflow-x: hidden;
    max-width: 100%;
}

/* Filter Sidebar */
.filter-sidebar {
    position: sticky;
    top: 20px;
    height: fit-content;
    max-height: none;
    overflow-y: visible;
    overflow-x: hidden;
    align-self: flex-start;
}

.filter-card {
    background: var(--white);
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    overflow-x: hidden;
    max-width: 100%;
}

.filter-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 20px;
    color: var(--text-dark);
}

.filter-section {
    border-bottom: 1px solid var(--border-color);
    padding: 15px 0;
}

.filter-section:last-child {
    border-bottom: none;
}

.filter-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-weight: 500;
    color: var(--text-dark);
}

.filter-section-header i {
    transition: transform 0.3s;
}

.filter-section-header[aria-expanded="true"] i {
    transform: rotate(180deg);
}

.filter-options {
    padding-top: 10px;
}

.filter-options .form-check {
    margin-bottom: 10px;
}

.filter-options .form-check-label {
    font-size: 0.9rem;
    color: var(--text-light);
    cursor: pointer;
}

.filter-options .form-check-input:checked {
    background-color: var(--primary-orange);
    border-color: var(--primary-orange);
}

/* Price Range */

/* Wrapper */
.price-range-wrapper {
    padding: 5px 0;
}

/* Price slider container */
.price-slider-container {
    position: relative;
    padding: 20px 10px 35px 10px;
}

/* Range slider container */
.price-slider {
    position: relative;
    height: 6px;
    margin-bottom: 25px;
}

/* Slider track (gray line) */
.slider-track {
    position: absolute;
    width: 100%;
    height: 4px;
    background: #E0E0E0;
    border-radius: 2px;
    top: 50%;
    transform: translateY(-50%);
}

/* Slider range (orange fill) */
.slider-range {
    position: absolute;
    height: 4px;
    background: var(--primary-orange);
    border-radius: 2px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    left: 0%;
    width: 100%;
}

/* Range inputs */
.range-input {
    position: absolute;
    width: 100%;
    height: 6px;
    background: none;
    pointer-events: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
    top: 0;
    margin: 0;
}

.range-input::-webkit-slider-runnable-track {
    height: 6px;
    background: transparent;
}

.range-input::-moz-range-track {
    height: 6px;
    background: transparent;
    border: none;
}

.range-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: var(--primary-orange);
    border-radius: 50%;
    border: 3px solid white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    pointer-events: auto;
    position: relative;
    margin-top: -7px;
    z-index: 2;
}

.range-input::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: var(--primary-orange);
    border-radius: 50%;
    border: 3px solid white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    pointer-events: auto;
    position: relative;
    z-index: 2;
}

/* Price labels container */
.price-labels {
    position: relative;
    width: 100%;
    height: 20px;
    margin-top: 5px;
}

/* Individual price label */
.price-label {
    position: absolute;
    font-size: 0.85rem;
    color: var(--text-dark);
    font-weight: 400;
    transform: translateX(-50%);
    white-space: nowrap;
}

.price-label1 {
    right: 0;
    position: absolute;
    font-size: 0.85rem;
    color: var(--text-dark);
    font-weight: 400;
    transform: translateX(-50%);
    white-space: nowrap;
}

/* Ensure inputs are interactive */
.range-input-min,
.range-input-max {
    pointer-events: auto;
}

.range-input-min {
    z-index: 3;
}

.range-input-max {
    z-index: 4;
}

/* Area dropdown boxes */
.area-box {
    border: 1px solid #E0E0E0;
    border-radius: 8px;
    padding: 10px;
    font-size: 0.875rem;
    color: #999;
    background: var(--white);
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: text;
    transition: border-color 0.3s;
    position: relative;
}

.area-box:hover {
    border-color: var(--primary-orange);
}

.area-box i {
    color: #999;
    font-size: 0.75rem;
    pointer-events: none;
    flex-shrink: 0;
    margin-left: 8px;
}

.area-input {
    border: none;
    outline: none;
    background: transparent;
    font-size: 0.875rem;
    color: #999;
    flex: 1;
    padding: 0;
    margin: 0;
    width: 100%;
    cursor: text;
}

.area-input::placeholder {
    color: #999;
}

.area-input:focus {
    outline: none;
    border: none;
    color: #333;
}

.area-box:has(.area-input:focus) {
    border-color: var(--primary-orange);
}

/* Buying Listing Price Slider - Unique Classes */
.buying-price-slider-container {
    position: relative;
    padding: 20px 10px 35px 10px;
    z-index: 0;
}

.buying-price-slider {
    position: relative;
    height: 6px;
    margin-bottom: 25px;
}

.buying-slider-track {
    position: absolute;
    width: 100%;
    height: 4px;
    background: #E0E0E0;
    border-radius: 2px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 0;
}

.buying-slider-range {
    position: absolute;
    height: 4px;
    background: var(--primary-orange);
    border-radius: 2px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    left: 0%;
    width: 100%;
    z-index: 1;
}

.buying-range-input {
    position: absolute;
    width: 100%;
    height: 6px;
    background: none;
    pointer-events: none;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    outline: none;
    top: 0;
    margin: 0;
    z-index: 10 !important;
}

.buying-range-input::-webkit-slider-runnable-track {
    height: 6px;
    background: transparent !important;
}

.buying-range-input::-moz-range-track {
    height: 6px;
    background: transparent !important;
    border: none !important;
}

.buying-range-input::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 20px !important;
    height: 20px !important;
    background: var(--primary-orange) !important;
    border-radius: 50% !important;
    border: 3px solid white !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    position: relative;
    margin-top: -7px !important;
    z-index: 100 !important;
}

.buying-range-input::-moz-range-thumb {
    width: 20px !important;
    height: 20px !important;
    background: var(--primary-orange) !important;
    border-radius: 50% !important;
    border: 3px solid white !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    position: relative;
    z-index: 100 !important;
}

.buying-range-input-min,
.buying-range-input-max {
    pointer-events: auto !important;
    z-index: 10 !important;
}

.buying-range-input-min {
    z-index: 10 !important;
}

.buying-range-input-max {
    z-index: 11 !important;
}

.buying-price-labels {
    position: relative;
    width: 100%;
    height: 20px;
    margin-top: 5px;
}

.buying-price-label {
    position: absolute;
    font-size: 0.85rem;
    color: var(--text-dark);
    font-weight: 400;
    transform: translateX(-50%);
    white-space: nowrap;
}

.buying-price-label-max {
    position: absolute;
    font-size: 0.85rem;
    color: var(--text-dark);
    font-weight: 400;
    transform: translateX(-50%);
    white-space: nowrap;
}

/* Buying Listing Mobile Price Slider - Unique Classes */
.buying-mobile-price-slider-container {
    position: relative;
    padding: 20px 10px 35px 10px;
    z-index: 0;
}

.buying-mobile-price-slider {
    position: relative;
    height: 6px;
    margin-bottom: 25px;
}

.buying-mobile-slider-track {
    position: absolute;
    width: 100%;
    height: 4px;
    background: #E0E0E0;
    border-radius: 2px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 0;
}

.buying-mobile-slider-range {
    position: absolute;
    height: 4px;
    background: var(--primary-orange);
    border-radius: 2px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    left: 0%;
    width: 100%;
    z-index: 1;
}

.buying-mobile-range-input {
    position: absolute;
    width: 100%;
    height: 6px;
    background: none;
    pointer-events: none;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    outline: none;
    top: 0;
    margin: 0;
    z-index: 10 !important;
}

.buying-mobile-range-input::-webkit-slider-runnable-track {
    height: 6px;
    background: transparent !important;
}

.buying-mobile-range-input::-moz-range-track {
    height: 6px;
    background: transparent !important;
    border: none !important;
}

.buying-mobile-range-input::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 20px !important;
    height: 20px !important;
    background: var(--primary-orange) !important;
    border-radius: 50% !important;
    border: 3px solid white !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    position: relative;
    margin-top: -7px !important;
    z-index: 100 !important;
}

.buying-mobile-range-input::-moz-range-thumb {
    width: 20px !important;
    height: 20px !important;
    background: var(--primary-orange) !important;
    border-radius: 50% !important;
    border: 3px solid white !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    position: relative;
    z-index: 100 !important;
}

.buying-mobile-range-input-min,
.buying-mobile-range-input-max {
    pointer-events: auto !important;
    z-index: 10 !important;
}

.buying-mobile-range-input-min {
    z-index: 10 !important;
}

.buying-mobile-range-input-max {
    z-index: 11 !important;
}

.buying-mobile-price-labels {
    position: relative;
    width: 100%;
    height: 20px;
    margin-top: 5px;
}

.buying-mobile-price-label {
    position: absolute;
    font-size: 0.85rem;
    color: var(--text-dark);
    font-weight: 400;
    transform: translateX(-50%);
    white-space: nowrap;
}

.buying-mobile-price-label-max {
    position: absolute;
    font-size: 0.85rem;
    color: var(--text-dark);
    font-weight: 400;
    transform: translateX(-50%);
    white-space: nowrap;
}

/* Renting Listing Price Slider - Unique Classes (Desktop) */
.renting-price-slider-container {
    position: relative;
    padding: 20px 10px 35px 10px;
    z-index: 0;
}

.renting-price-slider {
    position: relative;
    height: 6px;
    margin-bottom: 25px;
}

.renting-slider-track {
    position: absolute;
    width: 100%;
    height: 4px;
    background: #E0E0E0;
    border-radius: 2px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 0;
}

.renting-slider-range {
    position: absolute;
    height: 4px;
    background: var(--primary-orange);
    border-radius: 2px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    left: 0%;
    width: 100%;
    z-index: 1;
}

.renting-range-input {
    position: absolute;
    width: 100%;
    height: 6px;
    background: none;
    pointer-events: none;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    outline: none;
    top: 0;
    margin: 0;
    z-index: 10 !important;
}

.renting-range-input::-webkit-slider-runnable-track {
    height: 6px;
    background: transparent !important;
}

.renting-range-input::-moz-range-track {
    height: 6px;
    background: transparent !important;
    border: none !important;
}

.renting-range-input::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 20px !important;
    height: 20px !important;
    background: var(--primary-orange) !important;
    border-radius: 50% !important;
    border: 3px solid white !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    position: relative;
    margin-top: -7px !important;
    z-index: 100 !important;
}

.renting-range-input::-moz-range-thumb {
    width: 20px !important;
    height: 20px !important;
    background: var(--primary-orange) !important;
    border-radius: 50% !important;
    border: 3px solid white !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    position: relative;
    z-index: 100 !important;
}

.renting-range-input-min,
.renting-range-input-max {
    pointer-events: auto !important;
    z-index: 10 !important;
}

.renting-range-input-min {
    z-index: 10 !important;
}

.renting-range-input-max {
    z-index: 11 !important;
}

.renting-price-labels {
    position: relative;
    width: 100%;
    height: 20px;
    margin-top: 5px;
}

.renting-price-label {
    position: absolute;
    font-size: 0.85rem;
    color: var(--text-dark);
    font-weight: 400;
    transform: translateX(-50%);
    white-space: nowrap;
}

.renting-price-label-max {
    position: absolute;
    font-size: 0.85rem;
    color: var(--text-dark);
    font-weight: 400;
    transform: translateX(-50%);
    white-space: nowrap;
}

/* Renting Listing Mobile Price Slider - Unique Classes */
.renting-mobile-price-slider-container {
    position: relative;
    padding: 20px 10px 35px 10px;
    z-index: 0;
}

.renting-mobile-price-slider {
    position: relative;
    height: 6px;
    margin-bottom: 25px;
}

.renting-mobile-slider-track {
    position: absolute;
    width: 100%;
    height: 4px;
    background: #E0E0E0;
    border-radius: 2px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 0;
}

.renting-mobile-slider-range {
    position: absolute;
    height: 4px;
    background: var(--primary-orange);
    border-radius: 2px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    left: 0%;
    width: 100%;
    z-index: 1;
}

.renting-mobile-range-input {
    position: absolute;
    width: 100%;
    height: 6px;
    background: none;
    pointer-events: none;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    outline: none;
    top: 0;
    margin: 0;
    z-index: 10 !important;
}

.renting-mobile-range-input::-webkit-slider-runnable-track {
    height: 6px;
    background: transparent !important;
}

.renting-mobile-range-input::-moz-range-track {
    height: 6px;
    background: transparent !important;
    border: none !important;
}

.renting-mobile-range-input::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 20px !important;
    height: 20px !important;
    background: var(--primary-orange) !important;
    border-radius: 50% !important;
    border: 3px solid white !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    position: relative;
    margin-top: -7px !important;
    z-index: 100 !important;
}

.renting-mobile-range-input::-moz-range-thumb {
    width: 20px !important;
    height: 20px !important;
    background: var(--primary-orange) !important;
    border-radius: 50% !important;
    border: 3px solid white !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    position: relative;
    z-index: 100 !important;
}

.renting-mobile-range-input-min,
.renting-mobile-range-input-max {
    pointer-events: auto !important;
    z-index: 10 !important;
}

.renting-mobile-range-input-min {
    z-index: 10 !important;
}

.renting-mobile-range-input-max {
    z-index: 11 !important;
}

.renting-mobile-price-labels {
    position: relative;
    width: 100%;
    height: 20px;
    margin-top: 5px;
}

.renting-mobile-price-label {
    position: absolute;
    font-size: 0.85rem;
    color: var(--text-dark);
    font-weight: 400;
    transform: translateX(-50%);
    white-space: nowrap;
}

.renting-mobile-price-label-max {
    position: absolute;
    font-size: 0.85rem;
    color: var(--text-dark);
    font-weight: 400;
    transform: translateX(-50%);
    white-space: nowrap;
}

/* PG Listing Price Slider - Unique Classes (Desktop) */
.pg-price-slider-container {
    position: relative;
    padding: 20px 10px 35px 10px;
    z-index: 0;
}

.pg-price-slider {
    position: relative;
    height: 6px;
    margin-bottom: 25px;
}

.pg-slider-track {
    position: absolute;
    width: 100%;
    height: 4px;
    background: #E0E0E0;
    border-radius: 2px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 0;
}

.pg-slider-range {
    position: absolute;
    height: 4px;
    background: var(--primary-orange);
    border-radius: 2px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    left: 0%;
    width: 100%;
    z-index: 1;
}

.pg-range-input {
    position: absolute;
    width: 100%;
    height: 6px;
    background: none;
    pointer-events: none;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    outline: none;
    top: 0;
    margin: 0;
    z-index: 10 !important;
}

.pg-range-input::-webkit-slider-runnable-track {
    height: 6px;
    background: transparent !important;
}

.pg-range-input::-moz-range-track {
    height: 6px;
    background: transparent !important;
    border: none !important;
}

.pg-range-input::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 20px !important;
    height: 20px !important;
    background: var(--primary-orange) !important;
    border-radius: 50% !important;
    border: 3px solid white !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    position: relative;
    margin-top: -7px !important;
    z-index: 100 !important;
}

.pg-range-input::-moz-range-thumb {
    width: 20px !important;
    height: 20px !important;
    background: var(--primary-orange) !important;
    border-radius: 50% !important;
    border: 3px solid white !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    position: relative;
    z-index: 100 !important;
}

.pg-range-input-min,
.pg-range-input-max {
    pointer-events: auto !important;
    z-index: 10 !important;
}

.pg-range-input-min {
    z-index: 10 !important;
}

.pg-range-input-max {
    z-index: 11 !important;
}

.pg-price-labels {
    position: relative;
    width: 100%;
    height: 20px;
    margin-top: 5px;
}

.pg-price-label {
    position: absolute;
    font-size: 0.85rem;
    color: var(--text-dark);
    font-weight: 400;
    transform: translateX(-50%);
    white-space: nowrap;
}

.pg-price-label-max {
    position: absolute;
    font-size: 0.85rem;
    color: var(--text-dark);
    font-weight: 400;
    transform: translateX(-50%);
    white-space: nowrap;
}

/* PG Listing Mobile Price Slider - Unique Classes */
.pg-mobile-price-slider-container {
    position: relative;
    padding: 20px 10px 35px 10px;
    z-index: 0;
}

.pg-mobile-price-slider {
    position: relative;
    height: 6px;
    margin-bottom: 25px;
}

.pg-mobile-slider-track {
    position: absolute;
    width: 100%;
    height: 4px;
    background: #E0E0E0;
    border-radius: 2px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 0;
}

.pg-mobile-slider-range {
    position: absolute;
    height: 4px;
    background: var(--primary-orange);
    border-radius: 2px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    left: 0%;
    width: 100%;
    z-index: 1;
}

.pg-mobile-range-input {
    position: absolute;
    width: 100%;
    height: 6px;
    background: none;
    pointer-events: none;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    outline: none;
    top: 0;
    margin: 0;
    z-index: 10 !important;
}

.pg-mobile-range-input::-webkit-slider-runnable-track {
    height: 6px;
    background: transparent !important;
}

.pg-mobile-range-input::-moz-range-track {
    height: 6px;
    background: transparent !important;
    border: none !important;
}

.pg-mobile-range-input::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 20px !important;
    height: 20px !important;
    background: var(--primary-orange) !important;
    border-radius: 50% !important;
    border: 3px solid white !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    position: relative;
    margin-top: -7px !important;
    z-index: 100 !important;
}

.pg-mobile-range-input::-moz-range-thumb {
    width: 20px !important;
    height: 20px !important;
    background: var(--primary-orange) !important;
    border-radius: 50% !important;
    border: 3px solid white !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    position: relative;
    z-index: 100 !important;
}

.pg-mobile-range-input-min,
.pg-mobile-range-input-max {
    pointer-events: auto !important;
    z-index: 10 !important;
}

.pg-mobile-range-input-min {
    z-index: 10 !important;
}

.pg-mobile-range-input-max {
    z-index: 11 !important;
}

.pg-mobile-price-labels {
    position: relative;
    width: 100%;
    height: 20px;
    margin-top: 5px;
}

.pg-mobile-price-label {
    position: absolute;
    font-size: 0.85rem;
    color: var(--text-dark);
    font-weight: 400;
    transform: translateX(-50%);
    white-space: nowrap;
}

.pg-mobile-price-label-max {
    position: absolute;
    font-size: 0.85rem;
    color: var(--text-dark);
    font-weight: 400;
    transform: translateX(-50%);
    white-space: nowrap;
}

/* Results Header */
.results-header {
    background: var(--white);
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.results-count {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-dark);
    margin: 0;
}

.results-location {
    font-size: 0.9rem;
    color: var(--text-light);
    margin: 0;
}

.desktop-results-header-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

.desktop-results-text {
    flex: 1;
    min-width: 0;
}

.desktop-results-text .results-count {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Updated Dates Dropdown Wrapper */
.updated-dates-dropdown-wrapper {
    position: relative;
    display: inline-block;
}

.btn-updated-dates-desktop {
    background: #FFFFFF;
    border: 1px solid rgba(51, 51, 51, 0.2);
    border-radius: 50px;
    padding: 8px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(51, 51, 51, 0.8);
    font-size: 13px;
    font-weight: 400;
    white-space: nowrap;
    flex-shrink: 0;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-updated-dates-desktop:hover {
    border-color: rgba(51, 51, 51, 0.3);
}

.btn-updated-dates-desktop svg {
    flex-shrink: 0;
}

/* Updated Dates Dropdown Menu */
.updated-dates-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    background: var(--white);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    min-width: 160px;
    z-index: 1000;
    display: none;
    overflow: hidden;
    padding: 4px 0;
}

.updated-dates-dropdown-menu.show {
    display: block;
}

.updated-dates-dropdown-item {
    padding: 10px 16px;
    cursor: pointer;
    color: #333333;
    font-size: 14px;
    font-weight: 400;
    transition: background-color 0.2s ease;
    border-bottom: none;
}

.updated-dates-dropdown-item:hover {
    background-color: #F5F5F5;
}

.updated-dates-dropdown-item:last-child {
    border-bottom: none;
}

.sort-by-wrapper {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.sort-by-wrapper label {
    font-size: 0.9rem;
    color: var(--text-light);
    margin: 0;
}

/* Sort By Dropdown Wrapper */
.sort-by-dropdown-wrapper {
    position: relative;
    display: inline-block;
}

.btn-sort-by-desktop {
    background: #FFFFFF;
    border: 1px solid rgba(51, 51, 51, 0.2);
    border-radius: 24px;
    padding: 6px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: rgba(51, 51, 51, 0.8);
    font-size: 14px;
    font-weight: 400;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 140px;
}

.btn-sort-by-desktop:hover {
    border-color: rgba(51, 51, 51, 0.3);
}

.btn-sort-by-desktop .sort-by-text {
    flex: 1;
    text-align: left;
}

.btn-sort-by-desktop .sort-by-chevron {
    flex-shrink: 0;
    width: 6px;
    height: 10px;
    margin-left: auto;
}

/* Sort By Dropdown Menu */
.sort-by-dropdown-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    background: var(--white);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    min-width: 180px;
    z-index: 1000;
    display: none;
    overflow: hidden;
    padding: 4px 0;
}

.sort-by-dropdown-menu.show {
    display: block;
}

.sort-by-dropdown-item {
    padding: 10px 16px;
    cursor: pointer;
    color: #333333;
    font-size: 14px;
    font-weight: 400;
    transition: background-color 0.2s ease;
}

.sort-by-dropdown-item:hover {
    background-color: #F5F5F5;
}

.sort-by-dropdown-item:last-child {
    border-bottom: none;
}

/* Quick Links */
.quick-links {
    background: var(--white);
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
}

.quick-links-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 12px;
    color: var(--text-dark);
}

.quick-links-divider {
    margin: 0 0 15px 0;
    border: none;
    border-top: 1px solid var(--border-color);
    opacity: 0.5;
}

.quick-links-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.quick-links-list li {
    margin-bottom: 12px;
    padding-left: 20px;
    position: relative;
}

.quick-links-list li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--text-light);
    font-size: 1.2rem;
    line-height: 1;
}

.quick-link {
    color: var(--text-dark);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.3s;
}

.quick-link:hover {
    color: var(--primary-orange);
    text-decoration: none;
}

/* Property Cards */
.property-card {
    background: var(--white);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s, box-shadow 0.3s;
    height: 100%;
    display: flex;
    flex-direction: column;

}

.property-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

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

.pg-nearby-section .property-image-wrapper {
    overflow: visible;
}


.property-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.heart-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    border: none;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    transition: all 0.3s;
}

.heart-btn:hover {
    background: rgba(0, 0, 0, 0.5);
    transform: scale(1.05);
}

.heart-btn i {
    color: var(--text-dark);
    font-size: 1.1rem;
}

.pg-nearby-section .heart-btn i {
    color: var(--text-dark);
}

.property-content {
    padding: 15px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.property-pid {
    font-size: 0.85rem;
    color: var(--text-light);
    margin-bottom: 8px;
    font-weight: 400;
}

.property-price {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.pg-nearby-section .property-price {
    font-size: 1.25rem;
    margin-bottom: 8px;
}

.price-amount {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-dark);
}

.verified-badge {
    background: var(--primary-green);
    color: var(--white);
    font-size: 0.75rem;
    padding: 4px 10px;
    border-radius: 12px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

.verified-badge i {
    font-size: 0.7rem;
}

.property-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 5px;
    line-height: 1.3;
}

.pg-nearby-section .property-title {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 6px;
}

.property-location {
    font-size: 0.85rem;
    color: var(--text-light);
    margin-bottom: 12px;
}

.property-sharing-options {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 5px;
    padding-right: 2px;
    -webkit-overflow-scrolling: touch;
    cursor: grab;
    scroll-behavior: smooth;
}

.property-sharing-options:active {
    cursor: grabbing;
}

.property-sharing-options::-webkit-scrollbar {
    display: none;
}

.btn-sharing {
    background: #F5F5F5;
    color: var(--text-dark);
    border: none;
    padding: 6px 14px;
    font-size: 0.8rem;
    border-radius: 20px;
    transition: all 0.3s;
    font-weight: 400;
    flex-shrink: 0;
    white-space: nowrap;
}

.btn-sharing:hover {
    background: #E8E8E8;
    color: var(--text-dark);
}

.btn-sharing.active {
    background: var(--primary-orange);
    color: var(--white);
}

.property-listed-badge {
    font-size: 0.75rem;
    color: var(--text-light);
    background: transparent;
    padding: 0;
    border-radius: 0;
    display: block;
    width: 100%;
    margin-top: auto;
    font-weight: 400;
}

.pg-nearby-section .property-listed-badge {
    font-size: 0.8rem;
    margin-top: 8px;
    background: linear-gradient(90deg, #666666 0%, #999999 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 500;
}

/* Show More Button */
.btn-show-more {
    border: 1px solid #D6501C;
    color: #333333;
    padding: 10px 30px;
    border-radius: 10px;
    font-weight: 500;
}

.btn-show-more:hover {
    background: #D6501C;
    color: #333333;
}

/* Ad Banners */
.ad-banners {
    position: sticky;
    top: 20px;
}

.ad-banner {
    background: var(--white);
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.ad-content {
    text-align: center;
}


.ad-image {
    width: 100%;
    height: auto;
    border-radius: 5px;
    margin-bottom: 10px;
    object-fit: cover;
    display: block;
}


/* Student Ad Banner */
.student-ad {
    background: linear-gradient(to bottom, #2a2a2a, #0a0a0a);
    border-radius: 12px;
    padding: 30px 20px;
    text-align: center;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.student-question {
    color: #D0D0D0;
    font-size: 0.95rem;
    font-weight: 500;
    margin: 0;
    text-align: center;
    letter-spacing: 0.5px;
}

.student-title {
    background: linear-gradient(135deg, #FF8C42 0%, #FFB84D 50%, #FFD700 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 15px 0 25px 0;
    text-align: center;
    letter-spacing: 0.5px;
    display: block;
    width: 100%;
}

.btn-grab-now {
    background: var(--white);
    color: #FF7A5C;
    border: none;
    padding: 14px 35px;
    border-radius: 25px;
    font-size: 1rem;
    font-weight: 600;
    width: 100%;
    transition: all 0.3s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn-grab-now:hover {
    background: #f8f8f8;
    color: #FF7A5C;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Relax Ad Banner */
.relax-ad {
    background: linear-gradient(to bottom, #2a2a2a, #0a0a0a);
    border-radius: 12px;
    padding: 30px 20px;
    text-align: center;
    min-height: 220px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.relax-question {
    color: #D0D0D0;
    font-size: 0.95rem;
    font-weight: 400;
    margin: 0;
    text-align: center;
    letter-spacing: 0.5px;
}

.relax-title {
    background: linear-gradient(135deg, #FF8C42 0%, #FFB84D 50%, #FFD700 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.4;
    margin: 15px 0 25px 0;
    text-align: center;
    letter-spacing: 0.3px;
    display: block;
    width: 100%;
}

.btn-know-more {
    background: var(--white);
    color: #FF7A5C;
    border: none;
    padding: 14px 35px;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 600;
    width: 100%;
    transition: all 0.3s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn-know-more:hover {
    background: #f8f8f8;
    color: #FF7A5C;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* PG Nearby Section */
.pg-nearby-section {
    background: var(--white);
    padding: 40px 0 60px 0;
}

.pg-nearby-section .property-card {
    border-radius: 8px;
}

.pg-nearby-section .property-image-wrapper {
    background: var(--white);
    border-radius: 8px 8px 0 0;
    padding: 0;
    overflow: hidden;
    position: relative;
}

.pg-nearby-section .property-image {
    border-radius: 0;
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    object-fit: cover;
    position: relative;
    z-index: 1;
}

.pg-nearby-section .heart-btn {
    top: 10px;
    right: 10px;
    background: rgba(240, 240, 240, 0.95);
    z-index: 2;
}

.pg-nearby-section .heart-btn:hover {
    background: rgba(220, 220, 220, 0.95);
}

.pg-nearby-section .heart-btn i {
    color: var(--text-dark);
    filter: none;
    -webkit-text-stroke: none;
}

.section-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-dark);
    margin: 0;
}

.carousel-controls {
    display: flex;
    gap: 10px;
}

.btn-carousel-nav {
    background: var(--white);
    color: var(--text-dark);
    border: 1px solid var(--border-color);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}

.btn-carousel-nav:hover {
    background: var(--primary-orange);
    color: var(--white);
    border-color: var(--primary-orange);
}

/* About Section */
.about-section {
    background: white;
    padding: 40px 0;
}

.about-content {
    color: var(--text-light);
    line-height: 1.8;
}

.about-content p {
    margin-bottom: 15px;
}

.btn-explore-locality {
    background: var(--white);
    color: #333333;
    border: 1px solid #FF5403;
    padding: 10px 25px;
    border-radius: 26.5px;
    font-weight: 500;
}

.btn-explore-locality:hover {
    background: #e55a2b;
    color: var(--white);
}

/* Brokers Section */
.brokers-section {
    background: var(--white);
    padding: 40px 0;
}

.broker-card {
    background: var(--white);
    border: none;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    transition: transform 0.3s, box-shadow 0.3s;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.broker-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.broker-avatar {
    width: 100px;
    height: 100px;
    margin: 0 auto 15px;
    border-radius: 50%;
    overflow: hidden;
    border: none;
}

.broker-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.broker-company {
    font-size: 0.9rem;
    color: var(--text-light);
    font-weight: 400;
    margin-bottom: 5px;
}

.broker-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 5px;
}

.broker-member {
    font-size: 0.85rem;
    color: var(--text-light);
    margin-bottom: 12px;
}

.broker-tag {
    display: inline-block;
    background: #FFE5D9;
    color: var(--text-dark);
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 500;
    margin-bottom: 15px;
}

.btn-view-details {
    background: #FFE5D9;
    color: var(--text-dark);
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 0.9rem;
    width: 100%;
    font-weight: 500;
    transition: all 0.3s;
}

.btn-view-details:hover {
    background: #FFD4C4;
    color: var(--text-dark);
}

/* FAQ Section */
.faq-label {
    font-size: 14px;
    font-weight: 500;
    color: #555;
    text-transform: uppercase;
    margin: 0;
}

.section-title-faq {
    font-style: semibold;
    font-weight: 600;
    font-size: 22px;
    color: #333333;

}

.faq-section {
    background: var(--bg-light);
    padding: 40px 0;
}

.accordion-item {
    border: 1px solid var(--border-color);
    border-radius: 5px;
    margin-bottom: 10px;
    overflow: hidden;
}

.accordion-button {
    background: var(--white);
    color: var(--text-dark);
    font-weight: 500;
    border: none;
    box-shadow: none;
}

.accordion-button:not(.collapsed) {
    background: var(--white);
    color: var(--black);
    box-shadow: none;
    font-weight: bolder;
}

.accordion-button:focus {
    box-shadow: none;
    border-color: transparent;
}

.accordion-body {
    background: var(--white);
    color: var(--text-light);
    padding: 20px;
}

/* Footer */
.footer-section {
    background: #333333;
    border-top: 1px solid var(--border-color);
    padding: 40px 0 20px;
}

.footer-brand h4 {
    color: var(--text-dark);
    font-size: 1.5rem;
    margin: 0;
}

.footer-logo-img {
    max-width: 200px;
    height: auto;
    display: block;
}

.footer-description {
    color: #FFFFFF;
    font-size: 0.9rem;
    margin-bottom: 15px;
}

.social-icons {
    display: flex;
    gap: 15px;
}

.social-icons a {
    color: #FFFFFF;
    font-size: 1.5rem;
    transition: color 0.3s;
}

.social-icons a:hover {
    color: var(--primary-orange);
}

.footer-heading {
    font-size: 1rem;
    font-weight: 600;
    color: #FFFFFF;
    margin-bottom: 15px;
}

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

.footer-links li {
    margin-bottom: 10px;
}

.footer-links a {
    color: #FFFFFF;
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.3s;
}

.footer-links a:hover {
    color: var(--primary-orange);
}

.contact-info p {
    color: #FFFFFF;
    font-size: 0.9rem;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}

.contact-info i {
    color: #FFFFFF;
}

.app-badges-footer {
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
}

.app-badge-footer {
    display: inline-flex;
    width: 48px;
    height: 48px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 12px;
    background: transparent;
    padding: 12px;
    transition: all 0.3s;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.app-badge-footer:hover {
    border-color: rgba(255, 255, 255, 0.6);
    transform: translateY(-2px);
    text-decoration: none;
}

.app-badge-footer img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.footer-bottom {
    border-top: 1px solid #FFFFFF;
    padding-top: 20px;
    padding-bottom: 80px;
    position: relative;
    overflow: hidden;
    min-height: 140px;
}

.footer-bottom-images-wrapper {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    z-index: 0;
    margin: 0;
    padding: 0;
    pointer-events: none;
}

.footer-bottom-image {
    width: calc(100vw / 6);
    height: auto;
    display: block;
    object-fit: cover;
    object-position: bottom;
    opacity: 0.3;
    flex-shrink: 0;
    margin: 0;
    padding: 0;
}

.footer-bottom p {
    position: relative;
    z-index: 1;
}



.footer-bottom p {
    color: #FFFFFF;
    font-size: 0.85rem;
    margin: 0;
    position: relative;
    z-index: 1;
}

/* Mobile Filter Toggle */
.btn-filter-toggle {
    background: var(--white);
    color: var(--text-dark);
    border: 1px solid var(--border-color);
    padding: 12px 20px;
    border-radius: 8px;
    font-weight: 500;
}

.btn-filter-toggle:hover {
    background: var(--bg-light);
    color: var(--text-dark);
}

@media (max-width: 767.98px) {
    #mobileFilters {
        display: none !important;
    }

    #mobileFilters.show,
    #mobileFilters.collapse.show {
        display: block !important;
    }
}

.btn-filter-toggle {
    background: var(--primary-orange);
    color: var(--white);
    border: none;
    padding: 12px;
    border-radius: 5px;
    font-weight: 500;
}

.btn-filter-toggle:hover {
    background: #e55a2b;
    color: var(--white);
}

/* Responsive Styles */
@media (max-width: 991.98px) {
    .filter-sidebar {
        position: relative;
        top: 0;
        margin-bottom: 20px;
        max-height: none;
        overflow-y: visible;
    }

    .search-bar-header {
        display: none;
    }

    .search-pid-header {
        display: none;
    }

    .quick-links {
        display: none;
    }

    .ad-banners {
        display: none;
    }

    .results-header {
        flex-direction: column;
        gap: 15px;
    }

    .sort-by-wrapper {
        width: 100%;
        justify-content: space-between;
    }
}

@media (max-width: 767.98px) {
    .navbar-brand {
        font-size: 1.2rem;
    }

    .logo-icon {
        width: 30px;
        height: 30px;
    }

    .user-icon {
        font-size: 1.5rem;
    }

    .filter-card {
        padding: 15px;
    }

    .property-image-wrapper {
        height: 200px;
    }

    .section-title {
        font-size: 1.25rem;
    }

    .carousel-controls {
        display: none;
    }

    .broker-card {
        margin-bottom: 20px;
    }

    .footer-section .row>div {
        margin-bottom: 30px;
    }

    .header-section {
        padding: 0;
    }

    .header-section .container-fluid {
        padding: 0;
    }
}

@media (max-width: 575.98px) {
    .main-content {
        padding: 15px 0;
    }

    .filter-card {
        padding: 12px;
    }

    .filter-title {
        font-size: 1.1rem;
    }

    .results-count {
        font-size: 1.1rem;
    }

    .property-sharing-options {
        flex-direction: column;
    }

    .section-title {
        font-size: 1.1rem;
    }

    .about-content {
        font-size: 0.9rem;
    }

    .accordion-button {
        font-size: 0.9rem;
        padding: 12px 15px;
    }

    .accordion-body {
        font-size: 0.85rem;
        padding: 15px;
    }
}

/* Mobile App Banner */
.mobile-app-banner {
    background: var(--white);
    border-bottom: none;
}

.mobile-app-banner .banner-logo-icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.mobile-app-banner .banner-text {
    font-size: 0.85rem;
    color: #000000;
    font-weight: 500;
    white-space: nowrap;
}

.mobile-app-banner .banner-rating {
    font-size: 0.75rem;
    color: #000000;
    margin-left: 28px;
}

.mobile-app-banner .banner-rating i {
    color: #FFD700;
    font-size: 0.8rem;
}

.btn-use-app {
    background: var(--primary-orange);
    color: var(--white);
    border: none;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}

.btn-use-app:hover {
    background: #f5f5f5;
    color: var(--primary-orange);
}

.btn-close-banner {
    background: transparent;
    color: #000000;
    border: none;
    padding: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    opacity: 0.9;
}

.btn-close-banner:hover {
    opacity: 1;
    color: var(--white);
}

/* Mobile Header */
.mobile-header {
    background: var(--white);
    border-bottom: 1px solid var(--border-color);
}

.mobile-logo-icon {
    width: 103px;
    height: 28px;
    object-fit: contain;
}

.mobile-brand-name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-dark);
}

.btn-let-property-mobile {
    background: var(--white);
    border: 1px solid var(--border-color);
    padding: 6px 10px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    white-space: nowrap;
}

.badge-free {
    background: var(--primary-green);
    color: var(--white);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 600;
    line-height: 1.2;
}

.btn-text-property {
    color: var(--primary-orange);
    font-weight: 600;
}

.btn-let-property-mobile:hover {
    background: var(--bg-light);
}

.user-icon-mobile {
    font-size: 1.8rem;
    color: var(--text-dark);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Mobile Search Section */
.search-section-mobile {
    margin-bottom: 0;
    background: transparent;
    padding: 15px 0 20px;
}

.search-bar-main-mobile {
    margin-bottom: 12px;
}

.search-section-mobile .container-fluid {
    padding: 0 15px;
}

.search-bar-main-mobile .input-group {
    border: 1px solid var(--border-color);
    border-radius: 30px;
    overflow: hidden;
    background: var(--white);
}

.form-select-pg-mobile {
    border: none;
    border-right: 1px solid var(--border-color);
    border-radius: 30px 0 0 30px;
    padding: 12px 15px;
    font-size: 0.9rem;
    background: var(--white);
    flex: 0 0 auto;
    width: auto;
    min-width: 70px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 35px;
}

.form-select-pg-mobile:focus {
    box-shadow: none;
    border-right: 1px solid var(--border-color);
    outline: none;
}

.form-control-search-mobile {
    border: none;
    padding: 12px 15px;
    font-size: 0.9rem;
    background: var(--white);
    flex: 1;
}

.form-control-search-mobile:focus {
    box-shadow: none;
    border: none;
}

.form-control-search-mobile::placeholder {
    color: var(--text-light);
    font-size: 0.9rem;
}

.btn-search-main-mobile {
    background: var(--primary-orange);
    color: var(--white);
    border: none;
    padding: 12px 20px;
    border-radius: 0 30px 30px 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-search-main-mobile:hover,
.btn-search-main-mobile:focus {
    background: #e55a2b;
    color: var(--white);
    box-shadow: none;
}

.btn-search-pid-mobile {
    background: var(--white);
    color: var(--primary-orange);
    border: 2px solid var(--primary-orange);
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 500;
}

.btn-search-pid-mobile:hover {
    background: var(--bg-light);
    color: var(--primary-orange);
    border-color: var(--primary-orange);
}

/* Mobile Property Listings */
@media (max-width: 767.98px) {
    .property-listings-mobile .col-md-6 {
        flex: 0 0 100%;
        max-width: 100%;
        padding: 0 0px;
    }

    .property-card {
        margin-bottom: 20px;
        border-radius: 12px;
        overflow: hidden;
    }

    .property-image-wrapper {
        height: 200px;
    }

    .property-content {
        padding: 15px;
    }

    .property-pid {
        font-size: 0.9rem;
        margin-bottom: 8px;
    }

    .property-price {
        font-size: 0.95rem;
        margin-bottom: 10px;
    }

    .property-title {
        font-size: 1rem;
        margin-bottom: 6px;
    }

    .property-location {
        font-size: 0.85rem;
        margin-bottom: 12px;
    }

    .property-sharing-options {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 10px;
    }

    .btn-sharing {
        padding: 6px 12px;
        font-size: 0.8rem;
        border-radius: 6px;
    }

    .property-listed-badge {
        font-size: 0.85rem;
        margin-top: 8px;
    }
}

/* Mobile Nearby Properties Scroll */
.nearby-properties-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 10px 0;
}

.nearby-properties-scroll::-webkit-scrollbar {
    display: none;
}

.nearby-properties-wrapper {
    display: flex;
    gap: 15px;
    padding: 0 15px;
    width: max-content;
}

.property-card-mobile {
    flex: 0 0 280px;
    background: var(--white);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.property-card-mobile .property-image-wrapper {
    height: 180px;
    position: relative;
}

.property-card-mobile .property-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.property-card-mobile .property-content {
    padding: 12px;
}

.property-card-mobile .property-pid {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-dark);
    margin-bottom: 6px;
}

.property-card-mobile .property-price {
    font-size: 0.9rem;
    color: var(--text-dark);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.property-card-mobile .property-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 4px;
}

.property-card-mobile .property-location {
    font-size: 0.85rem;
    color: var(--text-light);
    margin-bottom: 0;
}

.btn-carousel-nav-mobile {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-dark);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin-left: 8px;
}

.btn-carousel-nav-mobile:hover {
    background: var(--bg-light);
    color: var(--text-dark);
}

/* Mobile Section Titles */
.section-title-mobile {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 0;
}

.see-all-link {
    color: var(--primary-orange);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
}

.see-all-link:hover {
    color: #e55a2b;
    text-decoration: underline;
}

/* Mobile About Section */
.about-content-mobile {
    font-size: 0.9rem;
    color: var(--text-light);
    line-height: 1.6;
}

.btn-explore-locality-mobile {
    background: transparent;
    color: var(--text-dark);
    border: 1px solid var(--border-color);
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 0.9rem;
}

.btn-explore-locality-mobile:hover {
    background: var(--bg-light);
    color: var(--text-dark);
}

/* Mobile Brokers Section */
.brokers-scroll-mobile {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 10px 0;
}

.brokers-scroll-mobile::-webkit-scrollbar {
    display: none;
}

.broker-card-mobile {
    flex: 0 0 120px;
    text-align: center;
}

.broker-avatar-mobile {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto 10px;
    border: 3px solid var(--border-color);
}

.broker-avatar-mobile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.broker-name-mobile {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-dark);
    margin-bottom: 4px;
}

.broker-rating-mobile {
    font-size: 0.85rem;
    color: var(--text-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.broker-rating-mobile i {
    color: #FFD700;
    font-size: 0.9rem;
}

/* Mobile Promotional Banner */
.promotional-banner-mobile {
    background: #2C2C2C;
    margin: 30px 0;
}

.promo-banner-content {
    text-align: center;
    padding: 30px 20px;
}

.promo-title {
    color: var(--primary-orange);
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 20px;
}

.btn-learn-more-mobile {
    background: var(--white);
    color: var(--text-dark);
    border: none;
    padding: 12px 30px;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 500;
}

.btn-learn-more-mobile:hover {
    background: var(--bg-light);
    color: var(--text-dark);
}

/* Hide Desktop Sections on Mobile */
@media (max-width: 767.98px) {
    .main-content .row.g-3 {
        margin: 0;
    }

    .filter-sidebar {
        display: none !important;
    }

    .filter-sidebar.show {
        display: block !important;
    }

    .col-lg-3.d-none.d-lg-block {
        display: none !important;
    }

    .col-lg-9.col-md-8 {
        flex: 0 0 100%;
        max-width: 100%;
        padding: 0;
    }

    .col-lg-9.col-md-8>.row>.col-lg-9 {
        flex: 0 0 100%;
        max-width: 100%;
        padding: 0;
    }

    .property-listings .row.g-3 {
        margin: 0;
    }

    .property-listings .col-md-6 {
        flex: 0 0 100%;
        max-width: 100%;
        padding: 0 15px;
        margin-bottom: 20px;
    }
}

/* Mobile Responsive Adjustments */
@media (max-width: 767.98px) {
    body {
        padding: 0;
    }

    .main-content {
        padding: 0;
        background: #F8F8F8;
        background-position: center;
        background-repeat: repeat;
        background-size: auto;
    }

    .main-content .container-fluid {
        padding: 0;
    }

    .search-section {
        padding: 15px 0 20px;
        margin-bottom: 15px;
    }

    .results-header {
        padding: 0;
    }

    .results-count {
        font-size: 1.1rem;
        font-weight: 600;
    }

    .results-location {
        font-size: 0.9rem;
        color: var(--text-light);
    }

    .property-listings {
        padding: 0;
    }

    .btn-show-more {
        width: 100%;
        max-width: 300px;
        margin: 20px auto 0;
        padding: 12px 20px;
        background: var(--white);
        color: var(--text-dark);
        border: 1px solid var(--border-color);
        border-radius: 8px;
        font-weight: 500;
    }

    .btn-show-more:hover {
        background: var(--bg-light);
        color: var(--text-dark);
    }

    .pg-nearby-section {
        padding: 30px 0;
    }

    .pg-nearby-section .container {
        padding: 0;
    }

    .pg-nearby-section .d-flex {
        padding: 0 15px;
    }

    .about-section {
        padding: 30px 0;
        background: var(--white);
    }

    .about-section .container {
        padding: 0;
    }

    .brokers-section {
        padding: 30px 0;
        background: var(--white);
    }

    .brokers-section .container {
        padding: 0;
    }

    .promotional-banner-mobile {
        margin: 0;
    }

    .faq-section {
        padding: 30px 0;
        background: var(--white);
    }

    .faq-section .container {
        padding: 0;
    }

    .footer-section {
        padding: 40px 0 20px;
        background: var(--white);
    }

    .footer-section .container {
        padding: 0 15px;
    }
}

/* Mobile Footer Styles */
.mobile-footer-section {
    display: none !important;
    background: var(--white);
    padding: 24px 0 0;
}

@media only screen and (max-width: 767.98px) {
    .mobile-footer-section {
        display: block !important;
    }
}

@media (min-width: 768px) {
    .mobile-footer-section {
        display: none !important;
    }
}

.mobile-footer-content {
    padding: 0 16px 0;
}

.mobile-footer-brand {
    margin-bottom: 16px;
}

.mobile-footer-logo-img {
    height: 40px;
    width: auto;
    object-fit: contain;
}

.mobile-footer-main-tagline {
    font-size: 0.875rem;
    color: var(--text-dark);
    margin-bottom: 20px;
    line-height: 1.5;
}

.mobile-footer-section-group {
    margin-bottom: 20px;
}

.mobile-footer-heading {
    font-size: 0.9375rem;
    font-weight: bold;
    color: var(--text-dark);
    margin-bottom: 10px;
}

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

.mobile-footer-link {
    font-size: 0.8125rem;
    color: var(--text-dark);
    text-decoration: none;
    transition: color 0.3s;
}

.mobile-footer-link:hover {
    color: var(--primary-orange);
}

.mobile-footer-separator {
    font-size: 0.8125rem;
    color: var(--text-light);
    margin: 0 4px;
}

.mobile-footer-social-icons {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
    padding-top: 8px;
}

.mobile-social-icon {
    color: var(--text-dark);
    font-size: 1.25rem;
    text-decoration: none;
    transition: color 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mobile-social-icon:hover {
    color: var(--primary-orange);
}

.mobile-footer-copyright {
    background: #FFF5F0;
    padding: 16px;
    margin: 0 -16px 0;
    text-align: center;
}

.mobile-footer-copyright p {
    font-size: 0.75rem;
    color: var(--text-dark);
    margin: 0;
}

/* Header Section */
.header-section {
    background: var(--white);
    border-bottom: 1px solid var(--border-color);
    padding: 0;
}

.header-section .navbar {
    padding: 12px 0;
}

.navbar-brand h4 {
    color: var(--text-dark);
    font-size: 1.5rem;
    margin: 0;
    font-weight: bold;
}

.desktop-header-logo {
    height: 50px;
    width: auto;
    object-fit: contain;
}

.btn-icon {
    background: transparent;
    border: none;
    color: var(--text-dark);
    font-size: 1.5rem;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}

.btn-icon:hover {
    color: var(--primary-orange);
}

/* Hero Property Card Section */
.hero-property-card {
    background: var(--bg-light);
    padding: 24px 0 0 0;
}

.property-hero-card {
    background: #FFFFFF;
    border-radius: 10px;
    padding: 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 24px;
}

.property-hero-card .row {
    align-items: center;
}

.property-hero-card .col-lg-4 {
    display: flex;
    justify-content: flex-end;
}

.property-header {
    margin-bottom: 0;
    padding: 0;
}

.property-building-name {
    font-size: 0.95rem;
    color: #999999;
    font-weight: normal;
    margin-bottom: 8px;
    line-height: 1.3;
}

.property-heading {
    font-weight: 400;
    font-size: 18px;
    color: #676767;
    margin-bottom: 8px;
}

.property-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #333333;
    margin-bottom: 12px;
    line-height: 1.3;
    padding: 0;
}

.property-location {
    font-size: 1rem;
    color: #333333;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.location-icon {
    color: #F06A37;
    font-size: 1rem;
}

.text-link {
    color: #F06A37;
    text-decoration: none;
    margin-left: 4px;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-weight: 500;
}

.text-link:hover {
    text-decoration: underline;
}

.text-link i {
    font-size: 0.875rem;
}

.property-pid-badge {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
}

.pid-text {
    font-size: 0.875rem;
    color: #999999;
}

.verified-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #28a745;
    font-size: 0.875rem;
    font-weight: normal;
}

.verified-badge i {
    font-size: 1rem;
    color: #28a745;
}

/* Property Actions and Price Section */
.property-actions-price {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 16px;
    height: 100%;
    justify-content: flex-start;
}

.property-icons-price-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    justify-content: flex-end;
    flex-wrap: nowrap;
}

.property-icons-price-row .price-label-d {
    font-size: 0.875rem;
    color: #999999;
    font-weight: normal;
    line-height: 1.4;
    white-space: nowrap;
    margin: 2px 0px 0 0;
    padding: 0;
    display: block;
    flex-shrink: 0;
    padding-top: 2px;
}

.property-action-icons {
    display: flex;
    gap: 12px;
    margin: -4px 0px 0 0;
    align-items: center;
    flex-shrink: 0;
}

.property-price-section {
    flex-shrink: 0;
    min-width: 0;
}

.btn-action-icon {
    background: #F5F5F5;
    border: 1px solid #E0E0E0;
    color: #CCCCCC;
    font-size: 1.125rem;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s;
    cursor: pointer;
    padding: 0;
}

.btn-action-icon:hover {
    color: #999999;
    background: #EEEEEE;
    border-color: #D0D0D0;
}

.btn-action-icon i {
    color: #CCCCCC;
}

.btn-action-icon:hover i {
    color: #999999;
}

/* .btn-action-icon i {
    color: #FFFFFF;
} */

.property-price-section {
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    margin: 0;
    padding: 0;
    justify-content: flex-start;
    flex-shrink: 0;
    position: relative;
    width: auto;
    margin-left: 0;
    min-width: 0;
}

.price-amount-main {
    font-size: 1.5rem;
    font-weight: 700;
    color: #333333;
    line-height: 1.2;
    margin: 0;
    padding: 0;
    white-space: nowrap;
    display: block;
    margin-top: 0;
}

.property-price-section .price-period {
    font-size: 0.875rem;
    color: #999999;
    font-weight: normal;
    line-height: 1.4;
    margin: 0;
    padding: 0;
    white-space: nowrap;
    display: block;
}

.price-per-sqft {
    font-size: 0.875rem;
    color: #999999;
    font-weight: normal;
}

.property-status-box {
    background: #FEF8F6;
    border: 1px solid #D6501C;
    border-radius: 8px;
    padding: 12px 10px 12px 10px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    max-width: 174px;
    margin-top: auto;
}

.status-icon {
    color: #D4A574;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.status-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
}

.status-text {
    font-size: 0.95rem;
    color: #333333;
    font-weight: 500;
    line-height: 1.2;
}

.status-date {
    font-size: 0.8rem;
    color: #999999;
    font-weight: normal;
    line-height: 1.2;
}

/* Main Content */
.main-content {
    padding: 24px 0;
    background: var(--bg-light);
}

.container-fluid {
    padding-left: 24px;
    padding-right: 24px;
    max-width: 100%;
}

@media (min-width: 1200px) {
    .container-fluid {
        padding-left: 40px;
        padding-right: 40px;
    }
}

/* Equal Height Columns */
.main-content .row.g-3 {
    display: flex;
    align-items: flex-start;
}

.main-content .row.g-3>[class*="col-"] {
    display: flex;
    flex-direction: column;
}

.main-content .row.g-3>[class*="col-lg-8"] {
    max-width: none;
    flex: 0 0 66.666667%;
}

.main-content .row.g-3>[class*="col-lg-4"] {
    max-width: none;
    flex: 0 0 33.333333%;
}


/* Image Gallery Wrapper */
.image-gallery-wrapper {
    width: 100%;

    height: 444px;
    display: flex;
    align-items: stretch;
}

.gallery-main {
    position: relative;
    width: 100%;
    height: 444px;
    border-radius: 16px;
    overflow: hidden;
    background: var(--white);
}

.main-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 444px;
    object-fit: cover;
}

.gallery-image {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.gallery-image.active {
    opacity: 1;
}

.gallery-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    pointer-events: none;
}

.btn-gallery-nav {
    background: rgba(255, 255, 255, 0.9);
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: var(--text-dark);
    pointer-events: all;
    cursor: pointer;
    transition: all 0.3s;
}

.btn-gallery-nav:hover {
    background: var(--white);
    color: var(--primary-orange);
}

.gallery-counter {
    position: absolute;
    bottom: 16px;
    right: 16px;
    background: rgba(0, 0, 0, 0.6);
    color: var(--white);
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 0.875rem;
}

/* Content Sections */
.content-section {
    margin-bottom: 32px;
    padding: 24px;
    background: var(--white);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.content-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 40px;
}

.pg-neighborhood-section:last-child {
    height: 17%;
}

.section-heading {
    font-size: 1.25rem;
    font-weight: bold;
    color: var(--text-dark);
    margin-bottom: 16px;
}

/* Overview Section */
.overview-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: var(--gray-light);
    border-radius: 8px;
    font-size: 0.9375rem;
    color: var(--text-dark);
}

.overview-item i {
    font-size: 1.25rem;
    color: var(--black);
}

/* Buying Overview Items - Vertical Layout */
.buying-overview-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.buying-overview-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 0;
    background: transparent;
    border-radius: 0;
}

.buying-overview-icon {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 42px;
    height: 42px;
}

.buying-overview-icon svg {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
}

.buying-overview-text {
    font-size: 0.875rem;
    color: var(--text-dark);
    font-weight: 500;
    line-height: 1.4;
    text-align: left;
    margin: 0;
}

/* Amenities Grid */
.amenities-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 16px;
}

.amenity-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 16px;
    background: var(--gray-light);
    border-radius: 8px;
    font-size: 0.875rem;
    color: var(--text-dark);
}

.amenity-item i {
    background-color: #FFF5F0;
    border-radius: 40%;
    padding: 10px;
    font-size: 1.5rem;
    color: var(--black);
}

/* Premium Badges */
.premium-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.btn-premium-badge {
    padding: 8px 16px;
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 0.875rem;
    color: var(--text-dark);
    cursor: pointer;
    transition: all 0.3s;
}

.btn-premium-badge:hover {
    border-color: var(--primary-orange);
    color: var(--primary-orange);
}

/* Description Text */
.description-text {
    font-size: 0.9375rem;
    color: var(--text-light);
    line-height: 1.6;
}

.btn-explore-locality {

    color: #333333;
    border: 1px solid #FF5403;
    padding: 10px 24px;
    border-radius: 26.5px;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.3s;
}

.btn-explore-locality:hover {
    background: #e55a2b;
    color: var(--white);
}

/* Neighborhood Grid */
.neighborhood-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}


.neighborhood-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 0.875rem;
    color: var(--text-dark);
    cursor: pointer;
    transition: all 0.3s;
    width: fit-content;
    flex-shrink: 0;
    white-space: nowrap;
}

.neighborhood-item span {
    white-space: nowrap;
    flex-shrink: 0;
}

.neighborhood-item svg {
    flex-shrink: 0;
}

.neighborhood-item:hover {
    border-color: var(--primary-orange);
    color: var(--primary-orange);
}

.neighborhood-item i {
    font-size: 1.125rem;
    color: var(--black);
}

/* New Neighborhood Grid - Matching Image Design */
.new-neighborhood-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-start;
}

.new-neighborhood-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: #FFFFFF;
    border: 1px solid #FFCFB8;
    border-radius: 6px;
    font-size: 14px;
    color: #666666;
    font-weight: 400;
    cursor: pointer;
    transition: all 0.3s;
    width: fit-content;
    text-align: left;
}

.new-neighborhood-item svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.new-neighborhood-item svg path {
    fill: #666666;
}

.new-neighborhood-item span {
    color: #666666;
    font-size: 14px;
    font-weight: 400;
    white-space: nowrap;
}

.new-neighborhood-item:hover {
    background: #F5F0E8;
    border-color: #F5A781;
}

/* Property Details Cards Wrapper */
.property-details-cards-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    width: 100%;
    max-width: 100%;
    background: var(--bg-light);
    padding: 16px;
    border-radius: 8px;
    border: 1px solid #E0E0E0;
    box-sizing: border-box;
    align-content: start;
    overflow: hidden;
}

.detail-card-item {
    background: var(--white);
    border-radius: 8px;
    padding: 16px 14px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: none;
    transition: all 0.3s;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    height: auto;
}

.detail-card-item:hover {
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.12);
}

.detail-icon {
    font-size: 1.75rem;
    color: #000000;
    flex-shrink: 0;
    width: auto;
    min-width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.detail-text-wrapper {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    min-width: 0;
}

.detail-label-text {
    font-size: 0.75rem;
    color: #999999;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: 0.01em;
}

.detail-value-text {
    font-size: 0.9375rem;
    color: #333333;
    font-weight: 600;
    line-height: 1.3;
}

/* Broker Card */
.broker-card {
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 24px;
    margin-bottom: 24px;
}

.broker-section-title {
    font-size: 1.125rem;
    font-weight: bold;
    color: var(--text-dark);
    margin-bottom: 20px;
}

.broker-name-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.broker-name-row img{
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
}

.broker-name-row i {
    font-size: 2.5rem;
    color: var(--text-light);
}

.broker-name {
    font-size: 1rem;
    font-weight: bold;
    color: var(--text-dark);
    margin-bottom: 4px;
}

.broker-role {
    font-size: 0.875rem;
    color: var(--text-light);
}

.broker-verification {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--primary-green);
    font-size: 0.875rem;
    margin-bottom: 8px;
}

.broker-verification i {
    font-size: 1rem;
}

.broker-listing-count {
    font-size: 0.875rem;
    color: var(--text-light);
    margin-bottom: 8px;
}

.broker-agreement {
    font-size: 0.8125rem;
    color: var(--text-light);
    margin-bottom: 16px;
}

.btn-contact-broker {
    background: var(--primary-orange);
    color: var(--white);
    border: none;
    padding: 12px;
    border-radius: 6px;
    font-size: 0.9375rem;
    font-weight: 500;
    transition: all 0.3s;
}

.btn-contact-broker:hover {
    background: #e55a2b;
    color: var(--white);
}

/* Report Card */
.report-card {
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 15px;
    padding: 24px;
    margin-bottom: 24px;
    height: 21%;
}

.report-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.report-title {
    font-size: 1.125rem;
    font-weight: bold;
    color: var(--text-dark);
    margin: 0;
}

.report-question-icon {
    font-size: 1.125rem;
    color: var(--text-light);
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-light);
    border-radius: 50%;
}

.report-question {
    font-size: 0.9375rem;
    color: var(--text-dark);
    margin-bottom: 16px;
}

.report-buttons {
    display: flex;
    gap: 10px;
    margin-bottom: 0px;
}

.btn-report {
    flex: 1;
    padding: 10px 16px;
    background: var(--bg-light);
    border: none;
    border-radius: 20px;
    font-size: 0.875rem;
    color: var(--text-dark);
    transition: all 0.3s;
    font-weight: 400;
}

.btn-report:hover {
    background: #E0E0E0;
    color: var(--text-dark);
}

.btn-report-active {
    background: #666666;
    color: var(--white);
}

.btn-report-active:hover {
    background: #555555;
    color: var(--white);
}

.report-illustration {
    text-align: center;
    padding: 20px 0;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    left: 60px;
}

.report-house-image {
    max-width: 100%;
    height: auto;
    max-height: 200px;
    object-fit: contain;
    margin-top: -60px;
}

/* PG Nearby Section */
.pg-nearby-section {
    background: var(--bg-light);
    padding: 48px 0 60px 0;
}

.section-title-main {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--text-dark);
    margin: 0;
}

.carousel-controls-main {
    gap: 8px;
}

.btn-carousel-nav-main {
    width: 40px;
    height: 40px;
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-dark);
    transition: all 0.3s;
}

.btn-carousel-nav-main:hover {
    background: var(--primary-orange);
    border-color: var(--primary-orange);
    color: var(--white);
}

/* Property Card Nearby */
.property-card-nearby {
    background: var(--white);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: all 0.3s;
    height: 100%;
}

.property-card-nearby:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

.property-image-wrapper-nearby {
    position: relative;
    width: 100%;
    height: 200px;
    overflow: hidden;
}

.property-image-nearby {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.heart-btn-nearby {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-dark);
    font-size: 1.125rem;
    cursor: pointer;
    transition: all 0.3s;
}

.heart-btn-nearby:hover {
    background: var(--white);
    color: var(--primary-orange);
}

.property-content-nearby {
    padding: 16px;
}

.property-pid-nearby {
    font-size: 0.75rem;
    color: var(--text-light);
    margin-bottom: 8px;
}

.property-price-nearby {
    font-size: 0.9375rem;
    color: var(--text-dark);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.price-amount-nearby {
    font-weight: bold;
    color: var(--text-dark);
}

.verified-badge-nearby {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--primary-green);
    font-size: 0.75rem;
}

.verified-badge-nearby i {
    font-size: 0.875rem;
}

.property-title-nearby {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 6px;
    line-height: 1.3;
}

.property-location-nearby {
    font-size: 0.875rem;
    color: var(--text-light);
    margin-bottom: 8px;
}

.property-listed-nearby {
    font-size: 0.8125rem;
    color: var(--text-light);
}

/* Footer */
.footer-section {
    background: #333333;
    border-top: 1px solid var(--border-color);
    padding: 40px 0 20px;
}

.footer-brand h4 {
    color: var(--text-dark);
    font-size: 1.5rem;
    margin: 0;
}

.footer-logo-img {
    max-width: 200px;
    height: auto;
    display: block;
}

.footer-description {
    color: #FFFFFF;
    font-size: 0.9rem;
    margin-bottom: 15px;
}

.social-icons {
    display: flex;
    gap: 15px;
}

.social-icons a {
    color: #FFFFFF;
    font-size: 1.5rem;
    transition: color 0.3s;
}

.social-icons a:hover {
    color: var(--primary-orange);
}

.footer-heading {
    font-size: 1rem;
    font-weight: 600;
    color: #FFFFFF;
    margin-bottom: 15px;
}

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

.footer-links li {
    margin-bottom: 10px;
}

.footer-links a {
    color: #FFFFFF;
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.3s;
}

.footer-links a:hover {
    color: var(--primary-orange);
}

.contact-info p {
    color: #FFFFFF;
    font-size: 0.9rem;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}

.contact-info i {
    color: #FFFFFF;
}

.app-badges-footer {
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
}

.app-badge-footer {
    display: inline-flex;
    width: 48px;
    height: 48px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 12px;
    background: transparent;
    padding: 12px;
    transition: all 0.3s;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.app-badge-footer:hover {
    border-color: rgba(255, 255, 255, 0.6);
    transform: translateY(-2px);
    text-decoration: none;
}

.app-badge-footer img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.footer-bottom {
    border-top: 1px solid #FFFFFF;
    padding-top: 20px;
}

.footer-bottom p {
    color: #FFFFFF;
    font-size: 0.85rem;
    margin: 0;
}

/* Responsive Styles */
@media (max-width: 991.98px) {
    .container-fluid {
        padding-left: 16px;
        padding-right: 16px;
    }

    .main-content {
        padding: 16px 0;
    }

    .property-title {
        font-size: 1.5rem;
    }

    .gallery-main {
        padding-bottom: 50%;
    }

    .property-details-cards-wrapper {
        margin-top: 16px;
        grid-template-columns: repeat(2, 1fr);
    }

    .amenities-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 12px;
    }

    .property-actions-price {
        margin-top: 24px;
        align-items: flex-start;
    }

    .property-price-section {
        text-align: left;
        align-items: flex-start;
    }
}

@media (max-width: 767.98px) {
    .property-title {
        font-size: 1.25rem;
    }

    .gallery-main {
        min-height: 250px;
        aspect-ratio: 16 / 9;
    }

    .section-heading {
        font-size: 1.125rem;
    }

    .property-details-cards-wrapper {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .detail-card-item {
        padding: 16px 12px;
        min-height: 120px;
    }

    .detail-icon {
        font-size: 1.5rem;
        margin-bottom: 8px;
    }

    .detail-label-text {
        font-size: 0.8125rem;
        margin-bottom: 6px;
    }

    .detail-value-text {
        font-size: 0.875rem;
    }

    .amenities-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .neighborhood-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .carousel-controls-main {
        display: none !important;
    }

    .footer-section {
        padding: 32px 0 16px;
    }
}



/* Mobile App Banner */
.mobile-app-banner {
    background: #F5F5F5;
    border-bottom: 1px solid var(--border-color);
}

.mobile-app-logo {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

.banner-text {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 2px;
}

.banner-rating {
    font-size: 0.75rem;
    color: #666666;
    display: flex;
    align-items: center;
    gap: 4px;
}

.banner-rating .bi-star-fill {
    font-size: 0.75rem;
    color: #FFD700;
}

.banner-rating span {
    color: #666666;
}

.btn-use-app {
    background: var(--primary-orange);
    color: var(--white);
    border: none;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
}

.btn-close-banner {
    background: transparent;
    border: none;
    color: var(--text-dark);
    padding: 0;
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}

/* Mobile Header */
.mobile-header-section {
    background: var(--white);
    border-bottom: 1px solid var(--border-color);
}

.mobile-header-section .navbar {
    padding: 12px 0;
}

.mobile-header-logo {
    height: 32px;
    width: auto;
    object-fit: contain;
}

.btn-use-property {
    background: var(--white);
    color: var(--primary-orange);
    border: 1px solid var(--primary-orange);
    padding: 6px 16px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
}

.btn-icon-mobile {
    background: transparent;
    border: none;
    color: var(--text-dark);
    font-size: 1.5rem;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Mobile Property Image Section */
.mobile-property-image-section {
    background: var(--white);
}

.mobile-property-image-wrapper {
    position: relative;
    width: 100%;
    height: 250px;
    overflow: hidden;
}

.mobile-property-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mobile-gallery-image {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.mobile-gallery-image.active {
    opacity: 1;
}

.mobile-image-overlay {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mobile-right-icons {
    display: flex;
    gap: 8px;
}

.mobile-icon-btn {
    background: rgba(0, 0, 0, 0.4); /* no opacity issue */
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mobile-icon-btn i {
    color: #fff;   /* pure white */
    font-size: 16px;
}

.mobile-heart-btn,
.mobile-share-btn,
.mobile-more-btn {
    background: rgba(0, 0, 0, 0.4);
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-dark);
    font-size: 1rem;
    padding: 8px
}

.mobile-image-counter {
    top: 215px;
    right: 13px;
    position: absolute;
    background: rgba(0, 0, 0, 0.6);
    color: var(--white);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
}

.mobile-property-title-section {
    position: relative;
    margin-bottom: -35px;
    top: -30px;
    border-radius: 34px;
    padding: 16px;
    background: var(--white);
}

.mobile-property-title {
    font-size: 1.25rem;
    font-weight: bold;
    color: var(--text-dark);
    margin-bottom: 8px;
    text-align: center;
}

.mobile-pid-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    justify-content: center;
}

.mobile-pid-text {
    font-size: 0.75rem;
    color: var(--text-light);
}

.mobile-verified-badge {
    color: var(--primary-green);
    font-size: 0.875rem;
}

.mobile-location-text {
    padding: 0px 4px;
    position: relative;
    display: flex;
    font-size: 0.875rem;
    color: var(--text-dark);
    justify-content: space-between;
}

.mobile-map-link {
    color: var(--primary-orange);
    text-decoration: none;
    margin-left: 4px;
}

/* Mobile Property Status Badges */
.mobile-property-status-badges {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    margin-top: -20px;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.mobile-ready-to-move-box {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: #FFF5F0;
    border: 1px solid #FF6B35;
    border-radius: 8px;
    flex: 1 1 auto;
    min-width: 140px;
    flex-shrink: 1;
}

.mobile-house-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.mobile-ready-to-move-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mobile-ready-text {
    font-size: 10px;
    font-weight: 500;
    color: var(--text-dark);
    line-height: 1.2;
}

.mobile-ready-date {
    font-size: 12px;
    font-weight: 400;
    color: var(--text-light);
    line-height: 1.2;
}

.mobile-rera-badge-box {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    background: #091E42;
    border-radius: 6px;
    flex-shrink: 0;
    white-space: nowrap;
}

.mobile-rera-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.mobile-rera-text {
    font-size: 0.75rem;
    font-weight: 600;
    color: #8FFFF9;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    white-space: nowrap;
}

.mobile-zero-brokerage-box {
    display: flex;
    align-items: center;
    padding: 8px 10px;
    background: #000000;
    border-radius: 6px;
    flex-shrink: 0;
    white-space: nowrap;
}

.mobile-zero-brokerage-text {
    font-size: 0.65rem;
    font-weight: 600;
    color: #FF6B35;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Mobile Property Details Grid */
.mobile-property-details-section {
    background: var(--white);
    padding: 16px 0;
    margin-bottom: 0px;
}

.mobile-details-wrapper {
    background: var(--white);
    border: 1px solid #D9D9D91A;
    box-shadow: 2px 2px 10px 0px #00000014;
    border-radius: 12px;
    padding-left: 6px;
    padding-right: 6px;
    padding-top: 10px;
    padding-bottom: 10px;
    margin: 0 16px;
}

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

.mobile-detail-box {
    background: var(--white);
    border-radius: 10px;
    padding-left: 4px;
    padding-right: 6px;
    padding-top: 12px;
    padding-bottom: 12px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.mobile-detail-box svg {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
}

.mobile-detail-box img {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
}

.mobile-detail-box .detail-text-wrapper {
    flex: 1;
    display: flex;
    gap: 0px;
    flex-direction: column;
}

.mobile-detail-label {
    font-size: 0.75rem;
    color: #999999;
    margin-bottom: 4px;
    display: block;
    font-weight: 400;
}

.mobile-detail-value {
    font-size: 14px;
    color: var(--text-dark);
    font-weight: 600;
    display: block;
}

/* Mobile Overview Section */
.mobile-overview-section {
    background: white;
    padding: 8px 16px;
    margin-bottom: 0px;
}

.mobile-overview-card {
    background: var(--white);
    border-radius: 12px;
    padding: 20px 16px;
    border: 1px solid #D9D9D91A;
    box-shadow: 2px 2px 10px 0px #00000014;
}

.mobile-section-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: -10px;
    margin-top: 0;
}

.mobile-overview-divider {
    height: 1px;
    background: #E5E5E5;
    margin-bottom: 16px;
    width: 100%;
}

.mobile-overview-boxes {
    display: flex;
    gap: 20px;
    align-items: center;
    margin-top: 10px;
}

.mobile-overview-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.875rem;
    color: var(--text-dark);
    font-weight: 500;
}

.mobile-overview-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #FFF5F0;
    border: 1px solid #E5E5E5;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.mobile-overview-icon svg {
    width: 20px;
    height: 20px;
}

/* Mobile Pricing Options */
.mobile-pricing-section {
    background: white;
    padding: 10px 16px;
    margin-bottom: 0px;
}

.mobile-pricing-card {
    background: var(--white);
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.mobile-pricing-options {
    display: flex;
    flex-direction: row;
    gap: 12px;
    align-items: stretch;
}

.mobile-pricing-btn {
    background: var(--white);
    border-radius: 22px;
    padding: 14px 12px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    transition: all 0.3s;
    text-align: left;
    border: 1px solid #666666;
    cursor: pointer;
    flex: 0 auto;
    max-width: 116px;
    height: 44px;
}

.mobile-pricing-btn:hover {
    border-color: #CCCCCC;
    background: var(--white);
}

.mobile-pricing-btn:active {
    transform: scale(0.98);
}

.pricing-option-label {
    font-size: 12px;
    color: #666666;
    font-weight: 400;
    margin-bottom: 4px;
    display: block;
    line-height: 1.2;
}

.pricing-option-price {
    font-size: 0.875rem;
    font-weight: 600;
    color: #666666;
    display: block;
    line-height: 1.2;
}

/* Mobile Content Sections */
.mobile-content-section {
    margin-top: 20px;
    padding: 0px 2px 0px 0px;
    margin-bottom: 12px;
}

.mobile-content-section-report {
    background: var(--white);
    margin-top: -9px;
    padding: 0px 16px 12px 16px;
    margin-bottom: 0px;
}

.mobile-description-card {
    background: var(--white);
    border-radius: 12px;
    padding: 20px 16px;
    border: 1px solid #D9D9D91A;
    box-shadow: 2px 2px 10px 0px #00000014;
}

.mobile-description-text {
    font-size: 12px;
    color: #676767;
    line-height: 1.6;
    margin-top: 0px;
    margin-bottom: 0;
    text-align: left;
    font-weight: 400;
    letter-spacing: 0.4px;
}

.btn-explore-locality-mobile {
    background: var(--primary-orange);
    color: var(--white);
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
}

/* Mobile Amenities Grid */
.mobile-amenities-card {
    background: var(--white);
    border-radius: 12px;
    padding: 20px 16px;
    border: 1px solid #D9D9D91A;
    box-shadow: 2px 2px 10px 0px #00000014;
}

.mobile-section-divider {
    width: 100%;
    margin-bottom: 16px;
    margin-top: 12px;
}

.mobile-amenities-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px 12px;
}

.mobile-amenity-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.mobile-amenity-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #FFF5F0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.mobile-amenity-icon svg {
    width: 20px;
    height: 20px;
}

.mobile-amenity-item span {
    font-size: 12px;
    color: #666666;
    font-weight: 500;
    line-height: 1.2;
}

/* New Mobile Amenities Grid - 2 Rows Layout */
.new-mobile-amenities-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: auto;
    gap: 16px 9px;
    justify-content: start;
}

.new-mobile-amenity-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    justify-content: flex-start;
    text-align: left;
}

.new-mobile-amenity-icon {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 50%;
    background: #F5F0E8;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.new-mobile-amenity-icon svg {
    width: 18px;
    height: 18px;
}

.new-mobile-amenity-item span {
    font-size: 12px;
    color: #333333;
    font-weight: 500;
    line-height: 1.4;
    text-align: left;
}

/* Mobile Premium Badges */
.mobile-premium-card {
    background: var(--white);
    border-radius: 12px;
    padding: 20px 16px;
    border: 1px solid #D9D9D91A;
    box-shadow: 2px 2px 10px 0px #00000014;
}

.mobile-premium-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 25px;
    margin-top: 0px;
}

.mobile-premium-badge {
    background: var(--white);
    border: 1px solid #666666;
    border-radius: 20px;
    padding: 8px;
    font-size: 12px;
    color: #666666;
    font-weight: 400;
    transition: all 0.3s;
    cursor: pointer;
    white-space: nowrap;
}

.mobile-premium-badge:hover {
    border-color: #CCCCCC;
    background: var(--white);
    color: #333333;
}

/* Mobile Neighborhood Grid */
.mobile-neighborhood-card {
    background: var(--white);
    border-radius: 12px;
    padding: 20px 5px 20px 16px;
    border: 1px solid #D9D9D91A;
    box-shadow: 2px 2px 10px 0px #00000014;
}

.mobile-neighborhood-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 4px;
    margin-top: 0px;
}

.mobile-neighborhood-item {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 6px 4px;
    background: var(--white);
    border: 1px solid #666666;
    border-radius: 20px;
    font-size: 10px;
    color: #666666;
    font-weight: 400;
    cursor: pointer;
    transition: all 0.3s;
    width: fit-content;
    /* 👈 key */
    white-space: nowrap;
}

.width-1 {
    width: 91px;
}

.width-2 {
    width: 81px;
}

.width-3 {
    width: 111px;
}

.width-4 {
    width: 100px;
}

.width-5 {
    width: 89px;
}

.width-6 {
    width: 101px;
}

.width-8 {
    width: 122px;
}

.mobile-neighborhood-item:hover {
    border-color: #CCCCCC;
    background: var(--white);
}

.mobile-neighborhood-item svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.mobile-neighborhood-item span {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Mobile Report Card */
.mobile-report-card {
    background: var(--white);
    border-radius: 12px;
    padding: 20px 16px;
    border: 1px solid #D9D9D91A;
    box-shadow: 2px 2px 10px 0px #00000014;
}

.mobile-report-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.mobile-report-title {
    font-size: 1rem;
    font-weight: 700;
    color: #333333;
    margin: 0;
}

.mobile-report-question-icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mobile-report-question-icon svg {
    width: 16px;
    height: 16px;
}

.mobile-report-content-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 0;
}

.mobile-report-text-section {
    flex: 1;
    min-width: 0;
}

.mobile-report-question {
    font-size: 0.875rem;
    color: #333333;
    margin-bottom: 12px;
    margin-top: 0;
}

.mobile-report-buttons {
    position: relative;
    top: 10px;
    display: flex;
    flex-direction: row;
    gap: 8px;
    flex-wrap: nowrap;
    align-items: center;
}

.mobile-btn-report {
    padding: 8px 11px;
    background: var(--white);
    border: 1px solid #E5E5E5;
    border-radius: 20px;
    font-size: 0.8125rem;
    color: #333333;
    font-weight: 400;
    white-space: nowrap;
    transition: all 0.3s;
    cursor: pointer;
}

.mobile-btn-report:hover {
    border-color: #CCCCCC;
    background: var(--white);
    color: #333333;
}

.mobile-btn-report-active {
    background: #333333;
    border-color: #333333;
    color: var(--white);
}

.mobile-btn-report-active:hover {
    background: #333333;
    border-color: #333333;
    color: var(--white);
}

.mobile-report-illustration {
    flex-shrink: 0;
    width: 88px;
    height: 57px;
    line-height: 0;
}

.mobile-report-illustration svg {
    width: 100%;
    height: 100%;
}

/* Mobile Contact Owner Section */
.mobile-contact-owner-wrapper {
    position: relative;
}

.mobile-contact-owner-spacer {
    /* Height will be set via JavaScript to match button height */
    transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    overflow: hidden;
}

.mobile-contact-owner-section {
    width: 100%;
    background: var(--white);
    padding: 16px;
    margin-bottom: 0px;
    position: fixed !important;
    bottom: 0 !important;
    left: 0;
    right: 0;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
    z-index: 9999;
    transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-contact-owner-section.sticky-disabled {
    position: fixed !important;
    bottom: 0 !important;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
}

/* Spacer should always maintain height since button is always fixed */
/* Removed empty rule - spacer height is maintained by JavaScript */

.mobile-contact-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.mobile-price-display {
    display: flex;
    flex-direction: column;
}

.mobile-price-amount {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--text-dark);
}

.mobile-price-period {
    font-size: 0.875rem;
    color: var(--text-light);
}

.btn-contact-owner-mobile {
    background: var(--primary-orange);
    color: var(--white);
    border: none;
    padding: 12px 24px;
    border-radius: 6px;
    font-size: 0.9375rem;
    font-weight: 500;
    white-space: nowrap;
}

.btn-contact-owner-mobile:hover {
    background: #e55a2b;
    color: var(--white);
}

/* Mobile Similar Properties Section */
.mobile-similar-properties-section {
    background: var(--white);
    padding: 16px;
    margin-bottom: 12px;
}

.mobile-see-all-link {
    color: var(--primary-orange);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
}

.mobile-similar-properties-scroll {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding: 8px 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.mobile-similar-property-card {
    min-width: 280px;
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
}

.mobile-similar-image-wrapper {
    width: 100%;
    height: 180px;
    overflow: hidden;
}

.mobile-similar-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mobile-similar-content {
    padding: 12px;
}

.mobile-similar-pid {
    font-size: 0.75rem;
    color: var(--text-light);
    margin-bottom: 4px;
}

.mobile-similar-price {
    font-size: 0.875rem;
    font-weight: bold;
    color: var(--text-dark);
    margin-bottom: 6px;
}

.mobile-similar-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 4px;
}

.mobile-similar-location {
    font-size: 0.8125rem;
    color: var(--text-light);
    margin-bottom: 4px;
}

.mobile-similar-listed {
    font-size: 0.75rem;
    color: var(--text-light);
}

/* Mobile Membership Banner */
.mobile-membership-banner {
    background: var(--white);
    padding: 16px;
    margin-bottom: 0px;
}

.mobile-membership-card {
    background: linear-gradient(360deg, #000000 0%, #333333 100%);
    border-radius: 17px;
    padding: 20px;
    text-align: center;
}

.mobile-membership-title {
    font-size: 1rem;
    font-weight: 500;
    color: var(--white);
    margin-bottom: 6px;
}

.mobile-membership-subtitle {
    background: linear-gradient(90deg, #FED699 0%, #FFA800 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 600;
    font-size: 28px;
    margin-bottom: 16px;
}

.btn-membership-plan {
    background: var(--white);
    color: var(--primary-orange);
    border: none;
    padding: 6px 20px;
    border-radius: 13px;
    font-size: 10px;
    width: 140px;
    height: 26px;
    font-weight: 600;
}

.btn-membership-plan:hover {
    background: #e55a2b;
    color: var(--white);
}

/* Mobile Footer Styles */
.mobile-footer-section {
    background: var(--white);
    padding: 24px 0 0;
}

.mobile-footer-content {
    padding: 0 16px 0;
}

.mobile-footer-brand {
    margin-bottom: 16px;
}

.mobile-footer-logo-img {
    height: 40px;
    width: auto;
    object-fit: contain;
}

.mobile-footer-main-tagline {
    font-size: 0.875rem;
    color: var(--text-dark);
    margin-bottom: 20px;
    line-height: 1.5;
}

.mobile-footer-section-group {
    margin-bottom: 20px;
}

.mobile-footer-heading {
    font-size: 0.9375rem;
    font-weight: bold;
    color: var(--text-dark);
    margin-bottom: 10px;
}

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

.mobile-footer-link {
    font-size: 0.8125rem;
    color: var(--text-dark);
    text-decoration: none;
    transition: color 0.3s;
}

.mobile-footer-link:hover {
    color: var(--primary-orange);
}

.mobile-footer-separator {
    font-size: 0.8125rem;
    color: var(--text-light);
    margin: 0 4px;
}

.mobile-footer-social-icons {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
    padding-top: 8px;
}

.mobile-social-icon {
    color: var(--text-dark);
    font-size: 1.25rem;
    text-decoration: none;
    transition: color 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mobile-social-icon:hover {
    color: var(--primary-orange);
}

.mobile-footer-copyright {
    background: #FFF5F0;
    padding: 16px;
    margin: 0 -16px 0;
    text-align: center;
}

.mobile-footer-copyright p {
    font-size: 0.75rem;
    color: var(--text-dark);
    margin: 0;
}

/* Hide desktop sections on mobile */
@media (max-width: 991.98px) {
    .hero-property-card {
        display: none !important;
    }

    /* Hide only filter sidebar, not listings container */
    .main-content .row.g-3>.col-lg-3.filter-sidebar {
        display: none !important;
    }

    /* Explicitly show listings container on mobile */
    .main-content .row.g-3>.col-lg-9.col-md-8 {
        display: flex !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    .main-content .row.g-3>.col-lg-9.col-md-8>.row>.col-lg-9 {
        display: block !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    .main-content .row.g-3>.col-lg-9.col-md-8 .property-listings {
        display: block !important;
    }
}

/* Container Fluid with exact margins */
.container-fluid {
    padding-left: 40px;
    padding-right: 40px;
    max-width: 100%;
}



@media (max-width: 991.98px) {
    .container-fluid {
        padding-left: 24px;
        padding-right: 24px;
    }
}

@media (max-width: 767.98px) {
    .container-fluid {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* Header Section */
.header-section {
    background: var(--white);
    border-bottom: 1px solid var(--border-color);
    padding: 0;
}

.header-section .navbar {
    padding: 12px 0;
}

.navbar-logo {
    height: 50px;
    width: auto;
    object-fit: contain;
    display: block;
}

.btn-download-app {
    background: var(--primary-orange);
    color: var(--white);
    border: none;
    padding: 8px 16px;
    border-radius: 26px;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.3s;
    display: flex;
    align-items: center;
}

.btn-download-app:hover {
    background: #e55a2b;
    color: var(--white);
}

.btn-list-property {
    background: var(--primary-orange);
    color: var(--white);
    border: none;
    padding: 8px 16px;
    border-radius: 26px;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.3s;
}

.btn-list-property:hover {
    background: #e55a2b;
    color: var(--white);
}

.btn-icon {
    background: transparent;
    border: none;
    color: var(--text-dark);
    font-size: 1.5rem;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}

.btn-icon:hover {
    color: var(--primary-orange);
}

/* Main Content */
.main-content {
    padding: 24px 0;
    background: var(--white);
}

/* Property Image Carousel */
.property-image-carousel-wrapper {
    width: 100%;
    margin: 0;
    padding: 0;
}

.property-image-carousel {
    position: relative;
    width: 100%;
    height: 500px;
    border-radius: 40px;
    overflow: hidden;
    background: var(--bg-light);
    margin-bottom: 24px;
}

/* Mobile Section - Property Details Page */
@media (max-width: 991.98px) {
    .main-content-details-pg {
        padding: 0 !important;
    }

    /* Mobile Carousel Wrapper - Full Screen */
    .property-image-carousel-wrapper.d-lg-none {
        position: relative;
        width: 100vw;
        margin-left: calc(-50vw + 50%);
        margin-right: calc(-50vw + 50%);
        padding: 0;
        z-index: 1;
        overflow: hidden;
    }

    /* Mobile Carousel Container */
    .property-image-carousel-wrapper.d-lg-none .property-image-carousel {
        height: 400px;
        border-radius: 0;
        margin-bottom: 0;
        width: 100%;
        position: relative;
        overflow: hidden;
    }

    /* Mobile Header - Overlaid on Image */
    .property-image-carousel-wrapper.d-lg-none .mobile-header-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        z-index: 30;
        padding: 12px 16px;
        padding-top: calc(12px + env(safe-area-inset-top));
        background: transparent;
    }

    .property-image-carousel-wrapper.d-lg-none .mobile-navbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    /* Mobile Carousel Images */
    .property-image-carousel-wrapper.d-lg-none .carousel-images {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 400px;
        z-index: 1;
    }

    .property-image-carousel-wrapper.d-lg-none .carousel-images .main-property-image {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: 1;
    }

    /* Mobile Counter - Above Info Card */
    .property-image-carousel-wrapper.d-lg-none .carousel-counter-mobile {
        position: absolute;
        bottom: 190px;
        right: 16px;
        background: rgba(255, 255, 255, 0.9);
        color: #333333;
        padding: 6px 12px;
        border-radius: 20px;
        font-size: 0.875rem;
        font-weight: 500;
        z-index: 25;
        backdrop-filter: blur(10px);
    }

    /* Mobile Property Info Card - Overlapping Bottom */
    .property-image-carousel-wrapper.d-lg-none .mobile-property-info-card {
        position: absolute;
        bottom: -20px;
        left: 0;
        right: 0;
        background: #FFFFFF;
        border-radius: 22px 22px 0 0;
        padding: 20px 16px;
        z-index: 20;
        width: 100%;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    }

    .property-image-carousel-wrapper.d-lg-none .mobile-property-info-card .pid-tag-mobile {
        margin-bottom: 8px;
    }

    .property-image-carousel-wrapper.d-lg-none .mobile-property-info-card .pid-tag-text {
        display: inline-block;
        padding: 6px 12px;
        background: #F5F5F5;
        border-radius: 6px;
        font-size: 0.75rem;
        color: #666666;
        font-weight: 500;
    }

    .property-image-carousel-wrapper.d-lg-none .mobile-property-info-card .property-title-main {
        font-size: 1.25rem;
        font-weight: 700;
        color: #333333;
        margin-bottom: 8px;
        line-height: 1.3;
    }

    .property-image-carousel-wrapper.d-lg-none .mobile-property-info-card .property-location-main {
        font-size: 0.875rem;
        color: #666666;
        display: flex;
        align-items: flex-start;
        gap: 6px;
        line-height: 1.4;
        margin-bottom: 0;
    }

    .property-image-carousel-wrapper.d-lg-none .mobile-property-info-card .property-location-main .location-icon {
        color: #666666;
        font-size: 1rem;
        margin-top: 2px;
        flex-shrink: 0;
    }

    /* New Owner Card - Mobile - Property Details Page Only */
    .new-owner-card-mobile {
        background: #FFFFFF;
        border-radius: 50px;
        padding: 16px;
        box-shadow: 2px 2px 10px 0px #0000000F;
        border: 1px solid #D9D9D966;
        margin: 0 16px;
    }

    .new-owner-header-mobile {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 0;
    }

    .new-owner-avatar-mobile {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        overflow: hidden;
        flex-shrink: 0;
    }

    .new-owner-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .new-owner-name-mobile {
        font-size: 1rem;
        font-weight: 600;
        color: #333333;
        margin-bottom: 4px;
        line-height: 1.2;
    }

    .new-owner-role-mobile {
        font-size: 0.875rem;
        color: #999999;
        line-height: 1.2;
    }

    .new-owner-menu-btn {
        background: transparent;
        border: none;
        color: #666666;
        font-size: 1.25rem;
        padding: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: color 0.3s;
    }

    .new-owner-menu-btn:hover {
        color: #333333;
    }

    .new-owner-menu-btn i {
        font-size: 1.25rem;
    }

    /* New Report Card - Mobile - Property Details Page Only */
    .new-report-card-mobile {
        background: #FFFFFF;
        border: 1px solid #E5E5E5;
        border-radius: 12px;
        padding: 16px;
        margin: 0 16px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }

    .new-report-header-mobile {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 12px;
    }

    .new-report-title-mobile {
        font-size: 1.125rem;
        font-weight: 700;
        color: #333333;
        margin: 0;
        line-height: 1.3;
    }

    .new-report-question-icon-mobile {
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #666666;
        border-radius: 50%;
        color: #666666;
        font-size: 0.875rem;
        flex-shrink: 0;
    }

    .new-report-question-mobile {
        font-size: 0.9375rem;
        color: #666666;
        margin-bottom: 16px;
        line-height: 1.4;
    }

    .new-report-buttons-mobile {
        display: flex;
        flex-direction: row;
        gap: 10px;
        flex-wrap: wrap;
    }

    .new-btn-report-mobile {
        flex: 1 1 auto;
        min-width: 0;
        padding: 5px 5px;
        background: #F5F5F5;
        border: 1px solid #E5E5E5;
        border-radius: 20px;
        font-size: 12px;
        color: #666666;
        font-weight: 400;
        text-align: center;
        cursor: pointer;
        transition: all 0.3s;
        font-family: 'Konnect', sans-serif;
    }

    .new-btn-report-mobile:hover {
        background: #EEEEEE;
        border-color: #CCCCCC;
    }

    .new-btn-report-active-mobile {
        background: #333333 !important;
        border-color: #333333 !important;
        color: #FFFFFF !important;
    }

    .new-btn-report-active-mobile:hover {
        background: #222222 !important;
        border-color: #222222 !important;
        color: #FFFFFF !important;
    }
}

.carousel-images {
    position: relative;
    width: 100%;
    height: 100%;
}

.main-property-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.main-property-image.active {
    opacity: 1;
}

.carousel-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 16px;
    pointer-events: none;
}

.btn-share {
    background: rgba(255, 255, 255, 0.9);
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: var(--text-dark);
    pointer-events: all;
    cursor: pointer;
    transition: all 0.3s;
}

.btn-share:hover {
    background: var(--white);
    color: var(--primary-orange);
}

.btn-see-all-photos {
    background: rgba(0, 0, 0, 0.6);
    color: var(--white);
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    pointer-events: all;
    cursor: pointer;
    transition: all 0.3s;
    position: absolute;
    bottom: 40px;
    right: 40px;
}

.btn-see-all-photos:hover {
    background: rgba(0, 0, 0, 0.8);
    color: var(--white);
}

.carousel-dots {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    pointer-events: none;
}

.dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    transition: all 0.3s;
}

.dot.active {
    background: var(--white);
}

/* Property ID Section */
.property-id-section {
    display: flex;
    align-items: center;
    gap: 30px;
}

.pid-text {
    font-size: 0.875rem;
    color: var(--text-light);
}

.verified-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--primary-green);
    font-size: 0.875rem;
    font-weight: 500;
}

.verified-badge i {
    font-size: 1rem;
}

/* Property Title */
.property-title-main {
    font-size: 1.75rem;
    font-weight: bold;
    color: var(--text-dark);
    margin-bottom: 12px;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 250px;
}

/* Property Location */
.property-location-main {
    font-size: 1rem;
    color: var(--text-dark);
    display: flex;
    align-items: center;
    gap: 6px;
}

.location-icon {
    color: var(--primary-orange);
    font-size: 1rem;
}

/* Property Price */
.property-price-main {
    font-size: 2rem;
    font-weight: bold;
    color: var(--text-dark);
    line-height: 1.2;
    margin-bottom: 24px;
}

.price-amount {
    font-size: 2rem;
    font-weight: bold;
}

.price-period {
    font-size: 1.5rem;
    font-weight: normal;
}

/* Amenities Section */
.amenities-section {
    margin-top: 24px;
}

.amenities-row {
    display: flex;
    flex-wrap: wrap;
    gap: 60px;
}

.amenity-item-main {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9375rem;
    color: var(--text-dark);
}

.amenity-icon {
    font-size: 1.5rem;
    color: var(--text-dark);
    background-color: #FFF5F0;
    border-radius: 80%;
    padding: 10px;
}

/* Content Sections */
.content-section {
    margin-bottom: 32px;
    padding: 24px;
    background: var(--white);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.section-heading {
    font-size: 1.25rem;
    font-weight: bold;
    color: var(--text-dark);
    margin-bottom: 5px;
}

/* Premium Badges */
.premium-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.btn-premium-badge {
    padding: 8px 16px;
    background: var(--white);
    border: 1px solid #666666;
    border-radius: 20px;
    font-size: 0.875rem;
    color: #666666;
    cursor: pointer;
    transition: all 0.3s;
    font-family: 'Konnect', sans-serif;
}

.btn-premium-badge:hover {
    border-color: var(--primary-orange);
    color: var(--primary-orange);
}

/* Neighborhood Grid */
.neighborhood-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.neighborhood-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 11px;
    background: var(--white);
    border: 1px solid #666666;
    border-radius: 20px;
    font-size: 0.875rem;
    color: #333333;
    cursor: pointer;
    transition: all 0.3s;
    width: fit-content;
    flex-shrink: 0;
    white-space: nowrap;
}

.neighborhood-item span {
    white-space: nowrap;
    flex-shrink: 0;
}

.neighborhood-item svg {
    flex-shrink: 0;
}

.neighborhood-item:hover {
    border-color: var(--primary-orange);
    color: var(--primary-orange);
}

.neighborhood-item i {
    font-size: 1.125rem;
    color: #666666;
}

.neighborhood-item:hover svg {
    color: var(--primary-orange);
}

/* Description Text */
.description-text {
    font-size: 0.9375rem;
    color: var(--text-light);
    line-height: 1.6;
}

/* Contact Card */
.contact-card {
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.contact-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--gray-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: var(--text-light);
    flex-shrink: 0;
}

.contact-name {
    font-size: 1rem;
    font-weight: bold;
    color: var(--text-dark);
    margin-bottom: 4px;
}

.contact-role {
    font-size: 0.875rem;
    color: var(--text-light);
}

.btn-contact-number {
    background: var(--primary-orange);
    color: var(--white);
    border: none;
    padding: 12px;
    border-radius: 6px;
    font-size: 0.9375rem;
    font-weight: 500;
    transition: all 0.3s;
    font-family: 'Konnect', sans-serif;
}

.btn-contact-number:hover {
    background: #e55a2b;
    color: var(--white);
}

/* Report Card */
.report-card {
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.report-title {
    font-size: 1.125rem;
    font-weight: bold;
    color: var(--text-dark);
    margin: 0;
}

.report-question-icon {
    font-size: 1.125rem;
    color: var(--text-light);
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gray-light);
    border-radius: 50%;
    flex-shrink: 0;
}

.report-question {
    font-size: 0.9375rem;
    color: var(--text-light);
    margin-bottom: 16px;
}

.report-buttons {
    display: flex;
    flex-direction: row;
    gap: 10px;
    flex-wrap: wrap;
}

.btn-report {
    min-width: 0;
    padding: 5px 4px;
    background: var(--bg-light);
    border: none;
    border-radius: 20px;
    font-size: 10px;
    color: var(--text-dark);
    transition: all 0.3s;
    font-weight: 400;
    text-align: center;
    font-family: 'Konnect', sans-serif;
    word-wrap: break-word;
    overflow-wrap: break-word;
    box-sizing: border-box;
}

.btn-report:hover {
    background: #E0E0E0;
    color: var(--text-dark);
}

.btn-report-active {
    background: #333333;
    color: var(--white);
}

.btn-report-active:hover {
    background: #222222;
    color: var(--white);
}

/* Similar Properties Section */
.similar-properties-section {
    background: white;
    padding: 48px 0;
}

.similar-properties-wrapper {
    position: relative;
    width: 100%;
}

.similar-properties-wrapper .container {
    position: relative;
}

.section-title-main {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--text-dark);
    margin: 0;
}

.similar-properties-carousel {
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
    width: 100%;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE and Edge */
}

.similar-properties-carousel::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari, Opera */
}

.similar-properties-slider {
    display: flex;
    gap: 16px;
    width: fit-content;
}

.similar-properties-slider .property-card-similar {
    width: calc(25% - 12px);
    min-width: calc(25% - 12px);
    flex-shrink: 0;
}

.property-card-similar {
    background: var(--white);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: all 0.3s;
    height: 100%;
    margin-bottom: 0;
}

.similar-properties-section .row.g-3 {
    margin-left: 0;
    margin-right: 0;
}

.similar-properties-section .row.g-3>* {
    padding-left: 12px;
    padding-right: 12px;
}

.property-card-similar:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

.property-image-wrapper-similar {
    position: relative;
    width: 100%;
    height: 200px;
    overflow: hidden;
}

.property-image-similar {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.property-content-similar {
    padding: 16px;
    position: relative;
}

.property-content-similar::before {
    content: '';
    position: absolute;
    top: -18px;
    left: 0;
    right: 0;
    height: 20px;
    background: var(--white);
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}

.property-pid-similar {
    font-size: 0.75rem;
    color: var(--text-light);
    margin-bottom: 8px;
}

.property-price-similar {
    font-size: 0.9375rem;
    color: var(--text-dark);
    margin-bottom: 8px;
    font-weight: bold;
}

.property-title-similar {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 6px;
    line-height: 1.3;
}

.property-location-similar {
    font-size: 0.875rem;
    color: var(--text-light);
    margin-bottom: -10px;
}

.property-listed-similar {
    font-size: 0.8125rem;
    color: var(--text-light);
}

.btn-carousel-prev,
.btn-carousel-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-dark);
    transition: all 0.3s;
    z-index: 10;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
}

.btn-carousel-prev i,
.btn-carousel-next i {
    font-size: 20px;
    line-height: 1;
}

.btn-carousel-prev {
    left: 0;
}

.btn-carousel-next {
    right: 0;
}

.similar-properties-wrapper .btn-carousel-prev {
    left: 55px;
}

.similar-properties-wrapper .btn-carousel-next {
    right: 55px;
}

@media (min-width: 1400px) {
    .similar-properties-wrapper .btn-carousel-prev {
        left: 55px;
    }

    .similar-properties-wrapper .btn-carousel-next {
        right: 55px;
    }
}

@media (min-width: 1600px) {
    .similar-properties-wrapper .btn-carousel-prev {
        left: 13%;
    }

    .similar-properties-wrapper .btn-carousel-next {
        right: 13%;
    }
}

@media (max-width: 1199.98px) {
    .similar-properties-carousel {
        padding: 0 50px;
    }

    .btn-carousel-prev {
        left: 0;
    }

    .btn-carousel-next {
        right: 0;
    }
}

.btn-carousel-prev:hover,
.btn-carousel-next:hover {
    background: var(--primary-orange);
    border-color: var(--primary-orange);
    color: var(--white);
}

/* Footer */
.footer-section {
    background: #333333;
    border-top: 1px solid var(--border-color);
    padding: 40px 0 20px;
}

.footer-brand h4 {
    color: var(--text-dark);
    font-size: 1.5rem;
    margin: 0;
}

.footer-logo-img {
    max-width: 200px;
    height: auto;
    display: block;
}

.footer-description {
    color: #FFFFFF;
    font-size: 0.9rem;
    margin-bottom: 15px;
}

.social-icons {
    display: flex;
    gap: 15px;
}

.social-icons a {
    color: #FFFFFF;
    font-size: 1.5rem;
    transition: color 0.3s;
}

.social-icons a:hover {
    color: var(--primary-orange);
}

.footer-heading {
    font-size: 1rem;
    font-weight: 600;
    color: #FFFFFF;
    margin-bottom: 15px;
}

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

.footer-links li {
    margin-bottom: 10px;
}

.footer-links a {
    color: #FFFFFF;
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.3s;
}

.footer-links a:hover {
    color: var(--primary-orange);
}

.contact-info p {
    color: #FFFFFF;
    font-size: 0.9rem;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}

.contact-info i {
    color: #FFFFFF;
}

.app-badges-footer {
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
}

.app-badge-footer {
    display: inline-flex;
    width: 48px;
    height: 48px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 12px;
    background: transparent;
    padding: 12px;
    transition: all 0.3s;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.app-badge-footer:hover {
    border-color: rgba(255, 255, 255, 0.6);
    transform: translateY(-2px);
    text-decoration: none;
}

.app-badge-footer img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.footer-bottom {
    border-top: 1px solid #FFFFFF;
    padding-top: 20px;
}

.footer-bottom p {
    color: #FFFFFF;
    font-size: 0.85rem;
    margin: 0;
}

/* Responsive Styles */
@media (max-width: 991.98px) {
    .property-title-main {
        font-size: 1.5rem;
    }

    .property-price-main {
        font-size: 1.75rem;
    }

    .amenities-row {
        gap: 16px;
    }

    .btn-carousel-prev {
        left: -40px;
    }

    .btn-carousel-next {
        right: -40px;
    }
}

@media (max-width: 767.98px) {
    .property-title-main {
        font-size: 1.25rem;
    }

    .property-image-carousel {
        height: 300px;
    }

    .section-heading {
        font-size: 1.125rem;
    }

    .amenities-row {
        gap: 12px;
    }

    .neighborhood-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .btn-download-app,
    .btn-list-property {
        font-size: 0.75rem;
        padding: 6px 12px;
    }
}

/* Mobile Header */
.mobile-header {
    background: var(--white);
    border-bottom: 1px solid var(--border-color);
    padding: 12px 0;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.mobile-navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 16px;
}

.btn-mobile-back {
    background: transparent;
    border: none;
    font-size: 1.5rem;
    color: var(--text-dark);
    padding: 8px;
}

.mobile-nav-icons {
    display: flex;
    gap: 8px;
    align-items: center;
}

.btn-mobile-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-dark);
    font-size: 1.125rem;
    backdrop-filter: blur(10px);
}

/* Carousel Counter Mobile */
/* Desktop Counter - Default */
.carousel-counter-mobile {
    position: absolute;
    bottom: 16px;
    right: 16px;
    background: rgba(0, 0, 0, 0.6);
    color: var(--white);
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 0.875rem;
}

/* Mobile Counter - Override in mobile section */

/* Key Features Mobile */
.key-features-mobile {
    display: flex;
    gap: 20px;
    align-items: center;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Firefox */
    padding-bottom: 8px;
}

.key-features-mobile::-webkit-scrollbar {
    display: none;
}

.key-feature-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9375rem;
    color: var(--text-dark);
    flex-shrink: 0;
    white-space: nowrap;
}

.key-feature-item i {
    font-size: 1.5rem;
    color: var(--text-dark);
    display: inline-block;
    line-height: 1;
}

/* Owner Card Mobile */
.owner-card-mobile {
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.owner-avatar-mobile {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

.owner-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.owner-name-mobile {
    font-size: 1rem;
    font-weight: bold;
    color: var(--text-dark);
    margin-bottom: 4px;
}

.owner-role-mobile {
    font-size: 0.875rem;
    color: var(--text-light);
}

.btn-contact-owner-mobile {
    background: var(--primary-orange);
    color: var(--white);
    border: none;
    padding: 12px;
    border-radius: 6px;
    font-size: 0.9375rem;
    font-weight: 500;
    transition: all 0.3s;
}

.btn-contact-owner-mobile:hover {
    background: #e55a2b;
    color: var(--white);
}

/* Fixed Bottom Bar */
.fixed-bottom-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--white);
    border-top: 1px solid var(--border-color);
    padding: 12px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
    z-index: 1000;
}

.bottom-price {
    flex: 1;
}

.bottom-price-amount {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--text-dark);
    line-height: 1.2;
}

.bottom-price-period {
    font-size: 0.875rem;
    color: var(--text-light);
}

.btn-contact-bottom {
    background: var(--primary-orange);
    color: var(--white);
    border: none;
    padding: 12px 24px;
    border-radius: 6px;
    font-size: 0.9375rem;
    font-weight: 500;
    white-space: nowrap;
}

.btn-contact-bottom:hover {
    background: #e55a2b;
    color: var(--white);
}

/* Add padding to main content for fixed bottom bar */
@media (max-width: 991.98px) {
    .main-content {
        padding-bottom: 80px;
    }
}

/* Recommended Brokers Section */
.recommended-brokers-section {
    background: var(--white);
}

.see-all-link {
    color: var(--primary-orange);
    text-decoration: none;
    font-size: 0.9375rem;
    font-weight: 500;
}

.see-all-link:hover {
    text-decoration: underline;
}

.brokers-carousel {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.brokers-carousel::-webkit-scrollbar {
    display: none;
}

.broker-card-mobile {
    min-width: 200px;
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 16px;
    text-align: center;
}

.broker-avatar-mobile {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto 12px;
}

.broker-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.broker-name-mobile {
    font-size: 1rem;
    font-weight: bold;
    color: var(--text-dark);
    margin-bottom: 4px;
}

.broker-member-since {
    font-size: 0.75rem;
    color: var(--text-light);
    margin-bottom: 8px;
}

.broker-tag {
    display: inline-block;
    padding: 4px 12px;
    background: var(--bg-light);
    border-radius: 12px;
    font-size: 0.75rem;
    color: var(--text-dark);
    margin-bottom: 12px;
}

.broker-actions {
    display: flex;
    gap: 8px;
}

.btn-broker-action {
    flex: 1;
    padding: 8px;
    background: var(--bg-light);
    border: none;
    border-radius: 6px;
    font-size: 0.75rem;
    color: var(--text-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.btn-broker-action:hover {
    background: #E0E0E0;
}

/* Membership Section */
.membership-section {
    background: var(--white);
}

.membership-card {
    background: #333333;
    border-radius: 8px;
    padding: 24px;
    text-align: center;
}

.membership-text {
    color: var(--white);
    font-size: 0.9375rem;
    margin-bottom: 8px;
}

.membership-title {
    color: var(--primary-orange);
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 16px;
}

.btn-membership {
    background: var(--white);
    color: var(--text-dark);
    border: none;
    padding: 12px 24px;
    border-radius: 6px;
    font-size: 0.9375rem;
    font-weight: 500;
}

.btn-membership:hover {
    background: #f0f0f0;
}

/* Property Filter Section */
.property-filter-section {
    background: var(--white);
}

.rent-buy-toggle {
    display: flex;
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 4px;
    width: 200px;
}

.toggle-btn {
    flex: 1;
    padding: 8px 16px;
    border: none;
    background: transparent;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-dark);
    transition: all 0.3s;
}

.toggle-active {
    background: var(--primary-orange);
    color: var(--white);
}

.property-type-tabs {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
}

.property-tab {
    padding: 8px 16px;
    border: none;
    background: transparent;
    font-size: 0.9375rem;
    color: var(--text-dark);
    position: relative;
    white-space: nowrap;
}

.property-tab.active {
    color: var(--primary-orange);
    font-weight: 500;
}

.property-tab.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--primary-orange);
}

.property-listings-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.property-list-column {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.property-list-item {
    font-size: 0.875rem;
    color: var(--text-dark);
    text-decoration: none;
    padding: 4px 0;
    transition: color 0.3s;
}

.property-list-item:hover {
    color: var(--primary-orange);
}

/* Heart Button on Similar Properties */
.heart-btn-similar {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-dark);
    font-size: 1.125rem;
    cursor: pointer;
    transition: all 0.3s;
}

.heart-btn-similar:hover {
    background: var(--white);
    color: var(--primary-orange);
}

/* Mobile Responsive Adjustments */
@media (max-width: 767.98px) {
    .property-listings-grid {
        grid-template-columns: 1fr;
    }

    .similar-properties-section .row {
        display: flex;
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 8px;
    }

    .similar-properties-section .row::-webkit-scrollbar {
        display: none;
    }

    .similar-properties-section .col-md-6 {
        min-width: 280px;
        flex: 0 0 auto;
    }

    .property-image-carousel {
        height: 250px;
    }

    .content-section {
        padding: 16px;
    }
}



/* Mobile Header */
.mobile-header {
    background: var(--white);
    border-bottom: 1px solid var(--border-color);
    padding: 12px 0;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.mobile-navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 16px;
}

.btn-mobile-back {
    background: transparent;
    border: none;
    font-size: 1.5rem;
    color: var(--text-dark);
    padding: 8px;
}

.mobile-nav-icons {
    display: flex;
    gap: 8px;
    align-items: center;
}

.btn-mobile-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-dark);
    font-size: 1.125rem;
    backdrop-filter: blur(10px);
}

/* Carousel Counter Mobile */
.carousel-counter-mobile {
    position: absolute;
    bottom: 16px;
    right: 16px;
    background: rgba(0, 0, 0, 0.6);
    color: var(--white);
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 0.875rem;
    z-index: 1;
}

/* Key Features Mobile */
.key-features-mobile {
    display: flex;
    gap: 20px;
    align-items: center;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Firefox */
    padding-bottom: 8px;
    padding-left: 0;
    padding-right: 16px;
}

.key-features-mobile::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari, Edge */
}

.key-feature-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.875rem;
    color: var(--text-dark);
}

.key-feature-item i {
    font-size: 1.25rem;
    color: var(--text-dark);
}

/* Owner Card Mobile */
.owner-card-mobile {
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.owner-avatar-mobile {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

.owner-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.owner-name-mobile {
    font-size: 1rem;
    font-weight: bold;
    color: var(--text-dark);
    margin-bottom: 4px;
}

.owner-role-mobile {
    font-size: 0.875rem;
    color: var(--text-light);
}

.btn-contact-owner-mobile {
    background: var(--primary-orange);
    color: var(--white);
    border: none;
    padding: 12px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 500;
    transition: all 0.3s;
}

.btn-contact-owner-mobile:hover {
    background: #e55a2b;
    color: var(--white);
}

/* Fixed Bottom Bar */
.fixed-bottom-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--white);
    border-top: 1px solid var(--border-color);
    padding: 12px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
    z-index: 1000;
}

.bottom-price {
    flex: 1;
}

.bottom-price-amount {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--text-dark);
    line-height: 1.2;
}

.bottom-price-period {
    font-size: 0.875rem;
    color: var(--text-light);
}

.btn-contact-bottom {
    background: var(--primary-orange);
    color: var(--white);
    border: none;
    padding: 12px 24px;
    border-radius: 6px;
    font-size: 0.9375rem;
    font-weight: 500;
    white-space: nowrap;
}

.btn-contact-bottom:hover {
    background: #e55a2b;
    color: var(--white);
}

@media (max-width: 991.98px) {
    .main-content {
        padding-bottom: 80px;
    }
}

/* Similar Properties Mobile */
.similar-properties-section-mobile {
    background: var(--bg-light);
}

.similar-properties-carousel-mobile {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.similar-properties-carousel-mobile::-webkit-scrollbar {
    display: none;
}

.property-card-similar-mobile {
    min-width: 280px;
    background: var(--white);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.property-image-wrapper-similar-mobile {
    position: relative;
    width: 100%;
    height: 200px;
    overflow: hidden;
}

.property-image-similar-mobile {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.heart-btn-similar-mobile {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-dark);
    font-size: 1.125rem;
    cursor: pointer;
}

.property-content-similar-mobile {
    padding: 16px;
}

.property-pid-similar-mobile {
    font-size: 0.75rem;
    color: var(--text-light);
    margin-bottom: 8px;
}

.property-price-similar-mobile {
    font-size: 0.9375rem;
    color: var(--text-dark);
    margin-bottom: 8px;
    font-weight: bold;
}

.property-title-similar-mobile {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 6px;
    line-height: 1.3;
}

.property-location-similar-mobile {
    font-size: 0.875rem;
    color: var(--text-light);
    margin-bottom: 8px;
}

.property-location-similar-mobile i {
    margin-right: 4px;
}

.property-listed-similar-mobile {
    font-size: 0.8125rem;
    color: var(--text-light);
}

/* Recommended Brokers Section */
.recommended-brokers-section {
    background: var(--white);
}

.see-all-link {
    color: var(--primary-orange);
    text-decoration: none;
    font-size: 0.9375rem;
    font-weight: 500;
}

.see-all-link:hover {
    text-decoration: underline;
}

.brokers-carousel {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.brokers-carousel::-webkit-scrollbar {
    display: none;
}

.broker-card-mobile {
    min-width: 200px;
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 16px;
    text-align: center;
}

.broker-avatar-mobile {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto 12px;
}

.broker-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.broker-name-mobile {
    font-size: 1rem;
    font-weight: bold;
    color: var(--text-dark);
    margin-bottom: 4px;
}

.broker-member-since {
    font-size: 0.75rem;
    color: var(--text-light);
    margin-bottom: 8px;
}

.broker-tag {
    display: inline-block;
    padding: 4px 12px;
    background: var(--bg-light);
    border-radius: 12px;
    font-size: 0.75rem;
    color: var(--text-dark);
    margin-bottom: 12px;
}

.broker-actions {
    display: flex;
    gap: 8px;
}

.btn-broker-action {
    flex: 1;
    padding: 8px;
    background: var(--bg-light);
    border: none;
    border-radius: 6px;
    font-size: 0.75rem;
    color: var(--text-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.btn-broker-action:hover {
    background: #E0E0E0;
}

/* Membership Section */
.membership-section {
    background: var(--white);
}

.membership-card {
    background: #333333;
    border-radius: 8px;
    padding: 24px;
    text-align: center;
}

.membership-text {
    color: var(--white);
    font-size: 0.9375rem;
    margin-bottom: 8px;
}

.membership-title {
    color: var(--primary-orange);
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 16px;
}

.btn-membership {
    background: var(--white);
    color: var(--text-dark);
    border: none;
    padding: 12px 24px;
    border-radius: 6px;
    font-size: 0.9375rem;
    font-weight: 500;
}

.btn-membership:hover {
    background: #f0f0f0;
}

/* Property Filter Section */
.property-filter-section {
    background: var(--white);
}

.rent-buy-toggle {
    display: flex;
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 4px;
    width: 200px;
}

.toggle-btn {
    flex: 1;
    padding: 8px 16px;
    border: none;
    background: transparent;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-dark);
    transition: all 0.3s;
}

.toggle-active {
    background: var(--primary-orange);
    color: var(--white);
}

.property-type-tabs {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.property-type-tabs::-webkit-scrollbar {
    display: none;
}

.property-tab {
    padding: 8px 16px;
    border: none;
    background: transparent;
    font-size: 0.9375rem;
    color: var(--text-dark);
    position: relative;
    white-space: nowrap;
}

.property-tab.active {
    color: var(--primary-orange);
    font-weight: 500;
}

.property-tab.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--primary-orange);
}

.property-listings-grid {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 8px;
}

.property-listings-grid::-webkit-scrollbar {
    display: none;
}

.property-list-column {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 200px;
    flex-shrink: 0;
}

.property-list-item {
    font-size: 0.875rem;
    color: var(--text-dark);
    text-decoration: none;
    padding: 4px 0;
    transition: color 0.3s;
    cursor: pointer;
    line-height: 1.5;
}

.property-list-item:hover {
    color: var(--primary-orange);
}

/* PID Tag Mobile */
.pid-tag-mobile {
    padding: 0 16px;
}

.pid-tag-text {
    display: inline-block;
    padding: 6px 12px;
    background: var(--bg-light);
    border-radius: 6px;
    font-size: 0.875rem;
    color: var(--text-dark);
}

/* Content Section Mobile */
.content-section-mobile {
    padding: 16px;
    margin-bottom: 16px;
    background: var(--white);
    border-bottom: 1px solid var(--border-color);
}

.section-heading-mobile {
    font-size: 1.125rem;
    font-weight: bold;
    color: var(--text-dark);
    margin-bottom: 16px;
}

.description-text-mobile {
    font-size: 0.9375rem;
    color: var(--text-light);
    line-height: 1.6;
}

/* Premium Badges Mobile */
.premium-badges-mobile {
    display: flex;
    flex-wrap: nowrap;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 8px;
}

.premium-badges-mobile::-webkit-scrollbar {
    display: none;
}

.btn-premium-badge-mobile {
    padding: 8px 16px;
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 0.875rem;
    color: var(--text-dark);
    cursor: pointer;
    transition: all 0.3s;
    flex-shrink: 0;
    white-space: nowrap;
}

.btn-premium-badge-mobile:hover {
    border-color: var(--primary-orange);
    color: var(--primary-orange);
}

/* Amenities Mobile */
.amenities-section-mobile {
    padding: 0 16px;
    margin-bottom: 16px;
}

.amenities-row-mobile {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 8px;
    flex-wrap: nowrap;
}

.amenities-row-mobile::-webkit-scrollbar {
    display: none;
}

.amenity-item-mobile {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9375rem;
    color: var(--text-dark);
    flex-shrink: 0;
    white-space: nowrap;
}

.amenity-item-mobile i {
    font-size: 1.5rem;
    color: var(--text-dark);
}

/* Report Card Mobile */
.report-card-mobile {
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.report-title-mobile {
    font-size: 1.125rem;
    font-weight: bold;
    color: var(--text-dark);
    margin: 0;
}

.report-question-icon-mobile {
    font-size: 1.125rem;
    color: var(--text-light);
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gray-light);
    border-radius: 50%;
    flex-shrink: 0;
}

.report-question-mobile {
    font-size: 0.9375rem;
    color: var(--text-light);
    margin-bottom: 16px;
}

.report-buttons-mobile {
    display: flex;
    flex-direction: row;
    gap: 10px;
    flex-wrap: wrap;
}

.btn-report-mobile {
    flex: 1 1 auto;
    min-width: 0;
    padding: 10px 8px;
    background: var(--bg-light);
    border: none;
    border-radius: 20px;
    font-size: 0.875rem;
    color: var(--text-dark);
    transition: all 0.3s;
    font-weight: 400;
    text-align: center;
    word-wrap: break-word;
    overflow-wrap: break-word;
    box-sizing: border-box;
}

.btn-report-mobile:hover {
    background: #E0E0E0;
    color: var(--text-dark);
}

.btn-report-active-mobile {
    background: #333333;
    color: var(--white);
}

.btn-report-active-mobile:hover {
    background: #222222;
    color: var(--white);
}

@media (max-width: 767.98px) {
    .property-listings-grid {
        grid-template-columns: 1fr;
    }

    .property-image-carousel {
        height: 250px;
        border-radius: 0;
    }

    .main-content {
        padding: 0;
    }

    .property-id-section,
    .property-title-main,
    .property-location-main,
    .key-features-mobile {
        padding: 0 16px;
    }

    .content-section {
        padding: 16px;
        margin-bottom: 16px;
        border-radius: 0;
        box-shadow: none;
        border-bottom: 1px solid var(--border-color);
    }

    .similar-properties-section-mobile,
    .recommended-brokers-section,
    .membership-section,
    .property-filter-section {
        padding-left: 16px;
        padding-right: 16px;
    }

    .owner-card-mobile,
    .report-card-mobile {
        margin-left: 16px;
        margin-right: 16px;
    }

    .property-listings-grid {
        display: flex;
        gap: 24px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 8px;
    }

    .property-listings-grid::-webkit-scrollbar {
        display: none;
    }

    .property-list-column {
        min-width: 200px;
        flex-shrink: 0;
    }
}

/* Footer Mobile */
.footer-section-mobile {
    background: var(--white);
    padding: 32px 16px 0;
    margin-bottom: 80px;
}

.footer-brand-mobile {
    margin-bottom: 16px;
}

.footer-logo-mobile {
    height: 50px;
    width: auto;
    object-fit: contain;
    display: block;
}

.footer-description-mobile {
    color: var(--text-dark);
    font-size: 0.9rem;
    margin-bottom: 24px;
    line-height: 1.5;
}

.footer-links-mobile {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-bottom: 24px;
}

.footer-links-column {
    display: flex;
    flex-direction: column;
}

.footer-heading-mobile {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 12px;
}

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

.footer-links-inline a {
    color: var(--text-dark);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.3s;
    white-space: nowrap;
}

.footer-links-inline a:hover {
    color: var(--primary-orange);
}

.footer-link-separator {
    color: var(--text-dark);
    font-size: 0.9rem;
    margin: 0 4px;
}

.social-icons-mobile {
    display: flex;
    gap: 20px;
    justify-content: center;
    align-items: center;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.social-icons-mobile a {
    color: var(--text-dark);
    font-size: 1.5rem;
    transition: color 0.3s;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
}

.social-icons-mobile a:hover {
    color: var(--primary-orange);
}

.footer-bottom-mobile {
    background: #FFE5D9;
    padding: 16px;
    margin: 0 -16px;
    text-align: center;
}

.footer-bottom-mobile p {
    color: var(--text-dark);
    font-size: 0.85rem;
    margin: 0;
}

/* Header Styles */
.header-section {
    background: var(--bg-light);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.navbar-logo-img {
    height: 50px;
    width: 158px;
}

.logo-icon {
    display: flex;
    align-items: center;
}

.btn-credit-card {
    background: linear-gradient(135deg, rgba(51, 51, 51, 1) 0%, rgba(15, 15, 15, 1) 100%);
    color: var(--white);
    padding: 8px 20px;
    border-radius: 26px;
    font-weight: 400;
    border: none;
    font-size: 14px;
    white-space: nowrap;
    margin-right: 8px;
    display: flex;
    align-items: center;
}

.btn-credit-card:hover {
    background: linear-gradient(135deg, #1a1a1a 0%, #2C2C2C 100%);
    color: var(--white);
}

.btn-credit-card i {
    color: var(--white);
    font-size: 1.1rem;
}

.pay-via-text {
    font-style: Konnect;
    color: var(--white);
    margin-right: 6px;
    font-weight: 400;
    letter-spacing: 0.02rem;
}


.credit-card-text {
    background: linear-gradient(to right, rgba(248, 162, 1, 1), rgba(204, 120, 8, 1));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

.btn-download {
    background: var(--primary-orange);
    color: var(--white);
    padding: 8px 20px;
    border-radius: 26px;
    font-weight: 400;
    border: none;
    font-size: 14px;
    white-space: nowrap;
}

.btn-download:hover {
    background: #e55a2b;
    color: var(--white);
}

.btn-list {
    background: var(--primary-orange);
    color: var(--white);
    padding: 8px 20px;
    border-radius: 26px;
    font-weight: 400;
    border: none;
    font-size: 14px;
    white-space: nowrap;
}

.btn-list:hover {
    background: #e55a2b;
    color: var(--white);
}

.nav-divider {
    width: 1px;
    height: 30px;
    background-color: rgba(0, 0, 0, 0.1);
    margin: 0 8px;
}

.user-icon {
    font-size: 2rem;
    color: var(--text-dark);
    cursor: pointer;
    margin-left: 8px;
    margin-top: 7px;
    margin-right: 8px;
    
}

.user-icon img {
    vertical-align: middle;
    height: 20px;
    width: 20px;
    
}




/* Main Content */
.main-content {
    background: var(--white);
    min-height: 60vh;
}


.btn-rent {
    background: var(--white);
    color: var(--text-dark);
    border: 1px solid #333333;
    padding: 8px 20px;
    border-radius: 6px;
    font-weight: 400;
    font-size: 14px;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-rent:hover {
    background: var(--bg-light);
    color: var(--text-dark);
    border-color: rgba(0, 0, 0, 0.3);
}

.btn-rent i {
    color: var(--text-dark);
    font-size: 16px;
}

.dropdown-toggle::after {
    display: none;
}

.wishlist-header {
    margin-bottom: 2rem;
}

.wishlist-header .d-flex {
    align-items: flex-start;
}

.wishlist-title {
    font-size: 26px;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 0.15rem;
}

.property-count {
    font-weight: 600;
}

.wishlist-subtitle {
    font-size: 16px;
    color: #666666;
    margin-bottom: 0;
}

/* Property Filter Tabs */
.property-filter-tabs {
    display: flex;
    gap: 12px;
    margin-top: 20px;
    flex-wrap: wrap;
}

.filter-tab-btn {
    padding: 8px 20px;
    border: 1px solid #666666;
    border-radius: 6px;
    background: #FFFFFF;
    color: #666666;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
    transition: all 0.3s ease;
}

.filter-tab-btn:hover {
    border-color: #FF5403;
    color: #FF5403;
}

.filter-tab-btn.active {
    background: #FFEAE0;
    border: 1px solid #FF5403;
    color: #FF5403;
}

.filter-tab-content {
    display: none;
}

.filter-tab-content.active {
    display: block;
}

/* Mobile View - Scrollable Tabs */
@media (max-width: 767px) {
    .property-filter-tabs {
        display: flex;
        gap: 12px;
        margin-top: 20px;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        /* Firefox */
        -ms-overflow-style: none;
        /* IE and Edge */
        padding-bottom: 5px;
    }

    .property-filter-tabs::-webkit-scrollbar {
        display: none;
        /* Chrome, Safari, Opera */
    }

    .filter-tab-btn {
        white-space: nowrap;
        flex-shrink: 0;
    }
}

/* Property Cards */
.property-card {
    background: var(--white);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.property-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

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

.property-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.property-tag {
    height: 28.44px;
    position: absolute;
    top: 12px;
    left: 12px;
    background: var(--white);
    color: #676767;
    padding: 1.22px 7.32px 1.22px 7.32px;
    border-radius: 4px;
    font-size: 16.64px;
    letter-spacing: 0.24px;
    font-weight: 400;
    border: 1px solid #EAEAEA;
    z-index: 2;
    font-family: Konnect;
}

.heart-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 4.4px;
    border: none;
    font-size: 1.5rem;
    color: var(--primary-orange);
    cursor: pointer;
    z-index: 2;
    padding: 2px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.heart-btn:hover {
    transform: scale(1.1);
}

.heart-filled {
    color: var(--primary-orange);
}

.heart-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.heart {
    border: 1px solid #FFFFFF;
}

.property-content {
    padding: 1.25rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.property-pid {
    font-size: 0.9rem;
    color: var(--text-light);
    margin-bottom: 0.5rem;
}

.property-price {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.verified-badge {
    background: var(--primary-green);
    color: var(--white);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
}

.property-title {
    font-size: 1rem;
    font-weight: 500;
    color: rgba(51, 51, 51, 1);
    margin-bottom: 0.5rem;
    line-height: 1.4;
    flex-grow: 1;
    letter-spacing: 0.21px;
}

.property-location {
    font-size: 0.9rem;
    color: var(--text-light);
    margin-bottom: 0.75rem;
}

.property-listed {
    font-size: 0.85rem;
    color: #676767;
    margin-top: auto;
    background: linear-gradient(135deg, rgba(255, 234, 224, 1) 0%, rgba(255, 255, 255, 1) 100%);
    padding: 8px 30px;
    border-radius: 0 0 10.73px 10.73px;
    font-weight: 400;
}

/* Footer Styles */
.footer-section {
    background: #333333;
    border-top: 1px solid var(--border-color);
    padding: 40px 0 20px;
}

.footer-brand h4 {
    color: var(--text-dark);
    font-size: 1.5rem;
    margin: 0;
}

.footer-logo-img {
    max-width: 200px;
    height: auto;
    display: block;
}

.footer-description {
    color: #FFFFFF;
    font-size: 0.9rem;
    margin-bottom: 15px;
}

.social-icons {
    display: flex;
    gap: 15px;
}

.social-icons a {
    color: #FFFFFF;
    font-size: 1.5rem;
    transition: color 0.3s;
}

.social-icons a:hover {
    color: var(--primary-orange);
}

.footer-heading {
    font-size: 1rem;
    font-weight: 600;
    color: #FFFFFF;
    margin-bottom: 15px;
}

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

.footer-links li {
    margin-bottom: 10px;
}

.footer-links a {
    color: #FFFFFF;
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.3s;
}

.footer-links a:hover {
    color: var(--primary-orange);
}

.contact-info p {
    color: #FFFFFF;
    font-size: 0.9rem;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}

.contact-info i {
    color: #FFFFFF;
}

.app-badges-footer {
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
}

.app-badge-footer {
    display: inline-flex;
    width: 48px;
    height: 48px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 12px;
    background: transparent;
    padding: 12px;
    transition: all 0.3s;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.app-badge-footer:hover {
    border-color: rgba(255, 255, 255, 0.6);
    transform: translateY(-2px);
    text-decoration: none;
}

.app-badge-footer img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.footer-bottom {
    border-top: 1px solid #FFFFFF;
    padding-top: 20px;
    padding-bottom: 80px;
    position: relative;
    overflow: hidden;
    min-height: 140px;
}

.footer-bottom-images-wrapper {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    z-index: 0;
    margin: 0;
    padding: 0;
    pointer-events: none;
}

.footer-bottom-image {
    width: calc(100vw / 6);
    height: auto;
    display: block;
    object-fit: cover;
    object-position: bottom;
    opacity: 0.3;
    flex-shrink: 0;
    margin: 0;
    padding: 0;
}

.footer-bottom p {
    position: relative;
    z-index: 1;
}



.footer-bottom p {
    color: #FFFFFF;
    font-size: 0.85rem;
    margin: 0;
    position: relative;
    z-index: 1;
}

/* Responsive Styles */
@media (max-width: 768px) {
    .wishlist-title {
        font-size: 1.8rem;
    }

    .wishlist-subtitle {
        font-size: 1rem;
    }

    .btn-credit-card,
    .btn-download,
    .btn-list {
        font-size: 0.75rem;
        padding: 6px 12px;
    }

    .btn-credit-card i,
    .btn-download i {
        display: none;
    }

    .property-image-wrapper {
        height: 200px;
    }

    .property-title {
        font-size: 0.9rem;
    }

    .footer-logo-text {
        font-size: 1.2rem;
    }

    .footer-heading {
        font-size: 1rem;
        margin-top: 1.5rem;
    }

    .footer-links {
        margin-bottom: 1rem;
    }
}

@media (max-width: 576px) {
    .wishlist-title {
        font-size: 18px;
    }

    .wishlist-subtitle {
        font-size: 12px;
    }

    .navbar-collapse {
        margin-top: 1rem;
    }

    .ms-auto {
        flex-direction: column;
        gap: 0.5rem !important;
        width: 100%;
    }

    .nav-divider {
        display: none;
    }

    .btn-credit-card,
    .btn-download,
    .btn-list {
        width: 100%;
        justify-content: center;
    }

    .user-icon {
        align-self: center;
        margin-left: 0 !important;
    }

    .wishlist-header .d-flex {
        margin-left: 10px;
        margin-right: 12px;
        flex-direction: row;
        gap: 1rem;
    }

    .btn-rent {
        width: 72px;
        height: 30px;
        padding: 8px 8px;
    }

    .property-image-wrapper {
        height: 180px;
    }

    .property-content {
        padding: 1rem;
    }

    .property-price {
        font-size: 1rem;
    }
}


/* Header Section */
.header-section {
    background: var(--white);
    border-bottom: 1px solid var(--border-color);
    padding: 0;
}

.header-section .navbar {
    padding: 12px 0;
}

.navbar-brand h4 {
    color: var(--text-dark);
    font-size: 1.5rem;
    margin: 0;
    font-weight: bold;
}

.desktop-header-logo {
    height: 50px;
    width: auto;
    object-fit: contain;
}

.btn-icon {
    background: transparent;
    border: none;
    color: var(--text-dark);
    font-size: 1.5rem;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}

.btn-icon:hover {
    color: var(--primary-orange);
}

.btn-navbar-dark {
    background: linear-gradient(to right, rgba(51, 51, 51, 1), rgba(15, 15, 15, 1));
    color: white;
    border: none;
    border-radius: 25px;
    padding: 8px 20px;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.btn-navbar-dark:hover {
    background: linear-gradient(to right, rgba(45, 45, 45, 1), rgba(10, 10, 10, 1));
    color: white;
}

.pay-via-text {
    color: white;
}

.credit-card-text {
    color: var(--primary-orange);
}

/* Hero Property Card Section */
.hero-property-card {
    background: white;
    padding: 24px 0 12px 0;
}

.property-hero-card {
    background: var(--white);
    border-radius: 8px;
    padding: 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    margin-bottom: 24px;
}

.property-header {
    margin-bottom: 0;
    padding: 0;
}

.property-title {
    font-size: 26px;
    font-weight: 600;
    color: #333333;
    margin-bottom: 12px;
    line-height: 1.3;
    padding: 0;
}

.property-location {
    font-size: 1rem;
    color: var(--text-dark);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.location-icon {
    color: var(--primary-orange);
    font-size: 1rem;
}

.h-heights {
    font-weight: 400;
    font-size: 18px;
    color: #333333;
}

.text-link {
    color: var(--primary-orange);
    text-decoration: none;
    margin-left: 4px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.text-link:hover {
    text-decoration: underline;
}

.property-pid-badge {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
}

.pid-text {
    font-size: 0.875rem;
    color: var(--text-light);
}

.verified-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--primary-green);
    font-size: 0.875rem;
    font-weight: 500;
}

.verified-badge i {
    font-size: 1rem;
}


/* Image Gallery Wrapper */
.image-gallery-wrapper {
    width: 100%;

    height: 444px;
    display: flex;
    align-items: stretch;
}

.gallery-main {
    position: relative;
    width: 100%;
    height: 395px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--white);
}

.main-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 406px;
    object-fit: cover;
}

.gallery-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    pointer-events: none;
}

.gallery-counter {
    position: absolute;
    bottom: 16px;
    right: 16px;
    background: rgba(0, 0, 0, 0.6);
    color: var(--white);
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 0.875rem;
}

/* Property Actions and Price Section */
.property-actions-price {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 16px;
}

.property-action-icons {
    display: flex;
    gap: 12px;
}

.btn-action-icon {
    background: var(--gray-light);
    border: none;
    color: var(--text-light);
    font-size: 1.25rem;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s;
    cursor: pointer;
}

.btn-action-icon:hover {
    color: var(--primary-orange);
    background: rgba(255, 107, 53, 0.1);
}

.property-price-section {
    display: flex;
    flex-direction: column;
}

.price-label {
    font-size: 0.875rem;
    color: var(--text-light);
    font-weight: normal;
}

.price-amount-main {
    font-size: 26px;
    font-weight: bold;
    color: #333333;
    line-height: 1.2;
}

.price-period {
    font-size: 1rem;
    color: #333333;
    font-weight: normal;
}



/* Property Details Cards Wrapper */
.property-details-cards-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    width: 100%;
    max-width: 100%;
    background: #FFFFFF;
    padding: 16px;
    border-radius: 8px;
    border: 1px solid #E0E0E0;
    box-sizing: border-box;
    align-content: start;
}

.detail-card-item {
    background: var(--white);
    border-radius: 8px;
    padding: 16px 14px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(217, 217, 217, 0.4);
    transition: all 0.3s;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    height: auto;
}

.detail-card-item:hover {
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.12);
}

.detail-icon {
    font-size: 1.75rem;
    color: rgba(103, 103, 103, 1);
    flex-shrink: 0;
    width: auto;
    min-width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.detail-text-wrapper {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    min-width: 0;
}

.detail-label-text {
    font-size: 0.75rem;
    color: #999999;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: 0.01em;
}

.detail-value-text {
    font-size: 16px;
    color: #333333;
    font-weight: 500;
    line-height: 1.3;
}

/* Login Banner Section */
.login-banner-section {
    margin-top: 5px;
    margin-bottom: 170px;
}

.login-banner-card {
    background: #FFE5D9;
    border-radius: 12px;
    padding: 24px 32px;
    display: flex;
    align-items: center;
    gap: 32px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.login-banner-left {
    flex-shrink: 0;
    position: relative;
}

.house-image-wrapper {
    position: relative;
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.house-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.padlock-icon {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 2rem;
    color: var(--primary-orange);
    background: var(--white);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.login-banner-center {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.trust-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
}

.stars-rating {
    display: flex;
    gap: 2px;
    color: #FFBB0E;
    font-size: 1rem;
}

.stars-rating .bi-star-fill {
    color: #FFBB0E;
}

.trust-text {
    font-size: 0.875rem;
    color: #666666;
    font-weight: 400;
}

.login-banner-heading {
    font-size: 1.5rem;
    font-weight: 700;
    color: #181818;
    margin: 0;
    line-height: 1.3;
}

.login-banner-description {
    font-size: 14px;
    color: #181818;
    font-weight: 400;
    line-height: 1.5;
    margin: 0;
    opacity: 70%;
}

.login-banner-right {
    flex-shrink: 0;
}

.btn-login-now {
    background: #F06A37;
    color: var(--white);
    border: none;
    border-radius: 8px;
    padding: 14px 32px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    white-space: nowrap;
    margin-right: 50px;
}

.btn-login-now:hover {
    background: #E64903;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(255, 84, 3, 0.3);
}

/* Responsive styles for login banner */
@media (max-width: 991px) {
    .login-banner-card {
        flex-direction: column;
        text-align: left;
        padding: 24px 20px;
        gap: 20px;
        align-items: flex-start;
    }

    .house-image-wrapper {
        width: 100px;
        height: 100px;
    }

    .login-banner-center {
        align-items: flex-start;
        text-align: left;
    }

    .login-banner-heading {
        font-size: 1.25rem;
        text-align: left;
    }

    .login-banner-description {
        font-size: 0.875rem;
        text-align: left;
    }

    .btn-login-now {
        width: 100%;
        padding: 12px 24px;
    }
}

/* Footer */
.footer-section {
    background: #333333;
    border-top: 1px solid var(--border-color);
    padding: 40px 0 20px;
}

.footer-brand h4 {
    color: var(--text-dark);
    font-size: 1.5rem;
    margin: 0;
}

.footer-logo-img {
    max-width: 200px;
    height: auto;
    display: block;
}

.footer-description {
    color: #FFFFFF;
    font-size: 0.9rem;
    margin-bottom: 15px;
}

.social-icons {
    display: flex;
    gap: 15px;
}

.social-icons a {
    color: #FFFFFF;
    font-size: 1.5rem;
    transition: color 0.3s;
}

.social-icons a:hover {
    color: var(--primary-orange);
}

.footer-heading {
    font-size: 1rem;
    font-weight: 600;
    color: #FFFFFF;
    margin-bottom: 15px;
}

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

.footer-links li {
    margin-bottom: 10px;
}

.footer-links a {
    color: #FFFFFF;
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.3s;
}

.footer-links a:hover {
    color: var(--primary-orange);
}

.contact-info p {
    color: #FFFFFF;
    font-size: 0.9rem;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}

.contact-info i {
    color: #FFFFFF;
}

.app-badges-footer {
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
}

.app-badge-footer {
    display: inline-flex;
    width: 48px;
    height: 48px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 12px;
    background: transparent;
    padding: 12px;
    transition: all 0.3s;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.app-badge-footer:hover {
    border-color: rgba(255, 255, 255, 0.6);
    transform: translateY(-2px);
    text-decoration: none;
}

.app-badge-footer img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.footer-bottom {
    border-top: 1px solid #FFFFFF;
    padding-top: 20px;
}

.footer-bottom p {
    color: #FFFFFF;
    font-size: 0.85rem;
    margin: 0;
}

/* Mobile Property Cards Section */
.mobile-property-cards-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    width: 100%;
    background: #F5F5F5;
    padding: 16px;
    border-radius: 8px;
    margin-top: 16px;
    box-sizing: border-box;
}

.mobile-property-card {
    background: var(--white);
    border-radius: 6px;
    padding: 14px 12px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(224, 224, 224, 0.3);
    min-height: 70px;
    box-sizing: border-box;
}

.mobile-property-icon {
    font-size: 1.5rem;
    color: #999999;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    line-height: 1;
    margin-top: 0;
}

.mobile-property-text-wrapper {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
    align-items: flex-start;
}

.mobile-property-label {
    font-size: 0.8125rem;
    color: #999999;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: 0.01em;
}

.mobile-property-value {
    font-size: 1rem;
    color: #000000;
    font-weight: 600;
    line-height: 1.3;
}

.header-section {
    background: #F5F5F5;
}

.navbar-brand h4 {
    color: var(--text-dark);
    font-size: 1.5rem;
}

.navbar-brand small {
    font-size: 0.75rem;
}

.btn-download {
    background: var(--primary-orange);
    color: var(--white);
    padding: 8px 20px;
    border-radius: 26px;
    font-weight: 500;
}

.btn-download:hover {
    background: #e55a2b;
    color: var(--white);
}

.btn-list {
    background: var(--white);
    color: var(--primary-orange);
    border: 1px solid #e0e0e0;
    padding: 8px 20px;
    border-radius: 26px;
    font-weight: 500;
}

.btn-list:hover {
    background: var(--bg-light);
    color: var(--primary-orange);
    border-color: var(--primary-orange);
}

.btn-list i {
    color: var(--text-dark);
}

.user-icon {
    font-size: 2rem;
    color: var(--text-dark);
    cursor: pointer;
}

.logo-icon {
    width: 158px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-icon svg {
    width: 100%;
    height: 100%;
}

.navbar-logo-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Hero Section */
.hero-section {
    background: #F5F5F5;
    padding: 40px 0;
    position: relative;
    min-height: 400px;
    overflow: hidden;
}

.hero-area {
    position: relative;
    z-index: 2;
}

.hero-area .row {
    position: relative;
    z-index: 2;
}

.image_home {
    width: 50%;
    height: 150%;
    position: absolute;
    bottom: -130px;
    left: -10px;
    z-index: 0;
    pointer-events: none;
}

.image_home1 {
    width: 50%;
    height: 150%;
    position: absolute;
    bottom: -130px;
    right: -280px;
    z-index: 0;
    pointer-events: none;
}

.image_home1 img {
    width: 150%;
    height: 100%;

    opacity: 0.15;
    display: block;
}

.image_home img {
    width: 150%;
    height: 100%;

    opacity: 0.15;
    display: block;
}


.hero-title {
    font-size: 3.5rem;
    font-weight: regular;
    color: var(--text-dark);
    letter-spacing: -0.5px;
}

.hero-subtitle {
    font-size: 1.1rem;
    color: var(--text-light);
    max-width: 800px;
    margin: 0 auto;
}

/* Search Tabs Wrapper */
.search-tabs-wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: -1px;
    margin-top: 0;
}

.search-tabs {
    display: flex;
    gap: 0;
    background: var(--primary-orange);
    border-radius: 35px 35px 0 0;
    padding: 9px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.tab-btn {
    background: transparent;
    border: none;
    padding: 10px 24px;
    font-size: 1rem;
    color: var(--white);
    cursor: pointer;
    transition: all 0.3s;
    position: relative;
    border-radius: 8px;
    font-weight: 400;
    font-family: Konnect;
}

.tab-btn.active {
    background: var(--white);
    border-radius: 30px;
    color: var(--primary-orange);
    font-weight: 600;
}

.tab-btn:hover:not(.active) {
    opacity: 0.9;
}

/* Search Container */
.search-container {
    background: var(--white);
    width: 914px;
    min-height: 92px;
    border-radius: 31px;
    padding: 8px 8px 8px 0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
    margin: 0 auto;
    display: flex;
    position: relative;
}

.search-container .search-form {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    border: none;
}

.search-form .row {
    height: 100%;
    margin: 0;
}

.search-divider {
    width: 1px;
    height: 60%;
    background: #e0e0e0;
}

.search-input-wrapper {
    position: relative;
    padding: 12px 20px;
    background: var(--white);
    border-radius: 0;
    min-height: 76px;
    display: flex;
    flex-direction: column;
}

.search-form .col-md-5:first-child .search-input-wrapper {
    border-radius: 23px 0 0 23px;
}

.search-input-wrapper label {
    display: block;
    font-size: 16px;
    color: var(--text-light);
    margin-bottom: 4px;
    font-weight: 400;
    line-height: 1.2;
    text-align: left;
}

.search-value {
    font-size: 1rem;
    color: var(--text-dark);
    font-weight: 500;
    display: flex;
    /* text-align: center;
    justify-content: center; */
    gap: 8px;
}

.chevron-icon {
    position: absolute;
    right: 20px;
    top: 40%;
    transform: translateY(-40%);
    color: #000000;
    font-size: 1.4rem;
    margin-top: 8px;
    cursor: pointer;
    z-index: 10;
    pointer-events: none;
}

.search-property-select {
    width: 100%;
    border: none;
    background: transparent;
    padding: 0;
    font-size: 1rem;
    color: var(--text-dark);
    font-weight: 500;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    position: relative;
    padding-right: 40px;
    z-index: 5;
}

.search-property-select:focus {
    outline: none;
    box-shadow: none;
}

.search-property-select option {
    color: var(--text-dark);
    background: var(--white);
    padding: 10px;
}

.location-icon {
    border-radius: 16px;
    color: #1B1B1B;
    font-size: 1.2rem;
    background-color: #FEEFE9;
    padding: 4px;
    display: flex;
    position: absolute;
    top: 27px;
    left: -20px;
}

.search-input-wrapper .form-select,
.search-input-wrapper .form-control {
    border: none;
    background: transparent;
    padding: 0;
    font-size: 1rem;
    color: var(--text-dark);
    font-weight: 500;
}

.search-input-wrapper .form-select:focus,
.search-input-wrapper .form-control:focus {
    box-shadow: none;
    outline: none;
}

.btn-search {
    background: var(--primary-orange);
    color: var(--white);
    border: none;
    border-radius: 50px;
    font-weight: 400;
    font-size: 1rem;
    padding: 12px 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto;
    min-height: 10px;
    box-shadow: 0 2px 8px rgba(255, 84, 3, 0.3);
    transition: all 0.3s;
}

.btn-search:hover {
    background: #e04a02;
    color: var(--white);
    box-shadow: 0 4px 12px rgba(255, 84, 3, 0.4);
    transform: translateY(-1px);
}

.btn-search i {
    font-size: 1.1rem;
    font-weight: 700;
}

.search-pg-link {
    display: flex;
    justify-content: center;
    margin-top: 20px;
    width: 30%;

}

.btn-search-pid1 {

    width: 50%;
    border: 1px solid #FF5403;
    background: #FFE5D9;
    color: var(--text-dark);
    padding: 7px;
    border-radius: 100px;
    font-weight: 500;
    font-size: 0.95rem;
    transition: all 0.3s;
}

.btn-search-pid:hover {
    background: #FFD4C2;
    color: var(--text-dark);
}

/* Location Section */
.location-section {
    background: var(--white);
}

.section-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-dark);
    display: flex;
    align-items: center;
}

.location-title-wrapper {
    position: relative;
    display: flex;
    align-items: flex-start;
    padding-left: 0;
    min-height: 80px;
}

.house-graphic {
    position: absolute;
    transform: rotate(-18deg);
    left: -56px;
    top: 670px;
    z-index: 0;
    flex-shrink: 0;
    pointer-events: none;
}

.house-image {
    width: 140px;
    height: 90px;
    object-fit: contain;
    opacity: 0.25;
    display: block;
}

.location-section-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-dark);
    margin: 0;
    line-height: 1.3;
    position: relative;
    z-index: 1;
    padding-left: 20px;
}

.location-card {
    width: 100%;
    height: 200px;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s;
    cursor: pointer;
}

.location-card:hover {
    transform: translateY(-5px);
}

.location-image {
    position: relative;
    width: 100%;
    height: 200px;
    overflow: hidden;
}

.location-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.location-title-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    padding: 15px 12px;
    background: linear-gradient(180deg, rgba(51, 51, 51, 0) 64.67%, #333333 100%);
    ;
}

.location-title-text {
    color: #fff;
    font-size: 14px;
    font-weight: 400;
    text-align: center;
    line-height: 1.4;
    margin: 0;
}

/* Statistics Section */
.stats-section {
    background: #F06A37;
    height: 70px;
}

.stat-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 1.1rem;
    font-weight: 400;
    color: var(--white);
}

.stat-item i {
    color: var(--white);
    font-size: 1.5rem;
}

/* Trending Properties Section */
.trending-properties-section {
    background: var(--white);
}

.see-all-link {
    color: var(--text-dark);
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
}

.see-all-link:hover {
    color: var(--primary-orange);
}

.property-card {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s;
    background: var(--white);
}

.property-card:hover {
    transform: translateY(-5px);
}

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

.property-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.for-families-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--white);
    color: rgba(103, 103, 103, 1);
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 400;
    z-index: 2;
    white-space: nowrap;
}

.for-families-badge-r {
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--white);
    color: rgba(103, 103, 103, 1);
    padding: 3px 6px;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 400;
    z-index: 2;
    white-space: nowrap;
}

.property-location-detail {
    font-size: 0.85rem;
    color: var(--text-light);
    margin-top: 7px;
    margin-bottom: -2px;
}

.property-listed-by {
    font-size: 0.85rem;
    color: var(--text-light);
    margin-top: 8px;
}

.property-card-section {
    background: var(--white);
}

.rera-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(9, 30, 66, 1);
    color: rgba(143, 255, 249, 1);
    padding: 3px 7px;
    border-radius: 5px;
    font-size: 12.5px;
    letter-spacing: 0.9px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
    z-index: 2;
    white-space: nowrap;
}

.rera-badge i {
    font-size: 0.75rem;
    color: rgba(143, 255, 249, 1);
}

.zero-brokerage-badge {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    background: #000000;
    color: #FF6B35;
    padding: 4px 10px;
    border-radius: 5px;
    font-size: 0.65rem;
    font-weight: 600;
    z-index: 2;
    white-space: nowrap;
}

.heart-btn-outline {
    position: absolute;
    top: 10px;
    right: 10px;
    background: transparent;
    border: 2px solid var(--white);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
}

.heart-btn-outline i {
    color: var(--white);
    font-size: 1rem;
}

.new-booking-badge {
    position: absolute;
    bottom: 50px;
    right: 0;
    background: rgba(9, 30, 66, 1);
    color: rgba(143, 255, 249, 1);
    padding: 3px 7px 3px 25px;
    font-size: 9px;
    letter-spacing: 0.9px;
    font-weight: 700;
    z-index: 2;
    clip-path: polygon(12px 0%, 100% 0%, 100% 100%, 12px 100%, 20px 50%);
    white-space: nowrap;
}

.property-content {
    padding: 15px;
}

.property-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.property-name-verified {
    display: flex;
    align-items: center;
    gap: 8px;
}

.property-name {
    font-size: 0.95rem;
    color: var(--text-dark);
    font-weight: 500;
}

.verified-badge-green {
    background: rgba(0, 153, 96, 1);
    color: var(--white);
    padding: 2px 6px;
    border-radius: 100px;
    font-size: 0.65rem;
    font-weight: 400;
    display: flex;
    align-items: center;
    gap: 3px;
}

.verified-badge-green i {
    font-size: 0.7rem;
}

.property-pid-idx {
    font-size: 0.85rem;
    color: var(--text-light);
}

.property-title-main {
    font-size: 1rem;
    font-weight: 500;
    color: rgba(51, 51, 51, 1);
    margin-bottom: 3px;
    line-height: 1.4;
}

.property-price-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.property-price-left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    white-space: nowrap;
}

.property-price-amount {
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-dark);
}

.price-separator {
    color: var(--text-light);
    font-size: 1rem;
}

.price-per-sqft {
    font-size: 12px;
    color: var(--text-light);
    font-weight: 400;
}

.property-area {
    margin-right: 45px;
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-dark);
}



.property-details-right .property-area-type {
    margin-left: 0;
    font-size: 12px;
}

.property-details-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 8px;
}

.property-details-left {
    display: flex;
    flex-direction: column;
    gap: 0px;
    flex: 1;
    min-width: 0;
}

.property-details-left .property-price-left {
    width: 100%;
}

.property-details-left .property-status {
    font-size: 12px;
}

.property-details-right {
    display: flex;
    flex-direction: column;
    gap: 0px;
    align-items: flex-end;
    flex: 1;
}

.property-vertical-separator {
    flex-shrink: 0;
    margin: 0 0px 0px 21px;
    height: 43px;
}

.property-status-row {
    margin-top: -9px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.property-status {
    font-size: 0.85rem;
    color: var(--text-light);
}

.property-area-type {
    margin-left: 50px;
    font-size: 0.85rem;
    color: var(--text-light);
}

.property-location-row {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 5px;
    font-size: 0.9rem;
    color: var(--text-dark);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 250px;
}

.location-pin-red {
    color: rgba(255, 84, 3, 1);
    font-size: 1rem;
}

.property-distance {
    font-size: 0.85rem;
    color: var(--text-light);
}

/* Assistance Section */


.assistance-header {
    flex: 1;
    min-width: 0;
}

.assistance-title {
    font-size: 2.2rem;
    color: #EE551B;
    font-weight: 700;
    line-height: 1.2;
}

.btn-assistance {
    background: var(--text-dark);
    color: var(--white);
    border: none;
    padding: 12px 30px;
    border-radius: 26px;
    font-weight: 600;
    font-size: 1rem;
    white-space: nowrap;
}

.btn-assistance:hover {
    background: #333;
    color: var(--white);
}

.assistance-cards-wrapper {
    position: relative;
}

.assistance-box {
    background: var(--white);
    padding: 25px 20px;
    border-radius: 10px;
    text-align: left;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    height: 100%;
    position: relative;
    z-index: 1;
    border-left: 4px solid transparent;
}

/* .understanding-box {
    border-left-color: var(--primary-orange);
} */

.assistance-icon {
    font-size: 2rem;
    color: var(--primary-orange);
    margin-bottom: 15px;
}

.assistance-box h5 {
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 12px;
    font-size: 1.2rem;
}

.assistance-box p {
    color: var(--text-light);
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.6;
}

.assistance-box p strong {
    color: var(--text-dark);
    font-weight: 700;
}

/* Budget Section */
.budget-section {
    background: var(--white);
}

.budget-calendar-icon {
    font-size: 1.5rem;
    color: var(--text-light);
}

.budget-section-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-dark);
    margin: 0;
}

.budget-btn {
    width: 100%;
    max-width: 100%;
    padding: 50px 15px;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: transform 0.3s;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 150px;
    min-height: 150px;
    max-height: 150px;
}

.budget-btn::before {
    content: '';
    position: absolute;
    top: -40px;
    left: -40px;
    right: 0;
    bottom: 0;
    background-repeat: repeat;
    background-size: 120px 120px;
    background-position: 0 0;
    opacity: 0.6;
    pointer-events: none;
}

.budget-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.budget-label {
    font-size: 0.95rem;
    font-weight: 600;
    display: block;
    margin-bottom: 5px;
    position: relative;
    z-index: 1;
    line-height: 1.2;
}

.budget-amount {
    font-size: 2.2rem;
    font-weight: 700;
    display: block;
    position: relative;
    z-index: 1;
    line-height: 1.2;
    text-align: center;
    word-wrap: break-word;
}

.budget-label-r {
    font-size: 14px;
    font-weight: 500;
    display: block;
    margin-bottom: 5px;
    position: relative;
    z-index: 1;
    line-height: 1.2;
}

.budget-amount-r {
    font-size: 30px;
    font-weight: 700;
    display: block;
    position: relative;
    z-index: 1;
    line-height: 1.2;
    text-align: center;
    word-wrap: break-word;
}

.budget-blue {
    background: #97E2C4;
    color: #006B99;
}

.budget-green {
    background: #97E2C4;
    color: #1D7753;
}

.budget-pink {
    background: #FFACAC;
    color: #8C1E20;
}

.budget-purple {
    background: #E1BEE7;
    color: #6F2179;
}

.budget-orange {
    background: #FFE0B2;
    color: #CC4800;
}

.budget-grey {
    background: #CFD8DC;
    color: #424E8A;
}

/* Sell Property Section */
.sell-property-section {
    background: var(--white);
}

.sell-property-banner {
    background: #F06A37;
    padding: 50px 40px;
    border-radius: 50px;
    text-align: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(240, 106, 55, 0.3);
}

.sell-property-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 30%;
    height: 30%;
    background: linear-gradient(135deg, rgba(200, 80, 40, 0.4) 0%, transparent 100%);
    border-radius: 50px 0 0 0;
    pointer-events: none;
}

.sell-property-banner::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 30%;
    height: 30%;
    background: linear-gradient(315deg, rgba(200, 80, 40, 0.4) 0%, transparent 100%);
    border-radius: 0 0 50px 0;
    pointer-events: none;
}

.sell-property-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 30px;
    text-align: center;
    position: relative;
    z-index: 1;
}

.sell-property-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    position: relative;
    z-index: 1;
}

.btn-list-property-free,
.btn-list-property-whatsapp {
    background: var(--white);
    color: #F06A37;
    border: none;
    padding: 15px 25px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 1rem;
    white-space: nowrap;
    transition: all 0.3s;
}

.btn-list-property-free:hover,
.btn-list-property-whatsapp:hover {
    background: #f5f5f5;
    color: #F06A37;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.sell-property-or {
    color: var(--white);
    font-size: 1rem;
    font-weight: 400;
    margin: 0 5px;
}

/* Explore Section */
.explore-section {
    background: var(--white);
}

.city-tabs {
    display: flex;
    gap: 10px;
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-bottom: 30px;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding-bottom: 5px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.city-tabs::-webkit-scrollbar {
    display: none;
}

.city-tab {
    background: var(--white);
    border: 2px solid #e0e0e0;
    padding: 10px 20px;
    border-radius: 10px;
    font-weight: 500;
    color: var(--text-dark);
    cursor: pointer;
    transition: all 0.3s;
    white-space: nowrap;
    font-size: 0.95rem;
    flex-shrink: 0 !important;
    scroll-snap-align: start;
    min-width: fit-content;
}

.city-tab.active {
    background: var(--primary-orange);
    color: var(--white);
    border-color: var(--primary-orange);
}

@media (max-width: 767px) {
    .city-tab {
        border: 1px solid rgba(51, 51, 51, 1);
        padding: 4px 10px;
    }

    .city-tab.active {
        background: rgba(51, 51, 51, 1);
        color: var(--white);
        border-color: rgba(51, 51, 51, 1);
    }
}

.city-tab:hover:not(.active) {
    border-color: var(--primary-orange);
}

.explore-cards-scroll {
    margin-right: calc(50% - 50vw);
    display: flex;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 10px 0 20px 0;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

/* Desktop grab scrolling */
@media (min-width: 768px) {
    .explore-cards-scroll {
        cursor: grab;
        user-select: none;
    }

    .explore-cards-scroll:active {
        cursor: grabbing;
    }

    .explore-cards-scroll.dragging {
        cursor: grabbing;
    }
}

.explore-cards-scroll::-webkit-scrollbar {
    display: none;
}

.explore-card-new {
    min-width: 180px;
    max-width: 180px;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    background: var(--white);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    transition: transform 0.3s;
    height: 236px;
}

.explore-card-new:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.explore-card-image {
    position: relative;
    width: 100%;
    height: 354px;
    overflow: hidden;
    background: var(--white);
}

.explore-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.explore-card-title {
    position: absolute;
    top: 20px;
    left: 15px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-dark);
    margin: 0;
    line-height: 1.3;
    z-index: 2;
    max-width: 80%;
}

.explore-card-pg {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background: var(--white);
    display: flex;
    flex-direction: column;
    border: 1px solid #D9D9D9;
    width: 100%;
    max-width: 449px;
    height: 291px;
}

.explore-image {
    position: relative;
    width: 100%;
    height: 350px;
    overflow: hidden;
}

.explore-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.explore-image::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 60%;
    height: 100%;
    /* background: linear-gradient(to right,
            rgba(255, 255, 255, 0.95) 0%,
            rgba(255, 255, 255, 0.6) 40%,
            rgba(255, 255, 255, 0) 100%); */
    z-index: 1;
}

.explore-title {
    position: absolute;
    top: 25px;
    left: 25px;
    z-index: 2;
    font-size: 16px;
    font-weight: 600;
    color: #333333;
    line-height: 1.2;
}

.explore-title1 {
    position: absolute;
    top: 25px;
    left: 25px;
    z-index: 2;
    font-size: 26px;
    font-weight: bold;
    color: #333333;
    line-height: 1.2;
}

/* Projects Section */
.projects-section {
    background: var(--white);
}

.projects-target-icon {
    font-size: 1.5rem;
    color: var(--text-light);
}

.project-card {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s;
    background: var(--white);
}

@media (max-width: 768px) {
    .project-card {
        margin-left: -7px;
    }
}


.project-card:hover {
    transform: translateY(-5px);
}

.project-image-wrapper {
    position: relative;
    width: 100%;
    height: 220px;
    overflow: hidden;
}

.project-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.project-content {
    padding: 15px;
    background: var(--white);
}

.project-name {
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 8px;
    font-size: 1.1rem;
    line-height: 1.3;
}

.project-location {
    font-size: 0.9rem;
    color: var(--text-light);
    margin-bottom: 8px;
    line-height: 1.4;
}

.project-price {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-dark);
    line-height: 1.4;
}

/* Discover Section */
.discover-section {
    background: var(--white);
}

.discover-section .row {
    margin-right: 0;
}

.discover-section .container {
    padding-right: 0;
}

.discover-card {
    width: 210px;
    height: 300px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    background: var(--white);
    transition: transform 0.3s;
}

.discover-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.discover-card-image {
    position: relative;
    width: 256px;
    height: 374px;
    overflow: hidden;
    background: var(--white);
    border-radius: 12px;
}

.discover-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.discover-card-title {
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-dark);
    margin: 0;
    line-height: 1.3;
    text-align: left;
    z-index: 2;
}

/* Brokers Section */
.brokers-section {
    background: var(--white);
}

.broker-card-desktop {
    border: 1px solid rgba(255, 245, 240, 1);
    border-radius: 40px;
    padding: 47px 20px 0 20px;
    text-align: center;
    transition: transform 0.3s;
    position: relative;
    overflow: visible;
    display: flex;
    flex-direction: column;
    min-height: 241px;
    margin-top: 40px;
}

.brokers-scroll-desktop-cards .broker-card-desktop-m {
    min-width: 130px;
    max-width: 130px;
    flex: 0 0 auto;
    margin: 0;
    scroll-snap-align: start;
    margin-top: 60px;
}

.broker-card-desktop-m {
    border: 1px solid rgba(255, 245, 240, 1);
    border-radius: 11px;
    padding: 45px 20px 0 20px;
    text-align: center;
    transition: transform 0.3s;
    position: relative;
    overflow: visible;
    display: flex;
    flex-direction: column;
    min-height: 136px;
}


.broker-card-desktop:hover {
    transform: translateY(-5px);
}

.broker-avatar-desktop {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto;
    border: none;
    position: absolute;
    top: -50px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
}


.broker-avatar-desktop img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.broker-avatar-desktop-m {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto;
    border: none;
    position: absolute;
    top: -45px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
}


.broker-avatar-desktop-m img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.broker-content-desktop {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 10px;
    flex-grow: 1;
    padding-bottom: 0;
}

.broker-company-desktop {
    font-size: 12px;
    color: #6B6B6B;
    font-weight: 400;
    margin-bottom: 5px;
}

.broker-name-desktop {
    font-size: 17px;
    font-weight: 700;
    color: #2C2C2C;
    margin-bottom: 5px;
}

.broker-member-desktop {
    font-size: 12px;
    color: #6B6B6B;
    font-weight: 400;
    margin-bottom: 12px;
}

.broker-tag-desktop {
    background: linear-gradient(274.48deg, #FFFFFF 1.21%, #FFCFB8 173.1%);
    border: 1px solid rgba(255, 245, 240, 1);
    color: rgba(102, 102, 102, 1);
    padding: 6px 16px;
    border-radius: 2px;
    font-size: 12px;
    font-weight: 500;
    margin-bottom: 15px;
    display: inline-block;
}

.broker-content-desktop-m {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: -26px;
    flex-grow: 1;
    padding-bottom: 0;
}

.broker-company-desktop-m {
    font-size: 8px;
    color: #6B6B6B;
    font-weight: 400;
    margin-bottom: 2px;
}

.broker-name-desktop-m {
    font-size: 12px;
    font-weight: 700;
    color: #333333;
    margin-bottom: 2px;
}

.broker-member-desktop-m {
    font-size: 7px;
    color: #6B6B6B;
    font-weight: 400;
    margin-bottom: 1px;
}

.broker-tag-desktop-m {
    background: linear-gradient(274.48deg, #FFFFFF 1.21%, #FFCFB8 173.1%);
    border: 1px solid rgba(255, 245, 240, 1);
    color: rgba(102, 102, 102, 1);
    padding: 4px 7px;
    border-radius: 2px;
    font-size: 7px;
    font-weight: 500;
    margin-bottom: 2px;
    display: inline-block;
}


@media (max-width:786) {
    .broker-tag-desktop {
        padding: 2px 7px;
        border-radius: 5px;
    }

}

.btn-view-details-broker {
    background: #FFEEEB;
    color: rgba(102, 102, 102, 1);
    border: none;
    padding: 12px 20px;
    border-radius: 0 0 24px 24px;
    font-weight: 400;
    font-size: 0.9rem;
    width: calc(100% + 40px);
    margin-left: -20px;
    margin-right: -20px;
    margin-bottom: 0;
    margin-top: auto;
    transition: all 0.3s;
    position: relative;
    z-index: 1;
}


.btn-view-details-broker:hover {
    background: #FFE5D9;
    color: #6B6B6B;
}

.btn-view-details-broker-m {
    background: #FFEEEB;
    color: rgba(102, 102, 102, 1);
    border: none;
    padding: 7px 20px;
    border-radius: 0 0 10px 10px;
    font-weight: 400;
    font-size: 8px;
    width: calc(100% + 40px);
    margin-left: -20px;
    margin-right: -20px;
    margin-bottom: 0;
    margin-top: 6px;
    transition: all 0.3s;
    position: relative;
    z-index: 1;
}

/* Mobile Broker Cards - Smaller height */
.broker-card-mobile {
    min-height: 135px !important;
    padding: 50px 20px 0 20px !important;
}

/* Mobile Broker Buttons Container */
.broker-buttons-mobile {
    display: flex;
    gap: 0;
    width: calc(100% + 40px);
    margin-left: -20px;
    margin-right: -20px;
    margin-top: auto;
    margin-bottom: 0;
    border-radius: 0 0 10px 10px;
    overflow: hidden;
}

.broker-card-mobile .broker-buttons-mobile .btn-mobile-call,
.broker-card-mobile .broker-buttons-mobile .btn-mobile-whatsapp {
    flex: 1;
    background: rgba(255, 245, 240, 1);
    border: 1px solid #e0e0e0;
    border-radius: 0;
    padding: 4px 8px;
    font-size: 8px;
    font-weight: 500;
    color: rgba(102, 102, 102, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    cursor: pointer;
    transition: all 0.3s;
    margin: 0;
    border-top: 1px solid rgba(255, 231, 219, 1);
    border-bottom: none;
    border-left: none;
    border-right: 1px solid rgba(255, 231, 219, 1);
}

.broker-card-mobile .broker-buttons-mobile .btn-mobile-whatsapp {
    border-right: none;
    border-radius: 0 0 10px 0;
}

.broker-card-mobile .broker-buttons-mobile .btn-mobile-call {
    border-radius: 0 0 0 10px;
}

.broker-card-mobile .broker-buttons-mobile .btn-mobile-call i {
    color: rgba(102, 102, 102, 1);
    font-size: 0.9rem;
}

.broker-card-mobile .broker-buttons-mobile .btn-mobile-whatsapp i {
    color: rgba(102, 102, 102, 1);
    font-size: 0.9rem;
}

.broker-card-mobile .broker-buttons-mobile .btn-mobile-call:hover,
.broker-card-mobile .broker-buttons-mobile .btn-mobile-whatsapp:hover {
    background: #f5f5f5;
}

/* Tools Section */
.tools-section {
    background: var(--white);
}

.tool-card {
    background: var(--white);
    padding: 30px 20px;
    border-radius: 10px;
    text-align: left;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    height: 100%;
    transition: transform 0.3s;
}

.tool-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.tool-icon-wrapper {
    margin-bottom: 20px;
}

.tool-icon-circle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #FFE5D9;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tool-icon-image {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.tool-title {
    font-weight: 700;
    color: #F06A37;
    margin-bottom: 12px;
    font-size: 1.2rem;
    line-height: 1.3;
}

.tool-description {
    color: #333333;
    margin-bottom: 15px;
    font-size: 0.95rem;
    line-height: 1.6;
}

.tool-link {
    color: #F06A37;
    font-weight: 400;
    font-size: 18px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    text-decoration: underline;
}

.tool-link:hover {
    color: #e04a02;
    text-decoration: none;
}

.tool-link i {
    font-size: 0.85rem;
}

/* Download Section */
.badge-pill {
    position: relative;
    display: inline-block;
    background-color: #F06A37;
    color: #ffffff;
    padding: 8px 20px;
    border-radius: 50px;
    font-size: 16px;
    top: -10px;
    font-family: Konnect;
    font-style: regular;
    font-weight: 400;
    font-size: 16px;
    line-height: 120%;
    letter-spacing: 0%;
}

.download-section {
    position: relative;
    background: var(--white);
    color: #333333;
    font-weight: 400;
    font-size: 18px;
    line-height: 160%;
    font-style: regular;
    font-family: Konnect;
    font: bold;


}

.size-sec {
    justify-content: center;
}

.section-title {
    font-family: Konnect;
    font-weight: 700;
    font-style: bold;
    font-size: 40px;
    line-height: 120%;
    letter-spacing: 0%;
    position: relative;
}

.phone-mockup {
    text-align: center;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: -10px;
}

.phone-mockup::after {
    position: absolute;

    right: 50px;
    font-size: 2rem;
    z-index: 0;
}

.phone-mockup .phone-1 {
    width: 580px;
    height: 480px;
    transform: rotate(-1deg);
    z-index: 0;
    position: relative;
    top: -40px;
}


.download-description {
    position: relative;
    color: var(--text-light);
    font-size: 1rem;
    line-height: 1.8;
}

.app-badges {
    position: relative;
    display: flex;
    flex-wrap: wrap;
}

.app-badge img {
    position: relative;
    height: 50px;
    width: auto;
}

.wave-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}


.wave-background svg {
    display: block;
    width: 100%;
    height: 100%;
}

.wave-path {
    fill: #FEF1EC;
}

/* Top Cities Section */
.top-cities-section {
    background: var(--white);
    padding: 60px 0;
}

.section-title-wrapper {
    position: relative;
    text-align: center;
    justify-items: center;
}

.property-type-toggle-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    width: 100%;
}

.property-type-toggle {
    display: inline-flex;
    border: 1px solid #F06A37;
    border-radius: 33px;
    padding: 2px;
    background: #fff;
    gap: 0;
}

.property-type-btn {
    padding: 10px 83px;
    border: none;
    background: #fff;
    color: #333333;
    font-size: 18px;
    font-weight: 400;
    cursor: pointer;
    transition: all 0.3s;
    font-family: Konnect, sans-serif;
    position: relative;
    flex: 1;
}

.property-type-btn:first-child {
    border-radius: 33px;
}

.property-type-btn:last-child {
    border-radius: 33px;
}

.property-type-btn.active {
    background: #F06A37;
    color: #f5f5f5;
}

.property-type-btn:hover:not(.active) {
    background: #fff;
    color: #666666;
}

.house-graphic-small {
    position: absolute;
    transform: rotate(-18deg);
    top: 62px;
    left: calc(50% - 550px);
    width: auto;
    height: 63px;
    object-fit: contain;
    z-index: 0;
    opacity: 0.3;
}

.city-tabs-wrapper {
    position: relative;
    margin-bottom: 30px;
}

.city-tabs-divider {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: #e0e0e0;
}

.top-cities-section .city-tabs {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
    padding-bottom: 0px;
    position: relative;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.top-cities-section .city-tabs::-webkit-scrollbar {
    display: none;
}

.top-cities-section .city-tab {
    background: transparent !important;
    border: none !important;
    padding: 10px 14px 18px !important;
    font-weight: 500;
    color: #666666 !important;
    cursor: pointer;
    transition: color 0.2s, font-weight 0.2s;
    white-space: nowrap;
    font-size: 0.95rem;
    position: relative;
    flex-shrink: 0;
    min-width: fit-content;
}

.top-cities-section .city-tab.active {
    color: rgba(0, 0, 0, 1) !important;
    background: transparent !important;
    font-weight: 600 !important;
}

.top-cities-section .city-tab.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    max-width: 96px;
    min-width: 44px;
    height: 4px;
    border-radius: 999px;
    background: #FF5403;
    z-index: 2;
}

.top-cities-section .city-tab:hover:not(.active) {
    color: #FF5403 !important;
}

.city-cards-wrapper {
    position: relative;
    align-items: center;
    gap: 20px;
}

.city-nav-arrow {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid #e0e0e0;
    background: var(--white);
    color: #999999;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
    flex-shrink: 0;
    z-index: 2;
}


/* left arrow */
.city-nav-prev {
    position: absolute;
    top: 50%;
    left: -60px;
    /* 🔑 outside container */
    transform: translateY(-50%);
}

/* right arrow */
.city-nav-next {
    position: absolute;
    top: 50%;
    right: -60px;
    /* 🔑 outside container */
    transform: translateY(-50%);
}

.city-nav-arrow:hover {
    border-color: var(--primary-orange);
    color: var(--primary-orange);
    background: #fff5f0;
}

.city-nav-arrow i {
    font-size: 1.2rem;
}

.city-cards-wrapper .row {
    flex: 1;
}

.city-list-card {
    background: var(--white);
    padding: 25px 20px;
    border-radius: 12px;
    height: 100%;
    transition: transform 0.3s;
    border: 1px solid rgba(217, 217, 217, 1);
}

.city-list-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.city-list-title {
    font-weight: 400;
    color: var(--text-dark);
    margin-bottom: 12px;
    font-size: 1.1rem;
    line-height: 1.3;
}

.city-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.city-list li {
    margin-bottom: 3px;
    position: relative;
    padding-left: 15px;
}

.city-list li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--text-light);
    font-size: 1.2rem;
    line-height: 1;
}

.city-list a {
    color: var(--text-light);
    text-decoration: none;
    font-size: 0.95rem;
    transition: color 0.3s;
    line-height: 1.6;
}

.city-list a:hover {
    color: var(--primary-orange);
}

/* Testimonials Section */
.testimonials-section {
    background: var(--white);
}

.testimonial-card {
    background: var(--white);
    padding: 30px;
    border-radius: 10px;
    height: 100%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.stars {
    color: #FFC107;
    font-size: 1.5rem;
}

.testimonial-text {
    color: var(--text-light);
    margin-bottom: 20px;
    line-height: 1.8;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 15px;
}

.author-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
}

.author-name {
    font-weight: 700;
    color: var(--text-dark);
}

.author-designation {
    font-size: 0.9rem;
    color: var(--text-light);
}

/* Footer */
.footer-section {
    background: #333333;
    border-top: 1px solid var(--border-color);
    padding: 40px 0 20px;
}

.footer-brand h4 {
    color: var(--text-dark);
    font-size: 1.5rem;
    margin: 0;
}

.footer-logo-img {
    max-width: 200px;
    height: auto;
    display: block;
}

.footer-address {
    color: #FFFFFF;
    font-size: 0.9rem;
    margin-bottom: 10px;
}

.footer-description {
    color: #FFFFFF;
    font-size: 0.9rem;
    margin-bottom: 15px;
}

.social-icons {
    display: flex;
    gap: 15px;
}

.social-icons a {
    color: #FFFFFF;
    font-size: 1.5rem;
    transition: color 0.3s;
}

.social-icons a:hover {
    color: var(--primary-orange);
}

.footer-heading {
    font-size: 1rem;
    font-weight: 600;
    color: #FFFFFF;
    margin-bottom: 15px;
}

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

.footer-links li {
    margin-bottom: 10px;
}

.footer-links a {
    color: #FFFFFF;
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.3s;
}

.footer-links a:hover {
    color: var(--primary-orange);
}

.contact-info p {
    color: #FFFFFF;
    font-size: 0.9rem;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}

.contact-info i {
    color: #FFFFFF;
}

.app-badges-footer {
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
}

.app-badge-footer {
    display: inline-flex;
    width: 48px;
    height: 48px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 12px;
    background: transparent;
    padding: 12px;
    transition: all 0.3s;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.app-badge-footer:hover {
    border-color: rgba(255, 255, 255, 0.6);
    transform: translateY(-2px);
    text-decoration: none;
}

.app-badge-footer img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.footer-bottom {
    border-top: 1px solid #FFFFFF;
    padding-top: 20px;
    padding-bottom: 20px;
}

.footer-bottom p {
    color: #FFFFFF;
    font-size: 0.85rem;
    margin: 0;
}

/* Responsive Design */
@media (max-width: 992px) {
    .hero-title {
        font-size: 2.5rem;
    }

    .search-container {
        width: 100%;
        max-width: 914px;
        height: auto;
        min-height: 92px;
    }
}

@media (max-width: 768px) {
    .hero-title {
        font-size: 2rem;
    }

    .hero-subtitle {
        font-size: 1rem;
    }

    .section-title {
        font-size: 1.5rem;
    }

    .budget-btn {
        min-height: 140px;
        padding: 40px 15px;
    }

    .budget-amount {
        font-size: 1.2rem;
    }

    .search-container {
        width: 100%;
        height: auto;
        border-radius: 20px;
        min-height: auto;
    }

    .search-tabs {
        flex-wrap: wrap;
        gap: 5px;
    }

    .tab-btn {
        padding: 8px 16px;
        font-size: 0.9rem;
    }

    .search-form .row {
        flex-direction: column;
    }

    .search-input-wrapper {
        min-height: 60px;
    }

    .btn-search {
        border-radius: 0 0 20px 20px;
        padding: 15px;
        min-height: 50px;
    }

    .city-tabs {
        margin-left: 0px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .assistance-section .d-flex {
        flex-direction: column;
        align-items: flex-start !important;
    }

    .btn-assistance {
        margin-top: 20px;
    }

    .phone-mockup .phone-1 {
        transform: rotate(0deg);
        margin-left: 0;
        max-width: 200px;
    }
}

@media (max-width: 768px) {
    .hero-title {
        font-size: 1.75rem;
    }

    .hero-subtitle {
        font-size: 0.9rem;
    }

    .navbar-brand h4 {
        font-size: 1.2rem;
    }

    .btn-download,
    .btn-list {
        padding: 6px 12px;
        font-size: 0.85rem;
    }

    .user-icon {
        font-size: 1.5rem;
    }

    .location-image {
        height: 150px;
    }

    .property-image-wrapper {
        height: 150px;
    }

    .projects-section .row {
        display: flex;
        overflow-x: auto;
        flex-wrap: nowrap;
        scrollbar-width: none;
        -ms-overflow-style: none;
        -webkit-overflow-scrolling: touch;
        margin: 0 -15px;
        padding: 0 15px;
    }

    .projects-section .row::-webkit-scrollbar {
        display: none;
    }

    .projects-section .col-lg-3 {
        flex: 0 0 auto;
        min-width: 250px;
        max-width: 250px;
        padding: 0 8px;
    }

    .discover-section .row {
        display: flex;
        overflow-x: auto;
        flex-wrap: nowrap;
        scrollbar-width: none;
        -ms-overflow-style: none;
        -webkit-overflow-scrolling: touch;
        margin: 0 -15px;
        padding: 0 15px;
    }

    .discover-section .row::-webkit-scrollbar {
        display: none;
    }

    .discover-section .col-auto {
        flex: 0 0 auto;
        padding: 0 8px;
    }

    .budget-section-title {
        font-size: 1.5rem;
    }

    .budget-section .row {
        display: flex;
        overflow-x: auto;
        flex-wrap: nowrap;
        scrollbar-width: none;
        -ms-overflow-style: none;
        -webkit-overflow-scrolling: touch;
        margin: 0 -15px;
        padding: 0 15px;
    }

    .budget-section .row::-webkit-scrollbar {
        display: none;
    }

    .budget-section .col-lg-2 {
        flex: 0 0 auto;
        width: 143px;
        min-height: 104px;
        padding: 0 8px;
    }

    .budget-btn {
        width: 143px;
        height: 104px;
        padding: 35px 15px;
        width: 100%;
        margin-left: -7px;
    }

    .budget-amount {
        font-size: 1rem;
    }

    .sell-property-title {
        font-size: 1.4rem;
    }

    .sell-property-banner {
        padding: 30px 20px;
        border-radius: 40px;
    }

    .sell-property-buttons {
        flex-direction: column;
        gap: 12px;
    }

    .btn-list-property-free,
    .btn-list-property-whatsapp {
        padding: 12px 20px;
        font-size: 0.95rem;
        width: 100%;
        max-width: 280px;
    }

    .sell-property-or {
        font-size: 0.9rem;
    }
}

/* Mobile App Download Banner */
.mobile-app-banner {
    background: white;
    padding: 10px 0;
    color: var(--white);
}

.mobile-banner-logo {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.mobile-banner-text {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    color: #000000;
}

.mobile-banner-downloads {
    font-size: 0.65rem;
    opacity: 0.95;
    color: #333333;
}

.btn-mobile-use-app {
    background: var(--primary-orange);
    color: var(--white);
    border: none;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.btn-mobile-close-banner {
    background: #333333;
    border-radius: 100px;
    margin-bottom: 30px;
    color: white;
    font-size: 1.1rem;
    padding: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 5px;
}

/* Mobile Header */
.mobile-header {
    background: var(--white);
    border-bottom: 1px solid #e0e0e0;
    padding: 8px 0;
}

.mobile-header-logo {
    width: 103px;
    height: 30px;
    object-fit: contain;
}

.mobile-header-brand {
    font-size: 0.9rem;
    color: var(--text-dark);
    font-weight: 600;
    line-height: 1.2;
}

.mobile-header-text {
    font-size: 0.7rem;
    color: var(--text-light);
    font-weight: 400;
    line-height: 1.2;
}

.mobile-free-badge {
    background: rgba(0, 106, 32, 1);
    color: var(--white);
    padding: 0px 5px 15px;
    border-radius: 4px;
    height: 12px;
    font-size: 0.65rem;
    font-weight: 400;
    position: absolute;
    top: -7px;
    left: 76px;
    z-index: 1;
}

.btn-mobile-list {
    background: transparent;
    color: rgba(51, 51, 51, 1);
    border: 1.5px solid rgba(255, 84, 3, 1);
    padding: 5px 10px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 500;
    white-space: nowrap;
    position: relative;
}

.mobile-user-icon {
    font-size: 1.4rem;
    color: var(--text-dark);
}

/* Mobile Search Container */
.mobile-search-container {
    margin-top: 15px;
    padding: 0 15px;
}

.mobile-search-dropdown {
    background: var(--white);
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 12px 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    font-size: 0.9rem;
    color: var(--text-dark);
    cursor: pointer;
}

.mobile-search-dropdown i {
    color: var(--text-light);
    font-size: 0.85rem;
}

.mobile-search-input-wrapper {
    display: flex;
    gap: 0;
    align-items: stretch;
    background: var(--white);
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
}

.mobile-search-input {
    flex: 1;
    background: var(--white);
    border: none;
    padding: 12px 15px;
    font-size: 0.9rem;
    color: var(--text-dark);
    outline: none;
}

.mobile-search-input::placeholder {
    color: var(--text-light);
}

.mobile-search-btn {
    width: 50px;
    height: auto;
    min-height: 48px;
    background: var(--primary-orange);
    border: none;
    border-radius: 0 8px 8px 0;
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0 12px;
}

.mobile-search-btn i {
    font-size: 1.1rem;
    color: var(--white);
}

/* Mobile Search PID */
.mobile-search-pid {
    padding: 15px 0;
    text-align: center;
}

.mobile-search-pid .container {
    padding: 0 15px;
}

.btn-search-pid {
    background: transparent;
    border: 1px solid #FFB380;
    padding: 8px 20px;
    border-radius: 8px;
    font-size: 0.85rem;
    color: var(--text-dark);
    font-weight: 400;
}

/* Mobile Search Tabs */
.mobile-search-tabs-wrapper {
    margin-bottom: 20px;
    padding: 0 15px;
}

.mobile-search-tabs {
    display: flex;
    justify-content: center;
    gap: 25px;
    background: transparent;
    padding: 0;
}

.mobile-tab-btn {
    background: transparent;
    border: none;
    padding: 8px 0;
    font-size: 0.95rem;
    font-weight: 500;
    color: #666666;
    cursor: pointer;
    transition: all 0.3s;
    position: relative;
}

.mobile-tab-btn.active {
    color: var(--primary-orange);
    font-weight: 600;
}

.mobile-tab-btn.active::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--primary-orange);
    border-radius: 2px;
}

.mobile-tab-btn:hover:not(.active) {
    color: var(--text-dark);
}

/* Mobile Recent Search */
.mobile-recent-search {
    padding: 10px 0 20px 0;
}

.mobile-recent-search .container {
    padding: 0 15px;
}

.recent-search-label {
    font-size: 0.8rem;
    color: var(--text-light);
    margin-bottom: 10px;
    font-weight: 400;
}

.recent-search-tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.recent-search-tag {
    background: var(--white);
    border: 1px solid #e0e0e0;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    color: var(--text-dark);
    font-weight: 400;
}

/* Mobile Best Matches section */
.mobile-best-matches {
    padding: 4px 0 16px;
    background: #ffffff;
}

.mobile-best-matches .container {
    padding: 0 14px;
}

.mobile-best-matches-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.mobile-best-matches-header h2 {
    margin: 0;
    color: #333333;
    font-size: 21px;
    font-weight: 600;
    line-height: 1.2;
}

.mobile-best-matches-header a {
    color: #ff5403;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
}

.mobile-best-matches-scroll {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(2, minmax(0, 1fr));
    grid-auto-columns: minmax(140px, 155px);
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.mobile-best-matches-scroll::-webkit-scrollbar {
    display: none;
}

.mobile-best-match-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.mobile-best-match-image-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    overflow: hidden;
    background: #f2f2f2;
}

.mobile-best-match-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.mobile-best-match-fav {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 22px;
    height: 22px;
    border: none;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    color: #8b8b8b;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
}


.mobile-best-match-image-wrap .mobile-best-match-price {
    position: absolute;
    left: 6px;
    bottom: 6px;
    padding: 5px 5px 3px 5px; 
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.95);
    color: #222222;
    font-size: 10px;
    font-weight: 400;
    line-height: 1;
}

.mobile-best-match-card h3 {
    margin: 7px 0 2px;
    color: rgba(0, 0, 0, 1);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mobile-best-match-card p,
.mobile-best-match-card span {
    margin: 0;
    color: rgba(102, 102, 102, 1);
    font-size: 10px;
    font-weight: 400;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mobile-best-match-card span {
    margin-top: 1px;
}

/* Legal Services */
.legal-services-section {
    padding: 10px 0 30px;
    background: #ffffff;
}

.legal-services-title {
    margin: 0 0 16px;
    color: rgba(51, 51, 51, 1);
    font-size: 40px;
    font-weight: 600;
    line-height: 1.1;
}

.legal-services-grid {
    display:flex;
    gap: 4px;
}

.legal-service-card {
    position: relative;
    display: block;
    width: 349px;
    height: 108px;
    border-radius: 26px;
    overflow: hidden;
    border: 1px solid #f1dfd6;
    text-decoration: none;
}

.legal-service-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.legal-service-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.58) 46%, rgba(255, 255, 255, 0.08) 100%);
}

.legal-service-card h3 {
    position: absolute;
    left: 24px;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    color: rgba(51, 51, 51, 1);
    font-size: 20px;
    font-weight: 600;
    line-height: 120%;
    letter-spacing: 2%;
}

.mobile-legal-services {
    padding: 14px 0 8px;
    background: #ffffff;
}

.mobile-legal-services .container {
    padding: 0 14px;
}

.mobile-legal-services-title {
    margin: 0 0 10px;
    color: rgba(51, 51, 51, 1);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.2;
}

.mobile-legal-services-scroll {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 5px;
}

.mobile-legal-services-scroll::-webkit-scrollbar {
    display: none;
}

.mobile-legal-service-card {
    position: relative;
    flex: 0 0 48%;
    min-width: 48%;
    height: 58px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(241, 236, 233, 1);
    text-decoration: none;
}

.mobile-legal-service-card img {
    position: absolute;
    top: -18px;
    width: 121%;
    height: 142%;
    object-fit: cover;
    display: block;
}

.mobile-legal-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.56) 48%, rgba(255, 255, 255, 0.1) 100%);
}

.mobile-legal-service-card h3 {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    color: rgba(51, 51, 51, 1);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.1;
}

/* Mobile Owner Banner */
.mobile-owner-banner {
    padding: 15px 0;
    background: var(--white);
}

.owner-banner-content {
    background: #FFF8E7;
    padding: 15px 20px;
    border-radius: 12px;
    border: 1.5px solid var(--primary-orange);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    position: relative;
    overflow: hidden;
}

.owner-banner-content-r {
    padding: 5px 10px;
    border-radius: 12px;
    border: 0.9px solid rgba(255, 84, 3, 1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    position: relative;
    overflow: hidden;
    background: linear-gradient(272.81deg, #FFEAE0 -37.25%, #FFFFFF 87.87%);
}

.owner-banner-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.owner-banner-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--primary-orange);
    line-height: 1.2;
}

.owner-banner-title-r {
    font-size: 16.1px;
    font-weight: 700;
    color: #FF7B3D;
    line-height: 1.2;
}

.owner-banner-subtitle {
    font-size: 0.85rem;
    color: #666666;
    line-height: 1.2;
}

.owner-banner-subtitle-r {
    font-size: 9.8px;
    font-weight: 400;
    color: #FF7B3D;
    line-height: 1.2;
}


.owner-banner-wavy-lines {
    width: 20px;
    height: 60px;
    position: relative;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.owner-banner-wavy-lines::before,
.owner-banner-wavy-lines::after {
    content: '';
    position: absolute;
    width: 2px;
    height: 100%;
    background: var(--primary-orange);
    opacity: 0.25;
    border-radius: 2px;
}

.owner-banner-wavy-lines::before {
    left: 50%;
    transform: translateX(-50%) translateX(-3px);
    background-image: url("data:image/svg+xml,%3Csvg width='2' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1,0 Q1,15 1,30 T1,60' stroke='%23FF5403' stroke-width='2' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 2px 100%;
}

.owner-banner-wavy-lines::after {
    left: 50%;
    transform: translateX(-50%) translateX(3px);
    background-image: url("data:image/svg+xml,%3Csvg width='2' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1,0 Q1,15 1,30 T1,60' stroke='%23FF5403' stroke-width='2' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 2px 100%;
}

.owner-banner-house {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.owner-house-image {
    width: 60px;
    height: auto;
    object-fit: contain;
}

/* Mobile News Section */
/* Hide desktop-only sections on mobile */
@media (max-width: 767px) {

    .location-section,
    .assistance-section,
    .sell-property-section {
        display: none !important;
    }

    .hero-section {
        padding: 60px 0 20px 0;
        background: var(--white);
    }

    .hero-title {
        font-size: 1.6rem;
        margin-bottom: 20px;
        font-weight: 700;
    }

    .hero-subtitle {
        font-size: 0.9rem;
        display: none;
    }

    /* Desktop tabs remain unchanged - mobile tabs are separate */

    .search-container {
        width: 100%;
        max-width: 100%;
        border-radius: 12px;
        padding: 8px;
    }

    .search-input-wrapper {
        padding: 10px 15px;
        min-height: 50px;
    }

    .search-input-wrapper label {
        font-size: 0.7rem;
        margin-bottom: 2px;
    }

    .search-value {
        font-size: 0.9rem;
    }

    .search-form .row {
        flex-wrap: nowrap;
    }

    .search-form .col-md-5 {
        flex: 0 0 auto;
        width: auto;
    }

    .search-form .col-md-4 {
        flex: 1;
    }

    .search-form .col-md-2 {
        flex: 0 0 auto;
        width: auto;
    }

    .search-input-wrapper {
        padding: 8px 12px;
        min-height: 45px;
    }

    .search-input-wrapper label {
        display: none;
    }

    .search-value {
        font-size: 0.85rem;
        text-align: left;
    }

    .search-divider {
        width: 1px;
        height: 30px;
        background: var(--primary-orange);
        margin: 0 8px;
    }

    .btn-search {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 40px;
    }

    .btn-search i {
        font-size: 1rem;
        margin: 0;
    }

    .trending-properties-section .row {
        display: flex;
        overflow-x: auto;
        flex-wrap: nowrap;
        scrollbar-width: none;
        -ms-overflow-style: none;
        -webkit-overflow-scrolling: touch;
        margin: 0 -15px;
        padding: 0 15px;
    }

    .trending-properties-section .row::-webkit-scrollbar {
        display: none;
    }

    .trending-properties-section .col-lg-3 {
        flex: 0 0 85%;
        max-width: 85%;
    }

    .property-card {
        margin-bottom: 0;
    }
}

/* Mobile Trending Properties Section */
.mobile-trending-properties-section {
    background: var(--white);
    padding: 20px 0;
}

.mobile-trending-cards-scroll {
    display: flex;
    gap: 15px;
    overflow-x: auto;
    padding: 10px 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    margin: 0 -15px;
    padding-left: 15px;
    padding-right: 15px;
}

.mobile-trending-cards-scroll::-webkit-scrollbar {
    display: none;
}

.mobile-trending-card {
    min-width: 280px;
    max-width: 280px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    background: var(--white);
    flex-shrink: 0;
}

.mobile-property-image-wrapper {
    position: relative;
    width: 100%;
    height: 290px;
    overflow: hidden;
}

.mobile-property-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mobile-zero-brokerage-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #000000;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 700;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.mobile-zero-brokerage-badge .zero-text {
    background: linear-gradient(to right, #FFB84D 0%, #FF8C42 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline-block;
}

.mobile-zero-brokerage-badge .brokerage-text {
    background: linear-gradient(to right, #FF6B35 0%, #FF4500 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline-block;
    margin-left: 4px;
}

.mobile-property-pid {
    border-radius: 20px 0px 0px 20px;
    background: #00000066;
    padding: 4px 9px;
    position: absolute;
    bottom: 10px;
    right: 0px;
    color: var(--white);
    font-size: 0.85rem;
    font-weight: 500;
    z-index: 2;
}

.mobile-property-content {
    padding: 15px;
}

.mobile-property-price-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 8px;
}

.mobile-property-price {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-dark);
}

.mobile-price-per-sqft {
    font-size: 0.9rem;
    color: var(--text-light);
    font-weight: 400;
}

.mobile-property-status {
    font-size: 0.9rem;
    color: var(--text-dark);
    margin-bottom: 8px;
}

.mobile-property-type {
    font-size: 0.95rem;
    color: var(--text-dark);
    font-weight: 500;
    margin-bottom: 8px;
}

.mobile-property-location {
    font-size: 0.9rem;
    color: #676767;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.mobile-property-location i {
    color: var(--text-dark);
    font-size: 0.9rem;
}

.mobile-property-area {
    font-size: 0.9rem;
    color: var(--text-dark);
}

/* Mobile Recommended Brokers Section */
.mobile-brokers-section {
    background: var(--white);
    padding: 20px 0;
}

.mobile-brokers-scroll {
    display: flex;
    gap: 15px;
    overflow-x: auto;
    padding: 10px 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    margin: 0 -15px;
    padding-left: 15px;
    padding-right: 15px;
}

.mobile-brokers-scroll::-webkit-scrollbar {
    display: none;
}

.mobile-broker-card {
    min-width: 200px;
    max-width: 200px;
    flex-shrink: 0;
    background: var(--white);
    border: 1.5px solid #FFB380;
    border-radius: 12px;
    padding: 20px 15px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.mobile-broker-company {
    font-size: 0.8rem;
    color: var(--text-light);
    margin-bottom: 8px;
    font-weight: 400;
}

.mobile-broker-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 12px;
    border: 2px solid #f0f0f0;
}

.mobile-broker-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mobile-broker-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 6px;
}

.mobile-broker-member {
    font-size: 0.8rem;
    color: var(--text-light);
    margin-bottom: 10px;
}

.mobile-broker-tag {
    background: #FFE5D9;
    color: var(--primary-orange);
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 500;
    margin-bottom: 15px;
}

.mobile-broker-buttons {
    display: flex;
    gap: 8px;
    width: 100%;
    margin-top: auto;
}

.btn-mobile-call,
.btn-mobile-whatsapp {
    flex: 1;
    background: var(--white);
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 8px 8px;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    cursor: pointer;
    transition: all 0.3s;
}

.btn-mobile-call i {
    color: var(--primary-orange);
    font-size: 0.9rem;
}

.btn-mobile-whatsapp i {
    color: #25D366;
    font-size: 0.9rem;
}

.btn-mobile-call:hover,
.btn-mobile-whatsapp:hover {
    background: #f5f5f5;
    border-color: var(--primary-orange);
}

/* Mobile Tools and Calculators Section */
.mobile-tools-section {
    background: var(--white);
    padding: 20px 0;
}

.mobile-tools-scroll {
    display: flex;
    gap: 15px;
    overflow-x: auto;
    padding: 10px 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    margin: 0 -15px;
    padding-left: 15px;
    padding-right: 15px;
}

.mobile-tools-scroll::-webkit-scrollbar {
    display: none;
}

.mobile-tool-card {
    min-width: 280px;
    max-width: 280px;
    flex-shrink: 0;
    background: var(--white);
    padding: 30px 20px;
    border-radius: 10px;
    text-align: left;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s;
}

.mobile-tool-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.mobile-tool-card .tool-icon-wrapper {
    margin-bottom: 20px;
}

.mobile-tool-card .tool-icon-circle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #FFE5D9;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mobile-tool-card .tool-icon-image {
    width: 35px;
    height: 35px;
    object-fit: contain;
}

.mobile-tool-card .tool-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: #D2691E;
    margin-bottom: 12px;
}

.mobile-tool-card .tool-description {
    font-size: 0.9rem;
    color: var(--text-light);
    margin-bottom: 15px;
    line-height: 1.5;
}

.mobile-tool-card .tool-link {
    color: var(--primary-orange);
    text-decoration: underline;
    font-weight: 500;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: color 0.3s;
}

.mobile-tool-card .tool-link:hover {
    color: #D2691E;
}

.mobile-tool-card .tool-link i {
    transition: transform 0.3s;
}

.mobile-tool-card .tool-link:hover i {
    transform: translateX(5px);
}

/* Mobile Footer Styles */
.mobile-footer-section {
    background: var(--white);
    padding: 24px 0 0;
    display: none !important;
}

@media only screen and (max-width: 767.98px) {
    .mobile-footer-section {
        display: block !important;
    }
}

@media (min-width: 768px) {
    .mobile-footer-section {
        display: none !important;
    }
}

.mobile-footer-content {
    padding: 0 16px 0;
}

.mobile-footer-brand {
    margin-bottom: 16px;
}

.mobile-footer-logo-img {
    height: 40px;
    width: auto;
    object-fit: contain;
}

.mobile-footer-main-tagline {
    font-size: 0.875rem;
    color: var(--text-dark);
    margin-bottom: 20px;
    line-height: 1.5;
}

.mobile-footer-section-group {
    margin-bottom: 20px;
}

.mobile-footer-heading {
    font-size: 0.9375rem;
    font-weight: bold;
    color: var(--text-dark);
    margin-bottom: 10px;
}

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

.mobile-footer-link {
    font-size: 0.8125rem;
    color: var(--text-dark);
    text-decoration: none;
    transition: color 0.3s;
}

.mobile-footer-link:hover {
    color: var(--primary-orange);
}

.mobile-footer-separator {
    font-size: 0.8125rem;
    color: var(--text-light);
    margin: 0 4px;
}

.mobile-footer-social-icons {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
    padding-top: 8px;
}

.mobile-social-icon {
    color: var(--text-dark);
    font-size: 1.25rem;
    text-decoration: none;
    transition: color 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mobile-social-icon:hover {
    color: var(--primary-orange);
}

.mobile-footer-copyright {
    background: #FFF5F0;
    padding: 16px;
    margin: 0 -16px 0;
    text-align: center;
}

.mobile-footer-copyright p {
    font-size: 0.75rem;
    color: var(--text-dark);
    margin: 0;
}

/* Mobile Property Navigation Section */
.mobile-property-nav-section {
    background: #FFF8F5;
    border-top: 1px solid #e0e0e0;
}

.mobile-property-type-tabs {
    display: flex;
    gap: 0;
    padding: 8px 0;
}

.mobile-property-tab {
    background: none;
    border: none;
    padding: 10px 20px;
    font-size: 0.9rem;
    color: #999999;
    white-space: nowrap;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    font-weight: 400;
    transition: all 0.3s;
    position: relative;
}

.mobile-property-tab.active {
    color: #F06A37;
    font-weight: 700;
    border-bottom-color: #F06A37;
}

.mobile-location-cards-scroll {
    display: flex;
    gap: 15px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 4px 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    margin: 0 -15px;
    padding-left: 15px;
    padding-right: 15px;
}

.mobile-location-cards-scroll::-webkit-scrollbar {
    display: none;
}

.mobile-location-card {
    min-width: 200px;
    max-width: 280px;
    flex-shrink: 0;
    background: transparent;
}

@media (max-width: 768px) {
    .budget-label {
        font-size: 1.1rem;
        /* increase size */
        line-height: 1.4;
        /* improve readability */
    }

    .budget-amount {
        font-size: 25px;
        /* increase size */
        line-height: 1.4;
        /* improve readability */
    }
}

/* Keep each BUY tab panel in one horizontal row (no wrapping) */
.buy-mobile-prop-panel {
    display: flex;
    gap: 15px;
    flex-wrap: nowrap !important;
    width: max-content;
}

.buy-mobile-prop-panel .mobile-location-card {
    flex: 0 0 auto;
}

.mobile-location-card-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #333333;
    margin-bottom: 12px;
}

.mobile-location-card-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mobile-location-card-list li {
    margin-bottom: 1px;
}

.mobile-location-card-list a {
    font-size: 0.85rem;
    color: #999999;
    text-decoration: none;
    line-height: 1.4;
    transition: color 0.3s;
}

.mobile-location-card-list a:hover {
    color: #F06A37;
}

/* Recent News & Articles Section */
.news-section {
    background: var(--white);
    overflow-x: hidden;
    width: 100%;
}

.news-section .container-fluid {
    overflow-x: hidden;
    width: 100%;
}

.news-images-scroll {
    display: flex;
    gap: 15px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    margin: 0 0px;
    padding: 0 15px;
}

.news-images-scroll::-webkit-scrollbar {
    display: none;
}

.news-image-placeholder {
    min-width: 280px;
    max-width: 280px;
    flex-shrink: 0;
    scroll-snap-align: start;
    border: none;
    outline: none;
}

.news-image-placeholder img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    display: block;
    border: none;
    outline: none;
    box-shadow: none;
}

.section-title-mobile {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-dark);
}

.see-all-link {
    color: var(--text-dark);
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
}

.see-all-link:hover {
    color: var(--primary-orange);
}


/* Header Styles */
.header-section {
    background: var(--white);
    border-bottom: 1px solid var(--border-color);
}

.navbar-brand h4 {
    color: var(--text-dark);
    font-size: 1.5rem;
    margin: 0;
}

.navbar-brand small {
    font-size: 0.75rem;
    color: var(--text-light);
}

.logo-icon {
    width: auto;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-right: 10px;
}

.logo-icon svg {
    width: 100%;
    height: 100%;
}

.navbar-logo-img {
    width: 158px;
    height: 46px;
    max-height: 60px;
    object-fit: contain;
    display: block;
}

.search-bar-header {
    display: flex;
    align-items: center;
}

.search-bar-header .input-group {
    border: 1px solid var(--border-color);
    border-radius: 5px;
    overflow: hidden;
}

.search-bar-header .form-select {
    border: none;
    border-right: 1px solid var(--border-color);
    border-radius: 0;
}

.search-bar-header .form-control {
    border: none;
    border-radius: 0;
}

.btn-search-header {
    background: var(--primary-orange);
    color: var(--white);
    border: none;
    padding: 6px 15px;
    border-radius: 0;
}

.btn-search-header:hover {
    background: #e55a2b;
    color: var(--white);
}

.btn-search-pid-header {
    background: transparent;
    color: var(--text-dark);
    border: none;
    padding: 6px 10px;
    font-size: 0.9rem;
}

.btn-search-pid-header:hover {
    color: var(--primary-orange);
}

.user-icon {
    font-size: 2rem;
    color: var(--text-dark);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
}

.user-icon-img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

/* Main Content */
.main-content {
    padding: 40px 0 20px;
    background: white;
    background-position: bottom center;
    background-repeat: no-repeat;
    background-size: contain;
    min-height: calc(100vh - 200px);
    overflow-x: hidden;
}


/* Search Section */
.search-section {
    background: linear-gradient(to bottom, #FFFFFF, #F3F3F3);
    padding: 30px 0;
    margin-bottom: 30px;
}

.search-section-pid {
    background: linear-gradient(to bottom, #FFFFFF, #F3F3F3);
    padding: 25px 0px 25px;
    margin-bottom: 0px;
}


.image_home {
    width: 20%;
    height: 150%;
    position: absolute;
    bottom: -50px;
    left: -10px;
    z-index: 0;
    pointer-events: none;
}

.image_home1 {
    width: 20%;
    height: 150%;
    position: absolute;
    bottom: -50px;
    right: 801px;
    z-index: 0;
    pointer-events: none;
}

.image_home1 img {
    width: 150%;
    height: 100%;

    opacity: 0.15;
    display: block;
}

.image_home2 {
    width: 20%;
    height: 150%;
    position: absolute;
    bottom: -50px;
    right: 362px;
    z-index: 0;
    pointer-events: none;
}

.image_home2 img {
    width: 150%;
    height: 100%;

    opacity: 0.15;
    display: block;
}

.image_home3 {
    width: 20%;
    height: 150%;
    position: absolute;
    bottom: -50px;
    right: -77px;
    z-index: 0;
    pointer-events: none;
}

.image_home3 img {
    width: 150%;
    height: 100%;

    opacity: 0.15;
    display: block;
}

.image_home img {
    width: 150%;
    height: 100%;

    opacity: 0.15;
    display: block;
}

/* background wrapper */
.pid-bg {
    position: absolute;
    left: 0;
    right: 0;
    bottom: clamp(-58px, -4vw, -40px);
    /* <-- bottom of hero */
    display: flex;
    /* <-- no forced gap */
    align-items: flex-end;
    gap: 0;
    /* <-- no gap */
    z-index: 0;
    pointer-events: none;
}

/* images */
.pid-bg-img {
    width: clamp(220px, 30vw, 420px);
    opacity: 0.15;
    height: auto;
    margin-left: -24px;
    /* overlap */
}

.pid-bg-img:first-child {
    margin-left: 0;
}

/* Make search section span full width on desktop */
@media (min-width: 768px) {
    .search-section {
        position: relative;
        margin-left: calc(-50vw + 50%);
        margin-right: calc(-50vw + 50%);
        width: 100vw;
        padding-left: calc(50vw - 50%);
        padding-right: calc(50vw - 50%);
    }

    .search-section-pid {
        position: relative;
        margin-left: calc(-50vw + 50%);
        margin-right: calc(-50vw + 50%);
        width: 100vw;
        padding-left: calc(50vw - 50%);
        padding-right: calc(50vw - 50%);
    }
}

.search-bar-main {
    max-width: 651px;
    margin: 0 auto;
}

.search-bar-main .input-group {
    background: var(--white);
    border-radius: 31px;
    padding: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    overflow: visible !important;
    display: flex;
    align-items: center;
    border: none;
    position: relative;
}

.search-bar-main .input-group::after {
    display: none;
}

.search-bar-main .form-select {
    border: none;
    border-right: 1px solid #E0E0E0;
    border-radius: 23px 0 0 23px;
    padding: 12px 20px;
    font-weight: 500;
    background: transparent;
    flex-shrink: 0;
    color: var(--text-dark);
    font-size: 1rem;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23000' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    padding-right: 35px;
}

.search-bar-main .form-select:focus {
    box-shadow: none;
    border-color: #E0E0E0;
    outline: none;
}

.search-bar-main .form-control {
    border: none;
    border-radius: 0;
    padding: 12px 20px;
    font-size: 1rem;
    flex: 1;
    background: transparent;
    margin-right: 12px;
}

.search-bar-main .form-control::placeholder {
    color: var(--text-light);
}

.search-bar-main .form-control:focus {
    box-shadow: none;
    border-color: transparent;
    outline: none;
}

.btn-search-main {
    background: #F06A37 !important;
    color: var(--white) !important;
    border: none !important;
    padding: 12px 30px !important;
    border-radius: 23px !important;
    font-weight: 500;
    font-size: 1rem;
    white-space: nowrap;
    flex-shrink: 0;
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    margin-left: 0 !important;
    margin-right: 0 !important;
    position: relative;
    z-index: 1;
}

.btn-search-main:hover {
    background: #e55a2b;
    color: var(--white);
}

.btn-search-main i {
    font-size: 1rem;
}

.search-pid-section {
    z-index: 1;
    position: relative;
    text-align: center;
}

.btn-search-pid-main {
    position: relative;
    background: var(--white);
    color: var(--primary-orange);
    border: 2px solid var(--primary-orange);
    padding: 10px 25px;
    border-radius: 23px;
    font-weight: 500;
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    z-index: 1;
}

.btn-search-pid-main:hover {
    background: var(--white);
    color: var(--primary-orange);
    border-color: var(--primary-orange);
}

.btn-search-pid-main i {
    font-size: 0.85rem;
    margin-left: 4px;
}

.container-fluid {
    overflow-x: hidden;
    max-width: 100%;
    width: 100%;
}

.main-content .row {
    margin-top: -32px;
    margin-left: -2px;
    margin-right: 0;
    overflow-x: hidden;
    max-width: 100%;
}

/* Filter Sidebar */
.filter-sidebar {
    position: sticky;
    top: 20px;
    height: fit-content;
    max-height: none;
    overflow-y: visible;
    overflow-x: hidden;
    align-self: flex-start;
}

.filter-card {
    background: var(--white);
    border-radius: 8px;
    padding: 20px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    overflow-x: hidden;
    max-width: 100%;
    box-shadow: none;
}

.filter-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 20px;
    color: var(--text-dark);
}

.filter-section {
    border-bottom: 1px solid var(--border-color);
    padding: 15px 0;
}

.filter-section:last-child {
    border-bottom: none;
}

.filter-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-weight: 500;
    color: var(--text-dark);
}

.filter-section-header i {
    transition: transform 0.3s;
}

.filter-section-header[aria-expanded="true"] i {
    transform: rotate(180deg);
}

.filter-options {
    padding-top: 10px;
}

.filter-options .form-check {
    margin-bottom: 10px;
}

.filter-options .form-check-label {
    font-size: 0.9rem;
    color: var(--text-light);
    cursor: pointer;
}

.filter-options .form-check-input:checked {
    background-color: rgba(240, 106, 55, 1);
    border-color: rgba(240, 106, 55, 1);
}

.filter-options-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    padding-top: 10px;
}

.filter-options-list .form-check {
    margin-bottom: 10px;
}

.filter-options-list .form-check-label {
    font-size: 0.9rem;
    color: var(--text-light);
    cursor: pointer;
}

.filter-options-list .form-check-input:checked {
    background-color: rgba(240, 106, 55, 1);
    border-color: rgba(240, 106, 55, 1);
}

/* Circular checkboxes for Single Room and Shared Room */
#singleRoom,
#sharedRoom {
    border-radius: 11px !important;
    position: relative;
    width: 22px !important;
    height: 22px !important;
}

/* Remove checkmark and show inner filled circle for checked state (12px inner circle) */
#singleRoom:checked,
#sharedRoom:checked {
    background-image: none !important;
    background: radial-gradient(circle at center, rgba(240, 106, 55, 1) 0%, rgba(240, 106, 55, 1) 6px, transparent 6px, transparent 100%) !important;
    border-color: rgba(240, 106, 55, 1) !important;
    border-width: 2px !important;
}


/* Premium Filter */
.premium-filter-card {
    background-color: #FEF8F6;
    margin-top: 15px;
}

.premium-filter-card .filter-title {
    margin-bottom: 0;
}

.premium-filter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.premium-lock-icon {
    color: var(--text-light);
    font-size: 1rem;
}

/* Premium Filter Card - Show on desktop */
@media (min-width: 768px) {

    #mobilePremiumFilters.d-md-block,
    #mobilePremiumFilters.collapse.show.d-md-block {
        display: block !important;
    }
}

/* Toggle Switch Items */
.toggle-switch-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-color);
}

.toggle-switch-item:last-child {
    border-bottom: none;
}

.toggle-label {
    flex: 1;
    margin: 0;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--text-dark);
    font-weight: 400;
}

.toggle-label strong {
    font-weight: 600;
}

/* Toggle Switch */
.toggle-switch {
    position: relative;
    width: 50px;
    height: 28px;
    flex-shrink: 0;
}

.toggle-input {
    display: none;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #E0E0E0;
    border-radius: 28px;
    transition: background-color 0.3s;
    overflow: hidden;
}

.toggle-icon {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-dark);
    font-size: 1.1rem;
    font-weight: bold;
    line-height: 1;
    transition: opacity 0.3s;
    z-index: 1;
    pointer-events: none;
}

.toggle-input:checked+.toggle-slider {
    background-color: var(--primary-orange);
}

.toggle-input:checked+.toggle-slider .toggle-icon {
    opacity: 0;
}

.toggle-input:checked+.toggle-slider::before {
    content: "✓";
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translateY(-50%);
    color: white;
    font-size: 1rem;
    font-weight: bold;
    line-height: 1;
    z-index: 2;
}

.toggle-slider::after {
    content: "";
    position: absolute;
    height: 22px;
    width: 22px;
    right: 3px;
    bottom: 3px;
    background-color: white;
    border-radius: 50%;
    transition: transform 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    z-index: 3;
}

.toggle-input:checked+.toggle-slider::after {
    transform: translateX(-22px);
}



/* Price Range */

/* Wrapper */
.price-range-wrapper {
    padding: 5px 0;
}

/* Price slider container */
.price-slider-container {
    position: relative;
    padding: 20px 10px 35px 10px;
}

.price-slider-container-m {
    position: relative;
    padding: 0px 10px 0px 10px;
}

/* Range slider container */
.price-slider {
    position: relative;
    height: 6px;
    margin-bottom: 25px;
}

/* Slider track (gray line) */
.slider-track {
    position: absolute;
    width: 100%;
    height: 4px;
    background: #E0E0E0;
    border-radius: 2px;
    top: 50%;
    transform: translateY(-50%);
}

/* Slider range (orange fill) */
.slider-range {
    position: absolute;
    height: 4px;
    background: rgba(240, 106, 55, 1);
    border-radius: 2px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    left: 0%;
    width: 100%;
}

/* Range inputs */
.range-input {
    position: absolute;
    width: 100%;
    height: 6px;
    background: none;
    pointer-events: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
    top: 0;
    margin: 0;
}

.range-input::-webkit-slider-runnable-track {
    height: 6px;
    background: transparent;
}

.range-input::-moz-range-track {
    height: 6px;
    background: transparent;
    border: none;
}

.range-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: rgba(240, 106, 55, 1);
    border-radius: 50%;
    border: 3px solid white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    pointer-events: auto;
    position: relative;
    margin-top: -7px;
    z-index: 2;
}

.range-input::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: var(--primary-orange);
    border-radius: 50%;
    border: 3px solid white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    pointer-events: auto;
    position: relative;
    z-index: 2;
}

/* Price labels container */
.price-labels {
    position: relative;
    width: 100%;
    height: 20px;
    margin-top: 5px;
}

/* Individual price label */
.price-label {
    left: 10px;
    position: absolute;
    margin-top: -11px;
    font-size: 0.85rem;
    color: rgba(103, 103, 103, 1);
    font-weight: 400;
    transform: translateX(-50%);
    white-space: nowrap;
}

.price-label1 {
    right: -25px;
    margin-top: -11px;
    position: absolute;
    font-size: 0.85rem;
    color: rgba(103, 103, 103, 1);
    font-weight: 400;
    transform: translateX(-50%);
    white-space: nowrap;
}

/* Ensure inputs are interactive */
.range-input-min,
.range-input-max {
    pointer-events: auto;
}

.range-input-min {
    z-index: 3;
}

.range-input-max {
    z-index: 4;
}

/* Area dropdown boxes */
.area-box {
    border: 1px solid rgba(103, 103, 103, 1);
    border-radius: 8px;
    padding: 10px;
    font-size: 0.875rem;
    color: rgba(51, 51, 51, 0.6);
    background: var(--white);
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: text;
    transition: border-color 0.3s;
    position: relative;
}

.area-box:hover {
    border-color: var(--primary-orange);
}

.area-box i {
    color: #999;
    font-size: 0.75rem;
    pointer-events: none;
    flex-shrink: 0;
    margin-left: 8px;
}

/* Results Header */
.results-header {
    margin-top: 20px;
    background: var(--white);
    padding: 15px;
    border-radius: 8px;
    box-shadow: none;
    margin-bottom: 10px;
}

.results-count {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-dark);
    margin: 0;
}

.results-location {
    font-size: 0.9rem;
    color: var(--text-light);
    margin: 0;
}

.sort-by-wrapper {
    display: flex;
    align-items: center;
}

.sort-by-wrapper label {
    font-size: 0.9rem;
    color: var(--text-light);
    margin: 0;
}

/* Quick Links */
.quick-links {
    width: 266px;
    background: var(--white);
    padding: 20px;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: none;
    margin-bottom: 20px;
    margin-top: 20px;
}

.quick-links-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 12px;
    color: var(--text-dark);
}

.quick-links-divider {
    margin: 0 0 15px 0;
    border: none;
    border-top: 1px solid rgba(204, 204, 204, 1);
    opacity: 0.5;
}

.quick-links-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.quick-links-list li {
    line-height: 21px;
    margin-bottom: 0px;
    padding-left: 20px;
    position: relative;
}

.quick-links-list li::before {
    content: "•";
    position: absolute;
    top: 1px;
    left: 0;
    color: var(--text-light);
    font-size: 1.2rem;
    line-height: 1;
}

.quick-link {
    color: rgba(51, 51, 51, 1);
    text-decoration: none;
    font-size: 12px;
    font-weight: 400;
    transition: color 0.3s;
}

/* Property Cards */
.property-card {
    background: var(--white);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s, box-shadow 0.3s;
    height: 100%;
    display: flex;
    flex-direction: column;

}

.property-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

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


.property-image-wrapper-pid {
    position: relative;
    width: 100%;
    height: 200px;
    overflow: hidden;
}

.property-image-wrapper-pid img {
    width: 100%;
    height: 100%;
    filter: grayscale(100%);
    object-fit: cover;
}

.property-rent-out-badge {
    position: absolute;
    bottom: 10px;
    left: 0px;
    background: var(--primary-orange);
    color: var(--white);
    padding: 8px 16px;
    border-radius: 0 12px 12px 0;
    font-size: 1rem;
    font-weight: 500;
    z-index: 2;
    white-space: nowrap;
}

.pg-nearby-section .property-image-wrapper {
    overflow: visible;
}

.list-card {
    padding-bottom: 5px;
}

.property-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.heart-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    border: none;
    border-radius: 50%;
    padding: 10px 4px 6px 4px;
    width: 35px;
    height: 33px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    transition: all 0.3s;
}


.heart-btn-r {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    border: none;
    border-radius: 4px;
    color: white;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    transition: all 0.3s;
}

.heart-btn:hover {
    background: rgba(0, 0, 0, 0.5);
    transform: scale(1.05);
}

.heart-btn i {
    color: var(--white);
    font-size: 1.1rem;
}

.pg-nearby-section .heart-btn i {
    color: var(--text-dark);
}

.property-content {
    position: relative;
    padding: 15px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.property-content-list {
    position: relative;
    padding: 15px 15px 0px 10px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.property-content-pid {
    position: relative;
    padding: 15px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.property-content::before {
    content: '';
    position: absolute;
    top: -18px;
    left: 0;
    right: 0;
    height: 20px;
    background: var(--white);
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}

.property-pid {
    font-size: 0.85rem;
    color: var(--text-light);
    margin-bottom: 8px;
    font-weight: 400;
}

.property-price {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.property-price-wishlist {
    font-size: 19px;
    font-weight: 700;
    color: #333333;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}

.property-price-wishlist-month {
    font-size: 15px;
    font-weight: 400;
    color: #333333;
    display: flex;
    flex-wrap: wrap;
}

.property-price-list {
    font-size: 15.05px;
    font-weight: 400;
    color: rgba(103, 103, 103, 1);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}

.pg-nearby-section .property-price {
    font-size: 1.25rem;
    margin-bottom: 8px;
}

.price-amount {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-dark);
}

.price-amount-list {
    font-size: 19.05px;
    font-weight: 600;
    color: var(--text-dark);
}

.verified-badge {
    background: var(--primary-green);
    color: var(--white);
    font-size: 0.75rem;
    padding: 4px 10px;
    border-radius: 12px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}



.verified-badge i {
    font-size: 0.7rem;
}

.verified-badge-d {
    color: #676767;
    font-size: 0.75rem;
    padding: 4px 0px;
    border-radius: 12px;
    font-weight: 400;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    gap: 4px;
}



.verified-badge-d i {
    color: #009960;
    font-size: 0.7rem;
}



.property-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 5px;
    line-height: 1.3;
}

.property-title-details-page {
    font-size: 26px;
}

.property-title-wishlist {
    font-size: 16px;
    font-weight: 500;
    color: var(--text-dark);
    margin-bottom: 5px;
    line-height: 1.3;
}

.property-title-r {
    font-size: 14px;
    font-weight: 400;
    color: var(--text-dark);
    margin-bottom: 5px;
    letter-spacing: 0.21px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 220px;
}

.property-title-f {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-dark);
    margin-bottom: 5px;
    letter-spacing: 0.21px;
}

.pg-nearby-section .property-title {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 6px;
}

.property-location {
    font-size: 0.85rem;
    color: var(--text-light);
    margin-bottom: 1px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 220px;
}

.property-sharing-options {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 5px;
    padding-right: 2px;
    -webkit-overflow-scrolling: touch;
}

.property-sharing-options::-webkit-scrollbar {
    display: none;
}

.btn-sharing {
    background: #F5F5F5;
    color: var(--text-dark);
    border: none;
    padding: 6px 14px;
    font-size: 0.8rem;
    border-radius: 20px;
    transition: all 0.3s;
    font-weight: 400;
    flex-shrink: 0;
    white-space: nowrap;
}

.btn-sharing:hover {
    background: #E8E8E8;
    color: var(--text-dark);
}

.btn-sharing.active {
    background: var(--primary-orange);
    color: var(--white);
}

.property-listed-badge {
    font-size: 0.75rem;
    color: var(--text-light);
    background: transparent;
    padding: 0;
    border-radius: 0;
    display: block;
    width: 100%;
    margin-top: auto;
    font-weight: 400;
}

.pg-nearby-section .property-listed-badge {
    font-size: 0.8rem;
    margin-top: 8px;
    background: linear-gradient(90deg, #666666 0%, #999999 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 500;
}

/* Show More Button */
.btn-show-more {
    border: 1px solid #D6501C;
    color: #333333;
    padding: 5px 10px;
    border-radius: 10px;
    font-weight: 500;
}

.btn-show-more:hover {
    background: #D6501C;
    color: #ffffff;
}

/* Ad Banners */
.ad-banners {
    position: sticky;
    top: 20px;
}

.ad-banner {
    background: var(--white);
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.ad-content {
    width: 266px;

    text-align: center;
}


.ad-image {
    width: 266px;
    height: 328px;
    border-radius: 5px;
    margin-bottom: 10px;
    object-fit: cover;
    display: block;
}


/* Student Ad Banner */
.student-ad {
    background: linear-gradient(to bottom, #2a2a2a, #0a0a0a);
    border-radius: 12px;
    padding: 30px 20px;
    text-align: center;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.student-question {
    color: #D0D0D0;
    font-size: 0.95rem;
    font-weight: 500;
    margin: 0;
    text-align: center;
    letter-spacing: 0.5px;
}

.student-title {
    background: linear-gradient(135deg, #FF8C42 0%, #FFB84D 50%, #FFD700 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 15px 0 25px 0;
    text-align: center;
    letter-spacing: 0.5px;
    display: block;
    width: 100%;
}

.btn-grab-now {
    height: 40px;
    background: var(--white);
    color: #F06A37;
    border: none;
    padding: 9px 35px;
    border-radius: 30px;
    font-size: 1rem;
    font-weight: 600;
    width: 100%;
    transition: all 0.3s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn-grab-now:hover {
    background: #f8f8f8;
    color: #FF7A5C;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Relax Ad Banner */
.relax-ad {
    background: linear-gradient(to bottom, #2a2a2a, #0a0a0a);
    border-radius: 12px;
    padding: 30px 20px;
    text-align: center;
    min-height: 148px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.relax-question {
    color: #D0D0D0;
    font-size: 0.95rem;
    font-weight: 400;
    margin: 0;
    text-align: center;
    letter-spacing: 0.5px;
}

.relax-title {
    background: linear-gradient(135deg, #FF8C42 0%, #FFB84D 50%, #FFD700 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.4;
    margin: 15px 0 25px 0;
    text-align: center;
    letter-spacing: 0.3px;
    display: block;
    width: 100%;
}

.btn-know-more {
    height: 40px;
    background: var(--white);
    color: #F06A37;
    border: none;
    padding: 9px 35px;
    border-radius: 30px;
    font-size: 1rem;
    font-weight: 600;
    width: 100%;
    transition: all 0.3s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn-know-more:hover {
    background: #f8f8f8;
    color: #FF7A5C;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* PG Nearby Section */
.pg-nearby-section {
    background: var(--white);
    padding: 40px 0 60px 0;
}

.pg-nearby-section .property-card {
    border-radius: 8px;
}

.pg-nearby-section .property-image-wrapper {
    background: var(--white);
    border-radius: 8px 8px 0 0;
    padding: 0;
    overflow: hidden;
    position: relative;
}

.pg-nearby-section .property-image {
    border-radius: 0;
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    object-fit: cover;
    position: relative;
    z-index: 1;
}

.pg-nearby-section .heart-btn {
    top: 10px;
    right: 10px;
    background: rgba(240, 240, 240, 0.95);
    z-index: 2;
}

.pg-nearby-section .heart-btn-pid {
    position: absolute;
    backdrop-filter: blur(4px);
    border: none;
    border-radius: 50%;
    padding: 10px 4px 6px 4px;
    width: 35px;
    height: 33px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    transition: all 0.3s;
    top: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.4);
    z-index: 2;
}



.pg-nearby-section .heart-btn:hover {
    background: rgba(220, 220, 220, 0.95);
}

.pg-nearby-section .heart-btn i {
    color: var(--text-dark);
    filter: none;
    -webkit-text-stroke: none;
}

.pg-nearby-section .heart-btn-pid i {
    color: rgba(255, 255, 255, 1);
    filter: none;
    -webkit-text-stroke: none;
}

.section-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-dark);
    margin: 0;
}

.carousel-controls {
    display: flex;
    gap: 10px;
}

.btn-carousel-nav {
    background: var(--white);
    color: var(--text-dark);
    border: 1px solid var(--border-color);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}

.pid-carousel-nav-m {
    display: flex;
    gap: 5px;
    /* spacing between buttons */
}


.btn-carousel-nav-pid {
    background: var(--white);
    color: var(--text-dark);
    border: 1px solid var(--border-color);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    --bs-btn-padding-x: 0rem;
}

.btn-carousel-nav-pid-m {
    background: var(--white);
    color: var(--text-dark);
    border: 1px solid var(--border-color);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    --bs-btn-padding-x: 0rem;
}


.btn-carousel-nav:hover {
    background: var(--primary-orange);
    color: var(--white);
    border-color: var(--primary-orange);
}

/* PID Carousel Styles */
.pid-carousel-container {
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE and Edge */
    scroll-behavior: smooth;
}

.pid-carousel-container::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari, Opera */
}

.pid-carousel-wrapper {
    display: inline-block;
    width: max-content;
    min-width: 0;
}

.pid-carousel-wrapper .row {
    display: flex;
    flex-wrap: nowrap;
    margin: 0;
    width: max-content;
    min-width: 0;
}

.pid-carousel-wrapper .row .col-lg-3,
.pid-carousel-wrapper .row .col-md-6 {
    flex: 0 0 6%;
}

/* Buying listing cards - fixed width */
.buying-pid-carousel-wrapper .row .buying-card-col {
    flex: 0 0 auto;
    width: 324px;
    max-width: 324px;
    min-width: 324px;
}

.buying-pid-carousel-wrapper .row {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 0px;
}

.buying-pid-carousel-wrapper .pg-card {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Listing-specific carousel width */
.pid-carousel-wrapper-listing {
    display: inline-block;
    width: max-content;
    min-width: 0;
}

.pid-carousel-wrapper-listing .row {
    display: flex;
    flex-wrap: nowrap;
    margin: 0;
    width: max-content;
    min-width: 0;
}

.pid-carousel-wrapper-listing .row .col-lg-3,
.pid-carousel-wrapper-listing .row .col-md-6 {
    flex: 0 0 7.68% !important;
    max-width: 6.78% !important;
    min-width: 0;
    width: 7.68% !important;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    overflow: visible;
    box-sizing: border-box;
    flex-shrink: 0;
}

.pid-carousel-wrapper-listing .pg-card {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    overflow: visible;
}

.pid-carousel-wrapper-listing .pg-content {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}


.pid-carousel-wrapper-listing .property-sharing-options {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    min-width: 0;
    cursor: grab;
    scroll-behavior: smooth;
}

.pid-carousel-wrapper-listing .property-sharing-options:active {
    cursor: grabbing;
}

.pid-carousel-wrapper-listing .property-sharing-options::-webkit-scrollbar {
    display: none;
}

.pid-carousel-container-mobile {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding: 10px 0;
    margin-left: 15px;
    scrollbar-width: none;
}

.pid-carousel-wrapper-mobile {
    display: flex;
    gap: 15px;
}

.pid-carousel-wrapper-mobile .pg-card-mobile {
    width: 310px;
    min-width: 310px;
    flex-shrink: 0;
    scroll-snap-align: start;
}

/* About Section */
.about-section {
    padding: 40px 0;
}

.about-section .container>.d-none.d-md-block {
    background: var(--white);
    border: 1px solid rgba(232, 232, 232, 1);
    border-radius: 8px;
    padding: 30px;
}

.about-section .container>.d-md-none.px-3 {
    background: var(--white);
    border: 1px solid rgba(232, 232, 232, 1);
    border-radius: 8px;
    padding: 20px;
    margin: 0 15px;
}

.about-content {
    color: var(--text-light);
    line-height: 1.8;
}

.about-content p {
    margin-bottom: 15px;
}

.btn-explore-locality {
    background: var(--white);
    color: #333333;
    border: 1px solid #FF5403;
    padding: 10px 25px;
    border-radius: 26.5px;
    font-weight: 500;
}

.btn-explore-locality:hover {
    background: #e55a2b;
    color: var(--white);
}

/* Brokers Section */
.brokers-section {
    background: var(--white);
    padding: 40px 0;
}

.broker-card-1 {
    background: var(--white);
    border: none;
    border-radius: 12px;
    padding: 30px 20px 0 20px;
    text-align: left;
    transition: transform 0.3s, box-shadow 0.3s;
    height: 21%;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.broker-card-1:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.broker-avatar {
    width: 100px;
    height: 100px;
    margin: 0 auto 20px;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid #E0E0E0;
    background: var(--white);
}

.broker-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.broker-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding-bottom: 0;
}

.broker-company {
    font-size: 0.9rem;
    color: var(--text-light);
    font-weight: 400;
    margin-bottom: 8px;
}

.broker-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: -6px;
}

.broker-space-p {
    padding-top: 24px;
}

.broker-member {
    font-size: 0.85rem;
    color: var(--text-light);
    margin-bottom: 20px;
}

.broker-tag {
    display: inline-block;
    background: linear-gradient(274.48deg, #FFFFFF 1.21%, #FFCFB8 173.1%);
    color: #666666;
    padding: 6px 16px;
    border-radius: 0;
    font-size: 0.85rem;
    font-weight: 500;
    margin-bottom: 20px;
    align-self: center;
}

.btn-view-details {
    background: #FCECE4;
    color: #666666;
    border: 1px solid #F7DED5;
    border-top: 1px solid #F7DED5;
    padding: 15px 20px;
    border-radius: 0 0 12px 12px;
    font-size: 0.9rem;
    width: calc(100% + 40px);
    margin-left: -20px;
    margin-right: -20px;
    font-weight: 400;
    transition: all 0.3s;
    margin-top: auto;
    cursor: pointer;
}

.btn-view-details:hover {
    background: #FCECE4;
    color: var(--primary-orange);
}

/* FAQ Section */
.faq-label {
    font-size: 18px;
    font-weight: 500;
    color: #555;
    text-transform: uppercase;
    margin: 0;
}

.section-title-faq {
    font-style: semibold;
    font-weight: 600;
    font-size: 32px;
    color: #333333;

}

.faq-section {
    padding: 40px 0;
}

.accordion-item {
    border: 1px solid var(--border-color);
    border-radius: 5px;
    margin-bottom: 10px;
    overflow: hidden;
}

.accordion-button {
    background: var(--white);
    color: var(--text-dark);
    font-weight: 500;
    border: none;
    box-shadow: none;
}

.accordion-button:not(.collapsed) {
    background: var(--white);
    color: var(--black);
    box-shadow: none;
    font-weight: bolder;
}

.accordion-button:focus {
    box-shadow: none;
    border-color: transparent;
}

.accordion-body {
    background: var(--white);
    color: var(--text-light);
    padding: 20px;
}

/* Footer */
.footer-section {
    background: #333333;
    border-top: 1px solid var(--border-color);
    padding: 40px 0 0px;
}

.footer-brand h4 {
    color: var(--text-dark);
    font-size: 1.5rem;
    margin: 0;
}

.footer-logo-img {
    max-width: 200px;
    height: auto;
    display: block;
}

.footer-description {
    color: #FFFFFF;
    font-size: 0.9rem;
    margin-bottom: 15px;
}

.social-icons {
    display: flex;
    gap: 15px;
}

.social-icons a {
    color: #FFFFFF;
    font-size: 1.5rem;
    transition: color 0.3s;
}

.social-icons a:hover {
    color: var(--primary-orange);
}

.footer-heading {
    font-size: 1rem;
    font-weight: 600;
    color: #FFFFFF;
    margin-bottom: 15px;
}

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

.footer-links li {
    margin-bottom: 7px;
}

.footer-links a {
    color: #FFFFFF;
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.3s;
}

.footer-links a:hover {
    color: var(--primary-orange);
}

.footer-links-s {
    margin-top: 35px;
    list-style: none;
    padding: 0;
}

.footer-links-s li {
    margin-bottom: 7px;
}

.footer-links-s a {
    color: #FFFFFF;
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.3s;
}

.footer-links-s a:hover {
    color: var(--primary-orange);
}

.contact-info p {
    color: #FFFFFF;
    font-size: 0.9rem;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}

.contact-info i {
    color: #FFFFFF;
}

.app-badges-footer {
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
}

.app-badge-footer {
    display: inline-flex;
    width: 48px;
    height: 48px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 12px;
    background: transparent;
    padding: 12px;
    transition: all 0.3s;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.app-badge-footer:hover {
    border-color: rgba(255, 255, 255, 0.6);
    transform: translateY(-2px);
    text-decoration: none;
}

.app-badge-footer img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.footer-bottom {
    border-top: 1px solid #FFFFFF;
    padding-top: 20px;
    padding-bottom: 20px;
    position: relative;
    overflow: visible;
    min-height: 20px;
}

.footer-bottom-images-wrapper {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    z-index: 0;
    margin: 0;
    padding: 0;
    opacity: 0.4;
    pointer-events: none;
}

.footer-bottom-image {
    width: calc(100vw / 6);
    height: auto;
    display: block;
    object-fit: cover;
    object-position: bottom;
    opacity: 0.3;
    flex-shrink: 0;
    margin: 0;
    padding: 0;
}

.footer-bottom p {
    position: relative;
    z-index: 1;
}



.footer-bottom p {
    color: #FFFFFF;
    font-size: 0.85rem;
    margin: 0;
    position: relative;
    z-index: 1;
}

/* Mobile Filter Toggle */
.btn-filter-toggle {
    background: var(--white);
    color: var(--text-dark);
    border: 1px solid var(--border-color);
    padding: 12px 20px;
    border-radius: 8px;
    font-weight: 500;
}

.btn-filter-toggle:hover {
    background: var(--bg-light);
    color: var(--text-dark);
}

@media (max-width: 767.98px) {
    #mobileFilters {
        display: none !important;
    }

    #mobileFilters.show,
    #mobileFilters.collapse.show {
        display: block !important;
    }
}

.btn-filter-toggle {
    background: var(--primary-orange);
    color: var(--white);
    border: none;
    padding: 12px;
    border-radius: 5px;
    font-weight: 500;
}

.btn-filter-toggle:hover {
    background: #e55a2b;
    color: var(--white);
}

/* Mobile Filter Buttons Bar */
.mobile-filter-buttons-bar {
    bottom: -2px;
    width: 101vw;
    z-index: 5;
    position: fixed;
    margin-left: calc(-52vw + 50%);
    display: flex;
    background: var(--white);
    border-radius: 0;
    overflow: hidden;
    border-right: 1px solid rgba(217, 217, 217, 1);
    box-shadow: 2px -3px 20px 0px #00000033;
}

.mobile-filter-buttons-bar-pg {
    bottom: -2px;
    width: 101vw;
    z-index: 5;
    position: fixed;
    margin-left: calc(-51vw + 50%);
    display: flex;
    background: var(--white);
    border-radius: 0;
    overflow: hidden;
    border-right: 1px solid rgba(217, 217, 217, 1);
    box-shadow: 2px -3px 20px 0px #00000033;
}

.mobile-filter-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--white);
    border: none;
    padding: 15px 0px;
    color: #333333;
    font-size: 12px;
    font-weight: 400;
    cursor: pointer;
    transition: background-color 0.2s;
}

.mobile-filter-btn:hover {
    background: #F5F5F5;
}

.mobile-filter-btn:active {
    background: #EEEEEE;
}

.mobile-filter-icon {
    color: var(--primary-orange);
    font-size: 1.1rem;
}

.mobile-filter-separator {
    width: 1px;
    background: #D3D3D3;
    height: 100%;
    flex-shrink: 0;
}

/* Sort By Modal Styles */
.sort-options {
    padding: 10px 0;
}

.sort-option-item {
    padding: 12px 0;
    border-bottom: 1px solid #F0F0F0;
}

.sort-option-item:last-child {
    border-bottom: none;
}

.sort-option-item .form-check-input {
    margin-top: 0.3rem;
}

.sort-option-item .form-check-label {
    font-size: 1rem;
    color: var(--text-dark);
    cursor: pointer;
    width: 100%;
    display: block;
    padding-left: 8px;
}

/* Mobile Sort By Modal Styles */
.mobile-sort-by-modal .modal-dialog {
    margin: 0;
    max-width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    display: flex;
    align-items: flex-end;
}

.mobile-sort-by-modal .modal-content {
    position: relative;
    border-radius: 20px 20px 0 0;
    border: none;
    min-height: auto;
    max-height: 352px;
    display: flex;
    flex-direction: column;
    background: var(--white);
    margin: 0;
    width: 100%;
}

.mobile-sort-by-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    border-bottom: 1px solid #E0E0E0;
    background: var(--white);
    border-radius: 20px 20px 0 0;
}

.mobile-sort-by-modal-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-dark);
    margin: 0;
    flex: 1;
    text-align: center;
}

.mobile-sort-by-close {
    padding: 0;
    margin: 0;
    opacity: 1;
    width: 32px;
    height: 32px;
    font-size: 1.5rem;
}

.mobile-sort-by-modal-body {
    flex: 1;
    padding: 0;
    background: var(--white);
    overflow-y: auto;
}

.mobile-sort-options {
    padding: 2px;
}

.mobile-sort-option-item {
    padding: 8px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: background-color 0.2s;
}

.mobile-sort-option-item:hover {
    background-color: #F8F8F8;
}

.mobile-sort-option-item:last-child {
    border-bottom: none;
}

.mobile-sort-option-item .form-check-input {
    width: 20px;
    height: 20px;
    margin-top: 0;
    margin-left: 15px;
    margin-right: 0;
    border: 2px solid #CCCCCC;
    cursor: pointer;
    order: 2;
    flex-shrink: 0;
}

.mobile-sort-option-item .form-check-input:checked {
    background-color: var(--primary-orange);
    border-color: var(--primary-orange);
}

.mobile-sort-option-item .form-check-input:focus {
    box-shadow: 0 0 0 0.2rem rgba(255, 107, 53, 0.25);
}

.mobile-sort-option-item .form-check-label {
    font-size: 1rem;
    color: var(--text-dark);
    cursor: pointer;
    margin: 0;
    padding: 0;
    order: 1;
    flex: 1;
}

.mobile-sort-by-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 17px;
    background: var(--white);
    border-top: none;
    border-radius: 0;
}

.btn-apply-sort {
    background: var(--primary-orange);
    color: var(--white);
    border: none;
    padding: 15px 40px;
    border-radius: 40px;
    font-size: 1rem;
    font-weight: 600;
    width: 100%;
    transition: all 0.3s;
}

.btn-apply-sort:hover {
    background: #e55a2b;
    color: var(--white);
}

/* Mobile Updated Dates Modal Styles */
.mobile-updated-dates-modal .modal-dialog {
    margin: 0;
    max-width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    display: flex;
    align-items: flex-end;
}

.mobile-updated-dates-modal .modal-content {
    position: relative;
    border-radius: 20px 20px 0 0;
    border: none;
    min-height: auto;
    max-height: 352px;
    display: flex;
    flex-direction: column;
    background: var(--white);
    margin: 0;
    width: 100%;
}

.mobile-updated-dates-modal .modal-content svg {
    align-items: center;
    align-self: center;
    margin-top: 10px;
}

.mobile-updated-dates-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 20px 0px 20px;
    border-bottom: none;
    background: var(--white);
    border-radius: 20px 20px 0 0;
}

.mobile-updated-dates-modal-title {
    font-size: 20px;
    font-weight: 600;
    color: #000000;
    margin: 0;
    flex: 1;
    text-align: left;
}

.mobile-updated-dates-modal-body {
    flex: 1;
    padding: 0;
    background: var(--white);
    overflow-y: auto;
}

.mobile-updated-dates-options {
    padding: 0;
}

.mobile-updated-dates-option-item {
    padding: 10px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: background-color 0.2s;
    border-bottom: none;
    margin-bottom: 1px;
}

.mobile-updated-dates-option-item:hover {
    background-color: #F8F8F8;
}

.mobile-updated-dates-option-item:last-child {
    border-bottom: none;
}

.mobile-updated-dates-option-item .form-check-input {
    width: 20px;
    height: 20px;
    margin-top: 0;
    margin-left: 15px;
    margin-right: 0;
    border: 2px solid #CCCCCC;
    cursor: pointer;
    order: 2;
    flex-shrink: 0;
}

.mobile-updated-dates-option-item .form-check-input:checked {
    background-color: var(--primary-orange);
    border-color: var(--primary-orange);
}

.mobile-updated-dates-option-item .form-check-input:focus {
    box-shadow: 0 0 0 0.2rem rgba(255, 107, 53, 0.25);
}

.mobile-updated-dates-option-item .form-check-label {
    font-size: 1rem;
    font-weight: 500;
    color: #666666;
    cursor: pointer;
    margin: 0;
    padding: 0;
    order: 1;
    flex: 1;
}

.mobile-updated-dates-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 17px;
    background: var(--white);
    border-top: none;
    border-radius: 0;
}

.btn-done-updated-dates {
    background: var(--primary-orange);
    color: var(--white);
    border: none;
    padding: 15px 40px;
    border-radius: 40px;
    font-size: 1rem;
    font-weight: 600;
    width: 100%;
    transition: all 0.3s;
}

.btn-done-updated-dates:hover {
    background: #e55a2b;
    color: var(--white);
}

/* Mobile Filters Modal Styles */
.mobile-filters-modal .modal-dialog {
    margin: 0;
    max-width: 100%;
}

.mobile-filters-modal .modal-content {
    border-radius: 0;
    border: none;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.mobile-filter-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px;
    border-bottom: none;
    background: var(--white);
}

.mobile-filter-clear {
    color: var(--primary-orange);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 400;
    padding: 0;
    border: none;
    background: transparent;
}

.mobile-filter-clear:hover {
    color: #e55a2b;
    text-decoration: none;
}

.mobile-filter-modal-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-dark);
    margin: 0;
    flex: 1;
    text-align: center;
}

.mobile-filter-close {
    padding: 0;
    margin: 0;
    opacity: 1;
    width: 24px;
    height: 24px;
}

.mobile-filter-modal-body {
    flex: 1;
    padding: 15px;
    background: #F5F5F5;
    overflow-y: auto;
}

.mobile-filter-content {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.mobile-filter-section-card {
    background: var(--white);
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.mobile-filter-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    padding: 0;
    margin-bottom: 0;
}

.mobile-filter-section-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-dark);
}

.mobile-filter-chevron {
    color: var(--text-light);
    font-size: 0.9rem;
    transition: transform 0.3s;
}

.mobile-filter-section-header[aria-expanded="true"] .mobile-filter-chevron {
    transform: rotate(180deg);
}

.mobile-filter-options {
    padding-top: 15px;
}

.mobile-filter-check {
    margin-bottom: 12px;
}

.mobile-filter-check .form-check-input {
    width: 20px;
    height: 20px;
    border: 2px solid #CCCCCC;
    border-radius: 4px;
    margin-top: 0.2rem;
    cursor: pointer;
}

.mobile-filter-check .form-check-input:checked {
    background-color: var(--primary-orange);
    border-color: var(--primary-orange);
}

.mobile-filter-check .form-check-input:focus {
    box-shadow: 0 0 0 0.2rem rgba(255, 107, 53, 0.25);
}

.mobile-filter-check .form-check-label {
    font-size: 0.95rem;
    color: var(--text-dark);
    cursor: pointer;
    margin-left: 8px;
}

.mobile-filter-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px;
    background: #F8F8F8;
    border-top: 1px solid #E0E0E0;
    border-radius: 0;
}

.mobile-filter-results-count {
    font-size: 0.9rem;
    color: var(--text-light);
}

/* Hide Food Filter Card on Desktop */
@media (min-width: 768px) {
    .mobile-food-filter-card {
        display: none !important;
    }
}

.mobile-filter-results-count span {
    font-weight: 600;
    color: var(--text-dark);
}

.btn-view-results {
    background: var(--primary-orange);
    color: var(--white);
    border: none;
    padding: 12px 30px;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 500;
    transition: all 0.3s;
}

.btn-view-results:hover {
    background: #e55a2b;
    color: var(--white);
}

/* Mobile Premium Filters Modal Styles */
.mobile-premium-filters-modal .modal-dialog {
    margin: 0;
    max-width: 100%;
}

.mobile-premium-filters-modal .modal-content {
    position: fixed;
    border-radius: 20px 20px 0 0;
    border: none;
    min-height: 82vh;
    max-height: 82vh;
    display: flex;
    flex-direction: column;
    background: #FEFBF9;
    margin-top: 19vh;
}

.mobile-premium-filter-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    border-bottom: 1px solid #E0E0E0;
    background: #FEFBF9;
    border-radius: 20px 20px 0 0;
}

.mobile-premium-lock-icon {
    color: var(--text-dark);
    font-size: 1rem;
    margin-right: 8px;
}

.mobile-premium-filter-modal-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-dark);
    margin: 0;
    flex: 1;
    text-align: center;
}

.mobile-premium-filter-close {
    padding: 0;
    margin: 0;
    opacity: 1;
    width: 32px;
    height: 32px;
    font-size: 1.5rem;
}

.mobile-premium-filter-modal-body {
    flex: 1;
    padding: 20px;
    background: #FEFBF9;
    overflow-y: auto;
}

.mobile-premium-filter-content {
    display: flex;
    flex-direction: column;
    gap: 0px;
}

.mobile-premium-filter-section-card {
    border-radius: 8px;
    padding: 10px 8px 15px 19px;
}

.mobile-premium-filter-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    padding: 0;
    margin-bottom: 0;
}

.mobile-premium-filter-section-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-dark);
}

.mobile-premium-filter-chevron {
    color: var(--text-light);
    font-size: 0.9rem;
    transition: transform 0.3s;
}

.mobile-premium-filter-section-header[aria-expanded="true"] .mobile-premium-filter-chevron {
    transform: rotate(180deg);
}

.mobile-premium-filter-options {
    padding-top: 15px;
}

.mobile-premium-filter-options-listed {
    padding-top: 15px;
    display: flex;
    gap: 20px;
}

.mobile-premium-filter-check {
    margin-bottom: 15px;
}

.mobile-premium-filter-check:last-child {
    margin-bottom: 0;
}

.mobile-premium-filter-check .form-check-input {
    width: 20px;
    height: 20px;
    border: 2px solid #CCCCCC;
    border-radius: 4px;
    margin-top: 0.2rem;
    cursor: pointer;
}

.mobile-premium-filter-check .form-check-input:checked {
    background-color: var(--primary-orange);
    border-color: var(--primary-orange);
}

.mobile-premium-filter-check .form-check-input:focus {
    box-shadow: 0 0 0 0.2rem rgba(255, 107, 53, 0.25);
}

.mobile-premium-filter-check .form-check-label {
    font-size: 0.95rem;
    color: var(--text-dark);
    cursor: pointer;
    margin-left: 8px;
}

/* Premium Toggle Switches */
.mobile-premium-toggle-switch-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid #F0F0F0;
}

.mobile-premium-toggle-switch-item:last-child {
    border-bottom: none;
}

.mobile-premium-toggle-label {
    flex: 1;
    margin: 0;
    font-size: 0.95rem;
    color: var(--text-dark);
    cursor: pointer;
}

.mobile-premium-toggle-label strong {
    font-weight: 700;
}

.mobile-premium-toggle-switch {
    position: relative;
    width: 50px;
    height: 28px;
    margin-left: 15px;
}

.mobile-premium-toggle-input {
    opacity: 0;
    width: 0;
    height: 0;
}

.mobile-premium-toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #CCCCCC;
    border-radius: 28px;
    transition: 0.3s;
    display: flex;
    align-items: center;
    padding: 0 4px;
}

.mobile-premium-toggle-slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 4px;
    background-color: white;
    border-radius: 50%;
    transition: 0.3s;
}

.mobile-premium-toggle-icon {
    color: var(--text-dark);
    font-size: 1.2rem;
    font-weight: 700;
    margin-left: auto;
    transition: opacity 0.3s;
}

.mobile-premium-toggle-input:checked+.mobile-premium-toggle-slider {
    background-color: var(--primary-orange);
}

.mobile-premium-toggle-input:checked+.mobile-premium-toggle-slider:before {
    transform: translateX(22px);
}

.mobile-premium-toggle-input:checked+.mobile-premium-toggle-slider .mobile-premium-toggle-icon {
    opacity: 0;
}

.mobile-premium-filter-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: #FEFBF9;
    border-top: 1px solid #E0E0E0;
    border-radius: 0;
}

.btn-view-result-premium {
    background: var(--primary-orange);
    color: var(--white);
    border: none;
    padding: 15px 40px;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    width: 100%;
    transition: all 0.3s;
}

.btn-view-result-premium:hover {
    background: #e55a2b;
    color: var(--white);
}

/* Responsive Styles */
@media (max-width: 991.98px) {
    .filter-sidebar {
        position: relative;
        top: 0;
        margin-bottom: 20px;
        max-height: none;
        overflow-y: visible;
    }

    .search-bar-header {
        display: none;
    }

    .search-pid-header {
        display: none;
    }

    .quick-links {
        display: none;
    }

    .ad-banners {
        display: none;
    }

    .results-header {
        flex-direction: column;
        gap: 15px;
    }

    .sort-by-wrapper {
        width: 100%;
        justify-content: space-between;
    }
}

@media (max-width: 767.98px) {
    .navbar-brand {
        font-size: 1.2rem;
    }

    .logo-icon {
        width: 30px;
        height: 30px;
    }

    .user-icon {
        font-size: 1.5rem;
    }

    .filter-card {
        padding: 15px;
    }

    .property-image-wrapper {
        height: 200px;
    }

    .section-title {
        font-size: 1.25rem;
    }

    .carousel-controls {
        display: none;
    }

    .broker-card {
        margin-bottom: 20px;
    }

    .footer-section .row>div {
        margin-bottom: 30px;
    }

    .header-section {
        padding: 0;
    }

    .header-section .container-fluid {
        padding: 0;
    }
}

@media (max-width: 575.98px) {
    .main-content {
        padding: 15px 0;
    }

    .filter-card {
        padding: 12px;
    }

    .filter-title {
        font-size: 1.1rem;
    }

    .results-count {
        font-size: 1.1rem;
    }

    .property-sharing-options {
        flex-direction: row;
    }

    .section-title {
        font-size: 1.1rem;
    }

    .about-content {
        font-size: 0.9rem;
    }

    .accordion-button {
        font-size: 0.9rem;
        padding: 12px 15px;
    }

    .accordion-body {
        font-size: 0.85rem;
        padding: 15px;
    }
}

/* Mobile App Banner */
.mobile-app-banner {
    background: var(--white);
    border-bottom: none;
}

.mobile-app-banner .banner-logo-icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.mobile-app-banner .banner-text {
    font-size: 0.85rem;
    color: #000000;
    font-weight: 500;
    white-space: nowrap;
}

.mobile-app-banner .banner-rating {
    font-size: 0.75rem;
    color: #000000;
    margin-left: 0px;
}

.mobile-app-banner .banner-rating i {
    color: #FFD700;
    font-size: 0.8rem;
}

.btn-use-app {
    background: var(--primary-orange);
    color: var(--white);
    border: none;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}

.btn-use-app:hover {
    background: #f5f5f5;
    color: var(--primary-orange);
}

.btn-close-banner {
    background: transparent;
    color: #000000;
    border: none;
    padding: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    opacity: 0.9;
}

.btn-close-banner:hover {
    opacity: 1;
    color: var(--white);
}

/* Mobile Header */
.mobile-header {
    background: var(--white);
    border-bottom: 1px solid var(--border-color);
}

.mobile-logo-icon {
    width: 103px;
    height: 28px;
    object-fit: contain;
}

.mobile-brand-name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-dark);
}

.btn-let-property-mobile {
    background: var(--white);
    border: 1px solid var(--border-color);
    padding: 6px 10px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    white-space: nowrap;
}

.badge-free {
    background: var(--primary-green);
    color: var(--white);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 600;
    line-height: 1.2;
}

.btn-text-property {
    color: var(--primary-orange);
    font-weight: 600;
}

.btn-let-property-mobile:hover {
    background: var(--bg-light);
}

.user-icon-mobile {
    font-size: 1.8rem;
    color: var(--text-dark);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Mobile Search Section */
.search-section-mobile {
    margin-bottom: 0;
    background: transparent;
    padding: 15px 0 20px;
}

.search-section-mobile-r {
    position: relative;
    background: linear-gradient(to bottom, #FFFFFF, #F3F3F3);
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-bottom: 0;
    padding: 15px 13px 20px
}

.search-bar-main-mobile {
    margin-bottom: 12px;
}

.search-section-mobile .container-fluid {
    padding: 0 15px;
}

.search-bar-main-mobile .input-group {
    border: 1px solid var(--border-color);
    border-radius: 30px;
    overflow: hidden;
    background: var(--white);
    z-index: 2;
}

.m-image-pid {
    margin-bottom: 515px;
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.m-image-pid img {
    position: absolute;
    top: 50%;
    left: 51%;
    transform: translate(-50%, -50%) scale(1.2);
    /* centered and slightly scaled */
    width: 88%;
    /* scale proportionally */
    height: 100%;
    /* fill container height */
    max-width: none;
    /* ignore default width limit */
    opacity: 0.15;
    display: block;
}

.m-image-list {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.m-image-list img {
    position: absolute;
    top: 47%;
    left: 51%;
    transform: translate(-50%, -50%) scale(1.2);
    /* centered and slightly scaled */
    width: 88%;
    /* scale proportionally */
    height: 140%;
    /* fill container height */
    max-width: none;
    /* ignore default width limit */
    opacity: 0.15;
    display: block;
}


.m-image-list-search {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.m-image-list-search img {
    position: absolute;
    top: 46%;
    left: 51%;
    transform: translate(-50%, -50%) scale(1.2);
    /* centered and slightly scaled */
    width: 88%;
    /* scale proportionally */
    height: 140%;
    /* fill container height */
    max-width: none;
    /* ignore default width limit */
    opacity: 0.15;
    display: block;
}



.form-select-pg-mobile {
    border: none;
    border-right: 1px solid var(--border-color);
    border-radius: 30px 0 0 30px;
    padding: 12px 15px;
    font-size: 0.9rem;
    background: var(--white);
    flex: 0 0 auto;
    width: auto;
    min-width: 70px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 35px;
}

.form-select-pg-mobile:focus {
    box-shadow: none;
    border-right: 1px solid var(--border-color);
    outline: none;
}

.form-control-search-mobile {
    border: none;
    padding: 12px 15px;
    font-size: 0.9rem;
    background: var(--white);
    flex: 1;
}

.form-control-search-mobile:focus {
    box-shadow: none;
    border: none;
}

.form-control-search-mobile::placeholder {
    color: var(--text-light);
    font-size: 0.9rem;
}

.btn-search-main-mobile {
    background: var(--primary-orange);
    color: var(--white);
    border: none;
    padding: 12px 20px;
    border-radius: 0 30px 30px 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-search-main-mobile:hover,
.btn-search-main-mobile:focus {
    background: #e55a2b;
    color: var(--white);
    box-shadow: none;
}

.btn-search-pid-mobile {
    background: var(--white);
    color: var(--primary-orange);
    border: 2px solid var(--primary-orange);
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 500;
}

.btn-search-pid-mobile:hover {
    background: var(--bg-light);
    color: var(--primary-orange);
    border-color: var(--primary-orange);
}

.btn-search-mobile-pid {
    margin: 4px;
    background: var(--primary-orange);
    color: var(--white);
    border: none;
    padding: 12px 30px;
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-search-mobile-pid i {
    font-size: 16px;
}


/* Mobile Nearby Properties Scroll */
.nearby-properties-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 10px 0;
}

.nearby-properties-scroll::-webkit-scrollbar {
    display: none;
}

.nearby-properties-wrapper {
    display: flex;
    gap: 15px;
    padding: 0 15px;
    width: max-content;
}

.property-card-mobile {
    flex: 0 0 280px;
    background: var(--white);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.property-card-mobile .property-image-wrapper {
    height: 180px;
    position: relative;
}

.property-card-mobile .property-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.property-card-mobile .property-content {
    padding: 12px;
}

.property-card-mobile .property-pid {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-dark);
    margin-bottom: 6px;
}

.property-card-mobile .property-price {
    font-size: 0.9rem;
    color: var(--text-dark);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.property-card-mobile .property-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 4px;
}

.property-card-mobile .property-location {
    font-size: 0.85rem;
    color: var(--text-light);
    margin-bottom: 0;
}

.btn-carousel-nav-mobile {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-dark);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin-left: 8px;
}

.btn-carousel-nav-mobile:hover {
    background: var(--bg-light);
    color: var(--text-dark);
}

/* Mobile Section Titles */
.section-title-mobile {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 0;
}

.section-title-mobile-plan {
    font-size: 24px;
    font-weight: 600;
    text-align: center;
    color: var(--text-dark);
    margin-bottom: 0;
}

.see-all-link {
    color: var(--primary-orange);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 400;
}

.see-all-link:hover {
    color: #e55a2b;
    text-decoration: underline;
}

/* Mobile About Section */
.about-content-mobile {
    font-size: 0.9rem;
    color: var(--text-light);
    line-height: 1.6;
}

.btn-explore-locality-mobile {
    background: transparent;
    color: var(--text-dark);
    border: 1px solid var(--border-color);
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 0.9rem;
}

.btn-explore-locality-mobile:hover {
    background: var(--bg-light);
    color: var(--text-dark);
}

/* Mobile Brokers Section */
.brokers-scroll-mobile {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 10px 0;
}

.brokers-scroll-mobile::-webkit-scrollbar {
    display: none;
}

.broker-card-mobile {
    flex: 0 0 120px;
    text-align: center;
}

.broker-avatar-mobile {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto 10px;
    border: 3px solid var(--border-color);
}

.broker-avatar-mobile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.broker-name-mobile {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-dark);
    margin-bottom: 4px;
}

.broker-rating-mobile {
    font-size: 0.85rem;
    color: var(--text-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.broker-rating-mobile i {
    color: #FFD700;
    font-size: 0.9rem;
}

/* Mobile Promotional Banner */
.promotional-banner-mobile {
    background: #2C2C2C;
    margin: 30px 0;
}

.promo-banner-content {
    text-align: center;
    padding: 30px 20px;
}

.promo-title {
    color: var(--primary-orange);
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 20px;
}

.btn-learn-more-mobile {
    background: var(--white);
    color: var(--text-dark);
    border: none;
    padding: 12px 30px;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 500;
}

.btn-learn-more-mobile:hover {
    background: var(--bg-light);
    color: var(--text-dark);
}

/* Hide Desktop Sections on Mobile */
@media (max-width: 767.98px) {
    .main-content .row.g-3 {
        margin: 0;
    }

    .filter-sidebar {
        display: none !important;
    }

    .filter-sidebar.show {
        display: block !important;
    }

    .col-lg-3.d-none.d-lg-block {
        display: none !important;
    }

    .col-lg-9.col-md-8 {
        flex: 0 0 100%;
        max-width: 100%;
        padding: 0;
    }

    .col-lg-9.col-md-8>.row>.col-lg-9 {
        flex: 0 0 100%;
        max-width: 100%;
        padding: 0;
    }

    .property-listings .row.g-3 {
        margin: 0;
    }

    .property-listings .col-md-6 {
        flex: 0 0 100%;
        max-width: 100%;
        padding: 0 15px;
        margin-bottom: 20px;
    }
}

/* Mobile Responsive Adjustments */
@media (max-width: 767.98px) {
    body {
        padding: 0;
    }

    .main-content {
        padding: 0;
        background: #FFFFFF;
        background-position: center;
        background-repeat: repeat;
        background-size: auto;
    }

    .main-content .container-fluid {
        padding: 0;
    }

    .search-section {
        padding: 15px 0 0px;
        margin-bottom: 15px;
    }

    .results-header {
        padding: 0px;
    }

    .results-count {
        font-size: 1.1rem;
        font-weight: 600;
    }

    .mobile-results-header-wrapper {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 15px;
    }

    .mobile-results-text {
        flex: 1;
        min-width: 0;
    }

    .mobile-results-text .results-count {
        font-size: 18px;
        font-weight: 600;
        color: #333333;
        line-height: 1.4;
    }

    .btn-updated-dates {
        background: transparent;
        border: 1px solid rgba(51, 51, 51, 0.3);
        border-radius: 100px;
        padding: 10px 18px 10px 18px;
        display: flex;
        align-items: center;
        gap: 8px;
        color: rgba(102, 102, 102, 1);
        font-size: 10px;
        font-weight: 500;
        white-space: nowrap;
        flex-shrink: 0;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .btn-updated-dates:hover {
        border-color: rgba(51, 51, 51, 0.5);
        background: rgba(51, 51, 51, 0.02);
    }

    .btn-updated-dates svg {
        flex-shrink: 0;
    }

    .results-location {
        font-size: 0.9rem;
        color: var(--text-light);
    }

    .property-listings {
        padding: 0;
    }

    .btn-show-more {
        width: 27%;
        border: 1px solid #D6501C;
        color: #333333;
        padding: 5px 10px;
        border-radius: 10px;
        font-weight: 500;
        font-size: 12px;
        margin-top: -15px;
    }

    .btn-show-more:hover {
        background: var(--bg-light);
        color: var(--text-dark);
    }

    .pg-nearby-section {
        padding: 30px 0;
    }

    .pg-nearby-section .container {
        padding: 0;
    }

    .pg-nearby-section .d-flex {
        padding: 0 15px;
    }

    .about-section {
        padding: 30px 0;
        background: var(--white);
    }

    .about-section .container {
        padding: 0;
    }

    .brokers-section {
        padding: 30px 0;
        background: var(--white);
    }

    .brokers-section .container {
        padding: 0;
    }

    .promotional-banner-mobile {
        margin: 0;
    }

    .faq-section {
        padding: 30px 0;
        background: var(--white);
    }

    .faq-section .container {
        padding: 0;
    }

    .footer-section {
        padding: 40px 0 20px;
        background: var(--white);
    }

    .footer-section .container {
        padding: 0 15px;
    }
}

/* Mobile Footer Styles */
.mobile-footer-section {
    display: none !important;
    background: var(--white);
    padding: 24px 0 0;
}

.mobile-footer-section-details {
    display: none !important;
    background: var(--white);
    padding: 0px 0 0;
}

@media only screen and (max-width: 767.98px) {
    .mobile-footer-section {
        display: block !important;
    }
}

@media (min-width: 768px) {
    .mobile-footer-section {
        display: none !important;
    }
}

@media only screen and (max-width: 767.98px) {
    .mobile-footer-section-details {
        display: block !important;
    }
}

@media (min-width: 768px) {
    .mobile-footer-section-details {
        display: none !important;
    }
}

.mobile-footer-content {
    padding: 0 6px 0;
}

.mobile-footer-content-details {
    position: relative;
    margin-bottom: 95px;
    padding: 0 16px 0;
}

.mobile-footer-brand {
    margin-bottom: 16px;
}

.mobile-footer-logo-img {
    height: 40px;
    width: auto;
    object-fit: contain;
}

.mobile-footer-main-tagline {
    font-size: 12px;
    color: var(--text-dark);
    margin-bottom: 20px;
    line-height: 1.5;
}

.mobile-footer-section-group {
    margin-bottom: 20px;
}

.mobile-footer-heading {
    font-size: 0.9375rem;
    font-weight: bold;
    color: var(--text-dark);
    margin-bottom: 10px;
}

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

.mobile-footer-link {
    font-size: 10px;
    color: var(--text-dark);
    text-decoration: none;
    transition: color 0.3s;
}

.mobile-footer-link:hover {
    color: var(--primary-orange);
}

.mobile-footer-separator {
    font-size: 0.8125rem;
    color: var(--text-light);
    margin: 0 4px;
}

.mobile-footer-social-icons {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
    padding-top: 8px;
}

.mobile-social-icon {
    color: var(--text-dark);
    font-size: 1.25rem;
    text-decoration: none;
    transition: color 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mobile-social-icon:hover {
    color: var(--primary-orange);
}

.mobile-footer-copyright {
    background: #FFF5F0;
    padding: 16px;
    margin: 0 -45px 0;
    text-align: center;
}

.mobile-footer-copyright-renting {
    background: #FFF5F0;
    padding: 16px;
    margin: 0 -45px 55px;
    text-align: center;
}

.mobile-footer-copyright-renting p {
    font-size: 0.75rem;
    color: var(--text-dark);
    margin: 0;
}

.mobile-footer-copyright-plan {
    background: #FFF5F0;
    padding: 16px;
    margin: 0 -45px 75px;
    text-align: center;
}

.mobile-footer-copyright-plan p {
    font-size: 0.75rem;
    color: var(--text-dark);
    margin: 0;
}

.mobile-footer-copyright p {
    font-size: 0.75rem;
    color: var(--text-dark);
    margin: 0;
}

/* Navbar Styles */
.navbar-custom {
    background: var(--light-gray);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border-bottom: none;
}

.navbar-custom .navbar-brand {
    color: var(--text-dark);
    text-decoration: none;
}

.navbar-logo {
    width: 158px;
    height: 46px;
    object-fit: contain;
}

.brand-text {
    font-size: 1.25rem;
    font-weight: bold;
    color: var(--text-dark);
    display: block;
}

.brand-subtext {
    font-size: 0.75rem;
    color: var(--primary-orange);
    display: block;
    font-weight: 500;
}

.btn-navbar-dark {
    background: var(--dark-bg);
    color: white;
    border: none;
    border-radius: 25px;
    padding: 8px 20px;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.btn-navbar-dark:hover {
    background: #1a1a1a;
    color: white;
}

.pay-via-text {
    color: white;
}

.credit-card-text {
    color: var(--primary-orange);
}

.btn-profile {
    background: var(--dark-bg);
    border: none;
    width: 40px;
    height: 40px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-profile:hover {
    background: #1a1a1a;
}

/* Hero Section */
.hero-section {
    background: linear-gradient(180deg, rgba(51, 51, 51, 1) 0%, rgba(0, 0, 0, 1) 100%);
    position: relative;
    overflow: hidden;
    padding: 60px 0 80px;
    height: 350px;
}

.hero-section::before {
    content: '';
    position: absolute;
    width: 379px;
    height: 1920px;
    top: 268px;
    left: 0;
    background-image: url('../images/payment-images/bg-hero.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transform: rotate(-90deg);
    transform-origin: 0 0;
    opacity: 0.4;
    mix-blend-mode: multiply;
    z-index: 0;
    pointer-events: none;
}

.hero-title {
    font-size: 34.87px;
    font-weight: 600;
    color: white;
    position: relative;
    z-index: 1;
    line-height: 1.2;
}

.hero-title strong {
    font-weight: 600;
    background: linear-gradient(90deg, #FEC862 -7.33%, #CE7703 100.43%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    display: inline-block;
    position: relative;
}

.hero-title strong::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 195px;
    height: 12px;
    background: url("payment-images/image-line.png") no-repeat center;
    background-size: contain;
    pointer-events: none;
}

.hero-subtitle {
    font-size: 1.1rem;
    color: white;
    position: relative;
    z-index: 1;
    opacity: 0.9;
}

/* ============================================
   RECOMMENDED BROKER CARD STYLES (Listing Pages)
   ============================================ */
.recommended-broker-card {
    background: #FFFFFF;
    border: none;
    border-radius: 10px;
    padding: 0;
    text-align: center;
    transition: transform 0.3s, box-shadow 0.3s;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.recommended-broker-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.recommended-broker-avatar {
    width: 100px;
    height: 100px;
    margin: 20px auto 15px;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid #E0E0E0;
    background: #F5F5F5;
    flex-shrink: 0;
}

.recommended-broker-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.recommended-broker-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    padding: 0 20px;
    margin: 0;
    min-height: 0;
}

.recommended-broker-company {
    font-size: 0.85rem;
    color: #666666;
    font-weight: 400;
    margin-bottom: 8px;
}

.recommended-broker-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: #333333;
    margin-bottom: 8px;
}

.recommended-broker-member {
    font-size: 0.8rem;
    color: #666666;
    font-weight: 400;
    margin-bottom: 12px;
}

.recommended-broker-tag {
    display: inline-block;
    background: #FFE5D9;
    color: #333333;
    padding: 6px 16px;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 500;
    margin-bottom: 15px;
}

.recommended-broker-btn {
    background: #FFE5D9;
    color: #333333;
    border: none;
    padding: 12px 20px;
    border-radius: 0 0 10px 10px;
    font-size: 0.9rem;
    width: 100%;
    margin: 0;
    margin-top: auto;
    font-weight: 500;
    transition: all 0.3s;
    cursor: pointer;
    display: block;
    box-sizing: border-box;
    flex-shrink: 0;
    align-self: stretch;
}

.recommended-broker-btn:hover {
    background: #FFD4C4;
    color: #333333;
}

/* Payment Cards */
.payment-options {
    background: transparent;
    margin-top: -120px;
    position: relative;
    z-index: 2;
    padding: 40px 0 80px;
}

.payment-options::after {
    content: '';
    position: absolute;
    top: 120px;
    left: 0;
    right: 0;
    bottom: 0;
    background: #F8F8F8;
    z-index: -1;
}

.payment-card {
    background: white;
    border-radius: 20px;
    padding: 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    cursor: pointer;
    border: 1px solid #FF5403;
    height: 140px;
    width: 313px;
}

.payment-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.payment-card .icon-box {
    background: #FF5403;
    width: 70px;
    height: 80px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.payment-icon-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 8px;
}

.payment-card .card-content {
    display: flex;
    align-items: center;
    flex: 1;
}

.payment-card h5 {
    margin: 0;
    font-size: 20px;
    font-weight: 500;
    color: var(--text-dark);
    text-align: left;
    line-height: 1.3;
}

/* Benefits Section */
.benefits-section {
    background: #F8F8F8;
    padding: 80px 0;
}


.benefits-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 40px;
    padding: 0 40px;
    overflow-x: visible;
    margin-right: calc(44% - 49vw);
    overflow-y: hidden;
}

.benefits-title-container {
    flex-shrink: 0;
    width: 337px;
    padding-top: 20px;
}

.benefits-title {
    font-size: 1.8rem;
    font-weight: 600;
    line-height: 1.4;
    color: #666666;
}

.benefits-title .text-warning {
    color: #F8A201 !important;
}

.benefits-cards-container {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 20px;
    padding-right: 0;
    flex: 1;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    cursor: grab;
    min-width: 0;
    width: 100%;
}

.benefits-cards-container:active {
    cursor: grabbing;
}

.benefits-cards-container::-webkit-scrollbar {
    display: none;
}

.benefits-cards-container {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.benefits-cards-container .benefit-item {
    padding: 25px 20px;
    background: white;
    border-radius: 12px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    align-items: center;
    gap: 15px;
    flex-shrink: 0;
    width: 319px;
    min-width: 319px;
    max-width: 319px;
}

.benefit-icon-box {
    background: #F5E6D3;
    width: 50px;
    height: 50px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-bottom: 15px;
}

.benefit-icon {
    font-size: 1.5rem;
    color: #333333;
}

.benefit-content {
    flex: 1;
}

.benefit-item h5 {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 8px 0;
    color: var(--text-dark);
    line-height: 1.3;
}

.benefit-item p {
    font-size: 14px;
    line-height: 1.5;
    margin: 0;
    color: #666666;
}

/* How To Use Section */
.how-to-use {
    padding: 80px 0;
    background: #F8F8F8;
}

.how-to-use h2 {
    font-size: 2.2rem;
    font-weight: 700;
    color: #333333;
    margin-bottom: 50px;
}

.step-card {
    background: white;
    padding: 50px 30px 30px;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    height: 100%;
    position: relative;
}

.step-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.step-number {
    position: absolute;
    top: -35px;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 70px;
    background: #FFF5F0;
    color: #333333;
    font-size: 2rem;
    font-weight: bold;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.step-card h5 {
    font-size: 1.2rem;
    font-weight: 600;
    color: #333333;
    margin-top: 10px;
    margin-bottom: 10px;
}

.step-card p {
    font-size: 0.95rem;
    margin-top: 10px;
    color: #666666;
}

/* FAQ Section */
.faq-section {
    background: white;
    padding: 80px 0;
}

.faq-title {
    font-size: 1.8rem;
    color: var(--text-dark);
    line-height: 1.4;
    font-weight: 600;
}

.faq-title .fw-bold {
    font-weight: 700;
    display: block;
    margin-top: 5px;
}

.accordion-item {
    border: none;
    background: white;
    border-radius: 12px !important;
    overflow: hidden;
    box-shadow: none;
    border: 1px solid #D9D9D9 !important;
    margin-bottom: 15px !important;
}

.accordion-item:first-child {
    border-top: 1px solid #e9ecef !important;
}

.accordion-button {
    background: white;
    color: var(--text-dark);
    font-weight: 500;
    padding: 20px 25px;
    border: none;
    box-shadow: none;
    font-size: 1rem;
    border-radius: 12px;
}

.accordion-button:not(.collapsed) {
    background: white;
    color: var(--text-dark);
    box-shadow: none;
}

.accordion-button:focus {
    box-shadow: none;
    border-color: transparent;
}

.accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23333'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    width: 1.25rem;
    height: 1.25rem;
}

.accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23333'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    transform: rotate(180deg);
}

.accordion-body {
    padding: 0 25px 20px 25px;
    color: rgba(103, 103, 103, 1);
    font-size: 0.95rem;
    line-height: 1.6;
}


.accordion-button-credit {
    background: white;
    color: var(--text-dark);
    font-weight: 500;
    padding: 20px 25px;
    border: none;
    box-shadow: none;
    font-size: 1rem;
    border-radius: 12px;
}

.accordion-button-credit:not(.collapsed) {
    background: white;
    color: var(--text-dark);
    box-shadow: none;
}

.accordion-button-credit:focus {
    box-shadow: none;
    border-color: transparent;
}

.accordion-button-credit::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23333'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    width: 1.25rem;
    height: 1.25rem;
}

.accordion-button-credit:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23333'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    transform: rotate(180deg);
}

.accordion-body-credit {
    padding: 0 25px 20px 25px;
    color: rgba(103, 103, 103, 1);
    font-size: 0.95rem;
    line-height: 1.6;
}


/* Download Section */
.badge-pill {
    position: relative;
    display: inline-block;
    background-color: #F06A37;
    color: #ffffff;
    padding: 8px 20px;
    border-radius: 50px;
    font-size: 16px;
    top: -10px;
    font-family: Konnect;
    font-style: regular;
    font-weight: 400;
    font-size: 16px;
    line-height: 120%;
    letter-spacing: 0%;
}

.download-section {
    position: relative;
    color: #333333;
    font-weight: 400;
    font-size: 18px;
    line-height: 160%;
    font-style: regular;
    font-family: Konnect;
    font: bold;
}

/* wave layer */
.download-section::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 10px;
    transform: translateX(-50%);

    width: 120%;
    /* 🔑 makes it cover desktop */
    height: 540px;
    /* control wave height */

    background-image: url("../images/images/wave-pattern.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    /* stretch safely */
    background-position: center bottom;

    pointer-events: none;
    z-index: 0;
}


.section-title {
    margin-bottom: 65px;
    font-family: Konnect;
    font-weight: 700;
    font-style: bold;
    font-size: 30px;
    line-height: 120%;
    letter-spacing: 0%;
    position: relative;
}

.section-title-pid {
    margin-bottom: -12px;
    font-family: Konnect;
    color: #333333;
    font-weight: 700;
    font-style: bold;
    font-size: 30px;
    line-height: 120%;
    letter-spacing: 0%;
    position: relative;
}

.section-title-pid-m {
    margin-left: 5px;
    margin-bottom: 0px;
    font-family: Konnect;
    font-weight: 600;
    font-style: bold;
    font-size: 18px;
    line-height: 120%;
    letter-spacing: 0%;
    position: relative;
}

.d-section-content {
    z-index: 1;
    max-width: 600px;
    /* Adjust this value to fit the pink background */
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box;
}

.phone-mockup {
    z-index: 1;
    text-align: center;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: -10px;
}

.phone-mockup::after {
    position: absolute;

    right: 50px;
    font-size: 2rem;
    z-index: 0;
}

.phone-mockup .phone-1 {
    width: 500px;
    height: 460px;
    transform: rotate(-1deg);
    z-index: 0;
    position: relative;
    top: -40px;
}


.download-description {
    margin-top: -7px;
    margin-bottom: -7px;
    position: relative;
    color: var(--text-light);
    font-size: 0.85rem;
    line-height: 1.8;
}

.app-badges {
    position: relative;
    display: flex;
    flex-wrap: wrap;
}

.app-badge img {
    position: relative;
    height: 50px;
    width: auto;
}

/* Buttons */
.btn-dark {
    background: var(--dark-bg);
    color: white;
    border: none;
    transition: all 0.3s ease;
    border-radius: 8px;
    padding: 12px 24px;
    font-weight: 500;
}

.btn-dark:hover {
    background: #1a1a1a;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

/* Responsive Styles */
@media (max-width: 992px) {
    .hero-title {
        font-size: 2.2rem;
    }

    .benefits-title {
        font-size: 1.5rem;
        margin-bottom: 30px;
    }

    .phone-1 {
        left: 5%;
    }

    .phone-2 {
        right: 5%;
    }
}

@media (max-width: 768px) {
    .hero-title {
        font-size: 1.8rem;
    }

    .payment-card {
        padding: 25px 15px;
        margin-bottom: 20px;
    }

    .benefits-title {
        font-size: 1.3rem;
        margin-bottom: 30px;
    }

    .step-card {
        padding: 30px 20px;
        margin-bottom: 20px;
    }

    .phone-mockups {
        height: 400px;
    }

    .phone-img {
        width: 180px;
    }

    .download-content h2 {
        font-size: 1.8rem;
    }

    .d-flex.gap-3 {
        flex-direction: column;
    }

    .phone-1,
    .phone-2 {
        position: relative;
        transform: none;
        left: auto;
        right: auto;
        margin: 10px auto;
    }
}

@media (max-width: 576px) {
    .hero-title {
        font-size: 1.5rem;
    }

    .hero-subtitle {
        font-size: 1rem;
    }

    .payment-card {
        padding: 25px 15px;
    }

    .step-number {
        width: 60px;
        height: 60px;
        font-size: 1.8rem;
    }

    .benefit-icon {
        font-size: 1.3rem;
    }

    .download-content h2 {
        font-size: 1.5rem;
    }

    .faq-title {
        font-size: 1.5rem;
        margin-bottom: 30px;
    }
}

/* Smooth Scrolling */
html {
    scroll-behavior: smooth;
}

/* Text Selection */
::selection {
    background: var(--primary-orange);
    color: white;
}

::-moz-selection {
    background: var(--primary-orange);
    color: white;
}

/* Navbar Styles */
.navbar-custom {
    background: #F5F5F5;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border-bottom: none;
}

.navbar-custom .navbar-brand {
    color: var(--text-dark);
    text-decoration: none;
}

.navbar-logo {
    width: 158px;
    height: 46px;
    object-fit: contain;
}

.brand-text {
    font-size: 1.25rem;
    font-weight: bold;
    color: var(--text-dark);
    display: block;
}

.brand-subtext {
    font-size: 0.75rem;
    color: var(--primary-orange);
    display: block;
    font-weight: 500;
}

.btn-navbar-dark {
    background: var(--dark-bg);
    color: white;
    border: none;
    border-radius: 25px;
    padding: 8px 20px;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.btn-navbar-dark:hover {
    background: #1a1a1a;
    color: white;
}

.pay-via-text {
    color: white;
}

.credit-card-text {
    color: var(--primary-orange);
}

.btn-profile {
    background: var(--dark-bg);
    border: none;
    width: 40px;
    height: 40px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-profile:hover {
    background: #1a1a1a;
}

/* Hero Section */
.hero-section {
    background: linear-gradient(180deg, rgba(51, 51, 51, 1) 0%, rgba(0, 0, 0, 1) 100%);
    position: relative;
    overflow: hidden;
    padding: 60px 0 80px;
    height: 350px;
}

.hero-section::before {
    content: '';
    position: absolute;
    width: 379px;
    height: 1920px;
    top: 268px;
    left: 0;
    background-image: url('../images/payment-images/bg-hero.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transform: rotate(-90deg);
    transform-origin: 0 0;
    opacity: 0.4;
    mix-blend-mode: multiply;
    z-index: 0;
    pointer-events: none;
}

.hero-section-empty {
    background: linear-gradient(180deg, rgba(51, 51, 51, 1) 0%, rgba(0, 0, 0, 1) 100%);
    position: relative;
    overflow: hidden;
    padding: 60px 0 80px;
    height: 315px;
}

.hero-section-empty::before {
    content: '';
    position: absolute;
    width: 379px;
    height: 1920px;
    top: 268px;
    left: 0;
    background-image: url('../images/payment-images/bg-hero.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transform: rotate(-90deg);
    transform-origin: 0 0;
    opacity: 0.4;
    mix-blend-mode: multiply;
    z-index: 0;
    pointer-events: none;
}


.hero-title {
    font-size: 34.87px;
    font-weight: 600;
    color: white;
    position: relative;
    z-index: 1;
    line-height: 1.2;
}

.hero-title strong {
    font-weight: 600;
    background: linear-gradient(90deg, #FEC862 -7.33%, #CE7703 100.43%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    display: inline-block;
    position: relative;
}

.hero-title strong::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 195px;
    height: 12px;
    background: url("../images/payment-images/image-line.png") no-repeat center;
    background-size: contain;
    pointer-events: none;
}

.hero-title-e {
    font-size: 54.87px;
    font-weight: 600;
    color: white;
    position: relative;
    z-index: 1;
    line-height: 1.2;
}

.hero-title-e strong {
    font-weight: 600;
    background: linear-gradient(90deg, #FEC862 -7.33%, #CE7703 100.43%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    display: inline-block;
    position: relative;
}

.hero-title-e strong::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 195px;
    height: 12px;
    background: url("../images/payment-images/image-line.png") no-repeat center;
    background-size: contain;
    pointer-events: none;
}


.hero-subtitle {
    font-size: 1.1rem;
    color: white;
    position: relative;
    z-index: 1;
    opacity: 0.9;
}

.hero-subtitle-e {
    font-size: 27.4px;
    color: white;
    position: relative;
    z-index: 1;
    opacity: 0.9;
}

/* ============================================
   RECOMMENDED BROKER CARD STYLES (Listing Pages)
   ============================================ */
.recommended-broker-card {
    background: #FFFFFF;
    border: none;
    border-radius: 10px;
    padding: 0;
    text-align: center;
    transition: transform 0.3s, box-shadow 0.3s;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.recommended-broker-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.recommended-broker-avatar {
    width: 100px;
    height: 100px;
    margin: 20px auto 15px;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid #E0E0E0;
    background: #F5F5F5;
    flex-shrink: 0;
}

.recommended-broker-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.recommended-broker-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    padding: 0 20px;
    margin: 0;
    min-height: 0;
}

.recommended-broker-company {
    font-size: 0.85rem;
    color: #666666;
    font-weight: 400;
    margin-bottom: 8px;
}

.recommended-broker-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: #333333;
    margin-bottom: 8px;
}

.recommended-broker-member {
    font-size: 0.8rem;
    color: #666666;
    font-weight: 400;
    margin-bottom: 12px;
}

.recommended-broker-tag {
    display: inline-block;
    background: #FFE5D9;
    color: #333333;
    padding: 6px 16px;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 500;
    margin-bottom: 15px;
}

.recommended-broker-btn {
    background: #FFE5D9;
    color: #333333;
    border: none;
    padding: 12px 20px;
    border-radius: 0 0 10px 10px;
    font-size: 0.9rem;
    width: 100%;
    margin: 0;
    margin-top: auto;
    font-weight: 500;
    transition: all 0.3s;
    cursor: pointer;
    display: block;
    box-sizing: border-box;
    flex-shrink: 0;
    align-self: stretch;
}

.recommended-broker-btn:hover {
    background: #FFD4C4;
    color: #333333;
}

@media (max-width:768) {
    .py-5 {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }

}

.phone-mockup-svg {
    position: absolute;
    top: 0;
    left: 0;

    transform: scale(0.55) translate(-42%, 30%);
    /* push it outside container */

    z-index: 0;
    pointer-events: none;
    /* optional */
}

/* Normal desktop (≥ 1200px) */
@media (min-width: 1200px) {
    .phone-mockup-svg {
        transform: scale(0.6) translate(-38%, 28%);
    }
}

/* Large desktop / Full HD (1920px) */
@media (min-width: 1900px) {
    .phone-mockup-svg {
        transform: scale(0.7) translate(-32%, 25%);
    }
}

.like {
    position: absolute;
    width: 80px;
    height: 80px;
    top: 20px;
    left: 882px;
    opacity: 1;
    filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.like img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

@media (min-width: 1900px) {
    .like {
        left: 1300px;
        /* adjusted for 1920px */
    }
}

/* Login Modal Styles */
.user-icon-wrapper {
    position: relative;
    display: inline-block;
    z-index: 10006;
}

.header-actions-wrapper {
    position: relative;
    z-index: 10001;
}

.navbar-collapse {
    overflow: visible !important;
}

.container-fluid {
    overflow: visible !important;
}

.navbar .container-fluid {
    overflow: visible !important;
}

.navbar {
    position: relative;
    z-index: 10005;
}

.header-default-actions,
.header-rent-actions {
    position: relative;
}

/* Override Bootstrap d-none - force show when d-none is removed */
.header-actions-wrapper .header-rent-actions.d-flex:not(.d-none),
.header-actions-wrapper .header-rent-actions:not(.d-none) {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.header-actions-wrapper .header-default-actions.d-flex:not(.d-none),
.header-actions-wrapper .header-default-actions:not(.d-none) {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.login-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 10010;
    pointer-events: auto;
}

/* Create a mask to exclude header from overlay */
.login-modal-overlay.show {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Hide navbar when login modal overlay is showing */
body.login-modal-active .header-section-m {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

body.login-modal-active .navbar {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

/* Login/Register Modal Popup (Centered) */
.login-register-modal {
    background: var(--white);
    border-radius: 16px;
    width: 90%;
    max-width: 951px;
    max-height: 474px;
    overflow: hidden;
    display: flex;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    position: relative;
    z-index: 10001;
    animation: modalFadeIn 0.3s ease;
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

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

.login-modal-close {
    position: absolute;
    top: -16px;
    right: 16px;
    background: var(--white);
    border: 1px solid rgba(0, 0, 0, 0.1);
    font-size: 1.5rem;
    color: var(--text-dark);
    cursor: pointer;
    z-index: 10003;
    width: 32px;
    height: 32px;
    display: none;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.2s ease, border-color 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.login-modal-close:hover {
    background: var(--white);
    border-color: rgba(0, 0, 0, 0.2);
}

.login-modal-close svg {
    width: 16px;
    height: 16px;
}

.login-modal-content-wrapper {
    display: flex;
    width: 100%;
    min-height: 500px;
}

.login-modal-image-section {
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 25px 4px 50px 21px;
}

.login-modal-carousel-container {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    border-radius: 15px;
}

.login-modal-carousel-slides {
    display: flex;
    width: 500%;
    height: 100%;
    transition: transform 0.5s ease-in-out;
    transform: translateX(-40%);
    /* Start at middle slide (index 2: -2 * 20% = -40%) */
}

.login-modal-carousel-slides .login-modal-image {
    width: 20%;
    height: 100%;
    object-fit: cover;
    display: block;
    flex-shrink: 0;
    border-radius: 0;
}

.login-modal-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 15px;
}

.login-modal-carousel-dots {
    display: flex;
    gap: 5px;
    margin-top: 20px;
    position: absolute;
    bottom: 60px;
    z-index: 10;
}

.carousel-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all 0.3s ease;
}

.carousel-dot-1 {
    margin-top: 2px;
    width: 4.8px;
    height: 4.8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all 0.3s ease;
}

.carousel-dot-2 {
    margin-top: 1px;
    width: 6.4px;
    height: 6.4px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all 0.3s ease;
}

.carousel-dot.active,
.carousel-dot-1.active,
.carousel-dot-2.active {
    background: var(--white);
    width: 8px;
    border-radius: 4px;
    height: 8px;
    margin-top: 0;
}

.login-modal-form-section {
    flex: 1;
    padding: 60px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.login-modal-title {
    font-size: 24px;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 10px;
}

.login-modal-title-a {
    font-size: 24px;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: -15px;
}

.login-modal-title-otp {
    font-size: 18px;
    font-weight: 500;
    color: rgba(102, 102, 102, 1);
    margin-bottom: 0px;
}

.login-modal-subtitle {
    font-size: 1rem;
    font-weight: 400;
    color: rgba(102, 102, 102, 1);
    margin-bottom: 10px;
    transition: opacity 0.3s ease, visibility 0.3s ease, height 0.3s ease, margin 0.3s ease;
}

.login-modal-subtitle.hidden {
    opacity: 0;
    visibility: hidden;
    height: 0;
    margin-bottom: 0;
    overflow: hidden;
}

/* User Dropdown Menu Styles */
.user-dropdown-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 10008;
    pointer-events: auto;
}

.user-dropdown-overlay.show {
    display: block;
}

.user-dropdown-menu {
    display: none;
    position: fixed;
    top: 78px;
    right: 20px;
    width: 320px;
    background: transparent;
    z-index: 10009;
    max-height: calc(100vh - 100px);
    overflow: visible;
}

.user-dropdown-menu.show {
    display: block;
}

/* Triangle arrow pointing up from dropdown to navbar */
.user-dropdown-triangle {
    position: absolute;
    top: -10px;
    right: 140px;
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 20px solid rgba(254, 239, 233, 1);
    z-index: 10011;
    pointer-events: none;
}

.user-dropdown-content {
    background: var(--white);
    border-radius: 12px;
    margin-top: 10px;
    overflow: hidden;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
}

.user-dropdown-items {
    overflow: hidden;
    border-radius: 0 0 12px 12px;
}

.user-dropdown-membership {
    background: rgba(254, 239, 233, 1);
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.membership-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.membership-icon svg {
    width: 100%;
    height: 100%;
}

.membership-content {
    flex: 1;
}

.membership-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 4px;
}

.membership-subtitle {
    font-size: 0.8125rem;
    color: var(--text-light);
    line-height: 1.4;
}

.user-dropdown-items {
    background: var(--white);
    overflow-y: auto;
    border-radius: 0 0 12px 12px;
    max-height: calc(100vh - 250px);
}

.user-dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(254, 239, 233, 1);
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.user-dropdown-item:last-child {
    border-bottom: none;
}

.user-dropdown-item:hover {
    background-color: #F5F5F5;
}

.dropdown-item-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--text-dark);
    font-size: 1.25rem;
}

.dropdown-item-content {
    flex: 1;
}

.dropdown-item-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 3px;
    line-height: 1.3;
}

.dropdown-item-subtitle {
    font-size: 0.8125rem;
    color: var(--text-light);
    line-height: 1.4;
}

.login-space {
    margin-bottom: 82px;
}

.login-space-a {
    margin-bottom: 20px;
}

.login-space-otp {
    margin-bottom: -15px;
}

.login-modal-form {
    display: flex;
    flex-direction: column;
    gap: 0px;
}

.login-modal-form-ot {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.login-modal-form-otp {
    display: flex;
    flex-direction: column;
    gap: 0px;
}


.login-phone-input-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    margin-top: 30px;
}

.login-phone-label {
    display: none;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: -11px;
    left: 29%;
    transform: translateX(-50%);
    background: white;
    padding: 0 10px;
    gap: 10px;
    z-index: 2;
}

.login-phone-input-wrapper.focused .login-phone-label {
    display: flex;
}

.login-label-line {
    flex: 1;
    height: 1px;
    background-color: var(--primary-orange);
    min-width: 20px;
}

.login-label-text {
    color: var(--primary-orange);
    font-size: 1rem;
    font-family: "Konnect", sans-serif;
    font-weight: 400;
    white-space: nowrap;
}

.login-label-text-error {
    color: rgba(255, 59, 105, 1);
    font-size: 1rem;
    font-family: "Konnect", sans-serif;
    font-weight: 400;
    white-space: nowrap;
}

.login-phone-input-wrapper.error-state .login-phone-label {
    display: flex !important;
}

/* OTP Verification Modal Styles */
.otp-phone-display {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 56px;
}

.otp-phone-number {
    font-size: 24px;
    font-weight: 600;
    color: rgba(51, 51, 51, 1);
    font-family: "Konnect", sans-serif;
}

.otp-edit-icon {
    font-size: 1rem;
    color: rgba(102, 102, 102, 1);
    cursor: pointer;
}

.otp-prompt {
    font-size: 18px;
    color: rgba(102, 102, 102, 1);
    font-weight: 500;
    font-family: "Konnect", sans-serif;
    margin-bottom: -15px;
}

.otp-input-container {
    display: flex;
    gap: 12px;
    margin-bottom: -10px;
}

.otp-input {
    width: 60px;
    height: 60px;
    border: 1px solid rgba(217, 217, 217, 1);
    border-radius: 12px;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 600;
    font-family: "Konnect", sans-serif;
    color: rgba(51, 51, 51, 1);
    transition: border-color 0.3s ease;
    box-sizing: border-box;
}

.otp-input:focus {
    outline: none;
    border-color: var(--primary-orange);
}

.otp-resend {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 56px;
}

.otp-resend-text {
    font-size: 16px;
    color: rgba(102, 102, 102, 1);
    font-weight: 400;
    font-family: "Konnect", sans-serif;
}

.otp-resend-link {
    font-size: 16px;
    color: var(--primary-orange);
    text-decoration: none;
    font-family: "Konnect", sans-serif;
    font-weight: 600;
}

.otp-resend-link:hover {
    text-decoration: underline;
}

.otp-verify-btn {
    width: 100%;
    padding: 14px 20px;
    background: rgba(228, 227, 232, 1);
    color: rgba(153, 153, 153, 1);
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 500;
    font-family: "Konnect", sans-serif;
    cursor: not-allowed;
    transition: all 0.3s ease;
}

.otp-input-filled {
    border-color: var(--primary-orange);
}

.otp-verify-btn-active {
    background: rgba(255, 84, 3, 1) !important;
    color: #ffffff !important;
    cursor: pointer !important;
}


.login-phone-prefix {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(51, 51, 51, 1);
    font-weight: 400;
    font-size: 1rem;
    font-family: "Konnect", sans-serif;
    pointer-events: none;
    z-index: 1;
    display: flex;
    align-items: center;
}

.login-phone-prefix-error {
    position: absolute;
    left: 15px;
    top: 34%;
    transform: translateY(-50%);
    color: rgba(51, 51, 51, 1);
    font-weight: 400;
    font-size: 1rem;
    font-family: "Konnect", sans-serif;
    pointer-events: none;
    z-index: 1;
    display: flex;
    align-items: center;
}

.login-phone-input {
    width: 100%;
    padding: 14px 20px 14px 60px;
    border: 1px solid rgba(217, 217, 217, 1);
    border-radius: 12px;
    box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.05);
    font-size: 1rem;
    font-family: "Konnect", sans-serif;
    color: rgba(79, 79, 79, 1);
    transition: border-color 0.3s ease;
    box-sizing: border-box;
}

.login-phone-input:focus {
    outline: none;
    border-color: var(--primary-orange);
}

.login-phone-input.error-input {
    border-color: rgba(255, 59, 105, 1);
}

.login-error-message {
    z-index: -1;
    padding: 14px 6px 6px 13px;
    color: rgba(255, 59, 105, 1);
    background-color: rgba(255, 236, 238, 1);
    font-size: 0.875rem;
    font-family: "Konnect", sans-serif;
    margin-top: -11px;
    display: block;
    border-radius: 0 0 10px 10px;
}

.login-phone-input::placeholder {
    color: rgba(79, 79, 79, 1);
}

.svg-s-left {
    color: rgba(51, 51, 51, 1);
    margin-left: 11px;
}

/* Name Input Styles */
.login-name-input-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    margin-top: 30px;
}

.login-name-label {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    position: absolute;
    top: -11px;
    left: 16px;
    background: white;
    padding: 0 8px;
    z-index: 2;
}

.login-name-input-container {
    position: relative;
    display: flex;
    align-items: center;
}

.login-name-input {
    width: 100%;
    padding: 14px 45px 14px 20px;
    border: 1px solid rgba(255, 84, 3, 1);
    border-radius: 12px;
    box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.05);
    font-size: 1rem;
    font-family: "Konnect", sans-serif;
    color: rgba(79, 79, 79, 1);
    transition: border-color 0.3s ease;
    box-sizing: border-box;
}

.login-name-input:focus {
    outline: none;
    border-color: var(--primary-orange);
}

.login-name-input::placeholder {
    color: rgba(192, 192, 194, 1);
}

.login-name-clear {
    position: absolute;
    right: 12px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    width: 16px;
    height: 16px;
}

.login-name-clear:hover {
    opacity: 0.8;
}

.login-name-clear svg {
    width: 16px;
    height: 16px;
}

/* Account Type Options Styles */
.account-type-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 30px;
}

.account-type-option {
    display: flex;
    align-items: center;
    padding: 14px 20px;
    border: 1px solid rgba(217, 217, 217, 1);
    border-radius: 12px;
    background: var(--white);
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.account-type-option:hover {
    border-color: var(--primary-orange);
}

.account-type-option.selected {
    background: rgba(255, 84, 3, 1);
    border-color: rgba(255, 84, 3, 1);
}

.account-type-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.account-type-checkmark {
    width: 15px;
    height: 15px;
    border: 2px solid rgba(217, 217, 217, 1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    flex-shrink: 0;
    transition: all 0.3s ease;
    position: relative;
}

.account-type-option.selected .account-type-checkmark {
    border-color: var(--white);
}

.account-type-checkmark svg {
    width: 15px;
    height: 15px;
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.account-type-option.selected .account-type-checkmark svg {
    display: block;
}

.account-type-label {
    font-size: 1rem;
    font-family: "Konnect", sans-serif;
    font-weight: 400;
    color: rgba(51, 51, 51, 1);
    transition: color 0.3s ease;
}

.account-type-option.selected .account-type-label {
    color: var(--white);
    font-weight: 500;
}

.account-type-info {
    font-size: 0.875rem;
    color: rgba(102, 102, 102, 1);
    font-family: "Konnect", sans-serif;
    margin-top: 12px;
    display: none;
}

.account-type-info.mobile-only {
    display: none;
}

/* Location Modal Styles */
.location-modal-description {
    font-size: 0.875rem;
    color: rgba(102, 102, 102, 1);
    font-family: "Konnect", sans-serif;
    line-height: 1.5;
    margin-top: 12px;
    margin-bottom: 24px;
}

.location-search-wrapper {
    position: relative;
    width: 100%;
    margin-bottom: 16px;
}

.location-search-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 1;
}

.location-search-input {
    width: 100%;
    padding: 14px 16px 14px 48px;
    border: 1px solid rgba(217, 217, 217, 1);
    border-radius: 12px;
    font-size: 1rem;
    font-family: "Konnect", sans-serif;
    color: rgba(51, 51, 51, 1);
    background: var(--white);
    transition: all 0.3s ease;
}

.location-search-input::placeholder {
    color: rgba(153, 153, 153, 1);
}

.location-search-input:focus {
    outline: none;
    border-color: rgba(255, 84, 3, 1);
    box-shadow: 0 0 0 3px rgba(255, 84, 3, 0.1);
}

.current-location-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 12px;
}

.current-location-option:hover {
    background: rgba(255, 84, 3, 0.05);
}

.current-location-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.current-location-text {
    font-size: 1rem;
    font-family: "Konnect", sans-serif;
    font-weight: 500;
    color: rgba(255, 84, 3, 1);
}

.login-continue-btn {
    width: 100%;
    padding: 14px 20px;
    background: rgba(228, 227, 232, 1);
    color: #999;
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 500;
    font-family: "Konnect", sans-serif;
    cursor: not-allowed;
    transition: all 0.3s ease;
}

.login-continue-btn-a {
    width: 100%;
    padding: 14px 20px;
    background: #FF5403;
    color: #FFFFFF;
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 500;
    font-family: "Konnect", sans-serif;
    cursor: pointer;
    transition: all 0.3s ease;
}

.login-continue-btn-error {
    width: 100%;
    padding: 14px 20px;
    background: rgba(255, 84, 3, 1);
    color: rgba(255, 255, 255, 1);
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 500;
    font-family: "Konnect", sans-serif;
    cursor: not-allowed;
    transition: all 0.3s ease;
}


.login-continue-btn:enabled,
.login-continue-btn:not(:disabled) {
    color: #ffffff;
    cursor: pointer;
}

.login-continue-btn-a:enabled,
.login-continue-btn-a:not(:disabled) {
    color: #ffffff;
    cursor: pointer;
}



.login-modal-terms {
    font-size: 0.85rem;
    color: var(--text-light);
    text-align: center;
    margin-top: 10px;
    line-height: 1.5;
    margin-left: -40px;
}

.login-modal-terms-a {
    font-size: 0.85rem;
    color: var(--text-light);
    text-align: center;
    margin-top: 10px;
    line-height: 1.5;
    margin-left: -18px;
}

.login-modal-link {
    color: rgba(102, 102, 102, 1);
    font-weight: 700;
    text-decoration: none;
}

.login-modal-link:hover {
    text-decoration: underline;
}

@media (max-width: 768px) {
    .login-modal-overlay.show {
        align-items: flex-end;
        justify-content: center;
        padding: 0;
        overflow: visible;
    }

    .login-modal-content-wrapper {
        flex-direction: column;
        min-height: auto;
        height: 100%;
        overflow: hidden;
        display: flex;
    }

    .login-modal-image-section {
        display: none !important;
    }

    .login-modal-form-section {
        padding: 24px 20px 20px 20px;
        width: 100%;
        display: flex;
        flex-direction: column;
        height: 100%;
        overflow-y: auto;
        box-sizing: border-box;
    }

    .login-modal-title.desktop-title {
        display: none;
    }

    .login-modal-title.mobile-title {
        display: block;
        font-size: 1.125rem;
        font-weight: 700;
        color: rgba(51, 51, 51, 1);
        margin-bottom: 20px;
        margin-top: 10px;
    }

    .login-register-modal {
        width: 100%;
        max-width: 100vw;
        height: 471px;
        max-height: 471px;
        border-radius: 16px 16px 0 0;
        margin: 0;
        margin-top: 16px;
        position: relative;
        bottom: 0;
        overflow: visible;
        box-sizing: border-box;
    }

    .login-modal-close {
        display: flex;
        top: -40px;
        right: 16px;
        width: 32px;
        height: 32px;
        z-index: 10004;
        background: var(--white);
        border: 1px solid rgba(0, 0, 0, 0.1);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .login-modal-overlay.show {
        overflow-y: auto;
        overflow-x: hidden;
    }

    .login-space {
        margin-bottom: 20px;
        flex-shrink: 0;
    }

    .login-modal-subtitle {
        font-size: 0.875rem;
        margin-bottom: -3px;
    }

    .login-phone-input-wrapper {
        margin-top: 20px;
    }

    .login-modal-form {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        gap: 10px;
    }

    .login-continue-btn {
        width: 100%;
        padding: 14px;
        margin: 0;
    }

    .login-modal-terms {
        margin-left: 0;
        margin-top: 8px;
        font-size: 0.75rem;
        line-height: 1.4;
        flex-shrink: 0;
    }
}

@media (min-width: 769px) {
    .login-modal-title.mobile-title {
        display: none;
    }

    .login-modal-title.desktop-title {
        display: block;
    }

    .login-modal-title-a.desktop-title {
        display: block;
    }

    /* Name Modal Desktop - Hide mobile title, show desktop title */
    #nameModalOverlay .login-modal-title.mobile-title {
        display: none;
    }

    #nameModalOverlay .login-modal-title.desktop-title {
        display: block;
    }

    /* Account Type Modal Desktop - Hide mobile title, show desktop title */
    #accountTypeModalOverlay .login-modal-title.mobile-title {
        display: none;
    }

    #accountTypeModalOverlay .login-modal-title-a.desktop-title {
        display: block;
    }

    #accountTypeModalOverlay .account-type-info.mobile-only {
        display: none;
    }
}

/* PID Type Selection Modal Styles */
.pid-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 10010;
    pointer-events: auto;
}

.pid-modal-overlay.show {
    display: flex;
    justify-content: center;
    align-items: center;
}

.pid-modal-content {
    background: var(--white);
    border-radius: 16px;
    height: 330px;
    width: 64%;
    max-width: 708px;
    padding: 40px 30px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    position: relative;
    z-index: 10011;
    animation: modalFadeIn 0.3s ease;
}

.pid-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 10012;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: opacity 0.2s ease;
}

.pid-modal-close:hover {
    opacity: 0.7;
}

.pid-modal-close svg {
    width: 16px;
    height: 16px;
}

.pid-modal-title {
    font-size: 24px;
    font-weight: 600;
    color: rgba(51, 51, 51, 1);
    margin-bottom: 8px;
    text-align: center;
    font-family: "Konnect", sans-serif;
}

.pid-modal-subtitle {
    font-size: 16px;
    font-weight: 400;
    color: rgba(102, 102, 102, 1);
    margin-bottom: 32px;
    text-align: center;
    font-family: "Konnect", sans-serif;
}

.pid-options-grid {
    display: flex;
    gap: 32px;
    margin-top: 20px;
    margin-left: 26px;
}

.pid-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-decoration: none;
    padding: 24px 20px;
    border: 1px solid rgba(253, 241, 237, 1);
    border-radius: 12px;
    background: var(--white);
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 120px;
    width: 125px;
    box-shadow: 2px 2px 12px 0px rgba(0, 0, 0, 0.05);
}
.pid-option:hover {
    border-color: rgba(255, 84, 3, 1);
    background: rgba(255, 84, 3, 0.05);
}

.pid-option.active {
    border-color: rgba(255, 84, 3, 1);
    background: rgba(255, 84, 3, 0.1);
}

.pid-option-icon {
    background-color: rgba(254, 248, 246, 1);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    border-radius: 6px;
}

.pid-option-icon svg {
    display: block;
    width: 29px;
    height: 29px;
}

.pid-option-label {
    font-size: 16px;
    font-weight: 500;
    color: rgba(102, 102, 102, 1);
    font-family: "Konnect", sans-serif;
}

/* Make sure overlay doesn't cover header - use JavaScript to calculate header height */
.header-section-m {
    background: #F5F5F5;
    position: relative;
    z-index: 10005;
    isolation: isolate;
}

.navbar {
    position: relative;
    z-index: 10005;
    isolation: isolate;
}

.login-modal-dropdown {
    display: none !important;
    position: absolute;
    top: calc(100% + 22px);
    right: -50px;
    z-index: 10007 !important;
    background: var(--white);
    border: 1px solid rgba(255, 84, 3, 0.1);
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 12px;
    min-width: 150px;
    height: 61px;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    pointer-events: auto;
    /* Ensure dropdown can overflow navbar */
    margin: 0;
}

.login-modal-dropdown.show {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Triangle arrow pointing up */
.login-modal-dropdown::before {
    content: '';
    position: absolute;
    top: -15px;
    right: 60px;
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 15px solid var(--white);
}

.login-button-wrapper {
    position: relative;
    display: block;
    width: 100%;
}

.btn-login-modal {
    background: var(--white);
    color: rgba(51, 51, 51, 1);
    padding: 5px 20px;
    border-radius: 26px;
    font-weight: 400;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
    width: 100%;
    white-space: nowrap;
}

.btn-login-modal:hover {
    background: var(--bg-light);
}

.btn-login-modal i {
    font-size: 1.2rem;
    color: var(--text-dark);
}

.btn-login-modal svg {
    margin-right: 8px;
    flex-shrink: 0;
}

@media (max-width:768px) {
    .budget-btn {
        width: 143px;
        max-height: 104px;
        padding: 35px 15px;
        margin-left: -7px;
    }

}


@media (min-width: 1200px) {
    .col-md-5 {
        flex: 0 0 auto;
        width: 36.666667%;
    }
}

@media (min-width: 769px) {
    .header-section-pid {
        background: rgba(245, 245, 245, 1);
    }
}

/* Reset Bootstrap radius merging ONLY here */
.search-input-override>* {
    margin-left: 0 !important;
}

/* Restore input right corners */
.search-input-override .form-control {
    border-top-right-radius: 30px !important;
    border-bottom-right-radius: 30px !important;
}

/* Restore button left corners */
.search-input-override .btn-search-mobile-pid {
    border-top-left-radius: 30px !important;
    border-bottom-left-radius: 30px !important;
}

.form-select {
    border-radius: 26px;
    color: rgba(51, 51, 51, 0.8);
    font-weight: 400;
    font-size: 13px;
    padding: 10px;
}

.btn-search-pid-r {
    position: relative;
    margin-top: 10px;
    width: 30%;
    border: 1px solid #FF5403;
    background: #FFE5D9;
    color: var(--text-dark);
    padding: 6px 14px 6px 14px;
    border-radius: 100px;
    font-weight: 500;
    font-size: 12px;
    transition: all 0.3s;
    z-index: 1;
}

/* Mobile Promotional Banner - Updated Styles (Override) */
@media (max-width: 767.98px) {
    .promotional-banner-mobile {
        background: transparent !important;
        margin: 15px 0 !important;
        padding: 0 5px !important;
    }

    .promo-banner-content {
        background: linear-gradient(360deg, #000000 0%, #333333 100%);
        border-radius: 16px !important;
        text-align: center !important;
        padding: 32px 20px !important;
        margin: 0 !important;
    }

    .promo-question {
        color: #FFFFFF !important;
        font-size: 15px !important;
        letter-spacing: 1px;
        font-weight: 600 !important;
        margin-bottom: 12px !important;
        line-height: 120% !important;
    }

    .promo-title {
        background: linear-gradient(90deg, #FED699 0%, #FFA800 100%);
        -webkit-background-clip: text;
        /* Chrome, Safari */
        background-clip: text;
        -webkit-text-fill-color: transparent;
        font-size: 1.8rem !important;
        font-weight: 600 !important;
        margin-bottom: 24px !important;
        line-height: 1.3 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 4px !important;
    }

    .promo-title-line1 {
        display: block !important;
    }

    .promo-title-line2 {
        display: block !important;
        font-weight: 700 !important;
    }

    .btn-know-more-mobile {
        width: 132px;
        background: #FFFFFF !important;
        color: #D6501C !important;
        border: none !important;
        padding: 12px 29px !important;
        border-radius: 20px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        cursor: pointer !important;
        transition: all 0.3s ease !important;
    }

    .btn-know-more-mobile:hover {
        background: #F5F5F5 !important;
        color: #D6501C !important;
        transform: translateY(-1px) !important;
    }
}

@media (min-width: 1600px) {
    .image_home1 {
        transform: translateX(-65%);
    }

    .image_home2 {
        transform: translateX(-29%);
    }

    .image_home3 {
        transform: translateX(6%);
    }

    .user-dropdown-menu {
        right: 155px;
    }
}

.faq-section-pay {
    background: #F8F8F8;
    padding: 40px 0;
}

.download-section-pay {
    background: #F8F8F8;
    position: relative;
    color: #333333;
    font-weight: 400;
    font-size: 18px;
    line-height: 160%;
    font-style: regular;
    font-family: Konnect;
    font: bold;

}

.download-section-pay::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 10px;
    transform: translateX(-50%);
    width: 120%;
    height: 540px;
    background-image: url(../images/images/wave-pattern.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center bottom;
    pointer-events: none;
    z-index: 0;
}

.space-pay {
    margin-top: 65px;
}

/* Self Verification Form Box - Desktop */
.self-verification-box {
    background: white;
    border-radius: 50px;
    padding: 72px 60px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    width: 850px;
    height: 493px;
    position: relative;
    margin: -124px 0px 11px 0px;
    z-index: 10;
    box-sizing: border-box;
}

.verification-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
    height: 100%;
    box-sizing: border-box;
}

.verification-form .form-group {
    margin: 0;
    position: relative;
}

.verification-form .form-label {
    font-size: 14px;
    font-weight: 500;
    color: #333333;
    margin-bottom: 0;
    display: block;
    position: absolute;
    top: -8px;
    left: 16px;
    background: white;
    padding: 0 8px;
    z-index: 2;
    line-height: 1;
}

.verification-form .form-label.error-label {
    color: #FF3B69;
    font-weight: 400;
}

.verification-form .form-control {
    width: 100%;
    padding: 12px 40px 12px 16px;
    border: 1px solid #E0E0E0;
    border-radius: 8px;
    font-size: 16px;
    color: #333333;
    background: white;
    transition: border-color 0.3s;
    box-sizing: border-box;
}

.verification-form .form-control:focus {
    outline: none;
    border-color: #FF5403;
    box-shadow: 0 0 0 3px rgba(255, 84, 3, 0.1);
}

.verification-form .form-control.error-input {
    border-color: #FF3B69;
}

.verification-form .form-control::placeholder {
    color: #999999;
}

.verification-form .input-wrapper {
    position: relative;
    width: 100%;
}

.verification-form .clear-btn {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: #CCCCCC;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
}

.verification-form .clear-btn:hover {
    color: #999999;
}

.verification-form .error-message {
    font-size: 12px;
    color: #FF3B69;
    margin-top: 6px;
    display: block;
    margin-left: 20px;
}

.verification-form .btn-verify {
    width: 100%;
    padding: 14px;
    background: #FF5403;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s;
    margin-top: 4px;
}

.verification-form .btn-verify:hover {
    background: #E64900;
}

/* Self Verification Hero Title and Subtitle */
.self-verification-title {
    font-size: 34.87px;
    font-weight: 700;
    color: white;
    margin: 0 0 12px 0;
    line-height: 1.2;
    font-family: sans-serif;
}

.self-verification-subtitle {
    font-size: 18px;
    font-weight: 400;
    color: white;
    margin: 0;
    line-height: 1.4;
    font-family: sans-serif;
}

.self-verification-subtitle strong {
    font-weight: 600;
}

.space-self-verification {
    margin-top: 55px;
}

/* Empty Bank Account Section - Desktop */
.empty-bank-account-section {
    padding: 80px 0;
    background: white;
    min-height: 60vh;
    display: flex;
    align-items: center;
}

.empty-bank-account-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 600px;
    margin: 0 auto;
    text-align: left;
}

.bank-account-card {
    width: 314px;
    background: white;
    border-radius: 12px;
    padding: 0;
    box-shadow: none;
    border: none;
    margin-bottom: 0;
    display: flex;
    justify-content: center;
}

.bank-account-card svg {
    width: 100%;
    max-width: 355px;
    height: auto;
}

.no-bank-text {
    font-size: 18px;
    font-weight: 400;
    color: #666666;
    margin: -15px 0 10px 0;
    text-align: center;
    width: 100%;
    font-family: 'Konnect';
}

.bank-account-links {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
    width: 100%;
    margin-top: 10px;
}

.bank-account-link {
    font-size: 16px;
    font-weight: 400;
    color: #333333;
    text-decoration: none;
    cursor: pointer;
    font-family: sans-serif;
    transition: color 0.3s;
}

.bank-account-link:hover {
    color: #FF5403;
}

.btn-verify-bank {
    background: #FF5403;
    color: white;
    border: none;
    border-radius: 30px;
    padding: 12px 32px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s;
    display: inline-block;
    margin-top: 20px;
    width: 269px;
    height: 48px;
}

.btn-verify-bank:hover {
    background: #E64900;
}

.desktop-verify-btn {
    display: inline-block !important;
}

.mobile-add-btn {
    display: none !important;
}

/* Contact Limit Modal - Desktop */
.contact-limit-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.contact-limit-modal-overlay.show {
    opacity: 1;
    visibility: visible;
}

.contact-limit-modal {
    background: white;
    border-radius: 32px;
    padding: 36px 36px 20px 36px;
    max-width: 500px;
    width: 90%;
    height: 340px;
    position: relative;
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.contact-limit-modal-overlay.show .contact-limit-modal {
    transform: scale(1);
}

.contact-limit-modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: opacity 0.3s ease;
}

.contact-limit-modal-close:hover {
    opacity: 0.7;
}

.contact-limit-drag-handle {
    display: none;
}

.contact-limit-modal-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.contact-limit-header {
    display: flex;
    align-items: center;
    margin-bottom: 0px;
    justify-content: left;
    gap: 10px;
}

.contact-limit-stars {
    display: flex;
    gap: 4px;
}

.contact-limit-stars .bi-star-fill {
    color: #FF5403;
    font-size: 18px;
}

.contact-limit-trust-text {
    font-size: 12px;
    color: #333333;
    margin: 0;
    font-weight: 200;
}

.contact-limit-title {
    font-size: 20px;
    font-weight: 600;
    color: #333333;
    margin: -10px 0px -10px 0px;
    line-height: 1.3;
}

.contact-limit-description {
    font-size: 18px;
    color: #333333;
    margin: 0;
    line-height: 1.5;
}

.contact-limit-upgrade-btn {
    background: #FF5403;
    color: white;
    border: none;
    border-radius: 8px;
    padding: 10px 24px;
    cursor: pointer;
    transition: background 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0px;
    margin-top: 10px;
    height: 61px;
}

.contact-limit-upgrade-btn:hover {
    background: #E64900;
}

.upgrade-btn-text {
    font-size: 16px;
    font-weight: 600;
    color: white;
}

.upgrade-btn-subtext {
    font-size: 13px;
    font-weight: 400;
    color: white;
}

.contact-limit-wait-link {
    text-align: center;
    font-size: 18px;
    color: #666666;
    text-decoration: none;
    margin-top: -10px;
    transition: color 0.3s ease;
}

.contact-limit-wait-link:hover {
    color: #333333;
}

.mobile-drag-handle {
    display: none;
}

.desktop-close-btn {
    display: block;
}

/* Plan Selection Modal - Desktop */
.plan-selection-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.plan-selection-modal-overlay.show {
    opacity: 1;
    visibility: visible;
}

.plan-selection-modal {
    background: white;
    border-radius: 24px;
    padding: 40px;
    max-width: 600px;
    width: 90%;
    position: relative;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    transform: scale(0.9);
    transition: transform 0.3s ease;
    max-height: 90vh;
    overflow-y: auto;
}

.plan-selection-modal-overlay.show .plan-selection-modal {
    transform: scale(1);
}

.plan-selection-modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: opacity 0.3s ease;
}

.plan-selection-modal-close:hover {
    opacity: 0.7;
}

.plan-selection-drag-handle {
    display: none;
}

.plan-selection-modal-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.plan-selection-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 0;
}

.plan-selection-stars {
    display: flex;
    gap: 4px;
}

.plan-selection-stars .bi-star-fill {
    color: #EAB308;
    font-size: 18px;
}

.plan-selection-trust-text {
    font-size: 14px;
    color: #333333;
    margin: 0;
    font-weight: 400;
}

.plan-selection-title {
    font-size: 24px;
    font-weight: 700;
    color: #333333;
    margin: -10px 0px 0px 0px;
    line-height: 1.3;
}

.plan-selection-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.plan-option-customizable {
    height: 88px;
    display: flex;
    align-items: flex-start;
    padding: 16px 20px;
    border: 2px solid #F1C1AE;
    border-radius: 12px;
    background: #FEEFE9;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.plan-option-customizable:hover {
    background: #FFE8DC;
}

.plan-option-customizable input[type="radio"] {
    position: absolute;
    top: 16px;
    right: 20px;
    width: 20px;
    height: 20px;
    accent-color: #F06A37;
    cursor: pointer;
    margin: 0;
}

.plan-option-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.plan-option-header {
    display: flex;
    align-items: center;
    gap: 12px;
}

.plan-option-name {
    font-size: 16px;
    font-weight: 500;
    color: #333333;
    line-height: 1.2;
}

.plan-option-customizable-row {
    margin-top: 10px;
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.plan-option-customizable-text {
    font-size: 18px;
    font-weight: 600;
    color: #333333;
    line-height: 1.2;
}

.plan-option-badge {
    background: #FF5403;
    color: white;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
}

.plan-option-subtitle {
    font-size: 14px;
    color: #676767;
    font-weight: 400;
}

.plan-option-card {
    height: 105px;
    margin-top: 15px;
    display: flex;
    align-items: flex-start;
    padding: 16px 20px;
    border: 2px solid #F2F2F2;
    border-radius: 12px;
    background: white;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.plan-option-card:hover {
    border-color: #F1C1AE;
    background: #FEEFE9;
}

.plan-option-card input[type="radio"] {
    position: absolute;
    top: 16px;
    right: 20px;
    width: 20px;
    height: 20px;
    accent-color: #FF5403;
    cursor: pointer;
    margin: 0;
}

.plan-option-cards-row {
    display: flex;
    gap: 12px;
    width: 100%;
}

.plan-option-cards-row .plan-option-card {
    flex: 1;
}

.plan-option-premium {
    background: white;
}

.plan-recommended-badge {
    position: absolute;
    top: -8px;
    right: 12px;
    background: #F1C2AE;
    color: #333333;
    padding: 2px 12px;
    border-radius: 16px;
    font-size: 10px;
    font-weight: 500;
    z-index: 2;
}

.plan-card-title {
    font-size: 18px;
    font-weight: 600;
    color: #333333;
    display: block;
    margin-bottom: 8px;
}

.plan-price-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.plan-price {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.plan-price-old {
    font-size: 14px;
    color: #999999;
    text-decoration: line-through;
    font-weight: 400;
}

.plan-price-new {
    font-size: 24px;
    font-weight: 700;
    color: #333333;
}

.plan-selection-benefits {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 20px 20px 20px;
    background: white;
    border-radius: 12px;
    border: 1px solid #F06A37;
    height: auto;
    box-sizing: border-box;
    justify-content: space-between;
}

.benefits-triangle {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid #F06A37;
    z-index: 1;
}

.benefit-items {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: none;
    border: none;
}

.benefit-items .bi-check-lg {
    color: #333333;
    font-size: 18px;
    flex-shrink: 0;
    margin-top: 2px;
    line-height: 1;
}

.benefit-items span {
    font-size: 14px;
    color: #333333;
    line-height: 1.5;
    font-weight: 400;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
}

.plan-selection-cta-container {
    display: flex;
    flex-direction: column;
    border-radius: 16px;
    overflow: hidden;
    background: white;
}

.plan-selection-social-proof {
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0px 0px 16px 0px;
    background: #F06A371A;
    border-radius: 60px 60px 0 0;
}

.plan-selection-social-proof .bi-fire {
    color: #FF5403;
    font-size: 16px;
}

.plan-selection-social-proof span {
    font-size: 13px;
    color: #676767;
    font-weight: 400;
}

.plan-selection-continue-btn {

    position: relative;
    bottom: 26px;
    background: #F06A37;
    color: white;
    border: none;
    border-radius: 60px;
    padding: 16px 24px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.3s ease;
    width: 100%;
    margin: 0;
}

.plan-selection-continue-btn:hover {
    background: #E64900;
}

.plan-selection-view-offers {
    text-align: right;
    font-size: 14px;
    color: #676767;
    text-decoration: none;
    margin-top: -15px;
    display: block;
    transition: color 0.3s ease;
    text-decoration-line: underline;
    text-decoration-style: solid;
}

.plan-selection-view-offers:hover {
    color: #333333;
}

/* Mobile Only Button - Hide on Desktop */
.mobile-only-btn {
    display: none;
}

/* Self Verification Modal - Hide on Desktop */
.self-verification-modal-overlay {
    display: none;
}

/* Scam Fraud Alert Modal - Hide on Desktop */
.scam-fraud-alert-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 0;
}

.scam-fraud-alert-modal {
    background: #F5F5F5;
    border-radius: 0;
    width: 100%;
    max-width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: none;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Scam Fraud Alert Section - Desktop */
.scam-fraud-alert-section {
    background: #F5F5F5;
    padding: 80px 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
}

.scam-alert-wrapper {
    display: flex;
    align-items: center;
    gap: 30px;
    padding: 40px;
    max-width: 100%;
    margin: 0;
}

.scam-alert-graphic {
    flex: 0 0 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 768px) {
    .scam-fraud-alert-modal {
        max-width: 95%;
        padding: 20px;
    }

    .scam-alert-wrapper {
        flex-direction: column;
        padding: 30px 20px;
        gap: 20px;
    }

    .scam-alert-graphic {
        flex: 0 0 auto;
        width: 100%;
        max-width: 150px;
    }

    .scam-alert-heading {
        font-size: 20px;
    }

    .scam-alert-subheading {
        font-size: 18px;
    }

    .scam-alert-button {
        width: 100%;
        padding: 12px 20px;
    }
}

.phone-cards-svg {
    width: 100%;
    height: auto;
    max-width: 400px;
}

.scam-alert-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.scam-alert-heading {
    font-size: 24px;
    font-weight: 700;
    color: #333333;
    margin: 0;
    line-height: 1.3;
}

.scam-alert-subheading {
    font-size: 20px;
    font-weight: 600;
    color: #B20000;
    margin: 0;
}

.scam-alert-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.scam-alert-item {
    display: flex;
    align-items: center;
    gap: 12px;
}



.scam-alert-item span {
    font-size: 16px;
    color: #666666;
    font-weight: 400;
}

.scam-alert-button {
    background: #FF5403;
    color: white;
    border: none;
    border-radius: 26px;
    padding: 10px 40px;
    font-size: 18px;
    font-weight: 400;
    cursor: pointer;
    transition: background 0.3s ease;
    align-self: flex-start;
    margin-top: 10px;
}

.scam-alert-button:hover {
    background: #E64900;
}


.pricing-section {
    min-height: 856px;
    height: auto;
    background: linear-gradient(180deg, #FFFFFF 54.29%, #E8E8E8 100%);
    position: relative;
    border-bottom-left-radius: 32px;
    border-bottom-right-radius: 32px;
    overflow: hidden;
    padding-bottom: 140px;
}

/* Headings */
.pricing-title {
    font-size: 50px;
    font-weight: 700;
    letter-spacing: -0.5px;
    color: #333333;
}

.pricing-subtitle {
    color: #676767;
    font-size: 24px;
    font-weight: 400;
    margin-top: 10px;
}

/* Segmented toggle (exact Figma match) */
.plan-segment {
    display: flex;
    align-items: center;
    width: 525px;
    height: 64px;
    border: 1px solid #FF5403;
    border-radius: 40px;
    padding: 6px;
    gap: 6px;
    background: #FFFFFF;
}

/* Individual buttons */
.segment-btn {
    border: none;
    background: transparent;
    color: #FF5403;
    font-weight: 500;
    font-size: 18px;
    padding: 12px 32px;
    border-radius: 40px;
    white-space: nowrap;
    transition: all 0.2s ease;
}

/* Active state */
.segment-btn.active {
    background: #FF5403;
    color: #fff;
}




/* Card base */
.pricing-card {
    width: 100%;
    min-height: 210px;
    background: #fff;
    border-radius: 18px;
    padding: 20px 22px;
    box-shadow: 6px 6px 20px 0px #0000001A;
    display: flex;
    flex-direction: column;
}

/* Active card */
.pricing-card.active {
    background: #FEEFE9;
    border: 4px solid #FFFFFF;
}

/* Plan name */
.plan-name {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 6px;
}

/* Price */
.price {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 4px;
}

.price .gst {
    font-size: 13px;
    font-weight: 500;
    color: #666;
}

.price .old {
    font-size: 14px;
    color: #bbb;
    text-decoration: line-through;
    margin-right: 6px;
}

/* Duration */
.duration {
    margin-top: 31px;
    font-size: 13px;
    color: #666;
    margin-bottom: 22px;
}

/* Buttons */
.btn-current {
    background: #FF5403;
    color: #fff;
    font-weight: 600;
    border-radius: 999px;
    padding: 10px 0;
    border: none;
}

.btn-buy {
    background: transparent;
    color: var(--orange);
    font-weight: 600;
    border-radius: 999px;
    padding: 10px 0;
    border: 1.8px solid var(--orange);
}

/* HOVER STATE */
.btn-buy:hover {
    background: var(--orange);
    color: #fff;
    border-color: var(--orange);
}

.btn-current:hover {
    background: var(--orange);
    color: #fff;
    border-color: var(--orange);
}

/* Refund badge */
.badge-refund {
    position: absolute;
    top: -14px;
    right: 20px;
    background: #FEEAE2;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    box-shadow: 3px 4px 10px 0px #0000001F;
    border: 1px solid #FFFFFF;
}


/* Overlap wrapper */
.feature-overlap {
    position: relative;
    margin-top: -120px;
    /* HALF overlap */
    z-index: 2;
}

/* Feature box */
.feature-box {
    margin-top: 60px;
    margin-left: 80px;
    width: 1149px;
    min-height: 230px;
    background: #fff;
    border: 1px solid #FEEFE9;
    border-radius: 20px;
    padding: 32px 36px;
    box-shadow: 6px 6px 20px 0px #0000001A;
}

/* Feature list */
.feature-list {
    list-style: none;
    padding: 0px;
    margin: 0px;
}

.feature-list li {
    position: relative;
    padding-left: 28px;
    margin-bottom: 22px;
    font-size: 15px;
    line-height: 1.4;
    color: var(--text);
}

/* Active (orange) */

/* Disabled (grey) */
.feature-list li.disabled {
    color: var(--muted);
}

.feature-list li.disabled::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    color: #bdbdbd;
    font-size: 14px;
}

.review-section {
    background: #fff;
}

/* Heading */
.review-title {
    margin-top: 40px;
    margin-bottom: 40px;
    font-size: 28px;
    font-weight: 700;
    color: #222;
}

.review-title span {
    color: #F06A37;
}



/* Image */
.review-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Rent button */
.rent-btn {
    background: #fff;
    border: 1px solid #333333;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    width: 100;
    height: 36px;
    border-radius: 24px;
    padding: 12px 16px;
    gap: 6px;
}

.rent-btn .chevron {
    width: 8px;
    height: 8px;
    border-right: 1.8px solid #333;
    border-bottom: 1.8px solid #333;
    transform: rotate(45deg);
    margin-top: -3px;
    /* vertical alignment */
    transition: transform 0.3s ease;
}

.rent-btn-wrapper {
    position: relative;
}

.rent-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: var(--white);
    border: 1px solid #E5E5E5;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    min-width: 140px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 1000;
    overflow: hidden;
}

.rent-dropdown-menu.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.rent-btn.active .chevron {
    transform: rotate(225deg);
}

.rent-dropdown-item {
    display: block;
    padding: 12px 16px;
    font-family: Konnect;
    font-size: 14px;
    font-weight: 400;
    color: #333333;
    text-decoration: none;
    transition: background-color 0.2s ease;
    cursor: pointer;
}

.rent-dropdown-item:hover {
    background-color: #F5F5F5;
}

.rent-dropdown-item:first-child {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.rent-dropdown-item:last-child {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

/* Header row: title + button */
.pricing-header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

/* Ensure title doesn't push button down */
.pricing-title {
    margin-bottom: 0;
}

.feature-cta {
    display: none;
}


/* Page wrapper */
.bank-page {
    margin-top: 15px;
    padding: 40px 0px 40px 31px;
}

/* LEFT SECTION */
.form-section h2 {
    font-size: 40px;
    font-weight: 600;
    margin-bottom: 30px;

}

.subtitle-add {
    font-weight: 400;
    font-size: 27px;
    color: #333333;
    margin-bottom: 60px;
    line-height: 14px;
}

.subtitle-add strong {
    font-size: 30px;
    font-weight: 600;
    color: #333333;
}

/* Form */
.bank-form {
    width: 730px;
    height: 1424px;
}

.bank-form label {
    font-weight: 400;
    font-size: 16px;
    color: #777;
    margin-bottom: 6px;
}

.bank-form .form-control {
    height: 40px;
    font-size: 13px;
    border-radius: 6px;
}

/* Submit button */
.bank-form .submit-btn {
    width: 100%;
    height: 48px;
    background: #FF5403;
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    border-radius: 60px;
    border: 1px solid #FF5403;
    margin-top: 50px;
}

/* RIGHT SECTION */
.image-section {
    position: fixed;
    margin-top: 30px;
    right: -23px !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-section img {

    width: 490px;
    height: 329px;
}

/* Floating input wrapper */
.floating-input {
    height: 72px;
    width: 730px;
    position: relative;
    margin-bottom: 18px;
}

/* Input */
.floating-input input {
    width: 100%;
    height: 60px;
    padding: 16px 40px 10px 14px;
    /* top space for label */
    font-weight: 400;
    font-size: 18px;
    border: 1px solid #333333;
    border-radius: 14px;
    outline: none;
    background: #ffffff;
    color: #4F4F4F;

}

/* Focus border */
.floating-input input:focus {
    border-color: #0d6efd;
    /* bootstrap blue */
}

/* Floating label (between border lines) */
.floating-input label {
    position: absolute;
    top: -8px;
    left: 12px;
    padding: 0 6px;
    font-size: 12px;
    color: #333333;
    background: #ffffff;
    /* cuts the border */
    pointer-events: none;
}

/* Clear (X) icon */
.clear-input {
    position: absolute;
    top: 30px;
    right: 19px;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #E4E3E8;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0.7;
}

.clear-input i {

    font-size: 14px;
    color: #FAFAFA;
}


/* Page */
.transaction-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 60px;
}

.page-title {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 30px;
}

/* Card */
.transaction-card {
    width: 560px;
    height: 860px;
    background: #FAFAFA;
    border: 1px solid #d9d9d9;
    border-radius: 20px;
    padding: 60px 76px;
    text-align: center;
    margin-bottom: 100px;
}

/* Avatar */
.transaction-card .avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    margin-bottom: 12px;
}

.transaction-card .name {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 4px;
}

.transaction-card .phone {
    font-weight: 400;
    font-size: 18px;
    color: #777;
    margin-bottom: 16px;
}

/* Amount */
.transaction-card .amount {
    font-size: 60px;
    font-weight: 600;
    margin-bottom: 6px;
    line-height: 134%;
    letter-spacing: -3%;
}

/* Status */
.transaction-card .status {
    border-radius: 10px;
    background-color: white;
    width: 103px;
    height: 24px;
    margin-bottom: 26px;
    margin-left: 150px;
    font-size: 14px;
    color: #008000;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-bottom: 15px;
}

.transaction-card .transaction-card .txn-divider {
    width: 158px;
    /* exact short line */
    height: 1px;
    background: #e5e5e5;
    /* light gray */
    margin: 6px auto;
    /* centered */
}


/* Date */
.transaction-card .date {
    margin-top: 15px;
    font-size: 12px;
    color: #999;
    margin-bottom: 5px;
}

/* Details */
/* Inner transaction details box */
.txn-details-box {
    margin-left: -38px;
    width: 483px;
    height: 317px;
    padding: 18px 20px;
    border: 1px solid #eeeeee;
    /* 🔥 correct light border */
    border-radius: 10px;
    /* 🔥 rounded like screenshot */
    background: #ffffff;
}

/* Rows inside */
.txn-details-box .detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    font-size: 16px;
    gap: 24px;
}

/* Divider lines */
.txn-details-box .detail-row:not(:last-child) {
    border-bottom: 1px solid #f2f2f2;
    margin-top: 10px;
}

/* Left label */
.txn-details-box span {
    color: #777777;
    font-weight: 400;
}

/* Right value */
.txn-details-box strong {
    color: #333333;
    font-weight: 500;
}

.transaction-card img {
    width: 100%;
    height: 125%;
    object-fit: cover;
}


/* Main wrapper */
.failed-wrapper {
    width: 100%;
    min-height: 100vh;
    text-align: center;
    padding-top: 100px;
}

/* Icon */
.failed-icon img {
    width: 96px;
    height: auto;
    margin-bottom: 20px;
}

/* Heading */
.failed-wrapper h1 {
    font-size: 28px;
    font-weight: 700;
    color: #222;
    margin-bottom: 10px;
}

/* Subtitle */
.subtitle {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    margin-bottom: 30px;
}

/* Info Card */
.info-card {
    width: 284px;
    background: #ffffff;
    margin: 0 auto 24px auto;
    padding: 20px 16px;
    border-radius: 4px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

.info-card .row {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    margin-bottom: 14px;
}

.info-card .row:last-child {
    margin-bottom: 0;
}

.info-card span {
    color: #777;
}

.info-card strong {
    font-weight: 500;
}

/* Retry Button */
.retry-btn {
    display: inline-block;
    padding: 10px 24px;
    border-radius: 60px;
    border: 1px solid #FF5403;
    color: #FF5403;
    text-decoration: none;
    font-size: 14px;
    margin-bottom: 16px;
}

/* OR text */
.or-text {
    font-size: 12px;
    color: #999;
    margin-bottom: 16px;
}

.support-box {
    width: 327px;
    height: 68px;
    background: #FEEFE9;
    border-radius: 12px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    position: relative;
    bottom: 10px;
}

/* Inner wrapper */
.support-inner {
    width: 303px;
    height: 44px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Left text block */
.support-text {
    width: 188px;
    height: 44px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.support-title {
    font-size: 16px;
    font-weight: 500;
    line-height: 120%;
    color: #333333;
}

.support-subtitle {
    margin-top: -13px;
    margin-left: -30px;
    font-size: 14px;
    font-weight: 300;
    line-height: 120%;
    color: #777777;
}

.support-subtitle-span {
    font-weight: 500;
    color: #333333;
}

/* Right icons wrapper */
.support-icons {
    width: 95px;
    height: 40px;
    display: flex;
    gap: 15px;


}

/* Individual icon */
.support-icon {
    width: 40px;
    height: 40px;

    border: 0.5px solid rgb(255, 84, 3, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.support-icon i {
    font-size: 18px;
    color: #FF5403;
}


/* FULL BACKGROUND */
.payment-bg {
    position: relative;
    width: 100vw;
    min-height: 72vh;
    height: auto;
    /* margin-top: 80px; keep commented to allow full-bleed */
    background: linear-gradient(180deg, #F06A37 0%, #BE3704 100%);
    overflow: hidden;
}

/* WHITE ABSTRACT WAVE */
.wave {
    position: absolute;

    width: 1375.08px;
    height: 500.47px;

    /* 🔥 FIX: mirror + rotate */
    top: -100.7px;
    left: 931px;

    transform: scaleX(-1) rotate(-45.08deg);
    transform-origin: center;

    opacity: 0.25;
    mix-blend-mode: color-dodge;

    pointer-events: none;
}

/* ===============================
   SUCCESS ICON (BOOTSTRAP ICON)
   =============================== */

.success-icon {
    position: absolute;
    margin-top: 70px;
    left: 50%;
    transform: translateX(-50%);

    width: 146px;
    height: 146px;

    background: #ffffff;
    border-radius: 50%;

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

.success-icon img {
    top: 169px;
    left: 916px;
    width: 86.16px;
    height: 86.16px;
    display: block;
}

/* ===============================
   CENTER CONTENT
   =============================== */

.success-content {
    position: absolute;
    top: 260px;
    /* aligned under icon */
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    color: #ffffff;
}

/* Heading */
.success-content h1 {
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 10px;
}

/* Sub heading */
.success-content .subtitle {
    color: #ffffff;
    font-size: 18px;
    font-weight: 400;
    opacity: 0.9;
    margin-bottom: 20px;
    letter-spacing: 0.2px;
}

/* Info card */
.info-card {
    background: #ffffff;
    color: #333333;
    height: 126px;
    width: 284px;
    padding: 20px 16px;
    border-radius: 4px;
    margin: 0 auto 30px auto;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

.info-card .row1 {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    margin-bottom: 16px;
}

.info-card .row1:last-child {
    margin-bottom: 0px;
}

.info-card span {
    color: #777;
}

.info-card strong {
    font-weight: 500;
}

/* CTA Button */
.cta-btn {
    width: 162px;
    height: 42px;
    display: inline-block;
    padding: 10px 20px 10px 20px;
    background: #ffffff;
    color: #FF5403;
    font-size: 13px;
    font-weight: 400;
    border-radius: 60px;
    text-decoration: none;
    letter-spacing: 0.2px;
    border: 1px solid #ffffff;
    margin-bottom: 60px;
}

/* Page */
.profile-page {
    /* margin-left: -8px; */
    margin-top: 120px;
}

/* Profile Header */
.profile-header {
    width: 100%;
    margin-bottom: 40px;
}

.mobile-profile-header {
    padding: 0 15px;
    margin-bottom: 30px;
}

.mobile-profile-header h4 {
    font-size: 16px;
    font-weight: 500;
    color: #333333;
    padding-top: 1px;
}

.btn-edit-profile {
    top: 0;
    right: 15px;
    background: none;
    border: none;
    color: #F06A37;
    font-size: 12px;
    font-weight: 400;
    padding: 0;
    text-decoration: underline;
    cursor: pointer;
}

.btn-edit-profile:hover {
    color: #d85a2a;
}

.profile-avatar {
    position: relative;
    display: flex;
    left: 585px;
    overflow: hidden;
    width: 121px;
    height: 120px;
    border-radius: 57%;
}

.profile-avatar-payment {
    position: relative;
    display: flex;
    left: 150px;
    overflow: hidden;
    width: 121px;
    height: 120px;
    border-radius: 57%;
}

.profile-name {
    margin-top: 20px;
    font-weight: 600;
    font-size: 24px;
}

/* Bank Details */
/* Wrapper */
.bank-details-box {
    width: 100%;
    margin-bottom: 60px;
}

/* HEADER (collapsed default) */
.bank-toggle {
    width: 100%;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 20px;
    padding: 14px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 20px;
    font-weight: 500;
}

/* Expanded header — only top rounded */
.bank-toggle:not(.collapsed) {

    border-radius: 20px 20px 0px 0px;
}

/* Arrow animation */
.bank-toggle i {
    transition: transform 0.2s ease;
}

.bank-toggle:not(.collapsed) i {
    transform: rotate(180deg);
}

/* CONTENT */
.bank-details-content {
    border: 1px solid #eee;
    border-top: none;
    border-radius: 0 0;
    background: #fff;
}

/* TWO-COLUMN ROWS */
.detail-row {
    display: flex;
    justify-content: space-between;
    padding: 12px 16px;
    font-size: 20px;
    font-weight: 400;
}

.detail-row:not(:last-child) {
    border-bottom: 1px solid #f2f2f2;
}

.detail-row span {
    color: #777;
}

.detail-row strong {
    font-weight: 500;
}


/* Transactions */
/* FULL WIDTH BACKGROUND */
.transaction-section {
    border-radius: 20px;
    background: #f6f6f6;
    /* gray shade at top */
    padding-top: 20px;
    width: 99.2vw;
    margin-left: calc(-48vw + 48%);
}

/* INNER WHITE CARD */
.transaction-container {
    max-width: 100%;
    margin: 0 auto;
    background: #ffffff;
    padding: 24px 32px 32px;

    /* TOP ROUNDED ONLY */
    border-radius: 20px 20px 0 0;
}

/* Title */
.transaction-section .section-title {
    font-weight: 600;
    font-size: 24px;
    margin-bottom: 35px;
}

.section-title-rent {
    font-weight: 600;
    font-size: 34px;
    margin-bottom: 35px;
    color: #333333;
}

.left-space {
    padding: 1px;
}

/* Transaction groups */
.transaction-group {
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;
}

.transaction-group:last-child {
    border-bottom: none;
}

/* Transaction item */
.transaction-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.left {
    display: flex;
    gap: 12px;
    align-items: center;
}

.txn-avatar {
    width: 70px;
    height: 70px;
    border-radius: 57%;
}

.name {
    font-size: 22px;
    font-weight: 500;
    margin-top: 16px;
    margin-bottom: 5px;
    margin-left: 20px;

}

.time {
    font-weight: 400;
    font-size: 18px;
    color: #777;
    margin-left: 20px;

}

.date {
    font-weight: 400;
    font-size: 24px;
    color: #666666;
    line-height: 100%;
}

.transaction-item .dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 6px;
}

.amount {
    margin-top: 12px;
    font-size: 20px;
    font-weight: 500;
}

/* Pay Now Button */
.pay-now-wrap {
    display: flex;
    justify-content: flex-end;
    margin-top: 40px;
}

.pay-now-btn {
    position: fixed;
    bottom: 3px;
    right: 100px;
    width: 160px;
    background: #FF5403;
    color: #fff;
    border: none;
    padding: 8px 18px;
    border-radius: 32px;
    font-size: 13px;
}

.nearby-card-space {
    padding-bottom: 10px;
    margin-bottom: 10px;
}

.section-title-property {
    font-size: 34px;
    font-weight: 600;
    margin-bottom: 35px;
}

.section-title-property-d {
    font-size: 34px;
    font-weight: 600;
    margin-bottom: -5px;
    color: #333333;
}

.section-title-property-m {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: -9px;
    color: #000000;
}

/* Default customizable (ACTIVE look) */
.plan-option-customizable.custom-active {
    background: #FEEFE9;
    border-color: #F1C1AE;
    color: inherit;
}

/* Customizable when NOT selected → FORCE WHITE */
.plan-option-customizable.is-customizable:not(.custom-active) {
    background: #fff;
    border-color: #F2F2F2;
    color: #000;
}

/* Normal active cards */
.plan-option-card.active {
    border-color: #F1C1AE;
    background: #FEEFE9;
}

/* Contact Owner Modal - Desktop */
.contact-owner-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    align-items: center;
    justify-content: center;
}

.contact-owner-modal-overlay.show {
    display: flex;
}

.contact-owner-modal {
    background: var(--white);
    border-radius: 12px;
    width: 90%;
    max-width: 565px;
    max-height: 41vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.contact-owner-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #F5F5F5;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s;
}

.contact-owner-modal-close:hover {
    background: #E5E5E5;
}

.contact-owner-modal-close i {
    font-size: 18px;
    color: #333333;
}

.contact-owner-modal-content {
    padding: 24px;
}

.contact-owner-modal-title {
    font-family: Konnect;
    font-size: 24px;
    font-weight: 700;
    color: #333333;
    margin-bottom: 20px;
    margin-top: 0;
}

.contact-owner-info {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.contact-owner-avatar {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-owner-avatar i {
    font-size: 50px;
    color: #CCCCCC;
}

.contact-owner-details {
    flex: 1;
}

.contact-owner-name {
    font-family: Konnect;
    font-size: 18px;
    font-weight: 700;
    color: #333333;
    margin-bottom: 4px;
}

.contact-owner-role {
    font-family: Konnect;
    font-size: 14px;
    font-weight: 400;
    color: #666666;
}

.contact-owner-buttons {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
}

.btn-call-owner {
    flex: 1;
    background: #F06A37;
    color: var(--white);
    border: none;
    border-radius: 8px;
    padding: 12px 20px;
    font-family: Konnect;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s;
}

.btn-call-owner:hover {
    background: #E05A27;
}

.btn-whatsapp-owner {
    flex: 1;
    background: var(--white);
    color: #F06A37;
    border: 1px solid #F06A37;
    border-radius: 8px;
    padding: 12px 20px;
    font-family: Konnect;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.3s;
}

.btn-whatsapp-owner:hover {
    background: #FFF5F0;
}

.contact-owner-divider {
    height: 1px;
    margin: 20px 0;
    border: none;
}

.contact-owner-property-summary {
    margin-bottom: 20px;
}

.property-posted-date {
    font-family: Konnect;
    font-size: 16px;
    font-weight: 400;
    color: #666666;
    margin-bottom: 7px;
}

.contact-owner-property-summary .property-price-wrapper {
    display: flex;
    align-items: center;
    gap: 0;
}

.contact-owner-property-summary .property-price {
    font-family: Konnect;
    font-size: 18px;
    font-weight: 500;
    color: #666666;
    margin: 0;
    padding-right: 16px;
    border-right: 1px solid #E5E5E5;
    flex-shrink: 0;
}

.contact-owner-property-summary .property-description {
    font-family: Konnect;
    font-size: 18px;
    font-weight: 500;
    color: #666666;
    line-height: 1.5;
    margin: 0;
    padding-left: 16px;
    flex: 1;
}

.section-title-fl {
    font-size: 30px;
    font-weight: 700;
    margin-bottom: 15px;
}

/* ACTION BUTTONS */
.listing-actions {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}

.btn-outline {
    width: 150px;
    height: 46px;
    border: 1px solid #FF5403;
    background: transparent;
    color: #333333;
    font-size: 16px;
    font-weight: 400;
    padding: 6px 10px;
    border-radius: 6px;
    line-height: 140%;
}

.btn-primary {
    width: 150px;
    height: 46px;
    border: none;
    background: #FF5403;
    color: #fff;
    font-size: 16px;
    font-weight: 400;
    padding: 6px 10px;
    border-radius: 6px;
    line-height: 140%;
}

.updated {
    background-color: #FFEAE0;
    width: 445px;
    height: 26px;
    font-size: 16px;
    font-weight: 400;
    line-height: 140%;
    color: #999;
    padding-top: 3px;
    margin-left: -22px;
    padding-left: 18px;
    margin-bottom: -16px;
}

/* CTA CONTAINER */
.listing-cta-box {
    width: 828px;
    height: 100px;
    background: #FFF4EE;
    border-radius: 20px;

    padding: 60px 59px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin: 0 auto;
}


/* CTA BUTTON */
.cta-btn-fl {
    width: 225px;
    height: 70px;

    background: #FF5403;
    color: #ffffff;
    border: none;
    border-radius: 10px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
}

/* ICON INSIDE BUTTON */
.cta-btn i {
    font-size: 16px;
}

.flatmate-card-fl {
    background: #FFFFFF;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Page wrapper */
.bank-list-page {
    padding: 40px 20px;
}

/* Bank card */
.bank-card {
    width: 347px;
    height: 80px;
    background: #ffffff;
    border-radius: 14px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    margin-bottom: 14px;
}

/* Left section */
.bank-card .left {
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 12px;


}

.avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333;
    margin-bottom: 15px;
}

/* Avatar colors */
.avatar.orange {
    background: #FFE6DA;
}

.avatar.pink {
    background: #FCE4EC;
}

.avatar.blue {
    background: #E8F0FE;
}

.info .name {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 2px;
    margin-left: 0px;
}

.info .number {
    font-size: 14px;
    color: #666666;
}

/* Right section */
.bank-card .right {
    margin-left: 30px;
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Status text */
.status {
    font-size: 10px;
    font-weight: 400;
    white-space: nowrap;
    padding: 4px 2px 4px 2px;
}

.status.active {
    color: #008000;
    background: #F5FFF5;
    border-radius: 2px;

}

.status.inactive {
    color: #FF3E3E;
    background: #FFF0F0;
    border-radius: 2px;

}

.status.pending {
    color: #F8B522;
    background: #FEF8EB;
    border-radius: 2px;

}

/* Dots menu */
.bank-card i {
    font-size: 18px;
    color: #333333;
    cursor: pointer;
}

/* CTA button */
.add-btn {
    margin-top: 24px;
    background: #FF5403;
    color: #fff;
    border: none;
    padding: 10px 22px;
    font-size: 13px;
    border-radius: 40px;
}

.profile-header img {
    width: 100%;
    height: 124%;
    object-fit: cover;
}

.heart-btn-wishlist {
    position: absolute;
    top: 10px;
    right: 5px;
    background: none;
    backdrop-filter: none;
    border: none;
    border-radius: 50%;
    padding: 10px 4px 6px 4px;
    width: 45px;
    height: 33px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: none;
    transition: all 0.3s;
}

.space-buying-booking {
    margin-bottom: -25px;
}

.space-buying-brokerage {
    left: 48%;
    padding: 5px 10px;
}

.property-space-buying {
    margin-right: 32px;
}

.space-cards-details-buy {
    margin-bottom: 30px;
}

.height-gallery-main {
    height: 460px;
}

.hieght-image {
    height: 460px;
}


.property-size {
    font-size: 26px;
}

.location-size {
    font-size: 18px;
}

.verified-size {
    font-size: 14.65px;
}

.carousel-dots-details-pg {
    display: flex;
    gap: 5px;
    margin-top: 20px;
    position: absolute;
    bottom: 40px;
    left: 50%;
    align-self: center;
    align-items: center;
    z-index: 10;
}

.pid-text-details-pg {
    border: 1px solid #FFCFB8;
    border-radius: 6px;
    padding: 10px;
    font-weight: 400;
    font-size: 16px;
}

.main-content-details-pg .row {
    margin-top: 0px;
    margin-left: -2px;
}

.verfied-badge-details-pg {
    font-size: 17.65px;
}

.property-title-main-details-pg {
    font-weight: 600;
    font-size: 26px;
}

.property-main-details-pg {
    font-size: 18px;
    font-weight: 400;
}

.price-amount-details-pg {
    font-size: 36px;
}

.premium-badge-details-pg {
    border: 1px solid #FFCFB8;
    border-radius: 6px;
    padding: 10px;
}

.btn-report-details-pg {
    padding: 10px 3px;
    font-size: 12px;
    border: 0.87px solid #EAEAEA;
}

/* Post Property Step Page - Desktop Styles */
.desktop-post-property-header {
    background: #FFFFFF;
    border-bottom: 1px solid #EAEAEA;
    padding: 0;
}

.desktop-post-property-header .container {
    max-width: 1200px;
}

.desktop-post-logo-icon {
    width: 40px;
    height: 40px;
    background: #FF5403;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    font-size: 20px;
}

.desktop-post-logo-text {
    display: flex;
    flex-direction: column;
}

.desktop-post-logo-title {
    font-size: 20px;
    font-weight: 700;
    color: #333333;
    line-height: 1.2;
}

.desktop-post-logo-subtitle {
    font-size: 12px;
    color: #666666;
    line-height: 1.2;
    font-weight: 400;
}

.desktop-post-user-icon {
    cursor: pointer;
}

.post-property-progress-section {
    background: #F5F5F5;
    padding: 40px 0;
    border-bottom: none;
}

.post-property-progress-container {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 555px;
    margin: 0 auto;
    gap: 0;
}

.post-property-progress-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
}

.post-property-step-square {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 1px solid #D9D9D9;
    background: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    position: relative;
}

.post-property-progress-step.post-property-step-active .post-property-step-square {
    background: #F06A37;
    border-color: #F06A37;
}

.post-property-step-inner-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid #FFFFFF;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    font-size: 16px;
    font-weight: bold;
}

.post-property-step-number {
    font-size: 16px;
    color: #333333;
    font-weight: 500;
    text-align: center;
}

.post-property-step-label {
    font-size: 14px;
    color: #666666;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
}

.post-property-progress-step.post-property-step-active .post-property-step-label {
    color: #666666;
    font-weight: 400;
}

.post-property-progress-line {
    flex: 1;
    height: 4px;
    background: #E0E0E0;
    min-width: 100px;
    max-width: 200px;
    margin: 0px -45px 10% -40px;
}

.post-property-form-section {
    background: #F5F5F5;
    padding: 0px 0 60px;
    min-height: calc(100vh - 200px);
}

.post-property-form-section .container {
    max-width: 851px;
    padding: 0;
}

.post-property-form-card {
    background: #FFFFFF;
    border-radius: 12px;
    padding: 40px 189px;
    width: 851px;
    margin: 0 auto 30px;
    box-sizing: border-box;
}

.post-property-form-header {
    text-align: center;
    margin-bottom: 30px;
}

.post-property-form-title {
    font-size: 24px;
    font-weight: 600;
    color: #F06A37;
    margin-bottom: 8px;
    text-align: center;
}

.post-property-form-subtitle {
    font-size: 18px;
    color: #666666;
    margin-bottom: 0;
    text-align: center;
}

.post-property-form {
    margin-top: 30px;
}

.post-property-form .row {
    margin-bottom: 0;
}

.post-property-form .col-md-6,
.post-property-form .col-12 {
    margin-bottom: 20px;
}

.post-property-label {
    font-size: 14px;
    font-weight: 600;
    color: #333333;
    margin-bottom: 8px;
    display: block;
}

.post-property-label-inside {
    position: absolute;
    top: -7px;
    left: 15px;
    font-size: 16px;
    font-weight: 400;
    color: #666666;
    z-index: 2;
    pointer-events: none;
    background: #FFFFFF;
    padding: 0 4px;
    line-height: 1;
}

.post-property-label-brokerage {
    position: relative;
    top: 0;
    left: 0;
    margin-bottom: 8px;
    display: block;
    background: transparent;
    padding: 0;
}

.post-property-label-textarea {
    top: -7px;
    left: 15px;
}

.post-property-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    overflow: visible;
}

.post-property-select-wrapper {
    position: relative;
}

.post-property-input-icon {
    position: absolute;
    left: 19px;
    top: 18px;
    color: #666666;
    font-size: 18px;
    z-index: 1;
}

.post-property-input-icon-right {
    position: absolute;
    right: 15px;
    top: 44px;
    color: #666666;
    font-size: 18px;
    z-index: 1;
    cursor: pointer;
}

.post-property-input {
    width: 100%;
    padding: 8px 15px;
    border: 1px solid #D9D9D9;
    border-radius: 10px;
    font-size: 14px;
    color: #D9D9D9;
    background: #FFFFFF;
    transition: all 0.3s;
}

.post-property-input::placeholder {
    color: #D9D9D9;
}

.post-property-input-wrapper .post-property-input {
    padding-top: 20px;
}

.post-property-input-wrapper:has(.post-property-input-icon) .post-property-input {
    padding-left: 45px;
}

.post-property-input-wrapper:not(:has(.post-property-input-icon)) .post-property-input {
    padding-left: 15px;
}

.post-property-select-wrapper {
    position: relative;
}

.post-property-select-wrapper .post-property-select-container {
    padding-top: 0;
}

.post-property-input:focus {
    outline: none;
    border-color: #FF5403;
    box-shadow: 0 0 0 3px rgba(255, 84, 3, 0.1);
}

.post-property-input-currency {
    padding-left: 50px !important;
    padding-right: 15px !important;
    padding-top: 10px !important;
    padding-bottom: 5px !important;
    border-left: none !important;
    border-radius: 0 10px 10px 0 !important;
}

.post-property-input-currency::placeholder {
    color: #D9D9D9 !important;
}

.post-property-currency-wrapper .post-property-input {
    border-left: none;
    border-radius: 0 10px 10px 0;
    border-color: transparent;
    box-shadow: none;
}

.post-property-clip {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 1;
    border-radius: 10px 0 0 10px;
    overflow: hidden;
    width: 50px;
    height: 100%;
}

.post-property-currency-wrapper {
    padding: 4px;
    border: 1px solid #D9D9D9;
    border-radius: 10px;
    position: relative;
    overflow: visible;
}

.post-property-currency-wrapper:focus-within {
    border-color: #FF5403;
    box-shadow: 0 0 0 3px rgba(255, 84, 3, 0.1);
}

.post-property-input-wrapper:has(.post-property-currency) .post-property-label-inside {
    left: 15px;
}

.post-property-brokerage-wrapper .post-property-label-inside {
    left: 15px;
}

.post-property-input-wrapper:has(.post-property-currency):has(.post-property-input-icon) .post-property-input {
    padding-left: 45px;
}

.post-property-currency-wrapper {
    position: relative;
}

.post-property-currency-section {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    z-index: 1;
    background: #FFFFFF;
    height: 100%;
    width: 100%;
    border-radius: 10px 0 0 10px;
}

.post-property-currency {
    padding: 0 12px;
    color: #333333;
    font-size: 16px;
    font-weight: 500;
    display: flex;
    align-items: center;
    height: 100%;
}

.post-property-currency-separator {
    width: 1px;
    height: 60%;
    background: #E0E0E0;
    margin: 0;
    align-self: center;
}

.post-property-select-container {
    position: relative;
    display: flex;
    align-items: center;
    border: 1px solid #D9D9D9;
    border-radius: 10px;
    background: #FFFFFF;
    transition: all 0.3s;
}

.post-property-select-container:focus-within {
    border-color: #FF5403;
    box-shadow: 0 0 0 3px rgba(255, 84, 3, 0.1);
}

.post-property-select-input {
    flex: 1;
    border: none;
    outline: none;
    padding: 8px 15px;
    padding-top: 20px;
    font-size: 14px;
    color: #333333;
    background: transparent;
    cursor: pointer;
    width: 100%;
}

.post-property-select-input::placeholder {
    color: #D9D9D9;
}

.post-property-select-chevron {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    margin-top: 10px;
    color: #333333;
    font-size: 14px;
    pointer-events: none;
    z-index: 2;
}

.post-property-select {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 3;
    padding: 8px 15px;
    padding-top: 20px;
    border: none;
    background: transparent;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.post-property-select:focus {
    outline: none;
}

.post-property-select-small {
    flex: 0 0 150px;
    min-width: 150px;
}

.post-property-brokerage-wrapper {
    position: relative;
}

.post-property-brokerage-input-group {
    display: flex;
    align-items: stretch;
    border: 1px solid #D9D9D9;
    border-radius: 10px;
    overflow: hidden;
}

.post-property-brokerage-input-group:focus-within {
    border-color: #FF5403;
    box-shadow: 0 0 0 3px rgba(255, 84, 3, 0.1);
}

.post-property-brokerage-separator {
    width: 1px;
    background: #E0E0E0;
    flex-shrink: 0;
}

.post-property-brokerage-select-wrapper {
    flex: 0 0 150px;
    min-width: 150px;
    position: relative;
}

.post-property-brokerage-select-wrapper .post-property-select {
    border: none;
    border-radius: 0;
    padding: 12px 35px 12px 15px;
    padding-top: 12px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    height: 100%;
}

.post-property-brokerage-select-wrapper .post-property-select:focus {
    border: none;
    box-shadow: none;
    outline: none;
}

.post-property-brokerage-input-group .post-property-input-wrapper {
    border: none !important;
    position: relative;
}

.post-property-brokerage-input-group .post-property-input {
    border: none !important;
    border-radius: 0 !important;
    padding-left: 50px !important;
    padding-right: 15px !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    color: #333333 !important;
    background: #FFFFFF !important;
}

.post-property-brokerage-input-group .post-property-input::placeholder {
    color: #D9D9D9 !important;
}

.post-property-brokerage-input-group .post-property-input:focus {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

.post-property-brokerage-input-group .post-property-currency-section {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    z-index: 1;
    background: #FFFFFF;
    height: 100%;
    width: 50px;
    border-radius: 0;
}

.post-property-textarea-wrapper {
    position: relative;
}

.post-property-textarea {
    width: 100%;
    padding: 15px;
    padding-top: 20px;
    border: 1px solid #E0E0E0;
    border-radius: 8px;
    font-size: 14px;
    color: #333333;
    background: #FFFFFF;
    resize: vertical;
    min-height: 120px;
    transition: all 0.3s;
}

.post-property-textarea::placeholder {
    color: #D9D9D9;
}

.post-property-textarea:focus {
    outline: none;
    border-color: #FF5403;
    box-shadow: 0 0 0 3px rgba(255, 84, 3, 0.1);
}

.post-property-ai-button {
    position: absolute;
    bottom: 15px;
    right: 15px;
    background: #000000;
    color: #FFFFFF;
    border: none;
    border-radius: 6px;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s;
}

.post-property-ai-button:hover {
    background: #333333;
}

.post-property-form-actions {
    margin-top: 40px;
    display: flex;
    justify-content: center;
}

.post-property-btn-next {
    background: #FF5403;
    color: #FFFFFF;
    border: none;
    border-radius: 45px;
    padding: 15px 72px;
    font-size: 18px;
    font-weight: 400;
    cursor: pointer;
    transition: all 0.3s;
}

.post-property-btn-next:hover {
    background: #E64903;
    color: #FFFFFF;
}

.post-property-btn-continue {
    display: none;
}

.post-property-help-section {
    width: 851px;
    max-width: 851px;
    margin: 0 auto;
    box-sizing: border-box;
}

.post-property-help-card {
    background: #FFFFFF;
    border-radius: 20px;
    padding: 20px 45px;
    box-sizing: border-box;
}

.post-property-help-content {
    display: flex;
    align-items: center;
    gap: 15px;
}

.post-property-whatsapp-icon {
    font-size: 32px;
    color: #25D366;
    flex-shrink: 0;
}

.post-property-help-text {
    flex: 1;
}

.post-property-help-title {
    font-size: 24px;
    font-weight: 600;
    color: #333333;
    margin-bottom: 0px;
}

.post-property-help-description {
    font-size: 18px;
    color: #666666;
    line-height: 1.5;
    font-weight: 400;
}

.post-property-help-description-mobile {
    display: none;
}

.post-property-help-description-desktop {
    display: inline;
}

.post-property-input-wrapper {
    position: relative;
}

.post-property-input-wrapper svg {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    pointer-events: none;
    width: 20px;
    height: 20px;
}

/* Add padding to input when wrapper has SVG icon */
.post-property-input-wrapper:has(svg) .post-property-input {
    padding-right: 45px;
}

/* Textarea wrapper and AI button */
.post-property-textarea-wrapper {
    position: relative;
}

.post-property-textarea {
    width: 100%;
    resize: vertical;
    margin-bottom: 10px;
    display: block;
}

.post-property-ai-button {
    margin-top: 0;
    margin-left: auto;
    padding: 8px 16px;
    background-color: #333333;
    color: #ffffff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    float: right;
}

.post-property-textarea-wrapper::after {
    content: "";
    display: table;
    clear: both;
}

.post-property-ai-button:hover {
    background-color: #444444;
}

/* Upload Photos Section */
.upload-photos-section {
    padding: 30px 0;
}

.upload-photos-dropzone {
    position: relative;
    border: 2px dashed #333333;
    border-radius: 8px;
    padding: 60px 20px;
    text-align: center;
    background-color: #FFFFFF;
    cursor: pointer;
    transition: all 0.3s;
    margin-bottom: 30px;
}

.upload-photos-dropzone:hover {
    border-color: #FF5403;
    background-color: #FFF5F0;
}

.upload-photos-icon-wrapper {
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.upload-photos-title {
    font-size: 18px;
    font-weight: 600;
    color: #333333;
    margin-bottom: 10px;
}

.upload-photos-instructions {
    font-size: 14px;
    color: #666666;
    line-height: 1.5;
}

.upload-photos-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 1;
}

.upload-photos-thumbnails {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 20px;
}

.upload-photos-thumbnail {
    position: relative;
    width: 120px;
    height: 120px;
    border-radius: 8px;
    overflow: hidden;
}

.upload-photos-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.upload-photos-actions {
    margin-top: 20px;
}

.upload-photos-thumbnail-remove {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: #FF5403;
    border: none;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    z-index: 2;
}

.upload-photos-thumbnail-remove:hover {
    background-color: #E04A00;
}

.upload-photos-later {
    text-align: center;
    margin-bottom: 30px;
}

.upload-photos-later-btn {
    background: none;
    border: none;
    color: #666666;
    font-size: 14px;
    cursor: pointer;
    text-decoration: underline;
    padding: 0;
}

.upload-photos-later-btn:hover {
    color: #FF5403;
}

/* Fix for select input fields - allow manual input */
.post-property-select-wrapper {
    overflow: visible !important;
    position: relative;
}

.post-property-label-inside {
    z-index: 20 !important;
    pointer-events: none;
}

.post-property-select-container {
    position: relative;
    display: flex;
    align-items: center;
    overflow: visible !important;
}

.post-property-select-input {
    position: relative;
    z-index: 10;
    background-color: #fff !important;
    pointer-events: auto !important;
    width: 100%;
    flex: 1;
    cursor: text;
    overflow: visible !important;
    box-sizing: border-box;
    border-radius: inherit;
}

/* Ensure parent containers don't clip borders */
.post-property-form .row,
.post-property-form .col-md-6 {
    overflow: visible !important;
}

.post-property-select {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 1;
    pointer-events: none;
    cursor: pointer;
}

/* Brokerage select - make it visible since it doesn't have input overlay */
.post-property-brokerage-select-wrapper .post-property-select-container {
    position: relative;
}

.post-property-brokerage-select-wrapper .post-property-select,
.post-property-brokerage-select-wrapper .form-select.post-property-select,
.post-property-brokerage-select-wrapper select.post-property-select {
    position: relative;
    opacity: 1 !important;
    pointer-events: auto !important;
    width: 100%;
    height: auto;
    z-index: 1;
    padding-right: 30px;
    /* Make room for chevron icon */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: none;
    border: none !important;
    border-width: 0 !important;
    border-style: none !important;
    border-color: transparent !important;
    outline: none !important;
    box-shadow: none !important;
}

.post-property-brokerage-select-wrapper .post-property-select-container {
    border: none !important;
    outline: none !important;
}

/* Remove border on all states */
.post-property-brokerage-select-wrapper .post-property-select:focus,
.post-property-brokerage-select-wrapper .post-property-select:active,
.post-property-brokerage-select-wrapper .post-property-select:hover,
.post-property-brokerage-select-wrapper .form-select:focus,
.post-property-brokerage-select-wrapper .form-select:active,
.post-property-brokerage-select-wrapper .form-select:hover {
    border: none !important;
    border-width: 0 !important;
    border-style: none !important;
    border-color: transparent !important;
    outline: none !important;
    box-shadow: none !important;
}

.post-property-brokerage-select-wrapper .post-property-select-chevron {
    position: absolute;
    right: 12px;
    top: 30%;
    transform: translateY(-50%);
    z-index: 2;
    pointer-events: none;
    cursor: pointer;
}

.post-property-select-chevron {
    position: absolute;
    right: 12px;
    top: 40%;
    transform: translateY(-50%);
    z-index: 11;
    pointer-events: auto;
    cursor: pointer;
    background-color: transparent;
    padding: 5px 8px;
    margin-right: -8px;
}

/* Ensure input field is always editable and clickable */
.post-property-select-input:focus {
    outline: none;
    border-color: inherit;
    z-index: 10;
}

/* Textarea wrapper and AI button */
.post-property-textarea-wrapper {
    position: relative;
    display: block;
    overflow: visible;
}

.post-property-textarea-wrapper .post-property-textarea {
    width: 100%;
    resize: vertical;
    margin-bottom: 10px !important;
    display: block;
    position: static;
    overflow: visible;
}

.post-property-textarea-wrapper .post-property-ai-button {
    margin-top: 10px !important;
    margin-left: auto;
    margin-right: 26px;
    margin-bottom: 0;
    padding: 6px;
    background-color: #333333;
    color: #ffffff;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 400;
    width: auto;
    position: static;
    float: right;
    clear: both;
}

.post-property-textarea-wrapper::after {
    content: "";
    display: table;
    clear: both;
}

.post-property-ai-button:hover {
    background-color: #444444;
}

/* Upload Photos Section */
.upload-photos-section {
    padding: 10px 0;
}

.upload-photos-dropzone {
    position: relative;
    border: 2px dashed #333333;
    border-radius: 10px;
    padding: 60px 20px;
    text-align: center;
    background-color: #FFFFFF;
    cursor: pointer;
    transition: all 0.3s;
    margin-bottom: 30px;
}

.upload-photos-dropzone:hover {
    border-color: #FF5403;
    background-color: #FFF5F0;
}

.upload-photos-icon-wrapper {
    margin-bottom: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.upload-photos-title {
    font-size: 16px;
    font-weight: 600;
    color: #333333;
    margin-bottom: 5px;
}

.upload-photos-instructions {
    align-self: center;
    align-items: center;
    display: flex;
    justify-content: center;
    margin-left: 30%;
    width: 171px;
    font-size: 12px;
    text-align: center;
    font-weight: 400;
    color: #666666;
    line-height: 1.5;
}

.upload-photos-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 1;
}

.upload-photos-thumbnails {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 20px;
    overflow: visible;
    padding: 10px 10px 0 0;
}

.upload-photos-thumbnail {
    position: relative;
    width: 60px;
    height: 42px;
    border-radius: 5px;
    overflow: visible;
}

.upload-photos-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 5px;
}

.upload-photos-thumbnail-remove {
    position: absolute;
    top: -7px;
    right: -5px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: #FF5403;
    border: none;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    z-index: 10;
}

.upload-photos-thumbnail-remove:hover {
    background-color: #E04A00;
}

.upload-photos-later {
    text-align: center;
    margin-bottom: 10px;
}

.upload-photos-later-btn {
    background: none;
    border: none;
    color: #666666;
    font-size: 14px;
    cursor: pointer;
    text-decoration: none;
    padding: 0;
    font-weight: 500;
}

.upload-photos-later-btn:hover {
    color: #FF5403;
}

/* Amenities Section */
.add-amenities-form-card {
    padding: 40px 50px;
}

/* Sharing Room Form Card - Desktop with 165px margins */
.sharing-rent-form-section .add-amenities-form-card {
    padding: 40px 0;
    margin-bottom: 40px;
}

.sharing-rent-form-section .post-property-form-card {
    margin: 0 165px 40px;
    width: auto;
    max-width: none;
}

.sharing-rent-form-section .post-property-help-section {
    margin-top: 40px;
}

.post-property-form-title {
    color: #F06A37;
    font-weight: 600;
}

.amenities-section {
    margin-bottom: 30px;
}

.amenities-section-title {
    margin-bottom: 15px;
}

.amenities-section-title h3 {
    font-size: 16px;
    font-weight: 400;
    color: #666666;
    margin: 0;
}

.amenities-options {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px;
}

.amenity-checkbox-item,
.amenity-radio-item {
    border: 1px solid #F8F8F8;
    border-radius: 6px;
    padding: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.amenity-checkbox-item input[type="checkbox"],
.amenity-radio-item input[type="radio"] {
    width: 20px;
    height: 20px;
    margin: 0;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border: 2px solid #E0E0E0;
    border-radius: 4px;
    position: relative;
    flex-shrink: 0;
}

.amenity-radio-item input[type="radio"] {
    border-radius: 50%;
}

.amenity-checkbox-item input[type="checkbox"]:checked {
    background-color: #FF5403;
    border-color: #FF5403;
}

.amenity-checkbox-item input[type="checkbox"]:checked::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #FFFFFF;
    font-size: 14px;
    font-weight: bold;
}

.amenity-radio-item input[type="radio"]:checked {
    background-color: #FF5403;
    border-color: #FF5403;
}

.amenity-radio-item input[type="radio"]:checked::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    background-color: #FFFFFF;
    border-radius: 50%;
}

.amenity-checkbox-item label,
.amenity-radio-item label {
    font-size: 16px;
    color: #666666;
    font-weight: 400;
    cursor: pointer;
    margin: 0;
    user-select: none;
}

.amenities-submit-section {
    margin-top: 40px;
    text-align: center;
}

.amenities-submit-btn {
    display: flex;
    background-color: #FF5403;
    color: #FFFFFF;
    border: none;
    text-align: center;
    align-self: center;
    justify-content: center;
    border-radius: 25px;
    padding: 12px 40px;
    font-size: 16px;
    font-weight: 400;
    cursor: pointer;
    transition: background-color 0.3s;
    width: 100%;
    max-width: 185px;
}

.amenities-submit-btn:hover {
    background-color: #FF5403;
    color: #FFFFFF;
}

/* Step 4 — Property Amenities (only sections marked .property-amenities-ui) */
section.property-amenities-ui.post-property-form-section {
    background: rgba(248, 248, 248, 1);
}

.property-amenities-ui .post-property-form-card.add-amenities-form-card {
    width: 851px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 30px;
    padding: 40px 50px;
    background: #ffffff;
    border-radius: 20px;
    box-sizing: border-box;
    border: none;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.06);
}

@media (max-width: 991.98px) {
    .property-amenities-ui .post-property-form-card.add-amenities-form-card {
        padding: 32px 28px;
    }
}

@media (max-width: 575.98px) {
    .property-amenities-ui .post-property-form-card.add-amenities-form-card {
        padding: 24px 18px;
    }
}

.property-amenities-ui .post-property-form-header {
    margin-bottom: 24px;
    text-align: center;
}

.property-amenities-ui .post-property-form-title {
    color: #ff5a0e;
    font-weight: 600;
    font-size: 22px;
    text-align: center;
}

.property-amenities-ui .post-property-form {
    margin: 0px 0px 0px 117px;
    text-align: left;
}

/* Red-pencil alignment: one shared left edge for all fields; title + submit stay centered */
.property-amenities-ui .property-amenities-body {
    text-align: left;
    width: 100%;
    max-width: 100%;
}

.property-amenities-ui .property-amenities-selects {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}

/* Step 4 dropdowns: label on top border (fieldset / notch style) */
.property-amenities-ui .form-group-custom {
    position: relative;
    margin-bottom: 20px;
    width: 473px;
    max-width: 100%;
    border: 1px solid #d9d9d9;
    border-radius: 10px;
    background: #ffffff;
}

.property-amenities-ui .form-label-custom {
    position: absolute;
    left: 14px;
    top: 0;
    transform: translateY(-50%);
    z-index: 2;
    padding: 0 5px;
    margin: 0;
    font-family: "Konnect", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.1;
    color: rgba(102, 102, 102, 1);
    background: rgba(255, 255, 255, 1);
    pointer-events: none;
}

.property-amenities-ui .select-custom.form-select {
    width: 100%;
    max-width: none;
    min-height: 50px;
    height: 50px;
    border: none;
    border-radius: 10px;
    font-family: "Konnect", sans-serif;
    font-size: 14px;
    line-height: 120%;
    color: rgba(102, 102, 102, 1);
    padding: 20px 14px 10px 14px;
    padding-right: 2.25rem;
    box-shadow: none;
    background-color: transparent;
}

.property-amenities-ui .form-group-custom:focus-within {
    border-color: #ff5a0e;
    box-shadow: 0 0 0 0.1rem rgba(255, 90, 14, 0.15);
}

.property-amenities-ui .select-custom.form-select:focus {
    border-color: transparent;
    box-shadow: none;
    outline: none;
}

.property-amenities-ui .property-amenities-body > .amenities-section:first-of-type {
    margin-top: 0;
}

.property-amenities-ui .amenities-section {
    margin-bottom: 0;
}

.property-amenities-ui .amenities-options {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
}

.property-amenities-ui .amenities-section-title {
    margin-top: 25px;
    margin-bottom: 10px;
    text-align: left;
}

.property-amenities-ui .amenities-section-title h3 {
    font-family: "Konnect", sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 120%;
    color: rgba(102, 102, 102, 1);
    margin: 0;
    text-align: left;
}

.property-amenities-ui .property-amenities-check-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 14px 20px;
    margin-bottom: 0;
}

.property-amenities-ui .property-amenity-box {
    flex: 0 0 auto;
    width: fit-content;
    max-width: 100%;
    min-height: 48px;
    height: auto;
    border: 1px solid #e5e5e5 !important;
    border-radius: 9px;
    padding: 8px 12px;
    box-sizing: border-box;
    background-color: #ffffff;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
}

.property-amenities-ui .property-amenity-box label {
    font-family: "Konnect", sans-serif;
    font-size: 16px;
    line-height: 1.15;
    flex: 0 1 auto;
    white-space: nowrap;
}

/* Checked amenity: full chip orange + white label; checkbox = white tile + orange ✓ */





.property-amenities-ui .property-amenity-box:has(input[type="checkbox"]:checked) input[type="checkbox"]:checked::after {
    color: #ffffff;
    font-size: 10px;
}

.property-amenities-ui .amenity-radio-item {
    flex: 0 0 auto;
    background-color: #ffffff;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
}

.property-amenities-ui .property-amenity-box input[type="checkbox"] {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
}

@media (max-width: 360px) {
    .property-amenities-ui .property-amenity-box {
        max-width: 100%;
    }

    .property-amenities-ui .property-amenity-box label {
        white-space: normal;
    }
}

.property-amenities-ui .amenity-checkbox-item input[type="checkbox"]:checked {
    background-color: #ff5a0e;
    border-color: #ff5a0e;
}

.property-amenities-ui .amenity-radio-item input[type="radio"]:checked {
    background-color: #ff5a0e;
    border-color: #ff5a0e;
}

.property-amenities-ui .amenities-submit-section {
    margin-top: 25px;
    text-align: left;
}

.property-amenities-ui .amenities-submit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 185px;
    height: 52px;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding: 0;
    background-color: #ff5a0e;
    color: #ffffff;
    border: none;
    border-radius: 26px;
    font-weight: 400;
    font-size: 16px;
}

.property-amenities-ui .amenities-submit-btn:hover {
    background-color: #e65100;
    color: #ffffff;
}


/* Listing Plan Section - Desktop */
.listing-plan-section {
    padding: 60px 0;
    background-color: #F8F8F8;
}

.listing-plan-main-title {
    font-size: 30px;
    font-weight: 600;
    color: #333333;
    text-align: center;
    margin-bottom: 40px;
}

.listing-plan-cards-wrapper {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 600px;
    margin: 0 auto 40px;
}

.listing-plan-card {
    width: 392px;
    border: 1px solid #3333331A;
    border-radius: 8px;
    padding: 24px;
    background-color: #FFFFFF;
    align-self: center;
}

.listing-plan-card-premium {
    border-color: #3333331A;
}

.listing-plan-content-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.listing-plan-radio {
    width: 20px;
    height: 20px;
    margin: 0;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border: 2px solid #E0E0E0;
    border-radius: 50%;
    position: relative;
    flex-shrink: 0;
    margin-top: 10px;
}

.listing-plan-radio:checked {
    background-color: #FF5403;
    border-color: #FF5403;
}

.listing-plan-radio:checked::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    background-color: #FFFFFF;
    border-radius: 50%;
}

.listing-plan-content {
    flex: 1;
}

.listing-plan-title {
    font-size: 18px;
    font-weight: 600;
    color: #333333;
    margin: 0 0 3px 0;
}

.listing-plan-card-premium .listing-plan-title {
    color: #FF5403;
}

.listing-plan-description {
    font-size: 14px;
    color: #666666;
    margin: 0;
    line-height: 1.6;
}

.listing-plan-benefits {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px dashed #E0E0E0;
}

.listing-plan-benefits-title {
    font-size: 16px;
    font-weight: 600;
    color: #FF5403;
    margin-bottom: 10px;
}

.listing-plan-benefits-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.listing-plan-benefits-list li svg {
    flex-shrink: 0;
}

.listing-plan-benefits-list li {
    display: flex;
    flex-shrink: 0;
    align-items: baseline;
    gap: 10px;
    font-size: 16px;
    color: #666666;
    margin-bottom: 12px;
}

.listing-plan-benefits-list li:last-child {
    margin-bottom: 0;
}

.listing-plan-benefits-list li i {
    color: #FF5403;
    font-size: 16px;
    flex-shrink: 0;
    margin-top: 2px;
}

.listing-plan-actions {
    text-align: center;
    max-width: 1000px;
    margin: 0 auto;
}

.listing-plan-continue-btn {
    background-color: #FF5403;
    color: #FFFFFF;
    border: none;
    border-radius: 8px;
    padding: 14px 60px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s;
    margin-bottom: 20px;
}

.listing-plan-continue-btn:hover {
    background-color: #E04A00;
    color: #FFFFFF;
}

.listing-plan-statistics {
    font-size: 18px;
    color: #666666;
    font-weight: 400;
    margin: 0;
}

.listing-plan-statistics span {
    font-weight: 600;
    color: #333333;
}

/* Desktop Testimonials Section */
.testimonials-section .stars i {
    color: #FF5403;
    font-size: 18px;
    margin-right: 4px;
}

.testimonials-section .tsection-title {
    font-size: 32px;
    font-weight: 600;
    color: #333333;
}

.testimonials-section .text_t {
    color: #FF5403;
}

.testimonial-description {
    font-size: 16px;
    color: #666666;
    max-width: 800px;
    margin: 0 auto;
}

.listing-help-mobile-card-whatsapp {
    border: 2px solid #F8F8F8;
    margin-bottom: 100px;
}

/* Property Insights Section */
.property-insights-section {
    padding: 60px 0;
    background-color: #FFFFFF;
}

.property-insights-title {
    font-size: 26px;
    font-weight: 600;
    display: flex;
    justify-content: center;
    color: #333333;
    margin-bottom: 40px;
    font-family: "Konnect", sans-serif;
}

.insight-summary-cards-container {
    display: flex;
    justify-content: flex-start;
    gap: 20px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.insight-summary-card {
    position: relative;
    background: #FFFFFF;
    border-radius: 12px;
    padding: 33px 30px 0px 30px;
    width: 345px;
    height: 143px;
    flex-shrink: 0;
}

.card-border {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.insight-summary-card>*:not(svg) {
    position: relative;
    z-index: 1;
}

.insight-card-title {
    font-size: 1rem;
    font-weight: 400;
    color: #666666;
    margin-bottom: -10px;
    font-family: "Konnect", sans-serif;
}

.insight-card-content {
    display: flex;
    align-items: center;
    gap: 160px;
}

.insight-card-content svg {
    margin-bottom: 20px;
}

.insight-number {
    font-size: 56px;
    font-weight: 600;
    color: #666666;
    font-family: "Konnect", sans-serif;
}

.insight-icon {
    font-size: 2.5rem;
    color: var(--primary-orange);
}

.insight-whatsapp-icon {
    color: #25D366;
}

.insight-details-list {
    background: #FFFFFF;
    border-radius: 12px;
    padding: 0 0 20px 0;
    overflow: hidden;
}

.insight-list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #F7F7F7;
    padding: 20px;
    border-radius: 19px 19px 0 0;
    margin-bottom: 10px;
}

.insight-list-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-dark);
    margin: 0;
    font-family: "Konnect", sans-serif;
}

.insight-see-all {
    font-size: 0.9rem;
    color: var(--primary-orange);
    text-decoration: none;
    font-weight: 500;
    font-family: "Konnect", sans-serif;
}

.insight-see-all:hover {
    text-decoration: underline;
    color: var(--primary-orange);
}

.insight-list-items {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0 20px;
}

.insight-list-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
}

.insight-list-item:last-child {
    border-bottom: none;
}

.insight-profile-img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background-color: #E0E0E0;
    border: 1px solid #D0D0D0;
}

.insight-item-content {
    flex: 1;
    min-width: 0;
}

.insight-item-name {
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-dark);
    margin-bottom: 0px;
    font-family: "Konnect", sans-serif;
}

.insight-item-phone {
    font-size: 14px;
    font-weight: 400;
    color: #333333;
    font-family: "Konnect", sans-serif;
    margin-bottom: 4px;
}

.insight-whatsapp-below {
    position: static !important;
    margin-left: 0 !important;
    margin-top: 4px;
}

.insight-whatsapp-below svg {
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
    flex-shrink: 0;
}

.insight-item-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    margin-left: auto;
}

.insight-item-icon-text {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: 200px;
    flex-shrink: 0;
}

.insight-small-icon {
    font-size: 0.9rem;
    color: var(--primary-orange);
}

.insight-item-icon-text span {
    font-size: 0.85rem;
    color: var(--text-dark);
    font-weight: 500;
    font-family: "Konnect", sans-serif;
}

.insight-item-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
    margin-left: auto;
    flex-shrink: 0;
}

.insight-item-date,
.insight-item-time {
    font-size: 0.8rem;
    color: var(--text-light);
    font-family: "Konnect", sans-serif;
}

.insight-call-icon {
    font-size: 1rem;
    color: var(--text-light);
}

.insight-whatsapp-small-icon {
    font-size: 0.9rem;
    color: #25D366;
}

.insight-ellipsis {
    font-size: 1.2rem;
    color: var(--text-light);
    cursor: pointer;
    flex-shrink: 0;
}

.insight-ellipsis:hover {
    color: var(--text-dark);
}

.view-properties-location {
    margin-bottom: 5px;
}

.view-properties-button {
    border-radius: 25px;
}

.view-properties-content {
    padding: 18px 15px 15px;
    background: var(--white);
    border-radius: 0 0 8px 8px;
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.view-properties-image-wrapper {
    height: 220px;
}

.view-properties-image-wrapper svg {
    position: absolute;
    right: 10px;
    top: 10px;
}

/* Profile Navigation Tabs */
.profile-nav-tabs {
    display: flex;
    gap: 0;
    background: transparent;
    border-bottom: 1px solid #E0E0E0;
}

.profile-nav-tab {
    background: transparent;
    border: none;
    padding: 12px 24px;
    font-size: 18px;
    font-weight: 500;
    color: #333333;
    font-family: "Konnect", sans-serif;
    cursor: pointer;
    position: relative;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 8px 8px 0 0;
}

.profile-nav-tab i {
    font-size: 18px;
}

.profile-nav-tab:hover {
    color: #333333;
    background: #F5F5F5;
}

.profile-nav-tab.active {
    color: #333333;
    font-weight: 500;
    background: var(--primary-orange);
    color: #FFFFFF;
}

.profile-nav-tab.active:hover {
    background: var(--primary-orange);
    color: #FFFFFF;
}

/* SVG Icon Colors - Inactive tabs (black) */
.profile-nav-tab svg path {
    fill: #333333;
}

/* SVG Icon Colors - Active tab (white) */
.profile-nav-tab.active svg path {
    fill: #FFFFFF;
}

/* Upgrade Notification Banner */
.upgrade-notification-banner {
    background: #FFE7DB;
    border-radius: 32px;
    padding: 6px 10px;
    width: 899px;
    max-width: 100%;
    height: 64px;
    margin: 0 auto;
}

.upgrade-notification-banner p {
    font-size: 14px;
    color: #333333;
    font-family: "Konnect", sans-serif;
    margin: 0;
    flex: 1;
}

.btn-upgrade-now {
    height: 52px;
    background: var(--primary-orange);
    color: #FFFFFF;
    border: none;
    border-radius: 26px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 500;
    font-family: "Konnect", sans-serif;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: background 0.3s ease;
    white-space: nowrap;
}

.btn-upgrade-now:hover {
    background: #E04A00;
    color: #FFFFFF;
}

.btn-upgrade-now i {
    font-size: 14px;
}

/* Buying Listing Badges - Position at top left on all images */
.buying-listing-gallery-main {
    position: relative;
}

.buying-listing-badges-wrapper {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.buying-listing-rera-badge,
.buying-listing-brokerage-badge {
    position: absolute;
    z-index: 10;
}

.buying-listing-brokerage-badge {
    transform: translateX(79%);
}

/* Sharing Room Rent Details Form */
@media (min-width: 768px) {
    .sharing-rent-form {
        margin: 0 165px;
    }
}

.sharing-room-card {
    background: #FFFFFF;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 20px;
    box-shadow: 10px 10px 20px 0px #0000001A;

}

.sharing-room-title {
    font-size: 18px;
    font-weight: 600;
    color: #333333;
    margin-bottom: 20px;
    font-family: "Konnect", sans-serif;
}

.sharing-room-form-group {
    margin-bottom: 20px;
    position: relative;
}

.sharing-room-label {
    position: absolute;
    top: -8px;
    left: 12px;
    font-size: 12px;
    font-weight: 400;
    color: #666666;
    background: #FFFFFF;
    padding: 0 4px;
    z-index: 1;
    font-family: "Konnect", sans-serif;
}

.sharing-room-input-wrapper {
    display: flex;
    align-items: center;
    border: 1px solid #E0E0E0;
    border-radius: 8px;
    padding: 0 12px;
    background: #FFFFFF;
    height: 48px;
    position: relative;
}

.sharing-room-currency {
    font-size: 16px;
    font-weight: 500;
    color: #333333;
    margin-right: 8px;
    font-family: "Konnect", sans-serif;
}

.sharing-room-separator {
    font-size: 16px;
    color: #E0E0E0;
    margin-right: 8px;
}

.sharing-room-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 14px;
    color: #333333;
    font-family: "Konnect", sans-serif;
    background: transparent;
}

.sharing-room-input::placeholder {
    color: #999999;
}

.sharing-room-checkbox-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sharing-room-checkbox {
    width: 20px;
    height: 20px;
    cursor: pointer;
    accent-color: var(--primary-orange);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 2px solid #E0E0E0;
    border-radius: 4px;
    background: #FFFFFF;
    position: relative;
    transition: all 0.3s ease;
}

.sharing-room-checkbox:checked {
    background: var(--primary-orange);
    border-color: var(--primary-orange);
}

.sharing-room-checkbox:checked::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.sharing-room-checkbox-label {
    font-size: 14px;
    font-weight: 400;
    color: #676767;
    cursor: pointer;
    font-family: "Konnect", sans-serif;
    margin: 0;
}

.sharing-room-form-actions {
    margin-top: 30px;
    text-align: center;
}

.btn-sharing-room-next {
    background: var(--primary-orange);
    color: #FFFFFF;
    border: none;
    border-radius: 8px;
    padding: 14px 48px;
    font-size: 16px;
    font-weight: 500;
    font-family: "Konnect", sans-serif;
    cursor: pointer;
    transition: background 0.3s ease;
}

.btn-sharing-room-next:hover {
    background: #E04A00;
    color: #FFFFFF;
}

.view-properties-card-item {
    width: 100%;
}

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-top: 5%;
}

.empty-state svg {
    max-width: 100%;
    height: auto;
}

.empty-text {
    font-size: 14px;
    color: #666;
    margin-bottom: 10%;
}

.buying-report-illustration {
    text-align: center;
    padding: 20px 0;
    min-height: 170px;
    width: 195px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    left: 70px;
}

.buying-listing-rera-badge-box {
    padding: 5px 7px;
}

.buying-listing-brokerage-badge-box {
    padding: 6px 7px;
}

.mobile-listing-detail-main-content {
    min-height: 100%;
}

/* ===== PAGE WRAPPER ===== */
.empty-wrapper {
    margin: 60px auto;
    padding: 0 24px;
}

/* ===== TITLE ===== */
.page-title {
    font-size: 26px;
    font-weight: 600;
    margin-bottom: 24px;
    line-height: 100%;
}

/* ===== OUTER EMPTY BOX ===== */
.empty-box {
    width: 100%;
    min-height: 800px;
    border: 1px solid #ededed;
    border-radius: 40px;
    background: #ffffff;

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

/* ===== CENTER CONTENT ===== */
.empty-content {
    text-align: center;
}

/* ===== ICON ===== */
.empty-icon {
    margin-bottom: 16px;
}

/* ===== TEXT ===== */
.empty-text {
    font-size: 16px;
    font-weight: 400;
    line-height: 100%;
    color: #777777;
}

.enquiry-top {
    background: linear-gradient(#f8f8f8, #fef1ec);
    padding: 60px 20px 120px;
}

.enquiry-top h2 {
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 10px;
    color: #333333;
}

.enquiry-top p {
    max-width: 713px;
    height: 56px;
    margin: 0 auto;
    font-size: 18px;
    font-weight: 400;
    line-height: 156%;
    letter-spacing: 0.2px;
    color: #777777;
}

/* =========================
     BOTTOM SECTION (ROUNDED)
  ========================= */
.enquiry-bottom {
    background: #f8f8f8;
    border-top-left-radius: 40px;
    border-top-right-radius: 40px;
    margin-top: -80px;
    padding: 120px 20px 140px;
}

/* =========================
     FORM CARD
  ========================= */
.enquiry-card {
    width: 755px;
    height: 654px;
    background: #ffffff;
    border-radius: 20px;
    padding: 40px 36px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}

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

.enquiry-card .floating-field {
    text-align: center;
    position: relative;
    margin-top: 30px;
}

.enquiry-card .floating-field input,
.floating-field textarea,
.floating-field .phone-field {
    width: 515px;
    height: 68px;
    border: 1px solid #dddddd;
    border-radius: 10px;
    padding: 16px 14px;
    font-size: 18px;
    font-weight: 400;
    line-height: 100%;
    letter-spacing: 3%;
    outline: none;
}

.enquiry-card .floating-field textarea {
    resize: none;
    height: 188px;
}

/* Label inside border */
.enquiry-card .floating-field label {
    position: absolute;
    top: -10px;
    left: 105px;
    background: #ffffff;
    padding: 0 6px;
    font-size: 18px;
    font-weight: 400;
    line-height: 100%;
    color: #333333;
}

/* Focus state */
.enquiry-card .floating-field input:focus,
.floating-field textarea:focus {
    border-color: #FF5403;
}

/* PHONE FIELD WRAPPER */


/* PHONE INPUT CONTAINER */
.enquiry-card .phone-input {
    margin-left: 85px;
    display: flex;
    align-items: center;
    width: 515px;
    border: 1px solid #dddddd;
    border-radius: 10px;
    padding: 0 12px;
    background: #ffffff;
}

/* COUNTRY CODE BUTTON */
.enquiry-card .country-code {
    background: transparent;
    border: none;
    font-size: 18px;
    font-weight: 500;
    color: #333333;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

/* ARROW */


/* DIVIDER */
.enquiry-card .phone-input .divider {
    width: 2px;
    height: 26px;
    background: #333333;
    margin: 0 12px;
}

/* PHONE INPUT */
.enquiry-card .phone-input input {
    border: none;
    outline: none;
    font-size: 16px;
    flex: 1;
}

/* PLACEHOLDER STYLE */
.enquiry-card .phone-input input::placeholder {
    color: #999999;
}

/* FLOATING LABEL */
.enquiry-card .phone-field label {
    position: absolute;
    top: -12px;
    left: 105px;
    background: #ffffff;
    padding: 0 6px;
    font-size: 18px;
    font-weight: 400;
    line-height: 100%;
    letter-spacing: 3%;
    color: #333333;
}

/* FOCUS STATE */
.enquiry-card .phone-input:focus-within {
    border-color: #FF5403;
}

/* =========================
     BUTTON
  ========================= */
.send-btn {

    width: 193px;
    height: 52px;
    display: block;
    margin: 60px auto 0;
    padding: 10px 28px;
    background: #FF5403;
    color: #ffffff;
    border: none;
    border-radius: 26px;
    font-size: 18px;
    font-weight: 500;
    cursor: pointer;
}


/* PAGE */
.profile-page {
    max-width: 1200px;
    margin: 80px auto;
    padding: 0 20px;
}

.page-title {
    font-size: 26px;
    font-weight: 600;
    margin-bottom: 6px;
    color: #333333;
}

.page-subtitle {

    font-size: 14px;
    font-weight: 400;
    color: #676767;
    margin-bottom: 30px;
    line-height: 22px;
    letter-spacing: 0.4px;
}



/* =========================
     AVATAR
  ========================= */
.avatar-wrap {
    position: relative;
    width: 140px;
    margin-bottom: 40px;
}

.avatar-circle {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: #FFF8F5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 42px;
    color: #333;
}

.avatar-camera {
    position: absolute;
    bottom: -8px;
    right: 10px;
    width: 34px;
    height: 34px;
    background: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    /* 🔥 soft shade */
    box-shadow: 4px 5px 8px rgba(184, 169, 169, 0.1);
}

/* =========================
     FLOATING INPUT FIELD
  ========================= */
.profile-form .floating-field {
    position: relative;
    width: 100%;
}

.profile-form .floating-field input,
.profile-form .floating-field textarea {
    width: 100%;
    height: 65px;
    border-radius: 10px;
    border: 1px solid #CCCCCC;
    padding: 14px 12px 14px 30px;
    font-size: 18px;
    font-weight: 400;
    outline: none;
    background: #fff;
}

.profile-form .floating-field input::placeholder {
    font-weight: 600;
    color: #CCCCCC;
}

.profile-form .location-field input,
.profile-form .location-field textarea {
    padding: 17px 12px 14px 57px;

}

.profile-form .floating-field input:hover {
    border: 1px solid #FF5403;
}

.profile-form .floating-field textarea {
    height: auto;
    min-height: 150px;
    resize: none;
    padding-top: 16px;
}

/* FLOATING LABEL */
.profile-form .floating-field label {
    position: absolute;
    top: -12px;
    left: 25px;
    background: #ffffff;
    padding: 0 6px;
    font-size: 18px;
    font-weight: 400;
    color: #333333;
    pointer-events: none;
}

/* INPUT ICON INSIDE FIELD */
.profile-form .floating-field .input-icon {
    position: absolute;
    left: 30px;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
}

.profile-form .floating-field .input-icon+input {
    padding-left: 36px;
}

/* GENDER SECTION */

.gender-wrap {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
}

.gender-label {
    font-size: 18px;
    font-weight: 400;
    margin-bottom: 10px;
    color: #333333;
}

.gender-options {
    display: flex;
    gap: 24px;
    align-items: center;
}

/* Hide default radio */
.gender-option input {
    display: none;
}

/* Custom radio */
.gender-option {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 400;
    color: #333333;
    cursor: pointer;
}

/* Radio circle */
.gender-option span {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid #FF5403;
    display: inline-block;
    position: relative;
}

/* Checked dot */
.gender-option input:checked+span::after {
    content: "";
    width: 8px;
    height: 8px;
    background: #FF5403;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* =========================
     POLICY
  ========================= */
.policy input {
    width: 20px;
    height: 20px;

}

.policy {
    display: flex;
    gap: 10px;
    align-items: center;
    margin: 24px 0;
    font-size: 16px;
    font-weight: 400;
    color: #676767;
}

.policy a {
    font-weight: 600;
    color: #676767;
    text-decoration: none;
}

/* =========================
     BUTTON
  ========================= */
.update-btn {
    margin-top: 80px;
    background: #FF5403;
    color: #fff;
    border: none;
    padding: 12px 28px;
    border-radius: 26px;
    font-size: 18px;
    font-weight: 400;
    cursor: pointer;
}

/* =========================
     DELETE
  ========================= */
.delete-text {
    margin-top: 30px;
    font-size: 14px;
    font-weight: 400;
    color: #676767;

}

.delete-text a {
    font-weight: 600;
    color: #FF5403;
    text-decoration: none;
}

.mobile-billing {
    display: none;
}

/* ===== WRAPPER ===== */
.billing-wrapper {
    margin: 60px auto;
}

/* ===== TITLE ===== */
.billing-title {
    font-size: 26px;
    font-weight: 600;
    line-height: 100%;
    margin-bottom: 40px;
    color: #111;
}

/* ===== OUTER BOX ===== */
.billing-box {
    border: 1px solid #e6e6e6;
    border-radius: 16px;
    padding: 24px;
    background: #ffffff;
}

/* ===== ROW CARD ===== */
.billing-row {
    height: 135px;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    background: #f9f9f9;
    border-radius: 12px;
    padding: 20px 24px;
    margin-bottom: 16px;
    align-items: center;
    gap: 80px;

}

/* ===== COLUMN ===== */
.col-item {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-left: 35px;
}

.billing-wrapper .label {
    font-size: 18px;
    font-weight: 600;
    color: #000000;
    line-height: 100%;
}

.value {
    font-size: 18px;
    font-weight: 500;
    line-height: 100%;
    color: #333333;
}


/* ===== ACTION ===== */
.action {
    align-items: flex-end;
    margin-right: 35px;
}

.invoice-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 18px;
    color: #333333;
    text-decoration: none;
    font-weight: 500;
}


/* ===== PAGINATION ===== */


.pagination-wrap {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 32px;
}

.page-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid #ddd;
    background: #fff;
    font-size: 12px;
    cursor: pointer;

}

.page-btn.active {
    background: #111;
    color: #fff;
    border-color: #111;
}

.dots {
    font-size: 14px;
    color: #777;
}

.nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

/* Left corner */
.nav-btn.prev {
    left: 30px;
}

/* Right corner */
.nav-btn.next {
    right: 30px;
}

/* =========================
     TOP SECTION
  ========================= */
.student-top {
    height: 282px;
    background: linear-gradient(180deg, #F06A37 0%, #BE3704 100%);
    padding: 70px 20px 140px;
    text-align: center;
}

.student-top h2 {
    font-size: 36px;
    font-weight: 700;
    line-height: 120%;
    color: #ffffff;
    margin-bottom: 10px;
}

.student-top p {
    max-width: 713px;
    height: 28px;
    margin: 0 auto;
    font-size: 18px;
    font-weight: 400;
    color: #ffece3;
}

/* =========================
     BOTTOM SECTION
  ========================= */
.student-bottom {
    height: 871px;
    background: #f8f8f8;
    margin-top: -80px;
    border-top-left-radius: 40px;
    border-top-right-radius: 40px;
    padding: 120px 20px 140px;
}

/* =========================
     CARD
  ========================= */
.student-card {
    width: 815px;
    height: 691px;
    background: #ffffff;
    border-radius: 20px;
    padding: 40px 36px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}

/* =========================
     FLOATING FIELDS
  ========================= */
.floating-field {

    position: relative;
    text-align: center;
    margin-bottom: 30px;
}

.floating-field select,
.floating-field textarea {
    width: 515px;
    height: 88px;
    border: 1px solid #dddddd;
    border-radius: 10px;
    padding: 16px 14px;
    font-size: 18px;
    outline: none;
    background: #ffffff;
}

.floating-field textarea {
    height: 120px;
    resize: none;
}

/* FLOATING LABEL */
.floating-field label {
    position: absolute;
    top: -13px;
    left: 130px;
    background: #ffffff;
    padding: 0 6px;
    font-size: 18px;
    font-weight: 500;
    line-height: 120%;
    color: #333333;
}

/* FOCUS */
.floating-field select:focus,
.floating-field textarea:focus {
    border-color: #ff5403;
}

/* =========================
     UPLOAD BOX
  ========================= */
.upload-box {
    width: 515px;
    height: 183px;
    border: 1px dashed #dddddd;
    border-radius: 10px;
    padding: 40px 20px;
    text-align: center;
    margin-left: 115px;
    margin-bottom: 40px;
}

.upload-icon {
    font-size: 28px;
    margin-bottom: 10px;
}

.upload-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 4px;
}

.upload-sub {
    font-size: 14px;
    color: #777777;
}

/* =========================
     BUTTON
  ========================= */
.submit-btn {
    display: block;
    margin: 0 auto;
    background: #ff5403;
    color: #ffffff;
    border: none;
    padding: 12px 36px;
    border-radius: 30px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
}

.submit-btn:hover {
    background: #ff5403;
    color: #ffffff;
}


.select-field select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.select-field {
    position: relative;
}

.select-field::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 140px;
    transform: translateY(-50%);
    width: 20px;
    height: 12px;

    /* Custom arrow SVG (dark & bold) */
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='12' viewBox='0 0 20 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L10 10L19 1' stroke='%23333333' stroke-width='2.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
}


/* ===== MAIN WRAPPER ===== */
.emi-wrapper {
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 24px;
    display: flex;
    gap: 80px;
    align-items: flex-start;
}

/* ===== LEFT ===== */
.emi-left {
    flex: 1 1 58%;
    max-width: 760px;
}

.emi-heading {
    font-size: 30px;
    font-weight: 500;
    margin-bottom: 20px;
    line-height: 100%;
    color: #333333;
}

/* CARD */
.emi-card {
    width: 100%;
    height: auto;
    border: 1px solid #666666;
    border-radius: 40px;
    padding: 40px;
}

/* FIELDS */


.emi-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
    margin-top: 20px;
}

.label {
    font-size: 20px;
    font-weight: 500;
    color: #333333;
}

.badge {
    font-size: 20px;
    font-weight: 500;
    padding: 4px 8px;
    background: #fff5f0;
    color: #333333;
    line-height: 100%;
    border-radius: 6px;
}

/* SLIDER */

input[type="range"] {
    --fill: 50%;
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 4px;
    background: transparent;
    cursor: pointer;
}

/* ===== WEBKIT TRACK ===== */
input[type="range"]::-webkit-slider-runnable-track {
    height: 4px;
    background: linear-gradient(to right,
            #ff5403 0%,
            #ff5403 var(--fill),
            #f8f8ff var(--fill),
            #f8f8ff 100%);
    border-radius: 4px;
}

/* ===== WEBKIT THUMB ===== */
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    background: #ffffff;
    border: 2px solid #dddddd;
    border-radius: 50%;
    margin-top: -5px;
}

/* ===== FIREFOX ===== */
input[type="range"]::-moz-range-track {
    height: 4px;
    background: #f8f8ff;
    border-radius: 4px;
}

input[type="range"]::-moz-range-progress {
    height: 4px;
    background: #ff5403;
    border-radius: 4px;
}

input[type="range"]::-moz-range-thumb {
    width: 14px;
    height: 14px;
    background: #ffffff;
    border: 2px solid #dddddd;
    border-radius: 50%;
}



/* RESULTS */
.emi-results {
    margin-top: 40px;
    margin-bottom: 10px;
    color: #000000;
}

.emi-results div {
    display: flex;
    justify-content: space-between;
    font-size: 18px;
    font-weight: 500;
    line-height: 100%;
    color: #000000;
    margin-bottom: 25px;

}

/* ===== RIGHT ===== */
.emi-right {

    margin-top: 120px;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.pie-wrap svg {
    width: 100%;
    max-width: 360px;
    height: auto;
}

/* LEGEND */
.pie-legend {
    margin-top: 10px;
    display: flex;
    gap: 100px;
    font-size: 12px;
}



/* BOTTOM SVG */
.pie-bottom-svg {

    margin-top: 10px;
}


/* ================= EMI CONTENT SECTION ================= */

.emi-content {

    max-width: 1200px;
    margin: 40px auto;
    padding: 0 24px;

    align-items: flex-start;
    color: #5a5a5a;
    font-size: 14px;
    line-height: 1.75;
}

.emi-content p {
    margin-bottom: 14px;
}

.emi-content h3 {
    margin-top: 28px;
    margin-bottom: 10px;
    font-size: 16px;
    font-weight: 600;
    color: #111;
}

.emi-content h4 {
    margin-top: 18px;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 600;
    color: #111;
}

.emi-content ul {
    margin-top: 10px;
    margin-left: 18px;
}

.emi-content ul li {
    margin-bottom: 6px;
}

.emi-content .formula {
    margin: 12px 0;
    font-weight: 500;
    color: #111;
}

/* ===== LAYOUT ===== */
.settings-wrapper {
    max-width: 1200px;
    margin: 40px auto;
    display: flex;
    gap: 10px;
}

/* ===== SIDEBAR ===== */
.settings-sidebar {
    width: 295px;
    height: 210px;
    background: #ffffff;
    border-radius: 10px;
}

.sidebar-item {
    width: 295px;
    height: 70px;
    padding: 14px 16px;
    border: none;
    background: #ffffff;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: 0.2s;
}


.sidebar-item:hover,
.sidebar-item.active {
    background: #feefe9;
}

.item-left {
    display: flex;
    gap: 10px;
    align-items: center;
    font-size: 16px;
    font-weight: 500;
    color: #333333;
}

.arrow {
    font-size: 18px;
}

/* ===== CONTENT ===== */
.settings-content {
    flex: 1;
}

.content-card {
    background: #fff;
    border-radius: 20px;
    padding: 60px;
}

/* ===== PANELS ===== */
.tab-panel {
    display: none;
}

.tab-panel.active {
    display: block;
}

.tab-panel h2 {
    color: #ff5403;
    font-size: 26px;
    font-weight: 600;
    margin-bottom: 15px;
}

.divider {
    height: 1px;
    background: #cccccc;
    margin-bottom: 25px;
}

/* ===== DELETE ACCOUNT ===== */
.danger-title {
    color: #ff5403;
    font-size: 26px;
    font-weight: 600;
    line-height: 170%;
}

.delete-text {
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 12px;
    letter-spacing: 0.5%;
    color: #666666;
    line-height: 150%;
}

.delete-note {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 20px;
    color: #333333;
}

.delete-input {
    width: 100%;
    height: 157px;
    border-radius: 10px;
    background-color: #f5f5f5;
    padding: 30px;
    font-size: 16px;
    font-weight: 400;
    color: #666666;
    margin-bottom: 16px;
    resize: none;
}

.delete-btn {
    background: #ff5403;
    color: #fff;
    font-size: 18px;
    font-weight: 400;
    border: none;
    padding: 10px 22px;
    border-radius: 26px;
    cursor: pointer;
    width: 216px;
    height: 52px;
    margin-top: 40px;

}

.mobile-tabs {
    display: none;
}

/* ===== BACKGROUND SECTION ===== */
.broker-profile-page {
    background-color: #F5F5F5;
}

.seller-section {
    width: 100%;
    height: 450px;
    background: #f5f5f5;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ===== CARD ===== */
.seller-section .seller-card {
    width: 1165px;
    height: 349px;
    background: #ffffff;
    border-radius: 30px;
    display: flex;
    padding: 45px;
    gap: 40px;
    margin-left: 5%;
}

.broker-profile-type {
    text-transform: none;
    font-size: 16px;
}

/* ===== LEFT SIDE ===== */
.seller-section .seller-left {
    display: flex;
    gap: 24px;
    flex: 1;
}

.seller-section .seller-img {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    object-fit: cover;
}

.seller-section .seller-info h3 {
    display: block;
    font-size: 24px;
    font-weight: 700;
    color: #333333;
    line-height: 100%;
    font-style: bold;
}

.seller-section .location {
    margin-top: 10px;
    font-size: 16px;
    font-weight: 400;
    line-height: 100%;
    font-style: regular;
    color: #333333;
    margin: 6px 0 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}


.seller-section .description {
    margin-top: 20px;
    font-size: 14px;
    font-weight: 400;
    font-style: regular;
    line-height: 160%;
    letter-spacing: 0.6px;
    color: #555;
    max-width: 520px;
}

.seller-section .seller-actions {
    display: flex;
    gap: 14px;
    margin-top: 30px;
}

.seller-section .btn {
    padding: 0 22px;
    border-radius: 26px;
    font-size: 16px;
    font-weight: 400;
    font-style: regular;
    line-height: 104%;
    cursor: pointer;
    border: none;
}

.seller-section .btn.primary {
    width: 211px;
    height: 51px;
    background: #F06A37;
    color: #ffffff;
}


.seller-section .btn.outline {
    width: 191px;
    height: 51px;
    background: #ffffff;
    border: 1px solid #f06a37;
    color: #f06a37;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}


.seller-section .note {
    font-size: 12px;
    font-weight: 400;
    font-style: regular;
    line-height: 100%;
    letter-spacing: 0.4px;
    color: #676767;
    margin-top: 12px;
}

.seller-section .note span {

    color: #333333;
}

/* ===== DIVIDER ===== */
.seller-section .divider1 {
    width: 1.5px;
    background: #cccccc;
}

/* ===== RIGHT SIDE ===== */
.seller-section .seller-right {
    margin-top: -160px;
    width: 260px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0px;
    font-size: 16px;
    font-weight: 400;
    font-style: regular;
    line-height: 100%;
    letter-spacing: 0%;
    color: #666666;
}

.seller-section .rating {
    margin-top: 8px;
    display: flex;
    align-items: center;

}

.seller-section .rating span {
    color: #666666;
    margin-left: 10px;
}

.seller-section .whatsapp-desktop-icon {
    display: block;
}

.seller-section .whatsapp-mobile-icon {
    display: none;
}

.seller-section .btn.primary .call-icon {
    display: none;
}

.seller-section .tick-mobile-icon {
    display: none;
}

.privacy-policy-heading {
    font-weight: 500;
    font-size: 22px;
    color: #333333;
    line-height: 170%;
}

.privacy-policy-text {
    color: #666666;
}

.privacy-policy-page {
    background: #F5F5F5;
}

:root {
    --bg-dark: #0f0f0f;
    --card-dark: #141414;
    --text-muted: #b5b5b5;
    --accent: #F06A37;
}

/* ================= GLOBAL ================= */
.plan-zero-brokerage {
    background: #0F0F0F;
    color: #fff;
    font-family: Inter, system-ui, sans-serif;
}

/* ================= HERO ================= */
.hero-section-plan-design {
    padding: 120px 0 0;
    background: linear-gradient(0deg, #1C1C1C 0%, #0F0F0F 100%);
    position: relative;
    display: flex;
    flex-direction: column;
    padding-bottom: 37.5px;
    border-radius: 30px;
    margin: 0 auto;
    width: 85%;
    max-width: 1690px;
    overflow: visible;
}

.hero-section-plan-design .container {
    flex: 0 0 auto;
    padding-bottom: 150px;
    position: relative;
    width: 1690px;
    max-width: 100%;
    box-sizing: border-box;
}

/* Relax & Assured */
.hero-section-plan-design .hero-badge-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 24px;
}

.hero-section-plan-design .hero-badge-wrap .line {
    width: 63px;
    height: 4px;
    background: linear-gradient(to right, #D9D9D9, #101010);
}

.hero-section-plan-design .hero-badge-wrap .line:first-child {
    background: linear-gradient(to right, #101010, #D9D9D9);
}

.hero-section-plan-design .hero-badge {
    padding: 8px 26px;
    border-radius: 40px;
    font-size: 22px;
    font-weight: 400;
    color: #ffffff;
    background: transparent;
    border-top: 1px solid #ffffff;
    border-bottom: 1px solid #ffffff;
    border-left: none;
    border-right: none;
}

/* Headings */
.hero-section-plan-design .hero-title {
    font-family: 'Konnect', system-ui, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 76px;
    line-height: 104%;
    letter-spacing: -1%;
    margin-bottom: 24px;
}

.hero-section-plan-design .hero-title span {
    font-family: 'Konnect', system-ui, sans-serif;
    font-weight: 600;
    font-style: italic;
    font-size: 76px;
    line-height: 104%;
    letter-spacing: -1%;
    color: #FF5403;
}

.hero-section-plan-design .hero-subtitle {
    font-family: 'Konnect', system-ui, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 20px;
    line-height: 104%;
    letter-spacing: -1%;
    color: #ffffff;
    margin-bottom: 36px;
}

/* Button */
.hero-section-plan-design .hero-btn {
    background: #FF5403;
    border: none;
    outline: none;
    color: #fff;
    width: 455px;
    height: 56px;
    border-radius: 28px;
    font-size: 18px;
    font-weight: 600;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    opacity: 1;
}

.hero-section-plan-design .hero-btn small {
    display: block;
    font-size: 16px;
    font-weight: 500;
}

/* Bottom strip */
.hero-section-plan-design .hero-strip {
    width: 607px;
    /* exact */
    height: 75px;
    /* exact */
    position: absolute;
    bottom: -37.5px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 400;
    font-size: 22px;
    color: #ffffff;
    background: #0F0F0F;
    letter-spacing: -1px;
    border-radius: 400px;
    /* exact */
    opacity: 1;
    /* exact */
    z-index: 1;
    text-align: center;
}

/* ================= SECTIONS ================= */
.section-title-plan-design {
    text-align: center;
    font-size: 28px;
    font-weight: 700;
    color: var(--accent);
    position: relative;
    z-index: 1;
}

.benefits-section-plan-design .section-title-plan-design {
    transform: translateY(70px);
    margin-bottom: 80px;
}

.works-section-plan-design .section-title {
    display: flex;
    justify-content: center;
    margin-bottom: -15px;
    text-align: center;
    font-size: 28px;
    font-weight: 700;
    color: var(--accent);
    position: relative;
    z-index: 1;
}

.works-section-plan-design .row {
    margin-top: 30px;
}

.benefits-section-plan-design .section-title-plan-design::before {
    content: "All The Benefits";
    position: absolute;
    top: calc(50% - 25px);
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Konnect', system-ui, sans-serif;
    font-weight: 700;
    font-style: italic;
    font-size: 140px;
    line-height: 104%;
    letter-spacing: 0%;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.08);
    z-index: -1;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0.5;
}

/* ================= BENEFITS ================= */
.benefits-section-plan-design {
    padding: 90px 0 5px;
}

.benefits-section-plan-design .benefit-card {
    background: var(--card-dark);
    padding: 28px;
    border-radius: 16px;
    height: 100%;
}

.benefits-section-plan-design .benefit-card h5 {
    font-size: 22px;
    font-weight: 600;
    font-style: normal;
    color: var(--accent);
    margin-top: 18px;
}

.benefits-section-plan-design .benefit-card p {
    font-size: 16px;
    font-weight: 400;
    font-style: normal;
    color: var(--text-muted);
}

.benefits-section-plan-design .icon-placeholder {
    width: 40px;
    height: 40px;
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.benefits-section-plan-design .icon-placeholder img,
.benefits-section-plan-design .icon-placeholder svg {
    display: block;
}

/* ================= HOW IT WORKS ================= */
.works-section-plan-design {
    padding: 70px 0 110px;
}

.works-section-plan-design .work-card {
    background: var(--card-dark);
    padding: 30px;
    border-radius: 18px;
    height: 100%;
}

.works-section-plan-design .step {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #222;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.works-section-plan-design .work-card h5 {
    font-size: 22px;
    font-weight: 600;
    font-style: normal;
    color: var(--accent);
}

.works-section-plan-design .work-card p {
    font-size: 16px;
    font-weight: 400;
    font-style: normal;
    color: var(--text-muted);
}

.broker-profile-title {
    font-size: 24px;
    text-align: start;
}

.broker-profile-description {
    text-align: start;
    margin: 0;
}

.zero-brokerage-header-section {
    background: #0F0F0F;
}

.zero-brokerage-testimonials-section,
.zero-brokerage-faq-section,
.zero-brokerage-accordion-button,
.zero-brokerage-accordion-button:not(.collapsed),
.zero-brokerage-accordion-body,
.zero-brokerage-accordion-item {
    background: #0F0F0F;
}

.zero-brokerage-testimonial-card {
    background: #0F0F0F;
    border: 1px solid #D9D9D933;
}

.zero-brokerage-stars {
    border-bottom: 1px solid #FFFFFF33;
}

.zero-brokerage-accordion-header,
.zero-brokerage-accordion-button,
.zero-brokerage-accordion-button:not(.collapsed),
.zero-brokerage-accordion-body {
    color: #ffffff;
}

.zero-brokerage-testimonial-text,
.zero-brokerage-author-name,
.zero-brokerage-author-designation,
.zero-brokerage-testimonial-description {
    color: #FFFFFF;
}

.testimonials-section .zero-brokerage-text_t,
.zero-brokerage-section-title-faq {
    color: #F06A37;
}

.plan-zero-brokerage-hero-svg {
    overflow: hidden;
    width: 100%;
}

.plan-zero-brokerage-wave {
    position: absolute;
    /* width: 1375.08px; */
    height: 500.47px;
    top: -119.7px;
    right: 1px;
    /* transform: scaleX(-1) rotate(-138.68deg); */
    transform-origin: center;
    opacity: 0.25;
    mix-blend-mode: luminosity;
    pointer-events: none;
}

/* ============================================
   PG RELAX PLAN PAGE STYLES (DESKTOP)
   ============================================ */

/* Header Styles */
.btn-list-property {
    background: var(--primary-orange);
    color: var(--white);
    border: none;
    padding: 8px 20px;
    border-radius: 26px;
    font-weight: 500;
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
}

.list-property-free-badge {
    background: rgba(255, 255, 255, 0.3);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.7rem;
}

.search-pid-wrapper {
    position: relative;
}

.search-pid-input {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 8px 12px;
    width: 200px;
}

/* Hero Section */
.pg-relax-hero-section {
    padding: 80px 0;
    background: var(--white);
    position: relative;
}

.pg-relax-hero-section .hero-phones-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: -50px;
    margin-top: 40px;
    margin-left: 50px;
}

.pg-relax-hero-section .hero-phone-left,
.pg-relax-hero-section .hero-phone-right {
    position: relative;
    z-index: 2;
}

.pg-relax-hero-section .hero-phone-left {
    transform: rotate(0deg);
    margin-right: -85px;
}

.hero-phone-right-svg {
    position: absolute;
    margin-left: 110px;
    margin-bottom: 364px;
    z-index: 1;
}

.hero-circle-icon-svg {
    position: absolute;
    margin-right: -773px;
}

.hero-section-house-design {
    position: absolute;
    margin-left: -790px;
    margin-top: 150px;
}

.hero-content-rocket {
    position: absolute;
    margin-left: 650px;
}

.pg-relax-hero-section .hero-phone-img {
    width: 576px;
    height: 550px;
    max-width: 100%;
}

.pg-relax-hero-section .hero-content {
    padding-top: 47px;
    padding-left: 162px;
    text-align: start;
}

.pg-relax-hero-section .hero-title {
    font-size: 46px;
    font-weight: 500;
    color: var(--text-dark);
    line-height: 1.2;
    margin-bottom: 10px;
}

.pg-relax-hero-section .text-orange {
    color: #F06A37;
    font-weight: 700;

}

.pg-relax-hero-section .hero-subtitle {
    font-size: 18px;
    font-weight: 400;
    color: var(--text-light);
    margin-bottom: 10px;
    line-height: 1.6;
}

.hero-subtitle-span-plan {
    font-weight: 900;
}

.pg-relax-hero-section .hero-pricing {
    position: relative;
    display: flex;
    align-items: center;
    text-align: start;
    gap: 15px;
    margin-bottom: 10px;
    justify-content: flex-start;
}

.pg-relax-hero-section .current-price {
    font-size: 46px;
    font-weight: 500;
    color: #333333;
}

.pg-relax-hero-section .original-price {
    margin-bottom: 2px;
    font-size: 26px;
    font-weight: 500;
    color: var(--text-light);
    text-decoration: line-through;
}

.pg-relax-hero-section .hero-cta-buttons {
    position: relative;
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.pg-relax-hero-section .btn-get-started {
    background: #F06A37;
    color: var(--white);
    border: none;
    padding: 14px 40px;
    border-radius: 30px;
    font-weight: 400;
    font-size: 18px;
    transition: all 0.3s;
}

.pg-relax-hero-section .btn-get-started:hover {
    background: #e55a2b;
    color: var(--white);
}

.pg-relax-hero-section .btn-view-plans {
    background: var(--white);
    color: #333333;
    border: 1px solid #F06A37;
    padding: 14px 40px;
    border-radius: 30px;
    font-weight: 400;
    font-size: 18px;
    transition: all 0.3s;
}

.pg-relax-hero-section .btn-view-plans:hover {
    background: var(--primary-orange);
    color: var(--white);
}

/* PG Relax Plan Section */
.pg-relax-plan-section {
    padding: 100px 0;
    background: white;
}

.pg-relax-plan-wave {
    position: absolute;
    z-index: 0;
}

.plan-images-wrapper {
    display: flex;
    flex-direction: row;
    gap: 20px;
    position: relative;
}

.plan-image-top,
.plan-image-bottom {
    width: 100%;
    max-width: 360px;
}

.plan-image-bottom {
    margin-top: 149px;
}

.plan-image {
    width: 330px;
    height: 528px;
    border-radius: 40px;
    object-fit: cover;
}

.plan-content {
    padding-left: 0px;
    padding-top: 105px;
}

.plan-badge {
    position: relative;
    z-index: 1;
    display: inline-block;
    background: transparent;
    background:
        linear-gradient(#fff, #fff) padding-box,
        linear-gradient(90deg, #F06A37, #EE551B) border-box;
    border: 1px solid transparent;
    color: #666666;
    padding: 13px 20px 8px 20px;
    border-radius: 30px;
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 20px;
}

.plan-title {
    position: relative;
    font-size: 40px;
    font-weight: 700;
    color: #333333;
    margin-bottom: 20px;
    line-height: 1.3;
    z-index: 1;
}

.plan-price {
    color: var(--primary-orange);
}

.plan-gst {
    position: absolute;
    display: inline-block;
    background: #F06A37;
    color: var(--white);
    padding: 5px 6px 2px 6px;
    border-radius: 25px;
    font-size: 12px;
    font-weight: 500;
    margin-left: 10px;
}

.plan-off-badge {
    display: inline-block;
    background: var(--primary-orange);
    color: var(--white);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-left: 10px;
}

.hero-gst-badge {
    display: inline-block;
    background: #F06A37;
    color: var(--white);
    padding: 3px 4px 0px 4px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    margin-left: -4px;
    margin-bottom: 22px;
    text-align: center;
}

.plan-benefits {
    margin-bottom: 30px;
}

.plan-benefits .benefit-item {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
    font-size: 20px;
    font-weight: 400;
    color: var(--text-dark);
}

.benefit-icon {
    color: var(--primary-green);
    font-size: 1.5rem;
    flex-shrink: 0;
}

.btn-get-started-plan {
    position: relative;
    z-index: 1;
    background: #F06A37;
    color: var(--white);
    border: none;
    padding: 14px 40px;
    border-radius: 30px;
    font-weight: 400;
    font-size: 18px;
    transition: all 0.3s;
}

.btn-get-started-plan:hover {
    background: #e55a2b;
    color: var(--white);
}

/* Process Section */
.process-section {
    padding: 80px 0;
    background: var(--white);
}

.process-card {
    position: relative;
    background: var(--white);
    border: 1px solid #676767;
    border-radius: 12px;
    padding: 52px;
    height: 100%;
    transition: all 0.3s;
}

.process-card:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    transform: translateY(-5px);
}

.process-number {
    position: absolute;
    top: -26px;
    left: 40px;
    display: inline-block;
    border: 1px solid #676767;
    background: white;
    color: #676767;
    padding: 8px 26px;
    border-radius: 30px;
    font-weight: 400;
    font-size: 20px;
    margin-bottom: 20px;
}

.process-title {
    font-size: 34px;
    font-weight: 700;
    color: #F06A37;
    margin-bottom: 15px;
}

.process-description {
    font-size: 18px;
    color: var(--text-light);
    line-height: 1.6;
    font-weight: 400;
}

/* Question Section */
.question-section {
    padding: 100px 0;
    background: url('../images/banner-relax-plan.png');
    background-size: cover;
    background-position: center;
    position: relative;
}

.question-content {
    text-align: center;
    color: var(--white);
    max-width: 1336px;
    margin: 0 50px;
}

.question-title {
    font-size: 40px;
    font-weight: 700;
    margin-bottom: 27px;
    color: var(--white);
}

.question-text {
    font-size: 20px;
    line-height: 1.5;
    font-weight: 400;
    margin-bottom: 27px;
    color: rgba(255, 255, 255, 0.9);
}

.btn-connect-us {
    background: #F06A37;
    color: var(--white);
    border: none;
    padding: 14px 40px;
    border-radius: 27px;
    font-weight: 400;
    font-size: 1.1rem;
    transition: all 0.3s;
}

.whatsapp-relax-plan {
    font-size: 24px;
    vertical-align: -3px;
}

.btn-connect-us:hover {
    background: #e55a2b;
    color: var(--white);
}

.testimonials-section .relax-plan-tsection {
    font-size: 40px;
}

.relax-plan-description {
    max-width: 1440px;
}

/* About Us Page */

.about-us-section {
    position: relative;
    display: flex;
}

.about-us-title {
    font-weight: 600;
    font-size: 36px;
    text-align: start;
    color: #333333;
}

.about-us-description {
    margin-top: 20px;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.8;
    color: #666666;
}

.about-us-images {
    display: flex;
    flex-direction: row;
    position: relative;
    margin-left: 20px;
    gap: 16px;
}

.about-us-avatar-1 {
    overflow: hidden;
    position: relative;
    width: 240px;
    height: 252px;
    border-radius: 40px;
    top: 250px;
}

.about-us-avatar-1 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.about-us-avatar-2 {
    overflow: hidden;
    width: 240px;
    height: 252px;
    margin-top: 40px;
    border-radius: 40px;
}

.about-us-avatar-2 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.about-us-box {
    min-height: 200px;
}

.assistance-cards-row>[class*="col-"]:nth-child(2) .about-us-box {
    min-height: 200px;
}

.about-us-assistance-section {
    position: relative;
    background-color: #fff;
    overflow: hidden;
    min-height: 500px;
}

.about-us-assistance-section::after {
    top: 120px;
    width: 1290px;
    content: "";
    position: absolute;
    right: 0px;
    height: 400px;
    background-image: url(../images/images/assistance-image-bg.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: right center;
    z-index: 0;
}

.about-us-assistance-box {
    box-shadow: none;
    border: 1px solid #D8D8D8;
}

.about-us-understanding-box {
    box-shadow: none;
    border-left: 1px solid #D8D8D8;
    border-top: 1px solid #D8D8D8;
}

.about-us-understanding-box .about-us-strong {
    color: #EE551B;
    font-weight: 400;
}

.about-us-dream-job {
    position: relative;
}

.about-us-img-wrapper {
    position: relative;
    width: 1253px;
    height: 400px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    z-index: 0;
    margin-left: 23px;
    border-radius: 30px;
}

.about-us-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dream-about-us {
    position: absolute;
    width: 517px;
    z-index: 1;
    background: #FFFFFF;
    border-radius: 30px;
    height: 312px;
    left: 44px;
    top: 44px;
    padding: 72px 55px;
}

.dream-title-about-us {
    font-weight: 600;
    font-size: 40px;
    color: #333333;
    line-height: 1.2;
    margin-bottom: 20px;
}

.apply-about-us {
    width: 155px;
    height: 52px;
    background: #EE551B;
    border-radius: 26px;
    border: none;
    font-weight: 400;
    font-size: 18px;
    color: var(--white);
}

.modal-overlay-rent-pop-up {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 999;
}

.property-modal-rent-pop-up {
    background: #fff;
    width: 640px;
    border-radius: 16px;
    padding: 24px;
    position: relative;
}

.modal-close-rent-pop-up {
    position: absolute;
    top: 5px;
    right: 22px;
    background: transparent;
    border: none;
    width: 28px;
    height: 27px;
    border-radius: 50%;
    cursor: pointer;
}

.property-tabs-rent-pop-up {
    display: flex;
    gap: 16px;
    margin-top: 15px;
}

.property-tab-rent-pop-up {
    flex: 1;
    padding: 38px 48px;
    border-radius: 14px;
    border: 1px solid #e5e5e5;
    cursor: pointer;
    text-align: center;
}

.property-tab-rent-pop-up.active {
    border: 1px solid #ff5c00;
    background: #fff6f0;
}

.property-content-rent-pop-up h3 {
    margin-top: 20px;
    font-weight: 600;
    font-size: 24px;
    color: #333333;
}

.property-content-rent-pop-up p {
    font-weight: 400;
    font-size: 18px;
    color: #666666;
    margin-bottom: 10px;
}

.radio-list-rent-pop-up {
    list-style: none;
    padding: 0;
}

.radio-list-rent-pop-up li span {
    font-weight: 500;
    font-size: 16px;
    color: #333333;
}

.radio-list-rent-pop-up li input[type="radio"] {
    accent-color: #FF5403;
}

.radio-list-rent-pop-up li {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
}

.continue-btn-rent-pop-up {
    width: 180px;
    font-weight: 400;
    font-size: 18px;
    margin: 20px auto 0;
    display: block;
    background: #ff5c00;
    color: #fff;
    border: none;
    padding: 12px;
    border-radius: 30px;
}

.tab-content-rent-pop-up {
    display: none;
    /* hide all tabs */
}

.tab-content-rent-pop-up.active {
    display: block;
    /* show only active tab */
}

.rent-properties-popup {
    font-weight: 500;
    font-size: 18px;
}

.property-tab-rent-pop-up svg {
    margin-bottom: 10px;
}

.rent-properties-description {
    font-weight: 400;
    font-size: 14px;
    color: #666666;
    line-height: 1.2;
}


.lr-hero-section {
    background: #FFF5EE;
    padding: 44px 0 80px 0;
    position: relative;
    z-index: 1;
}

.lr-location-icon {
    position: absolute;
    width: 112.5176809754738px;
    height: 112.5176809754738px;
    top: 10px;
    left: 12px;
    opacity: 1;
    z-index: 1;
}

.lr-object-1 {
    position: absolute;
    width: 138px;
    top: 423px;
    left: 0;
    transform: rotate(0deg);
    opacity: 1;
    z-index: -1;
}

.lr-object-2 {
    position: absolute;
    width: 138px;
    height: 235px;
    top: 495px;
    left: 102px;
    transform: rotate(0deg);
    opacity: 1;
    z-index: -1;
}

.lr-svg-decoration {
    position: absolute;
    width: 239.99998474121185px;
    height: 221.0000152587899px;
    top: 509px;
    right: 5px;
    opacity: 0.6;
    z-index: -1;
}

.lr-circle-svg {
    position: absolute;
    width: 204px;
    height: 247px;
    top: 0px;
    right: 0px;
    transform: rotate(0deg);
    opacity: 1;
    z-index: -1;
}

.lr-gradient-circle-svg {
    position: absolute;
    width: 249px;
    height: 154px;
    top: 0px;
    left: 686px;
    transform: rotate(0deg);
    opacity: 1;
    z-index: -1;
}

.lr-vector {
    position: absolute;
    width: 97px;
    height: 95px;
    top: 560px;
    left: 540px;
    opacity: 1;
    z-index: 1;
}

.lr-hero-left {
    padding-left: 20px;
}

.lr-hero-left h1 {
    font-weight: 600;
    font-size: 39px;
    line-height: 1.3;
    color: #333333;
    margin-bottom: 30px;
    position: relative;
}

.lr-hero-left h1 .lr-free-text {
    color: #F06A37;
    font-style: italic;
    font-weight: 300;
    display: inline-block;
    position: relative;
}

.lr-hero-left h1 .lr-wavy-line {
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 109px;
    height: 10px;
    display: block;
}

.lr-hero-list {
    list-style: none;
    padding: 0;
    margin: 0 0 25px 0;
}

.lr-hero-list li {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    font-size: 18px;
    color: #333333;
    font-weight: 400;
}

.lr-hero-list li span {
    margin-top: 3px;
}

.lr-checkmark-icon {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #FFF5EE;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    flex-shrink: 0;
    position: relative;
}



.lr-call-text {
    font-size: 16px;
    color: #333333;
    margin-bottom: 20px;
    font-weight: 500;
}

.lr-hero-call {
    background: #F06A37;
    color: #fff;
    padding: 16px 32px;
    border-radius: 0px 0px 20px 20px;
    border: none;
    font-size: 16px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.lr-hero-call span {
    margin-top: 5px;
}

.lr-hero-call:hover {
    background: #E66A00;
}

.lr-hero-call .lr-phone-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.lr-post-form {
    margin-left: 110px;
    background: #fff;
    padding: 53px 53px;
    border-radius: 80px;
    width: 635px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.lr-post-form h2 {
    font-weight: 500;
    font-size: 32px;
    line-height: 1.2;
    color: #333333;
    margin-bottom: 30px;
}

.lr-form-label {
    font-weight: 400;
    font-size: 18px;
    color: #333333;
    margin-bottom: 12px;
    display: block;
    margin-top: 20px;
}

.lr-form-label:first-of-type {
    margin-top: 0;
}

.lr-form-group {
    display: flex;
    gap: 3px;
    margin-bottom: 10px;
    align-items: center;
}

.lr-form-group input[type="radio"] {
    width: 24px;
    height: 24px;
    margin-right: 8px;
    cursor: pointer;
    accent-color: #333333;
    flex-shrink: 0;
}

.lr-form-group label {
    display: inline-flex;
    align-items: center;
    font-size: 16px;
    color: #333333;
    cursor: pointer;
    margin-top: 2px;
    margin-right: 20px;
    font-weight: 400;
}

.lr-post-title-span {
    font-weight: 1000;
    font-size: 32px;
    color: #F06A37;
}

.lr-form-input {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #D9D9D9;
    border-radius: 8px;
    font-size: 16px;
    color: #333333;
    margin-top: 10px;
    margin-bottom: 10px;
    box-sizing: border-box;
}

.lr-form-input::placeholder {
    color: #D9D9D9;
    font-size: 16px;
    font-weight: 100;
}

.lr-form-input:focus {
    outline: none;
    border-color: #F06A37;
    background: #fff;
    box-shadow: none;
}

.lr-form-submit {
    width: 156px;
    background: #F06A37;
    color: #fff;
    border: none;
    padding: 14px;
    border-radius: 30px;
    font-size: 18px;
    font-weight: 400;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-top: 10px;
}

.lr-form-submit:hover {
    background: #E66A00;
}

.lr-stats-section {
    margin-top: -20px;
    padding: 100px 0;
}

.lr-stats-image-wrapper {
    position: relative;
    width: 1240px;
    height: 369px;
    margin: 0 auto;
}

.lr-stats-bg-image {
    width: 1240px;
    height: 369px;
    border-radius: 20px;
    object-fit: cover;
}

.lr-stats-box {
    background: #fff;
    padding: 64px;
    border-radius: 20px;
    box-shadow: 0px 4px 11.3px 0px #00000012;
    position: absolute;
    top: 109%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    width: calc(100% - 80px);
    max-width: 1049px;
}

.lr-stats-headline {
    font-size: 32px;
    font-weight: 500;
    color: #333333;
    text-align: left;
    margin-bottom: 0px;
    line-height: 1.4;
}

.lr-stats-row {
    margin-top: 0px;
}

.lr-stats-row .col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 20px;
}

.lr-stats-prefix {
    font-size: 14px;
    font-weight: 400;
    color: #333333;
    margin-bottom: 10px;
}

.lr-stats-number {
    font-size: 48px;
    font-weight: 500;
    color: #333333;
    line-height: 1.2;
    margin-bottom: 0px;
}

.lr-stats-label {
    font-size: 14px;
    font-weight: 400;
    color: #333333;
    text-align: center;
}

.lr-optimize-section {
    padding: 200px 0 100px 0;
    background: #fff;
    position: relative;
}

.lr-optimize-header {
    margin-bottom: 60px;
}

.lr-optimize-title {
    font-size: 2.5rem;
    font-weight: 500;
    color: #333333;
    line-height: 1.4;
    margin: 0;
}

.lr-optimize-title-orange {
    color: #F06A37;
    font-weight: 500;
    font-size: 2.5rem;
}

.lr-optimize-title-orange-large {
    color: #F06A37;
    font-weight: 1000;
    font-size: 2.5rem;
}

.lr-optimize-intro {
    padding-top: 5px;
    padding-left: 70px;
}

.lr-optimize-intro p {
    color: #333333;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.6;
    margin: 0;
}

.lr-optimize-content {
    position: relative;
    padding-top: 40px;
}

.lr-optimize-divider {
    position: absolute;
    left: 50%;
    top: 0;
    height: 100%;
    width: 2px;
    background: repeating-linear-gradient(to bottom,
            #87CEEB 0,
            #87CEEB 6px,
            transparent 6px,
            transparent 12px);
    transform: translateX(-50%);
    z-index: 1;
    pointer-events: none;
}

.lr-opt-card {
    height: 322px;
    border: 1px solid #D8D8D84D;
    background: #fff;
    padding: 50px 40px;
    border-radius: 10px;
    text-align: left;
    position: relative;
    z-index: 2;
}

.lr-opt-icon-wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: 24px;
}

.lr-opt-icon {
    margin-left: 24px;
    margin-bottom: 10px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    color: #FF5403;
    font-weight: 400;
}

.lr-opt-card h5 {
    font-size: 22px;
    font-weight: 600;
    color: #333333;
    margin-bottom: 16px;
    line-height: 1.4;
}

.lr-opt-card p {
    color: #333333;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.6;
    margin: 0;
}

.lr-bg-svg {
    position: absolute;
    bottom: 0px;
}

@media (max-width: 767px) {
    .lr-optimize-section {
        padding: 60px 0;
    }

    .lr-optimize-header {
        margin-bottom: 40px;
    }

    .lr-optimize-title {
        font-size: 1.8rem;
        margin-bottom: 24px;
    }

    .lr-optimize-title-orange {
        font-size: 1.8rem;
    }

    .lr-optimize-title-orange-large {
        font-size: 2.5rem;
    }

    .lr-optimize-intro {
        padding-top: 0;
    }

    .lr-optimize-divider {
        display: none;
    }

    .lr-opt-card {
        margin-bottom: 24px;
    }

    .lr-opt-icon {
        width: 70px;
        height: 70px;
        font-size: 1.8rem;
    }
}

.lr-how-section {
    position: relative;
    padding: 80px 0 80px;
    background: #FEF1EC;
    overflow: hidden;
}

.lr-wave-svg {
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 0;
}

.lr-line-svg-p {
    position: absolute;
    margin-top: -100px;
    z-index: 1;
}

.lr-how-header {
    margin-bottom: 60px;
    position: relative;
    z-index: 1;
}

.lr-how-title {
    font-size: 40px;
    font-weight: 500;
    color: #333333;
    line-height: 1.4;
    margin: 0;
}

.lr-how-title-underline {
    color: #F06A37;
    position: relative;
    display: inline-block;
}

.lr-how-underline-svg {
    margin-left: 147px;
    margin-top: -14px;
    display: block;
}


.lr-how-intro {
    width: 679px;
    padding-top: 0px;
}

.lr-how-intro p {
    color: #333333;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.6;
    margin: 0;
}

.lr-how-cards-wrapper {
    position: relative;
    padding: 0px 0;
    width: 100%;
    overflow: visible;
}

.lr-how-divider {
    position: absolute;
    left: 50%;
    top: 0;
    height: 100%;
    width: 2px;
    background: repeating-linear-gradient(to bottom,
            #FFE5D9 0,
            #FFE5D9 6px,
            transparent 6px,
            transparent 12px);
    transform: translateX(-50%);
    z-index: 1;
    pointer-events: none;
}

.lr-how-cards-container {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    position: relative;
    gap: 40px;
    z-index: 2;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    margin-right: calc(50% - 50vw);
    padding-right: calc(50vw - 50%);
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    touch-action: pan-x;
}

.lr-how-cards-container::-webkit-scrollbar {
    display: none;
}

.lr-how-cards-container:active {
    cursor: grabbing;
}

.lr-how-card {
    border: 1px solid #F06A37;
    border-radius: 71px;
    min-width: 1236px;
    height: 533px;
    flex-shrink: 0;
    scroll-snap-align: start;
    padding: 0px 0 0px 40px;
    position: relative;
    overflow: hidden;
}

.lr-how-card .container {
    max-width: 1236px;
    margin: 0 auto;
    padding-left: 15px;
    padding-right: 0;
    height: 100%;
}

.lr-how-card-content-left {
    padding-right: 40px;
}

.lr-how-card h3 {
    font-size: 40px;
    font-weight: 600;
    color: #333333;
    margin-bottom: 30px;
}

.lr-how-card-icon {
    margin-bottom: 30px;
}

.lr-how-icon-circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: #FFE5D9;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    color: #F06A37;
}

.lr-how-card .row {
    height: 100%;
    margin: 0;
}

.lr-how-card .col-md-6:last-child {
    padding: 0;
    height: 100%;
}

.lr-how-card-phone {
    margin-left: 130px;
    flex-wrap: wrap;
    align-content: flex-start;
    align-self: flex-end;
    align-items: flex-end;
    background: white;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    height: 100%;
    width: 479px;
    padding: 52px;
}

.lr-phone-mockup {
    height: 100%;
    width: auto;
    object-fit: cover;
    border-radius: 0 71px 71px 0;
    box-shadow: none;
    margin: 0;
    padding: 0;
    display: block;
}

.lr-how-card p {
    width: 578px;
    color: #333333;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.8;
    margin: 0;
}

.lr-how-dots {
    text-align: center;
    margin-top: 40px;
    position: relative;
    z-index: 2;
}

.lr-dot {
    width: 12px;
    height: 12px;
    background: transparent;
    border: 2px solid #F06A37;
    border-radius: 50%;
    display: inline-block;
    margin: 0 6px;
    cursor: pointer;
    transition: all 0.3s;
}

.lr-dot.active {
    background: #F06A37;
    border-color: #F06A37;
}

.lr-titlle-faq {
    font-weight: 700;
    font-size: 48px;
}

@media (max-width: 767px) {
    .lr-how-title {
        font-size: 2rem;
        margin-bottom: 20px;
    }

    .lr-how-intro {
        padding-top: 0;
    }

    .lr-how-divider {
        display: none;
    }

    .lr-how-card {
        padding: 20px 10px;
    }

    .lr-how-card-content-left {
        padding-right: 0;
        margin-bottom: 30px;
        text-align: center;
    }

    .lr-how-card h3 {
        font-size: 1.5rem;
    }

    .lr-phone-mockup {
        max-width: 250px;
    }
}

.lr-city-section {
    padding: 80px 0;
}

.lr-type-btn {
    padding: 8px 24px;
    border-radius: 20px;
    border: none;
}

.lr-type-btn.active {
    background: #FF7A00;
    color: #fff;
}

.lr-city-tabs button {
    margin: 4px;
    border: none;
    background: #f1f1f1;
    padding: 6px 16px;
    border-radius: 16px;
}

.lr-section-title-post {
    font-weight: 600;
    font-size: 40px;
}

.lr-section-title-post-highlight {
    color: #f06a37;
}

/* Sitemap Section Styles */
.sitemap-section {
    background: #FFFFFF;
    padding: 40px 0;
}

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

.sitemap-title {
    font-size: 40px;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 15px;
}

.sitemap-subtitle {
    font-size: 1rem;
    color: var(--text-light);
    font-weight: 400;
    max-width: 1006px;
    margin: 0 auto;
}

.sitemap-tabs-wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
}

.sitemap-tabs {
    display: flex;
    gap: 8px;
    background: #FFFFFF;
    border-radius: 33px;
    padding: 4px;
    border: 1px solid #F06A37;
}

.sitemap-tab {
    background: transparent;
    border: none;
    padding: 10px 24px;
    font-size: 18px;
    color: var(--text-dark);
    border-radius: 33px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 400;
    min-height: 45px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.sitemap-tab:hover {
    background: #F5F5F5;
}

.sitemap-tab.active {
    background: #F06A37;
    color: #FFFFFF;
    font-weight: 500;
    padding: 10px 64px;
}

.sitemap-content {
    margin-top: 30px;
    min-height: 400px;
    position: relative;
}

.sitemap-card {
    background: #FFFFFF;
    padding: 18px;
    border-radius: 8px;
    border: 1px solid #E5E5E5;
    height: 100%;
    transition: transform 0.3s, box-shadow 0.3s;
}

.sitemap-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.sitemap-card-title {
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 15px;
    font-size: 20px;
    line-height: 1.3;
}

.sitemap-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sitemap-list li {
    margin-bottom: 8px;
    position: relative;
    padding-left: 15px;
}

.sitemap-list li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: #333333;
    font-size: 1.9rem;
    line-height: 1;
    margin-top: -4px;
}

.sitemap-list a {
    color: #333333;
    text-decoration: none;
    font-size: 0.95rem;
    transition: color 0.3s;
    line-height: 1.6;
}

.sitemap-list a:hover {
    color: var(--primary-orange);
}

.sitemap-content .col-md-3 {
    padding-right: 0px;
}

.no-property-svg {
    margin-top: 16px;
    margin-left: 20%;
}

/* Property Location Form Styles */
.add-details-header {
    margin: 0 165px 30px 165px;
}

.property-location-form .post-property-form-subtitle {
    font-size: 0.95rem;
    color: var(--text-light);
    margin-top: 8px;
    margin-bottom: 30px;
    font-weight: 400;
    text-align: left;
}

.property-location-form {
    margin: 0 165px;
    max-width: 100%;
}

.property-location-form-group {
    margin-bottom: 24px;
    position: relative;
}

.property-location-label {
    display: block;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-dark);
    margin-bottom: 8px;
}

.property-location-select-wrapper {
    position: relative;
}

.property-location-input-wrapper {
    position: relative;
}

/* Labels inside input boxes */
.property-location-form-group .post-property-label-inside {
    position: absolute;
    top: -8px;
    left: 15px;
    font-size: 16px;
    font-weight: 400;
    color: #666666;
    z-index: 2;
    pointer-events: none;
    background: #FFFFFF;
    padding: 0 4px;
    line-height: 1;
}

.property-location-select {
    width: 100%;
    padding: 12px 40px 12px 16px;
    border: 1px solid #E5E5E5;
    border-radius: 8px;
    background: #F5F5F5;
    font-size: 0.95rem;
    color: var(--text-dark);
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: text;
    transition: all 0.3s ease;
}

.property-location-select:focus {
    outline: none;
    border-color: var(--primary-orange);
    background: #FFFFFF;
}

.property-location-select::placeholder {
    color: #999999;
}

.property-location-select-icon {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-light);
    font-size: 1rem;
    z-index: 3;
    transition: transform 0.3s ease, color 0.3s ease;
}

.property-location-select-wrapper:has(.property-city-dropdown.show) .property-location-select-icon {
    transform: translateY(-50%) rotate(180deg);
    color: var(--primary-orange);
}

/* Custom City Dropdown */
.property-city-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #FFFFFF;
    border: 1px solid #E5E5E5;
    border-radius: 8px;
    margin-top: 4px;
    max-height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 1000;
    display: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    width: 100%;
    box-sizing: border-box;
}

.property-city-dropdown.show {
    display: block;
}

.property-city-dropdown-item {
    padding: 12px 16px;
    cursor: pointer;
    font-size: 0.95rem;
    color: var(--text-dark);
    transition: background 0.2s ease;
    border-bottom: 1px solid #F5F5F5;
}

.property-city-dropdown-item:last-child {
    border-bottom: none;
}

.property-city-dropdown-item:hover {
    background: #F5F5F5;
}

.property-city-dropdown-item:active {
    background: #E5E5E5;
}

/* Dropdown scrollbar styling */
.property-city-dropdown::-webkit-scrollbar {
    width: 6px;
}

.property-city-dropdown::-webkit-scrollbar-track {
    background: #F5F5F5;
    border-radius: 10px;
}

.property-city-dropdown::-webkit-scrollbar-thumb {
    background: #CCCCCC;
    border-radius: 10px;
}

.property-city-dropdown::-webkit-scrollbar-thumb:hover {
    background: #999999;
}

.property-location-input {
    width: 100%;
    padding: 15px 16px 10px 16px;
    border: 1px solid #D9D9D9;
    border-radius: 10px;
    background: #FFFFFF;
    font-size: 0.95rem;
    color: var(--text-dark);
    transition: all 0.3s ease;
}

.property-location-input:focus {
    outline: none;
    border-color: var(--primary-orange);
    background: #FFFFFF;
    box-shadow: none;
}

.property-location-input::placeholder {
    color: #D9D9D9;
    font-weight: 400;
}

.property-location-current-location {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
    cursor: pointer;
    padding: 12px;
    border-radius: 8px;
    transition: background 0.3s ease;
}

.property-location-current-location:hover {
    background: #F5F5F5;
}

.property-location-gps-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
}

.property-location-current-location-text {
    display: flex;
    flex-direction: column;
    gap: 0px;
}

.property-location-current-location-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--primary-orange);
}

.property-location-current-location-subtitle {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-light);
}

.property-location-form-actions {
    margin-top: 32px;
    display: flex;
    justify-content: flex-end;
}

.btn-property-location-next {
    background: var(--primary-orange);
    color: #FFFFFF;
    border: none;
    padding: 12px 32px;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-property-location-next:hover {
    background: #e55a2b;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 84, 3, 0.3);
}

/* Buy Property Details Form Styles */
.buy-property-details-form {
    margin: 0 165px;
    margin-top: 0;
}

.buy-property-select-wrapper {
    position: relative;
    overflow: visible !important;
}

.buy-property-select-wrapper .post-property-select-container {
    padding-top: 0;
}

.buy-property-details-form .buy-property-select-wrapper .post-property-select-container {
    min-height: 50px;
}

.buy-property-details-form .buy-property-combobox .property-city-dropdown {
    z-index: 1200;
}

.buy-property-details-form .post-property-select-container:has(.property-city-dropdown.show) .post-property-select-chevron {
    color: #FF5403;
    top: 50%;
    margin-top: 10px;
    transform: translateY(-50%) rotate(180deg);
}

.buy-property-details-form .post-property-select-container .post-property-select-input {
    cursor: text;
}

.buy-property-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    overflow: visible;
}

.buy-property-input {
    width: 100%;
    padding: 8px 15px;
    border: 1px solid #D9D9D9;
    border-radius: 10px;
    font-size: 14px;
    color: #333333;
    background: #FFFFFF;
    transition: all 0.3s;
}

.buy-property-input::placeholder {
    color: #D9D9D9;
}

.buy-property-input-wrapper .buy-property-input {
    padding-top: 20px;
}

.buy-property-input:focus {
    outline: none;
    border-color: #FF5403;
    box-shadow: 0 0 0 3px rgba(255, 84, 3, 0.1);
}

/* Area Input with Unit */
.buy-property-area-wrapper {
    position: relative;
}

.buy-property-area-input {
    padding-right: 60px !important;
}

.buy-property-area-unit {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    color: #666666;
    font-weight: 400;
    pointer-events: none;
    z-index: 1;
    margin-top: 10px;
}

.buy-property-input-wrapper .buy-property-area-input {
    padding-top: 20px;
}

/* Currency Input */
.buy-property-currency-wrapper {
    position: relative;
}

.buy-property-currency-wrapper:focus-within {
    border-color: #FF5403;
}

.buy-property-currency-icon {
    position: absolute;
    left: 20px;
    top: 38%;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 1;
    margin-top: 10px;
    color: #666666;
}

.buy-property-input-currency {
    padding-left: 40px !important;
    padding-right: 15px !important;
    padding-top: 20px !important;
    padding-bottom: 8px !important;
}

.buy-property-input-currency::placeholder {
    color: #D9D9D9 !important;
}

.buy-property-input-wrapper:has(.buy-property-currency-icon) .post-property-label-inside {
    left: 15px;
}

/* Date Input with Icon */
.buy-property-date-wrapper {
    position: relative;
}

.buy-property-date-input {
    padding-left: 45px !important;
    padding-right: 15px !important;
}

.buy-property-date-icon {
    position: absolute;
    left: 15px;
    top: 35%;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 1;
    margin-top: 10px;
    color: #666666;
}

.buy-property-input-wrapper .buy-property-date-input {
    padding-top: 20px;
}

/* Radio Button Groups */
.buy-property-radio-group {
    margin-bottom: 0;
}

.buy-property-radio-label {
    display: block;
    font-size: 16px;
    font-weight: 400;
    color: #333333;
    margin-bottom: 12px;
    position: relative;
    top: -8px;
    left: 15px;
    background: #FFFFFF;
    padding: 0 4px;
    z-index: 2;
    pointer-events: none;
}

.buy-property-radio-options {
    position: relative;
    left: 15px;
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    border-radius: 10px;
    background: #FFFFFF;
    transition: all 0.3s;
}

.buy-property-radio-group:focus-within .buy-property-radio-options {
    border-color: #FF5403;
}

.buy-property-radio-item {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    border: 1px solid #D9D9D9;
    border-radius: 10px;
    padding: 10px;
    transition: border-color 0.3s ease;
    width: auto;
    flex: 0 0 auto;
}

.buy-property-radio-item:has(input[type="radio"]:checked) {
    border: 1px solid #FF5403;
}

.buy-property-radio-item input[type="radio"] {
    width: 20px;
    height: 20px;
    margin: 0;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border: 1px solid #D9D9D9;
    border-radius: 50%;
    position: relative;
    flex-shrink: 0;
    transition: all 0.3s;
}

.buy-property-radio-item input[type="radio"]:checked {
    border-color: #FF5403;
}

.buy-property-radio-item input[type="radio"]:checked::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    background-color: #FF5403;
    border-radius: 50%;
}

.buy-property-radio-item label {
    font-size: 16px;
    color: #666666;
    font-weight: 400;
    cursor: pointer;
    margin: 0;
    user-select: none;
}

.buy-property-radio-item:hover label {
    color: #333333;
}

/* Section Titles */
.buy-property-section-title {
    font-size: 18px;
    font-weight: 600;
    color: #333333;
    margin-bottom: -10px;
    margin-top: 0;
}

.buy-property-section-divider {
    margin-top: 10px;
    margin-bottom: 10px;
}

.post-property-form .row {
    overflow: visible !important;
    margin-left: 0;
    margin-right: 0;
}

/* Rent Calculator Section */
.rent-calculator-section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 0;
    overflow-x: hidden;
}

.rent-calculator-wrapper {
    display: flex;
    width: 100%;
    min-height: 100vh;
    align-items: center;
    max-width: 100%;
    overflow-x: hidden;
}

/* Left Section - Desktop */
.rent-calc-left-section {
    width: 828px;
    max-width: 45%;
    height: 880px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 1;
    min-height: 828px;
}

.rent-calc-left-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        linear-gradient(#FF540333, #FF540333),
        url('../images/rent-calc-details-bg.jpg');
    /* background-image: url; */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
}

.rent-calc-info-card {
    position: relative;
    z-index: 2;
    background: #FFFFFF;
    border-radius: 30px;
    padding: 48px 40px;
    width: 90%;
    max-width: 549px;
}

.rent-calc-info-title {
    font-size: 32px;
    font-weight: 700;
    color: #000000;
    margin-bottom: 32px;
}

.rent-calc-info-boxes {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.rent-calc-info-box {
    background: #FFFFFF;
    border-radius: 12px;
    padding: 20px;
    border: 1px solid #FF540333;
}

.rent-calc-info-box-title {
    font-size: 20px;
    font-weight: 500;
    color: #FF5403;
    margin-bottom: 8px;
}

.rent-calc-info-box-text {
    font-size: 16px;
    font-weight: 400;
    color: #666666;
    line-height: 1.4;
    margin: 0;
}

/* Right Section - Desktop */
.rent-calc-right-section {
    width: 1091px;
    max-width: 55%;
    flex: 1;
    height: 880px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FFFFFF;
    flex-shrink: 1;
    min-height: 826px;
}

.rent-calc-right-bg {
    position: absolute;
    top: -27px;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../images/rent-calc-sec-bg.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.06;
    z-index: 1;
}

.rent-calc-form-container {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 780px;
    padding: 0 0px;
    margin: 0 auto;
}

.rent-calc-form-title {
    font-size: 32px;
    font-weight: 600;
    color: #333333;
    margin-bottom: 20px;
}

.rent-calc-form-wrapper {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.rent-calc-input-wrapper {
    position: relative;
    width: 100%;
}

.rent-calc-location-icon {
    position: absolute;
    left: 16px;
    top: 49%;
    transform: translateY(-50%);
    color: #999999;
    font-size: 20px;
    z-index: 3;
}

.rent-calc-input {
    width: 730px;
    padding: 16px 16px 16px 48px;
    border: 1px solid #E0E0E0;
    border-radius: 12px;
    font-size: 22px;
    font-weight: 400;
    color: #333333;
    background: #FFFFFF;
    transition: border-color 0.3s ease;
}

.rent-calc-input:focus {
    outline: none;
    border-color: #FF6B35;
}

.rent-calc-input::placeholder {
    color: #666666;
    font-weight: 400;
    font-size: 22px;
    top: 5px;
    align-items: center;
}

.rent-calc-continue-btn {
    width: 331px;
    padding: 14px;
    background: #FF5403;
    color: #FFFFFF;
    border: none;
    border-radius: 30px;
    font-size: 18px;
    font-weight: 400;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.rent-calc-continue-btn:hover {
    background: #E55A2B;
}

.rent-calc-continue-btn:active {
    transform: scale(0.98);
}

/* Rent Calculator Form Sections */
.rent-cal-form-container {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 831px;
    padding: 0 0px;
    margin: 0 auto;
}

.rent-calc-form-section {
    margin-bottom: 32px;
}

.rent-calc-section-title {
    font-size: 22px;
    font-weight: 500;
    color: #333333;
    margin-bottom: 16px;
}

.rent-calc-options-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

@media (min-width: 769px) and (max-width: 992px) {
    .rent-calc-options-grid {
        gap: 10px;
    }

    .rent-calc-radio-item {
        padding: 10px 14px;
        min-height: 46px;
    }

    .rent-calc-radio-item label {
        font-size: 15px;
    }
}

.rent-calc-radio-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 4px 13px;
    border: 1px solid #D9D9D9;
    border-radius: 10px;
    background: transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 48px;
    width: auto;
    flex: 0 0 auto;
}

.rent-calc-radio-item:hover {
    border-color: #FF5403;
}

.rent-calc-radio-item input[type="radio"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    z-index: 1;
}

.rent-calc-radio-item label {
    font-size: 18px;
    font-weight: 400;
    color: #333333;
    cursor: pointer;
    margin: 0;
    user-select: none;
    text-align: left;
    width: auto;
    white-space: nowrap;
    position: relative;
    padding-left: 32px;
    display: flex;
    align-items: center;
}

.rent-calc-radio-item label::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border: 2px solid #FF5403;
    border-radius: 50%;
    background: #FFFFFF;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.rent-calc-radio-item input[type="radio"]:checked+label {
    color: #333333;
    font-weight: 500;
}

.rent-calc-radio-item input[type="radio"]:checked+label::before {
    border-color: #FF5403;
}

.rent-calc-radio-item input[type="radio"]:checked+label::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #FF5403;
    flex-shrink: 0;
}

.rent-calc-radio-item:has(input[type="radio"]:checked) {
    background: #FFFFFF;
}

/* Rent Calculator Result Display */
.final-result-section {
    background-color: #F8F8F8;
    background-image: none;
}

.rent-calc-result-container {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 600px;
    padding: 40px 20px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.rent-calc-gauge-wrapper {
    margin-bottom: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    mix-blend-mode: multiply;
}

.rent-calc-gauge-wrapper img {
    mix-blend-mode: multiply;
}

.rent-calc-gauge-image {
    max-width: 100%;
    height: auto;
    width: 300px;
    mix-blend-mode: multiply;
}

.rent-calc-result-text {
    margin-bottom: 40px;
}

.rent-calc-estimation-message {
    width: 668px;
    font-size: 26px;
    font-weight: 600;
    color: #333333;
    line-height: 1.6;
    margin: 0;
}

.rent-calc-estimated-amount {
    font-size: 24px;
    font-weight: 600;
    color: #333333;
}

.rent-calc-result-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.rent-calc-homepage-btn {
    width: 280px;
    padding: 14px 24px;
    background: #FF5403;
    color: #FFFFFF;
    border: none;
    border-radius: 30px;
    font-size: 18px;
    font-weight: 400;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.rent-calc-homepage-btn:hover {
    background: #E55A2B;
}

.rent-calc-homepage-btn:active {
    transform: scale(0.98);
}

.rent-calc-redo-link {
    color: #333333;
    font-size: 18px;
    font-weight: 400;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.3s ease;
}

.rent-calc-redo-link:hover {
    color: #FF5403;
    text-decoration: underline;
}

/* Mobile Info Section - Hidden on Desktop */
.rent-calc-mobile-info {
    display: none;
}

/* Laptop Screen Adjustments */
@media (min-width: 768px) and (max-width: 1600px) {
    .rent-calc-left-section {
        width: auto;
        max-width: 40%;
        min-width: 590px;
    }

    .rent-calc-right-section {
        width: auto;
        max-width: 60%;
        flex: 1;
    }

    .rent-calc-form-container {
        max-width: 730px;
        padding: 0 30px;
    }
}

@media (min-width: 1601px) {
    .rent-calc-left-section {
        width: 828px;
        max-width: none;
    }

    .rent-calc-right-section {
        width: 1091px;
        max-width: none;
    }
}


/* Locality Detail Page Styles*/
.locality-page {
    padding: 6px 0 40px 0px;
    background-color: #f5f5f5;
    margin-left: 0px;
}



.breadcrumb-section {
    padding: 20px 0 30px;
}

.breadcrumb {
    background: transparent;
    padding: 0;
    margin: 0;
    font-size: 14px;
    color: #666;
}

.breadcrumb a {
    color: #666;
    text-decoration: none;
}

.breadcrumb a:hover {
    color: #ff6b35;
}

.breadcrumb-item+.breadcrumb-item::before {
    content: " / ";
    color: #666;
}

.locality-image {
    width: 756px;
    max-width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: 12px;
    margin-bottom: 30px;
}

.locality-header h1 {
    font-size: 36px;
    font-weight: 600;
    color: #2c2c2c;
    margin-bottom: 8px;
}

.locality-subtitle {
    font-size: 18px;
    font-weight: 400;
    color: #FF5403;
    margin-bottom: 20px;
}

.locality-description {
    font-size: 16px;
    color: #333;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: 0.4;
    margin-bottom: 40px;
}

.why-known-section .section-heading,
.explore-section .section-heading {
    font-size: 24px;
    font-weight: 600;
    color: #FF5403;
    margin-bottom: 20px;
}

.locality-page .why-known-section,
.locality-page .explore-section {
    background: #FFFFFF;
    border-radius: 20px;
    padding: 40px;
    position: relative;

}

.why-known-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.why-known-list li {
    padding: 12px 0;
    font-size: 16px;
    color: #333;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: 0.6;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.why-known-list li i {
    color: #ff6b35;
    margin-top: 4px;
    flex-shrink: 0;
}

.locality-page-svg-tick {
    margin-top: 8px;
    flex-shrink: 0;
}

.locality-page .explore-section {
    margin-top: 50px;
    position: relative;
}

.locality-page .explore-category {
    margin-left: 15px;
    width: 280px;
    margin-right: 0px;
    margin-bottom: 30px;
    border: 1px solid #F8F8F8;
    padding: 30px 11px 30px 15px;
    border-radius: 20px;
    background: #fff;
}

.locality-page .explore-category h3 {
    font-size: 18px;
    font-weight: 600;
    color: #000000;
    margin-bottom: 10px;
}

.locality-page .explore-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.locality-page .explore-list li {
    padding: 10px 0;
    font-size: 16px;
    font-weight: 400;
    color: #666666;
    display: flex;
    align-items: center;
    gap: 6px;
}

.left-chevron-lp {
    position: absolute;
    margin-top: -230px;
    left: 10px;
}

.right-chevron-lp {
    position: absolute;
    margin-top: -230px;
    right: 20px;
}

/* Desktop carousel styles */
@media (min-width: 992px) {
    .explore-scroll-lc {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        overflow-y: hidden;
        cursor: grab;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        margin-left: 0 !important;
        margin-right: 0 !important;
        user-select: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        touch-action: pan-x;
        /* Hide scrollbar on desktop */
        -ms-overflow-style: none;
        /* IE and Edge */
        scrollbar-width: none;
        /* Firefox */
    }

    .explore-scroll-lc:active {
        cursor: grabbing;
    }

    .explore-scroll-lc.dragging {
        cursor: grabbing;
        scroll-behavior: auto;
    }

    .explore-scroll-lc.dragging * {
        pointer-events: none;
    }

    /* Hide scrollbar on desktop - Webkit browsers */
    .explore-scroll-lc::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }

    /* Ensure cards are in one row and maintain fixed width */
    .explore-scroll-lc>.col-md-4 {
        flex: 0 0 auto !important;
        width: 280px !important;
        max-width: 280px !important;
        margin-right: 19px;
        margin-left: 0;
        margin-bottom: 0;
    }
}

.locality-page .explore-list li i {
    color: #ff6b35;
    flex-shrink: 0;
}

.locality-page .collapse-link {
    color: #333333;
    text-decoration: none;
    font-size: 14px;
    font-weight: 400;
    margin-top: 10px;
    display: inline-block;
}

.locality-page .collapse-link:hover {
    text-decoration: underline;
}

.locality-page .explore-arrow {
    position: absolute;
    color: #999;
    font-size: 24px;
}

/* Sidebar Styles */
.locality-page .sidebar {
    height: 1090px;
    background: #ffffff;
    border-radius: 10px;
    padding: 20px 15px;
    position: relative;
}

.locality-page .map-container {
    width: 507px;
    height: 300px;
    border-radius: 14px;
    left: 25px;
    margin-bottom: 30px;
    background-image: url('../images/map.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    opacity: 1;
}

.locality-page .view-map-button {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 165px;
    height: 51px;
    background: #FF5403;
    color: #FFFFFF;
    border: none;
    border-radius: 26px;
    padding: 0;
    font-size: 16px;
    font-weight: 400;
    font-style: normal;
    line-height: 104%;
    letter-spacing: 0%;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    z-index: 10;
    opacity: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.locality-page .sidebar .view-map-button:hover {
    background: #e55a2b;
    transform: translate(-50%, -50%) scale(1.05);
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.3);
}

.locality-page .sidebar-section {
    margin-bottom: 40px;
}

.locality-page .sidebar-section h3 {
    font-size: 20px;
    font-weight: 600;
    color: #2c2c2c;
    margin-bottom: 20px;
}

.locality-page .property-button {
    display: flex;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 15px 5px;
    background: #ffffff;
    border: 1px solid #D9D9D9;
    border-radius: 8px;
    text-align: left;
    font-weight: 500;
    font-size: 12px;
    color: #333;
    margin-bottom: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.locality-page .property-button:hover {
    border-color: #ff6b35;
    background: #fff5f2;
    color: #ff6b35;
}

.locality-page .property-button strong {
    display: block;
    margin-bottom: 4px;
}

.locality-page .property-button span {
    color: #F06A37;
    font-size: 11px;
}

/* =========================
   Reviews and Ratings (Desktop)
========================= */
.reviews-ratings-section {
    padding: 25px 0;
    background: #fff;
}

.reviews-heading {
    font-size: 24px;
    font-weight: 600;
    color: #ff5403;
    margin-bottom: 15px;
}

/* Card */
.review-card {
    background: #fff;
    border: 1px solid #D9D9D966;
    border-radius: 14px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    height: 100%;
}

/* Icon circle */
.review-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #FFF8F5;
    /* placeholder circle background */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.review-icon img {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

/* Text */
.review-content h4 {
    font-size: 16px;
    font-weight: 600;
    color: #111;
    margin: 0;
    line-height: 1.2;
}

.review-content p {
    font-size: 16px;
    font-weight: 400;
    color: #444;
    margin: 2px 0 0;
}

/* ===============================
   Mohali Discussion Section (Desktop)
================================= */
.mohali-discussion-section {
    padding: 40px 0;
    background: #ffffff;
}

.discussion-title {
    font-size: 32px;
    font-weight: 600;
    color: #333;
    margin-bottom: 14px;
}

/* Left image */
.discussion-img-box {
    border-radius: 20px;
    overflow: hidden;
    width: 100%;
    height: 426px;
}

.discussion-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Form card */
.discussion-form-card {
    background: #fff;
    border: 1px solid #D9D9D9;
    border-radius: 20px;
    padding: 22px;
}

/* Fields */
.discussion-field {
    position: relative;
    margin-bottom: 18px;
    margin-top: 32px;
}

.dis-title-field {
    position: relative;
}

.discussion-label {
    position: absolute;
    top: -18px;
    left: 30px;
    background: #ffffff;
    padding: 6px 10px;
    font-size: 16px;
    font-weight: 400;
    color: #333333;
    margin-bottom: 8px;
    display: block;
    z-index: 2;
}

.discussion-label-rating {
    padding-left: 10px;
    font-size: 16px;
    font-weight: 400;
    color: #333;
    display: block;
}

/* Inputs */
.discussion-input {
    border-radius: 37.5px;
    padding: 12px 36px;
    border: 1px solid #D9D9D9;
    font-size: 14px;
}

/* When user clicks or types in input/select/textarea */
.discussion-input:focus,
.discussion-textarea:focus {
    border: 1px solid #FF5403 !important;
    box-shadow: 0 0 0 3px rgba(255, 84, 3, 0.15) !important;
    outline: none !important;
}

.discussion-textarea {
    border-radius: 37.4px;
    padding: 14px 36px;
    border: 1px solid #e5e5e5;
    font-size: 14px;
    resize: none;
}

/* Stars */
.rating-stars {
    display: flex;
    gap: 10px;
    font-size: 26px;
    color: #222;
    line-height: 1;
}

/* Button */
.discussion-btn {
    background: #ff5403;
    color: #fff;
    border: none;
    border-radius: 40px;
    padding: 12px 28px;
    font-size: 14px;
    font-weight: 400;
    box-shadow: none;
}

.discussion-btn:hover {
    background: #e84b00;
    color: #fff;
}

.reviews-heading-rental {
    font-size: 24px;
    font-weight: 600;
    color: #ff5403;
    margin-bottom: -5px;
}

.reviews-heading-projects {
    font-size: 24px;
    font-weight: 600;
    color: #ff5403;
    margin-bottom: 8px;
}

.reviews-see-more {
    font-weight: 400;
    font-size: 16px;
    color: #333;
    margin-top: 14px;
    text-decoration: none;
}

.reviews-see-more-projects {
    font-weight: 400;
    font-size: 16px;
    color: #333;
    margin-top: 14px;
    text-decoration: none;
}

/* Localities Section */
.localities-page-1 .localities-section {
    padding: 67px 20px 40px 20px;
    max-width: 1500px;
    margin: 0 auto;
}

.localities-page-1 .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
}

/* Override Bootstrap flex utilities if needed */
.localities-page-1 .section-header.d-flex {
    display: flex !important;
}

.localities-page-1 .section-title {
    font-size: 36px;
    justify-content: center;
    font-weight: 600;
    color: #2c2c2c;
    text-align: center;
    flex: 1;
    margin-bottom: 0;
}

.localities-page-1 .carousel-nav {
    display: flex;
    gap: 20px;
    padding-right: 20px;
}

.localities-page-1 .nav-arrow,
.localities-page-1 .nav-arrow.btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid #333333;
    background-color: #ffffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    color: #666;
    padding: 0;
    box-shadow: none;
}

.localities-page-1 .nav-arrow.btn:focus {
    box-shadow: none;
    outline: none;
}

.localities-page-1 .nav-arrow:hover {
    border-color: #ff6b35;
    color: #ff6b35;
    background: #fff5f2;
}

.localities-page-1 .nav-arrow i {
    font-size: 0;
    width: 7.5px;
    height: 15px;
    display: inline-block;
    position: relative;
    opacity: 1;
    transform: rotate(0deg);
}

.localities-page-1 .nav-arrow.prev-arrow i::before {
    content: '';
    position: absolute;
    width: 10.6px;
    height: 1.5px;
    background: #333333;
    top: 50%;
    left: 0;
    transform: translateY(-50%) rotate(45deg);
    transform-origin: left center;
}

.localities-page-1 .nav-arrow.prev-arrow i::after {
    content: '';
    position: absolute;
    width: 10.6px;
    height: 1.5px;
    background: #333333;
    top: 50%;
    left: 0;
    transform: translateY(-50%) rotate(-45deg);
    transform-origin: left center;
}

.localities-page-1 .nav-arrow.next-arrow i::before {
    content: '';
    position: absolute;
    width: 10.6px;
    height: 1.5px;
    background: #333333;
    top: 50%;
    right: 0;
    transform: translateY(-50%) rotate(-45deg);
    transform-origin: right center;
}

.localities-page-1 .nav-arrow.next-arrow i::after {
    content: '';
    position: absolute;
    width: 10.6px;
    height: 1.5px;
    background: #333333;
    top: 50%;
    right: 0;
    transform: translateY(-50%) rotate(45deg);
    transform-origin: right center;
}

.localities-page-1 .localities-carousel {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding: 10px 0 10px 0;
    padding-right: 20px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    cursor: grab;
    -webkit-overflow-scrolling: touch;
}

.localities-page-1 .localities-carousel:active {
    cursor: grabbing;
}

.localities-page-1 .localities-carousel::-webkit-scrollbar {
    display: none;
}

.localities-page-1 .locality-card {
    flex: 0 0 196px;
    width: 223px;
    height: 223px;
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
    background: white;
    position: relative;
}

.localities-page-1 .locality-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: #00000066;
    pointer-events: none;
}

.localities-page-1 .card-image {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #f0f0f0;
    position: relative;
}

.localities-page-1 .card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.localities-page-1 .card-label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 15px 20px;
    font-size: 20px;
    font-weight: 600;
    color: #ffffff;
    text-align: center;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.5) 0%, transparent 100%);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    z-index: 1;
}

/* About Section */
.localities-page-1 .about-section {
    padding: 0px 20px;
    max-width: 1500px;
    margin: 0 auto;
    text-align: center;
    margin-top: 0px;
}

.localities-page-1 .about-section .section-title {
    justify-content: center;
    padding: 0;
    font-size: 36px;
    font-weight: 600;
    color: #2c2c2c;
    margin-bottom: 20px;
}

.localities-page-1 .about-content {
    max-width: 100%;
    margin: 0;
    text-align: left;
}

.localities-page-1 .about-content p {
    font-size: 16px;
    font-weight: 400;
    color: #666666;
    width: 100%;
    max-width: 1439px;
    line-height: 1.8;
    text-align: justify;
    margin: 0;
}

/* Map Section */
.localities-page-1 .map-section {
    padding: 0;
    margin-top: 60px;
    display: flex;
    justify-content: center;
    width: 100%;
}

.localities-page-1 .map-container {
    position: relative;
    width: 1290px;
    height: 300px;
    overflow: hidden;
    margin: 0 auto;
    border-radius: 20px;
    background-image: url('../images/map.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.localities-page-1 .view-map-button {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 165px;
    height: 51px;
    background: #FF5403;
    color: #FFFFFF;
    border: none;
    border-radius: 26px;
    padding: 0;
    font-size: 16px;
    font-weight: 400;
    font-style: normal;
    line-height: 104%;
    letter-spacing: 0%;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    z-index: 10;
    opacity: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.localities-page-1 .view-map-button:hover {
    background: #e55a2b;
    transform: translate(-50%, -50%) scale(1.05);
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.3);
}

.localities-page-1-hero {
    min-height: 462px;
}

/* Show All Button */
.show-all-button {
    background: #FFFFFF;
    color: #333333;
    border: 1px solid #666666;
    border-radius: 50px;
    padding: 10px 30px;
    font-size: 16px;
    font-weight: 400;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.show-all-button:hover {
    background: #F5F5F5;
    border-color: #333333;
}

.pg-listing-broker-card{
    height: 46%;
}

.pg-listing-report-card{
    height: 46%;
}

.credit-card-title-main{
    font-size: 54.76px;
}

.credit-card-title-main strong::after {
    width: 306px;
}

.credit-card-title-sub{
    font-size: 27px;
}
.btn_cursor {
    cursor: pointer;
}

/* Top Cities (rent / PG / buy / flatmate): mobile layout + scrollable city tabs */
@media (max-width: 767.98px) {
    .top-cities-section {
        padding-top: 28px !important;
        padding-bottom: 0px !important;
        padding-left: 16px;
    }

    .top-cities-section .city-tabs {
        justify-content: flex-start !important;
        flex-wrap: nowrap !important;
        gap: 0px !important;
        padding-bottom: 0px !important;
    }

    .top-cities-section .city-tab.active::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 55%;
        max-width: 96px;
        min-width: 60px;
        height: 5px;
        border-radius: 2px 2px 0px 0px;
        background: #FF5403;
        z-index: 2;
    }

    .top-cities-section .city-tab {
        background: transparent !important;
        border: none !important;
        padding: 10px 14px 12px !important;
    }

    .top-cities-section .city-tabs-wrapper {
        margin-left: -12px;
        margin-right: -12px;
        padding-left: 12px;
        padding-right: 12px;
        margin-bottom: 10px;
        box-sizing: border-box;
    }

    .city-list-title {
        font-weight: 600;
        color: var(--text-dark);
        margin-bottom: 12px;
        font-size: 14px;
        line-height: 1.3;
    }

    .city-list-card {
        padding: 8px;
    }

    .city-list a {
        font-size: 12px;
    }

    .top-cities-section .top-cities-header {
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 12px;
        margin-bottom: 20px;
    }

    .top-cities-section .top-cities-nav-buttons {
        display: none;
    }

    .top-cities-section .top-cities-title {
        padding-left: 0;
        font-size: 1.35rem;
    }

    .top-cities-section .house-icon-blurred {
        display: none;
    }

    .top-cities-content-wrapper {
        padding-left: 0;
        padding-right: 0;
    }

    .top-cities-subtitle {
        font-size: 10px;
    }

    .top-cities-content-wrapper .carousel-nav-left,
    .top-cities-content-wrapper .carousel-nav-right {
        display: none !important;
    }

    .top-cities-section .city-nav-arrow,
    .top-cities-section .city-nav-prev,
    .top-cities-section .city-nav-next {
        display: none !important;
    }

    .top-cities-section .city-cards-wrapper {
        padding-left: 0;
        padding-right: 0;
    }

    .top-cities-section .section-title-wrapper .section-title {
        font-size: 1.35rem;
        padding-left: 12px;
        padding-right: 12px;
    }
}

/* Top Cities: card columns in one horizontal row, scrollable, no scrollbar */
@media (max-width: 991.98px) {
    /* Flex parents must allow children to shrink so overflow-x can scroll (min-width: 0 chain) */
    .top-cities-section .container {
        min-width: 0;
    }

    .top-cities-section .top-cities-content-wrapper {
        min-width: 0;
        width: 100%;
        max-width: 100%;
    }

    .top-cities-section .city-rental-top-cities-container,
    .top-cities-section .city-top-cities-container {
        min-width: 0;
        flex: 1 1 100%;
        width: 100%;
        max-width: 100%;
        overflow: hidden;
    }

    .top-cities-section .city-cards-wrapper {
        min-width: 0;
        width: 100%;
        max-width: 100%;
        display: block;
    }

    .top-cities-section .row.top-cities-cards,
    .top-cities-section .city-top-cities-container > .row {
        flex-wrap: nowrap !important;
        flex-direction: row !important;
        flex: 1 1 auto;
        min-width: 0;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x;
        scrollbar-width: none;
        -ms-overflow-style: none;
        gap: 25px;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-bottom: 12px;
        --bs-gutter-x: 0;
    }

    .top-cities-section .row.top-cities-cards::-webkit-scrollbar,
    .top-cities-section .city-top-cities-container > .row::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }

    .top-cities-section .row.top-cities-cards > [class*="col-"],
    .top-cities-section .city-top-cities-container > .row > [class*="col-"] {
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Card width follows content (no fixed column width); never wider than viewport */
    .top-cities-section .row.top-cities-cards .city-list-card,
    .top-cities-section .city-top-cities-container > .row .city-list-card {
        width: min(max-content, 92vw);
        max-width: none;
        min-width: 0;
        box-sizing: border-box;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .top-cities-highlight {
        color: #000;
    }
}

.explore-section-index{
    padding:0px;
}


.lr-afterpost-property {
    min-height: 100vh;
  }
  
  .lr-afterpost-property__shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow-x: clip;
    position: relative;
  }
  
  /* ---- Orange header band + wave ---- */
  .lr-afterpost-property__header-band {
    position: relative;
    width: 100%;
    height: 586px;
    padding: 48px 24px 120px;
    background: linear-gradient(180deg, #f06a37 0%, #d94f1f 55%, #c94a1c 100%);
    overflow: hidden;
  }
  
  .lr-afterpost-property__wave {
    position: absolute;
    pointer-events: none;
    user-select: none;
    width: min(1000px, 145vw);
    height: auto;
    top: -100px;
    right: max(-12vw, -150px);
    left: auto;
    transform: scaleX(-1) rotate(-55deg);
    transform-origin: center;
    opacity: 0.25;
    mix-blend-mode: color-dodge;
  }
  
  .lr-afterpost-property__hero {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    color: #ffffff;
    max-width: 560px;
    margin: 0 auto;
  }
  
  .lr-afterpost-property__hero-icon {
    width: 146px;
    height: 146px;
    border-radius: 50%;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    flex-shrink: 0;
  }
  
  .lr-afterpost-property__hero-icon-img {
    width: 86px;
    height: 86px;
    display: block;
    object-fit: contain;
  }
  
  .lr-afterpost-property__title {
    font-size: 36px;
    font-weight: 700;
    line-height: 120%;
    letter-spacing: 0.3px;
    margin-bottom: 10px;
  }
  
  .lr-afterpost-property__subtitle {
    font-size: 18px;
    font-weight: 400;
    line-height: 150%;
    letter-spacing: 0.2px;
    opacity: 0.95;
    max-width: 420px;
    color: rgba(255, 215, 200, 1);
  }
  
  /* ---- Off-white lower + overlapping card ---- */
  .lr-afterpost-property__lower {
    flex: 1;
    width: 100%;
    background: #f5f3f0;
    display: flex;
    justify-content: center;
    padding: 0 max(20px, calc((100vw - 1440px) / 2)) 48px;
    margin-top: -245px;
  }
  
  .lr-afterpost-property__card {
    width: 100%;
    max-width: 1440px;
    min-height: 593px;
    background: rgba(255, 255, 255, 1);
    border-radius: 60px;
    padding: 68px 80px 72px;
    text-align: center;
    position: relative;
    z-index: 2;
    font-family: var(--lr-app-font);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
  }
  
  /* Centered content column (“Space” margins live in card padding + max-width) */
  .lr-afterpost-property__card-inner {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }
  
  .lr-afterpost-property__card-lead {
    font-family: var(--lr-app-font);
    font-size: 28px;
    font-weight: 700;
    font-style: normal;
    color: #111111;
    margin: 0;
    line-height: 120%;
    letter-spacing: 0.3px;
    text-align: center;
    width: 100%;
  }
  
  .lr-afterpost-property__card-name {
    font-weight: 700;
  }
  
  .lr-afterpost-property__card-copy {
    font-family: var(--lr-app-font);
    font-size: 24px;
    font-weight: 400;
    font-style: normal;
    line-height: 140%;
    letter-spacing: 0;
    text-align: center;
    color: #5c5c5c;
    margin: 0;
    width: 100%;
    max-width: 640px;
  }
  
  .lr-afterpost-property__card-copy-bold {
    font-family: var(--lr-app-font);
    font-size: inherit;
    font-weight: 700;
    font-style: normal;
    line-height: inherit;
    letter-spacing: inherit;
    color: #1a1a1a;
  }
  
  .lr-afterpost-property__card-copy-reg {
    font-family: var(--lr-app-font);
    font-size: inherit;
    font-weight: 400;
    font-style: normal;
    line-height: inherit;
    letter-spacing: inherit;
    color: #5c5c5c;
  }
  
  /* Wrapper keeps desktop layout identical (children slot into .card-inner flex) */
  .lr-afterpost-property__assist-panel {
    display: contents;
  }
  
  .lr-afterpost-property__straddle-icon {
    display: none;
  }
  
  .lr-afterpost-property__assist-link {
    display: block;
    font-family: var(--lr-app-font);
    font-size: 20px;
    font-style: normal;
    line-height: 156%;
    letter-spacing: 0.2px;
    text-align: center;
    text-decoration: none;
    margin: 0;
    width: 100%;
    color: #6b6b6b;
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
    margin-top: 10px;
    
  }
  
  .lr-afterpost-property__assist-link-q {
    font-family: var(--lr-app-font);
    font-weight: 500;
    font-style: normal;
    font-size: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    color: inherit;
     
  }
  
  .lr-afterpost-property__assist-link-action {
    font-family: var(--lr-app-font);
    font-weight: 400;
    font-style: normal;
    font-size: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    color: inherit;
    margin-left: 0.35em;
  }
  
  .lr-afterpost-property__assist-link:hover,
  .lr-afterpost-property__assist-link:hover .lr-afterpost-property__assist-link-q,
  .lr-afterpost-property__assist-link:hover .lr-afterpost-property__assist-link-action {
    color: #4a4a4a;
  }
  
  .lr-afterpost-property__card-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin: 8px 0 0;
    width: 100%;
    
  }
  .lr-afterpost-property__card-actions  i {
    font-size: 21px;
    
  }
  .lr-afterpost-property__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    padding: 12px 22px;
    border-radius: 999px;
    border: 1px solid #d9d9d9;
    background: #ffffff;
    color: #f06a37;
    font-size: 21px;
    font-weight: 400;
    line-height: 140%;
    letter-spacing: 0.2px;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease;
    width: 225px;
  }
  
  .lr-afterpost-property__action:hover {
    background: #fafafa;
    border-color: #c4c4c4;
  }
  
  .lr-afterpost-property__action-icon {
    font-size: 1.1rem;
    line-height: 1;
  }
  
  /* Badge + primary CTA + dismiss (extra space above = gap from pills) */
  .lr-afterpost-property__card-cta-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin: 44px 0 0;
  }
  
  /* Peach banner + orange button: one block, flush join, modest width */
  .lr-afterpost-property__card-cta-fused {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
    border-radius: 8px;
    overflow: hidden;
  }
  
  .lr-afterpost-property__card-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 12px 18px;
    border-radius: 0;
    background: #fff3eb;
    color: #4a4a4a;
    font-size: 12px;
    font-weight: 500;
    line-height: 100%;
    letter-spacing: 0.15px;
    text-align: center;
    width: 100%;
    margin-bottom: -10px;
    height: 45px;
  }
  
  .lr-afterpost-property__badge-icon {
    color: #f06a37;
    font-size: 0.95rem;
    flex-shrink: 0;
  }
  
  .lr-afterpost-property__badge-text {
    text-align: center;
  }
  
  .lr-afterpost-property__btn-primary {
    display: block;
    width: 100%;
    margin: 0;
    padding: 13px 28px;
    border: none;
    border-radius: 8px;
    background: #f06a37;
    color: #ffffff;
    font-size: 16px;
    font-weight: 500;
    line-height: 120%;
    letter-spacing: 0.25px;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    box-shadow: none;
    white-space: nowrap;
    transition: filter 0.15s ease, transform 0.1s ease;
  }
  
  .lr-afterpost-property__btn-primary:hover {
    filter: brightness(1.03);
  }
  
  .lr-afterpost-property__btn-primary:active {
    transform: scale(0.99);
  }
  
  .lr-afterpost-property__link-dismiss {
    display: block;
    margin: 10px 0 0;
    font-size: 16px;
    font-weight: 400;
    line-height: 150%;
    letter-spacing: 0.2px;
    color: rgba(103, 103, 103, 1);
    text-decoration: none;
    text-align: center;
    width: 100%;
  }
  
  .lr-afterpost-property__link-dismiss:hover {
    color: #6b6b6b;
  }