a {
    color: #FF9900;
}

body {
    font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    overflow-x: hidden;
}

.navbar-default {
    background-color: white;
    border-color: white;
}

.nav-item a {
    font-size: 14px;
    color: black;
}

.navbar-text {
    padding-top: 20px;
    line-height: 30px;
    margin: 0;
}

.navbar {
    min-height: 60px;
}

.navbar-brand {
    padding: 10px 15px;
}

.navbar-brand img {
    max-width: 160px;
    height: auto;
}

.popular_community {
    padding: 0 3px 3px 0;
}

.popular_community_jingan,
.popular_community_Xintiandi,
.popular_community_lujiazui,
.popular_community_xuhui,
.popular_community_others {
    width: 100%;
    height: 300px;
    position: relative;
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

.popular_community_jingan {
    background-image: url('/images/jingan_area_property_for_rent.jpg');
}

.popular_community_Xintiandi {
    background-image: url('/images/xintiandi_area_property_for_rent.jpg');
}

.popular_community_lujiazui {
    background-image: url('/images/lujiazui_area_property_for_rent.jpg');
}

.popular_community_xuhui {
    background-image: url('/images/xuhui_area_property_for_rent.jpg');
}

.popular_community_others {
    background-image: url('/images/other_shanghai_area_property_for_rent.jpg');
}

.overlay_dark {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    position: absolute;
    display: table;
    transition: background-color 0.3s ease;
}

.overlay_dark:hover {
    background-color: rgba(0, 0, 0, 0.2);
}

.overlay_dark p {
    color: white;
    font-size: 28px;
    text-align: center;
    vertical-align: middle;
    display: table-cell;
    margin: 0;
}

.head_2 {
    font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 22px;
    font-weight: bold;
    margin-top: 30px;
    margin-bottom: 20px;
}

.news_residential {
    margin: 0;
    padding: 20px 10px 0 0;
    min-height: 380px;
}

.news_residential img {
    width: 100%;
    overflow: hidden;
    height: 260px;
    object-fit: cover;
    transition: filter 0.3s ease;
}

.news_residential img:hover {
    filter: brightness(110%);
}

.news_residential h3,
.news_commercial h3 {
    font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 18px;
    font-weight: bold;
    margin-top: 10px;
    margin-bottom: 5px;
}

.news_residential h4,
.news_commercial h4 {
    font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: bold;
    margin-top: 5px;
    margin-bottom: 5px;
}

.news_commercial {
    margin: 0;
    padding: 20px 10px 0 0;
    min-height: 400px;
    overflow: visible;
}

.news_commercial img {
    width: 100%;
    overflow: hidden;
    height: 280px;
    object-fit: cover;
}

.footer {
    background-color: #a5a5a5;
    margin-top: 50px;
}

.footer_content {
    font-size: 16px;
    margin-top: 40px;
    margin-bottom: 40px;
    color: white;
}

.footer_logo {
    background-color: #939393;
    margin-top: 0;
    min-height: 70px;
    padding: 15px 0;
}

.footer_logo img {
    height: 40px;
    margin-top: 5px;
}

.footer_logo_text {
    text-align: left;
}

.footer_logo_info {
    text-align: right;
    padding-top: 10px;
}

.footer_logo_info p {
    color: white;
    line-height: 20px;
    margin: 0;
}

.line {
    height: 1px;
    width: 100%;
    background-color: white;
}

.line_or {
    height: 1px;
    width: 100%;
    background-color: #FF9900;
}

.rent_property_header,
.rent_office_header,
.hospital_header,
.contact_header,
.about_us_header {
    background-position: center;
    background-size: cover;
    height: 200px;
    position: relative;
}

.rent_property_header {
    background-image: url(../images/banner_housing.jpg);
}

.rent_office_header {
    background-image: url(../images/banner_office.jpg);
}

.hospital_header {
    background-image: url(../images/banner_hospital.jpg);
}

.contact_header {
    background-image: url(../images/banner_contact.png);
}

.about_us_header {
    background-image: url(../images/banner_aboutus.jpg);
}

.rent_property_header_text {
    margin-left: 60px;
    color: white;
    font-size: 30px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-weight: bolder;
}

.stretch-row {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    overflow: visible;
}

/* Prevent flex row from causing horizontal scroll */
.container > .stretch-row {
    margin-left: -15px;
    margin-right: -15px;
}

.rent_property_photo {
    margin-top: 30px;
}

.rent_property_text {
    margin-top: 30px;
    border: 1px #cccccc solid;
    padding: 20px;
}

.rent_property_text h2 {
    margin-bottom: 20px;
    margin-top: 0;
    padding-top: 0;
    line-height: 26px;
    font-size: 22px;
}

.rent_property_text h3 {
    margin-bottom: 20px;
    font-size: 20px;
    color: #FF9900;
}

.rent_property_text ul {
    padding-left: 0;
}

.rent_property_text ul li {
    line-height: 1.5;
    margin-bottom: 10px;
    list-style: none;
    margin-left: 0;
    border-bottom: 1px #cccccc solid;
}

.rent_property_detail {
    margin-top: 30px;
}

.services_list {
    margin-top: 30px;
    border: 1px #cccccc solid;
    padding-left: 20px;
}

.services_list h3 {
    padding: 0;
    color: #FF9900;
}

.services_list ul {
    padding-left: 10px;
}

.services_list ul li {
    line-height: 2.5;
    margin-bottom: 10px;
    list-style: none;
    margin-left: 0;
    font-weight: bold;
    border-bottom: 1px #cccccc solid;
}

.services_content {
    margin-top: 30px;
    margin-left: 20px;
    border: 1px #cccccc solid;
    padding: 20px;
}

.services_content h2 {
    padding: 0 0 20px 0;
    color: #FF9900;
}

.services_content img {
    margin: 20px;
    width: 90%;
    height: auto;
}

#search-search-items {
    width: 100%;
    float: left;
    background-color: rgba(0, 0, 0, 0.03);
    margin-top: 1em;
    margin-bottom: 1em;
    padding: 5px 10px;
    border-radius: 4px;
}

