:root{
  --brand-1:#1d4ed8; /* blue */
  --brand-2:#6d28d9; /* violet */
  --brand-3:#0ea5e9; /* sky */
  --bg-theme-color2:#2188E8; /* requested services hover color */

  /* Skew button theme (site color) */
  --theme-color1:#74c7ff; /* light */
  --theme-color2:#2188E8; /* primary */
  --theme-color3:#ffffff; /* hover solid */
  --theme-color4:#0f172a; /* dark */
  --gradient-1: linear-gradient(to left, var(--theme-color1), var(--theme-color2));
}

/* Skew button (ported from Elementor CSS) */
.btn-style-one,
.site-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  isolation: isolate;
  padding: 14px 34px;
  border-radius: 12px;
  font-weight: 800;
  letter-spacing: .02em;
  color: #fff;
  background: var(--theme-color2);
  box-shadow: 0 18px 40px rgba(2, 6, 23, 0.18);
  overflow: hidden;
  text-decoration: none;
  user-select: none;
}
.btn-style-one.btn-style-skew,
.site-btn.site-btn--skew{
  -webkit-transform: skew(-12deg);
  transform: skew(-12deg);
  -webkit-transform-origin: top right;
  transform-origin: top right;
}
html[dir="rtl"] .btn-style-one.btn-style-skew,
html[dir="rtl"] .site-btn.site-btn--skew{
  -webkit-transform-origin: top left;
  transform-origin: top left;
}
.btn-style-one .btn-text,
.site-btn .btn-text{
  position: relative;
  z-index: 2;
}
.btn-style-one.btn-style-skew .btn-text,
.site-btn.site-btn--skew .btn-text{
  -webkit-transform: skew(12deg);
  transform: skew(12deg);
}
.site-btn,
button.site-btn{
  cursor: pointer;
  border: 0;
}
.site-btn:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 4px rgba(33, 136, 232, .25),
    0 18px 40px rgba(2, 6, 23, 0.18);
}
.site-btn.site-btn--sm{
  padding: 10px 16px;
  border-radius: 10px;
  font-size: 14px;
  box-shadow: 0 12px 28px rgba(2, 6, 23, 0.16);
}

/* Hover reveal layer */
.btn-style-one::before,
.site-btn::before{
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  content: "";
  z-index: 1;
  -webkit-transform: scale(0, 1);
  transform: scale(0, 1);
  -webkit-transform-origin: bottom left;
  transform-origin: bottom left;
  transition: transform 500ms cubic-bezier(0.86, 0, 0.07, 1);
}
.btn-style-one:hover::before,
.site-btn:hover::before{
  -webkit-transform-origin: top right;
  transform-origin: top right;
  -webkit-transform: scale(1, 1);
  transform: scale(1, 1);
}

/* Gradient hover variant (like your btn-style-two) */
.btn-style-one.btn-style-two::before,
.site-btn.site-btn--gradient::before{
  background: var(--gradient-1);
  -webkit-transform-origin: top right;
  transform-origin: top right;
}
.btn-style-one.btn-style-two:hover::before,
.site-btn.site-btn--gradient:hover::before{
  -webkit-transform-origin: bottom left;
  transform-origin: bottom left;
}

/* Optional dark hover variant */
.btn-style-one.hvr-dark::before,
.site-btn.site-btn--dark::before{
  background-color: var(--theme-color4);
}

/* About showcase: scroll reveal + image motion */
/* Default: visible (no-js safe). Hide only when JS is enabled. */
html.js .about-showcase [data-reveal]{
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  filter: blur(8px);
  transition:
    opacity 750ms cubic-bezier(.2,.9,.2,1),
    transform 750ms cubic-bezier(.2,.9,.2,1),
    filter 750ms cubic-bezier(.2,.9,.2,1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform, filter;
}
html.js .about-showcase [data-reveal="left"]{ transform: translate3d(-26px, 10px, 0); }
html.js .about-showcase [data-reveal="right"]{ transform: translate3d(26px, 10px, 0); }
html.js .about-showcase [data-reveal="up"]{ transform: translate3d(0, 18px, 0); }
html.js .about-showcase [data-reveal].is-visible{
  opacity: 1;
  transform: translate3d(0,0,0);
  filter: blur(0);
}

.about-showcase__media{
  position: relative;
  overflow: hidden;
}
html.js .about-showcase__media img{
  /* softer zoom-in */
  transform: scale(1.035);
  transition: transform 1200ms cubic-bezier(.2,.85,.2,1);
  will-change: transform;
}
html.js .about-showcase__media.is-visible img{
  transform: scale(1);
}
.about-showcase__media:hover img{
  transform: scale(1.015);
}
.about-showcase__media::after{
  content: "";
  position: absolute;
  inset: 0;
  /* very subtle soft highlight (no sweep) */
  background: radial-gradient(120% 80% at 30% 20%, rgba(33,136,232,.12) 0%, rgba(33,136,232,0) 60%);
  opacity: 0;
  transition: opacity 1200ms cubic-bezier(.2,.85,.2,1);
  pointer-events: none;
}
html.js .about-showcase__media.is-visible::after{
  opacity: 1;
}

@media (prefers-reduced-motion: reduce){
  .about-showcase [data-reveal],
  .about-showcase__media img,
  .about-showcase__media::after{
    transition: none !important;
    animation: none !important;
    transform: none !important;
    filter: none !important;
    opacity: 1 !important;
  }
}

/* Work process (zigzag timeline like reference) */
.work-process{
  position: relative;
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(15,23,42,0.02) 0%, rgba(15,23,42,0.00) 45%);
  padding: 22px 14px;
  min-height: 260px;
  overflow: hidden;
}
.work-process__svg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.work-process__path{
  fill: none;
  stroke: rgba(33,136,232,.35);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 10px 18px rgba(2,6,23,.06));
}
.work-process__dot{
  fill: rgba(33,136,232,.9);
  stroke: #fff;
  stroke-width: 8;
}

.work-process__step{
  position: absolute;
  left: var(--x, 50%);
  top: var(--y, 50%);
  transform: translate(-50%, -50%);
  text-align: center;
  width: min(260px, 28vw);
}
.work-process__node{
  position: relative;
  margin: 0 auto;
  width: 62px;
  height: 62px;
  border-radius: 999px;
  background: rgba(33,136,232,.12);
  display: grid;
  place-items: center;
  box-shadow: 0 18px 40px rgba(2,6,23,.10);
}
.work-process__node::before{
  content:"";
  position:absolute;
  inset: 10px;
  border-radius: 999px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(15,23,42,.06);
}
.work-process__icon{
  position: relative;
  z-index: 2;
  width: 26px;
  height: 26px;
  color: #2188E8;
}
.work-process__icon svg{
  width: 100%;
  height: 100%;
  display:block;
}
.work-process__num{
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  height: 26px;
  min-width: 26px;
  padding: 0 8px;
  border-radius: 999px;
  background: #2188E8;
  color: #fff;
  font-weight: 900;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 24px rgba(33,136,232,.22);
}

.work-process__box{
  margin: 14px auto 0;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 22px;
  padding: 16px 16px;
  box-shadow: 0 18px 40px rgba(2,6,23,.08);
}
.work-process__title{
  font-weight: 900;
  font-size: 18px;
  color: #0f172a;
}
.work-process__desc{
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(15,23,42,.68);
}

/* Place boxes above/below line like reference */
.work-process__step.is-top .work-process__box{ margin-top: 14px; }
.work-process__step.is-bottom .work-process__box{
  margin-top: 0;
  margin-bottom: 14px;
}
.work-process__step.is-bottom{
  display: flex;
  flex-direction: column-reverse;
  gap: 14px;
}

/* Responsive: stack on small screens */
@media (max-width: 1024px){
  .work-process{
    padding: 0;
    min-height: 0;
    background: none;
  }
  .work-process__svg{ display:none; }
  .work-process__step{
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    width: 100%;
    max-width: 720px;
    margin: 16px auto 0;
    display: grid;
    grid-template-columns: 76px 1fr;
    align-items: start;
    text-align: left;
    gap: 14px;
  }
  html[dir="rtl"] .work-process__step{ text-align: right; }
  .work-process__step.is-bottom{ flex-direction: initial; }
  .work-process__box{ margin: 0; }
  .work-process__node{ margin: 0; }
}

/* Subtle background grid used in a few sections */
.bg-grid {
  background-image:
    radial-gradient(circle at 1px 1px, rgba(99, 102, 241, .18) 1px, transparent 0);
  background-size: 24px 24px;
}

/* Hide the blue "Our Services" card on mobile (all languages) */
@media (max-width: 768px){
  .about-showcase__servicesCard{ display: none !important; }
}

.hero-wave {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 140px;
  overflow: hidden;
}

.hero-wave svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Hero overlay similar to the reference (blue panel over image) */
.hero-overlay {
  background: linear-gradient(90deg,
    rgba(17, 24, 39, 0.78) 0%,
    rgba(29, 78, 216, 0.82) 35%,
    rgba(29, 78, 216, 0.68) 60%,
    rgba(29, 78, 216, 0.00) 100%
  );
}
/* RTL hero: content right, image left => flip overlay direction */
html[dir="rtl"] .hero-overlay{
  /* Content is on the right; keep the left side (image) clearer */
  background: linear-gradient(to left,
    rgba(17, 24, 39, 0.74) 0%,
    rgba(29, 78, 216, 0.78) 38%,
    rgba(29, 78, 216, 0.48) 62%,
    rgba(29, 78, 216, 0.00) 100%
  );
}

/* Home hero RTL: keep layout predictable, text stays RTL/right */
@media (min-width: 1024px){
  html[dir="rtl"] .home-hero__grid{ direction: ltr; }
  html[dir="rtl"] .home-hero__text{ direction: rtl; text-align: right; }
}

/* Home "About showcase" RTL: content right, images left */
@media (min-width: 1024px){
  html[dir="rtl"] .home-about-showcase__grid{ direction: ltr; }
  html[dir="rtl"] .home-about-showcase__text{ direction: rtl; text-align: right; }
}

/* Organic blob used in About section */
.blob-shape {
  border-radius: 52% 48% 45% 55% / 55% 45% 55% 45%;
}

/* Media blob frame (true curved mask like reference) */
.media-mask {
  -webkit-mask-image: url("blob-mask.png");
  mask-image: url("blob-mask.png");
  -webkit-mask-size: cover;
  mask-size: cover;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  /* Allow nudging the blob vertically */
  -webkit-mask-position: 50% var(--mask-y, 55%);
  mask-position: 50% var(--mask-y, 55%);
}

/* A blob stack that matches the template: white curved border + inner media */
.blob-stack {
  position: relative;
  width: 100%;
  height: 560px;
}
@media (max-width: 640px) {
  .blob-stack { height: 420px; }
}

.blob-border {
  position: absolute;
  inset: 0;
  background: #fff;
  filter: drop-shadow(0 24px 60px rgba(2, 6, 23, 0.10));
}

.blob-media {
  position: absolute;
  inset: 6px; /* thickness of the white border */
  background: #fff;
  overflow: hidden;
}

.media-badge-dot {
  position: absolute;
  top: 8px;
  right: 12px;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: linear-gradient(135deg, #1d4ed8, #6d28d9);
  box-shadow: 0 10px 24px rgba(2,6,23,.18);
  border: 6px solid rgba(255,255,255,.92);
}

.media-ribbon {
  position: absolute;
  left: -8px;
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 220px;
  pointer-events: none;
}

.media-ribbon.rtl {
  left: auto;
  right: -8px;
  transform: translateY(-50%) scaleX(-1);
}

.media-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* About video: show full frame without cropping */
.blob-media video.media-video {
  /* Show full frame without cropping, scaled down for fit */
  object-fit: contain;
  object-position: 50% var(--video-y, 50%);
  background: transparent;
  transform: scale(var(--video-scale, 0.92));
  transform-origin: 50% 50%;
  pointer-events: none; /* avoid native click/play overlay */
}

/* Exact curve/icon overlay generated from your shape image */
.shape-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain; /* keep overlay geometry exact */
  pointer-events: none;
  z-index: 60; /* above blob media + border */
  /* Nudge overlay to match mask tweaks */
  transform: translateY(var(--overlay-y, 0px));
}

.shape-hit {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 70px;
  height: 70px;
  border-radius: 999px;
  background: transparent;
  z-index: 6;
}

