/* Promo Section Styling */
.promo {
    width: 100%;
    padding: 100px 20px;
    background: linear-gradient(45deg, #52604F, #FACE78); /* Flipped and angled gradient */
    color: #fff;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px; /* Added spacing between elements */
}

/* Promo Content Wrapper */
.promo-content {
    display: flex;
    flex-direction: row; /* Align heading and timer horizontally */
    justify-content: center;
    align-items: center;
    gap: 150px; /* Space between heading and timer */
    width: 100%;
}

/* Promo Heading */
.promo-heading {
    font-family: 'Roboto', sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    margin: 0; /* Remove extra margins */
    text-align: center;
}

/* Promo Countdown Row */
.promo-countdown-row {
    display: flex; /* Align groups horizontally */
    justify-content: center; /* Center the entire countdown row */
    align-items: center; /* Align items properly */
    gap: 8px; /* Reduced space between groups */
}

/* Countdown Group */
.countdown-group {
    display: flex;
    flex-direction: column; /* Stack label and countdown horizontally */
    align-items: center;
    gap: 2px; /* Space between boxes and label */
}

/* Countdown Item Wrapper */
.countdown-items {
    display: flex; /* Align boxes horizontally within the group */
    gap: 2px; /* Minimal space between each box */
    align-items: center;
    justify-content: center;
}

/* Countdown Item */
.countdown-item {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff; /* Box background */
    color: #000; /* Text color inside box */
    padding: 6px 2px; /* Padding for box styling */
    border-radius: 8px; /* Rounded corners for boxes */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
    width: 40px; /* Fixed width for consistency */
    height: 40px; /* Fixed height for consistency */
    text-align: center;
    margin: 0; /* No extra margin around boxes */
}

/* Countdown Value */
.countdown-value {
    font-family: 'Roboto', sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
}

/* Countdown Label */
.countdown-label {
    font-family: 'Roboto', sans-serif;
    font-size: 1rem;
    font-weight: 500;
    color: #fff;
    text-align: center;
    margin-top: 5px; /* Space below the boxes */
}

/* Countdown Separator */
.countdown-separator {
    font-family: 'Roboto', sans-serif;
    font-size: 2rem; /* Keep font size */
    font-weight: 700;
    color: #fff;
    margin: 0 2px; /* Minimal space around the separator */
    display: flex; /* Use flexbox for precise alignment */
    align-items: center; /* Vertically center the colon */
    justify-content: center; /* Center horizontally (precautionary) */
    height: 40px; /* Match the countdown-item height */
    position: relative; /* Enable manual adjustment */
    top: -3px; /* Manually nudge upwards */
}