.alert-hover {
    max-width: 600px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.alert-hover:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
}

.alert-hover:active {
    transform: scale(1.02);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.alert-hover i {
    animation: rotateIcon 0.5s ease-in-out;
}

.alert-hover:hover i {
    animation: rotateIcon 0.5s ease-in-out infinite;
}

@keyframes rotateIcon {
    0% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(15deg);
    }
    100% {
        transform: rotate(-15deg);
    }
}

/* Default Styles */
.alert-animated {
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
    cursor: pointer;
}

/* Hover and Tap Effect */
.alert-animated:hover, 
.alert-animated:active {
    transform: scale(1.05); /* Slightly enlarge */
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2); /* Add shadow */
    background-color: #ffe680; /* Slightly lighter background for warning */
}
.alert-animated i {
    animation: rotateIcon 2s ease-in-out infinite;
}

.alert-animated:hover i {
    animation: rotateIconAnimated 1s ease-in-out infinite;
}

@keyframes rotateIconAnimated {
    0% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(90deg);
    }
    50% {
        transform: rotate(-180deg);
    }
    75% {
        transform: rotate(-270deg);
    }
    100% {
        transform: rotate(-360deg);
    }
}