.payment__HeaderContainer
{
    display : flex;
    flex-direction : row;
    align-items : center;
    justify-content: space-between;
}

.payment__SmTxtTag
{
    width : 25%;
}

.payment__BannerImgContainer
{
    position : relative;
    display : flex;
    flex-direction : row;
    align-items : flex-start;
}

.payment__BannerImgOne
{
    width : 60px;
    position : absolute;
    bottom : 1rem;
}

.paymentMethod__ImgTwo
{
    width : 400px;
    height : 400px;
}

.paymentMethod__SingleDollar
{
    position : absolute;
    top : 3rem;
    right : 5rem;
    animation : moveToTopBottom 15s linear infinite;
}

@keyframes moveToTopBottom
{
    0% 
    {
        transform : translateY(-20%);
    }

    50% 
    {
        transform : translateY(20%);
    }

    100% 
    {
        transform : translateY(-20%);
    }    
}

.paymentMethod__MultiDollar
{
    position : absolute;
    right : 3rem;
    bottom : -1rem;
    animation : moveToTopBottom 15s linear infinite;
}


/*======================== Payment Frame 1 ==========================*/
.Payment__Frame1
{
    margin : 4rem 0;
    padding : 4rem 2rem;
    display : flex;
    flex-direction : column;
    align-items : center;
    justify-content : center;
    gap : 2rem;
}

.Payment__Frame1Header
{
    display : flex;
    flex-direction : column;
    align-items : center;
    justify-content : center;
}

.Payment__Frame1Header h3 
{
    font-size : 3rem;
    font-weight : 600;
    color : #2d3c58;
}

.Payment__Frame1Header p 
{
    color : #4c5671;
    width : 70%;
    text-align : center;
    margin : 1rem auto;
}

.Payment__Frame1ImgContainer
{
    width : 100%;
    display : flex;
    flex-direction : row;
    flex-wrap : wrap;
    align-items : center;
    justify-content : center;
    gap : 1rem;
}

.Payment__CreditImgContainer
{
    display : flex;
    flex-direction : column;
    align-items : center;
    justify-content : center;
    width : 50%;
    height : 300px;
    padding : 2.4rem;
    border : 1px solid #d4dcff;
}

.Payment__CreditTxt
{
    margin : 1rem auto;
}

.Payment__CreditTxt h3 
{
    color : #2d3c58;
    font-size : 1.8rem;
    font-weight: 700;
    text-transform : capitalize;
}

.Payment__CreditImg
{
    margin-top : 2rem;
    width : 100%;
    display : grid;
    grid-template-columns: repeat(3, 1fr);
    gap : 1rem;
}

.Payment__E__WalletContainer
{
    width : 50%;
    padding : 2.3rem;
    border : 1px solid #d4dcff;
    border-radius : 0.3rem;
}

.Payment__EWalletTxtContainer
{
    margin : 0.5rem auto;
}

.Payment__EWalletTxtContainer h3 
{
    font-size : 1.8rem;
    font-weight: 700;
    color : #2d3c58;
    text-align: center;
}

.Payment__EWalletImgContainer
{
    margin-top : 2rem;
    display : flex;
    flex-direction : row;
    flex-wrap : wrap;
    align-items : center;
    justify-content : center;
    gap : 1rem;
}

.Crypto__ImgContainer
{
    width : 50%;
    display : flex;
    flex-direction : column;
    align-items : center;
    justify-content : center;
    border : 1px solid #d4dcff;
    border-radius : 0.2rem;
    padding : 2.3rem;
}

.Crypto__ImgTxtContainer
{
    margin : 0.5rem auto;
}

.Crypto__ImgTxtContainer h3 
{
    font-size : 1.8rem;
    font-weight : 700;
    color : #4c5671;
}

.Crypto__SmImgContainer
{
    margin-top : 2rem;
    display : flex;
    flex-direction : row;
    flex-wrap : wrap;
    align-items : center;
    justify-content : center;
    gap : 1rem;
}

/*=============== Generate CSS for Second Payment Frame =============*/
.paymentFrame2__MainContainer
{
     background-color : #f4f9ff;
}

.Payment__Frame2
{
    margin : 3rem 0rem;
    padding : 4rem 2rem;
    display : flex;
    flex-direction : row;
    align-items : center;
    justify-content : space-between;
    gap : 2rem;
}

.Payment__Frame2TxtContainer
{
    width : 50%;
    display : flex;
    flex-direction : column;
    align-items : flex-start;
    justify-content : flex-start;
    gap : 1rem;
}

.Payment__Frame2TxtContainer h3 
{
    font-size : 2.1rem;
    font-weight : 700;
    color : #2d3c58;
}

.Payment__Frame2TxtContainer p 
{
    max-width : 440px;
    color : #4c5671;
    font-weight : 400;
}

.Payment__SmTxtContainer 
{
    display : flex;
    flex-direction : column;
    align-items : flex-start;
    justify-content : flex-start;
}
.Payment__SmPOne
{
    display : flex;
    flex-direction : row;
    align-items : center;
    justify-content : flex-start;
    gap : 1rem;
}

.Payment__SmPOneI
{
    width: 15px;
    height : 15px;
    display : flex;
    flex-direction : row;
    align-items : center;
    justify-content : center;
    border-radius : 50%;
    background-color : #0774ff;
}

.Payment__SmPOneI i 
{
    font-size : 0.5rem;
    color : #fff;
    display : flex;
    flex-direction : row;
    align-items : center;
    justify-content : center;
}

.Payment__SmPOneh4
{
    font-size : 1rem;
    font-weight : 400;
    color : #4c5671;
}

