

@media screen and (max-width:1680px){

    .img-card img {
        bottom: 50%;
    }
}

@media screen and (max-width: 1368px){
    .live-brodcasts, #featured-matches, .live-matchs, #featured-teams{
        padding: 0 4%;
    }

}


@media screen and (max-width: 1024px){

    .live-brodcasts, #featured-matches, .live-matchs, #featured-teams{
        padding: 0 10%;
    }

    .img-card img {
        bottom: 50%;
    }

    .services-card {
        height: 400px;
    }

    .hero-left-orange {
        top: 15%;
    }
    .hero-left-orange img {
        width: 80%;
    }
    .live-score-btn {
        top: 34.3%;
    }
    .live-score-container {
        top: 18%;
    }
    .nav-bar .nav-link {
        margin-right: 1.2vw;
    }
    .view-all-btn{
        margin-left: 90%;
    }






    .stats-right {
        width: 50%;
    }
}



@media screen and (max-width: 560px){

    .live-brodcasts, #featured-matches, .live-matchs, #featured-teams{
        padding: 0 6%;
    }

    .nav-bar-logged .navbar-brand img {
        width: 20vw;
    }




    #landing-page{
        background-position: 150% 0;
    }

    .light-text, .bold-text{
        font-size: 4vw;
    }

    .para-text{
        font-size: 3vw;
    }
    .hero-left p {
        font-size: 3vw;
    }
    .nav-bar .nav-link{
        color: black;
    }
    .navbar-collapse{
        background-color: white;
    }    

    .navbar-brand img {
        width: 30vw;
    }
    .nav-bar {
        padding: 5% 5%;
    }

    .nav-bar .nav-link {
        font-size: 4vw;
    }
    .login-btn{
        text-align: center;
        width: fit-content;
        margin-left: auto;
        margin-right: auto;
    }

/*======================================================================================*/




    .hero-logo {
        margin-bottom: 0;
        margin-top: 0;
        width: 50%;
    }
    .hero-left-orange{
        top: 20%;
    }
    .hero-left-orange img {
        width: 50%;
    }
    .hero-right{
        margin-top: 5%;
        margin-left: 10%;
    }
    .ball-img img {
        width: 80%;
    }
    .cricketer-img img{
        margin-left: 0;
        width: 100%;
        margin-top: 0;
    }

    .hero-left {
        margin-top: 0;
        padding: 0 10%;
    }

    .hero-store-icons img{
        width: 100%;
        padding: 10% 5%;
    }
    .hero-left h1{
        font-size: 7vw;
    }
    .hero-left 9{
        font-size: 3vw;
    }
    .hero-left-orange img {
        width: 40%;
    }
    .hero-right {
        top: 5%;
    }
    .get-btn {
        font-size: 4vw;
    }






/*======================================================================================*/




    .services-card{
        height: 350px;
        margin-top: 13%;
    }
    .title-card h2 {
        font-size: 4vw;
    }
    .title-card h1 {
        font-size: 4vw;
    }
    .service-bg{
    }
    .services-mbl{
        display: contents;
    }
    
    .services{
        display: none;
    }

    .img-card img {
        width: 60%;
        margin-left: 10%;
        bottom: 53%;
    }

    .services-card{
        margin: 0 0;
        transform: scale3d(0.95, 1, 1);
        margin-top: 25%;
    }
    .services{
        margin-bottom: 10%;
    }

    .service-bg{
        width: 100%;
    }


/*======================================================================================*/




    #why-choose-img2 {
        width: 35%;
    }
    #why-choose-img1 {
        width: 15%;
    }
    .why-choose-container h4{
        font-size: 4vw;
    }
    .why-choose-indicators{
        bottom: -40%;
    }
    .indicator-bottom h4{
        font-size: 4vw;
        font-weight: 600;
        margin-bottom: 2%;
    }
    .indicator-bottom h5{
        font-size: 3vw;
        text-align: left;
    }
    .indicator-bottom{
        padding: 2% 5% 2% 10%;
    }
    .why-choose-indicators [data-bs-target] {
        height: 2px;
    }

    .indicator-bottom-mbl{
        display: block;
        border-top: 2px solid orange;
    }
    .indicator-bottom-container{
        display: none;
    }
    .why-choose-indicators{
        display: none;
    }
    .why-choose-container {
        height: 95vw;
    }
    #why-choose-img3 {
        width: 70%;
        margin-top: 5%;
        margin-left: 15%;
        margin-bottom: 5%;
    }

    #why-choose-slider .carousel-control-next, .carousel-control-prev {
        top: 20%;
    }
    #why-choose-slider .carousel-control-prev {
        left: 5%;
    }
    #why-choose-slider .carousel-control-next {
        right: 5%;
    }

    #why-choose{
        margin-top: 15%;
    }
    .why-choose-container{
        padding-top: 5%;
    }
    .carousel-control-next img {
        width: 8vw;
        height: 8vw;
    }
    .carousel-control-prev img {
        width: 8vw;
        height: 8vw;
    }
    
