html,
body {
  margin: 0px;
  padding: 0px;
}

body {
  background-color: #020202;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  --color-primary: #44f1a6;
}

* {
  font-family: "PT Mono", sans-serif;
}

body > header,
body > main,
body > footer {
  max-width: 960px;
  width: 100%;
}

section {
  width: 100%;
}

/* header */
header {
  width: 100%;
  display: flex;
  height: 76px;
  align-items: center;
  gap: 24px;
}

header .logo {
  display: flex;
  width: 155px;
  align-items: center;
  justify-content: center;
}

header nav {
  display: flex;
  align-items: center;
  gap: 24px;
}

header .logo img {
  width: 100%;
}

header nav .navlink {
  font-family: "PT Mono", sans-serif;
  color: #fff;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 4px;
  text-decoration: none;
}

header nav .navlink:hover {
  transition: 0.2s all;
  color: var(--color-primary);
}

header nav .navlink img {
  width: 16px;
  height: 16px;
}

/* Section 1 */

section#s1 {
  display: flex;
  width: 100%;
  height: 450px;
  align-items: center;

  margin-top: 48px;
}

section#s1 .left {
  display: flex;
  flex-direction: column;
}

section#s1 .left .title {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
}

section#s1 .left .title h1 {
  font-family: "PT Mono", sans-serif;
  color: var(--color-primary);
  font-size: 30px;
  font-weight: 700;
  margin: 0px;
}

section#s1 .left .title span {
  font-family: "PT Mono", sans-serif;
  color: #fff;
  font-size: 30px;
  margin-left: 20px;
  font-weight: 700;
}

section#s1 .left p {
  font-family: "PT Mono", sans-serif;
  color: #fff;
  margin: 0px;
  font-size: 13px;
  line-height: 24px;
}

section#s1 .left p span {
  width: 1px;
  overflow: hidden;
  display: inline-flex;
  height: 0px;
}

section#s1 button {
  background-color: #182922;
  border: 1px solid var(--color-primary);
  border-radius: 3px;
  color: var(--color-primary);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-family: "PT Mono", sans-serif;
  width: 140px;
  height: 40px;
  justify-content: center;
  align-items: center;
  margin-top: 24px;
}

section#s1 button:hover {
  background-color: var(--color-primary);
  color: #000;
  transition: 0.2s all;
  cursor: pointer;
}

section#s1 button:hover img {
  transition: 0.2s all;
  filter: brightness(0);
}

section#s1 .right img {
  width: 440px;
}

/* Section 2 */

section#s2 {
  display: flex;
  width: 100%;
  height: 450px;
  align-items: center;
  justify-content: space-between;

  margin-top: 64px;
}

section#s2 .left img {
  width: 326px;
  margin: 0px 71px;
}

section#s2 .right {
  display: flex;
  flex-direction: column;
}

section#s2 .right .title {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
}

section#s2 .right .title .h1 {
  font-family: "PT Mono", sans-serif;
  color: var(--color-primary);
  font-size: 30px;
  font-weight: 700;
  margin: 0px;
}

section#s2 .right .title span {
  font-family: "PT Mono", sans-serif;
  color: #fff;
  font-size: 30px;
  margin-left: 20px;
  font-weight: 700;
}

section#s2 .right p {
  font-family: "PT Mono", sans-serif;
  color: #fff;
  margin: 0px;
  font-size: 13px;
  line-height: 24px;
}

section#s2 button {
  background-color: #182922;
  border: 1px solid var(--color-primary);
  border-radius: 3px;
  color: var(--color-primary);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-family: "PT Mono", sans-serif;
  width: 140px;
  height: 40px;
  justify-content: center;
  align-items: center;
  margin-top: 24px;
}

section#s2 button:hover {
  background-color: var(--color-primary);
  color: #000;
  transition: 0.2s all;
  cursor: pointer;
}

section#s2 button:hover img {
  transition: 0.2s all;
  filter: brightness(0);
}

/* Section 3 */

section#s3 {
  display: flex;
  flex-direction: column;

  margin-top: 128px;
}

section#s3 .title {
  color: #fff;
  font-size: 30px;
  margin: 0px;
  margin-bottom: 24px;
}

section#s3 .networks {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  row-gap: 24px;
}

section#s3 .networks .network {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

section#s3 .networks .network img {
  width: 64px;
  height: 64px;
  margin-bottom: 12px;
}

section#s3 .networks .network span {
  color: var(--color-primary);
  font-size: 13px;
}

/* Section 4 */
section#s4 {
  display: flex;
  flex-direction: column;

  margin-top: 128px;
}

section#s4 .title {
  color: #fff;
  font-size: 30px;
  margin: 0px;
  margin-bottom: 64px;
}

section#s4 .title span {
  color: var(--color-primary);
}

section#s4 img {
  width: 87.5%;
  margin-bottom: 64px;
}

section#s4 .steps {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  column-gap: 100px;
}

section#s4 .steps .column {
  display: flex;
  flex-direction: column;
}

