body {
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  color: rgba(255, 255, 255, 0.8666666667);
  background-color: black;
  --accent-color: #e4fc22;
}
@media (max-width: 768px) {
  body {
    font-size: 12px;
  }
}

main {
  display: grid;
  place-content: center;
  margin-top: 60px;
  width: 90%;
}

section {
  margin-top: 5rem;
}

:is(h1, h2, h3, h4, h5, h6):not(.no-gradient),
.gradient {
  display: inline-block;
  background: linear-gradient(135deg, rgb(255, 255, 255), rgb(228, 252, 34)) text;
  color: transparent;
}

h1 {
  font-size: 3rem;
}
@media (max-width: 768px) {
  h1 {
    font-size: 2rem;
  }
}

h2 {
  font-size: 2rem;
}
@media (max-width: 768px) {
  h2 {
    font-size: 1.2rem;
  }
}

h3 {
  font-size: 1.5rem;
}
@media (max-width: 768px) {
  h3 {
    font-size: 1rem;
  }
}

nav {
  display: grid;
  align-items: center;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 60px;
  background-color: black;
  z-index: 100;
}

nav .logo {
  height: 40px;
  margin-left: 20px;
}

p {
  line-height: 1.6;
  font-size: 1.2rem;
}
@media (max-width: 768px) {
  p {
    font-size: 1rem;
  }
}

.center {
  text-align: center;
}

.element-center {
  margin-left: auto;
  margin-right: auto;
}

.uppercase {
  text-transform: uppercase;
}

.accent::before {
  content: "";
  display: block;
  width: 80px;
  height: 2px;
  margin-bottom: 15px;
  background-color: var(--accent-color);
}

#versus-db-header {
  display: grid;
  grid-template-columns: 5.5fr 5fr;
  grid-auto-flow: column;
  place-content: center;
  justify-self: center;
  padding-top: 20px;
  max-width: 1400px;
  min-height: calc(100vh - 80px);
  background: url("./assets/VersusDB-BG.png") center center/cover no-repeat black;
}
@media (max-width: 768px) {
  #versus-db-header {
    grid-template-columns: 1fr;
    place-content: center;
    grid-auto-flow: row;
    padding-top: 0;
    text-align: center;
    background: unset;
  }
}
#versus-db-header h1 {
  margin: 1rem 0;
  font-size: calc(2.5rem + 1vw);
}
@media (max-width: 768px) {
  #versus-db-header h1 {
    position: relative;
    width: min-content;
    justify-self: center;
    font-size: 1.8rem;
    margin-top: 2.5rem;
  }
  #versus-db-header h1::before {
    position: absolute;
    top: -10px;
    left: 0px;
    width: 100%;
  }
}
#versus-db-header h2 {
  margin: 0;
  font-size: calc(1rem + 1vw);
  color: rgba(255, 255, 255, 0.9);
  font-weight: normal;
}
@media (max-width: 768px) {
  #versus-db-header h2 {
    margin-bottom: 0.5rem;
    font-size: 1.3rem;
  }
}
#versus-db-header p {
  margin: 0;
  color: rgba(255, 255, 255, 0.8);
  font-size: calc(1rem + 0.5vw);
}
@media (max-width: 768px) {
  #versus-db-header p {
    margin-top: 2rem;
    font-size: 0.9rem;
  }
}
#versus-db-header img {
  place-self: center right;
  margin-right: 4rem;
  max-width: 65%;
}
@media (max-width: 768px) {
  #versus-db-header img {
    place-self: center;
    margin-top: 3rem;
    margin-right: 0;
  }
}

#versus-db-introduction .big-text {
  color: white;
  font-size: 2.5rem;
  text-align: center;
}
@media (max-width: 768px) {
  #versus-db-introduction .big-text {
    font-size: 1rem;
  }
}
#versus-db-introduction h2 {
  margin: 0;
  margin-bottom: 1rem;
}
#versus-db-introduction div {
  display: grid;
  grid-template-rows: repeat(5, auto);
  grid-template-columns: repeat(2, auto);
  grid-auto-flow: column;
  column-gap: 2rem;
}
@media (max-width: 768px) {
  #versus-db-introduction div {
    grid-template-rows: repeat(10, auto);
    grid-template-columns: repeat(1, auto);
    text-align: center;
  }
}
#versus-db-introduction div span {
  margin: 0.2rem 0;
  color: var(--accent-color);
  font-size: 1.5rem;
  font-weight: bold;
}
#versus-db-introduction div p {
  grid-row: span 5;
  padding: 3rem;
  border-radius: 1rem;
  border: 1px solid grey;
}
@media (max-width: 768px) {
  #versus-db-introduction div p {
    padding: 1.5rem;
  }
}

#versus-db-advantages {
  max-width: 90%;
  justify-self: center;
}
#versus-db-advantages div {
  display: grid;
  margin-top: 2rem;
  padding: 0.5rem 2rem;
  border: 1px solid #3a3a3a;
  border-radius: 1.5rem;
  background: linear-gradient(180deg, #181818 0%, rgba(24, 24, 24, 0) 100%);
  box-shadow: -8px 0 8px -8px #e4fc22, 8px 0 8px -8px #e4fc22;
  text-align: center;
  backdrop-filter: blur(2px);
}
@media (max-width: 768px) {
  #versus-db-advantages div {
    padding: 0.5rem 1rem;
  }
}
#versus-db-advantages h3 {
  justify-self: center;
  margin-bottom: 0.5rem;
  width: max-content;
}
#versus-db-advantages p {
  margin-top: 0;
  font-size: 1.2rem;
}
@media (max-width: 768px) {
  #versus-db-advantages p {
    font-size: 0.9rem;
  }
}

#versus-db-technology {
  display: grid;
  text-align: center;
}
#versus-db-technology p {
  justify-self: center;
  max-width: 800px;
  font-size: 1.3rem;
}
@media (max-width: 768px) {
  #versus-db-technology p {
    font-size: 0.9rem;
  }
}

#versus-db-tools {
  display: grid;
}
#versus-db-tools p {
  justify-self: center;
  max-width: 800px;
  text-align: center;
  font-size: 1.3rem;
}
@media (max-width: 768px) {
  #versus-db-tools p {
    font-size: 1rem;
  }
}
#versus-db-tools #tool-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 768px) {
  #versus-db-tools #tool-grid {
    grid-template-columns: repeat(1, 1fr);
  }
}
#versus-db-tools #tool-grid div {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: auto;
  padding: 2rem;
  border: 1px solid #3a3a3a;
  border-radius: 1rem;
  background-image: linear-gradient(rgb(17, 17, 17), rgb(11, 11, 11));
}
@media (max-width: 768px) {
  #versus-db-tools #tool-grid div {
    text-align: center;
  }
}
#versus-db-tools #tool-grid div img {
  max-width: 80px;
}
@media (max-width: 768px) {
  #versus-db-tools #tool-grid div img {
    justify-self: center;
  }
}
#versus-db-tools #tool-grid div h3 {
  margin: 0;
}
#versus-db-tools #tool-grid div p {
  margin: 0;
  font-size: 18px;
  text-align: left;
  line-height: 1.2;
}
@media (max-width: 768px) {
  #versus-db-tools #tool-grid div p {
    font-size: 1rem;
  }
}

