body {
  overflow: hidden;
}

h1 {
  font-family: var(--ifm-heading-font-family);
  color: #ffffff;
  font-size: 4rem;
  line-height: 1.1;

  @media (max-width: 997px) {
    font-size: 2.8rem;
  }
}

h2 {
  color: #f5f5f5;
  font-family: var(--ifm-heading-font-family);
  font-size: 2.25rem;
  font-weight: 400;
}

h3 {
  color: #f5f5f5;
  font-family: var(--ifm-heading-font-family);
  font-size: 2rem;
}

h4 {
  color: #f5f5f5;
  font-family: var(--ifm-heading-font-family);
  font-size: 1.875rem;
}

p {
  color: #fff;
  font-size: 1rem;
}

.section {
  padding: 7rem 5rem;

  @media (max-width: 997px) {
    padding: 5rem 2rem;
  }
}

.sectionContainer {
  display: flex;
  max-width: 70rem;
  margin: 0 auto;
}

.ctaButton {
  border-radius: 5rem;
  background: var(--ifm-color-secondary);
  color: var(--ifm-color-primary);
  text-align: center;
  font-family: var(--ifm-font-family-base);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  text-transform: uppercase;
  padding: 1rem 1.75rem;
}

.ctaButtonParent {
  margin-bottom: 1rem;
}

.presentationSection {
  color: #fff;
  width: 100%;
  display: flex;
  justify-content: space-between;
  text-align: center;
  row-gap: 3rem;

  .presentationSectionItem {
    max-width: 19rem;

    > h4 {
      margin: 2rem 0;
    }

    > svg {
      height: 90px;
    }

    > .presentationSectionCTA {
      margin: 3rem 0;
    }

    > p {
      min-height: 80px;
    }
  }

  .presentationSectionItemDark {
    > h4,
    > p {
      color: var(--ifm-color-primary-dark);
    }
  }

  @media (max-width: 997px) {
    flex-direction: column;
    align-items: center;

    .presentationSectionItem {
      max-width: 25rem;

      > h4 {
        margin: 1rem 0;
      }
    }
  }
}

.darkSvg > path {
  fill: var(--ifm-color-primary-dark);
}

/** Banner section */
.heroBanner {
  background-color: var(--ifm-color-primary);

  .heroBannerWrapper {
    gap: 2rem;
    max-width: 90rem;
    align-items: center;

    @media (max-width: 997px) {
      flex-direction: column-reverse;
    }

    > div {
      flex: 1 1 0;
      align-items: center;
      justify-content: center;
      display: flex;
    }

    .verticalStack {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      max-width: 500px;
      gap: 1.5rem;

      > * {
        width: 100%;
      }

      .heroSubtitle {
        font-size: 1.375rem;
        margin-right: auto;
        max-width: 400px;
      }

      .learnMore {
        background: var(--ifm-color-secondary);
        color: var(--ifm-color-primary);
      }
    }
  }

  .heroImageWrapper {
    margin-left: 100px;

    @media (max-width: 1350px) {
      height: 17.25rem;
      margin-left: 0;
      width: 34.5rem;
    }

    @media (max-width: 1175px) {
      height: 11.5rem;
      margin-left: 0;
      width: 23rem;
    }
  }
}

.heroImageContainer {
  height: 23rem;
  width: 46rem;
  position: relative;
  flex-shrink: 0;

  @media (max-width: 1350px) {
    transform: scale(0.75);
  }

  @media (max-width: 1175px) {
    transform: scale(0.5);
  }

  > img {
    max-height: 100%;
  }

  .macMockup {
    z-index: 2;
  }

  .tabletMockup {
    max-height: 21rem;
    position: absolute;
    right: 3rem;
    bottom: 0;
    z-index: 3;
  }

  .phoneMockup {
    max-height: 14.5rem;
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 4;
  }

  .imagesMask {
    position: absolute;
    width: 30.6rem;
    top: 0.51rem;
    left: 2.95rem;
    overflow: hidden;
    background: #000;
    border-top-right-radius: 1rem;
    border-top-left-radius: 1rem;
    z-index: 1;

    .animatingImageContainer {
      display: flex;
      width: 100%;
      height: 100%;

      animation: heroImageLoop 10s linear infinite;
      -moz-animation: heroImageLoop 10s linear infinite;
      -webkit-animation: heroImageLoop 10s linear infinite;

      .screenshot {
        width: 100%;
        z-index: 0;
      }
    }
  }
}

