@media (max-width: 1599px) {
    :root {
        --font-54: 50px;
        --font-42: 36px;
        --font-36: 32px;
        --font-30: 30px;
        --font-28: 28px;
        --font-22: 22px;
    }

    /* Match List Page Start */
    .match-content {
        gap: 90px;
        margin-left: auto;
        margin-right: auto;
    }

    .team-player-img {
        width: 161px;
        height: 211px;
    }

    /* Match List Page End */
    /* Matches Detail Page Start */
    .team-big-image {
        height: 220px;
    }

    .match-detail-compare .team .team-logo {
        width: 80px;
        height: 80px;
    }

    .match-vs-logo {
        width: 80px;
        height: 80px;
    }

    /* Matches Detail Page End */

    .tournament-swiper .swiper-slide {
        width: 389px;
    }
}

@media (max-width: 1399px) {
    :root {
        --font-54: 42px;
        --font-42: 34px;
        --font-36: 32px;
        --font-30: 30px;
        --font-28: 28px;
        --font-22: 22px;
        --clip-box: polygon(0% 0%, calc(100% - 40px) 0%, 100% 40px, 100% 100%, 40px 100%, 0% calc(100% - 40px));
        --clip-box-inner: polygon(0% 0%, calc(100% - 20px) 0%, 100% 20px, 100% 100%, 20px 100%, 0% calc(100% - 20px));
    }

    .tournament-card {
        padding: 18px;
    }

    .tournament-list {
        padding: 22px 20px 20px 20px;
    }

    .booking-box-items-list .match-detail-wrap {
        flex-direction: column;
        margin-left: 0;
    }

        .booking-box-items-list .match-detail-wrap .match-detail-box {
            width: 100%;
        }

    .booking-details-control {
        width: 65%;
    }

    .booking-details-actions {
        width: 33%;
        margin-left: 2%;
    }

    .booking-box-items .booking-box-items-list {
        width: 67%;
    }

    .booking-box-items .booking-box-items-info {
        width: 33%;
    }

    /* Match List Page Start */
    .match-content {
        gap: 60px;
    }

    .super-cup-logo {
        max-height: 110px;
    }

    /* Match List Page End */


    /* Matches Detail Page Start */
    .team-big-image {
        height: 220px;
    }

    .match-detail-compare .team .team-logo {
        width: 80px;
        height: 80px;
    }

    .match-vs-logo {
        width: 80px;
        height: 80px;
    }

    .match-detail-compare {
        max-width: 430px;
    }

    /* Matches Detail Page End */

    .tournament-swiper .swiper-slide {
        width: 337px;
    }
}

@media (max-width: 1199px) {
    .tournament-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }


    /* Match List Page Start */
    .match-content {
        gap: 18px;
        margin-bottom: 32px;
    }

    .super-cup-logo {
        max-height: 110px;
    }

    .match-time {
        font-size: var(--font-18);
    }

    .team-player-img {
        width: 141px;
        height: 171px;
    }

    /* Match List Page End */



    /* Matches Detail Page Start */
    .team-big-image {
        height: 220px;
    }

    .match-detail-compare .team .team-logo {
        width: 80px;
        height: 80px;
    }

    .match-vs-logo {
        width: 80px;
        height: 80px;
    }

    .match-detail-compare {
        max-width: 370px;
    }

        .match-detail-compare .team-name {
            font-size: var(--font-18);
        }

    /* Matches Detail Page End */

    .tournament-swiper .swiper-slide {
        width: 434px;
    }
}

@media (max-width: 1290px) {
    body {
        overflow-x: hidden;
    }
}

@media (max-width: 1200px) {
}

