@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

body {
    font-family: "Montserrat", sans-serif;
    font-style: normal;
    margin: 0;
    padding: 0;
    font-size: 14px;
    line-height: 1.6;
    background-color: #020A16;
}


/* Navbar Styles */

#navbar {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: 0.5s;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.12);
    /* 12% opacity */
}

#navbar.sticky {
    position: fixed;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.navbar.sticky {
    top: -1px;
    left: 0;
    width: 100%;
    position: sticky;
    border-radius: 0;
    z-index: 1030;
    box-shadow: 0 2px 28px 0 rgba(0, 0, 0, 0.09);
    animation: 500ms ease-in-out 0s normal none 1 running fadeInDown;
    border-color: transparent;
}


.profile-image {
    width: 50px;
    /* Adjust size as needed */
    height: 50px;
    border-radius: 50%;
    /* Makes the image circular */
    object-fit: cover;
    /* Ensures image covers the area without distortion */
    border: 2px solid #ccc;
    /* Optional: adds a light border */
}

.search-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
    /* make wrapper take full width of parent */
}

.custom-search {
    border: 1px solid white;
    background-color: rgba(255, 255, 255, 0.12);
    border-radius: 40px;
    color: #fff;
    padding: 8px 16px 8px 40px;
    /* extra space on left for icon */
}

.custom-search::placeholder {
    color: #fff;
    opacity: 0.8;
}

.search-icon {
    position: absolute;
    left: 15px;
    /* icon before text */
    top: 50%;
    transform: translateY(-50%);
    color: #fff;
    font-size: 14px;
    pointer-events: none;
}


.form-control:focus {
    color: var(--bs-body-color);
    background-color: rgba(255, 255, 255, 0.12);
    border: 1px solid white;
    outline: 0;
    box-shadow: none;
}

/* Make placeholder text white */
.custom-search::placeholder {
    color: white;
    opacity: 0.8;
    /* slightly lighter */
}


@keyframes fadeInDown {
    0% {
        opacity: 0;
        transform: translate3d(0, -100%, 0);
    }

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

.header .navbar-nav {
    gap: 32px;
}

.header .navbar-brand {
    padding: 0;
}

.secondary-header {
    background: rgba(255, 255, 255, 0.04) !important;
}

.secondary-header a {
    font-size: 16px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8);
    white-space: nowrap;
	text-decoration: none;
	padding: 10px 20px;
    display: inline-block;
}

.secondary-header .nav {
    display: flex;
}

.secondary-header .nav::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari, Opera */
}


.secondary-header .nav-item {
    flex: 0 0 auto;

}


@media (max-width: 768px) {
    .secondary-header .nav {
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 1rem;
        /* add gap between nav items */
        -webkit-overflow-scrolling: touch;
        /* smooth scrolling on iOS */
    }

    .secondary-header .nav-item {
        flex: 0 0 auto;

    }
    .series-fixture-meta {
    border-right: 0px !important;
}
}
/* Modal background */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}

/* Modal content box */
.modal-content {
    background: white;
    border-radius: 12px;
    padding: 30px;
    max-width: 400px;
    margin: auto;
    position: relative;
}

/* Close button */
.close-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    border: none;
    background: none;
    font-size: 20px;
    cursor: pointer;
}

/* Headings */
.modal-content  .popup-title{
    text-align: center;
    font-size: 20px;
}

/* Labels */
.modal-content .input-label {
    font-weight: 600;
    display: block;
    margin-top: 20px;
    text-align: left;
}
.modal-content label
{
        text-align: left;
}
/* Input group */
.input-group {
    display: flex;
    margin-top: 8px;
    margin-bottom: 20px;
}

.country-code {
    padding: 10px 15px;
    background: #f1f1f1;
    border-radius: 6px 0 0 6px;
    border: 1px solid #ddd;
}

.input-group input {
    flex: 1;
    padding: 10px 15px;
    border-radius: 0 6px 6px 0;
    border: 1px solid #ddd;
    border-left: none;
}

/* OTP Button */
.otp-btn {
    width: 100%;
    background: linear-gradient(90deg, #977902 0%, #FFD21D 100%);
    border: none;
    padding: 12px 0;
    border-radius: 30px;
    font-weight: 600;
    cursor: pointer;
    color: black;
}

/* OR Divider */
.or-divider {
    text-align: center;
    margin: 20px 0 10px;
    position: relative;
}

.or-divider span {
    background: white;
    padding: 0 10px;
    position: relative;
    z-index: 1;
}

.or-divider::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    border-top: 1px solid #ddd;
    z-index: 0;
}

/* Social buttons */
.social-buttons {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.social-btn {
    flex: 1;
    padding: 10px 0;
    border-radius: 30px;
    border: 1px solid #ddd;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.social-btn img {
    width: 20px;
    vertical-align: middle;
}

/* Terms text */
.terms-text {
    font-size: 12px;
    text-align: center;
    margin-top: 20px;
}

.terms-text a {
    font-weight: 600;
    color: #000;
    font-size: 14px;
}

.modal {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.5);
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  background: white;
  padding: 30px;
  border-radius: 16px;
  width: 400px;
  position: relative;
  text-align: center;
}

.close-btn {
  position: absolute;
  right: 15px;
  top: 15px;
  border: none;
  background: none;
  font-size: 22px;
  cursor: pointer;
}

.otp-inputs {
  display: flex;

  gap: 10px;
  margin: 15px 0;
}

.otp-inputs input {
  width: 50px;
  height: 45px;
  text-align: center;
  font-size: 18px;
  border-radius: 50%;
  border: 1px solid #ccc;
}

.verify-btn {
  width: 100%;
  padding: 12px;
 background: linear-gradient(90deg, #977902 0%, #FFD21D 100%);
  border: none;
  border-radius: 30px;
  font-weight: bold;
  font-size: 16px;
  cursor: pointer;
}

.resend-text {
  margin: 10px 0 20px;
  font-size: 14px;
}

.resend-text a {
  color: #000;
  text-decoration: none;
}



/* Match Pill Styles */

.match-pill {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 1.2rem;
    padding: 0.5rem 0;

    /* Hide scrollbar for WebKit (Chrome, Safari) */
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* Internet Explorer 10+ */
}

.match-pill::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari */
}


.match-pill-item {
    padding: 10px 20px;
    border-radius: 50px;
    background-color: #18202C;
    color: #fff;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    border: 1px solid rgba(255, 255, 255, 0.12);
    flex: 0 0 auto;
    /* Prevent shrinking in scroll container */
}

