* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    width: 100%;
    height: 100%;
}

.top-bar {
    background-color: #f8f9fa;
    padding: 10px 15px;
    text-align: center;
    font-size: 0.9rem;
    color: #6c757d;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 20;
}

.search-bar {
    flex-grow: 1;
    margin-right: 15px;
}

.daftar-link {
    background-color: #FCCD2A;
    color: black;
    padding: 0 20px; /* Jarak kiri dan kanan dari teks */
    text-decoration: none;
    font-weight: bold;
    height: 100%;
    display: flex;
    align-items: center; /* Menyelaraskan teks di tengah secara vertikal */
    justify-content: center; /* Menyelaraskan teks di tengah secara horizontal */
    width: 150px; /* Sesuaikan lebar sesuai kebutuhan */
}

.auth-links {
    display: flex;
    flex-grow: 1; /* Memungkinkan item di dalamnya merenggang jika diperlukan */
    justify-content: flex-end;
    align-items: center;
}

/* Styling untuk Link Login */
.auth-links .login-link {
    color: #007bff;
    font-weight: 500;
    padding: 5px 16px;
    border: 2px solid transparent;
    border-radius: 5px;
    transition: background-color 0.3s, border-color 0.3s;
}

.auth-links .login-link:hover {
    background-color: #007bff;
    color: white;
    border-color: #007bff;
}

/* Styling untuk link Daftar */
.auth-links a {
    margin-left: 10px;
}

/* Styling Navbar dan Mega Menu */
.navbar {
    background: transparent;
    /* background-color: #1b43e4; */
    height: 8vh;
    position: relative; /* Navbar dalam posisi normal */
    z-index: 10; /* Supaya navbar tetap di atas konten */
    transition: all 0.35s ease; /* Smooth transition saat berubah menjadi sticky */
    width: 100%;
}

.navbar-brand{
    font-size: 1.5rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.nav-link.active {
    background-color: #0d6efd; /* Warna latar belakang biru (sesuaikan dengan tema Anda) */
    color: white !important;   /* Warna teks putih */
    font-weight: 600;          /* Lebih tebal */
    border-radius: 5px;        /* Sudut sedikit membulat */
    padding: 8px 16px;         /* Spasi dalam */
    transition: background-color 0.3s ease;
}

/* jika PERLU SAJA
.nav-link:hover {
    background-color: #e9ecef; 
    color: #000;
    border-radius: 5px;
} */


.nav-link-login{
    color: white ;
    font-size: 1.1rem;
    text-shadow: .5px .5px 1px rgba(0, 0, 0, 0.7);
    padding-top: 5px !important;
    padding-left: 20px !important;
}
.nav-link{
    color: rgb(255, 255, 255) !important ;
    font-size: 1.1rem;
    text-shadow: .5px .5px 1px rgba(0, 0, 0, 0.7);
}

@media (max-width: 768px) {
    /* Styling untuk burger menu khusus tampilan mobile */
    .navbar-collapse {
        background-color: #ffffff; /* Latar belakang solid */
        opacity: 1; /* Pastikan tidak transparan */
        z-index: 1050; /* Pastikan elemen berada di atas elemen lainnya */
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Tambahkan bayangan */
    }

    .navbar-nav .nav-link-login {
        padding: 10px 15px;
        color: #000 !important; /* Warna teks hitam */
    }
    .navbar-nav .nav-link {
        padding: 10px 15px;
        color: #000 !important; /* Warna teks hitam */
    }

    .navbar-nav .nav-link-login:hover {
        background-color: #f1f1f1; /* Warna latar belakang saat hover */
        color: #007bff; /* Warna teks saat hover */
    }
    .navbar-nav .nav-link:hover {
        background-color: #f1f1f1; /* Warna latar belakang saat hover */
        color: #007bff; /* Warna teks saat hover */
    }

    /* Dropdown khusus (jika ada sub-menu di dalamnya) */
    .dropdown-menu {
        background-color: #ffffff; /* Pastikan sub-menu juga tidak transparan */
        border: 1px solid #ddd;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Tambahkan bayangan */
    }
}

.gbr-container img {
    width: 50%;
    border: 1px solid #007bff;
    border-radius: 8px;
}

.sticky {
    background-color: #1b43e4;
    position: fixed; /* Mengubah navbar menjadi sticky */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999; /* Agar tetap berada di atas */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); /* Tambahkan bayangan untuk efek visual */
}

.mega-menu-container {
    width: 100%; /* Mega-menu selebar viewport */
    position: absolute; /* Default position */
    top: 145px;
    left: 0;
    right: 0;
    background-color: #f5f5f5;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
    padding: 20px 10vw;
    border-top: 1px solid #ddd;
    border-bottom: 5px solid #FCCD2A;
    z-index: 1000;

    /* Tambahan untuk memusatkan konten */
    display: flex;
    justify-content: center; /* Memusatkan secara horizontal */
    align-items: center; /* Memusatkan secara vertikal */
}

.navbar.sticky ~ .mega-menu-container {
    position: fixed; /* Menjadikan posisi fixed saat navbar sticky */
    top: 76px; /* Letakkan tepat di bawah navbar sticky */
    left: 0;
    right: 0;
    z-index: 1000;
}

.mega-menu-container.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.mega-menu-container .kotak {
    margin-bottom: 15px;
    padding: 5px 20px;
    border-radius: 10px;
    position: relative;
    overflow: hidden; /* Menyembunyikan bagian border yang melampaui kotak */
    background-color: #f5f5f5;
    transition: transform 0.3s ease; /* Tambahkan transisi di sini */
}


/* Pseudo-elemen yang akan digunakan untuk animasi border */
.mega-menu-container .kotak::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 2px solid transparent; /* Border transparan yang akan menjadi animasi */
    border-radius: 10px;
    pointer-events: none; /* Pastikan pseudo-elemen tidak menghalangi interaksi dengan elemen lain */
    box-sizing: border-box; /* Agar border terhitung dalam ukuran elemen */
}

