.pkp_site_name {padding-top: 0 !important; padding-bottom: 0 !important}
.pkp_site_name > a {padding-top: 0; padding-bottom: 0;}
.pkp_site_name .is_img img {max-height: 200px !important;}
.pkp_site_name_wrapper {padding-left: 0; padding-right: 0;}
.pkp_navigation_user_wrapper {top: 0; right: 0; padding-right:30px;}
.pkp_structure_page {margin-top:  20px !important; margin-bottom:20 !important; padding-bottom: 20 !important;}

.pkp_navigation_primary_row {
    background-color:#008fd7 ;
    color: #fff;
    padding-left: 5px;
}

.pkp_navigation_primary{
    color: #fff;
}

.vertical-menu {
width: 100%; /* lebar dari menu, saran saya tidak perlu di ubah */
}

.vertical-menu a {
background-color: #fff; /* Warna pada bagian body menu */
color: black; /* Warna tulisan */
display: block;
padding: 12px;
text-decoration: none;
font-family: arial; /*Jenis font*/
}

.vertical-menu a:hover {
background-color: #a0d9f6; /* Warna efek yang keluar ketika di arahkan mouse */
}

.vertical-menu a.active {
background-color: #008fd7; /* Warna pada header menu */
color: white; /*Warna font*/
font-family: arial; /*Jenis font*/
}

/*ABOUT*/
.jv-judul{
	display: flex; 
	align-items: center; 
	margin-bottom: 25px;
}

.jv-borderkr{
	width: 6px; 
	height: 40px; 
	background: linear-gradient(to bottom, #8f6900, #ffbb00); 
	border-radius: 3px; 
	margin-right: 15px;
}

.jv-jdlh1{
	margin: 0 !important; 
	color: #2c3e50 !important; 
	font-size: 24px !important;
}

/*anounce*/
.announcement-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.announcement-card {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    transition: transform 0.2s ease;
}

.announcement-card:hover {
    transform: translateY(-4px);
}

.announcement-title a {
    color: #ff9800;
    text-decoration: none;
    font-weight: 600;
}

.announcement-date {
    margin: 10px 0 15px;
    color: #666;
    font-size: 14px;
    font-style: italic;
}

.announcement-button {
    display: inline-block;
    padding: 8px 16px;
    background-color: #212b42;
    color: white;
    text-decoration: none;
    font-weight: bold;
    border-radius: 4px;
    font-size: 14px;
}

.announcement-button:hover {
    display: inline-block;
    padding: 8px 16px;
    background-color: #2c726d;
    color: white;
    text-decoration: none;
    font-weight: bold;
    border-radius: 4px;
    font-size: 14px;
}

.all-announcements-btn {
    background: linear-gradient(to right, #3e8168, #5d9c5e);
    color: white;
    padding: 12px 24px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 600;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.all-announcements-btn:hover  {
    background: linear-gradient(to right, #bc8b04, #fdc428);
	transform: translateY(-4px);
    color: white;
    padding: 12px 24px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 600;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/*END ANOUNCE*/

/*TimeLine*/
.timeline-container {
      background: #fff;
      border-radius: 20px;
      box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
      padding: 40px 50px;
      width: 100%;
      animation: fadeIn 1s ease;
    }

    .timeline-title {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(12px, 4vw, 20px);
  font-weight: 700;
  color: #ff9800;
  margin-bottom: 40px;
  position: relative;
  padding-bottom: 10px;
}

.timeline-title svg {
  width: 30px;
  height: 30px;
  margin-right: 12px;
  fill: #ff9800;
}

.timeline-title::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 80px;
  height: 4px;
  background: #ff9800;
  border-radius: 2px;
  animation: underline 1.2s ease forwards;
}

.timeline-title-2 {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(12px, 4vw, 20px);
  font-weight: 700;
  color: #4caf50; /* Ubah warna menjadi hijau  0f172a */
  margin-bottom: 40px;
  position: relative;
  padding-bottom: 10px;
}

.timeline-title-2 svg {
  width: 30px;
  height: 30px;
  margin-right: 12px;
  fill: #4caf50; /* Ubah warna ikon menjadi hijau */
}

.timeline-title-2::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 100px; /* Ubah lebar garis bawah untuk menambah variasi */
  height: 4px;
  background: #4caf50; /* Ubah warna garis bawah menjadi hijau */
  border-radius: 2px;
  animation: underline 1.2s ease forwards;
}
.timeline-title-3 {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(12px, 4vw, 20px);
  font-weight: 700;
  color: #212b42; /* Ubah warna menjadi hijau */
  margin-bottom: 20px;
  position: relative;
  margin-top:-50px;
}

.timeline-title-3 svg {
  width: 30px;
  height: 30px;
  margin-right: 12px;
  fill: #212b42; /* Ubah warna ikon menjadi hijau */
}

.timeline-title-3::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 100px; /* Ubah lebar garis bawah untuk menambah variasi */
  height: 4px;
  background: #212b42; /* Ubah warna garis bawah menjadi hijau */
  border-radius: 2px;
  animation: underline 1.2s ease forwards;
}

@keyframes underline {
  from {
    width: 0;
  }
  to {
    width: 100px; /* Pastikan lebar garis bawah animasi disesuaikan */
  }
}


    .timeline-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 25px;
    }

    .timeline-card {
      border-radius: 16px;
      padding: 25px;
      color: #fff;
      text-align: center;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    }

    .timeline-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15);
    }

    .card-1 {
      background: linear-gradient(135deg, #56CCF2, #2F80ED);
    }

    .card-2 {
      background: linear-gradient(135deg, #BB6BD9, #8E44AD);
    }

    .card-3 {
      background: linear-gradient(135deg, #27AE60, #219653);
    }

    .timeline-icon {
      font-size: 30px;
      margin-bottom: 12px;
    }

    .timeline-duration {
      font-size: 17px;
      font-weight: bold;
      margin-bottom: 8px;
    }

    .timeline-label {
      font-size: 12px;
      opacity: 0.9;
    }

    @media (max-width: 700px) {
      .timeline-grid {
        grid-template-columns: 1fr;
      }
    }

    @keyframes fadeIn {
      from {opacity: 0; transform: translateY(20px);}
      to {opacity: 1; transform: translateY(0);}
    }

/* END TIMLINE*/