.elementor-931 .elementor-element.elementor-element-5127654{--display:flex;--min-height:70vh;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--overlay-opacity:0.76;--margin-top:-100px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-931 .elementor-element.elementor-element-5127654:not(.elementor-motion-effects-element-type-background), .elementor-931 .elementor-element.elementor-element-5127654 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://areagles.com/wp-content/uploads/2026/02/DS-scaled.webp");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-931 .elementor-element.elementor-element-5127654::before, .elementor-931 .elementor-element.elementor-element-5127654 > .elementor-background-video-container::before, .elementor-931 .elementor-element.elementor-element-5127654 > .e-con-inner > .elementor-background-video-container::before, .elementor-931 .elementor-element.elementor-element-5127654 > .elementor-background-slideshow::before, .elementor-931 .elementor-element.elementor-element-5127654 > .e-con-inner > .elementor-background-slideshow::before, .elementor-931 .elementor-element.elementor-element-5127654 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:#050505;--background-overlay:'';}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-931 .elementor-element.elementor-element-d571c92{text-align:center;}.elementor-931 .elementor-element.elementor-element-d571c92 .elementor-heading-title{font-family:"Cairo", Sans-serif;font-weight:600;line-height:54px;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-931 .elementor-element.elementor-element-8d39043{width:var( --container-widget-width, 60% );max-width:60%;--container-widget-width:60%;--container-widget-flex-grow:0;text-align:center;font-family:"Cairo", Sans-serif;font-size:131px;font-weight:400;}.elementor-931 .elementor-element.elementor-element-cc6376c{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--gap:0px 20px;--row-gap:0px;--column-gap:20px;--flex-wrap:wrap;}.elementor-931 .elementor-element.elementor-element-6bfb89f{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-widget-image-box .elementor-image-box-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-widget-image-box:has(:hover) .elementor-image-box-title,
					 .elementor-widget-image-box:has(:focus) .elementor-image-box-title{color:var( --e-global-color-primary );}.elementor-widget-image-box .elementor-image-box-description{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-931 .elementor-element.elementor-element-7ee6eab.elementor-position-right .elementor-image-box-img{margin-left:15px;}.elementor-931 .elementor-element.elementor-element-7ee6eab.elementor-position-left .elementor-image-box-img{margin-right:15px;}.elementor-931 .elementor-element.elementor-element-7ee6eab.elementor-position-top .elementor-image-box-img{margin-bottom:15px;}.elementor-931 .elementor-element.elementor-element-7ee6eab .elementor-image-box-wrapper .elementor-image-box-img{width:100%;}.elementor-931 .elementor-element.elementor-element-7ee6eab .elementor-image-box-img img{transition-duration:0.3s;}.elementor-widget-button .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-931 .elementor-element.elementor-element-f994d45 .elementor-button{background-color:#B8860B00;font-family:"Cairo", Sans-serif;font-weight:500;fill:#000000;color:#000000;border-style:none;}.elementor-931 .elementor-element.elementor-element-a053873{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-931 .elementor-element.elementor-element-c34af07.elementor-position-right .elementor-image-box-img{margin-left:15px;}.elementor-931 .elementor-element.elementor-element-c34af07.elementor-position-left .elementor-image-box-img{margin-right:15px;}.elementor-931 .elementor-element.elementor-element-c34af07.elementor-position-top .elementor-image-box-img{margin-bottom:15px;}.elementor-931 .elementor-element.elementor-element-c34af07 .elementor-image-box-wrapper .elementor-image-box-img{width:100%;}.elementor-931 .elementor-element.elementor-element-c34af07 .elementor-image-box-img img{transition-duration:0.3s;}.elementor-931 .elementor-element.elementor-element-8b78e86 .elementor-button{background-color:#B8860B00;font-family:"Cairo", Sans-serif;font-weight:500;fill:#000000;color:#000000;border-style:none;}.elementor-931 .elementor-element.elementor-element-8b78e86{padding:34px 0px 0px 0px;}.elementor-931 .elementor-element.elementor-element-734d4a1{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-931 .elementor-element.elementor-element-974ad62.elementor-position-right .elementor-image-box-img{margin-left:15px;}.elementor-931 .elementor-element.elementor-element-974ad62.elementor-position-left .elementor-image-box-img{margin-right:15px;}.elementor-931 .elementor-element.elementor-element-974ad62.elementor-position-top .elementor-image-box-img{margin-bottom:15px;}.elementor-931 .elementor-element.elementor-element-974ad62 .elementor-image-box-wrapper .elementor-image-box-img{width:100%;}.elementor-931 .elementor-element.elementor-element-974ad62 .elementor-image-box-img img{filter:brightness( 66% ) contrast( 100% ) saturate( 100% ) blur( 0px ) hue-rotate( 0deg );transition-duration:0.3s;}.elementor-931 .elementor-element.elementor-element-310157c{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:15px 0px 0px 0px;}.elementor-931 .elementor-element.elementor-element-8871a41 .elementor-button{background-color:#B8860B00;font-family:"Cairo", Sans-serif;font-weight:500;fill:#000000;color:#000000;border-style:none;}.elementor-931 .elementor-element.elementor-element-8871a41{padding:34px 0px 0px 0px;}.elementor-931 .elementor-element.elementor-element-fcf1677{--display:flex;--min-height:100vh;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--overlay-opacity:0.79;}.elementor-931 .elementor-element.elementor-element-fcf1677:not(.elementor-motion-effects-element-type-background), .elementor-931 .elementor-element.elementor-element-fcf1677 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://areagles.com/wp-content/uploads/2026/01/CS-scaled.webp");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-931 .elementor-element.elementor-element-fcf1677::before, .elementor-931 .elementor-element.elementor-element-fcf1677 > .elementor-background-video-container::before, .elementor-931 .elementor-element.elementor-element-fcf1677 > .e-con-inner > .elementor-background-video-container::before, .elementor-931 .elementor-element.elementor-element-fcf1677 > .elementor-background-slideshow::before, .elementor-931 .elementor-element.elementor-element-fcf1677 > .e-con-inner > .elementor-background-slideshow::before, .elementor-931 .elementor-element.elementor-element-fcf1677 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:#000000;--background-overlay:'';}.elementor-931 .elementor-element.elementor-element-dc53cde{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;}.elementor-931 .elementor-element.elementor-element-1a1f5ec{text-align:center;}.elementor-931 .elementor-element.elementor-element-1a1f5ec .elementor-heading-title{font-family:"Cairo", Sans-serif;font-size:25px;font-weight:600;color:#FFFFFF;}.elementor-931 .elementor-element.elementor-element-115ba48{text-align:center;font-family:"Cairo", Sans-serif;font-size:16px;font-weight:400;line-height:37px;color:var( --e-global-color-primary );}.elementor-931 .elementor-element.elementor-element-4e0d7d6{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}@media(min-width:768px){.elementor-931 .elementor-element.elementor-element-6bfb89f{--width:30%;}.elementor-931 .elementor-element.elementor-element-a053873{--width:30%;}.elementor-931 .elementor-element.elementor-element-734d4a1{--width:30%;}.elementor-931 .elementor-element.elementor-element-dc53cde{--width:50%;}.elementor-931 .elementor-element.elementor-element-4e0d7d6{--width:50%;}}@media(max-width:767px){.elementor-931 .elementor-element.elementor-element-5127654{--margin-top:-220px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-931 .elementor-element.elementor-element-d571c92{margin:223px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-931 .elementor-element.elementor-element-d571c92 .elementor-heading-title{font-size:21px;}.elementor-931 .elementor-element.elementor-element-8d39043{--container-widget-width:90%;--container-widget-flex-grow:0;width:var( --container-widget-width, 90% );max-width:90%;font-size:200px;}.elementor-931 .elementor-element.elementor-element-8d39043 p{margin-block-end:100px;}.elementor-931 .elementor-element.elementor-element-7ee6eab .elementor-image-box-img{margin-bottom:15px;}.elementor-931 .elementor-element.elementor-element-a053873{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-931 .elementor-element.elementor-element-c34af07 .elementor-image-box-img{margin-bottom:15px;}.elementor-931 .elementor-element.elementor-element-974ad62 .elementor-image-box-img{margin-bottom:15px;}}/* Start custom CSS for container, class: .elementor-element-5127654 */<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Arab Eagles - Integrated Creative & Digital</title>
    <style>
        /* --- CSS RESET & FONTS --- */
        @import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;500;700;900&family=Playfair+Display:wght@400;700&display=swap');

        * { box-sizing: border-box; margin: 0; padding: 0; }

        body {
            background-color: #080808; /* Luxury Black */
            font-family: 'Cairo', sans-serif;
            color: #e6e6e6;
            overflow-x: hidden;
        }

        /* --- ROYAL GOLD GRADIENTS --- */
        .gold-text {
            background: linear-gradient(135deg, #d4af37 0%, #fcf6ba 50%, #aa771c 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font-weight: 900;
            text-transform: uppercase;
        }

        /* --- HERO SECTION --- */
        .fusion-hero {
            min-height: 85vh;
            /* استبدل الرابط بصورة الميدجورني الجديدة */
            background: radial-gradient(circle at center, rgba(0,0,0,0.4) 0%, #080808 100%),
                        url('https://images.unsplash.com/photo-1634152962476-4b8a00e1915c?ixlib=rb-1.2.1&auto=format&fit=crop&w=1920&q=80');
            background-size: cover;
            background-position: center;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            text-align: center;
            padding: 0 20px;
            position: relative;
        }

        .fusion-hero::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 150px;
            background: linear-gradient(to top, #080808, transparent);
        }

        .fusion-hero h1 {
            font-size: 3.8rem;
            line-height: 1.2;
            margin-bottom: 1.5rem;
            letter-spacing: -1px;
            text-shadow: 0 10px 30px rgba(0,0,0,0.8);
        }

        .fusion-hero p {
            font-size: 1.2rem;
            max-width: 750px;
            color: #ccc;
            border-bottom: 2px solid #d4af37;
            padding-bottom: 20px;
        }

        /* --- TRINITY GRID SECTION --- */
        .trinity-section {
            padding: 6rem 5%;
            background: #080808;
            position: relative;
        }

        .section-header {
            text-align: center;
            margin-bottom: 4rem;
        }

        .section-header h2 {
            font-size: 2.5rem;
            color: #fff;
            position: relative;
            display: inline-block;
        }

        .cards-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            gap: 2rem;
            max-width: 1400px;
            margin: 0 auto;
        }

        /* --- THE ROYAL CARD --- */
        .royal-card {
            background: #111;
            border: 1px solid #222;
            padding: 3rem 2rem;
            position: relative;
            transition: transform 0.4s ease, border-color 0.4s ease;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        /* الزخرفة الذهبية العلوية */
        .royal-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 60px;
            height: 3px;
            background: #d4af37;
            box-shadow: 0 0 10px #d4af37;
            transition: width 0.4s ease;
        }

        .royal-card:hover {
            transform: translateY(-10px);
            border-color: #d4af37;
            box-shadow: 0 15px 40px rgba(0,0,0,0.6);
        }

        .royal-card:hover::before {
            width: 100%;
        }

        .card-icon {
            font-size: 3rem;
            color: #d4af37;
            margin-bottom: 1.5rem;
            text-shadow: 0 0 15px rgba(212, 175, 55, 0.3);
        }

        .royal-card h3 {
            font-size: 1.8rem;
            color: #fff;
            margin-bottom: 1rem;
            font-family: 'Playfair Display', serif;
        }

        .royal-card p {
            color: #999;
            font-size: 1rem;
            line-height: 1.6;
            margin-bottom: 2rem;
        }

        /* القائمة النقطية الاحترافية */
        .service-features {
            list-style: none;
            border-top: 1px solid #333;
            padding-top: 1.5rem;
        }

        .service-features li {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
            font-size: 0.9rem;
            color: #e0e0e0;
        }

        .service-features li span {
            color: #d4af37;
            margin-left: 10px;
            font-size: 1.2rem;
        }

        /* --- RESPONSIVE --- */
        @media (max-width: 768px) {
            .fusion-hero h1 { font-size: 2.5rem; }
            .royal-card { padding: 2rem; }
        }
    </style>
</head>
<body>

    <header class="fusion-hero">
        <h1 class="gold-text">الإبداع الرقمي والهندسة البصرية</h1>
        <p>
            نحول الأفكار المجردة إلى إمبراطوريات رقمية. في Arab Eagles، ندمج دقة التصميم، صلابة البرمجة، وقوة التسويق لإنشاء تجربة علامة تجارية لا تُنسى.
        </p>
    </header>

    <section class="trinity-section">
        <div class="section-header">
            <h2>منظومة الحلول المتكاملة</h2>
        </div>

        <div class="cards-grid">
            
            <div class="royal-card">
                <div>
                    <div class="card-icon">✦</div> <h3>السيادة البصرية</h3>
                    <p>نصمم هوية بصرية تفرض احترامها. من الشعار الذي يخلد في الذاكرة، إلى واجهات المستخدم (UI/UX) التي تجعل التصفح متعة بصرية، وصولاً إلى تصميمات السوشيال ميديا الجذابة.</p>
                </div>
                <ul class="service-features">
                    <li><span>•</span> تصميم الشعارات والهوية الكاملة (Branding)</li>
                    <li><span>•</span> هندسة واجهة المستخدم (UI/UX Design)</li>
                    <li><span>•</span> الإبداع الإعلاني (Social Media Visuals)</li>
                </ul>
            </div>

            <div class="royal-card">
                <div>
                    <div class="card-icon">◈</div> <h3>البنية الرقمية</h3>
                    <p>المظهر الجذاب يحتاج إلى عظام قوية. نبني مواقع ومتاجر إلكترونية بأحدث لغات البرمجة، تضمن سرعة التحميل، أمان البيانات، والتوافق التام مع كافة الأجهزة.</p>
                </div>
                <ul class="service-features">
                    <li><span>•</span> تطوير المواقع والتطبيقات (Full-Stack Dev)</li>
                    <li><span>•</span> متاجر إلكترونية متكاملة (E-Commerce)</li>
                    <li><span>•</span> استضافة سحابية آمنة (Cloud Security)</li>
                </ul>
            </div>

            <div class="royal-card">
                <div>
                    <div class="card-icon">❖</div> <h3>النمو والاستحواذ</h3>
                    <p>لا فائدة من الجمال إذا لم يره أحد. نستخدم استراتيجيات تسويقية تعتمد على الأرقام والبيانات للوصول لعميلك المثالي وتحويل الزيارات إلى مبيعات فعلية.</p>
                </div>
                <ul class="service-features">
                    <li><span>•</span> تحسين محركات البحث (SEO & SEM)</li>
                    <li><span>•</span> إدارة الحملات الإعلانية (Media Buying)</li>
                    <li><span>•</span> تحليل البيانات والنمو (Analytics)</li>
                </ul>
            </div>

        </div>
    </section>

</body>
</html>/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-f994d45 *//* --- تأثير الزر الذهبي السائل والمدار --- */

/* 1. تهيئة الزرار الأساسي وإلغاء الستايل القديم */
.elementor-931 .elementor-element.elementor-element-f994d45 .elementor-button {
    background: transparent !important; /* إلغاء خلفية ألمنتور */
    border: none !important;
    padding: 0 !important; /* إلغاء الـ padding الداخلي مؤقتاً */
    position: relative;
    z-index: 1;
    border-radius: 4px; /* دوران الحواف */
    overflow: visible; /* مهم جداً عشان المدار يظهر بره الزرار */
}

/* 2. طبقة المدار الذهبي الدوار (The Orbit) */
/* بنعمل عنصر وهمي خلف الزرار وأكبر منه */
.elementor-931 .elementor-element.elementor-element-f994d45 .elementor-button::before {
    content: '';
    position: absolute;
    z-index: -2; /* خلف كل شيء */
    top: -3px; left: -3px; right: -3px; bottom: -3px; /* حجم المدار (سمكه 3 بكسل) */
    border-radius: 6px; /* لازم يكون أكبر قليلاً من دوران الزرار */
    background: var(--ae-dark); /* لون الخلفية تحت المدار */
    
    /* السحر هنا: تدرج لوني مخروطي بيلف */
    background-image: conic-gradient(
        from var(--angle), 
        transparent 0%, 
        transparent 70%, 
        var(--ae-gold) 85%, 
        var(--ae-gold-light) 95%, 
        transparent 100%
    );
    
    /* أنيميشن الدوران باستخدام متغير CSS */
    animation: rotateOrbit 4s linear infinite;
}

/* تعريف متغير الزاوية للأنيميشن (مهم للمتصفحات الحديثة) */
@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
@keyframes rotateOrbit {
  to {
    --angle: 360deg;
  }
}

/* 3. طبقة الذهب السائل الداخلية (The Liquid Gold) */
/* بنستخدم الـ span اللي جوه الزرار عشان نحط عليه الخلفية السائلة */
.elementor-931 .elementor-element.elementor-element-f994d45 .elementor-button-content-wrapper {
    /* تدرج الذهب السائل */
    background: linear-gradient(90deg, 
        var(--ae-gold), 
        #b8860b, 
        var(--ae-gold-light), 
        var(--ae-gold)
    );
    background-size: 300% 100%; /* تكبير الخلفية لعمل حركة السائل */
    
    /* استعادة الـ Padding اللي لغيناه فوق */
    padding: 15px 35px; 
    border-radius: 4px;
    z-index: 2;
    
    /* حركة السائل المستمرة */
    animation: liquidGold 3s linear infinite;
}

/* أنيميشن حركة السائل */
@keyframes liquidGold {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

/* تأثير عند مرور الماوس (اختياري: تسريع الحركة أو زيادة التوهج) */
.elementor-931 .elementor-element.elementor-element-f994d45 .elementor-button:hover::before {
    filter: drop-shadow(0 0 10px var(--ae-gold)); /* توهج للمدار */
    animation-duration: 2s; /* تسريع الدوران */
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-8b78e86 *//* --- تأثير الزر الذهبي السائل والمدار --- */

/* 1. تهيئة الزرار الأساسي وإلغاء الستايل القديم */
.elementor-931 .elementor-element.elementor-element-8b78e86 .elementor-button {
    background: transparent !important; /* إلغاء خلفية ألمنتور */
    border: none !important;
    padding: 0 !important; /* إلغاء الـ padding الداخلي مؤقتاً */
    position: relative;
    z-index: 1;
    border-radius: 4px; /* دوران الحواف */
    overflow: visible; /* مهم جداً عشان المدار يظهر بره الزرار */
}

/* 2. طبقة المدار الذهبي الدوار (The Orbit) */
/* بنعمل عنصر وهمي خلف الزرار وأكبر منه */
.elementor-931 .elementor-element.elementor-element-8b78e86 .elementor-button::before {
    content: '';
    position: absolute;
    z-index: -2; /* خلف كل شيء */
    top: -3px; left: -3px; right: -3px; bottom: -3px; /* حجم المدار (سمكه 3 بكسل) */
    border-radius: 6px; /* لازم يكون أكبر قليلاً من دوران الزرار */
    background: var(--ae-dark); /* لون الخلفية تحت المدار */
    
    /* السحر هنا: تدرج لوني مخروطي بيلف */
    background-image: conic-gradient(
        from var(--angle), 
        transparent 0%, 
        transparent 70%, 
        var(--ae-gold) 85%, 
        var(--ae-gold-light) 95%, 
        transparent 100%
    );
    
    /* أنيميشن الدوران باستخدام متغير CSS */
    animation: rotateOrbit 4s linear infinite;
}

/* تعريف متغير الزاوية للأنيميشن (مهم للمتصفحات الحديثة) */
@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
@keyframes rotateOrbit {
  to {
    --angle: 360deg;
  }
}

/* 3. طبقة الذهب السائل الداخلية (The Liquid Gold) */
/* بنستخدم الـ span اللي جوه الزرار عشان نحط عليه الخلفية السائلة */
.elementor-931 .elementor-element.elementor-element-8b78e86 .elementor-button-content-wrapper {
    /* تدرج الذهب السائل */
    background: linear-gradient(90deg, 
        var(--ae-gold), 
        #b8860b, 
        var(--ae-gold-light), 
        var(--ae-gold)
    );
    background-size: 300% 100%; /* تكبير الخلفية لعمل حركة السائل */
    
    /* استعادة الـ Padding اللي لغيناه فوق */
    padding: 15px 35px; 
    border-radius: 4px;
    z-index: 2;
    
    /* حركة السائل المستمرة */
    animation: liquidGold 3s linear infinite;
}

/* أنيميشن حركة السائل */
@keyframes liquidGold {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

/* تأثير عند مرور الماوس (اختياري: تسريع الحركة أو زيادة التوهج) */
.elementor-931 .elementor-element.elementor-element-8b78e86 .elementor-button:hover::before {
    filter: drop-shadow(0 0 10px var(--ae-gold)); /* توهج للمدار */
    animation-duration: 2s; /* تسريع الدوران */
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-8871a41 *//* --- تأثير الزر الذهبي السائل والمدار --- */

/* 1. تهيئة الزرار الأساسي وإلغاء الستايل القديم */
.elementor-931 .elementor-element.elementor-element-8871a41 .elementor-button {
    background: transparent !important; /* إلغاء خلفية ألمنتور */
    border: none !important;
    padding: 0 !important; /* إلغاء الـ padding الداخلي مؤقتاً */
    position: relative;
    z-index: 1;
    border-radius: 4px; /* دوران الحواف */
    overflow: visible; /* مهم جداً عشان المدار يظهر بره الزرار */
}

/* 2. طبقة المدار الذهبي الدوار (The Orbit) */
/* بنعمل عنصر وهمي خلف الزرار وأكبر منه */
.elementor-931 .elementor-element.elementor-element-8871a41 .elementor-button::before {
    content: '';
    position: absolute;
    z-index: -2; /* خلف كل شيء */
    top: -3px; left: -3px; right: -3px; bottom: -3px; /* حجم المدار (سمكه 3 بكسل) */
    border-radius: 6px; /* لازم يكون أكبر قليلاً من دوران الزرار */
    background: var(--ae-dark); /* لون الخلفية تحت المدار */
    
    /* السحر هنا: تدرج لوني مخروطي بيلف */
    background-image: conic-gradient(
        from var(--angle), 
        transparent 0%, 
        transparent 70%, 
        var(--ae-gold) 85%, 
        var(--ae-gold-light) 95%, 
        transparent 100%
    );
    
    /* أنيميشن الدوران باستخدام متغير CSS */
    animation: rotateOrbit 4s linear infinite;
}

/* تعريف متغير الزاوية للأنيميشن (مهم للمتصفحات الحديثة) */
@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
@keyframes rotateOrbit {
  to {
    --angle: 360deg;
  }
}

/* 3. طبقة الذهب السائل الداخلية (The Liquid Gold) */
/* بنستخدم الـ span اللي جوه الزرار عشان نحط عليه الخلفية السائلة */
.elementor-931 .elementor-element.elementor-element-8871a41 .elementor-button-content-wrapper {
    /* تدرج الذهب السائل */
    background: linear-gradient(90deg, 
        var(--ae-gold), 
        #b8860b, 
        var(--ae-gold-light), 
        var(--ae-gold)
    );
    background-size: 300% 100%; /* تكبير الخلفية لعمل حركة السائل */
    
    /* استعادة الـ Padding اللي لغيناه فوق */
    padding: 15px 35px; 
    border-radius: 4px;
    z-index: 2;
    
    /* حركة السائل المستمرة */
    animation: liquidGold 3s linear infinite;
}

/* أنيميشن حركة السائل */
@keyframes liquidGold {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

/* تأثير عند مرور الماوس (اختياري: تسريع الحركة أو زيادة التوهج) */
.elementor-931 .elementor-element.elementor-element-8871a41 .elementor-button:hover::before {
    filter: drop-shadow(0 0 10px var(--ae-gold)); /* توهج للمدار */
    animation-duration: 2s; /* تسريع الدوران */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-cc6376c *//* 1. تعريف المتغيرات الذهبية */
:root {
    --gold-grad: linear-gradient(135deg, #d4af37 0%, #fcf6ba 50%, #aa771c 100%);
    --black-glass: rgba(20, 20, 20, 0.85);
}

/* 2. تحويل العناوين H1 و H2 إلى ذهبي ملكي */
h1.elementor-heading-title, 
h2.elementor-heading-title {
    background: var(--gold-grad);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0px 0px 0px rgba(0,0,0,0); /* إزالة الظل الافتراضي لضمان عمل الكليب */
}

/* 3. تأثير الكارت الملكي (يوضع هذا الكلاس في العمود) */
.royal-card {
    background: var(--black-glass) !important;
    border: 1px solid #333;
    border-radius: 4px;
    padding: 40px 20px;
    transition: all 0.5s ease;
    position: relative;
    overflow: hidden;
}

/* الخط الذهبي المتحرك فوق الكارت */
.royal-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 0; height: 3px;
    background: var(--gold-grad);
    transition: width 0.4s ease;
}

/* تأثير الهوفر للكارت */
.royal-card:hover {
    transform: translateY(-10px);
    border-color: #d4af37;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.royal-card:hover::before {
    width: 100%;
}

/* 4. زر الأكشن الذهبي */
.elementor-button {
    background: var(--gold-grad) !important;
    color: #000 !important;
    font-weight: bold !important;
    border: 1px solid #fff !important;
    transition: 0.3s !important;
}

.elementor-button:hover {
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.4);
    letter-spacing: 1px;
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-f77c5e3 *//* =========================================
   🕌 تعديلات RTL للفورم الملكي
   ========================================= */

/* --- الحاوية الرئيسية --- */
.ae-royal-form {
    background: #080808;
    border: 1px solid #222;
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.8);
    position: relative;
    overflow: hidden;
    
    /* ⚠️ الإضافات الخاصة باللغة العربية */
    direction: rtl;        /* اتجاه العناصر من اليمين لليسار */
    text-align: right;     /* محاذاة النصوص لليمين */
}

/* خط ذهبي علوي */
.ae-royal-form::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, #b8860b, #D4AF37, #b8860b);
}

/* --- عناوين الأقسام (01, 02, 03) --- */
.ae-section-title {
    color: #fff;
    font-size: 18px;
    margin-bottom: 25px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0; /* في العربي المسافات بين الحروف مش مستحبة */
    display: flex; /* لضمان الترتيب الصحيح */
    align-items: center;
}

.ae-section-title span {
    color: #D4AF37;
    font-weight: 900;
    margin-left: 10px; /* مسافة يسار الرقم (بين الرقم والنص) */
    font-family: monospace;
    font-size: 20px;
}

/* --- نظام الشبكة (Flexbox بيعكس نفسه أوتوماتيك مع RTL) --- */
.ae-row {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.ae-col-half {
    flex: 1;
    min-width: 250px;
}

.ae-col-full {
    width: 100%;
}

/* --- العناوين (Labels) --- */
.ae-royal-form label {
    display: block;
    color: #aaa;
    font-size: 14px; /* كبرناها سنة عشان العربي */
    margin-bottom: 8px;
    font-weight: 600;
    text-align: right; /* تأكيد المحاذاة */
    font-family: 'Cairo', sans-serif; /* يفضل استخدام خط عربي */
}

/* --- الحقول (Inputs & Selects) --- */
.ae-royal-form input[type="text"],
.ae-royal-form input[type="email"],
.ae-royal-form input[type="tel"],
.ae-royal-form textarea,
.ae-royal-form select {
    width: 100%;
    background-color: #121212;
    border: none;
    border-radius: 6px;
    color: #fff;
    padding: 15px 20px;
    font-size: 15px;
    font-weight: 500;
    text-align: right; /* الكتابة تبدأ من اليمين */
    direction: rtl;    /* اتجاه المؤشر */
    font-family: 'Cairo', sans-serif; 
    
    box-shadow: 
        inset 4px 4px 8px rgba(0,0,0,0.9), 
        inset -4px -4px 8px rgba(255,255,255,0.03); /* الإضاءة بتتعكس أوتوماتيك مع الظل */
    
    transition: all 0.3s ease;
}

/* القائمة المنسدلة (Select) */
.ae-royal-form select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url('data:image/svg+xml;utf8,<svg fill="%23D4AF37" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>');
    background-repeat: no-repeat;
    /* ⚠️ السهم في العربي بيكون على الشمال */
    background-position: left 15px center; 
    cursor: pointer;
    padding-left: 40px; /* مساحة للسهم عشان الكلام مايركبش عليه */
}

/* --- التركيز (Focus) --- */
.ae-royal-form input:focus,
.ae-royal-form textarea:focus,
.ae-royal-form select:focus {
    background-color: #000;
    outline: none;
    color: #D4AF37;
    box-shadow: 
        inset 2px 2px 10px rgba(0,0,0,0.9), 
        0 0 0 1px #D4AF37;
}

/* --- زر الإرسال --- */
.ae-submit-area input[type="submit"] {
    width: 100%;
    background: linear-gradient(135deg, #b8860b, #D4AF37);
    color: #000;
    font-weight: 900;
    padding: 18px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    text-transform: uppercase;
    font-size: 18px;
    font-family: 'Cairo', sans-serif;
    margin-top: 10px;
    box-shadow: 0 10px 30px rgba(212, 175, 55, 0.2);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.ae-submit-area input[type="submit"]:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(212, 175, 55, 0.4);
    background: linear-gradient(135deg, #D4AF37, #fff);
}

/* --- الموبايل --- */
@media (max-width: 767px) {
    .ae-royal-form {
        padding: 20px;
    }
    .ae-row {
        gap: 15px; /* زودنا الجاب شوية عشان اللمس */
    }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-fcf1677 *//* 1. تحويل الخريطة لـ Dark Mode */
.ae-dark-map iframe {
    filter: invert(90%) hue-rotate(180deg) brightness(85%) contrast(110%);
    /* الفلتر ده بيشقلب ألوان الخريطة يخليها سودة */
}

/* 2. تنسيق حقول الفورم (Industrial Style) */
.ae-pro-form .elementor-field-group {
    margin-bottom: 25px; /* مسافات واسعة */
}

.ae-pro-form input, 
.ae-pro-form textarea {
    background-color: transparent !important;
    border: none !important;
    border-bottom: 1px solid #333 !important; /* خط رمادي تحت بس */
    color: #fff !important;
    border-radius: 0 !important;
    padding-right: 0 !important; /* الكتابة تبدأ من اليمين */
}

/* لما تدوس جوه الحقل */
.ae-pro-form input:focus, 
.ae-pro-form textarea:focus {
    border-bottom: 1px solid var(--ae-gold) !important; /* الخط ينور ذهبي */
}

/* زرار الإرسال */
.ae-pro-form .elementor-button {
    background: var(--ae-gold);
    color: #000;
    font-weight: bold;
    width: 100%; /* الزرار ياخد العرض كله */
    border-radius: 4px;
    padding: 15px;
    margin-top: 10px;
}

.ae-pro-form .elementor-button:hover {
    background: #fff;
    box-shadow: 0 0 15px rgba(255,255,255,0.4);
}/* End custom CSS */