/* =========================
   Logo
   ========================= */
.site-logo{
  height: 110px !important;
  width: 120px !important;
  max-width: 190px !important;
  display: block !important;
}

/* =========================
   HERO (Title + Button + Image)
   ========================= */
.intro--banner{
  position: relative !important;
}

/* Keep title + CTA above image */
.intro--banner h1,
.intro--banner .cta{
  display: block !important;
  position: relative !important;
  z-index: 2 !important;
}

/* Space between title and button */
.intro--banner h1{
  margin-bottom: 25px !important;
}

/* Image on the right */
.intro--banner img{
  position: absolute !important;
  right: 0 !important;
  bottom: 0 !important;
  max-width: 45% !important;
  height: auto !important;
  object-fit: contain !important;
  pointer-events: none !important;
}

/* =========================
   Brand Eyebrow
   ========================= */
.brand-eyebrow{
  display: inline-block !important;
  margin-bottom: 14px !important;
  font-size: 13px !important;
  letter-spacing: 2.8px !important;
  text-transform: uppercase !important;
  opacity: 0.85 !important;
  color: rgba(255, 255, 255, 0.65) !important;
  position: relative !important;
}

.brand-eyebrow::after{
  content: "" !important;
  display: block !important;
  width: 26px !important;
  height: 2px !important;
  margin-top: 6px !important;
  background: rgba(99, 102, 241, 0.9) !important;
  box-shadow: 0 0 12px rgba(99, 102, 241, 0.6) !important;
}

/* =========================
   OPTIONS (Mission / Vision)
   ========================= */
.intro--options{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 22px !important;
  margin-top: 28px !important;
  max-width: 900px !important;
}

/* No card background */
.intro--options a{
  display: block !important;
  padding: 16px 0 !important;
  position: relative !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transition: transform 250ms ease, filter 250ms ease !important;
}

/* Animated line */
.intro--options a::before{
  content: "" !important;
  position: absolute !important;
  top: -6px !important;
  left: 0 !important;
  width: 40% !important;
  height: 2px !important;
  background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.9), transparent) !important;
  box-shadow: 0 0 20px rgba(99, 102, 241, 0.65) !important;
  opacity: 0.85 !important;
  will-change: transform !important;
}

.intro--options a:nth-of-type(1)::before{ animation: sweepLTR 12s linear infinite !important; }
.intro--options a:nth-of-type(2)::before{ animation: sweepRTL 12s linear infinite !important; }

/* Hover */
.intro--options a:hover{
  transform: translateY(-2px) !important;
  filter: brightness(1.06) !important;
}
.intro--options a:hover::before{
  opacity: 1 !important;
  box-shadow: 0 0 30px rgba(99, 102, 241, 0.95) !important;
  animation-duration: 2.6s !important;
}

/* Text clarity */
.intro--options a h3{
  color: #ffffff !important;
  text-shadow: 0 0 10px rgba(99, 102, 241, 0.4) !important;
  font-size: 15px !important;
  letter-spacing: 1.5px !important;
}
.intro--options a p{ color: rgba(255, 255, 255, 0.75) !important; }

/* Small line under h3 */
.intro--options a h3::after{
  content: "" !important;
  display: block !important;
  width: 30px !important;
  height: 2px !important;
  margin-top: 6px !important;
  background: rgba(99, 102, 241, 0.8) !important;
  box-shadow: 0 0 12px rgba(99, 102, 241, 0.6) !important;
}

/* Animations */
@keyframes sweepLTR{
  0%   { transform: translateX(-140%); opacity: 0.35; }
  50%  { opacity: 1; }
  100% { transform: translateX(260%); opacity: 0.35; }
}
@keyframes sweepRTL{
  0%   { transform: translateX(240%); opacity: 0.35; }
  50%  { opacity: 1; }
  100% { transform: translateX(-140%); opacity: 0.35; }
}

/* Mobile options + hero image */
@media (max-width: 768px){
  .intro--options{
    grid-template-columns: 1fr !important;
    max-width: 100% !important;
  }

  .intro--banner img{
    position: relative !important;
    max-width: 100% !important;
    margin-top: 40px !important;
  }
}

/* =========================
   ABOUT
   ========================= */
.about-story h2{ margin-bottom: 40px; }

.about-quote{
  margin-top: 40px;
  font-size: 16px;
  opacity: 0.75;
  letter-spacing: 1px;
  text-align: center;
}

