/* main code */

.hero {
  color: var(--dark);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: calc(var(--page-space) * 3) var(--page-space) var(--page-space)
    var(--page-space);
  margin-top: 3rem;
}

.hero p {
  padding: var(--page-space) 0;
  font-size: var(--medium-text);
}

.hero h1 {
  text-align: center;
}

@media screen and (min-width: 1024px) {
  .hero h1 {
    width: 67%;
  }

  .hero p {
    width: 50%;
  }

  .hero {
    margin-top: 6rem;
    padding: calc(var(--page-space) * 3) var(--page-space);
  }
}

.pinned-section {
  height: 300vh;
  position: relative;
  color: var(--light);
}

.image-container {
  position: relative;
  top: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.content {
  width: 100%;
  height: 100%;
  padding: calc(72px + var(--page-space) / 2) calc(var(--page-space) / 2)
    calc(var(--page-space) / 2) calc(var(--page-space) / 2);
  position: relative;
  overflow: hidden;
}

.image-container img {
  width: 100%;
  height: 100%;
  border-radius: var(--page-space);
  object-fit: cover;
}

.image-container span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 80%;
}

@media screen and (min-width: 1024px) {
  .image-container span {
    width: 600px;
  }
}

.text-pin-first,
.text-pin-second,
.text-pin-third {
  opacity: 0;
}

/* service */
.service {
  height: 100%;
  color: var(--dark);
  display: grid;
  padding: 0 0 6rem 0;
}

.service-title {
  line-height: 1;
}

.service-intro {
  text-align: center;
  padding: calc(var(--page-space) * 2) calc(var(--page-space) * 2);
  color: var(--accent_50);
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  margin-top: calc(var(--page-space) * 2);
  max-width: 100vw;
}

.service-intro .inner {
  width: 100%;
  padding-bottom: calc(var(--page-space) * 1.5);
}

@media screen and (min-width: 1024px) {
  .service-intro .inner {
    width: 63vw;
    display: block;
    margin-top: calc(var(--page-space) * 3);
  }
}

.service .first,
.service .second,
.service .third {
  padding: calc(var(--page-space) * 1);
  padding-bottom: 0;
  width: 100%;
  height: 100%;
}

.service-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.service .first .inner {
  display: grid;
  width: 100%;
  height: 100%;
  padding-top: 4rem;
}

.service .second .inner {
  display: grid;
  width: 100%;
  height: 100%;
  padding-top: 4rem;
}

.service .third .inner {
  display: grid;
  width: 100%;
  height: 100%;
  padding-top: 4rem;
}

.service .visual {
  background-color: var(--grey_25);
  width: 100%;
  height: 100%;
  max-height: 100%;
  max-width: 100%;
  border-radius: 24px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.service-content {
  margin: 3rem 0 0 0;
}

.service-description {
  padding-top: 1.5rem;
  line-height: 1.4;
}

@media screen and (min-width: 800px) {
  .service .first,
  .service .second,
  .service .third {
    padding: calc(var(--page-space) * 2);
  }

  .service .first .inner {
    grid-template-columns: 1.25fr 1fr;
    align-items: center;
    justify-content: space-between;
    height: 100%;
  }

  .service .second .inner {
    grid-template-columns: 1fr 1.25fr;
    align-items: center;
    justify-content: space-between;
  }

  .service .third .inner {
    grid-template-columns: 1.25fr 1fr;
    align-items: center;
    justify-content: space-between;
  }

  .service-content {
    margin: 0 0 0 40px;
  }

  .service-description {
    width: 80%;
  }
}

@media screen and (min-width: 1920px) {
  .service-img {
    object-fit: contain;
  }
}

@media screen and (max-width: 800px) {
  .service .second .inner .service-content {
    order: 2;
  }
}

/* end service */

/* mockup */
.mockup {
  max-width: 100vw;
  position: relative;
  margin-top: -2px;
}

@media screen and (min-width: 1024px) {
  .mockup {
    height: 85vh;
  }
}

.mockup-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  position: relative;
  width: 100%;
  display: grid;
}

@media screen and (min-width: 1024px) {
  .mockup-frame {
    grid-template-columns: 1fr 0.75fr 1fr;
  }
}

video {
  display: block;
}

.mockup-img {
  position: relative;
  z-index: 11;
  height: 67vh;
  width: auto;
  object-fit: contain;
  object-position: bottom;
  border: 4px solid var(--dark);
  border-radius: 40px;
  display: block;
  object-fit: contain;
  justify-self: center;
  margin: 3rem 0 3rem 0;
}

