/* verval 1 */
body {
  overflow-x: hidden;
}
.verval1 {
  background-color: rgb(8, 8, 8);
  padding: 13rem;
  color: white;
  gap: 2rem;
  position: relative;
  z-index: 0;
}

header .home {
  color: rgb(150, 229, 71);
}
header .home:hover {
  color: rgb(150, 229, 71);
}
#judul-utama {
  font-size: 2.5rem;
}

#paraf {
  font-size: 20px;
  position: relative;
  right: 1.3rem;
  font-weight: 100;
}
#our-service {
  outline: none;
  border: 2px solid white;
  background-color: transparent;
  color: white;
  border-radius: 20px;
  padding: 5px;
  width: 25%;
}

.deskripsi1 {
  font-size: 20px;
  font-weight: 100;
  font-weight: 100;
}
.verval1 .siku {
  position: relative;
  padding-left: 3.5rem;
  padding-bottom: 4rem;
}

.verval1 .siku::before,
.verval1 .siku::after {
  content: "";
  position: absolute;
  background-color: white;
}

.verval1 .siku::before {
  width: 2px;
  height: 5.5rem;
  left: -5rem;
  bottom: 0;
}

.verval1 .siku::after {
  width: 5.5rem;
  height: 2px;
  left: -5rem;
  bottom: 0;
}

.verval1 .siku-2 {
  position: relative;
}
.verval1 .siku-2::before,
.verval1 .siku-2::after {
  content: "";
  position: absolute;
  background-color: white;
}

.verval1 .siku-2::before {
  width: 2px;
  height: 5.5rem;
  right: -6rem;
  top: -4rem;
}

.verval1 .siku-2::after {
  width: 5.5rem;
  height: 2px;
  right: -6rem;
  top: -4rem;
}

.verval1 .container .who-we-are {
  color: rgb(255, 181, 44);
  font-size: 3rem;
}

.img1 {
  width: 30rem;
  height: 27rem;
  /* overflow: hidden; */
  background-image: url("../img/image.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-attachment: fixed;
}

#who-we-are {
  padding: 5rem;
}

@media screen and (min-width: 1024px) {
  .verval1 {
    padding: 10rem;
  }

  .img1 {
    width: 26rem;
    height: 23rem;
    background-size: 45%;
  }

  #who-we-are {
    padding: 4rem;
  }
}

/* verval 2 */

.verval2 {
  background-image: url("../img/Desktop-2_cleanup.png");
  background-color: rgb(23, 22, 22);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  color: white;
  position: relative;
  background-attachment: fixed;
}

.h2-sticky {
  position: sticky;
  top: 10rem;
  padding: 10rem;
}

.we-ofer {
  font-weight: 100;
  font-size: 48px;
}

.we-ofer2 {
  font-weight: 100;
  font-size: 48px;
}

.verval2 .card-container {
  display: flex;
  align-items: center;
  justify-content: center;
  position: sticky;
  top: -2rem;
  rotate: 14deg;
  margin-bottom: 20rem;
}

.verval2 .my-img1 {
  rotate: -15deg;
  position: relative;
  top: 0.5rem;
  left: 20rem;
}
.verval2 .my-img3 {
  rotate: 15deg;
  position: relative;
  top: 1.9rem;
  right: 1rem;
}
.verval2 .my-img2 {
  position: relative;
  top: -2rem;
  right: 1rem;
}

@keyframes smooth-bounce {
  0% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-20px);
  }
  100% {
    transform: translateY(0);
  }
}

.smooth-bounce {
  animation: smooth-bounce 1s ease-in-out;
  transition: transform 1s ease-in-out;
}

.verval2 .centered {
  animation: slide-in 1s ease-in-out forwards;
}
@keyframes slide-in {
  0% {
    transform: translateY(-7%);
  }

  100% {
    transform: translate(-20rem, 7.7rem) rotate(-14deg);
  }
}

/* pc */
@media screen and (min-width: 2560px) and (min-height: 1600px) {
  .h2-sticky {
    top: 1rem;
    margin-top: 5%;
  }
  .verval2 .card-container {
    top: 20%;
  }
}

