.mineCard {
            border-radius: 10px;
            transition-duration: .3s;
            background-color: #F2F2F2;
        }

        .mineCard:hover {
            opacity: 1;
            transition-duration: .5s;
            border-radius: 10px;
        }

        .image-container {
            width: 100%;
            max-height: 350px;
            min-height: 330px;
            overflow: hidden;
        }

        div .post-body p {
            font-size: 20px !important;
        }

        .card-body h2 p {
            padding-top: 5px;
            padding-bottom: 5px;
            font-size: 30px !important;
            font-weight: bold;
        }

        .row div img {
            background-image: content;
            width: 100%
        }

        #samall-screen {
            display: none;
            visibility: hidden;
        }

        .card-body {
            padding: 5% 5% 3% 5%;
            overflow: hidden;
            text-decoration: none;
        }

        div #img {
            width: 100% !important;
        }

        @media only screen and (max-width:1000px) {
            #large-screen {
                display: none;
            }

            #samall-screen {
                display: block;
                visibility: visible;
            }
        }

        .post-body .card-text {
            font-size: 20px;
        }

        /* //////////// Cards Motion ///////////////////////////////////////////////////////////////////////// */
        .mot {
            /* min-height: 100vh; */
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .mot:nth-child(1) {
            color: #e0ffff;
        }

        .mot:nth-child(2) {
            color: #42455a;
            background: #e0ffff;
        }

        .mot:nth-child(3) {
            color: #e0ffff;
        }

        .mot:nth-child(4) {
            color: #42455a;
            background: #e0ffff;
        }

        .mot .container {
            margin: 100px;
        }

        /* ////////////  */
        .reveal {
            position: relative;
            opacity: 0;
        }

        .reveal.active {
            opacity: 1;
        }

        .active.fade-bottom {
            animation: fade-bottom 1s ease-in;
        }

        .active.fade-left {
            animation: fade-left 1s ease-in;
        }

        .active.fade-right {
            animation: fade-right 1s ease-in;
        }

        @keyframes fade-bottom {
            0% {
                transform: translateY(50px);
                opacity: 0;
            }

            100% {
                transform: translateY(0);
                opacity: 1;
            }
        }

        @keyframes fade-left {
            0% {
                transform: translateX(-100px);
                opacity: 0;
            }

            100% {
                transform: translateX(0);
                opacity: 1;
            }
        }

        @keyframes fade-right {
            0% {
                transform: translateX(100px);
                opacity: 0;
            }

            100% {
                transform: translateX(0);
                opacity: 1;
            }
        }


        /* //////////// Image Motion //////////////////////////////////////////////////////////////////////////////////////// */
        .div-img {
            display: flex;
            box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
            position: relative;
        }

        .hover-effect::before {
            right: 0;
            opacity: 0.7;
            top: 0;
        }

        .hover-effect::after {
            bottom: 0;
            opacity: 0.7;
            left: 0;
        }

        .hover-effect::before,
        .hover-effect::after {
            content: "";
            background: #fff;
            height: 0;
            width: 0;
            z-index: 1;
            position: absolute;
            -webkit-transition-duration: 1.3s !important;
            -o-transition-duration: 1.3s;
            transition-duration: 1.3s !important;
        }

        .hover-effect:hover::after,
        .hover-effect:hover::before {
            height: 100%;
            opacity: 0;
            width: 100%;
            transition: 0.7s;

        }

        .hover-effect1 {
            box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
            border: 0px solid white;
            transition: 0.7s;

        }

        .hover-effect1:hover {
            transform: scale(1.05);
            /* transform: rotate(2deg); */
        }


        .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;
}