/* =========================
       ACTIVITY SLIDER
    ========================= */

    .activity-slider {
        width: 100%;
        overflow: hidden;
        padding: 10px 5px 25px;
    }

    .activity-slide-track {
        display: flex;
        gap: 22px;

        overflow-x: auto;
        scroll-behavior: smooth;

        padding: 5px;

        scrollbar-width: none;
    }

    .activity-slide-track::-webkit-scrollbar {
        display: none;
    }


    /* =========================
       ACTIVITY CARD
    ========================= */

    .activity-slide {
        flex: 0 0 300px;

        background: #fff;

        border-radius: 14px;

        overflow: hidden;

        border: 1px solid #e8e8e8;

        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.07);

        transition: all 0.3s ease;
    }

    .activity-slide:hover {
        transform: translateY(-7px);

        box-shadow:
            0 12px 30px rgba(0, 0, 0, 0.13);
    }


    /* =========================
       IMAGE
    ========================= */

    .activity-image {
        position: relative;

        height: 210px;

        overflow: hidden;
    }

    .activity-image img {
        width: 100%;
        height: 100%;

        object-fit: cover;

        display: block;

        transition: transform 0.5s ease;
    }

    .activity-slide:hover .activity-image img {
        transform: scale(1.06);
    }


    /* Activity Type */

    .activity-type {
        position: absolute;

        top: 12px;
        left: 12px;

        padding: 6px 11px;

        background: rgba(0, 0, 0, 0.65);

        color: #fff;

        border-radius: 20px;

        font-size: 11px;
        font-weight: 600;

        text-transform: capitalize;
    }


    /* =========================
       CONTENT
    ========================= */

    .activity-content {
        padding: 20px;
    }

    .activity-content h3 {
        font-size: 18px;
        line-height: 1.4;

        font-weight: 700;

        color: #222;

        margin: 0 0 15px;

        min-height: 50px;
    }


    /* =========================
       META
    ========================= */

    .activity-meta {
        display: flex;

        align-items: center;
        justify-content: space-between;

        gap: 10px;

        margin-bottom: 18px;

        padding-bottom: 15px;

        border-bottom: 1px solid #eee;

        font-size: 13px;

        color: #777;
    }

    .activity-meta span:first-child {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .activity-meta i {
        color: #007bff;
    }


    /* =========================
       PRICE
    ========================= */

    .activity-price {
        color: #198754;

        font-size: 18px;

        font-weight: 700;

        white-space: nowrap;
    }

    .activity-price small {
        color: #777;

        font-size: 11px;

        font-weight: 400;
    }


    /* =========================
       BOOK BUTTON
    ========================= */

    .activity-book-btn {
        display: flex;

        align-items: center;
        justify-content: center;

        gap: 8px;

        width: 100%;

        padding: 11px 15px;

        background: #007bff;

        color: #fff;

        border-radius: 6px;

        font-size: 13px;

        font-weight: 600;

        text-transform: uppercase;

        transition: all 0.3s ease;
    }

    .activity-book-btn:hover {
        background: #0056b3;

        color: #fff;

        text-decoration: none;
    }


    /* =========================
       EMPTY STATE
    ========================= */

    .no-activities {
        width: 100%;

        text-align: center;

        padding: 50px;

        color: #777;
    }

    .no-activities i {
        font-size: 35px;

        color: #007bff;

        margin-bottom: 10px;
    }


    /* =========================
       TABLET
    ========================= */

    @media (max-width: 991px) {

        .activity-slide {
            flex: 0 0 280px;
        }

    }


    /* =========================
       MOBILE
    ========================= */

    @media (max-width: 575px) {

        .activity-slider {
            padding-left: 0;
            padding-right: 0;
        }

        .activity-slide {
            flex: 0 0 275px;
        }

        .activity-image {
            height: 190px;
        }

        .activity-content {
            padding: 17px;
        }

        .activity-content h3 {
            font-size: 16px;
        }

    }