@charset "UTF-8";

.banner {
  height: calc(100vh - 500rem);
  min-height: 450rem;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.banner h1 {
  color: var(--bg-foot);
  font-size: 40rem;
  font-weight: lighter;
  margin: 0;
  margin-bottom: 50rem;
}

.banner img {
  width: auto;
  height: 55rem;
  object-fit: cover;
}

.about-container {
  margin: 0 auto;
  padding: 30rem;
  border-radius: 18rem;
  background-color: var(--bg);
  width: 80vw;
  box-shadow: -2rem 2rem 5rem 2rem rgba(0, 0, 0, 0.05);
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 10vw;
  margin-bottom: 70rem;
}

.about-text {
  position: relative;
}

.about-text h3 {
  margin: 0;
  margin-bottom: 30rem;
  font-size: 27rem;
  color: var(--suplimentary-6);
  font-family: "Queensides", sans-serif;
}

p {
  text-align: justify;
}

.about-text p {
  margin: 0;
  margin-bottom: 70rem;
  font-size: 17rem;
  color: var(--suplimentary-6);
  font-family: "Open Sans", sans-serif;
}

.about-text a {
  position: absolute;
  right: 0;
  bottom: 0;
}

.about-tools {
  background-color: var(--primary);
  color: var(--bg);
  padding: 20rem 40rem;
  border-radius: 18rem;
  font-size: 22rem;
  font-family: "Queensides", sans-serif;
  position: relative;
}

.about-tools a {
  position: absolute;
  right: 30rem;
  bottom: 30rem;
}

.about-link-1 {
  border-radius: 30rem;
  padding: 10rem 30rem;
  background-color: var(--bg-foot);
  color: var(--bg);
  transition: all 0.2s ease-in-out;
  font-size: 16rem;
  font-family: "Open Sans", sans-serif;
}

.about-link-1:hover {
  background-color: var(--bg);
  color: var(--bg-foot);
  text-decoration: none;
}

.about-link-2 {
  border-radius: 30rem;
  padding: 10rem 30rem;
  background-color: var(--bg);
  color: var(--bg-foot);
  transition: all 0.2s ease-in-out;
  font-size: 16rem;
  font-family: "Open Sans", sans-serif;
}

.about-link-2:hover {
  background-color: var(--bg-foot);
  color: var(--bg);
  text-decoration: none;
}

.collab {
  position: relative;
}

.collab-banner {
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 10vw;
  width: 80vw;
  margin-bottom: 100rem;
}

.collab-image {
  height: 60rem;
}

.collab h3 {
  margin: 0;
  margin-bottom: 10rem;
  margin-top: 30rem;
  font-size: 30rem;
  font-family: "Queensides", sans-serif;
  font-weight: lighter;
  display: flex;
  align-items: baseline;
  gap: 30rem;
}

.collab h4 {
  margin: 0;
  margin-bottom: 10rem;
  font-size: 27rem;
  padding: 30rem;
  font-family: "Queensides", sans-serif;
  font-weight: lighter;
}

.collab a {
  position: absolute;
  right: 40rem;
  bottom: 40rem;
}

.collab-link {
  border-radius: 30rem;
  padding: 10rem 30rem;
  background-color: var(--suplimentary-5);
  color: var(--bg);
  transition: all 0.2s ease-in-out;
  font-size: 16rem;
  font-family: "Open Sans", sans-serif;
}

.collab-link:hover {
  background-color: var(--bg);
  color: var(--suplimentary-5);
  text-decoration: none;
}

.collab-image-2 {
  height: 120rem;
  position: absolute;
  left: -130rem;
  bottom: -60rem;
  opacity: 10%;
}

.community {
  background-color: var(--suplimentary-4);
  color: var(--bg);
  box-shadow: 10rem 10rem 10rem 5rem rgba(0, 0, 0, 0.1);
  padding: 40rem;
  border-radius: 18rem;
  position: relative;
}

.community p {
  font-family: "Open Sans", sans-serif;
  font-size: 17rem;
  margin: 0;
  margin-bottom: 60rem;
}

.community h3 {
  margin: 0;
  margin-bottom: 30rem;
  font-size: 30rem;
  font-family: "Queensides", sans-serif;
  font-weight: lighter;
  display: flex;
  align-items: baseline;
  gap: 30rem;
}

.community a {
  position: absolute;
  right: 40rem;
  bottom: 30rem;
}

.community-link {
  border-radius: 30rem;
  padding: 10rem 30rem;
  background-color: var(--bg);
  color: var(--suplimentary-4);
  transition: all 0.2s ease-in-out;
  font-size: 16rem;
  font-family: "Open Sans", sans-serif;
}

.community-link:hover {
  background-color: var(--suplimentary-4);
  color: var(--bg);
  text-decoration: none;
}

.community-image {
  height: 50rem;
}

.stats-banner {
  margin: 0 auto;
  /* display: grid; */
  display: none;
  grid-template-columns: 1fr 1fr;
  gap: 30rem;
  width: 80vw;
  height: 200rem;
  margin-bottom: 50rem;
  background-color: var(--suplimentary-6);
  color: var(--bg);
  padding: 40rem;
  border-radius: 18rem;
  box-shadow: 10rem 10rem 10rem 5rem rgba(0, 0, 0, 0.1);
}

.contact-us {
  background-color: color-mix(in srgb, var(--primary) 10%, var(--bg));
  padding: 80rem 10vw;
  padding-top: 40rem;
  font-size: 25rem;
  font-family: "Queensides", sans-serif;
  font-weight: bold;
  position: relative;
}

.contact-image {
  height: 70rem;
}

.contact-us h3 {
  font-size: 30rem;
  display: flex;
  align-items: baseline;
  gap: 30rem;
}

.contact-us p {
  font-size: 25rem;
  font-weight: lighter;
  padding: 0;
}

.contact-link {
  border-radius: 30rem;
  padding: 10rem 30rem;
  background-color: var(--primary);
  color: var(--bg);
  transition: all 0.2s ease-in-out;
  font-size: 16rem;
  font-family: "Open Sans", sans-serif;
  font-weight: lighter;
  position: absolute;
  right: 15vw;
  bottom: 40rem;
}

.contact-link:hover {
  background-color: var(--bg);
  color: var(--primary);
  text-decoration: none;
}