@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: 37px;
    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: #FF7A01;
    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: #FF7A01;
    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: #FF7A01;
    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: #FF7A01;
    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: 7px;
    margin-right: 10px;
    padding-left: 15px;
    padding-right: 15px;
    color: #000;
}

    .nav-link.active {
        background-color: #EFEFEF;
        font-weight: bold;
        color: black;
    }

/* 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: #FF7A01;
    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: #FF7A01;
    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: #FF7A01 !important;
    border-color: #FF7A01 !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: #FF7A01;
        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: #FF7A01;
        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: #FF7A01;
    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: #FF7A01;
    border: 1px solid #FF7A01;
    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: #FF7A01;
    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: #FF7A01;
    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: #FF7A01;
        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: #FF7A01;
        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: #FF7A01;
    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: #000;
    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: #000;
    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(243, 115, 18, 1) 0%, rgba(0, 0, 0, 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%);
}

.clubHeader {
    position: relative;
    background-image: url("../images/clubHeaderNoShade.svg");
    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: #FF7A01;
    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: #FF7A01;
}

.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;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-radius: 25px;
}

.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: #FF7A01 !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: -120px;*/
    right: 15%;
}

.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: #FF7A01;
    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: 10px;
    /*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: #FF7A01;
}

.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: 16px;
}

/* .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 #FF7A01;
    color: #FF7A01 !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: #FF7A01;
    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: #FF7A01;
    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: #FF7A01;
    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: #FF7A01;
    font-weight: 700;
    font-size: 24px;
}

/* 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: #FF7A01;
}

.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 #FF7A01;
    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: #f6150a;
    width: 100%;
    height: 350px;
    background-image: url("../images/bgreg.png");
    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: #FF7A01;
    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: 80%;
    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;
}

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

.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: 40px;
}

.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: #FF7A01;
    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 #FF7A01;
    color: #FF7A01;
    background-color: transparent;
    width: 45%;
    border-radius: 100px;
    padding: 14px;
    margin-top: 10px;
}

.outofContent {
    color: #a3a3a3;
}

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

.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: #FF7A01;
    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: #FF7A01;
    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;
    padding-top: 19px;
}

.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: #FF7A01;
}

.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;
    }

    .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: 9px;
        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: #FF7A01;
        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: #FF7A01;
        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: #FF7A01;
        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: #FF7A01;
        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: #FF7A01;
    }

    .newsTitleActiveMulti {
        font-size: 16px;
        width: 100%;
        padding-right: 10px;
        /* color: #FF7A01;*/
    }

    .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: 120px;
        background-color: #F5F5F5;
        padding-top: 165px;
    }

    .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: flex;
        align-items: center;
        justify-content: space-between;
        background-color: #000 !important;
        top: 0;
        left: 0;
        width: 100%;
        height: 75px;
        padding: 10px;
        z-index: 10000;
        /*clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);*/
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        transition: all 0.4s ease;
    }

    .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;
        padding-top: 19px;
    }

    .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: #FF7A01;
        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: #FF7A01;
    }

    .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: #FF7A01;
        font-size: 13px;
    }

    .addDivMobileHeader {
        height: 120px;
        width: 90%;
        margin: auto;
        background-color: #000;
        margin-top: 20px;
    }

    .mobileMatchCard {
        width: 95%;
        margin: auto;
        background-color: white;
        margin-top: 7px;
        padding: 8px;
        border-radius: 10px;
        margin-bottom: 10px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08), 0 8px 20px rgba(0, 0, 0, 0.3);
        transition: box-shadow 0.3s ease, transform 0.2s ease;
        border: 1px solid rgba(0, 0, 0, 0.05);
        position: relative; /* Added relative positioning */
    }

        .mobileMatchCard::before {
            content: '';
            position: absolute;
            top: 0px; /* Adjust top for proper placement */
            right: 0;
            width: 0;
            height: 0;
            border-top: 30px solid #FF7A01;
            border-left: 30px solid transparent;
            border-radius: 0 7px 0 0;
        }


    .videoCardWrapper {
        width: 100%;
        background-color: #fff;
        border-radius: 12px;
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
        overflow: hidden;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        padding: 10px;
        height: 100%;
    }

        .videoCardWrapper:hover {
            transform: translateY(-4px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
        }


    .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: 45px;
    }

    .newsGridItem {
        border: 1px solid lightgray;
        padding: 5px;
        border-radius: 10px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .matchCardButton {
        background-color: #f26522;
        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: #FF7A01;
        color: white;
        width: 100%;
        margin: auto;
        height: 40px;
        border: none;
        border-radius: 5px;
        margin-top: 20px;
        margin-bottom: 40px;
        cursor: pointer;
        font-weight: bold;
        animation: pulse 1.5s infinite;
        transition: transform 0.2s ease;
    }

        .allMatchesMobileFull:hover {
            transform: scale(1.03);
        }

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



    .allMatchesMobile {
        display: flex;
        background-color: #FF7A01;
        color: white;
        justify-content: center;
        align-items: center;
        width: 90%;
        margin: auto;
        height: 40px;
        border: none;
        border-radius: 5px;
        margin-top: 10px;
        gap: 10px;
        font-weight: bold;
        animation: pulse 1.5s infinite;
        cursor: pointer;
        transition: transform 0.2s ease;
    }

        .allMatchesMobile:hover {
            transform: scale(1.03);
        }




    .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 #FF7A01 !important;
            border-radius: 0px !important;
        }

        #pills-tab3 .nav-item.active {
            background-color: #00D622 !important;
        }

    #pills-tab-3 .active {
        color: #FF7A01 !important;
        border-bottom: 1px solid #FF7A01 !important;
    }

    .pills-tab3 {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0px !important;
        padding-right: 0px !important;
    }

        .pills-tab3 .nav-link.active {
            color: #FF7A01 !important;
            border-bottom: 2px solid #FF7A01 !important;
            border-radius: 0px !important;
        }

        .pills-tab3 .nav-item.active {
            background-color: #00D622 !important;
        }

    #pills-tab-3 .active {
        color: #FF7A01 !important;
        border-bottom: 1px solid #FF7A01 !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: #f26522 !important; /* Softer orange */
        color: #fff !important;
        box-shadow: 0 2px 8px rgba(242, 101, 34, 0.4); /* optional glow */
        border-radius: 20px;
    }

    .pillIcon {
        width: 25px;
    }

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

    .mobileLatestNewsHeader {
        position: relative;
        margin-top: 30px;
        margin-right: 2%;
        margin-left: 2%;
        margin-bottom: 20px;
        font-size: 1.4rem;
        font-weight: 700;
        color: #FF7A01;
        padding: 10px 20px;
        background-color: #fff;
        border-radius: 10px;
        overflow: hidden;
        animation: bounceIn 0.6s ease;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    }

        .mobileLatestNewsHeader::before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: 0;
            height: 0;
            border-top: 30px solid #FF7A01;
            border-left: 30px solid transparent;
        }

    .OrangeSportsHeader {
        position: relative;
        margin-top: 10px;
        margin-right: 2%;
        margin-left: 2%;
        margin-bottom: 4px;
        font-size: 1.4rem;
        font-weight: 700;
        color: #FF7A01;
        padding: 5px 3px;
        background-color: #fff;
        border-radius: 10px;
        overflow: hidden;
        animation: bounceIn 0.6s ease;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    }

        .OrangeSportsHeader::before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: 0;
            height: 0;
            border-top: 30px solid #FF7A01;
            border-left: 30px solid transparent;
        }

    .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: #FF7A01;
        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 #FF7A01 !important;
        color: #FF7A01 !important;
        background-color: #F5F5F5;
        border-radius: 0px;
        font-weight: 600;
    }

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

    .followButtonLeague {
        margin-top: 10px;
        background-color: #FF7A01;
        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: #FF7A01;
    }

    .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: #FF7A01;
        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: #FF7A01;
        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: #FF7A01;
        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: #FF7A01;
        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: hsl(29, 100%, 50%) !important;
    }

    .add1 {
        display: none;
    }

    .add2 {
        display: none;
    }

    .mobileNavBar {
        flex-direction: column;
        width: 80%;
        background-color: #111;
        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;
        border-radius: 8px 0 0 8px;
        box-shadow: -4px 0 12px rgba(0, 0, 0, 0.5);
    }

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


    .logoButton {
        background-color: #FF7A01;
        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;*/
    }

    @media (max-width: 768px) {
        .mobileNavSeparator {
            width: 100%;
            height: 2px;
            background: linear-gradient(to right, transparent, #ff7a01, transparent);
            margin: 0px 0;
            opacity: 0.5;
        }
    }

    .socialIconMobile {
        width: 40px;
    }

    .createAccountButton {
        outline: none;
        color: white;
        border: none;
        border-radius: 5px;
        background-color: #FF7A01;
        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: 17px;
        color: white;
        font-weight: 600;
    }

    .mobileMenuItems {
        display: flex;
        flex-direction: column;
        gap: 30px;
        /*        margin-top: 20px;*/
        margin-bottom: 30px;
    }

    .mobileNNavIcon {
        width: 30px;
    }

    .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-color: #fff;
        background-size: cover;
    }

    .mobileBodylanding {
        background-image: url("../images/mobileBG.jpg");
        background-position: center;
        background-color: #fff;
        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: #ff7a01;
        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: #ff7a01;
}
/* 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: 20px;
    right: 20px;
    font-size: 28px;
    background: none;
    border: none;
    color: #fff !important;
    cursor: pointer;
    z-index: 1001;
}


.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 #f26522;
        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: #f26522;
            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: #f26522;
            color: #fff;
        }

    .pagination .active a {
        background-color: #f26522;
        color: #fff;
        border-color: #f26522;
        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;
            color: #f26522;
        }
}

/* 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: #ff7a01;
            color: #ff7a01;
        }

        /* 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: 34px;*/
    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: 20px 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*/