/* =========================
   SLIDER (team / works etc)
   ========================= */
.slider--item{
  transition: transform 0.9s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.9s ease, filter 0.9s ease;
}
.slider--item-center{
  transform: scale(1) translateX(0);
  opacity: 1;
}
.slider--item-left,
.slider--item-right{
  transform: scale(0.85);
  opacity: 0.45;
}

/* =========================
   ABOUT SLIDER — CLEAN GLOW ONLY
   ========================= */

.slider--item-image{
  width: 320px;
  height: 320px;
  border-radius: 50%;
  position: relative;
  margin: 0 auto;

  /* مهم */
  overflow: visible;
}

/* الشعاع النيلي خلف الصورة */
.slider--item-image::before{
  content:"";
  position: absolute;
  inset: -35px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
   rgba(103, 112, 237, 0.907),
    rgba(99,102,241,0.15),
    transparent 65%
  ) !important;
  filter: blur(25px);
  opacity: .9;
  z-index: 0;
}

/* الصورة نفسها */
.slider--item-image img{
  position: relative;
  z-index: 1;

  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: block;

  object-fit: cover;   /* يحل مشكلة الطول والعرض */
  object-position: center;

  /* بدون ظل */
  filter: none !important;
}

/* لما تكون الصورة في المنتصف (active) */
.slider--item-center .slider--item-image::before{
  inset: -45px;
  opacity: 1;
}



/* =========================
   Uiverse Rotating Cards (SCOPED)
   - Important: scoped to `.uiverse-rotator` to avoid `.card` collision
   ========================= */
.uiverse-rotator{
  width: 100%;
  height: 100%;
  position: relative;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.uiverse-rotator .inner{
  --w: 100px;
  --h: 150px;
  --translateZ: calc((var(--w) + var(--h)) + 0px);
  --rotateX: -15deg;
  --perspective: 1000px;
  position: absolute;
  width: var(--w);
  height: var(--h);
  top: 25%;
  left: calc(50% - (var(--w) / 2) - 2.5px);
  z-index: 2;
  transform-style: preserve-3d;
  transform: perspective(var(--perspective));
  animation: rotating 20s linear infinite;
}
@keyframes rotating{
  from{ transform: perspective(var(--perspective)) rotateX(var(--rotateX)) rotateY(0); }
  to{   transform: perspective(var(--perspective)) rotateX(var(--rotateX)) rotateY(1turn); }
}
.uiverse-rotator .card{
  position: absolute;
  border: 2px solid rgba(var(--color-card));
  border-radius: 12px;
  overflow: hidden;
  inset: 0;
  transform: rotateY(calc((360deg / var(--quantity)) * var(--index))) translateZ(var(--translateZ));
}
.uiverse-rotator .img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #0000 radial-gradient(
    circle,
    rgba(var(--color-card), 0.2) 0%,
    rgba(var(--color-card), 0.6) 80%,
    rgba(var(--color-card), 0.9) 100%
  );
}

/* =========================
   Services 3D (Scoped)
   ========================= */
.services-3d{
  position: relative;
  padding: 40px 0 90px;
}
.services-title{
  text-align: center;
  margin-bottom: 20px;
  font-size: 56px;
  color: #fff;
  letter-spacing: .5px;
}
.services-wrapper{
  width: 100%;
  height: 520px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.services-inner{
  --w: 220px;
  --h: 260px;
  --translateZ: 360px;
  --rotateX: -10deg;
  --perspective: 1200px;

  position: absolute;
  width: var(--w);
  height: var(--h);
  top: 38%;
  left: 50%;
  transform: translate(-50%, -50%) perspective(var(--perspective));
  transform-style: preserve-3d;
  animation: servicesRotating 45s linear infinite;
}
.services-wrapper:hover .services-inner{ animation-play-state: paused; }

@keyframes servicesRotating{
  from{
    transform: translate(-50%, -50%) perspective(var(--perspective))
      rotateX(var(--rotateX)) rotateY(0);
  }
  to{
    transform: translate(-50%, -50%) perspective(var(--perspective))
      rotateX(var(--rotateX)) rotateY(1turn);
  }
}

/* Services cards */
.services-3d .card{
  position: absolute;
  inset: 0;
  transform: rotateY(calc((360deg / var(--quantity)) * var(--index))) translateZ(var(--translateZ));
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(99,102,241,0.35);
  box-shadow: 0 18px 45px rgba(0,0,0,0.55), 0 0 22px rgba(99,102,241,0.18);
  backdrop-filter: blur(6px);
}

/* Services content */
.services-3d .svc{
  height: 100%;
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  color: #fff;
  text-align: left;
}
.svc-head{
  display: flex;
  align-items: center;
  gap: 10px;
}
.svc-ico{
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(99,102,241,0.18);
  border: 1px solid rgba(99,102,241,0.35);
  box-shadow: 0 0 14px rgba(99,102,241,0.25);
  font-size: 18px;
  flex-shrink: 0;
}
.svc h3{
  margin: 0;
  font-size: 15px;
  letter-spacing: 1px;
  color: #fff;
}
.svc p{
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255,255,255,0.72);
}

