/* =============================
   ABOUT SECTION
============================= */
.about-section {
  padding: 0px 60px;
  max-width: 800px;
  margin: auto;
  text-align: center;
  margin-top: 60px;
}

.about-section h2 {
  font-size: 28px;
  margin-bottom: 8px;
  color: #1d56a7;
  font-weight: 700;
  text-align: center;
}

/* =============================
   KARYAWAN SECTION
============================= */

.karyawan-section {
  padding: 0px 20px;
  max-width: 800px;
  margin: auto;
  text-align: center;
  justify-content: center;
  margin-top: 60px;
  margin-bottom: 60px;
}

.karyawan-section h2 {
  font-size: 28px;
  margin-bottom: 8px;
  color: #1d56a7;
  font-weight: 700;
  text-align: center;
}

.divider-emp {
  width: 50px;
  height: 3px;
  background-color: #1d56a7;
  margin: 10px auto 20px;
  margin-bottom: 60px;
}

.kotak-wrapper {
  display: flex;
  justify-content: center;
  gap: 50px;
  flex-wrap: wrap;
  margin-top: 30px;
}

.kotak {
  background: white;
  border-radius: 16px;
  padding: 18px;
  width: 180px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  text-align: center;
  transition: transform 0.3s;
}

.kotak:hover {
  transform: translateY(-5px);
}

.kotak img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: contain;
  margin-bottom: 10px;
}

.kotak h3 {
  font-size: 16px;
  margin-bottom: 4px;
  color: #1d56a7;
}

.kotak .role {
  font-size: 13px;
  color: #1d57a7d6;
  margin-bottom: 12px;
}

.social-icons-emp {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  margin-top: 20px;
}

.icon-emp {
  width: 40px;
  height: 40px;
  transition: transform 0.3s ease;
}

.icon-emp:hover {
  transform: scale(1.3);
}

.social-icons-emp img {
  width: 22px;
  height: 22px;
  transition: all 0.3s ease;
}

/* =============================
   JOURNEY SECTION
============================= */

.journey-section {
  background: url("../../a/img/foto2.png") center center / cover no-repeat;
  background-attachment: fixed;
  position: relative;
  padding: 60px 20px;
  text-align: center;
  color: #fff;
}

.journey-section h2 {
  font-size: 28px;
  margin-bottom: 8px;
  color: #fff;
  font-weight: 700;
  text-align: center;
}

.journey-section .divider {
  width: 50px;
  height: 3px;
  background-color: #fff;
  margin: 10px auto 20px;
}

.social-icons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
  margin-top: 20px;
}

.icon {
  width: 35px;
  height: 35px;
  transition: transform 0.3s ease;
}

.icon:hover {
  transform: scale(1.4);
}

.social-icons img {
  width: 22px;
  height: 22px;
  transition: all 0.3s ease;
}

/* =============================
   MEMBER SECTION
============================= */
.member-section {
  padding: 60px 60px 40px;
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

.member-section h2 {
  font-size: 28px;
  margin-bottom: 8px;
  color: #1d56a7;
  font-weight: 700;
  text-align: center;
}

.member-section .divider {
  margin-bottom: 18px;
}

.member-section .desc {
  margin-bottom: 25px;
  line-height: 1.7;
}