.loading, .notfound {
    background-color: #fff;
    background-size: 25px 25px;
    background-position: right center;
    background-repeat: no-repeat
}

.loading {
    background-image: url('../../Content/IMG/lodinGif.gif')
}

.notfound {
    background-image: url('../../Content/IMG/noutfoundGIF.gif')
}

.page-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center
}

.loader {
    border: 4px solid #f3f3f3;
    border-top: 4px solid tomato;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: 1s linear infinite spin
}

100% {
    transform: rotate(360deg)
}

.placeholder {
    background: #eee;
    border-radius: 1rem;
    position: relative;
    overflow: hidden
}

    .placeholder:after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        width: 100%;
        background: linear-gradient(90deg,#eee,#f4f4f4,#eee);
        animation: 1s ease-in-out infinite gradient
    }

.image-placeholder {
    aspect-ratio: 16/12;
    margin-bottom: 1rem
}

.title-placeholder {
    aspect-ratio: 16/1.5;
    margin-bottom: 2rem
}

.text-placeholder {
    aspect-ratio: 16/1;
    margin-top: 1rem;
    margin-bottom: 0
}

to {
    left: 100%
}



/*pagination style*/

.pagination {
    display: flex;
    flex: 1;
    list-style: none;
    padding: 0;
    gap: .625rem;
    justify-content: center;
}