.elementor-kit-8{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-8 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1500px;}.e-con{--container-max-width:1500px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* Interactive Scroll Effect */
/* Smoke overlay container */
body{
    background: #222 !important;
}

.page-template-default #header.ct-header{
    background-color: #222222d6 !important;
}

/* شفافية الهيدر */
/* اجعل الهيدر شفاف بالكامل */
/* 1. اجعل الهيدر نفسه شفاف */
/* 1. اجعل الهيدر نفسه شفاف */
#header.ct-header {
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

/* 4. إزالة أي خلفيات على أي عنصر داخل الهيدر */
#header.ct-header * {
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
}
#header {
  position: absolute;
  z-index: 50;
}



.elementor-33 .elementor-element.elementor-element-dd35924{
    
    min-height: auto !important;
}


/* Typing Animation Wrapper */
.typing-typed {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 1px;
}

.typing-caret {
  display: inline-block;
  width: 3px;
  height: 1.05em;
  margin-left: 6px;
  background: rgba(255,255,255,0.9);
  animation: caretBlink .7s infinite;
}

@keyframes caretBlink {
  0% {opacity:1;}
  50% {opacity:0;}
  100% {opacity:1;}
}




/* --------- Shine wrapper & effect --------- */
/* ====== الإطار الأساسي ====== */
.shine-mirror {
  position: relative;
  display: inline-block;
  overflow: visible;
}

/* ====== الصورة ====== */
.shine-mirror img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  position: relative;
  z-index: 2;
}

/* ====== Shine (اللمعة) ====== */
.shine-mirror::before {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
      120deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,0.45) 50%,
      rgba(255,255,255,0) 100%
  );
  transform: skewX(-25deg);
  transition: 0.7s ease;
  z-index: 3;
  pointer-events: none;
}

/* عند الـ hover اللمعة تعدي */
.shine-mirror:hover::before {
  left: 130%;
}

/* ====== الانعكاس (mirror reflection) ====== */
.shine-mirror::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 45%;
  background-image: inherit;
  background-size: cover;
  background-position: bottom;
  transform: scaleY(-1);
  opacity: 0.25;
  filter: blur(5px);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0.6), transparent);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.6), transparent);
  z-index: 1;
}




/* --- Fold / Unfold Animation --- */
/* --- Multi-stage cinematic reveal animation --- */
.reveal-stage {
  opacity: 0;
  filter: blur(20px);
  transform: scale(1.15);
  transition: opacity 0.8s ease-out,
              transform 1.2s cubic-bezier(0.22, 1, 0.36, 1),
              filter 1s ease-out;
  position: relative;
  overflow: hidden;
}

/* Stage overlay layers */
.reveal-stage::before,
.reveal-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  transform: translateX(-100%);
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 2;
}

.reveal-stage::after {
  background: #eee;
  transform: translateX(100%);
  transition-delay: 0.15s;
}

/* When visible */
.reveal-stage.visible {
  opacity: 1;
  filter: blur(0);
  transform: scale(1);
}

.reveal-stage.visible::before {
  transform: translateX(100%);
}

.reveal-stage.visible::after {
  transform: translateX(-100%);
}



/* --- Slide & Skew Reveal --- */
.dynamic-reveal {
  opacity: 0;
  transform: scale(1.2) skewY(8deg);
  transform-origin: center top;
  transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 1s ease-out;
  will-change: transform, opacity;
}

/* When visible */
.dynamic-reveal.visible {
  opacity: 1;
  transform: scale(1) skewY(0deg);
}




/* تأثير نيون قوي */
.neon-text {
  color: #fff !important;
  text-shadow:
    0 0 3px rgba(255,255,255,0.9),
    0 0 6px rgba(0, 176, 255,0.9),
    0 0 12px rgba(0, 176, 255,0.9),
    0 0 20px rgba(0, 176, 255,0.8),
    0 0 35px rgba(0, 176, 255,0.7),
    0 0 55px rgba(0, 176, 255,0.6);
}

/* نيون أثناء الكتابة */
.typing-typed {
  text-shadow:
    0 0 3px rgba(255,255,255,1),
    0 0 8px rgba(0, 176, 255,1),
    0 0 15px rgba(0, 176, 255,0.9) !important;
}




/* ✅ غطاء التحميل */
#loader-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000; /* خلفية سوداء */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 99999;
}

/* ✅ GIF */
#loader {
    width: auto;
    height: auto;
}


