/* Ukuran layar mobile phone maximal resolusi 3600px  x 640px*/
@media (min-width: 360px) and (min-height: 640px){
  .iceblue-bg-icon {
    position: absolute;
    top: calc(50% - 195px);
    left: calc(50% - 180px);
    width: 360px;
    height: 389px;
    object-fit: cover;
  }
  .logo-text-icon,
  .realtime-antrian-icon,
  .tpi-icon {
    position: absolute;
    top: calc(50% - 32px);
    left: calc(50% - 91px);
    width: 175px;
    height: 116px;
    object-fit: cover;
  }
  .realtime-antrian-icon,
  .tpi-icon {
    top: calc(50% - 129px);
    left: calc(50% + 27px);
    width: 54px;
    height: 60px;
  }
  .tpi-icon {
    top: calc(50% - 112px);
    left: calc(50% - 20px);
    width: 42px;
    height: 47px;
  }
  .lapbul-icon,
  .lapor-data-icon,
  .live-chat-icon,
  .whatsapp-icon,
  .youtube-icon {
    position: absolute;
    top: calc(50% - 83px);
    left: calc(50% - 50px);
    width: 55px;
    height: 63px;
    object-fit: cover;
  }
  .lapbul-icon,
  .live-chat-icon,
  .whatsapp-icon,
  .youtube-icon {
    left: calc(50% - 0px);
  }
  .live-chat-icon,
  .whatsapp-icon,
  .youtube-icon {
    left: calc(50% + 52px);
    width: 54px;
  }
  .whatsapp-icon,
  .youtube-icon {
    top: calc(50% - 31px);
    left: calc(50% + 76px);
    width: 55px;
  }
  .whatsapp-icon {
    top: calc(50% + 19px);
    left: calc(50% + 50px);
    width: 54px;
    height: 60px;
  }
  .facebook-icon,
  .twitter-icon,
  .website-icon {
    position: absolute;
    top: calc(50% + 68px);
    left: calc(50% + 21px);
    width: 55px;
    height: 61px;
    object-fit: cover;
  }
  .facebook-icon,
  .website-icon {
    left: calc(50% - 28px);
    height: 62px;
  }
  .facebook-icon {
    top: calc(50% + 67px);
    left: calc(50% - 79px);
    width: 57px;
  }
  .email-icon,
  .instagram-icon,
  .lapor-icon,
  .paspor-icon {
    position: absolute;
    top: calc(50% + 19px);
    left: calc(50% - 104px);
    width: 55px;
    height: 60px;
    object-fit: cover;
  }
  .email-icon,
  .lapor-icon,
  .paspor-icon {
    top: calc(50% - 31px);
    left: calc(50% - 131px);
    height: 63px;
  }
  .lapor-icon,
  .paspor-icon {
    top: calc(50% - 83px);
    left: calc(50% - 104px);
  }
  .paspor-icon {
    top: calc(50% - 129px);
    left: calc(50% - 77px);
    height: 60px;
  }
  .mobile-phone-small {
    position: relative;
    background-color: var(--color-white);
    width: 100%;
    height: 640px;
    overflow: hidden;
  }  
}
/* Ukuran layar mobile phone maximal resolusi 360px x 800px */
@media (min-width: 360px)and (min-height: 800px){
  .iceblue-bg-icon,
  .logo-text-icon {
    position: absolute;
    top: calc(50% - 194px);
    left: calc(50% - 180px);
    width: 360px;
    height: 388px;
    object-fit: cover;
  }
  .logo-text-icon {
    top: calc(50% - 31px);
    left: calc(50% - 91px);
    width: 175px;
    height: 115px;
  }
  .realtime-antrian-icon,
  .tpi-icon {
    position: absolute;
    top: calc(50% - 128px);
    left: calc(50% + 27px);
    width: 54px;
    height: 60px;
    object-fit: cover;
  }
  .tpi-icon {
    top: calc(50% - 112px);
    left: calc(50% - 20px);
    width: 42px;
    height: 48px;
  }
  .lapbul-icon,
  .lapor-data-icon,
  .live-chat-icon,
  .whatsapp-icon,
  .youtube-icon {
    position: absolute;
    top: calc(50% - 82px);
    left: calc(50% - 50px);
    width: 55px;
    height: 62px;
    object-fit: cover;
  }
  .lapbul-icon,
  .live-chat-icon,
  .whatsapp-icon,
  .youtube-icon {
    left: calc(50% - 0px);
  }
  .live-chat-icon,
  .whatsapp-icon,
  .youtube-icon {
    left: calc(50% + 52px);
    width: 54px;
  }
  .whatsapp-icon,
  .youtube-icon {
    top: calc(50% - 30px);
    left: calc(50% + 76px);
    width: 55px;
  }
  .whatsapp-icon {
    top: calc(50% + 19px);
    left: calc(50% + 50px);
    width: 54px;
    height: 60px;
  }
  .facebook-icon,
  .twitter-icon,
  .website-icon {
    position: absolute;
    top: calc(50% + 68px);
    left: calc(50% + 21px);
    width: 55px;
    height: 61px;
    object-fit: cover;
  }
  .facebook-icon,
  .website-icon {
    left: calc(50% - 28px);
    height: 62px;
  }
  .facebook-icon {
    top: calc(50% + 67px);
    left: calc(50% - 79px);
    width: 57px;
  }
  .email-icon,
  .instagram-icon,
  .lapor-icon,
  .paspor-icon {
    position: absolute;
    top: calc(50% + 19px);
    left: calc(50% - 104px);
    width: 55px;
    height: 60px;
    object-fit: cover;
  }
  .email-icon,
  .lapor-icon,
  .paspor-icon {
    top: calc(50% - 30px);
    left: calc(50% - 131px);
    height: 62px;
  }
  .lapor-icon,
  .paspor-icon {
    top: calc(50% - 82px);
    left: calc(50% - 104px);
  }
  .paspor-icon {
    top: calc(50% - 128px);
    left: calc(50% - 77px);
    height: 60px;
  }
  .mobile-phone-large {
    position: relative;
    background-color: var(--color-white);
    width: 100%;
    height: 800px;
    overflow: hidden;
  }
}
/* Ukuran layar mobile phone maximal resolusi 420px */
@media (min-width: 420px) { 
  .iceblue-bg-icon,
  .logo-text-icon {
    position: absolute;
    top: calc(50% - 209px);
    left: calc(50% - 210px);
    width: 420px;
    height: 419px;
    object-fit: cover;
  }
  .logo-text-icon {
    top: calc(50% - 33px);
    left: calc(50% - 106px);
    width: 204px;
    height: 124px;
  }
  .realtime-antrian-icon,
  .tpi-icon {
    position: absolute;
    top: calc(50% - 138px);
    left: calc(50% + 32px);
    width: 63px;
    height: 65px;
    object-fit: cover;
  }
  .tpi-icon {
    top: calc(50% - 120px);
    left: calc(50% - 23px);
    width: 49px;
    height: 51px;
  }
  .lapbul-icon,
  .lapor-data-icon,
  .live-chat-icon,
  .whatsapp-icon,
  .youtube-icon {
    position: absolute;
    top: calc(50% - 88px);
    left: calc(50% - 58px);
    width: 64px;
    height: 67px;
    object-fit: cover;
  }
  .lapbul-icon,
  .live-chat-icon,
  .whatsapp-icon,
  .youtube-icon {
    left: calc(50% - 0px);
  }
  .live-chat-icon,
  .whatsapp-icon,
  .youtube-icon {
    left: calc(50% + 61px);
    width: 63px;
  }
  .whatsapp-icon,
  .youtube-icon {
    top: calc(50% - 32px);
    left: calc(50% + 89px);
    width: 64px;
  }
  .whatsapp-icon {
    top: calc(50% + 21px);
    left: calc(50% + 58px);
    width: 63px;
    height: 65px;
  }
  .facebook-icon,
  .twitter-icon,
  .website-icon {
    position: absolute;
    top: calc(50% + 74px);
    left: calc(50% + 25px);
    width: 64px;
    height: 66px;
    object-fit: cover;
  }
  .facebook-icon,
  .website-icon {
    left: calc(50% - 33px);
    width: 65px;
    height: 67px;
  }
  .facebook-icon {
    top: calc(50% + 73px);
    left: calc(50% - 92px);
    width: 66px;
  }
  .email-icon,
  .instagram-icon,
  .lapor-icon,
  .paspor-icon {
    position: absolute;
    top: calc(50% + 21px);
    left: calc(50% - 121px);
    width: 64px;
    height: 65px;
    object-fit: cover;
  }
  .email-icon,
  .lapor-icon,
  .paspor-icon {
    top: calc(50% - 32px);
    left: calc(50% - 153px);
    height: 67px;
  }
  .lapor-icon,
  .paspor-icon {
    top: calc(50% - 88px);
    left: calc(50% - 121px);
  }
  .paspor-icon {
    top: calc(50% - 138px);
    left: calc(50% - 90px);
    height: 65px;
  }
  .mobile-phone {
    position: relative;
    background-color: var(--color-white);
    width: 100%;
    height: 854px;
  }

}
  /* Ukuran layar tablet max resolusi 960px */
