/* ============================================
           Base / Reset / Comments
        ============================================ */
/*body {
            -ms-zoom: 0.9;
            zoom: 0.9;
        } */

/* ============================================
           Utilities & Global Elements
        ============================================ */
.badge-outline {
    border: 1px solid #039DD4; /* Change the color as needed */
    color: #039DD4;
    padding: 0.5rem 1rem; /* Adjust padding */
}

.grayscale {
    filter: grayscale(100%);
}

.responsive-img {
    width: 100%;
    height: auto;
}

.fixed-width {
    display: inline-block;
    width: 100px; /* Adjust the width as needed */
    text-align: right;
}

/* TTE / Basic Buttons */
.tte-btn {
    height: 36px;
    margin: 12px 0;
}

/* WD Amenities */
.wd-amenities {
    direction: rtl;
}

    .wd-amenities > * {
        direction: ltr;
    }

/* ============================================
           Filter Radio Group
        ============================================ */
.filter-radio-group {
    display: flex;
    gap: 10px;
}

    .filter-radio-group .btn {
        background-color: #f8f9fa; /* Light background for unselected */
        color: #333;
        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */
        width: 30px; /* Fixed width to create a circle */
        height: 30px; /* Fixed height to create a circle */
        border-radius: 50%; /* Make it a perfect circle */
        font-weight: 500;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
        border: none; /* Remove any border */
        padding: 0px;
        margin: 0 5px; /* Add spacing between buttons */
        border-radius: 50%!important;
    }

    .filter-radio-group .btn-check:checked + .btn {
        background-color: #039DD4; /* Blue background for selected */
        color: #fff; /* White text for selected */
        box-shadow: none; /* Remove shadow for selected button */
    }

    .filter-radio-group .btn:focus {
        outline: none;
        box-shadow: 0 0 0 0.2rem rgba(0, 165, 223, 0.25);
    }
.phase-item {
    flex: 1; /* Ensures equal spacing */
    max-width: 120px; /* Optional: Adjust max width for alignment */
}

.phase-label {
    white-space: pre-wrap; /* Allows breaking text */
    word-wrap: break-word; /* Breaks long words */
    overflow-wrap: break-word; /* Ensures wrapping */
}
/* ============================================
           Backgrounds & Gradients
        ============================================ */
.bg-gradient-primary {
    background: transparent linear-gradient(180deg, rgba(0, 198, 224, 0.04) 0%, rgba(255, 255, 255, 0.04) 100%) 0% 0% no-repeat padding-box;
}

.bg-gradient-primary-rev {
    background: transparent linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(0, 198, 224, 0.04) 100%) 0% 0% no-repeat padding-box;
}

.bg-gradient-primary-text {
    background: linear-gradient(to right, #00A4E0, #0067A7);
    /*background: transparent linear-gradient(180deg, rgba(0, 198, 224, 0.04) 0%, rgba(255, 255, 255, 0.04) 100%) 0% 0% no-repeat padding-box;*/
}

/* Transparent Header */
.transparent-header {
    background: rgba(0, 198, 224, 0.04) !important;
    box-shadow: none !important;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* ============================================
           Primary & Outline Buttons
        ============================================ */
.btn-search {
    min-width: 50px;
}

.btn-primary {
    background-color: #039DD4 !important; /* Override the default background color */
    border-color: #039DD4 !important; /* Override the default border color */
}

    .btn-primary:hover,
    .btn-primary:focus {
        background-color: #027bb3 !important; /* Slightly darker shade for hover and focus */
        border-color: #027bb3 !important;
    }
.btn-outline-primary {
    color: #039DD4 !important; /* Text color */
    border-color: #039DD4 !important; /* Border color */
    background-color: transparent !important; /* Transparent background */
}

    .btn-outline-primary:hover,
    .btn-outline-primary:focus {
        background-color: #039DD4 !important; /* Solid background on hover */
        color: #fff !important; /* White text on hover */
        border-color: #039DD4 !important; /* Keep border consistent */
    }

.btn-outline-success {
    color: #28a745;
    background-color: transparent !important; /* Transparent background */
}

.custom-button {
    padding: 10px 20px; /* Ensure even spacing inside the button */
    border: 2px dashed; /* Dashed border style */
    border-radius: 15px; /* Rounded corners */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Light shadow for elevated effect */
    font-weight: 500; /* Slightly bold text */
    transition: all 0.3s ease-in-out; /* Smooth hover effect */
}

    .custom-button.btn-outline-primary:hover,
    .custom-button.btn-outline-primary:focus {
        background-color: rgba(0, 0, 0, 0.05) !important; /* Subtle hover background */
        box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2) !important; /* Slightly larger shadow */
        border-color: #039DD4 !important; /* Ensure consistent border color */
        color: #039DD4 !important; /* Text color */
    }

    .custom-button.btn-outline-success:hover,
    .custom-button.btn-outline-success:focus {
        background-color: rgba(0, 0, 0, 0.05) !important;
        box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2) !important;
        border-color: #28a745 !important; /* Keep the success border consistent */
    }

