.countdown-container {
    text-align: center;
    margin: 40px 0;
}

.countdown {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 20px 0;
}

.countdown .box-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.countdown .box {
    background-color: #f0f0f0;
    border: 2px solid #ccc;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    width: 80px;
    font-size: 24px;
    font-weight: bold;
}

.title {
    margin: 0;
    margin-top: 60px;
}

/* Event info */
.date,
.location {
    font-size: 1.5rem;
    font-weight: bold;
    color: #333;
    margin-bottom: 8px;
}

.location {
    color: #e75480;
}

.guest-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.guest-info .guest-name {
    font-size: 2rem;
    font-weight: bold;
    color: #e75480;
    margin-bottom: 0;
}

/* Banner and images */
img[alt="m1yu"] {
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
}

#info,
#countdown,
#ticket,
#ambassador,
#guests {
    opacity: 0;
    transform: translateY(20px);
    transition: all 1s ease-in-out;
}

#info.show,
#countdown.show,
#ticket.show,
#ambassador.show,
#guests.show {
    opacity: 1;
    transform: translateY(0);
}

footer {
    margin-top: 80px;
}

@media (max-width: 764px) {
    .countdown .box {
        width: 40px;
        padding: 15px;
    }
}