@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700&display=swap');

body {
    font-family: 'Cairo', sans-serif;
    direction: rtl;
    background-color: #F5F5F5;
}

a {
    color: inherit;
    text-decoration: none;
}

p {
    margin-bottom: 0px;
}

.Dlogo {
    padding-right: 30px;
    padding-top: 3px;
}
/* //////////// */
.direction {
    text-align: center;
    padding-bottom: 10px;
}

    .direction button {
        font-family: cursive;
        font-weight: bold;
        /* font-size: 18px; */
        background-color: #ffffff44;
        border: none;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        transition: 0.5s;
        margin: 0 10px;
    }

.DirectionButton {
    font-family: cursive;
    font-weight: bold;
    font-size: 22px;
    background-color: #fff;
    color: #000;
    border: none;
    width: 45px;
    height: 35px;
    border-radius: 50%;
    transition: 0.5s;
    margin: 0 10px;
    display: inline-grid;
    cursor: pointer;
}

.direction button:hover {
    background-color: #ffffff;
}

.item {
    border-radius: 15px;
    width: 340px;
    overflow: hidden;
    transition: 0.5s;
    margin: 1px;
    margin-right: 20px;
    scroll-snap-align: start;
}

#list {
    display: flex;
    width: max-content;
    scrollbar-width: none;
}

#list2 {
    display: flex;
    width: max-content;
    scrollbar-width: none;
}

.list {
    display: flex;
    width: max-content;
    scrollbar-width: none;
}

#formList {
    width: 90%;
    max-width: 100%;
    overflow: auto;
    /* margin: 100px auto 50px; */
    margin-right: 0%;
    /* align-items: center; */
    /*margin-left: 2%; */
    scroll-behavior: smooth;
    scroll-snap-type: both;
    scrollbar-width: none;
}

    #formList::-webkit-scrollbar {
        display: none;
    }

#formList2 {
    width: 90%;
    max-width: 100%;
    overflow: auto;
    /* margin: 100px auto 50px; */
    margin-right: 0%;
    /* align-items: center; */
    /*     margin-left: 2%; */
    scroll-behavior: smooth;
    scroll-snap-type: both;
    scrollbar-width: none;
}

    #formList2::-webkit-scrollbar {
        display: none;
    }

#formList3 {
    width: 90%;
    max-width: 100%;
    overflow: auto;
    /* margin: 100px auto 50px; */
    /*    margin-right: 5%;*/
    /* align-items: center; */
    margin-left: 2%;
    scroll-behavior: smooth;
    scroll-snap-type: both;
    scrollbar-width: none;
}

    #formList3::-webkit-scrollbar {
        display: none;
    }

@media screen and (max-width: 1024px) {
    .item {
        width: calc(33.3vw - 20px);
    }

    .direction {
        display: none;
    }
}

@media screen and (max-width: 768px) {
    .item {
        width: calc(50vw - 20px);
    }

    .direction {
        display: none;
    }
}

/* //////////// */
.carousel-inner .carousel-item-right,
.carousel-inner .carousel-item-left {
    transform: translateX(0);
}

.mainImagesNewsMulti {
    overflow: auto;
    scroll-behavior: smooth;
    scroll-snap-type: both;
    scrollbar-width: none;
}

    .mainImagesNewsMulti::-webkit-scrollbar {
        display: none;
    }

.sliderCrest {
    width: 100%;
}

.bodycontent {
    width: 90%;
    margin: auto;
    margin-top: 40px;
}

.add1 {
    height: 100vh;
    width: 5%;
    background-color: #676767 !important;
    right: 0;
    background-image: url("../images/download.png");
    background-size: cover;
    background-position: center;
}

.add2 {
    height: 100vh;
    width: 5%;
    background-color: #676767 !important;
    left: 0;
    background-image: url("../images/download.png");
    background-size: cover;
    background-position: center;
}

.clubsSlider {
    width: 100%;
    margin-bottom: 40px;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    scroll-behavior: smooth;
    scroll-snap-type: both;
    scrollbar-width: none;
}

    .clubsSlider .col-2 {
        display: inline-block; /* This makes elements sit side by side */
        white-space: normal; /* Allow normal text wrapping inside each column */
        vertical-align: top; /* Align the tops of inline-block elements */
    }

    .clubsSlider::-webkit-scrollbar {
        display: none;
    }

.newsTitleMaxWidth {
    max-width: 80%;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    display: inline-block;
}

.clubSliderItem {
    width: 100px;
    text-align: center;
}

.crestContainer {
    display: flex;
    padding: 20px;
    border-radius: 999999px;
    height: 100px;
    width: 100px;
    border: none !important;
    position: relative;
    align-items: center;
    justify-content: center;
}

.crestContainerNoPadding {
    display: flex;
    background-color: white;
    border-radius: 999999px;
    height: 100px;
    width: 100px;
    border: none !important;
    position: relative;
    align-items: center;
    justify-content: center;
}

.crestContainer::-webkit-scrollbar {
    width: 0px !important;
    display: none !important;
    /* Remove scrollbar space */
    background: transparent !important;
    /* Optional: just make scrollbar invisible */
}

.leagueContainerIconFavs {
    border: 0px solid rgba(0, 0, 0, 0.1);
    width: 120px;
    text-align: center;
    padding-top: 20px;
    padding-bottom: 20px;
    position: relative;
}

.scoreDivInProfile {
    width: 100%;
    padding: 20px;
}

.teamNameInMatch {
    font-weight: 800;
    font-size: 12px;
}

.minMatchDate {
    font-size: 14px;
    color: rgb(81, 80, 80);
}

.editFavContent {
    border-radius: 100px;
    border: 1px solid black;
    background-color: white;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 5px;
    padding-bottom: 5px;
}

.bodyContainer {
    padding-right: 5%;
    padding-left: 5%;
}

.pointTitle {
    color: rgba(52, 64, 84, 1);
    font-size: 20px;
    font-weight: 600;
}

.pointSubTitle {
    color: rgba(166, 171, 181, 1);
}

.actualPoints {
    color: #f6150a;
    font-size: 20px;
    font-weight: 800;
}

/* Start of login and register css*/
.loginDiv {
    background-image: url("../images/bg2.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    padding-bottom: 80px;
    padding-top: 80px;
}

.loginJumbotron {
    width: 60%;
    background-color: white;
    padding: 20px;
    margin: auto;
    border-radius: 10px;
}

.loginThumb {
    width: 3%;
    position: absolute;
    top: 25%;
    right: 8px;
}

.inputWithThumb {
    width: 100%;
    position: relative;
}

.socialDiv {
    padding-top: 20px;
}

.dividerLogin {
    height: 3px;
    width: 100%;
    color: #595959;
}

.socialsSub {
    text-align: center;
    color: #595959;
}

.innerPadding {
    padding-top: 30px;
    width: 80%;
    margin: auto;
    padding-bottom: 30px;
}

.loginTitle {
    color: #000;
    font-size: 35px;
}

.loginSubtitle {
    font-size: 20px;
    color: #8F8F8F;
}

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

.socialsButtonDivInner {
    width: 50%;
    padding-top: 20px;
    padding-bottom: 20px;
}

.facebookButton {
    width: 100%;
    background-color: #1877F2;
    color: white;
    padding-top: 15px;
    padding-bottom: 15px;
    outline: none;
    border: none;
    border-radius: 5px;
    display: block;
    text-align: center;
    text-decoration: none;
}

.saveSettingsButton {
    background-color: #000;
    color: white;
    width: 50%;
    border-radius: 5px;
    margin-top: 20px;
    height: 45px;
}

.googleButton {
    background-color: #dfdede;
    width: 100%;
    color: #000;
    padding-top: 15px;
    padding-bottom: 15px;
    outline: none;
    border: none;
    border-radius: 5px;
    display: block;
    text-align: center;
    text-decoration: none;
}

.socialIconLogin {
    /* width: 5.5%; */
    margin-left: 5px;
}

.loginLabel {
    font-weight: 600;
    font-size: 20px;
}

.loginLabelCustom {
    font-weight: 600;
    font-size: 15px;
    margin-bottom: 15px;
    color: rgba(52, 64, 84, 1);
}

.socialsSettingsDiv {
    margin-top: 30px;
}

.emailInput {
    border: 1px solid #DDDDDD;
    padding: 10px;
    border-radius: 5px;
    width: 100%;
    text-indent: 30px;
}

.passwordInput {
    border: 1px solid #DDDDDD;
    padding: 10px;
    border-radius: 5px;
    width: 100%;
    text-indent: 30px;
}

.formInputDiv {
    margin-top: 15px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 15px;
}

.loginMainButton {
    margin-top: 20px;
    background-color: #f6150a;
    color: white;
    border: none;
    outline: none;
    width: 100%;
    padding: 15px;
    margin-bottom: 20px;
}

.registerFooter {
    text-align: center;
}

.historyTeams {
}

.winStat {
    border: 1px solid #34A853;
    font-size: 14px;
    border-radius: 50%; /* Use 50% to ensure a perfect circle */
    width: 20px;
    height: 20px;
    line-height: 7px; /* Set line height equal to the height of the circle */
    text-align: center;
    color: #34A853;
    display: inline-block; /* Ensures block-level alignment */
}

.drawStat {
    border: 1px solid #CACACA;
    font-size: 14px;
    border-radius: 50%; /* Use 50% to ensure a perfect circle */
    width: 20px;
    height: 20px;
    line-height: 7px; /* Set line height equal to the height of the circle */
    text-align: center;
    display: inline-block; /* Ensures block-level alignment */
    color: #CACACA;
}

.loseStat {
    border: 1px solid #D0021B;
    font-size: 14px;
    border-radius: 50%; /* Use 50% to ensure a perfect circle */
    width: 20px;
    height: 20px;
    line-height: 7px; /* Set line height equal to the height of the circle */
    text-align: center;
    display: inline-block;
    color: #D0021B;
}

.registerSpan {
    text-align: center;
    width: 100%;
    color: #f6150a;
    justify-content: center;
}

.image-container {
    position: relative;
    display: inline-block;
    width: 100%;
}

    .image-container::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%);
        pointer-events: none;
    }

.exclusiveText {
    text-align: center;
}

.exclusive {
    z-index: 2;
    padding: 3px;
    width: 25%;
    text-align: center;
    background-color: #f6150a;
    color: white;
    text-align: center;
    margin-bottom: 10px;
}

.carousel-title {
    gap: 10px;
    position: absolute;
    bottom: 10px;
    display: flex;
    flex-direction: column;
    padding-right: 10px;
    width: 50%;
}

.innerCarouselTitle {
    display: flex;
    color: white;
    z-index: 2;
}

.nav-tabs2 {
    border: none;
}

.nav-link {
    background-color: white;
    padding-left: 5px;
    padding-right: 5px;
    border-radius: 100px;
    margin-left: 0px;
    margin-right: -2px;
    padding-left: 15px;
    padding-right: 15px;
    color: #000;
}

    .nav-link.active {
        background-color: #fff;
        font-weight: bold;
        color: black;
       /* border: 1px solid #f6150a;*/
    }

/* End of login and register css*/

/* Main News Grid*/
.mainNewsGrid {
    display: flex;
    flex-direction: row;
    gap: 10px;
    margin-bottom: 40px;
}

.mainNewsDiv {
    height: 400px;
    background-color: #000000;
    /*background-image: url("../images/salah_image5.jpg");*/
    background-size: cover;
    background-position: center;
    position: relative;
}

.mainNewsDivSideCarousel {
    height: 350px;
    background-color: #000000;
    /*background-image: url("../images/salah_image5.jpg");*/
    background-size: cover;
    background-position: center;
    position: relative;
}

.mainNewsDate {
    color: #8F8F8F;
    font-size: 12px;
    padding-bottom: 7px;
}

.overlay-paragraph {
    position: absolute;
    bottom: 0px;
    right: 0px;
    left: 0px;
    text-shadow: 0 1px black;
    background: rgba(0,0,0,0.4);
    padding: 4px 8px;
    margin-right: 12px;
}

.mainNewsTitle {
    color: white;
    /*width: 80%;*/
    margin-right: 0px;
    font-size: 15px;
}

.sportIcon {
    width: 25px;
}

.innerMainContainer {
    position: absolute;
    bottom: 0px;
    padding-right: 4px;
    padding-bottom: 2px;
}

.overlayAndNews {
    position: absolute;
    background: linear-gradient(transparent, #000);
    height: 100%;
    width: 100% !important;
    right: 0px;
}

.smallNewsDiv {
    width: 20%;
    height: 400px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mainaddDiv {
    width: 25%;
    height: 400px;
    background-color: #000000;
}

.matchesAddDiv {
    background-color: #000;
    width: 100%;
    height: 250px;
}

.newsAndMultimediaHeader {
    margin-top: 20px;
    margin-bottom: 20px;
}

.normalNewsDiv {
    height: 400px;
    /*background-image: url("../images/salahtall.jpeg");*/
    background-size: cover;
    background-position: center;
    position: relative;
}

.innerSmallDiv {
    /*background-image: url("../images/salah.jpg");*/
    background-size: cover;
    background-position: top;
    position: relative;
}

.innerSmallDiv2 {
    /*background-image: url("../images/salah_image2.jpg");*/
    background-size: cover;
    background-position: center;
    position: relative;
}

.orangeCTA {
    background-color: #f6150a;
    padding: 10px;
    outline: none;
    border: none;
    width: 30%;
    color: white;
}

.mainNewsHeader {
    margin-top: 30px;
    margin-bottom: 0px;
}

.mainNewsHeaderWCarousel {
    display: flex;
    justify-content: space-between;
}

#home-tab-pane {
    padding-bottom: 00px;
}

.playerNameOnMap {
    font-size: 11px;
}

.mainNewsHeader2 {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-top: 40px;
    align-items: center;
    padding-bottom: 10px;
}

#myTab {
    margin-right: 0px !important;
    padding-right: 0px !important;
    border: none !important;
}

.customBottomNav {
    width: 100% !important;
}

#myTabContent {
    padding-top: 40px;
}

#myTabContentInMatches {
    padding-top: 5px;
}

.prizesButtonaArrow {
    width: 20px;
}

.ptsNav {
    border-radius: unset;
    background-color: transparent !important;
}

.prizesButton {
    text-align: center;
    background-color: #f6150a;
    border-radius: 100px;
    width: 120px;
    border: none;
    height: 45px;
    color: white;
}

.settingDiv {
    margin-top: 40px;
    text-align: center;
    width: 100%;
}

.pointsCustomDiv {
    display: flex;
    justify-content: space-between;
    background: rgba(255, 247, 239, 1);
    width: 100%;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
    padding-right: 20px;
    margin-top: 30px;
}

.form-check-input:checked {
    background-color: #f6150a !important;
    border-color: #f6150a !important;
    width: 4em;
    height: 30px;
}

.form-switch .form-check-input {
    width: 4em;
    height: 30px;
}

.form-switch {
    margin-top: 50px !important;
}

.leaguesContainer {
    width: 100%;
    margin-bottom: 40px;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    padding-left: 10px;
    padding-right: 10px;
    scroll-behavior: smooth;
    scroll-snap-type: both;
    scrollbar-width: none;
}

    .leaguesContainer .col-2 {
        display: inline-block; /* This makes elements sit side by side */
        white-space: normal; /* Allow normal text wrapping inside each column */
        vertical-align: top; /* Align the tops of inline-block elements */
        width: 160px; /* Set a fixed width for each column; adjust as needed */
        padding-left: 185px;
    }

    .leaguesContainer::-webkit-scrollbar {
        display: none;
    }

.upperVidsDivInVideos {
    width: 100%;
    margin-bottom: 40px;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    padding-left: 10px;
    padding-right: 10px;
    scroll-behavior: smooth;
    scroll-snap-type: both;
    scrollbar-width: none;
}

    .upperVidsDivInVideos .col-3 {
        display: inline-block; /* This makes elements sit side by side */
        white-space: normal; /* Allow normal text wrapping inside each column */
        vertical-align: top; /* Align the tops of inline-block elements */
    }

    .upperVidsDivInVideos::-webkit-scrollbar {
        display: none;
    }

.leaguesDirection {
    text-align: center;
}

    .leaguesDirection button {
        font-family: cursive;
        font-weight: bold;
        background-color: #f6150a;
        color: white;
        border: none;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        transition: 0.5s;
        margin: 0 10px;
    }

        .leaguesDirection button:hover {
            background-color: #ffffff;
            color: black;
        }

.favsDirection {
    text-align: center;
}

    .favsDirection button {
        font-family: cursive;
        font-weight: bold;
        background-color: #f6150a;
        color: white;
        border: none;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        transition: 0.5s;
        margin: 0 10px;
    }

        .favsDirection button:hover {
            background-color: #ffffff;
            color: black;
        }

.leaguesContainerInCarousel {
    display: inline-flex;
    gap: 10px;
    padding: 20px 0;
    white-space: nowrap;
}

.leaguesContainerWrapper {
    overflow-x: auto;
    width: 90%;
    /* white-space: nowrap; */
    margin-bottom: 30px;
    scroll-behavior: smooth;
    scroll-snap-type: both;
    scrollbar-width: none;
}

    .leaguesContainerWrapper::-webkit-scrollbar {
        display: none;
    }

.StandingsButtonsDiv {
    display: flex;
    flex-direction: row;
    gap: 10px;
}

.customFormControlDiv {
    padding-right: 40px;
    padding-top: 10px;
    padding-bottom: 10px;
    background: transparent !important;
    border: 1px solid rgba(208, 213, 221, 1);
}

.changePassLabel {
    margin-bottom: 20px;
}

.settingsFormInputDiv {
    display: flex;
    position: relative;
}

.settingsFormInputIcon {
    position: absolute;
    display: flex;
    align-self: center;
    padding-right: 10px;
    width: 30px;
}

.formDivSettings {
    width: 100%;
    margin-top: 40px;
}

#standingsTable {
    margin-top: 40px;
}

.standingsStats {
    margin-top: 60px;
}

.showAllDiv {
    background-color: #e3e3e3;
    padding: 20px;
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 30px;
    color: #595959;
}

.bottomArrow {
    width: 20px;
}

.leaguesContainerMain {
    width: 100%;
    margin-bottom: 40px;
    background-color: #dedede;
    /*padding-top: 40px;*/
    /* padding-bottom: 40px;*/
    padding-left: 40px;
    padding-right: 40px;
}

.leagueContainerIcon {
    align-content: center;
    justify-content: center;
    border: 1px solid rgba(0, 0, 0, 0.1);
    width: 174px;
    height: 100%;
    text-align: center;
    padding-top: 20px;
    padding-bottom: 20px;
    position: relative;
    overflow: visible;
    border-radius: 15px;
}

.leagueContainerIconBorderless {
    width: 150px;
    text-align: center;
    padding-top: 20px;
    padding-bottom: 20px;
    position: relative;
}

.leagueCrestInner {
    width: 60%;
    align-self: center;
}

.leagueName {
    font-size: 15px;
    width: 100%;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.leagueNameB {
    font-size: 15px;
    width: 100%;
    font-weight: 800;
    margin-top: 8px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mainNewsAddContainer {
    background-color: black;
    width: 100%;
    height: 300px;
    margin-bottom: 40px;
    margin-top: 60px;
}

.followContainer {
    background-color: #f6150a;
    border-radius: 100px;
    position: relative;
    bottom: -5px;
    /*width: 50%;
    transform: translateX(-50%);*/
    color: white;
    padding: 4px;
    padding-left: 15px;
    padding-right: 15px;
    z-index: 10;
}

.popular {
    border: 1px solid rgba(0, 0, 0, 0.1);
    width: 72%;
}

.exportNewsContainer {
    width: 100%;
}

.exportNewsHeader {
    width: 100%;
    height: auto;
    margin-top: 5%
}

.notifyAndPopular {
    margin-bottom: 40px;
    margin-top: 30px;
}

.vidsImage {
    width: 25px;
}

.vidsAndPics {
    /* margin-bottom: 40px; */
}

.mainVids {
}

.playSVG {
    width: 60px;
    padding-right: 20px;
}

.mainVidDate {
    padding-right: 20px;
    color: #D6D6D6;
    font-size: 13px;
}

.mainVidTitle {
    color: white;
    padding-right: 20px;
    padding-bottom: 10px;
    width: 100%;
    font-size: 18px;
}

.mainPicsMulti {
    width: 100%;
    margin-top: 30px;
}

.standings {
    margin-bottom: 40px;
}

.standingsTable {
    width: 100%;
}

.predGame {
    height: 100%;
    border: 1px solid #DCDCDC;
}

.gameContent {
    width: 90%;
    margin: auto;
    padding-top: 20px;
    padding-bottom: 20px;
}

.teamLabelContainer {
    width: 90%;
    margin: auto;
    text-align: center;
}

.teamCrestPred {
    width: 50px;
    height: 50px;
}

.teamCrestPredEq {
    font-size: 14px;
    border-radius: 50%; /* Use 50% to ensure a perfect circle */
    width: 30px;
    height: 30px;
    line-height: 25px; /* Set line height equal to the height of the circle */
    text-align: center;
    border: 1px solid #D6D6D6
}

.teamGame {
    width: 100%;
}

.predScoreContainer {
    margin-top: 20px;
    margin-bottom: 10px;
    width: 100%;
}

.predText {
    font-size: 10px;
}

.percentBlob {
    width: 25px;
    height: 25px;
    border-radius: 100px;
    background-color: #6CADDF;
    font-size: 10px;
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    color: white;
}

.infoComp {
    background-image: url("../images/compbg.png");
    width: 100%;
    background-position: center;
    background-size: cover;
}

.allComps {
    color: #f6150a;
    border: 1px solid #f6150a;
    border-radius: 100px;
    background-color: transparent;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 20px;
    padding-right: 20px;
}

.topApplicants {
    display: flex;
    gap: 20px;
}

.infoCompContent {
    width: 90%;
    /*    display: flex;*/
    gap: 30px;
    margin: auto;
    color: white;
}

.personImage {
    padding-bottom: 10px;
}

.personName {
    font-size: 15px;
}

.testComponent {
    width: 300px !important;
    margin-left: 30px;
}

.optionButton {
    margin-top: 20px;
    background-color: #f6150a;
    border-radius: 100px;
    padding-left: 20px;
    padding-right: 20px;
    color: white;
    padding-top: 10px;
    padding-bottom: 10px;
    outline: none;
    border: none;
}

.testImage {
    width: 300px;
    height: 200px;
    object-fit: cover;
    border-radius: 10px;
}

.testName {
    margin-top: 10px;
    margin-bottom: 5px;
}

.prize {
    color: #f6150a;
    font-size: 15px;
    text-align: center;
}

.infoCompCarousel {
    width: 100%;
    margin-bottom: 40px;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    padding-left: 10px;
    padding-right: 10px;
    scroll-behavior: smooth;
    scroll-snap-type: both;
    scrollbar-width: none;
}

    .infoCompCarousel .col-5 {
        display: inline-block; /* This makes elements sit side by side */
        white-space: normal; /* Allow normal text wrapping inside each column */
        vertical-align: top; /* Align the tops of inline-block elements */
    }

    .infoCompCarousel::-webkit-scrollbar {
        display: none;
    }

#newsCardsAccount {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    padding-left: 10px;
    padding-right: 10px;
    scroll-behavior: smooth;
    scroll-snap-type: both;
    scrollbar-width: none;
}

    #newsCardsAccount .col-4 {
        display: inline-block; /* This makes elements sit side by side */
        white-space: normal; /* Allow normal text wrapping inside each column */
        vertical-align: top; /* Align the tops of inline-block elements */
    }

    #newsCardsAccount::-webkit-scrollbar {
        display: none;
    }

#newsCardsArticle {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    padding-left: 10px;
    padding-right: 10px;
    scroll-behavior: smooth;
    scroll-snap-type: both;
    scrollbar-width: none;
}

    #newsCardsArticle .col-4,
    #newsCardsArticle .col-3 {
        display: inline-block; /* This makes elements sit side by side */
        white-space: normal; /* Allow normal text wrapping inside each column */
        vertical-align: top; /* Align the tops of inline-block elements */
    }

    #newsCardsArticle::-webkit-scrollbar {
        display: none;
    }

.compDirection {
    text-align: center;
    padding-bottom: 5px;
}

    .compDirection button {
        font-family: cursive;
        font-weight: bold;
        background-color: #f6150a;
        color: white;
        border: none;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        transition: 0.5s;
        margin: 0 10px;
    }

        .compDirection button:hover {
            background-color: #ffffff;
            color: black;
        }

    .compDirection a {
        font-family: cursive;
        font-weight: bold;
        background-color: #f6150a;
        color: white;
        border: none;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        transition: 0.5s;
        margin: 0 10px;
    }

        .compDirection a:hover {
            background-color: #ffffff;
            color: black;
        }

.personDetails {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.leaderBoard {
    padding: 20px;
    background-color: #232323;
    border-radius: 5px;
    padding-top: 40px;
    align-items: center;
    height: 70%;
    margin-bottom: 40px;
}

.infoCompSub {
    width: 70%;
    font-size: 15px;
}

.headerText {
    color: white;
}

.infoCompHeader {
    padding-top: 20px;
    padding-bottom: 20px;
    width: 90%;
    margin: auto;
}

thead.standingsHead th {
    background-color: #ECECEC;
    padding-bottom: 20px;
    justify-content: center;
    align-items: center;
}

.tablesTitle {
    padding-bottom: 10px;
}

.tableCrest {
    width: 20px;
}

.tableRowOne {
}

.predScore {
}

.imageContainerPred {
    height: 40px;
    width: 40px;
    border-radius: 100px;
    background-color: white;
}

.predIcon {
    align-self: center;
    width: 50px;
    margin-bottom: 30px;
}

.submitAnswer {
    background-color: #000;
    color: white;
    border: none;
    outline: none;
    width: 90%;
    margin: auto;
    padding-top: 5px;
    padding-bottom: 5px;
    border-radius: 5px;
    margin-top: 10px;
}

.mainImagesNews {
    margin-top: 20px;
}

.mainImageNewsAMulti {
    position: relative;
    width: 100%;
    height: 250px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.leagueHeader {
    text-align: center;
}

.upcomingPlayers {
    margin-top: 20px;
}

.newsTitle {
    /* margin-bottom: 30px; */
}

.playerName {
    font-weight: 600;
    font-size: 20px;
}

.playerNumber {
    color: #f6150a;
    font-weight: 600;
    font-size: 20px;
}

.HeaderSection {
    width: 100%;
    margin-top: 40px;
    align-items: center;
}

.HeaderSection2 {
    margin-top: 20px;
}

.playerIconDiv {
    text-align: center;
}

.playersListNav {
    scroll-behavior: smooth;
    scroll-snap-type: both;
    scrollbar-width: none;
    overflow: auto;
}

    .playersListNav::-webkit-scrollbar {
        display: none;
    }

.tableTitle {
    margin-bottom: 0px;
}

.standingsAndResults {
    width: 100%;
}

.matchDiv {
    border: 1px solid #0606061A;
    padding: 14px;
}

.leftArrow {
    width: 20px;
}

.leagueCrestBig {
    width: 35px;
}

.matchesDiv {
    width: 100%;
    margin-top: 18px;
}

.goalsAndAssists {
    width: 100%;
    margin-top: 40px;
}

.playerStat {
    width: 100%;
    border: 1px solid #c3c3c3;
    padding: 10px;
    padding-left: 20px;
    padding-right: 20px;
    border-radius: 5px;
}

.goalsStat {
    text-align: center;
}

.eplFantasy {
    width: 100%;
}

.mainImageNewsA {
    /*background-image: url("../images/imageofnews.png");*/
    position: relative;
    width: 100%;
    height: 197px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    margin-bottom: 8px;
}

.lowerVidsDiv {
}

.mainVidNews {
    /* width: 33%; */
    height: 250px;
    background-position: center;
    background-size: cover;
    position: relative;
}

.upperVidsDiv {
    margin-top: 20px;
}

.upperVidsDivInMultimedia {
    margin-top: 20px;
    margin-bottom: 20px;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    scroll-behavior: smooth;
    scroll-snap-type: both;
    scrollbar-width: none;
}

    .upperVidsDivInMultimedia::-webkit-scrollbar {
        display: none;
    }

    .upperVidsDivInMultimedia .col-auto {
        display: inline-block; /* This makes elements sit side by side */
        white-space: normal; /* Allow normal text wrapping inside each column */
        vertical-align: bottom; /* Align the tops of inline-block elements */
    }

.mainVidNewsUpperMain .mainImageVideo {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: fill;
    /* padding:0;
      margin:0; */
}

.mainVidNewsUpper .mainImageVideo {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: fill;
}

.mainVidNews .mainImageVideo {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.mainVidNewsUpperMain {
    /* width: 67%; */
    height: 350px;
    background-position: center;
    background-size: cover;
    position: relative;
}

.mainVidNewsUpper {
    /* width: 100%; */
    height: 350px;
    background-position: center;
    background-size: cover;
    position: relative;
}

.playIndicator {
    position: absolute;
    background-color: #f6150a;
    width: 80px;
    top: 0;
    left: 0;
    height: 40px;
    display: flex;
    flex-direction: row;
    gap: 5px;
    justify-content: center;
    text-align: center;
}

.playIndicatorInCard {
    position: absolute;
    background-color: #f6150a;
    width: 80px;
    bottom: 0;
    left: 0;
    height: 40px;
    display: flex;
    flex-direction: row;
    gap: 5px;
    justify-content: center;
    text-align: center;
}

.playIndicatorMain {
    position: absolute;
    background-color: #000;
    width: 80px;
    bottom: 0;
    left: 0;
    height: 40px;
    text-align: center;
}

.playTiming {
    color: white;
    align-self: center;
}

.smallPlay {
    width: 20px;
    align-self: center;
}

.overlayImageNews {
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0;
    background: linear-gradient(to top, rgba(246, 21, 10, 1) 0%, rgba(246, 21, 10, 0) 100%)
}

.overlayImageNewsContent {
    bottom: 0;
    position: absolute;
}

.teamCrestInTable {
    width: 20px;
}

.standingsTableHead {
    background-color: #F5F5F5 !important;
    padding: 15px !important;
}

.standingsTableHeadInMatches {
    background-color: #FFFFFF !important;
    padding: 15px !important;
}

.state {
    width: 10px;
    height: 10px;
    border-radius: 100px;
    background-color: #c3c3c3;
}

.standingTeamCrest {
    width: 25px
}

.standingTabelDiv {
    display: flex;
    gap: 15px;
    align-items: center;
}

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

.lossResult {
    width: 25px;
    height: 25px;
    border-radius: 100px;
    display: flex;
    justify-self: center;
    justify-content: center;
    background-color: #D71920;
    display: flex;
    justify-self: center;
    justify-content: center;
    color: white;
    font-size: 13px;
    text-align: center;
}

.winResult {
    width: 25px;
    height: 25px;
    border-radius: 100px;
    background-color: #13CF00;
    display: flex;
    justify-self: center;
    justify-content: center;
    font-size: 13px;
    text-align: center;
    color: white;
    align-items: center;
}

.standingsBottomArrow {
    width: 15px;
    align-self: center;
}

.standingsMore {
    width: 23px;
    height: 23px;
    display: flex;
    align-items: center;
    border-radius: 100px;
    background-color: #d3d3d3;
    justify-content: center;
}

.drawResult {
    width: 25px;
    height: 25px;
    border-radius: 100px;
    display: flex;
    justify-self: center;
    justify-content: center;
    display: flex;
    justify-self: center;
    justify-content: center;
    background-color: #76766F;
    font-size: 13px;
    text-align: center;
    color: white;
    align-items: center;
}

.standingsTableHeadBorder {
    background-color: #F5F5F5 !important;
    padding: 15px !important;
    border-top: 1px solid rgb(212, 212, 212) !important;
    border-bottom: 1px solid rgb(212, 212, 212) !important;
    border-left: 1px solid rgb(212, 212, 212) !important;
    border-right: 1px solid rgb(212, 212, 212) !important;
}

#teamsTable {
    background-color: #f5F5F5 !important;
    padding: 20px;
}

#teamsTableInMatches {
    background-color: white !important;
    width: 100%;
    padding: 20px;
    margin-top: 20px;
    margin-bottom: 4 0px;
}

.leagueVids {
    width: 100%;
    margin-bottom: 40px;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    scroll-behavior: smooth;
    scroll-snap-type: both;
    scrollbar-width: none;
}

    .leagueVids .col-3 {
        display: inline-block; /* This makes elements sit side by side */
        white-space: normal; /* Allow normal text wrapping inside each column */
        vertical-align: top; /* Align the tops of inline-block elements */
    }

    .leagueVids::-webkit-scrollbar {
        display: none;
    }

.teamStanding {
    display: flex;
    gap: 5px;
    align-items: center;
}

.overlayImageNewsMulti {
    justify-content: flex-end;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: absolute;
    bottom: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
}

.clubOverlay {
    width: 100%;
    height: 100%;
    z-index: 10;
    bottom: 0;
    position: absolute;
    /*background: linear-gradient(to top, rgba(108, 173, 223, 1) 0%, transparent 100%);*/
    background: linear-gradient(to top, rgba(246, 21, 10, 1) 0%, rgba(246, 21, 10, 0) 70%)
}

.clubHeader {
    position: relative;
    display: flex;
    width: 100%;
    height: 300px;
}

.mainVidOverlay {
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
    overflow: hidden;
    box-sizing: border-box;
}

.mainVidOverlayContent {
    bottom: 0;
    position: absolute;
}

.mainVidOverlayContentInCard {
    bottom: 45%;
    left: 45%;
    position: absolute;
}

.newsImageTitle {
    width: 90%;
    padding-right: 20px;
    color: white;
    margin-bottom: 20px;
}

.newsImageDate {
    width: 70%;
    color: #D6D6D6;
    padding-right: 20px;
}

.notifyIcon2 {
    width: 20%;
    margin-right: 35%;
}

.notifyText {
    color: white;
    width: 100%;
    margin-top: 8%;
}

.notify {
    background-color: #000;
    padding: 15px;
    border-radius: 5px;
}

.exportImage {
    width: 100%;
}

.exportTitle {
    font-weight: 700;
    font-size: 22px;
    width: 100%;
    margin-bottom: 20px;
}

.exportImageContainer {
    background-color: white;
    width: 40px;
    height: 40px;
    border-radius: 100px;
}

.popularHeader {
    width: 100%;
    margin-top: 30%;
}

.newsCount {
    display: inline-block;
    /* margin-right: 5px;
    margin-bottom: 3px; */
}

.exportNewsDivider {
    width: 10%;
    display: flex;
    justify-content: center;
}

.innerDivider {
    height: 40%;
    background-color: black;
    align-self: center;
    width: 2px;
}

.innerExportNewsContainer {
    width: 45%;
}

.iconAndText {
}

.notifyButtonDiv {
    align-self: self-end;
    margin-right: 25%;
    margin-top: 15%;
}

.notifyButton {
    background-color: #f6150a;
    outline: none;
    border: none;
    padding: 7px;
    border-radius: 10px;
    align-self: self-end;
    color: white;
    font-size: 13px;
}

/* Main News Grid*/

/*Start of matches css*/

.dot {
    width: 10px;
    height: 10px;
    border-radius: 100%;
    background-color: #f6150a;
}

.subDate {
    color: #595959;
}

.matchesContainer {
    width: 80%;
    margin: auto;
}

.innerMatchesDiv {
    margin-top: 10px;
}

.leagueCircle {
    display: flex;
    width: 50px;
    height: 50px;
    border-radius: 100%;
    justify-content: center;
    background-color: white;
}

.addDivMatches {
    background-color: #000;
    width: 100%;
    height: 300px;
}

.carouselImage {
    /* object-fit: cover;*/
    width: 100%;
    height: 350px;
    background-position: center;
}

.matchesContainerFinal {
    margin-bottom: 50px;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}

.roundLabel {
    color: #8F8F8F;
}

.followLeague {
    border-radius: 100px;
    border: 1px solid #8F8F8F;
    padding: 7px;
    padding-right: 15px;
    padding-left: 15px;
    outline: none;
    color: #8F8F8F;
}

.leagueIconMatches {
    width: 80%;
}

.cardsDivInMatches {
    margin-top: 10px;
    margin-bottom: 30px;
}

.predAddDiv {
    background-color: #000;
    width: 100%;
    height: 250px;
}

.cardContainerInMatches {
    background-color: white;
    width: 100%;
    text-align: center;
    margin-bottom: 0px;
    padding: auto;
    border: 1px solid #E6E6E6;
    margin-top: 10px;
}

.cardContainerInProfileDesktop {
    background-color: white;
    width: 100%;
}

.cardContainerPlacholder {
    background-color: transparent;
    width: 50%;
    display: flex;
    flex-direction: column;
    margin-bottom: 40px;
}

.cardContainerInClub {
    background-color: white;
    width: 100%;
    margin-bottom: 10px;
    padding-bottom: 30px;
    padding-top: 10px;
    padding-right: 10px;
    padding-left: 10px;
}

.scoreDiv {
    text-align: center;
    width: 100%;
    margin-top: 20px;
}

.teamScoreDiv {
    text-align: center;
}

.liveScoreDiv {
    text-align: center;
}

.timingDiv {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 20px;
    margin-bottom: 20px;
}

.minsMatches {
    color: #00D622;
    font-size: 14px;
}

.interactionDiv {
    align-self: center;
    width: 40px;
    height: 40px;
    border-radius: 100%;
    background-color: #EDEDED;
    display: flex;
    justify-content: center;
}

.notifyIcon {
    width: 80%;
}

.scores {
    font-size: 25px;
}

.predButton {
    border-radius: 100px;
    background-color: #EDEDED;
    padding: 8px;
    padding-left: 8px;
    padding-right: 8px;
    outline: none;
    border: none;
    font-size: 12px;
    font-weight: 600;
}

.predButtonBlack {
    border-radius: 100px;
    background-color: #000000;
    color: white;
    padding: 10px;
    padding-left: 25px;
    padding-right: 25px;
    outline: none;
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40%;
}

    .predButtonBlack.disabled {
        background-color: #555555;
        color: #cccccc;
        cursor: not-allowed;
        opacity: 0.6;
        pointer-events: none;
    }



.interactionContainer {
    display: flex;
    justify-content: center;
    padding-top: 10px;
    padding-bottom: 10px;
    gap: 20px;
}

.interactionContainerPred {
    display: flex;
    justify-content: center;
    padding-top: 15px;
    padding-bottom: 30px;
    gap: 20px;
}

.predImage {
    width: 20%;
    margin-left: 10px
}

.predImageInner {
    width: 15%;
    margin-left: 10px
}

/*End of matches css*/

/* News Strip Start*/

.carousel-indicators-left {
    gap: 20px;
    display: flex;
    flex-direction: column;
    position: absolute;
    left: 30px;
    bottom: 30%;
    z-index: 15;
    transform: translateX(-50%);
}

.newsContainerStrip {
    width: 100%;
    overflow-x: hidden;
}

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

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

.newsStripDivider {
    background-color: #f6150a !important;
    width: 3px !important;
    height: 3px !important;
    border-radius: 100%;
    scale: 0.4;
}

.newsStripDivider {
    color: white;
    font-size: 12px;
    display: inline-block;
    padding: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
}

.newsStrip {
    height: 35px;
    align-items: center;
    background-color: #1B1B1B;
    color: white;
    font-size: 12px;
}

/* News Strip End */

.paddingContainer {
    width: 90%;
    margin: auto;
}

.upperHeaderAdd {
    display: flex;
    width: 100%;
    background-color: #676767 !important;
    height: 80px;
    z-index: 1000;
    margin-top: 31px;
    background-image: url("../images/downloadtop.png");
    background-size: fill;
    background-position: center;
    /* Adjust the z-index as needed */
}

.add1 {
    position: sticky;
    top: 0;
    z-index: 1000;
    background-image: url("../images/download.png");
}

.add2 {
    position: sticky;
    top: 0;
    z-index: 1000;
    background-image: url("../images/download.png");
    background-size: cover;
    background-position: center;
}

.upperHeaderAdd {
    background-image: url("../images/downloadtop.png");
    position: sticky;
    top: 0;
    z-index: 1000;
    /* Adjust the z-index as needed */
}

.mainContainerForAdd {
    display: flex;
    flex-direction: row;
    width: 100%;
    gap: 5px;
}

.paddingContainerMob {
    width: 90%;
    margin: auto;
    background-color: #F5F5F5;
}

.teamCrestTeam {
    width: 150px;
}

.add1 {
    width: 5%;
    background-color: #000;
    height: 400px;
    position: sticky;
}

.bodyContent {
    width: 90%;
    padding: 10px;
    margin: auto !important;
    /* Center the content */
}

.add2 {
    width: 5%;
    background-color: #000;
    height: 400px;
}

.clubHeaderContent {
    position: relative;
    bottom: -150px;
    width: 100%;
    margin: auto;
}

.teamUpperMargin {
    margin-top: 175px;
}

.paddingContainerTrans {
    width: 90%;
    margin: auto;
    z-index: 100;
    margin-bottom: 80px;
}

.teamNameAndFollow {
    position: absolute;
        bottom: 20px;
    right: 10%;
}

.tableTeamCrest {
    width: 35px;
}

.coachDiv {
    align-self: flex-end;
    height: 120px;
    background-color: white;
    padding-right: 40px;
    padding-left: 40px;
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
}

.carousel-title {
    gap: 10px;
    position: absolute;
    bottom: 10px;
    display: flex;
    flex-direction: column;
    padding-right: 20px;
    width: 50%;
}

#carouselIndicator {
    outline: none;
    padding: 3px;
    border: none;
    box-shadow: none;
    width: 3px !important;
    max-width: 3px !important;
    min-width: 3px !important;
    height: 29px;
    border-radius: 0px;
    opacity: 0.3;
    background-color: white;
}

#carouselIndicatorCricle {
    outline: none;
    border: none;
    box-shadow: none;
    width: 20px;
    height: 20px;
    border-radius: 100px;
    opacity: 0.3;
    background-color: white;
}

    #carouselIndicatorCricle.active {
        outline: none;
        border: none;
        box-shadow: none;
        width: 20px;
        height: 20px;
        border-radius: 100px;
        opacity: 1;
        background-color: white;
    }

.carouselIndicatorCricle {
    outline: none;
    border: none;
    box-shadow: none;
    width: 20px;
    height: 20px;
    border-radius: 100px;
    opacity: 0.3;
    background-color: white;
}

    .carouselIndicatorCricle.active {
        outline: none;
        border: none;
        box-shadow: none;
        width: 20px;
        height: 20px;
        border-radius: 100px;
        opacity: 1;
        background-color: white;
    }

#carouselIndicator.active {
    outline: none;
    padding: 3px;
    border: none;
    box-shadow: none;
    width: 3px !important;
    max-width: 3px !important;
    min-width: 3px !important;
    height: 29px;
    border-radius: 0px;
    opacity: 1;
    background-color: white;
}

/* .bodycontent .carousel-item {
      width: 100%;
      height: 350px;
      object-fit: contain;
      background-position: center;
  } */

.customHref {
    color: white;
    text-decoration: none;
}

.carouselDateInner {
    font-size: 15px;
    z-index: 1;
    display: flex;
    color: #a7a7a7;
    cursor: pointer;
}

.sideMenu {
    background-color: rgba(31, 31, 31, 1);
    width: 100%;
    display: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.8s ease-in-out, visibility 0.8s ease-in-out;
}

.show {
    display: block;
    opacity: 1;
    visibility: visible;
}

.upperMenuContent {
    margin-right: 60px;
    width: 70%;
    padding: 40px;
    display: flex;
    justify-content: space-between;
}

.upperMenuItem {
    gap: 10px;
    display: flex;
    color: rgba(214, 214, 214, 1);
}

.lowerMenu {
    background-color: rgba(0, 0, 0, 1);
    padding: 40px;
}

.lowerMenuContent {
    display: flex;
    justify-content: space-between;
}

.lowerMenuColumn {
    display: flex;
    flex-direction: column;
    color: white;
    gap: 30px;
    font-size: 14px;
}

.lowerColumnHeader {
    font-size: 18px;
    display: flex;
    gap: 10px;
    color: rgba(255, 122, 1, 1);
    align-items: center;
}

.lowerMenuColumnImages {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.cupIcon {
    width: 20px;
}

.lowerMenuImage {
    width: 200px;
}

/* Top Bar start */

.topbar {
    display: flex;
    flex-direction: row-reverse;
    margin: auto;
    padding-left: 5%;
    padding-right: 5%;
    justify-content: space-between;
    align-items: center;
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: #000000;
    color: #ffffff;
}

.socials {
    display: flex;
    gap: 10px
}

.socialIcon {
    width: 20px;
    height: 20px;
    color: white;
}

.searchIcon {
    width: 20px;
}

.search {
    display: flex;
    gap: 8px;
    flex-direction: row;
}

.socials {
    display: flex;
}

.searchText {
    margin-bottom: 0px;
    font-size: 12px;
}

.customProfilePage {
    width: 100%;
    background-color: rgba(237, 237, 237, 1);
    margin-bottom: 35px;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-right: 40px;
    position: relative;
}

.lowerBottom {
    position: absolute;
    bottom: -20px;
    left: 38%;
    background-color: white;
    text-align: center;
    padding: 5px;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 100px;
}

.customNavButton {
    background-color: transparent !important;
}

.customNavDiv {
    margin-top: 40px;
    margin-bottom: 80px;
    border: 0px !important;
}

/* Top Bar end */

/* Navbar start */
.navImage {
    width: 20px;
    height: 20px;
    align-self: center;
}

.accountTopStrip {
    width: 100%;
    background-color: rgba(237, 237, 237, 1);
    padding: 20px;
}

.topStripItem {
    margin-left: 50px;
    display: inline-block;
}

col-auto.topStripItem img,
.col-auto.topStripItem p {
    display: inline-block; /* Make image and paragraph inline-block elements */
}

.col-auto.topStripItem p {
    margin-left: 5px; /* Add margin to separate image and text */
}

.stripItemLabel {
    font-size: 20px;
    font-weight: 600;
}

.registerIcon {
    width: 20%;
    padding-left: 4px;
}

.loginButton:hover {
    background-color: #000;
    opacity: 0.7;
}

.registerIconLoggedIn {
    width: 25px;
    padding-left: 4px;
}

.navbarCustom {
    padding-left: 5%;
    padding-right: 5%;
    padding-top: 20px;
    padding-bottom: 20px;
    flex-direction: row;
    display: flex;
    justify-content: space-between;
    gap: 50px;
}

.loginButton {
    padding: 10px;
    background-color: #000000;
    border-radius: 2px;
    color: white;
    margin-top: 5%;
    align-items: center;
    font-size: 12px;
    margin-bottom: 5%;
}

.imgDiv {
    position: relative;
    display: flex;
    justify-content: center;
}

.navItems {
    display: flex;
    gap: 80px;
    width: 70%;
    float: left;
    flex-direction: row-reverse;
}

.miniPlayButton {
    position: absolute;
    width: 60px;
    align-self: center;
}

.timeDivArrow {
    width: 15px;
}

.timeDivVid {
    gap: 10px;
    position: absolute;
    display: flex;
    justify-content: center;
    color: white;
    text-align: center;
    padding: 10px;
    background-color: #000;
    bottom: 0;
    left: 0;
}

.miniPlayButtonMobile {
    position: absolute;
    width: 40px;
    top: 110px;
    right: 10px;
}

.listIcon {
    display: flex;
    flex-direction: row;
    gap: 10px;
    justify-content: center;
}

.listImage {
    width: 20px;
    height: 20px;
    align-self: center;
}

.burger {
    background-color: #F4F4F4;
    border-radius: 15px;
    padding: 10px;
}

.listItem {
    align-self: center;
    color: #000;
    margin-bottom: 0px;
}

.activeItem {
    align-self: center;
    color: #f6150a;
    margin-bottom: 0px;
}

/* Navbar end */

/* Match Carousel */
.matchCarousel {
    background-image: url('../images/stadium.png');
    background-size: cover; /* Covers the entire area of the container */
    background-position: center; /* Centers the background image */
    background-repeat: no-repeat; /* Prevents the image from repeating */
    width: 100%;
    height: 354px;
    /* padding-top: 40px; */
}

.upperMatchTabs {
    width: 100%;
    justify-content: space-between;
    border: none;
}

.upperTabs {
    width: 100%;
}

.controls {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 1.0), transparent);
    width: 50%;
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 0px;
    /*margin-bottom: 11px;*/
}

.next {
    color: white;
    background-color: transparent;
    border-radius: 20px;
    height: 50%;
    padding: 20px;
}

.nextTitle {
    margin-bottom: 0px;
    margin-top: 5px;
}

.nextIcon {
    width: 15px
}

.nextIconTest {
    width: 30px
}

.nextIconRev {
    width: 15px;
    transform: scaleX(-1);
}

.nextIconRevTest {
    width: 30px;
    transform: scaleX(-1);
}

.carouselDate {
    text-align: center;
    color: white;
    padding-top: 20px;
}

.matchDate {
    color: #f6150a;
}

.nav-tabs .nav-link.active:hover .matchDate {
    color: #fff;
}



.mainCarouselContent {
    display: flex !important;
    overflow-x: auto;
    gap: 30px;
    width: 80%;
    margin: auto;
    padding-bottom: 60px;
    position: relative;
}

.mainCarouselContent2 {
    overflow-x: auto;
    margin: auto;
    /* padding-bottom: 60px;
    position: relative; */
    width: 100%;
}

.mainCarouselContent::-webkit-scrollbar {
    display: none;
}

.mainCarouselContent2::-webkit-scrollbar {
    display: none;
}

.lowerCarousel {
    background-color: #000;
    color: white;
    text-align: center;
    padding-bottom: 10px;
    padding-top: 6px;
    margin-top:-10px;
}

/* .carouselMatchCard {
      background-color: white;
      border-radius: 5px;
      min-width: 300px;
      width: 300px;
  } */

.navvv {
    border: 20px !important;
    border-top-right-radius: 20px !important;
    border-top-left-radius: 20px !important;
}

    .navvv:active {
        background-color: transparent;
        color: white !important;
    }

.nav-tabs .nav-link:hover {
    color: white !important;
    background-color: #cf0909 !important;
}

.nav-tabs .nav-link.active {
    background-color: transparent;
    color: white !important;
}

.nav-tabs .nav-item .customNavButton {
    background-color: transparent !important;
    border-radius: 0px !important;
    width: 100%;
    display: flex;
    gap: 20px;
    color: #000 !important;
    border: transparent !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

.predictionsHeader {
    margin-bottom: 40px;
}

.nav-tabs3 .nav-link.active {
    border-bottom: 3px solid #f6150a;
    color: #f6150a !important;
    background-color: #F5F5F5;
    border-radius: 0px;
    font-weight: 700 !important;
}

.nav-tabs3 .nav-link {
    color: #a3a3a3 !important;
    background-color: #F5F5F5;
    font-weight: 500;
    border: none;
}

.allMatchesNavHeaderPred {
    display: flex;
    justify-content: space-between;
    margin-top: 30px;
}

.dropdownLink {
    width: 25px;
}

.dropdown-toggle::after {
    align-self: center !important;
}

.weekNumber {
    color: #595959;
}

.smallDivider {
    width: 10px;
    height: 10px;
    background-color: #f6150a;
    border-radius: 100px;
}

.btn-secondary {
    padding: 10px 20px;
    align-content: center;
    justify-content: center;
    display: flex;
    background-color: #F5F5F5 !important;
    color: black !important;
    gap: 10px !important;
}

.imagesAlbums {
    font-size: 20px;
    font-weight: 600;
    margin-top: 20px;
}

.carouselMatchCardNotify {
    border-radius: 5px;
    background-color: white;
    min-width: 300px;
    width: 300px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    border: 1px solid #E8E8E8;
    position: relative;
    overflow: visible;
    /* Allow content to overflow */
}

.mobileNav {
    display: none;
}

.matchCardCarousel {
    padding-top: 5px;
    padding-bottom: 5px;
    overflow: hidden;
    z-index: 1;
    background-color: white;
    width: 350px;
    min-height: 105px;
    /* padding-left: 10px; */
}

.owl-stage {
    display: flex !important;
    gap: 0.5% !important;
    padding-left: 10px;
}

.owl-stage-outer {
    overflow: visible !important;
}

.next {
    cursor: pointer;
}

.alertD {
    padding: 10px;
    background-color: #f6150a;
    position: absolute;
    bottom: -30px;
    /* Position it at the bottom */
    left: 50%;
    /* Horizontally center it */
    transform: translateX(-50%);
    /* Center horizontally */
    z-index: 999999999;
    border-radius: 100px;
    margin: 0px !important;
}

.topCarouselNext {
    cursor: pointer;
    width: 20px;
    height: 20px;
    position: absolute;
    z-index: 99;
    left: 0;
    align-self: center;
    padding-left: 50px;
    margin-bottom: 70px;
    margin-top: -120px;
}

.topCarouselPrev {
    cursor: pointer;
    width: 20px;
    height: 20px;
    position: absolute;
    z-index: 99;
    right: 0;
    align-self: center;
    padding-right: 40px;
    margin-bottom: 70px;
    margin-top: 30px;
    margin-right: 40px;
}

.predButtons {
    display: flex;
    gap: 15px;
}

.topCarouselNextTest {
    cursor: pointer;
    width: 20px;
    height: 20px;
    position: absolute;
    z-index: 99;
    left: 0;
    align-self: center;
    padding-left: 85px;
    margin-bottom: 70px;
}

.topCarouselPrevTest {
    cursor: pointer;
    width: 20px;
    height: 20px;
    position: absolute;
    z-index: 99;
    right: 0;
    align-self: center;
    padding-right: 50px;
    margin-bottom: 70px;
}

.alertIcon {
    width: 12px !important;
}

.alertInner {
    display: flex;
    gap: 10px;
    flex-direction: row;
}

.alertP {
    font-size: 12px;
    margin-bottom: 0px;
    color: white;
}

/* Match Carousel */

/*Player Journey Start */

/* Player Journey End*/

.journeyTitle {
    font-weight: 500;
    font-size: 20px;
}

.playerJourney {
    padding-top: 40px;
    display: flex;
    flex-direction: column;
}

.timelineDiv {
    margin-bottom: 40px;
    margin-top: 30px;
}

.titleDivJourney {
    padding-bottom: 40px;
}

.clubCrest {
    width: 40%;
    object-fit: contain;
}

.clubs {
    display: flex;
    width: 100%;
    justify-content: space-between;
    margin-bottom: 10px;
}

.clubsUpper {
    display: flex;
    width: 100%;
    justify-content: space-between;
    position: relative;
    margin-bottom: 10px;
}

.clubsRel {
    width: 90%;
    display: flex;
    justify-content: space-between;
    position: absolute;
    padding-top: 4px;
}

.clubAndDate {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

.clubDate {
    font-size: 12px;
    color: #a7a7a7;
}

.clubDiv {
    width: 120px;
    min-width: 120px;
    max-width: 120px;
    justify-content: center;
    display: flex;
}

.timeline {
    height: 3px;
    border: 2px solid #D6D6D6;
    background-color: #D6D6D6;
}

.outerCircle {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 100%;
    background-color: #D6D6D6;
}

.myCircle {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    border: 3px solid #D6D6D6;
    width: 25px;
    height: 25px;
    border-radius: 100%;
    background-color: transparent;
}

/* Player Profile Start*/

th {
    padding-top: 5px;
    padding-bottom: 5px;
}

tr {
    padding-top: 10px;
    padding-bottom: 10px;
}

.playerProfile {
    padding-top: 80px;
    padding-bottom: 30px;
}

.circleContainer {
    width: 110px;
    height: 110px;
    border-radius: 100%;
    background-size: cover;
    background-position: center;
    position: relative;
}

.clubContainer {
    width: 42px;
    height: 42px;
    border-radius: 100%;
    background-size: 80%;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: white;
}

.followSection {
    text-align: center;
}

.followButton {
    margin-top: 10px;
    background-color: #D6D6D6;
    color: white;
    border-radius: 100px;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: 10px;
}

.infoDiv {
    margin: auto;
}

.upperInfoDiv {
    margin: auto;
}

.lowerInfoDiv {
    gap: 120px;
    display: flex;
    width: 80%;
    margin: auto;
}

.playerInfoIcon {
    height: 30px;
}

.infoTitle {
    font-size: 10px;
    margin-bottom: 0px;
    font-weight: bold;
}

.infoDesc {
    font-size: 9px;
    color: #f6150a;
    font-weight: 700;
}

/* Player Profile End*/

/* Matches Start */
.container {
    max-width: 100%;
    padding: 0px;
    padding-left: 0px;
}

.containerDiv {
    display: flex;
    gap: 20px;
}

.matches {
    display: flex;
    flex-direction: row;
    gap: 20px;
    width: 100%;
}

.infoCard {
    padding: 20px;
    border: 1px solid #999999;
    border-radius: 5px;
}

.infoIcon {
    width: 30px;
    height: 30px;
    justify-content: center;
    display: inline-block;
}

.infoNumber {
    color: #f6150a;
    font-weight: 700;
    font-size: 18px;
}

/* Matches End */

/*stats start */

.table {
    border-collapse: collapse;
    border: none;
}

    .table th,
    .table td {
        border: none;
    }

.tablesContainer {
    width: 100%;
    padding-top: 60px;
}

.arrowIcon {
    width: 20px;
}

.leagueTitle {
    display: flex;
    gap: 7px;
}

.leagueIcon {
    width: 22px;
    height: 22px;
    align-self: center;
}

.statLogo {
    width: 25px;
}

.statTitle {
    font-size: 20px;
    margin-bottom: 0px;
}

/*starts end*/

/* Upcoming Mathces Start*/

.allMatchesDiv {
    width: 100%;
    padding-top: 30px;
}

.allMatchesTitle {
    color: #676767;
}

.allMatchesIcon {
    width: 15px;
}

.playersIcon {
    width: 25px;
}

.upcomingMatches {
    padding-top: 40px;
    padding-bottom: 40px;
    width: 100%;
}

.photosHeaderPred {
    margin-top: 40px;
    margin-bottom: 20px;
    display: flex;
    gap: 10px;
    align-items: center;
}

.upcomingMatchesDiv {
    margin-bottom: 30px;
}

.matchesTitle {
    font-size: 25px;
}

.matchCardsDiv {
    padding-top: 15px;
}

.matchCardsDiv2 {
    padding-top: 15px;
}

.addDiv {
    background-color: #000000;
    width: 100%;
    height: 50px;
    height: 240px;
    border-radius: 10px;
}

.matchCard {
    padding: auto;
    border: 1px solid #E8E8E8;
}

.matchCard2 {
    padding-top: 5px;
    padding-bottom: 5px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    border: 1px solid #E8E8E8;
}

.teamDiv {
    text-align: center !important;
    width: 100%;
}

.teamDivR {
    text-align: center !important;
    width: 100%;
}

.teamCrestR {
    height: 50px;
    width: 70px;
    object-fit: contain;
    padding-top: 10px;
}

.teamNameR {
    padding-bottom: 10px;
    font-size: 10px;
    font-weight: bold;
    padding-top: 5px;
}

.leagueDiv {
    text-align: center !important;
}

.teamCrest {
    padding-top: 10px;
    height: 50px;
    width: 70px !important;
    object-fit: contain;
}

.owl-dots {
    display: none;
}

.leagueCrest {
    width: 40px !important;
}

.teamName {
    padding-bottom: 10px;
    font-size: 10px;
    padding-top: 5px;
    font-weight: bold;
}

.status {
    font-size: 12px;
    width: 100%;
    margin-left: 10px;
    padding-top: 5px;
}

.matchTime {
    font-size: 16px;
    direction: rtl;
    /*width: 85px;*/
    align-self: center;
    /*margin-left: -20px;*/
}

.imageDiv {
    width: 100%;
    height: 240px;
    background-image: url("../images/football.jpg");
    background-position: center;
    background-size: cover;
    border-radius: 10px;
}

.PreviousMatches {
    /*padding-top: 20px;*/
}

/* Upcoming Mathces End*/

/* player News Start*/

.newsTitleh4 {
    width: 80%;
}

.titleIcon {
    width: 25px;
    height: 25px;
}

.clockIcon {
    width: 15px;
    display: inline-block;
}

.timeDiv {
    padding-right: 10px;
    padding-left: 35%;
    margin-top: 8px;
}

.newsUpper {
    border: 1px solid #E8E8E8;
    padding-right: 20px;
    padding-top: 5px;
    padding-left: 20px;
    background-color: #EFEFEF;
    /* padding-bottom: 30px; */
}

.mainNewsInMatches {
    display: flex;
    flex-direction: row;
}

.playerNewsLower {
    padding-top: 40px;
}

.newsBody {
    padding-top: 10px;
    padding-bottom: 15px;
    width: 90%;
}

.timing {
    align-self: center;
    display: inline-block;
    margin-right: 2px;
}

.newsImageUpper {
    /* width: 70%;*/
    width: 100%;
    aspect-ratio: 4 / 3; /* Modern & clean */
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    border-radius: 0.5rem;
}

.newsImage {
    height: 200px;
    width: 100%;
    /*    object-fit: cover;*/
}

.newsImage3cols {
    height: 245px;
    /*width: 100%;*/
    object-fit: cover;
}

.newsTitle {
    font-size: 17px;
    /* width: 80%; */
    padding-right: 15px;
    padding-top: 10px;
}

.newsTitleActive {
    font-size: 20px;
    padding-right: 15px;
    padding-top: 10px;
    color: #f6150a;
}

.newsButtonDiv {
    padding-top: 20px;
    padding-right: 15px;
    padding-bottom: 20px;
}

.newsCard {
    border: 1px solid #E8E8E8;
    padding: initial;
}

.newsCardVids {
    border: 1px solid #E8E8E8;
}

.newsButtonLower {
    background-color: white;
    border: 1px solid #7c7c7c;
    color: #7c7c7c;
    padding: 5px;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 20px;
}

/*Player News End*/

/*Player Videos Start*/
.playerVideos {
    display: flex;
    flex-direction: column;
    padding-top: 30px;
}

.buttonDiv {
    padding-top: 20px;
}

.newsButton {
    padding: 10px;
    background-color: white;
    border: 1px solid #7c7c7c;
    color: #7c7c7c;
    border-radius: 20px;
    align-items: center;
}

.newsGrid {
    padding-top: 10px;
}

.navPredDiv {
    margin-top: 40px;
}

.topPlayers {
    display: flex;
    gap: 30px;
    width: 100%;
}

.personDiv {
    justify-content: center;
    align-items: center;
    display: flex;
    justify-content: space-between;
    padding-top: 5px;
    padding-bottom: 5px;
}

.personNameAndAvatar {
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
    padding-right: 20px;
    padding-top: 20px;
    padding-bottom: 20px;
}

.personNameAndAvatarActive {
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
    border-right: 4px solid #f6150a;
    padding-right: 20px;
    padding-top: 20px;
    padding-bottom: 20px;
    background: linear-gradient(to left, rgba(255, 122, 1, 0.2) 0%, rgba(0, 0, 0, 0) 100%);
}

.playerPredDiv {
    display: flex;
    flex-direction: column;
    gap: 15px;
    justify-content: center;
    align-items: center;
}

.modalContnet {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 10px;
}

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

.modalDiv {
    display: flex;
    flex-direction: column;
    gap: 40px;
    width: 100%;
}

.starsButtonPred {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 10px;
    width: 20%;
    border: none;
    justify-content: center;
    border-radius: 100px;
    background-color: rgba(255, 122, 1, 0.08);
    box-shadow: 0px 36px 72px 0px rgba(0, 0, 0, 0.07);
}

.starsButtonPredBig {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 10px;
    width: 40%;
    border: none;
    justify-content: center;
    border-radius: 100px;
    background-color: rgba(255, 122, 1, 0.08);
    box-shadow: 0px 36px 72px 0px rgba(0, 0, 0, 0.07);
}

.starsButton {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 10px;
    width: 30%;
    border: none;
    justify-content: center;
    border-radius: 100px;
    background-color: #f5F5F5;
    box-shadow: 0px 36px 72px 0px rgba(0, 0, 0, 0.07);
}

.modalUpperPart {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
}

.modalUpperPartPred {
    width: 100%;
    display: flex;
    gap: 20px;
    margin-top: 10px;
    justify-content: center;
}

.modalImage {
    width: 100px;
}

.topLeaderbord {
    width: 100%;
    display: flex;
    gap: 20px;
    justify-content: center;
    border: 1px solid rgba(0, 0, 0, 0.1);
    padding-top: 20px;
    padding-bottom: 20px;
}

.rightSide {
    width: 50%;
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-direction: column;
}

.leftSide {
    width: 50%;
}

.newsImageInner {
    width: 100%;
    height: 250px;
    object-fit: cover;
}

.playerImages {
    padding-bottom: 40px;
}

.newsImageCard {
    position: relative;
    height: 250px;
    width: 100%;
}

.newsImageCardMain {
    position: relative;
    height: auto;
    background-repeat: no-repeat;
    background-size: cover;
}

.imageOverlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    /* Adjust the opacity here */
    z-index: 1;
    /* Make sure it's above the image */
}

.newsImageInner {
    height: 250px;
    width: 100%;
    object-fit: cover;
    z-index: 0;
    /* Make sure the image is below the overlay */
}

.overlayContents {
    color: white;
    bottom: 0;
    position: absolute;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-top: 7px;
}

.overlayNews {
    width: 85%;
}

.register {
    background-color: #d71920;
    width: 100%;
    height: 350px;
    background-image: url("../images/bgred.jpg");
    background-size: contain;
    background-repeat: no-repeat;
}

.registerContent {
    width: 50%;
    padding-right: 120px;
    padding-top: 60px;
}

.registerButton {
    background-color: #000;
    color: white;
    padding: 10px;
    width: 40%;
    outline: none;
    border: 0px;
    margin-top: 30px;
}

.footer {
    background-color: #000;
    color: white;
    padding-bottom: 40px;
}

.upperFooter {
    width: 100%;
    padding-left: 15%;
    padding-right: 10%;
    /* margin: auto; */
    padding-top: 30px;
    padding-bottom: 20px;
}

.inputEmail {
    background-color: #1B1B1B;
    color: white;
    outline: none;
    border: none;
    padding: 10px;
    border-radius: 5px;
    padding-left: 20px;
    padding-right: 20px;
}

.enrollButton {
    background-color: #f6150a;
    color: white;
    border: none;
    padding: 10px;
    border-radius: 5px;
    padding-left: 20px;
    padding-right: 20px;
    margin-right: 5px;
}

.inputForm {
    align-self: center;
}

.divider {
    width: 80%;
    margin: auto;
    background-color: white;
    color: white;
    height: 2px;
}

.lowerFooter {
    padding-top: 20px;
    width: 90%;
    margin: auto;
}

.footerArrow {
    width: 6%;
}

.fantasy {
    width: 220px;
    height: 100px;
    background-color: #1B1B1B;
    border-radius: 5px;
    margin-bottom: 20px;
}

.predictions {
    width: 220px;
    height: 100px;
    background-color: #1B1B1B;
    border-radius: 5px;
}

.divider2 {
    width: 80%;
    margin: auto;
    background-color: white;
    color: white;
    height: 2px;
    margin-top: 20px;
}

.dateMobile {
    display: block;
    font-size: 13px;
    width: 80%;
    padding-right: 15px;
    padding-top: 10px;
    color: #676767;
}

.mobileBottomNav {
    display: none;
}

.allNewsMobileButton {
    display: none;
}

.allNewsMobileButtonLower {
    display: none;
}

.mobileMultimediaDiv {
    display: none;
}

.mobileHeader {
    display: none;
}

.searchHeader {
    display: none;
}

.mobileAddDiv2 {
    display: none;
}

.mobileAddDiv {
    display: none;
}

.playerVideosMobile {
    display: none;
}

.playerJourneyMobile {
    display: none;
}

.owl-carousel {
    direction: ltr !important;
}

#carouselExampleIndicators {
    display: none;
}

#carouselExampleIndicators2 {
    display: block;
    margin-top: 20px;
    margin-bottom: 20px;
}

#carouselExampleIndicators3 {
    display: block;
    margin-top: 20px;
    margin-bottom: 20px;
}



.headerTitleBiger {
    font-size: 25px;
    align-self: center;
    margin-bottom: 0px;
    margin-top: 20px;
}

.bottomMargin {
    margin-bottom: 25px;
}

.margin {
    margin-top: 30px;
    margin-bottom: 30px;
}

.arrowsFlex {
    display: flex;
}

.articleMain {
    width: 100%;
    margin-top: 10px;
}

.titleAndSocials {
    width: 100%;
    margin-bottom: 30px;
}

.titleBold {
    font-weight: 800;
}

.articleSocialsContainer {
    width: 100%;
}

.addDivArticle {
    width: 100%;
    height: 100%;
    background-color: #000;
}

.articleDate {
    color: #8F8F8F;
}

.articleSocials {
    display: flex;
    gap: 10px;
}

.articleContent {
    /*width: 85%;*/
    margin-top: 30px;
    /*margin-right: 50px;*/
    line-height: 1.8;
    font-size: 19px;
}

.articleTrending {
    width: 100%;
    margin-top: 30px;
    border: 1px solid #DCDCDC;
    padding: 40px;
}

.trendingImageContainer {
    width: 40px;
    height: 40px;
    border-radius: 100px;
    background-color: white;
    text-align: center;
}

.trendingImage {
    width: 60%;
    align-self: center;
}

.trendingHeader {
    width: 100%;
}

.statContainer {
    display: flex;
    gap: 5px;
    margin-bottom: 10px;
}

.tags {
    margin-top: 50px;
}

.tagButton {
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
    background-color: white;
    border: 1px solid #7c7c7c;
    color: #7c7c7c;
    margin-left: 10px;
}

.simillarNews {
    margin-top: 40px;
    margin-bottom: 20px;
}

.articleContentVid {
    margin-bottom: 40px;
    margin-top: 40px;
}

.mainVidContainer {
    width: 100%;
    position: relative;
}

.vidMain {
    width: 100%;
}

.vidOverlay {
    width: 100%;
    position: absolute;
    background: linear-gradient(to top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
    height: 100%;
    top: 0;
    display: flex;
    justify-content: center;
}

.playMainIcon {
    width: 10%;
}

.multiMediaHeader {
    margin-top: 40px;
}

.multiMediaAddDiv {
    background-color: #000;
    width: 100%;
    height: 250px;
}

.articleBodyImages {
    margin-top: 20px;
    margin-bottom: 20px;
    width: 100%;
}

.imageGrid {
    width: 100%;
    margin-bottom: 20px;
}

.lowerImage {
    width: 100%;
    height: 321.24px;
    background-position: center;
    background-size: cover;
}

.singleGrid {
    width: 45%;
    height: 642.48px;
    background-position: center;
    background-size: cover;
}

.singleGridInner {
    width: 100%;
    height: 321.24px;
    background-position: center;
    background-size: cover
}

.innerDiv {
    width: 100%;
    display: flex;
}

.upperGrid {
    width: 100%;
    display: flex;
}

.upperRightDiv {
    width: 70%;
}

.innerDivImage {
    width: 50%;
    height: 321.24px;
    background-position: center;
    background-size: cover
}

.innerDivImage2 {
    width: 50%;
    height: 321.24px;
    background-position: center;
    background-size: cover
}

.leagueDivMain {
    padding-left: 10%;
    padding-right: 10%;
    padding-top: 20px;
    padding-bottom: 20px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.0) 0%, rgba(54, 13, 58, 0.3) 100%);
}

.leagueDivMainQuiz {
    padding-left: 10%;
    padding-right: 10%;
    padding-top: 20px;
    padding-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 30px;
    justify-content: space-between;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.0) 0%, rgba(243, 115, 18, 0.4) 100%);
}

.fadeImage {
    width: 50%;
}

.fadeImageQuiz {
    width: 50%;
    display: flex;
    gap: 30px;
}

.quizHeaderIcon {
    width: 20px;
}

.headerTextQuiz {
    margin-bottom: 0px;
}

.quizIcon {
    width: 75px;
    height: 75px;
    margin-bottom: 10px;
}

.quizRowFirst {
    display: flex;
    margin-top: 25px;
    width: 100%;
    gap: 20px;
    box-sizing: border-box;
}

.carouselQuizCard {
    background-image: url("../images/imageQuiz.svg");
    width: 100%;
    height: 400px;
    background-position: center;
    background-size: cover;
    border-radius: 10px;
    position: relative;
}

.carouselQuizCardRed {
    background-image: url("../images/quizItem2.svg");
    width: 100%;
    height: 400px;
    border-radius: 10px;
    background-position: center;
    background-size: cover;
    position: relative;
}

.carouselTestTitle {
    color: white;
    align-self: flex-end;
}

.overlayTestContent {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-self: flex-end;
    width: 100%;
    margin-right: 30px;
    margin-bottom: -30px;
}

.overlayDivTest {
    position: absolute;
    top: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%);
    width: 100%;
    height: 100%;
    border-radius: 10px;
    display: flex;
    align-content: end;
    justify-content: end;
}

.quizRow {
    display: flex;
    margin-top: 45px;
    width: 100%;
    gap: 20px;
    box-sizing: border-box;
}

.quizItem {
    width: 22.5%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.testSubTitle {
    margin-top: 10px;
    color: rgba(143, 143, 143, 1);
    margin-bottom: 5px;
}

.modal-dialog {
    width: 100% !important;
    min-width: 650px !important;
    border: none !important;
    outline: none !important;
}

.testTitle {
    margin-bottom: 5px;
}

.modal-header {
    border: none !important;
    margin: 10px;
}

.modal-body {
    display: flex !important;
    justify-content: center !important;
    border: none !important;
    padding-bottom: 50px;
}

.countdown {
    width: 120px;
}

.modalBlobs {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
}

.modalBlob {
    width: 15px;
    height: 15px;
    background-color: #f6150a;
    border-radius: 100px;
    cursor: pointer;
}

.modalBlobActive {
    width: 15px;
    height: 15px;
    background-color: #a3a3a3;
    border-radius: 100px;
    cursor: pointer;
}

.questionTestDiv {
    align-self: flex-start;
    width: 70%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.gameChoice {
    background-color: #000;
    border-radius: 5px;
    height: 55px;
    display: flex;
    width: 25%;
    border: none;
    justify-content: center;
}

.gameChoices {
    justify-content: center;
    align-items: center;
    display: flex;
    gap: 10px;
    width: 100%;
}

#openFirstModal {
    background-color: #000;
    color: white;
    display: flex;
    align-self: center;
    text-align: center;
    justify-content: center;
    padding: 15px;
    width: 20%;
    margin: auto;
    text-align: center;
    border: none !important;
    margin-top: 40px !important;
}

.endButtonsDiv {
    display: flex;
    gap: 10px;
    width: 100%;
    margin-top: 20px;
    justify-content: center;
}

.playAgain {
    border: 1px solid #f6150a;
    color: #f6150a;
    background-color: transparent;
    width: 45%;
    border-radius: 100px;
    padding: 14px;
    margin-top: 10px;
}

.outofContent {
    color: #a3a3a3;
}

.scoreContent {
    font-weight: 700;
    font-size: 45px;
    color: #f6150a;
}

.choice {
    border: 1px solid #a3a3a3;
    padding: 15px;
}

.choiceCorrect {
    background-color: rgba(0, 187, 30, 1);
    padding: 15px;
}

.choiceWrong {
    background-color: rgba(238, 70, 35, 1);
    padding: 15px;
}

.choiceCorrectBorder {
    border: 1px solid rgba(0, 187, 30, 1);
    padding: 15px;
}

.imageChoice {
    width: 35px;
    align-self: center;
}

.testButton {
    width: 45%;
    border-radius: 100px;
    border: none;
    background-color: #000;
    color: white;
    display: flex;
    padding: 14px;
    margin-top: 10px;
    justify-content: center;
    gap: 10px;
}

.shareDiv {
    width: 100%;
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-bottom: 20px;
    margin-top: 40px;
}

.shareLogo {
    width: 25px;
}

.modal-content {
    border: none !important;
}

.modal-footer {
    border: none !important;
}

.testButtonActive {
    width: 45%;
    border-radius: 100px;
    border: none;
    margin-top: 10px;
    background-color: #f6150a;
    color: white;
    display: flex;
    padding: 14px;
    justify-content: center;
    gap: 10px;
}

.modalButton {
    background-color: #000;
    display: flex;
    gap: 20px;
}

.testButtonActiveCarousel {
    align-self: flex-end;
    width: 25%;
    border-radius: 100px;
    border: none;
    margin-top: 10px;
    background-color: #f6150a;
    color: white;
    display: flex;
    padding: 14px;
    padding-right: 10px;
    padding-left: 10px;
    justify-content: center;
    gap: 10px;
}

.moreTestsHeader {
    margin-top: 40px;
    display: flex;
    gap: 10px;
    align-items: center;
}

.fadeImageInner {
    width: 100%;
}

.leagueDetailsInPred {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
}

.followersCount {
    margin-top: 20px;
    color: #595959;
}

.followButtonLeague {
    margin-top: 10px;
    background-color: #D6D6D6;
    color: white;
    border-radius: 100px;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: 10px;
    border: none;
    outline: none;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 20px;
    padding-right: 20px;
    margin-top: 20px;
}

.followButtonQuiz {
    margin-top: 10px;
    background: rgba(255, 122, 1, 0.08);
    color: white;
    border-radius: 100px;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: 10px;
    border: none;
    outline: none;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 20px;
    padding-right: 20px;
    margin-top: 20px;
}

.followButtonQuizPred {
    margin-top: 10px;
    background: rgba(255, 122, 1, 0.08);
    color: black;
    border-radius: 100px;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: 10px;
    border: none;
    outline: none;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 20px;
    padding-right: 20px;
    margin-top: 20px;
}

.questionDiv {
    background-color: white;
    padding: 10px;
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: column;
    width: 30%;
    border-radius: 5px;
    gap: 5px;
}

.DesktopCase {
    display: block;
}

.MobileCase {
    display: none;
}

.tablesAndResults {
    display: flex;
    flex-direction: row;
    gap: 60px;
    align-items: center;
}

/* .browseAllMobile {
      display: none;
  } */

.mobileSocialsShare {
    display: none;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.statTime {
    color: #f6150a;
}

.goalCount {
    font-size: 47px;
    font-weight: 800;
}

.currentMatchScore {
    margin-top: 60px;
    width: 100%;
    text-align: center;
}

.matchDetailsTeamCrest {
    width: 100px;
}

.goalOrAssist {
    display: flex;
    gap: 3px;
    font-weight: 600;
    margin-top: 3px;
}

.team1Details {
    text-align: center;
}

.currentScoreDetails {
    text-align: center;
}

.leagueCrestAndTime {
    text-align: center;
}

.fadedLeagueCrest {
    opacity: 40%;
    width: 40%;
    align-self: center;
}

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

.teamNameMatch {
    font-size: 17px;
    font-weight: 600;
}

.liveMatchTime {
    font-size: 20px;
    font-weight: 600;
}

.lowerMatchBlob {
    background-color: white;
    border-radius: 100px;
    padding: 12px;
    color: rgba(89, 89, 89, 1);
    min-width: 200px;
    padding-right: 20px;
    padding-left: 20px;
}

.lowerMatchDetails {
    padding-top: 30px;
    margin: auto;
}

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

.matchTimeline {
    margin-top: 28px;
    margin-bottom: 14px;
    position: relative;
    min-height: 165px;
    overflow: auto;
}

.mins {
    top: -10px;
    position: absolute;
    display: flex;
    width: 100%;
    justify-content: space-between;
}

.mins2 {
    top: -10px;
    position: absolute;
    display: flex;
    width: 100%;
    justify-content: space-between;
}

.minBlob {
    text-align: center;
    max-width: 110px;
    min-width: 110px;
    width: 50px;
    border-radius: 100px;
    background-color: white;
    margin-top: 110px;
    margin-right: 30px
}

.minBlobUpper {
    margin-top: 10px;
    max-width: 110px;
    min-width: 110px;
    width: 50px;
    border-radius: 10px;
    margin-right: 30px;
    text-align: center;
}

.minBlobLower {
    margin-top: 35px !important;
    max-width: 50px;
    min-width: 50px;
    width: 50px;
}

.innerBlobItem {
    width: 49%;
}

.matchContentContainer {
}

.matchPageContent {
    background-color: white;
    width: 100%;
    margin-top: 5px;
    padding-top: 12px;
    padding-bottom: 30px;
}

.statsHeader {
    display: flex;
    gap: 14px;
    align-items: center;
}

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

.leftMatchSide {
    width: 99%;
    display: flex;
    flex-direction: column;
    gap: 35px;
}

.predScoreInMatches {
    text-align: center !important;
}

.predInput {
    width: 37px;
    height: 37px;
    background-color: #EEEEEE;
    outline: none;
    border-radius: 5px;
    border: none;
}

.predScoreMatchesTitle {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 15px;
}

.headTitleInMatch {
    font-size: 20px;
    font-weight: 600;
}

.subHeadTitleInMatch {
    font-size: 15px;
    font-weight: 800;
    margin-bottom: 15px;
    margin-top: 15px;
}

.allMatchStats {
    width: 100%;
    margin-top: 12px;
}

.statCard {
    text-align: center;
    font-weight: 700;
    padding-bottom: 30px;
}

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

.team1Stats {
    position: relative;
}

.completeStat {
    position: absolute;
    height: 6px;
    width: 100%;
    background-color: #000000;
    border-radius: 5px;
}

.actualStatLeft {
    position: absolute;
    height: 6px;
    background-color: rgba(3, 70, 148, 1);
    border-radius: 5px;
    left: 0;
}

.actualStat {
    position: absolute;
    height: 6px;
    background-color: rgba(3, 70, 148, 1);
    border-radius: 5px;
}

.leftStat {
    align-self: flex-end;
}

.rightStat {
    align-self: flex-start;
}

.allMatchesLeftRight {
    padding-bottom: 50px;
}

.teamsStandingsInMatches {
    margin-top: 20px;
    width: 100%;
}

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

.plansHeader {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 5px;
}

.teamInMOTM {
    display: flex;
    align-items: center;
    gap: 5px;
}

.ratingDiv {
    background-color: rgba(255, 122, 1, 0.08);
    width: 65px;
    border-radius: 100px;
    height: 40px;
    display: flex;
    align-items: center;
    gap: 5px;
    justify-content: center;
    margin-top: 8px;
}

.MOTMIcon {
    width: 20px;
}

.MotmCard {
    text-align: center;
}

.teamNameInMotm {
    margin: 0 !important;
    padding: 0 !important;
}

.playerNameInMotm {
    margin: 0 !important;
    padding: 0 !important;
    font-weight: 800;
    font-size: 18px;
}

.subsInfo {
}

.subsInfoWithIcon {
}

.fullScreenDiv {
    width: 100% !important;
    margin: unset !important;
}

.motmContainer {
}

.specialModalHeader {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    justify-content: center;
}

.specialModalHeaderText {
    font-size: 17px;
    color: #000;
    font-weight: 600;
}

.modalContantInner {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    justify-content: center;
}

.modalTeamDiv {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    justify-content: center;
}

.timersIcon {
    width: 20px;
}

.timerDiv {
    display: flex;
    gap: 10px;
}

.mainModalContnet {
    display: flex;
    gap: 20px;
    align-items: center;
}

.modalInput {
    width: 50px;
    height: 50px;
    background-color: rgba(238, 238, 238, 1);
    border-radius: 10px;
    border: none;
}

.middleModalDiv {
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: center;
}

.leagueLogoInModal {
    width: 30px;
}

.modalSecondDiv {
    display: flex;
    flex-direction: row;
    width: 100%;
    gap: 20px;
    margin-top: 40px;
}

#modalDialogCustom {
    min-width: 850px !important;
}

.customSelect {
    width: 90%;
    border: 2px solid rgba(240, 240, 240, 1);
    border-radius: 5px;
    height: 45px;
}

.selectDivs {
    display: flex;
    gap: 10px;
    width: 100%;
    justify-content: space-between;
}

.innerSelectDivs {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    justify-content: center;
    align-items: center;
}

.selectMainDiv {
    width: 50%;
}

.selectSecondryDiv {
    width: 50%;
}

.specialModalHeaderLeft {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin-bottom: 24px;
}

.dividerHorizontal {
    height: 140px;
    width: 4px;
    border-radius: 20px;
    background-color: #000000;
}

.dividerHorizontalSmall {
    height: 50px;
    width: 2px;
    background-color: #000000;
}

.otherPreds {
    display: flex;
    gap: 20px;
    margin-top: 30px;
    width: 100%;
    align-items: center;
    justify-content: center;
}

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

.teamPredDiv {
    width: 30%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background-color: rgba(245, 245, 245, 1);
    border-radius: 10px;
    padding: 10px;
    padding-top: 20px;
    padding-bottom: 20px;
}

.smallerTeamCrest {
    width: 25px;
}

.modalInputSmaller {
    width: 30px;
    height: 30px;
    background-color: rgba(238, 238, 238, 1);
    border-radius: 10px;
    border: none;
}

.testButtonNoRaduis {
    width: 55%;
    border-radius: 0px;
    border: none;
    background-color: #000;
    color: white;
    display: flex;
    padding: 14px;
    margin-top: 10px;
    justify-content: center;
    gap: 10px;
}

.footballField {
    width: 370px;
    height: 500px;
    position: relative;
}

.footballFieldImage {
    width: 100%;
    position: relative;
}

/*4-3-3*/
.playerDivOnMapF433 {
    position: absolute;
    top: 10px;
    left: 40%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
}

.playerDivOnMap2F433 {
    position: absolute;
    top: 20%;
    left: 53%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
}

.playerDivOnMap3F433 {
    position: absolute;
    top: 25%;
    left: 5%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
}

.playerDivOnMap4F433 {
    position: absolute;
    top: 25%;
    right: 5%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
}

.playerDivOnMap5F433 {
    position: absolute;
    top: 20%;
    right: 56%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
}

.playerDivOnMap6F433 {
    position: absolute;
    bottom: 43%;
    right: 44%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
}

.playerDivOnMap7F433 {
    position: absolute;
    bottom: 35%;
    right: 15%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
}

.playerDivOnMap8F433 {
    position: absolute;
    bottom: 35%;
    left: 15%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
}

.playerDivOnMap9F433 {
    position: absolute;
    bottom: 10%;
    left: 15%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
}

.playerDivOnMap10F433 {
    position: absolute;
    bottom: 5%;
    left: 44%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
}

.playerDivOnMap11F433 {
    position: absolute;
    bottom: 10%;
    right: 15%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
}

/* Plan 4-5-1 Desktop*/
.playerDivOnMapF451 {
    position: absolute;
    top: 9px;
    left: 43%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
}

.playerDivOnMap2F451 {
    position: absolute;
    top: 25%;
    left: 53%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
}

.playerDivOnMap3F451 {
    position: absolute;
    top: 25%;
    left: 10%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
}

.playerDivOnMap4F451 {
    position: absolute;
    top: 25%;
    right: 10%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
}

.playerDivOnMap5F451 {
    position: absolute;
    top: 25%;
    right: 53%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
}

.playerDivOnMap6F451 {
    position: absolute;
    bottom: 10%;
    right: 42%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
}

.playerDivOnMap7F451 {
    position: absolute;
    bottom: 30%;
    right: 6%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
}

.playerDivOnMap8F451 {
    position: absolute;
    bottom: 30%;
    left: 24%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
}

.playerDivOnMap9F451 {
    position: absolute;
    bottom: 30%;
    left: 6%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
}

.playerDivOnMap10F451 {
    position: absolute;
    bottom: 30%;
    left: 62%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
}

.playerDivOnMap11F451 {
    position: absolute;
    bottom: 30%;
    right: 43%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
}

/* plan 4-4-2*/
.playerDivOnMapF442 {
    position: absolute;
    top: 9px;
    left: 43%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
}

.playerDivOnMap2F442 {
    position: absolute;
    top: 25%;
    left: 53%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
}

.playerDivOnMap3F442 {
    position: absolute;
    top: 25%;
    left: 10%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
}

.playerDivOnMap4F442 {
    position: absolute;
    top: 25%;
    right: 10%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
}

.playerDivOnMap5F442 {
    position: absolute;
    top: 25%;
    right: 53%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
}

.playerDivOnMap6F442 {
    position: absolute;
    bottom: 10%;
    right: 60%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
}

.playerDivOnMap7F442 {
    position: absolute;
    bottom: 10%;
    right: 20%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
}

.playerDivOnMap8F442 {
    position: absolute;
    bottom: 30%;
    left: 34%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
}

.playerDivOnMap9F442 {
    position: absolute;
    bottom: 30%;
    left: 16%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
}

.playerDivOnMap10F442 {
    position: absolute;
    bottom: 30%;
    left: 72%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
}

.playerDivOnMap11F442 {
    position: absolute;
    bottom: 30%;
    right: 33%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
}

/*Plan 4-4-1-1 */
.playerDivOnMapF4411 {
    position: absolute;
    top: 10px;
    left: 45%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
}

.playerDivOnMap2F4411 {
    position: absolute;
    top: 23%;
    left: 53%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
}

.playerDivOnMap3F4411 {
    position: absolute;
    top: 23%;
    left: 10%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
}

.playerDivOnMap4F4411 {
    position: absolute;
    top: 23%;
    right: 10%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
}

.playerDivOnMap5F4411 {
    position: absolute;
    top: 23%;
    right: 53%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
}

.playerDivOnMap6F4411 {
    position: absolute;
    bottom: 35%;
    right: 24%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
}

.playerDivOnMap7F4411 {
    position: absolute;
    bottom: 35%;
    right: 6%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
}

.playerDivOnMap8F4411 {
    position: absolute;
    bottom: 35%;
    left: 24%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
}

.playerDivOnMap9F4411 {
    position: absolute;
    bottom: 35%;
    left: 6%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
}

.playerDivOnMap10F4411 {
    position: absolute;
    bottom: 27%;
    left: 44%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
}

.playerDivOnMap11F4411 {
    position: absolute;
    bottom: 7%;
    right: 43%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
}

/*Plan 4-2-3-1 */
.playerDivOnMapF4231 {
    position: absolute;
    top: 10px;
    left: 41%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
}

.playerDivOnMap2F4231 {
    position: absolute;
    top: 23%;
    left: 53%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
}

.playerDivOnMap3F4231 {
    position: absolute;
    top: 23%;
    left: 4%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
}

.playerDivOnMap4F4231 {
    position: absolute;
    top: 23%;
    right: 2%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
}

.playerDivOnMap5F4231 {
    position: absolute;
    top: 23%;
    right: 53%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
}

.playerDivOnMap6F4231 {
    position: absolute;
    bottom: 40%;
    right: 24%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
}

.playerDivOnMap7F4231 {
    position: absolute;
    bottom: 25%;
    right: 6%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
}

.playerDivOnMap8F4231 {
    position: absolute;
    bottom: 40%;
    left: 24%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
}

.playerDivOnMap9F4231 {
    position: absolute;
    bottom: 25%;
    left: 6%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
}

.playerDivOnMap10F4231 {
    position: absolute;
    bottom: 24%;
    left: 44%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
}

.playerDivOnMap11F4231 {
    position: absolute;
    bottom: 7%;
    right: 43%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
}

/*Plan 3-5-2 */
.playerDivOnMapF352 {
    position: absolute;
    top: 10px;
    left: 45%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
}

.playerDivOnMap2F352 {
    position: absolute;
    top: 20%;
    left: 41%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
}

.playerDivOnMap3F352 {
    position: absolute;
    top: 20%;
    left: 10%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
}

.playerDivOnMap4F352 {
    position: absolute;
    top: 20%;
    right: 6%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
}

.playerDivOnMap5F352 {
    position: absolute;
    top: 55%;
    right: 41%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
}

.playerDivOnMap6F352 {
    position: absolute;
    bottom: 40%;
    right: 25%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
}

.playerDivOnMap7F352 {
    position: absolute;
    bottom: 43%;
    right: 6%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
}

.playerDivOnMap8F352 {
    position: absolute;
    bottom: 43%;
    left: 31%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
}

.playerDivOnMap9F352 {
    position: absolute;
    bottom: 43%;
    left: 6%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
}

.playerDivOnMap10F352 {
    position: absolute;
    bottom: 8%;
    left: 30%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
}

.playerDivOnMap11F352 {
    position: absolute;
    bottom: 8%;
    right: 30%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
}

/*Plan 3-4-3 */
.playerDivOnMapF343 {
    position: absolute;
    top: 10px;
    left: 45%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
}

.playerDivOnMap2F343 {
    position: absolute;
    top: 20%;
    left: 45%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
}

.playerDivOnMap3F343 {
    position: absolute;
    top: 20%;
    left: 10%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
}

.playerDivOnMap4F343 {
    position: absolute;
    top: 20%;
    right: 10%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
}

.playerDivOnMap5F343 {
    position: absolute;
    bottom: 43%;
    right: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
}

.playerDivOnMap6F343 {
    position: absolute;
    bottom: 43%;
    right: 30%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
}

.playerDivOnMap7F343 {
    position: absolute;
    bottom: 43%;
    right: 10%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
}

.playerDivOnMap8F343 {
    position: absolute;
    bottom: 43%;
    left: 14%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
}

.playerDivOnMap9F343 {
    position: absolute;
    bottom: 20%;
    left: 20%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
}

.playerDivOnMap10F343 {
    position: absolute;
    bottom: 20%;
    left: 44%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
}

.playerDivOnMap11F343 {
    position: absolute;
    bottom: 20%;
    right: 20%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
}

.playerDivOnMapF3241 {
    position: absolute;
    top: 10px;
    left: 45%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
}

.playerDivOnMap2F3241 {
    position: absolute;
    top: 20%;
    left: 45%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
}

.playerDivOnMap3F3241 {
    position: absolute;
    top: 20%;
    left: 10%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
}

.playerDivOnMap4F3241 {
    position: absolute;
    top: 20%;
    right: 10%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
}

.playerDivOnMap5F3241 {
    position: absolute;
    bottom: 45%;
    right: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
}

.playerDivOnMap6F3241 {
    position: absolute;
    bottom: 45%;
    right: 30%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
}

.playerDivOnMap7F3241 {
    position: absolute;
    bottom: 25%;
    right: 30%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
}

.playerDivOnMap8F3241 {
    position: absolute;
    bottom: 25%;
    left: 34%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
}

.playerDivOnMap9F3241 {
    position: absolute;
    bottom: 25%;
    left: 10%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
}

.playerDivOnMap10F3241 {
    position: absolute;
    bottom: 7%;
    left: 44%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
}

.playerDivOnMap11F3241 {
    position: absolute;
    bottom: 25%;
    right: 10%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
}

/*Plan 4-2-4 */
.playerDivOnMapF424 {
    position: absolute;
    top: 10px;
    left: 45%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
}

.playerDivOnMap2F424 {
    position: absolute;
    top: 20%;
    left: 55%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
}

.playerDivOnMap3F424 {
    position: absolute;
    top: 20%;
    left: 10%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
}

.playerDivOnMap4F424 {
    position: absolute;
    top: 20%;
    right: 10%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
}

.playerDivOnMap5F424 {
    position: absolute;
    top: 20%;
    right: 55%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
}

.playerDivOnMap6F424 {
    position: absolute;
    bottom: 37%;
    right: 30%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
}

.playerDivOnMap7F424 {
    position: absolute;
    bottom: 37%;
    right: 55%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
}

.playerDivOnMap8F424 {
    position: absolute;
    bottom: 7%;
    right: 30%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
}

.playerDivOnMap9F424 {
    position: absolute;
    bottom: 20%;
    left: 10%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
}

.playerDivOnMap10F424 {
    position: absolute;
    bottom: 7%;
    left: 30%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
}

.playerDivOnMap11F424 {
    position: absolute;
    bottom: 20%;
    right: 10%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
}

/*Plan  4-1-2-1-2 */
.playerDivOnMapF41212 {
    position: absolute;
    top: 10px;
    left: 45%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
}

.playerDivOnMap2F41212 {
    position: absolute;
    top: 20%;
    left: 55%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
}

.playerDivOnMap3F41212 {
    position: absolute;
    top: 20%;
    left: 10%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
}

.playerDivOnMap4F41212 {
    position: absolute;
    top: 20%;
    right: 10%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
}

.playerDivOnMap5F41212 {
    position: absolute;
    top: 20%;
    right: 55%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
}

.playerDivOnMap6F41212 {
    position: absolute;
    bottom: 48%;
    right: 42%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
}

.playerDivOnMap7F41212 {
    position: absolute;
    bottom: 37%;
    right: 60%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
}

.playerDivOnMap8F41212 {
    position: absolute;
    bottom: 7%;
    right: 30%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
}

.playerDivOnMap9F41212 {
    position: absolute;
    bottom: 37%;
    left: 60%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
}

.playerDivOnMap10F41212 {
    position: absolute;
    bottom: 7%;
    left: 30%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
}

.playerDivOnMap11F41212 {
    position: absolute;
    bottom: 22%;
    right: 42%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
}

/*Plan  4-1-1-1 */
.playerDivOnMapF4141 {
    position: absolute;
    top: 10px;
    left: 45%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
}

.playerDivOnMap2F4141 {
    position: absolute;
    top: 20%;
    left: 55%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
}

.playerDivOnMap3F4141 {
    position: absolute;
    top: 20%;
    left: 10%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
}

.playerDivOnMap4F4141 {
    position: absolute;
    top: 20%;
    right: 6%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
}

.playerDivOnMap5F4141 {
    position: absolute;
    top: 20%;
    right: 55%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
}

.playerDivOnMap6F4141 {
    position: absolute;
    bottom: 45%;
    right: 42%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
}

.playerDivOnMap7F4141 {
    position: absolute;
    bottom: 25%;
    right: 55%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
}

.playerDivOnMap8F4141 {
    position: absolute;
    bottom: 25%;
    right: 10%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
}

.playerDivOnMap9F4141 {
    position: absolute;
    bottom: 25%;
    left: 55%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
}

.playerDivOnMap10F4141 {
    position: absolute;
    bottom: 7%;
    left: 43%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
}

.playerDivOnMap11F4141 {
    position: absolute;
    bottom: 25%;
    left: 10%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
}

.playerRating {
    color: white;
    display: flex;
    gap: 2px;
}

/*Player Videos End*/


@media (max-width: 768px) {

    .accordionCrest {
        width: 20px;
    }

    .accordionBodyTitle {
        margin-right: 20px;
        margin-top: 20px;
    }

    .accordrionBody {
        background-color: rgba(245, 245, 245, 1);
        padding-bottom: 20px;
        padding-top: 10px;
    }

    .accordion-button {
        background-color: white !important;
        outline: none !important;
        box-shadow: none !important;
        border: none !important;
        padding:6px !important;
    }

    .headerTextContainer {
        display: flex;
        justify-content: space-between;
        padding-left: 25px;
        padding-right: 25px;
        margin-bottom: 20px;
    }

    .teamStatus {
        width: 10px;
    }

    .headerTwoTextAccordion {
        display: flex;
        gap: 16px;
    }

    .accordionHeader {
        width: 100%;
        display: flex;
        justify-content: space-between;
    }

    .headerTextAccordion {
        width: 50%;
    }

    .headerOne {
        width: 50%;
        display: flex;
        gap: 0px;
        align-items: center;
    }

    .headerTwo {
        display: flex;
        gap: 25px;
    }

    .sliderAndAllDays {
        width: 100%;
        display: flex;
        flex-direction: row;
        gap: 10px;
    }

    .slider {
        /*width: 80%;*/
        overflow-x: auto;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-y: hidden;
        gap: 20px;
        text-align: center;
    }

        .slider::-webkit-scrollbar {
            display: none;
        }

    .innerSliderDate {
        color: rgba(143, 143, 143, 1);
    }

    .activeDay {
        color: white;
        display: flex;
        flex-direction: column;
        gap: 2px;
        align-items: center;
        justify-content: center;
        background-color: #000000;
        min-width: 100px;
        min-height: 100px;
        border-radius: 100px;
    }

    .inactiveDay {
        color: black;
        display: flex;
        flex-direction: column;
        gap: 2px;
        align-items: center;
        justify-content: center;
        background-color: white;
        min-width: 100px;
        min-height: 100px;
        border-radius: 100px;
    }

    .outerCircleMobile {
        position: absolute;
        width: 5px;
        height: 5px;
        border-radius: 100%;
        background-color: #D6D6D6;
    }

    .myCircleMobile {
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        border: 3px solid #D6D6D6;
        width: 15px;
        height: 15px;
        border-radius: 100%;
        background-color: transparent;
    }

    hr {
        margin-top: 0px;
        border-radius: 10px;
    }

    .playerJourneyMobileUpper {
        display: flex;
        gap: 20px;
    }

    .playerJourneyMobileMiddle {
        display: flex;
        gap: 20px;
        flex-direction: column;
    }

    .playerJourneyMobileMain {
        display: flex;
        justify-content: space-between;
        width: 95%;
    }

    .clubCrestIcon {
        width: 30px;
    }

    .playerJourneyMobileContainer {
        display: flex;
        gap: 20px;
        flex-direction: column;
        position: absolute;
        right: 6px;
        transform: translateX(-50%);
    }

    .calButton {
        width: 22%;
        display: flex;
        flex-direction: column;
        gap: 6px;
        background-color: white;
        color: #000;
        align-items: center;
        justify-content: center;
        border: none;
        outline: none;
        font-weight: 700;
    }

    .image-container {
        position: relative;
        display: inline-block;
        width: 100%;
    }

    .calSlider {
        width: 20px;
    }

    /*    .carouselImage {
        max-width: 100%;
        height: auto;
        display: block;
      } */

    .image-container::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%);
        pointer-events: none;
    }

    .exclusiveText {
        text-align: center;
    }

    .exclusive {
        z-index: 2;
        padding: 3px;
        width: 50%;
        text-align: center;
        background-color: #f6150a;
        color: white;
        text-align: center;
    }

    .carousel-title {
        position: absolute;
        bottom: 10px;
        padding-right: 20px;
        width: 80%;
    }

    .innerCarouselTitle {
        color: white;
        z-index: 2;
        font-size: 15px;
    }

    .carouselDateInner {
        font-size: 15px;
        z-index: 1;
        color: #a7a7a7;
    }

    .multiDate {
        font-size: 15px;
        z-index: 1;
        display: flex;
        color: #a7a7a7;
        padding-right: 10px;
    }

    .mobileDate {
        font-size: 12px;
        font-weight: 500;
        color: #a7a7a7;
    }

    .mobileSocialsShare {
        display: flex;
        flex-direction: column;
        gap: 5px;
    }

    .teamNameMobile {
        font-size: 17px;
        font-weight: 700;
        margin-bottom: 5px;
    }

    .carouselImage {
        object-fit: cover;
        width: 100%;
        height: 250px;
    }

    .sourceImage {
        width: 15%;
    }

    .articleDiv {
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    .source {
        display: flex;
        gap: 10px;
        align-items: center;
        justify-content: center;
        width: 50%;
    }

    .sorucetext {
        font-size: 15px;
        font-weight: 600;
    }

    .sourceAndSocials {
        display: flex;
        justify-content: space-between;
        margin-top: 5px;
    }

    .articleTitle {
        width: 100%;
    }

    .articleDate {
        color: #8F8F8F;
        font-size: 15px;
    }

    .articleP {
        color: #8F8F8F;
    }

    .carousel-item {
        width: 100%;
        height: 250px;
        object-fit: contain;
    }

    .timelineMobile {
        position: relative;
        width: 3px;
        height: 400px;
        background-color: #000;
    }

    #nav-tab {
        border-bottom: 0px !important;
        padding-bottom: 10px !important;
        /*        padding-top: 10px !important;*/
    }

    .nav-tabs .nav-item.show .nav-link,
    .nav-tabs .nav-link.active {
        background-color: transparent !important;
        border: 0px !important;
        color: #000 !important;
        outline: none !important;
        box-shadow: none !important;
        font-size: 11px;
        font-weight: 700 !important;
    }

    .nav-link {
        background-color: transparent !important;
        border: 0px !important;
        color: #000 !important;
        outline: none !important;
        box-shadow: none !important;
        font-size: 11px;
        font-weight: 700 !important;
    }

    .clubCrestMobile {
        height: 40px;
        min-height: 40px;
        max-height: 40px;
    }

    #carouselIndicator {
        outline: none;
        border: none;
        width: 10px;
        height: 10px;
        border-radius: 100%;
        background-color: white;
    }

    .playerJourneyMobile {
        display: flex;
        padding-top: 30px;
    }

    .carousel-indicators-left {
        gap: 20px;
        display: flex;
        flex-direction: column;
        position: absolute;
        left: 30px;
        bottom: 30%;
        z-index: 15;
        transform: translateX(-50%);
    }

    .mobileClubHeader {
        position: relative;
        margin-bottom: 46px;
        margin-top: 5px;
    }

    .mobileClubTitle {
        font-size: 20px;
        font-weight: 800;
    }

    .mobileCoachCard {
        background-color: white;
        padding: 20px;
        margin-top: 30px;
    }

    .coachRole {
        font-size: 13px;
        color: rgba(143, 143, 143, 1);
    }

    .coachName {
        color: #000;
        font-weight: 22px;
        font-weight: 600;
    }

    .clubCardNumber {
        font-size: 25px;
        color: #f6150a;
        font-weight: 600;
    }

    .multimediaMobileTitle {
        margin-bottom: 20px;
        font-weight: 600;
        font-size: 17px;
    }

    .multimediaTitleCard {
        font-size: 17px;
        font-weight: 600;
        color: #000;
    }

    .vidPlaceholder {
        margin-top: 20px;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }

    .realtedVidsMobile {
        margin-top: 20px;
        font-weight: 600;
        font-size: 17px;
    }

    .vidDesc {
        margin-top: 10px;
        color: rgba(89, 89, 89, 1);
    }

    .sharVidButton {
        background-color: rgba(214, 214, 214, 1);
        border-radius: 100px;
        outline: none;
        border: none;
        display: flex;
        gap: 10px;
        height: 40px;
        align-items: center;
        padding-right: 15px;
        padding-left: 15px;
    }

    .mobileVidsDiv {
        position: relative;
        width: 100%;
        height: 250px;
        object-fit: fill;
    }

    .playIconMobile {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(50%);
        transform: translateY(50%);
    }

    .multimediaMobileImage {
        width: 100%;
        max-height: 200px;
        margin-bottom: 10px;
    }

    .socialImageMobile {
        width: 25px;
    }

    .multimediaTitleTiming {
        color: rgba(89, 89, 89, 1);
        font-size: 12px;
    }

    .playerMobileClub {
        text-align: center;
    }

    .nameInPlayerClub {
        font-size: 13px;
        font-weight: 600;
        margin-top: 10px;
    }

    .statInPlayerClub {
        color: #f6150a;
        font-weight: 600;
    }

    .clubCardMobile {
        background-color: white;
        padding-left: 15px;
        padding-right: 15px;
        border-radius: 5px;
        text-align: center;
        padding-top: 15px;
        padding-bottom: 15px;
    }

    .tableRowMobileCLub {
        width: 100%;
        display: flex;
        justify-content: space-between;
        padding-left: 5px;
        padding-right: 5px;
    }

    .clubMobileTable {
        margin-top: 20px;
    }

    .clubTableLogo {
        width: 35px;
    }

    .clubTableHeader {
        display: flex;
        gap: 10px;
        align-items: center;
        margin-top: 20px;
        font-size: 17px;
        font-weight: 600;
    }

    .clubMatchesTitle {
        margin-bottom: 20px;
        margin-top: 10px;
        padding-top: 10px;
    }

    .clubCardDesc {
        margin-top: 15px;
        font-size: 12px;
        color: rgba(143, 143, 143, 1);
    }

    .mobileClubFollowers {
        color: rgb(154, 154, 154);
    }

    .mobileClubFollowButton {
        background-color: #f6150a;
        height: 45px;
        border-radius: 100px;
        color: white;
        border: none !important;
        text-align: center;
        width: 100%;
    }

    .absoluteCrest {
        position: absolute;
        bottom: -40px;
        right: 20px;
    }

    .mobileClubNameAndFollowers {
        text-align: center;
    }

    .mobileMatches {
        display: block;
        padding-left: 5%;
        padding-right: 5%;
    }

    .teamCrestInClub {
        width: 90px;
    }

    .mobileMatchesNoPadding {
        display: block;
        padding-left: 0%;
        padding-right: 0%;
    }

    .mobileMatchesNoPadding {
        display: block;
    }

    .playerVideos {
        display: none
    }

    .playerVideosMobile {
        display: block;
        flex-direction: column;
        padding-top: 30px;
    }

    .newsUpper {
        display: none;
    }

    .allNewsMobileIcon {
        width: 14px;
        align-self: center;
    }

    .allNewsMobileButton {
        padding-top: 20px;
        display: block;
    }

    .allNewsMobileButtonLower {
        padding-top: 20px;
        display: block;
        margin-bottom: 40px;
    }

    #carouselExampleIndicators {
        display: block;
    }

    .bodyContainer {
        padding-right: 0%;
        padding-left: 0%;
    }

    .allNewsMobileButtonInner {
        display: flex;
        width: 100%;
        justify-content: center;
        padding: 10px;
        gap: 10px;
        border: 1px solid #000;
        background-color: #f5F5F5;
    }

    .newsTitle {
        width: 100%;
        font-size: 17.5px;
    }

    .newsTitleMulti {
        width: 100%;
        font-size: 16px;
        padding-top: 20px;
    }

    .mobileNewsDiv {
        width: 50%;
        display: flex;
        flex-direction: column;
    }

    .newsImageUpper {
        display: none;
        width: 110% !important;
        margin-right: -5%;
    }

    .newsImageCardMain {
        display: block;
        width: 110% !important;
        margin-right: -5%;
    }

    .newsButtonDiv {
        display: none;
    }

    .newsTitleActive {
        font-size: 17.5px;
        width: 100%;
        padding-right: 15px;
        padding-top: 10px;
        color: #f6150a;
    }

    .newsTitleActiveMulti {
        font-size: 16px;
        width: 100%;
        padding-right: 10px;
        padding-top: 5px;
        /* color: #f6150a;*/
    }

    .MobileHeaderLogo {
        position: absolute;
        width: 190px;
        top: 0px;
        right: 25%;
        padding-top: 3px;
    }

    .dateMobile {
        display: block;
        font-size: 15px;
        width: 80%;
        padding-right: 15px;
        padding-top: 10px;
        color: #676767;
    }

    .matchCard {
        background-color: white;
    }

    .infoCard {
        background-color: white;
    }

    .newsCard {
        display: flex;
        flex-direction: row;
        border: none;
    }

    .newsCardVids {
        width: 100%;
        border: none;
        position: relative;
    }

    .newsCardVidsMulti {
        width: 50%;
        display: flex;
        flex-direction: column;
        border: none;
    }

    .arrowIcon {
        display: none;
    }

    .statLogo {
        width: 30px;
    }

    .statTitle {
        font-size: 20px;
        font-weight: 600;
    }

    table {
        border: none;
    }

    tr {
        border-style: none !important;
    }

    th {
        border-bottom-width: 0px !important;
    }

    td {
        border-bottom-width: 0px !important;
    }

    .tableLeagueTitle {
        font-size: 13px;
    }

    thead {
        border-bottom: 20px solid #f5F5F5;
        /* Adjust the border thickness as needed */
    }

    .navbar-toggler {
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
    }

        .navbar-toggler:active {
            border: none !important;
            outline: none !important;
            box-shadow: none !important;
        }

        .navbar-toggler:focus-visible {
            border: none !important;
            outline: none !important;
            box-shadow: none !important;
        }

    body {
        font-family: 'Cairo', sans-serif;
        direction: rtl;
        padding-bottom: 100px;
        background-color: #F5F5F5;
    }

    .mobileHeader {
        padding-top: 20px;
        margin: auto;
        width: 90%;
        display: flex;
        justify-content: space-between;
    }

    .headerIcons {
        width: 20px;
    }

    .form-control {
        border: none;
    }

        .form-control::placeholder {
            float: right;
        }

    .searchButton {
        background-color: #000;
        color: white;
        border-top-left-radius: 0px;
        border-bottom-left-radius: 0px;
        display: flex;
        align-items: center;
        gap: 7px;
        width: 100% !important;
    }

    .searchIconButton {
        background-color: #000;
        width: 10px;
    }

    .headerIconsProf {
        width: 30px;
    }

    .input-group {
        direction: ltr;
        margin-bottom: 0px !important;
    }

    .mobileAddDiv {
        background-color: #000;
        width: 90%;
        margin: auto;
        padding: 50px;
        margin-top: 30px;
        align-items: center;
        text-align: center;
    }

    .mobileNav {
        direction: ltr;
        display: block;
        background-color: #F5F5F5 !important;
        background-image: url("../images/mobileBG11.jpg");
        /*        background-size:contain;*/
    }

    .multimediaButtons {
        display: flex;
        gap: 10px;
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .mobileAddDiv {
        display: block;
    }

    .playIcon {
        z-index: 2;
        width: 22%;
        padding-bottom: 10px;
    }

    .multimediaButton {
        justify-content: center;
        display: flex;
        gap: 5px;
        background-color: white;
        padding: 15px;
        border-radius: 20px;
    }

    .multimediaIcon {
        width: 20px;
        height: 20px;
        align-self: center;
    }

    .playerImages {
        display: none;
    }

    .mobileMultimediaDiv {
        display: flex;
        flex-direction: column;
    }

    .mobileAddDiv2 {
        background-color: #000;
        width: 90%;
        margin: auto;
        padding: 90px;
        margin-top: 30px;
        align-items: center;
        text-align: center;
        display: block;
    }

    .titleDiv2 {
        display: none;
    }

    .addTitle {
        color: white;
    }

    .searchHeader {
        display: flex;
        width: 100%;
        margin: auto;
        padding-top: 20px;
    }

    .serachDivIcon {
        background-color: #dadada !important;
    }

    .searchInput {
        border: none;
    }

    .navbar-collapse {
        direction: rtl !important;
    }

    .searchInputMobile {
        border: none;
        background-color: #dadada !important;
        outline: none !important;
        box-shadow: none !important;
        text-align: center !important;
    }

    .reverseSearchbar {
        display: flex;
        flex-direction: row-reverse;
    }

    .articleContent {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 15px;
        margin-top: 30px;
        margin-right: 10px;
    }

    .topbar {
        display: none;
    }

    .navbarCustom {
        display: none;
    }

    .matchCarousel {
        display: none;
    }

    .containerDiv {
        display: flex;
        flex-direction: row;
    }

    .playerProfile {
        display: flex;
        padding-top: 30px;
        padding-bottom: 30px;
        flex-direction: column;
    }

    .playerInfo {
        width: 100%;
        margin-bottom: 30px;
    }

    .playerNews {
        display: none;
    }

    .tablesContainer {
        width: 100%;
        display: flex;
        gap: 20px;
        flex-direction: column;
    }

    .playerNewsLower {
    }

    .upperInfoDiv {
        display: flex;
        width: 90%;
        margin: auto;
        gap: 30px
    }

    .lowerInfoDiv {
        gap: 30px;
        display: flex;
        width: 90%;
        margin: auto;
    }

    #pills-tab {
        width: 100%;
        justify-content: space-between;
        padding: 0px !important;
        margin-top: 5px;
    }

    .infoCard {
        text-align: center;
        border: 1px solid #E8E8E8;
    }

    .infoIconDiv {
        display: flex;
        align-self: flex-start;
    }

    .upperDateMobile {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .adsDiv {
        display: none;
    }

    .matchcesDiv {
        width: 100%;
    }

    .PreviousMatches {
        display: none;
    }

    .matchCardsDiv {
        display: flex;
        gap: 10px;
        padding-top: 15px;
        flex-direction: column;
    }

    .matchCard2 {
        display: none;
    }

    .titleIcon {
        display: none;
    }

    .mainNews {
        display: flex;
        flex-direction: column;
    }

    .newsImage {
        height: 150px;
        width: 50%;
    }

    .newsImageMulti {
        width: 100%;
        height: 150px;
        object-fit: cover;
    }

    .register {
        display: none;
    }

    .footer {
        display: none;
    }

    .playerJourney {
        display: none;
    }

    .mobileBottomNav {
        z-index: 999;
        padding-left: 2%;
        padding-right: 2%;
        padding-bottom: 3%;
        height: 71px;
        position: fixed;
        bottom: 0;
        width: 100%;
        background-color: white;
        display: flex;
        justify-content: space-between;
    }

    .bottomNavItem {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        text-align: center;
        font-size: 13px;
    }

    .bottomNavIcon {
        width: 25px;
        align-self: center;
    }

    .leaguesContainer {
        /* width: 90%;*/
        margin-bottom: 10px;
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        padding-left: 10px;
        margin: auto;
        scroll-behavior: smooth;
        scroll-snap-type: both;
        scrollbar-width: none;
    }

        .leaguesContainer .col-2 {
            width: 100px !important;
            padding-left: unset !important;
        }

    .DesktopCase {
        display: none;
    }

    .MobileCase {
        display: block;
    }

    .mobileNewsThumb {
        /*width: 100%;*/ /* Set the width to 100% */
        /*object-fit: cover;*/ /* Similar to background-size: cover */
        /*object-position: center;*/ /* Similar to background-position: center */
        /*height: 100%;*/

        height: 100px;
        width: 100%;
        object-fit: cover;
        border-radius: 0.5rem;
    }

    .mobileItemDate {
        color: rgba(143, 143, 143, 1);
        font-size: 14px;
    }

    .browseAllMobile {
        width: 100%;
        border: none;
        border-radius: 5px;
        background-color: rgba(225, 225, 225, 1);
        height: 45px;
        margin-top: 10px;
    }

    .leagueCrestInner {
        width: 95px;
        align-self: center;
    }

    .leagueContainerIcon {
        align-content: center;
        border: none;
        width: 90px;
        text-align: center;
        padding-top: 20px;
        padding-bottom: 20px;
        position: relative;
        height: 100%;
    }

    .leagueContainer {
        display: flex;
        align-items: center;
    }

    .leagueName {
        font-size: 12px;
        width: 100%;
        font-weight: 700;
    }

    .popular {
        background-color: white;
        width: 100%;
        border-radius: 10px;
        padding: 20px;
        margin-bottom: 20px;
        padding-bottom: 25px;
    }

    .marginTop {
        margin-top: 40px;
    }

    .popular2 {
        width: 90%;
        margin: auto;
        display: flex;
        flex-direction: column;
        background-color: white;
        border-radius: 10px;
        padding: 20px;
        margin-bottom: 40px;
        padding-bottom: 25px;
        margin-top: 40px;
    }

    .popularHeader {
        width: 100%;
        margin-top: -30px;
        margin-right: 30px;
    }

    .exportImageContainer {
        background-color: white !important;
        /* width: 40px;
          height: 40px; */
        border-radius: 100px;
        box-shadow: 2px 3px rgba(0, 0, 0, 0.07);
    }

    .exportImage {
        width: 100% !important;
    }

    .exportTitle {
        font-size: 600;
        font-size: 15px;
        width: 70%;
        margin-bottom: 15px;
    }

    .exportNewsHeaderMobile {
        width: 100%;
    }

    .innerExportNewsContainer {
        width: 100%;
    }

    .popularTitle {
        font-size: 13px;
    }

    .mobileFooter {
        width: 100%;
        background-color: #f6150a;
        padding-top: 40px;
        padding-bottom: 40px;
        text-align: center;
        background-image: url("../images/footerPattern.svg");
        background-repeat: no-repeat;
    }

    .mobileFooterButton {
        background-color: #000;
        width: 40%;
        margin: auto;
        border: none;
        color: white;
        height: 45px;
        border-radius: 5px;
    }

    .mobileFooterTitle {
        width: 85%;
        margin: auto;
        font-weight: 800;
        margin-bottom: 15px;
    }

    .mobileFooterSub {
        width: 80%;
        margin: auto;
        margin-bottom: 40px;
    }

    .mobilePreds {
        padding: 10px;
        padding-top: 40px;
        width: 90%;
        margin: auto;
        border-radius: 5px;
        background-color: white;
        position: relative;
        margin-bottom: 20px;
        margin-top: 30px;
    }

    .predScoreMobile {
        color: rgba(143, 143, 143, 1);
        margin-right: 8px;
    }

    .absoulteOverlay {
        background-color: white;
        border-radius: 100px;
        position: absolute;
        top: 0;
        left: 45%;
        margin-top: -20px;
        box-shadow: 2px 3px rgba(0, 0, 0, 0.07);
        padding: 10px;
    }

    .absoluteImage {
        width: 30px;
    }

    .mobilePredQuestion {
        font-size: 18px;
    }

    .scorePredMobile {
        width: 100%;
    }

    .mobilePts {
        color: #f6150a;
    }

    .customCirlce {
        border-radius: 100% !important;
        width: 20px !important;
        height: 20px !important;
    }

    .ptsDivMobile {
        width: 100%;
    }

    .questionDivMobile {
        margin-top: 10px;
    }

    .sendAnswer {
        background-color: #000;
        color: white;
        border: 5px;
        width: 80%;
        border-radius: 5px;
        height: 45px;
        margin-bottom: 18px;
    }

    .winnersMobile {
        width: 90%;
        margin: auto;
        background-color: white;
        padding: 20px;
        border-radius: 5px;
        margin-bottom: 20px;
        text-align: center;
    }

    .winnerDivMobile {
        text-align: center;
    }

    .winnerName {
        text-align: center;
        font-size: 12px;
        font-weight: 600;
    }

    .winnerPrize {
        color: #f6150a;
        font-size: 13px;
    }

    .addDivMobileHeader {
        height: 120px;
        width: 90%;
        margin: auto;
        background-color: #000;
        margin-top: 20px;
    }

    .mobileMatchCard {
        width: 97%;
        margin: auto;
        background-color: white;
        margin-top: 7px;
        padding: 8px;
        border-radius: 10px;
        margin-bottom: 10px;
    }

    .tags {
        display: flex;
        gap: 20px;
        margin-top: 20px;
        overflow-x: scroll;
        flex-wrap: nowrap;
        margin-bottom: 40px;
    }

        .tags::-webkit-scrollbar {
            display: none;
        }

    .tagButton {
        padding-top: 3px;
        padding-bottom: 3px;
        padding-left: 8px;
        padding-right: 8px;
        height: 40px;
        background-color: #000;
        border-radius: 5px;
        color: white;
        border: none;
        outline: none;
        box-shadow: none;
        white-space: nowrap;
    }

    #nav-tab2 {
        margin-bottom: 20px;
        margin-top: 15px;
    }

    #nav-home-tab2 {
        border: none !important;
    }

    #nav-profile-tab2 {
        border: none !important;
    }

    .liveDiv {
        display: flex;
        gap: 5px;
        align-items: center;
        justify-content: center;
    }

    .scoreMobile {
        background-color: transparent !important;
        font-size: 25px;
        font-weight: 800;
        color: black !important;
    }

    .leagueAndTime {
        text-align: center;
    }

    .leagueIconMob {
        width: 60%;
    }

    .livetime {
        font-size: 13px;
    }

    .matchCardTeam {
        text-align: center;
    }

    .matchCardCrest {
        width: 55px;
    }

    .matchCardButton {
        background-color: #000;
        color: white;
        border-radius: 100px;
        width: 80%;
        margin: auto;
        border: none;
        height: 37px;
        font-size: 13px;
        display: flex;
        gap: 5px;
        justify-content: center;
        align-items: center;
    }

    .tomorrowArrow {
        display: flex;
        gap: 5px;
    }

    .mainDay {
        font-weight: 800;
        font-size: 16px;
    }

    .insideContainerMatches {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .todaysMathes {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .allMatchesMobileFull {
        background-color: #f6150a;
        color: white;
        width: 100%;
        margin: auto;
        height: 40px;
        border: none;
        border-radius: 5px;
        margin-top: 20px;
        margin-bottom: 40px;
    }

    .scorrersTitle {
        margin-top: 20px;
        font-weight: 600;
    }

    .allMatchesMobile {
        display: flex;
        background-color: #f6150a;
        color: white;
        justify-content: center;
        align-items: center;
        width: 90%;
        margin: auto;
        height: 40px;
        border: none;
        border-radius: 5px;
        margin-top: 10px;
        gap: 10px;
    }

    .paddingContainerMob {
        width: 100%;
        margin: auto;
        background-color: #F5F5F5;
    }

    .paddingContainerMob2 {
        width: 94%;
        margin: auto;
        background-color: #F5F5F5;
    }

    .paddingContainerMob3 {
        width: 92%;
        background-color: #F5F5F5;
        margin-right: 10px;
    }

    #pills-tab2 {
        gap: 5px;
        min-width: 100%;
        max-width: 100%;
        overflow-x: scroll;
        overflow-y: hidden;
        padding: 0px;
        display: flex;
        flex-direction: row;
        margin-top: 5px;
        flex-wrap: nowrap;
        /*        padding-right: 15px;*/
    }

    #pills-tab3 {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0px !important;
        padding-right: 0px !important;
    }

        #pills-tab3 .nav-link.active {
            color: #fff !important;
            border-bottom: 2px solid #f6150a !important;
            border-radius: 0px !important;
        }

        #pills-tab3 .nav-item.active {
            background-color: #00D622 !important;
        }

    #pills-tab-3 .active {
        color: #f6150a !important;
        border-bottom: 1px solid #f6150a !important;
    }

    .pills-tab3 {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0px !important;
        padding-right: 0px !important;
    }

        .pills-tab3 .nav-link.active {
            color: #f6150a !important;
            border-bottom: 2px solid #f6150a !important;
            border-radius: 0px !important;
        }

        .pills-tab3 .nav-item.active {
            background-color: #00D622 !important;
        }

    #pills-tab-3 .active {
        color: #f6150a !important;
        border-bottom: 1px solid #f6150a !important;
    }

    #pills-tab2::-webkit-scrollbar {
        margin-bottom: 20px;
    }

    .nav-pill {
        background-color: white !important;
        border-radius: 100px !important;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 10px;
        font-size: 13px;
        width: 140px;
        height: 50px;
        padding: 0px !important;
        margin: 0px !important;
    }

    .nav-pills .nav-link.active, .nav-pills .show > .nav-link {
        background-color: #fff !important;
        color: #f6150a !important;
        border: 1px solid #f6150a !important
    }

    .pillIcon {
        width: 25px;
    }

    .miniPlayButtonMobile {
        position: absolute;
        width: 40px;
        top: unset;
        right: unset;
    }

  

    .tableMobile {
        background-color: white !important;
        padding: auto;
    }

    .winState {
        background-color: green;
        border-radius: 10px;
        width: 40px;
        text-align: center;
    }

    .drawStat {
        background-color: gray;
        border-radius: 10px;
        width: 40px;
        text-align: center;
        padding-top: 5px;
        font-size: 17px;
        color: #000;
    }

    .lossState {
        background-color: red;
        border-radius: 10px;
        width: 40px;
        text-align: center;
    }

    .mobileLatestMediaHeader {
        margin-top: 40px;
        margin-right: 0%;
        margin-bottom: 20px;
    }

    .mainNewsAddContainer {
        background-color: black;
        width: 100%;
        height: 150px;
        margin-bottom: 40px;
        margin-top: 34px;
    }

    .mobileAdd {
        width: 100%;
        background-color: #000;
        height: 300px;
        margin-top: 20px;
    }

    .mobileAddMatches {
        width: 90%;
        margin: auto;
        background-color: #000;
        height: 140px;
        margin-top: 40px;
        border-radius: 5px;
    }

    .allMatchesMobileDiv {
        display: flex;
        color: #f6150a;
        gap: 10px;
    }

    .topInnerDiv {
        display: flex;
        justify-content: space-between;
        margin-bottom: 30px;
        width: 100%;
        align-items: center;
        gap: 20px;
    }

    .matchesContainer {
        width: 95%;
        margin: auto;
    }

    .matchesMainTitle {
        font-size: 18px;
        margin: 0px;
        font-weight: 600;
        align-self: center;
    }

    .allMatchesText {
        font-size: 12px;
        margin: 0px;
        align-self: center;
    }

    .cardsDiv {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 20px;
    }

    .cardContainer {
        background-color: white;
        width: 100%;
        /*        margin-bottom: 40px;*/
    }

    .cardContainer2 {
        background-color: white;
        width: 80%;
        margin-bottom: 40px;
    }

    .clubLogo {
        width: 40px;
        height: 40px;
    }

    .clubLogo2 {
        width: 30px;
        height: 30px;
    }

    .scoresBold {
        font-weight: 800;
        font-size: 25px;
    }

    .teamNameCard {
        text-align: center;
        margin-bottom: 10px;
    }

    .newsStrip {
        white-space: nowrap;
        overflow-x: scroll;
        scrollbar-width: none;
        -ms-overflow-style: none;
        background-color: #1B1B1B;
        height: 50px;
        display: flex;
        gap: 10px;
        margin-top: 5px;
        justify-content: center;
        align-items: center;
        overflow-x: scroll;
    }

    .leagueDivMain {
        padding-left: 10%;
        padding-right: 10%;
        padding-top: 20px;
        padding-bottom: 20px;
        /*margin-top: 30px;*/
        background: linear-gradient(to top, rgba(0, 0, 0, 0.0) 0%, rgba(54, 13, 58, 0.3) 100%);
    }

    .leagueImageMain {
        width: 30%;
    }

    .leagueDetails {
        display: flex;
        width: 100%;
        justify-content: center;
        align-items: center;
        gap: 40px;
        overflow: hidden;
    }

    .fadeImage {
        display: flex;
        position: relative;
        overflow: hidden;
        max-width: 100%;
        justify-content: flex-end;
    }

    #myTab {
        margin-right: 0px !important;
        padding-right: 0px !important;
        border: none !important;
        display: flex;
        flex-wrap: nowrap;
        gap: 10px;
        overflow-x: scroll;
        align-items: center;
    }

        #myTab::-webkit-scrollbar {
            display: none;
        }

    .navLinkMobileTournamet {
        width: 100% !important;
        padding: 0px !important;
        margin: 0px !important;
        min-width: 90px;
    }

    .fadeImageInner {
        width: 200px;
        margin-left: -40px;
    }

    .nav-tabs3 .nav-link.active {
        border-bottom: 1px solid #f6150a !important;
        color: #f6150a !important;
        background-color: #F5F5F5;
        border-radius: 0px;
        font-weight: 600;
    }

    .followersCount {
        margin-top: 5px;
        color: #595959;
    }

    .followButtonLeague {
        margin-top: 10px;
        background-color: #f6150a;
        color: white;
        border-radius: 100px;
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
        gap: 10px;
        width: 150px;
        border: none;
        outline: none;
        padding-top: 10px;
        padding-bottom: 10px;
        padding-left: 20px;
        padding-right: 20px;
        margin-top: 20px;
    }

    .clubsSlider {
        display: flex;
        width: 100%;
        flex-wrap: nowrap;
        gap: 10px;
        overflow-x: visible;
        margin-top: 30px !important;
        margin-bottom: 50px !important;
        overflow-y: hidden;
        width: 90%;
        margin: auto;
    }

        .clubsSlider::-webkit-scrollbar {
            height: 0px !important;
            width: 0px !important;
            display: none !important;
            width: 0;
            background: transparent !important;
        }

    .sliderCrest {
        width: 100%;
    }

    .clubSliderItem {
        width: 200px;
        display: flex;
        flex-direction: column;
        gap: 10px;
        align-items: center;
        justify-content: center;
        border: none;
    }

    .playerSliderItem {
        width: 100px;
        display: flex;
        flex-direction: column;
        gap: 10px;
        align-items: center;
        justify-content: center;
        border: none;
        position: relative;
    }

    .smallClubCrest {
        position: absolute;
        bottom: -13px;
        width: 30px;
    }

    .innerCrestImage {
        width: 100%;
    }

    .mobileMatchesDiv {
        display: flex;
        flex-direction: column;
        gap: 15px;
        align-items: center;
        justify-content: center;
        background-color: white;
        padding-top: 25px;
        padding-bottom: 25px;
        border-radius: 5px;
    }

    .nomatchesImg {
        width: 70% !important;
    }

    .innerMobileMatchesTitle {
        font-weight: 600;
        text-align: center;
    }

    .playerInformation {
        margin-top: 10px;
        display: flex;
        flex-direction: column;
        gap: 1px;
        justify-content: center;
        align-items: center;
    }

    .mobileTable {
        display: flex;
        flex-direction: column;
        width: 100%;
        margin-top: 40pxaw;
    }

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

    /* .scoreMobile {
          display: flex;
          background-color: #D71920;
          border-radius: 100px;
          justify-content: center;
          align-items: center;
          color: white;
          width: 30%;
      } */

    .scoreMobileGreen {
        display: flex;
        background-color: #34A853;
        border-radius: 100px;
        justify-content: center;
        align-items: center;
        color: white;
        width: 30%;
    }

    .scoreTag {
        font-size: 12px;
    }

    .lowerScore {
        display: flex;
        flex-direction: row;
        gap: 10px;
        width: 100%;
        align-self: flex-start;
        justify-content: flex-end;
    }

    .mobileTableRow {
        display: flex;
        flex-direction: row;
        gap: 10px;
    }

    .customMobileTable {
        width: 100% !important;
        min-width: none !important;
        max-width: none !important;
    }

    .standigsMobile {
        margin-top: 40px;
        margin-bottom: 20px;
    }

    .playerGoals {
        color: #f6150a;
    }

    .tableImage {
        width: 20px;
    }

    .crestContainer {
        display: flex;
        padding: 20px;
        background-color: white;
        border-radius: 999999px;
        height: 100px;
        width: 100px;
        border: none !important;
        position: relative;
        align-items: center;
        justify-content: center;
    }

    .crestContainerNoPadding {
        display: flex;
        background-color: white;
        border-radius: 999999px;
        height: 100px;
        width: 100px;
        border: none !important;
        position: relative;
        align-items: center;
        justify-content: center;
    }

    .crestContainer::-webkit-scrollbar {
        width: 0px !important;
        display: none !important;
        /* Remove scrollbar space */
        background: transparent !important;
        /* Optional: just make scrollbar invisible */
    }

    .standingsStats {
        margin-top: 60px;
    }

    .standingsTopTeams {
        display: flex;
        gap: 10px;
        justify-content: center;
        justify-content: space-around;
    }

    .topTeamImageCont {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 80px;
        height: 80px;
        background-color: white;
        padding: 15px;
        border-radius: 100px;
    }

    .winnerText {
        color: #f6150a;
        font-weight: 800;
    }

    .topTeamImageContWin {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 90px;
        height: 90px;
        background-color: white;
        padding: 17px;
        border-radius: 100px;
    }

    .topTeamContainer {
        display: flex;
        flex-direction: column;
        gap: 10px;
        justify-content: center;
        align-items: center;
    }

    .topTeamsText {
        display: flex;
        flex-direction: column;
        align-items: center;
        align-self: center;
    }

    .allGoals {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 24px;
    }

    .topTeamImage {
        display: flex;
        width: 100%;
    }

    .playerStat {
        /*display: flex;*/
        justify-content: space-between;
        width: 100%;
        padding: 10px;
        padding-left: 20px;
        padding-right: 20px;
        border-radius: 5px;
        background-color: white;
        border: none;
        /*        min-height:150px;*/
    }

    .albumBodyText {
        font-size: 17px;
        font-weight: 600;
        margin-bottom: 10px;
    }

    .albumSubtext {
        font-size: 14px;
        color: rgba(89, 89, 89, 1);
    }

    .articleTrending {
        display: none;
        width: 28%;
        margin-top: 30px;
        display: flex;
        border: 1px solid #DCDCDC;
        padding: 40px;
    }

    .articleSocialsContainer {
    }

    .socialLogo {
        width: 25px;
        height: 25px;
    }

    .articleTrending {
        display: none;
    }

    .leagueDivMainQuiz {
        padding-left: 3%;
        padding-right: 3%;
        padding-top: 20px;
        padding-bottom: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 30px;
        justify-content: space-between;
        background: transparent
    }

    .predImageMain {
        width: 120px;
    }

    .followButtonQuiz {
        margin-top: 10px;
        background: rgba(255, 122, 1, 0.08);
        color: black;
        border-radius: 100px;
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
        gap: 10px;
        border: none;
        outline: none;
        padding-top: 10px;
        padding-bottom: 10px;
        padding-left: 20px;
        padding-right: 20px;
        margin-top: 20px;
    }

    .fadeImageQuiz {
        width: 100%;
        display: flex;
        gap: 10px;
        align-items: center;
        justify-content: center;
    }

    .questionDiv {
        background-color: white;
        padding: 10px;
        justify-content: center;
        align-items: center;
        display: flex;
        flex-direction: column;
        width: 34%;
        border-radius: 5px;
        gap: 5px;
        width: 100%;
    }

    .quizIcon {
        width: 50px;
        height: 50px;
        margin-bottom: 10px;
    }

    .mainCarouselContent2 {
        overflow-x: auto;
        gap: 30px;
        margin: auto;
        padding-bottom: 60px;
        position: relative;
        width: 100%;
    }

    .testButtonActiveCarousel {
        align-self: flex-end;
        width: 55%;
        border-radius: 100px;
        border: none;
        margin-top: 10px;
        background-color: #f6150a;
        color: white;
        display: flex;
        padding: 14px;
        padding-right: 10px;
        padding-left: 10px;
        justify-content: center;
        gap: 10px;
    }

    .carouselTestTitle {
        color: white;
        align-self: flex-end;
        width: 90%;
    }

    .topPlayers {
        display: flex;
        gap: 30px;
        width: 100%;
        flex-direction: column;
    }

    .topLeaderbord {
        width: 100%;
        display: flex;
        gap: 0px;
        justify-content: center;
        border: 0px solid rgba(0, 0, 0, 0.1);
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .playerPredDiv {
        display: flex;
        flex-direction: column;
        gap: 20px;
        justify-content: center;
        align-items: center;
    }

    .followButtonQuizPred {
        margin-top: 10px;
        background: rgba(255, 122, 1, 0.08);
        color: black;
        border-radius: 100px;
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
        gap: 5px;
        border: none;
        outline: none;
        padding-top: 10px;
        padding-bottom: 10px;
        padding-left: 5px;
        padding-right: 5px;
        margin-top: 20px;
    }

    .secondThirdPos {
        width: 70%;
    }

    .secondThirdTitle {
        font-size: 15px;
        align-self: center;
        text-align: center;
    }

    .rightSide {
        width: 100%;
        display: flex;
        gap: 20px;
        justify-content: center;
        flex-direction: column;
    }

    .starIconInPlayer {
        width: 30%;
    }

    .mainPos {
        width: 80%;
    }

    .leftSide {
        width: 100%;
    }

    .modal-content {
        width: 95%;
        margin: auto;
        padding: 0px !important;
        margin: 0px !important;
    }

    .modal-dialog {
        min-width: 0px !important;
    }

    .loginDiv {
        background-image: none;
        background-size: cover;
        background-repeat: no-repeat;
        padding-bottom: 10px;
        padding-top: 10px;
    }

    .loginJumbotron {
        width: 100%;
        background-color: white;
        padding: 20px;
        margin: auto;
        border-radius: 10px;
    }

    .socialsSub {
        text-align: center;
        color: #595959;
    }

    .socialDiv {
        padding-top: 30px;
        gap: 20px;
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .innerPadding {
        padding-top: 0px;
        width: 95%;
        margin: auto;
        padding-bottom: 00px;
    }

    .socialIconLogin {
        width: 15.5%;
        margin-left: 5px;
    }

    .lowerBottomMobile {
        position: relative !important;
        background-color: white;
        text-align: center;
        padding: 5px;
        padding-left: 10px;
        padding-right: 10px;
        border-radius: 100px;
        height: 40px;
    }

    .customProfilePage {
        width: 100%;
        padding-left: 5%;
        padding-right: 5%;
        background-color: rgba(237, 237, 237, 1);
        margin-bottom: 35px;
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .loginThumb {
        width: 6%;
        position: absolute;
        top: 25%;
        right: 8px;
    }

    .updateMainButton {
        margin-top: 20px;
        background-color: rgba(143, 143, 143, 1);
        color: white;
        border: none;
        outline: none;
        width: 100%;
        padding: 15px;
        margin-bottom: 20px;
        border-radius: 5px;
    }

    .loginLabelSec {
        font-weight: 600;
        font-size: 15px;
    }

    .pointsCustomDiv {
        background: rgba(255, 247, 239, 1);
        width: 100%;
        /* padding-top: unset !important;
          padding-bottom: unset !important; */
        padding-left: unset !important;
        padding-right: unset !important;
        margin-top: 30px;
    }

    .startsIconInProfile {
    }

    .pointGiven {
        margin-top: 20px;
    }

    .pointTitle {
        color: rgba(52, 64, 84, 1);
        font-size: 20px;
        font-weight: 600;
    }

    .pointSubTitle {
        color: rgba(166, 171, 181, 1);
    }

    .actualPoints {
        color: #f6150a;
        font-size: 20px;
        font-weight: 800;
    }

    .favContentHeader {
        text-align: center;
    }

    .editFavContent {
        border-radius: 100px;
        border: 1px solid black;
        background-color: white;
        padding-left: 20px;
        padding-right: 20px;
        padding-top: 5px;
        padding-bottom: 5px;
    }

    .leagueContainerIconFavs {
        display: flex;
        flex-direction: column;
        justify-content: center;
        border: 0px solid rgba(0, 0, 0, 0.1);
        width: 100px;
        text-align: center;
        gap: 10px;
        padding-top: 20px;
        padding-bottom: 20px;
        position: relative;
    }

    .leagueCrestInner {
        width: 60%;
        align-self: center;
        max-height: 60px;
        min-height: 60px;
    }

    .leagueName {
        font-size: 10px;
        width: 100%;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .leaguesContainerWrapper {
        overflow-x: auto;
        width: 100%;
        /* white-space: nowrap; */
        margin-bottom: 30px;
        scroll-behavior: smooth;
        scroll-snap-type: both;
        scrollbar-width: none;
    }

        .leaguesContainerWrapper::-webkit-scrollbar {
            display: none;
        }

    .notificationSettings {
        font-size: 14px;
    }

    .form-switch {
        margin-top: unset !important;
    }

    .liveScoreDivinProfile {
        text-align: center;
    }

    .leaguesContainer .col-12 {
        display: inline-block; /* This makes elements sit side by side */
        white-space: normal; /* Allow normal text wrapping inside each column */
        vertical-align: top; /* Align the tops of inline-block elements */
    }

    .profileWidgets {
        text-align: center;
    }

    .profileWidget {
        text-align: center;
        border: 1px solid #d1d1d1;
        padding-top: 10px;
        border-radius: 10px;
        min-height: 100px;
    }

    .quizRowFirst {
        display: flex;
        flex-direction: column;
        margin-top: 25px;
        width: 100%;
        gap: 20px;
        box-sizing: border-box;
    }

    .quizItem {
        width: 100%;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
    }

    .quizRow {
        display: flex;
        margin-top: 45px;
        width: 100%;
        gap: 20px;
        box-sizing: border-box;
        flex-direction: column;
    }

    #openFirstModal {
        background-color: #000;
        color: white;
        display: flex;
        align-self: center;
        text-align: center;
        justify-content: center;
        padding: 15px;
        width: 40%;
        margin: auto;
        text-align: center;
        border: none !important;
        margin-top: 40px !important;
    }

    .matchDetailsTeamCrest {
        width: 40px;
    }

    .teamNameMatch {
        font-size: 15px;
        font-weight: 600;
        text-align: center;
    }

    .goalCount {
        font-size: 30px;
        font-weight: 800;
    }

    .team1Details {
        text-align: center;
    }

    .lowerMatchDetails {
        padding-top: 7px;
        margin: auto;
    }

    .lowerMatchBlob {
        background-color: transparent;
        display: flex;
        flex-direction: row;
        gap: 10px;
        padding: 2px;
        color: rgba(89, 89, 89, 1);
        min-width: 200px;
        align-self: flex-start;
    }

    .blobText {
        width: max-content;
    }

    .matchFollowButton {
        width: 100%;
        margin-top: 20px;
        background-color: #f6150a;
        border-radius: 100px;
        height: 45px;
        border: none;
        outline: none;
    }

    .matchFollowText {
        color: white;
        font-size: 15px;
        font-weight: 600;
    }

    .mobilePredCard {
        padding: 20px;
        padding-top: 40px;
        position: relative;
        width: 100%;
        background-color: white;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 50px;
    }

    .mobilePredCardContent {
        margin-top: 30px;
    }

    .sendPredButton {
        background-color: rgba(214, 214, 214, 1);
        color: white;
        width: 100%;
        margin-top: 25px;
        border: none;
        outline: none;
        border-radius: 5px;
        height: 45px;
    }

    .mobilePredCardTitle {
        font-size: 18px;
        margin-top: 10px;
        color: #000;
        font-weight: 600;
    }

    .absoluteIconPredCard {
        width: 50px;
        height: 50px;
        background-color: white;
        border-radius: 100%;
        box-shadow: 3px 3px rgba(0, 0, 0, 0.2);
        top: -20px;
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .precCardPredImage {
        width: 50%;
    }

    .liveMatchTime {
        text-align: center;
        font-size: 13px;
        font-weight: 600;
    }

    .goalIcon {
        width: 15px;
    }

    .goalScorer {
        font-size: 13px;
    }

    .goalOrAssist {
        font-weight: 600;
    }

    .statCard {
        text-align: center;
        margin-top: 30px;
    }

    .customTH {
        background-color: transparent;
    }

    .customMobiletableArrow {
        width: 25px;
        height: 25px;
        border-radius: 100px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: rgba(245, 245, 245, 1);
    }

    .innerCustomImage {
        width: 60%;
        margin-right: 5px;
    }

    .mobileTableCustomHeader {
        font-weight: 800;
        margin-top: 30px;
    }

    .customMobileTableButton {
        width: 100%;
        height: 40px;
        background-color: transparent;
        border-radius: 5px;
        border: 2px solid black;
    }

    .ratingMobileCustomCard {
        margin-top: 60px;
        width: 100%;
        padding: 20px;
        background-color: white;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding-bottom: 40px;
    }

    .customMOTMCard {
        /* margin-top: 20px;
        padding: 20px;*/
        background-color: white;
        border-radius: 5px;
        /* margin-bottom: 20px;*/
    }

    .kingMoImg {
        width: 40px;
    }

    .teamNameInMotm {
        font-size: 15px;
        margin: 0 !important;
        padding: 0 !important;
    }

    .teamCrestInMotm {
        width: 20px;
    }

    .customKingIcon {
        position: absolute;
        top: -30px;
        width: 50px;
        height: 50px;
        background-color: white;
        border-radius: 100px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 3px 3px rgba(0, 0, 0, 0.2);
    }

    .lowerArrowIcon {
        position: absolute;
        bottom: -20px;
        width: 30px;
        height: 30px;
        background-color: white;
        border: 2px solid grey;
        border-radius: 100px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 3px 3px rgba(0, 0, 0, 0.2);
    }

    .customHeader {
        margin-top: 40px;
        font-size: 18px;
        font-weight: 600;
        margin-bottom: 20px;
    }

    .clubImage {
        max-width: 100%;
        width: 100%;
    }

    .crownIcon {
        width: 50%;
    }

    .ratingHeader {
        margin-top: 10px;
        font-weight: 600;
    }

    .teamScoreDiv {
        text-align: center;
    }

    .scoreDiv {
        /*display: flex;*/
        align-self: center;
        gap: 30px;
        width: 100%;
        margin-top: 20px;
        padding-bottom: 20px;
    }

    .playerImageOnMap {
        width: 35px;
    }

    .playerNameOnMap {
        font-size: 11px;
    }

    .playerRatingOnMap {
        font-size: 11px;
    }

    .playerDivOnMapF433 {
        position: absolute;
        top: 10px;
        left: 45%;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: white;
    }

    .playerDivOnMap2F433 {
        position: absolute;
        top: 18%;
        left: 53%;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: white;
    }

    .playerDivOnMap3F433 {
        position: absolute;
        top: 23%;
        left: 7%;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: white;
    }

    .playerDivOnMap4F433 {
        position: absolute;
        top: 23%;
        right: 10%;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: white;
    }

    .playerDivOnMap5F433 {
        position: absolute;
        top: 18%;
        right: 56%;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: white;
    }

    .playerDivOnMap6F433 {
        position: absolute;
        bottom: 43%;
        right: 44%;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: white;
    }

    .playerDivOnMap7F433 {
        position: absolute;
        bottom: 43%;
        right: 15%;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: white;
    }

    .playerDivOnMap8F433 {
        position: absolute;
        bottom: 43%;
        left: 15%;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: white;
    }

    .playerDivOnMap9F433 {
        position: absolute;
        bottom: 13%;
        left: 15%;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: white;
    }

    .playerDivOnMap10F433 {
        position: absolute;
        bottom: 8%;
        left: 44%;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: white;
    }

    .playerDivOnMap11F433 {
        position: absolute;
        bottom: 13%;
        right: 15%;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: white;
    }

    /*451 */
    .playerDivOnMapF451 {
        position: absolute;
        top: 10px;
        left: 45%;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: white;
    }

    .playerDivOnMap2F451 {
        position: absolute;
        top: 18%;
        left: 53%;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: white;
    }

    .playerDivOnMap3F451 {
        position: absolute;
        top: 18%;
        left: 10%;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: white;
    }

    .playerDivOnMap4F451 {
        position: absolute;
        top: 18%;
        right: 10%;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: white;
    }

    .playerDivOnMap5F451 {
        position: absolute;
        top: 18%;
        right: 53%;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: white;
    }

    .playerDivOnMap6F451 {
        position: absolute;
        bottom: 50%;
        right: 24%;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: white;
    }

    .playerDivOnMap7F451 {
        position: absolute;
        bottom: 50%;
        right: 6%;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: white;
    }

    .playerDivOnMap8F451 {
        position: absolute;
        bottom: 50%;
        left: 24%;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: white;
    }

    .playerDivOnMap9F451 {
        position: absolute;
        bottom: 50%;
        left: 6%;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: white;
    }

    .playerDivOnMap10F451 {
        position: absolute;
        bottom: 50%;
        left: 44%;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: white;
    }

    .playerDivOnMap11F451 {
        position: absolute;
        bottom: 30%;
        right: 43%;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: white;
    }

    /* plan 4-4-2*/
    .playerDivOnMapF442 {
        position: absolute;
        top: 9px;
        left: 43%;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: white;
    }

    .playerDivOnMap2F442 {
        position: absolute;
        top: 20%;
        left: 53%;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: white;
    }

    .playerDivOnMap3F442 {
        position: absolute;
        top: 20%;
        left: 10%;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: white;
    }

    .playerDivOnMap4F442 {
        position: absolute;
        top: 20%;
        right: 10%;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: white;
    }

    .playerDivOnMap5F442 {
        position: absolute;
        top: 20%;
        right: 53%;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: white;
    }

    .playerDivOnMap6F442 {
        position: absolute;
        bottom: 20%;
        right: 60%;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: white;
    }

    .playerDivOnMap7F442 {
        position: absolute;
        bottom: 20%;
        right: 20%;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: white;
    }

    .playerDivOnMap8F442 {
        position: absolute;
        bottom: 43%;
        left: 34%;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: white;
    }

    .playerDivOnMap9F442 {
        position: absolute;
        bottom: 43%;
        left: 16%;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: white;
    }

    .playerDivOnMap10F442 {
        position: absolute;
        bottom: 43%;
        left: 72%;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: white;
    }

    .playerDivOnMap11F442 {
        position: absolute;
        bottom: 43%;
        right: 33%;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: white;
    }

    /*Plan 4-4-1-1 */
    .playerDivOnMapF4411 {
        position: absolute;
        top: 10px;
        left: 45%;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: white;
    }

    .playerDivOnMap2F4411 {
        position: absolute;
        top: 18%;
        left: 53%;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: white;
    }

    .playerDivOnMap3F4411 {
        position: absolute;
        top: 18%;
        left: 10%;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: white;
    }

    .playerDivOnMap4F4411 {
        position: absolute;
        top: 18%;
        right: 10%;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: white;
    }

    .playerDivOnMap5F4411 {
        position: absolute;
        top: 18%;
        right: 53%;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: white;
    }

    .playerDivOnMap6F4411 {
        position: absolute;
        bottom: 50%;
        right: 24%;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: white;
    }

    .playerDivOnMap7F4411 {
        position: absolute;
        bottom: 50%;
        right: 6%;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: white;
    }

    .playerDivOnMap8F4411 {
        position: absolute;
        bottom: 50%;
        left: 24%;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: white;
    }

    .playerDivOnMap9F4411 {
        position: absolute;
        bottom: 50%;
        left: 6%;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: white;
    }

    .playerDivOnMap10F4411 {
        position: absolute;
        bottom: 45%;
        left: 44%;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: white;
    }

    .playerDivOnMap11F4411 {
        position: absolute;
        bottom: 30%;
        right: 43%;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: white;
    }

    /*Plan 4-2-3-1 */
    .playerDivOnMapF4231 {
        position: absolute;
        top: 10px;
        left: 41%;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: white;
    }

    .playerDivOnMap2F4231 {
        position: absolute;
        top: 23%;
        left: 53%;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: white;
    }

    .playerDivOnMap3F4231 {
        position: absolute;
        top: 23%;
        left: 4%;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: white;
    }

    .playerDivOnMap4F4231 {
        position: absolute;
        top: 23%;
        right: 2%;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: white;
    }

    .playerDivOnMap5F4231 {
        position: absolute;
        top: 23%;
        right: 53%;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: white;
    }

    .playerDivOnMap6F4231 {
        position: absolute;
        bottom: 44%;
        right: 24%;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: white;
    }

    .playerDivOnMap7F4231 {
        position: absolute;
        bottom: 35%;
        right: 6%;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: white;
    }

    .playerDivOnMap8F4231 {
        position: absolute;
        bottom: 44%;
        left: 24%;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: white;
    }

    .playerDivOnMap9F4231 {
        position: absolute;
        bottom: 35%;
        left: 6%;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: white;
    }

    .playerDivOnMap10F4231 {
        position: absolute;
        bottom: 24%;
        left: 44%;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: white;
    }

    .playerDivOnMap11F4231 {
        position: absolute;
        bottom: 7%;
        right: 43%;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: white;
    }

    /*Plan 3-5-2 */
    .playerDivOnMapF352 {
        position: absolute;
        top: 10px;
        left: 45%;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: white;
    }

    .playerDivOnMap2F352 {
        position: absolute;
        top: 20%;
        left: 41%;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: white;
    }

    .playerDivOnMap3F352 {
        position: absolute;
        top: 20%;
        left: 10%;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: white;
    }

    .playerDivOnMap4F352 {
        position: absolute;
        top: 20%;
        right: 6%;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: white;
    }

    .playerDivOnMap5F352 {
        position: absolute;
        top: 55%;
        right: 41%;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: white;
    }

    .playerDivOnMap6F352 {
        position: absolute;
        bottom: 40%;
        right: 25%;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: white;
    }

    .playerDivOnMap7F352 {
        position: absolute;
        bottom: 43%;
        right: 6%;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: white;
    }

    .playerDivOnMap8F352 {
        position: absolute;
        bottom: 42%;
        left: 29%;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: white;
    }

    .playerDivOnMap9F352 {
        position: absolute;
        bottom: 43%;
        left: 6%;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: white;
    }

    .playerDivOnMap10F352 {
        position: absolute;
        bottom: 8%;
        left: 30%;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: white;
    }

    .playerDivOnMap11F352 {
        position: absolute;
        bottom: 8%;
        right: 30%;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: white;
    }

    /*Plan 3-4-3 */
    .playerDivOnMapF343 {
        position: absolute;
        top: 10px;
        left: 45%;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: white;
    }

    .playerDivOnMap2F343 {
        position: absolute;
        top: 20%;
        left: 45%;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: white;
    }

    .playerDivOnMap3F343 {
        position: absolute;
        top: 20%;
        left: 10%;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: white;
    }

    .playerDivOnMap4F343 {
        position: absolute;
        top: 20%;
        right: 10%;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: white;
    }

    .playerDivOnMap5F343 {
        position: absolute;
        bottom: 43%;
        right: 50%;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: white;
    }

    .playerDivOnMap6F343 {
        position: absolute;
        bottom: 43%;
        right: 30%;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: white;
    }

    .playerDivOnMap7F343 {
        position: absolute;
        bottom: 43%;
        right: 10%;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: white;
    }

    .playerDivOnMap8F343 {
        position: absolute;
        bottom: 43%;
        left: 14%;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: white;
    }

    .playerDivOnMap9F343 {
        position: absolute;
        bottom: 20%;
        left: 20%;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: white;
    }

    .playerDivOnMap10F343 {
        position: absolute;
        bottom: 20%;
        left: 44%;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: white;
    }

    .playerDivOnMap11F343 {
        position: absolute;
        bottom: 20%;
        right: 20%;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: white;
    }

    /*Plan 3-2-4=1 */
    .playerDivOnMapF3241 {
        position: absolute;
        top: 10px;
        left: 45%;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: white;
    }

    .playerDivOnMap2F3241 {
        position: absolute;
        top: 20%;
        left: 45%;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: white;
    }

    .playerDivOnMap3F3241 {
        position: absolute;
        top: 20%;
        left: 10%;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: white;
    }

    .playerDivOnMap4F3241 {
        position: absolute;
        top: 20%;
        right: 10%;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: white;
    }

    .playerDivOnMap5F3241 {
        position: absolute;
        bottom: 53%;
        right: 50%;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: white;
    }

    .playerDivOnMap6F3241 {
        position: absolute;
        bottom: 53%;
        right: 30%;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: white;
    }

    .playerDivOnMap7F3241 {
        position: absolute;
        bottom: 35%;
        right: 30%;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: white;
    }

    .playerDivOnMap8F3241 {
        position: absolute;
        bottom: 35%;
        left: 34%;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: white;
    }

    .playerDivOnMap9F3241 {
        position: absolute;
        bottom: 35%;
        left: 10%;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: white;
    }

    .playerDivOnMap10F3241 {
        position: absolute;
        bottom: 20%;
        left: 44%;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: white;
    }

    .playerDivOnMap11F3241 {
        position: absolute;
        bottom: 35%;
        right: 10%;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: white;
    }

    /*Plan 4-2-4 */
    .playerDivOnMapF424 {
        position: absolute;
        top: 10px;
        left: 45%;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: white;
    }

    .playerDivOnMap2F424 {
        position: absolute;
        top: 20%;
        left: 55%;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: white;
    }

    .playerDivOnMap3F424 {
        position: absolute;
        top: 20%;
        left: 10%;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: white;
    }

    .playerDivOnMap4F424 {
        position: absolute;
        top: 20%;
        right: 10%;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: white;
    }

    .playerDivOnMap5F424 {
        position: absolute;
        top: 20%;
        right: 55%;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: white;
    }

    .playerDivOnMap6F424 {
        position: absolute;
        bottom: 53%;
        right: 30%;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: white;
    }

    .playerDivOnMap7F424 {
        position: absolute;
        bottom: 53%;
        right: 55%;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: white;
    }

    .playerDivOnMap8F424 {
        position: absolute;
        bottom: 20%;
        right: 30%;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: white;
    }

    .playerDivOnMap9F424 {
        position: absolute;
        bottom: 35%;
        left: 10%;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: white;
    }

    .playerDivOnMap10F424 {
        position: absolute;
        bottom: 20%;
        left: 30%;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: white;
    }

    .playerDivOnMap11F424 {
        position: absolute;
        bottom: 35%;
        right: 10%;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: white;
    }

    /*Plan  4-1-2-1-2 */
    .playerDivOnMapF41212 {
        position: absolute;
        top: 10px;
        left: 45%;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: white;
    }

    .playerDivOnMap2F41212 {
        position: absolute;
        top: 20%;
        left: 55%;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: white;
    }

    .playerDivOnMap3F41212 {
        position: absolute;
        top: 20%;
        left: 10%;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: white;
    }

    .playerDivOnMap4F41212 {
        position: absolute;
        top: 20%;
        right: 10%;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: white;
    }

    .playerDivOnMap5F41212 {
        position: absolute;
        top: 20%;
        right: 55%;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: white;
    }

    .playerDivOnMap6F41212 {
        position: absolute;
        bottom: 55%;
        right: 42%;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: white;
    }

    .playerDivOnMap7F41212 {
        position: absolute;
        bottom: 45%;
        right: 55%;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: white;
    }

    .playerDivOnMap8F41212 {
        position: absolute;
        bottom: 20%;
        right: 30%;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: white;
    }

    .playerDivOnMap9F41212 {
        position: absolute;
        bottom: 45%;
        left: 55%;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: white;
    }

    .playerDivOnMap10F41212 {
        position: absolute;
        bottom: 20%;
        left: 30%;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: white;
    }

    .playerDivOnMap11F41212 {
        position: absolute;
        bottom: 35%;
        right: 42%;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: white;
    }

    /*Plan  4-1-1-1 */
    .playerDivOnMapF4141 {
        position: absolute;
        top: 10px;
        left: 45%;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: white;
    }

    .playerDivOnMap2F4141 {
        position: absolute;
        top: 20%;
        left: 55%;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: white;
    }

    .playerDivOnMap3F4141 {
        position: absolute;
        top: 20%;
        left: 10%;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: white;
    }

    .playerDivOnMap4F4141 {
        position: absolute;
        top: 20%;
        right: 6%;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: white;
    }

    .playerDivOnMap5F4141 {
        position: absolute;
        top: 20%;
        right: 55%;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: white;
    }

    .playerDivOnMap6F4141 {
        position: absolute;
        bottom: 50%;
        right: 42%;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: white;
    }

    .playerDivOnMap7F4141 {
        position: absolute;
        bottom: 35%;
        right: 55%;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: white;
    }

    .playerDivOnMap8F4141 {
        position: absolute;
        bottom: 35%;
        right: 10%;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: white;
    }

    .playerDivOnMap9F4141 {
        position: absolute;
        bottom: 35%;
        left: 55%;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: white;
    }

    .playerDivOnMap10F4141 {
        position: absolute;
        bottom: 11%;
        left: 43%;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: white;
    }

    .playerDivOnMap11F4141 {
        position: absolute;
        bottom: 35%;
        left: 10%;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: white;
    }

    .underline-effect {
        position: relative;
    }

        .underline-effect:after {
            content: '';
            position: absolute;
            bottom: 0px;
            /* Adjust the value to control the distance of the underline from the text */
            left: 0;
            width: 100%;
           /* border-bottom: 2px solid hsl(29, 100%, 50%);*/
            /* Adjust the color and thickness of the underline as needed */
        }

    .footballField {
        width: 380px;
        height: 500px;
        position: relative;
    }

    .customInnerMobileLink {
        width: 100%;
        font-size: 14px;
    }

    .nav-link.customInnerMobileLink.active {
        width: 100%;
        font-size: 14px;
        color: #f6150a !important;
    }

    .add1 {
        display: none;
    }

    .add2 {
        display: none;
    }

    .mobileNavBar {
        flex-direction: column;
        width: 80%;
        background-color: #000;
        gap: 30px;
        padding: 20px;
        padding-top: 40px;
        padding-bottom: 40px;
        display: none;
        /* Initially hidden */
        position: fixed;
        top: 0;
        right: 0;
        z-index: 100000;
        overflow-y: scroll;
        height: 100%;
        text-align: center;
    }

        .mobileNavBar::-webkit-scrollbar {
            display: none;
        }

    .logoButton {
        background-color: #f6150a;
        width: 70%;
        padding: 15px;
        margin: auto;
        color: white;
        border-radius: 100px;
        outline: none;
        border: none;
        font-size: 20px;
    }

    .mobileNavSocials {
        display: flex;
        gap: 15px;
        /*        margin-top: 20px;*/
    }

    .socialIconMobile {
        width: 40px;
    }

    .createAccountButton {
        outline: none;
        color: white;
        border: none;
        border-radius: 5px;
        background-color: #f6150a;
        padding: 10px;
        margin-top: 10px;
    }

    .loginButtonMobile {
        outline: none;
        color: white;
        border: none;
        border-radius: 5px;
        background-color: #000;
        padding: 10px;
    }

    .mobileMenuItem {
        display: flex;
        gap: 10px;
        font-size: 20px;
        color: white;
        font-weight: 600;
    }

    .mobileMenuItems {
        display: flex;
        flex-direction: column;
        gap: 30px;
        /*        margin-top: 20px;*/
        margin-bottom: 30px;
    }

    .mobileNNavIcon {
        width: 35px;
    }

    .overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        /* Semi-transparent black */
        display: none;
        /* Initially hidden */
        z-index: 10000;
    }

    .mobileBody {
        background-image: url("../images/mobileBG.jpg");
        background-position: center;
        background-size: cover;
    }
}

.BoxedContainer {
    width: 75%;
}

/* match time line */
.time-line ul {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.time-line li {
    position: relative;
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    padding: 10px 0px 65px 0px;
}

.scoreBar {
    background-color: white;
    padding: 5px 15px;
    border-radius: 50px;
    padding-right: 30px;
    padding-left: 30px;
    margin-right: 5px;
    margin-top: -42px;
}

    .scoreBar::after {
        content: "";
        width: 2px;
        height: 100%;
        position: absolute;
        right: 42vw;
        background: #f6150a;
        margin-top: 32px;
    }

.match-timeline-detalis.left {
    width: 90vw;
    display: flex;
    align-items: center;
    /*    margin-right: 20px;*/
}

.match-timeline-detalis.right {
    width: 100vw;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    margin-left: 20px;
}

.info-min-min {
    display: flex;
    flex-direction: column;
}

.scoreBar-one::after {
    content: "";
    width: 2px;
    height: 100%;
    position: absolute;
    right: 50vw;
    background: gray;
    margin-top: 32px;
}

.scoreBar-one {
    background-color: white;
    padding: 5px 15px;
    border-radius: 50px;
    padding-right: 30px;
    padding-left: 30px;
    margin-right: 10px;
    margin-top: -42px;
}

.time-line.stretch {
    margin-top: 46px;
}

.scoreBar i {
    color: #f6150a;
}
/* end of match timeline*/

.font10 {
    font-size: 10px !important;
}

.font11bold {
    font-size: 11px !important;
    font-weight: bold
}

.font11 {
    font-size: 11px !important;
}

.font12 {
    font-size: 12px !important;
}

.font13 {
    font-size: 13px !important;
}

.font14 {
    font-size: 14px !important;
}

.font9 {
    font-size: 9px !important;
}

.font8 {
    font-size: 8px !important;
}

.bold {
    font-weight: bold;
}

.font15 {
    font-size: 15px !important;
}

.font16 {
    font-size: 16px !important;
}

.closeMenuMobile {
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 24px;
    background: none;
    border: none;
    color: white !important;
    cursor: pointer;
}

.sliderAndAllDays {
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: 10px;
}

.slider {
    /*width: 80%;*/
    overflow-x: hidden;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-y: hidden;
    gap: 20px;
    text-align: center;
}

.activeDay {
    color: white;
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: center;
    justify-content: center;
    background-color: #000000;
    min-width: 100px;
    min-height: 100px;
    border-radius: 100px;
}

.inactiveDay {
    color: black;
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: center;
    justify-content: center;
    background-color: white;
    min-width: 100px;
    min-height: 100px;
    border-radius: 100px;
}

.outerCircleMobile {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 100%;
    background-color: #D6D6D6;
}

.myCircleMobile {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    border: 3px solid #D6D6D6;
    width: 15px;
    height: 15px;
    border-radius: 100%;
    background-color: transparent;
}

.ScrollerMatches {
    font-size: 69px;
    color: orange;
    font-weight: bold;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    transition: 0.5s;
    margin: 0 10px;
    font-family: cursive;
    cursor: pointer;
}
/* Paging css */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 20px 0;
    flex-wrap: wrap;
    gap: 5px;
}

    .pagination li {
        margin: 0;
    }

    .pagination a {
        display: flex;
        justify-content: center;
        align-items: center;
        text-decoration: none;
        font-size: 14px;
        font-weight: bold;
        color: #ce0808;
        border: 1px solid #ce0808;
        padding: 8px 12px;
        border-radius: 5px;
        transition: all 0.3s ease-in-out;
        background-color: #fff;
        min-width: 35px;
        height: 35px;
    }

        .pagination a:hover {
            background-color: #ce0808;
            color: #fff;
        }

    .pagination .pag_prev a,
    .pagination .pag_next a {
        font-size: 16px;
        padding: 8px 14px;
    }

        .pagination .pag_prev a:hover,
        .pagination .pag_next a:hover {
            background-color: #ce0808;
            color: #fff;
        }

    .pagination .active a {
        background-color: #ce0808;
        color: #fff;
        border-color: #ce0808;
        cursor: default;
        pointer-events: none;
    }

/* Medium devices (max-width: 768px) */
@media (max-width: 768px) {
    .pagination {
        gap: 3px;
    }

        .pagination a {
            font-size: 13px;
            padding: 6px 10px;
            min-width: 30px;
            height: 30px;
        }
}

/* Small devices (max-width: 480px) */
@media (max-width: 480px) {
    .pagination {
        gap: 2px;
    }

        .pagination a {
            font-size: 12px;
            padding: 5px 8px;
            min-width: 28px;
            height: 28px;
        }
}

/* end of paging */

/* loading update progress*/
.modal22 {
    position: fixed;
    z-index: 999;
    height: 100%;
    width: 100%;
    top: 0;
    background-color: Black;
    filter: alpha(opacity=60);
    opacity: 0.6;
    -moz-opacity: 0.8;
}

.center22 {
    z-index: 1000;
    margin: 285px auto;
    padding: 10px;
    width: 500px;
    background-color: White;
    border-radius: 10px;
    filter: alpha(opacity=100);
    opacity: 1;
    -moz-opacity: 1;
}

/* end of loading update progress*/

/* add on */

/* tabs */
.nav-tabs3 {
    display: flex;
    overflow-x: auto;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
    scrollbar-width: none;
}

    .nav-tabs3::-webkit-scrollbar {
        display: none;
    }

    .nav-tabs3 .nav-item {
        flex: 1;
    }

    .nav-tabs3 .nav-link {
        display: inline-block;
        background: rgba(255, 255, 255, 0.4);
        border: 2px solid transparent;
        border-radius: 32px;
        color: #333;
        font-weight: 500;
        padding: 10px 20px;
        font-size: 15px;
        white-space: nowrap;
        transition: all 0.3s ease;
        text-align: center;
        box-shadow: inset 0 0 0 0 rgba(255, 122, 1, 0.5);
        position: relative;
    }

        .nav-tabs3 .nav-link.active {
            background-color: #f0efed;
            color: #fff;
            font-weight: 600;
            border-color: transparent;
            box-shadow: 0 4px 12px rgba(255, 122, 1, 0.3);
        }

        .nav-tabs3 .nav-link:hover:not(.active) {
            background-color: rgba(255, 255, 255, 0.6);
            border-color: #f6150a;
            color: #f6150a;
        }

        /* Optional glowing pulse effect on active tab */
        .nav-tabs3 .nav-link.active::after {
            content: "";
            position: absolute;
            inset: 0;
            /*            border-radius: 32px;*/
            animation: pulseBorder 2s infinite;
            box-shadow: 0 0 0 0 rgba(255, 122, 1, 0.3);
            z-index: 0;
        }

@keyframes pulseBorder {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 122, 1, 0.3);
    }

    70% {
        box-shadow: 0 0 0 8px rgba(255, 122, 1, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(255, 122, 1, 0);
    }
}

.nav-tabs3 .nav-link span {
    position: relative;
    z-index: 1;
}
/* end of Tabs */

/* news ticker */
.news-ticker {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    background-color: transparent;
    padding: 10px 0;
    position: relative;
    direction: ltr;
}

.ticker-content {
    display: inline-block;
    white-space: nowrap;
    animation: ticker-scroll-left-to-right 60s linear infinite; /* ✅ Speed kept same */
}

.news-ticker.paused .ticker-content {
    animation-play-state: paused;
}

.ticker-item {
    display: inline-block;
    color: #fff;
    margin: -5px 20px;
    font-size: 15px;
    text-decoration: none;
    white-space: nowrap;
    font-weight: 500;
}

.newsStripDivider {
    display: inline-block;
    width: 6px;
    height: 6px;
    background-color: #f6150a;
    border-radius: 50%;
    margin-right: 8px;
    vertical-align: middle;
}

@keyframes ticker-scroll-left-to-right {
    0% {
        transform: translateX(-100%);
    }

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

/* Mobile Optimizations */
@media (max-width: 768px) {
    .ticker-content {
        animation-duration: 60s; /* ✅ same duration */
    }

    .ticker-item {
        margin: -5px 15px;
        font-size: 17px;
    }

    .newsStripDivider {
        width: 5px;
        height: 5px;
        margin-right: 6px;
    }
}

/* Reduced motion preference */
@media (prefers-reduced-motion) {
    .ticker-content {
        animation: none;
        white-space: normal;
    }

    .news-ticker {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .ticker-item {
        display: inline-flex;
        align-items: center;
    }
}


/* end of news ticker */

/*sticky menu mobile*/
.custom-sticky-nav {
    position: sticky;
    top: 31px;
    padding-bottom: 20px;
    z-index: 1030;
    border-bottom: 2px solid #fff;
    border-radius: 5px;
}

.top-black-bar {
    z-index: 1041; /* Higher to appear above nav */
    background-color: #000; /* make sure it's solid */
}

.top-nav-bar {
    z-index: 1040;
    background-color: #f8f9fa; /* your nav bg color */
}

/*end of sticky menu*/

/*Winners*/

.leaderBoard {
    position: relative;
    overflow: hidden;
    background-color: #f8f9fa;
    padding: 20px;
}

.leaderBoardContent {
    filter: blur(3px);
    opacity: 0.3;
    pointer-events: none;
    user-select: none;
}

.blurContent {
    filter: blur(2px);
    opacity: 0.3;
    pointer-events: none;
    user-select: none;
}

.noWinnersOverlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
}

.overlayMessage {
    color: white;
    font-size: 1.8rem;
    font-weight: bold;
    text-align: center;
}

/*winners*/

/* desktop ads*/

/* ads */


/* Common style for both ads */
/*.overlay-ad {
    position: absolute;
    top: 580px;
    width: 200px;
    height:1000px;
    display: flex;
    justify-content: center;
    pointer-events: auto;
    z-index: 9999;
}*/

/* Stick to left of screen */
/*.left-overlay-ad {
    left: 0;
}*/

/* Stick to right of screen */
/*.right-overlay-ad {
    right: 0;
}*/


/* Left ad: fixed to the left of the screen */
/*.global-left-ad {
    left: 0;
}*/

/* Right ad: fixed to the right of the screen */
/*.global-right-ad {
    right: 0;
}*/

/* General ad styling */
/* General ad container */
.overlay-ad {
    position: absolute;
    width: 210px; /* Ad width */
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: auto; /* Allow clicks */
    z-index: 9999;
    text-align: center;
    transition: top 0.3s ease; /* Smooth transition */
}

    /* Image inside the ad */
    .overlay-ad img {
        width: 100%; /* Ensure the image stretches to full width */
        height: auto; /* Ensure the image keeps its aspect ratio */
        object-fit: cover; /* Cover the container area (may crop if necessary) */
    }

/* For MacBook Air (screen width less than 1440px) */
@media only screen and (max-width: 1440px) {
    .overlay-ad {
        width: 164px; /* Reduce width for smaller screens */
    }

        .overlay-ad img {
            height: 100%; /* Make image fill the height */
        }
}

/* For MacBook Pro (screen width greater than 1440px but less than 1600px) */
@media only screen and (max-width: 1600px) and (min-width: 1441px) {
    .overlay-ad {
        width: 165px; /* Slightly larger width for MacBook Pro */
    }
}

/* For larger screens (desktop resolutions, greater than 1600px) */
@media only screen and (min-width: 1601px) {
    .overlay-ad {
        width: 210px; /* Full width for large screens */
    }
}

/* For larger screens (1601px to 1919px) */
@media only screen and (min-width: 1601px) and (max-width: 1919px) {
    .overlay-ad {
        width: 210px; /* Same width for large screens */
    }
}

/* For full HD and WQHD screens (1920px to 2559px) */
@media only screen and (min-width: 1920px) and (max-width: 2559px) {
    .overlay-ad {
        width: 240px; /* Slightly wider for higher resolution */
    }
}

/* For ultra HD / 4K screens (2560px and above) */
@media only screen and (min-width: 2560px) {
    .overlay-ad {
        width: 280px; /* Even wider for 4K/ultrawide */
    }
}

/* Left ad fixed to the left of the screen */
.left-overlay-ad {
    left: 0; /* Positioned to the left of the screen */
}

/* Right ad fixed to the right of the screen */
.right-overlay-ad {
    right: 0; /* Positioned to the right of the screen */
}
/*end of ads*/

/*carousel left and right arrow*/

.carousel-wrapper {
    position: relative;
    width: 100%;
    /*    display: flex;*/
    align-items: center;
}

.card-scroll-wrapper {
    overflow-x: hidden;
    scroll-behavior: smooth;
    display: flex;
    gap: 0px;
    width: 88%;
    padding: 5px 30px; /* space for arrows */
    box-sizing: border-box;
    margin-right: 52px;
}

/*.item {
    flex: 0 0 calc(25% - 16px);
    min-width: calc(25% - 16px);
    max-width: calc(25% - 16px);
}*/

.carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-75%);
    /*background: linear-gradient(135deg, #4e54c8, #8f94fb);*/
    border-radius: 50%;
    color: white;
    /*font-size: 24px;*/
    width: 48px;
    height: 48px;
    text-align: center;
    line-height: 48px;
    text-decoration: none;
    z-index: 10;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    cursor: pointer;
}

    .carousel-arrow:hover {
        transform: translateY(-75%) scale(1.1);
        /*background: linear-gradient(135deg, #667eea, #764ba2);*/
    }

    .carousel-arrow.left {
        left: 15px;
    }

    .carousel-arrow.right {
        right: 2px;
    }


/*carousel left and right arrow*/

.InheritDisplay {
    display: inherit !important;
}
/*end of add on*/


/* ads */

.ad-container {
    width: 100%;
    max-width: 1000px;
    height: auto;
    aspect-ratio: 16 / 5; 
    border: 1px solid #ddd;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
/*    padding: 20px;*/
    box-sizing: border-box;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    text-align: center;
    margin: 0 auto;
}

    .ad-container img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        display: block;
        margin: auto;
    }


.ad-containerSide {
    width: 100%;
    max-width: 450px;
    height: auto;
    aspect-ratio: 16 / 5;
    border: 1px solid #ddd;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    text-align: center;
    margin: 0 auto;
}

    .ad-containerSide img {
        max-width: 89%;
        max-height: 100%;
        object-fit: contain;
        display: block;
        margin: auto;
    }

/*ads*/

/*hero news or article badges*/
.hero5-wrapper {
    position: relative;
}

.hero-overlay-container {
    position: relative;
    display: inline-block;
    width: 100%;
}
.article-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(255, 0, 0, 0.85);
    color: white;
    font-weight: bold;
    padding: 4px 10px;
    font-size: 12px;
    border-radius: 4px;
    z-index: 10;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    animation: badgePulse 2s infinite;
}

@keyframes badgePulse {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }
}

.hero-overlay-badge {
    position: absolute;
    top: 15px;
    left: -35px;
    background: rgba(255, 0, 0, 0.85);
    color: white;
    font-weight: bold;
    padding: 5px 50px;
    text-align: center;
    transform: rotate(-45deg);
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    font-size: 14px;
    animation: badgePulse 2s infinite;
}

/*hero news or article badges*/

.articleContent p {
    text-align: justify;
    line-height: 1.6;
    margin-bottom: 1rem;
}

.card-img-top {
    object-fit: cover;
    height: 140px;
}

#RelatedNewsDesktop::-webkit-scrollbar {
    display: none;
}
/*news article */
.news-image-container {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 aspect ratio, adjust as needed */
    overflow: hidden;
    border-radius: 8px;
}

.news-main-img {
    position: absolute;
    top: 55%;
    left: 50%;
    width: 100%;
    /*height: 100%;*/
    object-fit: cover;
    border-radius: 8px;
    transform: translate(-50%, -50%) scale(0.8);
}
/*news article */

.statistics-bars-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px 40px;
    max-width: 960px; /* max width for the container */
    margin: 0 auto;
    padding: 20px 10px;
}

.stat-bar-item {
    margin-bottom: 0; /* handled by grid gap */
}

/* Keep the rest as before */
.stat-bar-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 6px;
    font-weight: 600;
    color: #333;
    font-size: 1.1rem;
}

.stat-text {
    flex-grow: 1;
}

.stat-value {
    min-width: 40px;
    text-align: right;
    color: #007bff;
}

.stat-bar-bg {
    background-color: #e1e7f0;
    border-radius: 12px;
    height: 16px;
    overflow: hidden;
}

.stat-bar-fill {
    background: linear-gradient(90deg, #007bff 0%, #66b2ff 100%);
    height: 100%;
    width: 0;
    border-radius: 12px 0 0 12px;
    transition: width 1s ease-in-out;
}

@media (max-width: 480px) {
    .stat-bar-info {
        flex-direction: column;
        align-items: flex-start;
        font-size: 1rem; /* slightly smaller for mobile */
    }

    .stat-value {
        text-align: left;
        margin-top: 4px;
        font-size: 0.95rem;
    }

    .stat-bar-bg {
        height: 14px; /* slimmer for mobile */
    }
}

.full-width-no-padding {
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 99vw;
    max-width: 99vw;
    padding-left: 0;
    padding-right: 0;
    overflow-x: hidden;
}

/*Articles mobile card*/

.gd-mobile-card-article-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
    max-width: 800px;
    width: 100%;
}

.gd-mobile-card-article {
    position: relative;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}

    .gd-mobile-card-article:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 20px rgba(0,0,0,0.12);
    }

.gd-mobile-card-article-img {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    display: block;
}

.gd-mobile-card-article-content {
    padding: 15px;
    text-align: right;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.gd-mobile-card-article-date {
    font-size: 13px;
    color: #888;
    margin-bottom: 8px;
}

.gd-mobile-card-article-title {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin: 0;
    line-height: 1.5;
}

.gd-mobile-card-article-badge {
    position: absolute;
    top: 3px;
    left: 3px; /* moved badge to the left for RTL */
    background: #f6150a;
    color: #fff;
    font-size: 12px;
    padding: 5px 10px;
    border-radius: 20px;
    font-weight: 500;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
/*Articles mobile card*/    

/*mobile headlines*/

.mobileLatestNewsHeader {
    position: relative;
    font-size: clamp(1.8rem, 5vw, 3rem);
    font-weight: 900;
    color: #f6150a;
    margin: 0;
    padding-top: 10px;
    padding-bottom: 24px;
    max-width: 100%;
    opacity: 0;
    transform: translateY(30px);
    animation: fadeSlideIn 1s forwards;
    user-select: none;
    will-change: opacity, transform;
    display: flex;
    align-items: center;
}

    /* Animated arrow before text, flipped direction */
    .mobileLatestNewsHeader::before {
        content: "";
        display: inline-block;
        width: 18px;
        height: 18px;
        margin-left: 10px; /* space between arrow and text */
        background: #f6150a;
        clip-path: polygon(0 50%, 100% 0, 100% 100%);
        opacity: 0;
        transform: translateX(15px);
        animation: arrowSlideIn 1s forwards 0.5s ease-out;
    }

    /* Reduced underline width to 60% and centered it */
    .mobileLatestNewsHeader::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 20%;
        height: 8px;
        width: 60%;
        background: linear-gradient(90deg, #f6150a, #d20f05);
        border-radius: 6px;
        box-shadow: 0 0 15px #f6150aaa;
        clip-path: polygon( 100% 0%, 90% 0%, 80% 100%, 10% 100%, 0% 50%, 10% 0%, 0% 0% );
    }

/* Animate fade + slide */
@keyframes fadeSlideIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Arrow slide + fade in + subtle bounce */
@keyframes arrowSlideIn {
    0% {
        opacity: 0;
        transform: translateX(15px);
    }

    60% {
        opacity: 1;
        transform: translateX(-4px);
    }

    80% {
        transform: translateX(2px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@media (max-width: 400px) {
    .mobileLatestNewsHeader {
        padding-top: 15px;
        padding-bottom: 20px;
        font-size: clamp(1.5rem, 6vw, 2.5rem);
    }

        .mobileLatestNewsHeader::after {
            height: 6px;
            width: 60%;
            left: 20%;
        }

        .mobileLatestNewsHeader::before {
            width: 14px;
            height: 14px;
            margin-left: 8px;
        }
}
/*mobile headlines*/

/*desktop headline*/

/*.headerTitle {
    font-size: 20px;
    align-self: center;
    margin-bottom: 0px;
}*/
.headerTitle {
    position: relative;
    font-size: 28px;
    font-weight: 900;
    color: #f6150a;
    margin: 0;
    padding-top: 10px;
    padding-bottom: 24px;
    max-width: 100%;
    opacity: 0;
    transform: translateY(30px);
    animation: fadeSlideIn 1s forwards;
    user-select: none;
    will-change: opacity, transform;
    display: flex;
    align-items: center;
}

    /* Animated arrow before text, pointing left */
    .headerTitle::before {
        content: "";
        display: inline-block;
        width: 18px;
        height: 18px;
        margin-left: 10px; /* space between arrow and text */
        background: #f6150a;
        clip-path: polygon(0 50%, 100% 0, 100% 100%);
        opacity: 0;
        transform: translateX(15px);
        animation: arrowSlideIn 1s forwards 0.5s ease-out;
    }

    /* Reduced underline width to 60% and centered it */
    .headerTitle::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 20%;
        height: 5px;
        width: 70%;
        background: linear-gradient(90deg, #f6150a, #d20f05);
        border-radius: 6px;
        box-shadow: 0 0 15px #f6150aaa;
        clip-path: polygon( 100% 0%, 90% 0%, 80% 100%, 10% 100%, 0% 50%, 10% 0%, 0% 0% );
    }

/* Animate fade + slide */
@keyframes fadeSlideIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Arrow slide + fade in + subtle bounce */
@keyframes arrowSlideIn {
    0% {
        opacity: 0;
        transform: translateX(15px);
    }

    60% {
        opacity: 1;
        transform: translateX(-4px);
    }

    80% {
        transform: translateX(2px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@media (max-width: 400px) {
    .headerTitle {
        padding-top: 8px;
        padding-bottom: 20px;
        font-size: clamp(1.3rem, 5vw, 2rem);
    }

        .headerTitle::after {
            height: 6px;
            width: 60%;
            left: 20%;
        }

        .headerTitle::before {
            width: 14px;
            height: 14px;
            margin-left: 8px;
        }
}
/*desktop headline*/

/*fix spacing between nav*/
.nav-tabs2 .nav-item {
    margin-left: 12px;
}

    .nav-tabs2 .nav-item:first-child {
        margin-left: 0;
    }
.nav-tabs2 .nav-item {
    margin-right: 12px; /* space after each item */
}

    .nav-tabs2 .nav-item:last-child {
        margin-right: 0; /* no extra space after last tab */
    }
.text-live90 {
    color: #f6150a !important;
}

/*fix spacing between nav*/
.no-data-card {
    max-width: 360px;
    margin: 5px auto;
    padding: 30px 25px;
    border-radius: 15px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
    background-color: #ffffff;
    text-align: center;
    color: #444444;
    direction: rtl;
}

.no-data-icon {
    width: 80px;
    height: 80px;
    stroke: #f57c00;
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
    margin-bottom: 20px;
}

.no-data-title {
    font-size: 1.7rem;
    margin-bottom: 12px;
    margin-top:10px;
    color: #f6150a;
    font-weight: 700;
}

.no-data-text {
    font-size: 1.15rem;
    color: #777777;
    line-height: 1.5;
}

/* 1. Force the footer to display on mobile screens */
.lowerFooter {
    display: block !important;
    visibility: visible !important;
    overflow: visible !important;
}

/* 2. Fix the font size for mobile so it fits in the columns */
@media (max-width: 768px) {
    .lowerFooter h5 {
        font-size: 14px !important;
    }

    .lowerFooter h6 a {
        font-size: 12px !important;
    }
    /* Ensure columns don't collapse */
    .lowerFooter .col-6 {
        min-height: 1px;
        padding-right: 15px;
        padding-left: 15px;
    }
}

/* Default Style (Desktop): White Text */
.legal-link {
    color: #fff;
    text-decoration: none;
}

/* Mobile Style: Black Text */
@media (max-width: 768px) {
    .legal-link {
        color: #000 !important; /* Forces text to black on mobile */
        font-weight: bold; /* Optional: makes it easier to read on mobile */
    }

    .legal-separator {
        color: #000 !important; /* Makes the "|" separator black too */
    }
}

/* Add to your stylesheet */
.match-item-horizontal {
    width: 280px;
    margin: 0;
}

.video-item-horizontal {
    width: 200px;
}

/**injected prediction widget*/
/* --- Compact Injectable Prediction Widget --- */

/* Main container: Reduced max-width and margins */
.inject-prediction-wrapper {
    direction: rtl;
    background: #ffffff;
    border-radius: 10px; /* Slightly smaller radius */
    border-top: 4px solid #D80000;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    overflow: hidden;
    margin: 20px auto; /* Reduced margin */
    max-width: 650px; /* Limits width so it doesn't stretch too much on Desktop */
}

/* Header: Compact padding */
.inject-prediction-header {
    background: #000000;
    color: #ffffff;
    padding: 10px; /* Reduced padding */
    text-align: center;
}

    .inject-prediction-header h6 {
        margin: 0;
        font-weight: 700;
        letter-spacing: 0.5px;
        font-size: 1rem; /* Smaller font */
    }

/* Body: Tighter padding */
.inject-prediction-card-body {
    padding: 15px 20px; /* Significantly reduced padding */
}

/* Team Block: Smaller Logos */
.inject-prediction-team-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
}

    .inject-prediction-team-block:hover {
        transform: translateY(-2px);
    }

.inject-prediction-team-logo {
    width: 45px; /* Reduced from 65px */
    height: 45px;
    object-fit: contain;
    margin-bottom: 6px;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}

.inject-prediction-team-name {
    font-size: 12px; /* Smaller font */
    font-weight: 700;
    color: #333;
    margin: 0;
    line-height: 1.2;
}

/* Center Block */
.inject-prediction-center-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.inject-prediction-inputs-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 8px;
}

/* Inputs: Smaller and cleaner */
.inject-prediction-input-box {
    width: 40px !important; /* Reduced from 55px */
    height: 40px !important;
    text-align: center !important;
    font-size: 18px !important; /* Smaller font */
    font-weight: 700 !important;
    border: 2px solid #e9ecef !important;
    background-color: #f8f9fa !important;
    border-radius: 8px !important;
    color: #000 !important;
    padding: 0 !important;
}

    .inject-prediction-input-box:focus {
        border-color: #D80000 !important;
        background-color: #fff !important;
    }

.inject-prediction-score-separator {
    font-size: 1.5rem;
    font-weight: 700;
    color: #333;
    margin-top: -4px;
}

/* Time Badge: Compact */
.inject-prediction-time-badge {
    background-color: #D80000;
    color: white;
    padding: 4px 12px; /* Smaller padding */
    border-radius: 15px;
    font-weight: 600;
    font-size: 11px; /* Smaller font */
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.inject-prediction-clock-icon {
    width: 12px; /* Smaller icon */
    height: 12px;
    filter: brightness(0) invert(1);
    object-fit: contain;
}

/* Footer: Slimmer */
.inject-prediction-footer {
    text-align: center;
    margin-top: 15px; /* Reduced margin */
    padding-top: 12px;
    border-top: 1px solid #f0f0f0;
}

.inject-prediction-btn-main {
    background-color: #000000;
    color: #ffffff;
    font-weight: 600;
    padding: 8px 30px; /* Smaller button */
    border-radius: 25px;
    font-size: 13px;
    text-decoration: none;
    display: inline-block;
    transition: all 0.2s ease;
}

    .inject-prediction-btn-main:hover {
        background-color: #D80000;
        color: #fff;
        text-decoration: none;
    }

/* No Data */
.inject-prediction-no-data {
    background: #fff;
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    margin: 20px;
    border: 1px solid #eee;
}
/**injected prediction widget*/


/*enahnced news parag*/
.news-paragraph {
    line-height: 1.9;
    font-size: 18px;
    margin-bottom: 20px;
    color: #222;
    text-align: justify;
    padding-right:10px;
    padding-left:10px;
}

.articleContentContainer {
    margin-top: 10px;
}

.matches-slider-container, .videos-slider-container, .tableMobile {
    direction: rtl;
    display: block;
    clear: both;
    margin-bottom: 30px;
}

.feed-header {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 15px;
    border-right: 4px solid #f5a623;
    padding-right: 10px;
    margin-top: 30px;
}
/* Fix widths for horizontal slider items */
.match-item-horizontal {
    width: 280px;
    margin: 0;
}

.video-item-horizontal {
    width: 200px;
}
/*enhanced news parag*/



/* --- Professional Sports News Layout --- */

/* 1. Main Container: Wider than BoxedContainer */
.news-page-container {
    max-width: 1350px; /* Wider for modern screens */
    margin: 0 auto;
    padding-left: 5px;
    padding-right: 5px;
}

/* 2. Main Article Card */
.news-article-card {
    background: #ffffff;
    border-radius: 8px;
    padding: 30px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.04); /* Subtle shadow */
    margin-bottom: 30px;
    border: 1px solid #f0f0f0;
}

/* 3. Typography Enhancements */
.articleTitle b {
    /*font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;*/ /* Replace with your font */
    font-size: 2.2rem;
    line-height: 1.3;
    color: #111;
}

.articleDate {
    font-size: 0.9rem;
    color: #777;
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
    margin-bottom: 20px;
}

.news-main-img {
    border-radius: 8px;
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* 4. Sticky Sidebar (Crucial for Pro feel) */
.sticky-sidebar-wrapper {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 20px; /* Stays 20px from top of screen */
    z-index: 10;
}

.sidebar-widget {
    background: #ffffff;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    margin-bottom: 20px;
    border: 1px solid #f0f0f0;
}

.sidebar-title {
    font-weight: 800;
    border-right: 4px solid #d9534f; /* Brand accent */
    padding-right: 10px;
    margin-bottom: 20px;
    font-size: 1.1rem;
}

/* 5. Readability for Content */
.news-paragraph {
    font-size: 19px; /* Slightly larger for easier reading */
    line-height: 1.8;
    color: #333;
    margin-bottom: 25px;
}

/* Branding Logo on Card */
.match-card-brand {
    position: absolute;
    top: 6px;
    left: 8px; /* sits in the top-left corner */
    height: 14px; /* Adjust based on your actual logo size */
    width: auto;
    opacity: 0.9;
    z-index: 5;
}

/* Ensure the card can hold absolute elements */
.mobileMatchCard {
    position: relative !important; /* Required for the logo to sit inside */
}




/* --- Pro Sports Homepage Theme --- */

/* 1. Section Spacing & Backgrounds */
.pro-section {
    padding: 5px 0;
    border-bottom: 1px solid #f0f0f0;
}

    .pro-section.bg-light {
        background-color: #f8f9fa;
    }

/* 2. Professional Section Headers */
.pro-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
    position: relative;
}

    .pro-header::after {
        content: '';
        position: absolute;
        bottom: -2px;
        right: 0; /* RTL */
        width: 80px;
        height: 2px;
        background-color: #d9534f; /* Brand Red */
    }

    .pro-header h2, .pro-header h4, .pro-header h5 {
        font-weight: 800;
        margin: 0;
        color: #111;
        font-size: 1.5rem;
    }

.pro-link-btn {
    font-size: 0.9rem;
    font-weight: 700;
    color: #d9534f;
    text-decoration: none;
    transition: 0.2s;
}

    .pro-link-btn:hover {
        color: #000;
    }

/* 3. Navigation Tabs (Modern Look) */
.nav-tabs-pro {
    border-bottom: none;
    gap: 10px;
}

    .nav-tabs-pro .nav-link {
        border: none;
        background: #f1f1f1;
        color: #555;
        border-radius: 20px;
        padding: 8px 20px;
        font-weight: 700;
        transition: all 0.3s ease;
    }

        .nav-tabs-pro .nav-link.active, .nav-tabs-pro .nav-link:hover {
            background: #000;
            color: #fff;
        }

    .nav-tabs-pro img.sportIcon {
        filter: grayscale(100%);
        width: 18px;
        margin-left: 5px;
    }

    .nav-tabs-pro .nav-link.active img.sportIcon {
        filter: grayscale(0%) brightness(200%);
    }

/* 4. Multimedia Section */
.media-grid-item {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 15px;
}

    .media-grid-item img {
        transition: transform 0.4s ease;
        width: 100%;
    }

    .media-grid-item:hover img {
        transform: scale(1.05);
    }

.media-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
    padding: 20px;
    color: white;
}

/* 5. Gaming/Predictions Section (Dark Theme) */
.gaming-section {
    background: #111;
    color: #fff;
    padding: 50px 0;
    border-radius: 12px;
    margin-top: 40px;
}

.gaming-header {
    color: #fff;
    border-color: #333;
}

    .gaming-header h5 {
        color: #fff;
    }




/* --- Pro Mobile Theme (App-Like) --- */

.pro-mobile-body {
    background-color: #f4f6f8; /* Light gray app background */
    min-height: 100vh;
    padding-bottom: 70px;
}

/* 1. Sticky Date Navigation */
.sticky-date-nav {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 100;
    background: #ffffff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    padding: 10px 0;
    margin-bottom: 5px;
}

.nav-pills-pro {
    display: flex;
    justify-content: space-around;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

    .nav-pills-pro .nav-link {
        background: transparent;
        color: #888;
        font-weight: 600;
        font-size: 14px;
        border-radius: 20px;
        padding: 6px 20px;
        transition: all 0.3s ease;
        border: 1px solid transparent;
    }

        .nav-pills-pro .nav-link.active {
            background: #000;
            color: #fff;
            box-shadow: 0 4px 10px rgba(0,0,0,0.2);
        }

/* 2. Pro Match Card */
.pro-match-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 5px 10px;
    margin-bottom: 6px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.03);
    border: 1px solid #eee;
    position: relative;
}

    .pro-match-card:active {
        background-color: #f9f9f9; /* Touch feedback */
    }

/* Team alignment */
.match-team-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 30%;
    padding-top:6px;
}

.match-team-logo {
    width: 32px;
    height: 32px;
    object-fit: contain;
    margin-bottom: 5px;
}

.match-team-name {
    font-size: 11px;
    font-weight: 700;
    color: #333;
    text-align: center;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* Score Board */
.match-score-col {
    width: 40%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.match-score-display {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 2px;
    color: #000;
    background: #f0f2f5;
    padding: 4px 15px;
    border-radius: 8px;
    margin-bottom: 4px;
}

.match-status-badge {
    font-size: 10px;
    color: #777;
    font-weight: 600;
}

    .match-status-badge.live {
        color: #d9534f;
        animation: pulse 2s infinite;
    }

/* Live Pulse Animation */
@keyframes pulse {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }

    100% {
        opacity: 1;
    }
}

/* 3. Horizontal Scroll Containers (Leagues/News) */
.horizontal-scroll-wrapper {
    display: flex;
    overflow-x: auto;
    gap: 12px;
    padding: 5px 15px 15px 15px; /* Bottom padding for shadow */
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}

    .horizontal-scroll-wrapper::-webkit-scrollbar {
        display: none;
    }
/* Hide scrollbar */

.league-chip {
    flex: 0 0 auto;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 50px; /* Chip style */
    padding: 6px 15px 6px 6px; /* RTL padding */
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    font-size: 12px;
    font-weight: 700;
    color: #333;
    text-decoration: none;
}

    .league-chip img {
        width: 24px;
        height: 24px;
    }

/* 4. Media Cards (Stories style) */
.media-card-horizontal {
    flex: 0 0 160px;
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    height: 220px;
    box-shadow: 0 3px 8px rgba(0,0,0,0.1);
    scroll-snap-align: start;
}

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

.media-card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
    padding: 10px;
    color: white;
}

.media-title {
    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 5. Section Headers */
.mobile-section-header {
    padding: 15px 15px 10px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .mobile-section-header h5 {
        font-size: 16px;
        font-weight: 800;
        margin: 0;
       /* border-right: 3px solid #d9534f;*/
        padding-right: 8px;
    }

.mobile-section-link {
    font-size: 12px;
    color: #d9534f;
    font-weight: 700;
    text-decoration: none;
}




/* --- Global Fixes Mobile View Pro --- */

.pro-mobile-body {
    background-color: #f8f9fa;
    min-height: 100vh;
    padding-bottom: 80px;
    overflow-x: hidden;
}

/* --- 1. Navigation Chips (News & Leagues) --- */
.horizontal-scroll-wrapper {
    display: flex;
    overflow-x: auto;
    gap: 10px;
    padding: 10px 15px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

    .horizontal-scroll-wrapper::-webkit-scrollbar {
        display: none;
    }

.chip-tab-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    padding: 8px 18px;
    border-radius: 50px;
    background: #fff;
    border: 1px solid #e9ecef;
    color: #555;
    font-weight: 700;
    font-size: 13px;
    transition: all 0.2s ease;
}

    .chip-tab-btn img {
        width: 18px;
        height: 18px;
        margin-left: 6px;
        filter: grayscale(100%);
    }

    .chip-tab-btn.active {
        background: #000;
        color: #fff;
        border-color: #000;
        box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    }

        .chip-tab-btn.active img {
            filter: brightness(0) invert(1);
        }

/* --- 2. Netflix-Style Video Cards --- */
.video-card-netflix {
    flex: 0 0 240px; /* Wide card */
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    height: 140px;
    background: #000;
    margin-right: 10px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

    .video-card-netflix img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0.85;
    }

    .video-card-netflix .play-overlay {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 40px;
        height: 40px;
        background: rgba(0,0,0,0.6);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 2px solid #fff;
    }

    .video-card-netflix .video-meta {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
        padding: 10px;
        color: #fff;
    }

.video-meta h6 {
    font-size: 12px;
    font-weight: 700;
    margin: 0;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}

.video-meta small {
    font-size: 10px;
    opacity: 0.8;
}

/* --- 3. Winners Locked Blur --- */
.winners-locked-wrapper {
    position: relative;
    padding: 20px 0;
}

.winners-content-blur {
    filter: blur(8px);
    opacity: 0.6;
    pointer-events: none;
}

.winners-lock-msg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    background: rgba(255,255,255,0.95);
    padding: 15px 25px;
    border-radius: 30px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    text-align: center;
    border: 1px solid #eee;
    width: 80%;
}

/* --- 4. Inner Tabs (Standings/Scorers) --- */
.inner-tab-nav {
    display: flex;
    gap: 5px;
    margin-bottom: 15px;
    padding: 0 15px;
}

.inner-tab-link {
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    background: #f1f3f5;
    color: #555;
    border: none;
}

    .inner-tab-link.active {
        background: #d9534f;
        color: #fff;
    }

/* --- Tables --- */
.stats-table {
    width: 100%;
    font-size: 12px;
}

    .stats-table td {
        padding: 8px 0;
        border-bottom: 1px solid #f1f1f1;
        vertical-align: middle;
    }

    .stats-table .rank {
        width: 30px;
        font-weight: 700;
        color: #888;
        text-align: center;
    }

    .stats-table .team {
        font-weight: 700;
    }

        .stats-table .team img, .stats-table .player img {
            width: 24px;
            height: 24px;
            margin-left: 8px;
            border-radius: 50%;
            vertical-align: middle;
        }

    .stats-table .val {
        font-weight: 800;
        text-align: center;
        color: #000;
    }

/* --- 1. Fixed Sticky Date Nav (Matches) --- */
.sticky-date-nav {
    position: sticky;
    top: 0;
    z-index: 0;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid #eee;
    padding: 8px 0;
    box-shadow: 0 4px 10px rgba(0,0,0,0.43);
}

.date-nav-container {
    display: flex;
    justify-content: center;
    gap: 8px;
    background: #f1f3f5;
    padding: 0px;
    border-radius: 50px;
    width: fit-content;
    margin: 0 auto;
}

.date-tab-btn {
    border: none;
    background: transparent;
    color: #888;
    font-size: 13px;
    font-weight: 700;
    padding: 8px 24px;
    border-radius: 40px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 6px;
    outline: none !important;
}

    .date-tab-btn.active {
        background: #000000;
        color: #ffffff;
        box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    }

    .date-tab-btn img {
        width: 14px;
        height: 14px;
        filter: grayscale(100%) opacity(0.7);
        transition: all 0.3s ease;
    }

    .date-tab-btn.active img {
        filter: invert(1) brightness(200%); /* Make icon white */
    }

/* --- 2. News Categories Chips (Fixed Scrolling) --- */
.news-scroll-container {
    display: flex;
    overflow-x: auto;
    gap: 10px;
    padding: 5px 15px;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

    .news-scroll-container::-webkit-scrollbar {
        display: none;
    }

.news-chip-btn {
    flex: 0 0 auto;
    background: #fff;
    border: 1px solid #e9ecef;
    color: #333;
    padding: 8px 18px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
    /* Important: reset button styles */
    appearance: none;
    -webkit-appearance: none;
}

    .news-chip-btn img {
        width: 18px;
        height: 18px;
        object-fit: contain;
        filter: grayscale(100%);
    }

    .news-chip-btn.active {
        background: #d9534f; /* Brand Red */
        color: #fff;
        border-color: #d9534f;
        box-shadow: 0 4px 10px rgba(217, 83, 79, 0.3);
    }

        .news-chip-btn.active img {
            filter: brightness(0) invert(1); /* Make icon white */
        }

/* =========================================
   1. ENHANCED MATCH CARD (Digital Look)
   ========================================= */
.pro-match-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #ffffff;
    border: 1px solid #f1f1f1;
    border-radius: 16px; /* Modern rounded corners */
    padding: 6px 12px;
    margin-bottom: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.04); /* Soft elevation */
    position: relative;
    transition: transform 0.2s ease;
}

    .pro-match-card:active {
        transform: scale(0.98);
        background-color: #fafafa;
    }

/* Team Columns */
.match-team-col {
    flex: 1; /* Takes equal space */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    max-width: 35%; /* Prevents overlap */
}

.match-team-logo {
    width: 40px;
    height: 40px;
    object-fit: contain;
    margin-bottom: 8px;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.1));
}

.match-team-name {
    font-size: 12px;
    font-weight: 700;
    color: #222;
    line-height: 1.3;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* ... for long names */
}

/* Center Score/Time Column */
.match-score-col {
    flex: 0 0 80px; /* Fixed width for stability */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.match-score-box {
    background: #222; /* Dark background for score */
    color: #fff; /* White text */
    font-size: 16px;
    font-weight: 800;
    padding: 5px 12px;
    border-radius: 8px;
    letter-spacing: 2px;
    line-height: 1;
    margin-bottom: 5px;
    min-width: 60px;
    text-align: center;
}

.match-time-box {
    color: #333;
    font-size: 15px;
    font-weight: 800;
    background: #f4f4f4;
    padding: 5px 10px;
    border-radius: 8px;
}

.match-status-badge {
    font-size: 10px;
    font-weight: 700;
    color: #888;
    text-transform: uppercase;
    margin-top: 4px;
}

    .match-status-badge.live {
        color: #d9534f;
        animation: pulse 1.5s infinite;
    }

@keyframes pulse {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.6;
    }

    100% {
        opacity: 1;
    }
}

/* =========================================
   2. ENHANCED HEADLINES
   ========================================= */
.mobile-section-header {
    padding: 25px 15px 15px 15px; /* More top spacing */
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: transparent;
}

    .mobile-section-header h5 {
        position: relative;
        padding-right: 18px; /* Space for accent */
        margin: 0;
        font-size: 18px; /* Larger font */
        font-weight: 900;
        color: #111;
        letter-spacing: -0.5px;
    }

        /* The Accent Mark (Red Pill) */
        .mobile-section-header h5::before {
            content: '';
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 6px;
            height: 24px;
            background: linear-gradient(to bottom, #d9534f, #ff6b6b); /* Gradient Red */
            border-radius: 10px;
            box-shadow: 0 2px 5px rgba(217, 83, 79, 0.4);
        }

.mobile-section-link {
    font-size: 13px;
    color: #d9534f;
    font-weight: 700;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* --- Match Card Actions (Footer) --- */
.match-card-actions {
    border-top: 1px solid #d2d2d2;
    padding-top: 10px;
    margin-top: 10px;
    display: flex;
    gap: 10px;
}

.btn-match-action {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    padding: 6px 0;
    border-radius: 8px;
    text-decoration: none !important;
    transition: all 0.2s;
}

.btn-details {
    background: #f8f9fa;
    color: #333;
    border: 1px solid #eee;
}

.btn-predict {
    background: #868a97;
    color: #fff;
    border: 1px solid #868a97;
}

.btn-match-action img {
    width: 14px;
    height: 14px;
    object-fit: contain;
}

/* --- Competitions (Top Leagues) --- */
.competitions-scroll-wrapper {
    display: flex;
    overflow-x: auto;
    gap: 15px;
    padding: 10px 15px;
    scrollbar-width: none;
}

    .competitions-scroll-wrapper::-webkit-scrollbar {
        display: none;
    }

.comp-item {
    flex: 0 0 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-decoration: none;
}

.comp-logo-box {
    width: 60px;
    height: 60px;
    background: #fff;
    border-radius: 50%; /* Circle */
    padding: 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.06);
    margin-bottom: 8px;
    border: 1px solid #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s;
}

    .comp-logo-box:active {
        transform: scale(0.95);
    }

    .comp-logo-box img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

.comp-name {
    font-size: 11px;
    font-weight: 700;
    color: #333;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}



/* --- Hero 5 Pro Design --- */
.hero5-wrapper {
    padding: 0px 0;
}

/* Base Card Style */
.hero-card {
    display: block;
    position: relative;
    width: 100%;
    height: 400px; /* Fixed height for consistency */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

    /* Specific Height for the "Small" stacked items */
    .hero-card.small-card {
        height: 190px !important; /* Half height minus margin */
        margin-bottom: 20px;
    }

    /* Hover Effect: Scale & Shadow */
    .hero-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 25px rgba(0,0,0,0.2);
    }

/* The Dark Gradient Overlay */
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.6) 60%, rgba(0,0,0,0.9) 100%);
    transition: opacity 0.3s;
}

.hero-card:hover .hero-overlay {
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 100%);
}

/* Content Positioning */
.hero-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px;
    z-index: 2;
    direction: rtl; /* Ensure Arabic text aligns right */
}

/* Typography */
/*.hero-date {
    color: #e0e0e0;
    font-size: 11px;
    font-weight: 600;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 5px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}*/

.hero-title {
    color: #fff;
    font-size: 18px; /* Larger title */
    font-weight: 800; /* Bold */
    line-height: 1.3;
    margin: 0;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
    /* Limit lines */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Badges */
.pro-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 3;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    color: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.badge-exclusive {
    background-color: #d9534f; /* Red */
}

.badge-special {
    background-color: #000; /* Black */
    border: 1px solid rgba(255,255,255,0.2);
}

/* Small Card Tweaks */
.hero-card.small-card .hero-content {
    padding: 10px;
}

.hero-card.small-card .hero-title {
    font-size: 14px;
    -webkit-line-clamp: 2;
}



/* --- 1. Featured Article (Hero) --- */
.pro-featured-card {
    display: flex;
    flex-wrap: wrap;
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    margin-bottom: 40px;
    border: 1px solid #f0f0f0;
    transition: transform 0.3s ease;
    text-decoration: none;
    color: inherit;
}

    .pro-featured-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    }

.featured-img-wrap {
    flex: 0 0 55%; /* Image takes 55% width */
    position: relative;
    overflow: hidden;
    min-height: 350px;
}

.featured-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.pro-featured-card:hover .featured-img {
    transform: scale(1.05);
}

.featured-content {
    flex: 1;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.featured-title {
    font-size: 26px;
    font-weight: 800;
    line-height: 1.4;
    margin-bottom: 15px;
    color: #111;
}

.featured-excerpt {
    font-size: 15px;
    color: #666;
    line-height: 1.6;
    margin-bottom: 20px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.featured-meta {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: auto;
    border-top: 1px solid #eee;
    padding-top: 15px;
}

/* --- 2. News Grid Cards --- */
.pro-news-card {
    display: block;
    background: #ffffff;
    border-radius: 10px;
    overflow: hidden;
    height: 100%; /* Equal height */
    border: 1px solid #f0f0f0;
    transition: all 0.3s ease;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}

    .pro-news-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 20px rgba(0,0,0,0.1);
    }

.news-card-img-wrap {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 Aspect Ratio */
    overflow: hidden;
}

.news-card-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.pro-news-card:hover .news-card-img {
    transform: scale(1.1);
}

.news-card-body {
    padding: 15px;
    position: relative;
}

.news-card-date {
    font-size: 11px;
    color: #999;
    font-weight: 600;
    margin-bottom: 8px;
    display: block;
}

.news-card-title {
    font-size: 15px;
    font-weight: 700;
    color: #222;
    line-height: 1.4;
    margin-bottom: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- Buttons & Tags --- */
.tag-btn {
    background: #f8f9fa;
    color: #555;
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 600;
    transition: 0.2s;
}

    .tag-btn:hover {
        background: #000;
        color: #fff;
    }

/* --- Pagination --- */
.pro-pagination {
    display: flex;
    justify-content: center;
    gap: 5px;
    margin-top: 40px;
}

.pro-page-link {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #ddd;
    color: #333;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.2s;
}

    .pro-page-link:hover {
        background: #f6150a; /* Brand Red */
        color: #fff;
        border-color: #f6150a;
    }

/* Responsive */
@media (max-width: 768px) {
    .featured-img-wrap {
        flex: 0 0 100%;
        min-height: 200px;
    }

    .featured-title {
        font-size: 20px;
    }
}



/* ==========================================================================
   MODERN SPORT MAGAZINE THEME (Mobile)
   ========================================================================== */

/* --- 1. HERO CAROUSEL (Floating Immersive Card) --- */
.modern-hero-wrapper {
    padding: 0 5px; /* Slight gutter so card floats */
}

.modern-hero-card {
    position: relative;
    width: 100%;
    height: 320px; /* Taller, more impressive */
    border-radius: 24px; /* Super rounded modern corners */
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2); /* Deep, soft shadow */
    margin-bottom: 10px;
    background-color: #000;
}

.modern-hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

/* Subtle zoom effect on interaction */
.modern-hero-card:active .modern-hero-img {
    transform: scale(1.05);
}

.modern-hero-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    /* Sophisticated multi-stop gradient for text readability */
    background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.6) 70%, #000000 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 25px 20px;
}

/* Floating Glass Badge for Exclusive */
.modern-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    background-color: #f6150a;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    padding: 6px 14px;
    border-radius: 50px;
    box-shadow: 0 4px 15px rgba(246, 21, 10, 0.4);
    backdrop-filter: blur(4px);
    z-index: 10;
}

.modern-hero-title {
    color: #fff;
    font-size: 16px; /* Big & Bold */
    font-weight: 900;
    line-height: 1.35;
    margin-bottom: 50px;
    /* Clamp to 3 lines */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

.modern-hero-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    background: rgba(255, 255, 255, 0.15); /* Glass pill */
    padding: 4px 10px;
    border-radius: 12px;
    width: fit-content;
    backdrop-filter: blur(5px);
}

/* Indicators refinement */
.carousel-indicators {
    bottom: 20px;
    left: 20px; /* Align left */
    right: auto;
    margin: 0;
}

    .carousel-indicators [data-bs-target] {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background-color: rgba(255,255,255,0.4);
        border: none;
        margin: 0 2px;
    }

    .carousel-indicators .active {
        background-color: #f6150a;
        width: 18px;
        border-radius: 10px;
    }


/* --- 2. NEWS LIST (Clean & Airy) --- */

/* The Card */
.modern-list-card {
    background: #fff;
    border-radius: 16px;
    padding: 10px;
    display: flex;
    align-items: center;
    gap: 15px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03); /* Extremely subtle lift */
    border: 1px solid #f5f5f5;
    transition: transform 0.2s;
    height: 100%;
}

    .modern-list-card:active {
        transform: scale(0.98);
        background-color: #fafafa;
    }

/* The Image */
.modern-list-img-wrap {
    flex: 0 0 110px; /* Fixed width */
    height: 85px; /* Fixed height */
    border-radius: 12px;
    overflow: hidden;
    position: relative;
}

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

/* The Content */
.modern-list-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 85px; /* Match image height */
}

.modern-list-date {
    font-size: 11px;
    color: #f6150a; /* Brand color for date */
    font-weight: 700;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.modern-list-title {
    font-size: 15px;
    font-weight: 700;
    color: #111;
    line-height: 1.4;
    margin: 0;
    /* Clamp to 3 lines */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- 3. BROWSE BUTTON (Solid Pill) --- */
.modern-browse-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background-color: #111; /* Dark button */
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    padding: 14px;
    border-radius: 16px;
    text-decoration: none;
    margin-top: 25px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    transition: all 0.2s;
}

    .modern-browse-btn:active {
        transform: scale(0.98);
        background-color: #000;
    }

    .modern-browse-btn img {
        filter: invert(1); /* Make arrow white */
        width: 14px;
    }


/* =======================================================
   PRO VIDEO DETAILS THEME
   ======================================================= */
/* --- 2. Desktop Sidebar (Playlist Style) --- */
.video-sidebar-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.sidebar-video-card {
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    transition: background 0.2s, transform 0.2s;
    text-decoration: none !important;
    border: 1px solid #f0f0f0;
}

    .sidebar-video-card:hover {
        background: #f8f9fa;
        transform: translateX(-5px); /* Slide effect */
    }

.sidebar-vid-img-wrap {
    flex: 0 0 130px; /* Fixed width for thumbnail */
    height: 80px;
    position: relative;
    overflow: hidden;
}

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

.sidebar-vid-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 24px;
    height: 24px;
    background: rgba(0,0,0,0.6);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sidebar-vid-content {
    flex: 1;
    padding: 8px 12px;
}

.sidebar-vid-title {
    font-size: 13px;
    font-weight: 700;
    color: #222;
    line-height: 1.3;
    margin-bottom: 5px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sidebar-vid-date {
    font-size: 11px;
    color: #888;
}

/* --- 3. Main Player (Responsive) --- */
.pro-video-wrapper {
    position: relative;
    width: 100%;
    background: #000;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    margin-bottom: 20px;
}

/* Aspect Ratio Hack (16:9) */
.video-aspect-ratio {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
}

    .video-aspect-ratio iframe,
    .video-aspect-ratio video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

/* --- 4. Mobile Specific Fixes --- */
@media (max-width: 768px) {
    .pro-video-wrapper {
        width: 100vw; /* Force viewport width */
        position: relative;
        left: 50%;
        right: 50%;
        margin-left: -50vw; /* Center it and stretch */
        margin-right: -50vw;
        border-radius: 0;
        margin-bottom: 15px;
    }

    .video-aspect-ratio {
        padding-bottom: 56.25%; /* Keep 16:9 ratio */
        height: 0;
        background: #000;
    }

    .video-headline {
        font-size: 18px;
        line-height: 1.4;
    }

    /* Ensure no overflow on controls */
    .user-control-wrapper {
        width: 100%;
        overflow-x: hidden;
    }
}
/* --- Bottom Feed Section (Mobile) --- */
.bottom-feed-container {
    padding-bottom: 80px; /* Space for bottom nav */
    background-color: #f8f9fa;
    padding-top: 20px;
    border-top: 1px solid #e9ecef;
}

.feed-header {
    font-size: 18px;
    font-weight: 800;
    color: #111;
    margin-bottom: 15px;
    margin-top: 30px;
    padding-right: 15px; /* RTL padding */
    border-right: 4px solid #f6150a; /* Brand Accent */
    line-height: 1.2;
    display: flex;
    align-items: center;
}

/* Ensure controls inside don't overflow */
.bottom-feed-container > * {
    max-width: 100%;
}




/* =========================================
   MASTER PAGE: REGISTER & FOOTER (FIXED)
   ========================================= */

/* --- 1. Register Section (Light & Clean) --- */
.register-section {
    background-color: #f8f9fa;
    border-top: 1px solid #e9ecef;
    border-bottom: 1px solid #e9ecef;
    padding: 60px 0;
    text-align: center;
    position: relative;
    width: 100%; /* Ensure fit */
}

.register-title {
    font-size: 1.8rem; /* Slightly smaller for mobile safety */
    font-weight: 800;
    margin-bottom: 15px;
    color: #222;
}

@media (min-width: 768px) {
    .register-title {
        font-size: 2.2rem;
    }
}

.register-text {
    font-size: 1rem;
    color: #666;
    max-width: 700px;
    margin: 0 auto 30px auto;
    line-height: 1.7;
    padding: 0 15px; /* Prevent text touching edges */
}

/* Red CTA Button */
.btn-register-cta {
    background-color: #d32f2f;
    color: #fff !important;
    padding: 12px 40px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 1.1rem;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 10px 20px rgba(211, 47, 47, 0.2);
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

    .btn-register-cta:hover {
        background-color: #b71c1c;
        transform: translateY(-3px);
        box-shadow: 0 15px 25px rgba(211, 47, 47, 0.3);
    }

/* --- 2. Footer Wrapper (Dark) --- */
.footer-wrapper {
    background-color: #1a1a1a;
    color: #acacac;
    padding-top: 60px;
    padding-bottom: 30px;
    font-size: 14px;
    width: 100%;
}

/* Centered Column Title */
.footer-col-title {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 20px;
    padding-bottom: 10px;
    position: relative;
    display: inline-block;
}

    .footer-col-title::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%); /* Centers the underline */
        width: 40px;
        height: 3px;
        background-color: #d32f2f;
        border-radius: 2px;
    }

/* Links (Fixed to prevent overflow on hover) */
.footer-link-item {
    display: block;
    color: #999;
    text-decoration: none;
    margin-bottom: 12px;
    transition: color 0.2s, padding 0.2s; /* Animate padding instead of transform */
    font-size: 14px;
}

    .footer-link-item:hover {
        color: #fff;
        text-decoration: none;
        padding-right: 5px; /* Safer slide effect for RTL */
    }

/* Bottom Bar */
.footer-bottom {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #333;
}

/* Social Icons */
.social-icon-btn {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #2a2a2a;
    color: #fff;
    border-radius: 50%;
    margin: 0 5px;
    text-decoration: none;
    transition: all 0.3s;
}

    .social-icon-btn:hover {
        background: #d32f2f;
        color: #fff;
        transform: translateY(-2px);
    }

/* =========================================
   HIDE REGISTER & FOOTER ON MOBILE
   ========================================= */

/* Mobile & Tablet */
@media (max-width: 767px) {

    .register-section,
    .footer-wrapper {
        display: none !important;
    }
}

/* --- Modern Desktop Navigation --- */
.pro-navbar-container {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.03);
    padding: 8px 15px;
    border: 1px solid #f0f0f0;
    width: 100%;
}

.pro-nav-link {
    display: flex;
    align-items: center;
    gap: 10px; /* Space between icon and text */
    padding: 10px 20px !important;
    color: #555 !important;
    font-weight: 700;
    font-size: 14px;
    border-radius: 50px; /* Pill shape hover */
    transition: all 0.3s ease;
    position: relative;
}

    /* Hover State */
    .pro-nav-link:hover {
        color: #d32f2f !important; /* Brand Red */
        background-color: #fff5f5; /* Very light red background */
        transform: translateY(-1px);
    }

    /* Active State (Can be applied via JS or Server-side) */
    .pro-nav-link.active {
        color: #d32f2f !important;
        background-color: #fff5f5;
        font-weight: 800;
    }

/* Icon Styling */
.pro-nav-icon {
    height: 20px;
    width: auto;
    object-fit: contain;
    transition: transform 0.3s ease;
    opacity: 0.8;
}

/* Icon Hover Animation */
.pro-nav-link:hover .pro-nav-icon {
    transform: scale(1.15); /* Slight pop effect */
    opacity: 1;
}

/* Menu Toggle Button Special Style */
.menu-toggle-link {
    border: 1px solid #eee;
}

    .menu-toggle-link:hover {
        border-color: #d32f2f;
    }
/* --- Pro Header Container --- */
.header-modern {
    background: rgba(255, 255, 255, 0.98); /* Slight transparency */
    backdrop-filter: blur(10px); /* Glass effect */
    border-bottom: 1px solid rgba(0,0,0,0.05);
    box-shadow: 0 5px 20px -10px rgba(0,0,0,0.1); /* Soft shadow */
    padding: 10px 0;
    transition: all 0.3s ease;
    position: sticky; /* Optional: Makes header stick to top */
    top: 0;
    z-index: 1000;
}

/* --- Logo Styling --- */
.logo-container {
    text-align: right; /* RTL */
    padding-right: 20px;
}

.logo-img {
    height: 50px;
    width: auto;
    object-fit: contain;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

    .logo-img:hover {
        transform: scale(1.1) rotate(2deg); /* Subtle pop */
    }

/* --- Navigation Links (The Core Upgrade) --- */
.nav-modern-item {
    position: relative;
    margin: 0 5px;
}

.nav-modern-link {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #555 !important;
    font-weight: 700;
    font-size: 15px;
    padding: 10px 15px !important;
    transition: color 0.3s ease;
}

/* Icons (Images) */
.nav-icon-img {
    height: 20px;
    width: auto;
    opacity: 0.7;
    transition: all 0.3s ease;
}

/* THE NEW HOME ICON (FontAwesome) */
.icon-home-pro {
    font-size: 18px;
    color: #555;
    transition: all 0.3s ease;
    margin-bottom: 2px; /* Alignment fix */
}

/* Hover Effects */
.nav-modern-link:hover {
    color: #d32f2f !important; /* Brand Red */
}

    .nav-modern-link:hover .nav-icon-img,
    .nav-modern-link:hover .icon-home-pro {
        opacity: 1;
        transform: translateY(-2px); /* Float up */
        color: #d32f2f;
    }

/* Active State Indicator (Red Dot/Line) */
.nav-modern-link::after {
    content: '';
    position: absolute;
    bottom: 5px;
    left: 50%;
    width: 0;
    height: 3px;
    background-color: #d32f2f;
    border-radius: 10px;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    transform: translateX(-50%);
}

.nav-modern-link:hover::after,
.nav-modern-link.active::after {
    width: 25px; /* Expands on hover */
}

/* --- Login Button (Pill Style) --- */
.login-btn-wrapper {
    text-align: left; /* RTL */
    padding-left: 20px;
}

.btn-pro-login {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    color: #333;
    border: 1px solid #e0e0e0;
    padding: 8px 24px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0,0,0,0.02);
}

    .btn-pro-login:hover {
        background: #d32f2f;
        color: #fff;
        border-color: #d32f2f;
        box-shadow: 0 5px 15px rgba(211, 47, 47, 0.3);
        transform: translateY(-2px);
    }

    .btn-pro-login i {
        font-size: 16px;
    }

/* =========================================
   MATCHES PAGE PRO THEME
   ========================================= */
/* =========================================================
   PRO LEAGUE DASHBOARD (World-Class Standard)
   ========================================================= */

.matches-wrapper {
    background-color: #f0f2f5; /* Light gray base */
    min-height: 100vh;
}

/* --- 1. Date Timeline (Native App Feel) --- */
.timeline-container {
    background: #fff;
    box-shadow: 0 1px 10px rgba(0,0,0,0.05);
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid #e1e4e8;
}

.timeline-scroll-area {
    display: flex;
    overflow-x: auto;
    padding: 0 10px;
    scroll-behavior: smooth;
    scrollbar-width: none;
}

    .timeline-scroll-area::-webkit-scrollbar {
        display: none;
    }

.timeline-day {
    flex: 0 0 auto;
    width: 75px;
    text-align: center;
    padding: 10px 0;
    position: relative;
    color: #6c757d;
    text-decoration: none !important;
    transition: all 0.2s ease;
    border-bottom: 3px solid transparent;
}

    .timeline-day:hover {
        background-color: #f8f9fa;
        color: #212529;
    }

    .timeline-day.active {
        color: #d32f2f;
        background-color: transparent;
        border-bottom-color: #d32f2f;
    }

        .timeline-day.active span {
            font-weight: 800;
        }

    .timeline-day .day-name {
        font-size: 11px;
        text-transform: uppercase;
        display: block;
        margin-bottom: 2px;
    }

    .timeline-day .day-date {
        font-size: 15px;
        font-weight: 600;
        display: block;
        line-height: 1;
    }

/* --- 2. League Container --- */
.league-block {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    margin-bottom: 16px;
    overflow: hidden;
    border: 1px solid #e1e4e8;
}

/* Sticky League Header */
.league-header {
    background: #f8f9fa;
    padding: 12px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e1e4e8;
}

.league-title-group {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.league-logo {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.league-name {
    font-size: 13px;
    font-weight: 800;
    color: #212529;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.league-arrow {
    font-size: 12px;
    color: #adb5bd;
    transition: transform 0.2s;
}

.league-header:hover .league-arrow {
    transform: translateX(-3px);
    color: #d32f2f;
}

/* --- 3. Desktop Match Row (Table Style) --- */
.match-row-desk {
    display: flex;
    align-items: center;
    padding: 14px 20px;
    border-bottom: 1px solid #f0f0f0;
    transition: background 0.15s;
    position: relative;
    text-decoration: none !important;
}

    .match-row-desk:last-child {
        border-bottom: none;
    }

    .match-row-desk:hover {
        background-color: #fdfdfd;
    }

/* Status Column */
.col-status-desk {
    width: 90px;
    text-align: center;
    border-left: 1px solid #f0f0f0;
    padding-left: 15px;
}

.match-time {
    font-size: 12px;
    font-weight: 500;
    color: #495057;
}

.live-blink {
    color: #d32f2f;
    font-weight: 800;
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.dot {
    width: 6px;
    height: 6px;
    background: #d32f2f;
    border-radius: 50%;
    animation: pulse 1.5s infinite;
}

/* Teams & Score */
.col-match-desk {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
}

.team-desk {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    font-size: 15px;
    font-weight: 600;
    color: #212529;
}

    .team-desk.home {
        justify-content: flex-end;
        text-align: right;
    }

    .team-desk.away {
        justify-content: flex-start;
        text-align: left;
    }

.team-icon-sm {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.score-desk {
    background: #212529;
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    padding: 4px 12px;
    border-radius: 6px;
    min-width: 65px;
    text-align: center;
    letter-spacing: 1px;
}

    .score-desk.pending {
        background: #e9ecef;
        color: #495057;
    }

/* Actions */
.col-actions-desk {
    width: 60px;
    text-align: left;
    opacity: 0;
    transition: opacity 0.2s;
}

.match-row-desk:hover .col-actions-desk {
    opacity: 1;
}

.btn-icon-ghost {
    color: #adb5bd;
    font-size: 14px;
    padding: 5px;
    border-radius: 50%;
    transition: all 0.2s;
}

    .btn-icon-ghost:hover {
        background: #ffebee;
        color: #d32f2f;
    }

/* --- 4. Mobile Match Item (The Pro "App" Look) --- */
.match-row-mob {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid #f0f0f0;
    text-decoration: none !important;
    position: relative;
    background: #fff;
}

    .match-row-mob:last-child {
        border-bottom: none;
    }

/* Left Strip (Status) */
.mob-status-col {
    width: 55px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-left: 1px solid #f8f9fa; /* Separator */
    font-size: 11px;
    color: #6c757d;
    background: #fdfdfd;
}

    .mob-status-col.live {
        border-right: 3px solid #d32f2f;
        background: #fff5f5;
        color: #d32f2f;
        font-weight: 700;
    }

/* Middle (Teams & Scores) */
.mob-info-col {
    flex: 1;
    padding: 12px 15px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mob-team-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mob-team-name {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 600;
    color: #212529;
}

.mob-logo {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

.mob-score {
    font-size: 14px;
    font-weight: 800;
    color: #d32f2f;
}

    .mob-score.empty {
        color: #dee2e6;
    }

/* Right Strip (Action) */
.mob-action-col {
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Animations */
@keyframes pulse {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.4;
    }

    100% {
        opacity: 1;
    }
}

/* --- Pro Floating Date Navigator --- */
.timeline-wrapper-outer {
    position: sticky;
    top: 15px; /* Stick with a gap from top */
    z-index: 900;
    margin-bottom: 25px;
    padding: 0 15px; /* Safety padding */
}

.timeline-container {
    background: #ffffff;
    border-radius: 50px; /* Fully rounded pill shape */
    box-shadow: 0 8px 20px rgba(0,0,0,0.08); /* Deep premium shadow */
    padding: 8px;
    display: flex;
    align-items: center;
    border: 1px solid #fff; /* Border to pop against gray bg */
    max-width: 1000px; /* Limit width on huge screens */
    margin: 0 auto; /* Center it */
}

.timeline-scroll-area {
    display: flex;
    overflow-x: auto;
    gap: 8px; /* Space between days */
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding: 0 10px;
    flex: 1;
}

    .timeline-scroll-area::-webkit-scrollbar {
        display: none;
    }

/* Day Item */
.timeline-day {
    flex: 0 0 auto;
    min-width: 75px;
    text-align: center;
    padding: 8px 0;
    border-radius: 20px; /* Smooth rounded corners */
    color: #888;
    text-decoration: none !important;
    transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    background: transparent;
    border: 1px solid transparent;
}

    /* Day Typography */
    .timeline-day .day-name {
        font-size: 11px;
        font-weight: 700;
        display: block;
        margin-bottom: 2px;
    }

    .timeline-day .day-date {
        font-size: 14px;
        font-weight: 700;
        /*font-family: 'Segoe UI', sans-serif;*/
        display: block;
        line-height: 1;
    }

    /* Hover State */
    .timeline-day:hover {
        background: #f8f9fa;
        color: #333;
        transform: translateY(-2px);
    }

    /* Active State (The Red Pill) */
    .timeline-day.active {
        background: #d32f2f;
        color: #fff !important;
        box-shadow: 0 4px 10px rgba(211, 47, 47, 0.3);
        border-color: #d32f2f;
    }

/* Navigation Buttons (Circles) */
.timeline-nav-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #eee;
    color: #555;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

    .timeline-nav-btn:hover {
        background: #333;
        color: #fff;
        border-color: #333;
    }

    .timeline-nav-btn i {
        font-size: 14px;
    }

/* Mobile Tweak */
@media (max-width: 768px) {
    .timeline-wrapper-outer {
        padding: 0 10px;
        top: 10px;
    }

    .timeline-container {
        border-radius: 16px; /* Less rounded on mobile to fit more */
        padding: 5px;
    }

    .timeline-day {
        min-width: 65px;
    }
}
/* This class makes the pill Red and Text White */
.timeline-day.active {
    background: #d32f2f !important;
    color: #fff !important;
    box-shadow: 0 4px 10px rgba(211, 47, 47, 0.3);
    border-color: #d32f2f;
}

    /* Ensure the span inside inherits the white color */
    .timeline-day.active span {
        color: #fff !important;
        font-weight: 800;
    }

/* Update this class in styles.css */
.score-desk {
    display: flex; /* Aligns Home - Separator - Away in a row */
    align-items: center;
    justify-content: center;
    background: #212529;
    color: #fff;
    font-weight: 800;
    font-size: 16px;
    padding: 6px 15px;
    border-radius: 8px;
    min-width: 80px;
    line-height: 1;
}

    /* Optional: Gray background if match hasn't started (you can toggle this class in C#) */
    .score-desk.pending {
        background: #e9ecef;
        color: #6c757d;
    }



/* --- Pro Section Title --- */
.section-title {
    display: flex;
    align-items: center;
    gap: 12px; /* Space between icon and text */
    font-size: 1.3rem;
    font-weight: 800;
    color: #222;
    margin-bottom: 25px;
    position: relative;
    line-height: 1;
}

/* The Icon Container (Circle with Glow) */
.title-icon-box {
    width: 36px;
    height: 36px;
    background: #fff5f5; /* Very light red */
    color: #d32f2f; /* Brand Red */
    border-radius: 12px; /* Soft Square (Squircle) */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(211, 47, 47, 0.15); /* Red Glow */
}

/* Hover Effect on Title */
.section-title:hover .title-icon-box {
    background: #d32f2f;
    color: #fff;
    transform: rotate(-10deg) scale(1.1);
}

/* The Text */
.title-text {
    position: relative;
    z-index: 1;
}

/* The Automatic Horizontal Line */
.section-title::after {
    content: '';
    flex-grow: 1; /* Takes up remaining space */
    height: 2px;
    background: linear-gradient(to left, #f0f0f0, #fff); /* Fades out */
    margin-right: 15px; /* Space from text (RTL) */
    border-radius: 2px;
}

/* Mobile Adjustment */
@media (max-width: 768px) {
    .section-title {
        font-size: 1.1rem;
        margin-bottom: 20px;
    }

    .title-icon-box {
        width: 30px;
        height: 30px;
        font-size: 14px;
    }
}


/* =========================================
   CUSTOM ERROR PAGE
   ========================================= */

.error-page-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f4f6f9; /* Dashboard Gray */
    padding: 20px;
    text-align: center;
}

.error-card {
    background: #fff;
    max-width: 600px;
    width: 100%;
    padding: 60px 40px;
    border-radius: 24px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.08);
    border: 1px solid #e1e4e8;
    position: relative;
    overflow: hidden;
}

    /* Red accent line at top */
    .error-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 6px;
        background: #d32f2f;
    }

.error-logo {
    height: 70px;
    margin-bottom: 40px;
    object-fit: contain;
}

.error-illustration {
    margin-bottom: 30px;
    color: #d32f2f;
    animation: float 6s ease-in-out infinite;
}

.error-code {
    font-size: 80px;
    font-weight: 900;
    line-height: 1;
    color: #222;
    margin-bottom: 10px;
    letter-spacing: -2px;
}

.error-title {
    font-size: 24px;
    font-weight: 800;
    color: #333;
    margin-bottom: 15px;
}

.error-message {
    color: #666;
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 40px;
    max-width: 80%;
    margin-left: auto;
    margin-right: auto;
}

.btn-error-home {
    background-color: #d32f2f;
    color: #fff;
    padding: 15px 40px;
    border-radius: 50px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 5px 15px rgba(211, 47, 47, 0.3);
}

    .btn-error-home:hover {
        background-color: #b71c1c;
        color: #fff;
        transform: translateY(-3px);
        box-shadow: 0 8px 20px rgba(211, 47, 47, 0.4);
    }

@keyframes float {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-15px);
    }

    100% {
        transform: translateY(0px);
    }
}

@media (max-width: 768px) {
    .error-card {
        padding: 40px 20px;
    }

    .error-code {
        font-size: 60px;
    }

    .error-title {
        font-size: 20px;
    }
}

/* =========================================
   PRO MATCH CAROUSEL CARD
   ========================================= */

/* The Card Wrapper */
.pro-carousel-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    margin: 10px;
    width: 320px; /* Fixed width for carousel stability */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid #f0f0f0;
    overflow: hidden;
    position: relative;
    direction: rtl;
}

    .pro-carousel-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 25px rgba(0,0,0,0.1);
        border-color: #ffe0e0;
    }

/* 1. Header (League) */
.pmc-header {
    background: #fdfdfd;
    padding: 10px 15px;
    border-bottom: 1px solid #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pmc-league-info {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pmc-league-logo {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.pmc-league-name {
    font-size: 12px;
    font-weight: 700;
    color: #555;
    margin: 0;
}

.pmc-status {
    font-size: 11px;
    font-weight: 700;
    color: #999;
    background: #eee;
    padding: 2px 8px;
    border-radius: 4px;
}

    .pmc-status.live {
        background: #ffebee;
        color: #d32f2f;
    }

/* 2. Body (Teams & Score) */
.pmc-body {
    padding: 2px 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pmc-team {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
    text-decoration: none !important;
}

.pmc-team-logo {
    width: 55px;
    height: 55px;
    object-fit: contain;
    transition: transform 0.2s;
}

.pro-carousel-card:hover .pmc-team-logo {
    transform: scale(1.1);
}

.pmc-team-name {
    font-size: 13px;
    font-weight: 700;
    color: #333;
    line-height: 1.2;
    height: 32px; /* Fixed height for 2 lines */
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Center Score/Time */
.pmc-center {
    width: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.pmc-score {
    font-size: 26px;
    font-weight: 800;
    color: #222;
    letter-spacing: 2px;
}

.pmc-time {
    font-size: 14px;
    font-weight: 700;
    color: #d32f2f;
}

/* 3. Footer (Actions) */
.pmc-footer {
    display: flex;
    border-top: 1px solid #f5f5f5;
}

.pmc-action-btn {
    flex: 1;
    padding: 10px 0;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: #666;
    text-decoration: none !important;
    transition: all 0.2s;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

    .pmc-action-btn:hover {
        background: #f9f9f9;
        color: #d32f2f;
    }

    .pmc-action-btn:not(:last-child) {
        border-left: 1px solid #f5f5f5; /* Separator */
    }

/* Live Pulse Animation */
.live-pulse {
    animation: pulse-red 1.5s infinite;
}

@keyframes pulse-red {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(211, 47, 47, 0.7);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 6px rgba(211, 47, 47, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(211, 47, 47, 0);
    }
}

/* =========================================
   PRO TOURNAMENT PAGE DESIGN
   ========================================= */

/* --- 1. Hero Header (Immersive) --- */
.tournament-hero {
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
    color: #fff;
    padding: 40px 0 0 0; /* Padding top only */
    position: relative;
    overflow: hidden;
}

.hero-overlay {
    background: url('/assets/images/pattern-dots.png') repeat; /* Optional pattern */
    opacity: 0.1;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.hero-content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 25px;
    padding-bottom: 30px;
}

.hero-logo {
    width: 100px;
    height: 100px;
    background: #fff;
    border-radius: 20px;
    padding: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    object-fit: contain;
}

.hero-title h1 {
    font-size: 32px;
    font-weight: 900;
    margin: 0 0 5px 0;
    color: #fff;
}

.hero-meta {
    display: flex;
    gap: 15px;
    font-size: 14px;
    opacity: 0.8;
}

.btn-follow {
    background: #d32f2f;
    color: #fff;
    border: none;
    padding: 8px 20px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s;
    text-decoration: none;
}

    .btn-follow:hover {
        background: #b71c1c;
        transform: translateY(-2px);
        color: #fff;
    }

/* --- 2. Sticky Navigation Tabs --- */
.tournament-nav-wrapper {
    background: #fff;
    border-bottom: 1px solid #e0e0e0;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.nav-pro-tabs {
    display: flex;
    gap: 30px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.nav-pro-link {
    padding: 15px 0;
    color: #666;
    font-weight: 700;
    font-size: 14px;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    background: none;
    border-top: none;
    border-left: none;
    border-right: none;
    transition: all 0.2s;
}

    .nav-pro-link:hover {
        color: #d32f2f;
    }

    .nav-pro-link.active {
        color: #d32f2f;
        border-bottom-color: #d32f2f;
    }

/* --- 3. Dashboard Widgets (General Tab) --- */
.widget-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    border: 1px solid #f0f0f0;
    margin-bottom: 20px;
    overflow: hidden;
}

.widget-header {
    padding: 15px 20px;
    border-bottom: 1px solid #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fcfcfc;
}

.widget-title {
    font-size: 15px;
    font-weight: 800;
    color: #333;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Stat Row (Goals/Assists) */
.stat-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    border-bottom: 1px solid #f9f9f9;
    transition: background 0.2s;
}

    .stat-row:last-child {
        border-bottom: none;
    }

    .stat-row:hover {
        background: #fafafa;
    }

.player-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.player-img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #eee;
}

.player-names h6 {
    font-size: 13px;
    font-weight: 700;
    margin: 0;
    color: #333;
}

.player-names span {
    font-size: 11px;
    color: #888;
}

.stat-value {
    background: #f0f2f5;
    color: #222;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 14px;
}

/* --- 4. Standings Table (Pro) --- */
.pro-table {
    width: 100%;
    border-collapse: collapse;
}

    .pro-table th {
        background: #f8f9fa;
        color: #666;
        font-size: 12px;
        font-weight: 700;
        padding: 10px;
        text-align: center;
        border-bottom: 1px solid #e0e0e0;
    }

    .pro-table td {
        padding: 12px 10px;
        font-size: 13px;
        color: #333;
        border-bottom: 1px solid #f0f0f0;
        text-align: center;
    }

    .pro-table .team-cell {
        text-align: right;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .pro-table .rank {
        width: 30px;
        font-weight: 700;
        color: #888;
    }

    .pro-table .points {
        font-weight: 800;
        color: #222;
        background: #e8f5e9;
        border-radius: 4px;
        padding: 2px 6px;
    }

/* --- Mobile Specifics --- */
@media (max-width: 768px) {
    .tournament-hero {
        padding: 20px 0 0 0;
    }

    .hero-logo {
        width: 60px;
        height: 60px;
        border-radius: 12px;
    }

    .hero-title h1 {
        font-size: 22px;
    }

    .nav-pro-tabs {
        gap: 15px;
        overflow-x: auto;
        padding-bottom: 0;
    }

    .nav-pro-link {
        white-space: nowrap;
        font-size: 13px;
        padding: 12px 5px;
    }

    .widget-card {
        border-radius: 0;
        border-left: none;
        border-right: none;
    }
    /* Edge to edge on mobile */
}

/* --- Tournament Page Specifics --- */

/* Hero & Header */
.tournament-hero {
    background: linear-gradient(135deg, #111 0%, #2a2a2a 100%);
    color: #fff;
    padding: 40px 0 20px;
    position: relative;
}

.hero-content {
    display: flex;
    align-items: center;
    gap: 20px;
}

.hero-logo {
    width: 90px;
    height: 90px;
    background: #fff;
    border-radius: 16px;
    padding: 10px;
    object-fit: contain;
    box-shadow: 0 10px 20px rgba(0,0,0,0.3);
}

.hero-title h1 {
    font-weight: 800;
    font-size: 28px;
    margin: 0;
}

/* Navigation Tabs */
.pro-tabs-container {
    background: #fff;
    border-bottom: 1px solid #eee;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 10px rgba(0,0,0,0.03);
}

.nav-pro-tabs {
    border: none;
    justify-content: center;
}

.nav-pro-link {
    color: #555;
    font-weight: 700;
    padding: 15px 25px;
    border: none;
    background: none;
    border-bottom: 3px solid transparent;
    transition: all 0.2s;
}

    .nav-pro-link.active {
        color: #d32f2f;
        border-bottom-color: #d32f2f;
        background: none;
    }

    .nav-pro-link:hover {
        color: #d32f2f;
    }

/* Dashboard Widgets */
.dashboard-widget {
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e1e4e8;
    margin-bottom: 20px;
    overflow: hidden;
}

.widget-header {
    padding: 12px 20px;
    background: #f9fafb;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.widget-title {
    font-size: 15px;
    font-weight: 800;
    color: #333;
    margin: 0;
}

/* Stats Row */
.stat-row-pro {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 15px;
    border-bottom: 1px solid #f5f5f5;
}

    .stat-row-pro:last-child {
        border-bottom: none;
    }

.stat-rank {
    width: 25px;
    font-weight: 700;
    color: #999;
    font-size: 12px;
}

.stat-player {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    text-decoration: none;
    color: #333;
}

.stat-avatar {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid #eee;
}

.stat-val {
    font-weight: 800;
    font-size: 14px;
    background: #eee;
    padding: 2px 8px;
    border-radius: 6px;
}

/* Matches List (Clean) */
.match-row-clean {
    display: flex;
    align-items: center;
    padding: 12px;
    border-bottom: 1px solid #f0f0f0;
    text-decoration: none;
    color: inherit;
}

    .match-row-clean:hover {
        background: #fafafa;
    }

.m-time {
    width: 60px;
    font-size: 12px;
    font-weight: 700;
    color: #888;
    text-align: center;
}

.m-teams {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
}

.m-team {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 40%;
    font-size: 13px;
    font-weight: 600;
}

    .m-team.home {
        justify-content: flex-end;
        text-align: right;
    }

    .m-team.away {
        justify-content: flex-start;
        text-align: left;
    }

.m-score {
    font-weight: 800;
    font-size: 16px;
    background: #222;
    color: #fff;
    padding: 2px 10px;
    border-radius: 6px;
}

/* Mobile Specifics */
@media (max-width: 768px) {
    .nav-pro-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start;
    }

    .nav-pro-link {
        white-space: nowrap;
        padding: 12px 15px;
        font-size: 13px;
    }

    .hero-logo {
        width: 60px;
        height: 60px;
    }

    .hero-title h1 {
        font-size: 20px;
    }

    .stat-row-pro {
        padding: 8px 10px;
    }
}

/* --- Tournament Page Specifics --- */

/* Hero & Header */
.tournament-hero {
    background: linear-gradient(135deg, #111 0%, #2a2a2a 100%);
    color: #fff;
    padding: 40px 0 20px;
    position: relative;
    margin-bottom: -20px; /* Overlap with tabs */
    z-index: 1;
}

.hero-content {
    display: flex;
    align-items: center;
    gap: 20px;
}

.hero-logo {
    width: 90px;
    height: 90px;
    background: #fff;
    border-radius: 16px;
    padding: 10px;
    object-fit: contain;
    box-shadow: 0 10px 20px rgba(0,0,0,0.3);
}

.hero-title h1 {
    font-weight: 800;
    font-size: 28px;
    margin: 0;
}

/* Navigation Tabs */
.pro-tabs-container {
    background: #fff;
    border-bottom: 1px solid #eee;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 10px rgba(0,0,0,0.03);
    margin-bottom: 30px;
    border-radius: 12px 12px 0 0; /* Rounded top for tab container overlap */
}

.nav-pro-tabs {
    border: none;
    justify-content: center;
}

.nav-pro-link {
    color: #555;
    font-weight: 700;
    padding: 15px 25px;
    border: none;
    background: none;
    border-bottom: 3px solid transparent;
    transition: all 0.2s;
}

    .nav-pro-link.active {
        color: #d32f2f;
        border-bottom-color: #d32f2f;
        background: none;
    }

    .nav-pro-link:hover {
        color: #d32f2f;
    }

/* Dashboard Widgets */
.dashboard-widget {
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e1e4e8;
    margin-bottom: 20px;
    overflow: hidden;
}

.widget-header {
    padding: 12px 20px;
    background: #f9fafb;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.widget-title {
    font-size: 15px;
    font-weight: 800;
    color: #333;
    margin: 0;
}

/* Stats Row */
.stat-row-pro {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 15px;
    border-bottom: 1px solid #f5f5f5;
}

    .stat-row-pro:last-child {
        border-bottom: none;
    }

.stat-rank {
    width: 25px;
    font-weight: 700;
    color: #999;
    font-size: 12px;
}

.stat-player {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    text-decoration: none;
    color: #333;
}

.stat-avatar {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid #eee;
}

.stat-val {
    font-weight: 800;
    font-size: 14px;
    background: #eee;
    padding: 2px 8px;
    border-radius: 6px;
}

/* Matches List (Clean) */
.match-row-clean {
    display: flex;
    align-items: center;
    padding: 12px;
    border-bottom: 1px solid #f0f0f0;
    text-decoration: none;
    color: inherit;
}

    .match-row-clean:hover {
        background: #fafafa;
    }

.m-time {
    width: 60px;
    font-size: 12px;
    font-weight: 700;
    color: #888;
    text-align: center;
}

.m-teams {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
}

.m-team {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 40%;
    font-size: 13px;
    font-weight: 600;
}

    .m-team.home {
        justify-content: flex-end;
        text-align: right;
    }

    .m-team.away {
        justify-content: flex-start;
        text-align: left;
    }

.m-score {
    font-weight: 800;
    font-size: 16px;
    background: #222;
    color: #fff;
    padding: 2px 10px;
    border-radius: 6px;
}

/* Mobile Specifics */
@media (max-width: 768px) {
    .nav-pro-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start;
    }

    .nav-pro-link {
        white-space: nowrap;
        padding: 12px 15px;
        font-size: 13px;
    }

    .hero-logo {
        width: 60px;
        height: 60px;
    }

    .hero-title h1 {
        font-size: 20px;
    }

    .stat-row-pro {
        padding: 8px 10px;
    }

    .tournament-hero {
        padding-bottom: 40px;
        margin-bottom: -30px;
    }
    /* Adjust for mobile tab overlap */
    .pro-tabs-container {
        border-radius: 0;
    }
}
/* Clean Match Row (Used for Recent Results) */
.match-row-clean {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    border-bottom: 1px solid #f0f0f0;
    text-decoration: none;
    color: #333;
    transition: background 0.2s;
}

    .match-row-clean:hover {
        background: #f9f9f9;
    }

.m-clean-teams {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 15px;
}

.m-clean-team {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    width: 40%;
}

    .m-clean-team.home {
        justify-content: flex-end;
        text-align: right;
    }

.m-clean-score {
    background: #333;
    color: #fff;
    padding: 3px 10px;
    border-radius: 6px;
    font-weight: 800;
    font-size: 13px;
    min-width: 50px;
    text-align: center;
}

/* --- Pro Layout: Boxing & Widgets --- */
.matches-wrapper {
    background-color: #f4f6f9; /* Light gray background to make white boxes pop */
}

/* The "Box" Container */
.dashboard-widget {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.04);
    border: 1px solid #eaedf1;
    margin-bottom: 24px;
    overflow: hidden;
    height: 100%; /* Ensure equal height in grids */
}

.widget-header {
    padding: 15px 20px;
    background: #fff;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.widget-title {
    font-size: 16px;
    font-weight: 800;
    color: #2c3e50;
    margin: 0;
    position: relative;
    padding-right: 12px; /* RTL spacing */
}

    /* Red accent on titles */
    /*.widget-title::before {
        content: '';
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 4px;
        height: 16px;
        background: #d32f2f;
        border-radius: 2px;
    }*/

/* --- Fixed Player Stats Rows --- */
.stat-list-container {
    max-height: 350px; /* Optional: Scroll if too long */
    overflow-y: auto;
}

.stat-row-pro {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    border-bottom: 1px solid #f9f9f9;
    transition: background 0.2s;
}

    .stat-row-pro:hover {
        background-color: #fdfdfd;
    }

    .stat-row-pro:last-child {
        border-bottom: none;
    }

/* FIX FOR MISSING IMAGES */
.stat-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #f0f0f0;
    margin-left: 12px; /* RTL Spacing */
    flex-shrink: 0; /* CRITICAL: Prevents image from shrinking to 0 width */
    background-color: #eee; /* Fallback color if image fails */
}

.stat-info {
    flex-grow: 1;
    overflow: hidden; /* For text truncation */
}

.p-name {
    font-size: 13px;
    font-weight: 700;
    color: #333;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.t-name {
    font-size: 11px;
    color: #888;
    margin: 0;
}

.stat-badge {
    background: #f0f2f5;
    color: #333;
    font-weight: 800;
    font-size: 14px;
    min-width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}

/* --- Tab Styles (Refined) --- */
.pro-tabs-container {
    background: #fff;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    z-index: 100;
    position: relative;
}

.nav-pro-link {
    color: #666;
    font-weight: 700;
    padding: 18px 25px;
    border: none;
    background: transparent;
    border-bottom: 3px solid transparent;
}

    .nav-pro-link.active {
        color: #d32f2f;
        border-bottom-color: #d32f2f;
    }
/* --- Pro Layout: Boxing & Widgets --- */
.matches-wrapper {
    background-color: #f4f6f9;
}

/* The Box Container */
.dashboard-widget {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.04);
    border: 1px solid #eaedf1;
    margin-bottom: 24px;
    overflow: hidden;
    height: 100%;
}

.widget-header {
    padding: 15px 20px;
    background: #fff;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.widget-title {
    font-size: 16px;
    font-weight: 800;
    color: #2c3e50;
    margin: 0;
    position: relative;
    padding-right: 12px;
}

    /*.widget-title::before {
        content: '';
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 4px;
        height: 16px;
        background: #d32f2f;
        border-radius: 2px;
    }*/

/* --- Stats Rows & Fixed Images --- */
.stat-list-container {
    max-height: 400px;
    overflow-y: auto;
}

.stat-row-pro {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    border-bottom: 1px solid #f9f9f9;
}

    .stat-row-pro:last-child {
        border-bottom: none;
    }

/* FIX FOR MISSING IMAGES */
.stat-player {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    text-decoration: none;
    overflow: hidden;
}

.stat-avatar {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #f0f0f0;
    flex-shrink: 0; /* CRITICAL: Prevents image from vanishing */
    background-color: #eee;
}

.stat-info {
    overflow: hidden;
}

.p-name {
    font-size: 13px;
    font-weight: 700;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.t-name {
    font-size: 11px;
    color: #888;
}

.stat-badge {
    background: #f0f2f5;
    color: #333;
    font-weight: 800;
    font-size: 14px;
    min-width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}

/* --- Clean Match Row (For Recent Results) --- */
.match-row-clean {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    border-bottom: 1px solid #f0f0f0;
    text-decoration: none;
    color: #333;
}

    .match-row-clean:hover {
        background: #f9f9f9;
    }

.m-clean-teams {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 15px;
}

.m-clean-team {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    width: 40%;
}

    .m-clean-team.home {
        justify-content: flex-end;
        text-align: right;
    }

.m-clean-score {
    background: #333;
    color: #fff;
    padding: 3px 10px;
    border-radius: 6px;
    font-weight: 800;
    font-size: 13px;
    min-width: 50px;
    text-align: center;
}

/* --- Tournament Page Pro Styles --- */
.tournament-hero {
    background: linear-gradient(135deg, #111 0%, #2a2a2a 100%);
    color: #fff;
    padding: 40px 0 20px;
    position: relative;
    margin-bottom: -20px;
    z-index: 1;
}

.hero-content {
    display: flex;
    align-items: center;
    gap: 20px;
}

.hero-logo {
    width: 90px;
    height: 90px;
    background: #fff;
    border-radius: 16px;
    padding: 10px;
    object-fit: contain;
    box-shadow: 0 10px 20px rgba(0,0,0,0.3);
}

.hero-title h1 {
    font-weight: 800;
    font-size: 28px;
    margin: 0;
}

/* Tabs */
.pro-tabs-container {
    background: #fff;
    border-bottom: 1px solid #eee;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 10px rgba(0,0,0,0.03);
    margin-bottom: 30px;
    border-radius: 12px 12px 0 0;
}

.nav-pro-tabs {
    border: none;
    justify-content: center;
}

.nav-pro-link {
    color: #555;
    font-weight: 700;
    padding: 15px 25px;
    border: none;
    background: none;
    border-bottom: 3px solid transparent;
    transition: all 0.2s;
}

    .nav-pro-link.active {
        color: #d32f2f;
        border-bottom-color: #d32f2f;
    }

    .nav-pro-link:hover {
        color: #d32f2f;
    }

/* Dashboard Widgets (Boxed) */
.matches-wrapper {
    background-color: #f4f6f9;
}

.dashboard-widget {
    background: #fff;
    border-radius: 12px;
    border: 1px solid #eaedf1;
    margin-bottom: 24px;
    overflow: hidden;
    height: 100%;
    box-shadow: 0 2px 6px rgba(0,0,0,0.02);
}

.widget-header {
    padding: 12px 20px;
    background: #fcfcfc;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.widget-title {
    font-size: 15px;
    font-weight: 800;
    color: #2c3e50;
    margin: 0;
    border-right: 4px solid #d32f2f;
    padding-right: 10px;
}

/* Match Rows */
.match-row-clean {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    border-bottom: 1px solid #f0f0f0;
    text-decoration: none;
    color: #333;
    transition: background 0.2s;
}

    .match-row-clean:hover {
        background: #f9f9f9;
    }

.m-time {
    width: 60px;
    font-size: 12px;
    font-weight: 700;
    color: #888;
    text-align: center;
}

.m-clean-teams {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
}

.m-clean-team {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    width: 40%;
}

    .m-clean-team.home {
        justify-content: flex-end;
        text-align: right;
    }

.m-clean-score {
    font-weight: 800;
    font-size: 13px;
    background: #333;
    color: #fff;
    padding: 3px 12px;
    border-radius: 6px;
}

/* Stats & Players */
.stat-row-pro {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    border-bottom: 1px solid #f5f5f5;
}

/* --- Pro Tournament Layout --- */
.tournament-hero {
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
    color: #fff;
    padding: 40px 0 20px;
    margin-bottom: 0;
}

.hero-logo {
    width: 90px;
    height: 90px;
    background: #fff;
    border-radius: 16px;
    padding: 10px;
    object-fit: contain;
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}

/* Tabs */
.pro-tabs-container {
    background: #fff;
    border-bottom: 1px solid #e0e0e0;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
}

.nav-pro-link {
    color: #555;
    font-weight: 700;
    padding: 16px 24px;
    border-bottom: 3px solid transparent;
    transition: all 0.2s;
    background: none;
    border-top: 0;
    border-left: 0;
    border-right: 0;
}

    .nav-pro-link:hover, .nav-pro-link.active {
        color: #d32f2f;
        border-bottom-color: #d32f2f;
    }

/* Widgets & Boxing */
.matches-wrapper {
    background-color: #f4f6f9;
    min-height: 100vh;
}

.dashboard-widget {
    background: #fff;
    border-radius: 10px;
    border: 1px solid #eaedf1;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03);
    margin-bottom: 20px;
    overflow: hidden;
}

.widget-header {
    padding: 12px 16px;
    background: #fff;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.widget-title {
    font-size: 15px;
    font-weight: 800;
    color: #2c3e50;
    margin: 0;
    border-right: 4px solid #d32f2f; /* Red accent */
    padding-right: 10px;
}

/* Player Stats Rows (Fixing Missing Images) */
.stat-row-pro {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    border-bottom: 1px solid #f9f9f9;
}

.stat-player-link {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-grow: 1;
    text-decoration: none;
    color: #333;
    overflow: hidden; /* For text truncation */
}

.player-img-fixed {
    width: 42px;
    height: 42px;
    min-width: 42px; /* FORCE WIDTH */
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #eee;
    background-color: #f0f0f0;
}

.player-info {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.p-name {
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
}

.t-name {
    font-size: 11px;
    color: #888;
    margin: 0;
}

.stat-val {
    font-weight: 800;
    font-size: 14px;
    background: #f2f2f2;
    padding: 2px 10px;
    border-radius: 6px;
}

/* Match Rows */
.match-row-clean {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    border-bottom: 1px solid #eee;
    text-decoration: none;
    color: #333;
    transition: 0.2s;
}

    .match-row-clean:hover {
        background: #fafafa;
    }

.m-time {
    font-size: 12px;
    color: #888;
    width: 50px;
    text-align: center;
    font-weight: 600;
}

.m-teams {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px;
}

.m-team {
    width: 42%;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
}

    .m-team.home {
        justify-content: flex-end;
        text-align: right;
    }

.m-score {
    background: #333;
    color: #fff;
    padding: 3px 10px;
    border-radius: 6px;
    font-weight: 800;
    font-size: 14px;
}

/* --- Teams Horizontal Slider (Fixed Height) --- */
.teams-scroll-container {
    overflow-x: auto;
    white-space: nowrap;
    padding: 10px 5px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

    .teams-scroll-container::-webkit-scrollbar {
        height: 4px;
    }

    .teams-scroll-container::-webkit-scrollbar-thumb {
        background: #ccc;
        border-radius: 4px;
    }

.team-slide-item {
    display: inline-block;
    width: 75px; /* Fixed width per item */
    text-align: center;
    margin: 0 5px;
    vertical-align: top;
    text-decoration: none !important;
}

.team-slide-img {
    width: 45px;
    height: 45px;
    object-fit: contain;
    margin-bottom: 6px;
    transition: transform 0.2s;
}

.team-slide-item:hover .team-slide-img {
    transform: scale(1.1);
}

.team-slide-name {
    font-size: 11px;
    font-weight: 700;
    color: #333;
    white-space: normal; /* Allow text to wrap lines if long */
    line-height: 1.2;
    height: 2.4em; /* Limit text to 2 lines */
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* --- Compact Stats Row --- */
.compact-stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #f5f5f5;
}

    .compact-stat-row:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

    .compact-stat-row:first-child {
        padding-top: 0;
    }

.stat-label {
    font-size: 13px;
    color: #666;
    font-weight: 600;
}

.stat-num {
    font-size: 16px;
    font-weight: 800;
}

/* --- Fix: Removed 'height: 100%' to prevent huge whitespace --- */
.dashboard-widget {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.04);
    border: 1px solid #eaedf1;
    margin-bottom: 24px;
    overflow: hidden;
    height: auto; /* Changed from 100% to auto */
}

/* Ensure horizontal scroll works perfectly */
.teams-scroll-container {
    overflow-x: auto;
    white-space: nowrap;
    padding: 15px 10px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.team-slide-item {
    display: inline-block;
    width: 80px;
    text-align: center;
    margin: 0 5px;
    text-decoration: none !important;
}

.team-slide-img {
    width: 50px;
    height: 50px;
    object-fit: contain;
    margin-bottom: 8px;
    transition: transform 0.2s;
}

.team-slide-item:hover .team-slide-img {
    transform: scale(1.1);
}

.team-slide-name {
    font-size: 11px;
    font-weight: 700;
    color: #333;
    white-space: normal;
    line-height: 1.2;
    height: 2.4em;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}


/* --- Dashboard Widget (Boxed Style) --- */
.dashboard-widget {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    border: 1px solid #eee;
    margin-bottom: 25px;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
}

    .dashboard-widget:hover {
        box-shadow: 0 6px 20px rgba(0,0,0,0.08);
    }

.widget-header {
    padding: 15px 20px;
    background: #fff;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

/* Red Accent for Widget Titles */
.widget-title {
    font-size: 16px;
    font-weight: 800;
    color: #000;
    margin: 0;
    padding-right: 15px;
    position: relative;
}

    /*.widget-title::before {
        content: '';
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 4px;
        height: 18px;
        background-color: #d32f2f;*/ /* Brand Red */
        /*border-radius: 2px;
    }*/

/* --- Compact Stat Boxes (General Stats) --- */
.compact-stat-box {
    background: #fff;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03);
    border-right: 4px solid #d32f2f; /* Brand Red Accent */
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: transform 0.2s;
}

    .compact-stat-box:hover {
        transform: translateX(-3px);
    }

.stat-label {
    font-size: 14px;
    font-weight: 600;
    color: #555;
}

.stat-num {
    font-size: 20px;
    font-weight: 800;
    color: #000;
}

/* --- Teams Slider --- */
.teams-scroll-container {
    overflow-x: auto;
    white-space: nowrap;
    padding: 20px 15px;
    display: flex;
    gap: 15px;
}

.team-slide-item {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    width: 80px;
    text-decoration: none;
    transition: transform 0.2s;
}

    .team-slide-item:hover {
        transform: translateY(-5px);
    }

.team-slide-img {
    width: 55px;
    height: 55px;
    object-fit: contain;
    margin-bottom: 8px;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.1));
}

.team-slide-name {
    font-size: 11px;
    font-weight: 700;
    color: #333;
    text-align: center;
    white-space: normal;
    line-height: 1.2;
    height: 2.4em;
    overflow: hidden;
}

/* --- News & Video Items --- */
.news-item-link {
    display: block;
    text-decoration: none;
    color: #333;
    height: 100%;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #eee;
    transition: box-shadow 0.2s;
}

    .news-item-link:hover {
        box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    }

.news-img {
    height: 140px;
    width: 100%;
    object-fit: cover;
}

.video-item-link {
    display: inline-block;
    text-decoration: none;
    width: 180px;
    margin-right: 15px;
}

.video-img-wrapper {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
}

.video-img {
    height: 110px;
    width: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.video-item-link:hover .video-img {
    transform: scale(1.05);
}

.video-play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    opacity: 0.8;
    font-size: 2rem;
    transition: opacity 0.2s;
}

.video-item-link:hover .video-play-icon {
    opacity: 1;
    color: #d32f2f; /* Brand Red */
}

/* --- Standings Table - Form Badges --- */
.form-badge {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 700;
    color: #fff;
    border-radius: 4px;
}

.form-win {
    background-color: #28a745;
}
/* Green for Win */
.form-loss {
    background-color: #dc3545;
}
/* Red for Loss */
.form-draw {
    background-color: #6c757d;
}
/* Grey for Draw */

/* --- Brand Colors --- */
:root {
    --brand-red: #d60000; /* From your logo */
    --brand-black: #000000;
}

/* --- Brand Stats Box (New Design) --- */
.brand-stat-box {
    background: #fff;
    border-radius: 8px;
    padding: 20px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.04);
    border-bottom: 4px solid var(--brand-red); /* Brand Red Bottom Border */
    transition: transform 0.2s;
    height: 100%;
}

    .brand-stat-box:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 25px rgba(0,0,0,0.08);
    }

.brand-stat-label {
    font-size: 13px;
    font-weight: 700;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 5px;
    display: block;
}

.brand-stat-value {
    font-size: 32px;
    font-weight: 900;
    color: var(--brand-black);
    line-height: 1;
}
/* Subtle background icon */
.brand-stat-icon {
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 40px;
    color: #f2f2f2;
    z-index: 0;
    transform: rotate(-15deg);
}

/* --- News Grid Card (Vertical Layout) --- */
.news-grid-card {
    display: block;
    text-decoration: none;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03);
    transition: all 0.2s;
    height: 100%;
    border: 1px solid #eee;
}

    .news-grid-card:hover {
        box-shadow: 0 8px 20px rgba(0,0,0,0.08);
        border-color: var(--brand-red);
    }

.news-grid-img {
    width: 100%;
    height: 180px;
    object-fit: cover;
}

.news-grid-content {
    padding: 15px;
}

/* --- Video Grid Card --- */
.video-grid-card {
    display: block;
    text-decoration: none;
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.video-grid-img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    transition: transform 0.3s;
}

.video-grid-card:hover .video-grid-img {
    transform: scale(1.05);
}

.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.video-grid-card:hover .video-overlay {
    background: rgba(0,0,0,0.1);
}

.video-play-btn {
    font-size: 40px;
    color: #fff;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.5));
}

.video-grid-title {
    padding: 10px 0;
    color: #333;
    font-weight: 700;
    font-size: 13px;
}

/* --- Form Badges (W/D/L) --- */
.form-badge {
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
}

.form-win {
    background-color: #28a745;
}

.form-draw {
    background-color: #6c757d;
}

.form-loss {
    background-color: #dc3545;
}

/* Pin content to the bottom */
.hero-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 20px;
    z-index: 2;
    color: #fff;
    /* Gradient overlay for text readability */
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.6) 50%, rgba(0,0,0,0) 100%);
    /* Ensure flexbox aligns items correctly if used */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

/* Optional: Overlay adjustments */
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.2); /* Darken whole image slightly */
    z-index: 1;
}

/* Typography Enhancements */
.hero-title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.4;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.hero-date {
    font-size: 0.85rem;
    opacity: 0.9;
    margin-bottom: 5px;
    position:absolute;
    top:-10px;
    right:25px;
}

/* --- Brand Stat Card --- */
.stat-box-brand {
    background: #fff;
    border-radius: 12px;
    padding: 30px 20px;
    position: relative;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
    border: 1px solid #f0f0f0;
    border-bottom: 5px solid #D60000; /* The LIVE 90+ Red */
    transition: all 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

    .stat-box-brand:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 30px rgba(214, 0, 0, 0.1); /* Subtle Red Glow on Hover */
        border-color: #D60000; /* Full border turns red subtly (optional) or stays gray */
    }

/* The Number */
.stat-value-brand {
    font-size: 3.5rem; /* Very large and bold */
    font-weight: 900;
    color: #000; /* Brand Black */
    line-height: 1;
    margin-bottom: 10px;
    
    letter-spacing: -1px;
}

/* The Label */
.stat-label-brand {
    font-size: 15px;
    font-weight: 700;
    color: #666;
    margin: 0;
    position: relative;
    padding-bottom: 0;
}

/* Optional: Subtle background watermark for pro feel */
.stat-box-brand::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 60px;
    height: 60px;
    background: linear-gradient(225deg, #f9f9f9 0%, transparent 100%);
    border-radius: 0 0 0 50px;
    z-index: 0;
}






/* --- Pro Mobile App Theme --- */
.mobile-app-wrapper {
    background-color: #f5f7fa;
    min-height: 100vh;
    padding-bottom: 80px;
}

/* 1. Mobile Hero */
.mobile-hero-brand {
    background: linear-gradient(135deg, #111 0%, #1a1a1a 100%);
    color: #fff;
    padding: 20px 15px;
    border-bottom: 4px solid #d32f2f;
    text-align: center;
}

.mobile-hero-logo {
    width: 65px;
    height: 65px;
    background: #fff;
    border-radius: 12px;
    padding: 8px;
    object-fit: contain;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    margin-bottom: 10px;
}

/* 2. Sticky Tabs */
.mobile-tabs-container {
    background: #fff;
    border-bottom: 1px solid #eee;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    padding: 0 5px;
    position: sticky;
    top: 0;
    z-index: 999;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.nav-mobile-link {
    display: inline-block;
    padding: 12px 16px;
    color: #555;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    border-bottom: 3px solid transparent;
    background: none;
    border-top: 0;
    border-left: 0;
    border-right: 0;
}

    .nav-mobile-link.active {
        color: #d32f2f;
        border-bottom-color: #d32f2f;
    }

/* 3. Cards */
.mobile-card {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.02);
    margin-bottom: 12px;
    overflow: hidden;
    border: 1px solid #f0f0f0;
}

.mobile-card-header {
    padding: 10px 15px;
    background: #fff;
    border-bottom: 1px solid #f5f5f5;
    font-size: 13px;
    font-weight: 800;
    color: #222;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.section-title {
    font-size: 14px;
    font-weight: 800;
    color: #000;
    margin: 20px 0 10px;
    padding-right: 10px;
    border-right: 3px solid #d32f2f;
}

/* 4. Stats Grid */
.mob-stat-item {
    text-align: center;
    padding: 10px;
    border-right: 1px solid #f0f0f0;
}

    .mob-stat-item:last-child {
        border-right: none;
    }

.mob-stat-val {
    font-size: 18px;
    font-weight: 900;
    display: block;
    line-height: 1.2;
}

.mob-stat-lbl {
    font-size: 10px;
    color: #777;
    font-weight: 600;
}

/* 5. Match List */
.mob-match-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    text-decoration: none;
    color: #333;
    border-bottom: 1px solid #f9f9f9;
}

.mob-team {
    width: 35%;
    text-align: center;
    font-size: 10px;
    font-weight: 700;
}

    .mob-team img {
        width: 30px;
        height: 30px;
        object-fit: contain;
        margin-bottom: 4px;
        display: block;
        margin: 0 auto 4px;
    }

.mob-score-box {
    width: 20%;
    text-align: center;
}

.mob-score {
    background: #111;
    color: #fff;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 800;
    font-size: 13px;
    display: inline-block;
}

.mob-match-time {
    font-size: 10px;
    color: #888;
    display: block;
    margin-top: 3px;
}

/* 6. Scrollers */
.mob-scroll-wrapper {
    display: flex;
    overflow-x: auto;
    gap: 10px;
    padding: 12px;
    scrollbar-width: none;
}

    .mob-scroll-wrapper::-webkit-scrollbar {
        display: none;
    }

/* 7. News & Video */
.mob-news-item {
    display: flex;
    gap: 10px;
    padding: 10px;
    border-bottom: 1px solid #f5f5f5;
    text-decoration: none;
    color: #333;
}

.mob-news-thumb {
    width: 80px;
    height: 55px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
}

.mob-news-title {
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mob-video-card {
    display: block;
    text-decoration: none;
    color: #333;
    position: relative;
    border-radius: 8px;
    overflow: hidden;
}

.mob-video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
}



/* Competition Header styling */
.match-card-header {
    background-color: #f8f9fa; /* Light gray background */
    padding: 8px 12px;
    border-bottom: 1px solid #eaeaea;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    color: #555;
    /* Ensure header curves match the card */
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

    .match-card-header img {
        width: 18px;
        height: 18px;
        object-fit: contain;
        filter: grayscale(20%); /* Optional: makes logos blend better */
    }

/* Update card to remove padding from top so header fits flush */
.pro-match-card {
    padding-top: 0 !important;
    /* Keep existing border/shadow styles */
}

/* Professional Stats Cards */
.stats-round-header {
    font-size: 14px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #D60000;
    margin-top: 25px;
    padding-bottom: 10px;
    border-bottom: 2px solid #eee;
}

.mob-brand-stat {
    background: #ffffff;
    border-radius: 12px;
    padding: 20px 10px;
    text-align: center;
    border: 1px solid #f0f0f0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: transform 0.2s ease;
    position: relative;
    overflow: hidden;
}

    /* Red accent bar on the left of each card */
    .mob-brand-stat::before {
        content: '';
        position: absolute;
        left: 0;
        top: 20%;
        height: 60%;
        width: 4px;
        background-color: #D60000;
        border-radius: 0 4px 4px 0;
    }

.mob-brand-val {
    font-size: 26px;
    font-weight: 900;
    color: #111;
    line-height: 1;
    margin-bottom: 5px;
    font-family: 'Oswald', sans-serif; /* Recommended for sports numbers */
}

.mob-brand-lbl {
    font-size: 11px;
    color: #666;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Optional: Make every second card have a slight dark tint for variety */
.col-6:nth-child(even) .mob-brand-stat {
    background: #fafafa;
}

/* Revamp Container */
.revamp-match-wrapper {
    background-color: #f4f7f6;
    padding-bottom: 50px;
}

.revamp-boxed {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    overflow: hidden;
    margin-bottom: 30px;
}

/* Scoreboard Revamp */
.revamp-scoreboard {
    background: linear-gradient(135deg, #1a1a1a 0%, #333 100%);
    color: #fff;
    padding: 40px 20px;
    position: relative;
}

.revamp-team-box {
    text-align: center;
}

.revamp-team-logo {
    width: 100px;
    height: 100px;
    object-fit: contain;
    margin-bottom: 15px;
    filter: drop-shadow(0 5px 15px rgba(0,0,0,0.5));
}

.revamp-team-name {
    font-size: 22px;
    font-weight: 800;
    margin: 0;
    color: #fff;
    letter-spacing: 1px;
}

.revamp-score-center {
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.revamp-score-digit {
    font-size: 64px;
    font-weight: 900;
    line-height: 1;
    margin: 0 10px;
    color: #fff;
}

.revamp-match-status {
    background: #d60000;
    color: #fff;
    padding: 4px 15px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: bold;
    display: inline-block;
    margin-top: 10px;
}

/* Timeline/Minutes Revamp */
.revamp-timeline-container {
    padding: 20px;
    border-top: 1px solid rgba(255,255,255,0.1);
    background: rgba(0,0,0,0.2);
}

.revamp-goal-list {
    font-size: 13px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.revamp-goal-item {
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    gap: 8px;
}

    .revamp-goal-item img {
        width: 14px;
    }

/* Info Blobs */
.revamp-match-meta {
    background: #fff;
    padding: 15px;
    display: flex;
    justify-content: space-around;
    border-bottom: 1px solid #eee;
}

.revamp-meta-item {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #666;
    font-size: 14px;
    font-weight: 600;
}

    .revamp-meta-item img {
        width: 20px;
        opacity: 0.7;
    }

/* Stats Revamp */
.revamp-stat-row {
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;
}

.revamp-stat-label {
    font-size: 12px;
    font-weight: 700;
    color: #888;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 8px;
}

.revamp-progress-container {
    display: flex;
    align-items: center;
    gap: 15px;
}

.revamp-progress-bar {
    height: 8px;
    background: #eee;
    border-radius: 4px;
    flex-grow: 1;
    position: relative;
}

.revamp-progress-fill {
    position: absolute;
    height: 100%;
    border-radius: 4px;
    background: #d60000;
}

.revamp-stat-value {
    font-weight: 800;
    font-size: 16px;
    min-width: 30px;
}

/* Man of the Match */
.revamp-motm-card {
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
    border-radius: 12px;
    padding: 20px;
    color: #000;
    display: flex;
    align-items: center;
    gap: 20px;
}

.revamp-motm-img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 4px solid #fff;
    object-fit: cover;
}

/* Vertical Timeline Enhancement */
.timeline-container {
    position: relative;
    padding: 20px 0;
}

.timeline-path {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 4px;
    background: #e9ecef;
    transform: translateX(-50%);
    border-radius: 2px;
}

.timeline-event-row {
    position: relative;
    display: flex;
    width: 100%;
    margin-bottom: 25px;
    align-items: center;
}

.event-left {
    width: 50%;
    padding-right: 30px;
    text-align: right;
}

.event-right {
    width: 50%;
    padding-left: 30px;
    text-align: left;
}

.event-marker {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 34px;
    height: 34px;
    background: #fff;
    border: 3px solid #d32f2f;
    border-radius: 50%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 11px;
}

.event-card {
    background: #fff;
    padding: 12px;
    border-radius: 12px;
    border: 1px solid #eee;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    display: inline-block;
    min-width: 200px;
}

    .event-card img {
        width: 22px;
        height: 22px;
        object-fit: contain;
    }

/* General Page UI */
.revamp-boxed {
    border-radius: 20px !important;
    border: none !important;
}

.score-gradient {
    background: linear-gradient(180deg, #121212 0%, #1e1e1e 100%);
}

.stat-pill {
    background: #f8f9fa;
    border-radius: 50px;
    padding: 5px 15px;
    font-weight: 700;
    border: 1px solid #eee;
}

/* Glassmorphism Scoreboard */
.match-hero {
    background: #111;
    color: #fff;
    padding: 60px 0;
    position: relative;
    border-radius: 0 0 40px 40px;
}

    .match-hero::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url('/assets/images/field-pattern.png');
        opacity: 0.1;
        pointer-events: none;
    }

.team-crest-large {
    width: 120px;
    height: 120px;
    object-fit: contain;
    filter: drop-shadow(0 0 20px rgba(0,0,0,0.5));
}

.score-big {
    font-size: 80px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -2px;
}

.match-badge {
    background: rgba(214, 0, 0, 0.2);
    border: 1px solid #d60000;
    color: #ff4d4d;
    padding: 5px 20px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
}

/* Action Stream (Timeline) */
.action-stream {
    background: #fff;
    border-radius: 20px;
    padding: 30px;
    border: 1px solid #eee;
}

.stream-item {
    display: flex;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid #f8f8f8;
    position: relative;
}

    .stream-item:last-child {
        border-bottom: none;
    }

.stream-minute {
    width: 50px;
    font-weight: 900;
    color: #d60000;
    font-size: 16px;
}

.stream-icon {
    width: 40px;
    text-align: center;
}

.stream-content {
    flex-grow: 1;
    padding: 0 15px;
}

/* Dashboard Widgets */
.dash-card {
    background: #fff;
    border-radius: 20px;
    border: 1px solid #eee;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
    padding: 25px;
    margin-bottom: 30px;
}

.dash-card-title {
    font-weight: 900;
    font-size: 18px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 2px solid #f0f0f0;
    padding-bottom: 15px;
}

/* Mobile Revamp Styles */
.mob-revamp-scoreboard {
    background: linear-gradient(180deg, #111 0%, #252525 100%);
    border-radius: 0 0 25px 25px;
    padding: 25px 15px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

.mob-team-logo {
    width: 60px;
    height: 60px;
    object-fit: contain;
    margin-bottom: 8px;
}

.mob-score-digit {
    font-size: 38px;
    font-weight: 900;
    color: #fff;
    line-height: 1;
}

.mob-status-badge {
    background: #d60000;
    color: #fff;
    padding: 3px 12px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: bold;
}

/* Timeline Stream */
.mob-stream-item {
    border-left: 2px solid #eee;
    margin-left: 15px;
    padding: 0 0 20px 20px;
    position: relative;
}

    .mob-stream-item::before {
        content: '';
        position: absolute;
        left: -7px;
        top: 0;
        width: 12px;
        height: 12px;
        background: #fff;
        border: 2px solid #d60000;
        border-radius: 50%;
    }

.mob-stream-min {
    font-weight: 900;
    color: #d60000;
    font-size: 14px;
    margin-bottom: 5px;
    display: block;
}

/* Realistic Pitch Background */
.pitch-container-pro {
    position: relative;
    width: 100%;
    /* Standard Football Pitch Ratio */
    aspect-ratio: 2/3;
    background-color: #43a047;
    /* Create striped grass effect */
    background-image: linear-gradient(0deg, transparent 50%, rgba(0,0,0,0.05) 50%);
    background-size: 100% 40px;
    border-radius: 12px;
    border: 3px solid #fff;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    overflow: hidden;
    margin: 0 auto;
}

/* Player Node */
.player-node {
    position: absolute;
    transform: translate(-50%, -50%); /* Centers the player exactly on the coordinate */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 60px; /* Constrain width to prevent overlap */
    z-index: 10;
}

/* Player Image */
.player-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    object-fit: cover;
    z-index: 2;
}

/* Player Name Pill */
.player-name-pill {
    margin-top: -8px; /* Overlap image slightly */
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    z-index: 3;
    backdrop-filter: blur(2px);
    border: 1px solid rgba(255,255,255,0.2);
}

/* Rating Badge */
.rating-badge {
    position: absolute;
    top: 0;
    right: 5px;
    background: #ffc107;
    color: #000;
    font-size: 9px;
    font-weight: 800;
    padding: 1px 4px;
    border-radius: 4px;
    border: 1px solid #fff;
    z-index: 4;
}
.circled-white {
    background-color: #ffffff; /* Solid white background */
    border-radius: 50%; /* Makes the box a perfect circle */
    padding: 5px; /* Adds space between the image and the white edge */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Optional: Adds depth */
    object-fit: contain; /* Ensures the logo fits nicely inside */
}


/* Mobile Header - Glassmorphism */
.mobile-app-header {
    background: rgba(255, 255, 255, 0.95); /* High opacity white */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    height: 70px;
    padding: 0 15px;
    z-index: 1040;
}

.header-logo {
    max-height: 45px; /* Perfect size for mobile */
    object-fit: contain;
}

.profile-btn {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid #eee;
}

.notification-dot {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 10px;
    height: 10px;
    background-color: #28a745; /* Online status color */
    border: 2px solid #fff;
    border-radius: 50%;
}

/* 1. The Main Drawer Container */
.custom-offcanvas {
    background: linear-gradient(180deg, #1a1a1a 0%, #000000 100%);
    color: #fff;
    border-right: none;
    width: 85% !important;
    max-width: 320px;
    /* FLEXBOX FIXES SCROLLING */
    display: flex;
    flex-direction: column;
    height: 100vh; /* Forces full viewport height */
}

/* 2. The Header (Fixed at top) */
.menu-header {
    padding: 20px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0; /* Prevents header from shrinking */
}

/* 3. The User Widget (Scrolls with content) */
.user-widget {
    background: rgba(255,255,255,0.05);
    border-radius: 12px;
    padding: 12px 15px;
    margin: 15px 20px 0 20px; /* Margin top/sides only */
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0; /* Keeps it rigid */
}

/* 4. The Scrollable Area (Crucial!) */
.offcanvas-body {
    flex-grow: 1; /* Takes up all remaining space */
    overflow-y: auto; /* Enables vertical scrolling */
    overflow-x: hidden;
    padding: 0; /* Reset padding */
    -webkit-overflow-scrolling: touch; /* Smooth scroll on iOS */
}

/* 5. The Footer (Fixed at bottom) */
.menu-footer {
    padding: 20px;
    flex-shrink: 0; /* Prevents footer from shrinking */
    background: #000; /* Optional: solid background behind CTA */
    z-index: 10;
}

/* Menu List Styling (No changes needed, just context) */
.mobile-nav-list {
    list-style: none;
    padding: 15px 0; /* Add top/bottom padding to list */
    margin: 0;
}

.mobile-nav-item {
    padding: 0 20px;
}

.mobile-nav-link {
    display: flex;
    align-items: center;
    padding: 16px 0;
    color: #e0e0e0;
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    transition: all 0.2s ease;
}

    .mobile-nav-link:active {
        color: #fff;
        transform: translateX(-5px); /* Subtle nudge effect */
    }

.nav-icon-wrapper {
    width: 35px;
    height: 35px;
    background: rgba(255,255,255,0.1);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 15px; /* RTL spacing */
}

    .nav-icon-wrapper img {
        width: 18px;
        height: 18px;
        filter: brightness(0) invert(1); /* Forces white icons */
    }

/* CTA Footer */
.menu-footer {
    margin-top: auto;
    padding: 20px;
}

.cta-banner {
    display: block;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(255, 193, 7, 0.3);
    transition: transform 0.2s;
}

    .cta-banner:active {
        transform: scale(0.98);
    }





    /**********/
    /*login*/
    /*********/

/* --- Desktop Pro Layout --- */
.login-wrapper-desktop {
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); /* Optional background */
    padding: 50px 0;
}

.login-card-pro {
    background: #ffffff;
    border-radius: 24px;
    padding: 50px;
    width: 100%;
    max-width: 480px;
    border: 1px solid rgba(255,255,255,0.8);
}

.login-heading {
    font-size: 28px;
    color: #1a1a1a;
    letter-spacing: -0.5px;
}

.login-icon-box {
    width: 80px;
    height: 80px;
    background: #eef2ff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Social Buttons (Desktop) */
.btn-social {
    position: relative;
    padding: 14px 20px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 15px;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    border: none;
    box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
}

    .btn-social:hover {
        transform: translateY(-2px);
        box-shadow: 0 7px 14px rgba(50, 50, 93, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08);
    }

.btn-facebook {
    background: #1877f2;
    color: #fff !important;
}

.btn-google {
    background: #fff;
    color: #333 !important;
    border: 1px solid #f1f1f1;
}

.social-icon, .social-img {
    margin-left: 10px; /* Space between icon and text (RTL) */
}

.social-img {
    height: 20px;
}

/* Divider */
.login-divider {
    display: flex;
    align-items: center;
    text-align: center;
    color: #999;
    font-size: 13px;
}

    .login-divider::before, .login-divider::after {
        content: '';
        flex: 1;
        border-bottom: 1px solid #e0e0e0;
    }

    .login-divider span {
        padding: 0 15px;
        background: #fff;
        z-index: 1;
    }

/* --- Mobile Specific --- */
.mobile-login-card {
    /* Clean look without borders for mobile */
    width: 100%;
}

.login-icon-circle {
    width: 70px;
    height: 70px;
    background: #f8f9fa;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #eee;
}

.btn-social-mobile {
    padding: 16px;
    border-radius: 16px;
    font-size: 14px;
    text-decoration: none;
    transition: transform 0.2s;
    position: relative;
    border: none;
}

    .btn-social-mobile:active {
        transform: scale(0.97);
    }

.btn-facebook-mobile {
    background: #1877f2;
    color: white !important;
    box-shadow: 0 8px 20px rgba(24, 119, 242, 0.25);
}

.btn-google-mobile {
    background: #ffffff;
    border: 1px solid #eaeaea;
    color: #333 !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
}

.icon-wrapper {
    position: absolute;
    right: 20px; /* Pin icon to the right for RTL */
    display: flex;
    align-items: center;
}


/**********/
/*login*/
/*********/

/**********/
/*Team details*/
/*********/

/* --- LAYOUT & SPACING --- */
.pro-wrapper {
    max-width: 1200px;
    margin: 30px auto;
    padding: 0 15px;
    color: #334155; /* Default Dark Grey Text */
    min-height: 100vh;
}

/* --- HERO SECTION (Dark Mode Force) --- */
.club-hero {
    position: relative;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); /* Deep Blue/Black */
    border-radius: 20px;
    overflow: hidden;
    color: #fff !important; /* Force White Text */
    box-shadow: 0 15px 35px rgba(0,0,0,0.2);
    margin-bottom: 30px;
}
    /* Ensure all text inside hero is white */
    .club-hero h1, .club-hero h5, .club-hero span, .club-hero small {
        color: #fff !important;
    }

.hero-team-crest {
    width: 110px;
    height: 110px;
    object-fit: contain;
    background: #fff;
    border-radius: 50%;
    padding: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

/* --- NAVIGATION TABS --- */
.nav-sports {
    border-bottom: 1px solid #e2e8f0;
    margin-bottom: 30px;
    gap: 10px;
    display: flex;
    justify-content: center;
    padding-bottom: 0;
}

    .nav-sports .nav-link {
        background: transparent;
        border: none;
        color: #64748b; /* Muted Grey */
        font-weight: 700;
        font-size: 15px;
        padding: 12px 20px;
        border-bottom: 3px solid transparent;
        transition: all 0.2s;
    }

        .nav-sports .nav-link:hover {
            color: #0f172a;
            background: #f8fafc;
        }

        .nav-sports .nav-link.active {
            color: #0f172a; /* Dark Black Active */
            border-bottom: 3px solid #ef4444; /* Red Line */
            background: transparent;
        }

/* --- CARDS (White Background) --- */
.sport-card {
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    height: 75%;
    overflow: hidden;
    position: relative;
}

.card-header-pro {
    padding: 15px 20px;
    border-bottom: 1px solid #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
}

.card-title-pro {
    font-weight: 800;
    font-size: 16px;
    color: #0f172a; /* Dark Text */
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

    .card-title-pro::before {
        content: '';
        display: block;
        width: 4px;
        height: 18px;
        background: #ef4444;
        border-radius: 2px;
    }

/* --- PLAYER GRID --- */
.player-box {
    display: block;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    text-align: center;
    text-decoration: none;
    transition: transform 0.2s;
    overflow: hidden;
}

    .player-box:hover {
        transform: translateY(-4px);
        box-shadow: 0 10px 20px rgba(0,0,0,0.08);
        border-color: #cbd5e1;
    }

.player-bg-top {
    height: 45px;
    background: #f1f5f9;
}

.player-img-float {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #fff;
    margin-top: -32px;
    background: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.player-info {
    padding: 8px;
}

.player-name {
    color: #0f172a;
    font-weight: 700;
    font-size: 12px;
}

.player-pos {
    color: #64748b;
    font-size: 11px;
}

/* --- MATCH STRIP --- */
.match-strip-item {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.2s;
}

    .match-strip-item:hover {
        background: #f8fafc;
    }

.match-date-box {
    min-width: 60px;
    text-align: center;
    border-right: 1px solid #e2e8f0;
    margin-right: 15px;
    padding-right: 15px;
}

.match-teams-box {
    flex-grow: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.score-badge-final {
    background: #1e293b;
    color: #fff;
    padding: 4px 10px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 13px;
}

/* --- BOTTOM SPACER --- */
.safe-area-spacer {
    height: 150px;
    width: 100%;
    display: block;
    clear: both;
}
/* --- NEWS GRID FIXES --- */
.news-grid-container {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #f1f5f9;
}

/* --- PERFECT MATCH ALIGNMENT (The Fix) --- */
.match-strip-item {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.2s;
}

    .match-strip-item:hover {
        background: #f8fafc;
    }

.match-date-col {
    width: 60px; /* Fixed width for date */
    text-align: center;
    border-right: 1px solid #e2e8f0;
    margin-right: 15px;
    padding-right: 5px;
    flex-shrink: 0;
}

.match-content-col {
    flex-grow: 1;
    display: grid;
    /* This GRID ensures Home(40%) - Score(20%) - Away(40%) are always equal */
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 10px;
}

.team-side {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow: hidden;
}

    .team-side.home {
        justify-content: flex-end;
    }
    /* Right align home */
    .team-side.away {
        justify-content: flex-start;
    }
/* Left align away */

.team-name-text {
    font-size: 11px;
    font-weight: 700;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.score-center {
    min-width: 60px;
    text-align: center;
    display: flex;
    justify-content: center;
}

/* --- BROADCASTER HERO HEADER --- */
.sports-header-card {
    position: relative;
    background-color: #0f172a; /* Deep Navy/Black Base */
    border-radius: 16px;
    overflow: hidden;
    color: #fff;
    min-height: 200px;
    display: flex;
    align-items: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.25);
    margin-bottom: 30px;
}

/* Background Image with Dark Overlay */
.header-bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Use a generic stadium or pitch pattern */
    background-image: url('https://www.transparenttextures.com/patterns/carbon-fibre.png');
    background-size: cover;
    background-position: center;
    opacity: 0.15;
    z-index: 0;
}

/* Gradient Fade for readability */
.header-gradient-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(15,23,42,1) 0%, rgba(15,23,42,0.8) 50%, rgba(15,23,42,0.4) 100%);
    z-index: 1;
}

.header-content-flex {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 30px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* --- TEAM SECTION (RIGHT) --- */
.team-identity-box {
    display: flex;
    align-items: center;
    gap: 25px;
}

.team-logo-pro {
    width: 100px;
    height: 100px;
    object-fit: contain;
    background: #fff;
    border-radius: 12px; /* Square with rounded corners (Modern) */
    padding: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

.team-titles h1 {
    font-size: 2.8rem;
    font-weight: 800;
    margin: 0;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: -0.5px;
}

.action-buttons {
    margin-top: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.btn-follow-pro {
    background: #ef4444; /* Sports Red */
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 8px 20px;
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

    .btn-follow-pro:hover {
        background: #dc2626;
        color: #fff;
    }

.verified-badge {
    background: rgba(255,255,255,0.1);
    color: #cbd5e1;
    font-size: 11px;
    padding: 8px 12px;
    border-radius: 6px;
    font-weight: 600;
    border: 1px solid rgba(255,255,255,0.1);
}

/* --- COACH SECTION (LEFT - SEPARATOR STYLE) --- */
.coach-pro-widget {
    display: flex;
    align-items: center;
    gap: 15px;
    background: rgba(0,0,0,0.3);
    padding: 10px 20px;
    border-radius: 50px; /* Pill Shape */
    border: 1px solid rgba(255,255,255,0.1);
    backdrop-filter: blur(5px);
}

.coach-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #64748b;
}

.coach-details {
    text-align: right;
    line-height: 1.2;
}

.coach-label {
    display: block;
    font-size: 10px;
    color: #94a3b8;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 1px;
}

.coach-name {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
}
/* Update match-strip-item to be a column flex container */
.match-strip-item {
    display: flex;
    flex-direction: column; /* Stack header and content vertically */
    padding: 0; /* Reset padding to handle inner spacing */
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.2s;
}

/* New Competition Header */
.match-comp-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 15px 4px 15px; /* Top padding */
    border-bottom: 1px dashed #f1f5f9;
}

.comp-logo-mini {
    width: 16px;
    height: 16px;
    object-fit: contain;
}

.comp-name-mini {
    font-size: 10px;
    color: #94a3b8;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Wrapper for the existing Date + Teams row */
.match-main-row {
    display: flex;
    align-items: center;
    padding: 8px 15px 12px 15px; /* Bottom padding */
    width: 100%;
}

/*mobile teams*/

/* --- WRAPPER --- */
.mobile-team-dashboard {
    background-color: #f8f9fa;
    min-height: 100vh;
    padding-bottom: 80px;
    overflow-x: hidden;
}

    /* --- HERO HEADER --- */
    .mobile-team-dashboard .hero-card {
        position: relative;
        height: 260px;
        border-radius: 0 0 30px 30px;
        overflow: hidden;
        background: #0f172a;
        box-shadow: 0 10px 30px rgba(0,0,0,0.15);
        margin-bottom: 20px;
    }

    .mobile-team-dashboard .hero-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0.5;
        object-fit: cover;
        filter: brightness(0.7);
    }

    .mobile-team-dashboard .hero-overlay {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(to top, #0f172a 10%, transparent 80%);
    }

    .mobile-team-dashboard .hero-content {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        padding: 25px;
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
    }

    .mobile-team-dashboard .hero-crest {
        width: 85px;
        height: 85px;
        background: #fff;
        border-radius: 20px;
        padding: 8px;
        box-shadow: 0 5px 15px rgba(0,0,0,0.3);
        object-fit: contain;
    }

    /* --- NAV PILLS --- */
    .mobile-team-dashboard .scroll-nav-container {
        position: sticky;
        top: 0;
        z-index: 100;
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(10px);
        padding: 10px 0;
        border-bottom: 1px solid #f1f5f9;
    }

    .mobile-team-dashboard .nav-pills-scroll {
        display: flex;
        overflow-x: auto;
        padding: 0 20px;
        gap: 10px;
        scrollbar-width: none;
    }

        .mobile-team-dashboard .nav-pills-scroll::-webkit-scrollbar {
            display: none;
        }

    .mobile-team-dashboard .nav-item-pill {
        white-space: nowrap;
        background: #fff;
        color: #64748b;
        border: 1px solid #e2e8f0;
        border-radius: 50px;
        padding: 8px 20px;
        font-size: 13px;
        font-weight: 700;
        transition: all 0.3s;
    }

        .mobile-team-dashboard .nav-item-pill.active {
            background: #0f172a;
            color: #fff;
            border-color: #0f172a;
            box-shadow: 0 4px 12px rgba(15, 23, 42, 0.2);
        }

    /* --- CARDS --- */
    .mobile-team-dashboard .content-card {
        background: #fff;
        border-radius: 20px;
        padding: 20px;
        margin-bottom: 20px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.02);
        border: 1px solid #f1f5f9;
    }

    .mobile-team-dashboard .card-header-mob {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;
        border-bottom: 1px dashed #e2e8f0;
        padding-bottom: 12px;
    }

    .mobile-team-dashboard .card-title-mob {
        font-size: 16px;
        font-weight: 800;
        color: #0f172a;
        display: flex;
        align-items: center;
        gap: 8px;
    }

        .mobile-team-dashboard .card-title-mob::before {
            content: '';
            width: 4px;
            height: 18px;
            background: #ef4444;
            border-radius: 2px;
        }

    /* --- MATCH ROWS --- */
    .mobile-team-dashboard .match-row {
        display: flex;
        align-items: center;
        padding: 12px 0;
        border-bottom: 1px solid #f8f9fa;
    }

    .mobile-team-dashboard .team-flex {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .mobile-team-dashboard .team-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .mobile-team-dashboard .team-info {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .mobile-team-dashboard .team-logo-sm {
        width: 24px;
        height: 24px;
        object-fit: contain;
    }

    .mobile-team-dashboard .team-name {
        font-size: 13px;
        font-weight: 700;
        color: #334155;
    }

    .mobile-team-dashboard .match-score {
        font-weight: 800;
        font-size: 14px;
        color: #0f172a;
        background: #f1f5f9;
        padding: 2px 10px;
        border-radius: 6px;
    }

    .mobile-team-dashboard .date-col {
        text-align: center;
        border-right: 1px solid #f1f5f9;
        padding-right: 15px;
        margin-right: 15px;
        min-width: 50px;
    }

    /* --- PLAYER GRID --- */
    .mobile-team-dashboard .player-card {
        background: #fff;
        border: 1px solid #f1f5f9;
        border-radius: 16px;
        text-align: center;
        padding: 15px 5px;
        position: relative;
    }

    .mobile-team-dashboard .player-avatar {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        object-fit: cover;
        border: 3px solid #f8fafc;
        margin-bottom: 8px;
    }

    .mobile-team-dashboard .player-name {
        font-size: 12px;
        font-weight: 700;
        color: #0f172a;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .mobile-team-dashboard .player-num {
        position: absolute;
        top: 8px;
        right: 8px;
        font-size: 10px;
        font-weight: 800;
        color: #cbd5e1;
    }

    /* --- NEWS & CAROUSEL --- */
    .mobile-team-dashboard .news-overlay-card {
        border-radius: 20px;
        overflow: hidden;
        position: relative;
        height: 220px;
    }

    .mobile-team-dashboard .news-gradient {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, transparent 100%);
        padding: 20px;
        color: #fff;
    }

    .mobile-team-dashboard .carousel-indicators [data-bs-target] {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background-color: #fff;
        opacity: 0.5;
        border: none;
        margin: 0 4px;
    }

    .mobile-team-dashboard .carousel-indicators .active {
        opacity: 1;
        width: 20px;
        border-radius: 10px;
    }
    /* Add inside .mobile-team-dashboard { ... } */

    .mobile-team-dashboard .mob-comp-header {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 12px;
        background-color: #f8fafc; /* Slight contrast header */
        border-bottom: 1px solid #f1f5f9;
        border-radius: 12px 12px 0 0; /* Top corners rounded */
    }

    .mobile-team-dashboard .mob-comp-logo {
        width: 16px;
        height: 16px;
        object-fit: contain;
    }

    .mobile-team-dashboard .mob-comp-name {
        font-size: 11px;
        font-weight: 700;
        color: #64748b;
    }
/**********/
/*Team details*/
/*********/



/* =========================================
   ULTIMATE TOURNAMENT STYLES (UPDATED)
   ========================================= */

/* --- WRAPPER --- */
.tournament-listing-wrapper {
    background-color: #fff; /* Changed from gray to white base */
    min-height: 100vh;
    padding-bottom: 100px;
}

/* --- ALTERNATING SECTIONS (NEW) --- */
/* This targets the repeated sections to give them alternating backgrounds */
.tournament-listing-section {
    padding: 50px 0;
    width: 100%;
}

    .tournament-listing-section:nth-of-type(even) {
        background-color: #f8f9fa; /* Light Gray */
        border-top: 1px solid #f1f5f9;
        border-bottom: 1px solid #f1f5f9;
    }

    .tournament-listing-section:nth-of-type(odd) {
        background-color: #ffffff; /* White */
    }

/* --- BOXED CONTAINER --- */
.tournament-listing-boxed {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 20px;
}

/* --- THE HEADER --- */
.tournament-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30px;
    padding-bottom: 15px;
    border-bottom: 1px solid #e2e8f0;
    position: relative;
}

    .tournament-section-header::after {
        content: '';
        position: absolute;
        bottom: -1px;
        right: 0;
        width: 50px;
        height: 4px;
        background: linear-gradient(90deg, #ef4444, #f97316);
        border-radius: 2px;
    }

.tournament-title {
    font-size: 24px;
    font-weight: 900;
    color: #0f172a;
    margin: 0;
    letter-spacing: -0.5px;
}

/* --- THE "ULTIMATE" CARD --- */
.tournament-pro-card {
    position: relative;
    background: #ffffff;
    border-radius: 20px;
    padding: 25px 20px;
    text-align: center;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    border: 1px solid #f1f5f9;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    overflow: hidden;
}

    .tournament-pro-card:hover {
        transform: translateY(-8px) scale(1.02);
        box-shadow: 0 20px 30px -5px rgba(0, 0, 0, 0.1);
        border-color: #cbd5e1;
    }

    .tournament-pro-card::before {
        content: '';
        position: absolute;
        top: -50px;
        right: -50px;
        width: 100px;
        height: 100px;
        background: linear-gradient(135deg, #f8fafc, #f1f5f9);
        border-radius: 50%;
        z-index: 0;
        transition: transform 0.5s;
    }

    .tournament-pro-card:hover::before {
        transform: scale(3);
        opacity: 0.5;
    }

/* Card Content */
.tournament-logo-box {
    position: relative;
    z-index: 1;
    width: 75px;
    height: 75px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 8px 20px rgba(0,0,0,0.06);
    margin-bottom: 15px;
}

.tournament-logo-img {
    width: 50px;
    height: 50px;
    object-fit: contain;
}

.tournament-name {
    position: relative;
    z-index: 1;
    font-size: 15px;
    font-weight: 800;
    color: #1e293b;
    margin-bottom: 5px;
    line-height: 1.3;
}

.tournament-meta {
    position: relative;
    z-index: 1;
    font-size: 11px;
    color: #64748b;
    font-weight: 600;
}

/* --- THE STICKY NEWS FOOTER CONTROL --- */
.news-sticky-control {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 600px;
    background: #0f172a;
    color: #fff;
    padding: 12px 20px;
    border-radius: 50px;
    box-shadow: 0 10px 40px rgba(15, 23, 42, 0.4);
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 1000;
    border: 1px solid rgba(255,255,255,0.1);
    backdrop-filter: blur(10px);
    animation: slideUp 0.5s ease-out;
}

@keyframes slideUp {
    from {
        transform: translate(-50%, 100%);
        opacity: 0;
    }

    to {
        transform: translate(-50%, 0);
        opacity: 1;
    }
}

.news-sticky-text {
    display: flex;
    flex-direction: column;
}

.news-sticky-label {
    font-size: 10px;
    text-transform: uppercase;
    color: #94a3b8;
    letter-spacing: 1px;
    font-weight: 700;
}

.news-sticky-headline {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 250px;
}

.news-sticky-btn {
    background: #ef4444;
    color: #fff;
    border: none;
    border-radius: 30px;
    padding: 8px 20px;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: background 0.2s;
}

    .news-sticky-btn:hover {
        background: #dc2626;
        color: #fff;
    }

/* --- RESPONSIVE GRIDS --- */
.tournament-grid-desktop {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 25px;
    margin-bottom: 20px; /* Reduced from 50px to fit section padding */
}

.tournament-scroll-mobile {
    display: flex;
    overflow-x: auto;
    gap: 15px;
    padding: 10px 5px 20px 5px;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
}

    .tournament-scroll-mobile::-webkit-scrollbar {
        display: none;
    }

.tournament-item-mobile {
    min-width: 150px;
    scroll-snap-align: start;
}

/* =========================================
   PLAYER PROFILE - ULTIMATE PRO CSS
   ========================================= */

/* --- 1. WRAPPER & BASICS --- */
.player-profile-wrapper {
    background-color: #f3f4f6; /* Premium Cool Grey */
    min-height: 100vh;
    padding-bottom: 100px;
    overflow-x: hidden; /* Prevent horizontal scrollbar */
}

/* --- 2. HERO HEADER (The Floating Avatar Logic) --- */
.player-hero-section {
    position: relative;
    height: 350px;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); /* Deep Navy Gradient */
    border-radius: 0 0 40px 40px;
    margin-bottom: 90px; /* IMPORTANT: Space for the avatar to hang out */
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    z-index: 1;
    overflow: visible !important; /* CRITICAL: Allows image to float outside */
}

.player-hero-inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 30px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

/* Player Info (Name & Badge) */
.player-info-large {
    position: relative;
    z-index: 2;
    text-align: right; /* RTL */
    padding-bottom: 40px;
    width: 100%;
    padding-right: 220px; /* Space for avatar */
}

    .player-info-large h1 {
        font-size: 48px;
        font-weight: 900;
        color: #fff;
        margin: 10px 0 0 0;
        text-shadow: 0 4px 15px rgba(0,0,0,0.4);
        letter-spacing: -1px;
    }

.player-badge {
    background: #ef4444; /* Sports Red */
    color: #fff;
    padding: 6px 18px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
}

/* The Floating Wrapper */
.player-avatar-wrapper {
    position: absolute;
    bottom: -70px; /* Pushes half the image out */
    right: 50px; /* RTL Alignment */
    width: 180px;
    height: 180px;
    z-index: 100;
}

.player-avatar-circle {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 6px solid #ffffff;
    background-color: #fff;
    box-shadow: 0 15px 35px rgba(0,0,0,0.25);
    overflow: hidden;
    position: relative;
}

    /* Ensure dynamic images fill the circle */
    .player-avatar-circle img,
    .player-avatar-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

/* Team Logo on Corner */
.player-team-badge {
    position: absolute;
    bottom: 5px;
    left: 5px;
    width: 50px;
    height: 50px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 101;
    border: 2px solid #f1f5f9;
}

    .player-team-badge img {
        width: 35px;
        height: 35px;
        object-fit: contain;
    }


/* --- 3. STICKY NAVIGATION --- */
.player-nav-sticky {
    max-width: 1240px;
    margin: 0 auto 30px;
    padding: 0 20px;
    position: relative;
    z-index: 5;
}

.player-nav-box {
    background: #fff;
    border-radius: 16px;
    padding: 8px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
    display: flex;
    gap: 10px;
    border: 1px solid #eef2f6;
}

.player-tab-btn {
    flex: 1;
    border: none;
    background: transparent;
    padding: 14px;
    font-weight: 800;
    color: #64748b;
    border-radius: 12px;
    transition: all 0.3s;
    font-size: 15px;
}

    .player-tab-btn.active {
        background: #0f172a;
        color: #fff;
        box-shadow: 0 5px 15px rgba(15,23,42,0.25);
    }


/* --- 4. CONTENT CARDS --- */
.pro-card {
    background: #fff;
    border-radius: 16px;
    padding: 25px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 5px rgba(0,0,0,0.01);
    margin-bottom: 25px;
    position: relative;
    overflow: hidden;
}

.pro-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #f1f5f9;
    padding-bottom: 15px;
    margin-bottom: 20px;
}

.pro-card-title {
    font-size: 18px;
    font-weight: 800;
    color: #0f172a;
    margin: 0;
}


/* --- 5. PREMIUM STATISTICS (Top Border Style) --- */
.stats-premium-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}

.stat-box-premium {
    background: #fff;
    border-radius: 16px;
    padding: 20px 15px;
    text-align: center;
    border: 1px solid #f1f5f9;
    box-shadow: 0 4px 6px rgba(0,0,0,0.02);
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease;
}
    /* The Colored Top Line */
    .stat-box-premium::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 4px;
        background: linear-gradient(90deg, #ef4444, #f97316);
    }

    .stat-box-premium:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 30px rgba(0,0,0,0.08);
    }

.stat-icon-wrapper {
    width: 50px;
    height: 50px;
    background: #f8fafc;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px auto;
}

.stat-icon-img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.stat-label-premium {
    font-size: 13px;
    font-weight: 700;
    color: #64748b;
    display: block;
    margin-bottom: 5px;
}

.stat-value-premium {
    font-size: 22px;
    font-weight: 900;
    color: #0f172a;
    display: block;
    letter-spacing: -0.5px;
}


/* --- 6. MATCH STRIPS --- */
.match-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px;
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.2s;
}

    .match-strip:last-child {
        border: none;
    }

    .match-strip:hover {
        background: #f8fafc;
    }

.match-team {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 40%;
}

    .match-team.away {
        justify-content: flex-end;
    }

    .match-team img {
        width: 30px;
        height: 30px;
        object-fit: contain;
    }

    .match-team span {
        font-size: 13px;
        font-weight: 700;
    }

.match-score-box {
    background: #0f172a;
    color: #fff;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 800;
}


/* --- 7. NEWS MAGAZINE LAYOUT --- */
.news-hero-wrapper {
    display: grid;
    grid-template-columns: 1.6fr 1fr; /* 60% left, 40% right */
    gap: 25px;
    margin-bottom: 30px;
    align-items: stretch;
}

/* Featured News Card */
.news-hero-card {
    position: relative;
    height: 450px;
    border-radius: 20px;
    overflow: hidden;
    display: block;
    text-decoration: none;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.news-hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.news-hero-card:hover .news-hero-img {
    transform: scale(1.08);
}

.news-hero-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.95) 10%, rgba(0,0,0,0.6) 50%, transparent 100%);
    padding: 30px;
    color: white;
}

.news-hero-badge {
    background: #ef4444;
    color: #fff;
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 10px;
    display: inline-block;
}

.news-hero-title {
    font-size: 26px;
    font-weight: 800;
    line-height: 1.3;
    margin-bottom: 10px;
}

.news-hero-date {
    font-size: 13px;
    opacity: 0.8;
    font-weight: 600;
}

/* Side News List */
.news-side-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
    height: 450px;
    overflow-y: auto;
}

.news-side-item {
    display: flex;
    gap: 15px;
    background: #fff;
    padding: 12px;
    border-radius: 14px;
    border: 1px solid #e2e8f0;
    transition: all 0.2s;
    text-decoration: none;
}

    .news-side-item:hover {
        transform: translateX(-5px);
        border-color: #cbd5e1;
        box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    }

.news-side-thumb {
    width: 100px;
    height: 80px;
    border-radius: 10px;
    object-fit: cover;
    flex-shrink: 0;
}

.news-side-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.news-side-title {
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.4;
    margin-bottom: 5px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-side-meta {
    font-size: 11px;
    color: #94a3b8;
    font-weight: 600;
}

/* News Grid (for videos/extra news) */
.news-grid-pro {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
}

.news-card-pro {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s;
}

    .news-card-pro:hover {
        transform: translateY(-5px);
    }

.news-img-pro {
    height: 160px;
    width: 100%;
    object-fit: cover;
}

.news-body-pro {
    padding: 15px;
}

.news-title-pro {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 8px;
    line-height: 1.4;
}

.news-date-pro {
    font-size: 11px;
    color: #94a3b8;
}


/* --- 8. TIMELINE (Journey) --- */
.journey-timeline {
    position: relative;
    padding-right: 20px;
    border-right: 2px solid #e2e8f0;
}

.journey-item {
    position: relative;
    margin-bottom: 25px;
    padding-right: 20px;
}

    .journey-item::before {
        content: '';
        position: absolute;
        right: -26px;
        top: 5px;
        width: 14px;
        height: 14px;
        background: #fff;
        border: 3px solid #ef4444;
        border-radius: 50%;
    }

.journey-team {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f8fafc;
    padding: 10px;
    border-radius: 8px;
}

.journey-logo {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.journey-date {
    font-size: 12px;
    color: #64748b;
    font-weight: 700;
}


/* --- 9. STATS TABLE (Tab 3) --- */
.stats-table-wrapper {
    overflow-x: auto;
}

.stats-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 8px;
}

    .stats-table td {
        background: #f8fafc;
        padding: 15px;
        font-weight: 600;
        border-top: 1px solid #eee;
        border-bottom: 1px solid #eee;
    }

        .stats-table td:first-child {
            border-radius: 0 10px 10px 0;
            border-right: 1px solid #eee;
        }

        .stats-table td:last-child {
            border-radius: 10px 0 0 10px;
            border-left: 1px solid #eee;
        }
/* =========================================
   PLAYER PROFILE - ULTIMATE PRO EDITION
   ========================================= */

/* --- 1. GLOBAL WRAPPER --- */
.player-profile-wrapper {
    background-color: #f3f4f6; /* Cool premium grey */
    min-height: 100vh;
    padding-bottom: 100px;
    overflow-x: hidden; /* Prevent horizontal scroll */
}

/* --- 2. HERO HEADER SECTION --- */
.player-hero-section {
    position: relative;
    height: 350px;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); /* Deep Navy */
    border-radius: 0 0 40px 40px;
    margin-bottom: 90px; /* Space for floating avatar */
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    z-index: 1;
    overflow: visible !important; /* CRITICAL: Allows avatar to pop out */
}

.player-hero-inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 30px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

/* Player Name & Badge */
.player-info-large {
    position: relative;
    z-index: 2;
    text-align: right; /* RTL */
    padding-bottom: 40px;
    width: 100%;
    padding-right: 220px; /* Space to avoid text hitting avatar */
}

    .player-info-large h1 {
        font-size: 48px;
        font-weight: 900;
        color: #fff;
        margin: 10px 0 0 0;
        text-shadow: 0 4px 15px rgba(0,0,0,0.4);
        letter-spacing: -1px;
    }

.player-badge {
    background: #ef4444; /* Sports Red */
    color: #fff;
    padding: 6px 18px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
}

/* --- 3. THE FLOATING AVATAR --- */
.player-avatar-wrapper {
    position: absolute;
    bottom: -75px; /* Pushes image half-out */
    right: 50px; /* RTL Alignment */
    width: 170px;
    height: 170px;
    z-index: 100;
}

.player-avatar-circle {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 6px solid #ffffff;
    background-color: #f8f9fa;
    box-shadow: 0 15px 40px rgba(0,0,0,0.25);
    overflow: hidden;
    position: relative;
    /* Logic to fit image perfectly */
    background-size: cover !important;
    background-position: center 15% !important; /* Focuses on Face */
    background-repeat: no-repeat !important;
}

    /* Fallback if using IMG tag inside */
    .player-avatar-circle img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center 15%;
        display: block;
    }

/* --- 4. THE CLUB LOGO (Fixed Fit) --- */
.player-team-badge {
    position: absolute;
    bottom: 5px;
    left: 5px;
    width: 55px;
    height: 55px;
    background: #ffffff;
    border-radius: 50%;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    border: 3px solid #f3f4f6; /* Blends with page bg */
    overflow: hidden; /* Ensures circular crop */
    z-index: 105;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .player-team-badge img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* Forces image to fill circle */
        display: block;
    }

/* --- 5. STICKY NAVIGATION --- */
.player-nav-sticky {
    max-width: 1240px;
    margin: 0 auto 30px;
    padding: 0 20px;
    position: relative;
    z-index: 5;
}

.player-nav-box {
    background: #fff;
    border-radius: 16px;
    padding: 8px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
    display: flex;
    gap: 10px;
    border: 1px solid #eef2f6;
}

.player-tab-btn {
    flex: 1;
    border: none;
    background: transparent;
    padding: 14px;
    font-weight: 800;
    color: #64748b;
    border-radius: 12px;
    transition: all 0.3s;
    font-size: 15px;
}

    .player-tab-btn.active {
        background: #0f172a;
        color: #fff;
        box-shadow: 0 5px 15px rgba(15,23,42,0.25);
    }

/* --- 6. CARDS & LAYOUT --- */
.pro-card {
    background: #fff;
    border-radius: 16px;
    padding: 25px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 5px rgba(0,0,0,0.01);
    margin-bottom: 25px;
    position: relative;
    overflow: hidden;
}

.pro-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #f1f5f9;
    padding-bottom: 15px;
    margin-bottom: 20px;
}

.pro-card-title {
    font-size: 18px;
    font-weight: 800;
    color: #0f172a;
    margin: 0;
}

/* --- 7. PREMIUM STATISTICS (Dashboard Look) --- */
.stats-premium-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}

.stat-box-premium {
    background: #fff;
    border-radius: 16px;
    padding: 20px 15px;
    text-align: center;
    border: 1px solid #f1f5f9;
    box-shadow: 0 4px 6px rgba(0,0,0,0.02);
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
    /* Top Gradient Line */
    .stat-box-premium::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 4px;
        background: linear-gradient(90deg, #ef4444, #f97316);
    }

    .stat-box-premium:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 30px rgba(0,0,0,0.08);
    }

.stat-icon-wrapper {
    width: 48px;
    height: 48px;
    background: #f8fafc;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    border: 1px solid #e2e8f0;
}

.stat-icon-img {
    width: 26px;
    height: 26px;
    object-fit: contain;
}

.stat-label-premium {
    font-size: 13px;
    font-weight: 700;
    color: #64748b;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-value-premium {
    font-size: 20px;
    font-weight: 900;
    color: #0f172a;
}

/* --- 8. MATCH STRIPS --- */
.match-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px;
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.2s;
}

    .match-strip:last-child {
        border: none;
    }

    .match-strip:hover {
        background: #f8fafc;
    }

.match-team {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 40%;
}

    .match-team.away {
        justify-content: flex-end;
    }

    .match-team img {
        width: 30px;
        height: 30px;
        object-fit: contain;
    }

    .match-team span {
        font-size: 13px;
        font-weight: 700;
    }

.match-score-box {
    background: #0f172a;
    color: #fff;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 800;
}

/* --- 9. NEWS MAGAZINE LAYOUT --- */
.news-hero-wrapper {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 25px;
    margin-bottom: 30px;
    align-items: stretch;
}

/* Featured Card */
.news-hero-card {
    position: relative;
    height: 450px;
    border-radius: 20px;
    overflow: hidden;
    display: block;
    text-decoration: none;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.news-hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.news-hero-card:hover .news-hero-img {
    transform: scale(1.05);
}

/* Dark Overlay for Text */
.news-hero-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(to top, #000 0%, rgba(0,0,0,0.85) 50%, transparent 100%);
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.news-hero-badge {
    background: #ef4444;
    color: #fff;
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 10px;
    display: inline-block;
}

.news-hero-title {
    font-size: 26px;
    font-weight: 800;
    color: #fff;
    line-height: 1.3;
    margin-bottom: 10px;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

.news-hero-date {
    font-size: 13px;
    opacity: 0.8;
    font-weight: 600;
}

/* Side List */
.news-side-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
    height: 450px;
    overflow-y: auto;
}

.news-side-item {
    display: flex;
    gap: 15px;
    background: #fff;
    padding: 12px;
    border-radius: 14px;
    border: 1px solid #e2e8f0;
    transition: all 0.2s;
    text-decoration: none;
}

    .news-side-item:hover {
        transform: translateX(-5px);
        border-color: #cbd5e1;
        box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    }

.news-side-thumb {
    width: 100px;
    height: 80px;
    border-radius: 10px;
    object-fit: cover;
    flex-shrink: 0;
}

.news-side-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.news-side-title {
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.4;
    margin-bottom: 5px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-side-meta {
    font-size: 11px;
    color: #94a3b8;
    font-weight: 600;
}

/* News Grid (Videos) */
.news-grid-pro {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
}

.news-card-pro {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s;
}

    .news-card-pro:hover {
        transform: translateY(-5px);
    }

.news-img-pro {
    height: 160px;
    width: 100%;
    object-fit: cover;
}

.news-body-pro {
    padding: 15px;
}

.news-title-pro {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 8px;
    line-height: 1.4;
}

.news-date-pro {
    font-size: 11px;
    color: #94a3b8;
}

/* Wrapper to constrain image zoom */
.video-thumb-wrapper {
    position: relative;
    overflow: hidden;
    padding-top: 56.25%; /* 16:9 Aspect Ratio */
    background: #000;
}

    /* Image styling */
    .video-thumb-wrapper .news-img-pro {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.5s ease;
        opacity: 0.9;
    }

/* Hover: Zoom Image */
.news-card-pro:hover .news-img-pro {
    transform: scale(1.1);
    opacity: 0.7; /* Darken slightly to make button pop */
}

/* The Play Button Container (Centered) */
.play-btn-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
}

/* The Play Button Circle (Glass Effect) */
.play-btn-circle {
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.2); /* Semi-transparent */
    backdrop-filter: blur(8px); /* Blur behind */
    border: 2px solid rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Bouncy effect */
}

/* Hover: Button turns Red & Scales */
.news-card-pro:hover .play-btn-circle {
    background: #ef4444; /* Brand Red */
    border-color: #ef4444;
    transform: scale(1.15);
    box-shadow: 0 10px 25px rgba(239, 68, 68, 0.5); /* Red Glow */
}

/* The Icon itself */
.play-btn-icon {
    width: 24px;
    height: 24px;
    filter: brightness(0) invert(1); /* Ensure SVG is white */
}

/* --- 10. TIMELINE (Journey) --- */
.journey-timeline {
    position: relative;
    padding-right: 20px;
    border-right: 2px solid #e2e8f0;
}

.journey-item {
    position: relative;
    margin-bottom: 25px;
    padding-right: 20px;
}

    .journey-item::before {
        content: '';
        position: absolute;
        right: -26px;
        top: 5px;
        width: 14px;
        height: 14px;
        background: #fff;
        border: 3px solid #ef4444;
        border-radius: 50%;
    }

.journey-team {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f8fafc;
    padding: 10px;
    border-radius: 8px;
}

.journey-logo {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.journey-date {
    font-size: 12px;
    color: #64748b;
    font-weight: 700;
}

/* --- 11. TABLES --- */
.stats-table-wrapper {
    overflow-x: auto;
}

.stats-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 8px;
}

    .stats-table td {
        background: #f8fafc;
        padding: 15px;
        font-weight: 600;
        border-top: 1px solid #eee;
        border-bottom: 1px solid #eee;
    }

        .stats-table td:first-child {
            border-radius: 0 10px 10px 0;
            border-right: 1px solid #eee;
        }

        .stats-table td:last-child {
            border-radius: 10px 0 0 10px;
            border-left: 1px solid #eee;
        }

/* =========================================
   PREDICTION HUB - ULTIMATE PRO DESIGN
   ========================================= */

/* --- PAGE WRAPPER --- */
.hub-wrapper {
    background-color: #f1f5f9;
    min-height: 100vh;
    padding-bottom: 120px;
    overflow-x: hidden;
    width: 100%;
}

/* --- MAIN BOX CONTAINER (Desktop Only) --- */
.hub-main-box {
    background: #ffffff;
    border-radius: 24px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.06);
    padding: 40px;
    margin: 40px auto;
    max-width: 1050px;
    border: 1px solid #e2e8f0;
    position: relative;
    overflow: hidden;
}

    .hub-main-box::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 6px;
        background: linear-gradient(90deg, #0f172a, #334155);
    }

/* --- HEADERS --- */
.hub-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 25px;
    margin-top: 40px;
    padding-bottom: 15px;
    border-bottom: 1px solid #f1f5f9;
}

.hub-title {
    font-size: 24px;
    font-weight: 900;
    color: #0f172a;
    margin: 0;
}

.hub-subtitle {
    font-size: 14px;
    color: #64748b;
    font-weight: 600;
    display: block;
    margin-top: 4px;
}

.hub-link {
    font-size: 13px;
    font-weight: 700;
    color: #ef4444;
    text-decoration: none;
}

/* --- MATCH CARD --- */
.hub-match-card {
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 6px rgba(0,0,0,0.02);
    margin-bottom: 25px;
    overflow: hidden;
    transition: all 0.3s ease;
}

    .hub-match-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 30px rgba(0,0,0,0.08);
        border-color: #cbd5e1;
    }

/* --- CARD HEADER --- */
.hub-card-top {
    background: #f8fafc;
    padding: 12px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #f1f5f9;
}

.hub-comp-info {
    display: flex;
    align-items: center;
    gap: 8px;
}

.hub-comp-icon {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

.hub-comp-name {
    font-size: 13px;
    font-weight: 800;
    color: #475569;
    text-transform: uppercase;
}

/* --- PRO COUNTDOWN BOX --- */
.hub-countdown-container {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 6px 12px;
    text-align: center;
    min-width: 140px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.hub-countdown-label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    color: #64748b;
    margin-bottom: 2px;
}
/* Force Badge Style */
.countDown.badge {
    font-size: 12px !important;
    font-weight: 800 !important;
    padding: 4px 10px !important;
    letter-spacing: 0.5px;
    background-color: #ef4444 !important;
    color: #fff !important;
    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.2);
}

/* --- CARD BODY --- */
.hub-card-main {
    padding: 25px 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.hub-team {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-decoration: none;
    color: inherit;
    transition: opacity 0.2s;
}

    .hub-team:hover {
        opacity: 0.7;
    }

.hub-team-logo {
    width: 60px;
    height: 60px;
    object-fit: contain;
    margin-bottom: 10px;
    filter: drop-shadow(0 3px 5px rgba(0,0,0,0.05));
}

.hub-team-name {
    font-size: 14px;
    font-weight: 800;
    color: #1e293b;
    line-height: 1.3;
    max-width: 110px;
}

/* --- CENTER COLUMN (Vertical Stack Fix) --- */
.hub-center-col {
    flex: 0 0 160px;
    display: flex;
    flex-direction: column !important; /* Critical for vertical alignment */
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.hub-score-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
}

.hub-input {
    width: 50px;
    height: 50px;
    border: 2px solid #e2e8f0;
    background: #fff;
    border-radius: 12px;
    text-align: center;
    font-size: 22px;
    font-weight: 800;
    color: #0f172a;
    transition: all 0.2s;
}

    .hub-input:focus {
        border-color: #ef4444;
        box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.1);
        outline: none;
    }

.hub-vs {
    font-size: 12px;
    font-weight: 900;
    color: #cbd5e1;
}

.hub-result-box {
    width: 100%;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    padding: 8px;
    border-radius: 8px;
    display: block;
}

.alert-success {
    background-color: #dcfce7;
    color: #166534;
    border: 1px solid #bbf7d0;
}

/* --- FOOTER --- */
.hub-card-footer {
    padding: 15px 20px;
    border-top: 1px solid #f8fafc;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.hub-btn {
    display: block;
    width: 100%;
    max-width: 250px;
    text-align: center;
    background: #0f172a;
    color: #fff;
    padding: 12px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    border: none;
    margin: 0 auto;
    transition: background 0.2s;
}

    .hub-btn:hover {
        background: #334155;
        color: #fff;
    }

.hub-success {
    width: 100%;
    text-align: center;
    color: #15803d;
    font-size: 13px;
    font-weight: 700;
    background: #dcfce7;
    padding: 10px;
    border-radius: 8px;
    margin-top: 10px;
}

/* --- MOBILE TWEAKS --- */
@media (max-width: 992px) {
    .hub-main-box {
        background: transparent;
        box-shadow: none;
        border: none;
        padding: 0;
        margin: 20px 0;
    }

        .hub-main-box::before {
            display: none;
        }

    .hub-card-main {
        padding: 20px 10px;
    }

    .hub-team-logo {
        width: 50px;
        height: 50px;
    }

    .hub-team-name {
        font-size: 11px;
    }

    .hub-input {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }

    .hub-center-col {
        flex: 0 0 120px;
        gap: 8px;
    }

    .hub-countdown-container {
        min-width: auto;
        padding: 4px 8px;
    }

    .hub-countdown-label {
        font-size: 9px;
    }

    .countDown.badge {
        font-size: 10px !important;
        padding: 3px 6px !important;
    }
}


/* =========================================
   MOBILE PLAYER PROFILE - RESTORED
   ========================================= */

/* --- 1. MOBILE HERO SECTION --- */
.mobile-player-hero {
    position: relative;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); /* Navy Gradient */
    padding: 30px 20px 80px 20px; /* Extra bottom padding for avatar overlap */
    border-radius: 0 0 30px 30px;
    text-align: center;
    color: #fff;
    margin-bottom: 60px; /* Space for the avatar to sit */
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

.mobile-hero-badge {
    background: #ef4444; /* Red Accent */
    color: #fff;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    display: inline-block;
    margin-bottom: 10px;
}

.mobile-hero-name {
    font-size: 28px;
    font-weight: 900;
    margin: 0;
    text-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

/* Floating Avatar */
.mobile-avatar-wrapper {
    position: absolute;
    bottom: -50px;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 120px;
    z-index: 10;
}

.mobile-avatar-circle {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 4px solid #fff;
    background-color: #f8f9fa;
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
    overflow: hidden;
    position: relative;
    /* Centers the face image */
    background-size: cover !important;
    background-position: center 15% !important;
}

.mobile-team-badge {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 40px;
    height: 40px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #f3f4f6;
}

    .mobile-team-badge img {
        width: 28px;
        height: 28px;
        object-fit: contain;
    }

/* --- 2. STICKY NAVIGATION --- */
.mobile-sticky-nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid #eef2f6;
    padding: 10px 0;
    margin-bottom: 20px;
}

.mobile-nav-scroll {
    display: flex;
    overflow-x: auto;
    padding: 0 15px;
    gap: 10px;
    scrollbar-width: none; /* Hide Scrollbar Firefox */
}

    .mobile-nav-scroll::-webkit-scrollbar {
        display: none;
    }
/* Hide Scrollbar Chrome */

.mobile-nav-item {
    white-space: nowrap;
   /* background: #f8fafc;
    border: 1px solid #e2e8f0;*/
    padding: 0px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 700;
    color: #64748b;
    transition: all 0.2s;
    text-decoration: none;
    cursor: pointer;
}

    .mobile-nav-item.active {
        background: #0f172a;
        color: #fff;
        border-color: #0f172a;
        box-shadow: 0 4px 10px rgba(15,23,42,0.2);
    }

/* --- 3. CARDS & LAYOUT --- */
.mob-card {
    background: #fff;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03);
    margin-bottom: 20px;
    border: 1px solid #f1f5f9;
}

.mob-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    border-bottom: 1px solid #f8f9fa;
    padding-bottom: 10px;
}

.mob-card-title {
    font-size: 16px;
    font-weight: 800;
    color: #0f172a;
    margin: 0;
}

/* Stats Grid */
.mob-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.mob-stat-box {
    background: #f8fafc;
    border-radius: 12px;
    padding: 15px;
    text-align: center;
    border: 1px solid #eef2f6;
}

.mob-stat-label {
    font-size: 11px;
    font-weight: 700;
    color: #94a3b8;
    display: block;
}

.mob-stat-value {
    font-size: 15px;
    font-weight: 800;
    color: #334155;
}

/* Match Strip */
.mob-match-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid #f1f5f9;
}

.mob-team {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 30%;
}

    .mob-team img {
        width: 35px;
        height: 35px;
        margin-bottom: 5px;
        object-fit: contain;
    }

    .mob-team span {
        font-size: 11px;
        font-weight: 700;
        text-align: center;
        line-height: 1.2;
    }

.mob-score {
    font-weight: 900;
    font-size: 16px;
    background: #0f172a;
    color: #fff;
    padding: 4px 12px;
    border-radius: 8px;
}

/* --- 4. TIMELINE (Journey) --- */
.mob-timeline {
    padding-right: 15px;
    border-right: 2px solid #e2e8f0;
    margin-right: 10px;
}

.mob-timeline-item {
    position: relative;
    margin-bottom: 20px;
    padding-right: 15px;
}

.mob-timeline-dot {
    position: absolute;
    right: -22px;
    top: 0;
    width: 12px;
    height: 12px;
    background: #fff;
    border: 3px solid #ef4444;
    border-radius: 50%;
}

/* --- 5. HORIZONTAL NEWS SCROLL --- */
.mob-news-scroll {
    display: flex;
    overflow-x: auto;
    gap: 15px;
    padding-bottom: 15px;
    scrollbar-width: none;
}

    .mob-news-scroll::-webkit-scrollbar {
        display: none;
    }

.mob-news-card {
    min-width: 260px;
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0,0,0,0.02);
}

.mob-news-img {
    width: 100%;
    height: 140px;
    object-fit: cover;
}

.mob-news-body {
    padding: 12px;
}

.mob-news-title {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mob-news-date {
    font-size: 10px;
    color: #94a3b8;
}

/* Video Play Button (Small) */
.play-btn-circle-sm {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(5px);
    border: 1.5px solid rgba(255,255,255,0.8);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .play-btn-circle-sm .play-btn-icon {
        width: 16px;
        height: 16px;
        filter: brightness(0) invert(1);
    }

/* =========================================
   GLOBAL BOXED LAYOUT (FINAL FIX)
   ========================================= */

/* Desktop Only (Laptops, PC, Large Screens) */
@media (min-width: 992px) {

    /* 1. The Background (Gray Area) */
    body, form {
        background-color: #eef2f5 !important;
        background-image: linear-gradient(180deg, #eef2f5 0%, #e6e9ef 100%) !important;
        background-attachment: fixed;
    }

    /* 2. The Main White Box */
    .site-main-box {
        background-color: #ffffff;
        /* BOX SIZING: Ensures margins are visible even on small laptops */
        width: 83% !important;
        max-width: 1350px !important;
        /* Centering & Spacing */
        margin: 30px auto !important;
        padding: 0;
        /* Visual Styling */
        border-radius: 16px;
        box-shadow: 0 10px 40px rgba(0,0,0,0.08); /* Nice drop shadow */
        border: 1px solid #dce1e6;
        min-height: 95vh;
        /* CRITICAL FOR STICKY SIDEBARS: */
        /* If this is hidden/auto, sticky sidebar STOPS working. Must be visible. */
        overflow: visible !important;
        position: relative;
        display: block;
    }
}

/* Mobile Reset (Full Width) */
@media (max-width: 991px) {
    .site-main-box {
        width: 100% !important;
        margin: 0 !important;
        border: none;
        box-shadow: none;
        background: #fff;
    }

    body {
        background-color: #fff !important;
    }
}

/* =========================================
   STICKY SIDEBAR FIX
   ========================================= */
.sidebar-widget {
    position: -webkit-sticky;
    position: sticky;
    top: 90px; /* Adjust based on your header height */
    z-index: 10;
    /* Ensure it has a background so content doesn't show through */
    background: #fff;
    border-radius: 8px;
    padding: 15px;
    border: 1px solid #f0f0f0;
}

/* =========================================
   PRO MEGA MENU (Fixed Visibility)
   ========================================= */

/* 1. The Wrapper (Hidden by default) */
#mobileDiv.sideMenu {
    display: none; /* Completely hidden initially */
    position: absolute;
    top: 100%; /* Pushes it directly below the toggle button/header */
    left: 0;
    right: 0;
    width: 100%;
    z-index: 99999; /* Ensures it sits on top of everything */
}

    /* 2. The Active State (Added by JS) */
    #mobileDiv.sideMenu.show {
        display: block !important; /* Forces it to show */
        animation: menuFadeIn 0.3s ease-out;
    }

/* 3. The White Card Design */
.lowerMenu {
    background: #ffffff;
    width: 95%;
    max-width: 1350px;
    margin: 10px auto 0 auto; /* Slight gap from top */
    /* Pro Styling */
    border-top: 4px solid #f6150a;
    border-radius: 8px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2); /* Strong shadow to separate from content */
    padding: 30px;
    border: 1px solid #e0e0e0;
}

/* 4. Grid Layout */
.lowerMenuContent {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 30px;
    direction: rtl;
}

/* Headers */
.lowerColumnHeader {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid #f5f5f5;
}

    .lowerColumnHeader p {
        font-size: 15px;
        font-weight: 800;
        color: #000;
        margin: 0;
    }

.cupIcon {
    width: 22px;
}

/* Links */
.menu-link-item {
    display: block;
    font-size: 14px;
    color: #555;
    text-decoration: none;
    padding: 6px 10px;
    border-radius: 6px;
    font-weight: 600;
    transition: all 0.2s;
}

    .menu-link-item:hover {
        background-color: #fff1f1;
        color: #f6150a;
        transform: translateX(-5px);
    }

/* Animation */
@keyframes menuFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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