body {
    font-family: "PT Sans", sans-serif;
    font-weight: normal;
    font-style: normal;
    font-size: 14px;
}

/* Navbar styles */
.navbar {
    padding: 10px; /* Padding untuk navbar */
}

.navbar-nav {
    list-style: none; /* Menghapus bullet list */
    padding: 0;
    margin: 0;
    display: flex; /* Mengatur item nav untuk ditampilkan secara horizontal */
}

.profile-img {
    width: 35px;
    height: 35px;
    object-fit: cover;
    margin-right: 10px;
}

.icon-circle {
    padding-top: 2px;
    color: white;
    display: inline-block;
    width: 38px;
    /* Ukuran lebar border lingkaran */
    height: 38px;
    /* Ukuran tinggi border lingkaran */
    border-radius: 50%;
    /* Membuat border menjadi lingkaran */
    border: 0px solid #000;
    /* Warna dan ketebalan border */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
}
.icon-circle:hover {
    color: white;
}

.nav-item {
    position: relative; /* Posisi relatif untuk dropdown positioning */
    margin-right: 10px; /* Jarak antara item nav */
}

.nav-link {
    display: block; /* Mengatur link untuk mengisi kontainer */
    padding: 10px 15px; /* Padding untuk link */
    color: #5e5c64; /* Warna teks */
    text-decoration: none; /* Menghapus garis bawah */
}

.nav-link:hover {
    background-color: #e9ecef; /* Warna latar belakang saat hover */
}

.dropdown-content {
    display: none; /* Menyembunyikan dropdown secara default */
    position: absolute; /* Posisi absolut untuk menampilkan dropdown di bawah item nav */
    background-color: #f9f9f9; /* Warna latar belakang dropdown */
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); /* Bayangan dropdown */
    min-width: 160px; /* Lebar minimum dropdown */
    z-index: 1; /* Menjamin dropdown berada di atas elemen lain */
    left: 0; /* Menyelaraskan dropdown dengan item nav */
}

.dropdown-content a {
    color: black; /* Warna teks item dropdown */
    padding: 12px 16px; /* Padding item dropdown */
    text-decoration: none; /* Menghapus garis bawah */
    display: block; /* Menampilkan item dropdown sebagai blok */
}

.dropdown-content a:hover {
    background-color: #f1f1f1; /* Warna latar belakang item saat hover */
}

.nav-item:hover .dropdown-content {
    display: block; /* Menampilkan dropdown saat item nav di-hover */
}

h5 {
    font-family: "DM Sans";
}

a {
    text-decoration: none;
    color: inherit;
    font-size: 16px;
}

.dm-sans {
    font-family: "DM Sans";
}

hr.tipis {
    opacity: 10%;
}

.thick-hr {
    border-top: 5px solid rgba(0, 17, 255, 0.473);
    width: 10%; /* 10% dari lebar kontainer */
    margin: 0; /* Menghilangkan margin */
    border-radius: 5px; /* Membuat sudut rounded */
}

.thin-hr {
    border: none;
    border-top: 1px solid lightgray; /* Garis tipis biasa */
    width: 100%; /* Lebar penuh */
    position: absolute; /* Menempatkan di atas thick-hr */
    top: 0; /* Berada pada posisi atas thick-hr */
    left: 0; /* Mengatur posisi kiri */
}

th.besar {
    color: green;
    font-size: 40px;
}

td.center {
    font-size: 15px;
    text-align: left;
    vertical-align: middle; /* Vertical centering */
}

.card {
    border-radius: 10px; /* Sudut rounded */
    overflow: hidden; /* Agar konten tidak meluap */
}
.card-img-top {
    width: 100%; /* Mengatur gambar agar sesuai dengan lebar card */
    height: auto; /* Menjaga rasio gambar */
    border-bottom: 1px solid #ddd; /* Opsional: garis bawah untuk pemisahan gambar dan body card */
}

