html,
body {
    margin: 0;
    font-size: 100%;
    background: #fff;
    scroll-behavior: smooth;
    overflow-x:hidden;
    font-family: 'Roboto' !important;
    padding:0 !important;
}
.chapter1:hover {
    transform: scale(1.1);
    transition: .5s ease;
  }

.navbar-toggler{
    background:white;
}

::-webkit-scrollbar {
    width: 10px;
    cursor: pointer;
  }
  
  ::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.02);
    cursor: pointer;
  }
  
  ::-webkit-scrollbar-thumb {
    background: var(--bs-bg-red);
    opacity: 90%;
    border-radius: 40px;
    cursor: pointer;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: var(--bs-bg-red);
    transition:.5s;
  }

.btn-rounded-pill{
    border-radius:100px;
}

*{
    user-select:none;
 -moz-user-select:none;
 -ms-user-select:none;
 -khtml-user-select:none;
 -webkit-user-select:none
}
body a {
    text-decoration: none;
}

html {

    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

}

.bg-0 {
    background: url('../images/Opening.webp') no-repeat center;
    background-size: cover;
    -webkit-background-size: cover;
    animation: slideBg 30s linear infinite;
}
.bg-1 {
    background: url('../images/bg1.webp') no-repeat center;
    background-size: cover;
    -webkit-background-size: cover;
    animation: slideBg 30s linear infinite;
}

@keyframes slideBg {
    from {
        background-position: 0 0;
    }
    to {
        background-position: 100% 0;
    }
}

@keyframes bouncer {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px); /* Sesuaikan dengan tinggi bounce */
    }
    100% {
        transform: translateY(0);
    }
}

.loading img {
    animation: bouncer 1s ease-in-out infinite;
}


.bstart {
    width: 70%;
    transition: transform 0.5s ease-in-out;
    animation: zoomStart 3s ease-in-out infinite; /* Atur animasi */
}

@keyframes zoomStart {
    0% {
        transform: scale(1); /* Ukuran awal */
    }
    50% {
        transform: scale(4); /* Zoom in */
    }
    100% {
        transform: scale(1); /* Kembali ke ukuran awal */
    }
}



.bg-2{
    background: url('../images/bg2.png') no-repeat center;
    background-size: cover;
    -webkit-background-size: cover;
    animation: slideBg 30s linear infinite;
}

.bg-3 {
    position: relative;
    background: url('../images/bg3.webp') no-repeat center;
    background-size: cover;
    -webkit-background-size: cover;
    
}

.bg-3::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.8) 20%, rgba(255, 255, 255, 0) 60%);
    background-size: 200% 200%;
    animation: shimmering 3s infinite linear;
    pointer-events: none; /* Agar efek tidak mengganggu interaksi pengguna */
    opacity: 0.7; /* Menambah efek kilau */
}

@keyframes shimmering {
    0% {
        background-position: 200% 200%;
    }
    50% {
        background-position: -200% -200%;
    }
    100% {
        background-position: 200% 200%;
    }
}


.bg-4 {
    background: url('../images/Nama.webp') no-repeat top center;
    background-size: 120%; /* Memastikan gambar latar lebih besar dari area kontainer */
    -webkit-background-size: 120%; /* Untuk kompatibilitas webkit */
    animation: moveBackground 10s linear infinite;
}

@keyframes moveBackground {
    0% {
        background-position: 0% 0%; /* Mulai dari kiri */
    }
    100% {
        background-position: 100% 0%; /* Geser ke kanan */
    }
}


.bg-5{
    background: url('../images/bg5-a.webp') no-repeat center;
    background-size: cover;
    -webkit-background-size: cover;
}

.bg5-b {
    background: url('../images/bg5-b.webp') no-repeat center;
    background-size: cover;
    -webkit-background-size: cover;
    opacity: 0; /* Mulai dengan transparansi 0 */
    animation: fadeIn .5s ease-in-out 2s forwards; /* Animasi fade-in setelah 5 detik */
}

