.slider-section {

margin-top: 25px;
width: 60%;
margin-left: auto;
margin-right: auto;

}

.distance-value {

margin-bottom: 10px;
font-weight: 500;

}

.distance-slider {

width: 100%;
height: 6px;
border-radius: 5px;
background: #ddd;
outline: none;

}

.distance-slider::-webkit-slider-thumb {

appearance: none;
width: 20px;
height: 20px;
background: orange;
border-radius: 50%;
cursor: pointer;

}

.distance-slider::-moz-range-thumb {

width: 20px;
height: 20px;
background: orange;
border-radius: 50%;
cursor: pointer;

}
/* default state already Bootstrap outline-warning */

/* active state */
.role-btn.active {
    background-color: orange !important;
    color: #000 !important;
    border-color: orange !important;
}

/* smooth feel (optional but good) */
.role-btn {
    transition: all 0.3s ease;
}
.hero-action-buttons .btn.active {
    background-color: orange !important;
    border-color: orange !important;
    color: #000 !important;
}