body,
html {
  margin: 0;
  padding: 0;
  height: 100%;
}

.container1mtr0 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 66vh;
  width: 100%;
  position: relative;
}

.background-gambarmtr {
  height: 100%;
  width: 100%;
  background-size: cover;
  background-position: center;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

.judulmtr {
  font-family: 'Nexa-ExtraBold', sans-serif;
  color: white;
  font-size: 84px;
  margin-top: 20px;
}
.container1mtr {
  position: absolute;
  width: 32.47vh; 
  height: 57.85vh; 
  top: 75.33vh; 
  left: 42.5vh; 
}



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

.textbox1mtr {
  position: absolute;
  top: 89.33vh; 
  left: 78.5vh; 
  width: 75.65vh; 
}

.textbox1mtr h2 {
  font-size: 3.44vh; 
  margin-bottom: 1.9vh; 
  font-family: 'Nexa-ExtraBold', sans-serif;
}

.textbox1mtr p {
  font-size: 1.1vw; 
  font-family: 'NexaText', sans-serif;
}
/* 
.garismtr {
  position: absolute;
  width: 44.21vh; 
  height: 0.1vh; 
  background-color: black;
  top: 123.95vh; 
  left: 79.24vh; 
} */

.container2mtr {
  position: absolute;
  width: 32.47vh; 
  height: 57.85vh;
  top: 123.76vh; 
  right: 41vh; 
}

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

.textbox2mtr {
  position: absolute;
  top: 138.1vh; 
  right: 77vh; 
  width: 75.65vh; 
  text-align: right;
}

.textbox2mtr h2 {
  font-size: 3.44vh; 
  margin-bottom: 1.9vh; 
  font-family: 'Nexa-ExtraBold', sans-serif;
}

.textbox2mtr p {
  font-size: 1.1vw; 
  font-family: 'NexaText', sans-serif;
}
/* 
.garis2mtr {
  position: absolute;
  width: 44.21vh; 
  height: 0.1vh; 
  background-color: black;
  top: 171.35vh; 
  left: 79.24vh; 
} */

.container3mtr {
  position: absolute;
  width: 32.47vh; 
  height: 57.85vh; 
  top: 171.35vh; 
  left: 42.5vh; 
}

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

.textbox3mtr {
  position: absolute;
  top: 184.22vh; 
  left: 78.5vh; 
  width: 75.65vh; 
}

.textbox3mtr h2 {
  font-size: 3.44vh; 
  margin-bottom: 1.9vh;
  font-family: 'Nexa-ExtraBold', sans-serif;
}

.textbox3mtr p {
  font-size: 1.1vw; 
  font-family: 'NexaText', sans-serif;
}

/* .garis3mtr {
  position: absolute;
  width: 44.21vh; 
  height: 0.1vh; 
  background-color: black;
  top: 218.2vh; 
  left: 79.24vh;  
} */

.container4mtr {
  position: absolute;
  width: 32.47vh; 
  height: 57.85vh; 
  top: 218.2vh; 
  right: 41vh; 
}

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

.textbox4mtr {
  position: absolute;
  top: 233.43vh; 
  right: 77vh; 
  width: 75.65vh; 
  text-align: right;
}

.textbox4mtr h2 {
  font-size: 3.44vh; 
  margin-bottom: 1.9vh; 
  font-family: 'Nexa-ExtraBold', sans-serif;
}

.textbox4mtr p {
  font-size: 1.1vw; 
  font-family: 'NexaText', sans-serif;
}
/* 
.garis4mtr {
  position: absolute;
  width: 22vw; 
  height: 0.1vh; 
  background-color: black;
  top: 267.81vh; 
  left: 101.45vh; 
  transform: translate(-50%, -50%); 
} */

.container5mtr {
  position: absolute;
  width: 32.47vh;
  height: 57.85vh;
  top: 267.81vh; 
  left: 42.5vh; 
}

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

.textbox5mtr {
  position: absolute;
  top: 279.9vh; 
  left: 78.5vh; 
  width: 75.65vh; 
}

.textbox5mtr h2 {
  font-size: 3.44vh; 
  margin-bottom: 1.9vh; 
  font-family: 'Nexa-ExtraBold', sans-serif;
}

.textbox5mtr p {
  font-size: 1.1vw; 
  font-family: 'NexaText', sans-serif;
}

/* .garis5mtr {
  position: absolute;
  width: 463px;
  height: 1px; 
  background-color: black; 
  top: 2183px;
  left: 753px;
} */

.wrappermtr {
  height: 265%;
  width: 100%;
  overflow: hidden;
  

}

.responsive-div {
  width: 100%;
  max-width: 600px; /* Lebar maksimum div */
  margin: 0 auto; /* Pusatkan div di tengah */
  padding: 20px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  box-sizing: border-box; /* Perhitungan lebar termasuk border */
  font-size: 16px; /* Ukuran font default */
  line-height: 1.5; /* Spasi antar baris */
}
@media (max-width: 575px) {
  .container1mtr0 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vw;
    width: 100vw;
    position: relative;
}

.judulmtr {
  font-family: 'Nexa-ExtraBold', sans-serif;
  color: white;
  font-size: 13vw;
  margin-top: 20px;
}
  .wrappermtr {
    height: 420%;
    width: 100%;
    overflow: hidden;
}

.container1mtr {
  position: absolute;
  width: 70%;
  height: 50%;
  top: 55.33vh;
  left: 18vw;
}

  .container1mtr img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .textbox1mtr {
    position: absolute;
    top: 107.33vh;
    left: 10vw;
    width: 80vw;
}
  
  .textbox1mtr h2 {
    font-size: 3.44vh; 
    margin-bottom: 1.9vh; 
    font-family: 'Nexa-ExtraBold', sans-serif;
  }
  
  .textbox1mtr p {
    font-size: 1.53vh; 
    font-family: 'NexaText', sans-serif;
  }

  .container2mtr {
    position: absolute;
    width: 70%;
    height: 50%;
    top: 140vh;
    right: 15vw;
}

.textbox2mtr {
  position: absolute;
  top: 193.1vh;
  right: 10vw;
  width: 80vw;
  text-align: right;
}
.textbox2mtr p {
  font-size: 1.53vh; 
  font-family: 'NexaText', sans-serif;
}
.container3mtr {
  position: absolute;
  width: 70%;
  height: 50%;
  top: 221.35vh;
  left: 15vw;
}

.textbox3mtr {
  position: absolute;
  top: 274.22vh;
  left: 10vw;
  width: 80vw;
}

.textbox3mtr p {
  font-size: 1.53vh; 
  font-family: 'NexaText', sans-serif;
}

.container4mtr {
  position: absolute;
  width: 70%;
  height: 50%;
  top: 305.2vh;
  right: 15vw;
}

.textbox4mtr {
  position: absolute;
  top: 357.43vh;
  right: 10vw;
  width: 80vw;
  text-align: right;
}

.textbox4mtr p {
  font-size: 1.53vh; 
  font-family: 'NexaText', sans-serif;
}
  
.container5mtr {
  position: absolute;
  width: 70%;
  height: 50%;
  top: 394.81vh;
  left: 15vw;
}

.textbox5mtr {
  position: absolute;
  top: 445.9vh;
  left: 10vw;
  width: 80vw;
}

.textbox5mtr p {
  font-size: 1.53vh; 
  font-family: 'NexaText', sans-serif;
}
}
@media (min-width: 576px) and (max-width: 1024px) {
  .wrappermtr {
    height: 250%;
    width: 100%;
    overflow: hidden;
}

  .container1mtr {
    position: absolute;
    width: 35%;
    top: 75.33vh;
    left: 0;
}

  .container1mtr img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .textbox1mtr {
    position: absolute;
    top: 88.33vh;
    left: 40vw;
    width: 58vw;
}
  
  .textbox1mtr h2 {
    font-size: 3.44vh; 
    margin-bottom: 1.9vh; 
    font-family: 'Nexa-ExtraBold', sans-serif;
  }
  
  .textbox1mtr p {
    font-size: 1.53vh; 
    font-family: 'NexaText', sans-serif;
  }

  .container2mtr {
    position: absolute;
    width: 35%;
    top: 123.76vh; 
    right: 0; 
  }

  .textbox2mtr {
    position: absolute;
    top: 138.1vh;
    right: 40vw;
    width: 58vw;
    text-align: right;
}
.textbox2mtr p {
  font-size: 1.53vh;
  font-family: 'NexaText', sans-serif;
}

  .container3mtr {
    position: absolute;
    width: 35%; 
    top: 171.35vh; 
    left: 0; 
  }

  .textbox3mtr {
    position: absolute;
    top: 184.22vh;
    left: 40vw;
    width: 58vw;
}
.textbox3mtr p {
  font-size: 1.53vh;
  font-family: 'NexaText', sans-serif;
}

  .container4mtr {
    position: absolute;
    width: 35%; 
    top: 218.2vh; 
    right: 0; 
  }

  .textbox4mtr {
    position: absolute;
    top: 233.43vh; 
    right: 40vw; 
    width: 58vw; 
    text-align: right;
  }
  .textbox4mtr p {
    font-size: 1.53vh;
    font-family: 'NexaText', sans-serif;
}
  
  .container5mtr {
    position: absolute;
    width: 35%;
    top: 267.81vh; 
    left: 0; 
  }

  .textbox5mtr {
    position: absolute;
    top: 279.9vh; 
    left: 40vw; 
    width: 58vw; 
  }
  .textbox5mtr p {
    font-size: 1.53vh;
    font-family: 'NexaText', sans-serif;
}
}