@media (min-width: 960px) { 
  .iceblue-bg-icon,
  .logo-text-icon {
    position: absolute;
    top: calc(50% - 384px);
    left: calc(50% - 390px);
    width: 779px;
    height: 768px;
    object-fit: cover;
  }
  .logo-text-icon {
    top: calc(50% - 61px);
    left: calc(50% - 196px);
    width: 376px;
    height: 227px;
  }
  .realtime-antrian-icon,
  .tpi-icon {
    position: absolute;
    top: calc(50% - 255px);
    left: calc(50% + 58px);
    width: 118px;
    height: 121px;
    object-fit: cover;
  }
  .tpi-icon {
    top: calc(50% - 221px);
    left: calc(50% - 41px);
    width: 90px;
    height: 94px;
  }
  .lapbul-icon,
  .lapor-data-icon,
  .live-chat-icon,
  .whatsapp-icon,
  .youtube-icon {
    position: absolute;
    top: calc(50% - 160px);
    left: calc(50% - 107px);
    width: 118px;
    height: 121px;
    object-fit: cover;
  }
  .lapbul-icon,
  .live-chat-icon,
  .whatsapp-icon,
  .youtube-icon {
    left: calc(50% - 0px);
  }
  .live-chat-icon,
  .whatsapp-icon,
  .youtube-icon {
    left: calc(50% + 113px);
  }
  .whatsapp-icon,
  .youtube-icon {
    top: calc(50% - 59px);
    left: calc(50% + 164px);
    width: 119px;
  }
  .whatsapp-icon {
    top: calc(50% + 37px);
    left: calc(50% + 106px);
    height: 120px;
  }
  .facebook-icon,
  .instagram-icon,
  .twitter-icon,
  .website-icon {
    position: absolute;
    top: calc(50% + 136px);
    left: calc(50% + 48px);
    width: 118px;
    height: 121px;
    object-fit: cover;
  }
  .facebook-icon,
  .instagram-icon,
  .website-icon {
    left: calc(50% - 62px);
    width: 121px;
    height: 124px;
  }
  .facebook-icon,
  .instagram-icon {
    top: calc(50% + 133px);
    left: calc(50% - 171px);
  }
  .instagram-icon {
    top: calc(50% + 37px);
    left: calc(50% - 225px);
    width: 118px;
    height: 120px;
  }
  .email-icon,
  .lapor-icon,
  .paspor-icon {
    position: absolute;
    top: calc(50% - 59px);
    left: calc(50% - 284px);
    width: 119px;
    height: 121px;
    object-fit: cover;
  }
  .lapor-icon,
  .paspor-icon {
    top: calc(50% - 160px);
    left: calc(50% - 225px);
    width: 118px;
  }
  .paspor-icon {
    top: calc(50% - 255px);
    left: calc(50% - 168px);
  }
  .tab {
    position: relative;
    background-color: var(--color-white);
    width: 100%;
    height: 772px;
    overflow: hidden;
  }

}

  /* Ukuran layar dekstop max resolusi 1200px */