/* Animasi untuk border mengelilingi kotak */
@keyframes border-animate {
    0% {
        border-top: 2.5px solid #FFF4B7;
        border-right: 2.5px solid transparent;
        border-bottom: 2.5px solid transparent;
        border-left: 2.5px solid transparent;
    }
    10% {
        border-top: 2.5px solid #FFF4B7;
        border-right: 2.5px solid transparent;
        border-bottom: 2.5px solid transparent;
        border-left: 2.5px solid transparent;
    }
    20% {
        border-top: 2.5px solid #FFF4B7;
        border-right: 2.5px solid transparent;
        border-bottom: 2.5px solid transparent;
        border-left: 2.5px solid transparent;
    }
    30% {
        border-top: 2.5px solid #FFF4B7;
        border-right: 2.5px solid #FFF4B7;
        border-bottom: 2.5px solid transparent;
        border-left: 2.5px solid transparent;
    }
    40% {
        border-top: 2.5px solid #FFF4B7;
        border-right: 2.5px solid #FFF4B7;
        border-bottom: 2.5px solid transparent;
        border-left: 2.5px solid transparent;
    }
    50% {
        border-top: 2.5px solid #FFF4B7;
        border-right: 2.5px solid #FFF4B7;
        border-bottom: 2.5px solid transparent;
        border-left: 2.5px solid transparent;
    }
    60% {
        border-top: 2.5px solid #FFF4B7;
        border-right: 2.5px solid #FFF4B7;
        border-bottom: 2.5px solid #FFF4B7;
        border-left: 2.5px solid transparent;
    }
    70% {
        border-top: 2.5px solid #FFF4B7;
        border-right: 2.5px solid #FFF4B7;
        border-bottom: 2.5px solid #FFF4B7;
        border-left: 2.5px solid transparent;
    }
    80% {
        border-top: 2.5px solid #FFF4B7;
        border-right: 2.5px solid #FFF4B7;
        border-bottom: 2.5px solid #FFF4B7;
        border-left: 2.5px solid transparent;
    }
    90% {
        border-top: 2.5px solid #FFF4B7;
        border-right: 2.5px solid #FFF4B7;
        border-bottom: 2.5px solid #FFF4B7;
        border-left: 2.5px solid #FFF4B7;
    }
    100% {
        border-top: 2.5px solid #FFF4B7;
        border-right: 2.5px solid #FFF4B7;
        border-bottom: 2.5px solid #FFF4B7;
        border-left: 2.5px solid #FFF4B7;
    }
}

/* Saat link di-hover, kotak akan membesar */
.mega-menu-container .mega-column a:hover + .kotak {
    transform: scale(1.03); /* Membesarkan ukuran kotak */
    transition: transform 0.3s ease; /* Transisi yang halus */
}


/* Memberikan border yang akan muncul pada kotak saat hover */
.mega-menu-container .mega-column a:hover + .kotak::before {
    animation: border-animate .5s ease-in-out forwards; /* Lebih halus dan lebih cepat */
}

/* Efek hover pada link untuk memberikan border di dalam kotak */
/* .mega-menu-container .mega-column a:hover + .kotak {
    border: 2px solid #FFF4B7 !important;
} */


/* Ensure mega-menu only shows on large screens */
@media (max-width: 992px) {
    .mega-menu-container {
        display: none;
    }
}


.mega-column {
    flex: 1; /* Membuat kolom-kolom berbagi lebar yang sama */
    padding: 20px;
    width: 80vh;
    font-size: .8rem;
}


.mega-column a {
    text-decoration: none;
    color: #2f3238;
    font-size: 1.07rem;
    font-weight: 500;
}
.mega-column a:hover {
    /* text-decoration: underline; */
    color: #0d6efd;
    font-weight: 600;
}


.search-bar {
    max-width: 600px;
    margin-left: auto;
}

.hero-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: inherit;
    filter: brightness(0.7); /* Brightness only affects background */
    z-index: 2;
    pointer-events: none;
}

.hero-section h1, .hero-section button {
    position: relative;
    z-index: 3; /* Text remains above the background */
}

.hero-section h1 {
    color: white; /* Tetap putih */
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7); /* Tambahkan bayangan teks */
    position: relative;
    z-index: 3; /* Tetap di atas vignette */
}

/* overlay */
    .consent-checkbox {
        display: flex;
        align-items: center;
    }

    .consent-checkbox input {
        margin-left: 10px;
        margin-right: 10px;
    }

    .overlay .card .button-group {
        display: flex;
        justify-content: flex-end; /* Tombol di sisi kanan */
        gap: 10px; /* Beri jarak antara tombol */
        margin-top: 15px;
    }

    .overlay .card .btn-agree,
    .overlay .card .btn-cancel {
        display: inline-block;
        max-width: 150px; /* Batasi ukuran tombol */
        padding: 8px 15px;
        font-size: 14px;
        font-weight: bold;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        text-align: center;
        transition: 0.3s;
    }

    /* Tombol "Setuju" */
    .overlay .card .btn-agree {
        background: #007bff;
        color: white;
    }

    .overlay .card .btn-agree:hover {
        background: #0056b3;
    }

    /* Tombol "Batal" */
    .overlay .card .btn-cancel {
        background: #6c757d; /* Warna abu-abu */
        color: white;
    }

    .overlay .card .btn-cancel:hover {
        background: #5a6268;
    }

    .overlay .card .btn-agree:hover {
        background: #0056b3;
    }

/* end overlay */

.btn-kustom {
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-style: normal;
    background-color: #ff5722; /* Warna oranye kustom */
    color: white; /* Warna teks */
    padding: 15px 30px; /* Ukuran tombol (lebar dan tinggi) */
    font-size: 1.5rem; /* Ukuran teks */
    border: none; /* Menghilangkan border */
    border-radius: 8px; /* Membuat sudut tombol lebih bulat */
    bottom: -8vh; 
}
.btn-kustom:hover {
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-style: normal;
    color: white;
    background-color: #b33611; /* Warna saat hover */
}

/* Bagian Body */
.content-section-slider {
    padding: 20px 0 50px 0;
}
.content-section-slider h3 {
    text-align: center;
}

