/* Main Style */
@import url('https://fonts.googleapis.com/css2?family=Texturina:ital,opsz,wght@0,12..72,100;0,12..72,200;0,12..72,300;0,12..72,400;0,12..72,500;0,12..72,600;0,12..72,700;0,12..72,800;0,12..72,900;1,12..72,100;1,12..72,200;1,12..72,300;1,12..72,400;1,12..72,500;1,12..72,600;1,12..72,700;1,12..72,800;1,12..72,900&display=swap');

body {
    font-family: 'Montserrat', sans-serif;
    padding: 0;
    margin: 0;
    overflow-x: hidden;
}
#body {
    background-color: #eeeeef !important;

}

#news {
    background-color: #ffffff !important;
}

/* Topbar Style */
#topbar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 10px;
}

.search-container {
    position: relative;
    overflow: hidden;
}

#search-icon {
    background: none;
    border: none;
    cursor: pointer;
    outline: none;
}

#search-icon i {
    font-size: 24px;
    color: #fff;
}

#search-input {
    width: 0;
    padding: 8px;
    border: none;
    outline: none;
    background-color: transparent;
    color: #fff;
    transition: width 0.5s ease-in-out;
    border-bottom: 2px solid transparent;
}

#search-input::placeholder {
    /* Tambahkan aturan berikut untuk mengubah warna teks placeholder menjadi putih */
    color: #fff;
}

#search-input:focus {
    width: 150px;
    border-bottom: 2px solid #fff; /* Menambahkan border bottom saat input dalam keadaan focus */
}


/* Card Info Style */

#card-info-caro .right-text {
    background-color: #185198;
    color: aliceblue;
}

#card-info-caro .card-info-box:body {
    height: 100px;
}

/* Footer Style */
#footer {
    margin-top: 30px;
    z-index: 2;
    position: relative;
    /* Add this line */
}

.footer-card {
    width: 400px;
    position: absolute;
    bottom: 0;
    /* Set footer-card to be at the bottom of the parent container */
    transform: translateY(50%);
    z-index: 3;
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);
}

.footer-blue {
    color: aliceblue;
    height: 250px;
}

/* Informasi Style */
#information {
    background-color: #eeeeef;
}

/* Infografis Style */
#infographic {
    background-color: #fefefe;
}

/* Styling for main-literasi */
.main-literasi {
    position: relative;
}

/* Styling for literasi-card */
.literasi-card {
    background-color: #ffcc00;
    padding: 10px 20px;
    /* Adjust padding to control card height */
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);
    position: absolute;
    top: 0;
    /* Position at the top of main-literasi */
    left: 50%;
    /* Move to the center horizontally */
    transform: translate(-50%, -50%);
    /* Center both horizontally and vertically */
    z-index: 3;
    width: 70%;
    /* Adjust the width as needed */
    max-width: 400px;
    /* Add max-width to keep it responsive */
    height: 50px;
    /* Set the desired height */
    display: flex;
    align-items: center;
    /* Center the content vertically */
    justify-content: center;
    /* Center the content horizontally */
}

.literasi-card h3 {
    margin: 0;
}

/* Styling for main-literasi */
.main-literasi {
    position: relative;
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.3);
    /* Increase the opacity value */
}

.pengumuman-header {
    background-color: #08153f;
    color: #ffffff;
    height: 50px;
}

.pengumuman-body,
.agenda-body,
.gpr-body
 {
    height: 500px;
    overflow-y: auto;
}


.color-blue {
    color: #194b81;
}

.color-dark {
    color: #332c2b;
}

.info-text {
    font-size: 10px;
}



.hover-grow {
    transition: transform 0.1s ease-in-out;
}

.hover-grow:hover {
    transform: scale(1.01);
}

.text-fitur {
    color: #000000;
    font-weight: bold;
}

.btn-fitur {
    width: 150px;
}

.navbrand-pemkab {
    height: 50px;
}

.imgbrand {
    margin-right: 20px;
}

.topbrand {
    font-size: 15px;
    font-weight: bold;
}

.botbrand {
    font-size: 15px;
    font-weight: bold;
}

.card {
    border-radius: 0px 0px 0px 0px !important;
}
.card-header,
.card-body {
    border-radius: 0px 0px 0px 0px !important;
}

.card-berita {
    height: 310px;
}

.berita-thumbnail {
    height: 200px;
    padding: 0px 0px 0px 0px;
}

.berita-thumb {
    width: 100%;
    height: 100%;
}

.featured-news {
    background: transparent;
    border: none;
}

.stacked-news {
    height: 250px;
}

.thumbs-img {
    height: 200px;
}

.custom-horizontal-line {
    border: solid 1px #000;
}

.custom-vertical-line {
    border: solid 400px #000;
    width: 1px !important;
}

.nav-tabs-block {
    background-color: transparent;
    color: #fff;
    border: none;
}

.nav-tabs .nav-link.active {
    border: none;
    border-color: transparent;
}

