/*
 * =============================================
 * CSS KHUSUS HALAMAN TENTANG KAMI
 * =============================================
 */

/* Memberi jarak atas pada section pertama agar tidak tertutup navbar */
main > section:first-of-type {
  margin-top: 5rem;
}

/* Memastikan judul section tidak tertutup navbar saat anchor link di-klik */
main > section {
  scroll-margin-top: 5rem;
}

#filosofi {
  background-color: var(--background-soft);
}

.section-title,
.section-title-sub {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--primary-text);
}

/* Quote Box */
.quote-card {
  background: var(--accent-purple);
  color: var(--white);
}

.quote-footer {
  color: var(--white-70-opacity);
}

/* Kartu Visi, Misi, Tujuan (VMT) */
.vmt-card {
  border: none;
  box-shadow: 0 0.3rem 1rem var(--black-08-opacity);
  transition: all 0.3s ease-in-out;
  border-top: 4px solid;
}

.vmt-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 0.6rem 1.2rem rgba(0, 0, 0, 0.12);
}

.card-vision {
  border-color: var(--tk-blue);
}
.card-mission {
  border-color: var(--tk-green);
}
.card-goal {
  border-color: var(--tk-orange);
}

.vmt-icon {
  width: 50px;
  height: 50px;
  flex-shrink: 0; /* Mencegah ikon mengecil */
}

/* Warna latar belakang ikon */
.icon-vision {
  background-color: var(--tk-blue);
}
.icon-mission {
  background-color: var(--tk-green);
}
.icon-goal {
  background-color: var(--tk-orange);
}

/* Warna ikon di dalam list */
.text-vision {
  color: var(--tk-blue);
}
.text-mission {
  color: var(--tk-green);
}
.text-goal {
  color: var(--tk-orange);
}