/* ============================================
           Price Inputs
        ============================================ */
.price-input {
    width: 70px !important;
    height: 30px;
    box-shadow: inset 0px 3px 3px #00000029 !important;
}

.price-input-prepend {
    border: none;
    background: none;
}

/* ============================================
           Clusters
        ============================================ */
/*.cluster-label {
            font-size: 14px;
            font-weight: bold;
            /*background: #007bff;*/
/*color: white;
            padding: 5px 10px;
            border-radius: 10px;
        }*/
.cluster-circle {
    fill: rgba(3, 157, 212, 0.2); /* Light blue fill for the cluster */
    stroke: #039DD4; /* Blue border for the circle */
    stroke-width: 2px;
    overflow: hidden;
}

.cluster-label {
    font-size: 16px;
    font-weight: bold;
    color: #039DD4; /* Cluster code color */
    text-align: center;
    max-width: 150px;
    word-wrap: break-word;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-overflow: ellipsis; /* Prevent overflow if text is too long */
}

    .cluster-label .cluster-description {
        font-size: 14px;
        color: #333; /* Dark color for description */
        font-weight: normal;
        margin-top: 5px;
        word-wrap: break-word; /* Ensure text wraps inside the label */
    }

.cluster-circle:hover {
    fill-opacity: 0.5; /* Make the circle more opaque on hover */
    stroke-width: 3px; /* Thicker stroke on hover */
}

/* ============================================
           Property Markers & Images
        ============================================ */
.custom-property-marker .marker-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center; /* Center elements horizontally */
    justify-content: center; /* Center elements vertically */
    width: 60px; /* Match the rectangle width */
    height: 80px; /* Total height for rectangle + pin */
}

.rectangle-container {
    width: 60px;
    height: 60px;
    display: flex;
    justify-content: center; /* Center the image horizontally */
    align-items: center; /* Center the image vertically */
    background-color: gray; /* Background for rectangle */
    border-radius: 10px; /* Rounded corners for rectangle */
    overflow: hidden;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3); /* Optional shadow */
    margin-bottom: 5px; /* Add space below the rectangle */
}

.property-image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensure the image fills the rectangle while maintaining proportions */
}

.dropped-pin {
    width: 15px; /* Pin size */
    height: 15px;
    border-radius: 50%; /* Circular shape */
    border: 5px solid #56C1F8; /* Border color for the pin */
    background-color: transparent; /* Hollow center */
    margin-top: 5px;
    position: relative; /* Align relative to the parent container */
}

.leaflet-div-icon {
    border: none;
    background: transparent;
}

/* ============================================
           Loader & Hover Effects
        ============================================ */
@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.loader-fade {
    animation: fadeIn 0.5s ease-in-out; /* Fade-in effect */
}

