.whatsapp-float {
    /* Posisi di pojok kanan bawah */
    position: fixed; 
    bottom: 25px;    /* Jarak dari bawah */
    left: 25px;     /* Jarak dari kanan */
    z-index: 9999;   /* Memastikan ikon berada di atas semua elemen lain */

    /* Gaya bentuk dan warna */
    width: 60px;
    height: 60px;
    background-color: #25D366; /* Hijau WhatsApp */
    border-radius: 50%; /* Bentuk lingkaran */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Efek bayangan */
    
    /* Gaya Ikon (Di dalam lingkaran) */
    display: flex; /* Menggunakan Flexbox untuk memposisikan ikon di tengah */
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 32px; /* Ukuran ikon WhatsApp */
    text-decoration: none; /* Menghilangkan garis bawah tautan */
    
    /* Efek transisi saat hover */
    transition: background-color 0.3s ease, transform 0.3s ease;
}

/* Efek saat kursor diarahkan (Hover) */
.whatsapp-float:hover {
    background-color: #128C7E; /* Warna hijau yang lebih gelap */
    transform: scale(1.1); /* Ikon membesar sedikit */
}


/* ======================================== */
/* Penyesuaian Responsif (Media Queries HP) */
/* ======================================== */
/* Gaya ini akan diterapkan ketika lebar layar kurang dari atau sama dengan 768px (Umumnya perangkat tablet/HP) */
@media screen and (max-width: 768px) {
    .whatsapp-float {
        /* Mengurangi ukuran ikon di layar kecil */
        width: 50px; 
        height: 50px;
        font-size: 28px;
        
        /* Mengurangi jarak dari pojok */
        bottom: 15px; 
        left: 15px;
    }
}