footer {
  display: flex;
  flex-direction: row;
 
  justify-content: center;
  background-color: #323f4b;
  color: #ecf0f1;
  padding: 40px 20px;
  font-family: 'Segoe UI', sans-serif;
  width: 100%;
  margin-bottom: 10px;
  direction: ltr;
  
  
}

.fast-link{
   width: 50%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
   border-radius: 10px;
  
}



.fast-link h2{
  position: relative;
  background-color: rgb(69, 71, 60);
  padding: 10px;
 
  cursor: pointer;
  display: flex;
  flex-direction: row;
  align-items: center;

}

.fast-link h2:hover{
  text-shadow: 0px 0px 4px rgba(255, 255, 255, 0.2);
}

.fast-link h2 span{
  background-color:#8FBC8F;
  color: #343738;
  padding: 5px;
  border-radius: 10px;
  margin-left: 10px;
  
}

.fast-link{
  display: flex;
  flex-direction: column;  
  justify-content: space-around;
  padding: 15px;
  background-color:rgb(69, 71, 60);
}

.fast-link h4{
  
   text-shadow: 0px 0px 4px rgba(255, 255, 255, 0.2);
   color: #283028;
   padding: 10px;
   border-radius: 10px;
}

.fast-link-tag{
  
  display: flex;
  flex-direction: column;  
  justify-content: space-around;
  text-align: center;
 

}

.fast-link-tag div{
  
  display: grid;
  padding: 10px;
  
  
  height: 100%;

  grid-template-columns: auto auto auto auto ;
}
.fast-link div a{
  margin-right: 10px;
  text-decoration: none;
  color: #eeaf10;
  cursor: pointer;
}

.fast-link div a:hover{
  color: #ecf0f1;
}


@media (max-width: 768px){
  .fast-link{
    flex-direction: column;
    height: 500px;
    width: 80%;
  }

  .fast-link h2{
    flex-direction: column;
    align-items: center;
    font-size: small;
    
    
  }

  .fast-link h2 span{
    order: 1;
    margin: 5px 10px;
  }

  .fast-link h2 p{
    order: 2;
    color: #ecf0f1;
    margin-top: 10px;
  }

  .fast-link-tag{
    height: 50%;
  }
  .fast-link-tag div{
     padding: 10px;
    
    height: 100%;
    display: grid;
    grid-template-columns: auto ;
  }
}