/* =====================================================
   ستايل عام لبوكس النص والصورة في السكاشن
   ===================================================== */
.about-text-box,
.about-image-box {
    border-radius: 1rem;
    transition: all 0.3s ease;
}

/* =====================================================
   موشن (حركة دخول) - الكلاس يضاف ديناميكياً مثل motion-fade
   ===================================================== */

/* Fade In */
.motion-fade {
    opacity: 0;
    transform: translateY(10px);
    animation: motionFadeIn 0.8s ease forwards;
}
@keyframes motionFadeIn {
    to { opacity: 1; transform: translateY(0); }
}

/* Slide Up */
.motion-slide-up {
    opacity: 0;
    transform: translateY(40px);
    animation: motionSlideUp 0.8s ease forwards;
}
@keyframes motionSlideUp {
    to { opacity: 1; transform: translateY(0); }
}

/* Slide Left */
.motion-slide-left {
    opacity: 0;
    transform: translateX(40px);
    animation: motionSlideLeft 0.8s ease forwards;
}
@keyframes motionSlideLeft {
    to { opacity: 1; transform: translateX(0); }
}

/* Slide Right */
.motion-slide-right {
    opacity: 0;
    transform: translateX(-40px);
    animation: motionSlideRight 0.8s ease forwards;
}
@keyframes motionSlideRight {
    to { opacity: 1; transform: translateX(0); }
}

/* Zoom In */
.motion-zoom-in {
    opacity: 0;
    transform: scale(0.9);
    animation: motionZoomIn 0.7s ease forwards;
}
@keyframes motionZoomIn {
    to { opacity: 1; transform: scale(1); }
}

/* =====================================================
   هوفر (تأثير عند المرور) - يضاف مثل hover-shadow, hover-lift...
   ===================================================== */

/* ظل عند المرور */
.hover-shadow:hover {
    box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.18);
}

/* رفع خفيف */
.hover-lift:hover {
    transform: translateY(-6px);
}

/* تكبير بسيط */
.hover-zoom:hover {
    transform: scale(1.03);
}

/* إطار مضيء */
.hover-border-glow:hover {
    box-shadow: 0 0 0 3px rgba(0, 153, 255, 0.4);
}

/* ممكن تستخدم أكثر من تأثير معاً لأن الكلاسات تتركب */
.about-image-box {
    border-radius: 1rem;
    transition: all 0.3s ease;
    overflow: hidden; /* مهم عشان الزوم ما يطلع برة الإطار */
}
/* =========================
   هوفر عام (للنص وغيره)
   ========================= */

.hover-shadow:hover {
    box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.18);
}

.hover-lift:hover {
    transform: translateY(-6px);
}

.hover-zoom:hover {
    transform: scale(1.03);
}

.hover-border-glow:hover {
    box-shadow: 0 0 0 3px rgba(0, 153, 255, 0.4);
}

/* =========================
   هوفر خاص بصورة "من نحن"
   ========================= */

/* ظل على الصورة */
.about-image-box.hover-shadow:hover img {
    box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.18);
}

/* رفع الصورة قليلاً */
.about-image-box.hover-lift:hover img {
    transform: translateY(-6px);
}

/* تكبير الصورة نفسها عند الهوفر */
.about-image-box.hover-zoom:hover img {
    transform: scale(1.05);
}

/* لمعة/إطار مضيء حول الصورة */
.about-image-box.hover-border-glow:hover img {
    box-shadow: 0 0 0 3px rgba(0, 153, 255, 0.4);
}
/* تأثير هوفر على حروف النص في الهيرو */
.hover-letters h1,
.hover-letters p,
.hover-letters .btn {
    transition: color .25s ease, text-shadow .25s ease, transform .25s ease;
}

.hover-letters:hover h1,
.hover-letters:hover p {
    text-shadow: 0 0 8px rgba(255,255,255,0.7);
    transform: translateY(-2px);
}

.hover-letters:hover .btn {
    transform: translateY(-2px);
}
/* ===============================
   1) إعداد عام لكل كروت الهوفر
   =============================== */
.hover-shadow,
.hover-lift,
.hover-zoom,
.hover-border-glow,
.hover-letters {
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease,
        background-color 0.25s ease,
        color 0.25s ease,
        text-shadow 0.25s ease;
}

/* لتفادي تحرك العناصر حوالينها عند الرفع */
.hover-lift,
.hover-zoom,
.hover-border-glow,
.hover-shadow {
    will-change: transform, box-shadow;
}

/* ===============================
   2) هوفر ظل بسيط حول البوكس
   =============================== */
.hover-shadow:hover {
    box-shadow: 0 8px 20px rgba(0,0,0,0.18);
}

/* ===============================
   3) هوفر رفع خفيف (Lift)
   =============================== */
.hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.22);
}

/* ===============================
   4) تكبير بسيط (Zoom)
   =============================== */
.hover-zoom:hover {
    transform: scale(1.03);
    box-shadow: 0 10px 24px rgba(0,0,0,0.2);
}

/* مفيد خصوصاً لبوكسات الصور والنصوص معاً */
.hover-zoom img {
    transition: transform 0.25s ease;
}
.hover-zoom:hover img {
    transform: scale(1.05);
}

/* ===============================
   5) إطار مضيء (Border Glow)
   =============================== */
.hover-border-glow {
    border: 1px solid transparent;
}
.hover-border-glow:hover {
    border-color: rgba(0, 123, 255, 0.9); /* أزرق لطيف، يتماشى مع Bootstrap primary */
    box-shadow: 0 0 12px rgba(0, 123, 255, 0.7);
}

/* ===============================
   6) هوفر على حروف النص (letters)
   =============================== */
/* نطبّقه على صندوق النص، ويؤثر على h1/h2/p والزر داخله */
.hover-letters h1,
.hover-letters h2,
.hover-letters h3,
.hover-letters p,
.hover-letters .btn {
    transition: color 0.25s ease,
                text-shadow 0.25s ease,
                transform 0.25s ease;
}

/* عند المرور على الكونتنر نفسه */
.hover-letters:hover h1,
.hover-letters:hover h2,
.hover-letters:hover h3,
.hover-letters:hover p {
    text-shadow: 0 0 8px rgba(255,255,255,0.7);
    transform: translateY(-2px);
}

/* تأثير بسيط على الزر مع نفس الكونتينر */
.hover-letters:hover .btn {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.25);
}