@media screen and (min-width: 1920px) and (min-height: 1080px) {
  .h2-sticky {
    top: 5rem;
    margin-top: 20%;
  }

  .verval2 .card-container {
    bottom: 60%;
    position: sticky;
    margin-bottom: 7rem;
  }
}

@media screen and (min-width: 768px) {
  .verval2 .card-container {
    bottom: 10%;
    padding: 4rem;
  }
  .verval2 .my-img1 {
    top: 7.9rem;
    left: 20rem;
  }
  .verval2 .my-img3 {
    top: 8rem;
    right: 1rem;
  }
  .verval2 .my-img2 {
    top: 4rem;
    right: 1rem;
  }

  .verval2 img {
    height: 27rem;
    left: 20rem;
  }
  .h2-sticky {
    margin-top: 45%;
    top: 20rem;
    padding: 3rem;
  }

  .h2-sticky h2 {
    position: relative;
  }
}

/* verval 3 */
.verval3 {
  height: 300vh;
  display: flex;
  background-color: rgb(7, 7, 7);
  position: relative;
  flex-direction: column;

  padding-bottom: 20rem;
  padding-left: 5rem;
  padding-right: 5rem;
}
.verval3 .our {
  position: sticky;
  top: 40rem;
  overflow: hidden;
  margin-top: 25%;
  width: 70rem;
}

.verval3 .emb {
  font-size: 4rem;
  bottom: 3rem;
  position: relative;
  padding-left: 0.1rem;
}

.verval3 p {
  font-size: 4rem;
  text-align: center;
  color: rgb(49, 57, 60);
  position: relative;
}

.verval3 .our-values {
  font-weight: 500;
  transition: color 1s;
  width: 64rem;
}

.emb span {
  transition: color 0.3s ease;
}

.verval3 .bumi-icon p {
  font-size: 4rem;
  text-align: center;
}

.verval3 .our .bumiku {
  position: relative;
  top: 51%;
  left: 10%;
}

#my-text {
  top: 34%;
  right: 2%;
}

#sectiontigapart3 {
  position: relative;
  right: 10.5%;
  bottom: 20%;
}

.verval3 .our .bumiku .icon {
  /* border: 2px solid rgba(43, 47, 49, 0.915);
  border-radius: 10rem; */
  position: relative;
  transition: 0.5s;
  top: 4px;
  left: 0.3rem;
  /* width: 7rem; */
  transition: background-color 0.3s ease;
}

.verval3 .our .bumiku .icon img {
  width: 2rem;
  object-fit: cover;
  color: rgba(43, 47, 49, 0.915);
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
}

.hidden {
  opacity: 0;
}

.bumi-2 {
  position: absolute;
  right: 0.5px;
  bottom: 0.3px;
  display: none;
  border: 2px solid white;
  border-radius: 100%;
}

.verval3 .verval3-card {
  position: sticky;
  top: 22%;
  padding: 25%;
  width: 100%;
  bottom: 7rem;
}

.verval3 .verval3-card .img {
  object-fit: cover;
  width: 90%;
  opacity: 0;
  transform: translateY(40%);
  transition: opacity 1s ease-in-out, transform 1s ease-in-out;
}

@keyframes card-verval-animation {
  0% {
    transform: translateY(40%);
  }
  70% {
    transform: translateY(0);
  }
  90% {
    transform: translateY(4px);
  }
}

.card-text-img {
  width: 20rem;
  position: relative;
  top: 17rem;
  left: 2rem;
}
.card-text-img p {
  text-align: left;
}

.card-text-des {
  padding: 0.5rem;
  font-weight: 100;
  border-left: 1px solid rgb(143, 106, 41);
}

.collab {
  width: 30rem;
  top: 15rem;
}

