/* Icon Grid Widget Styles */
.icon-grid-wrapper {
    width: 100%;
}

.icon-grid-container {
    display: grid;
    width: 100%;
}

.icon-grid-item {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--animation-duration, 0.3s) ease;
    cursor: pointer;
}

.icon-grid-item a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-decoration: none;
}

.icon-grid-item i,
.icon-grid-item svg {
    transition: inherit;
}

/* Animation: Rotate */
.has-animation.animation-rotate .icon-grid-item:hover i,
.has-animation.animation-rotate .icon-grid-item:hover svg {
    animation: rotate var(--animation-duration, 0.3s) ease;
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Animation: Bounce */
.has-animation.animation-bounce .icon-grid-item:hover {
    animation: bounce var(--animation-duration, 0.3s) ease;
}

@keyframes bounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-15px);
    }
}

/* Animation: Pulse */
.has-animation.animation-pulse .icon-grid-item:hover {
    animation: pulse var(--animation-duration, 0.3s) ease infinite;
}

@keyframes pulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }
}

/* Animation: Shake */
.has-animation.animation-shake .icon-grid-item:hover {
    animation: shake var(--animation-duration, 0.3s) ease;
}

@keyframes shake {

    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-10px);
    }

    75% {
        transform: translateX(10px);
    }
}

/* Animation: Zoom */
.has-animation.animation-zoom .icon-grid-item:hover {
    transform: scale(1.2);
}

/* Animation: Flip */
.has-animation.animation-flip .icon-grid-item:hover {
    animation: flip var(--animation-duration, 0.3s) ease;
}

@keyframes flip {
    from {
        transform: rotateY(0deg);
    }

    to {
        transform: rotateY(180deg);
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .icon-grid-item {
        padding: 15px !important;
    }
}