#search-search-line {
    width: 100%;
    float: left;
    padding: 0;
    margin: 0;
}

#search-search-line a {
    width: 100%;
    float: left;
    padding: 0 4px;
    margin: 0;
}

#search-search-line p {
    min-width: 100px;
    width: 10%;
    float: left;
    margin: 0;
    height: 30px;
    font-size: 14px;
    padding: 2px 5px 0 0;
    border-bottom: 1px dashed rgba(0, 0, 0, 0.3);
}

#search-search-line ul {
    width: 90%;
    height: 30px;
    margin: 0;
    float: left;
    border-bottom: 1px dashed rgba(0, 0, 0, 0.3);
}

#search-search-line ul li {
    padding: 2px 15px 0 0;
    margin: 0;
    height: auto;
    font-size: 14px;
    display: inline-block;
    list-style: none;
}

#search-search-line ul li a {
    text-decoration: underline;
}

#search-search-line ul li a:hover {
    text-decoration: underline;
    background-color: #FF9900;
    color: white;
}

#search-search-line span {
    width: 100%;
    margin: 5px 0;
    text-align: center;
    font-size: 14px;
    display: inline-block;
}

.search-price {
    width: 70px;
    height: 24px;
    font-size: 12px;
    float: left;
}

.search-compound {
    width: 200px;
    height: 24px;
    font-size: 12px;
    float: left;
}