/* Services: pause when menu open */
body.menu-open .services-inner{ animation-play-state: paused !important; }
body.menu-open .card{ transition: none !important; }
.l-header.is-active ~ .l-main .services-inner{ animation-play-state: paused !important; }

/* Services Mobile */
@media (max-width: 768px){
  .services-wrapper{ height: auto; padding: 10px 0 0; }
  .services-inner{
    position: relative;
    top: auto; left: auto;
    transform: none !important;
    width: 100%;
    height: auto;
    display: grid;
    gap: 14px;
    padding: 0 16px;
    animation: none !important;
  }
  .services-3d .card{
    position: relative;
    transform: none !important;
    height: 180px;
  }
}

/* =========================
   CONTACT SPLIT LAYOUT
   ========================= */
.contact-split{
  height: 100%;
  display: flex;
  align-items: center;
  --glow-dark: rgba(70,72,110,.28);
  --glow-deeper: rgba(40,42,70,.35);
}

.contact-split__wrap{
  width: min(1200px, 92vw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: stretch;
}
@media (max-width: 900px){
  .contact-split__wrap{ grid-template-columns: 1fr; }
}

/* LEFT */
.contact-left{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  border-radius: 22px;
  padding: 26px;
  backdrop-filter: blur(8px);
}

.contact-title{
  margin: 0 0 6px;
  font-size: clamp(22px, 2.2vw, 34px);
}
.contact-sub{ margin: 0 0 18px; opacity: .75; }

.contact-cards{
  display: grid;
  gap: 12px;
  margin: 18px 0 22px;
}

.info-card{
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 14px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  text-decoration: none;
  color: #fff;
  transition: transform .18s ease, border-color .18s ease;
}
.info-card:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.22);
}
.info-ico{
  font-size: 18px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(255,255,255,.06);
}
.info-text b{ display:block; font-size: 14px; }
.info-text small{ display:block; opacity:.75; margin-top:2px; }

/* Social */
.social-title{ margin: 0 0 12px; font-size: 14px; opacity: .85; }

/* RIGHT */
.contact-right{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  border-radius: 22px;
  padding: 26px;
  backdrop-filter: blur(8px);
  overflow: hidden;
}

.agents-title{ margin:0 0 6px; font-size: clamp(20px, 2vw, 30px); }
.agents-sub{ margin:0 0 16px; opacity:.75; }

/* Tabs */
.agents-tabs{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.tab-btn{
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.25);
  color: #fff;
  border-radius: 999px;
  padding: 10px 14px;
  cursor: pointer;
  font-size: 13px;
  opacity: .85;
  transition: .18s ease;
}
.tab-btn:hover{ opacity: 1; border-color: rgba(255,255,255,.22); }
.tab-btn.active{
  opacity: 1;
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.25);
}

/* Panels */
.tab-panel{ display:none; }
.tab-panel.show{ display:block; }

.agents-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (max-width: 520px){
  .agents-grid{ grid-template-columns: 1fr; }
}

.agent-card{
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
}
.agent-avatar{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.06);
  font-size: 18px;
}
.agent-info b{ display:block; font-size: 14px; }
.agent-info small{ display:block; opacity:.7; margin-top:2px; }

/* =========================
   HOLOGRAPHIC ICONS (Contact scoped)
   ========================= */
.holographic-stack{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 18px;
  perspective: 1000px;
}
.holographic-icon{
  position: relative;
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transform-style: preserve-3d;
  text-decoration: none;
}

/* Base SVG styling */
.holographic-icon svg{
  width: 34px;
  height: 34px;
  position: relative;
  z-index: 3;
  transition: all 0.3s ease;
  filter: drop-shadow(0 0 5px currentColor);
  fill: currentColor;
}

