/* verval 1 */
body {
  overflow-x: hidden;
}
.verval1 {
  background-color: rgb(8, 8, 8);
  padding: 13rem;
  color: white;
  gap: 2rem;
  position: relative;
  z-index: 0;
}
#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);
  height: 150vh;
  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;
}

/* .verval2 img {
 
  object-fit: cover;
  opacity: 0;
  position: absolute;
  left: 20rem;
} */

@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: 4%;
  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);
  }
}
.verval3 .verval3-card .verval3-card-img-1 {
  position: absolute;
  bottom: -8rem;
}
.verval3 .verval3-card .verval3-card-img-2 {
  position: absolute;
  bottom: 1rem;
}
.verval3 .verval3-card .verval3-card-img-3 {
  position: absolute;
  bottom: -10rem;
}
.verval3 .verval3-card .verval3-card-img-4 {
  position: absolute;
  bottom: -10rem;
}
.verval3 .verval3-card .verval3-card-img-5 {
  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;
}

/*  */