.homelengo-box {
    transition: transform 0.5s ease, box-shadow 0.5s ease;
}

    .homelengo-box:hover {
        transform: scale(0.98);
        box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.2); /* Add a larger shadow */
    }

    .homelengo-box:active {
        /* Slightly reduce size on click */
        transform: scale(0.95);
    }

/* ============================================
           Layout / Panels
        ============================================ */
.wrapper-layout-3 .wrap-inner.expanded {
    width: 80%;
    position: fixed;
    left: 20%; /* Leave space for the sidebar */
    height: calc(100vh - 78px);
    z-index: 10;
    transition: all 0.5s ease-in-out; /* Smooth animation */
}

.wrapper-layout-3 .wrap-map.hidden {
    display: none; /* Hide the map when wrap-inner is expanded */
    transition: all 0.5s ease-in-out; /* Smooth animation */
}

.expand-button {
    position: absolute;
    top: 50%; /* Middle of the panel */
    right: 59%; /* Align to wrap-inner's right edge */
    transform: translateY(-50%);
    padding: 5px 10px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 11;
    cursor: pointer;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 50%; /* Ensure round shape */
}

    .expand-button:hover {
        background-color: #f8f9fa;
        border-color: #007bff;
    }

.wrapper-layout-3 .wrap-inner.expanded .expand-button {
    right: 0; /* Keep button aligned when expanded */
}

/* ============================================
           Cards & Typography
        ============================================ */
.header-property-detail .info-box .label {
    margin-bottom: 12px;
    font-weight: 600;
    opacity: 0.8;
    font-size: 16px;
    line-height: 21.86px;
}

.card-typology {
    display: inline-block;
    white-space: nowrap; /* Critical: prevent wrapping inside card */
    min-width: max-content; /* Critical: take width as per content */
    margin: 0.5rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}

    .card-typology .card-body {
        text-align: center;
        padding: 1rem;
    }

    .card-typology .card-title,
    .card-typology .card-text,
    .card-typology .card-text.text-primary {
        margin-bottom: 0.5rem;
        white-space: nowrap; /* Keep all content in single line */
    }


.mb-11 {
    margin-bottom: 11px;
}

.mb-12 {
    margin-bottom: 12px;
}

.circle-icon {
    width: 45px;
    height: 45px;
    border-radius: 50%;
}

.project-highlights {
    background-color: #039DD4A6; /* Light blue background */
    border-radius: 15px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

    .project-highlights h6 {
        border-bottom: 2px solid rgba(255, 255, 255, 1);
        padding-bottom: 5px;
    }

.icon-circle {
    width: 30px;
    height: 30px;
    min-width: 30px;
    min-height: 30px;
    border-radius: 50%;
    background-color: #ffffff;
}

    .icon-circle i {
        font-size: 20px; /* Adjust the icon size as needed */
    }

/* ============================================
           Maps & Markers
        ============================================ */
.map {
    height: 275px;
    width: 100%;
}

.amenity-marker {
    font-size: 18px;
    color: #333;
}

/* ============================================
           Forms & Info Boxes
        ============================================ */
.select-unit {
    height: 50px;
    border-radius: 25px;
    padding: 0 20px;
    width: 250px;
}

.info-box {
    background: white;
    padding: 20px;
    border-radius: 12px;
    text-align: center;
}

    .info-box h5 {
        font-size: 20px;
        font-weight: bold;
        color: #039DD4;
    }

.details {
    font-size: 14px;
    color: #868e96;
}

.dot {
    height: 10px;
    width: 10px;
    border-radius: 50%;
    display: inline-block;
}

.principal {
    background-color: #868e96;
}

.interest {
    background-color: #039DD4;
}

/* ============================================
           Sliders & Circular Charts
        ============================================ */
.slider-container {
    margin-bottom: 30px;
}

.circular-chart-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 200px; /* Default size for mobile */
    margin: 0 auto; /* Center horizontally */
    position: relative;
    margin-left: 20px;
}

