.menu-link {
  display: block;
  padding: 1.4rem;
  color: black;
  text-decoration: none;
  text-align: left;
}

      /* Efek hover pada tautan dengan class "nav-link" */
      .menu-link:hover {
          color: green; /* Warna teks saat dihover */
      }

      /* Gaya aktif (current) pada tautan dengan class "menu-link" */
      .menu-link.active {
          color: #fff; /* Warna teks saat tautan aktif (current) */
          background-color: #007bff; /* Warna latar belakang saat tautan aktif (current) */
          border-radius: 0.25rem; /* Gaya sudut elemen saat tautan aktif (current) */
      }

    
/* Gaya default untuk elemen dengan class "dropdown-item" */
.menu-item {
  display: inline-block;
  width: 100%;
  padding: 0.25rem 1.5rem;
  clear: both;
  font-weight: 400;
  color: #212529;
  text-align: inherit;
  white-space: nowrap;
  background-color: transparent;
  border: 0;
}
/* Efek hover pada elemen dengan class "menu-item" */
.menu-item:hover {
color: green; /* Ganti dengan warna teks yang diinginkan saat dihover */
text-decoration: none;
}

/* Gaya saat elemen dengan class "menu-item" aktif (ditekan) */
.menu-item.active, .menu-item:active {
color: #fff; /* Ganti dengan warna teks yang diinginkan saat aktif */
background-color: #007bff; /* Ganti dengan warna latar belakang yang diinginkan saat aktif */
text-decoration: none;
}

/* Gaya saat elemen dengan class "menu-item" dalam status non-aktif (disabled) */
.menu-item.disabled, .menu-item:disabled {
color: #6c757d; /* Ganti dengan warna teks yang diinginkan saat non-aktif */
background-color: transparent;
}

@media (max-width: 768px) {
.menu-item {
    
    font-size: 14px; /* Atur ukuran font yang sesuai */
    padding: 0.25rem 0.5rem; /* Sesuaikan padding sesuai kebutuhan Anda */
}
}


.card {
      border-radius: 50px; /* Atur radius sesuai keinginan untuk efek rounded-circle */
      box-shadow: 0px 2px 20px rgba(255, 255, 255, 0.1); /* Atur nilai shadow sesuai keinginan */
  }
.rounded-card {
      
      transition: transform 0.2s; /* Efek transisi untuk animasi */ /* Atur nilai shadow sesuai keinginan */
  }
/* Mengubah tampilan saat elemen dihover */
/* Tampilan elemen saat dihover */
.footer-menu-link {
  display: inline-block;
  position: relative;
  transition: transform 0.2s;
  padding-left: 10px;
  color: black;
}

/* Menambahkan garis strip tanda -- di samping teks */
.footer-menu-link::before { /* Teks yang akan ditampilkan sebagai garis strip */
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity 0.2s;
}

/* Efek saat dihover */
.footer-menu-link:hover{
  transform: translateX(5px);
  color: white;
}

/* Efek saat dihover, menampilkan garis strip */
.footer-menu-link:hover::before {
  opacity: 1;
}

.lppm {
  color: #bad1c6;
}
.col-lg-12 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.col-md-6 {
  display: flex;
  flex-direction: column;
  align-items: center; /* Mengatur judul menjadi di tengah horisontal */
}
.hero-home {
  position: relative;
  width: 100%;
  height: 100vh;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.section-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: -1;
}
#gambar-container {
  margin-top: 100px;
  height: 700px;
  background-color: green;
  background-image: url('/assets/images/pengabdian/pengabdian-3.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
#ganti-gambar-kanan {
  position: absolute;
  right: 20px; /* Sesuaikan jarak dari kiri */
  bottom: 150px;
  font-size: 50px;
  color: brown; /* Sesuaikan jarak dari bawah */
}

@keyframes fadeOut {
0% {
  opacity: 1;
}
100% {
  opacity: 0;
  display: none;
}
}




/*AWAL CARD STYLE*/

.card-gambar {
  background-color: whitesmoke;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 0.25rem;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  padding: 1rem;
  transition: transform 1s ease-in-out, opacity 1s ease-in-out;
  transform: translateX(0);
  max-width: 500px;
  width: 100%;
  position: relative;
  top: 250px;
  right: -700px;
  overflow: hidden;
  opacity: 0.8;
}

@keyframes fadeIn {
0% {
  opacity: 0;
}
100% {
  opacity: 0.5;
}
}

