/* ===== Root Variables ===== */
:root {
  --primary: #081c3c;
  --background: linear-gradient(to bottom, #081c3c, #005b9e, #00f0ff);
  --white: #FFFFFF;
}

/* Judul halaman */
h2 {
  color: var(--white);
  font-weight: 900;
  font-size: 2.2rem;
  margin-top: 2rem;
  margin-bottom: 50px;
  text-shadow:  0 1px 3px rgba(0, 0, 0, 0.6), /* bayangan gelap lembut */
    0 0 6px rgb(0, 0, 0);   /* efek tambahan glow ringan */
    
}

/* Card 3D Animasi */
.custom-card {
  background-color: rgba(14, 1, 1, 0.365); /* Lebih tebal dari sebelumnya */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 20px;
  box-shadow: 0 6px 18px rgba(2, 248, 116, 0.4);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  perspective: 1000px;
  transform-style: preserve-3d;
  color: #ffffff; /* keseluruhan teks lebih cerah */
  text-shadow:  0 3px 3px rgb(0, 0, 0), /* bayangan gelap lembut */
    0 0 6px rgb(0, 0, 0);   /* efek tambahan glow ringan */
}

.custom-card:hover {
  transform: translateY(-12px) rotateX(2deg) rotateY(-2deg);
  box-shadow: 0 20px 40px rgb(5, 251, 226);
}

.custom-card h5 {
  color: #ffffff;
  font-weight: 800;
  margin-bottom: 15px;
  text-shadow:  0 1px 3px rgb(0, 0, 0), /* bayangan gelap lembut */
    0 0 6px rgb(0, 0, 0);   /* efek tambahan glow ringan */
    
}

.custom-card ul {
  padding-left: 20px;
  color: #ffffff; /* List text lebih terang */
}

.custom-card ul li {
  margin-bottom: 8px;
  line-height: 1.7;
  text-shadow:  0 1px 3px rgba(0, 0, 0, 0.6), /* bayangan gelap lembut */
    0 0 6px rgb(0, 0, 0);   /* efek tambahan glow ringan */
}