.verval3 .verval3-card .verval3-card-img-1 {
  background-image: url("/img/img-card-sec3/value\ 11\ \(1\).png");
  background-repeat: no-repeat;
  background-size: contain;
  width: 90%;
  height: 100%;
  position: absolute;
  bottom: -2rem;
}
.verval3 .verval3-card .verval3-card-img-2 {
  background-image: url("/img/img-card-sec3/value\ 12.png");
  background-repeat: no-repeat;
  background-size: contain;
  width: 90%;
  height: 100%;
  position: absolute;
  bottom: 1rem;
}
.verval3 .verval3-card .verval3-card-img-3 {
  background-image: url("/img/img-card-sec3/value\ 13.png");
  background-repeat: no-repeat;
  background-size: contain;
  width: 90%;
  height: 100%;
  position: absolute;
  bottom: -10rem;
}
.verval3 .verval3-card .verval3-card-img-4 {
  background-image: url("/img/img-card-sec3/value\ 14.png");
  background-repeat: no-repeat;
  background-size: contain;
  width: 90%;
  height: 100%;
  position: absolute;
  bottom: -10rem;
}
.verval3 .verval3-card .verval3-card-img-5 {
  background-image: url("/img/img-card-sec3/value\ 15.png");
  background-repeat: no-repeat;
  background-size: contain;
  width: 90%;
  height: 100%;
  position: absolute;
  bottom: -15rem;
}

/* pc */
@media screen and (min-width: 2560px) and (min-height: 1600px) {
  .verval3 .verval3-card {
    top: 5%;
  }
  .verval3 .our {
    margin-left: 25%;
  }
}

@media screen and (min-width: 1920px) and (min-height: 1080px) {
  .verval3 .our {
    margin-left: 20%;
    margin-top: 50%;
  }
}

/* laptop */
@media screen and (min-width: 768px) {
  .verval3 .our {
    top: 15%;
    margin-top: 10%;
  }

  .verval3 .our .bumiku {
    top: 11.4rem;
    left: 2rem;
  }
  #my-text {
    top: -10%;
    left: 1.5rem;
  }
  #my-text #sectiontigapart2 {
    position: relative;
    top: 6rem;
  }

  #sectiontigapart3 {
    right: 30%;
    top: 16%;
  }

  #sectiontigapart4 {
    left: 10%;
    top: -17%;
  }

  .verval3 .verval3-card .verval3-card-img-1 {
    bottom: 9%;
  }
  .verval3 .verval3-card .verval3-card-img-2 {
    bottom: 3%;
  }
  .verval3 .verval3-card .verval3-card-img-3 {
    bottom: -3%;
  }
  .verval3 .verval3-card .verval3-card-img-4 {
    bottom: -4%;
  }
  .verval3 .verval3-card .verval3-card-img-5 {
    bottom: -5%;
  }
}

/* verval 4 */

.verval4 {
  background-image: url("../img/bg-daun-sec3.png");
  background-repeat: no-repeat;
  height: 100vh;
  background-position: center;
  background-size: cover;
  overflow: hidden;
}

.verval4 i {
  color: white;
  font-size: 40px;
  background-color: rgba(255, 255, 255, 0.102);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 100%;
}

.verval4 .verval4-card {
  width: 100%;
  height: 110%;
  background-image: url("../img/daunku-2.webp");
  background-repeat: no-repeat;
  background-size: 150%;
  background-position: center;
  opacity: 0;
  transition: opacity 1s;
  overflow: hidden;
}

@keyframes zoomOutBackground {
  from {
    background-size: 140%; /* Mulai dengan background yang diperbesar */
  }
  to {
    background-size: 100%; /* Akhiri dengan background pada ukuran normal */
  }
}

.verval4 .verval4-card.visible {
  opacity: 1;
  animation: zoomOutBackground 0.7s forwards;
}

.verval4 .verval4-card .name-card {
  background-color: rgba(255, 255, 255, 0.039);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 4rem;
  border-radius: 4rem;
  width: 35rem;
  height: 18rem;
  border: 2px solid rgba(255, 255, 255, 0.176);
  z-index: 1;
  transform: 3s;
}
#testimonialText {
  position: relative;
  bottom: 2rem;
}

.verval4 .verval4-card .name-card .testimoni {
  color: rgb(245, 186, 24);
  font-weight: 500;
  position: relative;
  text-align: center;
  bottom: 9rem;
  font-size: 1rem;
}