.card-gambar{
opacity: 0;
animation: fadeIn 1s ease-in-out forwards;
animation-delay: 0.5s; /* Delay untuk animasi img */
}

.card-gambar.active {
animation: none;
opacity: 0.6; /* Hentikan animasi setelah gambar muncul */
}


@keyframes slideInFromLeft {
0% {
  transform: translateX(-100%);
  opacity: 0;
}
100% {
  transform: translateX(0);
  opacity: 1;
}
}

.card-gambar h5 {
opacity: 0;
transform: translateX(-100%);
animation: slideInFromLeft 1s ease-in-out forwards;
animation-delay: 0.5s; /* Delay untuk animasi h5 */
}

.card-gambar.active h5 {
opacity: 1;
transform: translateX(0);
animation: none; /* Hentikan animasi setelah muncul semua kata */
}

@keyframes slideInFromRight {
0% {
  transform: translateX(100%);
  opacity: 0;
}
100% {
  transform: translateX(0);
  opacity: 1;
}
}
.card-gambar p {
opacity: 0;
transform: translateX(100%);
animation: slideInFromRight 1s ease-in-out forwards;
animation-delay: 1s; /* Delay untuk animasi p */
}

.card-gambar.active p {
opacity: 1;
transform: translateX(0);
animation: none; /* Hentikan animasi setelah muncul semua teks */
}

/* Animasi muncul dari opacity 0 hingga 1 pada img */
@keyframes fadeIn {
0% {
  opacity: 0;
}
100% {
  opacity: 1;
}
}
/*
.img-gambar{
  text-align: right;

}*/

.card-gambar img{
opacity: 0;
float: right;
animation: fadeIn 1s ease-in-out forwards;
animation-delay: 2s; /* Delay untuk animasi img */
}

.card-gambar.active img {
opacity: 1;
animation: none; /* Hentikan animasi setelah gambar muncul */
}

/* Animasi menghilangkan tombol */
/* Animasi muncul dari kiri pada tombol */
/* Animasi muncul dari kiri pada tombol */
@keyframes slideInFromLeft {
0% {
  transform: translateX(-100%);
  opacity: 0;
}
100% {
  transform: translateX(0);
  opacity: 1;
}
}

.card-gambar button {
opacity: 0;
transform: translateX(-100%);
animation: slideInFromLeft 1s ease-in-out forwards;
animation-delay: 1.5s; /* Delay untuk animasi tombol muncul */
}

.card-gambar.active button {
opacity: 1;
transform: translateX(0);
animation: slideInFromLeft 1s ease-in-out forwards;
animation-delay: 1.5s; /* Delay untuk animasi tombol muncul */
}



/*AKHIR CARD STYLE*/


/*AWAL CARD2 STYLE*/

.card-kedua {
  background-color: whitesmoke;
  opacity: 0.8;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 0.25rem;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  padding: 1rem;
  transition: transform 1s ease-in-out, opacity 1s ease-in-out;
  transform: translateX(0);
  max-width: 500px;

  position: relative;
  top: 250px;
  left: -10px;
  overflow: hidden;
}

@keyframes fadeIn {
0% {
  opacity: 0;
}
100% {
  opacity: 0.5;
}
}

.card-kedua{
opacity: 0;
animation: fadeIn 1s ease-in-out forwards;
animation-delay: 0.5s; /* Delay untuk animasi img */
}

.card-kedua.active {
animation: none;
opacity: 0.6; /* Hentikan animasi setelah gambar muncul */
}


@keyframes slideInFromLeft {
0% {
  transform: translateX(-100%);
  opacity: 0;
}
100% {
  transform: translateX(0);
  opacity: 1;
}
}

.card-kedua h5 {
opacity: 0;
transform: translateX(-100%);
animation: slideInFromLeft 1s ease-in-out forwards;
animation-delay: 0.5s; /* Delay untuk animasi h5 */
}

.card-kedua.active h5 {
opacity: 1;
transform: translateX(0);
animation: none; /* Hentikan animasi setelah muncul semua kata */
}

@keyframes slideInFromRight {
0% {
  transform: translateX(100%);
  opacity: 0;
}
100% {
  transform: translateX(0);
  opacity: 1;
}
}
.card-kedua p {
opacity: 0;
transform: translateX(100%);
animation: slideInFromRight 1s ease-in-out forwards;
animation-delay: 1s; /* Delay untuk animasi p */
}