.main-container {
    position: relative;
    background: linear-gradient(to right, #f5f7fa, #e6ecf9, #f5f7fa); /* gradasi lembut */
    /* padding: 40px 0; */
}

/* Kalau mau pakai pola tipis di background */



.content-section {
    /* padding-top: calc(0vh + 20px);  */
    margin-top: -50px;
}

.content-section h2, img {
    text-align: center;
}

.content-section .col-md-4 {
    padding: 20px 10px;
}
.content-section .col-md-4:hover {
    padding: 20px 8px;
}
.content-section .col-md-6 {
    padding: 20px 10px;
}
.content-section .col-md-6:hover {
    padding: 20px 8px;
}
.content-section h3 {
    text-align: center;
    margin-bottom: 20px;
}

.container-hire {
    margin-top: 0px;
    margin-top: 80px;
    /* margin-bottom: 80px; */
    min-height: 60vh;
    height: auto;
    /* background: linear-gradient(to top, #4f1964 20%, #191e64 90%); */
    background: linear-gradient(135deg, #1E3A8A, #6A0DAD);
    display: flex;
    flex-direction: column; /* Tampilkan konten secara vertikal */
    justify-content: center;
    align-items: center;
    padding: 10px;
    text-align: center;
    color: #fff;
}

/* Hanya untuk .row langsung di dalam .container-hire, bukan di dalam .lamaran */
.container-hire > .row {
    width: 70%;
}

.container-hire h1 {
  color: #FFD700; /* Judul pakai kuning biar mencolok */
}


.container-hire img {
    width: 80%;
    margin-left: 10%;
}

.swal2-container {
    z-index: 2000 !important;
}


@media (max-width: 768px) {
    .container-hire {
        width: 100%;
        margin-bottom: 0px;
        margin-top: 0px;
        min-height: auto;
        padding: 40px 20px;
        background: linear-gradient(135deg, #1E3A8A, #6A0DAD);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        color: #fff;
    }

    .container-hire {
        font-size: 1rem;
    }

    .lamaran {
        width: 100%;
    }
    .lamaran h1 {
        font-size: 1.6rem;
        margin-bottom: 20px;
    }

    .lamaran p {
        display: none; /* Sembunyikan paragraf deskripsi di mobile */
    }

    .container-hire > .row {
        width: 100%;
    }

    .lamaran .row {
        display: block; /* Atur ulang kolom menjadi vertikal */
    }
    .lamaran .col-md-6 h4 {
        font-size : 1.2rem;
    }

    .container-hire img {
        width: 40%;
        padding: 10px;
    }
}


/* Footer */
footer {
    margin-top: auto; /* Membuat footer tetap di bawah */
    background-color: #1b43e4;
    color: white;
    padding: 20px 0;
}
footer p {
    margin: 0;
}


/* gradasi gbr */
.image-with-gradient {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 5px;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 70%, rgba(0, 0, 0, 0)); /* Gradasi dari penuh ke transparan */
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 70%, rgba(0, 0, 0, 0)); /* Gradasi untuk browser berbasis WebKit */
}
.image-with-gradient-top {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: cover;
    mask-image: linear-gradient(to top, rgba(0, 0, 0, 1) 70%, rgba(0, 0, 0, 0)); /* Gradasi dari penuh ke transparan di bagian atas */
    -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 1) 70%, rgba(0, 0, 0, 0)); /* Gradasi untuk browser berbasis WebKit */
}

/* end gradasi gbr */

.overlay-icon-container {
    position: absolute;
    bottom: -15px;
    right: 5px;
    width: 30%; /* Atur ukuran container */
    height: 30%;
}

.overlay-icon {
    width: 100%; /* Ikon akan menyesuaikan dengan ukuran container */
    height: auto;
}



.animated-frame {
    position: relative;
    background-color: #F5F7F8;
    padding: 25px;
    border-radius: 10px;
    text-align: center;
    display: flex;
    flex-direction: column; /* Susun teks dan gambar secara vertikal */
    align-items: center; /* Tengahkan elemen secara horizontal */
    justify-content: center; /* Tengahkan elemen secara vertikal */
    transition: all 0.3s ease-in-out; /* Atur durasi & kelancaran animasi */
}

.text-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    background: rgba(142, 22, 22, 0.7); /* Transparan 70% */
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    align-items: center;
    justify-content: center;
    text-align: center;
    z-index: 3;
    width: 86%; /* Hindari terlalu lebar */
}

.text-link {
    font-size: 1.2rem;
    font-weight: bold;
    color: #ffffff;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-align: center;
}



.animated-frame:hover {
    box-shadow: 1px 8px 20px rgba(0, 0, 0, 0.25); /* Shadow lebih halus dan dalam */
    transform: translateY(-5px) scale(1.02); /* Sedikit naik + zoom kecil */
}

/* konten - tagline */
.content-persyaratan{
    padding-bottom: 120px ;
}

.content-persyaratan .row {
    height: 90vh;
    padding-top: 100px;
    display: flex;
    align-items: stretch; /* Membuat semua kolom mengisi penuh tinggi row */
}

@media (max-width: 1330px) {
    .content-persyaratan .row {
        height: 80vh;
        padding-top: 100px;
        display: flex;
    }
}

@media (max-width: 991px){
        .content-persyaratan .row {
        height: 100vh;
        padding-top: 100px;
        display: flex;
    }
}

.content-persyaratan .col-md-3 {
    height: 100%; /* Memastikan kolom mengisi penuh tinggi dari row */
    padding: 0 7px;
    position: relative;
}

.frame-konten {
    height: 100%; /* Mengisi penuh tinggi dari col-md-3 */
    width: 100%; /* Mengisi penuh lebar dari col-md-3 */
    display: flex;
    justify-content: center;
    overflow: hidden; /* Agar gambar tidak keluar dari frame */
}

.frame-konten img {
    width: 100%; /* Mengisi penuh lebar frame */
    height: 100%; /* Mengisi penuh tinggi frame */
    object-fit: fill; /* Memaksa gambar mengisi seluruh area, bisa jadi sedikit distorsi */
}