.search-button {
    width: 70px;
    height: 23px;
    font-size: 12px;
    color: white;
    background: #FF9900;
    border: 1px solid #FFFFFF;
    margin: 0;
    float: left;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.search-button:hover {
    background-color: #e68a00;
}

.selected {
    background-color: #FF9900;
    color: white;
}

.rent_property_resault {
    margin: 20px 20px 10px 30px;
    padding: 10px;
    border: 1px #cccccc solid;
}

.rent_property_resault_link {
    margin-top: 16px;
}

.rent_property_resault_photo img {
    width: 100%;
    height: 320px;
    object-fit: cover;
}

.pagination {
    color: #FF9900;
    border: 1px #FF9900 solid;
    margin-left: 20px;
}

.pagination > li > a:hover {
    color: #FF9900;
}

.pagination > li > a,
.pagination > li > span {
    color: #FF9900;
}

.pagination > .active > a,
.pagination > .active > a:focus,
.pagination > .active > a:hover,
.pagination > .active > span,
.pagination > .active > span:focus,
.pagination > .active > span:hover {
    background-color: #FF9900;
    border-color: #FF9900;
}

.map {
    height: 560px;
}

.mymap {
    height: 500px;
    width: 100%;
}

.tab-pane {
    min-height: 200px;
    height: auto;
}

.quick_online {
    width: 400px;
    margin-left: 50px;
}

.quick_online_label {
    margin-top: 10px;
}

/* ========== Property Image Slider ========== */

/*
 * Fixed-height container. Images are centered (both axes) inside and
 * scaled down proportionally if they exceed the box — portrait or
 * landscape, large or small. Areas not covered by the image show the
 * light grey background (no cropping, no distortion).
 */
.prop-slider {
    position: relative;
    width: 100%;
    background: #f0f0f0;
    /* Fixed height on desktop */
    height: 480px;
    overflow: hidden;
    /* Vertical centre arrows against this element */
    display: flex;
    flex-direction: column;
}

/* Each slide fills the whole slider box */
.prop-slide {
    display: none;
    width: 100%;
    height: 100%;
}

.prop-slide.active {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Inner wrapper — just centres the <img> */
.prop-slide-inner {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f0f0f0;
}

/*
 * The key rule:
 *   max-width + max-height keep the image inside the box.
 *   width/height auto preserve the aspect ratio.
 *   object-fit is NOT used so the image never crops.
 */
.prop-slide-inner img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;   /* fallback for flex-item sizing edge cases */
}

/* ---- Arrow buttons ---- */
.prop-prev,
.prop-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    border: none;
    font-size: 36px;
    line-height: 1;
    padding: 10px 16px;
    cursor: pointer;
    z-index: 10;
    transition: background 0.2s;
    /* keep arrows out of normal flow so they overlay the image */
    pointer-events: auto;
    user-select: none;
}

.prop-prev:hover,
.prop-next:hover {
    background: rgba(0, 0, 0, 0.75);
}

.prop-prev { left: 0; border-radius: 0 4px 4px 0; }
.prop-next { right: 0; border-radius: 4px 0 0 4px; }

/* ---- Dot indicators (below the slider box) ---- */
.prop-dots {
    width: 100%;
    text-align: center;
    padding: 8px 0 6px;
    background: #f0f0f0;
    line-height: 1;
}

.prop-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 0 5px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.22);
    cursor: pointer;
    transition: background 0.2s;
}

.prop-dot.active {
    background: #FF9900;
}

/* ---- Tablet ---- */
@media screen and (max-width: 991px) {
    .prop-slider {
        height: 380px;
    }
}

/* ---- Mobile ---- */
@media screen and (max-width: 767px) {
    .prop-slider {
        height: 280px;
    }

    .prop-prev,
    .prop-next {
        font-size: 26px;
        padding: 7px 11px;
    }
}

/* ---- Small mobile ---- */
@media screen and (max-width: 480px) {
    .prop-slider {
        height: 220px;
    }
}

.inquiry {
    padding: 10px 20px;
    max-width: 480px;
}

.inquiry p {
    padding-top: 10px;
    font-size: 14px;
}

.inquiry h3 {
    color: #FF9900;
    font-size: 16px;
    margin-left: 0;
    padding-left: 0;
}

.details {
    font-size: 14px;
    line-height: 30px;
}

