body {
                margin: 0;
                font-family: Arial, sans-serif;
                color: #222;
            }

            /* Tambahkan ini di bagian CSS Anda */
            .logo {
                text-decoration: none;
                /* Menghilangkan garis bawah */
                color: #222;
                /* Memastikan warna teks tetap hitam */
                font-weight: 600;
                /* Mempertahankan ketebalan font */
                font-size: 1.2em;
                /* Anda mungkin ingin mengatur ukuran font agar menonjol */
            }

            header {
                position: fixed;
                top: 0;
                width: 100%;
                background: #ffffffee;
                backdrop-filter: blur(6px);
                /* padding: 16px 32px; */
                /* display: flex; */
                /* justify-content: space-between; */
                /* align-items: center; */
                border-bottom: 1px solid #eee;
            }

            .header-container {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 16px 32px;
                /* Padding diterapkan di sini */
                max-width: 1100px;
                /* Batasi lebar maksimal agar tidak terlalu lebar di layar desktop besar */
                margin: auto;
                /* Pusatkan container */
                width: 100%;
                /* Pastikan lebarnya 100% dari parent header */
                box-sizing: border-box;
                /* Penting untuk padding agar tidak melebihi width */
            }

            nav {
                display: flex;
                flex-wrap: wrap;
                /* Izinkan wrap pada layar kecil */
                gap: 16px;
                justify-content: flex-end;
                /* Ratakan ke kanan */
            }

            /* nav {
                display: flex;
                flex-wrap: wrap;
                gap: 16px;
            } */

            nav a {
                text-decoration: none;
                color: #222;
                font-weight: 600;
            }

            section {
                padding: 100px 32px 80px;
                max-width: 1100px;
                margin: auto;
            }

            #home {
                height: 80vh;
                display: flex;
                flex-direction: column;
                justify-content: center;
                color: #fff;
                background:
                    /* linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), */
                    linear-gradient(to bottom,
                            rgba(0, 0, 0, 0.01) 0%,
                            /* Bagian atas: Agak terang (20% Opacity) */
                            rgba(0, 0, 0, 0.6) 50%,
                            /* Bagian tengah: Paling gelap (70% Opacity), tepat di 50% ketinggian */
                            rgba(0, 0, 0, 0.01) 100%
                            /* Bagian bawah: Kembali agak terang (20% Opacity) */
                        ),
                    url('../images/hero.jpg') center/cover no-repeat;
                /* Properti opsional ini bisa dihapus jika warna sudah ditentukan di gradient */
                /* color: #fff; */
                /* opsional jika background gelap */
            }

            .pesan1 {
                font-family: Arial, Helvetica, sans-serif;
                color: aliceblue;
                text-align: center;
            }

            .pesan2 {
                padding-top: 100px;
                padding-bottom: 0px;
                text-align: center;
            }

            #home h1,
            #home h2,
            #home p {
                text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
                /* Bayangan hitam yang kuat */
            }

            .btn-konsul {
                text-align: center;
                /* background-color: #222222; */
                background-color: #ffffff !important;
                color: #222 !important;
                text-decoration: none !important;
            }

            .btn-konsul:hover {
                background-color: deepskyblue !important;
                color: mediumblue;
                text-decoration: underline !important;
            }

            .btn {
                padding: 12px 24px;
                background: #222;
                color: #fff;
                text-decoration: none;
                border-radius: 6px;
                display: inline-block;
                margin-top: 20px;
            }

            .grid {
                display: grid;
                gap: 24px;
            }

            .grid-3 {
                grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
            }

            .card {
                padding: 24px;
                border: 1px solid #eee;
                border-radius: 8px;
                background: #fafafa;
            }

            .portfolio-img {
                width: 100%;
                border-radius: 8px;
            }

            footer {
                padding: 40px 32px;
                text-align: center;
                background: #f5f5f5;
                margin-top: 60px;
            }

            /* Media Query untuk Ponsel/Layar Kecil */
            @media (max-width: 768px) {
                .header-container {
                    padding: 12px 16px;
                    /* Kurangi padding horizontal di layar kecil */
                }

                /* Izinkan navigasi untuk pindah ke baris baru */
                nav {
                    /* flex-wrap: wrap;  */
                    justify-content: flex-start;
                    /* Ratakan ke kiri di layar kecil jika wrap */
                }
            }