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;
}

/* Specific footer navigation: ensure no wrapping */
.footer-nav {
    display: flex;
    flex-wrap: nowrap; /* Ensure all nav items are on one line */
    justify-content: flex-end; /* Align items to the right side if space allows */
}

/* Styling for the footer nav links */
.footer-nav .nav-link {
    padding-left: 0.5rem; /* Reduced padding between items */
    padding-right: 0.5rem;
    white-space: nowrap; /* Ensure links don't wrap onto new lines */
}

/* Footer nav adjustments for smaller screens */
@media (max-width: 576px) {
    /* Reduce font size and padding for footer nav links on mobile */
    .footer-nav .nav-link {
        font-size: 0.8rem; /* Smaller font for mobile */
        padding-left: 0.3rem;
        padding-right: 0.3rem;
    }
    
    /* Adjust footer logo size if needed */
    .footer-nav img {
        height: 30px; /* Smaller logo */
        width: 40px;
    }

    /* Adjust footer heading size for mobile view */
    .footer-nav h5 {
        font-size: 0.9rem;
    }
}

/* 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;
}

.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-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;
}