/* Base styles and resets */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
   margin: 0;
   padding: 0;
   width: 100%;
   overflow-x: hidden; /* Prevent horizontal scroll */
}

body {
    font-family: 'Poppins', sans-serif;
    line-height: 1.6;
    color: #333;
    background: #f8f9fa;
    padding-top: 70px;
}

/* Header and Navigation */
header {
    position: fixed;  /* Changed from absolute to fixed */
    width: 100%;
    top: 0;
    z-index: 1000;
    background-color: #ffffff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
/* More forceful mobile header styling */
/* Mobile-specific header styling */
@media screen and (max-width: 480px) {
    /* Target the header directly */
    header {
        background-color: White!important;
        background:white !important;
    }
    
    /* Target the logo text color to ensure it's visible on blue background */
    header .logo span {
        color: white !important;
    }
    
    /* Make sure the language selector remains visible */
    header .language-selector select {
      display:none;
    }
    
    /* If there are any other elements in the header that need color adjustment */
    header a {
        color: white !important;
    }
    
    /* If the header has any borders that need to be adjusted */
    header {
        border-color: #1a73e8 !important;
    }
    
    /* In case there's another element inside the header that might have a background */
    header > div,
    header .menu-container,
    header nav {
        background-color: transparent !important;
    }
}



.header-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem;
    padding-top: 55px;
    position: relative;
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 15px;
}

/* Menu container */
.menu-container {
    width: 100%;
    min-height: 70px;
    padding: 5px 0;
    position: relative;
    background-color: #F8F9FA;
}

/* Logo styling */
.logo {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0 5px;
	 
}

.logo img {
    height: 65px;
    width: auto;
}

.logo span {
    font-size: 1.6rem;
    font-weight: 600;
    color: #333333;
}
@media screen and (max-width: 480px) {
    .logo {
        position: absolute !important;
        left: 20% !important;
        transform: translateX(-50%) !important;
        justify-content: center !important;
        gap: 0.5rem !important; /* Reduce gap between logo and text on mobile */
		 top: 3px !important; /* Move logo down from the top edge */
    }
    
    .logo img {
        height: 60px !important; /* Make logo image smaller */
        width: auto !important;
    }
    
    .logo span {
        font-size: 1.2rem !important; /* Make logo text smaller */
    }
}
/* Main menu styling */
.main-menu {
    display: flex;
    list-style-type: none;
    gap: 1rem;
    padding: 5px 0;
    margin-left: -10px;
    color: #000000;
    font-weight: 600;
    font-size: 1.06rem;
    position: relative;
}

.main-menu a {
    text-decoration: none;
    color: #0066cc !important;
    font-weight: 500;
    padding: 4.5px 15.5px;
    border-radius: 4px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    white-space: nowrap;
}

.main-menu a:hover {
    text-decoration: underline;
    text-decoration-color: black;
    text-decoration-thickness: 2px;
    color: #3498db;
}

.main-menu a i {
    font-size: 1rem;
}

/* Contact link specific styling */
.main-menu li .contact-link,
.main-menu .contact-link,
li .contact-link,
a.contact-link {
    color: #000000 !important;
    text-decoration: none !important;
    font-weight: 600;
    font-size: 1.06rem;
}

/* Menu with submenu styling */
.menu-item-with-submenu {
    position: relative;
}

.menu-item-with-submenu .menu-header {
    display: flex;
    align-items: center;
    height: 100%;
    gap: 4px;
    color: #000000;
    font-weight: 600;
    font-size: 1.06rem;
    cursor: pointer;
}

/* Submenu base styling */
.submenu {
    position: absolute;
    top: 120%;
    left: 0;
    background-color: #F8F9FA;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
    z-index: 1001;
    list-style-type: none;
    font-size: 0.96rem;
}

.menu-item-with-submenu:hover > .submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}


/* Properties submenu specific styling - UPDATED */
.submenu.properties-menu {
    /* Position absolutely relative to the viewport */
    position: fixed;
    left: 0;
    right: 0;
    
    /* Remove any margin */
    margin-left: 0;
    margin-right: 0;
    
    /* Set width to 100% of viewport */
    width: 100%;
    
    /* Adjust padding */
     padding: 20px 20px 20px 100px;
    
    /* Adjust grid to better use the full width */
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    
    /* Other properties */
    row-gap: 0;
     column-gap: 0.5rem;
     top: 70px;  /* Adjust based on your header height */
    justify-items: start;
    justify-content: start;
    align-items: start;
    
    /* Add a higher z-index to ensure it appears above other elements */
    z-index: 1005;
	opacity: 1;
    visibility: visible;
    transform: none;
	 display: none;
}
.menu-item-with-submenu:hover .submenu.properties-menu,
.submenu.properties-menu:hover {
    display: grid; /* Show on hover */
	    }
.menu-item-with-submenu.properties-menu-parent::after {
    content: "";
    position: absolute;
    bottom: -20px; /* Adjust based on the gap between menu and submenu */
    left: 0;
    width: 100%;
    height: 20px; /* This creates an invisible bridge to maintain hover */
    background-color: transparent;
}

/* Make submenu titles more visible */
.nested-submenu {
    position: relative;
}

/* Style for the submenu titles */
.submenu.properties-menu > li.nested-submenu {
    font-weight: 700;
    color: #333;
    border-bottom: 2px solid #0066cc;
    margin-bottom: 5px !important;
    padding-bottom: 3px;
    width: 100%;
}

.submenu.properties-menu > li > ul {
    margin-top: 10px;
}

.submenu.properties-menu > li {
    width: 220px;
    padding: 0;
    margin: 0;
    line-height: 2;
}

.submenu.properties-menu > li > a {
    padding: 0;
    margin: 0;
    display: block;
    height: 100%;
    vertical-align: top;
}

/* Services submenu specific styling - UPDATED */
.submenu.services-menu {
    /* Position from left edge to right edge */
    position: fixed;
    left: 0;
    right: 0;
	    
    /* Remove any margin */
    margin-left: 0;
    margin-right: 0;
    
    /* Set width to 100% of viewport */
    width: 100%;
    
    /* Adjust top position to match where your main menu ends */
    top: 70px;
    
    /* Adjust padding */
    padding: 20px 10% 20px 10%;
    
    /* Adjust grid to better use the full width */
    display: grid;
    grid-template-columns: repeat(3, 200px) !important;
	     
    /* Adjust spacing */
    row-gap: 15px !important;
      column-gap: 0;
    
    /* Other properties */
     justify-content: center;
    align-items: center;
    
    /* Add a higher z-index to ensure it appears above other elements */
    z-index: 1005;
	 
}
/* Target the grid items directly */
.submenu.services-menu > li {
    margin-right: 5px !important;
    padding-right: 0 !important;

}


/* Adjust service menu items if needed */
.submenu.services-menu a {
    padding: 2px 15px;
    margin: 0;
    display: inline-block;
    min-width: auto;
    transform: none;
}
/* Nested submenu styling */
.nested-submenu ul {
    position: static; /* Changed from absolute to static for properties menu */
    background: transparent;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    min-width: auto;
    list-style: none;
    padding: 0;
    margin-left: 10px;
}

/* Only for nested submenus that should appear on hover */
.nested-submenu.hover-submenu ul {
    position: absolute;
    top: 0;
    left: 100%;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
    min-width: 200px;
    padding: 0.5rem;
    z-index: 1002;
}