.circular-chart {
    width: 100%;
    height: auto;
    max-width: 150px; /* Default size for mobile */
}


.chart-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    font-size: 14px;
}

.circle-bg {
    fill: none;
    stroke: #e9ecef;
    stroke-width: 2;
}

.circle {
    fill: none;
    stroke: #039DD4;
    stroke-width: 3.8;
    stroke-dasharray: 100, 100;
    /*stroke-dashoffset: 100;*/
    transition: stroke-dashoffset 0.5s ease;
} 

.sliders label {
    display: block;
    margin-top: 15px;
    font-weight: bold;
}

.sliders input[type="range"] {
    width: 100%;
    margin-top: 10px;
}

/* ============================================
           Headings & Text
        ============================================ */
.heading h1 {
    color: #555555;
}

    .heading h1 span {
        -webkit-background-clip: text;
        color: transparent;
    }

/* Box Titles & Footer Logos */
.box-title h2 span {
    -webkit-background-clip: text;
    color: transparent;
}

.footer-logo h2 span {
    -webkit-background-clip: text;
    color: transparent;
}

.box-title h3 span {
    -webkit-background-clip: text;
    color: transparent;
}

.footer-logo h3 span {
    -webkit-background-clip: text;
    color: transparent;
}

.footer-logo h3 {
    color: #fff;
}

/* Primary Border Box */
.primary-border-box {
    box-shadow: 30px 30px 45px #0067A726;
    border: 2px solid #C9EAFF;
    /*  width: 320px;
            height: 314px;*/
    height: 314px; /* Set the desired height */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

/* ============================================
           Steps & Process
        ============================================ */
.step-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 80px;
}

.step {
    text-align: center;
    position: relative;
    flex: 1;
}

    .step img {
        width: 75px;
        height: 75px;
    }

.landing-line {
    height: 2px;
    background-color: #ccc;
    flex: 1;
    margin: 0 10px;
}

