/* ==========================================
   SHIMMER BASE
========================================== */

.package-tour-shimmer .shimmer {
    position: relative;
    overflow: hidden;
    background: #eeeeee;
    border-radius: 6px;
}

    .package-tour-shimmer .shimmer::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient( 90deg, transparent 0%, rgba(255, 255, 255, 0.7) 50%, transparent 100% );
        transform: translateX(-100%);
        animation: shimmer-animation 1.5s infinite;
    }

@keyframes shimmer-animation {

    100% {
        transform: translateX(100%);
    }
}


/* ==========================================
   LEFT SIDEBAR
========================================== */

.shimmer-sidebar-title {
    width: 180px;
    height: 28px;
    margin-bottom: 25px;
}

.shimmer-continent {
    width: 150px;
    height: 22px;
    margin-bottom: 25px;
}

    .shimmer-continent.active {
        width: 100px;
    }


/* ==========================================
   MAIN HEADING
========================================== */

.shimmer-main-heading {
    width: 70%;
    height: 45px;
    margin-bottom: 45px;
}


/* ==========================================
   DESTINATION BUTTONS
========================================== */

.shimmer-destination-list {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 28px;
}

.shimmer-destination {
    width: 225px;
    height: 41px;
    border-radius: 8px !important;
}

.shimmer-destination-small {
    width: 78px;
}


/* ==========================================
   SUB HEADING
========================================== */

.shimmer-sub-heading {
    width: 75%;
    height: 22px;
    margin-bottom: 27px;
}


/* ==========================================
   PACKAGE CARD
========================================== */

.shimmer-package-card {
    position: relative;
    width: 100%;
    height: 360px;
    overflow: hidden;
    border-radius: 15px;
    background: #eeeeee;
}


/* Card image */

.shimmer-package-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 15px !important;
    background: linear-gradient( to bottom, #f3f3f3 0%, #dddddd 45%, #a5a5a5 100% ) !important;
}


/* Card bottom */

.shimmer-card-content {
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 25px;
    z-index: 2;
}


/* Package title */

.shimmer-package-title {
    width: 110px;
    height: 22px;
    margin-bottom: 8px;
    background: rgba(255, 255, 255, 0.55) !important;
}


/* Listing */

.shimmer-package-listing {
    width: 65px;
    height: 11px;
    background: rgba(255, 255, 255, 0.4) !important;
}


/* View All button */

.shimmer-view-button {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 112px;
    height: 42px;
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.25) !important;
}


/* ==========================================
   SECOND SECTION
========================================== */

.shimmer-second-heading {
    width: 80%;
    height: 42px;
    margin-top: 5px;
    margin-bottom: 48px;
}


.shimmer-second-destination {
    width: 125px;
    height: 41px;
    margin-bottom: 30px;
    border-radius: 8px !important;
}


.shimmer-second-sub-heading {
    width: 70%;
    height: 22px;
}


/* ==========================================
   RESPONSIVE
========================================== */

@media (max-width: 767px) {

    .shimmer-main-heading {
        width: 90%;
        height: 38px;
    }

    .shimmer-sub-heading {
        width: 90%;
    }

    .shimmer-package-card {
        height: 300px;
    }

    .shimmer-second-heading {
        width: 90%;
        height: 35px;
    }

    .shimmer-destination {
        width: 180px;
    }
}


@media (max-width: 575px) {

    .shimmer-package-card {
        height: 280px;
    }

    .shimmer-main-heading {
        width: 100%;
    }

    .shimmer-destination-list {
        flex-wrap: wrap;
    }
}