body {
            overflow-x: hidden; /* Prevent horizontal scrolling */
        }

        /* Default brand image size LARGE */
        .navbar-brand img {
            width: 270px;
            height: auto;
        }

        /* .navbar {
            background: linear-gradient(135deg, #fffdfd, #dddddd, #b8b8b8);
            box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4), 0px 7px 13px -3px rgba(0, 0, 0, 0.3), inset 0px -3px 0px rgba(0, 0, 0, 0.2);
        } */

        .navbar {
        background: linear-gradient(135deg, #fffdfd, #dddddd, #b8b8b8);
        box-shadow: 0 2px 1px rgba(0,0,0,0.09), 0 4px 2px rgba(0,0,0,0.09), 0 8px 4px rgba(0,0,0,0.09), 0 16px 8px rgba(0,0,0,0.09), 0 32px 16px rgba(0,0,0,0.09),  
            0 5px 10px rgba(0, 151, 178, 0.5),
            0 10px 20px rgba(0, 151, 178, 0.4),
            0 15px 30px rgba(0, 151, 178, 0.3),
            0 20px 40px rgba(0, 151, 178, 0.2);
        z-index: 10000;
        }



        @media (max-width: 1536px) {
            .navbar-brand img {
                width: 250px;
                height: auto; 
            }
        }

        @media (max-width: 576px) {
            .navbar-brand img {
                width: 148px;
                height: auto;
            }
        }

        .navbar-toggler.toggler-transparent {
            border: none;
            background: transparent;
            padding: 5px;
        }

        .navbar-toggler.toggler-transparent:focus {
            outline: #ffffff;
            box-shadow: none;
        }

        #daftar {
            border-radius: 8px;
            box-shadow: rgba(14, 63, 126, 0.04) 0px 0px 0px 1px, rgba(42, 51, 69, 0.04) 0px 1px 1px -0.5px, rgba(42, 51, 70, 0.04) 0px 3px 3px -1.5px, rgba(42, 51, 70, 0.04) 0px 6px 6px -3px, rgba(14, 63, 126, 0.04) 0px 12px 12px -6px, rgba(14, 63, 126, 0.04) 0px 24px 24px -12px;
            color: #ffffff;
            border: none;
            padding: 10px 11px;
            margin-top: 13px;
            margin-bottom: 13px;
            font-size: 12px;
            transition: all 0.3s ease;
            background: #0097b2;
        }

        #daftar:hover {
            background: #ffffff;
            box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
            color: #000;
        }

        #search-btn {
            background: transparent; /* Mengubah background menjadi transparan */
            border-radius: 8px;
            color: #0097b2;
            border: none;
            padding: 0px 5px;
            margin-top: 13px;
            margin-bottom: 13px;
            font-size: 26px;
            transition: all 0.3s ease;
            margin-right: 10px; /* Geser sedikit ke kiri */
        }

        #search-btn:hover {
            background: transparent; /* Tetap transparan saat di-hover */
            color: #000;
        }

        /* Menyembunyikan tombol pada ukuran layar laptop dan tablet */
        @media (min-width: 768px) {
            .d-md-none {
                display: none;
            }
        }

        /* Menyesuaikan warna tombol Signup1 dan Login1 */
        .btn-custom {
            background-color: #0097b2;
            color: #fff;
            border: none;
            border-radius: 8px;
            padding: 10px 20px;
            font-size: 14px;
        }

        .btn-custom:hover {
            background-color: #007a8d; /* Warna lebih gelap saat di-hover */
            color: #fff;
            text-decoration: none;
        }

        /* Menyesuaikan tombol Signup1 dan Login1 pada layar kecil */
        @media (max-width: 767px) {
            #signup1 {
                width: 300px;
                margin: 0 auto; /* Center align */
                margin-bottom: 120%; 
                /* panjang toggler ke bawah */
            }
        }

        /* Menambahkan background hitam pada item navigasi saat menu diaktifkan */
        .navbar-collapse.show .nav-item .nav-link {
            background: linear-gradient(135deg, #fffdfd, #dddddd);
            color: white; /* Atur warna teks sesuai kebutuhan */
            border-bottom: 1px solid #444; /* Garis pemisah antar item navigasi */
            text-shadow: 2px 1px 4px #000;
            border-radius: 4px;
        }

        .navbar-collapse.show .nav-item .nav-link:hover {
            background: linear-gradient(135deg, #fffdfd, #dddddd, #b8b8b8);
            color: white; /* Atur warna teks sesuai kebutuhan */
            border-bottom: 1px solid #444; /* Garis pemisah antar item navigasi */
            text-shadow: 2px 1px 4px #000;
            border-radius: 4px;
        }

        .navbar-nav .nav-item:last-child .nav-link {
            border-bottom: none; /* Menghapus garis pemisah di bawah item terakhir */
        }

        /* Mengatur margin pada item navigasi untuk menyesuaikan dengan garis pemisah */
        .navbar-nav .nav-item .nav-link {
            padding: 8px 10px; /* Menambahkan padding lebih kecil */
        }

        /* Menyesuaikan jarak antar item navigasi pada ukuran layar laptop */
        @media (min-width: 992px) {
            .navbar-nav .nav-item {
                margin-right: 1px; /* Jarak antar item lebih rapat */
                z-index: 10000;
            }
            
            .nav-link {
                color: #007a8d;
                border-radius: 10px;
                font-size: 18px;
                margin-top: 5px;
                margin-bottom: 5px;
            }
            .nav-link:hover {
                background: linear-gradient(135deg, #fffdfd, #dddddd, #d8d8d8);
                box-shadow: 0px -25px 20px -20px rgba(0, 0, 0, 0.45), -25px 0 20px -20px rgba(0, 0, 0, 0.45);
                border-radius: 10px;
                color: #0097b2;


            }

            .search-formlaptop {
            max-width: 300px;
            display: flex;
            align-items: center;
            margin-right: 20px;
            }

            .search-formlaptop input {
                border-radius: 8px 0 0 8px;
                padding: 8px;
                border: 1px solid #0097b2;
                outline: none;
                width: 100%;
            }

            .search-formlaptop button {
                border-radius: 0 8px 8px 0;
                background-color: #0097b2;
                border: 1px solid #0097b2;
                color: white;
                padding: 8px 12px;
                cursor: pointer;
            }
        }










input.fade-out-placeholder::placeholder {
            animation: fadeOutLeft 0.5s forwards ease-in-out;
        }

        @keyframes fadeOutLeft {
            0% {
                opacity: 1;
                transform: translateX(0);
            }
            50% {
                opacity: 0.5;
                transform: translateX(-10px);
            }
            100% {
                opacity: 0;
                transform: translateX(-30px);
            }
        }