.holographic-ring{
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid;
  border-top-color: transparent;
  border-bottom-color: transparent;
  animation: rotate 3s linear infinite;
  opacity: 0.6;
}
.holographic-particles{
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle, transparent 20%, currentColor 20%, currentColor 30%, transparent 30%, transparent 40%, currentColor 40%, currentColor 50%, transparent 50%);
  background-size: 15px 15px;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.holographic-pulse{
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  box-shadow: 0 0 15px currentColor;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Brand colors (default) */
.holographic-icon.facebook{ color: #1877F2; }
.holographic-icon.instagram{ color: #E1306C; }
.holographic-icon.whatsapp{ color: #25D366; }

.holographic-icon:hover{ transform: translateY(-8px) rotateX(18deg); }
.holographic-icon:hover svg{ transform: scale(1.15) rotate(8deg); }

.holographic-icon:hover .holographic-particles{
  opacity: 0.25;
  animation: particles 3s linear infinite;
}
.holographic-icon:hover .holographic-pulse{
  opacity: 0.45;
  animation: pulse 2s ease-out infinite;
}

@keyframes rotate{ from{transform:rotate(0)} to{transform:rotate(360deg)} }
@keyframes particles{ from{background-position:0 0} to{background-position:30px 30px} }
@keyframes pulse{
  0%{ transform:scale(.85); opacity:.5 }
  50%{ transform:scale(1.1); opacity:.2 }
  100%{ transform:scale(1.25); opacity:0 }
}

/* Make effects behind icon in Contact */
#contact .holographic-icon svg{ z-index: 10; }
#contact .holographic-ring,
#contact .holographic-particles,
#contact .holographic-pulse{
  z-index: 1;
  pointer-events: none;
}

/* Bootstrap icons inside holographic buttons (Contact only) */
#contact .social-icon{
  font-family: "bootstrap-icons" !important;
  font-size: 34px;
  color: #ffffff;
  position: relative;
  z-index: 20;
  line-height: 1;
  text-shadow: 0 0 6px rgba(255,255,255,.35), 0 0 18px currentColor;
}
#contact .holographic-icon:hover .social-icon{
  transform: scale(1.15) rotate(6deg);
  transition: transform .25s ease;
}

/* =========================
   PARTNERS CARD
   ========================= */
.partners-card{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  border-radius: 22px;
  padding: 26px;
  backdrop-filter: blur(8px);
}

.partners-title{
  margin: 0 0 18px;
  text-align: center;
  font-size: clamp(22px, 2.2vw, 34px);
}

/* Top 3 columns */
.partners-top{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  align-items: start;
}
@media (max-width: 1100px){
  .partners-top{ grid-template-columns: 1fr; }
}

/* Group header */
.partner-head{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  color: rgba(255,255,255,.92);
}
.partner-head h3{
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .2px;
}
.partner-ico{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
}

/* Logos grid */
.partner-logos{
  display: flex;
  flex-wrap: wrap;
  gap: 14px 18px;
  align-items: center;
}
.partner-logos img{
  height: 26px;
  width: auto;
  max-width: 120px;
  object-fit: contain;
  opacity: .95;
  filter: grayscale(10%);
  transition: transform .2s ease, opacity .2s ease, filter .2s ease;
}
.partner-logos img:hover{
  transform: translateY(-2px);
  opacity: 1;
  filter: grayscale(0%);
}

/* Divider line */
.partners-divider{
  border: 0;
  height: 1px;
  background: rgba(255,255,255,.14);
  margin: 22px 0;
}

/* Organizations section */
.partner-group--wide{ width: 100%; }
.partner-head--center{
  justify-content: center;
  margin-bottom: 16px;
}
.partner-logos--big{ justify-content: center; }
.partner-logos--big img{
  height: 34px;
  max-width: 150px;
}

/* =========================
   Elegant Dark Glow – OUTER CARD ONLY
   ========================= */
.contact-split .contact-left,
.contact-split .partners-card{
  position: relative;
  border-radius: 22px;
  isolation: isolate;
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.35));
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 18px 60px rgba(0,0,0,.65), 0 0 30px rgba(70,72,110,.15);
}
.contact-split .contact-left::before,
.contact-split .partners-card::before{
  content:"";
  position:absolute;
  inset:-40%;
  background:
    radial-gradient(circle at 25% 15%, var(--glow-dark), transparent 65%),
    radial-gradient(circle at 80% 85%, var(--glow-deeper), transparent 70%);
  filter: blur(30px);
  opacity: .7;
  z-index: 0;
  pointer-events: none;
}
.contact-split .contact-left > *,
.contact-split .partners-card > *{
  position: relative;
  z-index: 1;
}
.contact-split .contact-left:hover,
.contact-split .partners-card:hover{
  box-shadow: 0 22px 70px rgba(0,0,0,.75), 0 0 45px rgba(70,72,110,.22);
}

