@font-face {
        font-family: 'Trade Gothic';
        src: url('../font/Trade Gothic LT.ttf') format('truetype');
        font-weight: 400;
      }

      @font-face {
        font-family: 'Trade Gothic';
        src: url('../font/Trade Gothic LT Bold.ttf') format('truetype');
        font-weight: 700;
      }
             * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            font-family: 'Trade Gothic', sans-serif;
            background: #0b0b0b;
            color: #fff;
        }


        /* =========================================
           NAVBAR
        ========================================= */

        .navbar {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 80px;

            display: flex;
            align-items: center;

            z-index: 9999;

            background: rgba(0, 0, 0, 0.25);
            backdrop-filter: blur(8px);

            transition: 0.4s ease;
        }

        .navbar.scrolled {
            background: rgba(10, 10, 10, 0.96);
            box-shadow: 0 5px 25px rgba(0,0,0,0.35);
        }

        .nav-container {
            width: 90%;
            max-width: 1200px;
            margin: auto;

            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .logo img {
            width: 150px;
            height: auto;
            display: block;
        }

        /* =========================================
   NAV MENU
========================================= */

.nav-menu {
    display: flex;
    align-items: center;
    gap: 34px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-menu > li {
    position: relative;
}

.nav-menu > li > a {
    position: relative;

    display: flex;
    align-items: center;
    gap: 7px;

    color: #fff;
    text-decoration: none;

    font-size: 12px;
    font-weight: 500;
    letter-spacing: 1.5px;

    padding: 30px 0;

    transition: all 0.3s ease;
}

.nav-menu > li > a:hover,
.nav-menu > li > a.active {
    color: #d6b36a;
}


/* =========================================
   ACTIVE GOLD LINE
========================================= */

.nav-menu > li > a::after {
    content: "";

    position: absolute;
    left: 0;
    bottom: 20px;

    width: 0;
    height: 1px;

    background: #d6b36a;

    transition: width 0.35s ease;
}

.nav-menu > li > a:hover::after,
.nav-menu > li > a.active::after {
    width: 100%;
}


/* =========================================
   DROPDOWN ARROW
========================================= */

.dropdown-arrow {
    font-size: 8px;

    transition: transform 0.3s ease;
}

.dropdown:hover .dropdown-arrow {
    transform: rotate(180deg);
}


/* =========================================
   COMPETITION DROPDOWN
========================================= */

.dropdown-menu {
    position: absolute;

    top: calc(100% - 8px);
    left: 50%;

    transform: translateX(-50%) translateY(15px);

    width: 230px;

    padding: 10px 0;

    list-style: none;

    background: rgba(10, 10, 10, 0.97);

    border: 1px solid rgba(214, 179, 106, 0.20);

    box-shadow:
        0 20px 50px rgba(0,0,0,0.45),
        0 0 0 1px rgba(255,255,255,0.02);

    backdrop-filter: blur(15px);

    opacity: 0;
    visibility: hidden;

    transition:
        opacity 0.3s ease,
        transform 0.3s ease,
        visibility 0.3s ease;

    z-index: 99999;
}


/* GOLD TOP LINE */

.dropdown-menu::before {
    content: "";

    position: absolute;

    top: 0;
    left: 20px;

    width: 45px;
    height: 1px;

    background: #d6b36a;
}


/* SHOW DROPDOWN */

.dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;

    transform:
        translateX(-50%)
        translateY(0);
}


/* =========================================
   DROPDOWN ITEM
========================================= */

.dropdown-menu li {
    width: 100%;
}

.dropdown-menu li a {
    position: relative;

    display: flex;
    align-items: center;

    width: 100%;

    padding: 13px 22px;

    color: rgba(255,255,255,0.65);

    text-decoration: none;

    font-size: 10px;
    font-weight: 500;

    letter-spacing: 1.5px;

    transition: all 0.3s ease;
}


/* GOLD INDICATOR */

.dropdown-menu li a::before {
    content: "";

    position: absolute;

    left: 12px;

    width: 0;
    height: 1px;

    background: #d6b36a;

    transition: width 0.3s ease;
}


/* HOVER */

.dropdown-menu li a:hover {
    color: #fff;

    background:
        linear-gradient(
            90deg,
            rgba(214,179,106,0.10),
            transparent
        );

    padding-left: 32px;
}

.dropdown-menu li a:hover::before {
    width: 10px;
}


/* ACTIVE SUBMENU */

.dropdown-menu li a.active {
    color: #d6b36a;

    background:
        linear-gradient(
            90deg,
            rgba(214,179,106,0.13),
            transparent
        );
}

.dropdown-menu li a.active::before {
    width: 10px;
}


        /* =========================================
           HERO
        ========================================= */

        .dates-hero {
            position: relative;

            height: 58vh;
            min-height: 450px;

            display: flex;
            align-items: center;
            justify-content: center;

            text-align: center;

            background-image:
                linear-gradient(
                    rgba(0,0,0,0.48),
                    rgba(0,0,0,0.78)
                ),
                url('../images/category/fok_13.jpg');

            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }

        .dates-hero-content {
            position: relative;
            z-index: 2;

            padding: 100px 20px 30px;

            animation: heroFade 1.2s ease forwards;
        }

        .hero-small {
            font-size: 11px;
            letter-spacing: 4px;
            font-weight: 500;

            color: #d6b36a;

            margin-bottom: 18px;
        }

        .hero-title {
            font-family: 'Trade Gothic', sans-serif;
            font-size: clamp(55px, 7vw, 95px);
            font-weight: 700;
            line-height: 0.9;
            margin-bottom: 25px;
        }

        .hero-line {
            width: 75px;
            height: 1px;

            background: #d6b36a;

            margin: 0 auto 20px;
        }

        .hero-subtitle {
            font-size: 13px;
            letter-spacing: 5px;

            color: rgba(255,255,255,0.8);
        }


        /* =========================================
           INTRO
        ========================================= */

        .intro {
            padding: 100px 20px 60px;

            text-align: center;

            background: #0b0b0b;
        }

        .intro-label {
            color: #d6b36a;

            font-size: 11px;
            letter-spacing: 4px;

            margin-bottom: 15px;
        }

        .intro h2 {
            font-family: 'Trade Gothic', sans-serif;

            font-size: clamp(38px, 5vw, 58px);

            font-weight: 500;

            margin-bottom: 20px;
        }

        .intro p {
            max-width: 650px;
            margin: auto;

            color: rgba(255,255,255,0.65);

            font-size: 14px;
            line-height: 1.9;
        }


        /* =========================================
   PREMIUM IMPORTANT DATES
========================================= */

.dates-section {
    position: relative;
    padding: 110px 6% 130px;
    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(214,179,106,.08),
            transparent 40%
        ),
        #f8f6f0;
    color: #292929;
}