.number-badge {
    position: absolute;
    top: -50px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(to right, #00A4E0, #0067A7);
    color: #fff;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bolder;
    font-size: 14px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.top-35 {
    top: 35%;
}

/* ============================================
           FAQ, Banners & Comparisons
        ============================================ */
.faq-item {
    border: 1px solid #C9EAFF !important;
}

.img-banner-right {
    position: relative;
}

.slider-home2 {
    padding-bottom: 80px;
}

.compare-button {
    position: absolute;
    bottom: 5%;
    left: 45%;
    z-index: 1000;
}

#compare-button {
    display: none;
}

/* ============================================
           Range Slider Styling
        ============================================ */
/* Common Styles for all browsers */
input[type="range"] {
    -webkit-appearance: none;
    width: 100%;
    background: transparent;
    margin: 10px 0;
    /* For browsers that support accent-color */
    accent-color: #039DD4;
    --range-percentage: 50%; /* Default slider position */
}

    input[type="range"]:focus {
        outline: none;
    }

    /* WebKit (Chrome, Safari) */
    input[type="range"]::-webkit-slider-runnable-track {
        height: 8px;
        background: linear-gradient( to right, #039DD4 0%, #039DD4 var(--range-percentage), #d3d3d3 var(--range-percentage), #d3d3d3 100% );
        border-radius: 4px;
    }

    input[type="range"]::-webkit-slider-thumb {
        -webkit-appearance: none;
        height: 16px;
        width: 16px;
        border-radius: 50%;
        background: #039DD4;
        cursor: pointer;
        margin-top: -4px; /* Adjust based on track height */
    }

    /* Mozilla Firefox */
    input[type="range"]::-moz-range-track {
        height: 8px;
        background: #d3d3d3;
        border-radius: 4px;
    }

    input[type="range"]::-moz-range-thumb {
        height: 16px;
        width: 16px;
        border-radius: 50%;
        background: #039DD4;
        cursor: pointer;
    }

    input[type="range"]::-moz-range-progress {
        background-color: #039DD4;
    }

    /* Microsoft Edge and IE */
    input[type="range"]::-ms-track {
        height: 8px;
        background: transparent;
        border-color: transparent;
        color: transparent;
    }

    input[type="range"]::-ms-fill-lower {
        background: #039DD4;
        border-radius: 4px;
    }

    input[type="range"]::-ms-fill-upper {
        background: #d3d3d3;
        border-radius: 4px;
    }

    input[type="range"]::-ms-thumb {
        height: 16px;
        width: 16px;
        border-radius: 50%;
        background: #039DD4;
        cursor: pointer;
    }

    input[type="range"]::-ms-ticks-after,
    input[type="range"]::-ms-ticks-before {
        display: none;
    }

    input[type="range"]::-ms-tooltip {
        display: none;
    }

/* ============================================
           Bordered Boxes & Features
        ============================================ */
.bordered-box {
    border-bottom: 2px dashed #ccc;
    border-right: 2px dashed #ccc;
    padding: 10px;
}

    .bordered-box:nth-child(2n) {
        border-right: none;
    }

    .bordered-box:last-child {
        border-bottom: none;
    }

.feature-item {
    display: flex;
    align-items: center;
    white-space: nowrap;
}

.left-part {
    flex-shrink: 0;
}

.right-part {
    flex-shrink: 0;
}

.dots {
    flex-grow: 1;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
}

    .dots::after {
        content: "................................................................................................................................................................................................................................................................";
        display: block;
        white-space: nowrap;
        overflow: hidden;
    }

.p-20 {
    padding: 20px;
}
.p-10 {
    padding: 10px;
}

/* ============================================
           Header & Sidebar
        ============================================ */
.main-header {
    z-index: 1003;
}

.wrap-top-bar,
.wrap-bottom-bar {
    display: none;
}

    .wrap-top-bar select {
        border-radius: 15px; /* Adjust the border radius for the dropdowns */
        padding: 10px 10px; /* Adjust padding for better appearance */
    }
/* Sidebar Toggle Button */
.sidebar-toggle-button {
    border: none;
    color: #ffffff;
    font-size: 24px;
    cursor: pointer;
    width: 80px !important;
    height: 37px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .sidebar-toggle-button:focus {
        outline: none;
    }

    .sidebar-toggle-button:hover {
        background: #027bb2;
    }

    .sidebar-toggle-button:focus {
        outline: none;
    }

.wrap-sidebar {
    top: 78px; /* Header height plus bar height */
    left: -100%; /* Hide sidebar off-screen initially */
    height: calc(100% - 78px);
    background-color: #ffffff;
    overflow-y: auto;
    transition: right 0.3s ease;
    z-index: 1001;
    box-shadow: 2px 0 5px rgba(0,0,0,0.1);
}

    .wrap-sidebar.active {
        left: 0;
    }

.wrap-inner,
.wrap-map {
    width: calc(100%); /* Use full width by default */
}

/* Filter Close Button */
.filter-close-btn {
    background: none;
    border: none;
    color: #039DD4;
    font-size: 24px;
    padding: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    transition: background-color 0.3s ease;
}

    .filter-close-btn:hover {
        background-color: rgba(3, 157, 212, 0.1);
    }

    .filter-close-btn:focus {
        outline: none;
    }

/* ============================================
           Miscellaneous & Additional Components
        ============================================ */
#ctaPopup .form-control {
    background: transparent;
    border: none;
    border-bottom: 1px solid #000000;
    -webkit-box-shadow: none;
    box-shadow: none;
    border-radius: 0;
}

.noUi-handle .slider-arrow {
    font-size: 16px; /* Adjust the size of the arrows */
    color: #fff; /* Arrow color */
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 2px; /* Remove padding */
    height: 100%; /* Ensure it fills the handle */
    width: 100%; /* Ensure it fills the handle */
    pointer-events: none; /* Prevent interaction with the arrow */
}

.btn-enquire {
    background-color: #039DD4 !important; /* Override the default background color */
    border-color: #039DD4 !important; /* Override the default border color */
    box-shadow: 0px 3px 6px #00000029;
    border-radius: 16px;
    color: #fff!important; /* Override the default text color */
}
    .btn-enquire:hover,
    .btn-enquire:focus {
        background-color: #fff !important; /* Your brand primary color */
        color: #039dd4 !important;
        border-color: #039dd4;
        box-shadow: 0 2px 8px rgba(3, 157, 212, 0.15);
        transition: background 0.2s, color 0.2s, box-shadow 0.2s;
    }
.blur-image {
    filter: blur(2px); /* Adjust the blur intensity as needed */
    transition: filter 0.3s ease; /* Optional: Smooth transition for hover effects */
    /*.blur-image:hover {
                filter: none;
            }*/
}

#mapLocationBenefits {
    height: 100%; /* Default height */
    min-height: 400px; /* Fallback for smaller content */
}

.left-content {
    display: flex;
    flex-direction: column;
}

/* ============================================
           Media Queries & Responsive Adjustments
        ============================================ */

/* TTE Button adjustment for screens under 1199px */
@media only screen and (max-width: 1199px) {
    .tte-btn {
        margin: 0px 0;
    }
}
@media (min-width: 992px) {
    .circular-chart-container {
        max-width: 250px; /* Larger size for desktop */ 
    }

    .circular-chart {
        max-width: 200px; /* Larger size for desktop */
    }

    .chart-content {
        font-size: 16px; /* Slightly larger font size for desktop */
    }
}
@media (min-width: 992px) {
    .container {
        padding: 1.5rem 100px; /* Add more padding to left and right */
        width: 100%;
        max-width: 100%;
        /*max-width: 1500px;*/ /* Increase max width for larger screens */
    }
}
/* Circular Chart size adjustments */
@media (max-width: 768px) {
    .circular-chart-container {
        max-width: 120px; /* Smaller size for mobile */
    }
   /* .circular-chart {
        width: 150px;
        height: 150px;
    }
*/
    /*.chart-content {
        margin-top: -100px;
        text-align: center;
    }*/
    .chart-content {
        font-size: 12px; /* Adjust font size for smaller screens */
    } 
    .img-banner-right {
        position: static;
        margin-top: 20px;
    }

    .slider-content {
        position: relative;
        z-index: 2; 
    }

    .img-banner-right .swiper {
        position: relative;
        z-index: 1;
    }
    .hide-on-mobile {
        display: none !important;
    }
}

/* Mobile Sidebar & Top/Bottom bars */
@media only screen and (max-width: 767px) {
    .wrapper-layout-3 {
        display: flex;
        flex-direction: column;
    }

    .wrap-sidebar,
    .wrap-inner {
        position: fixed;
        display: none; /* Hide both the sidebar and the inner content */
    }

    .wrap-map {
        background-color: #FFF; /* Light background color */
        width: 100%;
    }

    .wrap-top-bar {
        display: flex;
        position: fixed;
        top: 78px; /* Adjust based on your header height */
        width: 100%;
        height: 77px; /* Height of the bar */
        background-color: #EAE8E8A6; /* Semi-transparent background */
        align-items: center;
        z-index: 998;
        padding-left: 15px;
        justify-content: flex-end;
    }

    .wrap-bottom-bar {
        display: flex;
        position: fixed;
        bottom: 0;
        width: 100%;
        min-height: 133px;
        background-color: #EAE8E8A6;
        align-items: center;
        z-index: 1001;
        border-top-left-radius: 35px;
        border-top-right-radius: 35px;
    }
}

/* Hide Filter Close Button on larger screens */
@media (min-width: 768px) {
    .filter-close-btn {
        display: none;
    }
    .wrap-top-bar {
        display: none;
    } 
    /*.subtitle {
        text-align: center;
    } */
    .mb-md-6 {
        margin-bottom: 4rem !important;
    }

    .mb-md-7 {
        margin-bottom: 5rem !important;
    }

    .mb-md-8 {
        margin-bottom: 6rem !important;
    } 
    #mapLocationBenefits {
        height: auto; /* Allow dynamic height */
    }
}

