@import url("https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Outfit:wght@100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Red+Hat+Display:ital,wght@0,300..900;1,300..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
:root {
  --color-cyan-600: #4D96A9;
  --color-cyan-300: #8FE3F9;
  --color-purple-600: #855FB1;
  --color-purple-300: #D9B8FF;
  --color-slate-300: #D1D1DF;
  --color-slate-600: #87879D;
  --color-slate-900: #28283D;
  --color-white: #FAFAFA;
  --spacing-50: .25rem;
  --spacing-100: .5rem;
  --spacing-200: 1rem;
  --spacing-300: 1.5rem;
  --spacing-400: 2rem;
  --spacing-500: 2.5rem;
  --spacing-700: 3.5rem;
  --spacing-800: 4rem;
  --spacing-900: 4.5rem;
  --spacing-1000: 5rem;
  --spacing-1400: 7rem; }

/* 1. Use a more-intuitive box-sizing model */
*, *::before, *::after {
  box-sizing: border-box; }

/* 2. Remove default margin */
* {
  margin: 0; }

body {
  /* 3. Add accessible line-height */
  line-height: 1.5;
  /* 4. Improve text rendering */
  -webkit-font-smoothing: antialiased;
  background-color: var(--color-white); }

/* 5. Improve media defaults */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%; }

/* 6. Inherit fonts for form controls */
input, button, textarea, select {
  font: inherit; }

/* 7. Avoid text overflows */
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word; }

/* 8. Improve line wrapping */
p {
  text-wrap: pretty; }

h1, h2, h3, h4, h5, h6 {
  text-wrap: balance; }

/*
  9. Create a root stacking context
*/
#root, #__next {
  isolation: isolate; }

.main {
  display: grid;
  grid-template-rows: 108px auto auto auto; }

.nav {
  display: flex;
  justify-content: center;
  align-items: flex-end; }

.hero {
  margin-inline: auto;
  padding: var(--spacing-800) var(--spacing-1000); }
  @media only screen and (max-width: 770px) {
    .hero {
      padding-inline: 0; } }
  @media only screen and (max-width: 375px) {
    .hero {
      padding-top: var(--spacing-400);
      padding-bottom: var(--spacing-800); } }

.combined {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  place-items: center;
  gap: var(--spacing-400); }
  @media only screen and (max-width: 770px) {
    .combined {
      grid-template-columns: repeat(2, 1fr); } }

@media only screen and (max-width: 770px) {
  .hero__text-content {
    grid-row: 2;
    grid-column: span 2; } }

.faces-left {
  transform: translate(-27%); }
  @media only screen and (max-width: 770px) {
    .faces-left {
      grid-column: 1;
      transform: translate(0); } }

.faces-right {
  transform: translate(27%, 19%); }
  @media only screen and (max-width: 770px) {
    .faces-right {
      grid-column: 2;
      transform: translate(0); } }

.button {
  padding: 1rem 2.5rem;
  border-radius: 29px;
  border: none;
  color: var(--color-white);
  font-family: "Red Hat Display", sans-serif;
  font-weight: 800;
  font-size: 1rem;
  line-height: 150%;
  letter-spacing: 0; }
  .button--blue {
    background-color: var(--color-cyan-600); }
    .button--blue:hover {
      background-color: #71C0D4;
      cursor: pointer; }
  .button--purple {
    background-color: var(--color-purple-600); }
    .button--purple:hover {
      background-color: #B18BDD;
      cursor: pointer; }
  .button__version {
    color: var(--color-cyan-300); }

.hero {
  text-align: center;
  font-family: "Red Hat Display", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  color: var(--color-slate-900); }
  .hero__title {
    font-weight: 850;
    font-size: 4rem;
    line-height: 110%;
    letter-spacing: 0; }
    @media only screen and (max-width: 770px) {
      .hero__title {
        font-size: 3rem; } }
    @media only screen and (max-width: 375px) {
      .hero__title {
        font-size: 2.5rem; } }
  .hero__description {
    font-weight: 600;
    font-size: 1.125rem;
    line-height: 150%;
    letter-spacing: 0;
    color: var(--color-slate-600); }
    @media only screen and (max-width: 770px) {
      .hero__description {
        font-size: 1rem; } }
  .hero__text-content {
    max-width: 28rem;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-400); }
  .hero__buttons {
    display: flex;
    gap: 1rem;
    justify-content: center; }
    @media only screen and (max-width: 375px) {
      .hero__buttons {
        flex-direction: column;
        align-items: center; } }

