/* ===== Services cards: use Why Us container animation only, without changing service design ===== */
.services-animation-section .services-animated-card{
  position:relative !important;
  overflow:hidden !important;
  isolation:isolate !important;
  will-change:transform,opacity,box-shadow !important;
  transition:
    transform .45s ease,
    box-shadow .45s ease,
    border-color .45s ease,
    background .45s ease,
    opacity .75s ease !important;
}

.services-animation-section.services-animation-ready .services-animated-card{
  opacity:0 !important;
  transform:translate3d(0,54px,0) scale(.965) !important;
}

.services-animation-section.services-animation-ready .services-animated-card.is-visible{
  opacity:1 !important;
  transform:translate3d(0,0,0) scale(1) !important;
}

.services-animation-section.services-animation-ready .services-animated-card.is-visible:hover{
  transform:translateY(-12px) scale(1.01) !important;
}

.services-animation-section .services-animated-card .photo,
.services-animation-section .services-animated-card .text,
.services-animation-section .services-animated-card .read-more{
  position:relative !important;
  z-index:1 !important;
}

.services-animation-section .service-card-shine{
  position:absolute !important;
  inset:-140% -60% !important;
  background:linear-gradient(120deg,transparent 35%,rgba(255,255,255,.08) 42%,rgba(255,255,255,.28) 50%,rgba(255,255,255,.08) 58%,transparent 65%) !important;
  transform:translateX(80%) rotate(10deg) !important;
  opacity:0 !important;
  z-index:3 !important;
  transition:.75s ease !important;
  pointer-events:none !important;
}

.services-animation-section .services-animated-card:hover .service-card-shine{
  opacity:1 !important;
  transform:translateX(-80%) rotate(10deg) !important;
}

.services-animation-section .service-animated-border{
  position:absolute !important;
  inset:0 !important;
  border-radius:inherit !important;
  padding:1px !important;
  background:linear-gradient(130deg,rgba(19,121,197,0),rgba(19,121,197,.35),rgba(37,161,235,.35),rgba(7,31,85,0)) !important;
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0) !important;
  -webkit-mask-composite:xor !important;
  mask-composite:exclude !important;
  opacity:0 !important;
  transition:opacity .4s ease !important;
  z-index:2 !important;
  pointer-events:none !important;
}

.services-animation-section .services-animated-card:hover .service-animated-border{
  opacity:1 !important;
  animation:serviceBorderSpin 4s linear infinite !important;
}

@keyframes serviceBorderSpin{
  to{ transform:rotate(360deg); }
}

.services-animation-section .service-pulse-orb{
  position:absolute !important;
  width:120px !important;
  height:120px !important;
  border-radius:50% !important;
  background:radial-gradient(circle,rgba(37,161,235,.18),transparent 70%) !important;
  filter:blur(8px) !important;
  z-index:0 !important;
  opacity:0 !important;
  transition:.45s ease !important;
  pointer-events:none !important;
}

.services-animation-section .services-animated-card:hover .service-pulse-orb{
  opacity:1 !important;
  animation:servicePulseMove 2.4s ease-in-out infinite !important;
}

@keyframes servicePulseMove{
  0%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(12px,-10px) scale(1.08); }
  100%{ transform:translate(0,0) scale(1); }
}

.services-animation-section .service-ripple{
  position:absolute !important;
  width:18px !important;
  height:18px !important;
  border-radius:50% !important;
  background:rgba(255,255,255,.45) !important;
  transform:translate(-50%,-50%) scale(0) !important;
  animation:serviceRipple .7s ease-out forwards !important;
  pointer-events:none !important;
  z-index:10 !important;
}

@keyframes serviceRipple{
  to{ transform:translate(-50%,-50%) scale(16); opacity:0; }
}

@media (max-width:899px){
  .services-animation-section.services-animation-ready .services-animated-card.is-visible:hover{
    transform:translate3d(0,0,0) scale(1) !important;
  }
}

@media (prefers-reduced-motion: reduce){
  .services-animation-section.services-animation-ready .services-animated-card,
  .services-animation-section.services-animation-ready .services-animated-card.is-visible{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
    animation:none !important;
  }

  .services-animation-section .service-card-shine,
  .services-animation-section .service-animated-border,
  .services-animation-section .service-pulse-orb,
  .services-animation-section .service-ripple{
    display:none !important;
  }
}

/* ===== Visible lower-corner square from Why Us cards, applied to Services cards ===== */
.services-animation-section .services-animated-card::after{
  content:"" !important;
  position:absolute !important;
  width:190px !important;
  height:190px !important;
  left:-105px !important;
  right:auto !important;
  bottom:-105px !important;
  top:auto !important;
  transform:rotate(45deg) !important;
  border:30px solid rgba(19,121,197,.05) !important;
  border-radius:0 !important;
  background:transparent !important;
  opacity:1 !important;
  z-index:0 !important;
  pointer-events:none !important;
  transition:.45s ease !important;
}

.services-animation-section .services-animated-card:hover::after{
  left:-82px !important;
  bottom:-82px !important;
  transform:rotate(135deg) !important;
  border-color:rgba(19,121,197,.07) !important;
}