.trending-section{
    margin-bottom:20px;
}
.image-wrapper {
    width: 100%;
    height: 200px;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

    .image-wrapper img {
        width: 100%;
        height: 100%;
        display: block;
    }
.trek-title {
    display: -webkit-box;
    -webkit-line-clamp: 1; /* number of lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.trek-nav {
    display: flex;
    justify-content: center;
    gap: 20px;
}

    .trek-nav button {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        border: none;
        background: #fff;
        color: #222;
        font-size: 26px;
        cursor: pointer;
        box-shadow: 0 8px 20px rgba(0,0,0,.12);
        transition: all .3s ease;
    }

        .trek-nav button:hover {
            background: #111;
            color: #fff;
            transform: translateY(-2px);
        }

        .trek-nav button:disabled {
            opacity: .4;
            cursor: not-allowed;
            transform: none;
        }
.route-card {
    transition: transform .3s ease, box-shadow .3s ease;
}

    .route-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 15px 30px rgba(0,0,0,0.2);
    }

/* Easy */
.route-easy {
    background: linear-gradient(135deg, #6fb1fc, #4364f7);
}

/* Moderate */
.route-moderate {
    background: linear-gradient(135deg, #3b82f6, #1e40af);
}

/* Hard */
.route-hard {
    background: linear-gradient(135deg, #1e3a8a, #0b1f5e);
}

    .route-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 16px 30px rgba(0,0,0,.25);
    }
.btn-success {
    background: #003b95;
    border-color: #003b95;
}
/* Optional: Customize Awesomplete to match Bootstrap */
.awesomplete {
    display: block;
    width: 100%;
}

    .awesomplete ul {
        border-radius: 0.25rem;
        box-shadow: 0 0.25rem 0.5rem rgba(0,0,0,0.15);
        max-height: 150px;
        overflow-y: auto;
    }

    .awesomplete li {
        padding: 0.5rem 0.75rem;
        cursor: pointer;
    }

        .awesomplete li:hover,
        .awesomplete li[aria-selected="true"] {
            background-color: #e9ecef;
        }
.trek-img-box {
    height: 220px; /* same height for all cards */
    overflow: hidden;
    background: #f2f2f2; /* fallback */
}

.trek-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* no stretch, no blur */
    object-position: center;
}
.fav-icon {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #505050;
    border-radius: 50%;
    padding: 6px 8px;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,.2);
}

.route-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 6px 10px;
    font-size: 12px;
    border-radius: 4px;
}
/* Slider track */
.sliderCustom.noUi-target {
    height: 6px;
    background: #e9ecef;
    border-radius: 10px;
    border: none;
}

/* Active range */
.sliderCustom .noUi-connect {
    background: #2f4f2f;
}

/* Handle */
.sliderCustom .noUi-handle {
    width: 18px;
    height: 18px;
    background: #2f4f2f;
    border-radius: 50%;
    border: none;
    box-shadow: 0 2px 6px rgba(0,0,0,.3);
}

/* Inner roller */
.sliderCustom .noUi-touch-area {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

/* Remove default bars */
.sliderCustom .noUi-handle:before,
.sliderCustom .noUi-handle:after {
    display: none;
}
.fa-tree-faourite {
    font-size: 25px;
    color: green;
}
.icon-filled {
    color: green !important;
}
.icon-outline {
    color: white;
}