.frame-konten-luar:hover .ikon {
    transform: translateX(-50%) scale(1.2); /* Membesarkan ikon menjadi 120% dari ukuran asli */
    transition: transform 0.3s ease-in-out; /* Menambahkan efek transisi yang halus */
}

.ikon {
    position: absolute;
    top: -70px;
    left: 50%;
    transform: translateX(-50%);
    width: 40%;
    height: auto;
    z-index: 2;
    transition: transform 0.3s ease-in-out; /* Efek transisi yang halus untuk semua perubahan transform */
}


.text-overlay-tagline {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 20px;
    text-align: center;
    transition: background 0.3s ease;
    z-index: 1;
}

.text-overlay-tagline h3 {
    margin: 30px 0 20px 0;
    padding-top: 20px;
    font-weight: 700;
}

.text-overlay-tagline a {
    text-decoration: none;
    font-size: 1.2em;
}

.text-overlay-tagline ul {
    list-style: none;
    color: #758694;
    margin-top: 5%;
    padding: 0;
    font-size: 1.1em;
}

/* Media query untuk tampilan mobile (lebar layar di bawah 768px) */
@media (max-width: 768px) {
    .content-persyaratan{
        padding-bottom: 0px ;
    }

    .content-persyaratan .row {
        height: auto; /* Pastikan tinggi menyesuaikan konten di mobile */
        flex-direction: column; /* Mengatur kolom agar berurutan secara vertikal */
        padding-top: 0; /* Menghilangkan padding tambahan di atas */
    }

    .content-persyaratan .col-md-3 {
        height: auto; /* Mengatur tinggi kolom sesuai dengan isi pada tampilan mobile */
        margin-top: 40px; 
        margin-bottom: 100px;
    }

    .frame-konten {
        height: auto; /* Mengisi sesuai konten pada tampilan mobile */
    }

    .frame-konten img {
        height: 550px;
    }

    .text-overlay-tagline {
        height: auto; /* Mengatur tinggi overlay sesuai konten di dalamnya */
    }

    .ikon {
        width: 30%; /* Mengurangi ukuran ikon pada tampilan mobile */
        top: -80px; /* Sesuaikan posisi ikon agar tidak terlalu tinggi */
    }
}

/* END konten - tagline */


.img-wrapper {
    position: relative;
    display: inline-block;
}

.vignette-effect {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height:60vh;
    margin-top: 1rem!important; 
    margin-bottom: 3rem!important;
    border-radius: 20px; /* Sesuaikan dengan border-radius gambar */
    border: 5px solid #4F75FF;
    background: radial-gradient(circle, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.6) 100%);
    pointer-events: none; /* Agar elemen ini tidak mengganggu interaksi dengan gambar */
}

.text-overlay {
    position: absolute;
    width:100%;
    top: 20%; /* Mengatur posisi teks */
    left: 50%; /* Mengatur posisi teks */
    transform: translate(-50%, -50%); /* Memusatkan teks */
    color: white; /* Warna teks */
    font-size: 3rem; /* Ukuran teks */
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7); /* Efek bayangan pada teks */
}

/* <uniquifier>: Use a unique and descriptive class name
<weight>: Use a value from 200 to 800 */
.bayangan-text {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); 
}

.dosis-font {
    font-family: "Dosis", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
}

.inter-font {
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
  }


.pacifico-regular {
    font-family: "Pacifico", cursive;
    font-weight: 400;
    font-style: normal;
}

  

  .lato-thin {
    font-family: "Lato", sans-serif;
    font-weight: 100;
    font-style: normal;
  }
  
  .lato-light {
    font-family: "Lato", sans-serif;
    font-weight: 300;
    font-style: normal;
  }
  
  .lato-regular {
    font-family: "Lato", sans-serif;
    font-weight: 400;
    font-style: normal;
  }
  
  .lato-bold {
    font-family: "Lato", sans-serif;
    font-weight: 700;
    font-style: normal;
  }
  
  .lato-black {
    font-family: "Lato", sans-serif;
    font-weight: 900;
    font-style: normal;
  }
  
  .lato-thin-italic {
    font-family: "Lato", sans-serif;
    font-weight: 100;
    font-style: italic;
  }
  
  .lato-light-italic {
    font-family: "Lato", sans-serif;
    font-weight: 300;
    font-style: italic;
  }
  
  .lato-regular-italic {
    font-family: "Lato", sans-serif;
    font-weight: 400;
    font-style: italic;
  }
  
  .lato-bold-italic {
    font-family: "Lato", sans-serif;
    font-weight: 700;
    font-style: italic;
  }
  
  .lato-black-italic {
    font-family: "Lato", sans-serif;
    font-weight: 900;
    font-style: italic;
  }
  



.judul {
        font-size: 2rem;
    }

.content {
    /* Ubah margin-left sesuai keinginan, atau hapus jika tidak ingin ada jarak */
    margin-left: 0;
    padding: 20px;
}

 /* Custom styles for the layout */
 .sidebar {
    height: 50vh;
    padding-top: 20px;
    box-shadow: 4px 0 10px rgba(0, 0, 0, 0.2); /* Tambahkan bayangan di sisi kanan */
}


/* Tetap menggunakan styling lain seperti semula */
.sidebar a {
    text-decoration: none;
    padding: 10px;
    display: block;
}

/* Gaya khusus untuk link yang sedang dipilih */
.sidebar a.active-subpage,
.sidebar a:hover {
    font-weight: 600;
    color: #2f00ff;
    /* color: #2f00ff; */
}

/* Styling for buttons */
.sidebar-pelayanan .accordion-body {
    width: 100%;
    text-align: left;
}

/* Mengatur teks agar rata kiri */
.sidebar-pelayanan .btn-link {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Ratakan konten ke kiri */
    width: 100%;
    padding: 10px;
    font-size: 1.1em;
    text-decoration: none;
    color: #1b1b1b;
    transition: background-color 0.3s ease, border 0.3s ease;
    background-color: transparent; /* Hilangkan background-color */
    border: none; /* Hilangkan border */
    outline: none; /* Hilangkan outline */
}