@media (min-width: 1200px) { 
  .iceblue-bg-icon,
  .logo-text-icon {
    position: absolute;
    top: calc(50% - 384px);
    left: calc(50% - 390px);
    width: 779px;
    max-width: 100%;
    height: auto;
    object-fit: cover;
  }
  .logo-text-icon {
    top: calc(50% - 61px);
    left: calc(50% - 196px);
    width: 376px;
    max-width: 100%;
    height: 227px;
  }
  .realtime-antrian-icon,
  .tpi-icon {
    position: absolute;
    top: calc(50% - 255px);
    left: calc(50% + 58px);
    width: 118px;
    max-width: 100%;
    height: auto;
    object-fit: cover;
  }
  .tpi-icon {
    top: calc(50% - 221px);
    left: calc(50% - 41px);
    width: 90px;
    max-width: 100%;
    height: auto;
  }
  .lapbul-icon,
  .lapor-data-icon,
  .live-chat-icon,
  .whatsapp-icon,
  .youtube-icon {
    position: absolute;
    top: calc(50% - 160px);
    left: calc(50% - 107px);
    width: 118px;
    max-width: 100%;
    height: auto;
    object-fit: cover;
  }
  .lapbul-icon,
  .live-chat-icon,
  .whatsapp-icon,
  .youtube-icon {
    left: calc(50% - 0px);
  }
  .live-chat-icon,
  .whatsapp-icon,
  .youtube-icon {
    left: calc(50% + 113px);
  }
  .whatsapp-icon,
  .youtube-icon {
    top: calc(50% - 59px);
    left: calc(50% + 164px);
    width: 119px;
    max-width: 100%;
    height: auto;
  }
  .whatsapp-icon {
    top: calc(50% + 37px);
    left: calc(50% + 106px);
    max-width: 100%;
    height: auto;
  }
  .facebook-icon,
  .instagram-icon,
  .twitter-icon,
  .website-icon {
    position: absolute;
    top: calc(50% + 136px);
    left: calc(50% + 48px);
    width: 118px;
    max-width: 100%;
    height: auto;
    object-fit: cover;
  }
  .facebook-icon,
  .instagram-icon,
  .website-icon {
    left: calc(50% - 62px);
    width: 121px;
    max-width: 100%;
    height: auto;
  }
  .facebook-icon,
  .instagram-icon {
    top: calc(50% + 133px);
    left: calc(50% - 171px);
  }
  .instagram-icon {
    top: calc(50% + 37px);
    left: calc(50% - 225px);
    width: 118px;
    max-width: 100%;
    height: auto;
  }
  .email-icon,
  .lapor-icon,
  .paspor-icon {
    position: absolute;
    top: calc(50% - 59px);
    left: calc(50% - 284px);
    width: 119px;
    max-width: 100%;
    height: auto;
    object-fit: cover;
  }
  .lapor-icon,
  .paspor-icon {
    top: calc(50% - 160px);
    left: calc(50% - 225px);
    width: 118px;
  }
  .paspor-icon {
    top: calc(50% - 255px);
    left: calc(50% - 168px);
  }
  .laptop {
    position: relative;
    background-color: var(--color-white);
    width: 100%;
    max-width: 100%;
    height: auto;
    overflow: hidden;
  }

}

  /* Ukuran layar besar max resolusi 1440px */
