:root{
    --primary-color: #050f9c;/* Rich deep blue for professionalism */
    --secondary-color: #df841d;/* Muted dark gray-blue for balance */
    --tertiary-color: #0c0b0a;/* Deep neutral for grounding */
    --white: #F8F9FA;/* Soft white for a refined look */

}

*{
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
}

.container{
    margin-top: 100px;
    background-color: var(--white);
    min-height: 100vh;
    width: 100%;
    padding: 23px 0;
}

.container h1{
    text-align: center;
    margin-bottom: 23px;
    color: #fff;
}

.container .myh1{
    color: black;
}

.price-row{
    
    display: flex;
    align-items: center;
    justify-content: center;
}

.box{
    margin: 0px 12px;
    text-align: center;
    background: var(--primary-color);
    color: #fff;
    border-radius: 17px;
    padding: 0 12px;
}

.box h2{
    margin: 27px 0 23px;
}

.box ul{
    list-style: none;
    color: #ddd;
    text-align: left;
    margin: 20px 0;
}

.box ul li{
    padding: 9px 63px;
}

.box ul li::before{
    content: '\2022';
    color: var(--secondary-color);
    font-weight: bold;
    margin-right: 8px;
}

.box .btn{
    font-size: 16px;
    margin: 23px 23px;
    border: 2px solid #e33058;
    padding: 12px 0px;
    border-radius: 5px;
    margin: 25px 35px 25px 35px;
    transition: all 0.5s;
    background-color: var(--secondary-color);
}

.box .btn a{
    text-decoration: none;
    color: var(--white);
}

.box .btn:hover{
    background-color: var(--secondary-color);
    cursor: pointer;
}
.box span{
    font-size: 16px;
}

@media only screen and (max-width: 1000px){
    .price-row{
        flex-wrap: wrap;
    }

    .box{
        margin: 12px 23px;
    }
}