.elementor-12 .elementor-element.elementor-element-ccba813{--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;--align-items:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--overlay-opacity:0.5;}.elementor-12 .elementor-element.elementor-element-ccba813::before, .elementor-12 .elementor-element.elementor-element-ccba813 > .elementor-background-video-container::before, .elementor-12 .elementor-element.elementor-element-ccba813 > .e-con-inner > .elementor-background-video-container::before, .elementor-12 .elementor-element.elementor-element-ccba813 > .elementor-background-slideshow::before, .elementor-12 .elementor-element.elementor-element-ccba813 > .e-con-inner > .elementor-background-slideshow::before, .elementor-12 .elementor-element.elementor-element-ccba813 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{--background-overlay:'';}.elementor-12 .elementor-element.elementor-element-2d78afa{--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-12 .elementor-element.elementor-element-b1f2d3d{--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-12 .elementor-element.elementor-element-2d78afa{--width:33.3333%;}.elementor-12 .elementor-element.elementor-element-b1f2d3d{--width:66.6666%;}}/* Start custom CSS for container, class: .elementor-element-ccba813 */<style>
  /* 1. تثبيت الهيدر في مكانه من البداية */
  .radix-sticky-header {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999 !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    background: transparent !important; /* يبدأ شفاف */
    padding: 15px 0 !important;
  }

  /* 2. شكل الهيدر "الزجاجي" عند النزول (يتم تفعيله بالجافا سكريبت) */
  .radix-sticky-header.scrolled {
    background: rgba(0, 18, 41, 0.8) !important; /* كحلي شفاف */
    backdrop-filter: blur(12px) !important; /* تغبيش زجاجي */
    -webkit-backdrop-filter: blur(12px) !important;
    padding: 8px 0 !important; /* تصغير الارتفاع (اللمّ) */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
    border-bottom: 1px solid rgba(0, 212, 255, 0.2) !important;
  }

  /* تصغير اللوجو سنة وأنت نازل */
  .radix-sticky-header.scrolled .elementor-widget-image img,
  .radix-sticky-header.scrolled svg {
    transform: scale(0.9);
  }
</style>

<script>
  // 3. كود الجافا سكريبت لمراقبة السكرول
  window.addEventListener('scroll', function() {
    const header = document.querySelector('.radix-sticky-header');
    if (window.scrollY > 50) { // لو نزل أكتر من 50 بكسل
      header.classList.add('scrolled');
    } else {
      header.classList.remove('scrolled');
    }
  });
</script>/* End custom CSS */