html {
  scroll-behavior: smooth;
}

.navbar-container {
    margin-top: 1cm;
    margin-left: 2cm;
    margin-right: 2cm;
}

.navbar {
    border-radius: 15px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.10), 0 1.5px 4px rgba(0,0,0,0.12);
}


.img-conn {
    margin-top: -3cm;
    margin-right: 0cm;
    max-width: 100%;
    text-align: center;
    
}

body {
    font-family: 'Poppins', Arial, Helvetica, sans-serif;
    color: black;
}

.title {
    font-family: "Arial Rounded MT", Arial, Helvetica, sans-serif;
    color: black;
}

.titledoc {
    font-family: "Arial Rounded MT", Arial, Helvetica, sans-serif;
    color: rgb(255, 255, 255);
}

.title-foot {
    font-family: "Arial Rounded MT", Arial, Helvetica, sans-serif;
    color: black;
    margin-top: -10pt;
    margin-left: -2cm;
    margin-right: 3cm;
}

.tentang {
    background-color: #fafafa;
}

.tentang-prakata {
    background-color: #fafafa;
}

.garis-tentangkami {
    width: 180px; /* Atur sesuai kebutuhan */
    height: 6px;
    display: flex;
    margin-top: 10px;
    border-radius: 6px;
    overflow: hidden;
}

/* Bagian kiri (hitam) dan kanan (merah) */
.garis-tentangkami::before,
.garis-tentangkami::after {
    content: "";
    display: block;
    height: 100%;
    width: 50%;
    border-radius: 12px 0 0 12px; /* Kiri rounded */
    background: #686868;
}

.garis-tentangkami::after {
    border-radius: 0 12px 12px 0; /* Kanan rounded */
    background: rgb(196, 62, 62); /* Merah maroon */
}



/* Garis Dokumentasi */
.garis-dokumentasi {
    width: 180px; /* Atur sesuai kebutuhan */
    height: 6px;
    display: flex;
    margin-top: 10px;
    border-radius: 6px;
    overflow: hidden;
}

/* Bagian kiri (hitam) dan kanan (merah) */
.garis-dokumentasi::before,
.garis-dokumentasi::after {
    content: "";
    display: block;
    height: 100%;
    width: 50%;
    border-radius: 12px 0 0 12px; /* Kiri rounded */
    background: #ff9100;
}

.garis-dokumentasi::after {
    border-radius: 0 12px 12px 0; /* Kanan rounded */
    background: rgb(255, 255, 255); /* Merah maroon */
}



