.hero-bg {
            background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url('/images/IMG_1472.png');
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
        }

        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }

        .teal-btn {
            background: linear-gradient(135deg, #74D6A3, #6DB3C4);
        }

        .teal-btn:hover {
            background: linear-gradient(135deg, #5BC18B, #5AA0B0);
        }

        .custom-beige {
            background-color: #F0E6D2;
        }

        .custom-green {
            background-color: #90C695;
        }

        .custom-teal {
            background-color: #74D6A3;
        }

        .custom-blue {
            background-color: #6DB3C4;
        }

        .text-custom-green {
            color: #90C695;
        }

        .text-custom-teal {
            color: #74D6A3;
        }

        .text-custom-blue {
            color: #6DB3C4;
        }

        /* Menambahkan transisi halus ke header dan link */
#main-nav, #main-nav .logo-text, #main-nav .nav-links a {
    transition: all 0.3s ease-in-out;
}

/* Style untuk header SETELAH di-scroll */
/* Ganti CSS lama Anda dengan yang ini */
#main-nav.scrolled {
    /* Gradien halus untuk efek kilap dari atas ke bawah */
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.6) 100%);
    
    /* Efek kaca buram (glassmorphism) yang ditingkatkan */
    backdrop-filter: blur(14px) saturate(120%);
    
    /* Bayangan untuk memberikan efek 3D dan highlight di bagian atas */
    box-shadow: 
        inset 0 1.5px 1px rgba(255, 255, 255, 0.7), /* Highlight atas lebih tegas */
        0 8px 16px rgba(0, 0, 0, 0.15); /* Bayangan bawah lebih menyebar */

    /* Garis batas bawah yang tipis untuk definisi */


    /* Transisi tetap diperlukan untuk kehalusan */
    transition: all 0.3s ease-in-out;
}
/* Mengubah warna teks logo dan link menjadi gelap saat di-scroll */
/* (Pastikan ini tetap terlihat kontras dengan hero section Anda) */
#main-nav.scrolled .logo-text {
    color: #1f2937; /* Warna abu-abu gelap */
}

#main-nav.scrolled .nav-links a {
    color: #374151; /* Warna abu-abu sedikit lebih terang */
}

#main-nav.scrolled .nav-links a:hover {
    color: #74D6A3; /* Warna custom-teal Anda */
}


/* tentangkami.html */
/* =============================================== */
/* Hero Section "Tentang Kami" - Efek Animasi      */
/* =============================================== */

/* Keyframes untuk animasi gradien bergerak */
@keyframes animatedGradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* Kelas untuk menerapkan latar belakang gradien animasi */
.animated-gradient-bg {
    /* Menggunakan warna-warna dari palet Anda */
    background: linear-gradient(-45deg, #90C695, #74D6A3, #6DB3C4, #5BC18B);
    background-size: 400% 400%; /* Membuat gradien lebih besar agar bisa digerakkan */
    animation: animatedGradient 15s ease infinite; /* Menerapkan animasi */
}

/* Keyframes untuk animasi teks muncul dari bawah */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Kelas untuk menerapkan animasi pada judul */
.animate-title {
    animation: fadeInUp 0.8s ease-out forwards;
}

/* Kelas untuk menerapkan animasi pada sub-judul dengan sedikit jeda */
.animate-subtitle {
    animation: fadeInUp 1s ease-out 0.3s forwards; /* 0.3s adalah jeda (delay) */
    opacity: 0; /* Sembunyikan pada awalnya agar animasi terlihat */
}

/* =============================================== */
/* Navigasi - Indikator Halaman Aktif              */
/* =============================================== */

/* Gaya dasar untuk link navigasi agar transisi mulus */
.nav-links a {
    padding-bottom: 6px;
    border-bottom: 2px solid transparent; /* Garis bawah transparan pada awalnya */
    transition: all 0.3s ease;
}

/* Gaya saat link di-hover (sudah ada, tapi disempurnakan) */
.nav-links a:hover {
    color: #74D6A3; /* custom-teal */
    border-bottom-color: #74D6A3; /* Tampilkan garis bawah saat hover */
}

/* GAYA UNTUK LINK YANG AKTIF */
/* Ini akan mengubah warna dan garis bawah link jika class-nya berada di dalam body dengan ID yang sesuai */
/* Gaya untuk link yang sedang aktif, akan ditambahkan oleh JavaScript */
.nav-links a.nav-active {
    color: #5BC18B; /* Warna custom-green atau teal */
    font-weight: 600; /* Sedikit lebih tebal (semi-bold) */
    border-bottom-color: #5BC18B; /* Garis bawah solid untuk penanda */
}

/* kegiatan.html */
.team-member-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.team-member-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}