.nested-submenu.hover-submenu:hover > ul {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.nested-submenu ul li {
    padding: 2px 0 ;
	 margin: 0 !important;
    line-height: 1.7 !important;
    list-style: none;
}

.nested-submenu ul li a {
    padding: 0.25rem 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #0066cc !important;
    white-space: nowrap;
    font-weight: normal;
}

.nested-submenu ul li a:hover {
    background: transparent;
    text-decoration: underline;
    color: #3498db !important;
}

/* Right menu styling */
.right-menu {
    display: flex;
    list-style: none;
    gap: 0.25rem;
    margin-right: 150px;
    padding: 2px 10px;
    color: #000000;
    font-weight: 600;
    font-size: 1.06rem;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-toggle {
    cursor: pointer;
    padding: 0.35rem 1.2rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 4px;
    transition: all 0.3s ease;
    color: #333333;
    text-decoration: none;
}

.dropdown-toggle:hover {
    background: #3498db;
    color: #fff;
}

.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #fff;
    min-width: 200px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1000;
    list-style: none;
    padding: 0;
    margin: 0;
}

.dropdown:hover .dropdown-menu {
    display: block;
}

.dropdown-menu li {
    border-bottom: 1px solid #eee;
}

.dropdown-menu li:last-child {
    border-bottom: none;
}

.dropdown-menu li a {
    color: #333;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-menu li a:hover {
    background-color: #f1f1f1;
}

.right-menu a {
    text-decoration: none;
    color: #333333;
    padding: 0.35rem 1.2rem;
    border-radius: 4px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.right-menu a:hover {
    background: #3498db;
    color: #fff;
}


/* Language Selector */
.language-selector-desktop {
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 1001;
    font-weight: 600;
}

.language-selector-desktop select {
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid #ddd;
    background-color: white;
    cursor: pointer;
    font-size: 14px;
    font-weight: 400;
}

@media (max-width: 1050px) {
    header .language-selector-desktop {
        display: none !important;
    }
}
/* Mobile-specific styles with high specificity and !important */
@media screen and (max-width: 480px) {

    header .language-selector-desktop {
        display: none !important;
    }

}


/* Service Provider Grid */
.debug-info {
    background: #f8f9fa;
    padding: 10px;
    margin: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
}
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    padding: 20px;
}

/* Service page title positioning */
.isServicePage .main-content-area h2 {
    margin-top: -100px;
    margin-bottom: 10px;
}

/* If you need to adjust the entire service content section */
.isServicePage .main-content-area {
    margin-top:-50px;
}

.service-provider-card {
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}

.service-provider-card:hover {
    transform: translateY(-5px);
}
.provider-image {
    width: 80%;
    height: 230px;
    overflow: hidden;
}
.provider-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.provider-details {
    padding: 15px;
}

.no-results {
    text-align: center;
    padding: 2rem;
    font-size: 1.2rem;
    color: #666;
}
.service-provider-card .provider-details .contact-info.contact-info {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 5px !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    overflow: hidden !important;
    padding: 5px 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

/* Make sure the provider-details has appropriate sizing */
.service-provider-card .provider-details {
    width: 100% !important;
    box-sizing: border-box !important;
    margin-left: 10px !important; /* Add left margin to indent to the right */
    padding-left: 5px !important; /* Add left padding for additional spacing */
}


/* Style the buttons with even higher specificity */
.service-provider-card .provider-details .contact-info.contact-info .btn-call,
.service-provider-card .provider-details .contact-info.contact-info .btn-details,
.service-provider-card .provider-details .contact-info.contact-info .btn-review {
     padding: 8px 12px;/* Minimal padding */
    font-size: 1.1em !important; /* Smaller font */
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    margin: 0 2px 0 0 !important; /* Small right margin only */
}
.service-provider-card .provider-details .contact-info.contact-info .btn-call {
    margin-left: 0 !important; /* Remove the 60px left margin */
}


/* Mobile styles for max-width 1050px */
@media (max-width: 1050px) {
    .service-provider-card .provider-details .contact-info.contact-info {
        display: flex !important;
        flex-direction: row !important;
        gap: 8px !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        padding-left: 15px !important; /* Add left padding to shift buttons right */
    }

    .service-provider-card .provider-details .contact-info.contact-info .btn-call,
    .service-provider-card .provider-details .contact-info.contact-info .btn-details,
    .service-provider-card .provider-details .contact-info.contact-info .btn-review {
        flex: 1 !important;
        min-width: 0 !important;
        padding: 6px 8px !important;
        font-size: 0.95em !important;
        margin: 0 !important;
    }
}

/* Mobile styles for max-width 480px */
@media (max-width: 480px) {
    .service-provider-card .provider-details .contact-info.contact-info {
        display: flex !important;
        flex-direction: row !important;
        gap: 6px !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        padding-left: 12px !important; /* Add left padding to shift buttons right */
    }

    .service-provider-card .provider-details .contact-info.contact-info .btn-call,
    .service-provider-card .provider-details .contact-info.contact-info .btn-details,
    .service-provider-card .provider-details .contact-info.contact-info .btn-review {
        flex: 1 !important;
        min-width: 0 !important;
        padding: 5px 6px !important;
        font-size: 0.9em !important;
        margin: 0 !important;
        text-align: center !important;
    }
}
/* Style the phone number */
.service-provider-card .provider-details .contact-info.contact-info .phone-number {
    padding: 3px 10px !important;
    font-size: 1em !important;
    max-width: 200px !important; /* Slightly increased width */
    overflow: hidden !important;
     color: #2ecc71 !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
     margin: 0 !important;

}

/* Increase the call-container width slightly */
.service-provider-card .provider-details .contact-info.contact-info .call-container {
    display: inline-flex !important;
     width: auto !important; /* Let content determine width */
    flex-shrink: 0 !important;
    overflow: hidden !important;
	margin: 0 2px 0 0 !important; /* Small right margin only */
}

/* Make sure the service-provider-card has appropriate sizing */
.service-provider-card {
    box-sizing: border-box !important;
    width: 100% !important;
}
/* Add to your existing CSS */
.content-wrapper {
 
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.search-container {
    background: linear-gradient(to right, #f8f9fa, #ffffff);
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    margin-bottom: 2rem;
	margin-top: 80px;
    position: relative;
    z-index: 1;
}

.Service-search-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    align-items: end;
}

.Service-form-group,
.service-form-group {
    margin-bottom: 0;
}

.Service-form-group label,
.service-form-group label {
    display: block;
    margin-bottom: 8px;
    color: #333;
    font-weight: 500;
    font-size: 14px;
}

.Service-form-group select,
.Service-form-group input,
.service-form-group select,
.service-form-group input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    height: 42px;
    font-size: 14px;
    background-color: white;
    transition: all 0.3s ease;
}

.Service-form-group select:hover,
.Service-form-group input:hover,
.service-form-group select:hover,
.service-form-group input:hover {
    border-color: #007bff;
}

.Service-form-group select:focus,
.Service-form-group input:focus,
.service-form-group select:focus,
.service-form-group input:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 3px rgba(0,123,255,0.1);
}

.Service-search-button {
    background: #007bff;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
    font-size: 14px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.Service-search-button:hover {
    background: #0056b3;
    transform: translateY(-1px);
}
.service-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}

.service-card {
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    background-color: #f9f9f9;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.service-card img {
    width: 100%;
    height: 150px;
    object-fit: cover;
}

.service-info {
    padding: 15px;
}

.service-card h3 {
    margin: 0 0 5px 0;
    font-size: 1.1em;
    color: #2c3e50;
}

.service-card .category {
    color: #3498db;
    font-weight: bold;
    margin-bottom: 10px;
}

.service-card .details {
    font-size: 0.9em;
    color: #555;
    line-height: 1.4;
}

.add-service-btn {
    display: inline-block;
    margin: 20px 0;
    padding: 10px 20px;
    background-color: #e67e22;
    color: white;
    text-decoration: none;
    border-radius: 4px;
    margin-left: 10px;
}

.add-service-btn:hover {
    background-color: #d35400;
}

@media (max-width: 1050px) {
    .Service-search-form {
        grid-template-columns: 1fr;
    }
    
    .Service-search-button {
        width: 100%;
    }
    
    .search-container {
        padding: 12px;
    }
}


.hero {
    background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)), url('../images/realstate6.jpg');
    background-size: cover;
    background-position: center;
    min-height: 75vh;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    padding: 2rem;
    margin-top: 0;
    position: relative;
    margin-bottom: 0;
    padding-bottom: 20px;
}
@media only screen and (max-width: 1050px) {
    .hero {
        background: none !important; /* Remove all background including the image and gradient */
        background-color: #f5f5f5 !important; /* Optional: replace with a solid color */
        min-height: auto !important; /* Reduce the height */
        padding-top: 50px !important; /* Reduce top padding */
        padding-bottom: 20px !important; /* Reduce bottom padding */
    }
    
    /* If you have content in the hero that needs to remain visible */
    
}

.hero-content {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center; /* Changed to align left */
    gap: 2rem;
    padding: 0 20px;
    position: center;
	 padding-top: 100px; /* Add this to move content down */
}

/* Mobile Menu Styles */
.mobile-menu {
    display: none; /* Hidden by default on desktop */
}

/* Desktop Hero Styles */
.desktop-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.hero-title {
    font-size: 1.6rem;
    font-weight: 900;
    color: #ffffff;
    margin-bottom: 1rem;
    text-align: center;
    width: 100%;
    text-shadow: 
        2px 2px 4px rgba(0,0,0,0.7),
        -1px -1px 1px rgba(0,0,0,0.5);
    letter-spacing: 2px;
    -webkit-text-stroke: 1px #000000;
    text-transform: uppercase;
}

.hero-subtitle {
    font-size: 1.4rem;
    font-weight: 900;
    color: #ffffff;
    margin-bottom: 1rem;
    text-align: auto;
    width: 100%;
    text-shadow: 
        2px 2px 3px rgba(0,0,0,0.6),
        -1px -1px 1px rgba(0,0,0,0.4);
    letter-spacing: 1px;
    -webkit-text-stroke: 0.5px #000000;
}

.hero-search-form {
    position: relative;
}




.hero-search {
    width: 130%;
    max-width: 1200px;
    margin: 20px auto;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.search-tabs {
	max-width: 350px;  /* Add this value */
    margin: 0 auto;  
    display: flex;
   background: #f8f9fa;
   border-radius: 30px 30px 0 0;
   overflow: hidden;
}

.tab-btn {
    flex: 1;
    padding: 11px;
    border: 1px solid #dee2e6;
    background: linear-gradient(to bottom, #f8f9fa, #ffffff);
    color: #212529; /* Darker color for better contrast */
    font-weight: 900; /* Increased font weight for bolder text */
    font-size: 0.9rem; /* Adjust font size if needed */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); /* Optional: Adds subtle text shadow */
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border-bottom: 2px solid transparent;
    cursor: pointer;
    min-width: 120px;
    text-align: center;
}


.tab-btn.active {
    background: #2196f3; /* Bright blue background */
    color: #ffffff; /* White text for better contrast */
    border-bottom: 3px solid #1565c0; /* Darker blue border */
    font-weight: 700; /* Slightly bolder font */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Stronger shadow for depth */
    transform: translateY(-2px); /* Slight lift effect */
    transition: all 0.3s ease; /* Smooth transition */
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

.hero-search-form {
    display: flex;
    flex-wrap: nowrap;
    max-width: 800px;
    margin: 30px auto;
    padding: 0;
    gap: 0;
}

.search-row {
    display: flex;
    width: 100%;
    margin: 0;
    gap: 0;
    flex-wrap: nowrap;
    align-items: center;
	 border-radius: 0;
}

.search-icon {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: #666;
    z-index: 1;
}
.search-group {
    flex: 1;
    position: relative;
    margin: 0;
    padding: 0;
    width: 25%;
    order: -2;
    border-radius: 0; /* Ensures the element has sharp, rectangular corners */
}

.search-group select,
.search-group input,
.custom-dropdown,
.dropdown-header {
    width: 100%;
    height: 45px;
    padding: 8px 20px;
    border: 1px solid #dee2e6;
    border-right: none;
    background: #ffffff;
    font-size: 14px;
    font-weight: 600; /* Bolder font for better visibility */
    color: #212529; /* Darker text color for better contrast */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); /* Subtle text shadow for depth */
    margin: 0;
    border-radius: 0; /* Ensure no rounded corners */
}

.location-search {
    position: relative;
    order: -1;
    flex: 1;
}

.search-icon {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #666;
    z-index: 1;
    font-size: 16px;
}

.city-search {
    width: 100%;
    height: 45px;
    padding: 8px 15px 8px 40px;
    border: 1px solid #dee2e6;
    border-right: none;
    background: #ffffff;
    font-size: 14px;
    transition: box-shadow 0.2s;
    text-align: center;
}


.city-search:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(0,123,255,0.25);
}




.dynamic-fields {
    position: relative;
    top: 1;
    left: 0;
    width: 100%;
	z-index: -1; 
}


.dynamic-fields select {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #dee2e6;
    border-radius: 0;
    height: 45px;
}

.search-btn {
    height: 45px;
    padding: 0 25px;
    background: linear-gradient(135deg, #007bff, #0056b3);
    color: #ffffff;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    margin: 0;
	 width: 15%;
	 box-shadow: 0 2px 8px rgba(0, 123, 255, 0.3);
	     border-top-right-radius: 50px;
    border-bottom-right-radius: 50px;
    padding-right: 25px;
}

.search-btn:hover {
    background: #0056b3;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.4);
}

.search-group:first-child select,
.search-group:first-child input {
    border-top-left-radius: 0; /* Remove rounded corners */
    border-bottom-left-radius: 0; /* Remove rounded corners */
    padding-left: 25px;
}

.search-btn {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}


.scrollable-select {
    width: 100%;
    height: 45px;
    padding: 8px 15px 8px 40px;
    border: 1px solid #dee2e6;
    border-right: none;
    background: #ffffff;
    font-size: 14px;
    transition: box-shadow 0.2s;
    text-align: center;
}


.scrollable-select:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(0,123,255,0.25);
}

#services-search .hero-search-form {
    display: flex;
    flex-wrap: nowrap;
    max-width: 800px;
    margin: 30px auto;
    padding: 0;
    gap: 0;
    position: relative;
}

/* Set the order for service type (first) */
#services-search .service-type-group {
    order: 1;
    flex: 1;
    position: relative;
    margin: 0;
    padding: 0;
    width: 25%;
}

/* Set the order for city (second) */
#services-search .city-field-group {
    order: 2;
    flex: 1;
    position: relative;
    margin: 0;
    padding: 0;
    width: 25%;
}

/* Set the order for kebele (third) */
#services-search .kebele-field-group {
    order: 3;
    flex: 1;
    position: relative;
    margin: 0;
    padding: 0;
    width: 25%;
}

/* Ensure the search button remains last */
#services-search .search-btn {
    order: 4;
}

/* Style for the first element (service type) */
#services-search .service-type-group select {
    border-top-left-radius: 50px;
    border-bottom-left-radius: 50px;
    padding-left: 25px;
    border-right: none;
}

/* Style for the middle elements */
#services-search .city-field-group select,
#services-search .kebele-field-group select {
    border-radius: 0;
    border-right: none;
}

/* Override any existing order values */
#services-search .location-search {
    order: 2 !important;
}