/*end of add on*/


/*no desktop*/
.wrapper {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #1e1e1e;
}

.message-box {
    background-color: #ffffff;
    padding: 40px;
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
    text-align: center;
    width: 90%;
    max-width: 400px;
}

    .message-box img {
        width: 70px;
        margin-bottom: 20px;
    }

    .message-box h1 {
        font-size: 24px;
        margin: 0 0 10px;
        color: #222;
    }

    .message-box p {
        font-size: 16px;
        color: #555;
        margin: 0;
    }

@media (max-width: 768px) {
    .message-box {
        display: none;
    }
}
/*no desktop*/

/* mobile sticky header and news ticker*/
.mobileStickyWrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999999;
    background-color: #ffffff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    padding-bottom: 5px;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    transition: box-shadow 0.4s ease, background-color 0.4s ease, transform 0.4s ease;
}

/* mobile sticky header and news ticker*/

/* bottom bar */

/* Floating Bottom Bar */
/* Hide the checkbox visually */
.bottom-bar-toggle {
    display: none;
}

/* Base styles for the bottom bar */
.bottom-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #FF7A01; /* Attractive orange color */
    padding: 15px 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-radius: 20px 20px 0 0;
    box-shadow: 0px -8px 30px rgba(0, 0, 0, 0.2);
    z-index: 10000;
    transform: translateY(100%); /* Hidden initially */
    transition: transform 0.5s ease-in-out;
}