/* Play button like reference */
/* Exact video icon like reference */
.video-icon {
  position: absolute;
  /* Place exactly over the blue dot in the overlay (responsive) */
  top: var(--icon-y, 17.8%);
  left: var(--icon-x, 79%);
  right: auto;
  /* Nudge icon outside the curve edge */
  transform: translate(-50%, -50%) translate(var(--icon-ox, 10px), var(--icon-oy, -10px));
  width: 64px;
  height: 64px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Make the circle a real element ABOVE the curve */
  background: #4f46e5;
  box-shadow: 0 18px 40px rgba(2, 6, 23, 0.22);
  border: 10px solid rgba(255,255,255,.92);
  cursor: pointer;
  z-index: 99;
  pointer-events: auto;
}
.video-icon::after{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:999px;
  border: 3px solid rgba(79,70,229,.28);
}
.video-icon svg { margin-left: 2px; filter: drop-shadow(0 6px 14px rgba(2,6,23,.25)); }
.is-playing .video-icon { opacity: 0; pointer-events:none; }

.video-icon img{
  width: 18px;
  height: 18px;
  display: block;
  margin-left: 2px;
  filter: drop-shadow(0 6px 14px rgba(2,6,23,.25));
}

/* Small white corner cut + blue arc hint (top-right) */
.media-corner {
  position: absolute;
  top: 6px;
  right: 10px;
  width: 62px;
  height: 62px;
  pointer-events: none;
}
.media-corner svg { width:100%; height:100%; display:block; }

/* Hide native controls for a cleaner “template-like” look */
video.media-video::-webkit-media-controls { display:none !important; }
video.media-video::-webkit-media-controls-enclosure { display:none !important; }

/* Better Arabic feel */
html[dir="rtl"] body {
  font-family: "Cairo", "Tajawal", "IBM Plex Sans Arabic", "Noto Kufi Arabic", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Tahoma, Arial, sans-serif;
}
html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] select,
html[dir="rtl"] button{
  font-family: inherit;
}

/* About showcase: animated progress bar (requested color #2188E8) */
.about-progress{
  --about-progress-color: #2188E8;
  --progress: 100;
}
.about-progress__bar{
  width: 0%;
  background: var(--about-progress-color);
  transition: width 1.8s cubic-bezier(.2,.9,.2,1);
}
.about-progress.is-visible .about-progress__bar{
  width: calc(var(--progress, 100) * 1%);
}
@media (prefers-reduced-motion: reduce){
  .about-progress__bar{
    transition: none;
    width: calc(var(--progress, 100) * 1%);
  }
}

/* Services cards (WordPress-style animation port) */
.services-grid{
  position: relative;
}
.services-grid .inner-box{
  position: relative;
  overflow: hidden;
  /* Reveal color under the white overlay (site color) */
  background: var(--theme-color2);
  border-radius: 22px;
  box-shadow: 0 20px 60px rgba(2, 6, 23, 0.08);
  border: 1px solid rgba(15, 23, 42, 0.06);
  height: 299px; /* keep rows aligned like reference */
  --svc-imgw: 46%;
  padding: 34px 26px;
}
.services-grid .inner-box .title .elementor-heading-title,
.services-grid .inner-box .text,
.services-grid .inner-box .icon,
.services-grid .inner-box .image img{
  -webkit-transition: all 300ms ease;
  transition: all 300ms ease;
}

.services-grid .inner-box .content{
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: none;
}
.services-grid .inner-box .title .elementor-heading-title{
  font-weight: 800;
  font-size: 22px;
  line-height: 1.2;
  color: #0f172a;
}
.services-grid .inner-box .text{
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.85;
  color: #0f172a;
}

.services-grid .inner-box .service-block-image{
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: var(--svc-imgw);
  z-index: 2;
  pointer-events: none;
}
.services-grid .inner-box .service-block-image .image{
  position: absolute;
  inset: 0;
  overflow: hidden;
  /* Right-side image: the vertical semi-circle curve */
  border-radius: 500px 0 0 500px;
  background: #fff;
}
.services-grid .inner-box .service-block-image .image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.0);
  transition: all 300ms linear;
}
/* Logo replacement for service image on hover */
.services-grid .inner-box .service-block-image .image::after{
  content:"";
  position: absolute;
  inset: 0;
  background: url("cropped-logo.png") center / 250px 250px no-repeat;
  opacity: 0;
  transition: all 300ms linear;
  z-index: 2;
}

