/* تأثيرات النص - Text Effects */

/* تأثير التضليل الأزرق مثل العنوان في الصورة */
.blue-overlay-text {
    background-color: rgb(34 38 41 / 30%);  /* خلفية زرقاء شبه شفافة */
    color: white;  /* لون النص أبيض */
    padding: 20px 30px;  /* مساحة داخلية */
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);  /* ظل خفيف */
    font-weight: bold;  /* سماكة الخط */
    line-height: 1.2;  /* ارتفاع السطر */
    position: relative;  /* موضع نسبي */
    display: inline-block;
}

/* تأثير الخلفية الزرقاء للعناوين في السلايدر */
.slider-blue-overlay {
    position: absolute;
    width: auto;
    height: auto;
    display: block;
    z-index: 1;
}

/* حاوية لوضع النص فوق الصورة */
.overlay-container {
    position: relative;
    display: inline-block;
    width: 100%;
}

.overlay-container img {
    width: 100%;
    display: block;
}

.overlay-container .blue-overlay-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
}

/* تأثيرات إضافية للنصوص */
.white-shadow-text {
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
}

.glow-text {
    text-shadow: 0 0 10px #ffffff, 0 0 15px #ffffff;
}

/* تأثير التدرج للنصوص */
.gradient-text {
    background: linear-gradient(to right, #1442aa, #3a7bd5);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* تأثير حدود النص */
.text-outline {
    color: transparent;
    -webkit-text-stroke: 1px #fff;
}