/* Mobile Homelengo Categories */
@media (max-width: 576px) {
    .wrap-top-bar {
        display: flex; /* Ensure it remains visible on smaller screens */
    }
    .homelengo-categories {
        margin-left: 15px;
        margin-right: 15px;
    }

    .break-after {
        display: inline-block;
    }
    .main-header {
        padding: 10px 15px;
        background-color: #fff; /* Optional: Add a background color for better visibility */
    }

        .main-header .logo-box {
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .main-header .logo-img {
            max-width: 80px!important; /* Adjust the logo size */
            height: auto;
        }
    .step-container .step img {
        max-width: 50px; /* Reduce icon size */
        height: auto;
    }

    .step-container .step h5 {
        font-size: 14px; /* Reduce font size for descriptions */
        line-height: 1.4; /* Adjust line height for better readability */
        margin-top: 10px; /* Adjust spacing */
    }

    .step-container .landing-line {
        height: 2px; /* Adjust line thickness */
        background-color: #ccc; /* Optional: Change line color */
        margin: 10px 0; /* Adjust spacing around the line */
    }
        
}
.custom-select.nice-select { 
    padding: 8px 12px;
    font-size: 1rem;
    border: 1px solid #ccc; 
    background-color: #fff;
}

    .custom-select.nice-select .list {
        max-height: 200px;
        overflow-y: auto;
    }

 /*For scalling */
html {
    font-size: 14px; /* Default is 16px, reduce slightly */
}

body {
    font-size: 0.9rem; /* Scale down body text */
    line-height: 1.6; /* Increase line height for better readability */
  
}

.section {
    margin-bottom: 2rem; /* Add more spacing between sections */
}

 

.icon {
    font-size: 0.9em; /* Scale down icons */
}

/* Property Search Form */
.property-search-form {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    max-width: 600px;
    /*margin: auto;*/
}

    .property-search-form .form-group {
        display: flex; 
        align-items: center;
        text-align: center;
        gap: 10px; /* Space between label and select */
    }

    .property-search-form .form-label {
        font-size: 16px;
        font-weight: 500;
        color: #555;
        margin-bottom: 5px;
        white-space: nowrap; /* Prevent label text from wrapping */
        font-size: 26px !important; 
    }

    .property-search-form .form-control {
        border: none;
        border-radius: 0;
        border-bottom: 2px dashed #039DD4;
        background: transparent; 
        font-weight: 600;
        color: #039DD4;
        text-align: center;
        width: 100%;
        max-width: 270px;
        min-width: 150px; /* Minimum width for select */
        flex-grow: 1; /* Allow select to grow if space is available */
        font-size: 26px;
    }

    .property-search-form .search-btn-icon {
        background-color: #039DD4;
        color: #fff;
        border-radius: 50%;
        width: 60px;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
        transition: transform 0.3s ease;
        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        text-decoration: none;
        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        transition: all 0.3s ease;
        background: transparent linear-gradient(101deg, #00A4E0 0%, #0067A7 100%) 0% 0% no-repeat padding-box;
    }
        .property-search-form .search-btn-icon:hover {
            transform: scale(1.1);
        }
    .property-search-form .search-btn {
        background-color: #039DD4;
        color: #fff;
        border-radius: 29px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
        padding: 10px 20px;
        min-width: 162px;
        min-height: 54px;
        transition: transform 0.3s ease;
        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        text-decoration: none;
        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        /* box-shadow: 20px 20px 60px #0067A733; */
        transition: all 0.3s ease;
        background: transparent linear-gradient(101deg, #00A4E0 0%, #0067A7 100%) 0% 0% no-repeat padding-box;
    } 

        .property-search-form .search-btn:hover {
            transform: scale(1.1);
        }

/* Mobile Adjustments */
@media (max-width: 768px) {
    .property-search-form {
        padding: 15px;
        font-size: 18px; /* Smaller font size for mobile */
        border: 3px solid #50A8E4
    }

        .property-search-form .form-group {
            width: 100%; 
        }

        .property-search-form .form-label { 
            font-size: 18px !important;
        }
        .property-search-form .form-control {
            max-width: 100%;
            font-size: 18px!important; 
        }

        .property-search-form .search-btn-icon {
            font-size: 18px !important;
            position: relative;
            bottom: -50px;
        } 
}
/* Swiper container styling */
.img-banner-right {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 700px; /* Adjust height as needed */
    margin-top: 20px;
}

    .img-banner-right .swiper {
        position: relative;
        z-index: 1;
        width: 100%;
        height: 100%;
    }

    .img-banner-right .swiper-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .img-banner-right .swiper-slide {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
    }

    .img-banner-right img {
        max-width: 100%;
        height: auto;
        object-fit: contain; /* Ensure the image scales properly */
    }

/* Adjust for mobile responsiveness */
@media (max-width: 768px) {

    .flat-slider.home-2 .img-banner-right {
        left: 0;
        padding: 10px;
        margin-top:30px;
    }
    .img-banner-right {
        height: 300px; /* Adjust height for smaller screens */
    }

        .img-banner-right img {
            max-width: 100%; /* Scale down the image for mobile */
        }
}
@media only screen and (max-width: 768px) {
    .heading{
        margin-bottom:210px;
    }
    /* More specific selector to override the above */
    .flat-slider.home-2 .slider-content {
        padding-top: 0;
        /* you may set bottom padding as desired */
    }
}
.logo-responsive {
    max-width: 200px; /* Default size */
}

@media (max-width: 768px) {
    .logo-responsive {
        max-width: 150px; /* Smaller size for mobile */
    }
}

@media (max-width: 576px) {
    .logo-responsive {
        max-width: 120px; /* Even smaller size for very small screens */
    }
} 

   

/* Mobile specific adjustments */
@media (max-width: 767px) {
    .form-sl {
        position: relative;
        overflow-y: auto;
        scrollbar-width: thin; /* Firefox */
        max-height: calc(100vh - 200px); /* Adjust height for mobile header */
        padding-bottom: 50px; /* Extra padding at bottom for better user experience */
    }
        /* Custom scrollbar styling for WebKit browsers */
        .form-sl::-webkit-scrollbar {
            width: 5px;
        }

        .form-sl::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 10px;
        }

        .form-sl::-webkit-scrollbar-thumb {
            background: #039DD4;
            border-radius: 10px;
        }

        /* Make sure form elements are properly spaced */
        /*.form-sl form {
            padding-bottom: 120px;*/ /* Ensure bottom padding for mobile scrolling */
        /*}*/
}
.nice-select .current {
    padding-right: 18px; /* Add space for the arrow */
}

.nice-select:after {
    right: 10px; /* Move the arrow a bit further from the text */
}
.fs-14 {
    font-size: 14px;
}
.gallery-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(30, 30, 30, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 2.5rem;
    font-weight: bold;
    border-radius: 8px;
    z-index: 2;
    pointer-events: none;
}

.overlay-plus {
    background: rgba(0,0,0,0.3);
    padding: 0.3em 0.8em;
    border-radius: 1.5em;
    font-size: 2rem;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
/* For gallery images and property cards */
 
.flat-gallery-single .item.box-img {
    aspect-ratio: 1 / 1; 
}


    .flat-gallery-single .item.box-img img {
        aspect-ratio: 1 / 1;
    }
/* Make all testimonial cards the same height */
.flat-testimonial .swiper-wrapper {
    display: flex;
    align-items: stretch;
}

.flat-testimonial .swiper-slide {
    display: flex;
    height: auto;
}

.flat-testimonial .box-tes-item {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 260px; /* Adjust as needed for your design */
    height: 100%;
    box-sizing: border-box;
}