.documentation {
    /* Gradient linear dari atas ke bawah, dari biru ke putih */
    background-image: linear-gradient(to bottom, #940F0F,#3B1414);
}

.adm {
    /* Opsional, agar teks tidak menempel ke border */
    font-size: 14pt;
    text-align: center;
}

.perkap {
    border-left: 0.8px solid #9a9a9a;  /* Border kiri, bisa sesuaikan warna dan ketebalan */
    border-right: 0.8px solid #9a9a9a; /* Border kanan, bisa sesuaikan warna dan ketebalan */
    border-width: 0.8px;
    font-size: 14pt;
    text-align: center;
}

.rumtang {
    font-size: 14pt;
    text-align: center;
}

.img-thumb {
    /*width: 150px;    /* atur lebar gambar */
    height: 90px;   /* atur tinggi gambar */
    object-fit: cover; /* agar gambar tidak melar dan terpotong rapi */
}

.img-thumb3 {
    /*width: 150px;    /* atur lebar gambar */
    height: 150px;   /* atur tinggi gambar */
    /* margin-top: 0.2cm; */
    object-fit: cover; /* agar gambar tidak melar dan terpotong rapi */
}

.img-thumb4 {
    /*width: 150px;    /* atur lebar gambar */
    height: 160px;   /* atur tinggi gambar */
    margin-top: -0.3cm;
    object-fit: cover; /* agar gambar tidak melar dan terpotong rapi */
}

.img-thumb5 {
    /*width: 150px;    /* atur lebar gambar */
    height: 110px;   /* atur tinggi gambar */
    /* margin-top: -0.3cm; */
    object-fit: cover; /* agar gambar tidak melar dan terpotong rapi */
}

/* Garis Struktur */
.garis-struktur {
    width: 260px; /* Atur sesuai kebutuhan */
    height: 6px;
    display: flex;
    margin-top: 10px;
    border-radius: 6px;
    overflow: hidden;
}

/* Bagian kiri (hitam) dan kanan (merah) */
.garis-struktur::before,
.garis-struktur::after {
    content: "";
    display: block;
    height: 100%;
    width: 50%;
    border-radius: 12px 0 0 12px; /* Kiri rounded */
    background: #686868;
}

.garis-struktur::after {
    border-radius: 0 12px 12px 0; /* Kanan rounded */
    background: rgb(196, 62, 62); /* Merah maroon */
}

.zoom-container {
    width: 100%;
    overflow: hidden;
    cursor: zoom-in;
    display: inline-block;
    position: relative;
}

.img-struktur {
    /* width: 400px;   atur lebar gambar */
    /* height: 110px;   atur tinggi gambar */
    /* margin-top: -0.3cm; */
    width: 100%;
    height: auto;
    transition: transform 0.3s ease; /* animasi halus */
    transform-origin: center center;
    cursor: pointer;
    object-fit: cover; /* agar gambar tidak melar dan terpotong rapi */
}

.img-struktur:hover {
    transform: scale(1.5); /* zoom 2x, ganti 3 untuk zoom 3x */
    z-index: 10; /* agar gambar yang di-zoom berada di atas */
    position: relative; /* agar z-index berfungsi */
}

.thumbdr {
    border-left: 0.5px solid #e7e7e7;  /* Border kiri, bisa sesuaikan warna dan ketebalan */
    border-right: 0.5px solid #e7e7e7; /* Border kanan, bisa sesuaikan warna dan ketebalan */
    border-width: 0.3px;
    /* padding-left: 1px; */
}

.card {
    border: none !important;
    box-shadow: none !important; /* jika ada bayangan yang menyerupai border */
}

.card-img-tentang {
    border-radius: 12px;
    border: none !important;
    box-shadow: none !important;
    width: 100%;
    max-width: 400px;
    height: 300px;
    object-fit: cover;
    margin: 0 auto;
    display: block;
}

.card-img-prakata {
    border-radius: 12px;
    border: none !important;
    box-shadow: none !important;
    width: 100%;
    height: 300px;
    object-fit: cover;
    display: block;
}

/* Overlay untuk popup */
.img-zoom-overlay {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0; top: 0;
    width: 100vw; height: 100vh;
    background: rgba(0,0,0,0.5);
    justify-content: center;
    align-items: center;
}

.card-img-top {
    border-radius: 12px;
    border: none !important;
    box-shadow: none !important;
    width: 100%;
    height: 250px;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease; /* animasi halus */
    transform-origin: center center;
    cursor: pointer;
}

.card-img-top2 {
    border-radius: 12px;
    border: none !important;
    box-shadow: none !important;
    width: 100%;
    height: 250px;
    object-fit: cover;
    display: block;
}

.img-zoom-overlay {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0; top: 0;
    width: 100vw; height: 100vh;
    background: rgba(0,0,0,0.5);
    justify-content: center;
    align-items: center;
}

.img-zoom-popup {
    max-width: 300px;
    max-height: 300px;
    transform: scale(2.5); /* Zoom 2.5x */
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
    border-radius: 12px;
    transition: transform 0.5s ease-in-out;
    background: #fff;
    padding: 3px;
    cursor: pointer;    
}

.card-img-top:hover {
    transform: scale(2); /* zoom 2x, ganti 3 untuk zoom 3x */
    z-index: 10; /* agar gambar yang di-zoom berada di atas */
    position: relative; /* agar z-index berfungsi */
}

.scroll-to-top i {
    color: #800000; /* kode warna maroon */
}

.img-foot {
    height: 80px;
    object-fit: cover;
}


.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-image: none; /* hilangkan gambar default */
    width: 30px;   /* sesuaikan ukuran panah */
    height: 30px;
    display: inline-block;
    position: relative;
}

.carousel-control-prev-icon::after,
.carousel-control-next-icon::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 15px;
    height: 15px;
    border-style: solid;
    border-color: #8B0000; /* merah gelap */
}

.carousel-control-prev-icon::after {
    left: 7px;
    border-width: 3px 3px 0 0;
    border-right-color: #8B0000;
    border-top-color: #8B0000;
    transform: translateY(-50%) rotate(-135deg);
}

.carousel-control-next-icon::after {
    right: 7px;
    border-width: 3px 0 0 3px;
    border-left-color: #8B0000;
    border-top-color: #8B0000;
    transform: translateY(50%) rotate(135deg);
}