@media (max-width: 1050px) {
    .search-row {
        flex-direction: column;
    }
    
    .search-group select,
    .search-group input {
        border-right: 1px solid #dee2e6;
        border-radius: 4px;
        margin-bottom: 10px;
    }
    
    .search-btn {
        width: 100%;
        border-radius: 4px;
    }
    
    .tab-btn {
        padding: 10px;
        font-size: 14px;
    }
}

/* Show scrollbar when dropdown is opened */

.room-row {
    display: flex;
    gap: 20px;
}

.room-column {
    flex: 1;
}

.room-column label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
}

.room-column select {
    width: 100%;
}

.room-selector {
    padding: 10px;
    background: #fff;
}

.room-type {
    margin: 5px 0;
}

.number-bar {
    display: flex;
    gap: 8px;
    padding: 5px;
}

.room-number {
    padding: 5px 10px;
    border: 1px solid #ddd;
    border-radius: 3px;
    cursor: pointer;
}

.room-number.selected {
    background: #3498db;
    color: white;
}

.search-criteria option {
    padding: 8px;
}
.custom-dropdown {
    position: relative;
    width: 100%;
    color: #333;
    background: #fff;
}

.dropdown-header {
    padding: 8px 12px;
    border: none;  /* Change this */
    border-radius: 0;  /* Change this */
    cursor: pointer;
    background: transparent;  /* Change this */
    color: #333;
	line-height: 15px;
	  
}

.dropdown-content {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-top: 4px;
    display: none;
    z-index: 1000;
}
.custom-dropdown.active .dropdown-content {
    display: block;
}


.room-bars {
    padding: 10px;
}

.bed-bar, .bath-bar {
    margin: 8px 0;
}

.number-options {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}


.number-options span {
    color: #333;
    background: #fff;
    padding: 6px 15px;
    border: 1px solid #ddd;
    font-weight: 500;
}

.number-options span:hover {
    background: #f0f0f0;
}

.number-options span.selected {
    background: #3498db;
    color: #fff;
    border-color: #3498db;
}






/* Media Queries */
@media (max-width: 1050px) {
    .mobile-menu {
        display: block;
    }
    
    .desktop-hero {
        display: none;
    }
}


.hero .property-types {
    display: none;
}
body {
    font-family: 'Poppins', sans-serif;
    line-height: 1.6;
    color: #333;
    background: #f8f9fa;
    padding-top: 0; /* Remove padding-top */
}
header {
    position: absolute; /* Change to absolute */
    width: 100%;
    top: 0;
    z-index: 1000;
    background-color: transparent; /* Make header transparent */
    box-shadow: none; /* Remove shadow */
}