.card-kedua.active p {
opacity: 1;
transform: translateX(0);
animation: none; /* Hentikan animasi setelah muncul semua teks */
}

/* Animasi muncul dari opacity 0 hingga 1 pada img */
@keyframes fadeIn {
0% {
  opacity: 0;
}
100% {
  opacity: 1;
}
}

.card-kedua img{
opacity: 0;
animation: fadeIn 1s ease-in-out forwards;
animation-delay: 2s; /* Delay untuk animasi img */
}

.card-kedua.active img {
opacity: 1;
animation: none; /* Hentikan animasi setelah gambar muncul */
}

/* Animasi menghilangkan tombol */
/* Animasi muncul dari kiri pada tombol */
/* Animasi muncul dari kiri pada tombol */
@keyframes slideInFromLeft {
0% {
  transform: translateX(-100%);
  opacity: 0;
}
100% {
  transform: translateX(0);
  opacity: 1;
}
}

.card-kedua button {
opacity: 0;
transform: translateX(-100%);
animation: slideInFromLeft 1s ease-in-out forwards;
animation-delay: 1.5s; /* Delay untuk animasi tombol muncul */
}

.card-kedua.active button {
opacity: 1;
transform: translateX(0);
animation: slideInFromLeft 1s ease-in-out forwards;
animation-delay: 1.5s; /* Delay untuk animasi tombol muncul */
}

/* Aturan CSS untuk membuat tabel responsif pada layar kecil */
@media (max-width: 768px) {
  .table-responsive {
      overflow-x: auto;
  }
  .table {
      width: 100%;
  }
  th, td {
      white-space: nowrap;
  }
}


/*AKHIR CARD2 STYLE*/


.card-container {
      display: flex;
      flex-direction: row; /* Membuat elemen berada dalam satu baris */
}

.card {
  flex: 1; /* Meratakan lebar setiap kartu */
  margin: 10px; /* Memberikan jarak antara setiap kartu */
  padding: 10px;
  border: 1px solid #ccc;
}

.card-custom{
	border: 1px solid black;
	padding: 10px;
}

.text-hki{
	text-align: justify;
	font-family: 'Open Sans', sans-serif;
}

.header-layanan{
	margin-left: 20px;
}

.text-home {
	color: black;
	font-size: 20px;
	text-align: center;
	
	font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

.text-home-tupoksi {
	color: black;
	font-size: 25px;
	text-align: center;
	
	font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

.text-tupoksi-pegawai {
	color: black;
	font-size: 18px;
	text-align: center;
	
	font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

.text-home-body{
	font-family: 'Open Sans', sans-serif;
	text-align: center;
}
.text-home-tujuan{
	text-align:justify;
}

.bagan{
	text-align: center;
}

.bagan-judul{
	font-size: 20px;
	color: black;
	font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

.line-container {
		position: relative;
		width: 1px;
		height: 50px;
		background-color: #000;
		margin-top: -10px;
		margin-bottom: -10px;
}

.line-container::before {
		content: '';
		position: absolute;
		width: 147px;
		height: 1px;
		background-color: #000;
		top: 48%;
		left: -302px;
		transform: rotate(-21deg);
}

.line-container::after {
	content: '';
	position: absolute;
	width: 147px;
	height: 1px;
	background-color: #000;
	top: 48%;
	left: 156px;
	transform: rotate(21deg);
}

.modal_card:hover {
	cursor: pointer;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
	transition: box-shadow 0.3s ease;
}

.card-tentang-lppm {
	margin-bottom: 80px;
	padding: 20px;
	border-right: 3px solid grey;
	border-bottom: 3px solid grey;
	border-bottom-right-radius: 20px;
}

.custom-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

  /* Menerapkan gradient hanya di border-left dan border-bottom */
  /* background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%),
              linear-gradient(to right, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);
  background-position: left bottom, left top;
  background-size: 100% 50%, 100% 50%, 1% 1%, 1px 1px;
  background-repeat: no-repeat; */
	background: linear-gradient(to bottom, rgba(192, 192, 192, 0.5) 0%, rgba(192, 192, 192, 0.2) 100%),
              linear-gradient(to right, rgba(192, 192, 192, 0.5) 0%, rgba(192, 192, 192, 0.1) 100%);
  background-position: left bottom, left top;
  background-size: 100%, 100% ;
  background-repeat: no-repeat;
}