.elementor-30479 .elementor-element.elementor-element-cfe918f:not(.elementor-motion-effects-element-type-background), .elementor-30479 .elementor-element.elementor-element-cfe918f > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#1A081D;}.elementor-30479 .elementor-element.elementor-element-cfe918f{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;}.elementor-30479 .elementor-element.elementor-element-cfe918f > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-30479 .elementor-element.elementor-element-e3d04fc > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-30479 .elementor-element.elementor-element-e3d04fc img{border-radius:20px 20px 20px 20px;box-shadow:0px 0px 56px 0px rgba(255, 255, 255, 0.94);}.elementor-30479 .elementor-element.elementor-element-7c738b2.etlms-enrollment-btn-align-left .tutor-card-body{text-align:left !important;}.elementor-30479 .elementor-element.elementor-element-7c738b2.etlms-enrollment-btn-align-center .tutor-card-body{text-align:center !important;}.elementor-30479 .elementor-element.elementor-element-7c738b2.etlms-enrollment-btn-align-right .tutor-card-body{text-align:right !important;}.elementor-30479 .elementor-element.elementor-element-7c738b2.etlms-enrollment-btn-align-center .etlms-course-enroll-date, .etlms-enrollment-btn-align-right .etlms-course-enroll-date{text-align:left !important;}.elementor-30479 .elementor-element.elementor-element-7c738b2.etlms-course-enroll-buttons-size-large .tutor-btn{font-size:18px;padding:10px 20px;}.etlms-course-enroll-buttons-size-small .tutor-btn{font-size:14px;padding:5px 12px;}.elementor-30479 .elementor-element.elementor-element-7c738b2.etlms-course-enroll-buttons-width-auto .tutor-btn{width:auto !important;display:inline-flex !important;}.elementor-30479 .elementor-element.elementor-element-7c738b2 .tutor-course-progress-wrapper > h3{color:#212327;}.elementor-30479 .elementor-element.elementor-element-7c738b2 .tutor-course-progress-wrapper .list-item-progress{margin-top:16px;}.elementor-30479 .elementor-element.elementor-element-7c738b2 .tutor-course-progress-wrapper .list-item-progress .tutor-progress-bar{height:4px;border-radius:2px;}.elementor-30479 .elementor-element.elementor-element-7c738b2 .tutor-course-progress-wrapper .list-item-progress .tutor-progress-bar .tutor-progress-value{height:100%;border-radius:2px;}.elementor-30479 .elementor-element.elementor-element-7c738b2 .tutor-course-sidebar-card-pricing span{color:#212327;}.elementor-30479 .elementor-element.elementor-element-7c738b2 .tutor-course-sidebar-card-pricing div > del{color:#7A7A7A;}.elementor-30479 .elementor-element.elementor-element-7c738b2 .tutor-enrol-course-form .tutor-enroll-course-button, .elementor-30479 .elementor-element.elementor-element-7c738b2 [type=submit].edd-submit{border-radius:3px 3px 3px 3px;}.elementor-30479 .elementor-element.elementor-element-7c738b2 .tutor-course-sidebar-card-body .tutor-enroll-course-button{border-radius:3px 3px 3px 3px;}.elementor-30479 .elementor-element.elementor-element-7c738b2 .tutor-card .start-continue-retake-button{border-radius:3px 3px 3px 3px;}.elementor-30479 .elementor-element.elementor-element-7c738b2 .tutor-card [name=complete_course_btn]{border-radius:3px 3px 3px 3px;}.elementor-30479 .elementor-element.elementor-element-7c738b2 .tutor-card .tutor-woocommerce-view-cart{border-radius:3px 3px 3px 3px;}.elementor-30479 .elementor-element.elementor-element-7c738b2 .tutor-card .tutor-btn-view-certificate{border-radius:3px 3px 3px 3px;}.elementor-30479 .elementor-element.elementor-element-7c738b2 .etlms-enrolled-info-wrapper .tutor-icon-purchase-mark{font-size:16px;}.elementor-30479 .elementor-element.elementor-element-7c738b2 .tutor-card .tutor-card-body{background-color:#F4F6F9;}.elementor-30479 .elementor-element.elementor-element-7c738b2 .tutor-card .tutor-card-footer{background-color:#fff;}.elementor-30479 .elementor-element.elementor-element-7c738b2 .tutor-card{border-radius:6px 6px 6px 6px;}.elementor-30479 .elementor-element.elementor-element-7c738b2 .tutor-card .tutor-card-footer .etlms-enrolled-icon{font-size:15px;color:#212327;}.elementor-30479 .elementor-element.elementor-element-7c738b2 .tutor-card .tutor-card-footer .etlms-enrolled-label{color:#757c8e;}.elementor-30479 .elementor-element.elementor-element-7c738b2 .tutor-card .tutor-card-footer .etlms-enrolled-label-value, .elementor-30479 .elementor-element.elementor-element-7c738b2 .tutor-card .tutor-card-footer .etlms-enrolled-label-value .tutor-color-secondary{color:#212327;}.etlms-course-enrolment-box.course-enroll-buttons-width-auto .tutor-course-sidebar-card-body:not(.tutor-course-progress-wrapper){display:flex;flex-direction:column;}.etlms-enrollment-btn-align-left .tutor-course-sidebar-card-body:not(.tutor-course-progress-wrapper){align-items:flex-start;}.etlms-enrollment-btn-align-center .tutor-course-sidebar-card-body:not(.tutor-course-progress-wrapper){align-items:center;}.etlms-enrollment-btn-align-right .tutor-course-sidebar-card-body:not(.tutor-course-progress-wrapper){align-items:flex-end;}.etlms-course-enrolment-box.course-enroll-buttons-width-auto form{display:flex;flex-direction:column;}.etlms-enrollment-btn-align-left form {align-items:flex-start;}.etlms-enrollment-btn-align-right form {align-items:flex-end;}.etlms-enrollment-btn-align-center form {align-items:center;}.etlms-course-enroll-buttons-size-large .tutor-btn{font-size:18px;padding:10px 20px;}.etlms-course-enroll-buttons-width-auto .tutor-btn{width:auto !important;display:inline-flex !important;}.elementor-30479 .elementor-element.elementor-element-7640167 .tutor-btn-primary.tutor-add-to-cart-button, .tutor-btn-primary.tutor-native-add-to-cart{border-radius:3px 3px 3px 3px;}.elementor-30479 .elementor-element.elementor-element-7640167 .tutor-card-body .tutor-enroll-course-button{border-radius:3px 3px 3px 3px;}.elementor-30479 .elementor-element.elementor-element-7640167 .tutor-card-body .start-continue-retake-button{border-radius:3px 3px 3px 3px;}.elementor-30479 .elementor-element.elementor-element-7640167 .tutor-card-body [name=complete_course_btn]{border-radius:3px 3px 3px 3px;}.elementor-30479 .elementor-element.elementor-element-7640167 .etlms-course-enroll-info-wrapper .tutor-icon-purchase-mark{font-size:16px !important;}.elementor-30479 .elementor-element.elementor-element-7640167 .tutor-card-footer{border-radius:6px 6px 6px 6px;}.elementor-30479 .elementor-element.elementor-element-7640167 .tutor-card-footer .etlms-enrolled-icon{font-size:15px;color:#212327;}.elementor-30479 .elementor-element.elementor-element-7640167 .tutor-card-footer .etlms-enrolled-level{color:#757c8e !important;}@media(max-width:767px){.elementor-30479 .elementor-element.elementor-element-e3d04fc > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-30479 .elementor-element.elementor-element-e3d04fc{z-index:1;}}/* Start custom CSS for html, class: .elementor-element-7b061b3 */.top-grid-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1200px;
    z-index: 0;
    background-size: 50px 50px;
    background-image: 
        linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
    pointer-events: none;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-70b12f2 */<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>تدريب مجاني حصري - كيف تدير واقعك بسريان تام</title>
    
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;700;900&display=swap');
    </style>
    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        /* =========================================
           Design System & CSS Variables
           ========================================= */
        :root {
            --bg-color: #1a0b1c;
            --primary-color: #8b5cf6;
            --accent-color: #fbbf24;
            --text-white: #ffffff;
            --text-light: #e5e7eb;
            --glass-border: rgba(255, 255, 255, 0.1);
            --glass-bg: rgba(255, 255, 255, 0.03);
            --glow-primary: 0 0 20px rgba(139, 92, 246, 0.5);
            --glow-accent: 0 0 20px rgba(251, 191, 36, 0.6);
        }

        /* =========================================
           Base Styles & Resets
           ========================================= */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Cairo', sans-serif;
        }

        body {
            background-color: var(--bg-color);
            color: var(--text-light);
            line-height: 1.6;
            overflow-x: hidden;
            position: relative;
        }

        h1, h2, h3, h4 {
            color: var(--text-white);
            font-weight: 900;
            line-height: 1.3;
            margin-bottom: 1rem;
        }

        p {
            margin-bottom: 1rem;
            font-size: 1.1rem;
        }

        img {
            max-width: 100%;
            height: auto;
            border-radius: 12px;
        }

        .container {
            width: 90%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 4rem 0;
            position: relative;
            z-index: 10;
        }

        /* =========================================
           Visual Styles (Glassmorphism & Neon)
           ========================================= */
        .glass-panel {
            background: var(--glass-bg);
            border: 1px solid var(--glass-border);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border-radius: 20px;
            padding: 2.5rem;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
            transition: transform 0.3s ease, border-color 0.3s ease;
        }

        .glass-panel:hover {
            transform: translateY(-5px);
            border-color: rgba(139, 92, 246, 0.4);
        }

        .text-accent {
            color: var(--accent-color);
            text-shadow: var(--glow-accent);
        }

        .text-primary {
            color: var(--primary-color);
        }

        /* Buttons */
        .btn {
            display: inline-block;
            background: linear-gradient(135deg, #f59e0b, #fbbf24);
            color: #1a0b1c !important;
            font-size: 1.25rem;
            font-weight: 900;
            text-align: center;
            padding: 1rem 2.5rem;
            border-radius: 50px;
            border: none;
            cursor: pointer;
            text-decoration: none;
            box-shadow: var(--glow-accent);
            transition: all 0.4s ease;
            width: 100%;
        }

        .btn:hover {
            background: linear-gradient(135deg, #fbbf24, #f59e0b);
            box-shadow: 0 0 30px rgba(251, 191, 36, 0.9);
            transform: scale(1.05);
        }

        /* Form Container Styling */
        .form-container {
            background: rgba(0, 0, 0, 0.4);
            padding: 1.5rem;
            border-radius: 16px;
            border: 1px dashed var(--primary-color);
            margin-top: 1.5rem;
            text-align: center;
        }

        /* =========================================
           Background Animations (Floating Orbs)
           ========================================= */
        .bg-orbs {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            overflow: hidden;
            z-index: 0;
            pointer-events: none;
        }

        .orb {
            position: absolute;
            border-radius: 50%;
            filter: blur(100px);
            opacity: 0.4;
            animation: float 20s infinite ease-in-out alternate;
        }

        .orb-1 {
            width: 400px;
            height: 400px;
            background: var(--primary-color);
            top: -100px;
            left: -100px;
            animation-delay: 0s;
        }

        .orb-2 {
            width: 500px;
            height: 500px;
            background: #4c1d95; /* Darker purple */
            bottom: -150px;
            right: -100px;
            animation-delay: -5s;
        }

        .orb-3 {
            width: 300px;
            height: 300px;
            background: var(--accent-color);
            top: 40%;
            left: 50%;
            opacity: 0.15;
            animation-delay: -10s;
        }

        @keyframes float {
            0% { transform: translate(0, 0) scale(1); }
            50% { transform: translate(50px, 50px) scale(1.1); }
            100% { transform: translate(-50px, -20px) scale(0.9); }
        }

        /* =========================================
           Entrance Animations (Fade-in-up)
           ========================================= */
        .fade-in-up {
            opacity: 0;
            transform: translateY(30px);
            animation: fadeInUp 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
        }

        @keyframes fadeInUp {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Delay Utility Classes */
        .delay-1 { animation-delay: 0.2s; }
        .delay-2 { animation-delay: 0.4s; }
        .delay-3 { animation-delay: 0.6s; }
        .delay-4 { animation-delay: 0.8s; }

        /* =========================================
           Layout & Sections
           ========================================= */
        
        /* Hero Section */
        .hero {
            display: grid;
            grid-template-columns: 1fr;
            gap: 3rem;
            align-items: center;
            min-height: 100vh;
            padding-top: 5rem;
        }

        .hero-content h1 {
            font-size: clamp(2rem, 5vw, 3.5rem);
            margin-bottom: 1.5rem;
            text-shadow: var(--glow-primary);
        }

        .hero-content p.subtitle {
            font-size: 1.25rem;
            color: var(--text-light);
            border-right: 4px solid var(--primary-color);
            padding-right: 1rem;
            margin-bottom: 2rem;
        }

        .media-box {
            position: relative;
            border-radius: 20px;
            overflow: hidden;
            border: 2px solid var(--glass-border);
            box-shadow: var(--glow-primary);
        }

        /* Pain Section */
        .pain-section {
            text-align: center;
        }
        
        .pain-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 2rem;
            margin-top: 3rem;
            text-align: right;
        }

        .pain-card i {
            font-size: 2.5rem;
            color: #ef4444; /* Red for pain */
            margin-bottom: 1rem;
            text-shadow: 0 0 15px rgba(239, 68, 68, 0.5);
        }

        /* Solution Section */
        .solution-section {
            text-align: center;
        }

        .steps-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 2rem;
            margin-top: 3rem;
            text-align: right;
        }

        .step-card h3 {
            color: var(--accent-color);
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .step-card i {
            font-size: 2rem;
            text-shadow: var(--glow-accent);
        }

        /* Credibility Section */
        .credibility {
            display: grid;
            grid-template-columns: 1fr;
            gap: 3rem;
            align-items: center;
        }

        .trainer-img {
            border-radius: 50%;
            border: 4px solid var(--primary-color);
            box-shadow: var(--glow-primary);
            max-width: 300px;
            margin: 0 auto;
            display: block;
        }

        /* Final CTA */
        .final-cta {
            text-align: center;
        }

        /* =========================================
           Media Queries (Desktop)
           ========================================= */
        @media (min-width: 992px) {
            .pain-grid, .steps-grid {
                grid-template-columns: repeat(3, 1fr);
            }
            .credibility {
                grid-template-columns: 1fr 2fr;
            }
        }
    </style>
</head>
<body>

    <div class="bg-orbs">
        <div class="orb orb-1"></div>
        <div class="orb orb-2"></div>
        <div class="orb orb-3"></div>
    </div>

        <div class="hero-media fade-in-up delay-2">
           
        </div>

        <div class="hero-content fade-in-up">
            <h1><span class="text-accent">تدريب مجاني حصري:</span> كيف تدير واقعك بسريان تام وتتخلص من "البندولات" سارقة الطاقة في 3 خطوات عملية!</h1>
            <p class="subtitle">لمن قرأ عن الوعي والترانسيرفينغ وفهم النظريات... لكنه ما زال يفقد أعصابه وتُستنزف طاقته عند أول أزمة أو مع أول شخص مستفز في يومه!</p>
            
            <div class="glass-panel form-container fade-in-up delay-1">
                <h4 style="margin-bottom: 0.5rem;">👇 سجل بياناتك الآن لحجز مقعدك المجاني وبدء المشاهدة فوراً 👇</h4>
                
                <div style="margin: 1.5rem 0;">
                    [fluentform id="25"]
                </div>
                
                <p style="font-size: 0.9rem; color: #9ca3af; margin: 0;"><i class="fa-solid fa-lock"></i> بياناتك آمنة 100%</p>
            </div>
        </div>
    </header>

    <section class="container pain-section">
        <h2 class="fade-in-up">هل يبدو هذا <span class="text-accent">مألوفاً لك؟</span></h2>
        <p class="fade-in-up delay-1" style="max-width: 700px; margin: 0 auto;">المشكلة ليست فيك! المشكلة في الفجوة بين "الفلسفة المعقدة" و"التطبيق اليومي".</p>

        <div class="pain-grid">
            <div class="glass-panel pain-card fade-in-up delay-1">
                <i class="fa-solid fa-book-open-reader"></i>
                <h3>تنهار في أرض الواقع</h3>
                <p>تقرأ كثيراً عن فضاء الاحتمالات والوعي، وتفهمها نظرياً، لكن في أرض الواقع تنهار أمام ضغوط العمل ومخاوف المستقبل.</p>
            </div>
            
            <div class="glass-panel pain-card fade-in-up delay-2">
                <i class="fa-solid fa-battery-quarter"></i>
                <h3>استنزاف مستمر</h3>
                <p>تشعر بالاستنزاف الطاقي والعاطفي المستمر بسبب بيئة عمل سامة أو علاقات مع أشخاص مستفزين يمتصون طاقتك (البندولات).</p>
            </div>

            <div class="glass-panel pain-card fade-in-up delay-3">
                <i class="fa-solid fa-person-swimming"></i>
                <h3>السباحة عكس التيار</h3>
                <p>تبذل جهداً مضنياً وتسبح عكس التيار لتحقيق أهدافك، وغالباً ما يدمر الخوف المفرط من الفشل أو القلق المالي كل ما تبنيه.</p>
            </div>
        </div>
    </section>

    <section class="container solution-section">
        <h2 class="fade-in-up text-primary" style="font-size: 2.2rem;">ماذا ستكتشف في هذا التدريب المكثف؟</h2>
        <p class="fade-in-up delay-1" style="max-width: 800px; margin: 0 auto 2rem;">كيفية تجريد نظريات "ترانسيرفينغ الواقع" من الفلسفة وتحويلها إلى أدوات هندسية مبسطة للعيش في سريان دائم، من خلال 3 خطوات عملية:</p>

        <div class="steps-grid">
            <div class="glass-panel step-card fade-in-up delay-1">
                <h3><i class="fa-solid fa-shield-halved"></i> الخطوة الأولى</h3>
                <h4 style="margin-top: 1rem;">تحديد وإرباك "البندولات"</h4>
                <p>كيف تتعرف على الكيانات الطاقية التي تتغذى على غضبك وخوفك (المدير المتسلط، الزميل النرجسي، الأخبار السيئة)، وكيف توقف استنزافها لطاقتك فوراً عبر استراتيجيتي "التجاهل" و"الإرباك اللامعقول".</p>
            </div>

            <div class="glass-panel step-card fade-in-up delay-2">
                <h3><i class="fa-solid fa-scale-balanced"></i> الخطوة الثانية</h3>
                <h4 style="margin-top: 1rem;">النجاة من "قوى التوازن"</h4>
                <p>لماذا يدمر الخوف الشديد أو الحماس المفرط أهدافك؟ وكيف تستخدم تقنية "تخفيض الأهمية" وقبول الهزيمة مسبقاً لتفريغ الضغط وجعل الكون يعمل لصالحك.</p>
            </div>

            <div class="glass-panel step-card fade-in-up delay-3">
                <h3><i class="fa-solid fa-wand-magic-sparkles"></i> الخطوة الثالثة</h3>
                <h4 style="margin-top: 1rem;">تفعيل "زر الطوارئ" للسريان</h4>
                <p>اكتشف "العبارة السحرية" الفورية التي تطفئ التوتر في ثوانٍ، وتُعيدك لحالة السريان لتسمح لعالمك بأن يعتني بك بأقل مجهود.</p>
            </div>
        </div>
    </section>
<style>
  /* استهداف الصورة داخل div الخاص بالمصداقية */
  .credibility-img img {
    /* جعل الحواف دائرية بنسبة 50% لخلق دائرة مثالية */
    border-radius: 50%;
    
    /* التأكد من أن الصورة لا تمتد بشكل غير طبيعي */
    object-fit: cover;
    
    /* تحديد عرض وارتفاع ثابتين لضمان الدائرية (اختياري، عدلها حسب الحاجة) */
    width: 200px; /* مثال لعرض الصورة */
    height: 200px; /* يجب أن يكون الارتفاع مساوياً للعرض */
    
    /* إضافة حافة (اختياري، للجمالية) */
    border: 3px solid #ccc; 
  }
</style>
    <section class="container">
        <div class="glass-panel credibility fade-in-up delay-1">
            <div class="credibility-img">
                <img src="https://tsurf-arb.com/wp-content/uploads/2026/04/Transurfing-syuzanna-Arabic-Center.png" alt="المدربة سوزانا الفرا" class="trainer-img">
            </div>
            <div class="credibility-content">
                <h2 class="text-accent">تعرف على مدربتك: سوزانا الفرا</h2>
                <p>مدربة ترانسيرفينغ معتمدة في البلاد العربية، متخصصة في التحول الشخصي العميق.</p>
                <p>تمتلك خبرة واسعة في نقل المتدربين من التعقيد النظري للوعي إلى التطبيق العملي المبسط، باستخدام تقنيات متطورة لضبط النية وإدارة الواقع بوعي وسهولة. رسالتها هي تمكينك من استعادة دفة القيادة لحياتك بأقل قدر من المقاومة والاستنزاف.</p>
            </div>
        </div>
    </section>

    <footer class="container final-cta">
        <div class="glass-panel fade-in-up delay-1" style="max-width: 800px; margin: 0 auto; border-color: var(--accent-color);">
            <h2 style="font-size: 2.5rem;">توقف عن محاربة الواقع... <span class="text-primary">وابدأ في هندسته!</span></h2>
            <p>التدريب متاح <strong class="text-accent">مجاناً لفترة محدودة</strong>. لا تفوت فرصة تحويل النظريات إلى واقع ملموس يحميك من الاستنزاف اليومي.</p>
            
            <div class="form-container" style="background: transparent; border: none; padding-top: 0;">
                <h4 style="margin-bottom: 1rem;">احجز مقعدك الآن قبل إغلاق التسجيل المفتوح:</h4>
                
                <div style="margin-bottom: 1rem;">
                   [fluentform id="25"]
                </div>
                
                <p style="font-size: 0.9rem; color: #9ca3af; margin: 0;"><i class="fa-solid fa-lock"></i> بياناتك آمنة 100% ولن نشاركها مع أي طرف ثالث.</p>
            </div>
        </div>
    </footer>

    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const observerOptions = {
                root: null,
                rootMargin: '0px',
                threshold: 0.1
            };

            const observer = new IntersectionObserver((entries, observer) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        entry.target.style.animationPlayState = 'running';
                        observer.unobserve(entry.target);
                    }
                });
            }, observerOptions);

            const animatedElements = document.querySelectorAll('.fade-in-up');
            animatedElements.forEach(el => {
                el.style.animationPlayState = 'paused';
                observer.observe(el);
            });
        });
    </script>
</body>
</html>/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-bb66fb2 *//* 1. رفع طبقة حاوية العلم المختار لتكون أعلى من حقل الإدخال النصي */
body .iti__selected-flag {
    z-index: 15 !important;
    position: absolute !important;
}

/* 2. رفع طبقة الأعلام نفسها لضمان عدم تداخلها أو اختفائها خلف أي خلفية */
body .iti__flag {
    position: relative !important;
    z-index: 20 !important;
}

/* 3. التأكد من أن الحاوية الرئيسية تسمح بظهور الطبقات المرتفعة دون حجب */
body .iti {
    position: relative !important;
    z-index: 5 !important;
}

/* السماح للطبقات المنبثقة بالخروج من حدود الصندوق دون أن تُقص */
body .form-container,
body .fluentform {
    overflow: visible !important;
}/* End custom CSS */