.property-category {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 15px;
    padding: 1.5rem;
    box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
    transition: all 0.4s ease;
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.property-category h2 {
    color: #2c3e50;
    font-size: 1.3rem;
    margin-bottom: 1rem;
    padding-bottom: 0.8rem;
    border-bottom: 2px solid #3498db;
    display: flex;
    align-items: center;
    gap: 0rem;
}

.property-category h2 i {
    color: #3498db;
}

.property-subcategory {
    display: grid;
    gap: 0rem;
}

.property-type {
    background: #f8f9fa;
    border-radius: 10px;
    padding: 0.5rem;
    transition: all 0.3s ease;
}

.property-type h3 {
    font-size: 1.1rem;
    color: #34495e;
    margin-bottom: 0.8rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.property-type ul {
    list-style: none;
    padding: 0;
}

.property-type li {
    margin: 0.5;
	   gap: 0rem;
}

.property-type a {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.6rem;
    color: #555;
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.property-type a:hover {
    background: #3498db;
    color: #fff;
    transform: translateX(5px);
}

.property-type a i {
    width: 20px;
    text-align: center;
    font-size: 1.1rem;
}

/* Hover Effects */
.property-category:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 40px rgba(31, 38, 135, 0.2);
}

/* Responsive Design */
@media (max-width: 1024px) {
    .property-types {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 1050px) {
    .property-types {
        grid-template-columns: 1fr;
        padding: 1rem;
    }
    
    .property-category {
        padding: 1rem;
    }
}

@media (max-width: 480px) {
    .hero-content {
        padding: 1rem;
    }
    
    .property-type a {
        padding: 0.5rem;
        font-size: 0.9rem;
    }
}

/* Independent Buy Section Control - Add this at the end of your CSS file */
.property-types {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    padding: 2rem;
    max-width: 1200px;
    margin: 2rem auto;
    position: relative;
    z-index: 3;
}

.property-category {
    height: 550px;
}

.property-category.buy-section {
    position: relative;
    height: 550px;
    overflow: hidden;
    transition: height 0.5s ease;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.property-category.buy-section.expanded {
    height: auto !important;
}

.property-category.buy-section .property-subcategory {
    display: grid;
    gap: 0.8rem;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    margin-bottom: 50px;
}

.buy-section .show-more-btn {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 3rem);
    background: #3498db;
    color: white;
    padding: 10px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    z-index: 100;
}

@media (max-width: 1200px) {
    .property-category.buy-section .property-subcategory {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
}

@media (max-width: 992px) {
    .property-category.buy-section .property-subcategory {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    }
}

@media (max-width: 1050px) {
    .property-types {
        grid-template-columns: 1fr;
    }
    .property-category.buy-section {
        height: 450px;
    }
    .property-category.buy-section .property-subcategory {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 576px) {
    .property-category.buy-section {
        height: 400px;
    }
    .buy-section .show-more-btn {
        width: calc(100% - 2rem);
    }
}

.property-listings {
    margin-top: -10px;
    padding: 20px;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.page-listings {
    margin-top: 100px;
}

/* Base styles (shared between desktop and mobile) */
.search-form-container {
    background: linear-gradient(to right, #f8f9fa, #ffffff);
    padding: 15px;
    border-radius: 10px;
    margin-bottom: -50px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    margin-top: 80px;
    z-index: 1;
}

.visible-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); /* Reduced from 180px to 150px */
    gap: 10px; /* Reduced from 12px to 10px */
    margin-bottom: 15px;
    align-items: center;
}

.hidden-fields {
    display: none;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* Reduced from 180px to 150px */
    gap: 10px; /* Reduced from 12px to 10px */
    padding-top: 15px;
    border-top: 1px solid #e9ecef;
}

.Property-form-group {
    margin-bottom: 0;
}

.Property-form-group label {
    display: none;
}

.Property-form-group select,
.Property-form-group input {
    width: 100%;
    padding: 10px 12px; /* Reduced from 10px 12px to 8px 10px */
    border: 1px solid #dee2e6;
    border-radius: 6px;
    height: 38px; /* Reduced from 42px to 38px */
    font-size: 14px;
    background-color: white;
    transition: all 0.3s ease;
}

.Property-form-group select:hover,
.Property-form-group input:hover {
    border-color: #007bff;
}

.Property-form-group select:focus,
.Property-form-group input:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 3px rgba(0,123,255,0.1);
}

.search-form-buttons {
    display: flex;
    justify-content: flex-end; /* Changed from space-between to flex-end */
    align-items: center;
    margin-top: 15px;
    gap: 10px; /* Reduced from 12px to 10px */
}

.more-filters-btn {
    background: #007bff;
    color: white;
    padding: 8px 12px; /* Reduced from 10px 12px to 8px 12px */
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
    font-size: 15px;
    height: 38px; /* Reduced from 42px to 38px */
    width: auto;
    min-width: 120px;
    transition: all 0.3s ease;
    margin-left: auto !important; /* Push to right */
    position: absolute !important;
    right: 0 !important;
    top: 14px !important;
}

.more-filters-btn:hover {
    background: #0056b3;
    transform: translateY(-1px);
}

.Property-form-group {
    flex: 1 1 150px; /* Reduced from 180px to 150px */
    min-width: 165px; /* Reduced from 180px to 150px */
    position: relative !important;
}

/* Ensure the more-filters-btn doesn't grow like the form fields */
.more-filters-btn {
    flex: 0 0 auto;
    z-index: 999 !important;
}



.Property-search-button {
    background: #28a745;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 42px;
    margin-left: auto;
    transition: all 0.3s ease;
}

.Property-search-button:hover {
    background: #218838;
    transform: translateY(-1px);
}
.Property-form-group .checkbox-group {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    width: 100% !important;
	margin-top: 15px !important; /* Add space at the top */
    padding-left: 20px !important; /* Add left indent */
  }
  
  .Property-form-group .checkbox-group label {
    display: inline-flex !important;
    width: auto !important;
    margin-right: 30px !important;
    margin-bottom: 10px !important;
  }
  
  .Property-form-group .checkbox-group input[type="checkbox"] {
    margin-right: 8px !important;
    position: static !important;
    float: none !important;
  }
  
  .Property-form-group .checkbox-group input[type="checkbox"] {
    margin-right: 8px !important;
    position: static !important;
    float: none !important;
  }


/* Ensure checkboxes are always on the left side */
.Property-form-group .checkbox-group label {
  display: flex !important;
  align-items: center !important;
  position: relative !important;
}

.Property-form-group .checkbox-group input[type="checkbox"] {
  position: relative !important;
  left: 0 !important;
  margin-right: 8px !important;
}
@media (max-width: 1050px) {
    .search-form-container {
        padding: 15px 20px; /* Increased horizontal padding */
        margin-left: -10px; /* Extend to the left */
        margin-right: -10px; /* Extend to the right */
        width: calc(100% + 20px); /* Compensate for the negative margins */
    }
    
    .visible-fields {
        grid-template-columns: 1fr 1fr; /* Two columns for mobile */
        gap: 10px; /* Slightly increased gap */
    }
    
    /* Fix for hidden fields on mobile - also two columns */
    .hidden-fields {
        grid-template-columns: 1fr 1fr !important; /* Two columns */
        gap: 10px;
    }
    
    /* Ensure the hidden fields display properly when shown via JS */
    .hidden-fields[style*="flex"] {
        display: grid !important; /* Override the inline style from JS */
        grid-template-columns: 1fr 1fr !important; /* Two columns */
    }
    
    /* Add spacing between form groups on mobile */
    .Property-form-group {
        margin-bottom: 10px;
    }
    
    /* Show labels on mobile for better usability */
    .Property-form-group label {
        display: none;
    }
    
    /* Make fonts bolder and more visible */
    .Property-form-group select,
    .Property-form-group input {
        padding: 8px;
        height: 38px;
        font-size: 16px;
        font-weight: 500; /* Make text bolder */
        color: #333; /* Darker text color */
    }
    
    /* Make placeholder text darker */
    .Property-form-group select::placeholder,
    .Property-form-group input::placeholder {
        color: #555;
        font-weight: 500;
    }
    
    .search-form-buttons {
        flex-direction: column;
        gap: 12px;
        margin-top: 12px;
    }
    
    .Property-search-button {
        width: 100%;
        margin-left: 0;
        justify-content: center;
        font-weight: 600; /* Bolder text */
        font-size: 15px;
    }
    
    .more-filters-btn {
        width: 100%;
        font-weight: 600; /* Bolder text */
        font-size: 15px;
        position: relative !important; /* Reset absolute positioning */
        top: auto !important; /* Reset top positioning */
        right: auto !important; /* Reset right positioning */
        margin-left: 0 !important; /* Reset margin */
    }
    
    /* Adjust filter groups for mobile */
    .filter-group {
        margin-bottom: 12px;
    }
    
    /* Improve checkbox group layout on mobile */
    .checkbox-group {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        margin-top: 8px;
    }
    
    .checkbox-group label {
        font-size: 14px;
        font-weight: 500; /* Bolder text */
        display: flex;
        align-items: center;
    }
    
    .checkbox-group input[type="checkbox"] {
        width: 18px;
        height: 18px;
        margin-right: 8px;
    }
    
    .visible-fields,
    .hidden-fields {
        gap: 10px;
    }
}

/* Small mobile devices */
@media (max-width: 480px) {
    .search-form-container {
        padding: 12px 1px; /* Minimal horizontal padding */
        margin-left: -9px; /* Minimal negative margin */
        margin-right: -8px; /* Minimal negative margin */
        width: calc(100% + 4px); /* Adjusted to match the new negative margins */
    }
    
    /* Keep two columns but make elements even smaller */
    .visible-fields,
    .hidden-fields,
    .hidden-fields[style*="flex"] {
        grid-template-columns: 1fr 1fr !important; /* Keep two columns */
        gap: 3px; /* Maintain reasonable gap */
    }
    
    .checkbox-group {
        grid-template-columns: 1fr 1fr; /* Keep two columns */
        gap: 6px;
    }
    
    /* Make form elements even smaller on very small screens but keep bold text */
    .Property-form-group select,
    .Property-form-group input {
        padding: 6px 8px;
        height: 36px;
        font-size: 16px;
        font-weight: 500; /* Keep text bold */
    }
    
    /* Reduce text size for better fit but keep bold */
    .checkbox-group label {
        font-size: 13px;
        font-weight: 500; /* Keep text bold */
    }
    
    .checkbox-group input[type="checkbox"] {
        width: 16px;
        height: 16px;
        margin-right: 6px;
    }
    
    /* Reduce button size but keep bold text */
    .more-filters-btn,
    .Property-search-button {
        padding: 7px;
        height: 40px;
        font-size: 14px;
        font-weight: 600; /* Keep text bold */
		 margin-top: -12px; /* This will move the button up */
    }
}



/* Property Grid */
.property-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr, minmax(300px, 1fr));
    gap: 2rem;
    padding: 2rem;
    max-width: 1400px;
    margin: 0 auto;
}

.property-card {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

.property-card:hover {
    transform: translateY(-5px);
}

.property-image-container {
    position: relative;
    height: 200px;
}

.property-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.property-status {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
    background: #3498db;
    color: #fff;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.9rem;
}
.property-time-ago {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background-color: rgba(0, 0, 0, 0.6);
    color: #fff;
    padding: 3px 8px;
    border-radius: 3px;
    font-size: 0.7rem;
    z-index: 1;
}
.property-views {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background-color: rgba(0, 0, 0, 0.6);
    color: #fff;
    padding: 3px 8px;
    border-radius: 3px;
    font-size: 0.7rem;
    z-index: 1;
}
.property-details {
    padding: 1.5rem;
}

/* Footer */
footer {
    background: #2c3e50;
    color: #fff;
    padding: 3rem 0 1rem;
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    padding: 0 2rem;
}

.footer-bottom {
    text-align: center;
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255,255,255,0.1);
}

/* Mobile Navigation Toggle */
.nav-toggle {
    display: none;
    background: none;
    border: none;
    color: #2c3e50;
    font-size: 1.5rem;
    cursor: pointer;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .language-selector {
        right: 150px;
    }
}

@media (max-width: 992px) {
    .search-form {
        grid-template-columns: 1fr 1fr;
    }
    
    .language-selector {
        right: 150px;
    }
}

@media (max-width: 1050px) {
    .nav-toggle {
        display: block;
    }

    .main-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #fff;
        flex-direction: column;
        padding: 1rem;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }

    .main-menu.active {
        display: flex;
    }

    .submenu,
    .nested-submenu > ul {
        position: static;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        width: 100%;
        margin-left: 1rem;
    }

    .right-menu {
        display: none;
    }

    .footer-content {
        grid-template-columns: 1fr;
    }

    .hero {
        min-height: 60vh;
        margin-top: 60px;
    }

    .search-form {
        grid-template-columns: 1fr;
    }

    .visible-fields {
        grid-template-columns: 1fr;
    }

    .language-selector {
     display:none;
    }
}

@media (max-width: 1050px) {
    header .language-selector-desktop {
        display: none !important;
    }
}
@media (max-width: 576px) {
    .hero-content {
        padding: 0 15px;
    }

    .search-form {
        padding: 15px;
    }

    .language-selector {
        display:none;
    }

    .form-group {
        flex: 1 1 100%;
    }

    .property-card {
        margin: 0 1rem;
    }
}

/* Utility Classes */
.btn {
    display: inline-block;
    padding: 0.8rem 1.5rem;
    border-radius: 4px;
    text-decoration: none;
    transition: all 0.3s ease;
	margin: 0 2px;
}

.view-details {
    background: #3498db;
    color: #fff;
}

.view-details:hover {
    background: #2980b9;
}
/* Property Details */
.property-details {
    padding: 1.5rem;
}

.property-title {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: #2c3e50;
}

.property-features {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 1rem;
}

.feature {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #666;
    font-size: 0.9rem;
}

.feature i {
    color: #3498db;
}

.property-price {
    font-size: 1.3rem;
    font-weight: 700;
    color: #3498db;
    margin-bottom: 1rem;
}

.property-location {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #666;
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.property-agent {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid #eee;
}

.agent-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.agent-info {
    flex: 1;
}

.agent-name {
    font-weight: 600;
    color: #2c3e50;
}

.agent-title {
    font-size: 0.8rem;
    color: #666;
}

/* Call to Action Section */
.cta-section {
    background: linear-gradient(rgba(52, 152, 219, 0.9), rgba(52, 152, 219, 0.9)), url('../images/cta-bg.jpg');
    background-size: cover;
    background-position: center;
    padding: 4rem 2rem;
    text-align: center;
    color: #fff;
    margin: 4rem 0;
}

.cta-content {
    max-width: 800px;
    margin: 0 auto;
}

.cta-title {
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
}

.cta-text {
    font-size: 1.1rem;
    margin-bottom: 2rem;
    opacity: 0.9;
}

.cta-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

/* Newsletter Section */
.newsletter {
    background: #f8f9fa;
    padding: 3rem 2rem;
    text-align: center;
}

.newsletter-content {
    max-width: 600px;
    margin: 0 auto;
}

.newsletter-form {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
}

.newsletter-form input {
    flex: 1;
    padding: 0.8rem;
    border: 1px solid #ddd;
    border-radius: 4px;
}

/* Additional Utility Classes */
.text-primary {
    color: #3498db;
}

.bg-primary {
    background-color: #3498db;
}

.text-center {
    text-align: center;
}

.mt-4 {
    margin-top: 2rem;
}

.mb-4 {
    margin-bottom: 2rem;
}

/* Animation Classes */
.fade-in {
    animation: fadeIn 0.5s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Print Styles */
@media print {
    header, 
    footer, 
    .search-form,
    .cta-section,
    .newsletter {
        display: none;
    }

    .property-card {
        break-inside: avoid;
    }

    body {
        padding: 0;
        margin: 0;
    }
}
/* Hide hero section property category */
.hero .property-types {
    display: none;
}
/* Keep all your existing CSS code, but update the mobile menu part at the end with this: */
.mobile-menu {
    display: none;
}



.listingPage .main-content-area {
    margin-top: 20px;
    padding: 20px;
    clear: both;
}services-grid

#property-title {
    margin: 20px 0;
    padding: 0 20px;
    font-size: 24px;
    color: #333;
    clear: both;
}

.property-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    padding: 20px;
}
.property-card {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    overflow: hidden;
    transition: transform 0.2s;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.property-image-container {
    position: relative;
    width: 100%;
    height: 250px;
    overflow: hidden;
    background-color: #f5f5f5;
}

.property-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.property-image[src] {
    opacity: 1;
}


.property-details {
    padding: 15px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.property-details h3 {
    margin: 0;
    font-size: 18px;
    color: #333;
}

.property-price {
    font-size: 20px;
    font-weight: bold;
    color: #2196F3;
    margin: 5px 0;
}

.property-location {
    color: #666;
    display: flex;
    align-items: center;
    gap: 5px;
}

.property-features {
    display: flex;
    gap: 15px;
    margin: 10px 0;
}

.property-features span {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #666;
    font-size: 14px;
}

.view-details {
    margin-top: auto;
    padding: 8px 15px;
    background: #2196F3;
    color: white;
    text-decoration: none;
    border-radius: 4px;
    text-align: center;
    transition: background 0.2s;
}
/* Add these new styles at the end of your existing CSS file */

/* Enhanced Property Card Styles */
.property-card {
    position: relative;
    border: 1px solid #eaeaea;
    transition: all 0.3s ease;
}

.property-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* Image Container Improvements */
.property-image-container {
    position: relative;
    overflow: hidden;
}

.property-image-container::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(to top, rgba(0,0,0,0.4), transparent);
    pointer-events: none;
}

/* Property Status Badge */
.property-status {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #3498db;
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 12px;
    z-index: 1;
}

/* Enhanced Property Details */
.property-details {
    background: white;
    position: relative;
}

.property-title {
    font-size: 1.1rem;
    line-height: 1.4;
    margin-bottom: 8px;
}

.property-features {
    display: flex;
    gap: 15px;
    padding: 10px 0;
    border-top: 1px solid #eaeaea;
    border-bottom: 1px solid #eaeaea;
}

.feature {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.9rem;
    color: #666;
}

/* Price Tag Styling */
.property-price {
    color: #2ecc71;
    font-weight: 600;
    font-size: 1.2rem;
    margin: 10px 0;
}

/* Location Style */
.property-location {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #777;
    font-size: 0.9rem;
    margin-bottom: 10px;
}

/* View Details Button Enhancement */
.view-details {
    display: inline-block;
    width: 100%;
    padding: 10px;
    background: #3498db;
    color: white;
    text-align: center;
    text-decoration: none;
    border-radius: 4px;
    transition: background 0.3s ease;
}

.view-details:hover {
    background: #2980b9;
}

/* Responsive Improvements */

.property-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    padding: 12px;
    background: #f8f9fa;
    border-bottom: 1px solid #eee;
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: #666;
}

.meta-item i {
    color: #3498db;
    font-size: 14px;
}

.category-label {
    color: #3498db;
    font-weight: 500;
}

.property-content {
     padding: 10px 15px;
}

.property-content h3 {
    margin: -15px 0 8px; /* Negative top margin to move it up */
    font-size: 18px;
    color: #2c3e50;
    padding-top: 0; /* Remove any top padding */
    line-height: 1.2; /* Tighter line height */
}


.property-price {
   margin-bottom: 12px;
    margin-top: 5px;
}

.price-tag {
    font-size: 20px;
    font-weight: 600;
    color: #2ecc71;
}

.view-details {
    display: inline-block;
    padding: 8px 20px;
    background: #3498db;
    color: white;
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.view-details:hover {
    background: #2980b9;
    transform: translateY(-2px);
}
.meta-item .large-green-price  {
    font-size: 0.9rem; /* Makes the text larger - adjust as needed */
    color: #28a745; /* Bootstrap green color - you can use any green color code */
    font-weight: 600; /* Makes the text slightly bolder */
}

 
/* Mobile Styles for Property Listings */

@media screen and (max-width: 1050px) {
  /* Adjusted styles for price positioning - moved up slightly */
  .property-price, 
  div.property-price,
  .property-content .property-price {
    margin-top: 5px !important; /* Reduced from 10px */
    position: relative !important;
    top: 2px !important; /* Reduced from 5px */
    padding-top: 3px !important; /* Reduced from 5px */
    display: block !important;
    clear: both !important;
  }
  
  /* Ensure price tag maintains proper spacing */
  .property-price .price-tag,
  span.price-tag,
  div.property-price > span.price-tag {
    margin-top: 4px !important; /* Reduced from 8px */
    display: inline-block !important;
    position: relative !important;
    top: 1px !important; /* Reduced from 3px */
  }
  /* Force single column layout for property grid */
  .property-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 4px !important;
    padding: 0 !important; /* Remove horizontal padding */
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important; /* Remove any margin */
  }
  
  /* Ensure each property card takes full width */
  .property-card {
    width: 100% !important;
    margin-bottom: 4px !important; /* Reduced from 20px */
    display: flex;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
    flex-direction: column !important;
  }
  
  /* Main content area adjustments */
  .listingPage .main-content-area { 
    margin-top: 20px;
    padding: 3px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  /* Image container height adjustment - increased size */
  .property-image-container {
    height: 200px !important;
    width: 100% !important;
  }
  
  .property-image {
    height: 200px !important;
    object-fit: cover !important;
  }
  .property-time-ago {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background-color: rgba(0, 0, 0, 0.6);
    color: #fff;
    padding: 3px 8px;
    border-radius: 3px;
    font-size: 0.7rem;
    z-index: 1;
}
.property-views {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background-color: rgba(0, 0, 0, 0.6);
    color: #fff;
    padding: 3px 8px;
    border-radius: 3px;
    font-size: 0.7rem;
    z-index: 1;
}
  /* Property details padding adjustment */
  .property-details {
    padding: 6px;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* CRITICAL: Force meta items to display in a row */
  .property-meta {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    align-items: center !important;
    width: 100% !important;
    padding: 8px !important;
    gap: 5px !important;
  }
  
  /* Force meta items to behave like inline elements */
  .meta-item {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: fit-content !important;
    flex-direction: row !important;
    align-items: center !important;
    font-size: 12px !important;
    margin-bottom: 5px !important;
    margin-right: 8px !important;
    white-space: nowrap !important;
    float: none !important;
  }
  
  /* Ensure icons align properly */
  .meta-item i {
    margin-right: 4px !important;
    display: inline-block !important;
  }
  
  /* Ensure text in meta items displays properly */
  .meta-item span {
    display: inline !important;
    white-space: nowrap !important;
  }
  
  /* Clear any potential float issues */
  .property-details::after {
    content: "";
    display: table;
    clear: both;
  }
  
  /* Property content adjustments with reduced height */
/* Super specific price tag selectors with !important flags */
.property-content .property-price .price-tag,
.property-price .price-tag,
.price-tag,
span.price-tag,
.property-card .property-content .property-price .price-tag,
.property-card span.price-tag,
div.property-price > span.price-tag {
  font-size: 18px !important;
  font-weight: bold !important;
  color: #2ecc71 !important;
  display: inline-block !important;
  line-height: 1.2 !important;
  margin: 4px 0 !important;
  padding: 0 !important;
   margin-bottom: 0 !important;
  padding-bottom: 0 !important;

}

 
.property-content {
  padding-bottom: 4px !important; /* Reduced bottom padding */
}
.property-content > *:last-child {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
  /* Hide view details button completely */
  .view-details,
  .property-content .view-details,
  .property-content .btn.view-details,
  a.view-details,
  a.btn.view-details {
    display: none !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    font-size: 0 !important;
    line-height: 0 !important;
    overflow: hidden !important;
	
  }
  
  /* Status badge adjustments */
  .property-status {
    font-size: 11px;
    padding: 4px 8px;
  }
  
  /* Fix for any potential overflow issues */
  img.property-image {
    max-width: 100%;
    height: 200px;
    object-fit: cover !important;
  }
  
  /* Prevent text overflow and reduce height */
  .property-content h3 {
    margin: -15px 0 8px; /* Negative top margin to move it up */
    font-size: 18px;
    color: #2c3e50;
    padding-top: 0; /* Remove any top padding */
    line-height: 1.2; /* Tighter line height */
}
  
  /* Ensure no horizontal scrolling */
  body {
    overflow-x: hidden;
  }
  
  /* Remove any potential space after property content */
  .property-content:after {
    content: none !important;
  }
  
  /* Reduce property card bottom margin */
  .property-card {
    margin-bottom: 4px !important;
  }
  .meta-item .large-green-price {
    font-size: 0.8rem; /* Makes the text larger - adjust as needed */
    color: #28a745; /* Bootstrap green color - you can use any green color code */
    font-weight: 600; /* Makes the text slightly bolder */
}
}

/* Extra small devices */
@media screen and (max-width: 480px) {
  /* Adjusted for very small screens - moved up slightly */
  .property-time-ago {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background-color: rgba(0, 0, 0, 0.6);
    color: #fff;
    padding: 3px 8px;
    border-radius: 3px;
    font-size: 0.7rem;
    z-index: 1;
}
.property-views {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background-color: rgba(0, 0, 0, 0.6);
    color: #fff;
    padding: 3px 8px;
    border-radius: 3px;
    font-size: 0.7rem;
    z-index: 1;
}
  .property-price, 
  div.property-price,
  .property-content .property-price {
    margin-top: 6px !important; /* Reduced from 12px */
    top: 3px !important; /* Reduced from 7px */
  }
  
  .property-price .price-tag,
  span.price-tag,
  div.property-price > span.price-tag {
    margin-top: 5px !important; /* Reduced from 10px */
    top: 2px !important; /* Reduced from 5px */
  }
  /* Adjust for very small screens */
 .property-content h3 {
    margin: -15px 0 8px; /* Negative top margin to move it up */
    font-size: 18px;
    color: #2c3e50;
    padding-top: 0; /* Remove any top padding */
    line-height: 1.2; /* Tighter line height */
}

  
  .price-tag {
    font-size: 14px !important;
  }
  
  .property-meta {
    padding: 4px !important;
  }
  
  .meta-item {
    font-size: 11px !important;
  }
  .meta-item .large-green-price  {
    font-size: 0.65rem; /* Makes the text larger - adjust as needed */
    color: #28a745; /* Bootstrap green color - you can use any green color code */
    font-weight: 600; /* Makes the text slightly bolder */
}
}






.property-card {
    transition: transform 0.3s ease;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 15px rgba(0,0,0,0.1);
}

.property-card:hover {
    transform: translateY(-5px);
}
.package-features {
    margin-top: 10px;
}

.features-list {
    background: #f8f9fa;
    padding: 10px;
    border-radius: 5px;
}

.feature-item {
    margin: 5px 0;
    font-size: 14px;
}

.feature-item i {
    color: #28a745;
    margin-right: 5px;
}

.form-section-title {
    font-weight: bold;
    margin-bottom: 15px;
    color: #333;
}
.phone-link {
    margin-left: 0;
    color: inherit;
    text-decoration: none;
}

.phone-link:hover {
    text-decoration: underline;
}

/* Navigation arrows styling */
.section-nav {
  position: relative;
  display: flex;
  gap: 10px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-left: 15px; /* Add left padding to indent from the left edge */
}


.nav-arrow {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.nav-arrow:hover {
  background-color: #007bff;
  color: white;
  border-color: #007bff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* Container for scrollable content */
.section-content {
  position: relative;
  overflow: hidden; /* Keep hidden to prevent partial cards showing */
  padding: 0 40px; /* Padding for arrows */
  box-sizing: border-box;
  width: 100%;
}

/* Grid containers */
.home-section .property-grid, 
.home-section .services-grid {
  display: flex;
  transition: transform 0.5s ease;
  width: 100%;
}

.home-section .property-card, 
.home-section .service-provider-card {
  flex: 0 0 33.333%; /* Exactly one-third of the container */
  padding-right: 20px; /* Use padding instead of margin or gap */
  box-sizing: border-box; /* Include padding in width calculation */
  min-width: 0; /* Prevents flex items from overflowing */
}

/* Remove padding from every third card to prevent partial fourth card */
.home-section .property-card:nth-child(3n), 
.home-section .service-provider-card:nth-child(3n) {
  padding-right: 0;
}

/* Absolute positioned arrows for better UX */
.section-nav-absolute {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
}

.prev-arrow-absolute, 
.next-arrow-absolute {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.9);
  border: 1px solid #ddd;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: all 0.3s ease;
  pointer-events: auto;
  z-index: 10;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.prev-arrow-absolute {
  left: 5px;
}

.next-arrow-absolute {
  right: 5px;
}

.prev-arrow-absolute:hover, 
.next-arrow-absolute:hover {
  background-color: #007bff;
  color: white;
  border-color: #007bff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Make arrows more visible */
.prev-arrow-absolute i, 
.next-arrow-absolute i {
  font-size: 16px;
}

/* Ensure the section has proper spacing */
.home-section {
  position: relative;
  margin-bottom: 40px;
  overflow: hidden;
  padding: 0 10px;
}

/* Ensure proper image display */
.home-section .property-image-container {
  height: 200px;
  width: 100%;section-nav
}

.home-section .property-image,
.home-section .provider-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Ensure card content is properly spaced */
.home-section .property-details,
.home-section .provider-details {
  padding: 15px;
  width: 100%;
  box-sizing: border-box;
}

/* Responsive adjustments */
@media (max-width: 992px) {
  .home-section .property-card,
  .home-section .service-provider-card {
    flex: 0 0 50%; /* Show 2 cards on medium screens */
  }
  
  /* Remove padding from every second card */
  .home-section .property-card:nth-child(3n),
  .home-section .service-provider-card:nth-child(3n) {
    padding-right: 20px;
  }
  
  .home-section .property-card:nth-child(2n),
  .home-section .service-provider-card:nth-child(2n) {
    padding-right: 0;
  }
}

@media (max-width: 576px) {
  .home-section .property-card,
  .home-section .service-provider-card {
    flex: 0 0 100%; /* Show 1 card on small screens */
    padding-right: 0; /* No padding needed for single column */
  }
  
  .section-content {
    padding: 0 30px;
  }
}

/* Add this new CSS section at the end of your file to override conflicting styles */

/* Horizontal Scrolling for Mobile */
/* Mobile Improvements - Horizontal Scrolling */
@media (max-width: 1050px) {
  /* Hide navigation arrows on mobile */
  .prev-arrow-absolute, 
  .next-arrow-absolute {
    display: none !important;
  }
  
  /* Container for scrollable content */
  .section-content {
    overflow-x: auto !important;
    overflow-y: visible !important;
    padding: 0 !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    margin: 0 !important;
    width: 100% !important;
  }
  
  /* Hide scrollbar */
  .section-content::-webkit-scrollbar {
    display: none !important;
  }
  
  /* Ensure horizontal scrolling */
  .home-section .property-grid, 
  .home-section .services-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: visible !important;
    width: auto !important; /* Allow content to determine width */
    padding: 10px !important;
    gap: 10px !important;
    transform: none !important; /* Remove transform as we're using native scroll */
  }
  
  /* Card styling */
  .home-section .property-card, 
  .home-section .service-provider-card {
    flex: 0 0 85% !important; /* Make cards take up 70% of viewport width */
    min-width: 200px !important;
    max-width: 300px !important;
    margin: 0 !important;
    scroll-snap-align: start !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
  }
  
  /* Remove any gradient overlays on images */
  .property-image-container::after,
  .property-image::after {
    display: none !important;
    content: none !important;
    background: none !important;
  }
  
  /* Make images larger */
  .home-section .property-image-container {
    height: 180px !important;
    width: 100% !important;
    position: relative !important;
    overflow: hidden !important;
  }
  
  .home-section .property-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }
  
  /* Make text smaller */
  .home-section .property-title {
    font-size: 0.85rem !important;
    margin-bottom: 5px !important;
    line-height: 1.2 !important;
  }
  
  .home-section .property-price {
	   margin-top: -5px !important; /* Negative margin to move up */
    font-size: 0.9rem !important;
   margin-bottom: 2px !important; /* Reduced bottom margin */
  }
  
  .home-section .property-location {
    font-size: 0.75rem !important;
  }
  
  .home-section .property-details {
    padding: 8px !important;
    background: white !important;
	padding-top: 5px !important; /* Reduced top padding */
  }
  
  /* Ensure the home section has proper positioning */
  .home-section {
    position: relative !important;
    overflow: visible !important;
    margin-bottom: 20px !important;
    padding: 0 !important;
  }
  
  /* Fix any potential z-index issues */
  .property-card {
    position: relative !important;
    z-index: 1 !important;
  }
  
  /* Remove any potential overlay elements */
  .property-image-container::before,
  .property-image-container::after {
    display: none !important;
  }

.home-section .service-provider-card .provider-image
 {
  width: 65% !important; /* Reduced from 100% */
  height: 140px !important; /* Reduced from 150px */
  margin: 10px auto !important; /* Added margin to create space around the image */
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.home-section .service-provider-card .provider-image img
 {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important; /* Changed from cover to contain */
  object-position: center !important;
}

/* Preserve existing mobile menu container styles */
.mobile-menu-container {
    width: 100vw;
    background-color: #f5f5f5;
    padding: 10px 0;
    margin-bottom: 20px;
    margin-left: -15px;
    margin-right: -15px;
    box-sizing: border-box;
}


/* Aggressively hide hero search mobile part by default */
.hero-search-mobile-part {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    pointer-events: none !important;
    max-height: 0 !important;
    max-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
}

/* Media query for mobile devices - ensure ALL properties are overridden */
@media (max-width: 1050px) {
    /* Initial state - only show search box, hide tabs and content */
    .hero-search-mobile-part .search-tabs,
    .hero-search-mobile-part .search-content {
        display: none !important;
        opacity: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        transition: opacity 0.3s ease, height 0.3s ease !important;
    }

    /* Search box that will always be visible */
    .hero-search-mobile-part .search-trigger-box {
        width: 100% !important;
        padding: 12px 15px !important;
        background: #ffffff !important;
        border: 1px solid #ced4da !important;
        border-radius: 8px !important;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
        display: flex !important;
        align-items: center !important;
        cursor: pointer !important;
        margin-bottom: 10px !important;
        transition: all 0.3s ease !important;
    }

    .hero-search-mobile-part .search-trigger-box:hover {
        box-shadow: 0 4px 15px rgba(0,0,0,0.15) !important;
        border-color: #adb5bd !important;
    }

    .hero-search-mobile-part .search-trigger-box i {
        margin-right: 10px !important;
        color: #007bff !important;
        font-size: 18px !important;
    }

    .hero-search-mobile-part .search-trigger-box span {
        color: #6c757d !important;
        font-size: 14px !important;
        font-weight: 500 !important;
    }

    /* When search is active, show tabs and content */
    .hero-search-mobile-part.search-active .search-tabs,
    .hero-search-mobile-part.search-active .search-content {
        display: block !important;
        opacity: 1 !important;
        height: auto !important;
        overflow: visible !important;
    }

    /* Optional: Add a subtle overlay when search is active */
    .search-overlay {
        display: none !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background-color: rgba(0,0,0,0.3) !important;
        z-index: 999 !important;
    }

    .search-overlay.active {
        display: block !important;
    }

    /* Show mobile search, hide desktop hero */
    .hero-search-mobile-part {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        overflow: visible !important;
        position: static !important;
        pointer-events: auto !important;
        max-height: none !important;
        max-width: none !important;
        padding: 15px !important;
        margin: 0 !important;
        clip: auto !important;
        clip-path: none !important;
        background-color: #f8f9fa !important;
        border-bottom: 1px solid #e9ecef !important;
        width: 100% !important;
        box-sizing: border-box !important;
        z-index: 1000 !important;
        margin-top: -55px !important; /* Negative margin to move up */
        padding-top: 10px !important; /* Maintain some padding */
    }
    
    /* Mobile menu container flex properties */
    .mobile-menu-container {
        display: flex !important;
        flex-direction: column !important;
    }
    
    .desktop-hero {
        display: none !important;
    }
    
    /* Mobile Menu - Always visible on mobile */
    .mobile-menu {
        order: 2 !important; /* Appears after the search */
    }
    
    .hero-search-mobile-part {
        order: 1 !important; /* Ensure it appears at the top */
    }
    
    /* Search Tabs */
.hero-search-mobile-part .search-tabs {
    display: flex !important;
    justify-content: space-between !important;
    margin-bottom: 15px !important;
    border-bottom: 1px solid #dee2e6 !important;
    flex-wrap: nowrap !important; /* Prevent wrapping */
    width: 100% !important;
}
    
  .hero-search-mobile-part .tab-btn {
    flex: 1 1 0 !important; /* Equal width distribution */
    padding: 10px 30px !important; /* Reduce padding */
    background: none !important;
    border: none !important;
    font-size: 15px !important; /* Slightly smaller font */
    font-weight: 600 !important;
    color: #6c757d !important;
    text-align: center !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    white-space: nowrap !important; /* Prevent text wrapping */
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    min-width: 0 !important; /* Allow shrinking below content width */
}
    
    .hero-search-mobile-part .tab-btn.active {
        color: #007bff !important;
        border-bottom: 2px solid #007bff !important;
    }
    
    /* Search Content */
    .hero-search-mobile-part .search-content {
        position: relative !important;
    }
    
    .hero-search-mobile-part .tab-content {
        display: none !important;
    }
    
    .hero-search-mobile-part .tab-content.active {
        display: block !important;
    }
    
    /* Updated Form Elements for horizontal layout */
    .hero-search-mobile-part .hero-search-form {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
    }
    
    /* Make search row horizontal */
    .hero-search-mobile-part .search-row {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 5px !important;
        width: 100% !important;
        align-items: flex-start !important; /* Align items at the top */
    }
    
    /* Ensure all search groups have consistent height */
    .hero-search-mobile-part .search-group {
        width: 33.33% !important;
        min-width: 0 !important;
        flex: 1 !important;
        margin: 0 !important; /* Remove any margins */
        padding: 0 !important; /* Remove any padding */
        height: auto !important; /* Let height be determined by content */
        position: relative !important; /* For absolute positioning if needed */
    }
    
    /* Make all select boxes the same height */
    .hero-search-mobile-part select,
    .hero-search-mobile-part input {
        width: 100% !important;
        padding: 6px 4px !important;
        border: 1px solid #ced4da !important;
        border-radius: 4px !important;
        background-color: #fff !important;
        font-size: 12.5px !important;
        color: #495057 !important;
        appearance: auto !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        height: 32px !important; /* Set a fixed height for all inputs/selects */
        box-sizing: border-box !important; /* Include padding in height calculation */
        margin: 0 !important; /* Remove any margins */
        vertical-align: top !important; /* Align to top */
    }
    
    /* Fix for buy and rent tabs specifically */
    #mobile-buy-search .search-row,
    #mobile-rent-search .search-row {
        align-items: stretch !important; /* Stretch items to same height */
    }
    
    #mobile-buy-search .search-group,
    #mobile-rent-search .search-group {
        display: flex !important;
        flex-direction: column !important;
    }
    
    /* Fix for the second field (search criteria) */
    #mobile-buy-search .search-group:nth-child(2),
    #mobile-rent-search .search-group:nth-child(2) {
        margin-top: 0 !important;
        align-self: flex-start !important;
    }
    
    .hero-search-mobile-part .scrollable-select {
        max-height: 150px !important;
        overflow-y: auto !important;
    }
    
    /* Adjust button size */
    .hero-search-mobile-part .search-btn {
        width: 100% !important;
        padding: 6px !important; /* Smaller padding */
        background-color: #007bff !important;
        color: white !important;
        border: none !important;
        border-radius: 4px !important;
        font-size: 11px !important; /* Smaller font */
        font-weight: 500 !important;
        cursor: pointer !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 8px !important;
        margin-top: 5px !important; /* Reduced margin */
        transition: background-color 0.3s ease !important;
    }
    
    .hero-search-mobile-part .search-btn:hover {
        background-color: #0069d9 !important;
    }
    
    /* For services tab which has different layout */
    #mobile-services-search .hero-search-form {
        display: flex !important;
        flex-direction: column !important;
    }
    
    #mobile-services-search .search-group {
        width: 100% !important;
        margin-bottom: 5px !important;
    }
    
    /* Custom dropdown styling for search criteria */
    .hero-search-mobile-part .custom-dropdown.search-criteria {
        width: 100% !important;
        height: 32px !important;
        border: 1px solid #ced4da !important;
        border-radius: 4px !important;
        background-color: #fff !important;
        font-size: 11px !important;
        color: #495057 !important;
        overflow: visible !important; /* Changed from hidden to visible */
        box-sizing: border-box !important;
        margin: 0 !important;
        position: relative !important;
    }
    
    .hero-search-mobile-part .custom-dropdown .dropdown-header {
        padding: 6px 4px !important;
        height: 100% !important;
        display: flex !important;
        align-items: center !important;
        font-size: 12px !important;
        font-weight: normal !important;
        cursor: pointer !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        position: relative !important;
    }
    
    /* Add a dropdown indicator */
    .hero-search-mobile-part .custom-dropdown .dropdown-header:after {
        content: '\25BC' !important; /* Down arrow */
        position: absolute !important;
        right: 8px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        font-size: 8px !important;
        color: #6c757d !important;
    }

    /* Make the dropdown appear more like a popup with extended width */
    .hero-search-mobile-part .custom-dropdown .dropdown-content {
        position: absolute !important;
        top: calc(100% + 5px) !important;
        left: -20px !important; /* Extend further beyond the container */
        width: calc(100% + 40px) !important; /* Make it much wider than the container */
        background-color: #fff !important;
        border: 1px solid #ced4da !important;
        border-radius: 6px !important;
        z-index: 1001 !important;
        display: none !important;
        box-shadow: 0 6px 12px rgba(0,0,0,0.15) !important;
        padding: 15px !important;
        max-height: 250px !important;
        overflow-y: auto !important;
        max-width: none !important; /* Remove any max-width limitations */
        min-width: 280px !important; /* Set a minimum width */
    }

    /* Show dropdown content when active class is added */
    .hero-search-mobile-part .custom-dropdown.active .dropdown-content {
        display: block !important;
    }

    /* Add more space to the room bars container */
    .hero-search-mobile-part .room-bars {
        padding: 10px !important;
        width: 100% !important;
    }

    /* Ensure the bed and bath bars take full width */
    .hero-search-mobile-part .bed-bar,
    .hero-search-mobile-part .bath-bar {
        width: 100% !important;
        margin-bottom: 15px !important;
    }

    /* Make labels more prominent */
    .hero-search-mobile-part .bed-bar label,
    .hero-search-mobile-part .bath-bar label {
        display: block !important;
        margin-bottom: 8px !important;
        font-size: 13px !important;
        color: #333 !important;
        font-weight: 500 !important;
    }

    /* Force horizontal layout for number options */
    .hero-search-mobile-part .number-options {
        display: flex !important;
        width: 100% !important;
        flex-wrap: nowrap !important; /* Prevent wrapping */
        justify-content: space-between !important;
        gap: 8px !important;
    }

    /* Make individual options more compact but still visible */
    .hero-search-mobile-part .number-options span {
        flex: 1 1 0 !important; /* Equal width distribution */
        padding: 8px 0 !important;
        border: 1px solid #ced4da !important;
        border-radius: 6px !important;
        font-size: 14px !important;
        cursor: pointer !important;
        background-color: #f8f9fa !important;
        text-align: center !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        height: 36px !important;
        box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
        transition: all 0.2s ease !important;
        min-width: 0 !important; /* Allow shrinking below min-width */
        max-width: none !important; /* Remove any max-width limitations */
        white-space: nowrap !important; /* Prevent text wrapping */
    }

    /* Add hover effect */
    .hero-search-mobile-part .number-options span:hover {
        background-color: #e9ecef !important;
        border-color: #adb5bd !important;
    }

    /* Make selected options stand out more */
    .hero-search-mobile-part .number-options span.selected {
        background-color: #0069d9 !important;
        color: white !important;
        border-color: #0069d9 !important;
        box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;
        font-weight: bold !important;
    }
    /* Add a subtle overlay effect when dropdown is active */
    .hero-search-mobile-part .custom-dropdown.active::before {
        content: '' !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background-color: rgba(0,0,0,0.1) !important;
        z-index: 1000 !important;
        pointer-events: none !important;
    }

    /* Ensure the dropdown is above the overlay */
    .hero-search-mobile-part .custom-dropdown.active .dropdown-content {
        z-index: 1002 !important;
    }
	
	/* Ensure proper order */
#mobile-services-search .service-type-group {
    order: 1;
}

#mobile-services-search .city-field-group {
    order: 2;
}

#mobile-services-search .kebele-field-group {
    order: 3;
}

