/* Custom CSS for the floating icons */
        .floating-icons {
            position: fixed;
            top: 50%;
            left: 0;
            transform: translateY(-50%);
            z-index: 1000;
            display: flex;
            flex-direction: column;
            gap: 10px;
            padding: 10px;
            background-color: transparent;
            border-radius: 0 10px 10px 0;
            box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
        }
        .floating-icons a {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 45px;
            height: 45px;
            border-radius: 50%;
            color: #fff;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
            transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
        }
        .floating-icons a:hover {
            transform: scale(1.1);
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
        }
        .floating-icons .whatsapp { background-color: #25D366; }
        .floating-icons .call { background-color: #007bff; }
        .floating-icons .facebook { background-color: #3b5998; }
        .floating-icons .tiktok { background-color: #000; }

        /* Custom scrollbar and other styles from your original code */
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out;
            scrollbar-width: thin;
            scrollbar-color: #FFC107 #f1f1f1;
            
        }
        .rtl { direction: rtl; }
        .ltr { direction: ltr; }
        .text-primary-yellow { color: #FFC107; }
        .bg-primary-yellow { background-color: #FFC107; }
        .border-primary-yellow { border-color: #FFC107; }
        .hover\:bg-secondary-yellow:hover { background-color: #FFD54F; }
        /* Custom scrollbar for better aesthetics */
        ::-webkit-scrollbar { width: 10px; }
        ::-webkit-scrollbar-track { background: #f1f1f1; }
        ::-webkit-scrollbar-thumb { background: #FFC107; border-radius: 10px; }
        /* Stronger hover effect for property cards */
        .hover\:scale-105:hover { transform: scale(1.05); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); }
    

        /* Custom CSS to handle the menu toggle */
        /*
          The hidden class is used to hide the menu on mobile by default.
          The `h-0` and `overflow-hidden` classes collapse it.
          When the `open` class is added via JavaScript, it gets a `h-auto` class
          that overrides the `h-0` and makes the menu visible.
        */
        

        /* Custom CSS for menu animation */
        .mobile-menu-container {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease-out;
        }

        .mobile-menu-container.open {
            max-height: 500px; /* A value large enough to fit all content */
            transition: max-height 0.3s ease-in;
        }
        /* Responsive Map */
.map-responsive {
    overflow: hidden;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    position: relative;
    height: 0;
}

.map-responsive iframe {
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    position: absolute;
}

html.rtl {
    direction: rtl;
}

html.ltr {
    direction: ltr;
}

/* Ensure mobile menu styles align with your HTML */
.mobile-menu-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 50;
    transition: all 0.3s ease;
}

.mobile-menu-container.hidden {
    display: none;
}

.mobile-menu-container.open {
    display: block;
}

/* Ensure Tailwind classes like primary-yellow and secondary-yellow are defined */
:root {
    --primary-yellow: #FFC107; /* Example color, adjust as needed */
    --secondary-yellow: #FFA000; /* Example color, adjust as needed */
}

.bg-primary-yellow {
    background-color: var(--primary-yellow);
}

.bg-secondary-yellow {
    background-color: var(--secondary-yellow);
}

/* Fix for RTL-specific margins and paddings */
.rtl .mr-1 {
    margin-right: 0;
    margin-left: 0.25rem;
}

.rtl .ml-1 {
    margin-left: 0;
    margin-right: 0.25rem;
}

.rtl .mr-2 {
    margin-right: 0;
    margin-left: 0.5rem;
}

.rtl .ml-2 {
    margin-left: 0;
    margin-right: 0.5rem;
}