html, body {
    overflow-x: hidden;
    width: 100%;
}
.custom-navbar {
    background: rgba(255, 255, 255, 0.2); /* transparan awal */
    transition: background 0.3s ease;
    backdrop-filter: blur(10px);
}

.custom-navbar.scrolled {
    background: rgba(255, 255, 255, 1); /* jadi putih full pas discroll */
}
/* Style untuk link navbar */
.custom-navbar .navbar-nav .nav-link {
    font-size: 14px;           /* kecilin font */
    font-weight: 500;          /* semi-bold */
    color: #333 !important;    /* default gelap */
    text-transform: uppercase; /* huruf besar semua (kayak di gambar 1) */
    padding: 20px 15px;        /* kasih spasi biar rata */
    transition: color 0.3s ease;
}

/* Hover & focus */
.custom-navbar .navbar-nav .nav-link:hover,
.custom-navbar .navbar-nav .nav-link:focus {
    color: #06BBCC !important; /* biru pas hover */
}

/* Active menu */
.custom-navbar .navbar-nav .nav-link.active {
    color: #06BBCC !important; /* biru kayak gambar 1 */
    font-weight: 600;
}

/* Hover submenu */
.dropdown-menu .dropdown-item:hover {
    background-color: #94f6ff !important; /* biru khas lo */
    color: black !important; /* font putih */
}

/* Active submenu */
.dropdown-menu .dropdown-item.active {
    background-color: #06BBCC !important;
    color: #fff !important;
}



.navbar-brand {
    display: flex;
    align-items: center; /* logo & teks sejajar vertikal */
    height: 60px;        /* samain dengan tinggi logo */
}

.navbar-brand img {
    max-height: 60px;
    width: auto;
}

.logo-text {
    margin-left: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center; /* teks ditengah blok sejajar logo */
    height: 60px;            /* samain tinggi dengan logo */
}

.logo-text > p {
    margin: 0;          /* hapus margin bawaan */
    line-height: 1.2;   /* rapetin jarak antar teks */
    font-size: 13px;
    font-weight: 400;
    color: #06BBCC;
}

.logo-text > .nama-desa {
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 1.3; /* sedikit lebih lega biar kelihatan beda */
}

/* Default navbar sebelum scroll */
.custom-navbar .navbar-nav .nav-link {
    font-size: 14px;
    font-weight: 500;
    color: #fff !important;        /* putih dulu */
    text-transform: uppercase;
    padding: 20px 15px;
    transition: color 0.3s ease;
}

/* Hover & Active (tetep keliatan pas background transparan) */
.custom-navbar .navbar-nav .nav-link:hover,
.custom-navbar .navbar-nav .nav-link:focus {
    color: #06BBCC !important;
}

/* Pas navbar udah discroll */
.navbar.scrolled .nav-link {
    color: #333 !important;        /* jadi abu gelap */
}

/* Active setelah scroll */
.navbar.scrolled .nav-link.active {
    color: #06BBCC !important;
}

.service-item a {
    color: inherit;      /* Warna sama kayak parent */
    text-decoration: none; /* Hilangkan underline */
    font-weight: inherit;  /* Samain font-weight */
    font-size: inherit;    /* Samain ukuran font */
}

.custom-btn-selengkapnya{
    cursor: pointer; 
    width: 100%; 
    background-color: #06BBCC; 
    border-color: #06BBCC; 
    border-radius: 21px; 
    color: white; 
    text-transform: none; 
    font-size: 17px; 
    font-weight: 500;
}

.custom-btn-selengkapnya:hover{
    background-color: #333; 
    border-color: #333; 
    color: white; 
}

/* Custom hamburger icon */
.navbar-toggler {
    border: none;
    outline: none;
}

.navbar-toggler-icon {
    display: inline-block;
    width: 30px;
    height: 2px;
    background-color: #333;
    position: relative;
    transition: all 0.3s;
}

.navbar-toggler-icon::before,
.navbar-toggler-icon::after {
    content: '';
    position: absolute;
    left: 0;
    width: 30px;
    height: 2px;
    background-color: #333;
    transition: all 0.3s;
}

.navbar-toggler-icon::before {
    top: -8px;
}

.navbar-toggler-icon::after {
    top: 8px;
}

/* Default hamburger icon (warna putih di navbar transparan) */
.navbar-toggler-icon,
.navbar-toggler-icon::before,
.navbar-toggler-icon::after {
    background-color: #fff;
}

/* Custom hamburger structure */
.navbar-toggler {
    border: none;
    outline: none;
}

