/* Badges Section */
.badges-section {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* General Badge Style */
.badge {
    padding: 10px 20px;
    border-radius: 10px;
    color: white;
    font-weight: bold;
    font-size: 16px;
    animation: fadeIn 1s ease-in-out forwards, subtlePulse 2s ease-in-out infinite alternate; /* Subtle fade-in and pulse animation */
    transition: all 0.3s ease;
}

/* Founder Badge */
.badge.founder {
    background: linear-gradient(45deg, #ffd900, #fc9802);
    animation: floatUp 2s ease-in-out infinite, glowOrange 2s infinite alternate;
    text-shadow: 3px 3px 5px rgba(0, 0, 0, 1);

}

/* Dev-Team Badge */
.badge.dev-team {
    background: linear-gradient(45deg, #12acf3, #00ff9c);
    /* animation: bounce 1.5s ease-in-out infinite, colorChangeDonor 4s ease-in-out infinite alternate; */
    text-shadow: 3px 3px 5px rgba(0, 0, 0, 1);
}

/* Admin Badge */
.badge.admin {
    background: linear-gradient(45deg, #feff00, #c0392b);
    /* animation: shake 2s ease-in-out infinite, sparkle 2s infinite; */
    text-shadow: 3px 3px 5px rgba(0, 0, 0, 1);

}

.badge.contest-winner {
    background: linear-gradient(45deg, #a1ee11, #11EE14);
    animation: sparkle 2s infinite;
    text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5);

}

/* Fade-in animation */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Subtle Pulse animation */
@keyframes subtlePulse {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.02); opacity: 0.95; }
    100% { transform: scale(1); opacity: 1; }
}

/* Floating effect for Founder */
@keyframes floatUp {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

/* Glowing effect for Founder */
@keyframes glowOrange {
    0% { box-shadow: 0 0 3px #ffbb00, 0 0 8px #ffbb00; }
    50% { box-shadow: 0 0 6px #e5ff00, 0 0 12px #e5ff00; }
    100% { box-shadow: 0 0 3px #ffbb00, 0 0 8px #ffbb00; }
}

/* Bounce effect for Dev-Team */
@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

/* Color-changing effect for Dev-Team */
@keyframes colorChangeDonor {
    0% { background-color: #f39c12; }
    50% { background-color: #e67e22; }
    100% { background-color: #f39c12; }
}

/* Shake effect for Admin */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-3px); }
    50% { transform: translateX(3px); }
    75% { transform: translateX(-3px); }
}

/* Sparkle effect for Admin */
@keyframes sparkle {
    0%, 100% { text-shadow: 0 0 6px #e74c3c, 0 0 12px #e74c3c; }
    50% { text-shadow: 0 0 3px #c0392b, 0 0 8px #c0392b; }
}