.accordion-button:not(.collapsed) {
    background-color: transparent !important;
    box-shadow: none !important;
}

/* Garis horizontal untuk accordion yang terbuka */
.accordion-button:not(.collapsed) + .accordion-collapse {
    border-top: 1px solid #0078ff; /* Atur warna dan ketebalan garis sesuai keinginan */
    margin-top: 10px; /* Spasi di atas garis */
}

.accordion-button {
    border: none; /* Menghilangkan border default jika ada */
}

/* Menghilangkan ikon panah */
.sub-button::after {
    display: none; 
}

.accordion-button.sub-button div {
    color: #0078ff;
    transition: color 0.3s ease;
}

.accordion-button.sub-button:not(.collapsed) div {
    color: #8E1616 !important;
}

.accordion-button {
    width: 60%;
    padding: 0 20px;
}

.accordion-button div {
    color: #0078ff;
    font-size: 17px;
}

.accordion-button:not(.collapsed) div{
    color: #8E1616 !important;
}

/* Radio button as indicator */
.radio-btn:checked + .menu-label::before {
    content: "●"; /* Active indicator */
    display: inline-block;
    margin-right: 10px;
    color: #2f00ff; /* Active color */
}

/* Default state of radio button */
.menu-label::before {
    content: "○"; /* Inactive indicator */
    display: inline-block;
    margin-right: 10px;
    color: #007bff7a; /* Inactive color */
    transition: color 0.3s ease;
}
.radio-btn:checked + .menu-label-parent::before {
    display: inline-block;
    margin-right: 10px;
    color: #2f00ff; /* Active color */
}

/* Default state of radio button */
.menu-label-parent::before {
    display: inline-block;
    margin-right: 10px;
    color: #007bff7a; /* Inactive color */
    transition: color 0.3s ease;
}

.menu-label-parent {
    font-size: 1.1em;
    cursor: pointer;
    display: block;
    width: 100%;
    text-align: left; /* Pastikan teks di dalam label rata kiri */
    transition: color 0.3s ease, font-weight 0.3s ease;
    color: #007bff; /* Warna default */
    font-weight: 500; /* Tidak tebal secara default */
}

/* Mengatur label agar teks rata kiri */
.menu-label {
    font-size: 1.1em;
    cursor: pointer;
    display: block;
    width: 100%;
    text-align: left; /* Pastikan teks di dalam label rata kiri */
    transition: color 0.3s ease, font-weight 0.3s ease;
    color: #007bff; /* Warna default */
    font-weight: 500; /* Tidak tebal secara default */
}

/* Hover effect pada label */
.menu-label-parent:hover {
    color: #121f43; /* Ubah warna jadi biru pada hover */
    font-weight: bold; /* Ubah font jadi tebal pada hover */
}
.menu-label:hover {
    color: #121f43; /* Ubah warna jadi biru pada hover */
    font-weight: bold; /* Ubah font jadi tebal pada hover */
}

/* Radio button as indicator */
.radio-btn:checked + .menu-label {
    color: #121f43; /* Ubah warna jadi biru saat dipilih */
    font-weight: bold; /* Ubah font jadi tebal saat dipilih */
}
.radio-btn:checked + .menu-label-parent {
    color: #121f43; /* Ubah warna jadi biru saat dipilih */
    font-weight: bold; /* Ubah font jadi tebal saat dipilih */
}


/* Hover effect */
.sidebar-pelayanan .btn-link:hover {
    background-color: transparent; /* Hilangkan hover background */
    border: none; /* Hilangkan border pada hover */
    /* color: #0078ff"; */
}

/* Fokus/aktif styling */
.sidebar-pelayanan .btn-link:focus,
.sidebar-pelayanan .btn-link:active,
.sidebar-pelayanan .btn-link:focus-within {
    background-color: transparent; /* Hilangkan focus background */
    border: none; /* Hilangkan border saat focus dan aktif */
    outline: none; /* Hilangkan outline yang muncul */
    box-shadow: none; /* Hilangkan efek shadow saat focus */
}

.accordion-item {
    border: none;
}

/* Menambahkan border bawah seperti bayangan untuk tiap-tiap menu */
.accordion-body {
    border-bottom: 3px solid rgba(0, 0, 0, 0.1); 
    padding-bottom: 10px;
    margin-bottom: 10px;
}

.accordion-body:last-child {
    /* border-bottom: none; */
    padding-bottom: 15px; /* Menambah jarak bawah untuk visibilitas */
    margin-bottom: 50px; /* Tambahan jarak dari elemen lainnya */
}



/* Mengatur ukuran teks pada layar yang lebih kecil */
@media (max-width: 1200px) {
    .text-overlay {
        font-size: 2.5rem;
    }
    .carousel-item {
        font-size: 0.9rem;
        min-height: 270px;
    }
    .judul {
        font-size: 1.75rem;
    }
}

@media (max-width: 768px) {
    .carousel-item {
        font-size: 0.7rem;
        min-height: 230px;
    }
    .judul {
        font-size: 1.3rem;
    }
}

@media (max-width: 992px) {
    .text-overlay {
        font-size: 2rem;
    }
}


@media (max-width: 768px) {
    .text-overlay {
        font-size: 1.6rem;
    }
}

@media (max-width: 576px) {
    .text-overlay {
        font-size: 1.2rem;
    }
}

 /* Set z-index of the modal to 1000 */
    .modal {
        z-index: 99999 !important;
    }
.modal-backdrop {
    z-index: 999; /* Ensure backdrop is behind the modal */
}