/* Footer */
.footer-fullwidth {
    background: linear-gradient(
        to bottom,
        #f0f6ff,
        #ffffff
    ); /* Warna background light yang diinginkan */
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    padding-left: 15px; /* Sesuaikan padding sesuai dengan margin kontainer */
    padding-right: 15px; /* Sesuaikan padding sesuai dengan margin kontainer */
}

.footer-fullwidth .container {
    padding-left: 0;
    padding-right: 0;
}

/* berita */
.news-item {
    margin-bottom: 30px;
}
.news-title {
    font-size: 1.5rem;
    font-weight: bold;
    color: #333;
}
.news-date {
    font-size: 0.9rem;
    color: #888;
}
.news-content {
    font-size: 1rem;
    color: #555;
}

.img-hover-blur {
    transition: filter 0.3s ease;
}

.img-hover-blur:hover {
    filter: blur(3px);
}

/* media sosial */

.bi-facebook {
    color: #3b5998; /* Facebook blue */
}

.bi-youtube {
    color: #ff0000; /* YouTube red */
}

.bi-instagram {
    color: #c13584; /* Instagram gradient color */
}

.social-icon {
    width: 60px; /* Set the width for the icon container */
    height: 60px; /* Set the height for the icon container */
    border-radius: 5px; /* Optional: Rounded corners */
    text-decoration: none; /* Remove underline on hover */
}

/* container */

h1,
h2,
h3,
h4,
h5,
h6,
.font-heading,
.btn,
.post-title {
    font-style: normal;
    font-weight: 700;
    text-transform: none;
    font-family: "Lora", sans-serif;
    line-height: 1.4;
}

.img {
    max-width: 100%;
    -webkit-transition: all 0.2s ease-out 0s;
    -moz-transition: all 0.2s ease-out 0s;
    -ms-transition: all 0.2s ease-out 0s;
    -o-transition: all 0.2s ease-out 0s;
    transition: all 0.2s ease-out 0s;
}
.img-circle {
    border-radius: 50%;
}
.overflow-hidden {
    overflow: hidden;
}
.clear {
    clear: both;
}

@media (max-width: 767.98px) {
    .small-img-mobile {
        width: 100%; /* Sesuaikan ukuran gambar sesuai kebutuhan */
        margin-bottom: 10px; /* Tambahkan margin bawah */
        max-width: 100%;
        height: auto;
    }
    .navbar-nav {
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        white-space: nowrap;
    }

    .navbar-nav .nav-item {
        display: inline-block;
    }

    .navbar-nav .dropdown-menu {
        position: absolute;
    }

    .navbar-nav .dropdown-menu.show {
        top: 100%;
        left: 0;
        right: 0;
    }

    .navbar-nav .dropdown-item {
        white-space: normal;
    }

    .row.p-5.m-5 {
        padding: 2rem !important;
        margin: 2rem !important;
    }

    .row.border-bottom.mb-3 .col-md-2,
    .row.mb-3 .col-md-2 {
        flex: 0 0 100%;
        max-width: 100%;
        text-align: center;
        margin-bottom: 1rem;
    }

    .row.border-bottom.mb-3 .col-md-8,
    .row.mb-3 .col-md-8 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .row .col-md-8 h5 {
        font-size: 1.2rem;
    }

    .row .col-md-8 p small {
        font-size: 0.9rem;
    }
}

/* Membuat carousel responsif */
#carouselExampleInterval {
    max-width: 100%;
    height: 550px; /* Sesuaikan dengan kebutuhan */
    overflow: hidden; /* Menyembunyikan overflow */
}

.carousel-inner {
    height: 100%;
}

.carousel-item {
    height: 100%; /* Mengisi tinggi kontainer carousel */
}

.carousel-item img {
    object-fit: cover; /* Menyesuaikan gambar dengan kontainer */
    width: 100%;
    height: 100%; /* Menyesuaikan tinggi gambar */
    display: block; /* Menghindari space di bawah gambar */
}

/* Media query untuk tampilan mobile */
@media (max-width: 767px) {
    #carouselExampleInterval {
        height: 300px; /* Sesuaikan tinggi untuk tampilan mobile */
    }
}