/*top bar nav*/
/* Keyframes for glow pulse animation */
@keyframes colorScalePulse {
    0% {
        background-color: #333;
        transform: scale(1);
    }

    50% {
        background-color: #5a5a5a; /* Lighten up a bit */
        transform: scale(1.05);
    }

    100% {
        background-color: #333;
        transform: scale(1);
    }
}




/* Navigation container */
.topBarNav {
    display: flex;
    justify-content: space-around;
    background-color: #1e1e1e;
    padding: 5px 0;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    position: sticky;
    top: 0;
    z-index: 9999;
}

    /* Individual nav items */
    .topBarNav a {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: #888;
        text-decoration: none;
        font-size: 11px;
        font-weight: 500;
        padding: 6px 10px;
        border-radius: 10px;
        transition: all 0.3s ease;
    }

        .topBarNav a i {
            font-size: 18px;
            margin-bottom: 3px;
        }

        /* Hover effect */
        .topBarNav a:hover {
            color: #ddd;
            background-color: #2a2a2a;
        }

        /* Active tab (manual or via :target) */
        .topBarNav a.active,
        #live:target ~ .topBarNav #link-live,
        #scores:target ~ .topBarNav #link-scores,
        #news:target ~ .topBarNav #link-news,
        #more:target ~ .topBarNav #link-more {
            color: #fff;
            font-weight: 600;
            animation: colorScalePulse 2.5s ease-in-out infinite;
            box-shadow: inset 0 0 8px rgba(255, 255, 255, 0.1);
        }

/*login*/
.login-box {
    background-color: #f9f9f9;
    border-radius: 16px;
    padding: 24px 20px;
    width: 95%;
    max-width: 480px;
    margin: 40px auto;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.42);
    text-align: right;
    direction: rtl;
}

.login-title {
    color: #333;
    margin-bottom: 24px;
    font-size: 22px;
    font-weight: 600;
    text-align: center;
}

.login-label {
    display: block;
    color: #444;
    font-weight: 500;
    margin-bottom: 8px;
    font-size: 15px;
}

.input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}

.input-icon {
    position: absolute;
    right: 12px;
    color: #888;
    font-size: 16px;
}

.toggle-password {
    position: absolute;
    left: 12px;
    cursor: pointer;
    color: #888;
    font-size: 16px;
}

