@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');

*,
:after,
::before {
    box-sizing: border-box;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
}

:focus,
:active {
    outline: none !important;
}

:root {
    --color1: #051922;
    --color2: #000000;
    --color3: #ED1B24;
    --color4: #F0A202;
    --color5: #ffffff;
    --color6: #E5E7E9;
    --color7: #D8DBDD;
    --color8: #F6F8F9;
    --dark_red: #A32B2B;
    --dark_yellow: #FFC718;
    --red: #FF0000;
    --yellow: #F0C50E;
    --green: #008E00;
    --blue: #3D70F2;
    --purple: #849DDF;
    --dark_purple: #170E5B;
    --secondary-font: 'Bebas Neue';
    --primary-font: 'Montserrat', sans-serif;
    --h1: normal normal 400 72px/100px var(--primary-font);
    --h2: normal normal 700 32px/46px var(--primary-font);
    --h3: normal normal 700 24px/29px var(--primary-font);
    --h4: normal normal 700 18px/24px var(--primary-font);
    --h5: normal normal 700 16px/24px var(--primary-font);
    --p: normal normal 400 14px/18px var(--primary-font);
}

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
img,
ins,
kbd,
q,
s,
samp,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    font-size: 100%;
    list-style: none;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

html {
    -webkit-text-size-adjust: 100%;
    outline: none;
    scroll-behavior: smooth;
}

body {
    color: var(--color2);
    font-family: var(--primary-font);
    font-weight: 500;
    line-height: 1;
    font-size: 15px;
}

img {
    max-width: 100%;
    display: block;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
select,
textarea {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
}

a,
a:hover,
a:focus,
button,
button:focus {
    text-decoration: none;
    outline: none;
    box-shadow: none;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
}

a {
    text-decoration: none;
    display: inline-block;
    color: var(--color2);
}

::selection {
    background: rgba(127, 131, 51, 0.2);
}

::-moz-selection {
    background: rgba(127, 131, 51, 0.2);
}

.flex {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    box-sizing: border-box;
}

.no-wrap {
    flex-wrap: nowrap;
}

.align-start {
    align-items: flex-start;
}

.align-end {
    align-items: flex-end;
}

.align-center {
    align-items: center;
}

.justify-around {
    justify-content: space-around;
}

.justify-between {
    justify-content: space-between;
}

.justify-center {
    justify-content: center;
}

.justify-end {
    justify-content: flex-end;
}

.direction-column {
    flex-direction: column;
    -ms-flex-direction: column;
}

.row-reverse {
    flex-direction: row-reverse;
    -ms-flex-direction: row-reverse;
}

.flex-shrink {
    flex-shrink: 0;
}

.only_mobile {
    display: none;
}

.only_desktop {
    display: block;
}

.position-relative {
    position: relative;
}

.position-absolute {
    position: absolute;
}

.uppercase {
    text-transform: uppercase;
}

.aspect-ratio {
    padding-bottom: 100%;
    position: relative;
    width: 100%;
}

.aspect-ratio img, .aspect-ratio video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.block {
    display: block;
}

/* ------------- Container  -------------*/
.container {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 0 20px;
}

h1,
.h1 {
    font: var(--h1);
}

h2,
.h2 {
    font: var(--h2);
}

h3,
.h3 {
    font: var(--h3);
}

h4,
.h4 {
    font: var(--h4);
}

h5,
.h5 {
    font: var(--h5);
}

/* ===============================================================
                        START HEADER HERE
=============================================================== */
.header_dropdown .dropdown.dropdown_is_open ul {
    display: block;
}

.dropdown_is_open .active_dropdown svg {
    transform: scale(-1);
    -webkit-transform: scale(-1);
    -moz-transform: scale(-1);
    -ms-transform: scale(-1);
    -o-transform: scale(-1);
}

header.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
}

.header_top {
    background-color: var(--color1);
    padding: 0 56px;
}

.header_logo {
    padding-right: 33px;
    border-right: 1px solid #626F75;
}

.header_logo a h2,
.footer_top_logo a {
    font-size: 28px;
    color: var(--color5);
    font-weight: 700;
}

.header_top_menu ul {
    padding-left: 17px;
}

.header_top_menu ul li {
    padding: 0 6px;
}

.header_top_menu ul li a,
.footer_top_menu ul li a {
    padding: 24px 8px;
    font: var(--h5);
    color: var(--color5);
    font-weight: 600;
    overflow: hidden;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
    display: block;
}

.header_top_menu ul li a:hover,
.header_top_menu ul li a.active {
    background-color: var(--color3);
}

.header_bottom {
    background-color: var(--color6);
    padding-right: 20px;
}

.header_bottom_menu ul {
    padding-left: 91px;
}

.header_bottom_menu ul li {
    padding: 0 12px;
}

.header_bottom_menu ul li a {
    padding: 16px 0;
    position: relative;
    display: block;
    font: var(--p);
    line-height: 24px;
    font-weight: 600;
}

.header_bottom_menu ul li a::before {
    content: '';
    position: absolute;
    left: 50%;
    background-color: var(--color3);
    width: 100%;
    bottom: 0;
    height: 4px;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    border-radius: 2px 2px 0px 0px;
    -webkit-border-radius: 2px 2px 0px 0px;
    -moz-border-radius: 2px 2px 0px 0px;
    -ms-border-radius: 2px 2px 0px 0px;
    -o-border-radius: 2px 2px 0px 0px;
    transition: 0.3s all ease-in-out;
    -webkit-transition: 0.3s all ease-in-out;
    -moz-transition: 0.3s all ease-in-out;
    -ms-transition: 0.3s all ease-in-out;
    -o-transition: 0.3s all ease-in-out;
}

.header_bottom_menu ul li a:hover::before,
.header_bottom_menu ul li a.active::before {
    opacity: 1;
    visibility: visible;
}

.header_dropdown {
    background: var(--color7);
    padding: 15px;
    position: relative;
    display: flex;
    align-items: center;
    max-width: 280px;
    width: 100%;
    justify-content: center;
}

.active_dropdown {
    padding: 0;
    border: none;
    font: var(--h5);
    font-weight: 600;
    background-color: transparent;
    margin: 0;
    color: var(--color1);
}

.active_dropdown p {
    padding-right: 13.66px;
    color: var(--color1);
}

.active_dropdown svg {
    width: 12.73px;
    height: 7.78px;
    flex-shrink: 0;
}

.header_menu_icon button {
    background-color: transparent;
    border: none;
    padding: 10px;
    width: 40px;
}

.header_menu_icon button svg {
    width: 100%;
    height: 100%;
}

.header_dropdown ul {
    position: absolute;
    z-index: 9;
    width: 100%;
    padding: 15px;
    text-align: center;
    left: 0;
    background: var(--color7);
    top: 100%;
    transition: 0.3s all ease-in-out;
    -webkit-transition: 0.3s all ease-in-out;
    -moz-transition: 0.3s all ease-in-out;
    -ms-transition: 0.3s all ease-in-out;
    -o-transition: 0.3s all ease-in-out;
    display: none;
}

.header_dropdown ul a {
    letter-spacing: 0.02em;
    text-transform: uppercase;
    font: var(--h5);
    font-weight: 600;
}

.header_dropdown ul li:not(:last-child) {
    margin-bottom: 10px;
}

/* ------ mobile menu ------- */
.mobile_header {
    position: fixed;
    top: 72px;
    left: 0;
    width: 100%;
    height: calc(100vh - 71px);
    z-index: 9999;
    border-top: 1px solid #626F75;
    transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
    -moz-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    -o-transform: translateX(-100%);
    transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    width: 100vw;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
}

.mobile_header .main_header_mobile {
    width: 100%;
    background: var(--color1);
    height: 100vh;
    overflow-y: auto;
    position: relative;
}

.mobile_header .main_header_mobile > li {
    display: flex;
    width: 100%;
    max-width: 100%;
    transition: 0.3s all ease-in-out;
    -webkit-transition: 0.3s all ease-in-out;
    -moz-transition: 0.3s all ease-in-out;
    -ms-transition: 0.3s all ease-in-out;
    -o-transition: 0.3s all ease-in-out;
}

.main_header_mobile > li > a {
    padding: 12px 10px;
    font: normal normal 600 16px/24px var(--primary-font);
    color: var(--color5);
    text-align: center;
}

.main_header_mobile li a {
    letter-spacing: 0.02em;
    display: block;
    text-transform: uppercase;
    width: 100%;
}

.main_header_mobile > li > a:hover {
    background-color: var(--color3);
}

.sub_menu_mobile {
    background-color: var(--color5);
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    overflow-y: auto;
    width: 0;
    z-index: 999;
    transform: translateX(100%);
    -webkit-transform: translateX(100%);
    -moz-transform: translateX(100%);
    -ms-transform: translateX(100%);
    -o-transform: translateX(100%);
    width: 0;
}

.sub_menu_mobile > li > a {
    padding: 12px 16px;
    border-bottom: 1px solid var(--color6);
}

.sub_menu_mobile > li > a,
.acnav__list > li > a {
    font-size: 16px;
}

.acnav__list > li > a {
    padding: 8px 16px;
    line-height: 20px;
    font-weight: 500;
}

.dropdown_menu_mobile > li > a:focus,
.dropdown_menu_mobile > li > a:hover {
    background-color: var(--color8);
}

.sub_menu_mobile > .has-children > a {
    position: relative;
    font-weight: 700;
}

.sub_menu_mobile > .has-children > a::before {
    content: '';
    position: absolute;
    right: 22px;
    background-image: url(../images/arrow-down.svg);
    background-repeat: no-repeat;
    background-size: 12.73px;
    width: 12.73px;
    height: 7.78px;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
}

/* ----- menu active css ------ */
.mobile_header .main_header_mobile.menu-active > li {
    max-width: 40%;
    width: 100%;
}

.sub_menu_mobile > .has-children {
    border-bottom: 1px solid transparent;
}

.sub_menu_mobile > .has-children.is-open {
    border-bottom-color: var(--color6);
}

.main_header_mobile > .has-children.is-open > a,
.main_header_mobile > .has-children.is-open > a:focus,
.main_header_mobile > .has-children.active
 {
    background: var(--color3);
}

.sub_menu_mobile > li.is-open > a {
    border-bottom-color: transparent;
}

.sub_menu_mobile {
    transition: 0.3s all ease-in-out;
    -webkit-transition: 0.3s all ease-in-out;
    -moz-transition: 0.3s all ease-in-out;
    -ms-transition: 0.3s all ease-in-out;
    -o-transition: 0.3s all ease-in-out;
}

.is-open .sub_menu_mobile {
    transform: translateX(0);
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    width: 60%;
}

.sub_menu_mobile > .is-open > a::before {
    transform: scale(-1);
    -webkit-transform: scale(-1);
    -moz-transform: scale(-1);
    -ms-transform: scale(-1);
    -o-transform: scale(-1);
}

.dropdown_menu_mobile {
    height: 0;
    overflow: hidden;
}

.has-children.is-open > .dropdown_menu_mobile {
    height: auto;
}

.overflow_hidden {
    overflow: hidden;
}

/* ===============================================================
                        END HEADER HERE
=============================================================== */
/* ===============================================================
                        START FOOTER HERE
=============================================================== */
.footer_wrp {
    background-color: var(--color1);
}

.footer_bottom {
    border-bottom: 4px solid var(--color3);
    background-color: #192b33;
}

.footer_bottom_row {
    padding: 31px 0;
}

.footer_top_row {
    padding: 69px 0 71px 0;
}

.footer_social_media ul li:not(:last-child) {
    padding-right: 28px;
}

.footer_rights p {
    font: var(--p);
    color: var(--color5);
    font-weight: 400;
}

.footer_top_menu {
    padding-left: 80px;
}

.footer_top_menu ul li {
    padding: 0 4px;
}

.footer_top_menu ul li a {
    padding: 0px 8px;
}

.footer_top_menu ul li a:hover {
    color: var(--color3);
}

footer.footer {
    margin-top: 100px;
}

.footer_social_media ul li a svg path {
    transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
}

.footer_social_media ul li a:hover svg path {
    fill: var(--color3);
}

/* ===============================================================
                        END FOOTER HERE
=============================================================== */
/* ===============================================================
                    START SCORE PAGE HERE
=============================================================== */
/* ---- START HERE SECTION HERE ---- */
.hero_bg {
    padding-bottom: 26.625%;
    position: relative;
    display: block;
    overflow: hidden;
    opacity:.2;
}

