/* ================= BO SERVICES WIDGET — default styling =================
   Scoped under .bo-services-wrap. Self-contained: reproduces the exact
   section-head + services-grid rules from the main stylesheet, including
   its 980px / 640px responsive breakpoints.
   ========================================================================= */

.bo-services-wrap{
  --svc-navy: #031B39;
  --svc-accent: #1083E6;
  --svc-slate: #54627A;
  --svc-slate-light: #8B97A8;
  --svc-bg: #F7F9FC;
  --svc-line: #E4E8EE;
  --svc-ease: cubic-bezier(.22,1,.36,1);
  --svc-ease-spring: cubic-bezier(.34,1.56,.64,1);

  --svc-section-bg: transparent;
  --svc-pad-top: 80px;
  --svc-pad-bottom: 80px;
  --svc-container-max: 1220px;
  --svc-head-margin: 46px;

  --svc-icon-size: 42px;
  --svc-icon-radius: 11px;
  --svc-icon-bg: var(--svc-bg);
  --svc-icon-border: var(--svc-line);
  --svc-icon-hover-bg: var(--svc-navy);

  font-family:'Roboto', sans-serif;
}

.bo-services-wrap,
.bo-services-wrap *,
.bo-services-wrap *::before,
.bo-services-wrap *::after{
  box-sizing: border-box;
}

.bo-services-wrap section{
  background: var(--svc-section-bg);
  padding: var(--svc-pad-top) 0 var(--svc-pad-bottom);
  overflow-x: hidden;
}

.bo-services-wrap .svc-wrap{
  max-width: var(--svc-container-max);
  margin: 0 auto;
  padding: 0 40px;
}

/* ---------- Section head ---------- */
.bo-services-wrap .svc-eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--svc-accent);
  font-weight:500;
  display:flex;
  align-items:center;
  gap:10px;
}
.bo-services-wrap .svc-eyebrow::before{
  content:'';
  width:18px; height:1px;
  background:var(--svc-accent);
  display:inline-block;
}
.bo-services-wrap .section-head{ max-width:620px; margin-bottom:var(--svc-head-margin); }
.bo-services-wrap .section-head h2{
  font-family:'Roboto Slab', serif;
  font-weight:600;
  letter-spacing:-0.01em;
  color:var(--svc-navy);
  line-height:1.12;
  font-size:36px;
  margin-top:14px;
}
.bo-services-wrap .section-head p{
  color:var(--svc-slate);
  line-height:1.6;
  margin-top:14px;
  font-size:15.5px;
}

/* ---------- Grid ---------- */
.bo-services-wrap .services-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:var(--svc-line);
  border:1px solid var(--svc-line);
  border-radius:16px;
  overflow:hidden;
}
.bo-services-wrap .service-card{
  background:#fff;
  padding:34px 30px;
  position:relative;
  transition:background .4s var(--svc-ease), transform .4s var(--svc-ease);
}
.bo-services-wrap .service-card:hover{
  background:#FBFAF7;
  transform:translateY(-3px);
  z-index:2;
  box-shadow:0 24px 48px -28px rgba(11,31,58,.2);
}
.bo-services-wrap .service-num{
  font-family:'IBM Plex Mono', monospace;
  font-size:11.5px;
  color:var(--svc-accent);
  margin-bottom:18px;
  display:block;
}
.bo-services-wrap .service-icon{
  width:var(--svc-icon-size); height:var(--svc-icon-size);
  border-radius:var(--svc-icon-radius);
  background:var(--svc-icon-bg);
  border:1px solid var(--svc-icon-border);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:18px;
  transition:all .4s var(--svc-ease-spring), background .3s var(--svc-ease), border-color .3s var(--svc-ease);
}
.bo-services-wrap .service-card:hover .service-icon{
  background:var(--svc-icon-hover-bg);
  border-color:var(--svc-icon-hover-bg);
  transform:translateY(-3px) rotate(-4deg) scale(1.06);
}
.bo-services-wrap .service-icon svg{
  width:calc(var(--svc-icon-size) * 0.45); height:calc(var(--svc-icon-size) * 0.45);
  transition:stroke .4s var(--svc-ease), fill .4s var(--svc-ease), color .4s var(--svc-ease);
}
.bo-services-wrap .service-icon i{
  font-size:calc(var(--svc-icon-size) * 0.42);
  line-height:1;
  transition:color .4s var(--svc-ease);
}

.bo-services-wrap .service-card h3{
  font-family:'Roboto', sans-serif;
  font-size:18px;
  margin-bottom:9px;
  font-weight:600;
  letter-spacing:0;
  color:var(--svc-navy);
}
.bo-services-wrap .service-card p{
  font-size:13.5px;
  margin-bottom:16px;
  color:var(--svc-slate);
  line-height:1.6;
}
.bo-services-wrap .service-link{
  font-size:12.5px;
  font-weight:600;
  color:var(--svc-navy);
  display:inline-flex;
  align-items:center;
  gap:7px;
  text-decoration:none;
}
.bo-services-wrap .service-link svg{
  width:13px; height:13px;
  transition:transform .3s var(--svc-ease);
}
.bo-services-wrap .service-card:hover .service-link svg{ transform:translateX(4px); }

/* ---------- Reveal helper (self-contained, no theme JS required) ---------- */
.bo-services-wrap .reveal{
  opacity:0; transform:translateY(26px);
  transition:opacity .8s var(--svc-ease), transform .8s var(--svc-ease);
}
.bo-services-wrap .reveal.in{ opacity:1; transform:translateY(0); }

.bo-services-wrap .stagger-children > *{
  opacity:0; transform:translateY(20px);
  transition:opacity .7s var(--svc-ease), transform .7s var(--svc-ease);
}
.bo-services-wrap .stagger-children.in > *{ opacity:1; transform:translateY(0); }
.bo-services-wrap .stagger-children.in > *:nth-child(1){ transition-delay:0ms; }
.bo-services-wrap .stagger-children.in > *:nth-child(2){ transition-delay:90ms; }
.bo-services-wrap .stagger-children.in > *:nth-child(3){ transition-delay:180ms; }
.bo-services-wrap .stagger-children.in > *:nth-child(4){ transition-delay:270ms; }
.bo-services-wrap .stagger-children.in > *:nth-child(5){ transition-delay:360ms; }
.bo-services-wrap .stagger-children.in > *:nth-child(6){ transition-delay:450ms; }

@media (prefers-reduced-motion: reduce){
  .bo-services-wrap .reveal,
  .bo-services-wrap .stagger-children > *{ opacity:1; transform:none; transition:none; }
}

/* ---------- Editor-active safety net ----------
   Elementor adds this class to the preview iframe <body> so plugins can
   force-show scroll-reveal content while editing, independent of any
   JS timing race. */
body.elementor-editor-active .bo-services-wrap .reveal,
body.elementor-editor-active .bo-services-wrap .stagger-children,
body.elementor-editor-active .bo-services-wrap .stagger-children > *{
	opacity: 1 !important;
	transform: none !important;
}

/* ================= RESPONSIVE ================= */
@media (max-width:640px){
  .bo-services-wrap .svc-wrap{
    padding: 0 20px;
    width: 100%;
    max-width: 100%;
  }
}