@keyframes fadeIn {
    0% {
        opacity: 0; /* Mulai dengan transparansi 0 */
    }
    100% {
        opacity: 1; /* Akhirnya menjadi sepenuhnya terlihat */
    }
}


.bg-6{
    background: url('../images/bg6.webp') no-repeat center;
    background-size: cover;
    -webkit-background-size: cover;
    animation: slideBg 30s linear infinite;
}

.askb {
	backface-visibility: visible !important;
	animation: flip 2s ease infinite;
}
@keyframes flip {
	0% {
		transform: perspective(400px) rotateY(0);
		animation-timing-function: ease-out;
	}
	40% {
		transform: perspective(400px) translateZ(150px) rotateY(170deg);
		animation-timing-function: ease-out;
	}
	50% {
		transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
		animation-timing-function: ease-in;
	}
	80% {
		transform: perspective(400px) rotateY(360deg) scale(.95);
		animation-timing-function: ease-in;
	}
	100% {
		transform: perspective(400px) scale(1);
		animation-timing-function: ease-in;
	}
}

.bg-7 {
    background: url('../images/bg7-a.webp') no-repeat left;
    background-size: cover;
    -webkit-background-size: cover;
    animation: slideBg 30s linear infinite;
    animation: zoomInOut .5s ease-in-out forwards; /* Animasi zoom in dan zoom out */
}

@keyframes zoomInOut {
    0% {
        background-size: 100%; /* Mulai dengan ukuran normal */
    }
    50% {
        background-size: 120%; /* Zoom in (perbesar gambar) */
    }
    100% {
        background-size: 100%; /* Kembali ke ukuran normal */
    }
}


.bg7-b {
    background: url('../images/bg7-b.webp') no-repeat center;
    background-size: cover;
    -webkit-background-size: cover;
    opacity: 0; /* Mulai dengan transparansi 0 */
    animation: fadeIn .5s ease-in-out 1s forwards; /* Animasi fade-in setelah 5 detik */
}

.bg-8 {
    background: url('../images/bg8.webp') no-repeat right;
    background-size: 130%;
    -webkit-background-size: 130%;
    animation: shakeBackground 1s ease-in-out infinite; /* Efek gemetar */
}

@keyframes shakeBackground {
    0% {
        background-position: 0% 0; /* Mulai dari posisi normal */
    }
    25% {
        background-position: 1% 0; /* Geser sedikit ke kanan */
    }
    50% {
        background-position: -1% 0; /* Geser sedikit ke kiri */
    }
    75% {
        background-position: 1% 0; /* Geser sedikit ke kanan */
    }
    100% {
        background-position: 0% 0; /* Kembali ke posisi normal */
    }
}

.pohon {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: movePohon 3s forwards; /* Animasi untuk memindahkan pohon */
}

.pohon img {
    width: 10%; /* Ukuran gambar awal */
    animation: scaleImg 3s forwards; /* Animasi untuk memperbesar gambar */
}

@keyframes movePohon {
    100% {
        transform: translate(-94%, -50%); /* Pindahkan pohon lebih jauh ke kiri */
    }
}

@keyframes scaleImg {
    100% {
        transform: scale(3); /* Perbesar gambar dua kali */
    }
}



.bg-9{
    background: url('../images/bg9.webp') no-repeat center;
    background-size: cover;
    -webkit-background-size: cover;
}

.bg-9::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(255, 253, 185, 0.132) 20%, rgba(255, 255, 255, 0) 60%);
    background-size: 200% 200%;
    animation: shimmering 6s infinite linear;
    pointer-events: none; /* Agar efek tidak mengganggu interaksi pengguna */
    opacity: 0.7; /* Menambah efek kilau */
}

.bg-10 {
    background: url('../images/bg10.webp') no-repeat center;
    background-size: cover;
    -webkit-background-size: cover;
}

.buyung {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
    opacity: 0; /* Mulai dengan gambar tersembunyi */
    animation: zoomIn 2s forwards, bounce 2s ease-in-out infinite; /* Kombinasi animasi */
}

