How to Create Responsive Footer Using html and Css

<footer class="footer">
   <div class="container-custome">
      <div class="row-custome">
         <div class="footer-col-custome">
            <h5>About Company</h5>
            <img src="https://codekarnedo.com/malinLogo.png" class="logo" height="40">
            <p class="text-white">Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
         </div>
         <div class="footer-col-custome">
            <h5>Quick Link</h5>
            <ul class="ul-custome">
               <li><a href="#">Home</a></li>
               <li><a href="#">About Us</a></li>
               <li><a href="#">Services</a></li>
               <li><a href="#">Contact Us</a></li>
               <li><a href="#">Privacy policy</a></li>
            </ul>
         </div>
         <div class="footer-col-custome">
            <h5>Get help</h5>
            <ul class="ul-custome">
               <li><a href="#">FAQ</a></li>
               <li><a href="#">Returns</a></li>
               <li><a href="#">Shipping</a></li>
               <li><a href="#">Payment options</a></li>
               <li><a href="#">Order status</a></li>
            </ul>
         </div>
         <div class="footer-col-custome">
            <h5>Follow us</h5>
            <div class="social-links">
               <a href="#"><i class="fab fa-twitter"></i></a>
               <a href="#"><i class="fab fa-facebook-f"></i></a>
               <a href="#"><i class="fab fa-instagram"></i></a>
               <a href="#"><i class="fab fa-linkedin-in"></i></a>
            </div>
         </div>
      </div>
      <hr />
      <div class="footer-end">© Copyright 2024 CKD. All Rights Reserved. </div>
      <hr />
   </div>
</footer>

.container-custome {
    width: 95%;
    margin: auto;
}
.row-custome {
    display: flex;
    flex-wrap: wrap;
}
.logo {
    background-color: #000;
    padding: 5px 10px;
    box-shadow: 0 0 1px #000;
    border-radius: 20px 0;
}
ul.ul-custome li {
    color: #fff;
    list-style-type: none;
    margin-left: -40px;
}
.footer {
    background-color: #3f4247;
    padding: 15px;
}
.footer-col-custome {
    width: 22%;
    padding: 0 15px;
}
.footer-col-custome h5 {
    font-size: 18px;
    color: #fff;
    text-transform: capitalize;
    margin-bottom: 35px;
    font-weight: 500;
    position: relative;
}
.footer-col-custome h5::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -10px;
    background-color: #ff5d7d;
    height: 2px;
    box-sizing: border-box;
    width: 50px;
}
.footer-col-custome ul li:not(:last-child) {
    margin-bottom: 10px;
}
.footer-col-custome ul li a {
    font-size: 16px;
    text-transform: capitalize;
    text-decoration: none;
    font-weight: 300;
    color: #ccc;
    display: block;
    transition: 0.2s;
}
.footer-col-custome ul li a:hover {
    color: #fff;
    padding-left: 8px;
}
.footer-col-custome .social-links a {
    display: inline-block;
    height: 39px;
    width: 39px;
    background-color: rgba(255, 255, 255, 0.2);
    margin: 0 10px 10px 0;
    text-align: center;
    line-height: 40px;
    border-radius: 50%;
    rotate: 360deg;
    color: #fff;
    transition: 0.5s;
}
.footer-col-custome .social-links a:hover {
    color: #24262b;
    background-color: #fff;
    rotate: 0deg;
}
.text-white {
    color: #ccc;
}
.footer-end {
    color: #ccc;
    font-size: 16px;
    text-align: center;
    margin-top: 20px;
    margin-bottom: 20px;
}
@media only screen and (max-width: 767px) {
    .footer-col-custome {
        width: 100%;
        margin-bottom: 30px;
    }
    .container-custome {
        width: 100%;
        margin: auto;
    }
}