.flip-card {
perspective: 1000px;
height: 420px;
border-radius: 16px;
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
transition: transform 0.7s ease;
transform-style: preserve-3d;
}
.flip-card:hover {
transform: translateY(-6px) scale(1.01);
}
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}
.flip-card-front,
.flip-card-back {
position: absolute;
inset: 0;
padding: 20px;
border-radius: 16px;
backface-visibility: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.flip-card-front {
background: linear-gradient(180deg, #eef2f7, #d6dee9);
box-shadow:
0 10px 25px rgba(0,0,0,0.15),
inset 0 1px 0 rgba(255,255,255,0.6);
color: #000;
}
.flip-card-back {
transform: rotateY(180deg);
background: linear-gradient(180deg, #0f1720, #1c2733);
box-shadow:
inset 0 8px 20px rgba(0,0,0,0.6),
inset 0 -2px 10px rgba(255,255,255,0.05);
color: #fff;
} .flip-card-front h3 {
text-transform: uppercase;
color: #b91c1c;
font-weight: 600;
letter-spacing: 0.3px;
}
.flip-card-back h3 {
text-transform: uppercase;
color: #f1f5f9;
font-weight: 600;
letter-spacing: 0.3px;
text-shadow: 0 0 8px rgba(59,130,246,0.3);
} .card-content {
text-align: center;
}
.card-content ul {
text-align: left;
margin: 15px 0;
list-style: none;
padding-left: 0;
}
.card-content li::before {
content: "✓";
margin-right: 8px;
color: #f4d96b;
}
.card-content img {
height: 180px;
width: auto;
max-width: 100%;
object-fit: contain;
margin: 20px auto;
display: block;
} .card-btn {
display: inline-block;
margin-top: 15px;
padding: 10px 18px;
text-decoration: none;
border-radius: 6px;
background: linear-gradient(135deg, #cfae3c, #f4d96b, #d4af37);
color: #1a1a1a;
font-weight: 600;
transition: all 0.3s ease;
}
.card-btn:hover {
background: linear-gradient(135deg, #e6c65a, #f9e27d, #cfae3c);
color: #000 !important;
transform: translateY(-2px);
}