.verval4 .verval4-card .name-card img {
  object-fit: cover;
  width: 6rem;
  border-radius: 50%;
  border: 2px solid rgb(182, 180, 180);
  position: relative;
  bottom: 5rem;
}
.verval4 .verval4-card .name-card .user {
  color: rgb(245, 186, 24);
}

/* verval 5 */

.verval5 {
  background-image: url("../img/bambu-bg-fix.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  height: 130vh;
  padding-left: 9rem;
  padding-right: 9rem;
}

.verval5 .container .card-img {
  border-radius: 20px;
}

.verval5 .container .card-img img {
  object-fit: cover;
  height: 10rem;
  border-radius: 10px;
}
.verval5 #carouselExampleControls {
  background-color: rgba(255, 255, 255, 0.165);
  padding: 2rem;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1.5px solid rgba(255, 255, 255, 0.17);
  border-left: 1.5px solid rgba(255, 255, 255, 0.17);
  border-right: 1.5px solid rgba(255, 255, 255, 0.17);
  border-radius: 2rem;
  height: 40rem;
}
.verval5 #carouselExampleControls .nice-to-now {
  width: 40rem;
}
.verval5 #carouselExampleControls .nice-to-now h3 {
  color: rgba(131, 214, 53, 0.869);
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 30px;
  padding: 10px;
  width: 12rem;
  text-align: center;
  font-size: 25px;
  position: relative;
  left: 1.5rem;
  bottom: 3rem;
}
.verval5 #carouselExampleControls .nice-to-now a {
  text-decoration: none;
  color: white;
  position: relative;
  right: 1rem;
  bottom: 2rem;
}
.verval5 .container .card-img #user {
  background-color: rgba(128, 153, 164, 0.063);
  border-radius: 7px;
}

.verval5 #carouselExampleControls .carousel-inner {
  position: relative;
  bottom: 2rem;
}

#scroll-hand {
  display: none;
}

/* mobile version */

