.card {
  position: relative;
  display: inline-block;
}

.card-flip {
  width: 100%;
  box-sizing: border-box;
  transition: background-color 0.3s ease;
  border: 1px solid #07737A;
  border-radius: 25px;
}

.card-flip:hover,
.card-flip.active,
.card.active .card-flip {
  background-color: #e5f5f6;
}

.card-flip-text {
  position: absolute;
  top: 20px;
  left: 20px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.card-flip:hover + .card-flip-text,
.card:hover .card-text,
.card.active .card-flip-text,
.card.active .card-text {
  opacity: 1;
}

.footer-nav:hover{
    color:#07737A;
}

@media (max-width: 768px) {
  .card:hover .card-flip {
    background-color: transparent;
  }
  
  .card:hover .card-flip-text,
  .card:hover .card-text {
    opacity: 0;
  }
}