/* =========== Landing page =========== */

/* Import */
@import url("/?originalUrl=https%3A%2F%2Fcounter.dev%2Fstyles.css");

/* Hero */
.hero-wrap {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding-top: 64px;
}

.hero {
  width: 540px;
  height: 486px;
  background-image: url("/?originalUrl=https%3A%2F%2Fcounter.dev%2Fimg%2Fhero.svg");
}

.hero-cards {
  width: 540px;
  height: 436px;
  background-image: url("/?originalUrl=https%3A%2F%2Fcounter.dev%2Fimg%2Fhero-cards.svg");
  animation-duration: 5s;
  animation-iteration-count: infinite;
}

.bounce {
  animation-name: bounce;
  animation-timing-function: linear;
}
@keyframes bounce {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(25px);
  }
  100% {
    transform: translateY(0);
  }
}
.description {
  width: 445px;
}

/* Benefits */
.benefits {
  height: 659px;
  background: url("/?originalUrl=https%3A%2F%2Fcounter.dev%2Fimg%2Fgraph.svg") bottom no-repeat;
  margin-top: 96px;
}

.benefits-wrap {
  display: flex;
  width: 100%;
  justify-content: space-between;
}

.benefits-items {
  width: 540px;
}

.benefits-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #ffffff;
  margin-bottom: 16px;
  padding: 32px 32px 32px 0;
  box-shadow:
    -1px 0px 0px #147efb,
    0px 24px 24px rgba(0, 0, 0, 0.03);
}

.benefits-item-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 96px;
  height: 88px;
  box-shadow: 1px 0px 0px #e0e0e0;
}

.benefits-item-icon-free {
  width: 48px;
  height: 48px;
  background-image: url("/?originalUrl=https%3A%2F%2Fcounter.dev%2Fimg%2Ffree.svg");
}
.benefits-item-icon-open {
  width: 48px;
  height: 48px;
  background-image: url("/?originalUrl=https%3A%2F%2Fcounter.dev%2Fimg%2Fopen.svg");
}
.benefits-item-icon-privacy {
  width: 48px;
  height: 48px;
  background-image: url("/?originalUrl=https%3A%2F%2Fcounter.dev%2Fimg%2Fprivacy.svg");
}
.benefits-item-description {
  width: 380px;
}

.benefits-pic {
  width: 445px;
  height: 488px;
  background-image: url("/?originalUrl=https%3A%2F%2Fcounter.dev%2Fimg%2Fuser.svg");
}

/* Features */
.features {
  margin-bottom: 64px;
}
.features-item {
  width: 255px;
}

.features-item-pic {
  width: 100%;
  height: 150px;
  background: #147efb;
  border-radius: 3px 3px 0px 0px;
  text-align: center;
}

.features-item-description {
  min-height: 200px;
  padding: 16px 32px 32px 32px;
  box-shadow: inset 0px 0px 0px 1px #e0e0e0;
  border-radius: 0px 0px 3px 3px;
}

/* Open source */
.open-source {
  margin-bottom: 96px;
}
.open-source .content {
  justify-content: space-between;
}
.open-source-description {
  width: 255px;
}

.open-source-services {
  width: 730px;
  height: 160px;
  display: flex;
  align-items: flex-end;
  font: 700 18px "Nunito Sans";
  background: url("/?originalUrl=https%3A%2F%2Fcounter.dev%2Fimg%2Fservices.svg") top no-repeat;
}

.open-source-services span:nth-child(1) {
  margin-right: 140px;
}
.open-source-services span:nth-child(2) {
  margin-right: 232px;
}

/* Mobile */
@media (max-width: 1110px) {
  .benefits-pic,
  .hero,
  .open-source {
    display: none;
  }
  .hero-wrap {
    align-items: unset;
    justify-content: unset;
    padding-top: 24px;
  }
  .description {
    width: 100%;
  }
  .description .title {
    margin: 16px 0 32px 0;
  }
  .benefits {
    height: unset;
    background: unset;
    margin-top: 32px;
  }
  .benefits-items {
    width: 100%;
  }
  .benefits-item {
    padding: 24px;
    align-items: unset;
    margin-bottom: 8px;
    justify-content: unset;
  }
  .benefits-item-icon {
    width: 24px;
    height: 24px;
    box-shadow: none;
    margin-right: 16px;
  }
  .benefits-item-icon-free {
    width: 24px;
    height: 24px;
    background-image: url("/?originalUrl=https%3A%2F%2Fcounter.dev%2Fimg%2Ffree-sm.svg");
  }
  .benefits-item-icon-open {
    width: 24px;
    height: 24px;
    background-image: url("/?originalUrl=https%3A%2F%2Fcounter.dev%2Fimg%2Fopen-sm.svg");
  }
  .benefits-item-icon-privacy {
    width: 24px;
    height: 24px;
    background-image: url("/?originalUrl=https%3A%2F%2Fcounter.dev%2Fimg%2Fprivacy-sm.svg");
  }
  .benefits-item-description {
    width: unset;
  }
  .features {
    margin: 24px 0 16px 0;
  }
  .features-item {
    width: 100%;
  }
  .features-item-description {
    min-height: unset;
    padding: 16px 24px 24px 24px;
  }
  .features-item-description h3 {
    margin-bottom: 8px;
  }
}