
.container{ width: 100% !important; }
.new-pricing{ display: flex; gap: 1rem; }
.plans-section{
    width: 66%;
    flex-shrink: 0;
    margin-bottom: 50px;
}
.free-signup{ width: 33%; }


.pricing-div{
    border: 1.5px solid #f3f3f3;
    border-radius: 20px;
}
.pricing-div:hover{
    border-radius: 20px;
    border: 1.5px solid #FF9100;
    background: #FFF;
    box-shadow: 0px 28px 50px 0px rgba(255, 199, 0, 0.10);
}

.pricing{
    width: 30%;
    padding: 20px;
    text-align: center;
    padding-top: 50px;
}

.pricing .title{
    color: #313249;
    font-family: Roboto;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin-bottom: 10px;
}

.pricing .price{
    color: #313249;
    font-family: Roboto;
    font-size: 60px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: -4.2px;
    margin-bottom: 10px;
}

.pricing .sm-text{
    color: #656577;
    text-align: center;
    font-family: Roboto;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-bottom: 10px;
}

.pricing .button{
    width: 100%;
    height: 60px;
    flex-shrink: 0;
    border-radius: 10px;
    border: 1.5px solid #FFA51B;
    background: linear-gradient(85deg, #FFA41C 8.22%, #FEC601 54.26%, #FFA61A 92.62%);
    margin-top: 10px;
}

.button > .btn-text{
    color: #FFF;
    font-family: Roboto;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}


.plan-benefits{
    width: 70%;
    padding: 20px;
}

.plan-benefits p{
    color: #656577;
    font-family: Roboto;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

ul.features{ list-style: none; margin-top: 20px; text-align: left; }
li.feature { line-height: 1rem; }
li.feature span{ margin: 5px; }
li.feature img{
    width: 19px;
    height: 14px;
}

li.feature span.text{
    leading-trim: both;
    text-edge: cap;
    font-family: Roboto;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 50px; /* 208.333% */
}



.free-section{
    width: 100%;
    flex-shrink: 0;
    border-radius: 20px;
    background: #313249;
    text-align: center;
    padding: 20px;
}

span.free-img{
    margin: 14px;
}

.free-title{
    color: #FFF;
    font-family: Roboto;
    font-size: 34px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 1.36px;
}

.free-subtitle{
    margin: 10px 5px;
    color: #FFF;
    font-family: Roboto;
    font-size: 24px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
}


.free-signup li.feature .text{
    color: #FFF !important;
}

.free-button{
    width: 100%;
    height: 70px;
    flex-shrink: 0;
    border-radius: 10px;
    border: 1.5px solid rgba(97, 97, 115, 0.30);
    background: #F8F8F8;
    margin-top: 30px;
    margin-bottom: 20px;
}

.free-button span{
    color: #313249;
    font-family: Roboto;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}


@media only screen and (max-width: 768px) {

    .new-pricing{ flex-direction: column; }

    .plans-section, .free-signup{
        width: 100%;
    }
}

@media only screen and (max-width: 425px) {

    .pricing-div{ flex-direction: column-reverse; }
    .pricing, .plan-benefits{ width: 100%; }
}

