/* Button */

.btn:link,
.btn:visited {
  font-size: 1.8rem;
  font-weight: 500;
  padding: 2rem 3rem;
  border-radius: 5rem;
  display: inline-block;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s;
  border: 2px solid transparent;

  @media only screen and (max-width: 37.5em) {
    margin-bottom: 2rem;
    width: 40%;
    text-align: center;
    padding: 2rem 2rem;
    font-size: 1.4rem;
  }

  @media only screen and (max-width: 500px) {
    width: 50%;
  }

  @media only screen and (max-width: 400px) {
    margin-bottom: 2rem;
    width: 70%;
    text-align: center;
    padding: 2rem 2rem;
    font-size: 1.4rem;
  }

  @media only screen and (max-width: 350px) {
    width: 80%;
  }
}

.btn-primary:link,
.btn-primary:visited {
  color: var(--color-white);
  background-color: var(--color-primary);
}

.btn-primary:hover,
.btn-primary:active {
  color: var(--color-black);
  background-color: transparent;
  border: 2px solid var(--color-primary);
  transform: translateY(-0.8rem);
  /* box-shadow: 0 1rem 4rem rgba(0, 0, 0, 0.04); */
}

/* Button secondary */

.btn-secondary:link,
.btn-secondary:visited {
  color: var(--color-black);
  border: 2px solid var(--color-black);
}

@media only screen and (max-width: 43.75em) {
  .btn-secondary:link,
  .btn-secondary:visited {
    color: var(--color-white);
    border: 2px solid var(--color-white);
  }
}
.btn-secondary:hover,
.btn-secondary:active {
  color: var(--color-white);
  background-color: var(--color-black);
  border: 2px solid var(--color-black);
  transform: translateY(-0.8rem);
}

/* Links */

/* for about page only */

.main__nav-link-about:link,
.main__nav-link-about:visited {
  font-size: 1.4rem;
  font-weight: 500;
  display: inline-block;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s;
  color: var(--color-white);

  padding-bottom: 0.9rem;
  border-bottom: 1px solid transparent;
}

.main__nav-link-about:hover,
.main__nav-link-about:active {
  color: var(--color-white);
  border-bottom: 1px solid var(--color-primary);
  padding-bottom: 0.9rem;
}

.header.sticky .main__nav-link-about {
  color: #000;
}

/* ends here */

.main__nav-link:link,
.main__nav-link:visited {
  font-size: 1.4rem;
  font-weight: 500;
  display: inline-block;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s;
  color: var(--color-black);

  padding-bottom: 0.9rem;
  border-bottom: 1px solid transparent;

  @media only screen and (max-width: 43.75em) {
    font-size: 1.4rem;
  }

  @media only screen and (max-width: 43.75em) {
    font-size: 2.4rem;
  }

  @media only screen and (max-width: 31.25em) {
    font-size: 2rem;
  }
}

.main__nav-link:hover,
.main__nav-link:active {
  /* font-weight: 500; */
  color: var(--color-primary);
  border-bottom: 2px solid var(--color-primary);
  padding-bottom: 0.9rem;
}

.main__nav-item-heading {
  font-size: 1.6rem;
  font-weight: 600;

  /* 700px */

  @media only screen and (max-width: 43.75em) {
    font-size: 2.4rem;
  }
  /* 500px */

  @media only screen and (max-width: 31.25em) {
    font-size: 2rem;
  }
}

/* header nav cta */

.main__nav-link.nav-cta:link,
.nav-cta:visited {
  display: inline-block;
  padding: 1.2rem 2.4rem;
  border-radius: 1.2rem;
  color: var(--color-black);
  border: 2px solid var(--color-black);
}

.main__nav-link.nav-cta:hover,
.nav-cta:active {
  font-weight: 300 !important;
  display: inline-block;
  padding: 1.2rem 2.4rem;
  border-radius: 1rem;
  color: var(--color-primary);
  transform: translateY(-0.1rem);
  /* border: 2px solid var(--color-primary); */
}

/* for about page */

.main__nav-link.nav-cta-about:link,
.nav-cta-about:visited {
  display: inline-block;
  padding: 1.2rem 2.4rem;
  border-radius: 1.2rem;
  color: var(--color-white);
  border: 2px solid var(--color-white);
}

.main__nav-link.nav-cta-about:hover,
.nav-cta-about:active {
  font-weight: 300 !important;
  display: inline-block;
  padding: 1.2rem 2.4rem;
  border-radius: 1rem;
  border: 2px solid var(--color-primary);
  transform: translateY(-0.1rem);
  /* border: 2px solid var(--color-primary); */
}

.header.sticky .main__nav-link.nav-cta-about {
  color: var(--color-black);
  border: 2px solid var(--color-black);
}

.header.sticky .main__nav-link.nav-cta-about:hover {
  color: var(--color-primary);
  border: 2px solid var(--color-black);
}

/* footer link for tc */
.footer__tc-link {
  font-size: 1.2rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--color-black);
}