.elementor-1058 .elementor-element.elementor-element-15b5b46e{--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:space-between;--align-items:center;--gap:60px 60px;--row-gap:60px;--column-gap:60px;--flex-wrap:nowrap;--overflow:hidden;--padding-top:30px;--padding-bottom:30px;--padding-left:20px;--padding-right:20px;}.elementor-1058 .elementor-element.elementor-element-7562bb9{--display:flex;--min-height:650px;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--padding-top:40px;--padding-bottom:40px;--padding-left:40px;--padding-right:40px;}.elementor-1058 .elementor-element.elementor-element-7562bb9:not(.elementor-motion-effects-element-type-background), .elementor-1058 .elementor-element.elementor-element-7562bb9 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#102844;}.elementor-1058 .elementor-element.elementor-element-c7731b3{--display:flex;}@media(min-width:768px){.elementor-1058 .elementor-element.elementor-element-7562bb9{--content-width:1180px;}}@media(max-width:1024px){.elementor-1058 .elementor-element.elementor-element-15b5b46e{--gap:20px 20px;--row-gap:20px;--column-gap:20px;--flex-wrap:wrap;}}@media(max-width:767px){.elementor-1058 .elementor-element.elementor-element-15b5b46e{--gap:40px 40px;--row-gap:40px;--column-gap:40px;--padding-top:60px;--padding-bottom:0px;--padding-left:20px;--padding-right:20px;}}/* Start custom CSS for html, class: .elementor-element-6c7a531 *//* إصلاح وضوح النص داخل قسم من نحن لو الخلفية غامقة */
.cm-two-col h2,
.cm-two-col .cm-section-label {
  color: #ffffff !important;
}

.cm-two-col p {
  color: rgba(255, 255, 255, 0.88) !important;
}

.cm-two-col .cm-about-card h3 {
  color: #102844 !important;
}

.cm-two-col .cm-about-card li {
  color: #26384d !important;
}

/* تحسين عام لو أي نص ظهر على خلفية غامقة */
.cm-about-page section[style*="background"],
.cm-about-page .cm-dark {
  color: #ffffff;
}

/* خلي قسم من نحن نفسه أوضح */
.cm-section:first-of-type {
  background: #102844 !important;
}

/* Project Motion Illustration */
.cm-project-motion {
  position: relative;
  width: min(460px, 100%);
  height: 430px;
  border-radius: 32px;
  overflow: hidden;
  background:
    radial-gradient(circle at 30% 20%, rgba(11,143,232,0.28), transparent 30%),
    linear-gradient(145deg, rgba(255,255,255,0.12), rgba(255,255,255,0.05));
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow: 0 30px 70px rgba(0,0,0,0.28);
  backdrop-filter: blur(14px);
}

.cm-motion-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 34px 34px;
  opacity: 0.8;
  animation: cmGridMove 12s linear infinite;
}

@keyframes cmGridMove {
  from { background-position: 0 0; }
  to { background-position: 68px 68px; }
}

.cm-building {
  position: absolute;
  right: 42px;
  bottom: 55px;
  width: 145px;
  height: 230px;
  border-radius: 18px 18px 8px 8px;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.22);
  padding: 22px 16px;
  box-shadow: inset 0 0 30px rgba(255,255,255,0.05);
}

.cm-roof {
  position: absolute;
  right: 18px;
  top: -18px;
  width: 110px;
  height: 28px;
  background: #0b8fe8;
  border-radius: 14px 14px 4px 4px;
}

.cm-floor {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
  margin-bottom: 18px;
}

.cm-floor span {
  display: block;
  height: 28px;
  border-radius: 8px;
  background: rgba(255,255,255,0.20);
  animation: cmWindow 2.6s infinite ease-in-out;
}

.cm-floor:nth-child(3) span:nth-child(2),
.cm-floor:nth-child(4) span:nth-child(1) {
  animation-delay: 0.8s;
}

@keyframes cmWindow {
  0%, 100% { background: rgba(255,255,255,0.18); }
  50% { background: rgba(11,143,232,0.78); }
}

.cm-engineer,
.cm-worker {
  position: absolute;
  bottom: 54px;
  width: 88px;
  height: 150px;
}

.cm-engineer {
  left: 62px;
}

.cm-worker {
  left: 165px;
  transform: scale(0.92);
}

.cm-head {
  position: absolute;
  top: 17px;
  left: 28px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #ffd6a5;
  z-index: 3;
}