.about-section {
    padding: 100px 0;
    background: #222;
  }

  .container {
    width: 65%;
    margin: 0 auto;
  }

  .about-content {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 60px;
  }

  .about-image {
    flex: 1 1 45%;
    position: relative;
  }

  .image-wrapper {
    position: relative;
    width: 100%;
  }

  .main-img {
    width: 100%;
    border-radius: 12px;
    display: block;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
  }

  /* الصور الصغيرة المتحركة */
  .floating-img {
    position: absolute;
    width: 120px;
    animation: floatAnim 8s ease-in-out infinite alternate;
  }

  .floating-left {
    top: -40px;
    left: -40px;
  }

  .floating-right {
    bottom: -40px;
    right: -40px;
    animation-delay: 4s;
  }

  /* حركة أوضح وأعرض */
  @keyframes floatAnim {
    0% {
      transform: translate(0, 0) scale(1);
      opacity: 1;
    }
    25% {
      transform: translate(-25px, -15px) scale(1.03);
    }
    50% {
      transform: translate(25px, 20px) scale(1.05);
    }
    75% {
      transform: translate(-20px, 25px) scale(1.02);
    }
    100% {
      transform: translate(30px, -20px) scale(1.06);
      opacity: 0.95;
    }
  }

  .about-text {
    flex: 1 1 45%;
  }

  .section-subtitle {
    color: #29abe1;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 10px;
    letter-spacing: 1px;
  }

  .section-title {
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 20px;
    color: #222;
    line-height: 1.3;
  }

  .about-text p {
    color: #555;
    line-height: 1.7;
    margin-bottom: 30px;
  }

  .about-buttons {
    display: flex;
    gap: 15px;
  }

  .btn-primary {
    background: #5508ae;
    color: #fff;
    padding: 12px 28px;
    border-radius: 6px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
  }

  .btn-primary:hover {
    background: #5508ae;
    color: #FFF;
  }

  .btn-outline {
    border: 2px solid #5508ae;
    color: #fff;
    padding: 10px 26px;
    border-radius: 6px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
  }

  .btn-outline:hover {
    background: #5508ae;
    color: #fff;
  }

  @media (max-width: 992px) {
    .about-content {
      flex-direction: column;
    }

    .about-text,
    .about-image {
      flex: 1 1 100%;
    }

    .floating-img {
      width: 80px;
    }
  }

.image-wrapper::before{
  content: '';
  position: absolute;
  top: 0;
  left: 27%;
  width: 22%;
  height: 100%;
  background: linear-gradient(120deg , rgba(255,255,255,0) 0%,rgba(255,255,255,0.4) 50%,
  rgba(255,255,255,0) 100%,);
  transform: skewX(-25deg);
  transition: all 0.7s ease;
  opacity: 0;
  pointer-events: none;
}

.image-wrapper:hover::before{
  animation: shineFromCenter 1.8s ease-in-out forwards; 
}

  @keyframes shineFromCenter {
    0% {
      left: 27%;
      opacity: 0.1;
    }
    25% {
      left: 30%;
      opacity: 1;
    }
    50% {
      left: 50%;
      opacity: 0.8;
    }
    75% {
      left: 25%;
      opacity: 1;
    }
    100% {
      left: 50%;
      opacity: 0;
    }
  }



/* ✨ تأثير الضوء على النص (كما هو سابقاً) */
.shine-text {
  position: relative;
  display: inline-block;
  color: #fff;
  overflow: hidden;
}

.shine-text::before {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.6) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-25deg);
  transition: all 0.7s ease;
}

.shine-text:hover::before {
  left: 125%;
}