/* =========================================
   HEADER
========================================= */

.dates-header {
    max-width: 850px;
    margin: 0 auto 60px;
    text-align: center;
}

.dates-label {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    font-size: 10px;
    letter-spacing: 4px;
    font-weight: 600;

    color: #b18a43;

    margin-bottom: 18px;
}

.dates-label::before,
.dates-label::after {
    content: "";
    width: 35px;
    height: 1px;
    background: #d6b36a;
}

.dates-header h2 {
    font-family: 'Trade Gothic', sans-serif;

    font-size: clamp(45px, 6vw, 72px);
    font-weight: 700;

    line-height: .95;

    letter-spacing: -.5px;

    margin-bottom: 22px;

    color: #242424;
}

.dates-header h2 span {
    color: #c79b4b;
    font-style: italic;
}

.dates-header p {
    max-width: 600px;

    margin: auto;

    font-size: 13px;
    line-height: 1.9;

    color: #777;
}


/* =========================================
   TABLE OUTER
========================================= */

.dates-table-wrapper {
    position: relative;

    max-width: 1100px;
    margin: auto;

    background: #fff;

    border-radius: 4px;

    overflow: hidden;

    border: 1px solid rgba(185,145,72,.22);

    box-shadow:
        0 30px 80px rgba(0,0,0,.09),
        0 5px 20px rgba(0,0,0,.04);
}


/* GOLD TOP ACCENT */

