/* From uiverse.io by @meermubashar */
.quicklink{
  margin-top: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 20px;
}
.quicklink h2{
  font-size: 50px;
}
.quicklink .sub-heading {
  font-size: 30px;
  width: 100%;
}

.quicklink .links {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.quicklink .links a{
  text-decoration: none;
  color: rgb(43, 43, 43);
}


/* Button CSS */
.links button {
  width: fit-content;
  padding: 30px 20px;
  height: fit-content;
  font-size: 23px;
  cursor: pointer;
  border: none;
  outline: none;
  background: transparent;
  color: grey;
  font-family: 'Times New Roman', Times, serif;
  font-weight: 700;
  position: relative;
  transition: all 0.5s;
  z-index: 1;
 }
 
 .links button::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 5px;
  height: 100%;
  background-color: rgba(118, 118, 118, 0.233);
  z-index: -1;
  transition: all 0.5s;
 }
 
 .links button:hover::before {
  width: 100%;
 }
 
 .links button:hover {
  color: black;
 }
 
 .links button:active:before {
  background: #b9b9b9;
 }
 
 @media only screen and (max-width: 500px) {
   .links button {
     font-size: 20px;
   }
 }