@media screen and (min-width: 1024px) {
  .mockup-img {
    margin: 0 0 -20vh 0;
    height: 90vh;
    border-radius: 52px;
    border: 6px solid var(--dark);
  }
}

.claim {
  opacity: 1;
  text-align: center;
}

@media screen and (max-width: 1024px) {
  .text-left {
    order: 3;
  }
  .text-right {
    order: 3;
  }
}

.marquee {
  margin-top: 6rem;
}

@media screen and (min-width: 1024px) {
  .marquee {
    position: absolute;
    left: 0;
    bottom: 0;
    margin-top: 0;
  }
}

/* feature */
.feature {
  padding: calc(var(--page-space) * 3) calc(var(--page-space) * 1);
  display: flex;
  flex-direction: column;
  max-width: 100vw;
  width: 100vw;
  overflow: hidden;
}

@media screen and (min-width: 1024px) {
  .feature {
    padding: calc(var(--page-space) * 4) calc(var(--page-space) * 3);
  }
}

.feature-nav {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  padding-bottom: calc(var(--page-space) * 3);
  color: var(--accent_50);
  flex-direction: column;
  margin-top: 4rem;
}

@media screen and (min-width: 1024px) {
  .feature-nav {
    margin-top: 24vh;
    flex-direction: row;
    align-items: center;
  }
}

@media screen and (max-width: 1024px) {
  .feature-title {
    margin-bottom: 2rem;
  }
}

/* team */
.team {
  padding: calc(var(--page-space) * 3) calc(var(--page-space) * 1);
  display: flex;
  flex-direction: column;
  max-width: 100vw;
  width: 100vw;
}

.team-img {
  width: 100%;
  border-radius: var(--page-space);
  object-fit: cover;
  max-height: 100vw;
}

.team-title {
  color: var(--accent_50);
  margin-bottom: calc(var(--page-space) * 2.5);
}

.team-container {
  display: grid;
  gap: 3rem;
  grid-template-columns: 1fr;
  justify-content: center;
}

.team-member {
  display: grid;
  gap: 1rem;
  font-size: var(--small-text);
}

.id-title {
  font-weight: bold;
}

.linkedin-icon {
  background-color: transparent;
  color: var(--dark);
  border: none;
  padding: 10px 15px;
  border-radius: 50%;
  border: 1px solid var(--grey_50);
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  position: relative;
  opacity: 1;
}

.linkedin-icon:hover {
  background-color: var(--accent_100);
  border: 1px solid var(--accent_100);
  transition: all 0.3s ease-in-out;
}

@media (min-width: 648px) {
  .team-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (min-width: 967px) {
  .team {
    padding: calc(var(--page-space) * 4) calc(var(--page-space) * 3);
  }
  .team-container {
    grid-template-columns: repeat(4, 1fr);
  }

  .team-container {
    gap: 1rem;
  }
}

/* quote */
.quote {
  background-color: var(--accent_100);
  padding: calc(var(--page-space) * 3) calc(var(--page-space) * 1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

@media screen and (min-width: 1024px) {
  .quote {
    padding: calc(var(--page-space) * 3);
  }
}

.quote .eyebrown {
  padding-bottom: calc(var(--page-space) * 1);
}

.quote .text {
  display: flex;
  flex-direction: column;
  text-align: center;
  padding-bottom: calc(var(--page-space) * 1.75);
  align-items: center;
}

@media screen and (min-width: 1024px) {
  .quote .title {
    width: 75%;
    max-width: 1000px;
  }
}

.quote .description {
  padding-top: calc(var(--page-space) * 1.75);
  line-height: 1.2;
  font-size: var(--medium-text);
}

.quote .subnote {
  padding-top: calc(var(--page-space) * 1.25);
  line-height: 1.4;
}

.quote-cta {
  display: contents;
  text-align: center;
}

.quote-cta a {
  margin: 0.5rem;
  margin-top: 1rem;
}

.quote .underline {
  font-size: var(--body-text);
}

@media screen and (min-width: 1024px) {
  .quote .description {
    max-width: 560px;
  }

  .quote .subnote {
    width: 50%;
  }
}

/* faq */
.faq {
  padding: calc(var(--page-space) * 3) calc(var(--page-space) * 1);
}

@media screen and (min-width: 1024px) {
  .faq {
    padding: calc(var(--page-space) * 6) calc(var(--page-space) * 3);
  }
}

.faq_title {
  color: var(--accent_50);
  margin-bottom: calc(var(--page-space) * 2.5);
}