@media (min-width: 1440px) { 
  .iceblue-bg-icon,
  .logo-text-icon {
    position: absolute;
    top: calc(50% - 512px);
    left: calc(50% - 531px);
    width: 1061px;
    max-width: 100%;
    height: auto;
    object-fit: cover;
  }
  .logo-text-icon {
    top: calc(50% - 81px);
    left: calc(50% - 267px);
    width: 513px;
    max-width: 100%;
    height: 303px;
  }
  .realtime-antrian-icon,
  .tpi-icon {
    position: absolute;
    top: calc(50% - 340px);
    left: calc(50% + 79px);
    width: 161px;
    max-width: 100%;
    height: auto;
    object-fit: cover;
  }
  .tpi-icon {
    top: calc(50% - 295px);
    left: calc(50% - 56px);
    width: 123px;
    height: 126px;
  }
  .lapbul-icon,
  .lapor-data-icon,
  .live-chat-icon,
  .youtube-icon {
    position: absolute;
    top: calc(50% - 213px);
    left: calc(50% - 146px);
    width: 161px;
    max-width: 100%;
    height: auto;
    object-fit: cover;
  }
  .lapbul-icon,
  .live-chat-icon,
  .youtube-icon {
    left: calc(50% - 0px);
  }
  .live-chat-icon,
  .youtube-icon {
    left: calc(50% + 154px);
  }
  .youtube-icon {
    top: calc(50% - 78px);
    left: calc(50% + 224px);
  }
  .facebook-icon,
  .twitter-icon,
  .website-icon,
  .whatsapp-icon {
    position: absolute;
    top: calc(50% + 49px);
    left: calc(50% + 145px);
    width: 161px;
    max-width: 100%;
    height: auto;
    object-fit: cover;
  }
  .facebook-icon,
  .twitter-icon,
  .website-icon {
    top: calc(50% + 181px);
    left: calc(50% + 65px);
  }
  .facebook-icon,
  .website-icon {
    left: calc(50% - 84px);
    width: 165px;
    max-width: 100%;
    height: auto;
  }
  .facebook-icon {
    top: calc(50% + 177px);
    left: calc(50% - 233px);
  }
  .email-icon,
  .instagram-icon,
  .lapor-icon,
  .paspor-icon {
    position: absolute;
    top: calc(50% + 49px);
    left: calc(50% - 306px);
    width: 161px;
    max-width: 100%;
    height: auto;
    object-fit: cover;
  }
  .email-icon,
  .lapor-icon,
  .paspor-icon {
    top: calc(50% - 78px);
    left: calc(50% - 386px);
  }
  .lapor-icon,
  .paspor-icon {
    top: calc(50% - 213px);
    left: calc(50% - 306px);
  }
  .paspor-icon {
    top: calc(50% - 340px);
    left: calc(50% - 229px);
  }
  .desktop {
    position: relative;
    background-color: var(--color-white);
    width: 100%;
    max-width: 100%;
    height: auto;
  }

}

.zoom-in {
  transition: transform 0.3s ease-in-out; /* tambahkan efek transisi */
}

.zoom-in:hover {
  transform: scale(1.1); /* ubah ukuran gambar menjadi 110% */
}