/*بـسـم الله الـرحـمـن الـرحـیـم*/



/*=========================
        PRICING
=========================*/

.pricing{

    padding:120px 0;

}

.section-title{

    text-align:center;

    margin-bottom:70px;

}

.section-title span{

    color:#00E676;

    font-weight:700;

}

.section-title h2{

    font-size:52px;

    margin:20px 0;

    color:#fff;

}

.section-title p{

    color:#94A3B8;

}

.pricing-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:35px;

}

.price-card{

    position:relative;

    background:

    linear-gradient(

    180deg,

    #101827,

    #07111d

    );

    border:1px solid rgba(255,255,255,.06);

    border-radius:32px;

    padding:45px 35px;

    transition:.35s;

    overflow:hidden;

}

.price-card > div {
    display: flex;
    gap: 12px;
    align-items: center;
}

.price-card:hover{

    transform:translateY(-10px);

    border-color:#00E676;

    box-shadow:

    0 25px 60px rgba(0,230,118,.15);

}

.price-card.active{

    border:2px solid #00E676;

    transform:scale(1.04);

}

.badge{

    position:absolute;

    top:20px;

    left:20px;

    background:

    linear-gradient(135deg,#00E676,#00C853);

    color:#02120a;

    padding:8px 12px;

    border-radius:30px;

    font-size:12px;

    font-weight:700;

}

.price-card h3{

    font-size:24px;

    margin-bottom:15px;

}

.price-card h2{

    font-size:50px;

    color:#00E676;

    margin-bottom:35px;

}

.price-card small{

    font-size:18px;

    color:#94A3B8;

}

.price-card ul{

    list-style:none;

    margin-bottom:35px;

}

.price-card li{

    margin:18px 0;

    color:#CBD5E1;

}

.price-btn{

    display:flex;

    justify-content:center;

    align-items:center;

    height:56px;

    border-radius:18px;

    background:

    linear-gradient(

    135deg,

    #00E676,

    #00C853

    );

    color:#02120a;

    font-weight:800;

    transition:.3s;

}

.price-btn:hover{

    transform:translateY(-3px);

    box-shadow:

    0 15px 35px rgba(0,230,118,.3);

}



.discount-section{

    margin-top:70px;

}

.discount-card{

    background:
    linear-gradient(
        135deg,
        rgba(16,24,39,.95),
        rgba(7,17,29,.95)
    );

    border:1px solid rgba(0,230,118,.15);

    border-radius:30px;

    padding:35px;

    display:flex;

    /* grid-template-columns:80px 1fr auto; */
    flex-direction: column;
    justify-content: right;
    align-items: center;
    font-family: vazir-bold ;

    gap:25px;

    align-items:center;

}

.discount-icon{

    width:70px;

    height:70px;

    border-radius:22px;

    background:
    linear-gradient(135deg,#00E676,#00C853);

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:32px;

    color:#02120a;

}

.discount-content h3{

    font-size:24px;

    margin-bottom:10px;

}

.discount-content p{

    color:#94A3B8;

    line-height:1.8;

}

.discount-form{

    display:flex;

    font-family: vazir-medium ;

    gap:12px;

}

.discount-form input::placeholder{
    font-size: 18px;
}

.discount-form input{

    font-family: vazir-bold ;

    font-size: 25px ;

    width:220px;

    height:56px;

    background:#020617;

    border:1px solid rgba(255,255,255,.08);

    border-radius:16px;

    color:white;

    padding:0 18px;

    outline:none;

}

.discount-form input:focus{

    font-family: vazir-medium ;

    border-color:#00E676;

}

.discount-form button{
    font-family: vazir-medium ;

    height:56px;

    padding:0 28px;

    border:none;

    border-radius:16px;

    background:
    linear-gradient(135deg,#00E676,#00C853);

    color:#02120a;

    font-weight:800;

    cursor:pointer;

    transition:.3s;

}

.discount-form button:hover{

    transform:translateY(-3px);

    box-shadow:0 12px 30px rgba(0,230,118,.3);

}

.discount-message{

    grid-column:2 / 4;

    color:#00E676;

    margin-top:10px;

    font-size:14px;

}



/*=========================
        MOBILE
=========================*/

@media(max-width:768px){

.discount-card{

    grid-template-columns:1fr;

    text-align:center;

}

.discount-icon{

    margin:auto;

}

.discount-form{

    flex-direction:column;

}

.discount-form input{

    width:100%;

}

}

@media(max-width:992px){

    .pricing-grid{

        grid-template-columns:1fr;

    }

}