/* Amazing Card Hover Effects */
.muzba-card1, .muzba-card2, .muzba-card3 {
    transition: all 0.5s ease;
}

.circle1, .circle2, .circle3 {
    position: absolute;
    transition: all 0.5s ease;
    z-index: 1;
}

.circle1 {
    top: 0;
    right: 0;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #FFD700, #FFC107);
    border-radius: 0 1rem 0 60px;
}

.muzba-card1:hover .circle1 {
    width: 100%;
    height: 100%;
    border-radius: 1rem;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.9), rgba(255, 193, 7, 0.9));
}

.circle2 {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background: rgba(45, 45, 45, 0.8);
    border-radius: 50%;
}

.muzba-card2:hover .circle2 {
    width: 100%;
    height: 100%;
    border-radius: 1rem;
    background: rgba(45, 45, 45, 0.9);
    top: 0;
    left: 0;
    transform: none;
}

.circle3 {
    bottom: 0;
    left: 0;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #FFD700, #FFC107);
    border-radius: 60px 0 1rem 0;
}

.muzba-card3:hover .circle3 {
    width: 100%;
    height: 100%;
    border-radius: 1rem;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.9), rgba(255, 193, 7, 0.9));
}

.content {
    position: relative;
    z-index: 10;
    transition: all 0.3s ease;
}

.muzba-card1:hover .content,
.muzba-card2:hover .content,
.muzba-card3:hover .content {
    color: white !important;
}

.muzba-card2:hover .content {
    color: white !important;
}