/* MVP LED homepage application and delivery icon system. */
.mhr-solution,
.mhr-step {
  position: relative;
  isolation: isolate;
}

.mhr-solution::before,
.mhr-step::before {
  content: "";
  position: absolute;
  top: 24px;
  right: 26px;
  width: 54px;
  height: 54px;
  border-radius: 14px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 31px 31px;
  transition: transform .28s ease, border-color .28s ease, background-color .28s ease;
}

.mhr-solution::before {
  border: 1px solid rgba(24, 200, 239, .28);
  background-color: rgba(24, 200, 239, .07);
  box-shadow: inset 0 0 22px rgba(24, 200, 239, .04);
}

.mhr-solution:hover::before {
  transform: translateY(-4px) scale(1.04);
  border-color: rgba(24, 200, 239, .65);
  background-color: rgba(24, 200, 239, .12);
}

.mhr-solution h3 {
  margin-top: 56px;
}

.mhr-solution:nth-child(1)::before { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0OCA0OCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMThjOGVmIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTcgMzhoMzRNMTAgMzhWMTRoMjh2MjRNMTAgMTloMjhNMTUgMTlsNSA3TTMzIDE5bC01IDdNMjAgMTRWOWg4djVNMTggMzNoMTIiLz48L3N2Zz4="); }
.mhr-solution:nth-child(2)::before { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0OCA0OCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMThjOGVmIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTYgMzdjNC0xMCAxMi0xNiAxOC0xNnMxNCA2IDE4IDE2TTEwIDM3aDI4TTE2IDM3di04aDE2djhNMTggMTBoMTJ2MTFIMTh6TTI0IDEwdjExIi8+PC9zdmc+"); }
.mhr-solution:nth-child(3)::before { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0OCA0OCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMThjOGVmIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTggMThoMzJsLTQtOUgxMmwtNCA5WiBNMTAgMTh2MjFoMjhWMThNMTYgMzlWMjhoMTB2MTFNMzAgMjVoNE0xMiAxOGMwIDMgNSA0IDYgMCAxIDQgNiA0IDcgMCAxIDQgNiA0IDcgMCAxIDMgNiAzIDYgMCIvPjwvc3ZnPg=="); }
.mhr-solution:nth-child(4)::before { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0OCA0OCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMThjOGVmIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTYgMThoMzZMMjQgNyA2IDE4Wk05IDM5aDMwTTYgNDNoMzZNMTIgMTh2MjFNMjAgMTh2MjFNMjggMTh2MjFNMzYgMTh2MjEiLz48L3N2Zz4="); }
.mhr-solution:nth-child(5)::before { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0OCA0OCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMThjOGVmIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHJlY3QgeD0iNiIgeT0iOCIgd2lkdGg9IjM2IiBoZWlnaHQ9IjI3IiByeD0iMiIvPjxwYXRoIGQ9Ik0xOCA0MWgxMk0yNCAzNXY2TTEyIDI3bDctNyA2IDUgMTAtMTBNMTIgMTRoNSIvPjwvc3ZnPg=="); }
.mhr-solution:nth-child(6)::before { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0OCA0OCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMThjOGVmIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHJlY3QgeD0iNSIgeT0iOCIgd2lkdGg9IjM4IiBoZWlnaHQ9IjI1IiByeD0iMiIvPjxwYXRoIGQ9Ik0xNSA0MmgxOE0xOSAzM3Y5TTI5IDMzdjlNMTEgMjVsNy03IDYgNSA4LTkgNSA1Ii8+PC9zdmc+"); }

.mhr-step {
  overflow: hidden;
  background: linear-gradient(145deg, #fff 35%, #f7faff 100%);
  transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease;
}

.mhr-step::before {
  border: 1px solid rgba(8, 119, 255, .18);
  background-color: #eef6ff;
}

.mhr-step::after {
  content: "";
  position: absolute;
  right: -45px;
  bottom: -62px;
  z-index: -1;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(8,119,255,.09), transparent 68%);
  pointer-events: none;
}

.mhr-step:hover {
  transform: translateY(-5px);
  border-color: rgba(8, 119, 255, .32);
  box-shadow: 0 20px 45px rgba(5, 22, 45, .09);
}

.mhr-step:hover::before {
  transform: translateY(-3px) rotate(-2deg);
  border-color: rgba(8, 119, 255, .45);
  background-color: #e5f1ff;
}

.mhr-step:nth-child(1)::before { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0OCA0OCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDg3N2ZmIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PGNpcmNsZSBjeD0iMjQiIGN5PSIyNCIgcj0iMTUiLz48Y2lyY2xlIGN4PSIyNCIgY3k9IjI0IiByPSI3Ii8+PHBhdGggZD0iTTI0IDR2OE0yNCAzNnY4TTQgMjRoOE0zNiAyNGg4TTI0IDIwdjRsNCAzIi8+PC9zdmc+"); }
.mhr-step:nth-child(2)::before { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0OCA0OCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDg3N2ZmIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTkgMzloMzBNMTIgMzQgMjcgOWw5IDUtMTUgMjVNMjAgMjBsOSA2TTEzIDMxbDkgNU0zMSA4bDYgNE04IDEwaDEwTTggMTB2MTAiLz48L3N2Zz4="); }
.mhr-step:nth-child(3)::before { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0OCA0OCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDg3N2ZmIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTYgNDFWMTlsMTIgN1YxOWwxMiA3VjEyaDl2MjlINlpNMzAgMTdoOU0xMiAzM2g0TTIyIDMzaDRNMzIgMzNoNCIvPjwvc3ZnPg=="); }
.mhr-step:nth-child(4)::before { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0OCA0OCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDg3N2ZmIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTUgMTJoMjV2MjNINXpNMzAgMjFoN2w2IDd2N0gzME0xMCAyMGgxM00xMCAyNmg5Ii8+PGNpcmNsZSBjeD0iMTMiIGN5PSIzNyIgcj0iNCIvPjxjaXJjbGUgY3g9IjM2IiBjeT0iMzciIHI9IjQiLz48L3N2Zz4="); }

@media (max-width: 640px) {
  .mhr-solution::before,
  .mhr-step::before {
    top: 22px;
    right: 22px;
    width: 50px;
    height: 50px;
    background-size: 28px 28px;
  }

  .mhr-solution h3 {
    margin-top: 48px;
  }
}