Trouble getting the copyright text in my footer to go on a separate line

Question

I've got a footer section that has some copyright text. Initially it was already centre aligned and at the bottom of the footer, but since formatting the style it's become right aligned and I've tried a few things to get it to go onto the bottom row but so far nothing's worked. Just to clarify - I want it within the styled container, but centered on a separate row.

The footer.php is:

<footer class="page-footer">
    <div class="container">
        <div class="row">
            <div class="col l6 s12">
                <h5 class="white-text">Footer Content</h5>
                <p class="grey-text text-lighten-4">You can use rows and columns here to organize your footer content.</p>
            </div>
            <div class="col l4 offset-l2 s12">
                <h5 class="white-text">Links</h5>
                <ul>
                    <li><a class="grey-text text-lighten-3" href="#!">Link 1</a></li>
                    <li><a class="grey-text text-lighten-3" href="#!">Link 2</a></li>
                    <li><a class="grey-text text-lighten-3" href="#!">Link 3</a></li>
                    <li><a class="grey-text text-lighten-3" href="#!">Link 4</a></li>
                </ul>
            </div>
        </div>
    </div>

    <!-- Copyright text in a separate block-level element -->
    <div class="footer-copyright text-center">
        <p class="copyright-text">© Copyright Azure Theme 2023</p>
    </div>
</footer>
</div>

The style.css started getting confusing for me and currently that section is:

/* Footer container */
.page-footer {
    background-color: #333; /* Dark grey background color */
    padding: 40px; /* Add padding as needed */
    color: #fff; /* Text color for footer items */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Style for footer links */
.page-footer a {
    color: #fff; 
    text-decoration: none; 
}

.page-footer h5.white-text {
    color: #fff;
}

.page-footer h3 {
    font-size: 1.5rem; 
}
p.copyright-text {
        display: block;
        color: #fff;
        font-size: 0.85rem;
        text-align: center;
        bottom:0;
}

.page-footer li.widget {
    list-style: none;
}

div.col.l4.offset-l2.s12 ul {
    list-style-type: none; /* Remove bullet points */
}

ul.social-list {
    list-style-type: none;
}

li#block-9 ul.social-list {
    text-align: center;
    list-style-type: none; /* Remove bullets */
    padding: 0; /* Remove padding */
    margin: 0; /* Remove margins */
}

li#block-9 ul.social-list li {
    display: inline-block;
    margin: 0 10px; /* Adjust the margin as needed */
    text-align: left; /* Reset text alignment for list items */
}

li.widget {
    list-style: none;
    text-align: center;
}

I'm pretty much a beginner so I've been searching online and looking at YouTube videos but nothing's worked for me.

Thanks!

I tried:

.page-footer .copyright-text {
    text-align: center !important; 
    display: block; 
    margin-top: 10px; 
    width: 100%; 
}

and

.page-footer .copyright-text {
    text-align: center;
    margin-top: 10px; 
}

I also tried to add width: 100% to the p.copyright-text section.