.Payment__SmBtnContainer
{
    margin-top : 2rem;
    padding : 0.8rem 1.8rem;
    border : none;
    outline : none;
    border-radius : 0.2rem;
    background-color : #0774ff;
    cursor : pointer;
    transition : all 0.3s ease;
}

.Payment__SmBtnContainer a
{
    font-weight : 400;
    color : #fff;
}

.Payment__SmBtnContainer:hover 
{
    background-color : #ffc107;
}

.Payment__SmBtnContainer:hover a
{
    color : #2d3c58;
    font-weight : 400;
}

.Payment__SmBtnContainer:hover i 
{
    color : #2d3c58;
}






/*============================= MEDIA QUERY FOR MEDIUM SIZE DEVICES =======================*/
@media screen and (max-width : 768px)
{
    .Payment__Frame2 
    {
        flex-direction : column-reverse;
        align-items : center;
        justify-content : center;
        padding : 7rem 2rem;
        margin: 3rem auto;
    }

    .Payment__Frame2TxtContainer, 
    .Payment__Frame2ImgContainer
    {
        width : 70%;
        margin : 1rem auto;
    }

    .Payment__CreditImgContainer, 
    .Payment__E__WalletContainer, 
    .Crypto__ImgContainer 
    {
        width : 100%;
    }


    .Payment__Frame2TxtContainer h3 
    {
        font-size: 2.5rem;
    }

    .Payment__Frame2TxtContainer p 
    {
        font-size: 1.2rem;
        line-height : 1.8rem;
        font-weight : 400;
    }

    .Payment__SmTxtContainer 
    {
        gap: 1rem;
        margin: 1rem 0rem;
    }

    
    .Payment__SmPOne 
    {
        gap : 1rem;
    }

    .Payment__SmPOneI 
    {
        width: 30px;
        height: 30px;
    }

    .Payment__SmPOneI i 
    {
        font-size: 0.8rem;
    }

    .Payment__SmPOneh4 
    {
        font-size: 1.1rem;
    }

}

/*==================================== MEDIA QUERY FOR SMALLER DEVICES =====================*/
@media screen and (max-width : 525px)
{
    .payment__SmTxtTag 
    {
        width: 30%;
    }

    .about__HeaderPlanBtn 
    {
        padding: 0.5rem 0.8rem;
    }

    .Payment__Frame1Header h3 
    {
        font-size: 2rem;
        line-height: 2.2rem;
    }

    .Payment__CreditTxt h3,
    .Payment__EWalletTxtContainer h3,
    .Crypto__ImgTxtContainer h3  
    {
        font-size : 1.5rem;
    }

    .Payment__CreditImg,
    .Payment__EWalletImgContainer,
    .Crypto__SmImgContainer  
    {
        margin-top: 1rem;
    }

    .Payment__Frame2 
    {
        padding : 1rem 2rem;
    }

    .Payment__Frame2TxtContainer,
    .Payment__Frame2ImgContainer 
    {
        width: 80%;
    }

    .Payment__Frame2TxtContainer h3 
    {
        text-align: left;
        font-size: 2rem;
        line-height: 2.2rem;
    }

    .Payment__Frame2TxtContainer p 
    {
        text-align: left;
        font-size: 1rem;
        line-height: 1.4rem;
        font-weight: 400;
    }

    .Payment__SmPOneI 
    {
        width: 20px;
        height: 20px;
    }

    .Payment__SmPOneI i 
    {
        font-size: 0.6rem;
    }

    .Payment__SmPOneh4 
    {
        font-size: 1rem;
    }

    .Payment__SmBtnContainer 
    {
        margin-top: 1rem;
        padding: 0.5rem 1rem;
    }

    .Payment__SmBtnContainer a 
    {
        font-size: 0.8rem;
    }

    .Payment__SmBtnContainer i 
    {
        color : #fff;
        font-size : 0.7rem;
    }
}


@media screen and (max-width : 425px)
{
    .payment__SmTxtTag 
    {
        width: 40%;
    }
    
    .about__HeaderH3 
    {
        margin : 1rem 0 1rem;
        font-size: 1.8rem;
        line-height: 2rem;
    }

    .about__HeaderSmTxt p 
    {
        width : 80%;
        font-size: 0.7rem;
    }

    .Payment__Frame1Header h3 
    {
        font-size: 1.8rem;
        line-height: 2rem;
    }


    .Payment__Frame1Header p 
    {
        width : 80%;
        font-size: 0.9rem;
        line-height: 1rem;
    }

    .Payment__CreditImgContainer,
    .Payment__E__WalletContainer,
    .Crypto__ImgContainer  
    {
        padding: 2rem 1rem;
    }

    .Payment__CreditTxt 
    {
        margin: 0.5rem auto;
    }

    .Payment__CreditTxt h3, .Payment__EWalletTxtContainer h3, .Crypto__ImgTxtContainer h3 {
        font-size: 1.3rem;
    }

    .Payment__Frame2TxtContainer h3 
    {
        font-size: 1.8rem;
        line-height: 2rem;
    }

    .Payment__Frame2TxtContainer p 
    {
        font-size : 0.8rem;
        line-height : 1.1rem;
    }

    .Payment__SmPOneh4 {
        font-size: 0.9rem;
    }
}







/*=============================== MEDIA QUERY FOR LARGER DEVICES ==========================*/
@media screen and (min-width : 1024px)
{
    .Payment__Frame1 
    {
        padding : 5rem 3rem;
        margin : 5rem auto;
        gap : 5rem;
        max-width : 1200px;
    }
    
    .Payment__Frame2
    {
        max-width : 1200px;
        margin : 4rem auto;
        padding : 5rem 2rem;
    }
}