.dates-table-wrapper::before {
    content: "";

    position: absolute;

    top: 0;
    left: 50%;

    transform: translateX(-50%);

    width: 120px;
    height: 2px;

    background: #d6b36a;

    z-index: 5;
}


/* =========================================
   TABLE
========================================= */

.dates-table {
    width: 100%;

    border-collapse: separate;
    border-spacing: 0;
}


/* =========================================
   TABLE HEADER
========================================= */

.dates-table thead {
    background:
        linear-gradient(
            135deg,
            #171717,
            #292929
        );
}

.dates-table th {
    position: relative;

    padding: 22px 28px;

    text-align: center;

    font-size: 15px;

    letter-spacing: 3px;
    font-weight: 600;

    color: rgba(255,255,255,.72);

    border-bottom: 1px solid rgba(214,179,106,.3);
}

.dates-table th:first-child {
    width: 90px;
    text-align: center;
}

.dates-table th:nth-child(2) {
    width: 34%;
}


/* gold line under header */

.dates-table th::after {
    content: "";

    position: absolute;

    bottom: -1px;
    left: 28px;

    width: 25px;
    height: 1px;

    background: #d6b36a;
}


/* =========================================
   ROW
========================================= */

.dates-table tbody tr {
    position: relative;

    background: #fff;

    transition:
        background .35s ease,
        box-shadow .35s ease,
        transform .35s ease;
}

.dates-table tbody tr:not(:last-child) td {
    border-bottom: 1px solid #eeeae2;
}


/* hover */

.dates-table tbody tr:not(.completed):hover {
    background: #fffdf8;

    box-shadow:
        inset 4px 0 0 #d6b36a,
        0 10px 30px rgba(0,0,0,.045);

    transform: translateX(3px);
}


/* =========================================
   TABLE CELLS
========================================= */

.dates-table td {
    padding: 25px 28px;

    font-size: 13px;

    vertical-align: middle;

    color: #444;
}


/* =========================================
   NUMBER
========================================= */

.dates-table td:first-child {
    text-align: center;

    width: 90px;

    border-right: 1px solid #eeeae2;
}

.dates-table td:first-child strong {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;

    border: 1px solid rgba(198,154,73,.45);

    border-radius: 50%;

    color: #b78d43;

    font-size: 11px;
    font-weight: 600;

    transition: .35s ease;
}

.dates-table tbody tr:hover td:first-child strong {
    background: #d6b36a;

    color: #fff;

    border-color: #d6b36a;

    box-shadow:
        0 5px 15px rgba(214,179,106,.25);
}


/* =========================================
   DATE COLUMN
========================================= */

.dates-table td:nth-child(2) {
    position: relative;
}


/* vertical gold accent */

.dates-table td:nth-child(2)::before {
    content: "";

    position: absolute;

    left: 0;
    top: 50%;

    width: 2px;
    height: 30px;

    transform: translateY(-50%);

    background: #d6b36a;

    opacity: .35;
}


/* =========================================
   DATE BADGE
========================================= */

.date-badge {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-width: 180px;

    padding: 9px 17px;

    border-radius: 2px;

    font-size: 13px;

    font-weight: 600;

    letter-spacing: 1.4px;

    color: #4a4a4a;

    background: #f4f1ea;

    border: 1px solid rgba(0,0,0,.05);

    transition: .35s ease;
}


/* individual subtle tones */

.date-badge.pink {
    background: #f9e8ed;
}

.date-badge.blue {
    background: #e7f0f7;
}

.date-badge.green {
    background: #e8f1e9;
}

.date-badge.orange {
    background: #f8ebdc;
}

.date-badge.purple {
    background: #eee9f5;
}

.date-badge.yellow {
    background: #f6f0d9;
}

.date-badge.cyan {
    background: #e4f1ef;
}


/* hover badge */

.dates-table tbody tr:hover .date-badge {
    transform: translateX(4px);

    border-color: rgba(214,179,106,.35);

    box-shadow:
        0 5px 15px rgba(0,0,0,.05);
}


/* =========================================
   EVENT TEXT
========================================= */

.dates-table td:last-child {
    padding-left: 30px;
}