/* /modern-barriers */
#modern-barriers-main {
  display: unset;
  width: 100%;
}

#modern-barriers-header {
  display: grid;
  grid-template-rows: repeat(2, auto);
  grid-template-columns: repeat(2, 1fr);
  column-gap: 6rem;
  min-height: calc(100vh - 60px);
  background-image: url("./assets/who.png");
  background-size: cover;
  background-position: center center;
}
@media (max-width: 768px) {
  #modern-barriers-header {
    grid-template-columns: repeat(1, 1fr);
    row-gap: 3rem;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
}
#modern-barriers-header h2 {
  margin: 0;
  margin-bottom: 0.5rem;
  font-size: 1.5rem;
}
@media (max-width: 768px) {
  #modern-barriers-header h2 {
    font-size: 1.2rem;
  }
}
#modern-barriers-header p {
  font-size: 1rem;
  margin: 0;
}
#modern-barriers-header .left,
#modern-barriers-header .right {
  max-width: 35vw;
}
@media (max-width: 768px) {
  #modern-barriers-header .left,
  #modern-barriers-header .right {
    max-width: 90vw;
    margin: auto;
  }
}
@media not (max-width: 768px) {
  #modern-barriers-header .left {
    align-self: end;
    justify-self: end;
    grid-row: 1;
    grid-column: 1;
  }
  #modern-barriers-header .right {
    grid-row: 2;
    grid-column: 2;
  }
}

#modern-barriers-web2-web3 {
  max-width: 80%;
  margin: auto;
}
@media (max-width: 768px) {
  #modern-barriers-web2-web3 {
    text-align: center;
  }
}
#modern-barriers-web2-web3 h2 {
  margin-top: 6rem;
}
@media (max-width: 768px) {
  #modern-barriers-web2-web3 h2 {
    margin-top: 3rem;
  }
}
#modern-barriers-web2-web3 p {
  justify-self: center;
  margin-top: 0;
  max-width: 800px;
  font-size: 1.3rem;
}
@media (max-width: 768px) {
  #modern-barriers-web2-web3 p {
    font-size: 0.9rem;
  }
}

#modern-barriers-explore {
  display: grid;
  place-content: center;
  row-gap: 8rem;
  min-height: calc(100vh - 60px);
  background-color: black;
  background-image: url("./assets/Verse-Landing.png");
  background-size: cover;
  background-position: center center;
  color: white;
  text-align: center;
}
@media (max-width: 768px) {
  #modern-barriers-explore {
    row-gap: 4rem;
  }
}
#modern-barriers-explore p {
  margin: 0;
  max-width: 900px;
  font-size: 1.5rem;
}
@media (max-width: 768px) {
  #modern-barriers-explore p {
    font-size: 1.2rem;
    max-width: 80vw;
  }
}
#modern-barriers-explore h2 {
  display: inline;
  width: max-content;
  height: max-content;
  align-self: start;
  justify-self: center;
  padding: 1rem 1.5rem;
  font-size: 1.2rem;
  border-radius: 25px;
  border-top: none;
  border-right: none;
  border-bottom: 2px solid rgb(228, 252, 34);
  border-left: 2px solid rgb(228, 252, 34);
  cursor: pointer;
}
#modern-barriers-explore a {
  text-decoration: none;
  color: unset;
  border-bottom: 2px solid transparent;
  transition: border-bottom-color ease-in-out 200ms;
}
#modern-barriers-explore a:hover {
  border-bottom-color: white;
}

/* /production-model */
#production-model-main {
  display: unset;
  width: 100%;
  color: white;
}

#production-model-header {
  display: grid;
  grid-template-rows: auto min-content auto;
  row-gap: 1rem;
  margin-left: 6rem;
  min-height: calc(100vh - 60px);
  background: linear-gradient(rgba(0, 0, 0, 0.7333333333), black), url("./assets/gold-world.png") center center/cover no-repeat;
}
@media (max-width: 768px) {
  #production-model-header {
    margin-left: unset;
    margin-top: 2rem;
    padding: 0 2rem;
    place-content: center;
    text-align: center;
  }
}
#production-model-header h1 {
  margin: 0;
  font-size: 3rem;
  width: max-content;
  background-image: linear-gradient(96.63deg, #e4fc22 -0.9%, #ffffff 14.26%, #e4fc22 23.64%, #f3ff93 42.82%, #e4fc22 62.9%, #f8ffbc 93.27%, #ffffff 107.19%);
}
@media (max-width: 768px) {
  #production-model-header h1 {
    position: relative;
    justify-self: center;
    font-size: 1.8rem;
    margin-top: 2rem;
  }
  #production-model-header h1::before {
    content: "";
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    top: -1.5rem;
    left: calc((100% - 3rem) / 2);
    width: 3rem;
    height: 2px;
    background-color: var(--accent-color);
  }
}
#production-model-header h2 {
  align-self: end;
  margin: 0;
  font-size: 1.5rem;
  font-weight: normal;
}
@media (max-width: 768px) {
  #production-model-header h2 {
    margin-bottom: 0.5rem;
    font-size: 1.3rem;
  }
}
#production-model-header p {
  align-self: start;
  margin: 0;
  margin-top: 1rem;
  max-width: 40rem;
  font-size: 1.2rem;
}
@media (max-width: 768px) {
  #production-model-header p {
    font-size: 1rem;
  }
}

#production-model-different {
  display: grid;
  padding: 0 8rem;
  background: url("./assets/production-model-different-background.svg") center center/cover no-repeat;
}
@media (max-width: 768px) {
  #production-model-different {
    padding-left: 2rem;
    padding-right: 1.5rem;
    place-items: center left;
  }
}
#production-model-different .introduction {
  place-self: center;
  display: grid;
  place-items: center;
  margin-bottom: 4rem;
}
#production-model-different .introduction p {
  max-width: 900px;
}
#production-model-different h3 {
  margin: 0;
  margin-top: 4rem;
  background-image: linear-gradient(96.63deg, #e4fc22 -0.9%, #ffffff 14.26%, #e4fc22 23.64%, #f3ff93 42.82%, #e4fc22 62.9%, #f8ffbc 93.27%, #ffffff 107.19%);
  font-size: 1.8rem;
}
@media (max-width: 768px) {
  #production-model-different h3 {
    font-size: 1.4rem;
  }
}
#production-model-different p {
  margin-top: 1rem;
  font-size: 1.2rem;
}
@media (max-width: 768px) {
  #production-model-different p {
    font-size: 1rem;
  }
}