.navbar-toggler-icon {
    display: inline-block;
    width: 30px;
    height: 2px;
    position: relative;
    transition: all 0.3s;
}

.navbar-toggler-icon::before,
.navbar-toggler-icon::after {
    content: '';
    position: absolute;
    left: 0;
    width: 30px;
    height: 2px;
    transition: all 0.3s;
}

.navbar-toggler-icon::before {
    top: -8px;
}

.navbar-toggler-icon::after {
    top: 8px;
}

/* Saat navbar udah discroll */
.navbar.scrolled .navbar-toggler-icon,
.navbar.scrolled .navbar-toggler-icon::before,
.navbar.scrolled .navbar-toggler-icon::after {
    background-color: #333; /* warna hitam */
}



/* IDM Section Start */
    .banner-content-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    background: #fff;
    border-radius: 20px;
    padding: 15px;
    gap: 15px;
    position: relative;
    }

    /* PANEL BIRU KIRI */
    .banner-left {
    background: #06BBCC;
    color: #fff;
    padding: 25px 20px;
    border-radius: 20px 0 0 20px;
    text-align: center;
    min-width: 180px; /* Konsisten lebarnya */
    display: flex;
    flex-direction: column;
    justify-content: center;
    }

    /* PANEL PUTIH BORDER */
    .banner-right {
    flex: 1;
    background: #fff;
    border: 2px solid #06BBCC;
    border-radius: 12px;
    padding: 15px 20px;
    position: relative;
    }

    /* TOMBOL DETAIL */
    .btn-detail {
        background: #06BBCC;
        color: #fff;
        border-radius: 20px;
        padding: 5px 15px;
        font-size: 0.85rem;
        font-weight: bold;
        position: absolute;
        bottom: -15px;
        right: 20px;
        box-shadow: 0 3px 6px rgba(0,0,0,0.1);
        white-space: nowrap;
        text-decoration: none;
        transition: all 0.3s ease; /* Animasi halus */
    }

    .btn-detail:hover {
        background: #0499a6; /* Warna sedikit lebih gelap */
        transform: translateY(-5px); /* Naik sedikit */
        box-shadow: 0 6px 12px rgba(0,0,0,0.2); /* Bayangan lebih tegas */
        color: white;
    }


    /* RESPONSIVE */
    @media (max-width: 768px) {
        .banner-content-wrapper {
            flex-direction: column;
            padding: 10px;
        }
        .banner-left {
            border-radius: 15px 15px 0 0;
            min-width: unset;
            width: 100%;
            padding: 15px 10px;
        }
        .banner-right {
            border-radius: 0 0 15px 15px;
            padding: 12px;
        }
        .btn-detail {
            position: static;
            margin-top: 10px;
            align-self: flex-end;
        }
    }

/* IDM Section End */

/* Infografis Section Start */
    .stat-card {
        border: none;
        border-radius: 20px;
        box-shadow: 0 4px 10px rgba(0,0,0,0.08);
        transition: all 0.3s ease;
    }

    .stat-card:hover {
        transform: translateY(-5px) scale(1.02);
        box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    }

    .icon-circle {
        width: 65px;
        height: 65px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 2rem;
        flex-shrink: 0;
    }

    .stat-text {
        padding-left: 10px; /* 🔥 Tambah jarak antara icon & teks */
    }
/* Infografis Section End */

/* Berita Section Start */
    .berita-img {
        width: 100%;
        height: 200px; /* Fix tinggi gambar biar rata */
        object-fit: cover;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
    }

    .berita-desc {
        display: -webkit-box;
        -webkit-line-clamp: 3; /* Batasin deskripsi aja */
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 15px;
        text-align: justify;
    }

    .card-hover {
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .card-hover:hover {
        transform: translateY(-8px);
        box-shadow: 0 8px 20px rgba(0,0,0,0.2);
    }
    /* Card hover efek biar lebih keren */
    .course-item {
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        border-radius: 10px;
        height: 100%;
    }
    .course-item:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    }
    .card-berita > a {
        color: inherit !important;
        text-decoration: none !important;
        font: inherit !important;
    }
/* Berita Section End */


/* Pagination Start */
.pagination .page-item .page-link {
    border-radius: 6px;
    margin: 0 1px;
    padding: 6px 12px;
    font-size: 1rem;
    color: #06BBCC;
    font-weight: 500;
}
.pagination .page-item.active .page-link {
    background-color: #06BBCC;
    border-color: #06BBCC;
    color: #fff;
}
.pagination .page-link:hover {
    background-color: #06BBCC;
    border-color: #06BBCC;
    color: #fff;
}

/* Pagination End */