/* 1. Lecturer Section */
section#lecturer {
  padding-top: 120px;
}

section#lecturer::before {
  content: "Dosen Kami";
  font-size: 48px;
  font-weight: 600;
  top: 10px;
  background: linear-gradient(16deg, #6199e2, #933dcd);
  background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0.4;
  position: absolute;
  z-index: -1;
}

/* 2. Kinerja Section */
section#kinerja {
  padding-top: 120px;
}

section#kinerja::before {
  content: "Kinerja Dosen";
  font-size: 48px;
  font-weight: 600;
  top: 10px;
  background: linear-gradient(16deg, #6199e2, #933dcd);
  background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0.4;
  position: absolute;
  z-index: -1;
}

/* Styling for Lecturer Section Start */
.img-lecturer {
  width: 240px;
  object-fit: cover;
}

.card-lecturer {
  background: rgba(255, 255, 255, 0.094);
  border-radius: 20px;
  border: 1px solid #c7c7c754;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.card-lecturer:hover {
  transform: perspective(1000px) rotateX(4deg) rotateY(-4deg);
}

.h4-lecturer {
  font-weight: 600;
}

.social-icon img {
  width: 20px;
}
/* Styling for Lecturer Section End */

/* Styling for Kinerja Section Start */
.card-kinerja {
  background: rgba(255, 255, 255, 0.094);
  border-radius: 20px;
  border: 1px solid #c7c7c754;
  width: 500px;
  padding: 0;
}

.card-kinerja:hover {
  transform: rotateY(8deg) rotateX(8deg);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
/* Styling for Kinerja Section End */

/* Styling for SDM Section Start */
section#sdm {
  padding-top: 120px;
}

section#sdm::before {
  content: "SDM Pendukung";
  font-size: 48px;
  font-weight: 600;
  top: 10px;
  background: linear-gradient(16deg, #6199e2, #933dcd);
  background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0.4;
  position: absolute;
  z-index: -1;
}

.card-sdm {
  background: rgba(255, 255, 255, 0.094);
  border-radius: 20px;
  border: 1px solid #c7c7c754;
  width: 600px;
  padding: 0;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.card-sdm:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 32px rgba(0, 0, 0, 0.12);
}
/* Styling for SDM Section End */

@media only screen and (max-width: 470px) {
  section#lecturer::before {
    font-size: 38px;
  }
  section#kinerja::before {
    font-size: 32px;
  }
  section#sdm::before {
    font-size: 32px;
  }
}