#mobile-services-search .search-btn {
    order: 4;
    margin-top: 10px;
}
}


/* Force the dropdown to be centered if it extends beyond the viewport */
@media (max-width: 320px) {
    .hero-search-mobile-part .custom-dropdown .dropdown-content {
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 280px !important;
    }
}






.mobile-menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
	 padding: 0 5px;
}

.menu-item-wrapper {
    position: relative;
    width: 33.33%;
    padding: 4px;
    text-align: center;
    box-sizing: border-box;
}

.menu-pad {
    cursor: pointer;
    background-color: white;
    border-radius: 8px;
    padding: 10px 5px 15px 5px; /* Increased bottom padding for title */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    height: 100px; /* Increased height to accommodate titles */
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}

.menu-pad:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.menu-icon {
    margin-bottom: 8px;
    margin-top: 5px; /* Added top margin to center icon better */
}

.menu-icon i {
    font-size: 30px;
    color: #4a90e2;
}

.menu-title {
    font-size: 13px; /* Reduced font size */
    font-weight: 600;
    color: #333;
    line-height: 1.2;
    width: 100%;
    padding: 0 2px;
    /* Remove text truncation properties */
    white-space: normal; /* Allow text to wrap */
    overflow: visible;
    text-overflow: clip;
    /* Add height to ensure consistent pad size */
    height: 24px; /* Fixed height for title area */
    display: flex;
    align-items: center;
    justify-content: center;
}

