*,
html {
    padding: 0;
    margin: 0;
    /* background: black; */
    /* max-height: 100vh; */
    overflow-y: auto;
    overflow-x: hidden;
}


.zoom-in {
    transform: translate(-250px, 10%) scale(2.5);
    /* Zoom in 150% */


    /* translate: 0px 0px 0px 200px; */
    transform-origin: bottom;
}

.fade-in {
    opacity: 0;

}

.fade-out {
    opacity: 1;

}

@keyframes fade-in {
    0% {
        background: transparent;
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.zoom-out {
    transform: scale(0.5);
    /* Zoom out to 50% */
}

body {
    overflow: hidden;
    background: black;
    transition: 2s ease-in-out all;
}

@media screen and (min-width:600px) {



    /* Navbar */


    nav div ul {
        width: 100%;
        position: fixed;
        z-index: 1;
        background: rgba(0, 0, 0, 0.729);
        height: 9vh;
        display: flex;
        color: gainsboro;
        justify-content: center;
        align-items: center;
        border-radius: 0px 0px 100px 100px;

    }

    .li-navbar-kiri {
        width: 50%;
        display: flex;
        align-items: center;
        overflow: hidden;
        justify-content: start;
        /* background: red; */
        height: inherit;
        /* padding-left: '20px'; */
        /* background: aliceblue; */
    }

    #logo-pt-navbar {
        width: 10%;
        margin-left: 40px;

        /* background: red; */
    }

    .logo_pt_nobg {
        width: 70px;
        margin-left: 3%;
        /* mix-blend-mode: invert(100%); */
        height: 70px;
        /* object-fit: cover; */
        /* background: red; */
        background-image: url('/img/landingpage/logoPT.png');
        /* display: none; */
        /* background: none; */
        display: flex;
        background-position: center;
        background-size: 200%;
        /* background: rebeccapurple; */
        border-radius: 50%;
        filter: invert(1);
    }

    .li-navbar-kiri h1 {
        /* padding: 10px; */
        /* background: blue; */
        /* padding: 5px 10px; */
        border-bottom: 1px solid tomato;
        /* margin-left: 5%; */
    }

    .li-navbar-kanan {
        width: 50%;
        overflow: hidden;
        padding: 0px 20px;
        display: flex;
        gap: 10px;
        justify-content: space-around;
        /* background: red; */
        height: inherit;
        align-items: center;
        /* background: aliceblue; */
    }


    #logo-privatechat {
        filter: invert(50%);
    }

    .action_li-navbar-kanan {
        /* background: red; */
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 10px;


    }


    /* end navbar */

    html {
        scrollbar-width: thin;
        scrollbar-color: #0c4471 #000000;
        /* thumb | track */

        animation: load 2s ease-in-out both;
    }

    @keyframes load {
        0% {
            background: #000428;
            background-color: #000428;
            /* width: 10px; */
            opacity: 85%;
        }

        100% {
            width: 100%;
            opacity: 1;
            background: transparent;
        }
    }

    /* Untuk Chrome, Edge, dan Safari */
    html::-webkit-scrollbar {
        width: 10px;
    }

    html::-webkit-scrollbar-track {
        background: #000000;
        /* hitam */
    }

    html::-webkit-scrollbar-thumb {
        background: #0b4575;
        /* biru gelap */
        border-radius: 10px;
        box-shadow: inset 0 0 5px #000;
    }

    html::-webkit-scrollbar-thumb:hover {
        background: #1a8ddf;
        /* biru terang saat hover */
    }


    /* Kontent */
    .super_kontainer_content {
        width: 100%;
        height: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        overflow-x: hidden;
    }

    .kontainer-kontent {
        width: 100%;
        height: 100vh;
        overflow: hidden;
        display: flex;
        position: relative;
        z-index: 0;

        /* background: black; */
        justify-content: center;
        background-color: rgb(0, 0, 0);
        transition: 2s ease-in-out all;


        /* display: none; */
    }

    .background-image-kontainer-kontent,
    #background-image-pt-kontent1 {
        position: absolute;
        z-index: -2;
        /* width: 100%; */
        top: 0;
        display: flex;
        display: none;
        flex: 0 1 100%;
        height: auto;
        /* rotate: 20deg; */
        background-color: rgb(0, 0, 0);
        animation: change_pict 3s ease-in-out alternate both;
        transition: 10s ease-in-out all;

        filter: grayscale(100%);
    }

    #background-image-pt-kontent1 {
        z-index: -5;
    }


    @keyframes change_pict {
        0% {
            /* transform: scale(125%); */
            /* rotate: -30deg; */
            filter: drop-shadow(8px 8px 10px rgb(255, 255, 255));
            /* height: 90%; */
            opacity: 0;
            /* transform: rotate(0deg); */
            transition: 2s ease-in-out all;
            transform: scale(108%);
        }

        50% {

            /* transform: scale(200%); */
        }

        100% {
            opacity: 1;
            /* height: 150%; */
            /* rotate: 0deg; */
            /* transform: rotate(30deg); */
            /* backdrop-filter: grayscale(100%); */
            filter: grayscale(0%);
            transition: 5s ease-in-out all;

            transform: scale(108%);
            filter: drop-shadow(0px 0px 0px rgb(7, 7, 7));

        }
    }

    .kontent1 {
        width: 40%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: end;
        overflow: hidden;
        /* background-color: antiquewhite; */
    }

    .deskripsiKontent1 {
        width: 100%;
        /* padding: 10px 50px; */
        height: 50%;
        overflow: hidden;
        background: rgba(0, 0, 0, 0.266);
        border-radius: 20px;
        backdrop-filter: blur(5px);

    }

    .deskripsiKontent1 ul {
        width: 100%;
        display: flex;
        padding-left: 10px;
        /* background: red; */
        /* background: red; */

        /* height: auto; */
        align-items: center;
        overflow: hidden;
    }

    .kontainer-slider-page {
        max-height: 30%;
        height: 100%;

    }

    /* transform-origin: top left; Setel titik asal zoom di pojok kiri atas */
    .number-page-kontent1 {
        color: gainsboro;
        border-radius: 10px;
        margin-right: 20px;
        overflow: hidden;
        display: flex;
        justify-content: start;
        align-items: start;
        /* border-radius: 20px; */
        height: inherit;
    }

    #isi-number-page-kontent1 {
        font-size: 55px;
        border-radius: 20px;
        display: flex;
        align-items: start;
        justify-content: start;

        transition: 2s ease-in-out all;
        flex-direction: column;

        /* animation: animation-isi-number 2s ease-in-out both; */

    }

    #isi-number-page-kontent1 li {
        position: relative;

        top: 0px;
        transition: 2s ease-in-out all;
        /* background: red; */
    }


    .animation-isi-number-page-kontent1 {
        /* display: none; */
        /* transform: translate(200px); */
        transform: translateY(80%);
        /* transform: translateY(30deg); */
    }

    @keyframes animation-isi-number {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    .deskripsi-kontent1 {
        color: gainsboro;
        width: 100%;
        display: flex;
        /* justify-content: center; */
        /* background: red; */
        padding: 10px;
        text-align: justify;
    }

    .isi-deskripsi-kontent1 {
        width: 80%;
        padding-left: 20px;
    }

    .paket-kontent1 {
        width: 100%;
        display: flex;
        color: gainsboro;

        overflow: hidden;
    }

    .paket-kontent1 ul {
        width: 100%;

        overflow: hidden;
    }


    .paket-kontent1 ul li {
        margin: 0px 10px;
        /* border-bottom: 1px solid gainsboro; */
    }

    .sub-paket-kontent1 {
        overflow: hidden;
        border-bottom: none;
        /* border-bottom: 1px solid gainsboro; */
    }

    .isi-object-paket-kontent1 {
        transition: 2s ease-in-out all;
        font-size: 20px;
    }

    .free-paket-kontent1,
    .bronze-paket-kontent1,
    .silver-paket-kontent1,
    .gold-paket-kontent1 {
        border-bottom: 1px solid gainsboro;

        overflow: hidden;
    }

    .checkout-now-kontent1 {
        height: inherit;
        width: 100%;
        display: flex;
        /* justify-content: center; */
        /* background: red; */
    }

    #read-product {
        opacity: 55%;
    }

    .checkout-now-kontent1 div {
        width: 80%;
        /* background: red; */
        display: flex;
        align-items: center;
        justify-content: space-around;
        height: 50%;
        padding-left: 10px;
        /* background: blue; */


    }

    .checkout-now-kontent1 div button {
        padding: 5px 10px;
        border-radius: 10px;

        display: flex;
    }


    .judul-section-kontent1 {
        color: gainsboro;
        font-size: 25px;

        overflow-y: hidden;
    }

    #slider-title-product-kontent1 {
        width: 100%;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;

        justify-content: end;
        /* background-color: red;    */

        /* background-color: #ddd; */
        top: 240px;
        transition: 2s ease-in-out all;
    }

    #li-slider-title-product-kontent1 {
        width: 100%;

        display: flex;
        flex-direction: column;
        justify-content: start;
    }

    #company_name {
        color: rgb(180, 184, 193);
        margin-bottom: 2%;
        margin-top: 2%;
        padding-left: 30px;
    }

    .kontent2 {
        width: 10%;
        height: 100%;
        display: flex;
        justify-content: center;
        flex-direction: row;
        align-items: end;
        /* background-color: rgb(33, 31, 27); */
    }

    .kontent2 .number-page {
        /* background: aliceblue; */
        height: 120px;
        width: 75%;
        justify-content: space-around;
        align-items: center;
        display: flex;
        justify-content: start;
        overflow-x: scroll;
        scroll-behavior: smooth;
        scrollbar-width: none;
        scrollbar-color: blue;
        scroll-snap-stop: always;
        cursor: pointer;
    }

    .kontent2 .number-page h1 {
        /* width: 50px; */
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50%;
        height: 50px;
        gap: 10px;
        margin: 4px;
        padding: 5px 30px;
        overflow-x: hidden;
        color: gainsboro;
        background: rgba(43, 43, 44, 0.474);
    }

    .kontent3 {
        width: 50%;
        height: 100%;
        display: flex;
        justify-content: end;
        flex-direction: column;

    }

    .swipe_left_kontent3 {
        height: inherit;
        display: flex;
        width: auto;
        z-index: 2;
        opacity: 50%;

        align-items: center;
        position: absolute;
        transition: 0.5s ease-in-out all;
        padding: 2px;

    }

    .swipe_left_kontent3:hover,
    .swipe_right_kontent3:hover {
        opacity: 100%;
        fill: gainsboro;
        cursor: pointer;

    }

    #svg_swipe_left_kontent3 {
        fill: gainsboro;
        transition: 0.1s ease-in-out all;
    }

    #svg_swipe_left_kontent3:hover {
        fill: red;
    }



    .swipe_right_kontent3 {
        opacity: 50%;
        height: inherit;
        display: flex;
        width: auto;
        z-index: 2;
        padding: 2px;
        transition: 0.5s ease-in-out all;
        right: 0;
        align-items: center;
        position: absolute;

    }

    .kontainer-card-kontent3 {
        width: 100%;
        height: 50%;
        display: flex;
        justify-content: left;
        align-items: center;
        /* background: red; */
        border-radius: 50px;
        gap: 10px;
        overflow-y: hidden;
        scrollbar-width: none;
        scrollbar-color: transparent;
        overflow-x: scroll;
        scroll-snap-type: mandatory;

        scroll-behavior: smooth;
        transition: 2s ease-in-out all;
    }

    .card {
        transition: 2s ease-in-out all;
        /* width 500px; */
        height: 350px;
        border: 1px solid transparent;
        box-shadow: 2px 5px 20px 2px gainsboro;
        border-radius: 8px;
        cursor: pointer;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        background-color: #3232325e;

        overflow: hidden;
        padding: 0px 90px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        opacity: 65%;
    }

    #card-dlc {


        background-image: url('/img/landingpage/logoPT.png');
        background-position: center;
        background-size: cover;
        background-color: black;

        /* filter: grayscale(100%) brightness(50%); */
        background-repeat: no-repeat;
        transition: 0.5s ease-in-out all;
        backdrop-filter: invert(1);
    }

    #card-dlc:hover {
        opacity: 1;
        backdrop-filter: invert(1);
        border: 1px solid aquamarine;
    }

    #card-wablast {
        background: url('/img/landingpage/wablast.png');
        background-position: center;
        background-size: cover;

        filter: grayscale(100%) brightness(50%);
        background-repeat: no-repeat;
        transition: 0.5s ease-in-out all;
    }

    #card-wablast:hover {
        opacity: 1;
        filter: grayscale(0%);
        border: 1px solid aquamarine;
    }

    #card-privatechat {
        background: url('/img/landingpage/privatechat.png');
        background-position: center;
        background-size: cover;

        filter: grayscale(100%) brightness(50%);
        background-repeat: no-repeat;
        transition: 0.5s ease-in-out all;
    }

    #card-privatechat:hover {
        opacity: 1;
        filter: grayscale(0%) brightness(100%);
        border: 1px solid aquamarine;
    }

    #card-soma {
        background: url('/img/landingpage/soma.png');
        background-position: center;
        background-size: cover;

        filter: grayscale(100%) brightness(50%);
        background-repeat: no-repeat;
        transition: 0.5s ease-in-out all;
    }

    #card-soma:hover {
        opacity: 1;
        filter: grayscale(0%) brightness(100%);
        border: 1px solid aquamarine;
    }

    #card-webdev {
        background: url('/img/landingpage/webdev.png');
        background-position: center;
        background-size: cover;

        filter: grayscale(100%) brightness(50%);
        background-repeat: no-repeat;
        transition: 0.5s ease-in-out all;
    }

    #card-webdev:hover {
        opacity: 1;
        filter: grayscale(0%) brightness(100%);
        border: 1px solid aquamarine;
    }

    .card h1 {
        /* position: absolute; */
        height: inherit;
        text-align: center;
        display: flex;
        margin-bottom: 10px;
        /* background: red; */
        color: gainsboro;
        align-items: end;
        justify-content: center;
        /* padding: 6px; */
        /* display: flex; */
        /* width: 100%; */
        overflow-x: visible;
    }

    /* END KONTENT */






    /* KONTNET 2 */
    .kontainer-kontent2 {
        height: 100vh;

        width: 100%;
        overflow: hidden;
        position: relative;
        z-index: 0;
        display: flex;
        background: linear-gradient(to top right, #000000 40%, #003366 90%, rgba(0, 191, 255, 0.6) 110%);

        /* color: red; */
    }

    .content_kontainer-kontent2_left {
        width: 50%;

        height: 100%;
        display: flex;
        overflow: hidden;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .tittle_content_kontainer-kontent2_left {
        width: 100%;
        overflow: hidden;
        text-align: center;
        color: #4A90E2;
        font-size: 2rem;
        font-weight: bold;
        text-shadow: 0px 0px 10px rgba(74, 144, 226, 0.8);
        letter-spacing: 1.5px;
        transition: 2s ease-in-out all;

        opacity: 1;
        transform: translateX(0px);
        margin-bottom: 15px;
    }

    .tittle_content_kontainer-kontent2_left::after {
        content: ' ';
        position: absolute;
        top: 0px;
        /* bisa disesuaikan tergantung ukuran font */
        right: 0;
        /* atur jarak dari teks */
        width: 10px;
        height: 10px;
        background-color: red;
        border-radius: 50%;
        box-shadow: 0 0 5px red;
        animation: blink 1s infinite;
    }

    .paragraf_content_kontainer-kontent2_left {
        width: 100%;
        text-align: justify;
        color: gainsboro;
        font-size: 1rem;
        line-height: 1.8;
        overflow: hidden;
        letter-spacing: 0.5px;
        padding: 10px 15px;
        transition: 2s ease-in-out all;
        border-radius: 8px;
    }


    .action_content_kontainer-kontent2_left {
        width: 100%;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        overflow: hidden;
        gap: 10px;
        flex-direction: row;
    }

    .action_content_kontainer-kontent2_left button {

        background: none;
        outline: none;
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
        border-bottom: 2px solid #004e92;
        /* Lebih tegas */
        border-radius: 10px;
        padding: 12px 24px;
        color: #004e92;
        font-size: 16px;
        font-weight: bold;
        text-transform: uppercase;
        text-shadow: 0px 0px 8px #004e92;
        transition: all 0.3s ease-in-out;
        cursor: pointer;
        box-shadow: 0px 0px 10px rgba(0, 78, 146, 0.5);
    }

    .action_content_kontainer-kontent2_left button:hover {
        background: #004e92;
        color: white;
        box-shadow: 0px 0px 15px rgba(0, 78, 146, 1);
        border-color: #0088cc;
        text-shadow: 0px 0px 10px white;
    }

    .card_content_kontainer-kontent2_left {
        width: 70%;
        height: 70%;
        display: flex;
        gap: 20px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border-radius: 20px;
        background: rgba(34, 34, 34, 0.1);
        /* Warna transparan */
        backdrop-filter: blur(10px);
        /* Efek blur */
        -webkit-backdrop-filter: blur(10px);
        /* Untuk kompatibilitas Safari */
        border-radius: 10px;
        /* Sudut melengkung */
        /* border: 1px solid rgba(255, 255, 255, 0.2); */
        /* Border transparan */
        overflow: hidden;
        padding: 20px;
    }

    .content_kontainer-kontent2_right {
        width: 50%;
        height: 100%;
        /* background: red; */
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #animation_photo_content_kontainer-kontent2_right {
        border-radius: 50%;
        animation: floating 5s ease-in-out infinite;

        filter: drop-shadow(100px 60px 20px rgba(0, 0, 0, 0.829));
    }

    @keyframes floating {
        0% {
            filter: drop-shadow(100px 60px 20px rgba(0, 0, 0, 0.829));
            transform: translateY(10px);
        }

        50% {
            filter: drop-shadow(100px 140px 20px rgba(0, 0, 0, 0.829));
            transform: translateY(-20px);
        }

        100% {
            filter: drop-shadow(100px 60px 20px rgba(0, 0, 0, 0.829));
            transform: translateY(10px);
        }
    }

    /* kontent2 */

    /* kontent3 */
    .kontainer-kontent3 {
        height: auto;
        width: 100%;
        overflow: hidden;
        position: relative;
        z-index: 0;
        display: flex;
        display: flex;
        flex-direction: column;
        justify-content: start;
        align-items: center;
        background: linear-gradient(to bottom right, #000000 60%, #003366 150%, rgba(0, 191, 255, 0.6) 100%);

        /* color: red; */
    }

    .content_kontainer-kontent3_top {
        width: 60%;
        height: 20vh;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;

    }

    .item_content_kontainer-kontent3_top h1 {

        text-shadow: 0px 0px 10px rgba(74, 144, 226, 0.8);
        color: #4A90E2;
        transition: 2s ease-in-out all;
        transform: translateY(0);
    }



    .content_kontainer-kontent3_bottom {
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;

        justify-content: start;
        align-items: center;
    }

    .container_card_content_kontainer-kontent3_bottom {
        width: 80%;
        gap: 20px;
        display: flex;
        background: #040017;
        border-radius: 20px;
        scrollbar-width: none;
        height: 40vh;
        min-height: 40vh;
        padding: 2%;
        transition: 2s ease-in-out all;
        overflow-x: auto;
        align-items: start;

        justify-content: space-around;

    }

    .paragraf_content_kontainer-kontent3_bottom {
        width: 100%;
        height: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .item_card_content_kontainer-kontent3_bottom {
        min-width: 300px;
        height: 300px;
        border-radius: 20px;
        background: #000000;
        transition: 2s ease-in-out all;
        overflow: hidden;

    }

    .asset_wablast_slidder {
        object-fit: cover;
    }

    /* kontent3 */

    /* kontent4 */
    .kontainer-kontent4 {
        height: 100vh;
        width: 100%;
        overflow: hidden;
        display: flex;
        flex-direction: row;
        background: linear-gradient(to top right, #000000 60%, #003366 150%, rgba(0, 191, 255, 0.6) 100%);
        /* background: white; */

    }

    .content_kontainer-kontent4_left {
        width: 30%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        /* background: blue; */
        height: 100%;
    }

    .content_kontainer-kontent4_center {
        width: 40%;
        /* background: gainsboro; */
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
    }

    .content_kontainer-kontent4_right {
        flex-direction: column;
        display: flex;
        width: 30%;

        /* background: red; */
        height: 100%;
        justify-content: space-around;
        align-items: center;

    }

    .item_content_kontainer-kontent4_left {
        width: 90%;
        height: 90%;
        /* Lebih tegas */



        backdrop-filter: blur(20px);
        filter: drop-shadow(8px 8px 10px rgb(10, 27, 49));
        font-size: 16px;
        font-weight: bold;
        text-transform: uppercase;
        text-shadow: 0px 0px 8px #114b7e;
        transition: all 0.3s ease-in-out;
        cursor: pointer;
        background: rgba(42, 42, 42, 0.375);
        color: #004e92;
        box-shadow: 0px 0px 10px rgba(58, 58, 58, 0.5);
        border-radius: 20px;

        /* background: red; */

        transition: 2s ease-in-out all;


    }

    .tittle_product {
        width: 100%;
        text-align: center;
        color: #4A90E2;
        /* font-size: 2rem; */
        font-weight: bold;
        text-shadow: 0px 0px 10px rgba(74, 144, 226, 0.8);
        letter-spacing: 1.5px;
        transition: 2s ease-in-out all;
        padding: 10px;
        opacity: 1;
        transform: translateX(0px);
        margin-bottom: 15px;
    }

    .description_product {
        color: #00BFFF;
        /* Neon blue */
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        font-size: 0.8rem;
        scrollbar-width: thin;
        line-height: 1.8;
        /* text-shadow: 0 0 5px #00BFFF, 0 0 10px #00BFFF; */
        /* padding: 20px; */
        padding: 10px;
        /* background-color: #0a0a0a; */
        /* Optional: dark background */
        border-radius: 8px;
        width: 100%;
        max-width: 480px;
        margin: auto;
    }

    .description_product h3 {
        color: #FFFFFF;
        /* text-shadow: 0 0 5px #fff; */
        font-size: 1.3rem;
        margin-top: 1rem;
        margin-bottom: 0.5rem;
    }

    .description_product .highlight {
        font-weight: bold;
        color: #00FFEF;
        text-shadow: 0 0 3px #00FFEF;
    }

    .description_product .icon {
        margin-right: 8px;
    }


    /* PHONE CENTER */
    .item_content_kontainer-kontent4_center {}

    .phone {
        width: 260px;
        height: 520px;
        background-color: #3f3f3f5d;
        border-radius: 40px;

        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        border: 3px solid #262424;
        animation: float 3s ease-in-out infinite;
        box-shadow: 0px 10px 20px rgba(51, 51, 51, 0.3),
            0px 15px 30px rgba(0, 0, 0, 0.4),
            inset 0px 5px 10px rgba(255, 255, 255, 0.1);
        transition: 2s ease-in-out all;
        overflow: hidden;

    }

    .screen {
        width: 90%;
        height: 75%;
        background: linear-gradient(to bottom, #4a90e2, #ffffff);
        margin-top: 40px;
        border-radius: 20px;
        box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.2);
        overflow: hidden;
        /* object-fit: cover; */
        display: flex;

    }

    .camera {
        width: 10px;
        height: 10px;
        background: tomato;
        border-radius: 50%;
        position: absolute;
        top: 10px;
        left: 50%;
        transform: translateX(-50%);
        animation: blink 1s ease-in-out infinite;
    }

    .speaker {
        width: 50px;
        height: 5px;
        background: black;
        border-radius: 2px;
        position: absolute;
        top: 25px;
        left: 50%;
        transform: translateX(-50%);
    }

    .side-buttons {
        position: absolute;
        right: -5px;
        top: 100px;
        width: 5px;
        height: 40px;
        background: #777;
        border-radius: 5px;
    }

    .side-buttons::after {
        content: "";
        position: absolute;
        top: 50px;
        width: 5px;
        height: 20px;
        background: #777;
        border-radius: 5px;
    }

    .home-button {
        width: 50px;
        height: 50px;
        background: #222;
        border-radius: 50%;
        position: absolute;
        bottom: 20px;
    }

    @keyframes float {
        0% {
            transform: translateY(0px);
            filter: drop-shadow(80px 35px 1px rgba(178, 176, 176, 0.5));
        }

        50% {
            transform: translateY(-15px);
            filter: drop-shadow(100px 40px 1px rgba(178, 176, 176, 0.5));
        }

        100% {
            transform: translateY(0px);
            filter: drop-shadow(80px 35px 1px rgba(178, 176, 176, 0.5));
        }
    }

    /* PHONE CENTER */

    .item_content_kontainer-kontent4_right {
        width: 80%;
        height: 25%;
        border-radius: 20px;
        background: rgba(255, 255, 255, 0.11);
        filter: drop-shadow(8px 8px 10px rgb(49, 124, 221));
        backdrop-filter: blur(20px);
        border: 1px solid #000000;

        backdrop-filter: blur(20px);
        filter: drop-shadow(8px 8px 10px rgb(10, 27, 49));
        font-size: 16px;
        font-weight: bold;
        text-transform: uppercase;
        text-shadow: 0px 0px 8px #114b7e;
        transition: all 2s ease-in-out;
        cursor: pointer;
        background: rgba(18, 25, 61, 0.11);
        color: #004e92;
        box-shadow: 0px 0px 10px rgba(0, 18, 33, 0.605);
        border-radius: 20px;

        background: rgba(15, 30, 45, 0.4);
        /* overflow: hidden; */
        text-align: justify;

    }

    .tittle_card_wablast {
        padding: 10px;
        text-align: center;

        width: 100%;
        /* background: red; */
    }

    .paragraf_card_wablast {
        width: 90%;
        padding: 0px;
        color: gainsboro;

    }


    /* kontent4 */

    .kontainer-kontent5 {
        width: 100%;
        padding: 2% 0px;
        padding-bottom: 5%;
        overflow: hidden;

        display: flex;
        flex-direction: column;
        align-items: center;

        justify-content: center;
        background: linear-gradient(to bottom left, #000000 60%, #003366 150%, rgba(0, 191, 255, 0.6) 100%);
        min-height: 100vh;
        height: 100vh;
        background: rgba(39, 40, 41, 0.348);
        border-radius: 20px;
        gap: 10px;

    }

    .kontent_kontainer-kontent5_top {
        width: 100%;
        display: flex;
        justify-content: start;
        align-items: center;
        flex-direction: column;
        height: 30%;
        /* background: blue; */
        overflow: hidden;
        transition: 2s ease-in-out all;
    }

    .card_kontent_kontainer-kontent5_top {
        width: 30%;
        padding: 20px;
        background: rgba(15, 30, 45, 0.4);
        border-radius: 15px;
        backdrop-filter: blur(10px);
        box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3), inset 0px 2px 5px rgba(255, 255, 255, 0.1);
        text-align: center;
        margin: 20px auto;
        color: #c0c0c0;
        overflow: hidden;
        filter: drop-shadow(8px 8px 10px rgb(25, 64, 115));
    }

    .card_kontent_kontainer-kontent5_top h1 {
        font-size: 2.5rem;
        color: #a0c4ff;
    }

    .card_kontent_kontainer-kontent5_top p {
        font-size: 1rem;
        line-height: 1 rem;
    }

    .kontent_kontainer-kontent5_bottom {
        width: 90%;
        height: 70%;
        display: flex;
        justify-content: center;
        position: relative;

        z-index: 1;
        overflow: hidden;
        align-items: center;
        /* background: red; */
    }

    .item_kontent_kontainer-kontent5_bottom_left {
        width: 30%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;

        align-items: center;
        height: 100%;
        left: 7%;

        gap: 10px;
    }


    .card_item_kontent_kontainer-kontent5_bottom_left {
        width: 50%;
        border-radius: 10px;
        height: 15%;
        background: rgba(15, 30, 45, 0.4);
        border-radius: 15px;
        backdrop-filter: blur(10px);
        box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3), inset 0px 2px 5px rgba(255, 255, 255, 0.1);
        text-align: center;
        margin: 20px auto;
        position: relative;
        /* left: 7%; */
        align-items: center;
        z-index: 3;
        opacity: 1;
        display: flex;
        transition: 2s ease-in-out all;
        color: #c0c0c0;
        filter: drop-shadow(8px 8px 10px rgb(25, 64, 115));
    }





    .card_item_kontent_kontainer-kontent5_bottom_left:nth-child(1) {
        margin-left: 20%;
        animation: card1_kontent5 2s ease-out both;
    }

    @keyframes card1_kontent5 {
        0% {
            width: 15%;
            position: absolute;
            transform: translateX(0%);
            transform: translateY(0%);
            opacity: 0;
        }

        100% {
            width: 15%;
            opacity: 1;
            position: absolute;
            transform: translateX(-40%) translateY(-265%);



        }
    }

    .card_item_kontent_kontainer-kontent5_bottom_left:nth-child(2) {
        margin-left: 5%;
        animation: card2_kontent5 2s ease-out both;
    }



    @keyframes card2_kontent5 {
        0% {
            width: 15%;
            position: absolute;
            transform: translateX(0%);
            opacity: 0;
        }

        100% {
            width: 15%;
            opacity: 1;
            position: absolute;
            transform: translateX(-50%) translateY(-135%);


        }
    }

    .card_item_kontent_kontainer-kontent5_bottom_left:nth-child(3) {
        margin-left: 20%;

        animation: card3_kontent5 2s ease-out both;
    }


    @keyframes card3_kontent5 {
        0% {
            width: 15%;
            opacity: 0;
            position: absolute;
            transform: translateX(-100%);
        }

        100% {
            width: 15%;
            opacity: 1;
            position: absolute;
            transform: translateX(-40%) translateY(0%);


        }
    }


    .card_item_kontent_kontainer-kontent5_bottom_left:nth-child(4) {
        margin-left: 5%;
        animation: card4_kontent5 2s ease-out both;
    }

    @keyframes card4_kontent5 {
        0% {
            width: 15%;
            opacity: 0;
            position: absolute;
            transform: translateX(0%);
        }

        100% {
            width: 15%;
            opacity: 1;
            position: absolute;
            transform: translateX(-50%) translateY(135%);
        }
    }

    .card_item_kontent_kontainer-kontent5_bottom_left:nth-child(5) {
        margin-left: 20%;
        animation: card5_kontent5 2s ease-out both;
    }

    @keyframes card5_kontent5 {
        0% {
            width: 15%;
            opacity: 0;
            position: absolute;
            transform: translateX(0%);
        }

        100% {
            width: 15%;
            opacity: 1;
            position: absolute;
            transform: translateX(-40%) translateY(265%);
        }
    }


    .item_kontent_kontainer-kontent5_bottom_center {
        width: 30%;
        height: 100%;
        position: relative;
        z-index: -1;

        display: flex;
        justify-content: center;
        align-items: center;
    }

    .screen_purifinfluencer {
        width: 100%;
        height: 100%;
        flex-direction: column;
        display: flex;
        /* overflow: hidden; */
        object-fit: cover;
        align-items: start;
        justify-content: start;
        background: black;
    }

    .video_screen_purifinfluencer {
        width: 300%;
        position: absolute;
        left: -60px;
        /* height: 200%; */

    }

    .phone2 {
        width: 200px;
        height: 450px;
        background-color: #3f3f3f5d;
        border-radius: 40px;

        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        border: 3px solid #262424;
        animation: float 3s ease-in-out infinite;
        box-shadow: 0px 10px 20px rgba(51, 51, 51, 0.3),
            0px 15px 30px rgba(0, 0, 0, 0.4),
            inset 0px 5px 10px rgba(255, 255, 255, 0.1);
        transition: 2s ease-in-out all;
        overflow: hidden;


    }

    .item_kontent_kontainer-kontent5_bottom_right {
        width: 30%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: end;
        position: relative;
        /* right: 3%; */
        z-index: 0;
        height: 100%;
        overflow: hidden;
        /* background: rebeccapurple; */
        gap: 10px;

    }

    .card_item_kontent_kontainer-kontent5_bottom_right {
        width: 50%;
        border-radius: 10px;
        overflow: hidden;
        height: 15%;
        align-items: center;
        background: rgba(15, 30, 45, 0.4);
        border-radius: 15px;
        backdrop-filter: blur(10px);
        box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3), inset 0px 2px 5px rgba(255, 255, 255, 0.1);
        text-align: center;
        margin: 20px auto;
        color: #c0c0c0;
        animation: card_right_kontent5 2s 1s ease-in-out both;
        filter: drop-shadow(8px 8px 10px rgb(25, 64, 115));
        background: rgba(42, 42, 42, 0.375);
        display: flex;

    }

    @keyframes card_right_kontent5 {
        0% {
            opacity: 0;

            transform: translate(-195%);
        }

        100% {
            opacity: 1;
            transform: translate(-100% 0%);
        }

    }

    .card_item_kontent_kontainer-kontent5_bottom_right:nth-child(1) {
        margin-right: 20%;
    }

    .card_item_kontent_kontainer-kontent5_bottom_right:nth-child(2) {
        margin-right: 5%;
    }

    .card_item_kontent_kontainer-kontent5_bottom_right:nth-child(5) {
        margin-right: 20%;
    }

    .card_item_kontent_kontainer-kontent5_bottom_right:nth-child(4) {
        margin-right: 5%;
    }

    .kontainer-kontent6 {
        width: 100%;
        overflow-y: hidden;
        position: sticky;
        top: 20%;
        /* scrollbar-width: none; */
        overflow-x: hidden;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        /* min-height: 100vh; */


        height: 130vh;
        /* background: tomato; */
    }

    .content_kontainer-kontent6 {
        width: 100%;
        height: 60vh;
        background: rgba(42, 42, 42, 0.375);
        border-radius: 0px 0px 30px 30px;
        border: 1px solid rgba(0, 0, 0, 0.31);
        box-shadow: 2cap 10px 20px 10px rgba(0, 0, 0, 0.215);
        filter: drop-shadow(30px 10px 20px rgb(16, 14, 37));
        transition: 2s ease-in-out all;
        overflow: hidden;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
    }

    .sideshow_lisianchat {
        transition: 0.5s ease-in-out all;
        /* opacity: 1; */
        object-fit: contain;
        width: 100%;
        height: 100%;
    }

    .fade-out-sideshow {
        opacity: 0;
    }

    .fade-in-sideshow {
        opacity: 1;
    }


    .content_bottom_kontainer-kontent6 {
        height: 60vh;
        flex-direction: column;
        display: flex;
        overflow: hidden;
    }

    .item_content_bottom_kontainer-kontent6 {
        height: 50%;
        width: 100%;
        display: flex;
        justify-content: center;
        overflow: hidden;
        align-items: center;
    }

    .image_item_content_bottom_kontainer-kontent6 {
        width: 30%;
        max-width: 30%;
        border-radius: 20px;
        background: rgba(42, 42, 42, 0.375);
        height: 100%;
        overflow: hidden;
        object-fit: fill;
        display: flex;
        justify-content: center;
        /* background-attachment: fixed; */
    }

    .text_item_content_bottom_kontainer-kontent6 {
        width: 20%;
        position: relative;
        z-index: 2;
        transition: 2s ease-in-out all;
        right: 20px;
    }

    .text_item_content_bottom_kontainer-kontent6 pre {
        color: tomato;
    }

    .text_item_content_bottom_kontainer-kontent6 h1 {
        color: aliceblue;
        position: relative;

    }

    .text_item_content_bottom_kontainer-kontent6 h1::after {
        content: ' ';
        position: absolute;
        top: 0px;
        /* bisa disesuaikan tergantung ukuran font */
        right: 0;
        /* atur jarak dari teks */
        width: 10px;
        height: 10px;
        background-color: red;
        border-radius: 50%;
        box-shadow: 0 0 5px red;
        animation: blink 1s infinite;
    }

    .item2_content_bottom_kontainer-kontent6 {
        height: 50%;
        filter: drop-shadow(10px -10px 30px rgba(0, 0, 0, 0.555));

        box-shadow: 20px -1px 20px 5px rgba(0, 0, 0, 0.555);
        display: flex;

        align-items: center;
        justify-content: center;
        gap: 80px;
        background: rgba(11, 13, 33, 0.775);
    }

    .image_item2_content_bottom_kontainer-kontent6 {
        width: 25%;
        height: 80%;
        display: flex;
        flex-direction: column;
        border-radius: 10px;
        justify-content: end;

        transition: 2s ease-in-out all;
        align-items: end;
        background: rgba(42, 42, 42, 0.375);
        border-radius: 20px;
    }

    .paragraf_image_item2_content_bottom_kontainer-kontent6 {
        width: 100%;
        border-radius: 10px;
        height: 75%;
        overflow: hidden;
        gap: 10px;
        background: linear-gradient(to top, #0000008d 1%, transparent);
    }

    .paragraf_image_item2_content_bottom_kontainer-kontent6 h1 {
        padding: 0px 10px;
        color: #21a2dd;
    }

    .paragraf_image_item2_content_bottom_kontainer-kontent6 p {
        padding: 0px 10px;
        color: gainsboro;
    }

    .image2_item2_content_bottom_kontainer-kontent6 {
        display: flex;
        flex-direction: column;
        justify-content: end;
        width: 25%;
        background: rgba(42, 42, 42, 0.375);
        border-radius: 10px;
        height: 80%;
    }

    .kontainer-kontent7 {
        width: 100%;
        height: auto;
        min-height: 100vh;
        display: flex;
        overflow: hidden;
        background: linear-gradient(to bottom, rgba(39, 40, 41, 0.348) 70%, rgb(1, 7, 56) 120%);
        /* background: red; */
        position: relative;
        z-index: 3;
        backdrop-filter: blur(20px);
        box-shadow: 0px 100px 20px 20px rgb(32, 26, 26);
    }

    .content_kontainer-kontent7 {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 50%;
        overflow: hidden;
        transition: 2s ease-in-out all;
    }

    .card_information_content_kontainer-kontent7 {
        width: 60%;
        border-radius: 20px;
        height: 60%;
        padding: 20px;
        background: linear-gradient(to bottom right, rgba(14, 14, 14, 0.534) 70%, rgb(39, 38, 38) 120%);
        position: relative;
        z-index: 3;
        overflow: hidden;
        backdrop-filter: blur(20px);
        box-shadow: 0px 0px 20px 2px rgba(0, 0, 0, 0.555);
        filter: drop-shadow(90px 20px 20px black);
        transition: 2s ease-in-out all;
    }

    .tittle_card_information_content_kontainer-kontent7 {
        color: rgb(33, 162, 221);
        text-shadow: 0 0 10px rgb(33, 162, 221);
        line-height: 2;
        position: relative;
    }

    .tittle_card_information_content_kontainer-kontent7::after {
        content: ' ';
        position: absolute;
        top: 0px;
        /* bisa disesuaikan tergantung ukuran font */
        right: 0;
        /* atur jarak dari teks */
        width: 10px;
        height: 10px;
        background-color: red;
        border-radius: 50%;
        box-shadow: 0 0 5px red;
        animation: blink 1s infinite;
    }

    @keyframes blink {

        0%,
        100% {
            opacity: 1;
            box-shadow: 0 0 5px red, 0 0 10px red;
        }

        50% {
            opacity: 0.2;
            box-shadow: none;
        }
    }


    .paragraf_card_information_content_kontainer-kontent7 {
        line-height: 1.5;
        text-align: justify;
        color: gainsboro;
    }

    .content2_kontainer-kontent7 {
        width: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        /* background: rebeccapurple; */
        transition: 2s ease-in-out all;
    }

    .card_content2_kontainer-kontent7 {
        width: 80%;
        height: 80%;
        display: flex;
        padding: 20px 0px;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        gap: 10px;
        background: rgba(22, 26, 65, 0.425);
        filter: drop-shadow(10px -10px 30px rgba(0, 0, 0, 0.555));
        /* background: red; */
        border-radius: 20px;
        overflow: hidden;
    }

    .item_card_content2_kontainer-kontent7 {
        width: 30%;

        border-radius: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        justify-content: center;

        height: 30%;
        overflow: hidden;
        background: linear-gradient(to top, rgb(1, 2, 13), rgb(3, 7, 41));
    }

    .item_card_content2_kontainer-kontent7 button {
        padding: 5% 20%;
        border-radius: 5px;
        background: #000428;
        color: aliceblue;
        outline: none;
        border: none;

    }

    .footer_laptop {
        width: 100%;
        height: 60vh;
        /* background: red; */

        background: linear-gradient(to top, rgb(1, 2, 13), rgb(3, 7, 41));
        position: relative;
        z-index: 1;
        transition: 2s ease-in-out all;
    }

    .top_footer_laptop {
        width: 100%;
        height: 90%;
        /* background: gainsboro; */
        /* border-radius: 20px 20px 0px 0px; */
        filter: drop-shadow(2px -20px 100px #2e2c3d);
        background: rgba(39, 39, 39, 0.081);
        backdrop-filter: blur(20px);
        box-shadow: 20px -1000px 20px 20px blue;
        position: relative;
        z-index: 2;
        display: flex;
        flex-direction: row;


    }

    .contact_top_footer_laptop {
        width: 40%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .container_contact_top_footer_laptop {
        width: 100%;
        height: 20%;

        display: flex;
        align-items: center;
        /* gap: 10%; */
        /* gap: 10px; */
        /* background: red; */
        justify-content: center;
        /* background: red; */
    }

    .social_media_contact_top_footer_laptop {
        width: 50%;
        display: flex;
        flex-direction: start;
        align-items: center;
        border-radius: 20px;
        gap: 10px;
        justify-content: start;
        /* background: red; */
        filter: drop-shadow(10px 10px 20px rgba(123, 123, 123, 0.26));
        color: whitesmoke;
        /* background: #000428; */
        height: 50%;
    }

    .action_contact_top_footer_laptop {
        width: 10%;
        height: 50%;
        cursor: pointer;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        /* border-radius: 50%; */
        /* background: white; */
    }

    .contact_us_action_contact_top_footer_laptop {
        width: 10%;
        height: 50%;
        cursor: pointer;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        /* border-radius: 50%; */
        /* background: white; */
    }

    .contact_us_action_contact_top_footer_laptop::after {
        content: ' ';
        position: relative;
        /* top: 0px; */
        z-index: 100;
        display: flex;
        right: 0%;
        width: 10px;
        height: 10px;
        background-color: red;
        border-radius: 50%;
        box-shadow: 0 0 5px red;
        animation: blink 1s infinite;
    }

    .image_top_footer_laptop {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 60%;
        height: 100%;
        overflow: hidden;
        /* background: #000000; */
    }

    .bottom_footer_laptop {
        width: 100%;
        height: 10%;
        display: flex;
        justify-content: center;
        align-items: center;
        color: aliceblue;
        background: #111111;
    }

    #section1 {
        display: flex;
        position: absolute;
        width: 100%;
        z-index: -1;
        height: 120vh;
        /* align-items: center; */
        /* background:linear-gradient(-50deg, #460108 ,  rgb(10, 10, 8), #33000c); */
        /* background: rgba(149, 57, 57, 0.245); */
        /* background: black; */
        background-size: 400%;
        background-position: 50% 100%;
        transition: 2s ease-in-out all;
        -webkit-transition: 2s ease-in-out all;
        -moz-transition: 2s ease-in-out all;
        -ms-transition: 2s ease-in-out all;
        -o-transition: 2s ease-in-out all;

    }

    @keyframes buttonaddbot {
        0% {
            /* opacity: 0%; */
            background-position: 50% 100%;
            /* border-radius: 10px; */
        }

        50% {
            background-position: 65% 10%;
            /* border-radius: 15px; */

        }

        100% {
            /* opacity: 100%;   */

            background-position: 40% 100%;

            /* border-radius: 20px; */
        }

    }

    .section1-item1 {
        width: 100%;
        height: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        background: black;



        overflow: hidden;
    }

    .container-item1 {
        justify-content: center;
        display: flex;
        align-items: center;
        flex-direction: column;
        width: 50%;
        height: 100%;
        /* background: aliceblue; */
    }

    .section1-asset-gambar {
        width: 100%;
        display: flex;
        justify-content: center;
        /* align-items: center; */
        position: fixed;
        /* left: 10; */
        /* background-color: rebeccapurple; */
        height: 100vh;

    }

    #background-asset {
        width: 100%;
        display: flex;
        /* position: fixed; */
        justify-content: center;
        align-items: center;
        margin-bottom: 10px;
        height: 100vh;
        /* animation: welcome-parallax 5s ease-in-out infinite; */
        /* transition: 2s ease-in-out all; */



    }

    .kontainer-title-welcome {
        position: absolute;
        background-color: rgba(0, 0, 0, 0.326);
        width: 55%;
        padding: 20px;
        backdrop-filter: blur(2px);
        border-radius: 20px;
        height: 70%;
        display: flex;
        flex-direction: column;
        top: 20%;
        align-items: center;

        /* animation: item1-welcome-parallax 5s ease-in infinite; */
    }

    .kontainer-title-welcome ul {
        display: flex;
        width: 80%;
        /* height: 100%; */
        /* background: red; */
        justify-content: space-around;
        align-items: center;
        list-style: none;
        /* margin: 10px 0px; */

    }

    .kontainer-title-welcome ul li {
        color: rgb(211, 172, 121);
        font-weight: 800;
        border-bottom: 1px solid gainsboro;
        padding: 5px;
        cursor: pointer;
        margin-top: 10px;
    }

    .kontainer-title-welcome p {
        text-align: center;
        color: gainsboro;
        height: auto;
        font-size: 18px;
        border-bottom: 1px solid gainsboro;
        border-width: 5px;
        /* background: red; */
        padding-bottom: 10px;
    }

    #gambar-title-welcome {
        width: 50%;
        height: 50%;
    }

    #title-selamat-datang {
        position: relative;
        top: 0%;
        width: 100%;
        text-align: center;
        color: aliceblue;
        width: 100%;
        /* background: red; */
        padding: 20px 0px;
    }



    .section1-item1-gambar {
        height: 60%;
        width: 100%;
        display: flex;
        justify-content: space-around;
        /*background: cadetblue;
    */
        /*background: red;
    */
        /*background: cadetblue     ;
    */
        background-blend-mode: color-burn;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        animation: "fadeout 3s both";
        -webkit-animation: "fadeout 3s both";

    }

    .gambar-section1 {
        top: 0px;
        width: 50%;
        height: 100%;
        /* z-index: 1; */
        position: relative;
        /*background: rgb(56, 184, 189);
  */
        animation: gambar-section1 2s alternate-reverse infinite;
        -webkit-animation: gambar-section1 2s alternate-reverse infinite;
    }

    @keyframes gambar-section1 {
        0% {
            bottom: 4%;
            top: 0%;
        }

        100% {
            top: 4%;
            bottom: 0%;
        }
    }

    .section1-item1-title {
        width: 50%;
        height: 40%;
        display: flex;
        justify-content: center;
        color: aliceblue;
        /* align-items: center; */
        /* background-color: aliceblue; */
    }





    .no-support-device {
        width: 100%;
        height: 100vh;
        display: none;
        justify-content: center;
        align-items: center;
        background: black;
        color: gainsboro;
    }


    /* MATIKAN DISPLAY HANDPHONE DI LAPTOP */
    .li-navbar-kiri-handphone {
        display: none;
    }

    .li-navbar-kanan-handphone {
        display: none;
    }

    #navbar-handphone {
        display: none;
    }

    #content-handphone {
        display: none;
    }


    /* Animation */

    .animation_tittle_kontent2 {
        transform: translateX(300px);
        opacity: 0;
    }

    .animation_paragraf_kontent2 {

        transform: translateX(-300px);
        opacity: 0;
    }

    .animation_paragraf_kontent3 {
        transform: translateX(-300px);
        opacity: 0;


    }

    .animation_paragraf_kontent4 {
        transform: translateX(300px);
        opacity: 0;

    }

    #animation_3 {
        gap: 20px;
        transition: 2s ease-in-out all;
    }

    #animation_4 {
        gap: 20px;
        transition: 2s ease-in-out all;
    }

    .animation_5 {
        opacity: 1;
        width: 50%;
        transition: 2S ease-in-out all;
    }



    .animation_paragraf_kontent6 {
        opacity: 0;
        font-size: 10px;
        transform: translateX(20px);
        /* background: red; */

    }


    #animation_6::after {
        content: ' ';
        position: absolute;

        top: 0px;
        z-index: 100;

        display: flex;
        right: 0%;
        width: 10px;
        height: 10px;
        background-color: red;
        border-radius: 50%;
        box-shadow: 0 0 5px red;
        animation: blink 1s infinite;
    }

    .animation_paragraf_kontent5 {
        opacity: 0;
        width: 80%;
        transform: translateX(300px);
    }

    .animation_paragraf_kontent7_after {

        font-size: 1.4rem;
        letter-spacing: 1.5px;
        color: transparent;
        background: gainsboro;
        background-clip: text;
        font-weight: bold;
        transition: 2s ease-in-out all;

        opacity: 1;
    }

    .animation_paragraf_kontent7_before {
        color: transparent;
        background: white;
        background-clip: text;
        opacity: 0;
        font-weight: bold;

        filter: drop-shadow(10px 20px 150px rgb(255, 255, 255));
        box-shadow: 0px -20px 20px 1px rgba(255, 255, 255, 0.073);
    }

    /* CONTENT 3 */
    .animation1_kontent3 {
        height: 0px;
        opacity: 0;
        min-height: 0px;
        padding: 0%;
    }

    .animation2_kontent3 {

        opacity: 1;
        border-radius: 50%;
        padding: 0%;
    }

    /* CONTENT 3 */
    /* CONTENT 4 */
    .animation1_kontent4 {
        width: 0px;

    }

    .animation2_kontent4 {
        /* width: 0px; */
        opacity: 0;
        height: 0px;
    }

    .animation3_kontent4 {
        width: 0px;
        opacity: 0;

    }

    .animation4_kontent4 {
        opacity: 0;
        height: 0px;

    }

    /* CONTENT 4 */

    /* CONTENT 6 */
    .animation1_kontent6 {
        width: 0;
        background: rgba(220, 220, 220, 0.323);
        transform: translateY(-200px);
    }

    .animation2_kontent6 {

        height: 0;
        transform: translateY(200px);
    }

    .animation3_kontent6 {

        transform: translateY(-200px);
    }

    .animation4_kontent6 {

        height: 0;
        transform: translateX(-400px);
        opacity: 0;
    }

    .animation5_kontent6 {
        height: 0;
        opacity: 0;
    }

    .animation6_kontent6 {
        height: 0;
        transform: translateX(400px);
        opacity: 0;
    }

    /* CONTENT 6 */
    /* CONTENT 5 */
    .animation1_kontent5 {
        height: 0;
    }

    /* CONTENT 5 */

    /* CONTENT 7 */
    .animation1_kontent7 {

        height: 0;
        opacity: 0;
        transform: translateY(400px);
    }

    .animation2_kontent7 {

        opacity: 0;
        height: 0;
        transform: translateY(-400px);

    }



    /* CONTENT 7 */
    /* FOOTER */
    .animation1_footer {
        opacity: 0;
    }

    /* FOOTER */

    .card_none {
        opacity: 1;
        display: none;
    }


    .animation2_phone {
        opacity: 0;
        height: 0;
    }

    .animation1_phone {
        opacity: 0;
        height: 0;
        transform: scale(200px);
    }

    /* Animation */
}