/* 🌈 تدرج الألوان في الـ span */
.gradient-text {
  background: linear-gradient(90deg, #29abe1, #9d4edd, #c77dff);
  background-size: 200%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  font-weight: 700;
  transition: background-position 1s ease;
}

/* عند hover يتحرك التدرج في الاتجاه العكسي */
.gradient-text:hover {
  background-position: 100% 0;
  animation: gradientReverse 1s ease forwards;
}

/* حركة عكس التدرج */
@keyframes gradientReverse {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* عند الـ hover */
.btn-primary:hover {
  background: #5508ae;
  transform: translateY(-2px);
}

/* السهم */
.btn-icon {
  display: inline-block;
  font-size: 1.2em;
  transform: rotate(-30deg) translateX(4px);
  transition: all 0.4s ease;
}

/* عند hover يرجع لوضعه الطبيعي */
.btn-primary:hover .btn-icon {
  transform: rotate(0deg) translateX(0);
}

.main-img {
  opacity: 0;
  filter: blur(8px);
  transform: scale(1.05);
  transition: all 1.8s ease-out;
}

/* الكلاس اللي بيتفعل لما الصورة تدخل في الشاشة */
.animate-blurFadeIn {
  opacity: 1;
  filter: blur(0);
  transform: scale(1);
}


.about-us::before{
    content: '';
    display: block;
    position: absolute;
    right: -70px;
    top: 50%;
    background: url(http://localhost:10016/wp-content/uploads/2025/11/features-bg-shape.png) no-repeat;
    background-position: right center;
    background-size: contain;
    width: 285px;
    height: 285px;
	opacity: 50%;
	transform: translateY(-50%) rotate(-50deg);
    animation: roundrotate 10s infinite linear;
    animation-direction: alternate;
    z-index: 0;
}
@keyframes roundrotate{
	from{
		transform: translate(0, -50%) rotate(0deg);
	}
	to{
		transform: translate(0, 50%) rotate(360deg);
	}
}


.img-youtube{
    animation: spin 8s linear infinite;
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}





/* ✨ خلفية الصورة */
.video-section {
  position: relative;
  height: 500px;
  background: url('https://expert-themes.com/wp/vitors/wp-content/uploads/2024/12/video-two-bg.jpg?auto=format&fit=crop&w=1600&q=80') center/cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* طبقة التظليل */
.video-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* حاوية الدائرة */
.video-circle-wrapper {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 🌟 الخلفية الزجاجية الشفافة تحت النص */
.text-glow-bg {
  position: absolute;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  z-index: 0;
  transition: 0.5s ease;
}

/* النص الدائري */
.rotating-text {
  position: absolute;
  animation: rotateText 12s linear infinite;
  color: #ffffff;
  font-family: "Poppins", sans-serif;
  text-transform: uppercase;
  letter-spacing: 3px;
  z-index: 1;
}

@keyframes rotateText {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* أيقونة التشغيل */
.play-icon {
  position: relative;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background-color: #5508ae;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: 0.4s ease;
  text-decoration: none;
  z-index: 2;
}

/* المثلث */
.triangle {
  width: 0;
  height: 0;
  border-left: 18px solid white;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  margin-left: 4px;
  z-index: 2;
  transition: 0.4s ease;
}

/* دائرة النبض */
.pulse-circle {
  position: absolute;
  width: 120px;
  height: 120px;
  border: 2px solid #5508ae;
  border-radius: 50%;
  animation: pulse 2s infinite;
  transition: 0.4s ease;
}

@keyframes pulse {
  0% { transform: scale(0.9); opacity: 0.7; }
  70% { transform: scale(1.2); opacity: 0; }
  100% { opacity: 0; }
}

/* hover effect */
.play-icon:hover {
  background-color: #00d1ff;
}
.play-icon:hover .pulse-circle {
  border-color: #00d1ff;
}
.play-icon:hover .triangle {
  border-left-color: #1e1e2f;
}

/* عند hover على الأيقونة زود لمعان الخلفية */
.play-icon:hover ~ .text-glow-bg {
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 0 0 40px rgba(255, 255, 255, 0.4);
}




.services-wrapper{
        display:flex;
        justify-content:center;
        align-items:center;
        height:100vh;
        gap:120px;
        padding:40px;
        position:relative;
    }

    /* ✅ دائرة الهوفر */
    .hover-circle{
        position:absolute;
        width:50px;
        height:50px;
        pointer-events:none;
        border-radius:50%;
        background:white;
        mix-blend-mode:difference;
        transform:scale(0);
        transition:0.25s ease;
        z-index:1;
    }

    .services-list{
        list-style:none;
        padding:0;
        margin:0;
        display:flex;
        flex-direction:column;
        gap:50px;
        z-index:3;
    }

    .services-list li{
        font-size:2rem;
        font-weight:600;
        color:#999;
        cursor:pointer;
        position:relative;
        transition:0.3s ease;
    }

    .services-list li.active{
        color:white;
        transform:translateX(10px);
    }

    .services-list .desc{
        font-size:0.8rem;
        color:#bbb;
        display:none;
        margin-top:8px;
        max-width:230px;
    }

    .preview-box{
        width:380px;
        height:500px;
        background:#1b1b1b;
        border-radius:22px;
        overflow:hidden;
        position:relative;
        z-index:2;
        box-shadow:0 0 40px rgba(255,255,255,0.05);
    }

    #scrollArea{
        height:100%;
        overflow:auto;
        scroll-behavior:smooth;
        padding-right:15px;
    }

    .scroll-item{
        text-align:center;
        padding:25px;
    }

    .scroll-item img{
        width:85%;
        border-radius:12px;
    }

    .scroll-item p{
        font-size:0.9rem;
        color:#ccc;
        margin-top:10px;
    }

    /* ✅ موبايل */
    @media(max-width:768px){

        .services-wrapper{
            flex-direction:column;
            gap:40px;
            height:auto;
            padding:30px;
        }

        .preview-box{
            width:90%;
            height:400px;
        }

        .services-list li{
            font-size:1.6rem;
            padding-right:36px; /* مساحة السهم */
            position:relative;
        }

        /* ✅ السهم */
        .mobile-toggle{
            position:absolute;
            right:5px;
            top:50%;
            transform:translateY(-50%) rotate(45deg);
            width:14px;
            height:14px;
            border-right:2px solid #aaa;
            border-bottom:2px solid #aaa;
            transition:0.25s ease;
            pointer-events:none;
            opacity:0.8;
        }

        /* ✅ السهم لما يفتح */
        .services-list li.active .mobile-toggle{
            transform:translateY(-50%) rotate(-135deg);
            border-color:white;
            opacity:1;
        }

        /* ✅ تأثير بسيط عند الضغط */
        .services-list li:active{
            opacity:0.7;
            transform:translateX(4px);
        }
    }/* End custom CSS */