/* =========================
   HIRE SPLIT (SCOPED)
   ========================= */
#hire.hire-split{
  height: 100%;
  display: flex;
  align-items: center;
}
/* =========================
   FIX: HIRE section cut-off
   ========================= */



#hire.hire-split{
  align-items: flex-start !important;
}

#hire .hire-split__wrap{
  padding-top: 30px;
  padding-bottom: 80px;
  align-items: flex-start !important;
}

#hire .hire-card--services .service-list{
  max-height: calc(100vh - 260px);  
  overflow: auto;
  padding-right: 6px;
}

#hire .hire-card--services .service-list::-webkit-scrollbar{ width: 8px; }
#hire .hire-card--services .service-list::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.14);
  border-radius: 999px;
}

/* Drop section slightly under header */
@media (max-width: 900px){
  #hire{ padding-top: 90px; }
}
@media (max-width: 900px){
  #hire{ padding-bottom: 120px; }
}

#hire .hire-split__wrap{
  width: min(1200px, 92vw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: stretch;
}
@media (max-width: 950px){
  #hire .hire-split__wrap{ grid-template-columns: 1fr; }
}

#hire .hire-card{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  border-radius: 22px;
  padding: 26px;
  backdrop-filter: blur(8px);
  margin-top: 10px;
}

#hire .hire-title{
  margin: 0 0 8px;
  font-size: clamp(22px, 2.2vw, 34px);
}
#hire .hire-sub{
  margin: 0 0 18px;
  opacity: .75;
}

/* Services list */
#hire .service-list{
  display: grid;
  gap: 12px;
}

/* ===== Service Item (FINAL) ===== */
#hire .svc-item{
  position: relative;
  display: flex;
  flex-direction: row-reverse;   /* checkbox right */
  align-items: center;
  justify-content: space-between;
  gap: 14px;

  padding: 18px 22px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  cursor: pointer;

  transition: transform .15s ease, border-color .15s ease;
}
#hire .svc-item:hover{
  border-color: rgba(255,255,255,.18);
  transform: translateY(-1px);
}
#hire .svc-item:has(input:checked){
  border-color: rgba(120,110,190,.45);
  transform: translateY(-2px);
}

/* Text */
#hire .svc-text{
  flex: 1;
  text-align: left;
}
#hire .svc-text b{ display:block; font-size: 16px; }
#hire .svc-text small{ display:block; opacity:.7; margin-top: 4px; }

/* Hide native checkbox */
#hire .svc-item input{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Custom checkbox */
#hire .svc-check{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.05);
  display: grid;
  place-items: center;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.25);
}
#hire .svc-check::after{
  content: "";
  width: 10px;
  height: 18px;
  border-right: 3px solid rgba(255,255,255,.85);
  border-bottom: 3px solid rgba(255,255,255,.85);
  transform: rotate(45deg);
  opacity: 0;
  transition: opacity .18s ease;
}
#hire .svc-item input:checked ~ .svc-check{
  border-color: rgba(140,140,255,.55);
  background: rgba(90,95,160,.18);
  box-shadow: 0 0 0 4px rgba(90,95,160,.12);
}
#hire .svc-item input:checked ~ .svc-check::after{ opacity: 1; }

/* ===== Form fields ===== */
#hire .hire-fields{
  display: grid;
  gap: 14px;
}
#hire .field label{
  display: block;
  font-size: 12px;
  opacity: .8;
  margin-bottom: 6px;
}
#hire .field input{
  width: 100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);
  color: #fff;
  outline: none;
}
#hire .field input:focus{ border-color: rgba(255,255,255,.22); }

