/* Atur efek 3D pada elemen induk */
.container .row {
  perspective: 1000px;
}

/* Tambahkan efek transisi pada setiap kolom */
.col-md-4 .p-4 {
  transition: transform 0.5s ease-in-out;
}

/* Efek saat kursor berada di atas kolom pertama */
.col-md-4:nth-child(1) .p-4:hover {
  transform: rotateY(-15deg) scale(1.05);
}

/* Efek saat kursor berada di atas kolom kedua (tengah) */
.col-md-4:nth-child(2) .p-4:hover {
  transform: scale(1.05); /* Hanya sedikit membesar */
}

/* Efek saat kursor berada di atas kolom ketiga */
.col-md-4:nth-child(3) .p-4:hover {
  transform: rotateY(15deg) scale(1.05);
}

/* Styling Utama untuk Floating Button */
.floating-whatsapp {
    position: fixed; /* Membuat tombol tetap di tempat saat di-scroll */
    width: 60px; /* Lebar tombol */
    height: 60px; /* Tinggi tombol */
    bottom: 30px; /* Jarak dari bawah */
    right: 30px; /* Jarak dari kanan */
    background-color: #25D366; /* Warna hijau WhatsApp */
    color: #FFF; /* Warna ikon */
    border-radius: 50px; /* Membuat tombol menjadi lingkaran */
    text-align: center;
    font-size: 30px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); /* Efek bayangan */
    z-index: 1000; /* Memastikan tombol berada di atas elemen lain */
    
    /* Animasi Transisi */
    transition: all 0.3s ease-in-out; 
}

/* Styling Ikon di dalam tombol */
.whatsapp-icon {
    margin-top: 16px; /* Agar ikon berada di tengah vertikal */
}

/* Animasi saat kursor di atas tombol (Hover) */
.floating-whatsapp:hover {
    background-color: #128C7E; /* Warna sedikit lebih gelap saat hover */
    transform: scale(1.1); /* Efek membesar sedikit */
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5); /* Bayangan lebih kuat */
}

// Anda bisa menggunakan CSS @keyframes untuk efek animasi yang lebih kompleks

/* CSS Tambahan untuk efek 'bounce' */
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
  40% {transform: translateY(-10px);}
  60% {transform: translateY(-5px);}
}

.floating-whatsapp.animate-bounce {
  animation: bounce 2s infinite; /* Terapkan animasi secara berulang */
}

/* JavaScript untuk menambahkan kelas animasi saat halaman dimuat */
document.addEventListener('DOMContentLoaded', function() {
    const waButton = document.querySelector('.floating-whatsapp');
    // Tambahkan kelas setelah penundaan singkat agar terlihat
    setTimeout(() => {
        waButton.classList.add('animate-bounce');
    }, 1000); 
});