.cards {

            display: flex;
            box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
            line-height: 1.42857143;
            background-color: #fff;
            border-radius: 2px;
            flex-direction: column;
            justify-content: flex-end;
            box-sizing: border-box;
            background: #ffffff;
            color: #fff;
            grid-column-start: auto;
            grid-row-start: auto;
            color: #fff;
            transition: box-shadow .3s;
            opacity: 0.8;
            transition: 0.4s;

        }

        .cards:hover {
            z-index: 2;
            width: 100%;
            opacity: 1;
            transition: opacity 0.3s;
            box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
            transform: scale(1.05);
            transition: 0.3s;
        }


        .img-card {
            width: 100%;
            height: 200px;
            border-top-left-radius: 2px;
            border-top-right-radius: 2px;
            display: block;
            object-fit: contain;
            overflow: hidden;

        }

        .img-card img {
            width: 100%;
            height: auto;
            transition: all .25s ease;
            object-fit: contain;
            transform: scale(1.2);
            transition: 0.5s;
        }

        .img-card img:hover {
            transform: scale(1.3);
            transition: 0.5s;
        }

        .card-content {
            padding: 15px;
        }

        .card-title {
            margin-top: 0px;
            font-weight: 700;
            font-size: 1.25em;
        }

        .card-title a {
            color: #000;
            text-decoration: none !important;
        }

        .breadcrumb {
            background: none;
            color: #000;

        }

        .breadcrumb ul {
            display: flex;
            list-style-type: none;
            color: #000;
        }

        .breadcrumb li::before {
            content: " > ";
        }

        .breadcrumb li:first-child::before {
            content: "";
        }
/* pagination container */
.pagination {
    gap: 6px;
}

/* normal buttons */
.page-item .page-link {
    color: #555;              /* نص رمادي */
    background-color: #f2f2f2;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 6px 12px;
    transition: all 0.2s ease-in-out;
}

/* hover */
.page-item .page-link:hover {
    background-color: #e0e0e0;
    color: #222;
}

/* active page */
.page-item.active .page-link {
    background-color: #6c757d; /* رمادي Bootstrap */
    border-color: #6c757d;
    color: #fff;
}

/* disabled (Previous / Next) */
.page-item.disabled .page-link {
    background-color: #f8f9fa;
    color: #aaa;
    border-color: #ddd;
}