/*-----------------------------------------------------------------------------------
Copyright (c) 2026
Theme Name:  -
Theme URI:   -
Description: -
Author:      - Adem Duran -
Author URI:  - https: //ademduran.com -  https://bionluk.com/adeemdrn - @frontend.adem -
Version:     - 1.02.1 -

-----------------------------------------------------------------------------------*/
@import url('__root.css');
@import url('__responsive.css');
@import url('../font/font.css');

body {
       font-family: var(--font_sans) !important;
       font-size: calc(var(--font_size) * 0.8) !important;
       line-height: var(--leading_normal) !important;
       font-weight: var(--font_normal) !important;
       color: var(--color_text) !important;
       background-color: var(--color_white) !important;
       overflow-x: hidden !important;
       -webkit-font-smoothing: antialiased;
       -moz-osx-font-smoothing: grayscale;
       opacity: 0;
       transition: opacity 0.25s ease;
}

/*==================================================
===| [Preloader] CSS
===================================================*/
body.css-loaded {
       opacity: 1;
}

body:not(.css-loaded) * {
       animation: none !important;
       transition: none !important;
}

body.css-loaded #preloader {
       pointer-events: none;
}

#preloader {
       position: fixed;
       inset: 0;
       z-index: 9999;
       background: var(--color_white, #fff);
       display: flex;
       align-items: center;
       justify-content: center;
       transition: opacity .4s ease, visibility .4s ease;
}

#preloader.hide {
       opacity: 0;
       visibility: hidden;
}

.preloader__inner {
       text-align: center;
}