.hero_bg img,
.hero_bg iframe,
.hero_bg video,
.hero_bg svg {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero_section {
    position: relative;
    margin-bottom: 30px;
    overflow: hidden;
}

.hero_dots {
    position: absolute;
}

.dots_top_hero {
    top: 32px;
    right: 32px;
    width: 172px;
    height: 136px;
}

.hero_dots img,
.hero_dots svg {
    width: 100%;
    height: 100%;
}

.dots_bottom_hero {
    bottom: 32px;
    left: 32px;
    width: 312px;
    height: 136px;
}

.hero_details,
.hero_bg_text {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    left: 50%;
}

.hero_bg_text {
    max-width: 1311px;
    width: 100%;
}

.hero_details {
    z-index: 9;
    width: 100%;
}

.hero_bottom_details,
.hero_top_logo {
    text-align: center;
}

.hero_top_logo svg {
    width: 46.67px;
    height: 37.33px;
}
.hero_top_logo img {
    width: 50px;
    height: auto;
    margin:0 auto;
}

.hero_top_logo {
    padding-bottom: 25px;
}

.hero_bottom_details h1 {
    padding-top: 8px;
    font-family: var(--secondary-font);
}

.hero_bottom_details h3 {
    color: var(--color4);
    font-weight: 600;
}

/* ---- END HERO SECTION HERE ---- */
/* ---- START TOURNAMENT SECTION HERE ---- */
.day_tournament {
    padding: 28px 0;
}

.day_tournament h4 {
    font: var(--h4);
}

.day_tournament .tournament_lists {
    padding-top: 16px;
}

li.tournament_list {
    width: 100%;
    padding: 20px 46px;
    border: 1px solid var(--color6);
    border-bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

li.tournament_list:last-child {
    border-bottom: 1px solid var(--color6);
}

li.tournament_list:nth-child(even) {
    background-color: var(--color8);
}

.tournament_name_icon,
.name_tournament,
.tournament_number {
    display: flex;
    align-items: center;
}

.name_tournament {
    max-width: calc(60% - 123.5px);
    width: 100%;
    justify-content: flex-end;
}

.tournament_name_icon {
    max-width: 51%;
    width: 100%;
    justify-content: center;
}

.tournament_overtime,
.tournament_match_recap {
    max-width: 23.95%;
    width: 100%;
    border-left: 1px solid var(--color6);
    padding-left: 40px;
}

.tournament_num {
    margin: 2.5px;
    padding: 8px 15px;
    font-weight: 700;
    color: #fff;
    background-color: var(--color1);
    font: var(--h5);
}

.tournament_num.win {
    color: #0BB20B;
}

.tournament_number {
    margin: 0 13.5px;
}

.name_tournament h4 {
    margin: 0 16px 0 0;
}

.row-reverse h4 {
    margin: 0 0 0 16px;
}

.overtime p,
.match_recap {
    font: var(--h5);
    font-weight: 500;
}

.match_recap {
    color: var(--color1);
}

.match_recap h5 {
    font-weight: 600;
    color: var(--color3);
    margin-right: 10px;
}

.name_tournament img,
.name_tournament svg {
    max-width: 40px;
    width: 100%;
}

.match_recap svg {
    width: 13px;
    flex-shrink: 0;
}

.name_tournament.row-reverse {
    margin-right: 6px;
}

.tournament_num.win.bg_green {
    background: #008E00;
    color: #fff;
}

/* ---- END TOURNAMENT SECTION HERE ---- */
/* ---- START PAGINATION HERE ---- */
.tournament_pagination {
    padding-top: 4px;
}

.tournament_pagination li a {
    padding: 8px 16px;
    border-radius: 90px;
    background: transparent;
    font: var(--h4);
    color: var(--color1);
}

.tournament_pagination li a.pagination_active {
    background-color: var(--color3);
    color: var(--color5);
}

/* ---- END PAGINATION HERE ---- */
/* -------- START COMMON CSS -------- */
.header_top_menu ul li a,
.footer_top_menu ul li a,
.header_bottom_menu ul li a,
.day_tournament h4,
.hero_bottom_details h3,
.hero_bottom_details h1 {
    text-transform: uppercase;
}

.header_top_menu ul li a,
.footer_top_menu ul li a,
.overtime p,
.match_recap,
.tournament_num,
.day_tournament h4,
.hero_bottom_details h3,
.hero_bottom_details h1,
.active_dropdown p,
.header_bottom_menu ul li a {
    letter-spacing: 0.02em;
}

.wrapper.homepage {
    padding-top: 72px;
}

.wrapper.nopaddingtop {
    padding-top: 0;
}

/* -------- END COMMON CSS -------- */
/* ============================================================
                    END SCORE PAGE HERE
=============================================================== */
/* ============================================================
                    START SCHEDULE PAGE HERE
=============================================================== */
.schedule_lists ul li .schedule_list_wrp {
    width: 100%;
}

.schedule_name {
    max-width: 132px;
    width: 100%;
    min-height: 123px;
    flex-direction: column;
}

.left_schedule > h2 {
    max-width: 64px;
    width: 100%;
    margin: 0 16px;
}

li.schedule_list {
    padding: 24px 50px 20px 32px;
    border: 1px solid var(--color6);
    border-bottom: 0;
}

li.schedule_list:last-child {
    border-bottom: 1px solid var(--color6);
}

.left_schedule {
    max-width: 404px;
    width: 100%;
    padding-right: 44px;
}

.right_schedule a {
    padding: 13px 32px;
    font: var(--h5);
    line-height: 32px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    background-color: var(--color3);
    color: var(--color5);
    text-align: center;
}

.right_schedule a:hover {
    background-color: var(--color1);
}

.center_schedule h2 {
    text-transform: uppercase;
    font: var(--h2);
    letter-spacing: 0.02em;
}

.center_schedule h5 {
    color: #8A8A8A;
    font: var(--h5);
    letter-spacing: 0.02em;
    font-weight: 500;
    margin-top: 4px;
}

.center_schedule h5 .gym-name {
    display: block;
}

.center_schedule {
    flex: 1;
    padding: 0 15px 0 56px;
}

.center_schedule::before {
    content: '';
    position: absolute;
    left: 0;
    width: 1px;
    height: 47px;
    background-color: var(--color6);
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
}

.schedule_top {
    margin-bottom: 16px;
}

.schedule_top_arrow {
    max-width: 80px;
    width: 100%;
}

.schedule_top_arrow button {
    appearance: none;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    background-color: var(--color8);
}

.schedule_top_arrow button:first-child {
    margin-right: 16px;
}

.schedule_dropdown_button {
    appearance: none;
    padding: 12px 91px 12px 16px;
    background-color: transparent;
    border: 1px solid var(--color6);
    font: var(--h4);
    position: relative;
    background-image: url(../images/arrow-down.svg);
    background-repeat: no-repeat;
    background-position: right 20px bottom 50%;
}

.schedule_dropdown p {
    font: var(--h4);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.schedule_dropdown_wrp {
    width: 190px;
}

.schedule_name img,
.schedule_name svg {
    width: 72px;
    height: 61.92px;
    object-fit: contain;
    flex-shrink: 0;
}

.schedule_name h5 {
    font: var(--h5);
    letter-spacing: 0.02em;
    margin-top: 14px;
    text-transform: uppercase;
    text-align: center;
    padding: 0 5px;
    word-break: break-all;
}

.schedule_lists ul li.schedule_list:nth-child(even) {
    background-color: var(--color8);
}

section.tournament_sections {
    padding-top: 28px;
}

.hero_bg_text img,
.hero_bg_text svg {
    margin: 0 auto;
}

/* ============================================================
                    END SCHEDULE PAGE HERE
=============================================================== */
/* ============================================================
                    START STANDING PAGE HERE
=============================================================== */
.standing_game_section {
    padding-top: 28px;
}

.standing_lists h4 {
    margin-bottom: 16px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.standing_game_body .standing_list,
.standing_game_body .standing_list_name .standing_list_first {
    display: flex;
    align-items: center;
    justify-content: center;
}

.standing_list_name {
    flex: 1;
}

.standing_list_number {
    max-width: 120px;
    width: 100%;
    margin: 0 4px;
    text-align: center;
}

.standing_list_number:last-child {
    margin-left: 0;
}

.standing_list_name {
    padding-left: 32px;
}

.standing_game_body .standing_list_name .standing_list_first {
    justify-content: flex-start;
}

.standing_game_body .standing_list {
    padding: 20px 0;
}

.standing_game_body .standing_list_body .standing_list_first {
    min-height: 40px;
}

.standing_list_body img,
.standing_list_body svg {
    width: 40px;
    flex-shrink: 0;
    margin-right: 16px;
}

li.standing_list {
    border: 1px solid var(--color6);
    border-bottom: 0;
}

li.standing_list:last-child {
    border-bottom: 1px solid var(--color6);
}

li.standing_list_body:nth-child(odd) {
    background-color: var(--color8);
}

.standing_game_body .standing_list_header {
    padding: 16px 0;
    background-color: var(--color8);
}

.standing_list_number h5 {
    font-weight: 500;
}

.standing_list_first,
.standing_list_header h5,
.standing_list_number h5 {
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.standing_list_header h5,
.standing_list_number h5 {
    color: #8A8A8A;
    font-weight: 600;
}

.standing_lists:not(:first-child) {
    margin-top: 32px;
}

/* ============================================================
                    END STANDING PAGE HERE
=============================================================== */
/* ============================================================
                    START TEAMS PAGE HERE
=============================================================== */
.teams_list {
    padding: 12px;
    max-width: 25%;
    width: 100%;
}

.teams_list .teams_list_wrp {
    max-width: 272px;
    width: 100%;
    padding: 32px 20px;
    border: 1px solid var(--color6);
    height: 100%;
}

.teams_list_wrp .teams_list_img {
    max-width: 160px;
    width: 100%;
    height: 160px;
    margin: 0 auto;
    overflow: hidden;
}

.teams_list_wrp .teams_list_img img,
.teams_list_wrp .teams_list_img svg {
    width: 100%;
    height: 100%;
    object-fit: scale-down;
    mix-blend-mode: darken;
}

.teams_list_details {
    text-align: center;
    margin-top: 20px;
}

.teams_list_details h5 {
    font: 700 18px/24px var(--primary-font);
}

.teams_list_details h6, .teams_list_details h5 {
    text-transform: uppercase;
}

.teams_list_details h6 {
    margin: 17px 0 4px 0;
    font: 700 14px/24px var(--primary-font);
}

.teams_list_details p {
    font: 500 14px/24px var(--primary-font);
}

.teams_lists ul.flex {
    margin: 0 -12px;
}

section.teams_section {
    padding-top: 15px;
}

.teams_list.bg_teams_list .teams_list_wrp {
    background-color: var(--color8);
    height: 100%;
}

.teams_list_details p, .teams_list_details h6, .teams_list_details h5 {
    letter-spacing: 0.02em;
}

/* ============================================================
                   END TEAMS PAGE HERE
=============================================================== */
/* ============================================================
                    START BANNER PAGE HERE
=============================================================== */
.banner-section {
    padding: 40px 0 0px;
}

.banner-section .banner-wrapper {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -12px;
}

.banner-wrapper .banner-card {
    max-width: 25%;
    width: 100%;
    position: relative;
    padding: 0 12px;
    margin: 0 0 60px;
}

.banner-wrapper .banner-card:nth-last-child(-n+4) {
    margin: 0;
}

.banner-wrapper .banner-card:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    max-width: 270px;
    width: calc(100% - 24px);
    height: 5px;
    margin: 0 auto;
    background-color: var(--color1);
    border-radius: 10px;
}

.banner-wrapper .banner-card.blue:before {
    background-color: var(--dark_yellow);
}

.banner-wrapper .banner-card .inner-banner-card {
    padding: 5px 5px 0;
    position: relative;
    z-index: 1;
    max-width: 200px;
    width: 100%;
    margin: 0 auto;
    height: calc(100% - 50px);
    /* box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.04); */
}

/*
.banner-wrapper .banner-card.dark-red .inner-banner-card {
    background-color: var(--dark_red);
}
.banner-wrapper .banner-card.dark-yellow .inner-banner-card {
    background-color: var(--color1);
}
.banner-wrapper .banner-card.yellow .inner-banner-card {
    background-color: var(--yellow);
}
.banner-wrapper .banner-card.green .inner-banner-card {
    background-color: var(--green);
}
.banner-wrapper .banner-card.red .inner-banner-card {
    background-color: var(--red);
}
.banner-wrapper .banner-card.blue .inner-banner-card {
    background-color: var(--blue);
}
.banner-wrapper .banner-card.purple .inner-banner-card {
    background-color: var(--purple);
} */
.banner-wrapper .banner-card-wrapper {
    border: 7px solid var(--color1);
    padding: 13px 0 0;
    border-bottom: 0;
    position: relative;
    z-index: 1;
    flex-direction: column;
    display: flex;
    height: 100%;
}

/*
.banner-wrapper .banner-card.dark-yellow .banner-card-wrapper {
    border-color: #FFC718;
}
.banner-wrapper .banner-card.green .banner-card-wrapper {
    border-color: var(--color5);
}
.banner-wrapper .banner-card.purple .banner-card-wrapper {
    border-color: var(--dark_purple);
}
.banner-wrapper .banner-card.red .banner-card-wrapper {
    border-color: var(--dark_purple);
}
.banner-wrapper .banner-card.blue .banner-card-wrapper {
    border-color: var(--dark_yellow);
} */
.banner-wrapper .banner-card .years {
    color: #FFFFFF;
    text-align: center;
    background-color: var(--color1);
    padding: 8px 0;
    margin: 0 0 15px;
}

.banner-wrapper .banner-card .years h5 {
    font: var(--h5);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

/*
.banner-wrapper .banner-card.dark-yellow .years {
    background-color: #FFC718;
    color: var(--color1);
}
.banner-wrapper .banner-card.green .years {
    background-color: var(--color5);
    color: var(--color1);
}
.banner-wrapper .banner-card.purple .years {
    background-color: var(--dark_purple);
}
.banner-wrapper .banner-card.red .years {
    background-color: var(--dark_purple);
}
.banner-wrapper .banner-card.blue .years {
    background-color: var(--dark_yellow);
    color: var(--color1);
} */
.banner-wrapper .banner-card .banner-icn {
    height: 90px;
    margin: 0 auto 15px;
}

.banner-wrapper .banner-card .banner-icn img {
    height: 100%;
    margin: auto;
    object-fit: scale-down;
}
.banner-wrapper .banner-card .banner-icn img.display-none {
    display: none;
}

.banner-wrapper .banner-card .banner-details {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 0 8px;
}

.banner-wrapper .banner-card .banner-details p {
    font: var(--p);
    line-height: 21px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #FFFFFF;
    text-transform: uppercase;
    text-align: center;
}

.banner-wrapper .banner-card .banner-details p {
    color: #FFFFFF;
}

.banner-wrapper .banner-card .banner-details p a {
    color: #FFFFFF;
    text-decoration: underline;
}

.banner-wrapper .banner-card .bottom-shape {
    clip-path: polygon(50% 0%, 100% 38%, 100% 100%, 0 100%, 0% 38%);
    display: block;
    height: 100px;
    background-color: var(--dark_red);
    transform: rotate(180deg);
    position: relative;
    max-width: 200px;
    width: 100%;
    margin: -50px auto 0;
    z-index: 0;
    overflow: hidden;
}

/*
.banner-wrapper .banner-card.dark-yellow .bottom-shape {
    background-color: var(--color1);
}
.banner-wrapper .banner-card.yellow .bottom-shape {
    background-color: var(--yellow);
}
.banner-wrapper .banner-card.green .bottom-shape {
    background-color: var(--green);
}
.banner-wrapper .banner-card.purple .bottom-shape {
    background-color: var(--purple);
}
.banner-wrapper .banner-card.red .bottom-shape {
    background-color: var(--red);
}
.banner-wrapper .banner-card.blue .bottom-shape {
    background-color: var(--blue);
} */
.banner-wrapper .banner-card .bottom-shape:before {
    content: '';
    clip-path: polygon(50% 0%, 100% 38%, 100% 100%, 0 100%, 0% 38%);
    background-color: var(--dark_red);
    max-width: 176px;
    width: 100%;
    height: 90px;
    position: absolute;
    top: 12px;
    left: 0;
    right: 0;
    z-index: 1;
    margin: 0 auto;
}

/*
.banner-wrapper .banner-card.dark-yellow .bottom-shape:before {
    background-color: var(--color1);
}
.banner-wrapper .banner-card.yellow .bottom-shape:before {
    background-color: var(--yellow);
}
.banner-wrapper .banner-card.green .bottom-shape:before {
    background-color: var(--green);
}
.banner-wrapper .banner-card.purple .bottom-shape:before {
    background-color: var(--purple);
}
.banner-wrapper .banner-card.red .bottom-shape:before {
    background-color: var(--red);
}
.banner-wrapper .banner-card.blue .bottom-shape:before {
    background-color: var(--blue);
} */
.banner-wrapper .banner-card .bottom-shape:after {
    content: '';
    position: absolute;
    top: 5px;
    left: 0;
    right: 0;
    clip-path: polygon(50% 0%, 100% 38%, 100% 100%, 0 100%, 0% 38%);
    background-color: var(--color1);
    height: 96px;
    max-width: 190px;
    width: 100%;
    margin: 0 auto;
}

/*
.banner-wrapper .banner-card.dark-yellow .bottom-shape:after {
    background-color: var(--dark_yellow);
}
.banner-wrapper .banner-card.yellow .bottom-shape:after {
    background-color: var(--color1);
}
.banner-wrapper .banner-card.green .bottom-shape:after {
    background-color: var(--color5);
}
.banner-wrapper .banner-card.purple .bottom-shape:after {
    background-color: var(--dark_purple);
}
.banner-wrapper .banner-card.red .bottom-shape:after {
    background-color: var(--dark_purple);
}
.banner-wrapper .banner-card.blue .bottom-shape:after {
    background-color: var(--dark_yellow);
} */
/* ============================================================
                    END BANNER PAGE HERE
=============================================================== */
/* ============================================================
                    START ROSTER PAGE HERE
=============================================================== */
/* ----- roster section css ------ */
.roster-section {
    padding: 40px 0 0px;
}

.roster-section .roster-wrapper {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -12px;
    position: relative;
}

.roster-wrapper .roster-card {
    max-width: 33.33%;
    width: 100%;
    padding: 0 12px;
    margin: 0 0 24px;
    transition: all ease-in-out .4s;
}

.roster-accordion {
    position: revert;
    height: 100%;
}

.roster-accordion .roster-accordion-title {
    height: auto;
}

.roster-accordion .roster-accordion-title a {
    display: flex;
    align-items: center;
    padding: 19px 24px;
    background-color: var(--color5);
    border: 1px solid var(--color6);
    text-decoration: none;
    position: relative;
    height: 100%;
}

.roster-accordion .roster-accordion-title a:before {
    content: '';
    position: absolute;
    top: calc(100% - 1px);
    left: -1px;
    height: 27px;
    width: calc(100% + 2px);
    background-color: #FFF;
    z-index: 2;
    border: solid var(--color6);
    border-width: 0 1px;
    opacity: 0;
    visibility: hidden;
    transition: all ease-in-out .3s;
}

.roster-accordion .roster-accordion-title a.active:before {
    opacity: 1;
    visibility: visible;
}

.roster-accordion-title .team-icon {
    margin: 0 15px 0 0;
}

.roster-accordion .roster-accordion-title h4 {
    font-size: 18px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--color1);
    flex: 1;
}

.roster-accordion .roster-accordion-title h4,
.roster-content-wrapper ul li h4 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.roster-accordion .roster-accordion-title svg {
    margin: 0 0 0 auto;
    width: 14px;
    height: 8px;
    display: block;
    transition: all ease-in-out .3s;
}

.roster-accordion .roster-accordion-title a.active svg {
    transform: scaleY(-1);
}

.roster-accordion .roster-accordion-content {
    position: absolute;
    top: auto;
    left: 0;
    right: 0;
    width: calc(100% - 24px);
    margin: 0 auto;
    background-color: var(--color5);
    display: none;
    padding: 24px 0 0;
    z-index: 1;
}

.roster-accordion .roster-accordion-content .roster-content-wrapper {
    padding: 24px 24px 8px;
    border: 1px solid var(--color6);
}

.roster-content-wrapper ul {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -8px;
}

.roster-content-wrapper ul li {
    display: flex;
    flex-wrap: wrap;
    max-width: 33.33%;
    width: 100%;
    padding: 0 8px;
    margin: 0 0 16px;
}

.roster-content-wrapper ul li .roster-content {
    background-color: #F6F8F9;
    display: flex;
    align-items: center;
    padding: 16px;
    width: 100%;
}

.roster-content-wrapper ul li h4,
.roster-content-wrapper ul li h5 {
    font: var(--h5);
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.02em;
    color: var(--color1);
    text-transform: capitalize;
}

.roster-content-wrapper ul li h4 {
    /* max-width: 60%; */
    /* width: 100%; */
    flex: 1;
}

.roster-content-wrapper ul li h5 {
    font-weight: 500;
    width: 100%;
    text-align: center;
}

.roster-content-wrapper ul li .rank, .roster-content-wrapper ul li .score {
    max-width: 21%;
}

/* ----- roster section css ------ */
/* ============================================================
                    END ROSTER PAGE HERE
=============================================================== */
/* ============================================================
                    START TEAM-ROSTER PAGE HERE
=============================================================== */
/* ----- team hero section css ------ */
.team_hero_section {
    position: relative;
}

.team_hero-banner {
    position: relative;
    width: 100%;
    padding-bottom: 25.7%;
}

.team_hero-banner img.mob-banner {
    display: none;
}

.team_hero-banner img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.team_hero-img-wrapper .dot-img {
    width: 312px;
    height: 136px;
    position: absolute;
    bottom: 32px;
    left: 32px;
}

.dot-img img {
    height: 100%;
    width: 100%;
}

.team_hero-img-wrapper .dot-img2 {
    display: none;
}

.team_hero_section .hero-details {
    width: 100%;
    position: absolute;
    top: 50%;
    left: 0;
    z-index: 1;
    transform: translate(0px, -50%);
}

.team_hero_section .hero-details-wrapper {
    display: flex;
    align-items: center;
}

.team_hero_section .hero-details-wrapper .team-img {
    background-color: var(--color5);
    border: 1px solid var(--color6);
    border-radius: 50%;
    height: 220px;
    width: 220px;
    padding: 20px;
}

.team_hero_section .hero-details-wrapper .team-img img {
    height: 100%;
    width: 100%;
    object-fit: contain;
    object-position: center;
    border-radius: 50%;
}

.team_hero_section .hero-details-wrapper .team-info {
    flex: 1;
    padding: 0 0 0 40px;
}

.team_hero_section .hero-details-wrapper .team-info h4 {
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #F0A202;
    font-weight: 600;
    line-height: 24px;
    margin: 0 0 10px;
}

.team_hero_section .hero-details-wrapper .team-info h2 {
    letter-spacing: 0.02em;
    text-transform: uppercase;
    font-size: 40px;
    line-height: 48px;
    margin: 0 0 15px;
    color: var(--color1);
}

.team_hero_section .hero-details-wrapper .team-info .address {
    display: flex;
    margin: 0 0 25px;
}

.team_hero_section .hero-details-wrapper .team-info .address svg {
    width: 20px;
    height: 20px;
    margin: 0 15px 0 0px;
}

.team_hero_section .hero-details-wrapper .team-info .address p {
    letter-spacing: 0.02em;
    color: var(--color1);
    font: var(--p);
    font-weight: 500;
    line-height: 24px;
}

.team_hero_section .hero-details-wrapper .team-info .record-title {
    font: var(--p);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--color1);
    line-height: 24px;
    font-weight: 600;
    margin: 0 0 8px;
}

.team_hero_section .hero-details-wrapper .team-info .record-wrapper {
    display: flex;
}

.team_hero_section .hero-details-wrapper .team-info .record-wrapper h5 {
    font: var(--h5);
    font-size: 16px;
    line-height: 24px;
    padding: 8px;
    color: var(--color5);
    background-color: var(--color1);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.team_hero_section .hero-details-wrapper .team-info .record-wrapper h5:not(:last-child) {
    margin: 0 8px 0 0;
}

.team_hero_section .hero-details-image {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    max-width: 35.5%;
    width: 100%;
}

.team_hero_section .hero-details-image img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

/* ----- team hero section css ------ */
/* ----- team tab section css ------ */
.team-tab-section {
    padding: 70px 0 0;
}

.team-tab-wrapper .tab-list {
    margin: 0 0 25px;
}

.team-tab-wrapper .tab-list ul {
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--color6);
}

.team-tab-wrapper .tab-list ul li {
    padding: 0 0 15px;
    font: var(--p);
    font-weight: 600;
    line-height: 24px;
    position: relative;
    cursor: pointer;
}

.team-tab-wrapper .tab-list ul li:not(:last-child) {
    margin: 0 24px 0 0;
}

.team-tab-wrapper .tab-list ul li:after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4px;
    width: 100%;
    background-color: transparent;
    border-radius: 2px 2px 0px 0px;
}

.team-tab-wrapper .tab-list ul li.active:after {
    background-color: #ED1B24;
}

.tab-content-wrapper .table-wrapper ul {
    border: 1px solid var(--color6);
}

.tab-content-wrapper .table-wrapper ul li {
    display: flex;
    padding: 27px 15px;
    background-color: var(--color5);
}

.tab-content-wrapper .table-wrapper ul li.table-head {
    padding: 15px;
}

.tab-content-wrapper .table-wrapper ul li:nth-child(odd) {
    background-color: var(--color8);
}

.tab-content-wrapper .table-wrapper ul li:not(:last-child) {
    border-bottom: 1px solid var(--color6);
}

.tab-content-wrapper .table-wrapper ul li h4,
.tab-content-wrapper .table-wrapper ul li h5 {
    width: 100%;
    letter-spacing: 0.02em;
    text-transform: capitalize;
    color: var(--color1);
    font: var(--h4);
    font-size: 18px;
    line-height: 24px;
    padding: 0 15px;
}

.tab-content-wrapper .table-wrapper ul .table-head h5 {
    color: #8A8A8A;
    font: var(--h5);
    font-size: 16px;
    font-weight: 600;
    width: 100%;
}

.tab-content-wrapper .table-wrapper ul li .player-name {
    max-width: 60%;
}

.tab-content-wrapper .table-wrapper ul li .player-rank, .tab-content-wrapper .table-wrapper ul li .player-num {
    max-width: 20%;
    font-size: 16px;
    font-weight: 500;
}

.team-tab-wrapper .tab-content {
    display: none;
}

.team-tab-wrapper .tab-content.current {
    display: block;
}

/* ----- team tab section css ------ */
.tab-content-wrapper .table-wrapper ul {
    overflow: auto;
}

.tab-content-wrapper .table-wrapper ul li h5 {
    flex-shrink: 0;
}

.tab-content-wrapper .table-wrapper ul li {
    width: 100%;
}

/* ============================================================
                    END TEAM-ROSTER PAGE HERE
=============================================================== */
/* ============================================================
                    START MATCH RECAP POPUP HERE
=============================================================== */
.match-recap-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all ease-in-out .3s;
}

.match-recap-modal.open {
    opacity: 1;
    visibility: visible;
}

.match-recap-modal .overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    height: 100%;
    width: 100%;
}

