.QA_card {
  width: 80%;
  height: 300px;
  background-color: rgba(27, 32, 64, 0);
  border: 2px solid rgba(27, 32, 64, 1);
  font-family: 'Abhaya Libre', serif;
  position: relative;
  overflow: hidden;
  margin: auto;
  padding: 10px;
}

.question {
  text-align: center;
  left: auto;
  top: 50px;
  font-size: 25px;
  color: rgba(27, 32, 64, 1);
}

.summary {
  top: 100px;
  text-align: center;
  position: absolute;
  font-size: 20px;
  color: rgba(27, 32, 64, 1);
}

.author {
  position: absolute;
  bottom: 10px;
  left: 10px;
  font-size: 20px;
  color: rgba(27, 32, 64, 1);
}

.tutor_type {
  position: absolute;
  bottom: 10px;
  right: 75px;
  font-size: 20px;
  color: rgba(27, 32, 64, 1);
}

.arrow {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 50px;
  height: 50px;
  z-index: 1;
  color: black;
  background-image: url("../../assets/img/arrow_45deg.jpeg");
  background-size: cover;
  transition: 0.3s;
}

.QA_card:hover .arrow {
  background-color: rgba(27, 32, 64, 1);
  background-image: url("../../assets/img/arrow_45deg_white.jpeg");
  background-size: cover;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
  transition: 0.3s;
}

.QA_card:hover {
  background-color: rgb(29,62,55, 0.03);
  border-color: rgba(212,175,54,255);
}

@media ( max-width : 1200px) {
  .QA_card {
    width: 95%;
    height: 350px;
  }
}

@media ( max-width : 1200px) {
  .summary {
    top: 100px;
  }
}

@media ( max-width : 1200px) {
  .author {
    bottom: 55px;
    left: 10px;
  }
}

@media ( max-width : 1200px) {
  .tutor_type {
    bottom: 10px;
    right: 55px;
  }
}

@media (max-width: 576px) {
  .QA_card {
    width: 95%;
    height: 600px;
  }
}

@media (max-width: 576px) {
  .summary {
    top: 165px;
  }
}

@media (max-width: 576px) {
  .author {
    bottom: 55px;
    left: 10px;
  }
}

@media (max-width: 576px) {
  .tutor_type {
    bottom: 10px;
    right: 55px;
  }
}