.timer {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative; /* Position for pseudo-element */
    padding: 20px 40px;
    border-radius: 10px;
    margin: 20px auto;
    width: fit-content;
    box-shadow: 0 4px 10px rgba(37, 36, 36, 0.5);
    z-index: 1; /* Ensure content stays above the background */
}

.timer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.1); /* Semi-transparent background */
    border-radius: 10px;
    z-index: -1; /* Ensure it stays behind the text */
}

.time-unit {
    text-align: center;
    margin: 0 10px;
}

.time-value {
    font-size: 3em;
    color: #ffffff;
    font-weight: bold;
    z-index: 2; /* Explicitly place it above */
}

.time-label {
    font-size: 0.8em;
    color: #999999;
    text-transform: uppercase;
    z-index: 2; /* Explicitly place it above */
}

.time-separator {
    font-size: 2em;
    color: #ffffff;
    margin: 0 5px;
    z-index: 2; /* Explicitly place it above */
}

@media (max-width: 768px) {
    .timer {
        flex-direction: column; /* Change to vertical layout */
        align-items: center;    /* Center items vertically */
        padding: 20px 10px;     /* Adjust padding for smaller screens */
    }

    .time-unit {
        margin: 10px 0; /* Add vertical spacing between units */
    }

    .time-separator {
        display: none; /* Remove separators for a cleaner vertical layout */
    }
}