.blog-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.book-title {
    display: -webkit-box;
    -webkit-line-clamp: 4; /* Number of lines to display before truncating */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0; /* Remove any default margin if necessary */
}

.blog-title {
    display: -webkit-box;
    -webkit-line-clamp: 3; /* Number of lines to display before truncating */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0; /* Remove any default margin if necessary */
}

.blog-title-sm {
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Number of lines to display before truncating */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0; /* Remove any default margin if necessary */
}

.blog-title-xs {
    display: -webkit-box;
    -webkit-line-clamp: 1; /* Number of lines to display before truncating */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0; /* Remove any default margin if necessary */
}

.blog-date {
    display: block;
    margin-top: 0.5rem; /* Adjust spacing as needed */
    color: #6c757d; /* Bootstrap's text-muted color */
}

.img-mobile-padding {
    padding-top: 0.5rem; /* Adjust padding as needed */
}

@media (max-width: 767.98px) {
    /* Bootstrap's breakpoint for mobile devices */
    .img-mobile-padding {
        padding-top: 0.5rem; /* Padding on mobile view */
    }
}

.table td {
    padding: 1.6rem; /* Sesuaikan nilai ini sesuai kebutuhan */
    font-size: 1.1rem;
}

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

/* ojo diapus jing iki lokasi!!!! */
@media (max-width: 767.98px) {
    .border-md-end {
        border-right: none;
        border-bottom: 1px solid #ffffff;
    }
}

@media (min-width: 768px) {
    .border-md-end {
        border-right: 1px solid #ffffff;
        border-bottom: none;
    }
}

/* carousel pengumuman */
.img-hover-blur {
    transition: filter 0.3s ease;
}

.img-hover-blur:hover {
    filter: blur(3px);
}

/* Style for Desktop Carousel Controls */
#desktopCarousel .custom-control {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    background-color: rgba(128, 128, 128, 0.7);
    /* Gray with transparency */
    border-radius: 50%;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s ease;
}

#desktopCarousel .custom-control:hover {
    background-color: rgba(128, 128, 128, 1);
    /* Darker gray on hover */
}

#desktopCarousel .carousel-control-prev {
    left: -60px;
    /* Adjust the distance to be outside the image */
}

#desktopCarousel .carousel-control-next {
    right: -60px;
    /* Adjust the distance to be outside the image */
}

#desktopCarousel .bi-chevron-left,
#desktopCarousel .bi-chevron-right {
    font-size: 1.5rem;
    /* Adjust size of the arrows */
    color: #fff;
    /* White color for the arrows */
}

/* Style for Mobile Arrow Buttons Inside the Image */
#mobileCarousel .carousel-control-prev,
#mobileCarousel .carousel-control-next {
    width: 40px;
    /* Adjust width */
    height: 40px;
    /* Adjust height */
    background-color: rgba(0, 0, 0, 0.5);
    /* Semi-transparent background */
    border-radius: 50%;
    top: 50%;
    /* Center vertically */
    transform: translateY(-50%);
    z-index: 2;
    /* Ensure buttons are above the image */
}

#mobileCarousel .carousel-control-prev {
    left: 10px;
    /* Inside the image */
}

#mobileCarousel .carousel-control-next {
    right: 10px;
    /* Inside the image */
}

#mobileCarousel .carousel-control-prev-icon,
#mobileCarousel .carousel-control-next-icon {
    background-size: 100%, 100%;
    color: #fff;
    /* White color for the arrow icons */
}

/** LIGHTBOX MARKUP **/

.lightbox {
  /* Default to hidden */
  display: none;

  /* Overlay entire screen */
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  
  /* A bit of padding around image */
  padding: 1em;

  /* Translucent background */
  background: rgba(0, 0, 0, 0.8);
}

/* Unhide the lightbox when it's the target */
.lightbox:target {
  display: block;
}

.lightbox span {
  /* Full width and height */
  display: block;
  width: 100%;
  height: 100%;

  /* Size and position background image */
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}