/* Variables */
@import url(../common/variables.css);

/* Commons */
@import url(../common/common.css);
@import url(../common/utilities.css);

/* Components */
@import url(../components/navbar.css);
@import url(../components/btn.css);
@import url(../components/plan.css);
@import url(../components/faq.css);
@import url(../components/video.css);
@import url(../components/opinions.css);
@import url(../components/warning.css);

body {
  background-image: url(../../images/background_image.jpeg);
  background-attachment: fixed;
  background-size: cover;
  text-align: center;
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

#opening {
  background-color: rgba(0, 0, 0, 0.75);
  padding-block-start: 5em;
  min-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  box-sizing: border-box;
}

#opening h1 {
  color: var(--color-primary);
  font-size: var(--text-size-title);
  max-width: 1000px;
  font-weight: 700;
  line-height: 1.5;
  padding-bottom: 2vw;
}

#opening p {
  color: var(--color-text);
  font-size: var(--text-size);
  max-width: var(--max-width);
  font-weight: 700;
  line-height: 1.25;
}

#opening span {
  color: var(--color-primary);
}

#join {
  background: linear-gradient(
    0deg,
    rgba(0, 0, 0, 1) 75%,
    rgba(0, 0, 0, 0.75) 100%
  );
  padding-block: 5em;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  box-sizing: border-box;
}

#join h2 {
  color: var(--color-primary);
  font-size: var(--text-size-subtitle);
  font-weight: 600;
  padding: 3vw;
}

#join p {
  font-size: var(--text-size);
  max-width: var(--max-width);
}

#selling_text {
  align-items: center;
  justify-content: center;
  gap: 2rem;
  box-sizing: border-box;
  padding-top: 3px;
}

#selling_text p {
 padding: 1vw;
}

#call_to_action {
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0.75) 50%
  );
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  box-sizing: border-box;
  padding: 1rem;
}

#call_to_action h2 {
  font-size: var(--text-size-title);
  color: var(--color-text);
  font-weight: 800;
}

#call_to_action h2 strong {
  color: var(--color-primary);
}

#call_to_action p {
  color: var(--color-text);
  max-width: var(--max-width);
}

#call_to_action p strong {
  color: var(--color-primary);
}