body {
    background: linear-gradient(73.52deg, #1872AD -19.56%, #1B73AE 2.49%, #2577B1 22.22%, #367FB6 38.47%, #4B88BD 53.55%, #4376AA 69.8%, #335282 96.49%);
    font-family: 'BRI Digital Text', sans-serif;
    margin: 0;
    padding: 0;
    min-height: 100vh;
    box-sizing: border-box;
}

/* Untuk body kedua (dengan kelas .body-main) */
.body-main {
    background: radial-gradient(73.46% 61.63% at 50% 54.27%, #005394 0%, #022541 100%);
    font-family: 'BRI Digital Text', sans-serif;
    display: flex;
    flex-direction: column;
    height: 100vh;
    justify-content: space-between;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.container {
    width: 100%;
    padding-top: 20px;
    padding-left: 30px;
    padding-right: 30px;
    box-sizing: border-box;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    color: #fff;
}

.logo {
    flex: 0 0 20%;
}

.logo img {
    max-width: 100%; /* Membuat logo menjadi responsif */
    height: 50px; /* Memastikan aspek rasio gambar tetap terjaga */
}

.center {
    text-align: center;
    flex: 0 0 50%;
    margin: 0 20px;
}

.waktu {
    text-align: right;
    flex: 0 0 20%;
}

.header h1 {
    font-size: 2.5vw; /* Ukuran font relatif terhadap viewport width */
    margin: 0;
}

.waktu h4 {
    font-size: 1.5vw;
    margin: 0;
}

.center p {
    font-size: 1.5vw;
    margin: 0;
}

.waktu p {
    font-size: 1vw;
    margin: 0;
}

/* Carousel styles */
.carousel-container {
    position: relative;
    overflow: hidden;
    width: 100%;
    margin: 25px auto; /* Adjust margin as needed */
}

.carousel-content {
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.5s ease-in-out;
}

.carousel-item {
    flex: 0 0 auto;
    overflow: hidden; /* Ensure images don't overflow carousel item */
    border-radius: 10px; /* Add border-radius for rounded corners */
    margin: 0 10px; /* Adjust margins for spacing */
}

.carousel-item img {
    height: auto; /* Memastikan aspek rasio gambar tetap terjaga */
    object-fit: cover; /* Maintain aspect ratio and cover container */
    border-radius: 10px;
    max-width: 100%;
}

.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 35px;
    height: 35px;
    background-color: #F87304;
    border: 2px solid white;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 1;
}

.carousel-btn-left {
    left: 50px;
}

.carousel-btn-right {
    right: 50px;
}


.carousel-item img.large {
    width: 650px;
    height: 325px;
}
.carousel-item img.small {
    width: 400px;
    height: 200px;
}

/* Add pressed style for buttons */
.pressed {
    background-color: #F87304;
    color: white;
    opacity: 0.5;
}

/* Modal (background) */
.modal {
    display: none; /* Tidak ditampilkan secara default */
    position: fixed; /* Tetap di tempat */
    z-index: 2; /* Di atas elemen lainnya */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.8); /* Warna latar belakang hitam dengan transparansi */
}

/* Gambar di dalam modal */
.modal-content {
    padding-top: 40px;
    margin: auto;
    display: block;
    width: 80%; /* Ukuran gambar, sesuaikan jika perlu */
}

/* Close button */
.close {
    position: absolute;
    top: 10px;
    right: 25px;
    color: white;
    font-size: 35px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

.Frame8 {
    max-width: 85%;
    padding: 20px; /* Mengurangi padding untuk tata letak yang lebih kompak */
    background: white;
    border-radius: 10px;
    display: flex;
    justify-content: space-between; /* Spasi antar elemen */
    align-items: center;
    flex-wrap: nowrap; /* Pastikan elemen tidak wrap ke baris berikutnya */
    gap: 10px;
    margin: auto; /* Menengahkan .Frame8 di dalam kontainer */
    color: #003E71;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    font-size: 0.9rem;
}

.Frame7,
.Frame6,
.Frame5,
.Frame4,
.Frame3,
.Frame2 {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    display: flex;
    width: calc(16.66% - 10px); /* Lebar setiap bagian */
    box-sizing: border-box; /* Padding tidak mempengaruhi lebar total */
    position: relative; /* Menjadikan posisi relatif untuk kolom */
}

.Frame7::before,
.Frame6::before,
.Frame5::before,
.Frame4::before,
.Frame3::before,
.Frame2::before {
    content: "";
    width: 1px; /* Lebar garis */
    height: 100%; /* Tinggi garis, mengikuti tinggi konten kolom */
    background-color: rgb(206, 206, 206); /* Warna garis */
    position: absolute; /* Menjadikan posisi absolut untuk garis */
    top: 0; /* Garis dimulai dari bagian atas */
    right: 0; /* Garis di sebelah kiri kolom */
}

.Frame6 p {
    margin: 0;
}

.Frame5 h1 {
    color: var(--Primary-Blue-Blue-80, #1078CA);
    margin: 0;
    font-size: 17px;
}

.Frame5 h2 {
    color: var(--Primary-Orange-Orange-80, #F87304);
    margin: 0;
    font-size: 17px;
}

/* Styling untuk gambar SVG */
.responsive-svg {
    max-width: 100%; /* Memastikan SVG menyesuaikan lebar kontainer */
    height: auto; /* Memastikan aspek rasio tetap terjaga */
}

/* Aturan CSS khusus untuk tautan <a> yang berisi SVG */
.Frame8 a {
    /* Aturan gaya khusus untuk tautan <a> */
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Stil untuk SVG dalam tautan <a> */
.Frame8 a .responsive-svg {
    /* Aturan gaya khusus untuk SVG di dalam tautan <a> */
    max-width: 100%;
    height: auto;
}

/* Aturan CSS untuk konten di dalam tautan <a> */
.Frame8 a p {
    /* Aturan gaya khusus untuk elemen <p> di dalam tautan <a> */
    margin: 10px;
    text-align: center; /* Sesuaikan sesuai kebutuhan Anda */
}

.none-display {
    display: none; /* Hide the element initially */
}

/* Large Screens (Desktops and Laptops) */
/* @media (min-width: 1074px) {
    
    .footer-home{
        position: fixed;
        bottom: 0;
        width: 100%;
        text-align: center;
        padding: 20px 0;
    }

} */

/* Tablets */
@media (max-width: 900px) {

    .none-display {
        display: block; /* Show the element on small screens */
        text-align: center; /* Center align text and images */
        padding: 10px; /* Add some padding around the content */
        color: white;
    }
    
    .header-title {
        font-size: 30px; /* Adjust the font size as needed */
        margin-bottom: 10px; /* Add some space below the title */
    }
    
    .header-image {
        max-width: 100%; /* Ensure the image is responsive */
        height: 100px; /* Maintain aspect ratio */
    }

    .header h1 {
        display: none;
    }
    
    .waktu h4 {
        font-size: 20px;
    }
    
    .center p {
        display: none;
    }
    
    .waktu p {
        font-size: 15px;
    }

    .carousel-item img.large {
        width: 530px;
        height: 300px;
    }
    .carousel-item img.small {
        width: 400px;
        height: 200px;
    }
}

/* Mobile Devices */
@media (max-width: 480px) {

    .carousel-btn-left {
        left: 10px;
    }
    
    .carousel-btn-right {
        right: 10px;
    }
    
    .logo img {
        max-width: 100%; /* Membuat logo menjadi responsif */
        height: 25px; /* Memastikan aspek rasio gambar tetap terjaga */
    }

    .header h1 {
        display: none;
    }
    
    .waktu h4 {
        font-size: 12px;
    }
    
    .center p {
        display: none;
    }
    
    .waktu p {
        font-size: 8px;
    }

    .carousel-item img.large {
        width: 350px;
        height: 200px;
    }
    .carousel-item img.small {
        width: 250px;
        height: 150px;
    }

    .Frame8 {
        display: flex;
        flex-wrap: wrap; /* Allow wrapping to multiple lines */
    }

    .Frame7,
    .Frame6,
    .Frame5,
    .Frame4,
    .Frame3,
    .Frame2 {
        width: calc(33.33% - 10px); /* Adjust width to fit three columns */
        margin-bottom: 10px; /* Add space between rows */
        position: relative; /* Ensure lines are positioned correctly */
    }

    /* Vertical lines between columns */
    .Frame7::before,
    .Frame6::before,
    .Frame5::before,
    .Frame4::before,
    .Frame3::before,
    .Frame2::before {
        content: "";
        width: 2px;
        height: 100%;
        background-color: rgb(206, 206, 206);
        position: absolute;
        top: 0;
        right: 0;
    }

    /* Remove the line after the last column in each row */
    .Frame5::before,
    .Frame2::before {
        display: none;
    }

    .responsive-svg {
        width: 25px; /* Set a fixed width */
        height: 25px; /* Set a fixed height */
    }

    .Frame5 h1,h2 {
        font-size: 13px;
    }

    .Frame8 p {
        font-size: 12px;
    }

    .none-display {
        display: block; /* Show the element on small screens */
        text-align: center; /* Center align text and images */
        padding: 10px; /* Add some padding around the content */
        color: white;
    }
    
    .header-title {
        font-size: 23px; /* Adjust the font size as needed */
        margin-bottom: 10px; /* Add some space below the title */
    }
    
    .header-image {
        max-width: 100%; /* Ensure the image is responsive */
        height: 80px; /* Maintain aspect ratio */
    }
}

/* Mobile Devices */
@media (max-width: 390px) {
    .carousel-btn-left {
        left: 10px;
    }
    
    .carousel-btn-right {
        right: 10px;
    }
    
    .carousel-item img.large {
        width: 300px;
        height: 180px;
    }
    .carousel-item img.small {
        width: 230px;
        height: 150px;
    }

    .header-title {
        font-size: 20px; /* Adjust the font size as needed */
        margin-bottom: 10px; /* Add some space below the title */
    }
    
    .header-image {
        max-width: 100%; /* Ensure the image is responsive */
        height: 70px; /* Maintain aspect ratio */
    }
}

@media (max-width: 350px) {
    .logo img {
        max-width: 100%; /* Membuat logo menjadi responsif */
        height: 20px; /* Memastikan aspek rasio gambar tetap terjaga */
    }
}


.layanan {
    padding-top: 20px;
    position: relative;
    width: 100%;
}

.btn-back, .btn-home {
    position: absolute;
    display: inline-block;
    background-color: white;
    color: #0C5A98;
    padding: 10px 10px;
    border-radius: 5px;
    transition: background-color 0.3s ease;
    font-size: 14px;
    font-weight: 600;
    margin-top: 20px;
}

.btn-back {
    left: 0;
}

.btn-home {
    right: 0;
}

.btn-back a, .btn-home a {
    text-decoration: none;
    color: inherit;
    font-weight: 600;
}

.link-back, .link-home {
    display: flex;
    align-items: center;
    text-decoration: none; /* Hilangkan dekorasi hyperlink */
    color: black; /* Ubah warna teks sesuai kebutuhan */
}

.link-back svg, .link-home svg {
    margin-right: 5px; /* Beri ruang antara SVG dan teks */
}

.content {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    justify-content: center;
    align-items: center;
    padding-top: 100px;
    box-sizing: border-box;
    max-width: 100%; /* Membatasi lebar maksimal */
    width: 100%; /* Pastikan elemen mengambil lebar penuh kontainer */
    margin: 0 auto; /* Menjaga elemen berada di tengah */
}

.content-layanan {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    text-align: center;
    padding: 60px;
    box-sizing: border-box;
}

.content-layanan:hover {
    background: linear-gradient(rgb(240, 194, 110), rgb(255, 102, 0)); /* Mengubah background menjadi oranye saat di-hover */
}

.box-layanan {
    background: rgba(255, 255, 255, 0.8);
    border-radius: 10px;
    margin: 20px 0;
    display: inline-block; /* Membuat elemen hanya sebesar konten di dalamnya */
    padding: 30px; /* Padding sekitar gambar */
    box-sizing: border-box;
}

.box-layanan img {
    width: 100%; /* Fixed width for icons */
    height: 80px;
    display: block;
}

.content-layanan h4 {
    margin: 0;
    font-size: 1.5vw; /* Adjust text size */
    color: rgb(255, 255, 255); /* Text color inside the box */
    font-weight: 100;
}

.content-layanan p {
    margin: 0;
    font-size: 1vw; /* Adjust text size */
    color: rgba(255, 255, 255, 0.664); /* Text color inside the box */
}

/* Tablets */
@media (max-width: 900px) {
    .content {
        grid-template-columns: repeat(2, 1fr); /* Dua kolom */
        padding-top: 100px;
    }

    .content-layanan {
        padding: 40px; /* Kurangi padding pada perangkat yang lebih kecil */
    }

    .box-layanan {
        padding: 20px; /* Kurangi padding pada perangkat yang lebih kecil */
    }

    .content-layanan h4 {
        font-size: 2vw; /* Sesuaikan ukuran font untuk layar lebih kecil */
    }

    .content-layanan p {
        font-size: 1.2vw; /* Sesuaikan ukuran font untuk layar lebih kecil */
    }
}

@media (max-width: 600px) {
    .content {
        grid-template-columns: 1fr; /* Satu kolom */
        padding-top: 100px;
    }

    .content-layanan {
        padding: 20px; /* Kurangi padding lebih lanjut pada perangkat yang lebih kecil */
    }

    .box-layanan {
        padding: 15px; /* Kurangi padding lebih lanjut pada perangkat yang lebih kecil */
    }

    .content-layanan h4 {
        font-size: 4vw; /* Sesuaikan ukuran font lebih besar untuk layar kecil */
    }

    .content-layanan p {
        font-size: 3vw; /* Sesuaikan ukuran font lebih besar untuk layar kecil */
    }

    .footer {
        background-color: rgba(255, 255, 255, 1);
    }

    .footer p {
        color: rgba(12, 90, 152, 1);
        font-size: 10px;
    }
}

/* Mobile Devices */
@media (max-width: 480px) {
    .content {
        grid-template-columns: 1fr; /* Satu kolom */
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        padding-top: 100px;
    }

    .content-layanan {
        display: flex;
        background: rgba(255, 255, 255, 0.2); /* Semi-transparent background */
        border-radius: 10px;
        align-items: center;
        padding-left: 20px;
        padding-right: 10px;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .box-layanan {
        background: rgba(255, 255, 255, 0.8);
        border-radius: 10px;
        padding: 20px;
    }

    .desk-right {
        margin-left: 20px;
        text-align: left; /* Pastikan teks rata kiri */
    }

    .content-layanan h4 {
        font-size: 4vw;
        margin: 0;
    }

    .content-layanan p {
        font-size: 3vw; /* Sesuaikan ukuran font untuk layar lebih kecil */
        margin: 0;
    }

    .box-layanan img {
        width: 50px;
        height: 100%;
    }

    .footer {
        background-color: rgba(255, 255, 255, 1);
    }

    .footer p {
        color: rgba(12, 90, 152, 1);
        font-size: 10px;
    }

}

.content-crm {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    justify-content: center;
    align-items: center;
    padding-top: 100px;
    box-sizing: border-box;
    max-width: 65%; /* Adjust max-width to ensure it looks centered */
    margin: 0 auto; /* Center the grid horizontally */
}

@media (max-width: 900px) {
    .content-crm {
        max-width: 80%;
    }
}

@media (max-width: 600px) {
    .content-crm {
        grid-template-columns: 1fr;
        max-width: 100%;
    }

}

.content-card {
    color: rgb(255, 255, 255);
    text-align: center;
    padding-top: 70px;
}

.content-card h1 {
    font-size: 2.5vw;
}

.card {
    display: grid;
    grid-template-columns: repeat(4, 1fr) 1.5fr; /* 4 kolom dengan ukuran 1fr dan 1 kolom dengan ukuran 2fr */
    gap: 20px;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    max-width: 100%; /* Sesuaikan lebar maksimal agar terlihat di tengah */
    margin: 0 auto; /* Pusatkan grid secara horizontal */
}

.proses {
    grid-column: span 1; /* .proses-nocard menempati satu kolom */
}

.proses img {
    height: 50px;
    max-width: 100%;
}

.proses span {
    font-size: 0.8vw;
}

.bank {
    grid-column: 5 / span 1;
    grid-row: 1 / span 1;
}

.bank img {
    height: auto;
    width: 100%;
}

.no-card {
    display: grid;
    grid-template-columns: repeat(5, 1fr) 1.5fr; /* 4 kolom untuk .proses-nocard, 1 kolom lebih besar untuk .bank-nocard */
    gap: 20px;
    row-gap: 0px;
    /* grid-template-rows: auto auto; */
    justify-content: center;
    /* align-items: start; */
    align-items: center;
    box-sizing: border-box;
    max-width: 100%; /* Sesuaikan lebar maksimal agar terlihat di tengah */
    margin: 0 auto; /* Pusatkan grid secara horizontal */ 
    padding-top: 20px;
}

.proses-nocard {
    grid-column: span 1; /* .proses-nocard menempati satu kolom */
}

/* .proses-nocard:nth-child(1),
.proses-nocard:nth-child(2),
.proses-nocard:nth-child(3),
.proses-nocard:nth-child(4),
.proses-nocard:nth-child(5) {
    grid-row: 1;
}

.proses-nocard:nth-child(6),
.proses-nocard:nth-child(7),
.proses-nocard:nth-child(8),
.proses-nocard:nth-child(9),
.proses-nocard:nth-child(10) {
    grid-row: 2; 
} */

.bank-nocard {
    grid-column: 6 / span 1; /* .bank-nocard menempati kolom enam */
    grid-row: 1 / span 2; /* .bank-nocard menempati dua baris penuh */
}

.proses-nocard img {
    height: 50px;
    max-width: 100%;
}

.bank-nocard img {
    height: auto;
    width: 100%;
}
/* Tablet devices */
@media (max-width: 900px) {
    .content-card h1 {
        font-size: 4vw;
    }

    .proses span {
        font-size: 1vw;
    }

    .card {
        display: grid;
        grid-template-columns: repeat(4, 1fr); /* 3 kolom untuk .proses */
        gap: 10px;
    }

    .proses {
        grid-column: span 1; /* .proses menempati satu kolom */
        text-align: center;
    }

    .proses img {
        height: 60px; /* Ukuran gambar lebih kecil pada mobile */
        max-width: 100%;
    }

    .bank {
        grid-column: 3 / -1; /* .bank menempati seluruh kolom di baris baru */
        grid-row: 5; /* Pastikan .bank berada di baris kedua */
    }

    .bank img {
        height: 100%;
        width: 300px;
    }
}

/* Mobile devices */
@media (max-width: 480px) {
    .content-card h1 {
        font-size: 5vw;
    }

    .proses span {
        font-size: 2vw;
    }

    .card {
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* 3 kolom untuk .proses */
        gap: 10px;
    }

    .proses {
        grid-column: span 1; /* .proses menempati satu kolom */
        text-align: center;
    }

    .proses p {
        font-size: 4vw;
    }

    .proses img {
        height: 40px; /* Ukuran gambar lebih kecil pada mobile */
        max-width: 100%;
    }

    .bank {
        grid-column: 2 / -1; /* .bank menempati seluruh kolom di baris baru */
        grid-row: 5; /* Pastikan .bank berada di baris kedua */
    }

    .bank img {
        height: auto;
        width: 100%;
    }
}

/* Tablet devices */
@media (max-width: 900px) {
    .no-card {
        grid-template-columns: repeat(5, 1fr); /* 4 kolom untuk .proses-nocard */
        gap: 10px;
    }

    .proses-nocard {
        grid-column: span 1; /* .proses menempati satu kolom */
        text-align: center;
    }

    .proses-nocard img {
        height: 60px; /* Ukuran gambar lebih kecil pada mobile */
        max-width: 100%;
    }

    .bank-nocard {
        grid-column: 3 / -1; /* .bank-nocard menempati kolom dari 3 sampai kolom terakhir */
        grid-row: 5;
    }

    .bank-nocard img {
        height: 100%;
        width: 300px;
    }
}

/* Mobile devices */
@media (max-width: 480px) {
    .no-card {
        grid-template-columns: repeat(3, 1fr); /* 4 kolom untuk .proses-nocard */
    }

    .proses-nocard {
        grid-column: span 1; /* .proses menempati satu kolom */
        text-align: center;
    }

    .proses-nocard p {
        font-size: 4vw;
    }

    .proses-nocard img {
        height: 40px; /* Ukuran gambar lebih kecil pada mobile */
        max-width: 100%;
    }

    .bank-nocard {
        grid-column: 2 / -1; /* .bank menempati seluruh kolom di baris baru */
        grid-row: 5; /* Pastikan .bank berada di baris kedua */
    }

    .bank-nocard img {
        height: auto;
        width: 100%;
    }
}

.content-ssb-one,
.content-ssb-two {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}

.content-ssb-one {
    padding-top: 100px;
}

.content-ssb-two {
    grid-template-columns: repeat(3, 1fr); /* Second row with 3 items */
    max-width: 80%;
    margin: auto;
    padding-top: 20px;
}

.content-layanan-ssb {
    display: flex;
    background: rgba(255, 255, 255, 0.2); /* Semi-transparent background */
    border-radius: 10px;
    align-items: center;
    padding-left: 20px;
    padding-right: 10px;
    padding-top: 40px;
    padding-bottom: 40px;
}

.content-layanan-ssb:hover {
    background: linear-gradient(rgb(240, 194, 110), rgb(255, 102, 0)); /* Mengubah background menjadi oranye saat di-hover */
}

.text-right {
    margin-left: 20px;
}

.content-layanan-ssb p {
    font-size: 1rem; /* Adjust text size */
    color: rgb(255, 255, 255); /* Text color inside the box */
}

.box-layanan-ssb {
    background: rgba(255, 255, 255, 0.8);
    border-radius: 10px;
    padding: 20px;
}

/* .box-layanan-ssb img {
    width: 50px;
    height: 100%;
} */

.box-layanan-ssb img {
    width: 100%; /* Fixed width for icons */
    height: 40px;
}

.footer {
    color: rgb(211, 207, 207);
    text-align: center;
    font-size: 0.8rem;
    margin-top: 20px;
}

/* Tablets */
@media (max-width: 900px) {
    .content-ssb-one,
    .content-ssb-two {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .content-ssb-one {
        padding-top: 100px;
    }
    
    .content-ssb-two {
        grid-template-columns: repeat(3, 1fr); /* Second row with 3 items */
        max-width: 100%;
    }
    
    .content-layanan-ssb p {
        font-size: 2vw; /* Adjust text size */
    }

    .box-layanan-ssb img {
        width: 100%; /* Fixed width for icons */
        height: 50px;
    }
}

@media (max-width: 600px) {    
    .content-ssb-two {
        grid-template-columns: repeat(2, 1fr); /* Second row with 3 items */
    }

    .box-layanan-ssb img {
        width: 100%; /* Fixed width for icons */
        height: 40px;
    }
}

/* Mobile Devices */
@media (max-width: 480px) {
    .content-ssb-two {
        grid-template-columns: repeat(2, 1fr); /* Second row with 3 items */
    }
    
    .content-layanan-ssb p {
        font-size: 3vw; /* Adjust text size */
    }
    
    .box-layanan-ssb img {
        width: 100%; /* Fixed width for icons */
        height: 30px;
    }

    .text-right {
        margin-left: 10px;
    }
}

/* Mobile Devices */
@media (max-width: 420px) {
    .content-ssb-one,
    .content-ssb-two {
        grid-template-columns: repeat(1, 1fr);
    }
    
    .content-ssb-two {
        grid-template-columns: repeat(1, 1fr); /* Second row with 3 items */
    }
    
    .content-layanan-ssb p {
        font-size: 4vw; /* Adjust text size */
    }
    
    .box-layanan-ssb img {
        width: 50px; /* Fixed width for icons */
        height: 100%;
    }

    .text-right {
        margin-left: 20px;
    }
}

/* Mobile Devices */
@media (max-width: 320px) {
    .box-layanan-ssb img {
        width: 50px; /* Fixed width for icons */
        height: 100%;
    }
}

.content-unit-kerja {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 60px;
    justify-content: center;
    align-items: center;
    padding-top: 80px;
    box-sizing: border-box;
    max-width: 100%; /* Membatasi lebar maksimal */
    width: 100%; /* Pastikan elemen mengambil lebar penuh kontainer */
    margin: 0 auto; /* Menjaga elemen berada di tengah */
}

.content-layanan-uk {
    border-radius: 10px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.2); /* Semi-transparent background */
    align-items: center;
}

.content-layanan-uk:hover {
    background: linear-gradient(rgb(240, 194, 110), rgb(255, 102, 0)); /* Mengubah background menjadi oranye saat di-hover */
}

.content-layanan-uk .image-bg {
    width: 100%;
    height: auto;
    display: block;
}

.content-inner {
    display: flex;
    background: rgba(255, 255, 255, 0.2);
    padding: 20px;
    align-items: center;
    justify-content: center;
}

.box-layanan-uk {
    background: rgba(255, 255, 255, 0.8);
    border-radius: 10px;
    padding: 15px;
}

.box-layanan-uk img {
    width: 100%;
    height: 50px;
    display: block;
}

.content-inner h4 {
    margin: 0;
    font-size: 1.2rem; /* Adjust text size */
    color: rgb(255, 255, 255); /* Text color inside the box */
    font-weight: 100;
}

.content-inner p {
    margin: 0;
    font-size: 0.9rem; /* Adjust text size */
    color: rgba(255, 255, 255, 0.664); /* Text color inside the box */
}

.text-right-2 {
    margin-left: 10px;
}

/* Tablets */
@media (max-width: 900px) {
.content-unit-kerja {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    padding-top: 100px;
}

.text-right-2 {
    margin-left: 20px;
}
}

/* Mobile Devices */
@media (max-width: 480px) {
    .content-unit-kerja {
        grid-template-columns: 1fr;
    }

    .box-layanan-uk img {
        width: 50px; /* Fixed width for icons */
        height: 100%;
    }
}

.content-cafe {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    justify-content: center;
    align-items: center;
    padding-top: 80px;
    box-sizing: border-box;
    max-width: 100%; /* Membatasi lebar maksimal */
    width: 100%; /* Pastikan elemen mengambil lebar penuh kontainer */
    margin: 0 auto; /* Menjaga elemen berada di tengah */
}

.content-layanan-cafe {
    background: rgba(255, 255, 255, 0.2); /* Semi-transparent background */
    border-radius: 10px;
    text-align: center;
    align-items: center;
}

.content-layanan-cafe:hover {
    background: linear-gradient(rgb(240, 194, 110), rgb(255, 102, 0)); /* Mengubah background menjadi oranye saat di-hover */
}

.box-layanan-cafe {
    border-radius: 10px;
    padding: 40px;
}

.content-layanan-cafe img {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
}

.content-layanan-cafe p {
    font-size: 1rem; /* Adjust text size */
    color: rgb(255, 255, 255); /* Text color inside the box */
}

/* Tablets */
@media (max-width: 900px) {
    .content-cafe {
        grid-template-columns: repeat(2, 1fr);
        padding-top: 100px;
    }
    
    .box-layanan-cafe {
        padding: 15px;
    }
}
    
/* Mobile Devices */
@media (max-width: 480px) {
    .content-cafe {
        grid-template-columns: repeat(1, 1fr);
    }
}

.content-labuan-bajo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 80%;
    margin: 0 auto; /* Menjaga elemen berada di tengah */
    padding-top: 80px;
}

.left-section {
    width: 50%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.carousel-cafe {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 10px;
}

.carousel-cafe-item {
    display: flex;
    transition: transform 0.5s ease;
}

.item-cafe {
    min-width: 100%;
    flex: 1 0 100%;   
}

.item-cafe img {
    width: 100%;
    height: auto;
    border-radius: 10px;
}

.detail {
    background: rgb(255, 255, 255);
    border-radius: 10px;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.content-description {
    width: 65%;
}

.barcode {
    width: 20%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.barcode img {
    width: 100px;
    height: 100px;
    border-radius: 10px;
}

.content-description h2 {
    margin: 0;
    font-size: 1rem;
    color: rgba(12, 90, 152, 1);
}

.content-description h2 cafe{
    color: rgba(244, 113, 4, 1);
}

.content-description h2 span{
    color: rgba(41, 41, 41, 1);
}

.content-description p {
    color: rgba(41, 41, 41, 1);
    font-size: 0.9rem;
}

.content-description p svg {
    color: rgba(248, 115, 4, 1);
}

.visit-details {
    display: flex;
    justify-content: space-between;
}

.visit-details p{
    color: rgba(0, 0, 0, 1);
}

.visit-details a {
    text-decoration: none;
    color: rgba(248, 115, 4, 1);
    font-size: 0.9rem;
}

.content-map {
    width: 40%;
    padding: 20px;
}

.content-map iframe {
    width: 100%;
    border-radius: 10px;
}

.content-map p {
    color: rgba(255, 255, 255, 1);
    font-size: 1rem;
}


/* Responsive styles */
@media (max-width: 900px) {
    .content-labuan-bajo {
        max-width: 100%;
        margin: auto;
    }
    
    
    .content-description {
        width: 70%;
    }
    
    .barcode img {
        width: 90px;
        height: 90px;
        border-radius: 10px;
    }
}

@media (max-width: 820px) {
    .barcode img {
        width: 85px;
        height: 85px;
    }
}

/* Styles for screens with a max-width of 480px */
@media (max-width: 480px) {
    .content-labuan-bajo {
        flex-direction: column;
        max-width: 100%;
        padding-top: 100px;
    }

    .left-section {
        width: 100%;
    }

    .barcode img {
        width: 70px;
        height: 70px;
        border-radius: 10px;
    }

    .content-map {
        width: 100%;
        padding: 10px 0;
    }

    .visit-details {
        flex-direction: column;
        align-items: flex-start;
    }

    .visit-details p,
    .visit-details a {
        margin-bottom: 10px;
    }

    .carousel-btn {
        width: 35px;
        height: 35px;
    }
}

/* Styles for screens with a max-width of 320px */
@media (max-width: 360px) {

    .barcode img {
        width: 60px;
        height: 60px;
    }

    .content-description h2 {
        font-size: 0.8rem;
    }

    .content-description p {
        font-size: 0.8rem;
    }

    .visit-details a {
        font-size: 0.8rem;
    }

    .content-map p {
        font-size: 0.8rem;
    }

    .carousel-btn {
        width: 25px;
        height: 25px;
    }
}

.content-work {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    padding-top: 80px;
    max-width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

.content-layanan-work {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    transition: background 0.3s ease;
}

.content-layanan-work:hover {
    background: linear-gradient(rgb(240, 194, 110), rgb(255, 102, 0)); /* Mengubah background menjadi oranye saat di-hover */
}

.content-layanan-work img {
    width: 40%;
    height: auto;
}

.box-layanan-work {
    padding: 20px;
    flex: 1;
    text-align: left;
}

.box-layanan-work p {
    font-size: 1rem;
    color: rgb(255, 255, 255);
    text-align: center;
}

/* Responsive styles */
@media (max-width: 900px) {
    .content-work { 
        grid-template-columns: repeat(2, 1fr);
        padding-top: 100px;
    }
}

/* Mobile Devices */
@media (max-width: 480px) {
    .content-work {
        grid-template-columns: repeat(1, 1fr);
    }
}


.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 75vh;
}

.login-form {
    width: 100%;
    max-width: 400px;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #f9f9f9;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    box-sizing: border-box; /* Menyertakan padding dan border dalam perhitungan lebar */
}

.title-login {
    text-align: center;
    color: #0056b3;
}

.form-group {
    margin-bottom: 15px;
}

.input-field {
    width: 100%; /* Mengambil seluruh lebar form group */
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
    box-sizing: border-box; /* Menyertakan padding dan border dalam perhitungan lebar */
}

.submit-button {
    width: 100%; /* Mengambil seluruh lebar form group */
    padding: 10px;
    background-color: #007bff;
    border: none;
    border-radius: 5px;
    color: white;
    font-size: 16px;
    cursor: pointer;
    box-sizing: border-box; /* Menyertakan padding dan border dalam perhitungan lebar */
}

.submit-button:hover {
    background-color: #0056b3;
}

/* Responsive styles */
@media (max-width: 900px) {
    .login-form {
        padding: 15px;
    }
    .input-field {
        padding: 8px;
        font-size: 14px;
    }
    .submit-button {
        padding: 8px;
        font-size: 14px;
    }
}

@media (max-width: 768px) {
    .login-form {
        padding: 10px;
    }
    .input-field {
        padding: 7px;
        font-size: 13px;
    }
    .submit-button {
        padding: 7px;
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .login-form {
        padding: 8px;
    }
    .input-field {
        padding: 6px;
        font-size: 12px;
    }
    .submit-button {
        padding: 6px;
        font-size: 12px;
    }
}

@media (max-width: 320px) {
    .login-form {
        padding: 5px;
    }
    .input-field {
        padding: 5px;
        font-size: 11px;
    }
    .submit-button {
        padding: 5px;
        font-size: 11px;
    }
}

.swal-modal {
    z-index: 9999 !important; /* Atur z-index agar lebih tinggi dari elemen lain */
}


.action-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 10px; /* Jarak antara tombol */
}

.edit {
    text-align: right; /* Posisi teks tombol di tengah */
}

.edit-button, .logout-button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #F87304;
    color: rgb(255, 255, 255);
    text-decoration: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    border: none; /* Hapus border default untuk button */
}

.edit-button:hover, .logout-button:hover {
    background-color: rgb(255, 255, 255);
    color: #F87304;
}

.logout-form {
    display: inline; /* Agar form tidak menambah line break */
}

.form-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 79vh; /* Mengambil seluruh tinggi viewport */
}

.image-form {
    width: 100%;
    max-width: 800px; /* Increased width */
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #f9f9f9;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    box-sizing: border-box; /* Menyertakan padding dan border dalam perhitungan lebar */
}

.form-row {
    display: flex;
    justify-content: space-between; /* Menyusun form dalam satu baris */
    flex-wrap: wrap; /* Memungkinkan wrap jika tidak cukup lebar */
}

.form-group-image {
    flex: 0 0 calc(33.33% - 10px); /* Lebar 33.33% dari parent dengan sedikit margin */
    margin-bottom: 20px; /* Jarak antar form group */
}

.form-label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.image-preview-container {
    margin-top: 10px;
}

.img-preview {
    max-width: 100%;
    height: auto;
    border-radius: 5px;
}

.invalid-feedback {
    color: red;
    font-size: 14px;
}