/*======================================================================================*/


    .query{
        border-radius: 0;
        overflow: hidden;
        margin-bottom: 10%;
    }
    .query-right h5{
        font-size: 6vw;
        margin-bottom: 3%;
    }
    .query-right h4{
        font-size: 6vw;
        margin-bottom: 0;

    }
    .query-btn {
        font-size: 4vw;
        margin-left: 25%;
    }

    .query-bg-1 {
        width: 65%;
        right: -4%;
    }
    .query-bg-2 {
        width: 55%;
        right: -3%;
    }
    .query-left{
        position: relative;
        content: "";
        height: 100%;
        width: 100%;
    }
    .query-left img{
        position: relative;
        width: 50%;
        /* margin-top: -40%;
        margin-left: -3%;
        margin-bottom: -15.5%; */
        bottom: -8.5%;
        left: -2.8%;
    }

    .query-right {
        margin-top: 10%;
        width: 100%;
        padding: 0 10%;
    }

    .query-right p{
        font-size: 3vw;
    }
    
/*======================================================================================*/

    .club img{
        margin-left: auto;
        margin-right: auto;
    }
    .club h6{
        font-weight: 900;
        font-family: montserrat-bold;
        font-size: 3vw;
        margin-bottom: 2%;
    }
    .club p{
        font-size: 3vw;
        font-weight:800;
        color: #555B6B;
    }
    .clubs-mbl{
        display: block;
    }

    .clubs{
        display: none;
    }
    .club-container{
        margin-bottom: 20%;
    }

    .clubs-mbl .carousel-indicators {
        bottom: -25%;
    }

    .clubs-mbl .carousel-indicators [data-bs-target]{
        background-color: orange;
        width: 5px;
        height: 5px;
        border-radius: 50%;
    }

    .clubs-mbl .carousel-control-prev{
        top: 0;
        left: 10%;
    }

    .clubs-mbl .carousel-control-next{
        top: 0;
        right: 10%;
    }


/*======================================================================================*/



    .live-score-btn {
        font-size: 2vw;
        top: 28%;
    }

    .team img {
        width: 30px;
        height: 30px;
    }
    .team h6 {
        font-size: 3vw;
    }
    .team p{
        font-size: 3vw;
    }
    .live-winner p {
        font-size: 2.6vw;
    }
    .live-score-all {
        font-size: 2vw;
    }
/*======================================================================================*/




    .testi {
        width: 90vw;
        height: 90vw;
    }
    .testi-name h6{
        font-size: 3vw;
        margin-top: 50%;
    }
    .testi-name p{
        font-size: 3vw;
    }

    .testi-name img {
        width: 10vw;
        height: 8vw;
    }
    .testi-star{
        margin-left: 10%;
    }
    .testi-star img {
        width: 5vw !important;
        height: 6vw !important;
    }
    .testi-content {
        font-size: 3vw;
        line-height: 30px;
    }

    .testi-img{
        margin-top: 5%;
        display: flex;
        justify-content: space-between;
    }
    .testi-img img{
        width: 35vw;
        height: 100%;
    }

    .slick-dots li button:before{
        font-size: 6vw;
    }

/*======================================================================================*/


    .web-img{
        display: none;
    }
    .mbl-img{
        display: block;
    }


/*======================================================================================*/

    .use-services {
        overflow: hidden;
        height: 130vw;
        border-radius: 0;
        margin-top: 10%;
    }

    .use-services-content {
        padding: 10% 0;
    }

    .use-services-content .hero-store-icons{
        flex-direction: column;
        align-items: center;
        text-align: center;
        margin-top: 5%;
    }

    .use-services-content .hero-store-icons img {
        width: 80%;
        padding: 3% 5%;
    }

    .use-services-content h3{
        font-size: 6vw;
    }
    .use-services-content p{
        font-size: 3vw;
    }

    .use-services-right{
        overflow: hidden;
    }
    .use-services-right img{
        position: absolute;
        bottom: -35%;
        height: 70%;
    }