.main-content {
  padding-top: var(--spacing-700);
  padding-bottom: var(--spacing-900);
  padding-inline: var(--spacing-1000); }
  @media only screen and (max-width: 770px) {
    .main-content {
      padding-inline: var(--spacing-400);
      padding-bottom: var(--spacing-800); } }
  @media only screen and (max-width: 375px) {
    .main-content {
      padding-top: var(--spacing-400);
      padding-bottom: var(--spacing-800); } }
  .main-content__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-800); }
  .main-content__image-collage {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-400); }
    @media only screen and (max-width: 375px) {
      .main-content__image-collage {
        grid-template-columns: repeat(2, 1fr); } }
  .main-content__image {
    width: 100%;
    border-radius: .5rem; }
  .main-content__text-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    max-width: 34.625rem;
    text-align: center; }
    .main-content__text-content h3 {
      color: var(--color-cyan-600);
      text-transform: uppercase;
      font-family: "Red Hat Display", sans-serif;
      font-weight: 800;
      font-size: 1rem;
      line-height: 110%;
      letter-spacing: .25rem; }
      @media only screen and (max-width: 770px) {
        .main-content__text-content h3 {
          font-size: .875rem; } }
      @media only screen and (max-width: 375px) {
        .main-content__text-content h3 {
          font-size: .75rem; } }
    .main-content__text-content h2 {
      color: var(--color-slate-900);
      font-family: "Red Hat Display", sans-serif;
      font-weight: 900;
      font-size: 2.5rem;
      line-height: 110%;
      letter-spacing: 0rem; }
      @media only screen and (max-width: 770px) {
        .main-content__text-content h2 {
          font-size: 2rem; } }
    .main-content__text-content p {
      color: var(--color-slate-600);
      font-family: "Red Hat Display", sans-serif;
      font-weight: 600;
      font-size: 1.125rem;
      line-height: 150%;
      letter-spacing: 0; }
      @media only screen and (max-width: 770px) {
        .main-content__text-content p {
          font-size: 1rem; } }
  .main-content__title {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    max-width: 27.8125rem; }

.number {
  display: grid;
  justify-items: center;
  background-color: transparent; }
  .number__vertical-line {
    width: .0625rem;
    height: 5rem;
    background-color: var(--color-slate-300); }
  .number__circle {
    height: 3.5rem;
    width: 3.5rem;
    border: 1px solid var(--color-slate-300);
    border-radius: 999px;
    color: var(--color-slate-600);
    background-color: var(--color-white);
    text-align: center;
    align-content: center;
    font-family: "Red Hat Display", sans-serif;
    font-weight: 800;
    font-size: 1rem;
    line-height: 150%;
    letter-spacing: 0; }

.footer-cta {
  display: flex;
  flex-direction: column; }
  .footer-cta__hero {
    background: linear-gradient(rgba(77, 150, 169, 0.8), rgba(77, 150, 169, 0.8)), url("../assets/desktop/image-footer.jpg");
    background-size: cover;
    padding: var(--spacing-1400) var(--spacing-1000); }
    @media only screen and (max-width: 770px) {
      .footer-cta__hero {
        padding: var(--spacing-800) var(--spacing-400); } }
  .footer-cta__content {
    margin-inline: auto;
    max-width: 70rem;
    display: grid;
    justify-items: center;
    align-items: center;
    grid-template-columns: repeat(3, 1fr);
    color: var(--color-white); }
    @media only screen and (max-width: 770px) {
      .footer-cta__content {
        grid-template-columns: repeat(1, 1fr);
        gap: 1.5rem;
        text-align: center; } }
  .footer-cta__title {
    font-family: "Red Hat Display", sans-serif;
    font-weight: 800;
    font-size: 2.5rem;
    line-height: 110%;
    letter-spacing: 0; }
    @media only screen and (max-width: 770px) {
      .footer-cta__title {
        font-size: 2rem;
        line-height: 110%; } }
  .footer-cta__description {
    font-family: "Red Hat Display", sans-serif;
    font-weight: 600;
    font-size: 1.125rem;
    line-height: 150%;
    letter-spacing: 0; }
    @media only screen and (max-width: 770px) {
      .footer-cta__description {
        font-size: 1rem;
        line-height: 150%; } }
  .footer-cta .number {
    transform: translateY(1.725rem); }

/*# sourceMappingURL=style.css.map */