.nav-tab-link {
    width: 200px;
    height: 50px;
    background-color: #08153f;
    color: #ffffff;
    border: none;
    border-color: transparent;
}

.nav-tab-link.active {
    width: 200px;
    height: 50px;
    background-color: #ffcc00;
    color: #000000;
}

.gallery-name {
    font-weight: bolder;
}

.agenda-datetime {
    border: none;
    border-radius: 0px 0px 0px 0px;
    background: #fff;
    color: #000;
}

.pengumuman-link {
    text-decoration: none;
    color: #000;
}

#infografis .carousel-control-prev,
#infografis .carousel-control-next {
    display: none;
}

.custom-img {
    width: 100%;
    height: 700px; /* Sesuaikan dengan tinggi default yang diinginkan */
    /*object-fit: cover;  Untuk memastikan gambar tetap proporsional */
}

.custom-topmagz-card {
    position: relative;
    overflow: hidden;
    border: 1px solid #ddd;
    border-radius: 5px;
    width: 100%;
}

.readLinks{
    text-decoration: none;
}

.tags
{
    padding-left: 10px;
    padding-right: 10px;
}

.element-with-double-border {
    position: relative;
    display: inline-block;
    padding: 5px; /* Sesuaikan padding sesuai kebutuhan */
}

.element-with-double-border::before,
.element-with-double-border::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border: 1px solid #000;
    box-sizing: border-box;
}

.element-with-double-border::before {
    top: -3px; /* Sesuaikan jarak antara border luar dan border dalam */
    left: -3px; /* Sesuaikan jarak antara border luar dan border dalam */
}

.element-with-double-border::after {
    bottom: -3px; /* Sesuaikan jarak antara border luar dan border dalam */
    right: -3px; /* Sesuaikan jarak antara border luar dan border dalam */
}


/* ------------------------------------------------------------------------------- */
.ul-category {
    list-style: none;
    padding: 0;
}

.ul-category li {
    margin-bottom: 10px;
    padding: 10px;
    background-color: white;
    color: black;
    border-radius: 0px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
}

.ul-category li i {
    margin-right: 10px;
}

.toa-container {
    display: flex;
    align-items: center;
}

.toa {
    margin-right: 10px; /* Sesuaikan dengan jarak yang diinginkan */
}

.judul-agenda {
    margin: 0 auto; /* Membuat judul rata tengah */
    text-align: center;
}

.gallery-item {
    position: relative;
    overflow: hidden;
}

.gallery-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7); /* Warna latar belakang overlay */
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.gallery-item:hover .gallery-overlay {
    opacity: 1;
}

.text-featured{
    color: #fff;
}

.news-excerpt
{
    font-size: 0.9em;
}

.custom-hr {
    border: 1px ;
    height: 1px; /* Sesuaikan tinggi garis horizontal */
    background-color: transparent;
    border-bottom: 1px dotted #000; /* Warna garis dan jenis titik dapat disesuaikan */
}

.pengumuman-item {
    margin-bottom: 20px; /* Ganti dengan nilai margin yang sesuai */
}

.iframe-container {
    position: relative;
    overflow: hidden;
    padding-top: 56.25%; /* Adjust the aspect ratio as needed (16:9 ratio) */
}

.iframe-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.other{
    font-size: 0.9em;
}

.pengumuman-size{
    font-size: 0.9em;
}

.article-label,
.pub-date{
    color: rgb(0, 13, 196);
    font-size: 0.7em;
}

.gpr-link{
    text-decoration: none;
    font-size: 0.9em;
}

.kategori-link{
    text-decoration: none;
}

.list-item-container{
    display: block;
}

.article-script, .meta-info
{
    font-size: 0.8em;
}

.site-name {
    font-weight: bold;
}

.pemkab-text {
    font-size: 0.7em;
}

.nav-besar{
    font-weight: bold !important;
}

.card-link{
    text-decoration: none;
}

.fitur-card {
    width: 100%;
    height: 300px;
}

.no-decor {
    text-decoration: none;
}



.bold-link{
    font-weight: bold;
}

/* Untuk layar besar */
@media (min-width: 992px) {
    .readLinks h4 {
        text-align: left; /* Mengatur h4 menjadi rata kiri */
    }
}

/* Untuk layar kecil (misalnya mobile) */
@media (max-width: 991px) {
    .readLinks h4 {
        text-align: center; /* Mengatur h4 menjadi ditengah */
    }
}

.running-text {
    background-color: rgba(48, 48, 48, 0.7); /* Set background color with transparency */
    padding: 10px; /* Add padding for better readability */
}

.running-text marquee {
    width: 100%; /* Make sure the marquee fills the container */
    white-space: nowrap; /* Prevent text from wrapping */
}

span.runtext {
    font-weight: bold;
    color: white;
}

@media (max-width: 767px) {
    #carousel {
        display: none;
    }
}

.search-block{
    background-color: #fff;
    color: #222;
    border: 1px solid #222;
}

.mb-35
{
    margin-bottom: 35px;
}

.bg-blue-widget
{
    background-color: #0848ca ;
}