@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Kaisei+Decol&display=swap');


.gradient-overlay {
    background: linear-gradient(to top, rgba(12, 28, 39, 0.9), rgba(12, 28, 39, 0));
}

.font-kaisei {
    font-family: 'Kaisei Decol', serif;
}

.pesanini {
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
}

/* Set the background to cover the entire screen */
.bg-awal {
    background-image: url('img/IMG_0450.jpg');
}

@media (max-width: 768px) {
    .bg-awal {
        background-image: url('img/phone-bg-awal.png');
    }
}

@keyframes appear {
    from {
        opacity: 0;
        scale: 0.5
    }
    to {
        opacity: 1;
        scale:1;
    }
}

.animasii {
    animation: appear linear;
    animation-timeline: view();
    animation-range: entry 0% cover 40%;
}


/* Keyframes untuk animasi slide */
@keyframes slideInFromLeft {
    0% {
        transform: translateY(-70%);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Set opacity awal ke 0 agar elemen tidak terlihat sebelum animasi dimulai */
.slide-in, .slide-in-2, .slide-in-3, .slide-in-4, .slide-in-5 {
    opacity: 0;
    animation: slideInFromLeft 0.8s ease-out forwards;
}

/* Animasi dengan delay berbeda untuk setiap elemen */
.slide-in {
    animation-delay: 0.4s;
}

.slide-in-2 {
    animation-delay: 0.8s;
}

.slide-in-3 {
    animation-delay: 1.2s;
}

.slide-in-4 {
    animation-delay: 1.6s;
}

.slide-in-5 {
    animation-delay: 2s;
}