section#s4 .steps .column b {
  color: var(--color-primary);
  font-size: 20px;
  margin-bottom: 24px;
}

section#s4 .steps .column span {
  color: #fff;
  font-size: 12px;
  line-height: 24px;
}

/* Section 5 */
section#s5 {
  display: flex;
  gap: 80px;

  margin-top: 128px;
}

section#s5 .left {
  padding: 12px;
}

section#s5 .left img {
  width: 383px;
}

section#s5 .right {
  padding: 12px;
}

section#s5 .right h2 {
  color: #fff;
  font-size: 30px;
}

section#s5 .right h2 b {
  color: var(--color-primary);
}

section#s5 .right span {
  color: #fff;
  font-size: 13px;
  line-height: 24px;
  width: 466px;
  display: flex;
}

/* Section 6 */
section#s6 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  justify-content: space-between;

  margin-top: 124px;
}

section#s6 .column {
  padding: 20px;
  display: flex;
  flex-direction: column;
  border: 1px solid #44f1a6;
  border-radius: 16px;
  width: 228px;
}

section#s6 .column img {
  display: flex;
  align-self: flex-end;
  width: 20px;
  height: 30px;
  margin-bottom: 10px;
}

section#s6 .column b {
  font-size: 24px;
  color: var(--color-primary);
  margin-bottom: 10px;
}

section#s6 .column span {
  color: #fff;
  font-size: 14px;
}

/* Section 7 */
section#s7 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  margin-top: 124px;
}

section#s7 h2 {
  color: #fff;
  font-size: 30px;
  text-align: center;
  margin: 0px;
}

section#s7 h2 b {
  color: var(--color-primary);
}

section#s7 > span {
  color: #fff;
  font-size: 13px;
  line-height: 24px;
  text-align: center;

  margin-top: 24px;
}

section#s7 > span b {
  color: var(--color-primary);
}

section#s7 .grid1 .h,
section#s7 .grid2 .h {
  height: 243px;
  width: 210px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url("/img/hexagon.svg");
  background-repeat: no-repeat;
  background-size: 100%;
}

section#s7 .grid1 .h span,
section#s7 .grid2 .h span {
  color: #fff;
  font-size: 10px;
  text-align: center;
  line-height: 20px;
  margin: 17px;
}

section#s7 .grid1 .h span b,
section#s7 .grid2 .h span b {
  color: var(--color-primary);
}

section#s7 .grid1 {
  display: grid;
  grid-template-columns: auto auto auto auto;
  gap: 30px;

  margin-top: 64px;
}

section#s7 .grid2 {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 30px;
  margin-top: -30px;
}

/* Section 8 */
section#s8 {
  display: flex;
  flex-direction: column;

  margin-top: 124px;
}

section#s8 h2 {
  color: #fff;
  font-size: 30px;
  margin: 0px;
  margin-bottom: 64px;
}

section#s8 .columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

section#s8 .columns .c {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 40px;
  padding-bottom: 40px;
  padding-right: 40px;
}

section#s8 .columns .c img {
  width: 120px;
  height: 260px;
}

section#s8 .columns .c > div {
  display: flex;
  flex-direction: column;
}

section#s8 .columns .c > div b {
  color: var(--color-primary);
  font-size: 20px;
  margin-bottom: 20px;
}

section#s8 .columns .c > div span {
  color: #fff;
  font-size: 13px;
  line-height: 24px;
}

section#s8 .columns .c > div > a {
  margin-top: 16px;
}

section#s8 a {
  color: var(--color-primary);
  cursor: pointer;
  font-size: 13px;
}

/* FAQ */
section#faq {
  display: flex;
  flex-direction: column;

  margin-top: 124px;
}

section#faq h2 {
  color: #fff;
  font-size: 30px;
  margin: 0px;
  margin-bottom: 24px;
}

section#faq .row {
  display: flex;
  flex-direction: column;
  cursor: pointer;
  border-bottom: 1px solid #2a2a2a;
}

section#faq .row .q {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  padding-top: 24px;
}

section#faq .row .q span {
  color: var(--color-primary);
  font-size: 20px;
}

section#faq .row .q i {
  display: flex;
  width: 16px;
  height: 16px;
  background-image: url("/img/plus.svg");
  background-repeat: no-repeat;
  background-size: 100%;
}

section#faq .row.opened .q i {
  background-image: url("/img/minus.svg");
}

section#faq .row .a {
  color: #fff;
  font-size: 13px;
  line-height: 24px;
  margin-bottom: 24px;
  margin-top: 10px;
  height: 0px;
  overflow: hidden;
}

section#faq .row.opened .a {
  height: auto;
}

/* FOOTER */
footer {
  margin-top: 112px;
  padding: 32px;
  box-sizing: border-box;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  gap: 16px;
  align-items: center;
}

footer span {
  background-color: #6b6b6b;
  width: 1px;
  height: 20px;
  opacity: 0.5;
}

footer a img {
  width: 24px;
}