.dates-table td strong {
    display: block;

    font-size: 17px;

    font-weight: 600;

    letter-spacing: .2px;

    color: #303030;

    line-height: 1.5;
}

.dates-table td small {
    display: block;

    margin-top: 7px;

    font-size: 10px;

    letter-spacing: .3px;

    color: #999;

    line-height: 1.6;
}


/* =========================================
   MAIN EVENT
========================================= */

.dates-table tbody tr.main-event-row {
    position: relative;

    background:
        linear-gradient(
            90deg,
            #242424 0%,
            #292929 100%
        );

    color: #fff;

    box-shadow:
        inset 5px 0 0 #d6b36a;
}

.dates-table tbody tr.main-event-row td {
    border-bottom: none;

    padding-top: 30px;
    padding-bottom: 30px;
}

.dates-table tbody tr.main-event-row td:first-child {
    border-right: 1px solid rgba(214,179,106,.2);
}

.dates-table tbody tr.main-event-row td:first-child strong {
    border-color: #d6b36a;

    color: #d6b36a;
}

.dates-table tbody tr.main-event-row td strong {
    color: #fff;

    font-size: 14px;

    letter-spacing: .5px;
}

.dates-table tbody tr.main-event-row td small {
    color: rgba(255,255,255,.5);
}


/* MAIN EVENT BADGE */

.date-badge.gold {
    position: relative;

    background: linear-gradient(
        135deg,
        #d6b36a,
        #b88b3f
    );

    color: #fff;

    border: none;

    box-shadow:
        0 8px 20px rgba(180,137,61,.18);
}

.dates-table tbody tr.main-event-row:hover {
    transform: none;

    background:
        linear-gradient(
            90deg,
            #242424,
            #292929
        );

    box-shadow:
        inset 5px 0 0 #d6b36a,
        0 15px 40px rgba(0,0,0,.15);
}


/* =========================================
   COMPLETED
========================================= */

.dates-table tbody tr.completed {
    opacity: .55;

    background: #f7f7f5;
}

.dates-table tbody tr.completed:hover {
    transform: none;

    box-shadow: none;
}

.dates-table tbody tr.completed td strong {
    color: #888;
}

.dates-table tbody tr.completed .date-badge {
    filter: grayscale(.7);

    opacity: .7;
}

.dates-table tbody tr.completed td:first-child strong {
    border-color: #ccc;

    color: #999;
}

.dates-table tbody tr.completed .completed-badge {
    display: inline-flex;
}


/* =========================================
   COMPLETED BADGE
========================================= */

.completed-badge {
    display: inline-flex;

    align-items: center;
    gap: 6px;

    margin-left: 12px;

    padding: 5px 10px;

    border-radius: 20px;

    background: #ededeb;

    color: #888;

    font-size: 8px;

    font-weight: 600;

    letter-spacing: 1.2px;

    vertical-align: middle;

    border: 1px solid #ddd;
}

.completed-badge i {
    font-size: 8px;
}


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

@media (max-width: 768px) {

    .dates-section {
        padding: 80px 15px 90px;
    }

    .dates-header {
        margin-bottom: 40px;
    }

    .dates-label {
        font-size: 8px;
        letter-spacing: 2.5px;
    }

    .dates-label::before,
    .dates-label::after {
        width: 20px;
    }

    .dates-header h2 {
        font-size: 45px;
    }

    .dates-header p {
        font-size: 11px;
    }


    /* TABLE */

    .dates-table-wrapper {
        border-radius: 3px;

        overflow-x: auto;
    }

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

    .dates-table th {
        padding: 18px 15px;

        font-size: 8px;

        letter-spacing: 2px;
    }

    .dates-table td {
        padding: 20px 15px;
    }

    .dates-table td:first-child {
        width: 65px;
    }

    .dates-table td:first-child strong {
        width: 29px;
        height: 29px;

        font-size: 9px;
    }

    .date-badge {
        min-width: 160px;

        font-size: 8px;

        padding: 8px 10px;
    }

    .dates-table td strong {
        font-size: 11px;
    }

    .dates-table td small {
        font-size: 9px;
    }

    .completed-badge {
        display: flex;

        width: max-content;

        margin: 7px 0 0;

        font-size: 7px;
    }
}


