     /* Styling tambahan (custom CSS) */
     * {
            font-family: 'Inter', sans-serif;
        }
           body{ background-color: #F1F5F9;
        }

        .text-size-sm {
            font-size: 0.95rem;
            line-height: 1.6;
        }

        .text-size-base {
            font-size: 1.1rem;
            line-height: 1.75;
        }

        .text-size-lg {
            font-size: 1.25rem;
            line-height: 1.85;
        }

        .propam-logo-glow {
            filter: drop-shadow(0px 0px 6px rgba(212, 175, 55, 0.6));
        }

        #mainPortalHeader {
            background-size: cover;
            background-position: center;
            transition: background-image 0.5s ease-in-out;
        }

        .hero-bg {
            background: linear-gradient(rgba(15, 23, 42, 0.85), rgba(15, 23, 42, 0.95)), url('https://images.unsplash.com/photo-1557804506-669a67965ba0?q=80&w=1200&auto=format&fit=crop');
            background-size: cover;
            background-position: center;
        }

        .propam-gradient {
            background: linear-gradient(135deg, #1e3a8a 0%, #0f172a 100%);
        }

        .accent-gold {
            color: #d4af37;
        }

        .bg-gold {
            background-color: #d4af37;
        }

/* Custom Animation Running Text (Marquee) */
@keyframes marquee {
  0% { transform: translateX(0%); }
  100% { transform: translateX(-100%); }
}

@keyframes marquee2 {
  0% { transform: translateX(100%); }
  100% { transform: translateX(0%); }
}

.animate-marquee {
  animation: marquee 25s linear infinite;
}

.animate-marquee2 {
  animation: marquee2 25s linear infinite;
}

/* Pause animasi saat kursor diarahkan ke teks (agar mudah dibaca) */
.animate-marquee:hover,
.animate-marquee2:hover {
  animation-play-state: paused;
}

/* Pause animasi saat kursor diarahkan ke teks (agar mudah dibaca) */
.animate-marquee:hover,
.animate-marquee2:hover {
  animation-play-state: paused;
}



        /* Pengaturan Animasi */
        @keyframes marquee-left {
            0% {
                transform: translateX(100vw);
                /* Mulai dari luar layar sebelah kanan */
            }

            100% {
                transform: translateX(-100%);
                /* Menghilang ke luar layar sebelah kiri */
            }
        }

        <!-- Tombol Back to Top pana ke atas (Durasi muncul lebih lama/halus) -->
        html {
  scroll-behavior: smooth;
        }