.PricingPlan
{
    text-align : center;
}

.PricingPlan h2
{
    text-align : center;
    color      : #2E3191;
}

.PricingPlan h1
{
    margin-top    : -1rem;
    margin-bottom : 3.2rem;
    font-size     : 2.8rem;
    text-align    : center;
    color         : #343434;
}

.monthlyOrYearly
{
    display        : flex;
    flex-direction : row;
    width          : 40%;
    margin-bottom  : 4rem;
    margin-left    : 16rem;
}

.monthlyOrYearly label
{
    display          : flex;
    align-items      : center;
    justify-content  : center;
    width            : 50%;
    height           : 4rem;
    font-size        : 1.8rem;
    font-weight      : 600;
    color            : #FFCA05;
    border           : 1px solid #2C3181;
    border-radius    : 4rem;
    background-color : #F4F4F9;
}

:checked + label
{
    background : #2E3191;
}

.monthlyOrYearly label:hover
{
    cursor : pointer;
}

.monthlyOrYearly input
{
    display : none;
}

.monthlyPlans,
.yearlyPlans
{
    display               : grid;
    justify-content       : center;
    grid-template-columns : 48% 48% 48%;
    grid-auto-rows        : calc(110%);
    grid-gap              : 2rem;
}

.plan
{
    border-radius    : 0.5rem;
    background-color : #F4F4F9;
}

.planHeader
{
    display        : flex;
    align-items    : flex-start;
    flex-direction : column;
    margin-top     : -0.9rem;
    padding        : 1rem 1rem 1rem 1.6rem;
    text-align     : left;
    border-bottom  : 1px solid lightgray;
}

.planHeader h6
{
    margin-bottom : -0.2rem;
    font-size     : 1rem;
    color         : #2C3181;
}

.planHeader p
{
    font-size : 0.9rem;
    color     : #343434;
}

.planBody
{
    margin-top    : -1rem;
    margin-bottom : -1.5rem;
}

.planBody p
{
    margin-left : 1.5rem;
    font-family : 'Poppins', sans-serif;
    font-size   : 2.6rem;
    font-weight : 700;
    text-align  : left;
    color       : #343434;
}

.planBody p sub
{
    font-size   : 0.9rem;
    font-weight : 700;
}

.planBody p sup
{
    font-size   : 1.2rem;
    font-weight : 900;
}

.planBody ul
{
    margin-top      : -0.2rem;
    margin-left     : -0.5rem;
    list-style-type : none;
    color           : #B1B1B1;
}

.planBody ul li
{
    display         : flex;
    flex-direction  : row;
    justify-content : space-between;
    margin-top      : 1.8rem;
    font-size       : 1.3rem;
    text-align      : right;
}

.fa-check
{
    width        : 1rem;
    height       : 1rem;
    margin-right : 1.8rem;
    font-size    : 1.5rem;
    line-height  : 2rem;
    color        : #FFCA05;
}

.planBody button
{
    width            : 13rem;
    height           : 3.7rem;
    margin-top       : 3rem;
    margin-left      : -9.5rem;
    transition       : all 0.5s ease;
    font-size        : 1.3rem;
    font-weight      : 600;
    color            : white;
    border           : 1px solid #2C3181;
    border-radius    : 2rem;
    background-color : #2C3181;
}

.planBody button:hover
{
    cursor     : pointer;
    transform  : scale(1.05);
    box-shadow : 1px 1px 10px 2px rgba(0, 0, 0, 0.3);
}

@media (max-width : 1270px)
{
    .monthlyPlans,
    .yearlyPlans
    {
        grid-template-columns : 40% 40% 40%;
        grid-auto-rows        : calc(110%);
    }

    .planBody button
    {
        width       : 12rem;
        height      : 3.6rem;
        margin-left : -6rem;
        font-size   : 1.1rem;
    }
}

@media (max-width : 1070px)
{
    .monthlyPlans,
    .yearlyPlans
    {
        grid-template-columns : 70% 70%;
        grid-auto-rows        : calc(54%);
    }

    .planBody button
    {
        width       : 13rem;
        height      : 3.7rem;
        margin-left : -7rem;
        font-size   : 1.3rem;
    }

    .monthlyOrYearly
    {
        width       : 60%;
        margin-left : 7rem;
    }

    :checked + label
    {
        background : #2E3191;
    }
}

@media (max-width : 830px)
{
    .monthlyPlans,
    .yearlyPlans
    {
        grid-template-columns : 105%;
        grid-auto-rows        : calc(36%);
    }

    .planBody button
    {
        width       : 15rem;
        margin-left : -7rem;
        font-size   : 1.4rem;
    }

    .monthlyOrYearly
    {
        width       : 90%;
        margin-left : 1.5rem;
    }

    :checked + label
    {
        background : #2E3191;
    }
}

@media (max-width : 445px)
{
    .monthlyPlans,
    .yearlyPlans
    {
        grid-template-columns : 80%;
        grid-auto-rows        : calc(36%);
    }

    .planBody button
    {
        width       : 13rem;
        margin-left : -4rem;
        font-size   : 1.3rem;
    }
}