/* img{
    height:40%;
    width:40%;
} */
/* body {
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
  padding: 40px;
  display: flex;
  justify-content: center;
} */
 .card-front-content {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.flip-card-container {
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 5%;
  flex-wrap: wrap;
gap: 8px;
}

.flip-card {
  width: 40%;    /* Card takes 40% of the container's width */
  height: 55vw;  /* Responsive height based on viewport width */
  max-height: 500px; /* Optional cap on height */
  perspective: 1000px;

}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  backface-visibility: hidden;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.flip-card-front {
  background-color: #fff;
  color: black;
}

.flip-card-front img {
  height: 75%;       /* Still uses % of the card */
  width: 100%;
  object-fit: fill;
  padding: 1em;
}

.flip-card-back {
  background-color: #007BFF;
  color: white;
  transform: rotateY(180deg);
  padding: 20px;
  box-sizing: border-box;
}

.flip-card-back p {
  font-size: 120%;
  margin-top: 0;
}

h4 {
    font-size: 4rem;
    text-align: center;
}

/* p {
    font-size: 150%;
} */

.nav .nav-item .nav-link.active {
    background-color: lightpink;
    color: darkblue;
}
body {
  background-color: LavenderBlush;
}