.menu-dropdown {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: linear-gradient(to right, #f8f9fa, #ffffff);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    z-index: 1000;
    overflow-y: auto;
    padding: 20px;
    transform: none;
    max-width: none;
    border-radius: 0;
}

.menu-dropdown.active {
    display: block;
    animation: fadeIn 0.3s ease;
}

.dropdown-item {
    display: block;
    padding: 15px 18px;
    color: #333;
    text-decoration: none;
    border-bottom: 1px solid #e9ecef;
    font-size: 18px;
    text-align: left;
    transition: all 0.3s ease;
    border-radius: 6px;
    margin-bottom: 5px;
}

.dropdown-item:last-child {
    border-bottom: 1px solid #e9ecef;
}

.dropdown-item:hover {
    background-color: #f8f9fa;
    border-color: #007bff;
}

/* Add a dropdown header */
.dropdown-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #e9ecef;
}

.dropdown-title {
    font-size: 20px;
    font-weight: 600;
    color: #212529;
}

.dropdown-close {
    background: none;
    border: none;
    font-size: 24px;
    color: #6c757d;
    cursor: pointer;
    padding: 0;
    margin: 0;
}



/* Add these elements dynamically with JavaScript */
@media (max-width: 1050px) {
    .dropdown-item {
        padding: 12px 15px;
    }
/* Style for the Post menu item */
.mobile-menu .post-menu-item .menu-pad {
    cursor: pointer !important;
    background-color: #007bff !important;
    border-radius: 8px !important;
    padding: 10px 5px 15px 5px !important; /* Matching your existing padding */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
    transition: all 0.3s ease !important;
    height: 100px !important; /* Matching your existing height */
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    box-sizing: border-box !important;
    margin-top: 0px !important;
}

.mobile-menu .post-menu-item .menu-pad:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15) !important;
    background-color: #0069d9 !important;
}
.mobile-menu .post-menu-item .menu-icon {
    margin-bottom: 12px !important; /* Increased bottom margin */
    margin-top: 0 !important; /* Reduced top margin to move icon up */
    position: relative !important;
    top: -5px !important; /* Move icon up by 5px */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    height: 24px !important; /* Set a fixed height for consistency */
}

