/* ---------------------------------------------------
         * GLOBAL & BACKGROUND SETTINGS
         * --------------------------------------------------- */
        body, html {
            height: 100%;
            margin: 0;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            color: #1f2937;
        }
        
        .bg-custom-container {
            /* Menambahkan '../' untuk keluar dari folder css/ terlebih dahulu */
            background-image: url('../image/background_basis.jpeg');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            background-attachment: fixed;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        /* Layer overlay transparan untuk menjaga keterbacaan teks */
        .bg-overlay {
            background: rgba(255, 255, 255, 0.35);
            backdrop-filter: blur(2px);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }

        /* ---------------------------------------------------
         * NAVBAR / HEADER
         * --------------------------------------------------- */
        .navbar-custom {
            background: rgba(255, 255, 255, 0.88);
            box-shadow: 0 4px 15px rgba(15, 76, 129, 0.1);
            backdrop-filter: blur(10px);
        }

        .navbar-brand span {
            color: #0f4c81;
            font-weight: 800;
            letter-spacing: 0.5px;
        }

        /* ---------------------------------------------------
         * HERO & CONTENT CARDS
         * --------------------------------------------------- */
        .hero-title {
            color: #0f4c81;
            font-weight: 800;
            font-size: 2.5rem;
        }

        .hero-subtitle {
            font-size: 1.2rem;
            color: #334155;
        }

        /* Card transparan dengan efek glassmorphism */
        .glass-card {
            background: rgba(255, 255, 255, 0.85);
            border: 1px solid rgba(255, 255, 255, 0.7);
            border-radius: 16px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .glass-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 35px rgba(15, 76, 129, 0.15);
        }

        .service-icon {
            width: 60px;
            height: 60px;
            background: linear-gradient(135deg, #0f4c81, #38bdf8);
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            margin: 0 auto 15px;
        }

        /* ---------------------------------------------------
         * RESPONSIVE ADJUSTMENTS
         * --------------------------------------------------- */
        @media (max-width: 768px) {
            .hero-title {
                font-size: 1.8rem;
            }
            .hero-subtitle {
                font-size: 1rem;
            }
            .bg-custom-container {
                background-attachment: scroll; /* Mengoptimalkan performa di layar ponsel */
            }
        }