@media(max-width:535px) {
        .countdown-container .countdown-item small {
            font-size: 0.6rem;
        }

        .countdown-container .countdown-item span {
            font-size: 2.2rem;
        }

        .countdown-container .countdown-item {
            padding: 12px 12px;
            min-width: auto;
            width: 70px;
        }

        .countdown {
            gap: 6px !important;
        }

        .countdown-container {
            align-items: center !important;
        }
    }

    @media(max-width:375px) {
        .countdown-container .countdown-item small {
            font-size: 0.5rem;
        }

        .countdown-container .countdown-item span {
            font-size: 1.8rem;
        }

        .countdown-container .countdown-item {
            padding: 10px 10px;
            min-width: auto;
            width: auto;
        }

        .countdown {
            gap: 6px !important;
        }

    }

    .countdown-container {
        display: flex;
        flex-direction: column;
        align-items: start;
        text-align: center;
        font-family: 'Helvetica Neue', sans-serif;
        padding-left: 0px;
    }

    .countdown {
        display: flex;
        justify-content: center;
        gap: 5px;
        font-size: 1.5rem;
        font-weight: bold;
        color: #fff;
        backdrop-filter: blur(10px);
        background-color: var(--faculty-color);
        border-radius: 12px;
        padding: 15px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    }

    .countdown-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        background: var(--faculty-color-light);
        border-radius: 10px;
        padding: 15px 20px;
        min-width: 80px;
        width: 100px;
    }

    .countdown-item span {
        font-size: 1.2rem;
        font-weight: bold;
        color: #fff;
    }

    .countdown-item small {
        font-size: 0.9rem;
        text-transform: uppercase;
        color: #fff;
    }

    .event-started,
    .event-ended {
        font-size: 2rem;
        font-weight: bold;
        animation: glow 1s infinite alternate;
        margin-top: 10px;
    }

    .bg-gray-50 .event-started {
        color: #000;
        text-shadow: #fff;
    }

    .event-started {
        color: #fff;
        text-shadow: #fff;
    }

    .event-ended {
        color: #000;
    }

    .event-failed {
        color: red;
        font-size: 15px;
    }