Css code - how do I display red text in block under credit card

.desktop .section-payment {
    width: 65% !important;
}
#pay-met-sec {
    display: block;
}

#pay-met {
    float: left;
    width: 48%;
    border: 1px solid rgba(226, 226, 226, 1);
    margin: 0 5px 5px 0;
    padding: 15px 10px 10px 10px;
}

.section-payment .section-body > div:first-child::after {
    content: url(image/payment/cc_icon.png);
}

.section-payment .section-body > div:nth-child(2)::after {
    content: url(image/payment/paypal_icon.png);
}

.section-payment .section-body > div:nth-child(3)::after {
    content: url(image/payment/ach60.png);
}

.section-payment .section-body > div:nth-child(4)::after {
    content: url(image/payment/check_icon.png);
}

#pay-met::after {
    content: "3% transaction fee will be added to credit card sales";
    text-align: center;
    display: block;
    position: absolute;
    bottom: 5px; /* Adjust the spacing as needed */
    left: 0;
    width: 100%;
    font-size: 12px;
    color: red; /* Change the color to red */
}