@keyframes zoomIn {
    0% {
        transform: scale(0); /* Mulai dengan gambar tidak terlihat (zoom out) */
        opacity: 0; /* Tidak terlihat */
    }
    100% {
        transform: scale(1); /* Gambar diperbesar secara normal */
        opacity: 1; /* Gambar terlihat */
    }
}

@keyframes bounce {
    0% {
        transform: translateY(0); /* Posisi normal */
    }
    50% {
        transform: translateY(10px); /* Kembali ke posisi normal */
    }
    100% {
        transform: translateY(0); /* Kembali ke posisi normal */
    }
}



.bg-11{
    background: url('../images/bg11.webp') no-repeat center;
    background-size: cover;
    -webkit-background-size: cover;
}

.bg-12{
    background: url('../images/bg12.webp') no-repeat center;
    background-size: cover;
    -webkit-background-size: cover;
}

.bg-13 {
    background: url('../images/bg13-a.webp') no-repeat left;
    background-size: cover;
    -webkit-background-size: cover;
    animation: zoomInOut .5s ease-in-out forwards; /* Animasi zoom in dan zoom out */
}

@keyframes zoomInOut {
    0% {
        background-size: 100%; /* Mulai dengan ukuran normal */
    }
    50% {
        background-size: 120%; /* Zoom in (perbesar gambar) */
    }
    100% {
        background-size: 100%; /* Kembali ke ukuran normal */
    }
}


.bg13-b {
    background: url('../images/bg13-b.webp') no-repeat center;
    background-size: cover;
    -webkit-background-size: cover;
    opacity: 0; /* Mulai dengan transparansi 0 */
    animation: fadeIn .5s ease-in-out 1s forwards; /* Animasi fade-in setelah 5 detik */
}
.bg-14{
    background: url('../images/bg11.webp') no-repeat center;
    background-size: cover;
    -webkit-background-size: cover;
}

/* Animasi getar ke kiri dan kanan */
@keyframes shake {
    0% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    50% { transform: translateX(5px); }
    75% { transform: translateX(-5px); }
    100% { transform: translateX(0); }
}

.bg-14.shake {
    animation: shake 0.5s infinite;
}
.bg-kosong2.shake {
    animation: shake 0.5s infinite;
}
.bg-kosong4.shake {
    animation: shake 0.5s infinite;
}

/* Efek greyscale dan scale */
.buy.greyscale {
    filter: grayscale(100%);
}

.greyscale {
    filter: grayscale(100%);
}

.poh.greyscale {
    filter: grayscale(100%);
}

.poh.scale-up {
    transform: scale(2);
    transition: transform 0.3s ease-in-out;
    z-index: 5;
}

.buy.scale-up {
    transform: scale(2);
    transition: transform 0.3s ease-in-out;
}

button {
    cursor: pointer;
}

#next:disabled {
    opacity: 0.5;
}


.bubble{
    width:100%;
    max-width:60vw;
}
.bubble2{
    width:100%;
    max-width:80vw;
}

.opsi{
    transition:.5s;
}
.opsi:hover{
    scale:1.5;
    transition:.5s;
}

.bg-kosong{
    background: url('../images/bg14.webp') no-repeat center;
    background-size: cover;
    -webkit-background-size: cover;
}

.bg-kosong2{
    background: url('../images/bg42.webp') no-repeat center;
    background-size: cover;
    -webkit-background-size: cover;
}

.bg-kosong3{
    background: url('../images/bg51.png') no-repeat center;
    background-size: cover;
    -webkit-background-size: cover;
}
.bg-kosong4{
    background: url('../images/bg52.png') no-repeat center;
    background-size: cover;
    -webkit-background-size: cover;
}
.bg-kosong5{
    background: url('../images/bg53.webp') no-repeat center;
    background-size: cover;
    -webkit-background-size: cover;
}

.bg-15{
    background: url('../images/scn21.png') no-repeat center;
    background-size: cover;
    -webkit-background-size: cover;
}