.match-pill-rankings {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap:10px;
    padding: 0.5rem 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.ranking-pill-item {
    padding: 10px;
    border-radius: 50px;
    background-color: #18202C;
    color: #fff;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    border: 1px solid rgba(255, 255, 255, 0.12);
    flex: 0 0 auto;
	font-size: 13px;

    /* Prevent shrinking in scroll container */
}


.match-pill-item.active {
    background: linear-gradient(90deg, #977902 0%, #FFD21D 100%);
    color: black;
    font-weight: 700;
}

.ranking-pill-item.active {
    background: linear-gradient(90deg, #977902 0%, #FFD21D 100%);
    color: black;
    font-weight: 700;
}

/* Scrollable pills on mobile */
@media (max-width: 768px) {
    .match-pill {
        overflow-x: auto;
        flex-wrap: nowrap !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        /* Firefox: hide scrollbar */
    }

    .match-pill::-webkit-scrollbar {
        display: none;
        /* Chrome, Safari: hide scrollbar */
    }

    .match-pill-item {
        flex: 0 0 auto;
        /* Prevent shrinking */
        white-space: nowrap;
    }
}

.recent-wrapper {
  overflow: hidden; /* hides both left & right overflow */
  border-radius: 8px; /* keep the rounded look */
   background-color: #18202C;
    color: #fff;
    padding: 20px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);

}

.owl-stage-outer {
  overflow: hidden !important; /* force clip inside carousel viewport */
}

.owl-carousel .owl-stage {
  margin-left: 0 !important; /* prevent left gap */
  margin-right: 0 !important; /* prevent right gap */
}

.owl-item {
  display: flex;
  justify-content: center;
  align-items: center;
}



/* Match Card Styles */

.carousel-wrapper {
    display: flex;
    overflow-x: auto;
    gap: 1rem;
    padding: 1rem 0rem;
    scroll-snap-type: x mandatory;
}

.stories-wrapper {
    display: flex;
    overflow-x: auto;
    gap: 1rem;
    padding: 1rem 0rem;
    scroll-snap-type: x mandatory;
}

.match-card {
    background-color: #fff;
    border-radius: 10px;

    flex-shrink: 0;
    scroll-snap-align: start;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.match-card img {
    width: 100%;
    height: 170px;
    object-fit: cover;
}

.match-card .badge-status {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 4px 10px;
    font-size: 0.75rem;
    border-radius: 8px;
    color: #fff;
}



.match-info {
    padding: 1rem;
}

.match-title {
    font-size: 14px;
    color: #000;
    margin-bottom: 12px;
    font-weight: 400;
}

.match-card .teams-details {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.25rem;
}

.match-card .team {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.match-card .team img {
    width: 24px;
    height: 24px;
    border-radius: 48px;
}

.match-card .team-name {
    font-size: 14px;
    color: #000;
}

.match-card .score {
    font-weight: 600;
}

.match-card .match-summary {
    font-size: 14px;
    font-weight: 500;
}

.match-card .summary-completed {
    color: #28a745;
    font-weight: 600;
}

.match-card .summary-live {
    color: #F14F4F;
    font-weight: 600;
}


.match-card .summary-note {
    color: #dc3545;
}

.match-container .arrow-outside {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background-color: #fff;
    padding: 10px;
    border-radius: 50%;
    cursor: pointer;
    width: 40px;
    height: 40px;
  
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    /* optional shadow for better visibility */
}


/* Remove Owl's default button look */
.owl-carousel .owl-nav button.owl-prev,
.owl-carousel .owl-nav button.owl-next {
    background: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    outline: none !important;
}

/* Remove extra focus outline */
.owl-carousel .owl-nav button:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* Keep your custom arrows as-is */
.date-carousel .arrow-outside {
    background-color: #18202C;
   border: 2px solid #FFD21D;
    
    border-radius: 16px;
    width: 26px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    z-index: 10;
}

/* Position arrows */
.date-carousel .owl-nav .owl-prev {
    position: absolute;
    top: 50%;
    left: -10px;
    transform: translateY(-50%);
}
.date-carousel .owl-nav .owl-next {
    position: absolute;
    top: 50%;
    right: -10px;
    transform: translateY(-50%);
}

/* Position arrows */
.slider5 .owl-nav .owl-prev {
    position: absolute;
    top: 50%;
    left: -10px;
    transform: translateY(-50%);
}
.slider5 .owl-nav .owl-next {
    position: absolute;
    top: 50%;
    right: -10px;
    transform: translateY(-50%);
}

.owl-dots {
  display: none !important;
}

.date-filter-wrapper {
    display: flex;
    align-items: center;       /* vertically center */
    justify-content: center;   /* horizontally center */
    gap: 15px;   
    padding:8px;              /* space between arrows and carousel */
}
.recent-row-wrapper{
    display: flex;
    align-items: center;       /* vertically center */
    justify-content: center; 
}
.date-item {
    padding: 8px 14px;
    border-radius: 20px;
    cursor: pointer;
  
}

.date-item.active {
     background: linear-gradient(90deg, #977902 0%, #FFD21D 100%);
    color: #000; /* text color */
    font-weight: bold;
}

.slider5 .arrow-outside {
   background-color: #18202C;
   border: 2px solid #FFD21D;
    
    border-radius: 16px;
    width: 26px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    z-index: 10;
    /* optional shadow for better visibility */
}

.recent-title {
    display: inline-block; /* so width applies */
    width: 80px; /* adjust as needed */
}
.recent-row-wrapper {
  position: relative; /* Position container */
}

/* Make sure nav is above everything */
.recent-wrapper {
  position: relative;
}

.recent-wrapper .owl-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  pointer-events: none;
}

.recent-wrapper .owl-nav button {
  position: absolute;
  pointer-events: all;
  background: rgba(255, 255, 255, 0.15);
  color: white !important;
  border: none;
  padding: 6px 10px;
  border-radius: 50%;
}

.recent-wrapper .owl-nav .owl-prev {
  left: 5px; /* inside container */
}

.recent-wrapper .owl-nav .owl-next {
  right: 5px; /* inside container */
}


/* Make recent-row-wrapper the positioning container */
.recent-row-wrapper {
  position: relative; /* So nav arrows are placed relative to this */
}

/* Style nav arrows for owl inside recent-row-wrapper */
.recent-row-wrapper .owl-nav {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  pointer-events: none; /* allow dragging */
}

.recent-row-wrapper .owl-nav button.owl-prev,
.recent-row-wrapper .owl-nav button.owl-next {
  background: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  pointer-events: auto;
}

.recent-row-wrapper .owl-nav button.owl-prev:hover,
.recent-row-wrapper .owl-nav button.owl-next:hover {
  background: rgba(0, 0, 0, 0.7);
}



.slider2 .arrow-outside {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background-color: #fff;
    padding: 10px;
    border-radius: 50%;
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    /* optional shadow for better visibility */
}



.match-container .arrow-left {
    left: 10px;

}

.date-carousel .arrow-left {
    left: 0px;
     color: #FFD21D;

}

.date-carousel .arrow-right {
    right: 0px;
      color: #FFD21D;
}

.slider1 .arrow-right {
    right: 0px;
     color: #000;
}


.match-container .arrow-left {
    left: 0px;
    color: #000;
}


.match-container .arrow-right {
    right: 0px;
    color: #000;
}

.match-card .match-image-wrapper {
    position: relative;
}

.match-card .match-image {
    width: 100%;
    height: auto;
}

.match-card .status-tag {
    position: absolute;
    bottom: -10px;
    left: 12px;
    transform: translateY(0);

}

.match-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.match-card {
    cursor: pointer;
}

.match-card .status-tag svg {
    width: 160px
}



/* Latest News Section */

.Latest-news-container {
    background-color: #18202C;
    color: #fff;
    padding: 20px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.section-title {
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 10px;
    padding-left: 0 !important;
    padding-right: 0 !important;
    display: block;
    font-size: 24px;
    font-weight: 600;
    /* spans full width */
    width: 100%;
    /* ensures full width inside container */
    margin-bottom: 1.5rem;
    /* optional spacing */
}

.summary-upcoming {
    color: #000;
}

.summary-Live {
    color: #ED2020;
}

.summary-completed {
    color: #00C334;
}


.main-news-card {
    background-color: rgba(255, 255, 255, 0.08);
    padding: 20px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    align-items: stretch;
    /* Make both image and text div equal height */
}

.main-news-card img.news-image {
    width: 350px;
    height: auto;
    object-fit: cover;
    border-radius: 8px;
    max-height: 100%;
}


.main-news-card .News-heading {
    font-size: 20px;
    font-weight: 600;
}

.grid-news-card-heading {
    font-size: 16px;
    font-weight: 500;
}

.main-news-card .News-description {
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8);
}

.main-news-card .news-date {
    color: rgba(255, 255, 255, 0.8);
    /* Bootstrap's text-muted equivalent */
    font-size: 14px;
    margin-top: 40px;
    /* Adds spacing from content above */
    display: block;
}

.grid-news-card {
    background-color: rgba(255, 255, 255, 0.08);
    padding: 20px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);

    /* Adjust as needed */
    overflow: hidden;
}

.grid-news-card .news-date {
    color: rgba(255, 255, 255, 0.8);
    /* Bootstrap's text-muted equivalent */
    font-size: 14px;
    margin-top: 20px;
    /* Adds spacing from content above */
    display: block;
}

/* Responsive Styles */

@media (max-width: 768px) {
    .main-news-card {
        flex-direction: column;
        text-align: left;
        padding: 16px;
    }

    .main-news-card img.news-image {
        width: 100%;
        max-width: 100%;
        height: auto;
        margin-bottom: 16px;
    }

    .main-news-card h5 {
        font-size: 18px;
    }

    .main-news-card p,
    .news-date {
        font-size: 13px;
    }

    .grid-news-card {
        padding: 16px !important;
    }
}

/* Rankings Section */

.Ranking-container {
    background-color: #18202C;
    color: #fff;
    padding: 20px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.ranking-tab {
    display: flex;
    justify-content: flex-start;
    /* allow scroll instead of space-between */
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    position: relative;

    overflow-x: auto;
    /* enable horizontal scroll */
    overflow-y: hidden;
    /* hide vertical scrollbar */
    white-space: nowrap;
    /* prevent tabs from wrapping */
    scrollbar-width: none;
    /* hide scrollbar in Firefox */
    gap:16px;
}

.ranking-tab::-webkit-scrollbar {
    display: none;
    /* hide scrollbar in Chrome/Safari */
}

.ranking-tab .tab-item {
    text-decoration: none;
    padding: 0.5rem 1rem;
    color: #fff;
    border-bottom: 3px solid transparent;
    transition: all 0.3s ease;
    position: relative;
	border: none;
	background: none;
}

.ranking-tab .tab-item.active {
    position: relative;
    color: #fff;
    font-weight: 500;
}

.ranking-tab .tab-item.active::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    width: 100%;
    background: linear-gradient(90deg, #977902 0%, #FFD21D 100%);
}



.Ranking-table {
    width: 100%;
    border-collapse: collapse;

    border-top: 2px solid rgba(255, 255, 255, 0.1);
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
    border-left: none !important;
    border-right: none !important;
}

.Point-table {
    width: 100%;
    border-collapse: collapse;

    border-top: 2px solid rgba(255, 255, 255, 0.1);
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
    border-left: none !important;
    border-right: none !important;
}


.Point-table th,
.Point-table td {
    border: none !important;
    font-size: 14px;
    padding: 8px !important;
}

.Ranking-table th,
.Ranking-table td {
    border: none !important;
    font-size: 14px;
    padding: 8px !important;
}


.Point-table th {
    font-weight: 600;
}

.Ranking-table th {
    font-weight: 600;
}

.Ranking-table td {
    font-weight: 400;
}


.Ranking-table th:last-child,
.Ranking-table td:last-child {
    text-align: right;
}

.match-info-section .info-heading {
    font-size: 14px;
    font-weight: 600;
}

.match-info-section .info-value {
    font-size: 14px;
    font-weight: 400;
}


/* current Section */

.currentseries-container {
    background-color: #18202C;
    color: #fff;
    padding: 20px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.currentseries-container .list-group-item {
    background-color: rgba(255, 255, 255, 0.08);
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 20px;
    border-radius: 8px;
    display: flex;
    /* Enable flexbox */
    align-items: center;
    /* Vertically center */
    text-align: left;
    /* Left-align the text */
}

.currentseries-container .series-link {
    text-decoration: none;
    color: inherit;
    display: block;
}


.currentseries-container .list-group-item .series-name {
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 0px;

}

.series-news-container {
    background-color: #18202C;
    color: #fff;
    padding: 20px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.series-news-pills {
    display: flex;
    gap: 12px;
    list-style: none;
    padding: 0;
    margin: 0;
    overflow-x: auto;
    /* enable horizontal scrolling */
    white-space: nowrap;
    /* prevent items from wrapping */
    -webkit-overflow-scrolling: touch;
    /* smooth scroll on mobile */
}

/* Hide scrollbar in WebKit browsers */
.series-news-pills::-webkit-scrollbar {
    display: none;
}




.series-news-pill-link {
    display: inline-block;
    padding: 8px 24px;
    border-radius: 48px;
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background-color: rgba(255, 255, 255, 0.08);
    color: #fff;

}

.series-news-pill-link:hover {
    background-color: rgba(255, 255, 255, 0.15);
}



.series-news-status {
    background-color: rgba(255, 255, 255, 0.12);
    color: #fff;
    justify-content: space-between;
}


.series-news-status-custom {
    background-color: rgba(255, 255, 255, 0.12);
    color: #fff;
    justify-content: space-between;
}

.series-news-status-custom .score-details {
    font-size: 16px;
}

.series-news-status .score-details {
    font-size: 16px;
}



.series-news-status-custom .match-result-description {
    font-size: 16px;
}

.series-news-status .match-result-description {
    font-size: 16px;
}

.series-news-status .team-name {
    font-size: 20px;
}

.series-news-timeline {
    text-align: center;
}

.series-news-timeline .status-upcoming-badge {
    background-color: rgba(255, 255, 255, 0.08);
    font-size: 14px;
    padding: 8px;
    border-radius: 4px;
    width: fit-content;
    max-width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 1rem;
}


.series-news-timeline .status-completed-badge {
    background-color: #00C334;
    font-size: 14px;
    padding: 8px;
    border-radius: 4px;
    width: fit-content;
    max-width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 1rem;
}

.series-news-timeline .Match-location-format {
    font-size: 16px;
    margin-bottom: 8px;

}

.series-news-timeline .match-time {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.8);

}

.series-news-status .flag-icon img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

.series-news-status-custom .flag-icon img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

.ads-section-container img {
    max-width: 100%;
    margin: 2rem 0rem;
    border-radius: 12px;
}



.stories-col-card {
    position: relative;
    background: transparent !important;
    /* Force remove background */
    overflow: hidden;
}

.combined-story-card {
    background-color: #18202C;
    color: #fff;


    padding: 2rem;
}

.story-body {
    position: absolute;
    bottom: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    /* 30% black */
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    /* Safari */
    padding: 1rem 0.85rem;
    border-radius: 0 0 1rem 1rem;
    color: #fff;
}

.story-img {
    width: 100%;
    height: auto;
    display: block;
}

.app-store-btn .rounded-pill {
    padding: 0.60rem 2rem;
}

.Top-team-container {
    background-color: #18202C;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.Top-team-card {
    background-color: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;

}

.team-col-body .team-title {
    font-size: 14px;
    font-weight: 500;
}


.Upcoming-match-info{
    background-color: #18202C;
    color: #fff;
    padding: 20px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}


.Upcoming-match-info .match-content{
   border-bottom: 2px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 10px;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.Upcoming-match-info .match-meta {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;

    font-size: 16px;
    margin-top: 10px;
    color: #fff;
    font-weight: 400;
}



.Upcoming-match-info  .match-title {
    font-size: 24px;
    font-weight: 600;
    color: #fff;

}

.Upcoming-match-info .match-result {
    font-size: 16px;
    font-weight: 500;
    color: #fff;

}


.Upcoming-no-data-details {
  display: flex;
  flex-direction: column; /* stack img and h2 vertically */
  justify-content: center; /* vertical center */
  align-items: center;     /* horizontal center */
 
  gap: 15px; /* optional space between image and h2 */
}

.Upcoming-no-data-details h2 {
font-size: 24px;
}


.countdown-container {
  text-align: center;
   margin: 20px auto;
}

.countdown-title {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 10px;
  color: #fff;
  letter-spacing: 1px;
}

.countdown {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  flex-wrap: nowrap;
}

.time-box {

  border-radius: 12px;
  min-width: 70px;
  box-shadow: 0 2px 6px rgb(30 42 68 / 0.3);
  color: #F14F4F;
}

.time-box h2 {
  margin: 0;
  font-size: 2.5rem;
  line-height: 1;
  font-weight: 700;
}

.time-box small {
  display: block;
  margin-top: 5px;
  font-size: 0.85rem;
  font-weight: 600;
  opacity: 0.8;
}

.separator {
  font-size: 2.5rem;
  font-weight: 700;
  color: #F14F4F;
  user-select: none;
  align-self: center;
}


.Live-match-info {
    background-color: #18202C;
    color: #fff;
    padding: 20px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.Live-match-info .match-content {
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 10px;
    padding-left: 0 !important;
    padding-right: 0 !important;

}

.Live-match-info .match-title {
    font-size: 24px;
    font-weight: 600;
    color: #fff;

}

.Live-match-info .match-meta {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;

    font-size: 16px;
    margin-top: 10px;
    color: #fff;
    font-weight: 400;
}

.match-meta p {
    margin: 0;
}

.Live-match-container .match-title {
    font-size: 24px;
    font-weight: 600;
    color: #fff;

}

.Live-match-container .match-result {
    font-size: 16px;
    font-weight: 500;
    color: #fff;

}

.Live-match-container .status-badge {
    background-color: #F14F4F;
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    font-style: italic;
}

.Live-match-container .team-info .team-name {
    font-size: 18px;
    font-weight: 600;
}

.Live-match-container .team-score .score {
    font-size: 18px;
    font-weight: 600;
}

.Live-match-container .team-score {
    gap: 8rem;
}

.commentary-table-section {
    display: flex;
    gap: 20px;
    align-items: center; /* vertically center key stats */
    flex-wrap: wrap; /* stack on mobile */
       justify-content: space-between;
}

/* Left column */
.commentary-table-section .tables-column {
    display: flex;
    flex-direction: column;
    gap: 20px;
 
}

/* Table styling */
.commentary-table-section .table-responsive {
    background: #212E44;
    border-radius: 8px;
    overflow: hidden;
    width: 450px;
}

.commentary-table-section table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.commentary-table-section thead tr.batting-header {
    background: linear-gradient(90deg, #f0c419, #d79d00);
    color: black;
}

.commentary-table-section thead tr.bowling-header {
    background: linear-gradient(90deg, #f0c419, #d79d00);
      color: black;
}

.commentary-table-section thead th {
    padding: 12px 15px;
    text-align: left;
    font-weight: 600;
    font-size: 16px;
}

.commentary-table-section tbody tr {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}


.commentary-table-section tbody td {
    padding: 12px 15px;
    font-size: 14px;
        border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
}

.commentary-table-section tbody td:not(:first-child) {
    text-align: center;
}

.commentary-table-section tbody tr:nth-child(even) {
    background: #222d4a;
}

/* Rounded corners */
.commentary-table-section thead tr th:first-child {
    border-top-left-radius: 8px;
}
.commentary-table-section thead tr th:last-child {
    border-top-right-radius: 8px;
}
.commentary-table-section tbody tr:last-child td:first-child {
    border-bottom-left-radius: 8px;
}
.commentary-table-section tbody tr:last-child td:last-child {
    border-bottom-right-radius: 8px;
}

/* Right column: Key Stats */
.commentary-table-section .key-stats {
    background: #1d2540;
    border-radius: 8px;
    width: 330px;

    display: flex;
    flex-direction: column;
    gap: 10px;
}

.commentary-table-section .key-stats h3 {
    background: linear-gradient(90deg, #4a536a, #3e445d);
    padding: 12px 15px;
    border-radius: 6px;
    margin: 0;
    font-weight: 600;
}

.commentary-table-section .stat-row {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #273044;
    padding: 12px;
    font-size: 14px;
}

.commentary-table-section .stat-row:last-child {
    border-bottom: none;
}

.commentary-table-section .stat-label {
    opacity: 0.7;
}

.commentary-table-section .stat-value {
    text-align: right;
    max-width: 60%;
}

/* Responsive: stack on small screens */
@media (max-width: 768px) {
    .commentary-table-section {
        flex-direction: column;
        align-items: flex-start;
    }

    .commentary-table-section .table-responsive,
    .commentary-table-section .key-stats {
        width: 100%;
    }
}


/* Key Stats */


/* completd-match-container */



.completed-match-info {
    background-color: #18202C;
    color: #fff;
    padding: 20px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.completed-match-info .match-content {
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 10px;
    padding-left: 0 !important;
    padding-right: 0 !important;

}

.completed-match-info .match-title {
    font-size: 24px;
    font-weight: 600;
    color: #fff;

}

.completed-match-info .match-meta {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;

    font-size: 16px;
    margin-top: 10px;
    color: #fff;
    font-weight: 400;
}

.match-meta p {
    margin: 0;
}

.completed-match-container .match-title {
    font-size: 24px;
    font-weight: 600;
    color: #fff;

}

.completed-match-container .match-result {
    font-size: 16px;
    font-weight: 500;
    color: #fff;

}

.completed-match-container .status-badge {
    background-color: #14B305;
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    font-style: italic;
}

.completed-match-container .team-info .team-name {
    font-size: 18px;
    font-weight: 600;
}

.completed-match-container .team-score .score {
    font-size: 18px;
    font-weight: 600;
}

.completed-match-container .team-score {
    gap: 8rem;
}

.completed-match-recent {
    background-color: #18202C;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.recent-overs-container {

    border-radius: 50px;
}

.completed-match-recent .recent-title {
    font-weight: bold;
    font-size: 16px;
    white-space: nowrap;
}

.completed-match-recent .over-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    border-right: 1px solid #fff;
    padding-right: 16px;
}

.completed-match-recent .over-number {
    font-size: 16px;
    color: #fff;
    margin-bottom: 6px;
}

.completed-match-recent .over-ball {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin: 2px;
    background-color: #2c2d34;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.completed-match-recent .green-ball {
    background-color: #14B305;
}

.completed-match-recent .red-wicket{
    background-color: #F14F4F;
}

.completed-match-recent .gray-ball {
    background-color: #636366;
}

@media (max-width: 768px) {
    .completed-match-container .match-title {
        font-size: 16px;



    }

    .completed-match-container .match-result {
        font-size: 18px;


    }

    .completed-match-container .team-score {
        gap: 1rem;
        flex-direction: row;
        flex-wrap: nowrap !important;
    }

    .completed-match-container .status-badge {
        background-color: #14B305;
        padding: 8px 16px;
        border-radius: 4px;
        font-size: 14px;
        font-weight: 500;
        font-style: italic;
    }

    .completed-match-container .team-info .team-name {
        font-size: 18px;
        font-weight: 600;
    }

    .completed-match-container .team-score .score {
        font-size: 14px;
        font-weight: 600;
        text-align: right;
    }
}


.Upcoming-match-info {
    background-color: #18202C;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 1rem;
}

.custom-series-container{
    background-color: #18202C;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
  
}

.series-fantasy-wrapper-container{
      background-color: #18202C;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
  
}
.match-details-container {
    background-color: #18202C;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 1rem;
}

.match-tab-wrapper {
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Firefox */
}

.match-tab-wrapper::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari */
}

/* Remove default Owl styles */


/* Hide disabled arrows */


.date-filter{
    background-color: rgba(255, 255, 255, 0.12);
}
.match-nav-tabs {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
}

.form-flex {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
}



/* Custom Select Box */
.custom-select-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #18202C;
    color: #ccc;
    padding: 0 14px;
    border: 1px solid #444;
    border-radius: 40px;
    height: 40px;
    min-width: 220px;
    cursor: pointer;
}

.custom-select-box i {
    font-size: 14px;
    color: #aaa;
}

/* Dropdown Panel */
.dropdown-panel {
    display: none;
    position: absolute;
background-color: #18202C;
    border: 1px solid #444;
    border-radius: 6px;
    margin-top: 4px;
    z-index: 10;
    min-width: 200px;
}

.dropdown-option {
    padding: 8px 14px;
    color: #fff;
    cursor: pointer;
}

.dropdown-option:hover {
background-color: rgba(255, 255, 255, 0.12);
}

/* Clear Button */
.btn-clear {
  background-color: rgba(255, 255, 255, 0.12);
    color: #fff;
    border: none;
    height: 40px;
    padding: 0 20px;
    border-radius: 40px;
    cursor: pointer;
    font-weight: 500;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.form-flex-new {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
}

/* Custom Select Box */
.custom-select-box-new {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #18202C;
    color: #ccc;
    padding: 0 14px;
    border: 1px solid #444;
    border-radius: 40px;
    height: 40px;
    min-width: 140px;
    cursor: pointer;
}

.custom-select-box-new i {
    font-size: 14px;
    color: #aaa;
}

/* Dropdown Panel */
.dropdown-panel-new {
    display: none;
    position: absolute;
    background-color: #18202C;
    border: 1px solid #444;
    border-radius: 6px;
    margin-top: 4px;
    z-index: 10;
    min-width: 200px;
}

.dropdown-option-new {
    padding: 8px 14px;
    color: #fff;
    cursor: pointer;
}

.dropdown-option-new:hover {
    background-color: rgba(255, 255, 255, 0.12);
}

/* Clear Button */
.btn-clear-new {
    background-color: rgba(255, 255, 255, 0.12);
    color: #fff;
    border: none;
    height: 40px;
    padding: 0 20px;
    border-radius: 40px;
    cursor: pointer;
    font-weight: 500;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.fixture-flex {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
}

.fixture-d-flex {
    display: flex;
}

.fixture-flex-wrap {
    flex-wrap: wrap;
}

.fixture-gap-3 {
    gap: 12px; /* or whatever you want */
}

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

.fixture-p-4 {
    padding: 16px 0px; /* assuming p-4 means 16px padding */
}


/* Custom Select Box */
.fixture-select-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #18202C;
    color: #ccc;
    padding: 0 16px;
    border: 1px solid #444;
    border-radius: 40px;
    height: 40px;
    min-width: 340px;
    cursor: pointer;
}

.fixture-select-box i {
    font-size: 14px;
    color: #aaa;
}

/* Dropdown Panel */
.fixture-dropdown-panel {
    display: none;
    position: absolute;
    background-color: #18202C;
    border: 1px solid #444;
    border-radius: 6px;
    margin-top: 4px;
    z-index: 10;
    min-width: 200px;
}

/* Dropdown Option */
.fixture-dropdown-option {
    padding: 8px 14px;
    color: #fff;
    cursor: pointer;
}

.fixture-dropdown-option:hover {
    background-color: rgba(255, 255, 255, 0.12);
}

/* Clear Button */
.fixture-btn-clear {
    background-color: rgba(255, 255, 255, 0.12);
    color: #fff;
    border: none;
    height: 40px;
    padding: 0 20px;
    border-radius: 40px;
    cursor: pointer;
    font-weight: 500;
    border: 1px solid rgba(255, 255, 255, 0.12);
}


/* Toggle Button (Hidden on Desktop) */
.filter-toggle {
    display: none;
}


.match-tab-wrapper .custom-tab {
    display: inline-block;
    padding: 10px 14px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    border-radius: 48px;
    white-space: nowrap;
    transition: all 0.3s ease;
    background-color: transparent;
}


.custom-tab.active {
    background: linear-gradient(90deg, #977902 0%, #FFD21D 100%);
    color: black;
    font-weight: 700;
}

.series-news-status {
    display: flex;
    flex-wrap: nowrap;
    gap: 1rem;
}

.custom-series-tab-wrapper{
     border-bottom: 2px solid rgba(255, 255, 255, 0.1);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.custom-series-tab-wrapper::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari */
}

.custom-series-nav-tabs {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
}


.Ranking-team-table .series-info {
    font-size: 14px;
    color: #fff;
  align-items: center;
  gap:10px;
   justify-content: center;
    display: flex;
    flex-direction: column; /* Stack items vertically */
}

.Ranking-team-table .series-info .match-stats {
   background-color: rgba(255, 255, 255, 0.12);
   width: fit-content;
   align-items: center;
   justify-content: center;
   padding: 4px 8px;
   border: 1px solid rgba(255, 255, 255, 1);
   border-radius: 20px;
}
.custom-series-tab-wrapper .custom-series-option {
    display: inline-block;
    padding: 10px 14px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    border-radius: 48px;
    white-space: nowrap;
    transition: all 0.3s ease;
    background-color: transparent;
}


.custom-series-option.active {
    background: linear-gradient(90deg, #977902 0%, #FFD21D 100%);
    color: black;
    font-weight: 700;
}


/* Mobile responsiveness */
@media (max-width: 992px) {
    .custom-tab {
        padding: 0.5rem 1rem;
        font-size: 14px;
    }

    .match-nav-tabs {
        gap: 8px;
    }

    .series-news-status .flag-icon img {
        width: 50px;
        height: 50px;
        border-radius: 50%;
    }


}

/* Default - Desktop stays the same */
.series-news-status {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Mobile only */
@media (max-width: 768px) {

    /* Container for the match block */
    .series-news-status-custom {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    /* Badge first */
    .series-news-status-custom .status-completed-badge {
        order: 1;
        text-align: center;

    }

    /* First team row */
    .series-news-status-custom .flag-icon:first-of-type {
        order: 2;
    }

    /* Second team row */
    .series-news-status-custom .flag-icon:last-of-type {
        order: 3;
    }

    /* Description last */
    .series-news-status-custom .match-result-info {
        order: 4;
        text-align: left;
    }

    /* Align flag + team + score */
    .series-news-status-custom .flag-icon {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }

    .series-news-status-custom .flag-icon img {
        flex-shrink: 0;
        margin-right: 8px;
    }

    /* Team name and score in one row */
    .series-news-status-custom .team-details {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex: 1;
        flex-direction: row !important;
    }

    .series-news-status-custom .team-name {
        font-weight: bold;
    }

    .series-news-status-custom .score-details {
        text-align: right;
    }
}




@media (max-width: 768px) {
    .custom-tab {
        padding: 0.5rem 1rem;
        font-size: 14px;
    }

    .match-nav-tabs {
        gap: 8px;
    }

    .series-news-status .flag-icon img {
        width: 20px;
        height: 20px;
        border-radius: 50%;

    }

    .series-news-status-custom .flag-icon img {
        width: 20px;
        height: 20px;
        border-radius: 50%;

    }

    .match-location-format {
        font-size: 12px;
    }





    .series-news-timeline .match-time {
        font-size: 10px;
        color: rgba(255, 255, 255, 0.8);

    }

}

/* scorecard table */

/* When the toggle is NOT collapsed (i.e., open), rotate the chevron */
.accordion-toggle:not(.collapsed) .toggle-icon {
    transform: rotate(180deg);
}

.accordion-toggle {
    border: 1px solid rgba(255, 255, 255, 0.12);
    background-color: #18202C;
    padding: 1rem 1rem;
}

.squads-section .accordion-toggle {
    border: 1px solid rgba(255, 255, 255, 0.12);
    background-color: #18202C;
    padding: 1rem 1rem;
}

/* Apply the gradient to the entire header row */
.table-responsive {
    max-width: 100%;
    overflow-x: auto;

    border-radius: 10px;

}

.Ranking-Bowling-table{
     width: 100%;
    border-collapse: collapse;
    color: #fff;
}

.series-archive-table {
    width: 100%;
    border-collapse: collapse;
    color: #fff;
}

.series-Team-stats-table {
    width: 100%;
    border-collapse: collapse;
    color: #fff;
}


.series-bowler-table {
    width: 100%;
    border-collapse: collapse;
    color: #fff;
}
.batting-table {
    width: 100%;
    border-collapse: collapse;
    color: #fff;
}

.Point-table {
    width: 100%;
    border-collapse: collapse;
    color: #fff;
}

.Ranking-all-rounder-table{
    width: 100%;
    border-collapse: collapse;
    color: #fff;
}
.Point-Form-table {
    width: 100%;
    border-collapse: collapse;
    color: #fff;
}

.series-batting-table {
    width: 100%;
    border-collapse: collapse;
    color: #fff;
}

.Ranking-Batting-table {
    width: 100%;
    border-collapse: collapse;
    color: #fff;
}


.player-info-table {
    width: 100%;
    border-collapse: collapse;
    color: #fff;
}

.Ranking-team-tablee {
    width: 100%;
    border-collapse: collapse;
    color: #fff;
}

.Ranking-all-rounder-table thead tr {
    background: linear-gradient(90deg, #977902 0%, #FFD21D 100%) !important;
}
.Ranking-Bowling-table thead tr {
    background: linear-gradient(90deg, #977902 0%, #FFD21D 100%) !important;
}
.series-bowler-table thead tr {
    background: linear-gradient(90deg, #977902 0%, #FFD21D 100%) !important;
}

.series-archive-table thead tr {
    background: linear-gradient(90deg, #977902 0%, #FFD21D 100%) !important;
}

.series-Team-stats-table thead tr {
    background: linear-gradient(90deg, #977902 0%, #FFD21D 100%) !important;
}


.Point-table thead tr {
    background: linear-gradient(90deg, #977902 0%, #FFD21D 100%);
}

.Point-Form-table thead tr {
    background: rgba(255, 255, 255, 0.30);
}

.batting-table thead tr {
    background: linear-gradient(90deg, #977902 0%, #FFD21D 100%);
}

.Ranking-Batting-table thead tr {
    background: linear-gradient(90deg, #977902 0%, #FFD21D 100%);
}


.Ranking-team-table thead tr {
    background: linear-gradient(90deg, #977902 0%, #FFD21D 100%);
}

.player-info-table thead tr {
    background: linear-gradient(90deg, #977902 0%, #FFD21D 100%);
}

.series-batting-table thead tr {
    background: linear-gradient(90deg, #977902 0%, #FFD21D 100%);
}

.Point-table th:first-child {
    text-align: left;
}

.series-bowler-table th:first-child {
    text-align: left;
}

.Ranking-Bowling-table th:first-child {
    text-align: left;
}

.series-Team-stats-table th:first-child {
    text-align: left;
}

.batting-table th:first-child {
    text-align: left;
}

.Ranking-Batting-table th:first-child {
    text-align: left;
}

.series-batting-table th:first-child {
    text-align: left;
}

.Ranking-all-rounder-table th:first-child {
    text-align: left;
}
.Ranking-Bowling-table th {
    color: black;
    font-weight: bold;
    padding: 12px 10px;
    text-align: center;
    font-size: 16px;
    background: transparent;
}
.Ranking-all-rounder-table th {
    color: black;
    font-weight: bold;
    padding: 12px 10px;
    text-align: center;
    font-size: 16px;
    background: transparent;
}
.series-Team-stats-table th {
    color: black;
    font-weight: bold;
    padding: 12px 10px;
    text-align: center;
    font-size: 16px;
    background: transparent;
}

.series-bowler-table th {
    color: black;
    font-weight: bold;
    padding: 12px 10px;
    text-align: center;
    font-size: 16px;
    background: transparent;
}
.series-batting-table th {
    color: black;
    font-weight: bold;
    padding: 12px 10px;
    text-align: center;
    font-size: 16px;
    background: transparent;
}

.Point-table th {
    color: black;
    font-weight: bold;
    padding: 12px 10px;
    text-align: center;
    font-size: 16px;
    background: transparent;
}

.Point-Form-table th {
    color: #fff;
    font-weight: bold;
    padding: 12px 10px;
    text-align: center;
    font-size: 16px;
    background: transparent;
}
.match-opponent-details {
    padding: 8px 12px;
    color: #fff;
    background-color: #1F2630;
    font-size: 14px;
    line-height: 1.4;
}

.match-opponent-name {
    display: block; /* forces it onto its own line */
    font-weight: 500;
}

.match-outcome {
    display: block; /* forces below opponent name */
    font-size: 13px;
    margin-top: 4px;
}
.Ranking-Batting-table th {
    color: black;
    font-weight: bold;
    padding: 12px 10px;
    text-align: center;
    font-size: 16px;
    background: transparent;
}

.Ranking-team-table th {
    color: black;
    font-weight: bold;
    padding: 12px 10px;
    text-align: center;
    font-size: 16px;
    background: transparent;
}

.batting-table th {
    color: black;
    font-weight: bold;
    padding: 12px 10px;
    text-align: center;
    font-size: 16px;
    background: transparent;
    /* important */
}

.player-info-table th {
    color: black;
    font-weight: bold;
    padding: 12px 10px;
    text-align: center;
    font-size: 16px;
    background: transparent;
    /* important */
}

.series-batting-table th {
    color: black;
    font-weight: bold;
    padding: 12px 10px;
    text-align: center;
    font-size: 16px;
    background: transparent;
    /* important */
}

.Ranking-all-rounder-table th,
.Ranking-all-rounder-table td {
    border-bottom-width: 0 !important;
    /* Overrides Bootstrap */
}
.series-Team-stats-table th,
.series-Team-stats-table td {
    border-bottom-width: 0 !important;
    /* Overrides Bootstrap */
}

.Ranking-Bowling-table th,
.Ranking-Bowling-table td {
    border-bottom-width: 0 !important;
    /* Overrides Bootstrap */
}

.series-bowler-table th,
.series-bowler-table td {
    border-bottom-width: 0 !important;
    /* Overrides Bootstrap */
}

.Point-table th,
.Point-table td {
    border-bottom-width: 0 !important;
    /* Overrides Bootstrap */
}

.batting-table th,
.batting-table td {
    border-bottom-width: 0 !important;
    /* Overrides Bootstrap */
}

.Ranking-Batting-table th,
.Ranking-Batting-table td {
    border-bottom-width: 0 !important;
    /* Overrides Bootstrap */
}

.series-batting-table th,
.series-batting-table td {
    border-bottom-width: 0 !important;
    /* Overrides Bootstrap */
}


.player-info-table th,
.player-info-table td {
    border-bottom-width: 0 !important;
    /* Overrides Bootstrap */
}

.Ranking-team-table th,
.Ranking-team-table td {
    border-bottom-width: 0 !important;
    /* Overrides Bootstrap */
}
.series-archive-table th,
.series-archive-table td {
    border-bottom-width: 0 !important;
    /* Overrides Bootstrap */
}

.Ranking-all-rounder-table td {
    padding: 12px 10px;
    border-style: solid;
    border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
    background-color: #212E44;
    color: #fff;
    text-align: center;
}
.Ranking-Bowling-table  td {
    padding: 12px 10px;
    border-style: solid;
    border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
    background-color: #212E44;
    color: #fff;
    text-align: center;
}
.series-Team-stats-table  td {
    padding: 12px 10px;
    border-style: solid;
    border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
    background-color: #212E44;
    color: #fff;
    text-align: center;
}
.series-archive-table td {
    padding: 12px 10px;
    border-style: solid;
    border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
    background-color: #212E44;
    color: #fff;
    text-align: center;
}
.series-bowler-table  td {
    padding: 12px 10px;
    border-style: solid;
    border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
    background-color: #212E44;
    color: #fff;
    text-align: center;
}

.Point-table td {
    padding: 12px 10px;
    border-style: solid;
    border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
    background-color: #212E44;
    color: #fff;
    text-align: center;
}
.batting-table td {
    padding: 12px 10px;
    border-style: solid;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    background-color: #212E44;
    color: #fff;
    text-align: center;
}

.Point-Form-table td {
    padding: 12px 10px;
    border-style: solid;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    background-color: rgba(255, 255, 255, 0.04);
    color: #fff;
    text-align: center;
}

.Ranking-Batting-table td {
    padding: 12px 10px;
    border-style: solid;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    background-color: #212E44;
    color: #fff;
    text-align: center;
}

.Ranking-team-table td {
    padding: 12px 10px;
    border-style: solid;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    background-color: #212E44;
    color: #fff;
    text-align: center;
}

.player-info-table td {
    padding: 12px 10px;
    border-style: solid;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    background-color: #212E44;
    color: #fff;
    text-align: center;
}


.series-batting-table td {
    padding: 12px 10px;
    border-style: solid;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    background-color: #212E44;
    color: #fff;
    text-align: center;
}

.series-batting-table td:first-child,
.series-batting-table td:nth-child(2) {
    text-align: left;
}


.batting-table td:first-child,
.batting-table td:nth-child(2) {
    text-align: left;
}

.player-info-table td:first-child {
    text-align: left;
}

.Ranking-Bowling-table td:first-child {
    text-align: left;
}

.Ranking-all-rounder-table td:first-child {
    text-align: left;
}
.series-archive-table td:first-child {
    text-align: left;
}
.series-archive-table td:last-child {
    text-align: right;
}

.series-bowler-table td:first-child {
    text-align: left;
}

.series-Team-stats-table td:first-child {
    text-align: left;
}

.Point-table td:first-child {
    text-align: left;
}

.Ranking-Batting-table td:first-child {
    text-align: left;
}

.Ranking-team-table td:first-child {
    text-align: left;
}

.series-batting-table th:first-child,
.series-batting-table th:nth-child(2) {
    text-align: left;
}

.player-info-table th:first-child {
    text-align: left;
}


.Ranking-team-table th:first-child {
    text-align: left;
}

.batting-table tr:last-child td {
    border-bottom: none;
}

.batting-table .player-name {
    font-weight: 500;
    color: #fff;
}

.batting-table .dismissal-info {
    font-style: italic;
    color: #ccc;
}

.batting-table tr:nth-child(even) td {
    background-color: #212E44;
}

.batting-table td[colspan="6"] {
    font-weight: 500;
    color: #ccc;
}

.batting-table tr:last-child td {
    font-weight: bold;
    font-size: 16px;
    color: white;
}

.fall-of-wicket-section {
    background-color: #212E44;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 1rem;
}

.fall-of-wicket-title {
    font-size: 16px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.12);
    padding: 8px 0px;
}

.fall-of-wicket-description {
    font-size: 14px;

}

.fow-item {
    display: inline-block;
    margin-right: 10px;
}

.Point-table .form-description {
    display: flex;
    gap: 6px;
    justify-content: center;
    align-items: center;
}

.Point-table .result {
    display: inline-block;
    width: 24px;
    height: 24px;
    text-align: center;
    line-height: 24px;
    border-radius: 4px;
    font-weight: bold;
    color: white;
}

.Point-table .result.win {
    background-color: #28a745;
    /* green */
}

.Point-table .result.loss {
    background-color: #dc3545;
    /* red */
}

.Point-table .result.tie {
    background-color: #ffc107;
    /* yellow */
    color: black;
}

.bowling-table {
    width: 100%;
    border-collapse: collapse;
    color: #fff;
}

.bowling-table thead tr {
    background: linear-gradient(90deg, #977902 0%, #FFD21D 100%);
}

.bowling-table th:first-child {
    text-align: left;
}

.bowling-table th {
    color: black;
    font-weight: bold;
    padding: 12px 10px;
    text-align: center;
    font-size: 16px;
    background: transparent;
    /* important */
}

.bowling-table th,
.bowling-table td {
    border-bottom-width: 0 !important;
    /* Overrides Bootstrap */
}

.bowling-table td {
    padding: 12px 10px;
    border-style: solid;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    background-color: #212E44;
    color: #fff;
    text-align: center;
}

.bowling-table td:first-child {
    text-align: left;
}


.bowling-table tr:last-child td {
    border-bottom: none;
}

.bowling-table .player-name {
    font-weight: 500;
    color: #fff;
}

.bowling-table .dismissal-info {
    font-style: italic;
    color: #ccc;
}

.bowling-table tr:nth-child(even) td {
    background-color: #212E44;
}

.bowling-table td[colspan="6"] {
    font-weight: 500;
    color: #ccc;
}

.bowling-table tr:last-child td {
    font-weight: bold;
    font-size: 16px;
    color: white;
}


.match-details-box {
    background-color: #212E44;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.match-details-box .info-row {
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.weather-report-box {
    background-color: #212E44;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.pitch-condition-box {
    background-color: #212E44;
    border-radius: 12px;

    border: 1px solid rgba(255, 255, 255, 0.12);
}


.stats-card {
    background-color: #212E44;
    border-radius: 10px;
    padding-bottom: 20px;
    padding-left: 0;
    padding-right: 0;

}

.stats-header {
    background: linear-gradient(to right, #f7c400, #fcb900);
    color: #000;
    font-weight: 500;
    text-align: center;
    padding: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.stats-list {
    padding: 15px;
}

.stats-item {
    display: block;
    width: 100%;
    background-color: #212E44;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    color: #fff;
    padding: 8px 12px;
    margin-bottom: 8px;
    text-align: center;
    transition: 0.2s;
}

.stats-item:hover {
    background-color: #2d313a;
    color: #f7c400;
}

.Live-score-info {
    background-color: #18202C;
    color: #fff;
    padding: 20px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}


.scehdule-info {
    background-color: #18202C;
    color: #fff;
    padding: 20px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.Live-score-details-container {
    background-color: #18202C;
    color: #fff;
    padding: 20px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.Live-score-tab-wrapper {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    overflow-x: auto;
    /* Enable horizontal scrolling */
    white-space: nowrap;
    /* Prevent tab wrapping */
    -webkit-overflow-scrolling: touch;
    /* Smooth scroll on mobile */
}

.Live-score-nav-tabs {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: nowrap;
    gap: 12px;
}

.Live-score-tab-item {
    flex: 0 0 auto;
}

.Live-score-option {
    display: inline-block;
    padding: 0.75rem 1.3rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    border-radius: 48px;
    white-space: nowrap;
    transition: all 0.3s ease;
    font-size: 16px;
    background-color: transparent;
}

.Live-score-option.active {
    background: linear-gradient(90deg, #977902 0%, #FFD21D 100%);
    color: black;
    font-weight: 700;
}

.over-section {
    padding: 0;
    margin: auto;
}

.commentary-wrapper {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none; /* hide scrollbar in Firefox */
}

.commentary-wrapper::-webkit-scrollbar {
    display: none; /* hide scrollbar in Chrome/Safari */
}

.commentary-tab-item {
    flex: 0 0 auto; /* prevent shrinking */
}

.commentary-tab-item {
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 8px;
  background-color: #212E44;
  
    border: 1px solid rgba(255, 255, 255, 0.12);
  
}
.commentary-tab-label {
    display: flex;
    flex-direction: column; /* stack top & bottom */
    line-height: 1.2;
}
.commentary-wrapper a {
    text-decoration: none;
    color: inherit;
    display: flex; /* keep layout intact */
    align-items: center;
    padding: 8px 16px;
}

.commentary-tab-item {
    display: flex;
    align-items: center;
    gap: 16px; /* space between text and icon */
}




.commentary-tab-item.active {
    border: 1px solid rgba(255, 255, 255, 1);
}




.innings-title {
    font-weight: 600;
}

.commentary-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.commentary-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background-color: #212E44;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    
}

.commentary-row .ball-info {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    flex-wrap: wrap; /* keeps it responsive */
}

.commentary-row .over-number {
    font-weight: bold;
    min-width: 40px;
    text-align: center;
}

.commentary-row .ball-result {
    width: 32px;
    height: 32px;
    border: 1px solid #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    background-color: transparent;
}

.commentary-text {
    flex: 1;
    line-height: 1.4;
}

.over-summary {
    margin-left: 0px; /* indent from ball info */
    background: rgba(255, 255, 255, 0.05);
    padding: 10px;
    border-radius: 6px;
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

@media (max-width: 768px) {
    .over-summary {
        grid-template-columns: repeat(2, 1fr); /* 2 items per row on mobile */
            gap: 16px 0px;
    }
}


.over-summary .summary-item {
    margin-bottom: 4px;
   border-right: 1px solid rgba(255, 255, 255, 0.12);
     padding: 8px;
}

.over-summary .summary-item {
    margin-bottom: 4px;
    border-right: 1px solid rgba(255, 255, 255, 0.12);
    padding: 8px;
}

/* Mobile: bottom border instead of right */
@media (max-width: 768px) {
    .over-summary .summary-item {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    }
    /* Optional: remove bottom border from last item */
    .over-summary .summary-item:last-child {
        border-bottom: none;
    }
}

.over-summary .summary-item:last-child {
    border-right: none;
}

.over-summary .label {
    font-weight: bold;
    display: block;
}

.over-summary .value {
    display: block;
}






/* Tabs */
.over-tab-wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: 2rem;


}

.over-tab-buttons {
    display: flex;
    justify-content: center;
    gap: 16px;
    list-style: none;
    padding: 0;
    margin: 0;
    flex-wrap: wrap;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 40px;
}

@media (max-width: 768px) {
    .over-tab-wrapper {
        overflow-x: auto; /* enable horizontal scroll */
        -webkit-overflow-scrolling: touch; /* smooth iOS scroll */
        scrollbar-width: none; /* hide scrollbar Firefox */
    }

    .over-tab-wrapper::-webkit-scrollbar {
        display: none; /* hide scrollbar Chrome/Safari */
    }

    .over-tab-buttons {
        flex-wrap: nowrap; /* keep in single row */
        gap: 12px;
        padding: 8px;
        min-width: max-content; /* prevent shrinking */
    }

    .over-tab-item {
        flex: 0 0 auto; /* no shrinking */
        white-space: nowrap; /* keep text in one line */
    }
}



.over-tab-buttons a {
    text-decoration: none;
}

.over-tab-item {
    padding: 8px 20px;
    background-color: #18202C;
    border-radius: 20px;
    color: #fff;
    text-decoration: none;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}

.over-tab-item.active {
    border: 1px solid rgba(255, 255, 255, 1);
    background-color: rgba(255, 255, 255, 0.12);
}


/* Over Cards */
.over-card {
    background-color: #1b2a3a;
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 12px;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    flex-wrap: wrap;
}

.over-card .over-info {
    min-width: 90px;
    border-right: 1px solid rgba(255, 255, 255, 0.12);
   
    padding: 6px 8px;
  
    display: flex;
    flex-direction: column;
   gap: 10px;
}

.over-card .over-number {
    font-weight: bold;
    font-size: 16px;
}

.over-runs {
    font-size: 14px;
    color: #fff; /* brighter for visibility */
    background-color: rgba(255, 255, 255, 0.2); /* slightly stronger */
    border-radius: 40px;
    padding: 4px 10px; /* space inside the pill */
    display: inline-block; /* keeps it tight around text */
    font-weight: 500; /* makes it stand out */
}
.over-right {
    flex-grow: 1;
}

.over-title {
    font-size: 15px;
    margin-bottom: 8px;
}

.over-balls {
    display: flex;
    gap: 8px;
}

.ball-wrapper {
    display: flex;
    flex-direction: column; /* stack W above number */
    align-items: center;
    gap: 8px;
}


.ball-wrapper .ball {
    background-color: #243447;
    width: 32px;        /* equal width */
    height: 32px;       /* equal height */
    border-radius: 50%; /* perfect circle */
    font-size: 14px;
    color: white;
    display: flex;      /* center text horizontally */
    align-items: center;/* center text vertically */
    justify-content: center;
    font-weight: 500;
}

.ball-wrapper .ball-four {
    background-color: #14B305;
    color: white;
}

.ball-wrapper .ball-no-run {
    background-color: #243447;
    color: white;
}

.ball-wrapper .ball-wicket {
    background-color: #e74c3c;
    color: white;
}

@media (max-width: 768px) {
    .over-card {
        flex-wrap: nowrap;     /* keep in one row */
        gap: 8px;               /* reduce space between items */
        padding: 8px;           /* smaller padding */
    }

    .over-card .over-info {
        min-width: 60px;       /* smaller fixed width */
        padding: 4px 6px;
        border-right: 1px solid #fff;
    }

    .over-title {
        font-size: 13px;       /* smaller text */
        margin-bottom: 4px;
    }

    .over-number {
        font-size: 14px;
    }

    .over-balls {
        gap: 4px;              /* tighter ball spacing */
    }

    .ball-wrapper .ball {
        width: 26px;           /* smaller circle */
        height: 26px;
        font-size: 12px;
    }

    .over-runs {
        font-size: 12px;
        padding: 2px 6px;
    }
}


.load-more-wrapper {
    text-align: center;
    margin-top: 20px;
}

.load-more-btn {
    background-color: #243447;
    color: #fff;
    border: none;
    padding: 10px 24px;
    border-radius: 30px;
    cursor: pointer;

}

.load-more-btn:hover {
    background-color: #2e3a4e;
}



.section-heading {
    color: white;
    font-weight: 600;
}

.squads-container .team-box {
    background-color: #212E44;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.12);

}

.squads-container .team-title {
    color: white;
    font-weight: bold;
    font-size: 20px;
    margin-bottom: 0.5rem;
}

.player-row {
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.player-item {
    padding: 8px 0;
    color: white;
}


.player-name {
    font-size: 0.95rem;
    font-weight: 500;
}

.player-icon svg {
    width: 16px;
    height: 16px;
    color: #fff;
}


.series-tab-wrapper {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    overflow-x: auto;
    /* Enable horizontal scrolling */
    white-space: nowrap;
    /* Prevent tab wrapping */
    -webkit-overflow-scrolling: touch;
    /* Smooth scroll on mobile */
}

.series-tab-wrapper::-webkit-scrollbar {
    display: none;
    /* Hide scrollbar in WebKit browsers */
}

.series-nav-tabs {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: nowrap;
    gap: 12px;
}

.series-tab-item {
    flex: 0 0 auto;
}

.series-tab-wrapper .custom-tab {
    display: inline-block;
    padding: 0.75rem 1.3rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    border-radius: 48px;
    white-space: nowrap;
    transition: all 0.3s ease;
    font-size: 16px;
    background-color: transparent;
}

.series-tab-wrapper .custom-tab:hover {
    background-color: #2c2f36;
}

.series-tab-wrapper .custom-tab.active {
    background: linear-gradient(90deg, #977902 0%, #FFD21D 100%);
    color: black;
    font-weight: 700;
}
.series-container .series-info{
     background-color: #18202C;
    color: #fff;
    padding: 20px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.recent-match-info {
    background: #1d1f2f;
    border-radius: 8px;
    overflow: hidden;
}

.recent-title {
    font-weight: bold;
    color: white;
    flex-shrink: 0;
}


.ball {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: white;
  flex-shrink: 0;
}

.ball.no-ball { background: rgba(255, 255, 255, 0.08); }
.ball.wicket { background: #d32f2f; }
.ball.four { background: #388e3c; }
.ball.six { background: #a6c8ff; }
.ball.run { background: rgba(255, 255, 255, 0.12); }



.series-tab-wrapper .series-info {
    background-color: #18202C;
    color: #fff;
    padding: 20px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.Team-info-section {
    background-color: #18202C;
    color: #fff;
    padding: 20px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.News-details-container {
    background-color: #18202C;
    color: #fff;
    padding: 20px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.Team-details-container {
    background-color: #18202C;
    color: #fff;
    padding: 20px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.Match-prediction-info {
    background-color: #18202C;
    color: #fff;
    padding: 20px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.News-info {
    background-color: #18202C;
    color: #fff;
    padding: 20px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}


.series-details-container {
    background-color: #18202C;
    color: #fff;
    padding: 20px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/*Ranking-info-section  */

.Ranking-info-section {
    background-color: #18202C;
    color: #fff;
    padding: 20px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.team-ranking-container {
    background-color: #18202C;
    color: #fff;
    padding: 20px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.Ranking-team-t20i-section {
    background-color: #18202C;
    color: #fff;
    padding: 20px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.Ranking-team-tab-wrapper {
    width: 100%;
    overflow-x: auto;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);

}

.Ranking-team-nav-tabs {
    display: flex;
    gap: 0.5rem;
    list-style: none;
    padding: 0;
    margin: 0;
    white-space: nowrap;

}

.Ranking-team-item {
    flex-shrink: 0;
}

.Ranking-team-tab {
    display: inline-block;
    padding: 0.75rem 1.3rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    border-radius: 48px;
    white-space: nowrap;
    transition: all 0.3s ease;
    font-size: 16px;
    background-color: transparent;
}



.Ranking-team-tab.active {
    background: linear-gradient(90deg, #977902 0%, #FFD21D 100%);
    color: black;
    font-weight: 700;
}

.Ranking-container-heading {
    font-size: 24px;
}

.Rankings-tab-wrapper {
    border: 1px solid #2C333D;
    /* or your desired border color */
    border-radius: 999px;
    display: inline-block;
    padding: 4px;
    background-color: #1F2630;
    /* optional: background of the whole tab wrapper */
}

.Ranking-nav-tabs {
    display: flex;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.Ranking-tab-item {
    display: flex;
}

.ranking-option {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    border-radius: 48px;
    text-decoration: none;
    color: white;
    background-color: transparent;
    transition: background-color 0.3s ease;
}

.custom-ranking-tab-wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: 2rem;


}

.custom-rank-buttons {
    display: flex;
    justify-content: center;
    gap: 16px;
    list-style: none;
    padding: 0;
    margin: 0;
    flex-wrap: wrap;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 40px;
}

.custom-rank-buttons a {
    text-decoration: none;
}

.custom-rank-item {
    padding: 8px 20px;
    background-color: #18202C;
    border-radius: 20px;
    color: #fff;
    text-decoration: none;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}

.custom-rank-item.active {
    border: 1px solid rgba(255, 255, 255, 1);
    background-color: rgba(255, 255, 255, 0.12);
}

.custom-Live-score-tab-wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: 2rem;

}

.custom-Live-score-buttons {
    display: flex;
    justify-content: flex-start; /* align to left so scroll starts at first item */
    gap: 16px;
    list-style: none;

    margin: 0;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 40px;

    flex-wrap: nowrap;       /* keep items in one row */
    overflow-x: auto;        /* enable horizontal scroll */
    scrollbar-width: none;   /* hide scrollbar Firefox */
}

.custom-Live-score-buttons::-webkit-scrollbar {
    display: none; /* hide scrollbar Chrome/Safari */
}

.custom-Live-score-item {
    padding: 8px 20px;
    background-color: #18202C;
    border-radius: 20px;
    color: #fff;
    text-decoration: none;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}

.custom-Live-score-buttons a {
    text-decoration: none;
}

.custom-Live-score-item.active {
    border: 1px solid rgba(255, 255, 255, 1);
    background-color: rgba(255, 255, 255, 0.12);
}

.match-status-container {
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    padding: 10px 20px;
    text-align: center;
}

.Ranking-feature-tab.active {
    background-color: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.12);
}


.ranking-option.active {
    background-color: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.12);
}


.T20I-team-section {
    background-color: #212E44;
    padding-bottom: 10px;
}

.T20I-Bowling-section {
    background-color: #212E44;
    padding-bottom: 10px;
}

.ODI-Bowling-section {
    background-color: #212E44;
    padding-bottom: 10px;
}

.Test-Rounder-section {
    background-color: #212E44;
    padding-bottom: 10px;
}

.Test-Bowling-section {
    background-color: #212E44;
    padding-bottom: 10px;
}

.ODI-Rounder-section {
    background-color: #212E44;
    padding-bottom: 10px;
}

.batting-ranking-body {
    margin: 0rem 8px;
    background-color: rgba(255, 255, 255, 0.08);

    border: 1px solid rgba(255, 255, 255, 0.12);
}

.Bowling-ranking-body {
    margin: 0rem 8px;
    background-color: rgba(255, 255, 255, 0.08);

    border: 1px solid rgba(255, 255, 255, 0.12);
}

.Rounder-ranking-body {
    margin: 0rem 8px;
    background-color: rgba(255, 255, 255, 0.08);

    border: 1px solid rgba(255, 255, 255, 0.12);
}

.Bowling-ranking-left .player-name {
    font-size: 14px;

}

.Rounder-ranking-left .player-name {
    font-size: 14px;
}

.batting-ranking-left .player-name {
    font-size: 14px;
}

.rounder-Rankings-container {
    background-color: #18202C;
    color: #fff;
    padding: 20px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.Batting-ranking-container {
    background-color: #18202C;
    color: #fff;
    padding: 20px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.Bowling-ranking-container {
    background-color: #18202C;
    color: #fff;
    padding: 20px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.Bowling-Rankings-container {
    background-color: #18202C;
    color: #fff;
    padding: 20px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.Test-Batting-section {
    background-color: #212E44;
    padding-bottom: 10px;
}

.T20I-Batting-section {
    background-color: #212E44;
    padding-bottom: 10px;
}

.ODI-Batting-section {
    background-color: #212E44;
    padding-bottom: 10px;
}

.T20I-Rounder-section {
    background-color: #212E44;
    padding-bottom: 10px;
}

.Ranking-body {
    margin: 0rem 8px;
    background-color: rgba(255, 255, 255, 0.08);

    border: 1px solid rgba(255, 255, 255, 0.12);
}

.ODI-team-section {
    background-color: #212E44;
    padding-bottom: 10px;
}

.Test-Team-section {
    background-color: #212E44;
    padding-bottom: 10px;
}

.Batting-ranking-container {
    background-color: #18202C;
    color: #fff;
    padding: 20px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.Ranking-body-left {
    padding: 8px;
}

.Ranking-body .team-points {
    color: rgba(255, 255, 255, 1);
    font-weight: 400;
}

.view-table-btn {
    background-color: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 48px;
    margin: 8px;
    color: #fff;
}

.view-table-btn span {
    color: #fff;
}

.team-rank-content {
    padding: 0px 20px;
}

.ranking-table-header {
    background: linear-gradient(90deg, #977902 0%, #FFD21D 100%);
    border-radius: 8px 8px 0px 0px;
    color: #000;
    font-weight: 600;
    font-size: 18px;
}

.Latest-article-container {
    background-color: #18202C;
    color: #fff;
 
    border-radius: 10px;

}

.latest-news-title {

    padding-bottom: 10px;
    padding-left: 0 !important;
    padding-right: 0 !important;
    display: block;
    font-size: 24px;
    font-weight: 600;
    margin:1rem 0;
    /* spans full width */
    width: 100%;
    /* ensures full width inside container */
    
    /* optional spacing */
}



/* series-Fixture-container */

.series-fixture-container {
    background-color: #18202C;
    color: #fff;
    padding: 10px 20px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.series-fixture-card {
    background-color: rgba(255, 255, 255, 0.08);
    color: #fff;
    padding: 10px 20px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.series-fixture-header {
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);

}

.series-fixture-header .series-fixture-date {
    font-size: 14px;
}

.series-fixture-header .series-fixture-status.text-completed {
    color: #14B305;
    font-weight: 600;
}

.series-fixture-header .series-fixture-status.text-upcoming {
    color: #fff;
      font-weight: 600;
}

.Match-status-box-header .Match-box-status.text-upcoming {
    color: #fff;
      font-weight: 600;
}

.Match-status-box-header .Match-box-status.text-cancelled {
    color: #F14F4F !important;
      font-weight: 600;
}


.Match-status-box-header .Match-status-box-result.text-cancelled{
      color: #F14F4F !important;
      font-weight: 600;}

.Match-status-box-header .Match-box-status.text-completed {
    color: #14B305;
    font-weight: 600;
}


.Match-status-box-header .Match-status-box-result.text-completed {
    color: #14B305;
    font-weight: 600;
}

.series-fixture-header .series-fixture-status.text-Live {
    color: #F14F4F;
}

.series-fixture-header .series-fixture-result.result-text {
    color: #14B305;
    font-weight: 600;
}

.filter-select .dropdown-wrappe {
    background-color: #18202C;
    color: #fff;
    padding: 10px 20px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #000;
}
/* Make select text & background visible */

.filters-bar .form-select option {
     background-color: #18202C; /* dark background */
    color: #fff !important; /* white text */
}

/* On focus */

/* Filters bar container */
.filters-bar {
   
   
    border-radius: 8px;
}

/* Select dropdowns */
.filters-bar .form-select {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #fff !important;
    font-size: 14px;
    padding: 12px 40px 12px 40px !important; /* Increased right & left padding */
    border-radius: 48px !important;
    appearance: none !important;
}

/* Keep your icon flush with padding edge */



/* Focus state */
.filters-bar .form-select:focus {
    box-shadow: none !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    outline: none !important;
}

/* Chevron icon */


/* Clear button */
.filters-bar .btn-outline-light {
    border-radius: 40px !important;
    font-size: 14px !important;
    padding: 6px 14px !important;
    color:  #fff!important;
    border-color: rgba(255, 255, 255, 0.4) !important;
}

/* Mobile layout */
@media (max-width: 768px) {
    .filters-bar {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }

    .filters-bar .filter-select,
    .filters-bar .btn-outline-light {
        width: 100% !important;
    }

    .filters-bar .btn-outline-light {
        order: 3;
    }
}


.series-scoreboard-row {
    gap: 24px;
}

.series-fixture-meta {
    border-right: 1px solid rgba(255, 255, 255, 0.8);
}


.series-fixture-container {
    background-color: #18202C;
    color: #fff;
    padding: 10px 20px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.Match-status-box-card {
    background-color: rgba(255, 255, 255, 0.08);
    color: #fff;
    padding: 10px 20px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.Match-status-box-header {
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);

}

.Match-status-box-header .Match-status-box-date {
    font-size: 14px;
}



.series-fixture-header .Match-box-status.text-upcoming {
    color: #fff;
}

.series-fixture-header .Match-box-status.text-Live {
    color: #F14F4F;
}

.series-fixture-header .Match-box-status.result-text {
    color: #14B305;
}


.fantasy-ground {
    background-color: #212E44;
border-top-left-radius: 40px;
border-bottom-left-radius: 00px;
border-top-right-radius: 12px;
border-bottom-right-radius: 0px;
border: 1px solid rgba(255, 255, 255, 0.12);

    padding: 20px 0px 0px 0px;
    color: white;
    
}

.fantasy-top-info {
    text-align: center;
    margin-bottom: 15px;
    padding: 10px 20px;
}

.last-updated-text {
    font-size: 14px;
    color: #fff;
    margin-bottom: 10px;
    text-align: left;
}

.fantasy-tabs {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 10px;
}

.fantasy-tab {
    background: transparent;
    border: 1px solid #555;
    color: white;
    padding: 5px 15px;
    border-radius: 20px;
    cursor: pointer;
}

.fantasy-tab.active {
    background-color: #1f6feb;
    border-color: #1f6feb;
}

.team-info {
    display: flex;
    justify-content: space-around;
    font-size: 14px;
    margin-bottom: 15px;
}

.team-wi {
  background-color: #FFEFA0;
  font-weight: bold;
    color: #000;
    padding: 4px;
    border-radius: 4px;
}

.team-pak {
  background-color: #FFFFFF;
  font-weight: bold;
  color: #000;
      padding: 4px;
      border-radius: 4px;
}
.team-info {
  display: flex;
  justify-content: space-between; /* spread items horizontally */
  align-items: center; /* vertically center all items */
}

.team-info-item {
  display: flex;
  flex-direction: column;
}

/* 1st item: align left (default, flex-start horizontally) */
.team-info-item:nth-child(1) {
  align-items: flex-start;
  gap: 4px;
}

/* 2nd item: align center */
.team-info-item:nth-child(2) {
  align-items: center;
   gap: 4px;
}

/* 3rd item: align flex-start horizontally but center vertically */
.team-info-item:nth-child(3) {
  align-items: flex-start;
  justify-content: center;
   gap: 4px;
  height: 100%; /* ensure it has height for vertical centering */
}

.team-info-value {
  display: inline-flex;  /* or flex */
  gap: 8px; /* space between children */
  align-items: center;
}





.match-fantasy-tips-container .fantasy-tabs-vertical {
    display: flex;
    flex-direction: row; /* side-by-side */
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.12);
    width: fit-content; /* shrink to content */
    border-radius: 40px; /* rounded corners */
    margin: 0 auto; /* center horizontally */
}

.match-fantasy-tips-container .fantasy-tab-vertical {
    background: transparent;
    color: white;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    border-radius: 40px;
    text-align: left;
   
}

.match-fantasy-tips-container .fantasy-tab-vertical.active {
    background: #1e2a44;
    color: white;
    border: 1px solid rgba(255, 255, 255, 1);
}

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


.center-row {
    margin: 10px 0;
}
/* Section layout */
.match-fantasy-tips-container .fantasy-field {
    position: relative;
    background: url('../images/ground-img.png') no-repeat center center / cover;
    width: 100%;
  
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    gap: 10px;
}

.match-fantasy-tips-container .players-row {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 10px;
}
.match-fantasy-tips-container .fantasy-Tips-title{
    text-align: center;
    align-items: center;
    margin-bottom: 20px;
}
.match-fantasy-tips-container .player {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 5px;
    position: relative;
}

.match-fantasy-tips-container .player-img {
    width: 50px;               /* fixed width */
    height: 50px;              /* fixed height */
         /* maintain aspect ratio, crop if needed */
    border-radius: 50%;        /* make it round */
    border: 2px solid white;   /* white border */
    display: block;            /* remove extra spacing from inline images */
}



.match-fantasy-tips-container .player-name {
 
   
    font-size: 12px;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 4px;
    margin-top: 5px;
}

.player-name.team-a {
    background-color: #FFEFA0;
    color: #000;
}

.player-name.team-b {
    background-color: #fff; /* Blue for Team B */
    color: #000;
}

.match-fantasy-tips-container .player-credits {
    font-size: 12px;
    font-weight: bold;
    color: white;
    margin-top: 3px;
}

/* Center player bg style */
.center-bg {
    background: rgba(255, 255, 255, 0.15);
    padding: 2px 6px;  /* Less padding than before */
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Adjust spacing inside player */
.center-bg .player-img {
    margin-bottom: 2px; /* tighter spacing below image */
}

.center-bg .player-name {
    margin-top: 2px;
}

.center-bg .player-credits {
    margin-top: 0;
}

/* Optional Captain/Vice-Captain badge */

.badge.c {
    background: #ff4d4d;
}

.player-badge.vc {
    position: absolute;
    top: -5px; /* moves slightly above the player image */
    left: -20px; /* moves slightly outside to the left */
    background-color: #ffcc00; /* gold badge */
    color: #000;
    font-size: 10px;
    font-weight: bold;
    padding: 4px 6px;
    border-radius: 50%; /* circular badge */
    border: 2px solid #fff; /* white border for better visibility */
}


/* series-stats-container */

.series-stats-container {
    background-color: #18202C;
    color: #fff;
    padding: 10px 20px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}


.series-news-status {
    flex-wrap: nowrap !important;
    /* prevent wrapping */
    overflow-x: auto;
    /* allow horizontal scroll */
    -webkit-overflow-scrolling: touch;
    /* smooth scroll on mobile */
}

/* Optional: hide scrollbar for cleaner UI */
.series-news-status::-webkit-scrollbar {
    display: none;
}

.series-stats-card {
    background-color: #212E44;
    border-radius: 10px;
    padding-bottom: 20px;
    padding-left: 0;
    padding-right: 0;

}

.match-location-format {
    font-size: 16px;
}


.series-stats-header {
    background: linear-gradient(to right, #f7c400, #fcb900);
    color: #000;
    font-weight: 500;
    text-align: center;
    padding: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.series-stats-list {
    padding: 15px;
}

.series-stats-item {
    display: block;
    width: 100%;
    background-color: #212E44;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    color: #fff;
    padding: 8px 12px;
    margin-bottom: 8px;
    text-align: center;
    transition: 0.2s;
    font-size: 16px;
}


.series-content .series-heading {
    font-size: 24px;
}




.inner-hero-section {
    background: url("../images/inner-hero.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding-top: 260px;
    padding-bottom: 200px;
    color: rgba(255, 255, 255, 1);
}

.inner-hero-section .page-title {
    font-size: 64px;
    color: rgba(255, 255, 255, 1);
}

.about-info-content {
    font-size: 20px;
    color: rgba(255, 255, 255, 1);
    text-align: left;
    line-height: 1.6;

}

.about-info-description {
    font-size: 20px;
    color: rgba(255, 255, 255, 1);
    text-align: left;

}


.Termcondition-info-content {
    font-size: 20px;
    color: rgba(255, 255, 255, 1);
    text-align: left;
    line-height: 1.6;

}

.Termcondition-info-description {
    font-size: 20px;
    color: rgba(255, 255, 255, 1);
    text-align: left;

}


.Privacy-policy-info-content {
    font-size: 20px;
    color: rgba(255, 255, 255, 1);
    text-align: left;
    line-height: 1.6;

}

.Privacy-policy-info-description {
    font-size: 20px;
    color: rgba(255, 255, 255, 1);
    text-align: left;

}

.Disclaimer-info-content {
    font-size: 20px;
    color: rgba(255, 255, 255, 1);
    text-align: left;
    line-height: 1.6;

}

.Disclaimer-info-description {
    font-size: 20px;
    color: rgba(255, 255, 255, 1);
    text-align: left;

}

/* Wrapper around the select + icon */
.series-stats-feature-filters .select-wrapper {
    position: relative;
    display: inline-block;
}

/* The select element */
.series-stats-feature-filters .form-select.custom-select-bg {
    background-color: #18202C;
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 40px;
    appearance: none;
    padding: 10px 40px 10px 20px;
    font-size: 14px;
    min-width: 160px;
}

.series-stats-feature-filters .form-select.custom-select-bg option {
    background-color: #18202C;
    color: white;
}


/* The chevron icon */
.series-stats-feature-filters .select-wrapper .fa-chevron-down {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: white;
    font-size: 12px;
}

/* Optional: spacing for the section title */
.series-stats-feature-title {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 12px;
}

.select-container select {
    padding: 8px 12px;
    font-size: 16px;
}

.form-select:focus {
    border-color: initial;
    /* Optional: Reset border color */
    box-shadow: none !important;
    /* Remove box-shadow */
}


.fantasy-card {
    background-color: rgba(255, 255, 255, 0.08);
    color: #fff;
    padding: 10px 20px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.Fantasy-match-venue {
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    text-align: left;
}


.fantasy-player-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    background-color: #18202C;
    color: #fff;
    padding: 0px 20px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.fantasy-player-info {
    flex: 1;
    min-width: 120px;
}

.fantasy-compare-btn {
    font-size: 12px;
}

.icc-ranking-card {
    background-color: rgba(255, 255, 255, 0.08);
    color: #fff;
    padding: 10px 20px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.icc-ranking-card .ranking-label {
    background-color: #00C334;
}

.player-details-card {
    background-color: rgba(255, 255, 255, 0.08);
    color: #fff;
    padding: 10px 20px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.Batting-performance-section {
    background-color: rgba(255, 255, 255, 0.08);
    color: #fff;
    padding: 10px 20px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}


.recent-form-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 2rem;
}


/* Footer */
.footer-section {
    background: url('../images/Footer-img.png') no-repeat center center;
    background-size: cover;
    color: #fff;
    position: relative;
    z-index: 1;
}


.footer-store-link {
    font-size: 15px;
    font-weight: 500;
}

.footer-store-icon {
    width: 20px;
    height: 20px;
    color: white;
    transition: transform 0.2s;
}

.app-store-btn .rounded-pill {
    border: 1px solid rgba(255, 255, 255, 1);
}
@media (max-width: 768px) {
    .app-store-btn {
        flex-direction: column;  /* stack items vertically */
        align-items: center;     /* center buttons */
        gap: 12px;               /* space between them */
    }
}

.rounded-pill .rounded-pill-title {
    font-size: 12px;
    margin-bottom: 0;
}

.rounded-pill .rounded-pill-subtitle {
    font-size: 20px;
    margin-bottom: 0;
    font-weight: 600;
}

.footer-store-link:hover .footer-store-icon {
    transform: scale(1.1);
    color: #ffcc00;
    /* or any highlight color */
}

.footer-description {
    font-size: 20px;
    text-align: left;
}

.footer-heading {
    font-size: 20px;
}

.footer-list li {
    font-size: 16px;
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.footer-bottom .footer-bottom-text {
    font-size: 16px;
}