/*================================= Design Header Section ============================*/
.pricing__Sec1
{
    background-color : #0774ff;
}

.pricingFrame1
{
    margin : 1rem 0rem !important;
    padding : 1rem 1rem;
}

.price__SmTXTTag
{
    width : 30%;
}

.pricing__HeaderH3
{
    font-size : 2.9rem;
    text-transform : capitalize;
    line-height : 3.2rem;
}

.pricingFrame1__SmTags
{
    display : flex;
    flex-direction : column;
    align-items : flex-start;
    justify-content : flex-start;
    gap : 1rem;
}

.priceFrame1__smTAG
{
    display : flex;
    flex-direction : row;
    align-items : center;
    justify-content : flex-start;
    gap : 0.3rem;
}

.priceFrame1__Icon
{
    width : 20px;
    height : 20px;
    display : flex;
    flex-direction : row;
    align-items : center;
    justify-content : center;
    border-radius : 50%;
    background-color : #ffc107;
}

.priceFrame1__Icon i 
{
    font-size : 0.7rem;
}

.priceFrame1__TXT
{
    font-size : 0.8rem;
    font-weight : 400;
    text-transform : capitalize;
}

.pricing__Frame1TXT
{
    width : 100%;
    justify-content: space-between;
    align-items : flex-end;
}

.pricingHeader__Container
{
    width : 100%;
    justify-content : space-between;
}

.pricingTAG__H4
{
    font-size : 1.5rem;
    font-weight : 700;
    color : #4c5671;
    margin-bottom : 0.5rem;
}

.pricing__PTag
{
    display : flex;
    flex-direction : row;
    align-items : flex-end;
    justify-content : flex-end;
    width : 60%;
    padding : 1rem 0.9rem;
    background : #0774ff;
    border-radius : 0.3rem;
}

.pricing__PTag p 
{
    width : 100%;
    margin : 0;
    padding : 0;
    color : #fff;
    font-size : 0.9rem;
    font-weight : 600;
}

.pricing__Frame2
{
    margin : 0 !important;
    padding : 0rem 3rem !important;
}













/*========================== MEDIA QUERY FOR MEDIUM SIZE DEVICES ======================*/
@media screen and (max-width : 768px)
{
    .payment__HeaderContainer
    {
        flex-direction : column;
        gap : 3rem;
    }

    .payment__BannerImgContainer
    {
        width : 100%;
    }

    .paymentMethod__ImgTwo 
    {
        margin: 0rem auto;
        width: 500px;
    }

    .payment__BannerImgOne 
    {
        bottom : 0;
        left : 21%;
    }

    .paymentMethod__SingleDollar 
    {
        top: 2rem;
        right: 8rem;
    }

    .paymentMethod__MultiDollar 
    {
        right: 9rem;
        bottom: 0rem;
    }

    .pricingFrame1 
    {
        max-width: 800px;
        margin: 1rem auto !important;
        padding: 1rem 2rem;
    }
}

/*======================= MEDIA QUERY FOR SMALLER DEVICES ========================*/
@media screen and (max-width : 525px)
{
    .navBar__Container 
    {
        padding : 1rem;
    }

    .about__HeaderContainer 
    {
        margin: 4rem 2rem 3rem;
    }

    .price__SmTXTTag 
    {
        width: 30%;
    }

    .about__SmTxtTag p 
    {
        font-size : 0.8rem;
    }

    .pricing__HeaderH3 
    {
        font-size: 2rem;
        line-height: 2.2rem;
    }

    .paymentMethod__ImgTwo 
    {
        width : 100%;
    }

   .paymentMethod__ImgTwo img
    {
        max-width : 500px;
        width : 90%;
        height : 90%;
    }

    .paymentMethod__SingleDollar 
    {
        top: -1rem;
        right: 4rem;
    }

    .about__HeaderImgContainer img 
    {
        width: 80%;
        height: 80%;
        margin : 1rem auto;
    }

    .paymentMethod__SingleDollar {
        top: 0rem;
        right: 3rem;
    }

    .paymentMethod__MultiDollar {
        right: 4rem;
    }

    .payment__BannerImgOne 
    {
        left: 16%;
    }

    .pricingTAG__H4 
    {
        font-size: 1.2rem;
    }

    .dedicated_HostieTag h4 
    {
        padding: 0.2rem 0.5rem;
        font-size : 0.8rem;
    }

    .priceYear__SmTagOne h4 
    {
        font-size: 0.8rem;
    }

    .priceYear__SmImg 
    {
        width: 200px;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }

    .pricing__PTag 
    {
        width : 50%;
        padding : 0.5rem 0.8rem;
    }

    .pricing__Frame2 
    {
        overflow-x : auto;
        width : 100%;
        min-width: 0;
        -webkit-overflow-scrolling: touch;
    }

    .pricing__Table
    {
        min-width : 800px;
        width : 100%;
        margin : 1rem auto;
    }

    .cell 
    {
        padding: 10px 10px;
    }

    td 
    {
        font-size : 0.8rem;
    }

    .priceYear__Comparasion 
    {
        flex-direction : column;
        gap : 1rem;
    }

    .pricingTAG__H4 {
        text-align: center;
    }
}

@media screen and (max-width : 425px)
{
    .about__HeaderContainer 
    {
        padding-bottom : 0;
    }

    .payment__BannerImgContainer 
    {
        width: 90%;
    }

    .price__SmTXTTag 
    {
        width: 50%;
    }

    .about__SmTxtTag p 
    {
        font-size: 0.7rem;
    }

    .pricing__HeaderH3 {
        font-size: 1.7rem;
        line-height: 2rem;
    }

    .payment__BannerImgOne 
    {
        width: 20%;
        bottom: 20%;
        left: 6%;
    }

        .paymentMethod__SingleDollar {
        width: 30%;
        top: 1rem;
        right: 2rem;
    }

    .paymentMethod__MultiDollar 
    {
        right: -1rem;
        bottom: 4rem;
    }
}









/* responsive media query for larger devices..!*/
@media screen and (min-width : 1024px)
{
    .price__SmTXTTag {
        width: 40%;
    }

    .payment__BannerImgContainer 
    {
        justify-content: center;
    }

    .payment__BannerImgOne 
    {
        left: 3rem;
    }

    .paymentMethod__SingleDollar 
    {
        top: 1rem;
        right: 3rem;
    }
}


@media screen and (min-width : 1440px)
{
    .price__SmTXTTag {
        width: 30%;
    }

    .paymentMethod__SingleDollar 
    {
        right: 9rem;
    }

    .paymentMethod__MultiDollar 
    {
        right: 9rem;
    }

    .payment__BannerImgOne 
    {
        left: 8rem;
    }
}


@media screen and (min-width : 3840px)
{
    .section__One
    {
        max-width : 1800px;
        margin : 0 auto;
    }

    .sale__infoContainer
    {
        max-width : 1800px;
    }

    .navBar__Container
    {
        max-width : 1800px;
    }

    .payment__HeaderContainer
    {
        max-width : 1800px;
    }

    .paymentMethod__SingleDollar 
    {
        right: 12rem;
    }

    .paymentMethod__MultiDollar 
    {
        right: 12rem;
    }
}