.preloader__inner .logo {
       display: block;
       font-size: calc(var(--font_size, 16px) * 1.2);
       letter-spacing: 4px;
       color: var(--color_primary, #333);
       margin-bottom: calc(var(--base_spacing, 16px) * 0.7);
       font-weight: var(--font_semibold, 600);
}

.preloader__inner .bar {
       width: 100%;
       height: 3px;
       background: rgba(216, 216, 216, 0.425);
       overflow: hidden;
       border-radius: var(--radius_sm, 4px);
}

.preloader__inner .bar span {
       display: block;
       width: 40%;
       height: 100%;
       background: var(--color_primary, #333);
       animation: loading 1.2s infinite ease-in-out;
}

@keyframes loading {
       0% {
              transform: translateX(-100%);
       }

       100% {
              transform: translateX(250%);
       }
}

/*==================================================
===| [Input Style] CSS
===================================================*/
.form-control,
.form-select {
       border-radius: var(--radius_sm) !important;
       border: 1px solid var(--color_border2) !important;
       font-size: calc(var(--font_size)*.8) !important;
       font-weight: var(--font_semibold) !important;
       transition: border-color var(--transition_lg), color var(--transition_lg);
       color: var(--color_secondary) !important;
}

.form-control:focus,
.form-select:focus {
       border-color: var(--color_primary) !important;
       box-shadow: 0 0 0 4px #e8593c14 !important;
}

.form-floating>label,
.form-select>label {
       color: var(--color_text) !important;
       font-weight: var(--font_medium);
}

/*==================================================
===| [Link Style] CSS
===================================================*/
.theme__btn {
       position: relative;
       display: inline;
}

.theme__btn .btn__link {
       padding: calc(var(--base_spacing) * 1) calc(var(--base_spacing) * 1.6);
       color: var(--color_white);
       text-decoration: none;
       letter-spacing: 2px;
       background-color: var(--color_primary);
       border-radius: var(--radius_sm);
       display: inline-flex;
       align-items: center;
       font-weight: var(--font_semibold);
       gap: 15px;
       border: 0.2px solid transparent;
       transition: background-color var(--transition_lg), border-color var(--transition_lg);
}

.theme__btn .btn__link.btn__secondary {
       color: var(--color_primary);
       background-color: var(--color_bg2);
       transition: background-color var(--transition_lg);
}

.theme__btn .btn__link.btn__secondary:hover {
       background-color: var(--color_secondary);
}

.theme__btn .btn__link:hover {
       background-color: var(--color_secondary);
       border-color: #e8593ca3;
}

.theme__btn .btn__link .icons {
       margin-top: -2px;
       display: block;
       width: 20px;
       height: 20px;
       background-color: var(--color_white);
       border-radius: var(--radius_full);
       justify-content: center;
       align-items: center;
       display: flex;
       flex-shrink: 0;
}

.theme__btn .btn__link.btn__secondary .icons {
       background-color: var(--color_primary);
}

.theme__btn .btn__link.btn__secondary .icons svg {
       color: var(--color_white);
}

.theme__btn .btn__link .icons svg {
       color: var(--color_primary);
}

/*==================================================
===| [Sticky Menu] CSS
===================================================*/
.sticky__menu {
       position: fixed;
       top: 0;
       left: 0;
       width: 100%;
       z-index: 100;
       box-shadow: var(--shadow_sm);
       animation: stickyIn var(--transition_lg);
}

.sticky__menu::before {
       content: "";
       position: absolute;
       inset: 0;
       background: var(--color_bg);
       backdrop-filter: blur(15px);
       -webkit-backdrop-filter: blur(15px);
       z-index: -1;
       transition: background var(--transition_lg);
}

@keyframes stickyIn {
       from {
              opacity: 0;
              transform: translateY(-15px);
       }

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

.bg__wrapper {
       position: absolute;
       inset: 0;
       overflow: hidden;
}

.bg__wrapper img {
       position: absolute;
       top: 50%;
       left: 50%;
       width: 95%;
       height: auto;
       transform: translate(-50%, -50%);
       opacity: 0.01;
}

section>.container,
section>.content,
section>*:not(.bg__wrapper) {
       position: relative;
       z-index: 2;
}

.cls-1 {
       opacity: .9;
}

.cls-2 {
       stroke-width: .6px;
}

.cls-2,
.cls-3,
.cls-4,
.cls-5,
.cls-6,
.cls-7,
.cls-8,
.cls-9,
.cls-10 {
       fill: none;
}

.cls-2,
.cls-3,
.cls-4,
.cls-6,
.cls-7,
.cls-8,
.cls-9,
.cls-10 {
       stroke: #f4f1e8;
       stroke-linecap: round;
       stroke-linejoin: round;
}

.cls-3 {
       stroke-width: 5.5px;
}

.cls-4 {
       stroke-width: 5.5px;
}

.cls-6 {
       stroke-width: 2px;
}

.cls-7 {
       stroke-width: 5.5px;
}

.cls-8 {
       stroke-width: 5.5px;
}

.cls-9 {
       stroke-width: 5.5px;
}

.cls-10 {
       stroke-width: 5.5px;
}

/*==================================================
===| [Top Header] CSS
===================================================*/
.top__header {
       background-color: var(--color_primary);
       color: var(--color_white);
       font-size: calc(var(--font_size)* .7);
       font-weight: var(--font_semibold);
       overflow: hidden;
}

.top__header .glide__slide {
       text-align: center;
       padding: 8px 16px;
       white-space: nowrap;
}

.top__header .glide__slide--active {
       opacity: 1;
}


/*==================================================
===| [Header ] CSS
===================================================*/
.header .navbar {
       background-color: var(--color_secondary);
       border-bottom: 1px solid var(--color_border);
}

.header .navbar .offcanvas-body .nav-link {
       color: var(--color_white);
       font-weight: var(--font_semibold);
       font-size: calc(var(--font_size)* .9);
       position: relative;
       display: inline;
}

.header .navbar .offcanvas-body .nav-link.active::before {
       width: 100%;
       height: 1px;
       background-color: var(--color_primary);
       position: absolute;
       left: 0;
       bottom: -2px;
       content: "";
}

.header .navbar .offcanvas-body .nav-link::before {
       width: 0%;
       height: 1.3px;
       background-color: var(--color_primary);
       position: absolute;
       left: 0;
       bottom: -2px;
       content: "";
       transition: width var(--transition_lg);
}

.header .navbar .offcanvas-body .nav-link.color__warning {
       color: #f0c040;
}

.header .navbar .offcanvas-body .nav-link:hover::before {
       width: 100%;
}

.header .navbar .navbar-brand img {
       width: 100px;
       height: 84px;
}

.header .lang__drop,
.header .navbar-toggler {
       color: var(--color_white);
       font-weight: var(--font_semibold);
       font-size: calc(var(--font_size)* .8);
}

/*==================================================
===| [Banner Wrapper] CSS
===================================================*/
.banner__wrapper {
       background-color: var(--color_secondary);
       padding: calc(var(--base_spacing)* 8) 0;
       border-bottom: 1px solid var(--color_border);
}

.banner__wrapper .head__info {
       background-color: #f0c1404c;
       padding: calc(var(--base_spacing)* .2) calc(var(--base_spacing)* .4);
       display: inline-block;
       text-align: center;
       border-radius: var(--radius_sm);
       border: 1px solid var(--color_border);
}

.banner__wrapper .head__info span {
       color: #f0c040;
       font-size: calc(var(--font_size)* .7);
       text-transform: uppercase;
       font-weight: var(--font_medium);
}

.banner__wrapper .large__title h1 {
       color: var(--color_white);
       font-size: calc(var(--font_size)* 5);
       line-height: var(--leading_none);
       margin: calc(var(--base_spacing)* 1) 0;
       font-weight: var(--font_bold);
}

.banner__wrapper .large__title strong {
       color: var(--color_primary);
       letter-spacing: 1px;
}

.banner__wrapper .head__desc p {
       color: var(--color_white);
       font-size: calc(var(--font_size)* 1);
}

.banner__wrapper .time__second {
       padding: calc(var(--base_spacing)* 2.5);
       background-color: var(--color_accent);
       border: 1px solid var(--color_border);
       border-radius: var(--radius_lg);
}

.banner__wrapper .time__second .card__head strong {
       font-size: calc(var(--font_size)* 1.2);
       color: #f0c040;
       font-weight: var(--font_semibold);
       font-style: italic;
}

.banner__wrapper .time__second .pulse__text {
       background-color: var(--color_bg_dark);
       padding: calc(var(--base_spacing)* .2) calc(var(--base_spacing)* .4);
       text-align: center;
       border-radius: var(--radius_sm);
       border: 1px solid var(--color_border2);
}

.banner__wrapper .time__second .pulse__text span {
       color: var(--color_primary);
}

.banner__wrapper .time__second .time__card .card__item {
       background-color: var(--color_secondary);
       color: var(--color_primary);
       font-size: calc(var(--font_size)* 2.3);
       border-radius: var(--radius_md);
       font-weight: var(--font_bold);
       min-width: calc(var(--base_spacing)* 5.5);
       width: 100%;
       height: 100%;
       min-height: calc(var(--base_spacing)* 5);
       border: 1px solid var(--color_border);
       text-align: center;
       display: inline-flex;
       align-items: center;
       justify-content: center;
       font-feature-settings: "tnum";
       font-family: monospace;
       font-variant-numeric: tabular-nums;
}

.banner__wrapper .time__second .time__card .items span {
       color: var(--color_text_light);
       font-weight: var(--font_semibold);
       margin-top: 7px;
       display: block;
}

.banner__wrapper .time__second hr {
       background-color: var(--color_border) !important;
       opacity: .4 !important;
}

.banner__wrapper .time__second .maps__item span {
       color: var(--color_white);
       font-size: calc(var(--font_size)* 1);
       font-weight: var(--font_semibold);
}

.banner__wrapper .time__second .maps__item svg {
       color: var(--color_primary);
}

.banner__wrapper .time__second .bottom__info strong {
       color: var(--color_text_light);
       font-size: calc(var(--font_size)* .8);
}

.banner__wrapper .time__second .bottom__info .category__item {
       width: 40px;
       height: 40px;
       border-radius: var(--radius_md);
       background-color: var(--color_primary);
       justify-content: center;
       align-items: center;
       display: flex;
}

.banner__wrapper .time__second .bottom__info .category__item strong {
       color: var(--color_white);
       font-size: calc(var(--font_size)* 1);
}

.banner__wrapper .time__second .bottom__info span {
       color: var(--color_primary);
       font-size: calc(var(--font_size)* 1);
       font-weight: var(--font_semibold);
       text-decoration: underline;
       font-style: italic;
}

/*==================================================
===| [Steps Wrapper] CSS
===================================================*/
.steps__wrapper {
       background-color: var(--color_bg2);
       padding: calc(var(--base_spacing)* 6) 0;
}

.steps__wrapper .section__title {
       max-width: 800px;
       width: 100%;
       margin-bottom: calc(var(--base_spacing)* 2);
}

.steps__wrapper .section__desc p {
       margin-bottom: 0;
       color: var(--color_text);
       font-size: calc(var(--font_size)* .9);
}

.steps__wrapper .section__title h2 {
       font-size: calc(var(--font_size) * 3.4);
       color: var(--color_secondary);
       font-weight: var(--font_semibold);
       display: grid;
       gap: 5px;
}

.steps__wrapper .section__title strong {
       color: var(--color_primary);
       font-weight: var(--font_semibold);
       font-style: italic;
}

.steps__wrapper .step__item {
       background-color: var(--color_white);
       border-radius: var(--radius_md);
       padding: calc(var(--base_spacing)* 4) calc(var(--base_spacing)* 2);
       box-shadow: var(--shadow_xs);
}

.steps__wrapper .step__item .icons {
       width: calc(var(--base_spacing)* 5);
       height: calc(var(--base_spacing)* 5);
       background-color: var(--color_bg);
       justify-content: center;
       align-items: center;
       display: flex;
       border-radius: var(--radius_md);
       transition: box-shadow var(--transition_lg), transform var(--transition_lg);
}

.steps__wrapper .step__item:hover .icons {
       box-shadow: var(--shadow_xs);
       transform: translateY(-5px);
}

.steps__wrapper .step__item .icons svg {
       width: calc(var(--base_spacing)* 3);
       height: calc(var(--base_spacing)* 3);
       color: var(--color_primary);
}

.steps__wrapper .step__item .steps__title strong {
       margin-bottom: 0;
       color: var(--color_secondary);
       font-size: calc(var(--font_size)* 1.4);
}

.steps__wrapper .step__item .steps__desc p {
       margin-bottom: 0;
       color: var(--color_text);
       font-size: calc(var(--font_size)* .9);
}

.steps__wrapper .step__item .number__info span {
       color: #dfdfdf;
       opacity: .2;
       font-size: calc(var(--font_size)* 6);
       font-weight: var(--font_semibold);
}

.step--primary {
       border-left: 6px solid var(--color_primary);
}

.step--secondary {
       border-left: 6px solid var(--color_secondary);
}

.step--bg {
       border-left: 6px solid #f0c040;
}

.steps__wrapper .list-group-item strong {
       margin-bottom: 0;
       color: var(--color_primary);
       font-size: calc(var(--font_size)* .9);
       width: 50px;
}

.steps__wrapper .list-group-item p {
       margin-bottom: 0;
       color: var(--color_text);
       font-size: calc(var(--font_size)* .9);
}

.steps__wrapper .list-group-item {
       border-color: var(--color_border2) !important;
}

.steps__wrapper .steps__contents {
       background-color: var(--color_white);
       border: 2px solid var(--color_primary);
       width: 150px;
       border-radius: var(--radius_lg);
       justify-content: center;
       align-items: center;
       display: flex;
       height: 50px;
}

.steps__wrapper .steps__contents span {
       color: var(--color_primary);
       font-weight: var(--font_bold);
       font-size: calc(var(--font_size)* .9);
}


/*==================================================
===| [Number Wrapper] CSS
===================================================*/
.number__counter {
       background-color: var(--color_secondary);
       padding: calc(var(--base_spacing)* 5);
}

.number__counter .number__items .title strong {
       margin-bottom: 0;
       color: var(--color_white);
       font-size: calc(var(--font_size)* 3);
       color: var(--color_white);
}

.number__counter .number__items.color_primary .title strong {
       color: var(--color_primary);
}

.number__counter .number__items.color_warning .title strong {
       color: #f0c040;
}


.number__counter .number__items .desc p {
       margin-bottom: 0;
       color: var(--color_white);
       font-size: calc(var(--font_size)* 1);
}

/*==================================================
===| [Match Wrappr] CSS
===================================================*/
.match__wrapper {
       background-color: var(--color_secondary);
       padding: calc(var(--base_spacing)* 5);
}

.match__wrapper .match__head .text__info .title h3 {
       color: var(--color_white);
       font-size: calc(var(--font_size) * 3.4);
       font-weight: var(--font_semibold);
}

.match__wrapper .match__head .text__info .desc p {
       margin-bottom: 0px;
       color: var(--color_text_light);
       font-size: calc(var(--font_size) * .9);
}

.match__wrapper .tab__menu .nav .nav-link {
       color: var(--color_primary);
       background-color: var(--color_white);
       border-radius: var(--radius_sm);
       font-weight: var(--font_semibold);
       transition: background-color var(--transition_lg), color var(--transition_lg);
}

.match__wrapper .tab__menu .nav .nav-link.active {
       background-color: var(--color_primary);
       color: var(--color_white);
}

.match__wrapper .tab__menu .nav .nav-link:hover {
       background-color: var(--color_primary);
       color: var(--color_white);
}

.match__wrapper .match__content {
       margin-top: calc(var(--base_spacing)* 5);
}

.match__wrapper .match__content .match__items {
       background-color: var(--color_accent);
       border-radius: var(--radius_md);
       padding: calc(var(--base_spacing)* 2) calc(var(--base_spacing)* 2);
       box-shadow: var(--shadow_xs);
       border: 1px solid var(--color_border2);
       transition: box-shadow var(--transition_lg);
}

.match__wrapper .match__content .match__items:hover {
       box-shadow: var(--shadow_md);
}

.match__wrapper .match__content .match__items .start__content .badge {
       font-size: calc(var(--font_size) * .9);
       margin-bottom: 5px;
}

.match__wrapper .match__content .match__items .start__content .title strong,
.match__wrapper .match__content .match__items .start__content .title span {
       font-size: calc(var(--font_size) * 1.5);
       color: var(--color_white);
}

.match__wrapper .match__content .match__items .start__content .title span {
       color: var(--color_primary);
       font-weight: var(--font_bold);
}

.match__wrapper .match__content .match__items .start__content .maps svg {
       color: var(--color_primary);
}

.match__wrapper .match__content .match__items .start__content .maps span {
       font-size: calc(var(--font_size) * .9);
       color: var(--color_text_light);
       font-weight: var(--font_medium);
}

.match__wrapper .match__content .match__items .start__content .match__feature .items {
       text-align: center;
       display: inline;
       flex-shrink: 1;
}

.match__wrapper .match__content .match__items .start__content .match__feature .items span {
       font-size: calc(var(--font_size) * .7);
       color: var(--color_text_light);
       font-weight: var(--font_medium);
}

.match__wrapper .match__content .match__items .start__content .match__feature .icon {
       width: calc(var(--base_spacing) * 3);
       height: calc(var(--base_spacing) * 2.7);
       background-color: var(--color_secondary);
       color: var(--color_white);
       justify-content: center;
       align-items: center;
       display: flex;
       border-radius: var(--radius_md);
}

.match__wrapper .match__content .match__items .end__content .price__number strong {
       font-size: calc(var(--font_size) * 1.8);
       color: var(--color_primary);
       margin-bottom: 0;
}

.match__wrapper .match__content .match__items .end__content .price__number span {
       font-size: calc(var(--font_size) * .8);
       color: var(--color_white);
       font-weight: var(--font_medium);
}

.match__wrapper .bottom__link a {
       font-size: calc(var(--font_size) * 1);
       color: var(--color_primary);
}

.match__wrapper .text__search {
       width: 100% !important;
       max-width: 650px;
}

/*==================================================
===| [MVP Card] CSS
===================================================*/
.mvp__card {
       background-color: var(--color_secondary);
       padding: calc(var(--base_spacing)* 5) 0;
}

.mvp__card .mvp__head {
       margin-bottom: calc(var(--base_spacing)* 4);
}

.mvp__card .mvp__head .text__info .title h3 {
       color: var(--color_white);
       font-size: calc(var(--font_size) * 3.4);
       font-weight: var(--font_semibold);
}

.mvp__card .mvp__head .text__info .title strong {
       color: var(--color_primary);
       font-weight: var(--font_semibold);
}

.mvp__card .mvp__head .text__info .desc p {
       margin-bottom: 0px;
       color: var(--color_text_light);
       font-size: calc(var(--font_size) * .9);
}

.mvp__card .mvp-card {
       border-radius: var(--radius_lg);
       overflow: hidden;
       position: relative;
       min-height: 200px;
       display: flex;
       flex-direction: column;
       justify-content: flex-end;
       padding: calc(var(--base_spacing)* 1);
}

.mvp__card .card-blue {
       background-color: #0C447C;
}

.mvp__card .card-dark {
       background-color: #1a1a2e;
}

.mvp__card .card-amber {
       background-color: #633806;
}

.mvp__card .mvp-badge {
       display: inline-block;
       background-color: #EF9F27;
       color: var(--color_white);
       font-size: calc(var(--font_size)* .8);
       font-weight: 700;
       padding: calc(var(--base_spacing)* .4) calc(var(--base_spacing)* .7);
       border-radius: 20px;
       letter-spacing: 0.5px;
}

.mvp__card .mvp-date {
       font-size: calc(var(--font_size)* .9);
       color: rgba(255, 255, 255, 0.812);
}

.mvp__card .mvp-league {
       font-size: calc(var(--font_size)* .9);
       color: rgba(255, 255, 255, 0.812);
}

.mvp__card .mvp-name {
       font-size: calc(var(--font_size)* 1.3);
       font-weight: 700;
       color: var(--color_white);
       text-transform: uppercase;
       letter-spacing: 0.5px;
       margin: 0;
}

.mvp__card .mvp-stats {
       font-size: 12px;
       color: #EF9F27;
       font-weight: 600;
       margin: 0;
}

.mvp__card .mvp-number {
       position: absolute;
       bottom: 14px;
       right: 18px;
       font-size: 52px;
       font-weight: 900;
       color: rgba(255, 255, 255, 0.055);
       line-height: 1;
       pointer-events: none;
}

/*==================================================
===| [Spor Card ] CSS
===================================================*/
.sport__card {
       padding: calc(var(--base_spacing)* 5) 0;
       background: radial-gradient(ellipse at left center, #1a1919 0%, var(--color_secondary) 60%);
}

.sport__card .player-card {
       background-color: var(--color_accent);
       border: 2px solid #f0c040;
       border-radius: 20px;
       overflow: hidden;
       width: 300px;
       margin: 0 auto;
       transform: rotate(-4deg);
       transition: transform var(--transition_lg);
}

.sport__card .player-card:hover {
       transform: rotate(0deg);
}

.sport__card .player-card img {
       width: 100%;
       height: 220px;
       object-fit: cover;
       object-position: top;
       filter: grayscale(100%);
       display: block;
}

.sport__card .player-card-body {
       padding: 12px 14px 14px;
       background-color: var(--color_accent);
}

.sport__card .player-card-name {
       font-size: calc(var(--font_size)* 1.7);
       font-weight: var(--font_semibold);
       color: var(--color_white);
       text-transform: uppercase;
       letter-spacing: 0.5px;
       margin: 0 0 4px;
}

.sport__card .overall-badge {
       background-color: #f0c040;
       color: var(--color_accent);
       font-size: calc(var(--font_size)* .6);
       font-weight: var(--font_bold);
       padding: calc(var(--base_spacing)* .4) calc(var(--base_spacing)* .7);
       border-radius: var(--radius_md);
}

.sport__card .player-stats {
       display: flex;
       gap: 6px;
       margin-top: 10px;
}

.sport__card .stat-box {
       background-color: var(--color_secondary);
       border-radius: var(--radius_md);
       padding: 6px 10px;
       text-align: center;
       flex: 1;
}

.sport__card .stat-label {
       font-size: calc(var(--font_size)*.7);
       color: var(--);
       text-transform: uppercase;
       letter-spacing: 0.5px;
       display: block;
}

.sport__card .stat-value {
       font-size: 16px;
       font-weight: 700;
       color: #fff;
       display: block;
       line-height: 1.2;
}

.sport__card .skill-section {
       margin-top: 12px;
}

.sport__card .skill-label {
       font-size: 9px;
       color: rgba(255, 255, 255, 0.4);
       text-transform: uppercase;
       letter-spacing: 0.5px;
       margin-bottom: 5px;
}

.sport__card .skill-bar-bg {
       background-color: #2a2a2a;
       border-radius: 4px;
       height: 5px;
}

.sport__card .skill-bar-fill {
       background-color: #d4a017;
       height: 5px;
       border-radius: 4px;
       width: 75%;
}

.sport__card .section-title {
       color: var(--color_white);
       font-size: calc(var(--font_size) * 3.4);
       font-weight: var(--font_semibold);
}

.sport__card .section-title span {
       color: var(--color_primary);
       font-style: italic;
}

.sport__card .section-desc p {
       color: var(--color_text_light);
       font-size: calc(var(--font_size)* 1);
       line-height: 1.7;
       margin: 20px 0 24px;
}

.sport__card .feature-list {
       list-style: none;
       padding: 0;
       margin: 0 0 32px;
}

.sport__card .feature-list li {
       display: flex;
       align-items: center;
       gap: 10px;
       font-size: calc(var(--font_size)*.8);
       font-weight: var(--font_medium);
       color: var(--color_white);
       margin-bottom: 12px;
}

.sport__card .check-icon {
       width: 22px;
       height: 22px;
       border-radius: 50%;
       border: 2px solid #d4a017;
       display: flex;
       align-items: center;
       justify-content: center;
       flex-shrink: 0;
}

.sport__card .check-icon svg {
       width: 12px;
       height: 12px;
}

/*==================================================
===| [Comment  Wrapper] CSS
===================================================*/
.review__wrapper {
       padding: calc(var(--base_spacing)* 5) 0;
       background-color: var(--color_secondary);
}

.review__wrapper .review__head .text__info .title h3 {
       color: var(--color_white);
       font-size: calc(var(--font_size) * 3.4);
       font-weight: var(--font_semibold);
}

.review__wrapper .review__head {
       margin-bottom: calc(var(--base_spacing) * 5);
}

.review__wrapper .review__head .text__info .title strong {
       color: var(--color_primary);
       font-weight: var(--font_semibold);
}

.review__wrapper .review-card {
       background-color: var(--color_accent);
       border-radius: var(--radius_md);
       padding: 28px 24px;
       height: 100%;
       position: relative;
       border-left: 3px solid transparent;
}

.review__wrapper .review-card.accent-red {
       border-left-color: var(--color_primary);
}

.review__wrapper .review-card.accent-gold {
       border-left-color: #f0c040;
}

.review__wrapper .review-card.accent-white {
       border-left-color: var(--color_white);
}

.review__wrapper .stars {
       color: #f0c040;
       font-size: 20px;
       letter-spacing: 2px;
       margin-bottom: 16px;
}

.review__wrapper .star-empty {
       color: var(--color_text_light);
}

.review__wrapper .review-text {
       font-size: 14px;
       color: var(--color_text_light);
       line-height: 1.7;
       font-style: italic;
       margin-bottom: 24px;
}

.review__wrapper .reviewer-avatar {
       width: 42px;
       height: 42px;
       border-radius: 8px;
       background-color: var(--color_secondary);
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: calc(var(--font_size)*1);
       font-weight: var(--font_bold);
       color: var(--color_white);
       flex-shrink: 0;
}

.review__wrapper .reviewer-name {
       font-size: calc(var(--font_size)*1);
       font-weight: var(--font_bold);
       color: var(--color_white);
       margin: 0;
}

.review__wrapper .reviewer-role {
       font-size: calc(var(--font_size)* .7);
       color: var(--color_text_light);
       text-transform: uppercase;
       letter-spacing: 0.8px;
       margin: 0;
}

/*==================================================
===| [Insta  Wrapper] CSS
===================================================*/
.insta__wrapper {
       background-color: var(--color_secondary);
       padding: calc(var(--base_spacing)* 5) 0;
}

.insta__wrapper .insta__head {
       margin-bottom: calc(var(--base_spacing)* 4);
}

.insta__wrapper .insta__head .text__info .title h3 {
       color: var(--color_white);
       font-size: calc(var(--font_size) * 3.4);
       font-weight: var(--font_semibold);
}

.insta__wrapper .insta__head .text__info .title strong {
       color: var(--color_primary);
       font-weight: var(--font_semibold);
}

.insta__wrapper .insta__head .text__info .desc p {
       margin-bottom: 0px;
       color: var(--color_text_light);
       font-size: calc(var(--font_size) * .9);
}

.insta__wrapper .insta-card {
       background: var(--color_accent);
       border-radius: var(--radius_md);
       overflow: hidden;
       transition: transform var(--transition_lg);
}

.insta__wrapper .insta-card:hover {
       transform: translateY(-6px);
}

.insta__wrapper .insta-card__media {
       position: relative;
       overflow: hidden;
       transition: transform var(--transition_lg);
}

.insta__wrapper .insta-card__media img {
       width: 100%;
       display: block;
       transition: transform var(--transition_lg);
}

.insta__wrapper .insta-card:hover img {
       transform: scale(1.05);
}

.insta__wrapper .insta-card__overlay {
       position: absolute;
       inset: 0;
       background: rgba(0, 0, 0, 0.658);
       opacity: 0;
       display: flex;
       align-items: center;
       justify-content: center;
       transition: transform var(--transition_lg), opacity var(--transition_lg);
}

.insta__wrapper .insta-card:hover .insta-card__overlay {
       opacity: 1;
}

.insta__wrapper .insta-card__stats {
       color: var(--color_white);
       display: flex;
       gap: 20px;
       font-size: calc(var(--font_size)* 1);
       font-weight: var(--font_semibold);
}

.insta__wrapper .insta-card__content {
       padding: 15px;
}

.insta__wrapper .insta-card__user {
       display: flex;
       align-items: center;
       gap: 10px;
       margin-bottom: 8px;
       color: var(--color_text_light);
}

.insta__wrapper .insta-card__user img {
       width: 32px;
       height: 32px;
       border-radius: 50%;
}

.insta__wrapper .insta-card__caption {
       font-size: calc(var(--font_size)*1);
       color: var(--color_text_light);
       margin-bottom: 10px;
}

.insta__wrapper .insta-card__link {
       font-size: 13px;
       font-weight: 600;
       text-decoration: none;
       color: var(--color_primary);
}

/*==================================================
===| [Faqs Wrapper] CSS
===================================================*/
.faqs__wrapper .faqs__head {
       margin-bottom: calc(var(--base_spacing)* 5);
}

.faqs__wrapper .faqs__head .text__info .title h3 {
       color: var(--color_secondary);
       font-size: calc(var(--font_size) * 3.4);
       font-weight: var(--font_semibold);
}

.faqs__wrapper .faqs__head .text__info .title strong {
       color: var(--color_primary);
       font-weight: var(--font_semibold);
}

.faqs__wrapper .faqs__head .text__info .desc p {
       margin-bottom: 0px;
       color: var(--color_text);
       font-size: calc(var(--font_size) * .9);
}

.faqs__wrapper .faqs__items {
       padding: calc(var(--base_spacing) * 3);
       background-color: var(--color_bg2);
       border: 1px solid var(--color_border2);
       border-radius: var(--radius_lg);
       transition: transform var(--transition_md);
}

.faqs__wrapper .faqs__items:hover {
       transform: translateY(-5px);
}

.faqs__wrapper .faqs__items .head__title {
       border-bottom: 1px solid var(--color_border2);
       padding-bottom: 20px;
       margin-bottom: 20px;
       ;
}

.faqs__wrapper .faqs__items .head__title strong {
       color: var(--color_primary);
       font-weight: var(--font_semibold);
       font-size: calc(var(--font_size) * 1.1);
}

.faqs__wrapper .faqs__items .head__title .icons svg {
       color: var(--color_secondary);
}

.faqs__wrapper .faqs__items .faqs__info p {
       margin-bottom: 0px;
       color: var(--color_text);
       font-size: calc(var(--font_size) * .9);
}

/*==================================================
===| [CTA Wrapper] CSS
===================================================*/
.cta__wrapper {
       background-color: var(--color_secondary);
       padding: calc(var(--base_spacing)* 10) 0;
       border-bottom: 1px solid var(--color_border);
}

.cta__wrapper .head__info {
       background-color: var(--color_bg_dark);
       padding: calc(var(--base_spacing)* .2) calc(var(--base_spacing)* .4);
       display: inline-block;
       text-align: center;
       border-radius: var(--radius_sm);
       border: 1px solid var(--color_border2);
}

.cta__wrapper .head__info span {
       color: var(--color_primary);
       font-size: calc(var(--font_size)* .7);
       text-transform: uppercase;
       font-weight: var(--font_medium);
}

.cta__wrapper .head__title h5 {
       color: var(--color_white);
       font-size: calc(var(--font_size) * 5);
       font-weight: var(--font_semibold);
}

.cta__wrapper .head__title strong {
       color: var(--color_primary);
       font-weight: var(--font_semibold);
}

.cta__wrapper .cta__desc p {
       margin-bottom: 0px;
       color: var(--color_text_light);
       font-size: calc(var(--font_size) * 1);
}

/*==================================================
===| [Footer] CSS
===================================================*/
.footer {
       background: var(--color_secondary);
       color: var(--color_white);
       position: relative;
       padding: calc(var(--base_spacing)* 6) 0;
}

.footer .row {
       row-gap: 56px;
       margin-bottom: 56px;
}

.footer__logo img {
       width: 100px;
       height: 85px;
       transition: opacity .25s ease, transform .25s ease;
}


.footer__text p {
       color: var(--color_text_light);
       font-size: 14px;
       line-height: 1.75;
       margin-top: 14px;
       max-width: 340px;
}

.footer strong {
       font-size: calc(var(--font_size) * 1);
       letter-spacing: 2px;
       text-transform: uppercase;
       color: var(--color_primary);
       margin-bottom: 20px;
       display: block;
}

.footer .nav {
       gap: 10px;
}

.footer .nav-link {
       color: var(--color_text_light);
       font-size: 14px;
       padding: 4px 0;
       text-decoration: none;
       display: inline-block;
       transition: color .2s ease, transform .2s ease;
}

.footer .nav-link:hover {
       color: var(--color_white);
       transform: translateX(4px);
}

.footer .nav-link.disabled {
       opacity: 0.25;
       pointer-events: none;
}

.footer-contact {
       list-style: none;
       padding: 0;
       margin: 0;
       display: flex;
       flex-direction: column;
       gap: 14px;
}

.footer-contact a {
       display: flex;
       align-items: flex-start;
       gap: 12px;
       text-decoration: none;
       color: var(--color_text_light);
       font-size: 14px;
       line-height: 1.55;
       transition: color .2s ease, transform .2s ease;
}

.footer-contact a:hover {
       color: var(--color_white);
       transform: translateX(4px);
}

.footer-contact .icon {
       width: 34px;
       height: 34px;
       flex: 0 0 34px;
       display: flex;
       align-items: center;
       justify-content: center;
       background: rgba(255, 255, 255, 0.05);
       border-radius: 10px;
}

.footer-contact .icon svg {
       width: 16px;
       height: 16px;
       display: block;
}

.footer-contact span:last-child {
       flex: 1;
       word-break: break-word;
}

.footer-social {
       display: flex;
       gap: 16px;
       margin-top: 18px;
       flex-wrap: wrap;
}

.footer-social a {
       font-size: 12.5px;
       letter-spacing: 0.5px;
       color: var(--color_text_light);
       text-decoration: none;
       transition: color .2s ease, transform .2s ease;
}

.footer-social a:hover {
       color: var(--color_white);
       transform: translateY(-1px);
}

.footer__bottm {
       padding-top: 28px;
       border-top: 1px solid rgba(255, 255, 255, 0.08);
       text-align: center;
}

.footer-credit {
       margin: 0;
       font-size: 13px;
       line-height: 1.6;
       color: rgba(255, 255, 255, 0.55);
}

.footer-credit a {
       color: rgba(255, 255, 255, 0.75);
       text-decoration: none;
       transition: color .2s ease;
}

.footer-credit a:hover {
       color: #fff;
}

.footer-credit small {
       opacity: 0.8;
}

@media (max-width: 992px) {
       .footer {
              padding: 80px 0 40px;
       }

       .footer .row {
              row-gap: 40px;
              margin-bottom: 40px;
       }

       .footer__text p {
              max-width: 100%;
       }
}

/*==================================================
===| [Page Header] CSS
===================================================*/
.page__section {
       background-color: var(--color_secondary);
       padding: calc(var(--base_spacing)* 6) 0;
}

.page__section .breadcrumb .breadcrumb-item {
       font-size: calc(var(--font_size)* 1);
}

.page__section .breadcrumb .breadcrumb-item a,
.breadcrumb-item+.breadcrumb-item::before {
       color: var(--color_text_light) !important;
}

.page__section .breadcrumb .breadcrumb-item.active {
       color: var(--color_primary);
}

.page__section .head__content h2 {
       color: var(--color_primary);
       font-size: calc(var(--font_size) * 5);
       font-weight: var(--font_semibold);
}

.page__section .head__content p {
       margin-bottom: 0px;
       color: var(--color_text_light);
       font-size: calc(var(--font_size) * .9);
}

.page__section .active__match {
       padding: calc(var(--base_spacing) * 2.1);
       background-color: var(--color_accent);
       border: 1px solid var(--color_border);
       border-radius: var(--radius_lg);
}

.page__section .active__match .item__match strong {
       color: var(--color_white);
       font-size: calc(var(--font_size)* 1.5);
}

.page__section .active__match .item__match span {
       margin-bottom: 0px;
       color: var(--color_text_light);
       font-size: calc(var(--font_size) * .9);
}

.page__section .head__info {
       background-color: var(--color_bg_dark);
       padding: calc(var(--base_spacing)* .2) calc(var(--base_spacing)* .4);
       display: inline-block;
       text-align: center;
       border-radius: var(--radius_sm);
       border: 1px solid var(--color_border2);
}

.page__section .head__info span {
       color: var(--color_primary);
       font-size: calc(var(--font_size)* .9);
       text-transform: uppercase;
       font-weight: var(--font_medium);
}

.page__section .head__info svg {
       color: var(--color_primary);
}

.page__section .maps {
       color: var(--color_warning);
       font-size: calc(var(--font_size)* .9);
}

/*==================================================
===| [Statistics Wrapper] CSS
===================================================*/
.statistics__wrapper {
       background-color: var(--color_bg2);
       padding: calc(var(--base_spacing) * 6) 0;
}

.statistics__wrapper .section__title {
       width: 100%;
       margin-bottom: calc(var(--base_spacing)* 5);
}

.statistics__wrapper .section__title h2 {
       font-size: calc(var(--font_size) * 3.4);
       color: var(--color_secondary);
       font-weight: var(--font_semibold);
       gap: 5px;
}

.statistics__wrapper .section__title strong {
       color: var(--color_primary);
       font-weight: var(--font_semibold);
       font-style: italic;
}

.statistics__wrapper .card .number__item {
       width: 40px;
       height: 40px;
       background-color: var(--color_white);
       box-shadow: var(--shadow_sm);
       border-radius: var(--radius_full);
       justify-content: center;
       align-items: center;
       display: flex;
}

.statistics__wrapper .card .number__item span {
       color: var(--color_secondary);
       font-size: calc(var(--font_size)* 1.2);
       font-weight: var(--font_bold);
}

.statistics__wrapper .card {
       border-color: var(--color_border2);
       border-radius: var(--radius_lg);
       padding: calc(var(--base_spacing)* 2.5) calc(var(--base_spacing)* 1);
}

.statistics__wrapper .card.champion {
       border-color: var(--color_border2);
       border-radius: var(--radius_lg);
       background-color: var(--color_secondary);
       padding: calc(var(--base_spacing)* 3) calc(var(--base_spacing)* 1);
       height: 400px;
}

.statistics__wrapper .card .name__char {
       width: 80px;
       height: 80px;
       box-shadow: var(--shadow_sm);
       border-radius: var(--radius_full);
       justify-content: center;
       align-items: center;
       display: flex;
}

.statistics__wrapper .card.champion .name__char {
       background-color: var(--color_primary);
}

.statistics__wrapper .card .name__char strong {
       color: var(--color_text);
       font-size: calc(var(--font_size)* 1.4);
}

.statistics__wrapper .card.champion .name__char strong {
       color: var(--color_white);
       font-size: calc(var(--font_size)* 1.5);
}

.statistics__wrapper .card .sport__name strong {
       color: var(--color_secondary);
       font-size: calc(var(--font_size)* 1.4);
}

.statistics__wrapper .card.champion .sport__name strong {
       color: var(--color_white);
       font-size: calc(var(--font_size)* 1.5);
}

.statistics__wrapper .card .sport__name span {
       color: var(--color_text_light);
       font-size: calc(var(--font_size)* .9);
}

.statistics__wrapper .card .sport__statistics strong {
       color: var(--color_primary);
       font-size: calc(var(--font_size)* 1.4);
}

.statistics__wrapper .card.champion .sport__statistics strong {
       color: var(--color_primary);
       font-size: calc(var(--font_size)* 1.5);
}

.statistics__wrapper .card .sport__statistics span {
       color: var(--color_text_light);
       font-size: calc(var(--font_size)* .9);
}

.legent.statistics__wrapper .card hr {
       border-color: var(--color_border2) !important;
       width: 100%;
}

.legent.statistics__wrapper .card .name__char,
.record.statistics__wrapper .card .name__char {
       transition: border var(--transition_lg);
       border: 2px solid transparent;
       background-color: var(--color_secondary);
}

.legent.statistics__wrapper .card .name__char strong {
       color: var(--color_white);
}

.legent.statistics__wrapper .card .sport__name span {
       color: var(--color_primary);
       font-weight: var(--font_semibold);
}

.legent.statistics__wrapper .card .sport__statistics strong {
       color: var(--color_secondary);
       font-weight: var(--font_semibold);
}

.legent.statistics__wrapper .card .sport__statistics span {
       color: var(--color_text);
       font-weight: var(--font_medium);
}

.legent.statistics__wrapper .card:hover .name__char,
.record.statistics__wrapper .card:hover .name__char {
       border-color: var(--color_primary) !important;
}

.legent.statistics__wrapper .card {
       transition: transform var(--transition_lg);
}

.legent.statistics__wrapper .card:hover {
       transform: translateY(-7px);
}

.record.statistics__wrapper .name__char svg {
       color: var(--color_white);
}

.record.statistics__wrapper .sport__name span {
       font-size: calc(var(--font_size)* .9);
       color: var(--color_text);
}

.bgd__page.statistics__wrapper {
       background-color: var(--color_secondary);
       padding: calc(var(--base_spacing) * 6) 0;
}

.bgd__page.statistics__wrapper .icons {
       width: 50px;
       height: 50px;
       background-color: var(--color_primary);
       border-radius: var(--radius_md);
       justify-content: center;
       align-items: center;
       display: flex;
       color: var(--color_white)
}

.bgd__page.statistics__wrapper .card {
       background-color: var(--color_accent);
       border-color: var(--color_border);
}

.borders.bgd__page .card-border-1 {
       border-top: 3px solid var(--color_primary);
}

.borders.bgd__page .card-border-2 {
       border-top: 3px solid #f0c040;
}

.borders.bgd__page .card-border-3 {
       border-top: 3px solid var(--color_white);
}

.borders.bgd__page .card-border-4 {
       border-top: 3px solid #f0c040;
}

.bgd__page.statistics__wrapper .card .sport__name strong {
       color: var(--color_white);
}

.bgd__page.statistics__wrapper .card .sport__name span {
       font-size: calc(var(--font_size)* 1);
}

.why__bdg .bgd__page.statistics__wrapper .card .sport__name span {
       font-size: calc(var(--font_size)* .8);
       color: var(--color_text_light);
       font-weight: var(--font_normal);
}

.why__bdg .bgd__page.statistics__wrapper .card {
       background-color: var(--color_secondary);
       height: 100%;
       display: block;
}

/*==================================================
===| [Sticky] CSS
===================================================*/
.statistics__tablo .custom-card {
       background: var(--color_white);
       border-radius: var(--radius_lg);
       overflow: hidden;
       box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.statistics__tablo .table-header {
       background: var(--color_secondary);
       color: var(--color_white);
       padding: calc(var(--base_spacing)* 2) calc(var(--base_spacing)* 2.4);
       font-size: calc(var(--font_size)* .9);
       letter-spacing: 1px;
}

.statistics__tablo .table-row {
       padding: 20px 25px;
       border-bottom: 1px solid var(--color_border);
       align-items: center;
}

.statistics__tablo .custom-card .table-row:last-child {
       border-bottom: none;
}

.statistics__tablo .player-avatar {
       width: 50px;
       height: 50px;
       border-radius: 50%;
       border: 2px solid rgba(255, 90, 60, 0.2);
       display: flex;
       align-items: center;
       justify-content: center;
       color: var(--color_primary);
       font-weight: var(--font_semibold);
       flex-shrink: 0;
}

.statistics__tablo .player-name {
       font-weight: var(--font_semibold);
       font-size: calc(var(--font_size)* .9);
}

.statistics__tablo .player-score {
       color: var(--color_primary);
       font-weight: var(--font_semibold);
       font-size: calc(var(--font_size)*1);
}

.statistics__tablo .progress {
       height: 6px;
       background: var(--color_bg2);
}

.statistics__tablo .progress-bar {
       background: var(--color_success);
}

.statistics__tablo .efficiency {
       font-size: calc(var(--font_size)* .9);
       text-align: start;
       color: var(--color_success);
       font-weight: var(--font_semibold);
}

.statistics__tablo .top-bar {
       display: flex;
       justify-content: space-between;
       align-items: center;
       gap: 20px;
       margin-bottom: calc(var(--base_spacing)* 4);
}

.statistics__tablo .top-bar .page-title {
       font-size: calc(var(--font_size) * 3.4);
       color: var(--color_secondary);
       font-weight: var(--font_semibold);
       display: grid;
       gap: 5px;
}

.statistics__tablo .top-bar .page-title span {
       color: var(--color_primary);
}

.statistics__tablo .top-bar .form-floating {
       min-width: 300px;
}

.statistics__tablo .top-bar .form-floating>.form-control,
.statistics__tablo .top-bar .form-floating>.form-select {
       border: 1px solid var(--color_border2);
}

.statistics__tablo .top-bar .form-floating>.form-control:focus,
.statistics__tablo .top-bar .form-floating>.form-select:focus {
       border-color: var(--color_primary);
       box-shadow: 0 0 0 3px rgba(255, 90, 60, 0.15);
}

@media (max-width: 991px) {
       .statistics__tablo .top-bar {
              flex-direction: column;
              align-items: stretch;
       }

       .statistics__tablo .top-bar>div {
              width: 100%;
       }

       .statistics__tablo .top-bar .d-flex {
              flex-direction: column;
       }

       .statistics__tablo .top-bar .form-floating {
              width: 100%;
       }

       .statistics__tablo .table-header {
              display: none;
       }

       .statistics__tablo .table-row {
              display: flex;
              flex-direction: column;
              align-items: flex-start;
              gap: 12px;
              border-radius: 16px;
              margin-bottom: 15px;
              background: var(--color_white);
              box-shadow: 0 5px 15px rgba(0, 0, 0, 0.04);
       }

       .statistics__tablo .table-row>div {
              width: 100%;
              display: flex;
              justify-content: space-between;
              align-items: center;
              text-align: left !important;
              font-size: 14px;
       }

       .statistics__tablo .table-row>div:first-child {
              justify-content: flex-start;
              gap: 12px;
       }

       .statistics__tablo .table-row>div:not(:first-child)::before {
              content: attr(data-label);
              font-weight: 500;
              color: var(--color_secondary);
       }

       .statistics__tablo .progress {
              width: 50%;
       }
}

/*==================================================
===| [Coaches Wrapper ] CSS
===================================================*/
.coaches__wrapper {
       background-color: var(--color_bg2);
       padding: calc(var(--base_spacing) * 6) 0;
}

.coaches__wrapper .section__title {
       width: 100%;
       margin-bottom: calc(var(--base_spacing)* 5);
}

.coaches__wrapper .section__title h2 {
       font-size: calc(var(--font_size) * 3.4);
       color: var(--color_secondary);
       font-weight: var(--font_semibold);
       gap: 5px;
}

.coaches__wrapper .section__title strong {
       color: var(--color_primary);
       font-weight: var(--font_semibold);
       font-style: italic;
}

.coaches__wrapper .section__title p {
       margin-bottom: 0px;
       color: var(--color_text);
       font-size: calc(var(--font_size) * .9);
}

.coaches__items .coach__card {
       background: var(--color_secondary);
       border-radius: var(--radius_lg);
       padding: 28px;
       position: relative;
       border: 1px solid rgba(255, 255, 255, 0.05);
       transition: border-color var(--transition_lg), transform var(--transition_lg), box-shadow var(--transition_lg);
       height: 100%;
       color: var(--color_white);
}

.coaches__items .coach__card:hover {
       border: 1px solid var(--color_primary);
       transform: translateY(-6px) scale(1.02);
       box-shadow: 0 10px 40px rgba(255, 90, 60, 0.15);
}

.coaches__items .coach__top {
       display: flex;
       justify-content: space-between;
       align-items: center;
       margin-bottom: 20px;
}

.coaches__items .coach__avatar {
       width: 60px;
       height: 60px;
       border-radius: 50%;
       background: #0b0b0b;
       display: flex;
       align-items: center;
       justify-content: center;
       font-weight: 600;
       border: 2px solid rgba(255, 255, 255, 0.08);
       transition: all .3s;
}

.coaches__items .coach__card:hover .coach__avatar,
.coaches__items .coach__card.active .coach__avatar {
       border-color: var(--color_primary);
       color: var(--color_primary);
}

.coaches__items .coach__rating {
       background: rgba(255, 193, 7, 0.1);
       color: var(--color_warning);
       padding: 5px 10px;
       border-radius: var(--radius_full);
       font-weight: 600;
}

.coaches__items h4 {
       font-size: calc(var(--font_size)* .9);
       margin-bottom: 4px;
       font-weight: 600;
}

.coaches__items .coach__match {
       font-size: calc(var(--font_size)* .9);
       color: var(--color_text_light);
}

.coaches__items .coach__line {
       height: 1px;
       background: rgba(255, 255, 255, 0.08);
       margin: 20px 0;
}

.coaches__items .coach__bottom {
       display: flex;
       justify-content: space-between;
       align-items: center;
}

.coaches__items .coach__bottom span {
       font-size: calc(var(--font_size)* .9);
       color: var(--color_text_light);
       letter-spacing: .5px;
}

.coaches__items .coach__bottom strong {
       font-size: calc(var(--font_size)* 1.4);
       color: var(--color_primary);
}

/*==================================================
===| [Voting Wrapper] CSS
===================================================*/
.voting__wrapper {
       background-color: var(--color_secondary);
       padding: calc(var(--base_spacing) * 6) 0;
}

.voting__wrapper .head__title h5 {
       font-size: calc(var(--font_size) * 3.4);
       color: var(--color_white);
       font-weight: var(--font_semibold);
       display: grid;
       gap: 5px;
}

.voting__wrapper .head__title strong {
       color: var(--color_primary);
       font-weight: var(--font_semibold);
       font-style: italic;
}

.voting__wrapper .head__desc p {
       margin-bottom: 0px;
       color: var(--color_text_light);
       font-size: calc(var(--font_size) * 1.1);
}

.voting__wrapper .voting__list .voting__item .icons {
       width: 55px;
       height: 55px;
       background-color: var(--color_bg_dark);
       justify-content: center;
       align-items: center;
       display: flex;
       border-radius: var(--radius_lg);
}

.voting__wrapper .voting__list .voting__item .icons svg {
       color: var(--color_white);
}

.voting__wrapper .voting__list .voting__item .content__item strong {
       font-size: calc(var(--font_size)* 1.1);
       color: var(--color_primary);
}

.voting__wrapper .voting__list .voting__item .content__item span {
       font-size: calc(var(--font_size)* .9);
       color: var(--color_text_light);
}

.voting__wrapper .vite__card {
       padding: calc(var(--base_spacing) * 2.5);
       background-color: var(--color_accent);
       border: 1px solid var(--color_border);
       border-radius: var(--radius_lg);
}

.voting__wrapper .vite__card .content__text span {
       font-size: calc(var(--font_size)* .9);
       color: var(--color_primary);
}

.voting__wrapper .vite__card .content__text strong {
       font-size: calc(var(--font_size)* 1.3);
       color: var(--color_white);
}

.voting__wrapper .btn-check {
       position: absolute;
       opacity: 0;
       pointer-events: none;
}

.voting__wrapper .vote__list {
       display: flex;
       flex-direction: column;
       gap: 14px;
}

.voting__wrapper .vote__item {
       display: flex;
       justify-content: space-between;
       align-items: center;
       padding: 18px 20px;
       border-radius: 16px;
       background: var(--color_secondary);
       border: 1px solid rgba(255, 255, 255, 0.06);
       cursor: pointer;
       transition: .25s ease;
}

.voting__wrapper .vote__left {
       display: flex;
       align-items: center;
       gap: 12px;
}

.voting__wrapper .vote__avatar {
       width: 42px;
       height: 42px;
       border-radius: 50%;
       background: rgba(255, 90, 60, 0.15);
       color: var(--color_primary);
       display: flex;
       align-items: center;
       justify-content: center;
       font-weight: 600;
       transition: .25s ease;
}

.voting__wrapper .vote__name {
       font-weight: 600;
       color: var(--color_white);
}

.voting__wrapper .vote__right {
       color: var(--color_primary);
       font-weight: 600;
}

.voting__wrapper .vote__item:hover {
       border-color: var(--color_primary);
}

.voting__wrapper .btn-check:checked+.vote__item {
       border-color: var(--color_primary);
       box-shadow: 0 0 0 2px rgba(255, 90, 60, 0.15);
}

.voting__wrapper .btn-check:checked+.vote__item .vote__avatar {
       background: var(--color_primary);
       color: var(--color_white);
}

.voting__wrapper .alert__info small {
       font-size: calc(var(--font_size)* .9) !important;
}

/*==================================================
===| [Sticky] CSS
===================================================*/
.gallery__wrapper .gallery__filters {
       display: flex;
       align-items: center;
       gap: 6px;
       flex-wrap: wrap;
       margin-bottom: calc(var(--base_spacing)* 3);
}

.gallery__wrapper .gallery__filters button {
       color: var(--color_primary);
       background-color: var(--color_bg);
       border-radius: var(--radius_sm);
       font-weight: var(--font_semibold);
       border: 1px solid var(--color_border2);
       padding: calc(var(--base_spacing)* .6) calc(var(--base_spacing)* 1);
       box-shadow: none;
       transition: border-color var(--transition_lg);
}

.gallery__wrapper .gallery__filters button:hover {
       border-color: var(--color_primary);
}

.gallery__wrapper .gallery__card.is-hidden {
       display: none;
}

.gallery__wrapper .gallery__filters button.is-active {
       background-color: var(--color_primary);
       color: var(--color_white);
}

.gallery__wrapper .gallery__grid {
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       gap: 16px;
}

@media (max-width: 991px) {
       .gallery__wrapper .gallery__grid {
              grid-template-columns: repeat(2, 1fr);
       }
}

@media (max-width: 575px) {
       .gallery__wrapper .gallery__grid {
              grid-template-columns: 1fr;
       }
}

.gallery__wrapper .gallery__card {
       position: relative;
       border-radius: var(--radius_lg);
       overflow: hidden;
       background: var(--color_primary);
       box-shadow: var(--shadow_sm);
       cursor: pointer;
       display: block;
       text-decoration: none;
       aspect-ratio: 16 / 10;
       transform: translateY(0);
       transition:
              transform var(--transition_lg),
              box-shadow var(--transition_lg),
              opacity var(--transition_md);
}

.gallery__wrapper .gallery__card:hover {
       transform: translateY(-4px);
       box-shadow: var(--shadow_lg);
}

.gallery__wrapper .gallery__card__thumb {
       position: absolute;
       inset: 0;
       width: 100%;
       height: 100%;
       object-fit: cover;
       display: block;
       transition: transform 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94), filter 400ms ease;
       filter: brightness(.88);
}

.gallery__wrapper .gallery__card:hover>.gallery__card__thumb {
       transform: scale(1.04);
       filter: brightness(.7);
}

.gallery__wrapper .gallery__card__overlay {
       position: absolute;
       inset: 0;
       background: linear-gradient(to top,
                     rgba(0, 0, 0, .72) 0%,
                     rgba(0, 0, 0, .18) 50%,
                     rgba(0, 0, 0, 0) 100%);
       z-index: 1;
}

.gallery__wrapper .gallery__card__content {
       position: absolute;
       bottom: 0;
       left: 0;
       right: 0;
       padding: 20px 18px 18px;
       z-index: 2;
}

.gallery__wrapper .gallery__card__label {
       display: inline-block;
       font-size: calc(var(--font_size)* .8);
       font-weight: 700;
       letter-spacing: .12em;
       text-transform: uppercase;
       color: var(--color_primary);
       margin-bottom: 5px;
}

.gallery__wrapper .gallery__card[data-type="video"] .gallery__card__label {
       color: var(--color_primary);
}

.gallery__wrapper .gallery__card__title {
       font-size: calc(var(--font_size)* 1);
       font-weight: var(--font_semibold);
       color: var(--color_white);
       margin: 0;
}

.gallery__wrapper .gallery__card__play {
       position: absolute;
       top: 14px;
       right: 14px;
       z-index: 3;
       width: 40px;
       height: 40px;
       border-radius: 50%;
       background: var(--color_primary);
       display: flex;
       align-items: center;
       justify-content: center;
       transition: transform 250ms ease, background 250ms ease;
       pointer-events: none;
}

.gallery__wrapper .gallery__card:hover .gallery__card__play {
       transform: scale(1.12);
       background: var(--color_primary);
}

.gallery__wrapper .gallery__card__play svg {
       width: 14px;
       height: 14px;
       fill: var(--color_white);
       margin-left: 2px;
}

.gallery__wrapper .gallery__card__photo-icon {
       position: absolute;
       top: 14px;
       right: 14px;
       z-index: 3;
       width: 34px;
       height: 34px;
       border-radius: 50%;
       background: rgba(255, 255, 255, .15);
       backdrop-filter: blur(6px);
       -webkit-backdrop-filter: blur(6px);
       display: flex;
       align-items: center;
       justify-content: center;
       transition: transform 250ms ease, background 250ms ease;
       pointer-events: none;
}

.gallery__wrapper .gallery__card:hover .gallery__card__photo-icon {
       transform: scale(1.1);
       background: rgba(255, 255, 255, .28);
}

.gallery__wrapper .gallery__card__photo-icon svg {
       width: 14px;
       height: 14px;
       stroke: var(--color_white);
       fill: none;
       stroke-width: 2;
       stroke-linecap: round;
       stroke-linejoin: round;
}

.gallery__wrapper .gallery__empty {
       grid-column: 1 / -1;
       text-align: center;
       padding: 64px 0;
       color: var(--color_text);
       font-size: 14px;
       display: none;
}

.gallery__wrapper .gallery__empty.is-visible {
       display: block;
}

.gallery__wrapper .fancybox__toolbar {
       background: linear-gradient(to bottom, rgba(0, 0, 0, .6), transparent);
}

.gallery__wrapper .fancybox__caption {
       font-size: 15px;
       letter-spacing: .06em;
       text-transform: uppercase;
       color: rgba(255, 255, 255, .8);
}

/*==================================================
===| [Login Wrapper] CSS
===================================================*/
.login__wrapper {
       padding: calc(var(--base_spacing) * 6) 0;
}

.login__card {
       border-radius: var(--radius_2xl);
       padding: clamp(32px, 5vw, 48px);
}

.login__logo {
       display: flex;
       justify-content: center;
       margin-bottom: 28px;
}

.login__logo img {
       width: 200px;
       height: 170px;
}

.login__password-wrapper {
       position: relative;
}

.login__forgot {
       position: absolute;
       top: 50%;
       right: 14px;
       transform: translateY(-50%);
       font-size: calc(var(--font_size) * .75);
       font-weight: var(--font_bold);
       color: var(--color_primary);
       text-decoration: none;
       z-index: 5;
       transition: opacity var(--transition_md);
}

.login__forgot:hover {
       opacity: .75;
       color: var(--color_primary);
}

.login__register {
       text-align: center;
       font-size: calc(var(--font_size) * .85);
       color: var(--color_secondary);
       margin: 0;
}

.login__register a {
       color: var(--color_primary);
       font-weight: var(--font_bold);
       text-decoration: none;
       transition: opacity var(--transition_md);
}

.login__register a:hover {
       opacity: .75;
}

.login__form .form-control:-webkit-autofill,
.login__form .form-control:-webkit-autofill:focus {
       -webkit-box-shadow: 0 0 0 1000px var(--color_secondary) inset !important;
       -webkit-text-fill-color: var(--color_white) !important;
       border-color: var(--color_primary) !important;
}

.login__wrapper .alert strong {
       font-size: calc(var(--font_size)* .9);
}

.login__wrapper .alert p {
       font-size: calc(var(--font_size)* .8);
       font-weight: var(--font_medium);
       margin-bottom: 0;
}


/*==================================================
===| [Contact Wrapper] CSS
===================================================*/
.contact__wrapper .head__title h5 {
       font-size: calc(var(--font_size) * 2);
       color: var(--color_secondary);
       font-weight: var(--font_semibold);
}

.contact__wrapper .head__title strong {
       color: var(--color_primary);
       font-weight: var(--font_semibold);
       font-style: italic;
}

.contact__wrapper .head__desc p {
       margin-bottom: 0px;
       color: var(--color_text_light);
       font-size: calc(var(--font_size) * 1);
}

.contact__wrapper .contact__list .contact__item .icons {
       width: 55px;
       height: 55px;
       background-color: var(--color_primary);
       justify-content: center;
       align-items: center;
       display: flex;
       border-radius: var(--radius_lg);
}

.contact__wrapper .contact__list .contact__item .icons svg {
       color: var(--color_white);
}

.contact__wrapper .contact__list .contact__item .content__item strong {
       font-size: calc(var(--font_size)* .9);
       color: var(--color_accent);
}

.contact__wrapper .contact__list .contact__item .content__item span {
       font-size: calc(var(--font_size)* .8);
       color: var(--color_text_light);
}

.contact__wrapper .social__title strong {
       font-size: calc(var(--font_size)* 1.1);
       color: var(--color_secondary);
}

.contact__wrapper .form__card {
       background-color: var(--color_bg2);
       padding: calc(var(--base_spacing) * 4);
       border-radius: var(--radius_lg);
       border: 1px solid var(--color_border2);
}

/*==================================================
===| [Sticky] CSS
===================================================*/
.checkout__steps {
       display: flex;
       align-items: center;
       margin-bottom: clamp(24px, 3vw, 40px);
}

.checkout__steps .step__item {
       display: flex;
       align-items: center;
       gap: 10px;
}

.checkout__steps .step__item .step__circle {
       width: 38px;
       height: 38px;
       border-radius: var(--radius_full);
       display: flex;
       align-items: center;
       justify-content: center;
       font-family: var(--font_sans);
       font-size: 13px;
       font-weight: var(--font_black);
       flex-shrink: 0;
       transition: all var(--transition_md);
}

.checkout__steps .step__item .step__circle--active {
       background: var(--color_primary);
       color: var(--color_white);
       box-shadow: 0 0 0 4px var(--color_border2);
}

.checkout__steps .step__item .step__circle--done {
       background: var(--color_primary);
       color: var(--color_white);
       opacity: 0.5;
}

.checkout__steps .step__item .step__circle--inactive {
       background: transparent;
       border: 1.5px solid #ddd8d4;
       color: var(--color_text_light);
}

.checkout__steps .step__item .step__label {
       font-family: var(--font_sans);
       font-size: 11px;
       font-weight: var(--font_bold);
       letter-spacing: 0.09em;
       text-transform: uppercase;
}

.checkout__steps .step__item .step__label--active {
       color: var(--color_black);
}

.checkout__steps .step__item .step__label--inactive {
       color: var(--color_text_light);
}

.checkout__steps .step__divider {
       flex: 1;
       height: 1.5px;
       background: #e4deda;
       margin: 0 14px;
       max-width: 80px;
}

.checkout__form__card {
       background: var(--color_white);
       border-radius: var(--radius_2xl);
       padding: clamp(24px, 3vw, 40px);
       box-shadow: var(--shadow_md);
}


.checkout__form__card .form__card__heading {
       margin-bottom: 6px;
}

.checkout__form__card .form__card__heading .form__card__title {
       font-family: var(--font_sans);
       font-size: clamp(20px, 2.5vw, 28px);
       font-weight: var(--font_black);
       color: var(--color_black);
       text-transform: uppercase;
       letter-spacing: -0.01em;
       line-height: var(--leading_tight);
       margin: 0;
}

.checkout__form__card .form__card__heading .form__card__title span {
       color: var(--color_primary);
       font-style: italic;
}

.checkout__form__card .form__card__subtitle {
       font-size: 13px;
       font-weight: var(--font_normal);
       color: var(--color_text);
       margin-bottom: 2rem;
       margin-top: 6px;
}

.checkout__summary__card {
       background: var(--color_secondary);
       border-radius: var(--radius_2xl);
       padding: 1.75rem;
       box-shadow: var(--shadow_xl);
       position: relative;
       overflow: hidden;
}

.checkout__summary__card::before,
.checkout__summary__card::after {
       content: '';
       position: absolute;
       border-radius: var(--radius_full);
       border: 1px solid rgba(232, 89, 60, 0.1);
       pointer-events: none;
}

.checkout__summary__card::before {
       width: 220px;
       height: 220px;
       top: -80px;
       right: -80px;
}

.checkout__summary__card::after {
       width: 140px;
       height: 140px;
       top: -40px;
       right: -40px;
       border-color: rgba(232, 89, 60, 0.07);
}

.checkout__summary__card .summary__card__title {
       font-family: var(--font_sans);
       font-size: 15px;
       font-weight: var(--font_black);
       text-transform: uppercase;
       letter-spacing: 0.06em;
       color: var(--color_white);
       margin-bottom: 1.5rem;
}

.checkout__summary__card .summary__card__title span {
       color: var(--color_primary);
       font-style: italic;
}

.checkout__summary__card .summary__event {
       display: flex;
       align-items: center;
       gap: 14px;
       background: var(--color_accent);
       border-radius: var(--radius_lg);
       padding: 14px;
       margin-bottom: 1.5rem;
       border: 1px solid rgba(255, 255, 255, 0.05);
}

.checkout__summary__card .summary__event .event__icon__wrap {
       width: 46px;
       height: 46px;
       background: rgba(232, 89, 60, 0.18);
       border-radius: var(--radius_md);
       display: flex;
       align-items: center;
       justify-content: center;
       flex-shrink: 0;
}

.checkout__summary__card .summary__event .event__icon__wrap svg {
       width: 22px;
       height: 22px;
       stroke: var(--color_primary);
       fill: none;
       stroke-width: 1.8;
       stroke-linecap: round;
       stroke-linejoin: round;
}

.checkout__summary__card .summary__event .event__info .event__info__date {
       font-size: 12px;
       font-weight: var(--font_black);
       letter-spacing: 0.06em;
       text-transform: uppercase;
       color: var(--color_white);
       margin-bottom: 2px;
}

.checkout__summary__card .summary__event .event__info .event__info__venue {
       font-size: 11px;
       color: var(--color_text_light);
       text-transform: uppercase;
       letter-spacing: 0.04em;
       margin-bottom: 4px;
}

.checkout__summary__card .summary__event .event__info .event__info__cat {
       font-size: 11px;
       font-weight: var(--font_bold);
       color: var(--color_primary);
       text-transform: uppercase;
       letter-spacing: 0.03em;
}

.checkout__summary__card .summary__prices {
       border-top: 1px solid rgba(255, 255, 255, 0.07);
       padding-top: 1rem;
       margin-bottom: 1rem;
}

.checkout__summary__card .summary__prices .price__row {
       display: flex;
       justify-content: space-between;
       align-items: center;
       padding: 7px 0;
}

.checkout__summary__card .summary__prices .price__row .price__label {
       font-size: 11px;
       font-weight: var(--font_semibold);
       letter-spacing: 0.07em;
       text-transform: uppercase;
       color: var(--color_text_light);
}

.checkout__summary__card .summary__prices .price__row .price__value {
       font-size: 14px;
       font-weight: var(--font_bold);
       color: var(--color_white);
}

.checkout__summary__card .summary__prices .price__row .price__value--free {
       color: var(--color_success);
}

.checkout__summary__card .summary__total {
       border-top: 1px solid rgba(255, 255, 255, 0.1);
       padding-top: 1rem;
       display: flex;
       justify-content: space-between;
       align-items: center;
}

.checkout__summary__card .summary__total .total__label {
       font-size: 14px;
       font-weight: var(--font_black);
       letter-spacing: 0.08em;
       text-transform: uppercase;
       color: var(--color_white);
}

.checkout__summary__card .summary__total .total__amount {
       font-size: 28px;
       font-weight: var(--font_black);
       color: var(--color_primary);
       line-height: 1;
}

.checkout__secure__badge {
       background: var(--color_white);
       border-radius: var(--radius_xl);
       padding: 1.25rem 1.5rem;
       margin-top: 1rem;
       box-shadow: var(--shadow_md);
       display: flex;
       gap: 14px;
       align-items: flex-start;
}

.checkout__secure__badge .secure__badge__icon {
       width: 38px;
       height: 38px;
       background: rgba(232, 89, 60, 0.1);
       border-radius: var(--radius_md);
       display: flex;
       align-items: center;
       justify-content: center;
       flex-shrink: 0;
}

.checkout__secure__badge .secure__badge__icon svg {
       width: 18px;
       height: 18px;
       stroke: var(--color_primary);
       fill: none;
       stroke-width: 2;
       stroke-linecap: round;
       stroke-linejoin: round;
}

.checkout__secure__badge .secure__badge__text .secure__badge__title {
       font-size: 11px;
       font-weight: var(--font_black);
       letter-spacing: 0.08em;
       text-transform: uppercase;
       color: var(--color_black);
       margin-bottom: 4px;
}

.checkout__secure__badge .secure__badge__text .secure__badge__desc {
       font-size: 12px;
       font-weight: var(--font_normal);
       color: var(--color_text);
       line-height: var(--leading_relaxed);
       margin: 0;
}

.checkout__form__card .form__divider {
       border: none;
       border-top: 1px solid #f0ece9;
       margin: 1.75rem 0 1.5rem;
}

/*==================================================
===| [Status Wrapper] CSS
===================================================*/
.status__wrapper .status__items {
       padding: calc(var(--base_spacing) * 6) 0;
       box-shadow: var(--shadow_sm);
       border-radius: var(--radius_lg);
}

.status__wrapper .status__items .icons.success {
       width: 90px;
       height: 90px;
       background-color: var(--color_success);
       justify-content: center;
       align-items: center;
       display: flex;
       border-radius: var(--radius_full);
       color: var(--color_white);
}

.status__wrapper .status__items .icons.danger {
       width: 90px;
       height: 90px;
       background-color: var(--color_error);
       justify-content: center;
       align-items: center;
       display: flex;
       border-radius: var(--radius_full);
       color: var(--color_white);
}

.status__wrapper .status__items .head__content h2 {
       color: var(--color_primary);
       font-size: calc(var(--font_size) * 2);
       font-weight: var(--font_semibold);
}

.status__wrapper .status__items .head__content p {
       margin-bottom: 0px;
       color: var(--color_secondary);
       font-size: calc(var(--font_size) * .9);
       padding: 0 calc(var(--base_spacing)* 8);
}


/*==================================================
===| [Alert Banner] CSS
===================================================*/
.alert__ {
       background-color: var(--color_accent);
       padding: calc(var(--base_spacing) * 6) 0;
       border-top: 1px solid var(--color_border);
}

.alert__ strong {
       color: var(--color_primary);
       font-size: calc(var(--font_size) * 1.2);
       font-weight: var(--font_semibold);
       font-style: italic;
}

/*==================================================
===| [Why Bdg] CSS
===================================================*/
.why__bdg {
       background-color: var(--color_accent);
       padding: calc(var(--base_spacing) * 6) 0;
       border-top: 1px solid var(--color_border);
}

.bdg__head .text__info .title h3 {
       color: var(--color_white);
       font-size: calc(var(--font_size) * 3.4);
       font-weight: var(--font_semibold);
}

.bdg__head .text__info .title strong {
       color: var(--color_primary);
       font-weight: var(--font_semibold);
}

.bdg__head .text__info .desc p {
       margin-bottom: 0px;
       color: var(--color_text_light);
       font-size: calc(var(--font_size) * .9);
}

.bdg__head {
       margin-bottom: calc(var(--base_spacing) * 5);
}

.page__detail .page__desc strong,
.page__detail .page__desc h1,
.page__detail .page__desc h2,
.page__detail .page__desc h3,
.page__detail .page__desc h4,
.page__detail .page__desc h5 {
       font-size: calc(var(--font_size)* 1.1);
       font-weight: var(--font_bold);
       color: var(--color_accent);
       margin-bottom: 7px;
       display: block;
}

.page__detail .page__desc p {
       font-size: calc(var(--font_size)* .9);
       font-weight: var(--font_medium);
       color: var(--color_text);
}

/*==================================================
===| [Sticky] CSS
===================================================*/
.ticket-card,
.summary-card {
       background: linear-gradient(180deg, #101010 0%, #090909 100%);
       border-radius: var(--radius_lg);
       border: 1px solid var(--color_border);
       color: var(--color_white);
       overflow: hidden;
       position: relative;
}

.ticket-card {
       padding: 28px;
}

.summary-card {
       padding: 24px;
}

.section-title {
       display: flex;
       align-items: center;
       gap: 12px;
       margin-bottom: 8px;
}

.section-title .icon {
       width: 42px;
       height: 42px;
       border-radius: var(--radius_lg);
       background: rgba(232, 89, 60, 0.12);
       color: var(--color_primary);
       display: flex;
       align-items: center;
       justify-content: center;
}

.event__title {
       color: #f0c040;
}

.section-title .icon svg {
       width: 25px;
       border-radius: 0;
       background-color: transparent;
       height: 25px;
}

.section-title h4 {
       margin: 0;
       font-size: 18px;
       font-weight: 700;
}

.section-desc {
       color: var(--color_text_light);
       font-size: 14px;
       line-height: 1.6;
       margin-bottom: 24px;
}

.inner-box {
       background: linear-gradient(180deg, #111111 0%, #0c0c0c 100%);
       border: 1px solid var(--color_border);
       border-radius: 18px;
       padding: 22px;
       height: 100%;
}

.step-title {
       display: flex;
       align-items: center;
       gap: 10px;
       margin-bottom: 18px;
}

.step-number {
       width: 28px;
       height: 28px;
       border-radius: 50%;
       background: var(--color_primary);
       color: #fff;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 13px;
       font-weight: 700;
}

.step-title h5 {
       margin: 0;
       font-size: 15px;
       font-weight: 700;
}

.custom-select-box {
       background: #141414;
       border: 1px solid var(--color_border2);
       border-radius: var(--radius_lg);
       padding: 14px;
       color: var(--color_white);
}

.player-item {
       display: flex;
       align-items: center;
       justify-content: space-between;
       padding: 14px 0;
       border-bottom: 1px solid var(--color_border);
}

.player-item:last-child {
       border-bottom: 0;
       padding-bottom: 0;
}

.form-control.custom-dark {
       height: 52px;
       border-radius: var(--radius_lg);
       background: #141414;
       border: 1px solid var(--color_border2);
       color: #fff;
}

.form-control.custom-dark::placeholder {
       color: var(--color_text_light);
}

.add-btn {
       width: 52px;
       height: 52px;
       border-radius: var(--radius_lg);
       border: 1px solid var(--color_border2);
       background: transparent;
       color: var(--color_primary);
       font-size: 24px;
}

.info-box {
       background: rgba(255, 255, 255, .03);
       border: 1px solid var(--color_border);
       border-radius: 16px;
       padding: 16px;
       margin-top: 18px;
       color: var(--color_text_light);
       font-size: 14px;
}

.selected-users {
       margin-top: 22px;
       border: 1px solid var(--color_border);
       border-radius: 18px;
       overflow: hidden;
}

.selected-users-header {
       padding: 16px 20px;
       border-bottom: 1px solid var(--color_border);
       display: flex;
       align-items: center;
       justify-content: space-between;
}

.selected-user {
       padding: 18px 20px;
       display: flex;
       align-items: center;
       justify-content: space-between;
}

.avatar-box {
       width: 48px;
       height: 48px;
       border-radius: var(--radius_lg);
       background: rgba(232, 89, 60, 0.15);
       color: var(--color_primary);
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 18px;
}

.continue-btn {
       width: 100%;
       height: 60px;
       border: 0;
       border-radius: 16px;
       background: var(--color_primary);
       color: #fff;
       font-weight: 700;
       font-size: 16px;
       margin-top: 24px;
       transition: .3s;
}

.continue-btn:hover {
       transform: translateY(-2px);
}

.event-box {
       background: rgba(255, 255, 255, .04);
       border: 1px solid var(--color_border);
       border-radius: 18px;
       padding: 18px;
       display: flex;
       gap: 16px;
       margin-bottom: 24px;
}

.calendar-icon {
       width: 60px;
       height: 60px;
       border-radius: 18px;
       background: rgba(232, 89, 60, 0.15);
       color: var(--color_primary);
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 24px;
}

.summary-row {
       display: flex;
       align-items: flex-start;
       justify-content: space-between;
       padding: 18px 0;
       border-bottom: 1px solid var(--color_border);
}

.summary-row:last-child {
       border-bottom: 0;
}

.summary-row h6 {
       margin: 0;
       font-size: 16px;
       font-weight: 600;
}

.summary-row span {
       color: var(--color_text_light);
       font-size: 14px;
}

.price {
       font-size: 20px;
       font-weight: 700;
}

.highlight-box {
       border: 1px solid var(--color_primary);
       border-radius: 18px;
       padding: 18px;
       margin-top: 18px;
       margin-bottom: 18px;
}

.highlight-box h5 {
       color: var(--color_primary);
       margin-bottom: 6px;
       font-weight: 700;
}

.total-box {
       display: flex;
       align-items: center;
       justify-content: space-between;
       margin-top: 12px;
}

.total-box strong {
       font-size: 20px;
}

.warning-box {
       background: var(--color_primary);
       color: #fff;
       border-radius: 18px;
       padding: 24px;
       margin-top: 20px;
}

.warning-box h5 {
       font-weight: 700;
       margin-bottom: 10px;
}

.mini-text {
       color: var(--color_text_light);
       font-size: 13px;
}

@media(max-width: 991px) {

       .ticket-card,
       .summary-card {
              padding: 20px;
       }
}

/*==================================================
===| [Sticky] CSS
===================================================*/