body {
    font-family: "Outfit", sans-serif;
}

/* ================= COMMON SHARED STYLES ================= */

.text-gray-200 {
    color: rgb(193, 187, 187);
}

.drag-container {
    cursor: grab;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE & Edge */
}

.drag-container::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

.drag-container.active {
    cursor: grabbing;
}

.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

/* .hidden {
    display: none;
} */

.block {
    display: block;
}

.modal {
    transition: opacity 0.3s ease-in-out;
}

.modal-container {
    max-height: 100vh;
    width: 90%;
    max-width: 100vw;
}

.activity-card {
    background: white;
    border-radius: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.fade-text,
.fade-image {
    transition: opacity 0.8s ease-in-out;
}

/* ================= CUSTOM SCROLLBAR ================= */

.custom-scrollbar {
    overflow-x: auto;
    scrollbar-color: #d1d5db #f3f4f6;
    scrollbar-width: thin;
}

.custom-scrollbar::-webkit-scrollbar {
    height: 10px;
    background: #f3f4f6;
    border-radius: 8px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 8px;
}

/* ================= RENTAL BUTTONS ================= */

.rental-button {
    background-color: transparent;
    color: white;
    transition: background-color 0.3s;
}

.rental-button:hover {
    background-color: #6b7280;
}

.rental-button.active {
    background-color: #dc2626;
}

.rental-button.active:hover {
    background-color: #b91c1c;
}

/* ================= REAL ESTATE ================= */

button[data-purpose].ring-2 {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.6);
}

/* ================= MOBILE RESPONSIVE ================= */

@media (max-width: 768px) {

    div#mobileMenu {
        z-index: 9999 !important;
        margin-top: 0;
    }
    
    div#mobileMenu #ul {
        background: white !important;
    }

    .mobile-banner-layout {
        display: block !important;
        padding-top: 50%;
    }

    .mobile-banner-form {
        display: block !important;
        text-align: left !important;
        border-radius: 0 !important;
        padding: 0 10px !important;
        margin-top: 20px !important;
    }

    .mobile-banner-form div {
        margin: 10px 0 !important;
        display: block !important;
    }

    .mobile-banner-form div svg {
        float: right !important;
    }

    .mobile-banner-form button {
        margin: 10px 0 !important;
        width: 100%;
        height: 40px !important;
    }

    .mobile-review {
        display: block !important;
    }

    .mobile-review div {
        margin-bottom: 10px !important;
    }

    li {
        list-style-type: none;
    }

    .mobile-h-auto {
        height: auto !important;
    }

    .mobile-display-block {
        display: block !important;
    }

    .mobile-display-block img {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        left: 0 !important;
        margin-bottom: 50px !important;
    }

    .mobile-hide {
        display: none !important;
    }

    /* REAL ESTATE */
    div#realstate-tabs {
        display: inline-grid !important;
    }

    div#realstate-tabs button {
        width: 340px !important;
    }

    #services .grid-cols-2 {
        display: block !important;
        margin-left: -10% !important;
    }

    #services .grid-cols-2 .items-center {
        margin-bottom: 20px !important;
    }

    div#purposeFilters {
        display: inline-grid !important;
        width: 100% !important;
    }

    div#purposeFilters button {
        margin-left: 0 !important;
        margin-bottom: 10px !important;
    }

    /* COMMERCIAL */
    div#commercial-tabs {
        display: block !important;
    }

    div#commercial-tabs button {
        width: 100% !important;
        margin-bottom: 10px !important;
    }
    .custom-mobile-heading{font-size:32px !important;}
    .mobile-width{width:100% !important; text-align:center !important;}
    .mobile-center{text-align:center !important;justify-content:center !important;}
    .custom-auction-button{margin-top:-55px !important;}
}

.mob-fix{
    position:sticky !important;
    top:0px !important;
    z-index:999999 !important;
    overflow:visible;
}

.auction-detail .mob-fix{
    position:fixed !important;
    top:0px !important;
    z-index:999999 !important;
    overflow:visible;
    width:99%;
}

.commercial-detail .mob-fix{
    position:fixed !important;
    top:0px !important;
    z-index:999999 !important;
    overflow:visible;
    width:99%;
}

.rental-detail .mob-fix{
    position:fixed !important;
    top:0px !important;
    z-index:999999 !important;
    overflow:visible;
    width:99%;
}
.realestate-detail .mob-fix{
    position:fixed !important;
    top:0px !important;
    z-index:999999 !important;
    overflow:visible;
    width:99%;
}

.gallery-images {
    margin-top:10px !important;
}

.gallery-images a {
    padding:5px !important;
}

.gallery-images img {
    padding:5px !important;
}