/* Container for the entire layout */
.cap-countdown-columns {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* Space between columns */
    justify-content: center;
    margin: 20px auto;
}

/* Individual column */
.cap-column {
    flex: 1 1 calc(50% - 20px); /* Two equal columns with a gap */
    max-width: 50%; /* Ensure columns don’t exceed 50% width */
    background-color: #f9f9f9;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    text-align: center;
}

/* Title for each column */
.cap-column h2 {
    text-align: center;
    font-size: 1.5rem;
    margin-bottom: 15px;
    color: #333;
}

/* Style for individual capsule cards */
.capsule-card {
    margin-bottom: 20px;
    padding: 15px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.capsule-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
}

/* Capsule card image styling */
.capsule-card img {
    display: block; /* Makes the image a block element */
    margin: 0 auto; /* Centers the image horizontally */
    width: 100%;
    max-width: 300px;
    height: auto;
    border-radius: 8px;
    margin-bottom: 15px;
}

/* Countdown text */
.capsule-countdown {
    color: red; /* Countdown color */
    font-weight: bold;
    font-size: 1.2rem;
    margin: 10px 0;
}

/* Buttons for capsules */
.cap-unlocked-button,
.cap-view-button {
    background-color: #28a745;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s ease;
}

.cap-unlocked-button:hover,
.cap-view-button:hover {
    background-color: #218838;
}

/* Locked button styling */
.cap-locked-button {
    background-color: #ccc;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: not-allowed;
}

/* Responsive layout for mobile */
@media (max-width: 768px) {
    .cap-countdown-columns {
        flex-direction: column; /* Stack columns on smaller screens */
    }

    .cap-column {
        flex: 1 1 100%; /* Full width for each column */
        max-width: 100%; /* Ensure proper spacing */
    }
}