#banner .title {
    color: #ffffff;
    font-size: 5em;
    font-family: "Military", sans-serif;
    font-weight: bold;
    position: relative;
    text-align: center;
    position: absolute;
    /* Menggunakan absolute agar tidak terpengaruh perubahan lain */
    top: 0%;
    /* Menjaga elemen di tengah secara vertikal */
    left: 50%;
    /* Menjaga elemen di tengah secara horizontal */
    transform: translate(-50%, -50%);
    /* Menyesuaikan posisi agar elemen tepat di tengah */
    text-align: center;
    margin-top: 100px;
    width: 100%;
    /* Menghapus margin-top untuk menghindari pergeseran */
}

.shadow-title-ipp {
    position: relative;
    top: 290px;

}

.shadow-title-ipp::before {
    content: "";
    display: block;
    background: url('img/logo-rama.png') no-repeat center center;
    background-size: contain;
    opacity: 0.5;
    /* Adjust the opacity to create a shadow effect */
    /* filter: blur(5px); */
    /* Adjust the blur to create a shadow effect */
    position: absolute;
    /* Adjust this value to move the shadow upwards */
    width: 100%;
    height: 30%;
    margin-top: -100px;
    /* margin-left: 700px; */
    z-index: -1;
    /* Ensure the shadow is behind the content */
}


@media (max-width: 768px) {
    .shadow-title-ipp {
        /* margin-top: -50px; */
        font-size: 1.5rem;
        /* top: -100px; */
        height: 170px;
        /* opsional, pastikan judul tidak kepanjangan */
    }

    .shadow-title-ipp::before {
        top: -60px;
        height: 190px;
        background-size: 80%;
        /* bisa contain atau cover juga */
        filter: blur(3px);
        /* kurangi efek di layar kecil */
    }
}