/* ===== Message box ===== */
#hire .container_chat_bot{ max-width: 100%; width: 100%; }
#hire .container_chat_bot .container-chat-options{
  position: relative;
  display: flex;
  border-radius: 16px;
  padding: 1.5px;
  overflow: hidden;
  background: linear-gradient(to bottom right, #7e7e7e, #363636, #363636);
}
#hire .container_chat_bot .container-chat-options::after{
  position: absolute;
  content: "";
  top: -10px;
  left: -10px;
  width: 30px;
  height: 30px;
  background: radial-gradient(ellipse at center, #ffffff, rgba(255,255,255,.15), rgba(0,0,0,0));
  filter: blur(1px);
}
#hire .container_chat_bot .chat{
  display: flex;
  width: 100%;
  background-color: rgba(0,0,0,.45);
  border-radius: 15px;
  overflow: hidden;
}
#hire textarea{
  background: transparent;
  border: none;
  width: 100%;
  height: 120px;
  color: #fff;
  font-size: 12px;
  padding: 12px;
  resize: none;
  outline: none;
}
#hire textarea::placeholder{ color:#f3f6fd; opacity:.9; }
#hire textarea:focus::placeholder{ opacity:.45; }

/* ===== Gradient submit button ===== */
#hire .hire-submit{ margin-top: 2px; }
#hire .grad-wrap{
  position: relative;
  padding: 3px;
  border-radius: 0.9em;
  background: linear-gradient(90deg, #03a9f4, #f441a5);
  border: none;
  cursor: pointer;
  transition: all 0.4s ease;
}
#hire .grad-wrap::before{
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  border-radius: 0.9em;
  z-index: -1;
  filter: blur(0);
  transition: filter 0.4s ease;
}
#hire .grad-wrap:hover::before{
  background: linear-gradient(90deg, #03a9f4, #f441a5);
  filter: blur(1.2em);
}
#hire .grad-wrap:active::before{ filter: blur(0.2em); }

#hire .grad-btn{
  display: inline-block;
  font-size: 1.1em;
  padding: 0.75em 1.1em;
  border-radius: 0.55em;
  background-color: #000;
  color: #fff;
  box-shadow: 2px 2px 3px #000000b4;
}

/* =========================
   REMOVE GLOBAL SCROLLBAR
   ========================= */

html,
body{
  max-width: 100%;
  overflow-x: hidden !important; /* remove right scrollbar */
}

/* =========================
   HIRE INTERNAL SCROLL ONLY
   ========================= */

#hire{
  position: relative;
  width: 100%;
  max-width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch;
  padding-top: 70px;
  padding-bottom: 120px;
}


#hire.hire-split{
  align-items: flex-start !important;
}


/* Prevent any Hire element from pushing layout and creating horizontal scroll */
#hire *,
#hire *::before,
#hire *::after{
  box-sizing: border-box;
  max-width: 100%;
}

/* Keep wrapper within viewport */
#hire .hire-split__wrap{
  max-width: 100%;
  overflow: hidden;
}

/* =========================================
   HIDE RIGHT SCROLLBAR (keep scrolling)
   Applies to the template inner-scrollers
   ========================================= */

/* 1) Prevent any horizontal overflow that makes a right bar */
html, body{
  overflow-x: hidden !important;
}

/* 2) Hire section: keep scroll but hide scrollbar */
#hire{
  overflow-y: auto !important;
  overflow-x: hidden !important;

  /* Firefox */
  scrollbar-width: none !important;

  /* IE/old Edge */
  -ms-overflow-style: none !important;
}
#hire::-webkit-scrollbar{
  width: 0 !important;
  height: 0 !important;
}

#hire .hire-card--services .service-list{
  overflow: auto !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
#hire .hire-card--services .service-list::-webkit-scrollbar{
  width: 0 !important;
  height: 0 !important;
}



/* =========================
   INTRO IMAGE — ELEGANT FRAME
   (no HTML changes)
   ========================= */

.intro--banner img{
  border-radius: 22px !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  padding: 10px !important;              
  background: linear-gradient(135deg,
    rgba(255,255,255,.14),
    rgba(255,255,255,.05),
    rgba(0,0,0,.25)
  ) !important;

  box-shadow:
    0 22px 70px rgba(0,0,0,.65),
    0 0 35px rgba(99,102,241,.18) !important;

  backdrop-filter: blur(10px);
  overflow: hidden !important;
}

.intro--banner img{
  object-fit: cover !important;
  filter: contrast(1.05) saturate(1.06) !important;
}

.intro--banner img{
  outline: 1px solid rgba(255,255,255,.10) !important;
  outline-offset: -6px !important;
}


.work--lockup,
.work--lockup .slider,
.work--lockup .slider--item,
.work--lockup .slider--item > a{
  overflow: visible !important;
}