/* =========================================
   MAIN EVENT
========================================= */

.main-event {
    position: relative;

    padding: 90px 20px;

    text-align: center;

    background:
        linear-gradient(
            135deg,
            #fff4d6,
            #ffe5ed,
            #e4f5ff
        );

    color: #292929;
}

.main-event-inner {
    max-width: 800px;
    margin: auto;
}

.event-label {
    font-size: 10px;
    letter-spacing: 3px;
    font-weight: 600;

    color: #d49d35;

    margin-bottom: 15px;
}

.main-event h2 {
    font-family: 'Trade Gothic', sans-serif;

    font-size: clamp(45px, 6vw, 75px);

    font-weight: 600;

    line-height: 1;

    color: #292929;
}

.event-location {
    margin-top: 18px;

    font-size: 13px;

    letter-spacing: 2px;

    color: #666;
}

.event-location i {
    color: #d49d35;
}


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

@media (max-width: 768px) {

    .dates-section {
        padding: 75px 18px 90px;
    }

    .dates-header {
        margin-bottom: 35px;
    }

    .dates-header p {
        font-size: 12px;
    }

    .dates-table-wrapper {
        border-radius: 16px;
    }

    .dates-table th {
        padding: 15px 16px;
        font-size: 8px;
    }

    .dates-table td {
        padding: 16px;
        font-size: 11px;
    }

    .dates-table th:first-child {
        width: 40%;
    }

    .date-badge {
        min-width: auto;
        width: 100%;

        padding: 7px 8px;

        font-size: 8px;
        letter-spacing: .8px;
    }

    .dates-table td strong {
        font-size: 11px;
        line-height: 1.5;
    }

    .dates-table td small {
        font-size: 9px;
        line-height: 1.5;
    }
}

        /* =========================================
           MAIN EVENT
        ========================================= */

        .main-event {
            position: relative;

            padding: 100px 20px;

            text-align: center;

            background-image:
                linear-gradient(
                    rgba(0,0,0,0.45),
                    rgba(0,0,0,0.85)
                ),
                url('../images/category/mixed_2.jpg');

            background-size: cover;
            background-position: center;
        }

        .main-event-inner {
            max-width: 800px;
            margin: auto;
        }

        .event-label {
            font-size: 11px;
            letter-spacing: 4px;

            color: #d6b36a;

            margin-bottom: 18px;
        }

        .main-event h2 {
            font-family: 'Trade Gothic', sans-serif;

            font-size: clamp(45px, 6vw, 75px);

            font-weight: 500;

            line-height: 1;
        }

        .event-location {
            margin-top: 20px;

            font-size: 14px;

            letter-spacing: 2px;

            color: rgba(255,255,255,0.75);
        }

    /* =========================================
   FOOTER
========================================= */

footer {
    background: #080808;
    color: rgba(255,255,255,.75);
    padding: 80px 7% 0;
    border-top: 1px solid rgba(214,179,106,.25);
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: 1.15fr 1fr 1.25fr;
    gap: 70px;
}

/* =========================================
   FOOTER GENERAL
========================================= */

.footer-column h4 {
    font-family: 'Trade Gothic', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 3px;

    color: #d6b36a;

    margin-bottom: 25px;
}

/* =========================================
   FOOTER ABOUT
========================================= */

.footer-logo {
    width: 185px;
    height: auto;
    display: block;

    margin-bottom: 22px;
}

.footer-about p {
    max-width: 330px;

    font-family: 'Trade Gothic', sans-serif;
    font-size: 12px;
    line-height: 1.9;

    color: rgba(255,255,255,.55);
}

/* =========================================
   CONTACT
========================================= */

.contact-item {
    display: flex;
    align-items: flex-start;

    gap: 13px;
    margin-bottom: 16px;
}

.contact-item i {
    width: 18px;
    min-width: 18px;

    margin-top: 3px;

    color: #d6b36a;
    font-size: 13px;

    text-align: center;
}