/* Tambahkan gaya CSS untuk membuat modal lebih responsif di mobile */
@media (max-width: 768px) {
    #infoModal .modal-dialog {
        max-width: 100%;
        margin: 0;
    }
    #infoModal .modal-content {
        width: 100%;
    }
    #infoModal .modal-body iframe {
        height: 400px; /* Atur tinggi iframe untuk tampilan mobile */
    }
}


 /* KHUSUS */
    /* Hero Section home */
    .hero-section-home {
        position: relative; /* Menempel pada kontainer induk */
        top: -100px; /* Dimulai dari bagian atas layar */
        left: 0;
        width: 100%;
        height: 70vh; /* Ketinggian hero section 50% viewport */
        min-height: 500px; /* Minimum tinggi */
        background-image: url('../gbr/banner DEPOSITO.png');
        background-size: cover; /* Memastikan gambar memenuhi kontainer */
        background-position: center 50%; /* Geser lebih jauh ke bawah */
        color: white;
        display: flex; /* Aktifkan Flexbox */
        flex-direction: column; /* Elemen disusun secara vertikal */
        justify-content: center; /* Memusatkan elemen secara vertikal */
        align-items: center; /* Memusatkan elemen secara horizontal */
        text-align: center; /* Memastikan teks berada di tengah */
        box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.8);/* Bayangan */
        z-index: 1; /* Agar berada di bawah navbar */
    }
    
    .hero-section-home p {
        font-family: "Marcellus", serif;
        text-shadow: 2px 2px 5px rgba(245, 255, 100, 0.5);
        font-weight: 600;
        font-style: normal;
        font-size: 5rem;
        color: white;
        text-align: center; /* Pastikan teks rata tengah */
        letter-spacing: 3px; /* Jarak antar huruf 3px */
        z-index: 2;
    }
    .hero-section-home span.yaromadon {
        display: block; /* Agar teks tampil sebagai blok di bawah MARHABAN */
        margin-top: -50px; /* Sesuaikan jika perlu */
        font-family: "Berkshire Swash", serif;
        text-shadow: 2px 2px 5px rgba(245, 255, 100, 0.5);
        font-weight: 300;
        font-style: normal;
        font-size: 5rem;
        color: white;
        text-align: center;
        letter-spacing: 3px; /* Memberi jarak antar huruf */
        z-index: 2;
    }
    .hero-section-home h1{
        bottom: -8vh;
    }

    @media screen and (max-width: 768px) {
        .hero-section-home {
            height: 45vh; /* Sesuaikan tinggi untuk layar kecil */
            min-height: 300px;
            background-size: cover;
            background-position: 30% center; /* Geser gambar ke kanan */
        }

        .btn-kustom {
            display: inline-block;
            width: 150px;
            background-color: #ff5722; /* Warna oranye kustom */
            color: white; /* Warna teks */
            padding: 10px;
            font-size: 1.3rem;
            border: none;
            border-radius: 8px;
            position: absolute; /* Atur posisi absolut terhadap hero section */
            bottom: -8vh; 
            left: 20%; /* Pusatkan tombol */
            transform: translateX(-50%); /* Koreksi agar benar-benar di tengah */
        }
        .btn-kustom:hover {
            background-color: #e64a19; /* Warna saat hover */
        }

        .hero-section-home h1{
            /* bottom: -12vh; */
            font-size: 1.5rem;
        }
        .hero-section-home p {
            font-family: "Marcellus", serif;
            text-shadow: 2px 2px 5px rgb(43, 43, 43,0.5);
            font-weight: 600;
            font-style: normal;
            font-size: 3rem;
            color: white;
            text-align: center; /* Pastikan teks rata tengah */
            letter-spacing: 3px; /* Jarak antar huruf 3px */
            z-index: 2;
        }
        .hero-section-home span.yaromadon {
            display: block; /* Agar teks tampil sebagai blok di bawah MARHABAN */
            margin-top: -10px; /* Sesuaikan jika perlu */
            font-family: "Berkshire Swash", serif;
            text-shadow: 2px 2px 5px rgba(245, 255, 100, 0.5);
            font-weight: 300;
            font-style: normal;
            font-size: 2.5rem;
            color: white;
            text-align: center;
            letter-spacing: 3px; /* Memberi jarak antar huruf */
            z-index: 2;
        }
        
    }
    
    


    
/* END KHUSUS */

 /* KHUSUS */
    .hero-section-pernikahan {
        position: relative; /* Menempel pada kontainer induk */
        top: -100px; /* Dimulai dari bagian atas layar */
        left: 0;
        width: 100%;
        height: 50vh; /* Ketinggian hero section 50% viewport */
        min-height: 500px; /* Minimum tinggi */
        background-image: url('../gbr/wedding.jpg');
        background-size: cover; /* Memastikan gambar memenuhi kontainer */
        background-position: center; /* Pastikan gambar di tengah */
        color: white;
        display: flex; /* Aktifkan Flexbox */
        flex-direction: column; /* Elemen disusun secara vertikal */
        justify-content: center; /* Memusatkan elemen secara vertikal */
        align-items: center; /* Memusatkan elemen secara horizontal */
        text-align: center; /* Memastikan teks berada di tengah */
        box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.8); /* Bayangan */
        z-index: 1; /* Agar berada di bawah navbar */
    }

/* END KHUSUS */
 /* KHUSUS */
    .hero-section-berita {
        position: relative; /* Menempel pada kontainer induk */
        top: -100px; /* Dimulai dari bagian atas layar */
        left: 0;
        width: 100%;
        height: 50vh; /* Ketinggian hero section 50% viewport */
        min-height: 500px; /* Minimum tinggi */
        background-image: url('../gbr/berita.jpg');
        background-size: cover; /* Memastikan gambar memenuhi kontainer */
        background-position: center; /* Pastikan gambar di tengah */
        color: white;
        display: flex; /* Aktifkan Flexbox */
        flex-direction: column; /* Elemen disusun secara vertikal */
        justify-content: center; /* Memusatkan elemen secara vertikal */
        align-items: center; /* Memusatkan elemen secara horizontal */
        text-align: center; /* Memastikan teks berada di tengah */
        box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.8); /* Bayangan */
        z-index: 1; /* Agar berada di bawah navbar */
    }

