.categories-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* شبكة تناسب كل الأجهزة */
    gap: 20px;
    padding: 20px;
    justify-content: center;
}

.category-card {
    background-color: #ffffff;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    width: 250px; /* تثبيت عرض البطاقة */
    height: 350px; /* تثبيت ارتفاع البطاقة */
}

    .category-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
    }

.category-image {
    width: 100%;
    height: 200px; /* تثبيت ارتفاع الصورة */
    overflow: hidden;
}

    .category-image img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* لضمان ملء الصورة للمنطقة */
    }

.category-info {
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 150px; /* تخصيص المساحة للنص */
}

    .category-info h3 {
        margin: 10px 0 5px;
        font-size: 20px; /* زيادة حجم الخط */
        font-weight: bold; /* جعل النص غامقًا */
        color: #222; /* لون داكن واضح */
        letter-spacing: 1px; /* إضافة تباعد بين الأحرف */
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); /* إضافة ظل خفيف للنص */
        text-transform: capitalize; /* جعل أول حرف كبير */
    }


    .category-info p {
        margin: 0;
        font-size: 14px;
        color: #666;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2; /* عرض سطرين فقط */
        -webkit-box-orient: vertical;
    }

/* تصميم خاص للهواتف */
@media (max-width: 768px) {
    .categories-container {
        grid-template-columns: repeat(2, 1fr); /* بطاقتان في كل صف */
        gap: 15px;
    }

    .category-card {
        width: 100%; /* جعل العرض مرناً ليتناسب مع الشبكة */
        height: 250px; /* تعديل ارتفاع البطاقة */
    }

    .category-image {
        height: 150px; /* تقليل ارتفاع الصورة */
    }

    .category-info {
        height: 100px;
    }
}

/*
.search-bar {
    text-align: center;
    margin-bottom: 20px;
}

    .search-bar input {
        padding: 10px;
        width: 300px;
        border: 1px solid #ccc;
        border-radius: 5px;
    }

    .search-bar button {
        padding: 10px 20px;
        background-color: #3498db;
        color: white;
        border: none;
        border-radius: 5px;
        cursor: pointer;
    }

        .search-bar button:hover {
            background-color: #2980b9;
        }
*/
.pagination {
    text-align: center;
    margin-top: 20px;
}

    .pagination a {
        display: inline-block;
        padding: 10px 15px;
        margin: 0 5px;
        border: 1px solid #ddd;
        border-radius: 5px;
        text-decoration: none;
        color: #3498db;
    }

        .pagination a.active {
            background-color: #3498db;
            color: white;
        }

        .pagination a:hover {
            background-color: #2980b9;
            color: white;
        }

a {
    text-decoration: none; /* إزالة الخط السفلي عن جميع الروابط */
}

    a:hover {
        text-decoration: none; /* تأكيد أن الخط لا يظهر حتى عند التمرير */
    }