/* Growing Animation Classes - Progressive Growth for Notification Bubble */
.notification-bubble.growing-1 {
    width: 70px !important;
    height: 70px !important;
    font-size: 1.7rem !important;
}

.notification-bubble.growing-2 {
    width: 80px !important;
    height: 80px !important;
    font-size: 1.9rem !important;
}

.notification-bubble.growing-3 {
    width: 90px !important;
    height: 90px !important;
    font-size: 2.1rem !important;
}

.notification-bubble.growing-4 {
    width: 100px !important;
    height: 100px !important;
    font-size: 2.3rem !important;
}

.notification-bubble.growing-5 {
    width: 120px !important;
    height: 120px !important;
    font-size: 2.6rem !important;
}

.notification-bubble.growing-6 {
    width: 140px !important;
    height: 140px !important;
    font-size: 3rem !important;
}

.notification-bubble.growing-7 {
    width: 160px !important;
    height: 160px !important;
    font-size: 3.4rem !important;
}

.notification-bubble.growing-8 {
    width: 180px !important;
    height: 180px !important;
    font-size: 3.8rem !important;
}

.notification-bubble.growing-9 {
    width: 200px !important;
    height: 200px !important;
    font-size: 4.2rem !important;
}

.notification-bubble.growing-10 {
    width: 220px !important;
    height: 220px !important;
    font-size: 4.6rem !important;
}

/* Responsive growing classes for mobile */
@media (max-width: 768px) {
    .notification-bubble.growing-1 {
        width: 60px !important;
        height: 60px !important;
        font-size: 1.4rem !important;
    }
    
    .notification-bubble.growing-2 {
        width: 70px !important;
        height: 70px !important;
        font-size: 1.6rem !important;
    }
    
    .notification-bubble.growing-3 {
        width: 80px !important;
        height: 80px !important;
        font-size: 1.8rem !important;
    }
    
    .notification-bubble.growing-4 {
        width: 90px !important;
        height: 90px !important;
        font-size: 2rem !important;
    }
    
    .notification-bubble.growing-5 {
        width: 100px !important;
        height: 100px !important;
        font-size: 2.2rem !important;
    }
    
    .notification-bubble.growing-6 {
        width: 110px !important;
        height: 110px !important;
        font-size: 2.4rem !important;
    }
    
    .notification-bubble.growing-7 {
        width: 120px !important;
        height: 120px !important;
        font-size: 2.6rem !important;
    }
    
    .notification-bubble.growing-8 {
        width: 130px !important;
        height: 130px !important;
        font-size: 2.8rem !important;
    }
    
    .notification-bubble.growing-9 {
        width: 140px !important;
        height: 140px !important;
        font-size: 3rem !important;
    }
    
    .notification-bubble.growing-10 {
        width: 150px !important;
        height: 150px !important;
        font-size: 3.2rem !important;
    }
}