/* New styles for the image icons */
.mobile-menu .post-menu-item .menu-icon img {
    width: 24px !important; /* Set width for the icon */
    height: 24px !important; /* Set height for the icon */
    object-fit: contain !important; /* Maintain aspect ratio */
    filter: brightness(0) invert(1) !important; /* Make icons white */
}

/* For active menu items, you might want a different appearance */
.mobile-menu .post-menu-item.active .menu-icon img {
    filter: brightness(0) invert(1) sepia(100%) saturate(1000%) hue-rotate(180deg) !important; /* Make icons blue when active */
}


.mobile-menu .post-menu-item .menu-icon i {
    color: white !important;
}

.mobile-menu .post-menu-item .menu-title {
    color: white !important;
}


}


/* Adjustments for very small screens */
@media (max-width: 360px) {
    .menu-pad {
        height: 90px; /* Still maintain good height */
        padding: 8px 4px 12px 4px;
    }
    
    .menu-icon i {
        font-size: 24px;
    }
    
    .menu-title {
        font-size: 9px; /* Even smaller font */
        height: 22px; /* Slightly smaller height */
    }
    
    .dropdown-item {
        padding: 12px 15px;
        font-size: 14px;
    }
/* Style for the Post menu item */
.mobile-menu .post-menu-item .menu-pad {
    cursor: pointer !important;
    background-color: #007bff !important;
    border-radius: 8px !important;
    padding: 10px 5px 15px 5px !important; /* Matching your existing padding */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
    transition: all 0.3s ease !important;
    height: 100px !important; /* Matching your existing height */
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    box-sizing: border-box !important;
    margin-top: 15px !important;
}

.mobile-menu .post-menu-item .menu-pad:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15) !important;
    background-color: #0069d9 !important;
}
.mobile-menu .post-menu-item .menu-icon {
    margin-bottom: 12px !important; /* Increased bottom margin */
    margin-top: 0 !important; /* Reduced top margin to move icon up */
    position: relative !important;
    top: -5px !important; /* Move icon up by 5px */
}
.mobile-menu .post-menu-item .menu-icon i {
    color: white !important;
}

.mobile-menu .post-menu-item .menu-title {
    color: white !important;
}


}

/* Add overlay for dropdowns */
.dropdown-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
    display: none;
}

.dropdown-overlay.active {
    display: block;
}

/* Hide mobile menu by default on larger screens */
.mobile-menu-container {
  display: none;
}

/* Only show mobile menu on screens smaller than 1050px (typical mobile breakpoint) */
@media screen and (max-width: 1050px) {
  .mobile-menu-container {
    display: block;
  }
}


/* Mobile Bottom Navigation */
.mobile-bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: white;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
    z-index: 9999;
    height: 60px;
    transition: transform 0.3s ease;
    width: 100%;
    justify-content: center; /* Center items */
    padding: 0; /* Remove padding */
    margin: 0; /* Remove margin */
}

.bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: left; /* Center align */
    justify-content: center;
    text-decoration: none;
    color: #333;
    padding: 8px 0;
    font-size: 12px;
    position: relative;
    gap: 0px !important;
    width: 30% !important; /* Fixed width */
    margin: 0 !important; /* Remove margins */
    max-width: 100px !important; /* Limit max width */
}

.bottom-nav-item i {
    font-size: 20px;
    margin-bottom: 4px;
    color: #007bff;
}

.bottom-nav-item span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    font-size: 10px; /* Smaller text */
}

/* Language selector styling */
#lang-selector {
    cursor: pointer;
}

/* Language popup */
.lang-popup {
    display: none;
    position: fixed;
    bottom: 70px;
    left: 50%;
    transform: translateX(-50%);
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.2);
    overflow: hidden;
    z-index: 10000;
    width: 200px;
    transition: all 0.3s ease;
}

.lang-option {
    display: flex;
    align-items: center;
    padding: 15px;
    text-decoration: none;
    color: #333;
    border-bottom: 1px solid #eee;
}

.lang-option:last-child {
    border-bottom: none;
}

.lang-code {
    font-weight: bold;
    margin-right: 15px;
    font-size: 16px;
}

.lang-name {
    font-size: 14px;
}

.lang-option.active-lang {
    background-color: #f0f0f0;
}

/* Popup backdrop */
.popup-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: 9998;
}

/* Show bottom nav only on mobile */
@media (max-width: 1050px) {
    .mobile-bottom-nav {
        display: flex;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 9999 !important;
    }
    
    /* Add padding to body to prevent content from being hidden behind the nav */
    body {
        padding-bottom: 60px !important;
        margin-bottom: 0 !important;
    }
    
    /* Ensure the page is at least as tall as the viewport */
    html, body {
        min-height: 100vh !important;
    }
    
    /* Hide the original language selector in header on mobile */
    header .language-selector-desktop {
        display: none !important;
    }
}

/* Ensure mobile bottom nav is hidden on desktop */
@media (min-width: 1050px) {
    .mobile-bottom-nav {
        display: none !important;
    }
    
    .lang-popup {
        display: none !important;
    }
    
    .popup-backdrop {
        display: none !important;
    }
}
/* Ultra-aggressive profile dropdown styling */
.mobile-profile-icon {
  position: absolute !important;
  right: 15px !important;
  top: 15px !important;
  z-index: 2147483646 !important;
  isolation: isolate !important; /* Create a new stacking context */
  display: none !important; /* Hidden by default (on desktop) */
}

.profile-dropdown {
  position: relative !important;
  display: inline-block !important;
}

.profile-icon-btn {
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  width: auto !important;
  height: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}