.bg-16{
    background: url('../images/bg16.webp') no-repeat center;
    background-size: cover;
    -webkit-background-size: cover;
}

.bg-17{
    background: url('../images/bg17.webp') no-repeat center;
    background-size: cover;
    -webkit-background-size: cover;
}

.bg-18{
    background: url('../images/bg18.webp') no-repeat center;
    background-size: cover;
    -webkit-background-size: cover;
}

.bg-19{
    background: url('../images/bg19.webp') no-repeat center;
    background-size: cover;
    -webkit-background-size: cover;
}

.bg-20{
    background: url('../images/bg20.webp') no-repeat center;
    background-size: cover;
    -webkit-background-size: cover;
}

.bg-22{
    background: url('../images/bg21.webp') no-repeat center;
    background-size: cover;
    -webkit-background-size: cover;
}

.bg-25{
    background: url('../images/bg22.webp') no-repeat center;
    background-size: cover;
    -webkit-background-size: cover;
}

.bg-26{
    background: url('../images/bg23.webp') no-repeat center;
    background-size: cover;
    -webkit-background-size: cover;
}

.bg-27{
    background: url('../images/bg24.webp') no-repeat center;
    background-size: cover;
    -webkit-background-size: cover;
}

.bg-28{
    background: url('../images/bg25.webp') no-repeat center;
    background-size: cover;
    -webkit-background-size: cover;
}

.bg-29{
    background: url('../images/bg26.webp') no-repeat center;
    background-size: cover;
    -webkit-background-size: cover;
}

.bg-30{
    background: url('../images/bg27.webp') no-repeat center;
    background-size: cover;
    -webkit-background-size: cover;
}
.bg-31{
    background: url('../images/bg34.webp') no-repeat center;
    background-size: cover;
    -webkit-background-size: cover;
}
.bg-32{
    background: url('../images/bg35.webp') no-repeat center;
    background-size: cover;
    -webkit-background-size: cover;
}
.bg-33{
    background: url('../images/bg36.webp') no-repeat center;
    background-size: cover;
    -webkit-background-size: cover;
}
.bg-34{
    background: url('../images/bg37.webp') no-repeat center;
    background-size: cover;
    -webkit-background-size: cover;
}
.bg-35{
    background: url('../images/bg38.webp') no-repeat center;
    background-size: cover;
    -webkit-background-size: cover;
}
.bg-36{
    background: url('../images/bg39.webp') no-repeat center;
    background-size: cover;
    -webkit-background-size: cover;
}
.bg-37{
    background: url('../images/bg40.webp') no-repeat center;
    background-size: cover;
    -webkit-background-size: cover;
}
.bg-38{
    background: url('../images/bg41.webp') no-repeat center;
    background-size: cover;
    -webkit-background-size: cover;
}
.bg-39{
    background: url('../images/bg43.webp') no-repeat center;
    background-size: cover;
    -webkit-background-size: cover;
}
.bg-40{
    background: url('../images/bg44.webp') no-repeat center;
    background-size: cover;
    -webkit-background-size: cover;
}
.bg-41{
    background: url('../images/bg45.webp') no-repeat center;
    background-size: cover;
    -webkit-background-size: cover;
}
.bg-42{
    background: url('../images/bg46.jpg') no-repeat center;
    background-size: cover;
    -webkit-background-size: cover;
}
.bg-43{
    background: url('../images/bg47.jpg') no-repeat center;
    background-size: cover;
    -webkit-background-size: cover;
}
.bg-44{
    background: url('../images/bg48.webp') no-repeat center;
    background-size: cover;
    -webkit-background-size: cover;
}
.bg-45{
    background: url('../images/bg49.webp') no-repeat center;
    background-size: cover;
    -webkit-background-size: cover;
}
.bg-46{
    background: url('../images/bg50.jpg') no-repeat center;
    background-size: cover;
    -webkit-background-size: cover;
}
.bg-47{
    background: url('../images/bgjmbt.png') no-repeat center;
    background-size: cover;
    -webkit-background-size: cover;
}


