body{
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.container{
flex: 1;/* body and it will cover all the portion of screen then footer will come*/
}


.navbar{
   height: 4rem;
   background-color: white;
   
}
.fa-compass{
    color: #fe424f;
  font-size: 2.2rem;
  /* margin-left: 15px; */
}
.nav-link{
    color: #222222 !important;    /* to override thw properties of bootstrap or other classes */
}
/*footer*/
.f-info-links a{
  text-decoration: none;
  color: #222222;
}
.f-info-links a:hover{
  text-decoration: underline;
}

.f-info-links,
.f-info-socials,
.f-info-brand {
       width: 100%;
       display: flex;
       justify-content: center;
       align-items: center;
}


  .f-info-socials i {
    margin-right: 2rem;
    font-size: 1.4rem;
  }

.f-info{
  text-align: center;
  height:8rem;
  background-color:#ebebeb ;
  display: flex;
  flex-wrap: wrap;
  align-content: space-evenly;
  justify-content: center;
}

/*cards*/
.listing-card{
  border: none!important;
  margin-bottom: 2rem;
}

.card-img-top{
  border-radius: 1rem !important;
  width: 100% !important;
  object-fit: cover !important;
}
.card-body{
  padding: 0;
 
}
.card-text p{
  font-weight: 400;
}
 
.listing-links{
  text-decoration: none;
}
.listing-links:hover{
  opacity: 0.8;
  background-color: white;
}

.edit-btn{
  background-color: #fe424f!important;
  border: none !important;
  border-radius: 25px;
  color: whitesmoke!important;
  text-align: center;
  padding: 0.5rem 1rem;
  text-decoration: none;
}
.btns{
  display: flex;
  
}
.btn{
  border-radius: 25px !important;
}
/*show page*/
.show-img{
  height: 30vh;
}