/* =========================
   GLOBAL RESPONSIVE
========================= */

@media (max-width: 1100px) {

    .hero-container {
        gap: 45px;
    }

}


/* =========================
   TABLET
========================= */

@media (max-width: 900px) {

    .hero-container {
        grid-template-columns: 1fr;
    }

    .hero-visual {
        justify-content: flex-start;
    }

    .statistics-grid {
        grid-template-columns: 1fr;
    }

}


/* =========================
   MOBILE
========================= */

@media (max-width: 720px) {

    .topbar-inner {
        min-height: 68px;
    }

    .main-nav,
    .live-status {
        display: none;
    }

    .mobile-menu-btn {
        display: flex;
    }


    .hero-section {
        padding-top: 52px;
        padding-bottom: 56px;
    }

    .hero-content h1 {
        font-size: 40px;
    }


    .countdown-container {
        align-items: flex-start;
        flex-direction: column;
    }

    .countdown-box {
        width: 100%;
    }


    .result-card-top {
        align-items: flex-start;
        flex-direction: column;
    }


    .history-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .history-search {
        width: 100%;
    }

}


/* =========================
   SMALL MOBILE
========================= */

@media (max-width: 500px) {

    .hero-container,
    .countdown-container,
    .latest-result-container,
    .statistics-container,
    .history-container,
    .footer-container,
    .topbar-inner {
        width: calc(100% - 28px);
    }


    .hero-content h1 {
        font-size: 36px;
    }

    .hero-content p {
        font-size: 14px;
    }


    .hero-btn {
        width: 100%;
    }


    .hero-card {
        padding: 24px;
    }

    .hero-card-number {
        font-size: 52px;
    }


    .latest-result-card {
        padding: 22px;
    }

    .result-number-area {
        padding: 38px 8px 34px;
    }

    .result-number {
        font-size: 54px;
    }


    .countdown-container {
        padding: 20px;
    }

    .countdown-info h2 {
        font-size: 21px;
    }

    .countdown-item span {
        font-size: 24px;
    }


    .stat-card {
        min-height: 120px;
        padding: 20px;
    }


    .history-table {
        min-width: 650px;
    }


    .footer-links {
        flex-wrap: wrap;
    }

}


/* =========================
   VERY SMALL MOBILE
========================= */

@media (max-width: 360px) {

    .hero-content h1 {
        font-size: 32px;
    }

    .hero-card-number {
        font-size: 46px;
    }

    .result-number {
        font-size: 48px;
    }

    .countdown-item span {
        font-size: 21px;
    }

    .countdown-box {
        gap: 4px;
        padding-left: 7px;
        padding-right: 7px;
    }

}