.elementor-7429 .elementor-element.elementor-element-56b28d1{--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;--margin-top:-40px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-7429 .elementor-element.elementor-element-f39c261{--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-7429 .elementor-element.elementor-element-7239124{--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-7429 .elementor-element.elementor-element-7239124:not(.elementor-motion-effects-element-type-background), .elementor-7429 .elementor-element.elementor-element-7239124 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-7429 .elementor-element.elementor-element-5198ad9{--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-7429 .elementor-element.elementor-element-5198ad9:not(.elementor-motion-effects-element-type-background), .elementor-7429 .elementor-element.elementor-element-5198ad9 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-7429 .elementor-element.elementor-element-a9bf4b0{--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-7429 .elementor-element.elementor-element-55931cb{--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-7429 .elementor-element.elementor-element-70906a1{--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-7429 .elementor-element.elementor-element-4b5668ea{--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;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-7429 .elementor-element.elementor-element-4b5668ea:not(.elementor-motion-effects-element-type-background), .elementor-7429 .elementor-element.elementor-element-4b5668ea > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-7429 .elementor-element.elementor-element-66786d1f{--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-7429 .elementor-element.elementor-element-62881fbd{--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-7429 .elementor-element.elementor-element-86e7b31{--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-7429 .elementor-element.elementor-element-86e7b31:not(.elementor-motion-effects-element-type-background), .elementor-7429 .elementor-element.elementor-element-86e7b31 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-7429 .elementor-element.elementor-element-348ef76{--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-7429 .elementor-element.elementor-element-348ef76:not(.elementor-motion-effects-element-type-background), .elementor-7429 .elementor-element.elementor-element-348ef76 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-7429 .elementor-element.elementor-element-6e6bab3{--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-7429 .elementor-element.elementor-element-6e6bab3:not(.elementor-motion-effects-element-type-background), .elementor-7429 .elementor-element.elementor-element-6e6bab3 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-7429 .elementor-element.elementor-element-900d99b{--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-7429 .elementor-element.elementor-element-900d99b:not(.elementor-motion-effects-element-type-background), .elementor-7429 .elementor-element.elementor-element-900d99b > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-7429 .elementor-element.elementor-element-4f5cdd0{--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-7429 .elementor-element.elementor-element-4f5cdd0:not(.elementor-motion-effects-element-type-background), .elementor-7429 .elementor-element.elementor-element-4f5cdd0 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-7429 .elementor-element.elementor-element-bec8136 .uc_logo_marquee_holder{height:200px;border-style:solid;border-width:1px 1px 1px 1px;border-color:#d7d7d7;}.elementor-7429 .elementor-element.elementor-element-bec8136 .ue_img_marquee{display:inline-block;}.elementor-7429 .elementor-element.elementor-element-bec8136 img{object-fit:contain;object-position:center;}.elementor-7429 .elementor-element.elementor-element-bec8136 .ue_marquee_title{text-align:center;}.elementor-7429 .elementor-element.elementor-element-bec8136 .ue-item-badge{min-height:0px;min-width:0px;color:#ffffff;background-color:#3E3FF0;border-radius:3px;}.elementor-7429 .elementor-element.elementor-element-51d4b83 .uc_logo_marquee_holder{height:200px;padding:20px 20px 20px 20px;border-style:solid;border-width:1px 1px 1px 1px;border-color:#d7d7d7;}.elementor-7429 .elementor-element.elementor-element-51d4b83 .ue_img_marquee{display:inline-block;}.elementor-7429 .elementor-element.elementor-element-51d4b83 img{object-fit:contain;object-position:center;}.elementor-7429 .elementor-element.elementor-element-51d4b83 .ue_marquee_title{text-align:center;}.elementor-7429 .elementor-element.elementor-element-51d4b83 .ue-item-badge{min-height:0px;min-width:0px;color:#ffffff;background-color:#3E3FF0;padding:10px 10px 10px 10px;border-radius:3px;}.elementor-7429 .elementor-element.elementor-element-a15b053{--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;--padding-top:0px;--padding-bottom:30px;--padding-left:0px;--padding-right:0px;}.elementor-7429 .elementor-element.elementor-element-a15b053:not(.elementor-motion-effects-element-type-background), .elementor-7429 .elementor-element.elementor-element-a15b053 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-7429 .elementor-element.elementor-element-58ffee0{--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;}body.elementor-page-7429:not(.elementor-motion-effects-element-type-background), body.elementor-page-7429 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#ffffff;}@media(min-width:769px){.elementor-7429 .elementor-element.elementor-element-4b5668ea{--content-width:1600px;}.elementor-7429 .elementor-element.elementor-element-66786d1f{--width:50%;}.elementor-7429 .elementor-element.elementor-element-62881fbd{--width:50%;}}/* Start custom CSS for html, class: .elementor-element-8184033 *//* ألوان لو مش متعرفة قبل كده */
:root{
  --primary:#003CA6;
  --secondary:#9EC7EB;
  --text:#0B1220;
  --muted:#5f6b7a;
}

/* سكشن بوكسد */
.ev-scroll-portfolio{
  padding:48px 16px 56px;
  background:transparent;
}
.evsp-inner{
  max-width:1200px;
  margin:0 auto;
}

/* عنوان صغير فوق */
.evsp-header{
  text-align:center;
  margin-bottom:24px;
}
.evsp-title{
  margin:0 0 6px;
  font-weight:900;
  font-size:clamp(22px,3vw,32px);
  color:var(--text);
}
.evsp-sub{
  margin:0;
  font-size:15px;
  color:var(--muted);
}

/* المسرح: 3 أعمدة (يسار – بوكس – يمين) */
.evsp-row{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(260px,340px) minmax(0,1.1fr);
  gap:24px;
  align-items:center;
}

/* الأعمدة الجانبية */
.evsp-col{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:16px;
}

/* شكل كل شوت */
.evsp-shot{
  position:relative;
  border-radius:22px;
  overflow:hidden;
  background:#020617;
  box-shadow:0 22px 50px rgba(15,23,42,.75);
}
.evsp-shot img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  aspect-ratio:16 / 9;
}

/* شوية اختلاف في مكان الصور عشان تطلع stagger لطيف */
.evsp-left .l2{ margin-inline-start:30px; }
.evsp-left .l3{ margin-inline-start:60px; }

.evsp-right .r2{ margin-inline-end:30px; }
.evsp-right .r3{ margin-inline-end:60px; }

/* بوكس البرتفوليو في النص */
.evsp-center{
  position:relative;
}
.evsp-card{
  position:relative;
  padding:22px 20px 24px;
  border-radius:20px;
  background:
    radial-gradient(520px 260px at 10% 0%, rgba(158,199,235,.25), transparent 60%),
    radial-gradient(520px 260px at 100% 100%, rgba(0,60,166,.45), transparent 55%),
    rgba(15,23,42,.96);
  color:#e5edff;
  box-shadow:0 24px 52px rgba(15,23,42,.9);
  overflow:hidden;
}

/* محتوى الكارد */
.evsp-chip{
  display:inline-block;
  padding:3px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#e5edff;
  border:1px solid rgba(148,163,184,.7);
  background:rgba(15,23,42,.7);
  margin-bottom:6px;
}
.evsp-card-title{
  margin:0 0 6px;
  font-size:clamp(16px,2vw,20px);
  font-weight:900;
}
.evsp-card-text{
  margin:0 0 14px;
  font-size:14px;
  line-height:1.9;
  color:#cbd5f5;
}
.evsp-card-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:9px 16px;
  border-radius:999px;
  font-size:14px;
  font-weight:900;
  color:#ffffff;
  text-decoration:none;
  background:linear-gradient(135deg,var(--primary),var(--secondary));
  box-shadow:0 12px 26px rgba(15,23,42,.7);
  position:relative;
  overflow:hidden;
}
.evsp-card-arrow{
  display:inline-block;
  transform:translateY(1px);
}

/* جلو على الزر */
.evsp-card-btn::after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(120px 120px at var(--x,50%) var(--y,50%), rgba(255,255,255,.18), transparent 70%);
  opacity:0;
  transition:opacity .25s ease;
}
.evsp-card-btn:hover::after{
  opacity:1;
}

/* ========================= */
/*  1) حركة الاسكرول (CSS)  */
/* ========================= */

/* مبني على فكرتك:
   animation-timeline: view(60%);
   بس مهديينها وسموزى */

.autoshow-left,
.autoshow-right,
.autoshow-center{
  animation-duration:1s;                 /* الطول هنا مش مهم مع view timeline بس لازم يكون موجود */
  animation-fill-mode:both;
  animation-timing-function:linear;
  animation-timeline:view(60%);
}

/* صور الشمال بتفتح لبرا وتتبخر */
.autoshow-left{
  animation-name:autoshow_left;
}
@keyframes autoshow_left{
  from{
    transform:translate(0, 0) rotate(-4deg);
    opacity:1;
  }
  to{
    transform:translate(-55vw, 8vh) rotate(-16deg);
    opacity:.0;
  }
}

/* صور اليمين – عكسها */
.autoshow-right{
  animation-name:autoshow_right;
}
@keyframes autoshow_right{
  from{
    transform:translate(0, 0) rotate(4deg);
    opacity:1;
  }
  to{
    transform:translate(55vw, 8vh) rotate(16deg);
    opacity:.0;
  }
}

/* بوكس النص في النص – يكبر ويظهر */
.autoshow-center{
  animation-name:autoshow_center;
}
@keyframes autoshow_center{
  from{
    opacity:0;
    transform:translateY(32px) scale(.85);
  }
  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

/* شوية stagger بسيط */
.evsp-left .l2{ animation-delay:.03s; }
.evsp-left .l3{ animation-delay:.06s; }
.evsp-right .r2{ animation-delay:.03s; }
.evsp-right .r3{ animation-delay:.06s; }

/* ========================= */
/*  2) موبايل – نخليها بسيطة */
/* ========================= */

@media (max-width:900px){
  .evsp-row{
    grid-template-columns:1fr;
    gap:16px;
  }

  .evsp-col{
    flex-direction:column;
  }

  .evsp-left .l2,
  .evsp-left .l3,
  .evsp-right .r2,
  .evsp-right .r3{
    margin-inline-start:0;
    margin-inline-end:0;
  }

  /* نلغي حركات الاسكرول على الموبايل عشان تبقى خفيفة */
  .autoshow-left,
  .autoshow-right,
  .autoshow-center{
    animation:none !important;
    opacity:1 !important;
    transform:none !important;
  }
}

@media (max-width:600px){
  .ev-scroll-portfolio{
    padding-bottom:40px;
  }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-359cb1e4 */.autoshow2{
    animation: autoshowanimation2 both;
    animation-timeline: view(60%);
}
@keyframes autoshowanimation2{
    from{
            translate: none;
    rotate: none;
    scale: none;
    transform: translate(0px, 0px);
        
    }
    to{
     translate: none;
    rotate: none;
    scale: none;
       translate: none; rotate: none; scale: none; transform: translate(800px, 100px) rotate(30deg);
    }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-acad706 */.autoshow2{
    animation: autoshowanimation2 both;
    animation-timeline: view(60%);
}
@keyframes autoshowanimation2{
    from{
            translate: none;
    rotate: none;
    scale: none;
    transform: translate(0px, 0px);
        
    }
    to{
     translate: none;
    rotate: none;
    scale: none;
       translate: none; rotate: none; scale: none; transform: translate(800px, 100px) rotate(30deg);
    }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-7ead351 */.autoshow2{
    animation: autoshowanimation2 both;
    animation-timeline: view(60%);
}
@keyframes autoshowanimation2{
    from{
            translate: none;
    rotate: none;
    scale: none;
    transform: translate(0px, 0px);
        
    }
    to{
     translate: none;
    rotate: none;
    scale: none;
       translate: none; rotate: none; scale: none; transform: translate(800px, 100px) rotate(30deg);
    }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5ab69376 */.autoshow{
    animation: autoshowanimation both;
    animation-timeline: view(60%);
}
@keyframes autoshowanimation{
    from{
            translate: none;
    rotate: none;
    scale: none;
    transform: translate(0px, 0px);
        
    }
    to{
     translate: none;
    rotate: none;
    scale: none;
       translate: none; rotate: none; scale: none; transform: translate(-800px, 100px) rotate(-30deg);
    }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6d84891 */.autoshow{
    animation: autoshowanimation both;
    animation-timeline: view(60%);
}
@keyframes autoshowanimation{
    from{
            translate: none;
    rotate: none;
    scale: none;
    transform: translate(0px, 0px);
        
    }
    to{
     translate: none;
    rotate: none;
    scale: none;
       translate: none; rotate: none; scale: none; transform: translate(-800px, 100px) rotate(-30deg);
    }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a1f700f */.autoshow{
    animation: autoshowanimation both;
    animation-timeline: view(60%);
}
@keyframes autoshowanimation{
    from{
            translate: none;
    rotate: none;
    scale: none;
    transform: translate(0px, 0px);
        
    }
    to{
     translate: none;
    rotate: none;
    scale: none;
       translate: none; rotate: none; scale: none; transform: translate(-800px, 100px) rotate(-30deg);
    }
}/* End custom CSS */