@keyframes heroImageLoop {
  0% {
    transform: translateX(0);
  }
  31% {
    transform: translateX(0);
  }
  33% {
    transform: translateX(-30.6rem);
  }
  64% {
    transform: translateX(-30.6rem);
  }
  66% {
    transform: translateX(-61.2rem);
  }
  98% {
    transform: translateX(-61.2rem);
  }
  100% {
    transform: translateX(-91.8rem);
  }
}

/** whatIs section */
.whatIs {
  background: #302d3d;

  .whatIsWrapper {
    flex-direction: column;
    gap: 5rem;
    text-align: center;
  }
}

/** ReadyToLearn section */
.readyToLearn {
  background: #fdc022;

  .readyToLearnWrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    /* gap: 10rem; */

    .leftColumn {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 2rem;
      max-width: 600px;

      .getStarted {
        background: var(--ifm-color-primary-dark);
        color: #fff;
      }

      .learnTitle {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 1.5rem;

        > h1 {
          color: var(--ifm-color-primary-dark);
        }

        > svg {
          height: 69px;
          width: 74px;

          > path {
            fill: var(--ifm-color-primary-dark);
          }

          @media (max-width: 997px) {
            display: none;
          }
        }
      }

      > p {
        color: var(--ifm-color-primary-dark);
        font-size: 1.5rem;
      }
    }
  }
}

/** BatteriesIncluded section */
.batteriesIncluded {
  background: var(--ifm-color-primary);

  .batteriesIncludedWrapper {
    flex-direction: column;
    gap: 5rem;

    .titleWrapper {
      display: flex;
      align-items: center;
      justify-content: center;
      column-gap: 2.5rem;

      > h1 {
        margin: 0;
        text-align: center;
      }
    }

    .batteriesIncludedItems {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      column-gap: 2rem;
      row-gap: 5rem;

      .batteriesIncludedItem {
        max-width: 16rem;
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;

        > h4 {
          font-size: 1.875rem;
          margin: 1.125rem;
        }

        > p {
          font-weight: 600;
        }
      }

      @media (max-width: 997px) {
        justify-content: space-evenly;
        row-gap: 2rem;
      }
    }
  }
}

.packageDocs {
  text-align: center;
}

/** Get in touch section */
.howCanWeHelp {
  background-color: var(--ifm-color-secondary);

  .howCanWeHelpWrapper {
    flex-direction: column;
    align-items: center;
    gap: 5rem;

    .howCanWeHelpTitles {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 1rem;
      text-align: center;

      > h1 {
        color: var(--ifm-color-primary-dark);
        margin: 0;
      }

      .howCanWeHelpSubtitle {
        color: var(--ifm-color-primary-dark);
        max-width: 30rem;
      }
    }

    .ctaButton {
      color: #fff;
      background: var(--ifm-color-primary-dark);
    }
  }
}

/* Used By section */
.usedBy {
  background-color: var(--ifm-color-primary-dark);

  .usedByWrapper {
    flex-direction: column;
    align-items: center;
    gap: 5rem;
  }

  .usedByLogos {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    column-gap: 2rem;
    row-gap: 5rem;

    @media (max-width: 997px) {
      flex-direction: column;
      align-items: center;
      row-gap: 3rem;
    }
  }
}

/* Footer section */
.footer {
  background: var(--ifm-navbar-background-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4.5rem;
  gap: 2rem;

  @media (max-width: 997px) {
    flex-direction: column;
  }

  > p {
    text-align: center;
    font-size: 0.875rem;
    max-width: 27rem;
    margin-bottom: 0;

    > a {
      color: #fff;
      text-decoration: underline;
    }
  }

  .youtube {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    > div {
      color: #f5f5f5;
      font-size: 0.875rem;
    }
  }
}