/* END KHUSUS */

 /* KHUSUS */
    /* Hero Section home */
    /* .hero-section-simpanan {
        background-image: url('../gbr/simpanan.jpg');
        background-size: cover;
        background-position: center;
        height: 60vh;
        min-height: 500px;
        color: white;
        display: flex;
        flex-direction: column; Stack elements vertically */
        /* justify-content: center;
        align-items: center;
        box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.8);
        position: relative;
        z-index: 1;
    } */

    .hero-section-simpanan {
        position: relative; /* Menempel pada kontainer induk */
        top: -100px; /* Dimulai dari bagian atas layar */
        left: 0;
        width: 100%;
        height: 50vh; /* Ketinggian hero section 50% viewport */
        min-height: 500px; /* Minimum tinggi */
        background-image: url('../gbr/simpanan.jpg');
        background-size: cover; /* Memastikan gambar memenuhi kontainer */
        background-position: center; /* Pastikan gambar di tengah */
        color: white;
        display: flex; /* Aktifkan Flexbox */
        flex-direction: column; /* Elemen disusun secara vertikal */
        justify-content: center; /* Memusatkan elemen secara vertikal */
        align-items: center; /* Memusatkan elemen secara horizontal */
        text-align: center; /* Memastikan teks berada di tengah */
        box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.8); /* Bayangan */
        z-index: 1; /* Agar berada di bawah navbar */
    }

/* END KHUSUS */

/* KHUSUS */
    /* Hero Section home */
    .hero-section-good {
        position: relative; /* Menempel pada kontainer induk */
        top: -100px; /* Dimulai dari bagian atas layar */
        left: 0;
        width: 100%;
        height: 50vh; /* Ketinggian hero section 50% viewport */
        min-height: 500px; /* Minimum tinggi */
        background-image: url('../gbr/goodtogreat.jpg');
        background-size: cover; /* Memastikan gambar memenuhi kontainer */
        background-position: center; /* Pastikan gambar di tengah */
        color: white;
        display: flex; /* Aktifkan Flexbox */
        flex-direction: column; /* Elemen disusun secara vertikal */
        justify-content: center; /* Memusatkan elemen secara vertikal */
        align-items: center; /* Memusatkan elemen secara horizontal */
        text-align: center; /* Memastikan teks berada di tengah */
        box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.8); /* Bayangan */
        z-index: 1; /* Agar berada di bawah navbar */
    }
/* END KHUSUS */

/* KHUSUS */
    /* Hero Section about */
    .hero-section-about {
        position: relative; /* Menempel pada kontainer induk */
        top: -100px; /* Dimulai dari bagian atas layar */
        left: 0;
        width: 100%;
        height: 50vh; /* Ketinggian hero section 50% viewport */
        min-height: 500px; /* Minimum tinggi */
        background-image: url('../gbr/penghargaan_web.png');
        background-size: cover; /* Memastikan gambar memenuhi kontainer */
        background-position: center 25px; /* Pastikan gambar di tengah */
        color: white;
        display: flex; /* Aktifkan Flexbox */
        flex-direction: column; /* Elemen disusun secara vertikal */
        justify-content: center; /* Memusatkan elemen secara vertikal */
        align-items: center; /* Memusatkan elemen secara horizontal */
        text-align: center; /* Memastikan teks berada di tengah */
        box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.8); /* Bayangan */
        z-index: 1; /* Agar berada di bawah navbar */
    }
/* END KHUSUS */

/* KHUSUS */
    /* Hero Section home */
    /* .hero-section-publikasi {
        background-image: url('../gbr/lap_keuangan.jpg');
        background-size: cover;
        background-position: center;
        height: 60vh;
        min-height: 500px;
        color: white;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        box-shadow: none;
        filter: brightness(1.2);
        position: relative;
        z-index: 20;
    } */

    .hero-section-publikasi {
        position: relative; /* Menempel pada kontainer induk */
        top: -100px; /* Dimulai dari bagian atas layar */
        left: 0;
        width: 100%;
        height: 50vh; /* Ketinggian hero section 50% viewport */
        min-height: 500px; /* Minimum tinggi */
        background-image: url('../gbr/lap_keuangan.jpg');
        background-size: cover; /* Memastikan gambar memenuhi kontainer */
        background-position: center; /* Pastikan gambar di tengah */
        color: white;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
        display: flex; /* Aktifkan Flexbox */
        flex-direction: column; /* Elemen disusun secara vertikal */
        justify-content: center; /* Memusatkan elemen secara vertikal */
        align-items: center; /* Memusatkan elemen secara horizontal */
        text-align: center; /* Memastikan teks berada di tengah */
        box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.8); /* Bayangan */
        z-index: 1; /* Agar berada di bawah navbar */
    }
    .hero-section-lokasi {
        position: relative; /* Menempel pada kontainer induk */
        top: -100px; /* Dimulai dari bagian atas layar */
        left: 0;
        width: 100%;
        height: 50vh; /* Ketinggian hero section 50% viewport */
        min-height: 500px; /* Minimum tinggi */
        background-image: url('../gbr/lokasi.jpg');
        background-size: cover; /* Memastikan gambar memenuhi kontainer */
        background-position: center; /* Pastikan gambar di tengah */
        color: white;
        display: flex; /* Aktifkan Flexbox */
        flex-direction: column; /* Elemen disusun secara vertikal */
        justify-content: center; /* Memusatkan elemen secara vertikal */
        align-items: center; /* Memusatkan elemen secara horizontal */
        text-align: center; /* Memastikan teks berada di tengah */
        box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.8); /* Bayangan */
        z-index: 1; /* Agar berada di bawah navbar */
    }

/* END KHUSUS */
/* KHUSUS */
    /* Hero Section pinjaman */
    /* .hero-section-pinjaman {
        background-image: url('../gbr/pinjaman.jpg');
        background-size: cover;
        background-position: center;
        height: 60vh;
        min-height: 500px;
        color: white;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        box-shadow: none;
        filter: brightness(1.2);
        position: relative;
        z-index: 20;
    } */

    .hero-section-pinjaman {
        position: relative; /* Menempel pada kontainer induk */
        top: -100px; /* Dimulai dari bagian atas layar */
        left: 0;
        width: 100%;
        height: 50vh; /* Ketinggian hero section 50% viewport */
        min-height: 500px; /* Minimum tinggi */
        background-image: url('../gbr/pinjaman.jpg');
        background-size: cover; /* Memastikan gambar memenuhi kontainer */
        background-position: center; /* Pastikan gambar di tengah */
        color: white;
        display: flex; /* Aktifkan Flexbox */
        flex-direction: column; /* Elemen disusun secara vertikal */
        justify-content: center; /* Memusatkan elemen secara vertikal */
        align-items: center; /* Memusatkan elemen secara horizontal */
        text-align: center; /* Memastikan teks berada di tengah */
        box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.8); /* Bayangan */
        z-index: 1; /* Agar berada di bawah navbar */
    }
