body {
    font-family: 'URW DIN Std Regular', sans-serif;

}

.animate-fade-in {
    animation: fadeIn 2s ease-in;
}

.animate-scroll {
    animation: scrollIn 3s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes scrollIn {
    from {
        transform: translateY(50px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes fade-in-left {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fade-in-right {
    from {
        opacity: 0;
        transform: translateX(50px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.animate-fade-in-left {
    animation: fade-in-left 1s ease-in-out;
}

.animate-fade-in-right {
    animation: fade-in-right 1s ease-in-out;
}




h1, h2, p {
    font-family: 'URW DIN Std Regular', sans-serif;
}


/* section 4 */
/* Pastikan overlay awal benar-benar transparan */
.group .absolute {
    background-color: transparent; /* Tidak ada warna sebelum hover */
    transition: background-color 0.5s ease, opacity 0.5s ease;
}

.group:hover .absolute {
    background-color: #1e3a8a; /* Biru tua */
    background-opacity: 0.7;   /* Transparan biru tua */
}

/* Gambar dan hover scaling */
.group img {
    display: block;
    transition: transform 0.5s ease-in-out;
}

.group:hover img {
    transform: scale(1.1);
}

/* Teks animasi muncul */
.group .opacity-0 {
    opacity: 0;
}

.group:hover .opacity-0 {
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
}