<footer id="primary-footer">
	<!-- footer widget start -->
	<div class="container footer-widget-area">
		<div class="row">
			<div class="col-md-4 p-3">
				<div class="footer-widget-heading">
					<h4>Fox Maya</h4>
				</div>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
				<div class="footer-social-icon">
                                <div class="social-title">Follow us:</div>
                                <a href="https://www.facebook.com/foxmayaban/"><i class="fab fa-facebook-f circle-icon"></i></a>
                                <a href="https://www.instagram.com/foxmayadigital/"><i class="fab fa-instagram circle-icon"></i></a>
                                <a href="https://twitter.com/foxmayadigital"><i class="fab fa-twitter circle-icon"></i></a>
                                <a href="https://www.linkedin.com/in/ban-sharma/"><i class="fab fa-linkedin-in circle-icon"></i></a>
                            </div>
			</div>
			<div class="col-md-4 p-3">
				<div class="footer-widget-heading">
					<h4>Popular Posts</h4>
				</div>
				      <ul class="linkediting">
                        <li><a href="#"><i class="fa fa-angle-right"></i> Free Bootstrap 4 Templates</a></li>
                        <li><a href="#"><i class="fa fa-angle-right"></i> Bootstrap Footer Templates</a></li>
                        <li><a href="#"><i class="fa fa-angle-right"></i> Bootstrap Portfolio Themes</a></li>
                        <li><a href="#"><i class="fa fa-angle-right"></i> Bootstrap Hero</a></li>
                        <li><a href="#"><i class="fa fa-angle-right"></i> Bootstrap 4 Tutorial</a></li>
	                  </ul>
				</div>
			<div class="col-md-4 p-3">
				<div class="footer-widget-heading">
					<h4>Quick Links</h4>
				</div>
				<ul class="linkediting">
                        <li><a href="#"><i class="fa fa-angle-right"></i> About Us</a></li>
                        <li><a href="#"><i class="fa fa-angle-right"></i> Contact Us</a></li>
                        <li><a href="#"><i class="fa fa-angle-right"></i> My Portfolio</a></li>
                        <li><a href="#"><i class="fa fa-angle-right"></i> Testimonials</a></li>
	                  </ul>
			</div>
		</div>
	</div>
	<!-- footer widget end -->
    <hr>
    <!-- footer credit -->
	<div class="copyright-area">
		<div class="container">
			<div class="row">
				<div class="col-md-6">
					<div class="copyright-text text-left">
                            <p>Designed by <a href="https://foxmaya.com/about/">Ban Sharma</a></p>
                        </div>
				</div>
				<div class="col-md-6">
					<div class="footer-menus text-right">
						<ul>
                        <li><a href="#">Privacy Policy</a></li>
                        <li><a href="#">Terms & Condition</a></li>
	                  </ul>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- footer credit end -->
</footer>
/* default list style css */
ul{
    margin: 0px;
    padding: 0px;
  	}

	ul li{
	list-style: none;
    }

/* main footer css */
#primary-footer{
	background-color: #edf7fa;
	}

	.footer-widget-area{
		padding: 50px 0;
	}

/* main footer inner css */

.footer-widget-area p{
		font-size: 20px;
	}

	.footer-widget-area li{
		margin-top: 10px;
	}

	.footer-widget-area li a{
		font-size: 20px;
		color: var(--black);
	}

	.footer-widget-area li a:hover{
	 text-decoration: none;
	 color: #00d07e;
	}

	.footer-widget-heading h4{
		font-weight: bold;
		font-size: 25px;
	}

.linkediting .fa{
    	color: #21bf73;
    }


.footer-social-icon .social-title{
    	font-size: 20px;
    	font-weight: bold;
    	margin-bottom: 10px;
}

	.circle-icon {
    background: #ccf6c8;
    color: #21bf73;
    padding:12px;
    border-radius: 50%;
    margin-left: 5px;
    height: 40px;
    width: 40px;
    text-align: center;
}

/* footer credit css */

.copyright-area{
	background-color: #edf7fa;
	padding: 20px 0;
    }

    .copyright-text p{
    	font-size: 18px;
    }

    .copyright-text a{
    	color: #21bf73;
    	font-weight: 600;
    }

    .footer-menus li{
    	display: inline-flex;
    	margin-left: 20px;
    }

    .footer-menus li a {
 	 font-size: 18px;
 	 color: var(--black);
	}


/*media quries*/

	@media (max-width: 1199.98px) {

	}

	@media (max-width: 991.98px) {
       .footer-social-icon span{
     	font-size: 14px;
     }
	}

	@media (max-width: 767.98px) {
        .copyright-text p{
    	text-align:center;
     	}

     	.footer-menus ul{
    	 text-align:center;
    	}

    	.footer-social-icon span{
     	font-size: 18px;
     }
	}

	@media (max-width: 575.98px) {
		
		.footer-widget-area{
		padding: 0 20px;
		}

		.copyright-text p{
    	text-align:center;
    	font-size:16px;
     	}

     	.footer-menus ul{
    	 text-align:center;
    	}

    	.footer-menus ul li a{
    	 font-size:16px;
    	}
	}

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css
  2. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js