/* /coin */
#coin-main {
  display: unset;
  width: 100%;
}

#coin-header {
  display: grid;
  place-items: center;
  min-height: calc(100vh - 80px);
  background: url("./assets/coin-header-background.svg") center center/cover no-repeat black;
}
#coin-header .container {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-auto-flow: column;
  place-items: center;
  margin: 0 auto;
  max-width: min(1000px, 100vw - 12rem);
}
@media (max-width: 768px) {
  #coin-header .container {
    grid-template-columns: 1fr;
    grid-auto-flow: row;
    padding-top: 0;
    text-align: center;
    max-width: unset;
  }
}
#coin-header h1 {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: repeat(3, min-content);
  place-items: center;
  column-gap: 1rem;
  margin-bottom: 4rem;
  font-size: 2.5rem;
  font-weight: 100;
}
#coin-header h1 .logo {
  height: 2.5rem;
  width: 2.5rem;
}
@media (max-width: 768px) {
  #coin-header h1 {
    position: relative;
    width: min-content;
    font-size: 1.8rem;
    margin-top: 2.5rem;
    margin-bottom: 2rem;
  }
}
#coin-header .accent::before {
  height: 3px;
  margin-bottom: 3rem;
}
@media (max-width: 768px) {
  #coin-header .accent::before {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2rem;
    width: 80%;
  }
}
#coin-header h2 {
  margin: 0;
  font-size: 2rem;
}
@media (max-width: 768px) {
  #coin-header h2 {
    margin-bottom: 0.5rem;
    font-size: 1.3rem;
  }
}
#coin-header p {
  margin: 0;
  margin-top: 5rem;
  padding: 1.2rem 1.5rem;
  width: max-content;
  font-size: 1rem;
  color: white;
  background-color: #141414;
  border: 1px solid var(--accent-color);
  border-radius: 1rem;
}
@media (max-width: 768px) {
  #coin-header p {
    margin-top: 2rem;
    font-size: 0.9rem;
  }
}
#coin-header .column {
  place-self: center left;
}
@media (max-width: 768px) {
  #coin-header .column {
    place-self: center;
  }
}
#coin-header img:not(.logo) {
  place-self: center right;
  max-width: 70%;
}
@media (max-width: 768px) {
  #coin-header img:not(.logo) {
    place-self: center;
    margin-top: 3rem;
    margin-right: 0;
  }
}

#coin-path {
  display: grid;
  place-items: center;
}
#coin-path .big-text {
  color: white;
  font-size: 2rem;
  text-align: center;
}
@media (max-width: 768px) {
  #coin-path .big-text {
    font-size: 1rem;
  }
}
#coin-path hr {
  margin-top: 3rem;
  width: 12rem;
  height: 1px;
  border-radius: 50%;
  background-color: var(--accent-color);
}
#coin-path h2 {
  margin: 0;
  margin-top: 3rem;
  margin-bottom: 1rem;
}
#coin-path > p {
  margin: 0 4rem;
  text-align: center;
  max-width: 48rem;
}
#coin-path #coin-difference {
  display: grid;
  grid-template-rows: repeat(2, auto);
  grid-template-columns: repeat(2, auto);
  grid-auto-flow: column;
  column-gap: 2rem;
  text-align: center;
  padding: 0 3rem;
}
@media (max-width: 768px) {
  #coin-path #coin-difference {
    padding: 0 2rem;
  }
}
@media (max-width: 768px) {
  #coin-path #coin-difference {
    grid-template-rows: repeat(4, auto);
    grid-template-columns: repeat(1, auto);
  }
}
#coin-path #coin-difference h3 {
  justify-self: center;
  margin-top: 3rem;
  margin-bottom: 1rem;
}
#coin-path #coin-difference div {
  display: grid;
  grid-template-rows: subgrid;
  grid-template-columns: subgrid;
  grid-row: span 2;
}
#coin-path #coin-difference p {
  margin: 0;
  padding: 1.5rem 2rem;
  background: #111111;
  border: 2px solid #1a1a1a;
  border-radius: 1rem;
}
@media (max-width: 768px) {
  #coin-path #coin-difference p {
    font-size: 0.9rem;
    padding: 1.5rem 1rem;
  }
}

#coin-alternative {
  margin: 0 auto;
  margin-top: 6rem;
  max-width: 80%;
}
@media (max-width: 768px) {
  #coin-alternative {
    max-width: unset;
    padding: 0 2rem;
  }
}
#coin-alternative .heading {
  margin-bottom: 3rem;
  font-size: 1.75rem;
  text-align: center;
  color: white;
}
#coin-alternative .layout {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  place-items: center;
}
@media (max-width: 768px) {
  #coin-alternative .layout {
    grid-template-columns: 1fr;
  }
}
#coin-alternative .layout img {
  height: 30rem;
}
#coin-alternative .layout .column {
  text-align: center;
  margin-bottom: 3rem;
  padding: 1.5rem 3rem;
  background-image: linear-gradient(180deg, #1a1a1a 0%, #0a0a0a 100%), linear-gradient(to bottom, white, white 20%, #808080 20%, #808080);
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
  border: 1px solid transparent;
  border-radius: 1rem;
}
@media (max-width: 768px) {
  #coin-alternative .layout .column {
    grid-template-columns: 1fr;
    padding: 1.5rem;
  }
}
#coin-alternative .layout .column h2,
#coin-alternative .layout .column h3 {
  margin-left: auto;
  margin-right: auto;
}

#coin-key-components {
  background-image: url("./assets/coin-key-components-background.svg");
  background-size: cover;
  background-position: center center;
  margin: 0 4rem;
}
@media (max-width: 768px) {
  #coin-key-components {
    margin: 0 2rem;
  }
}
#coin-key-components h2 {
  background-image: linear-gradient(96.63deg, #e4fc22 -0.9%, #ffffff 14.26%, #e4fc22 23.64%, #f3ff93 42.82%, #e4fc22 62.9%, #f8ffbc 93.27%, #ffffff 107.19%);
  margin: auto;
  margin-bottom: 3rem;
  margin-top: 5rem;
}
#coin-key-components .grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: auto;
}
@media (max-width: 768px) {
  #coin-key-components .grid {
    grid-template-columns: 1fr;
    row-gap: 1rem;
  }
}
#coin-key-components .grid div {
  padding: 2.5rem 2rem;
  text-align: center;
  background: #111111;
  border: 2px solid #1a1a1a;
  border-radius: 1rem;
}
#coin-key-components .grid div.shrink {
  height: max-content;
}
#coin-key-components .grid div h3 {
  margin: 0 auto;
}
#coin-key-components .grid .spacer {
  width: 0;
  height: 0;
}