.cm-helmet {
  position: absolute;
  top: 5px;
  left: 21px;
  width: 48px;
  height: 28px;
  border-radius: 26px 26px 8px 8px;
  background: #ffc400;
  z-index: 4;
  animation: cmHelmet 2s infinite ease-in-out;
}

@keyframes cmHelmet {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

.cm-body {
  position: absolute;
  top: 58px;
  left: 24px;
  width: 42px;
  height: 62px;
  border-radius: 16px 16px 10px 10px;
  background: #0b8fe8;
}

.cm-worker .cm-body {
  background: #24c66b;
}

.cm-arm {
  position: absolute;
  top: 67px;
  left: 60px;
  width: 42px;
  height: 12px;
  border-radius: 999px;
  background: #ffd6a5;
  transform-origin: left center;
  animation: cmArmMove 1.5s infinite ease-in-out;
}

@keyframes cmArmMove {
  0%, 100% { transform: rotate(12deg); }
  50% { transform: rotate(-12deg); }
}

.cm-tablet {
  position: absolute;
  top: 75px;
  left: 91px;
  width: 30px;
  height: 38px;
  border-radius: 8px;
  background: #07111f;
  border: 2px solid rgba(255,255,255,0.45);
  animation: cmTabletGlow 1.8s infinite ease-in-out;
}

@keyframes cmTabletGlow {
  0%, 100% { box-shadow: 0 0 0 rgba(11,143,232,0); }
  50% { box-shadow: 0 0 18px rgba(11,143,232,0.9); }
}

.cm-tool {
  position: absolute;
  top: 70px;
  left: 62px;
  width: 55px;
  height: 8px;
  border-radius: 999px;
  background: #dbe7f0;
  transform-origin: left center;
  animation: cmToolMove 1.1s infinite ease-in-out;
}

@keyframes cmToolMove {
  0%, 100% { transform: rotate(18deg); }
  50% { transform: rotate(-18deg); }
}

.cm-leg {
  position: absolute;
  top: 116px;
  width: 14px;
  height: 38px;
  border-radius: 999px;
  background: #1f334a;
}

.cm-leg.one {
  left: 31px;
  transform: rotate(8deg);
}

.cm-leg.two {
  left: 51px;
  transform: rotate(-8deg);
}

.cm-flow-line {
  position: absolute;
  height: 2px;
  background: linear-gradient(90deg, transparent, #0b8fe8, transparent);
  opacity: 0.9;
  animation: cmFlow 2.4s infinite linear;
}

.line-one {
  right: 185px;
  top: 150px;
  width: 180px;
}

.line-two {
  right: 180px;
  top: 220px;
  width: 210px;
  animation-delay: 0.5s;
}

.line-three {
  right: 120px;
  top: 300px;
  width: 230px;
  animation-delay: 1s;
}

@keyframes cmFlow {
  0% { transform: translateX(40px); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: translateX(-40px); opacity: 0; }
}

.cm-data-dot {
  position: absolute;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #24c66b;
  box-shadow: 0 0 18px rgba(36,198,107,0.9);
  animation: cmPulse 1.4s infinite ease-in-out;
}

.dot-one {
  top: 145px;
  right: 205px;
}

.dot-two {
  top: 216px;
  right: 245px;
  animation-delay: 0.4s;
}

.dot-three {
  top: 296px;
  right: 180px;
  animation-delay: 0.8s;
}

@keyframes cmPulse {
  0%, 100% { transform: scale(1); opacity: 0.7; }
  50% { transform: scale(1.6); opacity: 1; }
}

.cm-motion-card {
  position: absolute;
  min-width: 118px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255,255,255,0.13);
  border: 1px solid rgba(255,255,255,0.16);
  color: #fff;
  animation: cmCardFloat 3s infinite ease-in-out;
}

.cm-motion-card strong {
  display: block;
  color: #fff !important;
  font-size: 15px;
  margin-bottom: 3px;
}

.cm-motion-card span {
  color: rgba(255,255,255,0.75) !important;
  font-size: 12px;
}

.card-one {
  top: 34px;
  right: 34px;
}

.card-two {
  top: 48px;
  left: 36px;
  animation-delay: 0.7s;
}

.card-three {
  bottom: 28px;
  left: 42px;
  animation-delay: 1.2s;
}

@keyframes cmCardFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}

@media (max-width: 640px) {
  .cm-project-motion {
    height: 390px;
  }

  .cm-building {
    right: 28px;
    width: 130px;
  }

  .cm-engineer {
    left: 38px;
  }

  .cm-worker {
    left: 130px;
  }

  .cm-motion-card {
    transform: scale(0.9);
  }
}/* End custom CSS */