.services-hero{background-image:url('services-hero.png')}.services-dashboard{position:relative;min-height:390px}.services-monitor{position:absolute;left:5px;bottom:5px;width:515px;height:330px;padding:11px 11px 23px;border:4px solid #273747;border-radius:16px;background:#26323f;box-shadow:0 23px 38px rgba(0,0,0,.3)}.services-monitor:after{content:"";position:absolute;left:190px;right:190px;bottom:-13px;height:13px;border-radius:0 0 12px 12px;background:#6c7883}.services-screen{overflow:hidden;height:100%;border-radius:7px;color:#526987;background:#f6f9fd;font-size:8px}.services-bar{height:30px;padding:0 12px;display:flex;align-items:center;color:#fff;background:linear-gradient(90deg,#0673ed,#169bff)}.services-bar small{margin:auto}.services-body{height:calc(100% - 30px);display:grid;grid-template-columns:82px 1fr}.services-body aside{padding:12px 9px;display:grid;align-content:start;gap:14px;background:#fff}.services-body aside b{color:#0875ff}.services-data{padding:13px}.services-data h3{margin:0;color:#06184d;font-size:13px}.services-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:12px}.services-stats span{padding:8px;border:1px solid #e3eaf3;border-radius:5px;background:#fff}.services-stats b,.services-stats em{display:block;margin-top:5px}.services-stats b{color:#06184d;font-size:10px}.services-stats em{color:#20b57a;font-style:normal}.services-stats span:last-child em{color:#f05252}.services-charts{display:grid;grid-template-columns:1.2fr .8fr;gap:8px;margin-top:8px}.services-charts>div{height:130px;padding:9px;border:1px solid #e3eaf3;border-radius:5px;background:#fff}.services-charts figure{height:85px;margin:10px 0 0;display:flex;align-items:flex-end;justify-content:center;gap:7px}.services-charts figure i{width:10px;background:linear-gradient(#249dff 55%,#35c99c 55%)}.services-charts figure i:nth-child(1){height:30%}.services-charts figure i:nth-child(2){height:45%}.services-charts figure i:nth-child(3){height:55%}.services-charts figure i:nth-child(4){height:68%}.services-charts figure i:nth-child(5){height:78%}.services-charts figure i:nth-child(6){height:88%}.services-charts figure i:nth-child(7){height:100%}.services-charts .donut{width:76px;height:76px;margin:18px auto;border-radius:50%;background:conic-gradient(#1689fa 0 35%,#38c7b3 35% 60%,#6758d9 60% 82%,#9ae0d0 82%);position:relative}.services-charts .donut:after{content:"";position:absolute;inset:18px;border-radius:50%;background:#fff}.services-note{position:absolute;right:-65px;bottom:-6px;color:#1475f4;font-family:cursive;font-size:20px;line-height:1.25;transform:rotate(-7deg)}.service-invoice{display:grid;gap:7px}.service-invoice small,.service-invoice strong{display:block}.service-invoice span{position:absolute;right:8px;top:8px;padding:3px 6px;border-radius:4px;color:#fff;background:#27b96f}.service-profit{display:grid;gap:8px}.service-profit span{display:grid;grid-template-columns:50px 1fr 22px;align-items:center;gap:4px}.service-profit span i{height:7px;background:#299af5}.service-team{display:flex;flex-wrap:wrap;align-items:center;gap:6px}.service-team>span,.service-team>i{width:29px;height:29px;border-radius:50%;display:grid;place-items:center;background:#edf3ff}.service-team>i{color:#0875ff}.service-team small{flex-basis:100%;margin-top:9px;text-align:center}.services-page .retail-feature-grid>article{min-height:205px}.services-page .retail-hero h1 span{color:#ffc77f}
@media(max-width:1100px){.services-dashboard{transform:scale(.86);transform-origin:left center}}
@media(max-width:767px){.services-hero{background-position:68% center}.services-dashboard{min-height:350px;transform:scale(.68);transform-origin:left top;width:145%;margin-bottom:-100px}.services-note{display:none}}

/* Keep the handwritten message inside the clipped hero and readable over the photo. */
.services-note {
  right: 0;
  bottom: 0;
  z-index: 3;
  max-width: 190px;
  padding: 10px 14px;
  border-radius: 10px;
  color: #0868ef;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 8px 22px rgba(7, 29, 85, .12);
  text-align: center;
}

@media(max-width:1100px) {
  .services-note {
    right: 8px;
    bottom: 12px;
  }
}

@media(max-width:767px) {
  .services-note {
    display: none;
  }
}