/* ✅ تصميم الحاوية الرئيسية */
.ZainStreaming-White {
   
    width: 100%;
    max-width: 1200px;
    margin: auto;
    padding: 20px;
    text-align: right;
    direction: rtl;
}

/* ✅ تصميم الهيدر */
.ZainStreaming-WhiteHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

/* ✅ محتوى العنوان والوصف */
.Zain-Header-content h1 {
    font-size: 26px;
    font-weight: bold;
    color: #222;
    margin-bottom: 10px;
}

.Zain-Header-content p {
    font-size: 16px;
    color: #555;
}

/* ✅ زر "اعرف المزيد" */
.Z-EN-Button-White-More {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 16px;
    color: #222;
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s ease;
}

.Z-EN-Button-White-More:hover {
    color: #e91e63;
}

/* ✅ تصميم الأيقونة داخل الزر */
.Z-EN-Button-White-More span svg {
    width: 20px;
    height: 20px;
}

/* ✅ تصميم قسم العروض */
.ZainPlatforms {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ✅ الشبكة التي تحتوي على البطاقتين */
.Zain-platform-grid4-Nez {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
}

/* ✅ تصميم الكروت */
.Zain-Plat-Item {
    width: 48%;
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

/* ✅ تأثير التكبير عند التمرير */
.Zain-Plat-Item:hover {
    transform: scale(1.05);
}

/* ✅ تصميم صور العروض */
.Zain-Plat-Item img {
    width: 100%;
    height: auto;
    border-radius: 10px;
}

/* ✅ التراكب فوق الصورة */
.Z-Overlay-Gradient-ez- {
    position: absolute;
    bottom: 15;
    left: 0;
    width: 100%;
   
    padding: 10px;
    text-align: reght;
}

/* ✅ زر "اشتر الآن" */
.Z-Overlay-Gradient-Button-eezee {
    display: inline-block;
    background: #e91e63;
    color: white;
    padding: 10px 15px;
    border-radius: 5px;
    font-weight: bold;
    text-decoration: none;
    transition: background 0.3s ease;
}

.Z-Overlay-Gradient-Button-eezee:hover {
    background: #c2185b;
}

/* ✅ تحسين التصميم في الشاشات الصغيرة */
@media (max-width: 768px) {
    .ZainStreaming-WhiteHeader {
        flex-direction: column;
        text-align: center;
    }

    .Zain-platform-grid4-Nez {
        flex-direction: column;
    }

    .Zain-Plat-Item {
        width: 100%;
        top: 15;
    }
}