.match-recap-modal .modal-content {
    max-width: 766px;
    width: 100%;
    max-height: 624px;
    height: auto;
    margin: auto;
    background-color: var(--color5);
    border-radius: 2px;
    position: relative;
    z-index: 1;
    padding: 25px 12px 25px 25px;
    overflow: hidden;
}

.match-recap-modal .modal-content .modal-head {
    margin: 0 0 17px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 15px 0 0;
}

.match-recap-modal .modal-close-icn {
    width: 24px;
    height: 24px;
    background-color: var(--color8);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all ease-in-out .1s;
}

.match-recap-modal .modal-close-icn:hover {
    background-color: var(--color1);
}

.match-recap-modal .modal-close-icn:hover svg,
.match-recap-modal .modal-close-icn:hover svg path {
    fill: var(--color5);
}

.match-recap-hero {
    padding: 20px 20px 15px 20px;
    background-color: var(--color8);
    border: 1px solid var(--color6);
    margin: 0 0 15px;
}

.match-recap-hero .top-content {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 20px;
}

.match-recap-modal .modal-content .modal-body {
    max-height: calc(624px - 80px);
    padding: 0 7px 0 0;
    overflow: auto;
}

.match-recap-modal .modal-content .modal-body::-webkit-scrollbar {
    width: 6px;
    border-radius: 10px;
}

.match-recap-modal .modal-content .modal-body::-webkit-scrollbar-thumb {
    background-color: #F1F1F1;
    border-radius: 10px;
}

.match-recap-hero .top-content .name-icn {
    display: flex;
    align-items: center;
    max-width: calc((100% - 130px) / 2);
    width: 40%;
}

.match-recap-hero .top-content .name-icn.left-content {
    justify-content: flex-end;
}

.match-recap-hero .top-content .name-icn h4 {
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--color1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

.match-recap-hero .top-content .name-icn.left-content h4 {
    text-align: right;
}

.team-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
}

.team-icon img {
    width: 100%;
    height: 100%;
    object-fit: scale-down;
}

.match-recap-hero .top-content .left-content .team-icon {
    margin: 0 0 0 15px;
}

.match-recap-hero .top-content .right-content .team-icon {
    margin: 0 15px 0 0;
}

.match-recap-hero .top-content .win-loss {
    display: flex;
    align-items: center;
    margin: 0 15px;
    max-width: 100px;
    width: 20%;
    justify-content: center;
}

.match-recap-hero .top-content .win-loss h5 {
    width: 46px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color1);
    margin: 0 2px;
    font: var(--h5);
    color: var(--color5);
    text-transform: uppercase;
    padding: 8px 13px;
}

.match-recap-hero .top-content .win-loss h5.win {
    color: var(--green);
}

.match-recap-hero .bottom-content {
    text-align: center;
}

.match-recap-hero .bottom-content h5 {
    font: var(--h5);
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--color1);
}

.match-recap-reviews ul li {
    margin: 0 0 15px;
}

.match-recap-reviews .recap-review {
    padding: 20px;
    background-color: var(--color5);
    border: 1px solid var(--color6);
}

.match-recap-reviews .recap-review .review-title-time {
    margin: 0 0 15px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
}

.match-recap-reviews .review-title-time h4 {
    font-size: 18px;
    line-height: 24px;
    letter-spacing: 0.02em;
    text-transform: capitalize;
    color: var(--color1);
}

.match-recap-reviews .review-title-time .date-time {
    display: flex;
    align-items: center;
}

.match-recap-reviews .review-title-time .date-time span {
    font: var(--h5);
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.02em;
    color: var(--color1);
    font-weight: 500;
    position: relative;
}

.match-recap-reviews .review-title-time .date-time span:not(:last-child) {
    padding: 0 20px 0 0;
}

.match-recap-reviews .review-title-time .date-time span:not(:last-child):after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 7px;
    margin: auto 0;
    width: 6px;
    height: 6px;
    background: var(--color6);
    border-radius: 50%;
}

.match-recap-reviews .recap-review .review-details p {
    font: var(--h5);
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: #8A8A8A;
}

/* ============================================================
                    END MATCH RECAP POPUP HERE
=============================================================== */
.hero_bottom_details {
    padding: 0 20px;
}

/****** Start Home hero section HERE ******/
.main-hero-section {
    background-image: url("../images/main-hero-section-bg-image.png");
    background-size: cover;
    background-repeat: no-repeat;
    color: var(--color1);
}

