.elementor-1115 .elementor-element.elementor-element-aed8650{--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-1115 .elementor-element.elementor-element-aed8650:not(.elementor-motion-effects-element-type-background), .elementor-1115 .elementor-element.elementor-element-aed8650 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://areagles.com/wp-content/uploads/2026/02/Social-Media-scaled.webp");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-1115 .elementor-element.elementor-element-aed8650::before, .elementor-1115 .elementor-element.elementor-element-aed8650 > .elementor-background-video-container::before, .elementor-1115 .elementor-element.elementor-element-aed8650 > .e-con-inner > .elementor-background-video-container::before, .elementor-1115 .elementor-element.elementor-element-aed8650 > .elementor-background-slideshow::before, .elementor-1115 .elementor-element.elementor-element-aed8650 > .e-con-inner > .elementor-background-slideshow::before, .elementor-1115 .elementor-element.elementor-element-aed8650 > .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-1115 .elementor-element.elementor-element-305c5d5{text-align:center;}.elementor-1115 .elementor-element.elementor-element-305c5d5 .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-1115 .elementor-element.elementor-element-fdde8b5{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:18px;font-weight:400;}.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-1115 .elementor-element.elementor-element-3d64aa1 .elementor-button{background-color:#B8860B00;font-family:"Cairo", Sans-serif;font-weight:500;fill:#000000;color:#000000;border-style:none;}.elementor-1115 .elementor-element.elementor-element-49b8389{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1115 .elementor-element.elementor-element-b2b231a{--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 30px;--row-gap:0px;--column-gap:30px;--flex-wrap:wrap;}.elementor-1115 .elementor-element.elementor-element-cd36aad{--display:flex;--min-height:40vh;--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-1115 .elementor-element.elementor-element-1db24b8.elementor-position-right .elementor-image-box-img{margin-left:15px;}.elementor-1115 .elementor-element.elementor-element-1db24b8.elementor-position-left .elementor-image-box-img{margin-right:15px;}.elementor-1115 .elementor-element.elementor-element-1db24b8.elementor-position-top .elementor-image-box-img{margin-bottom:15px;}.elementor-1115 .elementor-element.elementor-element-1db24b8 .elementor-image-box-wrapper .elementor-image-box-img{width:100%;}.elementor-1115 .elementor-element.elementor-element-1db24b8 .elementor-image-box-img img{transition-duration:0.3s;}.elementor-1115 .elementor-element.elementor-element-da27304{padding:40px 0px 0px 0px;font-family:"Cairo", Sans-serif;font-weight:400;}.elementor-1115 .elementor-element.elementor-element-02747e9 .elementor-button{background-color:#B8860B00;font-family:"Cairo", Sans-serif;font-weight:500;fill:#000000;color:#000000;border-style:none;}.elementor-1115 .elementor-element.elementor-element-f937e0c{--display:flex;--min-height:40vh;--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-1115 .elementor-element.elementor-element-55bde21.elementor-position-right .elementor-image-box-img{margin-left:15px;}.elementor-1115 .elementor-element.elementor-element-55bde21.elementor-position-left .elementor-image-box-img{margin-right:15px;}.elementor-1115 .elementor-element.elementor-element-55bde21.elementor-position-top .elementor-image-box-img{margin-bottom:15px;}.elementor-1115 .elementor-element.elementor-element-55bde21 .elementor-image-box-wrapper .elementor-image-box-img{width:100%;}.elementor-1115 .elementor-element.elementor-element-55bde21 .elementor-image-box-img img{transition-duration:0.3s;}.elementor-1115 .elementor-element.elementor-element-fd6762c{padding:40px 0px 0px 0px;font-family:"Cairo", Sans-serif;font-weight:400;}.elementor-1115 .elementor-element.elementor-element-49459d9 .elementor-button{background-color:#B8860B00;font-family:"Cairo", Sans-serif;font-weight:500;fill:#000000;color:#000000;border-style:none;}.elementor-1115 .elementor-element.elementor-element-0025d29{--display:flex;--min-height:40vh;--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-1115 .elementor-element.elementor-element-205bcf9.elementor-position-right .elementor-image-box-img{margin-left:15px;}.elementor-1115 .elementor-element.elementor-element-205bcf9.elementor-position-left .elementor-image-box-img{margin-right:15px;}.elementor-1115 .elementor-element.elementor-element-205bcf9.elementor-position-top .elementor-image-box-img{margin-bottom:15px;}.elementor-1115 .elementor-element.elementor-element-205bcf9 .elementor-image-box-wrapper .elementor-image-box-img{width:100%;}.elementor-1115 .elementor-element.elementor-element-205bcf9 .elementor-image-box-img img{filter:brightness( 66% ) contrast( 100% ) saturate( 100% ) blur( 0px ) hue-rotate( 0deg );transition-duration:0.3s;}.elementor-1115 .elementor-element.elementor-element-934199c{padding:40px 0px 0px 0px;font-family:"Cairo", Sans-serif;font-weight:400;}.elementor-1115 .elementor-element.elementor-element-8c425d4 .elementor-button{background-color:#B8860B00;font-family:"Cairo", Sans-serif;font-weight:500;fill:#000000;color:#000000;border-style:none;}.elementor-1115 .elementor-element.elementor-element-f3b7452{--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-1115 .elementor-element.elementor-element-f3b7452:not(.elementor-motion-effects-element-type-background), .elementor-1115 .elementor-element.elementor-element-f3b7452 > .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-1115 .elementor-element.elementor-element-f3b7452::before, .elementor-1115 .elementor-element.elementor-element-f3b7452 > .elementor-background-video-container::before, .elementor-1115 .elementor-element.elementor-element-f3b7452 > .e-con-inner > .elementor-background-video-container::before, .elementor-1115 .elementor-element.elementor-element-f3b7452 > .elementor-background-slideshow::before, .elementor-1115 .elementor-element.elementor-element-f3b7452 > .e-con-inner > .elementor-background-slideshow::before, .elementor-1115 .elementor-element.elementor-element-f3b7452 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:#000000;--background-overlay:'';}.elementor-1115 .elementor-element.elementor-element-9e646b4{--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-1115 .elementor-element.elementor-element-c5d3a5c{text-align:center;}.elementor-1115 .elementor-element.elementor-element-c5d3a5c .elementor-heading-title{font-family:"Cairo", Sans-serif;font-size:25px;font-weight:600;color:#FFFFFF;}.elementor-1115 .elementor-element.elementor-element-0c80a55{text-align:center;font-family:"Cairo", Sans-serif;font-size:16px;font-weight:400;line-height:37px;color:var( --e-global-color-primary );}.elementor-1115 .elementor-element.elementor-element-705291a{--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-1115 .elementor-element.elementor-element-49b8389{--width:100%;}.elementor-1115 .elementor-element.elementor-element-b2b231a{--content-width:1200%;}.elementor-1115 .elementor-element.elementor-element-cd36aad{--width:30%;}.elementor-1115 .elementor-element.elementor-element-f937e0c{--width:30%;}.elementor-1115 .elementor-element.elementor-element-0025d29{--width:30%;}.elementor-1115 .elementor-element.elementor-element-9e646b4{--width:50%;}.elementor-1115 .elementor-element.elementor-element-705291a{--width:50%;}}@media(max-width:767px){.elementor-1115 .elementor-element.elementor-element-aed8650{--margin-top:-220px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-1115 .elementor-element.elementor-element-305c5d5{margin:223px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-1115 .elementor-element.elementor-element-305c5d5 .elementor-heading-title{font-size:21px;}.elementor-1115 .elementor-element.elementor-element-fdde8b5{--container-widget-width:90%;--container-widget-flex-grow:0;width:var( --container-widget-width, 90% );max-width:90%;font-size:13px;line-height:2.8em;}.elementor-1115 .elementor-element.elementor-element-fdde8b5 p{margin-block-end:100px;}.elementor-1115 .elementor-element.elementor-element-49b8389{--margin-top:040px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-1115 .elementor-element.elementor-element-b2b231a{--gap:40px 0px;--row-gap:40px;--column-gap:0px;}.elementor-1115 .elementor-element.elementor-element-1db24b8 .elementor-image-box-img{margin-bottom:15px;}.elementor-1115 .elementor-element.elementor-element-da27304{padding:0px 0px 0px 0px;font-size:12px;line-height:2.8em;}.elementor-1115 .elementor-element.elementor-element-f937e0c{--margin-top:40px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-1115 .elementor-element.elementor-element-55bde21 .elementor-image-box-img{margin-bottom:15px;}.elementor-1115 .elementor-element.elementor-element-fd6762c{padding:0px 0px 0px 0px;font-size:12px;line-height:2.8em;}.elementor-1115 .elementor-element.elementor-element-0025d29{--margin-top:40px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1115 .elementor-element.elementor-element-205bcf9 .elementor-image-box-img{margin-bottom:15px;}.elementor-1115 .elementor-element.elementor-element-934199c{padding:0px 0px 0px 0px;font-size:12px;line-height:2.8em;}.elementor-1115 .elementor-element.elementor-element-f3b7452{--margin-top:40px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}}/* Start custom CSS for button, class: .elementor-element-3d64aa1 *//* --- تأثير الزر الذهبي السائل والمدار --- */ /* 1. تهيئة الزرار الأساسي وإلغاء الستايل القديم */ .elementor-1115 .elementor-element.elementor-element-3d64aa1 .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-1115 .elementor-element.elementor-element-3d64aa1 .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: ''; initial-value: 0deg; inherits: false; } @keyframes rotateOrbit { to { --angle: 360deg; } } /* 3. طبقة الذهب السائل الداخلية (The Liquid Gold) */ /* بنستخدم الـ span اللي جوه الزرار عشان نحط عليه الخلفية السائلة */ .elementor-1115 .elementor-element.elementor-element-3d64aa1 .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-1115 .elementor-element.elementor-element-3d64aa1 .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-02747e9 *//* --- تأثير الزر الذهبي السائل والمدار --- */ /* 1. تهيئة الزرار الأساسي وإلغاء الستايل القديم */ .elementor-1115 .elementor-element.elementor-element-02747e9 .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-1115 .elementor-element.elementor-element-02747e9 .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: ''; initial-value: 0deg; inherits: false; } @keyframes rotateOrbit { to { --angle: 360deg; } } /* 3. طبقة الذهب السائل الداخلية (The Liquid Gold) */ /* بنستخدم الـ span اللي جوه الزرار عشان نحط عليه الخلفية السائلة */ .elementor-1115 .elementor-element.elementor-element-02747e9 .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-1115 .elementor-element.elementor-element-02747e9 .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-49459d9 *//* --- تأثير الزر الذهبي السائل والمدار --- */ /* 1. تهيئة الزرار الأساسي وإلغاء الستايل القديم */ .elementor-1115 .elementor-element.elementor-element-49459d9 .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-1115 .elementor-element.elementor-element-49459d9 .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: ''; initial-value: 0deg; inherits: false; } @keyframes rotateOrbit { to { --angle: 360deg; } } /* 3. طبقة الذهب السائل الداخلية (The Liquid Gold) */ /* بنستخدم الـ span اللي جوه الزرار عشان نحط عليه الخلفية السائلة */ .elementor-1115 .elementor-element.elementor-element-49459d9 .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-1115 .elementor-element.elementor-element-49459d9 .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-8c425d4 *//* --- تأثير الزر الذهبي السائل والمدار --- */ /* 1. تهيئة الزرار الأساسي وإلغاء الستايل القديم */ .elementor-1115 .elementor-element.elementor-element-8c425d4 .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-1115 .elementor-element.elementor-element-8c425d4 .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: ''; initial-value: 0deg; inherits: false; } @keyframes rotateOrbit { to { --angle: 360deg; } } /* 3. طبقة الذهب السائل الداخلية (The Liquid Gold) */ /* بنستخدم الـ span اللي جوه الزرار عشان نحط عليه الخلفية السائلة */ .elementor-1115 .elementor-element.elementor-element-8c425d4 .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-1115 .elementor-element.elementor-element-8c425d4 .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-b2b231a *//* 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 container, class: .elementor-element-49b8389 *//* ========================================= ⚙️ كروت الخدمات: الميكانيكا الذهبية ========================================= */ /* 1. تصميم الكرت الأساسي (الوضع الصامت) */ .ae-service-card { background: linear-gradient(145deg, #111, #0a0a0a); /* خلفية معدنية غامقة */ border: 1px solid rgba(255, 255, 255, 0.05); /* حدود خفيفة جداً */ padding: 40px 25px; border-radius: 8px; position: relative; overflow: hidden; /* عشان تأثيرات الإضاءة متخرجش بره */ transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1); z-index: 1; } /* 2. تأثير "رسم" الحدود الذهبية عند الهوفر */ .ae-service-card::before, .ae-service-card::after { content: ''; position: absolute; width: 0; height: 2px; background: var(--ae-gold); transition: width 0.4s ease; z-index: 2; } .ae-service-card::before { top: 0; left: 0; } /* خط علوي من الشمال */ .ae-service-card::after { bottom: 0; right: 0; } /* خط سفلي من اليمين */ /* الخطوط الجانبية (بنستخدم عناصر وهمية تانية) */ .ae-service-card > .elementor-widget-wrap::before, .ae-service-card > .elementor-widget-wrap::after { content: ''; position: absolute; width: 2px; height: 0; background: var(--ae-gold); transition: height 0.4s ease; transition-delay: 0.2s; /* يتأخر شوية عشان يعمل حركة دوران */ z-index: 2; } .ae-service-card > .elementor-widget-wrap::before { top: 0; right: 0; } /* خط أيمن نازل */ .ae-service-card > .elementor-widget-wrap::after { bottom: 0; left: 0; } /* خط أيسر طالع */ /* 3. حالة الهوفر (لما الماوس ييجي) */ .ae-service-card:hover { transform: translateY(-10px); /* يطير لفوق */ box-shadow: 0 10px 30px rgba(0,0,0,0.5); /* ضل تقيل */ border-color: transparent; /* نخفي الحدود القديمة */ } /* تشغيل رسم الحدود الذهبية */ .ae-service-card:hover::before, .ae-service-card:hover::after { width: 100%; } .ae-service-card:hover > .elementor-widget-wrap::before, .ae-service-card:hover > .elementor-widget-wrap::after { height: 100%; } /* 4. الأيقونة (Icon Box) */ .ae-service-card .elementor-icon { color: #555; /* لونها رمادي وهي طافية */ transition: all 0.5s ease; } .ae-service-card:hover .elementor-icon { color: var(--ae-gold); /* تنور ذهبي */ transform: scale(1.1) rotateY(180deg); /* تكبر وتلف */ text-shadow: 0 0 15px rgba(212, 175, 55, 0.6); } /* 5. النصوص (العنوان والوصف) */ .ae-service-card h3, .ae-service-card p { transition: transform 0.5s ease; } .ae-service-card:hover h3 { color: #fff; transform: translateY(-5px); } /* 6. الزرار (يظهر بس عند الهوفر) */ .ae-service-card .elementor-button { opacity: 0; transform: translateY(20px); transition: all 0.4s ease; } .ae-service-card:hover .elementor-button { opacity: 1; transform: translateY(0); }/* End custom CSS */ /* Start custom CSS for shortcode, class: .elementor-element-16eee79 *//* ========================================= 🕌 تعديلات 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,'); 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-f3b7452 *//* 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 */ /* Start custom CSS *//* 1. تعريف الكارت التكتيكي */ .intel-unit { position: relative; background: linear-gradient(180deg, rgba(20,20,20,0.6) 0%, rgba(5,5,5,0.9) 100%); backdrop-filter: blur(10px); /* تأثير الزجاج */ transition: transform 0.4s ease, box-shadow 0.4s ease; overflow: hidden; /* لإخفاء شعاع المسح */ z-index: 1; } /* 2. رسم الزوايا الذهبية (Tactical Corners) */ /* الزاوية العليا اليسرى والسفلى اليمنى */ .intel-unit::before { content: ''; position: absolute; top: 0; left: 0; width: 30px; height: 30px; border-top: 2px solid #d4af37; border-left: 2px solid #d4af37; transition: all 0.4s ease; z-index: 2; } .intel-unit::after { content: ''; position: absolute; bottom: 0; right: 0; width: 30px; height: 30px; border-bottom: 2px solid #d4af37; border-right: 2px solid #d4af37; transition: all 0.4s ease; z-index: 2; } /* 3. تأثير الهوفر (التوسع واللمعان) */ .intel-unit:hover { transform: translateY(-10px); box-shadow: 0 15px 40px rgba(0,0,0,0.8); } /* الزوايا تكبر عند الهوفر وتغطي الكارت */ .intel-unit:hover::before, .intel-unit:hover::after { width: 100%; height: 100%; opacity: 0.1; /* تصبح خلفية ذهبية خفيفة جداً */ background: #d4af37; border: none; } /* 4. شعاع المسح الضوئي (Scanning Beam) */ .scan-line { position: absolute; top: 0; left: 0; width: 100%; height: 5px; background: linear-gradient(90deg, transparent, #d4af37, transparent); opacity: 0; z-index: 3; pointer-events: none; } .intel-unit:hover .scan-line { animation: scan-down 1.5s linear infinite; opacity: 0.8; } @keyframes scan-down { 0% { top: -10%; } 100% { top: 110%; } }/* End custom CSS */