@import "./global.css";

/* Hero Block */

.hero__bottom-background {
  margin-top: -1px;
  width: 100%;
}
.hero__image {
  width: 100%;
  height: 35vw;
  object-fit: cover;
}

.hero__wrapper {
  position: relative;
}

.hero__content-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.hero__content:last-child {
  padding-top: 3vw;
}

.hero__image-text {
  width: 37.5vw;
}
.hero__content-wrapper-container--sm {
  display: grid;
  height: 100%;
  grid-template-columns: repeat(2, 36.5% 54%);
  /* align-items: center; */
}

/* .hero__content > img {
  width: 100%;
}

.hero__content:first-child {
  width: 32.2vw;
}

.hero__content:last-child {
  width: 29.4vw;
  position: relative;
  top: 9.7vw;
  right: 2.6vw;
  height: fit-content;
} */

.hero__container--sm {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: center;
  padding-top: clamp(10px, 5.27vw, 110px);
  padding-bottom: 3vw;
}

.hero__container--full {
  background-color: var(--tosca-light);
  color: white;
}

.hero__section {
  display: flex;
  flex-direction: column;
}

.hero__card-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(8px, 0.5vw, 10px);
  width: fit-content;
  place-self: center end;
}

.hero__card-item > img {
  height: clamp(40px, 4vw, 77px);
  width: clamp(70px, 7vw, 130px);
  object-fit: contain;
  padding: 1.3vw 0;
  box-sizing: content-box;
  background-color: var(--tosca-dark);
}

.hero__card-item > p {
  text-align: center;
  font-size: var(--text-xs);
  font-family: var(--grandstander);
  font-weight: 800;
  color: #a1edef;
  margin-top: 0.5vw;
}
.hero__text {
  font-family: var(--nunito);
  font-size: var(--text-base);
  display: block;
  margin-bottom: 2vw;
}

.hero__cta {
  color: white;
  font-weight: var(--font-bold);
  font-size: var(--text-3xl);
  font-family: var(--grandstander);
}
.hero__cta-container {
  place-self: start;
}

.hero__cta-button {
  text-decoration: none;
  color: white;
  background-image: url("/assets/home/button-cta.png") !important;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  padding: 1vw 2vw;
  font-weight: var(--font-bold);
  font-size: var(--button);
}
/* Background Block */
.background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -999;
}
.background__image {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: -2;
}

.background__container--base {
  background-color: white;
  height: 100%;
  filter: drop-shadow(0 0 15px rgba(0, 0, 0, 0.05));
}

/* Our Playbook */
.text-quotes {
  font-size: var(--text-quotes);
  font-family: var(--mochi-pop-one);
  color: var(--black);
  text-align: center;
  margin: 0 auto;
}

/* Line */
.line-left-sort {
  border-right: 3px solid var(--orange);
  height: 6vw;
  max-height: 232px;
  width: 50%;
  margin-top: 3.3vw;
}

/* Quotes */
.quotes {
  margin: 0 auto;
  width: 81.666%;
  position: relative;
  margin-top: 2.47vw;
  margin-left: 9%;
}

.img-about-quotes {
  margin: 0 auto;
  margin-top: 0px;
  display: block;
  width: 47%;
  margin-top: 6%;
  margin-bottom: 5.2vw;
}

/* Team Block */
#team__section {
  position: relative;
  margin: 7.8125vw 0 0;
}
.team__role {
  text-align: center;
}
.team__background-bottom,
.team__background-top {
  width: 100%;
  display: block;
}

.team__icon {
  height: 13vw;
}
.team__title {
  text-align: center;
  font-family: var(--grandstander);
  font-weight: var(--font-extrabold);
  font-size: var(--text-3xl);
  color: white;
  margin-bottom: 8.2vw;
  padding-top: 4vw;
}
.team__role,
.team__name {
  width: fit-content;
  color: white;
}
.team__role {
  font-size: var(--text-md);
  font-weight: var(--font-medium);
  font-family: var(--nunito);
}
.team__name {
  font-family: var(--grandstander);
  font-weight: var(--font-bold);
  font-size: var(--text-2xl);
  margin-top: 1.6vw;
  margin-bottom: 0.3vw;
}
.team__content-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 6vw;
}
.team__content-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.82vw 0;
}

.team__container--full {
  background-color: var(--tosca-light);
  position: relative;
}
.team__background-motives {
  position: absolute;
  left: 0;
  height: 100%;
  width: 100%;
  object-fit: contain;
  z-index: 2;
}

@media (max-width: 641px) {
  /* Hero Block */
  /* .hero__content-container {
    display: none;
  } */
  .hero__container--base {
    display: none;
  }
  .hero__text-container {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .hero__cta-button {
    width: fit-content;
    margin-top: 3vw;
    font-size: var(--text-xs);
    padding: 2.3vw 6vw;
  }
  .hero__image {
    height: 123.8vw;
  }
  .hero__container--sm {
    grid-template-columns: 1fr;
  }
  .hero__text {
    display: block;
    font-size: var(--text-sm);
    font-family: var(--nunito);
    font-weight: var(--font-medium);
    color: white;
    text-align: center;
  }
  .hero__card-container {
    width: 100%;
    margin-top: 11.8vw;
    padding-bottom: 10vw;
  }
  .hero__card-item > img {
    height: 10.2vw;
    width: 100%;
    padding: 5vw 0;
  }
  .hero__card-item > p {
    margin-top: 6.6vw;
  }
  .hero__cta-container {
    place-self: center;
  }
  .hero__container--sm {
    gap: 6vw;
    margin-bottom: 8vw;
  }
  .hero__cta {
    font-size: var(--text-xl);
  }

  .hero__content-wrapper-container--sm {
    grid-template-columns: auto;
  }

  .hero__image-text {
    width: 100%;
  }
  .team__content-wrapper.team__content-filler {
    display: none;
  }
  /* Team Block */
  #team__section {
    margin: 13.5vw 0;
  }
  .team__title {
    font-size: var(--text-xl);
    padding-top: 14vw;
  }
  .team__name {
    font-size: var(--text-md);
    margin-top: 6vw;
    margin-bottom: 2vw;
  }
  .team__role {
    font-size: var(--text-sm);
  }
  .team__icon {
    height: 27.7vw;
  }
  .team__content-container {
    grid-template-columns: repeat(2, 1fr);
    gap: 8vw 0;
    padding-bottom: 8vw;
  }
  /* .team__content-wrapper:last-child {
    grid-column: span 2 / span 2;
  } */

  /* Our Playbook */
  .about-idea {
    grid-template-columns: repeat(1, 100%);
  }
  .text-quotes {
    width: 90%;
  }

  .text-description-content {
    color: var(--gray);
  }
  .box-sub-title-about:nth-last-child(1),
  .box-sub-title-about:nth-last-child(3) {
    border-left: transparent;
  }
  .box-sub-title-about:nth-last-child(1),
  .box-sub-title-about:nth-last-child(2),
  .box-sub-title-about:nth-last-child(3),
  .box-sub-title-about:nth-last-child(4) {
    border-bottom: transparent;
    border-top: transparent;
  }

  /* Qoutes */
  .img-about-quotes {
    margin-bottom: 13.3vw;
    width: 83.3vw;
  }

  .line-left-sort {
    display: none;
  }
}
