:root {
    --bs-body-color: #4d4d4d;
    --blue: #3894D1;
    --dark-blue: #0D556D;
    --cyan-blue: #ccf0ff;
    --light-blue: #c3dff1;
    --white: #fff;
    --bs-primary-rgb: 56,148,209;
    --bs-warning-rgb: 255,208,70;
    --gray-10: #1a1a1a;
    --bs-border-radius: 0.5rem;
    --yellow: #FFD046;
    --bs-success-rgb: 50, 205, 50;
    --bs-danger-rgb: 239,0,0;
}

/* Common CSS */

body {
    font-family: 'Poppins', sans-serif;
    font-size: 0.875rem;
}

a {
    transition: all 0.2s linear;
    text-decoration: none;
    color: var(--dark-blue);
}

    a:hover {
        color: var(--blue);
    }

.cursor-pointer {
    cursor: pointer !important;
}

h2, .h2 {
    font-weight: 600;
    color: var(--gray-10);
}

h3, .h3 {
    font-size: 1.375rem;
    font-weight: 600;
    color: var(--gray-10);
}
/* 22px */
h5, .h5 {
    font-size: 1.125rem;
}
/* 18px */

.fs-16 {
    font-size: 1rem !important;
}
/* 16px */
.accordion-button {
    font-size: 0.875rem;
}

.text-blue-dark {
    color: var(--dark-blue) !important;
}

.text-blue {
    color: var(--blue) !important;
}

.min-w75px {
    min-width: 75px;
}

.min-w-80px {
    min-width: 40px;
}

.min-w-150px {
    min-width: 50px;
}

.min-w-160px {
    min-width: 160px;
}

.w-md-100 {
    width: 45px;
}

.w-md-50 {
    width: 30px;
}

.w-30px {
    width: 30px;
}

.h-30px {
    height: 30px;
    line-height: 30px;
}

.bg-cyan-blue {
    background-color: var(--cyan-blue) !important;
}

.bg-blue {
    background-color: var(--blue);
}

.border-blue {
    border-color: var(--blue) !important;
}

.player-image-80px{width:80px; height:80px;}

.navbar-nav .dropdown-toggle::after {
    content: "\f107";
    font-weight: 900;
    border: none;
    font-family: 'Font Awesome 6 Free';
    vertical-align: top;
}

.dropdown-toggle::after {
    border: none;
}

.breadcrumb-item + .breadcrumb-item::before {
    color: var(--white);
    font-size: 10px;
    padding-top: 5px;
}

.btn {
    font-size: 0.875rem;
}

    .btn.btn-primary {
        background-color: var(--blue);
        border-color: var(--blue);
    }

        .btn.btn-primary:hover {
            background-color: var(--dark-blue);
            border-color: var(--dark-blue);
        }

.navbar-toggler:focus, .btn-close:focus {
    box-shadow: none;
}

.fs-14 {
    font-size: 0.875rem;
}

.fs-12 {
    font-size: 0.75rem !important;
}

.table th, .table td {
    padding: 0.75rem 0.5rem;
}

.rounded-left-top {
    border-radius: 8px 0 0 !important;
}

.rounded-right-top {
    border-radius: 0 8px 0 0 !important;
}

.card.country-bg-1 {
    background-color: #f5ffee
}

    .card.country-bg-1 .card-footer {
        background-color: #e0fdcb
    }

.card.country-bg-2 {
    background-color: #ebf4fa
}

    .card.country-bg-2 .card-footer {
        background-color: #c3dff1
    }

.card.country-bg-3 {
    background-color: #f6e6e6
}

    .card.country-bg-3 .card-footer {
        background-color: #e4b3b3
    }

.card.country-bg-4 {
    background-color: #ebe8e8
}

    .card.country-bg-4 .card-footer {
        background-color: #c1b8b9
    }

.card.country-bg-5 {
    background-color: #e7eef0
}

    .card.country-bg-5 .card-footer {
        background-color: #b6ccd3
    }

.card.country-bg-6 {
    background-color: #f5ffee
}

    .card.country-bg-6 .card-footer {
        background-color: #e0fdcb
    }

.card.country-bg-7 {
    background-color: #fffbed
}

    .card.country-bg-7 .card-footer {
        background-color: #fff1c8
    }

/* Carousel CSS */
.carousel-control-prev-icon {
    background-image: url(../images/arrow-left-white.svg);
    background-size: 11px auto;
}

