@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

:root {
  --color-main: rgb(70, 70, 70);
  --color-scd: #ffffff;
  --color-third: #202020;
  --font-main: "Poppins", sans-serif;
  --size-100: calc(2rem + 3.5vw);
  --size-85: calc(2rem + 2.8vw);
  --size-50: calc(1rem + 1.75vw);
  --size-25: calc(0.5rem + 0.75vw);
  --size-16: calc(0.5rem + 0.5vw);
  --size-btn: calc(0.35rem + 0.5vw);
  --nav-size: calc(3.5rem + 1.5vw);
  --line-small: calc(0.025rem + 0.05vw);
  --line-medium: calc(0.05rem + 0.1vw);
  --container-1100: min(calc(50rem + 15vw), 80vw);
  --container-1200: min(calc(50rem + 25vw), 85vw);
  --container-1600: min(calc(60rem + 35vw), 90vw);
  --container-1600: min(calc(60rem + 35vw), 90vw);
  --space-regular: calc(1rem + 3vw);
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: var(--font-main);
}

::selection {
  background-color: rgb(0, 0, 0, 0.5);
  color: var(--color-scd);
}

html {
  max-width: 100vw;
  overflow-x: hidden;
}

body {
  background-image: url("./Images/bright_squares.png");
}

.flex {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

nav {
  position: fixed;
  width: 100%;
  height: calc(var(--nav-size));
  border-bottom: 0.1vw solid var(--color-main);
  z-index: 10;
  background-color: rgba(255, 250, 250, 0.808);
}

nav a {
  font-size: calc(var(--size-25) * 1.25);
  font-weight: bold;
  color: var(--color-main);
  text-decoration: none;
}

img {
  width: 100%;
  object-fit: cover;
}

section {
  min-height: 37.5rem;
}

.square {
  width: 0;
  height: 0;
  position: absolute;
  right: 0;
  border-left: calc(var(--size-25) / 1.5) solid transparent;
  border-right: calc(var(--size-25) / 1.5) solid transparent;
  border-bottom: var(--size-25) solid #202020;
  margin-right: var(--space-regular);
  cursor: pointer;
  transition: 250ms ease;
}

.navbar {
  right: 0;
  position: absolute;
  height: 100vh;
  width: calc(calc(var(--space-regular) * 2) + var(--size-25));
  /* top: 0; */
  /* padding-top: calc(var(--nav-size) + 10rem); */
  top: 50%;
  transform: translateY(6%);
  display: none;
  transition: 500ms ease;
}

.line {
  text-transform: uppercase;
  line-height: 100%;
  height: 85vh;
  background-color: rgba(0, 0, 0, 0.075);
  width: calc(0.15vw + 0.1rem);
  margin: 0 auto;
  list-style-type: none;
  flex-direction: column;
  justify-content: space-between;
}

.open-nav {
  display: block;
  transition: 500ms ease;
}

.line a {
  cursor: pointer;
  width: calc(1vw + 3rem);
  height: calc(1vw + 3rem);
  text-align: center;
  font-size: calc(var(--size-16) - 0.15vw);
  -webkit-text-stroke: 0.05vw black;
  color: rgba(255, 255, 255, 0.795);
  font-weight: 900;
  border-radius: 50%;
  border: calc(0.1rem + 0.1vw) solid rgba(0, 0, 0, 0.185);
  transition: 500ms ease;
}

.line a:hover {
  color: black;
  -webkit-text-stroke: 0.05vw white;
  transform: scale(1.5);
  background: url(./Images/bright_squares.png);
  border: calc(0.1rem + 0.1vw) solid rgba(0, 0, 0, 0.7);
}

@media only screen and (max-height: 650px) {
  .line a {
    border: none;
    line-height: 90%;
  }

  .line a:hover {
    background: none;
    transform: scale(1.1);
    color: black;
    border: none;
  }
}

.hero-c {
  position: relative;
  flex-direction: column;
  -webkit-text-stroke: 0.05vw white;
  height: 100vh;
}

.hero-c h1 {
  font-size: calc(var(--size-85) + 2vh);
  line-height: 120%;
  transform: translateY(-80%);
  padding: 0 calc(var(--space-regular) / 2.5);
  margin-top: 6.5vh;
}

.hero-model-main {
  position: absolute;
  width: calc(10rem + 15vw + 25vh);
  bottom: 0;
  z-index: 2;
}

.hero-model-left {
  position: absolute;
  width: calc(8rem + 12.5vw + 20vh);
  bottom: 0;
  transform: translate(-50%, -20%);
  z-index: 0.5;
}

.hero-model-right {
  position: absolute;
  width: calc(8rem + 12.5vw + 20vh);
  bottom: 0;
  transform: translate(50%, -20%);
  z-index: 0.5;
  filter: saturate(39%);
}

.hero-decor {
  width: 100%;
  height: var(--nav-size);
  background-color: var(--color-third);
  position: absolute;
  bottom: 0;
  z-index: 1.5;
  opacity: 1;
  font-weight: 900;
  width: 100vw;
}

.cta-panel {
  opacity: 0;
  transition: 500ms ease;
  cursor: pointer;
  position: absolute;
  font-size: 800;
  background-color: #073c4b;
  padding: calc(var(--space-regular) / 2.5) var(--space-regular);
  font-size: calc(var(--size-25) * 1.5);
  width: calc(var(--container-1100) / 2);
  bottom: 0;
  margin-bottom: calc(var(--space-regular) / 1.5);

  box-shadow: 0px 0px 3px 3px #52fefe, 0px 0px 10px 3px #52fefe inset;
  z-index: 5;
  border: none;
}

.cta-panel a {
  color: #ffffff;
  text-decoration: none;
}

.cta-panel:hover {
  opacity: 0.75;
}

.arc-reactor {
  width: calc(var(--size-btn) * 10);
  height: calc(var(--size-btn) * 10);
  margin: auto;
  position: absolute;
  bottom: 0;
  transform: translateY(calc(-0.1rem + -0.5vw));
  border-radius: 50%;
  background-color: #384c50;
  border: 1px solid rgb(18, 20, 20);
  z-index: 3;
}

.circle {
  border-radius: 50%;
}

.abs-center {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

.core-inner {
  width: calc(var(--size-btn) * 2);
  height: calc(var(--size-btn) * 2);
  border: 5px solid #1b4e5f;
  background-color: #fff;
  box-shadow: 0px 0px 7px 5px #52fefe, 0px 0px 10px 10px #52fefe inset;
}

.core-outer {
  width: calc(var(--size-btn) * 4);
  height: calc(var(--size-btn) * 4);
  border: 1px solid #52fefe;
  background-color: #fff;
  box-shadow: 0px 0px 2px 1px #52fefe, 0px 0px 10px 5px #52fefe inset;
}

.core-wrapper {
  width: calc(var(--size-btn) * 6);
  height: calc(var(--size-btn) * 6);
  background-color: #073c4b;
  box-shadow: 0px 0px 5px 4px #52fefe, 0px 0px 6px 2px #52fefe inset;
}

.tunnel {
  width: calc(var(--size-btn) * 7);
  height: calc(var(--size-btn) * 7);
  background-color: #fff;
  box-shadow: 0px 0px 5px 1px #52fefe, 0px 0px 5px 4px #52fefe inset;
}

.coil-container {
  position: relative;
  width: 100%;
  height: 100%;
  animation: 3s infinite linear reactor-anim;
}

.coil {
  position: absolute;
  width: calc(var(--size-btn) * 1);
  height: calc(var(--size-btn) * 0.75);
  top: calc(50% - calc(var(--size-btn) * 3.5));
  left: calc(50% - calc(var(--size-btn) * 0.5));
  transform-origin: calc(var(--size-btn) * 0.5) calc(var(--size-btn) * 3.5);
  background-color: #073c4b;
  box-shadow: 0px 0px 5px #52fefe inset;
}

.coil-1 {
  transform: rotate(0deg);
}

.coil-2 {
  transform: rotate(45deg);
}

.coil-3 {
  transform: rotate(90deg);
}

.coil-4 {
  transform: rotate(135deg);
}

.coil-5 {
  transform: rotate(180deg);
}

.coil-6 {
  transform: rotate(225deg);
}

.coil-7 {
  transform: rotate(270deg);
}

.coil-8 {
  transform: rotate(315deg);
}

.reactor-container-inner {
  height: calc(var(--size-btn) * 8);
  width: calc(var(--size-btn) * 8);
  background-color: rgb(22, 26, 27);
  box-shadow: 0px 0px 4px 1px #52fefe;
}

@keyframes reactor-anim {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.section-title {
  font-size: var(--size-100);
  transform: translateY(calc(3rem + 4.5vw));
  -webkit-text-stroke: calc(0.1vw + 0.1rem) var(--color-main);
  color: rgba(255, 250, 250, 0.795);
  line-height: 100%;
}

.intro-c {
  flex-direction: column;
  position: relative;
  justify-content: space-between;
  height: calc(25rem + 27.5vw + 10vh);
  min-height: calc(35rem + 10vh);
}

.intro-title {
  position: absolute;
}

.intro-images {
  width: var(--container-1200);
  justify-content: space-evenly;
  top: 0;
}

.intro-images img {
  width: min(calc(var(--size-btn) * 25), calc(25vw + 10rem));
  height: calc(15rem + 20vw + 15vh);
  min-height: calc(20rem + 20vh - 10vw);
}

.intro-text {
  font-size: var(--size-25);
  width: var(--container-1100);
  margin: var(--space-regular) 0 calc(var(--space-regular) + 1rem);
}

.history-left-c {
  flex-direction: row-reverse;
  margin: var(--nav-size) 0;
}

.history-left-info-c {
  position: relative;
  width: calc(var(--container-1100) / 1.5);
  flex-direction: column;
  text-align: left;
  align-items: flex-start;
  padding: calc(var(--space-regular) * 1.25);
  padding-right: calc(var(--space-regular) * 1.75);
  transform: translateY(20%);
}

.history-three-info-c {
  transform: translateY(5%);
}

.history-left-title {
  position: absolute;
  top: 0;
  right: 0;
  transform: translateY(-100%);
  padding-right: calc(var(--space-regular) * 1.75);
}

.history-left-subtitle {
  font-size: var(--size-50);
  line-height: 100%;
  font-weight: 500;
  margin-bottom: calc(var(--space-regular) / 2);
}

.history-left-text {
  font-size: var(--size-25);
}

.history-img {
  height: calc(15rem + 35vw + 10vh);
  width: calc(var(--container-1100) - 20vw);
  align-self: flex-end;
}

.history-right-c {
  position: relative;
  flex-direction: row;
}

.history-right-info-c {
  position: relative;
  width: calc(var(--container-1100) / 1.5);
  flex-direction: column;
  text-align: left;
  align-items: flex-start;
  padding: calc(var(--space-regular) * 1.25);
  padding-left: calc(var(--space-regular) * 1.75);
}

.history-right-title {
  position: absolute;
  top: 0;
  right: 0;
  transform: translateY(-100%);
}

.history-right-subtitle {
  font-size: var(--size-50);
  line-height: 100%;
  font-weight: 500;
  margin-bottom: calc(var(--space-regular) / 2);
}

.history-right-text {
  font-size: var(--size-25);
}

.era-c {
  height: var(--container-1100);
  position: relative;
}

.era-stick-c {
  top: 0;
  position: sticky;
  position: -webkit-sticky;
}

.era-title {
  margin: var(--space-regular);
  position: absolute;
  top: 0;
}

.era-text {
  transform: translateY(20%);
  text-align: left;
  font-size: var(--size-25);
  width: 30ch;
  padding: calc(var(--space-regular) * 1.5);
  padding-left: 0;
}

.era-img {
  width: calc(var(--container-1100) - 10vw);
  align-self: flex-end;
}

.future-track {
  flex-direction: column;
  padding-bottom: calc(15vh + 5rem);
}

.future-c {
  flex-direction: column;
  min-height: 30rem;

  padding: var(--space-regular);
}

.future-title {
  top: 0;
  order: 1;
  transform: translateY(calc(-1rem - 2.5vw));
}

.invisible {
  opacity: 0;
}

.future-content {
  transform: translateY(calc(12rem + 2vw));

  flex-direction: column-reverse;
}

.future-text {
  margin: var(--space-regular) 0;
  font-size: var(--size-25);
  width: calc(var(--container-1100) / 1.5 + 5vw + 5vh);
}

.future-content img {
  width: calc(var(--container-1100) / 1.5 + 5vw + 10vh);
  height: calc(var(--container-1100) / 3.9 + 20vh);
}

.top {
  object-position: top;
}

.indo-title {
  position: absolute;
  top: 0;
  left: 0;
  text-align: left;
  padding-left: calc(var(--space-regular) * 1.75);
  width: var(--container-1100);
  transform: translateY(-25%);
}

.example-title {
  position: absolute;
  top: 0;
}

.example-c {
  flex-direction: column;
  position: relative;
  min-height: calc(15rem + 25vw);
  margin: calc(var(--space-regular) * 2) 0 calc(var(--nav-size) * 3);
}

.example-text {
  font-size: var(--size-25);
  width: var(--container-1100);
  margin-bottom: calc(var(--space-regular) / 1.25);
}

.example-slideshow {
  margin-top: calc(5rem + 10vw);
  flex-direction: column;
}

.slideshow-container {
  position: relative;
}

.text-info {
  color: #f2f2f2;
  font-size: calc(var(--size-50) / 1.5);
  padding: calc(var(--space-regular) / 2);
  position: absolute;
  bottom: 0;
  font-weight: 500;
  line-height: 120%;
  width: 100%;
  text-align: center;
}

.number-info {
  color: #f2f2f2;
  font-weight: 700;
  font-size: var(--size-16);
  padding: calc(var(--space-regular) / 2);
  position: absolute;
  top: 0;
}

.dot {
  height: calc(var(--space-regular) * 1.25);
  width: calc(var(--container-1200) / 8);
  filter: brightness(50%);
  transition: 0.6s ease;
  cursor: pointer;
}

.dot img {
  height: 100%;
}

.dot-c {
  justify-content: space-evenly;
  margin: 0 auto;
  width: var(--container-1200);
}

.active {
  filter: brightness(100%);
}

.active,
.dot:hover {
  filter: brightness(100%);
}

.slides {
  width: var(--container-1200);
}

.slides img {
  height: calc(var(--container-1200) / 2);
  filter: brightness(60%);
}

.prev,
.next {
  cursor: pointer;
  position: absolute;
  margin: 0 calc(var(--space-regular) / 2);
  color: white;
  font-weight: bold;
  font-size: var(--size-100);
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  top: 0;
  top: 50%;
  transform: translate(0, -50%);
}

.prev {
  left: 0;
}

.next {
  right: 0;
}

.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {
    opacity: 0.4;
  }
  to {
    opacity: 1;
  }
}

@keyframes fade {
  from {
    opacity: 0.4;
  }
  to {
    opacity: 1;
  }
}

.problem-text {
  width: calc(var(--container-1200) - 5vw);
  padding-top: calc(var(--space-regular) / 2);
  margin-bottom: 0;
}

.problem-c {
  min-height: calc(17.5rem + 20vw + 10vh);
  height: calc(35rem + 28vw + 15vh);
  justify-content: space-between;
  margin: calc(var(--space-regular) * 3) 0;
}

.problem-info {
  position: relative;
}

.problem-subtitle {
  position: absolute;
  font-size: calc(var(--size-50) - 0.85vw);
  line-height: 120%;
  align-self: flex-end;
  padding: var(--space-regular);
  -webkit-text-stroke: calc(0.025vw + 0.05rem) var(--color-main);
  color: rgba(255, 250, 250);
  z-index: 3;
}

.problem-images {
  width: var(--container-1200);
  padding-bottom: var(--space-regular);
}

.problem-images img {
  min-height: calc(25rem + 25vh - 10vw);
  height: calc(15rem + 10vw + 30vh);
}

.dark img {
  filter: brightness(80%);
}

.solution-c {
  height: calc(10rem + 45vw);
  min-height: 20rem;
}

.solution-c-2 {
  margin: 0;
  height: calc(10rem + 35vw);
  min-height: 20rem;
}

.solution-title {
  left: 0;
  position: absolute;
  text-align: center;
  padding-top: calc(var(--space-regular) * 1);

  padding-left: 0;
  margin: 0 auto;
  right: none;
  transform: translateY(0%);
}

.solution-info {
  margin-top: calc(var(--space-regular) * 1.5);
  height: calc(var(--container-1200) / 2);
}

.solution-img {
  width: calc(var(--container-1600) / 2.25);
  height: calc(var(--container-1600) / 2.25);
  align-self: center;
  padding-top: calc(var(--space-regular) * 1.5);
}

.go-indo-title {
  text-align: right;
  width: calc(var(--container-1200) + 5vw);
}

.end-c {
  width: var(--container-1600);
  position: relative;
  margin: 0;
  margin: calc(var(--space-regular) * 3) auto 0;
}

.end-center {
  position: relative;
  width: 100%;
  height: calc(20rem + 25vw);
}

.end-h2 {
  font-size: var(--size-50);
  font-weight: 800;
  text-align: left;
  position: absolute;
  bottom: 0;
  left: 0;
  padding: calc(var(--space-regular) / 2);
  padding-right: 0;
  width: calc(var(--container-1100) / 3);
  line-height: 100%;
  -webkit-text-stroke: calc(0.1vw + 0.1rem) var(--color-main);
  color: rgba(255, 250, 250, 0.795);
}

.end-img {
  height: 100%;
  object-position: center;
}

footer {
  height: calc(5rem + 5vw);
  display: flex;
  align-items: center;
  width: var(--container-1600);
  margin: 0 auto;
}

.circle-footer {
  width: var(--space-regular);
  height: var(--space-regular);
  border: calc(0.1rem + 0.1vw) solid var(--color-main);
  border-radius: 50%;
}

.circle-footer p {
  font-size: var(--size-16);
}

.name {
  margin-left: calc(var(--space-regular) / 3);
}

.name p {
  font-size: var(--size-16);
  text-align: left;
}

.real-footer {
  justify-content: start;
  /* padding-left: calc(var(--space-regular) * 2); */
  /* margin-left: 0; */
  /* margin-left: calc(var(--space-regular) * 1); */
}

@media only screen and (max-width: 800px) {
  :root {
    --size-btn: calc(0.35rem + 0.9vw - 0.25vh);
    --size-100: calc(1.5rem + 3.5vw);
    --size-85: calc(1rem + 4.5vw);
    --size-50: calc(0.75rem + 1.25vw);
    --size-25: calc(0.55rem + 0.85vw);
  }

  .navbar {
    z-index: 15;
    background-color: #073c4b9a;
    box-shadow: 0px 0px calc(1rem + 1vw) calc(1rem + 1vw) #52fefeb9,
      0px 0px calc(2rem + 1vw) calc(1rem + 1vw) #52fefe inset;
    position: absolute;
    height: 75vh;
    width: 75vw;
    margin: var(--space-regular) auto 0;
    left: 50%;
    transform: translate(-50%, 6%);
    display: none;
    transition: 500ms ease;
  }

  .line {
    height: 100%;
    background-color: none;
    width: 100%;
    padding: var(--space-regular);
    margin: 0 auto;
    justify-content: space-evenly;
  }

  .open-nav {
    display: block;
    transition: 500ms ease;
  }

  .line a {
    cursor: pointer;
    width: 100%;
    height: 100%;
    line-height: 120%;
    letter-spacing: var(--line-medium);
    font-size: calc(var(--size-25) + 0.25vw + 0.5rem);
    -webkit-text-stroke: 0.05vw black;
    border: 0;
    border-radius: 0%;
    transition: 500ms ease;
  }

  .line a + a {
    border-top: calc(0.1rem + 0.1vw) solid rgba(0, 0, 0, 0.185);
  }

  .line a:hover {
    transform: scale(1.25);
    background: #52fefe56;
    border: calc(0.1rem + 0.1vw) solid #52fefe;
  }

  .flex {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
  }

  nav {
    height: calc(var(--nav-size) + 2vh);
  }

  nav a {
    font-size: var(--size-50);
  }

  img {
    width: 100%;
    object-fit: cover;
  }

  .hero-c h1 {
    font-size: calc(var(--size-85) + 2vh);
    transform: translateY(-65%);
  }

  .hero-model-main {
    width: calc(10rem + 35vw + 10vh);
  }

  .hero-model-left {
    display: none;
  }

  .hero-model-right {
    display: none;
  }

  .cta-panel {
    padding: calc(var(--space-regular) / 2.5) var(--space-regular);
    width: calc(var(--container-1100) / 1.75);
    font-size: var(--size-50);
  }

  /* .cta-panel:focus {
    opacity: 0.75;
  } */

  /* .arc-reactor {
    width: calc(var(--size-btn) * 10);
    height: calc(var(--size-btn) * 10);
    margin: auto;
    position: absolute;
    bottom: 0;
    transform: translateY(calc(-0.1rem + -0.5vw));
    border-radius: 50%;
    background-color: #384c50;
    border: 1px solid rgb(18, 20, 20);
    z-index: 3;
  } */

  .intro-c {
    /* flex-direction: column;
    position: relative;
    justify-content: space-between; */
    height: calc(25rem + 30vw + 30vh);
    min-height: calc(35rem + 10vh);
  }

  .intro-title {
    top: 0;
    padding: 0 calc(var(--space-regular) - 3vw);
  }

  .intro-images {
    position: relative;
    flex-direction: column;
    margin-top: calc(2.5vh + 20rem - 42.5vw);
    transform: translateY(22.5%);
  }

  .intro-images img {
    object-position: 50% 45%;
    height: calc(7.5vw + 5vh);
    width: calc(8.5rem + 39.5vw + 12vh);
    min-height: calc(10rem + 6.5vh - 5vw);
  }

  .intro-text {
    font-size: var(--size-25);
    position: absolute;
    padding-top: calc(5rem + 3.5vh + 1vw - 2vw);
    top: 0;
    transform: translateY(22.5%);
  }

  .history-left-c {
    flex-direction: column-reverse;
    margin: calc(var(--nav-size) + 3rem + 1vw + 2vh) 0;

    padding-top: 2rem;
  }

  .first-container {
    padding-top: 10rem;
  }

  .history-img {
    height: calc(10rem + 15vw + 10vh);
    width: var(--container-1100);
    /* height: calc(15rem + 35vw + 10vh);
    width: calc(var(--container-1100) - 20vw); */
    align-self: center;
  }

  .history-left-info-c {
    width: var(--container-1600);
    flex-direction: column;
    text-align: left;
    align-items: flex-start;
    padding: 0 calc(var(--space-regular) * 1.25)
      calc(var(--space-regular) * 1.25);
  }

  .history-three-info-c {
    transform: translateY(15%);
  }

  .history-left-title {
    position: absolute;
    top: 0;
    text-align: center;
    left: 0;
    transform: translateY(calc(-15rem - 15vw - 10vh));
    padding-right: 0;
    margin: 0 auto;
  }

  .history-left-subtitle {
    font-size: var(--size-50);
    line-height: 100%;
    font-weight: 500;
    margin-bottom: calc(var(--space-regular) / 2);
  }

  .history-left-text {
    font-size: var(--size-25);
  }

  .history-right-c {
    flex-direction: column-reverse;
    margin: calc(var(--nav-size) + 3rem + 1vw + 2vh) 0;
    padding-top: 2rem;
  }

  .history-right-info-c {
    margin-top: calc(var(--space-regular) * 1.25);
    width: var(--container-1600);
    flex-direction: column;
    text-align: left;
    align-items: flex-start;
    padding: 0 calc(var(--space-regular) * 1.25)
      calc(var(--space-regular) * 1.25);
  }

  .history-right-title {
    position: absolute;
    top: 0;
    text-align: center;
    left: 0;
    transform: translateY(calc(-15rem - 15vw - 10vh));
    padding-right: 0;
    margin: 0 auto;
  }

  .history-right-subtitle {
    font-size: var(--size-50);
    line-height: 100%;
    font-weight: 500;
    margin-bottom: calc(var(--space-regular) / 2);
  }

  .era-c {
    position: relative;
    padding-top: 2vw;
    margin-top: calc(10rem + 2vw);
    transform: translateY(10vw);
  }

  .era-title {
    margin: var(--space-regular) 0 0;
    position: absolute;
    top: 0;
    transform: translateY(calc(-10vh - 2vw));
    /* display: none; */
  }

  .era-text {
    transform: translateY(10%);
    text-align: left;
    font-size: var(--size-25);
    width: var(--container-1200);
    padding: calc(var(--space-regular) * 1.5);
  }

  .era-img {
    width: var(--container-1200);
    align-self: center;
    transform: translate(-5%, 5vw);
  }

  .future-track {
    flex-direction: column;
    padding-bottom: calc(10vh + 5rem);
  }

  .future-c {
    min-height: calc(10rem + 10vh);
  }

  .indo-title {
    position: absolute;
    top: 0;
    left: 0;
    text-align: left;
    padding-left: calc(var(--space-regular) * 1.75);
    width: var(--container-1100);
    transform: translateY(-25%);
  }

  .example-title {
    position: absolute;
    top: 0;
    /* transform: translateY(-2%); */
  }

  .example-c {
    min-height: calc(15rem + 25vw);
  }

  .example-text {
    transform: translateY(2.5%);
  }

  .example-slideshow {
    margin-top: calc(10rem - 10vw);
    flex-direction: column;
    transform: translateY(10%);
  }

  .slideshow-container {
    position: relative;
  }

  .text-info {
    color: #f2f2f2;
    font-size: calc(var(--size-50) / 1.5);
    padding: calc(var(--space-regular) / 2);
    position: absolute;
    bottom: 0;
    font-weight: 500;
    line-height: 120%;
    width: 100%;
    text-align: center;
  }

  .dot-c {
    justify-content: space-evenly;
    margin: 0 auto;
    width: var(--container-1200);
  }

  .slides img {
    height: var(--container-1100);
    filter: brightness(60%);
  }

  .problem-c {
    /* min-height: calc(17.5rem + 20vw + 10vh);
    height: calc(35rem + 28vw + 15vh); */
    min-height: calc(10rem + 20vw + 20vh);
    height: auto;
    justify-content: space-between;
    margin: calc(var(--space-regular) * 3) 0;
  }

  .problem-text {
    /* width: calc(var(--container-1200) - 5vw);
    padding-top: calc(var(--space-regular) / 2);
    margin-bottom: 0; */
    transform: translateY(20%);
  }

  .problem-info {
    position: relative;
  }

  .problem-subtitle {
    position: absolute;
    font-size: var(--size-50);
    line-height: 120%;
    align-self: flex-end;
    padding: calc(var(--space-regular) / 2);
    -webkit-text-stroke: calc(0.025vw + 0.05rem) var(--color-main);
    color: rgba(255, 250, 250);
    z-index: 3;
  }

  .problem-images {
    transform: translateY(20%);
    margin-top: calc(10vw + 5rem);
    width: var(--container-1100);
    padding-bottom: var(--space-regular);
    position: relative;
    flex-direction: column;
  }

  .problem-images img {
    object-position: 50% 45%;
    height: calc(7.5vw + 5vh);
    width: calc(8.5rem + 39.5vw + 12vh);
    min-height: calc(10rem + 6.5vh - 5vw);
  }

  .dark img {
    filter: brightness(80%);
  }

  .solution-c {
    height: calc(10rem + 45vw);
    min-height: 20rem;
  }

  .first-c {
    margin-top: calc(5vw + 15rem);
    height: calc(10rem + 45vw + 10vh);
  }

  .solution-c-2 {
    margin: 0 auto;
    height: calc(10rem + 35vw);
    min-height: 20rem;
  }

  .solution-title {
    left: 0;
    position: absolute;
    text-align: center;
    padding-top: 0;
    margin: 0 auto;
    transform: translateY(0%);
  }

  .solution-info {
    margin-top: calc(var(--space-regular) * 1.5);
    height: calc(var(--container-1200) / 2);
  }

  .first-c > .solution-info > p {
    transform: translateY(15%);
  }

  .solution-img {
    height: calc(10rem + 15vw + 10vh);
    width: var(--container-1100);
    align-self: center;
    padding-top: calc(var(--space-regular) + 5rem + 2vw);
  }

  .go-indo-title {
    text-align: center;
  }

  .space-test {
    width: 100%;
    height: 5vw;
  }

  .first-mini {
    transform: translateY(10%);
  }

  .end-h2 {
    width: calc(var(--container-1100) / 2);
  }

  footer {
    height: calc(5rem + 5vw);
    padding-left: 0;
    margin-top: calc(1rem + 2vw);
  }

  .real-footer {
    justify-content: start;
    align-items: flex-start;
    margin-left: var(--space-regular);
  }

  .name p {
    text-align: left;
  }
}