@media (max-width: 991px) {
    :root {
        --font-54: 38px;
        --font-42: 28px;
        --font-36: 26px;
        --font-30: 20px;
        --font-28: 18px;
        --font-22: 16px;
        --clip-box: polygon(0% 0%, calc(100% - 40px) 0%, 100% 40px, 100% 100%, 40px 100%, 0% calc(100% - 40px));
        --clip-box-inner: polygon(0% 0%, calc(100% - 20px) 0%, 100% 20px, 100% 100%, 20px 100%, 0% calc(100% - 20px));
    }

    .booking-details-control .match-detail-inner {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    header {
        height: 60px;
    }

    .logo {
        margin-bottom: -44px;
    }

    .dropdown-user .dropdown-trigger {
        font-size: var(--font-14);
        gap: 8px;
    }

    .dropdown-language a {
        color: var(--black) !important;
        font-weight: 600;
        font-size: var(--font-14);
        line-height: normal;
    }

    .dropdown-user .dropdown-menu {
        margin-top: 26px;
        min-width: 170px;
    }

    .dropdown-user .dropdown-item {
        font-size: var(--font-14);
        gap: 8px;
        padding: 8px 12px;
    }

    .dropdown-user .user-icon {
        width: 18px;
        height: 18px;
    }

    .dropdown-user .item-icon {
        width: 18px;
        height: 18px;
    }

    .header-right {
        gap: 14px;
    }

    .dropdown-language .dropdown-toggle {
        gap: 8px;
    }

    .dropdown-language .dropdown-menu {
        min-width: 100px;
    }

    .dropdown-language a {
        padding: 3px 12px;
    }

    .footer-inner {
        flex-wrap: wrap;
        gap: 8px !important;
    }

    .footer .copyright p {
        font-size: var(--font-12);
    }


    /* .copyright, .social-media, .whatsapp-link {
		width: 100%;
	} */

    .whatsapp-link img.img-fluid {
        width: 24px;
        height: auto;
    }

    .whatsapp-link a span {
        font-size: var(--font-12);
    }



    .main-body {
        height: calc(100vh - 60px - 64px);
        height: calc((var(--vh, 1vh) * 100) - 60px - 64px);
    }

    body:has(.stadium-tickets) .main-body {
        height: calc((var(--vh, 1vh) * 100) - 60px) !important;
    }

    .booking-details-control {
        width: 100%
    }

        .booking-details-control .super-logo .super-cup {
            height: 70px;
        }

        .booking-details-control .match-detail-box i {
            min-width: 30px;
            width: 30px;
            height: 30px;
        }

    .booking-box-items-list .match-detail-compare .team-away .team-logo,
    .booking-box-items-list .match-detail-compare .team-home .team-logo {
        height: 40px;
    }

    .booking-box-items-list .match-detail-compare .match-vs-logo .vs-logo {
        height: 40px;
    }

    .booking-box-items-list .match-detail-compare .team {
        flex-wrap: wrap;
    }

    .booking-box-items-list .match-detail-compare .team-name {
        width: 100%;
        display: block;
    }

    .booking-box-items .booking-box-items-list,
    .booking-box-items .booking-box-items-info {
        width: 100%;
    }

    /* Match List Page Start */
    .match-item {
        padding-bottom: 24px;
    }

    .team-name {
        font-size: 16px;
    }

    .match-date {
        font-size: 16px;
    }

    .super-cup-logo {
        max-height: 90px;
    }

    .match-header {
        margin-bottom: 20px;
    }

    .match-list {
        gap: 24px;
    }

    .popup-icon img {
        width: 54px;
        height: 54px;
    }

    .page-title .sub-title {
        font-size: var(--font-14);
    }

    .failed-content li label,
    .failed-content li span {
        font-size: var(--font-14);
    }

    .failed-content li {
        padding: 8px 0;
    }

    .failed-content {
        margin-bottom: 20px;
    }

    .form-box {
        padding: 24px;
    }

    /* Match List Page End */

    .booking-box-items-list .match-detail-wrap {
        margin-top: 0
    }

    /* Matches Detail Page Start */
    .team-big-image {
        height: 180px;
    }

    .match-detail-compare .team .team-logo {
        width: 80px;
        height: 80px;
    }

    .match-vs-logo {
        width: 80px;
        height: 80px;
    }

    .match-detail-compare {
        max-width: 370px;
        gap: 20px;
    }

        .match-detail-compare .team-name {
            font-size: var(--font-18);
        }

    .match-detail-wrap {
        position: relative;
        bottom: auto;
        right: auto;
        max-width: 250px;
        margin-left: auto;
        padding: 30px 0 0 0;
    }

    .match-detail .theme-btn {
        margin-top: 16px;
        /* pointer-events: none; */
    }

    /* Matches Detail Page End */
    .ticket-form > .row {
        row-gap: 12px;
    }

    .match-item:has(.ticket-form) {
        padding-bottom: 18px;
    }

    .tournament-swiper .swiper-slide {
        width: 315px;
    }

    .booking-box-items:after,
    .booking-box-items:before {
        width: auto;
        height: 22px;
        background-repeat: repeat-x;
        background-size: auto 22px;
        left: 0 !important;
        right: 0 !important;
    }

    .booking-box-items:before {
        top: -11px !important;
        bottom: auto !important;
    }

    .booking-box-items::after {
        top: auto !important;
        bottom: 46px !important;
    }

    .booking-box-items .booking-box-items-info:before {
        width: auto;
        height: 22px;
        background-repeat: repeat-x;
        background-size: auto 22px;
        left: 0 !important;
        right: 0 !important;
        top: -11px !important;
        bottom: auto !important;
    }
}

@media (min-width: 768px) {


    .book-ticket-list .match-item .super-cup-img {
        position: absolute;
        right: 40px;
        top: 20px;
    }
}

@media (max-width: 767px) {
    :root {
        --font-54: 36px;
        --font-42: 24px;
        --font-36: 22px;
        --font-30: 20px;
        --font-28: 18px;
        --font-22: 16px;
        --clip-box: polygon(0% 0%, calc(100% - 30px) 0%, 100% 30px, 100% 100%, 30px 100%, 0% calc(100% - 30px));
        --clip-box-inner: polygon(0% 0%, calc(100% - 20px) 0%, 100% 20px, 100% 100%, 20px 100%, 0% calc(100% - 20px));
    }

    .logo > a > img {
        width: auto;
        height: 80px;
    }

    .tournament-grid {
        grid-template-columns: repeat(1, 1fr);
        gap: 18px;
    }

    .main-body {
        padding-bottom: 24px;
        padding-top: 24px;
    }

    .tournament-list {
        padding: 18px;
        width: 100%;
    }

    .tournament-title {
        margin-bottom: 18px;
    }

    .tournament-card {
        padding: 24px 30px;
    }

        .tournament-card .tournament-logo {
            max-width: 166px;
            max-height: 80px;
            height: auto;
            margin-bottom: 24px;
        }

    .booking-box-items-list .match-detail-box {
        font-size: var(--font-14);
    }

    .book-ticket-list .match-content {
        margin-bottom: 6px;
        flex-direction: row
    }

    .cart-info {
        /* flex-direction: column; */
        flex-wrap: wrap;
        gap: 10px;
        /* align-items: flex-start; */
        margin: 16px 0;
    }

        .cart-info .tickets-info {
            /* width: 100%; */
            justify-content: space-between;
        }

    .book-ticket-list .match-item .super-cup-img {
        width: 100%;
        text-align: center;
        margin-bottom: 7px
    }

    .book-ticket-list .match-item .match-divider {
        width: 2px;
        height: 30px;
    }

    /* Match List Page Start */
    .stadium-name {
        font-size: var(--font-12);
    }

    .stadium-icon {
        width: 30px;
        height: 30px;
    }

    .match-content {
        gap: 14px;
        margin-bottom: 12px;
    }

    .booking-box {
        padding: 16px;
    }

    .theme-modal .modal-body {
        padding: 22px 18px;
    }

        .booking-content,
        .theme-modal .modal-body .popup-icon,
        .page-title {
            margin-bottom: 18px;
        }

    .payment-box-item.clip-tournament-box-inner {
        --clip-box-inner: polygon(0% 0%, calc(100% - 12px) 0%, 100% 12px, 100% 100%, 12px 100%, 0% calc(100% - 12px));
    }

    .payment-box-item {
        padding: 12px 14px;
    }

        .payment-box-item.clip-tournament-box-inner > img {
            height: 20px;
        }

    .tickets-info .total-tickets span,
    .tickets-info p {
        font-size: var(--font-14);
    }

    .match-header {
        flex-wrap: wrap;
        gap: 16px;
        margin-bottom: 18px;
    }

    .team-logo {
        width: 28px;
        height: 28px;
        object-fit: contain;
    }

    .match-header .match-title {
        width: 100%;
    }

    .super-cup-logo {
        margin: 0 auto;
        max-height: 56px;
    }

    .team-name {
        font-size: 12px;
    }

    .match-date {
        font-size: 12px;
    }

    .match-time {
        font-size: var(--font-14);
        line-height: normal;
    }

    .match-item {
        padding: 10px;
        padding-bottom: 54px;
    }

    .book-ticket-list .match-item .super-cup-img img {
        max-height: 40px;
        object-fit: contain;
    }

    .match-actions {
        padding-left: 91px;
        justify-content: flex-end !important;
    }

    .team-player-img {
        width: 91px;
        height: 110px;
    }

    .match-divider {
        height: 40px;
    }

    /* Match List Page End */
    /* Matches Detail Page Start */
    .match-detail-compare .team .team-logo {
        width: 38px;
        height: 38px;
    }

    .match-detail-compare .team-name {
        font-size: 12px;
    }

    .match-detail-compare .team {
        gap: 8px;
    }

    .match-vs-logo {
        width: 60px;
        height: 60px;
    }

    .match-detail-wrap {
        max-width: 180px;
    }

    .team-big-image {
        height: 110px;
    }

    .match-detail .theme-btn {
        width: 100%;
        max-width: 180px;
        justify-content: flex-end !important;
        margin-left: auto;
    }


    .match-detail-box {
        font-size: var(--font-12);
        gap: 8px !important;
    }

    .match-detail-wrap {
        padding: 20px 0 0 0;
        gap: 8px;
    }

    .match-detail {
        padding: 30px 20px 10px;
        position: relative;
        z-index: 2;
        clip-path: var(--clip-box-inner);
    }

    .match-list-inner {
        padding: 18px;
    }

    /* Matches Detail Page End */

    .book-ticket-list .match-item {
        padding-bottom: 10px;
    }

    .user-ticket-box {
        min-width: 100%;
        max-width: 100%;
    }

    .fill-ticket-box .match-item {
        padding-bottom: 18px;
    }

    .payment-box {
        margin: 0 auto;
        /* flex-direction: column; */
        align-items: center;
        justify-content: center;
    }

        .payment-box + .theme-btn {
            width: 100% !important;
            text-align: center;
        }

        .payment-box .payment-box-item {
            /* width: 100%; */
        }

    .payment-box-item .btn-link {
        margin-left: auto;
    }

    .tournament-swiper .swiper-slide {
        width: auto;
    }

    .match-seats-row {
        top: -16px;
    }

    .main-body {
        background-image: url(../images/bg-image-mobile.png);
    }

    .swal2-title {
        font-size: 18px !important;
    }

    .match-info {
        min-width: 120px;
    }

    .team-section {
        min-width: 50px;
        gap: 4px;
    }

    .copyright, .social-media, .whatsapp-link {
        width: 100%;
    }

    .main-body {
        height: calc(100vh - 60px - 119px);
        height: calc((var(--vh, 1vh) * 100) - 60px - 119px);
    }

    .copyright p {
        text-align: center
    }

    .user-ticket-box li label {
        font-size: var(--font-12);
    }
}

@media (max-width: 580px) {
    :root {
        --clip-box: polygon(0% 0%, calc(100% - 30px) 0%, 100% 30px, 100% 100%, 30px 100%, 0% calc(100% - 30px));
        --clip-box-inner: polygon(0% 0%, calc(100% - 20px) 0%, 100% 20px, 100% 100%, 20px 100%, 0% calc(100% - 20px));
    }
}

@media (max-width: 460px) {
    .booking-box .theme-btn .cta-button {
        min-width: 240px;
        padding-left: 0;
        padding-right: 0;
    }

    .booking-content ul li span small,
    .booking-content ul li label {
        font-size: var(--font-14);
    }

    .tickets-popup {
        width: 100%;
    }

    .tickets-popup-box .user-ticket-box {
        min-width: 180px;
        max-width: 180px;
    }

    .match-actions + .stadium-info {
        max-width: 190px;
    }

    .payment-box {
        margin: 0 auto;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

        .payment-box + .theme-btn {
            width: 100% !important;
            text-align: center;
        }

        .payment-box .payment-box-item {
            width: 100%;
        }
}

@media (max-width: 419px) {

    .tournament-card .tournament-logo {
        max-width: 120px;
        margin-bottom: 20px;
    }

    .tournament-card {
        padding: 16px 15px;
    }

    .cart-info {
        flex-direction: column;
        flex-wrap: wrap;
        gap: 10px;
        align-items: flex-start;
    }

        .cart-info .tickets-info {
            width: 100%;
            justify-content: space-between;
        }
}