.badge {
    position: absolute;
    top: -60px;
    left: -60px;
    margin-left: 2px;
    margin-top: 2px;
    width: 120px; /* Adjust size as needed */
    height: 120px; /* Adjust size as needed */
    display: flex;
    /* The following two are from bootstrap */
    text-align: unset !important;
    padding: 0px !important;
    border-radius: 50%; /* Makes the image circular */
    transition: all 0.3s ease; /* Smooth transition for resizing and repositioning */
}

@media (max-width: 660px) {
    .badge {
        left: -6px; /* Subtract border */
        top: -85px;
        width: 80px; /* Shrink the badge */
        height: 80px; /* Shrink the badge */
    }
}

@media (max-width: 600px) {
    .badge {
        /* Move to header area */
        /* NB: Not perfectly centered as header text (and therefore height) shrinks with width */
        left: 0px;
        top: -70px;
        width: 60px; /* Further shrink the badge */
        height: 60px; /* Further shrink the badge */
    }
    /* Inner flower */
    .badge-layer:nth-child(2) {
        display: none;
    }
    /* Outer flower */
    .badge-layer:nth-child(1) {
        pointer-events: none;
        /* animation: rot-outer-function 20s linear infinite; */
        animation: rot-outer-function 40s linear infinite !important;
     }     
}

.badge-layer {
    position: inherit;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the image scales properly within the circle */
}

/* BreakBeak */
.badge-layer:nth-child(3) {
   pointer-events: none;
   transform: rotate(0deg) scale(0.9);
}

/* Inner flower */
.badge-layer:nth-child(2) {
    animation: rot-inner-function 20s linear infinite;
}

.badge-layer:nth-child(2):hover {
   animation-play-state: paused; /* Pause the animation */
   transform: scale(20) !important;
}

/* For scaling inner flower when static */
/* .badge-layer:nth-child(2) {
    transform: scale(0.67);
} */

/* Big pink flower */
.badge-layer:nth-child(1) {
   pointer-events: none;
   animation: rot-outer-function 20s linear infinite;
}

@keyframes rot-outer-function {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
@keyframes rot-inner-function {
    from {
        transform: scale(0.67) rotate(360deg);
    }
    to {
        transform: scale(0.67) rotate(0deg);
    }
}