.gradient-bg {
    width: 300px;
    height: 300px;
    border-radius: 40px;
    background: linear-gradient(
        to right,
        #2d2dd4 0%,
        #1f1f8a 50%,
        #0d6efd 50%,
        #2d2dd4 100%
    );
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.star-ring {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    transform: translate(-50%, -50%) rotate(-90deg); /* fixed center */
}

.star {
    position: absolute;
    left: 50%;
    top: 40%;
    font-size: 16px;
    color: gold;
    transform: rotate(calc(var(--i) * 30deg)) translate(0, -60px)
        rotate(calc(var(--i) * -30deg));
    transform-origin: center;
}


/* Desktop: simulate phone view inside frame */
/* Simulate phone frame only on desktop */
/* Default: mobile-first — no frame on small devices */
.phone-frame {
    width: 100%;
    border: none;
    border-radius: 0;
    box-shadow: none;
    margin: 0 auto;
    background-color: black;
}

.text-org {
    font-size: 1.3rem;
    color:darkslategray;
    font-weight: bold;
}

.btn-primary {
    background-color: #4A6FA5;
    color: white;
    border: 0px solid transparent;
}




@media screen {
    .row-cols-md-4 > * {
        width: 50% !important;
    }
}