.ic-home:hover{
    animation: hithere 1s ease infinite;
}
@keyframes hithere {
    30% { transform: scale(1.2); }
    40%, 60% { transform: rotate(-20deg) scale(1.2); }
    50% { transform: rotate(20deg) scale(1.2); }
    70% { transform: rotate(0deg) scale(1.2); }
    100% { transform: scale(1); }
  }

.btn-nav:hover{
    animation: gelatine 0.5s infinite;
}
@keyframes gelatine {
  from, to { transform: scale(1, 1); }
  25% { transform: scale(0.9, 1.1); }
  50% { transform: scale(1.1, 0.9); }
  75% { transform: scale(0.95, 1.05); }
}

.trans {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: opacity 0.5s ease-in-out, visibility 0s linear 0.5s; /* Visibility delay */
}

.trans.fade-in {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.5s ease-in-out, visibility 0s linear 0s; /* Instant visibility */
}

.loading{
    background: linear-gradient(135deg, rgb(132, 132, 255), rgb(255, 255, 255), rgb(179, 232, 255));
    background-size: 300% 300%; /* Memperbesar gradien untuk animasi */
    animation: gradient-move 6s ease infinite;
}

@keyframes gradient-move {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.loading{
    opacity: 1;
    transition: opacity 0.5s ease-out;
    position: fixed;
    top: 0;
    left: 0;
}


.loading.hidden {
    opacity: 0;
    pointer-events: none;
}

/* .content {
    display: none;
} */
.content.visible {
    display: block;
}

.mirror-img{
    filter: grayscale(100%);
}

.mirror-img2{
    transform: scaleX(-1);
}

.area-text{
    border: 10px solid #DA9241;
    width:80%;
}
.modal-content {
    border: none !important;
}
.btn.disabled, .btn:disabled, fieldset:disabled .btn {
    border-color: transparent !important;
}
.animated-text2{
    animation: heartbeat 1s;
  }
.animated-text{
    font-size: 1.3rem;
    display: none;
    /* animation: heartbeat 1s; */
    opacity: 0;
    transition: opacity 0.5s ease;
  }
.animated-text.show{
    animation: heartbeat 1s;
    display: block;
    opacity: 1;
  }
  
  @keyframes heartbeat {
    0%, 100% {
        transform: scale(1); /* Ukuran normal */
    }
    25% {
        transform: scale(1.2); /* Sedikit membesar */
    }
    50% {
        transform: scale(1.1); /* Mengecil sedikit */
    }
    75% {
        transform: scale(1.3); /* Membesar lagi */
    }
}

/* Responsive */

@media (max-width: 1780px){
    
}

/* 1366 x 768 */
@media (max-width:1366px){
    
}

/* 1280 x 780 */
@media(max-width:1280px) {
    
}

/* 1151 x 600 */
@media(max-width:1151px) {
    
}

/* 1080 x 576 */
@media(max-width:1080px) {
    
}

@media(max-width:991px) {
    
}

/* 780 x 487 */
@media(max-width:780px) {
}

@media(max-width:768px) {
}

@media(max-width:667px) {

}

@media(max-width:640px) {
    .animated-text{
        font-size: 1rem;
    }
}

@media(max-width:450px) {
    .area-text{
        margin-bottom:7vh !important;
    }
    

    .askb{
        display: none;
    }
    .animated-text{
        font-size: .7rem;
    }

    @keyframes scaleImg {
        100% {
            transform: scale(7); /* Perbesar gambar dua kali */
        }
    }
    .bubble{
        width:100%;
        max-width:90vw;
    }
    .bubble2{
        width:100%;
        max-width:90vw;
    }

    .poh{
        width:80%;
    }

    .buy{
        width:30%;
    }
    
}

@media(max-width:384px) {
    
}

@media(max-width:375px) {
    
}

@media(max-width:320px) {

}
    
/*--//Responsive--*/