/* hide radio button */

.rate > input{
    display: none;
}
.rate{
    display:inline-block;
    border: 0;
}
.rate > label{
    float: right;
}
/* showing stars */
.rate > label:before{
    display: inline-block;
    font-size: 1.1rem;
    font-family: FontAwesome;
    content: "\f005";
    margin: 0;
    padding: 0.3rem 0.2rem;
    cursor: pointer;
}
/* half star */
.rate .half:before{
    content: "\f089";
    position: absolute;
    padding-right: 0;
}
input:checked ~ label, label:hover ~ label{
    color: #ffb503;
}

input:checked + label:hover, input:checked ~ label:hover, input:checked ~ label:hover ~ label,
label:hover ~ input:checked ~ label{
    color: #cc9000;
}
.rating-star i{
 color: #ffb503;
}

ul.thumb{
    margin: 0 auto;
    padding: 0;
    float: left;
}
ul.thumb li{
    list-style: none;
    margin: 10px;
}

ul.thumb li img{
    width: 80px;
    height: 80px;
    border: 1px solid gray;
}
/* Category filter styling */
.list-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.list-menu li {
    margin: 0;
    padding: 0;
}

.list-menu li a {
    display: block;
    padding: 10px 15px;
    color: #6c757d;
    text-decoration: none;
    border-radius: 4px;
    margin-bottom: 2px;
    transition: all 0.3s ease;
}

.list-menu li a:hover {
    background-color: #f8f9fa;
    color: rgb(49, 103, 235);
    text-decoration: none;
}

.list-menu li a.active {
    background-color:rgb(49, 103, 235);
    color: white;
    font-weight: 500;
}

.list-menu li a.active:hover {
    background-color: rgb(49, 103, 235);
    color: white;
}
.price-range-slider {
        position: relative;
        width: 100%;
        height: 40px;
        margin: 20px 0;
    }

.price-range-slider input[type="range"] {
    position: absolute;
    width: 100%;
    height: 6px;
    background: none;
    pointer-events: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.price-range-slider input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: rgb(49, 103, 235);
    border-radius: 50%;
    cursor: pointer;
    pointer-events: all;
    position: relative;
    z-index: 2;
}

.price-range-slider input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: rgb(49, 103, 235);
    border-radius: 50%;
    cursor: pointer;
    pointer-events: all;
    border: none;
    position: relative;
    z-index: 2;
}

.price-range-slider .slider-track {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 6px;
    background: #dee2e6;
    border-radius: 3px;
    width: 100%;
}

.price-range-slider .slider-range {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 6px;
    background: rgb(49, 103, 235);
    border-radius: 3px;
}

.price-values {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    font-size: 0.9em;
    color: #6c757d;
}

.current-range {
    font-weight: 600;
    color: #0f0f0f;
}

.banner-img {
    width: 100%;
    height: 350px; 
    object-fit: cover;
    border-radius: 0.5rem;
}

.banner-div-radius {
    border-radius: 0.5rem;
    overflow: hidden;
}

.section-title {
    font-size: 2.2rem;
    font-weight: 600;
    color: #1c623f;
    margin-bottom: 0;
    position: relative;
    display: inline-block;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}


.section-title::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 0;
    width: 80%;
    height: 2px;
    background: linear-gradient(90deg, #34704d, #1c5f3b, #155c39);
    border-radius: 2px;
}