/* Universal Service Box – Onum-like scoped styles, no theme conflicts */
.usb-wrap{--usb-primary:#0039e4;--usb-secondary:#04dbf1;--usb-shadow:rgba(42,67,113,0.15);--usb-text:#1b2943;--usb-white:#fff;--usb-icon-color:currentColor;--usb-s2-icon-color:#fff}

/* Base box */
.usb-wrap .s-box{overflow:hidden;position:relative;padding:35px 35px 26px;background:var(--usb-white);box-shadow:8px 8px 30px 0 var(--usb-shadow);border-radius:15px;transition:all .3s linear}
.usb-wrap .s-box *{transition:all .1s linear}

/* Overlay (hover gradient) */
.usb-wrap .s-box .overlay{position:absolute;inset:0;background-image:linear-gradient(145deg,var(--usb-primary),var(--usb-secondary));border-radius:inherit;opacity:0;pointer-events:none}

/* Number / Icon area */
.usb-wrap .s-box .number-box{float:left;width:45px;height:45px;line-height:45px;text-align:center;color:#fff;font-weight:700;border-radius:50%;background-image:linear-gradient(145deg,var(--usb-primary),var(--usb-secondary));box-shadow:8px 8px 20px rgba(42,67,113,.3)}
.usb-wrap .s-box .icon-main i,.usb-wrap .s-box .icon-main span:before,.usb-wrap .s-box .icon-main svg{font-size:28px;line-height:1}
.usb-wrap .s-box .icon-main img,.usb-wrap .s-box .icon-main svg{width:28px;height:28px;max-width:100%;max-height:100%;display:inline-block}

/* Allow icon color via variable */
.usb-wrap .s-box .number-box i,
.usb-wrap .s-box .number-box span:before{color:var(--usb-icon-color)}
.usb-wrap .s-box .number-box svg{fill:var(--usb-icon-color)}

/* Content */
.usb-wrap .s-box .content-box{padding-left:75px;color:var(--usb-text);position:relative;z-index:1}
.usb-wrap .s-box .service-box-title{font-size:18px;font-weight:700;margin:0 0 8px;color:var(--usb-text)}
.usb-wrap .s-box p:last-child{margin-bottom:0}

/* Big number */
.usb-wrap .s-box .big-number{position:absolute;right:35px;bottom:-13px;font-size:88px;font-weight:900;font-family:"Red Hat Display",sans-serif;line-height:1;color:rgba(165,183,210,.2);z-index:0}

/* Hover effects (only when wrapper has .hover-bg-on) */
.usb-wrap.hover-bg-on .s-box:hover .overlay{opacity:1}
.usb-wrap.hover-bg-on .s-box:hover .number-box{background:#fff;color:#00c3ff}
.usb-wrap.hover-bg-on .s-box:hover .content-box,.usb-wrap.hover-bg-on .s-box:hover .service-box-title{color:#fff}
.usb-wrap.hover-bg-on .s-box:hover p{color:#fff}

/* Hide icon container when user disables Icon Box */
.usb-wrap .s-box.no-icon-box .number-box{background:transparent;box-shadow:none;width:auto;height:auto;line-height:1;border-radius:0}
.usb-wrap .s-box.no-icon-box .content-box{padding-left:45px}

/* Style 2 variant */
.usb-wrap .s-box.service-box-s2{display:flex;align-items:flex-start;padding:35px}
.usb-wrap .s-box.service-box-s2 .number-box{width:55px;height:55px;line-height:55px;border-radius:12px;background:#f4f7ff;color:#001a57;box-shadow:8px 8px 20px rgba(42,67,113,.1)}
.usb-wrap .s-box.service-box-s2 .content-box{padding-left:25px}
.usb-wrap .s-box.service-box-s2 .overlay{opacity:0}
.usb-wrap.hover-bg-on .s-box.service-box-s2:hover .overlay{opacity:1}
.usb-wrap.hover-bg-on .s-box.service-box-s2:hover .number-box{background:#fff;color:#00c3ff}

/* Responsive */
@media (max-width:480px){
  .usb-wrap .s-box{padding:25px}
  .usb-wrap .s-box .content-box{padding-left:65px}
  .usb-wrap .s-box.service-box-s2 .content-box{padding-left:20px}
}


/* --- Pink Icon Card (Style 2) refinements --- */
.usb-wrap .service-box-s2 {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 18px;
  background: #ffffff;
  border-radius: 14px;
  padding: 24px 28px;
  box-shadow: 0 10px 30px rgba(16, 24, 40, 0.06);
  transition: transform .25s ease, box-shadow .25s ease;
}
.usb-wrap .service-box-s2 .content-box { padding: 0; }

/* Pink gradient icon container */
.usb-wrap .service-box-s2 .number-box {
  --usb-s2-icon-size: 28px;
  width: 64px;
  height: 64px;
  flex: 0 0 64px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: linear-gradient(135deg, #ff4db8 0%, #ff2e89 100%);
  color: #fff;
  box-shadow: 0 12px 24px rgba(255, 46, 137, 0.25);
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.usb-wrap .service-box-s2 .number-box i,
.usb-wrap .service-box-s2 .number-box span:before { font-size: var(--usb-s2-icon-size); line-height: 1; color: var(--usb-s2-icon-color,#fff); }
.usb-wrap .service-box-s2 .number-box svg { width: var(--usb-s2-icon-size); height: var(--usb-s2-icon-size); fill: var(--usb-s2-icon-color,#fff); }
.usb-wrap .service-box-s2 .number-box img { width: var(--usb-s2-icon-size); height: var(--usb-s2-icon-size); object-fit: contain; filter: brightness(0) invert(1); }

/* Title + paragraph colors */
.usb-wrap .service-box-s2 .service-box-title { margin: 4px 0 6px; color: #111827; font-weight: 700; }
.usb-wrap .service-box-s2 p { margin: 0; color: #6b7280; }

/* Hover effects */
.usb-wrap .service-box-s2:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(16, 24, 40, 0.10); }
.usb-wrap .service-box-s2:hover .number-box { transform: translateY(-2px); box-shadow: 0 16px 28px rgba(255, 46, 137, 0.32); }

/* When icon box disabled on Style 2 */
.usb-wrap .service-box-s2.no-icon-box .number-box{background:transparent;box-shadow:none;width:auto;height:auto;flex:0 0 auto;border-radius:0}

/* Responsive spacing */
@media (max-width: 767px){
  .usb-wrap .service-box-s2 { padding: 18px 20px; gap: 14px; }
  .usb-wrap .service-box-s2 .number-box { width: 56px; height: 56px; flex-basis: 56px; }
}