@import url("/css/all.css");
.pricing{
        width: 100%;
        display: flex;
        flex-flow: column;
        gap: 20px;
}
.pricing_item{
        border: 2px solid var(--bg);
        box-shadow: 6px 6px var(--bg);
        border-radius: 10px;
        padding: 30px 30px;
        display: flex;
        flex-flow: column;
        gap: 15px;
        position: relative;
        overflow: hidden;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.featured{
        background: var(--white);
}
.ribbon {
        position: absolute;
        top: 20px;
        right: -45px;
        background: linear-gradient(135deg, var(--bg), var(--bg_sec));
        color: #fff;
        padding: 8px 50px;
        font-size: 14px;
        font-weight: 600;
        transform: rotate(45deg);
        text-align: center;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        letter-spacing: 0.5px;
}

@media screen and (min-width : 600px) {
        .pricing{
                flex-flow: row;
                flex-wrap: wrap;
                justify-content: center;
        }
        .pricing_item{
                width: calc(50% - 10px);
                justify-content: space-between;
        }
}
@media screen and (min-width : 1000px) {
        .featured{
                transform: scale(1.1);
        }
        .pricing{
                flex-flow: row;
                flex-wrap: wrap;
                justify-content: center;
                gap: 40px;
        }
        .pricing_item{
                width: calc(33% - 26.66px);
                justify-content: space-between;
        }
}