#divImg {
  position: relative;
}

#divImg2 {
  position: absolute;
  left: 50%;
}

#divImg video {
  margin-left: -50%;
  margin-top: -30%;
}

#history-3 {
  background-color: #002050;
}

h2 span {
  color: #008deb;
}

#vm-card {
  background-color: white;
  border-radius: 16px;
}

@media (max-width: 1024px) {
}

@media (max-width: 992px) {
  #history-1 h2 {
    font-size: 20px !important;
  }

  #history-1 p {
    font-size: 16px !important;
  }

  .divimg-atas-1 {
    margin-top: 74px !important;
  }

  .divimg-atas-2 {
    position: absolute !important;
    left: -10% !important;
    right: 1% !important;
  }

  #divImg video {
    margin-left: 10%;
    margin-top: -30%;
  }

  .divimg-atas-1 video {
    width: 90% !important;
  }

  #history-3 {
    padding-top: 130px !important;
  }

  #history-3 h2 {
    font-size: 20px !important;
  }

  #history-3 span {
    font-size: 20px !important;
  }

  #history-3 p {
    font-size: 16px !important;
  }

  #history-3 li {
    font-size: 16px !important;
  }

  @media (max-width: 912px) {
    #values .content .box .word span {
      font-size: 32px;
    }
  }
}

@media (max-width: 376px) {
  #history-4-mobile .container .content .truck-box .type img {
    width: 315px !important;
  }
}

/*--------------------------------------------------------------
# values Section
--------------------------------------------------------------*/

#values {
  width: 100%;
  height: 80vh;
  max-height: 700px;
  display: flex;
  align-items: center;
  position: relative;
  padding: 0;
  display: flex;
  justify-content: center;
  z-index: 0;

  padding-bottom: 0;
}

#values .container {
  height: 100%;
  width: 70%;
  min-width: 375px;
  display: flex;
  justify-content: end;
}

#values .detail {
  width: 100%;
  padding: 25px 54px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: linear-gradient(78.93deg, rgba(18, 28, 69, 0.8) 12.75%, rgba(231, 110, 27, 0.4) 100%);
}

@keyframes fade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
#values img {
  height: 100%;
  width: 100vw;
  animation: fade 0.5s ease-in-out;
}
#values .image {
  display: none;
}

#values .image-active {
  display: block;
}

#values .content {
  position: absolute;
  bottom: 0;
  width: 100vw;
  height: 120%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px 0;
  /* gap: 32px; */
}

#values .content .title span {
  color: white;
}

/* #values .content .title p{
    font-size: 26px !important;
} */

#values .content .box {
  display: flex;
  justify-content: center;
  gap: 2%;
  width: 100%;
}

#values .content .box .part {
  display: flex;
}

#values .content .box .word {
  border: 1px solid white;
  height: 10vw;
  width: 10vw;
  max-height: 120px;
  max-width: 120px;
  background: none;
}

#values .content .box .word span {
  font-size: 80px;
  font-weight: 700;
  color: white;
  margin: 0;
}
@media (max-width: 575px) {
  #values .content .box .word span {
    font-size: 20px;
  }

  #history-3 {
    padding-bottom: 160px !important;
  }

  #values {
    width: 95% !important;
    height: 45vh !important;
  }

  #history-4-desktop {
    display: none !important;
  }
}

@media (min-width: 576px) {
  #history-4-mobile {
    display: none !important;
  }
}

#values .content .box .word-active {
  background: #121c45;
  border: 0px;
}
#values .content .box .word-active span {
  color: #ff5e14;
}

#values .content .box .word:hover {
  background: #121c45;
  border: 0px;
}

#values .content .box .word:hover span {
  color: #ff5e14;
}

/*Carousel truck */

#history-4-mobile .content {
  position: relative;
}

#history-4-mobile .button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  /* width: calc(100% - 22px); */
  display: flex;
  justify-content: space-between;
  padding: 0 14px;
}

#history-4-mobile button {
  padding: 24px;
  width: 64px;
  height: 64px;
  border-radius: 100%;
  border: 0px;
  filter: drop-shadow(0px 10px 20px rgba(0, 0, 0, 0.1));
}

#history-4-mobile .content .box {
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  align-items: start;
  /* background: rgba(67, 67, 67, 0.07); */
}

#history-4-mobile .content .box .type {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  height: 100%;
  padding: 10px;
  font-family: 'Manrope',sans-serif;
  font-size: 20px ;
}
#history-4-mobile .content .box .tahun {
  font-weight: 700;
}
#history-4-mobile .content .box .desc {
  font-weight: 500;
}
#history-4-mobile .content .box .type.active {
  background: white;
  border-top: 4px solid #002d71;
}

#history-4-mobile .content .box .type .truck-img {
  width: 300px;
  height: 200px;
}