/* =========================================================
   HONDURAS — COC 5-STEP ROUTE
   HOVER EFFECT ONLY
   ========================================================= */

#assessment-coc .hnd2-route > div{
  transition:
    transform .28s cubic-bezier(.22,1,.36,1),
    background .30s ease,
    border-color .30s ease,
    box-shadow .30s ease !important;
}


/* dark-blue hover */
#assessment-coc .hnd2-route > div:hover,
#assessment-coc .hnd2-route > div:focus-within{
  transform:translateY(-3px) !important;

  background:
    linear-gradient(
      135deg,
      #0d3148 0%,
      #164661 52%,
      #286b91 100%
    ) !important;

  border-color:#58bde2 !important;

  box-shadow:
    0 14px 28px
    rgba(3,32,50,.22) !important;
}


/* heading */
#assessment-coc .hnd2-route > div:hover b,
#assessment-coc .hnd2-route > div:hover strong,
#assessment-coc .hnd2-route > div:focus-within b,
#assessment-coc .hnd2-route > div:focus-within strong{
  color:#ffffff !important;
  opacity:1 !important;
}


/* description */
#assessment-coc .hnd2-route > div:hover small,
#assessment-coc .hnd2-route > div:hover p,
#assessment-coc .hnd2-route > div:focus-within small,
#assessment-coc .hnd2-route > div:focus-within p{
  color:#d8eaf2 !important;
  opacity:1 !important;
}


/* number circle */
#assessment-coc .hnd2-route > div:hover > span,
#assessment-coc .hnd2-route > div:focus-within > span{
  color:#08769e !important;

  background:#e3f7fc !important;

  border-color:#98deef !important;

  box-shadow:
    0 4px 12px
    rgba(0,0,0,.12) !important;
}