.contact-item a {
    color: rgba(255,255,255,.65);

    text-decoration: none;

    font-family: 'Trade Gothic', sans-serif;
    font-size: 12px;
    line-height: 1.7;

    transition: .3s ease;
}

.contact-item a:hover {
    color: #d6b36a;
}

/* =========================================
   LOCATION
========================================= */

.footer-location p {
    font-family: 'Trade Gothic', sans-serif;

    font-size: 12px;
    line-height: 1.8;

    color: rgba(255,255,255,.6);

    margin-bottom: 20px;
}

.map-container {
    width: 100%;
    height: 180px;

    overflow: hidden;

    border: 1px solid rgba(214,179,106,.25);

    background: #111;
}

.map-container iframe {
    width: 100%;
    height: 100%;

    display: block;

    border: 0;

    filter: grayscale(100%);
    opacity: .75;

    transition: .4s ease;
}

.map-container:hover iframe {
    filter: grayscale(0%);
    opacity: 1;
}

/* =========================================
   FOOTER BOTTOM
========================================= */

.footer-bottom {
    max-width: 1200px;

    margin: 60px auto 0;

    padding: 22px 0;

    border-top: 1px solid rgba(255,255,255,.09);

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;
}

.footer-bottom p {
    margin: 0;

    font-family: 'Trade Gothic', sans-serif;

    font-size: 10px;
    letter-spacing: 1px;

    color: rgba(255,255,255,.38);
}

.footer-bottom span {
    color: #d6b36a;
}

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

