@import url('https://fonts.googleapis.com/css2?family=Barlow: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&display=swap');


:root {
  --font-primary: "Barlow", sans-serif;
  --font-secondary: "Barlow", serif;
}

body {
  color: var(--text-color);
  font-family: var(--font-primary);
}

.title {
  font-size: 4rem;
  font-weight: 500;
}

.subtitle-large-semibold {
  font-size: 2.5rem;
  font-weight: 500;
}

.subtitle-medium-bold {
  font-size: 2rem;
  font-weight: 600;
}

.w-40 {
  width: 40%;
  margin: 0 auto;
}

.text {
  font-size: 1rem;
  font-weight: 400;
  margin-top: 40px;
}

.text-align-center {
  text-align: justify;
}

.title-main {
  position: relative;
  text-align: center;
  font-size: 4rem;
  font-weight: 500;
}

.subtitle-main {
  position: relative;
  text-align: center;
  font-size: 2.5rem;
  font-weight: 600;
  margin-bottom: 40px;
}


@media only screen and (max-width: 480px) {
  .title-main {
    font-size: 2.5rem;
  }

  .subtitle-main {
    font-size: 1.5rem;
  }

  .text {
    font-size: 1rem;
    font-weight: 400;
    margin-top: 40px;
  }

  .w-40 {
    width: 40%;
    margin: 0 auto;
  }

  .title-main {
    position: relative;
    text-align: center;
    font-size: 4rem;
    font-weight: 600;
  }

  .subtitle-main {
    position: relative;
    text-align: center;
    font-size: 2.5rem;
    font-weight: 600;
    margin-bottom: 4px;
  }
}

@media only screen and (max-width: 480px) {
  .title-main {
    font-size: 2.5rem;
  }

  .subtitle-main {
    font-size: 1.5rem;
  }

  .text {
    font-size: 0.8rem;
  }

  .w-40 {
    width: 60%;
  }

}