.property-portfolio-row {
    display: flex; /* Use flexbox for the row */
    flex-wrap: wrap; /* Allow wrapping to the next line */
    margin: 0; /* Remove margin to eliminate gaps */
}

.property-portfolio-col-6 { 
    max-width: 100%; /* Ensure it doesn't exceed this width */
    padding: 5px; /* Remove padding to eliminate gaps */
    box-sizing: border-box; /* Include padding in width */
}

.property-portfolio-image {
    position: relative;
    overflow: hidden; /* Ensure the icons and title don't overflow */
    width: 100%; /* Make sure it uses the full width of the column */
    height: 200px; /* Set a fixed height for uniformity (adjust as needed) */
}

.property-portfolio-img {
    width: 100%; /* Make sure the image uses the full width */
    height: 100%; /* Make the image fill the container height */
    object-fit: cover; /* Ensure the image covers the entire area */
}

.property-portfolio-icons { 
    display: flex;
    gap: 10px; /* Space between icons */ 
    transition: opacity 0.3s ease; /* Smooth transition */
}

.property-portfolio-icons a { 
    font-size: 16px;
    line-height: 22px;
    color: #ffffff !important;
    font-weight: 400;
    padding: 17px 17px 17px 17px;
    border-radius: 60px 60px 60px 60px;
    background: rgba(255, 255, 255, 0.15); 
    display: block;
    width: 50px;
    height: 50px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    text-decoration: none !important;
}
.property-portfolio-icons a.icon-link:before{ display:none; }
.property-portfolio-icons a:hover{ background:#000; }

.property_content_outer {  
    position: absolute;
    bottom: 50px; /* Position the icons near the bottom */
    left: 50%;
    transform: translateX(-50%); /* Center the icons */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-content: center;
    flex-wrap: nowrap;
    gap: 10px; /* Space between icons */
    opacity: 0; /* Start hidden */
    transition: opacity 0.5s ease; /* Smooth transition */
    width: 100%;
    z-index: 99;

} 
.property-portfolio-card {
    position: relative; /* For positioning the title and icons */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Add transition for hover effects */
}

.property-portfolio-card:after { opacity: 0;
    content:""; position:absolute; width:100%; height:100%; z-index: 9;
    top: 0; background: rgba(0, 0, 0, 0.60); }
.property-portfolio-card:hover:after { opacity:1; }

.property-portfolio-card:hover {
    transform: scale(1.05); /* Slightly enlarge on hover */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); /* Add shadow on hover */
}

.property-portfolio-card:hover .property_content_outer {
    opacity: 1; /* Show icons on hover */
}

.property-portfolio-title {  
    text-align: center; /* Center the title */ 
    color: #fff; /* Change as needed */ 
    pointer-events: none; /* Prevent mouse events on the title */
    font-size: 13px;
    line-height: 20px;
    color: #ffffff !important;
    display: inline-block;
    margin: 0; 
    padding: 5px 10px 5px 10px;
    background: rgba(255, 255, 255, 0.15);
    font-family: "Open Sans";
    text-transform: uppercase;
}

.property-portfolio-card:hover .property-portfolio-title {
    opacity: 1; /* Show title on hover */
}


.property-portfolio-container.loading {
    pointer-events: none; /* Disable interaction while loading */
}

.property-portfolio-container.loading::before {
    content: ''; /* Empty content for the overlay */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.6); /* Light overlay with less opacity */
    z-index: 1; /* Ensure the overlay is above the content */
}

.property-portfolio-container.loading {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%; /* Ensure it takes up full height */
}

.property-portfolio-container.loading::after {
    content: ''; /* Empty content for the loader */
    position: absolute; /* Position it relative to the container */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Center the loader */
    z-index: 2; /* Ensure it appears above the overlay */
    border: 8px solid #f3f3f3; /* Light grey */
    border-top: 8px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 50px; /* Size of the loader */
    height: 50px; /* Size of the loader */
    animation: spin 1s linear infinite; /* Spin animation */
}

/* Animation for the loader */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.property-filter-container { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 30px;}
.property-filter-container label { color:#000;line-height: 25px; }
.property-filter-container select { border:none; width: 100%; background-color: #e3e4e9 !important; height: 50px;  padding: 10px; background: url(../images/select_icon.png) no-repeat 90% 20px; background-size: 13px;}
.property-filter-container .search-wrapper { display: flex; gap: 10px; margin: 0 !important; }
.filter-wrapper { margin:0 !important; display: flex; flex-direction: row; width: 25%; gap: 10px;} 
#propertySearch { border: none; height: 50px; background-color: #e3e4e9 !important; box-shadow: none;}
.property-wallpaper { padding: 30px 0 !important; padding-bottom: 80px !important; }
.property-wallpaper .container { padding:0; margin:0; }
.property-filter-container .search-wrapper .btn { height:50px; }
#imageModal {background: #1e1e1eb5;}
#imageModal .modal-header { border-bottom:none; }
#imageModal .modal-title { display:none; }
#imageModal .modal-content { background-color: transparent; border: none; }
#imageModal .modal-body { text-align:center; }
#imageModal .modal-dialog { position: absolute;
  top: -100%; /* Start off-screen */
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  padding: 0;
  background-color: transparent; 
  transition: top 1.5s ease; }
#imageModal.show .modal-dialog {
  top: 50%;
  transform: translate(-50%, -50%);
}

.property-portfolio-container { min-height:500px; display: grid; grid-template-columns: repeat(5, 1fr);}
.property-portfolio-no-properties { color:#000; }

.opportunity-row .opportunity-text { padding:0; }
.opportunity-row .opportunity-text p { font-size:15px; line-height:28px; }
.opportunity-row { margin-bottom:50px; }


/*******************  Responsive  ***************************/

@media (min-width: 1100px) and (max-width: 1199px) {

.property-portfolio-container { grid-template-columns: repeat(4, 1fr); }

}

@media (min-width: 992px) and (max-width: 1099px) {

.property-portfolio-container { grid-template-columns: repeat(3, 1fr); }

}

@media (min-width: 768px) and (max-width: 991px) {

.property-portfolio-container { grid-template-columns: repeat(3, 1fr); }
.filter-wrapper { flex-direction: column; gap: 0; }

}

@media (max-width: 767px) {

.property-portfolio-container { grid-template-columns: repeat(2, 1fr); }
.property-filter-container { flex-direction: column; }
.filter-wrapper { display: flex; flex-direction: column;  width: 100%;  gap: 0; }

}

@media (max-width: 480px) {

.property-portfolio-container { grid-template-columns: repeat(1, 1fr); }
.property-wallpaper .col-md-12 { padding:0; }

}