#coin-gold {
  display: grid;
  place-items: center;
  margin: 4rem auto;
  text-align: center;
  background-image: url("./assets/coin-grid-background.svg");
  background-size: cover;
  background-position: center center;
}
@media (max-width: 768px) {
  #coin-gold {
    max-width: unset;
    padding: 0 1.5rem;
  }
}
#coin-gold h2 {
  margin-top: 3rem;
  margin-bottom: 0;
}
#coin-gold .glass-container {
  display: flex;
  flex-direction: column-reverse;
  place-items: center;
  row-gap: 2rem;
  position: relative;
  margin-top: 1rem;
}
#coin-gold .glass-container .glass {
  margin: 0 2rem;
  max-width: 700px;
  padding: 3rem;
  background: linear-gradient(90deg, #0c0c0c 0%, rgba(12, 12, 12, 0) 68.61%, rgba(228, 252, 34, 0.14) 103.14%);
  backdrop-filter: blur(12.5px);
  border-radius: 1rem;
  color: white;
  font-size: 1rem;
}
@media (max-width: 768px) {
  #coin-gold .glass-container .glass {
    margin: 0;
    padding: 2rem 1.5rem;
  }
}
#coin-gold .glass-container #coin-stack {
  position: absolute;
  width: 12rem;
  right: -3rem;
  top: -5rem;
}
@media (max-width: 768px) {
  #coin-gold .glass-container #coin-stack {
    position: unset;
    width: 50%;
  }
}

/* /movement */
#movement-main {
  display: unset;
  width: 100%;
  color: white;
}

#movement-header {
  display: grid;
  place-items: center;
  min-height: calc(100vh - 60px);
  background: url("./assets/movement-header-background.svg") center center/cover no-repeat black;
  border-bottom: 1px solid var(--accent-color);
}
@media (max-width: 768px) {
  #movement-header {
    margin-top: 20px;
    padding-bottom: 2rem;
  }
}
#movement-header .container {
  display: grid;
  grid-template-rows: auto;
  place-items: center;
  row-gap: 2rem;
  margin: 0 2rem;
  max-width: 80%;
}
#movement-header .container h2 {
  display: grid;
  place-items: center;
  grid-auto-flow: column;
  column-gap: 1rem;
  margin: 0;
}
#movement-header .container h2 .logo {
  height: 2.5rem;
}
#movement-header .container h2 span {
  font-size: 2rem;
}
#movement-header .container h1 {
  margin: 0;
}
#movement-header .container p {
  margin: 0;
  max-width: 700px;
  text-align: center;
}

#movement-sunrise {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  place-items: center;
  margin: 6rem;
}
@media (max-width: 768px) {
  #movement-sunrise {
    grid-template-columns: 1fr;
    row-gap: 2rem;
    margin: 2rem;
  }
}
#movement-sunrise img {
  object-fit: cover;
  width: 100%;
  max-height: 100%;
}
#movement-sunrise .column h2,
#movement-sunrise .column p {
  margin: 0;
}
#movement-sunrise .column h2 {
  margin-bottom: 1rem;
  background-image: linear-gradient(96.63deg, #e4fc22 -0.9%, #ffffff 14.26%, #e4fc22 23.64%, #f3ff93 42.82%, #e4fc22 62.9%, #f8ffbc 93.27%, #ffffff 107.19%);
}

.movement-paragraphs {
  margin: 0 6rem;
}
@media (max-width: 768px) {
  .movement-paragraphs {
    margin-left: 2rem;
    margin-right: 2rem;
  }
}
.movement-paragraphs h2 {
  margin-top: 3rem;
  margin-bottom: 1rem;
  background-image: linear-gradient(96.63deg, #e4fc22 -0.9%, #ffffff 14.26%, #e4fc22 23.64%, #f3ff93 42.82%, #e4fc22 62.9%, #f8ffbc 93.27%, #ffffff 107.19%);
}
.movement-paragraphs p {
  margin: 0;
}

#movement-dream {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin: 0 6rem;
  margin-top: 8rem;
}
@media (max-width: 768px) {
  #movement-dream {
    grid-template-columns: 1fr;
    margin-left: 2rem;
    margin-right: 2rem;
  }
}
#movement-dream > h2 {
  background-image: linear-gradient(96.63deg, #e4fc22 -0.9%, #ffffff 14.26%, #e4fc22 23.64%, #f3ff93 42.82%, #e4fc22 62.9%, #f8ffbc 93.27%, #ffffff 107.19%);
}
#movement-dream .quote {
  display: grid;
  grid-column: span 2;
  height: 50%;
}
@media (max-width: 768px) {
  #movement-dream .quote {
    grid-column: unset;
  }
}
#movement-dream .quote img {
  grid-area: 1/1;
  object-fit: cover;
  width: 100%;
  max-height: 100%;
}
#movement-dream .quote h2 {
  grid-area: 1/1;
  place-self: end center;
  margin-bottom: 8%;
  margin-left: 3rem;
  margin-right: 3rem;
  text-align: center;
}
@media (max-width: 768px) {
  #movement-dream .quote h2 {
    margin-left: unset;
    margin-right: unset;
  }
}

#movement-power {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 3rem;
  margin: 0 6rem;
  margin-top: 6rem;
}
@media (max-width: 768px) {
  #movement-power {
    grid-template-columns: 1fr;
    margin-left: 2rem;
    margin-right: 2rem;
  }
}
#movement-power img {
  place-self: center right;
  object-fit: cover;
  max-height: 32rem;
  max-width: 100%;
}
@media (max-width: 768px) {
  #movement-power img {
    place-self: center;
  }
}
#movement-power div {
  place-self: center left;
  max-width: 35rem;
}
@media (max-width: 768px) {
  #movement-power div {
    place-self: center;
  }
}
#movement-power h2 {
  margin-top: 0;
  background-image: linear-gradient(96.63deg, #e4fc22 -0.9%, #ffffff 14.26%, #e4fc22 23.64%, #f3ff93 42.82%, #e4fc22 62.9%, #f8ffbc 93.27%, #ffffff 107.19%);
}

