/*
Theme Name: Hello Elementor Child
Theme URI: https://elementor.com/hello-theme/?utm_source=wp-themes&utm_campaign=theme-uri&utm_medium=wp-dash
Template: hello-elementor
Author: Elementor Team
Author URI: https://elementor.com/?utm_source=wp-themes&utm_campaign=author-uri&utm_medium=wp-dash
Description: Hello Elementor is a lightweight and minimalist WordPress theme that was built specifically to work seamlessly with the Elementor site builder plugin. The theme is free, open-source, and designed for users who want a flexible, easy-to-use, and customizable website. The theme, which is optimized for performance, provides a solid foundation for users to build their own unique designs using the Elementor drag-and-drop site builder. Its simplicity and flexibility make it a great choice for both beginners and experienced Web Creators.
Tags: accessibility-ready,flexible-header,custom-colors,custom-menu,custom-logo,featured-images,rtl-language-support,threaded-comments,translation-ready
Version: 3.4.5.1766568277
Updated: 2025-12-24 09:24:37

*/



html.has-scroll-smooth {
    overflow: hidden;
}
html.has-scroll-dragging {
    user-select: none;
}
.has-scroll-smooth body {
    overflow: hidden;
}
.has-scroll-smooth [data-scroll-container] {
    min-height: 100vh;
}

/* تحسين الأداء */
[data-scroll-section] {
    will-change: transform;
}

/* ✅ FIX: الصفحة تظهر على طول على الموبايل */
body {
    opacity: 1;
}

/* الصفحة تتخفى بس على الديسكتوب لحد ما الأنيميشن تبدأ */
@media (min-width: 900px) {
    body:not(.animations-ready) {
        opacity: 0;
    }
    body.animations-ready {
        opacity: 1;
        transition: opacity 0.5s ease;
    }
}

/* ✅ على الموبايل نتأكد إن كل حاجة شغالة عادي */
@media (max-width: 899px) {
    body.mobile-view {
        opacity: 1 !important;
    }
    
    /* إلغاء أي smooth scroll على الموبايل */
    html.mobile-view {
        overflow: auto !important;
    }
    
    html.mobile-view body {
        overflow: auto !important;
    }
}

/* ✅ للـ Animated Underline */
.animated-underline {
    position: relative;
    display: inline-block;
}

.animated-underline::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background: #2ecc71;
    transition: width 0.6s ease;
}

.animated-underline.is-active::after {
    width: 100%;
}


.hero-section {
    overflow: hidden !important;
    position: relative;
    will-change: transform;
}

.hero-section .elementor-background-overlay,
.hero-section > .elementor-container {
    will-change: transform;
}

/* Fix parallax elements */
.hero-title,
.hero-text {
    will-change: transform;
    position: relative;
    z-index: 10;
}

.card-content{
  will-change: transform;
    position: relative;
    z-index: 10;   
}


.reveal-img {
    overflow: hidden; /* لمنع الصورة من الخروج عن حدود الكارد */
}
.reveal-img img {
   scale: 1.3 ;
    transition: none !important;
}

.board-member-card {
    overflow: hidden !important;
   margin-bottom : 40px ;
}

/* حركة الصورة */
.member-photo img {
    transition: transform 1s cubic-bezier(0.2, 1, 0.3, 1) !important;
    transform-origin: center right;
}

/* تأثير عند تمرير الماوس على الكارد */
.board-member-card:hover .member-photo img {
    transform: scale(1.08); /* زووم هادئ جداً */
}

/* تحسين مظهر أيقونات ISO */
.iso-badge {
    filter: grayscale(100%); /* تبدأ رمادي */
    transition: filter 0.5s ease;
}

.board-member-card:hover .iso-badge {
    filter: grayscale(0%); /* تلون عند الوقوف على الكارد */
}