.main-hero-box .main-hero-left {
    max-width: 657px;
    flex: 1;
    padding: 210px 0 210px 140px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.main-hero-box .main-hero-right {
    flex: 1;
    margin-left: -60px;
}

.main-hero-heading :is(h1, h4) {
    text-transform: uppercase;
}

.main-hero-heading h4 {
    color: var(--color3);
    font: 800 28px/34.13px var(--primary-font);
    margin-bottom: 17px;
}

.main-hero-heading h1 {
    font: 400 4.96vw/86.4px var(--secondary-font);
    letter-spacing: 0.02em;
}

.main-hero-heading {
    margin-bottom: 40px;
}

.main-hero-right-inner {
    padding-bottom: 65%;
    height: 100%;
}

/****** End Home hero section HERE ******/
/****** Start Our divison section HERE ******/
.our-division-section {
    padding: 80px 0;
}

.our-division-inner {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.our-division-item .our-division-item-title {
    background-color: var(--color3);
    color: var(--color5);
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.our-division-item-title h2 {
    line-height: 48px;
    letter-spacing: 0.02em;
    text-align: center;
    text-transform: uppercase;
    max-width: 181px;
    margin: 0 auto;
}

.our-division-item-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    padding: 67px 20px;
    border: 1px solid var(--color6);
    text-align: center;
    overflow: hidden;
    cursor: pointer;
}

.our-division-item-inner:before {
    content: "";
    width: 120px;
    height: 8px;
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    margin: 0 auto;
    background-color: var(--color3);
    z-index: 1;
}

.our-division-first .our-division-first-icon {
    max-width: 72px;
    padding-bottom: 72px;
    margin: 0 auto;
}

.our-division-first .our-division-first-content {
    padding-top: 34px;
}

.our-division-first .our-division-first-content h2 {
    font: normal normal 400 40px/48px var(--secondary-font);
    letter-spacing: 0.02em;
}

.our-division-sec {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    padding: 36px 11px 28px;
    background-color: var(--color8);
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: translateY(100%);
    transition: all 0.3s ease;
}

.our-division-item-inner:hover .our-division-sec {
    opacity: 1;
    transform: none;
}

.our-division-sec-heading h3 {
    font: normal normal 400 28px/33.6px var(--secondary-font);
    letter-spacing: 0.02em;
    margin-bottom: 25px;
}

.our-division-sec-btn-gr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    flex: 1;
    gap: 12px 13px;
    overflow: auto;
}

.our-division-sec-btn-gr::-webkit-scrollbar {
    display: none;
}

.our-division-sec-btn {
    background-color: #DFE3E4;
    color: var(--color1);
    font: normal normal 700 12px/16px var(--primary-font);
    letter-spacing: 0.02em;
    padding: 8px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
}

/****** End Our divison section HERE ******/
/****** Start Latest score section HERE ******/
.latest-score-section {
    padding: 80px 0 40px;
    background-image: url("../images/latest-score-section-bg-img.png");
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
}

.latest-score-inner {
    position: relative;
    color: var(--color1);
    letter-spacing: 0.02em;
}

.latest-score-shape .latest-score-shape {
    position: absolute;
    background-image: url(../images/latest-score-shape.png);
    background-repeat: repeat;
    background-size: cover;
}

.latest-score-shape .latest-score-shape-1 {
    width: 312px;
    height: 136px;
    left: 32px;
    top: 50%;
    transform: translateY(-50%);
}

.latest-score-shape .latest-score-shape-2 {
    width: 172px;
    height: 136px;
    top: 32px;
    right: 32px;
}

.latest-score-slider {
    margin-left: -12px;
    padding-right: 9.2%;
}

.latest-score-slider-inner {
    margin-left: calc((100% - 1180px) / 2);
    padding-left: 20px;
}

.latest-score-slider .swiper-slide {
    height: auto;
}

.latest-score-slider-items {
    padding: 40px 24px 40px 0;
    height: 100%;
}

.latest-score-slider-items-inner {
    box-shadow: 0px 4px 60px 0px #00000014;
    background-color: var(--color5);
    padding: 24px 40px;
    text-align: center;
    height: 100%;
    background-image: url("../images/h-icon.svg");
    background-size: 34%;
    background-repeat: no-repeat;
    background-position: center;
    background-color: rgba(255, 255, 255, 0.8);
    background-blend-mode: lighten;
}

.latest-score-slider-items-heading {
    background-color: var(--color8);
    padding: 8px 12px;
    width: fit-content;
    margin: 0 auto 4px;
}

.latest-score-slider-items-heading h5 {
    text-transform: uppercase;
    color: var(--color1);
}

.latest-slider-items-team-main {
    max-width: 472px;
    gap: 10px;
    margin: 0 auto 16px;
}

.latest-slider-items-team-main .latest-slider-items-team {
    padding: 9px 10px;
    flex: 0 0 132px;
}

.latest-slider-items-team a {
    display: block;
    width: 100%;
    height: 100%;
    color: var(--color1);
}

.latest-slider-items-team .latest-slider-items-team-img {
    max-width: 72px;
    padding-bottom: 72px;
    margin: 0 auto;
}

.latest-slider-items-team .latest-slider-items-team-name {
    padding-top: 20px;
}

.latest-slider-items-team .latest-slider-items-team-name h4, .latest-score-box h4 {
    text-transform: uppercase;
}

.latest-slider-items-score {
    gap: 8px;
}

.latest-score-box {
    color: var(--color5);
    background-color: var(--color1);
    padding: 12px 18px;
}

.latest-score-box.winner {
    background-color: #0BB20B;
}

.latest-slider-items-bottom h4 {
    line-height: 27px;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.latest-slider-items-bottom p {
    color: #8A8A8A;
    font: var(--p);
    line-height: 24px;
    font-weight: 500;
    margin-bottom: 8px;
}

.latest-score-heading-inner {
    gap: 10px;
}

.latest-score-heading-left {
    display: flex;
}

.latest-score-heading-left h3 {
    font: normal normal 700 28px/34.13px var(--primary-font);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.latest-score-box.latest-score-box-l, .latest-score-box.latest-score-box-w {
    background-color: var(--color1);
}

.latest-score-box.latest-score-box-l {
    color: var(--color5);
}

.latest-score-box.latest-score-box-w {
    color: #0BB20B;
}


.champions-slider-section .latest-score-heading-inner {
    margin-bottom: 40px;
}

.slider-ct-button-gr {
    gap: 16px;
}

.slider-ct-button-gr .slider-btn {
    background-color: var(--color6);
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
    border: none;
    transition: all 0.3s ease;
}

.slider-ct-button-gr .slider-btn:hover {
    background-color: var(--color3);
}

.slider-ct-button-gr .slider-btn :is(img, svg) {
    width: 11px;
    height: 18px;
    transition: all 0.3s ease;
}

.slider-ct-button-gr .slider-btn:hover :is(img, svg) {
    filter: brightness(0) invert(1);
}

.slider-ct-button-gr .slider-btn.slider-btn-next {
    transform: scaleX(-1);
}

/****** End Latest score section HERE ******/
/****** Start Upcoming game section HERE ******/
.upcoming-game-section {
    margin: 80px 0;
}

.upcoming-game-inner .latest-score-heading-inner {
    margin-bottom: 40px;
}

.upcoming-game-slider .swiper-slide {
    height: auto;
}

.upcoming-game-slider-items {
    text-align: center;
    padding: 40px;
    background-repeat: no-repeat;
    background-position: center;
    background-color: rgba(255, 255, 255, 0.8);
    background-blend-mode: lighten;
    background-size: 150px;
}

.upcoming-game-slider-items .latest-score-slider-items-heading {
    background-color: #0519221A;
    margin-bottom: 40px;
}

.upcoming-game-slider-items .latest-slider-items-score h3 {
    font: normal normal 700 40px/48.76px var(--primary-font);
}

.upcoming-game-slider-items .latest-slider-items-team-main {
    margin-bottom: 40px;
}

.upcoming-game-slider-items .latest-slider-items-bottom h3 {
    line-height: 36px;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.upcoming-game-slider-items .right_schedule a {
    padding: 7px 22px;
    font: var(--p);
    line-height: 32px;
    font-weight: 600;
    margin-top: 10px;
}

.upcoming-game-slider-items .latest-slider-items-team .latest-slider-items-team-img {
    max-width: 100px;
    padding-bottom: 100px;
}

/****** End Upcoming game section HERE ******/
/****** Start Gallery section HERE ******/
.gallery-section {
    margin: 80px 0;
}

.gallery-section .latest-score-heading-inner {
    margin-bottom: 40px;
}

.gallery-section-row {
    display: grid;
    gap: 24px;
}

.gallery-section-row .aspect-ratio {
    height: 100%;
}

.gallery-section-row.gallery-section-row-first {
    margin-bottom: 24px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.gallery-section-row-first .gallery-section-full {
    grid-column: span 2 / span 2;
}

.gallery-section-row-first .aspect-ratio {
    padding-bottom: 320px;
}

.gallery-section-row.gallery-section-row-sec {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.gallery-section-row-sec .gallery-section-full {
    grid-column: span 3 / span 3;
}

.gallery-section-row-sec .aspect-ratio {
    padding-bottom: 173px;
}

/****** End Gallery section HERE ******/
/****** Start New schedule hero HERE ******/
.new-schedule-hero .hero_bg_text {
    max-width: 100%;
}

.new-schedule-hero .hero_bg_text img, .new-schedule-hero .hero_bg_text svg {
    width: 100%;
}

/****** End New schedule hero HERE ******/
/****** Start Winner new schedule HERE ******/
.main-playoff-section {
    margin: 72px 0;
    color: var(--color1);
}

.main-playoff-winner {
    gap: 24px;
    margin-bottom: 40px;
}

.main-playoff-winner .main-playoff-winner-left {
    width: calc(41.4% - 12px);
    padding: 18px;
    border: 1px solid var(--color6);
}

.main-playoff-winner .main-playoff-winner-right {
    width: calc(58.6% - 12px);
}

.main-playoff-winner-left-inner {
    max-width: 272px;
    margin: 0 auto;
    text-align: center;
}

.main-playoff-winner-left-inner .banner-card {
    max-width: 100% !important;
}

.main-playoff-winner-left-inner .banner-card .inner-banner-card {
    background-color: var(--dark_red);
}

.main-playoff-winner-left-inner h4 {
    margin-bottom: 16px;
}

.main-playoff-winner-left-inner .banner-wrapper .banner-card-wrapper {
    padding: 13px 0 21px;
}

.main-playoff-winner-left-inner .banner-wrapper .banner-card .years {
    margin: 0 0 16px;
}

.main-playoff-winner-left-inner .banner-wrapper .banner-card .banner-icn {
    margin: 0 auto 37px;
}

.main-playoff-winner-right .aspect-ratio {
    padding-bottom: 56.4%;
    height: 100%;
}

/****** End Winner new schedule HERE ******/
/****** Start Champions slider HERE ******/
.champions-slider-section {
    margin: 60px 0;
}

.champions-slider-inner .swiper-slide {
    height: auto;
}

.champions-slider-inner .banner-card {
    max-width: 100% !important;
    padding: 0;
    height: 100%;
}

/****** End Champions slider HERE ******/
/****** Start Playoff accordion HERE ******/
.playoff-accordion {
    border: 1px solid var(--color6);
    letter-spacing: 0.02em;
}

.playoff-accordion:not(:last-child) {
    margin-bottom: 24px;
}

.playoff-accordion-header {
    padding: 28px 24px;
    cursor: pointer;
}

.playoff-accordion-header.disable {
    cursor: auto;
}

.playoff-accordion-header h4 {
    flex: 1;
    text-transform: uppercase;
}

.playoff-accordion-header span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    transition: all 0.3s ease;
}

.playoff-accordion-header.active span {
    transform: rotate(180deg);
}

.playoff-accordion-header span :is(img, svg) {
    width: 100%;
    height: 100%;
}

.playoff-accordion .playoff-accordion-body {
    border-top: 1px solid var(--color6);
    padding: 24px 0;
}

.playoff-accordion .playoff-matchups-text {
    padding: 24px;
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
}



.play_basket_main {
    display: flex;
    flex-wrap: wrap;
}

.participant_inn {
    display: flex;
    padding: 8px 2px;
    align-items: center;
    flex: 1;
    justify-content: flex-start /* Options:
                                  flex-start (default)
                                  flex-end
                                  center
                                  space-between
                                  space-around
                                  space-evenly */
}

.play_basket_col {
    width: 14.285%;
    max-width: 162px;
}

.participant {
    display: flex;
    align-items: center;
    border: 1px solid var(--color1);
    max-width: 138px;
}

.participant_number span {
    height: 40px;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color1);
    font-size: 12px;
    color: var(--color5);
}

.participant_number.green span {
    color: #0BB20B;
}

.participant_text span {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.24px;
    display: inline-block;
    padding: 0 0 0 8px;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 53px;
}
.participant_text.makelonger0 span{
    width: 100%;
    max-width: 68px;
}
.participant_text.makelonger1 span{
    width: 100px;
}

.participant_text.teamlength-m.makelonger1 span {
    font-size: 12px;
}
.participant_text.teamlength-ml.makelonger1 span {
    font-size: 11px;
}
.participant_text.teamlength-l.makelonger1 span {
    font-size: 10px;
}
.participant_text.teamlength-m.has-score.makelonger0 span {
    font-size: 10px;
}
.participant_text.teamlength-ml.has-score.makelonger0 span {
    font-size: 9px;
}
.participant_text.teamlength-l.has-score.makelonger0 span {
    font-size: 7px;
}



.participant_img {
    height: 24px;
    width: 24px;
    display: block;
}

.participant_img img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.participant_img img.display-none {
    display: none;
}


.border-right {
    border-right: 1px solid var(--color1);
}

.border-left {
    border-left: 1px solid var(--color1);
}

.box-128 {
    height: 128px;
}

.height-48 {
    height: 48px;
}

.box-44 {
    height: 44px;
}

.box-135 {
    height: 135px;
}

.box-118 {
    height: 118px;
}

.winner-box {
    max-width: 104px;
    margin: 0 auto;
    height: 126px;
}

.box-308 {
    height: 308px;
}

.padding-left-24 {
    padding-left: 24px;
}

.padding-right-24 {
    padding-right: 24px;
}

.quarter_finals .participant,
.semi_finals .participant,
.final_finals .final_box {
    position: relative;
}

.quarter_finals .participant::before,
.semi_finals .participant::before,
.final_finals .final_box::before,
.final_finals .final_box::after {
    position: absolute;
    content: "";
    background: var(--color1);
    height: 1px;
    width: 24px;
    left: -24px;
    top: 50%;
    transform: translateY(-50%);
}

.final_finals + .semi_finals .participant::before,
.final_finals + .semi_finals + .quarter_finals .participant::before,
.final_finals + .semi_finals + .quarter_finals + .first_round .participant::before {
    left: auto;
    right: -24px;
}

.final_finals .final_box::after {
    left: auto;
    right: -24px;
}

.box-136 {
    height: 136px;
}

.margin-left-1 {
    margin-left: -1px;
}

.final_finals h4 {
    color: var(--color1);
    font-size: 16px;
    text-transform: uppercase;
    text-align: center;
    line-height: 24px;
    margin: 3px 0 12px;
}

.play_basket_col.final_finals {
    max-width: 186px;
    width: 17%;
}

.final_box .participant_main:not(:last-child) {
    margin-bottom: 4px;
}

.final_box .participant_main {
    padding: 0;
}

.final_box .participant {
    border: 0;
    margin: 0 auto;
}

.final_box {
    padding: 4px;
    border: 1px solid var(--color2);
    width: fit-content;
    margin: 0 auto;
}

.winner-box .banner-card {
    max-width: 100% !important;
    height: 100%;
    padding: 0 !important;
}

.winner-box .banner-card::before {
    width: 100%;
    height: 2px;
}

.winner-box .banner-card .inner-banner-card {
    padding: 2px 10px 0;
}

.winner-box .banner-card-wrapper {
    border: 5px solid var(--color1);
    border-bottom: 0;
    padding: 16px 0 0;
}

.winner-box .banner-card .banner-icn {
    height: 48px;
    margin: 0 auto 8px;
}

.winner-box .banner-card .banner-details p {
    color: var(--color1);
    font: normal normal 700 12px/14.63px var(--primary-font);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 32px;
    text-align: center;
}

.winner-box .banner-card .bottom-shape {
    max-width: calc(100% - 20px) !important;
    width: 100%;
    background-color: var(--color5);
    margin: -60px auto 0;
}

.winner-box .banner-card .bottom-shape:before {
    background-color: var(--color5);
    clip-path: polygon(50% 0%, 100% 40%, 100% 100%, 0 100%, 0% 40%);
    top: 18px;
    height: 70px;
}

.winner-box .banner-card .bottom-shape::after {
    top: 12px;
    height: 74px;
}

.playoff-heading-list {    
    padding: 4px 0 24px;
    text-decoration: underline;
}

.playoff-heading-list ul {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.playoff-heading-list ul li {
    width: calc(14.285% - 12px);
    text-align: center;
}

.playoff-heading-list ul li p {
    font-weight: 600;
    text-transform: uppercase;
}

.playoff-main-desk {
    overflow: auto;
}



.playoff-main-desk .playoff-main-desk-inner {
    width: 1158px;
}

/****** End Playoff accordion HERE ******/
/****** Start Archive section HERE ******/
.archive-main-section {
    margin: 72px 0;
}

.archive-main-inner .schedule_top {
    margin-bottom: 24px;
}

.archive-main-inner .team-tab-wrapper .tab-list {
    margin: 0 0 32px;
    overflow: auto;
}

.tab-content-heading h3 {
    line-height: 24px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    margin-bottom: 32px;
}

/****** End Archive section HERE ******/
/****** Start League latest scores section HERE ******/
.league-latest-section {
    margin: 72px 0 60px;
    color: var(--color1);
}

.league-latest-inner {
    width: 100%;
    gap: 24px;
}

.league-latest-items {
    border: 1px solid var(--color6);
    width: 100%;
}

.league-latest-inner .league-latest-next {
    width: calc(43% - 16px);
}

.league-latest-inner .league-latest-scores {
    width: calc(32% - 16px);
}

.league-latest-inner .league-latest-banner {
    width: calc(25% - 16px);
}

.league-latest-scores-inner {
    height: 100%;
}

.league-latest-scores-heading {
    padding: 32px 20px 20px;
    text-align: center;
    border-bottom: 1px solid var(--color6);
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    max-height:100px;
}

.league-latest-scores-box {
    padding: 20px;
    text-align: center;
}

.league-latest-scores-box:nth-child(even) {
    background-color: var(--color8);
}

.league-latest-scores-box:not(:last-child) {
    border-bottom: 1px solid var(--color6);
}

.league-latest-team-main {
    margin-bottom: 20px;
}

.league-latest-team-main .league-latest-team {
    flex: 1;
    gap: 12px;
}

.league-latest-team-main .league-latest-team p {
    font: normal normal 700 12px/24px var(--primary-font);
    letter-spacing: 0.02em;
    text-align: right;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.league-latest-team-main .league-latest-team .league-latest-team-right p {
    text-align: left;
}

.league-latest-team-main .league-latest-team .aspect-ratio {
    max-width: 32px;
    padding-bottom: 32px;
}

.league-latest-team-score {
    margin: 0 16px;
}

.league-latest-team-score .latest-score-box {
    padding: 4px 10px;
}

.league-latest-team-score .latest-score-box h4 {
    font: var(--h5);
}

.league-latest-time h5 {
    font-weight: 500;
}

.league-latest-time h5:not(:last-child) {
    margin-bottom: 8px;
}

.view-result-btn {
    font: var(--h5);
    font-weight: 600;
    gap: 8px;
    color: var(--color3);
    text-transform: capitalize;
}

.view-result-btn span {
    display: flex;
}

.league-latest-scores-inner .league-latest-scores-box-result {
    border-top: 1px solid var(--color6);
    padding: 24px;
    width: 100%;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.league-latest-next-inner {
    height: 100%;
    padding: 24px;
}

.league-latest-next-heading {
    padding: 8px 0 24px;
    gap: 10px;
}

.league-latest-next-box {
    border: 1px solid var(--color6);
    padding: 18px;
    text-align: center;
}
.league-latest-next-box:nth-child(odd) {
    background-color: var(--color8);
}

.league-latest-next-box:not(:last-child) {
    margin-bottom: 25px;
}


.league-latest-next-box .latest-slider-items-team-img {
    max-width: 48px;
    padding-bottom: 48px;
}

.league-latest-next-box .latest-slider-items-team-name {
    padding-top: 10px;
}



.league-latest-next-box .latest-slider-items-bottom h3 {
    font: var(--h4);
    margin-bottom: 4px;
}

.league-latest-next-box .latest-slider-items-bottom p {
    margin: 0;
}

.league-latest-next-box .latest-slider-items-bottom p:not(:last-child) {
    margin-bottom: 8px;
}

.league-latest-banner-inner {
    padding: 24px 10px;
}

.league-latest-banner-inner .banner-wrapper .banner-card:before {
    width: 100%;
}

.league-latest-standing-heading {
    padding: 32px 24px 16px;
    border-bottom: 1px solid var(--color6);
    gap: 12px;
}

.league-latest-standing-heading .schedule_dropdown_button {
    padding: 12px 62px 12px 16px;
    font: var(--p);
    font-weight: 700;
    background-position: right 12px bottom 50%;
}

.league-latest-standing-box {
    display: grid;
    grid-template-columns: repeat(9, minmax(0, 1fr));
    gap: 16px;
    text-align: center;
    padding: 16px 32px;
    align-items: center;
}

.league-latest-standing-box:nth-child(odd) {
    background-color: var(--color8);
}

.league-latest-standing-box:not(:last-child) {
    border-bottom: 1px solid var(--color6);
}

.league-latest-standing-box .league-latest-standing-box-items:first-child {
    grid-column: span 4 / span 4;
    text-align: left;
}

.league-latest-standing-box-heading h5 {
    font-weight: 600;
    color: #8A8A8A;
}

.league-latest-standing-box-items .aspect-ratio {
    max-width: 40px;
    padding-bottom: 40px;
}

.league-latest-standing-box .league-latest-standing-box-items a {
    gap: 16px;
}

.league-latest-standing-box .league-latest-standing-box-items a h4 {
    flex: 1;
}

.league-latest-standing-box:not(.league-latest-standing-box-heading) h5 {
    font-weight: 500;
}

.league-latest-standing-footer {
    border-top: 1px solid var(--color6);
    padding: 24px;
}

.league-latest-standing-footer .view-result-btn {
    width: fit-content;
}

.league-latest-standing-box:not(.league-latest-standing-box-heading) .league-latest-standing-box-items:not(:first-child) h4 {
    display: none;
}

/****** End League latest scores section HERE ******/
/****** Start League teams slider section HERE ******/
.league-teams-section, .league-play-off-section {
    margin: 60px 0;
    letter-spacing: 0.02em;
}

.league-teams-heading {
    gap: 12px;
    margin-bottom: 24px;
}

.league-teams-slider .swiper-slide {
    height: auto;
}

.league-teams-items {
    border: 1px solid var(--color6);
    padding: 32px 20px;
    text-align: center;
    height: 100%;
}

.league-teams-slider .swiper-slide:nth-child(odd) .league-teams-items {
    background-color: var(--color8);
}

.league-teams-items-img {
    margin-bottom: 20px;
}

.league-teams-items-img .aspect-ratio {
    max-width: 160px;
    padding-bottom: 160px;
    margin: 0 auto;
}

.league-teams-items-content h4 {
    margin-bottom: 17px;
}

.league-teams-items-content h6 {
    font: var(--p);
    line-height: 24px;
    font-weight: 700;
    margin-bottom: 4px;
}

.league-teams-items-content p {
    font: normal normal 500 14px/24px var(--primary-font);
}

/****** End League teams slider section HERE ******/
/****** Start Schedule list content section HERE ******/
.schedule-list-content {
    border-top: 1px solid var(--color6);
    padding: 12px 0;
    letter-spacing: 0.02em;
}

.schedule-list-content-inner {
    position: relative;
    padding-right: 44px;
}

.schedule-list-content-row {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    position: relative;
    gap: 10px;
}

.schedule-list-content-row .schedule-list-content-items {
    padding: 12px 0;
}

.schedule-list-content-row .schedule-list-content-items:first-child {
    text-transform: uppercase;
}

.schedule-list-content-inner .schedule-list-arrow-btn {
    position: absolute;
    top: 12px;
    right: 0;
}

.schedule-list-arrow-btn button {
    border: none;
    background-color: transparent;
    border-radius: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    padding: 0;
    justify-content: center;
    transition: all 0.3s ease;
}

.schedule-list-arrow-btn.active button {
    transform: rotate(180deg);
}

.schedule-list-arrow-btn button :is(img, svg) {
    width: 100%;
    height: 100%;
}

.schedule-list-content-row:first-child .schedule-list-content-items p {
    font-weight: 700;
}

.schedule-list-content-items p {
    line-height: 24px;
}

.schedule-list-content-items p:not(:last-child) {
    margin-bottom: 8px;
}

.schedule-list-content-mob, .schedule-list-content-items:not(.main-heading) {
    display: none;
}

.schedule-list-content-inner:has(.schedule-list-arrow-btn.active) .schedule-list-content-items:not(.main-heading) {
    display: block;
}

.latest-slider-items-team-name  h5 {
    height: 1.2em;  /* Approximate height of one line */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/****** End Schedule list content section HERE ******/
/* ============================================================
                    START RESPONSIVE HERE
=============================================================== */
@media screen and (max-width: 1420px) {
    /* ------ Home hero ------- */
    .main-hero-box .main-hero-left {
        padding: 140px 60px 140px 56px;
    }
}

@media screen and (max-width: 1280px) {
    .wrapper {
        padding-top: 112px;
    }

    /* ------ START HEADER ------- */
    .header_top_menu ul li a,
    .footer_top_menu ul li a {
        padding: 20px 5px;
        font: normal normal 700 14px/18px var(--primary-font);
    }

    .header_top_menu ul li {
        padding: 0 4px;
    }

    .header_top_menu ul {
        padding-left: 15px;
    }

    .header_logo {
        padding-right: 25px;
    }

    .header_top {
        padding: 0 50px;
    }

    .header_dropdown {
        padding: 15px 50px;
    }

    .header_bottom_menu ul {
        padding-left: 50px;
    }

    .header_bottom_menu ul li {
        padding: 0 10px;
    }

    .header_bottom_menu ul li a {
        padding: 15px 0;
    }

    /* ------ START FOOTER ------- */
    .footer_top_row {
        padding: 55px 0 55px 0;
    }

    .footer_top_menu ul li {
        padding: 0 2px;
    }

    .footer_top_menu ul li a {
        padding: 10px 5px;
    }

    .footer_top_menu {
        padding-left: 50px;
    }

    .footer_bottom_row {
        padding: 25px 0;
    }

    .footer_social_media ul li:not(:last-child) {
        padding-right: 20px;
    }

    /* ------ START HERO ------- */
    .hero_top_logo {
        padding-bottom: 15px;
    }

    .hero_bottom_details h1 {
        padding-top: 5px;
    }

    .hero_bg {
        padding-bottom: 30%;
    }

    .dots_top_hero {
        width: 132px;
        height: 96px;
    }

    .dots_bottom_hero {
        width: 272px;
        height: 106px;
    }

    .hero_section {
        margin-bottom: 25px;
    }

    /* ----- TOURNAMENT SECTIONS ----- */
    .name_tournament h4 {
        font-size: 16px;
        margin: 0 14px 0 0;
    }

    li.tournament_list {
        padding: 18px 40px;
    }

    .day_tournament {
        padding: 25px 0;
    }

    .tournament_overtime,
    .tournament_match_recap {
        padding-left: 25px;
    }

    .tournament_number {
        margin: 0 11.5px;
    }

    .row-reverse h4 {
        margin: 0 0 0 14px;
    }

    /* ------ START TEAM ROSTER PAGE  ------ */
    .team_hero-img-wrapper .dot-img {
        width: 272px;
        height: 106px;
    }

    .teams_list a {
        width: 100%;
    }

    /* ------ START ROSTER PAGE  ------ */
    .roster-accordion .roster-accordion-title a {
        padding: 15px 20px;
    }

    /* ------ Home hero ------- */
    .main-hero-heading h1 {
        line-height: normal;
    }
}

@media screen and (max-width: 1200px) {
    /* ------ Latest score ------- */
    .latest-score-slider-inner {
        margin-left: 0;
        padding-left: 20px;
    }

    .latest-score-slider {
        margin-left: 0;
    }
}

@media screen and (max-width: 1140px) {
    :root {
        --h1: normal normal 400 64px/85px var(--primary-font);
        --h3: normal normal 700 20px/24px var(--primary-font);
        --h5: normal normal 700 14px/20px var(--primary-font);
    }

    /* ------ START HEADER ------- */
    .header_bottom_menu ul {
        padding-left: 25px;
    }

    .header_top_menu ul li a,
    .footer_top_menu ul li a {
        padding: 20px 4px;
    }

    .header_dropdown {
        padding: 15px 20px;
    }

    .active_dropdown p {
        padding-right: 10px;
        font: normal normal 600 14px/20px var(--primary-font);
    }

    .header_top {
        padding: 0 20px;
    }

    .header_logo {
        padding-right: 15px;
    }

    .header_bottom_menu ul li {
        padding: 0 8px;
    }

    /* ------- START FOOTER ------- */
    .footer_top_row {
        padding: 45px 0;
    }

    .footer_top_menu {
        padding-left: 35px;
    }

    .footer_top_menu ul li a {
        padding: 5px 5px;
    }

    .footer_bottom_row {
        padding: 20px 0;
    }

    footer.footer {
        margin-top: 80px;
    }

    /* ------- START HERO ------- */
    .hero_bg {
        padding-bottom: 35%;
    }

    .hero_top_logo {
        padding-bottom: 10px;
    }

    .hero_bg_text {
        max-width: 850px;
    }

    .hero_section {
        margin-bottom: 20px;
    }

    /* ----- TOURNAMENT SECTIONS ----- */
    .name_tournament h4 {
        font-size: 14px;
    }

    li.tournament_list {
        padding: 15px 20px;
    }

    .tournament_overtime,
    .tournament_match_recap {
        padding-left: 20px;
        max-width: 20%;
    }

    .tournament_name_icon {
        max-width: 60%;
    }

    .tournament_num {
        padding: 7px 13px;
    }

    /* ============= START SCHEDULE PAGE HERE ============= */
    .center_schedule {
        padding: 0 15px 0 25px;
    }

    .center_schedule h2 {
        font: bold 24px/1.2 var(--primary-font);
    }

    .left_schedule {
        max-width: 374px;
        padding-right: 14px;
    }

    .right_schedule a {
        padding: 10px 25px;
    }

    .schedule_name {
        min-height: 103px;
        max-width: 122px;
    }

    li.schedule_list {
        padding: 20px 25px;
    }

    /* ------ START TEAM ROSTER PAGE  ------ */
    .team_hero-banner {
        padding-bottom: 30%;
    }

    .team_hero_section .hero-details-wrapper .team-img {
        height: 180px;
        width: 180px;
    }

    .team_hero_section .hero-details-wrapper .team-info {
        padding: 0 0 0 20px;
    }

    .team_hero_section .hero-details-wrapper .team-info h2 {
        font-size: 34px;
        line-height: 40px;
    }

    /* ------ Home hero ------- */
    .main-hero-box .main-hero-left {
        padding: 140px 60px 140px 20px;
    }

    /* ------ Latest score ------- */
    .latest-score-slider {
        padding-right: 0;
    }

    .latest-score-slider-items-inner {
        padding: 24px;
    }
}

@media screen and (max-width: 1024px) {
    .wrapper {
        padding-top: 102px;
    }

    /* ------ START HEADER  ------ */
    .header_top_menu ul {
        padding-left: 10px;
    }

    .header_logo {
        padding-right: 10px;
    }

    .header_bottom_menu ul {
        padding-left: 20px;
    }

    .header_bottom_menu ul li {
        padding: 0 6px;
    }

    .header_dropdown {
        padding: 10px 15px;
    }

    .header_bottom_menu ul li a {
        padding: 10px 0;
    }

    .header_top_menu ul li {
        padding: 0 2px;
    }

    /* ----- START FOOTER ------ */
    .footer_top_menu {
        padding-left: 30px;
    }

    .footer_top_row {
        padding: 40px 0;
    }

    .teams_list .teams_list_wrp {
        padding: 20px;
    }

    .teams_list_details {
        margin-top: 15px;
    }

    .teams_list_details h6 {
        margin: 15px 0 4px 0;
    }

    .teams_list_wrp .teams_list_img {
        height: 140px;
        max-width: 140px;
    }

    /* ------ START BANNER PAGE  ------ */
    .banner-section .banner-wrapper {
        margin: 0 -10px;
    }

    .banner-wrapper .banner-card {
        padding: 0 10px;
    }

    .banner-wrapper .banner-card .inner-banner-card {
        max-width: 190px;
    }

    .banner-wrapper .banner-card .bottom-shape {
        max-width: 190px;
    }

    .banner-wrapper .banner-card .bottom-shape:before {
        max-width: 166px;
    }

    .banner-wrapper .banner-card .bottom-shape:after {
        max-width: 180px;
    }

    /* ------ START TEAM ROSTER PAGE  ------ */
    .team_hero_section .hero-details-wrapper .team-img {
        height: 160px;
        width: 160px;
    }
}

@media screen and (max-width: 991px) {
    .wrapper {
        padding-top: 72px;
    }

    :root {
        --h3: normal normal 700 18px/22px var(--primary-font);
        --h1: normal normal 400 54px/58px var(--primary-font);
    }

    .header_top_menu.only_desktop {
        display: none;
    }

    .header_menu_icon.only_mobile {
        display: block;
    }

    .header_top {
        justify-content: space-between;
        padding: 16.5px 20px;
    }

    .header_logo {
        border-right: 0;
    }

    .header_bottom {
        display: none;
    }

    .header_logo a h2,
    .footer_top_logo a {
        font-size: 28px;
        line-height: 34.13px;
    }

    footer.footer {
        margin-top: 60px;
    }

    .footer_top_menu {
        padding-left: 20px;
    }

    .mobile_header.active_menu {
        transform: translate(0px, 0px);
        -webkit-transform: translate(0px, 0px);
        -moz-transform: translate(0px, 0px);
        -ms-transform: translate(0px, 0px);
        -o-transform: translate(0px, 0px);
        opacity: 1;
        visibility: visible;
    }

    .left_schedule {
        max-width: 245px;
        padding-right: 10px;
    }

    .schedule_name {
        min-height: auto;
        max-width: 92px;
    }

    .left_schedule > h2 {
        max-width: 30px;
        margin: 0 10px;
        font-size: 22px;
    }

    .center_schedule h2 {
        font: bold 22px/1.2 var(--primary-font);
    }

    .center_schedule {
        padding: 0 15px;
    }

    .right_schedule a {
        padding: 10px 20px;
    }

    .center_schedule::before {
        height: 40px;
    }

    .standing_list_number {
        max-width: 80px;
    }

    .standing_list_body img,
    .standing_list_body svg {
        margin-right: 10px;
    }

    .standing_list_name {
        padding-left: 20px;
    }

    .teams_list {
        padding: 5px;
    }

    .teams_list_details h6 {
        margin: 10px 0 5px 0;
    }

    .teams_list_details {
        margin-top: 10px;
    }

    /* ------ START BANNER PAGE  ------ */
    .banner-wrapper .banner-card {
        max-width: 33.33%;
    }

    .banner-wrapper .banner-card:nth-last-child(-n+4) {
        margin-bottom: 60px;
    }

    .banner-wrapper .banner-card:nth-last-child(-n+3) {
        margin: 0;
    }

    /* ------ START TEAM ROSTER PAGE  ------ */
    .team_hero-banner {
        padding-bottom: 38%;
    }

    .roster-accordion .roster-accordion-title a {
        padding: 15px;
    }

    /* ------ Home hero ------- */
    .main-hero-box {
        position: relative;
    }

    .main-hero-box .main-hero-left {
        max-width: 100%;
        flex: auto;
        position: relative;
        color: var(--color5);
        background-color: #00000075;
        z-index: 1;
    }

    .main-hero-box .main-hero-right {
        flex: auto;
        margin-left: 0;
        width: 100%;
        position: absolute;
    }

    /* ------ Our divison ------- */
    .our-division-inner {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    /* ------ Latest score ------- */
    .latest-score-slider {
        padding-right: 19.5%;
    }

    /* ------ Upcoming game ------- */
    .upcoming-game-slider-items {
        padding: 40px 20px;
    }

    .upcoming-game-slider-items .latest-score-slider-items-heading, .upcoming-game-slider-items .latest-slider-items-team-main {
        margin-bottom: 20px;
    }

    .latest-slider-items-team-main .latest-slider-items-team {
        flex: 0 0 125px;
    }

    .upcoming-game-slider-items .latest-slider-items-team .latest-slider-items-team-img {
        max-width: 60px;
        padding-bottom: 60px;
    }

    /* ------ Winner new schedule ------- */
    .main-playoff-winner .main-playoff-winner-left, .main-playoff-winner .main-playoff-winner-right {
        width: 100%;
    }

    /* ------ Playoff section ------- */
    

    .playoff-main-mob {
        display: none;
    }

    .playoff-accordion .playoff-accordion-body {
        padding: 24px;
        letter-spacing: 0.02em;
    }

    .playoff-main-mob-box:not(:last-child) {
        margin-bottom: 24px;
    }

    .playoff-main-mob-box-heading {
        margin-bottom: 16px;
    }

    .playoff-main-mob-box-body-main {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }

    .playoff-main-mob-box-body {
        border: 1px solid var(--color6);
        padding: 20px 16px;
    }

    .playoff-box-team-main {
        gap: 10px;
    }

    .playoff-box-team {
        gap: 12px;
        flex: 0 0 86px;
    }

    .playoff-box-team p {
        font: normal normal 700 12px/24px var(--primary-font);
        letter-spacing: 0.02em;
        flex: 1;
        text-transform: uppercase;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .playoff-box-team.playoff-box-team-left p {
        text-align: right;
    }

    .playoff-box-team .aspect-ratio {
        max-width: 32px;
        padding-bottom: 32px;
    }

    .playoff-box-score-main {
        margin: 0 16px;
        gap: 4px;
    }

    .playoff-box-score-main .playoff-box-score {
        background-color: var(--color1);
        color: var(--color5);
        padding: 4px 10px;
    }

    .playoff-box-score-main .playoff-box-score.green {
        color: #0BB20B;
    }

    .playoff-box-score-main .playoff-box-score p {
        line-height: 24px;
        font-weight: 700;
    }

    .playoff-main-mob-box-body .playoff-box-team-time {
        text-align: center;
        padding-top: 20px;
    }

    .playoff-box-team-time h5 {
        font-weight: 500;
    }

    .playoff-box-team-time h5:not(:last-child) {
        margin-bottom: 8px;
    }

    /* ------ Archive section ------- */
    .archive-main-inner .playoff-main-mob .schedule_dropdown_button {
        width: 100%;
        font: normal normal 600 14px/24px var(--primary-font);
        letter-spacing: 0.02em;
        padding-right: 50px;
    }

    .archive-main-inner .playoff-main-mob .playoff-box-team {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .archive-main-inner .playoff-main-mob .playoff-box-team .aspect-ratio {
        order: 1;
        max-width: 40px;
        padding-bottom: 40px;
    }

    .archive-main-inner .playoff-main-mob .playoff-box-team p {
        order: 2;
        font: normal normal 700 14px/21.07px var(--primary-font);
    }

    .archive-main-inner .playoff-main-mob .playoff-main-mob-box-body .playoff-box-team-time h5 {
        font: normal normal 600 16px/24px var(--primary-font);
        margin-bottom: 0;
    }

    /* ------ League latest scores ------- */
    .league-latest-inner .league-latest-scores {
        width: calc(50% - 12px);
        order: 1;
    }

    .league-latest-inner .league-latest-banner {
        width: calc(50% - 12px);
        order: 2;
    }

    .league-latest-inner .league-latest-next {
        width: 100%;
        order: 3;
    }

    .league-latest-inner .league-latest-standing {
        order: 4;
    }

    .league-latest-standing-box {
        grid-template-columns: repeat(8, minmax(0, 1fr));
    }

    .league-latest-standing-box .league-latest-standing-box-items:first-child {
        grid-column: span 3 / span 3;
    }

    .league-latest-next-box-main {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0 24px;
    }

    /* ------ Schedule list content  ------ */
    .schedule-list-content-des {
        display: none;
    }

    .schedule-list-content-mob {
        display: block;
    }

    .schedule-list-content-mob-inner .schedule-list-arrow-btn button {
        margin: 0 auto;
    }

    .schedule-list-content-mob-row-main {
        padding-top: 20px;
    }

    .schedule-list-content-mob-heading h4 {
        line-height: 24px;
        margin-bottom: 20px;
    }

    .schedule-list-content-mob-content h6 {
        line-height: 24px;
        text-transform: uppercase;
        margin-bottom: 16px;
    }

    .schedule-list-content-mob-content-row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .schedule-list-content-mob-content-row:not(:last-child) {
        margin-bottom: 16px;
    }

    .schedule-list-content-mob-content-row .schedule-mob-content-items p {
        font-weight: 500;
        line-height: 24px;
        text-align: right;
    }

    .schedule-list-content-mob-content-row .schedule-mob-content-items p:not(:last-child) {
        margin-bottom: 12px;
    }

    .schedule-list-content-mob-content-row .schedule-mob-content-items:first-child p {
        font-weight: 700;
        text-align: left;
    }

    .schedule-list-content-mob-content-main {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
    }
}

@media screen and (max-width: 840px) {
    /* ------ START TEAM ROSTER PAGE  ------ */
    .team_hero_section .hero-details-wrapper .team-info {
        padding: 0 0 0 15px;
    }

    .team_hero_section .hero-details-wrapper .team-img {
        height: 140px;
        width: 140px;
    }

    .team_hero_section .hero-details-wrapper .team-info .address svg {
        width: 16px;
        height: 16px;
        margin: 0 10px 0 0px;
    }

    .team_hero_section .hero-details-wrapper .team-info .address p {
        font-size: 13px;
    }

    /* ------ Gallery ------- */
    .gallery-section-row-first .aspect-ratio {
        padding-bottom: 200px;
    }

    .gallery-section-row-sec .aspect-ratio {
        padding-bottom: 115px;
    }
}

@media screen and (max-width: 768px) {
    :root {
        --h4: normal normal 700 16px/22px var(--primary-font);
    }

    .hero_bg {
        padding-bottom: 55%;
    }

    .tournament_number {
        margin: 0 9.5px;
    }

    .tournament_name_icon {
        max-width: 100%;
    }

    .tournament_overtime,
    .tournament_match_recap {
        max-width: 50%;
        margin-top: 15px;
    }

    .tournament_overtime {
        border-left: none;
        text-align: right;
        padding: 0 20px 0 0;
    }

    .footer_top_row {
        flex-wrap: wrap;
        padding: 30px 0;
    }

    .footer_top_menu {
        padding-left: 0;
    }

    .footer_top_menu ul li {
        max-width: 25%;
        width: 100%;
        margin: 20px 0;
    }

    .footer_bottom_row {
        padding: 20px 0;
    }

    footer.footer {
        margin-top: 50px;
    }

    .tournament_pagination {
        padding-top: 0;
    }

    .name_tournament.row-reverse {
        margin-right: 0;
    }

    .only_desktop {
        display: none;
    }

    .only_mobile {
        display: block;
    }

    .name_tournament {
        max-width: 100%;
    }

    .name_tournament h4 {
        text-overflow: ellipsis;
        max-width: 8ch;
        overflow: hidden;
        white-space: nowrap;
        margin: 0 12px 0 0;
    }

    .row-reverse h4 {
        margin: 0 0 0 12px;
    }

    .schedule_lists ul li .schedule_list_wrp {
        flex-direction: column;
    }

    .center_schedule {
        padding: 20px 0 0 0;
        text-align: center;
        width: 100%;
    }

    .left_schedule {
        padding-right: 0;
        max-width: 100%;
    }

    li.schedule_list {
        padding: 20px 16px;
    }

    .right_schedule {
        width: 100%;
        padding-top: 20px;
    }

    .right_schedule a {
        width: 100%;
        text-align: center;
    }

    .schedule_top_arrow, .center_schedule::before {
        display: none;
    }
    .standing_list_number {
        max-width: 58px;
    }

    .teams_list {
        max-width: 50%;
    }

    .teams_list .teams_list_wrp {
        max-width: 100%;
    }

    .teams_lists li .teams_list_wrp {
        background-color: var(--color5);
    }

    .teams_lists li:nth-child(odd) .teams_list_wrp {
        background-color: var(--color5);
    }

    .teams_lists li:nth-child(4n+1) .teams_list_wrp, .teams_lists li:nth-child(4n+4) .teams_list_wrp {
        background-color: var(--color8);
    }

    .teams_list.bg_teams_list .teams_list_wrp {
        background-color: transparent;
    }

    .teams_lists ul.flex {
        margin: 0;
    }

    /* ------ START BANNER PAGE  ------ */
    .banner-wrapper .banner-card {
        max-width: 50%;
    }

    .banner-wrapper .banner-card:nth-last-child(-n+3) {
        margin-bottom: 60px;
    }

    .banner-wrapper .banner-card:nth-last-child(-n+2) {
        margin: 0;
    }

    /* ------ START TEAM ROSTER PAGE  ------ */
    .team_hero-img-wrapper .dot-img {
        top: 250px;
        left: -150px;
        bottom: 0;
    }

    .team_hero-img-wrapper .dot-img2 {
        display: block;
        width: 16.7%;
        height: 9.4%;
        position: absolute;
        top: 0;
        right: 0;
    }

    .team_hero-img-wrapper .dot-img2 img {
        width: 100%;
        height: 100%;
    }

    .hero_section.team_hero_section {
        overflow-y: unset;
        padding: 40px 0 0;
    }

    .team_hero_section {
        padding: 40px 0 0;
    }

    .team_hero-banner {
        padding-bottom: 0;
        position: absolute;
        top: 0;
        left: 0;
    }

    .team_hero_section .hero-details {
        position: relative;
        top: 0;
        transform: unset;
        margin: 0 0 40px;
    }

    .team_hero_section .hero-details-wrapper {
        align-items: flex-start;
        flex-direction: column;
    }

    .team_hero_section .hero-details-image {
        position: relative;
        max-width: 100%;
    }

    .team_hero_section .hero-details-wrapper .team-img {
        margin: 0 0 15px;
    }

    .team_hero_section .hero-details-wrapper .team-info {
        padding: 0;
    }

    .hero_section.team_hero_section .hero_bg_wrp {
        position: absolute;
        top: 0;
        width: 100%;
    }

    .team_hero-banner img.desk-banner {
        display: none;
    }

    .team_hero-banner img.mob-banner {
        display: block;
    }

    .team_hero_section .hero-details-wrapper .team-info .address svg {
        width: 20px;
        height: 20px;
        margin: 0 15px 0 0px;
    }

    .team_hero_section .hero-details-wrapper .team-info .address p {
        font-size: 14px;
    }

    .tab-content-wrapper .table-wrapper ul li {
        padding: 20px 15px;
    }

    /* ------ START ROSTER PAGE  ------ */
    .roster-wrapper .roster-card {
        max-width: 50%;
    }

    .roster-wrapper .roster-card:last-child {
        margin: 0 !important;
    }

    .roster-accordion .roster-accordion-title a {
        padding: 19px 20px 19px 16px;
    }

    .roster-content-wrapper ul li {
        max-width: 50%;
    }

    .roster-accordion .roster-accordion-content .roster-content-wrapper {
        padding: 25px 16px 0px;
    }

    /* ------ Our divison ------- */
    .our-division-inner {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* ------ Gallery ------- */
    .gallery-section-row {
        gap: 12px;
    }

    .gallery-section-row.gallery-section-row-first {
        margin-bottom: 12px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .gallery-section-row.gallery-section-row-sec {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .gallery-section-row .aspect-ratio {
        padding-bottom: 50%;
    }

    /* ------ Playoff section ------- */
    .playoff-main-mob-box-body-main {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    /* ------ League latest scores ------- */
    .league-latest-inner .league-latest-scores, .league-latest-inner .league-latest-banner {
        width: 100%;
    }

    .league-latest-next-box-main {
        grid-template-columns: repeat(1, minmax(0, 1fr));
        gap: 0;
    }
}

@media screen and (max-width: 640px) {
    :root {
        --h3: normal normal 700 16px/24px var(--primary-font);
        --h1: normal normal 400 42px/46px var(--primary-font);
    }

    .day_tournament {
        padding: 20px 0;
    }

    footer.footer {
        margin-top: 40px;
    }

    .dots_top_hero {
        top: -34px;
        right: -38px;
    }

    .footer_top_menu ul li a {
        padding: 0;
    }

    .main_header_mobile > li > a,
    .sub_menu_mobile > li > a, .acnav__list > li > a {
        font: normal normal 600 12px/24px var(--primary-font);
    }

    .sub_menu_mobile > li > a, .acnav__list > li > a {
        font-weight: 700;
    }

    .acnav__list > li > a {
        font-weight: 500;
    }

    .standing_game_body {
        overflow: auto;
    }

    .standing_list_name {
        position: absolute;
        margin-left: 35px;
        padding-left: 0px;
        width: 133px;
        overflow: hidden;
        left: 0;
    }

    .standing_list_number {
        max-width: unset;
        width: 82px;
        flex-shrink: 0;
    }

    .standing_game_body .standing_list {
        padding: 15px 0 15px 133px;
        max-width: fit-content;
        width: fit-content;
    }

    .standing_game_body .standing_list_body .standing_list_first h5 {
        word-break: normal;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .standing_game_body .standing_list_body .standing_list_first h5 .teamname{
        display:none;
    }

    .standing_list_name {
        padding-right: 5px;
        border-right: 1px solid var(--color6);
    }

    .standing_game_body .standing_list .standing_list_name {
        background-color: var(--color5);
    }

    .standing_game_body .standing_list_header .standing_list_name,
    li.standing_list_body:nth-child(odd) .standing_list_name {
        background-color: var(--color8);
    }

    .standing_lists h4 {
        margin-bottom: 10px;
    }

    .standing_list_body img, .standing_list_body svg {
        width: 25px;
    }

    .standing_game_body .standing_list_body .standing_list_first {
        min-height: auto;
    }

    /* ------ Our divison ------- */
    .our-division-inner {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    .our-division-item .our-division-item-title {
        padding: 80px 20px;
    }

    .our-division-item-inner {
        padding: 94px 20px;
    }

    .our-division-first .our-division-first-content {
        padding-top: 14px;
    }

    .our-division-first .our-division-first-content h2 {
        font: normal normal 400 30px/normal var(--secondary-font);
    }

    .our-division-item-title h2 {
        font-size: 24px;
        line-height: normal;
    }

    /* ------ Latest score ------- */
    .latest-score-section {
        padding: 40px 0 0;
    }

    .latest-score-slider {
        padding-right: 0;
    }

    .latest-score-shape .latest-score-shape-1 {
        width: 140px;
        height: 86px;
        left: auto;
        right: 0;
        top: 40px;
        transform: none;
    }

    .latest-score-shape .latest-score-shape-2 {
        width: 120px;
        height: 86px;
        top: auto;
        bottom: 0;
        right: 20px;
    }

    .latest-score-heading-left h3 {
        font: normal normal 700 22px / normal var(--primary-font);
    }

    .slider-ct-button-gr .slider-btn {
        width: 32px;
        height: 32px;
    }

    .slider-ct-button-gr .slider-btn :is(img, svg) {
        width: 8px;
        height: 13px;
    }

    .latest-score-slider-inner {
        padding-left: 0;
    }

    .latest-score-slider-items {
        padding: 40px 20px;
    }

    .latest-slider-items-team .latest-slider-items-team-name {
        padding-top: 12px;
    }

    /* ------ Upcoming game ------- */
    .upcoming-game-section {
        margin: 40px 0;
    }

    .upcoming-game-inner .latest-score-heading-inner {
        margin-bottom: 24px;
    }

    .upcoming-game-slider-items .latest-slider-items-score h3 {
        font: normal normal 700 26px/normal var(--primary-font);
    }

    .upcoming-game-slider-items .right_schedule a {
        margin-top: 0;
    }

    .upcoming-game-slider-items .right_schedule {
        padding-top: 0;
    }

    /****** Champions slider ******/
    .champions-slider-section {
        margin: 40px 0;
    }

    /* ------ Winner new schedule ------- */
    .main-playoff-section {
        margin: 40px 0;
    }

    /* ------ Playoff section ------- */
    .playoff-accordion-header {
        padding: 28px 16px;
    }

    .playoff-box-team-main {
        gap: 0;
    }

    .playoff-box-team {
        flex: 1 1 0;
        gap: 6px;
    }

    .playoff-accordion .playoff-accordion-body {
        padding: 16px;
    }

    .playoff-box-score-main {
        margin: 0 10px;
    }

    /* ------ Archive section ------- */
    .archive-main-section {
        margin: 40px 0;
    }

    .tab-content-heading h3 {
        font: normal normal 700 18px/27px var(--primary-font);
        margin-bottom: 16px;
    }

    /* ------ League latest scores ------- */
    .league-latest-section, .league-teams-section, .league-play-off-section {
        margin: 40px 0;
    }

    .league-latest-scores-heading, .league-latest-next-inner {
        padding: 16px;
    }

    .league-latest-standing-box {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        text-align: left;
        padding: 16px;
    }

    .league-latest-standing-box.league-latest-standing-box-heading {
        display: none;
    }

    .league-latest-standing-box:nth-child(odd) {
        background-color: transparent;
    }

    .league-latest-standing-box:nth-child(even) {
        background-color: var(--color8);
    }

    .league-latest-standing-box:not(.league-latest-standing-box-heading) .league-latest-standing-box-items:not(:first-child) h4 {
        display: block;
        text-transform: lowercase;
    }

    .league-latest-standing-box:not(.league-latest-standing-box-heading) .league-latest-standing-box-items:not(:first-child) h4::first-letter {
        text-transform: uppercase;
    }

    .league-latest-standing-heading {
        padding: 24px 16px;
    }

    /* ------ Gallery ------- */
    .gallery-section .latest-score-heading-inner {
        margin-bottom: 20px;
    }

    .gallery-section {
        margin: 40px 0;
    }

    .gallery-section-row .aspect-ratio {
        padding-bottom: 100%;
    }

    /* ------ Schedule list content  ------ */
    .schedule-list-content-mob-content-main {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
}

@media screen and (max-width: 575px) {
    /* ----- START MATCH RECAP MODAL ------ */
    .match-recap-modal .modal-content {
        padding: 15px 5px 15px 15px;
        border-radius: 0;
    }

    .match-recap-modal .modal-content .modal-head {
        margin: 0 0 24px;
    }

    .match-recap-modal .modal-content .modal-body {
        height: calc(100% - 33px);
    }

    .match-recap-hero {
        padding: 20px 12px;
    }

    /* ----- END MATCH RECAP MODAL ------ */
    /* ----- START TEAMS ROSTER PAGE ------ */
    .team-tab-section {
        padding: 40px 0 0;
    }

    .tab-content-wrapper .table-wrapper ul li {
        padding: 12px 0;
    }

    .tab-content-wrapper .table-wrapper ul .table-head {
        display: none;
    }

    .tab-content-wrapper .table-wrapper ul li h4 {
        font-size: 14px;
    }

    .tab-content-wrapper .table-wrapper ul li h5 {
        border-left: 1px solid var(--color6);
    }

    /* ----- START ROSTER PAGE ------ */
    .roster-section {
        padding: 0px;
    }

    .roster-wrapper .roster-card {
        max-width: 100%;
        margin: 0px 0px 24px !important;
    }

    .roster-content-wrapper ul li {
        max-width: 100%;
    }

    .roster-accordion .roster-accordion-title a:before {
        display: none;
    }

    .roster-accordion .roster-accordion-content {
        margin: -1px auto 0;
        padding: 0;
    }

    /* ----- START SCORE PAGE ------ */
    .match-recap-reviews .recap-review .review-title-time {
        flex-direction: column;
        align-items: flex-start;
    }

    .match-recap-reviews .review-title-time h4 {
        margin: 0 0 8px;
    }

    /* ------ Home hero ------- */
    .main-hero-right-inner {
        padding-bottom: 400px;
    }

    .main-hero-heading h1 {
        font: var(--h1);
        font-weight: 400;
        font-family: var(--secondary-font);
    }

    .main-hero-heading h4 {
        font: var(--h4);
        font-weight: 800;
    }

    .main-hero-heading {
        margin-bottom: 0px;
    }

    /* ------ Home hero ------- */
    .main-hero-box .main-hero-left {
        padding: 40px 20px;
    }

    /* ------ Latest score ------- */
    .latest-score-slider-items-inner {
        background-size: 68%;
    }

    /* ------ Upcoming game ------- */
    .upcoming-game-slider-items {
        background-size: 80%;
        padding: 20px;
    }
}

@media screen and (max-width: 480px) {
    :root {
        --h1: normal normal 400 32px/46px var(--primary-font);
    }

    .container {
        padding: 0 16px;
    }

    .name_tournament h4 {
        font-size: 12px;
    }

    .header_top_menu ul li a, .footer_top_menu ul li a {
        font: normal normal 700 16px/24px var(--primary-font);
    }

    .name_tournament img,
    .name_tournament svg {
        max-width: 32px;
    }

    li.tournament_list {
        padding: 18px 12px;
    }

    .tournament_overtime,
    .tournament_match_recap {
        max-width: 100%;
        text-align: center;
        padding: 0;
    }

    .tournament_overtime {
        margin-top: 17.5px;
    }

    .tournament_match_recap {
        margin-top: 18px;
        border-left: 0;
    }

    .match_recap a {
        justify-content: center;
    }

    .dots_bottom_hero {
        width: 272px;
        height: 106px;
        left: -117px;
        bottom: -60px;
    }

    .footer_top_menu ul li {
        margin: 0 0 48px 0;
        max-width: 50%;
        padding: 0;
    }

    .footer_top_menu {
        margin-top: 40px;
    }

    .footer_top_menu ul li:last-child {
        margin-bottom: 0;
    }

    .footer_top_row {
        padding: 24px 0 44px 0;
    }

    .footer_bottom_row {
        flex-direction: column;
        padding: 30px 0 28px 0;
    }

    .footer_social_media {
        margin-bottom: 26px;
    }

    section.tournament_sections {
        padding-top: 22px;
    }

    .schedule_dropdown_wrp {
        width: 180px;
    }

    .schedule_name {
        max-width: 116px;
        min-height: 70px;
    }

    .schedule_name img,
    .schedule_name svg {
        width: 40px;
        height: 33.6px;
    }

    .left_schedule {
        justify-content: space-between;
    }

    .center_schedule {
        padding: 15px 0 0 0;
    }

    .center_schedule h2 {
        font: bold 14px/21px var(--primary-font);
    }

    .center_schedule h5 {
        font-size: 12px;
        line-height: 18px;
        letter-spacing: 0.02em;
    }

    li.schedule_list {
        padding: 20px 10px;
    }

    .right_schedule a {
        font-size: 11.02px;
        line-height: 22.04px;
        letter-spacing: 0.02em;
    }

    .right_schedule {
        padding-top: 18px;
    }

    .standing_list_number {
        width: 72px;
    }

    .teams_list {
        max-width: 100%;
        padding: 0;
    }

    .teams_list_details {
        max-width: 232px;
        width: 100%;
        margin: 30px auto 0 auto;
    }

    .teams_list_details h6 {
        margin: 17px 0 4px 0;
    }

    .teams_lists li:nth-child(4n+1) .teams_list_wrp, .teams_lists li:nth-child(4n+4) .teams_list_wrp {
        background-color: transparent;
    }

    li.teams_list.flex:nth-child(odd) .teams_list_wrp {
        background: var(--color8);
    }

    .teams_list_wrp .teams_list_img {
        height: 160px;
        max-width: 160px;
    }

    section.teams_section {
        padding-top: 20px;
    }

    .hero_bottom_details h1 {
        padding: 0 15px;
    }

    /* ----- START MATCH RECAP MODAL ------ */
    .match-recap-hero {
        margin: 0 0 15px;
    }

    .match-recap-reviews .recap-review {
        padding: 15px;
    }

    .match-recap-hero .top-content .name-icn h4 {
        font-size: 12px;
    }

    .team-icon {
        width: 30px;
        height: 30px;
    }

    .match-recap-hero .top-content .left-content .team-icon {
        margin: 0 0 0 8px;
    }

    .match-recap-hero .top-content .right-content .team-icon {
        margin: 0 8px 0 0;
    }

    .match-recap-hero .top-content .win-loss {
        margin: 0 8px;
    }

    .match-recap-hero .top-content .win-loss h5 {
        width: 30px;
        height: 30px;
    }

    /* ----- END MATCH RECAP MODAL ------ */
    /* ------ START BANNER PAGE  ------ */
    .banner-section {
        padding: 20px 0 0;
    }

    .banner-wrapper .banner-card {
        max-width: 100%;
    }

    .banner-wrapper .banner-card:nth-last-child(-n+2) {
        margin-bottom: 60px;
    }

    .banner-wrapper .banner-card:last-child {
        margin: 0;
    }

    /* ------ START TEAM ROSTER PAGE  ------ */
    .team_hero-img-wrapper .dot-img {
        top: 205px;
    }

    .team_hero_section .hero-details-wrapper .team-img {
        height: 100px;
        width: 100px;
    }

    .team_hero_section .hero-details-wrapper .team-info h2 {
        font-size: 32px;
    }

    .tab-content-wrapper .table-wrapper ul li p {
        padding: 0 10px;
        font-size: 14px;
    }

    /* ------ START ROSTER PAGE  ------ */
    .roster-content-wrapper ul li h4, .roster-content-wrapper ul li h5 {
        font-size: 14px;
    }

    /* ------ Latest score ------- */
    .latest-slider-items-team-main {
        justify-content: center;
        flex-direction: column;
        gap: 4px;
    }

    .latest-score-box {
        padding: 8px 12px;
    }

    .latest-score-box h4 {
        font-size: 12px;
        line-height: normal;
    }

    .latest-slider-items-team-main .latest-slider-items-team {
        flex: auto;
        width: 100%;
    }

    /* ------ Gallery ------- */
    .gallery-section-row {
        gap: 6px;
    }

    .gallery-section-row.gallery-section-row-first {
        margin-bottom: 6px;
    }

    /* ------ League latest scores ------- */
    .league-latest-next-inner .latest-slider-items-team-main {
        gap: 0;
    }
}

@media screen and (max-width: 335px) {
    .schedule_name {
        max-width: 86px;
    }

    /* ----- START MATCH RECAP MODAL ------ */
    .match-recap-hero .top-content .name-icn.left-content {
        justify-content: center;
    }

    /* ----- END MATCH RECAP MODAL ------ */
    /* ------ START TEAM ROSTER PAGE  ------ */
    .tab-content-wrapper .table-wrapper ul li p {
        padding: 0 5px;
    }

    /* ------ Home hero ------- */
    .main-hero-right-inner {
        padding-bottom: 300px;
    }

    /* ------ Playoff section ------- */
    .playoff-box-team-main {
        gap: 10px;
        flex-wrap: nowrap;
        flex-direction: column;
    }

    .playoff-box-team {
        flex: auto;
        width: fit-content;
        justify-content: center;
        gap: 4px;
    }

    .playoff-box-team.playoff-box-team-left p {
        text-align: center;
    }

    .playoff-box-team p {
        flex: auto;
    }

    /* ------ League latest scores ------- */
    .league-latest-team-main {
        margin-bottom: 10px;
        flex-direction: column;
        gap: 10px;
    }

    .league-latest-team-main .league-latest-team {
        flex: auto;
        min-width: 100px;
        justify-content: center;
    }

    .league-latest-team-main .league-latest-team .aspect-ratio {
        order: 1;
    }

    .league-latest-team-main .league-latest-team p {
        order: 2;
    }

    .league-latest-standing-box {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .league-latest-standing-box .league-latest-standing-box-items:first-child {
        grid-column: span 2 / span 2;
    }
}

@media screen and (max-width: 320px) {
    .tournament_name_icon {
        flex-direction: column;
    }

    .name_tournament.row-reverse,
    .name_tournament {
        justify-content: center;
    }

    .tournament_number {
        margin: 8px 0;
    }

    .tournament_pagination li a {
        padding: 4px 12px;
    }

    .footer_top_menu ul li {
        margin: 0 0 45px 0;
    }

    .hero_bg {
        padding-bottom: 65%;
    }

    .schedule_name h5 {
        font-size: 12px;
    }

    .tab-content-wrapper .table-wrapper ul li h4, .tab-content-wrapper .table-wrapper ul li h5 {
        padding: 0 10px;
    }

    .match-recap-hero .top-content .win-loss h5 {
        width: 25px;
        height: 25px;
        padding: 11px;
        font-size: 13px;
    }
}

@media screen and (min-width: 769px) {
    .team_hero_section .hero-details-wrapper {
        max-width: 60%;
    }
}

@media screen and (min-width: 1441px) {
    .main-hero-heading h1 {
        font: 400 72px/86.4px var(--secondary-font);
    }
}

/* ============================================================
                      END RESPONSIVE HERE
=============================================================== */


/* ============================================================
NEW ADDED
=============================================================== */

.tournament_list .name_tournament h4 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


.teams_list_wrp .teams_list_img a {
    height: 100%;
    width: 100%;
}

.header_dropdown button p {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.schedule_list .schedule_name h5 {
    width: 100%;
}

.schedule_list .schedule_name h5 a {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}


.match_recap_score {
    font: var(--h5);
    font-weight: 500;
}

.match_recap_score {
    color: var(--color1);
}

.match_recap_score h5 {
    font-weight: 600;
    color: var(--color3);
    margin-right: 10px;
}

/* Sport Navigation Dropdown Styles */
.sport-nav-item {
    position: relative;
}

.sport-submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    min-width: 200px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    border-radius: 4px;
    z-index: 1000;
}

.sport-nav-item:hover .sport-submenu {
    display: block;
    padding-left: 0;
}

.sport-submenu li {
    display: block;
}

.sport-submenu li a {
    color: #333 !important;
    padding: 10px 15px !important; 
    display: block;
    white-space: nowrap;
    transition: background-color 0.3s, color 0.3s;
    font-size: 14px;
    background: #fff;
}

.sport-submenu li a:hover {
    background-color: #ED1B24;
    color: #fff !important; /* White text on red background */
}

/* Adjust the main sport nav item to show dropdown indicator */
.sport-nav-item > a {
    position: relative;
    padding-right: 20px !important;
}

.sport-nav-item > a::after {
    content: '';
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid currentColor;
}

/* Restore the player rank and number styles */
.tab-content-wrapper .table-wrapper ul li .player-rank,
.tab-content-wrapper .table-wrapper ul li .player-num {
    font-size: 14px;
    text-align: center;
}

/* Lineup Table Styles */
.tab-content-wrapper .table-wrapper ul {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
}

.tab-content-wrapper .table-wrapper ul li {
    display: grid;
    grid-template-columns: 120px 1fr 1fr;
    padding: 15px 20px;
    align-items: center;
}

.tab-content-wrapper .table-wrapper ul li.table-head {
    background: #f5f5f5;
}

.tab-content-wrapper .table-wrapper ul li:not(:last-child) {
    border-bottom: 1px solid #eee;
}

.tab-content-wrapper .table-wrapper ul li:nth-child(odd):not(.table-head) {
    background: #fafafa;
}

.tab-content-wrapper .table-wrapper ul li h4 {
    font-size: 14px;
    color: #333;
    font-weight: 500;
    margin: 0;
}

.tab-content-wrapper .table-wrapper ul li h5 {
    font-size: 12px;
    color: #666;
    font-weight: 600;
    text-transform: uppercase;
    margin: 0;
}

.tab-content-wrapper .table-wrapper ul li .player-name {
    padding-right: 15px;
}

.tab-content-wrapper .table-wrapper ul li .player-name h4 {
    margin-bottom: 4px;
}

.tab-content-wrapper .table-wrapper ul li .player-rank {
    color: #666;
    font-size: 12px;
    font-weight: normal;
}

/* Responsive adjustments */
@media screen and (max-width: 768px) {
    .tab-content-wrapper .table-wrapper ul li {
        grid-template-columns: 100px 1fr 1fr;
        padding: 12px 15px;
    }
    
    .tab-content-wrapper .table-wrapper ul li h4 {
        font-size: 13px;
    }
    
    .tab-content-wrapper .table-wrapper ul li h5 {
        font-size: 11px;
    }
}

/* Tennis Lineup Table Styles */
.lineup-table .table-wrapper ul {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
}

.lineup-table .table-wrapper ul li {
    display: grid;
    grid-template-columns: 120px repeat(5, 1fr);
    padding: 15px 20px;
    align-items: start;
    gap: 10px;
}

.lineup-table .table-wrapper ul li.table-head {
    background: #f5f5f5;
    border-bottom: 1px solid #eee;
}

.lineup-table .table-wrapper ul li:not(:last-child) {
    border-bottom: 1px solid #eee;
}

.lineup-table .table-wrapper ul li:nth-child(odd):not(.table-head) {
    background: #fafafa;
}

.lineup-table .table-wrapper ul li h4 {
    font-size: 14px;
    color: #333;
    font-weight: 500;
    margin: 0;
}

.lineup-table .table-wrapper ul li h5 {
    font-size: 12px;
    color: #666;
    font-weight: 600;
    text-transform: uppercase;
    margin: 0;
}

.lineup-table .table-wrapper ul li .player-name {
    padding-right: 15px;
}

.lineup-table .table-wrapper ul li .player-name.doubles {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.lineup-table .table-wrapper ul li .player-name h4 {
    margin-bottom: 0;
}

.lineup-table .table-wrapper ul li .player-rank {
    color: #666;
    font-size: 12px;
    font-weight: normal;
}

/* Responsive adjustments */
@media screen and (max-width: 991px) {
    .lineup-table .table-wrapper ul li {
        grid-template-columns: 100px repeat(5, 1fr);
        padding: 12px 15px;
        font-size: 13px;
    }
    
    .lineup-table .table-wrapper ul li h4 {
        font-size: 13px;
    }
    
    .lineup-table .table-wrapper ul li h5 {
        font-size: 11px;
    }
}

@media screen and (max-width: 768px) {
    .lineup-grid {
        font-size: 14px;
        margin: 15px 0;
        box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    }
    
    .lineup-grid, 
    .lineup-grid tbody, 
    .lineup-grid tr, 
    .lineup-grid td {
        display: block;
        width: 100%;
    }
    
    .lineup-grid tr {
        margin-bottom: 20px;
        border: 1px solid #dee2e6;
        border-radius: 8px;
        overflow: hidden;
    }
    
    .lineup-grid thead {
        display: none;
    }
    
    .lineup-grid td {
        padding: 12px 15px;
        border-bottom: 1px solid #dee2e6;
        display: flex;
        align-items: baseline;
    }
    
    .lineup-grid td:first-child {
        background: #f8f9fa;
        font-size: 16px;
        font-weight: 600;
        color: #212529;
        border-bottom: 2px solid #dee2e6;
    }
    
    /* Force display of mobile labels */
    .lineup-grid td .mobile-label {
        display: inline-block !important;
        min-width: 85px;
        flex-shrink: 0;
    }
    
    .lineup-grid td .doubles-pair {
        margin-top: 0;
        flex: 1;
    }
}

@media screen and (max-width: 480px) {
    .tab-content-wrapper {
        padding: 12px;
    }
    
    .lineup-grid td .mobile-label {
        font-size: 12px;
        min-width: 80px;
    }
}

.mobile-label {
    display: none;
    color: #495057;
    font-weight: 600;
    font-size: 13px;
    margin-right: 8px;
}

.tab-content-wrapper {
    padding: 20px;
    background: #f8f9fa;
    border-radius: 12px;
}

.table-wrapper.lineup-table {
    background: white;
    border-radius: 8px;
    padding: 1px;
}

.lineup-grid {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: white;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    margin: 20px 0;
    overflow: hidden;
}

.lineup-grid thead {
    background: #f8f9fa;
}

.lineup-grid th {
    padding: 16px;
    text-align: left;
    font-weight: 600;
    color: #495057;
    border-bottom: 2px solid #dee2e6;
    text-transform: uppercase;
    font-size: 14px;
}

.lineup-grid td {
    padding: 14px 16px;
    border-bottom: 1px solid #dee2e6;
    color: #212529;
}

.lineup-grid tbody tr:nth-child(even) {
    background: #f8f9fa;
}

.lineup-grid tbody tr:hover {
    background: #f2f4f6;
}

.doubles-pair {
    line-height: 1.6;
    color: #495057;
}

.lineup-grid tbody tr:last-child td {
    border-bottom: none;
}

.lineup-grid td:first-child {
    font-weight: 600;
    color: #212529;
}