/* RESPONSIV HP */

@media screen and (max-width:600px) {
    .content_laptop {
        display: none;
    }

    /* Navbar */
    html,
    body {
        margin: 0;
        padding: 0;
        min-height: 100vh;
        height: auto;
        overflow-y: scroll;
        overflow-x: hidden;
        /* Mencegah scrollbars */
    }


    #content-handphone {
        /* background: blue; */
        min-height: 100vh;
        height: auto;
        overflow-y: scroll;
        overflow-x: hidden;
    }

    #navbar-laptop {

        display: none;
    }

    #navbar-handphone {
        position: absolute;
        top: 0;
        z-index: 9999;
        background: linear-gradient(to bottom, transparent);
        backdrop-filter: blur(7px) contrast(100%);
        color: gainsboro;
        width: 100%;
        display: flex;

        justify-content: center;
        align-items: center;
    }

    .kontainer-navbar-handphone {
        width: 100%;

        /* background: red; */

        height: 8vh;
        display: flex;
        justify-content: start;
        align-items: center;
        /* display: none; */
        padding-left: 5px;
        font-size: 12px;
    }

    .kontainer-navbar-handphone-kanan {
        width: 30%;
        height: 8vh;
        align-items: center;
        justify-content: center;
        display: flex;


    }

    .kontainer-navbar-handphone-kanan a {
        color: whitesmoke;
        text-decoration: none;
    }

    .kontainer-navbar-handphone img {
        margin: 0px 1%;
        width: 10%;
        /* height: 100%; */
        display: flex;
        align-items: center;
        justify-content: center;
        /* background: red; */
    }

    .navbar-kiri-handphone h1 {
        font-size: 10px;
        /* width: 20%; */
    }


    #content1-laptop,
    #content2-laptop {
        display: none;
    }


    /* end navbar */
    /* isi kontent handphone */
    #isi-content-handphone {
        width: 100%;
        height: 50vh;

        overflow: hidden;
        /* background: white; */
    }

    .effect-gelap {
        position: absolute;
        background: rgb(0, 0, 0);
        width: inherit;
        height: 58vh;
        top: 0;
        z-index: -1;

        opacity: 20%;
    }

    .video-background-handphone {
        /* position: relative; */
        /* top: 0; */
        z-index: -9999;
        position: absolute;
        width: 100%;
        height: inherit;

    }

    .video-background-handphone video {
        position: relative;

        right: 30%;

    }


    .deskripsi-isi-content-handphone {
        width: 100%;
        height: 58vh;
        flex-direction: column;
        position: relative;
        z-index: 999;
        overflow: hidden;
        display: flex;
        justify-content: start;
        align-items: center;
        opacity: 1;
    }

    #title-website-handphone {
        transition: 2s ease-in-out all;

    }

    #title-website-handphone::after {
        position: relative;
        content: '|';
        color: transparent;
        width: 0.1px;
        /* top: 0; */
        /* height: 100px; */
        border-right: 1px solid red;
        animation: typeanimation 0.5s ease-in-out alternate infinite;
    }

    @keyframes typeanimation {
        0% {

            opacity: 0;
        }

        100% {
            opacity: 1;
        }

    }

    .deskripsi-isi-content-handphone div:nth-child(1) {
        width: 95%;

        color: gainsboro;
        height: inherit;
        justify-content: center;
        /* background: red; */
        /* border-radius: 20px; */
        text-align: justify;
        display: flex;
        flex-direction: column;
        border-bottom: 1px solid blanchedalmond;

    }

    .deskripsi-isi-content-handphone h1 {
        opacity: 95%;
    }

    .deskripsi-isi-content-handphone p {
        opacity: 80%;
        width: 80%;
    }

    .deskripsi-isi-content-handphone div:nth-child(1) button {
        width: 30%;
        /* margin-top: 5%; */
        padding: 5px 10px;
        margin: 0px 0px;
        border-radius: 5px;
        background: aquamarine;
        color: black;


    }

    .action-deskripsi-isi-content-handphone {
        /* border-color: red; */
        width: 90%;
        height: auto;
        /* height: 5%;   */
        padding: 10px 0px;
        /* background: red; */
        border-bottom: 3px solid gainsboro;
        display: flex;
        align-items: center;
        /* background:   rebeccapurple; */
        justify-content: left;
    }

    .action-deskripsi-isi-content-handphone a {
        width: 100%;
    }

    /* CONTENT 2 */
    #isi2-content-handphone {
        width: 100%;
        min-height: 80vh;
        height: 100%;
        overflow: hidden;
        display: flex;
        /* align-items: left; */
        background: linear-gradient(to bottom, black, rgba(29, 29, 29, 0.711), black);
        justify-content: center;
        flex-wrap: wrap;
        transition: 2s ease-in-out all;

    }

    .card-handphone-left {
        width: 40%;
        background: #141E30;

        background: linear-gradient(to top left, #243B55, #1b2b49);
        background: linear-gradient(to right, #003366, #004C99);
        box-shadow: 5px 5px 10px 0px #1b2b49;
        backdrop-filter: blur(10px);
        color: gainsboro;
        margin: 30px 10px;

        height: 35vh;
        justify-content: center;
        overflow: hidden;

        /* justify-content: space-around; */
        display: flex;
        flex-direction: column;
        align-items: center;
        border-radius: 10px;
        transition: 2s ease-in-out all;
        /* transform: translateX(-50%); */
        transform: translateX(0%);
    }


    .card-handphone-left img {
        max-height: 100px;
        max-width: 100px;
        width: 200px;
        height: 200px;
        overflow: hidden;
        transform: scale(200px);
        display: flex;
        object-fit: cover;
        object-position: center;
        /* background: gainsboro; */
        background-image: url('img/landingpage/logoPT.png');
        /* background: #000000; */

    }

    .card-handphone-left h3 {

        width: 90%;
        height: 10%;
        /* background: blue; */
        border-bottom: 2px solid rgba(166, 79, 64, 0.886);
        text-align: center;
    }

    .card-handphone-left p {
        width: 100%;
        height: 30%;
        padding: 0px 10px;
        /* background: aliceblue; */
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    .action-card-handphone-left {
        width: 90%;
        height: 10%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        overflow: hidden;
    }

    .action-card-handphone-left button {
        padding: 10px;
        border: none;
        border-radius: 10px;

    }



    .card-handphone {
        width: 40%;
        background: linear-gradient(to top left, #243B55, #1b2b49);
        background: linear-gradient(to top left, #070f44, #1b2b49);
        box-shadow: 10px 10px 10px 0px #1b2b49;

        backdrop-filter: blur(20px);
        color: gainsboro;
        margin: 30px 10px;
        min-height: 225px;
        height: 35vh;
        justify-content: center;
        overflow: hidden;

        /* justify-content: space-around; */
        display: flex;
        flex-direction: column;
        align-items: center;
        border-radius: 10px;
        transition: 2s ease-in-out all;
        /* transform: translateX(-50%); */
        transform: translateX(0%);
    }


    .card-handphone img {
        height: 100px;
        width: 100px;
    }

    .card-handphone h3 {

        width: 90%;
        height: 10%;
        /* background: blue; */
        border-bottom: 2px solid rgba(211, 81, 58, 0.554);
        text-align: center;
    }

    .card-handphone p {
        width: 100%;
        height: 30%;
        padding: 0px 10px;
        /* background: aliceblue; */
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    .action-card-handphone {
        width: 90%;
        height: 10%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        overflow: hidden;
    }

    .action-card-handphone button {
        padding: 10px;
        border: none;
        border-radius: 10px;

    }

    #view-card-handphone {
        background: rgb(191, 191, 4);
        opacity: 55%;
    }

    #order-card-handphone {
        background: rgb(98, 198, 165);
    }

    .card-phone-animation {
        transform: translateX(0%);
    }


    /* isi kontent handphone */

    /* ISI3-KONTENT HANDPHONE */

    #pt-kbs {
        color: gainsboro;
        font-size: 13px;
        position: sticky;
        display: flex;
        background: black;
        justify-content: center;
        align-items: center;
        padding: 10px;
        transition: 2s ease-in-out all;
    }

    #logo-pt-kbs {
        width: 60px;
        margin-right: 2%;
        /* background: rgb(53, 53, 54); */
        height: 60px;
        border-radius: 50%;
        overflow: hidden;
        background: url('/img/landingpage/logoPT.png');
        background-color: rgb(172, 172, 172);
        display: flex;
        background-position: center;
        background-size: 125px;
        /* backdrop-filter: invert(1); */
        /* background: red; */
        justify-content: center;
        align-items: center;
        object-fit: cover;
    }

    #border-bottom-pt {
        transition: 2s ease-in-out all;
        border-bottom: 1px solid gainsboro;

    }

    #isi3-content-handphone {
        width: 100%;
        min-height: 50vh;

        height: auto;
        /* background: red; */
    }

    #visi {
        width: 100%;
        height: 25vh;
        overflow: hidden;
        display: flex;
        justify-content: left;
        align-items: center;
        background: rgb(0, 0, 0);
        animation: visianimation 2s ease-in-out both;
        border-bottom: 1px dashed gainsboro;
        transform: translateX(-50%);
    }

    @keyframes visianimation {
        0% {
            transform: translateX(-50%);

        }

        100% {
            transform: translateX(0%);

        }

    }

    #isi-visi {
        width: 80%;
        transition: 2s ease-in-out;
        /* transform: translateX(-50px); */
        padding: 10px;
        border-radius: 20px;
        /* fallback for old browsers */
        background: -webkit-linear-gradient(to left, royalblue, #000428);
        /* Chrome 10-25, Safari 5.1-6 */
        /* background: linear-gradient(to right, #008080, #004d4d); */
        /* background: linear-gradient(to right, #003366, #001F3F); */
        background: linear-gradient(to right, #00274D, #001F3F);
        /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */


        color: gainsboro;
        text-align: center;

    }

    #misi {
        background: black;
        overflow: hidden;
        width: 100%;
        min-height: 25vh;
        height: auto;
        display: flex;
        justify-content: right;
        align-items: center;
        transition: 2s ease-in-out all;
        /* padding-bottom: 5%; */
        animation: misianimation 2s ease-in-out both;
    }



    @keyframes misianimation {
        0% {
            transform: translateX(50%);

        }

        100% {
            transform: translateX(0%);

        }

    }

    #isi-misi {
        width: 80%;
        padding: 10px 20px;
        border-radius: 20px;

        height: auto;
        /* fallback for old browsers */
        background: -webkit-linear-gradient(to left, #004e92, #000428);
        /* Chrome 10-25, Safari 5.1-6 */
        background: linear-gradient(to right, #00274D, #001F3F);
        /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

        text-align: left;
        color: gainsboro;
        transition: 2s ease-in-out all;
        margin: 20px 0px;
    }

    #isi-misi h1 {
        text-align: center;
    }

    /* ISI3-KONTENT HANDPHONE */

    /* LAYOUT PRODUCT */
    .layout-product {
        width: 100%;
        height: 100vh;
        max-height: 100vh;
        /* padding-top: 5vh; */


        position: sticky;
        top: 0;
        backdrop-filter: blur(10px);
        z-index: 99999999;
        color: gainsboro;
        overflow-x: hidden;
    }

    .background-layout-product {
        position: absolute;
        width: 100%;
        height: inherit;

        display: flex;
        overflow-x: hidden;

        overflow-y: hidden;

        white-space: nowrap;

    }

    @keyframes slider-background-layout-product {
        0% {
            left: 0px;
        }

        100% {
            left: -400px;
        }
    }

    .item-slider-background {
        flex: 0 0 auto;
        transition: 2s ease-in-out all;
        width: 100%;
        height: 100%;
        box-sizing: border-box;

        position: relative;
        left: 0px;

        animation: slider-background-layout-product 10s ease-in-out alternate infinite;
        transition: 2s ease-in-out all;
    }

    .gambarproduct-layout-product {
        width: 100%;
        height: inherit;
        padding-left: 0%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        position: absolute;
        align-items: center;
        background: rgba(0, 0, 0, 0.116);

    }

    .title-layout-product {
        width: 100%;

        display: flex;
        margin-top: 10px;
        align-items: center;
    }

    .deskripsi-layout-product {
        width: 100%;

        min-height: 50%;
        max-height: 60%;
        height: 60%;
        /* margin-bottom: 7vh; */
        overflow: hidden;
        padding: 10px 0px;
        /* border-radius: 20px  ; */
        /* background: rgba(0, 0, 0, 0.172); */
        /* background: red; */

    }

    .isi-deskripsi-layout-product {
        height: 30%;
        display: flex;
        justify-content: center;
        align-items: center;

        background: radial-gradient(rgb(255 255 255 / 0%), transparent);
        backdrop-filter: blur(5px) contrast(100%) brightness(0.5);
        transition: 2s ease-in-out all;

        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
    }

    .border-isi-deskripsi-layout-product {
        padding: 40px 0px;
        width: 100%;
        text-align: center;
        border-bottom: 2px solid transparent;
        border-top: 2px solid transparent;

        animation: border-animation 2s ease-in-out alternate infinite;
        border-image: radial-gradient(rgb(255, 255, 255) 40%, transparent) 1;
        color: rgba(255, 255, 255, 0.863);
    }

    @keyframes border-animation {
        0% {
            border-image: radial-gradient(rgb(255, 255, 255) 40%, transparent) 1;

        }

        100% {
            border-image: radial-gradient(transparent, rgba(255, 255, 255, 0.161) 40%) 1;

        }
    }

    .logo-gambarproduct-layout-product {
        width: 10%;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        border-radius: 50%;
        height: 100%;
        background: rgb(227, 226, 226);
        margin-right: 2%;

        margin-left: 5%;
        /* background: rebeccapurple; */
    }

    .logo-gambarproduct-layout-product img {
        width: 100%;
        height: 100%;
        /* background: rebeccapurple; */
    }

    .isi2-deskripsi-layout-product {
        width: 100%;

        min-height: 60%;
        height: auto;
        display: flex;

        /* align-items: center; */
        background: rgba(0, 0, 0, 0.283);
        background: linear-gradient(to left, rgba(0, 0, 0, 0.282), black);
        backdrop-filter: blur(5px) contrast(100%);
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;

        transition: 2s ease-in-out all;
    }

    .nama_product_layout_product {
        transition: 2s ease-in-out all;
        color: tomato;
    }

    .kiri-isi2-deskripsi-layout-product {
        width: 80%;
        /* background: red; */
        min-height: 80%;
        height: auto;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        justify-content: center;
    }

    .kiri-isi2-deskripsi-layout-product h3 {
        margin-bottom: 5%;
        margin-top: 5%;
        padding-left: 3%;
    }

    .kiri-isi2-deskripsi-layout-product p {
        padding-left: 3%;
        text-align: justify;
    }

    .kiri-isi2-deskripsi-layout-product .action-kiri-isi2-deskripsi-layout-product {
        width: 100%;

        align-items: center;
        display: flex;

        /* background-color: black; */
        margin: 5% 0%;
    }

    .kiri-isi2-deskripsi-layout-product .action-kiri-isi2-deskripsi-layout-product button {
        margin: 0% 3%;
        height: 100%;
        padding: 2% 3%;
        border-radius: 5px;
        background: rgb(51, 82, 176);
        border: 2px solid rgb(97, 96, 96);
        color: gainsboro;
    }


    .kanan-isi2-deskripsi-layout-product {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        width: 20%;
        /* background: rgb(216, 213, 213); */
        height: inherit;
    }

    .kanan-isi2-deskripsi-layout-product a {
        margin: 10% 0%;
    }

    /* LAYOUT PRODUCT */


    /* footer */
    #footer {
        width: 100%;
        height: 7vh;
        background: black;
        color: gainsboro;
        position: fixed;
        bottom: 0;
        align-items: center;
        display: flex;
        justify-content: space-around;
    }

    #lightmode {
        transition: 2s ease-in-out all
    }

    #darkmode {
        display: none;
        transition: 2s ease-in-out all
    }

    .contentfadein {
        width: 100%;
        min-height: 100vh;

        height: auto;
        display: flex;
        transition: 2s ease-in-out all;
        opacity: 0;

        top: 0;

        z-index: -99999;

        position: fixed;
        animation: fadeanimation 2s ease-in-out both;
    }

    .fadeineffect {
        background: black;
        z-index: 999999999;
        opacity: 1;
        transition: 2s ease-in-out all;
    }



    /* footer */

    /* notifcation */
    .notification_mt_chatbot {
        width: 100%;
        height: 100vh;
        position: fixed;
        z-index: 9999;

        display: none;
        align-items: center;
        top: 0;
        justify-content: center;
        background: rgba(0, 0, 0, 0.166);
    }

    .container_notification {
        width: 68%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        /* padding: 10px; */
        height: 23%;
        border-radius: 20px;
        background-color: white;
        /* background: royalblue; */
    }

    .container_notification h1 {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        color: whitesmoke;
        background: tomato;
        height: 30%;
    }

    .container_notification p {
        display: flex;
        justify-content: center;
        align-items: center;
        /* width: 100%; */
        height: 55%;
        text-align: center;
        /* background: rgb(149, 118, 118); */
        border-bottom: 1px solid black;
    }

    .action_notification_mt_chatbot {
        width: 100%;
        height: 15%;
        display: flex;
        padding: 10px 0px;
        overflow: hidden;
        justify-content: space-around;
        align-items: center;
        background: whitesmoke;
    }

    .action_notification_mt_chatbot button {
        padding: 5px 15px;
        border-radius: 5px;
    }


    #cancel_mt {
        background: tomato;
        color: aliceblue;
    }

    #lanjut_mt {
        background: aquamarine;
    }


    /* notifcation */
}