.info-card {
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

/* تأثير عند وقوف الماوس على الكارد */
.info-card:hover {
    transform: translateY(-12px) !important; /* يرتفع للأعلى */
    box-shadow: 0 20px 40px rgba(0, 230, 118, 0.1) !important; /* ظل بلون أخضر خفيف */
}

/* حركة تكبير بسيطة للأيقونة عند الهوفر */
.info-card:hover .info-card-icon {
    transform: scale(1.1);
    ransition: transform 0.3s ease !important;
   
}

.info-card-icon {
    transition: transform 0.3s ease !important;
}

.info-card {
   transition: transform 0.3s ease !important;
}




/* الكلاس الذي ستضعه على السكشن في إليمنتور */
.animated-border-section {
    position: relative;
    padding: 40px; /* مسافة داخلية لضمان عدم لمس النص للحدود */
    transition: all 0.5s ease;
}

/* الخطوط العرضية (فوق وتحت) */
.animated-border-section::before {
    content: '';
    position: absolute;
    inset: 0; /* يغطي السكشن بالكامل */
    border-top: 2px solid #00e676;
    border-bottom: 2px solid #00e676;
    transform: scaleX(0); /* مخفي في البداية عرضياً */
    transition: transform 0.6s ease;
    z-index: 1;
}

/* الخطوط الطولية (يمين وشمال) */
.animated-border-section::after {
    content: '';
    position: absolute;
    inset: 0;
    border-left: 2px solid #00e676;
    border-right: 2px solid #00e676;
    transform: scaleY(0); /* مخفي في البداية طولياً */
    transition: transform 0.6s ease;
    z-index: 1;
}

/* عند الوقوف بالماوس: ارسم البرواز */
.animated-border-section:hover::before {
    transform: scaleX(1); /* يتمدد الخط العلوي والسفلي */
}

.animated-border-section:hover::after {
    transform: scaleY(1); /* يتمدد الخط الجانبي */
}

/* لمسة جمالية: تفتيح الخلفية قليلاً عند الـ Hover */
.animated-border-section:hover {
    background-color: rgba(0, 230, 118, 0.02);
}

.animated-border-section.draw-now::before,
.animated-border-section.draw-now::after {
    transform: scale(1);
}


.parallax-text-move {
   transform-style: preserve-3d;
    backface-visibility: hidden;
    will-change: transform;
}



.header-scrolled {
    background: rgba(255, 255, 255, 0.8) !important;
    backdrop-filter: blur(10px); /* تأثير الزجاج */
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    transition: background 0.3s ease;
}


/* الصندوق الخارجي لكل كلمة */
.word-wrapper {
    display: inline-block;
    overflow: hidden; /* ده اللي بيخلي الكلمة تظهر كأنها طالعة من العدم */
    vertical-align: bottom;
      font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    color: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
}

/* الكلمة نفسها اللي بتتحرك */
.word-inner {
    display: inline-block;
    will-change: transform;
    /* تأكد من عدم وجود مسافات غريبة */
    padding-right: 0.15em; 
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    color: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
}

/* تعديل للمسافات في العربي */
[direction="rtl"] .word-inner {
    padding-right: 0;
    padding-left: 0.15em;
}


/* الحاوية الكبيرة في إليمنتور */
.images-reveal-wrapper {
    position: relative;
    height: 700px; /* زود الارتفاع عشان الصور تلاقي مساحة تتحرك فيها */
    overflow: hidden !important; /* مهم جداً عشان الستارة تبان */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* استهداف الويجت نفسه اللي جوه الكونتينر */
.img-top, .img-bottom {
    position: absolute !important;
    width: 100%; /* خليه ياخد عرض العمود */
    max-width: 500px; /* حدد حجم أقصى للصور عشان ميركبوش على الشاشة كلها */
    transition: none !important; /* إلغاء أي انيميشن ديفولت من إليمنتور */
}

/* ضبط السنتر */
.img-top {
    z-index: 2; /* اللي فوق */
}

.img-bottom {
    z-index: 1; /* اللي تحت */
}
.slide_up_reveal {
    /* بنلغي أي transition يدوي عشان ميعطلش GSAP */
    transition: none !important;
    will-change: transform, background-color;
    /* بنضمن إن السكشن ليه مساحة يتحرك فيها */
    position: relative;
    overflow: hidden;
}

/* تنسيق الحاوية الرئيسية */
.custom-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* تنسيق كل سطر في القائمة */
.custom-list .list-item {
    position: relative;
    padding-inline-start: 25px; /* مسافة عشان الدائرة متخبطش في الكلام */
    margin-bottom: 12px;
    font-size: 18px;
    line-height: 1.6;
    color: #333; 
}

/* رسم الدائرة المصمتة */
.custom-list .list-item::before {
    content: ""; /* بنسيبها فاضية عشان هنرسم بالـ CSS */
    position: absolute;
    inset-inline-start : 0;
    top: 8px; /* بنظبط مكانها عشان تكون في نص السطر */
    width: 10px; /* قطر الدائرة */
    height: 10px; /* قطر الدائرة */
    background-color: #22C55E; /* اللون الأخضر المصمت */
    border-radius: 50%; /* دي اللي بتخلي المربع يبقى دائرة */
}

.card-reveal-section {
    will-change: width, border-radius;
    transition: none !important; /* عشان الـ CSS ميعطلش الـ GSAP */
}


/* تنسيق حقول فورم إليمنتور */
/*.elementor-field-group {*/
/*    position: relative;*/
/*    margin-bottom: 20px;*/
/*}*/

/* تعديل شكل الحقول الافتراضي */
/*.elementor-field-group input, */
/*.elementor-field-group textarea {*/
/*    border: none !important;
    border-bottom: 2px solid #e0e0e0 !important; 
/*    background-color: transparent !important;*/
/*    border-radius: 0 !important;*/
/*    transition: all 0.3s ease !important;*/
/*    padding-left: 10px !important;*/
/*    padding-right: 10px !important;*/
/*}*/

/* الخط المتحرك (Underline) عند الوقوف على الحقل */
/*.elementor-field-group::after {*/
/*    content: '';*/
/*    position: absolute;*/
/*    bottom: 0;*/
/*    right: 0;*/
/*    width: 0;*/
/*    height: 2px;
    background: #00e676; 
/*    transition: width 0.4s cubic-bezier(0.25, 1, 0.5, 1);*/
/*}*/

/* عند الضغط داخل الحقل */
/*.elementor-field-group:focus-within::after {
    width: 100%;  
/*}*/

/*.elementor-field-group input:focus, */
/*.elementor-field-group textarea:focus {*/
/*    background-color: rgba(0, 230, 118, 0.02) !important;*/
/*}*/

/* أنيميشن زر الإرسال */
/*.elementor-button[type="submit"] {*/
/*    transition: background-color 0.3s ease, transform 0.1s ease !important;*/
/*}*/