/*Sample html*/

/*<div class="skeleton-container" >
<div class="skeleton skeleton-text" > </div >
<div class="skeleton skeleton-image" > </div >
<div class="skeleton skeleton-card" >
<div class="skeleton skeleton-image" > </div >
<div class="skeleton skeleton-text" > </div >
<div class="skeleton skeleton-text" > </div >
</div >
</div >*/
/* Skeleton container */
.skeleton-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 300px;
    padding: 20px;
}

/* Common skeleton style */
.skeleton {
    background-color: #e0e0e0;
    border-radius: 4px;
    animation: pulse 1.5s infinite ease-in-out, fade 1.5s infinite ease-in-out;
}

/* Pulse animation with more visible transition */
@keyframes pulse {
    0% {
        background-color: #e0e0e0;
    }

    50% {
        background-color: #f5f5f5;
    }

    100% {
        background-color: #e0e0e0;
    }
}

/* Optional fade effect to complement pulse */
@keyframes fade {
    0% {
        opacity: 0.8;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0.8;
    }
}

/* Text skeleton */
.skeleton-text {
    width: 100%;
    height: 20px;
    margin-bottom: 10px;
    border-radius: 4px;
}

/* Image skeleton */
.skeleton-image {
    width: 100%;
    height: 200px;
    margin-bottom: 10px;
    border-radius: 8px;
}

/* Card skeleton */
.skeleton-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

    .skeleton-card .skeleton-text {
        width: 70%;
    }

    .skeleton-card .skeleton-image {
        height: 150px;
        border-radius: 8px;
    }

/* Adding a scale effect for more visibility */
.skeleton-container .skeleton {
    animation: pulse 1.5s infinite ease-in-out, scale 1.5s infinite ease-in-out, fade 1.5s infinite ease-in-out;
}

@keyframes scale {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }
}