body { 
    font-family: 'Plus Jakarta Sans', sans-serif; 
}

.islamic-pattern {
    background-color: #064e3b;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M54.627 0l.83.83-29.29 29.29-.828-.828L54.627 0zm-16.17 0l2.486 2.485-26.805 26.805-2.485-2.485L38.457 0zm-16.17 0l4.14 4.142-24.32 24.32-4.14-4.14L22.288 0zm-16.17 0l5.798 5.798-21.835 21.835-5.798-5.797L6.118 0zM0 10.97l12.426 12.427-1.657 1.657L0 14.285v-3.315zm0 16.172l14.084 14.083-3.314 3.314L0 33.77v-6.628zm0 16.17l15.74 15.74-4.97 4.97L0 53.284V43.312zm60-32.342l-12.426 12.427 1.657 1.657L60 14.285v-3.315zm0 16.17l-14.084 14.084 3.314 3.313L60 33.77v-6.628zm0 16.172l-15.74 15.74 4.97 4.97L60 53.284V43.314zM29.284 60l-.828-.828 29.29-29.29.828.828L29.284 60zm-16.17 0l-2.485-2.485 26.805-26.805 2.485 2.485L13.114 60zm-16.17 0l-4.14-4.14 24.32-24.32 4.14 4.14L-3.056 60zm-16.17 0l-5.798-5.798 21.835-21.835 5.798 5.798L-19.226 60z' fill='%2310b981' fill-opacity='0.1' fill-rule='evenodd'/%3E%3C/svg%3E");
}

.fade-up { 
    animation: fadeUp 1s ease-out forwards; 
}

@keyframes fadeUp { 
    from { opacity: 0; transform: translateY(20px); } 
    to { opacity: 1; transform: translateY(0); } 
}

/* ==========================================
   Efek Scroll Vertikal Jadwal
========================================== */
.scroll-vertical-content {
    animation: scrollY 15s linear infinite;
}

/* Berhenti scroll saat kursor diletakkan di atas kotak */
#jadwal-scroll-container:hover .scroll-vertical-content {
    animation-play-state: paused;
}

@keyframes scrollY {
    0% { transform: translateY(0); }
    100% { transform: translateY(-50%); } 
}

/* ==========================================
   Efek Scroll Vertikal (Diperlambat)
========================================== */
.scroll-vertical-content {
    /* Ubah angka 35s untuk mengatur kecepatan. 
       Semakin besar angkanya (misal 50s), semakin lambat geraknya. */
    animation: scrollY 90s linear infinite;
}

/* Berhenti scroll saat kursor diletakkan di atas kotak mana saja yang memiliki class 'group' */
.group:hover .scroll-vertical-content {
    animation-play-state: paused;
}

@keyframes scrollY {
    0% { transform: translateY(0); }
    100% { transform: translateY(-50%); } 
}