/* Style for the countdown timer */
.simply-countdown {
    font-family: 'Helvetica Neue', Arial, sans-serif; /* Modern, readable font */
    text-align: center; /* Center everything within the countdown */
    padding: 10px; /* Reduced padding for smaller screens */
    background-color: transparent; /* No overall background */
    margin: 20px auto; /* Center the countdown on the page with vertical spacing */
    white-space: nowrap; /* Keeps the countdown in a single line */
    overflow: hidden; /* Prevents overflow of content */
}

/* Styles for each countdown block (days, hours, etc.) */
.simply-countdown > .simply-section {
    display: inline-block; /* Display blocks side by side */
    margin: 0 10px; /* Reduced space between each block for smaller screens */
}

/* Styles for numbers and labels within each block */
.simply-countdown > .simply-section .simply-amount,
.simply-countdown > .simply-section .simply-word {
    display: block; /* Stack numbers and labels vertically */
    color: #333; /* Dark text for contrast */
}

/* Specific style for numbers */
.simply-countdown > .simply-section .simply-amount {
    font-size: 20px; /* Smaller font size for smaller screens */
    font-weight: bold; /* Bold font for numbers */
    position: relative; /* Needed for positioning the underline */
    margin-bottom: 2px; /* Reduced space between the number and its label */
}

/* Specific style for labels */
.simply-countdown > .simply-section .simply-word {
    font-size: 12px; /* Smaller font size for labels on smaller screens */
    background-color: #fff; /* White background for each label */
    padding: 2px 5px; /* Reduced padding inside label backgrounds */
    border-radius: 5px; /* Rounded corners for label backgrounds */
    box-shadow: 0 1px 3px rgba(0,0,0,0.1); /* Subtle shadow for labels */
}

/* Media query for larger screens */
@media (min-width: 768px) {
    .simply-countdown {
        padding: 20px; /* Increased padding for larger screens */
    }
    .simply-countdown > .simply-section {
        margin: 0 15px; /* Increased space between each block */
    }
    .simply-countdown > .simply-section .simply-amount {
        font-size: 36px; /* Larger font size for larger screens */
    }
    .simply-countdown > .simply-section .simply-word {
        font-size: 18px; /* Larger font size for labels */
        padding: 5px 10px; /* Increased padding inside label backgrounds */
    }
}

/* Optional: Additional media query for even larger screens */
@media (min-width: 992px) {
    .simply-countdown > .simply-section .simply-amount {
        font-size: 48px; /* Even larger font size for very large screens */
    }
    .simply-countdown > .simply-section .simply-word {
        font-size: 20px; /* Larger font size for labels */
    }
}