/* END KHUSUS */

/* KHUSUS */
    .hero-section-gallery {
        position: relative; /* Menempel pada kontainer induk */
        top: -100px; /* Dimulai dari bagian atas layar */
        left: 0;
        width: 100%;
         /* Ketinggian hero section 50% viewport */
        min-height: 500px; /* Minimum tinggi */
        background-image: url('../gbr/merdeka.jpg');
        background-size: cover; /* Memastikan gambar memenuhi kontainer */
        background-position: center; /* Pastikan gambar di tengah */
        color: white;
        display: flex; /* Aktifkan Flexbox */
        flex-direction: column; /* Elemen disusun secara vertikal */
        justify-content: center; /* Memusatkan elemen secara vertikal */
        align-items: center; /* Memusatkan elemen secara horizontal */
        text-align: center; /* Memastikan teks berada di tengah */
        box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.8); /* Bayangan */
        z-index: 1; /* Agar berada di bawah navbar */
    }
/* END KHUSUS */


/* Hero Section KHUSUS */
        /* .hero-section-penyesuaian {
        background-image: url('../gbr/banner_penyesuaian.jpg');
        background-size: cover;
        background-position: center;
        height: 60vh;
        min-height: 300px;
        color: white;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: relative;
        z-index: 1;
    } */

    .hero-section-penyesuaian {
        position: relative; /* Menempel pada kontainer induk */
        top: -100px; /* Dimulai dari bagian atas layar */
        left: 0;
        width: 100%;
        height: 50vh; /* Ketinggian hero section 50% viewport */
        min-height: 500px; /* Minimum tinggi */
        background-image: url('../gbr/banner_penyesuaian.jpg');
        background-size: cover; /* Memastikan gambar memenuhi kontainer */
        background-position: center; /* Pastikan gambar di tengah */
        color: white;
        display: flex; /* Aktifkan Flexbox */
        flex-direction: column; /* Elemen disusun secara vertikal */
        justify-content: center; /* Memusatkan elemen secara vertikal */
        align-items: center; /* Memusatkan elemen secara horizontal */
        text-align: center; /* Memastikan teks berada di tengah */
        box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.8); /* Bayangan */
        z-index: 1; /* Agar berada di bawah navbar */
    }
/* END Hero Section KHUSUS */

/* Hero Section KHUSUS */
        /* .hero-section-deposito {
        background-image: url('../gbr/deposito.jpg');
        background-size: cover;
        background-position: center;
        height: 60vh;
        min-height: 300px;
        color: white;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: relative;
        z-index: 1;
    } */

    .hero-section-deposito {
        position: relative; /* Menempel pada kontainer induk */
        top: -100px; /* Dimulai dari bagian atas layar */
        left: 0;
        width: 100%;
        height: 50vh; /* Ketinggian hero section 50% viewport */
        min-height: 500px; /* Minimum tinggi */
        background-image: url('../gbr/Investasi.png');
        background-size: cover; /* Memastikan gambar memenuhi kontainer */
        background-position: center; /* Pastikan gambar di tengah */
        color: white;
        display: flex; /* Aktifkan Flexbox */
        flex-direction: column; /* Elemen disusun secara vertikal */
        justify-content: center; /* Memusatkan elemen secara vertikal */
        align-items: center; /* Memusatkan elemen secara horizontal */
        text-align: center; /* Memastikan teks berada di tengah */
        box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.8); /* Bayangan */
        z-index: 1; /* Agar berada di bawah navbar */
    }

/* END Hero Section KHUSUS */
/* KHUSUS */
    .lps2 {
        width: 100%; 
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        padding: 20px 0;
        margin-bottom: 80px;
    }

 

    .lps {
        background-color: #4F75FF; /* Warna background oranye */
        width: 100vw; /* Lebar selebar viewport (seluruh body) */
        padding: 120px 0; /* Tambahkan jarak atas dan bawah agar tidak terlalu sempit */
        margin-left: calc(-50vw + 50%); /* Menyamakan margin kiri dengan viewport */
    }
/* END KHUSUS */

    .carousel-container {
        position: relative;
        overflow: hidden;
        width: 100%;
        max-width: 1000px;
        margin: 0 auto;
        padding: 0 8px;
    }

    .carousel-track {
        display: flex;
        transition: transform 0.5s ease-in-out;
        width: 100%;
    }

    .carousel-card {
        flex: 0 0 calc(33.33% - 20px); /* Lebar setiap card dengan margin */
        margin: 10px;
        text-align: center;
    }

    .carousel-card img {
        width: 100%;
        height: auto;
        border-radius: 8px;
    }

    .carousel-control {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        color: rgba(0, 0, 0, 0.2);
        background: none;
        border: none;
        font-size: 4em;
        cursor: pointer;
        padding: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 10; /* Pastikan tombol di atas carousel */
        transition: color 0.3s ease, font-size 0.3s ease; /* Tambahkan transition */
    }
    
    .carousel-control.prev {
        left: 10px;
        margin-left: -10px;
    }
    
    .carousel-control.next {
        right: 10px;
        margin-right: -10px;
    }
    
    .carousel-control:hover {
        color: rgba(0, 0, 0, 0.7);
        font-size: 4.3em; /* Gunakan ukuran font sedikit lebih besar untuk efek lembut */
    }
    
    

    @media (max-width: 768px) { /* Atur ukuran sesuai kebutuhan */
        .carousel-card {
            flex: 0 0 100%; /* Lebar card menjadi 100% untuk tampilan mobile */
            margin: 10px 0; /* Sesuaikan margin untuk tampilan mobile */
        }}