/* =========================================================
   OTHER FLAGS — COMPACT WORKFLOW SECTION ONLY
   1. Right copy larger + white
   2. Four workflow cards premium hover
   ========================================================= */


/* ---------------------------------------------------------
   RIGHT EXPLANATORY COPY ONLY
   --------------------------------------------------------- */

html body
.ofs-process
.ofs-head
> p{
  color:#ffffff !important;

  font-size:13px !important;
  line-height:1.65 !important;
  font-weight:400 !important;

  padding:
    13px 17px !important;

  border-left:
    2px solid #57c4e8 !important;

  border-radius:
    0 8px 8px 0 !important;

  background:
    linear-gradient(
      110deg,
      #123f58 0%,
      #195c78 100%
    ) !important;

  box-shadow:
    0 8px 20px
    rgba(15,65,87,.09) !important;
}


/* ---------------------------------------------------------
   FOUR WORKFLOW CARDS ONLY
   --------------------------------------------------------- */

html body
.ofs-process
.ofs-process-grid
> .ofs-step{
  position:relative !important;
  overflow:hidden !important;

  transition:
    transform .25s cubic-bezier(.22,1,.36,1),
    background .25s ease,
    border-color .25s ease,
    box-shadow .25s ease !important;
}


/* premium hover */
html body
.ofs-process
.ofs-process-grid
> .ofs-step:hover{
  transform:
    translateY(-5px) !important;

  background:
    linear-gradient(
      135deg,
      #10384f 0%,
      #194f70 56%,
      #337fa3 100%
    ) !important;

  border-color:
    #4694b5 !important;

  box-shadow:
    0 17px 32px
      rgba(8,49,69,.17),
    0 0 0 3px
      rgba(69,185,222,.06) !important;
}


/* moving soft shine */
html body
.ofs-process
.ofs-process-grid
> .ofs-step::after{
  content:"";

  position:absolute !important;

  top:-35% !important;
  left:-55% !important;

  width:38% !important;
  height:175% !important;

  pointer-events:none !important;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.16),
      transparent
    ) !important;

  transform:
    skewX(-20deg) !important;

  transition:
    left .55s
    cubic-bezier(.22,1,.36,1) !important;
}


html body
.ofs-process
.ofs-process-grid
> .ofs-step:hover::after{
  left:125% !important;
}


/* number circle */
html body
.ofs-process
.ofs-process-grid
> .ofs-step
.ofs-step-num{
  transition:
    transform .23s ease,
    background .23s ease,
    color .23s ease,
    border-color .23s ease,
    box-shadow .23s ease !important;
}


html body
.ofs-process
.ofs-process-grid
> .ofs-step:hover
.ofs-step-num{
  transform:
    scale(1.08) !important;

  color:#ffffff !important;

  background:
    #2896c0 !important;

  box-shadow:
    0 0 0 4px
      rgba(88,204,239,.09),
    0 0 16px
      rgba(75,201,239,.32) !important;
}


/* card title */
html body
.ofs-process
.ofs-process-grid
> .ofs-step:hover
strong{
  color:#ffffff !important;
}


/* description */
html body
.ofs-process
.ofs-process-grid
> .ofs-step:hover
p{
  color:
    rgba(235,248,252,.82) !important;
}


/* accessibility */
@media(prefers-reduced-motion:reduce){

  html body
  .ofs-process
  .ofs-process-grid
  > .ofs-step,

  html body
  .ofs-process
  .ofs-process-grid
  > .ofs-step::after,

  html body
  .ofs-process
  .ofs-process-grid
  > .ofs-step
  .ofs-step-num{
    transition:none !important;
  }

}