#movement-core-values {
  margin: 0 8rem;
  margin-top: 3rem;
}
@media (max-width: 768px) {
  #movement-core-values {
    grid-template-columns: 1fr;
    margin-left: 2rem;
    margin-right: 2rem;
  }
}
#movement-core-values .grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: auto;
  gap: 2rem;
  margin-top: 6rem;
}
@media (max-width: 768px) {
  #movement-core-values .grid {
    grid-template-columns: 1fr;
  }
}
#movement-core-values .grid div {
  padding: 0.5rem 2rem;
  background-image: linear-gradient(180deg, #111111 0%, #0b0b0b 100%);
  border: 1px solid #3a3a3a;
  border-radius: 1rem;
}
#movement-core-values .grid h3 {
  color: var(--accent-color);
  margin-bottom: 0;
}

#movement-concrete-new-world {
  margin-top: 6rem;
  background: linear-gradient(rgba(0, 0, 0, 0.3137254902), rgba(0, 0, 0, 0.3137254902)), url("./assets/movement-header-background.svg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
#movement-concrete-new-world .heading,
#movement-concrete-new-world .versus,
#movement-concrete-new-world .products {
  margin-left: 6rem;
  margin-right: 6rem;
}
@media (max-width: 768px) {
  #movement-concrete-new-world .heading,
  #movement-concrete-new-world .versus,
  #movement-concrete-new-world .products {
    margin-left: 2rem;
    margin-right: 2rem;
  }
}
#movement-concrete-new-world .heading {
  text-align: center;
}
#movement-concrete-new-world .heading h2 {
  margin-bottom: 0;
  background-image: linear-gradient(96.63deg, #e4fc22 -0.9%, #ffffff 14.26%, #e4fc22 23.64%, #f3ff93 42.82%, #e4fc22 62.9%, #f8ffbc 93.27%, #ffffff 107.19%);
}
#movement-concrete-new-world .heading p {
  display: inline-block;
  max-width: 800px;
}
#movement-concrete-new-world .versus {
  display: grid;
  place-items: center;
  grid-template-columns: 1fr;
  margin-top: 4rem;
  text-align: center;
}
#movement-concrete-new-world .versus h3 {
  display: inline-block;
  color: var(--accent-color);
  width: max-content;
  font-size: 2rem;
}
@media (max-width: 768px) {
  #movement-concrete-new-world .versus h3 {
    font-size: 1.5rem;
  }
}
#movement-concrete-new-world .versus h3::after {
  content: "";
  display: block;
  margin-top: 2rem;
  margin-left: auto;
  margin-right: auto;
  width: 3rem;
  height: 2px;
  background-color: var(--accent-color);
}
#movement-concrete-new-world .versus p {
  margin-top: 0;
  max-width: 13rem;
}
#movement-concrete-new-world .versus img {
  place-self: center;
  object-fit: cover;
  max-width: 18rem;
  max-height: 18rem;
}
@media (max-width: 768px) {
  #movement-concrete-new-world .versus img {
    max-width: 16rem;
    max-height: 16rem;
  }
}
#movement-concrete-new-world .products {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: auto;
  gap: 2rem;
  margin-top: 6rem;
}
@media (max-width: 768px) {
  #movement-concrete-new-world .products {
    gap: 1rem;
    grid-template-columns: repeat(2, 1fr);
    margin-left: 1rem;
    margin-right: 1rem;
  }
}
#movement-concrete-new-world .products div {
  padding: 0 1.5rem;
  background-image: linear-gradient(180deg, #111111 0%, #0b0b0b 100%);
  border: 1px solid #3a3a3a;
  border-radius: 1rem;
}
@media (max-width: 768px) {
  #movement-concrete-new-world .products div {
    padding: 0 1rem;
    grid-template-columns: repeat(2, 1fr);
  }
}
#movement-concrete-new-world .products h4 {
  font-size: 1.5rem;
  color: var(--accent-color);
  margin-bottom: 0;
}
@media (max-width: 768px) {
  #movement-concrete-new-world .products h4 {
    margin-top: 1rem;
    font-size: 1rem;
  }
}
#movement-concrete-new-world .products h4::after {
  content: "";
  display: block;
  margin-top: 1rem;
  width: 3rem;
  height: 2px;
  background-color: var(--accent-color);
}
@media (max-width: 768px) {
  #movement-concrete-new-world .products p {
    font-size: 12px;
  }
}

/* /verse */
#verse-main {
  display: unset;
  width: 100%;
  color: white;
}

#verse-header {
  display: grid;
  grid-template-rows: auto min-content auto;
  row-gap: 1rem;
  place-items: center;
  text-align: center;
  padding: 0 2rem;
  min-height: calc(100vh - 60px);
  background: url("./assets/verse-header-background.svg") center center/cover no-repeat;
}
#verse-header h1 {
  margin: 2.5rem 0;
  font-size: 3rem;
  width: max-content;
  background-image: linear-gradient(96.63deg, #e4fc22 -0.9%, #ffffff 14.26%, #e4fc22 23.64%, #f3ff93 42.82%, #e4fc22 62.9%, #f8ffbc 93.27%, #ffffff 107.19%);
}
@media (max-width: 768px) {
  #verse-header h1 {
    font-size: 1.8rem;
    margin-top: 2rem;
  }
}
#verse-header h2 {
  align-self: end;
  margin: 0;
  font-size: 1.2rem;
  font-weight: normal;
}
@media (max-width: 768px) {
  #verse-header h2 {
    margin-bottom: 0.5rem;
    font-size: 1rem;
  }
}
#verse-header h2::after {
  content: "";
  display: block;
  margin-top: 2rem;
  margin-left: auto;
  margin-right: auto;
  width: 3rem;
  height: 2px;
  background-color: var(--accent-color);
}
#verse-header p {
  align-self: start;
  margin: 0;
  max-width: 40rem;
}

#verse-sunrise {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin: auto;
  padding: 0 2rem;
  max-width: 900px;
}
@media (max-width: 768px) {
  #verse-sunrise {
    grid-template-columns: 1fr;
  }
}
#verse-sunrise .column {
  align-self: end;
}
#verse-sunrise .column h2 {
  color: var(--accent-color);
}
#verse-sunrise .column p {
  margin: 0;
}
#verse-sunrise img {
  object-fit: cover;
  width: 100%;
  max-height: 100%;
}