.login-input {
    width: 100%;
    padding: 14px 40px 14px 14px; /* padding right for icon in RTL */
    border: 1px solid #ccc;
    border-radius: 10px;
    font-size: 16px;
    background-color: #fff;
    color: #333;
    outline: none;
    transition: border 0.3s ease;
    text-align: right;
}

    .login-input::placeholder {
        color: #999;
    }

    .login-input:focus {
        border-color: #FF7A01;
        box-shadow: 0 0 0 3px rgba(255, 122, 1, 0.2);
    }

.login-btn {
    width: 100%;
    padding: 14px;
    background-color: #FF7A01;
    border: none;
    color: #fff;
    border-radius: 10px;
    font-size: 17px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s ease;
}

    .login-btn:hover {
        background-color: #e76a00;
        transform: translateY(-2px);
    }

.login-container {
    width: 95%;
    max-width: 500px;
    margin: 40px auto;
    text-align: right;
    direction: rtl;
}

.login-description {
    font-size: 15px;
    color: #555;
    margin-bottom: 12px;
    line-height: 1.6;
    background-color: #f1f1f1;
    padding: 12px 16px;
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

.separator {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 20px 0;
    direction: rtl;
}

    .separator::before,
    .separator::after {
        content: "";
        flex: 1;
        border-bottom: 1px solid #ccc;
    }

    .separator span {
        padding: 0 10px;
        color: #666;
        font-size: 13px;
    }

/* Optional: Secondary button style */
.login-btn.secondary {
    background-color: #f0f0f0;
    color: #333;
    border: 1px solid #ccc;
}

.forgot-password {
    text-align: right;
    margin: 8px 5px 12px;
}

    .forgot-password a {
        color: #FF7A01;
        font-size: 14px;
        text-decoration: none;
        transition: color 0.3s ease;
    }

        .forgot-password a:hover {
            color: #e06900;
        }
/*login*/

/*mobile box*/

.mobile-exclusive-box {
    width: 90%;
    max-width: 400px;
    margin: 80px auto;
    border-radius: 15px;
    padding: 30px;
    text-align: center;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4);
    animation: slideUpIn 0.6s ease forwards;
    direction: rtl;
}

    .mobile-exclusive-box img {
        width: 70px;
        margin-bottom: 15px;
        opacity: 0.9;
    }

    .mobile-exclusive-box h2 {
        font-size: 22px;
        color: #FF7A01;
        margin-bottom: 12px;
    }

    .mobile-exclusive-box p {
        font-size: 14px;
        color: #333;
        margin: 0;
    }

@keyframes slideUpIn {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Hide for non-mobile devices */
@media (min-width: 768px) {
    .mobile-exclusive-box {
        display: none;
    }
}

/*mobile box*/

/*mobile separator*/
.mobile-separator {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin: 25px 0;
    font-weight: bold;
    font-size: 15px;
    color: #FF7A01;
    position: relative;
    opacity: 0;
    animation: fadeIn 1s ease forwards;
}

    .mobile-separator::before,
    .mobile-separator::after {
        content: '';
        flex: 1;
        height: 2px;
        background: linear-gradient(to right, transparent, #FF7A01, transparent);
        margin: 0 12px;
        border-radius: 1px;
    }
/*mobile separator*/

/*whatsapp-share*/
.whatsapp-share {
    color: #25D366;
    font-size: 32px; /* Larger icon */
    z-index: 9999;
    text-align: center;
    transition: transform 0.3s ease-in-out;
}

/*landing orange sports*/

/*.box-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 415px;
    margin: auto;
}*/
.box-container {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-width: 415px;
    width: 100%;
    padding-left: 0px;
    padding-right: 0px;
    box-sizing: border-box;
    margin: auto;
}

.card {
    position: relative;
    padding: 20px;
    color: white;
    text-decoration: none;
    /*clip-path: polygon(0 10px, 100% 0, 100% 95%, 0% 100%);*/
    /*background: linear-gradient(120deg, #1e1e1e, #2e2e2e, #1e1e1e);*/
    background: linear-gradient(-2deg, #fff, #2e2e2e, #1e1e1e);
    background-size: 300% 300%;
    overflow: hidden;
    /*box-shadow: 0 10px 25px rgba(255, 122, 1, 0.35);*/
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    animation: slideInRight 1.2s cubic-bezier(0.23, 1.32, 0.38, 1.12) forwards, colorFlow 6s ease-in-out infinite;
    border-radius: 20px;
}

    /* Delay animation per box */
    .card:nth-child(1) {
        animation-delay: 0.2s;
    }

    .card:nth-child(2) {
        animation-delay: 0.4s;
    }

    .card:nth-child(3) {
        animation-delay: 0.6s;
    }

    .card:nth-child(4) {
        animation-delay: 0.8s;
    }

    .card:hover {
        transform: scale(1.02);
        box-shadow: 0 0 20px rgba(255, 122, 1, 0.4);
    }

    /* Subtle background image layer */
    .card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-size: 100%;
        background-repeat: no-repeat;
        /*        background-position: left;*/
        opacity: 0.08;
        z-index: 0;
    }

    /* Custom background per box */
    .card.Stad::before {
        background-image: url('../images/4.png');
    }

    .card.Dawry::before {
        background-image: url('../images/3.png');
    }

    .card.Abtal::before {
        background-image: url('../images/2.png');
    }

    .card.Ole::before {
        background-image: url('../images/1.png');
    }

.card-content {
    position: relative;
    z-index: 1;
    text-align: right;
}

.card img {
    visibility: hidden;
    width: 50px;
    height: 50px;
    border-radius: 8px;
    background-color: #1e1e1e;
    padding: 4px;
    margin-bottom: 10px;
}

.card h3 {
    margin: 0;
    font-size: 18px;
    color: #FF7A01;
}

.card p {
    margin: 5px 0 0;
    font-size: 13px;
    color: #cccccc;
}

.card::after {
    content: '';
    position: absolute;
    top: 0;
    right: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,122,1,0.3), transparent);
    transform: skewX(20deg);
    transition: all 0.5s ease;
    z-index: 1;
}

