/*!
Theme Name: Tax Alliance PH
Theme URI: http://www.elegantthemes.com/gallery/divi/
Version: 1.0.0
Description: Theme base from Divi!
Template: Divi
*/

.firm-finder {
    display: flex;
    justify-content: space-between;
    /* margin: 20px 0; */
    flex-wrap: wrap;
    gap: 0px;
}

.firm-finder .firm-list {
    width: 30%;
    max-height: 500px;
    /* overflow-y: auto; */
    border: 1px solid #ddd;
    padding: 10px;
    background: #919093;
    color: #FFFFFF;
    overflow: auto; scrollbar-width: none; /* For Firefox */ -ms-overflow-style: none;
}
 
.firm-finder .firm-list {
    scrollbar-width: auto;
    scrollbar-color: #219EBC;
}
    
/* Chrome, Edge, and Safari */
.firm-finder .firm-list::-webkit-scrollbar {
    width: 16px;
    display: none;
}
    
.firm-finder .firm-list::-webkit-scrollbar-track {
    background: #919093;
}
    
.firm-finder .firm-list::-webkit-scrollbar-thumb {
    background-color: #219EBC;
    border-radius: 0px;
    border: 3px solid #219EBC;
}
.firm-finder .firm-list .data-title{
    font-size: 18px;
    font-weight: bold;
}

.firm-finder .firm-list .data-contact{
    padding-top: 10px;
} 
.firm-finder .firm-list .data-contact p{
    padding: 0px;
}
.firm-finder .firm-list input
{
    padding: 10px;
    width: 100%;
}

.firm-finder .firm-map {
    flex: 1;
    border: 1px solid #ddd;
    height: 500px;
    background: #e9e9e9;
    min-width: 300px;
}

.firm-finder .firm-list div.firm-detail {
    padding: 8px;
    cursor: pointer; 
    transition: background 0.3s ease;
}

.firm-finder .firm-list div.firm-detail:hover {
    background: #6a696c;
}

.firm-finder .separator
{
    border-bottom-width: 2px;
    border-bottom-style: solid;
    border-bottom-color: #b4dde1;
    padding-top: 10px;
    width: 100%;
}

#portal_map_id {
    flex: 2; /* Map takes more space on large screens */
    height: 500px; /* Ensures the map fills the viewport height */
}

@media (max-width: 768px) {
    #firm-locator {
        flex-direction: column; /* Stack the map and list vertically */
    }
        
    .firm-finder .firm-list {
        width: 100%;
    }

    #firm-list {
        flex: none;
        height: auto;
        max-height: 40vh; /* Adjust list height on mobile */
    }

    #portal_map_id { 
        width: 100%;
        flex: none;
        height: 60vh; /* Adjust map height on mobile */
    }
}