.floating-broker-avatar {
    position: absolute;
    top: -85px;  
    right: 0;
    width: 120px;
    height: 65.5px; 
    overflow: hidden;
    background-color: white;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2), 
                -2px -2px 5px rgba(255, 255, 255, 0.5);  /* 3D shadow effect */
    border-radius: 8px;  /* Slightly rounded corners for better aesthetics */
    transform: perspective(100px) rotateX(5deg) rotateY(-5deg);  /* 3D tilt effect */
    transition: transform 0.3s ease, box-shadow 0.3s ease;  /* Smooth transition */
}

.floating-broker-avatar:hover {
    transform: perspective(100px) rotateX(0deg) rotateY(0deg) scale(1.1);  /* Slight zoom on hover */
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);  /* Stronger shadow on hover */

}

.broker-avatar-rect {
    width: 100%;
    height: 100%;
    object-fit: cover;  /* Ensures the image fits perfectly within the rectangle */
}




/* Suggestions box styling */
.suggestions-box {
  position: absolute;
  background-color: #FFFFFF; /* White background for suggestions */
  border: 1px solid #C0B283; /* Light gold border */
  max-height: 200px;
  overflow-y: auto;
  width: 100%;
  z-index: 1000;
}

/* Individual suggestion item */
.suggestions-box div {
  padding: 10px;
  cursor: pointer;
  color: #000000; /* Black text color for suggestions */
  font-family: "Your Custom Font", sans-serif; /* Use your font family */
}

/* Highlight suggestion on hover */
.suggestions-box div:hover {
  background-color: #C0B283; /* Light gold background on hover */
  color: #FFFFFF; /* White text on hover for better contrast */
}

/* Recent searches box */
.recent-searches {
  padding: 10px;
  background-color: #a19367; /* Dark gold background for recent searches header */
  font-weight: bold;
  color: #FFFFFF; /* White text for the recent searches header */
}

/* Individual recent search item */
.recent-searches-item {
  padding: 10px;
  cursor: pointer;
  color: #000000; /* Black text color for recent search items */
}

/* Highlight recent search on hover */
.recent-searches-item:hover {
  background-color: #C0B283; /* Light gold hover effect for recent searches */
  color: #FFFFFF; /* White text on hover */
}


.breadcrumb {
        display: flex;
        padding: 10px;
        list-style: none;
        background-color: #f8f9fa;
        border-radius: 5px;
    }
    .breadcrumb-item + .breadcrumb-item::before {
        content: ">";
        padding: 0 8px;
        color: #C0B283;
    }
    .breadcrumb a {
        text-decoration: none;
        color: #C0B283;
    }
    .breadcrumb-item.active {
        color: #a19367;
    }
    .icon-house-line {
        font-size: 16px;
        vertical-align: middle;
        color: #C0B283;
    }


#map-single1 {
    width: 100%;
    height: auto;
}

iframe {
    display: block;
    width: 100%;
    height: 400px;
    border: 0;
}



.avatar-wrap.avatar-flex {
  display: inline-block;
  position: relative;
  overflow: visible;
  padding: 6px;
  background: transparent;
  border-radius: 10px;
}

/* Let image keep its natural ratio but cap sizes */
.avatar-flex .broker-avatar {
  display: block;
  max-width: 220px;      /* max width */
  width: 100%;
  height: auto;          /* preserve aspect ratio */
  max-height: 280px;     /* cap extremely tall images */
  object-fit: cover;     /* crop if container constrained */
  border-radius: 8px;
  transition: transform .22s ease, filter .22s ease, box-shadow .22s ease;
}

/* shadow combo (silhouette + rectangular) */
.avatar-flex .broker-avatar {
  filter: drop-shadow(0 10px 20px rgba(11,22,39,0.16));
  box-shadow: 0 8px 26px rgba(11,22,39,0.10);
}

/* Larger, softer ambient shadow carpet centered under the image */
.avatar-flex::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 6px;
  height: 18px;
  border-radius: 50%;
  background: rgba(11,22,39,0.10);
  filter: blur(14px);
  z-index: -1;
  transform: translateY(4px);
  pointer-events: none;
}

/* hover */
.avatar-flex:hover .broker-avatar {
  transform: translateY(-6px) scale(1.02);
  filter: drop-shadow(0 18px 34px rgba(11,22,39,0.18));
  box-shadow: 0 28px 56px rgba(11,22,39,0.16);
}
.avatar-flex:hover::after {
  transform: translateY(6px) scaleX(1.05);
  filter: blur(18px);
  background: rgba(11,22,39,0.14);
}