.services-grid .inner-box .icon{
  position: absolute;
  top: 111px;
  left: 49%; /* seam between text and image (46% image width) */
  width: 65px;
  height: 65px;
  border-radius: 999px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 18px 40px rgba(2, 6, 23, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  /* needed for logo swap */
  position: absolute;
  overflow: hidden;
}
.services-grid .inner-box .icon svg{
  width: 26px;
  height: 26px;
  color: var(--bg-theme-color2);
}
.services-grid .inner-box .icon img{
  width: 38px;
  height: 38px;
  display: block;
  object-fit: contain;
}

/* Hover fill animation (ported) */
.services-grid .inner-box:after{
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  /* Your requested animation: white layer shrinks to reveal site color */
  background-color: #ffffff;
  content: "";
  -webkit-transition: all 300ms linear;
  transition: all 300ms linear;
  z-index: 1;
}
.services-grid .inner-box:hover::after{
  height: 0;
}
.services-grid .inner-box:hover .icon{
  -webkit-transform: rotate(180deg) scale(-1);
  transform: rotate(180deg) scale(-1) !important;
}
.services-grid .inner-box:hover .image img{
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}
.services-grid .inner-box:hover .text,
.services-grid .inner-box:hover .title .elementor-heading-title{
  color: #ffffff !important;
}

/* Additional Service requested classes (maps to the same cards) */
.services-grid.service-block .inner-box.service-box:after{ background-color:#fff; }
.services-grid.service-block .inner-box.service-box:hover:after{ height: 0; }
.services-grid.service-block .inner-box.service-box .round,
.services-grid.service-block .inner-box.service-box img,
.services-grid.service-block .inner-box.service-box .elementor-heading-title{
  transition: all 300ms linear;
}
.services-grid.service-block .inner-box.service-box:hover .round{ opacity: 0.1!important; }
.services-grid.service-block .inner-box.service-box:hover .service-block-image img{ filter: none; }
.services-grid.service-block .inner-box.service-box:hover .service-block-image .image img{
  opacity: 0;
}
.services-grid.service-block .inner-box.service-box:hover .service-block-image .image::after{
  opacity: 1;
}
.services-grid.service-block .inner-box.service-box:hover .icon img,
.services-grid.service-block .inner-box.service-box:hover .icon svg{
  opacity: 0;
}
.services-grid.service-block .inner-box.service-box:hover .icon{
  /* keep logo upright */
  transform: none !important;
}
.services-grid.service-block .inner-box.service-box .icon::after{
  content:"";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 40px;
  height: 40px;
  background: url("cropped-logo.png") center / contain no-repeat;
  opacity: 0;
  transition: all 300ms linear;
}
.services-grid.service-block .inner-box.service-box:hover .icon::after{
  opacity: 1;
}
.services-grid.service-block .inner-box.service-box:hover .elementor-heading-title{ color:#fff; }

/* Spacer widget (round) */
.services-grid.service-block .inner-box .round{
  position: absolute;
  width: 160px;
  height: 160px;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  z-index: 0;
  top: 22px;
  left: 22px;
  pointer-events: none;
}
html[dir="rtl"] .services-grid.service-block .inner-box .round{
  left: auto;
  right: 22px;
}

/* Different origins per block (ported) */
.services-grid .service-block-one.inner-box:after,
.services-grid .service-block-one.inner-box::after{
  /* Make block 1 match others: show the blue corner blob */
  border-radius: 500px 0 0 0 !important; /* top-left */
}
.services-grid .service-block-two.inner-box::after{
  -webkit-transform-origin: left bottom!important;
  transform-origin: left bottom!important;
  border-radius: 0 500px 0 0!important;
}
.services-grid .service-block-three.inner-box:after{
  -webkit-transform-origin: right top;
  transform-origin: right top;
  border-radius: 0 0 0 500px;
}
.services-grid .service-block-four.inner-box:after{
  -webkit-transform-origin: left top;
  transform-origin: left top;
  border-radius: 0 0 500px 0;
}

/* Mirror image placement for block 2 and 4 (image on LEFT) */
.services-grid .service-block-two.inner-box .service-block-image,
.services-grid .service-block-four.inner-box .service-block-image{
  left: 0;
  right: auto;
}
.services-grid .service-block-two.inner-box .service-block-image .image,
.services-grid .service-block-four.inner-box .service-block-image .image{
  border-radius: 0 500px 500px 0; /* curve faces center */
}

.services-grid .service-block-two.inner-box .content,
.services-grid .service-block-four.inner-box .content{
  margin-left: 0; /* padding handles spacing now */
}

/* Reserve space for the image so text never goes underneath it */
.services-grid .service-block-one.inner-box,
.services-grid .service-block-three.inner-box{
  padding-right: calc(26px + var(--svc-imgw));
}
.services-grid .service-block-two.inner-box,
.services-grid .service-block-four.inner-box{
  padding-left: calc(26px + var(--svc-imgw));
}
.services-grid .service-block-two.inner-box .icon,
.services-grid .service-block-four.inner-box .icon{
  left: 39%; /* seam when image is on LEFT */
}

/* Bottom icons for row 2 (block 3 & 4) like the reference */
.services-grid .service-block-three.inner-box .icon,
.services-grid .service-block-four.inner-box .icon{

  bottom: 74px;
}

/* (Removed) forced "featured" first card color:
   all service cards should be white by default, colored only on hover. */

@media only screen and (max-width: 1024px){
  .services-grid .inner-box{
    height: auto;
  }
  .services-grid .inner-box .service-block-image{
    position: relative;
    width: 100%;
    height: 210px;
    margin-top: 16px;
  }
  .services-grid .inner-box .content{ max-width: 100%; }
  .services-grid .inner-box .icon{
    position: relative !important;
    left: auto;
    top: auto;
    margin-top: 14px;
  }
  .services-grid .inner-box .service-block-image .image{
    /* On mobile: use a normal rectangular image */
    border-radius: 28px;
    position: relative;
    width: 100%;
    height: 100%;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
  }
  .services-grid .service-block-two.inner-box .content,
  .services-grid .service-block-four.inner-box .content{
    margin-left: 0;
  }
}

/* Mobile: render services as normal cards (fix broken curves/overlaps) */
@media (max-width: 768px){
  .services-grid .inner-box{
    display: flex;
    flex-direction: column;
    background: #fff !important;
    padding: 18px !important;
    border-radius: 22px;
    box-shadow: 0 18px 46px rgba(2, 6, 23, 0.10);
  }
  /* Remove the desktop white overlay + corner blob shapes */
  .services-grid .inner-box::after,
  .services-grid .inner-box:after,
  .services-grid.service-block .inner-box.service-box:after{
    display: none !important;
    content: none !important;
  }
  /* Remove decorative floating circle */
  .services-grid .inner-box .round{ display: none !important; }

  /* Reset reserved padding from desktop variants */
  .services-grid .service-block-one.inner-box,
  .services-grid .service-block-two.inner-box,
  .services-grid .service-block-three.inner-box,
  .services-grid .service-block-four.inner-box{
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .services-grid .inner-box .title .elementor-heading-title{
    font-size: 22px;
    color: #0f172a !important;
  }
  .services-grid .inner-box .text{
    font-size: 14px;
    line-height: 1.85;
    color: rgba(15,23,42,.78) !important;
  }

  /* Image becomes a normal rectangle inside card */
  .services-grid .inner-box .service-block-image{
    order: 0;
    margin-top: 0;
    height: 180px;
    width: 100%;
    position: relative !important;
  }
  .services-grid .inner-box .content{
    order: 1;
    margin-top: 12px;
  }
  .services-grid .inner-box .service-block-image{
    left: auto !important;
    right: auto !important;
  }
  .services-grid .inner-box .service-block-image .image{
    border-radius: 18px !important;
  }
  .services-grid .inner-box .service-block-image .image::after{
    display: none !important;
  }

  /* Icon pinned to top corner (not between image/text) */
  .services-grid .inner-box .icon{
    position: absolute !important;
    top: 14px;
    left: 14px;
    margin-top: 0 !important;
    width: 54px;
    height: 54px;
    border-radius: 16px;
    background: rgba(255,255,255,.98);
    box-shadow: 0 14px 30px rgba(2,6,23,.14);
    transform: none !important;
  }
  html[dir="rtl"] .services-grid .inner-box .icon{
    left: auto;
    right: 14px;
  }
  .services-grid.service-block .inner-box.service-box .icon::after{
    display: none !important;
  }
  .services-grid .inner-box .icon svg{
    width: 22px;
    height: 22px;
  }
  .services-grid .inner-box .icon img{
    width: 30px;
    height: 30px;
  }

  /* Disable hover-only effects that look broken on touch */
  .services-grid .inner-box:hover .text,
  .services-grid .inner-box:hover .title .elementor-heading-title{
    color: #0f172a !important;
  }
  .services-grid .inner-box:hover .image img{
    transform: none !important;
  }
}

/* Brands ticker (news-bar style) */
.brand-marquee{
  --marquee-duration: 22s;
  --marquee-gap: 72px;
  width: 100%;
}
.brand-marquee__track{
  display: flex;
  width: max-content;
  animation: brand-marquee var(--marquee-duration) linear infinite;
}
.brand-marquee__track--rtl{
  /* RTL pages: keep ticker behavior identical to English to avoid blank area on mobile */
  animation-direction: normal;
}

html[dir="rtl"] .brand-marquee{
  direction: ltr;
}
.brand-marquee__group{
  display: inline-flex;
  align-items: center;
  gap: var(--marquee-gap);
  padding-left: var(--marquee-gap);
  padding-right: var(--marquee-gap);
}
.brand-marquee__item{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
}
.brand-marquee__item img{
  max-height: 40px;
  width: auto;
  opacity: 0.7;
  filter: grayscale(1);
  transition: opacity .2s ease, filter .2s ease;
}
.brand-marquee__item img:hover{
  opacity: 1;
  filter: grayscale(0);
}
@keyframes brand-marquee{
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* CTA strip (Stay Connected...) */
.cta-strip{
  border-radius: 0;
  background: linear-gradient(90deg, #4f46e5 0%, #0284c7 100%);
  color: #fff;
  padding: 55px 0;
  box-shadow: 0 26px 60px rgba(2, 6, 23, 0.12);
}
.cta-strip__inner{
  display: grid;
  grid-template-columns: max-content 1fr max-content;
  grid-template-areas: "left title btn";
  align-items: center;
  gap: 22px;
}
html[dir="rtl"] .cta-strip__inner{
  grid-template-areas: "btn title left";
}
.cta-strip__left{ grid-area: left; display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.cta-strip__title{ grid-area: title; text-align: center; font-weight: 900; letter-spacing: -0.02em; font-size: clamp(22px, 3.2vw, 44px); line-height: 1.08; }
.cta-strip__btn{ grid-area: btn; }

.cta-strip__icon{
  width: 46px;
  height: 46px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.cta-strip__icon svg{ width: 22px; height: 22px; opacity: .95; }
.cta-strip__phone{
  font-weight: 800;
  letter-spacing: .02em;
  white-space: nowrap;
  opacity: .95;
}

/* CTA button (rounded pill, no skew) */
.site-btn.site-btn--cta{
  border-radius: 10px;
  padding: 14px 26px;
  background: rgba(255,255,255,.92);
  color: #0f172a;
  box-shadow: 0 16px 34px rgba(2, 6, 23, 0.16);
}
.site-btn.site-btn--cta::before{
  background: rgba(2, 6, 23, .08);
}
.site-btn.site-btn--cta:hover{
  transform: translateY(-1px);
}

@media (max-width: 768px){
  .cta-strip{ border-radius: 0; padding: 18px 0; }
  .cta-strip__inner{
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "btn"
      "left";
    gap: 14px;
  }
  html[dir="rtl"] .cta-strip__inner{
    grid-template-areas:
      "title"
      "btn"
      "left";
  }
  .cta-strip__left{ justify-content: center; }
  .cta-strip__btn{ justify-self: center; }
}

/* Portfolio / Projects section (screenshot-style) */
.portfolio{ position: relative; }
.portfolio__stats{
  background: radial-gradient(120% 120% at 90% 0%, rgba(33,136,232,.28) 0%, rgba(33,136,232,0) 48%),
              linear-gradient(90deg, #0b1435 0%, #0d1b4a 35%, #101f55 100%);
  color: #fff;
  box-shadow: 0 18px 50px rgba(2, 6, 23, 0.14);
}
.portfolio__stats-inner{
  display: grid;
  grid-template-columns: 1.2fr 1.8fr;
  gap: 26px;
  padding: 26px 0;
  align-items: center;
}
@media (max-width: 1024px){
  .portfolio__stats-inner{ grid-template-columns: 1fr; gap: 18px; padding: 22px 0; }
}
.portfolio__kicker{
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255,255,255,.74);
}
html[dir="rtl"] .portfolio__kicker{ letter-spacing: .04em; }
.portfolio__headline{
  margin-top: 10px;
  font-size: clamp(22px, 2.6vw, 36px);
  font-weight: 900;
  line-height: 1.12;
}
.portfolio__stats-list{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 1024px){
  .portfolio__stats-list{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
.portfolio__stat{
  padding: 14px 14px;
  border-left: 1px solid rgba(255,255,255,.12);
}
html[dir="rtl"] .portfolio__stat{ border-left: 0; border-right: 1px solid rgba(255,255,255,.12); }
@media (max-width: 1024px){
  .portfolio__stat{ border-left: 0; border-right: 0; background: rgba(255,255,255,.06); border-radius: 14px; }
}
.portfolio__stat-ico{
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 12px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.12);
  margin-bottom: 8px;
}
.portfolio__stat-ico svg{ width: 18px; height: 18px; opacity: .95; }
.portfolio__stat-val{ font-weight: 900; font-size: 20px; line-height: 1.1; }
.portfolio__stat-lab{ margin-top: 2px; font-size: 12px; color: rgba(255,255,255,.74); font-weight: 700; }

.portfolio__main{
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 26px;
  align-items: center;
  margin-top: 34px;
  position: relative;
  padding-bottom: 0;
}
@media (max-width: 1024px){
  .portfolio__main{ grid-template-columns: 1fr; padding-bottom: 0; }
}
.portfolio__title{
  margin-top: 10px;
  font-size: clamp(26px, 3.2vw, 42px);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.08;
  color: #0f172a;
}
.portfolio__media{
  position: relative;
  min-height: 280px;
  border-radius: 22px;
  overflow: hidden;
  background: #0b1435;
  box-shadow: 0 22px 60px rgba(2, 6, 23, 0.18);
  z-index: 1;
}
.portfolio__bg{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .70;
  filter: saturate(1.05) contrast(1.02);
  pointer-events: none;
}
.portfolio__overlay{
  position: absolute; inset: 0;
  background: radial-gradient(120% 120% at 100% 30%, rgba(33,136,232,.30) 0%, rgba(33,136,232,0) 55%),
              linear-gradient(90deg, rgba(79,70,229,.55) 0%, rgba(2,132,199,.55) 100%);
  mix-blend-mode: multiply;
}
.portfolio__play{
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  width: 58px;
  height: 58px;
  border-radius: 999px;
  background: rgba(33,136,232,.92);
  box-shadow: 0 18px 44px rgba(2,6,23,.22);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-decoration: none;
}
html[dir="rtl"] .portfolio__play{ right: auto; left: 22px; }
.portfolio__play-ring{
  position: absolute;
  inset: -10px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.28);
  opacity: .55;
}
.portfolio__play-ic svg{ width: 22px; height: 22px; transform: translateX(1px); }
.portfolio__play:hover{ filter: brightness(1.05); }

/* Projects cards (portfolio list) */
.project-cards{
  margin-top: 22px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
@media (max-width: 1024px){
  .project-cards{ grid-template-columns: 1fr; }
}
.project-card{
  display: block;
  text-decoration: none;
  color: inherit;
  background: #fff;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 18px 46px rgba(2, 6, 23, 0.10);
  border: 1px solid rgba(15, 23, 42, 0.06);
  transition: transform 220ms ease, box-shadow 220ms ease;
}
.project-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 26px 64px rgba(2, 6, 23, 0.14);
}
.project-card__media{
  height: 210px;
  background: linear-gradient(135deg, rgba(33,136,232,.35) 0%, rgba(109,40,217,.35) 100%);
}
.project-card__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.project-card__body{
  padding: 18px 18px 16px;
}
.project-card__title{
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: #0f172a;
}
.project-card__desc{
  margin-top: 10px;
  color: rgba(15,23,42,.62);
  font-weight: 700;
  line-height: 1.7;
}
.project-card__tags{
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.project-pill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(99, 102, 241, 0.12);
  color: rgba(67, 56, 202, 0.95);
  font-weight: 800;
  font-size: 14px;
  border: 1px solid rgba(99, 102, 241, 0.12);
}

/* Project details page */
.project-hero{
  position: relative;
  overflow: hidden;
  background: #0b1435;
}
.project-hero__bg{
  position: absolute;
  inset: 0;
}
.project-hero__bg img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.05) contrast(1.02);
}
.project-hero__overlay{
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 120% at 100% 30%, rgba(33,136,232,.34) 0%, rgba(33,136,232,0) 55%),
              linear-gradient(90deg, rgba(79,70,229,.70) 0%, rgba(2,132,199,.66) 100%);
  mix-blend-mode: multiply;
}
.project-hero__content{ position: relative; }
.project-tag{
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.16);
  color: rgba(255,255,255,.92);
  font-weight: 800;
  font-size: 14px;
}
.project-body{ position: relative; }
.project-cardwrap{
  background: #fff;
  border-radius: 26px;
  box-shadow: 0 22px 70px rgba(2, 6, 23, 0.10);
  border: 1px solid rgba(15,23,42,.08);
  padding: 18px;
}
.project-breadcrumbs{
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  color: rgba(255,255,255,.86);
  font-weight: 800;
  font-size: 14px;
}
.project-breadcrumbs a{
  color: rgba(255,255,255,.92);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.0);
}
.project-breadcrumbs a:hover{ border-bottom-color: rgba(255,255,255,.5); }
.project-breadcrumbs__sep{ opacity: .6; }
.project-breadcrumbs__current{ opacity: .9; }

.project-layout{
  display: grid;
  grid-template-columns: 1.6fr .9fr;
  gap: 18px;
  align-items: start;
}
@media (max-width: 1024px){
  .project-layout{ grid-template-columns: 1fr; }
}
.project-main{
  display: grid;
  gap: 16px;
}
.project-section{
  background: #fff;
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 22px;
  box-shadow: 0 18px 54px rgba(2,6,23,.06);
  padding: 18px;
}
.project-section__title{
  font-weight: 900;
  font-size: 18px;
  color: #0f172a;
  letter-spacing: -0.01em;
}
.project-prose{
  margin-top: 12px;
  color: rgba(15,23,42,.72);
  font-weight: 700;
  line-height: 1.9;
}
.project-prose p + p{ margin-top: 10px; }

.project-aside{ position: sticky; top: 88px; }
@media (max-width: 1024px){
  .project-aside{ position: static; }
}
.project-info{
  background: linear-gradient(180deg, rgba(33,136,232,.10) 0%, rgba(33,136,232,0) 55%),
              #ffffff;
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 22px;
  box-shadow: 0 18px 54px rgba(2,6,23,.08);
  padding: 18px;
}
.project-info__head{
  padding: 8px 10px 14px;
  border-bottom: 1px solid rgba(15,23,42,.08);
}
.project-info__title{
  font-weight: 900;
  font-size: 18px;
  color: #0f172a;
}
.project-info__sub{
  margin-top: 4px;
  font-weight: 800;
  color: rgba(15,23,42,.55);
  font-size: 13px;
}
.project-info__grid{
  display: grid;
  gap: 10px;
  padding: 14px 10px 0;
}
.project-info__row{
  display: flex;
  justify-content: space-between;
  gap: 14px;
}
.project-info__k{
  font-weight: 900;
  color: rgba(15,23,42,.72);
  font-size: 13px;
}
.project-info__v{
  font-weight: 900;
  color: #0f172a;
  font-size: 13px;
  text-align: right;
}
html[dir="rtl"] .project-info__v{ text-align: left; }
.project-link{
  color: rgba(33,136,232,1);
  text-decoration: none;
  word-break: break-word;
}
.project-link:hover{ text-decoration: underline; }
.project-info__block{
  padding: 14px 10px 0;
}
.project-chips{
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.project-info__cta{
  padding: 16px 10px 6px;
}

.project-gallery__main{
  border-radius: 18px;
  overflow: hidden;
  background: #0b1435;
  aspect-ratio: 16 / 9;
  width: 100%;
  border: 0;
  padding: 0;
  cursor: pointer;
  position: relative;
}
.project-gallery__main img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.project-gallery__main::after{
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 80% at 30% 20%, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 60%);
  opacity: .85;
  pointer-events: none;
}
.project-gallery__main:hover{ filter: brightness(1.02); }
.project-gallery__thumbs{
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}
@media (max-width: 1024px){
  .project-gallery__thumbs{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 640px){
  .project-gallery__thumbs{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.project-gallery__thumb{
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 14px;
  overflow: hidden;
  outline: none;
  box-shadow: 0 0 0 1px rgba(15,23,42,.10);
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.project-gallery__thumb img{
  width: 100%;
  height: 76px;
  object-fit: cover;
  display: block;
}
.project-gallery__thumb:hover{ transform: translateY(-2px); box-shadow: 0 0 0 2px rgba(33,136,232,.35); }
.project-gallery__thumb.is-active{ box-shadow: 0 0 0 3px rgba(33,136,232,.45); }

/* Lightbox */
.lightbox{
  position: fixed;
  inset: 0;
  z-index: 120;
  display: none;
}
.lightbox.is-open{ display: block; }
.lightbox__backdrop{
  position: absolute; inset: 0;
  background: rgba(2,6,23,.78);
}
.lightbox__panel{
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}
.lightbox__img{
  max-width: min(1100px, 92vw);
  max-height: 86vh;
  border-radius: 18px;
  box-shadow: 0 22px 90px rgba(0,0,0,.45);
  background: #0b1435;
  object-fit: contain;
}
.lightbox__close{
  position: absolute;
  top: 18px;
  right: 18px;
}
html[dir="rtl"] .lightbox__close{ right: auto; left: 18px; }
.lightbox__nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.10);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.lightbox__nav:hover{ background: rgba(255,255,255,.14); }
.lightbox__prev{ left: 18px; }
.lightbox__next{ right: 18px; }
html[dir="rtl"] .lightbox__prev{ left: auto; right: 18px; }
html[dir="rtl"] .lightbox__next{ right: auto; left: 18px; }
.lightbox__nav svg{ width: 20px; height: 20px; }

/* About page hero (matches reference screenshot) */
.about-hero{
  position: relative;
  height: 260px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: #0b1435;
}
.about-hero__bg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center right;
  filter: grayscale(1) contrast(1.05);
  opacity: .95;
}
.about-hero__overlay{
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(2,6,23,.78) 0%, rgba(2,6,23,.62) 40%, rgba(2,6,23,.35) 70%, rgba(2,6,23,.12) 100%);
}
.about-hero__inner{
  position: relative;
  padding: 34px 0 28px;
}
.about-hero__title{
  font-size: clamp(44px, 5.2vw, 66px);
  font-weight: 900;
  color: #fff;
  letter-spacing: -0.03em;
  line-height: 1.02;
}
.about-hero__crumbs{
  margin-top: 10px;
  font-weight: 800;
  font-size: 16px;
  display: inline-flex;
  gap: 10px;
  align-items: center;
  color: rgba(255,255,255,.80);
}
.about-hero__crumbs a{
  color: #04e3fc;
  text-decoration: none;
}
.about-hero__crumbs a:hover{
  color: #04e3fc;
  text-decoration: underline;
}
.about-hero__sep{ opacity: .7; }

/* About showcase: small color accents matching screenshot */
.about-showcase__services{ background: #2188E8; }
.about-showcase__dot{ background:#2188E8; }
.about-showcase__ic{ color:#2188E8; }

/* About showcase: center founder block on mobile */
@media (max-width: 640px){
  .about-showcase__founder{
    justify-content: center;
    text-align: center;
  }
  .about-showcase__founder > div{ text-align: center; }
  html[dir="rtl"] .about-showcase__founder{ flex-direction: row-reverse; }
}

/* Recent portfolio section (matches reference screenshot) */
.recent-portfolio{
  position: relative;
  padding: 72px 0;
  background: radial-gradient(120% 80% at 50% 0%, rgba(99,102,241,.28) 0%, rgba(99,102,241,0) 55%),
              radial-gradient(120% 120% at 90% 30%, rgba(33,136,232,.25) 0%, rgba(33,136,232,0) 55%),
              linear-gradient(180deg, #0b0b19 0%, #0b0b19 100%);
  overflow: hidden;
}
.recent-portfolio__head{
  text-align: center;
  color: #fff;
  margin-bottom: 34px;
}
.recent-portfolio__kicker{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .28em;
  text-transform: uppercase;
  opacity: .85;
}
html[dir="rtl"] .recent-portfolio__kicker{ letter-spacing: .06em; text-transform: none; }
.recent-portfolio__kicker::after{
  content:"";
  width: 42px;
  height: 2px;
  background: rgba(139, 92, 246, .95);
  border-radius: 999px;
}
.recent-portfolio__title{
  margin-top: 10px;
  font-size: clamp(34px, 3.8vw, 54px);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.05;
}
.recent-portfolio__grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
@media (max-width: 1024px){
  .recent-portfolio__grid{ grid-template-columns: 1fr; }
}
.recent-card{
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 22px 70px rgba(0,0,0,.30);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  transition: transform 220ms ease, box-shadow 220ms ease;
}
.recent-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 30px 90px rgba(0,0,0,.36);
}
.recent-card__media{
  position: relative;
  display: block;
  height: 340px;
  overflow: hidden;
  background: #0b1435;
}
.recent-card__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.recent-card__tag{
  position: absolute;
  left: 18px;
  bottom: 18px;
  padding: 10px 18px;
  border-radius: 12px 12px 0 0;
  background: rgba(139, 92, 246, .95);
  color: #fff;
  font-weight: 900;
  font-size: 14px;
  box-shadow: 0 16px 44px rgba(0,0,0,.25);
}
html[dir="rtl"] .recent-card__tag{ left: auto; right: 18px; }
.recent-card__body{
  display: block;
  padding: 18px;
  background: rgba(255,255,255,.94);
}
.recent-card__title{
  display: block;
  font-weight: 900;
  font-size: 22px;
  color: #0f172a;
  line-height: 1.2;
}

/* Team section (matches reference screenshot) */
.team-section__head{
  text-align: center;
  margin-bottom: 30px;
}
.team-section__kicker{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(15,23,42,.55);
}
html[dir="rtl"] .team-section__kicker{ letter-spacing: .06em; text-transform: none; }
.team-section__kicker::after{
  content:"";
  width: 42px;
  height: 2px;
  background: rgba(139, 92, 246, .95);
  border-radius: 999px;
}
.team-section__title{
  margin-top: 10px;
  font-size: clamp(34px, 3.6vw, 54px);
  font-weight: 900;
  letter-spacing: -0.03em;
  color: #0f172a;
  line-height: 1.05;
}
.team-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

/* About > Team: 2 bigger centered cards */
.team-section .team-grid{
  grid-template-columns: repeat(2, minmax(0, 420px));
  justify-content: center;
  gap: 28px;
}
@media (max-width: 1024px){
  .team-grid{ grid-template-columns: 1fr; }
  /* Ensure team section becomes single column on mobile/tablet */
  .team-section .team-grid{
    grid-template-columns: 1fr;
    justify-content: stretch;
  }
}
.team-card{
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 22px 70px rgba(2,6,23,.10);
}
.team-card__media{
  height: 380px;
  background: #0b1435;
}
.team-card__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
}
.team-card__body{
  padding: 18px 18px 22px;
  text-align: center;
}
.team-card__role{
  font-size: 12px;
  font-weight: 800;
  color: rgba(15,23,42,.55);
  text-transform: none;
}
.team-card__name{
  margin-top: 6px;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: #0f172a;
  text-transform: none;
}
.team-card__social{
  margin-top: 12px;
  display: flex;
  gap: 10px;
  justify-content: center;
}
.team-section .team-card__social{
  display: none !important;
}
.team-ic{
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: rgba(139, 92, 246, .95);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow: 0 16px 36px rgba(139,92,246,.24);
}
.team-ic svg{ width: 16px; height: 16px; display:block; }
.team-ic:hover{ filter: brightness(1.05); }

.team-card--dark{
  background: #0b1435;
  border-color: rgba(15,23,42,.10);
}
.team-card--dark .team-card__body{ background: #0b1435; }
.team-card--dark .team-card__role{ color: rgba(255,255,255,.70); }
.team-card--dark .team-card__name{ color: #fff; }

/* Services page heading (matches screenshot) */
.svc-head{
  padding: 70px 0 26px;
  background: #fff;
}
.svc-head__kicker{
  text-align: center;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(15,23,42,.55);
  display: inline-flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
  width: 100%;
}
html[dir="rtl"] .svc-head__kicker{ letter-spacing: .06em; text-transform: none; }
.svc-head__line{
  width: 44px;
  height: 2px;
  border-radius: 999px;
  background: rgba(139,92,246,.95);
  display: inline-block;
}
.svc-head__title{
  margin-top: 14px;
  text-align: center;
  font-size: clamp(34px, 3.6vw, 54px);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.06;
  color: #0f172a;
}

/* Services 2x2 grid (screenshot-style) */
.svc2x2{
  padding: 26px 0 64px;
  background: #f7f8fc;
}
.svc2x2__grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}
@media (max-width: 1024px){
  .svc2x2__grid{ grid-template-columns: 1fr; }
}
.svc-card2{
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 22px 60px rgba(2,6,23,.08);
  border: 1px solid rgba(15,23,42,.06);
  min-height: 250px;
  padding: 28px 28px;
  display: grid;
  grid-template-columns: 1fr;
}
.svc-card2__copy{ position: relative; z-index: 2; max-width: 56%; }
.svc-card2__title{
  font-weight: 900;
  font-size: 26px;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: #0f172a;
}
.svc-card2__desc{
  margin-top: 12px;
  color: rgba(15,23,42,.55);
  font-weight: 700;
  line-height: 1.85;
  font-size: 13px;
}
.svc-card2__media{
  position: absolute;
  top: 0;
  bottom: 0;
  width: 54%;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.svc-card2--media-right .svc-card2__media{ right: 0; }
.svc-card2--media-left .svc-card2__media{ left: 0; }
.svc-card2--media-left .svc-card2__copy{ margin-left: auto; }

/* Blob / circle image */
.svc-card2__blob{
  width: min(310px, 42vw);
  aspect-ratio: 1 / 1;
  border-radius: 999px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 22px 60px rgba(2,6,23,.10);
  position: relative;
}
.svc-card2__blob::before{
  content:"";
  position:absolute;
  inset:-18px;
  border-radius:999px;
  background: rgba(139,92,246,.12);
  z-index: 0;
}
.svc-card2__blob img{
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* mimic circular crop even if source has edges */
  clip-path: circle(48% at 50% 50%);
}

.svc-card2__icon{
  width: 68px;
  height: 68px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 18px 44px rgba(2,6,23,.12);
  border: 1px solid rgba(15,23,42,.06);
  display: grid;
  place-items: center;
  color: rgba(139,92,246,.95);
  position: absolute;
}
.svc-card2__icon svg{ width: 28px; height: 28px; }
.svc-card2__icon--tr{ top: 30px; right: 34px; }
.svc-card2__icon--tl{ top: 30px; left: 34px; }
.svc-card2__icon--br{ bottom: 30px; right: 34px; }
.svc-card2__icon--bc{ bottom: 30px; left: 50%; transform: translateX(-50%); }
html[dir="rtl"] .svc-card2__icon--tr{ right: auto; left: 34px; }
html[dir="rtl"] .svc-card2__icon--tl{ left: auto; right: 34px; }
html[dir="rtl"] .svc-card2__icon--br{ right: auto; left: 34px; }

.svc-card2--accent{
  background: rgba(124, 58, 237, .95);
  border-color: rgba(124, 58, 237, .95);
}
.svc-card2--accent .svc-card2__title{ color: #fff; }
.svc-card2--accent .svc-card2__desc{ color: rgba(255,255,255,.78); }
.svc-card2--accent .svc-card2__blob::before{ background: rgba(255,255,255,.10); }
.svc-card2--accent::after{
  content:"";
  position:absolute;
  right: -110px;
  top: -90px;
  width: 320px;
  height: 320px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
}
html[dir="rtl"] .svc-card2--accent::after{ right:auto; left:-110px; }

/* Testimonials section */
.testi{
  padding: 80px 0;
  background: #ffffff;
}
.testi__head{ text-align: center; margin-bottom: 28px; }
.testi__kicker{
  font-weight: 900;
  font-size: 12px;
  color: rgba(15,23,42,.70);
  letter-spacing: .28em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 26px;
  border-radius: 999px;
  background: #eef1f6;
  border: 1px solid #dfe4ec;
  position: relative;
}
.testi__line{
  width: 50px; height: 2px; border-radius: 999px;
  background: linear-gradient(90deg, #6b6ef8, #04E3FC);
}
.testi__kicker::before,
.testi__kicker::after{
  content:"";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #3b82f6;
}
html[dir="rtl"] .testi__kicker{ letter-spacing: .06em; text-transform: none; }
.testi__title{
  margin-top: 10px;
  font-size: clamp(34px, 3.8vw, 56px);
  font-weight: 900;
  letter-spacing: -0.03em;
  color: #0f172a;
}
.testi__grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}
@media (max-width: 1024px){
  .testi__grid{ grid-template-columns: 1fr; }
}
.testi-card{
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 22px 70px rgba(2,6,23,.10);
  border: 1px solid rgba(15,23,42,.06);
  background: #fff;
}
.testi-card__top{
  position: relative;
  padding: 18px 22px;
  background: linear-gradient(180deg, rgba(36,135,228,.92) 0%, rgba(36,135,228,.88) 100%);
  color: #fff;
  height: 82px;
}
.testi-card__name{
  font-weight: 900;
  font-size: 30px;
  letter-spacing: -0.02em;
  line-height: 1;
}
.testi-card__notch{
  position: absolute;
  left: 46%;
  top: 54px;
  width: 0;
  height: 0;
  border-left: 28px solid transparent;
  border-right: 28px solid transparent;
  border-top: 28px solid rgba(36,135,228,.88);
  transform: translateX(-50%);
}
html[dir="rtl"] .testi-card__notch{ left: 54%; }
.testi-card__avatar{
  position: absolute;
  right: 4px;
  top: 14px;
  width: 96px;
  height: 96px;
  border-radius: 999px;
  background: #fff;
  padding: 6px;
  box-shadow: 0 22px 60px rgba(2,6,23,.18);
  overflow: hidden;
}
html[dir="rtl"] .testi-card__avatar{ right: auto; left: 26px; }
.testi-card__avatar::after{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:999px;
  border: 3px solid rgba(36,135,228,.55);
}
.testi-card__avatar img{
  width: 100%;
  height: 100%;
  border-radius: 999px;
  object-fit: contain;
  padding: 2px;
  background: #fff;
  transform: scale(1.06);
  transform-origin: center;
  display:block;
}
.testi-card__body{
  padding: 28px 22px 22px;
  color: rgba(15,23,42,.62);
  font-weight: 700;
  line-height: 1.9;
  min-height: 170px;
}
.testi-card__body p{ margin: 0; max-width: 520px; }
.testi-card__rating{
  margin-top: 14px;
  display: grid;
  justify-items: end;
  gap: 6px;
  color: rgba(15,23,42,.65);
}
.testi-card__rating .stars{
  color: #f59e0b;
  letter-spacing: 2px;
  font-size: 18px;
}
.testi-card__reviews{
  font-weight: 800;
  font-size: 13px;
}

/* Mini cards (Find More) */
.svc-mini{
  padding: 70px 0 90px;
  background: #f8fafc;
}
.svc-mini__grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}
@media (max-width: 1024px){
  .svc-mini__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px){
  .svc-mini__grid{ grid-template-columns: 1fr; }
}
.mini-card{
  position: relative;
  display: block;
  text-decoration: none;
  border-radius: 12px;
  /* color under the white overlay */
  background: var(--theme-color2);
  border: 1px solid rgba(15,23,42,.06);
  box-shadow: 0 22px 60px rgba(2,6,23,.07);
  padding: 44px 18px 40px;
  text-align: center;
  color: inherit;
  overflow: hidden;
}
.svc-mini .service-block .service-box:after{
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background-color: #ffffff;
  content: "";
  z-index: 0;
  -webkit-transition: all 300ms linear;
  transition: all 300ms linear;
}
.svc-mini .service-block .service-box > *{
  position: relative;
  z-index: 1;
}
.svc-mini .service-block .service-box .round,
.svc-mini .service-block .service-box svg,
.svc-mini .service-block .service-box .elementor-heading-title{
  transition: all 300ms linear;
}
.svc-mini .service-block .service-box:hover:after{
  height: 0;
}
.svc-mini .service-block .service-box:hover .round{
  opacity: 0.1!important;
}
.svc-mini .service-block .service-box:hover svg{
  color: #fff;
}
.svc-mini .service-block .service-box:hover .elementor-heading-title,
.svc-mini .service-block .service-box:hover .mini-card__more{
  color: #fff;
}

/* Active card: keep SAME look as others (no forced reveal) */
.svc-mini .service-block .service-box.mini-card--active:after{
  height: 100% !important;
}
.svc-mini .service-block .service-box.mini-card--active .elementor-heading-title{
  color: #0f172a !important;
}
.svc-mini .service-block .service-box.mini-card--active .mini-card__more{
  color: rgba(15,23,42,.55) !important;
}
.svc-mini .service-block .service-box.mini-card--active svg{
  color: rgba(139,92,246,.95) !important;
}
.mini-card__circle{
  width: 150px;
  height: 150px;
  border-radius: 999px;
  background: rgba(4, 227, 252, .16); /* #04E3FC */
  margin: 0 auto 14px;
}
.mini-card__title{
  font-weight: 900;
  font-size: 24px;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: #0f172a;
}
.mini-card__icon{
  margin-top: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #04E3FC;
}
.mini-card__icon svg{ width: 54px; height: 54px; }
.mini-card__more{
  margin-top: 22px;
  font-weight: 800;
  color: rgba(15,23,42,.55);
}
.mini-card--active{
  /* keep same look as normal cards */
  background: var(--theme-color2);
  border-color: rgba(15,23,42,.06);
}
.mini-card--active .mini-card__circle{ background: rgba(255,255,255,.12); }
.mini-card--active .mini-card__title,
.mini-card--active .mini-card__more{ color: #fff; }
.mini-card--active .mini-card__icon{ color: rgba(255,255,255,.95); }

/* Additional Service (requested animation + site color) */
.service-block{
  position: relative;
}
.service-block .service-box{
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  background: var(--theme-color2); /* reveal color (was purple) */
}
.service-block .service-box:after{
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background-color: #ffffff;
  content: "";
  z-index: 0;
  -webkit-transition: all 300ms linear;
  transition: all 300ms linear;
}
.service-block .service-box > *{
  position: relative;
  z-index: 1;
}
.service-block .service-box .round,
.service-block .service-box img,
.service-block .service-box .elementor-heading-title{
  transition: all 300ms linear;
}
.service-block .service-box:hover:after{
  height: 0;
}
.service-block .service-box:hover .round{
  opacity: 0.1 !important;
}
.service-block .service-box:hover img{
  filter: brightness(0) invert(1);
}
.service-block .service-box:hover .elementor-heading-title{
  color: #fff;
}

/* Animation utility classes (if used in widgets) */
.rotateme{
  animation: rotateme 18s linear infinite;
}
.animationFramesOne{
  animation: animationFramesOne 20s linear infinite;
}
.contactSwimmer{
  animation: contactSwimmer 5s ease-in-out infinite;
}

@keyframes rotateme{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}
@keyframes animationFramesOne{
  0%{ transform: translate(0,0) rotate(0deg); }
  20%{ transform: translate(10px, -8px) rotate(8deg); }
  40%{ transform: translate(18px, 6px) rotate(0deg); }
  60%{ transform: translate(8px, 14px) rotate(-6deg); }
  80%{ transform: translate(-6px, 6px) rotate(0deg); }
  100%{ transform: translate(0,0) rotate(0deg); }
}
@keyframes contactSwimmer{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-10px); }
}

/* ------------------------------------------------------------------ */
/* Service detail: IT Consultancy (PHP page: it-consultancy)           */
/* ------------------------------------------------------------------ */
.svc-detail{
  --svc-primary:#1f6feb;
  --svc-primary-2:#0b3d91;
  --svc-accent:#00d4ff;
  --svc-ink:#0f172a;
  --svc-muted:#475569;
  --svc-bg:#f6f9ff;
  --svc-card:#ffffff;
  --svc-border:#e6eefc;
  --svc-shadow: 0 18px 50px rgba(2, 24, 66, .12);
  --svc-radius: 22px;
  --svc-container: 1120px;
  background: linear-gradient(180deg, #ffffff 0%, var(--svc-bg) 100%);
  color: var(--svc-ink);
  padding: 20px 0 6px;
}

/* App Development variant: right curve + media on left */
.svc-detail--appdev .svc-hero__card::before{
  background:
    radial-gradient(1100px 600px at 95% 10%, rgba(31,111,235,.22) 0%, rgba(31,111,235,0) 55%),
    radial-gradient(900px 500px at 100% 100%, rgba(0,212,255,.14) 0%, rgba(0,212,255,0) 55%);
}
.svc-detail--appdev .svc-hero__curve{
  left: auto;
  right: -120px;
  background: radial-gradient(circle at 70% 30%, rgba(31,111,235,.45) 0%, rgba(31,111,235,.10) 45%, rgba(31,111,235,0) 70%);
}
.svc-detail--appdev .svc-hero__inner{
  grid-template-columns: .95fr 1.05fr;
}
.svc-detail--appdev .svc-float-bubble{
  left: auto;
  right: 24%;
  --bubble-x: 50%;
}
.svc-detail--rtl.svc-detail--appdev .svc-hero__inner{
  grid-template-columns: 1fr;
}
.svc-detail--rtl.svc-detail--appdev .svc-float-bubble{
  right: auto;
  left: 24%;
  --bubble-x: -50%;
}
@media (max-width: 980px){
  .svc-detail--appdev .svc-float-bubble{ right: 50%; bottom: 10%; }
  .svc-detail--rtl.svc-detail--appdev .svc-float-bubble{ left: 50%; right:auto; }
}
.svc-detail__container{
  width: min(var(--svc-container), calc(100% - 32px));
  margin: 0 auto;
}
.svc-detail a{ color: inherit; text-decoration: none; }

.svc-btn{
  border:1px solid var(--svc-border);
  background:#fff;
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: 800;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  transition: .2s ease;
  box-shadow: 0 10px 26px rgba(2,24,66,.06);
}
.svc-btn:hover{ transform: translateY(-1px); }
.svc-btn--primary{
  background: linear-gradient(135deg, var(--svc-primary) 0%, var(--svc-primary-2) 100%);
  color:#fff;
  border-color: transparent;
  box-shadow: 0 18px 40px rgba(31,111,235,.28);
}
.svc-pill{
  font-size: 12px;
  font-weight: 900;
  padding: 6px 10px;
  border-radius: 999px;
  border:1px solid var(--svc-border);
  background: #fff;
  color: var(--svc-muted);
  letter-spacing: .2px;
}

/* Hero */
.svc-hero{ padding: 22px 0 10px; }
.svc-hero__card{
  position: relative;
  overflow: hidden;
  border-radius: var(--svc-radius);
  background: var(--svc-card);
  border: 1px solid var(--svc-border);
  box-shadow: var(--svc-shadow);
}
.svc-hero__card::before{
  content:"";
  position:absolute;
  inset: 0;
  background:
    radial-gradient(1100px 600px at 5% 10%, rgba(31,111,235,.22) 0%, rgba(31,111,235,0) 55%),
    radial-gradient(900px 500px at 0% 100%, rgba(0,212,255,.14) 0%, rgba(0,212,255,0) 55%);
  pointer-events:none;
}
.svc-hero__curve{
  position:absolute;
  left:-120px;
  top:-120px;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(31,111,235,.45) 0%, rgba(31,111,235,.10) 45%, rgba(31,111,235,0) 70%);
  pointer-events:none;
}
.svc-hero__inner{
  position:relative;
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  grid-template-areas: "text media";
  gap: 28px;
  padding: 28px;
  align-items: center;
}
.svc-hero__text{ grid-area: text; }
.svc-hero__media{ grid-area: media; }

/* Service detail: scroll reveal (no-JS safe) */
html.js .svc-detail [data-reveal]{
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  filter: blur(8px);
  transition:
    opacity 700ms cubic-bezier(.2,.9,.2,1),
    transform 700ms cubic-bezier(.2,.9,.2,1),
    filter 700ms cubic-bezier(.2,.9,.2,1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform, filter;
}
html.js .svc-detail [data-reveal="left"]{ transform: translate3d(-26px, 10px, 0); }
html.js .svc-detail [data-reveal="right"]{ transform: translate3d(26px, 10px, 0); }
html.js .svc-detail [data-reveal="up"]{ transform: translate3d(0, 18px, 0); }
html.js .svc-detail [data-reveal].is-visible{
  opacity: 1;
  transform: translate3d(0,0,0);
  filter: blur(0);
}
.svc-hero__text h1{
  font-size: clamp(26px, 3vw, 40px);
  margin:0 0 10px;
  line-height: 1.15;
  letter-spacing: -0.6px;
}
.svc-hero__text p{
  margin: 0 0 18px;
  color: var(--svc-muted);
  font-size: 16.5px;
  line-height: 1.85;
  max-width: 580px;
}
.svc-hero__badges{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin: 14px 0 18px;
}
.svc-hero__cta{
  display:flex;
  flex-wrap:wrap;
  gap: 12px;
  align-items:center;
  margin-top: 10px;
}
.svc-hero__media{
  position:relative;
  min-height: 320px;
  display:grid;
  place-items:center;
}
.svc-circle{
  width: min(420px, 100%);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow:hidden;
  border: 10px solid rgba(255,255,255,.9);
  box-shadow: 0 28px 70px rgba(2,24,66,.18);
  background: center/cover no-repeat;
  position:relative;
  transform: translateZ(0);
}
.svc-circle{
  transition: transform 600ms ease;
}
html.js .svc-circle{
  animation: svcCircleFloat 10s ease-in-out infinite;
}
.svc-circle:hover{
  transform: scale(1.01);
}
.svc-circle::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.00) 0%, rgba(0,0,0,.22) 100%);
  pointer-events:none;
}
.svc-float-bubble{
  position:absolute;
  left: 30%;
  bottom: 18%;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background:#fff;
  border:1px solid var(--svc-border);
  box-shadow: 0 22px 45px rgba(2,24,66,.16);
  display:grid;
  place-items:center;
  --bubble-x: -50%;
  transform: translateX(var(--bubble-x)) translateY(0);
  transition: transform 450ms ease;
}
.svc-float-bubble svg{ width:34px; height:34px; opacity:.95; }
html.js .svc-float-bubble{
  animation: svcBubbleBob 5s ease-in-out infinite;
}
.svc-float-bubble:hover{
  transform: translateX(var(--bubble-x)) translateY(-2px) scale(1.02);
}

/* Sections */
.svc-section{ padding: 20px 0; }
.svc-section__title{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap: 18px;
  margin-bottom: 14px;
}
.svc-section__title h2{
  margin:0;
  font-size: 22px;
  letter-spacing:-.2px;
}
.svc-section__title p{
  margin:0;
  color:var(--svc-muted);
  max-width: 620px;
  line-height:1.75;
}
.svc-grid-3{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.svc-card{
  background:#fff;
  border: 1px solid var(--svc-border);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 14px 30px rgba(2,24,66,.06);
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
  position: relative;
  overflow: hidden;
}
.svc-card::before{
  content:"";
  position:absolute;
  inset: -1px;
  border-radius: 16px;
  background: radial-gradient(80% 70% at 20% 10%, rgba(31,111,235,.16) 0%, rgba(31,111,235,0) 55%),
              radial-gradient(90% 80% at 80% 10%, rgba(0,212,255,.14) 0%, rgba(0,212,255,0) 55%);
  opacity: 0;
  transition: opacity 250ms ease;
  pointer-events:none;
}

.svc-card__media{
  height: 120px;
  border-radius: 14px;
  border: 1px solid rgba(230,238,252,.9);
  background:
    radial-gradient(220px 120px at 20% 20%, rgba(31,111,235,.18), rgba(31,111,235,0) 60%),
    radial-gradient(220px 120px at 80% 20%, rgba(0,212,255,.12), rgba(0,212,255,0) 62%),
    linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  margin-bottom: 12px;
  position: relative;
}
.svc-card__media img{
  width: 78%;
  height: 78%;
  object-fit: contain;
  transform: translateZ(0) scale(1);
  transition: transform 420ms cubic-bezier(.2,.9,.2,1), filter 420ms cubic-bezier(.2,.9,.2,1);
  filter: drop-shadow(0 14px 26px rgba(2,24,66,.14));
}
.svc-card__media::after{
  content:"";
  position:absolute;
  inset:-30%;
  background: linear-gradient(115deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 70%);
  transform: translateX(-80%);
  opacity: 0;
  pointer-events:none;
}
.svc-card h3{ margin: 0 0 6px; font-size: 16px; }
.svc-card p{ margin:0; color: var(--svc-muted); line-height: 1.7; font-size: 14.5px; }
.svc-card:hover{
  transform: translateY(-6px) rotate(-0.15deg);
  box-shadow: 0 20px 44px rgba(2,24,66,.10);
  border-color: rgba(31,111,235,.22);
}
.svc-card:hover::before{ opacity: 1; }
.svc-card:hover .svc-card__media img{ transform: scale(1.08); }
.svc-card:hover .svc-card__media::after{
  opacity: 1;
  transform: translateX(80%);
  transition: transform 650ms cubic-bezier(.2,.9,.2,1), opacity 250ms ease;
}
.svc-card:active{ transform: translateY(-2px); }

.svc-steps{
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
.svc-steps--7{
  grid-template-columns: repeat(7, 1fr);
}
.svc-step{
  position:relative;
  padding: 14px;
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
  border: 1px solid var(--svc-border);
  box-shadow: 0 14px 30px rgba(2,24,66,.06);
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
  overflow: hidden;
}
.svc-step__media{
  height: 86px;
  border-radius: 14px;
  border: 1px solid rgba(230,238,252,.9);
  background:
    radial-gradient(200px 110px at 20% 20%, rgba(31,111,235,.16), rgba(31,111,235,0) 60%),
    radial-gradient(200px 110px at 80% 20%, rgba(0,212,255,.12), rgba(0,212,255,0) 62%),
    linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  margin-bottom: 12px;
}
.svc-step__media img{
  width: 64%;
  height: 64%;
  object-fit: contain;
  transform: translateZ(0) scale(1);
  transition: transform 420ms cubic-bezier(.2,.9,.2,1);
  filter: drop-shadow(0 14px 26px rgba(2,24,66,.12));
}
.svc-step:hover{
  transform: translateY(-4px);
  box-shadow: 0 20px 44px rgba(2,24,66,.10);
  border-color: rgba(31,111,235,.20);
}
.svc-step:hover .svc-step__media img{ transform: scale(1.07); }
.svc-step__n{
  width: 28px;height:28px;border-radius: 10px;
  display:grid;place-items:center;
  background: rgba(31,111,235,.12);
  color: var(--svc-primary-2);
  font-weight: 900;
  margin-bottom: 10px;
}
.svc-step b{ display:block; margin-bottom:6px; font-weight: 900; }
.svc-step span{ color:var(--svc-muted); font-size:13.5px; line-height:1.6; font-weight: 650; }

/* CTA box */
.svc-cta{
  border-radius: var(--svc-radius);
  border: 1px solid var(--svc-border);
  background:
    radial-gradient(900px 320px at 15% 50%, rgba(31,111,235,.22), rgba(31,111,235,0) 60%),
    radial-gradient(700px 260px at 85% 30%, rgba(0,212,255,.16), rgba(0,212,255,0) 60%),
    #ffffff;
  box-shadow: var(--svc-shadow);
  padding: 18px;
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap: 12px;
  align-items:center;
}
.svc-cta h3{ margin:0; font-size:18px; font-weight: 900; }
.svc-cta p{ margin:4px 0 0; color:var(--svc-muted); line-height:1.6; font-weight: 650; }
.svc-cta__actions{ display:flex; gap:10px; flex-wrap:wrap; }

/* RTL tweaks */
.svc-detail--rtl .svc-section__title{
  flex-direction: row-reverse;
  justify-content: flex-end;
  text-align: right;
}
.svc-detail--rtl .svc-section__title > div{
  width: 100%;
  text-align: right;
}
.svc-detail--rtl .svc-section__title h2,
.svc-detail--rtl .svc-section__title p{
  text-align: right;
  margin-left: auto;
  margin-right: 0;
}
.svc-detail--rtl .svc-section__title p{ max-width: none; }
.svc-detail--rtl .svc-hero__text{ text-align:right; }
.svc-detail--rtl .svc-hero__text p{ margin-left:auto; }
.svc-detail--rtl .svc-hero__inner{
  /* Arabic: content right, image left */
  grid-template-columns: .95fr 1.05fr;
  grid-template-areas: "media text";
  direction: ltr; /* keep columns predictable */
}
.svc-detail--rtl .svc-hero__text{ direction: rtl; }
.svc-detail--rtl .svc-float-bubble{ left:auto; right: 30%; --bubble-x: 50%; }

/* Responsive */
@media (max-width: 980px){
  /* Mobile: image first, then content */
  .svc-hero__inner{
    grid-template-columns: 1fr;
    grid-template-areas:
      "media"
      "text";
    padding: 20px;
  }
  .svc-hero__media{ min-height: 280px; }
  .svc-grid-3{ grid-template-columns: 1fr; }
  .svc-steps{ grid-template-columns: 1fr; }
  .svc-float-bubble{ left: 50%; bottom: 10%; }
  .svc-detail--rtl .svc-hero__inner{ grid-template-columns: 1fr; grid-template-areas: "media" "text"; }
  .svc-detail--rtl .svc-float-bubble{ right: 50%; left:auto; }
}

@keyframes svcBubbleBob{
  0%,100%{ transform: translateX(var(--bubble-x)) translateY(0); }
  50%{ transform: translateX(var(--bubble-x)) translateY(-10px); }
}
@keyframes svcCircleFloat{
  0%,100%{ transform: translateY(0) scale(1); }
  50%{ transform: translateY(-6px) scale(1.02); }
}

@media (prefers-reduced-motion: reduce){
  html.js .svc-detail [data-reveal]{
    transition: none !important;
    animation: none !important;
    transform: none !important;
    filter: none !important;
    opacity: 1 !important;
  }
  html.js .svc-circle,
  html.js .svc-float-bubble{
    animation: none !important;
  }
  .svc-card,
  .svc-step,
  .svc-circle,
  .svc-float-bubble{
    transition: none !important;
  }
  .svc-card__media img{ transition: none !important; transform: none !important; }
  .svc-step__media img{ transition: none !important; transform: none !important; }
  .svc-card__media::after{ display:none !important; }
  .svc-card:hover,
  .svc-step:hover,
  .svc-circle:hover,
  .svc-float-bubble:hover{
    transform: none !important;
  }
}

/* ------------------------------------------------------------------ */
/* Company landing page (page=landing)                                 */
/* ------------------------------------------------------------------ */
.company-landing{
  --cl-primary:#1f6feb;
  --cl-primary-2:#0b3d91;
  --cl-accent:#00d4ff;
  --cl-ink:#0f172a;
  --cl-muted:#475569;
  --cl-bg:#f6f9ff;
  --cl-card:#ffffff;
  --cl-border:#e6eefc;
  --cl-shadow: 0 18px 50px rgba(2, 24, 66, .12);
  --cl-radius: 22px;
  --cl-container: 1120px;
  background: linear-gradient(180deg, #ffffff 0%, var(--cl-bg) 100%);
  color: var(--cl-ink);
  /* Default (English): prefer Latin/system fonts to avoid picking a local "Cairo" font on some devices */
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
.company-landing--ar{
  /* Arabic only */
  font-family: "Cairo", "Tajawal", "IBM Plex Sans Arabic", "Noto Kufi Arabic", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Tahoma, Arial, sans-serif;
}
.company-landing a{ color: inherit; text-decoration: none; }
.cl-container{ width: min(var(--cl-container), calc(100% - 32px)); margin: 0 auto; }

.cl-header{
  padding: 18px 0;
  position: sticky;
  top:0;
  backdrop-filter: blur(10px);
  background: rgba(255,255,255,.78);
  border-bottom: 1px solid rgba(230,238,252,.6);
  z-index: 50;
}
.cl-nav{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.cl-brand{ display:flex; align-items:center; gap:10px; font-weight:900; }
.cl-brand__name{ font-size:14px; line-height:1; font-weight:950; }
.cl-brand__tag{ font-size:12px; color: var(--cl-muted); font-weight:800; }
.cl-logo{
  width:48px;height:48px;border-radius:14px;
  background: #fff;
  box-shadow: 0 10px 22px rgba(31,111,235,.18);
  border: 1px solid rgba(230,238,252,.9);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.cl-logo__img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 7px;
}
.cl-actions{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.cl-actions__row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.cl-lang{ display:flex; align-items:center; gap:8px; }
.cl-langbtn{
  width:42px;
  height:42px;
  border-radius:999px;
  border:1px solid var(--cl-border);
  background:#fff;
  display:grid;
  place-items:center;
  box-shadow:0 10px 26px rgba(2,24,66,.06);
  transition:.2s ease;
  font-size: 20px;
  line-height: 1;
}
.cl-langbtn:hover{ transform: translateY(-1px); }
.cl-langbtn.is-active{
  border-color: rgba(31,111,235,.45);
  box-shadow: 0 14px 30px rgba(31,111,235,.18);
}
.cl-pill{
  font-size:12px;
  font-weight:900;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--cl-border);
  background:#fff;
  color: var(--cl-muted);
  margin: 0;
}
.cl-btn{
  border:1px solid var(--cl-border);
  background:#fff;
  padding: 10px 14px;
  border-radius:999px;
  font-weight:800;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:10px;
  transition:.2s ease;
  box-shadow:0 10px 26px rgba(2,24,66,.06);
}
.cl-btn:hover{ transform: translateY(-1px); }
.cl-btn--primary{
  background: linear-gradient(135deg, var(--cl-primary) 0%, var(--cl-primary-2) 100%);
  color:#fff !important;
  border-color:transparent;
  box-shadow: 0 18px 40px rgba(31,111,235,.28);
}
.company-landing .cl-btn--primary,
.company-landing .cl-btn--primary:link,
.company-landing .cl-btn--primary:visited,
.company-landing .cl-btn--primary:hover,
.company-landing .cl-btn--primary:active{
  color:#fff !important;
}

/* Mobile header layout */
@media (max-width: 720px){
  .cl-header{ padding: 12px 0; }
  .cl-nav{
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .cl-brand{ justify-content: center; }

  .cl-actions{ width: 100%; display:block; }
  .cl-actions__row{
    display:flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start; /* languages at far left */
    gap: 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 2px 2px 6px;
  }
  .cl-actions__row::-webkit-scrollbar{ display:none; }

  .cl-btn{
    padding: 9px 12px;
    font-size: 13px;
    box-shadow: 0 10px 22px rgba(2,24,66,.06);
    justify-content: center;
    width: auto;
    flex: 0 0 auto;
  }
  /* Primary CTA under buttons, centered */
  #topCta{
    margin: 10px auto 0;
    width: min(520px, 100%);
    justify-content: center;
    display: inline-flex;
  }
  /* Prevent awkward wrapping in header buttons */
  #navServices,
  #navWhy,
  #navLead,
  .cl-langbtn{
    white-space: nowrap;
  }
  /* Arabic: make "Get Quote" button text right-aligned */
  .company-landing--ar #navLead{
    direction: rtl;
    text-align: center;
    justify-content: center;
  }
  .cl-lang{ flex: 0 0 auto; }
}

/* reveal */
html.js .company-landing [data-reveal]{
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  filter: blur(8px);
  transition:
    opacity 700ms cubic-bezier(.2,.9,.2,1),
    transform 700ms cubic-bezier(.2,.9,.2,1),
    filter 700ms cubic-bezier(.2,.9,.2,1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform, filter;
}
html.js .company-landing [data-reveal].is-visible{
  opacity: 1;
  transform: translate3d(0,0,0);
  filter: blur(0);
}

/* hero */
.cl-hero{ padding: 24px 0 18px; }
.cl-hero__card{
  position:relative;
  overflow:hidden;
  border-radius: var(--cl-radius);
  background: var(--cl-card);
  border:1px solid var(--cl-border);
  box-shadow: var(--cl-shadow);
}
.cl-hero__card::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(1100px 600px at 95% 10%, rgba(31,111,235,.22) 0%, rgba(31,111,235,0) 55%),
    radial-gradient(900px 500px at 100% 100%, rgba(0,212,255,.14) 0%, rgba(0,212,255,0) 55%);
  pointer-events:none;
}
.cl-hero__curve{
  position:absolute;
  right:-120px;
  top:-120px;
  width:520px;
  height:520px;
  border-radius:50%;
  background: radial-gradient(circle at 70% 30%, rgba(31,111,235,.45) 0%, rgba(31,111,235,.10) 45%, rgba(31,111,235,0) 70%);
  pointer-events:none;
}
.cl-hero__inner{
  position:relative;
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  grid-template-areas: "text media";
  gap:18px;
  padding:22px;
  align-items:center;
}
.cl-hero__text{ grid-area: text; }
.cl-hero__media{ grid-area: media; }
.cl-hero__text h1{
  font-size: clamp(24px, 3vw, 42px);
  margin:0 0 10px;
  line-height:1.12;
  letter-spacing:-0.6px;
}
.cl-hero__text p{
  margin:0 0 14px;
  color: var(--cl-muted);
  font-size:16px;
  line-height:1.85;
  max-width: 640px;
}
.cl-badges{ display:flex; flex-wrap:wrap; gap:10px; margin: 10px 0 12px; }
.cl-actions-row{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.cl-note{ font-size:12.5px; color: var(--cl-muted); line-height:1.6; margin-top: 10px; }
.cl-hero__media{ position:relative; min-height:320px; display:grid; place-items:center; }
.cl-circle{
  width:min(420px, 100%);
  aspect-ratio:1/1;
  border-radius:50%;
  overflow:hidden;
  border:10px solid rgba(255,255,255,.9);
  box-shadow: 0 28px 70px rgba(2,24,66,.18);
  background: center/cover no-repeat;
  position:relative;
}
.cl-circle::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.00) 0%, rgba(0,0,0,.20) 100%);
  pointer-events:none;
}
.cl-float{
  position:absolute;
  right: 24%;
  bottom: 18%;
  width:74px;height:74px;border-radius:50%;
  background:#fff;border:1px solid var(--cl-border);
  box-shadow: 0 22px 45px rgba(2,24,66,.16);
  display:grid;place-items:center;
  transform: translateX(50%);
}
.cl-float svg{ width:40px;height:40px; }
.cl-float__logo{
  width:44px;
  height:44px;
  object-fit: contain;
  border-radius: 10px;
}

.cl-hero__quick{ padding: 0 22px 22px; }
.cl-grid-3{ display:grid; grid-template-columns: repeat(3, 1fr); gap:14px; }
.cl-grid-2{ display:grid; grid-template-columns: 1.05fr .95fr; gap:14px; align-items:start; }

.cl-section{ padding: 18px 0; }
.cl-title{ display:flex; justify-content:space-between; align-items:flex-end; gap:18px; margin-bottom: 12px; }
.cl-title h2{ margin:0; font-size:20px; letter-spacing:-.2px; }
.cl-title p{ margin:0; color: var(--cl-muted); max-width:680px; line-height:1.7; }

/* Landing kicker (OUR BRANDS style) */
.cl-kicker{ text-align:center; margin-bottom: 14px; }
.cl-kicker__pill{
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(15,23,42,.05);
  color: rgba(15,23,42,.78);
  border: 1px solid rgba(15,23,42,.10);
  font-weight: 900;
  font-size: 12px;
}
.cl-kicker__pill--upper{
  text-transform: uppercase;
  letter-spacing: .28em;
}
.cl-kicker__dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, #4f46e5 0%, #0284c7 100%);
}
.cl-kicker__dot--r{
  background: linear-gradient(90deg, #0284c7 0%, #4f46e5 100%);
}
.cl-kicker__rule{
  margin-top: 10px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 12px;
}
.cl-kicker__line{ width: 44px; height: 1px; background: rgba(226,232,240,1); }
.cl-kicker__mini{ width: 6px; height: 6px; border-radius: 999px; }
.cl-kicker__mini--indigo{ background: #4f46e5; }
.cl-kicker__mini--sky{ background: #0ea5e9; }
.cl-kicker__grad{
  width: 120px;
  height: 1px;
  background: linear-gradient(90deg, rgba(199,210,254,1) 0%, rgba(125,211,252,1) 50%, rgba(199,210,254,1) 100%);
}
.cl-kicker__sub{
  margin: 12px auto 0;
  max-width: 720px;
  color: var(--cl-muted);
  line-height: 1.7;
  text-align: center;
  font-weight: bold;
}

.cl-card{
  background:#fff;
  border:1px solid var(--cl-border);
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 14px 30px rgba(2,24,66,.06);
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
  position: relative;
  overflow: hidden;
}
.cl-card::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: 18px;
  background:
    radial-gradient(85% 70% at 20% 10%, rgba(31,111,235,.16) 0%, rgba(31,111,235,0) 55%),
    radial-gradient(90% 80% at 80% 10%, rgba(0,212,255,.14) 0%, rgba(0,212,255,0) 55%);
  opacity: 0;
  transition: opacity 250ms ease;
  pointer-events:none;
}
.cl-card:hover{ transform: translateY(-4px); box-shadow: 0 20px 44px rgba(2,24,66,.10); border-color: rgba(31,111,235,.22); }
.cl-card:hover::before{ opacity: 1; }
.cl-card h3{ margin:0 0 6px; font-size:16px; font-weight: bold;}
.cl-card p{ margin:0; color: var(--cl-muted); line-height:1.7; font-size:14.5px; }

/* Landing card media (icons/images) */
.cl-card__media{
  height: 120px;
  border-radius: 14px;
  border: 1px solid rgba(230,238,252,.9);
  background:
    radial-gradient(220px 120px at 20% 20%, rgba(31,111,235,.18), rgba(31,111,235,0) 60%),
    radial-gradient(220px 120px at 80% 20%, rgba(0,212,255,.12), rgba(0,212,255,0) 62%),
    linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  margin-bottom: 12px;
  position: relative;
}
.cl-card__media img{
  width: 78%;
  height: 78%;
  object-fit: contain;
  transform: translateZ(0) scale(1);
  transition: transform 420ms cubic-bezier(.2,.9,.2,1), filter 420ms cubic-bezier(.2,.9,.2,1);
  filter: drop-shadow(0 14px 26px rgba(2,24,66,.14));
}
.cl-card__media::after{
  content:"";
  position:absolute;
  inset:-30%;
  background: linear-gradient(115deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 70%);
  transform: translateX(-80%);
  opacity: 0;
  pointer-events:none;
}
.cl-card:hover .cl-card__media img{ transform: scale(1.08); }
.cl-card:hover .cl-card__media::after{
  opacity: 1;
  transform: translateX(80%);
  transition: transform 650ms cubic-bezier(.2,.9,.2,1), opacity 250ms ease;
}

/* Form */
.cl-form p{ margin-top: 4px; }
.cl-form__grid{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; margin-top: 10px; }
.cl-field{ display:flex; flex-direction:column; gap:6px; }
.cl-field label{ font-size:12.5px; font-weight:900; color:#1f2a44; }
.cl-field input,
.cl-field select,
.cl-field textarea{
  width:100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--cl-border);
  outline:none;
  font: inherit;
  background:#fff;
  transition: .15s ease;
}
.cl-field input:focus,
.cl-field select:focus,
.cl-field textarea:focus{
  border-color: rgba(31,111,235,.55);
  box-shadow: 0 0 0 4px rgba(31,111,235,.12);
}
.cl-field textarea{ min-height: 92px; resize: vertical; }
.cl-success{
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  border:1px solid rgba(16,185,129,.25);
  background: rgba(16,185,129,.10);
  color: #065f46;
  font-weight: 900;
}
.cl-error{
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  border:1px solid rgba(244,63,94,.25);
  background: rgba(244,63,94,.08);
  color: #9f1239;
  font-weight: 800;
}
.cl-error ul{ margin:0; padding-left: 18px; }

.cl-mini-list{ display:grid; gap:10px; margin-top: 12px; }
.cl-mini{
  display:flex; gap:10px; align-items:flex-start;
  padding: 12px;
  border:1px solid var(--cl-border);
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
}
.cl-mini__check{ font-weight:900; color: var(--cl-primary-2); }
.cl-mini b{ display:block; }
.cl-mini span{ color: var(--cl-muted); font-size:13.5px; line-height:1.6; }

.cl-cta{
  border-radius: var(--cl-radius);
  border:1px solid var(--cl-border);
  background:
    radial-gradient(900px 320px at 20% 50%, rgba(31,111,235,.22), rgba(31,111,235,0) 60%),
    radial-gradient(700px 260px at 85% 30%, rgba(0,212,255,.16), rgba(0,212,255,0) 60%),
    #ffffff;
  box-shadow: var(--cl-shadow);
  padding: 18px;
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  margin-top: 10px;
}
.cl-cta__sub{ color: var(--cl-muted); margin-top: 4px; }
.cl-footer{ padding: 22px 0 34px; color: var(--cl-muted); font-size: 13px; text-align:center; }

/* Landing Arabic: keep same layout, right-aligned text */
/* keep page layout LTR (handled by <html dir="ltr"> for landing) */
.company-landing--ar .cl-hero__text,
.company-landing--ar .cl-title,
.company-landing--ar .cl-card,
.company-landing--ar .cl-mini,
.company-landing--ar .cl-form,
.company-landing--ar .cl-cta{
  text-align: right;
  direction: rtl;
}
/* Footer stays centered */
.company-landing--ar .cl-footer{
  text-align: center;
  direction: rtl;
}

/* ------------------------------------------------------------------ */
/* Site Footer (same as provided sample)                               */
/* ------------------------------------------------------------------ */
:root{
  --sf-gold:#6EC3FD; --sf-dark:#0F1E50; --sf-text:#e9eefc; --sf-muted:rgba(233,238,252,.78); --sf-border:#2b3b7a;
}

/* ===== FOOTER BASE ===== */
.site-footer{
  margin-top: 80px;
  color: var(--sf-text);
  background: linear-gradient(135deg, var(--sf-dark) 0%, #0b163f 100%);
  position: relative;
  overflow: hidden;
  content-visibility: auto;
  contain-intrinsic-size: 900px;
}
.site-footer__grain:before{
  content:'';
  position:absolute;
  inset:0;
  background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="g" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="20" cy="20" r="1" fill="%236EC3FD" opacity="0.10"/><circle cx="80" cy="40" r="1" fill="%236EC3FD" opacity="0.10"/><circle cx="40" cy="80" r="1" fill="%236EC3FD" opacity="0.10"/></pattern></defs><rect width="100" height="100" fill="url(%23g)"/></svg>') repeat;
  opacity:.35;
  pointer-events:none;
}

/* Decorative wave */
.site-footer__wave svg{ display:block; width:100%; height:60px }
.site-footer__main{ position:relative; z-index:2; padding:50px 0 }
.site-footer h3{
  font-family:'Maven Pro',system-ui,sans-serif;
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--sf-gold);
  margin: 0 0 16px;
  letter-spacing: .3px;
  text-shadow: 0 2px 6px rgba(0,0,0,.25);
}
.site-footer p, .site-footer a{ color: var(--sf-text) }
.site-footer a{ text-decoration:none; transition:.2s ease }
.site-footer a:hover{ color:#fff }

.site-footer .sf-lead{
  max-width: 820px;
  margin: 0 auto;
  color: var(--sf-muted);
}

/* About text column (before Quick Links) */
.sf-col--about .sf-about{
  margin: 0 0 14px;
  color: var(--sf-muted);
  line-height: 1.8;
  font-weight: 600;
}

/* Extra spacing between About and Quick Links (desktop) */
@media (min-width: 1024px){
  html[dir="ltr"] .site-footer .sf-col--quicklinks{ padding-left: 28px; }
  html[dir="rtl"] .site-footer .sf-col--quicklinks{ padding-right: 28px; }
}

/* Lists */
.sf-list{ list-style:none; padding:0; margin:0 }
.sf-list li{ margin:0 0 12px; display:flex; align-items:center; gap:10px }
.site-footer .sf-ltr{
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
}
.sf-list i{
  color: var(--sf-gold);
  min-width: 22px;
  text-align: center;
  display:inline-block;
  filter: drop-shadow(0 10px 18px rgba(110,195,253,.20));
  animation: sf-li-icon 2.8s ease-in-out infinite;
  will-change: transform, filter;
}

@keyframes sf-li-icon{
  0%,100%{ transform: translateY(0) rotate(0deg) scale(1); }
  50%{ transform: translateY(-2px) rotate(-6deg) scale(1.12); }
}
@keyframes sf-li-icon-pop{
  0%{ transform: translateY(0) rotate(0deg) scale(1); }
  55%{ transform: translateY(-3px) rotate(-12deg) scale(1.22); }
  100%{ transform: translateY(0) rotate(0deg) scale(1); }
}
.sf-list li:hover i,
.sf-list li:focus-within i{
  filter: drop-shadow(0 18px 30px rgba(110,195,253,.52));
  animation: sf-li-icon-pop .55s cubic-bezier(.2,.9,.25,1) 1;
}
.sf-list li:nth-child(2) i{ animation-delay: .10s; }
.sf-list li:nth-child(3) i{ animation-delay: .20s; }
.sf-list li:nth-child(4) i{ animation-delay: .30s; }
.sf-list li:nth-child(5) i{ animation-delay: .40s; }
.sf-list li:nth-child(6) i{ animation-delay: .50s; }

@media (prefers-reduced-motion: reduce){
  .sf-list i,
  .sf-list li:hover i,
  .sf-list li:focus-within i{
    animation: none !important;
    filter: none !important;
  }
}

/* Social */
.sf-social{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  justify-content:center;
  margin-top: 30px;
  margin-bottom: 30px;
}
.sf-social a{
  width:42px;
  height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background: rgba(110,195,253,.16);
  color: var(--sf-gold);
  transition: transform .25s ease, background .25s ease, color .25s ease, box-shadow .25s ease, filter .25s ease;
  position:relative;
  overflow:hidden;
  box-shadow: 0 12px 22px rgba(0,0,0,.22);
}
.sf-social a:hover,
.sf-social a:focus-visible{
  transform: translateY(-7px) scale(1.12);
  background: rgba(110,195,253,.34);
  color:#fff;
  box-shadow: 0 18px 32px rgba(0,0,0,.32);
  outline: none;
}

@keyframes sf-social-breathe{
  0%,100%{ transform: translateY(0) scale(1) rotate(-2deg); filter: drop-shadow(0 0 0 rgba(110,195,253,.0)); }
  50%{ transform: translateY(-7px) scale(1.12) rotate(2deg); filter: drop-shadow(0 18px 34px rgba(110,195,253,.55)); }
}
@keyframes sf-social-sheen{
  0%{ transform: translateX(-140%) rotate(20deg); opacity: 0; }
  18%{ opacity: .55; }
  55%{ opacity: 0; }
  100%{ transform: translateX(140%) rotate(20deg); opacity: 0; }
}
.sf-social a{
  animation: sf-social-breathe 3.0s ease-in-out infinite;
  will-change: transform, filter;
}
.sf-social a::after{
  content:'';
  position:absolute;
  top:-18px; bottom:-18px; left:-60%;
  width:55%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.34), transparent);
  transform: translateX(-140%) rotate(20deg);
  animation: sf-social-sheen 2.6s ease-in-out infinite;
  pointer-events:none;
}
.sf-social a:nth-child(1){ animation-delay: .0s; }
.sf-social a:nth-child(2){ animation-delay: .15s; }
.sf-social a:nth-child(3){ animation-delay: .30s; }
.sf-social a:nth-child(4){ animation-delay: .45s; }
.sf-social a:nth-child(5){ animation-delay: .60s; }
.sf-social a:nth-child(6){ animation-delay: .75s; }
.sf-social a:nth-child(1)::after{ animation-delay: .0s; }
.sf-social a:nth-child(2)::after{ animation-delay: .35s; }
.sf-social a:nth-child(3)::after{ animation-delay: .70s; }
.sf-social a:nth-child(4)::after{ animation-delay: 1.05s; }
.sf-social a:nth-child(5)::after{ animation-delay: 1.40s; }
.sf-social a:nth-child(6)::after{ animation-delay: 1.75s; }

@media (prefers-reduced-motion: reduce){
  .sf-social a,
  .sf-social a::after{
    animation: none !important;
  }
}

/* Footer image */
.site-footer .footer-image-container img{
  object-fit: contain;
  opacity: 0.95;
  transition: all 0.3s;
  display: block;
  margin: 0 auto;
  max-width: 220px;
}
.site-footer .footer-image-container img:hover{
  opacity: 1 !important;
  transform: scale(1.05);
}

/* Copyright */
.site-footer__copy{
  background: var(--sf-dark);
  border-top: 1px solid var(--sf-border);
  color: var(--sf-muted);
  padding: 18px 0;
  text-align: center;
  position: relative;
}
.site-footer__copy:before{
  content:'';
  position:absolute;
  top:0; left:50%;
  transform:translateX(-50%);
  width:110px;
  height:2px;
  background: linear-gradient(90deg,transparent,var(--sf-gold),transparent);
}
.site-footer__copy a{ color: var(--sf-gold) }
.site-footer__copy a:hover{ text-decoration: underline; color:#fff }

/* Responsive tweaks */
@media (max-width: 768px){
  .site-footer__main{ padding: 36px 0 }
  .site-footer h3{ font-size: 1.35rem; text-align: center }
  .sf-col{ margin-bottom: 18px }
  .sf-list li{ justify-content:flex-start; text-align:left; flex-direction:row; align-items:center; font-size:14px }
  html[dir="rtl"] .site-footer .sf-list li{ text-align:right; flex-direction:row; justify-content:flex-start; }
}

/* RTL */
html[dir="rtl"] .site-footer{ direction: rtl; }
html[dir="rtl"] .site-footer h3{ font-family: 'Cairo'; }
html[dir="rtl"] .site-footer .sf-lead{ text-align: center; }
html[dir="rtl"] .site-footer .sf-list li{ flex-direction: row; text-align: right; justify-content: flex-start; }

/* ===== WhatsApp Floating Button ===== */
.whatsapp-float{
  position: fixed;
  right: 16px;
  bottom: 80px;
  z-index: 9999;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow: 0 8px 18px rgba(37,211,102,.4);
  transition: transform .2s ease, filter .2s ease, box-shadow .2s ease;
}
.whatsapp-float i{ font-size: 28px; line-height: 1; }
.whatsapp-float:hover{
  transform: translateY(-2px);
  filter: brightness(1.05);
  box-shadow: 0 12px 24px rgba(37,211,102,.5);
}
@media (max-width: 576px){
  .whatsapp-float{ width: 52px; height: 52px; right: 12px; bottom: 80px; }
}

/* ===== Back to Top Floating Button ===== */
.back-to-top{
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 9999;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--sf-gold);
  color: #fff;
  display: none;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow: 0 8px 18px rgba(110,195,253,.35);
  transition: transform .2s ease, filter .2s ease, box-shadow .2s ease, opacity .3s ease;
  opacity: 0;
  cursor: pointer;
}
.back-to-top.show{
  display: flex;
  opacity: 1;
}
.back-to-top i{ font-size: 24px; line-height: 1; }
.back-to-top:hover{
  transform: translateY(-2px);
  filter: brightness(1.1);
  box-shadow: 0 12px 24px rgba(110,195,253,.45);
  background: #6EC3FD;
}
@media (max-width: 576px){
  .back-to-top{ width: 52px; height: 52px; right: 12px; bottom: 12px; }
}
/* Make ALL readable text flow from the right (exclude buttons/lang flags) */
.company-landing--ar :where(h1,h2,h3,p,ul,ol,li,small,blockquote){
  text-align: right;
  direction: rtl;
}
.company-landing--ar .cl-kicker__sub{
  text-align: center;
}
.company-landing--ar :where(.cl-btn,.cl-langbtn,.cl-actions,.cl-actions__row,.cl-lang){
  direction: ltr;
}
.company-landing--ar .cl-circle{
  /* flip hero photo so the person faces the content */
  transform: scaleX(-1);
  transform-origin: center;
}
@media (min-width: 981px){
  /* Arabic desktop hero: image left, content right */
  .company-landing--ar .cl-hero__inner{
    grid-template-areas: "media text";
  }
}
.company-landing--ar .cl-field label{ text-align:right; }
.company-landing--ar .cl-field input,
.company-landing--ar .cl-field textarea,
.company-landing--ar .cl-field select{
  text-align: right;
  direction: rtl;
}
/* Keep email/phone readable while staying right-aligned */
.company-landing--ar .cl-field input[type="email"],
.company-landing--ar .cl-field input[type="tel"]{
  direction: ltr;
}

/* RTL */
.company-landing.is-rtl .cl-nav{ flex-direction: row-reverse; }
.company-landing.is-rtl .cl-brand{ flex-direction: row-reverse; }
.company-landing.is-rtl .cl-actions{ flex-direction: row-reverse; }
.company-landing.is-rtl .cl-hero__inner{
  direction: ltr; /* keep columns predictable */
  grid-template-areas: "media text"; /* image left, content right */
}
.company-landing.is-rtl .cl-hero__text{ text-align:right; }
.company-landing.is-rtl .cl-hero__text p{ margin-left:auto; }
/* bubble stays bottom-right of circle even in RTL */
.company-landing.is-rtl .cl-float{ right:24%; left:auto; transform: translateX(50%); }
.company-landing.is-rtl .cl-grid-2{ grid-template-columns: 1fr; }
.company-landing.is-rtl .cl-form__grid{ grid-template-columns: 1fr; }

@media (max-width: 980px){
  .cl-hero__inner{
    grid-template-columns:1fr;
    grid-template-areas:
      "media"
      "text";
    padding:18px;
  }
  .cl-hero__media{ min-height:220px; margin-bottom: 6px; }
  .cl-circle{ width: min(320px, 100%); }
  .cl-grid-3{ grid-template-columns:1fr; }
  .cl-grid-2{ grid-template-columns:1fr; }
  .cl-form__grid{ grid-template-columns:1fr; }
  .cl-float{ right:50%; bottom:10%; }
  /* Arabic mobile should mirror English */
  .company-landing.is-rtl .cl-hero__inner{ direction: ltr; }
  .company-landing.is-rtl .cl-hero__text{ text-align:left; }
  .company-landing.is-rtl .cl-hero__text p{ margin-left:0; }
  .company-landing.is-rtl .cl-float{ right:50%; left:auto; }
}

@media (prefers-reduced-motion: reduce){
  html.js .company-landing [data-reveal]{
    transition: none !important;
    transform: none !important;
    filter: none !important;
    opacity: 1 !important;
  }
  .cl-card{ transition:none !important; }
  .cl-card:hover{ transform:none !important; }
  .cl-card__media img{ transition:none !important; transform:none !important; }
  .cl-card__media::after{ display:none !important; }
}