/* ========== Responsive Styles ========== */

/* Tablet (Portrait) */
@media screen and (max-width: 991px) {
    .popular_community_jingan,
    .popular_community_Xintiandi,
    .popular_community_lujiazui,
    .popular_community_xuhui,
    .popular_community_others {
        height: 220px;
    }
    
    .news_residential,
    .news_commercial {
        min-height: 320px;
    }
    
    .footer_logo_text,
    .footer_logo_info {
        text-align: center;
    }
    
    .footer_logo_info {
        margin-top: 10px;
    }
    
    /* Property detail page */
    .rent_property_photo,
    .rent_property_text {
        margin-top: 15px;
    }
    
    .rent_property_text {
        margin-left: 15px;
        margin-right: 15px;
    }
}

/* Mobile */
@media screen and (max-width: 767px) {
    /* Navbar */
    .navbar-brand img {
        width: 120px;
    }

    .navbar-toggle {
        margin-top: 8px;
    }

    /* Popular communities */
    .popular_community_jingan,
    .popular_community_Xintiandi,
    .popular_community_lujiazui,
    .popular_community_xuhui,
    .popular_community_others {
        height: 150px;
    }

    .overlay_dark p {
        font-size: 18px;
    }

    /* Headings */
    .head_2 {
        font-size: 18px;
        margin-top: 20px;
    }

    /* Residential listings */
    .news_residential {
        min-height: auto;
        margin-bottom: 15px;
    }

    .news_residential img {
        height: 180px;
    }

    .news_residential h3,
    .news_residential h4 {
        font-size: 14px;
    }

    /* Commercial listings */
    .news_commercial {
        min-height: auto;
        margin-bottom: 15px;
    }

    .news_commercial img {
        height: 180px;
    }

    /* Search section */
    #search-search-line p {
        width: 20%;
        min-width: 60px;
        border-bottom: 0;
        font-size: 12px;
    }

    #search-search-line ul {
        width: 75%;
        height: auto;
    }

    #search-search-line {
        height: auto;
    }

    #search-search-line ul li {
        padding: 2px 8px 0 0;
        font-size: 11px;
    }

    .search-button {
        width: 50px;
        height: 24px;
        font-size: 11px;
    }

    .search-price,
    .search-compound {
        width: 60px;
        font-size: 11px;
    }

    /* Footer */
    .footer {
        margin-top: 30px;
    }

    .footer_content {
        margin-top: 20px;
        margin-bottom: 20px;
        text-align: center;
    }

    /* Page headers */
    .rent_property_header {
        height: 120px;
    }

    .rent_property_header_text {
        font-size: 20px;
        margin-left: 20px;
    }

    /* Property info box */
    .rent_property_photo {
        margin-top: 10px;
        padding-left: 15px;
        padding-right: 15px;
    }

    .rent_property_text {
        margin-top: 10px;
        margin-left: 15px;
        margin-right: 15px;
        padding: 15px;
    }

    .rent_property_text h2 {
        font-size: 18px;
    }

    .rent_property_text h3 {
        font-size: 16px;
    }

    .rent_property_text ul li {
        font-size: 12px;
    }

    /* Search results */
    .rent_property_resault {
        margin: 10px;
    }

    .rent_property_resault_photo img {
        height: auto;
    }

    /* Forms */
    .quick_online {
        width: 100%;
        margin-left: 0;
    }

    /* Map */
    .mymap {
        height: 300px;
    }

    .tab-pane {
        height: auto;
        min-height: 100px;
    }
}

/* Small Mobile */
@media screen and (max-width: 480px) {
    .navbar-brand img {
        width: 100px;
    }

    .popular_community_jingan,
    .popular_community_Xintiandi,
    .popular_community_lujiazui,
    .popular_community_xuhui,
    .popular_community_others {
        height: 120px;
    }

    .overlay_dark p {
        font-size: 14px;
    }

    .news_residential img,
    .news_commercial img {
        height: 150px;
    }
}