.slider--item-image{
  overflow: visible !important;
  position: relative !important;
}

.slider--item-image::before{
  content:"";
  position: absolute;
  inset: -55px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(99,102,241,0.40),
    rgba(99,102,241,0.18),
    transparent 65%
  );
  filter: blur(28px);
  opacity: 1;
  z-index: -1;          
  pointer-events: none;
}

.slider--item-image img{
  position: relative;
  z-index: 1;
  border-radius: 50%;
  object-fit: cover !important; 
}

/* =========================
   MOBILE FIX PACK (OSHOOT)
   Put at VERY END of development.css
   ========================= */

/* 1) Hide template device notice on phones */
@media (max-width: 900px){
  .device-notification{ display:none !important; }
}

/* 2) Disable heavy 3D perspective/rotate effects on mobile (often breaks layout) */
@media (max-width: 900px){
  .perspective,
  .effect-rotate-left{
    transform: none !important;
    perspective: none !important;
  }

  /* If template applies transforms to container/viewport */
  #viewport,
  .l-viewport,
  .l-wrapper,
  .l-main-content,
  .l-section,
  .section{
    height: auto !important;
    min-height: 100vh !important;
  }

  /* Give sections breathing room under header */
  .l-section.section,
  .section{
    padding-top: 90px !important;
    padding-bottom: 70px !important;
  }
}

/* 3) Header: make it smaller + prevent overflow */
@media (max-width: 520px){
  .header{
    padding: 14px 16px !important;
  }

  .site-logo{
    height: 64px !important;
    width: auto !important;
    max-width: 140px !important;
  }

  /* Optional: hide OSHOOT text to save space */
  .header--logo p{ display:none !important; }

  /* Optional: reduce CTA button size */
  .header--cta.cta{
    padding: 10px 14px !important;
    font-size: 12px !important;
  }
}

/* 4) About slider circle image scales down on phones */
@media (max-width: 520px){
  .slider--item-image{
    width: 220px !important;
    height: 220px !important;
  }
  .slider--item-image::before{
    inset: -26px !important;
    filter: blur(22px) !important;
  }
}

/* 5) Services already has a mobile grid in your CSS — keep cards readable */
@media (max-width: 520px){
  .services-title{ font-size: 34px !important; }
  .services-3d .card{ height: auto !important; min-height: 160px !important; }
}

/* 6) Contact + Partners: remove "height:100%" behavior that can cut content */
@media (max-width: 900px){
  .contact-split{
    height: auto !important;
    align-items: flex-start !important;
    padding-top: 10px !important;
    padding-bottom: 40px !important;
  }

  .contact-left,
  .partners-card{
    padding: 20px !important;
  }
}

/* 7) Partners logos: fit better on small screens */
@media (max-width: 520px){
  .partners-top{ gap: 18px !important; }
  .partner-logos{ gap: 10px 12px !important; }

  .partner-logos img{
    height: 22px !important;
    max-width: 105px !important;
  }

  .partner-logos--big img{
    height: 28px !important;
    max-width: 130px !important;
  }
}

/* 8) Videos section: prevent internal scroll area from being too short on mobile */
@media (max-width: 520px){
  #videos .video-gallery__wrap{
    height: auto !important;
    max-height: none !important;
    padding-top: 90px !important;
    padding-bottom: 60px !important;
    overflow: visible !important; /* let the page scroll naturally */
  }

  /* Modal spacing on small screens */
  .video-modal__content{
    margin: 10vh auto 0 !important;
  }
}

/* =========================================================
   OSHOOT — MOBILE FULL CONTENT FIX
   Put at VERY END of development.css
   ========================================================= */

/* 1) Hide template device notice on mobile */
@media (max-width: 900px){
  .device-notification{ display:none !important; }
}

/* 2) On mobile: break out of "fixed viewport sections" layout
   so content can flow naturally and never gets cut */
@media (max-width: 900px){

  /* disable template 3D wrapper effects */
  .perspective,
  .effect-rotate-left{
    transform: none !important;
    perspective: none !important;
  }

  /* allow normal page scroll */
  html, body{
    height: auto !important;
    overflow-y: auto !important;
  }

  /* make template containers auto-height */
  #viewport,
  .l-viewport,
  .l-wrapper,
  .main-content,
  .l-main-content{
    height: auto !important;
    min-height: 100vh !important;
    overflow: visible !important;
  }

  /* each section becomes normal block (no cut off) */
  .l-section.section,
  .section{
    position: relative !important;
    height: auto !important;
    min-height: 100vh !important;
    overflow: visible !important;
    padding-top: 95px !important;   /* space under header */
    padding-bottom: 70px !important;
  }

  /* side-nav can be hidden on mobile to avoid layout issues */
  .l-side-nav{ display:none !important; }
}

