.elementor-9120 .elementor-element.elementor-element-3719adb6{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-9120 .elementor-element.elementor-element-a8b95d5{z-index:1022;}/* Start custom CSS for html, class: .elementor-element-a8b95d5 */#floating-button {
  width: 55px;
  height: 55px;
  border-radius: 50%;
  background: GREEN;
  position: fixed;
  bottom: 30px;
  right: 30px;
  cursor: pointer;
  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2);
}

#container-floating {
    position: fixed;
    width: 70px;
    height: 70px;
    bottom: 16px;
    right: 18px;
    z-index: 50px;
}

#container-floating:hover {
    height: 445px;
    width: 235px;
    right:0px;
    background: #00000096;
    padding: 5px;
    border-radius: 33px 5px 3px 33px;
}

#container-floating:hover .plus {
  animation: plus-in 0.15s linear;
  animation-fill-mode: forwards;
}


.edit {
  position: absolute;
  top: 0;
  display: block;
  bottom: 0;
  left: 0;
  display: block;
  right: 0;
  padding: 0;
  opacity: 0;
  margin: auto;
  line-height: 65px;
  transform: rotateZ(-70deg);
  transition: all 0.3s;
  animation: edit-out 0.3s;

}



.plus {
  position: absolute;
  top: 0;
  display: block;
  bottom: 0;
  left: 0;
  display: block;
  right: 0;
  padding: 0;
  margin: auto;
  line-height: 650px;
  transform: rotateZ(-70deg);
  transition: all 0.3s;
  animation: edit-out 0.3s;
  
}

#container-floating:hover .edit {
  animation: edit-in 0.2s;
  animation-delay: 0.1s;
  animation-fill-mode: forwards;
}

@keyframes edit-in {
  from {
    opacity: 0;
    transform: rotateZ(-70deg);
  }
  to {
    opacity: 1;
    transform: rotateZ(0deg);
  }
}
@keyframes edit-out {
  from {
    opacity: 1;
    transform: rotateZ(0deg);
  }
  to {
    opacity: 0;
    transform: rotateZ(-70deg);
  }
}
@keyframes plus-in {
  from {
    opacity: 1;
    transform: rotateZ(0deg);
  }
  to {
    opacity: 0;
    transform: rotateZ(180deg);
  }
}
@keyframes plus-out {
  from {
    opacity: 0;
    transform: rotateZ(180deg);
  }
  to {
    opacity: 1;
    transform: rotateZ(0deg);
  }
}
.nds {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  position: fixed;
  z-index: 300;
  transform: scale(0);
  cursor: pointer;
  color:white;
  text-shadow: 4px 2px 8px #000000;
}

.wa01 {
  right: 40px;
  bottom: 200px;
  animation-delay: 0.2s;
  animation: bounce-out-nds 0.3s linear;
  animation-fill-mode: forwards;
}
.text01 {
  right: 114px;
  bottom: 100px;
}





.wa02 {

  right: 40px;
  bottom: 150px;
  animation-delay: 0.15s;
  animation: bounce-out-nds 0.15s linear;
  animation-fill-mode: forwards;
}
.text02 {
  right: 114px;
  bottom: 200px;
}



.wa03 {

  right: 40px;
  bottom: 200px;
  animation-delay: 0.1s;
  animation: bounce-out-nds 0.1s linear;
  animation-fill-mode: forwards;
}
.text03 {

  right: 70px;
  bottom: 200px;
}





.wa04 {

  right: 40px;
  bottom: 200px;
  animation-delay: 0.1s;
  animation: bounce-out-nds 0.1s linear;
  animation-fill-mode: forwards;
}
.text04 {
  right: 167px;
  bottom: 200px;
}





.wa05 {

  right: 40px;
  bottom: 300px;
  animation-delay: 0.1s;
  animation: bounce-out-nds 0.1s linear;
  animation-fill-mode: forwards;
}


.text05 {
  right: 156px;
  bottom: 290px;
}





.wa06 {

  right: 40px;
  bottom: 350px;
  animation-delay: 0.1s;
  animation: bounce-out-nds 0.1s linear;
  animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.text06 {
  right: 115px;
  bottom: 340px;
}




.wa07 {
  right: 40px;
  bottom: 400px;
  animation-delay: 0.1s;
  animation: bounce-out-nds 0.1s linear;
  animation-fill-mode: forwards;
}

.text {
  right: 113px;
  bottom: 390px;
}


@keyframes bounce-nds {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes bounce-out-nds {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0);
  }
}
#container-floating:hover .nds {
  animation: bounce-nds 0.1s linear;
  animation-fill-mode: forwards;
}

#container-floating:hover .wa01 {
  animation-delay: 0.15s;
}

#container-floating:hover .wa02 {
  animation-delay: 0.20s;
}

#container-floating:hover .wa03 {
  animation-delay: 0.25s;
}


#container-floating:hover .wa04 {
  animation-delay: 0.30s;
}

#container-floating:hover .wa05 {
  animation-delay: 0.35s;
}

#container-floating:hover .wa06 {
  animation-delay: 0.4s;
}

#container-floating:hover .wa07 {
  animation-delay: 0.45s;
}



/* ===== PATCH: hanya 2 WA + label aman ===== */

/* 1) Hover panel: kecilin tinggi/lebar karena tinggal 2 item */
#container-floating:hover {
  height: 210px;      /* dari 445px -> pas untuk 2 icon */
  width: 200px;       /* dari 235px -> lebih rapet */
  right: 18px;        /* jangan 0px biar gak nempel pinggir layar */
}

/* 2) Rapihin posisi item biar jarak enak (optional tapi recommended) */
.wa01 { bottom: 95px; }     /* sebelumnya 100px */
.text01 { bottom: 99px; }   /* sebelumnya 92px */

.wa02 { bottom: 145px; }    /* sebelumnya 150px */
.text02 { bottom: 149px; }  /* sebelumnya 140px */

/* 3) Bikin label jadi "badge" dan geser supaya gak kena icon */
#container-floating .text01,
#container-floating .text02 {
  width: auto !important;
  height: auto !important;
  padding: 6px 10px !important;
  border-radius: 12px !important;

  /* ini kunci supaya tidak ketiban icon */
  right: 95px !important;       /* sebelumnya 114px, tapi kita bikin konsisten */
  display: inline-block !important;

  /* biar backgroundnya kebaca */
  background: rgba(0,0,0,0.55) !important;

  white-space: nowrap !important;
  line-height: 1.2 !important;
}

/* 4) Pastikan tulisan tidak ikut "ngecil" atau ketiban */
#container-floating .text01 h8,
#container-floating .text02 h8 {
  font-size: 13px;
  font-weight: 600;
  display: block;
}/* End custom CSS */