*{
        margin: 0%;
        padding: 0%;
        box-sizing: border-box;

    }
    body{
        font-family: Arial, sans-serif;
        background-color: #f5f5f5;
    }

    h1{
        text-align: center;
        margin: 20px 0;
    }
    .pricing-container{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .pricing-card{
        width : 300px;
        
        padding: 20px;
        border:#a4a4a2;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
        box-shadow: inset;
        padding: 40px;
        border-radius: 10px;
        margin: 0 20px;
        gap: 20px;
        display: flex;
        flex-direction: column;
    }
    .pricing-card h2{
        font-size: 24px;
        text-align: center;
        margin-bottom: 10px;
    }
    .price{
        font-size: 32px;
        font-weight: bold;
        text-align: center;
    }
    .period{
        font-size: 16px;
        text-align: center;
        color: gray;
    }
    .features li::marker{
        content : "🍵";
    }
    li{
        padding: 8px 0;
        text-align: center;
    }
    .subscribe-btn{
        all: unset;
        background-color: #f38b2b;
        color: #080808;
        padding: 10px 0;
        border: none;
        border-radius: 50px;
        cursor: pointer;
        text-align: center;
    }

    .popular{
        border: 2px solid #f38b2b;
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
        position: relative;
    }
    .popular-badge{
        background-color: #f38b2b;
        padding: 5px 10px;
        border-radius: 50px;
        text-align: center;
        position: absolute;
        top: -3%;
        left: 32%;
    }