/*======================================================================================*/


    .footer-logo{
        display: flex;
        justify-content: space-between;
    }
    .footer-logo img{
        width: 20%;
        height: 100%;
    }
    .footer-logo p{
        font-size: 2vw;
        width: 50%;
    }

    .my-footer{
    }

    .my-footer ul{
        margin-left: 0;
        padding-left: 0;
        margin-top: 5%;
        
    }
    .my-footer li{
        font-size: 3vw;
        line-height: 1;
    }
    .my-footer p {
        font-size: 3vw;
        margin-bottom: 5%;
    }
    .my-footer h4{
        margin-bottom: 2%;
    }
    .newsletter{
        padding: 0;
        font-size: 3vw;
    }

    .social-media {
        width: 100%;
        text-align: center;
        margin-bottom: 5%;
    }
    .subscribe h4 {
        font-size: 4vw;
    }
    .subscribe {
        width: 100%;
        margin-left: 0;
    }








































    #featured-matches{
        margin: 0 auto;
        padding: 10% 6%;
    }
    #featured-matches .slick-slider .slick-track, #featured-matches .slick-slider .slick-list{
        height: 75vw !important;
    }

    .featured-match , .live-match, .featured-team{
        width: 90vw;
        margin: 10% auto;
    }
    .featured-match-top h6>span{
        font-size: 3vw;
        margin-left: 35%;
    }

    .featured-match-top img , .small-icon{
        width: 10vw;
        height: 10vw;
    }
    .featured-match-top h5 , .live-match-bottom h5 , .featured-team-content h5{
        font-size: 3.25vw;
    }    
    .featured-match-top h6 , .live-match-bottom h6 , .featured-team-content h6 , .featured-team-content h6 .c{
        font-size: 2.9vw;
    }    
    .featured-match-mid h5, .live-match-bottom p{
        font-size: 2.9vw;
    }
    .featured-match-mid img{
        width: 3.5vw;
    }
    .featured-match-mid h6{
        font-size: 2.9vw;
    }    
    .featured-match-bottom h6{
        font-size: 2.9vw;
    }    
    .score{
        font-size: 3vw;
    }
    .yet-bat{
        font-size: 3vw;
    }
    .featured-match-bottom h6>span {
        margin-left: 30%;
    }

    .live-matchs .slick-slider .slick-track, .live-matchs .slick-slider .slick-list{
        height: 80vw !important;
    }
    .view-all-btn{
        margin-left: 35%;
    }
    .team-follow-btn{
        font-size: 2.9vw;
    }

    #featured-teams .slick-slider .slick-track, #featured-teams .slick-slider .slick-list{
        height: 35vw !important;
    }

    .top-bar-button {
        border-radius: 20px;
        background-color: #EE8E21;
        color: #ffff;
        font-size: 3vw;
        padding: 5px 5px;
        margin: 2% 0;
    }
    
    .top-bar-buttons {
        width: 50%;
    }
    .top-bar-heading {
        font-size: 4vw;
    }
    
    .top-bar {
        margin: 2% 2%;
    }

    .live-brodcasts iframe {
        border-radius: 5px;
        height: 90%;
        margin: 5% auto;
    }
    .live-brodcasts{
        margin: 5% auto;
    }










    .main-grid{
        grid-template-columns: auto;
        margin-left: auto;
        margin-right: auto;
        grid-row-gap: 1%;
        margin: 10% 0;
    }

    .main-grid .featured-match{
        margin: 0 auto;
    }

     .main-grid .live-match{
        width: 90vw;
        margin: 0 auto;
    }

    .main-grid .featured-match-top h5 , .main-grid .live-match-bottom h5{
        font-size: 3.25vw;
    }

    .main-grid .featured-match-bottom h6>span  , .main-grid .live-match-bottom h6>span{
        margin-left: 30%;
    }
    .filter-dashboard {
        background-color: #F4F5FB;
        padding: 5%;
        width: 80%;
        position: fixed;
        left: -102%;
        top: 15%;
        z-index: 2;
        transition: left 500ms ease;
        border-radius: 0 10px 10px 0;
    }
    .filter-btn{
        display: block;
        position: absolute;
        right: -35%;
        top: 45%;
        border: none;
        color: white;
        background-color: #243B7C;
        padding: 2% 5%;
        text-transform: uppercase;
        
        transform-origin: top left;
        transform: rotate(-90deg);
        transition: left 500ms ease;

    }

    .filter-dashboard-active{
        left: -22%;
    }
    .filter-icon{
        width: 15px;
        height: 15px;
    }

    .main-grid .live-match-bottom h6 {
        margin: 2% 0 0 -58%;
    }

    .location-icon{
        margin-right: 0;
    }







    .margin-div {
        margin-top: 15%;
    }

    .back-btn{
        font-size: 2vw;
        width: 30px;
    }
    .back-btn img{
        width: 20%;
    }

    .about-team-tabs a{
        font-size: 3.25vw;
        padding: 3% 3%;
        text-align: center;
    }
    .about-team-top button{
        font-size: 2.5vw;
        width: 60px;
    }

    .about-team-top{
    border-top: 1px solid gainsboro;
    }














    .back-btn {
        font-size: 2vw;
        width: 65px;
        display: none;
    }
    
    .back-btn img {
        width: 38%;
        margin-bottom: 5%;
    }
    
    .player-profile-name{
    width: 100%;
    margin-left:0;
    }
    
    .featured-match-top img, .small-icon {
        width: 11vw;
        height: 11vw;
        margin-top: auto;
        margin-bottom: auto;
    }
    
    .player-profile-name h5 {
        font-size: 3vw;
    }
    .player-profile-content h6 {
        font-size: 3vw;
    }
    .player-profile-content p {
        font-size: 3vw;
        margin-bottom: 4%;
        width: max-content;
    }
    .player-profile-name{
        width: 100% !important;
        margin-left: -5%;
    }
    .about-team-top-btns {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .gray-background {
        padding-bottom: 20%;
    }
    .members-grid {
        grid-template-columns: auto;
        grid-row-gap: 1%;
        width: fit-content;
        padding: 1%;
        margin: 2% auto;
        height: 100%;
        padding-bottom: 24%;
    }
    .player-profile {
        width: 90vw;
        height: 100%;
    }
    .player-profile-content h5 {
        font-size: 3.25vw;
    }
    .player-profile-content p {
        font-size: 2.9vw;
        margin-bottom: 4%;
        width: max-content;
    }
    .player-profile-content h6 {
        font-size: 2.9vw;
    }
    









    .stats-container{
        padding: 5% 0;
    }

    .stats{
        grid-template-columns: auto auto auto;
    }
    .stats-filter {
        width: 40%;
        padding: 2%;
        margin-right: 4%;
    }
    .stats-container .filter-dashboard {
        width: 65%;
    }
    .stats-container .filter-dashboard .form-select{
        font-size: 3vw;
    }
    
    .stats-filter .form-select {
        font-size: 1.5vw;
    }
    .form-select {
        background-size: 8px 8px;
    }
    
    .stats-filter .form-label {
        font-size: 2.8vw;
    }
    .location-checkbox, .status-checkbox {
        font-size: 3vw;
    }
    .select-stats-type .location-checkbox{
        font-size: 2vw;
    }
    .location-checkbox-dropdown {
        font-size: 3vw;
    }
    
    .stats-right {
        width: 90%;
        height: 100%;
        padding: 2% 2% 15% 2%;
    }
    
    .stats-right label {
        font-size: 1.8vw;
    }
    
    .stat {
        width: 100%;
        height: 100%;
    }
    
    .stat h5 {
        font-size: 3.25vw;
    }
    
    .stat p {
        font-weight: 600;
        font-size: 2.5vw;
        margin-bottom: 10%;
    }
    .stats-filter hr {
        margin: 5% 0;
    }

    .members{
        grid-template-columns: auto;
    }
    .members-right{
        width: 90%;
        padding-bottom: 50%;
    }
    .member-board .player-profile {
        width: auto;
        height: auto;
    }
    .member-board-top .player-profile-content h5 {
        font-size: 3.25vw;
    }
    .member-board-top .player-profile-content h6 {
        font-size: 2.9vw;
    }
    .member-board-mid table td h6 {
        font-size: 2.9vw;
    }
    .member-board-mid table td p {
        font-size: 2.3vw;
    }
    .member-board-bottom table td p span {
        font-size: 2.6vw;
    }
    .member-board-bottom table td p {
        font-size: 2.4vw;
    }
    .yellow-text {
        font-size: 2.9vw;
    }
    .member-board-top .player-profile-content h5 img{
        width: 10%;
    }

    .gallery-grid{
        grid-template-columns: auto;
    }
    .gallery-grid img {
        width: 100%;
    }




    /*=======================================================================*/

    .no-match{
        width: 100%;
    }
    .no-match p{
        font-size: 3vw;
        line-height: 20px;
    }


    .add-img p {
        font-size: 2.5vw;
    }
    .team-name-input .form-control, .team-name-input .form-select {
        font-size: 2.9vw;
        margin-bottom: 5%;
    }
    .team-name-input label {
        font-size: 2.9vw;
    }
    .team-player-tabs a{
        font-size:2.9vw;
        padding: 4% 0;
    }
    .name-search input {
        font-size: 2.9vw;
    }
    .search-result {
        font-size: 2.7vw;
        margin: 2% 0 2% 5%;
    }
    .players-name-grid {
        grid-template-columns: auto;
    }
    .players-name-grid .player-profile{
        width:85vw;
    }
    .team-player-content{
        padding-bottom: 55%;
    }
    .player-list p {
        font-size: 2.9vw;
    }













    /*========================================================*/

    .create-match {
        width: 100%;
    }
    .gray-bg-outline p {
        font-size: 2.7vw;
    }
    .gray-bg-outline {
       padding: 2% 8%;
    }
    .create-match-inputs .form-control, .create-match-inputs .form-select {
        font-size: 2.9vw;
    }
    .create-match-inputs{
        grid-template-columns: auto;
        padding-bottom: 25%;
    }
    .select-ball {
        grid-template-columns: 100%;
    }
    .select-ball .location-checkbox img{
        width: 9vw;
    }
    .match-officials {
        grid-template-columns: 100%;
        grid-row-gap: 5%;
        margin-bottom: 12%;
    }
    .match-officials .small-icon {
        width: 10vw;
        height: 10vw;
    }
    .match-officials .player-profile-content h5 {
        font-size: 2.75vw;
    }
    .match-officials .player-profile-content p {
        font-size: 2.7vw;
        margin-bottom: 4%;
    }
    .match-officials .player-profile-btn a img {
        width: 6vw;
    }
    .select-ball .location-checkbox{
        margin-bottom: 0;
    }
    .match-detail{
        font-size: 2.8vw;
    }



















    .tournament-image {
        height: 18vw;
    }
    .select-role-option img {
        padding: 0% !important;
        width: 9vw !important;
    }
    .mandatory-icon {
        width: 4vw;
    }
    .check-tournament a {
        font-size: 2vw;
    }
    .select-city {
        padding-bottom: 0;
    }
    .organiser-contact input{
        font-size: 2.8vw;
    }
    .create-match-inputs{
        grid-row-gap: 0;
    }
    .tournament-category {
        grid-template-columns: auto auto;
    }
    .add-tags p {
        font-size: 2.9vw;
    }
    .tag img {
        width: 4vw;
    }
    .add-tags .match-detail {
        font-size: 2.9vw;
    }

    .cancel-btn {
        width: 9vw;
        height: 9vw;
    }
    .cancel-btn img {
        width: 2.7vw;
    }
    .top-bar-heading-left {
        width: 100%;
        align-items: center;
    }



    /*======================================================*/


    .nav-bar-logged .nav-link{
        font-size: 4vw;
    }

    .profile img {
        position: absolute;
        top: 75%;
        left: 75%;
    }



    /*======================================================*/

    .top-bar {
        display: block;
        margin: 2% 4%;
    }
    
    .top-bar-heading {
        font-size: 4vw;
        width: 100%;
    }
    
    .team-btns {
        margin-left: auto;
        margin-right: auto;
        margin-top: 5%;
        margin-bottom: -2.5%;
        width: 100%;
    }
    
    .team-btns button {
        width: 50%;
        font-size: 4vw;
    }
    .top-bar-buttons {
        width: 100%;
    }
    
    .top-bar-button {
        width: 100%;
        margin: 5% 0;
    }




    /*==============================================================*/

    .about-team-tabs{
        grid-template-columns: 25% 25% 25% 25%;
    }



    
    .news-label{
        font-size: 2.8vw;
    }
    .cric-news-mid h6 {
        font-size: 2.7vw;
    }
    .cric-news-mid h5 {
        font-size: 2.9vw;
    }
    .text-blue {
        font-size: 2.8vw;
    }

}