#verse-platform {
  margin: 0 2rem;
  margin-top: 6rem;
  background: url("./assets/verse-platform-background.svg") center center/cover no-repeat;
}
#verse-platform .container {
  display: grid;
  place-items: center;
}
#verse-platform .container h2 {
  padding: 1.5rem 2rem;
  border-radius: 2rem;
  background-color: #111111;
  border: 2px solid #1a1a1a;
  font-size: 1.75rem;
}
@media (max-width: 768px) {
  #verse-platform .container h2 {
    font-size: 1.5rem;
  }
}
#verse-platform .card {
  display: grid;
  grid-template-columns: repeat(2, auto);
  place-items: center;
  column-gap: 2rem;
  margin-top: 3rem;
  padding: 2rem;
  max-width: 25rem;
  background: #1a1a1a;
  border: 1px solid black;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 1rem;
}
@media (max-width: 768px) {
  #verse-platform .card {
    grid-template-columns: 1fr;
    place-items: center;
  }
}
#verse-platform .card img {
  object-fit: cover;
  width: 100%;
  max-height: 100%;
}
@media (max-width: 768px) {
  #verse-platform .card img {
    width: 8rem;
    margin-bottom: 2rem;
  }
}
#verse-platform .card h3 {
  place-self: end left;
  margin: 0;
  margin-bottom: 1rem;
  color: var(--accent-color);
}
#verse-platform .card p {
  place-self: start left;
  margin: 0;
  line-height: 1;
  font-size: 1rem;
}
#verse-platform .features {
  margin-top: 6rem;
  font-weight: bold;
  font-size: 1.5rem;
  text-align: center;
}
@media (max-width: 768px) {
  #verse-platform .features {
    font-size: 1.2rem;
  }
}
#verse-platform .features .gradient {
  background-image: linear-gradient(96.63deg, #e4fc22 -0.9%, #ffffff 14.26%, #e4fc22 23.64%, #f3ff93 42.82%, #e4fc22 62.9%, #f8ffbc 93.27%, #ffffff 107.19%);
}

#verse-catalog {
  display: grid;
  place-items: center;
  margin: 0 2rem;
  margin-top: 4rem;
  background: url("./assets/verse-catalog-background.svg") center center/cover no-repeat;
}
#verse-catalog h2 {
  margin-bottom: 0;
  text-align: center;
}
#verse-catalog > p {
  max-width: 800px;
  text-align: center;
}
#verse-catalog div {
  display: grid;
  grid-template-columns: 2.2fr 3fr;
  grid-auto-flow: column;
  place-items: center;
  gap: 2rem;
  margin-top: 4rem;
  padding: 2rem 3rem;
  max-width: 800px;
  border: 1px solid transparent;
  border-radius: 20px;
  background: linear-gradient(to right, black, black), linear-gradient(93.24deg, #e4fc22 13.79%, rgba(0, 0, 0, 0.536458) 28.42%, #e4fc22 39.35%, rgba(243, 254, 159, 0) 59.69%, rgba(255, 255, 255, 0) 68.17%, rgba(255, 255, 255, 0.841172) 83.04%, #e4fc22 99.65%);
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
}
@media (max-width: 768px) {
  #verse-catalog div {
    padding: 1.5rem;
    grid-template-columns: 1fr;
    grid-auto-flow: row;
    gap: 1rem;
  }
}
#verse-catalog div h3 {
  justify-self: start;
  margin: 0;
}
@media (max-width: 768px) {
  #verse-catalog div h3 {
    font-size: 1.2rem;
  }
}
#verse-catalog div p {
  font-size: 1rem;
}
@media (max-width: 768px) {
  #verse-catalog div p {
    font-size: 0.9rem;
    margin: 0;
  }
}

#production-model-different {
  display: grid;
  padding: 0 8rem;
  background: url("./assets/production-model-different-background.svg") center center/cover no-repeat;
}
@media (max-width: 768px) {
  #production-model-different {
    padding-left: 2rem;
    padding-right: 1.5rem;
    place-items: center left;
  }
}
#production-model-different .introduction {
  place-self: center;
  display: grid;
  place-items: center;
  margin-bottom: 4rem;
}
#production-model-different .introduction p {
  max-width: 900px;
}
#production-model-different h3 {
  margin: 0;
  margin-top: 4rem;
  background-image: linear-gradient(96.63deg, #e4fc22 -0.9%, #ffffff 14.26%, #e4fc22 23.64%, #f3ff93 42.82%, #e4fc22 62.9%, #f8ffbc 93.27%, #ffffff 107.19%);
  font-size: 1.8rem;
}
@media (max-width: 768px) {
  #production-model-different h3 {
    font-size: 1.4rem;
  }
}
#production-model-different p {
  margin-top: 1rem;
  font-size: 1.2rem;
}
@media (max-width: 768px) {
  #production-model-different p {
    font-size: 1rem;
  }
}

#verse-social-network {
  display: grid;
  place-items: center;
  margin: 0 2rem;
  margin-top: 6rem;
  text-align: center;
}
#verse-social-network h2 {
  margin: 0;
  max-width: 30rem;
  font-size: 1.75rem;
  font-weight: normal;
}
#verse-social-network div {
  margin-top: 3rem;
  max-width: 800px;
}
#verse-social-network div h3 {
  margin-bottom: 0;
}
@media (max-width: 768px) {
  #verse-social-network div h3 {
    font-size: 1.5rem;
  }
}

#verse-empowering-creators {
  margin: 6rem 4rem;
}
@media (max-width: 768px) {
  #verse-empowering-creators {
    margin: 4rem 2rem;
  }
}
#verse-empowering-creators h2 {
  display: block;
  text-align: center;
}
@media (max-width: 768px) {
  #verse-empowering-creators h2 {
    font-size: 1.5rem;
  }
}
#verse-empowering-creators .grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 4rem;
}
@media (max-width: 768px) {
  #verse-empowering-creators .grid {
    grid-template-columns: 1fr;
  }
}
#verse-empowering-creators .grid div {
  padding: 2rem;
  background: linear-gradient(180deg, #0f0f0f 0%, rgba(15, 15, 15, 0) 100%);
  border: 1px solid gray;
  backdrop-filter: blur(1rem);
  border-radius: 1rem;
}
#verse-empowering-creators .grid div h3 {
  margin: 0;
}
@media (max-width: 768px) {
  #verse-empowering-creators .grid div h3 {
    font-size: 1.5rem;
  }
}
#verse-empowering-creators .grid div p {
  padding-bottom: 0;
  font-size: 1rem;
}