.carousel-control-next-icon {
    background-image: url(../images/arrow-right-white.svg);
    background-size: 10px auto;
}

.carousel-control-next-icon, .carousel-control-prev-icon {
    width: 38px;
    height: 38px;
    background-color: var(--blue);
}

.owl-nav .owl-prev, .owl-nav .owl-next {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: absolute;
    top: 50%;
    margin-top: -19px;
    left: 15px;
    right: auto;
}

.owl-nav .owl-next {
    left: auto;
    right: 15px;
}

.owl-nav-right-top .owl-nav {
    position: absolute;
    top: -28px;
    right: 0px;
    width: 75px;
}

    .owl-nav-right-top .owl-nav .owl-prev {
        right: 0;
    }

    .owl-nav-right-top .owl-nav .owl-next {
        right: 0;
    }

.carousel-control-white .carousel-control-next-icon, .carousel-control-white .carousel-control-prev-icon {
    background-color: var(--white);
    width: 26px;
    height: 26px;
}

.carousel-control-white .carousel-control-prev-icon {
    background-image: url(../images/arrow-left-blue.svg);
    background-size: 8px auto;
}

.carousel-control-white .carousel-control-next-icon {
    background-image: url(../images/arrow-right-blue.svg);
    background-size: 7px auto;
}

.accordion .accordion-button:focus {
    box-shadow: none;
}

.accordion .accordion-button.collapsed {
    background-color: transparent;
}

.accordion .accordion-button {
    /*background-color: var(--blue);
    color: var(--white);*/
    background-color: var(--light-blue);
}

    .accordion .accordion-button .accordion-header-title {
        font-weight: 600;
    }

    .accordion .accordion-button.collapsed {
        color: var(--bs-body-colo);
    }

@media (min-width: 992px) {
    .carousel-control-white .carousel-control-next-icon, .carousel-control-white .carousel-control-prev-icon {
        width: 38px;
        height: 38px;
    }

    .carousel-control-white .carousel-control-prev-icon {
        background-size: 11px auto;
    }

    .carousel-control-white .carousel-control-next-icon {
        background-size: 10px auto;
    }

    .owl-nav-right-top .owl-nav {
        width: 100px;
        top: -45px;
    }
}
/* End Carousel CSS */

.nav-underline.nav-style01 .nav-link.active, .nav-underline.nav-style01 .show > .nav-link {
    color: var(--yellow);
}

.nav-underline.nav-style01 .nav-link {
    color: var(--white);
}

.nav.nav-style02 {
    border: 1px solid var(--blue);
    border-radius: 24px;
    -webkit-border-radius: 24px;
}

    .nav.nav-style02 .nav-item .nav-link {
        border-radius: 24px;
        -webkit-border-radius: 24px;
        color: var(--gray-10);
    }

        .nav.nav-style02 .nav-item .nav-link:hover {
            color: var(--blue);
        }

        .nav.nav-style02 .nav-item .nav-link.active {
            font-weight: 600;
            background-color: var(--blue);
            color: var(--white);
        }

/* Loader CSS*/

.loader {
    z-index: 9;
}

    .loader::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: rgba(0, 0, 0, 0.7);
    }

.fancy-spinner {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 5rem;
    height: 5rem;
}

    .fancy-spinner div {
        position: absolute;
        width: 6rem;
        height: 6rem;
        border-radius: 50%;
    }

        .fancy-spinner div.ring {
            border-width: 0.5rem;
            border-style: solid;
            border-color: transparent;
            animation: 2s fancy infinite alternate;
        }

            .fancy-spinner div.ring:nth-child(1) {
                border-left-color: var(--blue);
                border-right-color: var(--blue);
            }

            .fancy-spinner div.ring:nth-child(2) {
                border-top-color: var(--blue);
                border-bottom-color: var(--blue);
                animation-delay: 1s;
            }

        .fancy-spinner div.dot {
            width: 22px;
            height: 22px;
            background: url('../images/loader-icon-blue.png') no-repeat;
            background-size: 22px 22px;
        }