.card:hover::after {
    right: 150%;
}

@keyframes colorFlow {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

@keyframes slideInRight {
    0% {
        transform: translateX(300%) scale(0.9);
        opacity: 0;
    }

    50% {
        transform: translateX(-20%) scale(1.1);
        opacity: 1;
    }

    70% {
        transform: translateX(10%) scale(1);
    }

    100% {
        transform: translateX(0%);
        opacity: 1;
    }
}
/*landing orange sport*/

/*copyright*/

.copyright {
    background-color: #1e1e1e;
    padding: 3px 15px;
    direction: rtl;
    text-align: center;
    color: #fff;
    font-size: 14px;
    border-top: 1px solid #2e2e2e;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.4);
    animation: fadeInFooter 0.6s ease-in-out;
}

    .copyright span {
        color: #FF7A01;
        font-weight: bold;
    }

@keyframes fadeInFooter {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

.bgOrange {
    background-color: #fa7703 !important;
}

.w-37 {
    width: 37px !important;
}
/*copyright*/

/*landing2*/

.section {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    color: white;
    text-align: center;
    padding: 70px 15px 30px;
    cursor: pointer;
    transition: transform 0.3s ease;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 180px;
    width: 100vw;
    margin: 0;
}

    .section:hover {
        transform: scale(1.02);
    }

.title {
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 6px;
    text-shadow: 0 1px 4px rgba(0,0,0,0.7);
    z-index: 2;
}

.description {
    font-size: 14px;
    opacity: 0.9;
    max-width: 280px;
    text-shadow: 0 1px 3px rgba(0,0,0,0.6);
    z-index: 2;
}

.icons-bg {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 130%;
    height: 90px;
    background-repeat: no-repeat;
    background-position: center top;
    background-size: contain;
    opacity: 0.25;
    pointer-events: none;
    /*filter: brightness(0) invert(1);*/
    z-index: 1;
}

.section1 {
    background-image: linear-gradient(to right, rgba(241,110, 0.75), rgba(241,110, 0, 0.75)), url('');
}

    .section1 .icons-bg {
        background-image: url('https://orangesportseg.com/assets/images/1.png');
    }

.section2 {
    background-image: linear-gradient(to right, rgba(75, 180, 230, 0.75), rgba(75, 180, 230, 0.85)), url('');
}

    .section2 .icons-bg {
        background-image: url('https://orangesportseg.com/assets/images/2.png');
    }

.section3 {
    background-image: linear-gradient(to right, rgba(51,51,51, 0.75), rgba(51,51,51, 0.85)), url('');
}

    .section3 .icons-bg {
        background-image: url('https://orangesportseg.com/assets/images/3.png');
    }

.section4 {
    background-image: linear-gradient(to right, rgba(0,0,0, 0.75), rgba(0,0,0, 0.85)), url('');
}

    .section4 .icons-bg {
        background-image: url('https://orangesportseg.com/assets/images/4.png');
    }

svg.wave {
    position: absolute;
    left: 0;
    width: 100%;
    height: 40px;
    pointer-events: none;
    z-index: 3;
}

.wave-bottom {
    bottom: 0;
}

.wave-top {
    top: 0;
    transform: rotate(180deg);
    display: none;
}
/*landing2*/