.homepage-first-section {
    min-height: 70vh;
    position: relative;
    max-width: 100%;
    overflow-x: hidden;
}

.slideInside {
    position: absolute;
    top: 0 !important;
    width: 100%;
    color: #fff;
}

.slide-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}

.searchCustom {
    max-width: 400px;
    text-align: center;
}

#button-addon2 {
    background: #0c356a;
    color: #fff;
    padding: 0 30px;
}

.input-group .input-group-append {
    position: relative;
    z-index: 2;
}

.customFilterBg {
    position: absolute;
    right: 22px;
    left: none;
    z-index: 4;
    transform: scale(1.5);
    top: 5px;
    background: none;
    border: none;
}

.productList {
    min-height: 320px;
    background-size: cover !important;
    border-radius: 10px;
    background-position: center !important;
    position: relative;
    margin-bottom: 20px;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

.prodContainerHome {
    margin-bottom: 30px;
}

.productList_1 {
    background: url("/images/villa-design.jpeg");
}

.productList_1_back {
    background-image: linear-gradient(
            rgba(0, 0, 0, 0.6),
            rgba(14, 7, 117, 0.798)
        ),
        url("/images/villa-design.jpeg");
    background-size: cover;
    background-position: center;
}

.productList_2 {
    background: url("/images/villa-location-02.jpg");
}

.productList_2_back {
    background-image: linear-gradient(
            rgba(0, 0, 0, 0.6),
            rgba(14, 7, 117, 0.798)
        ),
        url("/images/villa-location-02.jpg");
    background-size: cover;
    background-position: center;
}

.productList_3 {
    background: url("/images/villa-amenities.jpeg");
}
.productList_3_back {
    background-image: linear-gradient(
            rgba(0, 0, 0, 0.6),
            rgba(14, 7, 117, 0.798)
        ),
        url("/images/villa-amenities.jpeg");
    background-size: cover;
    background-position: center;
}

.productList_4 {
    background: url("/images/ecoliving-prop.jpeg");
}

.productList_4_back {
    background-image: linear-gradient(
            rgba(0, 0, 0, 0.6),
            rgba(14, 7, 117, 0.798)
        ),
        url("/images/ecoliving-prop.jpeg");
    background-size: cover;
    background-position: center;
}

.productList_5 {
    background: url("/images/property-smart-living.jpg");
}
.productList_5_back {
    background-image: linear-gradient(
            rgba(0, 0, 0, 0.6),
            rgba(14, 7, 117, 0.798)
        ),
        url("/images/property-smart-living.jpg");
    background-size: cover;
    background-position: center;
}

@media screen and (min-width: 1000px) {
    .productList_1,
    .productList_3,
    .productList_5 {
        margin-top: 50px;
    }
}

.productListTitle {
    color: #ffc436;
    text-align: center;
    margin-top: 10px;
    font-size: 18px;
    text-shadow: 1px 1px #000;
    position: absolute;
    bottom: 10px;
    text-align: center;
    width: 100%;
    font-weight: bold;
}

.footer a {
    color: #fff;
    text-decoration: none;
}

.tableFooter td {
    vertical-align: top;
}

.iconInside {
    color: #0c356a;
}

.iconContainer {
    position: absolute;
    bottom: 10px;
    left: 10px;
    font-weight: bold;
    color: #fff;
    text-shadow: 2px 2px #000;
}

.prodListHome {
    max-width: 100%;
    height: 200px;
    background-size: cover !important;
    border-radius: 15px;
    position: relative;
    background-position: center !important;
}

.subProdContent {
    margin-top: -10px;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    padding: 10px;
    padding-top: 20px;
    position: relative;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

.homeslidebg1 {
    background: url("/images/spacejoy-4xRP0Ajk9ys-unsplash.jpg");
}

.homeslidebg2 {
    background: url("/images/homepage-image2.jpg");
}

.homeslidebg3 {
    background: url("/images/homepage-image1.jpg");
}

.homeSlideBg {
    background-size: cover;
    background-position: center;
    min-height: 650px;
}

.compareIcon {
    position: absolute;
    right: 10px;
    top: 10px;
    z-index: 100;
}

.locationSection {
    background: #f4f4f4;
    padding: 50px 0 0 0;
    margin-bottom: 0;
}

.locationContainer {
    margin-top: -100px;
    background: #f4f4f4;
    border-radius: 10px;
}

.locationBackground {
    min-height: 300px;
    background: #fff;
    /* margin: 10px; */
    border-radius: 15px;
    position: relative;
}

.locationBackground1 {
    background: url("https://storage.googleapis.com/bda_rental/public/images/canggu-bali-view-2.jpg");
    background-size: cover;
    background-position: center;
}

.locationBackground1-back {
    background-image: linear-gradient(
            rgba(0, 0, 0, 0.6),
            rgba(14, 7, 117, 0.798)
        ),
        url("https://storage.googleapis.com/bda_rental/public/images/canggu-bali-view-2.jpg");
}

.locationBackground2 {
    background: url("https://storage.googleapis.com/bda_rental/public/images/seminyak-bali-view2.jpg");
    background-size: cover;
    background-position: center;
}

.locationBackground2-back {
    background-image: linear-gradient(
            rgba(0, 0, 0, 0.6),
            rgba(14, 7, 117, 0.798)
        ),
        url("https://storage.googleapis.com/bda_rental/public/images/seminyak-bali-view2.jpg");
}

.locationBackground3 {
    background: url("/images/kuta-area.jpg");
    background-size: cover;
    background-position: center;
}

.locationBackground3-back {
    background-image: linear-gradient(
            rgba(0, 0, 0, 0.6),
            rgba(14, 7, 117, 0.798)
        ),
        url("/images/kuta-area.jpg");
    background-size: cover;
    background-position: center;
}

.locationBackground4 {
    background: url("https://storage.googleapis.com/bda_rental/public/images/ubud-bali-view.jpg");
    background-size: cover;
    background-position: center;
}

.locationBackground4-back {
    background-image: linear-gradient(
            rgba(0, 0, 0, 0.6),
            rgba(14, 7, 117, 0.798)
        ),
        url("https://storage.googleapis.com/bda_rental/public/images/ubud-bali-view.jpg");
    background-size: cover;
    background-position: center;
}

.locationBackground4 {
    background: url("https://storage.googleapis.com/bda_rental/public/images/ubud-bali-view.jpg");
    background-size: cover;
    background-position: center;
}

.locationBackground5 {
    background: url("https://storage.googleapis.com/bda_rental/public/images/seminyak-bali-view2.jpg");
    background-size: cover;
    background-position: center;
}

.locationBackground5-back {
    background-image: linear-gradient(
            rgba(0, 0, 0, 0.6),
            rgba(14, 7, 117, 0.798)
        ),
        url("https://storage.googleapis.com/bda_rental/public/images/seminyak-bali-view2.jpg");
    background-size: cover;
    background-position: center;
}

.locationBackground6 {
    background: url("https://storage.googleapis.com/bda_rental/public/images/jimbaran-bali-view.jpg");
    background-size: cover;
    background-position: center;
}

.locationBackground6-back {
    background-image: linear-gradient(
            rgba(0, 0, 0, 0.6),
            rgba(14, 7, 117, 0.798)
        ),
        url("https://storage.googleapis.com/bda_rental/public/images/jimbaran-bali-view.jpg");
    background-size: cover;
    background-position: center;
}

.locationBackground7 {
    background: url("https://storage.googleapis.com/bda_rental/public/images/seminyak-bali-view2.jpg");
    background-size: cover;
    background-position: center;
}

.locationBackground8 {
    background: url("https://storage.googleapis.com/balivillasrus/public/images/webview/homepage/villa-in-uluwatu.jpg");
    background-size: cover;
    background-position: center;
}

.locationBackground8-back {
    background-image: linear-gradient(
            rgba(0, 0, 0, 0.6),
            rgba(14, 7, 117, 0.798)
        ),
        url("https://storage.googleapis.com/balivillasrus/public/images/webview/homepage/villa-in-uluwatu.jpg");
    background-size: cover;
    background-position: center;
}

.titleArea {
    position: absolute;
    bottom: 20px;
    left: 20px;
    color: #fff;
    font-weight: bold;
    font-size: 20px;
}

.lastSection {
    position: relative;
    background: url("/images/pexels-photo-338504-villas.jpeg");
    background-size: cover;
    background-position: center;
    color: #fff;
}

.lastSection::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
}

.container {
    position: relative;
    z-index: 1;
}

.bodyAdvanceFilter {
    max-height: 75vh;
    overflow-y: scroll;
}

.width100 {
    width: 100%;
}

.greyColor {
    color: #6c757d;
}

.personalRealtol {
    background: #303030;
    color: #fff;
    padding: 120px 0 120px 0;
}

@media (min-width: 768px) {
    .buttonLifestyle {
        margin-top: 40px;
    }
}

.card {
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

@media (min-width: 768px) {
    .transformTopLeft {
        transform: perspective(1000px) rotateY(10deg);
        transform-origin: right center;
    }

    .transformBottomRight {
        transform-origin: left center;
        transform: perspective(1000px) rotateY(-10deg);
    }
}

@media (max-width: 568px) {
    .searchBarHome > input.form-control {
        font-size: 13px;
    }
}

.iconPr .col-auto {
    padding: 0 5px
}

.iconPr {
    padding: 0 10px
}
.softButton {
    width: fit-content;
    background: #0C356A;
    border: none;
    border-radius: 5px;
    color: #FFC436;
    padding: 5px 10px;
    font-size: 12px
}
.whyBdaSection h3 {
    height: 52px
}

.whyBdaSection img {
    margin-bottom: 20px
}
@media(min-width:768px) {
    .fc2 {
        margin-top: 50px !important
    }
}

.ownershipType {
    margin-top: 10px;
    padding: 2px;
    color: #000;
    background: #FFC436;
    border-radius: 5px;
    font-size: 12px
}

.hotDeals .fa-heart {
    float: right;
    padding: 10px;
    margin-right:15px;
}


  /* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
  .flip-card {
    background-color: transparent;
    height: 320px;
    perspective: 1000px;
    border-radius: 15px;
    margin-bottom: 30px
        /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front,
.flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    /* Safari */
    backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
    background-color: #bbb;
    color: black;
    border-radius: 15px;
}

/* Style the back side */
.flip-card-back {
    background-color: #dbdbdb;
    color: white;
    transform: rotateY(180deg);
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 5px
}