Notes

<link rel="stylesheet" href="">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">

<footer *ngIf="footer.visible">
<!-- Footer main -->
<section class="ft-main">
<div class="ft-main-item">
<h2 class="ft-title">About</h2>
<ul>
<li><a href="#">Corporate Information</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">FAQs</a></li>
<li><a href="#">Terms and Coditions</a></li>
<li><a href="#">Careers</a></li>
<li><a href="#">Privacy Policy</a></li>
</ul>
</div>
<div class="ft-main-item">
<h2 class="ft-title">Resources</h2>
<ul>
<li><a href="#">Vistara Bridge</a></li>
<li><a href="#">Cargo</a></li>
<li><a href="#">Charter Booking</a></li>
<li><a href="#">Group Booking</a></li>
<li><a href="#">Tariff Sheet</a></li>
</ul>
</div>
<div class="ft-main-item">
<h2 class="ft-title">Contact</h2>
<ul>
<li><a href="#">Help</a></li>
<li><a href="#">Sales</a></li>
<li><a href="#">Advertise</a></li>
</ul>
</div>
<div class="ft-main-item">
<h2 class="ft-title">Stay Updated</h2>
<p>Subscribe to our newsletter to get our latest news.</p>
<form>
<input type="email" name="email" placeholder="Enter email address">
<input type="submit" value="Subscribe">
</form>
</div>
</section>

<!-- Footer social -->
<section class="ft-social">
<ul class="ft-social-list">
<li><a href="#"><i class="fab fa-facebook"></i></a></li>
<li><a href="#"><i class="fab fa-twitter"></i></a></li>



<li><a href="#"><i class="fab fa-instagram"></i></a></li>
<li><a href="#"><i class="fab fa-github"></i></a></li>
<li><a href="#"><i class="fab fa-linkedin"></i></a></li>
<li><a href="#"><i class="fab fa-youtube"></i></a></li>
</ul>
</section>

<!-- Footer legal -->
<section class="ft-legal">
<ul class="ft-legal-list">
<li><a href="#">Terms &amp; Conditions</a></li>
<li><a href="#">Privacy Policy</a></li>
<li>&copy; 2019 Copyright Nowrap Inc.</li>
</ul>
</section>
</footer>

/* @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
body{
line-height: 1.5;
font-family: 'Poppins', sans-serif;
}
*{
margin:0;
padding:0;
box-sizing: border-box;
}
.container{
max-width: 1170px;
margin:auto;
}
.row{
display: flex;
flex-wrap: wrap;
}
ul{
list-style: none;
}
.footer{
background-color: #24262b;
padding: 70px 0;
}
.footer-col{
width: 25%;
padding: 0 15px;
}
.footer-col h4{
font-size: 18px;
color: #ffffff;
text-transform: capitalize;
margin-bottom: 35px;
font-weight: 500;
position: relative;
}
.footer-col h4::before{
content: '';
position: absolute;
left:0;
bottom: -10px;
background-color: #e91e63;
height: 2px;
box-sizing: border-box;
width: 50px;
}
.footer-col ul li:not(:last-child){
margin-bottom: 10px;
}
.footer-col ul li a{
font-size: 16px;
text-transform: capitalize;
color: #ffffff;
text-decoration: none;
font-weight: 300;
color: #bbbbbb;
display: block;
transition: all 0.3s ease;
}
.footer-col ul li a:hover{
color: #ffffff;
padding-left: 8px;
}
.footer-col .social-links a{
display: inline-block;
height: 40px;
width: 40px;
background-color: rgba(255,255,255,0.2);
margin:0 10px 10px 0;
text-align: center;
line-height: 40px;
border-radius: 50%;
color: #ffffff;
transition: all 0.5s ease;
}
.footer-col .social-links a:hover{
color: #24262b;
background-color: #ffffff;
}

/*responsive*/
/* @media(max-width: 767px){
.footer-col{
width: 50%;
margin-bottom: 30px;
}
}
@media(max-width: 574px){
.footer-col{
width: 100%;
}
} */
* {
box-sizing: border-box;
font-family: ’Lato’, sans-serif;
margin: 0;
padding: 0;
}
ul {
list-style: none;
padding-left: 0;
}
footer {
background-color: #555;
color: #bbb;
line-height: 1.5;
}
footer a {
text-decoration: none;
color: #eee;
}
a:hover {
text-decoration: underline;
}
.ft-title {
color: #fff;
font-family: ’Merriweather’, serif;
font-size: 1.375rem;
padding-bottom: 0.625rem;
}

body {
display: flex;
min-height: 100vh;
flex-direction: column;
}
.container {
flex: 1; /* same as flex-grow: 1; */
}

.ft-main {
padding: 1.25rem 1.875rem;
display: flex;
flex-wrap: wrap;
}
.ft-main-item {
padding: 1.25rem;
min-width: 12.5rem /*200px*/;
}


@media only screen and (min-width: 29.8125rem /*477px*/) {
.ft-main {
justify-content: space-around;
}
}
@media only screen and (min-width: 77.5rem /*1240px*/ ) {
.ft-main {
justify-content: space-evenly;
}
}


form {
display: flex;
flex-wrap: wrap;
}
input[type="email"] {
border: 0;
padding: 0.625rem;
margin-top: 0.3125rem;
}
input[type="submit"] {
background-color: #00d188;
color: #fff;
cursor: pointer;
border: 0;
padding: 0.625rem 0.9375rem;
margin-top: 0.3125rem;
}


.ft-social {
padding: 0 1.875rem 1.25rem;
}
.ft-social-list {
display: flex;
justify-content: center;
border-top: 1px #777 solid;
padding-top: 1.25rem;
}
.ft-social-list li {
margin: 0.5rem;
font-size: 1.25rem;
}


.ft-legal {
padding: 0.9375rem 1.875rem;
background-color: #333;
}
.ft-legal-list {
width: 100%;
display: flex;
flex-wrap: wrap;
}
.ft-legal-list li {
margin: 0.125rem 0.625rem;
white-space: nowrap;
}
/* one before the last child */
.ft-legal-list li:nth-last-child(2) {
flex: 1; /* same as flex-grow: 1; */
}