@media screen and (max-width: 600px) {
  .bx-mouse {
    position: relative;
    top: 1rem;
  }

  #scroll-hand {
    display: block;
    position: relative;
    top: 0.5rem;
  }
  #bx-mouse {
    display: none;
  }
  .verval1 {
    padding: 1rem;
    padding-top: 5rem;
  }
  #who-we-are {
    padding: 2rem;
  }

  .img1 {
    width: 80%;
  }
  .verval1 .siku .siku-2 {
    flex-direction: column;
  }

  .verval1 .siku {
    padding-left: 0.2rem;
  }

  .verval1 .siku::before {
    height: 3.5rem;
    left: 0.1rem;
    bottom: 4.5rem;
  }

  .verval1 .siku::after {
    width: 3.5rem;
    left: 0.1rem;
    bottom: 4.5rem;
  }

  .verval1 .siku-2::before {
    height: 3.5rem;
    right: 0.5rem;
    top: -2.5rem;
  }

  .verval1 .siku-2::after {
    width: 3.5rem;
    right: 0.5rem;
    top: -2.5rem;
  }

  /* verval 2 */

  .verval2 {
    height: auto;
  }
  .h2-sticky {
    padding: 2rem;
    top: 17rem;
    margin-top: 15rem;
  }

  .we-ofer,
  .we-ofer2 {
    font-size: 35px;
  }

  #img-container {
    flex-direction: column;
    top: 2rem;
    gap: 1px;
    margin-bottom: 1rem;
  }
  #img-container img {
    width: 24rem;
  }

  .verval2 .my-img1 {
    rotate: -14deg;
    position: relative;
    top: 0.5rem;
    left: -6.5rem;
  }
  .verval2 .my-img3 {
    rotate: -14deg;
    position: relative;
    top: -6.5rem;
    left: 5rem;
  }
  .verval2 .my-img2 {
    position: relative;
    top: -3rem;
    right: 0.8rem;
    rotate: -14deg;
  }

  @keyframes slide-in {
    0% {
      transform: translateY(0);
    }

    100% {
      transform: rotate(0deg);
    }
  }

  /* verval 3 */
  .verval3 {
    padding-left: 0;
    padding-right: 2%;
    height: 100vh;
  }

  .verval3 .our {
    top: 1rem;
    margin-top: 2rem;
    width: 24.5rem;
    padding: 4%;
    height: 35rem;
  }

  #my-text {
    top: 10%;
    width: 100%;
  }

  #sectiontigapart1,
  #sectiontigapart2,
  #sectiontigapart3,
  #sectiontigapart4 {
    font-size: 2.5rem;
  }

  #sectiontigapart1 {
    top: -8.5rem;
    left: -0.5rem;
  }

  #sectiontigapart2 {
    left: 3.8rem;
  }
  #sectiontigapart3 {
    right: 0.1rem;
    margin-top: -0.9rem;
  }

  #sectiontigapart4 {
    right: 22.4rem;
    margin-top: -0.9rem;
  }

  .verval3 .our .bumiku .icon {
    top: -8.7rem;
    left: 0.1rem;
  }
  .verval3 .our .bumiku .icon img {
    width: 10%;
  }

  .bumi-2 {
    right: 16rem;
  }

  .essence {
    position: relative;
    right: 3.8rem;
  }

  #my-text p {
    top: -20px;
  }
  .verval3 .verval3-card {
    top: 56%;
  }

  .verval3 .verval3-card .verval3-card-img-1 {
    left: 6%;
    background-size: cover;
    height: 38rem;
    border-radius: 4.1rem;
  }
  .verval3 .verval3-card .verval3-card-img-2 {
    left: 6%;
    bottom: -4rem;
    background-size: cover;
    height: 38rem;
    border-radius: 4.1rem;
  }
  .verval3 .verval3-card .verval3-card-img-3 {
    left: 6%;
    bottom: -52%;
    background-size: cover;
    height: 38rem;
    border-radius: 4.1rem;
  }

  .verval3 .verval3-card .verval3-card-img-4 {
    left: 6%;
    bottom: -50%;
    background-size: cover;
    height: 38rem;
    border-radius: 4.1rem;
  }
  .verval3 .verval3-card .verval3-card-img-5 {
    left: 6%;
    bottom: -50%;
    background-size: cover;
    height: 38rem;
    border-radius: 4.1rem;
  }

  .card-title-img {
    left: 2rem;
  }

  .card-text-des {
    top: 10rem;
    right: 0.5rem;
  }
  .excellence {
    left: 4rem;
  }

  .excellence-p {
    width: 19rem;
    top: 9rem;
  }

  .collab {
    left: -0.7rem;
  }

  .collab-p {
    width: 19rem;
    top: 6rem;
    left: 2rem;
  }

  .envi {
    left: 4.5rem;
  }

  .envi-p {
    width: 19rem;
    left: 2.5rem;
    top: 10rem;
  }

  /* verval 4 */
  .verval4 {
    height: 100vh;
  }

  .verval4 i {
    font-size: 35px;
  }

  .verval4 .verval4-card {
    width: 96%;
    height: 100%;
  }

  .verval4 .verval4-card .name-card {
    padding: 1rem;
    height: 23rem;
    background-size: cover;
  }

  @keyframes zoomOutBackground {
    from {
      background-size: 570%;
    }
    to {
      background-size: 490%;
    }
  }

  /* verval 5 */

  .verval5 {
    height: 100vh;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .verval5 .container .card-img {
    width: 100%;
    max-width: 20rem; /* Batasi ukuran card untuk mobile */
  }

  .verval5 #carouselExampleControls .nice-to-now h3 {
    padding: 10px;
    width: 9rem;
    font-size: 20px;
    left: -1rem;
    bottom: 1.2rem;
  }
  .verval5 #carouselExampleControls .nice-to-now a {
    left: 1rem;
  }
  .verval5 .container .card-img img {
    object-fit: cover;
    height: 10rem;
    border-radius: 10px;
  }
  .verval5 #carouselExampleControls {
    padding: 1.5rem;
    height: 34rem;
  }

  .card {
    flex: 0 0 100%;
  }

  .card-text-p {
    position: relative;
    left: 2rem;
  }
}