.plan-header {
    position: relative;
}
.pricing-card{
    border: 1px solid var(--color-gray-500);
    border-radius: 10px;
    /* box-shadow: 0 10px 40px rgba(0,0,0,0.15); */
    transition: all 0.4s ease;
    position: relative;
    height: 100%;
    animation: fadeInUp 0.8s ease-out;
    min-height: 480px;
}
.pricing-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
    border: 1px solid var(--color-blue-500);
}
.pricing-card.Popular-card{border: 1px solid var(--color-blue-500);}
.pricing-card svg.svg-stroke-first,.pricing-card svg.svg-stroke-first path{stroke: var(--color-white-same)}
.icon-box{
    width: 56px;
    height:56px;
    border-radius: 100%;
    padding: 15px;
}
.plan-body ul li {position: relative;transition: all 0.2s ease;font-size: 0.9rem !important;}
.plan-body li:hover {padding-left: 5px;}
.gr-icon{fill:linear-gradient(90deg,rgba(21, 93, 252, 1) 0%, rgba(152, 16, 250, 1) 100%) !important;}
.plan-header .badge {
    position: absolute;
    background: var(--color-gray-300);
    color: var(--color-black-same);
    top: -32px;
    right: 0;
    left: 0;
    display: inline-block;
    max-width: 100px;
    margin: 0 auto;
}
@media screen and (max-width: 1200px) {
    .plan-header .badge{top: -22px}
    .pricing-card{min-height: 550px}
}
@media screen and (max-width: 992px) {
    .pricing-card{min-height: 450px}
}
@media screen and (max-width:768px) {
    .plan-header .badge{top: -15px}
}
@media screen and (max-width: 575px) {
    .pricing-card{min-height: auto}
    .btn-plan{position: initial;}
}