#verse-core-features .partial-border {
  position: relative;
  margin: 0 auto;
  padding: 1rem 2rem;
  width: max-content;
  text-align: center;
  border: 2px solid transparent;
  background: linear-gradient(to right, black, black), linear-gradient(96.54deg, #e4fc22 0%, #ffffff 30%, #e4fc22 60%, black 60%, black 100%);
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
  border-radius: 1rem;
}
#verse-core-features .partial-border::before {
  content: "";
  position: absolute;
  display: block;
  width: 50%;
  height: 4px;
  left: 25%;
  top: -4px;
  background-color: black;
}
#verse-core-features .partial-border h2 {
  margin: 0;
}
#verse-core-features > p {
  text-align: center;
}
#verse-core-features .grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  margin: 4rem auto;
  max-width: min(1000px, 100vw - 16rem);
}
@media (max-width: 768px) {
  #verse-core-features .grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: unset;
    margin: 4rem 2rem;
  }
}
#verse-core-features .grid div {
  grid-column: span 2;
  padding: 2rem;
  border: 1px solid transparent;
  border-radius: 1rem;
  background: linear-gradient(180deg, #181818 0%, black 100%), linear-gradient(180deg, #262626 0%, #e4fc22 46.35%, #262626 100%);
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
}
@media not (max-width: 768px) {
  #verse-core-features .grid div:first-child {
    grid-column-start: 2;
    grid-column-end: 4;
  }
}
#verse-core-features .grid h3 {
  margin: 0;
}
@media (max-width: 768px) {
  #verse-core-features .grid h3 {
    font-size: 1.2rem;
  }
}
#verse-core-features .grid p {
  margin-bottom: 0;
  font-size: 1rem;
}

#verse-steps {
  margin: 0 2rem;
}
#verse-steps h2 {
  margin-bottom: 0;
}
@media (max-width: 768px) {
  #verse-steps h2 {
    font-size: 1.5rem;
  }
}
#verse-steps .steps {
  display: grid;
  place-items: center;
  text-align: center;
  counter-reset: verse-steps;
}
#verse-steps .steps div {
  margin-top: 4rem;
  max-width: 700px;
}
#verse-steps .steps div h3 {
  margin-bottom: 0;
  background-image: linear-gradient(96.63deg, #e4fc22 -0.9%, #ffffff 14.26%, #e4fc22 23.64%, #f3ff93 42.82%, #e4fc22 62.9%, #f8ffbc 93.27%, #ffffff 107.19%);
}
@media (max-width: 768px) {
  #verse-steps .steps div h3 {
    font-size: 1.2rem;
  }
}
#verse-steps .steps div::before {
  counter-increment: verse-steps;
  content: counter(verse-steps);
  display: block;
  margin: auto;
  width: 4rem;
  height: 4rem;
  font-size: 2rem;
  line-height: 4rem;
  border-radius: 50%;
  background: linear-gradient(180deg, #3a3a3a 0%, #1a1a1a 100%);
}
@media (max-width: 768px) {
  #verse-steps .steps div::before {
    width: 3rem;
    height: 3rem;
    font-size: 1.5rem;
    line-height: 3rem;
  }
}

/* index */
#index-main {
  display: unset;
  width: 100%;
  color: white;
}

#index-header {
  display: grid;
  place-items: center;
  row-gap: 1rem;
  place-items: center;
  text-align: center;
  padding: 0 2rem;
  min-height: calc(100vh - 60px);
  background: url("./assets/index-header-background.svg") center center/cover no-repeat;
}
#index-header .container {
  display: grid;
  place-items: center;
  grid-gap: 2rem;
  max-width: 750px;
}
#index-header h1 {
  margin: 0;
  font-size: 3rem;
  background-image: linear-gradient(96.63deg, #e4fc22 -0.9%, #ffffff 14.26%, #e4fc22 23.64%, #f3ff93 42.82%, #e4fc22 62.9%, #f8ffbc 93.27%, #ffffff 107.19%);
}
@media (max-width: 768px) {
  #index-header h1 {
    font-size: 1.8rem;
    margin-top: 2rem;
  }
}
#index-header h1::before {
  content: "";
  display: block;
  margin-bottom: 1.5rem;
  margin-left: auto;
  margin-right: auto;
  width: 6rem;
  height: 4px;
  background-color: var(--accent-color);
}
#index-header p {
  align-self: start;
  margin: 0;
  font-size: 1rem;
}

#index-timeline,
#index-product-timeline {
  margin: auto;
  margin-top: 4rem;
  padding: 0 2rem;
}
#index-timeline > p,
#index-product-timeline > p {
  margin: auto;
  margin-bottom: 2rem;
  max-width: 750px;
  text-align: center;
  font-size: 1.25rem;
}
@media (max-width: 768px) {
  #index-timeline > p,
  #index-product-timeline > p {
    font-size: 1.2rem;
  }
}
#index-timeline .timeline-cards-container,
#index-product-timeline .timeline-cards-container {
  display: grid;
}
#index-timeline .timeline-cards-container hr,
#index-timeline .timeline-cards-container .timeline-cards,
#index-product-timeline .timeline-cards-container hr,
#index-product-timeline .timeline-cards-container .timeline-cards {
  grid-area: 1/1;
}
#index-timeline .timeline-cards-container hr,
#index-product-timeline .timeline-cards-container hr {
  align-self: start;
  margin-top: calc(2rem - 2px);
  margin-bottom: 0;
  height: 2px;
  width: 100%;
  border: 0;
  background-color: var(--accent-color);
  z-index: -1;
}
@media (max-width: 768px) {
  #index-timeline .timeline-cards-container hr,
  #index-product-timeline .timeline-cards-container hr {
    height: 95%;
    width: 2px;
  }
}

#index-timeline .timeline-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: auto;
  max-width: 900px;
}
@media (max-width: 768px) {
  #index-timeline .timeline-cards {
    grid-template-columns: 1fr;
  }
}
#index-timeline .timeline-cards img {
  display: block;
  width: 4rem;
  height: 4rem;
  margin: auto;
}
#index-timeline .timeline-cards .container {
  margin: 0.5rem;
  padding: 1.5rem;
  background-image: linear-gradient(180deg, #111111 0%, #0b0b0b 100%);
  border: 1px solid #3a3a3a;
  border-radius: 1rem;
}
@media (max-width: 768px) {
  #index-timeline .timeline-cards .container {
    padding: 1.2rem;
  }
}
#index-timeline .timeline-cards .container h3 {
  margin: 0 auto;
  margin-bottom: 1rem;
  text-align: center;
  width: 100%;
  font-size: 1.5rem;
}
@media (max-width: 768px) {
  #index-timeline .timeline-cards .container h3 {
    font-size: 1.2rem;
  }
}
#index-timeline .timeline-cards .container ul {
  margin: 0;
  padding: 0;
  list-style-type: "-";
  line-height: 1.3;
}

