.slider-container {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    overflow: hidden;
}

.slide-item {
    text-align: center;
}

.slide-item img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

.slide-item h3 {
    margin-top: 10px;
    font-size: 18px;
}







/* تنسيقات السلايدر */
.after-header-slider {
    margin-top: 20px; /* مسافة بين السلايدر والعنوان */
    padding: 10px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 5px;
    overflow: hidden; /* لمنع أي تجاوز للعرض */
}


	
	.preview-slider{
            width: 100%;}


/* تنسيقات الشرائح الفردية */
.slide-item {
    text-align: center; /* توسيط المحتوى داخل الشريحة */
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #fff;
    overflow: hidden; /* لمنع أي تجاوز للعرض */
}

/* تنسيقات الصورة */
.slide-item img {
    max-width: 100%; /* ضمان أن الصورة لا تتعدى عرض الشريحة */
    height: auto; /* الحفاظ على نسبة العرض إلى الارتفاع */
    border-radius: 5px;
}

/* تنسيقات العنوان */
.slide-item h3 {
    font-size: 18px; /* حجم الخط */
    font-weight: bold; /* جعل الخط Bold */
  /*  color: #333; */ /* لون الخط */
    margin: 10px 0 5px; /* مسافة حول العنوان */
    white-space: normal; /* السماح بنزول النص إلى السطر التالي إذا كان طويلًا */
    word-wrap: break-word; /* تقسيم الكلمات الطويلة إذا لزم الأمر */
    overflow: hidden; /* لمنع أي تجاوز للعرض */
    text-align: center; /* توسيط العنوان */
}

/* تنسيقات الوصف */
.slide-item p {
    font-size: 14px; /* حجم الخط */
    color: #666; /* لون الخط */
    margin: 0; /* إزالة الهوامش الزائدة */
    white-space: normal; /* السماح بنزول النص إلى السطر التالي إذا كان طويلًا */
    word-wrap: break-word; /* تقسيم الكلمات الطويلة إذا لزم الأمر */
    overflow: hidden; /* لمنع أي تجاوز للعرض */
    text-align: center; /* توسيط الوصف */
}






    .slide-item-title {
        display: flex; /* تحويل الحاوية إلى نظام Flexbox */
        justify-content: center; /* توسيط أفقي */
        align-items: center; /* توسيط عمودي */
        font-weight: bold;
        text-align: center; /* توسيط النص داخل العنصر */
        background: linear-gradient(135deg, rgb(35 60 137 / 94%), rgb(0 0 10 / 98%)); /* تدرج بين الأسود والرمادي الغامق */ 
		padding: 10px; /* مساحة داخلية للصندوق */
        border-radius: 8px; /* حواف مستديرة */
        /*width: 100%;*/ /* امتداد العرض ليتناسب مع الحاوية */
        height:70px;
	/*	width: 310px; */
		box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* تأثير ظل أقوى لإبراز الحاوية */
        backdrop-filter: blur(10px); /* تأثير ضبابي لجعل الخلفية أكثر شبهاً بالزجاج */
        border: 1px solid rgba(255, 255, 255, 0.1); /* حدود شبه شفافة لإبراز الزجاج */
    }

    .slide-item-title h3 {
        margin: 0; /* إزالة الهامش الافتراضي للعنوان */
        color: white; /* لون نص أبيض للوضوح على الخلفية الزجاجية */
        font-size: 16px; /* حجم الخط المناسب للعناوين */
        line-height: 1.4; /* تباعد الأسطر لضمان تنسيق جيد لسطرين */
    }

    .slide-item p {
        font-size: 14px;
        color: #666;
    }



        .slide-item img {
            width: 100%; /* جعل الصورة تستجيب للعرض الكامل */
            height: auto; /* الحفاظ على نسبة العرض والارتفاع */
            margin-bottom: 2px; /* إضافة مسافة صغيرة بين الصورة والعنوان */
        }

        .slide-item-title {
       /*     width: calc(100% - 1px); */ /* عرض العنوان يساوي عرض الصورة مع مراعاة الهامش */
            margin-bottom: 10px; /* إضافة هامش أسفل العنوان */
            padding: 8px; /* تقليل المساحة الداخلية للعنوان */
        }
    }