*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:'Poppins',sans-serif;
    background:#ffffff;
    color:#111;
}

.container{
    width:100%;
    max-width:1440px;
    margin:auto;
}

.schedule-section{
    padding:50px 0 70px;
}

.schedule-title{
    font-family:'Anton',sans-serif;
    text-align:center;
    font-size:82px;
    letter-spacing:2px;
    margin-bottom:50px;
    line-height:1;
}

/* DATE TAB */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:Arial, Helvetica, sans-serif;
    background:#ffffff;
}

.schedule-date{
    width:100%;
    display:flex;
    justify-content:center;
    margin-top:100px;
}

.date-tabs{

    width:850px;
    height:56px;

    background:#F3F3F3;

    border-radius:40px;

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

    padding:6px;
    position:relative;
}

/* Background Biru */
.active-bg{

    position:absolute;

    left:6px;
    top:6px;

    width:120px;
    height:44px;

    background:#2369D8;

    border-radius:30px;

    transition:all .35s cubic-bezier(.4,0,.2,1);

    z-index:1;
}

.date-tab{

    width:120px;
    height:44px;

    border:none;
    background:transparent;

    cursor:pointer;

    font-size:24px;
    font-weight:700;

    color:#B9B9B9;

    position:relative;

    z-index:2;

    transition:.3s;
}

.date-tab.active{
    color:#fff;
}

.date-tab:hover{
    color:#fff;
}

/* TABLE HEADER */

.schedule-header{
    display:grid;
    grid-template-columns:
        110px
        2.2fr
        2fr
        170px
        120px
        120px;

    align-items:center;

    color:#b0b0b0;
    font-weight:500;

    padding:0 40px;
    margin-bottom:10px;
}

.schedule-header div{
    text-align:center;
}

.schedule-header div:nth-child(2),
.schedule-header div:nth-child(3){
    text-align:left;
}

/* ROW */

.schedule-row{
    display:grid;

    grid-template-columns:
        110px
        2.2fr
        2fr
        170px
        120px
        120px;

    align-items:center;

    min-height:74px;

    padding:0 40px;

    background:#f3f3f3;
    margin-bottom:2px;

    transition:.3s ease;
}

.schedule-row:nth-child(even){
    background:#ffffff;
}

.schedule-row:hover{
    background:#ececec;
}

.time{
    font-size:20px;
    font-weight:500;
    text-align:center;
}

.match h3{
    font-size:18px;
    font-weight:600;
    margin-bottom:2px;
}

.match p{
    font-size:14px;
    color:#444;
}

.athlete{
    color:#2365d8;
    font-size:16px;
    font-weight:500;
}

.city,
.round{
    text-align:center;
    font-size:16px;
}

.result{
    display:flex;
    justify-content:center;
}

.result a{
    text-decoration:none;

    border:1.5px solid #2c6bd9;

    color:#2c6bd9;

    padding:8px 20px;

    border-radius:30px;

    font-weight:500;

    transition:.3s;
}

.result a:hover{
    background:#2c6bd9;
    color:white;
}

/* RESPONSIVE */

@media(max-width:1200px){

    .schedule-title{
        font-size:70px;
    }

    .schedule-header,
    .schedule-row{
        grid-template-columns:
        90px
        2fr
        1.8fr
        130px
        90px
        100px;
    }
}

@media(max-width:992px){

    .schedule-title{
        font-size:55px;
    }

    .schedule-header{
        display:none;
    }

    .schedule-row{
        display:flex;
        flex-direction:column;
        align-items:flex-start;
        gap:12px;

        padding:20px;
        margin-bottom:15px;
        border-radius:14px;
    }

    .time{
        text-align:left;
        font-size:18px;
    }

    .city,
    .round{
        text-align:left;
    }

    .result{
        justify-content:flex-start;
    }

    .athlete{
        font-size:15px;
    }
}

@media(max-width:768px){

    .schedule-section{
        padding:40px 15px;
    }

    .schedule-title{
        font-size:42px;
        margin-bottom:35px;
    }

    .date-tabs{
        overflow-x:auto;
        padding:8px;
    }

    .date-tab{
        min-width:110px;
        flex:none;
    }

    .match h3{
        font-size:17px;
    }
}

@media(max-width:480px){

    .schedule-title{
        font-size:34px;
    }

    .date-tab{
        min-width:95px;
        font-size:13px;
    }

    .match h3{
        font-size:15px;
    }

    .match p{
        font-size:13px;
    }

    .athlete{
        font-size:14px;
    }
}