body {
    background-color: #fff;
} 

.text {
    padding: 30px;
}

p {
    color: #858484;
}

.cards {
    display: flex; /* بيحول الديف لنظام Flexbox، حتى ترتب العناصر داخلها تلقائيًا */
    justify-content: center; /* بيحط العناصر في وسط الحاوية أفقياً (يمين/يسار) */
    flex-wrap: wrap; /* العناصر تتوزع على عدة صفوف إذا ما كان فيه مكان كافي */
    align-items: center;  /*  يوسّط العناصر عموديًا داخل لكرت*/
    gap: 20px; /*يترك مسافة 20 بكسل بين العناصر*/
    margin-top: 30px; /* يترك مسافة 30 بكسل فوق العنصر*/
}

.card {
    background-color: white;
    border-radius: 11px;
    overflow: hidden; /*لو فيه جزء من صورة أو نص طالع برا حدود الكرت رح تقصه وما تسمح له يبان، كأنه الكرت عبارة عن إطار والمحتوى ما يقدر يطلع برا الإطار. */
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    width: 300px;
    transition: transform 0.11s ease, box-shadow 0.5s ease; /*تتحرك الصورة وقت حط عليها الماوس*/
}  

.card:hover { /*يعني hover = "عند المرور بالفأرة" يعمل اكشن معين */
    transform: translateY(-5px);
    transform: translateY(-10px) scale(1.05); /* تحريك لأعلى + تكبير بسيط */
    box-shadow: 0 10px 25px rgba(244, 3, 3, 0.2);  /* ظل أكبر وأوضح */
} 

.card img {
    width: 100%;
    height: auto; /* الارتفاع يتغير تلقائيًا للحفاظ على تناسب أبعاد الصورة.*/
    display: block; /* يمنع وجود فراغات تحت الصورة (الـ <img> افتراضيًا inline).*/
}

.card-content {
    padding: 15px; /*ضيف مسافة داخليةpx 15   بين محتوى الكرت وحدوده */
}

.title {
    font-size: 1.2rem; /*حجم النص 1.2 من حجم الخط الافتراضي للمتصفح.*/
    font-weight: bold; /*النص عريض.*/
    margin: 10px 0; /*مسافة 10px فوق وتحت النص، ولا شيء من الجانبين.*/
}

.rating {
    display: flex; /* يضع العناصر بصف واحد*/
    align-items: center; /* يوسّطهم عموديًا.*/
    gap: 10px; /*مسافة 10px بين العناصر.*/
    font-size: 0.9rem; /* النص أصغر قليلًا من العادي.*/
    color: #555; 
    margin-top: 8px; /*مسافة 8px فوق قسم التقييم.*/
}

.rating span { /*كل <span> داخل التقييم يكون صف أفقي صغير مع محاذاة وسطية، وبين العناصر داخله 3px فراغ.*/
    display: flex;
    align-items: center;
    gap: 3px;
}

.star { /*يلوّن النجمة باللون البرتقالي */
    color: #ff8a30f1;
}