@media (max-width: 768px) {

    footer {
        padding: 60px 25px 0;
    }

    .footer-container {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .footer-logo {
        width: 165px;
    }

    .footer-about p {
        max-width: 100%;
    }

    .map-container {
        height: 220px;
    }

    .footer-bottom {
        margin-top: 45px;

        flex-direction: column;

        text-align: center;

        gap: 8px;
    }

}


        /* =========================================
           ANIMATION
        ========================================= */

        @keyframes heroFade {

            from {
                opacity: 0;
                transform: translateY(25px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }

        }

         /* =========================================
   COMPLETED EVENT
========================================= */

.timeline-item.completed {
    opacity: 0.35;
}

.timeline-item.completed .timeline-date,
.timeline-item.completed .timeline-event {
    text-decoration: line-through;
}

.timeline-item.completed .timeline-dot {
    background: #777;
    box-shadow: none;
}

.timeline-item.completed::after {
    content: "COMPLETED";

    display: inline-block;

    margin-top: 12px;

    font-size: 9px;
    letter-spacing: 2px;

    color: rgba(255,255,255,0.45);
}


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

        @media (max-width: 768px) {

            .navbar {
                height: 70px;
            }

            .nav-menu {
                display: none;
            }

            .logo img {
                width: 95px;
            }

            .dates-hero {
                height: 55vh;
                min-height: 400px;
            }

            .hero-small {
                font-size: 9px;
                letter-spacing: 2.5px;
            }

            .hero-subtitle {
                font-size: 10px;
                letter-spacing: 3px;
            }

            .intro {
                padding: 80px 25px 40px;
            }

            .timeline::before {
                left: 20px;
            }

            .timeline-item,
            .timeline-item:nth-child(even) {
                width: 100%;

                left: 0;

                text-align: left;

                padding:
                    0
                    20px
                    60px
                    55px;
            }

            .timeline-item:nth-child(odd) .timeline-dot,
            .timeline-item:nth-child(even) .timeline-dot {
                left: 14px;
                right: auto;
            }

            .timeline-date {
                font-size: 30px;
            }

            .timeline-event {
                font-size: 15px;
            }  

        }

				/* =========================================================
   MOBILE TABLE — CARD STYLE
========================================================= */
@media (max-width: 768px) {

    .dates-section {
        padding: 70px 15px 80px;
    }

    .dates-header {
        margin-bottom: 35px;
    }

    .dates-header h2 {
        font-size: 42px;
        line-height: .95;
    }

    .dates-header p {
        font-size: 11px;
        line-height: 1.7;
    }

    /* TABLE WRAPPER */
    .dates-table-wrapper {
        width: 100%;
        max-width: 100%;
        overflow: visible;
        background: transparent;
        border: none;
        box-shadow: none;
        border-radius: 0;
    }

    .dates-table-wrapper::before {
        display: none;
    }

    /* TABLE */
    .dates-table {
        width: 100%;
        min-width: 0;
        border-collapse: separate;
        border-spacing: 0 14px;
        table-layout: fixed;
    }

    /* HEADER TIDAK DITAMPILKAN */
    .dates-table thead {
        display: none;
    }

    /* ROW MENJADI CARD */
    .dates-table tbody tr {
        display: grid;
        grid-template-columns: 52px 1fr;
        grid-template-rows: auto auto;
        column-gap: 14px;

        width: 100%;

        background: #fff;

        border: 1px solid rgba(185,145,72,.18);
        border-radius: 8px;

        box-shadow:
            0 12px 30px rgba(0,0,0,.06);

        transform: none !important;
        overflow: hidden;

        padding: 18px 16px;
    }

    .dates-table tbody tr:hover {
        transform: none !important;
        box-shadow:
            0 12px 30px rgba(0,0,0,.08);
    }

    /* SEMUA CELL */
    .dates-table td {
        display: block;

        padding: 0;

        width: auto !important;

        border: none !important;

        text-align: left;
    }

    /* NUMBER */
    .dates-table td:first-child {
        grid-column: 1;
        grid-row: 1 / span 2;

        display: flex;
        align-items: flex-start;
        justify-content: center;

        padding-top: 2px;
    }

    .dates-table td:first-child strong {
        width: 32px;
        height: 32px;

        font-size: 9px;

        border-radius: 50%;
    }

    /* DATE */
    .dates-table td:nth-child(2) {
        grid-column: 2;
        grid-row: 1;

        margin-bottom: 9px;
    }

    .dates-table td:nth-child(2)::before {
        display: none;
    }

    /* DATE BADGE */
    .date-badge {
        display: inline-flex;

        width: auto;
        min-width: 0;
        max-width: 100%;

        padding: 6px 9px;

        font-size: 8px;
        line-height: 1.4;
        letter-spacing: .8px;

        white-space: normal;
        text-align: left;
    }

    /* EVENT */
    .dates-table td:last-child {
        grid-column: 2;
        grid-row: 2;

        padding-left: 0;
    }

    .dates-table td:last-child strong {
        font-size: 12px;
        line-height: 1.45;
        letter-spacing: .1px;
    }

    .dates-table td small {
        margin-top: 5px;

        font-size: 9px;
        line-height: 1.5;
    }

    /* COMPLETED */
    .completed-badge {
        display: flex;

        width: max-content;

        margin: 7px 0 0;

        padding: 4px 8px;

        font-size: 7px;
        letter-spacing: 1px;
    }


    /* =====================================================
       MAIN EVENT CARD
    ===================================================== */

    .dates-table tbody tr.main-event-row {
        display: grid;

        grid-template-columns: 52px 1fr;
        grid-template-rows: auto auto;

        padding: 20px 16px;

        background:
            linear-gradient(
                135deg,
                #242424,
                #2d2d2d
            );

        border: 1px solid rgba(214,179,106,.35);

        box-shadow:
            inset 4px 0 0 #d6b36a,
            0 15px 35px rgba(0,0,0,.16);
    }

    .dates-table tbody tr.main-event-row td:first-child {
        grid-column: 1;
        grid-row: 1 / span 2;

        border-right: none !important;
    }

    .dates-table tbody tr.main-event-row td:nth-child(2) {
        grid-column: 2;
        grid-row: 1;
    }

    .dates-table tbody tr.main-event-row td:last-child {
        grid-column: 2;
        grid-row: 2;
    }

    .dates-table tbody tr.main-event-row td strong {
        font-size: 12px;
        line-height: 1.5;
    }

    .dates-table tbody tr.main-event-row td:first-child strong {
        color: #d6b36a;
        border-color: #d6b36a;
    }

    .dates-table tbody tr.main-event-row td small {
        color: rgba(255,255,255,.5);
    }

    .dates-table tbody tr.main-event-row .date-badge {
        font-size: 8px;
        letter-spacing: .8px;
        padding: 7px 9px;
    }
}