/* 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;
    }

    .menu-12,
    .menu-13 {
        position: absolute;
        top: calc(50% - 32px);
        left: calc(50% - 91px);
        width: 175px;
        height: 116px;
        object-fit: cover;
    }

    .logo-text-icon {
        position: absolute;
        top: calc(50% - 32px);
        left: calc(50% - 91px);
        width: 135px;
        height: auto;
        object-fit: cover;
        margin: 20px 0 0 23px;
    }

    .menu-12,
    .menu-13 {
        top: calc(50% - 129px);
        left: calc(50% + 27px);
        width: 54px;
        height: 60px;
    }

    .menu-13 {
        top: calc(50% - 112px);
        left: calc(50% - 20px);
        width: 42px;
        height: 47px;
    }

    .menu-9,
    .menu-10,
    .menu-8,
    .menu-6,
    .menu-7 {
        position: absolute;
        top: calc(50% - 83px);
        left: calc(50% - 50px);
        width: 55px;
        height: 63px;
        object-fit: cover;
    }

    .menu-9,
    .menu-8,
    .menu-6,
    .menu-7 {
        left: calc(50% - 0px);
    }

    .menu-8,
    .menu-6,
    .menu-7 {
        left: calc(50% + 52px);
        width: 54px;
    }

    .menu-6,
    .menu-7 {
        top: calc(50% - 31px);
        left: calc(50% + 76px);
        width: 55px;
    }

    .menu-6 {
        top: calc(50% + 19px);
        left: calc(50% + 50px);
        width: 54px;
        height: 60px;
    }

    .menu-3,
    .menu-5,
    .menu-4 {
        position: absolute;
        top: calc(50% + 68px);
        left: calc(50% + 21px);
        width: 55px;
        height: 61px;
        object-fit: cover;
    }

    .menu-3,
    .menu-4 {
        left: calc(50% - 28px);
        height: 62px;
    }

    .menu-3 {
        top: calc(50% + 67px);
        left: calc(50% - 79px);
        width: 57px;
    }

    .menu-1,
    .menu-2,
    .menu-11,
    .menu-14 {
        position: absolute;
        top: calc(50% + 19px);
        left: calc(50% - 104px);
        width: 55px;
        height: 60px;
        object-fit: cover;
    }

    .menu-1,
    .menu-11,
    .menu-14 {
        top: calc(50% - 31px);
        left: calc(50% - 131px);
        height: 63px;
    }

    .menu-11,
    .menu-14 {
        top: calc(50% - 83px);
        left: calc(50% - 104px);
    }

    .menu-14 {
        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: 135px;
        height: auto;
        margin: 20px 0 0 21px;
    }

    .menu-12,
    .menu-13 {
        position: absolute;
        top: calc(50% - 128px);
        left: calc(50% + 27px);
        width: 54px;
        height: 60px;
        object-fit: cover;
    }

    .menu-13 {
        top: calc(50% - 112px);
        left: calc(50% - 20px);
        width: 42px;
        height: 48px;
    }

    .menu-9,
    .menu-10,
    .menu-8,
    .menu-6,
    .menu-7 {
        position: absolute;
        top: calc(50% - 82px);
        left: calc(50% - 50px);
        width: 55px;
        height: 62px;
        object-fit: cover;
    }

    .menu-9,
    .menu-8,
    .menu-6,
    .menu-7 {
        left: calc(50% - 0px);
    }

    .menu-8,
    .menu-6,
    .menu-7 {
        left: calc(50% + 52px);
        width: 54px;
    }

    .menu-6,
    .menu-7 {
        top: calc(50% - 30px);
        left: calc(50% + 76px);
        width: 55px;
    }

    .menu-6 {
        top: calc(50% + 19px);
        left: calc(50% + 50px);
        width: 54px;
        height: 60px;
    }

    .menu-3,
    .menu-5,
    .menu-4 {
        position: absolute;
        top: calc(50% + 68px);
        left: calc(50% + 21px);
        width: 55px;
        height: 61px;
        object-fit: cover;
    }

    .menu-3,
    .menu-4 {
        left: calc(50% - 28px);
        height: 62px;
    }

    .menu-3 {
        top: calc(50% + 67px);
        left: calc(50% - 79px);
        width: 57px;
    }

    .menu-1,
    .menu-2,
    .menu-11,
    .menu-14 {
        position: absolute;
        top: calc(50% + 19px);
        left: calc(50% - 104px);
        width: 55px;
        height: 60px;
        object-fit: cover;
    }

    .menu-1,
    .menu-11,
    .menu-14 {
        top: calc(50% - 30px);
        left: calc(50% - 131px);
        height: 62px;
    }

    .menu-11,
    .menu-14 {
        top: calc(50% - 82px);
        left: calc(50% - 104px);
    }

    .menu-14 {
        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: 150px;
        height: auto;
        margin-left: 30px;
        margin-top: 20px;
    }

    .menu-12,
    .menu-13 {
        position: absolute;
        top: calc(50% - 138px);
        left: calc(50% + 32px);
        width: 63px;
        height: 65px;
        object-fit: cover;
    }

    .menu-13 {
        top: calc(50% - 120px);
        left: calc(50% - 23px);
        width: 49px;
        height: 51px;
    }

    .menu-9,
    .menu-10,
    .menu-8,
    .menu-6,
    .menu-7 {
        position: absolute;
        top: calc(50% - 88px);
        left: calc(50% - 58px);
        width: 64px;
        height: 67px;
        object-fit: cover;
    }

    .menu-9,
    .menu-8,
    .menu-6,
    .menu-7 {
        left: calc(50% - 0px);
    }

    .menu-8,
    .menu-6,
    .menu-7 {
        left: calc(50% + 61px);
        width: 63px;
    }

    .menu-6,
    .menu-7 {
        top: calc(50% - 32px);
        left: calc(50% + 89px);
        width: 64px;
    }

    .menu-6 {
        top: calc(50% + 21px);
        left: calc(50% + 58px);
        width: 63px;
        height: 65px;
    }

    .menu-3,
    .menu-5,
    .menu-4 {
        position: absolute;
        top: calc(50% + 74px);
        left: calc(50% + 25px);
        width: 64px;
        height: 66px;
        object-fit: cover;
    }

    .menu-3,
    .menu-4 {
        left: calc(50% - 33px);
        width: 65px;
        height: 67px;
    }

    .menu-3 {
        top: calc(50% + 73px);
        left: calc(50% - 92px);
        width: 66px;
    }

    .menu-1,
    .menu-2,
    .menu-11,
    .menu-14 {
        position: absolute;
        top: calc(50% + 21px);
        left: calc(50% - 121px);
        width: 64px;
        height: 65px;
        object-fit: cover;
    }

    .menu-1,
    .menu-11,
    .menu-14 {
        top: calc(50% - 32px);
        left: calc(50% - 153px);
        height: 67px;
    }

    .menu-11,
    .menu-14 {
        top: calc(50% - 88px);
        left: calc(50% - 121px);
    }

    .menu-14 {
        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: 290px;
        height: auto;
        margin: 30px 0 0 50px;
    }

    .menu-12,
    .menu-13 {
        position: absolute;
        top: calc(50% - 255px);
        left: calc(50% + 58px);
        width: 118px;
        height: 121px;
        object-fit: cover;
    }

    .menu-13 {
        top: calc(50% - 221px);
        left: calc(50% - 41px);
        width: 90px;
        height: 94px;
    }

    .menu-9,
    .menu-10,
    .menu-8,
    .menu-6,
    .menu-7 {
        position: absolute;
        top: calc(50% - 160px);
        left: calc(50% - 107px);
        width: 118px;
        height: 121px;
        object-fit: cover;
    }

    .menu-9,
    .menu-8,
    .menu-6,
    .menu-7 {
        left: calc(50% - 0px);
    }

    .menu-8,
    .menu-6,
    .menu-7 {
        left: calc(50% + 113px);
    }

    .menu-6,
    .menu-7 {
        top: calc(50% - 59px);
        left: calc(50% + 164px);
        width: 119px;
    }

    .menu-6 {
        top: calc(50% + 37px);
        left: calc(50% + 106px);
        height: 120px;
    }

    .menu-3,
    .menu-2,
    .menu-5,
    .menu-4 {
        position: absolute;
        top: calc(50% + 136px);
        left: calc(50% + 48px);
        width: 118px;
        height: 121px;
        object-fit: cover;
    }

    .menu-3,
    .menu-2,
    .menu-4 {
        left: calc(50% - 62px);
        width: 121px;
        height: 124px;
    }

    .menu-3,
    .menu-2 {
        top: calc(50% + 133px);
        left: calc(50% - 171px);
    }

    .menu-2 {
        top: calc(50% + 37px);
        left: calc(50% - 225px);
        width: 118px;
        height: 120px;
    }

    .menu-1,
    .menu-11,
    .menu-14 {
        position: absolute;
        top: calc(50% - 59px);
        left: calc(50% - 284px);
        width: 119px;
        height: 121px;
        object-fit: cover;
    }

    .menu-11,
    .menu-14 {
        top: calc(50% - 160px);
        left: calc(50% - 225px);
        width: 118px;
    }

    .menu-14 {
        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: 290px;
        max-width: 100%;
        height: auto;
    }

    .menu-12,
    .menu-13 {
        position: absolute;
        top: calc(50% - 255px);
        left: calc(50% + 58px);
        width: 118px;
        max-width: 100%;
        height: auto;
        object-fit: cover;
    }

    .menu-13 {
        top: calc(50% - 221px);
        left: calc(50% - 41px);
        width: 90px;
        max-width: 100%;
        height: auto;
    }

    .menu-9,
    .menu-10,
    .menu-8,
    .menu-6,
    .menu-7 {
        position: absolute;
        top: calc(50% - 160px);
        left: calc(50% - 107px);
        width: 118px;
        max-width: 100%;
        height: auto;
        object-fit: cover;
    }

    .menu-9,
    .menu-8,
    .menu-6,
    .menu-7 {
        left: calc(50% - 0px);
    }

    .menu-8,
    .menu-6,
    .menu-7 {
        left: calc(50% + 113px);
    }

    .menu-6,
    .menu-7 {
        top: calc(50% - 59px);
        left: calc(50% + 164px);
        width: 119px;
        max-width: 100%;
        height: auto;
    }

    .menu-6 {
        top: calc(50% + 37px);
        left: calc(50% + 106px);
        max-width: 100%;
        height: auto;
    }

    .menu-3,
    .menu-2,
    .menu-5,
    .menu-4 {
        position: absolute;
        top: calc(50% + 136px);
        left: calc(50% + 48px);
        width: 118px;
        max-width: 100%;
        height: auto;
        object-fit: cover;
    }

    .menu-3,
    .menu-2,
    .menu-4 {
        left: calc(50% - 62px);
        width: 121px;
        max-width: 100%;
        height: auto;
    }

    .menu-3,
    .menu-2 {
        top: calc(50% + 133px);
        left: calc(50% - 171px);
    }

    .menu-2 {
        top: calc(50% + 37px);
        left: calc(50% - 225px);
        width: 118px;
        max-width: 100%;
        height: auto;
    }

    .menu-1,
    .menu-11,
    .menu-14 {
        position: absolute;
        top: calc(50% - 59px);
        left: calc(50% - 284px);
        width: 119px;
        max-width: 100%;
        height: auto;
        object-fit: cover;
    }

    .menu-11,
    .menu-14 {
        top: calc(50% - 160px);
        left: calc(50% - 225px);
        width: 118px;
    }

    .menu-14 {
        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: 420px;
        max-width: 100%;
        height: auto;
    }

    .menu-12,
    .menu-13 {
        position: absolute;
        top: calc(50% - 340px);
        left: calc(50% + 79px);
        width: 161px;
        max-width: 100%;
        height: auto;
        object-fit: cover;
    }

    .menu-13 {
        top: calc(50% - 295px);
        left: calc(50% - 56px);
        width: 123px;
        height: 126px;
    }

    .menu-9,
    .menu-10,
    .menu-8,
    .menu-7 {
        position: absolute;
        top: calc(50% - 213px);
        left: calc(50% - 146px);
        width: 161px;
        max-width: 100%;
        height: auto;
        object-fit: cover;
    }

    .menu-9,
    .menu-8,
    .menu-7 {
        left: calc(50% - 0px);
    }

    .menu-8,
    .menu-7 {
        left: calc(50% + 154px);
    }

    .menu-7 {
        top: calc(50% - 78px);
        left: calc(50% + 224px);
    }

    .menu-3,
    .menu-5,
    .menu-4,
    .menu-6 {
        position: absolute;
        top: calc(50% + 49px);
        left: calc(50% + 145px);
        width: 161px;
        max-width: 100%;
        height: auto;
        object-fit: cover;
    }

    .menu-3,
    .menu-5,
    .menu-4 {
        top: calc(50% + 181px);
        left: calc(50% + 65px);
    }

    .menu-3,
    .menu-4 {
        left: calc(50% - 84px);
        width: 165px;
        max-width: 100%;
        height: auto;
    }

    .menu-3 {
        top: calc(50% + 177px);
        left: calc(50% - 233px);
    }

    .menu-1,
    .menu-2,
    .menu-11,
    .menu-14 {
        position: absolute;
        top: calc(50% + 49px);
        left: calc(50% - 306px);
        width: 161px;
        max-width: 100%;
        height: auto;
        object-fit: cover;
    }

    .menu-1,
    .menu-11,
    .menu-14 {
        top: calc(50% - 78px);
        left: calc(50% - 386px);
    }

    .menu-11,
    .menu-14 {
        top: calc(50% - 213px);
        left: calc(50% - 306px);
    }

    .menu-14 {
        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% */
}