/* Kotak utama */
.box {
    padding: 20px;
    margin-bottom: 20px;
}

/* Imej serangga */
.icon {
    height: auto;
    position: absolute;
    transition: transform 0.5s ease-in-out;
}

.icon {
    transition: transform 0.3s ease-in-out;
}

.box:hover .icon {
    transform: translateY(-5px) rotate(10deg);
}

.butterfly { width: 70px; top: -30px; right: 15px; transform: rotate(20deg); }
.ladybug { width: 65px; top: -25px; right: 15px; transform: rotate(-20deg); }
.bee { width: 65px; top: -30px; right: 5px; transform: rotate(20deg); }
.praying-mantis { width: 80px; top: -40px; right: 20px; transform: rotate(10deg); }
.cricket { width:  80px; top: -45px; right: 50px; }
.beetle { width: 70px; top: -30px; right: 5px; transform: rotate(20deg); }

/* RESPONSIVE */
@media (max-width: 1366px) {
    .box { 
        padding: 18px; 
    }
}

@media (max-width: 768px) {
    .box {
        padding: 15px;
    }

    /* Saiz serangga di skrin kecil */
    .butterfly, .ladybug, .bee, .beetle { width: 50px; top: -30px; right: 10px; }
    .praying-mantis { width: 60px; top: -35px; right: 10px; }
    .cricket { width: 60px; top: -40px; right: 10px; }
}

@media (max-width: 480px) {
    .box {
        padding: 12px;
    }

    /* Saiz serangga di skrin kecil */
    .butterfly, .ladybug, .bee, .beetle { width: 50px; top: -25px; right: 10px; }
    .praying-mantis { width: 60px; top: -35px; right: 10px; }
    .cricket { width: 60px; top: -40px; right: 10px; }
}