/* Container */
.flip-cards-container{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:20px;
  padding:20px;
  box-sizing:border-box;
}

/* Card base */
.flip-card{
  width:280px;
  height:350px;
  perspective:1000px;
  position:relative;
  box-sizing:border-box;
}

/* Inner (will rotate) */
.flip-card-inner{
  width:100%;
  height:100%;
  transition: transform 0.75s cubic-bezier(.2,.8,.2,1);
  transform-style:preserve-3d;
  position:relative;
}

/* Front & Back common */
.flip-card-front,
.flip-card-back{
  position:absolute;
  top:0; left:0;
  width:100%;
  height:100%;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  border-radius:12px;
  box-shadow:0 6px 18px rgba(0,0,0,0.12);
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  padding:18px;
  text-align:center;
  box-sizing:border-box;
}

/* Front styling */
.flip-card-front{
  background:#1d3326;
  color:#fff;
}

.flip-card-front h3 {
    color: white;
    font-weight: 800;
    font-size: 25px;
    margin:0;
}

.flip-card-front img{
  width:95px;
  height:95px;
  object-fit:contain;
  margin-bottom:14px;
}


/* Back styling */
.flip-card-back{
  background:#C1D8C0;
  color:#1D3326;
  transform:rotateY(180deg);
  font-size:16px;
  line-height:1.5;
  padding:22px;
}

/* Active (or hover) rotate inner */
.flip-card.active .flip-card-inner,
.flip-card:hover .flip-card-inner{
  transform: rotateY(180deg);
}



/* small visual tweak on focus for accessibility */
.flip-card-front:focus{
  outline: 3px solid rgba(0,150,100,0.25);
  outline-offset:4px;
}