@-webkit-keyframes rotating {
    from {
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes rotating {
    from {
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    to {
        -ms-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.rotating {
    -webkit-animation: rotating 2s linear infinite;
    -moz-animation: rotating 2s linear infinite;
    -ms-animation: rotating 2s linear infinite;
    -o-animation: rotating 2s linear infinite;
    animation: rotating 2s linear infinite;
}

@keyframes fancy {
    to {
        transform: rotate(360deg) scale(0.5);
    }
}

@media (min-width: 768px) {
    h2, .h2 {
        font-size: 1.5rem;
    }
    /* 24px */
    h3, .h3 {
        font-size: 1.375rem;
    }
    /* 22px */

    .min-w-md-150px {
        min-width: 150px;
    }

    .min-w-80px {
        min-width: 50px;
    }

    .max-min-w-md-150px {
        max-width: 150px;
        min-width: 150px;
    }

    .min-w-150px {
        min-width: 150px;
    }

    .w-md-50 {
        width: 50px;
    }

    .w-md-100 {
        width: 100px;
    }

    .w-fitcontent {
        width: fit-content;
    }

    .border-md-end {
        border-right: 1px solid;
    }

    .border-md-bottom-none {
        border-bottom: none !important;
    }
}

@media (min-width: 992px) {

    h2, .h2 {
        font-size: 1.875rem;
    }
    /* 30px */
    h3, .h3 {
        font-size: 1.5rem;
    }
    /* 24px */

    .shadow-lg-sm {
        box-shadow: var(--bs-box-shadow-sm) !important;
    }

    .border-lg-lg {
        border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
    }

    .btn-group-lg > .btn, .btn-lg {
        --bs-btn-padding-y: 0.8rem;
        --bs-btn-padding-x: 2rem;
    }

    .nav-underline.nav-style01 .nav-link {
        font-size: 1.5rem;
    }

    .nav-underline.nav-style01 {
        --bs-nav-underline-gap: 3rem;
    }

    .nav.nav-style02 .nav-item .nav-link {
        padding: 8px 24px;
    }

    .min-w-80px {
        min-width: 80px;
    }
}

@media (min-width: 1200px) {
    .border-xl-end {
        border-right: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
    }
}

@media (max-width: 575px) {
    body .wrapper {
        min-width: 360px;
    }
}

@media (max-width: 399px) {
    .max-w-mobile-90px {
        max-width: 90px;
        text-wrap: wrap;
        display: block;
    }
}

/*tab css*/
.custom-tab .nav-link {
    color: var(--gray-10);
}

    .custom-tab .nav-link.active, .custom-tab .nav-link:hover {
        background-color: var(--blue);
        color: var(--white);
    }

.bg-tab-blue {
    background-image: url(../images/groupback.png);
    height: 100%;
    width: 100%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

/* End Common CSS */

/* Header CSS */

header {
    position: sticky;
    top: 0;
    background: white;
    z-index: 2;
}

.navbar .nav-link {
    font-weight: 500;
}

.navbar-nav .nav-link.active, .navbar-nav .nav-link.show, .nav-link:focus, .nav-link:hover {
    color: var(--blue);
}

.navbar .dropdown-item {
    font-size: 0.875rem;
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
}

    .navbar .dropdown-item:focus, .navbar .dropdown-item:hover {
        color: var(--blue);
    }

.dropdown ul.dropdown-menu-end {
    left: auto;
    right: 0;
}

.dropdown-item:active {
    background-color: var(--white);
}

.header-profile.dropdown ul {
    box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
}

@media (min-width: 992px) {

    .navbar-expand-lg .navbar-nav .nav-link {
        padding: 1.4rem .7rem;
    }

    .dropdown ul {
        display: block;
        position: absolute;
        left: 14px;
        top: calc(100% + 30px);
        margin: 0;
        padding: 10px 0;
        z-index: 99;
        opacity: 0;
        visibility: hidden;
        background: var(--white);
        box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
        transition: 0.3s;
    }

    .navbar .dropdown:hover > ul {
        opacity: 1;
        top: 100%;
        visibility: visible;
    }
}

@media (min-width: 1200px) {
    .navbar-expand-lg .navbar-nav .nav-link {
        padding: 1.4rem 1rem;
    }
}

@media (min-width: 1400px) {
    .navbar-expand-lg .navbar-nav .nav-link {
        padding: 1.4rem 1.3rem;
    }
}
/* End Header CSS */

/*Home page */
.top-players-block .owl-carousel .owl-item img.rounded-circle {
    width: 30px;
}

.card.country-bg-7 {
    background-color: #fffbed;
}

    .card.country-bg-7 .card-footer {
        background-color: #fff1c8;
    }

.fantasy-cricket-img {
    width: 100%;
}

.owl-carousel {
    touch-action: manipulation;
}

@media (min-width: 992px) {
    .top-players-block {
        padding-left: 100px;
        padding-right: 100px;
    }

        .top-players-block .owl-nav .owl-prev {
            left: -70px;
            right: auto;
        }

        .top-players-block .owl-nav .owl-next {
            left: auto;
            right: -70px;
        }

    .fantasy-cricket-img {
        top: -30px;
        right: 20px;
        width: 85px;
        position: absolute;
    }
}

@media (min-width: 1200px) {
    .fantasy-cricket-img {
        width: 140px;
        top: -45px;
    }
}

@media (min-width: 1400px) {
    .top-players-block .owl-carousel .owl-item img.rounded-circle {
        width: 50px;
    }

    .fantasy-cricket-img {
        width: 185px;
        top: -75px;
    }

    .custom-container.container {
        max-width: 1660px;
    }
}
/* End Home page */

/* Footer CSS */
.footer-social-icon a {
    background-color: var(--blue);
    width: 28px;
    height: 28px;
    text-align: center;
    line-height: 26px;
}

    .footer-social-icon a:hover {
        background-color: var(--dark-blue);
    }

@media (max-width: 767px) {
    .footer-logo {
        width: 180px;
    }
}
/* End Footer CSS */

/* Inner Banner CSS */
.inner-banner {
    background-image: url(../images/inner-banner.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}
/* End Inner Banner CSS */

/* Scoreboard Page CSS */
.inner-strip {
    min-height: 55px;
}

    .inner-strip:before {
        content: "";
        width: 100%;
        height: 55px;
        position: absolute;
        background-color: #ccf0ff;
        top: 0;
        z-index: -1;
    }

.squads-block {
    min-height: 90px;
}

.last-five span, .score-event span {
    width: 14px;
    height: 14px;
    display: inline-block;
    vertical-align: top;
    margin: 0 3px;
    border-radius: 100%;
}


@media (min-width: 576px) {
    .squads-block {
        min-height: 75px;
    }
}

@media (max-width: 575px) {
    .point-table th, .point-table td {
        font-size: 13px;
    }
}
/* End Scoreboard Page CSS */

/* Player Info Page */
.player-profile-image-block:before {
    content: "";
    background-color: #3894d1;
    width: 100%;
    height: 85px;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    z-index: 0;
}

.player-profile-image-block .player-profile-image {
    width: 170px;
    height: 170px;
    position: relative;
    background-color: #fff;
    text-align: center;
}

.player-search-section {
    top: 40px;
}

@media (min-width: 768px) {
    .player-search-section {
        top: 55px;
    }
}

@media (min-width: 992px) {
    .player-profile-image-block .player-profile-image {
        width: 212px;
        height: 212px;
    }

    .player-search-section {
        top: 65px;
    }

    .navbar-expand-lg .navbar-nav .dropdown-menu {
        max-height: 300px;
        overflow-y: auto;
    }
}
/* End Player Info Page */


.badge-light {
    background: rgba(0, 0, 0, 0.05);
}

.badge-medium {
    background: rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.text-blue {
    color: #0d1657;
}

.bg-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(rgba(255, 255, 255, 0.0), rgba(000, 000, 000, 0.85));
    z-index: -1;
}

.glass-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.95) 100%);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.animated-underline::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50px;
    height: 3px;
    background: linear-gradient(45deg, #fff, #fff);
    transition: width 0.3s ease;
}

.animated-underline:hover::after {
    width: 100%;
}

@keyframes pulse {
    0% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.7;
        transform: scale(1.05);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.pulse-animation {
    animation: pulse 1.5s infinite;
}

.bg-img {
    background-image: url('../images/img/ipl-bg.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

.team-logo {
    width: 60px;
    height: 60px;
    object-fit: contain;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.15));
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    padding: 8px;
}

.points-table th {
    background: linear-gradient(45deg, #1a237e, #283593);
    color: white;
    font-weight: 600;
}

.points-table th,
.points-table td {
    padding: 15px;
}

.symbol-circle-20 {
    border-radius: 50%;
    display: inline-block;
}

    .symbol-circle-20 .symbol-label {
        width: 20px;
        height: 20px;
        color: var(--white);
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 500;
    }

.fs-12 {
    font-size: 0.75rem !important;
}

.fs-14 {
    font-size: 0.875rem !important;
}