/* 3) HOME: prevent banner image from pushing/cropping */
@media (max-width: 520px){
  .intro--banner{
    padding: 0 16px !important;
  }
  .intro--banner img{
    max-width: 100% !important;
    height: auto !important;
  }
  .intro--options{
    display: grid !important;
    gap: 12px !important;
    padding: 0 16px !important;
  }
}

/* 4) SERVICES: you already have a mobile grid, just ensure wrapper doesn't crop */
@media (max-width: 768px){
  .services-wrapper{
    height: auto !important;
    overflow: visible !important;
  }
}

/* 5) PRODUCTS: force any product grids to stack on phone */
@media (max-width: 900px){
  .products-grid,
  .product-grid,
  .products-list{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
}

/* 6) CONTACT: allow full height + stack columns */
@media (max-width: 900px){
  .contact-split{
    height: auto !important;
    padding: 0 16px !important;
  }
  .contact-split__wrap{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
}

/* 7) PARTNERS inside contact: make logos wrap nicely */
@media (max-width: 520px){
  .partner-logos{
    gap: 10px 12px !important;
  }
  .partner-logos img{
    height: 22px !important;
    max-width: 120px !important;
  }
}

/* 8) HIRE: remove "internal scroll only" on mobile (this is a main cause) */
@media (max-width: 900px){
  #hire{
    height: auto !important;
    overflow: visible !important;   
    padding-top: 95px !important;
    padding-bottom: 90px !important;
  }

  #hire.hire-split{
    height: auto !important;       
    display: block !important;
  }

  #hire .hire-split__wrap{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    overflow: visible !important;
  }

  /* make services list not forced to small viewport height */
  #hire .hire-card--services .service-list{
    max-height: none !important;
    overflow: visible !important;
  }
}

/* =========================================================
   OSHOOT — MOBILE + iPAD: SHOW FULL CONTENT (STACK SECTIONS)
   Put at VERY END of development.css
   ========================================================= */

@media (max-width: 1024px){

  /* hide device warning from template */
  .device-notification{ display:none !important; }

  /* kill 3D transforms that break layout */
  .perspective, .effect-rotate-left{
    transform: none !important;
    perspective: none !important;
  }

  /* allow normal scrolling page */
  html, body{
    height: auto !important;
    overflow-y: auto !important;
  }

  /* viewport wrappers become normal blocks */
  #viewport, .l-viewport, .l-wrapper, .main-content, .l-main-content{
    height: auto !important;
    overflow: visible !important;
  }

  /* IMPORTANT: show all sections as normal blocks */
  .l-main-content{
    position: static !important;
  }

  .l-section.section,
  .section{
    position: static !important;
    height: auto !important;
    min-height: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    overflow: visible !important;

    /* spacing under header */
    padding-top: 95px !important;
    padding-bottom: 70px !important;
  }

  /* side nav + outer nav return often cause weird overlay on small screens */
  .l-side-nav{ display:none !important; }
  .outer-nav--return{ display:none !important; }
}

/* --- Section-specific fixes (because you have internal scroll areas) --- */

/* HIRE: you currently set height:100% + overflow-y:auto (cuts content) */
@media (max-width: 1024px){
  #hire{
    height: auto !important;
    overflow: visible !important;   /* بدل overflow-y:auto */
    padding-bottom: 90px !important;
  }

  #hire .hire-split__wrap{
    overflow: visible !important;
  }

  #hire .hire-card--services .service-list{
    max-height: none !important;
    overflow: visible !important;
  }
}

/* CONTACT: you set .contact-split height:100% (can crop) */
@media (max-width: 1024px){
  .contact-split{
    height: auto !important;
    align-items: flex-start !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .contact-split__wrap{
    grid-template-columns: 1fr !important;
  }
}

/* VIDEOS: you use height:calc(100vh - ...) + inner scroll (cuts on iPad/mobile) */
@media (max-width: 1024px){
  #videos{ height: auto !important; }

  #videos .video-gallery__wrap{
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;  
    padding-bottom: 70px !important;
  }
}