.box {
  border-radius: 7px;
  -webkit-transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1);
  transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1);
}

.box:hover {
  -webkit-transform: translateY(-0.15rem);
          transform: translateY(-0.15rem);
  -webkit-box-shadow: 0 0.5em 5em -0.125em rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.02);
          box-shadow: 0 0.5em 5em -0.125em rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.02);
}

.box-header-title {
  margin-top: 5px;
}

.icon-content {
  margin-left: auto;
  margin-bottom: 1rem;
}

.button {
  -webkit-box-shadow: 5px 5px 10px #d9d9d9, -5px -5px 10px #ffffff;
          box-shadow: 5px 5px 10px #d9d9d9, -5px -5px 10px #ffffff;
}

.header {
  background-color: #ddfbfc;
  border-bottom-left-radius: 66px;
  border-bottom-right-radius: 66px;
  -webkit-box-shadow: 5px 5px 31px 0px rgba(0, 0, 0, 0.116);
          box-shadow: 5px 5px 31px 0px rgba(0, 0, 0, 0.116);
}

.learn-more {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 1rem;
}

#protect-b {
  color: #b2bbcf;
}

#protect-b:hover {
  color: #fff !important;
  background-color: #b2bbcf;
}

#mobility-b {
  color: #d5f38d;
}

#mobility-b:hover {
  color: #a12b2b !important;
  background-color: #d5f38d;
}

.mobility-p {
  background-color: #d5f38d;
  border-radius: 16px;
  -webkit-box-shadow: 0 0.5em 5em -0.125em rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.02);
          box-shadow: 0 0.5em 5em -0.125em rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.02);
  padding: 3rem;
}

.button-m {
  font-weight: 600;
  background-color: #b0ccf0;
  color: #626263;
  -webkit-box-shadow: 5px 5px 12px 0px rgba(0, 0, 0, 0.35);
          box-shadow: 5px 5px 12px 0px rgba(0, 0, 0, 0.35);
}

.button-m:hover {
  color: #d4ff7e;
  background-color: #8db7ee;
  -webkit-box-shadow: 5px 5px 24px 0px rgba(0, 0, 0, 0.35);
          box-shadow: 5px 5px 24px 0px rgba(0, 0, 0, 0.35);
}

#haxing-b {
  color: #0e3c92;
}

#haxing-b:hover {
  color: #ffe7e7 !important;
  background-color: #0e3c92;
}

#encored-b {
  color: #92430e;
}

#encored-b:hover {
  color: #ffe7e7 !important;
  background-color: #92430e;
}

.encored-p {
  background-color: #92430e;
  border-radius: 16px;
  -webkit-box-shadow: 0 0.5em 5em -0.125em rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.02);
          box-shadow: 0 0.5em 5em -0.125em rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.02);
  padding: 3rem;
}

.encored-p .title {
  color: #fff !important;
}

.encored-p .subtitle {
  color: #fff !important;
}

.button-e {
  font-weight: 600;
  background-color: #ddf0b0;
  color: #626362;
  -webkit-box-shadow: 5px 5px 16px 0px #e7e7e759;
          box-shadow: 5px 5px 16px 0px #e7e7e759;
}

.button-e:hover {
  color: #93968e;
  background-color: #e4f0ca;
  -webkit-box-shadow: 5px 5px 31px 0px #e7e7e759;
          box-shadow: 5px 5px 31px 0px #e7e7e759;
}

#ready-b {
  color: #90a857;
}

#ready-b:hover {
  color: #ffe7e7 !important;
  background-color: #90a857;
}

.img-sign-up {
  width: 30%;
}

@media (max-width: 767px) {
  #header-body {
    margin-top: 5rem;
  }
  #haxing-con {
    padding: 2rem;
  }
  #ready-con {
    padding: 2rem;
  }
  #protect-con {
    padding: 2rem;
  }
  .img-sign-up {
    width: 100%;
  }
}
/*# sourceMappingURL=5-vpn.css.map */