.container{

    width:90%;
    max-width:1200px;
    margin:auto;
    padding:70px 0;

}

.pricing-hero{

    height:400px;

    background:linear-gradient(rgba(5,20,45,.78),
    rgba(5,20,45,.78)),
    url("/static/images/pricing-banner.jpg");

    background-size:cover;
    background-position:center;

    display:flex;
    justify-content:center;
    align-items:center;

    text-align:center;
    color:white;

}

.pricing-overlay h1{

    font-size:52px;
    margin-bottom:20px;

}

.pricing-overlay p{

    max-width:850px;
    margin:auto;
    font-size:20px;
    line-height:1.8;

}

.pricing-grid{

    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:35px;

}

.pricing-card{

    background:white;
    border-radius:15px;
    padding:40px;
    text-align:center;
    box-shadow:0 8px 25px rgba(0,0,0,.08);
    position:relative;

}

.featured{

    border:3px solid #1565c0;
    transform:scale(1.03);

}

.badge{

    position:absolute;
    top:-15px;
    left:50%;
    transform:translateX(-50%);

    background:#1565c0;
    color:white;

    padding:8px 18px;

    border-radius:25px;

    font-size:14px;

}

.pricing-card h3{

    color:#0b3d91;

}

.price{

    font-size:34px;

    font-weight:bold;

    margin:25px 0;

    color:#1565c0;

}

.pricing-card ul{

    text-align:left;

    margin:30px 0;

    line-height:2;

    color:#444;

}

.pricing-btn{

    display:inline-block;

    background:#1565c0;

    color:white;

    padding:14px 30px;

    text-decoration:none;

    border-radius:8px;

}

.pricing-btn:hover{

    background:#0b3d91;

}

.pricing-bottom{

    margin-top:70px;

    background:#eef5ff;

    text-align:center;

    padding:80px 20px;



}

.compare-btn{

    display:inline-block;

    margin-top:30px;

    background:#0b3d91;

    color:white;

    text-decoration:none;

    padding:15px 35px;

    border-radius:8px;

}

.pricing-bottom p{

    color:#000000;

}

.pricing-bottom h2{

    color:#000000;

}