.collision-care-locator{
 display:flex;
 gap:30px;
}

.ccl-left{
 width:40%;
}

.ccl-locations {
    height: 480px;
    overflow-x: auto;
}

.ccl-right{
 width:60%;
}

.ccl-search{
 width:100%;
 padding:12px;
 margin-bottom:20px;
}

.ccl-item{
 border-bottom:1px solid #ff6d22;
 padding:20px;
 background-color:#F7F7F7;
}
.ccl-item.active, .ccl-item:hover{
background:#ff6d222e;

}
.ccl-buttons {
    display: flex;
    gap: 10px;
    flex-wrap:wrap;
}
.ccl-btn{
 display:inline-block;
 padding:8px 14px;
 background:#000;
 color:#fff;
 text-decoration:none;
}


#collision-care-map{
 height:620px;
 width:100%;
}

.ccl-item h3{
margin-bottom:5px;
}

.ccl-address{
margin-bottom:5px;
}

.ccl-phone{
font-weight:600;
margin-bottom:5px;
}

.ccl-hours{
font-size:14px;
color:#666;
margin-bottom:8px;
}

.ccl-services{
margin-bottom:12px;
}

.ccl-service{
display:inline-block;
background:#f3f3f3;
padding:4px 10px;
margin-right:5px;
font-size:12px;
border-radius:3px;
}
.ccl-filters{
    display: flex;
    gap: 5px;
    flex-wrap: wrap;    
    margin-bottom:15px;
}

.ccl-filter{
padding:8px 16px;
border:1px solid #ddd;
background:#fff;
cursor:pointer;
}
.elementor-kit-6 button.ccl-filter {
    padding: 12px 15px 12px 15px;
    background: #000;
    border:none;
}
.ccl-phone a {
    color: #ff6d22;
}
.elementor-kit-6 .ccl-filter.active{
background:#ff6d22;
color:#fff;
}

.ccl-map-popup {
    max-width: 300px;
    position: relative;
    padding: 5px 15px 13px;
}

.ccl-popup-close{
position:absolute;
right:5px;
top:5px;
background:none;
border:none;
font-size:18px;
cursor:pointer;
color:#333;
}

.ccl-map-popup h4 {
    margin: 0 0 5px;
    font-size: 15px;
    color: #1b1b1b;
    font-family: "Sarabun", sans-serif;
}

.ccl-map-popup p {
    margin: 0 0 5px;
    font-size: 15px;
    color: #5b5b5b;
    font-family: "Sarabun", sans-serif;
}

.ccl-direction-btn {
    display: inline-block;
    margin-top: 8px;
    background: #ff6d22;
    color: #fff !important;
    padding: 7px 22px;
    font-size: 16px;
    text-decoration: none;
    outline:none !important;
    font-family: "Sarabun", sans-serif;
}


@media (max-width:767px) {
.collision-care-locator {
    flex-wrap: wrap;
}
 .ccl-left {
    width: 100%;
}   
 .ccl-right {
    width: 100%;
}
#collision-care-map {
    height: 350px;
}
}