.user-initial-circle {
    width: 35px !important;
    height: 35px !important;
    min-width: 33px !important;
    min-height: 33px !important;
    max-width: 35px !important;
    max-height: 35px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 24px !important;
    font-weight: bold !important;
    border-radius: 50% !important;
    background-color: #0277bd !important;
    color: White !important;
    transform: scale(1.2) !important;
}

.profile-icon-btn i,
.profile-icon-btn .user-initial-circle {
    font-size: 20px !important;
}


/* Slightly larger icon */
.profile-icon-btn i {
  font-size: 35px !important; /* Slightly larger icon */
  color: black !important; /* Blue color - adjust to your theme   #007bff*/
}

/* Create a completely new element for the dropdown that's outside the normal flow */
#profileDropdownContainer {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  pointer-events: none !important; /* Allow clicks to pass through */
  z-index: 2147483647 !important; /* Maximum possible z-index value */
  display: none !important;
}

#profileDropdownContainer.active {
  display: block !important;
}

/* Style the actual dropdown content */
#profileDropdownContainer .profile-dropdown-content {
  position: absolute !important;
  right: 10px !important;
  top: 65px !important; /* Adjust based on your header height and icon size */
  background-color: #fff !important;
  min-width: 220px !important; /* Increased for longer emails */
  max-width: 300px !important;
  box-shadow: 0 8px 16px rgba(0,0,0,0.3) !important;
  border-radius: 4px !important;
  overflow: hidden !important;
  pointer-events: auto !important; /* Capture clicks on the dropdown */
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
  left: auto !important;
}

/* Style the overlay */
#profileDropdownOverlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background-color: rgba(0,0,0,0.5) !important;
  z-index: 2147483646 !important; /* Just below the dropdown container */
  display: none !important;
}

#profileDropdownOverlay.active {
  display: block !important;
}

/* Dropdown header styling */

.dropdown-header-User {
    padding: 15px 20px !important; /* Increased padding */
    background-color: #f8f9fa !important;
    border-bottom: 1px solid #eee !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    text-align: left !important;
    align-items: flex-start !important;
    min-height: 90px !important; /* Set minimum height */
}
.dropdown-header-login {
    padding: 15px 20px !important; /* Increased padding */
    background-color: #f8f9fa !important;
    border-bottom: 1px solid #eee !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    text-align: left !important;
    align-items: flex-start !important;
    min-height: 60px !important; /* Set minimum height */
}

.dropdown-header-user .user-name {
    font-weight: bold !important;
    font-size: 16px !important;
    color: #333 !important;
    margin-bottom: -5px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
	margin-left: 3px !important;
    padding-left: 3px !important;
}

.dropdown-header-user .user-email {
    font-size: 12px !important;
    color: #666 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    opacity: 0.8 !important;
	margin-bottom: 5px !important;
	margin-left: 6px !important;
    padding-left: 6px !important;
}



/* Hide the original dropdown */
.profile-dropdown-content {
  display: none !important;
}

/* Style links in the dropdown */
#profileDropdownContainer .profile-dropdown-content a {
  color: #333 !important;
  padding: 12px 16px !important;
  text-decoration: none !important;
  display: block !important;
  transition: background-color 0.2s !important;
  margin: 0 !important;
  border: none !important;
  background: none !important;
}

#profileDropdownContainer .profile-dropdown-content a i {
  margin-right: 8px !important;
  width: 16px !important;
  text-align: center !important;
}

#profileDropdownContainer .profile-dropdown-content a:hover {
  background-color: #f1f1f1 !important;
}

/* Auth buttons styling */
.auth-buttons {
  padding: 12px 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.auth-buttons a {
  padding: 10px 12px !important;
  text-align: center !important;
  border-radius: 4px !important;
}

.login-btn {
  background-color: #4285f4 !important;
  color: white !important;
}

.register-btn {
  background-color: #34a853 !important;
  color: white !important;
}

/* User initial circle styling */
.user-initial-circle {
  width: 28px !important;
  height: 28px !important;
  background-color: #3498db !important; /* Blue background */
  color: white !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: bold !important;
  font-size: 16px !important;
  text-transform: uppercase !important;
}

/* Hover effect for the initial circle */
.profile-icon-btn:hover .user-initial-circle {
  background-color: #2980b9 !important; /* Darker blue on hover */
}

/* Show the mobile profile icon ONLY on mobile devices */
@media screen and (max-width: 1050px) {
  .mobile-profile-icon {
    display: block !important; /* Show on mobile */
  }
  
  /* Ensure the menu container has proper positioning */
  .menu-container {
    position: relative !important;
  }
}

/* Force hide on desktop no matter what */
@media screen and (min-width: 1050px) {
  .mobile-profile-icon {
    display: none !important; /* Explicitly hide on desktop */
  }
}
.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 40px;
    padding: 40px 0;
}

.footer-section {
    background: rgba(255, 255, 255, 0.05);
    padding: 25px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.footer-section:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.footer-section h3 {
    color: #fff;
    font-size: 1.3rem;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 2px solid #4CAF50;
    padding-bottom: 10px;
}

.footer-section h3 i {
    color: #4CAF50;
    font-size: 1.2rem;
}

/* Quick Links Styling */
.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 12px;
    transition: all 0.3s ease;
}

.footer-links li:hover {
    transform: translateX(10px);
}

.footer-links a {
    color: #ccc;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.footer-links a:hover {
    color: #4CAF50;
    background: rgba(76, 175, 80, 0.1);
    padding-left: 10px;
}

.footer-links a i {
    width: 16px;
    text-align: center;
    color: #4CAF50;
}

/* Contact Info Styling */
.contact-info {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.contact-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    transition: all 0.3s ease;
}

.contact-item:hover {
    background: rgba(76, 175, 80, 0.1);
    transform: scale(1.02);
}

.contact-item i {
    color: #4CAF50;
    font-size: 1.2rem;
    margin-top: 2px;
    min-width: 20px;
}

.contact-details {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.contact-label {
    color: #aaa;
    font-size: 0.9rem;
    font-weight: 500;
}

.contact-details a,
.contact-details span {
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
}

.contact-details a:hover {
    color: #4CAF50;
}

/* Social Links Styling */
/* For even more spacing and larger icons */
.social-links {
    display: flex;
    gap: 60px; /* Even larger gap */
    margin-bottom: 25px;
    flex-wrap: wrap;
}

.social-link {
    width: 45px; /* Even larger */
    height: 45px; /* Even larger */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.social-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    transform: scale(0);
    transition: transform 0.3s ease;
}

.social-link:hover::before {
    transform: scale(1);
}

.social-link i {
    font-size: 1.6rem; /* Even larger font */
    z-index: 1;
    transition: color 0.3s ease;
}

.social-link.facebook {
    background: rgba(59, 89, 152, 0.2);
    border: 2px solid #3b5998;
    color: #3b5998;
}

.social-link.facebook::before {
    background: #3b5998;
}

.social-link.facebook:hover {
    color: white;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(59, 89, 152, 0.4);
}

.social-link.telegram {
    background: rgba(0, 136, 204, 0.2);
    border: 2px solid #0088cc;
    color: #0088cc;
}

.social-link.telegram::before {
    background: #0088cc;
}

.social-link.telegram:hover {
    color: white;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 136, 204, 0.4);
}

.social-link.instagram {
    background: rgba(225, 48, 108, 0.2);
    border: 2px solid #e1306c;
    color: #e1306c;
}

.social-link.instagram::before {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}

.social-link.instagram:hover {
    color: white;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(225, 48, 108, 0.4);
}

.social-link.whatsapp {
    background: rgba(37, 211, 102, 0.2);
    border: 2px solid #25d366;
    color: #25d366;
}

.social-link.whatsapp::before {
    background: #25d366;
}

.social-link.whatsapp:hover {
    color: white;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(37, 211, 102, 0.4);
}

/* App Download Styling */
.app-download h4 {
    color: #fff;
    margin-bottom: 15px;
    font-size: 1.1rem;
}

.app-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.app-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: #fff;
    text-decoration: none;
    transition: all 0.3s ease;
}

.app-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.app-btn i {
    font-size: 1.5rem;
    color: #4CAF50;
}

.app-btn span {
    font-weight: 600;
}

/* Responsive Design */
@media (max-width: 1050px) {
    .footer-content {
        grid-template-columns: 1fr;
        gap: 25px;
        padding: 20px 0;
    }
    
    .footer-section {
        padding: 20px;
    }
    
    .social-links {
        justify-content: center;
    }
    
    .app-buttons {
        align-items: center;
    }
    
    .app-btn {
        max-width: 200px;
    }
}

.social-links a {
    margin: 0 15px 0 0;
}

.social-links a:last-child {
    margin-right: 0;
}

@media (max-width: 1050px) {
    .social-links a {
        margin: 0 0px 0 0;
    }
}

/* Mobile styles for max-width 480px */
@media (max-width: 480px) {
    .social-links {
        gap: 30px; /* Reduced gap for mobile */
        margin-bottom: 20px;
        justify-content: center;
    }

    .social-link {
        width: 35px; /* Smaller size for mobile */
        height: 35px;
    }

    .social-link i {
        font-size: 1.2rem; /* Smaller font for mobile */
    }

    .social-link:hover {
        transform: translateY(-2px); /* Reduced hover effect */
    }

    .social-link.facebook:hover {
        transform: translateY(-2px);
        box-shadow: 0 3px 10px rgba(59, 89, 152, 0.4);
    }

    .social-link.telegram:hover {
        transform: translateY(-2px);
        box-shadow: 0 3px 10px rgba(0, 136, 204, 0.4);
    }

    .social-link.instagram:hover {
        transform: translateY(-2px);
        box-shadow: 0 3px 10px rgba(225, 48, 108, 0.4);
    }

    .social-link.whatsapp:hover {
        transform: translateY(-2px);
        box-shadow: 0 3px 10px rgba(37, 211, 102, 0.4);
    }
}

@media (max-width: 480px) {
    .contact-info {
        gap: 12px; /* Reduced gap for mobile */
    }

    .contact-item {
        gap: 12px; /* Reduced gap between icon and text */
        padding: 10px; /* Reduced padding */
        border-radius: 6px; /* Slightly smaller border radius */
    }

    .contact-item:hover {
        transform: scale(1.01); /* Reduced hover scale effect */
    }

    .contact-item i {
        font-size: 1.1rem; /* Slightly smaller icon */
        min-width: 18px; /* Reduced min-width */
    }

    .contact-details {
        flex-direction: row; /* Change to row for inline display */
        gap: 8px; /* Gap between label and value */
        align-items: center; /* Center align items */
        flex-wrap: wrap; /* Allow wrapping if needed */
    }

    .contact-label {
        font-size: 0.85rem; /* Smaller label font */
        margin: 0; /* Remove any default margin */
    }

    .contact-label::after {
        content: ':'; /* Add colon after label */
    }

    .contact-details a,
    .contact-details span {
        font-size: 0.95rem; /* Slightly smaller content font */
        font-weight: 500; /* Reduced font weight for better mobile readability */
        margin: 0; /* Remove any default margin */
    }
}


/* Add these styles to your existing CSS */
.featured-properties-grid {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch; /* For smooth scrolling on iOS */
    scroll-snap-type: x mandatory;
    gap: 20px;
    padding-bottom: 10px; /* Space for scrollbar */
}

.featured-properties-grid::-webkit-scrollbar {
    display: none; /* Hide scrollbar */
}