#index-product-timeline .timeline-cards-container {
  margin-top: 2rem;
}
#index-product-timeline .timeline-cards-container hr {
  align-self: center;
  margin-top: unset;
  margin-bottom: 2px;
}
#index-product-timeline .timeline-cards {
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 768px) {
  #index-product-timeline .timeline-cards {
    grid-template-rows: unset;
    grid-template-columns: 1fr;
  }
}
#index-product-timeline .timeline-cards > div {
  display: grid;
}
@media (max-width: 768px) {
  #index-product-timeline .timeline-cards > div {
    margin-top: 1rem;
  }
  #index-product-timeline .timeline-cards > div:nth-child(2n) > :nth-child(1) {
    grid-row: 2;
  }
  #index-product-timeline .timeline-cards > div:nth-child(2n) > :nth-child(2) {
    grid-row: 1;
  }
}
@media not (max-width: 768px) {
  #index-product-timeline .timeline-cards > div {
    grid-template-rows: subgrid;
    grid-template-columns: subgrid;
    grid-row-end: span 2;
    grid-column: var(--column);
  }
  #index-product-timeline .timeline-cards > div:nth-child(2n-1) {
    grid-row-start: 2;
  }
}
#index-product-timeline .timeline-cards img {
  display: block;
  width: 4rem;
  height: 4rem;
  margin: auto;
}
#index-product-timeline .product-container {
  background-color: black;
}
#index-product-timeline .product-container h3 {
  margin: 0;
}
#index-product-timeline .product-container h3::after {
  content: "";
  display: block;
  margin: 1rem 0;
  width: 4rem;
  height: 2px;
  background-color: var(--accent-color);
}
#index-product-timeline .product-container p {
  margin: 0;
  padding: 0;
  font-size: 1rem;
}
@media (max-width: 768px) {
  #index-product-timeline .product-container p {
    font-size: 12px;
  }
}

#index-breakdown {
  display: grid;
  place-items: center;
  margin-top: 6rem;
  padding: 0 2rem;
  row-gap: 4rem;
}
#index-breakdown .header {
  text-align: center;
}
#index-breakdown .header h2 {
  margin: 0;
  background-image: linear-gradient(96.63deg, #e4fc22 -0.9%, #ffffff 14.26%, #e4fc22 23.64%, #f3ff93 42.82%, #e4fc22 62.9%, #f8ffbc 93.27%, #ffffff 107.19%);
}
#index-breakdown .header p {
  margin: auto;
  margin-top: 1.5rem;
  max-width: 750px;
}
#index-breakdown i {
  display: inline-block;
  margin-right: 0.25rem;
  width: 1.5rem;
  height: 1rem;
  background-color: var(--background-color);
  border: 1px solid gray;
  border-radius: 0.2rem;
  translate: 0 20%;
}
#index-breakdown .grid {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  place-items: center;
  margin: auto;
  gap: 1rem;
}
@media (max-width: 768px) {
  #index-breakdown .grid {
    grid-template-columns: 1fr;
  }
}
#index-breakdown .grid .card {
  padding: 2rem;
  background: linear-gradient(180deg, #1a1a1a 0%, rgba(26, 26, 26, 0) 100%);
  backdrop-filter: blur(13.2464px);
  border-radius: 1rem;
}
@media (max-width: 768px) {
  #index-breakdown .grid .card {
    padding: 1rem;
  }
}
#index-breakdown .grid .card h3 {
  margin: 0;
}
#index-breakdown .grid .card ul {
  display: inline;
  padding: 0;
  list-style: none;
  line-height: 2;
}
#index-breakdown .grid .card ul li span {
  color: var(--accent-color);
}
#index-breakdown .grid .pie-chart {
  display: inline-grid;
  grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 768px) {
  #index-breakdown .grid .pie-chart {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 768px) {
  #index-breakdown .grid .pie-chart h3 {
    margin: 1rem 0;
  }
}
#index-breakdown .grid .pie-chart img {
  width: 10rem;
}
@media not (max-width: 768px) {
  #index-breakdown .grid .pie-chart img {
    margin-top: 1.5rem;
  }
}
#index-breakdown .grid .pie-chart ul {
  line-height: 1.5;
}
#index-breakdown .usage {
  padding: 2rem;
  background: linear-gradient(180deg, #1a1a1a 0%, rgba(26, 26, 26, 0) 100%);
  backdrop-filter: blur(17.6383px);
  border: 1px solid grey;
  border-radius: 1rem;
}
@media (max-width: 768px) {
  #index-breakdown .usage {
    padding: 1rem;
  }
}
#index-breakdown .usage .heading {
  text-align: center;
}
#index-breakdown .usage .heading h2 {
  margin-top: 0;
}
#index-breakdown .usage .usage-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 2rem;
}
@media (max-width: 768px) {
  #index-breakdown .usage .usage-grid {
    grid-template-columns: 1fr;
  }
}
@media not (max-width: 768px) {
  #index-breakdown .usage .usage-grid div:nth-child(-n+4) {
    grid-column: span 3;
  }
  #index-breakdown .usage .usage-grid div:nth-last-child(-n+3) {
    grid-column: span 4;
  }
}
#index-breakdown .usage .usage-grid h3 {
  margin: 0;
  font-size: 1.25rem;
}
@media (max-width: 768px) {
  #index-breakdown .usage .usage-grid h3 {
    font-size: 1rem;
  }
}
#index-breakdown .usage .usage-grid p {
  margin-top: 0.75rem;
  margin-bottom: 0;
  font-size: 1rem;
}

#index-sustainability {
  display: grid;
  margin: auto;
  margin-top: 6rem;
  padding: 0 2rem;
  max-width: 1000px;
}
#index-sustainability .heading {
  text-align: center;
}
#index-sustainability .heading h2 {
  margin: 0;
  background-image: linear-gradient(96.63deg, #e4fc22 -0.9%, #ffffff 14.26%, #e4fc22 23.64%, #f3ff93 42.82%, #e4fc22 62.9%, #f8ffbc 93.27%, #ffffff 107.19%);
}
#index-sustainability .heading p {
  margin: auto;
  margin-top: 1rem;
  max-width: 750px;
}
#index-sustainability .product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(7, auto);
  gap: 0.5rem 4rem;
  margin-top: 2rem;
}
@media (max-width: 768px) {
  #index-sustainability .product-grid {
    grid-template-columns: 1fr;
  }
}
#index-sustainability .product-grid h3,
#index-sustainability .product-grid h4,
#index-sustainability .product-grid p {
  margin: 0;
}
#index-sustainability .product-grid h3 {
  justify-self: center;
  margin-top: 2rem;
  margin-bottom: 1rem;
}
#index-sustainability .product-grid .product {
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
}
#index-sustainability .product-grid .product.span-2 {
  grid-row: span 2;
}
#index-sustainability .product-grid .product.span-5 {
  grid-row: span 5;
}
#index-sustainability .product-grid .card {
  padding: 1rem;
  background: linear-gradient(180deg, #1f1f1f 0%, #131313 100%);
  border-radius: 0.5rem;
  border: 1px solid #676958;
}
#index-sustainability .product-grid .card h4 {
  font-size: 1rem;
}
#index-sustainability .product-grid .card p {
  margin-top: 0.5rem;
  font-size: 0.75rem;
}

/*# sourceMappingURL=style.css.map */