.cc-service-card{position:relative;display:block;aspect-ratio:758/528;min-height:240px;background:#219ce7;color:#263238;text-decoration:none!important;overflow:hidden}
.cc-service-front,.cc-service-back{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:6%;transition:transform .5s ease-in-out;transform-style:preserve-3d;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.cc-service-icon{width:43%;height:58%;overflow:visible;fill:none;stroke:#1d376b;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.cc-service-icon>rect{fill:#d5daeb}.cc-service-icon .cc-disc{fill:#d5daeb;stroke:none}.cc-service-icon .cc-fill,.cc-flow-dot{fill:#1d376b}
.cc-icon-software-development>rect:first-of-type,.cc-icon-application-development>rect:last-of-type,.cc-icon-application-management>rect:first-of-type,.cc-icon-automation-integrations>rect:nth-of-type(odd){fill:#fff}
.cc-apps rect{fill:#fff}.cc-icon-application-management .cc-disc{fill:#fff}
.cc-service-title{display:block;text-align:center;font-size:clamp(18px,1.5vw,30px);line-height:1.18;font-weight:700;margin-top:7%;color:#263238}
.cc-service-front{transform:rotateY(0deg)}
.cc-service-back{opacity:1;transform:rotateY(180deg);background:#00b3ea;text-align:center;gap:12px}
.cc-service-back .cc-service-title{margin:0;font-size:clamp(20px,1.5vw,28px)}
.cc-service-description{font-size:15px;line-height:1.45;color:#263238}.cc-service-more{display:inline-block;border:1px solid #2a2a2a;border-radius:4px;padding:7px 14px;color:#2a2a2a;font-size:14px}
.cc-service-card:hover .cc-service-front,.cc-service-card:focus-visible .cc-service-front{transform:rotateY(-180deg)}
.cc-service-card:hover .cc-service-back,.cc-service-card:focus-visible .cc-service-back{transform:rotateY(0deg)}
.cc-service-card:focus-visible{outline:3px solid #162e61;outline-offset:-3px}
.cc-code{animation:cc-code-pulse 3s ease-in-out infinite}.cc-progress{stroke-dasharray:70;animation:cc-draw 3s ease-in-out infinite}
.cc-apps{animation:cc-code-pulse 3s ease-in-out infinite}.cc-device-check{stroke-dasharray:50;animation:cc-draw 3s ease-in-out infinite}
.cc-gear{transform-origin:167px 125px;animation:cc-turn 10s linear infinite}
.cc-flow-path{stroke-dasharray:8 8;animation:cc-flow 4s linear infinite}.cc-flow-dot{animation:cc-code-pulse 2s ease-in-out infinite}
.cc-service-detail{scroll-margin-top:120px}
.cc-service-detail-row{margin-top:0!important;margin-bottom:0!important;padding:2% 0;background:#219ce7}
.cc-service-detail-row .vc_separator{margin:2% 0 5%}
.cc-service-detail-content{display:flex;align-items:center;gap:40px;padding:24px 0 32px}
.cc-service-detail-art{flex:0 0 370px;max-width:34%;text-align:center}
.cc-service-detail-art .cc-service-icon{width:100%;height:auto;max-width:300px}
.cc-service-detail-copy{flex:1;min-width:0}
.cc-service-detail-copy h3{color:#fff;font-size:1.65em;font-weight:600;line-height:1.3;margin:0 0 16px}
.cc-service-detail-copy p{color:var(--porto-dark-color,#263238);font-size:1.1em;line-height:1.7;margin:0}
.cc-service-detail-copy p+p{margin-top:16px}
@media(max-width:767px){.cc-service-detail-content{flex-direction:column;align-items:flex-start;gap:20px;padding:24px 0}.cc-service-detail-art{flex:none;max-width:100%;width:230px}.cc-service-detail-copy h3{font-size:1.65em}}
@keyframes cc-code-pulse{0%,100%{opacity:1}50%{opacity:.45}}
@keyframes cc-draw{0%,100%{stroke-dashoffset:0}40%{stroke-dashoffset:70}}
@keyframes cc-turn{to{transform:rotate(360deg)}}
@keyframes cc-flow{to{stroke-dashoffset:-64}}
@media(hover:none){.cc-service-card{aspect-ratio:auto;min-height:0}.cc-service-front,.cc-service-back{position:relative}.cc-service-front{padding-bottom:0}.cc-service-icon{height:150px;width:170px}.cc-service-front .cc-service-title{display:none}.cc-service-back{opacity:1;transform:none;background:transparent;padding-top:4%}.cc-service-card:hover .cc-service-front{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.cc-service-icon *{animation:none!important}.cc-service-front,.cc-service-back{transition:none}}

.cc-mobile-face{display:none}
@media(max-width:767px){
  #services .cc-mobile-normalized .vc-hoverbox-inner,
  #services .cc-service-card.cc-mobile-normalized{height:320px!important;min-height:320px!important;aspect-ratio:auto}
  #services .cc-mobile-normalized .vc-hoverbox-front{background-image:none!important}
  #services .cc-mobile-normalized .vc-hoverbox-front>.vc-hoverbox-front-inner,
  #services .cc-service-card.cc-mobile-normalized .cc-service-front>.cc-service-icon,
  #services .cc-service-card.cc-mobile-normalized .cc-service-front>.cc-service-title{display:none}
  #services .cc-mobile-face{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:20px}
  #services .cc-mobile-art{position:relative;display:block;flex:0 0 160px;width:160px;height:160px;overflow:hidden}
  #services .cc-mobile-art img{position:absolute;height:auto!important;max-width:none!important;margin:0!important;pointer-events:none}
  #services .cc-mobile-art svg{display:block;width:160px!important;height:160px!important;max-width:none;overflow:visible}
  #services .cc-mobile-title,
  #services .cc-mobile-normalized .vc-hoverbox-back h2,
  #services .cc-service-card.cc-mobile-normalized .cc-service-back .cc-service-title{font-family:inherit!important;font-size:22px!important;font-weight:700!important;line-height:1.2!important;letter-spacing:0;text-align:center;color:#263238;margin:0!important}
  #services .cc-mobile-title{max-width:100%;min-height:53px;display:flex;align-items:center;justify-content:center}
  #services .cc-mobile-normalized .vc-hoverbox-back p,
  #services .cc-service-card.cc-mobile-normalized .cc-service-description{font-size:15px!important;line-height:1.45!important}
  #services .cc-service-card.cc-mobile-normalized .cc-service-front,
  #services .cc-service-card.cc-mobile-normalized .cc-service-back{position:absolute;inset:0;padding:20px}
  #services .cc-service-card.cc-mobile-normalized .cc-service-front{transform:rotateY(0deg);opacity:1}
  #services .cc-service-card.cc-mobile-normalized .cc-service-back{background:#00b3ea;transform:rotateY(180deg)}
  #services .cc-service-card.cc-mobile-normalized:hover .cc-service-front,
  #services .cc-service-card.cc-mobile-normalized:focus-visible .cc-service-front{transform:rotateY(-180deg)}
  #services .cc-service-card.cc-mobile-normalized:hover .cc-service-back,
  #services .cc-service-card.cc-mobile-normalized:focus-visible .cc-service-back{transform:rotateY(0deg)}
}