/* Container que segura a perspectiva 3D */
.card-container {
    background-color: transparent;
    width: 100%;
    height: 350px; /* Ajuste a altura conforme necessário */
    perspective: 1000px; /* Efeito de profundidade */
    cursor: pointer;
}

/* Elemento que realmente gira */
.card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}

/* Classe adicionada via JS para girar o card */
.card-inner.is-flipped {
    transform: rotateY(180deg);
}

/* Estilos para a frente e o verso */
.card-front, .card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; /* Para não mostrar o verso "espelhado" */
    backface-visibility: hidden;
    border-radius: 10px; /* Para manter as bordas arredondadas do seu card original */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 20px;
}

/* A frente do card usa os estilos que você já tem */
.card-front {
   background-color: #fff; /* Supondo que o fundo do seu event-card seja branco */
    border: 1px solid #eee;
}

/* O verso do card */
.card-back {
    background-color: #2c3e50; /* Uma cor de fundo diferente para o verso */
    color: white;
    transform: rotateY(180deg);
    text-align: center;
}

.card-back h5 {
    font-weight: bold;
    margin-bottom: 15px;
}

.card-back .social-links a {
    color: white;
    font-size: 1.2rem;
    margin: 0 10px;
    text-decoration: none;
}

.card-back .social-links a:hover {
    color: #17a2b8; /* Cor de destaque */
}

/* Ajustes no seu CSS original para encaixar na nova estrutura */
.event-card {
    border: none; /* Remove a borda original, já que a colocamos no .card-front */
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.text-justify{
    hyphens: auto; /* Permite a quebra de palavras */
    text-align: left;
}